@gem-sdk/components 2.1.13-staging.6 → 2.1.13-staging.8

package/dist/cjs/image/components/NextImage.liquid.js

@@ -97,7 +97,7 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
       ${customAttrs}
       draggable="false"
       class="${core.cls(className, {
-        gp_lazyload: !isNotLazyload && enableLazyLoadImage,
+        gp_lazyload: !customLazyload && enableLazyLoadImage,
         gp_force_load: pageContext?.isOptimizePlan
     })}"
       ${{

package/dist/cjs/image-comparison/components/CompareImage.liquid.js

@@ -11,7 +11,7 @@ var helpers$1 = require('../../helpers.js');
 var helpers = require('./common/helpers.js');
 
 const CompareImage = (props)=>{
-    const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, pageContext, translate } = props;
+    const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, enableLazyLoadImage, pageContext, translate } = props;
     const horizontal = !vertical;
     const leftRatio = (leftImage?.width ?? 0) / (leftImage?.height ?? 1);
     const rightRatio = (rightImage?.width ?? 0) / (rightImage?.height ?? 1);
@@ -271,7 +271,9 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...core.makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        enableLazyLoadImage,
+        pageContext
     })}
       ${NextImage_liquid.default({
         customAttrs: {
@@ -287,7 +289,9 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...core.makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        enableLazyLoadImage,
+        pageContext
     })}
       <div id="image-comparison-slider-${componentUid}" style="${{
         ...initStyles.slider

package/dist/cjs/video/components/HTML5Embed.liquid.js

@@ -7,6 +7,7 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const HTML5Embed = (props)=>{
+    const { enableLazyLoadImage, pageContext } = props;
     const videoId = `gp-video-${props.uid}`;
     const preloadThumbnail = props.autoplay && props.thumbnail;
     const offLazyVideo = !props.lazy && props.isVideoComponent;
@@ -23,7 +24,9 @@ const HTML5Embed = (props)=>{
                 '--op': 0,
                 '--z': -1,
                 display: 'none'
-            }
+            },
+            enableLazyLoadImage,
+            pageContext
         })}
     ${core.RenderIf(props.autoplay, `<script>
         document.addEventListener("DOMContentLoaded", (event) => {

package/dist/cjs/video/components/LiteYouTubeEmbed.liquid.js

@@ -7,7 +7,7 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const LiteYouTubeEmbed = (props)=>{
-    const { style, lazy, preload } = props;
+    const { style, lazy, preload, enableLazyLoadImage, pageContext } = props;
     const videoUid = `gp-video-${props.uid}`;
     const videoId = encodeURIComponent(props.id);
     const videoTitle = props.title;
@@ -52,7 +52,9 @@ const LiteYouTubeEmbed = (props)=>{
         src: posterUrl,
         alt: 'Poster',
         className: `gp-invisible gp-w-full gp-h-full gp_lazyforbg`,
-        isDisableAspectStyle: true
+        isDisableAspectStyle: true,
+        enableLazyLoadImage,
+        pageContext
     })}
         <button
           type="button"

package/dist/esm/image/components/NextImage.liquid.js

@@ -93,7 +93,7 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
       ${customAttrs}
       draggable="false"
       class="${cls(className, {
-        gp_lazyload: !isNotLazyload && enableLazyLoadImage,
+        gp_lazyload: !customLazyload && enableLazyLoadImage,
         gp_force_load: pageContext?.isOptimizePlan
     })}"
       ${{

package/dist/esm/image-comparison/components/CompareImage.liquid.js

@@ -7,7 +7,7 @@ import { getSettingPreloadData } from '../../helpers.js';
 import { styleLazyPlaceholder } from './common/helpers.js';
 
 const CompareImage = (props)=>{
-    const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, pageContext, translate } = props;
+    const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, enableLazyLoadImage, pageContext, translate } = props;
     const horizontal = !vertical;
     const leftRatio = (leftImage?.width ?? 0) / (leftImage?.height ?? 1);
     const rightRatio = (rightImage?.width ?? 0) / (rightImage?.height ?? 1);
@@ -267,7 +267,9 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        enableLazyLoadImage,
+        pageContext
     })}
       ${NextImage({
         customAttrs: {
@@ -283,7 +285,9 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        enableLazyLoadImage,
+        pageContext
     })}
       <div id="image-comparison-slider-${componentUid}" style="${{
         ...initStyles.slider

package/dist/esm/video/components/HTML5Embed.liquid.js

@@ -3,6 +3,7 @@ import NextImage from '../../image/components/NextImage.liquid.js';
 import { getSettingPreloadData } from '../../helpers.js';
 
 const HTML5Embed = (props)=>{
+    const { enableLazyLoadImage, pageContext } = props;
     const videoId = `gp-video-${props.uid}`;
     const preloadThumbnail = props.autoplay && props.thumbnail;
     const offLazyVideo = !props.lazy && props.isVideoComponent;
@@ -19,7 +20,9 @@ const HTML5Embed = (props)=>{
                 '--op': 0,
                 '--z': -1,
                 display: 'none'
-            }
+            },
+            enableLazyLoadImage,
+            pageContext
         })}
     ${RenderIf(props.autoplay, `<script>
         document.addEventListener("DOMContentLoaded", (event) => {

package/dist/esm/video/components/LiteYouTubeEmbed.liquid.js

@@ -3,7 +3,7 @@ import NextImage from '../../image/components/NextImage.liquid.js';
 import { getSettingPreloadData } from '../../helpers.js';
 
 const LiteYouTubeEmbed = (props)=>{
-    const { style, lazy, preload } = props;
+    const { style, lazy, preload, enableLazyLoadImage, pageContext } = props;
     const videoUid = `gp-video-${props.uid}`;
     const videoId = encodeURIComponent(props.id);
     const videoTitle = props.title;
@@ -48,7 +48,9 @@ const LiteYouTubeEmbed = (props)=>{
         src: posterUrl,
         alt: 'Poster',
         className: `gp-invisible gp-w-full gp-h-full gp_lazyforbg`,
-        isDisableAspectStyle: true
+        isDisableAspectStyle: true,
+        enableLazyLoadImage,
+        pageContext
     })}
         <button
           type="button"

package/dist/types/index.d.ts

@@ -3934,6 +3934,7 @@ type ImageComparisonStyle = {
 } & Pick<SharedProps, 'aspectRatio'>;
 type ImageComparisonProps = BaseProps & {
     className?: string;
+    enableLazyLoadImage?: boolean;
     pageContext?: PageContext;
 } & BasePropsWrap<ImageComparisonSetting, ImageComparisonStyle>;
 declare const ImageComparison$1: React.FC<ImageComparisonProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.1.13-staging.6",
+  "version": "2.1.13-staging.8",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",