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

package/dist/cjs/dialog/components/Dialog.js

@@ -1,417 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var React = require('react');
-var common = require('../helpers/common.js');
-var useScrollPercentage = require('../hooks/use-scroll-percentage.js');
-var ChildrenDroppable = require('../../grid/components/ChildrenDroppable.js');
-var _const = require('../../common/const.js');
-
-const parseNumber = (value)=>{
-    const numb = parseFloat(value?.toString() ?? '0');
-    if (isNaN(numb)) return 0;
-    return numb;
-};
-const createDialogKey = (uid = '', type = '')=>({
-        id: `dialog:${uid}:${type}`,
-        time: `dialog:${uid}:${type}:time`
-    });
-const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
-    const { frequency = 3, triggerPercentage = 0, frequencyMode = 'once' } = setting ?? {};
-    const { dialogId, trigger, triggerTime, name, mobileTrigger, mobileTriggerTime } = setting ?? {};
-    const { fullScreen, width, height, position, effectType, background } = setting ?? {};
-    const { btnBg, btnColor, btnSize, iconSize, closeButtonPosition, btnRounded } = setting ?? {};
-    const { isOverlay, overlayColor, overlayOpacity, closeOnClickOutside } = setting ?? {};
-    const dialogInfo = React.useMemo(()=>createDialogKey(dialogId ?? builderProps?.uid, trigger), [
-        builderProps?.uid,
-        dialogId,
-        trigger
-    ]);
-    const activeId = core.useModalStore((s)=>s.activeId);
-    const setModalActive = core.useModalStore((s)=>s.setModalActive);
-    const clearModal = core.useModalStore((s)=>s.clearModal);
-    const mode = core.useEditorMode();
-    const timeoutRef = React.useRef();
-    const overlay = React.useRef(null);
-    const triggerScroll = React.useRef(false);
-    const opened = React.useRef(false);
-    const [isOpen, setIsOpen] = React.useState(false);
-    const percent = useScrollPercentage.useScrollPercentage();
-    const forceOpen = activeId === builderProps?.uid;
-    const open = mode === 'edit' ? forceOpen : isOpen;
-    const enableEffect = open;
-    const { onListener, trigger: triggerInteraction, ref } = core.useInteraction();
-    const interactionListenerLoaded = React.useCallback((callback)=>{
-        //@ts-ignore
-        if (window.interactionLoaded) {
-            callback();
-            return;
-        }
-        window.addEventListener('gp:flow-actions-loaded', ()=>{
-            callback();
-        });
-    }, []);
-    const dispatchInteractionOpenPopup = React.useCallback(()=>{
-        interactionListenerLoaded(()=>{
-            triggerInteraction({
-                event: 'gp:popup-open',
-                selector: `[data-id="${builderProps?.uid}"`
-            });
-        });
-    }, [
-        interactionListenerLoaded,
-        triggerInteraction,
-        builderProps?.uid
-    ]);
-    const dispatchInteractionClosePopup = React.useCallback(()=>{
-        interactionListenerLoaded(()=>{
-            triggerInteraction({
-                event: 'gp:popup-close',
-                selector: `[data-id="${builderProps?.uid}"`
-            });
-        });
-    }, [
-        triggerInteraction,
-        builderProps?.uid,
-        interactionListenerLoaded
-    ]);
-    const openModal = React.useCallback(()=>{
-        localStorage.setItem(dialogInfo.time, `${Date.now()}`);
-        opened.current = true;
-        setIsOpen(true);
-        dispatchInteractionOpenPopup();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        dialogInfo.time
-    ]);
-    React.useEffect(()=>{
-        const triggerEventOpenDialog = (data)=>{
-            if (data?.popupUId == `#${builderProps?.uid}`) {
-                openModal();
-            }
-        };
-        core.globalEvent.subscribe('onOpenDialog', triggerEventOpenDialog);
-        return ()=>{
-            core.globalEvent.remove('onOpenDialog', triggerEventOpenDialog);
-        };
-    }, [
-        builderProps?.uid,
-        openModal
-    ]);
-    const closeModal = React.useCallback(()=>{
-        setIsOpen(false);
-        setModalActive();
-        clearModal();
-        dispatchInteractionClosePopup();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        setModalActive,
-        clearModal
-    ]);
-    const handleShowModal = React.useCallback(()=>{
-        const currentFrequency = localStorage.getItem(dialogInfo.time);
-        if (!currentFrequency) {
-            openModal();
-        } else {
-            switch(frequencyMode){
-                case 'once':
-                    break;
-                case 'after-period-time':
-                    {
-                        const diff = common.isShowModal(currentFrequency, frequency);
-                        if (diff) {
-                            openModal();
-                        }
-                        break;
-                    }
-                case 'every':
-                    {
-                        openModal();
-                        break;
-                    }
-            }
-        }
-    }, [
-        dialogInfo.time,
-        frequency,
-        openModal,
-        frequencyMode
-    ]);
-    const onMouseLeave = React.useCallback(()=>{
-        if (opened.current || mode === 'edit' || trigger !== 'show-when-about-exit') return;
-        handleShowModal();
-    }, [
-        handleShowModal,
-        mode,
-        trigger
-    ]);
-    React.useEffect(()=>{
-        const selector = `[data-id="${builderProps?.uid}"]`;
-        if (!onListener) {
-            return;
-        }
-        onListener({
-            event: 'gp:toggle-popup-open',
-            selector
-        }, ()=>{
-            openModal();
-        });
-        onListener({
-            event: 'gp:toggle-popup-close',
-            selector
-        }, ()=>{
-            closeModal();
-        });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        onListener
-    ]);
-    React.useEffect(()=>{
-        document.addEventListener('mouseleave', onMouseLeave);
-        return ()=>{
-            document.removeEventListener('mouseleave', onMouseLeave);
-        };
-    }, [
-        onMouseLeave
-    ]);
-    React.useEffect(()=>{
-        if (opened.current) return;
-        if (common.isMobile(navigator.userAgent) && trigger === 'show-when-about-exit' && mobileTrigger === 'timer') {
-            timeoutRef.current = setTimeout(()=>{
-                handleShowModal();
-            }, (mobileTriggerTime ?? 0) * 1000);
-            return ()=>{
-                clearTimeout(timeoutRef.current);
-            };
-        }
-    }, [
-        mobileTrigger,
-        mobileTriggerTime,
-        handleShowModal,
-        trigger
-    ]);
-    React.useEffect(()=>{
-        if (triggerScroll.current) return;
-        if (trigger === 'show-after-scroll') {
-            if (percent >= triggerPercentage) {
-                triggerScroll.current = true;
-                handleShowModal();
-            }
-        }
-    }, [
-        percent,
-        triggerPercentage,
-        handleShowModal,
-        trigger
-    ]);
-    const handleClickOverlay = React.useCallback((e)=>{
-        const isClickOutside = e.target === overlay.current;
-        if (closeOnClickOutside && isClickOutside) {
-            closeModal();
-        }
-    }, [
-        closeModal,
-        closeOnClickOutside
-    ]);
-    React.useEffect(()=>{
-        switch(trigger){
-            case 'show-on-page-load':
-                handleShowModal();
-                break;
-            case 'show-after-time':
-                {
-                    timeoutRef.current = setTimeout(()=>{
-                        handleShowModal();
-                    }, parseNumber(triggerTime) * 1000);
-                    break;
-                }
-        }
-        return ()=>{
-            clearTimeout(timeoutRef.current);
-        };
-    }, [
-        handleShowModal,
-        trigger,
-        triggerTime
-    ]);
-    const w = core.makeWidth(width, fullScreen);
-    const displayStyle = React.useMemo(()=>{
-        return Object.keys(style ?? {}).filter((key)=>[
-                '--d',
-                '--d-mobile',
-                '--d-tablet'
-            ].includes(key)).reduce((curr, key)=>({
-                ...curr,
-                [key]: style?.[key]
-            }), {});
-    }, [
-        style
-    ]);
-    const borderStyle = React.useMemo(()=>{
-        return Object.keys(style ?? {}).filter((key)=>common.advancedBorderStyle.includes(key)).reduce((curr, key)=>({
-                ...curr,
-                [key]: style?.[key]
-            }), {});
-    }, [
-        style
-    ]);
-    const wrapperStyle = React.useMemo(()=>{
-        return Object.keys(style ?? {}).filter((key)=>key.startsWith('--mt') || key.startsWith('--mb') || key.startsWith('--ml') || key.startsWith('--mr')).reduce((curr, key)=>({
-                ...curr,
-                [key]: style?.[key]
-            }), {});
-    }, [
-        style
-    ]);
-    const innerStyle = React.useMemo(()=>{
-        return Object.keys(style ?? {}).filter((key)=>!Object.keys(wrapperStyle).includes(key) && !Object.keys(displayStyle).includes(key) && !Object.keys(borderStyle).includes(key)).reduce((curr, key)=>({
-                ...curr,
-                [key]: style?.[key]
-            }), {});
-    }, [
-        style,
-        wrapperStyle,
-        displayStyle,
-        borderStyle
-    ]);
-    const pointerEventStyle = React.useMemo(()=>{
-        return Object.keys(style ?? {}).filter((key)=>[
-                '--d',
-                '--d-mobile',
-                '--d-tablet'
-            ].includes(key)).reduce((curr, key)=>({
-                ...curr,
-                [key.replace('--d', '--pe')]: style?.[key] === 'none' ? 'none' : 'auto'
-            }), {});
-    }, [
-        style
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        style: displayStyle,
-        children: (open || mode !== 'edit') && /*#__PURE__*/ jsxRuntime.jsx("dialog", {
-            ref: ref,
-            "data-id": builderProps?.uid,
-            open: open,
-            className: "gp-dialog gp-bg-transparent",
-            "aria-label": name,
-            style: {
-                zIndex: _const.ELEMENT_Z_INDEX.DIALOG
-            },
-            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                "aria-label": "Backdrop",
-                className: core.cls('gp-fixed gp-inset-0 gp-z-50 gp-flex gp-overflow-y-auto gp-overflow-x-hidden', {
-                    'gp-items-center gp-justify-center': position === 'center',
-                    'gp-items-start gp-justify-center': position === 'top',
-                    'gp-items-start gp-justify-end': position === 'top-right',
-                    'gp-items-start gp-justify-start': position === 'top-left',
-                    'gp-items-end gp-justify-center': position === 'bottom',
-                    'gp-items-center gp-justify-start': position === 'left',
-                    'gp-items-center gp-justify-end': position === 'right',
-                    'gp-items-end gp-justify-start': position === 'bottom-left',
-                    'gp-items-end gp-justify-end': position === 'bottom-right'
-                }),
-                style: pointerEventStyle,
-                children: [
-                    isOverlay && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        ref: overlay,
-                        className: "gp-fixed gp-inset-0 gp-block gp-transition-all gp-duration-100",
-                        style: {
-                            ...core.makeStyle({
-                                op: (overlayOpacity ?? 0) / 100
-                            }),
-                            ...core.getGlobalColorResponsiveStyle('bgc', {
-                                desktop: overlayColor
-                            }),
-                            ...displayStyle
-                        },
-                        onClick: handleClickOverlay,
-                        "aria-hidden": true
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("span", {
-                        className: "gp-inline-block gp-h-screen gp-align-middle"
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                        ...builderAttrs,
-                        role: "dialog",
-                        "aria-label": "Dialog content",
-                        className: core.cls('gp-relative gp-max-h-full gp-max-w-full', {
-                            'gp-animate-[fadeIn_0.4s_ease-in]': effectType === 'fade' && enableEffect,
-                            'gp-animate-[zoomIn_0.3s_ease-in]': effectType === 'zoom' && enableEffect,
-                            'gp-animate-[zoomOut_0.3s_ease-in]': effectType === 'zoom-out' && enableEffect,
-                            'gp-animate-[slideInLeft_0.3s_ease-in]': effectType === 'horizontal' && enableEffect,
-                            'gp-animate-[slideInUp_0.3s_ease-in]': effectType === 'vertical' && enableEffect,
-                            'gp-animate-[unfold_0.3s_ease-in-out]': effectType === 'unfold' && enableEffect,
-                            'gp-animate-[fadeOut_0.2s_ease-out]': !open && mode !== 'edit',
-                            'gp-overflow-hidden': closeButtonPosition !== 'outside'
-                        }),
-                        style: {
-                            ...wrapperStyle,
-                            ...displayStyle,
-                            ...borderStyle,
-                            ...core.makeStyleResponsive('w', w),
-                            ...common.heightStyle(fullScreen, height)
-                        },
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx("button", {
-                                onClick: closeModal,
-                                tabIndex: -1,
-                                className: core.cls('gp-absolute gp-right-0 gp-top-0 gp-z-[1] gp-inline-flex gp-items-center gp-justify-center gp-outline-none focus-visible:gp-shadow-none focus-visible:gp-outline-none', {
-                                    '-gp-translate-y-1/2 gp-translate-x-1/2 gp-shadow-md gp-z-[99]': closeButtonPosition === 'outside'
-                                }),
-                                style: {
-                                    ...core.makeStyle({
-                                        w: `${parseInt(btnSize.toString())}px`,
-                                        h: `${parseInt(btnSize.toString())}px`
-                                    }),
-                                    ...core.getGlobalColorResponsiveStyle('c', {
-                                        desktop: btnColor
-                                    }),
-                                    ...core.getGlobalColorResponsiveStyle('bgc', {
-                                        desktop: btnBg
-                                    }),
-                                    ...core.composeRadius({
-                                        normal: btnRounded
-                                    })
-                                },
-                                children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
-                                    viewBox: "0 0 12 12",
-                                    fill: "currentColor",
-                                    style: {
-                                        ...core.makeStyle({
-                                            w: iconSize,
-                                            h: iconSize
-                                        })
-                                    },
-                                    children: /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                        d: "M7.1,6l4.5,4.5l-1.1,1.1L6,7.1l-4.5,4.5l-1.1-1.1L4.9,6L0.5,1.5l1.1-1.1L6,4.9l4.5-4.5l1.1,1.1L7.1,6z"
-                                    })
-                                })
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                style: {
-                                    ...innerStyle,
-                                    ...common.removeHeightPercentForContent(common.heightStyle(fullScreen, height)),
-                                    ...common.inheritStyleBody,
-                                    ...core.getStyleBackgroundByDevice(background, {
-                                        ignoreBackgroundImage: true,
-                                        ignoreBackgroundImageProperties: true,
-                                        ignoreBgAttachment: true
-                                    })
-                                },
-                                "aria-label": "Dialog body",
-                                className: common.bodyDialogClass,
-                                children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : core.filterToolbarPreview(children)
-                            }),
-                            core.filterToolbarPreview(children, true)
-                        ]
-                    })
-                ]
-            })
-        })
-    });
-};
-
-exports.default = Dialog;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ChildrenDroppable=require("../../grid/components/ChildrenDroppable.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),ButtonIcon=require("../../button/components/ButtonIcon.js"),useDialog=require("../hooks/useDialog.js");const Dialog=e=>{let{setting:s,children:t,builderProps:l,style:a,advanced:r,builderAttrs:o}=e,n=r?.d,{name:i,fullScreen:c,width:y,height:m,position:d,overlayColor:u,overlayOpacity:g,iconSize:C,closeButtonPosition:j,iconSvg:x}=s??{},p=core.useEditorMode(),{ref:S,overlay:v,handleClickOverlay:b,closeModal:h,open:D,dialogId:f}=useDialog.useDialog(s,l,"edit"===p),B="edit"!==p,R=system.createAttr({...attrs.getAttr({uid:l?.uid||""})}),q=system.createStyle({...styles.getWrapperStyle(n)}),k=system.createClass({...classes.getContainClasses(r?.cssClass)}),A=system.createAttr({...attrs.getAttrContainer({uid:f||""})}),N=system.createStyle({...styles.getContainStyle()}),I=system.createClass({...classes.getBackdropClasses(d)}),L=system.createStyle({...styles.getBackdropStyle(a)}),O=system.createAttr({...attrs.getAttrOverlay()}),w=system.createClass({...classes.getOverlayClasses()}),E=system.createStyle({...styles.getOverlayStyle(g,u,a)}),M=system.createStyle({...styles.getDialogContentStyle({style:a,width:y,height:m,fullScreen:c})}),P=system.createClass({...classes.getDialogContentClasses({setting:s,enableEffect:D,isILP:B})}),T=system.createAttr({...attrs.getAttrClose()}),_=system.createClass({...classes.getHeadContentClasses()}),z=system.createStyle({...styles.getButtonContentStyle(s)}),H=system.createClass({...classes.getButtonContentClasses(j)}),W=system.createStyle({...styles.getSvgContentStyle(C)}),F=system.createClass({...classes.getSvgContentClasses()}),G=system.createStyle({...styles.getBodyContentStyle(s,a)}),J=system.createClass({...classes.getBodyContentClasses()});return jsxRuntime.jsx("div",{...R,style:q,children:(D||"edit"!==p)&&jsxRuntime.jsx("dialog",{ref:S,open:D,"aria-label":i,...A,className:k,style:N,children:jsxRuntime.jsxs("div",{"aria-label":"Backdrop",className:I,style:L,children:[system.If(!!u,jsxRuntime.jsx("div",{ref:v,...O,className:w,style:E,onClick:b,"aria-hidden":!0})),jsxRuntime.jsx("span",{className:_}),jsxRuntime.jsxs("div",{role:"dialog","aria-label":"Dialog content",...o,className:P,style:M,children:[jsxRuntime.jsx("button",{...T,type:"button",tabIndex:-1,className:H,style:z,onClick:h,children:jsxRuntime.jsx(ButtonIcon.default,{iconSvg:x??`<svg viewBox="0 0 12 12" fill="currentColor" style={svgContentStyle}>
+                  <path d="M7.1,6l4.5,4.5l-1.1,1.1L6,7.1l-4.5,4.5l-1.1-1.1L4.9,6L0.5,1.5l1.1-1.1L6,4.9l4.5-4.5l1.1,1.1L7.1,6z"></path>
+                </svg>`,styles:W,classes:F})}),jsxRuntime.jsx("div",{"aria-label":"Dialog body",style:G,className:J,children:core.isEmptyChildren(t)?jsxRuntime.jsx(ChildrenDroppable.default,{}):core.filterToolbarPreview(t)}),core.filterToolbarPreview(t,!0)]})]})})})};exports.default=Dialog;

package/dist/cjs/dialog/components/Dialog.liquid.js

@@ -1,172 +1,56 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var helpers = require('../../helpers.js');
-var common = require('../helpers/common.js');
-require('react/jsx-runtime');
-var _const = require('../../common/const.js');
-
-const Dialog = ({ setting, children, builderProps, style, advanced })=>{
-    const display = advanced?.d;
-    const dStyle = {
-        '--d': display?.desktop ? 'contents' : 'none',
-        '--d-tablet': display?.tablet ? 'contents' : 'none',
-        '--d-mobile': display?.mobile ? 'contents' : 'none'
-    };
-    const { name, frequency = 3, triggerPercentage = 0, trigger, triggerTime, frequencyMode = 'once' } = setting ?? {};
-    const { fullScreen, width, height, position, effectType, closeOnClickOutside, background } = setting ?? {};
-    const { btnBg, btnColor, btnSize, iconSize, closeButtonPosition, btnRounded } = setting ?? {};
-    const { isOverlay, overlayColor, overlayOpacity, mobileTrigger, mobileTriggerTime } = setting ?? {};
-    const w = core.makeWidth(width, fullScreen);
-    const displayStyle = Object.keys(style ?? {}).filter((key)=>[
-            '--d',
-            '--d-mobile',
-            '--d-tablet'
-        ].includes(key)).reduce((curr, key)=>({
-            ...curr,
-            [key]: style?.[key]
-        }), {});
-    const borderStyle = Object.keys(style ?? {}).filter((key)=>common.advancedBorderStyle.includes(key)).reduce((curr, key)=>({
-            ...curr,
-            [key]: style?.[key]
-        }), {});
-    const wrapperStyle = Object.keys(style ?? {}).filter((key)=>key.startsWith('--mt') || key.startsWith('--mb') || key.startsWith('--ml') || key.startsWith('--mr')).reduce((curr, key)=>({
-            ...curr,
-            [key]: style?.[key]
-        }), {});
-    const innerStyle = Object.keys(style ?? {}).filter((key)=>!Object.keys(wrapperStyle).includes(key) && !Object.keys(displayStyle).includes(key) && !Object.keys(borderStyle).includes(key)).reduce((curr, key)=>({
-            ...curr,
-            [key]: style?.[key]
-        }), {});
-    const dialogId = setting?.dialogId ?? builderProps?.uid;
-    return core.template /* liquid */ `
-    <gp-dialog class="gps-lazy" data-id="${builderProps?.uid}" style="${dStyle}" data-gp-setting='${JSON.stringify({
-        dialogId,
-        trigger,
-        triggerTime,
-        frequency,
-        triggerPercentage,
-        mobileTrigger,
-        mobileTriggerTime,
-        closeOnClickOutside,
-        frequencyMode,
-        display
-    })}'>
-      <dialog class="${advanced?.cssClass} gp-dialog gp-bg-transparent" aria-label="${name}" data-gp-dialog-id="${dialogId}"
-        style="${{
-        'z-index': _const.ELEMENT_Z_INDEX.DIALOG
-    }}"
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../../helpers.js");const Dialog=e=>{let{setting:s,children:t,builderProps:a,style:l,advanced:r,builderAttrs:y}=e,c=r?.d,{frequency:o=3,triggerPercentage:i=0,trigger:n,triggerTime:g,frequencyMode:d="once",mobileTrigger:m,mobileTriggerTime:C,closeOnClickOutside:p}=s??{},{name:$,fullScreen:S,width:v,height:u,position:f,overlayColor:b,overlayOpacity:A,iconSize:B,closeButtonPosition:L,iconSvg:h}=s??{},j=s?.dialogId??a?.uid,D=system.createStateOrContext({dialogId:j,trigger:n,triggerTime:g,frequency:o,triggerPercentage:i,mobileTrigger:m,mobileTriggerTime:C,closeOnClickOutside:p,frequencyMode:d,display:c}),O=system.createAttr({...attrs.getAttr({uid:a?.uid||""})}),q=system.createStyle({...styles.getWrapperStyle(c)}),E=system.createClass({...classes.getContainClasses(r?.cssClass)}),k=system.createAttr({...attrs.getAttrContainer({uid:j||""})}),x=system.createStyle({...styles.getContainStyle()}),I=system.createClass({...classes.getBackdropClasses(f)}),P=system.createStyle({...styles.getBackdropStyle(l)}),_=system.createAttr({...attrs.getAttrOverlay()}),M=system.createClass({...classes.getOverlayClasses()}),R=system.createStyle({...styles.getOverlayStyle(A,b,l)}),z=system.createStyle({...styles.getDialogContentStyle({style:l,width:v,height:u,fullScreen:S})}),G=system.createClass({...classes.getDialogContentClasses({setting:s,enableEffect:!0,isILP:!1})}),N=system.createAttr({...attrs.getAttrClose()}),w=system.createClass({...classes.getHeadContentClasses()}),H=system.createStyle({...styles.getButtonContentStyle(s)}),J=system.createClass({...classes.getButtonContentClasses(L)}),T=system.createStyle({...styles.getSvgContentStyle(B)}),U=system.createClass({...classes.getSvgContentClasses()}),V=system.createStyle({...styles.getBodyContentStyle(s,l)}),W=system.createClass({...classes.getBodyContentClasses()}),F=()=>core.RenderIf(core.isLocalEnv,'<script src="{{ \'gp-dialog-v7-5.js\' | asset_url }}" defer="defer"></script>',`<script src="${core.baseAssetURL}/assets-v2/gp-dialog-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return core.template`
+    <gp-dialog
+      ${{...O}}
+      class="${helpers.getSettingPreloadData("gps-lazy")}"
+      style="${q}"
+      data-gp-setting='${JSON.stringify(D)}'>
+      <dialog
+        aria-label="${$}"
+        ${{...k}}
+        class="${E}"
+        style="${x}"
       >
-        <div
-          aria-label="Backdrop"
-          class="${core.cls('gp-fixed gp-inset-0 gp-z-50 gp-flex gp-overflow-y-auto gp-overflow-x-hidden', {
-        'gp-items-center gp-justify-center': position === 'center',
-        'gp-justify-center gp-items-start': position === 'top',
-        'gp-justify-end gp-items-start': position === 'top-right',
-        'gp-justify-start gp-items-start': position === 'top-left',
-        'gp-items-end gp-justify-center': position === 'bottom',
-        'gp-items-center gp-justify-start': position === 'left',
-        'gp-items-center gp-justify-end': position === 'right',
-        'gp-items-end gp-justify-start': position === 'bottom-left',
-        'gp-items-end gp-justify-end': position === 'bottom-right'
-    })}"
-        >
-        ${core.RenderIf(isOverlay, core.template /* liquid */ `
+        <div aria-label="Backdrop" class="${I}" style="${P}">
+        ${system.If(!!b,core.template`
             <div
-              class="gp-fixed gp-inset-0 gp-block gp-transition-all gp-duration-100"
-              data-gp-dialog-overlay
-              style="${{
-        ...core.makeStyle({
-            op: (overlayOpacity ?? 0) / 100
-        }),
-        ...core.getGlobalColorResponsiveStyle('bgc', {
-            desktop: overlayColor
-        })
-    }}"
+              ${{..._}}
+              class="${M}"
+              style="${R}"
+              aria-hidden=true
             ></div>
         `)}
-          <span class="gp-inline-block gp-h-screen gp-align-middle"></span>
+          <span class="${w}"></span>
           <div
             role="dialog"
             aria-label="Dialog content"
-            class="${core.cls('gp-relative gp-max-h-full gp-max-w-full ', {
-        'gp-animate-[fadeIn_0.4s_ease-in]': effectType === 'fade',
-        'gp-animate-[zoomIn_0.3s_ease-in]': effectType === 'zoom',
-        'gp-animate-[zoomOut_0.3s_ease-in]': effectType === 'zoom-out',
-        'gp-animate-[slideInLeft_0.3s_ease-in]': effectType === 'horizontal',
-        'gp-animate-[slideInUp_0.3s_ease-in]': effectType === 'vertical',
-        'gp-animate-[unfold_0.3s_ease-in-out]': effectType === 'unfold',
-        'gp-shadow-xl': !helpers.isTransparentColor(background?.desktop?.color),
-        'gp-overflow-hidden': closeButtonPosition !== 'outside'
-    })}"
-            style="${{
-        ...wrapperStyle,
-        ...borderStyle,
-        ...core.makeStyleResponsive('w', w),
-        ...common.heightStyle(fullScreen, height)
-    }}"
+            ${{...y}}
+            class="${G}"
+            style="${z}"
           >
             <button
+              ${{...N}}
               type="button"
-              data-gp-dialog-close
               tabindex="-1"
-              class="${core.cls('gp-absolute gp-top-0 gp-right-0 gp-z-[999999] gp-inline-flex gp-items-center gp-justify-center gp-outline-none focus-visible:gp-shadow-none focus-visible:gp-outline-none', {
-        'gp-translate-x-1/2 -gp-translate-y-1/2 gp-shadow-md': closeButtonPosition === 'outside'
-    })}"
-              style="${{
-        ...core.makeStyle({
-            w: `${parseInt(btnSize.toString())}px`,
-            h: `${parseInt(btnSize.toString())}px`
-        }),
-        ...core.getGlobalColorResponsiveStyle('c', {
-            desktop: btnColor
-        }),
-        ...core.getGlobalColorResponsiveStyle('bgc', {
-            desktop: btnBg
-        }),
-        ...core.composeRadius({
-            normal: btnRounded
-        })
-    }}"
+              class="${J}"
+              style="${H}"
             >
-              <svg
-                viewBox="0 0 12 12"
-                fill="currentColor"
-                style="${{
-        ...core.makeStyle({
-            w: iconSize,
-            h: iconSize
-        })
-    }}"
-              >
+              <span style="${T}" class="${U}">
+              ${h??`<svg viewBox="0 0 12 12" fill="currentColor" style={svgContentStyle}>
                 <path d="M7.1,6l4.5,4.5l-1.1,1.1L6,7.1l-4.5,4.5l-1.1-1.1L4.9,6L0.5,1.5l1.1-1.1L6,4.9l4.5-4.5l1.1,1.1L7.1,6z"></path>
-              </svg>
+              </svg>`}
+              </span>
             </button>
             <div
-              style="${{
-        ...innerStyle,
-        ...common.removeHeightPercentForContent(common.heightStyle(fullScreen, height)),
-        ...common.inheritStyleBody,
-        ...core.getStyleBackgroundByDevice(background, {
-            ignoreBackgroundImage: true,
-            ignoreBackgroundImageProperties: true,
-            ignoreBgAttachment: true
-        })
-    }}"
               aria-label="Dialog body"
-              class="${common.bodyDialogClass}">
+              style="${V}"
+              class="${W}">
                 <div>
-                  ${children ?? ''}
+                  ${t??""}
                 </div>
             </div>
           </div>
         </div>
       </dialog>
     </gp-dialog>
-    ${core.RenderIf(core.isLocalEnv, `<script src="{{ 'gp-dialog.js' | asset_url }}" defer="defer"></script>`, `<script src="${core.baseAssetURL}/assets-v2/gp-dialog.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `;
-};
-
-exports.default = Dialog;
+    ${F()}
+  `};exports.default=Dialog;

package/dist/cjs/dialog/hooks/useDialog.js

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core"),React=require("react"),useScrollPercentage=require("./useScrollPercentage.js"),helpers=require("../common/helpers.js");const useDialog=(e,t,a)=>{let r=core.useModalStore(e=>e.setModalActive),c=core.useModalStore(e=>e.clearModal),o=React.useRef(),u=React.useRef(!1),l=React.useRef(!1),s=React.useRef(null),[i,n]=React.useState(!1),d=useScrollPercentage.useScrollPercentage(),p=core.useModalStore(e=>e.activeId),g=p===t?.uid,R=a?g:i,m=e?.dialogId??t?.uid,{trigger:f,triggerTime:b,mobileTrigger:v,mobileTriggerTime:h,closeOnClickOutside:w,frequency:k=3,triggerPercentage:E=0,frequencyMode:S="once"}=e??{},{onListener:C,trigger:M,ref:D}=core.useInteraction(),I=React.useCallback(e=>{if(window.interactionLoaded){e();return}window.addEventListener("gp:flow-actions-loaded",()=>{e()})},[]),$=React.useMemo(()=>helpers.createDialogKey(m??t?.uid,f),[t?.uid,m,f]),q=React.useCallback(()=>{I(()=>{M({event:"gp:popup-open",selector:`[data-id="${t?.uid}"`})})},[I,M,t?.uid]),L=React.useCallback(()=>{I(()=>{M({event:"gp:popup-close",selector:`[data-id="${t?.uid}"`})})},[M,t?.uid,I]),P=React.useCallback(()=>{localStorage.setItem($.time,`${Date.now()}`),l.current=!0,n(!0),q()},[$.time]);React.useEffect(()=>{let e=e=>{e?.popupUId==`#${t?.uid}`&&P()};return core.globalEvent.subscribe("onOpenDialog",e),()=>{core.globalEvent.remove("onOpenDialog",e)}},[t?.uid,P]);let T=React.useCallback(()=>{n(!1),r(),c(),L()},[r,c]),x=React.useCallback(()=>{let e=localStorage.getItem($.time);if(e)switch(S){case"once":break;case"after-period-time":{let t=helpers.isShowModal(e,k);t&&P();break}case"every":P()}else P()},[$.time,k,P,S]),j=React.useCallback(()=>{l.current||a||"show-when-about-exit"!==f||x()},[x,a,f]);React.useEffect(()=>{let e=`[data-id="${t?.uid}"]`;C&&(C({event:"gp:toggle-popup-open",selector:e},()=>{P()}),C({event:"gp:toggle-popup-close",selector:e},()=>{T()}))},[C]),React.useEffect(()=>(document.addEventListener("mouseleave",j),()=>{document.removeEventListener("mouseleave",j)}),[j]),React.useEffect(()=>{if(!l.current&&helpers.isMobile(navigator.userAgent)&&"show-when-about-exit"===f&&"timer"===v)return o.current=setTimeout(()=>{x()},(h??0)*1e3),()=>{clearTimeout(o.current)}},[v,h,x,f]),React.useEffect(()=>{!u.current&&"show-after-scroll"===f&&d>=E&&(u.current=!0,x())},[d,E,x,f]);let y=React.useCallback(e=>{let t=e.target===s.current;w&&t&&T()},[T,w]);return React.useEffect(()=>{switch(f){case"show-on-page-load":x();break;case"show-after-time":o.current=setTimeout(()=>{x()},1e3*helpers.parseNumber(b))}return()=>{clearTimeout(o.current)}},[x,f,b]),{ref:D,isOpen:i,overlay:s,handleClickOverlay:y,closeModal:T,activeId:p,open:R,dialogId:m}};exports.useDialog=useDialog;

package/dist/cjs/dialog/hooks/useScrollPercentage.js

@@ -0,0 +1 @@
+"use strict";var React=require("react");const useScrollPercentage=e=>{let[t,r]=React.useState(0),c=React.useCallback(t=>{if(e)return;let c=document.documentElement.scrollHeight-document.documentElement.clientHeight,n=t.currentTarget.scrollY;try{React.startTransition(()=>{r(Math.ceil(n/c*100))})}catch{React.startTransition(()=>{r(0)})}},[e]);return React.useEffect(()=>(window.addEventListener("scroll",c),()=>{window.removeEventListener("scroll",c)}),[c]),t};exports.useScrollPercentage=useScrollPercentage;

package/dist/cjs/dialog/index.js

@@ -0,0 +1 @@
+"use strict";require("react/jsx-runtime"),require("@gem-sdk/core"),require("react"),require("@gem-sdk/system"),require("next/link");var Dialog$1=require("./settings/Dialog.js");const dialogSetting={Dialog:Dialog$1.default};exports.dialogSetting=dialogSetting;

package/dist/cjs/dialog/next.js

@@ -1,16 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var dynamic = require('next/dynamic');
-var Loading = require('../common/components/Loading.js');
-require('react/jsx-runtime');
-
-const Dialog = dynamic(()=>Promise.resolve().then(function () { return require('./components/Dialog.js'); }), {
-    loading: Loading.default
-});
-var dialog = {
-    Dialog
-};
-
-exports.default = dialog;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var dynamic=require("next/dynamic"),Loading=require("../common/components/Loading.js");require("react/jsx-runtime"),require("react"),require("@gem-sdk/core");const Dialog=dynamic(()=>Promise.resolve().then(function(){return require("./components/Dialog.js")}),{loading:Loading.default});var dialog={Dialog};exports.default=dialog;