@gem-sdk/components 4.0.0-staging.1238 → 4.0.0-staging.1239

package/dist/cjs/product/components/product-images-v3/ProductImageV3.js

@@ -1,5 +1,5 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),common=require("./common/common.js"),core=require("@gem-sdk/core"),React=require("react"),FeatureImageWithGallery=require("./components/feature-gallery/FeatureImageWithGallery.js"),OnlyFeatureImage=require("./components/feature-only/OnlyFeatureImage.js"),ProductImagesLightBox=require("./components/lightbox/ProductImagesLightBox.js"),NoDataState=require("../../../common/components/NoDataState.js"),getProductImagesClassName=require("./composables/getProductImagesClassName.js"),getBorderActiveCss=require("./common/getBorderActiveCss.js"),GalleryGrid=require("./components/gallery-grid/GalleryGrid.js");const getProductGallery=e=>e?.medias?.edges.map(e=>e?.node),LAYOUT_FEATURE_IMAGE_GALLERY=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"],ProductImagesV2=e=>{let t=React.useMemo(()=>common.setDefaultWhenUndefineSetting(e),[e]),{redirectProductShopifyLink:a}=core.useProductShopifyEditLink(),{setting:i,styles:o,builderProps:l,builderAttrs:r,style:C,children:s}=t,d=core.useProduct(),c=core.useCurrentDevice(),n=core.useCurrentVariant(),{isChangeSelectedOption:u}=core.useSelectedOption(),m=core.useEditorMode(),g=core.useProductStore(e=>e.setProductFeaturedImage),[p,f]=React.useState(!1),h=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,y=e=>e?.featuredImage,I=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,M=React.useMemo(()=>i?.typeDisplay==="all-images"&&!u,[u,i?.typeDisplay]),D=React.useMemo(()=>{if(M){let e;switch(i?.preDisplay){case"1st-images":e=y(d);break;case"1st-3d-mode":e=I(d);break;case"1st-video":e=h(d);break;case"1st-available-variant":e=n?.media}return g(e),e}},[M,i?.preDisplay,g,d,n?.media]),x=React.useMemo(()=>{let e=getProductGallery(d);return e?.length?e:[{id:d?.featuredImage?.id||"noImageError",src:d?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:d?.featuredImage?.width||480,height:d?.featuredImage?.height||480}]},[d]),R=React.useMemo(()=>x.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[x]),b=React.useMemo(()=>core.getResponsiveValueByScreen(o?.position,c),[c,o?.position]),j=(e,t)=>{v(e),t&&E()},E=()=>{f(!0)},v=e=>{if(!e)return;let t=R[e];if(void 0!==t){let e=x[t];e&&g(e)}};React.useEffect(()=>{if(n&&!M){let e=R[n?.mediaId];if(void 0!==e){let t=x[e]??d?.featuredImage;t&&g(t)}}},[n,R,x,d?.featuredImage,g,M]);let P=React.useMemo(()=>{let e="popup"===core.getResponsiveValueByScreen(i?.ftClickOpenLightBox,c)||core.getResponsiveValueByScreen(i?.clickOpenLightBox,c);return e||"edit"!==m||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[i?.ftClickOpenLightBox,i?.clickOpenLightBox,c,m]),L=()=>x.length>0?React.Children.map(core.filterToolbarPreview(s),e=>React.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,isInsideProductImage:!0,navigationPosition:i?.ftNavigationPosition,imageData:{imageShape:o?.ftShape,imageAlign:o?.align,imageLayout:o?.position},dotData:{dotSize:i?.ftDotSize,dotGapToCarousel:i?.ftDotGapToCarousel,dotStyle:i?.ftDotStyle}}):null):null,V=`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),common=require("./common/common.js"),core=require("@gem-sdk/core"),React=require("react"),FeatureImageWithGallery=require("./components/feature-gallery/FeatureImageWithGallery.js"),OnlyFeatureImage=require("./components/feature-only/OnlyFeatureImage.js"),ProductImagesLightBox=require("./components/lightbox/ProductImagesLightBox.js"),NoDataState=require("../../../common/components/NoDataState.js"),getProductImagesClassName=require("./composables/getProductImagesClassName.js"),getBorderActiveCss=require("./common/getBorderActiveCss.js"),GalleryGrid=require("./components/gallery-grid/GalleryGrid.js");const getProductGallery=e=>e?.medias?.edges.map(e=>e?.node),LAYOUT_FEATURE_IMAGE_GALLERY=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"],ProductImagesV2=e=>{let t=React.useMemo(()=>common.setDefaultWhenUndefineSetting(e),[e]),{redirectProductShopifyLink:a}=core.useProductShopifyEditLink(),{setting:i,styles:l,builderProps:o,builderAttrs:r,style:s,children:C}=t,n=core.useProduct(),d=core.useCurrentDevice(),c=core.useCurrentVariant(),{isChangeSelectedOption:u}=core.useSelectedOption(),m=core.useEditorMode(),p=core.useProductStore(e=>e.setProductFeaturedImage),[g,f]=React.useState(!1),h=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,y=e=>e?.featuredImage,I=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,M=React.useMemo(()=>i?.typeDisplay==="all-images"&&!u,[u,i?.typeDisplay]),D=React.useMemo(()=>{if(M){let e;switch(i?.preDisplay){case"1st-images":e=y(n);break;case"1st-3d-mode":e=I(n);break;case"1st-video":e=h(n);break;case"1st-available-variant":e=c?.media}return p(e),e}},[M,i?.preDisplay,p,n,c?.media]),R=React.useMemo(()=>i?.filterByVariant==="selected_variant",[i?.filterByVariant]),x=React.useMemo(()=>{let e=getProductGallery(n);if(!e?.length)return[{id:n?.featuredImage?.id||"noImageError",src:n?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:n?.featuredImage?.width||480,height:n?.featuredImage?.height||480}];if(!R||!c?.selectedOptions?.length)return e;let t=c.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),a=t.join("-"),i=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),l=e?.filter(e=>{if(!e?.alt)return!1;let t=i(e.alt),l=i(a),o="all-variants"===t,r=t===l||t.includes(l);return o||r});return l?.length>0?l:e},[c?.selectedOptions,R,n]),b=React.useMemo(()=>x.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[x]),v=React.useMemo(()=>core.getResponsiveValueByScreen(l?.position,d),[d,l?.position]),j=(e,t)=>{V(e),t&&E()},E=()=>{f(!0)},V=e=>{if(!e)return;let t=b[e];if(void 0!==t){let e=x[t];e&&p(e)}};React.useEffect(()=>{if(c&&!M){let e=b[c?.mediaId];if(void 0!==e){let t=x[e]??n?.featuredImage;t&&p(t)}}},[c,b,x,n?.featuredImage,p,M]);let L=React.useMemo(()=>{let e="popup"===core.getResponsiveValueByScreen(i?.ftClickOpenLightBox,d)||core.getResponsiveValueByScreen(i?.clickOpenLightBox,d);return e||"edit"!==m||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[i?.ftClickOpenLightBox,i?.clickOpenLightBox,d,m]),P=()=>x.length>0?React.Children.map(core.filterToolbarPreview(C),e=>React.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,isInsideProductImage:!0,navigationPosition:i?.ftNavigationPosition,imageData:{imageShape:l?.ftShape,imageAlign:l?.align,imageLayout:l?.position},dotData:{dotSize:i?.ftDotSize,dotGapToCarousel:i?.ftDotGapToCarousel,dotStyle:i?.ftDotStyle}}):null):null,w=`
       <svg viewBox="0 0 452 400" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M0 7.99999C0 3.58171 3.58172 0 8 0H444C448.418 0 452 3.58172 452 8V392C452 396.418 448.418 400 444 400H8C3.58173 400 0 396.418 0 392V7.99999Z" fill="#F9F9F9"/>
         <path d="M208.148 348.801C239.683 348.75 265.245 347.272 265.242 345.499C265.239 343.726 239.673 342.33 208.138 342.381C176.603 342.432 151.041 343.91 151.044 345.683C151.047 347.456 176.614 348.851 208.148 348.801Z" fill="#E6E6E6"/>
@@ -23,4 +23,4 @@
         <path opacity="0.2" d="M293.196 231.862C306.954 231.862 318.106 217.921 318.106 200.724C318.106 183.527 306.954 169.586 293.196 169.586C279.439 169.586 268.286 183.527 268.286 200.724C268.286 217.921 279.439 231.862 293.196 231.862Z" fill="white"/>
         <path opacity="0.2" d="M293.196 247.637C313.923 247.637 330.726 226.634 330.726 200.725C330.726 174.816 313.923 153.812 293.196 153.812C272.469 153.812 255.666 174.816 255.666 200.725C255.666 226.634 272.469 247.637 293.196 247.637Z" fill="white"/>
       </svg>
-    `,Z=jsxRuntime.jsx(NoDataState.default,{elementType:"secondary",description:"Catch your customer's attention with attracted media.",descriptionActions:[{text:"Add image",callback:a},{text:"sync data",callback:"syncProduct"}],additionalMedia:V}),{wrapperClasses:k}=getProductImagesClassName.getProductImagesClassName(e);return jsxRuntime.jsxs("div",{...r,className:k,style:C,children:[jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:getBorderActiveCss.getBorderActiveCss({settings:{...i,...o},uid:l?.uid,type:"React"})}}),LAYOUT_FEATURE_IMAGE_GALLERY.includes(b)&&jsxRuntime.jsx(FeatureImageWithGallery.default,{...t,gallery:x,priorityFeatureImage:D,onHandleClickImage:(e,t)=>j(e||"",t),noDataChildren:Z,children:L()}),"only-feature"===b&&jsxRuntime.jsx(OnlyFeatureImage.default,{gallery:x,...t,onHandleClickImage:(e,t)=>j(e||"",t),noDataChildren:Z,children:L()}),["one-col","two-col"].includes(b)&&jsxRuntime.jsx(GalleryGrid.default,{gallery:x,...t,onHandleClickImage:(e,t)=>j(e||"",t),noDataChildren:Z,children:L()}),P&&jsxRuntime.jsx(ProductImagesLightBox.default,{productImages:x,builderPropUID:l?.uid,open:p,onHandleClose:()=>f(!1),imageRatio:common.getAspectRatio(o?.ftShape)}),core.filterToolbarPreview(s,!0)]})};exports.default=ProductImagesV2;
+    `,Z=jsxRuntime.jsx(NoDataState.default,{elementType:"secondary",description:"Catch your customer's attention with attracted media.",descriptionActions:[{text:"Add image",callback:a},{text:"sync data",callback:"syncProduct"}],additionalMedia:w}),{wrapperClasses:k}=getProductImagesClassName.getProductImagesClassName(e);return jsxRuntime.jsxs("div",{...r,className:k,style:s,children:[jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:getBorderActiveCss.getBorderActiveCss({settings:{...i,...l},uid:o?.uid,type:"React"})}}),LAYOUT_FEATURE_IMAGE_GALLERY.includes(v)&&jsxRuntime.jsx(FeatureImageWithGallery.default,{...t,isFilterByVariantEnabled:R,gallery:x,priorityFeatureImage:D,onHandleClickImage:(e,t)=>j(e||"",t),noDataChildren:Z,children:P()}),"only-feature"===v&&jsxRuntime.jsx(OnlyFeatureImage.default,{gallery:x,...t,onHandleClickImage:(e,t)=>j(e||"",t),noDataChildren:Z,children:P()}),["one-col","two-col"].includes(v)&&jsxRuntime.jsx(GalleryGrid.default,{gallery:x,...t,onHandleClickImage:(e,t)=>j(e||"",t),noDataChildren:Z,children:P()}),L&&jsxRuntime.jsx(ProductImagesLightBox.default,{productImages:x,builderPropUID:o?.uid,open:g,onHandleClose:()=>f(!1),imageRatio:common.getAspectRatio(l?.ftShape)}),core.filterToolbarPreview(C,!0)]})};exports.default=ProductImagesV2;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),GalleryCarousel=require("../gallery-carousel/GalleryCarousel.js"),ProductGalleryGrid=require("../child/ProductGalleryGrid.js"),ProductFeaturedImageCarousel=require("../child/ProductFeaturedImageCarousel.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),useFeatureImageWithGallery=require("../../hooks/useFeatureImageWithGallery.js");const FeatureImageWithGallery=e=>{let{setting:r,styles:t,builderProps:a,gallery:s,onHandleClickImage:u,priorityFeatureImage:l,children:i,noDataChildren:d}=e,{isEditMode:o}=core.useRenderMode(),c=React.useRef(null),m=core.useCurrentDevice(),n=React.useCallback(e=>{if(!c.current)return;let r=c.current.getSwiper();r&&r.thumbs.swiper?.realIndex===void 0&&e&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())},[]),g={...r,...t},{isShowCarousel:I,featureImageHeight:p,featureWrapperImage:y,onClickFeatureArrow:j,activeIndexFromFeatureImage:x,setOnClickFeatureArrow:P,onHandleLoadedFeatureImage:C,setActiveIndexFromFeatureImage:h}=useFeatureImageWithGallery.useFeatureImageWithGallery(e);if(s?.[0]?.id==="noImageError"&&o)return jsxRuntime.jsx(jsxRuntime.Fragment,{children:d});let{ftImageGalleryClasses:F,imageGalleryWrapperClasses:R}=getProductImagesClassName.getProductImagesClassName(e),{wrapperFeaturedImageStyle:G,featureImageStyle:b,galleryImageStyle:f}=getProductImagesStyles.getProductImagesStyles(g,{gallery:s,featureImageHeight:p}),v=JSON.stringify(g?.position)+m+I;return jsxRuntime.jsxs("div",{className:core.cls("gp-grid gp-w-full gp-relative"),style:G,children:[jsxRuntime.jsxs("div",{className:F,style:b,children:[i,jsxRuntime.jsx(ProductFeaturedImageCarousel.default,{ref:c,imgRef:y,productImages:s,...g,onHandleClick:(e,r)=>u(e||"",r),onHandleLoaded:C,onHandleUpdateActiveIndex:h,onClickArrow:e=>P(e),builderPropUID:a?.uid,builderPropsClass:`gp-product-images-feature-${a?.uid}`})]}),s.length>1&&jsxRuntime.jsx("div",{className:R,style:f,children:I?jsxRuntime.jsx(GalleryCarousel.default,{productImages:s,position:g?.position,...g,builderPropUID:a?.uid,onHandleClick:(e,r)=>u(e||"",r),onSwiperReady:n,activeIndexFormFeatureImage:x,priorityFeatureImage:l,onClickFeatureArrow:j,builderPropsClass:`gp-product-images-gallery-${a?.uid}`}):jsxRuntime.jsx(ProductGalleryGrid.default,{productImages:s,...g,builderPropUID:a?.uid,onHandleClick:(e,r)=>u(e||"",r),activeIndexFromFeatureImage:x,isHiddenInteraction:!0})})]},v)};exports.default=FeatureImageWithGallery;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),GalleryCarousel=require("../gallery-carousel/GalleryCarousel.js"),ProductGalleryGrid=require("../child/ProductGalleryGrid.js"),ProductFeaturedImageCarousel=require("../child/ProductFeaturedImageCarousel.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),useFeatureImageWithGallery=require("../../hooks/useFeatureImageWithGallery.js");const FeatureImageWithGallery=e=>{let{setting:r,styles:t,builderProps:a,gallery:s,onHandleClickImage:u,priorityFeatureImage:l,children:i,noDataChildren:d,isFilterByVariantEnabled:o}=e,{isEditMode:c}=core.useRenderMode(),m=React.useRef(null),n=core.useCurrentDevice(),g=React.useCallback(e=>{if(!m.current)return;let r=m.current.getSwiper();r&&r.thumbs.swiper?.realIndex===void 0&&e&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())},[]),I={...r,...t},{isShowCarousel:p,featureImageHeight:y,featureWrapperImage:j,onClickFeatureArrow:x,activeIndexFromFeatureImage:P,setOnClickFeatureArrow:C,onHandleLoadedFeatureImage:h,setActiveIndexFromFeatureImage:F}=useFeatureImageWithGallery.useFeatureImageWithGallery(e);if(s?.[0]?.id==="noImageError"&&c)return jsxRuntime.jsx(jsxRuntime.Fragment,{children:d});let{ftImageGalleryClasses:R,imageGalleryWrapperClasses:G}=getProductImagesClassName.getProductImagesClassName(e),{wrapperFeaturedImageStyle:b,featureImageStyle:f,galleryImageStyle:v}=getProductImagesStyles.getProductImagesStyles(I,{gallery:s,featureImageHeight:y}),q=JSON.stringify(I?.position)+n+p;return jsxRuntime.jsxs("div",{className:core.cls("gp-grid gp-w-full gp-relative"),style:b,children:[jsxRuntime.jsxs("div",{className:R,style:f,children:[i,jsxRuntime.jsx(ProductFeaturedImageCarousel.default,{ref:m,imgRef:j,productImages:s,...I,onHandleClick:(e,r)=>u(e||"",r),onHandleLoaded:h,onHandleUpdateActiveIndex:F,onClickArrow:e=>C(e),builderPropUID:a?.uid,builderPropsClass:`gp-product-images-feature-${a?.uid}`})]}),s.length>(o?0:1)&&jsxRuntime.jsx("div",{className:G,style:v,children:p?jsxRuntime.jsx(GalleryCarousel.default,{productImages:s,position:I?.position,...I,builderPropUID:a?.uid,onHandleClick:(e,r)=>u(e||"",r),onSwiperReady:g,activeIndexFormFeatureImage:P,priorityFeatureImage:l,onClickFeatureArrow:x,builderPropsClass:`gp-product-images-gallery-${a?.uid}`}):jsxRuntime.jsx(ProductGalleryGrid.default,{productImages:s,...I,builderPropUID:a?.uid,onHandleClick:(e,r)=>u(e||"",r),activeIndexFromFeatureImage:P,isHiddenInteraction:!0})})]},q)};exports.default=FeatureImageWithGallery;

package/dist/cjs/product/settings/product-image-v3/configs/setting-v2/index.js

@@ -1 +1 @@
-"use strict";var ProductFeatureImage=require("./ProductFeatureImage.js"),ProductGalleryImage=require("./ProductGalleryImage.js");const getDefaultResponsive=e=>({desktop:{default:e}}),ProductImageSettingsV2=[{id:"setting",controls:[{id:"displayByVariant",label:"Option Label",type:"toggle",default:!1},{id:"variantSelect",type:"variant:listing"},{id:"select-display",type:"group",label:"Select images to display",controls:ProductFeatureImage.productSelectDisplaySetting},{id:"featured-image",type:"group",label:"Featured Image",controls:ProductFeatureImage.productFeatureImageSetting},{id:"gallery-images",type:"group",label:"Gallery Images",controls:ProductGalleryImage.productGalleryImageSetting},{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,devices:{desktop:{default:100}}}]},{id:"style",controls:[{id:"position",label:"Layout",type:"layout-selector",iconViewBox:"0 0 50 50",enableItemBackground:!0,itemPerRow:3,itemSpacing:"large",enableItemOpacity:!0,options:[{label:"Featured top",value:"bottom-center",type:"p-image-layout",iconName:"gp-product-image-layout-bottom"},{label:"Featured right",value:"left",type:"p-image-layout",iconName:"gp-product-image-layout-left"},{label:"Featured left",value:"right",type:"p-image-layout",iconName:"gp-product-image-layout-right"},{label:"Image list inside bottom",value:"inside-bottom",type:"p-image-layout",iconName:"gp-product-image-layout-bottom-inside"},{label:"Image list inside left",value:"inside-left",type:"p-image-layout",iconName:"gp-product-image-layout-left-inside"},{label:"Image list inside right",value:"inside-right",type:"p-image-layout",iconName:"gp-product-image-layout-right-inside"},{label:"Featured only",value:"only-feature",type:"p-image-layout",iconName:"gp-product-image-layout-featured-only"},{label:"Image list 1 col",value:"one-col",type:"p-image-layout",iconName:"gp-product-image-layout-one-col",noPadding:"y"},{label:"Image list 2 col",value:"two-col",type:"p-image-layout",iconName:"gp-product-image-layout-two-col"}],devices:{desktop:{default:"bottom-center"},mobile:{default:"bottom-center"}}},{id:"spacing",label:"Spacing Item",type:"input:slider",units:["px"],ignoreMax:!0,max:40,devices:{desktop:{default:"8px"}}},{id:"ratioLayout",label:"Ratio",type:"column-with-slider",fallbackArrayValue:[2,10],devices:{desktop:{default:[2,10]}}},{id:"ratioLayoutRight",label:"Ratio",type:"column-with-slider",fallbackArrayValue:[10,2],devices:{desktop:{default:[10,2]}}},{id:"dimensions",type:"group",label:"Featured Image",controls:ProductFeatureImage.productFeatureImageStyle},{id:"galleryStyles",type:"group",label:"Gallery",controls:ProductGalleryImage.productGalleryImageStyle},{id:"align",label:"Alignment",type:"segment",options:[{label:"Start",value:"flex-start",type:"align-flex",tooltip:"Align left"},{label:"Center",value:"center",type:"align-flex",tooltip:"Align center"},{label:"End",value:"flex-end",type:"align-flex",tooltip:"Align right"}],devices:getDefaultResponsive("flex-start")}]}];exports.ProductImageSettingsV2=ProductImageSettingsV2;
+"use strict";var ProductFeatureImage=require("./ProductFeatureImage.js"),ProductGalleryImage=require("./ProductGalleryImage.js");const getDefaultResponsive=e=>({desktop:{default:e}}),ProductImageSettingsV2=[{id:"setting",controls:[{id:"filterByVariant",type:"select",label:"Filter images by variant",default:"all_images",options:[{label:"All images",value:"all_images"},{label:"Selected variant",value:"selected_variant"}]},{id:"displayByVariant",label:"Option Label",type:"toggle",default:!1},{id:"variantSelect",type:"variant:listing"},{id:"select-display",type:"group",label:"Select images to display",controls:ProductFeatureImage.productSelectDisplaySetting},{id:"featured-image",type:"group",label:"Featured Image",controls:ProductFeatureImage.productFeatureImageSetting},{id:"gallery-images",type:"group",label:"Gallery Images",controls:ProductGalleryImage.productGalleryImageSetting},{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,devices:{desktop:{default:100}}}]},{id:"style",controls:[{id:"position",label:"Layout",type:"layout-selector",iconViewBox:"0 0 50 50",enableItemBackground:!0,itemPerRow:3,itemSpacing:"large",enableItemOpacity:!0,options:[{label:"Featured top",value:"bottom-center",type:"p-image-layout",iconName:"gp-product-image-layout-bottom"},{label:"Featured right",value:"left",type:"p-image-layout",iconName:"gp-product-image-layout-left"},{label:"Featured left",value:"right",type:"p-image-layout",iconName:"gp-product-image-layout-right"},{label:"Image list inside bottom",value:"inside-bottom",type:"p-image-layout",iconName:"gp-product-image-layout-bottom-inside"},{label:"Image list inside left",value:"inside-left",type:"p-image-layout",iconName:"gp-product-image-layout-left-inside"},{label:"Image list inside right",value:"inside-right",type:"p-image-layout",iconName:"gp-product-image-layout-right-inside"},{label:"Featured only",value:"only-feature",type:"p-image-layout",iconName:"gp-product-image-layout-featured-only"},{label:"Image list 1 col",value:"one-col",type:"p-image-layout",iconName:"gp-product-image-layout-one-col",noPadding:"y"},{label:"Image list 2 col",value:"two-col",type:"p-image-layout",iconName:"gp-product-image-layout-two-col"}],devices:{desktop:{default:"bottom-center"},mobile:{default:"bottom-center"}}},{id:"spacing",label:"Spacing Item",type:"input:slider",units:["px"],ignoreMax:!0,max:40,devices:{desktop:{default:"8px"}}},{id:"ratioLayout",label:"Ratio",type:"column-with-slider",fallbackArrayValue:[2,10],devices:{desktop:{default:[2,10]}}},{id:"ratioLayoutRight",label:"Ratio",type:"column-with-slider",fallbackArrayValue:[10,2],devices:{desktop:{default:[10,2]}}},{id:"dimensions",type:"group",label:"Featured Image",controls:ProductFeatureImage.productFeatureImageStyle},{id:"galleryStyles",type:"group",label:"Gallery",controls:ProductGalleryImage.productGalleryImageStyle},{id:"align",label:"Alignment",type:"segment",options:[{label:"Start",value:"flex-start",type:"align-flex",tooltip:"Align left"},{label:"Center",value:"center",type:"align-flex",tooltip:"Align center"},{label:"End",value:"flex-end",type:"align-flex",tooltip:"Align right"}],devices:getDefaultResponsive("flex-start")}]}];exports.ProductImageSettingsV2=ProductImageSettingsV2;

package/dist/cjs/product/settings/product-image-v3/configs/ui-v2.js

@@ -1 +1 @@
-"use strict";var ImageListNavigation=require("./ui/ImageListNavigation.js"),FeatureNavigation=require("./ui/FeatureNavigation.js"),FeatureDots=require("./ui/FeatureDots.js");const showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...FeatureDots.FeatureDots,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...FeatureNavigation.FeatureNavigation,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...ImageListNavigation.ImageListNavigation,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Default item"},setting:{id:"preDisplay"}}]},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:"Quality"},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];exports.SettingUIV2=SettingUIV2;
+"use strict";var ImageListNavigation=require("./ui/ImageListNavigation.js"),FeatureNavigation=require("./ui/FeatureNavigation.js"),FeatureDots=require("./ui/FeatureDots.js");const showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...FeatureDots.FeatureDots,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...FeatureNavigation.FeatureNavigation,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...ImageListNavigation.ImageListNavigation,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Default item"},setting:{id:"preDisplay"}},{label:{en:"Image list"},setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list will display based on the selected variants. <a class="text-white" target="_blank" href="https://help.gempages.net/articles/filter-product-image-by-selected-variant?utm_source=gempages&utm_medium=in-app&utm_campaign=product-image-element">How to setup</a>'}},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:"Quality"},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];exports.SettingUIV2=SettingUIV2;

package/dist/esm/product/components/product-images-v3/ProductImageV3.js

@@ -1,5 +1,5 @@
 'use client';
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{setDefaultWhenUndefineSetting as a,getAspectRatio as i}from"./common/common.js";import{useProductShopifyEditLink as C,useProduct as o,useCurrentDevice as l,useCurrentVariant as d,useSelectedOption as r,useEditorMode as n,useProductStore as s,getResponsiveValueByScreen as p,filterToolbarPreview as c}from"@gem-sdk/core";import{useMemo as m,useState as f,useEffect as g,Children as h,isValidElement as u}from"react";import y from"./components/feature-gallery/FeatureImageWithGallery.js";import D from"./components/feature-only/OnlyFeatureImage.js";import I from"./components/lightbox/ProductImagesLightBox.js";import b from"../../../common/components/NoDataState.js";import{getProductImagesClassName as M}from"./composables/getProductImagesClassName.js";import{getBorderActiveCss as E}from"./common/getBorderActiveCss.js";import Z from"./components/gallery-grid/GalleryGrid.js";let getProductGallery=e=>e?.medias?.edges.map(e=>e?.node),LAYOUT_FEATURE_IMAGE_GALLERY=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"],ProductImagesV2=k=>{let w=m(()=>a(k),[k]),{redirectProductShopifyLink:L}=C(),{setting:A,styles:V,builderProps:v,builderAttrs:x,style:H,children:P}=w,G=o(),O=l(),T=d(),{isChangeSelectedOption:_}=r(),S=n(),j=s(e=>e.setProductFeaturedImage),[F,B]=f(!1),R=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,N=e=>e?.featuredImage,U=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,Y=m(()=>A?.typeDisplay==="all-images"&&!_,[_,A?.typeDisplay]),z=m(()=>{if(Y){let e;switch(A?.preDisplay){case"1st-images":e=N(G);break;case"1st-3d-mode":e=U(G);break;case"1st-video":e=R(G);break;case"1st-available-variant":e=T?.media}return j(e),e}},[Y,A?.preDisplay,j,G,T?.media]),J=m(()=>{let e=getProductGallery(G);return e?.length?e:[{id:G?.featuredImage?.id||"noImageError",src:G?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:G?.featuredImage?.width||480,height:G?.featuredImage?.height||480}]},[G]),W=m(()=>J.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[J]),X=m(()=>p(V?.position,O),[O,V?.position]),q=(e,t)=>{Q(e),t&&K()},K=()=>{B(!0)},Q=e=>{if(!e)return;let t=W[e];if(void 0!==t){let e=J[t];e&&j(e)}};g(()=>{if(T&&!Y){let e=W[T?.mediaId];if(void 0!==e){let t=J[e]??G?.featuredImage;t&&j(t)}}},[T,W,J,G?.featuredImage,j,Y]);let $=m(()=>{let e="popup"===p(A?.ftClickOpenLightBox,O)||p(A?.clickOpenLightBox,O);return e||"edit"!==S||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[A?.ftClickOpenLightBox,A?.clickOpenLightBox,O,S]),ee=()=>J.length>0?h.map(c(P),e=>u(e)?t(e.type,{...e.props,isInsideProductImage:!0,navigationPosition:A?.ftNavigationPosition,imageData:{imageShape:V?.ftShape,imageAlign:V?.align,imageLayout:V?.position},dotData:{dotSize:A?.ftDotSize,dotGapToCarousel:A?.ftDotGapToCarousel,dotStyle:A?.ftDotStyle}}):null):null,et=`
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{setDefaultWhenUndefineSetting as a,getAspectRatio as i}from"./common/common.js";import{useProductShopifyEditLink as l,useProduct as C,useCurrentDevice as o,useCurrentVariant as r,useSelectedOption as n,useEditorMode as d,useProductStore as s,getResponsiveValueByScreen as p,filterToolbarPreview as c}from"@gem-sdk/core";import{useMemo as m,useState as f,useEffect as g,Children as h,isValidElement as u}from"react";import y from"./components/feature-gallery/FeatureImageWithGallery.js";import D from"./components/feature-only/OnlyFeatureImage.js";import I from"./components/lightbox/ProductImagesLightBox.js";import b from"../../../common/components/NoDataState.js";import{getProductImagesClassName as M}from"./composables/getProductImagesClassName.js";import{getBorderActiveCss as E}from"./common/getBorderActiveCss.js";import Z from"./components/gallery-grid/GalleryGrid.js";let getProductGallery=e=>e?.medias?.edges.map(e=>e?.node),LAYOUT_FEATURE_IMAGE_GALLERY=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"],ProductImagesV2=w=>{let L=m(()=>a(w),[w]),{redirectProductShopifyLink:k}=l(),{setting:V,styles:v,builderProps:A,builderAttrs:O,style:_,children:x}=L,H=C(),P=o(),B=r(),{isChangeSelectedOption:G}=n(),T=d(),j=s(e=>e.setProductFeaturedImage),[F,S]=f(!1),R=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,N=e=>e?.featuredImage,U=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,Y=m(()=>V?.typeDisplay==="all-images"&&!G,[G,V?.typeDisplay]),z=m(()=>{if(Y){let e;switch(V?.preDisplay){case"1st-images":e=N(H);break;case"1st-3d-mode":e=U(H);break;case"1st-video":e=R(H);break;case"1st-available-variant":e=B?.media}return j(e),e}},[Y,V?.preDisplay,j,H,B?.media]),J=m(()=>V?.filterByVariant==="selected_variant",[V?.filterByVariant]),W=m(()=>{let e=getProductGallery(H);if(!e?.length)return[{id:H?.featuredImage?.id||"noImageError",src:H?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:H?.featuredImage?.width||480,height:H?.featuredImage?.height||480}];if(!J||!B?.selectedOptions?.length)return e;let t=B.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),a=t.join("-"),i=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),l=e?.filter(e=>{if(!e?.alt)return!1;let t=i(e.alt),l=i(a),C="all-variants"===t,o=t===l||t.includes(l);return C||o});return l?.length>0?l:e},[B?.selectedOptions,J,H]),X=m(()=>W.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[W]),q=m(()=>p(v?.position,P),[P,v?.position]),K=(e,t)=>{$(e),t&&Q()},Q=()=>{S(!0)},$=e=>{if(!e)return;let t=X[e];if(void 0!==t){let e=W[t];e&&j(e)}};g(()=>{if(B&&!Y){let e=X[B?.mediaId];if(void 0!==e){let t=W[e]??H?.featuredImage;t&&j(t)}}},[B,X,W,H?.featuredImage,j,Y]);let ee=m(()=>{let e="popup"===p(V?.ftClickOpenLightBox,P)||p(V?.clickOpenLightBox,P);return e||"edit"!==T||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[V?.ftClickOpenLightBox,V?.clickOpenLightBox,P,T]),et=()=>W.length>0?h.map(c(x),e=>u(e)?t(e.type,{...e.props,isInsideProductImage:!0,navigationPosition:V?.ftNavigationPosition,imageData:{imageShape:v?.ftShape,imageAlign:v?.align,imageLayout:v?.position},dotData:{dotSize:V?.ftDotSize,dotGapToCarousel:V?.ftDotGapToCarousel,dotStyle:V?.ftDotStyle}}):null):null,ea=`
       <svg viewBox="0 0 452 400" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M0 7.99999C0 3.58171 3.58172 0 8 0H444C448.418 0 452 3.58172 452 8V392C452 396.418 448.418 400 444 400H8C3.58173 400 0 396.418 0 392V7.99999Z" fill="#F9F9F9"/>
         <path d="M208.148 348.801C239.683 348.75 265.245 347.272 265.242 345.499C265.239 343.726 239.673 342.33 208.138 342.381C176.603 342.432 151.041 343.91 151.044 345.683C151.047 347.456 176.614 348.851 208.148 348.801Z" fill="#E6E6E6"/>
@@ -23,4 +23,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{setDefaultWhenUndefineS
         <path opacity="0.2" d="M293.196 231.862C306.954 231.862 318.106 217.921 318.106 200.724C318.106 183.527 306.954 169.586 293.196 169.586C279.439 169.586 268.286 183.527 268.286 200.724C268.286 217.921 279.439 231.862 293.196 231.862Z" fill="white"/>
         <path opacity="0.2" d="M293.196 247.637C313.923 247.637 330.726 226.634 330.726 200.725C330.726 174.816 313.923 153.812 293.196 153.812C272.469 153.812 255.666 174.816 255.666 200.725C255.666 226.634 272.469 247.637 293.196 247.637Z" fill="white"/>
       </svg>
-    `,ea=t(b,{elementType:"secondary",description:"Catch your customer's attention with attracted media.",descriptionActions:[{text:"Add image",callback:L},{text:"sync data",callback:"syncProduct"}],additionalMedia:et}),{wrapperClasses:ei}=M(k);return e("div",{...x,className:ei,style:H,children:[t("style",{dangerouslySetInnerHTML:{__html:E({settings:{...A,...V},uid:v?.uid,type:"React"})}}),LAYOUT_FEATURE_IMAGE_GALLERY.includes(X)&&t(y,{...w,gallery:J,priorityFeatureImage:z,onHandleClickImage:(e,t)=>q(e||"",t),noDataChildren:ea,children:ee()}),"only-feature"===X&&t(D,{gallery:J,...w,onHandleClickImage:(e,t)=>q(e||"",t),noDataChildren:ea,children:ee()}),["one-col","two-col"].includes(X)&&t(Z,{gallery:J,...w,onHandleClickImage:(e,t)=>q(e||"",t),noDataChildren:ea,children:ee()}),$&&t(I,{productImages:J,builderPropUID:v?.uid,open:F,onHandleClose:()=>B(!1),imageRatio:i(V?.ftShape)}),c(P,!0)]})};export{ProductImagesV2 as default};
+    `,ei=t(b,{elementType:"secondary",description:"Catch your customer's attention with attracted media.",descriptionActions:[{text:"Add image",callback:k},{text:"sync data",callback:"syncProduct"}],additionalMedia:ea}),{wrapperClasses:el}=M(w);return e("div",{...O,className:el,style:_,children:[t("style",{dangerouslySetInnerHTML:{__html:E({settings:{...V,...v},uid:A?.uid,type:"React"})}}),LAYOUT_FEATURE_IMAGE_GALLERY.includes(q)&&t(y,{...L,isFilterByVariantEnabled:J,gallery:W,priorityFeatureImage:z,onHandleClickImage:(e,t)=>K(e||"",t),noDataChildren:ei,children:et()}),"only-feature"===q&&t(D,{gallery:W,...L,onHandleClickImage:(e,t)=>K(e||"",t),noDataChildren:ei,children:et()}),["one-col","two-col"].includes(q)&&t(Z,{gallery:W,...L,onHandleClickImage:(e,t)=>K(e||"",t),noDataChildren:ei,children:et()}),ee&&t(I,{productImages:W,builderPropUID:A?.uid,open:F,onHandleClose:()=>S(!1),imageRatio:i(v?.ftShape)}),c(x,!0)]})};export{ProductImagesV2 as default};

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

@@ -1 +1 @@
-import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{useRenderMode as i,useCurrentDevice as o,cls as a}from"@gem-sdk/core";import{useRef as l,useCallback as s}from"react";import d from"../gallery-carousel/GalleryCarousel.js";import m from"../child/ProductGalleryGrid.js";import u from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as n}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as p}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as c}from"../../hooks/useFeatureImageWithGallery.js";let FeatureImageWithGallery=g=>{let{setting:I,styles:f,builderProps:h,gallery:y,onHandleClickImage:b,priorityFeatureImage:C,children:F,noDataChildren:P}=g,{isEditMode:v}=i(),j=l(null),k=o(),w=s(e=>{if(!j.current)return;let r=j.current.getSwiper();r&&r.thumbs.swiper?.realIndex===void 0&&e&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())},[]),x={...I,...f},{isShowCarousel:G,featureImageHeight:H,featureWrapperImage:N,onClickFeatureArrow:S,activeIndexFromFeatureImage:U,setOnClickFeatureArrow:A,onHandleLoadedFeatureImage:D,setActiveIndexFromFeatureImage:W}=c(g);if(y?.[0]?.id==="noImageError"&&v)return e(r,{children:P});let{ftImageGalleryClasses:R,imageGalleryWrapperClasses:$}=p(g),{wrapperFeaturedImageStyle:E,featureImageStyle:J,galleryImageStyle:L}=n(x,{gallery:y,featureImageHeight:H}),O=JSON.stringify(x?.position)+k+G;return t("div",{className:a("gp-grid gp-w-full gp-relative"),style:E,children:[t("div",{className:R,style:J,children:[F,e(u,{ref:j,imgRef:N,productImages:y,...x,onHandleClick:(e,r)=>b(e||"",r),onHandleLoaded:D,onHandleUpdateActiveIndex:W,onClickArrow:e=>A(e),builderPropUID:h?.uid,builderPropsClass:`gp-product-images-feature-${h?.uid}`})]}),y.length>1&&e("div",{className:$,style:L,children:G?e(d,{productImages:y,position:x?.position,...x,builderPropUID:h?.uid,onHandleClick:(e,r)=>b(e||"",r),onSwiperReady:w,activeIndexFormFeatureImage:U,priorityFeatureImage:C,onClickFeatureArrow:S,builderPropsClass:`gp-product-images-gallery-${h?.uid}`}):e(m,{productImages:y,...x,builderPropUID:h?.uid,onHandleClick:(e,r)=>b(e||"",r),activeIndexFromFeatureImage:U,isHiddenInteraction:!0})})]},O)};export{FeatureImageWithGallery as default};
+import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{useRenderMode as i,useCurrentDevice as o,cls as a}from"@gem-sdk/core";import{useRef as l,useCallback as s}from"react";import d from"../gallery-carousel/GalleryCarousel.js";import m from"../child/ProductGalleryGrid.js";import u from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as n}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as p}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as c}from"../../hooks/useFeatureImageWithGallery.js";let FeatureImageWithGallery=g=>{let{setting:I,styles:f,builderProps:h,gallery:y,onHandleClickImage:b,priorityFeatureImage:C,children:F,noDataChildren:P,isFilterByVariantEnabled:v}=g,{isEditMode:j}=i(),k=l(null),w=o(),x=s(e=>{if(!k.current)return;let r=k.current.getSwiper();r&&r.thumbs.swiper?.realIndex===void 0&&e&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())},[]),G={...I,...f},{isShowCarousel:H,featureImageHeight:N,featureWrapperImage:S,onClickFeatureArrow:U,activeIndexFromFeatureImage:A,setOnClickFeatureArrow:D,onHandleLoadedFeatureImage:W,setActiveIndexFromFeatureImage:R}=c(g);if(y?.[0]?.id==="noImageError"&&j)return e(r,{children:P});let{ftImageGalleryClasses:$,imageGalleryWrapperClasses:E}=p(g),{wrapperFeaturedImageStyle:J,featureImageStyle:L,galleryImageStyle:O}=n(G,{gallery:y,featureImageHeight:N}),q=JSON.stringify(G?.position)+w+H;return t("div",{className:a("gp-grid gp-w-full gp-relative"),style:J,children:[t("div",{className:$,style:L,children:[F,e(u,{ref:k,imgRef:S,productImages:y,...G,onHandleClick:(e,r)=>b(e||"",r),onHandleLoaded:W,onHandleUpdateActiveIndex:R,onClickArrow:e=>D(e),builderPropUID:h?.uid,builderPropsClass:`gp-product-images-feature-${h?.uid}`})]}),y.length>(v?0:1)&&e("div",{className:E,style:O,children:H?e(d,{productImages:y,position:G?.position,...G,builderPropUID:h?.uid,onHandleClick:(e,r)=>b(e||"",r),onSwiperReady:x,activeIndexFormFeatureImage:A,priorityFeatureImage:C,onClickFeatureArrow:U,builderPropsClass:`gp-product-images-gallery-${h?.uid}`}):e(m,{productImages:y,...G,builderPropUID:h?.uid,onHandleClick:(e,r)=>b(e||"",r),activeIndexFromFeatureImage:A,isHiddenInteraction:!0})})]},q)};export{FeatureImageWithGallery as default};

package/dist/esm/product/settings/product-image-v3/configs/setting-v2/index.js

@@ -1 +1 @@
-import{productSelectDisplaySetting as e,productFeatureImageSetting as t,productFeatureImageStyle as l}from"./ProductFeatureImage.js";import{productGalleryImageSetting as a,productGalleryImageStyle as i}from"./ProductGalleryImage.js";let getDefaultResponsive=e=>({desktop:{default:e}}),ProductImageSettingsV2=[{id:"setting",controls:[{id:"displayByVariant",label:"Option Label",type:"toggle",default:!1},{id:"variantSelect",type:"variant:listing"},{id:"select-display",type:"group",label:"Select images to display",controls:e},{id:"featured-image",type:"group",label:"Featured Image",controls:t},{id:"gallery-images",type:"group",label:"Gallery Images",controls:a},{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,devices:{desktop:{default:100}}}]},{id:"style",controls:[{id:"position",label:"Layout",type:"layout-selector",iconViewBox:"0 0 50 50",enableItemBackground:!0,itemPerRow:3,itemSpacing:"large",enableItemOpacity:!0,options:[{label:"Featured top",value:"bottom-center",type:"p-image-layout",iconName:"gp-product-image-layout-bottom"},{label:"Featured right",value:"left",type:"p-image-layout",iconName:"gp-product-image-layout-left"},{label:"Featured left",value:"right",type:"p-image-layout",iconName:"gp-product-image-layout-right"},{label:"Image list inside bottom",value:"inside-bottom",type:"p-image-layout",iconName:"gp-product-image-layout-bottom-inside"},{label:"Image list inside left",value:"inside-left",type:"p-image-layout",iconName:"gp-product-image-layout-left-inside"},{label:"Image list inside right",value:"inside-right",type:"p-image-layout",iconName:"gp-product-image-layout-right-inside"},{label:"Featured only",value:"only-feature",type:"p-image-layout",iconName:"gp-product-image-layout-featured-only"},{label:"Image list 1 col",value:"one-col",type:"p-image-layout",iconName:"gp-product-image-layout-one-col",noPadding:"y"},{label:"Image list 2 col",value:"two-col",type:"p-image-layout",iconName:"gp-product-image-layout-two-col"}],devices:{desktop:{default:"bottom-center"},mobile:{default:"bottom-center"}}},{id:"spacing",label:"Spacing Item",type:"input:slider",units:["px"],ignoreMax:!0,max:40,devices:{desktop:{default:"8px"}}},{id:"ratioLayout",label:"Ratio",type:"column-with-slider",fallbackArrayValue:[2,10],devices:{desktop:{default:[2,10]}}},{id:"ratioLayoutRight",label:"Ratio",type:"column-with-slider",fallbackArrayValue:[10,2],devices:{desktop:{default:[10,2]}}},{id:"dimensions",type:"group",label:"Featured Image",controls:l},{id:"galleryStyles",type:"group",label:"Gallery",controls:i},{id:"align",label:"Alignment",type:"segment",options:[{label:"Start",value:"flex-start",type:"align-flex",tooltip:"Align left"},{label:"Center",value:"center",type:"align-flex",tooltip:"Align center"},{label:"End",value:"flex-end",type:"align-flex",tooltip:"Align right"}],devices:getDefaultResponsive("flex-start")}]}];export{ProductImageSettingsV2};
+import{productSelectDisplaySetting as e,productFeatureImageSetting as t,productFeatureImageStyle as l}from"./ProductFeatureImage.js";import{productGalleryImageSetting as a,productGalleryImageStyle as i}from"./ProductGalleryImage.js";let getDefaultResponsive=e=>({desktop:{default:e}}),ProductImageSettingsV2=[{id:"setting",controls:[{id:"filterByVariant",type:"select",label:"Filter images by variant",default:"all_images",options:[{label:"All images",value:"all_images"},{label:"Selected variant",value:"selected_variant"}]},{id:"displayByVariant",label:"Option Label",type:"toggle",default:!1},{id:"variantSelect",type:"variant:listing"},{id:"select-display",type:"group",label:"Select images to display",controls:e},{id:"featured-image",type:"group",label:"Featured Image",controls:t},{id:"gallery-images",type:"group",label:"Gallery Images",controls:a},{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,devices:{desktop:{default:100}}}]},{id:"style",controls:[{id:"position",label:"Layout",type:"layout-selector",iconViewBox:"0 0 50 50",enableItemBackground:!0,itemPerRow:3,itemSpacing:"large",enableItemOpacity:!0,options:[{label:"Featured top",value:"bottom-center",type:"p-image-layout",iconName:"gp-product-image-layout-bottom"},{label:"Featured right",value:"left",type:"p-image-layout",iconName:"gp-product-image-layout-left"},{label:"Featured left",value:"right",type:"p-image-layout",iconName:"gp-product-image-layout-right"},{label:"Image list inside bottom",value:"inside-bottom",type:"p-image-layout",iconName:"gp-product-image-layout-bottom-inside"},{label:"Image list inside left",value:"inside-left",type:"p-image-layout",iconName:"gp-product-image-layout-left-inside"},{label:"Image list inside right",value:"inside-right",type:"p-image-layout",iconName:"gp-product-image-layout-right-inside"},{label:"Featured only",value:"only-feature",type:"p-image-layout",iconName:"gp-product-image-layout-featured-only"},{label:"Image list 1 col",value:"one-col",type:"p-image-layout",iconName:"gp-product-image-layout-one-col",noPadding:"y"},{label:"Image list 2 col",value:"two-col",type:"p-image-layout",iconName:"gp-product-image-layout-two-col"}],devices:{desktop:{default:"bottom-center"},mobile:{default:"bottom-center"}}},{id:"spacing",label:"Spacing Item",type:"input:slider",units:["px"],ignoreMax:!0,max:40,devices:{desktop:{default:"8px"}}},{id:"ratioLayout",label:"Ratio",type:"column-with-slider",fallbackArrayValue:[2,10],devices:{desktop:{default:[2,10]}}},{id:"ratioLayoutRight",label:"Ratio",type:"column-with-slider",fallbackArrayValue:[10,2],devices:{desktop:{default:[10,2]}}},{id:"dimensions",type:"group",label:"Featured Image",controls:l},{id:"galleryStyles",type:"group",label:"Gallery",controls:i},{id:"align",label:"Alignment",type:"segment",options:[{label:"Start",value:"flex-start",type:"align-flex",tooltip:"Align left"},{label:"Center",value:"center",type:"align-flex",tooltip:"Align center"},{label:"End",value:"flex-end",type:"align-flex",tooltip:"Align right"}],devices:getDefaultResponsive("flex-start")}]}];export{ProductImageSettingsV2};

package/dist/esm/product/settings/product-image-v3/configs/ui-v2.js

@@ -1 +1 @@
-import{ImageListNavigation as i}from"./ui/ImageListNavigation.js";import{FeatureNavigation as e}from"./ui/FeatureNavigation.js";import{FeatureDots as o}from"./ui/FeatureDots.js";let showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...o,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...e,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...i,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Default item"},setting:{id:"preDisplay"}}]},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:"Quality"},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];export{SettingUIV2};
+import{ImageListNavigation as e}from"./ui/ImageListNavigation.js";import{FeatureNavigation as i}from"./ui/FeatureNavigation.js";import{FeatureDots as t}from"./ui/FeatureDots.js";let showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...t,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...i,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...e,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Default item"},setting:{id:"preDisplay"}},{label:{en:"Image list"},setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list will display based on the selected variants. <a class="text-white" target="_blank" href="https://help.gempages.net/articles/filter-product-image-by-selected-variant?utm_source=gempages&utm_medium=in-app&utm_campaign=product-image-element">How to setup</a>'}},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:"Quality"},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];export{SettingUIV2};

package/dist/types/index.d.ts

@@ -2970,6 +2970,7 @@ type ProductImageOriginalSettingProps$1 = {
     qualityPercent?: ObjectDevices<number>;
     displayByVariant?: boolean;
     variantSelect?: string;
+    filterByVariant?: string;
 };
 type ProductImagesSetting$2 = ProductImageOriginalSettingProps$1 & GallerySetting$2 & FeatureImageSetting$2 & SelectDisplaySetting$1;
 type ProductImagesStyles$2 = GalleryStyles$2 & FeatureImageStyles$2 & {

package/package.json

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