@gem-sdk/core 1.5.17 → 1.5.22

package/dist/cjs/helpers/colors.js

@@ -3,162 +3,127 @@
 var isDefined = require('./is-defined.js');
 var constant = require('./constant.js');
 
-const getGlobalColorCSSProp = (color) => {
-    return getSingleColorVariable(color);
-};
-const getGlobalColorClass = (type, color) => {
-    if (typeof color !== 'string' ||
-        !color ||
-        color?.startsWith('#') ||
-        color?.startsWith('rgb') ||
-        color?.startsWith('hsl') ||
-        color?.startsWith('transparent'))
-        return '';
-    return `${type}-g-${color}`;
-};
-const getGlobalColorResponsiveClass = (type, data) => {
-    if (!data)
-        return '';
-    return Object.entries(data)
-        .map(([device, value]) => {
-        const clName = getGlobalColorClass(type, value);
-        if (!clName)
-            return undefined;
-        if (device === 'desktop') {
-            return clName;
-        }
-        else {
-            return `${device}:${clName}`;
-        }
-    })
-        .filter(isDefined.isDefined)
-        .join(' ');
-};
-const getGlobalColorStateClass = (type, data) => {
-    if (!data)
-        return '';
-    return Object.entries(data)
-        .map(([state, value]) => {
-        const clName = getGlobalColorClass(type, value);
-        if (!clName)
-            return undefined;
-        if (state === 'normal') {
-            return clName;
-        }
-        else {
-            return `${state}:${clName}`;
-        }
-    })
-        .filter(isDefined.isDefined)
-        .join(' ');
-};
-const getGlobalColorStateResponsiveClass = (type, data) => {
-    if (!data)
-        return '';
-    return Object.entries(data)
-        .map(([device, objectState]) => {
-        if (device === 'desktop') {
-            return Object.entries(objectState)
-                .map(([state, value]) => {
-                const clName = getGlobalColorClass(type, value);
-                if (!clName)
-                    return undefined;
-                if (state === 'normal') {
-                    return clName;
-                }
-                else {
-                    return `${state}:${clName}`;
-                }
-            })
-                .filter(isDefined.isDefined)
-                .join(' ');
-        }
-        else {
-            return Object.entries(objectState)
-                .map(([state, value]) => {
-                const clName = getGlobalColorClass(type, value);
-                if (!clName)
-                    return undefined;
-                if (state === 'normal') {
-                    return `${device}:${clName}`;
-                }
-                else {
-                    return `${device}:${state}:${clName}`;
-                }
-            })
-                .filter(isDefined.isDefined)
-                .join(' ');
-        }
-    })
-        .filter(Boolean)
-        .join(' ');
-};
-const getGlobalColorResponsiveStyle = (type, data) => {
-    if (!data)
-        return {};
-    return Object.fromEntries(Object.entries(data).map(([device, value]) => {
-        if (device === 'desktop') {
-            return [`--${type}`, getSingleColorVariable(value)];
-        }
-        else {
-            return [`--${type}-${device}`, getSingleColorVariable(value)];
-        }
-    }));
-};
-const getGlobalColorStateStyle = (type, data) => {
-    if (!data)
-        return {};
-    return Object.fromEntries(Object.entries(data)
-        .map(([state, value]) => {
-        if (state === 'active')
-            return [];
-        return [`-${constant.stateMapping?.[state]}-${type}`, getSingleColorVariable(value)];
-    })
-        .filter(isDefined.isDefined));
-};
-const getGlobalColorStateResponsiveStyle = (type, data) => {
-    if (!data)
-        return {};
-    return Object.entries(data)
-        .map(([device, objectState]) => {
-        if (device === 'desktop') {
-            return Object.fromEntries(Object.entries(objectState)
-                .map(([state, value]) => {
-                if (state === 'active')
-                    return [];
-                return [`-${constant.stateMapping[state]}-${type}`, getSingleColorVariable(value)];
-            })
-                .filter(isDefined.isDefined));
-        }
-        else {
-            return Object.fromEntries(Object.entries(objectState)
-                .map(([state, value]) => {
-                if (state === 'active')
-                    return [];
-                return [`-${constant.stateMapping[state]}-${type}-${device}`, getSingleColorVariable(value)];
-            })
-                .filter(isDefined.isDefined));
-        }
-    })
-        .reduce((acc, curr) => ({ ...acc, ...curr }), {});
-};
-const getSingleColorVariable = (color) => {
-    if (!color)
-        return undefined;
-    if (isColor(color))
-        return color;
-    return `var(--g-c-${color}, ${color})`;
-};
-function isColor(color) {
-    return (color?.startsWith('#') ||
-        color?.startsWith('rgb') ||
-        color?.startsWith('hsl') ||
-        color?.startsWith('transparent'));
-}
-const getGlobalColorStyle = (data) => {
-    if (!data)
-        return {};
-    return { '--c': getSingleColorVariable(data) };
+const getGlobalColorCSSProp = (color)=>{
+    return getSingleColorVariable(color);
+};
+const getGlobalColorClass = (type, color)=>{
+    if (typeof color !== 'string' || !color || color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent')) return '';
+    return `${type}-g-${color}`;
+};
+const getGlobalColorResponsiveClass = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([device, value])=>{
+        const clName = getGlobalColorClass(type, value);
+        if (!clName) return undefined;
+        if (device === 'desktop') {
+            return clName;
+        } else {
+            return `${device}:${clName}`;
+        }
+    }).filter(isDefined.isDefined).join(' ');
+};
+const getGlobalColorStateClass = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([state, value])=>{
+        const clName = getGlobalColorClass(type, value);
+        if (!clName) return undefined;
+        if (state === 'normal') {
+            return clName;
+        } else {
+            return `${state}:${clName}`;
+        }
+    }).filter(isDefined.isDefined).join(' ');
+};
+const getGlobalColorStateResponsiveClass = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([device, objectState])=>{
+        if (device === 'desktop') {
+            return Object.entries(objectState).map(([state, value])=>{
+                const clName = getGlobalColorClass(type, value);
+                if (!clName) return undefined;
+                if (state === 'normal') {
+                    return clName;
+                } else {
+                    return `${state}:${clName}`;
+                }
+            }).filter(isDefined.isDefined).join(' ');
+        } else {
+            return Object.entries(objectState).map(([state, value])=>{
+                const clName = getGlobalColorClass(type, value);
+                if (!clName) return undefined;
+                if (state === 'normal') {
+                    return `${device}:${clName}`;
+                } else {
+                    return `${device}:${state}:${clName}`;
+                }
+            }).filter(isDefined.isDefined).join(' ');
+        }
+    }).filter(Boolean).join(' ');
+};
+const getGlobalColorResponsiveStyle = (type, data)=>{
+    if (!data) return {};
+    return Object.fromEntries(Object.entries(data).map(([device, value])=>{
+        if (device === 'desktop') {
+            return [
+                `--${type}`,
+                getSingleColorVariable(value)
+            ];
+        } else {
+            return [
+                `--${type}-${device}`,
+                getSingleColorVariable(value)
+            ];
+        }
+    }));
+};
+const getGlobalColorStateStyle = (type, data)=>{
+    if (!data) return {};
+    return Object.fromEntries(Object.entries(data).map(([state, value])=>{
+        if (state === 'active') return [];
+        return [
+            `-${constant.stateMapping?.[state]}-${type}`,
+            getSingleColorVariable(value)
+        ];
+    }).filter(isDefined.isDefined));
+};
+const getGlobalColorStateResponsiveStyle = (type, data)=>{
+    if (!data) return {};
+    return Object.entries(data).map(([device, objectState])=>{
+        if (device === 'desktop') {
+            return Object.fromEntries(Object.entries(objectState).map(([state, value])=>{
+                if (state === 'active') return [];
+                return [
+                    `-${constant.stateMapping[state]}-${type}`,
+                    getSingleColorVariable(value)
+                ];
+            }).filter(isDefined.isDefined));
+        } else {
+            return Object.fromEntries(Object.entries(objectState).map(([state, value])=>{
+                if (state === 'active') return [];
+                return [
+                    `-${constant.stateMapping[state]}-${type}-${device}`,
+                    getSingleColorVariable(value)
+                ];
+            }).filter(isDefined.isDefined));
+        }
+    }).reduce((acc, curr)=>({
+            ...acc,
+            ...curr
+        }), {});
+};
+const getSingleColorVariable = (color)=>{
+    if (!color) return undefined;
+    if (isColor(color)) return color;
+    return `var(--g-c-${color}, ${color})`;
+};
+function isColor(color) {
+    return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent');
+}
+const getGlobalColorStyle = (data)=>{
+    if (!data) return {};
+    return {
+        '--c': getSingleColorVariable(data)
+    };
 };
 
 exports.getGlobalColorCSSProp = getGlobalColorCSSProp;

package/dist/cjs/helpers/compose-advance-style.js

@@ -6,127 +6,121 @@ var constant = require('./constant.js');
 var radius = require('./radius.js');
 var shadow = require('./shadow.js');
 
-const composeSpacing = ({ source, spacing, type, suffix = '', }) => {
-    const { top, left, bottom, right } = spacing;
-    if (top)
-        source[`--${type}t${suffix}`] = top;
-    if (left)
-        source[`--${type}l${suffix}`] = left;
-    if (bottom)
-        source[`--${type}b${suffix}`] = bottom;
-    if (right)
-        source[`--${type}r${suffix}`] = right;
-};
-const getAttrValue = (attr, value, tag) => {
-    if (value === undefined || value === null)
-        return undefined;
-    switch (attr) {
-        case 'bgc':
-        case 'c':
-            return colors.isColor(value.toString()) ? value : `var(--g-c-${value})`;
-        case 'd':
-            if (!value)
-                return 'none';
-            if (value && tag && constant.layoutComponent.includes(tag))
-                return 'grid';
-            return 'inline';
-        default:
-            return value;
-    }
-};
-function composeAdvanceStyle(data, tag) {
-    if (!data)
-        return {};
-    const styles = {};
-    const devices = ['desktop', 'tablet', 'mobile'];
-    const states = ['hover', 'normal'];
-    Object.keys(data).forEach((attr) => {
-        const value = data[attr];
-        if (value === undefined || value === null)
-            return;
-        const hasBoxShadow = (data.hasBoxShadow ? data.hasBoxShadow : {});
-        if (typeof value === 'object') {
-            if (Array.isArray(value))
-                return;
-            Object.keys(value).forEach((composeAttr) => {
-                if (devices.includes(composeAttr)) {
-                    const deviceValue = value[composeAttr];
-                    if (deviceValue !== undefined) {
-                        // Responsive border with state
-                        if (attr === 'border') {
-                            Object.assign(styles, borders.handleConvertBorderStyle(value), borders.handleConvertBorderWidth(value), borders.handleConvertBorderColor(value));
-                        }
-                        if (attr === 'rounded') {
-                            Object.assign(styles, radius.composeRadius(value));
-                        }
-                        if (composeAttr === 'desktop') {
-                            switch (attr) {
-                                case 'padding':
-                                    composeSpacing({
-                                        source: styles,
-                                        spacing: deviceValue,
-                                        type: 'p',
-                                    });
-                                    break;
-                                case 'margin':
-                                    composeSpacing({
-                                        source: styles,
-                                        spacing: deviceValue,
-                                        type: 'm',
-                                    });
-                                    break;
-                                case 'm':
-                                case 'p':
-                                    break;
-                                default:
-                                    styles[`--${attr}`] = getAttrValue(attr, deviceValue, tag);
-                                    break;
-                            }
-                        }
-                        else {
-                            switch (attr) {
-                                case 'padding':
-                                    composeSpacing({
-                                        source: styles,
-                                        spacing: deviceValue,
-                                        type: 'p',
-                                        suffix: `-${composeAttr}`,
-                                    });
-                                    break;
-                                case 'margin':
-                                    composeSpacing({
-                                        source: styles,
-                                        spacing: deviceValue,
-                                        type: 'm',
-                                        suffix: `-${composeAttr}`,
-                                    });
-                                    break;
-                                case 'm':
-                                case 'p':
-                                    break;
-                                default:
-                                    styles[`--${attr}-${composeAttr}`] = getAttrValue(attr, deviceValue, tag);
-                                    break;
-                            }
-                        }
-                    }
-                }
-                else if (states.includes(composeAttr)) {
-                    switch (attr) {
-                        case 'hasBoxShadow':
-                            break;
-                        case 'boxShadow':
-                            Object.assign(styles, shadow.getStyleShadowState(value, 'box-shadow', hasBoxShadow));
-                            break;
-                    }
-                }
-            });
-        }
-        else {
-            styles[`--${attr}`] = getAttrValue(attr, value, tag);
-        }
-    });
-    return styles;
+const composeSpacing = ({ source , spacing , type , suffix =''  })=>{
+    const { top , left , bottom , right  } = spacing;
+    if (top) source[`--${type}t${suffix}`] = top;
+    if (left) source[`--${type}l${suffix}`] = left;
+    if (bottom) source[`--${type}b${suffix}`] = bottom;
+    if (right) source[`--${type}r${suffix}`] = right;
+};
+const getAttrValue = (attr, value, tag)=>{
+    if (value === undefined || value === null) return undefined;
+    switch(attr){
+        case 'bgc':
+        case 'c':
+            return colors.isColor(value.toString()) ? value : `var(--g-c-${value})`;
+        case 'd':
+            if (!value) return 'none';
+            if (value && tag && constant.layoutComponent.includes(tag)) return 'grid';
+            return 'inline';
+        default:
+            return value;
+    }
+};
+function composeAdvanceStyle(data, tag) {
+    if (!data) return {};
+    const styles = {};
+    const devices = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    const states = [
+        'hover',
+        'normal'
+    ];
+    Object.keys(data).forEach((attr)=>{
+        const value = data[attr];
+        if (value === undefined || value === null) return;
+        const hasBoxShadow = data.hasBoxShadow ? data.hasBoxShadow : {};
+        if (typeof value === 'object') {
+            if (Array.isArray(value)) return;
+            Object.keys(value).forEach((composeAttr)=>{
+                if (devices.includes(composeAttr)) {
+                    const deviceValue = value[composeAttr];
+                    if (deviceValue !== undefined) {
+                        // Responsive border with state
+                        if (attr === 'border') {
+                            Object.assign(styles, borders.handleConvertBorderStyle(value), borders.handleConvertBorderWidth(value), borders.handleConvertBorderColor(value));
+                        }
+                        if (attr === 'rounded') {
+                            Object.assign(styles, radius.composeRadius(value));
+                        }
+                        if (composeAttr === 'desktop') {
+                            switch(attr){
+                                case 'padding':
+                                    composeSpacing({
+                                        source: styles,
+                                        spacing: deviceValue,
+                                        type: 'p'
+                                    });
+                                    break;
+                                case 'margin':
+                                    composeSpacing({
+                                        source: styles,
+                                        spacing: deviceValue,
+                                        type: 'm'
+                                    });
+                                    break;
+                                case 'm':
+                                case 'p':
+                                    break;
+                                default:
+                                    styles[`--${attr}`] = getAttrValue(attr, deviceValue, tag);
+                                    break;
+                            }
+                        } else {
+                            switch(attr){
+                                case 'padding':
+                                    composeSpacing({
+                                        source: styles,
+                                        spacing: deviceValue,
+                                        type: 'p',
+                                        suffix: `-${composeAttr}`
+                                    });
+                                    break;
+                                case 'margin':
+                                    composeSpacing({
+                                        source: styles,
+                                        spacing: deviceValue,
+                                        type: 'm',
+                                        suffix: `-${composeAttr}`
+                                    });
+                                    break;
+                                case 'm':
+                                case 'p':
+                                    break;
+                                default:
+                                    styles[`--${attr}-${composeAttr}`] = getAttrValue(attr, deviceValue, tag);
+                                    break;
+                            }
+                        }
+                    }
+                } else if (states.includes(composeAttr)) {
+                    switch(attr){
+                        case 'hasBoxShadow':
+                            break;
+                        case 'boxShadow':
+                            Object.assign(styles, shadow.getStyleShadowState(value, 'box-shadow', hasBoxShadow));
+                            break;
+                    }
+                }
+            });
+        } else {
+            styles[`--${attr}`] = getAttrValue(attr, value, tag);
+        }
+    });
+    return styles;
 }
 
 exports.composeAdvanceStyle = composeAdvanceStyle;

package/dist/cjs/helpers/constant.js

@@ -1,16 +1,21 @@
 'use strict';
 
-const stateMapping = {
-    normal: '',
-    hover: '-hvr',
-    focus: '-focus',
-};
-const devicesMapping = {
-    desktop: '',
-    tablet: '-tablet',
-    mobile: '-mobile',
-};
-const layoutComponent = ['Row', 'Section', 'Product', 'HeroBanner'];
+const stateMapping = {
+    normal: '',
+    hover: '-hvr',
+    focus: '-focus'
+};
+const devicesMapping = {
+    desktop: '',
+    tablet: '-tablet',
+    mobile: '-mobile'
+};
+const layoutComponent = [
+    'Row',
+    'Section',
+    'Product',
+    'HeroBanner'
+];
 
 exports.devicesMapping = devicesMapping;
 exports.layoutComponent = layoutComponent;

package/dist/cjs/helpers/css-variable.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const genVariable = (variableName) => {
-    return `var(--g-${variableName})`;
+const genVariable = (variableName)=>{
+    return `var(--g-${variableName})`;
 };
 
 exports.genVariable = genVariable;

package/dist/cjs/helpers/email.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const validateEmail = (email) => {
-    const emailRegex = new RegExp(/^(?:[^<>()[\]\\.,;:\s@"]+(?:\.[^<>()[\]\\.,;:\s@"]+)*|".+")@(?:\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]|(?:[a-zA-Z\-\d]+\.)+[a-zA-Z]{2,})$/);
-    return emailRegex.test(email);
+const validateEmail = (email)=>{
+    const emailRegex = new RegExp(/^(?:[^<>()[\]\\.,;:\s@"]+(?:\.[^<>()[\]\\.,;:\s@"]+)*|".+")@(?:\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]|(?:[a-zA-Z\-\d]+\.)+[a-zA-Z]{2,})$/);
+    return emailRegex.test(email);
 };
 
 exports.default = validateEmail;

package/dist/cjs/helpers/flatten-connection.js

@@ -1,10 +1,9 @@
 'use strict';
 
-/**
- * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](api/storefront/reference/products/product#connections)) into a flat array of nodes.
- */
-const flattenConnection = (connection) => {
-    return connection?.edges?.map((edge) => edge.node) ?? [];
+/**
+ * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](api/storefront/reference/products/product#connections)) into a flat array of nodes.
+ */ const flattenConnection = (connection)=>{
+    return connection?.edges?.map((edge)=>edge.node) ?? [];
 };
 
 exports.flattenConnection = flattenConnection;