@gem-sdk/components 3.0.0-pre-production.2 → 3.0.0-pre-production.6

package/dist/cjs/banner/components/hero-banner/index.js

@@ -171,9 +171,17 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             top: isScale ? '0px' : 'unset'
         };
     };
-    const getBgImageByDeviceOnly = (device)=>{
+    const getBgImageByScreen = (device)=>{
         if (!background) return '';
-        return core.getBgImageByDevice(background, device, {
+        const backgroundByDevice = core.getResponsiveValueByScreen(background, device);
+        const gradientColor = backgroundByDevice?.color ? `, ${backgroundByDevice.color}` : '';
+        if (backgroundByDevice?.color?.includes(core.GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
+            return `${index.getBgImageByDevice(background, device) || ''}${gradientColor}`;
+        }
+        if (backgroundByDevice?.color?.includes(core.GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
+            return `${backgroundByDevice.color}`;
+        }
+        return index.getBgImageByDevice(background, device, {
             ignoreBgAttachment: true
         });
     };
@@ -264,7 +272,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                             ...background ? {
                                 ...core.getStyleBgColor(background)
                             } : {},
-                            ...core.getGradientBgrStyleByDevice(background, bgiEnableByDevice),
                             ...core.getStyleShadow({
                                 value: shadowBg,
                                 styleAppliedFor: 'box-shadow',
@@ -288,16 +295,16 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                                     }),
                                     style: {
                                         ...styleHeroBanner(),
+                                        ...core.makeStyleResponsive('bgi', {
+                                            desktop: getBgImageByScreen('desktop'),
+                                            tablet: getBgImageByScreen('tablet'),
+                                            mobile: getBgImageByScreen('mobile')
+                                        }),
                                         ...core.getStyleBackgroundByDevice(background, {
                                             ignoreBgAttachment: true,
                                             ignoreBackgroundImage: true,
                                             ignoreBackgroundColor: backgroundResponsive[currentDevice]?.type === 'video'
                                         }),
-                                        ...core.makeStyleResponsive('bgi', {
-                                            desktop: bgiEnableByDevice['desktop'] ? getBgImageByDeviceOnly('desktop') : 'url()',
-                                            tablet: bgiEnableByDevice['tablet'] ? getBgImageByDeviceOnly('tablet') : 'url()',
-                                            mobile: bgiEnableByDevice['mobile'] ? getBgImageByDeviceOnly('mobile') : 'url()'
-                                        }),
                                         position: attachment === 'fixed' ? 'fixed' : 'absolute',
                                         '--duration': `${hoverEffectDuration ?? 0}s`,
                                         '--scale': hoverEffectScale ?? 1,

package/dist/cjs/banner/components/hero-banner/index.liquid.js

@@ -138,6 +138,20 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         mobile: helpers$1.createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
     };
     const enableLazyLoad = !setting?.preload && pageContext?.enableLazyLoadImage;
+    const getBgImageByScreen = (device)=>{
+        if (!background) return '';
+        const backgroundByDevice = core.getResponsiveValueByScreen(background, device);
+        const imageUrl = enableLazyLoad ? `url(${imagePlaceholder[device]})` : `url(${getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, device), device)})`;
+        const gradientColor = backgroundByDevice?.color ? `, ${backgroundByDevice?.color}` : '';
+        if (backgroundByDevice?.color?.includes(core.GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
+            return `${imageUrl}${gradientColor}`;
+        }
+        if (backgroundByDevice?.color?.includes(core.GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
+            return `${backgroundByDevice?.color}`;
+        }
+        if (bgiEnableByDevice[device]) return imageUrl;
+        return 'url()';
+    };
     const renderInnerHeroBanner = ()=>{
         return core.template /* liquid */ `
       <div
@@ -162,7 +176,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             ...background ? {
                 ...core.getStyleBgColor(background)
             } : {},
-            ...core.getGradientBgrStyleByDevice(background, bgiEnableByDevice),
             ...core.getStyleShadow({
                 value: shadowBg,
                 styleAppliedFor: 'box-shadow',
@@ -208,16 +221,16 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             gp_lazybg: enableLazyLoad
         })}"
               style="${{
+            ...core.makeStyleResponsive('bgi', {
+                desktop: getBgImageByScreen('desktop'),
+                tablet: getBgImageByScreen('tablet'),
+                mobile: getBgImageByScreen('mobile')
+            }),
             ...core.getStyleBackgroundByDevice(background, {
                 ignoreBgAttachment: true,
                 ignoreBackgroundImage: true,
                 liquid: true
             }),
-            ...core.makeStyleResponsive('bgi', {
-                desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
-                tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
-                mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
-            }),
             '--duration': `${hoverEffectDuration ?? 0}s`,
             '--scale': hoverEffectScale ?? 1,
             ...core.makeStyleResponsive('pos', getAttachmentDevice()),

package/dist/cjs/banner/components/hero-banner/utils/index.js

@@ -106,7 +106,36 @@ const getClipPath = (borderWidth, borderRadius)=>{
     const bl = calcRounderClipPath(parseInt(bblr ?? '0'), bbw, blw);
     return `inset(0 0 0 round ${tl}px ${tr}px ${br}px ${bl}px)`;
 };
+const getBgImageByDevice = (background, device, options)=>{
+    const backgroundByDevice = core.getResponsiveValueByScreen(background, device);
+    const isBgVideo = backgroundByDevice?.type === 'video';
+    if (isBgVideo) return;
+    if (backgroundByDevice?.type === 'color') return 'url()'; // To prevent overriding background image from upper device
+    const backupFileKey = backgroundByDevice?.image?.backupFileKey;
+    const storage = backgroundByDevice?.image?.storage;
+    let imageByDevice = backgroundByDevice?.image?.src;
+    let newBackupFilekey = backupFileKey;
+    const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
+    /\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];
+    if (backupFileKey && shopifyHandleName && shopifyHandleName != backupFileKey) {
+        newBackupFilekey = shopifyHandleName;
+    }
+    if (storage === 'FILE_CONTENT') {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey.replace('.jpeg', '.jpg')}" | file_url }}`;
+        }
+    }
+    if (storage === 'THEME' || !storage) {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
+        }
+    }
+    if (typeof imageByDevice === 'string') {
+        return `url(${imageByDevice})`;
+    }
+};
 
+exports.getBgImageByDevice = getBgImageByDevice;
 exports.getClipPath = getClipPath;
 exports.getPercentageVisible = getPercentageVisible;
 exports.getStyleHeroBannerBg = getStyleHeroBannerBg;

package/dist/esm/banner/components/hero-banner/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useEditorMode, useCurrentDevice, makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, getResponsiveValueByScreen, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getGradientBgrStyleByDevice, getStyleShadow, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, filterToolbarPreview, getAspectRatioGlobalSize, getBgImageByDevice } from '@gem-sdk/core';
+import { useEditorMode, useCurrentDevice, makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, getResponsiveValueByScreen, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getStyleShadow, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, filterToolbarPreview, getAspectRatioGlobalSize, GRADIENT_BGR_KEY } from '@gem-sdk/core';
 import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
 import Row from '../../../grid/components/Row.js';
 import Link from '../../../link/components/Link.js';
@@ -12,7 +12,7 @@ import HTML5Embed from '../../../video/components/HTML5Embed.js';
 import useIntersectionObserver from './hooks/useIntersectionObserver.js';
 import AnimationManager from './parallax/AnimationManager.js';
 import { useTranslateValue } from './hooks/useTranslateValue.js';
-import { getClipPath, isScaleImage } from './utils/index.js';
+import { getClipPath, getBgImageByDevice, isScaleImage } from './utils/index.js';
 import useAspectRatioSettings from './hooks/useAspectRatioSettings.js';
 import { createBlurDataURL } from '../../../image/components/helpers.js';
 
@@ -167,8 +167,16 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             top: isScale ? '0px' : 'unset'
         };
     };
-    const getBgImageByDeviceOnly = (device)=>{
+    const getBgImageByScreen = (device)=>{
         if (!background) return '';
+        const backgroundByDevice = getResponsiveValueByScreen(background, device);
+        const gradientColor = backgroundByDevice?.color ? `, ${backgroundByDevice.color}` : '';
+        if (backgroundByDevice?.color?.includes(GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
+            return `${getBgImageByDevice(background, device) || ''}${gradientColor}`;
+        }
+        if (backgroundByDevice?.color?.includes(GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
+            return `${backgroundByDevice.color}`;
+        }
         return getBgImageByDevice(background, device, {
             ignoreBgAttachment: true
         });
@@ -260,7 +268,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                             ...background ? {
                                 ...getStyleBgColor(background)
                             } : {},
-                            ...getGradientBgrStyleByDevice(background, bgiEnableByDevice),
                             ...getStyleShadow({
                                 value: shadowBg,
                                 styleAppliedFor: 'box-shadow',
@@ -284,16 +291,16 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                                     }),
                                     style: {
                                         ...styleHeroBanner(),
+                                        ...makeStyleResponsive('bgi', {
+                                            desktop: getBgImageByScreen('desktop'),
+                                            tablet: getBgImageByScreen('tablet'),
+                                            mobile: getBgImageByScreen('mobile')
+                                        }),
                                         ...getStyleBackgroundByDevice(background, {
                                             ignoreBgAttachment: true,
                                             ignoreBackgroundImage: true,
                                             ignoreBackgroundColor: backgroundResponsive[currentDevice]?.type === 'video'
                                         }),
-                                        ...makeStyleResponsive('bgi', {
-                                            desktop: bgiEnableByDevice['desktop'] ? getBgImageByDeviceOnly('desktop') : 'url()',
-                                            tablet: bgiEnableByDevice['tablet'] ? getBgImageByDeviceOnly('tablet') : 'url()',
-                                            mobile: bgiEnableByDevice['mobile'] ? getBgImageByDeviceOnly('mobile') : 'url()'
-                                        }),
                                         position: attachment === 'fixed' ? 'fixed' : 'absolute',
                                         '--duration': `${hoverEffectDuration ?? 0}s`,
                                         '--scale': hoverEffectScale ?? 1,

package/dist/esm/banner/components/hero-banner/index.liquid.js

@@ -1,4 +1,4 @@
-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';
+import { makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, removeUndefinedValuesFromObject, template, cls, dataStringify, RenderIf, isLocalEnv, baseAssetURL, getResponsiveValueByScreen, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getStyleShadow, getAspectRatioGlobalSize, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, GRADIENT_BGR_KEY } from '@gem-sdk/core';
 import Row from '../../../grid/components/Row.liquid.js';
 import AdaptiveImage from '../../../image/components/AdaptiveImage.liquid.js';
 import { getVisibilityStyle, getMarginStyle, getStyleAspectRatioHeroBannerCustom, removeMarginStyle, getContentPosition, mapContentPositionToHorizontal, getClassJustify, getResponsiveSetting, getClassContentPosition, getDisplayStyleByFitContent, fallBackImg, getClassForContentByFitContent, getClassForStretchContent, getClassSpaceBetween, getWidth, getBgImage } from '../../helpers/common.js';
@@ -7,7 +7,7 @@ import HTML5Embed from '../../../video/components/HTML5Embed.liquid.js';
 import { getClipPath, getStyleHeroBannerBg } from './utils/index.js';
 import useAspectRatioSettings from './hooks/useAspectRatioSettings.js';
 import NextImage from '../../../image/components/NextImage.liquid.js';
-import { getImageSrc, DEVICES } from '../../../image/helpers/getSrcSet.js';
+import { DEVICES, getImageSrc } from '../../../image/helpers/getSrcSet.js';
 import { createBlurDataURL } from '../../../image/components/helpers.js';
 
 const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, pageContext })=>{
@@ -134,6 +134,20 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         mobile: createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
     };
     const enableLazyLoad = !setting?.preload && pageContext?.enableLazyLoadImage;
+    const getBgImageByScreen = (device)=>{
+        if (!background) return '';
+        const backgroundByDevice = getResponsiveValueByScreen(background, device);
+        const imageUrl = enableLazyLoad ? `url(${imagePlaceholder[device]})` : `url(${getImageSrc(getResponsiveValueByScreen(srcSet, device), device)})`;
+        const gradientColor = backgroundByDevice?.color ? `, ${backgroundByDevice?.color}` : '';
+        if (backgroundByDevice?.color?.includes(GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
+            return `${imageUrl}${gradientColor}`;
+        }
+        if (backgroundByDevice?.color?.includes(GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
+            return `${backgroundByDevice?.color}`;
+        }
+        if (bgiEnableByDevice[device]) return imageUrl;
+        return 'url()';
+    };
     const renderInnerHeroBanner = ()=>{
         return template /* liquid */ `
       <div
@@ -158,7 +172,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             ...background ? {
                 ...getStyleBgColor(background)
             } : {},
-            ...getGradientBgrStyleByDevice(background, bgiEnableByDevice),
             ...getStyleShadow({
                 value: shadowBg,
                 styleAppliedFor: 'box-shadow',
@@ -204,16 +217,16 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             gp_lazybg: enableLazyLoad
         })}"
               style="${{
+            ...makeStyleResponsive('bgi', {
+                desktop: getBgImageByScreen('desktop'),
+                tablet: getBgImageByScreen('tablet'),
+                mobile: getBgImageByScreen('mobile')
+            }),
             ...getStyleBackgroundByDevice(background, {
                 ignoreBgAttachment: true,
                 ignoreBackgroundImage: true,
                 liquid: true
             }),
-            ...makeStyleResponsive('bgi', {
-                desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
-                tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
-                mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
-            }),
             '--duration': `${hoverEffectDuration ?? 0}s`,
             '--scale': hoverEffectScale ?? 1,
             ...makeStyleResponsive('pos', getAttachmentDevice()),

package/dist/esm/banner/components/hero-banner/utils/index.js

@@ -1,4 +1,4 @@
-import { makeStyleResponsive } from '@gem-sdk/core';
+import { getResponsiveValueByScreen, makeStyleResponsive } from '@gem-sdk/core';
 
 const getPercentageVisible = (boundingClientRect, windowHeight)=>{
     const { top, height } = boundingClientRect;
@@ -104,5 +104,33 @@ const getClipPath = (borderWidth, borderRadius)=>{
     const bl = calcRounderClipPath(parseInt(bblr ?? '0'), bbw, blw);
     return `inset(0 0 0 round ${tl}px ${tr}px ${br}px ${bl}px)`;
 };
+const getBgImageByDevice = (background, device, options)=>{
+    const backgroundByDevice = getResponsiveValueByScreen(background, device);
+    const isBgVideo = backgroundByDevice?.type === 'video';
+    if (isBgVideo) return;
+    if (backgroundByDevice?.type === 'color') return 'url()'; // To prevent overriding background image from upper device
+    const backupFileKey = backgroundByDevice?.image?.backupFileKey;
+    const storage = backgroundByDevice?.image?.storage;
+    let imageByDevice = backgroundByDevice?.image?.src;
+    let newBackupFilekey = backupFileKey;
+    const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
+    /\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];
+    if (backupFileKey && shopifyHandleName && shopifyHandleName != backupFileKey) {
+        newBackupFilekey = shopifyHandleName;
+    }
+    if (storage === 'FILE_CONTENT') {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey.replace('.jpeg', '.jpg')}" | file_url }}`;
+        }
+    }
+    if (storage === 'THEME' || !storage) {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
+        }
+    }
+    if (typeof imageByDevice === 'string') {
+        return `url(${imageByDevice})`;
+    }
+};
 
-export { getClipPath, getPercentageVisible, getStyleHeroBannerBg, isScaleImage };
+export { getBgImageByDevice, getClipPath, getPercentageVisible, getStyleHeroBannerBg, isScaleImage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "3.0.0-pre-production.2",
+  "version": "3.0.0-pre-production.6",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
     "format": "prettier --write \"./src/**/*.{ts,tsx}\""
   },
   "devDependencies": {
-    "@gem-sdk/core": "3.0.0-pre-production.1",
+    "@gem-sdk/core": "3.0.0-pre-production.6",
     "@gem-sdk/styles": "3.0.0-pre-production.1",
     "@types/react-transition-group": "^4.4.5"
   },