@gem-sdk/components 2.0.11 → 2.1.0

package/dist/cjs/accordion/components/AccordionItem.liquid.js

@@ -89,7 +89,7 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
       }
     .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-active, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-active
      {
-        color: ${iconColor?.active} !important
+        color: ${color?.active} !important
       }
   </style>
   <div class="gp-overflow-clip" style="${{

package/dist/cjs/carousel/components/CarouselItem.js

@@ -45,6 +45,11 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
         parentStyle,
         passProps.style
     ]);
+    const itemShadowStyle = core.getStyleShadow({
+        value: parentStyle?.carouselShadow,
+        styleAppliedFor: 'box-shadow',
+        isEnableShadow: parentStyle?.hasActiveShadow
+    });
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         ...builderAttrs,
         ...passProps,
@@ -68,7 +73,12 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
         },
         onClick: onClickItem,
         "aria-hidden": true,
-        children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : children
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            style: {
+                ...itemShadowStyle
+            },
+            children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : children
+        })
     });
 };
 

package/dist/cjs/carousel/components/CarouselItem.liquid.js

@@ -35,6 +35,11 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
             })
         };
     };
+    const itemShadowStyle = core.getStyleShadow({
+        value: parentStyle?.carouselShadow,
+        styleAppliedFor: 'box-shadow',
+        isEnableShadow: parentStyle?.hasActiveShadow
+    });
     return core.template`
     <div
       media-type="{{media.media_type}}"
@@ -79,7 +84,13 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
       class="${core.cls(`gem-slider-item gp-w-full gem-slider-item-${parentId || ''} gp-child-item-${parentUid}`, builderProps?.uid, className)}"
       data-index="${index}"
     >
+      <div
+        style="${{
+        ...itemShadowStyle
+    }}"
+      >
       ${children}
+      </div>
     </div>
   `;
 };

package/dist/cjs/image-comparison/components/CompareImage.js

@@ -7,6 +7,7 @@ var React = require('react');
 var commonStyles = require('../constants/commonStyles.js');
 var core = require('@gem-sdk/core');
 var helpers = require('../../image/components/helpers.js');
+var helpers$1 = require('./common/helpers.js');
 
 const CompareImage = (props)=>{
     const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid, styles = {}, builderData, preload } = props;
@@ -448,10 +449,7 @@ const CompareImage = (props)=>{
                     title: "",
                     width: tempImage?.width,
                     height: tempImage?.height,
-                    style: {
-                        position: 'static',
-                        opacity: 0
-                    }
+                    style: helpers$1.styleLazyPlaceholder(aspectRatio)
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx("img", {
                     onLoad: ()=>setRightImgLoaded(true),

package/dist/cjs/image-comparison/components/CompareImage.liquid.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@gem-sdk/core');
 var Label_liquid = require('./Label.liquid.js');
 var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
-var helpers$1 = require('../../image/components/helpers.js');
+var helpers$2 = require('../../image/components/helpers.js');
 var getSrcSet = require('../../image/helpers/getSrcSet.js');
-var helpers = require('../../helpers.js');
+var helpers$1 = require('../../helpers.js');
+var helpers = require('./common/helpers.js');
 
 const CompareImage = (props)=>{
     const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, pageContext, translate } = props;
@@ -19,19 +20,19 @@ const CompareImage = (props)=>{
     const rightSrcImage = getSrcSet.getImageSrc(rightImage);
     const leftSrcImage = getSrcSet.getImageSrc(leftImage);
     const aspectRatio = {
-        desktop: helpers$1.composeAspectRatio({
+        desktop: helpers$2.composeAspectRatio({
             device: 'desktop',
             aspect: styles?.aspectRatio,
             auto: baseRatioImage,
             custom: styles?.customAspectRadio
         }) ?? defaultRatio,
-        tablet: helpers$1.composeAspectRatio({
+        tablet: helpers$2.composeAspectRatio({
             device: 'tablet',
             aspect: styles?.aspectRatio,
             auto: baseRatioImage,
             custom: styles?.customAspectRadio
         }),
-        mobile: helpers$1.composeAspectRatio({
+        mobile: helpers$2.composeAspectRatio({
             device: 'mobile',
             aspect: styles?.aspectRatio,
             auto: baseRatioImage,
@@ -254,10 +255,7 @@ const CompareImage = (props)=>{
         title=""
         width="${tempImage?.width}"
         height="${tempImage?.height}"
-        style="${{
-        position: 'static',
-        opacity: 0
-    }}"
+        style="${helpers.styleLazyPlaceholder(aspectRatio)}"
       />
       ${NextImage_liquid.default({
         customAttrs: {
@@ -343,7 +341,7 @@ const CompareImage = (props)=>{
     }) : ''}
     </div></div>
   </gp-image-comparison>
-  ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-image-comparison.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-image-comparison.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  ${core.RenderIf(core.isLocalEnv, `<script ${helpers$1.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-image-comparison.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers$1.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-image-comparison.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `;
 };
 

package/dist/cjs/image-comparison/components/common/helpers.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+
+const styleLazyPlaceholder = (aspectRatio)=>{
+    return {
+        '--pos': 'static',
+        '--op': 0,
+        ...core.makeStyleResponsive('aspect', aspectRatio)
+    };
+};
+
+exports.styleLazyPlaceholder = styleLazyPlaceholder;

package/dist/cjs/product/components/DynamicCheckout.liquid.js

@@ -99,7 +99,7 @@ const DynamicCheckout = ({ builderProps, styles, advanced, setting, pageContext
     })}
           ${composeSpacing('desktop')}
           ${core.composeCornerCss(styles?.roundedBtn?.normal, true)}
-          ${composeSize(composeGlobalSize.width.desktop ?? 'auto', composeGlobalSize.height.desktop ?? 'auto', false)}
+          ${composeSize(undefined, composeGlobalSize.height.desktop ?? 'auto', false)}
         }
         .wrap__button--unbranded__${builderProps?.uid} .shopify-payment-button .shopify-payment-button__button--unbranded::before {
           content: "";

package/dist/cjs/product/setting/FileUpload.js

@@ -19,7 +19,7 @@ const config = {
             controls: [
                 {
                     id: 'textContent',
-                    type: 'input',
+                    type: 'textarea',
                     default: 'Click or drop your image to upload (Max 10MB)'
                 },
                 {
@@ -865,14 +865,29 @@ const config = {
             ]
         },
         {
-            type: 'control',
+            type: 'group',
             label: {
                 en: 'Text'
             },
-            setting: {
-                id: 'typo'
-            },
-            layout: 'vertical'
+            controls: [
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Content'
+                    },
+                    layout: 'horizontal',
+                    setting: {
+                        id: 'textContent'
+                    }
+                },
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'typo'
+                    },
+                    layout: 'vertical'
+                }
+            ]
         },
         {
             type: 'group',

package/dist/esm/accordion/components/AccordionItem.liquid.js

@@ -85,7 +85,7 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
       }
     .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-active, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-active
      {
-        color: ${iconColor?.active} !important
+        color: ${color?.active} !important
       }
   </style>
   <div class="gp-overflow-clip" style="${{

package/dist/esm/carousel/components/CarouselItem.js

@@ -41,6 +41,11 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
         parentStyle,
         passProps.style
     ]);
+    const itemShadowStyle = getStyleShadow({
+        value: parentStyle?.carouselShadow,
+        styleAppliedFor: 'box-shadow',
+        isEnableShadow: parentStyle?.hasActiveShadow
+    });
     return /*#__PURE__*/ jsx("div", {
         ...builderAttrs,
         ...passProps,
@@ -64,7 +69,12 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
         },
         onClick: onClickItem,
         "aria-hidden": true,
-        children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : children
+        children: /*#__PURE__*/ jsx("div", {
+            style: {
+                ...itemShadowStyle
+            },
+            children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : children
+        })
     });
 };
 

package/dist/esm/carousel/components/CarouselItem.liquid.js

@@ -1,4 +1,4 @@
-import { template, getStyleBackgroundByDevice, makeStyleResponsive, cls, makeStyle, getSingleColorVariable, getStyleShadow, getRadiusStyleActiveState } from '@gem-sdk/core';
+import { getStyleShadow, template, getStyleBackgroundByDevice, makeStyleResponsive, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState } from '@gem-sdk/core';
 import { getInitialWidthForCarouselItem, getCarouselSneakPeakTranslate } from './common/carousel.js';
 
 const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, builderProps, style, className, parentId, parentStyle, parentSettings, background, index, customStyle, parentUid, contentType = 'normalItem', ...passProps })=>{
@@ -31,6 +31,11 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
             })
         };
     };
+    const itemShadowStyle = getStyleShadow({
+        value: parentStyle?.carouselShadow,
+        styleAppliedFor: 'box-shadow',
+        isEnableShadow: parentStyle?.hasActiveShadow
+    });
     return template`
     <div
       media-type="{{media.media_type}}"
@@ -75,7 +80,13 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
       class="${cls(`gem-slider-item gp-w-full gem-slider-item-${parentId || ''} gp-child-item-${parentUid}`, builderProps?.uid, className)}"
       data-index="${index}"
     >
+      <div
+        style="${{
+        ...itemShadowStyle
+    }}"
+      >
       ${children}
+      </div>
     </div>
   `;
 };

package/dist/esm/image-comparison/components/CompareImage.js

@@ -3,6 +3,7 @@ import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import styles from '../constants/commonStyles.js';
 import { useEditorMode, usePageType, getResponsiveValueByScreen, composeBorderCss, composeCornerCss, composeTypographyClassName, composeTypographyStyle, cls, makeStyle, makeStyleResponsive, makeWidth, getCornerCSSFromGlobal } from '@gem-sdk/core';
 import { composeAspectRatio } from '../../image/components/helpers.js';
+import { styleLazyPlaceholder } from './common/helpers.js';
 
 const CompareImage = (props)=>{
     const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid, styles: styles$1 = {}, builderData, preload } = props;
@@ -444,10 +445,7 @@ const CompareImage = (props)=>{
                     title: "",
                     width: tempImage?.width,
                     height: tempImage?.height,
-                    style: {
-                        position: 'static',
-                        opacity: 0
-                    }
+                    style: styleLazyPlaceholder(aspectRatio)
                 }),
                 /*#__PURE__*/ jsx("img", {
                     onLoad: ()=>setRightImgLoaded(true),

package/dist/esm/image-comparison/components/CompareImage.liquid.js

@@ -4,6 +4,7 @@ import NextImage from '../../image/components/NextImage.liquid.js';
 import { composeAspectRatio } from '../../image/components/helpers.js';
 import { getImageSrc } from '../../image/helpers/getSrcSet.js';
 import { getSettingPreloadData } from '../../helpers.js';
+import { styleLazyPlaceholder } from './common/helpers.js';
 
 const CompareImage = (props)=>{
     const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, pageContext, translate } = props;
@@ -250,10 +251,7 @@ const CompareImage = (props)=>{
         title=""
         width="${tempImage?.width}"
         height="${tempImage?.height}"
-        style="${{
-        position: 'static',
-        opacity: 0
-    }}"
+        style="${styleLazyPlaceholder(aspectRatio)}"
       />
       ${NextImage({
         customAttrs: {

package/dist/esm/image-comparison/components/common/helpers.js

@@ -0,0 +1,11 @@
+import { makeStyleResponsive } from '@gem-sdk/core';
+
+const styleLazyPlaceholder = (aspectRatio)=>{
+    return {
+        '--pos': 'static',
+        '--op': 0,
+        ...makeStyleResponsive('aspect', aspectRatio)
+    };
+};
+
+export { styleLazyPlaceholder };

package/dist/esm/product/components/DynamicCheckout.liquid.js

@@ -95,7 +95,7 @@ const DynamicCheckout = ({ builderProps, styles, advanced, setting, pageContext
     })}
           ${composeSpacing('desktop')}
           ${composeCornerCss(styles?.roundedBtn?.normal, true)}
-          ${composeSize(composeGlobalSize.width.desktop ?? 'auto', composeGlobalSize.height.desktop ?? 'auto', false)}
+          ${composeSize(undefined, composeGlobalSize.height.desktop ?? 'auto', false)}
         }
         .wrap__button--unbranded__${builderProps?.uid} .shopify-payment-button .shopify-payment-button__button--unbranded::before {
           content: "";

package/dist/esm/product/setting/FileUpload.js

@@ -15,7 +15,7 @@ const config = {
             controls: [
                 {
                     id: 'textContent',
-                    type: 'input',
+                    type: 'textarea',
                     default: 'Click or drop your image to upload (Max 10MB)'
                 },
                 {
@@ -861,14 +861,29 @@ const config = {
             ]
         },
         {
-            type: 'control',
+            type: 'group',
             label: {
                 en: 'Text'
             },
-            setting: {
-                id: 'typo'
-            },
-            layout: 'vertical'
+            controls: [
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Content'
+                    },
+                    layout: 'horizontal',
+                    setting: {
+                        id: 'textContent'
+                    }
+                },
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'typo'
+                    },
+                    layout: 'vertical'
+                }
+            ]
         },
         {
             type: 'group',

package/package.json

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