@gem-sdk/components 12.0.0-staging.5 → 12.0.0-staging.51

package/dist/esm/grid/settings/configs/row/ui-v2.js

@@ -1 +1 @@
-let SettingUIV2=[{controls:[{setting:{id:"layout"},layout:"vertical",options:{fullWidth:!0}}]},{label:{en:"Column spacing"},conditionDisplay:'pageType !== "POST_PURCHASE" && childrens > 1',controls:[{setting:{id:"verticalGutter"},label:{en:"Gap"},conditionDisplay:"layout?.cols.length > 1",controlChangeTrigger:{settings:[{condition:"activeScreenId !== 'desktop'",action:{controlId:"verticalGutterMobile",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{setting:{id:"verticalGutterMobile"},label:{en:"Gap"},conditionDisplay:"layout?.cols.length === 1",controlChangeTrigger:{settings:[{condition:"activeScreenId !== 'desktop'",action:{controlId:"verticalGutter",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}}]},{label:{en:"Column spacing"},controls:[{label:{en:"Gap"},setting:{id:"columnGap"},options:{fullWidth:!0},conditionDisplay:'pageType == "POST_PURCHASE" && !!layout?.cols && layout?.cols.length > 1',conditionEnable:"!!layout?.cols && layout?.cols.length > 1"}]},{label:{en:"Size",cn:"尺寸",es:"Tama\xf1o"},options:{disableMessage:"Setting is available when the number of columns is > 1"},controls:[{setting:{id:"width"},label:{en:"Width",es:"Ancho",cn:"宽度"}},{setting:{id:"height"},label:{en:"Height"}},{label:{en:"Padding",cn:"填充",es:"Relleno"},conditionDisplay:'pageType != "POST_PURCHASE"',controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"spacing-setting",field:"padding"}}}]},{label:{en:"Background",cn:"背景",es:"Fondo"},conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{setting:{id:"background"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"preloadBgImage"}]},controlChangeTrigger:{settings:[{action:{controlId:"preloadBgImage",valueFromField:"preload",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}}]},{label:{en:"Shape",cn:"形状",es:"Forma"},conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{label:{en:"Border",cn:"边界",es:"Borde"},setting:{id:"border",state:"normal"}},{label:{en:"Corner",cn:"角落",es:"Esquina"},setting:{id:"rounded",state:"normal"}},{label:{en:"Shadow",cn:"阴影",es:"Sombra"},setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:{en:"Align column"},controls:[{id:"verticalAlign",label:{en:"Vertical"},setting:{id:"verticalAlign"},conditionDisplay:"((!!layout?.cols && layout?.cols.length > 1) || (!!layout?.cols && layout?.cols.length == 1 && height == '100%')) && pageType != \"POST_PURCHASE\""},{id:"horizontalAlign",label:{en:"Horizontal"},setting:{id:"horizontalAlign"},conditionDisplay:"layout?.display !== 'fill' && pageType != \"POST_PURCHASE\"",options:{disableMessage:'Horizontal Align is available when layout is "Fit to content"'}}]},{controls:[{label:{en:"Align"},setting:{id:"inlineAlignment"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"},conditionDisplay:"pageType == \"POST_PURCHASE\" && layout.display !== 'fill'",conditionEnable:'!(parseInt(width) >= 100 && width?.includes("%"))'}]}];export{SettingUIV2};
+let SettingUIV2=[{controls:[{setting:{id:"layout"},layout:"vertical",options:{fullWidth:!0}}]},{label:"Column spacing",conditionDisplay:'pageType !== "POST_PURCHASE" && childrens > 1',controls:[{setting:{id:"verticalGutter"},label:"Gap",conditionDisplay:"layout?.cols.length > 1",controlChangeTrigger:{settings:[{condition:"activeScreenId !== 'desktop'",action:{controlId:"verticalGutterMobile",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{setting:{id:"verticalGutterMobile"},label:"Gap",conditionDisplay:"layout?.cols.length === 1",controlChangeTrigger:{settings:[{condition:"activeScreenId !== 'desktop'",action:{controlId:"verticalGutter",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}}]},{label:"Column spacing",controls:[{label:"Gap",setting:{id:"columnGap"},options:{fullWidth:!0},conditionDisplay:'pageType == "POST_PURCHASE" && !!layout?.cols && layout?.cols.length > 1',conditionEnable:"!!layout?.cols && layout?.cols.length > 1"}]},{label:"Size",options:{disableMessage:"Setting is available when the number of columns is > 1"},controls:[{setting:{id:"width"},label:"Width"},{setting:{id:"height"},label:"Height"},{label:"Padding",conditionDisplay:'pageType != "POST_PURCHASE"',controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"spacing-setting",field:"padding"}}}]},{label:"Background",conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{setting:{id:"background"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"preloadBgImage"}]},controlChangeTrigger:{settings:[{action:{controlId:"preloadBgImage",valueFromField:"preload",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}}]},{label:"Shape",conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{label:"Border",setting:{id:"border",state:"normal"}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Align column",controls:[{id:"verticalAlign",label:"Vertical",setting:{id:"verticalAlign"},conditionDisplay:"((!!layout?.cols && layout?.cols.length > 1) || (!!layout?.cols && layout?.cols.length == 1 && height == '100%')) && pageType != \"POST_PURCHASE\""},{id:"horizontalAlign",label:"Horizontal",setting:{id:"horizontalAlign"},conditionDisplay:"layout?.display !== 'fill' && pageType != \"POST_PURCHASE\"",options:{disableMessage:'Horizontal Align is available when layout is "Fit to content"'}}]},{controls:[{label:"Align",setting:{id:"inlineAlignment"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"},conditionDisplay:"pageType == \"POST_PURCHASE\" && layout.display !== 'fill'",conditionEnable:'!(parseInt(width) >= 100 && width?.includes("%"))'}]}];export{SettingUIV2};

package/dist/esm/grid/settings/configs/section/ui-v2.js

@@ -1 +1 @@
-let SettingUIV2=[{controls:[{setting:{id:"layout"},layout:"vertical"}]},{label:{en:"Column spacing"},conditionDisplay:"childrens > 1",controls:[{setting:{id:"verticalGutter"},label:{en:"Gap"},conditionDisplay:'layout?.cols.length > 1 && pageType !== "POST_PURCHASE"',controlChangeTrigger:{settings:[{condition:"activeScreenId !== 'desktop'",action:{controlId:"verticalGutterMobile",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{setting:{id:"verticalGutterMobile"},label:{en:"Gap"},conditionDisplay:'layout?.cols.length === 1 && pageType !== "POST_PURCHASE"',controlChangeTrigger:{settings:[{condition:"activeScreenId !== 'desktop'",action:{controlId:"verticalGutter",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{label:{en:"Column gap"},setting:{id:"columnGap"},conditionDisplay:'pageType == "POST_PURCHASE"',conditionEnable:"!!layout?.cols && layout?.cols.length > 1"}]},{label:{en:"Size"},controls:[{id:"Width",setting:{id:"width"},label:{en:"Width"},layout:"horizontal",conditionDisplay:'pageType !== "POST_PURCHASE"'},{label:{en:"Width"},layout:"horizontal",controlConfig:{id:"width-post-purchase",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,isRowWith:!0,linkWithSetting:{name:"width"},displayOptions:[{label:"Full",value:"100%",showValue:!0}]},conditionDisplay:'pageType === "POST_PURCHASE"'},{label:{en:"Padding"},controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"spacing-setting",field:"padding"},compoDefaultValue:{desktop:{default:{top:"var(--g-s-2xl)",bottom:"var(--g-s-2xl)"}},tablet:{default:{top:"var(--g-s-2xl)",bottom:"var(--g-s-2xl)",left:"var(--g-s-l)",right:"var(--g-s-l)",linked:!1}}}},conditionDisplay:'pageType !== "POST_PURCHASE"'},{setting:{id:"enablePagePadding"},label:{en:"Page padding"},help:{content:"Page padding controls the <br> space between the browser <br> edge and sections. Adjust it in <br> Global Style > Page Padding."},conditionDisplay:'pageType !== "POST_PURCHASE"'}]},{label:{en:"Background"},conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{setting:{id:"background"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"preloadBgImage"}]},controlChangeTrigger:{settings:[{action:{controlId:"preloadBgImage",valueFromField:"preload",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}}]},{label:{en:"Shape"},conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{label:{en:"Border"},controlConfig:{id:"border-advanced",type:"border-v2",linkWithSetting:{name:"border",field:"normal"},compoDefaultValue:{color:"line-3",border:"solid",width:"1px",borderWidth:"1px"}}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"Shadow"},setting:{id:"boxShadow",state:"normal"},controlConfig:{id:"boxShadow",type:"shadow-v2"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:{en:"Align"},conditionDisplay:"pageType != \"POST_PURCHASE\" && (layout?.display !== 'fill' || (!!layout?.cols && layout?.cols.length > 1))",controls:[{id:"verticalAlign",label:{en:"Vertical"},setting:{id:"verticalAlign"},conditionDisplay:"!!layout?.cols && layout?.cols.length > 1"},{id:"horizontalAlign",label:{en:"Horizontal"},setting:{id:"horizontalAlign"},conditionDisplay:"layout?.display !== 'fill'",options:{disableMessage:'Horizontal Align is available when layout is "Fit to content"'}}]}];export{SettingUIV2};
+let SettingUIV2=[{controls:[{setting:{id:"layout"},layout:"vertical"}]},{label:"Column spacing",conditionDisplay:"childrens > 1",controls:[{setting:{id:"verticalGutter"},label:"Gap",conditionDisplay:'layout?.cols.length > 1 && pageType !== "POST_PURCHASE"',controlChangeTrigger:{settings:[{condition:"activeScreenId !== 'desktop'",action:{controlId:"verticalGutterMobile",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{setting:{id:"verticalGutterMobile"},label:"Gap",conditionDisplay:'layout?.cols.length === 1 && pageType !== "POST_PURCHASE"',controlChangeTrigger:{settings:[{condition:"activeScreenId !== 'desktop'",action:{controlId:"verticalGutter",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{label:"Column gap",setting:{id:"columnGap"},conditionDisplay:'pageType == "POST_PURCHASE"',conditionEnable:"!!layout?.cols && layout?.cols.length > 1"}]},{label:"Size",controls:[{id:"Width",setting:{id:"width"},label:"Width",layout:"horizontal",conditionDisplay:'pageType !== "POST_PURCHASE"'},{label:"Width",layout:"horizontal",controlConfig:{id:"width-post-purchase",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,isRowWith:!0,linkWithSetting:{name:"width"},displayOptions:[{label:"Full",value:"100%",showValue:!0}]},conditionDisplay:'pageType === "POST_PURCHASE"'},{label:"Padding",controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"spacing-setting",field:"padding"},compoDefaultValue:{desktop:{default:{top:"var(--g-s-2xl)",bottom:"var(--g-s-2xl)"}},tablet:{default:{top:"var(--g-s-2xl)",bottom:"var(--g-s-2xl)",left:"var(--g-s-l)",right:"var(--g-s-l)",linked:!1}}}},conditionDisplay:'pageType !== "POST_PURCHASE"'},{setting:{id:"enablePagePadding"},label:"Page padding",help:{content:"Page padding controls the <br> space between the browser <br> edge and sections. Adjust it in <br> Global Style > Page Padding."},conditionDisplay:'pageType !== "POST_PURCHASE"'}]},{label:"Background",conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{setting:{id:"background"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"preloadBgImage"}]},controlChangeTrigger:{settings:[{action:{controlId:"preloadBgImage",valueFromField:"preload",groupType:"style",controlType:"style",removeDevice:!0}}],options:{noRecordHistory:!0}}}]},{label:"Shape",conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{label:"Border",controlConfig:{id:"border-advanced",type:"border-v2",linkWithSetting:{name:"border",field:"normal"},compoDefaultValue:{color:"line-3",border:"solid",width:"1px",borderWidth:"1px"}}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},controlConfig:{id:"boxShadow",type:"shadow-v2"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Align",conditionDisplay:"pageType != \"POST_PURCHASE\" && (layout?.display !== 'fill' || (!!layout?.cols && layout?.cols.length > 1))",controls:[{id:"verticalAlign",label:"Vertical",setting:{id:"verticalAlign"},conditionDisplay:"!!layout?.cols && layout?.cols.length > 1"},{id:"horizontalAlign",label:"Horizontal",setting:{id:"horizontalAlign"},conditionDisplay:"layout?.display !== 'fill'",options:{disableMessage:'Horizontal Align is available when layout is "Fit to content"'}}]}];export{SettingUIV2};

package/dist/esm/header/settings/configs/presets.js

@@ -1,4 +1,4 @@
-let HeaderPreset=[{id:"instant-header",name:{en:"Header"},icon:{desktop:`
+let HeaderPreset=[{id:"instant-header",name:"Header",icon:{desktop:`
       <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M5.875 17.7183H8.625V26.3325H5.875V17.7183Z" fill="#D6D6D6"/>
         <path d="M31.375 17.7183H34.125V26.3325H31.375V17.7183Z" fill="#D6D6D6"/>

package/dist/esm/header/settings/configs/ui-v2.js

@@ -1 +1 @@
-let SettingUIV2=[{label:{en:"Logo"},controls:[{label:{en:"Image"},type:"combo",getValueFromSettingID:"logo.src",comboType:"image",isHideClear:!0,popoverLabel:{en:"Image"},controls:[{type:"control",label:{en:"Source"},layout:"vertical",options:{labelVariant:"primary"},setting:{id:"logo"}},{type:"control",label:{en:"Aspect Ratio"},setting:{id:"logoAspectRatio"}},{type:"control",conditionDisplay:'logoAspectRatio == "custom"',setting:{id:"customAspectRadio"}},{type:"control",label:{en:"Object Fit"},setting:{id:"layout"}}]},{id:"Width",label:{en:"Width"},setting:{id:"logoWidth"},layout:"horizontal"}]},{label:{en:"Menu management"},controls:[{id:"menu",label:{en:"Order"},setting:{id:"menu"}}]},{label:{en:"Menu item style"},controls:[{label:{en:"Text style"},type:"combo",iconName:"polaris-text-title",getValueFromSettingID:"typo.type",isTypoValue:!0,isHideClear:!0,controls:[{setting:{id:"typo"},layout:"vertical",options:{updateFields:[{field:"attrs.color",settingId:"textColor",state:"normal"}]},controlChangeTrigger:{settings:[{action:{controlId:"textColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0,state:"normal"}}],options:{noRecordHistory:!0}}}]},{label:{en:"Icon"},setting:{id:"arrow"}},{label:{en:"Hover"},type:"combo",fixedValue:"Styled",state:"hover",iconName:"polaris-check-hover",setting:{id:"itemEnableHoverEffect"},popoverLabel:{en:"Hover"},controls:[{label:{en:"Text color"},setting:{id:"textColor",state:"hover"}}]},{label:{en:"Dropdown"},type:"combo",iconName:"polaris-status-active",fixedValue:"Styled",isHideClear:!0,help:{content:"Dropdown menu appears when hovering on a menu item"},popoverLabel:{en:"Dropdown menu"},controls:[{label:{en:"Text color"},popoverLabel:{en:"Text color"},setting:{id:"menuTextColor",state:"normal"}},{label:{en:"Background"},popoverLabel:{en:"Background"},setting:{id:"menuBg"}},{label:{en:"Hover"},type:"combo",fixedValue:"Styled",state:"hover",iconName:"polaris-check-hover",setting:{id:"enableDropdownHoverEffect"},popoverLabel:{en:"Hover"},controls:[{label:{en:"Text color"},setting:{id:"menuTextColor",state:"hover"}}]}]}]},{label:{en:"Cart"},controls:[{label:{en:"Icon"},setting:{id:"cartIcon"}},{label:{en:"Icon color"},setting:{id:"cartIconColor",state:"normal"}},{label:{en:"Hover"},type:"combo",state:"hover",iconName:"polaris-check-hover",fixedValue:"Styled",setting:{id:"cardEnableHoverEffect"},popoverLabel:{en:"Hover"},controls:[{label:{en:"Icon color"},setting:{id:"cartIconColor",state:"hover"}}]}]},{label:{en:"Size"},controls:[{id:"height",label:{en:"Height"},setting:{id:"height"},controlConfig:{id:"height",type:"dropdown:input",units:["px"],displayOptions:[{label:"Fit content",value:"Auto",showValue:!0}]},layout:"horizontal"},{label:{en:"Padding",cn:"填充",es:"Relleno"},controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"spacing-setting",field:"padding"}}}]},{label:{en:"Background"},controls:[{id:"headerBg",label:{en:"Color"},setting:{id:"headerBg"},layout:"horizontal"}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"border",state:"normal"}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"Shadow"},setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:{en:"Display condition"},controls:[{id:"breakpoint",label:{en:"Menu icon"},setting:{id:"breakpoint"}},{layout:"vertical",controlConfig:{id:"showMenuIconBanner",type:"banner",message:"The devices that will show menu icon.",closable:!0}}]}];export{SettingUIV2};
+let SettingUIV2=[{label:"Logo",controls:[{label:"Image",type:"combo",getValueFromSettingID:"logo.src",comboType:"image",isHideClear:!0,popoverLabel:"Image",controls:[{type:"control",label:"Source",layout:"vertical",options:{labelVariant:"primary"},setting:{id:"logo"}},{type:"control",label:"Aspect Ratio",setting:{id:"logoAspectRatio"}},{type:"control",conditionDisplay:'logoAspectRatio == "custom"',setting:{id:"customAspectRadio"}},{type:"control",label:"Object Fit",setting:{id:"layout"}}]},{id:"Width",label:"Width",setting:{id:"logoWidth"},layout:"horizontal"}]},{label:"Menu management",controls:[{id:"menu",label:"Order",setting:{id:"menu"}}]},{label:"Menu item style",controls:[{label:"Text style",type:"combo",iconName:"polaris-text-title",getValueFromSettingID:"typo.type",isTypoValue:!0,isHideClear:!0,controls:[{setting:{id:"typo"},layout:"vertical",options:{updateFields:[{field:"attrs.color",settingId:"textColor",state:"normal"}]},controlChangeTrigger:{settings:[{action:{controlId:"textColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0,state:"normal"}}],options:{noRecordHistory:!0}}}]},{label:"Icon",setting:{id:"arrow"}},{label:"Hover",type:"combo",fixedValue:"Styled",state:"hover",iconName:"polaris-check-hover",setting:{id:"itemEnableHoverEffect"},popoverLabel:"Hover",controls:[{label:"Text color",setting:{id:"textColor",state:"hover"}}]},{label:"Dropdown",type:"combo",iconName:"polaris-status-active",fixedValue:"Styled",isHideClear:!0,help:{content:"Dropdown menu appears when hovering on a menu item"},popoverLabel:"Dropdown menu",controls:[{label:"Text color",popoverLabel:"Text color",setting:{id:"menuTextColor",state:"normal"}},{label:"Background",popoverLabel:"Background",setting:{id:"menuBg"}},{label:"Hover",type:"combo",fixedValue:"Styled",state:"hover",iconName:"polaris-check-hover",setting:{id:"enableDropdownHoverEffect"},popoverLabel:"Hover",controls:[{label:"Text color",setting:{id:"menuTextColor",state:"hover"}}]}]}]},{label:"Cart",controls:[{label:"Icon",setting:{id:"cartIcon"}},{label:"Icon color",setting:{id:"cartIconColor",state:"normal"}},{label:"Hover",type:"combo",state:"hover",iconName:"polaris-check-hover",fixedValue:"Styled",setting:{id:"cardEnableHoverEffect"},popoverLabel:"Hover",controls:[{label:"Icon color",setting:{id:"cartIconColor",state:"hover"}}]}]},{label:"Size",controls:[{id:"height",label:"Height",setting:{id:"height"},controlConfig:{id:"height",type:"dropdown:input",units:["px"],displayOptions:[{label:"Fit content",value:"Auto",showValue:!0}]},layout:"horizontal"},{label:"Padding",controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"spacing-setting",field:"padding"}}}]},{label:"Background",controls:[{id:"headerBg",label:"Color",setting:{id:"headerBg"},layout:"horizontal"}]},{label:"Shape",controls:[{label:"Border",setting:{id:"border",state:"normal"}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:"Display condition",controls:[{id:"breakpoint",label:"Menu icon",setting:{id:"breakpoint"}},{layout:"vertical",controlConfig:{id:"showMenuIconBanner",type:"banner",message:"The devices that will show menu icon.",closable:!0}}]}];export{SettingUIV2};

package/dist/esm/heading/settings/configs/presets.js

@@ -1,3 +1,3 @@
-let HeadingPreset=[{id:"heading",name:{en:"Heading"},icon:{desktop:`<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+let HeadingPreset=[{id:"heading",name:"Heading",icon:{desktop:`<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M0.609375 23V20.5938L3.09375 20.125V3.14062L0.609375 2.67188V0.25H9.51562V2.67188L7.03125 3.14062V10.2344H16.9844V3.14062L14.5 2.67188V0.25H16.9844H20.9062H23.3906V2.67188L20.9062 3.14062V20.125L23.3906 20.5938V23H14.5V20.5938L16.9844 20.125V13.2969H7.03125V20.125L9.51562 20.5938V23H0.609375Z" fill="#D6D6D6"/>
         </svg>`},components:[{tag:"Heading",advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}}]}];export{HeadingPreset};

package/dist/esm/heading/settings/configs/ui-v2.js

@@ -1 +1 @@
-let SettingUIV2=[{label:{en:"Text style"},controls:[{id:"typo",label:{en:"Basic"},setting:{id:"typo"},options:{hideLabel:!0,fullWidth:!0,updateFields:[{field:"attrs.textAlign",settingId:"textAlign"}]},layout:"vertical",controlChangeTrigger:{settings:[{action:{controlId:"textAlign",valueFromField:"attrs.textAlign",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}}]},{label:{en:"Size"},controls:[{id:"Width",label:{en:"Width"},controlConfig:{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,linkWithSetting:{name:"globalSize",field:"width"},displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"default",showValue:!0}]},layout:"horizontal"},{label:{en:"Padding"},controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"globalSize",field:"padding"},compoDefaultValue:{default:{top:"16px",right:"16px",bottom:"16px",left:"16px",linked:!1}}}}]},{label:{en:"Background"},conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{setting:{id:"background"},layout:"vertical"}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"shapeBorder"}},{label:{en:"Corner"},setting:{id:"shapeRounded"}},{label:{en:"Shadow"},setting:{id:"shapeBoxShadow"}}]},{label:{en:"SEO"},controls:[{type:"control",label:{en:"HTML tag"},setting:{id:"htmlTag"}}]},{controls:[{label:{en:"Align"},conditionEnable:'!(parseInt(globalSize.width) >= 100 && globalSize.width?.includes("%"))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];export{SettingUIV2};
+let SettingUIV2=[{label:"Text style",controls:[{id:"typo",label:"Basic",setting:{id:"typo"},options:{hideLabel:!0,fullWidth:!0,updateFields:[{field:"attrs.textAlign",settingId:"textAlign"}]},layout:"vertical",controlChangeTrigger:{settings:[{action:{controlId:"textAlign",valueFromField:"attrs.textAlign",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}}]},{label:"Size",controls:[{id:"Width",label:"Width",controlConfig:{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,linkWithSetting:{name:"globalSize",field:"width"},displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"default",showValue:!0}]},layout:"horizontal"},{label:"Padding",controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"globalSize",field:"padding"},compoDefaultValue:{default:{top:"16px",right:"16px",bottom:"16px",left:"16px",linked:!1}}}}]},{label:"Background",conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{setting:{id:"background"},layout:"vertical"}]},{label:"Shape",controls:[{label:"Border",setting:{id:"shapeBorder"}},{label:"Corner",setting:{id:"shapeRounded"}},{label:"Shadow",setting:{id:"shapeBoxShadow"}}]},{label:"SEO",controls:[{type:"control",label:"HTML tag",setting:{id:"htmlTag"}}]},{controls:[{label:"Align",conditionEnable:'!(parseInt(globalSize.width) >= 100 && globalSize.width?.includes("%"))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];export{SettingUIV2};

package/dist/esm/helpers.js

@@ -1 +1 @@
-import{DEVICES as e,globalEvent as t}from"@gem-sdk/core";import r from"./link/components/Link.js";let REGEX_PAGE_TYPE=new RegExp(/^\/?(?:collections|pages|products|blogs|checkout|cart|policies)\/?/i),isShopifyDomain=(e,t)=>{let r=new RegExp(/^https?:\/\//i);return e&&!r.test(t)&&REGEX_PAGE_TYPE.test(t)},getLinkArticle=(e,t)=>"scroll-to"==e?t?.link:"{{article.url}}",isTransparentColor=e=>!!e&&(e.startsWith("#")?isHexTransparent(e):e.startsWith("rgb")?isTransparentRGBA(e):"transparent"==e),isTransparentRGBA=e=>{let t=e.replace(/\s/g,"").match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i)?.map(Number).filter(e=>!isNaN(e))??[0,0,0,1];return 0===t[t.length-1]},isHexTransparent=e=>{let t=!1,r=e.slice(e.startsWith("#")?1:0);3===r.length?r=[...r].map(e=>e+e).join(""):8===r.length&&(t=!0);let i=parseInt(r,16),l=t?255&i:void 0;return 0===l||!!l},youtubeShortsRegex=/^(?:https?:\/\/)?(?:www\.)?youtube\.com\/shorts\/([^"&?/\s]{11})$/i,getDynamicSourceLocales=({val:e,uid:t,settingId:r,isLiquid:i,pageContext:l,isCapitalize:n,defaultVal:o="",translate:a,isReplaceLocationOrigin:s,isReplaceMaxSize:p,isReplaceInventoryQuantity:c})=>{let g=new RegExp(/\{\{.*?\}\}|\{%.*?%\}/).test(e?.toString()??""),u=l?.isTranslateWithLocale?1e3:5e3;if(!a||!e?.toString().trim()||e.toString().length>u||g||l?.isPreviewing)return e??o;let h=`g${t}_${r}`,f=`section.settings.${h}`;return(l?.isTranslateWithLocale&&(f=`'sections.${l.sectionName}.${h}_html' | t`),s&&(f+=" | replace: '$locationOrigin', locationOrigin"),p&&(f+=" | replace: '$max_size', '10MB'"),c&&(f+=" | replace: '<$quantity$>', inventory_quantity | replace: '&lt;$quantity$&gt;', inventory_quantity"),n&&(f=`${f} | downcase`),i)?f:`{{ ${f} }}`},getStaticLocale=(e,t)=>`{{ 'gempages.${e}.${t}' | t }}`,getSettingPreloadData=(e,t)=>`{% if section.settings.section_preload == "false" %}${e} ${t?`{% else %}${t}`:""}{% endif %}`,getHttpUrl=e=>e?e.match(/^https?:\/\//i)?e:`http://${e}`:"";function normalizeMailto(e){if(e.startsWith("mailto:")){let[t,r]=e.split("?");if(r){let i=r.replace(/\+/g,"%20");e=`${t}?${i}`}}return e}let getInsertLinkData=(e,t,i)=>{let l=["#","mailto:","tel:"],n=["product.url"],o=t?.link!==void 0&&""!==t.link,a=t?.link??"",s="/"===a,p=new RegExp(/^(?:https?:\/\/)?[\w.-]+\.[a-z]{2,}/i),c=o&&p.test(a);c&&(a=getHttpUrl(a)),o&&a.toLowerCase().startsWith("mailto:")&&a.includes("+")&&(a=normalizeMailto(a));let g=()=>!!(l.find(e=>a.startsWith(e))||n.find(e=>a.includes(e))),u=c||isShopifyDomain(o,a)||g()||s||isLinkedToSalesPage(t?.type);(isShopifyDomain(o,a)||s)&&(a=t?.isTranslate?"$locationOrigin"+a:"{{ request.origin }}{{ routes.root_url | split: '/' | join: '/' }}"+a);let h=u?t?.isLiquid?"a":r:e,f={href:a,target:t?.target,...t?.noFollow&&{rel:"nofollow"}},m=u?f:o?{...f,type:i}:{type:i};return{Wrap:h,urlData:m,shouldRenderLink:u}},isLinkedToSalesPage=e=>"go-to-sales-page"===e,checkIsScrollToTop=e=>e?.type==="scroll-to"&&e?.link==="#scroll-to-top",checkIsOpenPopup=e=>e?.type==="open-popup"&&e?.link?.startsWith("#el-"),getLinkData=({setting:e,htmlType:t,defaultWrap:i,isLiquid:l=!1,enableImageLink:n=!1})=>{let o=["product.url"],a=["#","mailto:","tel:"],s=e?.link??"",p="/"===s,c=e?.link!==void 0&&""!==e.link,g=new RegExp(/^https?:\/\//i),u=c&&g.test(s);c&&s.toLowerCase().startsWith("mailto:")&&s.includes("+")&&(s=normalizeMailto(s));let h=()=>!!(o.find(e=>s.includes(e))||a.find(e=>s.startsWith(e))),f=n&&(u||isShopifyDomain(c,s)||h()||p||isLinkedToSalesPage(e?.type)),m=s;l&&(isShopifyDomain(c,s)||p)&&(m=e?.isTranslate?"$locationOrigin"+s:"{{ request.origin }}{{ routes.root_url | split: '/' | join: '/' }}"+s);let k=f?l?"a":r:i,y={href:m,target:e?.target,...e?.noFollow&&{rel:"nofollow"}},d=f?y:c?{...y,type:t}:{type:t};return{Wrapper:k,urlData:d,shouldRenderLink:f}},replaceLinkData=(e,t)=>{let r=/<a\s[^>]*>.*?<\/a>/;if(e&&r.test(e)){let r;let i=/<a\s+(?:[^>]*?\s+)?href=["']([^"']*)["'](?:\s+[^>]*?)?(?:target=["']([^"']*)["'])?.*?>.*?<\/a>/gi,l=e.toString();for(;null!==(r=i.exec(l));){let e=r[1],{urlData:i}=getInsertLinkData("",{link:e,isTranslate:t});l=l.replace(r[0],r[0].replace(/(href=['"])([^'"]*)(['"])/i,`$1${i.href}$3`))}return l}return e};function filterTruthyStyles(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>!!e))}function filterTruthyObject(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>!!e))}let getDisplayStyle=(t,r)=>{let i={};return e.forEach(e=>{i={...i,[`--d${"desktop"===e?"":`-${e}`}`]:`${t(e)?"none":r}`}}),i},convertUnitToNumber=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let r="string"==typeof e?e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em",""):t;return isNaN(Number(r))?t:Number(r)},getAllHrefFromString=e=>{let t;if(!e)return[];let r=/href="([^"]*)"/g,i=[];for(;null!==(t=r.exec(e));)t[1]&&i.push(t[1]);return i},replaceAllHrefFromString=(e,t)=>{let r;if(!e)return"";let i=/href="([^"]*)"/g,l=0;for(;null!==(r=i.exec(e));)r[1]&&(e=e.replace(r[1],t[l]??""),l++);return e};function isEmptyObject(e){return 0===Object.keys(e).length&&"object"==typeof e}let handleClickLink=(e,r)=>{if("edit"!==r){if(checkIsScrollToTop(e)){window.scrollTo({top:0,behavior:"smooth"});return}if(checkIsOpenPopup(e)){let r=e?.link?.replace("#el-","#");t.dispatch("onOpenDialog",{popupUId:r});return}e?.link?.startsWith("#")&&t.dispatch("onOpenDialog",{popupUId:e?.link})}};export{REGEX_PAGE_TYPE,checkIsOpenPopup,checkIsScrollToTop,convertUnitToNumber,filterTruthyObject,filterTruthyStyles,getAllHrefFromString,getDisplayStyle,getDynamicSourceLocales,getInsertLinkData,getLinkArticle,getLinkData,getSettingPreloadData,getStaticLocale,handleClickLink,isEmptyObject,isHexTransparent,isLinkedToSalesPage,isShopifyDomain,isTransparentColor,isTransparentRGBA,normalizeMailto,replaceAllHrefFromString,replaceLinkData,youtubeShortsRegex};
+import{getThemeSectionTranslateKey as e,replaceOuterTagContent as t,DEVICES as r,globalEvent as i,SectionMode as l}from"@gem-sdk/core";import n from"./link/components/Link.js";let REGEX_PAGE_TYPE=new RegExp(/^\/?(?:collections|pages|products|blogs|checkout|cart|policies)\/?/i),isShopifyDomain=(e,t)=>{let r=new RegExp(/^https?:\/\//i);return e&&!r.test(t)&&REGEX_PAGE_TYPE.test(t)},getLinkArticle=(e,t)=>"scroll-to"==e?t?.link:"{{article.url}}",isTransparentColor=e=>!!e&&(e.startsWith("#")?isHexTransparent(e):e.startsWith("rgb")?isTransparentRGBA(e):"transparent"==e),isTransparentRGBA=e=>{let t=e.replace(/\s/g,"").match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i)?.map(Number).filter(e=>!isNaN(e))??[0,0,0,1];return 0===t[t.length-1]},isHexTransparent=e=>{let t=!1,r=e.slice(e.startsWith("#")?1:0);3===r.length?r=[...r].map(e=>e+e).join(""):8===r.length&&(t=!0);let i=parseInt(r,16),l=t?255&i:void 0;return 0===l||!!l},youtubeShortsRegex=/^(?:https?:\/\/)?(?:www\.)?youtube\.com\/shorts\/([^"&?/\s]{11})$/i,getDynamicSourceLocales=({val:r,uid:i,settingId:n,isLiquid:o,pageContext:a,isCapitalize:s,defaultVal:p="",translate:c,isReplaceLocationOrigin:g,isReplaceMaxSize:u,isReplaceInventoryQuantity:f})=>{let h;let m=new RegExp(/\{\{.*?\}\}|\{%.*?%\}/).test(r?.toString()??""),k=a?.mode===l.GLOBAL,y=a?.schema??"",d=a?.isTranslateWithLocale?1e3:5e3;if(!c||!r?.toString().trim()||r.toString().length>d||m||a?.isPreviewing)return r??p;let S=`section.settings.${h=k?e({uid:i,settingId:n,schema:y,value:r?.toString()??p??""}):`g${i}_${n}`}`;return(a?.isTranslateWithLocale&&(S=`'sections.${a.sectionName}.${h}_html' | t`),g&&(S+=" | replace: '$locationOrigin', locationOrigin"),u&&(S+=" | replace: '$max_size', '10MB'"),f&&(S+=" | replace: '<$quantity$>', inventory_quantity | replace: '&lt;$quantity$&gt;', inventory_quantity"),s&&(S=`${S} | downcase`),o)?S:k?t(r?.toString()??p??"",void 0,`{{ ${S} }}`):`{{ ${S} }}`},getStaticLocale=(e,t)=>`{{ 'gempages.${e}.${t}' | t }}`,getSettingPreloadData=(e,t)=>`{% if section.settings.section_preload == "false" %}${e} ${t?`{% else %}${t}`:""}{% endif %}`,getHttpUrl=e=>e?e.match(/^https?:\/\//i)?e:`http://${e}`:"";function normalizeMailto(e){if(e.startsWith("mailto:")){let[t,r]=e.split("?");if(r){let i=r.replace(/\+/g,"%20");e=`${t}?${i}`}}return e}let getInsertLinkData=(e,t,r)=>{let i=["#","mailto:","tel:"],l=["product.url"],o=t?.link!==void 0&&""!==t.link,a=t?.link??"",s="/"===a,p=new RegExp(/^(?:https?:\/\/)?[\w.-]+\.[a-z]{2,}/i),c=o&&p.test(a);c&&(a=getHttpUrl(a)),o&&a.toLowerCase().startsWith("mailto:")&&a.includes("+")&&(a=normalizeMailto(a));let g=()=>!!(i.find(e=>a.startsWith(e))||l.find(e=>a.includes(e))),u=c||isShopifyDomain(o,a)||g()||s||isLinkedToSalesPage(t?.type);(isShopifyDomain(o,a)||s)&&(a=t?.isTranslate?"$locationOrigin"+a:"{{ request.origin }}{{ routes.root_url | split: '/' | join: '/' }}"+a);let f=u?t?.isLiquid?"a":n:e,h={href:a,target:t?.target,...t?.noFollow&&{rel:"nofollow"}},m=u?h:o?{...h,type:r}:{type:r};return{Wrap:f,urlData:m,shouldRenderLink:u}},isLinkedToSalesPage=e=>"go-to-sales-page"===e,checkIsScrollToTop=e=>e?.type==="scroll-to"&&e?.link==="#scroll-to-top",checkIsOpenPopup=e=>e?.type==="open-popup"&&e?.link?.startsWith("#el-"),getLinkData=({setting:e,htmlType:t,defaultWrap:r,isLiquid:i=!1,enableImageLink:l=!1})=>{let o=["product.url"],a=["#","mailto:","tel:"],s=e?.link??"",p="/"===s,c=e?.link!==void 0&&""!==e.link,g=new RegExp(/^https?:\/\//i),u=c&&g.test(s);c&&s.toLowerCase().startsWith("mailto:")&&s.includes("+")&&(s=normalizeMailto(s));let f=()=>!!(o.find(e=>s.includes(e))||a.find(e=>s.startsWith(e))),h=l&&(u||isShopifyDomain(c,s)||f()||p||isLinkedToSalesPage(e?.type)),m=s;i&&(isShopifyDomain(c,s)||p)&&(m=e?.isTranslate?"$locationOrigin"+s:"{{ request.origin }}{{ routes.root_url | split: '/' | join: '/' }}"+s);let k=h?i?"a":n:r,y={href:m,target:e?.target,...e?.noFollow&&{rel:"nofollow"}},d=h?y:c?{...y,type:t}:{type:t};return{Wrapper:k,urlData:d,shouldRenderLink:h}},replaceLinkData=(e,t)=>{let r=/<a\s[^>]*>.*?<\/a>/;if(e&&r.test(e)){let r;let i=/<a\s+(?:[^>]*?\s+)?href=["']([^"']*)["'](?:\s+[^>]*?)?(?:target=["']([^"']*)["'])?.*?>.*?<\/a>/gi,l=e.toString();for(;null!==(r=i.exec(l));){let e=r[1],{urlData:i}=getInsertLinkData("",{link:e,isTranslate:t});l=l.replace(r[0],r[0].replace(/(href=['"])([^'"]*)(['"])/i,`$1${i.href}$3`))}return l}return e};function filterTruthyStyles(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>!!e))}function filterTruthyObject(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>!!e))}let getDisplayStyle=(e,t)=>{let i={};return r.forEach(r=>{i={...i,[`--d${"desktop"===r?"":`-${r}`}`]:`${e(r)?"none":t}`}}),i},convertUnitToNumber=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let r="string"==typeof e?e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em",""):t;return isNaN(Number(r))?t:Number(r)},getAllHrefFromString=e=>{let t;if(!e)return[];let r=/href="([^"]*)"/g,i=[];for(;null!==(t=r.exec(e));)t[1]&&i.push(t[1]);return i},replaceAllHrefFromString=(e,t)=>{let r;if(!e)return"";let i=/href="([^"]*)"/g,l=0;for(;null!==(r=i.exec(e));)r[1]&&(e=e.replace(r[1],t[l]??""),l++);return e};function isEmptyObject(e){return 0===Object.keys(e).length&&"object"==typeof e}let handleClickLink=(e,t)=>{if("edit"!==t){if(checkIsScrollToTop(e)){window.scrollTo({top:0,behavior:"smooth"});return}if(checkIsOpenPopup(e)){let t=e?.link?.replace("#el-","#");i.dispatch("onOpenDialog",{popupUId:t});return}e?.link?.startsWith("#")&&i.dispatch("onOpenDialog",{popupUId:e?.link})}},filterPageContext=e=>{if(!e)return;let{schema:t,mode:r,...i}=e;return i};export{REGEX_PAGE_TYPE,checkIsOpenPopup,checkIsScrollToTop,convertUnitToNumber,filterPageContext,filterTruthyObject,filterTruthyStyles,getAllHrefFromString,getDisplayStyle,getDynamicSourceLocales,getInsertLinkData,getLinkArticle,getLinkData,getSettingPreloadData,getStaticLocale,handleClickLink,isEmptyObject,isHexTransparent,isLinkedToSalesPage,isShopifyDomain,isTransparentColor,isTransparentRGBA,normalizeMailto,replaceAllHrefFromString,replaceLinkData,youtubeShortsRegex};

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

@@ -1 +1 @@
-import{getGlobalColorStateClass as e,getValueByDevice as s}from"@gem-sdk/core";import{getClassAlignBanner as o,getResponsiveSetting as l,getClassContentPosition as a,getContentPosition as t,getClassForContentByFitContent as r,getClassForStretchContent as g,getClassSpaceBetween as p,opacityEnabledData as n,getClassSpaceBetweenLeftRight as i,getOpacityHover as u}from"./helpers.js";function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}let getClasses=({setting:e,builderProps:s,advancedCssClass:a})=>{let t="gp-group/hero gp-flex gp-w-full gp-flex-col gp-self-center gp-transition-colors gp-duration-200 gp-ease-in-out";return a&&(t+=` ${a}`),{...s?.uid&&{[s.uid]:!0},...composeClasses(t),...o(l(e?.alignBanner||{}))}},getLinkClasses=()=>({...composeClasses("gp-cursor-pointer gp-h-full")}),getContainerClasses=(e,s)=>({...composeClasses("gp-relative gp-flex gp-w-full gp-flex-col gp-items-center gp-overflow-hidden hero-banner-container"),...a(t(e?.layout,s?.contentPosition1Col,s?.contentPosition2Col)||{})}),enableTransitionHover=e=>{let{overlayColor:s}=e??{},o=s?.hover||s?.normal;return o&&"transparent"!==o&&"0%"!=u(e)},getOverlayClasses=s=>{let{overlayColor:o,hoverEffect:l}=s??{},{disableOpacity:a}=n(s),t="gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)]";return enableTransitionHover(s)&&(t+=" gp-transition-all gp-duration-300"),l&&(t+=" group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]"),e("bg",o,a,!l)&&(t+=` ${e("bg",o,a,!l)}`),composeClasses(t)},getRowClasses=(e,s)=>{let{sizeSetting:o,background:l}=e??{},{verticalAlign:a}=s??{},t=r(o,l),n=g(a),u=p(s?.layout||{},e?.contentPosition1Col||{}),c=i(s?.layout||{}),C=`gp-hero-banner-row ${t}  ${n}`;return{...composeClasses(C),...u,...c}},getAdaptiveClasses=()=>composeClasses("adaptive-hero-banner"),getAdaptivePictureClasses=()=>composeClasses("gp-w-full gp-invisible -gp-z-1"),getBackgroundClasses=(e,s)=>{let o="hero-banner-bg gp-hero-banner-image-background hero-banner-bg-parallax";return s&&(o+=" gp_lazybg"),e&&(o+=" gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)] gp-transition-transform"),composeClasses(o)},getContainBackgroundClasses=()=>composeClasses("gp-hero-banner-bg gp-absolute gp-overflow-hidden gp-w-full gp-h-full top-0 left-0"),getHtml5VideoClasses=(e,o=!1)=>{let l="gp-relative",a=s(e,"tablet"),t=s(e,"mobile");return o&&(l+=" gp-hidden"),a&&(l+=" tablet:gp-h-full tablet:gp-object-cover"),t&&(l+=" mobile:gp-h-full mobile:gp-object-cover"),composeClasses(l)},getWrapperYoutubeClasses=()=>composeClasses("gp-pb-[56.25%] gp-h-full gp-w-full !gp-max-w-none gp-pointer-events-none"),getIframeYoutubeClasses=()=>composeClasses("!gp-w-[500%] !gp-ml-[-200%] !gp-h-full !gp-max-w-none gp-scale-[104%]"),getLazyBackgroundClasses=e=>{let s="gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg";return"tablet"===e&&(s+=" gp_lazybg_tl"),"mobile"===e&&(s+=" gp_lazybg_mb"),composeClasses(s)};export{enableTransitionHover,getAdaptiveClasses,getAdaptivePictureClasses,getBackgroundClasses,getClasses,getContainBackgroundClasses,getContainerClasses,getHtml5VideoClasses,getIframeYoutubeClasses,getLazyBackgroundClasses,getLinkClasses,getOverlayClasses,getRowClasses,getWrapperYoutubeClasses};
+import{getGlobalColorStateClass as e}from"@gem-sdk/core";import{getClassAlignBanner as s,getResponsiveSetting as o,getClassContentPosition as l,getContentPosition as a,getClassForContentByFitContent as t,getClassForStretchContent as r,getClassSpaceBetween as g,opacityEnabledData as p,getClassSpaceBetweenLeftRight as n,getOpacityHover as i}from"./helpers.js";function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}let getClasses=({setting:e,builderProps:l,advancedCssClass:a})=>{let t="gp-group/hero gp-flex gp-w-full gp-flex-col gp-self-center gp-transition-colors gp-duration-200 gp-ease-in-out";return a&&(t+=` ${a}`),{...l?.uid&&{[l.uid]:!0},...composeClasses(t),...s(o(e?.alignBanner||{}))}},getLinkClasses=()=>({...composeClasses("gp-cursor-pointer gp-h-full")}),getContainerClasses=(e,s)=>({...composeClasses("gp-relative gp-flex gp-w-full gp-flex-col gp-items-center gp-overflow-hidden hero-banner-container"),...l(a(e?.layout,s?.contentPosition1Col,s?.contentPosition2Col)||{})}),enableTransitionHover=e=>{let{overlayColor:s}=e??{},o=s?.hover||s?.normal;return o&&"transparent"!==o&&"0%"!=i(e)},getOverlayClasses=s=>{let{overlayColor:o,hoverEffect:l}=s??{},{disableOpacity:a}=p(s),t="gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)]";return enableTransitionHover(s)&&(t+=" gp-transition-all gp-duration-300"),l&&(t+=" group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]"),e("bg",o,a,!l)&&(t+=` ${e("bg",o,a,!l)}`),composeClasses(t)},getRowClasses=(e,s)=>{let{sizeSetting:o,background:l}=e??{},{verticalAlign:a}=s??{},p=t(o,l),i=r(a),u=g(s?.layout||{},e?.contentPosition1Col||{}),C=n(s?.layout||{}),c=`gp-hero-banner-row ${p}  ${i}`;return{...composeClasses(c),...u,...C}},getAdaptiveClasses=()=>composeClasses("adaptive-hero-banner"),getAdaptivePictureClasses=()=>composeClasses("gp-w-full gp-invisible -gp-z-1"),getBackgroundClasses=(e,s)=>{let o="hero-banner-bg gp-hero-banner-image-background hero-banner-bg-parallax";return s&&(o+=" gp_lazybg"),e&&(o+=" gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)] gp-transition-transform"),composeClasses(o)},getContainBackgroundClasses=()=>composeClasses("gp-hero-banner-bg gp-absolute gp-overflow-hidden gp-w-full gp-h-full top-0 left-0"),getHtml5VideoClasses=(e=!1)=>{let s="gp-relative gp-h-full";return e&&(s+=" gp-hidden"),composeClasses(s)},getWrapperYoutubeClasses=e=>{let s="gp-h-full gp-w-full !gp-max-w-none gp-pointer-events-none";return e&&(s+=" gp-pb-[56.25%]"),composeClasses(s)},getIframeYoutubeClasses=()=>composeClasses("gp-inset-0 gp-w-full gp-bg-black gp-h-full !gp-max-w-none"),getLazyBackgroundClasses=e=>{let s="gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg";return"tablet"===e&&(s+=" gp_lazybg_tl"),"mobile"===e&&(s+=" gp_lazybg_mb"),composeClasses(s)};export{enableTransitionHover,getAdaptiveClasses,getAdaptivePictureClasses,getBackgroundClasses,getClasses,getContainBackgroundClasses,getContainerClasses,getHtml5VideoClasses,getIframeYoutubeClasses,getLazyBackgroundClasses,getLinkClasses,getOverlayClasses,getRowClasses,getWrapperYoutubeClasses};

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

@@ -1 +1 @@
-let DEFAULT_CLIP_PATH="inset(0px)";export{DEFAULT_CLIP_PATH};
+let DEFAULT_CLIP_PATH="inset(0px)",VIDEO_IFRAME_SCALE="1.04";export{DEFAULT_CLIP_PATH,VIDEO_IFRAME_SCALE};

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

@@ -1 +1 @@
-import{getResponsiveValueByScreen as e,getAspectRatioGlobalSize as t,makeStyleResponsive as o,DEVICES as l,getValueByDevice as i,GRADIENT_BGR_KEY as a,cls as n}from"@gem-sdk/core";import{getImageSrc as r,createBlurDataURL as s}from"../../image/common/helpers.js";import{HREF_TO_SALES_PAGE as g}from"../../constant.js";import{DEFAULT_CLIP_PATH as p}from"./const.js";let getContentPosition=(t,o,i)=>{let a={};return l.map(l=>{let n=e(t,l),r=e(o,l),s=e(i,l);a={...a,[l]:1>=(n?.cols?.length||1)?r:s}}),a},getAspectRatioSettings=(t,o)=>{let l={desktop:t?.desktop?.width,tablet:t?.tablet?.width,mobile:t?.mobile?.width},i={desktop:t?.desktop?.height,tablet:t?.tablet?.height,mobile:t?.mobile?.height},a={desktop:o?.desktop==="custom"?`${e(l,"desktop")}/${e(i,"desktop")}`:o?.desktop==="cover"?"unset":o?.desktop,tablet:o?.tablet==="custom"?`${e(l,"tablet")}/${e(i,"tablet")}`:o?.tablet==="cover"?"unset":o?.tablet,mobile:o?.mobile==="custom"?`${e(l,"mobile")}/${e(i,"mobile")}`:o?.mobile==="cover"?"unset":o?.mobile};return a},getEnableBgImageByDevice=(t,o)=>{if(!e(getBgImage(o),t))return!1;if(!o?.[t]){if("mobile"===t)return o?.tablet?.type==="image"||o?.desktop?.type==="image"&&!o?.tablet;if("tablet"===t)return o?.desktop?.type==="image"}return o?.[t]?.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=(t,o,l,i)=>{if(!t)return"";let n=getBgImage(t),s=e(t,o),g=l?`url(${imagePlaceholder(t)[o]})`:`url(${r(e(n,o),o,i)})`,p=s?.color?`, ${s.color}`:"";return s?.color?.includes(a)&&s?.type==="image"?`${g}${p}`:s?.color?.includes(a)&&s?.type!=="image"?`${s.color}`:s?.type==="image"?g:"url()"},getBackgroundImageHeroBanner=(e,t=!1,i=!1)=>{if(!e)return;let a={};return l.forEach(o=>{a={...a,[o]:getBgImageByScreen(e,o,t,i)}}),o("bgi",a)},getAttachmentDevice=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let l=e?.[o]?.attachment;t={...t,[o]:"fixed"===l?"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]}),{}):{},getStyleAspectRatioHeroBannerCustom=(l,i,a)=>{let n=t(i),r=["desktop","mobile","tablet"];return r.forEach(t=>{let o=e(i,t),r=!!getDataVideoHeroBannerResponsive(t,l),s=o?.shape,g=o?.height,p="original"===s&&"fit-content"!==g,b=p&&r;b&&(n={...n,[t]:"16/9"}),a&&a[t]&&getDataVideoHeroBannerResponsive(t,l)?.data?.videoType==="html5"&&(n={...n,[t]:a[t]})}),o("aspect",n)},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=(t,l)=>{let i={desktop:"none",tablet:"none",mobile:"none"},a=["desktop","mobile","tablet"];return a.forEach(o=>{let a=e(t,o),n=!!getDataVideoHeroBannerResponsive(o,l),r=a?.shape,s=a?.height,g="original"===r&&"fit-content"!==s&&!n;i={...i,[o]:g?"block":"none"}}),o("d",i)},getWidth=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let l=e?.[o];l&&(t={...t,[o]:"default"===l?"var(--g-ct-w, 1200px)":l})}),t},getPercentageVisible=(e,t)=>{let{top:o,height:l}=e,i=-l;if(o<i)return 0;if(o>t)return 100;let a=(o-i)/(t-i)*100;return Math.min(Math.max(a,0),100)},isScaleImage=({enableParallax:e=!1,attachment:t="scroll"})=>!!e||"fixed"===t,getHeightHeroBanner=(e,t)=>{let l={},i=["desktop","mobile","tablet"];return i.forEach(o=>{let i=isScaleImage({enableParallax:t,attachment:e[o]?.attachment});l={...l,[o]:t?"150%":i?"100vh":"100%"}}),o("h",l)},getWidthHeroBanner=(e,t)=>{let l={},i=["desktop","mobile","tablet"];return i.forEach(o=>{let i=isScaleImage({enableParallax:t,attachment:e[o]?.attachment});l={...l,[o]:i?"100vw":"100%"}}),o("w",l)},getTopHeroBanner=e=>{let t={},l=["desktop","mobile","tablet"];return l.forEach(o=>{t={...t,[o]:e[o]?.attachment==="fixed"?"0px":""}}),o("top",t)},getStyleHeroBannerBg=(e,t)=>{let o=getHeightHeroBanner(e,t),l=getWidthHeroBanner(e,t),i=getTopHeroBanner(e);return{...o,...l,...i}},calcRounderClipPath=(e,t=0,o=0)=>{let l=t,i=t;if(t>o?l=o:i=o,e>=999){let t=e-l;return t>0?t:0}let a=e-i;return a>0?a:0},getClipPath=(e,t)=>{if(!t)return`${p}`;let[o,l,i,a]=(e??"0 0 0 0").split(" ").map(e=>parseInt(e??"0")||0),{btlr:n,btrr:r,bbrr:s,bblr:g}=t,b=calcRounderClipPath(parseInt(n??"0")||0,o,a),c=calcRounderClipPath(parseInt(r??"0")||0,o,l),d=calcRounderClipPath(parseInt(s??"0")||0,l,i),m=calcRounderClipPath(parseInt(g??"0")||0,i,a);return[b,c,d,m].every(e=>0===e)?`${p}`:`inset(0 0 0 round ${b}px ${c}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 l=t[e]?.cols??[],i=l.length<=1,a=o[e];if(!i||!a)return;let n=["space-between","top","center","bottom"];return n.includes(a)?a:void 0},getClassSpaceBetween=(e,t)=>{let o=getResponsiveSetting(e),i=getResponsiveSetting(t),a={desktop:get1ColLayout({device:"desktop",settingLayoutRes:o,contentPosition1ColRes:i}),tablet:get1ColLayout({device:"tablet",settingLayoutRes:o,contentPosition1ColRes:i}),mobile:get1ColLayout({device:"mobile",settingLayoutRes:o,contentPosition1ColRes:i})},n={"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"}},r={};return l.forEach(e=>{let t=a[e],o=n?.[t]?.[e];r[o]=!0}),r},getClassSpaceBetweenLeftRight=e=>{let t=getResponsiveSetting(e),o=t?.desktop?.type=="left-distributed"||t?.desktop?.type=="right-distributed",l=t?.tablet?.type=="left-distributed"||t?.tablet?.type=="right-distributed",i=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":l,"mobile:!gp-h-full mobile:[&>*]:!gp-justify-between":i,"mobile:!gp-h-auto":!i}},getClassForStretchContent=t=>{let o={desktop:"none",tablet:"none",mobile:"none"},l=["desktop","mobile","tablet"];return l.forEach(l=>{let i=e(t,l);o={...o,[l]:i}}),n("space-between"===o.desktop?"[&>*>*]:!gp-justify-between":"","space-between"===o.tablet?"tablet:[&>*>*]:!gp-justify-between ":`tablet:[&>*>*]:!gp-justify-${t?.tablet}`,"space-between"===o.mobile?"mobile:[&>*>*]:!gp-justify-between ":`mobile:[&>*>*]:!gp-justify-${t?.mobile}`)},getClassForContentByFitContent=(t,o)=>{let l={desktop:!1,tablet:!1,mobile:!1},i=["desktop","mobile","tablet"];return i.forEach(i=>{let a=e(t,i),n=!!getDataVideoHeroBannerResponsive(i,o),r=a?.shape,s=a?.height,g="original"===r&&"fit-content"!==s;l={...l,[i]:g&&!n}}),n(l.desktop?"!gp-absolute":"",l.tablet?"tablet:!gp-absolute":"tablet:!gp-relative",l.mobile?"mobile:!gp-absolute":"mobile:!gp-relative")},getClassContentPosition=e=>{let t={center:"center",top:"start",bottom:"end","space-between":"between"},o=e.desktop||"center",l=e.tablet||o,i=e.mobile||l;return{[`gp-justify-${t[o||"center"]}`]:!!o,[`tablet:gp-justify-${t[l||"center"]}`]:!!l,[`mobile:gp-justify-${t[i||"center"]}`]:!!i}},getResponsiveSetting=e=>{let t=e.desktop,o=e.tablet?e.tablet:t,l=e.mobile?e.mobile:o;return{desktop:t,tablet:o,mobile:l}},showVideoType=e=>l.some(t=>{let o=i(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(...l){clearTimeout(o),o=setTimeout(()=>e.apply(this,l),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:g,target:"_self"}:t},formatHoverScale=e=>e?String(e).includes("%")?`${e}`:`${e}%`:"100%",opacityEnabledData=e=>{let{overlayColor:t,overlayOpacity:o}=e??{},l=!t?.normal||o?.normal=="0%"||!o?.normal;return{disableOpacity:l}},getOpacityHover=e=>{let{overlayOpacity:t}=e??{},o="number"!=typeof t?.hover||isNaN(t?.hover)?"string"==typeof t?.hover?`${parseInt(t?.hover)}%`:"":`${t?.hover}%`,l="number"!=typeof t?.normal||isNaN(t?.normal)?"string"==typeof t?.normal?`${parseInt(t?.normal)}%`:"0%":`${t?.normal}%`;return o||l};export{debounce,fallbackImg,formatHoverScale,getAspectRatioSettings,getAttachmentDevice,getBackgroundImageHeroBanner,getBannerLink,getBgImage,getClassAlignBanner,getClassContentPosition,getClassForContentByFitContent,getClassForStretchContent,getClassSpaceBetween,getClassSpaceBetweenLeftRight,getClipPath,getContentPosition,getDataVideoHeroBannerResponsive,getDisplayStyleByFitContent,getEnableBgImageByDevice,getOpacityHover,getPercentageVisible,getResponsiveSetting,getStyleAspectRatioHeroBannerCustom,getStyleHeroBannerBg,getVisibilityStyle,getWidth,horizontalAlign,imagePlaceholder,isScaleImage,mapContentPositionToHorizontal,opacityEnabledData,scrollToContentBanner,showVideoType};
+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,VIDEO_IFRAME_SCALE as c}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||t:void 0!==o?o:e?.shapeValue??t},applyVideoRatioForDevice=({shapeByDevice:e,fallbackRatio:t,device:o,currentResult:i})=>{let l=getVideoRatioFromSizeSetting(e,t);return 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:"auto",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?.videoCustomRatio;if(l?.width&&l?.height){let e=Number(l.width),t=Number(l.height);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},getVideoAlignStyles=e=>{switch(e){case"top":default:return{top:"0%",transform:`translate(-50%, 0%) scale(${c})`};case"bottom":return{top:"100%",transform:`translate(-50%, -100%) scale(${c})`};case"center":return{top:"50%",transform:`translate(-50%, -50%) scale(${c})`}}},setVideoIframeAlign=(e,t)=>{if(!e)return;let o=getVideoAlignStyles(t);e.style.top=o.top,e.style.transform=o.transform},updateVideoIframeSize=({iframeEl:e,containerRatio:t,videoObjectFit:o,background:l,currentDevice:a,isYoutubeVideoMigrated:r})=>{let n,s;let p=getVideoAspectRatio(l,a),g=i(l,a);if(!e||!t)return;let b=g?.videoAlign||"top",d=getVideoAlignStyles(b);if("contain"===o){Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:"100%",height:"100%",maxWidth:"none",transform:`translate(-50%, -50%) scale(${c})`});return}t>=p?(n=100,s=t/p*100):(s=100,n=p/t*100),Object.assign(e.style,{position:"absolute",top:d.top,left:"50%",width:r?"500%":`${n}%`,height:r?"100%":`${s}%`,maxWidth:"none",transform:d.transform})};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,setVideoIframeAlign,setVideoWrapperStyle,showVideoType,updateVideoIframeSize};

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

@@ -1 +1 @@
-import{makeStyleWithDefault as e,getWidthByShapeGlobalSize as t,makeStyleResponsive as r,getHeightByShapeGlobalSize as l,makeStyle as o,getSingleColorVariable as n,getRadiusStyleActiveState as i,getStyleBgColor as y,getStyleShadow as a,makeStyleState as g,getGlobalColorStateStyle as u,getResponsiveStylePadding as s,getStyleBackgroundByDevice as c}from"@gem-sdk/core";import{getVisibilityStyle as S,getStyleAspectRatioHeroBannerCustom as d,getAspectRatioSettings as h,getOpacityHover as p,getDisplayStyleByFitContent as m,getStyleHeroBannerBg as b,formatHoverScale as f,getAttachmentDevice as w,getClipPath as v,opacityEnabledData as T,getResponsiveSetting as k}from"./helpers.js";function filterTruthyStyles(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>void 0!==e||""===e))}let getStyle=(o,n,i)=>{let{sizeSetting:y,background:a}=o??{},{ratioOptions:g,aspectRatio:u}=n??{},s={...i,...S(i),...e("w",t(y,!0),{desktop:"--g-ct-w",tablet:"--g-ct-w",mobile:"--g-ct-w"}),...d(a,y,h(g,u)),...r("h",l(y))};return filterTruthyStyles(s)},getContainerStyle=(e,t)=>{let{sizeSetting:g,background:u,borderBg:s,cornerBg:c,shadowBg:S,hasActiveShadow:p}=e??{},{ratioOptions:m,aspectRatio:b}=t??{},f={...r("h",l(g)),...d(u,g,h(m,b)),...o({bs:s?.border??s?.border,bw:s?.width??s?.width,bc:n(s?.color)}),...i({...c,active:{...c||{},radiusType:"custom"}}),...u?{...y(u)}:{},...a({value:S,styleAppliedFor:"box-shadow",isEnableShadow:p})};return filterTruthyStyles(f)},getOverlayStyle=e=>{let{overlayColor:t,overlayOpacity:r,hoverEffect:l}=e??{},{disableOpacity:o}=T(e),n="number"!=typeof r?.normal||isNaN(r?.normal)?"string"==typeof r?.normal?`${parseInt(r?.normal)}%`:"0%":`${r?.normal}%`,i=g("op",{normal:n,hover:p(e)}),y=u("bgc",{...t,hover:t?.hover||t?.normal});o&&(delete y?.["--bgc"],delete i?.["--op"]),l||(delete y?.["--hvr-bgc"],delete i?.["--hvr-op"]);let a={...y,...i,"--top":"0","--left":"0"};return filterTruthyStyles(a)},getRowStyle=e=>{let{contentPadding:t}=e??{},r={...s(t)};return filterTruthyStyles(r)},getAdaptiveStyle=o=>{let{sizeSetting:n,background:i}=o??{},y={...m(n,i),...r("h",l(n)),...e("w",t(n,!0),{desktop:"--g-ct-w",tablet:"--g-ct-w",mobile:"--g-ct-w"})};return filterTruthyStyles(y)},getBackgroundStyle=(e,t,l)=>{let{hoverEffectScale:o,background:n,hoverEffectDuration:i}=e??{},y=`${parseFloat(`${i}`)??.5}s`,a={...b(k(n||{}),t),...c(n,{ignoreBgAttachment:!0,ignoreBackgroundImage:!0}),"--duration":y,"--scale":f(o),...r("pos",w(n)),transform:l,transition:`transform ${y} cubic-bezier(0,0,0,1)`};return filterTruthyStyles(a)},getContainBackgroundStyle=e=>{let{borderBg:t,cornerBg:r}=e??{},l={"clip-path":v(t?.width,r)};return filterTruthyStyles(l)},getHtml5VideoStyle=e=>{let t={...r("aspect",e)};return filterTruthyStyles(t)},getYoutubeIframeStyle=e=>{let t={...r("aspect",e),"pointer-event":"none"};return filterTruthyStyles(t)};export{getAdaptiveStyle,getBackgroundStyle,getContainBackgroundStyle,getContainerStyle,getHtml5VideoStyle,getOverlayStyle,getRowStyle,getStyle,getYoutubeIframeStyle};
+import{makeStyleWithDefault as e,getWidthByShapeGlobalSize as t,makeStyleResponsive as r,getHeightByShapeGlobalSize as l,makeStyle as o,getSingleColorVariable as i,getRadiusStyleActiveState as n,getStyleBgColor as a,getStyleShadow as y,makeStyleState as g,getGlobalColorStateStyle as s,getResponsiveStylePadding as u,getStyleBackgroundByDevice as d,getValueByDevice as p,DEVICES as c,getResponsiveValueByScreen as b}from"@gem-sdk/core";import{getVisibilityStyle as m,getStyleAspectRatioHeroBannerCustom as S,getOpacityHover as h,getDisplayStyleByFitContent as f,getStyleHeroBannerBg as v,formatHoverScale as w,getAttachmentDevice as k,getClipPath as T,opacityEnabledData as j,getResponsiveSetting as O}from"./helpers.js";function filterTruthyStyles(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>void 0!==e||""===e))}let getStyle=(o,i,n)=>{let{sizeSetting:a}=o??{},y={...n,...m(n),...e("w",t(a,!0),{desktop:"--g-ct-w",tablet:"--g-ct-w",mobile:"--g-ct-w"}),...r("h",l(a))};return filterTruthyStyles(y)},getContainerStyle=e=>{let{sizeSetting:t,background:g,borderBg:s,cornerBg:u,shadowBg:d,hasActiveShadow:p}=e??{},c={...r("h",l(t)),...S(g,t),...o({bs:s?.border??s?.border,bw:s?.width??s?.width,bc:i(s?.color)}),...n({...u,active:{...u||{},radiusType:"custom"}}),...g?{...a(g)}:{},...y({value:d,styleAppliedFor:"box-shadow",isEnableShadow:p})};return filterTruthyStyles(c)},getOverlayStyle=e=>{let{overlayColor:t,overlayOpacity:r,hoverEffect:l}=e??{},{disableOpacity:o}=j(e),i="number"!=typeof r?.normal||isNaN(r?.normal)?"string"==typeof r?.normal?`${parseInt(r?.normal)}%`:"0%":`${r?.normal}%`,n=g("op",{normal:i,hover:h(e)}),a=s("bgc",{...t,hover:t?.hover||t?.normal});o&&(delete a?.["--bgc"],delete n?.["--op"]),l||(delete a?.["--hvr-bgc"],delete n?.["--hvr-op"]);let y={...a,...n,"--top":"0","--left":"0"};return filterTruthyStyles(y)},getRowStyle=e=>{let{contentPadding:t}=e??{},r={...u(t)};return filterTruthyStyles(r)},getAdaptiveStyle=o=>{let{sizeSetting:i,background:n}=o??{},a={...f(i,n),...r("h",l(i)),...e("w",t(i,!0),{desktop:"--g-ct-w",tablet:"--g-ct-w",mobile:"--g-ct-w"})};return filterTruthyStyles(a)},getBackgroundStyle=(e,t,l)=>{let{hoverEffectScale:o,background:i,hoverEffectDuration:n}=e??{},a=`${parseFloat(`${n}`)??.5}s`,y={...v(O(i||{}),t),...d(i,{ignoreBgAttachment:!0,ignoreBackgroundImage:!0}),"--duration":a,"--scale":w(o),...r("pos",k(i)),transform:l,transition:`transform ${a} cubic-bezier(0,0,0,1)`};return filterTruthyStyles(y)},getContainBackgroundStyle=e=>{let{borderBg:t,cornerBg:r}=e??{},l={"clip-path":T(t?.width,r)};return filterTruthyStyles(l)},mapVideoObjectFit=e=>{if(e)return{desktop:p(e,"desktop"),tablet:p(e,"tablet"),mobile:p(e,"mobile")}},mapVideoAlignResponsive=e=>{if(!e)return;let t={};return c.forEach(r=>{let l=b(e,r),o=l?.videoAlign;t[r]=o||"top"}),Object.keys(t).length>0?t:void 0},getHtml5VideoStyle=(e,t,l)=>{let o=mapVideoObjectFit(t),i=mapVideoAlignResponsive(l),n={...r("aspect",e),...o?r("objf",o):{},...i?r("objp",i):{}};return filterTruthyStyles(n)},getYoutubeIframeStyle=(e,t)=>{let l=mapVideoObjectFit(t),o={...r("aspect",e),...l?r("objf",l):{},"pointer-events":"none"};return filterTruthyStyles(o)};export{getAdaptiveStyle,getBackgroundStyle,getContainBackgroundStyle,getContainerStyle,getHtml5VideoStyle,getOverlayStyle,getRowStyle,getStyle,getYoutubeIframeStyle};

package/dist/esm/hero-banner/components/HeroBanner.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"./HeroBannerItem.js";import{getAttr as s,getAttrLink as m}from"../common/attrs.js";import{getStyle as t}from"../common/styles.js";import{getClasses as n,getLinkClasses as a}from"../common/classes.js";import{createAttr as i,createStyle as l,createClass as d,If as c}from"@gem-sdk/system";import{useRenderMode as f,useCurrentDevice as p,filterToolbarPreview as u}from"@gem-sdk/core";import{getBannerLink as h}from"../common/helpers.js";import{useHeroBanner as j}from"../hooks/useHeroBanner.js";let HeroBanner=y=>{let{builderAttrs:g,builderProps:k,setting:v,styles:C,style:H,children:B,advanced:b,enableLazyLoadImage:w=!0}=y,{isEditMode:L,isPreviewSharePageMode:R}=f(),{enableLink:x}=v??{},I=h(v),{cssClass:M}=b??{},N=p(),{elementRef:V,transform:z,onMouseEnterParallax:E,onMouseLeaveParallax:P,dataVideo:S,bgRef:q,isShowVideoHtml5:A,openLinkBanner:D,layoutResponsive:F}=j(C,v,N),G=!!I?.link&&x&&!L&&!R,J=i({...s({uid:k?.uid||""})}),K=i({...m()}),O=l({...t(C,v,H)}),Q=d({...n({setting:v,builderProps:k,advancedCssClass:M})}),T=d({...a()}),U=()=>r(o,{setting:v,styles:C,children:B,rawChildren:y.rawChildren,builderProps:k,enableLazyLoadImage:w,elementRef:V,transform:z,dataVideo:S,layoutResponsive:F,bgRef:q,isShowVideoHtml5:A});return e("div",{...g,...J,className:Q,style:O,onMouseEnter:E,onMouseLeave:P,children:[c(!G,U()),c(G,r("div",{...K,"aria-hidden":"true",onClick:D,className:T,children:U()})),u(B,!0)]})};export{HeroBanner as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"./HeroBannerItem.js";import{getAttr as s,getAttrLink as m}from"../common/attrs.js";import{getStyle as n}from"../common/styles.js";import{getClasses as t,getLinkClasses as a}from"../common/classes.js";import{createAttr as i,createStyle as l,createClass as d,If as f}from"@gem-sdk/system";import{useRenderMode as p,useCurrentDevice as c,filterToolbarPreview as u}from"@gem-sdk/core";import{getBannerLink as h}from"../common/helpers.js";import{useHeroBanner as j}from"../hooks/useHeroBanner.js";import{useRef as y}from"react";let HeroBanner=g=>{let{builderAttrs:k,builderProps:v,setting:B,styles:C,style:H,children:R,advanced:b,enableLazyLoadImage:w=!0}=g,{isEditMode:L,isPreviewSharePageMode:x}=p(),{enableLink:I}=B??{},M=h(B),{cssClass:N}=b??{},V=c(),{elementRef:z,transform:E,onMouseEnterParallax:P,onMouseLeaveParallax:S,dataVideo:W,bgRef:q,isShowVideoHtml5:A,openLinkBanner:D,layoutResponsive:F}=j(C,B,V),G=y(null),J=!!M?.link&&I&&!L&&!x,K=i({...s({uid:v?.uid||""})}),O=i({...m()}),Q=l({...n(C,B,H)}),T=d({...t({setting:B,builderProps:v,advancedCssClass:N})}),U=d({...a()}),X=()=>r(o,{setting:B,styles:C,children:R,rawChildren:g.rawChildren,builderProps:v,enableLazyLoadImage:w,elementRef:z,transform:E,dataVideo:W,layoutResponsive:F,bgRef:q,isShowVideoHtml5:A,heroBannerWrapperRef:G});return e("div",{ref:G,...k,...K,className:T,style:Q,onMouseEnter:P,onMouseLeave:S,children:[f(!J,X()),f(J,r("div",{...O,"aria-hidden":"true",onClick:D,className:U,children:X()})),u(R,!0)]})};export{HeroBanner as default};

package/dist/esm/hero-banner/components/HeroBanner.liquid.js

@@ -1,21 +1,21 @@
-import e from"./HeroBannerItem.liquid.js";import{getAttr as r,getAttrLink as o}from"../common/attrs.js";import{getStyle as s}from"../common/styles.js";import{getClasses as t,getLinkClasses as a}from"../common/classes.js";import{createStateOrContext as n,createAttr as l,createStyle as i,createClass as c,If as m}from"@gem-sdk/system";import{template as p,dataStringify as d,RenderIf as f,isLocalEnv as h,baseAssetURL as u}from"@gem-sdk/core";import{getInsertLinkData as $,getSettingPreloadData as g}from"../../helpers.js";import{getResponsiveSetting as v,getBannerLink as E}from"../common/helpers.js";let HeroBanner=b=>{let{builderAttrs:y,builderProps:P,setting:j,styles:k,style:C,children:S,advanced:x,pageContext:B}=b,{enableLazyLoadImage:H}=B??{},{enableLink:N}=j??{},R=E(j),{cssClass:_}=x??{},{urlData:w}=$("",R),A=n({background:v(k?.background||{}),uid:P?.uid,enableParallax:Number(j?.speedParallax||0)>0,speedParallax:Number(j?.speedParallax)||0,hoverEffect:k?.hoverEffect,hoverEffectScale:k?.hoverEffectScale,layout:j?.layout,contentPosition1Col:k?.contentPosition1Col,contentPosition2Col:k?.contentPosition2Col,aspectRatio:j?.aspectRatio,target:R?.target??"_self",href:w?.href??"",linkType:R?.type??"",hoverEffectDuration:k?.hoverEffectDuration}),D=!!R?.link&&N,G=l({...r({uid:P?.uid||""})}),I=l(o()),T=i({...s(k,j,C)}),q=c({...t({setting:j,builderProps:P,advancedCssClass:_})}),M=c({...a()}),O=()=>e({setting:j,styles:k,children:S,enableLazyLoadImage:H,rawChildren:b.rawChildren,builderProps:P});return p`
+import e from"./HeroBannerItem.liquid.js";import{getAttr as r,getAttrLink as t}from"../common/attrs.js";import{getStyle as o}from"../common/styles.js";import{getClasses as s,getLinkClasses as a}from"../common/classes.js";import{createStateOrContext as i,createAttr as n,createStyle as l,createClass as c,If as d}from"@gem-sdk/system";import{template as m,dataStringify as p,RenderIf as f,isLocalEnv as u,baseAssetURL as h}from"@gem-sdk/core";import{getInsertLinkData as g,getSettingPreloadData as v}from"../../helpers.js";import{getResponsiveSetting as $,getBannerLink as b}from"../common/helpers.js";let HeroBanner=j=>{let{builderAttrs:E,builderProps:y,setting:P,styles:S,style:k,children:C,advanced:x,pageContext:B}=j,{enableLazyLoadImage:H}=B??{},{enableLink:M,enableParallax:N}=P??{},O=b(P),{cssClass:R}=x??{},{urlData:V}=g("",O),_=i({background:$(S?.background||{}),uid:y?.uid,enableParallax:N&&Number(P?.speedParallax||0)>0,speedParallax:Number(P?.speedParallax)||0,hoverEffect:S?.hoverEffect,hoverEffectScale:S?.hoverEffectScale,layout:P?.layout,contentPosition1Col:S?.contentPosition1Col,contentPosition2Col:S?.contentPosition2Col,aspectRatio:P?.aspectRatio,sizeSetting:$(S?.sizeSetting||{}),videoObjectFit:$(S?.videoObjectFit||{}),target:O?.target??"_self",href:V?.href??"",linkType:O?.type??"",hoverEffectDuration:S?.hoverEffectDuration,isYoutubeVideoMigrated:P?.isYoutubeVideoMigrated}),w=!!O?.link&&M,z=n({...r({uid:y?.uid||""})}),A=n(t()),D=l({...o(S,P,k)}),F=c({...s({setting:P,builderProps:y,advancedCssClass:R})}),G=c({...a()}),I=()=>e({setting:P,styles:S,children:C,enableLazyLoadImage:H,rawChildren:j.rawChildren,builderProps:y});return m`
       <gp-hero-banner
-        ${{...y}}
-        ${{...G}}
-        class="${q}"
-        style="${T}"
-        gp-data='${d(A)}'
+        ${{...E}}
+        ${{...z}}
+        class="${F}"
+        style="${D}"
+        gp-data='${p(_)}'
       >
-        ${m(!D,O())}
-        ${m(D,p`
+        ${d(!w,I())}
+        ${d(w,m`
           <div
-            ${{...I}}
+            ${{...A}}
             aria-hidden="true"
-            class="${M}"
+            class="${G}"
           >
-            ${O()}
+            ${I()}
           </div>`)}
       </gp-hero-banner>
-       ${f(h,`<script ${g('class="gps-link" delay',"src")}="{{ 'gp-hero-banner-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${g('class="gps-link" delay',"src")}="${u}/assets-v2/gp-hero-banner-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>
+       ${f(u,`<script ${v('class="gps-link" delay',"src")}="{{ 'gp-hero-banner-v2-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${v('class="gps-link" delay',"src")}="${h}/assets-v2/gp-hero-banner-v2-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>
 `)}
   `};export{HeroBanner as default};

package/dist/esm/hero-banner/components/HeroBannerItem.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useMemo as t}from"react";import{useEditorMode as s,filterToolbarPreview as l,getAspectRatioGlobalSize as r}from"@gem-sdk/core";import i from"../../grid/components/row/Row.js";import{createStyle as m,createClass as a}from"@gem-sdk/system";import p from"../../image/components/AdaptiveImage.js";import d from"../../video/components/HTML5Embed.js";import{getContainerStyle as n,getOverlayStyle as c,getRowStyle as y,getAdaptiveStyle as f,getBackgroundStyle as u,getContainBackgroundStyle as v,getYoutubeIframeStyle as h,getHtml5VideoStyle as b}from"../common/styles.js";import{getContainerClasses as g,getOverlayClasses as j,getRowClasses as N,getAdaptivePictureClasses as H,getAdaptiveClasses as k,getBackgroundClasses as w,getContainBackgroundClasses as T,getHtml5VideoClasses as C,getWrapperYoutubeClasses as I,getIframeYoutubeClasses as L}from"../common/classes.js";import{getAspectRatioSettings as z,getBackgroundImageHeroBanner as B,showVideoType as R,horizontalAlign as E,getWidth as x,scrollToContentBanner as A,getBgImage as O,fallbackImg as V}from"../common/helpers.js";import $ from"../../video/components/LiteYouTubeEmbed.js";import{getYoutubeVideoId as M,youtubeVideoRegex as S}from"../../video/common/helpers.js";let HeroBannerItem=W=>{s();let{setting:Y,styles:q,children:D,elementRef:F,transform:G,dataVideo:J,bgRef:K,isShowVideoHtml5:P,layoutResponsive:Q}=W,{layout:U,verticalAlign:X,enableParallax:Z,alt:_,title:ee}=Y??{},{background:eo,overlayColor:et,verticalGutter:es,sizeSetting:el,contentWidth:er,hoverEffect:ei,contentPosition1Col:em,contentPosition2Col:ea}=q??{},ep=z(Y?.ratioOptions,Y?.aspectRatio),ed=m({...n(q,Y)}),en=a({...g(Y,q)}),ec=m({...c(q)}),ey=a({...j(q)}),ef=m({...y(q)}),eu=a({...N(q,Y)}),ev=m({...f(q)}),eh=a({...H()}),eb=a({...k()}),eg=a({...w(ei,!1)}),ej=m({...B(eo,!1,!0),...u(q,Z,G)}),eN=a({...T()}),eH=m({...v(q)}),ek=a({...C(Y?.aspectRatio,!P)}),ew=m({...h(ep)}),eT=m({...b(ep)}),eC=a({...I()}),eI=a({...L()}),eL=t(()=>{if(!R(eo))return;if(J?.videoType==="html5"&&!J.videoHtml5||J?.videoType==="youtube"&&!J.video)return null;if(J?.type==="video"&&J?.videoType==="html5"&&J?.videoHtml5)return e(d,{muted:!0,loop:J?.loop,controls:!1,autoplay:!0,src:J?.videoHtml5||"",title:"Video",style:eT,className:ek});let o=J?.video??"",t=M(o),s=J?.loop?1:0,l=`&loop=${s}&playlist=${t}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(J?.type==="video"&&J?.videoType==="youtube"&&t&&S.test(o))return e($,{id:t,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:l,adNetwork:!1,noCookie:!0,muted:!0,lazy:J?.lazyLoad??!0,style:ew,wrapperClass:eC,iframeClass:eI})},[J,eo,ek,eI,eC,ew,eT]);return o("div",{className:en,style:ed,children:[o("div",{ref:F,className:eN,style:eH,children:[e("div",{ref:K,className:eg,style:ej,children:eL}),!!et&&e("div",{"aria-label":"Overlay",className:ey,style:ec})]}),e(i,{className:eu,style:ef,setting:{layout:U,horizontalAlign:E(U,em,ea),verticalAlign:X},styles:{verticalGutter:es,width:x(er),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},hiddenEmptyCol:Q?.cols?.length===1,onBlur:e=>A(e),children:l(D)}),e(p,{pictureClass:eh,srcSet:O(eo),className:eb,aspectRatio:r(el),style:ev,alt:_,title:ee,enableLazyLoadImage:!1,fallbackImg:V})]})};export{HeroBannerItem as default};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useMemo as t}from"react";import{useEditorMode as s,filterToolbarPreview as i,getAspectRatioGlobalSize as r}from"@gem-sdk/core";import l from"../../grid/components/row/Row.js";import{createStyle as m,createClass as a}from"@gem-sdk/system";import d from"../../image/components/AdaptiveImage.js";import n from"../../video/components/HTML5Embed.js";import{getContainerStyle as p,getOverlayStyle as c,getRowStyle as y,getAdaptiveStyle as u,getBackgroundStyle as f,getContainBackgroundStyle as v,getYoutubeIframeStyle as h,getHtml5VideoStyle as b}from"../common/styles.js";import{getContainerClasses as g,getOverlayClasses as j,getRowClasses as N,getAdaptivePictureClasses as H,getAdaptiveClasses as T,getBackgroundClasses as k,getContainBackgroundClasses as w,getHtml5VideoClasses as I,getWrapperYoutubeClasses as B,getIframeYoutubeClasses as C}from"../common/classes.js";import{getBackgroundImageHeroBanner as L,showVideoType as V,horizontalAlign as z,getWidth as M,scrollToContentBanner as Y,getBgImage as E,fallbackImg as x}from"../common/helpers.js";import A from"../../video/components/LiteYouTubeEmbed.js";import{getYoutubeVideoId as R,youtubeVideoRegex as $}from"../../video/common/helpers.js";import O from"../hooks/useHeroBannerItem.js";import{getYoutubeContentClasses as S}from"../../video/common/classes.js";let HeroBannerItem=W=>{s();let{setting:q,styles:D,children:F,elementRef:G,transform:J,dataVideo:K,bgRef:P,isShowVideoHtml5:Q,layoutResponsive:U,heroBannerWrapperRef:X}=W,{layout:Z,verticalAlign:_,enableParallax:ee,alt:eo,title:et}=q??{},{background:es,overlayColor:ei,verticalGutter:er,sizeSetting:el,contentWidth:em,hoverEffect:ea,contentPosition1Col:ed,contentPosition2Col:en,videoObjectFit:ep}=D??{},ec=m({...p(D)}),ey=a({...g(q,D)}),eu=m({...c(D)}),ef=a({...j(D)}),ev=m({...y(D)}),eh=a({...N(D,q)}),eb=m({...u(D)}),eg=a({...H()}),ej=a({...T()}),eN=a({...k(ea,!1)}),eH=m({...L(es,!1,!0),...f(D,ee,J)}),eT=a({...w()}),ek=m({...v(D)}),ew=a({...I(!Q)}),{youtubeIframeWrapperRef:eI,resolvedAspectRatio:eB,youtubeAspectRatio:eC}=O({videoType:K?.videoType,sizeSetting:el,background:es,videoObjectFit:ep,heroBannerWrapperRef:X,isYoutubeVideoMigrated:q?.isYoutubeVideoMigrated}),eL=m({...h(eC,ep)}),eV=m({...b(eB,ep,es)}),ez=a({...B(q?.isYoutubeVideoMigrated)}),eM=a({...C()}),eY=a({...S()}),eE=t(()=>{if(!V(es))return;if(K?.videoType==="html5"&&!K.videoHtml5||K?.videoType==="youtube"&&!K.video)return null;if(K?.type==="video"&&K?.videoType==="html5"&&K?.videoHtml5)return e(n,{muted:!0,loop:K?.loop,controls:!1,autoplay:!0,src:K?.videoHtml5||"",title:"Video",style:eV,className:ew});let o=K?.video??"",t=R(o),s=K?.loop?1:0,i=`&loop=${s}&playlist=${t}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(K?.type==="video"&&K?.videoType==="youtube"&&t&&$.test(o))return e("div",{className:eY,ref:eI,children:e(A,{id:t,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:i,adNetwork:!1,noCookie:!0,muted:!0,lazy:K?.lazyLoad??!0,style:eL,wrapperClass:ez,iframeClass:eM})})},[K,es,ew,eM,ez,eL,eV,eI]);return o("div",{className:ey,style:ec,children:[o("div",{ref:G,className:eT,style:ek,children:[e("div",{ref:P,className:eN,style:eH,children:eE}),!!ei&&e("div",{"aria-label":"Overlay",className:ef,style:eu})]}),e(l,{className:eh,style:ev,setting:{layout:Z,horizontalAlign:z(Z,ed,en),verticalAlign:_},styles:{verticalGutter:er,width:M(em),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},hiddenEmptyCol:U?.cols?.length===1,onBlur:e=>Y(e),children:i(F)}),e(d,{pictureClass:eg,srcSet:E(es),className:ej,aspectRatio:r(el),style:eb,alt:eo,title:et,enableLazyLoadImage:!1,fallbackImg:x})]})};export{HeroBannerItem as default};

package/dist/esm/hero-banner/components/HeroBannerItem.liquid.js

@@ -1,16 +1,16 @@
-import e from"../../grid/components/row/Row.liquid.js";import{template as o,getAspectRatioGlobalSize as s,DEVICES as t,getResponsiveValueByScreen as i}from"@gem-sdk/core";import{createStyle as r,createClass as m,If as l}from"@gem-sdk/system";import a from"../../image/components/AdaptiveImage.liquid.js";import p from"../../video/components/HTML5Embed.liquid.js";import{getContainerStyle as d,getOverlayStyle as n,getRowStyle as c,getAdaptiveStyle as u,getBackgroundStyle as f,getContainBackgroundStyle as y,getYoutubeIframeStyle as v,getHtml5VideoStyle as j}from"../common/styles.js";import{getContainerClasses as $,getOverlayClasses as g,getRowClasses as b,getAdaptivePictureClasses as h,getAdaptiveClasses as w,getBackgroundClasses as k,getContainBackgroundClasses as N,getHtml5VideoClasses as q,getWrapperYoutubeClasses as H,getIframeYoutubeClasses as C,getLazyBackgroundClasses as I}from"../common/classes.js";import{getAspectRatioSettings as R,getBackgroundImageHeroBanner as z,horizontalAlign as A,getWidth as B,getBgImage as L,fallbackImg as T,getEnableBgImageByDevice as x,showVideoType as E,getResponsiveSetting as O}from"../common/helpers.js";import{getImageSrc as S}from"../../image/common/helpers.js";import V from"../../image/components/NextImage.liquid.js";import D from"../../video/components/LiteYouTubeEmbed.liquid.js";import{getYoutubeVideoId as M,youtubeVideoRegex as W}from"../../video/common/helpers.js";import{isRenderHtmlVideo as Y}from"../../grid/components/row/common/helpers.js";import{PRIORITY_LOAD_ATTRS as F}from"../../image/constants.js";let HeroBannerItem=G=>{let{enableLazyLoadImage:J=!0,setting:K,styles:P,children:Q,builderProps:U,rawChildren:X}=G,{layout:Z,verticalAlign:_,enableParallax:ee,alt:eo,title:es,preload:et}=K??{},{background:ei,overlayColor:er,verticalGutter:em,sizeSetting:el,contentWidth:ea,hoverEffect:ep,contentPosition1Col:ed,contentPosition2Col:en}=P??{},ec=!et&&J,eu=R(K?.ratioOptions,K?.aspectRatio),ef=O(ei||{}).desktop,ey=r({...d(P,K)}),ev=m({...$(K,P)}),ej=r({...n(P)}),e$=m({...g(P)}),eg=r({...c(P)}),eb=m({...b(P,K)}),eh=r({...u(P)}),ew=m({...h()}),ek=m({...w()}),eN=m({...k(ep,ec)}),eq=r({...z(ei,ec,!1),...f(P,ee,"")}),eH=m({...N()}),eC=r({...y(P)}),eI=m({...q(K?.aspectRatio,!1)}),eR=r({...v(eu)}),ez=m({...H()}),eA=r({...j(eu)}),eB=m({...C()}),eL=e=>m({...I(e)}),eT=()=>{if(!et)return t.map(e=>l(x(e,ei),V({src:S(i(L(ei),e),e),alt:eo,title:es,className:eL(e),isDisableAspectStyle:!0,enableLazyLoadImage:J}))).join("")},ex=()=>{if(!E(ei))return;if(Y(ei))return p({uid:U?.uid,muted:!0,loop:ef?.loop,controls:!1,autoplay:!0,src:ef?.videoHtml5||"",title:"Video",style:eA,className:eI});let e=ef?.video??"",o=M(e),s=`&loop=false&playlist=${o}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(ef?.type==="video"&&ef?.videoType==="youtube"&&o&&W.test(e))return D({uid:U?.uid,id:o,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:s,adNetwork:!1,noCookie:!0,muted:!0,lazy:ef?.lazyLoad??!0,preload:!0,style:eR,wrapperClass:ez,iframeClass:eB})};return o`
-  <div class="${ev}" style="${ey}">
+import{template as e,getAspectRatioGlobalSize as o,DEVICES as s,getResponsiveValueByScreen as t}from"@gem-sdk/core";import i from"../../grid/components/row/Row.liquid.js";import{createStyle as m,createClass as r,If as l}from"@gem-sdk/system";import a from"../../image/components/AdaptiveImage.liquid.js";import p from"../../video/components/HTML5Embed.liquid.js";import{getContainerStyle as d,getOverlayStyle as n,getRowStyle as c,getAdaptiveStyle as u,getBackgroundStyle as f,getContainBackgroundStyle as y,getYoutubeIframeStyle as v,getHtml5VideoStyle as j}from"../common/styles.js";import{getContainerClasses as $,getOverlayClasses as g,getRowClasses as b,getAdaptivePictureClasses as h,getAdaptiveClasses as w,getBackgroundClasses as k,getContainBackgroundClasses as N,getHtml5VideoClasses as q,getWrapperYoutubeClasses as H,getIframeYoutubeClasses as C,getLazyBackgroundClasses as I}from"../common/classes.js";import{getAspectRatio as z,getYoutubeAspectRatio as A,getBackgroundImageHeroBanner as B,horizontalAlign as L,getWidth as T,getBgImage as x,fallbackImg as E,getEnableBgImageByDevice as R,showVideoType as S,getResponsiveSetting as V}from"../common/helpers.js";import{getImageSrc as D}from"../../image/common/helpers.js";import M from"../../image/components/NextImage.liquid.js";import O from"../../video/components/LiteYouTubeEmbed.liquid.js";import{getYoutubeVideoId as W,youtubeVideoRegex as Y}from"../../video/common/helpers.js";import{isRenderHtmlVideo as F}from"../../grid/components/row/common/helpers.js";import{PRIORITY_LOAD_ATTRS as G}from"../../image/constants.js";let HeroBannerItem=J=>{let{enableLazyLoadImage:K=!0,setting:P,styles:Q,children:U,builderProps:X,rawChildren:Z}=J,{layout:_,verticalAlign:ee,enableParallax:eo,alt:es,title:et,preload:ei,isYoutubeVideoMigrated:em}=P??{},{background:er,overlayColor:el,verticalGutter:ea,sizeSetting:ep,contentWidth:ed,hoverEffect:en,contentPosition1Col:ec,contentPosition2Col:eu,videoObjectFit:ef}=Q??{},ey=!ei&&K,ev=z(ep,er),ej=A(er,ef,ev),e$=V(er||{}),eg=e$.desktop,eb=m({...d(Q)}),eh=r({...$(P,Q)}),ew=m({...n(Q)}),ek=r({...g(Q)}),eN=m({...c(Q)}),eq=r({...b(Q,P)}),eH=m({...u(Q)}),eC=r({...h()}),eI=r({...w()}),ez=r({...k(en,ey)}),eA=m({...B(er,ey,!1),...f(Q,eo,"")}),eB=r({...N()}),eL=m({...y(Q)}),eT=r({...q(!1)}),ex=m({...v(ej,ef)}),eE=r({...H(em)}),eR=m({...j(ev,ef,er)}),eS=r({...C()}),eV=e=>r({...I(e)}),eD=()=>{if(!ei)return s.map(e=>l(R(e,er),M({src:D(t(x(er),e),e),alt:es,title:et,className:eV(e),isDisableAspectStyle:!0,enableLazyLoadImage:K}))).join("")},eM=()=>{if(!S(er))return;if(F(er))return p({uid:X?.uid,muted:!0,loop:eg?.loop,controls:!1,autoplay:!0,src:eg?.videoHtml5||"",title:"Video",style:eR,className:eT});let e=eg?.video??"",o=W(e),s=`&loop=false&playlist=${o}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(eg?.type==="video"&&eg?.videoType==="youtube"&&o&&Y.test(e))return O({uid:X?.uid,id:o,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:s,adNetwork:!1,noCookie:!0,muted:!0,lazy:eg?.lazyLoad??!0,preload:!0,style:ex,wrapperClass:eE,iframeClass:eS})};return e`
+  <div class="${eh}" style="${eb}">
       <div
-        class="${eH}"
-        style="${eC}"
+        class="${eB}"
+        style="${eL}"
       >
-        <div class="${eN}" style="${eq}">
-          ${eT()}
-          ${ex()}
+        <div class="${ez}" style="${eA}">
+          ${eD()}
+          ${eM()}
         </div>
-        ${l(!!er,o`<div aria-label="Overlay" class="${e$}" style="${ej}"> </div>`)}
+        ${l(!!el,e`<div aria-label="Overlay" class="${ek}" style="${ew}"> </div>`)}
       </div>
-      ${e({className:eb,style:eg,setting:{layout:Z,horizontalAlign:A(Z,ed,en),verticalAlign:_},styles:{verticalGutter:em,width:B(ea),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:Q,rawChildren:X})}
-        ${a({pictureClass:ew,srcSet:L(ei),className:ek,...et&&F,aspectRatio:s(el),style:eh,alt:eo,title:es,enableLazyLoadImage:J,fallbackImg:T})}
+      ${i({className:eq,style:eN,setting:{layout:_,horizontalAlign:L(_,ec,eu),verticalAlign:ee},styles:{verticalGutter:ea,width:T(ed),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:U,rawChildren:Z})}
+        ${a({pictureClass:eC,srcSet:x(er),className:eI,...ei&&G,aspectRatio:o(ep),style:eH,alt:es,title:et,enableLazyLoadImage:K,fallbackImg:E})}
   </div>
 `};export{HeroBannerItem as default};

package/dist/esm/hero-banner/hooks/useHeroBanner.js

@@ -1 +1 @@
-import{useState as e,useRef as r,useEffect as t,useCallback as n,useMemo as l}from"react";import{getResponsiveValueByScreen as o,getBgVideoByDevice as s}from"@gem-sdk/core";import{useTranslateValue as a}from"./useTranslateValue.js";import i from"./useIntersectionObserver.js";import{getResponsiveSetting as m}from"../common/helpers.js";import u from"../common/animation-manager.js";let useHeroBanner=(p,c,d)=>{let{hoverEffect:g,hoverEffectScale:f,background:x}=p||{},{link:B}=c||{},b=Number(c?.speedParallax)||0,[j,w]=e(0),[H,$]=e(null),[k,v]=e(null),[y,N]=e(""),Y=r(null),[h,C]=i(),{translateValue:P}=a({containerBoundingClientRect:H,backgroundBoundingClientRect:k,speed:b}),R=o(c?.layout,d),T=m(x||{}),E=Number(c?.speedParallax||0)>0&&T[d]?.type==="image",F=()=>{g&&E&&N(`${y} scale(${f||"100%"})`)},I=()=>{g&&E&&N(`translateY(${P}px)`)},O=e=>{B?.link&&!e?.srcElement?.closest("a")&&window.open(B?.link,B.target)};t(()=>{E?N(`translateY(${P}px)`):N("")},[P,E]);let V=n(()=>{if(!E||0===b||!C)return;let e=Number(window.scrollY.toFixed(0));j!==e&&($(h?.current?h?.current?.getBoundingClientRect():null),v(Y?.current?Y?.current?.getBoundingClientRect():null),w(e))},[j,C,E,b,h,Y]),q=s(x,d),z=l(()=>!!(q?.videoHtml5&&"html5"===q.videoType),[q]);return t(()=>(u.register(V),()=>{u.unregister(V)}),[V]),t(()=>(u.register(V),()=>{u.unregister(V)}),[V]),{onMouseEnterParallax:F,onMouseLeaveParallax:I,bgRef:Y,transform:y,elementRef:h,dataVideo:q,isShowVideoHtml5:z,openLinkBanner:O,layoutResponsive:R}};export{useHeroBanner as default,useHeroBanner};
+import{useState as e,useRef as r,useEffect as t,useCallback as n,useMemo as l}from"react";import{getResponsiveValueByScreen as o,getBgVideoByDevice as s}from"@gem-sdk/core";import{useTranslateValue as a}from"./useTranslateValue.js";import i from"./useIntersectionObserver.js";import{getResponsiveSetting as m}from"../common/helpers.js";import u from"../common/animation-manager.js";let useHeroBanner=(p,c,d)=>{let{hoverEffect:g,hoverEffectScale:f,background:x}=p||{},{link:B,enableParallax:b}=c||{},j=Number(c?.speedParallax)||0,[w,H]=e(0),[$,k]=e(null),[v,y]=e(null),[N,Y]=e(""),h=r(null),[C,P]=i(),{translateValue:R}=a({containerBoundingClientRect:$,backgroundBoundingClientRect:v,speed:j}),T=o(c?.layout,d),E=m(x||{}),F=b&&Number(c?.speedParallax||0)>0&&E[d]?.type==="image"||!1,I=()=>{g&&F&&Y(`${N} scale(${f||"100%"})`)},O=()=>{g&&F&&Y(`translateY(${R}px)`)},V=e=>{B?.link&&!e?.srcElement?.closest("a")&&window.open(B?.link,B.target)};t(()=>{F?Y(`translateY(${R}px)`):Y("")},[R,F]);let q=n(()=>{if(!F||0===j||!P)return;let e=Number(window.scrollY.toFixed(0));w!==e&&(k(C?.current?C?.current?.getBoundingClientRect():null),y(h?.current?h?.current?.getBoundingClientRect():null),H(e))},[w,P,F,j,C,h]),z=s(x,d),A=l(()=>!!(z?.videoHtml5&&"html5"===z.videoType),[z]);return t(()=>(u.register(q),()=>{u.unregister(q)}),[q]),t(()=>(u.register(q),()=>{u.unregister(q)}),[q]),{onMouseEnterParallax:I,onMouseLeaveParallax:O,bgRef:h,transform:N,elementRef:C,dataVideo:z,isShowVideoHtml5:A,openLinkBanner:V,layoutResponsive:T}};export{useHeroBanner as default,useHeroBanner};

package/dist/esm/hero-banner/hooks/useHeroBannerItem.js

@@ -0,0 +1 @@
+import{useRef as e,useMemo as r,useEffect as t}from"react";import{useCurrentDevice as i,getResponsiveValueByScreen as o}from"@gem-sdk/core";import{getAspectRatio as n,getYoutubeAspectRatio as u,setVideoIframeAlign as m,resetVideoIframeStyle as a,resetVideoWrapperStyle as l,setVideoWrapperStyle as f,getResponsiveSetting as s,updateVideoIframeSize as c,getContainerRatio as d}from"../common/helpers.js";let useHeroBannerItem=({videoType:v,sizeSetting:y,background:b,videoObjectFit:p,heroBannerWrapperRef:E,isYoutubeVideoMigrated:w})=>{let L=i(),q=e(null),A=r(()=>n(y,b),[y,b]),R=r(()=>u(b,p,A),[b,p,A]),S=s(p||{}),g=o(S,L),j=o(b,L),B=j?.loop;return t(()=>{if("youtube"!==v)return;let e=q.current;if(!e)return;let r=()=>e?.querySelector("iframe"),t=r();if(!t)return;let i=o(b,L),n=i?.videoAlign;m(t,n)},[b,L,v]),t(()=>{let e=q.current,r=E?.current,t=()=>e?.querySelector("iframe"),i=i=>{let o=i||e;if(!o)return;let n=o.querySelector("iframe");c({iframeEl:n||t(),containerRatio:d(r),videoObjectFit:g||"cover",background:b,currentDevice:L,isYoutubeVideoMigrated:w})},o=e=>{let r=e.detail?.iframe;if(r){let e=r.closest("article"),t=e?.parentElement;setTimeout(()=>{i(t)},50)}};if(r&&r.addEventListener("youtube-iframe-ready",o),!e)return()=>{r&&r.removeEventListener("youtube-iframe-ready",o)};if("youtube"!==v){let i=t();return i&&a(i),l(e),()=>{r&&r.removeEventListener("youtube-iframe-ready",o)}}f(e),t()&&(window.requestAnimationFrame(()=>i()),setTimeout(()=>{i()},100));let n=window.ResizeObserver;if(!n)return()=>{r&&r.removeEventListener("youtube-iframe-ready",o)};let u=new n(()=>i());return r&&u.observe(r),()=>{if(u.disconnect(),r&&r.removeEventListener("youtube-iframe-ready",o),e){let r=t();r&&a(r),l(e)}}},[v,g,L,A,B]),{youtubeIframeWrapperRef:q,resolvedAspectRatio:A,youtubeAspectRatio:R}};export{useHeroBannerItem as default};

package/dist/esm/hero-banner/settings/configs/presets/banner-1-col-pre-sales-page.js

@@ -1,4 +1,4 @@
-let heroBanner1ColPreSalesPage={id:"hero-banner-1-col-pre-sales-page",name:{en:"Hero Banner"},icon:{desktop:`
+let heroBanner1ColPreSalesPage={id:"hero-banner-1-col-pre-sales-page",name:"Hero Banner",icon:{desktop:`
       <svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_1706_4280)">
       <rect width="94" height="48" rx="3" fill="#424242"/>

package/dist/esm/hero-banner/settings/configs/presets/banner-1-col.js

@@ -1,4 +1,4 @@
-let heroBanner1Col={id:"hero-banner-1-col",name:{en:"Hero Banner"},icon:{desktop:`
+let heroBanner1Col={id:"hero-banner-1-col",name:"Hero Banner",icon:{desktop:`
       <svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_1706_4280)">
       <rect width="94" height="48" rx="3" fill="#424242"/>

package/dist/esm/hero-banner/settings/configs/presets/banner-content-left-pre-sales-page.js

@@ -1,4 +1,4 @@
-let heroBannerContentLeftPreSalesPage={id:"hero-banner-content-left-pre-sales-page",name:{en:"Hero Banner"},icon:{desktop:`
+let heroBannerContentLeftPreSalesPage={id:"hero-banner-content-left-pre-sales-page",name:"Hero Banner",icon:{desktop:`
     <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_2825_116)">
     <rect width="96" height="48" rx="3" fill="#424242"/>

package/dist/esm/hero-banner/settings/configs/presets/banner-content-left.js

@@ -1,4 +1,4 @@
-let heroBannerContentLeft={id:"hero-banner-content-left",name:{en:"Hero Banner"},icon:{desktop:`
+let heroBannerContentLeft={id:"hero-banner-content-left",name:"Hero Banner",icon:{desktop:`
     <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_2825_116)">
     <rect width="96" height="48" rx="3" fill="#424242"/>

package/dist/esm/hero-banner/settings/configs/presets/banner-content-right-pre-sales-page.js

@@ -1,4 +1,4 @@
-let heroBannerContentRightPreSalesPage={id:"hero-banner-content-right-pre-sales-page",name:{en:"Hero Banner"},icon:{desktop:`
+let heroBannerContentRightPreSalesPage={id:"hero-banner-content-right-pre-sales-page",name:"Hero Banner",icon:{desktop:`
       <svg
         width="96"
         height="48"

package/dist/esm/hero-banner/settings/configs/presets/banner-content-right.js

@@ -1,4 +1,4 @@
-let heroBannerContentRight={id:"hero-banner-content-right",name:{en:"Hero Banner"},icon:{desktop:`
+let heroBannerContentRight={id:"hero-banner-content-right",name:"Hero Banner",icon:{desktop:`
       <svg
         width="96"
         height="48"

package/dist/esm/hero-banner/settings/configs/presets/banner-parallax-pre-sales-page.js

@@ -1,4 +1,4 @@
-let heroBannerParallaxPreSalesPage={id:"hero-banner-parallax-pre-sales-page",name:{en:"Hero Banner Parallax"},icon:{desktop:`
+let heroBannerParallaxPreSalesPage={id:"hero-banner-parallax-pre-sales-page",name:"Hero Banner Parallax",icon:{desktop:`
       <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_21157_36120)">
 <rect width="96" height="48" rx="3" fill="#424242"/>

package/dist/esm/hero-banner/settings/configs/presets/banner-parallax.js

@@ -1,4 +1,4 @@
-let heroBannerParallax={id:"hero-banner-parallax",name:{en:"Hero Banner Parallax"},icon:{desktop:`
+let heroBannerParallax={id:"hero-banner-parallax",name:"Hero Banner Parallax",icon:{desktop:`
       <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_21157_36120)">
 <rect width="96" height="48" rx="3" fill="#424242"/>

package/dist/esm/hero-banner/settings/configs/presets/banner-video-pre-sales-page.js

@@ -1,4 +1,4 @@
-let heroBannerVideoPreSalesPage={id:"hero-banner-video-pre-sales-page",name:{en:"Video Banner"},icon:{desktop:`
+let heroBannerVideoPreSalesPage={id:"hero-banner-video-pre-sales-page",name:"Video Banner",icon:{desktop:`
     <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_12567_1327)">
     <rect width="96" height="48" rx="3" fill="#424242"/>
@@ -12,4 +12,4 @@ let heroBannerVideoPreSalesPage={id:"hero-banner-video-pre-sales-page",name:{en:
     </clipPath>
     </defs>
     </svg>
-    `},components:[{tag:"HeroBanner",settings:{layout:{desktop:{cols:[12],display:"fill"}},link:{type:"go-to-sales-page"}},styles:{contentWidth:{desktop:"1200px"},background:{desktop:{type:"video",image:{src:"",width:1920,height:900},videoType:"html5",video:"https://www.youtube.com/watch?v=drIt4RH_kyQ",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4"}}},childrens:[{tag:"Col",childrens:[{tag:"Heading",settings:{text:"Click here to edit heading"},styles:{textAlign:{desktop:"center"},typo:{attrs:{color:"#FFFFFF"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}},{tag:"Text",settings:{text:"This is your text block. Click to edit and make it your own. Share your product's story<br/>                  or services offered. Get creative and make it yours!"},styles:{textAlign:{desktop:"center"},typo:{attrs:{color:"#FFFFFF"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}},{tag:"Button",settings:{label:"Get started"},styles:{align:{desktop:"center"}}}]}]}]};export{heroBannerVideoPreSalesPage};
+    `},components:[{tag:"HeroBanner",settings:{layout:{desktop:{cols:[12],display:"fill"}},link:{type:"go-to-sales-page"}},styles:{contentWidth:{desktop:"1200px"},sizeSetting:{desktop:{shapeVideo:"16/9",enableVideoShape:!0}},background:{desktop:{type:"video",image:{src:"",width:1920,height:900},videoType:"html5",video:"https://www.youtube.com/watch?v=drIt4RH_kyQ",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4"}}},childrens:[{tag:"Col",childrens:[{tag:"Heading",settings:{text:"Click here to edit heading"},styles:{textAlign:{desktop:"center"},typo:{attrs:{color:"#FFFFFF"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}},{tag:"Text",settings:{text:"This is your text block. Click to edit and make it your own. Share your product's story<br/>                  or services offered. Get creative and make it yours!"},styles:{textAlign:{desktop:"center"},typo:{attrs:{color:"#FFFFFF"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}},{tag:"Button",settings:{label:"Get started"},styles:{align:{desktop:"center"}}}]}]}]};export{heroBannerVideoPreSalesPage};

package/dist/esm/hero-banner/settings/configs/presets/banner-video.js

@@ -1,4 +1,4 @@
-let heroBannerVideo={id:"hero-banner-video",name:{en:"Video Banner"},icon:{desktop:`
+let heroBannerVideo={id:"hero-banner-video",name:"Video Banner",icon:{desktop:`
     <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_12567_1327)">
     <rect width="96" height="48" rx="3" fill="#424242"/>
@@ -12,4 +12,4 @@ let heroBannerVideo={id:"hero-banner-video",name:{en:"Video Banner"},icon:{deskt
     </clipPath>
     </defs>
     </svg>
-    `},components:[{tag:"HeroBanner",settings:{layout:{desktop:{cols:[12],display:"fill"}}},styles:{contentWidth:{desktop:"1200px"},sizeSetting:{desktop:{shape:"original",width:"100%"},mobile:{shape:"original",width:"100%"}},background:{desktop:{type:"video",image:{src:"",width:1920,height:900},videoType:"youtube",video:"https://www.youtube.com/watch?v=drIt4RH_kyQ",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4"}}},childrens:[{tag:"Col",childrens:[{tag:"Heading",settings:{text:"Click here to edit heading"},styles:{textAlign:{desktop:"center"},typo:{attrs:{color:"#FFFFFF"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}},{tag:"Text",settings:{text:"This is your text block. Click to edit and make it your own. Share your product's story<br/>                  or services offered. Get creative and make it yours!"},styles:{textAlign:{desktop:"center"},typo:{attrs:{color:"#FFFFFF"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}},{tag:"Button",settings:{label:"Get started"},styles:{align:{desktop:"center"}}}]}]}]};export{heroBannerVideo};
+    `},components:[{tag:"HeroBanner",settings:{layout:{desktop:{cols:[12],display:"fill"}}},styles:{contentWidth:{desktop:"1200px"},sizeSetting:{desktop:{shape:"original",width:"100%",shapeVideo:"16/9",enableVideoShape:!0},mobile:{shape:"original",width:"100%",shapeVideo:"16/9",enableVideoShape:!0}},background:{desktop:{type:"video",image:{src:"",width:1920,height:900},videoType:"youtube",video:"https://www.youtube.com/watch?v=NfASaHFN1zg",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4"}}},childrens:[{tag:"Col",childrens:[{tag:"Heading",settings:{text:"Click here to edit heading"},styles:{textAlign:{desktop:"center"},typo:{attrs:{color:"#FFFFFF"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}},{tag:"Text",settings:{text:"This is your text block. Click to edit and make it your own. Share your product's story<br/>                  or services offered. Get creative and make it yours!"},styles:{textAlign:{desktop:"center"},typo:{attrs:{color:"#FFFFFF"}}},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}},{tag:"Button",settings:{label:"Get started"},styles:{align:{desktop:"center"}}}]}]}]};export{heroBannerVideo};