keski_lib_catalog 1.2.3 → 1.2.5

package/dist/index.modern.js

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import Carousel from 'react-material-ui-carousel';
 import { Box, Slide, Typography, Container, Chip, Button, Card, CardMedia, Grid as Grid$1, useTheme, useMediaQuery, CardContent } from '@mui/material';
-import { styled, createTheme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/Grid';
 import Grow from '@mui/material/Grow';
-import { ThemeProvider } from '@emotion/react';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -244,6 +243,7 @@ function Layout1$1(content) {
   }), ((_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.button_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     size: "medium",
+    color: "secondary",
     href: (_content$component$su13 = content.component.subcomponent[0]) === null || _content$component$su13 === void 0 ? void 0 : _content$component$su13.button_action,
     target: ((_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.link) == 4 ? '_blank' : '_self',
     sx: {
@@ -281,22 +281,15 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
 }(AtomicElements);
 
 var Item$1 = styled(Paper)(function (_ref) {
-  var theme = _ref.theme;
-  return _extends({
-    backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff'
-  }, theme.typography.body2, {
-    textAlign: 'left',
-    color: theme.palette.text.secondary
-  });
+  return {};
 });
 function Layout1$2(content) {
-  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;
+  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;
   var visible = true;
   return /*#__PURE__*/React.createElement(Container, {
     maxWidth: "lg"
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    justifyContent: "space-evenly",
     alignItems: "center",
     direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
   }, /*#__PURE__*/React.createElement(Grid, {
@@ -335,9 +328,9 @@ function Layout1$2(content) {
       paddingTop: '56.25%',
       backgroundSize: 'center',
       backgroundPosition: 'center',
-      transform: (_content$component$su = content.component.subcomponent[0]) !== null && _content$component$su !== void 0 && _content$component$su.image_scale ? (_content$component$su2 = content.component.subcomponent[0]) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.image_scale : '1'
+      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") + ")")
     },
-    image: (_content$component$su3 = content.component.subcomponent[0]) !== null && _content$component$su3 !== void 0 && _content$component$su3.image ? (_content$component$su4 = content.component.subcomponent[0]) === null || _content$component$su4 === void 0 ? void 0 : _content$component$su4.image.url : 'none'
+    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'
   }))))), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
@@ -364,15 +357,15 @@ function Layout1$2(content) {
       width: "100%",
       background: "none"
     }
-  }, /*#__PURE__*/React.createElement(Box, null, ((_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, {
+  }, /*#__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, {
     disabled: true,
     color: "info",
-    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',
+    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',
     sx: {
       marginBottom: '16px',
       fontSize: '1em',
       borderRadius: '6px',
-      backgroundColor: (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.label_color
+      backgroundColor: (_content$component$su10 = content.component.subcomponent[0]) === null || _content$component$su10 === void 0 ? void 0 : _content$component$su10.label_color
     }
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {
@@ -380,7 +373,7 @@ function Layout1$2(content) {
     }
   }, /*#__PURE__*/React.createElement(Typography, {
     dangerouslySetInnerHTML: {
-      __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'
+      __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'
     },
     sx: {
       whiteSpace: 'pre-wrap',
@@ -397,7 +390,7 @@ function Layout1$2(content) {
     }
   }, /*#__PURE__*/React.createElement(Typography, {
     dangerouslySetInnerHTML: {
-      __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'
+      __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'
     },
     sx: {
       whiteSpace: 'pre-wrap',
@@ -407,16 +400,17 @@ function Layout1$2(content) {
         lg: "1em"
       }
     }
-  })), ((_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, {
+  })), ((_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, {
     variant: "contained",
-    href: (_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.button_action,
-    target: ((_content$component$su15 = content.component.subcomponent[0]) === null || _content$component$su15 === void 0 ? void 0 : _content$component$su15.link) == 4 ? '_blank' : '_self',
+    color: "secondary",
+    href: (_content$component$su16 = content.component.subcomponent[0]) === null || _content$component$su16 === void 0 ? void 0 : _content$component$su16.button_action,
+    target: ((_content$component$su17 = content.component.subcomponent[0]) === null || _content$component$su17 === void 0 ? void 0 : _content$component$su17.link) == 4 ? '_blank' : '_self',
     sx: {
       width: 'auto',
       padding: '14px 40px',
       borderRadius: '40px'
     }
-  }, (_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'))))))));
+  }, (_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'))))))));
 }
 
 var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
@@ -438,6 +432,8 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
       'button_active': 'Button Active',
       'image': 'image',
       'image_scale': 'image scale',
+      'image_transform_x': 'image transform x',
+      'image_transform_y': 'image transform y',
       'link': 'Link'
     }, {
       'type': 0,
@@ -455,7 +451,9 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
 function Layout1$3(content) {
   var _content$component$su;
   var visible = true;
-  return /*#__PURE__*/React.createElement(Slide, {
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: "lg"
+  }, /*#__PURE__*/React.createElement(Slide, {
     direction: "left",
     "in": visible
   }, /*#__PURE__*/React.createElement(Box, {
@@ -488,7 +486,7 @@ function Layout1$3(content) {
         marginBottom: '16px'
       }
     }));
-  }))));
+  })))));
 }
 
 var Gallery = /*#__PURE__*/function (_AtomicElements) {
@@ -510,14 +508,16 @@ var Gallery = /*#__PURE__*/function (_AtomicElements) {
 function Layout1$4(content) {
   var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5;
   var visible = true;
-  return /*#__PURE__*/React.createElement(Slide, {
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: "lg"
+  }, /*#__PURE__*/React.createElement(Slide, {
     direction: "left",
     "in": visible
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
       width: {
         xs: '100%',
-        md: '70%'
+        md: '100%'
       },
       color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color,
       textAlign: content.component.justify_content
@@ -535,7 +535,7 @@ function Layout1$4(content) {
       color: '#767676',
       whiteSpace: 'pre-wrap'
     }
-  }, (_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')));
+  }, (_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'))));
 }
 
 var Text = /*#__PURE__*/function (_AtomicElements) {
@@ -1027,8 +1027,9 @@ function CanvasContainer(props) {
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
       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),
-      padding: '64px 24px',
-      width: '100%'
+      padding: json.type === 0 ? '0px 24px' : '64px 24px',
+      width: '100%',
+      height: '100%'
     }
   }, /*#__PURE__*/React.createElement(Container, {
     maxWidth: "xl",
@@ -1085,55 +1086,6 @@ function hexToRgb(hex) {
 
 var JK_RESOURCES = 'https://jk-clients.s3.us-east-2.amazonaws.com/jk-resources/';
 
-var COLOR_PRIMARY = '#4CAF50';
-var COLOR_SECONDARY = '#FF5722';
-var theme = createTheme({
-  palette: {
-    primary: {
-      main: COLOR_PRIMARY
-    },
-    secondary: {
-      main: COLOR_SECONDARY
-    }
-  },
-  components: {
-    MuiButtonBase: {
-      defaultProps: {
-        disableRipple: true
-      }
-    },
-    typography: {
-      button: {
-        textTransform: 'none'
-      }
-    },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
-          borderRadius: '90px'
-        }
-      }
-    },
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          borderRadius: '16px',
-          textTransform: 'initial'
-        }
-      }
-    }
-  },
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 840,
-      lg: 1200,
-      xl: 1536
-    }
-  }
-});
-
 var Section = /*#__PURE__*/function () {
   function Section(AtomicElement, theme) {
     this.child = AtomicElement;
@@ -1141,11 +1093,12 @@ var Section = /*#__PURE__*/function () {
   var _proto = Section.prototype;
   _proto.component = function component(json) {
     console.log('json', json);
-    return /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: theme
-    }, /*#__PURE__*/React.createElement(CanvasContainer, {
-      json: json
-    }, this.child.build(json, json.component.layout)));
+    return (
+      /*#__PURE__*/
+      React.createElement(CanvasContainer, {
+        json: json
+      }, this.child.build(json, json.component.layout))
+    );
   };
   _proto.getFootPrint = function getFootPrint(layout) {
     var footPrint = this.child.footprint(layout);