@plaidev/karte-action-sdk 1.1.267-29082699.18b12594 → 1.1.268-29083022.42c3d847

package/dist/svelte5/hydrate/index.es.js

@@ -1352,6 +1352,58 @@ function showOnTime(props, show = NOOP) {
         ? onTime(props.show_on_time_count * 1000, () => show())
         : null;
 }
+/** @internal */
+function and(fn, ...conditionFns) {
+    return checkAndDo((conditions, idx) => {
+        conditions[idx] = true;
+        return conditions.every(t => t == null || t);
+    }, fn, ...conditionFns);
+}
+/** @internal */
+function or(fn, ...conditionFns) {
+    return checkAndDo((conditions, idx) => {
+        if (conditions.some(t => t)) {
+            return conditions[idx]; // this is true when show_on_scroll_reenter is true
+        }
+        conditions[idx] = true;
+        return true;
+    }, fn, ...conditionFns);
+}
+function checkAndDo(checkFn, fn, ...conditionFns) {
+    let initialized = false;
+    const checkBeforeInitialized = [];
+    let haveCondition = true;
+    const conditions = Array(conditionFns.length).fill(null);
+    const checkAndDos = Array(conditionFns.length).fill(() => { });
+    const cleanups = Array(conditionFns.length).fill(null);
+    const generageCheckAndDo = (idx) => () => {
+        if (!initialized) {
+            checkBeforeInitialized.push(idx);
+            return;
+        }
+        if (!haveCondition || !checkFn(conditions, idx))
+            return;
+        fn?.();
+    };
+    conditionFns.forEach((conditionFn, i) => {
+        const checkAndDo = generageCheckAndDo(i);
+        checkAndDos[i] = checkAndDo;
+        const cleanup = conditionFn(checkAndDo);
+        cleanups[i] = cleanup;
+        if (cleanup != null)
+            conditions[i] = false;
+    });
+    haveCondition = conditions.some(c => c !== null);
+    const cleanupAll = () => {
+        cleanups.forEach((cleanup, i) => {
+            cleanup?.();
+            cleanups[i] = null;
+        });
+    };
+    initialized = true;
+    checkBeforeInitialized.forEach(i => checkAndDos[i]());
+    return haveCondition ? cleanupAll : null;
+}
 
 /**
  * アクションテーブルに関連するコードの管理
@@ -1615,6 +1667,32 @@ function initActionTable(localVariablesQuery) {
     setVariables(initValues);
 }
 
+/**
+ * モーダル(ポップアップ)に関連するコードの管理
+ *
+ * アクションのShow, Close, ChangeStateの状態はここで管理する。
+ */
+/**
+ * アクションを表示する
+ *
+ * @public
+ */
+function showAction$1() {
+    const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
+    window.dispatchEvent(event);
+}
+/**
+ * アクションを閉じる
+ *
+ * @param trigger - 閉じた時のトリガー。デフォルト `'none'`
+ *
+ * @public
+ */
+function closeAction$1(trigger = 'none') {
+    const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
+    window.dispatchEvent(event);
+}
+
 /**
  * モーダル(ポップアップ)に関連するコードの管理
  *
@@ -1632,12 +1710,57 @@ const handleState = (event) => {
         });
     }
 };
+/**
+ * アクションが表示 (show) された後にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onShow(fn) {
+    let { onShowHandlers } = getInternalHandlers();
+    if (!onShowHandlers) {
+        onShowHandlers = [];
+    }
+    onShowHandlers.push(fn);
+    setInternalHandlers({ onShowHandlers });
+}
+/**
+ * アクションがクローズ (close) される前にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onClose(fn) {
+    let { onCloseHandlers } = getInternalHandlers();
+    if (!onCloseHandlers) {
+        onCloseHandlers = [];
+    }
+    onCloseHandlers.push(fn);
+    setInternalHandlers({ onCloseHandlers });
+}
+/**
+ * アクションのステートが変更された (changeState) 後にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onChangeState(fn) {
+    let { onChangeStateHandlers } = getInternalHandlers();
+    if (!onChangeStateHandlers) {
+        onChangeStateHandlers = [];
+    }
+    onChangeStateHandlers.push(fn);
+    setInternalHandlers({ onChangeStateHandlers });
+}
 /**
  * アクションを表示する
  *
  * @public
  */
-function showAction$1() {
+function showAction() {
     const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
     window.dispatchEvent(event);
 }
@@ -1648,10 +1771,114 @@ function showAction$1() {
  *
  * @public
  */
-function closeAction$1(trigger = 'none') {
+function closeAction(trigger = 'none') {
     const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
     window.dispatchEvent(event);
 }
+/**
+ * アクションに CSS を適用する
+ *
+ * @param css - 適用する CSS
+ *
+ * @returns 適用された style 要素を返す Promise
+ *
+ * @public
+ */
+async function applyCss(css) {
+    return new Promise((resolve, reject) => {
+        const style = document.createElement('style');
+        style.textContent = css;
+        const shadowRoot = getActionRoot();
+        if (!shadowRoot)
+            return;
+        shadowRoot.append(style);
+        style.addEventListener('load', () => resolve(style));
+        style.addEventListener('error', () => reject(style));
+    });
+}
+async function fixFontFaceIssue(href, cssRules) {
+    const css = new CSSStyleSheet();
+    // @ts-ignore
+    await css.replace(cssRules);
+    const rules = [];
+    const fixedRules = [];
+    Array.from(css.cssRules).forEach(cssRule => {
+        if (cssRule.type !== 5) {
+            rules.push(cssRule.cssText);
+        }
+        // type 5 is @font-face
+        const split = href.split('/');
+        const stylePath = split.slice(0, split.length - 1).join('/');
+        const cssText = cssRule.cssText;
+        const newCssText = cssText.replace(
+        // relative paths
+        /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
+        if (cssText === newCssText)
+            return;
+        fixedRules.push(newCssText);
+    });
+    return [rules.join('\n'), fixedRules.join('\n')];
+}
+/**
+ * アクションにグローバルなスタイルを読み込む
+ *
+ * @param href - style ファイルのリンク URL
+ *
+ * @public
+ */
+async function loadStyle(href) {
+    const sr = getActionRoot();
+    if (!sr)
+        return;
+    let cssRules = '';
+    try {
+        const res = await fetch(href);
+        cssRules = await res.text();
+    }
+    catch (_) {
+        // pass
+    }
+    if (!cssRules)
+        return;
+    // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
+    // @see https://stackoverflow.com/a/63717709
+    const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
+    const css = new CSSStyleSheet();
+    // @ts-ignore
+    await css.replace(rules);
+    const fontFaceCss = new CSSStyleSheet();
+    // @ts-ignore
+    await fontFaceCss.replace(fontFaceRules);
+    // @ts-ignore
+    sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
+    // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
+    // @see https://stackoverflow.com/a/63717709
+    // @ts-ignore
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
+}
+// @internal
+function getCssVariables(data) {
+    return Object.entries(data)
+        .filter(([key, value]) => {
+        return ['string', 'number'].includes(typeof value) && key.startsWith('--');
+    })
+        .map(([key, value]) => `${key}:${value}`)
+        .join(';');
+}
+/**
+ * アクションのルートの DOM 要素を取得する
+ *
+ * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
+ *
+ * @public
+ */
+function getActionRoot() {
+    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+    if (!root?.shadowRoot) {
+        return null;
+    }
+    return root.shadowRoot;
+}
 /** @internal */
 function createModal(App, options = {
     send: () => { },
@@ -1719,7 +1946,7 @@ function createModal(App, options = {
         if (app) {
             return;
         }
-        if (trigger === 'custom') {
+        if (!isOnSite() && trigger === 'custom') {
             return;
         }
         if (trigger === 'custom' && (options.props.show_on_scroll || options.props.show_on_time)) {
@@ -1746,9 +1973,9 @@ function createModal(App, options = {
         if (app) {
             return;
         }
+        const target = ensureActionRoot(isOnSite());
         const props = {
-            target: ensureActionRoot$1(!true),
-            hydrate: true,
+            target,
             props: {
                 send: options.send,
                 publish: options.publish,
@@ -1783,17 +2010,43 @@ function createModal(App, options = {
                 },
             },
         };
-        app =                     svelte.hydrate(App, props)
-                
+        app = // @ts-ignore -- Svelte3 では `mount` は存在しない
+                svelte.mount(App, props)
             ;
     };
     const handleShow = (event) => {
         const trigger = event?.detail?.trigger ? event.detail.trigger : 'none';
         show(trigger);
     };
+    const currying = (conditionFn, options) => (fn) => conditionFn(options.props, fn);
     const autoShow = () => {
         return show('auto');
     };
+    const autoClose = () => {
+        return close('auto');
+    };
+    const listenCloseTrigger = () => {
+        const cleanups = [];
+        const curried = fn => hideOnScroll(options.props, fn, autoShow);
+        if (options.props.hide_and_condition) {
+            cleanups.push(and(autoClose, curried, currying(hideOnTime, options)) || NOOP);
+        }
+        else {
+            cleanups.push(or(autoClose, curried, currying(hideOnTime, options)) || NOOP);
+        }
+        return cleanups;
+    };
+    const listenShowTrigger = () => {
+        const cleanups = [];
+        const curried = fn => showOnScroll(options.props, fn, autoClose);
+        if (options.props.show_and_condition) {
+            cleanups.push(and(autoShow, curried, currying(showOnTime, options)) || NOOP);
+        }
+        else {
+            cleanups.push(or(autoShow, curried, currying(showOnTime, options)) || NOOP);
+        }
+        return cleanups;
+    };
     // ここからメインの処理
     initialize({ send: options.send, initialState: data.initial_state });
     // ActionTable APIへの非同期リクエスト
@@ -1808,9 +2061,13 @@ function createModal(App, options = {
     window.addEventListener(ACTION_CHANGE_STATE_EVENT, handleState);
     let showTriggerCleanups = [];
     let closeTriggerCleanups = [];
-    {
+    if (!isOnSite()) {
         autoShow();
     }
+    else {
+        showTriggerCleanups = listenShowTrigger();
+        closeTriggerCleanups = listenCloseTrigger();
+    }
     // 旧Widget API IFの処理
     const { onCreateHandlers } = getInternalHandlers();
     if (onCreateHandlers) {
@@ -1839,7 +2096,7 @@ function createModal(App, options = {
     return appCleanup;
 }
 /** @internal */
-function ensureActionRoot$1(useShadow = true) {
+function ensureActionRoot(useShadow = true) {
     const systemConfig = getSystem();
     const rootAttrs = {
         class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -1862,34 +2119,143 @@ function ensureActionRoot$1(useShadow = true) {
         return el;
     }
 }
-
 /**
- * スクリプト接客が利用するコードの管理
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
  */
-/** @internal */
-async function runScript$1(options = {
+const show = showAction;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const close = closeAction;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const ensureModalRoot = ensureActionRoot;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+function createApp(App, options = {
     send: () => { },
     publish: () => { },
     props: {},
     variables: {},
     localVariablesQuery: undefined,
-    karteTemplate: {},
-    context: { api_key: '', collection_endpoint: undefined },
+    context: { api_key: '' },
 }) {
-    if (!options.onCreate)
-        return;
-    let data = getVariables();
-    initialize({ send: options.send, initialState: data.initial_state });
-    initActionTable(options.localVariablesQuery);
-    const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key, options.context.collection_endpoint);
-    if (!success)
-        return;
-    // Action Tableの取得結果を反映する
-    data = getVariables();
-    const actionProps = {
-        send: options.send,
-        publish: options.publish,
-        data,
+    let app = null;
+    const close = () => {
+        if (app) {
+            {
+                // @ts-ignore -- Svelte3 では `unmount` は存在しない
+                svelte.unmount(app);
+            }
+            app = null;
+        }
+    };
+    const appArgs = {
+        target: null,
+        props: {
+            send: options.send,
+            publish: options.publish,
+            close,
+            data: {
+                ...options.props,
+                ...options.variables,
+            },
+        },
+    };
+    const win = ensureActionRoot(isOnSite());
+    appArgs.target = win;
+    return {
+        close,
+        show: () => {
+            if (app) {
+                return;
+            }
+            options.send('message_open');
+            app = // @ts-ignore -- Svelte3 では `mount` は存在しない
+                    svelte.mount(App, appArgs)
+                ;
+        },
+    };
+}
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
+    console.log('createFog');
+    const root = ensureModalRoot();
+    if (root.querySelector('.__krt-fog')) {
+        return { fog: null, close: () => { } };
+    }
+    const fog = document.createElement('div');
+    fog.className = '__krt-fog';
+    Object.assign(fog.style, {
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        'z-index': zIndex,
+        'background-color': color,
+        opacity,
+    });
+    const close = () => {
+        onclick();
+        fog.remove();
+    };
+    fog.onclick = close;
+    root.appendChild(fog);
+    return { fog, close };
+}
+
+/**
+ * スクリプト接客が利用するコードの管理
+ */
+/** @internal */
+async function runScript$1(options = {
+    send: () => { },
+    publish: () => { },
+    props: {},
+    variables: {},
+    localVariablesQuery: undefined,
+    karteTemplate: {},
+    context: { api_key: '', collection_endpoint: undefined },
+}) {
+    if (!options.onCreate)
+        return;
+    let data = getVariables();
+    initialize({ send: options.send, initialState: data.initial_state });
+    initActionTable(options.localVariablesQuery);
+    const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key, options.context.collection_endpoint);
+    if (!success)
+        return;
+    // Action Tableの取得結果を反映する
+    data = getVariables();
+    const actionProps = {
+        send: options.send,
+        publish: options.publish,
+        data,
     };
     options.send('script_fired');
     // 旧Widget API IFの処理
@@ -2030,7 +2396,7 @@ function create(App, options) {
         runScript$1(options);
     }
     else {
-        modalCleanup = createModal(App, options);
+        modalCleanup = createModal(App, options) ;
     }
     return () => {
         loggerCleanup();
@@ -2098,313 +2464,6 @@ function destroy() {
     dispatchDestroyEvent();
 }
 
-/**
- * モーダル(ポップアップ)に関連するコードの管理
- *
- * アクションのShow, Close, ChangeStateの状態はここで管理する。
- */
-/**
- * アクションが表示 (show) された後にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-function onShow(fn) {
-    let { onShowHandlers } = getInternalHandlers();
-    if (!onShowHandlers) {
-        onShowHandlers = [];
-    }
-    onShowHandlers.push(fn);
-    setInternalHandlers({ onShowHandlers });
-}
-/**
- * アクションがクローズ (close) される前にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-function onClose(fn) {
-    let { onCloseHandlers } = getInternalHandlers();
-    if (!onCloseHandlers) {
-        onCloseHandlers = [];
-    }
-    onCloseHandlers.push(fn);
-    setInternalHandlers({ onCloseHandlers });
-}
-/**
- * アクションのステートが変更された (changeState) 後にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-function onChangeState(fn) {
-    let { onChangeStateHandlers } = getInternalHandlers();
-    if (!onChangeStateHandlers) {
-        onChangeStateHandlers = [];
-    }
-    onChangeStateHandlers.push(fn);
-    setInternalHandlers({ onChangeStateHandlers });
-}
-/**
- * アクションを表示する
- *
- * @public
- */
-function showAction() {
-    const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
-    window.dispatchEvent(event);
-}
-/**
- * アクションを閉じる
- *
- * @param trigger - 閉じた時のトリガー。デフォルト `'none'`
- *
- * @public
- */
-function closeAction(trigger = 'none') {
-    const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
-    window.dispatchEvent(event);
-}
-/**
- * アクションに CSS を適用する
- *
- * @param css - 適用する CSS
- *
- * @returns 適用された style 要素を返す Promise
- *
- * @public
- */
-async function applyCss(css) {
-    return new Promise((resolve, reject) => {
-        const style = document.createElement('style');
-        style.textContent = css;
-        const shadowRoot = getActionRoot();
-        if (!shadowRoot)
-            return;
-        shadowRoot.append(style);
-        style.addEventListener('load', () => resolve(style));
-        style.addEventListener('error', () => reject(style));
-    });
-}
-async function fixFontFaceIssue(href, cssRules) {
-    const css = new CSSStyleSheet();
-    // @ts-ignore
-    await css.replace(cssRules);
-    const rules = [];
-    const fixedRules = [];
-    Array.from(css.cssRules).forEach(cssRule => {
-        if (cssRule.type !== 5) {
-            rules.push(cssRule.cssText);
-        }
-        // type 5 is @font-face
-        const split = href.split('/');
-        const stylePath = split.slice(0, split.length - 1).join('/');
-        const cssText = cssRule.cssText;
-        const newCssText = cssText.replace(
-        // relative paths
-        /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
-        if (cssText === newCssText)
-            return;
-        fixedRules.push(newCssText);
-    });
-    return [rules.join('\n'), fixedRules.join('\n')];
-}
-/**
- * アクションにグローバルなスタイルを読み込む
- *
- * @param href - style ファイルのリンク URL
- *
- * @public
- */
-async function loadStyle(href) {
-    const sr = getActionRoot();
-    if (!sr)
-        return;
-    let cssRules = '';
-    try {
-        const res = await fetch(href);
-        cssRules = await res.text();
-    }
-    catch (_) {
-        // pass
-    }
-    if (!cssRules)
-        return;
-    // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
-    // @see https://stackoverflow.com/a/63717709
-    const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
-    const css = new CSSStyleSheet();
-    // @ts-ignore
-    await css.replace(rules);
-    const fontFaceCss = new CSSStyleSheet();
-    // @ts-ignore
-    await fontFaceCss.replace(fontFaceRules);
-    // @ts-ignore
-    sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
-    // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
-    // @see https://stackoverflow.com/a/63717709
-    // @ts-ignore
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
-}
-// @internal
-function getCssVariables(data) {
-    return Object.entries(data)
-        .filter(([key, value]) => {
-        return ['string', 'number'].includes(typeof value) && key.startsWith('--');
-    })
-        .map(([key, value]) => `${key}:${value}`)
-        .join(';');
-}
-/**
- * アクションのルートの DOM 要素を取得する
- *
- * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
- *
- * @public
- */
-function getActionRoot() {
-    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
-    if (!root?.shadowRoot) {
-        return null;
-    }
-    return root.shadowRoot;
-}
-/** @internal */
-function ensureActionRoot(useShadow = true) {
-    const systemConfig = getSystem();
-    const rootAttrs = {
-        class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
-        [`data-${KARTE_ACTION_RID}`]: actionId,
-        [`data-${KARTE_ACTION_SHORTEN_ID}`]: systemConfig.shortenId
-            ? systemConfig.shortenId
-            : ALL_ACTION_SHORTEN_ID,
-        style: { display: 'block' },
-    };
-    let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
-    if (el == null) {
-        el = h('div', rootAttrs);
-        document.body.appendChild(el);
-    }
-    const isShadow = !!document.body.attachShadow && useShadow;
-    if (isShadow) {
-        return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
-    }
-    else {
-        return el;
-    }
-}
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const show = showAction;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const close = closeAction;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const ensureModalRoot = ensureActionRoot;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function createApp(App, options = {
-    send: () => { },
-    publish: () => { },
-    props: {},
-    variables: {},
-    localVariablesQuery: undefined,
-    context: { api_key: '' },
-}) {
-    let app = null;
-    const close = () => {
-        if (app) {
-            {
-                // @ts-ignore -- Svelte3 では `unmount` は存在しない
-                svelte.unmount(app);
-            }
-            app = null;
-        }
-    };
-    const appArgs = {
-        target: null,
-        props: {
-            send: options.send,
-            publish: options.publish,
-            close,
-            data: {
-                ...options.props,
-                ...options.variables,
-            },
-        },
-    };
-    const win = ensureModalRoot(true);
-    appArgs.target = win;
-    return {
-        close,
-        show: () => {
-            if (app) {
-                return;
-            }
-            options.send('message_open');
-            app = // @ts-ignore -- Svelte3 では `mount` は存在しない
-                    svelte.mount(App, appArgs)
-                ;
-        },
-    };
-}
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
-    const root = ensureModalRoot();
-    if (root.querySelector('.__krt-fog')) {
-        return { fog: null, close: () => { } };
-    }
-    const fog = document.createElement('div');
-    fog.className = '__krt-fog';
-    Object.assign(fog.style, {
-        position: 'fixed',
-        left: 0,
-        top: 0,
-        width: '100%',
-        height: '100%',
-        'z-index': zIndex,
-        'background-color': color,
-        opacity,
-    });
-    const close = () => {
-        onclick();
-        fog.remove();
-    };
-    fog.onclick = close;
-    root.appendChild(fog);
-    return { fog, close };
-}
-
 const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
 const MAX_LENGTH_FREE_ANSWER = 2000;
 function createAnswerValue(value) {