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.js CHANGED
@@ -156,6 +156,7 @@ function Item(props) {
156
156
  WebkitBoxOrient: 'vertical'
157
157
  }
158
158
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
159
+ component: 'h2',
159
160
  dangerouslySetInnerHTML: {
160
161
  __html: content.description ? content.description : 'Agregue título'
161
162
  },
@@ -170,6 +171,7 @@ function Item(props) {
170
171
  }
171
172
  }
172
173
  })), /*#__PURE__*/React__default.createElement(material.Typography, {
174
+ component: 'p',
173
175
  dangerouslySetInnerHTML: {
174
176
  __html: content.title ? content.title : 'Agregue subtítulo'
175
177
  },
@@ -284,6 +286,7 @@ function Layout1$1(content) {
284
286
  backgroundColor: (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.label_color
285
287
  }
286
288
  })), /*#__PURE__*/React__default.createElement(material.Typography, {
289
+ component: 'h1',
287
290
  dangerouslySetInnerHTML: {
288
291
  __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'
289
292
  },
@@ -300,6 +303,7 @@ function Layout1$1(content) {
300
303
  fontWeight: "bold"
301
304
  }
302
305
  }), /*#__PURE__*/React__default.createElement(material.Typography, {
306
+ component: 'p',
303
307
  dangerouslySetInnerHTML: {
304
308
  __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'
305
309
  },
@@ -356,7 +360,7 @@ var Item$1 = styles.styled(Paper)(function (_ref) {
356
360
  return {};
357
361
  });
358
362
  function Layout1$2(content) {
359
- 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;
363
+ 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;
360
364
  var visible = true;
361
365
  return /*#__PURE__*/React__default.createElement(Grid, {
362
366
  container: true,
@@ -388,14 +392,15 @@ function Layout1$2(content) {
388
392
  backgroundPosition: 'center'
389
393
  }
390
394
  }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
395
+ component: "img",
391
396
  sx: {
392
397
  width: "100%",
393
- paddingTop: '56.25%',
394
398
  backgroundSize: 'center',
395
399
  backgroundPosition: 'center',
396
400
  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") + ")")
397
401
  },
398
- 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'
402
+ 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',
403
+ 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'
399
404
  }))))), /*#__PURE__*/React__default.createElement(Grid, {
400
405
  item: true,
401
406
  xs: 12,
@@ -432,23 +437,24 @@ function Layout1$2(content) {
432
437
  width: "100%",
433
438
  background: "none"
434
439
  }
435
- }, /*#__PURE__*/React__default.createElement(material.Box, null, ((_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.label_active) && /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Chip, {
440
+ }, /*#__PURE__*/React__default.createElement(material.Box, null, ((_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.label_active) && /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Chip, {
436
441
  disabled: true,
437
442
  color: "info",
438
- 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',
443
+ 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',
439
444
  sx: {
440
445
  marginBottom: '16px',
441
446
  fontSize: '1em',
442
447
  borderRadius: '6px',
443
- backgroundColor: (_content$component$su10 = content.component.subcomponent[0]) === null || _content$component$su10 === void 0 ? void 0 : _content$component$su10.label_color
448
+ backgroundColor: (_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.label_color
444
449
  }
445
450
  })), /*#__PURE__*/React__default.createElement(material.Box, {
446
451
  sx: {
447
452
  marginBottom: '16px'
448
453
  }
449
454
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
455
+ component: 'h2',
450
456
  dangerouslySetInnerHTML: {
451
- __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'
457
+ __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'
452
458
  },
453
459
  sx: {
454
460
  whiteSpace: 'pre-wrap',
@@ -465,8 +471,9 @@ function Layout1$2(content) {
465
471
  marginBottom: '16px'
466
472
  }
467
473
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
474
+ component: 'p',
468
475
  dangerouslySetInnerHTML: {
469
- __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'
476
+ __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'
470
477
  },
471
478
  sx: {
472
479
  whiteSpace: 'pre-wrap',
@@ -478,17 +485,17 @@ function Layout1$2(content) {
478
485
  xl: "1.125em"
479
486
  }
480
487
  }
481
- })), ((_content$component$su15 = content.component.subcomponent[0]) === null || _content$component$su15 === void 0 ? void 0 : _content$component$su15.button_active) && /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Button, {
488
+ })), ((_content$component$su17 = content.component.subcomponent[0]) === null || _content$component$su17 === void 0 ? void 0 : _content$component$su17.button_active) && /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Button, {
482
489
  variant: "contained",
483
490
  color: "primary",
484
- href: (_content$component$su16 = content.component.subcomponent[0]) === null || _content$component$su16 === void 0 ? void 0 : _content$component$su16.button_action,
485
- target: ((_content$component$su17 = content.component.subcomponent[0]) === null || _content$component$su17 === void 0 ? void 0 : _content$component$su17.link) == 4 ? '_blank' : '_self',
491
+ href: (_content$component$su18 = content.component.subcomponent[0]) === null || _content$component$su18 === void 0 ? void 0 : _content$component$su18.button_action,
492
+ target: ((_content$component$su19 = content.component.subcomponent[0]) === null || _content$component$su19 === void 0 ? void 0 : _content$component$su19.link) == 4 ? '_blank' : '_self',
486
493
  sx: {
487
494
  width: 'auto',
488
495
  padding: '8px 20px',
489
496
  borderRadius: '40px'
490
497
  }
491
- }, (_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')))))));
498
+ }, (_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')))))));
492
499
  }
493
500
 
494
501
  var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
@@ -537,6 +544,7 @@ function Layout1$3(content) {
537
544
  width: '100%'
538
545
  }
539
546
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
547
+ component: 'h2',
540
548
  dangerouslySetInnerHTML: {
541
549
  __html: content.component.title ? content.component.title : 'Agregue titulo'
542
550
  },
@@ -628,6 +636,7 @@ function Layout1$4(content) {
628
636
  textAlign: content.component.justify_content
629
637
  }
630
638
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
639
+ component: 'h2',
631
640
  dangerouslySetInnerHTML: {
632
641
  __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'
633
642
  },
@@ -654,6 +663,7 @@ function Layout1$4(content) {
654
663
  }
655
664
  }
656
665
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
666
+ component: 'p',
657
667
  dangerouslySetInnerHTML: {
658
668
  __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'
659
669
  },
@@ -793,6 +803,7 @@ function Item$2(props) {
793
803
  }
794
804
  }
795
805
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
806
+ component: 'h2',
796
807
  dangerouslySetInnerHTML: {
797
808
  __html: title ? title : 'Agregue un título'
798
809
  },
@@ -859,6 +870,7 @@ function Item$2(props) {
859
870
  }
860
871
  }
861
872
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
873
+ component: 'h3',
862
874
  dangerouslySetInnerHTML: {
863
875
  __html: item.title ? item.title : 'Agrega título'
864
876
  },
@@ -878,6 +890,7 @@ function Item$2(props) {
878
890
  }
879
891
  }
880
892
  }), /*#__PURE__*/React__default.createElement(material.Typography, {
893
+ component: 'p',
881
894
  dangerouslySetInnerHTML: {
882
895
  __html: item.subtitle ? item.subtitle : 'Agrega subtítulo'
883
896
  },
@@ -1054,163 +1067,271 @@ var List = /*#__PURE__*/function (_AtomicElements) {
1054
1067
  return List;
1055
1068
  }(AtomicElements);
1056
1069
 
1057
- var Item$3 = styles.styled(Paper)(function (_ref) {
1058
- var theme = _ref.theme;
1059
- return _extends({
1060
- backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff'
1061
- }, theme.typography.body2, {
1062
- padding: theme.spacing(2),
1063
- textAlign: 'left',
1064
- color: theme.palette.text.secondary
1065
- });
1066
- });
1067
1070
  function Layout1$6(content) {
1068
- 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;
1069
- var visible = true;
1070
- return /*#__PURE__*/React__default.createElement(material.Container, {
1071
- maxWidth: "lg"
1072
- }, /*#__PURE__*/React__default.createElement(Grid, {
1071
+ return /*#__PURE__*/React__default.createElement(material.Grid, {
1073
1072
  container: true,
1074
- spacing: 4,
1075
- direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
1076
- }, /*#__PURE__*/React__default.createElement(Grid, {
1077
- item: true,
1078
- xs: 12,
1079
- sm: 12,
1080
- md: 6,
1081
- lg: 6,
1082
- xl: 6
1083
- }, /*#__PURE__*/React__default.createElement(material.Slide, {
1084
- direction: "right",
1085
- "in": visible
1086
- }, /*#__PURE__*/React__default.createElement(Item$3, {
1087
- elevation: 0,
1088
- sx: {
1089
- height: "90%",
1090
- width: "100%",
1091
- background: "none"
1092
- }
1093
- }, /*#__PURE__*/React__default.createElement(material.Card, {
1094
1073
  sx: {
1095
- borderRadius: "24px",
1096
- background: "none",
1097
- backgroundSize: 'center',
1098
- backgroundPosition: 'center'
1099
- }
1100
- }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
1101
- sx: {
1102
- width: "100%",
1103
- paddingTop: '56.25%',
1104
- backgroundSize: 'center',
1105
- backgroundPosition: 'center'
1106
- },
1107
- 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'
1108
- }))))), /*#__PURE__*/React__default.createElement(Grid, {
1109
- item: true,
1110
- xs: 12,
1111
- sm: 12,
1112
- md: 6,
1113
- lg: 6,
1114
- xl: 6
1115
- }, /*#__PURE__*/React__default.createElement(Grow, _extends({
1116
- "in": visible,
1117
- style: {
1118
- transformOrigin: '0 0 0'
1074
+ minHeight: '250px',
1075
+ width: '100%',
1076
+ margin: 'auto',
1077
+ padding: '0px'
1119
1078
  }
1120
- }, {
1121
- timeout: 1000
1122
- } ), /*#__PURE__*/React__default.createElement(Item$3, {
1123
- elevation: 0,
1124
- sx: {
1125
- height: "90%",
1126
- width: "100%",
1127
- background: "none"
1079
+ }, /*#__PURE__*/React__default.createElement(Item$3, {
1080
+ title: content.component.title,
1081
+ content: content.component.subcomponent,
1082
+ side: content.component.justify_content
1083
+ }));
1084
+ }
1085
+ function Item$3(props) {
1086
+ var content = props.content,
1087
+ title = props.title;
1088
+ var _useState = React.useState([]),
1089
+ arrayFourElements = _useState[0],
1090
+ setArrayFourElements = _useState[1];
1091
+ var visible = true;
1092
+ var theme = material.useTheme();
1093
+ var isXsScreen = material.useMediaQuery(theme.breakpoints.down('sm'));
1094
+ var isSmScreen = material.useMediaQuery(theme.breakpoints.between('sm', 'md'));
1095
+ var isMdScreen = material.useMediaQuery(theme.breakpoints.between('md', 'lg'));
1096
+ var isLgScreen = material.useMediaQuery(theme.breakpoints.up('lg'));
1097
+ function divideArreglo(arreglo, tamanoMaximo) {
1098
+ var subarreglos = [];
1099
+ var subarregloActual = [];
1100
+ for (var i = 0; i < arreglo.length; i++) {
1101
+ subarregloActual.push(arreglo[i]);
1102
+ if (subarregloActual.length === tamanoMaximo || i === arreglo.length - 1) {
1103
+ subarreglos.push(subarregloActual);
1104
+ subarregloActual = [];
1105
+ }
1128
1106
  }
1129
- }, /*#__PURE__*/React__default.createElement(material.Box, null, ((_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.label_active) && /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Chip, {
1130
- disabled: true,
1131
- color: "info",
1132
- 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',
1133
- sx: {
1134
- marginBottom: '16px',
1135
- fontSize: '1em',
1136
- borderRadius: '6px',
1137
- backgroundColor: (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.label_color
1107
+ return subarreglos;
1108
+ }
1109
+ React.useEffect(function () {
1110
+ var tamanoMaximo;
1111
+ if (isSmScreen) {
1112
+ tamanoMaximo = 2;
1113
+ } else if (isMdScreen) {
1114
+ tamanoMaximo = 3;
1115
+ } else if (isLgScreen) {
1116
+ tamanoMaximo = 4;
1117
+ } else if (isXsScreen) {
1118
+ tamanoMaximo = 1;
1138
1119
  }
1139
- })), /*#__PURE__*/React__default.createElement(material.Box, {
1120
+ setArrayFourElements(divideArreglo(content, tamanoMaximo));
1121
+ }, [isXsScreen, isSmScreen, isMdScreen, isLgScreen, content]);
1122
+ if (!arrayFourElements) {
1123
+ return null;
1124
+ } else {
1125
+ return content.length >= 1 ? /*#__PURE__*/React__default.createElement(Carousel, {
1126
+ autoPlay: true,
1127
+ indicators: false,
1128
+ swipe: true,
1129
+ cycleNavigation: true,
1130
+ sx: {
1131
+ width: '100%',
1132
+ height: '250px',
1133
+ paddingTop: '60px',
1134
+ position: 'relative'
1135
+ }
1136
+ }, arrayFourElements.map(function (items, i) {
1137
+ return /*#__PURE__*/React__default.createElement(material.Container, {
1138
+ maxWidth: "lg"
1139
+ }, /*#__PURE__*/React__default.createElement(material.Grid, {
1140
+ container: true,
1141
+ key: i,
1142
+ spacing: 0,
1143
+ sx: {
1144
+ margin: 'auto',
1145
+ padding: 'auto'
1146
+ }
1147
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
1148
+ sx: {
1149
+ position: 'absolute',
1150
+ top: {
1151
+ xs: '-40px',
1152
+ sm: '-80px'
1153
+ },
1154
+ zIndex: 1
1155
+ }
1156
+ }, " ", /*#__PURE__*/React__default.createElement(material.Typography, {
1157
+ component: 'h2',
1158
+ dangerouslySetInnerHTML: {
1159
+ __html: title ? title : ''
1160
+ },
1161
+ sx: {
1162
+ height: '100%',
1163
+ fontSize: {
1164
+ xl: '3em',
1165
+ lg: '3em',
1166
+ md: '2.25em',
1167
+ sm: '1.875em',
1168
+ xs: '1.875em'
1169
+ }
1170
+ }
1171
+ })), items.map(function (item, j) {
1172
+ return /*#__PURE__*/React__default.createElement(material.Grid, {
1173
+ item: true,
1174
+ key: j,
1175
+ xs: 12,
1176
+ sm: 6,
1177
+ md: 4,
1178
+ lg: 3,
1179
+ xl: 3,
1180
+ sx: {
1181
+ margin: {
1182
+ xs: '0px',
1183
+ sm: '0px'
1184
+ },
1185
+ width: 'object-fit',
1186
+ display: 'flex',
1187
+ justifyContent: 'center',
1188
+ alignItems: 'center',
1189
+ '&.MuiGrid-item': {
1190
+ paddingLeft: '17px',
1191
+ paddingTop: '10px'
1192
+ }
1193
+ }
1194
+ }, /*#__PURE__*/React__default.createElement(material.Slide, {
1195
+ direction: "left",
1196
+ "in": visible
1197
+ }, /*#__PURE__*/React__default.createElement(material.Card, {
1198
+ elevation: 0,
1199
+ sx: {
1200
+ width: '100%',
1201
+ height: '100%',
1202
+ borderRadius: '10px',
1203
+ background: 'none'
1204
+ }
1205
+ }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
1206
+ component: "img",
1207
+ image: item.image.url ? item.image.url : 'none',
1208
+ alt: item.description ? item.description : 'none',
1209
+ sx: {
1210
+ width: '100%',
1211
+ height: '140px',
1212
+ transform: "translate(" + item.image_transform_x + "%, " + item.image_transform_y + "%) scale(" + (item.image_scale ? item.image_scale : '1') + ")"
1213
+ }
1214
+ }))));
1215
+ })));
1216
+ })) : null;
1217
+ }
1218
+ }
1219
+
1220
+ var Brands = /*#__PURE__*/function (_AtomicElements) {
1221
+ _inheritsLoose(Brands, _AtomicElements);
1222
+ function Brands() {
1223
+ var _this;
1224
+ _this = _AtomicElements.call(this) || this;
1225
+ _this.layout = [Layout1$6];
1226
+ _this.layoutFootprint = ['brands_layout_1.png'];
1227
+ _this.layoutFootprintReq = [{
1228
+ 'type': 0,
1229
+ 'title': 'Tittle',
1230
+ 'description': 'Description',
1231
+ 'image_scale': 'image scale',
1232
+ 'image_transform_x': 'image transform x',
1233
+ 'image_transform_y': 'image transform y',
1234
+ 'image': 'Image'
1235
+ }];
1236
+ return _this;
1237
+ }
1238
+ return Brands;
1239
+ }(AtomicElements);
1240
+
1241
+ function Layout1$7(content) {
1242
+ var _content$component$su, _content$component$su2;
1243
+ var visible = true;
1244
+ return /*#__PURE__*/React__default.createElement(material.Slide, {
1245
+ direction: "left",
1246
+ "in": visible
1247
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
1140
1248
  sx: {
1141
- marginBottom: '16px'
1249
+ width: {
1250
+ xs: '100%',
1251
+ md: '100%'
1252
+ },
1253
+ color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color,
1254
+ textAlign: content.component.justify_content
1142
1255
  }
1143
1256
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
1257
+ component: 'h2',
1144
1258
  dangerouslySetInnerHTML: {
1145
- __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'
1259
+ __html: content.component.title ? content.component.title : 'Agregue titulo'
1146
1260
  },
1147
1261
  sx: {
1262
+ marginBottom: '16px',
1148
1263
  whiteSpace: 'pre-wrap',
1149
1264
  fontSize: {
1150
- xs: "2em",
1151
- md: "2em",
1152
- lg: "2em",
1265
+ xs: "1.875em",
1266
+ sm: "2.25em",
1267
+ md: "3em",
1268
+ lg: "3em",
1153
1269
  xl: "3em"
1154
- }
1155
- }
1156
- })), /*#__PURE__*/React__default.createElement(material.Box, {
1157
- sx: {
1158
- marginBottom: '16px'
1270
+ },
1271
+ fontWeight: "bold"
1159
1272
  }
1160
- }, /*#__PURE__*/React__default.createElement(material.Typography, {
1161
- dangerouslySetInnerHTML: {
1162
- __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'
1163
- },
1273
+ }), /*#__PURE__*/React__default.createElement(material.Box, {
1164
1274
  sx: {
1165
- whiteSpace: 'pre-wrap',
1166
- fontSize: {
1167
- xs: "1.125em",
1168
- md: "1.125em",
1169
- lg: "1em"
1275
+ width: content.component.justify_content == "center" ? "100%" : {
1276
+ xl: "70%",
1277
+ lg: "72%",
1278
+ md: "84%",
1279
+ sm: "100%",
1280
+ xs: "100%"
1170
1281
  }
1171
1282
  }
1172
- })), /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Button, {
1173
- variant: "contained",
1174
- href: (_content$component$su11 = content.component.subcomponent[0]) === null || _content$component$su11 === void 0 ? void 0 : _content$component$su11.button_action,
1175
- target: ((_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.link) == 4 ? '_blank' : '_self',
1176
- sx: {
1177
- width: 'auto',
1178
- padding: '14px 40px',
1179
- borderRadius: '40px'
1180
- }
1181
- }, (_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'))))))));
1283
+ }, (_content$component$su2 = content.component.subcomponent) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.map(function (item, index) {
1284
+ return /*#__PURE__*/React__default.createElement(material.Accordion, {
1285
+ key: index,
1286
+ elevation: 2
1287
+ }, /*#__PURE__*/React__default.createElement(material.AccordionSummary, {
1288
+ "aria-controls": "panel1a-content",
1289
+ id: "panel1a-header",
1290
+ expandIcon: '+',
1291
+ sx: {
1292
+ marginBottom: '16px'
1293
+ }
1294
+ }, /*#__PURE__*/React__default.createElement(material.Typography, {
1295
+ component: 'h3',
1296
+ dangerouslySetInnerHTML: {
1297
+ __html: item.subtitle ? item.subtitle : 'Agregue pregunta'
1298
+ },
1299
+ sx: {
1300
+ fontSize: '1.25em',
1301
+ fontWeight: 'bold'
1302
+ }
1303
+ })), /*#__PURE__*/React__default.createElement(material.AccordionDetails, {
1304
+ sx: {
1305
+ padding: '16px'
1306
+ }
1307
+ }, /*#__PURE__*/React__default.createElement(material.Typography, {
1308
+ component: 'p',
1309
+ dangerouslySetInnerHTML: {
1310
+ __html: item.description ? item.description : 'Agregue respuesta'
1311
+ },
1312
+ sx: {
1313
+ fontSize: '1.125em'
1314
+ }
1315
+ })));
1316
+ }))));
1182
1317
  }
1183
1318
 
1184
- var ImagPlusText = /*#__PURE__*/function (_AtomicElements) {
1185
- _inheritsLoose(ImagPlusText, _AtomicElements);
1186
- function ImagPlusText() {
1319
+ var FAQ = /*#__PURE__*/function (_AtomicElements) {
1320
+ _inheritsLoose(FAQ, _AtomicElements);
1321
+ function FAQ() {
1187
1322
  var _this;
1188
1323
  _this = _AtomicElements.call(this) || this;
1189
- _this.layout = [Layout1$6];
1190
- _this.layoutFootprint = ['imgPlusText_layout_1.png'];
1324
+ _this.layout = [Layout1$7];
1325
+ _this.layoutFootprint = ['faq_layout_1.png'];
1191
1326
  _this.layoutFootprintReq = [{
1192
1327
  'type': 0,
1193
- 'label': 'Label',
1194
- 'label_color': 'Label color',
1195
- 'label_active': 'Label active',
1196
- 'title': 'Title',
1197
- 'description': 'Text',
1198
- 'button_title': 'Button Title',
1199
- 'button_action': 'Button Action',
1200
- 'image': 'image',
1201
- 'image_scale': 'image scale',
1202
- 'link': 'Link'
1203
- }, {
1204
- 'type': 0,
1205
- 'title': 'Title',
1206
- 'description': 'Text',
1207
- 'button_title': 'Button Title',
1208
- 'button_action': 'Button Action',
1209
- 'image': 'req_hor'
1328
+ 'title': 'Tittle',
1329
+ 'subtitle': 'Subtitle',
1330
+ 'description': 'Description'
1210
1331
  }];
1211
1332
  return _this;
1212
1333
  }
1213
- return ImagPlusText;
1334
+ return FAQ;
1214
1335
  }(AtomicElements);
1215
1336
 
1216
1337
  function CanvasContainer(props) {
@@ -1244,9 +1365,9 @@ function CanvasContainer(props) {
1244
1365
  xs: '64px 0px'
1245
1366
  },
1246
1367
  width: '100%',
1247
- height: '100%'
1368
+ height: json.type === 6 ? '250px' : '100%'
1248
1369
  }
1249
- }, /*#__PURE__*/React__default.createElement(material.Container, {
1370
+ }, json.type === 6 || json.component.layout === 1 ? children : /*#__PURE__*/React__default.createElement(material.Container, {
1250
1371
  maxWidth: "lg",
1251
1372
  sx: {
1252
1373
  padding: '0px',
@@ -1350,8 +1471,9 @@ var Sections = /*#__PURE__*/function () {
1350
1471
  this.gallery = new Section(new Gallery());
1351
1472
  this.text = new Section(new Text());
1352
1473
  this.list = new Section(new List());
1353
- this.imgPlusText = new Section(new ImagPlusText());
1354
- this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text, this.list, this.imgPlusText];
1474
+ this.brands = new Section(new Brands());
1475
+ this.faq = new Section(new FAQ());
1476
+ this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text, this.list, this.brands, this.faq];
1355
1477
  }
1356
1478
  var _proto2 = Sections.prototype;
1357
1479
  _proto2.getSectionList = function getSectionList() {
@@ -1362,7 +1484,8 @@ var Sections = /*#__PURE__*/function () {
1362
1484
  '3': 'Galeria',
1363
1485
  '4': 'Texto',
1364
1486
  '5': 'Lista',
1365
- '6': 'Imagen + Texto'
1487
+ '6': 'Marcas',
1488
+ '7': 'FAQ'
1366
1489
  };
1367
1490
  };
1368
1491
  _proto2.getLayoutsFromSection = function getLayoutsFromSection(index) {