@gem-sdk/components 19.0.0-staging.55 → 19.0.0-staging.57

package/dist/cjs/carousel-v3/components/arrow/common/classes.js

@@ -1 +1 @@
-"use strict";var e=require("@gem-sdk/system"),r=require("./helpers.js");exports.getClass=s=>{let{className:t,componentId:g,rootId:p,left:i,uid:l,isHiddenWhenDisabled:o,disabled:a,showWhenHover:c,showArrow:u,vertical:n,isLiquid:f=!1}=s,v=r.getResponsiveSetting(u||{}),y=i?"gp-carousel-action-back gem-slider-previous":"gp-carousel-action-next gem-slider-next",b=`gp-invisible ${f?"":"gp-opacity-0"}`,d=e.createClass({"gp-z-1 gp-items-center gp-justify-center gp-overflow-hidden gp-shrink-0 before:gp-left-0 before:gp-top-0":!0,["gp-carousel-arrow-"+l]:!0,...t&&{[t]:!0},...g&&{[g]:!0},...p&&{[p]:!0},[y]:!0,...{[b]:o&&a,"gp-cursor-default gp-text-gray-300":a,"gp-cursor-pointer gp-text-gray-500":!a,"!gp-invisible group-hover/carousel:!gp-visible":c,...r.getClassArrowDisplay(v)}}),m=e.createClass({"gp-flex gp-items-center gp-justify-center [&>svg]:gp-h-full [&>svg]:gp-w-full":!0,...r.getClassArrowRotate(!!i,n)});return{buttonClass:d,buttonContentClass:m}};
+"use strict";var e=require("@gem-sdk/system"),r=require("./helpers.js");exports.getClass=s=>{let{className:t,componentId:g,rootId:p,left:i,uid:l,isHiddenWhenDisabled:o,disabled:a,showWhenHover:c,showArrow:u,vertical:n,isLiquid:f=!1}=s,v=r.getResponsiveSetting(u||{}),y=i?"gp-carousel-action-back gem-slider-previous":"gp-carousel-action-next gem-slider-next",b=`gp-invisible ${f?"":"gp-opacity-0"}`,d=e.createClass({"gp-z-2 gp-items-center gp-justify-center gp-overflow-hidden gp-shrink-0 before:gp-left-0 before:gp-top-0":!0,["gp-carousel-arrow-"+l]:!0,...t&&{[t]:!0},...g&&{[g]:!0},...p&&{[p]:!0},[y]:!0,...{[b]:o&&a,"gp-cursor-default gp-text-gray-300":a,"gp-cursor-pointer gp-text-gray-500":!a,"!gp-invisible group-hover/carousel:!gp-visible":c,...r.getClassArrowDisplay(v)}}),m=e.createClass({"gp-flex gp-items-center gp-justify-center [&>svg]:gp-h-full [&>svg]:gp-w-full":!0,...r.getClassArrowRotate(!!i,n)});return{buttonClass:d,buttonContentClass:m}};

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

@@ -1,9 +1,10 @@
-"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} {
+"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} {
       content: "";
       height: 100%;
       width: 100%;
       position: absolute;
+      box-sizing: border-box;
       z-index: 999;
       top: 0;
       left: 0;

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"),o=require("../../composables/getProductImagesStyles.js"),i=require("../../composables/getProductImagesAttr.js"),l=require("../../common/productFeaturedImage.js"),u=require("../child/MediaIcon.js"),n=require("../lightbox/ButtonOpenLightBox.js"),c=require("../../../../../image/components/NextImage.js"),d=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}=i.getProductImagesAttr(f),{galleryCarouselStyle:k,galleryCarouselItemStyle:A}=o.getProductImagesStyles(f),{isDisplay:M,shapeByLayout:N,isShowButtonLightbox:S,filteredProductImages:F,handleClickCarouselItem:G,safeMoveToIdx:H,setSliderReady:R}=g.useGalleryCarousel(y);return e.jsx(e.Fragment,{children:M&&e.jsx(d.default,{parentClass:x,rootClass:x,setting:w,styles:k,slidesClass:r.getEditorMinHeightClass(v,f.position,f.navigationPosition),builderProps:{uid:`${j}-carousel`},moveToIdx:H,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,onLoaded:e=>{e&&R(!0)},onSwiperReady:q,children:F?.map(t=>{let r=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}`),onClickItem:()=>G(t?.id),style:A,"data-id":t?.id,children:[e.jsx(c.default,{draggable:"false",src:r,width:t?.width,height:t?.height,alt:t?.alt,setting:{aspectRatio:s.getAspectRatio(N),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(S,e.jsx(n.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"),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)})})})};

package/dist/cjs/product/components/product-images-v3/hooks/useGalleryCarousel.js

@@ -1 +1 @@
-"use strict";var e=require("@gem-sdk/core"),t=require("react"),r=require("./useFilterImagesByVariant.js"),s=require("../../../../image/common/helpers.js"),o=require("../common/productGallery.js");exports.useGalleryCarousel=a=>{let{builderPropUID:i,productImages:u,onHandleClick:l,activeIndexFormFeatureImage:n,onClickFeatureArrow:c,builderPropsClass:p,arrow:d,priorityFeatureImage:h,...y}=a,m=e.useCurrentDevice(),F=e.useFeaturedImageGlobal(),[f,B]=t.useState(c||""),g=e.useEditorMode(),[I,S]=t.useState(0),q=t.useRef(),[v,C]=t.useState(I),[b,E]=t.useState(!1),{filteredProductImages:T}=r.useFilterImagesByVariant({productImages:u,displayByVariant:y?.displayByVariant,variantSelect:y?.variantSelect});t.useEffect(()=>{B(c||"")},[c]),t.useEffect(()=>{q.current&&clearTimeout(q.current),f&&(q.current=setTimeout(()=>{S(n||0),B("")}))},[n]),t.useEffect(()=>{if(h){let e=T?.findIndex(e=>e.id===h.id)||0;S(e),B("")}},[h,T]),t.useEffect(()=>{let e=T?.findIndex(e=>e.id===F?.id);S(e||0),B("")},[F,T]);let V=t.useMemo(()=>o.getShapeByLayout({shape:y.shape,shapeForBottom:y.shapeForBottom,shapeFor1Col:y.shapeFor1Col,shapeFor2Col:y.shapeFor2Col,shapeForFtOnly:y.shapeForFtOnly,shapeForInsideBottom:y.shapeForInsideBottom,shapeForInside:y.shapeForInside},y.position),[y.shape,y.shapeForBottom,y.shapeFor1Col,y.shapeFor2Col,y.shapeForFtOnly,y.position,y.shapeForInsideBottom,y.shapeForInside]),k=t.useCallback(()=>{s.handleSetSrcForProductImageList({builderPropUID:i,shapeByLayout:V,qualityType:y.qualityType,qualityPercent:y.qualityPercent})},[V,y.qualityPercent,y.qualityType,i]);t.useEffect(()=>{if("edit"===g)return;let e=document?.querySelector(`.gem-slider-item-${i} .product-list-image`);if(!e)return;k();let t=new ResizeObserver(()=>{k()});return t?.observe(e,{}),()=>{t?.disconnect()}},[k,i,g]);let O=e.getResponsiveValueByScreen(y.clickOpenLightBox,m),x=t.useMemo(()=>{let t=o.checkDisplayGalleryByWidth({shapeByLayout:V});return e.getResponsiveValueByScreen(t,m)},[V,m]),R=t.useMemo(()=>y?.borderActive?.border!=="none",[y?.borderActive?.border]),G=e.getResponsiveValueByScreen(y?.clickOpenLightBox,m);return t.useEffect(()=>{let e;return T&&T.length>0&&b&&(e=setTimeout(()=>{C(I)},80)),()=>{e&&clearTimeout(e)}},[I,T,b]),{moveToIdx:I,isDisplay:x,shapeByLayout:V,isEnableBorderActive:R,isShowButtonLightbox:G,filteredProductImages:T,handleClickCarouselItem:e=>{l&&l(e||"",O)},setSliderReady:E,safeMoveToIdx:v}};
+"use strict";var e=require("@gem-sdk/core"),t=require("react"),r=require("./useFilterImagesByVariant.js"),s=require("../../../../image/common/helpers.js"),o=require("../common/productGallery.js");const a=e=>void 0!==e&&e>=0?e:0;exports.useGalleryCarousel=i=>{let{builderPropUID:u,productImages:l,onHandleClick:n,activeIndexFormFeatureImage:c,onClickFeatureArrow:p,builderPropsClass:d,arrow:h,priorityFeatureImage:y,...m}=i,F=e.useCurrentDevice(),f=e.useFeaturedImageGlobal(),[B,g]=t.useState(p||""),I=e.useEditorMode(),[S,q]=t.useState(0),v=t.useRef(),[C,b]=t.useState(S),[E,T]=t.useState(!1),{filteredProductImages:V}=r.useFilterImagesByVariant({productImages:l,displayByVariant:m?.displayByVariant,variantSelect:m?.variantSelect});t.useEffect(()=>{g(p||"")},[p]),t.useEffect(()=>{v.current&&clearTimeout(v.current),B&&(v.current=setTimeout(()=>{q(c||0),g("")}))},[c]),t.useEffect(()=>{if(y){let e=V?.findIndex(e=>e.id===y.id);q(a(e)),g("")}},[y,V]),t.useEffect(()=>{let e=V?.findIndex(e=>e.id===f?.id);q(a(e)),g("")},[f,V]);let k=t.useMemo(()=>o.getShapeByLayout({shape:m.shape,shapeForBottom:m.shapeForBottom,shapeFor1Col:m.shapeFor1Col,shapeFor2Col:m.shapeFor2Col,shapeForFtOnly:m.shapeForFtOnly,shapeForInsideBottom:m.shapeForInsideBottom,shapeForInside:m.shapeForInside},m.position),[m.shape,m.shapeForBottom,m.shapeFor1Col,m.shapeFor2Col,m.shapeForFtOnly,m.position,m.shapeForInsideBottom,m.shapeForInside]),O=t.useCallback(()=>{s.handleSetSrcForProductImageList({builderPropUID:u,shapeByLayout:k,qualityType:m.qualityType,qualityPercent:m.qualityPercent})},[k,m.qualityPercent,m.qualityType,u]);t.useEffect(()=>{if("edit"===I)return;let e=document?.querySelector(`.gem-slider-item-${u} .product-list-image`);if(!e)return;O();let t=new ResizeObserver(()=>{O()});return t?.observe(e,{}),()=>{t?.disconnect()}},[O,u,I]);let x=e.getResponsiveValueByScreen(m.clickOpenLightBox,F),R=t.useMemo(()=>{let t=o.checkDisplayGalleryByWidth({shapeByLayout:k});return e.getResponsiveValueByScreen(t,F)},[k,F]),G=t.useMemo(()=>m?.borderActive?.border!=="none",[m?.borderActive?.border]),L=e.getResponsiveValueByScreen(m?.clickOpenLightBox,F);return t.useEffect(()=>{let e;return V&&V.length>0&&E&&(e=setTimeout(()=>{b(S)},80)),()=>{e&&clearTimeout(e)}},[S,V,E]),{moveToIdx:S,isDisplay:R,shapeByLayout:k,isEnableBorderActive:G,isShowButtonLightbox:L,filteredProductImages:V,handleClickCarouselItem:e=>{n&&n(e||"",x)},setSliderReady:T,safeMoveToIdx:C}};

package/dist/esm/carousel-v3/components/arrow/common/classes.js

@@ -1 +1 @@
-import{createClass as e}from"@gem-sdk/system";import{getClassArrowDisplay as r,getClassArrowRotate as g,getResponsiveSetting as p}from"./helpers.js";let t=t=>{let{className:s,componentId:o,rootId:i,left:l,uid:c,isHiddenWhenDisabled:n,disabled:u,showWhenHover:a,showArrow:f,vertical:m,isLiquid:v=!1}=t,b=p(f||{}),d=l?"gp-carousel-action-back gem-slider-previous":"gp-carousel-action-next gem-slider-next",x=`gp-invisible ${v?"":"gp-opacity-0"}`,y=e({"gp-z-1 gp-items-center gp-justify-center gp-overflow-hidden gp-shrink-0 before:gp-left-0 before:gp-top-0":!0,["gp-carousel-arrow-"+c]:!0,...s&&{[s]:!0},...o&&{[o]:!0},...i&&{[i]:!0},[d]:!0,...{[x]:n&&u,"gp-cursor-default gp-text-gray-300":u,"gp-cursor-pointer gp-text-gray-500":!u,"!gp-invisible group-hover/carousel:!gp-visible":a,...r(b)}}),h=e({"gp-flex gp-items-center gp-justify-center [&>svg]:gp-h-full [&>svg]:gp-w-full":!0,...g(!!l,m)});return{buttonClass:y,buttonContentClass:h}};export{t as getClass};
+import{createClass as e}from"@gem-sdk/system";import{getClassArrowDisplay as r,getClassArrowRotate as g,getResponsiveSetting as p}from"./helpers.js";let t=t=>{let{className:s,componentId:o,rootId:i,left:l,uid:c,isHiddenWhenDisabled:n,disabled:u,showWhenHover:a,showArrow:f,vertical:m,isLiquid:v=!1}=t,b=p(f||{}),d=l?"gp-carousel-action-back gem-slider-previous":"gp-carousel-action-next gem-slider-next",x=`gp-invisible ${v?"":"gp-opacity-0"}`,y=e({"gp-z-2 gp-items-center gp-justify-center gp-overflow-hidden gp-shrink-0 before:gp-left-0 before:gp-top-0":!0,["gp-carousel-arrow-"+c]:!0,...s&&{[s]:!0},...o&&{[o]:!0},...i&&{[i]:!0},[d]:!0,...{[x]:n&&u,"gp-cursor-default gp-text-gray-300":u,"gp-cursor-pointer gp-text-gray-500":!u,"!gp-invisible group-hover/carousel:!gp-visible":a,...r(b)}}),h=e({"gp-flex gp-items-center gp-justify-center [&>svg]:gp-h-full [&>svg]:gp-w-full":!0,...g(!!l,m)});return{buttonClass:y,buttonContentClass:h}};export{t as getClass};

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

@@ -4,6 +4,7 @@ import{composeBorderCss as e,composeCornerCss as t}from"@gem-sdk/core";let i=({s
       height: 100%;
       width: 100%;
       position: absolute;
+      box-sizing: border-box;
       z-index: 999;
       top: 0;
       left: 0;

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:w,priorityFeatureImage:x,...k}=f,v=r(),{galleryItemClasses:q}=i(k),{galleryCarouselSettingAttrs:N}=l(k),{galleryCarouselStyle:A,galleryCarouselItemStyle:G}=a(k),{isDisplay:S,shapeByLayout:B,isShowButtonLightbox:H,filteredProductImages:L,handleClickCarouselItem:M,safeMoveToIdx:R,setSliderReady:$}=y(f);return e(o,{children:S&&e(u,{parentClass:T,rootClass:T,setting:N,styles:A,slidesClass:m(v,k.position,k.navigationPosition),builderProps:{uid:`${j}-carousel`},moveToIdx:R,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,onLoaded:e=>{e&&$(!0)},onSwiperReady:I,children:L?.map(o=>{let r=n(o.contentType)?o.previewImage:o.src;return t(g,{contentType:"productImage",className:q(`gp-gallery-image-item gem-slider-item-${j}`),onClickItem:()=>M(o?.id),style:G,"data-id":o?.id,children:[e(d,{draggable:"false",src:r,width:o?.width,height:o?.height,alt:o?.alt,setting:{aspectRatio:s(B),layout:k?.layout,qualityPercent:k?.qualityPercent,qualityType:k?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),e(c,{contentType:o?.contentType||""}),h(H,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}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};

package/dist/esm/product/components/product-images-v3/hooks/useGalleryCarousel.js

@@ -1 +1 @@
-import{useCurrentDevice as e,useFeaturedImageGlobal as r,useEditorMode as t,getResponsiveValueByScreen as o}from"@gem-sdk/core";import{useState as i,useRef as a,useEffect as s,useMemo as l,useCallback as n}from"react";import{useFilterImagesByVariant as p}from"./useFilterImagesByVariant.js";import{handleSetSrcForProductImageList as m}from"../../../../image/common/helpers.js";import{getShapeByLayout as d,checkDisplayGalleryByWidth as c}from"../common/productGallery.js";let u=u=>{let{builderPropUID:h,productImages:F,onHandleClick:y,activeIndexFormFeatureImage:B,onClickFeatureArrow:f,builderPropsClass:I,arrow:C,priorityFeatureImage:g,...q}=u,T=e(),b=r(),[v,O]=i(f||""),x=t(),[k,j]=i(0),P=a(),[S,V]=i(k),[A,G]=i(!1),{filteredProductImages:L}=p({productImages:F,displayByVariant:q?.displayByVariant,variantSelect:q?.variantSelect});s(()=>{O(f||"")},[f]),s(()=>{P.current&&clearTimeout(P.current),v&&(P.current=setTimeout(()=>{j(B||0),O("")}))},[B]),s(()=>{if(g){let e=L?.findIndex(e=>e.id===g.id)||0;j(e),O("")}},[g,L]),s(()=>{let e=L?.findIndex(e=>e.id===b?.id);j(e||0),O("")},[b,L]);let w=l(()=>d({shape:q.shape,shapeForBottom:q.shapeForBottom,shapeFor1Col:q.shapeFor1Col,shapeFor2Col:q.shapeFor2Col,shapeForFtOnly:q.shapeForFtOnly,shapeForInsideBottom:q.shapeForInsideBottom,shapeForInside:q.shapeForInside},q.position),[q.shape,q.shapeForBottom,q.shapeFor1Col,q.shapeFor2Col,q.shapeForFtOnly,q.position,q.shapeForInsideBottom,q.shapeForInside]),z=n(()=>{m({builderPropUID:h,shapeByLayout:w,qualityType:q.qualityType,qualityPercent:q.qualityPercent})},[w,q.qualityPercent,q.qualityType,h]);s(()=>{if("edit"===x)return;let e=document?.querySelector(`.gem-slider-item-${h} .product-list-image`);if(!e)return;z();let r=new ResizeObserver(()=>{z()});return r?.observe(e,{}),()=>{r?.disconnect()}},[z,h,x]);let R=o(q.clickOpenLightBox,T),$=l(()=>{let e=c({shapeByLayout:w});return o(e,T)},[w,T]),D=l(()=>q?.borderActive?.border!=="none",[q?.borderActive?.border]),E=o(q?.clickOpenLightBox,T);return s(()=>{let e;return L&&L.length>0&&A&&(e=setTimeout(()=>{V(k)},80)),()=>{e&&clearTimeout(e)}},[k,L,A]),{moveToIdx:k,isDisplay:$,shapeByLayout:w,isEnableBorderActive:D,isShowButtonLightbox:E,filteredProductImages:L,handleClickCarouselItem:e=>{y&&y(e||"",R)},setSliderReady:G,safeMoveToIdx:S}};export{u as useGalleryCarousel};
+import{useCurrentDevice as e,useFeaturedImageGlobal as r,useEditorMode as t,getResponsiveValueByScreen as o}from"@gem-sdk/core";import{useState as i,useRef as a,useEffect as s,useMemo as l,useCallback as n}from"react";import{useFilterImagesByVariant as p}from"./useFilterImagesByVariant.js";import{handleSetSrcForProductImageList as m}from"../../../../image/common/helpers.js";import{getShapeByLayout as d,checkDisplayGalleryByWidth as c}from"../common/productGallery.js";let u=e=>void 0!==e&&e>=0?e:0,h=h=>{let{builderPropUID:F,productImages:y,onHandleClick:B,activeIndexFormFeatureImage:f,onClickFeatureArrow:I,builderPropsClass:C,arrow:g,priorityFeatureImage:q,...v}=h,T=e(),b=r(),[O,x]=i(I||""),k=t(),[j,P]=i(0),S=a(),[V,A]=i(j),[G,L]=i(!1),{filteredProductImages:w}=p({productImages:y,displayByVariant:v?.displayByVariant,variantSelect:v?.variantSelect});s(()=>{x(I||"")},[I]),s(()=>{S.current&&clearTimeout(S.current),O&&(S.current=setTimeout(()=>{P(f||0),x("")}))},[f]),s(()=>{if(q){let e=w?.findIndex(e=>e.id===q.id);P(u(e)),x("")}},[q,w]),s(()=>{let e=w?.findIndex(e=>e.id===b?.id);P(u(e)),x("")},[b,w]);let z=l(()=>d({shape:v.shape,shapeForBottom:v.shapeForBottom,shapeFor1Col:v.shapeFor1Col,shapeFor2Col:v.shapeFor2Col,shapeForFtOnly:v.shapeForFtOnly,shapeForInsideBottom:v.shapeForInsideBottom,shapeForInside:v.shapeForInside},v.position),[v.shape,v.shapeForBottom,v.shapeFor1Col,v.shapeFor2Col,v.shapeForFtOnly,v.position,v.shapeForInsideBottom,v.shapeForInside]),R=n(()=>{m({builderPropUID:F,shapeByLayout:z,qualityType:v.qualityType,qualityPercent:v.qualityPercent})},[z,v.qualityPercent,v.qualityType,F]);s(()=>{if("edit"===k)return;let e=document?.querySelector(`.gem-slider-item-${F} .product-list-image`);if(!e)return;R();let r=new ResizeObserver(()=>{R()});return r?.observe(e,{}),()=>{r?.disconnect()}},[R,F,k]);let $=o(v.clickOpenLightBox,T),D=l(()=>{let e=c({shapeByLayout:z});return o(e,T)},[z,T]),E=l(()=>v?.borderActive?.border!=="none",[v?.borderActive?.border]),H=o(v?.clickOpenLightBox,T);return s(()=>{let e;return w&&w.length>0&&G&&(e=setTimeout(()=>{A(j)},80)),()=>{e&&clearTimeout(e)}},[j,w,G]),{moveToIdx:j,isDisplay:D,shapeByLayout:z,isEnableBorderActive:E,isShowButtonLightbox:H,filteredProductImages:w,handleClickCarouselItem:e=>{B&&B(e||"",$)},setSliderReady:L,safeMoveToIdx:V}};export{h as useGalleryCarousel};

package/package.json

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