@gem-sdk/core 3.0.0-pre-production.15 → 3.0.6

package/dist/esm/helpers/animations.js

@@ -1,220 +1 @@
-const EASING = {
-    ease: 'cubic-bezier(0.46,0.03,0.52,0.96)',
-    'ease-in': 'cubic-bezier(0.55,0.08,0.68,0.53)',
-    'ease-out': 'cubic-bezier(0.46,0.03,0.52,0.96)',
-    linear: 'linear'
-};
-const animations = ()=>{
-    const normalizeOptions = (options)=>{
-        const cloneOptions = JSON.parse(JSON.stringify(options));
-        const numberMember = [
-            'delay',
-            'speed',
-            'scale',
-            'intensity'
-        ];
-        numberMember.forEach((keyName)=>{
-            if (!cloneOptions?.[keyName]) return;
-            if (keyName === 'scale') {
-                if (!cloneOptions?.zoomDirection) throw new TypeError(`zoomDirection not found on zoom preset`);
-                const [i1, i2] = cloneOptions?.scale?.in ?? [
-                    1,
-                    1
-                ];
-                const [o1, o2] = cloneOptions?.scale?.out ?? [
-                    1,
-                    1
-                ];
-                cloneOptions[keyName] = {
-                    in: [
-                        Number(i1) / 100,
-                        Number(i2) / 100
-                    ],
-                    out: [
-                        Number(o1) / 100,
-                        Number(o2) / 100
-                    ]
-                };
-                return;
-            }
-            const num = Number(cloneOptions?.[keyName]);
-            if (keyName === 'delay') cloneOptions[keyName] = num * 1000;
-            else cloneOptions[keyName] = num;
-            if (!isFinite(num)) throw new TypeError(`${keyName} must be a number`);
-        });
-        return cloneOptions;
-    };
-    const slide = (target, options, reverse)=>{
-        const normalizedOptions = normalizeOptions(options);
-        const { direction, distance } = normalizedOptions;
-        const coordinate = [
-            'left',
-            'right'
-        ].includes(direction ?? '') ? 'X' : 'Y';
-        let isNeg = [
-            'left',
-            'down'
-        ].includes(direction ?? '') ? '-' : '';
-        if (reverse) {
-            isNeg = [
-                'left',
-                'down'
-            ].includes(direction ?? '') ? '' : '-';
-        }
-        const preset = [
-            {
-                opacity: 0,
-                transform: `translate${coordinate}(${isNeg}${distance ?? 50}%)`
-            },
-            {
-                opacity: 1,
-                transform: `translate${coordinate}(0)`
-            }
-        ];
-        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
-            ...generateOptions(normalizedOptions, 500)
-        });
-    };
-    const fade = (target, options, reverse)=>{
-        const normalizedOptions = normalizeOptions(options);
-        const preset = [
-            {
-                opacity: 0
-            },
-            {
-                opacity: 1
-            }
-        ];
-        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
-            ...generateOptions(normalizedOptions, 500)
-        });
-    };
-    const generateOptions = (options, defaultDuration)=>{
-        const convertSpeedToDuration = (speed)=>{
-            if (!speed) return defaultDuration;
-            return 1.5 / speed * 1000;
-        };
-        const { loop, delay, speed, easing } = options ?? {};
-        const duration = convertSpeedToDuration(speed);
-        const actualDelay = delay ?? 0;
-        const actualDuration = loop ? duration + actualDelay : duration;
-        return {
-            iterations: loop ? Infinity : 1,
-            duration: actualDuration,
-            delay: actualDelay,
-            easing: EASING[easing ?? 'linear']
-        };
-    };
-    const zoom = (target, options, reverse)=>{
-        const normalizedOptions = normalizeOptions(options);
-        const { scale, zoomDirection, isFade } = normalizedOptions;
-        const [i1, i2] = scale.in;
-        const [o1, o2] = scale.out;
-        const zoomInPreset = [
-            {
-                transform: `scale(${i1}, ${i1})`,
-                opacity: isFade ? 0 : 1
-            },
-            {
-                transform: `scale(${i2 ?? 1.2}, ${i2 ?? 1.2})`,
-                opacity: 1
-            }
-        ];
-        const zoomOutPreset = [
-            {
-                transform: `scale(${o1}, ${o1})`,
-                opacity: isFade ? 0 : 1
-            },
-            {
-                transform: `scale(${o2 ?? 0.8}, ${o2 ?? 0.8})`,
-                opacity: 1
-            }
-        ];
-        let zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
-        if (reverse) {
-            zoomPreset = zoomDirection === 'in' ? zoomOutPreset : zoomInPreset;
-        }
-        return generateAnimationInstance(target, reverse ? zoomPreset.reverse() : zoomPreset, {
-            ...generateOptions(normalizedOptions, 700)
-        });
-    };
-    const generateLoopDelayEffect = (keyframes, delay, duration)=>{
-        if (!delay) return keyframes;
-        const offset = delay / duration;
-        const keyframe = [
-            ...keyframes
-        ].pop();
-        return [
-            ...keyframes,
-            {
-                ...keyframe,
-                offset: 1 - offset
-            }
-        ];
-    };
-    const shake = (target, options)=>{
-        const normalizedOptions = normalizeOptions(options);
-        const { intensity } = normalizedOptions ?? {};
-        const zeroIntensity = [
-            {
-                transform: 'translate3d(0, 0, 0)'
-            }
-        ];
-        const unitIntensity = [
-            {
-                transform: 'translate3d(4px, 0, 0)'
-            },
-            {
-                transform: 'translate3d(-4px, 0, 0)'
-            },
-            {
-                transform: 'translate3d(4px, 0, 0)'
-            }
-        ];
-        let keyframes = [];
-        Array.from(Array(intensity ?? 1).keys()).forEach(()=>{
-            keyframes = [
-                ...keyframes,
-                ...unitIntensity
-            ];
-        });
-        const shakePreset = [
-            {
-                transform: 'translate3d(-1px, 0, 0)'
-            },
-            {
-                transform: 'translate3d(2px, 0, 0)'
-            },
-            {
-                transform: 'translate3d(-4px, 0, 0)'
-            },
-            ...keyframes,
-            {
-                transform: 'translate3d(-4px, 0, 0)'
-            },
-            {
-                transform: 'translate3d(2px, 0, 0)'
-            },
-            {
-                transform: 'translate3d(-1px, 0, 0)'
-            }
-        ];
-        return generateAnimationInstance(target, intensity ? shakePreset : zeroIntensity, {
-            ...generateOptions(normalizedOptions ?? {}, 820)
-        });
-    };
-    const generateAnimationInstance = (target, effectPreset, options)=>{
-        const effect = new KeyframeEffect(target, options.iterations && options.iterations === 1 ? effectPreset : generateLoopDelayEffect(effectPreset, options?.delay ?? 0, (options?.duration) ?? 0), {
-            ...options
-        });
-        return new Animation(effect, document.timeline);
-    };
-    return {
-        zoom,
-        shake,
-        fade,
-        slide
-    };
-};
-
-export { animations };
+let EASING={ease:"cubic-bezier(0.46,0.03,0.52,0.96)","ease-in":"cubic-bezier(0.55,0.08,0.68,0.53)","ease-out":"cubic-bezier(0.46,0.03,0.52,0.96)",linear:"linear"},animations=()=>{let e=e=>{let r=JSON.parse(JSON.stringify(e)),t=["delay","speed","scale","intensity"];return t.forEach(e=>{if(!r?.[e])return;if("scale"===e){if(!r?.zoomDirection)throw TypeError("zoomDirection not found on zoom preset");let[t,a]=r?.scale?.in??[1,1],[n,i]=r?.scale?.out??[1,1];r[e]={in:[Number(t)/100,Number(a)/100],out:[Number(n)/100,Number(i)/100]};return}let t=Number(r?.[e]);if("delay"===e?r[e]=1e3*t:r[e]=t,!isFinite(t))throw TypeError(`${e} must be a number`)}),r},r=(r,t,n)=>{let i=e(t),{direction:o,distance:l}=i,f=["left","right"].includes(o??"")?"X":"Y",m=["left","down"].includes(o??"")?"-":"";n&&(m=["left","down"].includes(o??"")?"":"-");let u=[{opacity:0,transform:`translate${f}(${m}${l??50}%)`},{opacity:1,transform:`translate${f}(0)`}];return s(r,n?u.reverse():u,{...a(i,500)})},t=(r,t,n)=>{let i=e(t),o=[{opacity:0},{opacity:1}];return s(r,n?o.reverse():o,{...a(i,500)})},a=(e,r)=>{let t=e=>e?1.5/e*1e3:r,{loop:a,delay:n,speed:i,easing:o}=e??{},s=t(i),l=n??0,f=a?s+l:s;return{iterations:a?1/0:1,duration:f,delay:l,easing:EASING[o??"linear"]}},n=(r,t,n)=>{let i=e(t),{scale:o,zoomDirection:l,isFade:f}=i,[m,u]=o.in,[c,p]=o.out,d=[{transform:`scale(${m}, ${m})`,opacity:f?0:1},{transform:`scale(${u??1.2}, ${u??1.2})`,opacity:1}],y=[{transform:`scale(${c}, ${c})`,opacity:f?0:1},{transform:`scale(${p??.8}, ${p??.8})`,opacity:1}],b="in"===l?d:y;return n&&(b="in"===l?y:d),s(r,n?b.reverse():b,{...a(i,700)})},i=(e,r,t)=>{if(!r)return e;let a=r/t,n=[...e].pop();return[...e,{...n,offset:1-a}]},o=(r,t)=>{let n=e(t),{intensity:i}=n??{},o=[{transform:"translate3d(0, 0, 0)"}],l=[{transform:"translate3d(4px, 0, 0)"},{transform:"translate3d(-4px, 0, 0)"},{transform:"translate3d(4px, 0, 0)"}],f=[];Array.from(Array(i??1).keys()).forEach(()=>{f=[...f,...l]});let m=[{transform:"translate3d(-1px, 0, 0)"},{transform:"translate3d(2px, 0, 0)"},{transform:"translate3d(-4px, 0, 0)"},...f,{transform:"translate3d(-4px, 0, 0)"},{transform:"translate3d(2px, 0, 0)"},{transform:"translate3d(-1px, 0, 0)"}];return s(r,i?m:o,{...a(n??{},820)})},s=(e,r,t)=>{let a=new KeyframeEffect(e,t.iterations&&1===t.iterations?r:i(r,t?.delay??0,t?.duration??0),{...t});return new Animation(a,document.timeline)};return{zoom:n,shake:o,fade:t,slide:r}};export{animations};

package/dist/esm/helpers/background.js

@@ -1,227 +1 @@
-import { devicesMapping } from './constant.js';
-import { isColor, getSingleColorVariable } from './colors.js';
-import { makeStyleResponsive } from './make-style.js';
-
-const getStyleBackgroundByDevice = (background, options)=>{
-    if (!background) {
-        return {};
-    }
-    return {
-        ...!options?.ignoreBackgroundColor ? {
-            ...getStyleBgColor(background)
-        } : {},
-        ...!options?.ignoreBackgroundImage ? {
-            ...getStyleBgImage(background, options)
-        } : {},
-        ...!options?.ignoreBackgroundImageProperties ? {
-            ...getStyleBgPosition(background),
-            ...getStyleBgSize(background),
-            ...getStyleBgRepeat(background)
-        } : {},
-        ...!options?.ignoreBgAttachment ? getStyleBgAttachment(background) : {}
-    };
-};
-const getStyleBgColor = (background)=>{
-    const bgColor = {
-        desktop: getBgColorByDevice(background, 'desktop'),
-        tablet: getBgColorByDevice(background, 'tablet'),
-        mobile: getBgColorByDevice(background, 'mobile')
-    };
-    return makeStyleResponsive('bgc', bgColor);
-};
-const getBgColorByDevice = (background, device)=>{
-    return getColor(background?.[device]?.color);
-};
-const getColor = (color)=>{
-    if (!color) {
-        return;
-    }
-    if (isColor(color?.toString())) {
-        return color;
-    }
-    return `var(--g-c-${color})`;
-};
-const getStyleBgImage = (background, options)=>{
-    const bgImage = {
-        desktop: getBgImageByDevice(background, 'desktop', options),
-        tablet: getBgImageByDevice(background, 'tablet', options),
-        mobile: getBgImageByDevice(background, 'mobile', options)
-    };
-    return makeStyleResponsive('bgi', bgImage);
-};
-const getBgImageByDevice = (background, device, options)=>{
-    const isBgVideo = background?.[device]?.type === 'video';
-    if (isBgVideo) return;
-    if (background?.[device]?.type === 'color') return 'url()'; // To prevent overriding background image from upper device
-    const backupFileKey = background?.[device]?.image?.backupFileKey;
-    const storage = background?.[device]?.image?.storage;
-    let imageByDevice = background?.[device]?.image?.src;
-    let newBackupFilekey = backupFileKey;
-    const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
-    /\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];
-    if (backupFileKey && shopifyHandleName && shopifyHandleName != backupFileKey) {
-        newBackupFilekey = shopifyHandleName;
-    }
-    if (storage === 'FILE_CONTENT') {
-        if (options?.liquid && newBackupFilekey) {
-            imageByDevice = `{{ "${newBackupFilekey.replace('.jpeg', '.jpg')}" | file_url }}`;
-        }
-    }
-    if (storage === 'THEME' || !storage) {
-        if (options?.liquid && newBackupFilekey) {
-            imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
-        }
-    }
-    if (typeof imageByDevice === 'string') {
-        return `url(${imageByDevice})`;
-    }
-};
-const getStyleBgPosition = (background)=>{
-    const bgPosition = {
-        desktop: getBgPositionByDevice(background, 'desktop'),
-        tablet: getBgPositionByDevice(background, 'tablet'),
-        mobile: getBgPositionByDevice(background, 'mobile')
-    };
-    return makeStyleResponsive('bgp', bgPosition);
-};
-const getBgPositionByDevice = (background, device)=>{
-    const positionByDevice = background?.[device]?.position;
-    return positionByDevice && `${positionByDevice.x}% ${positionByDevice.y}%`;
-};
-const getStyleBgSize = (background)=>{
-    const bgSize = {
-        desktop: getBgSizeByDevice(background, 'desktop'),
-        tablet: getBgSizeByDevice(background, 'tablet'),
-        mobile: getBgSizeByDevice(background, 'mobile')
-    };
-    return makeStyleResponsive('bgs', bgSize);
-};
-const getBgSizeByDevice = (background, device)=>{
-    return background?.[device]?.size;
-};
-const getStyleBgRepeat = (background)=>{
-    const bgRepeat = {
-        desktop: getBgRepeatByDevice(background, 'desktop'),
-        tablet: getBgRepeatByDevice(background, 'tablet'),
-        mobile: getBgRepeatByDevice(background, 'mobile')
-    };
-    return makeStyleResponsive('bgr', bgRepeat);
-};
-const getBgRepeatByDevice = (background, device)=>{
-    return background?.[device]?.repeat;
-};
-const getStyleBgAttachment = (background)=>{
-    const bgAttachment = {
-        desktop: getBgAttachmentByDevice(background, 'desktop'),
-        tablet: getBgAttachmentByDevice(background, 'tablet'),
-        mobile: getBgAttachmentByDevice(background, 'mobile')
-    };
-    return makeStyleResponsive('bga', bgAttachment);
-};
-const getBgAttachmentByDevice = (background, device)=>{
-    return background?.[device]?.attachment;
-};
-const composeBackgroundCss = (backgroundColor)=>{
-    return `${backgroundColor ? `background-color: ${getSingleColorVariable(backgroundColor)};` : undefined}`;
-};
-const makeFixedBgAttachment = (background)=>{
-    if (!background) return;
-    background.tablet = background.tablet ? background.tablet : background.desktop;
-    background.mobile = background.mobile ? background.mobile : background.tablet;
-    const bgAttachment = {
-        desktop: getBgAttachmentByDevice(background, 'desktop'),
-        tablet: getBgAttachmentByDevice(background, 'tablet'),
-        mobile: getBgAttachmentByDevice(background, 'mobile')
-    };
-    const composeFixed = {
-        desktop: {
-            ...makeFixedBgAttachmentByDevice('desktop', bgAttachment.desktop)
-        },
-        tablet: {
-            ...makeFixedBgAttachmentByDevice('tablet', bgAttachment.tablet)
-        },
-        mobile: {
-            ...makeFixedBgAttachmentByDevice('mobile', bgAttachment.mobile)
-        }
-    };
-    return {
-        wrapper: {
-            ...composeFixed.desktop?.wrapper,
-            ...composeFixed.tablet?.wrapper,
-            ...composeFixed.mobile?.wrapper
-        },
-        content: {
-            ...composeFixed.desktop?.content,
-            ...composeFixed.tablet?.content,
-            ...composeFixed.mobile?.content
-        }
-    };
-};
-const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
-    const suffix = devicesMapping[device] ?? '';
-    if (bgAttachment === 'fixed') {
-        return {
-            wrapper: {
-                [`--pos${suffix}`]: 'absolute',
-                [`--top${suffix}`]: '0',
-                [`--left${suffix}`]: '0',
-                [`--w${suffix}`]: '100%',
-                [`--h${suffix}`]: '100%'
-            },
-            content: {
-                [`--pos${suffix}`]: 'fixed',
-                [`--w${suffix}`]: '100vw',
-                [`--h${suffix}`]: '100vh',
-                [`--bga${suffix}`]: 'unset'
-            }
-        };
-    }
-    return {
-        wrapper: {
-            [`--pos${suffix}`]: 'absolute'
-        },
-        content: {
-            [`--w${suffix}`]: '100%',
-            [`--h${suffix}`]: '100%',
-            [`--pos${suffix}`]: 'absolute',
-            [`--bga${suffix}`]: bgAttachment
-        }
-    };
-};
-const GRADIENT_BGR_KEY = 'linear-gradient';
-const getGradientBgrStyleForButton = (backgroundStyle)=>{
-    if (!backgroundStyle) return;
-    const bgrStyle = {};
-    Object.keys(backgroundStyle).forEach((state)=>{
-        if (!backgroundStyle[state]?.startsWith(GRADIENT_BGR_KEY)) return;
-        if (state === 'normal') {
-            Object.assign(bgrStyle, {
-                '--bg': backgroundStyle[state]
-            });
-        } else {
-            Object.assign(bgrStyle, {
-                '--hvr-bg': backgroundStyle[state]
-            });
-        }
-    });
-    return bgrStyle;
-};
-const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage)=>{
-    if (!backgroundStyle) return;
-    const bgrStyle = {};
-    [
-        'desktop',
-        'tablet',
-        'mobile'
-    ].forEach((device)=>{
-        if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
-            Object.assign(bgrStyle, {
-                [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: backgroundStyle[device]?.color,
-                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: !ignoreBackgroundImage?.[device] ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
-            });
-        }
-    });
-    return bgrStyle;
-};
-
-export { GRADIENT_BGR_KEY, composeBackgroundCss, getBgImageByDevice, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getStyleBackgroundByDevice, getStyleBgColor, makeFixedBgAttachment };
+import{devicesMapping as e}from"./constant.js";import{isColor as t,getSingleColorVariable as g}from"./colors.js";import{makeStyleResponsive as o}from"./make-style.js";import{getResponsiveValueByScreen as i}from"./get-resonsive-value.js";import{DEVICES as r}from"../constants/device.js";let isEmptyBg=e=>e?.videoHtml5===void 0&&e?.video===void 0&&!e?.videoType,getBgVideoByDevice=(e,t="desktop")=>{let g=e?.[t];if(isEmptyBg(g)&&"desktop"!==t){let t=e?.tablet;g=isEmptyBg(t)?e?.desktop:t}return g},getStyleBackgroundByDevice=(e,t)=>e?{...t?.ignoreBackgroundColor?{}:{...getStyleBgColor(e)},...t?.ignoreBackgroundImage?{}:{...getStyleBgImage(e,t)},...t?.ignoreBackgroundImageProperties?{}:{...getStyleBgPosition(e),...getStyleBgSize(e),...getStyleBgRepeat(e)},...t?.ignoreBgAttachment?{}:getStyleBgAttachment(e)}:{},getStyleBgColor=e=>{let t={desktop:getBgColorByDevice(e,"desktop"),tablet:getBgColorByDevice(e,"tablet"),mobile:getBgColorByDevice(e,"mobile")};return o("bgc",t)},getBgColorByDevice=(e,t)=>getColor(e?.[t]?.color),getColor=e=>e?t(e?.toString())?e:`var(--g-c-${e})`:void 0,getStyleBgImage=(e,t)=>{let g={desktop:getBgImageByDevice(e,"desktop",t),tablet:getBgImageByDevice(e,"tablet",t),mobile:getBgImageByDevice(e,"mobile",t)};return o("bgi",g)},getBgImageByDevice=(e,t,g)=>{let o=e?.[t]?.type==="video";if(o)return;if(e?.[t]?.type==="color")return"url()";let i=e?.[t]?.image?.backupFileKey,r=e?.[t]?.image?.storage,l=e?.[t]?.image?.src,a=i,B=l?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return(i&&B&&B!=i&&(a=B),"FILE_CONTENT"===r&&g?.liquid&&a&&(l=`{{ "${a.replace(".jpeg",".jpg")}" | file_url }}`),("THEME"===r||!r)&&g?.liquid&&a&&(l=`{{ "${a}" | asset_url }}`),"string"==typeof l&&l)?`url(${l})`:void 0!==l?"none":void 0},getStyleBgPosition=e=>{let t={desktop:getBgPositionByDevice(e,"desktop"),tablet:getBgPositionByDevice(e,"tablet"),mobile:getBgPositionByDevice(e,"mobile")};return o("bgp",t)},getBgPositionByDevice=(e,t)=>{let g=e?.[t]?.position;return g&&`${g.x}% ${g.y}%`},getStyleBgSize=e=>{let t={desktop:getBgSizeByDevice(e,"desktop"),tablet:getBgSizeByDevice(e,"tablet"),mobile:getBgSizeByDevice(e,"mobile")};return o("bgs",t)},getBgSizeByDevice=(e,t)=>e?.[t]?.size,getStyleBgRepeat=e=>{let t={desktop:getBgRepeatByDevice(e,"desktop"),tablet:getBgRepeatByDevice(e,"tablet"),mobile:getBgRepeatByDevice(e,"mobile")};return o("bgr",t)},getBgRepeatByDevice=(e,t)=>e?.[t]?.repeat,getStyleBgAttachment=e=>{let t={desktop:getBgAttachmentByDevice(e,"desktop"),tablet:getBgAttachmentByDevice(e,"tablet"),mobile:getBgAttachmentByDevice(e,"mobile")};return o("bga",t)},getBgAttachmentByDevice=(e,t)=>e?.[t]?.attachment,composeBackgroundCss=e=>`${e?`background-color: ${g(e)};`:void 0}`,makeFixedBgAttachment=e=>{if(!e)return;e.tablet=e.tablet?e.tablet:e.desktop,e.mobile=e.mobile?e.mobile:e.tablet;let t={desktop:getBgAttachmentByDevice(e,"desktop"),tablet:getBgAttachmentByDevice(e,"tablet"),mobile:getBgAttachmentByDevice(e,"mobile")},g={desktop:{...makeFixedBgAttachmentByDevice("desktop",t.desktop)},tablet:{...makeFixedBgAttachmentByDevice("tablet",t.tablet)},mobile:{...makeFixedBgAttachmentByDevice("mobile",t.mobile)}};return{wrapper:{...g.desktop?.wrapper,...g.tablet?.wrapper,...g.mobile?.wrapper},content:{...g.desktop?.content,...g.tablet?.content,...g.mobile?.content}}},makeFixedBgAttachmentByDevice=(t,g)=>{let o=e[t]??"";return"fixed"===g?{wrapper:{[`--pos${o}`]:"absolute",[`--top${o}`]:"0",[`--left${o}`]:"0",[`--w${o}`]:"100%",[`--h${o}`]:"100%"},content:{[`--pos${o}`]:"fixed",[`--w${o}`]:"100vw",[`--h${o}`]:"100vh",[`--bga${o}`]:"unset"}}:{wrapper:{[`--pos${o}`]:"absolute"},content:{[`--w${o}`]:"100%",[`--h${o}`]:"100%",[`--pos${o}`]:"absolute",[`--bga${o}`]:g}}},getGradientBgrStyleForButton=e=>{if(!e)return;let t={};for(let g of Object.keys(e)){let o=e[g];if(!o?.startsWith(GRADIENT_BGR_KEY))continue;let i="normal"===g?"--bgi":"--hvr-bgi";t[i]=o}return t},GRADIENT_BGR_KEY="linear-gradient",getCombinedBackgroundImage=e=>{if(!e)return;let{color:t,image:g}=e,o=g?.src&&g?.src?.trim()!=="",i=t?.includes(GRADIENT_BGR_KEY);return o&&i?`url('${g?.src}'), ${t}`:o?`url('${g?.src}')`:i?t:void 0},getGradientImageBgrStyleByDevice=e=>{if(!e)return;let t={};return r.forEach(g=>{let o=e[g];if(!o)return;let i="desktop"!==g?`-${g}`:"";o.color&&Object.assign(t,{[`--bgc${i}`]:o.color});let r=getCombinedBackgroundImage(o);r&&Object.assign(t,{[`--bgi${i}`]:r})}),t},getGradientBgrStyleByDevice=(e,t)=>{if(!e)return;let g={};return r.forEach(o=>{if(e[o]?.color?.includes(GRADIENT_BGR_KEY)){let i=`${getBgImageByDevice(e,o)||"url()"}, ${e[o]?.color}`;Object.assign(g,{[`--bgc${"desktop"!==o?"-"+o:""}`]:e[o]?.color,[`--bgi${"desktop"!==o?"-"+o:""}`]:t?.[o]?i:`${e[o]?.color}`})}}),g},getBgByDevice=e=>{let{backgroundColor:t,backgroundImage:g}=e;if(!t&&!g)return;let o={desktop:i(g,"desktop"),tablet:i(g,"tablet"),mobile:i(g,"mobile")},l={};return r.forEach(e=>{let r=i(t,e),a=g?getBgImageByDevice(o,e):void 0;r?.includes(GRADIENT_BGR_KEY)?Object.assign(l,{[`--bgi${"desktop"!==e?"-"+e:""}`]:r}):Object.assign(l,{[`--bgc${"desktop"!==e?"-"+e:""}`]:r,[`--bgi${"desktop"!==e?"-"+e:""}`]:"none"}),a&&"none"!==a&&Object.assign(l,{[`--bgi${"desktop"!==e?"-"+e:""}`]:a})}),{...l,...getStyleBgPosition(g),...getStyleBgSize(g),...getStyleBgRepeat(g),...getStyleBgAttachment(g)}};export{GRADIENT_BGR_KEY,composeBackgroundCss,getBgByDevice,getBgImageByDevice,getBgVideoByDevice,getColor,getCombinedBackgroundImage,getGradientBgrStyleByDevice,getGradientBgrStyleForButton,getGradientImageBgrStyleByDevice,getStyleBackgroundByDevice,getStyleBgColor,makeFixedBgAttachment};

package/dist/esm/helpers/backgroundImage.js

@@ -0,0 +1 @@
+import{makeStyleState as e}from"./make-style.js";let getStyleBackgroundImage=(e,g)=>e?{...g?.ignoreBackgroundImage?{}:{...getStyleBgImageSource(e,g)},...g?.ignoreBackgroundImageProperties?{}:{...getStyleBgImagePosition(e),...getStyleBgImageSize(e),...getStyleBgImageRepeat(e)},...g?.ignoreBgAttachment?{}:getStyleBgImageAttachment(e)}:{},getStyleBgImageSource=(g,t)=>{let a={normal:getBgImageSourceByDevice(g,"normal",t),hover:getBgImageSourceByDevice(g,"hover",t)};return e("bgi",a)},getBgImageSourceByDevice=(e,g,t)=>{let a=e?.[g],r=a?.image?.backupFileKey,i=a?.image?.storage,o=a?.image?.src,m=r,n=o?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return r&&n&&n!==r&&(m=n),"FILE_CONTENT"===i&&t?.liquid&&m&&(o=`{{ "${m.replace(".jpeg",".jpg")}" | file_url }}`),("THEME"===i||!i)&&t?.liquid&&m&&(o=`{{ "${m}" | asset_url }}`),o?`url(${o})`:"none"},getStyleBgImagePosition=g=>{let t={normal:getBgImagePositionByDevice(g,"normal"),hover:getBgImagePositionByDevice(g,"hover")};return e("bgp",t)},getBgImagePositionByDevice=(e,g)=>{let t=e?.[g]?.position;return t&&`${t.x}% ${t.y}%`},getStyleBgImageSize=g=>{let t={normal:getBgImageSizeByDevice(g,"normal"),hover:getBgImageSizeByDevice(g,"hover")};return e("bgs",t)},getBgImageSizeByDevice=(e,g)=>e?.[g]?.size,getStyleBgImageRepeat=g=>{let t={normal:getBgImageRepeatByDevice(g,"normal"),hover:getBgImageRepeatByDevice(g,"hover")};return e("bgr",t)},getBgImageRepeatByDevice=(e,g)=>e?.[g]?.repeat,getStyleBgImageAttachment=g=>{let t={normal:getBgImageAttachmentByDevice(g,"normal"),hover:getBgImageAttachmentByDevice(g,"hover")};return e("bga",t)},getBgImageAttachmentByDevice=(e,g)=>e?.[g]?.attachment,composeBackgroundImageCss=(e,g={})=>{if(!e)return;let{device:t="desktop",state:a="normal",useLiquid:r=!1,responsive:i}=g,o=[],m=i?e?.[t]?.[a]:e?.[a];if(!m)return"";if(m.image?.src){let e=m.image.src;r&&m.image.backupFileKey&&("FILE_CONTENT"===m.image.storage?e=`{{ "${m.image.backupFileKey.replace(".jpeg",".jpg")}" | file_url }}`:"THEME"!==m.image.storage&&m.image.storage||(e=`{{ "${m.image.backupFileKey}" | asset_url }}`)),o.push(`background-image: url(${e});`)}return m.position&&o.push(`background-position: ${m.position.x}% ${m.position.y}%;`),m.size&&o.push(`background-size: ${m.size};`),m.repeat&&o.push(`background-repeat: ${m.repeat};`),m.attachment&&o.push(`background-attachment: ${m.attachment};`),o.join("\n  ")};export{composeBackgroundImageCss,getBgImageSourceByDevice,getStyleBackgroundImage,getStyleBgImageSource};