@gem-sdk/pages 3.0.0-pre-production.0 → 3.0.0

package/dist/esm/components/builder/Toolbox.js

@@ -1,490 +1,2 @@
-import { jsx } from 'react/jsx-runtime';
-import { useMatchMutate, useShopStore, usePageStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
-import { memo, useMemo, useCallback, useEffect } from 'react';
-import { getStorefrontApi } from '../../libs/get-storefront-api.js';
-import { createFontUrl } from '../../libs/google-fonts.js';
-import { genCSS } from '../../libs/helpers/gen-css.js';
-import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
-import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
-import { libsStore } from '../../store/libs-store.js';
-import { checkNotInOptionFont } from '../../libs/helpers/check-option-font.js';
-
-const globalStyleId = 'global-style';
-const Toolbox = ()=>{
-    const matchMutate = useMatchMutate();
-    const provider = useShopStore((s)=>s.provider);
-    const changeStorefrontInfo = useShopStore((s)=>s.changeStorefrontInfo);
-    const setDynamicProduct = usePageStore((s)=>s.setDynamicProduct);
-    const setPostPurchaseProductOffers = usePageStore((s)=>s.setPostPurchaseProductOffers);
-    const setDynamicDiscountOffer = usePageStore((s)=>s.setDynamicDiscountOffer);
-    const setSalePageProductId = usePageStore((s)=>s.setSalePageProductId);
-    const setDynamicCollection = usePageStore((s)=>s.setDynamicCollection);
-    const initState = useBuilderPreviewStore((s)=>s.initState);
-    const state = useBuilderPreviewStore((s)=>s.state);
-    const initNormalizeState = useBuilderPreviewStore((s)=>s.forceChangeState);
-    const forceChangeItemProp = useBuilderPreviewStore((s)=>s.forceChangeItemProp);
-    const changeItemPropByKey = useBuilderPreviewStore((s)=>s.changeItemPropByKey);
-    const addItem = useBuilderPreviewStore((s)=>s.addItem);
-    const moveItem = useBuilderPreviewStore((s)=>s.moveItem);
-    const removeItem = useBuilderPreviewStore((s)=>s.removeItem);
-    const addSection = useSectionStore((s)=>s.addSection);
-    const changeSwatches = useShopStore((s)=>s.changeSwatches);
-    const updateItemName = useBuilderPreviewStore((s)=>s.updateItemName);
-    const updateItemAttribute = useBuilderPreviewStore((s)=>s.updateItemAttribute);
-    const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
-    const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
-    const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
-    const changeFontType = libsStore((s)=>s.changeFontType);
-    const fontType = libsStore((s)=>s.fontType);
-    const clearModal = useModalStore((s)=>s.clearModal);
-    const changeLimitCreateThemeSection = useShopStore((s)=>s.changeLimitCreateThemeSection);
-    const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
-    const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
-    const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
-    const setInteractionSettingType = usePageStore((s)=>s.setInteractionSettingType);
-    const setSidebarMode = usePageStore((s)=>s.setSidebarMode);
-    const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
-        state
-    ]);
-    const setFontsToHead = (className, fonts)=>{
-        // clear fonts
-        if (!fonts?.length) {
-            const googleFonts = document.querySelectorAll(`.${className}`);
-            googleFonts.forEach((googleFont)=>{
-                googleFont.remove();
-            });
-            return;
-        }
-        // clear fonts not use
-        const googleFonts = document.querySelectorAll(`.${className}`);
-        googleFonts.forEach((googleFont)=>{
-            const fontName = googleFont.getAttribute('data-font');
-            const variantName = googleFont.getAttribute('data-font-variant');
-            if (!fontName || !variantName) {
-                googleFont.remove();
-            } else {
-                const isUse = fonts.find((font)=>font.family == fontName && font.variants.includes(variantName));
-                if (!isUse) {
-                    googleFont.remove();
-                }
-            }
-        });
-        // append new fonts
-        for (const font of fonts){
-            if ([
-                'bunny',
-                'google'
-            ].includes(font.type) && checkNotInOptionFont(font.family, fontType)) {
-                continue;
-            }
-            if (font.type !== 'custom') {
-                if (font.variants?.length) {
-                    for (const variant of font.variants){
-                        const cloneFont = JSON.parse(JSON.stringify(font));
-                        cloneFont.variants = [
-                            variant
-                        ]; // set single variant. Fix error reload font when change href other variant
-                        const fontName = cloneFont.family;
-                        const variantName = variant;
-                        const url = createFontUrl([
-                            cloneFont
-                        ], undefined, fontType);
-                        if (url) {
-                            const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
-                            if (googleFont) {
-                                continue;
-                            } else {
-                                const link = document.createElement('link');
-                                link.className = className;
-                                link.dataset.font = fontName;
-                                link.dataset.fontVariant = variantName;
-                                link.href = url;
-                                link.rel = 'stylesheet';
-                                document.head.appendChild(link);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    };
-    // Revalidate all query with key match query/
-    const onRevalidateQuery = useCallback(()=>{
-        matchMutate(/query\//, {
-            revalidate: true
-        });
-    }, [
-        matchMutate
-    ]);
-    // Update shop info
-    const onChangeShopInfo = useCallback((e)=>{
-        const detail = e.detail;
-        changeStorefrontInfo({
-            url: detail.shopHandle ? getStorefrontApi(detail.shopHandle, provider) : undefined,
-            token: detail.shopToken
-        });
-    }, [
-        changeStorefrontInfo,
-        provider
-    ]);
-    const onChangeGlobalStyle = useCallback((e)=>{
-        const detail = e.detail;
-        try {
-            if (detail.data) {
-                const themeStyle = genCSS(detail.data, detail.mobileOnly);
-                const font = Object.entries(detail.data?.font).map(([, value])=>{
-                    return value;
-                }).map((item)=>{
-                    if (item.type == 'custom') {
-                        const isGoogleFont = shopifyCdnWithGoogleFonts.find((ggFont)=>ggFont.family == item.family);
-                        if (isGoogleFont) {
-                            return isGoogleFont;
-                        }
-                    }
-                    return item;
-                });
-                const globalStyle = document.getElementById(globalStyleId);
-                setFontsToHead('google-font-builder', font);
-                if (globalStyle) {
-                    globalStyle.innerHTML = themeStyle;
-                } else {
-                    const style = document.createElement('style');
-                    style.id = globalStyleId;
-                    style.innerHTML = themeStyle;
-                    document.head.appendChild(style);
-                }
-            }
-        } catch  {
-        //
-        }
-    }, []);
-    // Init builder data
-    const onInitBuilder = useCallback((e)=>{
-        clearModal();
-        try {
-            const detail = e.detail;
-            if (detail.data) {
-                if (detail.type === 'flat') {
-                    initNormalizeState(detail.data);
-                } else {
-                    initState(detail.data);
-                }
-            }
-        } catch  {
-        //
-        }
-    }, [
-        initNormalizeState,
-        initState,
-        clearModal
-    ]);
-    // Add new entity
-    const onAddEntity = useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.entity) {
-                addItem({
-                    data: detail.entity,
-                    id: detail.id,
-                    position: detail.position,
-                    type: detail.type ?? 'component'
-                });
-                if (detail?.type === 'section' && !Array.isArray(detail.entity)) {
-                    addSection(detail.entity.uid, detail.entity);
-                }
-            }
-        } catch  {
-        //
-        }
-    }, [
-        addItem,
-        addSection
-    ]);
-    // Update props of entity
-    const onUpdateEntityProp = useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.uid && detail.propName) {
-                changeItemPropByKey({
-                    id: detail.uid,
-                    key: detail.propName,
-                    data: detail.propValue,
-                    group: detail.group
-                });
-            }
-        } catch  {
-        //
-        }
-    }, [
-        changeItemPropByKey
-    ]);
-    // Update props of entity
-    const onForceUpdateEntityProps = useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.uid) {
-                forceChangeItemProp(detail.uid, detail.data, detail.group);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        forceChangeItemProp
-    ]);
-    // Move entity
-    const onMoveEntity = useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.to && detail.uid) {
-                moveItem(detail.uid, detail.to, Number(detail.position) ?? 0);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        moveItem
-    ]);
-    // Remove entity
-    const onRemoveEntity = useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.uid) {
-                removeItem(detail.uid);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        removeItem
-    ]);
-    // Change Swatches Data
-    const onChangeSwatchesData = useCallback((e)=>{
-        const detail = e.detail;
-        try {
-            if (detail.data) {
-                changeSwatches(detail.data);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        changeSwatches
-    ]);
-    const onChangeLayoutSettingData = useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        changeLayoutSettings(detail);
-    }, [
-        changeLayoutSettings
-    ]);
-    const onUpdateCreateThemeSectionCount = useCallback((e)=>{
-        const count = e.detail;
-        if (!count) return;
-        changeCreateThemeSectionCount(count);
-    }, [
-        changeCreateThemeSectionCount
-    ]);
-    const onUpdateShopPlan = useCallback((e)=>{
-        const shopPlan = e.detail;
-        if (!shopPlan) return;
-        changeShopPlan(shopPlan);
-    }, [
-        changeShopPlan
-    ]);
-    const onUpdateFontType = useCallback((e)=>{
-        const fontType = e.detail;
-        if (!fontType) return;
-        changeFontType(fontType);
-    }, [
-        changeFontType
-    ]);
-    const onUpdateDynamicProduct = useCallback((e)=>{
-        const product = e.detail;
-        if (!product) return;
-        setDynamicProduct(product);
-    }, [
-        setDynamicProduct
-    ]);
-    const onUpdateDynamicCollection = useCallback((e)=>{
-        const collection = e.detail;
-        if (!collection) return;
-        setDynamicCollection(collection);
-    }, [
-        setDynamicCollection
-    ]);
-    useEffect(()=>{
-        if (fonts) {
-            setFontsToHead('google-font-element', fonts);
-        }
-    }, [
-        fonts
-    ]);
-    const onUpdateItemName = useCallback((e)=>{
-        const detail = e.detail;
-        if (detail.uid) {
-            updateItemName(detail.uid, detail.name || '');
-        }
-    }, [
-        updateItemName
-    ]);
-    const onUpdateItemAttribute = useCallback((e)=>{
-        const detail = e.detail;
-        if (detail.uid) {
-            updateItemAttribute(detail.uid, detail.value || '', detail.attr || '');
-        }
-    }, [
-        updateItemAttribute
-    ]);
-    const onUpdateProductOffers = useCallback((e)=>{
-        const productOffers = e.detail;
-        if (!productOffers?.length) return;
-        setPostPurchaseProductOffers(productOffers);
-    }, [
-        setPostPurchaseProductOffers
-    ]);
-    const onUpdateDynamicDiscountOffer = useCallback((e)=>{
-        const dynamicDiscountOffer = e.detail;
-        if (!dynamicDiscountOffer) return;
-        setDynamicDiscountOffer(dynamicDiscountOffer);
-    }, [
-        setDynamicDiscountOffer
-    ]);
-    const onUpdateSalePageProductId = useCallback((e)=>{
-        const id = e.detail;
-        if (!id) return;
-        setSalePageProductId(id);
-    }, [
-        setSalePageProductId
-    ]);
-    const onLimitCreateThemeSection = useCallback((e)=>{
-        const data = e.detail;
-        if (!data) return;
-        changeLimitCreateThemeSection(data);
-    }, [
-        changeLimitCreateThemeSection
-    ]);
-    const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
-        const isSelectOnPage = e.detail.value;
-        const mode = e.detail.mode;
-        const settingType = e.detail.settingType;
-        setInteractionIsSelectOnPage(isSelectOnPage);
-        setInteractionSelectType(mode);
-        setInteractionSettingType(settingType);
-    }, [
-        setInteractionIsSelectOnPage,
-        setInteractionSelectType,
-        setInteractionSettingType
-    ]);
-    const onUpdateInteractionSettingType = useCallback((e)=>{
-        const settingType = e.detail.settingType;
-        setInteractionSettingType(settingType);
-    }, [
-        setInteractionSettingType
-    ]);
-    const onChangeSidebarMode = useCallback((e)=>{
-        const mode = e.detail.mode;
-        console.log(mode);
-        setSidebarMode(mode);
-    }, [
-        setSidebarMode
-    ]);
-    const onUpdateInteractionItem = useCallback((e)=>{
-        const interactionItem = e.detail;
-        setInteractionItem(interactionItem);
-    }, [
-        setInteractionItem
-    ]);
-    useEffect(()=>{
-        if (fonts) {
-            setFontsToHead('google-font-element', fonts);
-        }
-    }, [
-        fonts
-    ]);
-    useEffect(()=>{
-        window.addEventListener('update-shop-info', onChangeShopInfo);
-        window.addEventListener('revalidate-query', onRevalidateQuery);
-        window.addEventListener('init-builder', onInitBuilder);
-        window.addEventListener('add-entity', onAddEntity);
-        window.addEventListener('remove-entity', onRemoveEntity);
-        window.addEventListener('move-entity', onMoveEntity);
-        window.addEventListener('force-update-entity-props', onForceUpdateEntityProps);
-        window.addEventListener('update-entity-prop', onUpdateEntityProp);
-        window.addEventListener('set-global-style', onChangeGlobalStyle);
-        window.addEventListener('update-global-swatches-data', onChangeSwatchesData);
-        window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
-        window.addEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
-        window.addEventListener('update-shop-plan', onUpdateShopPlan);
-        window.addEventListener('set-dynamic-product', onUpdateDynamicProduct);
-        window.addEventListener('set-dynamic-collection', onUpdateDynamicCollection);
-        window.addEventListener('update-item-name', onUpdateItemName);
-        window.addEventListener('update-item-attribute', onUpdateItemAttribute);
-        window.addEventListener('set-product-offer', onUpdateProductOffers);
-        window.addEventListener('set-dynamic-discount-offer', onUpdateDynamicDiscountOffer);
-        window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
-        window.addEventListener('limit-create-theme-section', onLimitCreateThemeSection);
-        window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
-        window.addEventListener('update-interaction-item', onUpdateInteractionItem);
-        window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
-        window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
-        window.addEventListener('update-font-type', onUpdateFontType);
-        return ()=>{
-            window.removeEventListener('update-shop-info', onChangeShopInfo);
-            window.removeEventListener('revalidate-query', onRevalidateQuery);
-            window.removeEventListener('init-builder', onInitBuilder);
-            window.removeEventListener('add-entity', onAddEntity);
-            window.removeEventListener('remove-entity', onRemoveEntity);
-            window.removeEventListener('move-entity', onMoveEntity);
-            window.removeEventListener('update-entity-prop', onUpdateEntityProp);
-            window.removeEventListener('set-global-style', onChangeGlobalStyle);
-            window.removeEventListener('update-global-swatches-data', onChangeSwatchesData);
-            window.removeEventListener('on-off-header-footer', onChangeLayoutSettingData);
-            window.removeEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
-            window.removeEventListener('update-shop-plan', onUpdateShopPlan);
-            window.removeEventListener('set-dynamic-product', onUpdateDynamicProduct);
-            window.removeEventListener('set-dynamic-collection', onUpdateDynamicCollection);
-            window.removeEventListener('update-item-name', onUpdateItemName);
-            window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
-            window.removeEventListener('set-product-offer', onUpdateProductOffers);
-            window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
-            window.removeEventListener('limit-create-theme-section', onLimitCreateThemeSection);
-            window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
-            window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
-            window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
-            window.removeEventListener('update-font-type', onUpdateFontType);
-        };
-    }, [
-        onAddEntity,
-        onUpdateShopPlan,
-        onForceUpdateEntityProps,
-        onUpdateEntityProp,
-        onInitBuilder,
-        onMoveEntity,
-        onRemoveEntity,
-        onChangeGlobalStyle,
-        onChangeSwatchesData,
-        onRevalidateQuery,
-        onChangeShopInfo,
-        onChangeLayoutSettingData,
-        onUpdateCreateThemeSectionCount,
-        onUpdateDynamicProduct,
-        onUpdateDynamicCollection,
-        onUpdateItemName,
-        onUpdateItemAttribute,
-        onUpdateProductOffers,
-        onUpdateSalePageProductId,
-        onLimitCreateThemeSection,
-        onUpdateInteractionItem,
-        onUpdateInteractionIsSelectOnPage,
-        onUpdateInteractionSettingType,
-        onUpdateFontType,
-        onChangeSidebarMode,
-        onUpdateDynamicDiscountOffer
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        className: "toolbox"
-    });
-};
-var Toolbox$1 = /*#__PURE__*/ memo(Toolbox);
-
-export { Toolbox$1 as default };
+'use client';
+import{jsx as e}from"react/jsx-runtime";import{useMatchMutate as t,useShopStore as n,usePageStore as i,useBuilderPreviewStore as o,useSectionStore as d,useModalStore as a}from"@gem-sdk/core";import{memo as r,useMemo as l,useCallback as s,useEffect as c}from"react";import{getStorefrontApi as m}from"../../libs/get-storefront-api.js";import{createFontUrl as p}from"../../libs/google-fonts.js";import{genCSS as w}from"../../libs/helpers/gen-css.js";import{getFontsFromDataBuilder as u}from"../../libs/helpers/gen-fonts.js";import{shopifyCdnWithGoogleFonts as v}from"../../libs/shopify-cdn-with-google-fonts.js";import{libsStore as y}from"../../store/libs-store.js";import{checkNotInOptionFont as f}from"../../libs/helpers/check-option-font.js";let globalStyleId="global-style",Toolbox=()=>{let r=t(),h=n(e=>e.provider),g=n(e=>e.changeStorefrontInfo),E=i(e=>e.setDynamicProduct),L=i(e=>e.setPostPurchaseProductOffers),b=i(e=>e.setDynamicDiscountOffer),S=i(e=>e.setSalePageProductId),I=i(e=>e.setDynamicCollection),T=o(e=>e.initState),P=o(e=>e.state),j=o(e=>e.forceChangeState),C=o(e=>e.forceChangeItemProp),N=o(e=>e.changeItemPropByKey),x=o(e=>e.addItem),A=o(e=>e.moveItem),O=o(e=>e.removeItem),$=d(e=>e.addSection),k=n(e=>e.changeSwatches),q=o(e=>e.updateItemName),D=o(e=>e.updateItemAttribute),H=n(e=>e.changeLayoutSettings),M=n(e=>e.changeCreateThemeSectionCount),B=n(e=>e.changeShopPlan),J=n(e=>e.updatePriceWithCurrency),V=y(e=>e.changeFontType),F=y(e=>e.fontType),K=a(e=>e.clearModal),W=n(e=>e.changeLimitCreateThemeSection),z=i(e=>e.setInteractionIsSelectOnPage),G=i(e=>e.setInteractionItem),Q=i(e=>e.setInteractionSelectType),R=i(e=>e.setInteractionSettingType),U=i(e=>e.setSidebarMode),X=l(()=>u(P),[P]),Y=(e,t)=>{if(!t?.length){let t=document.querySelectorAll(`.${e}`);t.forEach(e=>{e.remove()});return}let n=document.querySelectorAll(`.${e}`);for(let i of(n.forEach(e=>{let n=e.getAttribute("data-font"),i=e.getAttribute("data-font-variant");if(n&&i){let o=t.find(e=>e.family==n&&e.variants.includes(i));o||e.remove()}else e.remove()}),t))if(!(["bunny","google"].includes(i.type)&&f(i.family,F))&&"custom"!==i.type&&i.variants?.length)for(let t of i.variants){let n=JSON.parse(JSON.stringify(i));n.variants=[t];let o=n.family,d=p([n],void 0,F);if(d){let n=document.querySelector(`.${e}[data-font="${o}"][data-font-variant="${t}"]`);if(n)continue;{let n=document.createElement("link");n.className=e,n.dataset.font=o,n.dataset.fontVariant=t,n.href=d,n.rel="stylesheet",document.head.appendChild(n)}}}},Z=s(()=>{r(/query\//,{revalidate:!0})},[r]),_=s(e=>{let t=e.detail;g({url:t.shopHandle?m(t.shopHandle,h):void 0,token:t.shopToken})},[g,h]),ee=s(e=>{let t=e.detail;try{if(t.data){let e=w(t.data,t.mobileOnly),n=Object.entries(t.data?.font).map(([,e])=>e).map(e=>{if("custom"==e.type){let t=v.find(t=>t.family==e.family);if(t)return t}return e}),i=document.getElementById(globalStyleId);if(Y("google-font-builder",n),i)i.innerHTML=e;else{let t=document.createElement("style");t.id=globalStyleId,t.innerHTML=e,document.head.appendChild(t)}}}catch{}},[]),et=s(e=>{K();try{let t=e.detail;t.data&&("flat"===t.type?j(t.data):T(t.data))}catch{}},[j,T,K]),en=s(e=>{try{let t=e.detail;t.entity&&(x({data:t.entity,id:t.id,position:t.position,type:t.type??"component"}),t?.type!=="section"||Array.isArray(t.entity)||$(t.entity.uid,t.entity))}catch{}},[x,$]),ei=s(e=>{try{let t=e.detail;t.uid&&t.propName&&N({id:t.uid,key:t.propName,data:t.propValue,group:t.group})}catch{}},[N]),eo=s(e=>{try{let t=e.detail;t.uid&&C(t.uid,t.data,t.group)}catch{}},[C]),ed=s(e=>{try{let t=e.detail;t.to&&t.uid&&A(t.uid,t.to,Number(t.position)??0)}catch{}},[A]),ea=s(e=>{try{let t=e.detail;t.uid&&O(t.uid)}catch{}},[O]),er=s(e=>{let t=e.detail;try{t.data&&k(t.data)}catch{}},[k]),el=s(e=>{let t=e.detail;t&&H(t)},[H]),es=s(e=>{let t=e.detail;t&&M(t)},[M]),ec=s(e=>{let t=e.detail;t&&B(t)},[B]),em=s(e=>{let t=e.detail;t&&J(t)},[J]),ep=s(e=>{let t=e.detail;t&&V(t)},[V]),ew=s(e=>{let t=e.detail;t&&E(t)},[E]),eu=s(e=>{let t=e.detail;t&&I(t)},[I]);c(()=>{X&&Y("google-font-element",X)},[X]);let ev=s(e=>{let t=e.detail;t.uid&&q(t.uid,t.name||"")},[q]),ey=s(e=>{let t=e.detail;t.uid&&D(t.uid,t.value||"",t.attr||"")},[D]),ef=s(e=>{let t=e.detail;t?.length&&L(t)},[L]),eh=s(e=>{let t=e.detail;t&&b(t)},[b]),eg=s(e=>{let t=e.detail;t&&S(t)},[S]),eE=s(e=>{let t=e.detail;t&&W(t)},[W]),eL=s(e=>{let t=e.detail.value,n=e.detail.mode,i=e.detail.settingType;z(t),Q(n),R(i)},[z,Q,R]),eb=s(e=>{let t=e.detail.settingType;R(t)},[R]),eS=s(e=>{let t=e.detail.mode;console.log(t),U(t)},[U]),eI=s(e=>{let t=e.detail;G(t)},[G]);return c(()=>{X&&Y("google-font-element",X)},[X]),c(()=>(window.addEventListener("update-shop-info",_),window.addEventListener("revalidate-query",Z),window.addEventListener("init-builder",et),window.addEventListener("add-entity",en),window.addEventListener("remove-entity",ea),window.addEventListener("move-entity",ed),window.addEventListener("force-update-entity-props",eo),window.addEventListener("update-entity-prop",ei),window.addEventListener("set-global-style",ee),window.addEventListener("update-global-swatches-data",er),window.addEventListener("on-off-header-footer",el),window.addEventListener("update-create-theme-section-count",es),window.addEventListener("update-shop-plan",ec),window.addEventListener("set-dynamic-product",ew),window.addEventListener("set-dynamic-collection",eu),window.addEventListener("update-item-name",ev),window.addEventListener("update-item-attribute",ey),window.addEventListener("set-product-offer",ef),window.addEventListener("set-dynamic-discount-offer",eh),window.addEventListener("update-sale-page-product-id",eg),window.addEventListener("limit-create-theme-section",eE),window.addEventListener("update-interaction-is-select-on-page",eL),window.addEventListener("update-interaction-item",eI),window.addEventListener("update-interaction-setting-type",eb),window.addEventListener("change-sidebar-mode",eS),window.addEventListener("update-font-type",ep),window.addEventListener("update-price-with-currency",em),()=>{window.removeEventListener("update-shop-info",_),window.removeEventListener("revalidate-query",Z),window.removeEventListener("init-builder",et),window.removeEventListener("add-entity",en),window.removeEventListener("remove-entity",ea),window.removeEventListener("move-entity",ed),window.removeEventListener("update-entity-prop",ei),window.removeEventListener("set-global-style",ee),window.removeEventListener("update-global-swatches-data",er),window.removeEventListener("on-off-header-footer",el),window.removeEventListener("update-create-theme-section-count",es),window.removeEventListener("update-shop-plan",ec),window.removeEventListener("update-price-with-currency",em),window.removeEventListener("set-dynamic-product",ew),window.removeEventListener("set-dynamic-collection",eu),window.removeEventListener("update-item-name",ev),window.removeEventListener("update-item-attribute",ey),window.removeEventListener("set-product-offer",ef),window.removeEventListener("update-sale-page-product-id",eg),window.removeEventListener("limit-create-theme-section",eE),window.removeEventListener("update-interaction-is-select-on-page",eL),window.removeEventListener("update-interaction-item",eI),window.removeEventListener("update-interaction-setting-type",eb),window.removeEventListener("update-font-type",ep)}),[en,ec,eo,ei,et,ed,ea,ee,er,Z,_,el,es,ew,eu,ev,ey,ef,eg,eE,eI,eL,eb,ep,eS,eh,em]),e("div",{className:"toolbox"})};var Toolbox$1=r(Toolbox);export{Toolbox$1 as default};

package/dist/esm/components/builder/const.js

@@ -1,54 +1 @@
-const devices = [
-    {
-        id: 'iphone-13-mini',
-        name: 'iPhone 13 Mini',
-        width: 375
-    },
-    {
-        id: 'iphone-13-pro',
-        name: 'iPhone 13 Pro',
-        width: 390
-    },
-    {
-        id: 'iphone-11-pro-max',
-        name: 'iPhone 11 Pro Max',
-        width: 414
-    },
-    {
-        id: 'iphone-15-pro-max',
-        name: 'iPhone 15 Pro Max',
-        width: 430
-    },
-    {
-        id: 'pixel-7',
-        name: 'Pixel 7',
-        width: 412
-    },
-    {
-        id: 'galaxy-s8-plus',
-        name: 'Galaxy S8+',
-        width: 360
-    },
-    {
-        id: 'galaxy-s20-ultra',
-        name: 'Galaxy S20 Ultra',
-        width: 412
-    },
-    {
-        id: 'ipad-mini',
-        name: 'iPad Mini',
-        width: 768
-    },
-    {
-        id: 'ipad-air',
-        name: 'iPad Air',
-        width: 820
-    },
-    {
-        id: 'ipad-pro',
-        name: 'iPad Pro',
-        width: 1024
-    }
-];
-
-export { devices };
+let devices=[{id:"iphone-13-mini",name:"iPhone 13 Mini",width:375},{id:"iphone-13-pro",name:"iPhone 13 Pro",width:390},{id:"iphone-11-pro-max",name:"iPhone 11 Pro Max",width:414},{id:"iphone-15-pro-max",name:"iPhone 15 Pro Max",width:430},{id:"pixel-7",name:"Pixel 7",width:412},{id:"galaxy-s8-plus",name:"Galaxy S8+",width:360},{id:"galaxy-s20-ultra",name:"Galaxy S20 Ultra",width:412},{id:"ipad-mini",name:"iPad Mini",width:768},{id:"ipad-air",name:"iPad Air",width:820},{id:"ipad-pro",name:"iPad Pro",width:1024}];export{devices};

package/dist/esm/components/builder/toolbar/const.js

@@ -1,4 +1 @@
-const TOOLBAR_HOVER_HEIGHT = 24;
-const TOOLBAR_ACTIVE_HEIGHT = 32;
-
-export { TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT };
+let TOOLBAR_HOVER_HEIGHT=24,TOOLBAR_ACTIVE_HEIGHT=32;export{TOOLBAR_ACTIVE_HEIGHT,TOOLBAR_HOVER_HEIGHT};

package/dist/esm/components/builder/toolbar/utils/findDOMClosest.js

@@ -1,39 +1 @@
-const findDOMClosest = ($target, selectors)=>{
-    const closestElements = {
-        $childrenSlot: null,
-        $productFeatureImg: null,
-        $section: null,
-        $component: null,
-        $disableIframeClick: null,
-        $stickyMinimize: null,
-        $toolbar: null,
-        $gpText: null,
-        $imageDetection: null,
-        $popupTriggerButton: null
-    };
-    let currentElement = $target;
-    while(currentElement){
-        // Check for stop conditions
-        if (currentElement.matches('[data-uid="ROOT"], .builder, #storefront')) {
-            break;
-        }
-        // Check if currentElement matches any of the selectors
-        for (const [key, selector] of Object.entries(selectors)){
-            if (!closestElements[key] && currentElement.matches(selector)) {
-                closestElements[key] = currentElement;
-            }
-        }
-        // If all closest elements are found, break the loop
-        if (Object.values(closestElements).every((el)=>el !== null)) {
-            break;
-        }
-        // Move up to the parent element
-        currentElement = currentElement.parentElement;
-    }
-    // Reset ram
-    currentElement = null;
-    // Return
-    return closestElements;
-};
-
-export { findDOMClosest };
+let findDOMClosest=(l,e)=>{let t={$childrenSlot:null,$productFeatureImg:null,$section:null,$component:null,$disableIframeClick:null,$stickyMinimize:null,$toolbar:null,$gpText:null,$imageDetection:null,$popupTriggerButton:null},n=l;for(;n&&!n.matches('[data-uid="ROOT"], .builder, #storefront');){for(let[l,u]of Object.entries(e))!t[l]&&n.matches(u)&&(t[l]=n);if(Object.values(t).every(l=>null!==l))break;n=n.parentElement}return n=null,t};export{findDOMClosest};

package/dist/esm/components/builder/toolbar/utils/findOverflowParent.js

@@ -1,18 +1 @@
-import { isOverToolbarPosition } from './isOverToolbarPosition.js';
-import { isSection } from './isSection.js';
-import { notVisible } from './notVisible.js';
-
-const findOverflowParent = (element, initEl)=>{
-    const thisEl = element;
-    const origEl = initEl || thisEl;
-    if (!thisEl) return;
-    if (isSection(thisEl)) return;
-    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
-    if (thisEl.parentElement) {
-        return findOverflowParent(thisEl.parentElement, origEl);
-    } else {
-        return;
-    }
-};
-
-export { findOverflowParent };
+import{isOverToolbarPosition as e}from"./isOverToolbarPosition.js";import{isSection as r}from"./isSection.js";import{notVisible as o}from"./notVisible.js";let findOverflowParent=(t,i)=>{let n=i||t;if(t&&!r(t))return o(t)&&e(i,t)?t:t.parentElement?findOverflowParent(t.parentElement,n):void 0};export{findOverflowParent};

package/dist/esm/components/builder/toolbar/utils/getChildrenByAttrSelector.js

@@ -1,16 +1 @@
-const getChildrenByAttrSelector = ($el, attrSelector)=>{
-    const childLen = $el.children.length;
-    if (childLen) {
-        for(let i = 0; i < childLen; i++){
-            const children = $el.children[i];
-            if (children) {
-                const is = children.getAttribute(attrSelector);
-                if (is) {
-                    return children;
-                }
-            }
-        }
-    }
-};
-
-export { getChildrenByAttrSelector };
+let getChildrenByAttrSelector=(e,t)=>{let r=e.children.length;if(r)for(let l=0;l<r;l++){let r=e.children[l];if(r){let e=r.getAttribute(t);if(e)return r}}};export{getChildrenByAttrSelector};

package/dist/esm/components/builder/toolbar/utils/getDOMElementParents.js

@@ -1,30 +1 @@
-const getDOMElementParents = ($el, selector, limit)=>{
-    // Set up a parent array
-    const parents = [];
-    // Push each parent $elms to the array
-    while($el){
-        $el = $el.parentElement ?? undefined;
-        if ($el) {
-            if ($el.tagName === 'BODY' || $el.getAttribute('data-uid') === 'ROOT') {
-                break;
-            }
-            if (selector) {
-                if ($el.matches(selector)) {
-                    parents.push($el);
-                    if (limit && parents.length == limit) {
-                        return parents;
-                    }
-                }
-                continue;
-            }
-            parents.push($el);
-            if (limit && parents.length == limit) {
-                return parents;
-            }
-        }
-    }
-    // Return our parent array
-    return parents;
-};
-
-export { getDOMElementParents };
+let getDOMElementParents=(e,t,n)=>{let r=[];for(;e;)if(e=e.parentElement??void 0){if("BODY"===e.tagName||"ROOT"===e.getAttribute("data-uid"))break;if(t){if(e.matches(t)&&(r.push(e),n&&r.length==n))return r;continue}if(r.push(e),n&&r.length==n)break}return r};export{getDOMElementParents};