@gem-sdk/components 16.3.1 → 16.3.2

package/dist/cjs/product/components/product-images-v3/common/productFeaturedImage.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core");const isFeatureMedia=e=>!!e&&["EXTERNAL_VIDEO","MODEL_3D","VIDEO"].includes(e),getZoomLenClass=()=>"!gp-flex gp-absolute gp-opacity-0 gp-h-[150px] gp-w-[150px] gp-cursor-none gp-rounded-full gp-bg-no-repeat gp-shadow-glasses gp-bg-white gp-pointer-events-none",getZoomImageClass=()=>"gp-absolute gp-left-0 gp-top-0 gp-opacity-0 gp-transition-opacity gp-bg-white gp-pointer-events-none",getDotStyleForOnlyFeaturedImage=e=>{let o={};return core.DEVICES.forEach(t=>{let r=core.getResponsiveValueByScreen(e.position,t),s=core.getResponsiveValueByScreen(e.dotStyle,t);o={...o,[t]:"only-feature"===r?s:"none"}}),o},getVideoHeight=e=>{if(!e)return null;let o={};return Object.keys(e).forEach(t=>{let r=e[t];r&&(o[t]="cover"===r?"100%":"auto")}),core.makeStyleResponsive("h",o)},checkRenderFeaturedCarousel=e=>{let o=["desktop","mobile","tablet"],t=!1;return o.forEach(o=>{let r=checkShowCarousel(e,o);checkShowCarousel(e,o)&&(t=r)}),t},checkShowCarousel=(e,o)=>"only-feature"!==core.getResponsiveValueByScreen(e.position,o)||"none"!==core.getResponsiveValueByScreen(e.ftNavigationPosition,o)||"none"!==core.getResponsiveValueByScreen(e.ftDotStyle,o)||!0===core.getResponsiveValueByScreen(e.ftLoop,o)||!0===e.ftDragToScroll;exports.checkRenderFeaturedCarousel=checkRenderFeaturedCarousel,exports.getDotStyleForOnlyFeaturedImage=getDotStyleForOnlyFeaturedImage,exports.getVideoHeight=getVideoHeight,exports.getZoomImageClass=getZoomImageClass,exports.getZoomLenClass=getZoomLenClass,exports.isFeatureMedia=isFeatureMedia;
+"use strict";var core=require("@gem-sdk/core");const isFeatureMedia=e=>!!e&&["EXTERNAL_VIDEO","MODEL_3D","VIDEO"].includes(e),getZoomLenClass=()=>"!gp-flex gp-absolute gp-opacity-0 gp-h-[150px] gp-w-[150px] gp-cursor-none gp-rounded-full gp-bg-no-repeat gp-shadow-glasses gp-bg-white gp-pointer-events-none",getZoomImageClass=()=>"gp-absolute gp-left-0 gp-top-0 gp-opacity-0 gp-transition-opacity gp-bg-white gp-pointer-events-none",getDotStyleForOnlyFeaturedImage=e=>{let o={};return core.DEVICES.forEach(t=>{let r=core.getResponsiveValueByScreen(e.position,t),s=core.getResponsiveValueByScreen(e.dotStyle,t);o={...o,[t]:"only-feature"===r?s:"none"}}),o},getVideoHeight=({ftLayout:e,ftShape:o})=>{if(!e)return null;let t={};return Object.keys(e).forEach(r=>{let s=e[r],a=core.getResponsiveValueByScreen(o,r),n=a?.shape==="original";s&&(t[r]=n||"cover"===s?"100%":"auto")}),core.makeStyleResponsive("h",t)},checkRenderFeaturedCarousel=e=>{let o=["desktop","mobile","tablet"],t=!1;return o.forEach(o=>{let r=checkShowCarousel(e,o);checkShowCarousel(e,o)&&(t=r)}),t},checkShowCarousel=(e,o)=>"only-feature"!==core.getResponsiveValueByScreen(e.position,o)||"none"!==core.getResponsiveValueByScreen(e.ftNavigationPosition,o)||"none"!==core.getResponsiveValueByScreen(e.ftDotStyle,o)||!0===core.getResponsiveValueByScreen(e.ftLoop,o)||!0===e.ftDragToScroll;exports.checkRenderFeaturedCarousel=checkRenderFeaturedCarousel,exports.getDotStyleForOnlyFeaturedImage=getDotStyleForOnlyFeaturedImage,exports.getVideoHeight=getVideoHeight,exports.getZoomImageClass=getZoomImageClass,exports.getZoomLenClass=getZoomLenClass,exports.isFeatureMedia=isFeatureMedia;

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:u,featureImageStyle:o,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:m,featureImageOnlyOneImageStyle:l,featureImageCarouselItemStyle:g}=getProductImagesStyles.getProductImagesStyles(a),{featuredImageCarouselSettingAttrs:c}=getProductImagesAttr.getProductImagesAttr(a),n=common.getAspectRatio(a.ftShape),p=()=>`
     {% case featureMedia.media_type %}
       {% when 'image' %}
         ${I()}
@@ -11,15 +11,15 @@
       {% when 'model' %}
         ${f()}
       {% else %}
-        ${_()}
+        ${q()}
     {% endcase %}
-    `,f=()=>Modal3d_liquid.default({src:system.LiquidIf("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:n}),y=()=>Video_liquid.default({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:n}),h=()=>{let e=system.createStyle({...productFeaturedImage.getVideoHeight(a?.ftLayout),...core.makeStyleResponsive("objf",a?.ftLayout)}),t=system.createStyle({...productFeaturedImage.getVideoHeight(a?.ftLayout)});return HTML5Embed_liquid.default({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:t,poster:{altText:"{{featureMedia.alt | escape}}"},style:{width:"100%","max-height":"100%",...e},className:"gp-invisible"})},I=()=>core.template`
-      ${q(core.cls("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==a.hoverEffect},"{{shouldHidden}}"))}
+    `,f=()=>Modal3d_liquid.default({src:system.LiquidIf("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:n}),y=()=>Video_liquid.default({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:n}),h=()=>{let e=system.createStyle({...productFeaturedImage.getVideoHeight({ftLayout:a?.ftLayout,ftShape:a?.ftShape}),...core.makeStyleResponsive("objf",a?.ftLayout)}),t=system.createStyle({...productFeaturedImage.getVideoHeight({ftLayout:a?.ftLayout,ftShape:a?.ftShape})});return HTML5Embed_liquid.default({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:t,poster:{altText:"{{featureMedia.alt | escape}}"},style:{width:"100%","max-height":"100%",...e},className:"gp-invisible"})},I=()=>core.template`
+      ${_(core.cls("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==a.hoverEffect},"{{shouldHidden}}"))}
       ${system.If(a?.hoverEffect!=="none",`<div class="${core.cls("zoom-element !gp-max-w-none",productFeaturedImage.getZoomImageClass())}">
-            ${q("image-zoom",!0)}
+            ${_("image-zoom",!0)}
           </div>`," ")}
       ${system.If(a?.hoverEffect=="zoom"&&a?.zoomType=="glasses",`<div class="${core.cls("zoom-lens-element",productFeaturedImage.getZoomLenClass())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
-    `,q=(e,t)=>core.template`
+    `,_=(e,t)=>core.template`
     {% assign src = featureMedia.src %}
     ${system.If(t&&"other"==a.hoverEffect,`{% assign media_length = product.media | size %}
       {% assign other_image_index = ${a.otherImage} | plus: 0 %}
@@ -29,8 +29,8 @@
       {% assign otherImage = product.media[other_image_index] %}
       ${system.LiquidIf("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
     `)}
-    ${NextImage_liquid.default({srcIsLiquidCode:!0,src:system.LiquidIf("src != null",common.getSrcImage("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:system.LiquidIf("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${common.getSrcImage("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.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:i})}`,_=()=>core.template`
-    ${NextImage_liquid.default({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:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.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:i})}`,b=common.getPaddingBottomByShapeSetting(a.ftShape),M=t=>`
+    ${NextImage_liquid.default({srcIsLiquidCode:!0,src:system.LiquidIf("src != null",common.getSrcImage("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:system.LiquidIf("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${common.getSrcImage("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.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:i})}`,q=()=>core.template`
+    ${NextImage_liquid.default({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:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.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:i})}`,M=common.getPaddingBottomByShapeSetting(a.ftShape),b=t=>`
     ${system.Liquid(`{% assign productImageWidth = 0 %}
     {% case featureMedia.media_type %}
       {% when 'image' %}
@@ -41,34 +41,35 @@
     ${CarouselItem_liquid.default({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${r(`gp-ft-image-item !gp-min-w-full !gp-max-w-full ${t??""}`)}`,parentId:`ft-${e}-{{section.id}}-{{product.id}}`,style:g,customStyle:{width:"{{productImageWidth}}px"},children:`
       <div
         class="gp-w-full gp-relative ${system.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
-        style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",b))} ${system.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
+        style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",M))} ${system.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
       >
         ${p()}
       </div>
-      `})}`,v=productFeaturedImage.checkRenderFeaturedCarousel(a),$="gp-featured-image-wrapper",w=system.LiquidIf("product.media.size > 0",`{% assign largestRatio = 0 %}
+      `})}`,v=productFeaturedImage.checkRenderFeaturedCarousel(a),w="gp-featured-image-wrapper",$=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 %}
+          ${system.LiquidIf("featureMedia.media_type == 'video' and featureMedia.preview_image",`{% assign height = featureMedia.preview_image.height | times: 1.0 %}
+            {% assign width = featureMedia.preview_image.width | times: 1.0 %}`,`{% assign height = featureMedia.height | times: 1.0 %}
+            {% assign width = featureMedia.width | times: 1.0 %}`)}
           {% assign ratio = height | divided_by: width %}
           ${system.LiquidIf("ratio > largestRatio","{% assign largestRatio = ratio %}")}
         `)}
       ${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()}`)}
+        ${b()}`)}
     `,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:o,styles:u,style:{playSpeed:600},disableMarginAuto:!0,children:w,productBadgeLiquid:t||""})}
-    `,x=()=>{switch(a?.preDisplay){case"1st-images":return`
+      ${Carousel_liquid.default({builderProps:{uid:e},rootId:`ft-${e}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:w,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:$,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`
           {% assign featureMedia = variant.featured_media %}
           {% unless featureMedia %}
           {% assign featureMedia = product.featured_media %}
           {% endunless %}
-        `}},S=()=>system.Liquid(`
+        `}},x=()=>system.Liquid(`
         {% assign featureMedia = variant.featured_media %}
         {% unless featureMedia %}
         {% assign featureMedia = product.featured_media %}
         {% endunless %}
-        ${system.LiquidIf("product.media.size > 1",x())}
+        ${system.LiquidIf("product.media.size > 1",S())}
         {% assign largestRatio = 0 %}
         {% assign height = featureMedia.height | times: 1.0 %}
         {% assign width = featureMedia.width | times: 1.0 %}
@@ -88,19 +89,19 @@
         >
           <div
             class="gp-relative"
-            style="${_function.getStyleOfObject(m)}"
+            style="${_function.getStyleOfObject(l)}"
           >
             ${t}
             <div
               type="gp-feature-image-only"
               product-id="{{product.id}}"
               product-media="{{product.media.size}}"
-              class="${d($)}"
-              style="${_function.getStyleOfObject(l)}"
+              class="${d(w)}"
+              style="${_function.getStyleOfObject(m)}"
             >
               <div
                 class="gp-w-full gp-relative ${system.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
-                style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",b))} ${system.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
+                style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",M))} ${system.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
               >
                 ${p()}
               </div>
@@ -109,7 +110,7 @@
         </div>
       `);return system.Liquid(`
     {% capture featureImageOnlyOne %}
-      ${S()}
+      ${x()}
     {% endcapture %}
     ${system.LiquidIf("product.media.size > 1",`
         ${system.If(v,L()," ")}

package/dist/esm/product/components/product-images-v3/common/productFeaturedImage.js

@@ -1 +1 @@
-import{getResponsiveValueByScreen as e,DEVICES as t,makeStyleResponsive as o}from"@gem-sdk/core";let isFeatureMedia=e=>!!e&&["EXTERNAL_VIDEO","MODEL_3D","VIDEO"].includes(e),getZoomLenClass=()=>"!gp-flex gp-absolute gp-opacity-0 gp-h-[150px] gp-w-[150px] gp-cursor-none gp-rounded-full gp-bg-no-repeat gp-shadow-glasses gp-bg-white gp-pointer-events-none",getZoomImageClass=()=>"gp-absolute gp-left-0 gp-top-0 gp-opacity-0 gp-transition-opacity gp-bg-white gp-pointer-events-none",getDotStyleForOnlyFeaturedImage=o=>{let r={};return t.forEach(t=>{let a=e(o.position,t),g=e(o.dotStyle,t);r={...r,[t]:"only-feature"===a?g:"none"}}),r},getVideoHeight=e=>{if(!e)return null;let t={};return Object.keys(e).forEach(o=>{let r=e[o];r&&(t[o]="cover"===r?"100%":"auto")}),o("h",t)},checkRenderFeaturedCarousel=e=>{let t=["desktop","mobile","tablet"],o=!1;return t.forEach(t=>{let r=checkShowCarousel(e,t);checkShowCarousel(e,t)&&(o=r)}),o},checkShowCarousel=(t,o)=>"only-feature"!==e(t.position,o)||"none"!==e(t.ftNavigationPosition,o)||"none"!==e(t.ftDotStyle,o)||!0===e(t.ftLoop,o)||!0===t.ftDragToScroll;export{checkRenderFeaturedCarousel,getDotStyleForOnlyFeaturedImage,getVideoHeight,getZoomImageClass,getZoomLenClass,isFeatureMedia};
+import{getResponsiveValueByScreen as e,DEVICES as o,makeStyleResponsive as t}from"@gem-sdk/core";let isFeatureMedia=e=>!!e&&["EXTERNAL_VIDEO","MODEL_3D","VIDEO"].includes(e),getZoomLenClass=()=>"!gp-flex gp-absolute gp-opacity-0 gp-h-[150px] gp-w-[150px] gp-cursor-none gp-rounded-full gp-bg-no-repeat gp-shadow-glasses gp-bg-white gp-pointer-events-none",getZoomImageClass=()=>"gp-absolute gp-left-0 gp-top-0 gp-opacity-0 gp-transition-opacity gp-bg-white gp-pointer-events-none",getDotStyleForOnlyFeaturedImage=t=>{let r={};return o.forEach(o=>{let a=e(t.position,o),g=e(t.dotStyle,o);r={...r,[o]:"only-feature"===a?g:"none"}}),r},getVideoHeight=({ftLayout:o,ftShape:r})=>{if(!o)return null;let a={};return Object.keys(o).forEach(t=>{let g=o[t],l=e(r,t),n=l?.shape==="original";g&&(a[t]=n||"cover"===g?"100%":"auto")}),t("h",a)},checkRenderFeaturedCarousel=e=>{let o=["desktop","mobile","tablet"],t=!1;return o.forEach(o=>{let r=checkShowCarousel(e,o);checkShowCarousel(e,o)&&(t=r)}),t},checkShowCarousel=(o,t)=>"only-feature"!==e(o.position,t)||"none"!==e(o.ftNavigationPosition,t)||"none"!==e(o.ftDotStyle,t)||!0===e(o.ftLoop,t)||!0===o.ftDragToScroll;export{checkRenderFeaturedCarousel,getDotStyleForOnlyFeaturedImage,getVideoHeight,getZoomImageClass,getZoomLenClass,isFeatureMedia};

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 p from"../../../../../image/components/Modal3d.liquid.js";import g 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:T,featureImageOnlyOneImageStyle:C,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 m}from"../../common/productFeaturedImage.js";import l from"../../../../../video/components/HTML5Embed.liquid.js";import p from"../../../../../image/components/Modal3d.liquid.js";import g 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 w,If as v,createStyle as $}from"@gem-sdk/system";import b 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:S,...j})=>{let{featuredImageCarouselClasses:z,galleryItemClasses:L,featuredCarouselItemClasses:P}=h({...j,builderProps:{uid:x}}),{featuredImageCarouselStyle:R,featureImageStyle:W,featureImageCarouselOnlyOneImageStyle:T,featureImageOnlyOneImageStyle:C,featureImageCarouselItemStyle:N}=f(j),{featuredImageCarouselSettingAttrs:k}=y(j),E=t(j.ftShape),O=()=>`
     {% case featureMedia.media_type %}
       {% when 'image' %}
         ${F()}
@@ -13,25 +13,25 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
       {% else %}
         ${G()}
     {% endcase %}
-    `,A=()=>p({src:M("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:E}),D=()=>n({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:E}),V=()=>{let a=v({...o(z?.ftLayout),...e("objf",z?.ftLayout)}),i=v({...o(z?.ftLayout)});return m({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:i,poster:{altText:"{{featureMedia.alt | escape}}"},style:{width:"100%","max-height":"100%",...a},className:"gp-invisible"})},F=()=>a`
-      ${H(i("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==z.hoverEffect},"{{shouldHidden}}"))}
-      ${_(z?.hoverEffect!=="none",`<div class="${i("zoom-element !gp-max-w-none",u())}">
+    `,A=()=>p({src:M("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:E}),D=()=>n({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:E}),V=()=>{let a=$({...o({ftLayout:j?.ftLayout,ftShape:j?.ftShape}),...e("objf",j?.ftLayout)}),i=$({...o({ftLayout:j?.ftLayout,ftShape:j?.ftShape})});return l({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:i,poster:{altText:"{{featureMedia.alt | escape}}"},style:{width:"100%","max-height":"100%",...a},className:"gp-invisible"})},F=()=>a`
+      ${H(i("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==j.hoverEffect},"{{shouldHidden}}"))}
+      ${v(j?.hoverEffect!=="none",`<div class="${i("zoom-element !gp-max-w-none",u())}">
             ${H("image-zoom",!0)}
           </div>`," ")}
-      ${_(z?.hoverEffect=="zoom"&&z?.zoomType=="glasses",`<div class="${i("zoom-lens-element",l())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
+      ${v(j?.hoverEffect=="zoom"&&j?.zoomType=="glasses",`<div class="${i("zoom-lens-element",m())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
     `,H=(e,i)=>a`
     {% assign src = featureMedia.src %}
-    ${_(i&&"other"==z.hoverEffect,`{% assign media_length = product.media | size %}
-      {% assign other_image_index = ${z.otherImage} | plus: 0 %}
+    ${v(i&&"other"==j.hoverEffect,`{% assign media_length = product.media | size %}
+      {% assign other_image_index = ${j.otherImage} | plus: 0 %}
       {% if other_image_index >= media_length %}
         {% assign other_image_index = media_length | minus: 1 %}
       {% endif %}
       {% assign otherImage = product.media[other_image_index] %}
       ${M("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
     `)}
-    ${g({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`
-    ${g({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 %}
+    ${g({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:j?.ftLayout,aspectRatio:E,qualityType:j?.qualityType,qualityPercent:j?.qualityPercent},priority:j?.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:S})}`,G=()=>a`
+    ${g({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:j?.ftLayout,aspectRatio:E,qualityType:j?.qualityType,qualityPercent:j?.qualityPercent},priority:j?.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:S})}`,B=r(j.ftShape),J=a=>`
+    ${w(`{% assign productImageWidth = 0 %}
     {% case featureMedia.media_type %}
       {% when 'image' %}
         {% assign productImageWidth = featureMedia.width %}
@@ -45,25 +45,26 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
       >
         ${O()}
       </div>
-      `})}`,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 %}
+      `})}`,K=d(j),Q="gp-featured-image-wrapper",U=M("product.media.size > 0",`{% assign largestRatio = 0 %}
+      ${_("featureMedia in product.media",`
+          ${M("featureMedia.media_type == 'video' and featureMedia.preview_image",`{% assign height = featureMedia.preview_image.height | times: 1.0 %}
+            {% assign width = featureMedia.preview_image.width | times: 1.0 %}`,`{% 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 %}")}
         `)}
-      ${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 = '' %}")}
+      ${_("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 = '' %}")}
         ${J()}`)}
-    `,g({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,productBadgeLiquid:q||""})}
-    `,Y=()=>{switch(z?.preDisplay){case"1st-images":return`
+    `,g({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:j?.preload,setting:{layout:j?.ftLayout,aspectRatio:E,qualityType:j?.qualityType,qualityPercent:j?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:S})),X=()=>`
+      ${b({builderProps:{uid:x},rootId:`ft-${x}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:Q,rootClass:`${z}`,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(j?.preDisplay){case"1st-images":return`
           {% assign featureMedia = product.media.first %}
-        `;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`
+        `;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`
           {% assign featureMedia = variant.featured_media %}
           {% unless featureMedia %}
           {% assign featureMedia = product.featured_media %}
           {% endunless %}
-        `}},Z=()=>$(`
+        `}},Z=()=>w(`
         {% assign featureMedia = variant.featured_media %}
         {% unless featureMedia %}
         {% assign featureMedia = product.featured_media %}
@@ -107,12 +108,12 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
             </div>
           </div>
         </div>
-      `);return $(`
+      `);return w(`
     {% capture featureImageOnlyOne %}
       ${Z()}
     {% endcapture %}
     ${M("product.media.size > 1",`
-        ${_(K,X()," ")}
-        ${_(!K,"{{ featureImageOnlyOne }}"," ")}
+        ${v(K,X()," ")}
+        ${v(!K,"{{ featureImageOnlyOne }}"," ")}
       `,"{{ featureImageOnlyOne }}")}
   `)};export{FeatureImageWithGallery as default};

package/package.json

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