@gem-sdk/core 1.33.1 → 1.33.4

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -13,9 +13,9 @@ require('../hooks/useCartUI.js');
 var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
 var Tooltip = require('./toolbar/Tooltip.js');
 var ThemeSectionStatus = require('./theme-section/ThemeSectionStatus.js');
-var Resize = require('./resize/Resize.js');
 require('../helpers/convert.js');
 
+// import Resize from './resize/Resize';
 const SECTION_LIMIT = 25;
 const notVisible = (el)=>{
     const overflow = getComputedStyle(el).overflow;
@@ -462,9 +462,6 @@ const ComponentToolbarPreview = ({ ...props })=>{
                         })
                     })
                 ]
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
-                ...props
             })
         ]
     });

package/dist/cjs/helpers/background.js

@@ -10,10 +10,12 @@ const getStyleBackgroundByDevice = (background, options)=>{
     }
     return {
         ...getStyleBgColor(background),
-        ...getStyleBgImage(background, options),
-        ...getStyleBgPosition(background),
-        ...getStyleBgSize(background),
-        ...getStyleBgRepeat(background),
+        ...!options?.ignoreBackgroundImage ? {
+            ...getStyleBgImage(background, options),
+            ...getStyleBgPosition(background),
+            ...getStyleBgSize(background),
+            ...getStyleBgRepeat(background)
+        } : {},
         ...!options?.ignoreBgAttachment ? getStyleBgAttachment(background) : {}
     };
 };

package/dist/cjs/helpers/carousel.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var getResonsiveValue = require('./get-resonsive-value.js');
+
+const getCarouselContainerHeight = (dotStyle, dotSize, dotGapToCarousel)=>{
+    const getVal = (dotStyle, dotSize, dotGapToCarousel)=>{
+        if (dotStyle === 'outside') {
+            return `calc(100% - ${dotSize ?? '0'}px - ${!dotGapToCarousel || dotGapToCarousel === 'Auto' ? '0' : dotGapToCarousel}px)`;
+        }
+        return '100%';
+    };
+    return {
+        desktop: getVal(getResonsiveValue.getResponsiveValueByScreen(dotStyle, 'desktop'), getResonsiveValue.getResponsiveValueByScreen(dotSize, 'desktop'), getResonsiveValue.getResponsiveValueByScreen(dotGapToCarousel, 'desktop')),
+        tablet: getVal(getResonsiveValue.getResponsiveValueByScreen(dotStyle, 'tablet'), getResonsiveValue.getResponsiveValueByScreen(dotSize, 'tablet'), getResonsiveValue.getResponsiveValueByScreen(dotGapToCarousel, 'tablet')),
+        mobile: getVal(getResonsiveValue.getResponsiveValueByScreen(dotStyle, 'mobile'), getResonsiveValue.getResponsiveValueByScreen(dotSize, 'mobile'), getResonsiveValue.getResponsiveValueByScreen(dotGapToCarousel, 'mobile'))
+    };
+};
+const makeContainerWidthOrHeight = (setting)=>{
+    const getStyleName = (vertical)=>{
+        return vertical ? 'w' : 'h';
+    };
+    const result = getCarouselContainerHeight(setting.dotStyle, setting.dotSize, setting.dotGapToCarousel);
+    return {
+        [`--${getStyleName(getResonsiveValue.getResponsiveValueByScreen(setting?.vertical, 'desktop'))}`]: result.desktop,
+        [`--${getStyleName(getResonsiveValue.getResponsiveValueByScreen(setting?.vertical, 'tablet'))}-tablet`]: result.tablet,
+        [`--${getStyleName(getResonsiveValue.getResponsiveValueByScreen(setting?.vertical, 'mobile'))}-mobile`]: result.mobile
+    };
+};
+const makeDotGapToCarouselStyle = (dotStyle, dotGapToCarousel, vertical)=>{
+    let result = {};
+    const devices = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    const getStyleName = (dotStyle, vertical)=>{
+        if (dotStyle === 'outside') {
+            return vertical ? 'ml' : 'mt';
+        }
+        return vertical ? 'right' : 'bottom';
+    };
+    devices.map((device)=>{
+        const gapToCarousel = getResonsiveValue.getResponsiveValueByScreen(dotGapToCarousel, device, 0);
+        result = {
+            ...result,
+            [device]: `${!gapToCarousel || gapToCarousel === 'Auto' ? '0' : gapToCarousel}px`
+        };
+    });
+    return {
+        [`--${getStyleName(dotStyle?.desktop, vertical?.desktop)}`]: result.desktop,
+        [`--${getStyleName(dotStyle?.tablet, vertical?.tablet)}-tablet`]: result.tablet,
+        [`--${getStyleName(dotStyle?.mobile, vertical?.mobile)}-mobile`]: result.mobile
+    };
+};
+
+exports.getCarouselContainerHeight = getCarouselContainerHeight;
+exports.makeContainerWidthOrHeight = makeContainerWidthOrHeight;
+exports.makeDotGapToCarouselStyle = makeDotGapToCarouselStyle;

package/dist/cjs/helpers/make-style.js

@@ -50,11 +50,18 @@ const makeStyleResponsiveState = (name, value)=>{
         [`--focus-${name}-mobile`]: value?.mobile?.focus
     };
 };
-const makeStyleResponsive = (name, value)=>{
+const makeStyleResponsive = (name, value, unit)=>{
     return {
-        [`--${name}`]: value?.desktop,
-        [`--${name}-tablet`]: value?.tablet,
-        [`--${name}-mobile`]: value?.mobile
+        [`--${name}`]: unit ? `${value?.desktop}${unit}` : value?.desktop,
+        [`--${name}-tablet`]: unit ? `${value?.tablet}${unit}` : value?.tablet,
+        [`--${name}-mobile`]: unit ? `${value?.mobile}${unit}` : value?.mobile
+    };
+};
+const makeStyleResponsiveByScreen = (name, value, unit)=>{
+    return {
+        [`--${name}`]: unit ? `${getResonsiveValue.getResponsiveValueByScreen(value, 'desktop')}${unit}` : getResonsiveValue.getResponsiveValueByScreen(value, 'desktop'),
+        [`--${name}-tablet`]: unit ? `${getResonsiveValue.getResponsiveValueByScreen(value, 'tablet')}${unit}` : getResonsiveValue.getResponsiveValueByScreen(value, 'tablet'),
+        [`--${name}-mobile`]: unit ? `${getResonsiveValue.getResponsiveValueByScreen(value, 'mobile')}${unit}` : getResonsiveValue.getResponsiveValueByScreen(value, 'mobile')
     };
 };
 const makeWidth = (widthValue, fullWidthValue)=>{
@@ -82,6 +89,13 @@ const makeGlobalSizeWidthResponsive = (globalSize)=>{
         '--w-mobile': globalSize?.mobile?.width
     };
 };
+const makeGlobalSizeHeightResponsive = (globalSize)=>{
+    return {
+        '--h': globalSize?.desktop?.height,
+        '--h-tablet': globalSize?.tablet?.height,
+        '--h-mobile': globalSize?.mobile?.height
+    };
+};
 const makeHeight = (heighValue, autoHeight)=>{
     const getVal = (deviceValue, heighValue, autoHeight)=>{
         const heightVal = heighValue?.[deviceValue];
@@ -135,12 +149,14 @@ const makeLineClamp = (lineClampValue, hasLineClampValue)=>{
 };
 
 exports.makeAspectRatio = makeAspectRatio;
+exports.makeGlobalSizeHeightResponsive = makeGlobalSizeHeightResponsive;
 exports.makeGlobalSizeWidthResponsive = makeGlobalSizeWidthResponsive;
 exports.makeHeight = makeHeight;
 exports.makeLineClamp = makeLineClamp;
 exports.makeStyle = makeStyle;
 exports.makeStyleKey = makeStyleKey;
 exports.makeStyleResponsive = makeStyleResponsive;
+exports.makeStyleResponsiveByScreen = makeStyleResponsiveByScreen;
 exports.makeStyleResponsiveState = makeStyleResponsiveState;
 exports.makeStyleState = makeStyleState;
 exports.makeWidth = makeWidth;

package/dist/cjs/index.js

@@ -25,6 +25,7 @@ var products_generated = require('./graphql/queries/products.generated.js');
 var storeProperty_generated = require('./graphql/queries/store-property.generated.js');
 var previewPage_generated = require('./graphql/queries/preview-page.generated.js');
 var borders = require('./helpers/borders.js');
+var carousel = require('./helpers/carousel.js');
 var cls = require('./helpers/cls.js');
 var flattenConnection = require('./helpers/flatten-connection.js');
 var getResonsiveValue = require('./helpers/get-resonsive-value.js');
@@ -145,6 +146,9 @@ exports.handleConvertBorderStyle = borders.handleConvertBorderStyle;
 exports.handleConvertBorderWidth = borders.handleConvertBorderWidth;
 exports.handleConvertClassColor = borders.handleConvertClassColor;
 exports.handleConvertClassColorDynamicBtn = borders.handleConvertClassColorDynamicBtn;
+exports.getCarouselContainerHeight = carousel.getCarouselContainerHeight;
+exports.makeContainerWidthOrHeight = carousel.makeContainerWidthOrHeight;
+exports.makeDotGapToCarouselStyle = carousel.makeDotGapToCarouselStyle;
 exports.cls = cls.cls;
 exports.flattenConnection = flattenConnection.flattenConnection;
 exports.getResponsiveStateValue = getResonsiveValue.getResponsiveStateValue;
@@ -159,12 +163,14 @@ exports.isEmptyChildren = isEmptyChildren.isEmptyChildren;
 exports.filterToolbarPreview = filterToolbarPreview.filterToolbarPreview;
 exports.animations = animations.animations;
 exports.makeAspectRatio = makeStyle.makeAspectRatio;
+exports.makeGlobalSizeHeightResponsive = makeStyle.makeGlobalSizeHeightResponsive;
 exports.makeGlobalSizeWidthResponsive = makeStyle.makeGlobalSizeWidthResponsive;
 exports.makeHeight = makeStyle.makeHeight;
 exports.makeLineClamp = makeStyle.makeLineClamp;
 exports.makeStyle = makeStyle.makeStyle;
 exports.makeStyleKey = makeStyle.makeStyleKey;
 exports.makeStyleResponsive = makeStyle.makeStyleResponsive;
+exports.makeStyleResponsiveByScreen = makeStyle.makeStyleResponsiveByScreen;
 exports.makeStyleResponsiveState = makeStyle.makeStyleResponsiveState;
 exports.makeStyleState = makeStyle.makeStyleState;
 exports.makeWidth = makeStyle.makeWidth;

package/dist/esm/components/ComponentToolbarPreview.js

@@ -11,9 +11,9 @@ import '../hooks/useCartUI.js';
 import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
 import Tooltip from './toolbar/Tooltip.js';
 import { ThemeSectionStatus } from './theme-section/ThemeSectionStatus.js';
-import Resize from './resize/Resize.js';
 import '../helpers/convert.js';
 
+// import Resize from './resize/Resize';
 const SECTION_LIMIT = 25;
 const notVisible = (el)=>{
     const overflow = getComputedStyle(el).overflow;
@@ -460,9 +460,6 @@ const ComponentToolbarPreview = ({ ...props })=>{
                         })
                     })
                 ]
-            }),
-            /*#__PURE__*/ jsx(Resize, {
-                ...props
             })
         ]
     });

package/dist/esm/helpers/background.js

@@ -8,10 +8,12 @@ const getStyleBackgroundByDevice = (background, options)=>{
     }
     return {
         ...getStyleBgColor(background),
-        ...getStyleBgImage(background, options),
-        ...getStyleBgPosition(background),
-        ...getStyleBgSize(background),
-        ...getStyleBgRepeat(background),
+        ...!options?.ignoreBackgroundImage ? {
+            ...getStyleBgImage(background, options),
+            ...getStyleBgPosition(background),
+            ...getStyleBgSize(background),
+            ...getStyleBgRepeat(background)
+        } : {},
         ...!options?.ignoreBgAttachment ? getStyleBgAttachment(background) : {}
     };
 };

package/dist/esm/helpers/carousel.js

@@ -0,0 +1,54 @@
+import { getResponsiveValueByScreen } from './get-resonsive-value.js';
+
+const getCarouselContainerHeight = (dotStyle, dotSize, dotGapToCarousel)=>{
+    const getVal = (dotStyle, dotSize, dotGapToCarousel)=>{
+        if (dotStyle === 'outside') {
+            return `calc(100% - ${dotSize ?? '0'}px - ${!dotGapToCarousel || dotGapToCarousel === 'Auto' ? '0' : dotGapToCarousel}px)`;
+        }
+        return '100%';
+    };
+    return {
+        desktop: getVal(getResponsiveValueByScreen(dotStyle, 'desktop'), getResponsiveValueByScreen(dotSize, 'desktop'), getResponsiveValueByScreen(dotGapToCarousel, 'desktop')),
+        tablet: getVal(getResponsiveValueByScreen(dotStyle, 'tablet'), getResponsiveValueByScreen(dotSize, 'tablet'), getResponsiveValueByScreen(dotGapToCarousel, 'tablet')),
+        mobile: getVal(getResponsiveValueByScreen(dotStyle, 'mobile'), getResponsiveValueByScreen(dotSize, 'mobile'), getResponsiveValueByScreen(dotGapToCarousel, 'mobile'))
+    };
+};
+const makeContainerWidthOrHeight = (setting)=>{
+    const getStyleName = (vertical)=>{
+        return vertical ? 'w' : 'h';
+    };
+    const result = getCarouselContainerHeight(setting.dotStyle, setting.dotSize, setting.dotGapToCarousel);
+    return {
+        [`--${getStyleName(getResponsiveValueByScreen(setting?.vertical, 'desktop'))}`]: result.desktop,
+        [`--${getStyleName(getResponsiveValueByScreen(setting?.vertical, 'tablet'))}-tablet`]: result.tablet,
+        [`--${getStyleName(getResponsiveValueByScreen(setting?.vertical, 'mobile'))}-mobile`]: result.mobile
+    };
+};
+const makeDotGapToCarouselStyle = (dotStyle, dotGapToCarousel, vertical)=>{
+    let result = {};
+    const devices = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    const getStyleName = (dotStyle, vertical)=>{
+        if (dotStyle === 'outside') {
+            return vertical ? 'ml' : 'mt';
+        }
+        return vertical ? 'right' : 'bottom';
+    };
+    devices.map((device)=>{
+        const gapToCarousel = getResponsiveValueByScreen(dotGapToCarousel, device, 0);
+        result = {
+            ...result,
+            [device]: `${!gapToCarousel || gapToCarousel === 'Auto' ? '0' : gapToCarousel}px`
+        };
+    });
+    return {
+        [`--${getStyleName(dotStyle?.desktop, vertical?.desktop)}`]: result.desktop,
+        [`--${getStyleName(dotStyle?.tablet, vertical?.tablet)}-tablet`]: result.tablet,
+        [`--${getStyleName(dotStyle?.mobile, vertical?.mobile)}-mobile`]: result.mobile
+    };
+};
+
+export { getCarouselContainerHeight, makeContainerWidthOrHeight, makeDotGapToCarouselStyle };

package/dist/esm/helpers/make-style.js

@@ -48,11 +48,18 @@ const makeStyleResponsiveState = (name, value)=>{
         [`--focus-${name}-mobile`]: value?.mobile?.focus
     };
 };
-const makeStyleResponsive = (name, value)=>{
+const makeStyleResponsive = (name, value, unit)=>{
     return {
-        [`--${name}`]: value?.desktop,
-        [`--${name}-tablet`]: value?.tablet,
-        [`--${name}-mobile`]: value?.mobile
+        [`--${name}`]: unit ? `${value?.desktop}${unit}` : value?.desktop,
+        [`--${name}-tablet`]: unit ? `${value?.tablet}${unit}` : value?.tablet,
+        [`--${name}-mobile`]: unit ? `${value?.mobile}${unit}` : value?.mobile
+    };
+};
+const makeStyleResponsiveByScreen = (name, value, unit)=>{
+    return {
+        [`--${name}`]: unit ? `${getResponsiveValueByScreen(value, 'desktop')}${unit}` : getResponsiveValueByScreen(value, 'desktop'),
+        [`--${name}-tablet`]: unit ? `${getResponsiveValueByScreen(value, 'tablet')}${unit}` : getResponsiveValueByScreen(value, 'tablet'),
+        [`--${name}-mobile`]: unit ? `${getResponsiveValueByScreen(value, 'mobile')}${unit}` : getResponsiveValueByScreen(value, 'mobile')
     };
 };
 const makeWidth = (widthValue, fullWidthValue)=>{
@@ -80,6 +87,13 @@ const makeGlobalSizeWidthResponsive = (globalSize)=>{
         '--w-mobile': globalSize?.mobile?.width
     };
 };
+const makeGlobalSizeHeightResponsive = (globalSize)=>{
+    return {
+        '--h': globalSize?.desktop?.height,
+        '--h-tablet': globalSize?.tablet?.height,
+        '--h-mobile': globalSize?.mobile?.height
+    };
+};
 const makeHeight = (heighValue, autoHeight)=>{
     const getVal = (deviceValue, heighValue, autoHeight)=>{
         const heightVal = heighValue?.[deviceValue];
@@ -132,4 +146,4 @@ const makeLineClamp = (lineClampValue, hasLineClampValue)=>{
     };
 };
 
-export { makeAspectRatio, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined };
+export { makeAspectRatio, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined };

package/dist/esm/index.js

@@ -23,6 +23,7 @@ export { ProductsDocument } from './graphql/queries/products.generated.js';
 export { StorePropertyDocument } from './graphql/queries/store-property.generated.js';
 export { PreviewPageDocument } from './graphql/queries/preview-page.generated.js';
 export { composeBorderCss, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn } from './helpers/borders.js';
+export { getCarouselContainerHeight, makeContainerWidthOrHeight, makeDotGapToCarouselStyle } from './helpers/carousel.js';
 export { cls } from './helpers/cls.js';
 export { flattenConnection } from './helpers/flatten-connection.js';
 export { getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, isColumnDirectionExist } from './helpers/get-resonsive-value.js';
@@ -33,7 +34,7 @@ export { default as isSafari } from './helpers/is-safari.js';
 export { isEmptyChildren } from './helpers/is-empty-children.js';
 export { filterToolbarPreview } from './helpers/filter-toolbar-preview.js';
 export { animations } from './helpers/animations.js';
-export { makeAspectRatio, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
+export { makeAspectRatio, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
 export { normalizeBuilderData } from './helpers/normalize-builder-data.js';
 export { prefetchQueries } from './helpers/prefetch-queries.js';
 export { composeSpacing, getSpacingVariable } from './helpers/spacing.js';