keski_lib_catalog 1.3.5 → 1.3.7

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.
@@ -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, Typography, Chip, Button, Card, 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 } 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';
@@ -119,15 +119,28 @@ function Item(props) {
119
119
  color: content.text_color,
120
120
  alignItems: getSideRender(side)
121
121
  }
122
+ }, /*#__PURE__*/React.createElement(Box, {
123
+ sx: {
124
+ marginBottom: '16px'
125
+ }
126
+ }, /*#__PURE__*/React.createElement(Card, {
127
+ elevation: 0,
128
+ sx: {
129
+ maxWidth: 120,
130
+ maxHeight: 120,
131
+ background: 'none',
132
+ borderRadius: '100%'
133
+ }
122
134
  }, /*#__PURE__*/React.createElement(Avatar, {
123
- src: content.image ? content.image.url : "none",
135
+ src: content.image ? content.image : "none",
136
+ alt: content.title ? content.title : '',
124
137
  sx: {
125
138
  width: '120px',
126
139
  height: '120px',
127
140
  bgcolor: "black",
128
- marginBottom: '16px'
141
+ transform: "translate(\n " + content.image_transform_x + "%\n ,\n " + content.image_transform_y + "%)" + ("scale(" + (content.image_scale ? content.image_scale : "1") + ")")
129
142
  }
130
- }), /*#__PURE__*/React.createElement(Box, {
143
+ }))), /*#__PURE__*/React.createElement(Box, {
131
144
  sx: {
132
145
  width: {
133
146
  xs: "100%",
@@ -196,7 +209,10 @@ var Quotes = /*#__PURE__*/function (_AtomicElements) {
196
209
  'label': 'Label',
197
210
  'label_color': 'Label color',
198
211
  'label_active': 'Label active',
199
- 'image': 'sqr'
212
+ 'image': 'sqr',
213
+ 'image_scale': 'image scale',
214
+ 'image_transform_x': 'image transform x',
215
+ 'image_transform_y': 'image transform y'
200
216
  }];
201
217
  return _this;
202
218
  }
@@ -204,7 +220,7 @@ var Quotes = /*#__PURE__*/function (_AtomicElements) {
204
220
  }(AtomicElements);
205
221
 
206
222
  function Layout1$1(content) {
207
- 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;
223
+ 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;
208
224
  var visible = true;
209
225
  return /*#__PURE__*/React.createElement(Slide, {
210
226
  direction: "left",
@@ -219,7 +235,6 @@ function Layout1$1(content) {
219
235
  sm: "80vh",
220
236
  md: "80vh"
221
237
  },
222
- backgroundImage: "url(" + ((_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 : 'none') + ")",
223
238
  backgroundSize: 'cover',
224
239
  backgroundPosition: 'center',
225
240
  display: 'flex'
@@ -238,7 +253,7 @@ function Layout1$1(content) {
238
253
  lg: '80vh'
239
254
  },
240
255
  justifyContent: 'center',
241
- paddingLeft: (_content$component$su3 = content.component.subcomponent[0]) !== null && _content$component$su3 !== void 0 && _content$component$su3.image ? {
256
+ paddingLeft: (_content$component$su = content.component.subcomponent[0]) !== null && _content$component$su !== void 0 && _content$component$su.image ? {
242
257
  lg: "24px",
243
258
  md: "24px",
244
259
  sm: "16px",
@@ -254,22 +269,21 @@ function Layout1$1(content) {
254
269
  md: "24px",
255
270
  sm: "16px",
256
271
  xs: "16px"
257
- },
258
- color: (_content$component$su4 = content.component.subcomponent[0]) === null || _content$component$su4 === void 0 ? void 0 : _content$component$su4.text_color
272
+ }
259
273
  }
260
- }, ((_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.label_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Chip, {
274
+ }, ((_content$component$su2 = content.component.subcomponent[0]) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.label_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Chip, {
261
275
  disabled: true,
262
276
  color: "info",
263
- label: (_content$component$su6 = content.component.subcomponent[0]) !== null && _content$component$su6 !== void 0 && _content$component$su6.label ? (_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.label : 'Agregue etiqueta',
277
+ label: (_content$component$su3 = content.component.subcomponent[0]) !== null && _content$component$su3 !== void 0 && _content$component$su3.label ? (_content$component$su4 = content.component.subcomponent[0]) === null || _content$component$su4 === void 0 ? void 0 : _content$component$su4.label : 'Agregue etiqueta',
264
278
  sx: {
265
279
  marginBottom: '16px',
266
280
  fontSize: '1em',
267
281
  borderRadius: '6px',
268
- backgroundColor: (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.label_color
282
+ backgroundColor: (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.label_color
269
283
  }
270
284
  })), /*#__PURE__*/React.createElement(Typography, {
271
285
  dangerouslySetInnerHTML: {
272
- __html: (_content$component$su9 = content.component.subcomponent[0]) !== null && _content$component$su9 !== void 0 && _content$component$su9.title ? (_content$component$su10 = content.component.subcomponent[0]) === null || _content$component$su10 === void 0 ? void 0 : _content$component$su10.title : 'Agregue titulo'
286
+ __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'
273
287
  },
274
288
  sx: {
275
289
  marginBottom: '16px',
@@ -285,7 +299,7 @@ function Layout1$1(content) {
285
299
  }
286
300
  }), /*#__PURE__*/React.createElement(Typography, {
287
301
  dangerouslySetInnerHTML: {
288
- __html: (_content$component$su11 = content.component.subcomponent[0]) !== null && _content$component$su11 !== void 0 && _content$component$su11.description ? (_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.description : 'Agregue descripción'
302
+ __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'
289
303
  },
290
304
  sx: {
291
305
  marginBottom: '16px',
@@ -298,18 +312,18 @@ function Layout1$1(content) {
298
312
  xl: "1.125em"
299
313
  }
300
314
  }
301
- }), ((_content$component$su13 = content.component.subcomponent[0]) === null || _content$component$su13 === void 0 ? void 0 : _content$component$su13.button_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
315
+ }), ((_content$component$su10 = content.component.subcomponent[0]) === null || _content$component$su10 === void 0 ? void 0 : _content$component$su10.button_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
302
316
  variant: "contained",
303
317
  size: "medium",
304
318
  color: "primary",
305
- href: (_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.button_action,
306
- target: ((_content$component$su15 = content.component.subcomponent[0]) === null || _content$component$su15 === void 0 ? void 0 : _content$component$su15.link) == 4 ? '_blank' : '_self',
319
+ href: (_content$component$su11 = content.component.subcomponent[0]) === null || _content$component$su11 === void 0 ? void 0 : _content$component$su11.button_action,
320
+ target: ((_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.link) == 4 ? '_blank' : '_self',
307
321
  sx: {
308
322
  width: 'auto',
309
323
  padding: '14px 40px',
310
324
  borderRadius: '50px'
311
325
  }
312
- }, (_content$component$su16 = content.component.subcomponent[0]) !== null && _content$component$su16 !== void 0 && _content$component$su16.button_title ? (_content$component$su17 = content.component.subcomponent[0]) === null || _content$component$su17 === void 0 ? void 0 : _content$component$su17.button_title : 'Nombre botón')))));
326
+ }, (_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')))));
313
327
  }
314
328
 
315
329
  var Banner = /*#__PURE__*/function (_AtomicElements) {
@@ -325,12 +339,10 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
325
339
  'label_color': 'Label color',
326
340
  'label_active': 'Label active',
327
341
  'title': 'Tittle',
328
- 'image': 'Image',
329
342
  'description': 'Description',
330
343
  'button_title': 'Button Title',
331
344
  'button_action': 'Button action',
332
345
  'button_active': 'Button active',
333
- 'text_color': 'Text color',
334
346
  'link': 'Link'
335
347
  }];
336
348
  return _this;
@@ -513,7 +525,7 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
513
525
  }(AtomicElements);
514
526
 
515
527
  function Layout1$3(content) {
516
- var _content$component$su, _content$component$su2, _content$component$su3;
528
+ var _content$component$su;
517
529
  var visible = true;
518
530
  return /*#__PURE__*/React.createElement(Slide, {
519
531
  direction: "left",
@@ -524,7 +536,7 @@ function Layout1$3(content) {
524
536
  }
525
537
  }, /*#__PURE__*/React.createElement(Typography, {
526
538
  dangerouslySetInnerHTML: {
527
- __html: (_content$component$su = content.component.subcomponent[0]) !== null && _content$component$su !== void 0 && _content$component$su.title ? (_content$component$su2 = content.component.subcomponent[0]) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.title : 'Agregue titulo'
539
+ __html: content.component.title ? content.component.title : 'Agregue titulo'
528
540
  },
529
541
  sx: {
530
542
  whiteSpace: 'pre-wrap',
@@ -542,7 +554,7 @@ function Layout1$3(content) {
542
554
  spacing: 2,
543
555
  alignItems: "center",
544
556
  justifyContent: "center"
545
- }, (_content$component$su3 = content.component.subcomponent) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.map(function (img, index) {
557
+ }, (_content$component$su = content.component.subcomponent) === null || _content$component$su === void 0 ? void 0 : _content$component$su.map(function (img, index) {
546
558
  return /*#__PURE__*/React.createElement(Grid$1, {
547
559
  key: index,
548
560
  item: true,
@@ -565,11 +577,14 @@ function Layout1$3(content) {
565
577
  }
566
578
  }
567
579
  }, /*#__PURE__*/React.createElement(CardMedia, {
580
+ component: "img",
581
+ alt: img.description ? img.description : "",
582
+ image: img.image.url ? img.image.url : "none",
568
583
  sx: {
569
584
  width: "100%",
570
- height: "100%"
571
- },
572
- image: img.image.url ? img.image.url : 'none'
585
+ height: "100%",
586
+ transform: "translate(\n " + img.image_transform_x + "%\n ,\n " + img.image_transform_y + "%)" + ("scale(" + (img.image_scale ? img.image_scale : "1") + ")")
587
+ }
573
588
  })));
574
589
  }))));
575
590
  }
@@ -583,7 +598,12 @@ var Gallery = /*#__PURE__*/function (_AtomicElements) {
583
598
  _this.layoutFootprint = ['gallery_layout_1.png'];
584
599
  _this.layoutFootprintReq = [{
585
600
  'type': 1,
586
- 'image': 'req_hor'
601
+ 'image': 'req_hor',
602
+ 'title': 'Tittle',
603
+ "description": "Description",
604
+ 'image_scale': 'image scale',
605
+ 'image_transform_x': 'image transform x',
606
+ 'image_transform_y': 'image transform y'
587
607
  }];
588
608
  return _this;
589
609
  }
@@ -722,7 +742,7 @@ function Item$2(props) {
722
742
  if (!arrayFourElements) {
723
743
  return null;
724
744
  } else {
725
- return content.length > 4 ? /*#__PURE__*/React.createElement(Carousel, {
745
+ return content.length >= 1 ? /*#__PURE__*/React.createElement(Carousel, {
726
746
  autoPlay: false,
727
747
  indicators: false,
728
748
  navButtonsAlwaysVisible: true,
@@ -814,15 +834,17 @@ function Item$2(props) {
814
834
  borderRadius: 0,
815
835
  border: '1px solid #e5e5e5'
816
836
  }, _ref["borderRadius"] = '10px', _ref.backgroundColor = '#fff', _ref.marginTop = '20px', _ref)
817
- }, /*#__PURE__*/React.createElement(CardMedia, {
837
+ }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardMedia, {
818
838
  component: "img",
839
+ alt: item.title ? item.title : '',
819
840
  height: "305px",
820
841
  width: "305px",
821
- image: item.image.url ? item.image.url : 'https://via.placeholder.com/300x300.png?text=No+Image',
842
+ image: item.image.url ? item.image.url : 'none',
822
843
  sx: {
823
- aspectRatio: '1/1'
844
+ aspectRatio: '1/1',
845
+ transform: "translate(\n " + item.image_transform_x + "%\n ,\n " + item.image_transform_y + "%)" + ("scale(" + (item.image_scale ? item.image_scale : "1") + ")")
824
846
  }
825
- }), /*#__PURE__*/React.createElement(CardContent, {
847
+ })), /*#__PURE__*/React.createElement(CardContent, {
826
848
  sx: {
827
849
  padding: '8px 16px',
828
850
  textAlign: side,
@@ -938,7 +960,8 @@ function Item$2(props) {
938
960
  width: "300px",
939
961
  image: item.image.url ? item.image.url : 'https://via.placeholder.com/300x300.png?text=No+Image',
940
962
  sx: {
941
- aspectRatio: '1/1'
963
+ aspectRatio: '1/1',
964
+ transform: "translate(\n " + item.image_transform_x + "%\n ,\n " + item.image_transform_y + "%)" + ("scale(" + (item.image_scale ? item.image_scale : "1") + ")")
942
965
  }
943
966
  }), /*#__PURE__*/React.createElement(CardContent, {
944
967
  sx: {
@@ -1014,6 +1037,9 @@ var List = /*#__PURE__*/function (_AtomicElements) {
1014
1037
  'button_active': 'Button active',
1015
1038
  'button_title': 'Button Title',
1016
1039
  'button_action': 'Button Action',
1040
+ 'image_scale': 'image scale',
1041
+ 'image_transform_x': 'image transform x',
1042
+ 'image_transform_y': 'image transform y',
1017
1043
  'image': 'sqr',
1018
1044
  'link': 'Link'
1019
1045
  }];