@gem-sdk/components 2.4.15 → 2.5.0

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 (12) hide show
  1. package/dist/cjs/banner/components/hero-banner/index.liquid.js +4 -3
  2. package/dist/cjs/banner/helpers/common.js +2 -0
  3. package/dist/cjs/banner/setting/HeroBanner.js +2 -1
  4. package/dist/cjs/image/components/AdaptiveImage.liquid.js +2 -2
  5. package/dist/cjs/sticky/components/Sticky.liquid.js +9 -5
  6. package/dist/esm/banner/components/hero-banner/index.liquid.js +5 -4
  7. package/dist/esm/banner/helpers/common.js +2 -1
  8. package/dist/esm/banner/setting/HeroBanner.js +2 -1
  9. package/dist/esm/image/components/AdaptiveImage.liquid.js +2 -2
  10. package/dist/esm/sticky/components/Sticky.liquid.js +9 -5
  11. package/dist/types/index.d.ts +1 -0
  12. package/package.json +1 -1
package/dist/cjs/banner/components/hero-banner/index.liquid.js CHANGED
@@ -184,7 +184,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
184
184
  alt,
185
185
  title,
186
186
  imagePlaceholder,
187
- enableLazyloadImage
187
+ enableLazyloadImage,
188
+ fallBackImg: common.fallBackImg
188
189
  })}
189
190
  <div class="${core.cls('gp-absolute gp-w-full gp-h-full')}">
190
191
  <div
@@ -197,7 +198,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
197
198
  style="${{
198
199
  'clip-path': index.getClipPath(borderBg?.width, cornerBg)
199
200
  }}"
200
- >
201
+ >
201
202
  <div class="${core.cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
202
203
  'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
203
204
  'gp-transition-transform': hoverEffect,
@@ -241,7 +242,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
241
242
  '--top': 0,
242
243
  '--left': 0,
243
244
  ...core.makeStyleState('op', overlayOpacity)
244
- }}">
245
+ }}">
245
246
  </div>`)}
246
247
  </div>
247
248
  ${Row_liquid.default({
package/dist/cjs/banner/helpers/common.js CHANGED
@@ -319,7 +319,9 @@ const mapContentPositionToHorizontal = (contentPosition)=>{
319
319
  }
320
320
  return result;
321
321
  };
322
+ const fallBackImg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+';
322
323
 
324
+ exports.fallBackImg = fallBackImg;
323
325
  exports.filterStyleByKeys = filterStyleByKeys;
324
326
  exports.getBgImage = getBgImage;
325
327
  exports.getClassAlignBanner = getClassAlignBanner;
package/dist/cjs/banner/setting/HeroBanner.js CHANGED
@@ -220,7 +220,8 @@ const config = {
220
220
  min: 0,
221
221
  max: 1,
222
222
  step: 0.1,
223
- default: 0.6
223
+ default: 0.6,
224
+ ignoreMax: true
224
225
  },
225
226
  {
226
227
  id: 'alignBanner',
package/dist/cjs/image/components/AdaptiveImage.liquid.js CHANGED
@@ -6,8 +6,8 @@ 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 })=>{
10
- const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
9
+ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, fallBackImg, ...props })=>{
10
+ const fallBackImage = fallBackImg || '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;
13
13
  const srcMobile = (getSrcSet.getImageSrc(srcSet?.mobile, 'mobile') ?? getSrcSet.getImageSrc(srcSet?.tablet, 'mobile') ?? getSrcSet.getImageSrc(srcSet?.desktop, 'mobile')) || fallBackImage;
package/dist/cjs/sticky/components/Sticky.liquid.js CHANGED
@@ -66,16 +66,20 @@ const Sticky = ({ children, builderAttrs, setting, style, builderProps, advanced
66
66
  style="${{
67
67
  margin: '0 auto',
68
68
  ...style,
69
- ...core.makeStyleResponsive('w', w),
70
- ...core.getStyleBackgroundByDevice(background),
71
- ...displayStyle(),
72
69
  ...getCSSAlign(),
70
+ ...displayStyle(),
71
+ ...core.makeStyleResponsive('w', w),
73
72
  'z-index': _const.ELEMENT_Z_INDEX.STICKY
74
73
  }}"
75
74
  >
76
- <div ${{
75
+ <div
76
+ ${{
77
77
  ...builderAttrs
78
- }}>
78
+ }}
79
+ style="${{
80
+ ...core.getStyleBackgroundByDevice(background)
81
+ }}"
82
+ >
79
83
  ${children}
80
84
  </div>
81
85
  </gp-sticky>
package/dist/esm/banner/components/hero-banner/index.liquid.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, removeUndefinedValuesFromObject, template, cls, dataStringify, RenderIf, isLocalEnv, baseAssetURL, getResponsiveValueByScreen, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getGradientBgrStyleByDevice, getStyleShadow, getAspectRatioGlobalSize, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState } from '@gem-sdk/core';
2
2
  import Row from '../../../grid/components/Row.liquid.js';
3
3
  import AdaptiveImage from '../../../image/components/AdaptiveImage.liquid.js';
4
- import { getVisibilityStyle, getMarginStyle, getStyleAspectRatioHeroBannerCustom, removeMarginStyle, getContentPosition, mapContentPositionToHorizontal, getClassJustify, getResponsiveSetting, getClassContentPosition, getDisplayStyleByFitContent, getClassForContentByFitContent, getClassForStretchContent, getClassSpaceBetween, getWidth, getBgImage } from '../../helpers/common.js';
4
+ import { getVisibilityStyle, getMarginStyle, getStyleAspectRatioHeroBannerCustom, removeMarginStyle, getContentPosition, mapContentPositionToHorizontal, getClassJustify, getResponsiveSetting, getClassContentPosition, getDisplayStyleByFitContent, fallBackImg, getClassForContentByFitContent, getClassForStretchContent, getClassSpaceBetween, getWidth, getBgImage } from '../../helpers/common.js';
5
5
  import { getInsertLinkData, getSettingPreloadData } from '../../../helpers.js';
6
6
  import HTML5Embed from '../../../video/components/HTML5Embed.liquid.js';
7
7
  import { getClipPath, getStyleHeroBannerBg } from './utils/index.js';
@@ -180,7 +180,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
180
180
  alt,
181
181
  title,
182
182
  imagePlaceholder,
183
- enableLazyloadImage
183
+ enableLazyloadImage,
184
+ fallBackImg
184
185
  })}
185
186
  <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
186
187
  <div
@@ -193,7 +194,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
193
194
  style="${{
194
195
  'clip-path': getClipPath(borderBg?.width, cornerBg)
195
196
  }}"
196
- >
197
+ >
197
198
  <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
198
199
  'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
199
200
  'gp-transition-transform': hoverEffect,
@@ -237,7 +238,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
237
238
  '--top': 0,
238
239
  '--left': 0,
239
240
  ...makeStyleState('op', overlayOpacity)
240
- }}">
241
+ }}">
241
242
  </div>`)}
242
243
  </div>
243
244
  ${Row({
package/dist/esm/banner/helpers/common.js CHANGED
@@ -317,5 +317,6 @@ const mapContentPositionToHorizontal = (contentPosition)=>{
317
317
  }
318
318
  return result;
319
319
  };
320
+ const fallBackImg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+';
320
321
 
321
- export { filterStyleByKeys, getBgImage, getClassAlignBanner, getClassContentPosition, getClassForContentByFitContent, getClassForStretchContent, getClassJustify, getClassSpaceBetween, getContentPosition, getDataVideoHeroBannerResponsive, getDisplayStyleByFitContent, getMarginStyle, getResponsiveSetting, getStyleAspectRatioHeroBannerCustom, getVisibilityStyle, getWidth, mapContentPositionToHorizontal, removeMarginStyle };
322
+ export { fallBackImg, filterStyleByKeys, getBgImage, getClassAlignBanner, getClassContentPosition, getClassForContentByFitContent, getClassForStretchContent, getClassJustify, getClassSpaceBetween, getContentPosition, getDataVideoHeroBannerResponsive, getDisplayStyleByFitContent, getMarginStyle, getResponsiveSetting, getStyleAspectRatioHeroBannerCustom, getVisibilityStyle, getWidth, mapContentPositionToHorizontal, removeMarginStyle };
package/dist/esm/banner/setting/HeroBanner.js CHANGED
@@ -216,7 +216,8 @@ const config = {
216
216
  min: 0,
217
217
  max: 1,
218
218
  step: 0.1,
219
- default: 0.6
219
+ default: 0.6,
220
+ ignoreMax: true
220
221
  },
221
222
  {
222
223
  id: 'alignBanner',
package/dist/esm/image/components/AdaptiveImage.liquid.js CHANGED
@@ -2,8 +2,8 @@ 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 })=>{
6
- const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
5
+ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, fallBackImg, ...props })=>{
6
+ const fallBackImage = fallBackImg || '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;
9
9
  const srcMobile = (getImageSrc(srcSet?.mobile, 'mobile') ?? getImageSrc(srcSet?.tablet, 'mobile') ?? getImageSrc(srcSet?.desktop, 'mobile')) || fallBackImage;
package/dist/esm/sticky/components/Sticky.liquid.js CHANGED
@@ -62,16 +62,20 @@ const Sticky = ({ children, builderAttrs, setting, style, builderProps, advanced
62
62
  style="${{
63
63
  margin: '0 auto',
64
64
  ...style,
65
- ...makeStyleResponsive('w', w),
66
- ...getStyleBackgroundByDevice(background),
67
- ...displayStyle(),
68
65
  ...getCSSAlign(),
66
+ ...displayStyle(),
67
+ ...makeStyleResponsive('w', w),
69
68
  'z-index': ELEMENT_Z_INDEX.STICKY
70
69
  }}"
71
70
  >
72
- <div ${{
71
+ <div
72
+ ${{
73
73
  ...builderAttrs
74
- }}>
74
+ }}
75
+ style="${{
76
+ ...getStyleBackgroundByDevice(background)
77
+ }}"
78
+ >
75
79
  ${children}
76
80
  </div>
77
81
  </gp-sticky>
package/dist/types/index.d.ts CHANGED
@@ -418,6 +418,7 @@ type AdaptiveImageProps = {
418
418
  width?: number | string;
419
419
  height?: number | string;
420
420
  pictureClass?: string;
421
+ fallBackImg?: string;
421
422
  imagePlaceholder?: ObjectDevices<string>;
422
423
  } & Omit<ImgProps, 'image'>;
423
424
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.4.15",
3
+ "version": "2.5.0",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",