@gem-sdk/components 4.0.0-staging.1240 → 4.0.0-staging.1242

package/dist/cjs/countdown-timer/common/classes.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core");function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}const getContentClasses=()=>({...composeClasses("gp-flex gp-flex-wrap gp-w-max gp-relative")}),getWrapperClasses=e=>{let s="gp-flex";return e&&(s+=` ${e}`),{...composeClasses(s)}},getDateClasses=e=>{let s="gp-flex-1 gp-text-center gp-min-w-max !gp-max-w-max";return e||(s+=" gp-content-center"),{...composeClasses(s)}},getTextFrontClasses=e=>{let s="gp-countdown-number",{colorNumber:t}=e||{};return core.getGlobalColorClass("text",t)&&(s+=` ${core.getGlobalColorClass("text",t)}`),{...composeClasses(s)}},getTextBackClasses=(e,s)=>{let t="",{colorLabel:l}=e||{};return core.getGlobalColorClass("text",l)&&(t+=` ${core.getGlobalColorClass("text",l)}`),s||(t+=" gp-hidden"),{...composeClasses(t)}},getLinkClasses=()=>({...composeClasses("gp-absolute gp-inset-0 gp-z-1 gp-pointer-events-none")}),getTextExpireClasses=()=>({...composeClasses("gp-flex gp-h-12 gp-items-center gp-justify-center gp-bg-[#d6d6d6] gp-opacity-70")});exports.getContentClasses=getContentClasses,exports.getDateClasses=getDateClasses,exports.getLinkClasses=getLinkClasses,exports.getTextBackClasses=getTextBackClasses,exports.getTextExpireClasses=getTextExpireClasses,exports.getTextFrontClasses=getTextFrontClasses,exports.getWrapperClasses=getWrapperClasses;
+"use strict";var core=require("@gem-sdk/core");function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}const getContentClasses=({isLiquid:e,autoHideWhenTimeout:s})=>{let t="gp-flex gp-flex-wrap gp-w-max gp-relative ";return e&&s&&(t+=" !gp-hidden"),{...composeClasses(t)}},getWrapperClasses=e=>{let s="gp-flex";return e&&(s+=` ${e}`),{...composeClasses(s)}},getDateClasses=e=>{let s="gp-flex-1 gp-text-center gp-min-w-max !gp-max-w-max";return e||(s+=" gp-content-center"),{...composeClasses(s)}},getTextFrontClasses=e=>{let s="gp-countdown-number",{colorNumber:t}=e||{};return core.getGlobalColorClass("text",t)&&(s+=` ${core.getGlobalColorClass("text",t)}`),{...composeClasses(s)}},getTextBackClasses=(e,s)=>{let t="",{colorLabel:l}=e||{};return core.getGlobalColorClass("text",l)&&(t+=` ${core.getGlobalColorClass("text",l)}`),s||(t+=" gp-hidden"),{...composeClasses(t)}},getLinkClasses=()=>({...composeClasses("gp-absolute gp-inset-0 gp-z-1 gp-pointer-events-none")}),getTextExpireClasses=()=>({...composeClasses("gp-flex gp-h-12 gp-items-center gp-justify-center gp-bg-[#d6d6d6] gp-opacity-70")});exports.getContentClasses=getContentClasses,exports.getDateClasses=getDateClasses,exports.getLinkClasses=getLinkClasses,exports.getTextBackClasses=getTextBackClasses,exports.getTextExpireClasses=getTextExpireClasses,exports.getTextFrontClasses=getTextFrontClasses,exports.getWrapperClasses=getWrapperClasses;

package/dist/cjs/countdown-timer/components/Countdown.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),helpers=require("../common/helpers.js"),Text=require("../../text/components/Text.js"),core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),useCountDownTimer=require("../hooks/useCountDownTimer.js");const Countdown=e=>{let{setting:s,styles:t,builderProps:l,advanced:a}=e,{labelTypo:r,numTypo:i,labelTypography:m,numTypography:n,enableLabelTextStyle:y}=t??{},{weekLabel:c,dayLabel:o,hourLabel:u,minuteLabel:d,secondLabel:x,enableWeek:j,enableDay:C,enableHour:g,enableMinute:p,enableSecond:h,redirectUrl:f}=s??{},T=core.useEditorMode(),{week:S,day:k,hour:q,minute:R,second:v,timeLeft:w,ref:I}=useCountDownTimer.default(s,l),N=!!f?.link&&"edit"!==T,b=system.createClass({...classes.getTextExpireClasses()});if(s?.autoHideWhenTimeout&&w<=0)return"edit"!==T?null:jsxRuntime.jsx("div",{className:b,children:jsxRuntime.jsx("span",{children:"Countdown is run out of time (this only visible in the editor)"})});let D=system.createAttr({...attrs.getAttr({uid:l?.uid||""})}),E=system.createStyle({...styles.getWrapperStyle(t)}),F=system.createClass({...classes.getWrapperClasses(a?.cssClass)}),W=system.createClass({...classes.getContentClasses()}),A=system.createStyle({...styles.getContainStyle(t)}),B=system.createStyle({...styles.getDateStyle(t)}),M=e=>system.createClass({...classes.getDateClasses(e)}),_=system.createClass({...classes.getTextFrontClasses(t)}),H=system.createStyle({...styles.getTextFrontStyle(t)}),L=system.createStyle({...styles.getTextBackStyle(t)}),O=e=>system.createClass({...classes.getTextBackClasses(t,e)}),P=system.createClass({...classes.getLinkClasses()}),z=(e,s)=>{let t=helpers.formatTime(e);return jsxRuntime.jsxs("div",{style:B,className:M(s),children:[jsxRuntime.jsx(Text.default,{styles:{typography:n,typo:i},setting:{htmlTag:"div",text:t,excludeFlex:!0},className:_,style:H,disableEdit:!0}),system.If(!!y,jsxRuntime.jsx(Text.default,{styles:{typography:m,typo:r},setting:{text:s,htmlTag:"p",excludeFlex:!0},style:L,className:O(s),disableEdit:!0}))]})};return jsxRuntime.jsx("div",{ref:I,...D,className:F,style:E,children:jsxRuntime.jsxs("div",{className:W,style:A,children:[system.If(N,jsxRuntime.jsx("a",{href:f?.link,target:f?.target,"aria-label":"Countdown link",className:P,children:" "})),system.If(j,z(S,c)),system.If(C,z(k,o)),system.If(g,z(q,u)),system.If(p,z(R,d)),system.If(h,z(v,x))]})})};exports.default=Countdown;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),helpers=require("../common/helpers.js"),Text=require("../../text/components/Text.js"),core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),useCountDownTimer=require("../hooks/useCountDownTimer.js");const Countdown=e=>{let{setting:s,styles:t,builderProps:l,advanced:a}=e,{labelTypo:r,numTypo:i,labelTypography:m,numTypography:n,enableLabelTextStyle:y}=t??{},{weekLabel:c,dayLabel:o,hourLabel:u,minuteLabel:d,secondLabel:x,enableWeek:j,enableDay:C,enableHour:g,enableMinute:p,enableSecond:h,redirectUrl:f,autoHideWhenTimeout:T}=s??{},q=core.useEditorMode(),{week:S,day:k,hour:R,minute:v,second:w,timeLeft:I,ref:N}=useCountDownTimer.default(s,l),b=!!f?.link&&"edit"!==q,D=system.createClass({...classes.getTextExpireClasses()});if(s?.autoHideWhenTimeout&&I<=0)return"edit"!==q?null:jsxRuntime.jsx("div",{className:D,children:jsxRuntime.jsx("span",{children:"Countdown is run out of time (this only visible in the editor)"})});let E=system.createAttr({...attrs.getAttr({uid:l?.uid||""})}),F=system.createStyle({...styles.getWrapperStyle(t)}),W=system.createClass({...classes.getWrapperClasses(a?.cssClass)}),A=system.createClass({...classes.getContentClasses({isLiquid:!1,autoHideWhenTimeout:T})}),B=system.createStyle({...styles.getContainStyle(t)}),L=system.createStyle({...styles.getDateStyle(t)}),M=e=>system.createClass({...classes.getDateClasses(e)}),_=system.createClass({...classes.getTextFrontClasses(t)}),H=system.createStyle({...styles.getTextFrontStyle(t)}),O=system.createStyle({...styles.getTextBackStyle(t)}),P=e=>system.createClass({...classes.getTextBackClasses(t,e)}),z=system.createClass({...classes.getLinkClasses()}),G=(e,s)=>{let t=helpers.formatTime(e);return jsxRuntime.jsxs("div",{style:L,className:M(s),children:[jsxRuntime.jsx(Text.default,{styles:{typography:n,typo:i},setting:{htmlTag:"div",text:t,excludeFlex:!0},className:_,style:H,disableEdit:!0}),system.If(!!y,jsxRuntime.jsx(Text.default,{styles:{typography:m,typo:r},setting:{text:s,htmlTag:"p",excludeFlex:!0},style:O,className:P(s),disableEdit:!0}))]})};return jsxRuntime.jsx("div",{ref:N,...E,className:W,style:F,children:jsxRuntime.jsxs("div",{className:A,style:B,children:[system.If(b,jsxRuntime.jsx("a",{href:f?.link,target:f?.target,"aria-label":"Countdown link",className:z,children:" "})),system.If(j,G(S,c)),system.If(C,G(k,o)),system.If(g,G(R,u)),system.If(p,G(v,d)),system.If(h,G(w,x))]})})};exports.default=Countdown;

package/dist/cjs/countdown-timer/components/Countdown.liquid.js

@@ -1,39 +1,30 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../text/components/Text.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers$1=require("../common/helpers.js");const Countdown=e=>{let{setting:t,styles:s,builderProps:a,advanced:r,pageContext:l}=e,{labelTypo:i,numTypo:n,numTypography:d,labelTypography:o,enableLabelTextStyle:c}=s??{},{weekLabel:y,dayLabel:u,hourLabel:m,minuteLabel:p,secondLabel:g,enableWeek:$,enableDay:f,enableHour:S,enableMinute:C,enableSecond:h,redirectUrl:x,translate:q}=t??{},w=!!x?.link,{urlData:b}=helpers.getInsertLinkData("",x),k=system.createStateOrContext({...t,...a}),v=system.createStyle({...styles.getDateStyle(s)}),I=e=>system.createClass({...classes.getDateClasses(e)}),T=system.createClass({...classes.getTextFrontClasses(s)}),j=system.createStyle({...styles.getTextFrontStyle(s)}),A=system.createStyle({...styles.getTextBackStyle(s)}),E=e=>system.createClass({...classes.getTextBackClasses(s,e)}),L=system.createAttr({...attrs.getAttr({uid:a?.uid||""})}),_=system.createAttr({...attrs.getAttrHref({uid:b.href||""})}),D=system.createStyle({...styles.getWrapperStyle(s)}),P=system.createClass({...classes.getWrapperClasses(r?.cssClass)}),W=system.createClass({...classes.getContentClasses()}),F=system.createStyle({...styles.getContainStyle(s)}),H=(e,s,r)=>core.template`
-    <div style="${v}" class="${I(s)}">
-    ${Text_liquid.default({styles:{typography:d,typo:n},setting:{...t,text:"00",excludeFlex:!0,translate:""},style:j,className:T,builderAttrs:{id:e},builderProps:{...a,uid:a?.uid,uidInteraction:`${a?.uid}-text`}})}
-    ${system.If(!!c,core.template`
-         ${Text_liquid.default({styles:{typography:o,typo:i},setting:{...t,text:s,excludeFlex:!0,translate:r},style:A,className:E(s),builderProps:{...a,uid:a?.uid,uidInteraction:`${a?.uid}-text`},pageContext:l})}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../text/components/Text.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const Countdown=e=>{let{setting:s,styles:t,builderProps:a,advanced:r,pageContext:l}=e,{labelTypo:c,numTypo:i,numTypography:y,labelTypography:o,enableLabelTextStyle:d}=t??{},{weekLabel:n,dayLabel:u,hourLabel:m,minuteLabel:p,secondLabel:g,enableWeek:$,enableDay:f,enableHour:x,enableMinute:C,enableSecond:S,redirectUrl:h,translate:k,autoHideWhenTimeout:q}=s??{},I=!!h?.link,{urlData:b}=helpers.getInsertLinkData("",h),v=system.createStateOrContext({...s,...a}),w=system.createStyle({...styles.getDateStyle(t)}),L=e=>system.createClass({...classes.getDateClasses(e)}),A=system.createClass({...classes.getTextFrontClasses(t)}),T=system.createStyle({...styles.getTextFrontStyle(t)}),j=system.createStyle({...styles.getTextBackStyle(t)}),_=e=>system.createClass({...classes.getTextBackClasses(t,e)}),P=system.createAttr({...attrs.getAttr({uid:a?.uid||""})}),D=system.createAttr({...attrs.getAttrHref({uid:b.href||""})}),E=system.createStyle({...styles.getWrapperStyle(t)}),F=system.createClass({...classes.getWrapperClasses(r?.cssClass)}),N=system.createClass({...classes.getContentClasses({isLiquid:!0,autoHideWhenTimeout:q})}),O=system.createStyle({...styles.getContainStyle(t)}),R=(e,t,r)=>core.template`
+    <div style="${w}" class="${L(t)}">
+    ${Text_liquid.default({styles:{typography:y,typo:i},setting:{...s,text:"00",excludeFlex:!0,translate:""},style:T,className:A,builderAttrs:{id:e},builderProps:{...a,uid:a?.uid,uidInteraction:`${a?.uid}-text`}})}
+    ${system.If(!!d,core.template`
+         ${Text_liquid.default({styles:{typography:o,typo:c},setting:{...s,text:t,excludeFlex:!0,translate:r},style:j,className:_(t),builderProps:{...a,uid:a?.uid,uidInteraction:`${a?.uid}-text`},pageContext:l})}
     `)}
     </div>
-    `,N=system.createClass({...classes.getLinkClasses()}),O=helpers$1.getStandardEndtime(t?.dateStandard,t?.timeZone),R=()=>core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-countdown-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-countdown-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return core.template`
-    {%- liquid
-      assign standardEndDate = ${O}
-      assign typeCountdown = "${t?.behaviour.toString()||""}"
-      assign autoHideWhenTimeout = ${!!t?.autoHideWhenTimeout}
-      assign current_time = 'now' | date: '%s' | times: 1000
-
-    -%}
-   {% if standardEndDate == nil or current_time <= standardEndDate or typeCountdown != "standard" or autoHideWhenTimeout != true %}
-      <gp-countdown-timer
-        ${{...L}}
-        ${{..._}}
-        class="${P}"
-        style="${D}"
-        gp-data='${JSON.stringify(k).replaceAll("'","&#039;")}'>
-        <div id="section-countdown" class="${W}" style="${F}">
-          ${system.If(w,`<a
+    `,B=system.createClass({...classes.getLinkClasses()}),G=()=>core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-countdown-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-countdown-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return core.template`
+    <gp-countdown-timer
+        ${{...P}}
+        ${{...D}}
+        class="${F}"
+        style="${E}"
+        gp-data='${JSON.stringify(v).replaceAll("'","&#039;")}'>
+        <div id="section-countdown" class="${N}" style="${O}">
+          ${system.If(I,`<a
               href="${b.href}"
               target="${b?.target}"
               aria-label="Countdown link"
-              class="${N}"
+              class="${B}"
             > </a>`)}
-          ${system.If($,H("week",y,q?"weekLabel":""))}
-          ${system.If(f,H("day",u,q?"dayLabel":""))}
-          ${system.If(S,H("hour",m,q?"hourLabel":""))}
-          ${system.If(C,H("minute",p,q?"minuteLabel":""))}
-          ${system.If(h,H("second",g,q?"secondLabel":""))}
+          ${system.If($,R("week",n,k?"weekLabel":""))}
+          ${system.If(f,R("day",u,k?"dayLabel":""))}
+          ${system.If(x,R("hour",m,k?"hourLabel":""))}
+          ${system.If(C,R("minute",p,k?"minuteLabel":""))}
+          ${system.If(S,R("second",g,k?"secondLabel":""))}
         </div>
      </gp-countdown-timer>
-    {% endif %}
-    ${R()}
+    ${G()}
   `};exports.default=Countdown;

package/dist/cjs/product/components/product-images-v3/ProductImageV3.js

@@ -1,5 +1,5 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),common=require("./common/common.js"),core=require("@gem-sdk/core"),React=require("react"),FeatureImageWithGallery=require("./components/feature-gallery/FeatureImageWithGallery.js"),OnlyFeatureImage=require("./components/feature-only/OnlyFeatureImage.js"),ProductImagesLightBox=require("./components/lightbox/ProductImagesLightBox.js"),NoDataState=require("../../../common/components/NoDataState.js"),getProductImagesClassName=require("./composables/getProductImagesClassName.js"),getBorderActiveCss=require("./common/getBorderActiveCss.js"),GalleryGrid=require("./components/gallery-grid/GalleryGrid.js");const 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"],ProductImagesV3=e=>{let t=React.useMemo(()=>common.setDefaultWhenUndefineSetting(e),[e]),{redirectProductShopifyLink:a}=core.useProductShopifyEditLink(),{setting:i,styles:l,builderProps:o,builderAttrs:r,style:s,children:C}=t,n=core.useProduct(),d=core.useCurrentDevice(),c=core.useCurrentVariant(),{isChangeSelectedOption:u}=core.useSelectedOption(),m=core.useEditorMode(),p=core.useProductStore(e=>e.setProductFeaturedImage),[g,f]=React.useState(!1),h=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,y=e=>e?.featuredImage,I=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,M=React.useMemo(()=>i?.typeDisplay==="all-images"&&!u,[u,i?.typeDisplay]),D=React.useMemo(()=>{if(M){let e;switch(i?.preDisplay){case"1st-images":e=y(n);break;case"1st-3d-mode":e=I(n);break;case"1st-video":e=h(n);break;case"1st-available-variant":e=c?.media}return p(e),e}},[M,i?.preDisplay,p,n,c?.media]),R=React.useMemo(()=>i?.filterByVariant==="selected_variant",[i?.filterByVariant]),x=React.useMemo(()=>{let e=getProductGallery(n);if(!e?.length)return[{id:n?.featuredImage?.id||"noImageError",src:n?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:n?.featuredImage?.width||480,height:n?.featuredImage?.height||480}];if(!R||!c?.selectedOptions?.length)return e;let t=c.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),a=t.join("-"),i=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),l=e?.filter(e=>{if(!e?.alt)return!1;let t=i(e.alt),l=i(a),o="all-variants"===t,r=t===l||t.includes(l);return o||r});return l?.length>0?l:e},[c?.selectedOptions,R,n]),b=React.useMemo(()=>x.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[x]),v=React.useMemo(()=>core.getResponsiveValueByScreen(l?.position,d),[d,l?.position]),j=(e,t)=>{V(e),t&&E()},E=()=>{f(!0)},V=e=>{if(!e)return;let t=b[e];if(void 0!==t){let e=x[t];e&&p(e)}};React.useEffect(()=>{if(c&&!M){let e=b[c?.mediaId];if(void 0!==e){let t=x[e]??n?.featuredImage;t&&p(t)}}},[c,b,x,n?.featuredImage,p,M]);let L=React.useMemo(()=>{let e="popup"===core.getResponsiveValueByScreen(i?.ftClickOpenLightBox,d)||core.getResponsiveValueByScreen(i?.clickOpenLightBox,d);return e||"edit"!==m||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[i?.ftClickOpenLightBox,i?.clickOpenLightBox,d,m]),P=()=>x.length>0?React.Children.map(core.filterToolbarPreview(C),e=>React.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,isInsideProductImage:!0,navigationPosition:i?.ftNavigationPosition,imageData:{imageShape:l?.ftShape,imageAlign:l?.align,imageLayout:l?.position},dotData:{dotSize:i?.ftDotSize,dotGapToCarousel:i?.ftDotGapToCarousel,dotStyle:i?.ftDotStyle}}):null):null,w=`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),common=require("./common/common.js"),core=require("@gem-sdk/core"),React=require("react"),FeatureImageWithGallery=require("./components/feature-gallery/FeatureImageWithGallery.js"),OnlyFeatureImage=require("./components/feature-only/OnlyFeatureImage.js"),ProductImagesLightBox=require("./components/lightbox/ProductImagesLightBox.js"),NoDataState=require("../../../common/components/NoDataState.js"),getProductImagesClassName=require("./composables/getProductImagesClassName.js"),getBorderActiveCss=require("./common/getBorderActiveCss.js"),GalleryGrid=require("./components/gallery-grid/GalleryGrid.js");const 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"],ProductImagesV3=e=>{let t=React.useMemo(()=>common.setDefaultWhenUndefineSetting(e),[e]),{redirectProductShopifyLink:a}=core.useProductShopifyEditLink(),{setting:i,styles:l,builderProps:r,builderAttrs:o,style:s,children:C}=t,n=core.useProduct(),d=core.useCurrentDevice(),c=core.useCurrentVariant(),{isChangeSelectedOption:u}=core.useSelectedOption(),m=core.useEditorMode(),p=core.useProductStore(e=>e.setProductFeaturedImage),[g,f]=React.useState(!1),h=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,y=e=>e?.featuredImage,I=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,M=React.useMemo(()=>i?.typeDisplay==="all-images"&&!u,[u,i?.typeDisplay]),D=React.useMemo(()=>{if(M){let e;switch(i?.preDisplay){case"1st-images":e=y(n);break;case"1st-3d-mode":e=I(n);break;case"1st-video":e=h(n);break;case"1st-available-variant":e=c?.media}return p(e),e}},[M,i?.preDisplay,p,n,c?.media]),R=React.useMemo(()=>i?.filterByVariant==="selected_variant",[i?.filterByVariant]),b=React.useMemo(()=>{let e=getProductGallery(n);if(!e?.length)return[{id:n?.featuredImage?.id||"noImageError",src:n?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:n?.featuredImage?.width||480,height:n?.featuredImage?.height||480}];if(!R||!c?.selectedOptions?.length)return e;let t=c.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),a=t.join("-"),i=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),l=e?.filter(e=>{if(!e?.alt)return!1;let t=i(e.alt),l=i(a),r="all-variants"===t,o=t===l||t.includes(l);return r||o});return l?.length>0?l:e},[c?.selectedOptions,R,n]),x=React.useMemo(()=>b.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[b]),v=React.useMemo(()=>core.getResponsiveValueByScreen(l?.position,d),[d,l?.position]),E=(e,t)=>{V(e),t&&j()},j=()=>{f(!0)},V=e=>{if(!e)return;let t=x[e];if(void 0!==t){let e=b[t];e&&p(e)}};React.useEffect(()=>{if(c&&!M){let e=x[c?.mediaId];if(void 0!==e){let t=b[e]??n?.featuredImage;t&&p(t)}}},[c,x,b,n?.featuredImage,p,M]);let L=React.useMemo(()=>{let e="popup"===core.getResponsiveValueByScreen(i?.ftClickOpenLightBox,d)||core.getResponsiveValueByScreen(i?.clickOpenLightBox,d);return e||"edit"!==m||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[i?.ftClickOpenLightBox,i?.clickOpenLightBox,d,m]),P=()=>b.length>0?React.Children.map(core.filterToolbarPreview(C),e=>React.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,isInsideProductImage:!0,navigationPosition:i?.ftNavigationPosition,imageData:{imageShape:l?.ftShape,imageAlign:l?.align,imageLayout:l?.position},dotData:{dotSize:i?.ftDotSize,dotGapToCarousel:i?.ftDotGapToCarousel,dotStyle:i?.ftDotStyle}}):null):null,w=`
       <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"/>
@@ -23,4 +23,4 @@
         <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>
-    `,Z=jsxRuntime.jsx(NoDataState.default,{elementType:"secondary",description:"Catch your customer's attention with attracted media.",descriptionActions:[{text:"Add image",callback:a},{text:"sync data",callback:"syncProduct"}],additionalMedia:w}),{wrapperClasses:k}=getProductImagesClassName.getProductImagesClassName(e);return jsxRuntime.jsxs("div",{...r,className:k,style:s,children:[jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:getBorderActiveCss.getBorderActiveCss({settings:{...i,...l},uid:o?.uid,type:"React"})}}),LAYOUT_FEATURE_IMAGE_GALLERY.includes(v)&&jsxRuntime.jsx(FeatureImageWithGallery.default,{...t,isFilterByVariantEnabled:R,gallery:x,priorityFeatureImage:D,onHandleClickImage:(e,t)=>j(e||"",t),noDataChildren:Z,children:P()}),"only-feature"===v&&jsxRuntime.jsx(OnlyFeatureImage.default,{gallery:x,...t,onHandleClickImage:(e,t)=>j(e||"",t),noDataChildren:Z,children:P()}),["one-col","two-col"].includes(v)&&jsxRuntime.jsx(GalleryGrid.default,{gallery:x,...t,onHandleClickImage:(e,t)=>j(e||"",t),noDataChildren:Z,children:P()}),L&&jsxRuntime.jsx(ProductImagesLightBox.default,{productImages:x,builderPropUID:o?.uid,open:g,onHandleClose:()=>f(!1),imageRatio:common.getAspectRatio(l?.ftShape)}),core.filterToolbarPreview(C,!0)]})};exports.default=ProductImagesV3;
+    `,Z=jsxRuntime.jsx(NoDataState.default,{elementType:"secondary",description:"Catch your customer's attention with attracted media.",descriptionActions:[{text:"Add image",callback:a},{text:"sync data",callback:"syncProduct"}],additionalMedia:w}),{wrapperClasses:k}=getProductImagesClassName.getProductImagesClassName(e);return jsxRuntime.jsxs("div",{...o,className:k,style:s,children:[jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:getBorderActiveCss.getBorderActiveCss({settings:{...i,...l},uid:r?.uid,type:"React"})}}),LAYOUT_FEATURE_IMAGE_GALLERY.includes(v)&&jsxRuntime.jsx(FeatureImageWithGallery.default,{...t,isFilterByVariantEnabled:R,gallery:b,priorityFeatureImage:D,onHandleClickImage:(e,t)=>E(e||"",t),noDataChildren:Z,children:P()}),"only-feature"===v&&jsxRuntime.jsx(OnlyFeatureImage.default,{gallery:b,...t,onHandleClickImage:(e,t)=>E(e||"",t),noDataChildren:Z,isFilterByVariantEnabled:R,children:P()}),["one-col","two-col"].includes(v)&&jsxRuntime.jsx(GalleryGrid.default,{gallery:b,...t,onHandleClickImage:(e,t)=>E(e||"",t),noDataChildren:Z,children:P()}),L&&jsxRuntime.jsx(ProductImagesLightBox.default,{productImages:b,builderPropUID:r?.uid,open:g,onHandleClose:()=>f(!1),imageRatio:common.getAspectRatio(l?.ftShape)}),core.filterToolbarPreview(C,!0)]})};exports.default=ProductImagesV3;

package/dist/cjs/product/components/product-images-v3/components/child/ProductFeaturedImageCarousel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),hoverAction=require("../../common/hoverAction.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),styles=require("../../common/styles.js"),Carousel=require("../../../../../carousel-v3/components/root/Carousel.js"),CarouselItem=require("../../../../../carousel-v3/components/item/CarouselItem.js"),ProductFeaturedImageOnly=require("./ProductFeaturedImageOnly.js"),useProductFeaturedImageCarousel=require("../../hooks/useProductFeaturedImageCarousel.js");const ProductFeaturedImageCarousel=React.forwardRef((e,t)=>{let{productImages:r,imgRef:s,onHandleClick:a,onClickArrow:o,onHandleLoaded:u,onHandleUpdateActiveIndex:l,swiperUpdateTrigger:i,builderPropUID:d,builderPropsClass:n,parentUid:c,...m}=e,g=React.useRef(null),{ref:I,imageActive:p,imageActiveIndex:h,imageShowWhenHover:j,enableOpenLightBox:v,filteredProductImages:y,isRenderFeatureCarousel:C,genRandomKey:P,getAspectRatioFinal:x,emitUpdateActiveIndex:f}=useProductFeaturedImageCarousel.useProductFeaturedImageCarousel(e);React.useImperativeHandle(t,()=>({getSwiper:()=>g.current?.getSwiper()||null}));let R=core.useCurrentDevice(),{galleryItemClasses:A,featureImageOnlyOneImageClasses:M}=getProductImagesClassName.getProductImagesClassName(m),{featuredImageCarouselStyle:S,featureImageCarouselItemStyle:q}=getProductImagesStyles.getProductImagesStyles(m),F=system.createStyle({...styles.getFeaturedImageOnlyOneImageStyle({setting:m,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:O}=getProductImagesAttr.getProductImagesAttr(m);return jsxRuntime.jsx("div",{ref:I,"data-slot":"children",className:"product-feature-image",children:C?jsxRuntime.jsx(Carousel.default,{ref:g,parentClass:n,elmRef:s,setting:O,styles:S,builderProps:{uid:d},isHiddenArrowWhenDisabled:!0,onLoaded:e=>u&&u(e),onChangeActive:e=>f(e),onClickArrow:()=>o&&o(P()),moveToIdx:h,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${d}-carousel`,onHandleChangeSlideByInteraction:e=>{let t=y?.length??0,r=e>=t?0:e;a(y?.[r]?.id??"",v)},children:y?.map(e=>jsxRuntime.jsx(CarouselItem.default,{contentType:"productImage",className:A("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let t=core.getResponsiveValueByScreen(m?.ftClickOpenLightBox,R);"none"!==t&&a(e?.id??"",v)},style:q,onMouseMove:e=>hoverAction.handleMouseMove(e,m),onMouseOut:e=>hoverAction.handleMouseOut(e),children:jsxRuntime.jsx(ProductFeaturedImageOnly.default,{image:e,imageShowWhenHover:j,setting:m,aspectRatio:x()})},e?.id))}):jsxRuntime.jsx("div",{ref:s,className:"gp-flex gp-w-full",style:{...core.makeStyleResponsive("jc",m?.align)},"data-id":d,children:jsxRuntime.jsx("div",{"aria-hidden":"true",className:M,style:F,onMouseMove:e=>hoverAction.handleMouseMove(e,m),onMouseOut:e=>hoverAction.handleMouseOut(e),onBlur:()=>void 0,onClick:()=>{a(p?.id??"",v)},children:jsxRuntime.jsx(ProductFeaturedImageOnly.default,{image:p,imageShowWhenHover:j,setting:m,aspectRatio:x(p)})})})})});var ProductFeaturedImageCarousel$1=React.memo(ProductFeaturedImageCarousel);exports.default=ProductFeaturedImageCarousel$1;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),hoverAction=require("../../common/hoverAction.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),styles=require("../../common/styles.js"),Carousel=require("../../../../../carousel-v3/components/root/Carousel.js"),CarouselItem=require("../../../../../carousel-v3/components/item/CarouselItem.js"),ProductFeaturedImageOnly=require("./ProductFeaturedImageOnly.js"),useProductFeaturedImageCarousel=require("../../hooks/useProductFeaturedImageCarousel.js");const ProductFeaturedImageCarousel=React.forwardRef((e,t)=>{let{productImages:r,imgRef:s,onHandleClick:a,onClickArrow:o,onHandleLoaded:u,onHandleUpdateActiveIndex:l,swiperUpdateTrigger:i,builderPropUID:d,builderPropsClass:n,parentUid:c,isFilterByVariantEnabled:m,...g}=e,I=React.useRef(null),{ref:p,imageActive:h,imageActiveIndex:j,imageShowWhenHover:v,enableOpenLightBox:y,filteredProductImages:C,isRenderFeatureCarousel:P,genRandomKey:x,getAspectRatioFinal:f,emitUpdateActiveIndex:R}=useProductFeaturedImageCarousel.useProductFeaturedImageCarousel(e);React.useImperativeHandle(t,()=>({getSwiper:()=>I.current?.getSwiper()||null}));let A=core.useCurrentDevice(),{galleryItemClasses:M,featureImageOnlyOneImageClasses:S}=getProductImagesClassName.getProductImagesClassName(g),{featuredImageCarouselStyle:q,featureImageCarouselItemStyle:F}=getProductImagesStyles.getProductImagesStyles(g),O=system.createStyle({...styles.getFeaturedImageOnlyOneImageStyle({setting:g,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:w}=getProductImagesAttr.getProductImagesAttr(g);return jsxRuntime.jsx("div",{ref:p,"data-slot":"children",className:"product-feature-image",children:P?jsxRuntime.jsx(Carousel.default,{ref:I,parentClass:n,elmRef:s,setting:w,styles:q,builderProps:{uid:d},isHiddenArrowWhenDisabled:!0,onLoaded:e=>u&&u(e),onChangeActive:e=>R(e),onClickArrow:()=>o&&o(x()),moveToIdx:j,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${d}-carousel`,onHandleChangeSlideByInteraction:e=>{let t=C?.length??0,r=e>=t?0:e;a(C?.[r]?.id??"",y)},children:C?.map(e=>jsxRuntime.jsx(CarouselItem.default,{contentType:"productImage",className:M("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let t=core.getResponsiveValueByScreen(g?.ftClickOpenLightBox,A);"none"!==t&&a(e?.id??"",y)},style:F,onMouseMove:e=>hoverAction.handleMouseMove(e,g),onMouseOut:e=>hoverAction.handleMouseOut(e),children:jsxRuntime.jsx(ProductFeaturedImageOnly.default,{image:e,imageShowWhenHover:v,setting:g,aspectRatio:f()})},e?.id))}):jsxRuntime.jsx("div",{ref:s,className:"gp-flex gp-w-full",style:{...core.makeStyleResponsive("jc",g?.align)},"data-id":d,children:jsxRuntime.jsx("div",{"aria-hidden":"true",className:S,style:O,onMouseMove:e=>hoverAction.handleMouseMove(e,g),onMouseOut:e=>hoverAction.handleMouseOut(e),onBlur:()=>void 0,onClick:()=>{a(h?.id??"",y)},children:jsxRuntime.jsx(ProductFeaturedImageOnly.default,{image:m?r?.[0]:h,imageShowWhenHover:v,setting:g,aspectRatio:f(m?r?.[0]:h)})})})})});var ProductFeaturedImageCarousel$1=React.memo(ProductFeaturedImageCarousel);exports.default=ProductFeaturedImageCarousel$1;

package/dist/cjs/product/components/product-images-v3/components/feature-only/OnlyFeatureImage.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ProductFeaturedImageCarousel=require("../child/ProductFeaturedImageCarousel.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js");const OnlyFeatureImage=e=>{let{isEditMode:r}=core.useRenderMode(),{setting:s,styles:t,gallery:a,builderProps:u,noDataChildren:o,onHandleClickImage:d,children:l}=e,m={...s,...t};if(a?.[0]?.id==="noImageError"&&r)return jsxRuntime.jsx(jsxRuntime.Fragment,{children:o});let{featureImageOnlyOneImageClasses:g}=getProductImagesClassName.getProductImagesClassName(m),{featureImageStyle:c}=getProductImagesStyles.getProductImagesStyles(m);return jsxRuntime.jsxs("div",{className:g,style:c,children:[jsxRuntime.jsx(ProductFeaturedImageCarousel.default,{productImages:a,...m,onHandleClick:(e,r)=>{d(e||"",r)},builderPropUID:u?.uid,builderPropsClass:`gp-product-images-gallery-${u?.uid}`}),l]})};exports.default=OnlyFeatureImage;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ProductFeaturedImageCarousel=require("../child/ProductFeaturedImageCarousel.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js");const OnlyFeatureImage=e=>{let{isEditMode:r}=core.useRenderMode(),{setting:s,styles:t,gallery:a,builderProps:u,noDataChildren:l,onHandleClickImage:d,children:o}=e,i={...s,...t};if(a?.[0]?.id==="noImageError"&&r)return jsxRuntime.jsx(jsxRuntime.Fragment,{children:l});let{featureImageOnlyOneImageClasses:m}=getProductImagesClassName.getProductImagesClassName(i),{featureImageStyle:g}=getProductImagesStyles.getProductImagesStyles(i);return jsxRuntime.jsxs("div",{className:m,style:g,children:[jsxRuntime.jsx(ProductFeaturedImageCarousel.default,{productImages:a,...i,onHandleClick:(e,r)=>{d(e||"",r)},builderPropUID:u?.uid,builderPropsClass:`gp-product-images-gallery-${u?.uid}`,isFilterByVariantEnabled:e.isFilterByVariantEnabled}),o]})};exports.default=OnlyFeatureImage;

package/dist/cjs/product/settings/product-image-v3/configs/ui-v2.js

@@ -1 +1 @@
-"use strict";var ImageListNavigation=require("./ui/ImageListNavigation.js"),FeatureNavigation=require("./ui/FeatureNavigation.js"),FeatureDots=require("./ui/FeatureDots.js");const showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...FeatureDots.FeatureDots,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...FeatureNavigation.FeatureNavigation,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...ImageListNavigation.ImageListNavigation,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Default item"},setting:{id:"preDisplay"}},{label:{en:"Image list"},setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list will display based on the selected variants. <a class="text-white" target="_blank" href="https://help.gempages.net/articles/filter-product-image-by-selected-variant?utm_source=gempages&utm_medium=in-app&utm_campaign=product-image-element">How to setup</a>'}},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:"Quality"},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];exports.SettingUIV2=SettingUIV2;
+"use strict";var ImageListNavigation=require("./ui/ImageListNavigation.js"),FeatureNavigation=require("./ui/FeatureNavigation.js"),FeatureDots=require("./ui/FeatureDots.js");const showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...FeatureDots.FeatureDots,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...FeatureNavigation.FeatureNavigation,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...ImageListNavigation.ImageListNavigation,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Default item"},setting:{id:"preDisplay"}},{label:{en:"Image list"},setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list can display based on the selected variants. <a class="text-white" target="_blank" href="https://help.gempages.net/articles/filter-product-image-by-selected-variant?utm_source=gempages&utm_medium=in-app&utm_campaign=product-image-element">How to setup</a>'}},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:"Quality"},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];exports.SettingUIV2=SettingUIV2;

package/dist/esm/countdown-timer/common/classes.js

@@ -1 +1 @@
-import{getGlobalColorClass as e}from"@gem-sdk/core";function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}let getContentClasses=()=>({...composeClasses("gp-flex gp-flex-wrap gp-w-max gp-relative")}),getWrapperClasses=e=>{let s="gp-flex";return e&&(s+=` ${e}`),{...composeClasses(s)}},getDateClasses=e=>{let s="gp-flex-1 gp-text-center gp-min-w-max !gp-max-w-max";return e||(s+=" gp-content-center"),{...composeClasses(s)}},getTextFrontClasses=s=>{let t="gp-countdown-number",{colorNumber:p}=s||{};return e("text",p)&&(t+=` ${e("text",p)}`),{...composeClasses(t)}},getTextBackClasses=(s,t)=>{let p="",{colorLabel:g}=s||{};return e("text",g)&&(p+=` ${e("text",g)}`),t||(p+=" gp-hidden"),{...composeClasses(p)}},getLinkClasses=()=>({...composeClasses("gp-absolute gp-inset-0 gp-z-1 gp-pointer-events-none")}),getTextExpireClasses=()=>({...composeClasses("gp-flex gp-h-12 gp-items-center gp-justify-center gp-bg-[#d6d6d6] gp-opacity-70")});export{getContentClasses,getDateClasses,getLinkClasses,getTextBackClasses,getTextExpireClasses,getTextFrontClasses,getWrapperClasses};
+import{getGlobalColorClass as e}from"@gem-sdk/core";function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}let getContentClasses=({isLiquid:e,autoHideWhenTimeout:s})=>{let t="gp-flex gp-flex-wrap gp-w-max gp-relative ";return e&&s&&(t+=" !gp-hidden"),{...composeClasses(t)}},getWrapperClasses=e=>{let s="gp-flex";return e&&(s+=` ${e}`),{...composeClasses(s)}},getDateClasses=e=>{let s="gp-flex-1 gp-text-center gp-min-w-max !gp-max-w-max";return e||(s+=" gp-content-center"),{...composeClasses(s)}},getTextFrontClasses=s=>{let t="gp-countdown-number",{colorNumber:p}=s||{};return e("text",p)&&(t+=` ${e("text",p)}`),{...composeClasses(t)}},getTextBackClasses=(s,t)=>{let p="",{colorLabel:g}=s||{};return e("text",g)&&(p+=` ${e("text",g)}`),t||(p+=" gp-hidden"),{...composeClasses(p)}},getLinkClasses=()=>({...composeClasses("gp-absolute gp-inset-0 gp-z-1 gp-pointer-events-none")}),getTextExpireClasses=()=>({...composeClasses("gp-flex gp-h-12 gp-items-center gp-justify-center gp-bg-[#d6d6d6] gp-opacity-70")});export{getContentClasses,getDateClasses,getLinkClasses,getTextBackClasses,getTextExpireClasses,getTextFrontClasses,getWrapperClasses};

package/dist/esm/countdown-timer/components/Countdown.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{formatTime as s}from"../common/helpers.js";import o from"../../text/components/Text.js";import{useEditorMode as i}from"@gem-sdk/core";import{createClass as l,createAttr as r,createStyle as m,If as n}from"@gem-sdk/system";import{getAttr as a}from"../common/attrs.js";import{getTextExpireClasses as d,getWrapperClasses as c,getContentClasses as p,getTextFrontClasses as u,getLinkClasses as h,getDateClasses as y,getTextBackClasses as f}from"../common/classes.js";import{getWrapperStyle as g,getContainStyle as x,getDateStyle as j,getTextFrontStyle as N,getTextBackStyle as k}from"../common/styles.js";import v from"../hooks/useCountDownTimer.js";let Countdown=C=>{let{setting:w,styles:T,builderProps:b,advanced:E}=C,{labelTypo:F,numTypo:D,labelTypography:H,numTypography:W,enableLabelTextStyle:q}=T??{},{weekLabel:z,dayLabel:A,hourLabel:B,minuteLabel:G,secondLabel:I,enableWeek:J,enableDay:K,enableHour:L,enableMinute:M,enableSecond:O,redirectUrl:P}=w??{},Q=i(),{week:R,day:S,hour:U,minute:V,second:X,timeLeft:Y,ref:Z}=v(w,b),$=!!P?.link&&"edit"!==Q,_=l({...d()});if(w?.autoHideWhenTimeout&&Y<=0)return"edit"!==Q?null:e("div",{className:_,children:e("span",{children:"Countdown is run out of time (this only visible in the editor)"})});let ee=r({...a({uid:b?.uid||""})}),et=m({...g(T)}),es=l({...c(E?.cssClass)}),eo=l({...p()}),ei=m({...x(T)}),el=m({...j(T)}),er=e=>l({...y(e)}),em=l({...u(T)}),en=m({...N(T)}),ea=m({...k(T)}),ed=e=>l({...f(T,e)}),ec=l({...h()}),ep=(i,l)=>{let r=s(i);return t("div",{style:el,className:er(l),children:[e(o,{styles:{typography:W,typo:D},setting:{htmlTag:"div",text:r,excludeFlex:!0},className:em,style:en,disableEdit:!0}),n(!!q,e(o,{styles:{typography:H,typo:F},setting:{text:l,htmlTag:"p",excludeFlex:!0},style:ea,className:ed(l),disableEdit:!0}))]})};return e("div",{ref:Z,...ee,className:es,style:et,children:t("div",{className:eo,style:ei,children:[n($,e("a",{href:P?.link,target:P?.target,"aria-label":"Countdown link",className:ec,children:" "})),n(J,ep(R,z)),n(K,ep(S,A)),n(L,ep(U,B)),n(M,ep(V,G)),n(O,ep(X,I))]})})};export{Countdown as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{formatTime as s}from"../common/helpers.js";import o from"../../text/components/Text.js";import{useEditorMode as i}from"@gem-sdk/core";import{createClass as l,createAttr as r,createStyle as m,If as n}from"@gem-sdk/system";import{getAttr as a}from"../common/attrs.js";import{getTextExpireClasses as d,getWrapperClasses as c,getContentClasses as u,getTextFrontClasses as p,getLinkClasses as h,getDateClasses as y,getTextBackClasses as f}from"../common/classes.js";import{getWrapperStyle as g,getContainStyle as x,getDateStyle as j,getTextFrontStyle as N,getTextBackStyle as k}from"../common/styles.js";import v from"../hooks/useCountDownTimer.js";let Countdown=C=>{let{setting:w,styles:T,builderProps:b,advanced:E}=C,{labelTypo:F,numTypo:q,labelTypography:D,numTypography:H,enableLabelTextStyle:L}=T??{},{weekLabel:W,dayLabel:z,hourLabel:A,minuteLabel:B,secondLabel:G,enableWeek:I,enableDay:J,enableHour:K,enableMinute:M,enableSecond:O,redirectUrl:P,autoHideWhenTimeout:Q}=w??{},R=i(),{week:S,day:U,hour:V,minute:X,second:Y,timeLeft:Z,ref:$}=v(w,b),_=!!P?.link&&"edit"!==R,ee=l({...d()});if(w?.autoHideWhenTimeout&&Z<=0)return"edit"!==R?null:e("div",{className:ee,children:e("span",{children:"Countdown is run out of time (this only visible in the editor)"})});let et=r({...a({uid:b?.uid||""})}),es=m({...g(T)}),eo=l({...c(E?.cssClass)}),ei=l({...u({isLiquid:!1,autoHideWhenTimeout:Q})}),el=m({...x(T)}),er=m({...j(T)}),em=e=>l({...y(e)}),en=l({...p(T)}),ea=m({...N(T)}),ed=m({...k(T)}),ec=e=>l({...f(T,e)}),eu=l({...h()}),ep=(i,l)=>{let r=s(i);return t("div",{style:er,className:em(l),children:[e(o,{styles:{typography:H,typo:q},setting:{htmlTag:"div",text:r,excludeFlex:!0},className:en,style:ea,disableEdit:!0}),n(!!L,e(o,{styles:{typography:D,typo:F},setting:{text:l,htmlTag:"p",excludeFlex:!0},style:ed,className:ec(l),disableEdit:!0}))]})};return e("div",{ref:$,...et,className:eo,style:es,children:t("div",{className:ei,style:el,children:[n(_,e("a",{href:P?.link,target:P?.target,"aria-label":"Countdown link",className:eu,children:" "})),n(I,ep(S,W)),n(J,ep(U,z)),n(K,ep(V,A)),n(M,ep(X,B)),n(O,ep(Y,G))]})})};export{Countdown as default};

package/dist/esm/countdown-timer/components/Countdown.liquid.js

@@ -1,39 +1,30 @@
-import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as o}from"@gem-sdk/core";import r from"../../text/components/Text.liquid.js";import{getInsertLinkData as i,getSettingPreloadData as a}from"../../helpers.js";import{createStateOrContext as d,createStyle as n,createClass as l,createAttr as u,If as m}from"@gem-sdk/system";import{getAttr as c,getAttrHref as p}from"../common/attrs.js";import{getDateStyle as $,getTextFrontStyle as y,getTextBackStyle as g,getWrapperStyle as f,getContainStyle as h}from"../common/styles.js";import{getTextFrontClasses as w,getWrapperClasses as x,getContentClasses as b,getLinkClasses as v,getDateClasses as j,getTextBackClasses as k}from"../common/classes.js";import{getStandardEndtime as S}from"../common/helpers.js";let Countdown=E=>{let{setting:C,styles:L,builderProps:T,advanced:A,pageContext:N}=E,{labelTypo:_,numTypo:D,numTypography:H,labelTypography:I,enableLabelTextStyle:P}=L??{},{weekLabel:W,dayLabel:q,hourLabel:F,minuteLabel:G,secondLabel:O,enableWeek:J,enableDay:M,enableHour:R,enableMinute:V,enableSecond:Z,redirectUrl:z,translate:B}=C??{},K=!!z?.link,{urlData:Q}=i("",z),U=d({...C,...T}),X=n({...$(L)}),Y=e=>l({...j(e)}),ee=l({...w(L)}),et=n({...y(L)}),es=n({...g(L)}),eo=e=>l({...k(L,e)}),er=u({...c({uid:T?.uid||""})}),ei=u({...p({uid:Q.href||""})}),ea=n({...f(L)}),ed=l({...x(A?.cssClass)}),en=l({...b()}),el=n({...h(L)}),eu=(t,s,o)=>e`
-    <div style="${X}" class="${Y(s)}">
-    ${r({styles:{typography:H,typo:D},setting:{...C,text:"00",excludeFlex:!0,translate:""},style:et,className:ee,builderAttrs:{id:t},builderProps:{...T,uid:T?.uid,uidInteraction:`${T?.uid}-text`}})}
-    ${m(!!P,e`
-         ${r({styles:{typography:I,typo:_},setting:{...C,text:s,excludeFlex:!0,translate:o},style:es,className:eo(s),builderProps:{...T,uid:T?.uid,uidInteraction:`${T?.uid}-text`},pageContext:N})}
+import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as r}from"@gem-sdk/core";import o from"../../text/components/Text.liquid.js";import{getInsertLinkData as i,getSettingPreloadData as l}from"../../helpers.js";import{createStateOrContext as d,createStyle as a,createClass as n,createAttr as c,If as u}from"@gem-sdk/system";import{getAttr as m,getAttrHref as p}from"../common/attrs.js";import{getDateStyle as $,getTextFrontStyle as y,getTextBackStyle as f,getWrapperStyle as g,getContainStyle as x}from"../common/styles.js";import{getTextFrontClasses as w,getWrapperClasses as b,getContentClasses as h,getLinkClasses as k,getDateClasses as v,getTextBackClasses as j}from"../common/classes.js";let Countdown=L=>{let{setting:S,styles:A,builderProps:C,advanced:E,pageContext:N}=L,{labelTypo:I,numTypo:P,numTypography:q,labelTypography:F,enableLabelTextStyle:G}=A??{},{weekLabel:O,dayLabel:T,hourLabel:_,minuteLabel:J,secondLabel:M,enableWeek:R,enableDay:V,enableHour:z,enableMinute:B,enableSecond:D,redirectUrl:H,translate:K,autoHideWhenTimeout:Q}=S??{},U=!!H?.link,{urlData:W}=i("",H),X=d({...S,...C}),Y=a({...$(A)}),Z=e=>n({...v(e)}),ee=n({...w(A)}),et=a({...y(A)}),es=a({...f(A)}),er=e=>n({...j(A,e)}),eo=c({...m({uid:C?.uid||""})}),ei=c({...p({uid:W.href||""})}),el=a({...g(A)}),ed=n({...b(E?.cssClass)}),ea=n({...h({isLiquid:!0,autoHideWhenTimeout:Q})}),en=a({...x(A)}),ec=(t,s,r)=>e`
+    <div style="${Y}" class="${Z(s)}">
+    ${o({styles:{typography:q,typo:P},setting:{...S,text:"00",excludeFlex:!0,translate:""},style:et,className:ee,builderAttrs:{id:t},builderProps:{...C,uid:C?.uid,uidInteraction:`${C?.uid}-text`}})}
+    ${u(!!G,e`
+         ${o({styles:{typography:F,typo:I},setting:{...S,text:s,excludeFlex:!0,translate:r},style:es,className:er(s),builderProps:{...C,uid:C?.uid,uidInteraction:`${C?.uid}-text`},pageContext:N})}
     `)}
     </div>
-    `,em=l({...v()}),ec=S(C?.dateStandard,C?.timeZone),ep=()=>t(s,`<script ${a('class="gps-link" delay',"src")}="{{ 'gp-countdown-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${a('class="gps-link" delay',"src")}="${o}/assets-v2/gp-countdown-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return e`
-    {%- liquid
-      assign standardEndDate = ${ec}
-      assign typeCountdown = "${C?.behaviour.toString()||""}"
-      assign autoHideWhenTimeout = ${!!C?.autoHideWhenTimeout}
-      assign current_time = 'now' | date: '%s' | times: 1000
-
-    -%}
-   {% if standardEndDate == nil or current_time <= standardEndDate or typeCountdown != "standard" or autoHideWhenTimeout != true %}
-      <gp-countdown-timer
-        ${{...er}}
+    `,eu=n({...k()}),em=()=>t(s,`<script ${l('class="gps-link" delay',"src")}="{{ 'gp-countdown-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${l('class="gps-link" delay',"src")}="${r}/assets-v2/gp-countdown-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return e`
+    <gp-countdown-timer
+        ${{...eo}}
         ${{...ei}}
         class="${ed}"
-        style="${ea}"
-        gp-data='${JSON.stringify(U).replaceAll("'","&#039;")}'>
-        <div id="section-countdown" class="${en}" style="${el}">
-          ${m(K,`<a
-              href="${Q.href}"
-              target="${Q?.target}"
+        style="${el}"
+        gp-data='${JSON.stringify(X).replaceAll("'","&#039;")}'>
+        <div id="section-countdown" class="${ea}" style="${en}">
+          ${u(U,`<a
+              href="${W.href}"
+              target="${W?.target}"
               aria-label="Countdown link"
-              class="${em}"
+              class="${eu}"
             > </a>`)}
-          ${m(J,eu("week",W,B?"weekLabel":""))}
-          ${m(M,eu("day",q,B?"dayLabel":""))}
-          ${m(R,eu("hour",F,B?"hourLabel":""))}
-          ${m(V,eu("minute",G,B?"minuteLabel":""))}
-          ${m(Z,eu("second",O,B?"secondLabel":""))}
+          ${u(R,ec("week",O,K?"weekLabel":""))}
+          ${u(V,ec("day",T,K?"dayLabel":""))}
+          ${u(z,ec("hour",_,K?"hourLabel":""))}
+          ${u(B,ec("minute",J,K?"minuteLabel":""))}
+          ${u(D,ec("second",M,K?"secondLabel":""))}
         </div>
      </gp-countdown-timer>
-    {% endif %}
-    ${ep()}
+    ${em()}
   `};export{Countdown as default};

package/dist/esm/product/components/product-images-v3/ProductImageV3.js

@@ -1,5 +1,5 @@
 '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 l,useProduct as C,useCurrentDevice as o,useCurrentVariant as r,useSelectedOption as n,useEditorMode as d,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"],ProductImagesV3=w=>{let L=m(()=>a(w),[w]),{redirectProductShopifyLink:k}=l(),{setting:V,styles:v,builderProps:A,builderAttrs:O,style:_,children:x}=L,H=C(),P=o(),B=r(),{isChangeSelectedOption:G}=n(),T=d(),j=s(e=>e.setProductFeaturedImage),[F,S]=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(()=>V?.typeDisplay==="all-images"&&!G,[G,V?.typeDisplay]),z=m(()=>{if(Y){let e;switch(V?.preDisplay){case"1st-images":e=N(H);break;case"1st-3d-mode":e=U(H);break;case"1st-video":e=R(H);break;case"1st-available-variant":e=B?.media}return j(e),e}},[Y,V?.preDisplay,j,H,B?.media]),J=m(()=>V?.filterByVariant==="selected_variant",[V?.filterByVariant]),W=m(()=>{let e=getProductGallery(H);if(!e?.length)return[{id:H?.featuredImage?.id||"noImageError",src:H?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:H?.featuredImage?.width||480,height:H?.featuredImage?.height||480}];if(!J||!B?.selectedOptions?.length)return e;let t=B.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),a=t.join("-"),i=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),l=e?.filter(e=>{if(!e?.alt)return!1;let t=i(e.alt),l=i(a),C="all-variants"===t,o=t===l||t.includes(l);return C||o});return l?.length>0?l:e},[B?.selectedOptions,J,H]),X=m(()=>W.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[W]),q=m(()=>p(v?.position,P),[P,v?.position]),K=(e,t)=>{$(e),t&&Q()},Q=()=>{S(!0)},$=e=>{if(!e)return;let t=X[e];if(void 0!==t){let e=W[t];e&&j(e)}};g(()=>{if(B&&!Y){let e=X[B?.mediaId];if(void 0!==e){let t=W[e]??H?.featuredImage;t&&j(t)}}},[B,X,W,H?.featuredImage,j,Y]);let ee=m(()=>{let e="popup"===p(V?.ftClickOpenLightBox,P)||p(V?.clickOpenLightBox,P);return e||"edit"!==T||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[V?.ftClickOpenLightBox,V?.clickOpenLightBox,P,T]),et=()=>W.length>0?h.map(c(x),e=>u(e)?t(e.type,{...e.props,isInsideProductImage:!0,navigationPosition:V?.ftNavigationPosition,imageData:{imageShape:v?.ftShape,imageAlign:v?.align,imageLayout:v?.position},dotData:{dotSize:V?.ftDotSize,dotGapToCarousel:V?.ftDotGapToCarousel,dotStyle:V?.ftDotStyle}}):null):null,ea=`
+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 l,useProduct as C,useCurrentDevice as o,useCurrentVariant as r,useSelectedOption as n,useEditorMode as d,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 b from"./components/lightbox/ProductImagesLightBox.js";import I 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"],ProductImagesV3=w=>{let L=m(()=>a(w),[w]),{redirectProductShopifyLink:V}=l(),{setting:k,styles:v,builderProps:A,builderAttrs:O,style:_,children:x}=L,B=C(),H=o(),P=r(),{isChangeSelectedOption:F}=n(),G=d(),T=s(e=>e.setProductFeaturedImage),[j,S]=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(()=>k?.typeDisplay==="all-images"&&!F,[F,k?.typeDisplay]),z=m(()=>{if(Y){let e;switch(k?.preDisplay){case"1st-images":e=N(B);break;case"1st-3d-mode":e=U(B);break;case"1st-video":e=R(B);break;case"1st-available-variant":e=P?.media}return T(e),e}},[Y,k?.preDisplay,T,B,P?.media]),J=m(()=>k?.filterByVariant==="selected_variant",[k?.filterByVariant]),W=m(()=>{let e=getProductGallery(B);if(!e?.length)return[{id:B?.featuredImage?.id||"noImageError",src:B?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:B?.featuredImage?.width||480,height:B?.featuredImage?.height||480}];if(!J||!P?.selectedOptions?.length)return e;let t=P.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),a=t.join("-"),i=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),l=e?.filter(e=>{if(!e?.alt)return!1;let t=i(e.alt),l=i(a),C="all-variants"===t,o=t===l||t.includes(l);return C||o});return l?.length>0?l:e},[P?.selectedOptions,J,B]),X=m(()=>W.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[W]),q=m(()=>p(v?.position,H),[H,v?.position]),K=(e,t)=>{$(e),t&&Q()},Q=()=>{S(!0)},$=e=>{if(!e)return;let t=X[e];if(void 0!==t){let e=W[t];e&&T(e)}};g(()=>{if(P&&!Y){let e=X[P?.mediaId];if(void 0!==e){let t=W[e]??B?.featuredImage;t&&T(t)}}},[P,X,W,B?.featuredImage,T,Y]);let ee=m(()=>{let e="popup"===p(k?.ftClickOpenLightBox,H)||p(k?.clickOpenLightBox,H);return e||"edit"!==G||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[k?.ftClickOpenLightBox,k?.clickOpenLightBox,H,G]),et=()=>W.length>0?h.map(c(x),e=>u(e)?t(e.type,{...e.props,isInsideProductImage:!0,navigationPosition:k?.ftNavigationPosition,imageData:{imageShape:v?.ftShape,imageAlign:v?.align,imageLayout:v?.position},dotData:{dotSize:k?.ftDotSize,dotGapToCarousel:k?.ftDotGapToCarousel,dotStyle:k?.ftDotStyle}}):null):null,ea=`
       <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"/>
@@ -23,4 +23,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{setDefaultWhenUndefineS
         <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>
-    `,ei=t(b,{elementType:"secondary",description:"Catch your customer's attention with attracted media.",descriptionActions:[{text:"Add image",callback:k},{text:"sync data",callback:"syncProduct"}],additionalMedia:ea}),{wrapperClasses:el}=M(w);return e("div",{...O,className:el,style:_,children:[t("style",{dangerouslySetInnerHTML:{__html:E({settings:{...V,...v},uid:A?.uid,type:"React"})}}),LAYOUT_FEATURE_IMAGE_GALLERY.includes(q)&&t(y,{...L,isFilterByVariantEnabled:J,gallery:W,priorityFeatureImage:z,onHandleClickImage:(e,t)=>K(e||"",t),noDataChildren:ei,children:et()}),"only-feature"===q&&t(D,{gallery:W,...L,onHandleClickImage:(e,t)=>K(e||"",t),noDataChildren:ei,children:et()}),["one-col","two-col"].includes(q)&&t(Z,{gallery:W,...L,onHandleClickImage:(e,t)=>K(e||"",t),noDataChildren:ei,children:et()}),ee&&t(I,{productImages:W,builderPropUID:A?.uid,open:F,onHandleClose:()=>S(!1),imageRatio:i(v?.ftShape)}),c(x,!0)]})};export{ProductImagesV3 as default};
+    `,ei=t(I,{elementType:"secondary",description:"Catch your customer's attention with attracted media.",descriptionActions:[{text:"Add image",callback:V},{text:"sync data",callback:"syncProduct"}],additionalMedia:ea}),{wrapperClasses:el}=M(w);return e("div",{...O,className:el,style:_,children:[t("style",{dangerouslySetInnerHTML:{__html:E({settings:{...k,...v},uid:A?.uid,type:"React"})}}),LAYOUT_FEATURE_IMAGE_GALLERY.includes(q)&&t(y,{...L,isFilterByVariantEnabled:J,gallery:W,priorityFeatureImage:z,onHandleClickImage:(e,t)=>K(e||"",t),noDataChildren:ei,children:et()}),"only-feature"===q&&t(D,{gallery:W,...L,onHandleClickImage:(e,t)=>K(e||"",t),noDataChildren:ei,isFilterByVariantEnabled:J,children:et()}),["one-col","two-col"].includes(q)&&t(Z,{gallery:W,...L,onHandleClickImage:(e,t)=>K(e||"",t),noDataChildren:ei,children:et()}),ee&&t(b,{productImages:W,builderPropUID:A?.uid,open:j,onHandleClose:()=>S(!1),imageRatio:i(v?.ftShape)}),c(x,!0)]})};export{ProductImagesV3 as default};

package/dist/esm/product/components/product-images-v3/components/child/ProductFeaturedImageCarousel.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{memo as o,forwardRef as r,useRef as t,useImperativeHandle as a}from"react";import{useCurrentDevice as s,getResponsiveValueByScreen as m,makeStyleResponsive as i}from"@gem-sdk/core";import{handleMouseMove as l,handleMouseOut as n}from"../../common/hoverAction.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as d}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as c}from"../../composables/getProductImagesAttr.js";import{createStyle as g}from"@gem-sdk/system";import{getFeaturedImageOnlyOneImageStyle as p}from"../../common/styles.js";import f from"../../../../../carousel-v3/components/root/Carousel.js";import h from"../../../../../carousel-v3/components/item/CarouselItem.js";import C from"./ProductFeaturedImageOnly.js";import{useProductFeaturedImageCarousel as v}from"../../hooks/useProductFeaturedImageCarousel.js";let ProductFeaturedImageCarousel=r((o,r)=>{let{productImages:I,imgRef:j,onHandleClick:w,onClickArrow:y,onHandleLoaded:P,onHandleUpdateActiveIndex:b,swiperUpdateTrigger:k,builderPropUID:M,builderPropsClass:S,parentUid:x,...A}=o,F=t(null),{ref:H,imageActive:N,imageActiveIndex:O,imageShowWhenHover:R,enableOpenLightBox:B,filteredProductImages:W,isRenderFeatureCarousel:$,genRandomKey:L,getAspectRatioFinal:T,emitUpdateActiveIndex:D}=v(o);a(r,()=>({getSwiper:()=>F.current?.getSwiper()||null}));let q=s(),{galleryItemClasses:z,featureImageOnlyOneImageClasses:E}=d(A),{featuredImageCarouselStyle:G,featureImageCarouselItemStyle:J}=u(A),K=g({...p({setting:A,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:Q}=c(A);return e("div",{ref:H,"data-slot":"children",className:"product-feature-image",children:$?e(f,{ref:F,parentClass:S,elmRef:j,setting:Q,styles:G,builderProps:{uid:M},isHiddenArrowWhenDisabled:!0,onLoaded:e=>P&&P(e),onChangeActive:e=>D(e),onClickArrow:()=>y&&y(L()),moveToIdx:O,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${M}-carousel`,onHandleChangeSlideByInteraction:e=>{let o=W?.length??0,r=e>=o?0:e;w(W?.[r]?.id??"",B)},children:W?.map(o=>e(h,{contentType:"productImage",className:z("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=m(A?.ftClickOpenLightBox,q);"none"!==e&&w(o?.id??"",B)},style:J,onMouseMove:e=>l(e,A),onMouseOut:e=>n(e),children:e(C,{image:o,imageShowWhenHover:R,setting:A,aspectRatio:T()})},o?.id))}):e("div",{ref:j,className:"gp-flex gp-w-full",style:{...i("jc",A?.align)},"data-id":M,children:e("div",{"aria-hidden":"true",className:E,style:K,onMouseMove:e=>l(e,A),onMouseOut:e=>n(e),onBlur:()=>void 0,onClick:()=>{w(N?.id??"",B)},children:e(C,{image:N,imageShowWhenHover:R,setting:A,aspectRatio:T(N)})})})})});var ProductFeaturedImageCarousel$1=o(ProductFeaturedImageCarousel);export{ProductFeaturedImageCarousel$1 as default};
+import{jsx as e}from"react/jsx-runtime";import{memo as o,forwardRef as r,useRef as t,useImperativeHandle as a}from"react";import{useCurrentDevice as s,getResponsiveValueByScreen as m,makeStyleResponsive as i}from"@gem-sdk/core";import{handleMouseMove as l,handleMouseOut as n}from"../../common/hoverAction.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as d}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as c}from"../../composables/getProductImagesAttr.js";import{createStyle as g}from"@gem-sdk/system";import{getFeaturedImageOnlyOneImageStyle as p}from"../../common/styles.js";import f from"../../../../../carousel-v3/components/root/Carousel.js";import h from"../../../../../carousel-v3/components/item/CarouselItem.js";import C from"./ProductFeaturedImageOnly.js";import{useProductFeaturedImageCarousel as v}from"../../hooks/useProductFeaturedImageCarousel.js";let ProductFeaturedImageCarousel=r((o,r)=>{let{productImages:I,imgRef:j,onHandleClick:w,onClickArrow:y,onHandleLoaded:P,onHandleUpdateActiveIndex:b,swiperUpdateTrigger:k,builderPropUID:M,builderPropsClass:S,parentUid:x,isFilterByVariantEnabled:A,...F}=o,H=t(null),{ref:N,imageActive:O,imageActiveIndex:R,imageShowWhenHover:B,enableOpenLightBox:W,filteredProductImages:$,isRenderFeatureCarousel:L,genRandomKey:T,getAspectRatioFinal:D,emitUpdateActiveIndex:q}=v(o);a(r,()=>({getSwiper:()=>H.current?.getSwiper()||null}));let z=s(),{galleryItemClasses:E,featureImageOnlyOneImageClasses:G}=d(F),{featuredImageCarouselStyle:J,featureImageCarouselItemStyle:K}=u(F),Q=g({...p({setting:F,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:U}=c(F);return e("div",{ref:N,"data-slot":"children",className:"product-feature-image",children:L?e(f,{ref:H,parentClass:S,elmRef:j,setting:U,styles:J,builderProps:{uid:M},isHiddenArrowWhenDisabled:!0,onLoaded:e=>P&&P(e),onChangeActive:e=>q(e),onClickArrow:()=>y&&y(T()),moveToIdx:R,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${M}-carousel`,onHandleChangeSlideByInteraction:e=>{let o=$?.length??0,r=e>=o?0:e;w($?.[r]?.id??"",W)},children:$?.map(o=>e(h,{contentType:"productImage",className:E("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=m(F?.ftClickOpenLightBox,z);"none"!==e&&w(o?.id??"",W)},style:K,onMouseMove:e=>l(e,F),onMouseOut:e=>n(e),children:e(C,{image:o,imageShowWhenHover:B,setting:F,aspectRatio:D()})},o?.id))}):e("div",{ref:j,className:"gp-flex gp-w-full",style:{...i("jc",F?.align)},"data-id":M,children:e("div",{"aria-hidden":"true",className:G,style:Q,onMouseMove:e=>l(e,F),onMouseOut:e=>n(e),onBlur:()=>void 0,onClick:()=>{w(O?.id??"",W)},children:e(C,{image:A?I?.[0]:O,imageShowWhenHover:B,setting:F,aspectRatio:D(A?I?.[0]:O)})})})})});var ProductFeaturedImageCarousel$1=o(ProductFeaturedImageCarousel);export{ProductFeaturedImageCarousel$1 as default};

package/dist/esm/product/components/product-images-v3/components/feature-only/OnlyFeatureImage.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import{useRenderMode as t}from"@gem-sdk/core";import a from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesClassName as m}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as s}from"../../composables/getProductImagesStyles.js";let OnlyFeatureImage=l=>{let{isEditMode:d}=t(),{setting:i,styles:u,gallery:c,builderProps:g,noDataChildren:p,onHandleClickImage:n,children:I}=l,f={...i,...u};if(c?.[0]?.id==="noImageError"&&d)return e(r,{children:p});let{featureImageOnlyOneImageClasses:y}=m(f),{featureImageStyle:P}=s(f);return o("div",{className:y,style:P,children:[e(a,{productImages:c,...f,onHandleClick:(e,r)=>{n(e||"",r)},builderPropUID:g?.uid,builderPropsClass:`gp-product-images-gallery-${g?.uid}`}),I]})};export{OnlyFeatureImage as default};
+import{jsx as e,Fragment as r,jsxs as a}from"react/jsx-runtime";import{useRenderMode as t}from"@gem-sdk/core";import l from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesClassName as o}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as s}from"../../composables/getProductImagesStyles.js";let OnlyFeatureImage=i=>{let{isEditMode:m}=t(),{setting:d,styles:u,gallery:c,builderProps:n,noDataChildren:g,onHandleClickImage:p,children:I}=i,f={...d,...u};if(c?.[0]?.id==="noImageError"&&m)return e(r,{children:g});let{featureImageOnlyOneImageClasses:y}=o(f),{featureImageStyle:b}=s(f);return a("div",{className:y,style:b,children:[e(l,{productImages:c,...f,onHandleClick:(e,r)=>{p(e||"",r)},builderPropUID:n?.uid,builderPropsClass:`gp-product-images-gallery-${n?.uid}`,isFilterByVariantEnabled:i.isFilterByVariantEnabled}),I]})};export{OnlyFeatureImage as default};

package/dist/esm/product/settings/product-image-v3/configs/ui-v2.js

@@ -1 +1 @@
-import{ImageListNavigation as e}from"./ui/ImageListNavigation.js";import{FeatureNavigation as i}from"./ui/FeatureNavigation.js";import{FeatureDots as t}from"./ui/FeatureDots.js";let showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...t,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...i,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...e,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Default item"},setting:{id:"preDisplay"}},{label:{en:"Image list"},setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list will display based on the selected variants. <a class="text-white" target="_blank" href="https://help.gempages.net/articles/filter-product-image-by-selected-variant?utm_source=gempages&utm_medium=in-app&utm_campaign=product-image-element">How to setup</a>'}},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:"Quality"},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];export{SettingUIV2};
+import{ImageListNavigation as e}from"./ui/ImageListNavigation.js";import{FeatureNavigation as i}from"./ui/FeatureNavigation.js";import{FeatureDots as t}from"./ui/FeatureDots.js";let showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...t,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...i,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...e,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Default item"},setting:{id:"preDisplay"}},{label:{en:"Image list"},setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list can display based on the selected variants. <a class="text-white" target="_blank" href="https://help.gempages.net/articles/filter-product-image-by-selected-variant?utm_source=gempages&utm_medium=in-app&utm_campaign=product-image-element">How to setup</a>'}},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:"Quality"},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];export{SettingUIV2};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "4.0.0-staging.1240",
+  "version": "4.0.0-staging.1242",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,6 +21,7 @@
     "format": "prettier --write \"./src/**/*.{ts,tsx}\"",
     "relationship": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/element-relationship/index.js",
     "update-img-src-3rd": "node ./scripts/update-img-src-3rd.js",
+    "generate-tailwind": "node ./scripts/generateTailwind.js",
     "scan-and-translate": "node ./scripts/scan-and-translate.js",
     "scan-all-text": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/scan-all-text && node ./scripts/scan-all-text"
   },
@@ -28,8 +29,16 @@
     "@gem-sdk/core": "4.0.0-staging.1233",
     "@gem-sdk/styles": "4.0.0-staging.1231",
     "@gem-sdk/system": "4.0.0-staging.1231",
-    "tsup": "^8.5.0",
     "@types/react-transition-group": "^4.4.12",
+    "tsup": "^8.5.0",
+    "postcss-import": "^16.1.1",
+    "react-transition-group": "^4.4.5",
+    "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
+    "autoprefixer": "^10.4.21",
+    "cssnano": "^7.1.1",
+    "postcss": "^8.5.6",
+    "postcss-discard-comments": "^7.0.4",
+    "postcss-prefixwrap": "^1.57.0",
     "xlsx": "^0.18.5"
   },
   "dependencies": {