keski_lib_catalog 1.0.33 → 1.0.35

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 (6) hide show
  1. package/dist/index.css +23 -0
  2. package/dist/index.js +298 -54
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.modern.js +267 -24
  5. package/dist/index.modern.js.map +1 -1
  6. package/package.json +6 -4
package/dist/index.css ADDED
@@ -0,0 +1,23 @@
1
+ ._styles__swiper__20L_S {
2
+ width: 100%;
3
+ height: 100%;
4
+ }
5
+
6
+ ._styles__swiper-slide__1xXht {
7
+ text-align: center;
8
+ font-size: 18px;
9
+ background: #fff;
10
+
11
+ /* Center slide text vertically */
12
+ display: flex;
13
+ justify-content: center;
14
+ align-items: center;
15
+ }
16
+
17
+ ._styles__swiper-slide__1xXht img {
18
+ display: block;
19
+ width: 100%;
20
+ height: 100%;
21
+ -o-object-fit: cover;
22
+ object-fit: cover;
23
+ }
package/dist/index.js CHANGED
@@ -1,6 +1,8 @@
1
1
  function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
2
2
 
3
- var React = _interopDefault(require('react'));
3
+ var React = require('react');
4
+ var React__default = _interopDefault(React);
5
+ var Carousel = _interopDefault(require('react-material-ui-carousel'));
4
6
  var material = require('@mui/material');
5
7
  var Grow = _interopDefault(require('@mui/material/Grow'));
6
8
 
@@ -57,42 +59,90 @@ var AtomicElements = /*#__PURE__*/function () {
57
59
  }();
58
60
 
59
61
  function Layout1(content) {
60
- var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5, _content$component$su6, _content$component$su7;
62
+ return /*#__PURE__*/React__default.createElement(Carousel, {
63
+ indicators: true,
64
+ navButtonsAlwaysInvisible: true,
65
+ sx: {
66
+ width: '100%',
67
+ height: '100%'
68
+ }
69
+ }, content.component.subcomponent.map(function (item, i) {
70
+ return /*#__PURE__*/React__default.createElement(Item, {
71
+ key: i,
72
+ content: item,
73
+ side: content.component.justify_content
74
+ });
75
+ }));
76
+ }
77
+ function Item(props) {
78
+ var content = props.content,
79
+ side = props.side;
61
80
  var visible = true;
62
- return /*#__PURE__*/React.createElement(material.Slide, {
63
- direction: "left",
64
- "in": visible
65
- }, /*#__PURE__*/React.createElement(material.Box, {
81
+ var getSideRender = function getSideRender(side) {
82
+ if (side === 'left') {
83
+ return 'flex-start';
84
+ } else if (side === 'right') {
85
+ return 'flex-end';
86
+ } else {
87
+ return 'center';
88
+ }
89
+ };
90
+ var getSideMargin = function getSideMargin(side) {
91
+ if (side === 'left') {
92
+ return '0px auto 0px 0px';
93
+ } else if (side === 'right') {
94
+ return '0px 0px 0px auto';
95
+ } else {
96
+ return 'auto';
97
+ }
98
+ };
99
+ return /*#__PURE__*/React__default.createElement(material.Box, {
66
100
  sx: {
67
101
  display: 'flex',
68
- flexDirection: 'column',
69
102
  width: {
70
103
  xs: '100%',
71
104
  md: '70%'
72
105
  },
73
- color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color,
74
- alignItems: 'flex-end'
106
+ justifyContent: getSideRender(side),
107
+ margin: getSideMargin(side),
108
+ textAlign: side,
109
+ height: '100%'
75
110
  }
76
- }, /*#__PURE__*/React.createElement(material.Box, {
111
+ }, /*#__PURE__*/React__default.createElement(material.Slide, {
112
+ direction: "left",
113
+ "in": visible
114
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
115
+ sx: {
116
+ display: 'flex',
117
+ flexDirection: 'column',
118
+ color: content.text_color,
119
+ alignItems: getSideRender(side)
120
+ }
121
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
77
122
  component: "img",
78
- src: (_content$component$su2 = content.component.subcomponent[0]) !== null && _content$component$su2 !== void 0 && _content$component$su2.image ? (_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.image.url : "https://cdn-icons-png.flaticon.com/512/6596/6596121.png",
123
+ src: content.image ? content.image.url : "https://cdn-icons-png.flaticon.com/512/6596/6596121.png",
79
124
  sx: {
80
125
  width: '120px',
81
126
  height: '120px',
82
- marginBottom: '16px'
127
+ marginBottom: '16px',
128
+ borderRadius: '50%'
83
129
  }
84
- }), /*#__PURE__*/React.createElement(material.Typography, {
130
+ }), /*#__PURE__*/React__default.createElement(material.Typography, {
85
131
  className: "xmiddle",
86
132
  sx: {
87
- marginBottom: '16px'
133
+ marginBottom: '16px',
134
+ minHeight: {
135
+ xs: '270px',
136
+ md: '90px'
137
+ }
88
138
  }
89
- }, (_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(material.Typography, {
139
+ }, content.description ? content.description : 'Agregue descripción'), /*#__PURE__*/React__default.createElement(material.Typography, {
90
140
  className: "small",
91
141
  sx: {
92
142
  marginBottom: '16px',
93
143
  textAlign: 'right'
94
144
  }
95
- }, (_content$component$su6 = content.component.subcomponent[0]) !== null && _content$component$su6 !== void 0 && _content$component$su6.subtitle ? (_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.subtitle : 'Agregue subtítulo')));
145
+ }, content.subtitle ? content.subtitle : 'Agregue subtítulo'))));
96
146
  }
97
147
 
98
148
  var Quotes = /*#__PURE__*/function (_AtomicElements) {
@@ -106,7 +156,7 @@ var Quotes = /*#__PURE__*/function (_AtomicElements) {
106
156
  'type': 1,
107
157
  'subtitle': 'Subtitle',
108
158
  'description': 'Description',
109
- 'image': 'Image'
159
+ 'image': 'sqr'
110
160
  }];
111
161
  return _this;
112
162
  }
@@ -116,10 +166,10 @@ var Quotes = /*#__PURE__*/function (_AtomicElements) {
116
166
  function Layout1$1(content) {
117
167
  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;
118
168
  var visible = true;
119
- return /*#__PURE__*/React.createElement(material.Slide, {
169
+ return /*#__PURE__*/React__default.createElement(material.Slide, {
120
170
  direction: "left",
121
171
  "in": visible
122
- }, /*#__PURE__*/React.createElement(material.Box, {
172
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
123
173
  sx: {
124
174
  display: 'flex',
125
175
  flexDirection: 'column',
@@ -134,17 +184,17 @@ function Layout1$1(content) {
134
184
  justifyContent: 'center',
135
185
  color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color
136
186
  }
137
- }, /*#__PURE__*/React.createElement(material.Typography, {
187
+ }, /*#__PURE__*/React__default.createElement(material.Typography, {
138
188
  className: "title-xxlarge",
139
189
  sx: {
140
190
  marginBottom: '16px'
141
191
  }
142
- }, (_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 título'), /*#__PURE__*/React.createElement(material.Typography, {
192
+ }, (_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 título'), /*#__PURE__*/React__default.createElement(material.Typography, {
143
193
  className: "xmiddle",
144
194
  sx: {
145
195
  marginBottom: '16px'
146
196
  }
147
- }, (_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(material.Box, null, /*#__PURE__*/React.createElement(material.Button, {
197
+ }, (_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__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Button, {
148
198
  variant: "contained",
149
199
  href: (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.button_action,
150
200
  sx: {
@@ -167,6 +217,7 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
167
217
  'description': 'Description',
168
218
  'button_title': 'Button Title',
169
219
  'button_action': 'Button action',
220
+ 'image': 'background',
170
221
  'text_color': 'Text color',
171
222
  'link': 'Link'
172
223
  }];
@@ -178,7 +229,7 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
178
229
  function Layout1$2(content) {
179
230
  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;
180
231
  var visible = true;
181
- return /*#__PURE__*/React.createElement(material.Box, {
232
+ return /*#__PURE__*/React__default.createElement(material.Box, {
182
233
  sx: {
183
234
  display: 'flex',
184
235
  flexDirection: {
@@ -189,10 +240,10 @@ function Layout1$2(content) {
189
240
  alignItems: 'center'
190
241
  },
191
242
  color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color
192
- }, /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(material.Slide, {
243
+ }, /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Slide, {
193
244
  direction: "right",
194
245
  "in": visible
195
- }, /*#__PURE__*/React.createElement(material.Box, {
246
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
196
247
  sx: {
197
248
  width: {
198
249
  xs: '100%',
@@ -205,31 +256,31 @@ function Layout1$2(content) {
205
256
  },
206
257
  maxWidth: '100vw'
207
258
  }
208
- }, /*#__PURE__*/React.createElement("img", {
259
+ }, /*#__PURE__*/React__default.createElement("img", {
209
260
  width: "100%",
210
261
  height: "100%",
211
262
  src: (_content$component$su2 = content.component.subcomponent[0]) !== null && _content$component$su2 !== void 0 && _content$component$su2.image ? (_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.image.url : 'https://wozapps-develop.s3.us-east-2.amazonaws.com/gerry/resources/landing/bbb84144-02cd-4cf8-a1be-21ba47e7c4fa.jpeg'
212
- })))), /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(Grow, _extends({
263
+ })))), /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(Grow, _extends({
213
264
  "in": visible,
214
265
  style: {
215
266
  transformOrigin: '0 0 0'
216
267
  }
217
268
  }, {
218
269
  timeout: 1000
219
- } ), /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(material.Box, {
270
+ } ), /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Box, {
220
271
  sx: {
221
272
  marginBottom: '16px'
222
273
  }
223
- }, /*#__PURE__*/React.createElement(material.Typography, {
274
+ }, /*#__PURE__*/React__default.createElement(material.Typography, {
224
275
  className: "title-xlarge"
225
- }, (_content$component$su4 = content.component.subcomponent[0]) !== null && _content$component$su4 !== void 0 && _content$component$su4.title ? (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.title : 'Agregue título')), /*#__PURE__*/React.createElement(material.Box, {
276
+ }, (_content$component$su4 = content.component.subcomponent[0]) !== null && _content$component$su4 !== void 0 && _content$component$su4.title ? (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.title : 'Agregue título')), /*#__PURE__*/React__default.createElement(material.Box, {
226
277
  sx: {
227
278
  marginBottom: '16px',
228
279
  color: '#767676'
229
280
  }
230
- }, /*#__PURE__*/React.createElement(material.Typography, {
281
+ }, /*#__PURE__*/React__default.createElement(material.Typography, {
231
282
  className: "middle"
232
- }, (_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(material.Box, null, /*#__PURE__*/React.createElement(material.Button, {
283
+ }, (_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__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Button, {
233
284
  variant: "contained",
234
285
  href: (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.button_action,
235
286
  sx: {
@@ -259,7 +310,7 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
259
310
  'description': 'Text',
260
311
  'button_title': 'Button Title',
261
312
  'button_action': 'Button Action',
262
- 'image': 'Image'
313
+ 'image': 'req_hor'
263
314
  }];
264
315
  return _this;
265
316
  }
@@ -269,28 +320,27 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
269
320
  function Layout1$3(content) {
270
321
  var _content$component$su;
271
322
  var visible = true;
272
- return /*#__PURE__*/React.createElement(material.Slide, {
323
+ return /*#__PURE__*/React__default.createElement(material.Slide, {
273
324
  direction: "left",
274
325
  "in": visible
275
- }, /*#__PURE__*/React.createElement(material.Box, {
326
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
276
327
  sx: {
277
328
  width: '100%'
278
329
  }
279
- }, /*#__PURE__*/React.createElement(material.Typography, {
330
+ }, /*#__PURE__*/React__default.createElement(material.Typography, {
280
331
  className: "title-xlarge",
281
332
  sx: {
282
333
  margin: '16px auto'
283
334
  }
284
- }, content.component.title), /*#__PURE__*/React.createElement(material.Grid, {
335
+ }, content.component.title ? content.component.title : 'Agregue un título'), /*#__PURE__*/React__default.createElement(material.Grid, {
285
336
  container: true
286
337
  }, (_content$component$su = content.component.subcomponent) === null || _content$component$su === void 0 ? void 0 : _content$component$su.map(function (img, index) {
287
- return /*#__PURE__*/React.createElement(material.Grid, {
338
+ return /*#__PURE__*/React__default.createElement(material.Grid, {
288
339
  key: index,
289
340
  item: true,
290
341
  xs: 12,
291
- md: 4,
292
- spacing: '16px'
293
- }, /*#__PURE__*/React.createElement(material.Box, {
342
+ md: 4
343
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
294
344
  component: "img",
295
345
  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',
296
346
  sx: {
@@ -315,7 +365,7 @@ var Gallery = /*#__PURE__*/function (_AtomicElements) {
315
365
  _this.layoutFootprintReq = [{
316
366
  'type': 1,
317
367
  'title': 'Tittle',
318
- 'image': 'Image'
368
+ 'image': 'req_hor'
319
369
  }];
320
370
  return _this;
321
371
  }
@@ -325,21 +375,24 @@ var Gallery = /*#__PURE__*/function (_AtomicElements) {
325
375
  function Layout1$4(content) {
326
376
  var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5;
327
377
  var visible = true;
328
- return /*#__PURE__*/React.createElement(material.Slide, {
378
+ return /*#__PURE__*/React__default.createElement(material.Slide, {
329
379
  direction: "left",
330
380
  "in": visible
331
- }, /*#__PURE__*/React.createElement(material.Box, {
381
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
332
382
  sx: {
333
- width: '70%',
383
+ width: {
384
+ xs: '100%',
385
+ md: '70%'
386
+ },
334
387
  color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color,
335
388
  textAlign: content.component.justify_content
336
389
  }
337
- }, /*#__PURE__*/React.createElement(material.Typography, {
390
+ }, /*#__PURE__*/React__default.createElement(material.Typography, {
338
391
  className: "title-xlarge",
339
392
  sx: {
340
393
  marginBottom: '16px'
341
394
  }
342
- }, (_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 título'), /*#__PURE__*/React.createElement(material.Typography, {
395
+ }, (_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 título'), /*#__PURE__*/React__default.createElement(material.Typography, {
343
396
  className: "middle",
344
397
  sx: {
345
398
  marginBottom: '16px',
@@ -365,12 +418,201 @@ var Text = /*#__PURE__*/function (_AtomicElements) {
365
418
  return Text;
366
419
  }(AtomicElements);
367
420
 
421
+ function Layout1$5(content) {
422
+ return /*#__PURE__*/React__default.createElement(material.Grid, {
423
+ container: true
424
+ }, /*#__PURE__*/React__default.createElement(Item$1, {
425
+ content: content.component.subcomponent,
426
+ side: content.component.justify_content
427
+ }));
428
+ }
429
+ function Item$1(props) {
430
+ var content = props.content;
431
+ var _useState = React.useState([]),
432
+ arrayFourElements = _useState[0],
433
+ setArrayFourElements = _useState[1];
434
+ var visible = true;
435
+ var theme = material.useTheme();
436
+ var isXsScreen = material.useMediaQuery(theme.breakpoints.down('sm'));
437
+ var isSmScreen = material.useMediaQuery(theme.breakpoints.between('sm', 'md'));
438
+ var isMdScreen = material.useMediaQuery(theme.breakpoints.between('md', 'lg'));
439
+ var isLgScreen = material.useMediaQuery(theme.breakpoints.up('lg'));
440
+ function divideArreglo(arreglo, tamanoMaximo) {
441
+ var subarreglos = [];
442
+ var subarregloActual = [];
443
+ for (var i = 0; i < arreglo.length; i++) {
444
+ subarregloActual.push(arreglo[i]);
445
+ if (subarregloActual.length === tamanoMaximo || i === arreglo.length - 1) {
446
+ subarreglos.push(subarregloActual);
447
+ subarregloActual = [];
448
+ }
449
+ }
450
+ return subarreglos;
451
+ }
452
+ React.useEffect(function () {
453
+ var tamanoMaximo;
454
+ if (isSmScreen) {
455
+ tamanoMaximo = 2;
456
+ } else if (isMdScreen) {
457
+ tamanoMaximo = 3;
458
+ } else if (isLgScreen) {
459
+ tamanoMaximo = 4;
460
+ } else if (isXsScreen) {
461
+ tamanoMaximo = 1;
462
+ }
463
+ setArrayFourElements(divideArreglo(content, tamanoMaximo));
464
+ }, [isXsScreen, isSmScreen, isMdScreen, isLgScreen, content]);
465
+ if (!arrayFourElements) {
466
+ return null;
467
+ } else {
468
+ return content.length > 4 ? /*#__PURE__*/React__default.createElement(Carousel, {
469
+ autoPlay: true,
470
+ indicators: true,
471
+ navButtonsAlwaysVisible: true,
472
+ sx: {
473
+ width: '100%',
474
+ height: '100%'
475
+ }
476
+ }, arrayFourElements.map(function (items, i) {
477
+ return /*#__PURE__*/React__default.createElement(material.Grid, {
478
+ container: true,
479
+ key: i,
480
+ spacing: 3
481
+ }, items.map(function (item, j) {
482
+ var _ref;
483
+ return /*#__PURE__*/React__default.createElement(material.Grid, {
484
+ item: true,
485
+ key: j,
486
+ sm: 6,
487
+ md: 4,
488
+ lg: 3
489
+ }, /*#__PURE__*/React__default.createElement(material.Slide, {
490
+ direction: "left",
491
+ "in": visible
492
+ }, /*#__PURE__*/React__default.createElement(material.Card, {
493
+ sx: (_ref = {
494
+ width: '300px',
495
+ maxWidth: 512,
496
+ boxShadow: 'none',
497
+ borderRadius: 0,
498
+ border: '1px solid #e5e5e5'
499
+ }, _ref["borderRadius"] = '10px', _ref)
500
+ }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
501
+ component: "img",
502
+ height: "300px",
503
+ width: "300px",
504
+ image: "https://images.unsplash.com/reserve/Af0sF2OS5S5gatqrKzVP_Silhoutte.jpg?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8fA%3D%3D&w=1000&q=80",
505
+ sx: {
506
+ aspectRatio: '1/1'
507
+ }
508
+ }), /*#__PURE__*/React__default.createElement(material.CardContent, {
509
+ sx: {
510
+ padding: '8px 16px',
511
+ '&.MuiCardContent-root:last-child': {
512
+ paddingBottom: '8px'
513
+ }
514
+ }
515
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
516
+ component: "div",
517
+ sx: {
518
+ display: 'flex',
519
+ justifyContent: 'space-between',
520
+ alignItems: 'center'
521
+ }
522
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
523
+ sx: {
524
+ maxWidth: '80%',
525
+ display: '-webkit-box',
526
+ WebkitLineClamp: 2,
527
+ WebkitBoxOrient: 'vertical',
528
+ overflow: 'hidden',
529
+ textOverflow: 'ellipsis'
530
+ }
531
+ }, /*#__PURE__*/React__default.createElement(material.Typography, {
532
+ className: "simple"
533
+ }, "Pan de muertos de masa madre real madrid"))), /*#__PURE__*/React__default.createElement(material.Typography, null, "$4000")))));
534
+ }));
535
+ })) : content.map(function (item, i) {
536
+ var _ref2;
537
+ return /*#__PURE__*/React__default.createElement(material.Grid, {
538
+ item: true,
539
+ key: i,
540
+ sm: 6,
541
+ md: 4,
542
+ lg: 3
543
+ }, /*#__PURE__*/React__default.createElement(material.Slide, {
544
+ direction: "left",
545
+ "in": visible
546
+ }, /*#__PURE__*/React__default.createElement(material.Card, {
547
+ sx: (_ref2 = {
548
+ width: '300px',
549
+ maxWidth: 512,
550
+ boxShadow: 'none',
551
+ borderRadius: 0,
552
+ border: '1px solid #e5e5e5'
553
+ }, _ref2["borderRadius"] = '10px', _ref2)
554
+ }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
555
+ component: "img",
556
+ height: "300px",
557
+ width: "300px",
558
+ image: "https://images.unsplash.com/reserve/Af0sF2OS5S5gatqrKzVP_Silhoutte.jpg?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8fA%3D%3D&w=1000&q=80",
559
+ sx: {
560
+ aspectRatio: '1/1'
561
+ }
562
+ }), /*#__PURE__*/React__default.createElement(material.CardContent, {
563
+ sx: {
564
+ padding: '8px 16px',
565
+ '&.MuiCardContent-root:last-child': {
566
+ paddingBottom: '8px'
567
+ }
568
+ }
569
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
570
+ component: "div",
571
+ sx: {
572
+ display: 'flex',
573
+ justifyContent: 'space-between',
574
+ alignItems: 'center'
575
+ }
576
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
577
+ sx: {
578
+ maxWidth: '80%',
579
+ display: '-webkit-box',
580
+ WebkitLineClamp: 2,
581
+ WebkitBoxOrient: 'vertical',
582
+ overflow: 'hidden',
583
+ textOverflow: 'ellipsis'
584
+ }
585
+ }, /*#__PURE__*/React__default.createElement(material.Typography, {
586
+ className: "simple"
587
+ }, "Pan de muertos de masa madre real madrid"))), /*#__PURE__*/React__default.createElement(material.Typography, null, "$4000")))));
588
+ });
589
+ }
590
+ }
591
+
592
+ var List = /*#__PURE__*/function (_AtomicElements) {
593
+ _inheritsLoose(List, _AtomicElements);
594
+ function List() {
595
+ var _this;
596
+ _this = _AtomicElements.call(this) || this;
597
+ _this.layout = [Layout1$5];
598
+ _this.layoutFootprint = ['list_layout_1.png'];
599
+ _this.layoutFootprintReq = [{
600
+ 'type': 1,
601
+ 'subtitle': 'Subtitle',
602
+ 'description': 'Description',
603
+ 'image': 'Image'
604
+ }];
605
+ return _this;
606
+ }
607
+ return List;
608
+ }(AtomicElements);
609
+
368
610
  function CanvasContainer(props) {
369
611
  var _json$component$bg_im;
370
612
  var json = props.json,
371
613
  children = props.children;
372
614
  var rgbColor = hexToRgb(json.component.bg_image_overlay_color);
373
- return /*#__PURE__*/React.createElement(material.Box, {
615
+ return /*#__PURE__*/React__default.createElement(material.Box, {
374
616
  sx: {
375
617
  display: 'flex',
376
618
  alignItems: 'center',
@@ -380,13 +622,13 @@ function CanvasContainer(props) {
380
622
  backgroundSize: 'cover',
381
623
  backgroundRepeat: 'no-repeat'
382
624
  }
383
- }, /*#__PURE__*/React.createElement(material.Box, {
625
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
384
626
  sx: {
385
627
  bgcolor: "" + (json.component.bg_image_overlay && json.component.bg_type === 3 ? "rgba(" + rgbColor.r + ", " + rgbColor.g + ", " + rgbColor.b + ", " + json.component.bg_image_overlay_alpha_css + ")" : undefined),
386
628
  padding: '64px 24px',
387
629
  width: '100%'
388
630
  }
389
- }, /*#__PURE__*/React.createElement(material.Container, {
631
+ }, /*#__PURE__*/React__default.createElement(material.Container, {
390
632
  maxWidth: "xl",
391
633
  sx: {
392
634
  padding: '0px',
@@ -401,7 +643,7 @@ function CanvasContainer(props) {
401
643
  }
402
644
  }
403
645
  }
404
- }, /*#__PURE__*/React.createElement(material.Box, {
646
+ }, /*#__PURE__*/React__default.createElement(material.Box, {
405
647
  sx: {
406
648
  minWidth: {
407
649
  xs: '100%',
@@ -444,7 +686,7 @@ var Section = /*#__PURE__*/function () {
444
686
  var _proto = Section.prototype;
445
687
  _proto.component = function component(json) {
446
688
  console.log('json', json);
447
- return /*#__PURE__*/React.createElement(CanvasContainer, {
689
+ return /*#__PURE__*/React__default.createElement(CanvasContainer, {
448
690
  json: json
449
691
  }, this.child.build(json, json.component.layout));
450
692
  };
@@ -468,7 +710,8 @@ var Sections = /*#__PURE__*/function () {
468
710
  this.textPlusImg = new Section(new TextPlusImg());
469
711
  this.gallery = new Section(new Gallery());
470
712
  this.text = new Section(new Text());
471
- this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text];
713
+ this.list = new Section(new List());
714
+ this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text, this.list];
472
715
  }
473
716
  var _proto2 = Sections.prototype;
474
717
  _proto2.getSectionList = function getSectionList() {
@@ -477,7 +720,8 @@ var Sections = /*#__PURE__*/function () {
477
720
  '1': 'Texto + Imágenes',
478
721
  '2': 'Citas/Testimonios',
479
722
  '3': 'Galeria',
480
- '4': 'Texto'
723
+ '4': 'Texto',
724
+ '5': 'Lista'
481
725
  };
482
726
  };
483
727
  _proto2.getLayoutsFromSection = function getLayoutsFromSection(index) {