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

package/dist/esm/image-comparison/components/CompareImage.liquid.js

@@ -1,346 +1,26 @@
-import { makeStyleResponsive, makeWidth, template, getCornerCSSFromGlobal, RenderIf, isLocalEnv, baseAssetURL, getResponsiveValueByScreen } from '@gem-sdk/core';
-import Label from './Label.liquid.js';
-import NextImage from '../../image/components/NextImage.liquid.js';
-import { composeAspectRatio } from '../../image/components/helpers.js';
-import { getImageSrc } from '../../image/helpers/getSrcSet.js';
-import { getSettingPreloadData } from '../../helpers.js';
-import { styleLazyPlaceholder } from './common/helpers.js';
-
-const CompareImage = (props)=>{
-    const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, pageContext, translate } = props;
-    const horizontal = !vertical;
-    const leftRatio = (leftImage?.width ?? 0) / (leftImage?.height ?? 1);
-    const rightRatio = (rightImage?.width ?? 0) / (rightImage?.height ?? 1);
-    const defaultRatio = leftRatio <= rightRatio ? `${leftImage?.width ?? 0}/${leftImage?.height ?? 1}` : `${rightImage?.width ?? 0}/${rightImage?.height ?? 1}`;
-    const baseRatioImage = leftRatio <= rightRatio ? leftImage : rightImage;
-    const rightSrcImage = getImageSrc(rightImage);
-    const leftSrcImage = getImageSrc(leftImage);
-    const aspectRatio = {
-        desktop: composeAspectRatio({
-            device: 'desktop',
-            aspect: styles?.aspectRatio,
-            auto: baseRatioImage,
-            custom: styles?.customAspectRadio
-        }) ?? defaultRatio,
-        tablet: composeAspectRatio({
-            device: 'tablet',
-            aspect: styles?.aspectRatio,
-            auto: baseRatioImage,
-            custom: styles?.customAspectRadio
-        }),
-        mobile: composeAspectRatio({
-            device: 'mobile',
-            aspect: styles?.aspectRatio,
-            auto: baseRatioImage,
-            custom: styles?.customAspectRadio
-        })
-    };
-    const initStyles = {
-        container: {
-            'box-sizing': 'border-box',
-            position: 'relative',
-            overflow: 'hidden',
-            height: 'auto'
-        },
-        rightImage: {
-            display: 'block',
-            height: '100%',
-            position: 'absolute',
-            width: '100%',
-            top: 0,
-            ...rightImageCss
-        },
-        leftImage: {
-            display: 'block',
-            height: '100%',
-            position: 'absolute',
-            width: '100%',
-            top: 0,
-            ...leftImageCss
-        },
-        slider: {
-            'z-index': 2,
-            'align-items': 'center',
-            cursor: !hover && horizontal && 'ew-resize' || !hover && !horizontal && 'ns-resize' || 'pointer',
-            display: 'flex',
-            'flex-direction': horizontal ? 'column' : 'row',
-            height: horizontal ? '100%' : `${handleSize}px`,
-            'justify-content': 'center',
-            position: 'absolute',
-            width: horizontal ? `${handleSize}px` : '100%'
-        },
-        line: {
-            display: 'block',
-            background: sliderLineColor,
-            'box-shadow': '0px 0px 4px 0px rgba(0, 0, 0, 0.40)',
-            flex: '0 1 auto',
-            height: horizontal ? '100%' : `${sliderLineWidth}px`,
-            width: horizontal ? `${sliderLineWidth}px` : '100%'
-        },
-        handleDefault: {
-            'align-items': 'center',
-            border: `${sliderLineWidth}px solid ${sliderLineColor}`,
-            'border-radius': '100%',
-            'box-shadow': '0px 0px 4px 0px rgba(0, 0, 0, 0.40)',
-            'box-sizing': 'border-box',
-            display: 'flex',
-            flex: '1 0 auto',
-            height: `${handleSize}px`,
-            'justify-content': 'center',
-            width: `${handleSize}px`,
-            transform: horizontal ? 'none' : 'rotate(90deg)'
-        },
-        leftArrow: {
-            'margin-right': '2px',
-            filter: 'drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 4px)'
-        },
-        rightArrow: {
-            'margin-left': '2px',
-            filter: 'drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 4px)'
-        },
-        leftLabel: {
-            opacity: 1,
-            left: horizontal ? '8px' : undefined,
-            top: horizontal ? undefined : '8px'
-        },
-        rightLabel: {
-            opacity: 1,
-            right: horizontal ? '8px' : undefined,
-            bottom: horizontal ? undefined : '8px'
-        }
-    };
-    const imageComparisonWidth = makeStyleResponsive('w', makeWidth(styles?.width, styles?.fullWidth));
-    for(const device in imageComparisonWidth){
-        const key = device;
-        imageComparisonWidth[key] = !imageComparisonWidth?.[key] || imageComparisonWidth?.[key] === 'undefinedpx' ? `${Math.min(leftImage?.width ?? 0, rightImage?.width ?? 0) || 900}px` : imageComparisonWidth?.[key];
-    }
-    // TODO: duplicate refactor later
-    const composeLabelPosition = (input)=>{
-        const { device, positionHoz, positionVer } = input;
-        const positionValue = horizontal ? getResponsiveValueByScreen(positionHoz, device, 'hoz-center') : getResponsiveValueByScreen(positionVer, device, 'ver-center');
-        const defaultPosition = horizontal ? {
-            topLeft: '50%',
-            bottomRight: 'auto'
-        } : {
-            topLeft: '50%',
-            bottomRight: 'auto'
-        };
-        const POSITION = {
-            'hoz-center': {
-                topLeft: '50%',
-                bottomRight: 'auto'
-            },
-            top: {
-                topLeft: '8px',
-                bottomRight: 'auto'
-            },
-            bottom: {
-                topLeft: 'auto',
-                bottomRight: '8px'
-            },
-            'ver-center': {
-                topLeft: '50%',
-                bottomRight: 'auto'
-            },
-            left: {
-                topLeft: '8px',
-                bottomRight: 'auto'
-            },
-            right: {
-                topLeft: 'auto',
-                bottomRight: '8px'
-            }
-        };
-        return POSITION?.[positionValue] ?? defaultPosition;
-    };
-    const labelPosition = (position)=>{
-        return {
-            desktop: composeLabelPosition({
-                device: 'desktop',
-                positionHoz: styles?.labelPositionHoz,
-                positionVer: styles?.labelPositionVer
-            })?.[position ?? 'topLeft'],
-            tablet: composeLabelPosition({
-                device: 'tablet',
-                positionHoz: styles?.labelPositionHoz,
-                positionVer: styles?.labelPositionVer
-            })?.[position ?? 'topLeft'],
-            mobile: composeLabelPosition({
-                device: 'mobile',
-                positionHoz: styles?.labelPositionHoz,
-                positionVer: styles?.labelPositionVer
-            })?.[position ?? 'topLeft']
-        };
-    };
-    const propStyles = horizontal ? styles?.labelPositionHoz : styles?.labelPositionVer;
-    const styleByDevice = {
-        desktop: propStyles?.desktop ?? 'hoz-center',
-        tablet: propStyles?.tablet ?? propStyles?.desktop ?? 'hoz-center',
-        mobile: propStyles?.mobile ?? propStyles?.tablet ?? propStyles?.desktop ?? 'hoz-center'
-    };
-    const translateByDevices = {
-        desktop: 'translateX(0) translateY(0)',
-        tablet: 'translateX(0) translateY(0)',
-        mobile: 'translateX(0) translateY(0)'
-    };
-    for(const devices in styleByDevice){
-        const position = styleByDevice?.[devices];
-        if (position.includes('center')) {
-            translateByDevices[devices] = horizontal ? 'translateX(0) translateY(-50%)' : 'translateX(-50%) translateY(0)';
-        } else {
-            translateByDevices[devices] = 'translateX(0) translateY(0)';
-        }
-    }
-    const FLEX_ALIGN = {
-        left: 'start',
-        center: 'center',
-        right: 'end',
-        justify: 'start'
-    };
-    const containerAlign = {
-        desktop: FLEX_ALIGN[styles?.align?.desktop ?? 'left'],
-        tablet: FLEX_ALIGN[styles?.align?.tablet ?? styles?.align?.desktop ?? 'left'],
-        mobile: FLEX_ALIGN[styles?.align?.mobile ?? styles?.align?.tablet ?? styles?.align?.desktop ?? 'left']
-    };
-    const tempImage = (leftImage?.width ?? 0) < (rightImage?.width ?? 0) ? {
-        ...leftImage
-    } : {
-        ...rightImage
-    };
-    return template`
-  <gp-image-comparison
-  data-id="${componentUid}"
-    gp-data='${JSON.stringify({
-        aspectRatio,
-        defaultRatio,
-        handle,
-        handleSize,
-        hover,
-        leftImage,
-        leftImageCss,
-        onSliderPositionChange,
-        rightImage,
-        rightImageCss,
-        sliderLineColor,
-        sliderLineWidth,
-        sliderPositionPercentage,
-        componentUid,
-        vertical
-    })}'
-    class="gp-w-full gp-flex ${advanced?.cssClass}"
-    style="${{
-        ...makeStyleResponsive('jc', containerAlign)
-    }}"
-  >
-  <div id="img-comparison-wrapper-${componentUid}" style="${{
-        ...imageComparisonWidth
-    }}">
-    <div
-      style="${{
-        ...initStyles.container,
-        display: 'block',
-        // ...makeStyleResponsive('aspect', aspectRatio),
-        ...getCornerCSSFromGlobal(builderData?.advanced?.rounded)
-    }}"
-      id="img-comparison-container-${componentUid}"
-      data-testid="container"
+import{template as t,isLocalEnv as e,baseAssetURL as i}from"@gem-sdk/core";import{createStyle as s,createClass as a,createAttr as r,createStateOrContext as l,If as o}from"@gem-sdk/system";import{getSettingPreloadData as m}from"../../helpers.js";import d from"../../image/components/NextImage.liquid.js";import{getOuterWrapperStyles as p,getWrapperWidth as g,getContainerStyles as c,getLazyPlaceholderStyle as n,getImageStyles as y,getLabelStyles as h,getArrowStyles as f,getLineStyles as $,getHandleStyles as b,getHandleCustomStyles as L,getSliderStyles as S}from"../common/styles.js";import{getOuterWrapperClasses as j,getLabelClasses as I,getLabelContainerClasses as u}from"../common/classes.js";import{getImageLiquidAttrs as v,getImagePlaceholderAttrs as w,getLabelAttrs as C,getLabelLiquidAttrs as A}from"../common/attrs.js";import{getData as q}from"../common/helpers.js";import N from"./Label.liquid.js";import k from"./SlideHandle.liquid.js";let CompareImage=z=>{let{leftImage:D,rightImage:E,advanced:O,translate:x,builderData:F,pageContext:G,preload:H=!1,onSliderPositionChange:W}=z,{hover:_,styles:J,handle:M,handleSize:P,leftImageAlt:R,leftImageTitle:T,leftImageCss:V,leftImageLabel:B,rightImageAlt:K,rightImageTitle:Q,rightImageCss:U,rightImageLabel:X,sliderLineWidth:Y,sliderLineColor:Z,sliderPositionPercentage:tt,vertical:te,componentUid:ti,tempImage:ts,aspectRatio:ta,defaultRatio:tr,isHorizontal:tl,hasLeftLabel:to,hasRightLabel:tm,qualityType:td,qualityPercent:tp,getLeftImageSrc:tg,getRightImageSrc:tc}=q(z),tn=tg({isLiquid:!0}),ty=tc({isLiquid:!0}),th=s({...p(J)}),tf=s({...g({width:J?.width,leftImageWidth:D?.width,rightImageWidth:E?.width})}),t$=s({...c({aspectRatio:ta,builderData:F})}),tb=s({...n(ta)}),tL=s({...y({type:"right",props:z})}),tS=s({...y({type:"left",props:z})}),tj=s({...h({styles:J,type:"left",isHorizontal:tl})}),tI=s({...h({styles:J,type:"right",isHorizontal:tl})}),tu=s({...f({type:"left"})}),tv=s({...f({type:"right"})}),tw=s({...$({isHorizontal:tl,sliderLineColor:Z,sliderLineWidth:Y})}),tC=s({...b({handleSize:P,isHorizontal:tl,sliderLineColor:Z,sliderLineWidth:Y})}),tA=s({...L()}),tq=s({...S({hover:_,handleSize:P,isHorizontal:tl})}),tN=a({...j(O?.cssClass)}),tk=a({...I(J)}),tz=a({...u()}),tD=C({componentUid:ti,positionId:"left",label:B??""}),tE=C({componentUid:ti,positionId:"right",label:X??""}),tO=r({...v({priority:H,src:ty,title:Q,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`right-image-${ti}`})}),tx=r({...v({priority:H,src:tn,title:T,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`left-image-${ti}`})}),tF=A({translate:x,pageContext:G,translateLabel:"leftImageLabel"}),tG=A({translate:x,pageContext:G,translateLabel:"rightImageLabel"}),tH=r({...w({width:ts?.width,height:ts?.height})}),tW=l({hover:_,handle:M,vertical:te,leftImage:D,rightImage:E,handleSize:P,aspectRatio:ta,defaultRatio:tr,componentUid:ti,leftImageCss:V,rightImageCss:U,sliderLineColor:Z,sliderLineWidth:Y,sliderPositionPercentage:tt,onSliderPositionChange:W}),t_=()=>t`
+      <img alt="" ${tH} style="${tb}" />
+    `,tJ=()=>d({...tO,alt:K,style:tL,setting:{qualityType:td,qualityPercent:tp},enableLazyLoadImage:!H,isNotLazyload:H,customAttrs:{"data-testid":"right-image"}}),tM=()=>d({...tx,alt:R,style:tS,setting:{qualityType:td,qualityPercent:tp},enableLazyLoadImage:!H,isNotLazyload:H,customAttrs:{"data-testid":"left-image"}}),tP=()=>k({componentUid:ti,customHandle:M,lineStyles:tw,sliderStyles:tq,handleStyles:tC,customHandleStyles:tA,leftArrowStyles:tu,rightArrowStyles:tv}),tR=()=>N({...tD,...tF,styles:J,childrenClass:tk,childrenStyle:tj,containerClass:tz,containerStyle:{}}),tT=()=>N({...tE,...tG,styles:J,childrenClass:tk,childrenStyle:tI,containerClass:tz,containerStyle:{}}),tV=()=>`${o(e,`<script ${m('class="gps-link" delay',"src")}="{{ 'gp-image-comparison-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${m('class="gps-link" delay',"src")}="${i}/assets-v2/gp-image-comparison-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}`;return t`
+    <gp-image-comparison
+      data-id="${ti}"
+      style="${th}"
+      class="${tN}"
+      gp-data='${JSON.stringify(tW)}'
     >
-      <img
-        data-testid="temp-image"
-        alt=""
-        title=""
-        width="${tempImage?.width}"
-        height="${tempImage?.height}"
-        style="${styleLazyPlaceholder(aspectRatio)}"
-      />
-      ${NextImage({
-        customAttrs: {
-            'data-testid': 'right-image'
-        },
-        alt: rightImageAlt ?? '',
-        id: `right-image-${componentUid}`,
-        title: rightImageTitle ?? '',
-        src: rightSrcImage ?? '',
-        priority: preload,
-        isDisableAspectStyle: true,
-        isDisableObjectFit: true,
-        style: {
-            ...initStyles.rightImage,
-            ...makeStyleResponsive('objf', styles?.imageScale)
-        },
-        pageContext
-    })}
-      ${NextImage({
-        customAttrs: {
-            'data-testid': 'left-image'
-        },
-        alt: leftImageAlt ?? '',
-        id: `left-image-${componentUid}`,
-        title: leftImageTitle ?? '',
-        src: leftSrcImage ?? '',
-        priority: preload,
-        isDisableAspectStyle: true,
-        isDisableObjectFit: true,
-        style: {
-            ...initStyles.rightImage,
-            ...makeStyleResponsive('objf', styles?.imageScale)
-        },
-        pageContext
-    })}
-      <div id="image-comparison-slider-${componentUid}" style="${{
-        ...initStyles.slider
-    }}">
-        <div style="${{
-        ...initStyles.line
-    }}"></div>
-        <div style="${{
-        ...initStyles.handleDefault
-    }}">
-          <svg style="${{
-        ...initStyles.leftArrow
-    }}" width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M0 6L6 0V12L0 6Z" fill="white"/>
-          </svg>
-          <svg style="${{
-        ...initStyles.rightArrow
-    }}" width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M6 6L0 12V0L6 6Z" fill="white"/>
-          </svg>
+      <div id="img-comparison-wrapper-${ti}" style="${tf}">
+        <div
+          id="img-comparison-container-${ti}"
+          data-testid="container"
+          style="${t$}"
+        >
+          ${t_()}
+          ${tJ()}
+          ${tM()}
+          ${tP()}
+          ${o(to,tR(),"")}
+          ${o(tm,tT(),"")}
         </div>
-        <div style="${{
-        ...initStyles.line
-    }}"></div>
       </div>
-      ${enableLabel && leftImageLabel ? Label({
-        styles,
-        label: leftImageLabel,
-        translateLabel: 'leftImageLabel',
-        childrenStyle: initStyles.leftLabel,
-        uid: componentUid,
-        positionId: 'left',
-        labelPositionTopStyles: makeStyleResponsive(horizontal ? 'top' : 'left', labelPosition('topLeft')),
-        translateByDevices,
-        labelPositionBottomStyles: makeStyleResponsive(horizontal ? 'bottom' : 'right', labelPosition('bottomRight')),
-        pageContext,
-        translate
-    }) : ''}
-      ${enableLabel && rightImageLabel ? Label({
-        styles,
-        label: rightImageLabel,
-        translateLabel: 'rightImageLabel',
-        childrenStyle: initStyles.rightLabel,
-        uid: componentUid,
-        positionId: 'right',
-        labelPositionTopStyles: makeStyleResponsive(horizontal ? 'top' : 'left', labelPosition('topLeft')),
-        translateByDevices,
-        labelPositionBottomStyles: makeStyleResponsive(horizontal ? 'bottom' : 'right', labelPosition('bottomRight')),
-        pageContext,
-        translate
-    }) : ''}
-    </div></div>
-  </gp-image-comparison>
-  ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-image-comparison.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-image-comparison.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `;
-};
-
-export { CompareImage as default };
+    </gp-image-comparison>
+    ${tV()}
+  `};export{CompareImage as default};

package/dist/esm/image-comparison/components/ImageComparison.js

@@ -1,57 +1,2 @@
-import { jsx } from 'react/jsx-runtime';
-import CompareImage from './CompareImage.js';
-import { useMemo } from 'react';
-import { makeStyleResponsive } from '@gem-sdk/core';
-
-const ImageComparison = ({ setting, styles, builderProps })=>{
-    const { imageLeft, altLeft, titleLeft, imageRight, altRight, titleRight, direction, defaultPercentage, leftImageLabel, rightImageLabel, sliderLineWidth, hoverToSlide, enableLabel, preload } = setting ?? {};
-    const defaultPercent = useMemo(()=>{
-        return (defaultPercentage ?? 50) / 100;
-    }, [
-        defaultPercentage
-    ]);
-    const containerAlign = useMemo(()=>{
-        const FLEX_ALIGN = {
-            left: 'start',
-            center: 'center',
-            right: 'end',
-            justify: 'start'
-        };
-        return {
-            desktop: FLEX_ALIGN[styles?.align?.desktop ?? 'left'],
-            tablet: FLEX_ALIGN[styles?.align?.tablet ?? styles?.align?.desktop ?? 'left'],
-            mobile: FLEX_ALIGN[styles?.align?.mobile ?? styles?.align?.tablet ?? styles?.align?.desktop ?? 'left']
-        };
-    }, [
-        styles?.align
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        className: "gp-flex gp-w-full gp-overflow-hidden",
-        "data-allow-active-on-mousemove": true,
-        style: {
-            ...makeStyleResponsive('jc', containerAlign),
-            borderRadius: 'inherit'
-        },
-        children: /*#__PURE__*/ jsx(CompareImage, {
-            vertical: direction === 'vertical',
-            leftImage: imageLeft,
-            leftImageAlt: altLeft,
-            leftImageTitle: titleLeft,
-            rightImage: imageRight,
-            rightImageAlt: altRight,
-            rightImageTitle: titleRight,
-            sliderPositionPercentage: defaultPercent,
-            leftImageLabel: leftImageLabel ?? 'Before',
-            rightImageLabel: rightImageLabel ?? 'After',
-            sliderLineWidth: sliderLineWidth,
-            hover: hoverToSlide,
-            componentUid: builderProps?.uid,
-            enableLabel: enableLabel,
-            styles: styles,
-            builderData: builderProps?.builderData,
-            preload: preload
-        })
-    });
-};
-
-export { ImageComparison as default };
+'use client';
+import{jsx as e}from"react/jsx-runtime";import{createClass as a,createStyleReact as t}from"@gem-sdk/system";import{getImageComparisonWrapperClasses as m,getImageComparisonWrapperStyles as r}from"../common/classes.js";import{getSliderPositionPercentage as o}from"../common/helpers.js";import l from"./CompareImage.js";let ImageComparison=({setting:i,styles:s,builderProps:g,advanced:d,...n})=>{let{imageLeft:c,altLeft:f,titleLeft:p,imageRight:I,altRight:h,titleRight:u,direction:v,defaultPercentage:b,leftImageLabel:j,rightImageLabel:L,sliderLineWidth:y,hoverToSlide:A,enableLabel:C,preload:x,enableSEOLeft:D,enableSEORight:P}=i??{},T=a(m()),k=t(r());return e("div",{style:k,className:T,"data-allow-active-on-mousemove":!0,children:e(l,{...n,styles:s,preload:x,advanced:d,leftImage:c,leftImageAlt:D?f:"",leftImageTitle:D?p:"",rightImage:I,rightImageAlt:P?h:"",rightImageTitle:P?u:"",leftImageLabel:j??"Before",rightImageLabel:L??"After",sliderLineWidth:y,sliderPositionPercentage:o(b),vertical:"vertical"===v,hover:A,enableLabel:C,componentUid:g?.uid,builderData:g?.builderData})})};export{ImageComparison as default};

package/dist/esm/image-comparison/components/ImageComparison.liquid.js

@@ -1,35 +1,5 @@
-import { template } from '@gem-sdk/core';
-import CompareImage from './CompareImage.liquid.js';
-
-const ImageComparison = ({ setting, styles, builderProps, advanced, ...props })=>{
-    const { imageLeft, altLeft, titleLeft, imageRight, altRight, titleRight, direction, defaultPercentage, leftImageLabel, rightImageLabel, sliderLineWidth, hoverToSlide, enableLabel, preload, translate } = setting ?? {};
-    const defaultPercent = (defaultPercentage ?? 50) / 100;
-    return template`
-    <div class='gp-flex gp-overflow-hidden' style="border-radius: inherit">
-      ${CompareImage({
-        vertical: direction === 'vertical',
-        leftImage: imageLeft,
-        leftImageAlt: altLeft,
-        leftImageTitle: titleLeft,
-        rightImage: imageRight,
-        rightImageAlt: altRight,
-        rightImageTitle: titleRight,
-        sliderPositionPercentage: defaultPercent,
-        leftImageLabel: leftImageLabel ?? 'Before',
-        rightImageLabel: rightImageLabel ?? 'After',
-        sliderLineWidth: sliderLineWidth,
-        hover: hoverToSlide,
-        enableLabel: enableLabel,
-        styles: styles,
-        componentUid: builderProps?.uid ?? '',
-        advanced,
-        builderData: builderProps?.builderData,
-        preload,
-        translate,
-        ...props
-    })}
+import{template as e}from"@gem-sdk/core";import{createClass as t,createStyle as r}from"@gem-sdk/system";import{getImageComparisonWrapperClasses as m,getImageComparisonWrapperStyles as a}from"../common/classes.js";import{getSliderPositionPercentage as i}from"../common/helpers.js";import l from"./CompareImage.liquid.js";let ImageComparison=({setting:o,styles:s,builderProps:g,advanced:d,...f})=>{let{imageLeft:n,altLeft:p,titleLeft:I,imageRight:c,altRight:u,titleRight:h,direction:b,defaultPercentage:v,leftImageLabel:y,rightImageLabel:L,sliderLineWidth:j,hoverToSlide:q,enableLabel:A,preload:C,translate:P,qualityType:T,qualityPercent:$,enableSEOLeft:k,enableSEORight:D}=o??{},x=t(m()),B=r(a());return e`
+    <div class="${x}" style="${B}">
+      ${l({...f,styles:s,preload:C,advanced:d,leftImage:n,leftImageAlt:k?p:"",leftImageTitle:k?I:"",rightImage:c,rightImageAlt:D?u:"",rightImageTitle:D?h:"",leftImageLabel:y??"Before",rightImageLabel:L??"After",sliderLineWidth:j,sliderPositionPercentage:i(v),vertical:"vertical"===b,hover:q,enableLabel:A,qualityType:T,qualityPercent:$,componentUid:g?.uid??"",builderData:g?.builderData,translate:P})}
     </div>
-  `;
-};
-
-export { ImageComparison as default };
+  `};export{ImageComparison as default};

package/dist/esm/image-comparison/components/Label.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import{getLabelCustomCss as r}from"../common/styles.js";let Label=a=>{let{uid:l,label:o,styles:s,positionId:i,childrenClass:m,childrenStyle:c,containerClass:p,containerStyle:n}=a,d=r(s,l??""),y=s?.typo?.attrs?.transform==="capitalize"?o?.toString().toLocaleLowerCase():o;return e("div",{id:`image-comparison-${i}-label-${l}`,style:n,className:p,children:[t("style",{children:d}),t("div",{className:m,style:c,children:y})]})};Label.propTypes={};export{Label as default};

package/dist/esm/image-comparison/components/Label.liquid.js

@@ -1,48 +1,12 @@
-import { composeBorderCss, composeCornerCss, composeTypographyClassName, composeTypographyStyle, template, cls, makeStyle, makeStyleResponsive } from '@gem-sdk/core';
-import { getDynamicSourceLocales } from '../../helpers.js';
-
-const Label = ({ label, translateLabel, containerStyle, childrenStyle, styles, uid, positionId, labelPositionTopStyles, labelPositionBottomStyles, translateByDevices, pageContext, translate })=>{
-    const innerBorderCss = `
-    #image-comparison-left-label-${uid} div, #image-comparison-right-label-${uid} div {
-      ${composeBorderCss(styles?.labelBorder)}
-      ${composeCornerCss(styles?.labelRounded)}
-    }
-  `;
-    const appendTypoClass = composeTypographyClassName(styles?.typo);
-    const appendTypoStyle = composeTypographyStyle(styles?.typo);
-    const labelDisplay = getDynamicSourceLocales({
-        val: label,
-        uid: uid,
-        settingId: translateLabel,
-        pageContext,
-        isCapitalize: styles?.typo?.attrs?.transform === 'capitalize',
-        translate
-    });
-    return template`
-     <div 
-       id="image-comparison-${positionId}-label-${uid}" 
-       style="${containerStyle}"
-       class="${cls('gp-h-full gp-w-full gp-absolute gp-top-0', appendTypoClass)}"
-     >
-        <style>${innerBorderCss}</style>
-        <div 
-           style="${{
-        ...childrenStyle,
-        ...makeStyle({
-            tt: styles?.transform,
-            bg: styles?.labelBackgroundColor ?? 'rgba(0,0,0,0.6)',
-            c: styles?.labelTextColor ?? '#F9F9F9'
-        }),
-        ...makeStyleResponsive('t', translateByDevices),
-        ...labelPositionTopStyles,
-        ...labelPositionBottomStyles,
-        ...appendTypoStyle
-    }}"
-           class="${cls('gp-box-border gp-bg-[rgba(0,0,0,0.5)] gp-text-white gp-py-1 gp-px-2 gp-absolute gp-rounded-[4px]', appendTypoClass)}"
-        >
-          ${labelDisplay}
-        </div>
-     </div>`;
-};
-
-export { Label as default };
+import{template as e}from"@gem-sdk/core";import{getDynamicSourceLocales as t}from"../../helpers.js";import{getLabelCustomCss as s}from"../common/styles.js";let Label=({uid:l,label:i,styles:a,translate:r,positionId:o,pageContext:m,translateLabel:d,childrenStyle:p,childrenClass:$,containerStyle:c,containerClass:y})=>{let f=s(a,l??""),n=t({uid:l,translate:r,val:i,pageContext:m,settingId:d,isCapitalize:a?.typo?.attrs?.transform==="capitalize"});return e`
+    <div
+      id="image-comparison-${o}-label-${l}"
+      style="${c}"
+      class="${y}"
+    >
+      <style>${f}</style>
+      <div class="${$}" style="${p}">
+        ${n}
+      </div>
+    </div>
+  `};export{Label as default};

package/dist/esm/image-comparison/components/SlideHandle.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{If as l}from"@gem-sdk/system";import"react";let SlideHandle=({customHandle:t,componentUid:d,lineStyles:s,sliderStyles:r,handleStyles:h,customHandleStyles:n,leftArrowStyles:o,rightArrowStyles:w,sliderRef:m})=>e("div",{ref:m,id:`image-comparison-slider-${d}`,style:r,children:[i("div",{style:s}),l(!!t,i("div",{style:n,children:t}),e("div",{style:h,children:[i("svg",{style:o,width:"6",height:"12",viewBox:"0 0 6 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:i("path",{d:"M0 6L6 0V12L0 6Z",fill:"white"})}),i("svg",{style:w,width:"6",height:"12",viewBox:"0 0 6 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:i("path",{d:"M6 6L0 12V0L6 6Z",fill:"white"})})]})),i("div",{style:s})]});export{SlideHandle as default};

package/dist/esm/image-comparison/components/SlideHandle.liquid.js

@@ -0,0 +1,26 @@
+import{template as i}from"@gem-sdk/core";import{If as e}from"@gem-sdk/system";let SlideHandle=({customHandle:t,componentUid:l,lineStyles:d,sliderStyles:s,handleStyles:v,customHandleStyles:o,leftArrowStyles:w,rightArrowStyles:g})=>i`
+    <div id="image-comparison-slider-${l}" style="${s}">
+      <div style="${d}"></div>
+      ${e(!!t,i`<div style="${o}">${t}</div>`,i`<div style="${v}">
+          <svg
+            style="${w}"
+            width="6" height="12"
+            viewBox="0 0 6 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M0 6L6 0V12L0 6Z" fill="white"/>
+          </svg>
+          <svg
+            style="${g}"
+            width="6"
+            height="12"
+            viewBox="0 0 6 12" fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M6 6L0 12V0L6 6Z" fill="white"/>
+          </svg>
+        </div>`)}
+      <div style="${d}"></div>
+    </div>
+  `;export{SlideHandle as default};

package/dist/esm/image-comparison/hooks/useCompareImage.js

@@ -0,0 +1 @@
+import{useEditorMode as e,usePageType as t,useInteraction as n}from"@gem-sdk/core";import{useState as o,useRef as r,useMemo as i,useEffect as u}from"react";let useCompareImage=({props:s,aspectRatio:m})=>{let{styles:v,leftImage:d,rightImage:a,hover:l=!1,vertical:c=!1,sliderLineWidth:p=2,sliderPositionPercentage:g=.5,onSliderPositionChange:w}=s,h=!c,E=e(),L="STATIC"===t(),[f,R]=o(g),[b,C]=o(0),[B,I]=o(0),[O,X]=o(!1),[Y,A]=o(!1),N=r(null),T=r(null),U=r(null),k=r(null),{onListener:x,saveToElementInteractionData:z}=n(),D=r(null),M=i(()=>m,[d,a,v?.aspectRatio,v?.customAspectRadio]);u(()=>{let e=`[data-id="${s?.componentUid}"]`;x({event:"gp:change-ratio-original",selector:e,elementRef:D},e=>{let{data:t,isRollback:n,uniqueStorageKey:o}=e||{};if(!n||void 0!==t){if(n){R(Number(t));return}z(D.current,o,f),R(Number(t)/100)}})},[x,s?.componentUid,z,f]);let P=i(()=>p/2+21,[p]),S=i(()=>(h?b-p/2:B-p/2)-21,[h,b,p,B]);u(()=>{let e=N.current;if(!e)return;let t=new ResizeObserver(([e])=>{let t=e?.target.getBoundingClientRect().width??0;C(t)});return t.observe(e),()=>t.disconnect()},[]),u(()=>{let e=k?.current?.complete;return e&&X(!0),()=>{X(!1)}},[d]),u(()=>{let e=U?.current?.complete;return e&&A(!0),()=>{A(!1)}},[a]);let $=Y&&O;return u(()=>{let e=h?g*b:g*B;e<P?R(h?P/b:P/B):e>S?R(h?S/b:S/B):R(g)},[B,b,h,S,P,g]),u(()=>{let e=e=>{let t=e||window.event;if(t.stopPropagation(),t.button&&0!==t.button)return;let n="touches"in t?t?.touches?.[0]?.pageX??0:t.pageX,o="touches"in t?t?.touches?.[0]?.pageY??0:t.pageY,r=n-window.pageXOffset,i=o-window.pageYOffset,u=U.current?.getBoundingClientRect(),s=h?r-(u?.left??0):i-(u?.top??0);s<P&&(s=P),s>S&&(s=S),h?R(s/b):R(s/B),w&&(h?w(s/b):w(s/B))},t=t=>{t.preventDefault(),e(t),t.button&&0!==t.button||(window.addEventListener("mousemove",e),r.addEventListener("touchmove",e))},n=()=>{window.removeEventListener("mousemove",e),r.removeEventListener("touchmove",e)},o=N.current,r=T.current;if($&&o&&r){r.addEventListener("touchstart",t),r.addEventListener("touchend",n),l?(o.addEventListener("mousemove",e),o.addEventListener("mouseleave",n)):(o.addEventListener("mousedown",t),window.addEventListener("mouseup",n));let i=k.current?.getBoundingClientRect(),u=U.current?.getBoundingClientRect(),s=(i?.height??0)/(i?.width??1),m=(u?.height??0)/(u?.width??1),v=Math.min(s,m),d=b*v;I(d)}return()=>{o&&r&&(r.removeEventListener("touchstart",t),r.removeEventListener("touchend",n),o.removeEventListener("mousemove",e),o.removeEventListener("mouseleave",n),o.removeEventListener("mousedown",t),window.removeEventListener("mouseup",n),window.removeEventListener("mousemove",e),r.removeEventListener("touchmove",e))}},[l,S,P,h,M,b,B,$,p,v?.aspectRatio,w]),{ref:D,mode:E,isInstant:L,sliderRef:T,containerRef:N,leftImageRef:k,rightImageRef:U,sliderPosition:f,containerWidth:b,containerHeight:B,allImagesLoaded:$,setLeftImgLoaded:X,setRightImgLoaded:A}};export{useCompareImage};

package/dist/esm/image-comparison/index.js

@@ -0,0 +1 @@
+import"react/jsx-runtime";import"@gem-sdk/system";import"@gem-sdk/core";import"react";import"./components/Label.js";import m from"./settings/ImageComparison.js";let imageComparisonSetting={ImageComparison:m};export{imageComparisonSetting};

package/dist/esm/image-comparison/next.js

@@ -1,12 +1 @@
-import dynamic from 'next/dynamic';
-import Loading from '../common/components/Loading.js';
-import 'react/jsx-runtime';
-
-const ImageComparison = dynamic(()=>import('./components/ImageComparison.js'), {
-    loading: Loading
-});
-var imageComparison = {
-    ImageComparison
-};
-
-export { imageComparison as default };
+import o from"next/dynamic";import m from"../common/components/Loading.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";let ImageComparison=o(()=>import("./components/ImageComparison.js"),{loading:m});var imageComparison={ImageComparison};export{imageComparison as default};

package/dist/esm/image-comparison/settings/ImageComparison.js

@@ -0,0 +1,12 @@
+import{ImageComparisonSettings as i}from"./configs/settings.js";import{SettingUIV1 as t}from"./configs/ui-v1.js";import{SettingUIV2 as o}from"./configs/ui-v2.js";let config={tag:"ImageComparison",label:"Image Comparison",icon:`
+  <div>ImageComparison</div>
+  `,settings:i,ui:t,uiV2:o,presets:[{id:"image-comparison",name:{en:"Image Comparison"},icon:{desktop:`
+         <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0 3C0 1.34315 1.34315 0 3 0H37V48H3C1.34315 48 0 46.6569 0 45V3Z" fill="#757575"/>
+          <path d="M37 0H93C94.6569 0 96 1.34315 96 3V45C96 46.6569 94.6569 48 93 48H37V0Z" fill="#424242"/>
+          <rect x="28" y="15" width="18" height="18" rx="9" fill="#D6D6D6"/>
+          <path d="M33.7775 21.1928L31.2097 23.5376C30.9301 23.793 30.9301 24.207 31.2097 24.4624L33.7775 26.8072C34.2287 27.2191 35 26.9274 35 26.3448V21.6552C35 21.0726 34.2287 20.7809 33.7775 21.1928Z" fill="#424242"/>
+          <path d="M40.2225 21.1928L42.7903 23.5376C43.0699 23.793 43.0699 24.207 42.7903 24.4624L40.2225 26.8072C39.7713 27.2191 39 26.9274 39 26.3448V21.6552C39 21.0726 39.7713 20.7809 40.2225 21.1928Z" fill="#424242"/>
+          <rect x="37" width="1" height="48" fill="#D6D6D6"/>
+          </svg>
+        `},components:[{tag:"ImageComparison",advanced:{margin:{desktop:{bottom:0}}}}]}],rootOverride:{styles:{fullWidth:{desktop:!1},width:{desktop:"600px"},align:{desktop:"center"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};export{config as default};

package/dist/esm/image-comparison/settings/configs/settings.js

@@ -0,0 +1 @@
+let ImageComparisonSettings=[{id:"setting",controls:[{id:"imageTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"imageLeft",label:"Left image",type:"group",controls:[{id:"imageLeft",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_before.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"imageRight",label:"Right Image",type:"group",controls:[{id:"imageRight",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_after.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"direction",label:"Layout",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,itemPerRow:2,itemSpacing:"large",options:[{label:"Horizontal",value:"horizontal",iconName:"gp-image-comparison-horizontal"},{label:"Vertical",value:"vertical",iconName:"gp-image-comparison-vertical"}],default:"horizontal"},{id:"slider-settings",type:"group",label:"Slider",controls:[{id:"hoverToSlide",type:"select",options:[{label:"Drag to move",value:!1},{label:"Hover to move",value:!0}],label:"Behavior",default:!1},{id:"defaultPercentage",label:"Default ratio",type:"input:slider",useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,units:["%"],hide:!0,min:1,max:100,default:50}]},{id:"enableLabel",type:"toggle",default:!1},{id:"leftImageLabel",label:"First Description",type:"input",default:"Before"},{id:"translate",type:"input",default:"leftImageLabel,rightImageLabel"},{id:"rightImageLabel",label:"Second Description",type:"input",default:"After"},{id:"enableSEOLeft",type:"toggle",default:!1},{id:"enableSEORight",type:"toggle",default:!1},{id:"seo",type:"group",label:"SEO",controls:[{id:"seoTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"altLeft",label:"First image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"altRight",label:"Second image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"titleLeft",label:"First image title",info:"Show title when hover to first image",type:"input",placeholder:"E.g: iphone compare",default:"Title"},{id:"titleRight",label:"Second image title",info:"Show title when hover to second image",type:"input",placeholder:"E.g: iphone compare",default:"Title"}]}]},{id:"style",controls:[{id:"label-settings",type:"group",label:"Label",controls:[{id:"labelPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}}},{id:"labelBackgroundColor",type:"color-picker-v2",devices:{desktop:{default:"rgba(0, 0, 0, 0.60)"}}},{id:"labelPositionHoz",label:"Position",type:"option:value",devices:{desktop:{default:"hoz-center"}},options:[{label:"Top",value:"top",iconName:"gp-justify-content-top"},{label:"Center",value:"hoz-center",iconName:"gp-justify-content-center"},{label:"Bottom",value:"bottom",iconName:"gp-justify-content-bottom"}]},{id:"labelPositionVer",label:"Position",type:"option:value",devices:{desktop:{default:"ver-center"}},options:[{label:"Left",value:"left",iconName:"gp-justify-content-left"},{label:"Center",value:"ver-center",iconName:"gp-justify-content-middle"},{label:"Right",value:"right",iconName:"gp-justify-content-right"}]},{id:"labelTextColor",type:"colorpicker",label:"Text Color",default:"#FFFFFF"},{id:"labelBorder",type:"border-v2",devices:{desktop:{default:{borderType:"none",border:"none",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-1",isCustom:!0}}},compoDefaultValue:{desktop:{default:{border:"solid",color:"line-1",width:"1px",borderWidth:"1px"}}}},{id:"labelRounded",type:"corner-v2",devices:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"labelShadow",type:"shadow-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}}]},{id:"size-settings",type:"group",label:"Size",controls:[{id:"aspectRatio",type:"select",label:"Aspect Ratio",options:[{label:"Original",value:"auto"},{label:"1:1",value:"1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"customAspectRadio",type:"ratio",min:1,devices:{desktop:{default:{width:"1",height:"1"}}},hide:!0},{id:"imageScale",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill image",value:"cover",type:"image",svgName:"gp-image-cover"},{label:"Fit image",value:"contain",type:"image",svgName:"gp-image-contain"}],devices:{desktop:{default:"cover"}}},{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0}}},{id:"width",type:"input:unit",emptyOnClear:!0,placeholder:"Auto",min:0,units:["px","%"],hide:!0,devices:{desktop:{default:"100%"}}}]},{id:"typo",type:"typography-combo",default:{type:"paragraph-2"},ignoreReRender:!0,hiddenSetting:{textAlign:!0}},{id:"transform",label:"Text Transform",type:"select",options:[{value:"default",label:"None"},{value:"capitalize",label:"Capitalize"},{value:"uppercase",label:"Uppercase"},{value:"lowercase",label:"Lowercase"}],default:"default"},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}}]}];export{ImageComparisonSettings};