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