@gem-sdk/core 3.0.0-pre-production.14 → 3.0.0

package/dist/cjs/helpers/align.js

@@ -1,37 +1 @@
-'use strict';
-
-const convertTextAlignToJustify = (align)=>{
-    const devices = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
-    const result = {};
-    devices.forEach((device)=>{
-        const deviceType = device === 'desktop' ? '' : `${device}:`;
-        result[`${deviceType}gp-justify-start`] = align?.[device] === 'left';
-        result[`${deviceType}gp-justify-center`] = align?.[device] === 'center';
-        result[`${deviceType}gp-justify-end`] = align?.[device] === 'right';
-    });
-    return result;
-};
-const getAlignmentClasses = (align)=>{
-    const breakpoints = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
-    return breakpoints.reduce((classes, bp)=>{
-        const prefix = bp === 'desktop' ? '' : `${bp}:`;
-        const alignment = align?.[bp];
-        if (alignment) {
-            classes[`${prefix}gp-justify-start`] = alignment === 'left';
-            classes[`${prefix}gp-justify-center`] = alignment === 'center';
-            classes[`${prefix}gp-justify-end`] = alignment === 'right';
-        }
-        return classes;
-    }, {});
-};
-
-exports.convertTextAlignToJustify = convertTextAlignToJustify;
-exports.getAlignmentClasses = getAlignmentClasses;
+"use strict";var device=require("../constants/device.js");const convertTextAlignToJustify=e=>{let t={};return device.DEVICES.forEach(s=>{let i="desktop"===s?"":`${s}:`;t[`${i}gp-justify-start`]=e?.[s]==="left",t[`${i}gp-justify-center`]=e?.[s]==="center",t[`${i}gp-justify-end`]=e?.[s]==="right"}),t},getAlignmentClasses=e=>device.DEVICES.reduce((t,s)=>{let i="desktop"===s?"":`${s}:`,n=e?.[s];return n&&(t[`${i}gp-justify-start`]="left"===n,t[`${i}gp-justify-center`]="center"===n,t[`${i}gp-justify-end`]="right"===n),t},{});exports.convertTextAlignToJustify=convertTextAlignToJustify,exports.getAlignmentClasses=getAlignmentClasses;

package/dist/cjs/helpers/animations.js

@@ -1,222 +1 @@
-'use strict';
-
-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
-    };
-};
-
-exports.animations = animations;
+"use strict";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"},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,s]=r?.scale?.out??[1,1];r[e]={in:[Number(t)/100,Number(a)/100],out:[Number(n)/100,Number(s)/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 s=e(t),{direction:i,distance:l}=s,f=["left","right"].includes(i??"")?"X":"Y",m=["left","down"].includes(i??"")?"-":"";n&&(m=["left","down"].includes(i??"")?"":"-");let u=[{opacity:0,transform:`translate${f}(${m}${l??50}%)`},{opacity:1,transform:`translate${f}(0)`}];return o(r,n?u.reverse():u,{...a(s,500)})},t=(r,t,n)=>{let s=e(t),i=[{opacity:0},{opacity:1}];return o(r,n?i.reverse():i,{...a(s,500)})},a=(e,r)=>{let t=e=>e?1.5/e*1e3:r,{loop:a,delay:n,speed:s,easing:i}=e??{},o=t(s),l=n??0,f=a?o+l:o;return{iterations:a?1/0:1,duration:f,delay:l,easing:EASING[i??"linear"]}},n=(r,t,n)=>{let s=e(t),{scale:i,zoomDirection:l,isFade:f}=s,[m,u]=i.in,[c,p]=i.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),o(r,n?b.reverse():b,{...a(s,700)})},s=(e,r,t)=>{if(!r)return e;let a=r/t,n=[...e].pop();return[...e,{...n,offset:1-a}]},i=(r,t)=>{let n=e(t),{intensity:s}=n??{},i=[{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(s??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 o(r,s?m:i,{...a(n??{},820)})},o=(e,r,t)=>{let a=new KeyframeEffect(e,t.iterations&&1===t.iterations?r:s(r,t?.delay??0,t?.duration??0),{...t});return new Animation(a,document.timeline)};return{zoom:n,shake:i,fade:t,slide:r}};exports.animations=animations;

package/dist/cjs/helpers/background.js

@@ -1,236 +1 @@
-'use strict';
-
-var constant = require('./constant.js');
-var colors = require('./colors.js');
-var makeStyle = require('./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 makeStyle.makeStyleResponsive('bgc', bgColor);
-};
-const getBgColorByDevice = (background, device)=>{
-    return getColor(background?.[device]?.color);
-};
-const getColor = (color)=>{
-    if (!color) {
-        return;
-    }
-    if (colors.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 makeStyle.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 makeStyle.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 makeStyle.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 makeStyle.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 makeStyle.makeStyleResponsive('bga', bgAttachment);
-};
-const getBgAttachmentByDevice = (background, device)=>{
-    return background?.[device]?.attachment;
-};
-const composeBackgroundCss = (backgroundColor)=>{
-    return `${backgroundColor ? `background-color: ${colors.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 = constant.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;
-};
-
-exports.GRADIENT_BGR_KEY = GRADIENT_BGR_KEY;
-exports.composeBackgroundCss = composeBackgroundCss;
-exports.getBgImageByDevice = getBgImageByDevice;
-exports.getGradientBgrStyleByDevice = getGradientBgrStyleByDevice;
-exports.getGradientBgrStyleForButton = getGradientBgrStyleForButton;
-exports.getStyleBackgroundByDevice = getStyleBackgroundByDevice;
-exports.getStyleBgColor = getStyleBgColor;
-exports.makeFixedBgAttachment = makeFixedBgAttachment;
+"use strict";var constant=require("./constant.js"),colors=require("./colors.js"),makeStyle=require("./make-style.js"),getResonsiveValue=require("./get-resonsive-value.js"),device=require("../constants/device.js");const 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 makeStyle.makeStyleResponsive("bgc",t)},getBgColorByDevice=(e,t)=>getColor(e?.[t]?.color),getColor=e=>e?colors.isColor(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 makeStyle.makeStyleResponsive("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,s=l?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return(i&&s&&s!=i&&(a=s),"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 makeStyle.makeStyleResponsive("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 makeStyle.makeStyleResponsive("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 makeStyle.makeStyleResponsive("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 makeStyle.makeStyleResponsive("bga",t)},getBgAttachmentByDevice=(e,t)=>e?.[t]?.attachment,composeBackgroundCss=e=>`${e?`background-color: ${colors.getSingleColorVariable(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=(e,t)=>{let g=constant.devicesMapping[e]??"";return"fixed"===t?{wrapper:{[`--pos${g}`]:"absolute",[`--top${g}`]:"0",[`--left${g}`]:"0",[`--w${g}`]:"100%",[`--h${g}`]:"100%"},content:{[`--pos${g}`]:"fixed",[`--w${g}`]:"100vw",[`--h${g}`]:"100vh",[`--bga${g}`]:"unset"}}:{wrapper:{[`--pos${g}`]:"absolute"},content:{[`--w${g}`]:"100%",[`--h${g}`]:"100%",[`--pos${g}`]:"absolute",[`--bga${g}`]:t}}},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 device.DEVICES.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 device.DEVICES.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:getResonsiveValue.getResponsiveValueByScreen(g,"desktop"),tablet:getResonsiveValue.getResponsiveValueByScreen(g,"tablet"),mobile:getResonsiveValue.getResponsiveValueByScreen(g,"mobile")},i={};return device.DEVICES.forEach(e=>{let r=getResonsiveValue.getResponsiveValueByScreen(t,e),l=g?getBgImageByDevice(o,e):void 0;r?.includes(GRADIENT_BGR_KEY)?Object.assign(i,{[`--bgi${"desktop"!==e?"-"+e:""}`]:r}):Object.assign(i,{[`--bgc${"desktop"!==e?"-"+e:""}`]:r,[`--bgi${"desktop"!==e?"-"+e:""}`]:"none"}),l&&"none"!==l&&Object.assign(i,{[`--bgi${"desktop"!==e?"-"+e:""}`]:l})}),{...i,...getStyleBgPosition(g),...getStyleBgSize(g),...getStyleBgRepeat(g),...getStyleBgAttachment(g)}};exports.GRADIENT_BGR_KEY=GRADIENT_BGR_KEY,exports.composeBackgroundCss=composeBackgroundCss,exports.getBgByDevice=getBgByDevice,exports.getBgImageByDevice=getBgImageByDevice,exports.getBgVideoByDevice=getBgVideoByDevice,exports.getColor=getColor,exports.getCombinedBackgroundImage=getCombinedBackgroundImage,exports.getGradientBgrStyleByDevice=getGradientBgrStyleByDevice,exports.getGradientBgrStyleForButton=getGradientBgrStyleForButton,exports.getGradientImageBgrStyleByDevice=getGradientImageBgrStyleByDevice,exports.getStyleBackgroundByDevice=getStyleBackgroundByDevice,exports.getStyleBgColor=getStyleBgColor,exports.makeFixedBgAttachment=makeFixedBgAttachment;

package/dist/cjs/helpers/backgroundImage.js

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