diy-template-components 0.2.49 → 0.2.53

package/build/index.js

@@ -2,15 +2,15 @@
 
 
 
-function ___$insertStyle(css) {
-    if (!css || !window) {
-        return;
-    }
-    const style = document.createElement('style');
-    style.setAttribute('type', 'text/css');
-    style.innerHTML = css;
-    document.head.appendChild(style);
-    return css;
+function ___$insertStyle(css) {
+    if (!css || typeof window === 'undefined') {
+        return;
+    }
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    return css;
 }
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -1156,7 +1156,7 @@ const NextImageRenderer = ({
       refSetter,
       className
     } = props;
-    if (isCustomWebsite) {
+    if (isCustomWebsite && typeof Image !== undefined) {
       const classes = nextImageRendererStyles();
       const imageLoader = ({
         src,
@@ -1171,8 +1171,9 @@ const NextImageRenderer = ({
         return `${process.env.NEXT_PUBLIC_ENV_ASSET_PREFIX}/_next/image?url=${src}&q=${quality || 75}&w=${dynamicWidth}`;
       };
       const NextImage = require('next/image').default;
+      console.log('next image succes');
       return /*#__PURE__*/React__default["default"].createElement(NextImage, _extends({
-        priority: sectionIndex === 0 ? true : false,
+        priority: sectionIndex === '0' ? true : false,
         loader: imageLoader,
         src: src,
         layout: 'fill',
@@ -1182,6 +1183,7 @@ const NextImageRenderer = ({
         alt: "image"
       }));
     } else {
+      console.log('next image failed image tag');
       return /*#__PURE__*/React__default["default"].createElement("img", {
         ref: refSetter,
         className: className,
@@ -1583,7 +1585,12 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     width: '15%',
     height: 'auto',
     position: 'relative',
-    paddingBottom: ' 6%',
+    paddingBottom: ({
+      isCustomWebsite
+    }) => isCustomWebsite ? ' 6%' : '0%',
+    paddingTop: ({
+      isCustomWebsite
+    }) => isCustomWebsite ? ' 0%' : '1%',
     '& p': {
       margin: '0',
       paddingRight: '8px',
@@ -1658,7 +1665,9 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     poweredDiv: {
       // marginTop: '15px'
       width: '28%',
-      paddingBottom: '9%'
+      paddingBottom: ({
+        isCustomWebsite
+      }) => isCustomWebsite ? "8%" : '0%'
     },
     socialMediaCta: {
       margin: '0 8px 16px 8px'
@@ -2227,7 +2236,9 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     },
     imageContainer: {
       height: 'undefined',
-      paddingBottom: '80%'
+      paddingBottom: ({
+        isCustomWebsite
+      }) => isCustomWebsite ? "100%" : "unset"
     }
   }
 }));
@@ -2453,13 +2464,16 @@ function Section$4({
   nodeData,
   sectionIndex
 }) {
-  const classes = useSectionStyles$8();
   const {
     layout: {
       containerWidth
     },
-    isMobile
+    isMobile,
+    isCustomWebsite
   } = React.useContext(PageContext);
+  const classes = useSectionStyles$8({
+    isCustomWebsite
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2810,7 +2824,7 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     width: '100%',
     // maxWidth: ({ containerWidth } = {}) => containerWidth,
     position: 'absolute',
-    zIndex: '99'
+    zIndex: '9'
   },
   absoluteButtons: {
     display: 'flex',
@@ -2838,14 +2852,16 @@ const useSectionStyles$6 = createUseStyles(theme => ({
   centerBgImageContainer: {
     width: '100%',
     position: 'relative',
-    paddingBottom: '35rem',
-    backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)',
+    // paddingBottom: '35rem',
+    paddingBottom: ({
+      isCustomWebsite
+    }) => isCustomWebsite ? '45%' : "unset",
     backgroundSize: 'cover',
     backgroundPosition: 'center center'
   },
   centerBgImage: {
     objectFit: 'cover',
-    backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)',
+    width: "100%",
     backgroundSize: 'cover',
     backgroundPosition: 'center center'
   },
@@ -2902,28 +2918,36 @@ const useSectionStyles$6 = createUseStyles(theme => ({
       margin: '16px 0'
     },
     centerBgImageContainer: {
-      width: '100%',
+      width: ({
+        isCustomWebsite
+      }) => isCustomWebsite ? "100%" : 'unset',
       position: 'relative',
       height: '34rem',
-      paddingBottom: '100%'
+      paddingBottom: '0'
+    },
+    centerBgImage: {
+      objectFit: "cover",
+      width: "100%",
+      height: "inherit"
     }
   }
 }));
 
 const Section$3 = ({
   nodeData,
-  isCustomWebsite,
   sectionIndex
 }) => {
   const {
     layout: {
       containerWidth
     },
-    isMobile
+    isMobile,
+    isCustomWebsite
   } = React.useContext(PageContext);
   const classes = useSectionStyles$6({
     imageUrl: nodeData.image.metadata.value,
-    containerWidth
+    containerWidth,
+    isCustomWebsite
   });
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.bannerCarouselCenterSection
@@ -2971,7 +2995,9 @@ function BannerCarouselCenter({
   isCustomWebsite,
   sectionIndex
 }) {
-  const classes = useSectionStyles$6();
+  const classes = useSectionStyles$6({
+    isCustomWebsite
+  });
   const [{
     bannerCarousel
   }] = sectionData.components;
@@ -2984,7 +3010,6 @@ function BannerCarouselCenter({
     className: classes.bannerCarouselCenterSection
   }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$3, {
     nodeData: node,
-    isCustomWebsite: isCustomWebsite,
     key: idx /* or some other unique property */,
     sectionIndex: sectionIndex
   }))));
@@ -3087,14 +3112,13 @@ const useSectionStyles$5 = createUseStyles(theme => {
         width: '100%',
         padding: '0'
       },
-      // imageContainer: {
-
-      //   '& img': {
-      //     height: "520px",
-      //     objectFit: "cover"
-      //   }
-
-      // },
+      imageContainer: {
+        height: 'unset !important',
+        '& img': {
+          height: 'unset !important',
+          objectFit: "cover"
+        }
+      },
       imageContainerDiv: {
         width: '100%'
       },
@@ -3103,7 +3127,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
       },
       sideBannerImage: {
         width: '100%',
-        height: 'initial'
+        height: 'unset !important'
       },
       textContainer: {
         padding: '20px 20px',
@@ -3978,10 +4002,10 @@ const useVideoStyles$1 = createUseStyles(theme => {
         isLoaded
       } = {}) => isLoaded ? 'block' : 'none'
     },
-    // icon: {
-    //   zIndex: '999'
-    // },
-
+    icon: {
+      zIndex: '999',
+      position: "absolute"
+    },
     imgContainer: {
       position: 'absolute',
       width: '100%',
@@ -3989,6 +4013,7 @@ const useVideoStyles$1 = createUseStyles(theme => {
       borderRadius: theme.shape.borderRadius.small,
       // backgroundImage: ({ imageUrl } = {}) =>
       //   `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), url("${imageUrl}")`,
+      background: "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)",
       backgroundSize: 'cover',
       display: 'flex',
       justifyContent: 'center',
@@ -3997,6 +4022,12 @@ const useVideoStyles$1 = createUseStyles(theme => {
         cursor: 'pointer'
       }
     },
+    videoPlayerImage: {
+      height: '100%',
+      width: '100%',
+      objectFit: 'cover',
+      objectPosition: 'top'
+    },
     '@media (max-width: 767px)': {
       iframe: {
         borderRadius: '8px 8px 0 0'
@@ -4033,7 +4064,8 @@ function VideoPlayer(props) {
     className: classes.imgContainer
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     src: imageUrl,
-    sectionIndex: props?.sectionIndex
+    sectionIndex: props?.sectionIndex,
+    className: classes.videoPlayerImage
   }), isEnabled ? /*#__PURE__*/React__default["default"].createElement(Loader, null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, props.onlyThumbnail ? null : /*#__PURE__*/React__default["default"].createElement(Icon, {
     name: "Video Play",
     color: theme.palette.font.invertedDefault,