@gem-sdk/components 5.0.4 → 5.0.6

package/dist/cjs/carousel-v3/components/root/Carousel.liquid.js

@@ -1,23 +1,24 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Arrow_liquid=require("../arrow/Arrow.liquid.js"),Dots_liquid=require("../dot/Dots.liquid.js"),helpers=require("../arrow/common/helpers.js"),helpers$1=require("./common/helpers.js"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),attrs=require("./common/attrs.js"),helpers$2=require("../../../helpers.js");const Carousel=e=>{let{children:r,builderAttrs:s,builderProps:o,styles:t,isHiddenArrowWhenDisabled:l=!0,hiddenDotWhenOnlyOne:a,rootId:i,rawChildren:d,conditionAppendJs:c}=e,n=helpers.mappingNavigationCarousel(e.setting),u={...e,setting:n},{arrowButtonSize:p,arrowBackgroundColor:$,arrowGapToEachSide:v="16",roundedArrow:g,arrowIconSize:h,arrowCustomColor:m,arrowBorder:S,arrowShadow:w,showWhenHover:q}=n??{},{uniqueComponentId:y,loopConfig:C,arrowShowConfig:f,stateData:j}=helpers$1.getData(u),{rootClassRender:_,wrapperClassRender:A,wrapperInnerClass:D,sliderClass:k}=classes.getClass(u),{sliderWrapperStyle:P,rootStyleRender:E,wrapperStyleRender:I,wrapperInnerStyle:b}=styles.getStyle(u),{rootAttrRender:z,sliderAttr:R}=attrs.getAttr(u),x=()=>core.RenderIf(core.isLocalEnv,`<script ${helpers$2.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-carousel-v3-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers$2.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-carousel-v3-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`),G=e=>{let r="next"===e;return Arrow_liquid.default({uid:o?.uid,componentId:y,custom:n?.arrowCustom??"",showArrow:f,arrowButtonSize:p||{},arrowIconSize:h||{},arrowBackgroundColor:$??"",arrowCustomColor:m,gapToEachSize:v,showWhenHover:q,arrowBorder:S||{},arrowCorner:g||{},arrowShadow:w||{},left:!r,onClick:e=>{e.stopPropagation()},vertical:n?.vertical,isHiddenWhenDisabled:l,rootId:i})},O=()=>core.template`
-    ${d?.length?core.WrapRenderChildren({uid:o?.uid??"",customProps:d[0]?.customProps},d.map((e,r)=>{if(e)return core.template`${core.RenderChildren({...e,index:r,parentSettings:n,parentStyle:t,background:n?.background,parentUid:o?.uid})}`})):r??`<div>${helpers$2.getStaticLocale("Carousel","no_slider")}</div>`}`;return core.template`
-    <gp-carousel-v3 gp-data='${j}' ${z} style="${E}" class="${_}">
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Arrow_liquid=require("../arrow/Arrow.liquid.js"),Dots_liquid=require("../dot/Dots.liquid.js"),helpers=require("../arrow/common/helpers.js"),helpers$1=require("./common/helpers.js"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),attrs=require("./common/attrs.js"),helpers$2=require("../../../helpers.js");const Carousel=e=>{let{children:r,builderAttrs:s,builderProps:o,styles:t,isHiddenArrowWhenDisabled:l=!0,hiddenDotWhenOnlyOne:a,rootId:i,rawChildren:d,conditionAppendJs:c,productBadgeLiquid:n}=e,u=helpers.mappingNavigationCarousel(e.setting),p={...e,setting:u},{arrowButtonSize:$,arrowBackgroundColor:v,arrowGapToEachSide:g="16",roundedArrow:h,arrowIconSize:m,arrowCustomColor:S,arrowBorder:w,arrowShadow:q,showWhenHover:y}=u??{},{uniqueComponentId:C,loopConfig:f,arrowShowConfig:j,stateData:_}=helpers$1.getData(p),{rootClassRender:A,wrapperClassRender:D,wrapperInnerClass:k,sliderClass:P}=classes.getClass(p),{sliderWrapperStyle:E,rootStyleRender:I,wrapperStyleRender:b,wrapperInnerStyle:z}=styles.getStyle(p),{rootAttrRender:R,sliderAttr:x}=attrs.getAttr(p),G=()=>core.RenderIf(core.isLocalEnv,`<script ${helpers$2.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-carousel-v3-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers$2.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-carousel-v3-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`),O=e=>{let r="next"===e;return Arrow_liquid.default({uid:o?.uid,componentId:C,custom:u?.arrowCustom??"",showArrow:j,arrowButtonSize:$||{},arrowIconSize:m||{},arrowBackgroundColor:v??"",arrowCustomColor:S,gapToEachSize:g,showWhenHover:y,arrowBorder:w||{},arrowCorner:h||{},arrowShadow:q||{},left:!r,onClick:e=>{e.stopPropagation()},vertical:u?.vertical,isHiddenWhenDisabled:l,rootId:i})},T=()=>core.template`
+    ${d?.length?core.WrapRenderChildren({uid:o?.uid??"",customProps:d[0]?.customProps},d.map((e,r)=>{if(e)return core.template`${core.RenderChildren({...e,index:r,parentSettings:u,parentStyle:t,background:u?.background,parentUid:o?.uid})}`})):r??`<div>${helpers$2.getStaticLocale("Carousel","no_slider")}</div>`}`;return core.template`
+    <gp-carousel-v3 gp-data='${_}' ${R} style="${I}" class="${A}">
       <div
         ${s}
-        class="${A}"
-        style="${I}"
+        class="${D}"
+        style="${b}"
       >
-        <div class="${D}" style="${b}">
-          ${G("prev")}
-          <div ${R} style="${P}">
-            <div class="${k}">
-              ${O()}
+        <div class="${k}" style="${z}">
+          ${n??""}
+          ${O("prev")}
+          <div ${x} style="${E}">
+            <div class="${P}">
+              ${T()}
             </div>
           </div>
-          ${G("next")}
+          ${O("next")}
         </div>
-        ${Dots_liquid.default({loop:C,showDots:n?.dot,dotStyle:n?.dotStyle,dotGapToCarousel:n?.dotGapToCarousel,dotSize:n?.dotSize,vertical:n?.vertical,uniqueComponentId:y,hiddenWhenOnlyOne:a})}
+        ${Dots_liquid.default({loop:f,showDots:u?.dot,dotStyle:u?.dotStyle,dotGapToCarousel:u?.dotGapToCarousel,dotSize:u?.dotSize,vertical:u?.vertical,uniqueComponentId:C,hiddenWhenOnlyOne:a})}
       </div>
     </gp-carousel-v3>
-    ${c?`{% if ${c} %} ${x()} {% endif %}`:x()}
+    ${c?`{% if ${c} %} ${G()} {% endif %}`:G()}
 
   `};exports.default=Carousel;

package/dist/cjs/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.liquid.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),common=require("../../common/common.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),HTML5Embed_liquid=require("../../../../../video/components/HTML5Embed.liquid.js"),Modal3d_liquid=require("../../../../../image/components/Modal3d.liquid.js"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),Video_liquid=require("../../../../../image/components/Video.liquid.js"),_function=require("../../../../helpers/function.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),Carousel_liquid=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),CarouselItem_liquid=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");const FeatureImageWithGallery=({builderPropUID:e,children:t,enableLazyLoadImage:i,...a})=>{let{featuredImageCarouselClasses:s,galleryItemClasses:r,featuredCarouselItemClasses:d}=getProductImagesClassName.getProductImagesClassName({...a,builderProps:{uid:e}}),{featuredImageCarouselStyle:o,featureImageStyle:u,featureImageCarouselOnlyOneImageStyle:l,featureImageOnlyOneImageStyle:m,featureImageCarouselItemStyle:g}=getProductImagesStyles.getProductImagesStyles(a),{featuredImageCarouselSettingAttrs:c}=getProductImagesAttr.getProductImagesAttr(a),n=common.getAspectRatio(a.ftShape),p=()=>`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),common=require("../../common/common.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),HTML5Embed_liquid=require("../../../../../video/components/HTML5Embed.liquid.js"),Modal3d_liquid=require("../../../../../image/components/Modal3d.liquid.js"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),Video_liquid=require("../../../../../image/components/Video.liquid.js"),_function=require("../../../../helpers/function.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),Carousel_liquid=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),CarouselItem_liquid=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");const FeatureImageWithGallery=({builderPropUID:e,children:t,enableLazyLoadImage:i,...a})=>{let{featuredImageCarouselClasses:s,galleryItemClasses:r,featuredCarouselItemClasses:d}=getProductImagesClassName.getProductImagesClassName({...a,builderProps:{uid:e}}),{featuredImageCarouselStyle:u,featureImageStyle:o,featureImageCarouselOnlyOneImageStyle:l,featureImageOnlyOneImageStyle:m,featureImageCarouselItemStyle:g}=getProductImagesStyles.getProductImagesStyles(a),{featuredImageCarouselSettingAttrs:c}=getProductImagesAttr.getProductImagesAttr(a),n=common.getAspectRatio(a.ftShape),p=()=>`
     {% case featureMedia.media_type %}
       {% when 'image' %}
         ${I()}
@@ -45,7 +45,7 @@
       >
         ${p()}
       </div>
-      `})}`,v=productFeaturedImage.checkRenderFeaturedCarousel(a),$="gp-featured-image-wrapper",w=system.LiquidIf("product.media.size > 0",`${t||""} {% assign largestRatio = 0 %}
+      `})}`,v=productFeaturedImage.checkRenderFeaturedCarousel(a),$="gp-featured-image-wrapper",w=system.LiquidIf("product.media.size > 0",`{% assign largestRatio = 0 %}
       ${system.LiquidFor("featureMedia in product.media",`
           {% assign height = featureMedia.height | times: 1.0 %}
           {% assign width = featureMedia.width | times: 1.0 %}
@@ -55,7 +55,7 @@
       ${system.LiquidFor("featureMedia in product.media",`${system.LiquidIf("featureMedia.media_type == 'image'",`${system.LiquidFor("image in product.images",system.LiquidIf("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
         ${M()}`)}
     `,NextImage_liquid.default({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:a?.preload,setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:i})),L=()=>`
-      ${Carousel_liquid.default({builderProps:{uid:e},rootId:`ft-${e}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:$,rootClass:`${s}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:c,rootStyles:u,styles:o,style:{playSpeed:600},disableMarginAuto:!0,children:w})}
+      ${Carousel_liquid.default({builderProps:{uid:e},rootId:`ft-${e}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:$,rootClass:`${s}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:c,rootStyles:o,styles:u,style:{playSpeed:600},disableMarginAuto:!0,children:w,productBadgeLiquid:t||""})}
     `,S=()=>{switch(a?.preDisplay){case"1st-images":return`
           {% assign featureMedia = product.media.first %}
         `;case"1st-3d-mode":return system.LiquidFor("media in product.media",system.LiquidIf("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return system.LiquidFor("media in product.media",system.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
@@ -84,7 +84,7 @@
         ${system.LiquidIf("featureMedia == null","{% assign productImageWidth = 1600 %}")}
         <div
           class='gp-feature-image-carousel gp-feature-image-only'
-          style="${_function.getStyleOfObject(u)}"
+          style="${_function.getStyleOfObject(o)}"
         >
           <div
             class="gp-relative"

package/dist/esm/carousel-v3/components/root/Carousel.liquid.js

@@ -1,23 +1,24 @@
-import{template as o,RenderIf as r,isLocalEnv as e,baseAssetURL as s,WrapRenderChildren as t,RenderChildren as i}from"@gem-sdk/core";import a from"../arrow/Arrow.liquid.js";import l from"../dot/Dots.liquid.js";import{mappingNavigationCarousel as d}from"../arrow/common/helpers.js";import{getData as n}from"./common/helpers.js";import{getClass as p}from"./common/classes.js";import{getStyle as m}from"./common/styles.js";import{getAttr as c}from"./common/attrs.js";import{getSettingPreloadData as u,getStaticLocale as $}from"../../../helpers.js";let Carousel=v=>{let{children:f,builderAttrs:g,builderProps:w,styles:S,isHiddenArrowWhenDisabled:h=!0,hiddenDotWhenOnlyOne:C,rootId:y,rawChildren:j,conditionAppendJs:k}=v,z=d(v.setting),E={...v,setting:z},{arrowButtonSize:I,arrowBackgroundColor:A,arrowGapToEachSide:G="16",roundedArrow:P,arrowIconSize:T,arrowCustomColor:b,arrowBorder:q,arrowShadow:x,showWhenHover:B}=z??{},{uniqueComponentId:D,loopConfig:O,arrowShowConfig:W,stateData:_}=n(E),{rootClassRender:H,wrapperClassRender:M,wrapperInnerClass:N,sliderClass:R}=p(E),{sliderWrapperStyle:U,rootStyleRender:V,wrapperStyleRender:F,wrapperInnerStyle:J}=m(E),{rootAttrRender:K,sliderAttr:L}=c(E),Q=()=>r(e,`<script ${u('class="gps-link" delay',"src")}="{{ 'gp-carousel-v3-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${u('class="gps-link" delay',"src")}="${s}/assets-v2/gp-carousel-v3-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`),X=o=>{let r="next"===o;return a({uid:w?.uid,componentId:D,custom:z?.arrowCustom??"",showArrow:W,arrowButtonSize:I||{},arrowIconSize:T||{},arrowBackgroundColor:A??"",arrowCustomColor:b,gapToEachSize:G,showWhenHover:B,arrowBorder:q||{},arrowCorner:P||{},arrowShadow:x||{},left:!r,onClick:o=>{o.stopPropagation()},vertical:z?.vertical,isHiddenWhenDisabled:h,rootId:y})},Y=()=>o`
-    ${j?.length?t({uid:w?.uid??"",customProps:j[0]?.customProps},j.map((r,e)=>{if(r)return o`${i({...r,index:e,parentSettings:z,parentStyle:S,background:z?.background,parentUid:w?.uid})}`})):f??`<div>${$("Carousel","no_slider")}</div>`}`;return o`
-    <gp-carousel-v3 gp-data='${_}' ${K} style="${V}" class="${H}">
+import{template as o,RenderIf as r,isLocalEnv as e,baseAssetURL as s,WrapRenderChildren as t,RenderChildren as i}from"@gem-sdk/core";import a from"../arrow/Arrow.liquid.js";import l from"../dot/Dots.liquid.js";import{mappingNavigationCarousel as d}from"../arrow/common/helpers.js";import{getData as n}from"./common/helpers.js";import{getClass as p}from"./common/classes.js";import{getStyle as m}from"./common/styles.js";import{getAttr as c}from"./common/attrs.js";import{getSettingPreloadData as u,getStaticLocale as $}from"../../../helpers.js";let Carousel=v=>{let{children:f,builderAttrs:g,builderProps:w,styles:S,isHiddenArrowWhenDisabled:h=!0,hiddenDotWhenOnlyOne:C,rootId:y,rawChildren:j,conditionAppendJs:k,productBadgeLiquid:z}=v,E=d(v.setting),I={...v,setting:E},{arrowButtonSize:A,arrowBackgroundColor:G,arrowGapToEachSide:P="16",roundedArrow:T,arrowIconSize:b,arrowCustomColor:q,arrowBorder:x,arrowShadow:B,showWhenHover:D}=E??{},{uniqueComponentId:O,loopConfig:W,arrowShowConfig:_,stateData:H}=n(I),{rootClassRender:M,wrapperClassRender:N,wrapperInnerClass:R,sliderClass:U}=p(I),{sliderWrapperStyle:V,rootStyleRender:F,wrapperStyleRender:J,wrapperInnerStyle:K}=m(I),{rootAttrRender:L,sliderAttr:Q}=c(I),X=()=>r(e,`<script ${u('class="gps-link" delay',"src")}="{{ 'gp-carousel-v3-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${u('class="gps-link" delay',"src")}="${s}/assets-v2/gp-carousel-v3-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`),Y=o=>{let r="next"===o;return a({uid:w?.uid,componentId:O,custom:E?.arrowCustom??"",showArrow:_,arrowButtonSize:A||{},arrowIconSize:b||{},arrowBackgroundColor:G??"",arrowCustomColor:q,gapToEachSize:P,showWhenHover:D,arrowBorder:x||{},arrowCorner:T||{},arrowShadow:B||{},left:!r,onClick:o=>{o.stopPropagation()},vertical:E?.vertical,isHiddenWhenDisabled:h,rootId:y})},Z=()=>o`
+    ${j?.length?t({uid:w?.uid??"",customProps:j[0]?.customProps},j.map((r,e)=>{if(r)return o`${i({...r,index:e,parentSettings:E,parentStyle:S,background:E?.background,parentUid:w?.uid})}`})):f??`<div>${$("Carousel","no_slider")}</div>`}`;return o`
+    <gp-carousel-v3 gp-data='${H}' ${L} style="${F}" class="${M}">
       <div
         ${g}
-        class="${M}"
-        style="${F}"
+        class="${N}"
+        style="${J}"
       >
-        <div class="${N}" style="${J}">
-          ${X("prev")}
-          <div ${L} style="${U}">
-            <div class="${R}">
-              ${Y()}
+        <div class="${R}" style="${K}">
+          ${z??""}
+          ${Y("prev")}
+          <div ${Q} style="${V}">
+            <div class="${U}">
+              ${Z()}
             </div>
           </div>
-          ${X("next")}
+          ${Y("next")}
         </div>
-        ${l({loop:O,showDots:z?.dot,dotStyle:z?.dotStyle,dotGapToCarousel:z?.dotGapToCarousel,dotSize:z?.dotSize,vertical:z?.vertical,uniqueComponentId:D,hiddenWhenOnlyOne:C})}
+        ${l({loop:W,showDots:E?.dot,dotStyle:E?.dotStyle,dotGapToCarousel:E?.dotGapToCarousel,dotSize:E?.dotSize,vertical:E?.vertical,uniqueComponentId:O,hiddenWhenOnlyOne:C})}
       </div>
     </gp-carousel-v3>
-    ${k?`{% if ${k} %} ${Q()} {% endif %}`:Q()}
+    ${k?`{% if ${k} %} ${X()} {% endif %}`:X()}
 
   `};export{Carousel as default};

package/dist/esm/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.liquid.js

@@ -1,4 +1,4 @@
-import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getVideoHeight as o,getZoomImageClass as u,getZoomLenClass as l}from"../../common/productFeaturedImage.js";import m from"../../../../../video/components/HTML5Embed.liquid.js";import g from"../../../../../image/components/Modal3d.liquid.js";import p from"../../../../../image/components/NextImage.liquid.js";import n from"../../../../../image/components/Video.liquid.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getProductImagesStyles as f}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as h}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as y}from"../../composables/getProductImagesAttr.js";import{LiquidIf as M,LiquidFor as $,Liquid as b,If as _,createStyle as v}from"@gem-sdk/system";import w from"../../../../../carousel-v3/components/root/Carousel.liquid.js";import I from"../../../../../carousel-v3/components/item/CarouselItem.liquid.js";let FeatureImageWithGallery=({builderPropUID:x,children:q,enableLazyLoadImage:j,...z})=>{let{featuredImageCarouselClasses:S,galleryItemClasses:L,featuredCarouselItemClasses:P}=h({...z,builderProps:{uid:x}}),{featuredImageCarouselStyle:R,featureImageStyle:W,featureImageCarouselOnlyOneImageStyle:C,featureImageOnlyOneImageStyle:T,featureImageCarouselItemStyle:N}=f(z),{featuredImageCarouselSettingAttrs:k}=y(z),E=t(z.ftShape),O=()=>`
+import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getVideoHeight as o,getZoomImageClass as u,getZoomLenClass as l}from"../../common/productFeaturedImage.js";import m from"../../../../../video/components/HTML5Embed.liquid.js";import g from"../../../../../image/components/Modal3d.liquid.js";import p from"../../../../../image/components/NextImage.liquid.js";import n from"../../../../../image/components/Video.liquid.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getProductImagesStyles as f}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as h}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as y}from"../../composables/getProductImagesAttr.js";import{LiquidIf as M,LiquidFor as b,Liquid as $,If as _,createStyle as v}from"@gem-sdk/system";import w from"../../../../../carousel-v3/components/root/Carousel.liquid.js";import I from"../../../../../carousel-v3/components/item/CarouselItem.liquid.js";let FeatureImageWithGallery=({builderPropUID:x,children:q,enableLazyLoadImage:j,...z})=>{let{featuredImageCarouselClasses:S,galleryItemClasses:L,featuredCarouselItemClasses:P}=h({...z,builderProps:{uid:x}}),{featuredImageCarouselStyle:R,featureImageStyle:W,featureImageCarouselOnlyOneImageStyle:C,featureImageOnlyOneImageStyle:T,featureImageCarouselItemStyle:N}=f(z),{featuredImageCarouselSettingAttrs:k}=y(z),E=t(z.ftShape),O=()=>`
     {% case featureMedia.media_type %}
       {% when 'image' %}
         ${F()}
@@ -30,8 +30,8 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
       ${M("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
     `)}
     ${p({srcIsLiquidCode:!0,src:M("src != null",s("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:M("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${s("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:z?.ftLayout,aspectRatio:E,qualityType:z?.qualityType,qualityPercent:z?.qualityPercent},priority:z?.preload,className:`gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${e??""}`,enableLazyLoadImage:j})}`,G=()=>a`
-    ${p({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:z?.ftLayout,aspectRatio:E,qualityType:z?.qualityType,qualityPercent:z?.qualityPercent},priority:z?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",enableLazyLoadImage:j})}`,J=r(z.ftShape),B=a=>`
-    ${b(`{% assign productImageWidth = 0 %}
+    ${p({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:z?.ftLayout,aspectRatio:E,qualityType:z?.qualityType,qualityPercent:z?.qualityPercent},priority:z?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",enableLazyLoadImage:j})}`,B=r(z.ftShape),J=a=>`
+    ${$(`{% assign productImageWidth = 0 %}
     {% case featureMedia.media_type %}
       {% when 'image' %}
         {% assign productImageWidth = featureMedia.width %}
@@ -41,29 +41,29 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
     ${I({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${L(`gp-ft-image-item !gp-min-w-full !gp-max-w-full ${a??""}`)}`,parentId:`ft-${x}-{{section.id}}-{{product.id}}`,style:N,customStyle:{width:"{{productImageWidth}}px"},children:`
       <div
         class="gp-w-full gp-relative ${M("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
-        style="${c(e("pb",J))} ${M("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
+        style="${c(e("pb",B))} ${M("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
       >
         ${O()}
       </div>
-      `})}`,K=d(z),Q="gp-featured-image-wrapper",U=M("product.media.size > 0",`${q||""} {% assign largestRatio = 0 %}
-      ${$("featureMedia in product.media",`
+      `})}`,K=d(z),Q="gp-featured-image-wrapper",U=M("product.media.size > 0",`{% assign largestRatio = 0 %}
+      ${b("featureMedia in product.media",`
           {% assign height = featureMedia.height | times: 1.0 %}
           {% assign width = featureMedia.width | times: 1.0 %}
           {% assign ratio = height | divided_by: width %}
           ${M("ratio > largestRatio","{% assign largestRatio = ratio %}")}
         `)}
-      ${$("featureMedia in product.media",`${M("featureMedia.media_type == 'image'",`${$("image in product.images",M("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
-        ${B()}`)}
+      ${b("featureMedia in product.media",`${M("featureMedia.media_type == 'image'",`${b("image in product.images",M("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
+        ${J()}`)}
     `,p({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:z?.preload,setting:{layout:z?.ftLayout,aspectRatio:E,qualityType:z?.qualityType,qualityPercent:z?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:j})),X=()=>`
-      ${w({builderProps:{uid:x},rootId:`ft-${x}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:Q,rootClass:`${S}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:k,rootStyles:W,styles:R,style:{playSpeed:600},disableMarginAuto:!0,children:U})}
+      ${w({builderProps:{uid:x},rootId:`ft-${x}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:Q,rootClass:`${S}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:k,rootStyles:W,styles:R,style:{playSpeed:600},disableMarginAuto:!0,children:U,productBadgeLiquid:q||""})}
     `,Y=()=>{switch(z?.preDisplay){case"1st-images":return`
           {% assign featureMedia = product.media.first %}
-        `;case"1st-3d-mode":return $("media in product.media",M("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return $("media in product.media",M("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
+        `;case"1st-3d-mode":return b("media in product.media",M("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return b("media in product.media",M("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
           {% assign featureMedia = variant.featured_media %}
           {% unless featureMedia %}
           {% assign featureMedia = product.featured_media %}
           {% endunless %}
-        `}},Z=()=>b(`
+        `}},Z=()=>$(`
         {% assign featureMedia = variant.featured_media %}
         {% unless featureMedia %}
         {% assign featureMedia = product.featured_media %}
@@ -100,14 +100,14 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
             >
               <div
                 class="gp-w-full gp-relative ${M("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
-                style="${c(e("pb",J))} ${M("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
+                style="${c(e("pb",B))} ${M("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
               >
                 ${O()}
               </div>
             </div>
           </div>
         </div>
-      `);return b(`
+      `);return $(`
     {% capture featureImageOnlyOne %}
       ${Z()}
     {% endcapture %}

package/dist/types/index.d.ts

@@ -862,6 +862,7 @@ type CarouselProps$1 = BasePropsWrap<CarouselSettingProps$1, CarouselStyleProps$
     isDisableResetSlide?: boolean;
     isProductList?: boolean;
     thumbsSwiper?: string;
+    productBadgeLiquid?: string;
 } & {
     rootId?: string;
     rootClass?: string;
@@ -913,6 +914,7 @@ declare const Carousel$3: React.ForwardRefExoticComponent<_gem_sdk_core.BaseProp
     isDisableResetSlide?: boolean | undefined;
     isProductList?: boolean | undefined;
     thumbsSwiper?: string | undefined;
+    productBadgeLiquid?: string | undefined;
 } & {
     rootId?: string | undefined;
     rootClass?: string | undefined;
@@ -6317,6 +6319,7 @@ declare const _default$3: {
         isDisableResetSlide?: boolean | undefined;
         isProductList?: boolean | undefined;
         thumbsSwiper?: string | undefined;
+        productBadgeLiquid?: string | undefined;
     } & {
         rootId?: string | undefined;
         rootClass?: string | undefined;
@@ -7308,6 +7311,7 @@ declare const _default$2: {
         isDisableResetSlide?: boolean | undefined;
         isProductList?: boolean | undefined;
         thumbsSwiper?: string | undefined;
+        productBadgeLiquid?: string | undefined;
     } & {
         rootId?: string | undefined;
         rootClass?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "5.0.4",
+  "version": "5.0.6",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",