@gem-sdk/components 19.1.0-staging.28 → 19.1.0-staging.29

package/dist/cjs/sticky/common/styles.js

@@ -1 +1 @@
-"use strict";var e=require("@gem-sdk/core");require("react/jsx-runtime"),require("react");var t=require("../../common/const.js"),l=require("../../helpers.js"),r=require("../settings/configs/translate.js"),a=require("./helper.js");const o=e=>"top"==e?"sticky":"fixed",s=(e,t,l,r)=>{let s={[`--top${e}`]:"auto",[`--${l+e}`]:"0",[`--pos${e}`]:o(l)};switch(t){case"after-first-cart-button":case"after-first-scroll":s[`--d${e}`]="none";break;case"always":s[`--d${e}`]="block";break;case"between-sections":s[`--d${e}`]=a.hasSectionValue({value:r})?"none":"block"}return s},i=(e,t,l)=>({...s("",e?.desktop,t?.desktop,l),...s("-tablet",e?.tablet??e?.desktop,t?.tablet??t?.desktop,l),...s("-mobile",e?.mobile??e?.tablet??e?.desktop,t?.mobile??t?.tablet??t?.desktop,l)}),p=(e,t)=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),b=e=>({...p(e?.desktop,""),...p(e?.tablet??e?.desktop,"-tablet"),...p(e?.mobile??e?.tablet??e?.desktop,"-mobile")}),n=e=>{let t={};return["--pt","--pb","--pr","--pl","--pt-mobile","--pb-mobile","--pr-mobile","--pl-mobile","--pt-tablet","--pb-tablet","--pr-tablet","--pl-tablet"].forEach(l=>{e?.[l]&&(t[l]=e[l])}),t},c=e=>{let t={...e};return["--pt","--pb","--pr","--pl","--pt-mobile","--pb-mobile","--pr-mobile","--pl-mobile","--pt-tablet","--pb-tablet","--pr-tablet","--pl-tablet"].forEach(e=>{delete t?.[e]}),t};exports.displayConditionStyle=i,exports.filterStyles=c,exports.getContainerStyles=e=>{let{position:l,display:r,showFrom:a}=e;return{margin:"0 auto",...b(l),...i(r,l,a),"z-index":t.ELEMENT_Z_INDEX.STICKY}},exports.getContentStyles=({setting:t,style:a,uid:o,pageContext:s,type:i="React"})=>{let{background:p}=t||{},b="Liquid"===i?l.getBackgroundTranslated({background:p,uid:o,enableTranslate:!!r.Sticky?.background?.id,pageContext:s,isTranslateVideo:!1}):p;return{...e.makeStyle({m:"0 auto"}),...n(a),...c(a),...e.getStyleBackgroundByDevice(b||p),...e.getGradientImageBgrStyleByDevice(b||p)}},exports.getDisplayStyle=s,exports.getStylePadding=n;
+"use strict";var e=require("@gem-sdk/core");require("react/jsx-runtime"),require("react");var t=require("../../common/const.js"),l=require("../../helpers.js"),r=require("../settings/configs/translate.js");const a=e=>"top"==e?"sticky":"fixed",o=(e,t,l)=>{let r={[`--top${e}`]:"auto",[`--${l+e}`]:"0",[`--pos${e}`]:a(l)};switch(t){case"after-first-cart-button":case"after-first-scroll":case"between-sections":r[`--d${e}`]="none";break;case"always":r[`--d${e}`]="block"}return r},s=(e,t)=>({...o("",e?.desktop,t?.desktop),...o("-tablet",e?.tablet??e?.desktop,t?.tablet??t?.desktop),...o("-mobile",e?.mobile??e?.tablet??e?.desktop,t?.mobile??t?.tablet??t?.desktop)}),i=(e,t)=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),p=e=>({...i(e?.desktop,""),...i(e?.tablet??e?.desktop,"-tablet"),...i(e?.mobile??e?.tablet??e?.desktop,"-mobile")}),b=e=>{let t={};return["--pt","--pb","--pr","--pl","--pt-mobile","--pb-mobile","--pr-mobile","--pl-mobile","--pt-tablet","--pb-tablet","--pr-tablet","--pl-tablet"].forEach(l=>{e?.[l]&&(t[l]=e[l])}),t},n=e=>{let t={...e};return["--pt","--pb","--pr","--pl","--pt-mobile","--pb-mobile","--pr-mobile","--pl-mobile","--pt-tablet","--pb-tablet","--pr-tablet","--pl-tablet"].forEach(e=>{delete t?.[e]}),t};exports.displayConditionStyle=s,exports.filterStyles=n,exports.getContainerStyles=e=>{let{position:l,display:r}=e;return{margin:"0 auto",...p(l),...s(r,l),"z-index":t.ELEMENT_Z_INDEX.STICKY}},exports.getContentStyles=({setting:t,style:a,uid:o,pageContext:s,type:i="React"})=>{let{background:p}=t||{},c="Liquid"===i?l.getBackgroundTranslated({background:p,uid:o,enableTranslate:!!r.Sticky?.background?.id,pageContext:s,isTranslateVideo:!1}):p;return{...e.makeStyle({m:"0 auto"}),...b(a),...n(a),...e.getStyleBackgroundByDevice(c||p),...e.getGradientImageBgrStyleByDevice(c||p)}},exports.getDisplayStyle=o,exports.getStylePadding=b;

package/dist/cjs/sticky/components/Sticky.liquid.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("../../helpers.js"),s=require("@gem-sdk/system"),a=require("../common/styles.js"),r=require("../common/classes.js");exports.default=({children:i,builderAttrs:l,setting:d,style:n,builderProps:o,advanced:p,pageContext:c})=>{let{width:g,position:m,display:y,scrollPercent:u,showFrom:$,hideFrom:k,preloadBgImage:f,background:S,isScrollToTop:b}=d??{},v=p?.d,C=s.createStyle({...e.makeStyleResponsive("w",g),...a.getContainerStyles({position:m,display:y,showFrom:$})}),R=s.createStyle(a.getContentStyles({setting:d,style:n,uid:o?.uid,pageContext:c??{},type:"Liquid"})),j=s.createClass(r.getContainerClasses({uid:o?.uid,isScrollToTop:b,cssClass:p?.cssClass,isLiquid:!0})),q=s.createStateOrContext({uid:o?.uid,setting:{display:{desktop:y?.desktop,tablet:y?.tablet??y?.desktop,mobile:y?.mobile??y?.tablet??y?.desktop},scrollPercent:u,showFrom:$,hideFrom:k},advanced:{d:v}}),I=`.drawer-page-content {
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("../../helpers.js"),s=require("@gem-sdk/system"),a=require("../common/styles.js"),r=require("../common/classes.js");exports.default=({children:i,builderAttrs:l,setting:d,style:n,builderProps:o,advanced:p,pageContext:c})=>{let{width:g,position:m,display:y,scrollPercent:u,showFrom:$,hideFrom:k,preloadBgImage:f,background:S,isScrollToTop:b}=d??{},v=p?.d,C=s.createStyle({...e.makeStyleResponsive("w",g),...a.getContainerStyles({position:m,display:y})}),R=s.createStyle(a.getContentStyles({setting:d,style:n,uid:o?.uid,pageContext:c??{},type:"Liquid"})),j=s.createClass(r.getContainerClasses({uid:o?.uid,isScrollToTop:b,cssClass:p?.cssClass,isLiquid:!0})),q=s.createStateOrContext({uid:o?.uid,setting:{display:{desktop:y?.desktop,tablet:y?.tablet??y?.desktop,mobile:y?.mobile??y?.tablet??y?.desktop},scrollPercent:u,showFrom:$,hideFrom:k},advanced:{d:v}}),I=`.drawer-page-content {
        transform: none !important;
       -webkit-transform: none !important;
   }`;return e.template`

package/dist/cjs/sticky/hooks/useSticky.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("react"),o=require("../common/helper.js");exports.default=i=>{let{width:n,position:s,display:l,scrollPercent:r,showFrom:a,hideFrom:c}=i??{},d=e.makeStyleResponsive("w",n),u=e.usePageStore(e=>"interaction"===e.sidebarMode),b=e.useCurrentDevice(),p=e.useEditorMode(),[m,k]=t.useState(!1),w=e.useStickyStore(e=>e.getFirstVisibleElement(b)),f=({position:e,device:t})=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),v=t.useMemo(()=>({...f({position:s?.desktop,device:""}),...f({position:s?.tablet??s?.desktop,device:"-tablet"}),...f({position:s?.mobile??s?.tablet??s?.desktop,device:"-mobile"})}),[s?.desktop,s?.mobile,s?.tablet]),S=t.useMemo(()=>{if(u&&s?.[b]==="top")return"40px"},[b,u,s]),[E,h]=t.useState(null),V=a?.link,g=c?.link;t.useEffect(()=>{if(h(null),"edit"===p)return;let e=[l?.desktop,l?.tablet,l?.mobile],t=e.some(e=>"after-first-scroll"===e||"between-sections"===e);if(!t)return;let i=()=>({isScrollPercentReached:o.getScrollPercent()>=(r??0),isBetweenSectionsVisible:o.isVisibleBetweenSections({showFrom:{link:V},hideFrom:{link:g}})}),n=()=>{let e=i();h(t=>t&&t.isScrollPercentReached===e.isScrollPercentReached&&t.isBetweenSectionsVisible===e.isBetweenSectionsVisible?t:e)};n();let s=0,a=()=>{s||(s=requestAnimationFrame(()=>{s=0,n()}))};return window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a),window.addEventListener("orientationchange",a),()=>{s&&cancelAnimationFrame(s),window.removeEventListener("scroll",a),window.removeEventListener("resize",a),window.removeEventListener("orientationchange",a)}},[p,l?.desktop,l?.tablet,l?.mobile,V,g,r]);let L=t.useMemo(()=>{let e=({displayValue:e})=>{switch(e){case"after-first-cart-button":return m?"block":"none";case"after-first-scroll":if(!E)return"none";return E.isScrollPercentReached?"block":"none";case"between-sections":if(!E)return o.hasSectionValue({value:a})?"none":"block";return E.isBetweenSectionsVisible?"block":"none";default:return"block"}},t=l?.desktop,i=l?.tablet??t,n=l?.mobile??i;return{"--d":e({displayValue:t}),"--d-tablet":e({displayValue:i}),"--d-mobile":e({displayValue:n})}},[l?.desktop,l?.mobile,l?.tablet,g,V,E,m]),M=t.useMemo(()=>({"--top":S??"auto","--top-tablet":S??"auto","--top-mobile":S??"auto",[`--${s?.desktop}`]:S??"0px",[`--${s?.tablet??s?.desktop}-tablet`]:S??"0px",[`--${s?.mobile??s?.tablet??s?.desktop}-mobile`]:S??"0px"}),[S,s?.desktop,s?.mobile,s?.tablet]),x=({position:e})=>"top"==e?"sticky":"fixed",y=t.useMemo(()=>({"--pos":x({position:s?.desktop}),"--pos-tablet":x({position:s?.tablet??s?.desktop}),"--pos-mobile":x({position:s?.mobile??s?.tablet??s?.desktop})}),[s?.desktop,s?.mobile,s?.tablet]);return t.useEffect(()=>{if(!w)return;let e=null,t=()=>{e=null,k(w.getBoundingClientRect().top<=0)},o=()=>{null===e&&(e=requestAnimationFrame(t))};return t(),window.addEventListener("scroll",o,{passive:!0}),()=>{window.removeEventListener("scroll",o),null!==e&&cancelAnimationFrame(e)}},[w]),t.useEffect(()=>{k(!1)},[b]),{w:d,displayStyle:M,positionStyle:y,getCSSAlign:v,makeDisplaySettingStyles:L}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("react"),o=require("../common/helper.js");exports.default=i=>{let{width:l,position:s,display:n,scrollPercent:r,showFrom:a,hideFrom:d}=i??{},c=e.makeStyleResponsive("w",l),b=e.usePageStore(e=>"interaction"===e.sidebarMode),u=e.useCurrentDevice(),p=e.useEditorMode(),[m,k]=t.useState(!1),v=e.useStickyStore(e=>e.getFirstVisibleElement(u)),w=({position:e,device:t})=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),f=t.useMemo(()=>({...w({position:s?.desktop,device:""}),...w({position:s?.tablet??s?.desktop,device:"-tablet"}),...w({position:s?.mobile??s?.tablet??s?.desktop,device:"-mobile"})}),[s?.desktop,s?.mobile,s?.tablet]),S=t.useMemo(()=>{if(b&&s?.[u]==="top")return"40px"},[u,b,s]),[E,V]=t.useState(null);t.useEffect(()=>{if(V(null),"edit"===p)return;let t=[n?.desktop,n?.tablet,n?.mobile],i=t.some(e=>"after-first-scroll"===e||"between-sections"===e);if(!i)return;let l=()=>{let t=o.getScrollPercent(),i=i=>({isScrollPercentReached:t>=(e.getResponsiveValueByScreen(r,i,0)??0),isBetweenSectionsVisible:o.isVisibleBetweenSections({showFrom:e.getResponsiveValueByScreen(a,i),hideFrom:e.getResponsiveValueByScreen(d,i)})});return{desktop:i("desktop"),tablet:i("tablet"),mobile:i("mobile")}},s=()=>{let t=l();V(o=>o&&e.DEVICES.every(e=>o[e].isScrollPercentReached===t[e].isScrollPercentReached&&o[e].isBetweenSectionsVisible===t[e].isBetweenSectionsVisible)?o:t)};s();let c=0,b=()=>{c||(c=requestAnimationFrame(()=>{c=0,s()}))};return window.addEventListener("scroll",b,{passive:!0}),window.addEventListener("resize",b),window.addEventListener("orientationchange",b),()=>{c&&cancelAnimationFrame(c),window.removeEventListener("scroll",b),window.removeEventListener("resize",b),window.removeEventListener("orientationchange",b)}},[p,n?.desktop,n?.tablet,n?.mobile,a?.desktop?.link,a?.tablet?.link,a?.mobile?.link,d?.desktop?.link,d?.tablet?.link,d?.mobile?.link,r?.desktop,r?.tablet,r?.mobile]);let g=t.useMemo(()=>{let e=({displayValue:e,device:t})=>{switch(e){case"after-first-cart-button":return m?"block":"none";case"after-first-scroll":if(!E)return"none";return E[t].isScrollPercentReached?"block":"none";case"between-sections":if(!E)return"none";return E[t].isBetweenSectionsVisible?"block":"none";default:return"block"}},t=n?.desktop,o=n?.tablet??t,i=n?.mobile??o;return{"--d":e({displayValue:t,device:"desktop"}),"--d-tablet":e({displayValue:o,device:"tablet"}),"--d-mobile":e({displayValue:i,device:"mobile"})}},[n?.desktop,n?.mobile,n?.tablet,d,a,E,m]),y=t.useMemo(()=>({"--top":S??"auto","--top-tablet":S??"auto","--top-mobile":S??"auto",[`--${s?.desktop}`]:S??"0px",[`--${s?.tablet??s?.desktop}-tablet`]:S??"0px",[`--${s?.mobile??s?.tablet??s?.desktop}-mobile`]:S??"0px"}),[S,s?.desktop,s?.mobile,s?.tablet]),h=({position:e})=>"top"==e?"sticky":"fixed",B=t.useMemo(()=>({"--pos":h({position:s?.desktop}),"--pos-tablet":h({position:s?.tablet??s?.desktop}),"--pos-mobile":h({position:s?.mobile??s?.tablet??s?.desktop})}),[s?.desktop,s?.mobile,s?.tablet]);return t.useEffect(()=>{if(!v)return;let e=null,t=()=>{e=null,k(v.getBoundingClientRect().top<=0)},o=()=>{null===e&&(e=requestAnimationFrame(t))};return t(),window.addEventListener("scroll",o,{passive:!0}),()=>{window.removeEventListener("scroll",o),null!==e&&cancelAnimationFrame(e)}},[v]),t.useEffect(()=>{k(!1)},[u]),{w:c,displayStyle:y,positionStyle:B,getCSSAlign:f,makeDisplaySettingStyles:g}};

package/dist/cjs/sticky/settings/configs/settings-v2.js

@@ -1 +1 @@
-"use strict";exports.StickySettingsV2=[{id:"setting",controls:[{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0},tablet:{default:!0},mobile:{default:!0}}},{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,isRowWith:!0,devices:{desktop:{default:"100%"}},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"1200px",showValue:!0}]},{id:"background",type:"background-media",ignoreReRender:!0,devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"#dddddd",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",preload:!1,loop:!0}}}},{id:"preloadBgImage",type:"toggle",label:"Preload Image",default:!1},{id:"position",label:"Layout",type:"layout-selector",iconViewBox:"0 0 76 48",itemPerRow:2,itemSpacing:"large",enableItemBackground:!0,enableItemOpacity:!0,options:[{label:"Bottom",value:"bottom",iconName:"gp-sticky-position-bottom"},{label:"Top",value:"top",iconName:"gp-sticky-position-top"}],devices:{desktop:{default:"bottom"}}},{id:"display",label:"Display",type:"select",devices:{desktop:{default:"always"}},options:[{label:"Always show",value:"always"},{label:"After first cart button",value:"after-first-cart-button"},{label:"After scrolling down",value:"after-first-scroll"},{label:"Between sections",value:"between-sections"}]},{id:"scrollPercent",type:"input:unit",units:["%"],min:0,max:100,placeholder:"0%",isNumber:!0},{id:"showFrom",type:"pick-link",optionConfig:{"scroll-to":{popoverLabel:"Show Sticky ATC start from",title:"",hideScrollToTop:!0}},default:{type:"scroll-to",link:""},isHiddenOpenLinkSelect:!0,hiddenOptions:{"stay-on-page":!0,"open-page":!0,"open-url":!0,"open-popup":!0,"go-to-sales-page":!0}},{id:"hideFrom",type:"pick-link",optionConfig:{"scroll-to":{popoverLabel:"Hide Sticky ATC start from",title:"",hideScrollToTop:!0}},default:{type:"scroll-to",link:""},isHiddenOpenLinkSelect:!0,hiddenOptions:{"stay-on-page":!0,"open-page":!0,"open-url":!0,"open-popup":!0,"go-to-sales-page":!0}},{id:"isScrollToTop",type:"toggle",default:!1}]}];
+"use strict";exports.StickySettingsV2=[{id:"setting",controls:[{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0},tablet:{default:!0},mobile:{default:!0}}},{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,isRowWith:!0,devices:{desktop:{default:"100%"}},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"1200px",showValue:!0}]},{id:"background",type:"background-media",ignoreReRender:!0,devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"#dddddd",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",preload:!1,loop:!0}}}},{id:"preloadBgImage",type:"toggle",label:"Preload Image",default:!1},{id:"position",label:"Layout",type:"layout-selector",iconViewBox:"0 0 76 48",itemPerRow:2,itemSpacing:"large",enableItemBackground:!0,enableItemOpacity:!0,options:[{label:"Bottom",value:"bottom",iconName:"gp-sticky-position-bottom"},{label:"Top",value:"top",iconName:"gp-sticky-position-top"}],devices:{desktop:{default:"bottom"}}},{id:"display",label:"Display",type:"select",devices:{desktop:{default:"always"}},options:[{label:"Always show",value:"always"},{label:"After first cart button",value:"after-first-cart-button"},{label:"After scrolling down",value:"after-first-scroll"},{label:"Between sections",value:"between-sections"}]},{id:"scrollPercent",type:"input:unit",units:["%"],showDefaultUnit:!0,min:0,max:100,placeholder:"0%",isNumber:!0,devices:{desktop:{}}},{id:"showFrom",type:"pick-link",optionConfig:{"scroll-to":{popoverLabel:"Show Sticky ATC start from",title:"",hideScrollToTop:!0}},devices:{desktop:{default:{type:"scroll-to",link:""}}},isHiddenOpenLinkSelect:!0,hiddenOptions:{"stay-on-page":!0,"open-page":!0,"open-url":!0,"open-popup":!0,"go-to-sales-page":!0}},{id:"hideFrom",type:"pick-link",optionConfig:{"scroll-to":{popoverLabel:"Hide Sticky ATC start from",title:"",hideScrollToTop:!0}},devices:{desktop:{default:{type:"scroll-to",link:""}}},isHiddenOpenLinkSelect:!0,hiddenOptions:{"stay-on-page":!0,"open-page":!0,"open-url":!0,"open-popup":!0,"go-to-sales-page":!0}},{id:"isScrollToTop",type:"toggle",default:!1}]}];

package/dist/esm/sticky/common/styles.js

@@ -1 +1 @@
-import{getGradientImageBgrStyleByDevice as t,getStyleBackgroundByDevice as e,makeStyle as l}from"@gem-sdk/core";import"react/jsx-runtime";import"react";import{ELEMENT_Z_INDEX as o}from"../../common/const.js";import{getBackgroundTranslated as r}from"../../helpers.js";import{Sticky as a}from"../settings/configs/translate.js";import{hasSectionValue as p}from"./helper.js";let s=t=>"top"==t?"sticky":"fixed",b=(t,e,l,o)=>{let r={[`--top${t}`]:"auto",[`--${l+t}`]:"0",[`--pos${t}`]:s(l)};switch(e){case"after-first-cart-button":case"after-first-scroll":r[`--d${t}`]="none";break;case"always":r[`--d${t}`]="block";break;case"between-sections":r[`--d${t}`]=p({value:o})?"none":"block"}return r},i=(t,e,l)=>({...b("",t?.desktop,e?.desktop,l),...b("-tablet",t?.tablet??t?.desktop,e?.tablet??e?.desktop,l),...b("-mobile",t?.mobile??t?.tablet??t?.desktop,e?.mobile??e?.tablet??e?.desktop,l)}),n=(t,e)=>({[`--left${e}`]:"top"==t?"0":"50%",[`--t${e}`]:"top"==t?"unset":"translateX(-50%)"}),m=t=>({...n(t?.desktop,""),...n(t?.tablet??t?.desktop,"-tablet"),...n(t?.mobile??t?.tablet??t?.desktop,"-mobile")}),d=t=>{let{position:e,display:l,showFrom:r}=t;return{margin:"0 auto",...m(e),...i(l,e,r),"z-index":o.STICKY}},c=({setting:o,style:p,uid:s,pageContext:b,type:i="React"})=>{let{background:n}=o||{},m="Liquid"===i?r({background:n,uid:s,enableTranslate:!!a?.background?.id,pageContext:b,isTranslateVideo:!1}):n;return{...l({m:"0 auto"}),...k(p),...f(p),...e(m||n),...t(m||n)}},k=t=>{let e={};return["--pt","--pb","--pr","--pl","--pt-mobile","--pb-mobile","--pr-mobile","--pl-mobile","--pt-tablet","--pb-tablet","--pr-tablet","--pl-tablet"].forEach(l=>{t?.[l]&&(e[l]=t[l])}),e},f=t=>{let e={...t};return["--pt","--pb","--pr","--pl","--pt-mobile","--pb-mobile","--pr-mobile","--pl-mobile","--pt-tablet","--pb-tablet","--pr-tablet","--pl-tablet"].forEach(t=>{delete e?.[t]}),e};export{i as displayConditionStyle,f as filterStyles,d as getContainerStyles,c as getContentStyles,b as getDisplayStyle,k as getStylePadding};
+import{getGradientImageBgrStyleByDevice as t,getStyleBackgroundByDevice as e,makeStyle as l}from"@gem-sdk/core";import"react/jsx-runtime";import"react";import{ELEMENT_Z_INDEX as o}from"../../common/const.js";import{getBackgroundTranslated as a}from"../../helpers.js";import{Sticky as r}from"../settings/configs/translate.js";let p=t=>"top"==t?"sticky":"fixed",s=(t,e,l)=>{let o={[`--top${t}`]:"auto",[`--${l+t}`]:"0",[`--pos${t}`]:p(l)};switch(e){case"after-first-cart-button":case"after-first-scroll":case"between-sections":o[`--d${t}`]="none";break;case"always":o[`--d${t}`]="block"}return o},i=(t,e)=>({...s("",t?.desktop,e?.desktop),...s("-tablet",t?.tablet??t?.desktop,e?.tablet??e?.desktop),...s("-mobile",t?.mobile??t?.tablet??t?.desktop,e?.mobile??e?.tablet??e?.desktop)}),b=(t,e)=>({[`--left${e}`]:"top"==t?"0":"50%",[`--t${e}`]:"top"==t?"unset":"translateX(-50%)"}),n=t=>({...b(t?.desktop,""),...b(t?.tablet??t?.desktop,"-tablet"),...b(t?.mobile??t?.tablet??t?.desktop,"-mobile")}),m=t=>{let{position:e,display:l}=t;return{margin:"0 auto",...n(e),...i(l,e),"z-index":o.STICKY}},d=({setting:o,style:p,uid:s,pageContext:i,type:b="React"})=>{let{background:n}=o||{},m="Liquid"===b?a({background:n,uid:s,enableTranslate:!!r?.background?.id,pageContext:i,isTranslateVideo:!1}):n;return{...l({m:"0 auto"}),...c(p),...f(p),...e(m||n),...t(m||n)}},c=t=>{let e={};return["--pt","--pb","--pr","--pl","--pt-mobile","--pb-mobile","--pr-mobile","--pl-mobile","--pt-tablet","--pb-tablet","--pr-tablet","--pl-tablet"].forEach(l=>{t?.[l]&&(e[l]=t[l])}),e},f=t=>{let e={...t};return["--pt","--pb","--pr","--pl","--pt-mobile","--pb-mobile","--pr-mobile","--pl-mobile","--pt-tablet","--pb-tablet","--pr-tablet","--pl-tablet"].forEach(t=>{delete e?.[t]}),e};export{i as displayConditionStyle,f as filterStyles,m as getContainerStyles,d as getContentStyles,s as getDisplayStyle,c as getStylePadding};

package/dist/esm/sticky/components/Sticky.liquid.js

@@ -1,4 +1,4 @@
-import{makeStyleResponsive as s,RenderIf as e,isLocalEnv as t,baseAssetURL as i,template as r}from"@gem-sdk/core";import{getSettingPreloadData as a}from"../../helpers.js";import{createStyle as l,createClass as d,createStateOrContext as o}from"@gem-sdk/system";import{getContainerStyles as p,getContentStyles as m}from"../common/styles.js";import{getContainerClasses as c}from"../common/classes.js";let n=({children:n,builderAttrs:g,setting:$,style:k,builderProps:y,advanced:f,pageContext:u})=>{let{width:b,position:v,display:S,scrollPercent:j,showFrom:h,hideFrom:E,preloadBgImage:w,background:C,isScrollToTop:q}=$??{},x=f?.d,A=l({...s("w",b),...p({position:v,display:S,showFrom:h})}),G=l(m({setting:$,style:k,uid:y?.uid,pageContext:u??{},type:"Liquid"})),L=d(c({uid:y?.uid,isScrollToTop:q,cssClass:f?.cssClass,isLiquid:!0})),N=o({uid:y?.uid,setting:{display:{desktop:S?.desktop,tablet:S?.tablet??S?.desktop,mobile:S?.mobile??S?.tablet??S?.desktop},scrollPercent:j,showFrom:h,hideFrom:E},advanced:{d:x}}),O=`.drawer-page-content {
+import{makeStyleResponsive as s,RenderIf as e,isLocalEnv as t,baseAssetURL as i,template as r}from"@gem-sdk/core";import{getSettingPreloadData as a}from"../../helpers.js";import{createStyle as l,createClass as d,createStateOrContext as o}from"@gem-sdk/system";import{getContainerStyles as p,getContentStyles as m}from"../common/styles.js";import{getContainerClasses as c}from"../common/classes.js";let n=({children:n,builderAttrs:g,setting:$,style:k,builderProps:y,advanced:f,pageContext:u})=>{let{width:b,position:v,display:S,scrollPercent:j,showFrom:h,hideFrom:E,preloadBgImage:w,background:C,isScrollToTop:q}=$??{},x=f?.d,A=l({...s("w",b),...p({position:v,display:S})}),G=l(m({setting:$,style:k,uid:y?.uid,pageContext:u??{},type:"Liquid"})),L=d(c({uid:y?.uid,isScrollToTop:q,cssClass:f?.cssClass,isLiquid:!0})),N=o({uid:y?.uid,setting:{display:{desktop:S?.desktop,tablet:S?.tablet??S?.desktop,mobile:S?.mobile??S?.tablet??S?.desktop},scrollPercent:j,showFrom:h,hideFrom:E},advanced:{d:x}}),O=`.drawer-page-content {
        transform: none !important;
       -webkit-transform: none !important;
   }`;return r`

package/dist/esm/sticky/hooks/useSticky.js

@@ -1 +1 @@
-import{makeStyleResponsive as e,usePageStore as t,useCurrentDevice as o,useEditorMode as i,useStickyStore as n}from"@gem-sdk/core";import{useState as l,useMemo as s,useEffect as r}from"react";import{hasSectionValue as a,isVisibleBetweenSections as d,getScrollPercent as c}from"../common/helper.js";let b=b=>{let{width:p,position:m,display:u,scrollPercent:k,showFrom:w,hideFrom:f}=b??{},v=e("w",p),h=t(e=>"interaction"===e.sidebarMode),E=o(),S=i(),[L,V]=l(!1),F=n(e=>e.getFirstVisibleElement(E)),g=({position:e,device:t})=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),x=s(()=>({...g({position:m?.desktop,device:""}),...g({position:m?.tablet??m?.desktop,device:"-tablet"}),...g({position:m?.mobile??m?.tablet??m?.desktop,device:"-mobile"})}),[m?.desktop,m?.mobile,m?.tablet]),y=s(()=>{if(h&&m?.[E]==="top")return"40px"},[E,h,m]),[B,R]=l(null),$=w?.link,A=f?.link;r(()=>{if(R(null),"edit"===S)return;let e=[u?.desktop,u?.tablet,u?.mobile],t=e.some(e=>"after-first-scroll"===e||"between-sections"===e);if(!t)return;let o=()=>({isScrollPercentReached:c()>=(k??0),isBetweenSectionsVisible:d({showFrom:{link:$},hideFrom:{link:A}})}),i=()=>{let e=o();R(t=>t&&t.isScrollPercentReached===e.isScrollPercentReached&&t.isBetweenSectionsVisible===e.isBetweenSectionsVisible?t:e)};i();let n=0,l=()=>{n||(n=requestAnimationFrame(()=>{n=0,i()}))};return window.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l),window.addEventListener("orientationchange",l),()=>{n&&cancelAnimationFrame(n),window.removeEventListener("scroll",l),window.removeEventListener("resize",l),window.removeEventListener("orientationchange",l)}},[S,u?.desktop,u?.tablet,u?.mobile,$,A,k]);let P=s(()=>{let e=({displayValue:e})=>{switch(e){case"after-first-cart-button":return L?"block":"none";case"after-first-scroll":if(!B)return"none";return B.isScrollPercentReached?"block":"none";case"between-sections":if(!B)return a({value:w})?"none":"block";return B.isBetweenSectionsVisible?"block":"none";default:return"block"}},t=u?.desktop,o=u?.tablet??t,i=u?.mobile??o;return{"--d":e({displayValue:t}),"--d-tablet":e({displayValue:o}),"--d-mobile":e({displayValue:i})}},[u?.desktop,u?.mobile,u?.tablet,A,$,B,L]),q=s(()=>({"--top":y??"auto","--top-tablet":y??"auto","--top-mobile":y??"auto",[`--${m?.desktop}`]:y??"0px",[`--${m?.tablet??m?.desktop}-tablet`]:y??"0px",[`--${m?.mobile??m?.tablet??m?.desktop}-mobile`]:y??"0px"}),[y,m?.desktop,m?.mobile,m?.tablet]),z=({position:e})=>"top"==e?"sticky":"fixed",j=s(()=>({"--pos":z({position:m?.desktop}),"--pos-tablet":z({position:m?.tablet??m?.desktop}),"--pos-mobile":z({position:m?.mobile??m?.tablet??m?.desktop})}),[m?.desktop,m?.mobile,m?.tablet]);return r(()=>{if(!F)return;let e=null,t=()=>{e=null,V(F.getBoundingClientRect().top<=0)},o=()=>{null===e&&(e=requestAnimationFrame(t))};return t(),window.addEventListener("scroll",o,{passive:!0}),()=>{window.removeEventListener("scroll",o),null!==e&&cancelAnimationFrame(e)}},[F]),r(()=>{V(!1)},[E]),{w:v,displayStyle:q,positionStyle:j,getCSSAlign:x,makeDisplaySettingStyles:P}};export{b as default};
+import{makeStyleResponsive as e,usePageStore as t,useCurrentDevice as o,useEditorMode as i,useStickyStore as l,DEVICES as n,getResponsiveValueByScreen as s}from"@gem-sdk/core";import{useState as r,useMemo as a,useEffect as d}from"react";import{isVisibleBetweenSections as b,getScrollPercent as p}from"../common/helper.js";let c=c=>{let{width:m,position:k,display:u,scrollPercent:w,showFrom:v,hideFrom:f}=c??{},h=e("w",m),E=t(e=>"interaction"===e.sidebarMode),S=o(),L=i(),[V,F]=r(!1),g=l(e=>e.getFirstVisibleElement(S)),x=({position:e,device:t})=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),y=a(()=>({...x({position:k?.desktop,device:""}),...x({position:k?.tablet??k?.desktop,device:"-tablet"}),...x({position:k?.mobile??k?.tablet??k?.desktop,device:"-mobile"})}),[k?.desktop,k?.mobile,k?.tablet]),B=a(()=>{if(E&&k?.[S]==="top")return"40px"},[S,E,k]),[R,$]=r(null);d(()=>{if($(null),"edit"===L)return;let e=[u?.desktop,u?.tablet,u?.mobile],t=e.some(e=>"after-first-scroll"===e||"between-sections"===e);if(!t)return;let o=()=>{let e=p(),t=t=>({isScrollPercentReached:e>=(s(w,t,0)??0),isBetweenSectionsVisible:b({showFrom:s(v,t),hideFrom:s(f,t)})});return{desktop:t("desktop"),tablet:t("tablet"),mobile:t("mobile")}},i=()=>{let e=o();$(t=>t&&n.every(o=>t[o].isScrollPercentReached===e[o].isScrollPercentReached&&t[o].isBetweenSectionsVisible===e[o].isBetweenSectionsVisible)?t:e)};i();let l=0,r=()=>{l||(l=requestAnimationFrame(()=>{l=0,i()}))};return window.addEventListener("scroll",r,{passive:!0}),window.addEventListener("resize",r),window.addEventListener("orientationchange",r),()=>{l&&cancelAnimationFrame(l),window.removeEventListener("scroll",r),window.removeEventListener("resize",r),window.removeEventListener("orientationchange",r)}},[L,u?.desktop,u?.tablet,u?.mobile,v?.desktop?.link,v?.tablet?.link,v?.mobile?.link,f?.desktop?.link,f?.tablet?.link,f?.mobile?.link,w?.desktop,w?.tablet,w?.mobile]);let A=a(()=>{let e=({displayValue:e,device:t})=>{switch(e){case"after-first-cart-button":return V?"block":"none";case"after-first-scroll":if(!R)return"none";return R[t].isScrollPercentReached?"block":"none";case"between-sections":if(!R)return"none";return R[t].isBetweenSectionsVisible?"block":"none";default:return"block"}},t=u?.desktop,o=u?.tablet??t,i=u?.mobile??o;return{"--d":e({displayValue:t,device:"desktop"}),"--d-tablet":e({displayValue:o,device:"tablet"}),"--d-mobile":e({displayValue:i,device:"mobile"})}},[u?.desktop,u?.mobile,u?.tablet,f,v,R,V]),P=a(()=>({"--top":B??"auto","--top-tablet":B??"auto","--top-mobile":B??"auto",[`--${k?.desktop}`]:B??"0px",[`--${k?.tablet??k?.desktop}-tablet`]:B??"0px",[`--${k?.mobile??k?.tablet??k?.desktop}-mobile`]:B??"0px"}),[B,k?.desktop,k?.mobile,k?.tablet]),q=({position:e})=>"top"==e?"sticky":"fixed",z=a(()=>({"--pos":q({position:k?.desktop}),"--pos-tablet":q({position:k?.tablet??k?.desktop}),"--pos-mobile":q({position:k?.mobile??k?.tablet??k?.desktop})}),[k?.desktop,k?.mobile,k?.tablet]);return d(()=>{if(!g)return;let e=null,t=()=>{e=null,F(g.getBoundingClientRect().top<=0)},o=()=>{null===e&&(e=requestAnimationFrame(t))};return t(),window.addEventListener("scroll",o,{passive:!0}),()=>{window.removeEventListener("scroll",o),null!==e&&cancelAnimationFrame(e)}},[g]),d(()=>{F(!1)},[S]),{w:h,displayStyle:P,positionStyle:z,getCSSAlign:y,makeDisplaySettingStyles:A}};export{c as default};

package/dist/esm/sticky/settings/configs/settings-v2.js

@@ -1 +1 @@
-let e=[{id:"setting",controls:[{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0},tablet:{default:!0},mobile:{default:!0}}},{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,isRowWith:!0,devices:{desktop:{default:"100%"}},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"1200px",showValue:!0}]},{id:"background",type:"background-media",ignoreReRender:!0,devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"#dddddd",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",preload:!1,loop:!0}}}},{id:"preloadBgImage",type:"toggle",label:"Preload Image",default:!1},{id:"position",label:"Layout",type:"layout-selector",iconViewBox:"0 0 76 48",itemPerRow:2,itemSpacing:"large",enableItemBackground:!0,enableItemOpacity:!0,options:[{label:"Bottom",value:"bottom",iconName:"gp-sticky-position-bottom"},{label:"Top",value:"top",iconName:"gp-sticky-position-top"}],devices:{desktop:{default:"bottom"}}},{id:"display",label:"Display",type:"select",devices:{desktop:{default:"always"}},options:[{label:"Always show",value:"always"},{label:"After first cart button",value:"after-first-cart-button"},{label:"After scrolling down",value:"after-first-scroll"},{label:"Between sections",value:"between-sections"}]},{id:"scrollPercent",type:"input:unit",units:["%"],min:0,max:100,placeholder:"0%",isNumber:!0},{id:"showFrom",type:"pick-link",optionConfig:{"scroll-to":{popoverLabel:"Show Sticky ATC start from",title:"",hideScrollToTop:!0}},default:{type:"scroll-to",link:""},isHiddenOpenLinkSelect:!0,hiddenOptions:{"stay-on-page":!0,"open-page":!0,"open-url":!0,"open-popup":!0,"go-to-sales-page":!0}},{id:"hideFrom",type:"pick-link",optionConfig:{"scroll-to":{popoverLabel:"Hide Sticky ATC start from",title:"",hideScrollToTop:!0}},default:{type:"scroll-to",link:""},isHiddenOpenLinkSelect:!0,hiddenOptions:{"stay-on-page":!0,"open-page":!0,"open-url":!0,"open-popup":!0,"go-to-sales-page":!0}},{id:"isScrollToTop",type:"toggle",default:!1}]}];export{e as StickySettingsV2};
+let e=[{id:"setting",controls:[{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0},tablet:{default:!0},mobile:{default:!0}}},{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,isRowWith:!0,devices:{desktop:{default:"100%"}},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"1200px",showValue:!0}]},{id:"background",type:"background-media",ignoreReRender:!0,devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"#dddddd",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",preload:!1,loop:!0}}}},{id:"preloadBgImage",type:"toggle",label:"Preload Image",default:!1},{id:"position",label:"Layout",type:"layout-selector",iconViewBox:"0 0 76 48",itemPerRow:2,itemSpacing:"large",enableItemBackground:!0,enableItemOpacity:!0,options:[{label:"Bottom",value:"bottom",iconName:"gp-sticky-position-bottom"},{label:"Top",value:"top",iconName:"gp-sticky-position-top"}],devices:{desktop:{default:"bottom"}}},{id:"display",label:"Display",type:"select",devices:{desktop:{default:"always"}},options:[{label:"Always show",value:"always"},{label:"After first cart button",value:"after-first-cart-button"},{label:"After scrolling down",value:"after-first-scroll"},{label:"Between sections",value:"between-sections"}]},{id:"scrollPercent",type:"input:unit",units:["%"],showDefaultUnit:!0,min:0,max:100,placeholder:"0%",isNumber:!0,devices:{desktop:{}}},{id:"showFrom",type:"pick-link",optionConfig:{"scroll-to":{popoverLabel:"Show Sticky ATC start from",title:"",hideScrollToTop:!0}},devices:{desktop:{default:{type:"scroll-to",link:""}}},isHiddenOpenLinkSelect:!0,hiddenOptions:{"stay-on-page":!0,"open-page":!0,"open-url":!0,"open-popup":!0,"go-to-sales-page":!0}},{id:"hideFrom",type:"pick-link",optionConfig:{"scroll-to":{popoverLabel:"Hide Sticky ATC start from",title:"",hideScrollToTop:!0}},devices:{desktop:{default:{type:"scroll-to",link:""}}},isHiddenOpenLinkSelect:!0,hiddenOptions:{"stay-on-page":!0,"open-page":!0,"open-url":!0,"open-popup":!0,"go-to-sales-page":!0}},{id:"isScrollToTop",type:"toggle",default:!1}]}];export{e as StickySettingsV2};

package/dist/types/index.d.ts

@@ -6097,9 +6097,9 @@ type SectionLinkValue = {
 };
 type StickySettingProps = {
     display: ObjectDevices<DisplayOptionValue>;
-    scrollPercent?: number;
-    showFrom?: SectionLinkValue;
-    hideFrom?: SectionLinkValue;
+    scrollPercent?: ObjectDevices<number>;
+    showFrom?: ObjectDevices<SectionLinkValue>;
+    hideFrom?: ObjectDevices<SectionLinkValue>;
     fullWidth?: ObjectDevices<boolean>;
     width?: ObjectDevices<string>;
     background: ObjectDevices<BackgroundMedia>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "19.1.0-staging.28",
+  "version": "19.1.0-staging.29",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",