@gem-sdk/components 11.2.5 → 12.0.0-dev.102

package/dist/esm/product/components/product-images-v3/ProductImagesV3.liquid.js

@@ -1,40 +1,40 @@
-import{template as e,isLocalEnv as o,baseAssetURL as r,WrapRenderChildren as s,RenderChildren as t}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{getSettingPreloadData as c}from"../../../helpers.js";import{getShapeByLayout as u,sizeSettingDefaultForNewLayout as n}from"./common/productGallery.js";import{getProductImagesClassName as g}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as f}from"./composables/getProductImagesStyles.js";import{createAttr as $,LiquidIf as y,createClass as h,If as v,Liquid as S}from"@gem-sdk/system";import{getBorderActiveCss as j}from"./common/getBorderActiveCss.js";import{getStyleOfObject as F}from"../../helpers/function.js";let ProductImages=I=>{let P=p(I),{setting:C,styles:G,builderProps:D,style:b}=P,{rawChildren:z,pageContext:O}=I,{enableLazyLoadImage:_}=O??{},N={...C,...G},A=`
+import{template as e,isLocalEnv as o,baseAssetURL as r,WrapRenderChildren as t,RenderChildren as s}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{getSettingPreloadData as c}from"../../../helpers.js";import{getShapeByLayout as u,sizeSettingDefaultForNewLayout as n}from"./common/productGallery.js";import{getProductImagesClassName as g}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as f}from"./composables/getProductImagesStyles.js";import{createAttr as y,LiquidIf as $,createClass as h,If as v,Liquid as j}from"@gem-sdk/system";import{getBorderActiveCss as S}from"./common/getBorderActiveCss.js";import{getStyleOfObject as F}from"../../helpers/function.js";let ProductImages=I=>{let P=p(I),{setting:C,styles:G,builderProps:D,style:b}=P,{rawChildren:z,pageContext:O}=I,{enableLazyLoadImage:_}=O??{},N={...C,...G},A=`
     {
       "id":${JSON.stringify(D?.uid)},
       "pageContext": ${JSON.stringify(O)},
       "setting":${JSON.stringify(C)},
       "styles":${JSON.stringify(G)},
-      "productUrl":{{product.url | json | escape}},
-      "product":{{product | json | escape}},
-      "collectionUrl": {{ collection.url | json | escape }},
-      "collection": {{ collection | json | escape}}
+      "productUrl":{{product.url | json }},
+      "product":{{ product | json }},
+      "collectionUrl": {{ collection.url | json }},
+      "collection": {{ collection | json }}
     }
-  `,B=$({"section-id":"{{section.id}}","data-id":`${D?.uid}`}),{isOnlyFeatureAllDevices:U,isRenderGalleryGrid:k}=i(N?.position,C?.type),q=k?{}:$({"data-only-image":y("product.media.size > 1","false","true")}),{wrapperClasses:E,productImagesGalleryClasses:J}=g(I),w=h({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),T=h({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:x,wrapContainerStyleOnlyOneImage:L,galleryImageStyle:M}=f(N),R=u({shape:N.shape,shapeForBottom:N.shapeForBottom,shapeFor1Col:N.shapeFor1Col,shapeFor2Col:N.shapeFor2Col,shapeForFtOnly:N.shapeForFtOnly,shapeForInsideBottom:N.shapeForInsideBottom??n,shapeForInside:N.shapeForInside??n},N.position),V=a(N.position,R,N?.spacing),W=()=>e`
-      ${s({uid:D?.uid||"",customProps:z?.[0].customProps},z?.map(o=>{if(o)return e`${t({...o,isInsideProductImage:!0,imageData:{imageShape:G?.ftShape,imageAlign:G?.align,imageLayout:G?.position},dotData:{dotSize:C?.ftDotSize,dotGapToCarousel:C?.ftDotGapToCarousel,dotStyle:C?.ftDotStyle}})}`}))}
+  `,B=y({"section-id":"{{section.id}}","data-id":`${D?.uid}`}),{isOnlyFeatureAllDevices:U,isRenderGalleryGrid:k}=i(N?.position,C?.type),q=k?{}:y({"data-only-image":$("product.media.size > 1","false","true")}),{wrapperClasses:E,productImagesGalleryClasses:J}=g(I),w=h({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),T=h({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:x,wrapContainerStyleOnlyOneImage:L,galleryImageStyle:M}=f(N),R=u({shape:N.shape,shapeForBottom:N.shapeForBottom,shapeFor1Col:N.shapeFor1Col,shapeFor2Col:N.shapeFor2Col,shapeForFtOnly:N.shapeForFtOnly,shapeForInsideBottom:N.shapeForInsideBottom??n,shapeForInside:N.shapeForInside??n},N.position),V=a(N.position,R,N?.spacing),W=()=>e`
+      ${t({uid:D?.uid||"",customProps:z?.[0].customProps},z?.map(o=>{if(o)return e`${s({...o,isInsideProductImage:!0,imageData:{imageShape:G?.ftShape,imageAlign:G?.align,imageLayout:G?.position},dotData:{dotSize:C?.ftDotSize,dotGapToCarousel:C?.ftDotGapToCarousel,dotStyle:C?.ftDotStyle}})}`}))}
     `,H=()=>e`
       <div
         class="${J}"
         style="${F(M)}"
         ${{...q}}
       >
-        ${y("product.media.size > 1",d({builderPropUID:`gp-gallery-${D?.uid}`,...N,enableLazyLoadImage:_}))}
+        ${$("product.media.size > 1",d({builderPropUID:`gp-gallery-${D?.uid}`,...N,enableLazyLoadImage:_}))}
         ${v(k,m({builderPropUID:D?.uid,wrapperStyle:{...V},children:W(),...N,enableLazyLoadImage:_}))}
       </div>
     `,K=()=>C?.borderActive?.border!=="none";return e`
-  ${v(K(),y("product.media.size > 1",`<style>${j({settings:N,uid:D?.uid,type:"Liquid"})}</style>`),"")}
-  ${S(`
+  ${v(K(),$("product.media.size > 1",`<style>${S({settings:N,uid:D?.uid,type:"Liquid"})}</style>`),"")}
+  ${j(`
     {% assign featured_image = product.featured_image %}
-    ${y("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
+    ${$("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
   `)}
     <gp-product-images-v3
-      gp-data='${A}'
       ${{...B}}
       style="${{...b}}"
       class="${E}"
     >
+      <script gp-data type="application/json">${A}</script>
       <div
-        class="${y("product.media.size > 1",`${w}`,`${T}`)}"
-        style="${y("product.media.size > 1",F(x),F(L))}"
+        class="${$("product.media.size > 1",`${w}`,`${T}`)}"
+        style="${$("product.media.size > 1",F(x),F(L))}"
       >
         ${l({builderPropUID:`gp-carousel-${D?.uid}`,...N,children:W(),enableLazyLoadImage:_})}
         ${v(!U,H())}

package/dist/esm/product/components/product-list/ProductList.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import r from"next/dynamic";import d from"../../../common/components/Loading.js";import{useState as l,useMemo as i,useEffect as a}from"react";import{useRenderMode as c,useCurrentDevice as n,usePageType as s,usePageStore as u,useFetchHandle as m,hasPublicStoreFrontData as g,createStoreFrontFetcher as h,useProductQuery as p,useProductsQueryAll as P,useProductsQuery as f,useCollectionQuery as b,flattenConnection as k,ProductListProvider as T,filterToolbarPreview as I}from"@gem-sdk/core";import v from"../SalePageProductListWarning.js";import y from"next/head";import O from"./ProductListGridLayout.js";import N from"./ProductListCarouselLayout.js";import{getStyle as S}from"./common/styles.js";import{If as C}from"@gem-sdk/system";import{getClass as E}from"./common/classes.js";import{getData as w}from"./common/helpers.js";import{getPropertyByDevice as L}from"../../../dialog/common/helpers.js";let ProductNotFound=r(()=>import("../ProductNotFound.js"),{loading:d}),ProductList=r=>{let{children:W,styles:j,builderProps:x,setting:G,builderAttrs:M}=r,{isRelatedProduct:B,productSetting:A}=w(r),F=A.relatedTag&&A.relatedTag[0],{isEditMode:Q,isPreviewSharePageMode:z}=c(),D=n(),H=s(),R=u(e=>e.dynamicProduct),$=u(e=>e.dynamicCollection),[_,V]=l(1),[q,U]=l(!0),[J,K]=l(),[X,Y]=l(!1),Z="GP_FUNNEL_PAGE"===H,ee="GP_COLLECTION"==H;ee&&(A.productSrc="DynamicCollection",A.collectionId=$?.collectionId??"latest");let et=A?.productSrc??"Collection",eo=R?.productId&&R?.productId!==A.relatedProductId?R?.productId:A.relatedProductId,er=m(),ed=u(e=>e.publicStoreFrontData),el=i(()=>g(ed)?h(ed):er,[ed]),{data:ei}=p(B&&eo?eo:void 0,{revalidateOnMount:Q||z},el),ea=A.relatedTag&&"tags"===A.relatedTag[0]&&(!ei?.tags||ei?.tags.length===0),ec=A.relatedTag&&"collection"===A.relatedTag[0]&&(!ei?.collections?.edges||ei?.collections.edges.length===0),en=A.relatedTag&&"vendor"===A.relatedTag[0]&&!ei?.vendor,es=ea||ec||en,eu=P(J,{revalidateOnMount:Q||z},el),em=Q||z,eg=f("PickProduct"===et?A?.productIds:void 0,{revalidateOnMount:em},{defaultSelectedProductCount:A?.numOfSelectedProducts}),eh=i(()=>({id:A?.collectionId??"latest",numberOfProducts:G?.numberOfProducts??4,orderBy:G?.orderBy}),[A?.collectionId,Number(G?.numberOfProducts),G?.orderBy]),ep=b("PickProduct"!==et?eh:void 0,{revalidateOnMount:em});a(()=>{if(B&&ei&&A.relatedTag&&"recommended-product"!==A.relatedType){let e;switch(Y(!1),A.hasRelatedExclude&&(e=A?.relatedExclude&&A.relatedExclude.split(",").map(e=>e.trim())),A.relatedTag[0]){case"vendor":K({vendor:A.relatedTag&&"vendor"===A.relatedTag[0]?ei?.vendor:"",limit:G?.numberOfProducts,idNEQ:ei.id});break;case"collection":{let t;let o=ei?.collections?.edges.map(e=>e.node?.id);if(!o||o?.length===0){Y(!0);break}K(t=e&&e.length>0?{idNEQ:ei.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:o},{titleNotIn:e}]}],limit:G?.numberOfProducts}:{idNEQ:ei.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:o}]}],limit:G?.numberOfProducts});break}case"tags":{let t;if(!ei.tags||0===ei.tags.length){Y(!0);break}K(t=e&&e.length>0?{idNEQ:ei.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ei.tags},{nameNotIn:e}]}],limit:G?.numberOfProducts}:{idNEQ:ei.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ei.tags}]}],limit:G?.numberOfProducts})}}}},[ei,A.relatedType,A.relatedTag,G?.numberOfProducts,A.relatedExclude,A.hasRelatedExclude,B]);let eP="PickProduct"===et?eg.isValidating:ep.isValidating,ef="PickProduct"===et?eg.isLoading:ep.isLoading,eb="PickProduct"===et?eg.error:ep.error,ek=ep.data?.collections?.edges?.[0]?.node,eT="PickProduct"===et?k(eg.data?.products):k(ek?.products),eI=eu?.data?.products?k(eu?.data?.products):void 0,ev=B&&eI?eI:"PickProduct"===et&&A?.productIds?.length?A?.productIds?.map(e=>eT?.find(t=>t?.baseID===e)).filter(Boolean)??eT:"PickProduct"!==et?eT:eT.filter((e,t)=>t<(A?.numOfSelectedProducts??4)),ey=i(()=>X&&B&&Q||!ev.length&&!ef&&q&&Q,[q,ef,X,B,Q,ev.length]),eO=i(()=>!ev||X&&B,[X,B,ev]),eN=i(()=>{if(!G?.sameHeight)return[];let e=0,t=Math.ceil((ev?.length??0)/+(G?.slidesToShow?.[D]??1));return Array.from(Array(ev?.length??0)).map((o,r)=>(r>=+(G?.slidesToShow?.[D]??1)*(e+1)&&++e,{gridRow:`${1+_*e}/${_+1+_*e}`,marginBottom:e+1<t?L(j?.horizontalGutter,D):void 0}))},[G?.sameHeight,G?.slidesToShow,_,ev?.length,D,j?.horizontalGutter]),eS=i(()=>eP||ef||eb||!ev||X&&B,[eb,ef,X,B,eP,ev]);a(()=>{eS||setTimeout(()=>{let{builderData:e}=x??{},t=e?.childrens?.[0];if(!t)return;let o=document.querySelector(`[data-id=${t}] div`);o&&V(o.childElementCount||1)},Q?0:500)},[x,eS,Q]);let eC=i(()=>({collection:ek,products:ev,settings:{loop:G?.loop??{desktop:!1},scrollMode:G?.scrollMode??{desktop:"snap"},slidesToShow:G?.slidesToShow??{desktop:4,tablet:3,mobile:1},layout:j?.layout,dot:G?.dot,dotStyle:G?.dotStyle,arrow:G?.arrow,controlOverContent:G?.controlOverContent},styles:{horizontalGutter:j?.horizontalGutter,verticalGutter:j?.verticalGutter,fullWidth:j?.fullWidth,spacing:j?.spacing,width:j?.width,height:j?.height}}),[ek,ev,G,j]);if(x?.isPreview&&Z)return e(t,{});if(ey)return e(t,{children:C(q,e(ProductNotFound,{builderAttrs:M,collectionHandle:ek?.handle,productSrc:et,onClose:()=>U(!1),children:W,relatedTagString:F,assignProductNoTags:es,noAssignedProduct:!eo}))});let{productListWrapStyle:eE,productListContentStyle:ew,productListWrapAlignStyle:eL}=S(r),{productListWrapClass:eW}=E(r),ej=()=>e(t,{children:C(j?.layout==="grid",e(O,{...r,productSortedById:ev,generateGridRowArray:eN}),e(N,{...r,productSortedById:ev}))});return o("div",{...M,className:eW,style:eE,children:[!!j?.preloadBgImage&&o(y,{children:[!!j.backgroundImage?.desktop?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage.desktop.image.src,as:"image"}),!!j.backgroundImage?.tablet?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.tablet?.image?.src,as:"image"}),!!j.backgroundImage?.mobile?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.mobile?.image?.src,as:"image"})]}),eP||ef?e(d,{}):eb?o("div",{children:["Error: ",eb?.message]}):eO?e("div",{children:"Products not found"}):e(T,{...eC,children:e("div",{className:"gp-flex gp-w-full",style:eL,children:o("div",{style:ew,children:[Z&&e(v,{}),ej()]})})}),I(W,!0)]})};export{ProductList as default};
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"next/dynamic";import d from"../../../common/components/Loading.js";import{useState as l,useMemo as a,useEffect as i}from"react";import{useRenderMode as c,useCurrentDevice as s,usePageType as n,usePageStore as u,useFetchHandle as m,hasPublicStoreFrontData as g,createStoreFrontFetcher as h,useProductQuery as p,useProductsQueryAll as f,useProductsQuery as P,useCollectionQuery as b,flattenConnection as k,ProductListProvider as T,filterToolbarPreview as I}from"@gem-sdk/core";import v from"../SalePageProductListWarning.js";import y from"next/head";import O from"./ProductListGridLayout.js";import w from"./ProductListCarouselLayout.js";import{getStyle as N}from"./common/styles.js";import{If as S}from"@gem-sdk/system";import{getClass as C}from"./common/classes.js";import{getData as E}from"./common/helpers.js";import{getPropertyByDevice as L}from"../../../dialog/common/helpers.js";let ProductNotFound=o(()=>import("../ProductNotFound.js"),{loading:d}),ProductList=o=>{let{children:W,styles:j,builderProps:x,setting:G,builderAttrs:M}=o,{isRelatedProduct:B,productSetting:A}=E(o),F=A.relatedTag&&A.relatedTag[0],{isEditMode:Q,isPreviewSharePageMode:z}=c(),D=s(),H=n(),R=u(e=>e.dynamicProduct),$=u(e=>e.dynamicCollection),[_,V]=l(1),[q,U]=l(!0),[J,K]=l(),[X,Y]=l(!1),Z="GP_FUNNEL_PAGE"===H,ee="GP_COLLECTION"==H;ee&&(A.productSrc="DynamicCollection",A.collectionId=$?.collectionId??"latest");let et=A?.productSrc??"Collection",er=R?.productId&&R?.productId!==A.relatedProductId?R?.productId:A.relatedProductId,eo=m(),ed=u(e=>e.publicStoreFrontData),el=a(()=>g(ed)?h(ed):eo,[ed]),{data:ea}=p(B&&er?er:void 0,{revalidateOnMount:Q||z},el),ei=A.relatedTag&&"tags"===A.relatedTag[0]&&(!ea?.tags||ea?.tags.length===0),ec=A.relatedTag&&"collection"===A.relatedTag[0]&&(!ea?.collections?.edges||ea?.collections.edges.length===0),es=A.relatedTag&&"vendor"===A.relatedTag[0]&&!ea?.vendor,en=ei||ec||es,eu=f(J,{revalidateOnMount:Q||z},el),em=Q||z,eg=P("PickProduct"===et?A?.productIds:void 0,{revalidateOnMount:em},{defaultSelectedProductCount:A?.numOfSelectedProducts}),eh=a(()=>({id:A?.collectionId??"latest",numberOfProducts:G?.numberOfProducts??4,orderBy:G?.orderBy}),[A?.collectionId,Number(G?.numberOfProducts),G?.orderBy]),ep=b("PickProduct"!==et?eh:void 0,{revalidateOnMount:em});i(()=>{if(B&&ea&&A.relatedTag&&"recommended-product"!==A.relatedType){let e;switch(Y(!1),A.hasRelatedExclude&&(e=A?.relatedExclude&&A.relatedExclude.split(",").map(e=>e.trim())),A.relatedTag[0]){case"vendor":K({first:G?.numberOfProducts,where:{vendor:A.relatedTag&&"vendor"===A.relatedTag[0]?ea?.vendor:"",idNEQ:ea.id}});break;case"collection":{let t;let r=ea?.collections?.edges.map(e=>e.node?.id);if(!r||r?.length===0){Y(!0);break}K(t=e&&e.length>0?{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:r},{titleNotIn:e}]}]}}:{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:r}]}]}});break}case"tags":{let t;if(!ea.tags||0===ea.tags.length){Y(!0);break}K(t=e&&e.length>0?{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ea.tags},{nameNotIn:e}]}]}}:{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ea.tags}]}]}})}}}},[ea,A.relatedType,A.relatedTag,G?.numberOfProducts,A.relatedExclude,A.hasRelatedExclude,B]);let ef="PickProduct"===et?eg.isValidating:ep.isValidating,eP="PickProduct"===et?eg.isLoading:ep.isLoading,eb="PickProduct"===et?eg.error:ep.error,ek=ep.data?.collections?.edges?.[0]?.node,eT="PickProduct"===et?k(eg.data?.products):k(ek?.products),eI=eu?.data?.products?k(eu?.data?.products):void 0,ev=B&&eI?eI:"PickProduct"===et&&A?.productIds?.length?A?.productIds?.map(e=>eT?.find(t=>t?.baseID===e)).filter(Boolean)??eT:"PickProduct"!==et?eT:eT.filter((e,t)=>t<(A?.numOfSelectedProducts??4)),ey=a(()=>X&&B&&Q||!ev.length&&!eP&&q&&Q,[q,eP,X,B,Q,ev.length]),eO=a(()=>!ev||X&&B,[X,B,ev]),ew=a(()=>{if(!G?.sameHeight)return[];let e=0,t=Math.ceil((ev?.length??0)/+(G?.slidesToShow?.[D]??1));return Array.from(Array(ev?.length??0)).map((r,o)=>(o>=+(G?.slidesToShow?.[D]??1)*(e+1)&&++e,{gridRow:`${1+_*e}/${_+1+_*e}`,marginBottom:e+1<t?L(j?.horizontalGutter,D):void 0}))},[G?.sameHeight,G?.slidesToShow,_,ev?.length,D,j?.horizontalGutter]),eN=a(()=>ef||eP||eb||!ev||X&&B,[eb,eP,X,B,ef,ev]);i(()=>{eN||setTimeout(()=>{let{builderData:e}=x??{},t=e?.childrens?.[0];if(!t)return;let r=document.querySelector(`[data-id=${t}] div`);r&&V(r.childElementCount||1)},Q?0:500)},[x,eN,Q]);let eS=a(()=>({collection:ek,products:ev,settings:{loop:G?.loop??{desktop:!1},scrollMode:G?.scrollMode??{desktop:"snap"},slidesToShow:G?.slidesToShow??{desktop:4,tablet:3,mobile:1},layout:j?.layout,dot:G?.dot,dotStyle:G?.dotStyle,arrow:G?.arrow,controlOverContent:G?.controlOverContent},styles:{horizontalGutter:j?.horizontalGutter,verticalGutter:j?.verticalGutter,fullWidth:j?.fullWidth,spacing:j?.spacing,width:j?.width,height:j?.height}}),[ek,ev,G,j]);if(x?.isPreview&&Z)return e(t,{});if(ey)return e(t,{children:S(q,e(ProductNotFound,{builderAttrs:M,collectionHandle:ek?.handle,productSrc:et,onClose:()=>U(!1),children:W,relatedTagString:F,assignProductNoTags:en,noAssignedProduct:!er}))});let{productListWrapStyle:eC,productListContentStyle:eE,productListWrapAlignStyle:eL}=N(o),{productListWrapClass:eW}=C(o),ej=()=>e(t,{children:S(j?.layout==="grid",e(O,{...o,productSortedById:ev,generateGridRowArray:ew}),e(w,{...o,productSortedById:ev}))});return r("div",{...M,className:eW,style:eC,children:[!!j?.preloadBgImage&&r(y,{children:[!!j.backgroundImage?.desktop?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage.desktop.image.src,as:"image"}),!!j.backgroundImage?.tablet?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.tablet?.image?.src,as:"image"}),!!j.backgroundImage?.mobile?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.mobile?.image?.src,as:"image"})]}),ef||eP?e(d,{}):eb?r("div",{children:["Error: ",eb?.message]}):eO?e("div",{children:"Products not found"}):e(T,{...eS,children:e("div",{className:"gp-flex gp-w-full",style:eL,children:r("div",{style:eE,children:[Z&&e(v,{}),ej()]})})}),I(W,!0)]})};export{ProductList as default};

package/dist/esm/product/components/product-list/ProductListCarouselItem.liquid.js

@@ -1,10 +1,9 @@
-import{template as t}from"@gem-sdk/core";import{getClass as e}from"./common/classes.js";let ProductListItem=n=>{let{pageContext:o,children:a}=n,{productItemClass:r,gpProductClass:i}=e(n);return t`
+import{template as t}from"@gem-sdk/core";import{getClass as n}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:e,children:a}=o,{productItemClass:r,gpProductClass:i}=n(o);return t`
       <gp-product
-        gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "inventoryQuantity": {{ variant.inventory_quantity }},  "formId": "{{ product_form_id }}"}'
-        gp-data='{"variantSelected": {{ variant | json | escape }}, "quantity": 1, "productUrl":{{ product.url | json | escape }}, "productHandle":{{ product.handle | json | escape }}, "collectionUrl": {{ collection.url | json | escape }}, "collectionHandle": {{ collection.handle | json | escape }},"pageContext" : ${JSON.stringify(o)}}'
+        gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "inventoryQuantity": {{ variant.inventory_quantity | default: 0 }},  "formId": "{{ product_form_id }}"}'
         class="${i}"
-
       >
+        <script gp-data type="application/json">{"variantSelected": {{ variant | json }}, "quantity": 1, "productUrl":{{ product.url | json }}, "productHandle":{{ product.handle | json }}, "collectionUrl": {{ collection.url | json }}, "collectionHandle": {{ collection.handle | json }},"pageContext" : ${JSON.stringify(e)}}</script>
         {%- form 'product', product, id: product_form_id, class: 'form contents ${r}',  data-type: 'add-to-cart-form', autocomplete: 'off' -%}
         <input type="hidden" name="id" value="{{ variant.id }}" />
         <input type="hidden" min="1" name="quantity"  value="{{ quantity }}" />

package/dist/esm/product/components/product-list/ProductListGridItem.liquid.js

@@ -1,14 +1,13 @@
-import{template as t,RenderChildren as e}from"@gem-sdk/core";import{getClass as n}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:a,rawChildren:r}=o,{productItemClass:i,gpProductClass:c}=n(o),d=()=>t`
-      ${r?.map((n,o)=>{if(n)return t`
-            ${e({...n,index:o})}
+import{template as t,RenderChildren as n}from"@gem-sdk/core";import{getClass as e}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:a,rawChildren:r}=o,{productItemClass:i,gpProductClass:c}=e(o),d=()=>t`
+      ${r?.map((e,o)=>{if(e)return t`
+            ${n({...e,index:o})}
           `}).join("")}
     `;return t`
       <gp-product
-        gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "inventoryQuantity": {{ variant.inventory_quantity }},  "formId": "{{ product_form_id }}"}'
-        gp-data='{"variantSelected": {{ variant | json | escape }}, "quantity": 1, "productUrl":{{ product.url | json | escape }}, "productHandle":{{ product.handle | json | escape }}, "collectionUrl": {{ collection.url | json | escape }}, "collectionHandle": {{ collection.handle | json | escape }},"pageContext" : ${JSON.stringify(a)}}'
+        gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "inventoryQuantity": {{ variant.inventory_quantity | default: 0 }},  "formId": "{{ product_form_id }}"}'
         class="${c}"
-
       >
+        <script gp-data type="application/json">{"variantSelected": {{ variant | json }}, "quantity": 1, "productUrl":{{ product.url | json }}, "productHandle":{{ product.handle | json }}, "collectionUrl": {{ collection.url | json }}, "collectionHandle": {{ collection.handle | json }},"pageContext" : ${JSON.stringify(a)}}</script>
         {%- form 'product', product, id: product_form_id, class: 'form contents ${i}',  data-type: 'add-to-cart-form', autocomplete: 'off' -%}
         <input type="hidden" name="id" value="{{ variant.id }}" />
         <input type="hidden" min="1" name="quantity"  value="{{ quantity }}" />

package/dist/esm/product/components/product-list/ProductListGridLayout.liquid.js

@@ -1,8 +1,10 @@
-import{template as t,RenderIf as i}from"@gem-sdk/core";import{getStyle as o}from"./common/styles.js";import{getClass as r}from"./common/classes.js";import{getAttr as s}from"./common/attrs.js";import d from"./ProductListGridItem.liquid.js";import{getStaticLocale as e}from"../../../helpers.js";let ProductListGridLayout=a=>{let{setting:n,builderProps:c,styles:m,productListId:u,productSrc:p}=a,{gridLayoutStyle:l}=o(a),{gridLayoutClass:f}=r(a),{productListAttr:g}=s(a),$=i=>t`
+import{template as t,RenderIf as i}from"@gem-sdk/core";import{getStyle as o}from"./common/styles.js";import{getClass as s}from"./common/classes.js";import{getAttr as r}from"./common/attrs.js";import d from"./ProductListGridItem.liquid.js";import{getStaticLocale as e}from"../../../helpers.js";let ProductListGridLayout=a=>{let{setting:n,builderProps:p,styles:c,productListId:m,productSrc:u}=a,{gridLayoutStyle:l}=o(a),{gridLayoutClass:f}=s(a),{productListAttr:g}=r(a),$=i=>t`
       <gp-same-height
         class="gp-contents"
         style="visibility: hidden"
-        gp-data='${JSON.stringify({targetUid:c?.builderData?.childrens?.[0],slidesToShow:n?.slidesToShow,rowGap:m?.horizontalGutter})}'>
+      >
+        <script gp-data type="application/json">${JSON.stringify({targetUid:p?.builderData?.childrens?.[0],slidesToShow:n?.slidesToShow,rowGap:c?.horizontalGutter})}
+        </script>
         ${i}
       </gp-same-height>
     `,h=()=>t`
@@ -11,12 +13,12 @@ import{template as t,RenderIf as i}from"@gem-sdk/core";import{getStyle as o}from
       {%- if product.id != empty -%}
       {%- assign count = count | plus: 1 -%}
       {%- assign variant = product.selected_or_first_available_variant -%}
-      {%- assign product_form_id = 'product-form-' | append: "${c?.uid}" | append: product.id -%}
+      {%- assign product_form_id = 'product-form-' | append: "${p?.uid}" | append: product.id -%}
         ${d({...a})}
       {%- endif -%}
       {% endfor %}
-      {%- if count == 0 and ${u?.length} == 0 -%}
-        {% if '${p}' == 'RelatedProduct' -%}
+      {%- if count == 0 and ${m?.length} == 0 -%}
+        {% if '${u}' == 'RelatedProduct' -%}
           <div>${e("ProductList","no_related_products")}</div>
         {% else %}
           <div>${e("ProductList","no_products_found")}</div>

package/dist/esm/product/components/product-list-v3/ProductList.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import r from"next/dynamic";import d from"../../../common/components/Loading.js";import{useState as l,useMemo as i,useEffect as a}from"react";import{useRenderMode as c,useCurrentDevice as n,usePageType as s,usePageStore as u,useFetchHandle as m,hasPublicStoreFrontData as g,createStoreFrontFetcher as h,useProductQuery as p,useProductsQueryAll as P,useProductsQuery as f,useCollectionQuery as b,flattenConnection as k,ProductListProvider as T,filterToolbarPreview as I}from"@gem-sdk/core";import v from"../SalePageProductListWarning.js";import y from"next/head";import O from"./ProductListGridLayout.js";import N from"./ProductListCarouselLayout.js";import{getStyle as S}from"./common/styles.js";import{If as C}from"@gem-sdk/system";import{getClass as E}from"./common/classes.js";import{getData as w}from"./common/helpers.js";import{getPropertyByDevice as L}from"../../../dialog/common/helpers.js";let ProductNotFound=r(()=>import("../ProductNotFound.js"),{loading:d}),ProductList=r=>{let{children:W,styles:j,builderProps:x,setting:G,builderAttrs:M}=r,{isRelatedProduct:B,productSetting:A}=w(r),F=A.relatedTag&&A.relatedTag[0],{isEditMode:Q,isPreviewSharePageMode:z}=c(),D=n(),H=s(),R=u(e=>e.dynamicProduct),$=u(e=>e.dynamicCollection),[_,V]=l(1),[q,U]=l(!0),[J,K]=l(),[X,Y]=l(!1),Z="GP_FUNNEL_PAGE"===H,ee="GP_COLLECTION"==H;ee&&(A.productSrc="DynamicCollection",A.collectionId=$?.collectionId??"latest");let et=A?.productSrc??"Collection",eo=R?.productId&&R?.productId!==A.relatedProductId?R?.productId:A.relatedProductId,er=m(),ed=u(e=>e.publicStoreFrontData),el=i(()=>g(ed)?h(ed):er,[ed]),{data:ei}=p(B&&eo?eo:void 0,{revalidateOnMount:Q||z},el),ea=A.relatedTag&&"tags"===A.relatedTag[0]&&(!ei?.tags||ei?.tags.length===0),ec=A.relatedTag&&"collection"===A.relatedTag[0]&&(!ei?.collections?.edges||ei?.collections.edges.length===0),en=A.relatedTag&&"vendor"===A.relatedTag[0]&&!ei?.vendor,es=ea||ec||en,eu=P(J,{revalidateOnMount:Q||z},el),em=Q||z,eg=f("PickProduct"===et?A?.productIds:void 0,{revalidateOnMount:em},{defaultSelectedProductCount:A?.numOfSelectedProducts}),eh=i(()=>({id:A?.collectionId??"latest",numberOfProducts:G?.numberOfProducts??4,orderBy:G?.orderBy}),[A?.collectionId,Number(G?.numberOfProducts),G?.orderBy]),ep=b("PickProduct"!==et?eh:void 0,{revalidateOnMount:em});a(()=>{if(B&&ei&&A.relatedTag&&"recommended-product"!==A.relatedType){let e;switch(Y(!1),A.hasRelatedExclude&&(e=A?.relatedExclude&&A.relatedExclude.split(",").map(e=>e.trim())),A.relatedTag[0]){case"vendor":K({vendor:A.relatedTag&&"vendor"===A.relatedTag[0]?ei?.vendor:"",limit:G?.numberOfProducts,idNEQ:ei.id});break;case"collection":{let t;let o=ei?.collections?.edges.map(e=>e.node?.id);if(!o||o?.length===0){Y(!0);break}K(t=e&&e.length>0?{idNEQ:ei.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:o},{titleNotIn:e}]}],limit:G?.numberOfProducts}:{idNEQ:ei.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:o}]}],limit:G?.numberOfProducts});break}case"tags":{let t;if(!ei.tags||0===ei.tags.length){Y(!0);break}K(t=e&&e.length>0?{idNEQ:ei.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ei.tags},{nameNotIn:e}]}],limit:G?.numberOfProducts}:{idNEQ:ei.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ei.tags}]}],limit:G?.numberOfProducts})}}}},[ei,A.relatedType,A.relatedTag,G?.numberOfProducts,A.relatedExclude,A.hasRelatedExclude,B]);let eP="PickProduct"===et?eg.isValidating:ep.isValidating,ef="PickProduct"===et?eg.isLoading:ep.isLoading,eb="PickProduct"===et?eg.error:ep.error,ek=ep.data?.collections?.edges?.[0]?.node,eT="PickProduct"===et?k(eg.data?.products):k(ek?.products),eI=eu?.data?.products?k(eu?.data?.products):void 0,ev=B&&eI?eI:"PickProduct"===et&&A?.productIds?.length?A?.productIds?.map(e=>eT?.find(t=>t?.baseID===e)).filter(Boolean)??eT:"PickProduct"!==et?eT:eT.filter((e,t)=>t<(A?.numOfSelectedProducts??4)),ey=i(()=>X&&B&&Q||!ev.length&&!ef&&q&&Q,[q,ef,X,B,Q,ev.length]),eO=i(()=>!ev||X&&B,[X,B,ev]),eN=i(()=>{if(!G?.sameHeight)return[];let e=0,t=Math.ceil((ev?.length??0)/+(G?.slidesToShow?.[D]??1));return Array.from(Array(ev?.length??0)).map((o,r)=>(r>=+(G?.slidesToShow?.[D]??1)*(e+1)&&++e,{gridRow:`${1+_*e}/${_+1+_*e}`,marginBottom:e+1<t?L(j?.horizontalGutter,D):void 0}))},[G?.sameHeight,G?.slidesToShow,_,ev?.length,D,j?.horizontalGutter]),eS=i(()=>eP||ef||eb||!ev||X&&B,[eb,ef,X,B,eP,ev]);a(()=>{eS||setTimeout(()=>{let{builderData:e}=x??{},t=e?.childrens?.[0];if(!t)return;let o=document.querySelector(`[data-id=${t}] div`);o&&V(o.childElementCount||1)},Q?0:500)},[x,eS,Q]);let eC=i(()=>({collection:ek,products:ev,settings:{loop:G?.loop??{desktop:!1},scrollMode:G?.scrollMode??{desktop:"snap"},slidesToShow:G?.slidesToShow??{desktop:4,tablet:3,mobile:1},layout:j?.layout,dot:G?.dot,dotStyle:G?.dotStyle,arrow:G?.arrow,controlOverContent:G?.controlOverContent},styles:{horizontalGutter:j?.horizontalGutter,verticalGutter:j?.verticalGutter,fullWidth:j?.fullWidth,spacing:j?.spacing,width:j?.width,height:j?.height}}),[ek,ev,G,j]);if(x?.isPreview&&Z)return e(t,{});if(ey)return e(t,{children:C(q,e(ProductNotFound,{builderAttrs:M,collectionHandle:ek?.handle,productSrc:et,onClose:()=>U(!1),children:W,relatedTagString:F,assignProductNoTags:es,noAssignedProduct:!eo}))});let{productListWrapStyle:eE,productListContentStyle:ew,productListWrapAlignStyle:eL}=S(r),{productListWrapClass:eW}=E(r),ej=()=>e(t,{children:C(j?.layout==="grid",e(O,{...r,productSortedById:ev,generateGridRowArray:eN}),e(N,{...r,productSortedById:ev}))});return o("div",{...M,className:eW,style:eE,children:[!!j?.preloadBgImage&&o(y,{children:[!!j.backgroundImage?.desktop?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage.desktop.image.src,as:"image"}),!!j.backgroundImage?.tablet?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.tablet?.image?.src,as:"image"}),!!j.backgroundImage?.mobile?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.mobile?.image?.src,as:"image"})]}),eP||ef?e(d,{}):eb?o("div",{children:["Error: ",eb?.message]}):eO?e("div",{children:"Products not found"}):e(T,{...eC,children:e("div",{className:"gp-flex gp-w-full",style:eL,children:o("div",{style:ew,children:[Z&&e(v,{}),ej()]})})}),I(W,!0)]})};export{ProductList as default};
+import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import r from"next/dynamic";import d from"../../../common/components/Loading.js";import{useState as l,useMemo as a,useEffect as i}from"react";import{useRenderMode as c,useCurrentDevice as s,usePageType as n,usePageStore as u,useFetchHandle as m,hasPublicStoreFrontData as g,createStoreFrontFetcher as h,useProductQuery as p,useProductsQueryAll as P,useProductsQuery as f,useCollectionQuery as b,flattenConnection as k,ProductListProvider as I,filterToolbarPreview as T}from"@gem-sdk/core";import y from"../SalePageProductListWarning.js";import v from"next/head";import O from"./ProductListGridLayout.js";import w from"./ProductListCarouselLayout.js";import{getStyle as N}from"./common/styles.js";import{If as S}from"@gem-sdk/system";import{getClass as C}from"./common/classes.js";import{getData as E}from"./common/helpers.js";import{getPropertyByDevice as L}from"../../../dialog/common/helpers.js";let ProductNotFound=r(()=>import("../ProductNotFound.js"),{loading:d}),ProductList=r=>{let{children:W,styles:j,builderProps:x,setting:G,builderAttrs:A}=r,{isRelatedProduct:M,productSetting:B}=E(r),F=B.relatedTag&&B.relatedTag[0],{isEditMode:Q,isPreviewSharePageMode:z}=c(),D=s(),H=n(),R=u(e=>e.dynamicProduct),$=u(e=>e.dynamicCollection),[_,V]=l(1),[q,U]=l(!0),[J,K]=l(),[X,Y]=l(!1),Z="GP_FUNNEL_PAGE"===H,ee="GP_COLLECTION"==H;ee&&(B.productSrc="DynamicCollection",B.collectionId=$?.collectionId??"latest");let et=B?.productSrc??"Collection",eo=R?.productId&&R?.productId!==B.relatedProductId?R?.productId:B.relatedProductId,er=m(),ed=u(e=>e.publicStoreFrontData),el=a(()=>g(ed)?h(ed):er,[ed]),{data:ea}=p(M&&eo?eo:void 0,{revalidateOnMount:Q||z},el),ei=B.relatedTag&&"tags"===B.relatedTag[0]&&(!ea?.tags||ea?.tags.length===0),ec=B.relatedTag&&"collection"===B.relatedTag[0]&&(!ea?.collections?.edges||ea?.collections.edges.length===0),es=B.relatedTag&&"vendor"===B.relatedTag[0]&&!ea?.vendor,en=ei||ec||es,eu=P(J,{revalidateOnMount:Q||z},el),em=Q||z,eg=f("PickProduct"===et?B?.productIds:void 0,{revalidateOnMount:em},{defaultSelectedProductCount:B?.numOfSelectedProducts}),eh=a(()=>({id:B?.collectionId??"latest",numberOfProducts:G?.numberOfProducts??4,orderBy:G?.orderBy}),[B?.collectionId,Number(G?.numberOfProducts),G?.orderBy]),ep=b("PickProduct"!==et?eh:void 0,{revalidateOnMount:em});i(()=>{if(M&&ea&&B.relatedTag&&"recommended-product"!==B.relatedType){let e;switch(Y(!1),B.hasRelatedExclude&&(e=B?.relatedExclude&&B.relatedExclude.split(",").map(e=>e.trim())),B.relatedTag[0]){case"vendor":K({first:G?.numberOfProducts,where:{vendor:B.relatedTag&&"vendor"===B.relatedTag[0]?ea?.vendor:"",idNEQ:ea.id}});break;case"collection":{let t;let o=ea?.collections?.edges.map(e=>e.node?.id);if(!o||o?.length===0){Y(!0);break}K(t=e&&e.length>0?{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:o},{titleNotIn:e}]}]}}:{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:o}]}]}});break}case"tags":{let t;if(!ea.tags||0===ea.tags.length){Y(!0);break}K(t=e&&e.length>0?{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ea.tags},{nameNotIn:e}]}]}}:{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ea.tags}]}]}})}}}},[ea,B.relatedType,B.relatedTag,G?.numberOfProducts,B.relatedExclude,B.hasRelatedExclude,M]);let eP="PickProduct"===et?eg.isValidating:ep.isValidating,ef="PickProduct"===et?eg.isLoading:ep.isLoading,eb="PickProduct"===et?eg.error:ep.error,ek=ep.data?.collections?.edges?.[0]?.node,eI="PickProduct"===et?k(eg.data?.products):k(ek?.products),eT=u(e=>e.assignedProductIds),ey=u(e=>e.isApplyAllProducts),ev=a(()=>(eT??[]).length>0&&!ey||ey,[eT,ey]),eO=eu?.data?.products&&ev?k(eu?.data?.products):[],ew=M?eO:"PickProduct"===et&&B?.productIds?.length?B?.productIds?.map(e=>eI?.find(t=>t?.baseID===e)).filter(Boolean)??eI:"PickProduct"!==et?eI:eI.filter((e,t)=>t<(B?.numOfSelectedProducts??4)),eN=a(()=>X&&M&&Q||!ew.length&&!ef&&q&&Q,[q,ef,X,M,Q,ew.length]),eS=a(()=>!ew||X&&M,[X,M,ew]),eC=a(()=>{if(!G?.sameHeight)return[];let e=0,t=Math.ceil((ew?.length??0)/+(G?.slidesToShow?.[D]??1));return Array.from(Array(ew?.length??0)).map((o,r)=>(r>=+(G?.slidesToShow?.[D]??1)*(e+1)&&++e,{gridRow:`${1+_*e}/${_+1+_*e}`,marginBottom:e+1<t?L(j?.horizontalGutter,D):void 0}))},[G?.sameHeight,G?.slidesToShow,_,ew?.length,D,j?.horizontalGutter]),eE=a(()=>eP||ef||eb||!ew||X&&M,[eb,ef,X,M,eP,ew]),eL=ea?.collections?.edges.map(e=>e.node?.id)??[];i(()=>{eE||setTimeout(()=>{let{builderData:e}=x??{},t=e?.childrens?.[0];if(!t)return;let o=document.querySelector(`[data-id=${t}] div`);o&&V(o.childElementCount||1)},Q?0:500)},[x,eE,Q,eL]);let eW=a(()=>({collection:ek,products:ew,settings:{loop:G?.loop??{desktop:!1},scrollMode:G?.scrollMode??{desktop:"snap"},slidesToShow:G?.slidesToShow??{desktop:4,tablet:3,mobile:1},layout:j?.layout,dot:G?.dot,dotStyle:G?.dotStyle,arrow:G?.arrow,controlOverContent:G?.controlOverContent},styles:{horizontalGutter:j?.horizontalGutter,verticalGutter:j?.verticalGutter,fullWidth:j?.fullWidth,spacing:j?.spacing,width:j?.width,height:j?.height}}),[ek,ew,G,j]);if(x?.isPreview&&Z)return e(t,{});if(eN)return e(t,{children:S(q,e(ProductNotFound,{builderAttrs:A,collectionHandle:ek?.handle,productSrc:et,onClose:()=>U(!1),children:W,relatedTagString:F,assignProductNoTags:en,noAssignedProduct:!eo}))});let{productListWrapStyle:ej,productListContentStyle:ex,productListWrapAlignStyle:eG}=N(r),{productListWrapClass:eA}=C(r),eM=()=>e(t,{children:S(j?.layout==="grid",e(O,{...r,productSortedById:ew,generateGridRowArray:eC}),e(w,{...r,productSortedById:ew}))});return o("div",{...A,className:eA,style:ej,children:[!!j?.preloadBgImage&&o(v,{children:[!!j.backgroundImage?.desktop?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage.desktop.image.src,as:"image"}),!!j.backgroundImage?.tablet?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.tablet?.image?.src,as:"image"}),!!j.backgroundImage?.mobile?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.mobile?.image?.src,as:"image"})]}),eP||ef?e(d,{}):eb?o("div",{children:["Error: ",eb?.message]}):eS?e("div",{children:"Products not found"}):e(I,{...eW,children:e("div",{className:"gp-flex gp-w-full",style:eG,children:o("div",{style:ex,children:[Z&&e(y,{}),eM()]})})}),T(W,!0)]})};export{ProductList as default};

package/dist/esm/product/components/product-list-v3/ProductListCarouselItem.liquid.js

@@ -1,10 +1,9 @@
-import{template as t}from"@gem-sdk/core";import{getClass as e}from"./common/classes.js";let ProductListItem=n=>{let{pageContext:o,children:a}=n,{productItemClass:r,gpProductClass:i}=e(n);return t`
+import{template as t}from"@gem-sdk/core";import{getClass as n}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:e,children:a}=o,{productItemClass:r,gpProductClass:i}=n(o);return t`
       <gp-product
-        gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 ,"inventoryQuantity": {{ variant.inventory_quantity }},  "formId": "{{ product_form_id }}"}'
-        gp-data='{"variantSelected": {{ variant | json | escape }}, "quantity": 1, "productUrl":{{ product.url | json | escape }}, "productHandle":{{ product.handle | json | escape }}, "collectionUrl": {{ collection.url | json | escape }}, "collectionHandle": {{ collection.handle | json | escape }},"pageContext" : ${JSON.stringify(o)}}'
+        gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 ,"inventoryQuantity": {{ variant.inventory_quantity | default: 0 }},  "formId": "{{ product_form_id }}"}'
         class="${i}"
-
       >
+        <script gp-data type="application/json">{"variantSelected": {{ variant | json }}, "quantity": 1, "productUrl":{{ product.url | json }}, "productHandle":{{ product.handle | json }}, "collectionUrl": {{ collection.url | json }}, "collectionHandle": {{ collection.handle | json }},"pageContext" : ${JSON.stringify(e)}}</script>
         {%- form 'product', product, id: product_form_id, class: 'form contents ${r}',  data-type: 'add-to-cart-form', autocomplete: 'off' -%}
         <input type="hidden" name="id" value="{{ variant.id }}" />
         <input type="hidden" min="1" name="quantity"  value="{{ quantity }}" />

package/dist/esm/product/components/product-list-v3/ProductListGridItem.liquid.js

@@ -1,14 +1,13 @@
-import{template as t,RenderChildren as e}from"@gem-sdk/core";import{getClass as n}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:a,rawChildren:r}=o,{productItemClass:i,gpProductClass:c}=n(o),d=()=>t`
-      ${r?.map((n,o)=>{if(n)return t`
-            ${e({...n,index:o})}
+import{template as t,RenderChildren as n}from"@gem-sdk/core";import{getClass as e}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:a,rawChildren:r}=o,{productItemClass:i,gpProductClass:c}=e(o),d=()=>t`
+      ${r?.map((e,o)=>{if(e)return t`
+            ${n({...e,index:o})}
           `}).join("")}
     `;return t`
       <gp-product
-        gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 ,"inventoryQuantity": {{ variant.inventory_quantity }},  "formId": "{{ product_form_id }}"}'
-        gp-data='{"variantSelected": {{ variant | json | escape }}, "quantity": 1, "productUrl":{{ product.url | json | escape }}, "productHandle":{{ product.handle | json | escape }}, "collectionUrl": {{ collection.url | json | escape }}, "collectionHandle": {{ collection.handle | json | escape }},"pageContext" : ${JSON.stringify(a)}}'
+        gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 ,"inventoryQuantity": {{ variant.inventory_quantity | default: 0 }},  "formId": "{{ product_form_id }}"}'
         class="${c}"
-
       >
+        <script gp-data type="application/json">{"variantSelected": {{ variant | json }}, "quantity": 1, "productUrl":{{ product.url | json }}, "productHandle":{{ product.handle | json }}, "collectionUrl": {{ collection.url | json }}, "collectionHandle": {{ collection.handle | json }},"pageContext" : ${JSON.stringify(a)}}</script>
         {%- form 'product', product, id: product_form_id, class: 'form contents ${i}',  data-type: 'add-to-cart-form', autocomplete: 'off' -%}
         <input type="hidden" name="id" value="{{ variant.id }}" />
         <input type="hidden" min="1" name="quantity"  value="{{ quantity }}" />

package/dist/esm/product/components/product-list-v3/ProductListGridLayout.liquid.js

@@ -1,8 +1,10 @@
-import{template as t,RenderIf as i}from"@gem-sdk/core";import{getStyle as o}from"./common/styles.js";import{getClass as r}from"./common/classes.js";import{getAttr as s}from"./common/attrs.js";import d from"./ProductListGridItem.liquid.js";import{getStaticLocale as e}from"../../../helpers.js";let ProductListGridLayout=a=>{let{setting:n,builderProps:c,styles:m,productListId:u,productSrc:p}=a,{gridLayoutStyle:l}=o(a),{gridLayoutClass:f}=r(a),{productListAttr:g}=s(a),$=i=>t`
+import{template as t,RenderIf as i}from"@gem-sdk/core";import{getStyle as o}from"./common/styles.js";import{getClass as s}from"./common/classes.js";import{getAttr as r}from"./common/attrs.js";import d from"./ProductListGridItem.liquid.js";import{getStaticLocale as e}from"../../../helpers.js";let ProductListGridLayout=a=>{let{setting:n,builderProps:p,styles:c,productListId:m,productSrc:u}=a,{gridLayoutStyle:l}=o(a),{gridLayoutClass:f}=s(a),{productListAttr:g}=r(a),$=i=>t`
       <gp-same-height
         class="gp-contents"
         style="visibility: hidden"
-        gp-data='${JSON.stringify({targetUid:c?.builderData?.childrens?.[0],slidesToShow:n?.slidesToShow,rowGap:m?.horizontalGutter})}'>
+      >
+        <script gp-data type="application/json">${JSON.stringify({targetUid:p?.builderData?.childrens?.[0],slidesToShow:n?.slidesToShow,rowGap:c?.horizontalGutter})}
+        </script>
         ${i}
       </gp-same-height>
     `,h=()=>t`
@@ -11,12 +13,12 @@ import{template as t,RenderIf as i}from"@gem-sdk/core";import{getStyle as o}from
       {%- if product.id != empty -%}
       {%- assign count = count | plus: 1 -%}
       {%- assign variant = product.selected_or_first_available_variant -%}
-      {%- assign product_form_id = 'product-form-' | append: "${c?.uid}" | append: product.id -%}
+      {%- assign product_form_id = 'product-form-' | append: "${p?.uid}" | append: product.id -%}
         ${d({...a})}
       {%- endif -%}
       {% endfor %}
-      {%- if count == 0 and ${u?.length} == 0 -%}
-        {% if '${p}' == 'RelatedProduct' -%}
+      {%- if count == 0 and ${m?.length} == 0 -%}
+        {% if '${u}' == 'RelatedProduct' -%}
           <div>${e("ProductList","no_related_products")}</div>
         {% else %}
           <div>${e("ProductList","no_products_found")}</div>

package/dist/esm/product/components/product-list-v3/common/classes.js

@@ -1 +1 @@
-import{createClass as e}from"@gem-sdk/system";let getClass=g=>{let{setting:s,className:t,builderProps:i,advanced:p,styles:r}=g,l=e({...t&&{[t]:!0},...p?.cssClass&&{[p.cssClass]:!0},"!gp-m-auto gp-grid gp-w-full":!0,"gp-grid-flow-row":s?.sameHeight}),a=e({"gp-relative gp-flex":!0,[`${i?.builderData?.uid}`]:!0}),d=e({"gp-contents":s?.sameHeight&&r?.layout==="grid"}),o=e({"gp-justify-center":!0,"gp-overflow-hidden":!s?.sameHeight}),m=e({"gp-contents [&>*>div]:gp-contents [&>*]:gp-grid-rows-[subgrid] [&>*]:gp-gap-y-0":s?.sameHeight,[`gp-child-item-${i?.uid}`]:!0});return{gridLayoutClass:l,productItemClass:m,carouselClass:o,productListWrapClass:a,gpProductClass:d}};export{getClass};
+import{createClass as e}from"@gem-sdk/system";let getClass=g=>{let{setting:t,className:s,builderProps:i,advanced:p,styles:r}=g,l=e({...s&&{[s]:!0},...p?.cssClass&&{[p.cssClass]:!0},"!gp-m-auto gp-grid gp-w-full":!0,"gp-grid-flow-row":t?.sameHeight}),a=e({"gp-relative gp-flex":!0,[`${i?.builderData?.uid}`]:!0}),d=e({"gp-contents":t?.sameHeight&&r?.layout==="grid"}),o=e({"gp-justify-center":!0,"gp-overflow-hidden":!t?.sameHeight}),m=e({"gp-contents [&>*>div]:gp-contents [&>*]:gp-grid-rows-[subgrid] [&>*]:gp-gap-y-0":t?.sameHeight&&r?.layout==="grid",[`gp-child-item-${i?.uid}`]:!0});return{gridLayoutClass:l,productItemClass:m,carouselClass:o,productListWrapClass:a,gpProductClass:d}};export{getClass};

package/dist/esm/product/components/product-price/ProductPrice.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsxs as e,jsx as r,Fragment as o}from"react/jsx-runtime";import t from"../../../text/components/Text.js";import{createClass as i,createAttr as m}from"@gem-sdk/system";import{getWrapperClasses as s}from"./common/classes.js";import{getAttrs as c}from"./common/attrs.js";import{getTextProps as p}from"./common/helpers.js";import{useGpPrice as d}from"./hooks/useGpPrice.js";import{useEditorMode as l,filterToolbarPreview as a}from"@gem-sdk/core";let ProductPrice=n=>{let{style:f,children:h}=n,g=l(),x="edit"===g,{elementRef:u,moneyFormatted:j,currentProductId:P,isNoComparePrice:y,isNoComparePriceILP:k,shouldHiddenComparePrice:N,emitNoDataSignal:v}=d(n),b=i(s(n)),C=m(c(n,{isILP:!x,productId:P,shouldHiddenComparePrice:N})),H=p(n,j),I={visibility:"hidden",opacity:0,maxWidth:0,maxHeight:0},w=k?I:f;return e("div",{ref:u,...C,className:b,style:w,"aria-hidden":"true",onClick:v,children:[y&&x?r(o,{children:r("div",{className:"gp-flex-col gp-flex gp-justify-between gp-p-2",children:r("p",{className:"gp-text-[#212121] gp-text-[12px] gp-leading-3 ",children:"No compare price"})})}):e(o,{children:[r(t,{...H}),h]}),a(h,!0)]})};export{ProductPrice as default};
+import{jsxs as e,jsx as r,Fragment as o}from"react/jsx-runtime";import t from"../../../text/components/Text.js";import{createClass as i,createAttr as m}from"@gem-sdk/system";import{getWrapperClasses as s}from"./common/classes.js";import{getAttrs as c}from"./common/attrs.js";import{getTextProps as p}from"./common/helpers.js";import{useGpPrice as d}from"./hooks/useGpPrice.js";import{useEditorMode as l,useI18nStore as a,filterToolbarPreview as n}from"@gem-sdk/core";let ProductPrice=f=>{let{style:h,children:g}=f,x=l(),{t:u}=a(),j="edit"===x,{elementRef:P,moneyFormatted:y,currentProductId:k,isNoComparePrice:N,isNoComparePriceILP:v,shouldHiddenComparePrice:b,emitNoDataSignal:C}=d(f),H=i(s(f)),I=m(c(f,{isILP:!j,productId:k,shouldHiddenComparePrice:b})),w=p(f,y),G={visibility:"hidden",opacity:0,maxWidth:0,maxHeight:0},L=v?G:h;return e("div",{ref:P,...I,className:H,style:L,"aria-hidden":"true",onClick:C,children:[N&&j?r(o,{children:r("div",{className:"gp-flex-col gp-flex gp-justify-between gp-p-2",children:r("p",{className:"gp-text-[#212121] gp-text-[12px] gp-leading-3 ",children:u("No compare price")})})}):e(o,{children:[r(t,{...w}),g]}),n(g,!0)]})};export{ProductPrice as default};

package/dist/esm/product/components/product-price/ProductPrice.liquid.js

@@ -1,11 +1,11 @@
-import{template as r,dataStringify as e,isLocalEnv as o,baseAssetURL as s}from"@gem-sdk/core";import{getSettingPreloadData as c}from"../../../helpers.js";import t from"../../../text/components/Text.liquid.js";import{createClass as p,createAttr as m,createStateOrContext as i,Liquid as l}from"@gem-sdk/system";import{getWrapperClasses as a}from"./common/classes.js";import{getAttrs as d}from"./common/attrs.js";import{getTextProps as u}from"./common/helpers.js";let ProductPrice=n=>{let{style:f,setting:y,builderProps:$,pageContext:h}=n,g=p(a(n)),P=m(d(n)),j=u(n),_=i({priceType:y?.priceType,uid:$?.uid,locale:"{{shop.locale}}",currency:"{{shop.currency}}",moneyFormat:`{{ ${h?.showPriceCurrency?"shop.money_with_currency_format":"shop.money_format"} | replace: '"', '\\"' | escape }}`}),S=()=>{let r=o?"{{ 'gp-product-price-v7-5.js' | asset_url }}":`${s}/assets-v2/gp-product-price-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${c('class="gps-link" delay',"src")}="${r}" defer="defer"></script>`};return l(r`
+import{template as r,dataStringify as e,isLocalEnv as o,baseAssetURL as s}from"@gem-sdk/core";import{getSettingPreloadData as c}from"../../../helpers.js";import p from"../../../text/components/Text.liquid.js";import{createClass as t,createAttr as i,createStateOrContext as m,Liquid as a}from"@gem-sdk/system";import{getWrapperClasses as l}from"./common/classes.js";import{getAttrs as u}from"./common/attrs.js";import{getTextProps as d}from"./common/helpers.js";let ProductPrice=n=>{let{style:f,setting:y,builderProps:$,pageContext:h}=n,g=t(l(n)),j=i(u(n)),P=d(n),_=m({priceType:y?.priceType,uid:$?.uid,locale:"{{shop.locale}}",currency:"{{shop.currency}}",moneyFormat:`{{ ${h?.showPriceCurrency?"shop.money_with_currency_format":"shop.money_format"} | replace: '"', '\\"' | escape }}`}),S=()=>{let r=o?"{{ 'gp-product-price-v7-5.js' | asset_url }}":`${s}/assets-v2/gp-product-price-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${c('class="gps-link" delay',"src")}="${r}" defer="defer"></script>`};return a(r`
       <gp-product-price
-        ${P}
+        ${j}
         class="${g}"
         style="${f}"
-        gp-data='${e(_)}'
       >
-        ${t(j)}
+        <script gp-data type="application/json">${e(_)}</script>
+        ${p({...P,isForceValue:!0})}
       </gp-product-price>
       ${S()}
   `)};export{ProductPrice,ProductPrice as default};

package/dist/esm/product/components/product-price/hooks/useGpPrice.js

@@ -1 +1 @@
-import{useRef as e,useMemo as r}from"react";import{useTransition as t}from"../../product-variants/common/common.js";import{useEditorMode as c,useQuantity as i,useCurrentVariant as a,useProductBundleDiscount as n,useInteraction as o,useProduct as u,useShopStore as p,useFormatMoney as d}from"@gem-sdk/core";let useGpPrice=l=>{let{setting:m,builderProps:s}=l,g=e(null),b=c(),{quantity:h,hasUpdatePrice:y}=i(),P=a(),{useProductCompareAtPrice:v}=n(),f=l["bundle-item"],w=P?.price??0,V=P?.salePrice??0,k=m?.priceType==="compare",{trigger:q}=o(),T=u(),x=T?.baseID?.replace("gid://shopify/Product/",""),C=p(e=>e.showPriceCurrency),E=r(()=>f?.quantity?f.quantity:y&&h||1,[h,y,f?.quantity]),G=r(()=>{let e=Number(f?.discountValue);return f?.discountType==="percentage"?w*E*e/100:e},[f?.discountType,f?.discountValue,w,E]),$=r(()=>f?.discountValue?v?(V||w)*E:w*E:V*E,[f?.discountValue,w,E,V,v]),j=r(()=>{let e=w*E;return k?$:G?Math.max(0,e-G):e},[w,E,G,$,k]),D=r(()=>!!k&&(!(V>w)||!(V>=0)),[k,V,w]),I=(e,r)=>{q({event:"price"===r?"gp:rollback:price-change":"gp:rollback:compare-price-change",selector:`[data-id="${s?.uid}"]`,element:g.current}),q({event:"price"===r?"gp:price-change":"gp:compare-price-change",data:e,selector:`[data-id="${s?.uid}"]`,element:g.current})};t(e=>{e!==w&&I(w,"price")},[w]),t(e=>{e!==V&&I(V,"compare")},[V]);let M=()=>{if("edit"!==b)return;let e=new CustomEvent("editor:product-source-no-data-warning",{bubbles:!0,detail:{uid:s?.uid,value:!j&&k,tag:"ProductPrice"}});window.dispatchEvent(e)},N=d(j??0,C||!1),z=k&&!j,A="edit"!==b&&z;return{elementRef:g,moneyFormatted:N,currentProductId:x,isNoComparePrice:z,isNoComparePriceILP:A,emitNoDataSignal:M,shouldHiddenComparePrice:D}};export{useGpPrice};
+import{useRef as e,useMemo as r}from"react";import{useTransition as t}from"../../product-variants/common/common.js";import{useEditorMode as c,useQuantity as i,useCurrentVariant as a,useProductBundleDiscount as n,convertDecimalToNumber as o,useInteraction as u,useProduct as p,useShopStore as d,useFormatMoney as l}from"@gem-sdk/core";let useGpPrice=m=>{let{setting:s,builderProps:g}=m,b=e(null),h=c(),{quantity:y,hasUpdatePrice:P}=i(),v=a(),{useProductCompareAtPrice:f}=n(),w=m["bundle-item"],V=o(v?.price)??0,k=o(v?.salePrice)??0,q=s?.priceType==="compare",{trigger:T}=u(),x=p(),C=x?.baseID?.replace("gid://shopify/Product/",""),E=d(e=>e.showPriceCurrency),G=r(()=>w?.quantity?w.quantity:P&&y||1,[y,P,w?.quantity]),$=r(()=>{let e=Number(w?.discountValue);return w?.discountType==="percentage"?V*G*e/100:e},[w?.discountType,w?.discountValue,V,G]),j=r(()=>w?.discountValue?f?(k||V)*G:V*G:k*G,[w?.discountValue,V,G,k,f]),D=r(()=>{let e=V*G;return q?j:$?Math.max(0,e-$):e},[V,G,$,j,q]),I=r(()=>!!q&&(!(k>V)||!(k>=0)),[q,k,V]),M=(e,r)=>{T({event:"price"===r?"gp:rollback:price-change":"gp:rollback:compare-price-change",selector:`[data-id="${g?.uid}"]`,element:b.current}),T({event:"price"===r?"gp:price-change":"gp:compare-price-change",data:e,selector:`[data-id="${g?.uid}"]`,element:b.current})};t(e=>{e!==V&&M(V,"price")},[V]),t(e=>{e!==k&&M(k,"compare")},[k]);let N=()=>{if("edit"!==h)return;let e=new CustomEvent("editor:product-source-no-data-warning",{bubbles:!0,detail:{uid:g?.uid,value:!D&&q,tag:"ProductPrice"}});window.dispatchEvent(e)},z=l(D??0,E||!1),A=q&&!D,B="edit"!==h&&A;return{elementRef:b,moneyFormatted:z,currentProductId:C,isNoComparePrice:A,isNoComparePriceILP:B,emitNoDataSignal:N,shouldHiddenComparePrice:I}};export{useGpPrice};

package/dist/esm/product/components/product-properties/ProductProperties.liquid.js

@@ -1,22 +1,22 @@
-import{composeClasses as r,template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as o}from"@gem-sdk/core";import p from"./property-choice/ProductPropertyChoice.liquid.js";import l from"./property-input/ProductPropertyInput.liquid.js";import i from"./property-select/ProductPropertySelect.liquid.js";import{getSettingPreloadData as d}from"../../../helpers.js";import{createAttr as c,createStyle as m,createClass as a}from"@gem-sdk/system";import{getContents as n,getLabelContent as u}from"./common/helpers.js";import{getWrapperLiquidAttrs as $,getWrapperErrorMessageAttrs as y}from"./common/attrs.js";import{getWrapperStyles as f,getLabelStyles as g,getLabelContentStyles as h,getWrapperErrorMessageStyles as v}from"./common/styles.js";import{getLabelClasses as C,getLiquidTagClasses as P,getLabelWrapperClasses as j,getWrapperErrorMessageClasses as w}from"./common/classes.js";let ProductProperties=({setting:x,styles:S,builderProps:k,advanced:E,pageContext:M})=>{let{name:b,type:q,childItem:V,translate:Z}=x??{},{isDisplayLabel:A=!0}=S??{};x&&!b&&(x.name="Property");let G=k?.uid,{displayLabel:I}=n(G,M,x),_=c({...$(G,M,x)}),B=m({...f(S)}),F=m({...g(S)}),N=a({...C(S)}),O=a({...P(x)}),R=a({...j(E)}),T=m({...h()}),z=u(x),D=a({...w(),...r("data-[hidden=true]:gp-hidden")}),H=m({...v(S)}),J=c({...y()});return e`
-    <gp-product-property ${{..._}} class="${O}"
-      style="${B}"
+import{composeClasses as r,template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as o}from"@gem-sdk/core";import p from"./property-choice/ProductPropertyChoice.liquid.js";import l from"./property-input/ProductPropertyInput.liquid.js";import i from"./property-select/ProductPropertySelect.liquid.js";import{getSettingPreloadData as d}from"../../../helpers.js";import{createAttr as c,createStyle as m,createClass as a}from"@gem-sdk/system";import{getContents as n,getLabelContent as u}from"./common/helpers.js";import{getWrapperLiquidAttrs as $,getWrapperErrorMessageAttrs as y}from"./common/attrs.js";import{getWrapperStyles as f,getLabelStyles as g,getLabelContentStyles as h,getWrapperErrorMessageStyles as v}from"./common/styles.js";import{getLabelClasses as C,getLiquidTagClasses as P,getLabelWrapperClasses as j,getWrapperErrorMessageClasses as w}from"./common/classes.js";let ProductProperties=({setting:x,styles:S,builderProps:k,advanced:E,pageContext:M})=>{let{name:b,type:q,childItem:V}=x??{},{isDisplayLabel:Z=!0}=S??{};x&&!b&&(x.name="Property");let A=k?.uid,{displayLabel:G}=n(A,M,x),I=c({...$(A,M,x)}),_=m({...f(S)}),B=m({...g(S)}),F=a({...C(S)}),N=a({...P(x)}),O=a({...j(E)}),R=m({...h()}),T=u(x),z=a({...w(),...r("data-[hidden=true]:gp-hidden")}),D=m({...v(S)}),H=c({...y()});return e`
+    <gp-product-property ${{...I}} class="${N}"
+      style="${_}"
     >
-      ${t(A,e`<div class="${R}">
-        <label htmlFor="${G}-${b}" class="${N}" style="${F}">
-          ${I}
-          <span style="${T}">${z}</span>
+      ${t(Z,e`<div class="${O}">
+        <label htmlFor="${A}-${b}" class="${F}" style="${B}">
+          ${G}
+          <span style="${R}">${T}</span>
         </label>
       </div>`)}
 
       <div>
         ${t("dropdown"===q,i({setting:x,styles:S,builderProps:k,pageContext:M}))}
-        ${t("checkbox"===q||"radio"===q,p({setting:{...x,childItem:V,name:b,translate:Z},styles:S,builderProps:k,pageContext:M}))}
+        ${t("checkbox"===q||"radio"===q,p({setting:{...x,childItem:V,name:b},styles:S,builderProps:k,pageContext:M}))}
         ${t("text"===q||"textarea"===q||"email"===q||"hidden"===q,l({setting:x,styles:S,builderProps:k,pageContext:M}))}
         <div
-          ${{...J}}
-          class="${D}"
-          style="${H}"
+          ${{...H}}
+          class="${z}"
+          style="${D}"
         >
           <svg
             width="16"

package/dist/esm/product/components/product-properties/common/helpers.js

@@ -1 +1 @@
-import{getDynamicSourceLocales as e}from"../../../../helpers.js";let getContents=(t,i,n)=>{let{label:l,translate:s,invalidNumberMessage:a,invalidEmailMessage:d,requiredMessage:g,invalidLengthMessage:r}=n??{},u=e({val:l,uid:t,settingId:"label",pageContext:i,translate:s}),v=e({val:a,uid:t,settingId:"invalidNumberMessage",pageContext:i,translate:s}),o=e({val:d,uid:t,settingId:"invalidEmailMessage",pageContext:i,translate:s}),I=e({val:g,uid:t,settingId:"requiredMessage",pageContext:i,translate:s}),b=e({val:r,uid:t,settingId:"invalidLengthMessage",pageContext:i,translate:s});return{displayLabel:u,invalidNumberMessageDisplay:v,invalidEmailMessageDisplay:o,requiredMessageDisplay:I,invalidLengthMessageDisplay:b}},getLabelContent=e=>{let{label:t,required:i}=e??{};return i&&t?" *":""};export{getContents,getLabelContent};
+import{getDynamicSourceLocales as e,createSettingId as t}from"../../../../helpers.js";import{ProductProperties as i}from"../../../settings/product-properties/configs/translate.js";let getContents=(d,s,n)=>{let{label:a,invalidNumberMessage:l,invalidEmailMessage:r,requiredMessage:g,invalidLengthMessage:o}=n??{},u=e({val:a,uid:d,settingId:t({id:i?.label?.id}),pageContext:s}),v=e({val:l,uid:d,settingId:t({id:i?.invalidNumberMessage?.id}),pageContext:s}),p=e({val:r,uid:d,settingId:t({id:i?.invalidEmailMessage?.id}),pageContext:s}),m=e({val:g,uid:d,settingId:t({id:i?.requiredMessage?.id}),pageContext:s}),I=e({val:o,uid:d,settingId:t({id:i?.invalidLengthMessage?.id}),pageContext:s});return{displayLabel:u,invalidNumberMessageDisplay:v,invalidEmailMessageDisplay:p,requiredMessageDisplay:m,invalidLengthMessageDisplay:I}},getLabelContent=e=>{let{label:t,required:i}=e??{};return i&&t?" *":""};export{getContents,getLabelContent};

package/dist/esm/product/components/product-properties/property-choice/ProductPropertyChoice.liquid.js

@@ -1,23 +1,23 @@
-import{makeStyleResponsive as e,makeWidth as o,template as r}from"@gem-sdk/core";import{getPPCInlineStyleChoice as t}from"./common/getProductPropertiesChoiceInlineCss.js";import{getDynamicSourceLocales as s}from"../../../../helpers.js";import{createClass as i,createStyle as m,createAttr as c}from"@gem-sdk/system";import{getPPCWrapperClasses as l,getPPCLabelClasses as $,getPPCWrapperClassesMain as d}from"./common/getProductPropertiesChoiceClasses.js";import{getPPCContainerStyles as p,getPPCLabelStyles as u,getPPCInputStyles as a}from"./common/getProductPropertiesChoiceStyles.js";import{getPPCInputAttrs as n}from"./common/getProductPropertiesChoiceAttrs.js";let ProductPropertyChoice=({setting:P,styles:f,builderProps:y,pageContext:h,attributes:C})=>{let g=y?.uid,{name:j,type:v,childItem:b,translate:k}=P??{},{valueTextColor:I,fullWidth:_,width:x}=f??{},w=e("w",o(x,_)),A=`properties[${j}]`,S=t(g,I),q=i({...l()}),z=i({...$(f)}),B=m({...p(f)}),D=i({...d()}),E=m({...u(f)}),F=c({...n(C)}),G=m({...a(f)});return r`<div style="${{...w}}" class="${D}">
-      <style>${S}</style>
+import{makeStyleResponsive as e,makeWidth as o,template as t}from"@gem-sdk/core";import{getPPCInlineStyleChoice as r}from"./common/getProductPropertiesChoiceInlineCss.js";import{getDynamicSourceLocales as s,createSettingId as i}from"../../../../helpers.js";import{createClass as m,createStyle as c,createAttr as l}from"@gem-sdk/system";import{getPPCWrapperClasses as p,getPPCLabelClasses as d,getPPCWrapperClassesMain as $}from"./common/getProductPropertiesChoiceClasses.js";import{getPPCContainerStyles as a,getPPCLabelStyles as n,getPPCInputStyles as u}from"./common/getProductPropertiesChoiceStyles.js";import{getPPCInputAttrs as f}from"./common/getProductPropertiesChoiceAttrs.js";import{ProductProperties as P}from"../../../settings/product-properties/configs/translate.js";let ProductPropertyChoice=({setting:y,styles:g,builderProps:h,pageContext:C,attributes:j})=>{let v=h?.uid,{name:b,type:k,childItem:I}=y??{},{valueTextColor:x,fullWidth:_,width:w}=g??{},A=e("w",o(w,_)),S=`properties[${b}]`,q=r(v,x),z=m({...p()}),B=m({...d(g)}),D=c({...a(g)}),E=m({...$()}),F=c({...n(g)}),G=l({...f(j)}),H=c({...u(g)});return t`<div style="${{...A}}" class="${E}">
+      <style>${q}</style>
 
-      ${b?.map((e,o)=>{let t=s({val:e,uid:g,settingId:`childItem_${o}`,pageContext:h,translate:k});return r`
-            <div class="${q}" style="${B}">
+      ${I?.map((e,o)=>{let r=s({val:e,uid:v,settingId:i({id:P?.childItem?.id,index:o}),pageContext:C});return t`
+            <div class="${z}" style="${D}">
               <input
-                ${{...F}}
-                type="${v}"
-                id="${g}-${j}-${o}"
-                name="${"radio"===v||"checkbox"===v?A:`${A}[]`}"
-                value="${t}"
-                style="${G}"
+                ${{...G}}
+                type="${k}"
+                id="${v}-${b}-${o}"
+                name="${"radio"===k||"checkbox"===k?S:`${S}[]`}"
+                value="${r}"
+                style="${H}"
                 form="{{ product_form_id }}"
               />
               <label
-                for="${g}-${j}-${o}"
-                class="${z}"
-                style="${E}"
+                for="${v}-${b}-${o}"
+                class="${B}"
+                style="${F}"
               >
-                ${t}
+                ${r}
               </label>
             </div>`}).join("")}
       </div>

package/dist/esm/product/components/product-properties/property-input/ProductPropertyInput.liquid.js

@@ -1,15 +1,15 @@
-import{composeClasses as r,template as e}from"@gem-sdk/core";import{getDynamicSourceLocales as m}from"../../../../helpers.js";import{createClass as o,createStyle as t,createAttr as p}from"@gem-sdk/system";import{getClasses as s}from"./common/classes.js";import{getStyles as a}from"./common/styles.js";import{getElementContent as u}from"./common/helpers.js";import{getInputAttrs as i}from"./common/attrs.js";let ProductPropertyInput=({setting:l,styles:n,builderProps:d,pageContext:$,attributes:c})=>{let{name:f,type:h,placeholder:g,required:b,minChar:x,maxChar:y,label:N,translate:j}=l??{minChar:Number,maxChar:Number,minNumber:Number,maxNumber:Number},P="textarea"===h?"textarea":"input",v=m({val:g,uid:d?.uid,settingId:"placeholder",pageContext:$,translate:j}),I=`${v}${g&&b&&!N?" *":""}`,k=o({...s(n),...r("gp-shadow-none group-data-[invalid=true]:gp-border-[#F44336]")}),C=t({...a(n)}),{elementValue:_}=u(l),q=p({...i(c)});return e`
-    <${P}
-      ${{...q}}
-      type="${h}"
-      placeholder="${I}"
-      name="properties[${f}]"
+import{composeClasses as r,template as e}from"@gem-sdk/core";import{getDynamicSourceLocales as t,createSettingId as o}from"../../../../helpers.js";import{createClass as m,createStyle as s,createAttr as p}from"@gem-sdk/system";import{getClasses as a}from"./common/classes.js";import{getStyles as i}from"./common/styles.js";import{getElementContent as n}from"./common/helpers.js";import{getInputAttrs as u}from"./common/attrs.js";import{ProductProperties as d}from"../../../settings/product-properties/configs/translate.js";let ProductPropertyInput=({setting:l,styles:$,builderProps:c,pageContext:f,attributes:g})=>{let{name:h,type:b,placeholder:j,required:x,minChar:y,maxChar:N,label:P}=l??{minChar:Number,maxChar:Number,minNumber:Number,maxNumber:Number},v="textarea"===b?"textarea":"input",I=t({val:j,uid:c?.uid,settingId:o({id:d?.placeholder?.id}),pageContext:f}),k=`${I}${j&&x&&!P?" *":""}`,C=m({...a($),...r("gp-shadow-none group-data-[invalid=true]:gp-border-[#F44336]")}),_=s({...i($)}),{elementValue:q}=n(l),w=p({...u(g)});return e`
+    <${v}
+      ${{...w}}
+      type="${b}"
+      placeholder="${k}"
+      name="properties[${h}]"
       form="{{ product_form_id }}"
-      value="${_}"
-      class="${k}"
-      style="${C}"
-      ${b?`required="${b}"`:""}
-      minlength="${x}"
-      maxlength="${y}"
-    ></${P}>
+      value="${q}"
+      class="${C}"
+      style="${_}"
+      ${x?`required="${x}"`:""}
+      minlength="${y}"
+      maxlength="${N}"
+    ></${v}>
     `};export{ProductPropertyInput as default};

package/dist/esm/product/components/product-properties/property-select/ProductPropertySelect.liquid.js

@@ -1,16 +1,16 @@
-import{composeClasses as o,template as e}from"@gem-sdk/core";import{getDynamicSourceLocales as t}from"../../../../helpers.js";import{createAttr as r,createClass as m,createStyle as s}from"@gem-sdk/system";import{getSelectAttrs as l}from"./common/attrs.js";import{getSelectStyles as p,getOptionStyles as i}from"./common/styles.js";import{getSelectClasses as c}from"./common/classes.js";let ProductPropertySelect=({setting:d,styles:n,builderProps:$,pageContext:a,attributes:f})=>{let u=$?.uid,{name:y,childItem:j,translate:g}=d??{},P=r({...l(d,f)}),h=m({...c(n),...o("gp-shadow-none")}),_=s({...p(n)}),k=s({...i(n)});return e`
+import{composeClasses as t,template as o}from"@gem-sdk/core";import{getDynamicSourceLocales as e,createSettingId as r}from"../../../../helpers.js";import{createAttr as s,createClass as m,createStyle as i}from"@gem-sdk/system";import{getSelectAttrs as p}from"./common/attrs.js";import{getSelectStyles as l,getOptionStyles as c}from"./common/styles.js";import{getSelectClasses as d}from"./common/classes.js";import{ProductProperties as n}from"../../../settings/product-properties/configs/translate.js";let ProductPropertySelect=({setting:a,styles:f,builderProps:u,pageContext:$,attributes:g})=>{let j=u?.uid,{name:y,childItem:P}=a??{},h=s({...p(a,g)}),k=m({...d(f),...t("gp-shadow-none")}),v=i({...l(f)}),I=i({...c(f)});return o`
     <select
-      ${{...P}}
+      ${{...h}}
       name="properties[${y}]"
-      id="${u}-${y}"
-      class="${h}"
+      id="${j}-${y}"
+      class="${k}"
       form="{{ product_form_id }}"
-      style="${_}"
+      style="${v}"
     >
-      ${j?.map((o,r)=>{let m=t({val:o,uid:u,settingId:`childItem_${r}`,pageContext:a,translate:g});return e`
+      ${P?.map((t,s)=>{let m=e({val:t,uid:j,settingId:r({id:n?.childItem?.id,index:s}),pageContext:$});return o`
             <option
               value="${m}"
-              style="${k}"
+              style="${I}"
             >
               ${m}
             </option>`}).join("")}

package/dist/esm/product/components/product-sku/Sku.liquid.js

@@ -1,6 +1,7 @@
-import{template as e,isLocalEnv as t,baseAssetURL as r}from"@gem-sdk/core";import{getSettingPreloadData as s}from"../../../helpers.js";import a from"../../../text/components/Text.liquid.js";import{LiquidUnless as l,LiquidIf as o,If as u}from"@gem-sdk/system";let ProductSku=({setting:i,styles:c,advanced:d,builderProps:p})=>{let n=c?.typo?.attrs?.transform==="capitalize",m=i?.label&&i.label.trim().length?`${n?i.label.toString().toLocaleLowerCase():i.label}`:"";c?.disableHoverColor&&delete c.underlineLink;let g=()=>{let e=t?"{{ 'gp-product-sku-v7-5.js' | asset_url }}":`${r}/assets-v2/gp-product-sku-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${s('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return e`
-    ${l("product","<p>Product not found</p>",`{% assign currentVariant = product.selected_or_first_available_variant %}
-      <gp-product-sku gp-data='${JSON.stringify({label:m})}'>
-        ${a({styles:c,setting:{...i,text:`${o("currentVariant.sku.size > 0 ",`${m} ${u(n,"{{ currentVariant.sku | downcase }}","{{ currentVariant.sku }}")}`)}`,excludeFlex:!0,isForceValue:!0},advanced:d,builderProps:p,className:"gp-product-sku"})}
+import{template as t,isLocalEnv as e,baseAssetURL as r}from"@gem-sdk/core";import{getSettingPreloadData as s}from"../../../helpers.js";import a from"../../../text/components/Text.liquid.js";import{LiquidUnless as o,LiquidIf as l,If as i}from"@gem-sdk/system";let ProductSku=({setting:p,styles:u,advanced:c,builderProps:n})=>{let d=u?.typo?.attrs?.transform==="capitalize",m=p?.label&&p.label.trim().length?`${d?p.label.toString().toLocaleLowerCase():p.label}`:"";u?.disableHoverColor&&delete u.underlineLink;let g=()=>{let t=e?"{{ 'gp-product-sku-v7-5.js' | asset_url }}":`${r}/assets-v2/gp-product-sku-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${s('class="gps-link" delay',"src")}="${t}" defer="defer"></script>`};return t`
+    ${o("product","<p>Product not found</p>",`{% assign currentVariant = product.selected_or_first_available_variant %}
+      <gp-product-sku>
+        <script gp-data type="application/json">${JSON.stringify({label:m})}</script>
+        ${a({styles:u,setting:{...p,text:`${l("currentVariant.sku.size > 0 ",`${m} ${i(d,"{{ currentVariant.sku | downcase }}","{{ currentVariant.sku }}")}`)}`,excludeFlex:!0,isForceValue:!0},advanced:c,builderProps:n,className:"gp-product-sku"})}
       </gp-product-sku>
       ${g()}`)}`};export{ProductSku as default};

package/dist/esm/product/components/product-title/ProductTitle.liquid.js

@@ -1,7 +1,6 @@
-import{template as t,dataStringify as r,isLocalEnv as e,baseAssetURL as o}from"@gem-sdk/core";import{getStaticLocale as p,getSettingPreloadData as s}from"../../../helpers.js";import i from"../../../text/components/Text.liquid.js";import{createAttr as l,createClass as d,createStateOrContext as u,LiquidUnless as c,If as m}from"@gem-sdk/system";import{getTextProps as a}from"./common/helpers.js";let ProductTitle=n=>{let{setting:$,builderProps:f}=n,g=`<p>${p("ProductTitle","product_not_found")}</p>`,k=()=>i(a(n)),P=l({href:"{{ product.url }}",title:"{{ product.title }}"}),j=$?.linkProduct,S=d({"gp-product-title-link-wrapper":!0}),T=u({setting:{linkProduct:$?.linkProduct},uid:f?.uid}),h=()=>{let t=e?"{{ 'gp-product-title-v7-5.js' | asset_url }}":`${o}/assets-v2/gp-product-title-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${s('class="gps-link" delay',"src")}="${t}" defer="defer"></script>`};return c("product",`${g}`,t`
-      <gp-product-title
-        gp-data='${r(T)}'
-      >
+import{template as t,dataStringify as r,isLocalEnv as e,baseAssetURL as p}from"@gem-sdk/core";import{getStaticLocale as o,getSettingPreloadData as i}from"../../../helpers.js";import s from"../../../text/components/Text.liquid.js";import{createAttr as l,createClass as d,createStateOrContext as c,LiquidUnless as u,If as m}from"@gem-sdk/system";import{getTextProps as a}from"./common/helpers.js";let ProductTitle=n=>{let{setting:$,builderProps:f}=n,g=`<p>${o("ProductTitle","product_not_found")}</p>`,k=()=>s(a(n)),P=l({href:"{{ product.url }}",title:"{{ product.title }}"}),j=$?.linkProduct,S=d({"gp-product-title-link-wrapper":!0}),T=c({setting:{linkProduct:$?.linkProduct},uid:f?.uid}),h=()=>{let t=e?"{{ 'gp-product-title-v7-5.js' | asset_url }}":`${p}/assets-v2/gp-product-title-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${i('class="gps-link" delay',"src")}="${t}" defer="defer"></script>`};return u("product",`${g}`,t`
+      <gp-product-title>
+        <script gp-data type="application/json">${r(T)}</script>
         ${m(j,t`<a ${P} class="${S}">
             ${k()}
             </a>`,t`${k()}`)}

package/dist/esm/product/components/product-variants/ProductVariants.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useVariants as e,OptionSpecialStyle as n,DEVICES as r,getResponsiveValueByScreen as i}from"@gem-sdk/core";import a from"../../../text/components/Text.js";import s from"./components/variants/index.js";import m from"./components/dropdown-swatches/Dropdown.js";import p from"./components/dropdown-group/DropdownGroup.js";import l from"../../../common/components/NoDataState.js";import{createClass as c,createAttr as d,createStyle as u,If as f}from"@gem-sdk/system";import{getWrapperStyle as h,getVariantOptionGroupStyle as y}from"./common/main/styles.js";import{getAttrs as g}from"./common/main/getAttr.js";import{getWrapDropdownClass as v,getVariantOptionGroupClass as j}from"./common/main/classes.js";import{getDropdownGroupData as w,getTextVariantTitleData as x}from"./common/main/getData.js";import{useGpVariants as N}from"./hooks/useGpVariants.js";import{getWrapVariantOptionClass as b}from"./common/variants/classes.js";import{getMarginBottomStyle as k}from"./common/variants/styles.js";let ProductVariants=T=>{let{builderProps:A,styles:P,setting:V}=T,{align:D,optionTypo:$,swatchItemWidth:S,dropdownItemWidth:C,swatchSpacing:E,marginBottom:G}=P??{},{label:O,showAsSwatches:W,layout:_,hasPreSelected:z}=V??{},{uid:K}=A??{},R=e(),{mode:q,options:B,variantId:F,elementRef:H,variantGroup:I,isChangeVariant:J,selectedOptions:L,isDefaultVariant:M,getVariantConfiguration:Q,redirectProductShopifyLink:U}=N(T,R),X=()=>{let o={};return r.forEach(t=>{let e=i(S,t);o[t]="auto"===e}),o},Y=()=>{let o={};return r.forEach(t=>{o[t]=C?.[t]==="fill"}),o},Z=()=>{let e=B?.filter(o=>{let t=Q(o.name);return!t?.hide});return e?.map((r,i)=>{let p=Q(r.name),l=p?p.optionType:r.optionType,d=p?p.presets[p.optionType||"rectangle_list"]?.spacing:E,h=(z||F)&&r.name?L?.[r.name]:void 0,g=c(j(D)),v=u(y(E,d)),w=x(T,"React",{optionName:r.name,hasPreSelected:z,selectedOptions:L,styleOptionSelected:l}),N=c(b(_,D)),A=i===e.length-1;return t("div",{className:N,style:u(k(G,A)),children:[f(O,o(a,{...w})),t("div",{className:g,style:v,children:[W&&n.includes(`${l}`)&&r.values.map(t=>{let e=(!!z||!!J||!!F)&&!!r.name&&L?.[r.name]===t.label;return o(s,{variantKey:`${r.id}-${t.id}`,showAsSwatches:W,uid:K,optionName:r.name??"",optionValue:t.label??"",name:r.name,value:t,optionNumber:B.length,optionPosition:i,...P,...V,presetConfiguration:Q(r.name),checked:e,typeOfOption:l||"dropdown",swatchAutoWidth:X(),optionTypo:$},t.id)}),f(("dropdown"===l||W&&!n.includes(`${l}`))&&"radio_buttons"!==l,o(m,{...P,...V,variants:R,option:r,initValue:h,presetConfiguration:Q(r.name),swatchAutoWidth:Y(),optionTypo:$,optionPosition:i,optionNumber:B.length}))]})]},r.id)})},oo=c(v(D)),ot=w(T),oe=()=>o("div",{className:oo,children:o(p,{...ot})});if(M&&"edit"===q)return o(l,{elementType:"secondary",description:"Setup options like colors, sizes with product variant.",descriptionActions:[{text:"Add new variant",callback:U},{text:"sync data",callback:"syncProduct"}]});if(M)return;let on=d(g({uid:K,hasPreSelected:z})),or=u(h(T)),oi=c({"gp-flex gp-flex-col !gp-ml-0":!0});return o("div",{ref:H,...on,className:oi,style:or,children:f(I,oe(),Z())})};export{ProductVariants as default};
+import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useI18nStore as e,useVariants as n,OptionSpecialStyle as r,DEVICES as i,getResponsiveValueByScreen as a}from"@gem-sdk/core";import s from"../../../text/components/Text.js";import m from"./components/variants/index.js";import p from"./components/dropdown-swatches/Dropdown.js";import l from"./components/dropdown-group/DropdownGroup.js";import c from"../../../common/components/NoDataState.js";import{createClass as d,createAttr as u,createStyle as f,If as h}from"@gem-sdk/system";import{getWrapperStyle as y,getVariantOptionGroupStyle as g}from"./common/main/styles.js";import{getAttrs as v}from"./common/main/getAttr.js";import{getWrapDropdownClass as j,getVariantOptionGroupClass as w}from"./common/main/classes.js";import{getDropdownGroupData as x,getTextVariantTitleData as N}from"./common/main/getData.js";import{useGpVariants as b}from"./hooks/useGpVariants.js";import{getWrapVariantOptionClass as k}from"./common/variants/classes.js";import{getMarginBottomStyle as T}from"./common/variants/styles.js";let ProductVariants=A=>{let{t:P}=e(),{builderProps:V,styles:D,setting:$}=A,{align:S,optionTypo:C,swatchItemWidth:E,dropdownItemWidth:G,swatchSpacing:O,marginBottom:W}=D??{},{label:_,showAsSwatches:z,layout:K,hasPreSelected:R}=$??{},{uid:q}=V??{},B=n(),{mode:F,options:H,variantId:I,elementRef:J,variantGroup:L,isChangeVariant:M,selectedOptions:Q,isDefaultVariant:U,getVariantConfiguration:X,redirectProductShopifyLink:Y}=b(A,B),Z=()=>{let o={};return i.forEach(t=>{let e=a(E,t);o[t]="auto"===e}),o},oo=()=>{let o={};return i.forEach(t=>{o[t]=G?.[t]==="fill"}),o},ot=()=>{let e=H?.filter(o=>{let t=X(o.name);return!t?.hide});return e?.map((n,i)=>{let a=X(n.name),l=a?a.optionType:n.optionType,c=a?a.presets[a.optionType||"rectangle_list"]?.spacing:O,u=(R||I)&&n.name?Q?.[n.name]:void 0,y=d(w(S)),v=f(g(O,c)),j=N(A,"React",{optionName:n.name,hasPreSelected:R,selectedOptions:Q,styleOptionSelected:l}),x=d(k(K,S)),b=i===e.length-1;return t("div",{className:x,style:f(T(W,b)),children:[h(_,o(s,{...j})),t("div",{className:y,style:v,children:[z&&r.includes(`${l}`)&&n.values.map(t=>{let e=(!!R||!!M||!!I)&&!!n.name&&Q?.[n.name]===t.label;return o(m,{variantKey:`${n.id}-${t.id}`,showAsSwatches:z,uid:q,optionName:n.name??"",optionValue:t.label??"",name:n.name,value:t,optionNumber:H.length,optionPosition:i,...D,...$,presetConfiguration:X(n.name),checked:e,typeOfOption:l||"dropdown",swatchAutoWidth:Z(),optionTypo:C},t.id)}),h(("dropdown"===l||z&&!r.includes(`${l}`))&&"radio_buttons"!==l,o(p,{...D,...$,variants:B,option:n,initValue:u,presetConfiguration:X(n.name),swatchAutoWidth:oo(),optionTypo:C,optionPosition:i,optionNumber:H.length}))]})]},n.id)})},oe=d(j(S)),on=x(A),or=()=>o("div",{className:oe,children:o(l,{...on})});if(U&&"edit"===F)return o(c,{elementType:"secondary",description:P("Setup options like colors, sizes with product variant."),descriptionActions:[{text:P("Add new variant"),callback:Y},{text:P("sync data"),callback:"syncProduct"}]});if(U)return;let oi=u(v({uid:q,hasPreSelected:R})),oa=f(y(A)),os=d({"gp-flex gp-flex-col !gp-ml-0":!0});return o("div",{ref:J,...oi,className:os,style:oa,children:h(L,or(),ot())})};export{ProductVariants as default};