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

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 (18) hide show
  1. package/dist/cjs/banner/components/hero-banner/index.liquid.js +6 -6
  2. package/dist/cjs/image/components/AdaptiveImage.liquid.js +6 -5
  3. package/dist/cjs/image/components/Image.liquid.js +6 -4
  4. package/dist/cjs/image/components/NextImage.liquid.js +4 -3
  5. package/dist/cjs/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js +4 -4
  6. package/dist/cjs/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js +2 -2
  7. package/dist/cjs/product/components/ProductImagesV2/liquid/ProductGalleryGrid.liquid.js +4 -4
  8. package/dist/cjs/product/components/ProductImagesV2/liquid/ProductImages.liquid.js +4 -4
  9. package/dist/esm/banner/components/hero-banner/index.liquid.js +6 -6
  10. package/dist/esm/image/components/AdaptiveImage.liquid.js +6 -5
  11. package/dist/esm/image/components/Image.liquid.js +6 -4
  12. package/dist/esm/image/components/NextImage.liquid.js +4 -3
  13. package/dist/esm/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js +4 -4
  14. package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js +2 -2
  15. package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryGrid.liquid.js +4 -4
  16. package/dist/esm/product/components/ProductImagesV2/liquid/ProductImages.liquid.js +4 -4
  17. package/dist/types/index.d.ts +6 -5
  18. package/package.json +2 -2
package/dist/cjs/banner/components/hero-banner/index.liquid.js CHANGED
@@ -14,7 +14,7 @@ var NextImage_liquid = require('../../../image/components/NextImage.liquid.js');
14
14
  var getSrcSet = require('../../../image/helpers/getSrcSet.js');
15
15
  var helpers$1 = require('../../../image/components/helpers.js');
16
16
 
17
- const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyloadImage = true })=>{
17
+ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyLoadImage = true })=>{
18
18
  const { link, layout, verticalAlign, order, alignBanner, alt, title } = setting ?? {};
19
19
  const { background, overlayEnable, overlayColor, overlayOpacity, verticalGutter, contentWidth, hoverEffect, hoverEffectDuration, hoverEffectScale, cornerBg, borderBg, hasActiveShadow, shadowBg, sizeSetting, contentPadding } = styles ?? {};
20
20
  const enableParallax = setting?.enableParallax || false;
@@ -183,7 +183,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
183
183
  alt,
184
184
  title,
185
185
  imagePlaceholder,
186
- enableLazyloadImage
186
+ enableLazyLoadImage
187
187
  })}
188
188
  <div class="${core.cls('gp-absolute gp-w-full gp-h-full')}">
189
189
  <div
@@ -208,9 +208,9 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
208
208
  liquid: true
209
209
  }),
210
210
  ...core.makeStyleResponsive('bgi', {
211
- desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
212
- tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
213
- mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
211
+ desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyLoadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
212
+ tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyLoadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
213
+ mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyLoadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
214
214
  }),
215
215
  '--duration': `${hoverEffectDuration ?? 0}s`,
216
216
  '--scale': hoverEffectScale ?? 1,
@@ -224,7 +224,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
224
224
  alt: `lazy image ${device}`,
225
225
  className: `gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg ${device === 'tablet' ? 'gp_lazybg_tl' : ''} ${device === 'mobile' ? 'gp_lazybg_mb' : ''}`,
226
226
  isDisableAspectStyle: true,
227
- enableLazyloadImage
227
+ enableLazyLoadImage
228
228
  }));
229
229
  }).join('') : ''}
230
230
  </div>
package/dist/cjs/image/components/AdaptiveImage.liquid.js CHANGED
@@ -6,7 +6,7 @@ var core = require('@gem-sdk/core');
6
6
  var getSrcSet = require('../helpers/getSrcSet.js');
7
7
  var helpers = require('./helpers.js');
8
8
 
9
- const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, ...props })=>{
9
+ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyLoadImage = true, pageContext, ...props })=>{
10
10
  const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
11
11
  const srcDesktop = getSrcSet.getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
12
12
  const srcTablet = (getSrcSet.getImageSrc(srcSet?.tablet, 'tablet') ?? getSrcSet.getImageSrc(srcSet?.desktop, 'tablet')) || fallBackImage;
@@ -31,16 +31,17 @@ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className,
31
31
  }}"
32
32
  />
33
33
  `, core.template`
34
- ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyloadImage ? imagePlaceholder?.['mobile'] ?? helpers.createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcMobile}" />` : ''}
35
- ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyloadImage ? imagePlaceholder?.['tablet'] ?? helpers.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
34
+ ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['mobile'] ?? helpers.createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcMobile}" />` : ''}
35
+ ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['tablet'] ?? helpers.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
36
36
  <img
37
37
  ${{
38
38
  ...props
39
39
  }}
40
40
  class="${core.cls(className, {
41
- gp_lazyload: enableLazyloadImage
41
+ gp_lazyload: enableLazyLoadImage,
42
+ gp_force_load: pageContext?.isOptimizePlan
42
43
  })}"
43
- src="${enableLazyloadImage ? imagePlaceholder?.['desktop'] ?? helpers.createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
44
+ src="${enableLazyLoadImage ? imagePlaceholder?.['desktop'] ?? helpers.createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
44
45
  data-src="${srcDesktop}"
45
46
  width="100%"
46
47
  alt="${alt}"
package/dist/cjs/image/components/Image.liquid.js CHANGED
@@ -7,7 +7,7 @@ var AdaptiveImage_liquid = require('./AdaptiveImage.liquid.js');
7
7
  var NextImage_liquid = require('./NextImage.liquid.js');
8
8
  var helpers = require('../../helpers.js');
9
9
 
10
- const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyloadImage = true })=>{
10
+ const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyLoadImage = true, pageContext })=>{
11
11
  const { imageLink, isNotLazyload } = setting ?? {};
12
12
  const { shape } = styles ?? {};
13
13
  const { Wrap: WrapLink, urlData } = helpers.getInsertLinkData('div', imageLink);
@@ -34,7 +34,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
34
34
  }}
35
35
  data-id="${builderProps?.uid}"
36
36
  role="presentation"
37
- class="${core.cls('gp-group/image', builderProps?.uid, advanced?.cssClass)}"
37
+ class="${core.cls('gp-group/image', builderProps?.uid, advanced?.cssClass, `force-publish-${new Date().getTime()}`)}"
38
38
  style="${{
39
39
  ...style,
40
40
  ...core.makeStyleResponsive('ta', styles?.align)
@@ -77,7 +77,8 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
77
77
  aspectRatio: core.getAspectRatioGlobalSize(styles?.shape),
78
78
  layout: styles?.objectFit,
79
79
  priority: setting?.priority,
80
- enableLazyloadImage
80
+ enableLazyLoadImage,
81
+ pageContext
81
82
  }) : NextImage_liquid.default({
82
83
  ...setting?.image,
83
84
  priority: setting?.priority,
@@ -106,7 +107,8 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
106
107
  layout: styles?.objectFit
107
108
  },
108
109
  isNotLazyload,
109
- enableLazyloadImage
110
+ enableLazyLoadImage,
111
+ pageContext
110
112
  })}
111
113
  </${WrapLink}>
112
114
  </div>`;
package/dist/cjs/image/components/NextImage.liquid.js CHANGED
@@ -7,7 +7,7 @@ var getSrcSet = require('../helpers/getSrcSet.js');
7
7
  var index = require('../../product/components/ProductVariants/index.js');
8
8
  var helpers = require('./helpers.js');
9
9
 
10
- const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyloadImage = true, srcset, sizes, ...props })=>{
10
+ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyLoadImage = true, pageContext, srcset, sizes, ...props })=>{
11
11
  const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
12
12
  const newBackupFilekey = backupFileKey ? getSrcSet.getNewBackupFileKey(backupFileKey ?? '', src) : '';
13
13
  const srcImage = srcIsLiquidCode ? baseSrc : getSrcSet.getImageSrc({
@@ -97,12 +97,13 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
97
97
  ${customAttrs}
98
98
  draggable="false"
99
99
  class="${core.cls(className, {
100
- gp_lazyload: !customLazyload && enableLazyloadImage
100
+ gp_lazyload: !isNotLazyload && enableLazyLoadImage,
101
+ gp_force_load: pageContext?.isOptimizePlan
101
102
  })}"
102
103
  ${{
103
104
  'data-src': srcImage,
104
105
  'data-srcset': srcSetImg,
105
- src: enableLazyloadImage ? imagePlaceholder : srcImage,
106
+ src: enableLazyLoadImage ? imagePlaceholder : srcImage,
106
107
  width,
107
108
  height,
108
109
  alt,
package/dist/cjs/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js CHANGED
@@ -13,7 +13,7 @@ var NextImage_liquid = require('../../../../image/components/NextImage.liquid.js
13
13
  var Video_liquid = require('../../../../image/components/Video.liquid.js');
14
14
  var _function = require('../../../helpers/function.js');
15
15
 
16
- const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
16
+ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
17
17
  const ftAspectRatio = common.getAspectRatio(setting.ftShape);
18
18
  const getStyleFeaturedImageDisplay = ()=>{
19
19
  return common.getDisplayStyle((device)=>![
@@ -153,7 +153,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
153
153
  },
154
154
  priority: setting?.preload,
155
155
  className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${className}`,
156
- enableLazyloadImage
156
+ enableLazyLoadImage
157
157
  })}`;
158
158
  };
159
159
  const renderNoImage = ()=>{
@@ -171,7 +171,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
171
171
  },
172
172
  priority: setting?.preload,
173
173
  className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none`,
174
- enableLazyloadImage
174
+ enableLazyLoadImage
175
175
  })}`;
176
176
  };
177
177
  const getValueFromValueContainUnit = (value)=>{
@@ -398,7 +398,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
398
398
  },
399
399
  className: `gp-w-full featured-image-only !gp-rounded-none`,
400
400
  customLazyload: true,
401
- enableLazyloadImage
401
+ enableLazyLoadImage
402
402
  })}
403
403
  {%- endif -%}
404
404
  `
package/dist/cjs/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js CHANGED
@@ -10,7 +10,7 @@ var common = require('../common/common.js');
10
10
  var productGallery = require('../common/productGallery.js');
11
11
  var _function = require('../../../helpers/function.js');
12
12
 
13
- const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
13
+ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
14
14
  const getCarouselDisplay = ()=>{
15
15
  const isDisplayCarousel = (type, position, device)=>{
16
16
  const layout = core.getResponsiveValueByScreen(position, device);
@@ -90,7 +90,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage,
90
90
  customLazyload: true,
91
91
  style: style,
92
92
  className: '!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer',
93
- enableLazyloadImage
93
+ enableLazyLoadImage
94
94
  })}`;
95
95
  };
96
96
  const aspectRatioToPaddingBottom = ()=>{
package/dist/cjs/product/components/ProductImagesV2/liquid/ProductGalleryGrid.liquid.js CHANGED
@@ -12,7 +12,7 @@ var Modal3d_liquid = require('../../../../image/components/Modal3d.liquid.js');
12
12
  var Video_liquid = require('../../../../image/components/Video.liquid.js');
13
13
  var HTML5Embed_liquid = require('../../../../video/components/HTML5Embed.liquid.js');
14
14
 
15
- const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyloadImage, ...setting })=>{
15
+ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyLoadImage, ...setting })=>{
16
16
  const getGridDisplay = ()=>{
17
17
  const isDisplayGrid = (type, position, device)=>{
18
18
  const layout = core.getResponsiveValueByScreen(position, device);
@@ -101,7 +101,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
101
101
  style: style,
102
102
  className: '!gp-rounded-none',
103
103
  customLazyload: false,
104
- enableLazyloadImage
104
+ enableLazyLoadImage
105
105
  })}
106
106
  ${setting?.galleryHoverEffect !== 'none' ? `<div class="${core.cls('zoom-element !gp-max-w-none', productFeaturedImage.getZoomImageClass())}">
107
107
  ${NextImage_liquid.default({
@@ -115,7 +115,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
115
115
  style: style,
116
116
  className: '!gp-rounded-none gp-w-full gp-h-full',
117
117
  customLazyload: false,
118
- enableLazyloadImage
118
+ enableLazyLoadImage
119
119
  })}
120
120
  </div>` : ''}
121
121
  ${setting?.galleryHoverEffect == 'zoom' && setting?.galleryZoomType == 'glasses' ? `
@@ -298,7 +298,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
298
298
  },
299
299
  className: '!gp-rounded-none',
300
300
  customLazyload: false,
301
- enableLazyloadImage
301
+ enableLazyLoadImage
302
302
  })}`;
303
303
  };
304
304
  return core.template`
package/dist/cjs/product/components/ProductImagesV2/liquid/ProductImages.liquid.js CHANGED
@@ -11,7 +11,7 @@ var helpers = require('../../../../helpers.js');
11
11
  var productGallery = require('../common/productGallery.js');
12
12
 
13
13
  const ProductImages = (productImageProps)=>{
14
- const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyloadImage } = productImageProps;
14
+ const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyLoadImage } = productImageProps;
15
15
  const settings = {
16
16
  ...setting,
17
17
  ...styles
@@ -116,7 +116,7 @@ const ProductImages = (productImageProps)=>{
116
116
  builderPropUID: `gp-carousel-${builderProps?.uid}`,
117
117
  ...settings,
118
118
  children: renderProductBadge(),
119
- enableLazyloadImage
119
+ enableLazyLoadImage
120
120
  })}
121
121
  ${common.shouldSkipLiquidRenderForSingleImage(settings?.position, core.template`
122
122
  <div
@@ -132,7 +132,7 @@ const ProductImages = (productImageProps)=>{
132
132
  ${ProductGalleryCarousel_liquid.default({
133
133
  builderPropUID: `gp-gallery-${builderProps?.uid}`,
134
134
  ...settings,
135
- enableLazyloadImage
135
+ enableLazyLoadImage
136
136
  })}
137
137
  </div>
138
138
  ${ProductGalleryGrid_liquid.default({
@@ -142,7 +142,7 @@ const ProductImages = (productImageProps)=>{
142
142
  },
143
143
  children: renderProductBadge(),
144
144
  ...settings,
145
- enableLazyloadImage
145
+ enableLazyLoadImage
146
146
  })}
147
147
  `)}
148
148
  </div>
package/dist/esm/banner/components/hero-banner/index.liquid.js CHANGED
@@ -10,7 +10,7 @@ import NextImage from '../../../image/components/NextImage.liquid.js';
10
10
  import { getImageSrc, DEVICES } from '../../../image/helpers/getSrcSet.js';
11
11
  import { createBlurDataURL } from '../../../image/components/helpers.js';
12
12
 
13
- const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyloadImage = true })=>{
13
+ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyLoadImage = true })=>{
14
14
  const { link, layout, verticalAlign, order, alignBanner, alt, title } = setting ?? {};
15
15
  const { background, overlayEnable, overlayColor, overlayOpacity, verticalGutter, contentWidth, hoverEffect, hoverEffectDuration, hoverEffectScale, cornerBg, borderBg, hasActiveShadow, shadowBg, sizeSetting, contentPadding } = styles ?? {};
16
16
  const enableParallax = setting?.enableParallax || false;
@@ -179,7 +179,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
179
179
  alt,
180
180
  title,
181
181
  imagePlaceholder,
182
- enableLazyloadImage
182
+ enableLazyLoadImage
183
183
  })}
184
184
  <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
185
185
  <div
@@ -204,9 +204,9 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
204
204
  liquid: true
205
205
  }),
206
206
  ...makeStyleResponsive('bgi', {
207
- desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
208
- tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
209
- mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
207
+ desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyLoadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
208
+ tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyLoadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
209
+ mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyLoadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
210
210
  }),
211
211
  '--duration': `${hoverEffectDuration ?? 0}s`,
212
212
  '--scale': hoverEffectScale ?? 1,
@@ -220,7 +220,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
220
220
  alt: `lazy image ${device}`,
221
221
  className: `gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg ${device === 'tablet' ? 'gp_lazybg_tl' : ''} ${device === 'mobile' ? 'gp_lazybg_mb' : ''}`,
222
222
  isDisableAspectStyle: true,
223
- enableLazyloadImage
223
+ enableLazyLoadImage
224
224
  }));
225
225
  }).join('') : ''}
226
226
  </div>
package/dist/esm/image/components/AdaptiveImage.liquid.js CHANGED
@@ -2,7 +2,7 @@ import { template, cls, RenderIf, makeStyleResponsive } from '@gem-sdk/core';
2
2
  import { getImageSrc } from '../helpers/getSrcSet.js';
3
3
  import { createBlurDataURL } from './helpers.js';
4
4
 
5
- const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, ...props })=>{
5
+ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyLoadImage = true, pageContext, ...props })=>{
6
6
  const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
7
7
  const srcDesktop = getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
8
8
  const srcTablet = (getImageSrc(srcSet?.tablet, 'tablet') ?? getImageSrc(srcSet?.desktop, 'tablet')) || fallBackImage;
@@ -27,16 +27,17 @@ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className,
27
27
  }}"
28
28
  />
29
29
  `, template`
30
- ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyloadImage ? imagePlaceholder?.['mobile'] ?? createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcMobile}" />` : ''}
31
- ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyloadImage ? imagePlaceholder?.['tablet'] ?? createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
30
+ ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['mobile'] ?? createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcMobile}" />` : ''}
31
+ ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['tablet'] ?? createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
32
32
  <img
33
33
  ${{
34
34
  ...props
35
35
  }}
36
36
  class="${cls(className, {
37
- gp_lazyload: enableLazyloadImage
37
+ gp_lazyload: enableLazyLoadImage,
38
+ gp_force_load: pageContext?.isOptimizePlan
38
39
  })}"
39
- src="${enableLazyloadImage ? imagePlaceholder?.['desktop'] ?? createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
40
+ src="${enableLazyLoadImage ? imagePlaceholder?.['desktop'] ?? createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
40
41
  data-src="${srcDesktop}"
41
42
  width="100%"
42
43
  alt="${alt}"
package/dist/esm/image/components/Image.liquid.js CHANGED
@@ -3,7 +3,7 @@ import AdaptiveImage from './AdaptiveImage.liquid.js';
3
3
  import NextImage from './NextImage.liquid.js';
4
4
  import { getInsertLinkData } from '../../helpers.js';
5
5
 
6
- const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyloadImage = true })=>{
6
+ const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyLoadImage = true, pageContext })=>{
7
7
  const { imageLink, isNotLazyload } = setting ?? {};
8
8
  const { shape } = styles ?? {};
9
9
  const { Wrap: WrapLink, urlData } = getInsertLinkData('div', imageLink);
@@ -30,7 +30,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
30
30
  }}
31
31
  data-id="${builderProps?.uid}"
32
32
  role="presentation"
33
- class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass)}"
33
+ class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass, `force-publish-${new Date().getTime()}`)}"
34
34
  style="${{
35
35
  ...style,
36
36
  ...makeStyleResponsive('ta', styles?.align)
@@ -73,7 +73,8 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
73
73
  aspectRatio: getAspectRatioGlobalSize(styles?.shape),
74
74
  layout: styles?.objectFit,
75
75
  priority: setting?.priority,
76
- enableLazyloadImage
76
+ enableLazyLoadImage,
77
+ pageContext
77
78
  }) : NextImage({
78
79
  ...setting?.image,
79
80
  priority: setting?.priority,
@@ -102,7 +103,8 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
102
103
  layout: styles?.objectFit
103
104
  },
104
105
  isNotLazyload,
105
- enableLazyloadImage
106
+ enableLazyLoadImage,
107
+ pageContext
106
108
  })}
107
109
  </${WrapLink}>
108
110
  </div>`;
package/dist/esm/image/components/NextImage.liquid.js CHANGED
@@ -3,7 +3,7 @@ import { getNewBackupFileKey, getImageSrc, getSrcSet } from '../helpers/getSrcSe
3
3
  import { DEVICES } from '../../product/components/ProductVariants/index.js';
4
4
  import { createBlurDataURL } from './helpers.js';
5
5
 
6
- const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyloadImage = true, srcset, sizes, ...props })=>{
6
+ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyLoadImage = true, pageContext, srcset, sizes, ...props })=>{
7
7
  const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
8
8
  const newBackupFilekey = backupFileKey ? getNewBackupFileKey(backupFileKey ?? '', src) : '';
9
9
  const srcImage = srcIsLiquidCode ? baseSrc : getImageSrc({
@@ -93,12 +93,13 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
93
93
  ${customAttrs}
94
94
  draggable="false"
95
95
  class="${cls(className, {
96
- gp_lazyload: !customLazyload && enableLazyloadImage
96
+ gp_lazyload: !isNotLazyload && enableLazyLoadImage,
97
+ gp_force_load: pageContext?.isOptimizePlan
97
98
  })}"
98
99
  ${{
99
100
  'data-src': srcImage,
100
101
  'data-srcset': srcSetImg,
101
- src: enableLazyloadImage ? imagePlaceholder : srcImage,
102
+ src: enableLazyLoadImage ? imagePlaceholder : srcImage,
102
103
  width,
103
104
  height,
104
105
  alt,
package/dist/esm/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js CHANGED
@@ -9,7 +9,7 @@ import NextImage from '../../../../image/components/NextImage.liquid.js';
9
9
  import Video from '../../../../image/components/Video.liquid.js';
10
10
  import { getStyleOfObject } from '../../../helpers/function.js';
11
11
 
12
- const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
12
+ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
13
13
  const ftAspectRatio = getAspectRatio(setting.ftShape);
14
14
  const getStyleFeaturedImageDisplay = ()=>{
15
15
  return getDisplayStyle((device)=>![
@@ -149,7 +149,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
149
149
  },
150
150
  priority: setting?.preload,
151
151
  className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${className}`,
152
- enableLazyloadImage
152
+ enableLazyLoadImage
153
153
  })}`;
154
154
  };
155
155
  const renderNoImage = ()=>{
@@ -167,7 +167,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
167
167
  },
168
168
  priority: setting?.preload,
169
169
  className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none`,
170
- enableLazyloadImage
170
+ enableLazyLoadImage
171
171
  })}`;
172
172
  };
173
173
  const getValueFromValueContainUnit = (value)=>{
@@ -394,7 +394,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
394
394
  },
395
395
  className: `gp-w-full featured-image-only !gp-rounded-none`,
396
396
  customLazyload: true,
397
- enableLazyloadImage
397
+ enableLazyLoadImage
398
398
  })}
399
399
  {%- endif -%}
400
400
  `
package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js CHANGED
@@ -6,7 +6,7 @@ import { convertSpacing, getDisplayStyle, getAspectRatio, getSrcImage } from '..
6
6
  import { getShapeByLayout, getSettingMinWidthForCarouselItem, getSettingWidthForCarouselItem, getMinHeightByPosition, getSliderPerShowConfig, getAllowDotConfig, getDotStyleConfig, getCarouselVerticalConfigByPosition, checkDisplayGalleryByWidth, getZoomDisplay } from '../common/productGallery.js';
7
7
  import { getStyleOfObject } from '../../../helpers/function.js';
8
8
 
9
- const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
9
+ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
10
10
  const getCarouselDisplay = ()=>{
11
11
  const isDisplayCarousel = (type, position, device)=>{
12
12
  const layout = getResponsiveValueByScreen(position, device);
@@ -86,7 +86,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage,
86
86
  customLazyload: true,
87
87
  style: style,
88
88
  className: '!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer',
89
- enableLazyloadImage
89
+ enableLazyLoadImage
90
90
  })}`;
91
91
  };
92
92
  const aspectRatioToPaddingBottom = ()=>{
package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryGrid.liquid.js CHANGED
@@ -8,7 +8,7 @@ import Model3d from '../../../../image/components/Modal3d.liquid.js';
8
8
  import Video from '../../../../image/components/Video.liquid.js';
9
9
  import HTML5Embed from '../../../../video/components/HTML5Embed.liquid.js';
10
10
 
11
- const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyloadImage, ...setting })=>{
11
+ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyLoadImage, ...setting })=>{
12
12
  const getGridDisplay = ()=>{
13
13
  const isDisplayGrid = (type, position, device)=>{
14
14
  const layout = getResponsiveValueByScreen(position, device);
@@ -97,7 +97,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
97
97
  style: style,
98
98
  className: '!gp-rounded-none',
99
99
  customLazyload: false,
100
- enableLazyloadImage
100
+ enableLazyLoadImage
101
101
  })}
102
102
  ${setting?.galleryHoverEffect !== 'none' ? `<div class="${cls('zoom-element !gp-max-w-none', getZoomImageClass())}">
103
103
  ${NextImage({
@@ -111,7 +111,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
111
111
  style: style,
112
112
  className: '!gp-rounded-none gp-w-full gp-h-full',
113
113
  customLazyload: false,
114
- enableLazyloadImage
114
+ enableLazyLoadImage
115
115
  })}
116
116
  </div>` : ''}
117
117
  ${setting?.galleryHoverEffect == 'zoom' && setting?.galleryZoomType == 'glasses' ? `
@@ -294,7 +294,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
294
294
  },
295
295
  className: '!gp-rounded-none',
296
296
  customLazyload: false,
297
- enableLazyloadImage
297
+ enableLazyLoadImage
298
298
  })}`;
299
299
  };
300
300
  return template`
package/dist/esm/product/components/ProductImagesV2/liquid/ProductImages.liquid.js CHANGED
@@ -7,7 +7,7 @@ import { getSettingPreloadData } from '../../../../helpers.js';
7
7
  import { getShapeByLayout, sizeSettingDefaultForNewLayout } from '../common/productGallery.js';
8
8
 
9
9
  const ProductImages = (productImageProps)=>{
10
- const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyloadImage } = productImageProps;
10
+ const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyLoadImage } = productImageProps;
11
11
  const settings = {
12
12
  ...setting,
13
13
  ...styles
@@ -112,7 +112,7 @@ const ProductImages = (productImageProps)=>{
112
112
  builderPropUID: `gp-carousel-${builderProps?.uid}`,
113
113
  ...settings,
114
114
  children: renderProductBadge(),
115
- enableLazyloadImage
115
+ enableLazyLoadImage
116
116
  })}
117
117
  ${shouldSkipLiquidRenderForSingleImage(settings?.position, template`
118
118
  <div
@@ -128,7 +128,7 @@ const ProductImages = (productImageProps)=>{
128
128
  ${ProductGalleryCarousel({
129
129
  builderPropUID: `gp-gallery-${builderProps?.uid}`,
130
130
  ...settings,
131
- enableLazyloadImage
131
+ enableLazyLoadImage
132
132
  })}
133
133
  </div>
134
134
  ${ProductGalleryGrid({
@@ -138,7 +138,7 @@ const ProductImages = (productImageProps)=>{
138
138
  },
139
139
  children: renderProductBadge(),
140
140
  ...settings,
141
- enableLazyloadImage
141
+ enableLazyLoadImage
142
142
  })}
143
143
  `)}
144
144
  </div>
package/dist/types/index.d.ts CHANGED
@@ -5727,7 +5727,7 @@ type PropTypes = ProductImagesProps$1 & React.ComponentPropsWithoutRef<'div'> &
5727
5727
  children?: any;
5728
5728
  } & {
5729
5729
  pageContext?: PageContext;
5730
- enableLazyloadImage?: boolean;
5730
+ enableLazyLoadImage?: boolean;
5731
5731
  };
5732
5732
  declare const ProductImages: (productImageProps: PropTypes) => string;
5733
5733
 
@@ -6179,7 +6179,7 @@ type CountdownLiquidProps = BaseProps<{
6179
6179
  };
6180
6180
  declare const Countdown: ({ builderProps, setting, styles, advanced, pageContext, }: CountdownLiquidProps) => string;
6181
6181
 
6182
- declare const Image: ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyloadImage, }: {
6182
+ declare const Image: ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyLoadImage, pageContext, }: {
6183
6183
  className?: string | undefined;
6184
6184
  children?: React.ReactNode;
6185
6185
  onClick?: React.MouseEventHandler<any> | undefined;
@@ -6239,7 +6239,8 @@ declare const Image: ({ styles, className, setting, builderAttrs, builderProps,
6239
6239
  } & {
6240
6240
  advanced?: any;
6241
6241
  } & {
6242
- enableLazyloadImage?: boolean | undefined;
6242
+ enableLazyLoadImage?: boolean | undefined;
6243
+ pageContext?: PageContext | undefined;
6243
6244
  }) => string;
6244
6245
 
6245
6246
  type VideoProps = {} & BasePropsWrap<{
@@ -6304,7 +6305,7 @@ declare const TabItem: ({ children, builderAttrs, style, className, parentUid }:
6304
6305
  parentUid?: string | undefined;
6305
6306
  }) => string;
6306
6307
 
6307
- declare const HeroBanner: ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyloadImage, }: _gem_sdk_core.BaseProps<{
6308
+ declare const HeroBanner: ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyLoadImage, }: _gem_sdk_core.BaseProps<{
6308
6309
  link?: {
6309
6310
  link?: string | undefined;
6310
6311
  target?: string | undefined;
@@ -6367,7 +6368,7 @@ declare const HeroBanner: ({ builderAttrs, builderProps, setting, styles, style,
6367
6368
  } & {
6368
6369
  rawChildren?: any[] | undefined;
6369
6370
  advanced?: any;
6370
- enableLazyloadImage?: boolean | undefined;
6371
+ enableLazyLoadImage?: boolean | undefined;
6371
6372
  }) => string;
6372
6373
 
6373
6374
  declare const CSSCode: ({ setting, style, advanced, builderAttrs, builderProps }: CSSCodeProps) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.1.13-staging.5",
3
+ "version": "2.1.13-staging.6",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
21
21
  "format": "prettier --write \"./src/**/*.{ts,tsx}\""
22
22
  },
23
23
  "devDependencies": {
24
- "@gem-sdk/core": "2.1.13-staging.5",
24
+ "@gem-sdk/core": "2.1.13-staging.6",
25
25
  "@gem-sdk/styles": "2.1.0",
26
26
  "@types/react-transition-group": "^4.4.5"
27
27
  },