@gem-sdk/components 4.0.13 → 4.0.14

package/dist/cjs/product/components/product-badge/ProductBadge.liquid.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../../helpers.js"),common=require("./utils/common.js"),generateLiquidContent=require("./utils/generateLiquidContent.js"),renderBadgeLiquid=require("./utils/renderBadgeLiquid.js"),system=require("@gem-sdk/system"),constants=require("./constants.js"),styles=require("./common/styles.js"),classes=require("./common/classes.js"),attrs=require("./common/attrs.js");const ProductBadge=e=>{let{styles:t,setting:s,builderProps:r,pageContext:a}=e,i=s?.shape!=="image",c=common.checkDiscountContentProductBadge(s?.displayContent),n=system.createStyle({...styles.getContainerStyle(e,constants.IS_LIQUID)}),l=system.createClass({...classes.getWrapperClasses(e)}),o=system.createClass({...classes.getSubWrapperClass(e)}),d=system.createStyle({...styles.getSubWrapperStyle(e)}),p=system.createAttr({...attrs.getSubWrapperAttrs(e)}),u=styles.getContentStyleInternal(e),y=system.createClass({...classes.getTextContainerClasses()}),g=system.createAttr({...attrs.getContainerAttrs(e)}),m=system.createClass({...classes.getTextWrapperClasses()}),C=system.createStyle({...styles.getTextBadgeWrapperStyles({setting:s,styles:t})}),v=system.createClass({...classes.getTextContentClasses(t)}),$=system.createStyle({...styles.getTextContentStyle({setting:s,styles:t})}),S=system.createAttr({...attrs.getTextContentAttrs()}),q=system.createClass({...classes.getImageContainerClasses()}),I=system.createStyle({...styles.getImageContainerStyles({setting:s,styles:t})}),j=system.createClass({...classes.getImageClasses()}),D=system.createAttr({...attrs.getImageAttr({setting:s})}),P=system.createStateOrContext({minPrice:"{{ minPriceValue | replace: '\"', '\\\"' | escape }}",variantIDs:'{{  product.variants | map: "id" | json | escape }}',variantInventoryQuantities:'{{ product.variants | map: "inventory_quantity" | json | escape }}',amountDiscount:"{{amountDiscountValue | replace: '\"', '\\\"' | escape }}",percentDiscount:"{{percentDiscountValue}}",price:"{{price}}",displayTrigger:s?.displayTrigger,uid:e.builderProps?.uid,productCreatedAt:'{{product.created_at | date: "%Y-%m-%d" }}',productTags:'{{ product.tags | join: "," }}',isTextBadge:i}),{displayContent:f,translate:A}=s??{},L=helpers.getDynamicSourceLocales({val:f?.trim(),uid:r?.uid,settingId:"displayContent",isLiquid:!0,pageContext:a,translate:A});return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../../helpers.js"),common=require("./utils/common.js"),generateLiquidContent=require("./utils/generateLiquidContent.js"),renderBadgeLiquid=require("./utils/renderBadgeLiquid.js"),system=require("@gem-sdk/system"),constants=require("./constants.js"),styles=require("./common/styles.js"),classes=require("./common/classes.js"),attrs=require("./common/attrs.js");const ProductBadge=e=>{let{styles:t,setting:s,builderProps:r,pageContext:a}=e,i=s?.shape!=="image",c=common.checkDiscountContentProductBadge(s?.displayContent),n=system.createStyle({...styles.getContainerStyle(e,constants.IS_LIQUID)}),l=system.createClass({...classes.getWrapperClasses(e)}),o=system.createClass({...classes.getSubWrapperClass(e)}),d=system.createStyle({...styles.getSubWrapperStyle(e)}),p=system.createAttr({...attrs.getSubWrapperAttrs(e)}),u=styles.getContentStyleInternal(e),y=system.createClass({...classes.getTextContainerClasses()}),g=system.createAttr({...attrs.getContainerAttrs(e)}),m=system.createClass({...classes.getTextWrapperClasses()}),C=system.createStyle({...styles.getTextBadgeWrapperStyles({setting:s,styles:t})}),v=system.createClass({...classes.getTextContentClasses(t)}),S=system.createStyle({...styles.getTextContentStyle({setting:s,styles:t})}),$=system.createAttr({...attrs.getTextContentAttrs()}),q=system.createClass({...classes.getImageContainerClasses()}),I=system.createStyle({...styles.getImageContainerStyles({setting:s,styles:t})}),j=system.createClass({...classes.getImageClasses()}),D=system.createAttr({...attrs.getImageAttr({setting:s})}),P=system.createStateOrContext({minPrice:"{{ minPriceValue | replace: '\"', '\\\"' | escape }}",variantIDs:'{{  product.variants | map: "id" | json | escape }}',variantInventoryQuantities:'{{ product.variants | map: "inventory_quantity" | json | escape }}',amountDiscount:"{{amountDiscountValue | replace: '\"', '\\\"' | escape }}",percentDiscount:"{{percentDiscountValue}}",price:"{{price}}",displayTrigger:JSON.parse(JSON.stringify(s?.displayTrigger).replaceAll("'","'")),uid:e.builderProps?.uid,productCreatedAt:'{{product.created_at | date: "%Y-%m-%d" }}',productTags:"{{ product.tags | join: \",\" | replace: '\"', '\\\"' | escape }}",isTextBadge:i}),{displayContent:f,translate:A}=s??{},L=helpers.getDynamicSourceLocales({val:f?.trim(),uid:r?.uid,settingId:"displayContent",isLiquid:!0,pageContext:a,translate:A});return core.template`
     {% if product %}
       ${generateLiquidContent.generateBadgeContent(L,a?.isPreviewing)}
       ${renderBadgeLiquid.renderBadgeInFirstTime(s?.displayTrigger,c,i)}
@@ -23,9 +23,9 @@
                     style="${C}"
                   >
                     <pre
-                      ${{...S}}
+                      ${{...$}}
                       class="${v}"
-                      style="${$}"
+                      style="${S}"
                     >{{ content | replace: percentDiscountKey, percentDiscountValue | replace: amountDiscountKey, amountDiscountValue | replace: inventoryQuantityKey, inventoryQuantityValue | replace: minPriceKey, minPriceValue }}</pre>
                   </div>
                 </div>`,core.template`<div class="${q}" style="${I}">

package/dist/cjs/product/components/product-badge/utils/renderBadgeLiquid.js

@@ -127,8 +127,8 @@
         {% assign conditionTriggers = conditionTriggers | append: "," | append: false %}
       {% endif %}
 
-  `},checkProductTagCondition=e=>{let{searchTag:i}=e,n=i.join(", ");return`
-    {% assign productTags = product.tags %}
+  `},checkProductTagCondition=e=>{let{searchTag:i}=e,n=i.map(e=>e.replaceAll("'","'")).join(", ");return`
+    {% assign productTags = product.tags | escape %}
     {% assign searchTag = '${n}' %}
     {% for tag in productTags %}
       {% if searchTag contains tag %}

package/dist/cjs/product/components/product-images-v2/components/gallery-grid/GalleryGrid.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),ProductGalleryGrid=require("../child/ProductGalleryGrid.js");const GalleryGrid=e=>{let{setting:r,styles:t,gallery:l,builderProps:i,noDataChildren:d,onHandleClickImage:u,children:n}=e,o={...r,...t};return(console.log("setting",r),l?.[0]?.id==="noImageError")?jsxRuntime.jsx(jsxRuntime.Fragment,{children:d}):jsxRuntime.jsx(ProductGalleryGrid.default,{productImages:l,enableHoverAction:!0,...o,builderPropUID:i?.uid,onHandleClick:(e,r)=>u(e||"",r),children:n})};exports.default=GalleryGrid;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),ProductGalleryGrid=require("../child/ProductGalleryGrid.js");const GalleryGrid=e=>{let{setting:r,styles:t,gallery:i,builderProps:l,noDataChildren:d,onHandleClickImage:u,children:n}=e,a={...r,...t};return i?.[0]?.id==="noImageError"?jsxRuntime.jsx(jsxRuntime.Fragment,{children:d}):jsxRuntime.jsx(ProductGalleryGrid.default,{productImages:i,enableHoverAction:!0,...a,builderPropUID:l?.uid,onHandleClick:(e,r)=>u(e||"",r),children:n})};exports.default=GalleryGrid;

package/dist/cjs/product/components/product-images-v2/components/gallery-grid/GalleryGrid.liquid.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),Modal3d_liquid=require("../../../../../image/components/Modal3d.liquid.js"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),Video_liquid=require("../../../../../image/components/Video.liquid.js"),HTML5Embed_liquid=require("../../../../../video/components/HTML5Embed.liquid.js"),_function=require("../../../../helpers/function.js"),common=require("../../common/common.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),productGallery=require("../../common/productGallery.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js");const ProductGalleryGrid=({builderPropUID:e,wrapperStyle:i,children:t,enableLazyLoadImage:a,...s})=>{let{galleryItemClasses:o,galleryGridWrapperClasses:d}=getProductImagesClassName.getProductImagesClassName(s),{galleryGridStyles:r,galleryGridItemStyles:l}=getProductImagesStyles.getProductImagesStyles(s),m=productGallery.getShapeByLayout({shape:s.shape,shapeForBottom:s.shapeForBottom,shapeFor1Col:s.shapeFor1Col,shapeFor2Col:s.shapeFor2Col,shapeForFtOnly:s.shapeForFtOnly,shapeForInsideBottom:s.shapeForInsideBottom,shapeForInside:s.shapeForInside},s.position),c=()=>{let e=["desktop","mobile","tablet"],i={desktop:"none",tablet:"none",mobile:"none"};return e.forEach(e=>{let t=core.getResponsiveValueByScreen(s?.position,e);i={...i,[e]:"one-col"===t||"two-col"==t?"block":"none"}}),core.makeStyleResponsive("d",i)},u=(e,i)=>core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),Modal3d_liquid=require("../../../../../image/components/Modal3d.liquid.js"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),Video_liquid=require("../../../../../image/components/Video.liquid.js"),HTML5Embed_liquid=require("../../../../../video/components/HTML5Embed.liquid.js"),_function=require("../../../../helpers/function.js"),common=require("../../common/common.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),productGallery=require("../../common/productGallery.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js");const ProductGalleryGrid=({builderPropUID:e,wrapperStyle:i,children:t,enableLazyLoadImage:a,...s})=>{let{galleryItemClasses:o,galleryGridWrapperClasses:d}=getProductImagesClassName.getProductImagesClassName(s),{galleryGridStyles:r,galleryGridItemStyles:l}=getProductImagesStyles.getProductImagesStyles(s),m=productGallery.getShapeByLayout({shape:s.shape,shapeForBottom:s.shapeForBottom,shapeFor1Col:s.shapeFor1Col,shapeFor2Col:s.shapeFor2Col,shapeForFtOnly:s.shapeForFtOnly,shapeForInsideBottom:s.shapeForInsideBottom,shapeForInside:s.shapeForInside},s.position),c=(e=!1)=>{let i=["desktop","mobile","tablet"],t={desktop:"none",tablet:"none",mobile:"none"};return i.forEach(i=>{let a=core.getResponsiveValueByScreen(s?.position,i)||"",o="one-col"===a||"two-col"===a,d=e?!o:o;t[i]=d?"block":"none"}),core.makeStyleResponsive("d",t)},u=()=>c(),g=()=>c(!0),p=(e,i)=>core.template`
       ${NextImage_liquid.default({srcIsLiquidCode:!0,src:`${common.getSrcImage("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",baseSrc:"{{media.preview_image | image_url}}",setting:e,style:i,className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:a})}
       ${system.If(s?.galleryHoverEffect!=="none",`<div class="${core.cls("zoom-element !gp-max-w-none gp-w-full gp-h-full",productFeaturedImage.getZoomImageClass())}">
           ${NextImage_liquid.default({srcIsLiquidCode:!0,src:`${common.getSrcImage("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",baseSrc:"{{media.preview_image | image_url}}",alt:"{{media.alt | escape}}",setting:e,style:i,className:"!gp-rounded-none gp-w-full gp-h-full",customLazyload:!1,enableLazyLoadImage:a})}
@@ -6,7 +6,7 @@
       ${system.If(s?.galleryHoverEffect=="zoom"&&s?.galleryZoomType=="glasses",`<div class="${core.cls("zoom-lens-element",productFeaturedImage.getZoomLenClass())}" style="opacity: 0; background-image: url('{{media.preview_image | product_img_url: '1024x1024'}}')">
             </div>
           `," ")}
-    `,g=()=>Modal3d_liquid.default({src:system.LiquidIf("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:common.getAspectRatio(m)}),p=()=>Video_liquid.default({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),n=()=>HTML5Embed_liquid.default({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),y=()=>core.template`
+    `,n=()=>Modal3d_liquid.default({src:system.LiquidIf("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:common.getAspectRatio(m)}),y=()=>Video_liquid.default({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),f=()=>HTML5Embed_liquid.default({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),h=()=>core.template`
       ${system.LiquidIf("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"/>
@@ -19,7 +19,7 @@
             <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>`)}
-      ${u({aspectRatio:common.getAspectRatio(m),layout:s?.layout,qualityType:s?.qualityType,qualityPercent:s?.qualityPercent},{width:"100%",height:"100%"})}
+      ${p({aspectRatio:common.getAspectRatio(m),layout:s?.layout,qualityType:s?.qualityType,qualityPercent:s?.qualityPercent},{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="${_function.getStyleOfObject(productGallery.getZoomDisplay(s?.clickOpenLightBox))}" >
@@ -39,7 +39,7 @@
           />
         </svg>
       </div>
-    `,f=i=>`
+    `,C=i=>`
     ${system.LiquidIf("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
     ${system.LiquidIf("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}{% assign mediaSource = media | json %}")}
     ${system.LiquidIf("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}
@@ -56,34 +56,38 @@
       class="${o(`gem-slider-item-${e}-{{product.id}} gp-gallery-image-item ${i}`)}"
       style="${_function.getStyleOfObject(l)}"
       >
-      <div class="gp-h-full gp-w-full" style="${system.LiquidIf("media == null or media.media_type == 'image'","display: block !important;")}">
-        ${system.LiquidIf("media != null",y(),h())}
+      ${system.LiquidIf("media.media_type == 'external_video' or media.media_type == 'video' or media.media_type == 'model'","{% assign isMedia = true %}")}
+
+      ${system.LiquidIf("media.media_type == 'external_video' or media.media_type == 'video'","{% assign isVideo = true %}")}
+
+      <div class="gp-h-full gp-w-full" style="${system.LiquidIf("media == null or media.media_type == 'image'","display: block !important;")} ${system.LiquidIf("isVideo == true",_function.getStyleOfObject({...g()}))}">
+        ${system.LiquidIf("media != null",h(),v())}
       </div>
 
-      {% assign isMedia= false %}
-      ${system.LiquidIf("media.media_type == 'external_video' or media.media_type == 'video' or media.media_type == 'model'","{% assign isMedia = true %}")}
       <div class="${system.LiquidIf("isMedia","gp-flex gp-justify-center gp-items-center")}"
-      style="${system.LiquidIf("isMedia",_function.getStyleOfObject({...core.makeStyleResponsive("aspect",common.getAspectRatio(m))}))} ${_function.getStyleOfObject({...c()})}"
+      style="${system.LiquidIf("isMedia",_function.getStyleOfObject({...core.makeStyleResponsive("aspect",common.getAspectRatio(m))}))} ${_function.getStyleOfObject({...u()})}"
       >
         {% case media.media_type %}
           {% when 'external_video' %}
             {% assign mediaSourceVideo = media | external_video_url %}
-            ${p()}
+            ${y()}
           {% when 'video' %}
             {% assign mediaSourceVideo = media.sources.last.url %}
-            ${n()}
+            ${f()}
           {% when 'model' %}
-            ${g()}
+            ${n()}
         {% endcase %}
       </div>
-    </div>`,h=()=>core.template`
+      {% assign isVideo= false %}
+      {% assign isMedia= false %}
+    </div>`,v=()=>core.template`
     ${NextImage_liquid.default({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{aspectRatio:common.getAspectRatio(m),layout:s?.layout,qualityType:s?.qualityType,qualityPercent:s?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:a})}`;return system.Liquid(`
   <div type="grid-gallery"
     class="${d}"
     style="${_function.getStyleOfObject(r)}}"
   >
     ${system.LiquidFor("media in product.media",`${system.LiquidIf("media.media_type == 'image'",system.LiquidFor("image in product.images",system.LiquidIf("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
-      ${system.LiquidIf("media.id == product.featured_media.id ",f(s?.borderActive?.border!=="none"?"active":""),f())}`)}
+      ${system.LiquidIf("media.id == product.featured_media.id ",C(s?.borderActive?.border!=="none"?"active":""),C())}`)}
     ${system.LiquidIf("product.media.size > 0",t)}
-    ${system.LiquidIf("product.media.size < 1",f())}
+    ${system.LiquidIf("product.media.size < 1",C())}
   </div>`)};exports.default=ProductGalleryGrid;

package/dist/esm/product/components/product-badge/ProductBadge.liquid.js

@@ -1,26 +1,26 @@
-import{template as e,dataStringify as t,sanitizeLiquid as s,RenderIf as i,isLocalEnv as r,baseAssetURL as a}from"@gem-sdk/core";import{getDynamicSourceLocales as o,getSettingPreloadData as c}from"../../../helpers.js";import{checkDiscountContentProductBadge as n}from"./utils/common.js";import{generateBadgeContent as d}from"./utils/generateLiquidContent.js";import{renderBadgeInFirstTime as p}from"./utils/renderBadgeLiquid.js";import{createStyle as l,createClass as u,createAttr as m,createStateOrContext as g}from"@gem-sdk/system";import{IS_LIQUID as y}from"./constants.js";import{getContainerStyle as $,getSubWrapperStyle as v,getContentStyleInternal as f,getTextBadgeWrapperStyles as j,getTextContentStyle as P,getImageContainerStyles as D}from"./common/styles.js";import{getWrapperClasses as V,getSubWrapperClass as b,getTextContainerClasses as C,getTextWrapperClasses as S,getTextContentClasses as T,getImageContainerClasses as k,getImageClasses as q}from"./common/classes.js";import{getSubWrapperAttrs as E,getContainerAttrs as I,getTextContentAttrs as K,getImageAttr as _}from"./common/attrs.js";let ProductBadge=h=>{let{styles:A,setting:B,builderProps:L,pageContext:Q}=h,w=B?.shape!=="image",G=n(B?.displayContent),N=l({...$(h,y)}),x=u({...V(h)}),M=u({...b(h)}),O=l({...v(h)}),R=m({...E(h)}),Y=f(h),z=u({...C()}),F=m({...I(h)}),H=u({...S()}),J=l({...j({setting:B,styles:A})}),U=u({...T(A)}),W=l({...P({setting:B,styles:A})}),X=m({...K()}),Z=u({...k()}),ee=l({...D({setting:B,styles:A})}),et=u({...q()}),es=m({..._({setting:B})}),ei=g({minPrice:"{{ minPriceValue | replace: '\"', '\\\"' | escape }}",variantIDs:'{{  product.variants | map: "id" | json | escape }}',variantInventoryQuantities:'{{ product.variants | map: "inventory_quantity" | json | escape }}',amountDiscount:"{{amountDiscountValue | replace: '\"', '\\\"' | escape }}",percentDiscount:"{{percentDiscountValue}}",price:"{{price}}",displayTrigger:B?.displayTrigger,uid:h.builderProps?.uid,productCreatedAt:'{{product.created_at | date: "%Y-%m-%d" }}',productTags:'{{ product.tags | join: "," }}',isTextBadge:w}),{displayContent:er,translate:ea}=B??{},eo=o({val:er?.trim(),uid:L?.uid,settingId:"displayContent",isLiquid:!0,pageContext:Q,translate:ea});return e`
+import{template as e,dataStringify as s,sanitizeLiquid as t,RenderIf as i,isLocalEnv as r,baseAssetURL as a}from"@gem-sdk/core";import{getDynamicSourceLocales as c,getSettingPreloadData as o}from"../../../helpers.js";import{checkDiscountContentProductBadge as n}from"./utils/common.js";import{generateBadgeContent as p}from"./utils/generateLiquidContent.js";import{renderBadgeInFirstTime as d}from"./utils/renderBadgeLiquid.js";import{createStyle as l,createClass as u,createAttr as m,createStateOrContext as g}from"@gem-sdk/system";import{IS_LIQUID as y}from"./constants.js";import{getContainerStyle as $,getSubWrapperStyle as v,getContentStyleInternal as f,getTextBadgeWrapperStyles as j,getTextContentStyle as P,getImageContainerStyles as D}from"./common/styles.js";import{getWrapperClasses as V,getSubWrapperClass as S,getTextContainerClasses as b,getTextWrapperClasses as C,getTextContentClasses as T,getImageContainerClasses as k,getImageClasses as q}from"./common/classes.js";import{getSubWrapperAttrs as A,getContainerAttrs as E,getTextContentAttrs as I,getImageAttr as K}from"./common/attrs.js";let ProductBadge=N=>{let{styles:_,setting:h,builderProps:B,pageContext:L}=N,O=h?.shape!=="image",Q=n(h?.displayContent),w=l({...$(N,y)}),G=u({...V(N)}),J=u({...S(N)}),x=l({...v(N)}),M=m({...A(N)}),R=f(N),Y=u({...b()}),z=m({...E(N)}),F=u({...C()}),H=l({...j({setting:h,styles:_})}),U=u({...T(_)}),W=l({...P({setting:h,styles:_})}),X=m({...I()}),Z=u({...k()}),ee=l({...D({setting:h,styles:_})}),es=u({...q()}),et=m({...K({setting:h})}),ei=g({minPrice:"{{ minPriceValue | replace: '\"', '\\\"' | escape }}",variantIDs:'{{  product.variants | map: "id" | json | escape }}',variantInventoryQuantities:'{{ product.variants | map: "inventory_quantity" | json | escape }}',amountDiscount:"{{amountDiscountValue | replace: '\"', '\\\"' | escape }}",percentDiscount:"{{percentDiscountValue}}",price:"{{price}}",displayTrigger:JSON.parse(JSON.stringify(h?.displayTrigger).replaceAll("'","'")),uid:N.builderProps?.uid,productCreatedAt:'{{product.created_at | date: "%Y-%m-%d" }}',productTags:"{{ product.tags | join: \",\" | replace: '\"', '\\\"' | escape }}",isTextBadge:O}),{displayContent:er,translate:ea}=h??{},ec=c({val:er?.trim(),uid:B?.uid,settingId:"displayContent",isLiquid:!0,pageContext:L,translate:ea});return e`
     {% if product %}
-      ${d(eo,Q?.isPreviewing)}
-      ${p(B?.displayTrigger,G,w)}
+      ${p(ec,L?.isPreviewing)}
+      ${d(h?.displayTrigger,Q,O)}
       <gp-product-badge
-        ${{...F}}
-        gp-data='${t(ei)}'
+        ${{...z}}
+        gp-data='${s(ei)}'
         class="containerClass {{className}}"
-        style="${N}"
-        data-display-content="${Q?.isPreviewing?eo:s(`{{${eo}}}`)}"
+        style="${w}"
+        data-display-content="${L?.isPreviewing?ec:t(`{{${ec}}}`)}"
       >
-        <div class="${x}">
+        <div class="${G}">
           <div
-            ${{...R}}
-            class="${M}"
-            style="${O}"
+            ${{...M}}
+            class="${J}"
+            style="${x}"
           >
-            <style>${Y}</style>
-            ${i(w,e`
-                <div class="${z}">
+            <style>${R}</style>
+            ${i(O,e`
+                <div class="${Y}">
                   <div
-                    class="${H}"
-                    style="${J}"
+                    class="${F}"
+                    style="${H}"
                   >
                     <pre
                       ${{...X}}
@@ -29,11 +29,11 @@ import{template as e,dataStringify as t,sanitizeLiquid as s,RenderIf as i,isLoca
                     >{{ content | replace: percentDiscountKey, percentDiscountValue | replace: amountDiscountKey, amountDiscountValue | replace: inventoryQuantityKey, inventoryQuantityValue | replace: minPriceKey, minPriceValue }}</pre>
                   </div>
                 </div>`,e`<div class="${Z}" style="${ee}">
-                  <img ${{...es}} class="${et}" alt="" />
+                  <img ${{...et}} class="${es}" alt="" />
                 </div>`)}
           </div>
         </div>
       </gp-product-badge>
-       ${i(r,`<script ${c('class="gps-link" delay',"src")}="{{ 'gp-product-badge-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${c('class="gps-link" delay',"src")}="${a}/assets-v2/gp-product-badge-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+       ${i(r,`<script ${o('class="gps-link" delay',"src")}="{{ 'gp-product-badge-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${o('class="gps-link" delay',"src")}="${a}/assets-v2/gp-product-badge-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
     {% endif %}
   `};export{ProductBadge as default};

package/dist/esm/product/components/product-badge/utils/renderBadgeLiquid.js

@@ -127,8 +127,8 @@ import{CompareType as e}from"../types.js";let getMinValueForInventory=i=>i===e.A
         {% assign conditionTriggers = conditionTriggers | append: "," | append: false %}
       {% endif %}
 
-  `},checkProductTagCondition=e=>{let{searchTag:i}=e,n=i.join(", ");return`
-    {% assign productTags = product.tags %}
+  `},checkProductTagCondition=e=>{let{searchTag:i}=e,n=i.map(e=>e.replaceAll("'","'")).join(", ");return`
+    {% assign productTags = product.tags | escape %}
     {% assign searchTag = '${n}' %}
     {% for tag in productTags %}
       {% if searchTag contains tag %}

package/dist/esm/product/components/product-images-v2/components/gallery-grid/GalleryGrid.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as r,Fragment as e}from"react/jsx-runtime";import l from"../child/ProductGalleryGrid.js";let GalleryGrid=o=>{let{setting:i,styles:t,gallery:d,builderProps:n,noDataChildren:a,onHandleClickImage:c,children:m}=o,u={...i,...t};return(console.log("setting",i),d?.[0]?.id==="noImageError")?r(e,{children:a}):r(l,{productImages:d,enableHoverAction:!0,...u,builderPropUID:n?.uid,onHandleClick:(r,e)=>c(r||"",e),children:m})};export{GalleryGrid as default};
+import{jsx as r,Fragment as e}from"react/jsx-runtime";import l from"../child/ProductGalleryGrid.js";let GalleryGrid=i=>{let{setting:d,styles:o,gallery:t,builderProps:a,noDataChildren:n,onHandleClickImage:c,children:m}=i,u={...d,...o};return t?.[0]?.id==="noImageError"?r(e,{children:n}):r(l,{productImages:t,enableHoverAction:!0,...u,builderPropUID:a?.uid,onHandleClick:(r,e)=>c(r||"",e),children:m})};export{GalleryGrid as default};

package/dist/esm/product/components/product-images-v2/components/gallery-grid/GalleryGrid.liquid.js

@@ -1,12 +1,12 @@
-import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cls as t}from"@gem-sdk/core";import{Liquid as o,LiquidFor as s,LiquidIf as d,If as r}from"@gem-sdk/system";import l from"../../../../../image/components/Modal3d.liquid.js";import m from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import c from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as g}from"../../../../helpers/function.js";import{getAspectRatio as n,getSrcImage as u}from"../../common/common.js";import{getZoomImageClass as h,getZoomLenClass as y}from"../../common/productFeaturedImage.js";import{getShapeByLayout as C,getZoomDisplay as v}from"../../common/productGallery.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as w}from"../../composables/getProductImagesStyles.js";let ProductGalleryGrid=({builderPropUID:_,wrapperStyle:$,children:b,enableLazyLoadImage:L,...x})=>{let{galleryItemClasses:F,galleryGridWrapperClasses:V}=f(x),{galleryGridStyles:q,galleryGridItemStyles:I}=w(x),M=C({shape:x.shape,shapeForBottom:x.shapeForBottom,shapeFor1Col:x.shapeFor1Col,shapeFor2Col:x.shapeFor2Col,shapeForFtOnly:x.shapeForFtOnly,shapeForInsideBottom:x.shapeForInsideBottom,shapeForInside:x.shapeForInside},x.position),j=()=>{let i=["desktop","mobile","tablet"],t={desktop:"none",tablet:"none",mobile:"none"};return i.forEach(e=>{let i=a(x?.position,e);t={...t,[e]:"one-col"===i||"two-col"==i?"block":"none"}}),e("d",t)},k=(e,a)=>i`
-      ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",baseSrc:"{{media.preview_image | image_url}}",setting:e,style:a,className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:L})}
-      ${r(x?.galleryHoverEffect!=="none",`<div class="${t("zoom-element !gp-max-w-none gp-w-full gp-h-full",h())}">
-          ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",baseSrc:"{{media.preview_image | image_url}}",alt:"{{media.alt | escape}}",setting:e,style:a,className:"!gp-rounded-none gp-w-full gp-h-full",customLazyload:!1,enableLazyLoadImage:L})}
+import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cls as t}from"@gem-sdk/core";import{Liquid as o,LiquidFor as s,LiquidIf as d,If as r}from"@gem-sdk/system";import l from"../../../../../image/components/Modal3d.liquid.js";import m from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import g from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getAspectRatio as n,getSrcImage as u}from"../../common/common.js";import{getZoomImageClass as h,getZoomLenClass as y}from"../../common/productFeaturedImage.js";import{getShapeByLayout as C,getZoomDisplay as v}from"../../common/productGallery.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as w}from"../../composables/getProductImagesStyles.js";let ProductGalleryGrid=({builderPropUID:_,wrapperStyle:$,children:b,enableLazyLoadImage:x,...L})=>{let{galleryItemClasses:F,galleryGridWrapperClasses:V}=f(L),{galleryGridStyles:q,galleryGridItemStyles:I}=w(L),M=C({shape:L.shape,shapeForBottom:L.shapeForBottom,shapeFor1Col:L.shapeFor1Col,shapeFor2Col:L.shapeFor2Col,shapeForFtOnly:L.shapeForFtOnly,shapeForInsideBottom:L.shapeForInsideBottom,shapeForInside:L.shapeForInside},L.position),j=(i=!1)=>{let t=["desktop","mobile","tablet"],o={desktop:"none",tablet:"none",mobile:"none"};return t.forEach(e=>{let t=a(L?.position,e)||"",s="one-col"===t||"two-col"===t,d=i?!s:s;o[e]=d?"block":"none"}),e("d",o)},k=()=>j(),S=()=>j(!0),Z=(e,a)=>i`
+      ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",baseSrc:"{{media.preview_image | image_url}}",setting:e,style:a,className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}
+      ${r(L?.galleryHoverEffect!=="none",`<div class="${t("zoom-element !gp-max-w-none gp-w-full gp-h-full",h())}">
+          ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",baseSrc:"{{media.preview_image | image_url}}",alt:"{{media.alt | escape}}",setting:e,style:a,className:"!gp-rounded-none gp-w-full gp-h-full",customLazyload:!1,enableLazyLoadImage:x})}
           </div>`," ")}
-      ${r(x?.galleryHoverEffect=="zoom"&&x?.galleryZoomType=="glasses",`<div class="${t("zoom-lens-element",y())}" style="opacity: 0; background-image: url('{{media.preview_image | product_img_url: '1024x1024'}}')">
+      ${r(L?.galleryHoverEffect=="zoom"&&L?.galleryZoomType=="glasses",`<div class="${t("zoom-lens-element",y())}" style="opacity: 0; background-image: url('{{media.preview_image | product_img_url: '1024x1024'}}')">
             </div>
           `," ")}
-    `,S=()=>l({src:d("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:n(M)}),Z=()=>p({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),z=()=>c({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),B=()=>i`
+    `,z=()=>l({src:d("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:n(M)}),B=()=>p({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),H=()=>g({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),P=()=>i`
       ${d("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"/>
@@ -19,10 +19,10 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
             <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>`)}
-      ${k({aspectRatio:n(M),layout:x?.layout,qualityType:x?.qualityType,qualityPercent:x?.qualityPercent},{width:"100%",height:"100%"})}
+      ${Z({aspectRatio:n(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},{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="${g(v(x?.clickOpenLightBox))}" >
+        style="${c(v(L?.clickOpenLightBox))}" >
         <svg
           height="100%"
           width="100%"
@@ -39,7 +39,7 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
           />
         </svg>
       </div>
-    `,H=i=>`
+    `,N=i=>`
     ${d("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
     ${d("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}{% assign mediaSource = media | json %}")}
     ${d("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}
@@ -54,36 +54,40 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
       grid-index="{{forloop.index}}"
       data-outline="${i?"active":"deactive"}"
       class="${F(`gem-slider-item-${_}-{{product.id}} gp-gallery-image-item ${i}`)}"
-      style="${g(I)}"
+      style="${c(I)}"
       >
-      <div class="gp-h-full gp-w-full" style="${d("media == null or media.media_type == 'image'","display: block !important;")}">
-        ${d("media != null",B(),P())}
+      ${d("media.media_type == 'external_video' or media.media_type == 'video' or media.media_type == 'model'","{% assign isMedia = true %}")}
+
+      ${d("media.media_type == 'external_video' or media.media_type == 'video'","{% assign isVideo = true %}")}
+
+      <div class="gp-h-full gp-w-full" style="${d("media == null or media.media_type == 'image'","display: block !important;")} ${d("isVideo == true",c({...S()}))}">
+        ${d("media != null",P(),T())}
       </div>
 
-      {% assign isMedia= false %}
-      ${d("media.media_type == 'external_video' or media.media_type == 'video' or media.media_type == 'model'","{% assign isMedia = true %}")}
       <div class="${d("isMedia","gp-flex gp-justify-center gp-items-center")}"
-      style="${d("isMedia",g({...e("aspect",n(M))}))} ${g({...j()})}"
+      style="${d("isMedia",c({...e("aspect",n(M))}))} ${c({...k()})}"
       >
         {% case media.media_type %}
           {% when 'external_video' %}
             {% assign mediaSourceVideo = media | external_video_url %}
-            ${Z()}
+            ${B()}
           {% when 'video' %}
             {% assign mediaSourceVideo = media.sources.last.url %}
-            ${z()}
+            ${H()}
           {% when 'model' %}
-            ${S()}
+            ${z()}
         {% endcase %}
       </div>
-    </div>`,P=()=>i`
-    ${m({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{aspectRatio:n(M),layout:x?.layout,qualityType:x?.qualityType,qualityPercent:x?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:L})}`;return o(`
+      {% assign isVideo= false %}
+      {% assign isMedia= false %}
+    </div>`,T=()=>i`
+    ${m({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{aspectRatio:n(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}`;return o(`
   <div type="grid-gallery"
     class="${V}"
-    style="${g(q)}}"
+    style="${c(q)}}"
   >
     ${s("media in product.media",`${d("media.media_type == 'image'",s("image in product.images",d("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
-      ${d("media.id == product.featured_media.id ",H(x?.borderActive?.border!=="none"?"active":""),H())}`)}
+      ${d("media.id == product.featured_media.id ",N(L?.borderActive?.border!=="none"?"active":""),N())}`)}
     ${d("product.media.size > 0",b)}
-    ${d("product.media.size < 1",H())}
+    ${d("product.media.size < 1",N())}
   </div>`)};export{ProductGalleryGrid as default};

package/package.json

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