@gem-sdk/core 1.23.0-moon.60 → 1.23.0-staging.100

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -161,10 +161,14 @@ const ComponentToolbarPreview = ({ ...props })=>{
         return false;
     };
     const toolbarName = ()=>{
-        const name = props.customLabel || props.label;
-        if (name?.toLowerCase() === 'item list' || name?.toLowerCase() === 'icon list') {
+        const tag = props.tag;
+        if (tag === 'IconListV2') {
+            return 'Item list';
+        }
+        if (tag === 'IconList') {
             return 'Advanced list';
         }
+        const name = props.customLabel || props.label;
         return name;
     };
     const onZoomOut = (e)=>{

package/dist/cjs/components/ComponentWrapper.js

@@ -20,6 +20,7 @@ const ComponentWrapper = ({ children, ...props })=>{
                     advanced: advanced
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                    className: advanced?.cssClass,
                     ...children.props,
                     style,
                     advanced
@@ -35,7 +36,7 @@ const ComponentWrapper = ({ children, ...props })=>{
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 style: style,
-                className: `${props.uid}`,
+                className: `${props.uid} ${advanced?.cssClass}`,
                 children: children
             })
         ]

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -106,12 +106,16 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                 advanced: advanced
             }),
             /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                style: !props.editorConfigs?.component?.excludeApplyStyle ? style : {},
+                style: !constant.excludeApplyStyle.includes(props.tag) ? style : {
+                    '--mb': style?.['--mb'],
+                    '--mb-tablet': style?.['--mb-tablet'],
+                    '--mb-mobile': style?.['--mb-mobile']
+                },
                 className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
                 children: [
-                    !props.editorConfigs?.component?.validate && children,
-                    /*#__PURE__*/ react.isValidElement(children) && props.editorConfigs?.component?.validate && /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                    !constant.excludeApplyStyle.includes(props.tag) && children,
+                    /*#__PURE__*/ react.isValidElement(children) && constant.excludeApplyStyle.includes(props.tag) && /*#__PURE__*/ jsxRuntime.jsx(children.type, {
                         ...children.props,
                         style,
                         advanced

package/dist/cjs/components/constant.js

@@ -44,6 +44,11 @@ const customRenderChildren = [
     'IconList',
     'Tabs'
 ];
+const excludeApplyStyle = [
+    'IconListV2',
+    'Accordion'
+];
 
 exports.customRenderChildren = customRenderChildren;
 exports.disableWrap = disableWrap;
+exports.excludeApplyStyle = excludeApplyStyle;

package/dist/cjs/components/resize/Resize.js

@@ -3,19 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var Column = require('./Column.js');
 var Spacing = require('./Spacing.js');
 
 function Resize(props) {
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(Spacing.default, {
-                ...props
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(Column.default, {
-                ...props
-            })
-        ]
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(Spacing.default, {
+            ...props
+        })
     });
 }
 

package/dist/cjs/helpers/icon-list.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var constant = require('../web-components/src/helpers/styles/constant.js');
+
+const TEXT_TOTAL_SPACING = 3; //Padding 2, margin 1
+const composePostionIconList = (lineHeight, position, iconWidth)=>{
+    const compose = {};
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'desktop',
+        position,
+        iconWidth
+    });
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'tablet',
+        position,
+        iconWidth
+    });
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'mobile',
+        position,
+        iconWidth
+    });
+    return compose;
+};
+const composePositionLineHeight = ({ compose, lineHeight, device, position, iconWidth })=>{
+    const positionDevice = position?.[device];
+    const iconWidthDevice = iconWidth?.[device];
+    if (positionDevice) {
+        const suffix = constant.devicesMapping[device] ?? '';
+        if (positionDevice === 'center') {
+            compose.wrapper = {
+                ...compose.wrapper,
+                [`--ai${suffix}`]: 'center'
+            };
+            compose.content = {
+                ...compose.content,
+                [`--pos${suffix}`]: 'static'
+            };
+        } else if (iconWidthDevice) {
+            const computedTop = parseFloat(lineHeight.replaceAll(/[a-zA-Z]/g, '')) / 2 + TEXT_TOTAL_SPACING - iconWidthDevice / 2;
+            compose.wrapper = {
+                ...compose.wrapper,
+                [`--ai${suffix}`]: 'flex-start'
+            };
+            compose.content = {
+                ...compose.content,
+                [`--top${suffix}`]: `${Math.max(0, Math.ceil(computedTop))}px`,
+                [`--pos${suffix}`]: 'relative'
+            };
+        }
+    }
+};
+
+exports.composePositionLineHeight = composePositionLineHeight;
+exports.composePostionIconList = composePostionIconList;

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

@@ -59,7 +59,7 @@ const makeStyleResponsive = (name, value)=>{
 };
 const makeWidth = (widthValue, fullWidthValue)=>{
     const getVal = (deviceValue, widthValue, fullWidthValue)=>{
-        const widthVal = widthValue?.[deviceValue] === undefined ? widthValue?.['desktop'] : widthValue?.[deviceValue];
+        const widthVal = getResonsiveValue.getResponsiveValueByScreen(widthValue, deviceValue);
         const fullWidthVal = fullWidthValue?.[deviceValue] === undefined ? fullWidthValue?.['desktop'] : fullWidthValue?.[deviceValue];
         if (fullWidthVal) {
             return '100%';

package/dist/cjs/helpers/size.js

@@ -2,6 +2,7 @@
 
 var makeStyle = require('./make-style.js');
 var constant = require('./constant.js');
+var getResonsiveValue = require('./get-resonsive-value.js');
 
 function getCustomSizeCSSByDevice(size, device) {
     if (!size || !device) return {};
@@ -38,7 +39,15 @@ const makeGlobalSize = (globalSize)=>{
             mobile: '--g-ct-w'
         }),
         height: makeStyle.makeStyleResponsive('h', getWidthHeightGlobalSize('height', globalSize)),
-        padding: getPaddingGlobalSize(globalSize)
+        padding: getPaddingGlobalSize(globalSize),
+        gap: getGlobalSizeGap(globalSize)
+    };
+};
+const getGlobalSizeGap = (globalSize)=>{
+    return {
+        '--gg': globalSize?.desktop?.gap,
+        '--gg-tablet': globalSize?.tablet?.gap,
+        '--gg-mobile': globalSize?.mobile?.gap
     };
 };
 const makeStyleWithDefault = (name, value, defaultVal)=>{
@@ -50,21 +59,102 @@ const makeStyleWithDefault = (name, value, defaultVal)=>{
 };
 const getWidthHeightGlobalSize = (type, globalSize)=>{
     if (!globalSize) return {};
-    const data = {
-        desktop: globalSize?.desktop?.[type],
-        tablet: globalSize?.tablet?.[type],
-        mobile: globalSize?.mobile?.[type]
-    };
-    if (data.desktop === undefined) {
-        data.desktop = 'auto';
-    }
-    if (data.tablet === undefined) {
-        data.tablet = data.desktop;
-    }
-    if (data.mobile === undefined) {
-        data.mobile = data.tablet;
-    }
-    return data;
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        result = {
+            ...result,
+            [device]: getResonsiveValue.getResponsiveValueByScreen(globalSize, device)?.[type]
+        };
+    });
+    return result;
+};
+const getHeightByShapeGlobalSize = (shapeByLayout)=>{
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        const shapeByDevice = getResonsiveValue.getResponsiveValueByScreen(shapeByLayout, device);
+        const shapeValue = shapeByDevice?.shapeValue;
+        const height = shapeByDevice?.height;
+        result = {
+            ...result,
+            [device]: shapeValue ? 'auto' : height || 'auto'
+        };
+    });
+    return result;
+};
+const getWidthByShapeGlobalSize = (shapeByLayout)=>{
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        const shapeByDevice = getResonsiveValue.getResponsiveValueByScreen(shapeByLayout, device);
+        const width = shapeByDevice?.width;
+        if (width) {
+            result = {
+                ...result,
+                [device]: width
+            };
+        }
+    });
+    return result;
+};
+const getAspectRatioGlobalSize = (shape)=>{
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        const shapeValue = getResonsiveValue.getResponsiveValueByScreen(shape, device)?.shapeValue;
+        if (shapeValue) {
+            result = {
+                ...result,
+                [device]: shapeValue
+            };
+        } else {
+            const shapeConfig = getResonsiveValue.getResponsiveValueByScreen(shape, device)?.shape;
+            switch(shapeConfig){
+                case 'square':
+                    result = {
+                        ...result,
+                        [device]: '1/1'
+                    };
+                    break;
+                case 'vertical':
+                    result = {
+                        ...result,
+                        [device]: '3/4'
+                    };
+                    break;
+                case 'horizontal':
+                    result = {
+                        ...result,
+                        [device]: '4/3'
+                    };
+                    break;
+                case 'original':
+                    result = {
+                        ...result,
+                        [device]: 'auto'
+                    };
+                    break;
+            }
+        }
+    });
+    return result;
 };
 function getCustomPaddingSizeCSSByDevice(globalSize, device) {
     if (!globalSize || !device) return {};
@@ -83,7 +173,11 @@ const getPaddingGlobalSize = (globalSize)=>{
 exports.composeSize = composeSize;
 exports.composeSizeCss = composeSizeCss;
 exports.genSizeClass = genSizeClass;
+exports.getAspectRatioGlobalSize = getAspectRatioGlobalSize;
+exports.getGlobalSizeGap = getGlobalSizeGap;
+exports.getHeightByShapeGlobalSize = getHeightByShapeGlobalSize;
 exports.getPaddingGlobalSize = getPaddingGlobalSize;
+exports.getWidthByShapeGlobalSize = getWidthByShapeGlobalSize;
 exports.getWidthHeightGlobalSize = getWidthHeightGlobalSize;
 exports.makeGlobalSize = makeGlobalSize;
 exports.makeStyleWithDefault = makeStyleWithDefault;

package/dist/cjs/index.js

@@ -57,6 +57,7 @@ var shadow = require('./helpers/shadow.js');
 var background = require('./helpers/background.js');
 var query = require('./helpers/query.js');
 var composeAdvanceStyle = require('./helpers/compose-advance-style.js');
+var iconList = require('./helpers/icon-list.js');
 var useAddToCart = require('./hooks/cart/use-add-to-cart.js');
 var useCartData = require('./hooks/cart/use-cart-data.js');
 var useCartDiscountCodesUpdate = require('./hooks/cart/use-cart-discount-codes-update.js');
@@ -221,7 +222,11 @@ exports.isLocalEnv = convert.isLocalEnv;
 exports.composeSize = size.composeSize;
 exports.composeSizeCss = size.composeSizeCss;
 exports.genSizeClass = size.genSizeClass;
+exports.getAspectRatioGlobalSize = size.getAspectRatioGlobalSize;
+exports.getGlobalSizeGap = size.getGlobalSizeGap;
+exports.getHeightByShapeGlobalSize = size.getHeightByShapeGlobalSize;
 exports.getPaddingGlobalSize = size.getPaddingGlobalSize;
+exports.getWidthByShapeGlobalSize = size.getWidthByShapeGlobalSize;
 exports.getWidthHeightGlobalSize = size.getWidthHeightGlobalSize;
 exports.makeGlobalSize = size.makeGlobalSize;
 exports.makeStyleWithDefault = size.makeStyleWithDefault;
@@ -237,6 +242,8 @@ exports.generateProductQueryKey = query.generateProductQueryKey;
 exports.generateProductsQueryKey = query.generateProductsQueryKey;
 exports.composeAdvanceStyle = composeAdvanceStyle.composeAdvanceStyle;
 exports.splitStyle = composeAdvanceStyle.splitStyle;
+exports.composePositionLineHeight = iconList.composePositionLineHeight;
+exports.composePostionIconList = iconList.composePostionIconList;
 exports.useAddToCart = useAddToCart.useAddToCart;
 exports.useCartData = useCartData.useCartData;
 exports.useCartDiscountCodesUpdate = useCartDiscountCodesUpdate.useCartDiscountCodesUpdate;

package/dist/cjs/web-components/src/helpers/styles/constant.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const devicesMapping = {
+    desktop: '',
+    tablet: '-tablet',
+    mobile: '-mobile'
+};
+
+exports.devicesMapping = devicesMapping;

package/dist/esm/components/ComponentToolbarPreview.js

@@ -159,10 +159,14 @@ const ComponentToolbarPreview = ({ ...props })=>{
         return false;
     };
     const toolbarName = ()=>{
-        const name = props.customLabel || props.label;
-        if (name?.toLowerCase() === 'item list' || name?.toLowerCase() === 'icon list') {
+        const tag = props.tag;
+        if (tag === 'IconListV2') {
+            return 'Item list';
+        }
+        if (tag === 'IconList') {
             return 'Advanced list';
         }
+        const name = props.customLabel || props.label;
         return name;
     };
     const onZoomOut = (e)=>{

package/dist/esm/components/ComponentWrapper.js

@@ -16,6 +16,7 @@ const ComponentWrapper = ({ children, ...props })=>{
                     advanced: advanced
                 }),
                 /*#__PURE__*/ jsx(children.type, {
+                    className: advanced?.cssClass,
                     ...children.props,
                     style,
                     advanced
@@ -31,7 +32,7 @@ const ComponentWrapper = ({ children, ...props })=>{
             }),
             /*#__PURE__*/ jsx("div", {
                 style: style,
-                className: `${props.uid}`,
+                className: `${props.uid} ${advanced?.cssClass}`,
                 children: children
             })
         ]

package/dist/esm/components/ComponentWrapperPreview.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useEffect, isValidElement } from 'react';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
-import { disableWrap } from './constant.js';
+import { disableWrap, excludeApplyStyle } from './constant.js';
 import RenderCustomCode from './RenderCustomCode.js';
 import { ComponentToolbarPreview } from './ComponentToolbarPreview.js';
 
@@ -102,12 +102,16 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                 advanced: advanced
             }),
             /*#__PURE__*/ jsxs("div", {
-                style: !props.editorConfigs?.component?.excludeApplyStyle ? style : {},
+                style: !excludeApplyStyle.includes(props.tag) ? style : {
+                    '--mb': style?.['--mb'],
+                    '--mb-tablet': style?.['--mb-tablet'],
+                    '--mb-mobile': style?.['--mb-mobile']
+                },
                 className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
                 children: [
-                    !props.editorConfigs?.component?.validate && children,
-                    /*#__PURE__*/ isValidElement(children) && props.editorConfigs?.component?.validate && /*#__PURE__*/ jsx(children.type, {
+                    !excludeApplyStyle.includes(props.tag) && children,
+                    /*#__PURE__*/ isValidElement(children) && excludeApplyStyle.includes(props.tag) && /*#__PURE__*/ jsx(children.type, {
                         ...children.props,
                         style,
                         advanced

package/dist/esm/components/constant.js

@@ -42,5 +42,9 @@ const customRenderChildren = [
     'IconList',
     'Tabs'
 ];
+const excludeApplyStyle = [
+    'IconListV2',
+    'Accordion'
+];
 
-export { customRenderChildren, disableWrap };
+export { customRenderChildren, disableWrap, excludeApplyStyle };

package/dist/esm/components/resize/Resize.js

@@ -1,17 +1,11 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import Column from './Column.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import Spacing from './Spacing.js';
 
 function Resize(props) {
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(Spacing, {
-                ...props
-            }),
-            /*#__PURE__*/ jsx(Column, {
-                ...props
-            })
-        ]
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Spacing, {
+            ...props
+        })
     });
 }
 

package/dist/esm/helpers/icon-list.js

@@ -0,0 +1,58 @@
+import { devicesMapping } from '../web-components/src/helpers/styles/constant.js';
+
+const TEXT_TOTAL_SPACING = 3; //Padding 2, margin 1
+const composePostionIconList = (lineHeight, position, iconWidth)=>{
+    const compose = {};
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'desktop',
+        position,
+        iconWidth
+    });
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'tablet',
+        position,
+        iconWidth
+    });
+    composePositionLineHeight({
+        compose,
+        lineHeight,
+        device: 'mobile',
+        position,
+        iconWidth
+    });
+    return compose;
+};
+const composePositionLineHeight = ({ compose, lineHeight, device, position, iconWidth })=>{
+    const positionDevice = position?.[device];
+    const iconWidthDevice = iconWidth?.[device];
+    if (positionDevice) {
+        const suffix = devicesMapping[device] ?? '';
+        if (positionDevice === 'center') {
+            compose.wrapper = {
+                ...compose.wrapper,
+                [`--ai${suffix}`]: 'center'
+            };
+            compose.content = {
+                ...compose.content,
+                [`--pos${suffix}`]: 'static'
+            };
+        } else if (iconWidthDevice) {
+            const computedTop = parseFloat(lineHeight.replaceAll(/[a-zA-Z]/g, '')) / 2 + TEXT_TOTAL_SPACING - iconWidthDevice / 2;
+            compose.wrapper = {
+                ...compose.wrapper,
+                [`--ai${suffix}`]: 'flex-start'
+            };
+            compose.content = {
+                ...compose.content,
+                [`--top${suffix}`]: `${Math.max(0, Math.ceil(computedTop))}px`,
+                [`--pos${suffix}`]: 'relative'
+            };
+        }
+    }
+};
+
+export { composePositionLineHeight, composePostionIconList };

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

@@ -57,7 +57,7 @@ const makeStyleResponsive = (name, value)=>{
 };
 const makeWidth = (widthValue, fullWidthValue)=>{
     const getVal = (deviceValue, widthValue, fullWidthValue)=>{
-        const widthVal = widthValue?.[deviceValue] === undefined ? widthValue?.['desktop'] : widthValue?.[deviceValue];
+        const widthVal = getResponsiveValueByScreen(widthValue, deviceValue);
         const fullWidthVal = fullWidthValue?.[deviceValue] === undefined ? fullWidthValue?.['desktop'] : fullWidthValue?.[deviceValue];
         if (fullWidthVal) {
             return '100%';