@gem-sdk/core 1.14.0-dev.571 → 1.14.0-dev.574

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/hooks/animation/useAnimationPreview.js

@@ -1 +1 @@
-"use strict";var react=require("react"),useAnimationTarget=require("./useAnimationTarget.js");const useAnimationPreview=({props:e,playAnimation:i,cancelAnimation:t,setAnimationOnFinish:r})=>{let{setToolbarActive:a}=useAnimationTarget.useAnimationTarget(e),n=react.useCallback(n=>{let{uid:u,isCancel:s}=n.detail;if(e.uid===u){if(t(),s){a(!0);return}i(),a(!1),r(()=>{a(!0)})}},[e.uid,t,i,r,a]);return{previewAnimation:n}};exports.useAnimationPreview=useAnimationPreview;
+"use strict";var react=require("react");const useAnimationPreview=({props:e,playAnimation:i,cancelAnimation:r,setAnimationOnFinish:t,setToolbarActive:a})=>{let u=react.useCallback(u=>{let{uid:n,isCancel:s}=u.detail;if(e.uid===n){if(r(),s){a(!0);return}i(),a(!1),t(()=>{a(!0)})}},[e.uid,r,i,a,t]);return{previewAnimation:u}};exports.useAnimationPreview=useAnimationPreview;

package/dist/cjs/hooks/animation/useAnimationTarget.js

@@ -1 +1 @@
-"use strict";var react=require("react"),useAnimationConfig=require("./useAnimationConfig.js");const SPACING_ACTIVE_ATTRIBUTE="data-spacing",TOOLBAR_ACTIVE_ATTRIBUTE="data-toolbar-active",OUTLINE_ACTIVE_ATTRIBUTE="data-outline-active",TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE="data-toolbar-add-active",useAnimationTarget=t=>{let{isEnabledAnimation:e}=useAnimationConfig.useAnimationConfig(t),r=t.tag,a=t.uid,T=react.useRef([]),o=react.useCallback(t=>{if(T.current)for(let e of T.current)t?(e.toolbar?.setAttribute(TOOLBAR_ACTIVE_ATTRIBUTE,"true"),e.outline?.setAttribute(OUTLINE_ACTIVE_ATTRIBUTE,"true"),e.spacing?.setAttribute(SPACING_ACTIVE_ATTRIBUTE,"true"),e.addSectionTop?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE,"true"),e.addSectionBottom?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE,"true")):(e.toolbar?.removeAttribute(TOOLBAR_ACTIVE_ATTRIBUTE),e.outline?.removeAttribute(OUTLINE_ACTIVE_ATTRIBUTE),e.spacing?.removeAttribute(SPACING_ACTIVE_ATTRIBUTE),e.addSectionTop?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE),e.addSectionBottom?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE))},[]),u=t=>{let e=t.querySelector("[data-toolbar-add-top]"),r=t.querySelector("[data-toolbar-add-bottom]"),a=Array.from(t.children),T=a.find(t=>null!==t.getAttribute("data-toolbar")),o=a.find(t=>null!==t.getAttribute("data-outline"));return{sectionToolbar:T,sectionOutline:o,sectionAddTop:e,sectionAddBottom:r}},A=react.useCallback(t=>t.reduce((t,e)=>{let a=null,T=null,o=e,A=e.querySelector("[data-toolbar]"),i=e.querySelector("[data-outline]"),n=e.querySelector("[data-spacing]");switch(r){case"Button":case"SubmitButton":case"ProductButton":case"DynamicCheckout":o=e.querySelector("button");break;case"ProductProperties":o=e.querySelector("input");break;case"Section":{o=e;let{sectionOutline:t,sectionToolbar:r,sectionAddTop:n,sectionAddBottom:c}=u(o);i=t,A=r,a=n,T=c;break}default:o=e}let c={target:o,toolbar:A,outline:i,spacing:n,addSectionTop:a,addSectionBottom:T};return t.push(c),t},[]),[r]),i=react.useCallback(()=>{let t=document.querySelectorAll(`[data-uid="${a}"]`),e=Array.from(t);if(!e.length)return;let r=A(e);T.current=r},[a,A]);return react.useEffect(()=>{e&&i()},[e,i]),{targetObjects:T,setToolbarActive:o,initListOfTargets:i}};exports.useAnimationTarget=useAnimationTarget;
+"use strict";var react=require("react"),useAnimationConfig=require("./useAnimationConfig.js");const SPACING_ACTIVE_ATTRIBUTE="data-spacing",TOOLBAR_ACTIVE_ATTRIBUTE="data-toolbar-active",OUTLINE_ACTIVE_ATTRIBUTE="data-outline-active",TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE="data-toolbar-add-active",useAnimationTarget=t=>{let{isEnabledAnimation:e}=useAnimationConfig.useAnimationConfig(t),r=t.tag,a=t.uid,u=react.useRef(null),o=react.useRef([]),T=t=>{if(o.current)for(let e of o.current)t?(e.toolbar?.setAttribute(TOOLBAR_ACTIVE_ATTRIBUTE,"true"),e.outline?.setAttribute(OUTLINE_ACTIVE_ATTRIBUTE,"true"),e.spacing?.setAttribute(SPACING_ACTIVE_ATTRIBUTE,"true"),e.addSectionTop?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE,"true"),e.addSectionBottom?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE,"true")):(e.toolbar?.removeAttribute(TOOLBAR_ACTIVE_ATTRIBUTE),e.outline?.removeAttribute(OUTLINE_ACTIVE_ATTRIBUTE),e.spacing?.removeAttribute(SPACING_ACTIVE_ATTRIBUTE),e.addSectionTop?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE),e.addSectionBottom?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE))},i=t=>{let e=t.querySelector("[data-toolbar-add-top]"),r=t.querySelector("[data-toolbar-add-bottom]"),a=Array.from(t.children),u=a.find(t=>null!==t.getAttribute("data-toolbar")),o=a.find(t=>null!==t.getAttribute("data-outline"));return{sectionToolbar:u,sectionOutline:o,sectionAddTop:e,sectionAddBottom:r}},A=react.useCallback(t=>t.reduce((t,e)=>{let a=null,u=null,o=e,T=e.querySelector("[data-toolbar][data-toolbar-active]"),A=e.querySelector("[data-outline][data-outline-active]"),n=Array.from(o.children),c=n.find(t=>null!==t.getAttribute("data-spacing"));switch(r){case"Button":case"SubmitButton":case"ProductButton":case"DynamicCheckout":o=e.querySelector("button");break;case"ProductProperties":o=e.querySelector("input");break;case"Section":{o=e;let{sectionOutline:t,sectionToolbar:r,sectionAddTop:n,sectionAddBottom:c}=i(o);A=t,T=r,a=n,u=c;break}default:o=e}let l={target:o,toolbar:T,outline:A,spacing:c,addSectionTop:a,addSectionBottom:u};return t.push(l),t},[]),[r]),n=react.useCallback(()=>{if(!e)return;u.current||(u.current=document.querySelectorAll(`[data-uid="${a}"]`));let t=Array.from(u.current);if(!t.length)return;let r=A(t);o.current=r},[a,A,e]);return react.useEffect(()=>{n()},[e,n]),{targetObjects:o,setToolbarActive:T,initListOfTargets:n}};exports.useAnimationTarget=useAnimationTarget;

package/dist/cjs/hooks/animation/useApplyAnimation.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react=require("react"),useAnimations=require("../useAnimations.js"),useAnimationTarget=require("./useAnimationTarget.js"),useAnimationConfig=require("./useAnimationConfig.js"),useAnimationActions=require("./useAnimationActions.js"),useAnimationPreview=require("./useAnimationPreview.js"),animations=require("../../types/animations.js");const useApplyAnimation=({props:e})=>{let{uid:i}=e,n=useAnimations.useAnimations(),{initListOfTargets:t,targetObjects:a}=useAnimationTarget.useAnimationTarget(e),{isEnabledAnimation:s,getAnimationConfig:r}=useAnimationConfig.useAnimationConfig(e),{setAnimation:o,cancelAnimation:u,playAnimation:m,setAnimationOnFinish:A}=useAnimationActions.useAnimationActions(),{previewAnimation:c}=useAnimationPreview.useAnimationPreview({props:e,playAnimation:m,cancelAnimation:u,setAnimationOnFinish:A}),p=react.useCallback(({target:e,setting:i,type:t})=>n[t](e,i),[n]),l=react.useCallback(()=>{let{type:e,setting:i}=r();if(!e||e===animations.AnimationType.None||!a.current.length){u();return}let n=a.current.map(n=>p({type:e,setting:i,target:n.target}));u(),o(n)},[r,a,u,o,p]);react.useEffect(()=>(s?(t(),l()):u(),()=>{u()}),[i,l,u,s,t]),react.useEffect(()=>(window.addEventListener("preview-animation",c),()=>{window.removeEventListener("preview-animation",c)}),[c])};exports.default=useApplyAnimation;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react=require("react"),useAnimations=require("../useAnimations.js"),useAnimationTarget=require("./useAnimationTarget.js"),useAnimationConfig=require("./useAnimationConfig.js"),useAnimationActions=require("./useAnimationActions.js"),useAnimationPreview=require("./useAnimationPreview.js"),animations=require("../../types/animations.js");const useApplyAnimation=({props:e})=>{let{uid:i}=e,n=useAnimations.useAnimations(),{initListOfTargets:t,targetObjects:a,setToolbarActive:s}=useAnimationTarget.useAnimationTarget(e),{isEnabledAnimation:r,getAnimationConfig:o}=useAnimationConfig.useAnimationConfig(e),{setAnimation:u,cancelAnimation:m,playAnimation:A,setAnimationOnFinish:c}=useAnimationActions.useAnimationActions(),{previewAnimation:p}=useAnimationPreview.useAnimationPreview({props:e,playAnimation:A,cancelAnimation:m,setAnimationOnFinish:c,setToolbarActive:s}),v=react.useCallback(({target:e,setting:i,type:t})=>n[t](e,i),[n]),w=react.useCallback(()=>{let{type:e,setting:i}=o();if(!e||e===animations.AnimationType.None||!a.current.length){m();return}let n=a.current.map(n=>v({type:e,setting:i,target:n.target}));m(),u(n)},[o,a,m,u,v]);react.useEffect(()=>(r?(t(),w()):m(),()=>{m()}),[i,w,m,r,t]),react.useEffect(()=>(window.addEventListener("preview-animation",p),()=>{window.removeEventListener("preview-animation",p)}),[p]),react.useEffect(()=>(window.addEventListener("init-animation-target",t),()=>{window.removeEventListener("init-animation-target",t)}),[t])};exports.default=useApplyAnimation;

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/hooks/animation/useAnimationPreview.js

@@ -1 +1 @@
-import{useCallback as e}from"react";import{useAnimationTarget as i}from"./useAnimationTarget.js";let useAnimationPreview=({props:t,playAnimation:r,cancelAnimation:n,setAnimationOnFinish:o})=>{let{setToolbarActive:m}=i(t),u=e(e=>{let{uid:i,isCancel:u}=e.detail;if(t.uid===i){if(n(),u){m(!0);return}r(),m(!1),o(()=>{m(!0)})}},[t.uid,n,r,o,m]);return{previewAnimation:u}};export{useAnimationPreview};
+import{useCallback as e}from"react";let useAnimationPreview=({props:i,playAnimation:t,cancelAnimation:r,setAnimationOnFinish:n,setToolbarActive:u})=>{let o=e(e=>{let{uid:o,isCancel:a}=e.detail;if(i.uid===o){if(r(),a){u(!0);return}t(),u(!1),n(()=>{u(!0)})}},[i.uid,r,t,u,n]);return{previewAnimation:o}};export{useAnimationPreview};

package/dist/esm/hooks/animation/useAnimationTarget.js

@@ -1 +1 @@
-import{useRef as t,useCallback as e,useEffect as r}from"react";import{useAnimationConfig as T}from"./useAnimationConfig.js";let SPACING_ACTIVE_ATTRIBUTE="data-spacing",TOOLBAR_ACTIVE_ATTRIBUTE="data-toolbar-active",OUTLINE_ACTIVE_ATTRIBUTE="data-outline-active",TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE="data-toolbar-add-active",useAnimationTarget=o=>{let{isEnabledAnimation:a}=T(o),A=o.tag,u=o.uid,i=t([]),l=e(t=>{if(i.current)for(let e of i.current)t?(e.toolbar?.setAttribute(TOOLBAR_ACTIVE_ATTRIBUTE,"true"),e.outline?.setAttribute(OUTLINE_ACTIVE_ATTRIBUTE,"true"),e.spacing?.setAttribute(SPACING_ACTIVE_ATTRIBUTE,"true"),e.addSectionTop?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE,"true"),e.addSectionBottom?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE,"true")):(e.toolbar?.removeAttribute(TOOLBAR_ACTIVE_ATTRIBUTE),e.outline?.removeAttribute(OUTLINE_ACTIVE_ATTRIBUTE),e.spacing?.removeAttribute(SPACING_ACTIVE_ATTRIBUTE),e.addSectionTop?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE),e.addSectionBottom?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE))},[]),n=t=>{let e=t.querySelector("[data-toolbar-add-top]"),r=t.querySelector("[data-toolbar-add-bottom]"),T=Array.from(t.children),o=T.find(t=>null!==t.getAttribute("data-toolbar")),a=T.find(t=>null!==t.getAttribute("data-outline"));return{sectionToolbar:o,sectionOutline:a,sectionAddTop:e,sectionAddBottom:r}},I=e(t=>t.reduce((t,e)=>{let r=null,T=null,o=e,a=e.querySelector("[data-toolbar]"),u=e.querySelector("[data-outline]"),i=e.querySelector("[data-spacing]");switch(A){case"Button":case"SubmitButton":case"ProductButton":case"DynamicCheckout":o=e.querySelector("button");break;case"ProductProperties":o=e.querySelector("input");break;case"Section":{o=e;let{sectionOutline:t,sectionToolbar:A,sectionAddTop:i,sectionAddBottom:l}=n(o);u=t,a=A,r=i,T=l;break}default:o=e}let l={target:o,toolbar:a,outline:u,spacing:i,addSectionTop:r,addSectionBottom:T};return t.push(l),t},[]),[A]),c=e(()=>{let t=document.querySelectorAll(`[data-uid="${u}"]`),e=Array.from(t);if(!e.length)return;let r=I(e);i.current=r},[u,I]);return r(()=>{a&&c()},[a,c]),{targetObjects:i,setToolbarActive:l,initListOfTargets:c}};export{useAnimationTarget};
+import{useRef as t,useCallback as e,useEffect as r}from"react";import{useAnimationConfig as T}from"./useAnimationConfig.js";let SPACING_ACTIVE_ATTRIBUTE="data-spacing",TOOLBAR_ACTIVE_ATTRIBUTE="data-toolbar-active",OUTLINE_ACTIVE_ATTRIBUTE="data-outline-active",TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE="data-toolbar-add-active",useAnimationTarget=a=>{let{isEnabledAnimation:o}=T(a),u=a.tag,A=a.uid,i=t(null),n=t([]),l=t=>{if(n.current)for(let e of n.current)t?(e.toolbar?.setAttribute(TOOLBAR_ACTIVE_ATTRIBUTE,"true"),e.outline?.setAttribute(OUTLINE_ACTIVE_ATTRIBUTE,"true"),e.spacing?.setAttribute(SPACING_ACTIVE_ATTRIBUTE,"true"),e.addSectionTop?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE,"true"),e.addSectionBottom?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE,"true")):(e.toolbar?.removeAttribute(TOOLBAR_ACTIVE_ATTRIBUTE),e.outline?.removeAttribute(OUTLINE_ACTIVE_ATTRIBUTE),e.spacing?.removeAttribute(SPACING_ACTIVE_ATTRIBUTE),e.addSectionTop?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE),e.addSectionBottom?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE))},c=t=>{let e=t.querySelector("[data-toolbar-add-top]"),r=t.querySelector("[data-toolbar-add-bottom]"),T=Array.from(t.children),a=T.find(t=>null!==t.getAttribute("data-toolbar")),o=T.find(t=>null!==t.getAttribute("data-outline"));return{sectionToolbar:a,sectionOutline:o,sectionAddTop:e,sectionAddBottom:r}},d=e(t=>t.reduce((t,e)=>{let r=null,T=null,a=e,o=e.querySelector("[data-toolbar][data-toolbar-active]"),A=e.querySelector("[data-outline][data-outline-active]"),i=Array.from(a.children),n=i.find(t=>null!==t.getAttribute("data-spacing"));switch(u){case"Button":case"SubmitButton":case"ProductButton":case"DynamicCheckout":a=e.querySelector("button");break;case"ProductProperties":a=e.querySelector("input");break;case"Section":{a=e;let{sectionOutline:t,sectionToolbar:u,sectionAddTop:i,sectionAddBottom:n}=c(a);A=t,o=u,r=i,T=n;break}default:a=e}let l={target:a,toolbar:o,outline:A,spacing:n,addSectionTop:r,addSectionBottom:T};return t.push(l),t},[]),[u]),I=e(()=>{if(!o)return;i.current||(i.current=document.querySelectorAll(`[data-uid="${A}"]`));let t=Array.from(i.current);if(!t.length)return;let e=d(t);n.current=e},[A,d,o]);return r(()=>{I()},[o,I]),{targetObjects:n,setToolbarActive:l,initListOfTargets:I}};export{useAnimationTarget};

package/dist/esm/hooks/animation/useApplyAnimation.js

@@ -1 +1 @@
-import{useCallback as t,useEffect as i}from"react";import{useAnimations as e}from"../useAnimations.js";import{useAnimationTarget as n}from"./useAnimationTarget.js";import{useAnimationConfig as o}from"./useAnimationConfig.js";import{useAnimationActions as r}from"./useAnimationActions.js";import{useAnimationPreview as m}from"./useAnimationPreview.js";import{AnimationType as a}from"../../types/animations.js";let useApplyAnimation=({props:s})=>{let{uid:p}=s,u=e(),{initListOfTargets:f,targetObjects:A}=n(s),{isEnabledAnimation:l,getAnimationConfig:w}=o(s),{setAnimation:d,cancelAnimation:j,playAnimation:v,setAnimationOnFinish:g}=r(),{previewAnimation:c}=m({props:s,playAnimation:v,cancelAnimation:j,setAnimationOnFinish:g}),y=t(({target:t,setting:i,type:e})=>u[e](t,i),[u]),E=t(()=>{let{type:t,setting:i}=w();if(!t||t===a.None||!A.current.length){j();return}let e=A.current.map(e=>y({type:t,setting:i,target:e.target}));j(),d(e)},[w,A,j,d,y]);i(()=>(l?(f(),E()):j(),()=>{j()}),[p,E,j,l,f]),i(()=>(window.addEventListener("preview-animation",c),()=>{window.removeEventListener("preview-animation",c)}),[c])};export{useApplyAnimation as default};
+import{useCallback as t,useEffect as i}from"react";import{useAnimations as e}from"../useAnimations.js";import{useAnimationTarget as n}from"./useAnimationTarget.js";import{useAnimationConfig as o}from"./useAnimationConfig.js";import{useAnimationActions as r}from"./useAnimationActions.js";import{useAnimationPreview as m}from"./useAnimationPreview.js";import{AnimationType as a}from"../../types/animations.js";let useApplyAnimation=({props:s})=>{let{uid:p}=s,u=e(),{initListOfTargets:w,targetObjects:d,setToolbarActive:f}=n(s),{isEnabledAnimation:A,getAnimationConfig:v}=o(s),{setAnimation:l,cancelAnimation:g,playAnimation:j,setAnimationOnFinish:c}=r(),{previewAnimation:E}=m({props:s,playAnimation:j,cancelAnimation:g,setAnimationOnFinish:c,setToolbarActive:f}),L=t(({target:t,setting:i,type:e})=>u[e](t,i),[u]),y=t(()=>{let{type:t,setting:i}=v();if(!t||t===a.None||!d.current.length){g();return}let e=d.current.map(e=>L({type:t,setting:i,target:e.target}));g(),l(e)},[v,d,g,l,L]);i(()=>(A?(w(),y()):g(),()=>{g()}),[p,y,g,A,w]),i(()=>(window.addEventListener("preview-animation",E),()=>{window.removeEventListener("preview-animation",E)}),[E]),i(()=>(window.addEventListener("init-animation-target",w),()=>{window.removeEventListener("init-animation-target",w)}),[w])};export{useApplyAnimation as default};

package/package.json

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