@gem-sdk/components 4.0.0-staging.1241 → 4.0.0-staging.1242

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"],ProductImagesV3=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=`
+"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"],ProductImagesV3=e=>{let t=React.useMemo(()=>common.setDefaultWhenUndefineSetting(e),[e]),{redirectProductShopifyLink:a}=core.useProductShopifyEditLink(),{setting:i,styles:l,builderProps:r,builderAttrs:o,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]),b=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),r="all-variants"===t,o=t===l||t.includes(l);return r||o});return l?.length>0?l:e},[c?.selectedOptions,R,n]),x=React.useMemo(()=>b.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[b]),v=React.useMemo(()=>core.getResponsiveValueByScreen(l?.position,d),[d,l?.position]),E=(e,t)=>{V(e),t&&j()},j=()=>{f(!0)},V=e=>{if(!e)return;let t=x[e];if(void 0!==t){let e=b[t];e&&p(e)}};React.useEffect(()=>{if(c&&!M){let e=x[c?.mediaId];if(void 0!==e){let t=b[e]??n?.featuredImage;t&&p(t)}}},[c,x,b,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=()=>b.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: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=ProductImagesV3;
+    `,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",{...o,className:k,style:s,children:[jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:getBorderActiveCss.getBorderActiveCss({settings:{...i,...l},uid:r?.uid,type:"React"})}}),LAYOUT_FEATURE_IMAGE_GALLERY.includes(v)&&jsxRuntime.jsx(FeatureImageWithGallery.default,{...t,isFilterByVariantEnabled:R,gallery:b,priorityFeatureImage:D,onHandleClickImage:(e,t)=>E(e||"",t),noDataChildren:Z,children:P()}),"only-feature"===v&&jsxRuntime.jsx(OnlyFeatureImage.default,{gallery:b,...t,onHandleClickImage:(e,t)=>E(e||"",t),noDataChildren:Z,isFilterByVariantEnabled:R,children:P()}),["one-col","two-col"].includes(v)&&jsxRuntime.jsx(GalleryGrid.default,{gallery:b,...t,onHandleClickImage:(e,t)=>E(e||"",t),noDataChildren:Z,children:P()}),L&&jsxRuntime.jsx(ProductImagesLightBox.default,{productImages:b,builderPropUID:r?.uid,open:g,onHandleClose:()=>f(!1),imageRatio:common.getAspectRatio(l?.ftShape)}),core.filterToolbarPreview(C,!0)]})};exports.default=ProductImagesV3;

package/dist/cjs/product/components/product-images-v3/components/child/ProductFeaturedImageCarousel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),hoverAction=require("../../common/hoverAction.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),styles=require("../../common/styles.js"),Carousel=require("../../../../../carousel-v3/components/root/Carousel.js"),CarouselItem=require("../../../../../carousel-v3/components/item/CarouselItem.js"),ProductFeaturedImageOnly=require("./ProductFeaturedImageOnly.js"),useProductFeaturedImageCarousel=require("../../hooks/useProductFeaturedImageCarousel.js");const ProductFeaturedImageCarousel=React.forwardRef((e,t)=>{let{productImages:r,imgRef:s,onHandleClick:a,onClickArrow:o,onHandleLoaded:u,onHandleUpdateActiveIndex:l,swiperUpdateTrigger:i,builderPropUID:d,builderPropsClass:n,parentUid:c,...m}=e,g=React.useRef(null),{ref:I,imageActive:p,imageActiveIndex:h,imageShowWhenHover:j,enableOpenLightBox:v,filteredProductImages:y,isRenderFeatureCarousel:C,genRandomKey:P,getAspectRatioFinal:x,emitUpdateActiveIndex:f}=useProductFeaturedImageCarousel.useProductFeaturedImageCarousel(e);React.useImperativeHandle(t,()=>({getSwiper:()=>g.current?.getSwiper()||null}));let R=core.useCurrentDevice(),{galleryItemClasses:A,featureImageOnlyOneImageClasses:M}=getProductImagesClassName.getProductImagesClassName(m),{featuredImageCarouselStyle:S,featureImageCarouselItemStyle:q}=getProductImagesStyles.getProductImagesStyles(m),F=system.createStyle({...styles.getFeaturedImageOnlyOneImageStyle({setting:m,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:O}=getProductImagesAttr.getProductImagesAttr(m);return jsxRuntime.jsx("div",{ref:I,"data-slot":"children",className:"product-feature-image",children:C?jsxRuntime.jsx(Carousel.default,{ref:g,parentClass:n,elmRef:s,setting:O,styles:S,builderProps:{uid:d},isHiddenArrowWhenDisabled:!0,onLoaded:e=>u&&u(e),onChangeActive:e=>f(e),onClickArrow:()=>o&&o(P()),moveToIdx:h,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${d}-carousel`,onHandleChangeSlideByInteraction:e=>{let t=y?.length??0,r=e>=t?0:e;a(y?.[r]?.id??"",v)},children:y?.map(e=>jsxRuntime.jsx(CarouselItem.default,{contentType:"productImage",className:A("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let t=core.getResponsiveValueByScreen(m?.ftClickOpenLightBox,R);"none"!==t&&a(e?.id??"",v)},style:q,onMouseMove:e=>hoverAction.handleMouseMove(e,m),onMouseOut:e=>hoverAction.handleMouseOut(e),children:jsxRuntime.jsx(ProductFeaturedImageOnly.default,{image:e,imageShowWhenHover:j,setting:m,aspectRatio:x()})},e?.id))}):jsxRuntime.jsx("div",{ref:s,className:"gp-flex gp-w-full",style:{...core.makeStyleResponsive("jc",m?.align)},"data-id":d,children:jsxRuntime.jsx("div",{"aria-hidden":"true",className:M,style:F,onMouseMove:e=>hoverAction.handleMouseMove(e,m),onMouseOut:e=>hoverAction.handleMouseOut(e),onBlur:()=>void 0,onClick:()=>{a(p?.id??"",v)},children:jsxRuntime.jsx(ProductFeaturedImageOnly.default,{image:p,imageShowWhenHover:j,setting:m,aspectRatio:x(p)})})})})});var ProductFeaturedImageCarousel$1=React.memo(ProductFeaturedImageCarousel);exports.default=ProductFeaturedImageCarousel$1;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),hoverAction=require("../../common/hoverAction.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),styles=require("../../common/styles.js"),Carousel=require("../../../../../carousel-v3/components/root/Carousel.js"),CarouselItem=require("../../../../../carousel-v3/components/item/CarouselItem.js"),ProductFeaturedImageOnly=require("./ProductFeaturedImageOnly.js"),useProductFeaturedImageCarousel=require("../../hooks/useProductFeaturedImageCarousel.js");const ProductFeaturedImageCarousel=React.forwardRef((e,t)=>{let{productImages:r,imgRef:s,onHandleClick:a,onClickArrow:o,onHandleLoaded:u,onHandleUpdateActiveIndex:l,swiperUpdateTrigger:i,builderPropUID:d,builderPropsClass:n,parentUid:c,isFilterByVariantEnabled:m,...g}=e,I=React.useRef(null),{ref:p,imageActive:h,imageActiveIndex:j,imageShowWhenHover:v,enableOpenLightBox:y,filteredProductImages:C,isRenderFeatureCarousel:P,genRandomKey:x,getAspectRatioFinal:f,emitUpdateActiveIndex:R}=useProductFeaturedImageCarousel.useProductFeaturedImageCarousel(e);React.useImperativeHandle(t,()=>({getSwiper:()=>I.current?.getSwiper()||null}));let A=core.useCurrentDevice(),{galleryItemClasses:M,featureImageOnlyOneImageClasses:S}=getProductImagesClassName.getProductImagesClassName(g),{featuredImageCarouselStyle:q,featureImageCarouselItemStyle:F}=getProductImagesStyles.getProductImagesStyles(g),O=system.createStyle({...styles.getFeaturedImageOnlyOneImageStyle({setting:g,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:w}=getProductImagesAttr.getProductImagesAttr(g);return jsxRuntime.jsx("div",{ref:p,"data-slot":"children",className:"product-feature-image",children:P?jsxRuntime.jsx(Carousel.default,{ref:I,parentClass:n,elmRef:s,setting:w,styles:q,builderProps:{uid:d},isHiddenArrowWhenDisabled:!0,onLoaded:e=>u&&u(e),onChangeActive:e=>R(e),onClickArrow:()=>o&&o(x()),moveToIdx:j,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${d}-carousel`,onHandleChangeSlideByInteraction:e=>{let t=C?.length??0,r=e>=t?0:e;a(C?.[r]?.id??"",y)},children:C?.map(e=>jsxRuntime.jsx(CarouselItem.default,{contentType:"productImage",className:M("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let t=core.getResponsiveValueByScreen(g?.ftClickOpenLightBox,A);"none"!==t&&a(e?.id??"",y)},style:F,onMouseMove:e=>hoverAction.handleMouseMove(e,g),onMouseOut:e=>hoverAction.handleMouseOut(e),children:jsxRuntime.jsx(ProductFeaturedImageOnly.default,{image:e,imageShowWhenHover:v,setting:g,aspectRatio:f()})},e?.id))}):jsxRuntime.jsx("div",{ref:s,className:"gp-flex gp-w-full",style:{...core.makeStyleResponsive("jc",g?.align)},"data-id":d,children:jsxRuntime.jsx("div",{"aria-hidden":"true",className:S,style:O,onMouseMove:e=>hoverAction.handleMouseMove(e,g),onMouseOut:e=>hoverAction.handleMouseOut(e),onBlur:()=>void 0,onClick:()=>{a(h?.id??"",y)},children:jsxRuntime.jsx(ProductFeaturedImageOnly.default,{image:m?r?.[0]:h,imageShowWhenHover:v,setting:g,aspectRatio:f(m?r?.[0]:h)})})})})});var ProductFeaturedImageCarousel$1=React.memo(ProductFeaturedImageCarousel);exports.default=ProductFeaturedImageCarousel$1;

package/dist/cjs/product/components/product-images-v3/components/feature-only/OnlyFeatureImage.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ProductFeaturedImageCarousel=require("../child/ProductFeaturedImageCarousel.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js");const OnlyFeatureImage=e=>{let{isEditMode:r}=core.useRenderMode(),{setting:s,styles:t,gallery:a,builderProps:u,noDataChildren:o,onHandleClickImage:d,children:l}=e,m={...s,...t};if(a?.[0]?.id==="noImageError"&&r)return jsxRuntime.jsx(jsxRuntime.Fragment,{children:o});let{featureImageOnlyOneImageClasses:g}=getProductImagesClassName.getProductImagesClassName(m),{featureImageStyle:c}=getProductImagesStyles.getProductImagesStyles(m);return jsxRuntime.jsxs("div",{className:g,style:c,children:[jsxRuntime.jsx(ProductFeaturedImageCarousel.default,{productImages:a,...m,onHandleClick:(e,r)=>{d(e||"",r)},builderPropUID:u?.uid,builderPropsClass:`gp-product-images-gallery-${u?.uid}`}),l]})};exports.default=OnlyFeatureImage;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ProductFeaturedImageCarousel=require("../child/ProductFeaturedImageCarousel.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js");const OnlyFeatureImage=e=>{let{isEditMode:r}=core.useRenderMode(),{setting:s,styles:t,gallery:a,builderProps:u,noDataChildren:l,onHandleClickImage:d,children:o}=e,i={...s,...t};if(a?.[0]?.id==="noImageError"&&r)return jsxRuntime.jsx(jsxRuntime.Fragment,{children:l});let{featureImageOnlyOneImageClasses:m}=getProductImagesClassName.getProductImagesClassName(i),{featureImageStyle:g}=getProductImagesStyles.getProductImagesStyles(i);return jsxRuntime.jsxs("div",{className:m,style:g,children:[jsxRuntime.jsx(ProductFeaturedImageCarousel.default,{productImages:a,...i,onHandleClick:(e,r)=>{d(e||"",r)},builderPropUID:u?.uid,builderPropsClass:`gp-product-images-gallery-${u?.uid}`,isFilterByVariantEnabled:e.isFilterByVariantEnabled}),o]})};exports.default=OnlyFeatureImage;

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:"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;
+"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 can 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 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"],ProductImagesV3=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=`
+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 b from"./components/lightbox/ProductImagesLightBox.js";import I 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"],ProductImagesV3=w=>{let L=m(()=>a(w),[w]),{redirectProductShopifyLink:V}=l(),{setting:k,styles:v,builderProps:A,builderAttrs:O,style:_,children:x}=L,B=C(),H=o(),P=r(),{isChangeSelectedOption:F}=n(),G=d(),T=s(e=>e.setProductFeaturedImage),[j,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(()=>k?.typeDisplay==="all-images"&&!F,[F,k?.typeDisplay]),z=m(()=>{if(Y){let e;switch(k?.preDisplay){case"1st-images":e=N(B);break;case"1st-3d-mode":e=U(B);break;case"1st-video":e=R(B);break;case"1st-available-variant":e=P?.media}return T(e),e}},[Y,k?.preDisplay,T,B,P?.media]),J=m(()=>k?.filterByVariant==="selected_variant",[k?.filterByVariant]),W=m(()=>{let e=getProductGallery(B);if(!e?.length)return[{id:B?.featuredImage?.id||"noImageError",src:B?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:B?.featuredImage?.width||480,height:B?.featuredImage?.height||480}];if(!J||!P?.selectedOptions?.length)return e;let t=P.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},[P?.selectedOptions,J,B]),X=m(()=>W.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[W]),q=m(()=>p(v?.position,H),[H,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&&T(e)}};g(()=>{if(P&&!Y){let e=X[P?.mediaId];if(void 0!==e){let t=W[e]??B?.featuredImage;t&&T(t)}}},[P,X,W,B?.featuredImage,T,Y]);let ee=m(()=>{let e="popup"===p(k?.ftClickOpenLightBox,H)||p(k?.clickOpenLightBox,H);return e||"edit"!==G||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[k?.ftClickOpenLightBox,k?.clickOpenLightBox,H,G]),et=()=>W.length>0?h.map(c(x),e=>u(e)?t(e.type,{...e.props,isInsideProductImage:!0,navigationPosition:k?.ftNavigationPosition,imageData:{imageShape:v?.ftShape,imageAlign:v?.align,imageLayout:v?.position},dotData:{dotSize:k?.ftDotSize,dotGapToCarousel:k?.ftDotGapToCarousel,dotStyle:k?.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>
-    `,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{ProductImagesV3 as default};
+    `,ei=t(I,{elementType:"secondary",description:"Catch your customer's attention with attracted media.",descriptionActions:[{text:"Add image",callback:V},{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:{...k,...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,isFilterByVariantEnabled:J,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(b,{productImages:W,builderPropUID:A?.uid,open:j,onHandleClose:()=>S(!1),imageRatio:i(v?.ftShape)}),c(x,!0)]})};export{ProductImagesV3 as default};

package/dist/esm/product/components/product-images-v3/components/child/ProductFeaturedImageCarousel.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{memo as o,forwardRef as r,useRef as t,useImperativeHandle as a}from"react";import{useCurrentDevice as s,getResponsiveValueByScreen as m,makeStyleResponsive as i}from"@gem-sdk/core";import{handleMouseMove as l,handleMouseOut as n}from"../../common/hoverAction.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as d}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as c}from"../../composables/getProductImagesAttr.js";import{createStyle as g}from"@gem-sdk/system";import{getFeaturedImageOnlyOneImageStyle as p}from"../../common/styles.js";import f from"../../../../../carousel-v3/components/root/Carousel.js";import h from"../../../../../carousel-v3/components/item/CarouselItem.js";import C from"./ProductFeaturedImageOnly.js";import{useProductFeaturedImageCarousel as v}from"../../hooks/useProductFeaturedImageCarousel.js";let ProductFeaturedImageCarousel=r((o,r)=>{let{productImages:I,imgRef:j,onHandleClick:w,onClickArrow:y,onHandleLoaded:P,onHandleUpdateActiveIndex:b,swiperUpdateTrigger:k,builderPropUID:M,builderPropsClass:S,parentUid:x,...A}=o,F=t(null),{ref:H,imageActive:N,imageActiveIndex:O,imageShowWhenHover:R,enableOpenLightBox:B,filteredProductImages:W,isRenderFeatureCarousel:$,genRandomKey:L,getAspectRatioFinal:T,emitUpdateActiveIndex:D}=v(o);a(r,()=>({getSwiper:()=>F.current?.getSwiper()||null}));let q=s(),{galleryItemClasses:z,featureImageOnlyOneImageClasses:E}=d(A),{featuredImageCarouselStyle:G,featureImageCarouselItemStyle:J}=u(A),K=g({...p({setting:A,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:Q}=c(A);return e("div",{ref:H,"data-slot":"children",className:"product-feature-image",children:$?e(f,{ref:F,parentClass:S,elmRef:j,setting:Q,styles:G,builderProps:{uid:M},isHiddenArrowWhenDisabled:!0,onLoaded:e=>P&&P(e),onChangeActive:e=>D(e),onClickArrow:()=>y&&y(L()),moveToIdx:O,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${M}-carousel`,onHandleChangeSlideByInteraction:e=>{let o=W?.length??0,r=e>=o?0:e;w(W?.[r]?.id??"",B)},children:W?.map(o=>e(h,{contentType:"productImage",className:z("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=m(A?.ftClickOpenLightBox,q);"none"!==e&&w(o?.id??"",B)},style:J,onMouseMove:e=>l(e,A),onMouseOut:e=>n(e),children:e(C,{image:o,imageShowWhenHover:R,setting:A,aspectRatio:T()})},o?.id))}):e("div",{ref:j,className:"gp-flex gp-w-full",style:{...i("jc",A?.align)},"data-id":M,children:e("div",{"aria-hidden":"true",className:E,style:K,onMouseMove:e=>l(e,A),onMouseOut:e=>n(e),onBlur:()=>void 0,onClick:()=>{w(N?.id??"",B)},children:e(C,{image:N,imageShowWhenHover:R,setting:A,aspectRatio:T(N)})})})})});var ProductFeaturedImageCarousel$1=o(ProductFeaturedImageCarousel);export{ProductFeaturedImageCarousel$1 as default};
+import{jsx as e}from"react/jsx-runtime";import{memo as o,forwardRef as r,useRef as t,useImperativeHandle as a}from"react";import{useCurrentDevice as s,getResponsiveValueByScreen as m,makeStyleResponsive as i}from"@gem-sdk/core";import{handleMouseMove as l,handleMouseOut as n}from"../../common/hoverAction.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as d}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as c}from"../../composables/getProductImagesAttr.js";import{createStyle as g}from"@gem-sdk/system";import{getFeaturedImageOnlyOneImageStyle as p}from"../../common/styles.js";import f from"../../../../../carousel-v3/components/root/Carousel.js";import h from"../../../../../carousel-v3/components/item/CarouselItem.js";import C from"./ProductFeaturedImageOnly.js";import{useProductFeaturedImageCarousel as v}from"../../hooks/useProductFeaturedImageCarousel.js";let ProductFeaturedImageCarousel=r((o,r)=>{let{productImages:I,imgRef:j,onHandleClick:w,onClickArrow:y,onHandleLoaded:P,onHandleUpdateActiveIndex:b,swiperUpdateTrigger:k,builderPropUID:M,builderPropsClass:S,parentUid:x,isFilterByVariantEnabled:A,...F}=o,H=t(null),{ref:N,imageActive:O,imageActiveIndex:R,imageShowWhenHover:B,enableOpenLightBox:W,filteredProductImages:$,isRenderFeatureCarousel:L,genRandomKey:T,getAspectRatioFinal:D,emitUpdateActiveIndex:q}=v(o);a(r,()=>({getSwiper:()=>H.current?.getSwiper()||null}));let z=s(),{galleryItemClasses:E,featureImageOnlyOneImageClasses:G}=d(F),{featuredImageCarouselStyle:J,featureImageCarouselItemStyle:K}=u(F),Q=g({...p({setting:F,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:U}=c(F);return e("div",{ref:N,"data-slot":"children",className:"product-feature-image",children:L?e(f,{ref:H,parentClass:S,elmRef:j,setting:U,styles:J,builderProps:{uid:M},isHiddenArrowWhenDisabled:!0,onLoaded:e=>P&&P(e),onChangeActive:e=>q(e),onClickArrow:()=>y&&y(T()),moveToIdx:R,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${M}-carousel`,onHandleChangeSlideByInteraction:e=>{let o=$?.length??0,r=e>=o?0:e;w($?.[r]?.id??"",W)},children:$?.map(o=>e(h,{contentType:"productImage",className:E("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=m(F?.ftClickOpenLightBox,z);"none"!==e&&w(o?.id??"",W)},style:K,onMouseMove:e=>l(e,F),onMouseOut:e=>n(e),children:e(C,{image:o,imageShowWhenHover:B,setting:F,aspectRatio:D()})},o?.id))}):e("div",{ref:j,className:"gp-flex gp-w-full",style:{...i("jc",F?.align)},"data-id":M,children:e("div",{"aria-hidden":"true",className:G,style:Q,onMouseMove:e=>l(e,F),onMouseOut:e=>n(e),onBlur:()=>void 0,onClick:()=>{w(O?.id??"",W)},children:e(C,{image:A?I?.[0]:O,imageShowWhenHover:B,setting:F,aspectRatio:D(A?I?.[0]:O)})})})})});var ProductFeaturedImageCarousel$1=o(ProductFeaturedImageCarousel);export{ProductFeaturedImageCarousel$1 as default};

package/dist/esm/product/components/product-images-v3/components/feature-only/OnlyFeatureImage.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import{useRenderMode as t}from"@gem-sdk/core";import a from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesClassName as m}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as s}from"../../composables/getProductImagesStyles.js";let OnlyFeatureImage=l=>{let{isEditMode:d}=t(),{setting:i,styles:u,gallery:c,builderProps:g,noDataChildren:p,onHandleClickImage:n,children:I}=l,f={...i,...u};if(c?.[0]?.id==="noImageError"&&d)return e(r,{children:p});let{featureImageOnlyOneImageClasses:y}=m(f),{featureImageStyle:P}=s(f);return o("div",{className:y,style:P,children:[e(a,{productImages:c,...f,onHandleClick:(e,r)=>{n(e||"",r)},builderPropUID:g?.uid,builderPropsClass:`gp-product-images-gallery-${g?.uid}`}),I]})};export{OnlyFeatureImage as default};
+import{jsx as e,Fragment as r,jsxs as a}from"react/jsx-runtime";import{useRenderMode as t}from"@gem-sdk/core";import l from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesClassName as o}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as s}from"../../composables/getProductImagesStyles.js";let OnlyFeatureImage=i=>{let{isEditMode:m}=t(),{setting:d,styles:u,gallery:c,builderProps:n,noDataChildren:g,onHandleClickImage:p,children:I}=i,f={...d,...u};if(c?.[0]?.id==="noImageError"&&m)return e(r,{children:g});let{featureImageOnlyOneImageClasses:y}=o(f),{featureImageStyle:b}=s(f);return a("div",{className:y,style:b,children:[e(l,{productImages:c,...f,onHandleClick:(e,r)=>{p(e||"",r)},builderPropUID:n?.uid,builderPropsClass:`gp-product-images-gallery-${n?.uid}`,isFilterByVariantEnabled:i.isFilterByVariantEnabled}),I]})};export{OnlyFeatureImage as default};

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

@@ -1 +1 @@
-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};
+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 can 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "4.0.0-staging.1241",
+  "version": "4.0.0-staging.1242",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,6 +21,7 @@
     "format": "prettier --write \"./src/**/*.{ts,tsx}\"",
     "relationship": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/element-relationship/index.js",
     "update-img-src-3rd": "node ./scripts/update-img-src-3rd.js",
+    "generate-tailwind": "node ./scripts/generateTailwind.js",
     "scan-and-translate": "node ./scripts/scan-and-translate.js",
     "scan-all-text": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/scan-all-text && node ./scripts/scan-all-text"
   },
@@ -28,8 +29,16 @@
     "@gem-sdk/core": "4.0.0-staging.1233",
     "@gem-sdk/styles": "4.0.0-staging.1231",
     "@gem-sdk/system": "4.0.0-staging.1231",
-    "tsup": "^8.5.0",
     "@types/react-transition-group": "^4.4.12",
+    "tsup": "^8.5.0",
+    "postcss-import": "^16.1.1",
+    "react-transition-group": "^4.4.5",
+    "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
+    "autoprefixer": "^10.4.21",
+    "cssnano": "^7.1.1",
+    "postcss": "^8.5.6",
+    "postcss-discard-comments": "^7.0.4",
+    "postcss-prefixwrap": "^1.57.0",
     "xlsx": "^0.18.5"
   },
   "dependencies": {