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

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 (10) 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/image/components/AdaptiveImage.liquid.js +2 -2
  4. package/dist/cjs/sticky/components/Sticky.liquid.js +10 -6
  5. package/dist/esm/banner/components/hero-banner/index.liquid.js +3 -2
  6. package/dist/esm/banner/helpers/common.js +2 -1
  7. package/dist/esm/image/components/AdaptiveImage.liquid.js +2 -2
  8. package/dist/esm/sticky/components/Sticky.liquid.js +10 -6
  9. package/dist/types/index.d.ts +1 -0
  10. 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/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/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.58",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",