@gem-sdk/components 19.0.0-staging.60 → 19.0.0-staging.62

package/dist/cjs/carousel-v3/common/selectors.js

@@ -0,0 +1 @@
+"use strict";const e=e=>`gp-carousel-${e}`;exports.getCarouselElementId=e,exports.getCarouselElementSelector=t=>`#${e(t)}`;

package/dist/cjs/carousel-v3/components/root/common/attrs.js

@@ -1 +1 @@
-"use strict";var t=require("@gem-sdk/system"),r=require("./helpers.js");exports.getAttr=e=>{let{rootAttrs:s,builderProps:i,rootId:a}=e,{uniqueComponentId:d}=r.getData(e),u=t.createAttr({"data-id":`${i?.uid}`,id:`gp-root-carousel-${d}`,...s}),l=t.createAttr({...(i?.uid||a)&&{id:`gp-carousel-${d}`},dir:e.setting?.rtl?"rtl":"ltr"});return{rootAttrRender:u,sliderAttr:l}};
+"use strict";var e=require("@gem-sdk/system"),t=require("./helpers.js"),r=require("../../../common/selectors.js");exports.getAttr=s=>{let{rootAttrs:i,builderProps:d,rootId:a}=s,{uniqueComponentId:l}=t.getData(s),o=d?.uid||a?r.getCarouselElementId(l??""):void 0,u=e.createAttr({"data-id":`${d?.uid}`,id:`gp-root-carousel-${l}`,...i}),c=e.createAttr({...o&&{id:o},dir:s.setting?.rtl?"rtl":"ltr"});return{rootAttrRender:u,sliderAttr:c}};

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

@@ -1 +1 @@
-"use strict";var e=require("@gem-sdk/core");const t=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},o=t=>{let o={};return["desktop","mobile","tablet"].forEach(r=>{let i=e.getResponsiveValueByScreen(t,r)?.shapeValue;if(i)o={...o,[r]:i};else{let i=e.getResponsiveValueByScreen(t,r)?.shape;switch(i){case"square":o={...o,[r]:"1/1"};break;case"vertical":o={...o,[r]:"3/4"};break;case"horizontal":o={...o,[r]:"4/3"};break;case"original":o={...o,[r]:""}}}}),e.makeAspectRatio(o)},r=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},i=e=>{let t=e.match(/\d+/g);return t?t[0]:e},l=["only-feature","one-col","two-col"];exports.checkAddOverFlowClass=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",r=e?.["--bbrr"]||"0px",i=e?.["--btlr"]||"0px",l=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==r||"0px"!==i||"0px"!==l},exports.convertSpacing=e=>{if(!e)return{desktop:5};let o=t(e.desktop,5),r=t(e.tablet,o),i=t(e.mobile,r);return{desktop:o,tablet:r,mobile:i}},exports.convertSpacingForIndisdeLayout=r,exports.convertUnitToNumber=t,exports.getAspectRatio=o,exports.getConditionRenderGalleryImages=(t,o)=>{let r=!0,i=!1;return["desktop","mobile","tablet"].forEach(l=>{let s=e.getResponsiveValueByScreen(t,l),n=e.getResponsiveValueByScreen(o,l);s&&"only-feature"!==s&&(r=!1),(["two-col","one-col"].includes(s)||"images"===n)&&(i=!0)}),{isOnlyFeatureAllDevices:r,isRenderGalleryGrid:i}},exports.getDisplayStyle=(e,t)=>{let o={};return["desktop","mobile","tablet"].forEach(r=>{o={...o,[`--d${"desktop"===r?"":`-${r}`}`]:`${e(r)?"none":t}`}}),o},exports.getFeatureGalleryComponentKey=(t,o,r)=>{let i=e.getResponsiveValueByScreen(t?.ftShape,o)?.shape==="original",l=i?e.getResponsiveValueByScreen(t?.ftNavigationPosition,o):"";return[JSON.stringify(t?.position),l,o,r].join("|")},exports.getGalleryCarouselShouldInitByLayout=t=>{let o={};return e.DEVICES.forEach(r=>{let i=e.getResponsiveValueByScreen(t,r);o[r]=null==i||!l.includes(i)}),o},exports.getPaddingBottomByShapeSetting=t=>{let r=o(t),l={desktop:"auto",mobile:"auto",tablet:"auto"};return["desktop","mobile","tablet"].forEach(o=>{let s=e.getResponsiveValueByScreen(t,o),n=s?.height,a=s?.width||"",p=i(n||""),u=a.toString().match(/px/g)?i(a):a;if(n&&a&&!isNaN(Number(p))&&!isNaN(Number(u))){l={...l,[o]:`${Number(p)/Number(u)*100}%`};return}if(n&&!isNaN(Number(p))){l={...l,[o]:n};return}let c=r?.[o]!=="auto"&&r?.[o]?r?.[o]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";l={...l,[o]:`calc((${c})*100%)`}}),l},exports.getSrcImage=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,exports.getStyleGridLayout=t=>{let o={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let r=!1;e.DEVICES.forEach(i=>{let l=e.getResponsiveValueByScreen(t.position,i),s=e.getResponsiveValueByScreen(t.ratioLayout,i),n=e.getResponsiveValueByScreen(t.ratioLayoutRight,i),a="desktop"===i?"--gtc":`--gtc-${i}`,p="desktop"===i?"--gtr":`--gtr-${i}`,u="left"===l?s:n,c=["left","right"].includes(l||"");c&&u?(r=!0,Object.assign(o={...o,[a]:`minmax(0, ${u[0]}fr) minmax(0, ${u[1]}fr)`},{[p]:"fit-content(0)"})):r&&Object.assign(o,{[p]:"unset"})})}return o},exports.getStyleGridOrderForFeature=t=>{let o={"--o":"0","--o-tablet":"0","--o-mobile":"0"};return["desktop","mobile","tablet"].forEach(r=>{let i=e.getResponsiveValueByScreen(t.position,r),l="desktop"===r?"--o":`--o-${r}`;o={...o,[l]:"left"===i?"1":"0"}}),o},exports.getStyleGridOrderForGallery=t=>{let o={"--o":"1","--o-tablet":"1","--o-mobile":"1"};return["desktop","mobile","tablet"].forEach(r=>{let i=e.getResponsiveValueByScreen(t.position,r),l="desktop"===r?"--o":`--o-${r}`;o={...o,[l]:"left"===i?"0":"1"}}),o},exports.getStyleInsideLayout=(t,o,i)=>{let l={},s={},n={},a={},p={},u={};return["desktop","mobile","tablet"].forEach(c=>{let d=e.getResponsiveValueByScreen(t,c),g=e.getResponsiveValueByScreen(o,c)?.width,m=e.getResponsiveValueByScreen(i,c);if(l={...l,[c]:["inside-bottom","inside-left","inside-right"].includes(d)?"absolute":"static"},["inside-bottom"].includes(d)){let e=r(m);g=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(d)&&(g="100%"),n={...n,[c]:"inside-bottom"===d?`${m}`:"auto"},a={...a,[c]:["inside-left","inside-right"].includes(d)?`${m}`:"auto"},u={...u,[c]:["inside-bottom","inside-left"].includes(d)?`${m}`:"auto"},p={...p,[c]:"inside-right"===d?`${m}`:"auto"},s={...s,[c]:g}}),{...e.makeStyleResponsive("pos",l),...e.makeStyleResponsive("w",e.removeNullUndefined(s)),...e.makeStyleResponsive("bottom",e.removeNullUndefined(n)),...e.makeStyleResponsive("top",e.removeNullUndefined(a)),...e.makeStyleResponsive("left",e.removeNullUndefined(u)),...e.makeStyleResponsive("right",e.removeNullUndefined(p))}},exports.getTypeWidthDevice=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,r=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:r}},exports.setDefaultWhenUndefineSetting=e=>({...e,setting:{...e.setting}});
+"use strict";var e=require("@gem-sdk/core"),t=require("../../../../carousel-v3/common/selectors.js");const o=({carouselInstanceUID:e,builderPropUID:t})=>`${e??t}-carousel`,r=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},l=t=>{let o={};return["desktop","mobile","tablet"].forEach(r=>{let l=e.getResponsiveValueByScreen(t,r)?.shapeValue;if(l)o={...o,[r]:l};else{let l=e.getResponsiveValueByScreen(t,r)?.shape;switch(l){case"square":o={...o,[r]:"1/1"};break;case"vertical":o={...o,[r]:"3/4"};break;case"horizontal":o={...o,[r]:"4/3"};break;case"original":o={...o,[r]:""}}}}),e.makeAspectRatio(o)},i=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},s=e=>{let t=e.match(/\d+/g);return t?t[0]:e},n=["only-feature","one-col","two-col"];exports.checkAddOverFlowClass=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",r=e?.["--bbrr"]||"0px",l=e?.["--btlr"]||"0px",i=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==r||"0px"!==l||"0px"!==i},exports.convertSpacing=e=>{if(!e)return{desktop:5};let t=r(e.desktop,5),o=r(e.tablet,t),l=r(e.mobile,o);return{desktop:t,tablet:o,mobile:l}},exports.convertSpacingForIndisdeLayout=i,exports.convertUnitToNumber=r,exports.getAspectRatio=l,exports.getConditionRenderGalleryImages=(t,o)=>{let r=!0,l=!1;return["desktop","mobile","tablet"].forEach(i=>{let s=e.getResponsiveValueByScreen(t,i),n=e.getResponsiveValueByScreen(o,i);s&&"only-feature"!==s&&(r=!1),(["two-col","one-col"].includes(s)||"images"===n)&&(l=!0)}),{isOnlyFeatureAllDevices:r,isRenderGalleryGrid:l}},exports.getDisplayStyle=(e,t)=>{let o={};return["desktop","mobile","tablet"].forEach(r=>{o={...o,[`--d${"desktop"===r?"":`-${r}`}`]:`${e(r)?"none":t}`}}),o},exports.getFeatureGalleryComponentKey=(t,o,r)=>{let l=e.getResponsiveValueByScreen(t?.ftShape,o)?.shape==="original",i=l?e.getResponsiveValueByScreen(t?.ftNavigationPosition,o):"";return[JSON.stringify(t?.position),i,o,r].join("|")},exports.getGalleryCarouselRootId=o,exports.getGalleryCarouselSelector=e=>t.getCarouselElementSelector(o(e)),exports.getGalleryCarouselShouldInitByLayout=t=>{let o={};return e.DEVICES.forEach(r=>{let l=e.getResponsiveValueByScreen(t,r);o[r]=null==l||!n.includes(l)}),o},exports.getPaddingBottomByShapeSetting=t=>{let o=l(t),r={desktop:"auto",mobile:"auto",tablet:"auto"};return["desktop","mobile","tablet"].forEach(l=>{let i=e.getResponsiveValueByScreen(t,l),n=i?.height,a=i?.width||"",u=s(n||""),p=a.toString().match(/px/g)?s(a):a;if(n&&a&&!isNaN(Number(u))&&!isNaN(Number(p))){r={...r,[l]:`${Number(u)/Number(p)*100}%`};return}if(n&&!isNaN(Number(u))){r={...r,[l]:n};return}let c=o?.[l]!=="auto"&&o?.[l]?o?.[l]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";r={...r,[l]:`calc((${c})*100%)`}}),r},exports.getProductImagesCarouselInstanceId=(e,t)=>{let o=e=>e.replace(/[^a-zA-Z0-9_-]+/g,"-").replace(/^-+|-+$/g,""),r=o(e||"product-images"),l=o(t);return[r||"product-images",l||"instance"].join("-")},exports.getSrcImage=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,exports.getStyleGridLayout=t=>{let o={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let r=!1;e.DEVICES.forEach(l=>{let i=e.getResponsiveValueByScreen(t.position,l),s=e.getResponsiveValueByScreen(t.ratioLayout,l),n=e.getResponsiveValueByScreen(t.ratioLayoutRight,l),a="desktop"===l?"--gtc":`--gtc-${l}`,u="desktop"===l?"--gtr":`--gtr-${l}`,p="left"===i?s:n,c=["left","right"].includes(i||"");c&&p?(r=!0,Object.assign(o={...o,[a]:`minmax(0, ${p[0]}fr) minmax(0, ${p[1]}fr)`},{[u]:"fit-content(0)"})):r&&Object.assign(o,{[u]:"unset"})})}return o},exports.getStyleGridOrderForFeature=t=>{let o={"--o":"0","--o-tablet":"0","--o-mobile":"0"};return["desktop","mobile","tablet"].forEach(r=>{let l=e.getResponsiveValueByScreen(t.position,r),i="desktop"===r?"--o":`--o-${r}`;o={...o,[i]:"left"===l?"1":"0"}}),o},exports.getStyleGridOrderForGallery=t=>{let o={"--o":"1","--o-tablet":"1","--o-mobile":"1"};return["desktop","mobile","tablet"].forEach(r=>{let l=e.getResponsiveValueByScreen(t.position,r),i="desktop"===r?"--o":`--o-${r}`;o={...o,[i]:"left"===l?"0":"1"}}),o},exports.getStyleInsideLayout=(t,o,r)=>{let l={},s={},n={},a={},u={},p={};return["desktop","mobile","tablet"].forEach(c=>{let d=e.getResponsiveValueByScreen(t,c),g=e.getResponsiveValueByScreen(o,c)?.width,m=e.getResponsiveValueByScreen(r,c);if(l={...l,[c]:["inside-bottom","inside-left","inside-right"].includes(d)?"absolute":"static"},["inside-bottom"].includes(d)){let e=i(m);g=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(d)&&(g="100%"),n={...n,[c]:"inside-bottom"===d?`${m}`:"auto"},a={...a,[c]:["inside-left","inside-right"].includes(d)?`${m}`:"auto"},p={...p,[c]:["inside-bottom","inside-left"].includes(d)?`${m}`:"auto"},u={...u,[c]:"inside-right"===d?`${m}`:"auto"},s={...s,[c]:g}}),{...e.makeStyleResponsive("pos",l),...e.makeStyleResponsive("w",e.removeNullUndefined(s)),...e.makeStyleResponsive("bottom",e.removeNullUndefined(n)),...e.makeStyleResponsive("top",e.removeNullUndefined(a)),...e.makeStyleResponsive("left",e.removeNullUndefined(p)),...e.makeStyleResponsive("right",e.removeNullUndefined(u))}},exports.getTypeWidthDevice=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,r=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:r}},exports.setDefaultWhenUndefineSetting=e=>({...e,setting:{...e.setting}});

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

@@ -1,8 +1,8 @@
-"use strict";var e=require("@gem-sdk/core");exports.getBorderActiveCss=({settings:t,uid:i,type:r})=>{let o="Liquid"===r?`.gem-slider-item-${i}-{{product.id}}.gp-gallery-image-item::after, .gem-slider-item-gp-gallery-${i}-{{product.id}}.gp-gallery-image-item.gem-slider-item-active::after`:`.gem-slider-item-active.gem-slider-item-${i}.gp-gallery-image-item::after`;return`
-    ${o} {
+"use strict";var e=require("@gem-sdk/core");exports.getBorderActiveCss=({settings:t,uid:i,type:r})=>{let a="Liquid"===r?`.gem-slider-item-${i}-{{product.id}}.gp-gallery-image-item::after, .gem-slider-item-gp-gallery-${i}-{{product.id}}.gp-gallery-image-item.gem-slider-item-active::after`:`.gem-slider-item-active.gem-slider-item-${i}.gp-gallery-image-item::after`;return`
+    ${a} {
       content: "";
       height: 100%;
-      width: 100%;
+      width: calc(100% - 1px);
       position: absolute;
       box-sizing: border-box;
       z-index: 999;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@gem-sdk/core"),t=require("react"),i=require("../gallery-carousel/GalleryCarousel.js"),l=require("../child/ProductGalleryGrid.js"),s=require("../child/ProductFeaturedImageCarousel.js"),u=require("../../composables/getProductImagesStyles.js"),d=require("../../composables/getProductImagesClassName.js"),a=require("../../hooks/useFeatureImageWithGallery.js"),n=require("../../common/common.js");exports.default=o=>{let{setting:c,styles:m,builderProps:g,gallery:p,featureGallery:f,onHandleClickImage:I,priorityFeatureImage:h,children:b,noDataChildren:v,isFilterByVariantEnabled:y}=o,{isEditMode:C}=r.useRenderMode(),x=t.useRef(null),j=r.useCurrentDevice(),P=t.useRef(p);P.current=p;let F=t.useRef(f??p);F.current=f??p;let k=t.useRef(null);t.useEffect(()=>()=>{k.current?.(),k.current=null},[]);let q=t.useCallback((e,r)=>{if(e.destroyed||r.destroyed)return;let t=F.current[e.realIndex]?.id;if(void 0===t)return;let i=P.current.findIndex(e=>e?.id===t);if(r.slides?.forEach(e=>e.classList.remove("gem-slider-item-active")),i<0)return;let l=r.slides?.[i];l?.classList.add("gem-slider-item-active");let s=l?.getBoundingClientRect(),u=r.el?.getBoundingClientRect();if(!s||!u){r.slideTo(i);return}let d=r.params?.direction==="vertical"?s.top>=u.top-1&&s.bottom<=u.bottom+1:s.left>=u.left-1&&s.right<=u.right+1;d||r.slideTo(i)},[]),R=t.useCallback(e=>{if(!x.current)return;let r=x.current.getSwiper();if(r&&e){if(k.current?.(),k.current=null,y){let t=()=>q(r,e);r.on("slideChange",t),k.current=()=>{r.destroyed||r.off("slideChange",t)},t();return}r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())}},[y,q]),w={...c,...m},{isShowCarousel:G,featureImageHeight:H,featureWrapperImage:N,onClickFeatureArrow:D,activeIndexFromFeatureImage:L,setOnClickFeatureArrow:S,onHandleLoadedFeatureImage:U,setActiveIndexFromFeatureImage:$}=a.useFeatureImageWithGallery(o),A=t.useMemo(()=>{if(void 0===L)return;let e=(f??p)[L]?.id;if(void 0===e)return;let r=p.findIndex(r=>r?.id===e);return r>-1?r:void 0},[L,f,p]);if(p?.[0]?.id==="noImageError"&&C)return e.jsx(e.Fragment,{children:v});let{ftImageGalleryClasses:E,imageGalleryWrapperClasses:M}=d.getProductImagesClassName(o),{wrapperFeaturedImageStyle:T,featureImageStyle:B,galleryImageStyle:W}=u.getProductImagesStyles(w,{gallery:p,featureImageHeight:H}),_=`${n.getFeatureGalleryComponentKey(w,j,G)}|${y?"variant-filtered":"all-media"}`;return e.jsxs("div",{className:r.cls("gp-grid gp-w-full gp-relative"),style:T,children:[e.jsxs("div",{className:E,style:B,children:[b,e.jsx(s.default,{ref:x,imgRef:N,productImages:f??p,enableThumbsLink:!y,...w,onHandleClick:(e,r)=>I(e||"",r,!0),onHandleLoaded:U,onHandleUpdateActiveIndex:$,onClickArrow:e=>S(e),builderPropUID:g?.uid,builderPropsClass:`gp-product-images-feature-${g?.uid}`})]}),p.length>(y?0:1)&&e.jsx("div",{className:M,style:W,children:G?e.jsx(i.default,{productImages:p,position:w?.position,...w,builderPropUID:g?.uid,onHandleClick:(e,r)=>I(e||"",r),onSwiperReady:R,activeIndexFormFeatureImage:A,priorityFeatureImage:h,onClickFeatureArrow:D,builderPropsClass:`gp-product-images-gallery-${g?.uid}`}):e.jsx(l.default,{productImages:p,...w,builderPropUID:g?.uid,onHandleClick:(e,r)=>I(e||"",r),activeIndexFromFeatureImage:A,isHiddenInteraction:!0})})]},_)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@gem-sdk/core"),t=require("react"),i=require("../gallery-carousel/GalleryCarousel.js"),s=require("../child/ProductGalleryGrid.js"),l=require("../child/ProductFeaturedImageCarousel.js"),u=require("../../composables/getProductImagesStyles.js"),a=require("../../composables/getProductImagesClassName.js"),d=require("../../hooks/useFeatureImageWithGallery.js"),n=require("../../common/common.js");exports.default=o=>{let{setting:c,styles:m,builderProps:g,gallery:p,featureGallery:f,onHandleClickImage:I,priorityFeatureImage:h,children:b,noDataChildren:v,isFilterByVariantEnabled:C}=o,{isEditMode:y}=r.useRenderMode(),x=t.useRef(null),j=r.useCurrentDevice(),P=r.useUniqProductID(),q=n.getProductImagesCarouselInstanceId(g?.uid,P),F=t.useRef(p);F.current=p;let k=t.useRef(f??p);k.current=f??p;let R=t.useRef(null);t.useEffect(()=>()=>{R.current?.(),R.current=null},[]);let w=t.useCallback((e,r)=>{if(e.destroyed||r.destroyed)return;let t=k.current[e.realIndex]?.id;if(void 0===t)return;let i=F.current.findIndex(e=>e?.id===t);if(r.slides?.forEach(e=>e.classList.remove("gem-slider-item-active")),i<0)return;let s=r.slides?.[i];s?.classList.add("gem-slider-item-active");let l=s?.getBoundingClientRect(),u=r.el?.getBoundingClientRect();if(!l||!u){r.slideTo(i);return}let a=r.params?.direction==="vertical"?l.top>=u.top-1&&l.bottom<=u.bottom+1:l.left>=u.left-1&&l.right<=u.right+1;a||r.slideTo(i)},[]),D=t.useCallback(e=>{if(!x.current)return;let r=x.current.getSwiper();if(r&&e){if(R.current?.(),R.current=null,C){let t=()=>w(r,e);r.on("slideChange",t),R.current=()=>{r.destroyed||r.off("slideChange",t)},t();return}r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())}},[C,w]),U={...c,...m},{isShowCarousel:G,featureImageHeight:H,featureWrapperImage:N,onClickFeatureArrow:L,activeIndexFromFeatureImage:S,setOnClickFeatureArrow:$,onHandleLoadedFeatureImage:A,setActiveIndexFromFeatureImage:E}=d.useFeatureImageWithGallery(o),M=t.useMemo(()=>{if(void 0===S)return;let e=(f??p)[S]?.id;if(void 0===e)return;let r=p.findIndex(r=>r?.id===e);return r>-1?r:void 0},[S,f,p]);if(p?.[0]?.id==="noImageError"&&y)return e.jsx(e.Fragment,{children:v});let{ftImageGalleryClasses:T,imageGalleryWrapperClasses:B}=a.getProductImagesClassName(o),{wrapperFeaturedImageStyle:W,featureImageStyle:_,galleryImageStyle:K}=u.getProductImagesStyles(U,{gallery:p,featureImageHeight:H}),O=`${n.getFeatureGalleryComponentKey(U,j,G)}|${C?"variant-filtered":"all-media"}`;return e.jsxs("div",{className:r.cls("gp-grid gp-w-full gp-relative"),style:W,children:[e.jsxs("div",{className:T,style:_,children:[b,e.jsx(l.default,{ref:x,imgRef:N,productImages:f??p,enableThumbsLink:!C,...U,onHandleClick:(e,r)=>I(e||"",r,!0),onHandleLoaded:A,onHandleUpdateActiveIndex:E,onClickArrow:e=>$(e),builderPropUID:g?.uid,carouselInstanceUID:q,builderPropsClass:`gp-product-images-feature-${g?.uid}`})]}),p.length>(C?0:1)&&e.jsx("div",{className:B,style:K,children:G?e.jsx(i.default,{productImages:p,position:U?.position,...U,builderPropUID:g?.uid,carouselInstanceUID:q,onHandleClick:(e,r)=>I(e||"",r),onSwiperReady:D,activeIndexFormFeatureImage:M,priorityFeatureImage:h,onClickFeatureArrow:L,builderPropsClass:`gp-product-images-gallery-${g?.uid}`}):e.jsx(s.default,{productImages:p,...U,builderPropUID:g?.uid,onHandleClick:(e,r)=>I(e||"",r),activeIndexFromFeatureImage:M,isHiddenInteraction:!0})})]},O)};

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 e=require("react/jsx-runtime"),r=require("@gem-sdk/core"),s=require("../child/ProductFeaturedImageCarousel.js"),t=require("../../composables/getProductImagesClassName.js"),a=require("../../composables/getProductImagesStyles.js");exports.default=u=>{let{isEditMode:d}=r.useRenderMode(),{setting:l,styles:o,gallery:i,builderProps:c,noDataChildren:g,onHandleClickImage:m,children:n}=u,p={...l,...o};if(i?.[0]?.id==="noImageError"&&d)return e.jsx(e.Fragment,{children:g});let{featureImageOnlyOneImageClasses:j}=t.getProductImagesClassName(p),{featureImageStyle:I}=a.getProductImagesStyles(p);return e.jsxs("div",{className:j,style:I,children:[e.jsx(s.default,{productImages:i,...p,onHandleClick:(e,r)=>{m(e||"",r)},builderPropUID:c?.uid,builderPropsClass:`gp-product-images-gallery-${c?.uid}`}),n]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@gem-sdk/core"),s=require("../child/ProductFeaturedImageCarousel.js"),t=require("../../composables/getProductImagesClassName.js"),u=require("../../composables/getProductImagesStyles.js"),a=require("../../common/common.js");exports.default=o=>{let{isEditMode:d}=r.useRenderMode(),{setting:l,styles:c,gallery:i,builderProps:m,noDataChildren:g,onHandleClickImage:n,children:I}=o,p={...l,...c},P=r.useUniqProductID(),j=a.getProductImagesCarouselInstanceId(m?.uid,P);if(i?.[0]?.id==="noImageError"&&d)return e.jsx(e.Fragment,{children:g});let{featureImageOnlyOneImageClasses:q}=t.getProductImagesClassName(p),{featureImageStyle:x}=u.getProductImagesStyles(p);return e.jsxs("div",{className:q,style:x,children:[e.jsx(s.default,{productImages:i,...p,onHandleClick:(e,r)=>{n(e||"",r)},builderPropUID:m?.uid,carouselInstanceUID:j,builderPropsClass:`gp-product-images-gallery-${m?.uid}`}),I]})};

package/dist/cjs/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@gem-sdk/core"),s=require("../../common/common.js"),r=require("../../common/productGallery.js"),a=require("../../composables/getProductImagesClassName.js"),i=require("../../composables/getProductImagesStyles.js"),o=require("../../composables/getProductImagesAttr.js"),l=require("../../common/productFeaturedImage.js"),u=require("../child/MediaIcon.js"),c=require("../lightbox/ButtonOpenLightBox.js"),d=require("../../../../../image/components/NextImage.js"),n=require("../../../../../carousel-v3/components/root/Carousel.js"),m=require("../../../../../carousel-v3/components/item/CarouselItem.js"),g=require("../../hooks/useGalleryCarousel.js"),p=require("@gem-sdk/system");exports.default=y=>{let{builderPropUID:j,productImages:h,onSwiperReady:q,activeIndexFormFeatureImage:I,onClickFeatureArrow:C,builderPropsClass:x,arrow:b,priorityFeatureImage:P,...f}=y,v=t.useCurrentDevice(),{galleryItemClasses:T}=a.getProductImagesClassName(f),{galleryCarouselSettingAttrs:w}=o.getProductImagesAttr(f),{galleryCarouselStyle:k,galleryCarouselItemStyle:A}=i.getProductImagesStyles(f),{moveToIdx:M,isDisplay:N,shapeByLayout:S,isEnableBorderActive:F,isShowButtonLightbox:G,filteredProductImages:H,handleClickCarouselItem:R,safeMoveToIdx:$,setSliderReady:B}=g.useGalleryCarousel(y);return e.jsx(e.Fragment,{children:N&&e.jsx(n.default,{parentClass:x,rootClass:x,setting:w,styles:k,slidesClass:r.getEditorMinHeightClass(v,f.position,f.navigationPosition),builderProps:{uid:`${j}-carousel`},moveToIdx:$,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,onLoaded:e=>{e&&B(!0)},onSwiperReady:q,children:H?.map((t,r)=>{let a=l.isFeatureMedia(t.contentType)?t.previewImage:t.src;return e.jsxs(m.default,{contentType:"productImage",className:T(`gp-gallery-image-item gem-slider-item-${j} ${r===M&&F?"gem-slider-item-active":""}`),onClickItem:()=>R(t?.id),style:A,"data-id":t?.id,children:[e.jsx(d.default,{draggable:"false",src:a,width:t?.width,height:t?.height,alt:t?.alt,setting:{aspectRatio:s.getAspectRatio(S),layout:f?.layout,qualityPercent:f?.qualityPercent,qualityType:f?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),e.jsx(u.default,{contentType:t?.contentType||""}),p.If(G,e.jsx(c.default,{}))]},t?.id)})})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@gem-sdk/core"),s=require("../../common/common.js"),r=require("../../common/productGallery.js"),a=require("../../composables/getProductImagesClassName.js"),o=require("../../composables/getProductImagesStyles.js"),i=require("../../composables/getProductImagesAttr.js"),l=require("../../common/productFeaturedImage.js"),u=require("../child/MediaIcon.js"),d=require("../lightbox/ButtonOpenLightBox.js"),c=require("../../../../../image/components/NextImage.js"),n=require("../../../../../carousel-v3/components/root/Carousel.js"),m=require("../../../../../carousel-v3/components/item/CarouselItem.js"),g=require("../../hooks/useGalleryCarousel.js"),p=require("@gem-sdk/system");exports.default=y=>{let{builderPropUID:j,productImages:h,onSwiperReady:q,activeIndexFormFeatureImage:I,onClickFeatureArrow:C,builderPropsClass:x,carouselInstanceUID:b,arrow:P,priorityFeatureImage:f,...v}=y,T=t.useCurrentDevice(),{galleryItemClasses:w}=a.getProductImagesClassName(v),{galleryCarouselSettingAttrs:k}=i.getProductImagesAttr(v),{galleryCarouselStyle:A,galleryCarouselItemStyle:M}=o.getProductImagesStyles(v),{moveToIdx:N,isDisplay:G,shapeByLayout:R,isEnableBorderActive:S,isShowButtonLightbox:F,filteredProductImages:H,handleClickCarouselItem:$,safeMoveToIdx:B,setSliderReady:D}=g.useGalleryCarousel(y);return e.jsx(e.Fragment,{children:G&&e.jsx(n.default,{parentClass:x,rootClass:x,setting:k,styles:A,slidesClass:r.getEditorMinHeightClass(T,v.position,v.navigationPosition),builderProps:{uid:`${j}-carousel`},rootId:s.getGalleryCarouselRootId({carouselInstanceUID:b,builderPropUID:j}),moveToIdx:B,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,onLoaded:e=>{e&&D(!0)},onSwiperReady:q,children:H?.map((t,r)=>{let a=l.isFeatureMedia(t.contentType)?t.previewImage:t.src;return e.jsxs(m.default,{contentType:"productImage",className:w(`gp-gallery-image-item gem-slider-item-${j} ${r===N&&S?"gem-slider-item-active":""}`),onClickItem:()=>$(t?.id),style:M,"data-id":t?.id,children:[e.jsx(c.default,{draggable:"false",src:a,width:t?.width,height:t?.height,alt:t?.alt,setting:{aspectRatio:s.getAspectRatio(R),layout:v?.layout,qualityPercent:v?.qualityPercent,qualityType:v?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),e.jsx(u.default,{contentType:t?.contentType||""}),p.If(F,e.jsx(d.default,{}))]},t?.id)})})})};

package/dist/esm/carousel-v3/common/selectors.js

@@ -0,0 +1 @@
+let e=e=>`gp-carousel-${e}`,l=l=>`#${e(l)}`;export{e as getCarouselElementId,l as getCarouselElementSelector};

package/dist/esm/carousel-v3/components/root/common/attrs.js

@@ -1 +1 @@
-import{createAttr as t}from"@gem-sdk/system";import{getData as r}from"./helpers.js";let e=e=>{let{rootAttrs:i,builderProps:o,rootId:d}=e,{uniqueComponentId:l}=r(e),s=t({"data-id":`${o?.uid}`,id:`gp-root-carousel-${l}`,...i}),m=t({...(o?.uid||d)&&{id:`gp-carousel-${l}`},dir:e.setting?.rtl?"rtl":"ltr"});return{rootAttrRender:s,sliderAttr:m}};export{e as getAttr};
+import{createAttr as t}from"@gem-sdk/system";import{getData as r}from"./helpers.js";import{getCarouselElementId as o}from"../../../common/selectors.js";let e=e=>{let{rootAttrs:i,builderProps:m,rootId:s}=e,{uniqueComponentId:d}=r(e),l=m?.uid||s?o(d??""):void 0,p=t({"data-id":`${m?.uid}`,id:`gp-root-carousel-${d}`,...i}),g=t({...l&&{id:l},dir:e.setting?.rtl?"rtl":"ltr"});return{rootAttrRender:p,sliderAttr:g}};export{e as getAttr};

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

@@ -1 +1 @@
-import{getResponsiveValueByScreen as e,makeAspectRatio as t,DEVICES as o,makeStyleResponsive as i,removeNullUndefined as l}from"@gem-sdk/core";let r=(t,o,i)=>{let l=e(t?.ftShape,o)?.shape==="original",r=l?e(t?.ftNavigationPosition,o):"";return[JSON.stringify(t?.position),r,o,i].join("|")},a=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,i=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:i}},n=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},s=e=>{if(!e)return{desktop:5};let t=n(e.desktop,5),o=n(e.tablet,t),i=n(e.mobile,o);return{desktop:t,tablet:o,mobile:i}},u=(e,t)=>{let o={};return["desktop","mobile","tablet"].forEach(i=>{o={...o,[`--d${"desktop"===i?"":`-${i}`}`]:`${e(i)?"none":t}`}}),o},d=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",i=e?.["--bbrr"]||"0px",l=e?.["--btlr"]||"0px",r=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==i||"0px"!==l||"0px"!==r},c=o=>{let i={};return["desktop","mobile","tablet"].forEach(t=>{let l=e(o,t)?.shapeValue;if(l)i={...i,[t]:l};else{let l=e(o,t)?.shape;switch(l){case"square":i={...i,[t]:"1/1"};break;case"vertical":i={...i,[t]:"3/4"};break;case"horizontal":i={...i,[t]:"4/3"};break;case"original":i={...i,[t]:""}}}}),t(i)},b=t=>{let i={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let l=!1;o.forEach(o=>{let r=e(t.position,o),a=e(t.ratioLayout,o),n=e(t.ratioLayoutRight,o),s="desktop"===o?"--gtc":`--gtc-${o}`,u="desktop"===o?"--gtr":`--gtr-${o}`,d="left"===r?a:n,c=["left","right"].includes(r||"");c&&d?(l=!0,Object.assign(i={...i,[s]:`minmax(0, ${d[0]}fr) minmax(0, ${d[1]}fr)`},{[u]:"fit-content(0)"})):l&&Object.assign(i,{[u]:"unset"})})}return i},m=t=>{let o={"--o":"0","--o-tablet":"0","--o-mobile":"0"};return["desktop","mobile","tablet"].forEach(i=>{let l=e(t.position,i),r="desktop"===i?"--o":`--o-${i}`;o={...o,[r]:"left"===l?"1":"0"}}),o},p=t=>{let o={"--o":"1","--o-tablet":"1","--o-mobile":"1"};return["desktop","mobile","tablet"].forEach(i=>{let l=e(t.position,i),r="desktop"===i?"--o":`--o-${i}`;o={...o,[r]:"left"===l?"0":"1"}}),o},g=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,f=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},h=(t,o,r)=>{let a={},n={},s={},u={},d={},c={};return["desktop","mobile","tablet"].forEach(i=>{let l=e(t,i),b=e(o,i)?.width,m=e(r,i);if(a={...a,[i]:["inside-bottom","inside-left","inside-right"].includes(l)?"absolute":"static"},["inside-bottom"].includes(l)){let e=f(m);b=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(l)&&(b="100%"),s={...s,[i]:"inside-bottom"===l?`${m}`:"auto"},u={...u,[i]:["inside-left","inside-right"].includes(l)?`${m}`:"auto"},c={...c,[i]:["inside-bottom","inside-left"].includes(l)?`${m}`:"auto"},d={...d,[i]:"inside-right"===l?`${m}`:"auto"},n={...n,[i]:b}}),{...i("pos",a),...i("w",l(n)),...i("bottom",l(s)),...i("top",l(u)),...i("left",l(c)),...i("right",l(d))}},y=(t,o)=>{let i=!0,l=!1;return["desktop","mobile","tablet"].forEach(r=>{let a=e(t,r),n=e(o,r);a&&"only-feature"!==a&&(i=!1),(["two-col","one-col"].includes(a)||"images"===n)&&(l=!0)}),{isOnlyFeatureAllDevices:i,isRenderGalleryGrid:l}},k=e=>({...e,setting:{...e.setting}}),$=e=>{let t=e.match(/\d+/g);return t?t[0]:e},N=t=>{let o=c(t),i={desktop:"auto",mobile:"auto",tablet:"auto"};return["desktop","mobile","tablet"].forEach(l=>{let r=e(t,l),a=r?.height,n=r?.width||"",s=$(a||""),u=n.toString().match(/px/g)?$(n):n;if(a&&n&&!isNaN(Number(s))&&!isNaN(Number(u))){i={...i,[l]:`${Number(s)/Number(u)*100}%`};return}if(a&&!isNaN(Number(s))){i={...i,[l]:a};return}let d=o?.[l]!=="auto"&&o?.[l]?o?.[l]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";i={...i,[l]:`calc((${d})*100%)`}}),i},x=["only-feature","one-col","two-col"],S=t=>{let i={};return o.forEach(o=>{let l=e(t,o);i[o]=null==l||!x.includes(l)}),i};export{d as checkAddOverFlowClass,s as convertSpacing,f as convertSpacingForIndisdeLayout,n as convertUnitToNumber,c as getAspectRatio,y as getConditionRenderGalleryImages,u as getDisplayStyle,r as getFeatureGalleryComponentKey,S as getGalleryCarouselShouldInitByLayout,N as getPaddingBottomByShapeSetting,g as getSrcImage,b as getStyleGridLayout,m as getStyleGridOrderForFeature,p as getStyleGridOrderForGallery,h as getStyleInsideLayout,a as getTypeWidthDevice,k as setDefaultWhenUndefineSetting};
+import{getResponsiveValueByScreen as e,makeAspectRatio as t,DEVICES as o,makeStyleResponsive as r,removeNullUndefined as l}from"@gem-sdk/core";import{getCarouselElementSelector as i}from"../../../../carousel-v3/common/selectors.js";let a=(t,o,r)=>{let l=e(t?.ftShape,o)?.shape==="original",i=l?e(t?.ftNavigationPosition,o):"";return[JSON.stringify(t?.position),i,o,r].join("|")},n=(e,t)=>{let o=e=>e.replace(/[^a-zA-Z0-9_-]+/g,"-").replace(/^-+|-+$/g,""),r=o(e||"product-images"),l=o(t);return[r||"product-images",l||"instance"].join("-")},s=({carouselInstanceUID:e,builderPropUID:t})=>`${e??t}-carousel`,u=e=>i(s(e)),d=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,r=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:r}},c=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},m=e=>{if(!e)return{desktop:5};let t=c(e.desktop,5),o=c(e.tablet,t),r=c(e.mobile,o);return{desktop:t,tablet:o,mobile:r}},g=(e,t)=>{let o={};return["desktop","mobile","tablet"].forEach(r=>{o={...o,[`--d${"desktop"===r?"":`-${r}`}`]:`${e(r)?"none":t}`}}),o},p=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",r=e?.["--bbrr"]||"0px",l=e?.["--btlr"]||"0px",i=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==r||"0px"!==l||"0px"!==i},b=o=>{let r={};return["desktop","mobile","tablet"].forEach(t=>{let l=e(o,t)?.shapeValue;if(l)r={...r,[t]:l};else{let l=e(o,t)?.shape;switch(l){case"square":r={...r,[t]:"1/1"};break;case"vertical":r={...r,[t]:"3/4"};break;case"horizontal":r={...r,[t]:"4/3"};break;case"original":r={...r,[t]:""}}}}),t(r)},f=t=>{let r={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let l=!1;o.forEach(o=>{let i=e(t.position,o),a=e(t.ratioLayout,o),n=e(t.ratioLayoutRight,o),s="desktop"===o?"--gtc":`--gtc-${o}`,u="desktop"===o?"--gtr":`--gtr-${o}`,d="left"===i?a:n,c=["left","right"].includes(i||"");c&&d?(l=!0,Object.assign(r={...r,[s]:`minmax(0, ${d[0]}fr) minmax(0, ${d[1]}fr)`},{[u]:"fit-content(0)"})):l&&Object.assign(r,{[u]:"unset"})})}return r},h=t=>{let o={"--o":"0","--o-tablet":"0","--o-mobile":"0"};return["desktop","mobile","tablet"].forEach(r=>{let l=e(t.position,r),i="desktop"===r?"--o":`--o-${r}`;o={...o,[i]:"left"===l?"1":"0"}}),o},y=t=>{let o={"--o":"1","--o-tablet":"1","--o-mobile":"1"};return["desktop","mobile","tablet"].forEach(r=>{let l=e(t.position,r),i="desktop"===r?"--o":`--o-${r}`;o={...o,[i]:"left"===l?"0":"1"}}),o},$=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,k=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},N=(t,o,i)=>{let a={},n={},s={},u={},d={},c={};return["desktop","mobile","tablet"].forEach(r=>{let l=e(t,r),m=e(o,r)?.width,g=e(i,r);if(a={...a,[r]:["inside-bottom","inside-left","inside-right"].includes(l)?"absolute":"static"},["inside-bottom"].includes(l)){let e=k(g);m=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(l)&&(m="100%"),s={...s,[r]:"inside-bottom"===l?`${g}`:"auto"},u={...u,[r]:["inside-left","inside-right"].includes(l)?`${g}`:"auto"},c={...c,[r]:["inside-bottom","inside-left"].includes(l)?`${g}`:"auto"},d={...d,[r]:"inside-right"===l?`${g}`:"auto"},n={...n,[r]:m}}),{...r("pos",a),...r("w",l(n)),...r("bottom",l(s)),...r("top",l(u)),...r("left",l(c)),...r("right",l(d))}},S=(t,o)=>{let r=!0,l=!1;return["desktop","mobile","tablet"].forEach(i=>{let a=e(t,i),n=e(o,i);a&&"only-feature"!==a&&(r=!1),(["two-col","one-col"].includes(a)||"images"===n)&&(l=!0)}),{isOnlyFeatureAllDevices:r,isRenderGalleryGrid:l}},x=e=>({...e,setting:{...e.setting}}),w=e=>{let t=e.match(/\d+/g);return t?t[0]:e},I=t=>{let o=b(t),r={desktop:"auto",mobile:"auto",tablet:"auto"};return["desktop","mobile","tablet"].forEach(l=>{let i=e(t,l),a=i?.height,n=i?.width||"",s=w(a||""),u=n.toString().match(/px/g)?w(n):n;if(a&&n&&!isNaN(Number(s))&&!isNaN(Number(u))){r={...r,[l]:`${Number(s)/Number(u)*100}%`};return}if(a&&!isNaN(Number(s))){r={...r,[l]:a};return}let d=o?.[l]!=="auto"&&o?.[l]?o?.[l]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";r={...r,[l]:`calc((${d})*100%)`}}),r},v=["only-feature","one-col","two-col"],G=t=>{let r={};return o.forEach(o=>{let l=e(t,o);r[o]=null==l||!v.includes(l)}),r};export{p as checkAddOverFlowClass,m as convertSpacing,k as convertSpacingForIndisdeLayout,c as convertUnitToNumber,b as getAspectRatio,S as getConditionRenderGalleryImages,g as getDisplayStyle,a as getFeatureGalleryComponentKey,s as getGalleryCarouselRootId,u as getGalleryCarouselSelector,G as getGalleryCarouselShouldInitByLayout,I as getPaddingBottomByShapeSetting,n as getProductImagesCarouselInstanceId,$ as getSrcImage,f as getStyleGridLayout,h as getStyleGridOrderForFeature,y as getStyleGridOrderForGallery,N as getStyleInsideLayout,d as getTypeWidthDevice,x as setDefaultWhenUndefineSetting};

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

@@ -2,7 +2,7 @@ import{composeBorderCss as e,composeCornerCss as t}from"@gem-sdk/core";let i=({s
     ${g} {
       content: "";
       height: 100%;
-      width: 100%;
+      width: calc(100% - 1px);
       position: absolute;
       box-sizing: border-box;
       z-index: 999;

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 t,useRef as r,useImperativeHandle as s}from"react";import{useCurrentDevice as a,getResponsiveValueByScreen as i,makeStyleResponsive as m}from"@gem-sdk/core";import{handleMouseOut as l,handleMouseMove as n}from"../../common/hoverAction.js";import{getProductImagesStyles as d}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as c}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as u}from"../../composables/getProductImagesAttr.js";import{createStyle as p}from"@gem-sdk/system";import{getFeaturedImageOnlyOneImageStyle as g}from"../../common/styles.js";import f from"../../../../../carousel-v3/components/root/Carousel.js";import h from"../../../../../carousel-v3/components/item/CarouselItem.js";import v from"./ProductFeaturedImageOnly.js";import{useProductFeaturedImageCarousel as C}from"../../hooks/useProductFeaturedImageCarousel.js";let j=t((o,t)=>{let{productImages:j,imgRef:I,onHandleClick:w,onClickArrow:y,onHandleLoaded:b,onHandleUpdateActiveIndex:k,swiperUpdateTrigger:M,builderPropUID:P,builderPropsClass:S,parentUid:x,enableThumbsLink:A=!0,...H}=o,N=r(null),{ref:R,imageActive:O,imageActiveIndex:B,imageShowWhenHover:F,enableOpenLightBox:W,filteredProductImages:L,isRenderFeatureCarousel:T,genRandomKey:D,getAspectRatioFinal:$,emitUpdateActiveIndex:q}=C(o);s(t,()=>({getSwiper:()=>N.current?.getSwiper()||null}));let z=a(),{galleryItemClasses:E,featureImageOnlyOneImageClasses:G}=c(H),{featuredImageCarouselStyle:J,featureImageCarouselItemStyle:K}=d(H),Q=p({...g({setting:H,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:U}=u(H);return e("div",{ref:R,"data-slot":"children",className:"product-feature-image",children:T?e(f,{ref:N,parentClass:S,elmRef:I,setting:U,styles:J,builderProps:{uid:P},isHiddenArrowWhenDisabled:!0,onLoaded:e=>b&&b(e),onChangeActive:e=>q(e),onClickArrow:()=>y&&y(D()),moveToIdx:B,disableMarginAuto:!0,thumbsSwiper:A?`#gp-carousel-${P}-carousel`:void 0,onHandleChangeSlideByInteraction:e=>{let o=L?.length??0;w(L?.[e>=o?0:e]?.id??"",W)},children:L?.map(o=>e(h,{contentType:"productImage",className:E("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=i(H?.ftClickOpenLightBox,z);"none"!==e&&w(o?.id??"",W)},style:{...K,aspectRatio:$()?.[z]},onMouseMove:e=>n(e,H),onMouseOut:e=>l(e),children:e(v,{image:o,imageShowWhenHover:F,setting:H,aspectRatio:$()})},o?.id))}):e("div",{ref:I,className:"gp-flex gp-w-full",style:{...m("jc",H?.align)},"data-id":P,children:e("div",{"aria-hidden":"true",className:G,style:Q,onMouseMove:e=>n(e,H),onMouseOut:e=>l(e),onBlur:()=>void 0,onClick:()=>{w(O?.id??"",W)},children:e(v,{image:O,imageShowWhenHover:F,setting:H,aspectRatio:$(O)})})})})});var I=o(j);export{I as default};
+import{jsx as e}from"react/jsx-runtime";import{memo as o,forwardRef as t,useRef as r,useImperativeHandle as m}from"react";import{useCurrentDevice as s,getResponsiveValueByScreen as i,makeStyleResponsive as a}from"@gem-sdk/core";import{handleMouseOut as l,handleMouseMove as n}from"../../common/hoverAction.js";import{getProductImagesStyles as d}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as c}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as u}from"../../composables/getProductImagesAttr.js";import{createStyle as p}from"@gem-sdk/system";import{getFeaturedImageOnlyOneImageStyle as g}from"../../common/styles.js";import f from"../../../../../carousel-v3/components/root/Carousel.js";import h from"../../../../../carousel-v3/components/item/CarouselItem.js";import v from"./ProductFeaturedImageOnly.js";import{useProductFeaturedImageCarousel as j}from"../../hooks/useProductFeaturedImageCarousel.js";import{getGalleryCarouselSelector as C}from"../../common/common.js";let I=t((o,t)=>{let{productImages:I,imgRef:w,onHandleClick:y,onClickArrow:b,onHandleLoaded:k,onHandleUpdateActiveIndex:M,swiperUpdateTrigger:P,builderPropUID:S,builderPropsClass:x,carouselInstanceUID:A,parentUid:H,enableThumbsLink:N=!0,...R}=o,O=r(null),{ref:B,imageActive:F,imageActiveIndex:W,imageShowWhenHover:L,enableOpenLightBox:T,filteredProductImages:D,isRenderFeatureCarousel:q,genRandomKey:z,getAspectRatioFinal:E,emitUpdateActiveIndex:G}=j(o);m(t,()=>({getSwiper:()=>O.current?.getSwiper()||null}));let J=s(),{galleryItemClasses:K,featureImageOnlyOneImageClasses:Q}=c(R),{featuredImageCarouselStyle:U,featureImageCarouselItemStyle:V}=d(R),X=p({...g({setting:R,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:Y}=u(R);return e("div",{ref:B,"data-slot":"children",className:"product-feature-image",children:q?e(f,{ref:O,parentClass:x,elmRef:w,setting:Y,styles:U,builderProps:{uid:S},rootId:A,isHiddenArrowWhenDisabled:!0,onLoaded:e=>k&&k(e),onChangeActive:e=>G(e),onClickArrow:()=>b&&b(z()),moveToIdx:W,disableMarginAuto:!0,thumbsSwiper:N?C({carouselInstanceUID:A,builderPropUID:S}):void 0,onHandleChangeSlideByInteraction:e=>{let o=D?.length??0;y(D?.[e>=o?0:e]?.id??"",T)},children:D?.map(o=>e(h,{contentType:"productImage",className:K("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=i(R?.ftClickOpenLightBox,J);"none"!==e&&y(o?.id??"",T)},style:{...V,aspectRatio:E()?.[J]},onMouseMove:e=>n(e,R),onMouseOut:e=>l(e),children:e(v,{image:o,imageShowWhenHover:L,setting:R,aspectRatio:E()})},o?.id))}):e("div",{ref:w,className:"gp-flex gp-w-full",style:{...a("jc",R?.align)},"data-id":S,children:e("div",{"aria-hidden":"true",className:Q,style:X,onMouseMove:e=>n(e,R),onMouseOut:e=>l(e),onBlur:()=>void 0,onClick:()=>{y(F?.id??"",T)},children:e(v,{image:F,imageShowWhenHover:L,setting:R,aspectRatio:E(F)})})})})});var w=o(I);export{w 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 l,cls as o}from"@gem-sdk/core";import{useRef as d,useEffect as a,useCallback as s,useMemo as n}from"react";import u from"../gallery-carousel/GalleryCarousel.js";import m from"../child/ProductGalleryGrid.js";import c from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as p}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as g}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as f}from"../../hooks/useFeatureImageWithGallery.js";import{getFeatureGalleryComponentKey as I}from"../../common/common.js";let h=h=>{let{setting:b,styles:v,builderProps:y,gallery:C,featureGallery:x,onHandleClickImage:F,priorityFeatureImage:P,children:j,noDataChildren:k,isFilterByVariantEnabled:w}=h,{isEditMode:H}=i(),G=d(null),L=l(),N=d(C);N.current=C;let R=d(x??C);R.current=x??C;let U=d(null);a(()=>()=>{U.current?.(),U.current=null},[]);let $=s((e,r)=>{if(e.destroyed||r.destroyed)return;let t=R.current[e.realIndex]?.id;if(void 0===t)return;let i=N.current.findIndex(e=>e?.id===t);if(r.slides?.forEach(e=>e.classList.remove("gem-slider-item-active")),i<0)return;let l=r.slides?.[i];l?.classList.add("gem-slider-item-active");let o=l?.getBoundingClientRect(),d=r.el?.getBoundingClientRect();if(!o||!d){r.slideTo(i);return}let a=r.params?.direction==="vertical"?o.top>=d.top-1&&o.bottom<=d.bottom+1:o.left>=d.left-1&&o.right<=d.right+1;a||r.slideTo(i)},[]),A=s(e=>{if(!G.current)return;let r=G.current.getSwiper();if(r&&e){if(U.current?.(),U.current=null,w){let t=()=>$(r,e);r.on("slideChange",t),U.current=()=>{r.destroyed||r.off("slideChange",t)},t();return}r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())}},[w,$]),D={...b,...v},{isShowCarousel:S,featureImageHeight:T,featureWrapperImage:B,onClickFeatureArrow:E,activeIndexFromFeatureImage:W,setOnClickFeatureArrow:q,onHandleLoadedFeatureImage:z,setActiveIndexFromFeatureImage:J}=f(h),K=n(()=>{if(void 0===W)return;let e=(x??C)[W]?.id;if(void 0===e)return;let r=C.findIndex(r=>r?.id===e);return r>-1?r:void 0},[W,x,C]);if(C?.[0]?.id==="noImageError"&&H)return e(r,{children:k});let{ftImageGalleryClasses:M,imageGalleryWrapperClasses:O}=g(h),{wrapperFeaturedImageStyle:Q,featureImageStyle:V,galleryImageStyle:X}=p(D,{gallery:C,featureImageHeight:T}),Y=`${I(D,L,S)}|${w?"variant-filtered":"all-media"}`;return t("div",{className:o("gp-grid gp-w-full gp-relative"),style:Q,children:[t("div",{className:M,style:V,children:[j,e(c,{ref:G,imgRef:B,productImages:x??C,enableThumbsLink:!w,...D,onHandleClick:(e,r)=>F(e||"",r,!0),onHandleLoaded:z,onHandleUpdateActiveIndex:J,onClickArrow:e=>q(e),builderPropUID:y?.uid,builderPropsClass:`gp-product-images-feature-${y?.uid}`})]}),C.length>(w?0:1)&&e("div",{className:O,style:X,children:S?e(u,{productImages:C,position:D?.position,...D,builderPropUID:y?.uid,onHandleClick:(e,r)=>F(e||"",r),onSwiperReady:A,activeIndexFormFeatureImage:K,priorityFeatureImage:P,onClickFeatureArrow:E,builderPropsClass:`gp-product-images-gallery-${y?.uid}`}):e(m,{productImages:C,...D,builderPropUID:y?.uid,onHandleClick:(e,r)=>F(e||"",r),activeIndexFromFeatureImage:K,isHiddenInteraction:!0})})]},Y)};export{h as default};
+import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{useRenderMode as i,useCurrentDevice as l,useUniqProductID as o,cls as d}from"@gem-sdk/core";import{useRef as a,useEffect as s,useCallback as n,useMemo as u}from"react";import m from"../gallery-carousel/GalleryCarousel.js";import c from"../child/ProductGalleryGrid.js";import p from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as g}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as I}from"../../hooks/useFeatureImageWithGallery.js";import{getProductImagesCarouselInstanceId as h,getFeatureGalleryComponentKey as b}from"../../common/common.js";let v=v=>{let{setting:y,styles:C,builderProps:x,gallery:F,featureGallery:P,onHandleClickImage:j,priorityFeatureImage:k,children:w,noDataChildren:H,isFilterByVariantEnabled:U}=v,{isEditMode:D}=i(),G=a(null),L=l(),N=o(),R=h(x?.uid,N),$=a(F);$.current=F;let A=a(P??F);A.current=P??F;let S=a(null);s(()=>()=>{S.current?.(),S.current=null},[]);let T=n((e,r)=>{if(e.destroyed||r.destroyed)return;let t=A.current[e.realIndex]?.id;if(void 0===t)return;let i=$.current.findIndex(e=>e?.id===t);if(r.slides?.forEach(e=>e.classList.remove("gem-slider-item-active")),i<0)return;let l=r.slides?.[i];l?.classList.add("gem-slider-item-active");let o=l?.getBoundingClientRect(),d=r.el?.getBoundingClientRect();if(!o||!d){r.slideTo(i);return}let a=r.params?.direction==="vertical"?o.top>=d.top-1&&o.bottom<=d.bottom+1:o.left>=d.left-1&&o.right<=d.right+1;a||r.slideTo(i)},[]),B=n(e=>{if(!G.current)return;let r=G.current.getSwiper();if(r&&e){if(S.current?.(),S.current=null,U){let t=()=>T(r,e);r.on("slideChange",t),S.current=()=>{r.destroyed||r.off("slideChange",t)},t();return}r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())}},[U,T]),E={...y,...C},{isShowCarousel:W,featureImageHeight:q,featureWrapperImage:z,onClickFeatureArrow:J,activeIndexFromFeatureImage:K,setOnClickFeatureArrow:M,onHandleLoadedFeatureImage:O,setActiveIndexFromFeatureImage:Q}=I(v),V=u(()=>{if(void 0===K)return;let e=(P??F)[K]?.id;if(void 0===e)return;let r=F.findIndex(r=>r?.id===e);return r>-1?r:void 0},[K,P,F]);if(F?.[0]?.id==="noImageError"&&D)return e(r,{children:H});let{ftImageGalleryClasses:X,imageGalleryWrapperClasses:Y}=f(v),{wrapperFeaturedImageStyle:Z,featureImageStyle:_,galleryImageStyle:ee}=g(E,{gallery:F,featureImageHeight:q}),er=`${b(E,L,W)}|${U?"variant-filtered":"all-media"}`;return t("div",{className:d("gp-grid gp-w-full gp-relative"),style:Z,children:[t("div",{className:X,style:_,children:[w,e(p,{ref:G,imgRef:z,productImages:P??F,enableThumbsLink:!U,...E,onHandleClick:(e,r)=>j(e||"",r,!0),onHandleLoaded:O,onHandleUpdateActiveIndex:Q,onClickArrow:e=>M(e),builderPropUID:x?.uid,carouselInstanceUID:R,builderPropsClass:`gp-product-images-feature-${x?.uid}`})]}),F.length>(U?0:1)&&e("div",{className:Y,style:ee,children:W?e(m,{productImages:F,position:E?.position,...E,builderPropUID:x?.uid,carouselInstanceUID:R,onHandleClick:(e,r)=>j(e||"",r),onSwiperReady:B,activeIndexFormFeatureImage:V,priorityFeatureImage:k,onClickFeatureArrow:J,builderPropsClass:`gp-product-images-gallery-${x?.uid}`}):e(c,{productImages:F,...E,builderPropUID:x?.uid,onHandleClick:(e,r)=>j(e||"",r),activeIndexFromFeatureImage:V,isHiddenInteraction:!0})})]},er)};export{v 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 s from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesClassName as m}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as a}from"../../composables/getProductImagesStyles.js";let l=l=>{let{isEditMode:d}=t(),{setting:i,styles:u,gallery:c,builderProps:p,noDataChildren:g,onHandleClickImage:n,children:f}=l,I={...i,...u};if(c?.[0]?.id==="noImageError"&&d)return e(r,{children:g});let{featureImageOnlyOneImageClasses:P}=m(I),{featureImageStyle:b}=a(I);return o("div",{className:P,style:b,children:[e(s,{productImages:c,...I,onHandleClick:(e,r)=>{n(e||"",r)},builderPropUID:p?.uid,builderPropsClass:`gp-product-images-gallery-${p?.uid}`}),f]})};export{l as default};
+import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import{useRenderMode as m,useUniqProductID as s}from"@gem-sdk/core";import t from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesClassName as a}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as l}from"../../composables/getProductImagesStyles.js";import{getProductImagesCarouselInstanceId as i}from"../../common/common.js";let d=d=>{let{isEditMode:c}=m(),{setting:u,styles:p,gallery:n,builderProps:g,noDataChildren:I,onHandleClickImage:f,children:j}=d,P={...u,...p},b=s(),y=i(g?.uid,b);if(n?.[0]?.id==="noImageError"&&c)return e(r,{children:I});let{featureImageOnlyOneImageClasses:C}=a(P),{featureImageStyle:h}=l(P);return o("div",{className:C,style:h,children:[e(t,{productImages:n,...P,onHandleClick:(e,r)=>{f(e||"",r)},builderPropUID:g?.uid,carouselInstanceUID:y,builderPropsClass:`gp-product-images-gallery-${g?.uid}`}),j]})};export{d as default};

package/dist/esm/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.js

@@ -1 +1 @@
-import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as r}from"@gem-sdk/core";import{getAspectRatio as s}from"../../common/common.js";import{getEditorMinHeightClass as m}from"../../common/productGallery.js";import{getProductImagesClassName as i}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as a}from"../../composables/getProductImagesStyles.js";import{getProductImagesAttr as l}from"../../composables/getProductImagesAttr.js";import{isFeatureMedia as n}from"../../common/productFeaturedImage.js";import c from"../child/MediaIcon.js";import p from"../lightbox/ButtonOpenLightBox.js";import d from"../../../../../image/components/NextImage.js";import u from"../../../../../carousel-v3/components/root/Carousel.js";import g from"../../../../../carousel-v3/components/item/CarouselItem.js";import{useGalleryCarousel as y}from"../../hooks/useGalleryCarousel.js";import{If as h}from"@gem-sdk/system";let f=f=>{let{builderPropUID:j,productImages:C,onSwiperReady:I,activeIndexFormFeatureImage:b,onClickFeatureArrow:P,builderPropsClass:T,arrow:v,priorityFeatureImage:w,...x}=f,k=r(),{galleryItemClasses:q}=i(x),{galleryCarouselSettingAttrs:N}=l(x),{galleryCarouselStyle:A,galleryCarouselItemStyle:G}=a(x),{moveToIdx:S,isDisplay:$,shapeByLayout:B,isEnableBorderActive:H,isShowButtonLightbox:L,filteredProductImages:M,handleClickCarouselItem:R,safeMoveToIdx:D,setSliderReady:E}=y(f);return e(o,{children:$&&e(u,{parentClass:T,rootClass:T,setting:N,styles:A,slidesClass:m(k,x.position,x.navigationPosition),builderProps:{uid:`${j}-carousel`},moveToIdx:D,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,onLoaded:e=>{e&&E(!0)},onSwiperReady:I,children:M?.map((o,r)=>{let m=n(o.contentType)?o.previewImage:o.src;return t(g,{contentType:"productImage",className:q(`gp-gallery-image-item gem-slider-item-${j} ${r===S&&H?"gem-slider-item-active":""}`),onClickItem:()=>R(o?.id),style:G,"data-id":o?.id,children:[e(d,{draggable:"false",src:m,width:o?.width,height:o?.height,alt:o?.alt,setting:{aspectRatio:s(B),layout:x?.layout,qualityPercent:x?.qualityPercent,qualityType:x?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),e(c,{contentType:o?.contentType||""}),h(L,e(p,{}))]},o?.id)})})})};export{f as default};
+import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as r}from"@gem-sdk/core";import{getAspectRatio as s,getGalleryCarouselRootId as m}from"../../common/common.js";import{getEditorMinHeightClass as i}from"../../common/productGallery.js";import{getProductImagesClassName as a}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as l}from"../../composables/getProductImagesStyles.js";import{getProductImagesAttr as n}from"../../composables/getProductImagesAttr.js";import{isFeatureMedia as c}from"../../common/productFeaturedImage.js";import p from"../child/MediaIcon.js";import d from"../lightbox/ButtonOpenLightBox.js";import u from"../../../../../image/components/NextImage.js";import g from"../../../../../carousel-v3/components/root/Carousel.js";import y from"../../../../../carousel-v3/components/item/CarouselItem.js";import{useGalleryCarousel as h}from"../../hooks/useGalleryCarousel.js";import{If as f}from"@gem-sdk/system";let j=j=>{let{builderPropUID:I,productImages:C,onSwiperReady:b,activeIndexFormFeatureImage:P,onClickFeatureArrow:T,builderPropsClass:v,carouselInstanceUID:w,arrow:x,priorityFeatureImage:k,...q}=j,N=r(),{galleryItemClasses:A}=a(q),{galleryCarouselSettingAttrs:G}=n(q),{galleryCarouselStyle:S,galleryCarouselItemStyle:$}=l(q),{moveToIdx:B,isDisplay:H,shapeByLayout:L,isEnableBorderActive:M,isShowButtonLightbox:R,filteredProductImages:D,handleClickCarouselItem:E,safeMoveToIdx:F,setSliderReady:O}=h(j);return e(o,{children:H&&e(g,{parentClass:v,rootClass:v,setting:G,styles:S,slidesClass:i(N,q.position,q.navigationPosition),builderProps:{uid:`${I}-carousel`},rootId:m({carouselInstanceUID:w,builderPropUID:I}),moveToIdx:F,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,onLoaded:e=>{e&&O(!0)},onSwiperReady:b,children:D?.map((o,r)=>{let m=c(o.contentType)?o.previewImage:o.src;return t(y,{contentType:"productImage",className:A(`gp-gallery-image-item gem-slider-item-${I} ${r===B&&M?"gem-slider-item-active":""}`),onClickItem:()=>E(o?.id),style:$,"data-id":o?.id,children:[e(u,{draggable:"false",src:m,width:o?.width,height:o?.height,alt:o?.alt,setting:{aspectRatio:s(L),layout:q?.layout,qualityPercent:q?.qualityPercent,qualityType:q?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),e(p,{contentType:o?.contentType||""}),f(R,e(d,{}))]},o?.id)})})})};export{j as default};

package/package.json

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