@gem-sdk/components 2.1.1 → 2.1.4

package/dist/cjs/article/components/ArticleDate.js

@@ -18,11 +18,11 @@ const ArticleDate = ({ setting, builderProps, styles })=>{
         }));
     };
     const formattedDate = React.useMemo(()=>{
-        const date = convertTZ(new Date(article.platformUpdatedAt), timezone ?? '');
+        const date = convertTZ(new Date(article.publishedAt), timezone ?? '');
         const { locales, options } = JSON.parse(dateFormat ?? '{"locales":"en-US","options":{"month":"short","day":"2-digit","year":"numeric"}}');
         return date.toLocaleDateString(locales, options);
     }, [
-        article.platformUpdatedAt,
+        article.publishedAt,
         timezone,
         dateFormat
     ]);

package/dist/cjs/article/components/ArticleDate.liquid.js

@@ -20,7 +20,7 @@ const ArticleDate = ({ setting, styles, advanced, builderProps })=>{
         styles: styles,
         setting: {
             ...setting,
-            text: `{{ article.updated_at | date: '${FORMAT_MAP[dateFormat ?? '{"locales":"en-US","options":{"month":"short","day":"2-digit","year":"numeric"}}']}' }}`,
+            text: `{{ article.published_at | date: '${FORMAT_MAP[dateFormat ?? '{"locales":"en-US","options":{"month":"short","day":"2-digit","year":"numeric"}}']}' }}`,
             excludeFlex: true
         },
         advanced: advanced,

package/dist/cjs/article/components/ArticleList.js

@@ -22,7 +22,7 @@ const ArticleList = ({ styles, setting, className, children, builderProps })=>{
         },
         orderBy: {
             direction: 'DESC',
-            field: 'PLATFORM_UPDATED_AT'
+            field: 'PUBLISHED_AT'
         }
     };
     const blogsQuery = {

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

@@ -9,6 +9,7 @@ var React = require('react');
 var carousel = require('./common/carousel.js');
 
 const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, builderProps, parentStyle, parentSettings, background, contentType = 'normalItem', onClickItem, ...passProps })=>{
+    const itemPadding = core.makeGlobalSize(parentStyle?.itemPadding);
     const styleByContentType = React.useMemo(()=>{
         const delList = [
             '--radius'
@@ -27,11 +28,6 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
                 bw: parentStyle?.borderContent?.width,
                 bc: core.getSingleColorVariable(parentStyle?.borderContent?.color)
             }),
-            ...core.getStyleShadow({
-                value: parentStyle?.carouselShadow,
-                styleAppliedFor: 'box-shadow',
-                isEnableShadow: parentStyle?.hasActiveShadow
-            }),
             ...core.getRadiusStyleActiveState({
                 ...parentStyle?.roundedContent,
                 active: {
@@ -69,7 +65,8 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
                 ignoreBackgroundImage: true,
                 ignoreBackgroundImageProperties: true,
                 ignoreBgAttachment: true
-            })
+            }),
+            ...itemPadding && itemPadding.padding
         },
         onClick: onClickItem,
         "aria-hidden": true,

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

@@ -6,6 +6,7 @@ var core = require('@gem-sdk/core');
 var carousel = require('./common/carousel.js');
 
 const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, builderProps, style, className, parentId, parentStyle, parentSettings, background, index, customStyle, parentUid, contentType = 'normalItem', ...passProps })=>{
+    const itemPadding = core.makeGlobalSize(parentStyle?.itemPadding);
     const styleByContentType = ()=>{
         const delList = [
             '--radius'
@@ -21,11 +22,6 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
                 bw: parentStyle?.borderContent?.width,
                 bc: core.getSingleColorVariable(parentStyle?.borderContent?.color)
             }),
-            ...core.getStyleShadow({
-                value: parentStyle?.carouselShadow,
-                styleAppliedFor: 'box-shadow',
-                isEnableShadow: parentStyle?.hasActiveShadow
-            }),
             ...core.getRadiusStyleActiveState({
                 ...parentStyle?.roundedContent,
                 active: {
@@ -79,7 +75,8 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
             sneakPeakType: parentSettings?.sneakPeakType,
             sneakPeakOffsetCenter: parentSettings?.sneakPeakOffsetCenter,
             sneakPeakOffsetForward: parentSettings?.sneakPeakOffsetForward
-        }))
+        })),
+        ...itemPadding && itemPadding.padding
     }}"
       class="${core.cls(`gem-slider-item gp-w-full gem-slider-item-${parentId || ''} gp-child-item-${parentUid}`, builderProps?.uid, className)}"
       data-index="${index}"

package/dist/cjs/carousel/setting/Carousel.js

@@ -732,6 +732,30 @@ const config = {
                             default: 16
                         }
                     }
+                },
+                {
+                    id: 'itemPadding',
+                    type: 'size-setting',
+                    devices: {
+                        desktop: {
+                            default: {
+                                padding: {
+                                    type: 'custom',
+                                    top: '0px',
+                                    left: '0px',
+                                    bottom: '0px',
+                                    right: '0px'
+                                }
+                            }
+                        }
+                    },
+                    hiddenSettings: [
+                        'shape',
+                        'gap',
+                        'width',
+                        'height'
+                    ],
+                    hiddenShowMore: true
                 }
             ]
         }
@@ -1078,6 +1102,16 @@ const config = {
                         id: 'sizeSetting'
                     },
                     layout: 'vertical'
+                },
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'itemPadding'
+                    },
+                    isMoreSetting: true,
+                    options: {
+                        noGap: true
+                    }
                 }
             ]
         },

package/dist/cjs/stock-counter/components/StockCounter.liquid.js

@@ -120,7 +120,7 @@ const StockCounter = ({ setting, styles, style, advanced, builderProps })=>{
               class="${appendTypoClass} gp-stock-counter-mark"
               style="${appendTypoStyle}"
             >
-              {% if inventory_management == null or inventory_management != "shopify" and inventory_quantity <= 0 %}
+              {% if inventory_management == null and inventory_quantity <= 0 %}
                 ${helpers.transformHighlighTag(unlimitedQuantityMessage ?? helpers$1.getStaticLocale('StockCounter', 'let_buy_now'), mainColor)}
               {% elsif available == false %}
                 ${helpers.transformHighlighTag(outOfStockMessage || '', mainColor)}

package/dist/cjs/third-party/components/BoldSubscriptions.liquid.js

@@ -19,7 +19,7 @@ const BoldSubscriptions = ({ setting, advanced })=>{
       {% else %}
         {% assign app_blocks = section.blocks | where: "type", "@app" %}
         {% for block in app_blocks %}
-          {% if block.type == '@app' and block.id == '${appBlockId}' %}
+          {% if block.type == '@app' and block.id contains '${appBlockId}' %}
             {% render block %}
           {% endif %}
         {% endfor %}

package/dist/cjs/third-party/helpers/thirdParty.js

@@ -43,7 +43,7 @@ const getLiquidForAppBlock = (appBlockId, align, cssClass)=>{
     }}"
     >
       {% for block in app_blocks %}
-        {% if block.type == '@app' and block.id == '${appBlockId}' %}
+        {% if block.type == '@app' and block.id contains '${appBlockId}' %}
           {% render block %}
         {% endif %}
       {% endfor %}

package/dist/esm/article/components/ArticleDate.js

@@ -14,11 +14,11 @@ const ArticleDate = ({ setting, builderProps, styles })=>{
         }));
     };
     const formattedDate = useMemo(()=>{
-        const date = convertTZ(new Date(article.platformUpdatedAt), timezone ?? '');
+        const date = convertTZ(new Date(article.publishedAt), timezone ?? '');
         const { locales, options } = JSON.parse(dateFormat ?? '{"locales":"en-US","options":{"month":"short","day":"2-digit","year":"numeric"}}');
         return date.toLocaleDateString(locales, options);
     }, [
-        article.platformUpdatedAt,
+        article.publishedAt,
         timezone,
         dateFormat
     ]);

package/dist/esm/article/components/ArticleDate.liquid.js

@@ -16,7 +16,7 @@ const ArticleDate = ({ setting, styles, advanced, builderProps })=>{
         styles: styles,
         setting: {
             ...setting,
-            text: `{{ article.updated_at | date: '${FORMAT_MAP[dateFormat ?? '{"locales":"en-US","options":{"month":"short","day":"2-digit","year":"numeric"}}']}' }}`,
+            text: `{{ article.published_at | date: '${FORMAT_MAP[dateFormat ?? '{"locales":"en-US","options":{"month":"short","day":"2-digit","year":"numeric"}}']}' }}`,
             excludeFlex: true
         },
         advanced: advanced,

package/dist/esm/article/components/ArticleList.js

@@ -18,7 +18,7 @@ const ArticleList = ({ styles, setting, className, children, builderProps })=>{
         },
         orderBy: {
             direction: 'DESC',
-            field: 'PLATFORM_UPDATED_AT'
+            field: 'PUBLISHED_AT'
         }
     };
     const blogsQuery = {

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

@@ -1,10 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { makeStyle, getSingleColorVariable, getStyleShadow, getRadiusStyleActiveState, cls, getStyleBackgroundByDevice, isEmptyChildren } from '@gem-sdk/core';
+import { makeGlobalSize, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleShadow, cls, getStyleBackgroundByDevice, isEmptyChildren } from '@gem-sdk/core';
 import ChildrenDroppable from '../../grid/components/ChildrenDroppable.js';
 import { useMemo } from 'react';
 import { getInitialWidthForCarouselItem } from './common/carousel.js';
 
 const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, builderProps, parentStyle, parentSettings, background, contentType = 'normalItem', onClickItem, ...passProps })=>{
+    const itemPadding = makeGlobalSize(parentStyle?.itemPadding);
     const styleByContentType = useMemo(()=>{
         const delList = [
             '--radius'
@@ -23,11 +24,6 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
                 bw: parentStyle?.borderContent?.width,
                 bc: getSingleColorVariable(parentStyle?.borderContent?.color)
             }),
-            ...getStyleShadow({
-                value: parentStyle?.carouselShadow,
-                styleAppliedFor: 'box-shadow',
-                isEnableShadow: parentStyle?.hasActiveShadow
-            }),
             ...getRadiusStyleActiveState({
                 ...parentStyle?.roundedContent,
                 active: {
@@ -65,7 +61,8 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
                 ignoreBackgroundImage: true,
                 ignoreBackgroundImageProperties: true,
                 ignoreBgAttachment: true
-            })
+            }),
+            ...itemPadding && itemPadding.padding
         },
         onClick: onClickItem,
         "aria-hidden": true,

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

@@ -1,7 +1,8 @@
-import { getStyleShadow, template, getStyleBackgroundByDevice, makeStyleResponsive, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState } from '@gem-sdk/core';
+import { makeGlobalSize, 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 })=>{
+    const itemPadding = makeGlobalSize(parentStyle?.itemPadding);
     const styleByContentType = ()=>{
         const delList = [
             '--radius'
@@ -17,11 +18,6 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
                 bw: parentStyle?.borderContent?.width,
                 bc: getSingleColorVariable(parentStyle?.borderContent?.color)
             }),
-            ...getStyleShadow({
-                value: parentStyle?.carouselShadow,
-                styleAppliedFor: 'box-shadow',
-                isEnableShadow: parentStyle?.hasActiveShadow
-            }),
             ...getRadiusStyleActiveState({
                 ...parentStyle?.roundedContent,
                 active: {
@@ -75,7 +71,8 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
             sneakPeakType: parentSettings?.sneakPeakType,
             sneakPeakOffsetCenter: parentSettings?.sneakPeakOffsetCenter,
             sneakPeakOffsetForward: parentSettings?.sneakPeakOffsetForward
-        }))
+        })),
+        ...itemPadding && itemPadding.padding
     }}"
       class="${cls(`gem-slider-item gp-w-full gem-slider-item-${parentId || ''} gp-child-item-${parentUid}`, builderProps?.uid, className)}"
       data-index="${index}"

package/dist/esm/carousel/setting/Carousel.js

@@ -728,6 +728,30 @@ const config = {
                             default: 16
                         }
                     }
+                },
+                {
+                    id: 'itemPadding',
+                    type: 'size-setting',
+                    devices: {
+                        desktop: {
+                            default: {
+                                padding: {
+                                    type: 'custom',
+                                    top: '0px',
+                                    left: '0px',
+                                    bottom: '0px',
+                                    right: '0px'
+                                }
+                            }
+                        }
+                    },
+                    hiddenSettings: [
+                        'shape',
+                        'gap',
+                        'width',
+                        'height'
+                    ],
+                    hiddenShowMore: true
                 }
             ]
         }
@@ -1074,6 +1098,16 @@ const config = {
                         id: 'sizeSetting'
                     },
                     layout: 'vertical'
+                },
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'itemPadding'
+                    },
+                    isMoreSetting: true,
+                    options: {
+                        noGap: true
+                    }
                 }
             ]
         },

package/dist/esm/stock-counter/components/StockCounter.liquid.js

@@ -116,7 +116,7 @@ const StockCounter = ({ setting, styles, style, advanced, builderProps })=>{
               class="${appendTypoClass} gp-stock-counter-mark"
               style="${appendTypoStyle}"
             >
-              {% if inventory_management == null or inventory_management != "shopify" and inventory_quantity <= 0 %}
+              {% if inventory_management == null and inventory_quantity <= 0 %}
                 ${transformHighlighTag(unlimitedQuantityMessage ?? getStaticLocale('StockCounter', 'let_buy_now'), mainColor)}
               {% elsif available == false %}
                 ${transformHighlighTag(outOfStockMessage || '', mainColor)}

package/dist/esm/third-party/components/BoldSubscriptions.liquid.js

@@ -15,7 +15,7 @@ const BoldSubscriptions = ({ setting, advanced })=>{
       {% else %}
         {% assign app_blocks = section.blocks | where: "type", "@app" %}
         {% for block in app_blocks %}
-          {% if block.type == '@app' and block.id == '${appBlockId}' %}
+          {% if block.type == '@app' and block.id contains '${appBlockId}' %}
             {% render block %}
           {% endif %}
         {% endfor %}

package/dist/esm/third-party/helpers/thirdParty.js

@@ -41,7 +41,7 @@ const getLiquidForAppBlock = (appBlockId, align, cssClass)=>{
     }}"
     >
       {% for block in app_blocks %}
-        {% if block.type == '@app' and block.id == '${appBlockId}' %}
+        {% if block.type == '@app' and block.id contains '${appBlockId}' %}
           {% render block %}
         {% endif %}
       {% endfor %}

package/dist/types/index.d.ts

@@ -288,6 +288,7 @@ type CarouselStyles = {
     align?: ObjectDevices<AlignProp | Property.AlignItems>;
     sizeSetting?: ObjectDevices<SizeSettingGlobal>;
     playSpeed?: number;
+    itemPadding?: ObjectDevices<SizeSettingGlobal>;
 };
 type CarouselProps = BasePropsWrap<CarouselSettings, CarouselStyles> & {
     children?: React.ReactNode;

package/package.json

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