@gem-sdk/core 2.0.0-dev.896 → 2.0.0

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

@@ -1 +1,327 @@
-"use strict";var borders=require("./borders.js"),colors=require("./colors.js"),constant=require("./constant.js"),makeStyle=require("./make-style.js"),radius=require("./radius.js"),shadow=require("./shadow.js");const composeSpacing=({source:e,spacing:t,type:r,suffix:o=""})=>{let{top:a,left:s,bottom:l,right:n}=t;a&&(e[`--${r}t${o}`]=a),s&&(e[`--${r}l${o}`]=s),l&&(e[`--${r}b${o}`]=l),n&&(e[`--${r}r${o}`]=n)},composeSpacingV2=({source:e,spacing:t,suffix:r="",tag:o=""})=>{if(t&&t.margin){let{top:a,left:s,bottom:l,right:n}=t.margin;a&&(e[`--mt${r}`]=a),s&&(e[`--ml${r}`]=constant.layoutComponent.includes(o)&&"0px"===s?"auto":s),l&&(e[`--mb${r}`]=l),n&&(e[`--mr${r}`]=constant.layoutComponent.includes(o)&&"0px"===n?"auto":n)}if(t&&t.padding){let{top:o,left:a,bottom:s,right:l}=t.padding;o&&(e[`--pt${r}`]=o),a&&(e[`--pl${r}`]=a),s&&(e[`--pb${r}`]=s),l&&(e[`--pr${r}`]=l)}},getAttrValue=(e,t,r)=>{if(null!=t)switch(e){case"bgc":case"c":return colors.isColor(t.toString())?t:`var(--g-c-${t})`;case"d":if(!t)return"none";if(t&&r&&constant.layoutComponent.includes(r))return"grid";return"block";default:return t}},postPurchasePaddingMapping={loose:"21px",extraLoose:"38px",tight:"9px",extraTight:"5px",base:"14px"},composeAdvanceStyleForPostPurchase=(e,t)=>{if(!e)return{};let r={};return Object.keys(e).forEach(o=>{let a=e[o];if("blockPadding"===o){let e=postPurchasePaddingMapping[a];r["--pb"]=getAttrValue(o,e,t),r["--pt"]=getAttrValue(o,e,t),r["--mb"]="0px",r["--mt"]="0px"}if("inlinePadding"===o){let e=postPurchasePaddingMapping[a];r["--pl"]=getAttrValue(o,e,t),r["--pr"]=getAttrValue(o,e,t)}}),r};function composeAdvanceStyle(e,t,r){if(!e)return{};let o={"--pos":"relative"},a=["desktop","tablet","mobile"],s=["hover","normal"];Object.keys(e).forEach(l=>{let n=e[l];if("cssClass"===l||null==n)return;let i=e.hasBoxShadow?e.hasBoxShadow:{};if("object"==typeof n){if(Array.isArray(n))return;Object.keys(n).forEach(r=>{if(a.includes(r)){let e=n[r];if(void 0!==e){if("border"===l&&Object.assign(o,borders.handleConvertBorderStyle(n),borders.handleConvertBorderWidth(n),borders.handleConvertBorderColor(n)),"rounded"===l&&Object.assign(o,radius.composeRadius(n)),"pos"==l&&"static"==e&&(e="relative"),"desktop"===r)switch(l){case"padding":composeSpacing({source:o,spacing:e,type:"p"});break;case"margin":composeSpacing({source:o,spacing:e,type:"m"});break;case"spacing-setting":composeSpacingV2({source:o,spacing:e,tag:t});break;case"m":case"p":break;default:o[`--${l}`]=getAttrValue(l,e,t)}else switch(l){case"padding":composeSpacing({source:o,spacing:e,type:"p",suffix:`-${r}`});break;case"margin":composeSpacing({source:o,spacing:e,type:"m",suffix:`-${r}`});break;case"spacing-setting":composeSpacingV2({source:o,spacing:e,suffix:`-${r}`,tag:t});break;case"m":case"p":break;default:o[`--${l}-${r}`]=getAttrValue(l,e,t)}}}else if(s.includes(r))switch(l){case"hasBoxShadow":break;case"boxShadow":Object.assign(o,shadow.getStyleShadowState(n,"box-shadow",i))}else"border"===l&&("none"===n.border&&(n.border="solid",n.color="#121212",n.isCustom=!0,n.width="0px",n.position="all"),Object.assign(o,borders.getBorderStyle(n))),"rounded"===l&&Object.assign(o,radius.getCornerCSSFromGlobal(n)),"hasBoxShadow"===l&&Object.assign(o,shadow.getStyleShadow({value:e.boxShadow,styleAppliedFor:"box-shadow",isEnableShadow:e.hasBoxShadow})),"boxShadow"===l&&Object.assign(o,shadow.getStyleShadow({value:n,styleAppliedFor:"box-shadow",isEnableShadow:e.hasBoxShadow}))})}else o[`--${l}`]=getAttrValue(l,n,t),"hasBoxShadow"===l&&e.boxShadow&&Object.assign(o,shadow.getStyleShadow({value:e.boxShadow,styleAppliedFor:"box-shadow",isEnableShadow:e.hasBoxShadow}));if("blockPadding"===l&&"POST_PURCHASE"===r){let e=postPurchasePaddingMapping[n];o["--pb"]=getAttrValue(l,e,t),o["--pt"]=getAttrValue(l,e,t),o["--mb"]="0px",o["--mt"]="0px"}if("inlinePadding"===l&&"POST_PURCHASE"===r){let e=postPurchasePaddingMapping[n];o["--pl"]=getAttrValue(l,e,t),o["--pr"]=getAttrValue(l,e,t)}});let l="POST_PURCHASE"===r?composeAdvanceStyleForPostPurchase(e,t):{};return{...o,...l}}const splitStyle=(e,t={})=>{let r=e.map(e=>makeStyle.makeStyleKey(e)).flat(),o=Object.keys(t).filter(e=>r.includes(e)),a=o.reduce((e,r)=>({...e,[r]:t[r]}),{}),s=Object.keys(t).filter(e=>!o.includes(e)).reduce((e,r)=>({...e,[r]:t[r]}),{});return[a,s]},filterAttrInStyle=(e,t)=>{if(!e||!t)return{};let r={...e};return Object.entries(r).forEach(([e])=>{t.includes(e)||delete r[e]}),r},removeAttrInStyle=(e,t)=>{if(!e||!t)return{};let r={...e};return Object.entries(r).forEach(([e])=>{t.includes(e)&&delete r[e]}),r},filterCornerInStyle=e=>{let t=["--bblr","--bbrr","--btlr","--btrr"];return filterAttrInStyle(e,t)},removePaddingYInStyle=e=>{let t=["--pt","--pt-tablet","--pt-mobile","--pb","--pb-tablet","--pb-mobile"];return removeAttrInStyle(e,t)};exports.composeAdvanceStyle=composeAdvanceStyle,exports.composeAdvanceStyleForPostPurchase=composeAdvanceStyleForPostPurchase,exports.filterAttrInStyle=filterAttrInStyle,exports.filterCornerInStyle=filterCornerInStyle,exports.removeAttrInStyle=removeAttrInStyle,exports.removePaddingYInStyle=removePaddingYInStyle,exports.splitStyle=splitStyle;
+'use strict';
+
+var borders = require('./borders.js');
+var colors = require('./colors.js');
+var constant = require('./constant.js');
+var makeStyle = require('./make-style.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 composeSpacingV2 = ({ source, spacing, suffix = '', tag = '' })=>{
+    if (spacing && spacing.margin) {
+        const { top, left, bottom, right } = spacing.margin;
+        if (top) source[`--mt${suffix}`] = top;
+        if (left) source[`--ml${suffix}`] = constant.layoutComponent.includes(tag) && left === '0px' ? 'auto' : left;
+        if (bottom) source[`--mb${suffix}`] = bottom;
+        if (right) source[`--mr${suffix}`] = constant.layoutComponent.includes(tag) && right === '0px' ? 'auto' : right;
+    }
+    if (spacing && spacing.padding) {
+        const { top, left, bottom, right } = spacing.padding;
+        if (top) source[`--pt${suffix}`] = top;
+        if (left) source[`--pl${suffix}`] = left;
+        if (bottom) source[`--pb${suffix}`] = bottom;
+        if (right) source[`--pr${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 'block';
+        case 'animation':
+            return undefined;
+        case 'hasBoxShadow':
+            return undefined;
+        case 'rounded':
+            return undefined;
+        case 'boxShadow':
+            return undefined;
+        case 'border':
+            return undefined;
+        default:
+            return value;
+    }
+};
+const postPurchasePaddingMapping = {
+    loose: '21px',
+    extraLoose: '38px',
+    tight: '9px',
+    extraTight: '5px',
+    base: '14px'
+};
+const composeAdvanceStyleForPostPurchase = (data, tag)=>{
+    if (!data) return {};
+    const styles = {};
+    Object.keys(data).forEach((attr)=>{
+        const value = data[attr];
+        if (attr === 'blockPadding') {
+            const valueMapped = postPurchasePaddingMapping[value];
+            styles[`--pb`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--pt`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--mb`] = '0px';
+            styles[`--mt`] = '0px';
+        }
+        if (attr === 'inlinePadding') {
+            const valueMapped = postPurchasePaddingMapping[value];
+            styles[`--pl`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--pr`] = getAttrValue(attr, valueMapped, tag);
+        }
+    });
+    return styles;
+};
+function composeAdvanceStyle(data, tag, pageType) {
+    if (!data) return {};
+    const styles = {};
+    const devices = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    const states = [
+        'hover',
+        'normal'
+    ];
+    Object.keys(data).forEach((attr)=>{
+        const value = data[attr];
+        if (attr === 'cssClass') return;
+        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 (attr === 'boxShadow') {
+                            Object.assign(styles, shadow.getResponsiveStyleShadow(value, 'box-shadow', hasBoxShadow));
+                        }
+                        const styleValue = getAttrValue(attr, deviceValue, tag);
+                        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 'spacing-setting':
+                                    composeSpacingV2({
+                                        source: styles,
+                                        spacing: deviceValue,
+                                        tag
+                                    });
+                                    break;
+                                case 'm':
+                                case 'p':
+                                    break;
+                                default:
+                                    styleValue && (styles[`--${attr}`] = styleValue);
+                                    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 'spacing-setting':
+                                    composeSpacingV2({
+                                        source: styles,
+                                        spacing: deviceValue,
+                                        suffix: `-${composeAttr}`,
+                                        tag
+                                    });
+                                    break;
+                                case 'm':
+                                case 'p':
+                                    break;
+                                default:
+                                    styleValue && (styles[`--${attr}-${composeAttr}`] = styleValue);
+                                    break;
+                            }
+                        }
+                    }
+                } else if (states.includes(composeAttr)) {
+                    switch(attr){
+                        case 'hasBoxShadow':
+                            break;
+                        case 'boxShadow':
+                            Object.assign(styles, shadow.getStyleShadowState(value, 'box-shadow', hasBoxShadow));
+                            break;
+                    }
+                } else {
+                    if (attr === 'border') {
+                        const borderStyle = value;
+                        if (borderStyle.border === 'none') {
+                            borderStyle.border = 'solid';
+                            borderStyle.color = '#121212';
+                            borderStyle.isCustom = true;
+                            borderStyle.width = '0px';
+                            borderStyle.position = 'all';
+                        }
+                        Object.assign(styles, borders.getBorderStyle(borderStyle));
+                    }
+                    if (attr === 'rounded') {
+                        Object.assign(styles, radius.getCornerCSSFromGlobal(value));
+                    }
+                    if (attr === 'hasBoxShadow') {
+                        Object.assign(styles, shadow.getStyleShadow({
+                            value: data.boxShadow,
+                            styleAppliedFor: 'box-shadow',
+                            isEnableShadow: data.hasBoxShadow
+                        }));
+                    }
+                    if (attr === 'boxShadow') {
+                        Object.assign(styles, shadow.getStyleShadow({
+                            value: value,
+                            styleAppliedFor: 'box-shadow',
+                            isEnableShadow: data.hasBoxShadow
+                        }));
+                    }
+                }
+            });
+        } else {
+            const styleValue = getAttrValue(attr, value, tag);
+            styleValue && (styles[`--${attr}`] = styleValue);
+            if (attr === 'hasBoxShadow' && data.boxShadow) {
+                Object.assign(styles, shadow.getStyleShadow({
+                    value: data.boxShadow,
+                    styleAppliedFor: 'box-shadow',
+                    isEnableShadow: data.hasBoxShadow
+                }));
+            }
+        }
+        if (attr === 'blockPadding' && pageType === 'POST_PURCHASE') {
+            const valueMapped = postPurchasePaddingMapping[value];
+            styles[`--pb`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--pt`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--mb`] = '0px';
+            styles[`--mt`] = '0px';
+        }
+        if (attr === 'inlinePadding' && pageType === 'POST_PURCHASE') {
+            const valueMapped = postPurchasePaddingMapping[value];
+            styles[`--pl`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--pr`] = getAttrValue(attr, valueMapped, tag);
+        }
+    });
+    const advancedPostPurchaseStyles = pageType === 'POST_PURCHASE' ? composeAdvanceStyleForPostPurchase(data, tag) : {};
+    return {
+        ...styles,
+        ...advancedPostPurchaseStyles
+    };
+}
+const splitStyle = (keys, style = {})=>{
+    const fullKeys = keys.map((key)=>makeStyle.makeStyleKey(key)).flat();
+    const splitKeys = Object.keys(style).filter((key)=>{
+        return fullKeys.includes(key);
+    });
+    const splitStyle = splitKeys.reduce((curr, key)=>{
+        return {
+            ...curr,
+            [key]: style[key]
+        };
+    }, {});
+    const restStyle = Object.keys(style).filter((key)=>{
+        return !splitKeys.includes(key);
+    }).reduce((curr, key)=>{
+        return {
+            ...curr,
+            [key]: style[key]
+        };
+    }, {});
+    return [
+        splitStyle,
+        restStyle
+    ];
+};
+const filterAttrInStyle = (style, filterKeys)=>{
+    if (!style || !filterKeys) return {};
+    const newStyle = {
+        ...style
+    };
+    Object.entries(newStyle).forEach(([key])=>{
+        if (!filterKeys.includes(key)) {
+            delete newStyle[key];
+        }
+    });
+    return newStyle;
+};
+const removeAttrInStyle = (style, filterKeys)=>{
+    if (!style || !filterKeys) return {};
+    const newStyle = {
+        ...style
+    };
+    Object.entries(newStyle).forEach(([key])=>{
+        if (filterKeys.includes(key)) {
+            delete newStyle[key];
+        }
+    });
+    return newStyle;
+};
+const filterCornerInStyle = (style)=>{
+    const cornerKeys = [
+        '--bblr',
+        '--bbrr',
+        '--btlr',
+        '--btrr'
+    ];
+    return filterAttrInStyle(style, cornerKeys);
+};
+const removePaddingYInStyle = (style)=>{
+    const keys = [
+        '--pt',
+        '--pt-tablet',
+        '--pt-mobile',
+        '--pb',
+        '--pb-tablet',
+        '--pb-mobile'
+    ];
+    return removeAttrInStyle(style, keys);
+};
+
+exports.composeAdvanceStyle = composeAdvanceStyle;
+exports.composeAdvanceStyleForPostPurchase = composeAdvanceStyleForPostPurchase;
+exports.filterAttrInStyle = filterAttrInStyle;
+exports.filterCornerInStyle = filterCornerInStyle;
+exports.removeAttrInStyle = removeAttrInStyle;
+exports.removePaddingYInStyle = removePaddingYInStyle;
+exports.splitStyle = splitStyle;

package/dist/cjs/helpers/constant.js

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

package/dist/cjs/helpers/convert.js

@@ -1 +1,7 @@
-"use strict";const isLocalEnv="local"===process.env.NEXT_CONVERT_ENV,baseAssetURL=process.env.GP_BASE_ASSET_URL||"https://d3kbi0je7pp4lw.cloudfront.net";exports.baseAssetURL=baseAssetURL,exports.isLocalEnv=isLocalEnv;
+'use strict';
+
+const isLocalEnv = process.env.NEXT_CONVERT_ENV === 'local';
+const baseAssetURL = process.env.GP_BASE_ASSET_URL || 'https://d3kbi0je7pp4lw.cloudfront.net';
+
+exports.baseAssetURL = baseAssetURL;
+exports.isLocalEnv = isLocalEnv;

package/dist/cjs/helpers/covert-entities-html.js

@@ -1 +1,19 @@
-"use strict";const convertHTML=t=>{let e={"&amp;":"&","&lt;":"<","&gt;":">","&nbsp;":"  "},r=t;for(let n in e)t.indexOf(n)>=0&&(r=r.replaceAll(n,e[n]));return r};exports.convertHTML=convertHTML;
+'use strict';
+
+const convertHTML = (str)=>{
+    const symbols = {
+        '&amp;': '&',
+        '&lt;': '<',
+        '&gt;': '>',
+        '&nbsp;': '  '
+    };
+    let newStr = str;
+    for(const symbol in symbols){
+        if (str.indexOf(symbol) >= 0) {
+            newStr = newStr.replaceAll(symbol, symbols[symbol]);
+        }
+    }
+    return newStr;
+};
+
+exports.convertHTML = convertHTML;

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

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

package/dist/cjs/helpers/email.js

@@ -1 +1,11 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const validateEmail=e=>{let t=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 t.test(e)};exports.default=validateEmail,exports.validateEmail=validateEmail;
+'use strict';
+
+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);
+};
+
+exports.default = validateEmail;
+exports.validateEmail = validateEmail;

package/dist/cjs/helpers/filter-toolbar-preview.js

@@ -1 +1,14 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react=require("react"),ComponentToolbarPreview=require("../components/ComponentToolbarPreview.js");const filterToolbarPreview=(e,r=!1)=>{let o=react.Children.toArray(e);return o.filter(e=>r?e?.type==ComponentToolbarPreview.default:e?.type!=ComponentToolbarPreview.default)};exports.default=filterToolbarPreview,exports.filterToolbarPreview=filterToolbarPreview;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js');
+
+const filterToolbarPreview = (children, keep = false)=>{
+    const arrChild = react.Children.toArray(children);
+    return arrChild.filter((child)=>!keep ? child?.type != ComponentToolbarPreview.default : child?.type == ComponentToolbarPreview.default);
+};
+
+exports.default = filterToolbarPreview;
+exports.filterToolbarPreview = filterToolbarPreview;

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

@@ -1 +1,9 @@
-"use strict";const flattenConnection=n=>n?.edges?.map(n=>n.node)??[];exports.flattenConnection=flattenConnection;
+'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) ?? [];
+};
+
+exports.flattenConnection = flattenConnection;

package/dist/cjs/helpers/get-resonsive-value.js

@@ -1 +1,36 @@
-"use strict";const getResponsiveValue=(e,t)=>t?{desktop:e?.desktop?.[t],tablet:e?.tablet?.[t],mobile:e?.mobile?.[t]}:{},getResponsiveStateValue=(e,t)=>({desktop:t?.desktop?.[e],tablet:t?.tablet?.[e],mobile:t?.mobile?.[e]}),getResponsiveValueByScreen=(e,t,s)=>{switch(t){case"tablet":return e?.tablet??e?.desktop??s;case"mobile":return e?.mobile??e?.tablet??e?.desktop??s;default:return e?.desktop??s}},isColumnDirectionExist=(e,t)=>"desktop"!==t&&"tablet"!==t&&e?.[t]?.cols?.length!==e?.desktop?.cols?.length;exports.getResponsiveStateValue=getResponsiveStateValue,exports.getResponsiveValue=getResponsiveValue,exports.getResponsiveValueByScreen=getResponsiveValueByScreen,exports.isColumnDirectionExist=isColumnDirectionExist;
+'use strict';
+
+const getResponsiveValue = (input, k)=>{
+    if (!k) return {};
+    return {
+        desktop: input?.desktop?.[k],
+        tablet: input?.tablet?.[k],
+        mobile: input?.mobile?.[k]
+    };
+};
+const getResponsiveStateValue = (k, input)=>{
+    return {
+        desktop: input?.desktop?.[k],
+        tablet: input?.tablet?.[k],
+        mobile: input?.mobile?.[k]
+    };
+};
+const getResponsiveValueByScreen = (value, breakpoint, defaultValue)=>{
+    switch(breakpoint){
+        case 'tablet':
+            return value?.tablet ?? value?.desktop ?? defaultValue;
+        case 'mobile':
+            return value?.mobile ?? value?.tablet ?? value?.desktop ?? defaultValue;
+        default:
+            return value?.desktop ?? defaultValue;
+    }
+};
+const isColumnDirectionExist = (layout, breakpoint)=>{
+    if (breakpoint === 'desktop' || breakpoint === 'tablet') return false;
+    return layout?.[breakpoint]?.cols?.length !== layout?.desktop?.cols?.length;
+};
+
+exports.getResponsiveStateValue = getResponsiveStateValue;
+exports.getResponsiveValue = getResponsiveValue;
+exports.getResponsiveValueByScreen = getResponsiveValueByScreen;
+exports.isColumnDirectionExist = isColumnDirectionExist;

package/dist/cjs/helpers/get-shortname.js

@@ -1 +1,92 @@
-"use strict";const globalSortNameMapping={"typography-heading-1-fontFamily":"h1-ff","typography-heading-1-fontSize":"h1-size","typography-heading-1-fontWeight":"h1-weight","typography-heading-1-lineHeight":"h1-lh","typography-heading-1-letterSpacing":"h1-ls","typography-heading-1-fontStyle":"h1-fs","typography-heading-2-fontFamily":"h2-ff","typography-heading-2-fontSize":"h2-size","typography-heading-2-fontWeight":"h2-weight","typography-heading-2-lineHeight":"h2-lh","typography-heading-2-letterSpacing":"h2-ls","typography-heading-2-fontStyle":"h2-fs","typography-heading-3-fontFamily":"h3-ff","typography-heading-3-fontSize":"h3-size","typography-heading-3-fontWeight":"h3-weight","typography-heading-3-lineHeight":"h3-lh","typography-heading-3-letterSpacing":"h3-ls","typography-heading-3-fontStyle":"h3-fs","typography-subheading-1-fontFamily":"sh1-ff","typography-subheading-1-fontSize":"sh1-size","typography-subheading-1-fontWeight":"sh1-weight","typography-subheading-1-lineHeight":"sh1-lh","typography-subheading-1-letterSpacing":"sh1-ls","typography-subheading-1-fontStyle":"sh1-fs","typography-subheading-2-fontFamily":"sh2-ff","typography-subheading-2-fontSize":"sh2-size","typography-subheading-2-fontWeight":"sh2-weight","typography-subheading-2-lineHeight":"sh2-lh","typography-subheading-2-letterSpacing":"sh2-ls","typography-subheading-2-fontStyle":"sh2-fs","typography-subheading-3-fontFamily":"sh3-ff","typography-subheading-3-fontSize":"sh3-size","typography-subheading-3-fontWeight":"sh3-weight","typography-subheading-3-lineHeight":"sh3-lh","typography-subheading-3-letterSpacing":"sh3-ls","typography-subheading-3-fontStyle":"sh3-fs","typography-paragraph-1-fontFamily":"p1-ff","typography-paragraph-1-fontSize":"p1-size","typography-paragraph-1-fontWeight":"p1-weight","typography-paragraph-1-lineHeight":"p1-lh","typography-paragraph-1-letterSpacing":"p1-ls","typography-paragraph-1-fontStyle":"p1-fs","typography-paragraph-2-fontFamily":"p2-ff","typography-paragraph-2-fontSize":"p2-size","typography-paragraph-2-fontWeight":"p2-weight","typography-paragraph-2-lineHeight":"p2-lh","typography-paragraph-2-letterSpacing":"p2-ls","typography-paragraph-2-fontStyle":"p2-fs","typography-paragraph-3-fontFamily":"p3-ff","typography-paragraph-3-fontSize":"p3-size","typography-paragraph-3-fontWeight":"p3-weight","typography-paragraph-3-lineHeight":"p3-lh","typography-paragraph-3-letterSpacing":"p3-ls","typography-paragraph-3-fontStyle":"p3-fs","color-brand":"c-brand","color-highlight":"c-highlight","color-text-1":"c-text-1","color-text-2":"c-text-2","color-text-3":"c-text-3","color-bg-1":"c-bg-1","color-bg-2":"c-bg-2","color-bg-3":"c-bg-3","color-line-1":"c-line-1","color-line-2":"c-line-2","color-line-3":"c-line-3","color-success":"c-success","color-info":"c-info","color-warning":"c-warning","color-error":"c-error","spacing-xxs":"s-xxs","spacing-xs":"s-xs","spacing-s":"s-s","spacing-m":"s-m","spacing-l":"s-l","spacing-xl":"s-xl","spacing-2xl":"s-2xl","spacing-3xl":"s-3xl","spacing-4xl":"s-4xl","spacing-5xl":"s-5xl","container-width":"ct-w","container-padding":"ct-p","text-shadow":"ts","box-shadow":"shadow"};function getShortName(h){return globalSortNameMapping[h]||h}exports.getShortName=getShortName;
+'use strict';
+
+const globalSortNameMapping = {
+    'typography-heading-1-fontFamily': 'h1-ff',
+    'typography-heading-1-fontSize': 'h1-size',
+    'typography-heading-1-fontWeight': 'h1-weight',
+    'typography-heading-1-lineHeight': 'h1-lh',
+    'typography-heading-1-letterSpacing': 'h1-ls',
+    'typography-heading-1-fontStyle': 'h1-fs',
+    'typography-heading-2-fontFamily': 'h2-ff',
+    'typography-heading-2-fontSize': 'h2-size',
+    'typography-heading-2-fontWeight': 'h2-weight',
+    'typography-heading-2-lineHeight': 'h2-lh',
+    'typography-heading-2-letterSpacing': 'h2-ls',
+    'typography-heading-2-fontStyle': 'h2-fs',
+    'typography-heading-3-fontFamily': 'h3-ff',
+    'typography-heading-3-fontSize': 'h3-size',
+    'typography-heading-3-fontWeight': 'h3-weight',
+    'typography-heading-3-lineHeight': 'h3-lh',
+    'typography-heading-3-letterSpacing': 'h3-ls',
+    'typography-heading-3-fontStyle': 'h3-fs',
+    'typography-subheading-1-fontFamily': 'sh1-ff',
+    'typography-subheading-1-fontSize': 'sh1-size',
+    'typography-subheading-1-fontWeight': 'sh1-weight',
+    'typography-subheading-1-lineHeight': 'sh1-lh',
+    'typography-subheading-1-letterSpacing': 'sh1-ls',
+    'typography-subheading-1-fontStyle': 'sh1-fs',
+    'typography-subheading-2-fontFamily': 'sh2-ff',
+    'typography-subheading-2-fontSize': 'sh2-size',
+    'typography-subheading-2-fontWeight': 'sh2-weight',
+    'typography-subheading-2-lineHeight': 'sh2-lh',
+    'typography-subheading-2-letterSpacing': 'sh2-ls',
+    'typography-subheading-2-fontStyle': 'sh2-fs',
+    'typography-subheading-3-fontFamily': 'sh3-ff',
+    'typography-subheading-3-fontSize': 'sh3-size',
+    'typography-subheading-3-fontWeight': 'sh3-weight',
+    'typography-subheading-3-lineHeight': 'sh3-lh',
+    'typography-subheading-3-letterSpacing': 'sh3-ls',
+    'typography-subheading-3-fontStyle': 'sh3-fs',
+    'typography-paragraph-1-fontFamily': 'p1-ff',
+    'typography-paragraph-1-fontSize': 'p1-size',
+    'typography-paragraph-1-fontWeight': 'p1-weight',
+    'typography-paragraph-1-lineHeight': 'p1-lh',
+    'typography-paragraph-1-letterSpacing': 'p1-ls',
+    'typography-paragraph-1-fontStyle': 'p1-fs',
+    'typography-paragraph-2-fontFamily': 'p2-ff',
+    'typography-paragraph-2-fontSize': 'p2-size',
+    'typography-paragraph-2-fontWeight': 'p2-weight',
+    'typography-paragraph-2-lineHeight': 'p2-lh',
+    'typography-paragraph-2-letterSpacing': 'p2-ls',
+    'typography-paragraph-2-fontStyle': 'p2-fs',
+    'typography-paragraph-3-fontFamily': 'p3-ff',
+    'typography-paragraph-3-fontSize': 'p3-size',
+    'typography-paragraph-3-fontWeight': 'p3-weight',
+    'typography-paragraph-3-lineHeight': 'p3-lh',
+    'typography-paragraph-3-letterSpacing': 'p3-ls',
+    'typography-paragraph-3-fontStyle': 'p3-fs',
+    'color-brand': 'c-brand',
+    'color-highlight': 'c-highlight',
+    'color-text-1': 'c-text-1',
+    'color-text-2': 'c-text-2',
+    'color-text-3': 'c-text-3',
+    'color-bg-1': 'c-bg-1',
+    'color-bg-2': 'c-bg-2',
+    'color-bg-3': 'c-bg-3',
+    'color-line-1': 'c-line-1',
+    'color-line-2': 'c-line-2',
+    'color-line-3': 'c-line-3',
+    'color-success': 'c-success',
+    'color-info': 'c-info',
+    'color-warning': 'c-warning',
+    'color-error': 'c-error',
+    'spacing-xxs': 's-xxs',
+    'spacing-xs': 's-xs',
+    'spacing-s': 's-s',
+    'spacing-m': 's-m',
+    'spacing-l': 's-l',
+    'spacing-xl': 's-xl',
+    'spacing-2xl': 's-2xl',
+    'spacing-3xl': 's-3xl',
+    'spacing-4xl': 's-4xl',
+    'spacing-5xl': 's-5xl',
+    'container-width': 'ct-w',
+    'container-padding': 'ct-p',
+    'text-shadow': 'ts',
+    'box-shadow': 'shadow'
+};
+function getShortName(name) {
+    return globalSortNameMapping[name] || name;
+}
+
+exports.getShortName = getShortName;

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

@@ -1 +1,61 @@
-"use strict";var constant=require("../web-components/src/helpers/styles/constant.js");const TEXT_TOTAL_SPACING=3,composePostionIconList=(e,t,o)=>{let i={};return composePositionLineHeight({compose:i,lineHeight:e,device:"desktop",position:t,iconWidth:o}),composePositionLineHeight({compose:i,lineHeight:e,device:"tablet",position:t,iconWidth:o}),composePositionLineHeight({compose:i,lineHeight:e,device:"mobile",position:t,iconWidth:o}),i},composePositionLineHeight=({compose:e,lineHeight:t,device:o,position:i,iconWidth:s})=>{let n=i?.[o],c=s?.[o];if(n){let i=constant.devicesMapping[o]??"";if("center"===n)e.wrapper={...e.wrapper,[`--ai${i}`]:"center"},e.content={...e.content,[`--pos${i}`]:"static"};else if(c){let o=parseFloat(t.replaceAll(/[a-zA-Z]/g,""))/2+3-c/2;e.wrapper={...e.wrapper,[`--ai${i}`]:"flex-start"},e.content={...e.content,[`--top${i}`]:`${Math.max(0,Math.ceil(o))}px`,[`--pos${i}`]:"relative"}}}};exports.composePositionLineHeight=composePositionLineHeight,exports.composePostionIconList=composePostionIconList;
+'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;