npm - @gem-sdk/components - Versions diffs - 12.0.0-staging.14 → 12.0.0-staging.15 - Mend

@gem-sdk/components 12.0.0-staging.14 → 12.0.0-staging.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/cjs/hero-banner/common/classes.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";var core=require("@gem-sdk/core"),helpers=require("./helpers.js");function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}const getClasses=({setting:e,builderProps:s,advancedCssClass:t})=>{let o="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 t&&(o+=` ${t}`),{...s?.uid&&{[s.uid]:!0},...composeClasses(o),...helpers.getClassAlignBanner(helpers.getResponsiveSetting(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"),...helpers.getClassContentPosition(helpers.getContentPosition(e?.layout,s?.contentPosition1Col,s?.contentPosition2Col)\|\|{})}),enableTransitionHover=e=>{let{overlayColor:s}=e??{},t=s?.hover\|\|s?.normal;return t&&"transparent"!==t&&"0%"!=helpers.getOpacityHover(e)},getOverlayClasses=e=>{let{overlayColor:s,hoverEffect:t}=e??{},{disableOpacity:o}=helpers.opacityEnabledData(e),a="gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)]";return enableTransitionHover(e)&&(a+=" gp-transition-all gp-duration-300"),t&&(a+=" group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]"),core.getGlobalColorStateClass("bg",s,o,!t)&&(a+=` ${core.getGlobalColorStateClass("bg",s,o,!t)}`),composeClasses(a)},getRowClasses=(e,s)=>{let{sizeSetting:t,background:o}=e??{},{verticalAlign:a}=s??{},l=helpers.getClassForContentByFitContent(t,o),r=helpers.getClassForStretchContent(a),g=helpers.getClassSpaceBetween(s?.layout\|\|{},e?.contentPosition1Col\|\|{}),p=helpers.getClassSpaceBetweenLeftRight(s?.layout\|\|{}),n=`gp-hero-banner-row ${l} ${r}`;return{...composeClasses(n),...g,...p}},getAdaptiveClasses=()=>composeClasses("adaptive-hero-banner"),getAdaptivePictureClasses=()=>composeClasses("gp-w-full gp-invisible -gp-z-1"),getBackgroundClasses=(e,s)=>{let t="hero-banner-bg gp-hero-banner-image-background hero-banner-bg-parallax";return s&&(t+=" gp_lazybg"),e&&(t+=" gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)] gp-transition-transform"),composeClasses(t)},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=()=>~~composeClasses(~~"gp-h-full gp-w-full !gp-max-w-none gp-pointer-events-none"),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)};exports.enableTransitionHover=enableTransitionHover,exports.getAdaptiveClasses=getAdaptiveClasses,exports.getAdaptivePictureClasses=getAdaptivePictureClasses,exports.getBackgroundClasses=getBackgroundClasses,exports.getClasses=getClasses,exports.getContainBackgroundClasses=getContainBackgroundClasses,exports.getContainerClasses=getContainerClasses,exports.getHtml5VideoClasses=getHtml5VideoClasses,exports.getIframeYoutubeClasses=getIframeYoutubeClasses,exports.getLazyBackgroundClasses=getLazyBackgroundClasses,exports.getLinkClasses=getLinkClasses,exports.getOverlayClasses=getOverlayClasses,exports.getRowClasses=getRowClasses,exports.getWrapperYoutubeClasses=getWrapperYoutubeClasses;
1	+ "use strict";var core=require("@gem-sdk/core"),helpers=require("./helpers.js");function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}const getClasses=({setting:e,builderProps:s,advancedCssClass:t})=>{let o="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 t&&(o+=` ${t}`),{...s?.uid&&{[s.uid]:!0},...composeClasses(o),...helpers.getClassAlignBanner(helpers.getResponsiveSetting(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"),...helpers.getClassContentPosition(helpers.getContentPosition(e?.layout,s?.contentPosition1Col,s?.contentPosition2Col)\|\|{})}),enableTransitionHover=e=>{let{overlayColor:s}=e??{},t=s?.hover\|\|s?.normal;return t&&"transparent"!==t&&"0%"!=helpers.getOpacityHover(e)},getOverlayClasses=e=>{let{overlayColor:s,hoverEffect:t}=e??{},{disableOpacity:o}=helpers.opacityEnabledData(e),a="gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)]";return enableTransitionHover(e)&&(a+=" gp-transition-all gp-duration-300"),t&&(a+=" group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]"),core.getGlobalColorStateClass("bg",s,o,!t)&&(a+=` ${core.getGlobalColorStateClass("bg",s,o,!t)}`),composeClasses(a)},getRowClasses=(e,s)=>{let{sizeSetting:t,background:o}=e??{},{verticalAlign:a}=s??{},l=helpers.getClassForContentByFitContent(t,o),r=helpers.getClassForStretchContent(a),g=helpers.getClassSpaceBetween(s?.layout\|\|{},e?.contentPosition1Col\|\|{}),p=helpers.getClassSpaceBetweenLeftRight(s?.layout\|\|{}),n=`gp-hero-banner-row ${l} ${r}`;return{...composeClasses(n),...g,...p}},getAdaptiveClasses=()=>composeClasses("adaptive-hero-banner"),getAdaptivePictureClasses=()=>composeClasses("gp-w-full gp-invisible -gp-z-1"),getBackgroundClasses=(e,s)=>{let t="hero-banner-bg gp-hero-banner-image-background hero-banner-bg-parallax";return s&&(t+=" gp_lazybg"),e&&(t+=" gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)] gp-transition-transform"),composeClasses(t)},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)};exports.enableTransitionHover=enableTransitionHover,exports.getAdaptiveClasses=getAdaptiveClasses,exports.getAdaptivePictureClasses=getAdaptivePictureClasses,exports.getBackgroundClasses=getBackgroundClasses,exports.getClasses=getClasses,exports.getContainBackgroundClasses=getContainBackgroundClasses,exports.getContainerClasses=getContainerClasses,exports.getHtml5VideoClasses=getHtml5VideoClasses,exports.getIframeYoutubeClasses=getIframeYoutubeClasses,exports.getLazyBackgroundClasses=getLazyBackgroundClasses,exports.getLinkClasses=getLinkClasses,exports.getOverlayClasses=getOverlayClasses,exports.getRowClasses=getRowClasses,exports.getWrapperYoutubeClasses=getWrapperYoutubeClasses;

package/dist/cjs/hero-banner/common/const.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";const DEFAULT_CLIP_PATH="inset(0px)";exports.DEFAULT_CLIP_PATH="inset(0px)";
1	+ "use strict";const DEFAULT_CLIP_PATH="inset(0px)",VIDEO_IFRAME_SCALE="1.04";exports.DEFAULT_CLIP_PATH="inset(0px)",exports.VIDEO_IFRAME_SCALE="1.04";

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

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

package/dist/cjs/hero-banner/common/styles.js CHANGED Viewed

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

package/dist/cjs/hero-banner/components/HeroBanner.liquid.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var HeroBannerItem_liquid=require("./HeroBannerItem.liquid.js"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),system=require("@gem-sdk/system"),core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),helpers$1=require("../common/helpers.js");const HeroBanner=e=>{let{builderAttrs:t,builderProps:s,setting:r,styles:a,style:l,children:n,advanced:i,pageContext:o}=e,{enableLazyLoadImage:c}=o??{},{enableLink:d}=r??{},p=helpers$1.getBannerLink(r),{cssClass:g}=i??{},{urlData:u}=helpers.getInsertLinkData("",p),m=system.createStateOrContext({background:helpers$1.getResponsiveSetting(a?.background||{}),uid:s?.uid,enableParallax:Number(r?.speedParallax||0)>0,speedParallax:Number(r?.speedParallax)||0,hoverEffect:a?.hoverEffect,hoverEffectScale:a?.hoverEffectScale,layout:r?.layout,contentPosition1Col:a?.contentPosition1Col,contentPosition2Col:a?.contentPosition2Col,aspectRatio:r?.aspectRatio,sizeSetting:helpers$1.getResponsiveSetting(a?.sizeSetting||{}),videoObjectFit:helpers$1.getResponsiveSetting(a?.videoObjectFit||{}),target:p?.target??"_self",href:u?.href??"",linkType:p?.type??"",hoverEffectDuration:a?.hoverEffectDuration}),f=!!p?.link&&d,h=system.createAttr({...attrs.getAttr({uid:s?.uid||""})}),y=system.createAttr(attrs.getAttrLink()),v=system.createStyle({...styles.getStyle(a,r,l)}),$=system.createClass({...classes.getClasses({setting:r,builderProps:s,advancedCssClass:g})}),S=system.createClass({...classes.getLinkClasses()}),b=()=>HeroBannerItem_liquid.default({setting:r,styles:a,children:n,enableLazyLoadImage:c,rawChildren:e.rawChildren,builderProps:s});return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var HeroBannerItem_liquid=require("./HeroBannerItem.liquid.js"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),system=require("@gem-sdk/system"),core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),helpers$1=require("../common/helpers.js");const HeroBanner=e=>{let{builderAttrs:t,builderProps:s,setting:r,styles:a,style:i,children:o,advanced:l,pageContext:n}=e,{enableLazyLoadImage:c}=n??{},{enableLink:d}=r??{},p=helpers$1.getBannerLink(r),{cssClass:g}=l??{},{urlData:u}=helpers.getInsertLinkData("",p),m=system.createStateOrContext({background:helpers$1.getResponsiveSetting(a?.background||{}),uid:s?.uid,enableParallax:Number(r?.speedParallax||0)>0,speedParallax:Number(r?.speedParallax)||0,hoverEffect:a?.hoverEffect,hoverEffectScale:a?.hoverEffectScale,layout:r?.layout,contentPosition1Col:a?.contentPosition1Col,contentPosition2Col:a?.contentPosition2Col,aspectRatio:r?.aspectRatio,sizeSetting:helpers$1.getResponsiveSetting(a?.sizeSetting||{}),videoObjectFit:helpers$1.getResponsiveSetting(a?.videoObjectFit||{}),target:p?.target??"_self",href:u?.href??"",linkType:p?.type??"",hoverEffectDuration:a?.hoverEffectDuration,isYoutubeVideoMigrated:r?.isYoutubeVideoMigrated}),f=!!p?.link&&d,h=system.createAttr({...attrs.getAttr({uid:s?.uid||""})}),y=system.createAttr(attrs.getAttrLink()),v=system.createStyle({...styles.getStyle(a,r,i)}),$=system.createClass({...classes.getClasses({setting:r,builderProps:s,advancedCssClass:g})}),S=system.createClass({...classes.getLinkClasses()}),b=()=>HeroBannerItem_liquid.default({setting:r,styles:a,children:o,enableLazyLoadImage:c,rawChildren:e.rawChildren,builderProps:s});return core.template`
       <gp-hero-banner
         ${{...t}}
         ${{...h}}

package/dist/cjs/hero-banner/components/HeroBannerItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),Row=require("../../grid/components/row/Row.js"),system=require("@gem-sdk/system"),AdaptiveImage=require("../../image/components/AdaptiveImage.js"),HTML5Embed=require("../../video/components/HTML5Embed.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),LiteYouTubeEmbed=require("../../video/components/LiteYouTubeEmbed.js"),helpers$1=require("../../video/common/helpers.js"),useHeroBannerItem=require("../hooks/useHeroBannerItem.js"),classes$1=require("../../video/common/classes.js");const HeroBannerItem=e=>{core.useEditorMode();let{setting:s,styles:t,children:l,elementRef:a,transform:r,dataVideo:o,bgRef:i,isShowVideoHtml5:m,layoutResponsive:c,heroBannerWrapperRef:n}=e,{layout:u,verticalAlign:y,enableParallax:d,alt:p,title:g}=s??{},{background:v,overlayColor:C,verticalGutter:j,sizeSetting:h,contentWidth:b,hoverEffect:f,contentPosition1Col:x,contentPosition2Col:R,videoObjectFit:S}=t??{},I=system.createStyle({...styles.getContainerStyle(t)}),B=system.createClass({...classes.getContainerClasses(s,t)}),H=system.createStyle({...styles.getOverlayStyle(t)}),T=system.createClass({...classes.getOverlayClasses(t)}),q=system.createStyle({...styles.getRowStyle(t)}),k=system.createClass({...classes.getRowClasses(t,s)}),w=system.createStyle({...styles.getAdaptiveStyle(t)}),A=system.createClass({...classes.getAdaptivePictureClasses()}),L=system.createClass({...classes.getAdaptiveClasses()}),N=system.createClass({...classes.getBackgroundClasses(f,!1)}),E=system.createStyle({...helpers.getBackgroundImageHeroBanner(v,!1,!0),...styles.getBackgroundStyle(t,d,r)}),Y=system.createClass({...classes.getContainBackgroundClasses()}),V=system.createStyle({...styles.getContainBackgroundStyle(t)}),$=system.createClass({...classes.getHtml5VideoClasses(!m)}),{youtubeIframeWrapperRef:z,resolvedAspectRatio:M,youtubeAspectRatio:O}=useHeroBannerItem.default({videoType:o?.videoType,sizeSetting:h,background:v,videoObjectFit:S,heroBannerWrapperRef:n}),P=system.createStyle({...styles.getYoutubeIframeStyle(O,S)}),W=system.createStyle({...styles.getHtml5VideoStyle(M,S)}),_=system.createClass({...classes.getWrapperYoutubeClasses()}),G=system.createClass({...classes.getIframeYoutubeClasses()}),D=system.createClass({...classes$1.getYoutubeContentClasses()}),F=React.useMemo(()=>{if(!helpers.showVideoType(v))return;if(o?.videoType==="html5"&&!o.videoHtml5||o?.videoType==="youtube"&&!o.video)return null;if(o?.type==="video"&&o?.videoType==="html5"&&o?.videoHtml5)return jsxRuntime.jsx(HTML5Embed.default,{muted:!0,loop:o?.loop,controls:!1,autoplay:!0,src:o?.videoHtml5||"",title:"Video",style:W,className:$});let e=o?.video??"",s=helpers$1.getYoutubeVideoId(e),t=o?.loop?1:0,l=`&loop=${t}&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(o?.type==="video"&&o?.videoType==="youtube"&&s&&helpers$1.youtubeVideoRegex.test(e))return jsxRuntime.jsx("div",{className:D,ref:z,children:jsxRuntime.jsx(LiteYouTubeEmbed.default,{id:s,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:l,adNetwork:!1,noCookie:!0,muted:!0,lazy:o?.lazyLoad??!0,style:P,wrapperClass:_,iframeClass:G})})},[o,v,$,G,_,P,W,z]);return jsxRuntime.jsxs("div",{className:B,style:I,children:[jsxRuntime.jsxs("div",{ref:a,className:Y,style:V,children:[jsxRuntime.jsx("div",{ref:i,className:N,style:E,children:F}),!!C&&jsxRuntime.jsx("div",{"aria-label":"Overlay",className:T,style:H})]}),jsxRuntime.jsx(Row.default,{className:k,style:q,setting:{layout:u,horizontalAlign:helpers.horizontalAlign(u,x,R),verticalAlign:y},styles:{verticalGutter:j,width:helpers.getWidth(b),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},hiddenEmptyCol:c?.cols?.length===1,onBlur:e=>helpers.scrollToContentBanner(e),children:core.filterToolbarPreview(l)}),jsxRuntime.jsx(AdaptiveImage.default,{pictureClass:A,srcSet:helpers.getBgImage(v),className:L,aspectRatio:core.getAspectRatioGlobalSize(h),style:w,alt:p,title:g,enableLazyLoadImage:!1,fallbackImg:helpers.fallbackImg})]})};exports.default=HeroBannerItem;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),Row=require("../../grid/components/row/Row.js"),system=require("@gem-sdk/system"),AdaptiveImage=require("../../image/components/AdaptiveImage.js"),HTML5Embed=require("../../video/components/HTML5Embed.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),LiteYouTubeEmbed=require("../../video/components/LiteYouTubeEmbed.js"),helpers$1=require("../../video/common/helpers.js"),useHeroBannerItem=require("../hooks/useHeroBannerItem.js"),classes$1=require("../../video/common/classes.js");const HeroBannerItem=e=>{core.useEditorMode();let{setting:s,styles:t,children:l,elementRef:a,transform:r,dataVideo:o,bgRef:i,isShowVideoHtml5:m,layoutResponsive:u,heroBannerWrapperRef:c}=e,{layout:n,verticalAlign:d,enableParallax:y,alt:p,title:g}=s??{},{background:v,overlayColor:C,verticalGutter:j,sizeSetting:b,contentWidth:h,hoverEffect:f,contentPosition1Col:x,contentPosition2Col:R,videoObjectFit:S}=t??{},I=system.createStyle({...styles.getContainerStyle(t)}),B=system.createClass({...classes.getContainerClasses(s,t)}),H=system.createStyle({...styles.getOverlayStyle(t)}),T=system.createClass({...classes.getOverlayClasses(t)}),q=system.createStyle({...styles.getRowStyle(t)}),k=system.createClass({...classes.getRowClasses(t,s)}),w=system.createStyle({...styles.getAdaptiveStyle(t)}),Y=system.createClass({...classes.getAdaptivePictureClasses()}),V=system.createClass({...classes.getAdaptiveClasses()}),A=system.createClass({...classes.getBackgroundClasses(f,!1)}),L=system.createStyle({...helpers.getBackgroundImageHeroBanner(v,!1,!0),...styles.getBackgroundStyle(t,y,r)}),M=system.createClass({...classes.getContainBackgroundClasses()}),N=system.createStyle({...styles.getContainBackgroundStyle(t)}),E=system.createClass({...classes.getHtml5VideoClasses(!m)}),{youtubeIframeWrapperRef:$,resolvedAspectRatio:z,youtubeAspectRatio:O}=useHeroBannerItem.default({videoType:o?.videoType,sizeSetting:b,background:v,videoObjectFit:S,heroBannerWrapperRef:c,isYoutubeVideoMigrated:s?.isYoutubeVideoMigrated}),P=system.createStyle({...styles.getYoutubeIframeStyle(O,S)}),W=system.createStyle({...styles.getHtml5VideoStyle(z,S,v)}),_=system.createClass({...classes.getWrapperYoutubeClasses(s?.isYoutubeVideoMigrated)}),G=system.createClass({...classes.getIframeYoutubeClasses()}),D=system.createClass({...classes$1.getYoutubeContentClasses()}),F=React.useMemo(()=>{if(!helpers.showVideoType(v))return;if(o?.videoType==="html5"&&!o.videoHtml5||o?.videoType==="youtube"&&!o.video)return null;if(o?.type==="video"&&o?.videoType==="html5"&&o?.videoHtml5)return jsxRuntime.jsx(HTML5Embed.default,{muted:!0,loop:o?.loop,controls:!1,autoplay:!0,src:o?.videoHtml5||"",title:"Video",style:W,className:E});let e=o?.video??"",s=helpers$1.getYoutubeVideoId(e),t=o?.loop?1:0,l=`&loop=${t}&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(o?.type==="video"&&o?.videoType==="youtube"&&s&&helpers$1.youtubeVideoRegex.test(e))return jsxRuntime.jsx("div",{className:D,ref:$,children:jsxRuntime.jsx(LiteYouTubeEmbed.default,{id:s,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:l,adNetwork:!1,noCookie:!0,muted:!0,lazy:o?.lazyLoad??!0,style:P,wrapperClass:_,iframeClass:G})})},[o,v,E,G,_,P,W,$]);return jsxRuntime.jsxs("div",{className:B,style:I,children:[jsxRuntime.jsxs("div",{ref:a,className:M,style:N,children:[jsxRuntime.jsx("div",{ref:i,className:A,style:L,children:F}),!!C&&jsxRuntime.jsx("div",{"aria-label":"Overlay",className:T,style:H})]}),jsxRuntime.jsx(Row.default,{className:k,style:q,setting:{layout:n,horizontalAlign:helpers.horizontalAlign(n,x,R),verticalAlign:d},styles:{verticalGutter:j,width:helpers.getWidth(h),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},hiddenEmptyCol:u?.cols?.length===1,onBlur:e=>helpers.scrollToContentBanner(e),children:core.filterToolbarPreview(l)}),jsxRuntime.jsx(AdaptiveImage.default,{pictureClass:Y,srcSet:helpers.getBgImage(v),className:V,aspectRatio:core.getAspectRatioGlobalSize(b),style:w,alt:p,title:g,enableLazyLoadImage:!1,fallbackImg:helpers.fallbackImg})]})};exports.default=HeroBannerItem;

package/dist/cjs/hero-banner/components/HeroBannerItem.liquid.js CHANGED Viewed

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Row_liquid=require("../../grid/components/row/Row.liquid.js"),system=require("@gem-sdk/system"),AdaptiveImage_liquid=require("../../image/components/AdaptiveImage.liquid.js"),HTML5Embed_liquid=require("../../video/components/HTML5Embed.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),helpers$1=require("../../image/common/helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),LiteYouTubeEmbed_liquid=require("../../video/components/LiteYouTubeEmbed.liquid.js"),helpers$3=require("../../video/common/helpers.js"),helpers$2=require("../../grid/components/row/common/helpers.js"),constants=require("../../image/constants.js");const HeroBannerItem=e=>{let{enableLazyLoadImage:s=!0,setting:t,styles:l,children:a,builderProps:r,rawChildren:i}=e,{layout:o,verticalAlign:c,enableParallax:m,alt:d,title:u,preload:y}=t??{},{background:n,overlayColor:p,verticalGutter:g,sizeSetting:C,contentWidth:h,hoverEffect:q,contentPosition1Col:v,contentPosition2Col:b,videoObjectFit:S}=l??{},I=!y&&s,f=helpers.getAspectRatio(C,n),$=helpers.getYoutubeAspectRatio(n,S,f),R=helpers.getResponsiveSetting(n||{}),j=R.desktop,B=system.createStyle({...styles.getContainerStyle(l)}),k=system.createClass({...classes.getContainerClasses(t,l)}),A=system.createStyle({...styles.getOverlayStyle(l)}),_=system.createClass({...classes.getOverlayClasses(l)}),w=system.createStyle({...styles.getRowStyle(l)}),H=system.createClass({...classes.getRowClasses(l,t)}),T=system.createStyle({...styles.getAdaptiveStyle(l)}),V=system.createClass({...classes.getAdaptivePictureClasses()}),E=system.createClass({...classes.getAdaptiveClasses()}),L=system.createClass({...classes.getBackgroundClasses(q,I)}),Y=system.createStyle({...helpers.getBackgroundImageHeroBanner(n,I,!1),...styles.getBackgroundStyle(l,m,"")}),N=system.createClass({...classes.getContainBackgroundClasses()}),x=system.createStyle({...styles.getContainBackgroundStyle(l)}),z=system.createClass({...classes.getHtml5VideoClasses(!1)}),O=system.createStyle({...styles.getYoutubeIframeStyle($,S)}),D=system.createClass({...classes.getWrapperYoutubeClasses()}),M=system.createStyle({...styles.getHtml5VideoStyle(f,S)}),P=system.createClass({...classes.getIframeYoutubeClasses()}),W=e=>system.createClass({...classes.getLazyBackgroundClasses(e)}),G=()=>{if(!y)return core.DEVICES.map(e=>system.If(helpers.getEnableBgImageByDevice(e,n),NextImage_liquid.default({src:helpers$1.getImageSrc(core.getResponsiveValueByScreen(helpers.getBgImage(n),e),e),alt:d,title:u,className:W(e),isDisableAspectStyle:!0,enableLazyLoadImage:s}))).join("")},F=()=>{if(!helpers.showVideoType(n))return;if(helpers$2.isRenderHtmlVideo(n))return HTML5Embed_liquid.default({uid:r?.uid,muted:!0,loop:j?.loop,controls:!1,autoplay:!0,src:j?.videoHtml5||"",title:"Video",style:M,className:z});let e=j?.video??"",s=helpers$3.getYoutubeVideoId(e),t=`&loop=false&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(j?.type==="video"&&j?.videoType==="youtube"&&s&&helpers$3.youtubeVideoRegex.test(e))return LiteYouTubeEmbed_liquid.default({uid:r?.uid,id:s,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:t,adNetwork:!1,noCookie:!0,muted:!0,lazy:j?.lazyLoad??!0,preload:!0,style:O,wrapperClass:D,iframeClass:P})};return core.template`
-  <div class="${k}" style="${B}">
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Row_liquid=require("../../grid/components/row/Row.liquid.js"),system=require("@gem-sdk/system"),AdaptiveImage_liquid=require("../../image/components/AdaptiveImage.liquid.js"),HTML5Embed_liquid=require("../../video/components/HTML5Embed.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),helpers$1=require("../../image/common/helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),LiteYouTubeEmbed_liquid=require("../../video/components/LiteYouTubeEmbed.liquid.js"),helpers$3=require("../../video/common/helpers.js"),helpers$2=require("../../grid/components/row/common/helpers.js"),constants=require("../../image/constants.js");const HeroBannerItem=e=>{let{enableLazyLoadImage:s=!0,setting:t,styles:l,children:a,builderProps:r,rawChildren:i}=e,{layout:o,verticalAlign:c,enableParallax:m,alt:d,title:u,preload:y,isYoutubeVideoMigrated:n}=t??{},{background:p,overlayColor:g,verticalGutter:C,sizeSetting:h,contentWidth:q,hoverEffect:v,contentPosition1Col:b,contentPosition2Col:S,videoObjectFit:I}=l??{},f=!y&&s,$=helpers.getAspectRatio(h,p),R=helpers.getYoutubeAspectRatio(p,I,$),j=helpers.getResponsiveSetting(p||{}),B=j.desktop,k=system.createStyle({...styles.getContainerStyle(l)}),A=system.createClass({...classes.getContainerClasses(t,l)}),_=system.createStyle({...styles.getOverlayStyle(l)}),w=system.createClass({...classes.getOverlayClasses(l)}),H=system.createStyle({...styles.getRowStyle(l)}),T=system.createClass({...classes.getRowClasses(l,t)}),V=system.createStyle({...styles.getAdaptiveStyle(l)}),E=system.createClass({...classes.getAdaptivePictureClasses()}),L=system.createClass({...classes.getAdaptiveClasses()}),Y=system.createClass({...classes.getBackgroundClasses(v,f)}),N=system.createStyle({...helpers.getBackgroundImageHeroBanner(p,f,!1),...styles.getBackgroundStyle(l,m,"")}),x=system.createClass({...classes.getContainBackgroundClasses()}),z=system.createStyle({...styles.getContainBackgroundStyle(l)}),O=system.createClass({...classes.getHtml5VideoClasses(!1)}),D=system.createStyle({...styles.getYoutubeIframeStyle(R,I)}),M=system.createClass({...classes.getWrapperYoutubeClasses(n)}),P=system.createStyle({...styles.getHtml5VideoStyle($,I,p)}),W=system.createClass({...classes.getIframeYoutubeClasses()}),G=e=>system.createClass({...classes.getLazyBackgroundClasses(e)}),F=()=>{if(!y)return core.DEVICES.map(e=>system.If(helpers.getEnableBgImageByDevice(e,p),NextImage_liquid.default({src:helpers$1.getImageSrc(core.getResponsiveValueByScreen(helpers.getBgImage(p),e),e),alt:d,title:u,className:G(e),isDisableAspectStyle:!0,enableLazyLoadImage:s}))).join("")},J=()=>{if(!helpers.showVideoType(p))return;if(helpers$2.isRenderHtmlVideo(p))return HTML5Embed_liquid.default({uid:r?.uid,muted:!0,loop:B?.loop,controls:!1,autoplay:!0,src:B?.videoHtml5||"",title:"Video",style:P,className:O});let e=B?.video??"",s=helpers$3.getYoutubeVideoId(e),t=`&loop=false&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(B?.type==="video"&&B?.videoType==="youtube"&&s&&helpers$3.youtubeVideoRegex.test(e))return LiteYouTubeEmbed_liquid.default({uid:r?.uid,id:s,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:t,adNetwork:!1,noCookie:!0,muted:!0,lazy:B?.lazyLoad??!0,preload:!0,style:D,wrapperClass:M,iframeClass:W})};return core.template`
+  <div class="${A}" style="${k}">
       <div
-        class="${N}"
-        style="${x}"
+        class="${x}"
+        style="${z}"
       >
-        <div class="${L}" style="${Y}">
-          ${G()}
+        <div class="${Y}" style="${N}">
           ${F()}
+          ${J()}
         </div>
-        ${system.If(!!p,core.template`<div aria-label="Overlay" class="${_}" style="${A}"> </div>`)}
+        ${system.If(!!g,core.template`<div aria-label="Overlay" class="${w}" style="${_}"> </div>`)}
       </div>
-      ${Row_liquid.default({className:H,style:w,setting:{layout:o,horizontalAlign:helpers.horizontalAlign(o,v,b),verticalAlign:c},styles:{verticalGutter:g,width:helpers.getWidth(h),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:a,rawChildren:i})}
-        ${AdaptiveImage_liquid.default({pictureClass:V,srcSet:helpers.getBgImage(n),className:E,...y&&constants.PRIORITY_LOAD_ATTRS,aspectRatio:core.getAspectRatioGlobalSize(C),style:T,alt:d,title:u,enableLazyLoadImage:s,fallbackImg:helpers.fallbackImg})}
+      ${Row_liquid.default({className:T,style:H,setting:{layout:o,horizontalAlign:helpers.horizontalAlign(o,b,S),verticalAlign:c},styles:{verticalGutter:C,width:helpers.getWidth(q),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:a,rawChildren:i})}
+        ${AdaptiveImage_liquid.default({pictureClass:E,srcSet:helpers.getBgImage(p),className:L,...y&&constants.PRIORITY_LOAD_ATTRS,aspectRatio:core.getAspectRatioGlobalSize(h),style:V,alt:d,title:u,enableLazyLoadImage:s,fallbackImg:helpers.fallbackImg})}
   </div>
 `};exports.default=HeroBannerItem;

package/dist/cjs/hero-banner/hooks/useHeroBannerItem.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),core=require("@gem-sdk/core"),helpers=require("../common/helpers.js");const useHeroBannerItem=({videoType:e,sizeSetting:r,background:t,videoObjectFit:i,heroBannerWrapperRef:o})=>{let s=core.useCurrentDevice(),a=React.useRef(null),u=React.useMemo(()=>helpers.getAspectRatio(r,t),[r,t]),n=React.useMemo(()=>helpers.getYoutubeAspectRatio(t,i,u),[t,i,u]),l=helpers.getResponsiveSetting(i\|\|{}),c=core.getResponsiveValueByScreen(l,s);return React.useEffect(()=>{let r=a.current,i=o?.current,u=()=>r?.querySelector("iframe"),n=e=>{let o=e\|\|r;if(!o)return;let a=o.querySelector("iframe");helpers.updateVideoIframeSize({iframeEl:a~~\|\|u~~(),containerRatio:helpers.getContainerRatio(i),videoObjectFit:c\|\|"cover",background:t,currentDevice:s})},l=e=>{let r=e.detail?.iframe;if(r){let e=r.closest("article"),t=e?.parentElement;setTimeout(()=>{n(t)},50)}};if(i&&i.addEventListener("youtube-iframe-ready",l),!r)return()=>{i&&i.removeEventListener("youtube-iframe-ready",l)};if("youtube"!==e){let e=u();return e&&helpers.resetVideoIframeStyle(e),helpers.resetVideoWrapperStyle(r),()=>{i&&i.removeEventListener("youtube-iframe-ready",l)}}helpers.setVideoWrapperStyle(r),u()&&(window.requestAnimationFrame(()=>n()),setTimeout(()=>{n()},100));let m=window.ResizeObserver;if(!m)return()=>{i&&i.removeEventListener("youtube-iframe-ready",l)};let p=new m(()=>n());return i&&p.observe(i),()=>{if(p.disconnect(),i&&i.removeEventListener("youtube-iframe-ready",l),r){let e=u();e&&helpers.resetVideoIframeStyle(e),helpers.resetVideoWrapperStyle(r)}}},[e,c,s,u]),{youtubeIframeWrapperRef:a,resolvedAspectRatio:u,youtubeAspectRatio:n}};exports.default=useHeroBannerItem;
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),core=require("@gem-sdk/core"),helpers=require("../common/helpers.js");const useHeroBannerItem=({videoType:e,sizeSetting:r,background:t,videoObjectFit:i,heroBannerWrapperRef:o,isYoutubeVideoMigrated:s})=>{let u=core.useCurrentDevice(),n=React.useRef(null),a=React.useMemo(()=>helpers.getAspectRatio(r,t),[r,t]),l=React.useMemo(()=>helpers.getYoutubeAspectRatio(t,i,a),[t,i,a]),c=helpers.getResponsiveSetting(i\|\|{}),p=core.getResponsiveValueByScreen(c,u),f=core.getResponsiveValueByScreen(t,u),m=f?.loop;return React.useEffect(()=>{if("youtube"!==e)return;let r=n.current;if(!r)return;let i=()=>r?.querySelector("iframe"),o=i();if(!o)return;let s=core.getResponsiveValueByScreen(t,u),a=s?.videoAlign;helpers.setVideoIframeAlign(o,a)},[t,u,e]),React.useEffect(()=>{let r=n.current,i=o?.current,a=()=>r?.querySelector("iframe"),l=e=>{let o=e\|\|r;if(!o)return;let n=o.querySelector("iframe");helpers.updateVideoIframeSize({iframeEl:n\|\|a(),containerRatio:helpers.getContainerRatio(i),videoObjectFit:p\|\|"cover",background:t,currentDevice:u,isYoutubeVideoMigrated:s})},c=e=>{let r=e.detail?.iframe;if(r){let e=r.closest("article"),t=e?.parentElement;setTimeout(()=>{l(t)},50)}};if(i&&i.addEventListener("youtube-iframe-ready",c),!r)return()=>{i&&i.removeEventListener("youtube-iframe-ready",c)};if("youtube"!==e){let e=a();return e&&helpers.resetVideoIframeStyle(e),helpers.resetVideoWrapperStyle(r),()=>{i&&i.removeEventListener("youtube-iframe-ready",c)}}helpers.setVideoWrapperStyle(r),a()&&(window.requestAnimationFrame(()=>l()),setTimeout(()=>{l()},100));let f=window.ResizeObserver;if(!f)return()=>{i&&i.removeEventListener("youtube-iframe-ready",c)};let m=new f(()=>l());return i&&m.observe(i),()=>{if(m.disconnect(),i&&i.removeEventListener("youtube-iframe-ready",c),r){let e=a();e&&helpers.resetVideoIframeStyle(e),helpers.resetVideoWrapperStyle(r)}}},[e,p,u,a,m]),{youtubeIframeWrapperRef:n,resolvedAspectRatio:a,youtubeAspectRatio:l}};exports.default=useHeroBannerItem;

package/dist/cjs/hero-banner/settings/configs/presets/banner-video.js CHANGED Viewed

@@ -12,4 +12,4 @@
     </clipPath>
     </defs>
     </svg>
-    `},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=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"}}}]}]}]};exports.heroBannerVideo=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"}}}]}]}]};exports.heroBannerVideo=heroBannerVideo;

package/dist/cjs/hero-banner/settings/configs/settings.js CHANGED Viewed

@@ -143,4 +143,4 @@
                 d="M4.39584 15.625C3.36031 15.625 2.52084 14.7855 2.52084 13.75V12.5C2.52084 11.4645 3.36031 10.625 4.39584 10.625H14.3958C15.4314 10.625 16.2708 11.4645 16.2708 12.5V13.75C16.2708 14.7855 15.4314 15.625 14.3958 15.625H4.39584ZM3.77084 13.75C3.77084 14.0952 4.05066 14.375 4.39584 14.375H14.3958C14.741 14.375 15.0208 14.0952 15.0208 13.75V12.5C15.0208 12.1548 14.741 11.875 14.3958 11.875H4.39584C4.05066 11.875 3.77084 12.1548 3.77084 12.5V13.75Z"
                 fill="currentColor"
               />
-            </svg> `,tooltip:"Align right"}],devices:{desktop:{default:"center"}}},{id:"seo",type:"group",label:"SEO",controls:[{id:"alt",label:"Alt Text",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: Classic white crewneck t-shirt with minimalist design",default:void 0},{id:"title",label:"Image title",info:"Show title when hover to image",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: White t-shirt",default:void 0}]},{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Cover",value:"cover"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"},mobile:{default:"auto"}}},{id:"contentBanner",type:"banner",message:"The background image should be taller than the Hero Banner",closable:!0}]},{id:"style",controls:[{id:"sizeSetting",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",widthHeightLinked:!1,width:"100%",shapeVideo:"16/9",enableVideoShape:!1}},mobile:{default:{shape:"custom",width:"100%",shapeVideo:"custom",enableVideoShape:!1}}},settingConfig:{width:{displayOptions:["full","default"],name:"Width"},height:{displayOptions:["fit-content","fit-screen"],name:"Height"},shape:{displayOptions:["original","custom"],displayVideoOptions:["1/1","3/2","4/3","16/9","21/9","2/3","3/4","9/16","custom"],name:"Frame",shapeTitleConfig:{original:"As banner source"}}},hiddenSettings:["padding","gap"]},{id:"videoObjectFit",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill video",value:"cover",type:"image",svgName:"gp-video-cover"},{label:"Fit video",value:"contain",type:"image",svgName:"gp-video-contain"}],devices:{desktop:{default:"cover"}}},{id:"background",type:"background-media",ignoreReRender:!0,showVideo:!0,showRatioVideo:!0,showDeviceControl:!0,devices:{desktop:{default:{type:"image",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"",videoHtml5:"",videoType:"youtube",loop:!0,lazyLoad:!1}}},compoDefaultValue:{desktop:{default:{type:"image",color:"bg-2",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"https://youtu.be/KOxfzBp72uk",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4",videoType:"youtube",loop:!0,lazyLoad:!1}}}},{id:"hoverEffect",type:"toggle",default:!1},{id:"hoverEffectScale",type:"input:slider",label:"Zoom Value",units:["%"],min:100,max:200,step:5,default:"120%",showDefaultUnit:!0},{id:"hoverEffectDuration",label:"Zoom Time",type:"input:unit",units:["s"],min:0,default:.5,inputType:"number",placeholder:"",disableAutoValue:!0,showDefaultUnit:!0},{id:"height",label:"Height",type:"input:unit",units:["px"],placeholder:"Auto",devices:{desktop:{default:void 0}},info:"Full Width: To set Hero Banner full width, first you drag & drop a Section element from left sidebar, then make it full-width, after that you put your Hero Banner inside Section you have created."},{id:"contentPosition1Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"contentPosition2Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"wrapperWidth",type:"input:unit-width",label:"Width",placeholder:"Auto",min:0,units:["px","%"],devices:{desktop:{default:void 0},tablet:{default:void 0},mobile:{default:void 0}}},{id:"contentWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,devices:{desktop:{default:"default"},tablet:{default:"default"},mobile:{default:"default"}},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"default",showValue:!0}]},{id:"verticalGutter",type:"input:unit",units:["px"],min:0,label:"Spacing",devices:{desktop:{default:"32px"}}},{id:"overlayEnable",type:"toggle",default:!1},{id:"overlayOpacity",label:"Opacity",type:"input:slider",min:0,max:100,units:["%"],step:1,default:{normal:"20%"},state:{normal:!0,hover:!0},compoDefaultValue:{normal:"20%",hover:"20%"},showDefaultUnit:!0},{id:"overlayColor",label:"Color",type:"color-picker-v2",state:{normal:!0,hover:!0}},{id:"borderBg",type:"border-v2",label:"Border",compoDefaultValue:{border:"solid",color:"line-3",width:"1px",borderWidth:"1px"}},{id:"cornerBg",type:"corner-v2",label:"Corner",default:{radiusType:"none"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadowBg",type:"shadow-v2",label:"Button Shadow",compoDefaultValue:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}},{id:"contentPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}}}]}];exports.SettingsV2=SettingsV2;
+            </svg> `,tooltip:"Align right"}],devices:{desktop:{default:"center"}}},{id:"seo",type:"group",label:"SEO",controls:[{id:"alt",label:"Alt Text",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: Classic white crewneck t-shirt with minimalist design",default:void 0},{id:"title",label:"Image title",info:"Show title when hover to image",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: White t-shirt",default:void 0}]},{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Cover",value:"cover"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"},mobile:{default:"auto"}}},{id:"contentBanner",type:"banner",message:"The background image should be taller than the Hero Banner",closable:!0},{id:"isYoutubeVideoMigrated",type:"toggle",default:!1}]},{id:"style",controls:[{id:"sizeSetting",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",widthHeightLinked:!1,width:"100%",shapeVideo:"16/9",enableVideoShape:!1}},mobile:{default:{shape:"custom",width:"100%",shapeVideo:"custom",enableVideoShape:!1}}},settingConfig:{width:{displayOptions:["full","default"],name:"Width"},height:{displayOptions:["fit-content","fit-screen"],name:"Height"},shape:{displayOptions:["original","custom"],displayVideoOptions:["1/1","3/2","4/3","16/9","21/9","2/3","3/4","9/16","custom"],name:"Frame",shapeTitleConfig:{original:"As banner source"}}},hiddenSettings:["padding","gap"]},{id:"videoObjectFit",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill video",value:"cover",type:"image",svgName:"gp-video-cover"},{label:"Fit video",value:"contain",type:"image",svgName:"gp-video-contain"}],devices:{desktop:{default:"cover"}}},{id:"background",type:"background-media",ignoreReRender:!0,showVideo:!0,showRatioVideo:!0,showDeviceControl:!0,devices:{desktop:{default:{type:"image",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"",videoHtml5:"",videoType:"youtube",loop:!0,lazyLoad:!1,videoAlign:"center"}}},compoDefaultValue:{desktop:{default:{type:"image",color:"bg-2",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"https://www.youtube.com/watch?v=NfASaHFN1zg",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4",videoType:"youtube",loop:!0,lazyLoad:!1}}}},{id:"hoverEffect",type:"toggle",default:!1},{id:"hoverEffectScale",type:"input:slider",label:"Zoom Value",units:["%"],min:100,max:200,step:5,default:"120%",showDefaultUnit:!0},{id:"hoverEffectDuration",label:"Zoom Time",type:"input:unit",units:["s"],min:0,default:.5,inputType:"number",placeholder:"",disableAutoValue:!0,showDefaultUnit:!0},{id:"height",label:"Height",type:"input:unit",units:["px"],placeholder:"Auto",devices:{desktop:{default:void 0}},info:"Full Width: To set Hero Banner full width, first you drag & drop a Section element from left sidebar, then make it full-width, after that you put your Hero Banner inside Section you have created."},{id:"contentPosition1Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"contentPosition2Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"wrapperWidth",type:"input:unit-width",label:"Width",placeholder:"Auto",min:0,units:["px","%"],devices:{desktop:{default:void 0},tablet:{default:void 0},mobile:{default:void 0}}},{id:"contentWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,devices:{desktop:{default:"default"},tablet:{default:"default"},mobile:{default:"default"}},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"default",showValue:!0}]},{id:"verticalGutter",type:"input:unit",units:["px"],min:0,label:"Spacing",devices:{desktop:{default:"32px"}}},{id:"overlayEnable",type:"toggle",default:!1},{id:"overlayOpacity",label:"Opacity",type:"input:slider",min:0,max:100,units:["%"],step:1,default:{normal:"20%"},state:{normal:!0,hover:!0},compoDefaultValue:{normal:"20%",hover:"20%"},showDefaultUnit:!0},{id:"overlayColor",label:"Color",type:"color-picker-v2",state:{normal:!0,hover:!0}},{id:"borderBg",type:"border-v2",label:"Border",compoDefaultValue:{border:"solid",color:"line-3",width:"1px",borderWidth:"1px"}},{id:"cornerBg",type:"corner-v2",label:"Corner",default:{radiusType:"none"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadowBg",type:"shadow-v2",label:"Button Shadow",compoDefaultValue:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}},{id:"contentPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}}}]}];exports.SettingsV2=SettingsV2;

package/dist/cjs/video/settings/configs/settings.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";var helpers=require("../../../helpers.js");const VideoSettings=[{id:"setting",controls:[{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"type",type:"select",label:"Video Type",options:[{label:"YouTube",value:"youtube"},{label:"Vimeo",value:"vimeo"},{label:"Video hosting",value:"html5"}],default:"html5"},{id:"youtubeUrl",type:"input",label:"Youtube Link",default:"https://www.youtube.com/watch?v=~~drIt4RH_kyQ~~",placeholder:"Insert video url here",hide:!0,action:{clear:!0},actionChangeControls:[{controlID:"loopVideo",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"autoplay",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"controls",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"mute",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"lazy",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1}]},{id:"vimeoUrl",type:"input",label:"Vimeo Link",default:"https://vimeo.com/1095883398",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"html5Url",type:"input",label:"HTML5 Video Link",default:"https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"notes",type:"notes",default:'You can upload video to a hosting server e.g Shopify. <a class="no-underline text-[#8AA4FF] font-medium leading-5" target="_blank" href="https://help.gempages.net/articles/version-7-video-element#video-url">Learn more</a>'},{id:"poster",type:"image",label:"Video Poster",hiddenSetting:{seo:!0}},{id:"preload",type:"toggle",label:"Preload",default:!0},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"width",type:"input:stepper",min:0,label:"Aspect Width",hide:!0,devices:{desktop:{default:16}}},{id:"height",type:"input:stepper",min:1,label:"Aspect Height",hide:!0,devices:{desktop:{default:9}}},{id:"startTime",type:"input",label:"Start time",placeholder:"mm:ss",info:"Start video at xx seconds",hide:!0},{id:"endTime",type:"input",label:"End time",placeholder:"mm:ss",info:"End video at xx seconds",hide:!0},{id:"autoplay",label:"Autoplay",type:"toggle",default:!1},{id:"mute",label:"Enable Sound",type:"toggle",default:!1},{id:"loopVideo",label:"Loop Video",type:"toggle",default:!1},{id:"controls",label:"Show Control Bar",type:"toggle",default:!0,info:"Player controls display in the player"},{id:"lazy",label:"Lazy load",type:"toggle",default:!0,info:"Optimize for pagespeed loading time"}]}];exports.VideoSettings=VideoSettings;
1	+ "use strict";var helpers=require("../../../helpers.js");const VideoSettings=[{id:"setting",controls:[{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"type",type:"select",label:"Video Type",options:[{label:"YouTube",value:"youtube"},{label:"Vimeo",value:"vimeo"},{label:"Video hosting",value:"html5"}],default:"html5"},{id:"youtubeUrl",type:"input",label:"Youtube Link",default:"https://www.youtube.com/watch?v=NfASaHFN1zg",placeholder:"Insert video url here",hide:!0,action:{clear:!0},actionChangeControls:[{controlID:"loopVideo",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"autoplay",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"controls",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"mute",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"lazy",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1}]},{id:"vimeoUrl",type:"input",label:"Vimeo Link",default:"https://vimeo.com/1095883398",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"html5Url",type:"input",label:"HTML5 Video Link",default:"https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"notes",type:"notes",default:'You can upload video to a hosting server e.g Shopify. <a class="no-underline text-[#8AA4FF] font-medium leading-5" target="_blank" href="https://help.gempages.net/articles/version-7-video-element#video-url">Learn more</a>'},{id:"poster",type:"image",label:"Video Poster",hiddenSetting:{seo:!0}},{id:"preload",type:"toggle",label:"Preload",default:!0},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"width",type:"input:stepper",min:0,label:"Aspect Width",hide:!0,devices:{desktop:{default:16}}},{id:"height",type:"input:stepper",min:1,label:"Aspect Height",hide:!0,devices:{desktop:{default:9}}},{id:"startTime",type:"input",label:"Start time",placeholder:"mm:ss",info:"Start video at xx seconds",hide:!0},{id:"endTime",type:"input",label:"End time",placeholder:"mm:ss",info:"End video at xx seconds",hide:!0},{id:"autoplay",label:"Autoplay",type:"toggle",default:!1},{id:"mute",label:"Enable Sound",type:"toggle",default:!1},{id:"loopVideo",label:"Loop Video",type:"toggle",default:!1},{id:"controls",label:"Show Control Bar",type:"toggle",default:!0,info:"Player controls display in the player"},{id:"lazy",label:"Lazy load",type:"toggle",default:!0,info:"Optimize for pagespeed loading time"}]}];exports.VideoSettings=VideoSettings;

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

	@@ -1 +1 @@
1	- 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=()=>~~composeClasses(~~"gp-h-full gp-w-full !gp-max-w-none gp-pointer-events-none"),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};
1	+ 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 CHANGED Viewed

	@@ -1 +1 @@
1	- let DEFAULT_CLIP_PATH="inset(0px)";export{DEFAULT_CLIP_PATH};
1	+ 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 CHANGED Viewed

	@@ -1 +1 @@
1	- import{DEVICES as e,makeStyleResponsive as t,getValueByDevice as o,getResponsiveValueByScreen as i,GRADIENT_BGR_KEY as l,getAspectRatioGlobalSize as a,cls as r}from"@gem-sdk/core";import{getImageSrc as n,createBlurDataURL as s}from"../../image/common/helpers.js";import{HREF_TO_SALES_PAGE as p}from"../../constant.js";import{DEFAULT_CLIP_PATH as g}from"./const.js";let getContentPosition=(t,o,l)=>{let a={};return e.map(e=>{let r=i(t,e),n=i(o,e),s=i(l,e);a={...a,[e]:1>=(r?.cols?.length\|\|1)?n:s}}),a},getEnableBgImageByDevice=(e,t)=>{if(!i(getBgImage(t),e))return!1;if(!t?.[e]){if("mobile"===e)return t?.tablet?.type==="image"\|\|t?.desktop?.type==="image"&&!t?.tablet;if("tablet"===e)return t?.desktop?.type==="image"}return t?.[e]?.type==="image"},getBgImage=e=>{if(!e)return{};let t={desktop:e?.desktop?.image,tablet:e?.tablet?.image,mobile:e?.mobile?.image};return t},imagePlaceholder=e=>{let t=getBgImage(e);return{desktop:s(t?.desktop?.width??0,t?.desktop?.height??0),tablet:s(t?.tablet?.width??t?.desktop?.width??0,t?.tablet?.height??t?.desktop?.width??0),mobile:s(t?.mobile?.width??t?.tablet?.width??t?.desktop?.width??0,t?.mobile?.height??t?.tablet?.height??t?.desktop?.width??0)}},getBgImageByScreen=(e,t,o,a)=>{if(!e)return"";let r=getBgImage(e),s=i(e,t),p=o?`url(${imagePlaceholder(e)[t]})`:`url(${n(i(r,t),t,a)})`,g=s?.color?`, ${s.color}`:"";return s?.color?.includes(l)&&s?.type==="image"?`${p}${g}`:s?.color?.includes(l)&&s?.type!=="image"?`${s.color}`:s?.type==="image"?p:"url()"},getBackgroundImageHeroBanner=(o,i=!1,l=!1)=>{if(!o)return;let a={};return e.forEach(e=>{a={...a,[e]:getBgImageByScreen(o,e,i,l)}}),t("bgi",a)},getAttachmentDevice=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let i=e?.[o]?.attachment;t={...t,[o]:"fixed"===i?"fixed":"absolute"}}),t},horizontalAlign=(e,t,o)=>mapContentPositionToHorizontal(getContentPosition(e,t,o)),scrollToContentBanner=e=>e?.target?.closest("div.gp-hero-banner-row")?.scrollTo(0,0),getDataVideoHeroBannerResponsive=(e,t)=>{switch(e){case"desktop":if(t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"tablet":if(t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.tablet&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop};break;case"mobile":if(t?.mobile?.type==="video")return{device:"mobile",data:t.mobile};if(!t?.mobile&&t?.tablet?.type==="video")return{device:"tablet",data:t.tablet};if(!t?.mobile&&!t?.tablet?.type&&t?.desktop?.type==="video")return{device:"desktop",data:t.desktop}}},getVisibilityStyle=e=>e?Object.keys(e).filter(e=>["--d","--d-tablet","--d-mobile"].includes(e)).reduce((t,o)=>({...t,[o]:e?.[o]!=="none"?"flex":e?.[o]}),{}):{},getVideoRatioFromSizeSetting=(e,t)=>{if(!e)return t;let o=e?.shapeVideo;return"custom"===o?e?.shapeValue\|\|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},updateVideoIframeSize=({iframeEl:e,containerRatio:t,videoObjectFit:o,background:i,currentDevice:l})=>{let a,r;if(!e\|\|!t)return;let n=getVideoAspectRatio(i,l);if("contain"===o){Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:"100%",height:"100%",maxWidth:"none",transform:"translate(-50%, -50%)"});return}t>=n?(a=100,r=t/n100):(r=100,a=n/t100),Object.assign(e.style,{position:"absolute",top:"50%",left:"50%",width:`${a}%`,height:`${r}%`,maxWidth:"none",transform:"translate(-50%, -50%)"})};export{collectAspectRatioByDevice,collectYoutubeAspectRatio,debounce,fallbackImg,formatHoverScale,getAspectRatio,getAttachmentDevice,getBackgroundImageHeroBanner,getBannerLink,getBgImage,getClassAlignBanner,getClassContentPosition,getClassForContentByFitContent,getClassForStretchContent,getClassSpaceBetween,getClassSpaceBetweenLeftRight,getClipPath,getContainerRatio,getContentPosition,getDataVideoHeroBannerResponsive,getDisplayStyleByFitContent,getEnableBgImageByDevice,getOpacityHover,getPercentageVisible,getResponsiveSetting,getStyleAspectRatioHeroBannerCustom,getStyleHeroBannerBg,getVideoAspectRatio,getVisibilityStyle,getWidth,getYoutubeAspectRatio,horizontalAlign,imagePlaceholder,isScaleImage,mapContentPositionToHorizontal,opacityEnabledData,resetVideoIframeStyle,resetVideoWrapperStyle,scrollToContentBanner,setVideoWrapperStyle,showVideoType,updateVideoIframeSize};
1	+ import{DEVICES as e,makeStyleResponsive as t,getValueByDevice as o,getResponsiveValueByScreen as i,GRADIENT_BGR_KEY as l,getAspectRatioGlobalSize as a,cls as r}from"@gem-sdk/core";import{getImageSrc as n,createBlurDataURL as s}from"../../image/common/helpers.js";import{HREF_TO_SALES_PAGE as p}from"../../constant.js";import{DEFAULT_CLIP_PATH as g,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/p100):(s=100,n=p/t100),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 CHANGED Viewed

	@@ -1 +1 @@
1	- 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 c,getValueByDevice as d}from"@gem-sdk/core";import{getVisibilityStyle as b,getStyleAspectRatioHeroBannerCustom as p,getOpacityHover as m,getDisplayStyleByFitContent as S,getStyleHeroBannerBg as h,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,i,n)=>{let{sizeSetting:a}=o??{},y={...n,...b(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:c,hasActiveShadow:d}=e??{},b={...r("h",l(t)),...p(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:c,styleAppliedFor:"box-shadow",isEnableShadow:d})};return filterTruthyStyles(b)},getOverlayStyle=e=>{let{overlayColor:t,overlayOpacity:r,hoverEffect:l}=e??{},{disableOpacity:o}=T(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:m(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={...S(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={...h(k(i\|\|{}),t),...c(i,{ignoreBgAttachment:!0,ignoreBackgroundImage:!0}),"--duration":a,"--scale":f(o),...r("pos",w(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":v(t?.width,r)};return filterTruthyStyles(l)},mapVideoObjectFit=e=>{if(e)return{desktop:d(e,"desktop"),tablet:d(e,"tablet"),mobile:d(e,"mobile")}},getHtml5VideoStyle=(e,t)=>{let l=mapVideoObjectFit(t),o={...r("aspect",e),...l?r("objf",l):{}};return filterTruthyStyles(o)},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};
1	+ 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;o&&(t[r]=o)}),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.liquid.js CHANGED Viewed

@@ -1,21 +1,21 @@
-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 h,baseAssetURL as u}from"@gem-sdk/core";import{getInsertLinkData as v,getSettingPreloadData as g}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:N}=P??{},O=b(P),{cssClass:R}=x??{},{urlData:_}=v("",O),w=i({background:$(S?.background||{}),uid:y?.uid,enableParallax: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:_?.href??"",linkType:O?.type??"",hoverEffectDuration:S?.hoverEffectDuration}),z=!!O?.link&&N,A=n({...r({uid:y?.uid||""})}),D=n(t()),F=l({...o(S,P,k)}),G=c({...s({setting:P,builderProps:y,advancedCssClass:R})}),I=c({...a()}),T=()=>e({setting:P,styles:S,children:C,enableLazyLoadImage:H,rawChildren:j.rawChildren,builderProps:y});return m`
+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}=P??{},N=b(P),{cssClass:O}=x??{},{urlData:R}=g("",N),V=i({background:$(S?.background||{}),uid:y?.uid,enableParallax: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:N?.target??"_self",href:R?.href??"",linkType:N?.type??"",hoverEffectDuration:S?.hoverEffectDuration,isYoutubeVideoMigrated:P?.isYoutubeVideoMigrated}),_=!!N?.link&&M,w=n({...r({uid:y?.uid||""})}),z=n(t()),A=l({...o(S,P,k)}),D=c({...s({setting:P,builderProps:y,advancedCssClass:O})}),F=c({...a()}),G=()=>e({setting:P,styles:S,children:C,enableLazyLoadImage:H,rawChildren:j.rawChildren,builderProps:y});return m`
       <gp-hero-banner
         ${{...E}}
-        ${{...A}}
-        class="${G}"
-        style="${F}"
-        gp-data='${p(w)}'
+        ${{...w}}
+        class="${D}"
+        style="${A}"
+        gp-data='${p(V)}'
       >
-        ${d(!z,T())}
-        ${d(z,m`
+        ${d(!_,G())}
+        ${d(_,m`
           <div
-            ${{...D}}
+            ${{...z}}
             aria-hidden="true"
-            class="${I}"
+            class="${F}"
           >
-            ${T()}
+            ${G()}
           </div>`)}
       </gp-hero-banner>
-       ${f(h,`<script ${g('class="gps-link" delay',"src")}="{{ 'gp-hero-banner-v2-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${g('class="gps-link" delay',"src")}="${u}/assets-v2/gp-hero-banner-v2-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 CHANGED Viewed

@@ -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 r,getAspectRatioGlobalSize as l}from"@gem-sdk/core";import m from"../../grid/components/row/Row.js";import{createStyle as i,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 f,getBackgroundStyle as v,getContainBackgroundStyle as u,getYoutubeIframeStyle as h,getHtml5VideoStyle as j}from"../common/styles.js";import{getContainerClasses as b,getOverlayClasses as g,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 z,horizontalAlign as E,getWidth as x,scrollToContentBanner as A,getBgImage as R,fallbackImg as V}from"../common/helpers.js";import $ from"../../video/components/LiteYouTubeEmbed.js";import{getYoutubeVideoId as M,youtubeVideoRegex as O}from"../../video/common/helpers.js";import S from"../hooks/useHeroBannerItem.js";import{getYoutubeContentClasses as W}from"../../video/common/classes.js";let HeroBannerItem=Y=>{s();let{setting:q,styles:D,children:F,elementRef:G,transform:J,dataVideo:K,bgRef:P,isShowVideoHtml5:Q,layoutResponsive:U,heroBannerWrapperRef:X}=Y,{layout:Z,verticalAlign:_,enableParallax:ee,alt:eo,title:et}=q??{},{background:es,overlayColor:er,verticalGutter:el,sizeSetting:em,contentWidth:ei,hoverEffect:ea,contentPosition1Col:ed,contentPosition2Col:en,videoObjectFit:ep}=D??{},ec=i({...p(D)}),ey=a({...b(q,D)}),ef=i({...c(D)}),ev=a({...g(D)}),eu=i({...y(D)}),eh=a({...N(D,q)}),ej=i({...f(D)}),eb=a({...H()}),eg=a({...T()}),eN=a({...k(ea,!1)}),eH=i({...L(es,!1,!0),...v(D,ee,J)}),eT=a({...w()}),ek=i({...u(D)}),ew=a({...I(!Q)}),{youtubeIframeWrapperRef:eI,resolvedAspectRatio:eB,youtubeAspectRatio:eC}=S({videoType:K?.videoType,sizeSetting:em,background:es,videoObjectFit:ep,heroBannerWrapperRef:X}),eL=i({...h(eC,ep)}),ez=i({...j(eB,ep)}),eE=a({...B()}),ex=a({...C()}),eA=a({...W()}),eR=t(()=>{if(!z(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:ez,className:ew});let o=K?.video??"",t=M(o),s=K?.loop?1:0,r=`&loop=${s}&playlist=${t}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(K?.type==="video"&&K?.videoType==="youtube"&&t&&O.test(o))return e("div",{className:eA,ref:eI,children:e($,{id:t,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:r,adNetwork:!1,noCookie:!0,muted:!0,lazy:K?.lazyLoad??!0,style:eL,wrapperClass:eE,iframeClass:ex})})},[K,es,ew,ex,eE,eL,ez,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:eR}),!!er&&e("div",{"aria-label":"Overlay",className:ev,style:ef})]}),e(m,{className:eh,style:eu,setting:{layout:Z,horizontalAlign:E(Z,ed,en),verticalAlign:_},styles:{verticalGutter:el,width:x(ei),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},hiddenEmptyCol:U?.cols?.length===1,onBlur:e=>A(e),children:r(F)}),e(d,{pictureClass:eb,srcSet:R(es),className:eg,aspectRatio:l(em),style:ej,alt:eo,title:et,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 CHANGED Viewed

@@ -1,16 +1,16 @@
-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}=P??{},{background:em,overlayColor:er,verticalGutter:el,sizeSetting:ea,contentWidth:ep,hoverEffect:ed,contentPosition1Col:en,contentPosition2Col:ec,videoObjectFit:eu}=Q??{},ef=!ei&&K,ey=z(ea,em),ev=A(em,eu,ey),ej=V(em||{}),e$=ej.desktop,eg=m({...d(Q)}),eb=r({...$(P,Q)}),eh=m({...n(Q)}),ew=r({...g(Q)}),ek=m({...c(Q)}),eN=r({...b(Q,P)}),eq=m({...u(Q)}),eH=r({...h()}),eC=r({...w()}),eI=r({...k(ed,ef)}),ez=m({...B(em,ef,!1),...f(Q,eo,"")}),eA=r({...N()}),eB=m({...y(Q)}),eL=r({...q(!1)}),eT=m({...v(ev,eu)}),ex=r({...H()}),eE=m({...j(ey,eu)}),eR=r({...C()}),eS=e=>r({...I(e)}),eV=()=>{if(!ei)return s.map(e=>l(R(e,em),M({src:D(t(x(em),e),e),alt:es,title:et,className:eS(e),isDisableAspectStyle:!0,enableLazyLoadImage:K}))).join("")},eD=()=>{if(!S(em))return;if(F(em))return p({uid:X?.uid,muted:!0,loop:e$?.loop,controls:!1,autoplay:!0,src:e$?.videoHtml5||"",title:"Video",style:eE,className:eL});let e=e$?.video??"",o=W(e),s=`&loop=false&playlist=${o}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(e$?.type==="video"&&e$?.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:e$?.lazyLoad??!0,preload:!0,style:eT,wrapperClass:ex,iframeClass:eR})};return e`
-  <div class="${eb}" style="${eg}">
+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="${eA}"
-        style="${eB}"
+        class="${eB}"
+        style="${eL}"
       >
-        <div class="${eI}" style="${ez}">
-          ${eV()}
+        <div class="${ez}" style="${eA}">
           ${eD()}
+          ${eM()}
         </div>
-        ${l(!!er,e`<div aria-label="Overlay" class="${ew}" style="${eh}"> </div>`)}
+        ${l(!!el,e`<div aria-label="Overlay" class="${ek}" style="${ew}"> </div>`)}
       </div>
-      ${i({className:eN,style:ek,setting:{layout:_,horizontalAlign:L(_,en,ec),verticalAlign:ee},styles:{verticalGutter:el,width:T(ep),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:U,rawChildren:Z})}
-        ${a({pictureClass:eH,srcSet:x(em),className:eC,...ei&&G,aspectRatio:o(ea),style:eq,alt:es,title:et,enableLazyLoadImage:K,fallbackImg:E})}
+      ${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/useHeroBannerItem.js CHANGED Viewed

	@@ -1 +1 @@
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 m,resetVideoIframeStyle as u,resetVideoWrapperStyle as a,setVideoWrapperStyle as l,getResponsiveSetting as s,updateVideoIframeSize as f,getContainerRatio as c}from"../common/helpers.js";let useHeroBannerItem=({videoType:d,sizeSetting:v,background:y,videoObjectFit:b,heroBannerWrapperRef:p})=>{let E=i(),w=e(null),L=r(()=>n(v,y),[v,y]),q=r(()=>m(y,b,L),[y,b,L]),R=s(b\|\|{}),j=o(R,E);return t(()=>{let e=w.current,r=p?.current,t=()=>e?.querySelector("iframe"),i=i=>{let o=i\|\|e;if(!o)return;let n=o.querySelector("iframe");f({iframeEl:n\|\|t(),containerRatio:c(r),videoObjectFit:j\|\|"cover",background:y,currentDevice:E})},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"!==d){let i=t();return i&&u(i),a(e),()=>{r&&r.removeEventListener("youtube-iframe-ready",o)}}l(e),t()&&(window.requestAnimationFrame(()=>i()),setTimeout(()=>{i()},100));let n=window.ResizeObserver;if(!n)return()=>{r&&r.removeEventListener("youtube-iframe-ready",o)};let m=new n(()=>i());return r&&m.observe(r),()=>{if(m.disconnect(),r&&r.removeEventListener("youtube-iframe-ready",o),e){let r=t();r&&u(r),a(e)}}},[d,j,E,L]),{youtubeIframeWrapperRef:w,resolvedAspectRatio:L,youtubeAspectRatio:q}};export{useHeroBannerItem as default};
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-video.js CHANGED Viewed

@@ -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%",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=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};

package/dist/esm/hero-banner/settings/configs/settings.js CHANGED Viewed

@@ -143,4 +143,4 @@ let SettingsV2=[{id:"setting",controls:[{id:"layout",type:"layout-banner",device
                 d="M4.39584 15.625C3.36031 15.625 2.52084 14.7855 2.52084 13.75V12.5C2.52084 11.4645 3.36031 10.625 4.39584 10.625H14.3958C15.4314 10.625 16.2708 11.4645 16.2708 12.5V13.75C16.2708 14.7855 15.4314 15.625 14.3958 15.625H4.39584ZM3.77084 13.75C3.77084 14.0952 4.05066 14.375 4.39584 14.375H14.3958C14.741 14.375 15.0208 14.0952 15.0208 13.75V12.5C15.0208 12.1548 14.741 11.875 14.3958 11.875H4.39584C4.05066 11.875 3.77084 12.1548 3.77084 12.5V13.75Z"
                 fill="currentColor"
               />
-            </svg> `,tooltip:"Align right"}],devices:{desktop:{default:"center"}}},{id:"seo",type:"group",label:"SEO",controls:[{id:"alt",label:"Alt Text",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: Classic white crewneck t-shirt with minimalist design",default:void 0},{id:"title",label:"Image title",info:"Show title when hover to image",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: White t-shirt",default:void 0}]},{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Cover",value:"cover"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"},mobile:{default:"auto"}}},{id:"contentBanner",type:"banner",message:"The background image should be taller than the Hero Banner",closable:!0}]},{id:"style",controls:[{id:"sizeSetting",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",widthHeightLinked:!1,width:"100%",shapeVideo:"16/9",enableVideoShape:!1}},mobile:{default:{shape:"custom",width:"100%",shapeVideo:"custom",enableVideoShape:!1}}},settingConfig:{width:{displayOptions:["full","default"],name:"Width"},height:{displayOptions:["fit-content","fit-screen"],name:"Height"},shape:{displayOptions:["original","custom"],displayVideoOptions:["1/1","3/2","4/3","16/9","21/9","2/3","3/4","9/16","custom"],name:"Frame",shapeTitleConfig:{original:"As banner source"}}},hiddenSettings:["padding","gap"]},{id:"videoObjectFit",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill video",value:"cover",type:"image",svgName:"gp-video-cover"},{label:"Fit video",value:"contain",type:"image",svgName:"gp-video-contain"}],devices:{desktop:{default:"cover"}}},{id:"background",type:"background-media",ignoreReRender:!0,showVideo:!0,showRatioVideo:!0,showDeviceControl:!0,devices:{desktop:{default:{type:"image",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"",videoHtml5:"",videoType:"youtube",loop:!0,lazyLoad:!1}}},compoDefaultValue:{desktop:{default:{type:"image",color:"bg-2",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"https://youtu.be/KOxfzBp72uk",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4",videoType:"youtube",loop:!0,lazyLoad:!1}}}},{id:"hoverEffect",type:"toggle",default:!1},{id:"hoverEffectScale",type:"input:slider",label:"Zoom Value",units:["%"],min:100,max:200,step:5,default:"120%",showDefaultUnit:!0},{id:"hoverEffectDuration",label:"Zoom Time",type:"input:unit",units:["s"],min:0,default:.5,inputType:"number",placeholder:"",disableAutoValue:!0,showDefaultUnit:!0},{id:"height",label:"Height",type:"input:unit",units:["px"],placeholder:"Auto",devices:{desktop:{default:void 0}},info:"Full Width: To set Hero Banner full width, first you drag & drop a Section element from left sidebar, then make it full-width, after that you put your Hero Banner inside Section you have created."},{id:"contentPosition1Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"contentPosition2Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"wrapperWidth",type:"input:unit-width",label:"Width",placeholder:"Auto",min:0,units:["px","%"],devices:{desktop:{default:void 0},tablet:{default:void 0},mobile:{default:void 0}}},{id:"contentWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,devices:{desktop:{default:"default"},tablet:{default:"default"},mobile:{default:"default"}},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"default",showValue:!0}]},{id:"verticalGutter",type:"input:unit",units:["px"],min:0,label:"Spacing",devices:{desktop:{default:"32px"}}},{id:"overlayEnable",type:"toggle",default:!1},{id:"overlayOpacity",label:"Opacity",type:"input:slider",min:0,max:100,units:["%"],step:1,default:{normal:"20%"},state:{normal:!0,hover:!0},compoDefaultValue:{normal:"20%",hover:"20%"},showDefaultUnit:!0},{id:"overlayColor",label:"Color",type:"color-picker-v2",state:{normal:!0,hover:!0}},{id:"borderBg",type:"border-v2",label:"Border",compoDefaultValue:{border:"solid",color:"line-3",width:"1px",borderWidth:"1px"}},{id:"cornerBg",type:"corner-v2",label:"Corner",default:{radiusType:"none"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadowBg",type:"shadow-v2",label:"Button Shadow",compoDefaultValue:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}},{id:"contentPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}}}]}];export{SettingsV2};
+            </svg> `,tooltip:"Align right"}],devices:{desktop:{default:"center"}}},{id:"seo",type:"group",label:"SEO",controls:[{id:"alt",label:"Alt Text",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: Classic white crewneck t-shirt with minimalist design",default:void 0},{id:"title",label:"Image title",info:"Show title when hover to image",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: White t-shirt",default:void 0}]},{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Cover",value:"cover"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"},mobile:{default:"auto"}}},{id:"contentBanner",type:"banner",message:"The background image should be taller than the Hero Banner",closable:!0},{id:"isYoutubeVideoMigrated",type:"toggle",default:!1}]},{id:"style",controls:[{id:"sizeSetting",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",widthHeightLinked:!1,width:"100%",shapeVideo:"16/9",enableVideoShape:!1}},mobile:{default:{shape:"custom",width:"100%",shapeVideo:"custom",enableVideoShape:!1}}},settingConfig:{width:{displayOptions:["full","default"],name:"Width"},height:{displayOptions:["fit-content","fit-screen"],name:"Height"},shape:{displayOptions:["original","custom"],displayVideoOptions:["1/1","3/2","4/3","16/9","21/9","2/3","3/4","9/16","custom"],name:"Frame",shapeTitleConfig:{original:"As banner source"}}},hiddenSettings:["padding","gap"]},{id:"videoObjectFit",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill video",value:"cover",type:"image",svgName:"gp-video-cover"},{label:"Fit video",value:"contain",type:"image",svgName:"gp-video-contain"}],devices:{desktop:{default:"cover"}}},{id:"background",type:"background-media",ignoreReRender:!0,showVideo:!0,showRatioVideo:!0,showDeviceControl:!0,devices:{desktop:{default:{type:"image",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"",videoHtml5:"",videoType:"youtube",loop:!0,lazyLoad:!1,videoAlign:"center"}}},compoDefaultValue:{desktop:{default:{type:"image",color:"bg-2",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"https://www.youtube.com/watch?v=NfASaHFN1zg",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4",videoType:"youtube",loop:!0,lazyLoad:!1}}}},{id:"hoverEffect",type:"toggle",default:!1},{id:"hoverEffectScale",type:"input:slider",label:"Zoom Value",units:["%"],min:100,max:200,step:5,default:"120%",showDefaultUnit:!0},{id:"hoverEffectDuration",label:"Zoom Time",type:"input:unit",units:["s"],min:0,default:.5,inputType:"number",placeholder:"",disableAutoValue:!0,showDefaultUnit:!0},{id:"height",label:"Height",type:"input:unit",units:["px"],placeholder:"Auto",devices:{desktop:{default:void 0}},info:"Full Width: To set Hero Banner full width, first you drag & drop a Section element from left sidebar, then make it full-width, after that you put your Hero Banner inside Section you have created."},{id:"contentPosition1Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"contentPosition2Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"wrapperWidth",type:"input:unit-width",label:"Width",placeholder:"Auto",min:0,units:["px","%"],devices:{desktop:{default:void 0},tablet:{default:void 0},mobile:{default:void 0}}},{id:"contentWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,devices:{desktop:{default:"default"},tablet:{default:"default"},mobile:{default:"default"}},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"default",showValue:!0}]},{id:"verticalGutter",type:"input:unit",units:["px"],min:0,label:"Spacing",devices:{desktop:{default:"32px"}}},{id:"overlayEnable",type:"toggle",default:!1},{id:"overlayOpacity",label:"Opacity",type:"input:slider",min:0,max:100,units:["%"],step:1,default:{normal:"20%"},state:{normal:!0,hover:!0},compoDefaultValue:{normal:"20%",hover:"20%"},showDefaultUnit:!0},{id:"overlayColor",label:"Color",type:"color-picker-v2",state:{normal:!0,hover:!0}},{id:"borderBg",type:"border-v2",label:"Border",compoDefaultValue:{border:"solid",color:"line-3",width:"1px",borderWidth:"1px"}},{id:"cornerBg",type:"corner-v2",label:"Corner",default:{radiusType:"none"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadowBg",type:"shadow-v2",label:"Button Shadow",compoDefaultValue:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}},{id:"contentPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}}}]}];export{SettingsV2};

package/dist/esm/video/settings/configs/settings.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{youtubeShortsRegex as e}from"../../../helpers.js";let VideoSettings=[{id:"setting",controls:[{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"type",type:"select",label:"Video Type",options:[{label:"YouTube",value:"youtube"},{label:"Vimeo",value:"vimeo"},{label:"Video hosting",value:"html5"}],default:"html5"},{id:"youtubeUrl",type:"input",label:"Youtube Link",default:"https://www.youtube.com/watch?v=~~drIt4RH_kyQ~~",placeholder:"Insert video url here",hide:!0,action:{clear:!0},actionChangeControls:[{controlID:"loopVideo",condition:`${e}.test(youtubeUrl)`,newValue:!0},{controlID:"autoplay",condition:`${e}.test(youtubeUrl)`,newValue:!0},{controlID:"controls",condition:`${e}.test(youtubeUrl)`,newValue:!1},{controlID:"mute",condition:`${e}.test(youtubeUrl)`,newValue:!1},{controlID:"lazy",condition:`${e}.test(youtubeUrl)`,newValue:!1}]},{id:"vimeoUrl",type:"input",label:"Vimeo Link",default:"https://vimeo.com/1095883398",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"html5Url",type:"input",label:"HTML5 Video Link",default:"https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"notes",type:"notes",default:'You can upload video to a hosting server e.g Shopify. <a class="no-underline text-[#8AA4FF] font-medium leading-5" target="_blank" href="https://help.gempages.net/articles/version-7-video-element#video-url">Learn more</a>'},{id:"poster",type:"image",label:"Video Poster",hiddenSetting:{seo:!0}},{id:"preload",type:"toggle",label:"Preload",default:!0},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"width",type:"input:stepper",min:0,label:"Aspect Width",hide:!0,devices:{desktop:{default:16}}},{id:"height",type:"input:stepper",min:1,label:"Aspect Height",hide:!0,devices:{desktop:{default:9}}},{id:"startTime",type:"input",label:"Start time",placeholder:"mm:ss",info:"Start video at xx seconds",hide:!0},{id:"endTime",type:"input",label:"End time",placeholder:"mm:ss",info:"End video at xx seconds",hide:!0},{id:"autoplay",label:"Autoplay",type:"toggle",default:!1},{id:"mute",label:"Enable Sound",type:"toggle",default:!1},{id:"loopVideo",label:"Loop Video",type:"toggle",default:!1},{id:"controls",label:"Show Control Bar",type:"toggle",default:!0,info:"Player controls display in the player"},{id:"lazy",label:"Lazy load",type:"toggle",default:!0,info:"Optimize for pagespeed loading time"}]}];export{VideoSettings};
1	+ import{youtubeShortsRegex as e}from"../../../helpers.js";let VideoSettings=[{id:"setting",controls:[{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"type",type:"select",label:"Video Type",options:[{label:"YouTube",value:"youtube"},{label:"Vimeo",value:"vimeo"},{label:"Video hosting",value:"html5"}],default:"html5"},{id:"youtubeUrl",type:"input",label:"Youtube Link",default:"https://www.youtube.com/watch?v=NfASaHFN1zg",placeholder:"Insert video url here",hide:!0,action:{clear:!0},actionChangeControls:[{controlID:"loopVideo",condition:`${e}.test(youtubeUrl)`,newValue:!0},{controlID:"autoplay",condition:`${e}.test(youtubeUrl)`,newValue:!0},{controlID:"controls",condition:`${e}.test(youtubeUrl)`,newValue:!1},{controlID:"mute",condition:`${e}.test(youtubeUrl)`,newValue:!1},{controlID:"lazy",condition:`${e}.test(youtubeUrl)`,newValue:!1}]},{id:"vimeoUrl",type:"input",label:"Vimeo Link",default:"https://vimeo.com/1095883398",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"html5Url",type:"input",label:"HTML5 Video Link",default:"https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"notes",type:"notes",default:'You can upload video to a hosting server e.g Shopify. <a class="no-underline text-[#8AA4FF] font-medium leading-5" target="_blank" href="https://help.gempages.net/articles/version-7-video-element#video-url">Learn more</a>'},{id:"poster",type:"image",label:"Video Poster",hiddenSetting:{seo:!0}},{id:"preload",type:"toggle",label:"Preload",default:!0},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"width",type:"input:stepper",min:0,label:"Aspect Width",hide:!0,devices:{desktop:{default:16}}},{id:"height",type:"input:stepper",min:1,label:"Aspect Height",hide:!0,devices:{desktop:{default:9}}},{id:"startTime",type:"input",label:"Start time",placeholder:"mm:ss",info:"Start video at xx seconds",hide:!0},{id:"endTime",type:"input",label:"End time",placeholder:"mm:ss",info:"End video at xx seconds",hide:!0},{id:"autoplay",label:"Autoplay",type:"toggle",default:!1},{id:"mute",label:"Enable Sound",type:"toggle",default:!1},{id:"loopVideo",label:"Loop Video",type:"toggle",default:!1},{id:"controls",label:"Show Control Bar",type:"toggle",default:!0,info:"Player controls display in the player"},{id:"lazy",label:"Lazy load",type:"toggle",default:!0,info:"Optimize for pagespeed loading time"}]}];export{VideoSettings};

package/dist/types/index.d.ts CHANGED Viewed

@@ -658,6 +658,7 @@ type HeroBannerSettingProps = {
     ratioOptions?: ObjectDevices<Ratio>;
     enableLink?: boolean;
     contentBanner?: string;
+    isYoutubeVideoMigrated?: boolean;
 } & Pick<RowSettingProps, 'layout' | 'horizontalAlign'>;
 type HeroBannerStyleProps = {
     height?: ObjectDevices<string>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "12.0.0-staging.14",
+  "version": "12.0.0-staging.15",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,8 +26,8 @@
     "scan-all-text": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/scan-all-text && node ./scripts/scan-all-text"
   },
   "devDependencies": {
-    "@gem-sdk/core": "12.0.0-staging.13",
-    "@gem-sdk/styles": "12.0.0-staging.12",
+    "@gem-sdk/core": "12.0.0-staging.15",
+    "@gem-sdk/styles": "12.0.0-staging.15",
     "@gem-sdk/system": "12.0.0-staging.0",
     "@types/react-transition-group": "^4.4.12",
     "tsup": "^8.5.0",