@gem-sdk/components 19.0.0-staging.60 → 19.0.0-staging.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/carousel-v3/common/selectors.js +1 -0
- package/dist/cjs/carousel-v3/components/root/common/attrs.js +1 -1
- package/dist/cjs/product/components/product-images-v3/common/common.js +1 -1
- package/dist/cjs/product/components/product-images-v3/components/child/ProductFeaturedImageCarousel.js +1 -1
- package/dist/cjs/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.js +1 -1
- package/dist/cjs/product/components/product-images-v3/components/feature-only/OnlyFeatureImage.js +1 -1
- package/dist/cjs/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.js +1 -1
- package/dist/esm/carousel-v3/common/selectors.js +1 -0
- package/dist/esm/carousel-v3/components/root/common/attrs.js +1 -1
- package/dist/esm/product/components/product-images-v3/common/common.js +1 -1
- package/dist/esm/product/components/product-images-v3/components/child/ProductFeaturedImageCarousel.js +1 -1
- package/dist/esm/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.js +1 -1
- package/dist/esm/product/components/product-images-v3/components/feature-only/OnlyFeatureImage.js +1 -1
- package/dist/esm/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=e=>`gp-carousel-${e}`;exports.getCarouselElementId=e,exports.getCarouselElementSelector=t=>`#${e(t)}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"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}};
|
|
@@ -1 +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)},
|
|
1
|
+
"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}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),
|
|
1
|
+
"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;
|
|
@@ -1 +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"),
|
|
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"),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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"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"),
|
|
2
|
+
"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
CHANGED
|
@@ -1 +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"),
|
|
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"),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)})})})};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
let e=e=>`gp-carousel-${e}`,l=l=>`#${e(l)}`;export{e as getCarouselElementId,l as getCarouselElementSelector};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createAttr as t}from"@gem-sdk/system";import{getData as r}from"./helpers.js";let e=e=>{let{rootAttrs:i,builderProps:
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{getResponsiveValueByScreen as e,makeAspectRatio as t,DEVICES as o,makeStyleResponsive as
|
|
1
|
+
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{memo as o,forwardRef as t,useRef as r,useImperativeHandle as
|
|
1
|
+
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};
|
|
@@ -1 +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
|
|
1
|
+
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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import{useRenderMode as
|
|
2
|
+
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
CHANGED
|
@@ -1 +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
|
|
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,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};
|