@gem-sdk/components 3.0.0-pre-production.14 → 3.0.0

package/dist/esm/product/components/product-discount-tag/ProductDiscountTag.liquid.js

@@ -0,0 +1,30 @@
+import{template as e,isLocalEnv as i,baseAssetURL as a}from"@gem-sdk/core";import{getDynamicSourceLocales as s,getSettingPreloadData as r}from"../../../helpers.js";import p from"../../../text/components/Text.liquid.js";import{createStyle as t,createClass as n,LiquidIf as c,Liquid as d,If as l}from"@gem-sdk/system";import{getWrapperTextClass as o,getContainerClass as u,getProductTagClass as g}from"./common/classes.js";import{getRootClass as m,getWrapperTextStyle as f,getContainerStyle as v}from"./common/styles.js";let ProductTag=({setting:$,styles:y,builderProps:x,advanced:S,pageContext:P})=>{let{customContent:_,translate:V}=$??{},h=$?.moneyWithCurrentFormat?"money_with_currency":"money",j=s({val:_?.prefix,uid:x?.uid,settingId:"customContent_prefix",isLiquid:!0,pageContext:P,translate:V}),M=s({val:_?.suffix,uid:x?.uid,settingId:"customContent_suffix",isLiquid:!0,pageContext:P,translate:V}),q=t(m(y)),w=t(f(y)),C=t(v(y)),E=n(o(y)),F=n(u()),N=n(g(S)),O=_?.unit==="percentage",T=()=>{let e=i?"{{ 'gp-product-tag-v7-5.js' | asset_url }}":`${a}/assets-v2/gp-product-tag-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${r('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return e`
+    {% liquid
+      assign price = variant.price | times: 1.0
+      assign salePrice = variant.compare_at_price | times: 1.0
+      assign priceSave = salePrice | minus: price
+      assign prefixVal = ${P?.isPreviewing?JSON.stringify(j):j}
+      assign suffixVal = ${P?.isPreviewing?JSON.stringify(M):M}
+    %}
+    ${c("salePrice == null or price == null",d(`{% assign pricePercentage = prefixVal ${l(O,"| append: ' 0% '",`| ${h} | append: ' '`)} | append: suffixVal %}`),`${l(O,`{% assign salePercent = priceSave | divided_by: salePrice | times: 100  | round %}
+          {% assign pricePercentage = prefixVal | append: ' ' | append: salePercent | append: '% ' | append: suffixVal %}`,c("priceSave > 0",`{% assign priceSaveMoney = priceSave | ${h} %}
+           {% assign pricePercentage = prefixVal | append: ' ' | append: priceSaveMoney | append: ' ' | append: suffixVal %}`,`{% assign priceSaveMoney = 0 | ${h} %}
+           {% assign pricePercentage = prefixVal | append: ' ' | append: priceSaveMoney | append: ' ' | append: suffixVal %}`))}`)}
+
+    <gp-product-tag
+      class="${N}"
+      style="${q}"
+      data-id="${x?.uid}"
+      data-disabled="${c(`${l(O,"salePercent","priceSave")} > 0`,"false","true")}"
+      gp-data='{"setting":${JSON.stringify($).replaceAll("'","&#039;")}, "id": "${x?.uid}", "locale": "{{shop.locale}}", "currency": "{{shop.currency}}", "moneyFormat": "{{ ${$?.moneyWithCurrentFormat?"shop.money_with_currency_format":"shop.money_format"} | replace: '"', '\\"' | escape }}"}'
+      price-save="{{priceSave}}"
+    >
+      <div class="${F}" style="${C}">
+        <div class="${E}" style="${w}">
+          ${p({styles:y,id:`p-tag-${x?.uid}`,setting:{...$,translate:"",text:"{{ pricePercentage }}",excludeFlex:!0}})}
+        </div>
+      </div>
+
+  </gp-product-tag>
+  ${T()}
+  `};export{ProductTag as default};

package/dist/esm/product/components/product-discount-tag/common/classes.js

@@ -0,0 +1 @@
+import{getGlobalColorClass as e,composeClasses as t}from"@gem-sdk/core";let getRootClass=({mode:e,salePrice:t,priceSave:s,bundleItem:a})=>({"gp-opacity-0 ":"edit"!==e&&(t<=0||0>=Math.ceil(s/(t/100))),"gp-opacity-20 ":"edit"===e&&(t<=0||0>=Math.ceil(s/(t/100)))&&!a}),getProductTagClass=e=>({"gp-block data-[disabled=true]:gp-hidden":!0,...e?.cssClass&&{[e?.cssClass]:!0}}),getContainerClass=()=>({"gp-inline-flex gp-flex-wrap gp-items-end gp-gap-3":!0}),getWrapperTextClass=s=>{let{backgroundColor:a,borderTag:g,textColor:l}=s??{},p=e("border",g?.color),r=e("text",l),o=e("bg",a);return{...t("gp-flex gp-items-center gp-w-full gp-h-full"),[p]:!0,[r]:!0,[o]:!0}};export{getContainerClass,getProductTagClass,getRootClass,getWrapperTextClass};

package/dist/esm/product/components/product-discount-tag/common/styles.js

@@ -0,0 +1 @@
+import{makeStyleResponsive as e,filterTruthyStyles as t,makeGlobalSize as r,getGlobalColorClass as o,makeStyle as l,getSingleColorVariable as i,getRadiusCSSFromGlobal as n,getCustomRadius as a}from"@gem-sdk/core";let getRootClass=r=>{let o={...e("ta",r?.textAlign)};return t(o)},getWrapperTextStyle=d=>{let g=["small","medium","large"],{backgroundColor:s,roundedTag:p,borderTag:c,textColor:m}=d??{},u=r(d?.size),b=o("border",c?.color),x=o("text",m),y={...e("jc",d?.textContentAlign),...u.padding,...l({bs:c?.border,bw:c?.width,bc:""===b?c?.color:void 0,c:""===x?m:void 0,bgc:i(s)}),...g.includes(p?.radiusType||"")&&n("normal",p?.radiusType),...a("normal",p)};return t(y)},getContainerStyle=e=>{let t=r(e?.size);return{...t.width,...t.height}};export{getContainerStyle,getRootClass,getWrapperTextStyle};

package/dist/esm/product/components/product-discount-tag/hooks/useGpDiscountTag.js

@@ -0,0 +1 @@
+import{useMoneyFormat as e,useEditorMode as t,useProduct as r,useCurrentVariant as n,useQuantity as o,useFormatMoney as u,useProductBundleDiscount as i,formatMoney as p}from"@gem-sdk/core";import{useMemo as c}from"react";import{applyBundleDiscountAmount as s}from"../../../helpers/product-bundle.js";import{DiscountType as a}from"../../constants/product-bundle.js";let useGpDiscountTag=m=>{let{setting:l,...d}=m,{customContent:g}=l??{},f=d["bundle-item"],{moneyFormat:b}=e(),h=t(),D=r(),$=n(),{quantity:j,hasUpdatePrice:y}=o(),G=c(()=>y&&g?.unit!=="percentage"?j??1:1,[y,g?.unit,j]),P=$?.price??0,T=$?.salePrice??0,k=(T-P)*G,x=u(k<0?0:k,l?.moneyWithCurrentFormat||!1),C=c(()=>{if(!T&&0!==T||!P&&0!==P)return`${g?.unit==="percentage"?"0%":x}`;if(g?.unit==="percentage"){let e=Math.round(k/(T/100));return`${e<0?0:e}%`}return`${x}`},[g?.unit,x,P,k,T]),{useProductCompareAtPrice:F}=i(),{discountPercentAmount:I}=s({currentVariant:$,bundleItem:f,options:{moneyFormat:b,useProductCompareAtPrice:F}}),M=c(()=>{if(!f)return 0;let{discountPercentAmount:e,discountAmount:t}=s({currentVariant:$,bundleItem:f,options:{moneyFormat:b,useProductCompareAtPrice:F}}),{discountType:r}=f,{unit:n}=g||{};return r!==a.NoDiscount||F?"percentage"===n?`${e}%`:t:"percentage"===n?"0%":p("0",b)},[f,$,b,F,g]),N=c(()=>f?M:C,[M,f,C]),W=D?.baseID?.replace("gid://shopify/Product/",""),q=c(()=>{let e=f?I<=0:k<=0;return"edit"===h&&e},[f,I,h,k]);return{mode:h,product:D,salePrice:T,priceSave:k,currentProductId:W,unitCustomDisplay:N,shouldPlaceholderNoDiscount:q}};export{useGpDiscountTag};

package/dist/esm/product/components/product-images/ProductFeaturedImage.js

@@ -0,0 +1,2 @@
+'use client';
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"../../../image/components/NextImage.js";import{getFeatureImageAspectRatio as o,getStyleFeaturedImageWidth as i,getStyleFeatureImageJustify as l,isFeatureMedia as c,getZoomImageClass as n,getZoomLenClass as p}from"./common/productFeaturedImage.js";import{useFeaturedImageGlobal as s,useProduct as a,cls as f,makeStyleResponsive as g,makeStyle as h}from"@gem-sdk/core";import{urlJoin as u}from"../../../link/common/helpers.js";import{useRef as m,useMemo as d}from"react";let ProductFeaturedImage=({productImages:y,imgRef:v,onOpenLightBox:w,...x})=>{let E=s(),L=a(),z=m(null),C=m(null),I=m(null),T=x?.clickEffect!==void 0&&x?.clickEffect=="link",N=L?.handle?u("/products",L.handle):"#",R=T?"a":"div",k=d(()=>x?.otherImage?y&&x.otherImage>=y.length-1||y&&-1===x.otherImage?y.length-1:x.otherImage:0,[x?.otherImage,y]),b=d(()=>x?.hoverEffect==="other"?y?.[k]:y?.find(e=>e.id===E?.id),[E?.id,k,y,x?.hoverEffect]),M=d(()=>E?.id?y?.find(e=>e.id===E?.id):y?.[0],[E,y]),F=T?{href:N}:{onClick:()=>x?.clickEffect=="popup"&&w(),role:"presentation"},V=({event:e,featureImageDom:t,zoomSize:r,imagePosition:o,slideWidth:i,imageOffsetX:l,imageOffsetY:c})=>{if(C?.current){if(C.current.style.width=`${r}px`,e.clientX>=o?.x&&e.clientX<=o.right&&e.clientY>=o?.y&&e.clientY<=o.bottom?((x?.hoverEffect=="zoom"&&x?.zoomType=="default"||x?.hoverEffect=="other")&&(C.current.style.opacity="1"),I?.current&&x?.hoverEffect=="zoom"&&x?.zoomType=="glasses"&&(I.current.style.opacity="1")):(C.current.style.opacity="0",I?.current&&(I.current.style.opacity="0")),i&&x?.hoverEffect=="zoom"&&x?.zoomType=="default"){let e=l/t?.offsetWidth,o=c/t?.offsetHeight;C.current.style.top=(t?.offsetHeight-C.current.offsetHeight)*o+"px",C.current.style.left=(i-r)*e+"px"}C&&x?.hoverEffect=="other"&&(C.current.style.top="0px",C.current.style.left="0px")}},j=e=>{let t=e.currentTarget?.querySelector("img"),r=t?.getBoundingClientRect(),o=z?.current?.clientWidth||0,i=z?.current?.clientHeight||0,l=!x?.zoom||x.zoom<100?1:x.zoom/100||1,c=(z?.current?.clientWidth||1)*(x?.hoverEffect=="other"?1:l),n=e.clientX-r?.x,p=e.clientY-r?.y;if(V({event:e,featureImageDom:t,zoomSize:c,imagePosition:r,slideWidth:o,imageOffsetX:n,imageOffsetY:p}),x?.hoverEffect=="zoom"&&x?.zoomType=="glasses"&&I.current){let e=I.current.offsetWidth/2,t=I.current.offsetHeight/2,r=i||1;n>o-e/l&&(n=o-e/l),n<e/l&&(n=e/l),p>r-t/l&&(p=r-t/l),p<t/l&&(p=t/l),I.current.style.top=p-t+"px",I.current.style.left=n-e+"px",I.current.style.backgroundSize=c+"px "+r*l+"px",I.current.style.backgroundPosition=`-${n*l-e}px -${p*l-t}px`}},A=()=>{C?.current&&(C.current.style.opacity="0"),I?.current&&(I.current.style.opacity="0")},H=d(()=>o(x.ftCustomAspectRadio,x.ftAspectRatio),[x?.ftAspectRatio,x.ftCustomAspectRadio]),Z=d(()=>i(x),[x]);return e("div",{className:"gp-product-images-ft gp-flex",style:{...l(x.position),...Z},children:e(R,{...F,onMouseMove:j,onMouseOut:A,className:f("gp-relative gp-flex gp-w-full",{"gp-overflow-hidden":x?.zoomType!=="glasses"}),style:{...g("aspect",H)},children:e("div",{className:"gp-flex gp-w-full gp-items-start gp-justify-center",children:t("div",{ref:z,className:"gp-group gp-relative gp-w-full gp-overflow-hidden",children:[e(r,{imgRef:v,src:E?.previewImage||E?.src,width:E?.width,height:E?.height,alt:E?.alt,setting:{layout:x.ftLayout,aspectRatio:H},className:f("featured-image-only gp-w-full transition-opacity",{"group-hover:gp-opacity-0":"other"==x.hoverEffect})}),(E?.contentType=="VIDEO"||E?.contentType=="EXTERNAL_VIDEO")&&e("div",{className:"gp-absolute gp-bottom-0 gp-right-0 gp-pb-[15px] gp-pr-[15px]",children:t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("rect",{opacity:"0.9",width:"24",height:"24",rx:"3",fill:"#212121"}),e("path",{d:"M17.6869 12.2646L17.6868 12.2646L6.78379 18.4464C6.78378 18.4464 6.78376 18.4464 6.78374 18.4464C6.52931 18.5903 6.1665 18.4179 6.1665 18.0416V5.95844C6.1665 5.58218 6.52917 5.40981 6.7836 5.55354C6.78366 5.55357 6.78373 5.55361 6.78379 5.55365L17.6868 11.7354L17.6869 11.7354C17.8819 11.846 17.8819 12.154 17.6869 12.2646Z",stroke:"#F9F9F9",strokeMiterlimit:"10"})]})}),E?.contentType=="MODEL_3D"&&e("div",{className:"gp-absolute gp-bottom-0 gp-right-0 gp-pb-[15px] gp-pr-[15px]",children:t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("rect",{opacity:"0.9",width:"24",height:"24",rx:"3",fill:"#212121"}),e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.7441 4.57034C11.9017 4.47655 12.098 4.47655 12.2555 4.57034L18.5889 8.33957C18.7404 8.42971 18.8332 8.59296 18.8332 8.76923V15.2308C18.8332 15.407 18.7404 15.5703 18.5889 15.6604L12.2555 19.4297C12.098 19.5234 11.9017 19.5234 11.7441 19.4297L5.41079 15.6604C5.25932 15.5703 5.1665 15.407 5.1665 15.2308V8.76923C5.1665 8.59296 5.25932 8.42971 5.41079 8.33957L11.7441 4.57034ZM6.1665 9.64865V14.9465L11.4998 18.1206V12.8227L6.1665 9.64865ZM12.4998 12.8227V18.1206L17.8332 14.9465V9.64865L12.4998 12.8227ZM17.3555 8.76923L11.9998 11.9566L6.64417 8.76923L11.9998 5.58185L17.3555 8.76923Z",fill:"#F9F9F9"})]})}),x?.hoverEffect!=="none"&&x?.hoverEffect!=="other"&&e("div",{ref:C,className:f("!gp-max-w-none",c(M?.contentType)?"":n()),children:e(r,{src:c(b?.contentType)?b?.previewImage:b?.src,width:b?.width,height:b?.height,alt:b?.alt,setting:{layout:x.ftLayout,aspectRatio:H},className:"featured-image-only gp-w-full"})}),x?.hoverEffect==="other"&&e("div",{ref:C,className:f("!gp-max-w-none",n()),children:e(r,{src:c(M?.contentType)?M?.previewImage:b?b?.previewImage||b?.src:M?.src,width:b?.width,height:b?.height,alt:b?.alt,setting:{layout:x.ftLayout,aspectRatio:H},className:"featured-image-only gp-w-full"})}),x?.hoverEffect==="zoom"&&x?.zoomType==="glasses"&&!c(M?.contentType)&&e("div",{ref:I,className:f(p()),style:{...h({bgi:`url("${M?.src}")`})}})]})})})})};export{ProductFeaturedImage as default};

package/dist/esm/product/components/product-images/ProductFeaturedImage.liquid.js

@@ -0,0 +1,93 @@
+import{template as e,cls as i,makeStyleResponsive as a,getResponsiveValueByScreen as t}from"@gem-sdk/core";import d from"../../../image/components/NextImage.liquid.js";import{getFeatureImageAspectRatio as r,getStyleFeatureImageJustify as s,getStyleFeaturedImageWidth as l,getZoomImageClass as o,getZoomLenClass as f}from"./common/productFeaturedImage.js";import{getDisplayStyle as m}from"./common/helpers.js";import u from"../../../image/components/Modal3d.liquid.js";import n from"../../../image/components/Video.liquid.js";let ProductFeaturedImage=({...g})=>{let p=r(g.ftCustomAspectRadio,g.ftAspectRatio),c=g?.clickEffect!==void 0&&g?.clickEffect=="link",v=c?"a":"div",h=c?{href:"#"}:{role:"presentation"},_=()=>m(e=>!!g?.featureImageVisible&&!t(g?.featureImageVisible,e),"flex"),y=()=>`
+    {% assign featureMedia = product.media.first %}
+    {%- assign variant = product.selected_or_first_available_variant -%}
+    {% assign shouldHidden = '' %}
+    {% if featureMedia.media_type == 'model' %}
+      ${w()}
+    {% endif %}
+    {% if featureMedia.media_type == 'video' %}
+      ${M()}
+    {% endif %}
+    {% if featureMedia.media_type == 'external_video' %}
+      ${M()}
+    {% endif %}
+    {% if featureMedia.media_type != 'image' %}
+      {% assign shouldHidden = 'hidden' %}
+    {% endif %}
+    ${$(i("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==g.hoverEffect},"{{shouldHidden}}"))}
+    ${g?.hoverEffect!=="none"?`<div class="${i("zoom-element !gp-max-w-none",o())}">
+          ${$("image-zoom")}
+        </div>`:""}
+    ${g?.hoverEffect=="zoom"&&g?.zoomType=="glasses"?`
+    <div class="${i("zoom-lens-element",f())}"
+    style="opacity: 0; background-image: url('{{ product.featured_image.src | img_url: "1024x1024"}}')"></div>`:""}
+    `,w=()=>u({src:"{{featureMedia.sources.first.url}}",alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,dataShopifyFeature:"1.12",arStatus:"not-presenting",style:{width:"100%",height:"100%"}}),M=()=>n({src:"{{mediaSourceVideo}}",alt:"{{mediaVideoAlt}}",autoplay:!0,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),$=i=>e`
+    ${d({src:`{%- if variant.featured_image != null -%}
+              {{ variant.featured_image.src | img_url: '1024x1024'}}
+            {%- elsif variant.featured_image == null -%}
+              {{ featureMedia.src | img_url: '1024x1024'}}
+            {%- else -%}
+              {{ 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif' }}
+            {%- endif -%}`,id:`{%- if variant.featured_image != null -%}
+              {{variant.featured_image.id}}
+           {%- elsif variant.featured_image == null -%}
+              {{featureMedia.id}}
+            {%- endif -%}`,width:`{%- if variant.featured_image != null -%}
+                {{variant.featured_image.width}}
+              {%- elsif variant.featured_image == null -%}
+                {{featureMedia.width}}
+              {%- endif -%}`,height:`{%- if variant.featured_image != null -%}
+                {{variant.featured_image.height}}
+              {%- elsif variant.featured_image == null -%}
+                {{featureMedia.height}}
+              {%- endif -%}`,alt:`{%- if variant.featured_image != null -%}
+              {{variant.featured_image.alt}}
+            {%- elsif variant.featured_image == null -%}
+              {{featureMedia.alt}}
+            {%- endif -%}`,setting:{layout:g?.ftLayout,aspectRatio:p},priority:!0,className:`gp-w-full featured-image-only ${i}`})}`;return e`<div
+  class="featured-image-root gp-product-images-ft gp-flex"
+  style="${{...s(g.position),..._(),...l(g)}}"
+>
+  <${v} ${{...h}}
+    media-type="{{product.featured_media.media_type}}"
+    class="featured-image-wrapper ${i("gp-relative gp-flex gp-w-full",{"gp-overflow-hidden":g?.zoomType!=="glasses"})}"
+    style="${{...a("aspect",p)}}"
+  >
+  <div class="gp-flex gp-w-full gp-items-start gp-justify-center">
+    <div class="featured-image gp-group gp-relative gp-w-full gp-h-full gp-overflow-hidden gp-flex gp-items-center gp-justify-center">
+      {% assign hasModel3d = false %}
+      {% assign hasImage = false %}
+      {% assign hasVideo = false %}
+      {% assign mediaSourcesModel = null %}
+      {% assign mediaSourceVideo = null %}
+      {% assign mediaVideoAlt = null %}
+
+      {% for media in product.media %}
+        {% if media.media_type == 'model' %}
+          {% assign hasModel3d = true %}
+          {% assign mediaSourcesModel = media.sources %}
+        {% endif %}
+      {% if media.media_type == 'video' %}
+        {% assign hasVideo = true %}
+        {% assign mediaSourceVideo = media.sources.last.url %}
+        {% assign mediaVideoAlt = media.alt %}
+      {% endif %}
+      {% if media.media_type == 'external_video' %}
+        {% assign hasVideo = true %}
+        {% assign mediaSourceVideo = media | external_video_url %}
+        {% assign mediaVideoAlt = media.alt %}
+      {% endif %}
+      {% if media.media_type == 'image' %}
+        {% assign hasImage = true %}
+      {% endif %}
+    {% endfor %}
+
+    {% if hasModel3d == true %}
+      <script type="module" defer="defer" src="https://cdn.shopify.com/shopifycloud/model-viewer/v1.12/model-viewer.js"></script>
+    {% endif %}
+
+    ${y()}
+    </div>
+  </div>
+  </${v}>
+</div>`};export{ProductFeaturedImage as default};

package/dist/esm/product/components/product-images/ProductGalleryCarousel.js

@@ -0,0 +1,2 @@
+'use client';
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useMemo as o}from"react";import i from"../../../carousel/components/root/Carousel.js";import r from"../../../carousel/components/item/CarouselItem.js";import{useCurrentDevice as l,useFeaturedImageGlobal as s,getResponsiveValueByScreen as p,makeAspectRatio as a,cls as n,makeStyleResponsive as c,makeWidth as d}from"@gem-sdk/core";import{convertSpacing as g}from"./common/helpers.js";import m from"../../../image/components/NextImage.js";import{getAllowDotConfig as h,getCarouselVerticalConfigByPosition as C}from"./common/productGallery.js";import{getDotStyleConfig as u}from"../product-images-v2/common/productGallery.js";let ProductGalleryCarousel=({builderPropUID:w,productImages:f,onHandleClick:b,...L})=>{let v=l(),y=s(),V=o(()=>{let t=f?.findIndex(t=>t.id===y?.id);return t&&t>0?t:0},[f,y]),R=o(()=>p(L?.position,v),[v,L?.position]),k=o(()=>{let t="left"===R||"right"===R;return t?{desktop:"auto",tablet:"auto",mobile:"auto"}:L?.slidesToShow},[R,L?.slidesToShow]),x=o(()=>({desktop:L?.customAspectRadio?.desktop?.width,tablet:L?.customAspectRadio?.tablet?.width,mobile:L?.customAspectRadio?.mobile?.width}),[L?.customAspectRadio]),A=o(()=>({desktop:L?.customAspectRadio?.desktop?.height,tablet:L?.customAspectRadio?.tablet?.height,mobile:L?.customAspectRadio?.mobile?.height}),[L?.customAspectRadio]),T=o(()=>a(L?.aspectRatio,x,A),[x,L?.aspectRatio,A]);return t(i,{setting:{loop:L?.loop,slidesToShow:k,dot:h(),dotStyle:u(),controlOverContent:L?.controlOverContent,enableDrag:{desktop:L?.dragToScroll,tablet:L?.dragToScroll,mobile:L?.dragToScroll},vertical:C(L.position),dotActiveColor:L?.dotActiveColor,dotColor:L?.dotColor,arrowCustom:L?.arrowIcon},styles:{sizeSetting:{desktop:{width:"100%",height:"auto"},tablet:{width:"100%",height:"auto"},mobile:{width:"100%",height:"auto"}},spacing:g(L?.spacing)},builderProps:{uid:w},isHiddenArrowWhenDisabled:!0,children:f?.map((o,i,l)=>{let s=i===V&&l.length>1,a="VIDEO"==o.contentType||"EXTERNAL_VIDEO"==o.contentType||"MODEL_3D"==o.contentType?o?.previewImage:o?.src;return e(r,{className:n(`gem-slider-item gem-slider-item-${w} gp-group gp-flex gp-w-full gp-items-center gp-justify-center gp-overflow-hidden gp-outline-1 -gp-outline-offset-1`,{"gp-outline":s&&!!L?.showActiveStatus}),onClickItem:()=>{b(o?.id||"")},style:{outlineColor:"var(--g-c-brand, brand)"},children:[t(m,{src:a,width:o?.width,height:o?.height,alt:o?.alt,setting:{aspectRatio:T,layout:L?.layout},style:{...c("w",d(L?.width,L?.fullWidth)),...c("aspect",L?.aspectRatio)}}),("VIDEO"==o.contentType||"EXTERNAL_VIDEO"==o.contentType)&&t("div",{className:"gp-absolute gp-bottom-0 gp-right-0 gp-pb-1 gp-pr-1",children:e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("rect",{opacity:"0.9",width:"24",height:"24",rx:"3",fill:"#212121"}),t("path",{d:"M17.6869 12.2646L17.6868 12.2646L6.78379 18.4464C6.78378 18.4464 6.78376 18.4464 6.78374 18.4464C6.52931 18.5903 6.1665 18.4179 6.1665 18.0416V5.95844C6.1665 5.58218 6.52917 5.40981 6.7836 5.55354C6.78366 5.55357 6.78373 5.55361 6.78379 5.55365L17.6868 11.7354L17.6869 11.7354C17.8819 11.846 17.8819 12.154 17.6869 12.2646Z",stroke:"#F9F9F9",strokeMiterlimit:"10"})]})}),"MODEL_3D"==o.contentType&&t("div",{className:"gp-absolute gp-bottom-0 gp-right-0 gp-pb-1 gp-pr-1",children:e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("rect",{opacity:"0.9",width:"24",height:"24",rx:"3",fill:"#212121"}),t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.7441 4.57034C11.9017 4.47655 12.098 4.47655 12.2555 4.57034L18.5889 8.33957C18.7404 8.42971 18.8332 8.59296 18.8332 8.76923V15.2308C18.8332 15.407 18.7404 15.5703 18.5889 15.6604L12.2555 19.4297C12.098 19.5234 11.9017 19.5234 11.7441 19.4297L5.41079 15.6604C5.25932 15.5703 5.1665 15.407 5.1665 15.2308V8.76923C5.1665 8.59296 5.25932 8.42971 5.41079 8.33957L11.7441 4.57034ZM6.1665 9.64865V14.9465L11.4998 18.1206V12.8227L6.1665 9.64865ZM12.4998 12.8227V18.1206L17.8332 14.9465V9.64865L12.4998 12.8227ZM17.3555 8.76923L11.9998 11.9566L6.64417 8.76923L11.9998 5.58185L17.3555 8.76923Z",fill:"#F9F9F9"})]})}),p(L?.largeViewInPopup,v)&&t("div",{className:"gp-absolute gp-inset-0 gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-bg-black/50 gp-opacity-0 gp-transition-all gp-duration-100 group-hover:gp-opacity-100",children:t("svg",{height:"100%",width:"100%",xmlns:"http://www.w3.org/2000/svg",className:"gp-h-6 gp-w-6",viewBox:"0 0 512 512",color:"#fff",children:t("path",{fill:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",d:"M62.2467 345.253C43.7072 326.714 29.1474 305.116 18.9714 281.057C8.42839 256.13 3.08301 229.671 3.08301 202.418C3.08301 175.165 8.43012 148.707 18.974 123.78C29.15 99.7213 43.7098 78.123 62.2485 59.5834C80.788 41.0439 102.386 26.4841 126.445 16.3081C151.372 5.76422 177.831 0.417969 205.084 0.417969C232.337 0.417969 258.794 5.76421 283.722 16.3064C307.78 26.4823 329.379 41.0422 347.918 59.5817C366.458 78.1212 381.017 99.7196 391.194 123.778C401.737 148.706 407.083 175.163 407.083 202.417C407.083 229.671 401.737 256.129 391.194 281.056C388.406 287.648 385.277 294.048 381.839 300.257L493.397 411.815C514.091 432.511 514.091 466.187 493.395 486.883L484.272 496.006C474.245 506.032 460.915 511.553 446.738 511.553C432.559 511.553 419.228 506.032 409.202 496.006L296.022 382.824C291.996 384.854 287.898 386.762 283.721 388.528C258.794 399.073 232.336 404.419 205.082 404.419C177.828 404.419 151.371 399.071 126.443 388.528C102.385 378.352 80.7863 363.793 62.2467 345.253ZM301.699 336.166C313.928 327.317 324.896 316.835 334.282 305.034C342.149 295.142 348.9 284.325 354.355 272.775C364.433 251.432 370.076 227.586 370.076 202.419C370.076 111.296 296.206 37.4253 205.083 37.4253C113.96 37.4253 40.0895 111.294 40.0895 202.418C40.0895 293.541 113.96 367.411 205.084 367.411C227.413 367.411 248.701 362.967 268.126 354.928C280.091 349.976 291.347 343.658 301.699 336.166ZM467.229 460.716C473.507 454.439 473.507 444.26 467.229 437.982L360.595 331.348C356.601 336.153 352.378 340.794 347.919 345.253C341.671 351.502 335.068 357.286 328.147 362.615L435.371 469.839C438.511 472.977 442.624 474.547 446.739 474.547C450.853 474.547 454.967 472.978 458.106 469.839L467.229 460.716ZM223.582 183.91H281.071C291.292 183.91 299.574 192.194 299.575 202.414C299.575 206.778 298.062 210.786 295.533 213.951C292.143 218.195 286.926 220.916 281.072 220.916H228.303H223.583V225.63V278.406C223.583 287.081 217.613 294.358 209.559 296.361C208.124 296.717 206.625 296.909 205.08 296.909C194.861 296.909 186.577 288.625 186.577 278.406V220.917H129.087C118.868 220.917 110.584 212.633 110.584 202.414C110.584 192.195 118.868 183.911 129.087 183.911H186.576V126.421C186.576 116.202 194.86 107.918 205.079 107.918C215.298 107.918 223.582 116.202 223.582 126.421V183.91Z"})})})]},o?.id)})})};export{ProductGalleryCarousel as default};

package/dist/esm/product/components/product-images/ProductGalleryCarousel.liquid.js

@@ -0,0 +1,72 @@
+import{template as e,getResponsiveValueByScreen as i,makeStyleResponsive as t,makeWidth as o}from"@gem-sdk/core";import r from"../../../image/components/NextImage.liquid.js";import{convertSpacing as a,getDisplayStyle as l}from"./common/helpers.js";import{getGalleryImageAspectRatio as d,getSliderPerShowConfig as s,getAllowDotConfig as p,getCarouselVerticalConfigByPosition as g,getZoomDisplay as n}from"./common/productGallery.js";import{getStyleOfObject as m}from"../../helpers/function.js";import{getDotStyleConfig as c}from"../product-images-v2/common/productGallery.js";import u from"../../../carousel/components/root/Carousel.liquid.js";import C from"../../../carousel/components/item/CarouselItem.liquid.js";let ProductGalleryCarousel=({builderPropUID:f,...h})=>{let v=d(h?.customAspectRadio,h?.aspectRatio),w=()=>l(e=>!("slider"===i(h?.type,e)||["left","right"].includes(i(h?.position,e)||"")),"flex"),y=(i,t)=>e`${r({src:"{{media.preview_image | product_img_url: '1024x1024'}}",width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt}}",setting:i,style:t})}`,L=e=>`
+    {% if media.media_type == 'video' %}
+      {% assign mediaSourceUrl = media.sources.last.url %}
+    {% endif %}
+    {% if media.media_type == 'external_video' %}
+      {% assign mediaSourceUrl = media | external_video_url %}
+    {% endif %}
+     {% if media.media_type == 'image' %}
+      {% assign mediaSourceUrl = media.src %}
+    {% endif %}
+    ${C({id:"{{imageID}}",className:`gp-group gp-flex gp-w-full gp-items-center gp-justify-center gp-overflow-hidden gp-outline-1 -gp-outline-offset-1 image-item data-[outline=active]:gp-outline data-[outline=active]:gp-p-[1px] ${e}`,parentId:`${f}-{{product.id}}`,builderAttrs:{"data-outline":e?"active":"deactive"},style:{"outline-color":"var(--g-c-brand, brand)"},children:`
+      ${y({aspectRatio:v,layout:h?.layout},{...t("w",o(h?.width,h?.fullWidth)),...t("aspect",h?.aspectRatio)})}
+
+      {% if media.media_type == 'video' or media.media_type == 'external_video' %}
+      <div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
+          <path d="M17.6869 12.2646L17.6868 12.2646L6.78379 18.4464C6.78378 18.4464 6.78376 18.4464 6.78374 18.4464C6.52931 18.5903 6.1665 18.4179 6.1665 18.0416V5.95844C6.1665 5.58218 6.52917 5.40981 6.7836 5.55354C6.78366 5.55357 6.78373 5.55361 6.78379 5.55365L17.6868 11.7354L17.6869 11.7354C17.8819 11.846 17.8819 12.154 17.6869 12.2646Z" stroke="#F9F9F9" stroke-miterlimit="10"/>
+        </svg>
+      </div>
+      {% endif %}
+
+      {% if media.media_type == 'model' %}
+      <div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7441 4.57034C11.9017 4.47655 12.098 4.47655 12.2555 4.57034L18.5889 8.33957C18.7404 8.42971 18.8332 8.59296 18.8332 8.76923V15.2308C18.8332 15.407 18.7404 15.5703 18.5889 15.6604L12.2555 19.4297C12.098 19.5234 11.9017 19.5234 11.7441 19.4297L5.41079 15.6604C5.25932 15.5703 5.1665 15.407 5.1665 15.2308V8.76923C5.1665 8.59296 5.25932 8.42971 5.41079 8.33957L11.7441 4.57034ZM6.1665 9.64865V14.9465L11.4998 18.1206V12.8227L6.1665 9.64865ZM12.4998 12.8227V18.1206L17.8332 14.9465V9.64865L12.4998 12.8227ZM17.3555 8.76923L11.9998 11.9566L6.64417 8.76923L11.9998 5.58185L17.3555 8.76923Z" fill="#F9F9F9"/>
+        </svg>
+      </div>
+      {% endif %}
+
+      <div class="gp-absolute gp-inset-0 gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-bg-black/50 gp-opacity-0 gp-transition-opacity gp-duration-100 group-hover:gp-opacity-100"
+      style="${m(n(h?.largeViewInPopup))}"
+      >
+        <svg
+          height="100%"
+          width="100%"
+          xmlns="http://www.w3.org/2000/svg"
+          class="gp-h-6 gp-w-6"
+          viewBox="0 0 512 512"
+          color="#fff"
+        >
+          <path
+            fill="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M62.2467 345.253C43.7072 326.714 29.1474 305.116 18.9714 281.057C8.42839 256.13 3.08301 229.671 3.08301 202.418C3.08301 175.165 8.43012 148.707 18.974 123.78C29.15 99.7213 43.7098 78.123 62.2485 59.5834C80.788 41.0439 102.386 26.4841 126.445 16.3081C151.372 5.76422 177.831 0.417969 205.084 0.417969C232.337 0.417969 258.794 5.76421 283.722 16.3064C307.78 26.4823 329.379 41.0422 347.918 59.5817C366.458 78.1212 381.017 99.7196 391.194 123.778C401.737 148.706 407.083 175.163 407.083 202.417C407.083 229.671 401.737 256.129 391.194 281.056C388.406 287.648 385.277 294.048 381.839 300.257L493.397 411.815C514.091 432.511 514.091 466.187 493.395 486.883L484.272 496.006C474.245 506.032 460.915 511.553 446.738 511.553C432.559 511.553 419.228 506.032 409.202 496.006L296.022 382.824C291.996 384.854 287.898 386.762 283.721 388.528C258.794 399.073 232.336 404.419 205.082 404.419C177.828 404.419 151.371 399.071 126.443 388.528C102.385 378.352 80.7863 363.793 62.2467 345.253ZM301.699 336.166C313.928 327.317 324.896 316.835 334.282 305.034C342.149 295.142 348.9 284.325 354.355 272.775C364.433 251.432 370.076 227.586 370.076 202.419C370.076 111.296 296.206 37.4253 205.083 37.4253C113.96 37.4253 40.0895 111.294 40.0895 202.418C40.0895 293.541 113.96 367.411 205.084 367.411C227.413 367.411 248.701 362.967 268.126 354.928C280.091 349.976 291.347 343.658 301.699 336.166ZM467.229 460.716C473.507 454.439 473.507 444.26 467.229 437.982L360.595 331.348C356.601 336.153 352.378 340.794 347.919 345.253C341.671 351.502 335.068 357.286 328.147 362.615L435.371 469.839C438.511 472.977 442.624 474.547 446.739 474.547C450.853 474.547 454.967 472.978 458.106 469.839L467.229 460.716ZM223.582 183.91H281.071C291.292 183.91 299.574 192.194 299.575 202.414C299.575 206.778 298.062 210.786 295.533 213.951C292.143 218.195 286.926 220.916 281.072 220.916H228.303H223.583V225.63V278.406C223.583 287.081 217.613 294.358 209.559 296.361C208.124 296.717 206.625 296.909 205.08 296.909C194.861 296.909 186.577 288.625 186.577 278.406V220.917H129.087C118.868 220.917 110.584 212.633 110.584 202.414C110.584 192.195 118.868 183.911 129.087 183.911H186.576V126.421C186.576 116.202 194.86 107.918 205.079 107.918C215.298 107.918 223.582 116.202 223.582 126.421V183.91Z"
+          />
+        </svg>
+      </div>
+    `})}`;return e`${u({rootId:`${f}-{{product.id}}`,rootClass:"gp-flex-1 gp-w-full carousel-gallery",rootAttrs:{type:"grid-carousel"},isHiddenArrowWhenDisabled:!0,setting:{navigationStyle:{desktop:"none"},loop:h?.loop,slidesToShow:s(h?.slidesToShow,h?.position),dot:p(),dotStyle:c(),controlOverContent:h?.controlOverContent,enableDrag:{desktop:h?.dragToScroll,tablet:h?.dragToScroll,mobile:h?.dragToScroll},vertical:g(h.position),dotActiveColor:h?.dotActiveColor,dotColor:h?.dotColor,arrowCustom:h?.arrowIcon},rootStyles:{...w()},styles:{sizeSetting:{desktop:{width:"100%",height:"auto"},tablet:{width:"100%",height:"auto"},mobile:{width:"100%",height:"auto"}},spacing:a(h?.spacing)},children:`
+    {%- if product.media.size > 1 -%}
+    {%- for media in product.media -%}
+    {% if media.media_type == 'image' %}
+      {%- for image in product.images -%}
+        {% if image.src == media.src %}
+          {% assign imageID = image.id %}
+          {% break %}
+        {% endif%}
+      {% endfor %}
+    {% else %}
+      {% assign imageID = '' %}
+    {% endif %}
+      {%- if media.id == product.featured_media.id -%}
+        ${L(h?.showActiveStatus?"p-[1px]":"")}
+      {% else %}
+        ${L()}
+      {%- endif -%}
+    {% endfor %}
+    {%- endif -%}
+    `})}
+  `};export{ProductGalleryCarousel as default};

package/dist/esm/product/components/product-images/ProductGalleryGrid.js

@@ -0,0 +1,2 @@
+'use client';
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useCurrentDevice as o,useFeaturedImageGlobal as i,getResponsiveValueByScreen as r,makeAspectRatio as p,cls as l,makeStyleResponsive as s}from"@gem-sdk/core";import{useMemo as g}from"react";import{convertSpacingPx as a}from"./common/helpers.js";import c from"../../../image/components/NextImage.js";import{getStyleWidthForGridItem as n}from"./common/productGallery.js";let ProductGalleryGrid=({builderPropUID:d,productImages:h,onHandleClick:C,...m})=>{let u=o(),w=i(),f=g(()=>{let t=h?.findIndex(t=>t.id===w?.id);return t&&t>0?t:0},[h,w]),b=g(()=>r(m?.position,u),[u,m?.position]),L=g(()=>({desktop:m?.customAspectRadio?.desktop?.width,tablet:m?.customAspectRadio?.tablet?.width,mobile:m?.customAspectRadio?.mobile?.width}),[m?.customAspectRadio]),v=g(()=>({desktop:m?.customAspectRadio?.desktop?.height,tablet:m?.customAspectRadio?.tablet?.height,mobile:m?.customAspectRadio?.mobile?.height}),[m?.customAspectRadio]),y=g(()=>p(m?.aspectRatio,L,v),[L,m?.aspectRatio,v]);return t("div",{className:l("gp-flex gp-h-fit gp-w-full gp-flex-wrap",{"!gp-flex-nowrap gp-overflow-y-auto scrollbar:gp-w-[6px] scrollbar-track:gp-rounded-2xl scrollbar-thumb:gp-rounded-2xl scrollbar-thumb:gp-bg-gray-400":"left"===b||"right"===b,"!gp-items-end":"left"===b,"!gp-items-start":"right"===b,"gp-justify-center":"bottom-center"===b}),style:{...s("gg",a(m?.spacing))},children:h?.map((o,i)=>{let p=i===f,g="VIDEO"==o.contentType||"EXTERNAL_VIDEO"==o.contentType||"MODEL_3D"==o.contentType?o?.previewImage:o?.src;return e("div",{"aria-hidden":!0,className:l("gp-group gp-relative gp-cursor-pointer gp-overflow-hidden gp-outline-1 -gp-outline-offset-1",{"gp-outline":p&&!!m?.showActiveStatus}),onClick:()=>C(o?.id||""),style:{...s("aspect",m?.aspectRatio),...n(m?.numberPerRow,m?.spacing,m?.position),maxWidth:"100%",outlineColor:"var(--g-c-brand, brand)"},children:[t(c,{src:g,width:o?.width,height:o?.height,alt:o?.alt,setting:{aspectRatio:y,layout:m?.layout},style:{width:"100%",height:"100%"}},o?.id),("VIDEO"==o.contentType||"EXTERNAL_VIDEO"==o.contentType)&&t("div",{className:"gp-absolute gp-bottom-0 gp-right-0 gp-pb-1 gp-pr-1",children:e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("rect",{opacity:"0.9",width:"24",height:"24",rx:"3",fill:"#212121"}),t("path",{d:"M17.6869 12.2646L17.6868 12.2646L6.78379 18.4464C6.78378 18.4464 6.78376 18.4464 6.78374 18.4464C6.52931 18.5903 6.1665 18.4179 6.1665 18.0416V5.95844C6.1665 5.58218 6.52917 5.40981 6.7836 5.55354C6.78366 5.55357 6.78373 5.55361 6.78379 5.55365L17.6868 11.7354L17.6869 11.7354C17.8819 11.846 17.8819 12.154 17.6869 12.2646Z",stroke:"#F9F9F9",strokeMiterlimit:"10"})]})}),"MODEL_3D"==o.contentType&&t("div",{className:"gp-absolute gp-bottom-0 gp-right-0 gp-pb-1 gp-pr-1",children:e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("rect",{opacity:"0.9",width:"24",height:"24",rx:"3",fill:"#212121"}),t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.7441 4.57034C11.9017 4.47655 12.098 4.47655 12.2555 4.57034L18.5889 8.33957C18.7404 8.42971 18.8332 8.59296 18.8332 8.76923V15.2308C18.8332 15.407 18.7404 15.5703 18.5889 15.6604L12.2555 19.4297C12.098 19.5234 11.9017 19.5234 11.7441 19.4297L5.41079 15.6604C5.25932 15.5703 5.1665 15.407 5.1665 15.2308V8.76923C5.1665 8.59296 5.25932 8.42971 5.41079 8.33957L11.7441 4.57034ZM6.1665 9.64865V14.9465L11.4998 18.1206V12.8227L6.1665 9.64865ZM12.4998 12.8227V18.1206L17.8332 14.9465V9.64865L12.4998 12.8227ZM17.3555 8.76923L11.9998 11.9566L6.64417 8.76923L11.9998 5.58185L17.3555 8.76923Z",fill:"#F9F9F9"})]})}),r(m?.largeViewInPopup,u)&&t("div",{className:"gp-absolute gp-inset-0 gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-bg-black/50 gp-opacity-0 gp-transition-all gp-duration-100 group-hover:gp-opacity-100",children:t("svg",{height:"100%",width:"100%",xmlns:"http://www.w3.org/2000/svg",className:"gp-h-6 gp-w-6",viewBox:"0 0 512 512",color:"#fff",children:t("path",{fill:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",d:"M62.2467 345.253C43.7072 326.714 29.1474 305.116 18.9714 281.057C8.42839 256.13 3.08301 229.671 3.08301 202.418C3.08301 175.165 8.43012 148.707 18.974 123.78C29.15 99.7213 43.7098 78.123 62.2485 59.5834C80.788 41.0439 102.386 26.4841 126.445 16.3081C151.372 5.76422 177.831 0.417969 205.084 0.417969C232.337 0.417969 258.794 5.76421 283.722 16.3064C307.78 26.4823 329.379 41.0422 347.918 59.5817C366.458 78.1212 381.017 99.7196 391.194 123.778C401.737 148.706 407.083 175.163 407.083 202.417C407.083 229.671 401.737 256.129 391.194 281.056C388.406 287.648 385.277 294.048 381.839 300.257L493.397 411.815C514.091 432.511 514.091 466.187 493.395 486.883L484.272 496.006C474.245 506.032 460.915 511.553 446.738 511.553C432.559 511.553 419.228 506.032 409.202 496.006L296.022 382.824C291.996 384.854 287.898 386.762 283.721 388.528C258.794 399.073 232.336 404.419 205.082 404.419C177.828 404.419 151.371 399.071 126.443 388.528C102.385 378.352 80.7863 363.793 62.2467 345.253ZM301.699 336.166C313.928 327.317 324.896 316.835 334.282 305.034C342.149 295.142 348.9 284.325 354.355 272.775C364.433 251.432 370.076 227.586 370.076 202.419C370.076 111.296 296.206 37.4253 205.083 37.4253C113.96 37.4253 40.0895 111.294 40.0895 202.418C40.0895 293.541 113.96 367.411 205.084 367.411C227.413 367.411 248.701 362.967 268.126 354.928C280.091 349.976 291.347 343.658 301.699 336.166ZM467.229 460.716C473.507 454.439 473.507 444.26 467.229 437.982L360.595 331.348C356.601 336.153 352.378 340.794 347.919 345.253C341.671 351.502 335.068 357.286 328.147 362.615L435.371 469.839C438.511 472.977 442.624 474.547 446.739 474.547C450.853 474.547 454.967 472.978 458.106 469.839L467.229 460.716ZM223.582 183.91H281.071C291.292 183.91 299.574 192.194 299.575 202.414C299.575 206.778 298.062 210.786 295.533 213.951C292.143 218.195 286.926 220.916 281.072 220.916H228.303H223.583V225.63V278.406C223.583 287.081 217.613 294.358 209.559 296.361C208.124 296.717 206.625 296.909 205.08 296.909C194.861 296.909 186.577 288.625 186.577 278.406V220.917H129.087C118.868 220.917 110.584 212.633 110.584 202.414C110.584 192.195 118.868 183.911 129.087 183.911H186.576V126.421C186.576 116.202 194.86 107.918 205.079 107.918C215.298 107.918 223.582 116.202 223.582 126.421V183.91Z"})})})]},o?.id)})})};export{ProductGalleryGrid as default};

package/dist/esm/product/components/product-images/ProductGalleryGrid.liquid.js

@@ -0,0 +1,86 @@
+import{template as e,cls as i,makeStyleResponsive as t,getResponsiveValueByScreen as a}from"@gem-sdk/core";import{getGalleryImageAspectRatio as r,getClassOverflowAndFlexWrapForGrid as o,getClassJustifyByPosition as d,getStyleWidthForGridItem as l,getZoomDisplay as p}from"./common/productGallery.js";import{getStyleOfObject as s}from"../../helpers/function.js";import g from"../../../image/components/NextImage.liquid.js";import{convertSpacingPx as m,getDisplayStyle as n}from"./common/helpers.js";let ProductGalleryCarousel=({builderPropUID:c,...u})=>{let C=r(u?.customAspectRadio,u?.aspectRatio),f=()=>n(e=>"slider"===a(u?.type,e)||["left","right"].includes(a(u?.position,e)||""),"flex"),h=(i,t)=>e`${g({src:"{{media.preview_image | product_img_url: '1024x1024'}}",width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt}}",setting:i,style:t})}`,v=e=>`
+    {% if media.media_type == 'video' %}
+      {% assign mediaSourceUrl = media.sources.last.url %}
+    {% endif %}
+    {% if media.media_type == 'external_video' %}
+      {% assign mediaSourceUrl = media | external_video_url %}
+      {% assign mediaSource = media | json %}
+    {% endif %}
+    {% if media.media_type == 'image' %}
+      {% assign mediaSourceUrl = media.src %}
+    {% endif %}
+    <div
+      aria-hidden
+      id="{{imageID}}"
+      media-type="{{media.media_type}}"
+      media-poster="{{media.preview_image.src}}"
+      media-source-url="{{media.sources.first.url}}"
+      media-last-source-url="{{mediaSourceUrl}}"
+      external-id="{{media.external_id}}"
+      grid-index="{{forloop.index}}"
+      data-outline="${e?"active":"deactive"}" class="image-item ${e} data-[outline=active]:gp-outline data-[outline=active]:gp-p-[1px] ${i("gp-group gp-relative gp-overflow-hidden gp-outline-1 -gp-outline-offset-1 gp-cursor-pointer")}"
+      style="${s({...t("aspect",u?.aspectRatio),...l(u?.numberPerRow,u?.spacing,u?.position),"outline-color":"var(--g-c-brand, brand)","max-width":"100%"})}"
+      >
+      {% if media.media_type == 'video' or media.media_type == 'external_video' %}
+        <div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
+            <path d="M17.6869 12.2646L17.6868 12.2646L6.78379 18.4464C6.78378 18.4464 6.78376 18.4464 6.78374 18.4464C6.52931 18.5903 6.1665 18.4179 6.1665 18.0416V5.95844C6.1665 5.58218 6.52917 5.40981 6.7836 5.55354C6.78366 5.55357 6.78373 5.55361 6.78379 5.55365L17.6868 11.7354L17.6869 11.7354C17.8819 11.846 17.8819 12.154 17.6869 12.2646Z" stroke="#F9F9F9" stroke-miterlimit="10"/>
+          </svg>
+        </div>
+      {% endif %}
+
+      {% if media.media_type == 'model' %}
+      <div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7441 4.57034C11.9017 4.47655 12.098 4.47655 12.2555 4.57034L18.5889 8.33957C18.7404 8.42971 18.8332 8.59296 18.8332 8.76923V15.2308C18.8332 15.407 18.7404 15.5703 18.5889 15.6604L12.2555 19.4297C12.098 19.5234 11.9017 19.5234 11.7441 19.4297L5.41079 15.6604C5.25932 15.5703 5.1665 15.407 5.1665 15.2308V8.76923C5.1665 8.59296 5.25932 8.42971 5.41079 8.33957L11.7441 4.57034ZM6.1665 9.64865V14.9465L11.4998 18.1206V12.8227L6.1665 9.64865ZM12.4998 12.8227V18.1206L17.8332 14.9465V9.64865L12.4998 12.8227ZM17.3555 8.76923L11.9998 11.9566L6.64417 8.76923L11.9998 5.58185L17.3555 8.76923Z" fill="#F9F9F9"/>
+        </svg>
+      </div>
+      {% endif %}
+
+      ${h({aspectRatio:C,layout:u?.layout},{width:"100%",height:"100%"})}
+
+      <div class="gp-absolute gp-inset-0 gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-bg-black/50 gp-opacity-0 gp-transition-opacity gp-duration-100 group-hover:gp-opacity-100"
+        style="${s(p(u?.largeViewInPopup))}" >
+          <svg
+            height="100%"
+            width="100%"
+            xmlns="http://www.w3.org/2000/svg"
+            class="gp-h-6 gp-w-6"
+            viewBox="0 0 512 512"
+            color="#fff"
+          >
+            <path
+              fill="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M62.2467 345.253C43.7072 326.714 29.1474 305.116 18.9714 281.057C8.42839 256.13 3.08301 229.671 3.08301 202.418C3.08301 175.165 8.43012 148.707 18.974 123.78C29.15 99.7213 43.7098 78.123 62.2485 59.5834C80.788 41.0439 102.386 26.4841 126.445 16.3081C151.372 5.76422 177.831 0.417969 205.084 0.417969C232.337 0.417969 258.794 5.76421 283.722 16.3064C307.78 26.4823 329.379 41.0422 347.918 59.5817C366.458 78.1212 381.017 99.7196 391.194 123.778C401.737 148.706 407.083 175.163 407.083 202.417C407.083 229.671 401.737 256.129 391.194 281.056C388.406 287.648 385.277 294.048 381.839 300.257L493.397 411.815C514.091 432.511 514.091 466.187 493.395 486.883L484.272 496.006C474.245 506.032 460.915 511.553 446.738 511.553C432.559 511.553 419.228 506.032 409.202 496.006L296.022 382.824C291.996 384.854 287.898 386.762 283.721 388.528C258.794 399.073 232.336 404.419 205.082 404.419C177.828 404.419 151.371 399.071 126.443 388.528C102.385 378.352 80.7863 363.793 62.2467 345.253ZM301.699 336.166C313.928 327.317 324.896 316.835 334.282 305.034C342.149 295.142 348.9 284.325 354.355 272.775C364.433 251.432 370.076 227.586 370.076 202.419C370.076 111.296 296.206 37.4253 205.083 37.4253C113.96 37.4253 40.0895 111.294 40.0895 202.418C40.0895 293.541 113.96 367.411 205.084 367.411C227.413 367.411 248.701 362.967 268.126 354.928C280.091 349.976 291.347 343.658 301.699 336.166ZM467.229 460.716C473.507 454.439 473.507 444.26 467.229 437.982L360.595 331.348C356.601 336.153 352.378 340.794 347.919 345.253C341.671 351.502 335.068 357.286 328.147 362.615L435.371 469.839C438.511 472.977 442.624 474.547 446.739 474.547C450.853 474.547 454.967 472.978 458.106 469.839L467.229 460.716ZM223.582 183.91H281.071C291.292 183.91 299.574 192.194 299.575 202.414C299.575 206.778 298.062 210.786 295.533 213.951C292.143 218.195 286.926 220.916 281.072 220.916H228.303H223.583V225.63V278.406C223.583 287.081 217.613 294.358 209.559 296.361C208.124 296.717 206.625 296.909 205.08 296.909C194.861 296.909 186.577 288.625 186.577 278.406V220.917H129.087C118.868 220.917 110.584 212.633 110.584 202.414C110.584 192.195 118.868 183.911 129.087 183.911H186.576V126.421C186.576 116.202 194.86 107.918 205.079 107.918C215.298 107.918 223.582 116.202 223.582 126.421V183.91Z"
+            />
+          </svg>
+        </div>
+      </div>`;return e`
+  <div type="grid-gallery"
+    class="${i("grid-gallery gp-flex gp-h-fit gp-w-full gp-flex-wrap scrollbar-track:gp-rounded-2xl scrollbar-thumb:gp-rounded-2xl scrollbar-thumb:gp-bg-gray-400",{...o(u?.position),...d(u?.position)})}"
+    style="${{...f(),...t("gg",m(u?.spacing))}}"
+  >
+    {%- if product.media.size > 1 -%}
+      {%- for media in product.media -%}
+        {% if media.media_type == 'image' %}
+          {%- for image in product.images -%}
+            {% if image.src == media.src %}
+              {% assign imageID = image.id %}
+              {% break %}
+            {% endif%}
+          {% endfor %}
+        {% else %}
+          {% assign imageID = '' %}
+        {% endif %}
+        {%- if media.id == product.featured_media.id -%}
+            ${v(u?.showActiveStatus?"p-[1px]":"")}
+        {% else %}
+          ${v()}
+        {%- endif -%}
+      {% endfor %}
+    {% endif %}
+  </div>`};export{ProductGalleryCarousel as default};

package/dist/esm/product/components/product-images/ProductImagesLightBox.js

@@ -0,0 +1,2 @@
+'use client';
+import{jsx as e}from"react/jsx-runtime";import{useFeaturedImageGlobal as t,cls as o}from"@gem-sdk/core";import i from"../../../carousel/components/root/Carousel.js";import l from"../../../carousel/components/item/CarouselItem.js";import s from"../../../image/components/NextImage.js";import"../../../modal/components/confirm.js";import r from"../../../modal/components/Modal.js";import{useMemo as m}from"react";import{isFeatureMedia as n}from"./common/productFeaturedImage.js";let ProductImagesLightBox=({builderPropUID:d,productImages:p,open:a,imageRatio:c,onHandleClose:g})=>{let h=t(),b=m(()=>{let e=p?.findIndex(e=>e.id===h?.id);return e&&e>0?e:0},[p,h]),u={desktop:p&&p.length>1,mobile:p&&p?.length>1,tablet:p&&p?.length>1},f={desktop:!1,mobile:!1,tablet:!1};return e(r,{setting:{open:a},styles:{width:"80%"},closeOnClickOutside:!0,onClose:()=>g(),disableIframeClickEvent:!0,contentClass:"mobile:!gp-w-[100%] gp-px-2",children:e(i,{setting:{loop:f,slidesToShow:{desktop:1,tablet:1,mobile:1},defaultCurrentSlider:b,dot:{desktop:!0,mobile:!0,tablet:!0},dotStyle:{desktop:"outside",mobile:"outside",tablet:"outside"},dotColor:{desktop:"#E2E2E2",mobile:"#E2E2E2",tablet:"#E2E2E2"},dotActiveColor:{desktop:"#121212",mobile:"#121212",tablet:"#121212"},controlOverContent:{desktop:!0,mobile:!0,tablet:!0},arrow:u},styles:{sizeSetting:{desktop:{height:"80vh"},tablet:{height:"80vh"},mobile:{height:"60vh"}}},moveToIdx:b,hiddenDotWhenOnlyOne:!0,isHiddenArrowWhenDisabled:!0,builderProps:{uid:d},children:p?.map(t=>e(l,{className:`gem-slider-item gem-slider-item-${d} gp-flex gp-items-center gp-justify-center gp-px-4`,children:e(s,{src:n(t?.contentType)?t?.previewImage:t?.src,width:t?.width,height:t?.height,alt:t?.alt,"content-type":t?.contentType,setting:{aspectRatio:c},className:o("gp-h-full gp-w-full gp-object-contain")},t?.id)},t?.id))})})};export{ProductImagesLightBox as default};

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

@@ -0,0 +1 @@
+import{makeStyleResponsive as e,getResponsiveValueByScreen as t}from"@gem-sdk/core";let updateAlignStyles=(e,t)=>(t?.forEach(t=>{e?.[t]=="flex-start"?e={...e,[t]:"start"}:e?.[t]=="flex-end"&&(e={...e,[t]:"end"})}),e),getTypeWidthDevice=e=>{let t=e?.desktop,l=e?.tablet===void 0?t:e?.tablet,r=e?.mobile===void 0?l:e?.mobile;return{desktop:t,tablet:l,mobile:r}},convertUnitToNumber=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let l=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(l))?t:Number(l)},convertSpacing=e=>e?{desktop:convertUnitToNumber(e.desktop,5),tablet:convertUnitToNumber(e.tablet,5),mobile:convertUnitToNumber(e.mobile,5)}:{desktop:5},convertSpacingPx=e=>e?{desktop:`${convertUnitToNumber(e.desktop,5)}px`,tablet:`${convertUnitToNumber(e.tablet,5)}px`,mobile:`${convertUnitToNumber(e.mobile,5)}px`}:{desktop:"5px"},getDisplayStyle=(e,t)=>{let l={},r=["desktop","mobile","tablet"];return r.forEach(r=>{l={...l,[`--d${"desktop"===r?"":`-${r}`}`]:`${e(r)?"none":t}`}}),l},getStyleAlignment=(l,r)=>{let o={},n=["desktop","mobile","tablet"];return n.forEach(i=>{o=e("jc",updateAlignStyles(l,n));let p=t(r,i);p?.includes("bottom")&&(o=e("ai",updateAlignStyles(l,n)))}),o},checkAddOverFlowClass=e=>{let t=e?.["--radius"],l=e?.["--bblr"]||"0px",r=e?.["--bbrr"]||"0px",o=e?.["--btlr"]||"0px",n=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==l||"0px"!==r||"0px"!==o||"0px"!==n};export{checkAddOverFlowClass,convertSpacing,convertSpacingPx,convertUnitToNumber,getDisplayStyle,getStyleAlignment,getTypeWidthDevice,updateAlignStyles};

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

@@ -0,0 +1 @@
+import{getResponsiveValueByScreen as e,makeStyleResponsive as t,makeWidth as a,makeAspectRatio as l}from"@gem-sdk/core";let DEVICES=["mobile","tablet","desktop"],isFeatureMedia=e=>!!e&&["EXTERNAL_VIDEO","MODEL_3D","VIDEO"].includes(e),getStyleFeaturedImageWidth=l=>{let o={desktop:!1,tablet:!1,mobile:!1},r=l?.ftWidth;return DEVICES.forEach(t=>{let a=e(l?.position,t),o=e(l?.galleryVisible,t),g=("left"===a||"right"===a)&&o;r={...r,[t]:g?e(l?.ftWidthHorizontalLayout,t):e(l?.ftWidth,t)}}),{...t("w",a(r,o))}},convertUnitToNumber=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let a="string"==typeof e?e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em",""):t;return isNaN(Number(a))?t:Number(a)},getFeatureImageAspectWidth=e=>({desktop:e?.desktop?.width,tablet:e?.tablet?.width,mobile:e?.mobile?.width}),getFeatureImageAspectHeight=e=>({desktop:e?.desktop?.height,tablet:e?.tablet?.height,mobile:e?.mobile?.height}),getFeatureImageAspectRatio=(e,t)=>l(t,getFeatureImageAspectWidth(e),getFeatureImageAspectHeight(e)),getStyleFeatureImageJustify=a=>{let l={desktop:"flex-start",mobile:"flex-start",tablet:"flex-start"},o=["desktop","mobile","tablet"];return o.forEach(t=>{let o=e(a,t);l={...l,[`${t}`]:"bottom-left"===o?"flex-start":"bottom-center"===o?"center":"left"===o?"flex-start":"flex-end"}}),t("jc",l)},getZoomLenClass=()=>"!gp-flex gp-absolute gp-z-1 gp-h-[150px] gp-w-[150px] gp-cursor-none gp-rounded-full gp-bg-no-repeat gp-shadow-glasses gp-bg-white",getZoomImageClass=()=>"gp-absolute gp-left-0 gp-top-0 gp-opacity-0 gp-transition-opacity gp-bg-white";export{convertUnitToNumber,getFeatureImageAspectRatio,getStyleFeatureImageJustify,getStyleFeaturedImageWidth,getZoomImageClass,getZoomLenClass,isFeatureMedia};

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

@@ -0,0 +1 @@
+import{getResponsiveValueByScreen as e,makeStyleResponsive as t,makeWidth as l,makeAspectRatio as o}from"@gem-sdk/core";import{convertUnitToNumber as i,getDisplayStyle as r}from"./helpers.js";let getGalleryImageAspectWidth=e=>({desktop:e?.desktop?.width,tablet:e?.tablet?.width,mobile:e?.mobile?.width}),getGalleryImageAspectHeight=e=>({desktop:e?.desktop?.height,tablet:e?.tablet?.height,mobile:e?.mobile?.height}),getGalleryImageAspectRatio=(e,t)=>o(t,getGalleryImageAspectWidth(e),getGalleryImageAspectHeight(e)),getCarouselVerticalConfigByPosition=t=>{let l=["desktop","mobile","tablet"],o={};return l.forEach(l=>{let i=e(t,l),r="right"==i||"left"==i;o=r?{...o,[l]:!0}:{...o,[l]:!1}}),o},getZoomDisplay=t=>r(l=>!e(t,l),"flex"),getClassOverflowAndFlexWrapForGrid=t=>{let l={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=e(t,o);l={...l,[`${"desktop"===o?"":`${o}:`}!gp-flex-nowrap`]:"left"===i||"right"===i,[`${"desktop"===o?"":`${o}:`}gp-overflow-y-auto `]:"left"===i||"right"===i,[`${"desktop"===o?"":`${o}:`}!gp-items-end`]:"left"===i,[`${"desktop"===o?"":`${o}:`}!gp-items-start`]:"right"===i}}),l},getAllowDotConfig=()=>({desktop:!1,tablet:!1,mobile:!1}),getClassJustifyByPosition=t=>{let l={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=e(t,o);l={...l,[`${"desktop"===o?"":`${o}:`}!gp-justify-center`]:"bottom-center"===i}}),l},getStyleWidthForGridItem=(l,o,r)=>{let a={desktop:`${100/(l?.desktop||1)}%`,tablet:`${100/(l?.tablet||1)}%`,mobile:`${100/(l?.mobile||1)}%`},g=["desktop","mobile","tablet"];return g.forEach(t=>{let g=e(r,t);a={...a,[t]:`${"bottom-left"!==g&&"bottom-center"!==g&&g?"100%":`calc(${100/(l?.[t]||5)}% - ${i(o?.[t],5)*((l?.[t]||5)-1)/(l?.[t]||5)}px)`}`}}),t("w",a)},getStyleWidthForGallery=o=>{let i={desktop:!1,tablet:!1,mobile:!1},r=o?.width,a=["desktop","mobile","tablet"];return a.forEach(t=>{let l=e(o?.galleryVisible,t),i=e(o?.featureImageVisible,t),a=e(o?.position,t),g=("left"===a||"right"===a)&&l&&i;r={...r,[t]:g?e(o?.widthHorizontalLayout,t):e(o?.width,t)}}),{...t("w",l(r,i))}},getDeviceProperty=(e,t)=>`--${e}${"desktop"===t?"":`-${t}`}`,getStyleGallerySpacing=(t,l)=>{let o={},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=e(t,i),a=getDeviceProperty("mt",i),g=getDeviceProperty("mr",i),p=getDeviceProperty("ml",i);o="left"==r?{...o,[g]:e(l,i),[a]:"0px",[p]:"0px"}:"right"==r?{...o,[p]:e(l,i),[g]:"0px",[a]:"0px"}:{...o,[a]:e(l,i),[g]:"0px",[p]:"0px"}}),o},getSliderPerShowConfig=(t,l)=>{let o={},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=e(t,i),a=e(l,i),g="left"===a||"right"===a;o={...o,[i]:g?"auto":r}}),o};export{getAllowDotConfig,getCarouselVerticalConfigByPosition,getClassJustifyByPosition,getClassOverflowAndFlexWrapForGrid,getGalleryImageAspectRatio,getSliderPerShowConfig,getStyleGallerySpacing,getStyleWidthForGallery,getStyleWidthForGridItem,getZoomDisplay};

package/dist/esm/product/components/product-images-v2/ProductImageV2.js

@@ -0,0 +1,26 @@
+'use client';
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{setDefaultWhenUndefineSetting as a,getAspectRatio as i}from"./common/common.js";import{useProductShopifyEditLink as C,useProduct as o,useCurrentDevice as l,useCurrentVariant as d,useSelectedOption as r,useEditorMode as n,useProductStore as s,getResponsiveValueByScreen as p,filterToolbarPreview as c}from"@gem-sdk/core";import{useMemo as m,useState as f,useEffect as g,Children as h,isValidElement as u}from"react";import y from"./components/feature-gallery/FeatureImageWithGallery.js";import D from"./components/feature-only/OnlyFeatureImage.js";import I from"./components/lightbox/ProductImagesLightBox.js";import b from"../../../common/components/NoDataState.js";import{getProductImagesClassName as M}from"./composables/getProductImagesClassName.js";import{getBorderActiveCss as E}from"./common/getBorderActiveCss.js";import Z from"./components/gallery-grid/GalleryGrid.js";let getProductGallery=e=>e?.medias?.edges.map(e=>e?.node),LAYOUT_FEATURE_IMAGE_GALLERY=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"],ProductImagesV2=k=>{let w=m(()=>a(k),[k]),{redirectProductShopifyLink:L}=C(),{setting:A,styles:V,builderProps:v,builderAttrs:x,style:H,children:P}=w,G=o(),O=l(),T=d(),{isChangeSelectedOption:_}=r(),S=n(),j=s(e=>e.setProductFeaturedImage),[F,B]=f(!1),R=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,N=e=>e?.featuredImage,U=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,Y=m(()=>A?.typeDisplay==="all-images"&&!_,[_,A?.typeDisplay]),z=m(()=>{if(Y){let e;switch(A?.preDisplay){case"1st-images":e=N(G);break;case"1st-3d-mode":e=U(G);break;case"1st-video":e=R(G);break;case"1st-available-variant":e=T?.media}return j(e),e}},[Y,A?.preDisplay,j,G,T?.media]),J=m(()=>{let e=getProductGallery(G);return e?.length?e:[{id:G?.featuredImage?.id||"noImageError",src:G?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:G?.featuredImage?.width||480,height:G?.featuredImage?.height||480}]},[G]),W=m(()=>J.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[J]),X=m(()=>p(V?.position,O),[O,V?.position]),q=(e,t)=>{Q(e),t&&K()},K=()=>{B(!0)},Q=e=>{if(!e)return;let t=W[e];if(void 0!==t){let e=J[t];e&&j(e)}};g(()=>{if(T&&!Y){let e=W[T?.mediaId];if(void 0!==e){let t=J[e]??G?.featuredImage;t&&j(t)}}},[T,W,J,G?.featuredImage,j,Y]);let $=m(()=>{let e="popup"===p(A?.ftClickOpenLightBox,O)||p(A?.clickOpenLightBox,O);return e||"edit"!==S||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[A?.ftClickOpenLightBox,A?.clickOpenLightBox,O,S]),ee=()=>J.length>0?h.map(c(P),e=>u(e)?t(e.type,{...e.props,isInsideProductImage:!0,navigationPosition:A?.ftNavigationPosition,imageData:{imageShape:V?.ftShape,imageAlign:V?.align,imageLayout:V?.position},dotData:{dotSize:A?.ftDotSize,dotGapToCarousel:A?.ftDotGapToCarousel,dotStyle:A?.ftDotStyle}}):null):null,et=`
+      <svg viewBox="0 0 452 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 7.99999C0 3.58171 3.58172 0 8 0H444C448.418 0 452 3.58172 452 8V392C452 396.418 448.418 400 444 400H8C3.58173 400 0 396.418 0 392V7.99999Z" fill="#F9F9F9"/>
+        <path d="M208.148 348.801C239.683 348.75 265.245 347.272 265.242 345.499C265.239 343.726 239.673 342.33 208.138 342.381C176.603 342.432 151.041 343.91 151.044 345.683C151.047 347.456 176.614 348.851 208.148 348.801Z" fill="#E6E6E6"/>
+        <path d="M225.946 320.879C225.946 320.879 169.954 292.883 177.953 214.227C185.952 135.571 183.286 143.57 183.286 143.57C183.286 143.57 196.617 99.5762 220.614 83.5784C220.614 83.5784 163.289 24.9199 117.962 131.572C117.962 131.572 105.963 195.563 115.295 238.224C124.627 280.884 145.958 315.546 145.958 315.546C145.958 315.546 165.955 335.543 188.618 335.543C211.282 335.543 225.946 320.879 225.946 320.879Z" fill="#CCCCCC"/>
+        <path d="M318.6 273.553C318.6 273.553 286.605 358.875 186.619 342.877C86.6325 326.879 113.295 153.57 113.295 153.57C113.295 153.57 102.123 282.854 160.581 320.874C176.779 331.409 197.935 331.504 213.408 319.93C223.66 312.261 232.445 298.883 231.279 275.553L318.6 273.553Z" fill="#E6E6E6"/>
+        <path d="M315.483 111.223C315.483 111.223 269.94 28.9197 171.287 56.9158C110.135 82.9705 111.274 150.057 111.274 150.057C103.9 261.289 183.264 259.493 201.95 140.904C205.231 120.082 198.617 108.242 198.617 108.242C198.617 108.242 189.285 136.238 160.622 142.237C131.915 148.246 127.007 138.688 127.96 124.24C127.97 124.095 127.979 123.952 127.989 123.809C128.775 112.106 133.316 100.968 140.937 92.0518C157.37 72.918 193.19 44.9769 231.279 103.576L233.945 110.169C233.945 110.169 281.036 122.87 315.483 111.223Z" fill="#E6E6E6"/>
+        <path d="M241.931 108.909C235.042 108.916 228.438 111.656 223.567 116.528C218.696 121.399 215.956 128.003 215.948 134.892V257.167C215.956 264.339 218.809 271.214 223.88 276.286C228.951 281.357 235.827 284.21 242.999 284.218H307.331C315.974 284.208 324.26 280.77 330.371 274.659C336.483 268.547 339.921 260.261 339.931 251.618V141.762C339.921 133.052 336.456 124.701 330.297 118.542C324.138 112.383 315.787 108.918 307.077 108.909L241.931 108.909Z" fill="#ADADAD"/>
+        <path d="M253.087 114.24C249.426 114.244 245.916 115.7 243.327 118.289C240.738 120.878 239.282 124.388 239.278 128.049V265.741C239.282 269.402 240.738 272.912 243.327 275.501C245.916 278.09 249.426 279.546 253.087 279.55H314.265C321.6 279.542 328.631 276.624 333.818 271.438C339.004 266.251 341.922 259.219 341.93 251.885V138.614C341.923 132.152 339.353 125.956 334.783 121.387C330.214 116.817 324.018 114.247 317.556 114.24H253.087Z" fill="#D2D2D2"/>
+        <path opacity="0.1" d="M250.832 115.006C249.11 116.287 247.711 117.953 246.747 119.87C245.782 121.788 245.279 123.904 245.277 126.05V263.742C245.281 267.403 246.737 270.913 249.326 273.502C251.915 276.091 255.425 277.547 259.086 277.551H320.264C322.585 277.542 324.895 277.24 327.14 276.651C323.01 278.99 318.344 280.218 313.598 280.217H252.421C248.759 280.213 245.249 278.757 242.66 276.168C240.072 273.579 238.615 270.069 238.611 266.408V128.716C238.616 125.331 239.863 122.065 242.116 119.538C244.368 117.011 247.469 115.399 250.832 115.006Z" fill="black"/>
+        <path d="M220.614 180.899C227.977 180.899 233.945 173.439 233.945 164.235C233.945 155.032 227.977 147.571 220.614 147.571C213.251 147.571 207.282 155.032 207.282 164.235C207.282 173.439 213.251 180.899 220.614 180.899Z" fill="#D6D6D6"/>
+        <path opacity="0.2" d="M229.946 164.235C229.946 156.173 225.366 149.45 219.281 147.905C220.152 147.684 221.048 147.571 221.947 147.571C229.31 147.571 235.278 155.032 235.278 164.235C235.278 173.439 229.31 180.9 221.947 180.9C221.048 180.899 220.152 180.787 219.281 180.565C225.366 179.021 229.946 172.297 229.946 164.235Z" fill="black"/>
+        <path d="M217.948 206.895V241.556C217.948 242.794 218.439 243.981 219.314 244.856C220.189 245.731 221.376 246.222 222.614 246.222C223.851 246.222 225.038 245.731 225.913 244.856C226.788 243.981 227.28 242.794 227.28 241.556V206.895C227.28 205.657 226.788 204.47 225.913 203.595C225.038 202.72 223.851 202.229 222.614 202.229C221.376 202.229 220.189 202.72 219.314 203.595C218.439 204.47 217.948 205.657 217.948 206.895Z" fill="#D6D6D6"/>
+        <path opacity="0.2" d="M225.28 241.556V206.895C225.276 205.893 224.95 204.92 224.35 204.119C223.749 203.317 222.907 202.731 221.947 202.446C222.378 202.308 222.828 202.235 223.28 202.229C224.517 202.23 225.703 202.722 226.578 203.597C227.453 204.472 227.945 205.657 227.946 206.895V241.556C227.945 242.793 227.453 243.979 226.578 244.854C225.703 245.729 224.517 246.221 223.28 246.222C222.828 246.216 222.378 246.143 221.947 246.005C222.907 245.72 223.749 245.134 224.35 244.332C224.95 243.531 225.276 242.558 225.28 241.556Z" fill="black"/>
+        <path d="M151.29 278.218C154.972 278.218 157.956 275.234 157.956 271.552C157.956 267.871 154.972 264.887 151.29 264.887C147.609 264.887 144.624 267.871 144.624 271.552C144.624 275.234 147.609 278.218 151.29 278.218Z" fill="white"/>
+        <path opacity="0.3" d="M155.29 271.552C155.289 270.016 154.759 268.527 153.787 267.337C152.815 266.147 151.462 265.329 149.957 265.021C150.925 264.824 151.926 264.844 152.885 265.081C153.845 265.317 154.74 265.765 155.505 266.39C156.27 267.015 156.887 267.802 157.311 268.695C157.735 269.588 157.954 270.564 157.954 271.552C157.954 272.541 157.735 273.517 157.311 274.41C156.887 275.302 156.27 276.09 155.505 276.715C154.74 277.34 153.845 277.787 152.885 278.024C151.926 278.261 150.925 278.281 149.957 278.084C151.462 277.776 152.815 276.958 153.787 275.768C154.759 274.578 155.289 273.089 155.29 271.552Z" fill="black"/>
+        <path d="M148.284 251.766C151.966 251.766 154.95 248.782 154.95 245.1C154.95 241.419 151.966 238.435 148.284 238.435C144.603 238.435 141.618 241.419 141.618 245.1C141.618 248.782 144.603 251.766 148.284 251.766Z" fill="white"/>
+        <path opacity="0.3" d="M152.284 245.1C152.283 243.564 151.753 242.075 150.781 240.885C149.809 239.694 148.456 238.876 146.951 238.569C147.919 238.371 148.92 238.392 149.879 238.629C150.839 238.865 151.734 239.312 152.499 239.938C153.264 240.563 153.881 241.35 154.305 242.243C154.729 243.136 154.948 244.112 154.948 245.1C154.948 246.089 154.729 247.065 154.305 247.957C153.881 248.85 153.264 249.638 152.499 250.263C151.734 250.888 150.839 251.335 149.879 251.572C148.92 251.809 147.919 251.829 146.951 251.632C148.456 251.324 149.809 250.506 150.781 249.316C151.753 248.126 152.283 246.637 152.284 245.1Z" fill="black"/>
+        <path d="M155.29 130.239C158.971 130.239 161.955 127.254 161.955 123.573C161.955 119.892 158.971 116.907 155.29 116.907C151.608 116.907 148.624 119.892 148.624 123.573C148.624 127.254 151.608 130.239 155.29 130.239Z" fill="white"/>
+        <path opacity="0.3" d="M159.289 123.573C159.289 122.037 158.758 120.547 157.786 119.357C156.815 118.167 155.462 117.349 153.956 117.042C154.925 116.844 155.925 116.865 156.885 117.101C157.844 117.338 158.739 117.785 159.504 118.41C160.27 119.035 160.887 119.823 161.31 120.716C161.734 121.609 161.954 122.585 161.954 123.573C161.954 124.561 161.734 125.537 161.31 126.43C160.887 127.323 160.27 128.111 159.504 128.736C158.739 129.361 157.844 129.808 156.885 130.045C155.925 130.281 154.925 130.302 153.956 130.104C155.462 129.797 156.815 128.979 157.786 127.789C158.758 126.599 159.289 125.109 159.289 123.573Z" fill="black"/>
+        <path opacity="0.2" d="M293.196 217.389C300.559 217.389 306.528 209.928 306.528 200.724C306.528 191.521 300.559 184.06 293.196 184.06C285.833 184.06 279.865 191.521 279.865 200.724C279.865 209.928 285.833 217.389 293.196 217.389Z" fill="white"/>
+        <path opacity="0.2" d="M293.196 231.862C306.954 231.862 318.106 217.921 318.106 200.724C318.106 183.527 306.954 169.586 293.196 169.586C279.439 169.586 268.286 183.527 268.286 200.724C268.286 217.921 279.439 231.862 293.196 231.862Z" fill="white"/>
+        <path opacity="0.2" d="M293.196 247.637C313.923 247.637 330.726 226.634 330.726 200.725C330.726 174.816 313.923 153.812 293.196 153.812C272.469 153.812 255.666 174.816 255.666 200.725C255.666 226.634 272.469 247.637 293.196 247.637Z" fill="white"/>
+      </svg>
+    `,ea=t(b,{elementType:"secondary",description:"Catch your customer's attention with attracted media.",descriptionActions:[{text:"Add image",callback:L},{text:"sync data",callback:"syncProduct"}],additionalMedia:et}),{wrapperClasses:ei}=M(k);return e("div",{...x,className:ei,style:H,children:[t("style",{dangerouslySetInnerHTML:{__html:E({settings:{...A,...V},uid:v?.uid,type:"React"})}}),LAYOUT_FEATURE_IMAGE_GALLERY.includes(X)&&t(y,{...w,gallery:J,priorityFeatureImage:z,onHandleClickImage:(e,t)=>q(e||"",t),noDataChildren:ea,children:ee()}),"only-feature"===X&&t(D,{gallery:J,...w,onHandleClickImage:(e,t)=>q(e||"",t),noDataChildren:ea,children:ee()}),["one-col","two-col"].includes(X)&&t(Z,{gallery:J,...w,onHandleClickImage:(e,t)=>q(e||"",t),noDataChildren:ea,children:ee()}),$&&t(I,{productImages:J,builderPropUID:v?.uid,open:F,onHandleClose:()=>B(!1),imageRatio:i(V?.ftShape)}),c(P,!0)]})};export{ProductImagesV2 as default};

package/dist/esm/product/components/product-images-v2/ProductImagesV2.liquid.js

@@ -0,0 +1,44 @@
+import{template as e,isLocalEnv as o,baseAssetURL as r,WrapRenderChildren as s,RenderChildren as t}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{getSettingPreloadData as c}from"../../../helpers.js";import{getShapeByLayout as u,sizeSettingDefaultForNewLayout as n}from"./common/productGallery.js";import{getProductImagesClassName as g}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as f}from"./composables/getProductImagesStyles.js";import{createAttr as $,LiquidIf as y,createClass as h,If as S,Liquid as j}from"@gem-sdk/system";import{getBorderActiveCss as v}from"./common/getBorderActiveCss.js";import{getStyleOfObject as F}from"../../helpers/function.js";let ProductImages=I=>{let P=p(I),{setting:C,styles:G,builderProps:D,style:b}=P,{rawChildren:O,pageContext:_}=I,{enableLazyLoadImage:z}=_??{},N={...C,...G},A=`
+    {
+      "id":${JSON.stringify(D?.uid)},
+      "pageContext": ${JSON.stringify(_)},
+      "setting":${JSON.stringify(C)},
+      "styles":${JSON.stringify(G)},
+      "productUrl":{{product.url | json | escape}},
+      "product":{{product | json | escape}},
+      "collectionUrl": {{ collection.url | json | escape }},
+      "collection": {{ collection | json | escape}}
+    }
+  `,B=$({"section-id":"{{section.id}}","data-id":`${D?.uid}`}),U=$({"data-only-image":y("product.media.size > 1","false","true")}),{wrapperClasses:k,productImagesGalleryClasses:q}=g(I),E=h({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),J=h({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:w,wrapContainerStyleOnlyOneImage:T,galleryImageStyle:x}=f(N),{isOnlyFeatureAllDevices:L}=i(N?.position),M=u({shape:N.shape,shapeForBottom:N.shapeForBottom,shapeFor1Col:N.shapeFor1Col,shapeFor2Col:N.shapeFor2Col,shapeForFtOnly:N.shapeForFtOnly,shapeForInsideBottom:N.shapeForInsideBottom??n,shapeForInside:N.shapeForInside??n},N.position),R=a(N.position,M,N?.spacing),V=()=>e`
+      ${s({uid:D?.uid||"",customProps:O?.[0].customProps},O?.map(o=>{if(o)return e`${t({...o,isInsideProductImage:!0,imageData:{imageShape:G?.ftShape,imageAlign:G?.align,imageLayout:G?.position},dotData:{dotSize:C?.ftDotSize,dotGapToCarousel:C?.ftDotGapToCarousel,dotStyle:C?.ftDotStyle}})}`}))}
+    `,W=()=>e`
+      <div
+        class="${q}"
+        style="${F(x)}"
+        ${{...U}}
+      >
+        ${d({builderPropUID:`gp-gallery-${D?.uid}`,...N,enableLazyLoadImage:z})}
+        ${m({builderPropUID:D?.uid,wrapperStyle:{...R},children:V(),...N,enableLazyLoadImage:z})}
+      </div>
+    `,H=()=>C?.borderActive?.border!=="none";return e`
+  ${S(H(),`<style>${v({settings:N,uid:D?.uid,type:"Liquid"})}</style>`)}
+  ${j(`
+    {% assign featured_image = product.featured_image %}
+    ${y("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
+  `)}
+    <gp-product-images
+      gp-data='${A}'
+      ${{...B}}
+      style="${{...b}}"
+      class="${k}"
+    >
+      <div
+        class="${y("product.media.size > 1",`${E}`,`${J}`)}"
+        style="${y("product.media.size > 1",F(w),F(T))}"
+      >
+        ${l({builderPropUID:`gp-carousel-${D?.uid}`,...N,children:V(),enableLazyLoadImage:z})}
+        ${S(!L,y("product.media.size > 1",W()))}
+      </div>
+    </gp-product-images>
+    ${S(o,`<script ${c('class="gps-link" delay',"src")}="{{ 'gp-product-images-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${c('class="gps-link" delay',"src")}="${r}/assets-v2/gp-product-images-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `};export{ProductImages as default};

package/dist/esm/product/components/product-images-v2/common/attrs.js

@@ -0,0 +1 @@
+import{getResponsiveValueByScreen as o}from"@gem-sdk/core";import{getShapeByLayout as t,getSliderPerShowConfig as r,getDotStyleConfig as e,getCarouselVerticalConfigByPosition as a,getAllowDotConfig as i}from"./productGallery.js";import{getDotStyleForOnlyFeaturedImage as n}from"./productFeaturedImage.js";let DEVICES=["desktop","mobile","tablet"],getGalleryCarouselSettingAttr=i=>{let n=t({shape:i.shape,shapeForBottom:i.shapeForBottom,shapeFor1Col:i.shapeFor1Col,shapeFor2Col:i.shapeFor2Col,shapeForFtOnly:i.shapeForFtOnly,shapeForInsideBottom:i.shapeForInsideBottom,shapeForInside:i.shapeForInside},i.position),d=r(n,i.position),l={desktop:"inside"===o(i.navigationPosition,"desktop"),tablet:"inside"===o(i.navigationPosition,"tablet"),mobile:"inside"===o(i.navigationPosition,"mobile")},s=DEVICES.reduce((o,t)=>(i.navigationPosition?.[t]&&(o[t]="none"!==i.navigationPosition[t]),o),{});return{...i?.loop&&{loop:i.loop},itemNumber:d,dot:{desktop:!1,tablet:!1,mobile:!1},dotStyle:e(),controlOverContent:l,...i?.dragToScroll&&{enableDrag:{desktop:i.dragToScroll,tablet:i.dragToScroll,mobile:i.dragToScroll}},vertical:a(i.position),...i?.arrowIcon&&{arrowCustom:i.arrowIcon},arrowIconSize:i.arrowIconSize||{desktop:24},...i?.arrowIconColor&&{arrowCustomColor:i.arrowIconColor},...i?.arrowNavColor&&{arrowBackgroundColor:i.arrowNavColor},...i?.arrowNavBorder&&{arrowBorder:{desktop:i.arrowNavBorder}},...i?.arrowNavRadius&&{roundedArrow:{desktop:i.arrowNavRadius}},...i?.arrowNavShadow&&{arrowShadow:{desktop:i.arrowNavShadow}},sneakPeakType:{desktop:"center"},arrowGapToEachSide:"16",navigationStyle:i.navigationPosition,navigationEnable:s,arrowButtonSize:{desktop:{width:void 0,height:void 0}},animationMode:i?.ftAnimationMode,enableAction:{desktop:!0}}},getFeaturedCarouselSettingAttr=t=>{let r={desktop:"inside"===o(t.ftNavigationPosition,"desktop"),tablet:"inside"===o(t.ftNavigationPosition,"tablet"),mobile:"inside"===o(t.ftNavigationPosition,"mobile")},e=DEVICES.reduce((o,r)=>(t.ftNavigationPosition?.[r]&&(o[r]="none"!==t.ftNavigationPosition[r]),o),{});return{...t?.ftLoop&&{loop:t.ftLoop},itemNumber:{desktop:1},dot:i(),dotStyle:n({position:t.position,dotStyle:t.ftDotStyle}),dotSize:t.ftDotSize??{desktop:12},dotGapToCarousel:t.ftDotGapToCarousel??{desktop:16},dotColor:t.ftDotColor??{desktop:"bg-1"},dotActiveColor:t.ftDotActiveColor??{desktop:"line-3"},controlOverContent:r,...t?.ftDragToScroll&&{enableDrag:{desktop:t.ftDragToScroll,tablet:t.ftDragToScroll,mobile:t.ftDragToScroll}},...t?.ftArrowIcon&&{arrowCustom:t.ftArrowIcon},arrowIconSize:t.ftArrowIconSize||{desktop:24},...t?.ftArrowIconColor&&{arrowCustomColor:t.ftArrowIconColor},...t?.ftArrowNavColor&&{arrowBackgroundColor:t.ftArrowNavColor},...t?.ftArrowNavBorder&&{arrowBorder:{desktop:t.ftArrowNavBorder}},...t?.ftArrowNavRadius&&{roundedArrow:{desktop:t.ftArrowNavRadius}},...t?.ftArrowNavShadow&&{arrowShadow:{desktop:t.ftArrowNavShadow}},sneakPeakType:{desktop:"center"},arrowGapToEachSide:"16",animationMode:t?.ftAnimationMode,...t?.ftNavigationPosition&&{navigationStyle:t.ftNavigationPosition},navigationEnable:e,arrowButtonSize:{desktop:{width:void 0,height:void 0}},enableAction:{desktop:!0}}};export{getFeaturedCarouselSettingAttr,getGalleryCarouselSettingAttr};

package/dist/esm/product/components/product-images-v2/common/classes.js

@@ -0,0 +1 @@
+import{DEVICES as e,getResponsiveValueByScreen as l}from"@gem-sdk/core";function composeClasses(e){return e.split(" ").reduce((e,l)=>(e[l]=!0,e),{})}let getWrapperClasses=({extraClass:e,isAddOverFlowClass:l=!1})=>{let s="gp-relative gp-w-full";return e&&(s+=` ${e}`),l&&(s+=" gp-overflow-hidden"),composeClasses(s)},getGalleryWrapperClasses=({extraClass:e})=>{let l="gallery-wrapper gp-product-images-gallery gp-flex gp-overflow-hidden gp-max-w-full gp-max-h-full data-[only-image=true]:gp-hidden";return e&&(l+=` ${e}`),composeClasses(l)},getGalleryGridWrapperClasses=({extraClass:e})=>{let l="product-feature-image grid-gallery gp-flex !gp-h-fit gp-w-full gp-flex-wrap scrollbar-track:gp-rounded-2xl scrollbar-thumb:gp-rounded-2xl scrollbar-thumb:gp-bg-gray-400";return e&&(l+=` ${e}`),composeClasses(l)},getFtImageWithGalleryClasses=({extraClass:e})=>{let l="gp-flex !gp-h-fit gp-relative gp-overflow-hidden";return e&&(l+=` ${e}`),composeClasses(l)},getImageGalleryWrapperClasses=({extraClass:e})=>{let l="gp-flex gp-h-fit gp-max-w-full gp-overflow-hidden";return e&&(l+=` ${e}`),composeClasses(l)},getFeaturedImageCarouselClasses=({extraClass:e})=>{let l="`gp-flex-1 gp-w-full gp-feature-image-carousel";return e&&(l+=` ${e}`),composeClasses(l)},getFeaturedImageClasses=({setting:s,extraClass:r})=>{let a=r??"";return e.forEach(e=>{let r=l(s?.ftNavigationPosition,e),t="desktop"!==e?`${e}:`:"";"outside"===r?a+=` ${t}gp-px-[16px]`:a+=` ${t}gp-px-0`}),composeClasses(a)},getFeaturedImageGalleryClasses=({settings:s,extraClass:r})=>{let a=r??"gp-flex-1 gp-w-full carousel-gallery";return e.forEach(e=>{let r=l(s?.navigationPosition,e),t=l(s?.type,e),g=l(s?.position,e),p="desktop"!==e?`${e}:`:"";"outside"===r&&"slider"===t&&["bottom-center"].includes(g||"")?a+=` ${p}gp-px-[16px]`:a+=` ${p}gp-px-0`}),composeClasses(a)},getGalleryItemClasses=({extraClass:e})=>{let l="gp-image-item gp-flex gp-items-center gp-justify-center gp-group gp-relative gp-overflow-hidden gp-cursor-pointer data-[outline=deactive]:after:!gp-border-transparent";return e&&(l+=` ${e}`),composeClasses(l)},getFeaturedCarouselItemClasses=({extraClass:e})=>{let l="gp-group gp-z-0 gp-flex !gp-min-w-full !gp-max-w-full gp-w-full gp-relative gp-items-start gp-justify-center gp-overflow-hidden gp-outline-1 -gp-outline-offset-1 gp-image-item gp-ft-image-item data-[outline=active]:gp-outline";return e&&(l+=` ${e}`),composeClasses(l)};export{getFeaturedCarouselItemClasses,getFeaturedImageCarouselClasses,getFeaturedImageClasses,getFeaturedImageGalleryClasses,getFtImageWithGalleryClasses,getGalleryGridWrapperClasses,getGalleryItemClasses,getGalleryWrapperClasses,getImageGalleryWrapperClasses,getWrapperClasses};

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

@@ -0,0 +1 @@
+import{getResponsiveValueByScreen as e,makeAspectRatio as t,makeStyleResponsive as o,removeNullUndefined as i,DEVICES as r}from"@gem-sdk/core";let getTypeWidthDevice=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}},convertUnitToNumber=(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)},convertSpacing=e=>e?{desktop:convertUnitToNumber(e.desktop,5),tablet:convertUnitToNumber(e.tablet,5),mobile:convertUnitToNumber(e.mobile,5)}:{desktop:5},getDisplayStyle=(e,t)=>{let o={},i=["desktop","mobile","tablet"];return i.forEach(i=>{o={...o,[`--d${"desktop"===i?"":`-${i}`}`]:`${e(i)?"none":t}`}}),o},checkAddOverFlowClass=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",i=e?.["--bbrr"]||"0px",r=e?.["--btlr"]||"0px",l=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==i||"0px"!==r||"0px"!==l},getAspectRatio=o=>{let i={},r=["desktop","mobile","tablet"];return r.forEach(t=>{let r=e(o,t)?.shapeValue;if(r)i={...i,[t]:r};else{let r=e(o,t)?.shape;switch(r){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)},getStyleGridLayout=t=>{let o={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let i=!1;r.forEach(r=>{let l=e(t.position,r),a=e(t.ratioLayout,r),n=e(t.ratioLayoutRight,r),s="desktop"===r?"--gtc":`--gtc-${r}`,d="desktop"===r?"--gtr":`--gtr-${r}`,u="left"===l?a:n,c=["left","right"].includes(l||"");c&&u?(i=!0,Object.assign(o={...o,[s]:`minmax(0, ${u[0]}fr) minmax(0, ${u[1]}fr)`},{[d]:"fit-content(0)"})):i&&Object.assign(o,{[d]:"unset"})})}return o},getStyleGridOrderForFeature=t=>{let o={"--o":"0","--o-tablet":"0","--o-mobile":"0"},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=e(t.position,i),l="desktop"===i?"--o":`--o-${i}`;o={...o,[l]:"left"===r?"1":"0"}}),o},getStyleGridOrderForGallery=t=>{let o={"--o":"1","--o-tablet":"1","--o-mobile":"1"},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=e(t.position,i),l="desktop"===i?"--o":`--o-${i}`;o={...o,[l]:"left"===r?"0":"1"}}),o},getSrcImage=e=>`{{${e} | img_url: '480x480'}} 480w, {{${e} | img_url: '768x768'}} 768w,{{${e} | img_url: '1024x1024'}} 1024w,{{${e} | img_url: '1440x1440'}} 1440w`,convertSpacingForIndisdeLayout=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},getStyleInsideLayout=(t,r,l)=>{let a=["desktop","mobile","tablet"],n={},s={},d={},u={},c={},g={};return a.forEach(o=>{let i=e(t,o),a=e(r,o)?.width,m=e(l,o);if(n={...n,[o]:["inside-bottom","inside-left","inside-right"].includes(i)?"absolute":"static"},["inside-bottom"].includes(i)){let e=convertSpacingForIndisdeLayout(m);a=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(i)&&(a="100%"),d={...d,[o]:"inside-bottom"===i?`${m}`:"auto"},u={...u,[o]:["inside-left","inside-right"].includes(i)?`${m}`:"auto"},g={...g,[o]:["inside-bottom","inside-left"].includes(i)?`${m}`:"auto"},c={...c,[o]:"inside-right"===i?`${m}`:"auto"},s={...s,[o]:a}}),{...o("pos",n),...o("w",i(s)),...o("bottom",i(d)),...o("top",i(u)),...o("left",i(g)),...o("right",i(c))}},getConditionRenderGalleryImages=t=>{let o=["desktop","mobile","tablet"],i=!0,r=!1;return o.forEach(o=>{let l=e(t,o);l&&"only-feature"!==l&&(i=!1),["two-col","one-col"].includes(l)&&(r=!0)}),{isOnlyFeatureAllDevices:i,isRenderGalleryGrid:r}},setDefaultWhenUndefineSetting=e=>({...e,setting:{...e.setting}}),getValueFromValueContainUnit=e=>{let t=e.match(/\d+/g);return t?t[0]:e},getPaddingBottomByShapeSetting=t=>{let o=getAspectRatio(t),i={desktop:"auto",mobile:"auto",tablet:"auto"},r=["desktop","mobile","tablet"];return r.forEach(r=>{let l=e(t,r),a=l?.height,n=l?.width||"",s=getValueFromValueContainUnit(a||""),d=n.toString().match(/px/g)?getValueFromValueContainUnit(n):n;if(a&&n&&!isNaN(Number(s))&&!isNaN(Number(d))){i={...i,[r]:`${Number(s)/Number(d)*100}%`};return}if(a&&!isNaN(Number(s))){i={...i,[r]:a};return}let u=o?.[r]!=="auto"&&o?.[r]?o?.[r]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";i={...i,[r]:`calc((${u})*100%)`}}),i};export{checkAddOverFlowClass,convertSpacing,convertSpacingForIndisdeLayout,convertUnitToNumber,getAspectRatio,getConditionRenderGalleryImages,getDisplayStyle,getPaddingBottomByShapeSetting,getSrcImage,getStyleGridLayout,getStyleGridOrderForFeature,getStyleGridOrderForGallery,getStyleInsideLayout,getTypeWidthDevice,setDefaultWhenUndefineSetting};

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

@@ -0,0 +1,16 @@
+import{composeBorderCss as e,composeCornerCss as t}from"@gem-sdk/core";let getBorderActiveCss=({settings:i,uid:r,type:g})=>{let l="Liquid"===g?`.gem-slider-item-${r}-{{product.id}}.gp-gallery-image-item::after, .gem-slider-item-gp-gallery-${r}-{{product.id}}.gp-gallery-image-item::after`:`.gem-slider-item-active.gem-slider-item-${r}.gp-gallery-image-item::after`;return`
+    ${l} {
+      content: "";
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      z-index: 999;
+      top: 0;
+      left: 0;
+      ${e(i?.borderActive)}
+      ${t(i?.corner)}
+    }
+    .gem-slider-item-${r}-{{product.id}}.gp-gallery-image-item[data-outline=active]:after, .gem-slider-item-gp-gallery-${r}-{{product.id}}.gp-gallery-image-item[data-outline=active]:after {
+      pointer-events: none;
+    }
+  `};export{getBorderActiveCss};

package/dist/esm/product/components/product-images-v2/common/hoverAction.js

@@ -0,0 +1 @@
+import{convertUnitToNumber as e}from"./common.js";let handleMouseMove=(t,o)=>{let l=o?.hoverEffect==="zoom"&&o?.zoomType==="default",r=o?.hoverEffect==="zoom"&&o?.zoomType==="glasses",i=o?.hoverEffect==="other",s=o?.hoverEffect!=="none";if(!s)return;let y=t.currentTarget.querySelector("img"),c=t.currentTarget.querySelector("img.hover-image"),n=t.currentTarget.querySelector(".room-len"),f=y?.getBoundingClientRect(),h=y?.clientWidth||0,a=y?.clientHeight||0,p=e(o?.zoom,0),g=!p||p<100?1:p/100||1,m=(h||1)*(o?.hoverEffect==="other"?1:g),u=(a||1)*(o?.hoverEffect==="other"?1:g),d=t.clientX-f?.x,x=t.clientY-f?.y;i&&displayOtherImage({featureImageHoverDom:c}),l&&t.clientX>=f?.x&&t.clientX<=f.right&&t.clientY>=f?.y&&t.clientY<=f.bottom&&displayZoomImage({featureImageDom:y,featureImageHoverDom:c,zoomSize:m,zoomSizeHeight:u,slideWidth:h,imageOffsetX:d,imageOffsetY:x,isEnableShowOtherImage:i}),r&&displayZoomLen({zoomLens:n,zoomSize:m,zoomValue:g,imagePosition:f,slideWidth:h,slideHeight:a,imageOffsetX:d,imageOffsetY:x})},displayOtherImage=({featureImageHoverDom:e})=>{e&&(e.style.opacity="1",e.style.top="0px",e.style.left="0px",e.style.width="100%",e.style.height="100%")},displayZoomLen=({zoomLens:e,zoomSize:t,zoomValue:o,slideWidth:l,slideHeight:r,imageOffsetX:i,imageOffsetY:s})=>{if(!e)return;e.style.opacity="1";let y=e.offsetWidth/2,c=e.offsetHeight/2,n=r||1;i>l-y/o&&(i=l-y/o),i<y/o&&(i=y/o),s>n-c/o&&(s=n-c/o),s<c/o&&(s=c/o),e.style.top=s-c+"px",e.style.left=i-y+"px",e.style.backgroundSize=t+"px "+n*o+"px",e.style.backgroundPosition=`-${i*o-y}px -${s*o-c}px`},displayZoomImage=({featureImageDom:e,featureImageHoverDom:t,zoomSize:o,zoomSizeHeight:l,slideWidth:r,imageOffsetX:i,imageOffsetY:s,isEnableShowOtherImage:y=!1})=>{if(!t)return;t.style.width=`${o}px`,y||(t.style.height=`${l}px`),t.style.opacity="1";let c=i/e?.offsetWidth,n=s/e?.offsetHeight;t.style.top=(e?.offsetHeight-t.offsetHeight)*n+"px",t.style.left=(r-o)*c+"px"},handleMouseOut=e=>{let t=e.currentTarget.querySelector("img.hover-image"),o=e.currentTarget.querySelector(".room-len");t&&(t.style.opacity="0"),o&&(o.style.opacity="0")};export{handleMouseMove,handleMouseOut};

package/dist/esm/product/components/product-images-v2/common/productFeaturedImage.js

@@ -0,0 +1 @@
+import{getResponsiveValueByScreen as e,DEVICES as o}from"@gem-sdk/core";let isFeatureMedia=e=>!!e&&["EXTERNAL_VIDEO","MODEL_3D","VIDEO"].includes(e),getZoomLenClass=()=>"!gp-flex gp-absolute gp-opacity-0 gp-h-[150px] gp-w-[150px] gp-cursor-none gp-rounded-full gp-bg-no-repeat gp-shadow-glasses gp-bg-white gp-pointer-events-none",getZoomImageClass=()=>"gp-absolute gp-left-0 gp-top-0 gp-opacity-0 gp-transition-opacity gp-bg-white gp-pointer-events-none",getDotStyleForOnlyFeaturedImage=t=>{let a={};return o.forEach(o=>{let r=e(t.position,o),g=e(t.dotStyle,o);a={...a,[o]:"only-feature"===r?g:"none"}}),a},checkRenderFeaturedCarousel=e=>{let o=["desktop","mobile","tablet"],t=!1;return o.forEach(o=>{let a=checkShowCarousel(e,o);checkShowCarousel(e,o)&&(t=a)}),t},checkShowCarousel=(o,t)=>"only-feature"!==e(o.position,t)||"none"!==e(o.ftNavigationPosition,t)||"none"!==e(o.ftDotStyle,t)||!0===e(o.ftLoop,t)||!0===o.ftDragToScroll;export{checkRenderFeaturedCarousel,getDotStyleForOnlyFeaturedImage,getZoomImageClass,getZoomLenClass,isFeatureMedia};

package/dist/esm/product/components/product-images-v2/common/productGallery.js

@@ -0,0 +1 @@
+import{getResponsiveValueByScreen as e,cls as t}from"@gem-sdk/core";import{getDisplayStyle as o}from"./common.js";import{convertUnitToNumber as i}from"../../product-images/common/productFeaturedImage.js";let getZoomDisplay=t=>o(o=>!e(t,o),"flex"),HORIZONTAL_LAYOUT=["right","left","inside-left","inside-right"],sizeSettingDefaultForNewLayout={desktop:{shape:"square",shapeValue:"1/1",width:"20%",height:void 0,shapeLinked:!0}},getCarouselVerticalConfigByPosition=t=>{let o=["desktop","mobile","tablet"],i={};return o.forEach(o=>{let a=e(t,o),l=HORIZONTAL_LAYOUT.includes(a);i=l?{...i,[o]:!0}:{...i,[o]:!1}}),i},getMinHeightByPosition=(o,i)=>{let a=["desktop","mobile","tablet"],l=getCarouselVerticalConfigByPosition(o),r={};return a.forEach(t=>{let o=e(i,t),a="desktop"===t?"":`${t}:`;r[`${a}!gp-min-h-0`]=!!l[t]&&"outside"===o,r[`${a}!gp-min-h-full`]=!(l[t]&&"outside"===o)}),t({...r})},getEditorMinHeightClass=(t,o,i)=>{let a=getCarouselVerticalConfigByPosition(o),l=e(i,t);return a[t]&&"outside"===l?"!gp-min-h-0":"!gp-min-h-full"},getAllowDotConfig=()=>({desktop:!0,tablet:!0,mobile:!0}),getDotStyleConfig=()=>({desktop:"none",tablet:"none",mobile:"none"}),getSettingWidthForGridItem=t=>{let o={},i=["desktop","mobile","tablet"];return i.forEach(i=>{let a=e(t.shapeByLayout,i)?.width,l=e(t.itemSpacing,i),r=0;a?.includes("%")&&(r=100/parseInt(a)),o={...o,[i]:r?`calc(${a} - ${l} * ${r-1} / ${r})`:a}}),o},getSettingWidthForCarouselItem=t=>{let o={},i=["desktop","mobile","tablet"];return i.forEach(i=>{let a=e(t.position,i),l="bottom-center"===a,r=e(t.shapeByLayout,i)?.width;o={...o,[i]:l&&r?.includes("px")?r:"100%"}}),o},getSettingMinWidthForCarouselItem=t=>{let o={},a=["desktop","mobile","tablet"];return a.forEach(a=>{let l=e(t.position,a),r=i(e(t.spacing,a),5),s="bottom-center"===l||"inside-bottom"===l,n=e(t.shapeByLayout,a)?.width,g="100%";if(s){let e=100/i(n,20);g=n?.includes("px")?n:n?.includes("%")?`calc(${n} - ${(e-1)*r/e}px)`:"100%"}o={...o,[a]:g}}),o},checkDisplayGalleryByWidth=t=>{let o={desktop:!0,tablet:!0,mobile:!0},i=["desktop","mobile","tablet"];return i.forEach(i=>{let a=e(t.shapeByLayout,i)?.width??"100%",l=0!==parseInt(a);o={...o,[i]:l}}),o},getSliderPerShowConfig=(t,o)=>{let i={desktop:"auto",tablet:"auto",mobile:"auto"},a=["desktop","mobile","tablet"];return a.forEach(a=>{let l=e(o,a),r="bottom-center"===l||"inside-bottom"===l,s=e(t,a)?.width,n="auto";s?.includes("%")&&(n=100>parseInt(s)?100/parseInt(s):"auto"),i={...i,[a]:r?n:"auto"}}),i},getShapeByLayout=(t,o)=>{let i={},a=["desktop","mobile","tablet"];return a.forEach(a=>{let l=e(o,a);switch(l){case"bottom-center":case"bottom-left":i={...i,[a]:e(t.shapeForBottom,a)};break;case"inside-bottom":i={...i,[a]:e(t.shapeForInsideBottom??sizeSettingDefaultForNewLayout,a)};break;case"left":case"right":i={...i,[a]:e(t.shape,a)};break;case"inside-left":case"inside-right":i={...i,[a]:e(t.shapeForInside??sizeSettingDefaultForNewLayout,a)};break;case"only-feature":i={...i,[a]:e(t.shapeForFtOnly,a)};break;case"one-col":i={...i,[a]:e(t.shapeFor1Col,a)};break;case"two-col":i={...i,[a]:e(t.shapeFor2Col,a)}}}),i};export{HORIZONTAL_LAYOUT,checkDisplayGalleryByWidth,getAllowDotConfig,getCarouselVerticalConfigByPosition,getDotStyleConfig,getEditorMinHeightClass,getMinHeightByPosition,getSettingMinWidthForCarouselItem,getSettingWidthForCarouselItem,getSettingWidthForGridItem,getShapeByLayout,getSliderPerShowConfig,getZoomDisplay,sizeSettingDefaultForNewLayout};