@gem-sdk/core 1.14.0-dev.573 → 1.14.0-dev.575

package/dist/cjs/components/Render.liquid.js

@@ -1,23 +1,23 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("react"),require("react/jsx-runtime"),require("zustand"),require("swr"),require("@gem-sdk/adapter-shopify"),require("swr/mutation"),require("vanilla-lazyload"),require("../hooks/useCartUI.js"),require("react-transition-group"),require("@gem-sdk/core");var render=require("../helpers/render.js"),convert=require("../helpers/convert.js"),composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js");const componentsRenderWithParentId=["CarouselItem"],componentTexts=["Text","Heading"],componentIconList=["IconListV2","IconList"],componentUsingAdvanced=["IconList"],Render=({uid:e,builder:t,components:r,parentId:n,extraFiles:d={},pageContext:i,...s})=>{let a=t[e],l=r[a?.tag];if(!l)return console.log("Miss component: ",a),{liquid:"",extraFiles:d};if(!a||a?.type==="section")return{liquid:"",extraFiles:d};{let d={extraFiles:{}},c=composeAdvanceStyle.composeAdvanceStyle(a.advanced,a.tag),o="";o=constant.disableWrap.includes(a.tag)?render.RenderIf(a?.childrens?.length,()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,style:c,advanced:a.advanced,parentId:componentsRenderWithParentId.includes(a.tag)?n:null,pageContext:i,...s,rawChildren:a.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:d,pageContext:i})),children:constant.customRenderChildren.includes(a.tag)?"":WrapRenderChildren({uid:e,customProps:d},a.childrens.map(e=>RenderChildren({uid:e,builder:t,components:r,customProps:d,parentTag:a.tag,pageContext:i})))}),()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,advanced:a.advanced,style:c,isText:!!componentTexts.includes(a.tag)||null,parentId:componentsRenderWithParentId.includes(a.tag)?n:null,pageContext:i,...s})):render.template`<div style="${componentIconList.includes(a.tag)?"":c}" class="${a.uid} ${a?.childrens?.length||"IconListItemHoz"!==a.tag?"":"hidden"}">
-      ${render.RenderIf(a?.childrens?.length,()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,advanced:{...componentUsingAdvanced.includes(a.tag)?a?.advanced:{},cssClass:a?.advanced?.cssClass},pageContext:i,...s,rawChildren:a.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:d,pageContext:i})),children:constant.customRenderChildren.includes(a.tag)?"":WrapRenderChildren({uid:e,customProps:d},a.childrens.map(e=>RenderChildren({uid:e,builder:t,components:r,customProps:d,parentTag:a.tag,pageContext:i})))}),()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,advanced:{cssClass:a?.advanced?.cssClass},pageContext:i,isText:!!componentTexts.includes(a.tag)||null,style:componentIconList.includes(a.tag)?c:null,...s}))}
-      </div>`;let{cssCode:u,jsCode:p}=RenderCustomCode(a);return u&&(o+=u),p&&(o+=p),{liquid:o=appendAnimation(a,o),extraFiles:d.extraFiles}}},RenderCustomCode=e=>{let{css:t,javascript:r,rootClassName:n}=e.advanced?.editorData||{},d=t?.replaceAll(n,e.uid),i=r?.replaceAll(n,e.uid),s=render.RenderIf(!!t,render.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var makeStyle=require("../helpers/make-style.js");require("react"),require("react/jsx-runtime"),require("zustand"),require("swr"),require("@gem-sdk/adapter-shopify"),require("swr/mutation"),require("vanilla-lazyload"),require("../hooks/useCartUI.js"),require("react-transition-group"),require("@gem-sdk/core");var render=require("../helpers/render.js"),convert=require("../helpers/convert.js"),composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js");const componentsRenderWithParentId=["CarouselItem"],componentTexts=["Text","Heading"],componentIconList=["IconListV2","IconList"],componentUsingAdvanced=["IconList"],Render=({uid:e,builder:t,components:r,parentId:n,extraFiles:i={},pageContext:d,...s})=>{let a=t[e],l=r[a?.tag];if(!l)return console.log("Miss component: ",a),{liquid:"",extraFiles:i};if(!a||a?.type==="section")return{liquid:"",extraFiles:i};{let i={extraFiles:{}},o=composeAdvanceStyle.composeAdvanceStyle(a.advanced,a.tag),c="";c=constant.disableWrap.includes(a.tag)?render.RenderIf(a?.childrens?.length,()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,style:o,advanced:a.advanced,parentId:componentsRenderWithParentId.includes(a.tag)?n:null,pageContext:d,...s,rawChildren:a.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:i,pageContext:d})),children:constant.customRenderChildren.includes(a.tag)?"":WrapRenderChildren({uid:e,customProps:i},a.childrens.map(e=>RenderChildren({uid:e,builder:t,components:r,customProps:i,parentTag:a.tag,pageContext:d})))}),()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,advanced:a.advanced,style:o,isText:!!componentTexts.includes(a.tag)||null,parentId:componentsRenderWithParentId.includes(a.tag)?n:null,pageContext:d,...s})):render.template`<div style="${componentIconList.includes(a.tag)?"":o}" class="${a.uid} ${a?.childrens?.length||"IconListItemHoz"!==a.tag?"":"hidden"}">
+      ${render.RenderIf(a?.childrens?.length,()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,advanced:{...componentUsingAdvanced.includes(a.tag)?a?.advanced:{},cssClass:a?.advanced?.cssClass},pageContext:d,...s,rawChildren:a.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:i,pageContext:d})),children:constant.customRenderChildren.includes(a.tag)?"":WrapRenderChildren({uid:e,customProps:i},a.childrens.map(e=>RenderChildren({uid:e,builder:t,components:r,customProps:i,parentTag:a.tag,pageContext:d})))}),()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,advanced:{cssClass:a?.advanced?.cssClass},pageContext:d,isText:!!componentTexts.includes(a.tag)||null,style:componentIconList.includes(a.tag)?o:null,...s}))}
+      </div>`;let{cssCode:p,jsCode:u}=RenderCustomCode(a);return p&&(c+=p),u&&(c+=u),{liquid:c=appendAnimation(a,c),extraFiles:i.extraFiles}}},RenderCustomCode=e=>{let{css:t,javascript:r,rootClassName:n}=e.advanced?.editorData||{},i=t?.replaceAll(n,e.uid),d=r?.replaceAll(n,e.uid),s=render.RenderIf(!!t,render.template`
       <style
         id="${`custom-css-${e?.uid}`}"
-      >${d}</style>
+      >${i}</style>
     `),a=render.RenderIf(!!r,render.template`
       <script
         id="${`custom-js-${e?.uid}`}"
       >
         try {
-          ${i}
+          ${d}
         } catch(err){}
       </script>
-    `);return{cssCode:s,jsCode:a}},appendAnimation=(e,t)=>{let{advanced:r,tag:n}=e,{animation:d}=r??{},i=d?.desktop?.enabled||d?.tablet?.enabled||d?.mobile?.enabled;if(!i||!d?.desktop?.triggerConfig)return t;let s={all:"Section"===n?"":"inherit"};return render.template`
+    `);return{cssCode:s,jsCode:a}},appendAnimation=(e,t)=>{let{advanced:r,tag:n}=e,{animation:i}=r??{},d=i?.desktop?.enabled||i?.tablet?.enabled||i?.mobile?.enabled;if(!d||!i?.desktop?.triggerConfig)return t;let s=(e,t)=>e?.triggerConfig?.[t]?.animation??"none",a=e=>{if("desktop"===e);else if("tablet"===e)return i?.tablet??i?.desktop;else if("mobile"===e)return i?.mobile??i?.tablet??i?.desktop;return i?.desktop},l=e=>+!(a(e)?.enabled&&"none"!==s(a(e),"appear")),o={desktop:l("desktop"),tablet:l("tablet"),mobile:l("mobile")},c={all:"Section"===n?"":"inherit"};return render.template`
   ${render.RenderIf(convert.isLocalEnv,'<script src="{{ \'gp-animation.js\' | asset_url }}" defer="defer"></script>',`<script src="${convert.baseAssetURL}/assets/gp-animation.js" defer="defer"></script>`)}
   <gp-animation
-    gp-data='${JSON.stringify({config:d,tag:n})}'
-    style="${{...s}}"
+    gp-data='${JSON.stringify({config:i,tag:n})}'
+    style="${{...c}}"
   >
-    <div style="${{...s,opacity:0}}">${t}</div>
+    <div style="${{...makeStyle.makeStyleResponsive("op",o)}}">${t}</div>
   </gp-animation>
-  `},RenderChildren=e=>{let t=Render(e);for(let r in t.extraFiles)Object.prototype.hasOwnProperty.call(t.extraFiles,r)&&(e.customProps.extraFiles[r]=t.extraFiles[r]);let r=new TextEncoder,n=t?.liquid?r.encode(t.liquid).length:0;if(Math.ceil(n/1024)>=180){let r=`gp-section-snippet-${e.uid}`;return e.customProps.extraFiles[r]=t.liquid,`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`}return t.liquid},WrapRenderChildren=({uid:e,customProps:t},r)=>{let n="";if(r?.length)for(let d=0;d<r.length;d++){let i=r[d];if(i){let r=n+i,s=new TextEncoder,a=r?s.encode(r).length:0;if(Math.ceil(a/1024)>=180){let r=`gp-section-snippet-${e+d}`;t.extraFiles[r]=i,n+=`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`}else n+=i}}return n};exports.RenderChildren=RenderChildren,exports.WrapRenderChildren=WrapRenderChildren,exports.default=Render;
+  `},RenderChildren=e=>{let t=Render(e);for(let r in t.extraFiles)Object.prototype.hasOwnProperty.call(t.extraFiles,r)&&(e.customProps.extraFiles[r]=t.extraFiles[r]);let r=new TextEncoder,n=t?.liquid?r.encode(t.liquid).length:0;if(Math.ceil(n/1024)>=180){let r=`gp-section-snippet-${e.uid}`;return e.customProps.extraFiles[r]=t.liquid,`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`}return t.liquid},WrapRenderChildren=({uid:e,customProps:t},r)=>{let n="";if(r?.length)for(let i=0;i<r.length;i++){let d=r[i];if(d){let r=n+d,s=new TextEncoder,a=r?s.encode(r).length:0;if(Math.ceil(a/1024)>=180){let r=`gp-section-snippet-${e+i}`;t.extraFiles[r]=d,n+=`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`}else n+=d}}return n};exports.RenderChildren=RenderChildren,exports.WrapRenderChildren=WrapRenderChildren,exports.default=Render;

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

@@ -1 +1 @@
-"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:s,type:o,suffix:a=""})=>{let{top:r,left:t,bottom:i,right:c}=s;r&&(e[`--${o}t${a}`]=r),t&&(e[`--${o}l${a}`]=t),i&&(e[`--${o}b${a}`]=i),c&&(e[`--${o}r${a}`]=c)},composeSpacingV2=({source:e,spacing:s,suffix:o=""})=>{if(s&&s.margin){let{top:a,left:r,bottom:t,right:i}=s.margin;a&&(e[`--mt${o}`]=a),r&&(e[`--ml${o}`]="0px"===r?"auto":r),t&&(e[`--mb${o}`]=t),i&&(e[`--mr${o}`]="0px"===i?"auto":i)}if(s&&s.padding){let{top:a,left:r,bottom:t,right:i}=s.padding;a&&(e[`--pt${o}`]=a),r&&(e[`--pl${o}`]=r),t&&(e[`--pb${o}`]=t),i&&(e[`--pr${o}`]=i)}},getAttrValue=(e,s,o)=>{if(null!=s)switch(e){case"bgc":case"c":return colors.isColor(s.toString())?s:`var(--g-c-${s})`;case"d":if(!s)return"none";if(s&&o&&constant.layoutComponent.includes(o))return"grid";return"block";default:return s}};function composeAdvanceStyle(e,s){if(!e)return{};let o={},a=["desktop","tablet","mobile"],r=["hover","normal"];return Object.keys(e).forEach(t=>{let i=e[t];if("cssClass"===t||null==i)return;let c=e.hasBoxShadow?e.hasBoxShadow:{};if("object"==typeof i){if(Array.isArray(i))return;Object.keys(i).forEach(d=>{if(a.includes(d)){let e=i[d];if(void 0!==e){if("border"===t&&Object.assign(o,borders.handleConvertBorderStyle(i),borders.handleConvertBorderWidth(i),borders.handleConvertBorderColor(i)),"rounded"===t&&Object.assign(o,radius.composeRadius(i)),"desktop"===d)switch(t){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});break;case"m":case"p":break;default:o[`--${t}`]=getAttrValue(t,e,s)}else switch(t){case"padding":composeSpacing({source:o,spacing:e,type:"p",suffix:`-${d}`});break;case"margin":composeSpacing({source:o,spacing:e,type:"m",suffix:`-${d}`});break;case"spacing-setting":composeSpacingV2({source:o,spacing:e,suffix:`-${d}`});break;case"m":case"p":break;default:o[`--${t}-${d}`]=getAttrValue(t,e,s)}}}else if(r.includes(d))switch(t){case"hasBoxShadow":break;case"boxShadow":Object.assign(o,shadow.getStyleShadowState(i,"box-shadow",c))}else"border"===t&&("none"===i.border&&(i.border="solid",i.color="#121212",i.isCustom=!0,i.width="0px",i.position="all"),Object.assign(o,borders.getBorderStyle(i))),"rounded"===t&&Object.assign(o,radius.getCornerCSSFromGlobal(i)),"hasBoxShadow"===t&&Object.assign(o,shadow.getStyleShadow({value:e.boxShadow,styleAppliedFor:"box-shadow",isEnableShadow:e.hasBoxShadow})),"boxShadow"===t&&Object.assign(o,shadow.getStyleShadow({value:i,styleAppliedFor:"box-shadow",isEnableShadow:e.hasBoxShadow}))})}else o[`--${t}`]=getAttrValue(t,i,s),"hasBoxShadow"===t&&e.boxShadow&&Object.assign(o,shadow.getStyleShadow({value:e.boxShadow,styleAppliedFor:"box-shadow",isEnableShadow:e.hasBoxShadow}))}),o}const splitStyle=(e,s={})=>{let o=e.map(e=>makeStyle.makeStyleKey(e)).flat(),a=Object.keys(s).filter(e=>o.includes(e)),r=a.reduce((e,o)=>({...e,[o]:s[o]}),{}),t=Object.keys(s).filter(e=>!a.includes(e)).reduce((e,o)=>({...e,[o]:s[o]}),{});return[r,t]};exports.composeAdvanceStyle=composeAdvanceStyle,exports.splitStyle=splitStyle;
+"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:o,type:s,suffix:a=""})=>{let{top:t,left:r,bottom:c,right:i}=o;t&&(e[`--${s}t${a}`]=t),r&&(e[`--${s}l${a}`]=r),c&&(e[`--${s}b${a}`]=c),i&&(e[`--${s}r${a}`]=i)},composeSpacingV2=({source:e,spacing:o,suffix:s="",tag:a=""})=>{if(o&&o.margin){let{top:t,left:r,bottom:c,right:i}=o.margin;t&&(e[`--mt${s}`]=t),r&&(e[`--ml${s}`]=constant.layoutComponent.includes(a)&&"0px"===r?"auto":r),c&&(e[`--mb${s}`]=c),i&&(e[`--mr${s}`]=constant.layoutComponent.includes(a)&&"0px"===i?"auto":i)}if(o&&o.padding){let{top:a,left:t,bottom:r,right:c}=o.padding;a&&(e[`--pt${s}`]=a),t&&(e[`--pl${s}`]=t),r&&(e[`--pb${s}`]=r),c&&(e[`--pr${s}`]=c)}},getAttrValue=(e,o,s)=>{if(null!=o)switch(e){case"bgc":case"c":return colors.isColor(o.toString())?o:`var(--g-c-${o})`;case"d":if(!o)return"none";if(o&&s&&constant.layoutComponent.includes(s))return"grid";return"block";default:return o}};function composeAdvanceStyle(e,o){if(!e)return{};let s={},a=["desktop","tablet","mobile"],t=["hover","normal"];return Object.keys(e).forEach(r=>{let c=e[r];if("cssClass"===r||null==c)return;let i=e.hasBoxShadow?e.hasBoxShadow:{};if("object"==typeof c){if(Array.isArray(c))return;Object.keys(c).forEach(n=>{if(a.includes(n)){let e=c[n];if(void 0!==e){if("border"===r&&Object.assign(s,borders.handleConvertBorderStyle(c),borders.handleConvertBorderWidth(c),borders.handleConvertBorderColor(c)),"rounded"===r&&Object.assign(s,radius.composeRadius(c)),"desktop"===n)switch(r){case"padding":composeSpacing({source:s,spacing:e,type:"p"});break;case"margin":composeSpacing({source:s,spacing:e,type:"m"});break;case"spacing-setting":composeSpacingV2({source:s,spacing:e,tag:o});break;case"m":case"p":break;default:s[`--${r}`]=getAttrValue(r,e,o)}else switch(r){case"padding":composeSpacing({source:s,spacing:e,type:"p",suffix:`-${n}`});break;case"margin":composeSpacing({source:s,spacing:e,type:"m",suffix:`-${n}`});break;case"spacing-setting":composeSpacingV2({source:s,spacing:e,suffix:`-${n}`,tag:o});break;case"m":case"p":break;default:s[`--${r}-${n}`]=getAttrValue(r,e,o)}}}else if(t.includes(n))switch(r){case"hasBoxShadow":break;case"boxShadow":Object.assign(s,shadow.getStyleShadowState(c,"box-shadow",i))}else"border"===r&&("none"===c.border&&(c.border="solid",c.color="#121212",c.isCustom=!0,c.width="0px",c.position="all"),Object.assign(s,borders.getBorderStyle(c))),"rounded"===r&&Object.assign(s,radius.getCornerCSSFromGlobal(c)),"hasBoxShadow"===r&&Object.assign(s,shadow.getStyleShadow({value:e.boxShadow,styleAppliedFor:"box-shadow",isEnableShadow:e.hasBoxShadow})),"boxShadow"===r&&Object.assign(s,shadow.getStyleShadow({value:c,styleAppliedFor:"box-shadow",isEnableShadow:e.hasBoxShadow}))})}else s[`--${r}`]=getAttrValue(r,c,o),"hasBoxShadow"===r&&e.boxShadow&&Object.assign(s,shadow.getStyleShadow({value:e.boxShadow,styleAppliedFor:"box-shadow",isEnableShadow:e.hasBoxShadow}))}),s}const splitStyle=(e,o={})=>{let s=e.map(e=>makeStyle.makeStyleKey(e)).flat(),a=Object.keys(o).filter(e=>s.includes(e)),t=a.reduce((e,s)=>({...e,[s]:o[s]}),{}),r=Object.keys(o).filter(e=>!a.includes(e)).reduce((e,s)=>({...e,[s]:o[s]}),{});return[t,r]};exports.composeAdvanceStyle=composeAdvanceStyle,exports.splitStyle=splitStyle;

package/dist/esm/components/Render.liquid.js

@@ -1,23 +1,23 @@
-import"react";import"react/jsx-runtime";import"zustand";import"swr";import"@gem-sdk/adapter-shopify";import"swr/mutation";import"vanilla-lazyload";import"../hooks/useCartUI.js";import"react-transition-group";import"@gem-sdk/core";import{RenderIf as e,template as t}from"../helpers/render.js";import{baseAssetURL as n,isLocalEnv as r}from"../helpers/convert.js";import{composeAdvanceStyle as i}from"../helpers/compose-advance-style.js";import{disableWrap as s,customRenderChildren as d}from"./constant.js";let componentsRenderWithParentId=["CarouselItem"],componentTexts=["Text","Heading"],componentIconList=["IconListV2","IconList"],componentUsingAdvanced=["IconList"],Render=({uid:n,builder:r,components:a,parentId:l,extraFiles:o={},pageContext:c,...p})=>{let u=r[n],m=a[u?.tag];if(!m)return console.log("Miss component: ",u),{liquid:"",extraFiles:o};if(!u||u?.type==="section")return{liquid:"",extraFiles:o};{let o={extraFiles:{}},g=i(u.advanced,u.tag),h="";h=s.includes(u.tag)?e(u?.childrens?.length,()=>m({builderProps:{uid:n,builderData:u},styles:u.styles,setting:u.settings,style:g,advanced:u.advanced,parentId:componentsRenderWithParentId.includes(u.tag)?l:null,pageContext:c,...p,rawChildren:u.childrens.map(e=>({...r[e],uid:e,builder:r,components:a,customProps:o,pageContext:c})),children:d.includes(u.tag)?"":WrapRenderChildren({uid:n,customProps:o},u.childrens.map(e=>RenderChildren({uid:e,builder:r,components:a,customProps:o,parentTag:u.tag,pageContext:c})))}),()=>m({builderProps:{uid:n,builderData:u},styles:u.styles,setting:u.settings,advanced:u.advanced,style:g,isText:!!componentTexts.includes(u.tag)||null,parentId:componentsRenderWithParentId.includes(u.tag)?l:null,pageContext:c,...p})):t`<div style="${componentIconList.includes(u.tag)?"":g}" class="${u.uid} ${u?.childrens?.length||"IconListItemHoz"!==u.tag?"":"hidden"}">
-      ${e(u?.childrens?.length,()=>m({builderProps:{uid:n,builderData:u},styles:u.styles,setting:u.settings,advanced:{...componentUsingAdvanced.includes(u.tag)?u?.advanced:{},cssClass:u?.advanced?.cssClass},pageContext:c,...p,rawChildren:u.childrens.map(e=>({...r[e],uid:e,builder:r,components:a,customProps:o,pageContext:c})),children:d.includes(u.tag)?"":WrapRenderChildren({uid:n,customProps:o},u.childrens.map(e=>RenderChildren({uid:e,builder:r,components:a,customProps:o,parentTag:u.tag,pageContext:c})))}),()=>m({builderProps:{uid:n,builderData:u},styles:u.styles,setting:u.settings,advanced:{cssClass:u?.advanced?.cssClass},pageContext:c,isText:!!componentTexts.includes(u.tag)||null,style:componentIconList.includes(u.tag)?g:null,...p}))}
-      </div>`;let{cssCode:f,jsCode:v}=RenderCustomCode(u);return f&&(h+=f),v&&(h+=v),{liquid:h=appendAnimation(u,h),extraFiles:o.extraFiles}}},RenderCustomCode=n=>{let{css:r,javascript:i,rootClassName:s}=n.advanced?.editorData||{},d=r?.replaceAll(s,n.uid),a=i?.replaceAll(s,n.uid),l=e(!!r,t`
+import{makeStyleResponsive as e}from"../helpers/make-style.js";import"react";import"react/jsx-runtime";import"zustand";import"swr";import"@gem-sdk/adapter-shopify";import"swr/mutation";import"vanilla-lazyload";import"../hooks/useCartUI.js";import"react-transition-group";import"@gem-sdk/core";import{RenderIf as t,template as n}from"../helpers/render.js";import{baseAssetURL as r,isLocalEnv as i}from"../helpers/convert.js";import{composeAdvanceStyle as s}from"../helpers/compose-advance-style.js";import{disableWrap as d,customRenderChildren as a}from"./constant.js";let componentsRenderWithParentId=["CarouselItem"],componentTexts=["Text","Heading"],componentIconList=["IconListV2","IconList"],componentUsingAdvanced=["IconList"],Render=({uid:e,builder:r,components:i,parentId:l,extraFiles:o={},pageContext:c,...p})=>{let u=r[e],m=i[u?.tag];if(!m)return console.log("Miss component: ",u),{liquid:"",extraFiles:o};if(!u||u?.type==="section")return{liquid:"",extraFiles:o};{let o={extraFiles:{}},g=s(u.advanced,u.tag),h="";h=d.includes(u.tag)?t(u?.childrens?.length,()=>m({builderProps:{uid:e,builderData:u},styles:u.styles,setting:u.settings,style:g,advanced:u.advanced,parentId:componentsRenderWithParentId.includes(u.tag)?l:null,pageContext:c,...p,rawChildren:u.childrens.map(e=>({...r[e],uid:e,builder:r,components:i,customProps:o,pageContext:c})),children:a.includes(u.tag)?"":WrapRenderChildren({uid:e,customProps:o},u.childrens.map(e=>RenderChildren({uid:e,builder:r,components:i,customProps:o,parentTag:u.tag,pageContext:c})))}),()=>m({builderProps:{uid:e,builderData:u},styles:u.styles,setting:u.settings,advanced:u.advanced,style:g,isText:!!componentTexts.includes(u.tag)||null,parentId:componentsRenderWithParentId.includes(u.tag)?l:null,pageContext:c,...p})):n`<div style="${componentIconList.includes(u.tag)?"":g}" class="${u.uid} ${u?.childrens?.length||"IconListItemHoz"!==u.tag?"":"hidden"}">
+      ${t(u?.childrens?.length,()=>m({builderProps:{uid:e,builderData:u},styles:u.styles,setting:u.settings,advanced:{...componentUsingAdvanced.includes(u.tag)?u?.advanced:{},cssClass:u?.advanced?.cssClass},pageContext:c,...p,rawChildren:u.childrens.map(e=>({...r[e],uid:e,builder:r,components:i,customProps:o,pageContext:c})),children:a.includes(u.tag)?"":WrapRenderChildren({uid:e,customProps:o},u.childrens.map(e=>RenderChildren({uid:e,builder:r,components:i,customProps:o,parentTag:u.tag,pageContext:c})))}),()=>m({builderProps:{uid:e,builderData:u},styles:u.styles,setting:u.settings,advanced:{cssClass:u?.advanced?.cssClass},pageContext:c,isText:!!componentTexts.includes(u.tag)||null,style:componentIconList.includes(u.tag)?g:null,...p}))}
+      </div>`;let{cssCode:f,jsCode:b}=RenderCustomCode(u);return f&&(h+=f),b&&(h+=b),{liquid:h=appendAnimation(u,h),extraFiles:o.extraFiles}}},RenderCustomCode=e=>{let{css:r,javascript:i,rootClassName:s}=e.advanced?.editorData||{},d=r?.replaceAll(s,e.uid),a=i?.replaceAll(s,e.uid),l=t(!!r,n`
       <style
-        id="${`custom-css-${n?.uid}`}"
+        id="${`custom-css-${e?.uid}`}"
       >${d}</style>
-    `),o=e(!!i,t`
+    `),o=t(!!i,n`
       <script
-        id="${`custom-js-${n?.uid}`}"
+        id="${`custom-js-${e?.uid}`}"
       >
         try {
           ${a}
         } catch(err){}
       </script>
-    `);return{cssCode:l,jsCode:o}},appendAnimation=(i,s)=>{let{advanced:d,tag:a}=i,{animation:l}=d??{},o=l?.desktop?.enabled||l?.tablet?.enabled||l?.mobile?.enabled;if(!o||!l?.desktop?.triggerConfig)return s;let c={all:"Section"===a?"":"inherit"};return t`
-  ${e(r,'<script src="{{ \'gp-animation.js\' | asset_url }}" defer="defer"></script>',`<script src="${n}/assets/gp-animation.js" defer="defer"></script>`)}
+    `);return{cssCode:l,jsCode:o}},appendAnimation=(s,d)=>{let{advanced:a,tag:l}=s,{animation:o}=a??{},c=o?.desktop?.enabled||o?.tablet?.enabled||o?.mobile?.enabled;if(!c||!o?.desktop?.triggerConfig)return d;let p=(e,t)=>e?.triggerConfig?.[t]?.animation??"none",u=e=>{if("desktop"===e);else if("tablet"===e)return o?.tablet??o?.desktop;else if("mobile"===e)return o?.mobile??o?.tablet??o?.desktop;return o?.desktop},m=e=>+!(u(e)?.enabled&&"none"!==p(u(e),"appear")),g={desktop:m("desktop"),tablet:m("tablet"),mobile:m("mobile")},h={all:"Section"===l?"":"inherit"};return n`
+  ${t(i,'<script src="{{ \'gp-animation.js\' | asset_url }}" defer="defer"></script>',`<script src="${r}/assets/gp-animation.js" defer="defer"></script>`)}
   <gp-animation
-    gp-data='${JSON.stringify({config:l,tag:a})}'
-    style="${{...c}}"
+    gp-data='${JSON.stringify({config:o,tag:l})}'
+    style="${{...h}}"
   >
-    <div style="${{...c,opacity:0}}">${s}</div>
+    <div style="${{...e("op",g)}}">${d}</div>
   </gp-animation>
   `},RenderChildren=e=>{let t=Render(e);for(let n in t.extraFiles)Object.prototype.hasOwnProperty.call(t.extraFiles,n)&&(e.customProps.extraFiles[n]=t.extraFiles[n]);let n=new TextEncoder,r=t?.liquid?n.encode(t.liquid).length:0;if(Math.ceil(r/1024)>=180){let n=`gp-section-snippet-${e.uid}`;return e.customProps.extraFiles[n]=t.liquid,`{% render '${n}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`}return t.liquid},WrapRenderChildren=({uid:e,customProps:t},n)=>{let r="";if(n?.length)for(let i=0;i<n.length;i++){let s=n[i];if(s){let n=r+s,d=new TextEncoder,a=n?d.encode(n).length:0;if(Math.ceil(a/1024)>=180){let n=`gp-section-snippet-${e+i}`;t.extraFiles[n]=s,r+=`{% render '${n}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`}else r+=s}}return r};export{RenderChildren,WrapRenderChildren,Render as default};

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

@@ -1 +1 @@
-import{handleConvertBorderStyle as e,handleConvertBorderWidth as s,handleConvertBorderColor as a,getBorderStyle as o}from"./borders.js";import{isColor as t}from"./colors.js";import{layoutComponent as r}from"./constant.js";import{makeStyleKey as i}from"./make-style.js";import{composeRadius as c,getCornerCSSFromGlobal as n}from"./radius.js";import{getStyleShadowState as l,getStyleShadow as p}from"./shadow.js";let composeSpacing=({source:e,spacing:s,type:a,suffix:o=""})=>{let{top:t,left:r,bottom:i,right:c}=s;t&&(e[`--${a}t${o}`]=t),r&&(e[`--${a}l${o}`]=r),i&&(e[`--${a}b${o}`]=i),c&&(e[`--${a}r${o}`]=c)},composeSpacingV2=({source:e,spacing:s,suffix:a=""})=>{if(s&&s.margin){let{top:o,left:t,bottom:r,right:i}=s.margin;o&&(e[`--mt${a}`]=o),t&&(e[`--ml${a}`]="0px"===t?"auto":t),r&&(e[`--mb${a}`]=r),i&&(e[`--mr${a}`]="0px"===i?"auto":i)}if(s&&s.padding){let{top:o,left:t,bottom:r,right:i}=s.padding;o&&(e[`--pt${a}`]=o),t&&(e[`--pl${a}`]=t),r&&(e[`--pb${a}`]=r),i&&(e[`--pr${a}`]=i)}},getAttrValue=(e,s,a)=>{if(null!=s)switch(e){case"bgc":case"c":return t(s.toString())?s:`var(--g-c-${s})`;case"d":if(!s)return"none";if(s&&a&&r.includes(a))return"grid";return"block";default:return s}};function composeAdvanceStyle(t,r){if(!t)return{};let i={},d=["desktop","tablet","mobile"],b=["hover","normal"];return Object.keys(t).forEach(u=>{let g=t[u];if("cssClass"===u||null==g)return;let m=t.hasBoxShadow?t.hasBoxShadow:{};if("object"==typeof g){if(Array.isArray(g))return;Object.keys(g).forEach(h=>{if(d.includes(h)){let o=g[h];if(void 0!==o){if("border"===u&&Object.assign(i,e(g),s(g),a(g)),"rounded"===u&&Object.assign(i,c(g)),"desktop"===h)switch(u){case"padding":composeSpacing({source:i,spacing:o,type:"p"});break;case"margin":composeSpacing({source:i,spacing:o,type:"m"});break;case"spacing-setting":composeSpacingV2({source:i,spacing:o});break;case"m":case"p":break;default:i[`--${u}`]=getAttrValue(u,o,r)}else switch(u){case"padding":composeSpacing({source:i,spacing:o,type:"p",suffix:`-${h}`});break;case"margin":composeSpacing({source:i,spacing:o,type:"m",suffix:`-${h}`});break;case"spacing-setting":composeSpacingV2({source:i,spacing:o,suffix:`-${h}`});break;case"m":case"p":break;default:i[`--${u}-${h}`]=getAttrValue(u,o,r)}}}else if(b.includes(h))switch(u){case"hasBoxShadow":break;case"boxShadow":Object.assign(i,l(g,"box-shadow",m))}else"border"===u&&("none"===g.border&&(g.border="solid",g.color="#121212",g.isCustom=!0,g.width="0px",g.position="all"),Object.assign(i,o(g))),"rounded"===u&&Object.assign(i,n(g)),"hasBoxShadow"===u&&Object.assign(i,p({value:t.boxShadow,styleAppliedFor:"box-shadow",isEnableShadow:t.hasBoxShadow})),"boxShadow"===u&&Object.assign(i,p({value:g,styleAppliedFor:"box-shadow",isEnableShadow:t.hasBoxShadow}))})}else i[`--${u}`]=getAttrValue(u,g,r),"hasBoxShadow"===u&&t.boxShadow&&Object.assign(i,p({value:t.boxShadow,styleAppliedFor:"box-shadow",isEnableShadow:t.hasBoxShadow}))}),i}let splitStyle=(e,s={})=>{let a=e.map(e=>i(e)).flat(),o=Object.keys(s).filter(e=>a.includes(e)),t=o.reduce((e,a)=>({...e,[a]:s[a]}),{}),r=Object.keys(s).filter(e=>!o.includes(e)).reduce((e,a)=>({...e,[a]:s[a]}),{});return[t,r]};export{composeAdvanceStyle,splitStyle};
+import{handleConvertBorderStyle as e,handleConvertBorderWidth as s,handleConvertBorderColor as a,getBorderStyle as o}from"./borders.js";import{isColor as t}from"./colors.js";import{layoutComponent as r}from"./constant.js";import{makeStyleKey as i}from"./make-style.js";import{composeRadius as c,getCornerCSSFromGlobal as n}from"./radius.js";import{getStyleShadowState as l,getStyleShadow as p}from"./shadow.js";let composeSpacing=({source:e,spacing:s,type:a,suffix:o=""})=>{let{top:t,left:r,bottom:i,right:c}=s;t&&(e[`--${a}t${o}`]=t),r&&(e[`--${a}l${o}`]=r),i&&(e[`--${a}b${o}`]=i),c&&(e[`--${a}r${o}`]=c)},composeSpacingV2=({source:e,spacing:s,suffix:a="",tag:o=""})=>{if(s&&s.margin){let{top:t,left:i,bottom:c,right:n}=s.margin;t&&(e[`--mt${a}`]=t),i&&(e[`--ml${a}`]=r.includes(o)&&"0px"===i?"auto":i),c&&(e[`--mb${a}`]=c),n&&(e[`--mr${a}`]=r.includes(o)&&"0px"===n?"auto":n)}if(s&&s.padding){let{top:o,left:t,bottom:r,right:i}=s.padding;o&&(e[`--pt${a}`]=o),t&&(e[`--pl${a}`]=t),r&&(e[`--pb${a}`]=r),i&&(e[`--pr${a}`]=i)}},getAttrValue=(e,s,a)=>{if(null!=s)switch(e){case"bgc":case"c":return t(s.toString())?s:`var(--g-c-${s})`;case"d":if(!s)return"none";if(s&&a&&r.includes(a))return"grid";return"block";default:return s}};function composeAdvanceStyle(t,r){if(!t)return{};let i={},d=["desktop","tablet","mobile"],u=["hover","normal"];return Object.keys(t).forEach(b=>{let g=t[b];if("cssClass"===b||null==g)return;let m=t.hasBoxShadow?t.hasBoxShadow:{};if("object"==typeof g){if(Array.isArray(g))return;Object.keys(g).forEach(h=>{if(d.includes(h)){let o=g[h];if(void 0!==o){if("border"===b&&Object.assign(i,e(g),s(g),a(g)),"rounded"===b&&Object.assign(i,c(g)),"desktop"===h)switch(b){case"padding":composeSpacing({source:i,spacing:o,type:"p"});break;case"margin":composeSpacing({source:i,spacing:o,type:"m"});break;case"spacing-setting":composeSpacingV2({source:i,spacing:o,tag:r});break;case"m":case"p":break;default:i[`--${b}`]=getAttrValue(b,o,r)}else switch(b){case"padding":composeSpacing({source:i,spacing:o,type:"p",suffix:`-${h}`});break;case"margin":composeSpacing({source:i,spacing:o,type:"m",suffix:`-${h}`});break;case"spacing-setting":composeSpacingV2({source:i,spacing:o,suffix:`-${h}`,tag:r});break;case"m":case"p":break;default:i[`--${b}-${h}`]=getAttrValue(b,o,r)}}}else if(u.includes(h))switch(b){case"hasBoxShadow":break;case"boxShadow":Object.assign(i,l(g,"box-shadow",m))}else"border"===b&&("none"===g.border&&(g.border="solid",g.color="#121212",g.isCustom=!0,g.width="0px",g.position="all"),Object.assign(i,o(g))),"rounded"===b&&Object.assign(i,n(g)),"hasBoxShadow"===b&&Object.assign(i,p({value:t.boxShadow,styleAppliedFor:"box-shadow",isEnableShadow:t.hasBoxShadow})),"boxShadow"===b&&Object.assign(i,p({value:g,styleAppliedFor:"box-shadow",isEnableShadow:t.hasBoxShadow}))})}else i[`--${b}`]=getAttrValue(b,g,r),"hasBoxShadow"===b&&t.boxShadow&&Object.assign(i,p({value:t.boxShadow,styleAppliedFor:"box-shadow",isEnableShadow:t.hasBoxShadow}))}),i}let splitStyle=(e,s={})=>{let a=e.map(e=>i(e)).flat(),o=Object.keys(s).filter(e=>a.includes(e)),t=o.reduce((e,a)=>({...e,[a]:s[a]}),{}),r=Object.keys(s).filter(e=>!o.includes(e)).reduce((e,a)=>({...e,[a]:s[a]}),{});return[t,r]};export{composeAdvanceStyle,splitStyle};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.14.0-dev.573",
+  "version": "1.14.0-dev.575",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",