@gem-sdk/components 8.0.0-dev.45 → 8.0.0-dev.50

package/dist/cjs/grid/components/row/Row.liquid.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers$1=require("../../../helpers.js"),HTML5Embed_liquid=require("../../../video/components/HTML5Embed.liquid.js"),system=require("@gem-sdk/system"),helpers$2=require("../../../video/common/helpers.js"),LiteYouTubeEmbed_liquid=require("../../../video/components/LiteYouTubeEmbed.liquid.js"),attrs=require("./common/attrs.js"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),helpers=require("./common/helpers.js"),helpers$3=require("../../../hero-banner/common/helpers.js");const Row=e=>{let{styles:r,setting:s,rawChildren:t,builderProps:o}=e,{isSection:l}=s??{},{background:i}=r??{},a=l?"section":"div",{stateData:d}=helpers.getData(e),{rowStyle:p,backgroundBoxStyle:c,embedVideoStyle:n,sectionStyle:u}=styles.getRowStyle(e),{rowAttr:m}=attrs.getAttr(e),{rowClass:g,backgroundBoxClass:$,backgroundBoxInnerClass:f,sectionClass:h,wrapperYoutubeClasses:y,iframeYoutubeClasses:b}=classes.getClass(e),v=system.createClass({[g]:!0}),k=()=>{if(!helpers.checkHasBackgroundVideo(i))return;let e=helpers$3.getResponsiveSetting(i||{});if(helpers.isRenderHtmlVideo(i))return HTML5Embed_liquid.default({uid:o?.uid,muted:!0,loop:e.desktop?.loop,controls:!1,autoplay:!0,src:"",title:"Video",className:"gp-relative",style:n});if(helpers.isRenderYoutubeVideo(i)){let r=e?.desktop?.video??"",s=helpers$2.getYoutubeVideoId(r)||"",t=`&loop=false&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;return LiteYouTubeEmbed_liquid.default({uid:o?.uid,id:s,autoplay:!0,title:"Video",controls:!1,params:t,adNetwork:!1,noCookie:!0,muted:!0,lazy:e?.desktop?.lazyLoad??!0,preload:!0,style:n,wrapperClass:y,iframeClass:b})}},q=()=>{if(helpers.checkHasBackgroundVideo(i))return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers$1=require("../../../helpers.js"),HTML5Embed_liquid=require("../../../video/components/HTML5Embed.liquid.js"),system=require("@gem-sdk/system"),helpers$2=require("../../../video/common/helpers.js"),LiteYouTubeEmbed_liquid=require("../../../video/components/LiteYouTubeEmbed.liquid.js"),attrs=require("./common/attrs.js"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),helpers=require("./common/helpers.js"),helpers$3=require("../../../hero-banner/common/helpers.js");const Row=e=>{let{styles:r,setting:s,rawChildren:t,builderProps:o}=e,{isSection:l}=s??{},{background:a}=r??{},i=l?"section":"div",{stateData:d}=helpers.getData(e),{rowStyle:p,backgroundBoxStyle:c,embedVideoStyle:n,sectionStyle:u}=styles.getRowStyle(e),{rowAttr:m}=attrs.getAttr(e),{rowClass:g,backgroundBoxClass:$,backgroundBoxInnerClass:f,sectionClass:h,wrapperYoutubeClasses:y,iframeYoutubeClasses:b}=classes.getClass(e),k=system.createClass({[g]:!0});r?.background&&(r.background=helpers.getBackgroundTranslatedImageVideo(r.background,e));let v=()=>{if(!helpers.checkHasBackgroundVideo(a))return;let e=helpers$3.getResponsiveSetting(a||{});if(helpers.isRenderHtmlVideo(a))return HTML5Embed_liquid.default({uid:o?.uid,muted:!0,loop:e.desktop?.loop,controls:!1,autoplay:!0,src:"",title:"Video",className:"gp-relative",style:n});if(helpers.isRenderYoutubeVideo(a)){let r=e?.desktop?.video??"",s=helpers$2.getYoutubeVideoId(r)||"",t=`&loop=false&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;return LiteYouTubeEmbed_liquid.default({uid:o?.uid,id:s,autoplay:!0,title:"Video",controls:!1,params:t,adNetwork:!1,noCookie:!0,muted:!0,lazy:e?.desktop?.lazyLoad??!0,preload:!0,style:n,wrapperClass:y,iframeClass:b})}},q=()=>{if(helpers.checkHasBackgroundVideo(a))return core.template`
       ${core.RenderIf(core.isLocalEnv,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-row-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-row-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
     `},R=core.template`
-    <gp-row gp-data='${d}' ${{...m}} class="${v}" style="${p()}">
-      ${system.If(!!k(),core.template`
+    <gp-row gp-data='${d}' ${{...m}} class="${k}" style="${p()}">
+      ${system.If(!!v(),core.template`
           <div class="${$}" style="${c}">
-            <div class="${f}">${k()}</div>
+            <div class="${f}">${v()}</div>
           </div>
         `)}
 
@@ -13,16 +13,16 @@
       ${q()}
     </gp-row>
   `;return core.template`
-    ${core.RenderIf(!!r?.preloadBgImage,`${core.RenderIf(!!i?.desktop?.image?.src,`<link rel="preload" href="${i?.desktop?.image?.src}" as="image" />`)}${core.RenderIf(!!i?.tablet?.image?.src,`<link rel="preload" href="${i?.tablet?.image?.src}" as="image" />`)}${core.RenderIf(!!i?.mobile?.image?.src,`<link rel="preload" href="${i?.mobile?.image?.src}" as="image" />`)}`)}
+    ${core.RenderIf(!!r?.preloadBgImage,`${core.RenderIf(!!a?.desktop?.image?.src,`<link rel="preload" href="${a?.desktop?.image?.src}" as="image" />`)}${core.RenderIf(!!a?.tablet?.image?.src,`<link rel="preload" href="${a?.tablet?.image?.src}" as="image" />`)}${core.RenderIf(!!a?.mobile?.image?.src,`<link rel="preload" href="${a?.mobile?.image?.src}" as="image" />`)}`)}
 
     ${core.RenderIf(!!l,"{% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}")}
 
     ${system.If(l,core.template`
-        <${a}
+        <${i}
           class="${h} ${l?helpers$1.getSettingPreloadData("gps-lazy"):""}"
           style="${u}"
         >
           ${R}
-        </${a}>
+        </${i}>
       `,core.template`${R}`)}
   `};exports.default=Row;

package/dist/cjs/grid/components/row/common/classes.js

@@ -1 +1 @@
-"use strict";var system=require("@gem-sdk/system");const getClass=s=>{let{builderProps:e,advanced:l,className:g}=s,a=system.createClass({"gp-background-video gp-absolute gp-overflow-hidden gp-w-full gp-h-full left-0 top-0 !gp-block":!0}),t=system.createClass({"gp-bg-video gp-relative gp-h-full":!0}),p=system.createClass({...g&&{[g]:!0},...e?.uid&&{[e.uid]:!0},"gp-relative gp-mx-auto gp-mb-0 gp-grid gp-max-w-full gp-transition-colors gp-duration-200 gp-ease-in-out [&_*]:gp-max-w-full gp-grid-rows-[1fr]":!0,...l?.cssClass&&{[l?.cssClass]:!0}}),r=system.createClass({"gp-mx-auto gp-max-w-full [&_*]:gp-max-w-full":!0}),u=system.createClass({"gp-h-full gp-w-full !gp-max-w-none gp-background-article":!0}),o=system.createClass({"!gp-w-[500%] !gp-ml-[-200%] !gp-h-full !gp-max-w-none gp-scale-[104%]":!0});return{rowClass:p,backgroundBoxClass:a,backgroundBoxInnerClass:t,sectionClass:r,wrapperYoutubeClasses:u,iframeYoutubeClasses:o}};exports.getClass=getClass;
+"use strict";var system=require("@gem-sdk/system");const getClass=s=>{let{builderProps:e,advanced:l,className:g}=s,a=system.createClass({"gp-background-video gp-absolute gp-overflow-hidden gp-w-full gp-h-full left-0 top-0 !gp-block":!0}),p=system.createClass({"gp-bg-video gp-relative gp-h-full":!0}),t=system.createClass({...g&&{[g]:!0},...e?.uid&&{[e.uid]:!0},"gp-relative gp-mx-auto gp-mb-0 gp-grid gp-max-w-full gp-transition-colors gp-duration-200 gp-ease-in-out [&_*]:gp-max-w-full gp-grid-rows-[1fr]":!0,...l?.cssClass&&{[l?.cssClass]:!0}}),r=system.createClass({"gp-mx-auto gp-max-w-full [&_*]:gp-max-w-full":!0}),u=system.createClass({"gp-pb-[56.25%] gp-h-full gp-w-full !gp-max-w-none gp-background-article":!0}),o=system.createClass({"!gp-w-[500%] !gp-ml-[-200%] !gp-h-full !gp-max-w-none gp-scale-[104%]":!0});return{rowClass:t,backgroundBoxClass:a,backgroundBoxInnerClass:p,sectionClass:r,wrapperYoutubeClasses:u,iframeYoutubeClasses:o}};exports.getClass=getClass;

package/dist/cjs/grid/components/row/common/helpers.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),system=require("@gem-sdk/system");const getResponsiveSetting=e=>{let t=e.desktop,r=e.tablet?e.tablet:t,d=e.mobile?e.mobile:r;return{desktop:t,tablet:r,mobile:d}},defaultWidth={desktop:"1200px",tablet:"100%",mobile:"100%"},getStyleByDevice=(e,t)=>t?.[e]==="100%"?{contentWidth:"100%",wrapperWidth:"100%",wrapperPadding:"var(--g-ct-p)"}:t?.[e]==="default"?{contentWidth:`var(--g-ct-w, ${defaultWidth[e]})`,wrapperWidth:`calc(var(--g-ct-w, ${defaultWidth[e]}) + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"}:t?.[e]!==void 0?{contentWidth:t?.[e],wrapperWidth:`calc(${t?.[e]} + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"}:{contentWidth:void 0,wrapperWidth:`calc(var(--g-ct-w, ${defaultWidth[e]}) + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"},createStyleObject=e=>{let t=getStyleByDevice("desktop",e),r=getStyleByDevice("tablet",e),d=getStyleByDevice("mobile",e);return{content:{desktop:t.contentWidth,tablet:r.contentWidth,mobile:d.contentWidth},wrapper:{desktop:t.wrapperWidth,tablet:r.wrapperWidth,mobile:d.wrapperWidth},padding:{desktop:t.wrapperPadding,tablet:r.wrapperPadding,mobile:d.wrapperPadding}}},getData=e=>{let{styles:t,builderProps:r}=e,d=system.createStateOrContext({background:t?.background,uid:r?.uid});return{stateData:core.dataStringify(d).replaceAll("'","'")}};function reduceRadiusForState(e,t){if(!e||!t)return{};let r=("string"==typeof e?e.split(" "):[]).map(e=>parseInt(e,10)||0),d=Object.fromEntries(["btrr","bblr","bbrr","btlr"].map((e,d)=>[e,Math.max(0,(parseInt(t[e]??"0",10)||0)-(r[d]||0))+"px"]));return{...d,radiusType:t.radiusType}}function reduceBorderRadiusForDevice(e,t){if(!e||!t)return{};let r={};return["normal","hover","active"].forEach(d=>{let i=e?.[d],o=t?.[d];i&&o&&(r[d]=reduceRadiusForState(i.width,o))}),r}function getInnerRadiusExcludeBorder(e,t){return{desktop:reduceBorderRadiusForDevice(e?.desktop,t?.desktop),tablet:reduceBorderRadiusForDevice(e?.tablet??e?.desktop,t?.tablet??t?.desktop),mobile:reduceBorderRadiusForDevice(e?.mobile??e?.tablet??e?.desktop,t?.mobile??t?.tablet??t?.desktop)}}const checkHasBackgroundVideo=e=>core.DEVICES.some(t=>{let r=core.getValueByDevice(e,t);return!!r&&(r?.videoType==="html5"&&r?.videoHtml5||r?.videoType==="youtube"&&r?.video)}),isRenderHtmlVideo=e=>{let t=getResponsiveSetting(e||{}),r=t.desktop?.videoType,d=t.tablet?.videoType,i=t.mobile?.videoType;return"html5"==r||"html5"==d||"html5"==i},isRenderYoutubeVideo=e=>{let t=getResponsiveSetting(e||{}),r=t.desktop?.videoType,d=t.tablet?.videoType,i=t.mobile?.videoType;return"youtube"==r||"youtube"==d||"youtube"==i};exports.checkHasBackgroundVideo=checkHasBackgroundVideo,exports.createStyleObject=createStyleObject,exports.getData=getData,exports.getInnerRadiusExcludeBorder=getInnerRadiusExcludeBorder,exports.isRenderHtmlVideo=isRenderHtmlVideo,exports.isRenderYoutubeVideo=isRenderYoutubeVideo;
+"use strict";var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers=require("../../../../helpers.js");const getResponsiveSetting=e=>{let t=e.desktop,r=e.tablet?e.tablet:t,d=e.mobile?e.mobile:r;return{desktop:t,tablet:r,mobile:d}},defaultWidth={desktop:"1200px",tablet:"100%",mobile:"100%"},getStyleByDevice=(e,t)=>t?.[e]==="100%"?{contentWidth:"100%",wrapperWidth:"100%",wrapperPadding:"var(--g-ct-p)"}:t?.[e]==="default"?{contentWidth:`var(--g-ct-w, ${defaultWidth[e]})`,wrapperWidth:`calc(var(--g-ct-w, ${defaultWidth[e]}) + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"}:t?.[e]!==void 0?{contentWidth:t?.[e],wrapperWidth:`calc(${t?.[e]} + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"}:{contentWidth:void 0,wrapperWidth:`calc(var(--g-ct-w, ${defaultWidth[e]}) + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"},createStyleObject=e=>{let t=getStyleByDevice("desktop",e),r=getStyleByDevice("tablet",e),d=getStyleByDevice("mobile",e);return{content:{desktop:t.contentWidth,tablet:r.contentWidth,mobile:d.contentWidth},wrapper:{desktop:t.wrapperWidth,tablet:r.wrapperWidth,mobile:d.wrapperWidth},padding:{desktop:t.wrapperPadding,tablet:r.wrapperPadding,mobile:d.wrapperPadding}}},getData=e=>{let{styles:t,builderProps:r}=e,d=system.createStateOrContext({background:t?.background,uid:r?.uid});return{stateData:core.dataStringify(d).replaceAll("'","'")}};function reduceRadiusForState(e,t){if(!e||!t)return{};let r=("string"==typeof e?e.split(" "):[]).map(e=>parseInt(e,10)||0),d=Object.fromEntries(["btrr","bblr","bbrr","btlr"].map((e,d)=>[e,Math.max(0,(parseInt(t[e]??"0",10)||0)-(r[d]||0))+"px"]));return{...d,radiusType:t.radiusType}}function reduceBorderRadiusForDevice(e,t){if(!e||!t)return{};let r={};return["normal","hover","active"].forEach(d=>{let i=e?.[d],a=t?.[d];i&&a&&(r[d]=reduceRadiusForState(i.width,a))}),r}function getInnerRadiusExcludeBorder(e,t){return{desktop:reduceBorderRadiusForDevice(e?.desktop,t?.desktop),tablet:reduceBorderRadiusForDevice(e?.tablet??e?.desktop,t?.tablet??t?.desktop),mobile:reduceBorderRadiusForDevice(e?.mobile??e?.tablet??e?.desktop,t?.mobile??t?.tablet??t?.desktop)}}const checkHasBackgroundVideo=e=>core.DEVICES.some(t=>{let r=core.getValueByDevice(e,t);return!!r&&(r?.videoType==="html5"&&r?.videoHtml5||r?.videoType==="youtube"&&r?.video)}),isRenderHtmlVideo=e=>{let t=getResponsiveSetting(e||{}),r=t.desktop?.videoType,d=t.tablet?.videoType,i=t.mobile?.videoType;return"html5"==r||"html5"==d||"html5"==i},isRenderYoutubeVideo=e=>{let t=getResponsiveSetting(e||{}),r=t.desktop?.videoType,d=t.tablet?.videoType,i=t.mobile?.videoType;return"youtube"==r||"youtube"==d||"youtube"==i},getBackgroundTranslatedImageVideo=(e,t)=>{let{builderProps:r,styles:d}=t,i=d?.translate?"true":void 0,a=r?.uid;if(!e||!i)return e;let o=core.cloneDeep(e);for(let e in o){let t=o[e];if(t){if(t.image?.src){let r=helpers.getDynamicSourceLocales({val:t.image.src,uid:a,settingId:`background_${e}_image_src`,translate:i});t.image.src=String(r)}if("youtube"===t.videoType&&t.video){let r=helpers.getDynamicSourceLocales({val:t.video,uid:a,settingId:`background_${e}_video`,translate:i});t.video=String(r)}if("html5"===t.videoType&&t.videoHtml5){let r=helpers.getDynamicSourceLocales({val:t.videoHtml5,uid:a,settingId:`background_${e}_videoHtml5`,translate:i});t.videoHtml5=String(r)}}}return o};exports.checkHasBackgroundVideo=checkHasBackgroundVideo,exports.createStyleObject=createStyleObject,exports.getBackgroundTranslatedImageVideo=getBackgroundTranslatedImageVideo,exports.getData=getData,exports.getInnerRadiusExcludeBorder=getInnerRadiusExcludeBorder,exports.isRenderHtmlVideo=isRenderHtmlVideo,exports.isRenderYoutubeVideo=isRenderYoutubeVideo;

package/dist/cjs/grid/settings/configs/row/settings.js

@@ -1 +1 @@
-"use strict";const RowSettings=[{id:"setting",controls:[{id:"layout",type:"layout",devices:{desktop:{default:{cols:[12],display:"fill",gap:"8px"}}}},{id:"horizontalAlign",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",tooltip:"Align horizontal center",iconName:"gp-align-center"},{label:"End",value:"end",tooltip:"Align right",iconName:"gp-align-right"},{label:"Distribute",value:"space-between",tooltip:"Distribute horizontal spacing",iconName:"gp-align-space-between"}],devices:{desktop:{default:"start"}}},{id:"verticalAlign",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top",iconName:"gp-align-top"},{label:"Center",value:"center",tooltip:"Align vertical center",iconName:"gp-align-center-vertical"},{label:"End",value:"end",tooltip:"Align bottom",iconName:"gp-align-bottom"},{label:"Between",value:"space-between",tooltip:"Distribute vertical spacing",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"start"}}},{id:"inlineAlignment",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top",iconName:"gp-align-left"},{label:"Center",value:"center",tooltip:"Align center",iconName:"gp-align-center"},{label:"End",value:"end",tooltip:"Align end",iconName:"gp-align-right"}],default:"start"},{id:"blockAlignment",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top"},{label:"Center",value:"center",tooltip:"Align center"},{label:"End",value:"end",tooltip:"Align bottom"}],default:"start"}]},{id:"style",controls:[{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!1},tablet:{default:!1},mobile:{default:!1}}},{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,isRowWith:!0,fallbackValueRule:"init-value",devices:{desktop:{default:"default"}},displayOptions:[{label:"Default",value:"default",showValue:!0},{label:"Full",value:"100%",showValue:!0}]},{id:"height",type:"option:value",devices:{desktop:{default:"auto"}},options:[{label:"Full",value:"100%",tooltip:"Stretch to fill <br> vertical space"},{label:"Fit",value:"auto",tooltip:"Adjust size <br> based on content"}]},{id:"verticalGutter",type:"input:slider",units:["px"],min:0,max:120,fallbackValue:0,ignoreMax:!0,devices:{desktop:{default:"16px"}}},{id:"verticalGutterMobile",type:"input:slider",units:["px"],min:0,max:120,ignoreMax:!0,devices:{desktop:{default:"0px"}}},{id:"columnGap",type:"input:slider",min:0,max:120,step:1,ignoreMax:!0,units:["%"],showDefaultUnit:!0,devices:{desktop:{default:"1%"}}},{id:"background",type:"background-media",ignoreReRender:!0,showVideo:!0,devices:{desktop:{default:void 0}},compoDefaultValue:{desktop:{default:{type:"color",color:"#DDDDDD",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",preload:!1,video:"https://www.youtube.com/watch?v=drIt4RH_kyQ",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4",videoType:"youtube",loop:!0}}}},{id:"preloadBgImage",type:"toggle",label:"Preload",default:!1},{id:"border",type:"border-v2",devices:{desktop:{default:void 0}},compoDefaultValue:{desktop:{default:{normal:{border:"solid",color:"#121212",width:"1px",borderWidth:"1px"}}}}},{id:"rounded",type:"corner-v2",devices:{desktop:{default:{normal:void 0}}},compoDefaultValue:{desktop:{default:{normal:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}}},{id:"padding",type:"padding-v2",devices:{desktop:{default:{padding:{type:"small",top:"4px",left:"4px",bottom:"4px",right:"4px"}}}},compoDefaultValue:{desktop:{default:{padding:{type:"small",top:"4px",left:"4px",bottom:"4px",right:"4px"}}}}},{id:"boxShadow",type:"shadow-v2",devices:{desktop:{default:{normal:{}}}},compoDefaultValue:{desktop:{default:{normal:{}}}}}]}];exports.RowSettings=RowSettings;
+"use strict";const RowSettings=[{id:"setting",controls:[{id:"layout",type:"layout",devices:{desktop:{default:{cols:[12],display:"fill",gap:"8px"}}}},{id:"horizontalAlign",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",tooltip:"Align horizontal center",iconName:"gp-align-center"},{label:"End",value:"end",tooltip:"Align right",iconName:"gp-align-right"},{label:"Distribute",value:"space-between",tooltip:"Distribute horizontal spacing",iconName:"gp-align-space-between"}],devices:{desktop:{default:"start"}}},{id:"verticalAlign",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top",iconName:"gp-align-top"},{label:"Center",value:"center",tooltip:"Align vertical center",iconName:"gp-align-center-vertical"},{label:"End",value:"end",tooltip:"Align bottom",iconName:"gp-align-bottom"},{label:"Between",value:"space-between",tooltip:"Distribute vertical spacing",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"start"}}},{id:"inlineAlignment",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top",iconName:"gp-align-left"},{label:"Center",value:"center",tooltip:"Align center",iconName:"gp-align-center"},{label:"End",value:"end",tooltip:"Align end",iconName:"gp-align-right"}],default:"start"},{id:"blockAlignment",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top"},{label:"Center",value:"center",tooltip:"Align center"},{label:"End",value:"end",tooltip:"Align bottom"}],default:"start"}]},{id:"style",controls:[{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!1},tablet:{default:!1},mobile:{default:!1}}},{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,isRowWith:!0,fallbackValueRule:"init-value",devices:{desktop:{default:"default"}},displayOptions:[{label:"Default",value:"default",showValue:!0},{label:"Full",value:"100%",showValue:!0}]},{id:"height",type:"option:value",devices:{desktop:{default:"auto"}},options:[{label:"Full",value:"100%",tooltip:"Stretch to fill <br> vertical space"},{label:"Fit",value:"auto",tooltip:"Adjust size <br> based on content"}]},{id:"verticalGutter",type:"input:slider",units:["px"],min:0,max:120,fallbackValue:0,ignoreMax:!0,devices:{desktop:{default:"16px"}}},{id:"verticalGutterMobile",type:"input:slider",units:["px"],min:0,max:120,ignoreMax:!0,devices:{desktop:{default:"0px"}}},{id:"columnGap",type:"input:slider",min:0,max:120,step:1,ignoreMax:!0,units:["%"],showDefaultUnit:!0,devices:{desktop:{default:"1%"}}},{id:"background",type:"background-media",ignoreReRender:!0,showVideo:!0,devices:{desktop:{default:void 0}},compoDefaultValue:{desktop:{default:{type:"color",color:"#DDDDDD",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",preload:!1,video:"https://www.youtube.com/watch?v=drIt4RH_kyQ",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4",videoType:"youtube",loop:!0}}}},{id:"translate",type:"input",default:[{id:"background",fields:["image.src","video","videoHtml5"]}]},{id:"preloadBgImage",type:"toggle",label:"Preload",default:!1},{id:"border",type:"border-v2",devices:{desktop:{default:void 0}},compoDefaultValue:{desktop:{default:{normal:{border:"solid",color:"#121212",width:"1px",borderWidth:"1px"}}}}},{id:"rounded",type:"corner-v2",devices:{desktop:{default:{normal:void 0}}},compoDefaultValue:{desktop:{default:{normal:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}}},{id:"padding",type:"padding-v2",devices:{desktop:{default:{padding:{type:"small",top:"4px",left:"4px",bottom:"4px",right:"4px"}}}},compoDefaultValue:{desktop:{default:{padding:{type:"small",top:"4px",left:"4px",bottom:"4px",right:"4px"}}}}},{id:"boxShadow",type:"shadow-v2",devices:{desktop:{default:{normal:{}}}},compoDefaultValue:{desktop:{default:{normal:{}}}}}]}];exports.RowSettings=RowSettings;

package/dist/cjs/hero-banner/common/helpers.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),helpers=require("../../image/common/helpers.js"),constant=require("../../constant.js"),_const=require("./const.js");const getContentPosition=(e,t,o)=>{let i={};return core.DEVICES.map(r=>{let a=core.getResponsiveValueByScreen(e,r),l=core.getResponsiveValueByScreen(t,r),n=core.getResponsiveValueByScreen(o,r);i={...i,[r]:1>=(a?.cols?.length||1)?l:n}}),i},getEnableBgImageByDevice=(e,t)=>{if(!core.getResponsiveValueByScreen(getBgImage(t),e))return!1;if(!t?.[e]){if("mobile"===e)return t?.tablet?.type==="image"||t?.desktop?.type==="image"&&!t?.tablet;if("tablet"===e)return t?.desktop?.type==="image"}return t?.[e]?.type==="image"},getBgImage=e=>{if(!e)return{};let t={desktop:e?.desktop?.image,tablet:e?.tablet?.image,mobile:e?.mobile?.image};return t},imagePlaceholder=e=>{let t=getBgImage(e);return{desktop:helpers.createBlurDataURL(t?.desktop?.width??0,t?.desktop?.height??0),tablet:helpers.createBlurDataURL(t?.tablet?.width??t?.desktop?.width??0,t?.tablet?.height??t?.desktop?.width??0),mobile:helpers.createBlurDataURL(t?.mobile?.width??t?.tablet?.width??t?.desktop?.width??0,t?.mobile?.height??t?.tablet?.height??t?.desktop?.width??0)}},getBgImageByScreen=(e,t,o,i)=>{if(!e)return"";let r=getBgImage(e),a=core.getResponsiveValueByScreen(e,t),l=o?`url(${imagePlaceholder(e)[t]})`:`url(${helpers.getImageSrc(core.getResponsiveValueByScreen(r,t),t,i)})`,n=a?.color?`, ${a.color}`:"";return a?.color?.includes(core.GRADIENT_BGR_KEY)&&a?.type==="image"?`${l}${n}`:a?.color?.includes(core.GRADIENT_BGR_KEY)&&a?.type!=="image"?`${a.color}`:a?.type==="image"?l:"url()"},getBackgroundImageHeroBanner=(e,t=!1,o=!1)=>{if(!e)return;let i={};return core.DEVICES.forEach(r=>{i={...i,[r]:getBgImageByScreen(e,r,t,o)}}),core.makeStyleResponsive("bgi",i)},getAttachmentDevice=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=e?.[o]?.attachment;t={...t,[o]:"fixed"===i?"fixed":"absolute"}}),t},horizontalAlign=(e,t,o)=>mapContentPositionToHorizontal(getContentPosition(e,t,o)),scrollToContentBanner=e=>e?.target?.closest("div.gp-hero-banner-row")?.scrollTo(0,0),getDataVideoHeroBannerResponsive=(e,t)=>{switch(e){case"desktop":if(t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"tablet":if(t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.tablet&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"mobile":if(t?.mobile?.type==="video")return{device:"mobile",data:t.mobile};if(!t?.mobile&&t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.mobile&&!t?.tablet?.type&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop}}},getVisibilityStyle=e=>e?Object.keys(e).filter(e=>["--d","--d-tablet","--d-mobile"].includes(e)).reduce((t,o)=>({...t,[o]:e?.[o]!=="none"?"flex":e?.[o]}),{}):{},getVideoRatioFromSizeSetting=(e,t)=>{if(!e)return t;let o=e?.shapeVideo;return"custom"===o?e?.shapeValue||"auto":void 0!==o?o:e?.shapeValue??t},applyVideoRatioForDevice=({shapeByDevice:e,fallbackRatio:t,device:o,currentResult:i})=>{let r=getVideoRatioFromSizeSetting(e,t);return r&&"auto"!==r?{...i,[o]:r}:i},getStyleAspectRatioHeroBannerCustom=(e,t)=>{let o=core.getAspectRatioGlobalSize(t),i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=core.getResponsiveValueByScreen(t,i),a=!!getDataVideoHeroBannerResponsive(i,e);a&&(o=applyVideoRatioForDevice({shapeByDevice:r,fallbackRatio:o?.[i],device:i,currentResult:o}))}),core.makeStyleResponsive("aspect",o)},mapContentPositionToHorizontal=e=>{let t={};for(let o in e)"top"===e[o]?t[o]="start":"bottom"===e[o]?t[o]="end":t[o]="center";return t},getDisplayStyleByFitContent=(e,t)=>{let o={desktop:"none",tablet:"none",mobile:"none"},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=core.getResponsiveValueByScreen(e,i),a=!!getDataVideoHeroBannerResponsive(i,t),l=r?.shape,n=r?.height,s="original"===l&&"fit-content"!==n&&!a;o={...o,[i]:s?"block":"none"}}),core.makeStyleResponsive("d",o)},getAspectRatioCandidate=(e,t)=>{if(!e)return;if(!t)return e.shapeValue;let o=e.shapeVideo;return"custom"===o?e.shapeValue:o},collectAspectRatioByDevice=(e,t)=>{let o=!1,i=core.DEVICES.reduce((i,r)=>{let a=core.getResponsiveValueByScreen(e,r),l=core.getResponsiveValueByScreen(t,r),n=getAspectRatioCandidate(a,l?.type==="video");return n&&(i[r]=n,o=!0),i},{});return{aspectRatio:o?i:void 0}},collectYoutubeAspectRatio=(e,t,o)=>core.DEVICES.reduce((i,r)=>{let a=core.getValueByDevice(e,r),l=a?.type==="video"?a?.videoType:void 0,n=core.getValueByDevice(t,r),s=o?.[r];return s&&"youtube"===l&&"cover"!==n&&(i[r]=s),i},{}),getAspectRatio=(e,t)=>{let{aspectRatio:o}=collectAspectRatioByDevice(e,t);return o},getYoutubeAspectRatio=(e,t,o)=>{let i=collectYoutubeAspectRatio(e,t,o);return Object.keys(i).length?i:void 0},getWidth=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=e?.[o];i&&(t={...t,[o]:"default"===i?"var(--g-ct-w, 1200px)":i})}),t},getPercentageVisible=(e,t)=>{let{top:o,height:i}=e,r=-i;if(o<r)return 0;if(o>t)return 100;let a=(o-r)/(t-r)*100;return Math.min(Math.max(a,0),100)},isScaleImage=({enableParallax:e=!1,attachment:t="scroll"})=>!!e||"fixed"===t,getHeightHeroBanner=(e,t)=>{let o={},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=isScaleImage({enableParallax:t,attachment:e[i]?.attachment});o={...o,[i]:t?"150%":r?"100vh":"100%"}}),core.makeStyleResponsive("h",o)},getWidthHeroBanner=(e,t)=>{let o={},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=isScaleImage({enableParallax:t,attachment:e[i]?.attachment});o={...o,[i]:r?"100vw":"100%"}}),core.makeStyleResponsive("w",o)},getTopHeroBanner=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{t={...t,[o]:e[o]?.attachment==="fixed"?"0px":""}}),core.makeStyleResponsive("top",t)},getStyleHeroBannerBg=(e,t)=>{let o=getHeightHeroBanner(e,t),i=getWidthHeroBanner(e,t),r=getTopHeroBanner(e);return{...o,...i,...r}},calcRounderClipPath=(e,t=0,o=0)=>{let i=t,r=t;if(t>o?i=o:r=o,e>=999){let t=e-i;return t>0?t:0}let a=e-r;return a>0?a:0},getClipPath=(e,t)=>{if(!t)return`${_const.DEFAULT_CLIP_PATH}`;let[o,i,r,a]=(e??"0 0 0 0").split(" ").map(e=>parseInt(e??"0")||0),{btlr:l,btrr:n,bbrr:s,bblr:p}=t,g=calcRounderClipPath(parseInt(l??"0")||0,o,a),c=calcRounderClipPath(parseInt(n??"0")||0,o,i),b=calcRounderClipPath(parseInt(s??"0")||0,i,r),d=calcRounderClipPath(parseInt(p??"0")||0,r,a);return[g,c,b,d].every(e=>0===e)?`${_const.DEFAULT_CLIP_PATH}`:`inset(0 0 0 round ${g}px ${c}px ${b}px ${d}px)`},getClassAlignBanner=e=>({"!gp-self-start":"left"===e.desktop,"!gp-self-center":"center"===e.desktop,"!gp-self-end":"right"===e.desktop,"tablet:!gp-self-start":"left"===e.tablet,"tablet:!gp-self-center":"center"===e.tablet,"tablet:!gp-self-end":"right"===e.tablet,"mobile:!gp-self-start":"left"===e.mobile,"mobile:!gp-self-center":"center"===e.mobile,"mobile:!gp-self-end":"right"===e.mobile}),get1ColLayout=({device:e,settingLayoutRes:t,contentPosition1ColRes:o})=>{let i=t[e]?.cols??[],r=i.length<=1,a=o[e];if(!r||!a)return;let l=["space-between","top","center","bottom"];return l.includes(a)?a:void 0},getClassSpaceBetween=(e,t)=>{let o=getResponsiveSetting(e),i=getResponsiveSetting(t),r={desktop:get1ColLayout({device:"desktop",settingLayoutRes:o,contentPosition1ColRes:i}),tablet:get1ColLayout({device:"tablet",settingLayoutRes:o,contentPosition1ColRes:i}),mobile:get1ColLayout({device:"mobile",settingLayoutRes:o,contentPosition1ColRes:i})},a={"space-between":{desktop:"!gp-h-full !gp-content-stretch [&>*]:!gp-justify-between [&>*:nth-child(2)]:gp-absolute [&>*:nth-child(2)]:gp-hidden",tablet:"tablet:!gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between tablet:[&>*:nth-child(2)]:gp-absolute tablet:[&>*:nth-child(2)]:gp-hidden",mobile:"mobile:!gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between mobile:[&>*:nth-child(2)]:gp-absolute  mobile:[&>*:nth-child(2)]:gp-hidden"},top:{desktop:"!gp-content-stretch [&>*]:!gp-justify-start",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-start",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-start"},center:{desktop:"!gp-content-stretch [&>*]:!gp-justify-center",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-center",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-center"},bottom:{desktop:"!gp-content-stretch [&>*]:!gp-justify-end",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-end",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-end"}},l={};return core.DEVICES.forEach(e=>{let t=r[e],o=a?.[t]?.[e];l[o]=!0}),l},getClassSpaceBetweenLeftRight=e=>{let t=getResponsiveSetting(e),o=t?.desktop?.type=="left-distributed"||t?.desktop?.type=="right-distributed",i=t?.tablet?.type=="left-distributed"||t?.tablet?.type=="right-distributed",r=t?.mobile?.type=="left-distributed"||t?.mobile?.type=="right-distributed";return{"gp-h-full tablet:gp-h-auto mobile:gp-h-auto [&>*]:!gp-justify-between":o,"tablet:!gp-h-full tablet:[&>*]:!gp-justify-between mobile:gp-h-auto":i,"mobile:!gp-h-full mobile:[&>*]:!gp-justify-between":r,"mobile:!gp-h-auto":!r}},getClassForStretchContent=e=>{let t={desktop:"none",tablet:"none",mobile:"none"},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=core.getResponsiveValueByScreen(e,o);t={...t,[o]:i}}),core.cls("space-between"===t.desktop?"[&>*>*]:!gp-justify-between":"","space-between"===t.tablet?"tablet:[&>*>*]:!gp-justify-between ":`tablet:[&>*>*]:!gp-justify-${e?.tablet}`,"space-between"===t.mobile?"mobile:[&>*>*]:!gp-justify-between ":`mobile:[&>*>*]:!gp-justify-${e?.mobile}`)},getClassForContentByFitContent=(e,t)=>{let o={desktop:!1,tablet:!1,mobile:!1},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=core.getResponsiveValueByScreen(e,i),a=!!getDataVideoHeroBannerResponsive(i,t),l=r?.shape,n=r?.height,s="original"===l&&"fit-content"!==n;o={...o,[i]:s&&!a}}),core.cls(o.desktop?"!gp-absolute":"",o.tablet?"tablet:!gp-absolute":"tablet:!gp-relative",o.mobile?"mobile:!gp-absolute":"mobile:!gp-relative")},getClassContentPosition=e=>{let t={center:"center",top:"start",bottom:"end","space-between":"between"},o=e.desktop||"center",i=e.tablet||o,r=e.mobile||i;return{[`gp-justify-${t[o||"center"]}`]:!!o,[`tablet:gp-justify-${t[i||"center"]}`]:!!i,[`mobile:gp-justify-${t[r||"center"]}`]:!!r}},getResponsiveSetting=e=>{let t=e.desktop,o=e.tablet?e.tablet:t,i=e.mobile?e.mobile:o;return{desktop:t,tablet:o,mobile:i}},showVideoType=e=>core.DEVICES.some(t=>{let o=core.getValueByDevice(e,t);return o?.type!=="color"&&o?.type!=="image"&&!!o&&(o?.videoType==="html5"&&o?.videoHtml5||o?.videoType==="youtube"&&o?.video)});function debounce(e,t){let o;return function(...i){clearTimeout(o),o=setTimeout(()=>e.apply(this,i),t)}}const fallbackImg="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+",getBannerLink=e=>{let t=e?.link;return t?.type==="go-to-sales-page"?{type:"go-to-sales-page",link:constant.HREF_TO_SALES_PAGE,target:"_self"}:t},formatHoverScale=e=>e?String(e).includes("%")?`${e}`:`${e}%`:"100%",opacityEnabledData=e=>{let{overlayColor:t,overlayOpacity:o}=e??{},i=!t?.normal||o?.normal=="0%"||!o?.normal;return{disableOpacity:i}},getOpacityHover=e=>{let{overlayOpacity:t}=e??{},o="number"!=typeof t?.hover||isNaN(t?.hover)?"string"==typeof t?.hover?`${parseInt(t?.hover)}%`:"":`${t?.hover}%`,i="number"!=typeof t?.normal||isNaN(t?.normal)?"string"==typeof t?.normal?`${parseInt(t?.normal)}%`:"0%":`${t?.normal}%`;return o||i},getVideoAspectRatio=(e,t)=>{if(!e||!t)return 16/9;let o=core.getResponsiveValueByScreen(e,t),i=o?.ratio;if(!i)return 16/9;if("custom"===i){let e=o?.videoCustomRatio;if(e?.width&&e?.height){let t=Number(e.width),o=Number(e.height);if(t>0&&o>0)return t/o}return 16/9}let r=i.match(/^(\d+(?:\.\d+)?)[/:](\d+(?:\.\d+)?)$/);if(r&&r[1]&&r[2]){let e=parseFloat(r[1]),t=parseFloat(r[2]);if(e>0&&t>0)return e/t}return 16/9},resetVideoIframeStyle=e=>{e&&(e.style.removeProperty("width"),e.style.removeProperty("height"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("transform"),e.style.removeProperty("position"))},setVideoWrapperStyle=e=>{Object.assign(e.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%"})},resetVideoWrapperStyle=e=>{e.style.removeProperty("position"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("width"),e.style.removeProperty("height")},getContainerRatio=e=>{if(!e)return 0;let{width:t,height:o}=e.getBoundingClientRect();return t&&o?t/o:0},updateVideoIframeSize=({iframeEl:e,containerRatio:t,videoObjectFit:o,background:i,currentDevice:r})=>{let a,l;if(!e||!t)return;let n=getVideoAspectRatio(i,r);if("contain"===o){Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:"100%",height:"100%",maxWidth:"none",transform:"translate(-50%, -50%)"});return}t>=n?(a=100,l=t/n*100):(l=100,a=n/t*100),Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:`${a}%`,height:`${l}%`,maxWidth:"none",transform:"translate(-50%, -50%)"})};exports.collectAspectRatioByDevice=collectAspectRatioByDevice,exports.collectYoutubeAspectRatio=collectYoutubeAspectRatio,exports.debounce=debounce,exports.fallbackImg="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+",exports.formatHoverScale=formatHoverScale,exports.getAspectRatio=getAspectRatio,exports.getAttachmentDevice=getAttachmentDevice,exports.getBackgroundImageHeroBanner=getBackgroundImageHeroBanner,exports.getBannerLink=getBannerLink,exports.getBgImage=getBgImage,exports.getClassAlignBanner=getClassAlignBanner,exports.getClassContentPosition=getClassContentPosition,exports.getClassForContentByFitContent=getClassForContentByFitContent,exports.getClassForStretchContent=getClassForStretchContent,exports.getClassSpaceBetween=getClassSpaceBetween,exports.getClassSpaceBetweenLeftRight=getClassSpaceBetweenLeftRight,exports.getClipPath=getClipPath,exports.getContainerRatio=getContainerRatio,exports.getContentPosition=getContentPosition,exports.getDataVideoHeroBannerResponsive=getDataVideoHeroBannerResponsive,exports.getDisplayStyleByFitContent=getDisplayStyleByFitContent,exports.getEnableBgImageByDevice=getEnableBgImageByDevice,exports.getOpacityHover=getOpacityHover,exports.getPercentageVisible=getPercentageVisible,exports.getResponsiveSetting=getResponsiveSetting,exports.getStyleAspectRatioHeroBannerCustom=getStyleAspectRatioHeroBannerCustom,exports.getStyleHeroBannerBg=getStyleHeroBannerBg,exports.getVideoAspectRatio=getVideoAspectRatio,exports.getVisibilityStyle=getVisibilityStyle,exports.getWidth=getWidth,exports.getYoutubeAspectRatio=getYoutubeAspectRatio,exports.horizontalAlign=horizontalAlign,exports.imagePlaceholder=imagePlaceholder,exports.isScaleImage=isScaleImage,exports.mapContentPositionToHorizontal=mapContentPositionToHorizontal,exports.opacityEnabledData=opacityEnabledData,exports.resetVideoIframeStyle=resetVideoIframeStyle,exports.resetVideoWrapperStyle=resetVideoWrapperStyle,exports.scrollToContentBanner=scrollToContentBanner,exports.setVideoWrapperStyle=setVideoWrapperStyle,exports.showVideoType=showVideoType,exports.updateVideoIframeSize=updateVideoIframeSize;
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../image/common/helpers.js"),constant=require("../../constant.js"),_const=require("./const.js");const getContentPosition=(e,t,o)=>{let i={};return core.DEVICES.map(r=>{let a=core.getResponsiveValueByScreen(e,r),l=core.getResponsiveValueByScreen(t,r),n=core.getResponsiveValueByScreen(o,r);i={...i,[r]:1>=(a?.cols?.length||1)?l:n}}),i},getEnableBgImageByDevice=(e,t)=>{if(!core.getResponsiveValueByScreen(getBgImage(t),e))return!1;if(!t?.[e]){if("mobile"===e)return t?.tablet?.type==="image"||t?.desktop?.type==="image"&&!t?.tablet;if("tablet"===e)return t?.desktop?.type==="image"}return t?.[e]?.type==="image"},getBgImage=e=>{if(!e)return{};let t={desktop:e?.desktop?.image,tablet:e?.tablet?.image,mobile:e?.mobile?.image};return t},imagePlaceholder=e=>{let t=getBgImage(e);return{desktop:helpers.createBlurDataURL(t?.desktop?.width??0,t?.desktop?.height??0),tablet:helpers.createBlurDataURL(t?.tablet?.width??t?.desktop?.width??0,t?.tablet?.height??t?.desktop?.width??0),mobile:helpers.createBlurDataURL(t?.mobile?.width??t?.tablet?.width??t?.desktop?.width??0,t?.mobile?.height??t?.tablet?.height??t?.desktop?.width??0)}},getBgImageByScreen=(e,t,o,i)=>{if(!e)return"";let r=getBgImage(e),a=core.getResponsiveValueByScreen(e,t),l=o?`url(${imagePlaceholder(e)[t]})`:`url(${helpers.getImageSrc(core.getResponsiveValueByScreen(r,t),t,i)})`,n=a?.color?`, ${a.color}`:"";return a?.color?.includes(core.GRADIENT_BGR_KEY)&&a?.type==="image"?`${l}${n}`:a?.color?.includes(core.GRADIENT_BGR_KEY)&&a?.type!=="image"?`${a.color}`:a?.type==="image"?l:"url()"},getBackgroundImageHeroBanner=(e,t=!1,o=!1)=>{if(!e)return;let i={};return core.DEVICES.forEach(r=>{i={...i,[r]:getBgImageByScreen(e,r,t,o)}}),core.makeStyleResponsive("bgi",i)},getAttachmentDevice=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=e?.[o]?.attachment;t={...t,[o]:"fixed"===i?"fixed":"absolute"}}),t},horizontalAlign=(e,t,o)=>mapContentPositionToHorizontal(getContentPosition(e,t,o)),scrollToContentBanner=e=>e?.target?.closest("div.gp-hero-banner-row")?.scrollTo(0,0),getDataVideoHeroBannerResponsive=(e,t)=>{switch(e){case"desktop":if(t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"tablet":if(t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.tablet&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"mobile":if(t?.mobile?.type==="video")return{device:"mobile",data:t.mobile};if(!t?.mobile&&t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.mobile&&!t?.tablet?.type&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop}}},getVisibilityStyle=e=>e?Object.keys(e).filter(e=>["--d","--d-tablet","--d-mobile"].includes(e)).reduce((t,o)=>({...t,[o]:e?.[o]!=="none"?"flex":e?.[o]}),{}):{},getVideoRatioFromSizeSetting=(e,t)=>{if(!e)return t;let o=e?.shapeVideo;return"custom"===o?e?.shapeValue||"auto":void 0!==o?o:e?.shapeValue??t},applyVideoRatioForDevice=({shapeByDevice:e,fallbackRatio:t,device:o,currentResult:i})=>{let r=getVideoRatioFromSizeSetting(e,t);return r&&"auto"!==r?{...i,[o]:r}:i},getStyleAspectRatioHeroBannerCustom=(e,t)=>{let o=core.getAspectRatioGlobalSize(t),i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=core.getResponsiveValueByScreen(t,i),a=!!getDataVideoHeroBannerResponsive(i,e);a&&(o=applyVideoRatioForDevice({shapeByDevice:r,fallbackRatio:o?.[i],device:i,currentResult:o}))}),core.makeStyleResponsive("aspect",o)},mapContentPositionToHorizontal=e=>{let t={};for(let o in e)"top"===e[o]?t[o]="start":"bottom"===e[o]?t[o]="end":t[o]="center";return t},getDisplayStyleByFitContent=(e,t)=>{let o={desktop:"none",tablet:"none",mobile:"none"},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=core.getResponsiveValueByScreen(e,i),a=!!getDataVideoHeroBannerResponsive(i,t),l=r?.shape,n=r?.height,s="original"===l&&"fit-content"!==n&&!a;o={...o,[i]:s?"block":"none"}}),core.makeStyleResponsive("d",o)},getAspectRatioCandidate=(e,t)=>{if(!e)return;if(!t)return e.shapeValue;let o=e.shapeVideo;return"custom"===o?e.shapeValue:o},collectAspectRatioByDevice=(e,t)=>{let o=!1,i=core.DEVICES.reduce((i,r)=>{let a=core.getResponsiveValueByScreen(e,r),l=core.getResponsiveValueByScreen(t,r),n=getAspectRatioCandidate(a,l?.type==="video");return n&&(i[r]=n,o=!0),i},{});return{aspectRatio:o?i:void 0}},collectYoutubeAspectRatio=(e,t,o)=>core.DEVICES.reduce((i,r)=>{let a=core.getValueByDevice(e,r),l=a?.type==="video"?a?.videoType:void 0,n=core.getValueByDevice(t,r),s=o?.[r];return s&&"youtube"===l&&"cover"!==n&&(i[r]=s),i},{}),getAspectRatio=(e,t)=>{let{aspectRatio:o}=collectAspectRatioByDevice(e,t);return o},getYoutubeAspectRatio=(e,t,o)=>{let i=collectYoutubeAspectRatio(e,t,o);return Object.keys(i).length?i:void 0},getWidth=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=e?.[o];i&&(t={...t,[o]:"default"===i?"var(--g-ct-w, 1200px)":i})}),t},getPercentageVisible=(e,t)=>{let{top:o,height:i}=e,r=-i;if(o<r)return 0;if(o>t)return 100;let a=(o-r)/(t-r)*100;return Math.min(Math.max(a,0),100)},isScaleImage=({enableParallax:e=!1,attachment:t="scroll"})=>!!e||"fixed"===t,getHeightHeroBanner=(e,t)=>{let o={},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=core.getResponsiveValueByScreen(e,i),a=r?.type==="image"&&t,l=isScaleImage({enableParallax:a,attachment:e[i]?.attachment});o={...o,[i]:a?"150%":l?"100vh":"100%"}}),core.makeStyleResponsive("h",o)},getWidthHeroBanner=(e,t)=>{let o={},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=core.getResponsiveValueByScreen(e,i),a=r?.type==="image"&&t,l=isScaleImage({enableParallax:a,attachment:e[i]?.attachment});o={...o,[i]:l?"100vw":"100%"}}),core.makeStyleResponsive("w",o)},getTopHeroBanner=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{t={...t,[o]:e[o]?.attachment==="fixed"?"0px":""}}),core.makeStyleResponsive("top",t)},getStyleHeroBannerBg=(e,t)=>{let o=getHeightHeroBanner(e,t),i=getWidthHeroBanner(e,t),r=getTopHeroBanner(e);return{...o,...i,...r}},calcRounderClipPath=(e,t=0,o=0)=>{let i=t,r=t;if(t>o?i=o:r=o,e>=999){let t=e-i;return t>0?t:0}let a=e-r;return a>0?a:0},getClipPath=(e,t)=>{if(!t)return`${_const.DEFAULT_CLIP_PATH}`;let[o,i,r,a]=(e??"0 0 0 0").split(" ").map(e=>parseInt(e??"0")||0),{btlr:l,btrr:n,bbrr:s,bblr:p}=t,g=calcRounderClipPath(parseInt(l??"0")||0,o,a),c=calcRounderClipPath(parseInt(n??"0")||0,o,i),b=calcRounderClipPath(parseInt(s??"0")||0,i,r),d=calcRounderClipPath(parseInt(p??"0")||0,r,a);return[g,c,b,d].every(e=>0===e)?`${_const.DEFAULT_CLIP_PATH}`:`inset(0 0 0 round ${g}px ${c}px ${b}px ${d}px)`},getClassAlignBanner=e=>({"!gp-self-start":"left"===e.desktop,"!gp-self-center":"center"===e.desktop,"!gp-self-end":"right"===e.desktop,"tablet:!gp-self-start":"left"===e.tablet,"tablet:!gp-self-center":"center"===e.tablet,"tablet:!gp-self-end":"right"===e.tablet,"mobile:!gp-self-start":"left"===e.mobile,"mobile:!gp-self-center":"center"===e.mobile,"mobile:!gp-self-end":"right"===e.mobile}),get1ColLayout=({device:e,settingLayoutRes:t,contentPosition1ColRes:o})=>{let i=t[e]?.cols??[],r=i.length<=1,a=o[e];if(!r||!a)return;let l=["space-between","top","center","bottom"];return l.includes(a)?a:void 0},getClassSpaceBetween=(e,t)=>{let o=getResponsiveSetting(e),i=getResponsiveSetting(t),r={desktop:get1ColLayout({device:"desktop",settingLayoutRes:o,contentPosition1ColRes:i}),tablet:get1ColLayout({device:"tablet",settingLayoutRes:o,contentPosition1ColRes:i}),mobile:get1ColLayout({device:"mobile",settingLayoutRes:o,contentPosition1ColRes:i})},a={"space-between":{desktop:"!gp-h-full !gp-content-stretch [&>*]:!gp-justify-between [&>*:nth-child(2)]:gp-absolute [&>*:nth-child(2)]:gp-hidden",tablet:"tablet:!gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between tablet:[&>*:nth-child(2)]:gp-absolute tablet:[&>*:nth-child(2)]:gp-hidden",mobile:"mobile:!gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between mobile:[&>*:nth-child(2)]:gp-absolute  mobile:[&>*:nth-child(2)]:gp-hidden"},top:{desktop:"!gp-content-stretch [&>*]:!gp-justify-start",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-start",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-start"},center:{desktop:"!gp-content-stretch [&>*]:!gp-justify-center",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-center",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-center"},bottom:{desktop:"!gp-content-stretch [&>*]:!gp-justify-end",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-end",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-end"}},l={};return core.DEVICES.forEach(e=>{let t=r[e],o=a?.[t]?.[e];l[o]=!0}),l},getClassSpaceBetweenLeftRight=e=>{let t=getResponsiveSetting(e),o=t?.desktop?.type=="left-distributed"||t?.desktop?.type=="right-distributed",i=t?.tablet?.type=="left-distributed"||t?.tablet?.type=="right-distributed",r=t?.mobile?.type=="left-distributed"||t?.mobile?.type=="right-distributed";return{"gp-h-full tablet:gp-h-auto mobile:gp-h-auto [&>*]:!gp-justify-between":o,"tablet:!gp-h-full tablet:[&>*]:!gp-justify-between mobile:gp-h-auto":i,"mobile:!gp-h-full mobile:[&>*]:!gp-justify-between":r,"mobile:!gp-h-auto":!r}},getClassForStretchContent=e=>{let t={desktop:"none",tablet:"none",mobile:"none"},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=core.getResponsiveValueByScreen(e,o);t={...t,[o]:i}}),core.cls("space-between"===t.desktop?"[&>*>*]:!gp-justify-between":"","space-between"===t.tablet?"tablet:[&>*>*]:!gp-justify-between ":`tablet:[&>*>*]:!gp-justify-${e?.tablet}`,"space-between"===t.mobile?"mobile:[&>*>*]:!gp-justify-between ":`mobile:[&>*>*]:!gp-justify-${e?.mobile}`)},getClassForContentByFitContent=(e,t)=>{let o={desktop:!1,tablet:!1,mobile:!1},i=["desktop","mobile","tablet"];return i.forEach(i=>{let r=core.getResponsiveValueByScreen(e,i),a=!!getDataVideoHeroBannerResponsive(i,t),l=r?.shape,n=r?.height,s="original"===l&&"fit-content"!==n;o={...o,[i]:s&&!a}}),core.cls(o.desktop?"!gp-absolute":"",o.tablet?"tablet:!gp-absolute":"tablet:!gp-relative",o.mobile?"mobile:!gp-absolute":"mobile:!gp-relative")},getClassContentPosition=e=>{let t={center:"center",top:"start",bottom:"end","space-between":"between"},o=e.desktop||"center",i=e.tablet||o,r=e.mobile||i;return{[`gp-justify-${t[o||"center"]}`]:!!o,[`tablet:gp-justify-${t[i||"center"]}`]:!!i,[`mobile:gp-justify-${t[r||"center"]}`]:!!r}},getResponsiveSetting=e=>{let t=e.desktop,o=e.tablet?e.tablet:t,i=e.mobile?e.mobile:o;return{desktop:t,tablet:o,mobile:i}},showVideoType=e=>core.DEVICES.some(t=>{let o=core.getValueByDevice(e,t);return o?.type!=="color"&&o?.type!=="image"&&!!o&&(o?.videoType==="html5"&&o?.videoHtml5||o?.videoType==="youtube"&&o?.video)});function debounce(e,t){let o;return function(...i){clearTimeout(o),o=setTimeout(()=>e.apply(this,i),t)}}const fallbackImg="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+",getBannerLink=e=>{let t=e?.link;return t?.type==="go-to-sales-page"?{type:"go-to-sales-page",link:constant.HREF_TO_SALES_PAGE,target:"_self"}:t},formatHoverScale=e=>e?String(e).includes("%")?`${e}`:`${e}%`:"100%",opacityEnabledData=e=>{let{overlayColor:t,overlayOpacity:o}=e??{},i=!t?.normal||o?.normal=="0%"||!o?.normal;return{disableOpacity:i}},getOpacityHover=e=>{let{overlayOpacity:t}=e??{},o="number"!=typeof t?.hover||isNaN(t?.hover)?"string"==typeof t?.hover?`${parseInt(t?.hover)}%`:"":`${t?.hover}%`,i="number"!=typeof t?.normal||isNaN(t?.normal)?"string"==typeof t?.normal?`${parseInt(t?.normal)}%`:"0%":`${t?.normal}%`;return o||i},getVideoAspectRatio=(e,t)=>{if(!e||!t)return 16/9;let o=core.getResponsiveValueByScreen(e,t),i=o?.ratio;if(!i)return 16/9;if("custom"===i){let e=o?.videoCustomRatio;if(e?.width&&e?.height){let t=Number(e.width),o=Number(e.height);if(t>0&&o>0)return t/o}return 16/9}let r=i.match(/^(\d+(?:\.\d+)?)[/:](\d+(?:\.\d+)?)$/);if(r&&r[1]&&r[2]){let e=parseFloat(r[1]),t=parseFloat(r[2]);if(e>0&&t>0)return e/t}return 16/9},resetVideoIframeStyle=e=>{e&&(e.style.removeProperty("width"),e.style.removeProperty("height"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("transform"),e.style.removeProperty("position"))},setVideoWrapperStyle=e=>{Object.assign(e.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%"})},resetVideoWrapperStyle=e=>{e.style.removeProperty("position"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("width"),e.style.removeProperty("height")},getContainerRatio=e=>{if(!e)return 0;let{width:t,height:o}=e.getBoundingClientRect();return t&&o?t/o:0},updateVideoIframeSize=({iframeEl:e,containerRatio:t,videoObjectFit:o,background:i,currentDevice:r})=>{let a,l;if(!e||!t)return;let n=getVideoAspectRatio(i,r);if("contain"===o){Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:"100%",height:"100%",maxWidth:"none",transform:"translate(-50%, -50%)"});return}t>=n?(a=100,l=t/n*100):(l=100,a=n/t*100),Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:`${a}%`,height:`${l}%`,maxWidth:"none",transform:"translate(-50%, -50%)"})};exports.collectAspectRatioByDevice=collectAspectRatioByDevice,exports.collectYoutubeAspectRatio=collectYoutubeAspectRatio,exports.debounce=debounce,exports.fallbackImg="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+",exports.formatHoverScale=formatHoverScale,exports.getAspectRatio=getAspectRatio,exports.getAttachmentDevice=getAttachmentDevice,exports.getBackgroundImageHeroBanner=getBackgroundImageHeroBanner,exports.getBannerLink=getBannerLink,exports.getBgImage=getBgImage,exports.getClassAlignBanner=getClassAlignBanner,exports.getClassContentPosition=getClassContentPosition,exports.getClassForContentByFitContent=getClassForContentByFitContent,exports.getClassForStretchContent=getClassForStretchContent,exports.getClassSpaceBetween=getClassSpaceBetween,exports.getClassSpaceBetweenLeftRight=getClassSpaceBetweenLeftRight,exports.getClipPath=getClipPath,exports.getContainerRatio=getContainerRatio,exports.getContentPosition=getContentPosition,exports.getDataVideoHeroBannerResponsive=getDataVideoHeroBannerResponsive,exports.getDisplayStyleByFitContent=getDisplayStyleByFitContent,exports.getEnableBgImageByDevice=getEnableBgImageByDevice,exports.getOpacityHover=getOpacityHover,exports.getPercentageVisible=getPercentageVisible,exports.getResponsiveSetting=getResponsiveSetting,exports.getStyleAspectRatioHeroBannerCustom=getStyleAspectRatioHeroBannerCustom,exports.getStyleHeroBannerBg=getStyleHeroBannerBg,exports.getVideoAspectRatio=getVideoAspectRatio,exports.getVisibilityStyle=getVisibilityStyle,exports.getWidth=getWidth,exports.getYoutubeAspectRatio=getYoutubeAspectRatio,exports.horizontalAlign=horizontalAlign,exports.imagePlaceholder=imagePlaceholder,exports.isScaleImage=isScaleImage,exports.mapContentPositionToHorizontal=mapContentPositionToHorizontal,exports.opacityEnabledData=opacityEnabledData,exports.resetVideoIframeStyle=resetVideoIframeStyle,exports.resetVideoWrapperStyle=resetVideoWrapperStyle,exports.scrollToContentBanner=scrollToContentBanner,exports.setVideoWrapperStyle=setVideoWrapperStyle,exports.showVideoType=showVideoType,exports.updateVideoIframeSize=updateVideoIframeSize;

package/dist/esm/grid/components/row/Row.liquid.js

@@ -1,28 +1,28 @@
-import{template as e,WrapRenderChildren as o,RenderChildren as s,RenderIf as r,isLocalEnv as i,baseAssetURL as t}from"@gem-sdk/core";import{getSettingPreloadData as l}from"../../../helpers.js";import a from"../../../video/components/HTML5Embed.liquid.js";import{createClass as m,If as p}from"@gem-sdk/system";import{getYoutubeVideoId as d}from"../../../video/common/helpers.js";import n from"../../../video/components/LiteYouTubeEmbed.liquid.js";import{getAttr as c}from"./common/attrs.js";import{getClass as $}from"./common/classes.js";import{getRowStyle as f}from"./common/styles.js";import{getData as u,checkHasBackgroundVideo as g,isRenderHtmlVideo as y,isRenderYoutubeVideo as v}from"./common/helpers.js";import{getResponsiveSetting as j}from"../../../hero-banner/common/helpers.js";let Row=k=>{let{styles:h,setting:b,rawChildren:w,builderProps:E}=k,{isSection:S}=b??{},{background:C}=h??{},q=S?"section":"div",{stateData:z}=u(k),{rowStyle:A,backgroundBoxStyle:L,embedVideoStyle:N,sectionStyle:P}=f(k),{rowAttr:R}=c(k),{rowClass:T,backgroundBoxClass:V,backgroundBoxInnerClass:_,sectionClass:G,wrapperYoutubeClasses:I,iframeYoutubeClasses:M}=$(k),O=m({[T]:!0}),x=()=>{if(!g(C))return;let e=j(C||{});if(y(C))return a({uid:E?.uid,muted:!0,loop:e.desktop?.loop,controls:!1,autoplay:!0,src:"",title:"Video",className:"gp-relative",style:N});if(v(C)){let o=e?.desktop?.video??"",s=d(o)||"",r=`&loop=false&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;return n({uid:E?.uid,id:s,autoplay:!0,title:"Video",controls:!1,params:r,adNetwork:!1,noCookie:!0,muted:!0,lazy:e?.desktop?.lazyLoad??!0,preload:!0,style:N,wrapperClass:I,iframeClass:M})}},B=()=>{if(g(C))return e`
-      ${r(i,`<script ${l('class="gps-link" delay',"src")}="{{ 'gp-row-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${l('class="gps-link" delay',"src")}="${t}/assets-v2/gp-row-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-    `},H=e`
-    <gp-row gp-data='${z}' ${{...R}} class="${O}" style="${A()}">
-      ${p(!!x(),e`
-          <div class="${V}" style="${L}">
-            <div class="${_}">${x()}</div>
+import{template as e,WrapRenderChildren as o,RenderChildren as r,RenderIf as s,isLocalEnv as i,baseAssetURL as t}from"@gem-sdk/core";import{getSettingPreloadData as l}from"../../../helpers.js";import a from"../../../video/components/HTML5Embed.liquid.js";import{createClass as m,If as p}from"@gem-sdk/system";import{getYoutubeVideoId as d}from"../../../video/common/helpers.js";import n from"../../../video/components/LiteYouTubeEmbed.liquid.js";import{getAttr as c}from"./common/attrs.js";import{getClass as u}from"./common/classes.js";import{getRowStyle as $}from"./common/styles.js";import{getData as f,getBackgroundTranslatedImageVideo as g,checkHasBackgroundVideo as y,isRenderHtmlVideo as k,isRenderYoutubeVideo as v}from"./common/helpers.js";import{getResponsiveSetting as j}from"../../../hero-banner/common/helpers.js";let Row=b=>{let{styles:h,setting:w,rawChildren:E,builderProps:S}=b,{isSection:C}=w??{},{background:q}=h??{},z=C?"section":"div",{stateData:A}=f(b),{rowStyle:L,backgroundBoxStyle:N,embedVideoStyle:P,sectionStyle:R}=$(b),{rowAttr:T}=c(b),{rowClass:V,backgroundBoxClass:_,backgroundBoxInnerClass:G,sectionClass:I,wrapperYoutubeClasses:M,iframeYoutubeClasses:O}=u(b),x=m({[V]:!0});h?.background&&(h.background=g(h.background,b));let B=()=>{if(!y(q))return;let e=j(q||{});if(k(q))return a({uid:S?.uid,muted:!0,loop:e.desktop?.loop,controls:!1,autoplay:!0,src:"",title:"Video",className:"gp-relative",style:P});if(v(q)){let o=e?.desktop?.video??"",r=d(o)||"",s=`&loop=false&playlist=${r}&showinfo=0&rel=0&fs=0&enablejsapi=1`;return n({uid:S?.uid,id:r,autoplay:!0,title:"Video",controls:!1,params:s,adNetwork:!1,noCookie:!0,muted:!0,lazy:e?.desktop?.lazyLoad??!0,preload:!0,style:P,wrapperClass:M,iframeClass:O})}},H=()=>{if(y(q))return e`
+      ${s(i,`<script ${l('class="gps-link" delay',"src")}="{{ 'gp-row-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${l('class="gps-link" delay',"src")}="${t}/assets-v2/gp-row-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    `},Y=e`
+    <gp-row gp-data='${A}' ${{...T}} class="${x}" style="${L()}">
+      ${p(!!B(),e`
+          <div class="${_}" style="${N}">
+            <div class="${G}">${B()}</div>
           </div>
         `)}
 
-      ${o({uid:E?.uid||"",customProps:w?.[0].customProps},w?.map(e=>{if(e)return s({...e,order:b?.order,layout:b?.layout,justifyContent:b?.verticalAlign})}))}
+      ${o({uid:S?.uid||"",customProps:E?.[0].customProps},E?.map(e=>{if(e)return r({...e,order:w?.order,layout:w?.layout,justifyContent:w?.verticalAlign})}))}
 
-      ${B()}
+      ${H()}
     </gp-row>
   `;return e`
-    ${r(!!h?.preloadBgImage,`${r(!!C?.desktop?.image?.src,`<link rel="preload" href="${C?.desktop?.image?.src}" as="image" />`)}${r(!!C?.tablet?.image?.src,`<link rel="preload" href="${C?.tablet?.image?.src}" as="image" />`)}${r(!!C?.mobile?.image?.src,`<link rel="preload" href="${C?.mobile?.image?.src}" as="image" />`)}`)}
+    ${s(!!h?.preloadBgImage,`${s(!!q?.desktop?.image?.src,`<link rel="preload" href="${q?.desktop?.image?.src}" as="image" />`)}${s(!!q?.tablet?.image?.src,`<link rel="preload" href="${q?.tablet?.image?.src}" as="image" />`)}${s(!!q?.mobile?.image?.src,`<link rel="preload" href="${q?.mobile?.image?.src}" as="image" />`)}`)}
 
-    ${r(!!S,"{% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}")}
+    ${s(!!C,"{% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}")}
 
-    ${p(S,e`
-        <${q}
-          class="${G} ${S?l("gps-lazy"):""}"
-          style="${P}"
+    ${p(C,e`
+        <${z}
+          class="${I} ${C?l("gps-lazy"):""}"
+          style="${R}"
         >
-          ${H}
-        </${q}>
-      `,e`${H}`)}
+          ${Y}
+        </${z}>
+      `,e`${Y}`)}
   `};export{Row as default};

package/dist/esm/grid/components/row/common/classes.js

@@ -1 +1 @@
-import{createClass as g}from"@gem-sdk/system";let getClass=l=>{let{builderProps:p,advanced:e,className:a}=l,o=g({"gp-background-video gp-absolute gp-overflow-hidden gp-w-full gp-h-full left-0 top-0 !gp-block":!0}),s=g({"gp-bg-video gp-relative gp-h-full":!0}),t=g({...a&&{[a]:!0},...p?.uid&&{[p.uid]:!0},"gp-relative gp-mx-auto gp-mb-0 gp-grid gp-max-w-full gp-transition-colors gp-duration-200 gp-ease-in-out [&_*]:gp-max-w-full gp-grid-rows-[1fr]":!0,...e?.cssClass&&{[e?.cssClass]:!0}}),u=g({"gp-mx-auto gp-max-w-full [&_*]:gp-max-w-full":!0}),r=g({"gp-h-full gp-w-full !gp-max-w-none gp-background-article":!0}),i=g({"!gp-w-[500%] !gp-ml-[-200%] !gp-h-full !gp-max-w-none gp-scale-[104%]":!0});return{rowClass:t,backgroundBoxClass:o,backgroundBoxInnerClass:s,sectionClass:u,wrapperYoutubeClasses:r,iframeYoutubeClasses:i}};export{getClass};
+import{createClass as g}from"@gem-sdk/system";let getClass=l=>{let{builderProps:p,advanced:e,className:a}=l,o=g({"gp-background-video gp-absolute gp-overflow-hidden gp-w-full gp-h-full left-0 top-0 !gp-block":!0}),s=g({"gp-bg-video gp-relative gp-h-full":!0}),t=g({...a&&{[a]:!0},...p?.uid&&{[p.uid]:!0},"gp-relative gp-mx-auto gp-mb-0 gp-grid gp-max-w-full gp-transition-colors gp-duration-200 gp-ease-in-out [&_*]:gp-max-w-full gp-grid-rows-[1fr]":!0,...e?.cssClass&&{[e?.cssClass]:!0}}),u=g({"gp-mx-auto gp-max-w-full [&_*]:gp-max-w-full":!0}),r=g({"gp-pb-[56.25%] gp-h-full gp-w-full !gp-max-w-none gp-background-article":!0}),i=g({"!gp-w-[500%] !gp-ml-[-200%] !gp-h-full !gp-max-w-none gp-scale-[104%]":!0});return{rowClass:t,backgroundBoxClass:o,backgroundBoxInnerClass:s,sectionClass:u,wrapperYoutubeClasses:r,iframeYoutubeClasses:i}};export{getClass};

package/dist/esm/grid/components/row/common/helpers.js

@@ -1 +1 @@
-import{dataStringify as e,DEVICES as t,getValueByDevice as r}from"@gem-sdk/core";import{createStateOrContext as d}from"@gem-sdk/system";let getResponsiveSetting=e=>{let t=e.desktop,r=e.tablet?e.tablet:t,d=e.mobile?e.mobile:r;return{desktop:t,tablet:r,mobile:d}},defaultWidth={desktop:"1200px",tablet:"100%",mobile:"100%"},getStyleByDevice=(e,t)=>t?.[e]==="100%"?{contentWidth:"100%",wrapperWidth:"100%",wrapperPadding:"var(--g-ct-p)"}:t?.[e]==="default"?{contentWidth:`var(--g-ct-w, ${defaultWidth[e]})`,wrapperWidth:`calc(var(--g-ct-w, ${defaultWidth[e]}) + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"}:t?.[e]!==void 0?{contentWidth:t?.[e],wrapperWidth:`calc(${t?.[e]} + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"}:{contentWidth:void 0,wrapperWidth:`calc(var(--g-ct-w, ${defaultWidth[e]}) + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"},createStyleObject=e=>{let t=getStyleByDevice("desktop",e),r=getStyleByDevice("tablet",e),d=getStyleByDevice("mobile",e);return{content:{desktop:t.contentWidth,tablet:r.contentWidth,mobile:d.contentWidth},wrapper:{desktop:t.wrapperWidth,tablet:r.wrapperWidth,mobile:d.wrapperWidth},padding:{desktop:t.wrapperPadding,tablet:r.wrapperPadding,mobile:d.wrapperPadding}}},getData=t=>{let{styles:r,builderProps:i}=t,o=d({background:r?.background,uid:i?.uid});return{stateData:e(o).replaceAll("'","'")}};function reduceRadiusForState(e,t){if(!e||!t)return{};let r=("string"==typeof e?e.split(" "):[]).map(e=>parseInt(e,10)||0),d=Object.fromEntries(["btrr","bblr","bbrr","btlr"].map((e,d)=>[e,Math.max(0,(parseInt(t[e]??"0",10)||0)-(r[d]||0))+"px"]));return{...d,radiusType:t.radiusType}}function reduceBorderRadiusForDevice(e,t){if(!e||!t)return{};let r={};return["normal","hover","active"].forEach(d=>{let i=e?.[d],o=t?.[d];i&&o&&(r[d]=reduceRadiusForState(i.width,o))}),r}function getInnerRadiusExcludeBorder(e,t){return{desktop:reduceBorderRadiusForDevice(e?.desktop,t?.desktop),tablet:reduceBorderRadiusForDevice(e?.tablet??e?.desktop,t?.tablet??t?.desktop),mobile:reduceBorderRadiusForDevice(e?.mobile??e?.tablet??e?.desktop,t?.mobile??t?.tablet??t?.desktop)}}let checkHasBackgroundVideo=e=>t.some(t=>{let d=r(e,t);return!!d&&(d?.videoType==="html5"&&d?.videoHtml5||d?.videoType==="youtube"&&d?.video)}),isRenderHtmlVideo=e=>{let t=getResponsiveSetting(e||{}),r=t.desktop?.videoType,d=t.tablet?.videoType,i=t.mobile?.videoType;return"html5"==r||"html5"==d||"html5"==i},isRenderYoutubeVideo=e=>{let t=getResponsiveSetting(e||{}),r=t.desktop?.videoType,d=t.tablet?.videoType,i=t.mobile?.videoType;return"youtube"==r||"youtube"==d||"youtube"==i};export{checkHasBackgroundVideo,createStyleObject,getData,getInnerRadiusExcludeBorder,isRenderHtmlVideo,isRenderYoutubeVideo};
+import{dataStringify as e,DEVICES as t,getValueByDevice as r,cloneDeep as d}from"@gem-sdk/core";import{createStateOrContext as i}from"@gem-sdk/system";import{getDynamicSourceLocales as a}from"../../../../helpers.js";let getResponsiveSetting=e=>{let t=e.desktop,r=e.tablet?e.tablet:t,d=e.mobile?e.mobile:r;return{desktop:t,tablet:r,mobile:d}},defaultWidth={desktop:"1200px",tablet:"100%",mobile:"100%"},getStyleByDevice=(e,t)=>t?.[e]==="100%"?{contentWidth:"100%",wrapperWidth:"100%",wrapperPadding:"var(--g-ct-p)"}:t?.[e]==="default"?{contentWidth:`var(--g-ct-w, ${defaultWidth[e]})`,wrapperWidth:`calc(var(--g-ct-w, ${defaultWidth[e]}) + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"}:t?.[e]!==void 0?{contentWidth:t?.[e],wrapperWidth:`calc(${t?.[e]} + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"}:{contentWidth:void 0,wrapperWidth:`calc(var(--g-ct-w, ${defaultWidth[e]}) + 2 * var(--g-ct-p, 15px))`,wrapperPadding:"var(--g-ct-p, 15px)"},createStyleObject=e=>{let t=getStyleByDevice("desktop",e),r=getStyleByDevice("tablet",e),d=getStyleByDevice("mobile",e);return{content:{desktop:t.contentWidth,tablet:r.contentWidth,mobile:d.contentWidth},wrapper:{desktop:t.wrapperWidth,tablet:r.wrapperWidth,mobile:d.wrapperWidth},padding:{desktop:t.wrapperPadding,tablet:r.wrapperPadding,mobile:d.wrapperPadding}}},getData=t=>{let{styles:r,builderProps:d}=t,a=i({background:r?.background,uid:d?.uid});return{stateData:e(a).replaceAll("'","'")}};function reduceRadiusForState(e,t){if(!e||!t)return{};let r=("string"==typeof e?e.split(" "):[]).map(e=>parseInt(e,10)||0),d=Object.fromEntries(["btrr","bblr","bbrr","btlr"].map((e,d)=>[e,Math.max(0,(parseInt(t[e]??"0",10)||0)-(r[d]||0))+"px"]));return{...d,radiusType:t.radiusType}}function reduceBorderRadiusForDevice(e,t){if(!e||!t)return{};let r={};return["normal","hover","active"].forEach(d=>{let i=e?.[d],a=t?.[d];i&&a&&(r[d]=reduceRadiusForState(i.width,a))}),r}function getInnerRadiusExcludeBorder(e,t){return{desktop:reduceBorderRadiusForDevice(e?.desktop,t?.desktop),tablet:reduceBorderRadiusForDevice(e?.tablet??e?.desktop,t?.tablet??t?.desktop),mobile:reduceBorderRadiusForDevice(e?.mobile??e?.tablet??e?.desktop,t?.mobile??t?.tablet??t?.desktop)}}let checkHasBackgroundVideo=e=>t.some(t=>{let d=r(e,t);return!!d&&(d?.videoType==="html5"&&d?.videoHtml5||d?.videoType==="youtube"&&d?.video)}),isRenderHtmlVideo=e=>{let t=getResponsiveSetting(e||{}),r=t.desktop?.videoType,d=t.tablet?.videoType,i=t.mobile?.videoType;return"html5"==r||"html5"==d||"html5"==i},isRenderYoutubeVideo=e=>{let t=getResponsiveSetting(e||{}),r=t.desktop?.videoType,d=t.tablet?.videoType,i=t.mobile?.videoType;return"youtube"==r||"youtube"==d||"youtube"==i},getBackgroundTranslatedImageVideo=(e,t)=>{let{builderProps:r,styles:i}=t,o=i?.translate?"true":void 0,l=r?.uid;if(!e||!o)return e;let p=d(e);for(let e in p){let t=p[e];if(t){if(t.image?.src){let r=a({val:t.image.src,uid:l,settingId:`background_${e}_image_src`,translate:o});t.image.src=String(r)}if("youtube"===t.videoType&&t.video){let r=a({val:t.video,uid:l,settingId:`background_${e}_video`,translate:o});t.video=String(r)}if("html5"===t.videoType&&t.videoHtml5){let r=a({val:t.videoHtml5,uid:l,settingId:`background_${e}_videoHtml5`,translate:o});t.videoHtml5=String(r)}}}return p};export{checkHasBackgroundVideo,createStyleObject,getBackgroundTranslatedImageVideo,getData,getInnerRadiusExcludeBorder,isRenderHtmlVideo,isRenderYoutubeVideo};

package/dist/esm/grid/settings/configs/row/settings.js

@@ -1 +1 @@
-let RowSettings=[{id:"setting",controls:[{id:"layout",type:"layout",devices:{desktop:{default:{cols:[12],display:"fill",gap:"8px"}}}},{id:"horizontalAlign",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",tooltip:"Align horizontal center",iconName:"gp-align-center"},{label:"End",value:"end",tooltip:"Align right",iconName:"gp-align-right"},{label:"Distribute",value:"space-between",tooltip:"Distribute horizontal spacing",iconName:"gp-align-space-between"}],devices:{desktop:{default:"start"}}},{id:"verticalAlign",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top",iconName:"gp-align-top"},{label:"Center",value:"center",tooltip:"Align vertical center",iconName:"gp-align-center-vertical"},{label:"End",value:"end",tooltip:"Align bottom",iconName:"gp-align-bottom"},{label:"Between",value:"space-between",tooltip:"Distribute vertical spacing",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"start"}}},{id:"inlineAlignment",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top",iconName:"gp-align-left"},{label:"Center",value:"center",tooltip:"Align center",iconName:"gp-align-center"},{label:"End",value:"end",tooltip:"Align end",iconName:"gp-align-right"}],default:"start"},{id:"blockAlignment",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top"},{label:"Center",value:"center",tooltip:"Align center"},{label:"End",value:"end",tooltip:"Align bottom"}],default:"start"}]},{id:"style",controls:[{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!1},tablet:{default:!1},mobile:{default:!1}}},{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,isRowWith:!0,fallbackValueRule:"init-value",devices:{desktop:{default:"default"}},displayOptions:[{label:"Default",value:"default",showValue:!0},{label:"Full",value:"100%",showValue:!0}]},{id:"height",type:"option:value",devices:{desktop:{default:"auto"}},options:[{label:"Full",value:"100%",tooltip:"Stretch to fill <br> vertical space"},{label:"Fit",value:"auto",tooltip:"Adjust size <br> based on content"}]},{id:"verticalGutter",type:"input:slider",units:["px"],min:0,max:120,fallbackValue:0,ignoreMax:!0,devices:{desktop:{default:"16px"}}},{id:"verticalGutterMobile",type:"input:slider",units:["px"],min:0,max:120,ignoreMax:!0,devices:{desktop:{default:"0px"}}},{id:"columnGap",type:"input:slider",min:0,max:120,step:1,ignoreMax:!0,units:["%"],showDefaultUnit:!0,devices:{desktop:{default:"1%"}}},{id:"background",type:"background-media",ignoreReRender:!0,showVideo:!0,devices:{desktop:{default:void 0}},compoDefaultValue:{desktop:{default:{type:"color",color:"#DDDDDD",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",preload:!1,video:"https://www.youtube.com/watch?v=drIt4RH_kyQ",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4",videoType:"youtube",loop:!0}}}},{id:"preloadBgImage",type:"toggle",label:"Preload",default:!1},{id:"border",type:"border-v2",devices:{desktop:{default:void 0}},compoDefaultValue:{desktop:{default:{normal:{border:"solid",color:"#121212",width:"1px",borderWidth:"1px"}}}}},{id:"rounded",type:"corner-v2",devices:{desktop:{default:{normal:void 0}}},compoDefaultValue:{desktop:{default:{normal:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}}},{id:"padding",type:"padding-v2",devices:{desktop:{default:{padding:{type:"small",top:"4px",left:"4px",bottom:"4px",right:"4px"}}}},compoDefaultValue:{desktop:{default:{padding:{type:"small",top:"4px",left:"4px",bottom:"4px",right:"4px"}}}}},{id:"boxShadow",type:"shadow-v2",devices:{desktop:{default:{normal:{}}}},compoDefaultValue:{desktop:{default:{normal:{}}}}}]}];export{RowSettings};
+let RowSettings=[{id:"setting",controls:[{id:"layout",type:"layout",devices:{desktop:{default:{cols:[12],display:"fill",gap:"8px"}}}},{id:"horizontalAlign",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",tooltip:"Align horizontal center",iconName:"gp-align-center"},{label:"End",value:"end",tooltip:"Align right",iconName:"gp-align-right"},{label:"Distribute",value:"space-between",tooltip:"Distribute horizontal spacing",iconName:"gp-align-space-between"}],devices:{desktop:{default:"start"}}},{id:"verticalAlign",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top",iconName:"gp-align-top"},{label:"Center",value:"center",tooltip:"Align vertical center",iconName:"gp-align-center-vertical"},{label:"End",value:"end",tooltip:"Align bottom",iconName:"gp-align-bottom"},{label:"Between",value:"space-between",tooltip:"Distribute vertical spacing",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"start"}}},{id:"inlineAlignment",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top",iconName:"gp-align-left"},{label:"Center",value:"center",tooltip:"Align center",iconName:"gp-align-center"},{label:"End",value:"end",tooltip:"Align end",iconName:"gp-align-right"}],default:"start"},{id:"blockAlignment",type:"option:value",options:[{label:"Start",value:"start",tooltip:"Align top"},{label:"Center",value:"center",tooltip:"Align center"},{label:"End",value:"end",tooltip:"Align bottom"}],default:"start"}]},{id:"style",controls:[{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!1},tablet:{default:!1},mobile:{default:!1}}},{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,isRowWith:!0,fallbackValueRule:"init-value",devices:{desktop:{default:"default"}},displayOptions:[{label:"Default",value:"default",showValue:!0},{label:"Full",value:"100%",showValue:!0}]},{id:"height",type:"option:value",devices:{desktop:{default:"auto"}},options:[{label:"Full",value:"100%",tooltip:"Stretch to fill <br> vertical space"},{label:"Fit",value:"auto",tooltip:"Adjust size <br> based on content"}]},{id:"verticalGutter",type:"input:slider",units:["px"],min:0,max:120,fallbackValue:0,ignoreMax:!0,devices:{desktop:{default:"16px"}}},{id:"verticalGutterMobile",type:"input:slider",units:["px"],min:0,max:120,ignoreMax:!0,devices:{desktop:{default:"0px"}}},{id:"columnGap",type:"input:slider",min:0,max:120,step:1,ignoreMax:!0,units:["%"],showDefaultUnit:!0,devices:{desktop:{default:"1%"}}},{id:"background",type:"background-media",ignoreReRender:!0,showVideo:!0,devices:{desktop:{default:void 0}},compoDefaultValue:{desktop:{default:{type:"color",color:"#DDDDDD",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",preload:!1,video:"https://www.youtube.com/watch?v=drIt4RH_kyQ",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4",videoType:"youtube",loop:!0}}}},{id:"translate",type:"input",default:[{id:"background",fields:["image.src","video","videoHtml5"]}]},{id:"preloadBgImage",type:"toggle",label:"Preload",default:!1},{id:"border",type:"border-v2",devices:{desktop:{default:void 0}},compoDefaultValue:{desktop:{default:{normal:{border:"solid",color:"#121212",width:"1px",borderWidth:"1px"}}}}},{id:"rounded",type:"corner-v2",devices:{desktop:{default:{normal:void 0}}},compoDefaultValue:{desktop:{default:{normal:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}}},{id:"padding",type:"padding-v2",devices:{desktop:{default:{padding:{type:"small",top:"4px",left:"4px",bottom:"4px",right:"4px"}}}},compoDefaultValue:{desktop:{default:{padding:{type:"small",top:"4px",left:"4px",bottom:"4px",right:"4px"}}}}},{id:"boxShadow",type:"shadow-v2",devices:{desktop:{default:{normal:{}}}},compoDefaultValue:{desktop:{default:{normal:{}}}}}]}];export{RowSettings};

package/dist/esm/hero-banner/common/helpers.js

@@ -1 +1 @@
-import{DEVICES as e,makeStyleResponsive as t,getValueByDevice as o,getResponsiveValueByScreen as i,GRADIENT_BGR_KEY as l,getAspectRatioGlobalSize as a,cls as r}from"@gem-sdk/core";import{getImageSrc as n,createBlurDataURL as s}from"../../image/common/helpers.js";import{HREF_TO_SALES_PAGE as p}from"../../constant.js";import{DEFAULT_CLIP_PATH as g}from"./const.js";let getContentPosition=(t,o,l)=>{let a={};return e.map(e=>{let r=i(t,e),n=i(o,e),s=i(l,e);a={...a,[e]:1>=(r?.cols?.length||1)?n:s}}),a},getEnableBgImageByDevice=(e,t)=>{if(!i(getBgImage(t),e))return!1;if(!t?.[e]){if("mobile"===e)return t?.tablet?.type==="image"||t?.desktop?.type==="image"&&!t?.tablet;if("tablet"===e)return t?.desktop?.type==="image"}return t?.[e]?.type==="image"},getBgImage=e=>{if(!e)return{};let t={desktop:e?.desktop?.image,tablet:e?.tablet?.image,mobile:e?.mobile?.image};return t},imagePlaceholder=e=>{let t=getBgImage(e);return{desktop:s(t?.desktop?.width??0,t?.desktop?.height??0),tablet:s(t?.tablet?.width??t?.desktop?.width??0,t?.tablet?.height??t?.desktop?.width??0),mobile:s(t?.mobile?.width??t?.tablet?.width??t?.desktop?.width??0,t?.mobile?.height??t?.tablet?.height??t?.desktop?.width??0)}},getBgImageByScreen=(e,t,o,a)=>{if(!e)return"";let r=getBgImage(e),s=i(e,t),p=o?`url(${imagePlaceholder(e)[t]})`:`url(${n(i(r,t),t,a)})`,g=s?.color?`, ${s.color}`:"";return s?.color?.includes(l)&&s?.type==="image"?`${p}${g}`:s?.color?.includes(l)&&s?.type!=="image"?`${s.color}`:s?.type==="image"?p:"url()"},getBackgroundImageHeroBanner=(o,i=!1,l=!1)=>{if(!o)return;let a={};return e.forEach(e=>{a={...a,[e]:getBgImageByScreen(o,e,i,l)}}),t("bgi",a)},getAttachmentDevice=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=e?.[o]?.attachment;t={...t,[o]:"fixed"===i?"fixed":"absolute"}}),t},horizontalAlign=(e,t,o)=>mapContentPositionToHorizontal(getContentPosition(e,t,o)),scrollToContentBanner=e=>e?.target?.closest("div.gp-hero-banner-row")?.scrollTo(0,0),getDataVideoHeroBannerResponsive=(e,t)=>{switch(e){case"desktop":if(t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"tablet":if(t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.tablet&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"mobile":if(t?.mobile?.type==="video")return{device:"mobile",data:t.mobile};if(!t?.mobile&&t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.mobile&&!t?.tablet?.type&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop}}},getVisibilityStyle=e=>e?Object.keys(e).filter(e=>["--d","--d-tablet","--d-mobile"].includes(e)).reduce((t,o)=>({...t,[o]:e?.[o]!=="none"?"flex":e?.[o]}),{}):{},getVideoRatioFromSizeSetting=(e,t)=>{if(!e)return t;let o=e?.shapeVideo;return"custom"===o?e?.shapeValue||"auto":void 0!==o?o:e?.shapeValue??t},applyVideoRatioForDevice=({shapeByDevice:e,fallbackRatio:t,device:o,currentResult:i})=>{let l=getVideoRatioFromSizeSetting(e,t);return l&&"auto"!==l?{...i,[o]:l}:i},getStyleAspectRatioHeroBannerCustom=(e,o)=>{let l=a(o),r=["desktop","mobile","tablet"];return r.forEach(t=>{let a=i(o,t),r=!!getDataVideoHeroBannerResponsive(t,e);r&&(l=applyVideoRatioForDevice({shapeByDevice:a,fallbackRatio:l?.[t],device:t,currentResult:l}))}),t("aspect",l)},mapContentPositionToHorizontal=e=>{let t={};for(let o in e)"top"===e[o]?t[o]="start":"bottom"===e[o]?t[o]="end":t[o]="center";return t},getDisplayStyleByFitContent=(e,o)=>{let l={desktop:"none",tablet:"none",mobile:"none"},a=["desktop","mobile","tablet"];return a.forEach(t=>{let a=i(e,t),r=!!getDataVideoHeroBannerResponsive(t,o),n=a?.shape,s=a?.height,p="original"===n&&"fit-content"!==s&&!r;l={...l,[t]:p?"block":"none"}}),t("d",l)},getAspectRatioCandidate=(e,t)=>{if(!e)return;if(!t)return e.shapeValue;let o=e.shapeVideo;return"custom"===o?e.shapeValue:o},collectAspectRatioByDevice=(t,o)=>{let l=!1,a=e.reduce((e,a)=>{let r=i(t,a),n=i(o,a),s=getAspectRatioCandidate(r,n?.type==="video");return s&&(e[a]=s,l=!0),e},{});return{aspectRatio:l?a:void 0}},collectYoutubeAspectRatio=(t,i,l)=>e.reduce((e,a)=>{let r=o(t,a),n=r?.type==="video"?r?.videoType:void 0,s=o(i,a),p=l?.[a];return p&&"youtube"===n&&"cover"!==s&&(e[a]=p),e},{}),getAspectRatio=(e,t)=>{let{aspectRatio:o}=collectAspectRatioByDevice(e,t);return o},getYoutubeAspectRatio=(e,t,o)=>{let i=collectYoutubeAspectRatio(e,t,o);return Object.keys(i).length?i:void 0},getWidth=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=e?.[o];i&&(t={...t,[o]:"default"===i?"var(--g-ct-w, 1200px)":i})}),t},getPercentageVisible=(e,t)=>{let{top:o,height:i}=e,l=-i;if(o<l)return 0;if(o>t)return 100;let a=(o-l)/(t-l)*100;return Math.min(Math.max(a,0),100)},isScaleImage=({enableParallax:e=!1,attachment:t="scroll"})=>!!e||"fixed"===t,getHeightHeroBanner=(e,o)=>{let i={},l=["desktop","mobile","tablet"];return l.forEach(t=>{let l=isScaleImage({enableParallax:o,attachment:e[t]?.attachment});i={...i,[t]:o?"150%":l?"100vh":"100%"}}),t("h",i)},getWidthHeroBanner=(e,o)=>{let i={},l=["desktop","mobile","tablet"];return l.forEach(t=>{let l=isScaleImage({enableParallax:o,attachment:e[t]?.attachment});i={...i,[t]:l?"100vw":"100%"}}),t("w",i)},getTopHeroBanner=e=>{let o={},i=["desktop","mobile","tablet"];return i.forEach(t=>{o={...o,[t]:e[t]?.attachment==="fixed"?"0px":""}}),t("top",o)},getStyleHeroBannerBg=(e,t)=>{let o=getHeightHeroBanner(e,t),i=getWidthHeroBanner(e,t),l=getTopHeroBanner(e);return{...o,...i,...l}},calcRounderClipPath=(e,t=0,o=0)=>{let i=t,l=t;if(t>o?i=o:l=o,e>=999){let t=e-i;return t>0?t:0}let a=e-l;return a>0?a:0},getClipPath=(e,t)=>{if(!t)return`${g}`;let[o,i,l,a]=(e??"0 0 0 0").split(" ").map(e=>parseInt(e??"0")||0),{btlr:r,btrr:n,bbrr:s,bblr:p}=t,c=calcRounderClipPath(parseInt(r??"0")||0,o,a),b=calcRounderClipPath(parseInt(n??"0")||0,o,i),d=calcRounderClipPath(parseInt(s??"0")||0,i,l),m=calcRounderClipPath(parseInt(p??"0")||0,l,a);return[c,b,d,m].every(e=>0===e)?`${g}`:`inset(0 0 0 round ${c}px ${b}px ${d}px ${m}px)`},getClassAlignBanner=e=>({"!gp-self-start":"left"===e.desktop,"!gp-self-center":"center"===e.desktop,"!gp-self-end":"right"===e.desktop,"tablet:!gp-self-start":"left"===e.tablet,"tablet:!gp-self-center":"center"===e.tablet,"tablet:!gp-self-end":"right"===e.tablet,"mobile:!gp-self-start":"left"===e.mobile,"mobile:!gp-self-center":"center"===e.mobile,"mobile:!gp-self-end":"right"===e.mobile}),get1ColLayout=({device:e,settingLayoutRes:t,contentPosition1ColRes:o})=>{let i=t[e]?.cols??[],l=i.length<=1,a=o[e];if(!l||!a)return;let r=["space-between","top","center","bottom"];return r.includes(a)?a:void 0},getClassSpaceBetween=(t,o)=>{let i=getResponsiveSetting(t),l=getResponsiveSetting(o),a={desktop:get1ColLayout({device:"desktop",settingLayoutRes:i,contentPosition1ColRes:l}),tablet:get1ColLayout({device:"tablet",settingLayoutRes:i,contentPosition1ColRes:l}),mobile:get1ColLayout({device:"mobile",settingLayoutRes:i,contentPosition1ColRes:l})},r={"space-between":{desktop:"!gp-h-full !gp-content-stretch [&>*]:!gp-justify-between [&>*:nth-child(2)]:gp-absolute [&>*:nth-child(2)]:gp-hidden",tablet:"tablet:!gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between tablet:[&>*:nth-child(2)]:gp-absolute tablet:[&>*:nth-child(2)]:gp-hidden",mobile:"mobile:!gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between mobile:[&>*:nth-child(2)]:gp-absolute  mobile:[&>*:nth-child(2)]:gp-hidden"},top:{desktop:"!gp-content-stretch [&>*]:!gp-justify-start",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-start",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-start"},center:{desktop:"!gp-content-stretch [&>*]:!gp-justify-center",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-center",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-center"},bottom:{desktop:"!gp-content-stretch [&>*]:!gp-justify-end",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-end",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-end"}},n={};return e.forEach(e=>{let t=a[e],o=r?.[t]?.[e];n[o]=!0}),n},getClassSpaceBetweenLeftRight=e=>{let t=getResponsiveSetting(e),o=t?.desktop?.type=="left-distributed"||t?.desktop?.type=="right-distributed",i=t?.tablet?.type=="left-distributed"||t?.tablet?.type=="right-distributed",l=t?.mobile?.type=="left-distributed"||t?.mobile?.type=="right-distributed";return{"gp-h-full tablet:gp-h-auto mobile:gp-h-auto [&>*]:!gp-justify-between":o,"tablet:!gp-h-full tablet:[&>*]:!gp-justify-between mobile:gp-h-auto":i,"mobile:!gp-h-full mobile:[&>*]:!gp-justify-between":l,"mobile:!gp-h-auto":!l}},getClassForStretchContent=e=>{let t={desktop:"none",tablet:"none",mobile:"none"},o=["desktop","mobile","tablet"];return o.forEach(o=>{let l=i(e,o);t={...t,[o]:l}}),r("space-between"===t.desktop?"[&>*>*]:!gp-justify-between":"","space-between"===t.tablet?"tablet:[&>*>*]:!gp-justify-between ":`tablet:[&>*>*]:!gp-justify-${e?.tablet}`,"space-between"===t.mobile?"mobile:[&>*>*]:!gp-justify-between ":`mobile:[&>*>*]:!gp-justify-${e?.mobile}`)},getClassForContentByFitContent=(e,t)=>{let o={desktop:!1,tablet:!1,mobile:!1},l=["desktop","mobile","tablet"];return l.forEach(l=>{let a=i(e,l),r=!!getDataVideoHeroBannerResponsive(l,t),n=a?.shape,s=a?.height,p="original"===n&&"fit-content"!==s;o={...o,[l]:p&&!r}}),r(o.desktop?"!gp-absolute":"",o.tablet?"tablet:!gp-absolute":"tablet:!gp-relative",o.mobile?"mobile:!gp-absolute":"mobile:!gp-relative")},getClassContentPosition=e=>{let t={center:"center",top:"start",bottom:"end","space-between":"between"},o=e.desktop||"center",i=e.tablet||o,l=e.mobile||i;return{[`gp-justify-${t[o||"center"]}`]:!!o,[`tablet:gp-justify-${t[i||"center"]}`]:!!i,[`mobile:gp-justify-${t[l||"center"]}`]:!!l}},getResponsiveSetting=e=>{let t=e.desktop,o=e.tablet?e.tablet:t,i=e.mobile?e.mobile:o;return{desktop:t,tablet:o,mobile:i}},showVideoType=t=>e.some(e=>{let i=o(t,e);return i?.type!=="color"&&i?.type!=="image"&&!!i&&(i?.videoType==="html5"&&i?.videoHtml5||i?.videoType==="youtube"&&i?.video)});function debounce(e,t){let o;return function(...i){clearTimeout(o),o=setTimeout(()=>e.apply(this,i),t)}}let fallbackImg="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+",getBannerLink=e=>{let t=e?.link;return t?.type==="go-to-sales-page"?{type:"go-to-sales-page",link:p,target:"_self"}:t},formatHoverScale=e=>e?String(e).includes("%")?`${e}`:`${e}%`:"100%",opacityEnabledData=e=>{let{overlayColor:t,overlayOpacity:o}=e??{},i=!t?.normal||o?.normal=="0%"||!o?.normal;return{disableOpacity:i}},getOpacityHover=e=>{let{overlayOpacity:t}=e??{},o="number"!=typeof t?.hover||isNaN(t?.hover)?"string"==typeof t?.hover?`${parseInt(t?.hover)}%`:"":`${t?.hover}%`,i="number"!=typeof t?.normal||isNaN(t?.normal)?"string"==typeof t?.normal?`${parseInt(t?.normal)}%`:"0%":`${t?.normal}%`;return o||i},getVideoAspectRatio=(e,t)=>{if(!e||!t)return 16/9;let o=i(e,t),l=o?.ratio;if(!l)return 16/9;if("custom"===l){let e=o?.videoCustomRatio;if(e?.width&&e?.height){let t=Number(e.width),o=Number(e.height);if(t>0&&o>0)return t/o}return 16/9}let a=l.match(/^(\d+(?:\.\d+)?)[/:](\d+(?:\.\d+)?)$/);if(a&&a[1]&&a[2]){let e=parseFloat(a[1]),t=parseFloat(a[2]);if(e>0&&t>0)return e/t}return 16/9},resetVideoIframeStyle=e=>{e&&(e.style.removeProperty("width"),e.style.removeProperty("height"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("transform"),e.style.removeProperty("position"))},setVideoWrapperStyle=e=>{Object.assign(e.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%"})},resetVideoWrapperStyle=e=>{e.style.removeProperty("position"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("width"),e.style.removeProperty("height")},getContainerRatio=e=>{if(!e)return 0;let{width:t,height:o}=e.getBoundingClientRect();return t&&o?t/o:0},updateVideoIframeSize=({iframeEl:e,containerRatio:t,videoObjectFit:o,background:i,currentDevice:l})=>{let a,r;if(!e||!t)return;let n=getVideoAspectRatio(i,l);if("contain"===o){Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:"100%",height:"100%",maxWidth:"none",transform:"translate(-50%, -50%)"});return}t>=n?(a=100,r=t/n*100):(r=100,a=n/t*100),Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:`${a}%`,height:`${r}%`,maxWidth:"none",transform:"translate(-50%, -50%)"})};export{collectAspectRatioByDevice,collectYoutubeAspectRatio,debounce,fallbackImg,formatHoverScale,getAspectRatio,getAttachmentDevice,getBackgroundImageHeroBanner,getBannerLink,getBgImage,getClassAlignBanner,getClassContentPosition,getClassForContentByFitContent,getClassForStretchContent,getClassSpaceBetween,getClassSpaceBetweenLeftRight,getClipPath,getContainerRatio,getContentPosition,getDataVideoHeroBannerResponsive,getDisplayStyleByFitContent,getEnableBgImageByDevice,getOpacityHover,getPercentageVisible,getResponsiveSetting,getStyleAspectRatioHeroBannerCustom,getStyleHeroBannerBg,getVideoAspectRatio,getVisibilityStyle,getWidth,getYoutubeAspectRatio,horizontalAlign,imagePlaceholder,isScaleImage,mapContentPositionToHorizontal,opacityEnabledData,resetVideoIframeStyle,resetVideoWrapperStyle,scrollToContentBanner,setVideoWrapperStyle,showVideoType,updateVideoIframeSize};
+import{DEVICES as e,makeStyleResponsive as t,getValueByDevice as o,getResponsiveValueByScreen as i,GRADIENT_BGR_KEY as l,getAspectRatioGlobalSize as a,cls as r}from"@gem-sdk/core";import{getImageSrc as n,createBlurDataURL as s}from"../../image/common/helpers.js";import{HREF_TO_SALES_PAGE as p}from"../../constant.js";import{DEFAULT_CLIP_PATH as g}from"./const.js";let getContentPosition=(t,o,l)=>{let a={};return e.map(e=>{let r=i(t,e),n=i(o,e),s=i(l,e);a={...a,[e]:1>=(r?.cols?.length||1)?n:s}}),a},getEnableBgImageByDevice=(e,t)=>{if(!i(getBgImage(t),e))return!1;if(!t?.[e]){if("mobile"===e)return t?.tablet?.type==="image"||t?.desktop?.type==="image"&&!t?.tablet;if("tablet"===e)return t?.desktop?.type==="image"}return t?.[e]?.type==="image"},getBgImage=e=>{if(!e)return{};let t={desktop:e?.desktop?.image,tablet:e?.tablet?.image,mobile:e?.mobile?.image};return t},imagePlaceholder=e=>{let t=getBgImage(e);return{desktop:s(t?.desktop?.width??0,t?.desktop?.height??0),tablet:s(t?.tablet?.width??t?.desktop?.width??0,t?.tablet?.height??t?.desktop?.width??0),mobile:s(t?.mobile?.width??t?.tablet?.width??t?.desktop?.width??0,t?.mobile?.height??t?.tablet?.height??t?.desktop?.width??0)}},getBgImageByScreen=(e,t,o,a)=>{if(!e)return"";let r=getBgImage(e),s=i(e,t),p=o?`url(${imagePlaceholder(e)[t]})`:`url(${n(i(r,t),t,a)})`,g=s?.color?`, ${s.color}`:"";return s?.color?.includes(l)&&s?.type==="image"?`${p}${g}`:s?.color?.includes(l)&&s?.type!=="image"?`${s.color}`:s?.type==="image"?p:"url()"},getBackgroundImageHeroBanner=(o,i=!1,l=!1)=>{if(!o)return;let a={};return e.forEach(e=>{a={...a,[e]:getBgImageByScreen(o,e,i,l)}}),t("bgi",a)},getAttachmentDevice=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=e?.[o]?.attachment;t={...t,[o]:"fixed"===i?"fixed":"absolute"}}),t},horizontalAlign=(e,t,o)=>mapContentPositionToHorizontal(getContentPosition(e,t,o)),scrollToContentBanner=e=>e?.target?.closest("div.gp-hero-banner-row")?.scrollTo(0,0),getDataVideoHeroBannerResponsive=(e,t)=>{switch(e){case"desktop":if(t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"tablet":if(t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.tablet&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"mobile":if(t?.mobile?.type==="video")return{device:"mobile",data:t.mobile};if(!t?.mobile&&t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.mobile&&!t?.tablet?.type&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop}}},getVisibilityStyle=e=>e?Object.keys(e).filter(e=>["--d","--d-tablet","--d-mobile"].includes(e)).reduce((t,o)=>({...t,[o]:e?.[o]!=="none"?"flex":e?.[o]}),{}):{},getVideoRatioFromSizeSetting=(e,t)=>{if(!e)return t;let o=e?.shapeVideo;return"custom"===o?e?.shapeValue||"auto":void 0!==o?o:e?.shapeValue??t},applyVideoRatioForDevice=({shapeByDevice:e,fallbackRatio:t,device:o,currentResult:i})=>{let l=getVideoRatioFromSizeSetting(e,t);return l&&"auto"!==l?{...i,[o]:l}:i},getStyleAspectRatioHeroBannerCustom=(e,o)=>{let l=a(o),r=["desktop","mobile","tablet"];return r.forEach(t=>{let a=i(o,t),r=!!getDataVideoHeroBannerResponsive(t,e);r&&(l=applyVideoRatioForDevice({shapeByDevice:a,fallbackRatio:l?.[t],device:t,currentResult:l}))}),t("aspect",l)},mapContentPositionToHorizontal=e=>{let t={};for(let o in e)"top"===e[o]?t[o]="start":"bottom"===e[o]?t[o]="end":t[o]="center";return t},getDisplayStyleByFitContent=(e,o)=>{let l={desktop:"none",tablet:"none",mobile:"none"},a=["desktop","mobile","tablet"];return a.forEach(t=>{let a=i(e,t),r=!!getDataVideoHeroBannerResponsive(t,o),n=a?.shape,s=a?.height,p="original"===n&&"fit-content"!==s&&!r;l={...l,[t]:p?"block":"none"}}),t("d",l)},getAspectRatioCandidate=(e,t)=>{if(!e)return;if(!t)return e.shapeValue;let o=e.shapeVideo;return"custom"===o?e.shapeValue:o},collectAspectRatioByDevice=(t,o)=>{let l=!1,a=e.reduce((e,a)=>{let r=i(t,a),n=i(o,a),s=getAspectRatioCandidate(r,n?.type==="video");return s&&(e[a]=s,l=!0),e},{});return{aspectRatio:l?a:void 0}},collectYoutubeAspectRatio=(t,i,l)=>e.reduce((e,a)=>{let r=o(t,a),n=r?.type==="video"?r?.videoType:void 0,s=o(i,a),p=l?.[a];return p&&"youtube"===n&&"cover"!==s&&(e[a]=p),e},{}),getAspectRatio=(e,t)=>{let{aspectRatio:o}=collectAspectRatioByDevice(e,t);return o},getYoutubeAspectRatio=(e,t,o)=>{let i=collectYoutubeAspectRatio(e,t,o);return Object.keys(i).length?i:void 0},getWidth=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=e?.[o];i&&(t={...t,[o]:"default"===i?"var(--g-ct-w, 1200px)":i})}),t},getPercentageVisible=(e,t)=>{let{top:o,height:i}=e,l=-i;if(o<l)return 0;if(o>t)return 100;let a=(o-l)/(t-l)*100;return Math.min(Math.max(a,0),100)},isScaleImage=({enableParallax:e=!1,attachment:t="scroll"})=>!!e||"fixed"===t,getHeightHeroBanner=(e,o)=>{let l={},a=["desktop","mobile","tablet"];return a.forEach(t=>{let a=i(e,t),r=a?.type==="image"&&o,n=isScaleImage({enableParallax:r,attachment:e[t]?.attachment});l={...l,[t]:r?"150%":n?"100vh":"100%"}}),t("h",l)},getWidthHeroBanner=(e,o)=>{let l={},a=["desktop","mobile","tablet"];return a.forEach(t=>{let a=i(e,t),r=a?.type==="image"&&o,n=isScaleImage({enableParallax:r,attachment:e[t]?.attachment});l={...l,[t]:n?"100vw":"100%"}}),t("w",l)},getTopHeroBanner=e=>{let o={},i=["desktop","mobile","tablet"];return i.forEach(t=>{o={...o,[t]:e[t]?.attachment==="fixed"?"0px":""}}),t("top",o)},getStyleHeroBannerBg=(e,t)=>{let o=getHeightHeroBanner(e,t),i=getWidthHeroBanner(e,t),l=getTopHeroBanner(e);return{...o,...i,...l}},calcRounderClipPath=(e,t=0,o=0)=>{let i=t,l=t;if(t>o?i=o:l=o,e>=999){let t=e-i;return t>0?t:0}let a=e-l;return a>0?a:0},getClipPath=(e,t)=>{if(!t)return`${g}`;let[o,i,l,a]=(e??"0 0 0 0").split(" ").map(e=>parseInt(e??"0")||0),{btlr:r,btrr:n,bbrr:s,bblr:p}=t,c=calcRounderClipPath(parseInt(r??"0")||0,o,a),b=calcRounderClipPath(parseInt(n??"0")||0,o,i),d=calcRounderClipPath(parseInt(s??"0")||0,i,l),m=calcRounderClipPath(parseInt(p??"0")||0,l,a);return[c,b,d,m].every(e=>0===e)?`${g}`:`inset(0 0 0 round ${c}px ${b}px ${d}px ${m}px)`},getClassAlignBanner=e=>({"!gp-self-start":"left"===e.desktop,"!gp-self-center":"center"===e.desktop,"!gp-self-end":"right"===e.desktop,"tablet:!gp-self-start":"left"===e.tablet,"tablet:!gp-self-center":"center"===e.tablet,"tablet:!gp-self-end":"right"===e.tablet,"mobile:!gp-self-start":"left"===e.mobile,"mobile:!gp-self-center":"center"===e.mobile,"mobile:!gp-self-end":"right"===e.mobile}),get1ColLayout=({device:e,settingLayoutRes:t,contentPosition1ColRes:o})=>{let i=t[e]?.cols??[],l=i.length<=1,a=o[e];if(!l||!a)return;let r=["space-between","top","center","bottom"];return r.includes(a)?a:void 0},getClassSpaceBetween=(t,o)=>{let i=getResponsiveSetting(t),l=getResponsiveSetting(o),a={desktop:get1ColLayout({device:"desktop",settingLayoutRes:i,contentPosition1ColRes:l}),tablet:get1ColLayout({device:"tablet",settingLayoutRes:i,contentPosition1ColRes:l}),mobile:get1ColLayout({device:"mobile",settingLayoutRes:i,contentPosition1ColRes:l})},r={"space-between":{desktop:"!gp-h-full !gp-content-stretch [&>*]:!gp-justify-between [&>*:nth-child(2)]:gp-absolute [&>*:nth-child(2)]:gp-hidden",tablet:"tablet:!gp-h-full tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-between tablet:[&>*:nth-child(2)]:gp-absolute tablet:[&>*:nth-child(2)]:gp-hidden",mobile:"mobile:!gp-h-full mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-between mobile:[&>*:nth-child(2)]:gp-absolute  mobile:[&>*:nth-child(2)]:gp-hidden"},top:{desktop:"!gp-content-stretch [&>*]:!gp-justify-start",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-start",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-start"},center:{desktop:"!gp-content-stretch [&>*]:!gp-justify-center",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-center",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-center"},bottom:{desktop:"!gp-content-stretch [&>*]:!gp-justify-end",tablet:"tablet:!gp-content-stretch tablet:[&>*]:!gp-justify-end",mobile:"mobile:!gp-content-stretch mobile:[&>*]:!gp-justify-end"}},n={};return e.forEach(e=>{let t=a[e],o=r?.[t]?.[e];n[o]=!0}),n},getClassSpaceBetweenLeftRight=e=>{let t=getResponsiveSetting(e),o=t?.desktop?.type=="left-distributed"||t?.desktop?.type=="right-distributed",i=t?.tablet?.type=="left-distributed"||t?.tablet?.type=="right-distributed",l=t?.mobile?.type=="left-distributed"||t?.mobile?.type=="right-distributed";return{"gp-h-full tablet:gp-h-auto mobile:gp-h-auto [&>*]:!gp-justify-between":o,"tablet:!gp-h-full tablet:[&>*]:!gp-justify-between mobile:gp-h-auto":i,"mobile:!gp-h-full mobile:[&>*]:!gp-justify-between":l,"mobile:!gp-h-auto":!l}},getClassForStretchContent=e=>{let t={desktop:"none",tablet:"none",mobile:"none"},o=["desktop","mobile","tablet"];return o.forEach(o=>{let l=i(e,o);t={...t,[o]:l}}),r("space-between"===t.desktop?"[&>*>*]:!gp-justify-between":"","space-between"===t.tablet?"tablet:[&>*>*]:!gp-justify-between ":`tablet:[&>*>*]:!gp-justify-${e?.tablet}`,"space-between"===t.mobile?"mobile:[&>*>*]:!gp-justify-between ":`mobile:[&>*>*]:!gp-justify-${e?.mobile}`)},getClassForContentByFitContent=(e,t)=>{let o={desktop:!1,tablet:!1,mobile:!1},l=["desktop","mobile","tablet"];return l.forEach(l=>{let a=i(e,l),r=!!getDataVideoHeroBannerResponsive(l,t),n=a?.shape,s=a?.height,p="original"===n&&"fit-content"!==s;o={...o,[l]:p&&!r}}),r(o.desktop?"!gp-absolute":"",o.tablet?"tablet:!gp-absolute":"tablet:!gp-relative",o.mobile?"mobile:!gp-absolute":"mobile:!gp-relative")},getClassContentPosition=e=>{let t={center:"center",top:"start",bottom:"end","space-between":"between"},o=e.desktop||"center",i=e.tablet||o,l=e.mobile||i;return{[`gp-justify-${t[o||"center"]}`]:!!o,[`tablet:gp-justify-${t[i||"center"]}`]:!!i,[`mobile:gp-justify-${t[l||"center"]}`]:!!l}},getResponsiveSetting=e=>{let t=e.desktop,o=e.tablet?e.tablet:t,i=e.mobile?e.mobile:o;return{desktop:t,tablet:o,mobile:i}},showVideoType=t=>e.some(e=>{let i=o(t,e);return i?.type!=="color"&&i?.type!=="image"&&!!i&&(i?.videoType==="html5"&&i?.videoHtml5||i?.videoType==="youtube"&&i?.video)});function debounce(e,t){let o;return function(...i){clearTimeout(o),o=setTimeout(()=>e.apply(this,i),t)}}let fallbackImg="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJnLTE5MjAtOTAwIj4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDUxLCA1MSwgNTEsIDApIiBvZmZzZXQ9IjcwJSIgLz4KICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjkwMCIgZmlsbD0icmdiYSg1MSwgNTEsIDUxLCAwKSIgLz4KICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI5MDAiIGZpbGw9InVybCgjZy0xOTIwLTkwMCkiIC8+CiAgICA8YW5pbWF0ZSB4bGluazpocmVmPSIjciIgYXR0cmlidXRlTmFtZT0ieCIgZnJvbT0iLTE5MjAiIHRvPSIxOTIwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+CiAgPC9zdmc+",getBannerLink=e=>{let t=e?.link;return t?.type==="go-to-sales-page"?{type:"go-to-sales-page",link:p,target:"_self"}:t},formatHoverScale=e=>e?String(e).includes("%")?`${e}`:`${e}%`:"100%",opacityEnabledData=e=>{let{overlayColor:t,overlayOpacity:o}=e??{},i=!t?.normal||o?.normal=="0%"||!o?.normal;return{disableOpacity:i}},getOpacityHover=e=>{let{overlayOpacity:t}=e??{},o="number"!=typeof t?.hover||isNaN(t?.hover)?"string"==typeof t?.hover?`${parseInt(t?.hover)}%`:"":`${t?.hover}%`,i="number"!=typeof t?.normal||isNaN(t?.normal)?"string"==typeof t?.normal?`${parseInt(t?.normal)}%`:"0%":`${t?.normal}%`;return o||i},getVideoAspectRatio=(e,t)=>{if(!e||!t)return 16/9;let o=i(e,t),l=o?.ratio;if(!l)return 16/9;if("custom"===l){let e=o?.videoCustomRatio;if(e?.width&&e?.height){let t=Number(e.width),o=Number(e.height);if(t>0&&o>0)return t/o}return 16/9}let a=l.match(/^(\d+(?:\.\d+)?)[/:](\d+(?:\.\d+)?)$/);if(a&&a[1]&&a[2]){let e=parseFloat(a[1]),t=parseFloat(a[2]);if(e>0&&t>0)return e/t}return 16/9},resetVideoIframeStyle=e=>{e&&(e.style.removeProperty("width"),e.style.removeProperty("height"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("transform"),e.style.removeProperty("position"))},setVideoWrapperStyle=e=>{Object.assign(e.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%"})},resetVideoWrapperStyle=e=>{e.style.removeProperty("position"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("width"),e.style.removeProperty("height")},getContainerRatio=e=>{if(!e)return 0;let{width:t,height:o}=e.getBoundingClientRect();return t&&o?t/o:0},updateVideoIframeSize=({iframeEl:e,containerRatio:t,videoObjectFit:o,background:i,currentDevice:l})=>{let a,r;if(!e||!t)return;let n=getVideoAspectRatio(i,l);if("contain"===o){Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:"100%",height:"100%",maxWidth:"none",transform:"translate(-50%, -50%)"});return}t>=n?(a=100,r=t/n*100):(r=100,a=n/t*100),Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:`${a}%`,height:`${r}%`,maxWidth:"none",transform:"translate(-50%, -50%)"})};export{collectAspectRatioByDevice,collectYoutubeAspectRatio,debounce,fallbackImg,formatHoverScale,getAspectRatio,getAttachmentDevice,getBackgroundImageHeroBanner,getBannerLink,getBgImage,getClassAlignBanner,getClassContentPosition,getClassForContentByFitContent,getClassForStretchContent,getClassSpaceBetween,getClassSpaceBetweenLeftRight,getClipPath,getContainerRatio,getContentPosition,getDataVideoHeroBannerResponsive,getDisplayStyleByFitContent,getEnableBgImageByDevice,getOpacityHover,getPercentageVisible,getResponsiveSetting,getStyleAspectRatioHeroBannerCustom,getStyleHeroBannerBg,getVideoAspectRatio,getVisibilityStyle,getWidth,getYoutubeAspectRatio,horizontalAlign,imagePlaceholder,isScaleImage,mapContentPositionToHorizontal,opacityEnabledData,resetVideoIframeStyle,resetVideoWrapperStyle,scrollToContentBanner,setVideoWrapperStyle,showVideoType,updateVideoIframeSize};

package/dist/types/index.d.ts

@@ -468,6 +468,10 @@ type RowSettingProps = {
     priority?: boolean;
     as?: 'div' | 'section';
 };
+type TranslateElement = {
+    id: string;
+    fields?: string[];
+};
 type RowStyleProps = {
     enablePagePadding?: ObjectDevices<boolean>;
     fullWidth?: ObjectDevices<boolean>;
@@ -483,6 +487,7 @@ type RowStyleProps = {
     verticalGutterMobile?: ObjectDevices<string>;
     background?: ObjectDevices<BackgroundMedia>;
     boxShadow?: ObjectDevices<StateProp<ShadowProps>>;
+    translate?: string | TranslateElement[];
 };
 type RowProps = BasePropsWrap<RowSettingProps, RowStyleProps> & React.ComponentPropsWithoutRef<'div'> & {
     maxWidthWithEmptyChildren?: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "8.0.0-dev.45",
+  "version": "8.0.0-dev.50",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,9 +26,9 @@
     "scan-all-text": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/scan-all-text && node ./scripts/scan-all-text"
   },
   "devDependencies": {
-    "@gem-sdk/core": "8.0.0-dev.45",
-    "@gem-sdk/styles": "8.0.0-dev.43",
-    "@gem-sdk/system": "8.0.0-dev.43",
+    "@gem-sdk/core": "8.0.0-dev.50",
+    "@gem-sdk/styles": "8.0.0-dev.50",
+    "@gem-sdk/system": "8.0.0-dev.50",
     "@types/react-transition-group": "^4.4.12",
     "tsup": "^8.5.0",
     "postcss-import": "^16.1.1",