@gem-sdk/components 10.0.1 → 10.0.2
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.
- package/dist/cjs/collection/components/collection-banner/CollectionBanner.js +1 -1
- package/dist/cjs/collection/components/collection-banner/CollectionBanner.liquid.js +7 -9
- package/dist/cjs/hero-banner/components/HeroBannerItem.js +1 -1
- package/dist/cjs/hero-banner/components/HeroBannerItem.liquid.js +4 -6
- package/dist/esm/collection/components/collection-banner/CollectionBanner.js +1 -1
- package/dist/esm/collection/components/collection-banner/CollectionBanner.liquid.js +8 -10
- package/dist/esm/hero-banner/components/HeroBannerItem.js +1 -1
- package/dist/esm/hero-banner/components/HeroBannerItem.liquid.js +5 -7
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),Row=require("../../../grid/components/row/Row.js"),system=require("@gem-sdk/system"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),helpers=require("./common/helpers.js"),Link=require("../../../link/components/Link.js");const CollectionBanner=({builderAttrs:e,builderProps:s,setting:t,style:l,children:r,advanced:a})=>{let n=core.useCollection(),{isPreviewSharePageMode:i,isEditMode:
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),Row=require("../../../grid/components/row/Row.js"),system=require("@gem-sdk/system"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),helpers=require("./common/helpers.js"),Link=require("../../../link/components/Link.js");const CollectionBanner=({builderAttrs:e,builderProps:s,setting:t,style:l,children:r,advanced:a})=>{let n=core.useCollection(),{isPreviewSharePageMode:i,isEditMode:c}=core.useRenderMode(),{link:o,layout:m,width:u,verticalGutter:y,verticalAlign:d,horizontalAlign:g}=t??{};helpers.updateBackroundImageSrc({setting:t,collectionSrc:n?.collectionMedia?.src});let j=system.createClass({...classes.getClassContainerBanner({builderProps:s,setting:t,advanced:a})}),C=system.createClass({...classes.getClassContainerBackgoundImage({setting:t})}),x=system.createClass({...classes.getClassOverlayBanner({setting:t})}),k=system.createClass({...classes.getClassLinkBanner()}),p=system.createStyle({...styles.getDimension({setting:t,style:l})}),R=system.createStyle({...styles.getStyleOverlay({setting:t})}),h=system.createStyle({...styles.getStyleContainerBackgoundImage({setting:t,hasCollectionImage:!1})}),q=!!o?.link&&!c&&!i;return jsxRuntime.jsxs("div",{...e,className:j,style:p,children:[jsxRuntime.jsx("div",{className:C,style:h}),jsxRuntime.jsx("div",{"aria-label":"Overlay",className:x,style:R}),system.If(q,jsxRuntime.jsx(Link.default,{setting:{href:o?.link,target:o?.target},className:k})),jsxRuntime.jsx(Row.default,{setting:{layout:m,horizontalAlign:g,verticalAlign:d},styles:{verticalGutter:y,width:u,fullWidth:{desktop:!1,tablet:!1,mobile:!1}},style:l,children:r})]})};exports.default=CollectionBanner;
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"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"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),helpers=require("./common/helpers.js");const CollectionBanner=({builderAttrs:e,builderProps:s,setting:l,style:t,children:a,rawChildren:r,advanced:
|
|
2
|
+
"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"),classes=require("./common/classes.js"),styles=require("./common/styles.js"),helpers=require("./common/helpers.js");const CollectionBanner=({builderAttrs:e,builderProps:s,setting:l,style:t,children:a,rawChildren:r,advanced:i})=>{let{link:c,layout:o,width:n,verticalGutter:m,horizontalAlign:y,verticalAlign:d}=l??{};helpers.updateBackroundImageSrc({setting:l,collectionSrc:`{% if collection.image %} {{ collection.image.src | image_url}} {% else %} ${helpers.defaultImageUrl} {% endif %}`});let g=system.createClass({...classes.getClassContainerBanner({builderProps:s,setting:l,advanced:i})}),u=system.createClass({...classes.getClassContainerBackgoundImage({setting:l})}),C=system.createClass({...classes.getClassOverlayBanner({setting:l})}),$=system.createClass({...classes.getClassLinkBanner()}),p=system.createStyle({...styles.getDimension({setting:l,style:t})}),v=system.createStyle({...styles.getStyleOverlay({setting:l})}),f=system.createStyle({...styles.getStyleContainerBackgoundImage({setting:l,hasCollectionImage:!1})});return core.template`
|
|
3
3
|
<div ${{...e}} class="${g}" style="${p}">
|
|
4
4
|
<div
|
|
5
|
-
aria-label="Background Image"
|
|
6
|
-
role="banner"
|
|
7
5
|
class="${u}"
|
|
8
|
-
style="${
|
|
6
|
+
style="${f}"
|
|
9
7
|
>
|
|
10
8
|
</div>
|
|
11
|
-
<div aria-label="Overlay"
|
|
12
|
-
${core.RenderIf(!!
|
|
13
|
-
href="${
|
|
14
|
-
target="${
|
|
9
|
+
<div aria-label="Overlay" class="${C}" style="${v}"> </div>
|
|
10
|
+
${core.RenderIf(!!c?.link,`<a
|
|
11
|
+
href="${c?.link}"
|
|
12
|
+
target="${c?.target}"
|
|
15
13
|
class="${$}"
|
|
16
14
|
> </a>`)}
|
|
17
|
-
${Row_liquid.default({setting:{layout:o,horizontalAlign:y,verticalAlign:d},styles:{verticalGutter:m,width:
|
|
15
|
+
${Row_liquid.default({setting:{layout:o,horizontalAlign:y,verticalAlign:d},styles:{verticalGutter:m,width:n,fullWidth:{desktop:!1,tablet:!1,mobile:!1}},style:t,children:a,rawChildren:r})}
|
|
18
16
|
</div>
|
|
19
17
|
`};exports.default=CollectionBanner;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"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");const HeroBannerItem=e=>{core.useEditorMode();let{setting:s,styles:t,children:l,elementRef:a,transform:r,dataVideo:o,bgRef:i,isShowVideoHtml5:m,layoutResponsive:c}=e,{layout:
|
|
2
|
+
"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");const HeroBannerItem=e=>{core.useEditorMode();let{setting:s,styles:t,children:l,elementRef:a,transform:r,dataVideo:o,bgRef:i,isShowVideoHtml5:m,layoutResponsive:c}=e,{layout:y,verticalAlign:n,enableParallax:d,alt:u,title:p}=s??{},{background:g,overlayColor:v,verticalGutter:C,sizeSetting:h,contentWidth:j,hoverEffect:b,contentPosition1Col:R,contentPosition2Col:f}=t??{},x=helpers.getAspectRatioSettings(s?.ratioOptions,s?.aspectRatio),S=system.createStyle({...styles.getContainerStyle(t,s)}),I=system.createClass({...classes.getContainerClasses(s,t)}),T=system.createStyle({...styles.getOverlayStyle(t)}),k=system.createClass({...classes.getOverlayClasses(t)}),q=system.createStyle({...styles.getRowStyle(t)}),w=system.createClass({...classes.getRowClasses(t,s)}),B=system.createStyle({...styles.getAdaptiveStyle(t)}),H=system.createClass({...classes.getAdaptivePictureClasses()}),A=system.createClass({...classes.getAdaptiveClasses()}),L=system.createClass({...classes.getBackgroundClasses(b,!1)}),E=system.createStyle({...helpers.getBackgroundImageHeroBanner(g,!1,!0),...styles.getBackgroundStyle(t,d,r)}),N=system.createClass({...classes.getContainBackgroundClasses()}),V=system.createStyle({...styles.getContainBackgroundStyle(t)}),Y=system.createClass({...classes.getHtml5VideoClasses(s?.aspectRatio,!m)}),z=system.createStyle({...styles.getYoutubeIframeStyle(x)}),M=system.createStyle({...styles.getHtml5VideoStyle(x)}),O=system.createClass({...classes.getWrapperYoutubeClasses()}),$=system.createClass({...classes.getIframeYoutubeClasses()}),P=React.useMemo(()=>{if(!helpers.showVideoType(g))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:M,className:Y});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(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:z,wrapperClass:O,iframeClass:$})},[o,g,Y,$,O,z,M]);return jsxRuntime.jsxs("div",{className:I,style:S,children:[jsxRuntime.jsxs("div",{ref:a,className:N,style:V,children:[jsxRuntime.jsx("div",{ref:i,className:L,style:E,children:P}),!!v&&jsxRuntime.jsx("div",{"aria-label":"Overlay",className:k,style:T})]}),jsxRuntime.jsx(Row.default,{className:w,style:q,setting:{layout:y,horizontalAlign:helpers.horizontalAlign(y,R,f),verticalAlign:n},styles:{verticalGutter:C,width:helpers.getWidth(j),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:H,srcSet:helpers.getBgImage(g),className:A,aspectRatio:core.getAspectRatioGlobalSize(h),style:B,alt:u,title:p,enableLazyLoadImage:!1,fallbackImg:helpers.fallbackImg})]})};exports.default=HeroBannerItem;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var Row_liquid=require("../../grid/components/row/Row.liquid.js"),core=require("@gem-sdk/core"),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:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var Row_liquid=require("../../grid/components/row/Row.liquid.js"),core=require("@gem-sdk/core"),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}=l??{},S=!y&&s,I=helpers.getAspectRatioSettings(t?.ratioOptions,t?.aspectRatio),f=helpers.getResponsiveSetting(n||{}).desktop,$=system.createStyle({...styles.getContainerStyle(l,t)}),R=system.createClass({...classes.getContainerClasses(t,l)}),j=system.createStyle({...styles.getOverlayStyle(l)}),B=system.createClass({...classes.getOverlayClasses(l)}),k=system.createStyle({...styles.getRowStyle(l)}),_=system.createClass({...classes.getRowClasses(l,t)}),A=system.createStyle({...styles.getAdaptiveStyle(l)}),w=system.createClass({...classes.getAdaptivePictureClasses()}),H=system.createClass({...classes.getAdaptiveClasses()}),T=system.createClass({...classes.getBackgroundClasses(q,S)}),V=system.createStyle({...helpers.getBackgroundImageHeroBanner(n,S,!1),...styles.getBackgroundStyle(l,m,"")}),E=system.createClass({...classes.getContainBackgroundClasses()}),L=system.createStyle({...styles.getContainBackgroundStyle(l)}),N=system.createClass({...classes.getHtml5VideoClasses(t?.aspectRatio,!1)}),Y=system.createStyle({...styles.getYoutubeIframeStyle(I)}),O=system.createClass({...classes.getWrapperYoutubeClasses()}),x=system.createStyle({...styles.getHtml5VideoStyle(I)}),z=system.createClass({...classes.getIframeYoutubeClasses()}),D=e=>system.createClass({...classes.getLazyBackgroundClasses(e)}),M=()=>{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:D(e),isDisableAspectStyle:!0,enableLazyLoadImage:s}))).join("")},P=()=>{if(!helpers.showVideoType(n))return;if(helpers$2.isRenderHtmlVideo(n))return HTML5Embed_liquid.default({uid:r?.uid,muted:!0,loop:f?.loop,controls:!1,autoplay:!0,src:f?.videoHtml5||"",title:"Video",style:x,className:N});let e=f?.video??"",s=helpers$3.getYoutubeVideoId(e),t=`&loop=false&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(f?.type==="video"&&f?.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:f?.lazyLoad??!0,preload:!0,style:Y,wrapperClass:O,iframeClass:z})};return core.template`
|
|
2
2
|
<div class="${R}" style="${$}">
|
|
3
3
|
<div
|
|
4
|
-
aria-label="Background Image"
|
|
5
|
-
role="banner"
|
|
6
4
|
class="${E}"
|
|
7
5
|
style="${L}"
|
|
8
6
|
>
|
|
@@ -10,9 +8,9 @@
|
|
|
10
8
|
${M()}
|
|
11
9
|
${P()}
|
|
12
10
|
</div>
|
|
13
|
-
${system.If(!!
|
|
11
|
+
${system.If(!!p,core.template`<div aria-label="Overlay" class="${B}" style="${j}"> </div>`)}
|
|
14
12
|
</div>
|
|
15
|
-
${Row_liquid.default({className:_,style:k,setting:{layout:o,horizontalAlign:helpers.horizontalAlign(o,v,b),verticalAlign:c},styles:{verticalGutter:
|
|
16
|
-
${AdaptiveImage_liquid.default({pictureClass:w,srcSet:helpers.getBgImage(
|
|
13
|
+
${Row_liquid.default({className:_,style:k,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})}
|
|
14
|
+
${AdaptiveImage_liquid.default({pictureClass:w,srcSet:helpers.getBgImage(n),className:H,...y&&constants.PRIORITY_LOAD_ATTRS,aspectRatio:core.getAspectRatioGlobalSize(C),style:A,alt:d,title:u,enableLazyLoadImage:s,fallbackImg:helpers.fallbackImg})}
|
|
17
15
|
</div>
|
|
18
16
|
`};exports.default=HeroBannerItem;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useCollection as
|
|
2
|
+
import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useCollection as t,useRenderMode as l}from"@gem-sdk/core";import s from"../../../grid/components/row/Row.js";import{createClass as r,createStyle as m,If as i}from"@gem-sdk/system";import{getClassContainerBanner as n,getClassContainerBackgoundImage as a,getClassOverlayBanner as c,getClassLinkBanner as p}from"./common/classes.js";import{getDimension as d,getStyleOverlay as f,getStyleContainerBackgoundImage as g}from"./common/styles.js";import{updateBackroundImageSrc as y}from"./common/helpers.js";import k from"../../../link/components/Link.js";let CollectionBanner=({builderAttrs:h,builderProps:j,setting:u,style:v,children:N,advanced:b})=>{let C=t(),{isPreviewSharePageMode:w,isEditMode:x}=l(),{link:B,layout:I,width:L,verticalGutter:M,verticalAlign:O,horizontalAlign:R}=u??{};y({setting:u,collectionSrc:C?.collectionMedia?.src});let S=r({...n({builderProps:j,setting:u,advanced:b})}),W=r({...a({setting:u})}),q=r({...c({setting:u})}),z=r({...p()}),A=m({...d({setting:u,style:v})}),D=m({...f({setting:u})}),E=m({...g({setting:u,hasCollectionImage:!1})}),F=!!B?.link&&!x&&!w;return e("div",{...h,className:S,style:A,children:[o("div",{className:W,style:E}),o("div",{"aria-label":"Overlay",className:q,style:D}),i(F,o(k,{setting:{href:B?.link,target:B?.target},className:z})),o(s,{setting:{layout:I,horizontalAlign:R,verticalAlign:O},styles:{verticalGutter:M,width:L,fullWidth:{desktop:!1,tablet:!1,mobile:!1}},style:v,children:N})]})};export{CollectionBanner as default};
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{template as e,RenderIf as l}from"@gem-sdk/core";import o from"../../../grid/components/row/Row.liquid.js";import{createClass as
|
|
3
|
-
<div ${{...
|
|
2
|
+
import{template as e,RenderIf as l}from"@gem-sdk/core";import o from"../../../grid/components/row/Row.liquid.js";import{createClass as t,createStyle as s}from"@gem-sdk/system";import{getClassContainerBanner as i,getClassContainerBackgoundImage as r,getClassOverlayBanner as m,getClassLinkBanner as a}from"./common/classes.js";import{getDimension as c,getStyleOverlay as n,getStyleContainerBackgoundImage as d}from"./common/styles.js";import{updateBackroundImageSrc as $,defaultImageUrl as f}from"./common/helpers.js";let CollectionBanner=({builderAttrs:g,builderProps:p,setting:v,style:y,children:k,rawChildren:u,advanced:h})=>{let{link:j,layout:b,width:C,verticalGutter:w,horizontalAlign:B,verticalAlign:q}=v??{};$({setting:v,collectionSrc:`{% if collection.image %} {{ collection.image.src | image_url}} {% else %} ${f} {% endif %}`});let x=t({...i({builderProps:p,setting:v,advanced:h})}),I=t({...r({setting:v})}),O=t({...m({setting:v})}),R=t({...a()}),S=s({...c({setting:v,style:y})}),W=s({...n({setting:v})}),_=s({...d({setting:v,hasCollectionImage:!1})});return e`
|
|
3
|
+
<div ${{...g}} class="${x}" style="${S}">
|
|
4
4
|
<div
|
|
5
|
-
|
|
6
|
-
role="banner"
|
|
7
|
-
class="${x}"
|
|
5
|
+
class="${I}"
|
|
8
6
|
style="${_}"
|
|
9
7
|
>
|
|
10
8
|
</div>
|
|
11
|
-
<div aria-label="Overlay"
|
|
12
|
-
${l(!!
|
|
13
|
-
href="${
|
|
14
|
-
target="${
|
|
9
|
+
<div aria-label="Overlay" class="${O}" style="${W}"> </div>
|
|
10
|
+
${l(!!j?.link,`<a
|
|
11
|
+
href="${j?.link}"
|
|
12
|
+
target="${j?.target}"
|
|
15
13
|
class="${R}"
|
|
16
14
|
> </a>`)}
|
|
17
|
-
${o({setting:{layout:
|
|
15
|
+
${o({setting:{layout:b,horizontalAlign:B,verticalAlign:q},styles:{verticalGutter:w,width:C,fullWidth:{desktop:!1,tablet:!1,mobile:!1}},style:y,children:k,rawChildren:u})}
|
|
18
16
|
</div>
|
|
19
17
|
`};export{CollectionBanner as default};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useMemo as t}from"react";import{useEditorMode as
|
|
2
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useMemo as t}from"react";import{useEditorMode as s,filterToolbarPreview as l,getAspectRatioGlobalSize as r}from"@gem-sdk/core";import i from"../../grid/components/row/Row.js";import{createStyle as m,createClass as a}from"@gem-sdk/system";import p from"../../image/components/AdaptiveImage.js";import d from"../../video/components/HTML5Embed.js";import{getContainerStyle as n,getOverlayStyle as c,getRowStyle as y,getAdaptiveStyle as f,getBackgroundStyle as u,getContainBackgroundStyle as v,getYoutubeIframeStyle as h,getHtml5VideoStyle as b}from"../common/styles.js";import{getContainerClasses as g,getOverlayClasses as j,getRowClasses as N,getAdaptivePictureClasses as H,getAdaptiveClasses as k,getBackgroundClasses as w,getContainBackgroundClasses as T,getHtml5VideoClasses as C,getWrapperYoutubeClasses as I,getIframeYoutubeClasses as L}from"../common/classes.js";import{getAspectRatioSettings as z,getBackgroundImageHeroBanner as B,showVideoType as R,horizontalAlign as E,getWidth as x,scrollToContentBanner as A,getBgImage as O,fallbackImg as V}from"../common/helpers.js";import $ from"../../video/components/LiteYouTubeEmbed.js";import{getYoutubeVideoId as M,youtubeVideoRegex as S}from"../../video/common/helpers.js";let HeroBannerItem=W=>{s();let{setting:Y,styles:q,children:D,elementRef:F,transform:G,dataVideo:J,bgRef:K,isShowVideoHtml5:P,layoutResponsive:Q}=W,{layout:U,verticalAlign:X,enableParallax:Z,alt:_,title:ee}=Y??{},{background:eo,overlayColor:et,verticalGutter:es,sizeSetting:el,contentWidth:er,hoverEffect:ei,contentPosition1Col:em,contentPosition2Col:ea}=q??{},ep=z(Y?.ratioOptions,Y?.aspectRatio),ed=m({...n(q,Y)}),en=a({...g(Y,q)}),ec=m({...c(q)}),ey=a({...j(q)}),ef=m({...y(q)}),eu=a({...N(q,Y)}),ev=m({...f(q)}),eh=a({...H()}),eb=a({...k()}),eg=a({...w(ei,!1)}),ej=m({...B(eo,!1,!0),...u(q,Z,G)}),eN=a({...T()}),eH=m({...v(q)}),ek=a({...C(Y?.aspectRatio,!P)}),ew=m({...h(ep)}),eT=m({...b(ep)}),eC=a({...I()}),eI=a({...L()}),eL=t(()=>{if(!R(eo))return;if(J?.videoType==="html5"&&!J.videoHtml5||J?.videoType==="youtube"&&!J.video)return null;if(J?.type==="video"&&J?.videoType==="html5"&&J?.videoHtml5)return e(d,{muted:!0,loop:J?.loop,controls:!1,autoplay:!0,src:J?.videoHtml5||"",title:"Video",style:eT,className:ek});let o=J?.video??"",t=M(o),s=J?.loop?1:0,l=`&loop=${s}&playlist=${t}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(J?.type==="video"&&J?.videoType==="youtube"&&t&&S.test(o))return e($,{id:t,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:l,adNetwork:!1,noCookie:!0,muted:!0,lazy:J?.lazyLoad??!0,style:ew,wrapperClass:eC,iframeClass:eI})},[J,eo,ek,eI,eC,ew,eT]);return o("div",{className:en,style:ed,children:[o("div",{ref:F,className:eN,style:eH,children:[e("div",{ref:K,className:eg,style:ej,children:eL}),!!et&&e("div",{"aria-label":"Overlay",className:ey,style:ec})]}),e(i,{className:eu,style:ef,setting:{layout:U,horizontalAlign:E(U,em,ea),verticalAlign:X},styles:{verticalGutter:es,width:x(er),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},hiddenEmptyCol:Q?.cols?.length===1,onBlur:e=>A(e),children:l(D)}),e(p,{pictureClass:eh,srcSet:O(eo),className:eb,aspectRatio:r(el),style:ev,alt:_,title:ee,enableLazyLoadImage:!1,fallbackImg:V})]})};export{HeroBannerItem as default};
|
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
import e from"../../grid/components/row/Row.liquid.js";import{template as o,getAspectRatioGlobalSize as s,DEVICES as t,getResponsiveValueByScreen as i}from"@gem-sdk/core";import{createStyle as r,createClass as m,If as
|
|
1
|
+
import e from"../../grid/components/row/Row.liquid.js";import{template as o,getAspectRatioGlobalSize as s,DEVICES as t,getResponsiveValueByScreen as i}from"@gem-sdk/core";import{createStyle as r,createClass as m,If as l}from"@gem-sdk/system";import a from"../../image/components/AdaptiveImage.liquid.js";import p from"../../video/components/HTML5Embed.liquid.js";import{getContainerStyle as d,getOverlayStyle as n,getRowStyle as c,getAdaptiveStyle as u,getBackgroundStyle as f,getContainBackgroundStyle as y,getYoutubeIframeStyle as v,getHtml5VideoStyle as j}from"../common/styles.js";import{getContainerClasses as $,getOverlayClasses as g,getRowClasses as b,getAdaptivePictureClasses as h,getAdaptiveClasses as w,getBackgroundClasses as k,getContainBackgroundClasses as N,getHtml5VideoClasses as q,getWrapperYoutubeClasses as H,getIframeYoutubeClasses as C,getLazyBackgroundClasses as I}from"../common/classes.js";import{getAspectRatioSettings as R,getBackgroundImageHeroBanner as z,horizontalAlign as A,getWidth as B,getBgImage as L,fallbackImg as T,getEnableBgImageByDevice as x,showVideoType as E,getResponsiveSetting as O}from"../common/helpers.js";import{getImageSrc as S}from"../../image/common/helpers.js";import V from"../../image/components/NextImage.liquid.js";import D from"../../video/components/LiteYouTubeEmbed.liquid.js";import{getYoutubeVideoId as M,youtubeVideoRegex as W}from"../../video/common/helpers.js";import{isRenderHtmlVideo as Y}from"../../grid/components/row/common/helpers.js";import{PRIORITY_LOAD_ATTRS as F}from"../../image/constants.js";let HeroBannerItem=G=>{let{enableLazyLoadImage:J=!0,setting:K,styles:P,children:Q,builderProps:U,rawChildren:X}=G,{layout:Z,verticalAlign:_,enableParallax:ee,alt:eo,title:es,preload:et}=K??{},{background:ei,overlayColor:er,verticalGutter:em,sizeSetting:el,contentWidth:ea,hoverEffect:ep,contentPosition1Col:ed,contentPosition2Col:en}=P??{},ec=!et&&J,eu=R(K?.ratioOptions,K?.aspectRatio),ef=O(ei||{}).desktop,ey=r({...d(P,K)}),ev=m({...$(K,P)}),ej=r({...n(P)}),e$=m({...g(P)}),eg=r({...c(P)}),eb=m({...b(P,K)}),eh=r({...u(P)}),ew=m({...h()}),ek=m({...w()}),eN=m({...k(ep,ec)}),eq=r({...z(ei,ec,!1),...f(P,ee,"")}),eH=m({...N()}),eC=r({...y(P)}),eI=m({...q(K?.aspectRatio,!1)}),eR=r({...v(eu)}),ez=m({...H()}),eA=r({...j(eu)}),eB=m({...C()}),eL=e=>m({...I(e)}),eT=()=>{if(!et)return t.map(e=>l(x(e,ei),V({src:S(i(L(ei),e),e),alt:eo,title:es,className:eL(e),isDisableAspectStyle:!0,enableLazyLoadImage:J}))).join("")},ex=()=>{if(!E(ei))return;if(Y(ei))return p({uid:U?.uid,muted:!0,loop:ef?.loop,controls:!1,autoplay:!0,src:ef?.videoHtml5||"",title:"Video",style:eA,className:eI});let e=ef?.video??"",o=M(e),s=`&loop=false&playlist=${o}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(ef?.type==="video"&&ef?.videoType==="youtube"&&o&&W.test(e))return D({uid:U?.uid,id:o,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:s,adNetwork:!1,noCookie:!0,muted:!0,lazy:ef?.lazyLoad??!0,preload:!0,style:eR,wrapperClass:ez,iframeClass:eB})};return o`
|
|
2
2
|
<div class="${ev}" style="${ey}">
|
|
3
3
|
<div
|
|
4
|
-
aria-label="Background Image"
|
|
5
|
-
role="banner"
|
|
6
4
|
class="${eH}"
|
|
7
|
-
style="${
|
|
5
|
+
style="${eC}"
|
|
8
6
|
>
|
|
9
7
|
<div class="${eN}" style="${eq}">
|
|
10
8
|
${eT()}
|
|
11
9
|
${ex()}
|
|
12
10
|
</div>
|
|
13
|
-
${
|
|
11
|
+
${l(!!er,o`<div aria-label="Overlay" class="${e$}" style="${ej}"> </div>`)}
|
|
14
12
|
</div>
|
|
15
|
-
${e({className:eb,style:
|
|
16
|
-
${
|
|
13
|
+
${e({className:eb,style:eg,setting:{layout:Z,horizontalAlign:A(Z,ed,en),verticalAlign:_},styles:{verticalGutter:em,width:B(ea),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:Q,rawChildren:X})}
|
|
14
|
+
${a({pictureClass:ew,srcSet:L(ei),className:ek,...et&&F,aspectRatio:s(el),style:eh,alt:eo,title:es,enableLazyLoadImage:J,fallbackImg:T})}
|
|
17
15
|
</div>
|
|
18
16
|
`};export{HeroBannerItem as default};
|