@gem-sdk/components 2.2.0-staging.57 → 2.2.0-staging.61

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 +2 -1
  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 +10 -6
  6. package/dist/esm/banner/components/hero-banner/index.liquid.js +3 -2
  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 +10 -6
  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
@@ -181,7 +181,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
181
181
  alt,
182
182
  title,
183
183
  imagePlaceholder,
184
- pageContext
184
+ pageContext,
185
+ fallBackImg: common.fallBackImg
185
186
  })}
186
187
  <div class="${core.cls('gp-absolute gp-w-full gp-h-full')}">
187
188
  <div
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, pageContext, ...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, pageContext, 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
@@ -65,17 +65,21 @@ const Sticky = ({ children, builderAttrs, setting, style, builderProps, advanced
65
65
  class="${builderProps?.uid} ${helpers.getSettingPreloadData('gps-lazy')} ${advanced?.cssClass} ${isScrollToTop ? '!gp-pointer-events-none [&_gp-button_a]:!gp-pointer-events-auto' : ''}"
66
66
  style="${{
67
67
  margin: '0 auto',
68
- ...style,
69
- ...core.makeStyleResponsive('w', w),
70
- ...core.getStyleBackgroundByDevice(background),
71
68
  ...displayStyle(),
72
- ...getCSSAlign(),
73
69
  'z-index': _const.ELEMENT_Z_INDEX.STICKY
74
70
  }}"
75
71
  >
76
- <div ${{
72
+ <div
73
+ ${{
77
74
  ...builderAttrs
78
- }}>
75
+ }}
76
+ style="${{
77
+ ...style,
78
+ ...getCSSAlign(),
79
+ ...core.makeStyleResponsive('w', w),
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';
@@ -177,7 +177,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
177
177
  alt,
178
178
  title,
179
179
  imagePlaceholder,
180
- pageContext
180
+ pageContext,
181
+ fallBackImg
181
182
  })}
182
183
  <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
183
184
  <div
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, pageContext, ...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, pageContext, 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
@@ -61,17 +61,21 @@ const Sticky = ({ children, builderAttrs, setting, style, builderProps, advanced
61
61
  class="${builderProps?.uid} ${getSettingPreloadData('gps-lazy')} ${advanced?.cssClass} ${isScrollToTop ? '!gp-pointer-events-none [&_gp-button_a]:!gp-pointer-events-auto' : ''}"
62
62
  style="${{
63
63
  margin: '0 auto',
64
- ...style,
65
- ...makeStyleResponsive('w', w),
66
- ...getStyleBackgroundByDevice(background),
67
64
  ...displayStyle(),
68
- ...getCSSAlign(),
69
65
  'z-index': ELEMENT_Z_INDEX.STICKY
70
66
  }}"
71
67
  >
72
- <div ${{
68
+ <div
69
+ ${{
73
70
  ...builderAttrs
74
- }}>
71
+ }}
72
+ style="${{
73
+ ...style,
74
+ ...getCSSAlign(),
75
+ ...makeStyleResponsive('w', w),
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.2.0-staging.57",
3
+ "version": "2.2.0-staging.61",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",