@plaidev/karte-action-sdk 1.1.176 → 1.1.177-28040266.37adb031

package/dist/index.es.js

@@ -1,8 +1,33 @@
-import { linear, elasticOut, cubicOut } from 'svelte/easing';
 import { writable, get } from 'svelte/store';
 import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeUpdate$1, afterUpdate as afterUpdate$1, tick as tick$1, setContext, getContext, createEventDispatcher } from 'svelte';
 import { SvelteComponent, init, safe_not_equal, create_slot, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, append_styles, empty, insert, group_outros, check_outros, detach, component_subscribe, element, space, attr, noop, listen, null_to_empty, is_function, create_component, mount_component, destroy_component, add_render_callback, create_in_transition, binding_callbacks, set_style, svg_element, append, destroy_each, text, set_data, src_url_equal, HtmlTag, construct_svelte_component, subscribe } from 'svelte/internal';
+import { linear, elasticOut, cubicOut } from 'svelte/easing';
+
+/** @internal */
+const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
+/** @internal */
+const KARTE_ACTION_ROOT = 'karte-action-root';
+/** @internal */
+const KARTE_ACTION_RID = 'karte-action-rid';
+/** @internal */
+const KARTE_ACTION_SHORTEN_ID = 'karte-action-id';
+/** @internal */
+const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
+/** @internal */
+const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
+// -------- The following codes are deprecated --------
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const KARTE_MODAL_ROOT = 'karte-modal-root';
 
+/**
+ * 静的変数に関連するコードを管理する
+ */
 /** @internal */
 const PropTypes = [
     'BooleanKeyword',
@@ -247,21 +272,13 @@ const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused
 const isPreview = () => {
     return false;
 };
+// prettier-ignore
 /** @internal */
-const handleFocus = (node) => (e) => {
-    if (node) {
-        // trap focus
-        const nodes = node.querySelectorAll('*');
-        const tabbable = Array.from(nodes).filter((n) => n.tabIndex >= 0);
-        let index = tabbable.indexOf(document.activeElement);
-        if (index === -1 && e.shiftKey)
-            index = 0;
-        index += tabbable.length + (e.shiftKey ? -1 : 1);
-        index %= tabbable.length;
-        tabbable[index].focus();
-        e.preventDefault();
-    }
-};
+const actionId = typeof __FIX_ACTION_CHANGE_STATE_EVENT__ === 'string'
+        ? __FIX_ACTION_CHANGE_STATE_EVENT__
+        : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
+            ? __FLYER_GEN_ACTION_ID_ON_BUILD__
+            : randStr();
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -449,6 +466,23 @@ function randStr(digit = 8) {
 function getGoogleFontsParam() {
     return 'family=' + Fonts.map(font => font.replace(/ /g, '+')).join('&family=');
 }
+/** @internal */
+const h = (type, props, ...children) => {
+    const el = document.createElement(type);
+    for (const key of Object.keys(props)) {
+        const v = props[key];
+        if (key === 'style') {
+            Object.assign(el.style, v);
+        }
+        else {
+            el.setAttribute(key, v);
+        }
+    }
+    for (const child of children) {
+        el.appendChild(child);
+    }
+    return el;
+};
 
 /**
  * Store to handle action setting
@@ -809,446 +843,123 @@ function resetVariables() {
  */
 const formData = writable({});
 
-function isEmpty(value) {
-    if (Array.isArray(value)) {
-        return value.length === 0;
-    }
-    else {
-        return !value;
-    }
-}
+/**
+ * アクションのログの記録の管理
+ */
+const MESSAGES_LIMIT = 1000;
+const EVENTS_LIMIT = 1000;
+// 実行ログ
+let logs = [];
+// KARTEイベント
+let events = [];
 /** @internal */
-function registerInput({ name, statePath, validator = () => true, initialValue, }) {
-    const writableValue = {
-        subscribe(run) {
-            return formData.subscribe(formData => {
-                run(formData[name]?.value);
-            });
-        },
-        set(value) {
-            formData.update(prev => ({
-                ...prev,
-                [name]: {
-                    statePath,
-                    value,
-                    isValid: validator(value),
-                },
-            }));
-        },
-        update(updater) {
-            formData.update(prev => {
-                const prevValue = prev[name]?.value;
-                return {
-                    ...prev,
-                    [name]: {
-                        statePath,
-                        value: updater(prevValue),
-                        isValid: validator(prevValue),
-                    },
-                };
-            });
-        },
-    };
-    if (isEmpty(get(writableValue))) {
-        writableValue.set(initialValue);
-    }
-    return writableValue;
+function getLogs() {
+    return logs;
 }
 /** @internal */
-const getValuesAreValidReader = statePath => ({
-    subscribe(callback) {
-        return formData.subscribe(formData => {
-            const valuesAreValid = Object.entries(formData)
-                .filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
-                .every(([_, { isValid }]) => isValid); // eslint-disable-line @typescript-eslint/no-unused-vars
-            callback(valuesAreValid);
-        });
+function getEvents() {
+    return events;
+}
+// iframe内の場合は親windowを参照する
+function w(w) {
+    return w.parent === w ? w : w.parent;
+}
+/**
+ * ログを送信する関数群
+ *
+ * @internal
+ */
+const logger = {
+    info: (...messages) => {
+        const log = cloneToJson({ level: 'info', messages, date: new Date() });
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
-});
-function formDataToEventValues(campaignId, formData) {
-    const questions = [];
-    const answersMap = {};
-    Object.entries(formData).forEach(([name, dataItem]) => {
-        questions.push(name);
-        const value = dataItem.value;
-        const answerKey = `question_${name}`;
-        if (Array.isArray(value)) {
-            answersMap[answerKey] = {
-                choices: value,
-            };
+    log: (...messages) => {
+        const log = cloneToJson({ level: 'info', messages, date: new Date() });
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
+    },
+    error: (...messages) => {
+        const log = cloneToJson({ level: 'error', messages, date: new Date() });
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
+    },
+    warn: (...messages) => {
+        const log = cloneToJson({ level: 'warn', messages, date: new Date() });
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
+    },
+    system: (...messages) => {
+        const log = cloneToJson({ level: 'system', messages, date: new Date() });
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
+    },
+    event: (name, values) => {
+        const event = values ? { name, values, date: new Date() } : { name, date: new Date() };
+        w(window).postMessage({
+            type: 'KARTE-ACTION-LOGGER',
+            detail: { method: 'event', event, values: values },
+        }, '*');
+    },
+    clear: () => {
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'clear' } }, '*');
+    },
+    clearEvents: () => {
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'clearEvents' } }, '*');
+    },
+};
+/**
+ * メッセージを実行ログに表示する
+ *
+ * @internal
+ */
+function listenLogger() {
+    const handler = (event) => {
+        const { type, detail } = event.data;
+        if (event.origin !== location.origin) {
+            return;
         }
-        else if (typeof value === 'string') {
-            answersMap[answerKey] = {
-                free_answer: value,
-            };
+        if (type !== 'KARTE-ACTION-LOGGER') {
+            return;
         }
-    });
-    return {
-        [campaignId]: {
-            questions,
-            ...answersMap,
-        },
+        if (detail.method === 'clear') {
+            logs = [];
+        }
+        else if (detail.method === 'clearEvents') {
+            events = [];
+        }
+        else if (detail.method === 'log') {
+            if (MESSAGES_LIMIT <= logs.length) {
+                logs.shift();
+            }
+            const { level, messages } = detail.log;
+            const log = { level, messages, date: new Date() };
+            logs.push(log);
+        }
+        else if (detail.method === 'event') {
+            if (EVENTS_LIMIT <= events.length) {
+                events.shift();
+            }
+            const { name, values } = detail.event;
+            const karteEvent = values
+                ? { name, values, date: new Date() }
+                : { name, date: new Date() };
+            events.push(karteEvent);
+        }
+    };
+    window.addEventListener('message', handler, false);
+    return () => {
+        window.removeEventListener('message', handler, false);
     };
 }
-/** @internal */
-function submit() {
-    const systemConfig = getSystem();
-    const campaignId = systemConfig.campaignId;
-    if (campaignId) {
-        const formData$1 = get(formData);
-        const values = formDataToEventValues(campaignId, formData$1);
-        return values;
-    }
-    return {};
-}
-
-/** @internal */
-const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
-/** @internal */
-const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
-// prettier-ignore
-/** @internal */
-const actionId = typeof __FIX_ACTION_CHANGE_STATE_EVENT__ === 'string'
-        ? __FIX_ACTION_CHANGE_STATE_EVENT__
-        : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
-            ? __FLYER_GEN_ACTION_ID_ON_BUILD__
-            : randStr();
-/** @internal */
-const ACTION_SHOW_EVENT = `KARTE-ACTION-SHOW-${actionId}`;
-/** @internal */
-const ACTION_CLOSE_EVENT = `KARTE-ACTION-CLOSE-${actionId}`;
-/** @internal */
-const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
-/** @internal */
-const ACTION_CHANGE_STATE_EVENT = `KARTE-ACTION-CHANGE-STATE-${actionId}`;
-/** @internal */
-const handleState = (event) => {
-    if (event.detail.actionId === actionId || event.detail.actionId === ALL_ACTION_ID) {
-        send_event('_message_state_changed', { state: event.detail.to });
-        setState$1(event.detail.to, { disableInPreview: event.detail.disableInPreview });
-    }
-};
-/** @internal */
-const initialize = (setting) => {
-    const newSetting = setSetting(setting);
-    if (newSetting.initialState) {
-        setState$1(newSetting.initialState);
-    }
-    setOpened(true);
-    setClosed(false); // deprecated
-    return () => finalize();
-};
-/** @internal */
-const finalize = () => {
-    resetSetting();
-};
-/** @internal */
-const send_event = (event_name, values) => {
-    const setting = getSetting();
-    setting?.send?.(event_name, values);
-};
-function _moveTo(to) {
-    window.dispatchEvent(new CustomEvent(ACTION_CHANGE_STATE_EVENT, { detail: { to, actionId } }));
-}
-/** @internal */
-const moveTo = (to) => () => {
-    _moveTo(to);
-};
-/** @internal */
-const linkTo = (to, targetBlank = true) => () => {
-    send_event('message_click', { url: to, state: getState$1() });
-    if (targetBlank) {
-        window.open(to);
-    }
-    else {
-        location.href = to;
-    }
-};
-/** @internal */
-const closeApp = (trigger) => () => {
-    window.dispatchEvent(new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } }));
-};
-/** @internal */
-const runScript = (handlerName) => () => {
-    const handlers = getEventHandlers();
-    const handler = handlers[handlerName];
-    if (!handler)
-        return;
-    try {
-        handler();
-    }
-    catch (e) {
-        console.warn('Failed to run custom handler', handlerName, e);
-    }
-};
-/** @internal */
-const submitForm = (to) => () => {
-    const values = submit();
-    send_event('_answer_question', values);
-    _moveTo(to);
-};
-/** @internal */
-const execOnClickOperation = (onClickOperation) => {
-    if (onClickOperation.operation === 'linkTo') {
-        linkTo(...onClickOperation.args)();
-    }
-    else if (onClickOperation.operation === 'moveTo') {
-        moveTo(...onClickOperation.args)();
-    }
-    else if (onClickOperation.operation === 'closeApp') {
-        closeApp(onClickOperation.args[0] || 'button')();
-    }
-    else if (onClickOperation.operation === 'runScript') {
-        runScript(onClickOperation.args[0])();
-    }
-    else if (onClickOperation.operation === 'submitForm') {
-        submitForm(onClickOperation.args[0])();
-    }
-};
-/** @internal */
-const haveFunction = (onClickOperation) => {
-    return onClickOperation.operation !== 'none';
-};
-function getAnimation(animation) {
-    switch (animation.type) {
-        case 'fade':
-            return `opacity: ${animation.progress}`;
-        case 'bounce': {
-            const translateX = animation.x;
-            const translateY = animation.y;
-            return `transform: translate3d(${translateX}%, ${translateY}%, 0) scale(${animation.progress});`;
-        }
-        case 'slide-down': {
-            const translateX = animation.x;
-            const translateY = animation.y - 100 * (1 - animation.progress);
-            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-        }
-        case 'slide-up': {
-            const translateX = animation.x;
-            const translateY = animation.y + 100 * (1 - animation.progress);
-            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-        }
-        case 'slide-left': {
-            const translateX = animation.x + 100 * (1 - animation.progress);
-            const translateY = animation.y;
-            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-        }
-        case 'slide-right': {
-            const translateX = animation.x - 100 * (1 - animation.progress);
-            const translateY = animation.y;
-            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-        }
-        case 'none': {
-            const translateX = animation.x;
-            const translateY = animation.y;
-            return `transform:  translate3d(${translateX}%, ${translateY}%, 0);`;
-        }
-        default:
-            console.warn(`[action-sdk] invalid '${animation}', so we use 'transform: none' instead`);
-            return 'transform: none';
-    }
-}
-const EASING = {
-    fade: linear,
-    bounce: elasticOut,
-    'slide-down': cubicOut,
-    'slide-up': cubicOut,
-    'slide-left': cubicOut,
-    'slide-right': cubicOut,
-    none: linear,
-};
-/**
- * The function to activate svelte animation.
- *
- * @param node - A target node of animation. This argument is passed by svelte, by default.
- * @param customAnimationOptions - A custom animation option object
- *
- * @see {@link https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions| Custom transition functions} for detail documentation
- *
- * @internal
- */
-function customAnimation(node, { transform, animationStyle, delay = 0, duration = 1000 }) {
-    const [x, y] = transform;
-    return {
-        delay,
-        duration,
-        easing: EASING[animationStyle],
-        css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
-    };
-}
-/**
- * ES Modules に対応していない JavaScript をページに読み込む
- *
- * @param src - JavaScript ファイルのリンク URL
- *
- * @public
- */
-async function loadGlobalScript(src) {
-    return new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        script.src = src;
-        document.body.appendChild(script);
-        script.addEventListener('load', () => resolve(script));
-        script.addEventListener('error', () => reject(script));
-    });
-}
-/**
- * グローバル CSS をページに適用する
- *
- * @param css - CSS
- *
- * @public
- */
-async function applyGlobalCss(css) {
-    return new Promise((resolve, reject) => {
-        const style = document.createElement('style');
-        style.textContent = css;
-        document.body.appendChild(style);
-        style.addEventListener('load', () => resolve(style));
-        style.addEventListener('error', () => reject(style));
-    });
-}
-/**
- * style ファイルをページに読み込む
- *
- * @param href - style ファイルのリンク URL
- *
- * @public
- */
-async function loadGlobalStyle(href) {
-    return new Promise((resolve, reject) => {
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = href;
-        document.body.appendChild(link);
-        link.addEventListener('load', () => resolve(link));
-        link.addEventListener('error', () => reject(link));
-    });
-}
-// @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(';');
-}
-
-/**
- * アクションのログの記録の管理
- */
-const MESSAGES_LIMIT = 1000;
-const EVENTS_LIMIT = 1000;
-// 実行ログ
-let logs = [];
-// KARTEイベント
-let events = [];
-/** @internal */
-function getLogs() {
-    return logs;
-}
-/** @internal */
-function getEvents() {
-    return events;
-}
-// iframe内の場合は親windowを参照する
-function w(w) {
-    return w.parent === w ? w : w.parent;
-}
-/**
- * ログを送信する関数群
- *
- * @internal
- */
-const logger = {
-    info: (...messages) => {
-        const log = cloneToJson({ level: 'info', messages, date: new Date() });
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
-    },
-    log: (...messages) => {
-        const log = cloneToJson({ level: 'info', messages, date: new Date() });
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
-    },
-    error: (...messages) => {
-        const log = cloneToJson({ level: 'error', messages, date: new Date() });
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
-    },
-    warn: (...messages) => {
-        const log = cloneToJson({ level: 'warn', messages, date: new Date() });
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
-    },
-    system: (...messages) => {
-        const log = cloneToJson({ level: 'system', messages, date: new Date() });
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
-    },
-    event: (name, values) => {
-        const event = values ? { name, values, date: new Date() } : { name, date: new Date() };
-        w(window).postMessage({
-            type: 'KARTE-ACTION-LOGGER',
-            detail: { method: 'event', event, values: values },
-        }, '*');
-    },
-    clear: () => {
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'clear' } }, '*');
-    },
-    clearEvents: () => {
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'clearEvents' } }, '*');
-    },
-};
-/**
- * メッセージを実行ログに表示する
- *
- * @internal
- */
-function listenLogger() {
-    const handler = (event) => {
-        const { type, detail } = event.data;
-        if (event.origin !== location.origin) {
-            return;
-        }
-        if (type !== 'KARTE-ACTION-LOGGER') {
-            return;
-        }
-        if (detail.method === 'clear') {
-            logs = [];
-        }
-        else if (detail.method === 'clearEvents') {
-            events = [];
-        }
-        else if (detail.method === 'log') {
-            if (MESSAGES_LIMIT <= logs.length) {
-                logs.shift();
-            }
-            const { level, messages } = detail.log;
-            const log = { level, messages, date: new Date() };
-            logs.push(log);
-        }
-        else if (detail.method === 'event') {
-            if (EVENTS_LIMIT <= events.length) {
-                events.shift();
-            }
-            const { name, values } = detail.event;
-            const karteEvent = values
-                ? { name, values, date: new Date() }
-                : { name, date: new Date() };
-            events.push(karteEvent);
-        }
-    };
-    window.addEventListener('message', handler, false);
-    return () => {
-        window.removeEventListener('message', handler, false);
-    };
-}
-function cloneToJson(data) {
-    try {
-        return JSON.parse(JSON.stringify(data));
-    }
-    catch (e) {
-        return data;
+function cloneToJson(data) {
+    try {
+        return JSON.parse(JSON.stringify(data));
+    }
+    catch (e) {
+        return data;
     }
 }
 
+/**
+ * モーダル(ポップアップ)のロジックを管理する
+ */
 function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
     if (direction === 'down' && deltaRate > 0) {
         downFn();
@@ -1393,6 +1104,23 @@ function checkAndDo(checkFn, fn, ...conditionFns) {
     return haveCondition ? cleanupAll : null;
 }
 
+/** @internal */
+const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
+/** @internal */
+const ACTION_SHOW_EVENT = `KARTE-ACTION-SHOW-${actionId}`;
+/** @internal */
+const ACTION_CLOSE_EVENT = `KARTE-ACTION-CLOSE-${actionId}`;
+/** @internal */
+const ACTION_CHANGE_STATE_EVENT = `KARTE-ACTION-CHANGE-STATE-${actionId}`;
+/** @internal */
+const send_event = (event_name, values) => {
+    const setting = getSetting();
+    setting?.send?.(event_name, values);
+};
+
+/**
+ * アクションテーブルに関連するコードの管理
+ */
 const DEFAULT_COLLECTION_ENDPOINT = typeof __FLYER_GEN_COLLECTION_API_ENDPOINT__ === 'string'
     ? __FLYER_GEN_COLLECTION_API_ENDPOINT__
     : 'https://t.karte.io/collection';
@@ -1498,83 +1226,34 @@ const loadActionTable = async (config, api_key, endpoint) => {
     }, {});
 };
 
-/** @internal */
-const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
-/**
- * アクションが作成 (create) される前にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-function onCreate(fn) {
-    let { onCreateHandlers } = getInternalHandlers();
-    if (!onCreateHandlers) {
-        onCreateHandlers = [];
-    }
-    onCreateHandlers.push(fn);
-    setInternalHandlers({ onCreateHandlers });
-}
-/**
- * アクションが表示 (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 });
-}
 /**
- * アクションが破棄 (destroy) される前にフックする関数
+ * Edgeが起動するアクションに関連するコードを管理する
  *
- * @param fn - 呼び出されるフック関数
+ * アクションのCreate, Destroyの状態はここで管理する。
  *
- * @public
+ * FIXME: モーダルなどの機能ごとのコードを分離したい
  */
-function onDestroy(fn) {
-    let { onDestroyHandlers } = getInternalHandlers();
-    if (!onDestroyHandlers) {
-        onDestroyHandlers = [];
+/** @internal */
+const handleState = (event) => {
+    if (event.detail.actionId === actionId || event.detail.actionId === ALL_ACTION_ID) {
+        send_event('_message_state_changed', { state: event.detail.to });
+        setState$1(event.detail.to, { disableInPreview: event.detail.disableInPreview });
     }
-    onDestroyHandlers.push(fn);
-    setInternalHandlers({ onDestroyHandlers });
-}
-/**
- * アクションのステートが変更された (changeState) 後にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-function onChangeState(fn) {
-    let { onChangeStateHandlers } = getInternalHandlers();
-    if (!onChangeStateHandlers) {
-        onChangeStateHandlers = [];
+};
+/** @internal */
+const initialize = (setting) => {
+    const newSetting = setSetting(setting);
+    if (newSetting.initialState) {
+        setState$1(newSetting.initialState);
     }
-    onChangeStateHandlers.push(fn);
-    setInternalHandlers({ onChangeStateHandlers });
-}
+    setOpened(true);
+    setClosed(false); // deprecated
+    return () => finalize();
+};
+/** @internal */
+const finalize = () => {
+    resetSetting();
+};
 /**
  * アクションを作成する
  *
@@ -1789,92 +1468,154 @@ function create(App, options = {
         window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
         window.removeEventListener('beforeunload', dispatchDestroyEvent, false);
     };
-    return appCleanup;
+    return appCleanup;
+}
+/** @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,
+    };
+    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;
+    }
+}
+/**
+ * Dispatch the event to destroy KARTE action
+ *
+ * @internal
+ */
+function dispatchDestroyEvent() {
+    const event = new CustomEvent(ACTION_DESTROY_EVENT);
+    window.dispatchEvent(event);
+}
+/**
+ * アクションの破棄する
+ *
+ * @public
+ */
+function destroyAction() {
+    setDestroyed(true);
+    dispatchDestroyEvent();
+}
+/**
+ * アクションが作成 (create) される前にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onCreate(fn) {
+    let { onCreateHandlers } = getInternalHandlers();
+    if (!onCreateHandlers) {
+        onCreateHandlers = [];
+    }
+    onCreateHandlers.push(fn);
+    setInternalHandlers({ onCreateHandlers });
+}
+/**
+ * アクションが破棄 (destroy) される前にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onDestroy(fn) {
+    let { onDestroyHandlers } = getInternalHandlers();
+    if (!onDestroyHandlers) {
+        onDestroyHandlers = [];
+    }
+    onDestroyHandlers.push(fn);
+    setInternalHandlers({ onDestroyHandlers });
+}
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const showModal = create;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const ensureModalRoot = ensureActionRoot;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+function createApp(App, options = {
+    send: () => { },
+    publish: () => { },
+    props: {},
+    variables: {},
+    localVariablesQuery: undefined,
+}) {
+    let app = null;
+    const close = () => {
+        if (app) {
+            app.$destroy();
+            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 = new App(appArgs);
+        },
+    };
 }
 /**
- * Dispatch the event to destroy KARTE action
+ * 非推奨
  *
- * @internal
- */
-function dispatchDestroyEvent() {
-    const event = new CustomEvent(ACTION_DESTROY_EVENT);
-    window.dispatchEvent(event);
-}
-/**
- * アクションの破棄する
+ * @deprecated 非推奨
  *
- * @public
+ * @internal
  */
-function destroyAction() {
+function destroy() {
     setDestroyed(true);
     dispatchDestroyEvent();
 }
-/**
- * アクションを表示する
- *
- * @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);
-}
-/** @internal */
-const KARTE_ACTION_ROOT = 'karte-action-root';
-/** @internal */
-const KARTE_ACTION_RID = 'karte-action-rid';
-/** @internal */
-const KARTE_ACTION_SHORTEN_ID = 'karte-action-id';
-/** @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,
-    };
-    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;
-    }
-}
-/** @internal */
-const h = (type, props, ...children) => {
-    const el = document.createElement(type);
-    for (const key of Object.keys(props)) {
-        const v = props[key];
-        if (key === 'style') {
-            Object.assign(el.style, v);
-        }
-        else {
-            el.setAttribute(key, v);
-        }
-    }
-    for (const child of children) {
-        el.appendChild(child);
-    }
-    return el;
-};
 /**
  * 非推奨
  *
@@ -1907,19 +1648,129 @@ function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, })
     root.appendChild(fog);
     return { fog, close };
 }
+
 /**
- * アクションのルートの DOM 要素を取得する
+ * スクリプト接客が利用するコードの管理
+ */
+/**
+ * ES Modules に対応していない JavaScript をページに読み込む
  *
- * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
+ * @param src - JavaScript ファイルのリンク URL
  *
  * @public
  */
-function getActionRoot() {
-    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
-    if (!root?.shadowRoot) {
-        return null;
+async function loadGlobalScript(src) {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = src;
+        document.body.appendChild(script);
+        script.addEventListener('load', () => resolve(script));
+        script.addEventListener('error', () => reject(script));
+    });
+}
+/**
+ * グローバル CSS をページに適用する
+ *
+ * @param css - CSS
+ *
+ * @public
+ */
+async function applyGlobalCss(css) {
+    return new Promise((resolve, reject) => {
+        const style = document.createElement('style');
+        style.textContent = css;
+        document.body.appendChild(style);
+        style.addEventListener('load', () => resolve(style));
+        style.addEventListener('error', () => reject(style));
+    });
+}
+/**
+ * style ファイルをページに読み込む
+ *
+ * @param href - style ファイルのリンク URL
+ *
+ * @public
+ */
+async function loadGlobalStyle(href) {
+    return new Promise((resolve, reject) => {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        document.body.appendChild(link);
+        link.addEventListener('load', () => resolve(link));
+        link.addEventListener('error', () => reject(link));
+    });
+}
+
+/**
+ * モーダル(ポップアップ)に関連するコードの管理
+ *
+ * アクションのShow, Close, ChangeStateの状態はここで管理する。
+ */
+/**
+ * アクションが表示 (show) された後にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onShow(fn) {
+    let { onShowHandlers } = getInternalHandlers();
+    if (!onShowHandlers) {
+        onShowHandlers = [];
     }
-    return root.shadowRoot;
+    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 を適用する
@@ -1934,7 +1785,7 @@ async function applyCss(css) {
     return new Promise((resolve, reject) => {
         const style = document.createElement('style');
         style.textContent = css;
-        const shadowRoot = getActionShadowRoot();
+        const shadowRoot = getActionRoot();
         if (!shadowRoot)
             return;
         shadowRoot.append(style);
@@ -1973,7 +1824,7 @@ async function fixFontFaceIssue(href, cssRules) {
  * @public
  */
 async function loadStyle(href) {
-    const sr = getActionShadowRoot();
+    const sr = getActionRoot();
     if (!sr)
         return;
     let cssRules = '';
@@ -2002,95 +1853,30 @@ async function loadStyle(href) {
     // @ts-ignore
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
 }
-// -------- The following codes are deprecated --------
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const showModal = create;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const KARTE_MODAL_ROOT = 'karte-modal-root';
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const ensureModalRoot = ensureActionRoot;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const show = showAction;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const close = closeAction;
+// @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 要素を取得する
  *
- * @deprecated 非推奨
+ * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
  *
- * @internal
+ * @public
  */
-function createApp(App, options = {
-    send: () => { },
-    publish: () => { },
-    props: {},
-    variables: {},
-    localVariablesQuery: undefined,
-}) {
-    let app = null;
-    const close = () => {
-        if (app) {
-            app.$destroy();
-            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;
+function getActionRoot() {
+    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+    if (!root?.shadowRoot) {
+        return null;
     }
-    return {
-        close,
-        show: () => {
-            if (app) {
-                return;
-            }
-            options.send('message_open');
-            app = new App(appArgs);
-        },
-    };
+    return root.shadowRoot;
 }
+// -------- The following codes are deprecated --------
 /**
  * 非推奨
  *
@@ -2098,13 +1884,7 @@ function createApp(App, options = {
  *
  * @internal
  */
-function getActionShadowRoot() {
-    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
-    if (!root?.shadowRoot) {
-        return null;
-    }
-    return root.shadowRoot;
-}
+const show = showAction;
 /**
  * 非推奨
  *
@@ -2112,13 +1892,10 @@ function getActionShadowRoot() {
  *
  * @internal
  */
-function destroy() {
-    setDestroyed(true);
-    dispatchDestroyEvent();
-}
+const close = closeAction;
 
 /**
- * Widget API 互換のインターフェース
+ * エディタv1のWidget API 互換のインターフェース
  */
 const STORE_LS_KEY_PREFIX = 'krt___';
 const valCallbacks = {};
@@ -2627,12 +2404,238 @@ function instance$w($$self, $$props, $$invalidate) {
 
 	return [path, $state, $$scope, slots];
 }
-
-class StateItem extends SvelteComponent {
-	constructor(options) {
-		super();
-		init(this, options, instance$w, create_fragment$w, safe_not_equal, { path: 0 }, add_css$t);
-	}
+
+class StateItem extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$w, create_fragment$w, safe_not_equal, { path: 0 }, add_css$t);
+	}
+}
+
+function isEmpty(value) {
+    if (Array.isArray(value)) {
+        return value.length === 0;
+    }
+    else {
+        return !value;
+    }
+}
+/** @internal */
+function registerInput({ name, statePath, validator = () => true, initialValue, }) {
+    const writableValue = {
+        subscribe(run) {
+            return formData.subscribe(formData => {
+                run(formData[name]?.value);
+            });
+        },
+        set(value) {
+            formData.update(prev => ({
+                ...prev,
+                [name]: {
+                    statePath,
+                    value,
+                    isValid: validator(value),
+                },
+            }));
+        },
+        update(updater) {
+            formData.update(prev => {
+                const prevValue = prev[name]?.value;
+                return {
+                    ...prev,
+                    [name]: {
+                        statePath,
+                        value: updater(prevValue),
+                        isValid: validator(prevValue),
+                    },
+                };
+            });
+        },
+    };
+    if (isEmpty(get(writableValue))) {
+        writableValue.set(initialValue);
+    }
+    return writableValue;
+}
+/** @internal */
+const getValuesAreValidReader = statePath => ({
+    subscribe(callback) {
+        return formData.subscribe(formData => {
+            const valuesAreValid = Object.entries(formData)
+                .filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
+                .every(([_, { isValid }]) => isValid); // eslint-disable-line @typescript-eslint/no-unused-vars
+            callback(valuesAreValid);
+        });
+    },
+});
+function formDataToEventValues(campaignId, formData) {
+    const questions = [];
+    const answersMap = {};
+    Object.entries(formData).forEach(([name, dataItem]) => {
+        questions.push(name);
+        const value = dataItem.value;
+        const answerKey = `question_${name}`;
+        if (Array.isArray(value)) {
+            answersMap[answerKey] = {
+                choices: value,
+            };
+        }
+        else if (typeof value === 'string') {
+            answersMap[answerKey] = {
+                free_answer: value,
+            };
+        }
+    });
+    return {
+        [campaignId]: {
+            questions,
+            ...answersMap,
+        },
+    };
+}
+/** @internal */
+function submit() {
+    const systemConfig = getSystem();
+    const campaignId = systemConfig.campaignId;
+    if (campaignId) {
+        const formData$1 = get(formData);
+        const values = formDataToEventValues(campaignId, formData$1);
+        return values;
+    }
+    return {};
+}
+
+/**
+ * モーダル(ポップアップ)のコンポーネントが利用するコードの管理
+ */
+function _moveTo(to) {
+    window.dispatchEvent(new CustomEvent(ACTION_CHANGE_STATE_EVENT, { detail: { to, actionId } }));
+}
+/** @internal */
+const moveTo = (to) => () => {
+    _moveTo(to);
+};
+/** @internal */
+const linkTo = (to, targetBlank = true) => () => {
+    send_event('message_click', { url: to, state: getState$1() });
+    if (targetBlank) {
+        window.open(to);
+    }
+    else {
+        location.href = to;
+    }
+};
+/** @internal */
+const closeApp = (trigger) => () => {
+    window.dispatchEvent(new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } }));
+};
+/** @internal */
+const runScript = (handlerName) => () => {
+    const handlers = getEventHandlers();
+    const handler = handlers[handlerName];
+    if (!handler)
+        return;
+    try {
+        handler();
+    }
+    catch (e) {
+        console.warn('Failed to run custom handler', handlerName, e);
+    }
+};
+/** @internal */
+const submitForm = (to) => () => {
+    const values = submit();
+    send_event('_answer_question', values);
+    _moveTo(to);
+};
+/** @internal */
+const execOnClickOperation = (onClickOperation) => {
+    if (onClickOperation.operation === 'linkTo') {
+        linkTo(...onClickOperation.args)();
+    }
+    else if (onClickOperation.operation === 'moveTo') {
+        moveTo(...onClickOperation.args)();
+    }
+    else if (onClickOperation.operation === 'closeApp') {
+        closeApp(onClickOperation.args[0] || 'button')();
+    }
+    else if (onClickOperation.operation === 'runScript') {
+        runScript(onClickOperation.args[0])();
+    }
+    else if (onClickOperation.operation === 'submitForm') {
+        submitForm(onClickOperation.args[0])();
+    }
+};
+/** @internal */
+const haveFunction = (onClickOperation) => {
+    return onClickOperation.operation !== 'none';
+};
+function getAnimation(animation) {
+    switch (animation.type) {
+        case 'fade':
+            return `opacity: ${animation.progress}`;
+        case 'bounce': {
+            const translateX = animation.x;
+            const translateY = animation.y;
+            return `transform: translate3d(${translateX}%, ${translateY}%, 0) scale(${animation.progress});`;
+        }
+        case 'slide-down': {
+            const translateX = animation.x;
+            const translateY = animation.y - 100 * (1 - animation.progress);
+            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
+        }
+        case 'slide-up': {
+            const translateX = animation.x;
+            const translateY = animation.y + 100 * (1 - animation.progress);
+            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
+        }
+        case 'slide-left': {
+            const translateX = animation.x + 100 * (1 - animation.progress);
+            const translateY = animation.y;
+            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
+        }
+        case 'slide-right': {
+            const translateX = animation.x - 100 * (1 - animation.progress);
+            const translateY = animation.y;
+            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
+        }
+        case 'none': {
+            const translateX = animation.x;
+            const translateY = animation.y;
+            return `transform:  translate3d(${translateX}%, ${translateY}%, 0);`;
+        }
+        default:
+            console.warn(`[action-sdk] invalid '${animation}', so we use 'transform: none' instead`);
+            return 'transform: none';
+    }
+}
+const EASING = {
+    fade: linear,
+    bounce: elasticOut,
+    'slide-down': cubicOut,
+    'slide-up': cubicOut,
+    'slide-left': cubicOut,
+    'slide-right': cubicOut,
+    none: linear,
+};
+/**
+ * The function to activate svelte animation.
+ *
+ * @param node - A target node of animation. This argument is passed by svelte, by default.
+ * @param customAnimationOptions - A custom animation option object
+ *
+ * @see {@link https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions| Custom transition functions} for detail documentation
+ *
+ * @internal
+ */
+function customAnimation(node, { transform, animationStyle, delay = 0, duration = 1000 }) {
+    const [x, y] = transform;
+    return {
+        delay,
+        duration,
+        easing: EASING[animationStyle],
+        css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
+    };
 }
 
 /* src/components/BackgroundOverray.svelte generated by Svelte v3.53.1 */
@@ -2730,8 +2733,8 @@ function add_css$r(target) {
 	append_styles(target, "svelte-1tg0tf", ".button.svelte-1tg0tf{display:block;text-decoration:none;color:inherit;border:none;background:none;margin:0;padding:0}.button.svelte-1tg0tf:link,.button.svelte-1tg0tf:visited,.button.svelte-1tg0tf:active,.button.svelte-1tg0tf:hover{color:inherit}");
 }
 
-// (48:0) {:else}
-function create_else_block$2(ctx) {
+// (49:0) {:else}
+function create_else_block$3(ctx) {
 	let button;
 	let current;
 	let mounted;
@@ -2798,7 +2801,7 @@ function create_else_block$2(ctx) {
 	};
 }
 
-// (44:39) 
+// (45:39) 
 function create_if_block_2(ctx) {
 	let div;
 	let current;
@@ -2857,7 +2860,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (40:41) 
+// (41:41) 
 function create_if_block_1$2(ctx) {
 	let a;
 	let a_href_value;
@@ -2937,7 +2940,7 @@ function create_if_block_1$2(ctx) {
 	};
 }
 
-// (36:0) {#if disabled}
+// (37:0) {#if disabled}
 function create_if_block$6(ctx) {
 	let div;
 	let current;
@@ -3001,7 +3004,7 @@ function create_fragment$u(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block$6, create_if_block_1$2, create_if_block_2, create_else_block$2];
+	const if_block_creators = [create_if_block$6, create_if_block_1$2, create_if_block_2, create_else_block$3];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -3166,7 +3169,7 @@ function add_css$q(target) {
 	append_styles(target, "svelte-yyiwdt", ".modal.svelte-yyiwdt{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-yyiwdt > .button{flex:auto;display:flex}.close.svelte-yyiwdt{position:absolute;top:0;right:0}.close.svelte-yyiwdt > .button{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-yyiwdt > .button:hover{transform:rotate(90deg)}.modal-content.svelte-yyiwdt{flex:auto;display:flex;justify-content:center;align-items:center}");
 }
 
-// (144:0) {#if visible}
+// (145:0) {#if visible}
 function create_if_block$5(ctx) {
 	let div;
 	let button;
@@ -3245,7 +3248,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (161:6) {#if closable}
+// (162:6) {#if closable}
 function create_if_block_1$1(ctx) {
 	let div;
 	let button;
@@ -3307,7 +3310,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (163:10) <Button onClick={onClose} style={_closeStyle} eventName={closeEventName} eventValue={closeEventValue}>
+// (164:10) <Button onClick={onClose} style={_closeStyle} eventName={closeEventName} eventValue={closeEventValue}>
 function create_default_slot_1$1(ctx) {
 	let svg;
 	let path;
@@ -3340,7 +3343,7 @@ function create_default_slot_1$1(ctx) {
 	};
 }
 
-// (160:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
+// (161:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
 function create_default_slot$6(ctx) {
 	let t;
 	let div;
@@ -3442,7 +3445,7 @@ function create_fragment$t(ctx) {
 
 	backgroundoverray = new BackgroundOverray({
 			props: {
-				backgroundOverray: /*backgroundOverray*/ ctx[11]
+				backgroundOverray: /*backgroundOverray*/ ctx[10]
 			}
 		});
 
@@ -3477,7 +3480,7 @@ function create_fragment$t(ctx) {
 		p(new_ctx, [dirty]) {
 			ctx = new_ctx;
 			const backgroundoverray_changes = {};
-			if (dirty & /*backgroundOverray*/ 2048) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[11];
+			if (dirty & /*backgroundOverray*/ 1024) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[10];
 			backgroundoverray.$set(backgroundoverray_changes);
 
 			if (/*visible*/ ctx[12]) {
@@ -3565,7 +3568,7 @@ function instance$t($$self, $$props, $$invalidate) {
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			modal = $$value;
-			$$invalidate(10, modal);
+			$$invalidate(11, modal);
 		});
 	}
 
@@ -3603,7 +3606,7 @@ function instance$t($$self, $$props, $$invalidate) {
 		if ($$self.$$.dirty & /*placement*/ 2097152) {
 			{
 				if (placement && placement.backgroundOverlay) {
-					$$invalidate(11, backgroundOverray = placement.backgroundOverlay);
+					$$invalidate(10, backgroundOverray = placement.backgroundOverlay);
 				}
 			}
 		}
@@ -3654,12 +3657,12 @@ function instance$t($$self, $$props, $$invalidate) {
 			$$invalidate(14, marginStyle = getMarginStyle(overwriteMargin));
 		}
 
-		if ($$self.$$.dirty & /*close, modal*/ 16778240) {
-			$$invalidate(13, handle_keydown = handleKeydown({ Escape: close, Tab: handleFocus(modal) }));
+		if ($$self.$$.dirty & /*close*/ 16777216) {
+			$$invalidate(13, handle_keydown = handleKeydown({ Escape: close }));
 		}
 	};
 
-	$$invalidate(10, modal = null);
+	$$invalidate(11, modal = null);
 
 	// svelteコンポーネントのアニメーションを発火させるためにマウント時にvisibleをtrueにする。
 	$$invalidate(12, visible = false);
@@ -3675,8 +3678,8 @@ function instance$t($$self, $$props, $$invalidate) {
 		closeEventValue,
 		closeButtonColor,
 		_closeStyle,
-		modal,
 		backgroundOverray,
+		modal,
 		visible,
 		handle_keydown,
 		marginStyle,
@@ -3998,7 +4001,7 @@ function get_each_context$6(ctx, list, i) {
 }
 
 // (13:2) {:else}
-function create_else_block$1(ctx) {
+function create_else_block$2(ctx) {
 	let t_value = /*item*/ ctx[2] + "";
 	let t;
 
@@ -4045,7 +4048,7 @@ function create_each_block$6(ctx) {
 		if (dirty & /*items*/ 1) show_if = null;
 		if (show_if == null) show_if = !!/*item*/ ctx[2].match(regexp);
 		if (show_if) return create_if_block$4;
-		return create_else_block$1;
+		return create_else_block$2;
 	}
 
 	let current_block_type = select_block_type(ctx, -1);
@@ -4167,120 +4170,123 @@ class RenderText extends SvelteComponent {
 /* src/components/TextElement.svelte generated by Svelte v3.53.1 */
 
 function add_css$o(target) {
-	append_styles(target, "svelte-13cs3g2", ".text-element-wrapper.svelte-13cs3g2.svelte-13cs3g2{position:relative;height:100%}.text-element.svelte-13cs3g2.svelte-13cs3g2{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:auto}.text-element-inner.svelte-13cs3g2.svelte-13cs3g2{width:100%;height:auto}.text-direction-vertical.svelte-13cs3g2.svelte-13cs3g2{writing-mode:vertical-rl}.text-direction-vertical.svelte-13cs3g2 .text-element-inner.svelte-13cs3g2{width:auto;height:100%}.tooltip.svelte-13cs3g2.svelte-13cs3g2{display:none;position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);color:#fff;background-color:#3d4948;white-space:nowrap;padding:4px 8px 4px 8px;border-radius:4px;font-size:12px;z-index:2147483647}.tooltip.svelte-13cs3g2.svelte-13cs3g2:before{content:'';position:absolute;top:-13px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom:7px solid #3d4948}.tooltip.show.svelte-13cs3g2.svelte-13cs3g2{display:block}.tooltip-error.svelte-13cs3g2.svelte-13cs3g2{background-color:#c00}.tooltip-error.svelte-13cs3g2.svelte-13cs3g2:before{border-bottom:7px solid #c00}");
+	append_styles(target, "svelte-600oh0", ".text-element-wrapper.svelte-600oh0.svelte-600oh0{position:relative;height:100%}.text-element.svelte-600oh0.svelte-600oh0{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:auto;margin:0px;padding:0px}.text-link-element.svelte-600oh0.svelte-600oh0{text-decoration:none;color:inherit}.text-element-inner.svelte-600oh0.svelte-600oh0{width:100%;height:auto}.text-direction-vertical.svelte-600oh0.svelte-600oh0{writing-mode:vertical-rl}.text-direction-vertical.svelte-600oh0 .text-element-inner.svelte-600oh0{width:auto;height:100%}.tooltip.svelte-600oh0.svelte-600oh0{display:none;position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);color:#fff;background-color:#3d4948;white-space:nowrap;padding:4px 8px 4px 8px;border-radius:4px;font-size:12px;z-index:2147483647}.tooltip.svelte-600oh0.svelte-600oh0:before{content:'';position:absolute;top:-13px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom:7px solid #3d4948}.tooltip.show.svelte-600oh0.svelte-600oh0{display:block}.tooltip-error.svelte-600oh0.svelte-600oh0{background-color:#c00}.tooltip-error.svelte-600oh0.svelte-600oh0:before{border-bottom:7px solid #c00}");
 }
 
-// (58:2) {#if enableCopy}
-function create_if_block$3(ctx) {
-	let div0;
-	let t1;
+// (78:2) {:else}
+function create_else_block$1(ctx) {
 	let div1;
+	let div0;
+	let rendertext;
+	let div1_class_value;
+	let current;
+	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
 
 	return {
 		c() {
-			div0 = element("div");
-			div0.textContent = "コピーしました";
-			t1 = space();
 			div1 = element("div");
-			div1.textContent = "コピーできませんでした";
-			attr(div0, "class", "tooltip svelte-13cs3g2");
-			attr(div1, "class", "tooltip tooltip-error svelte-13cs3g2");
+			div0 = element("div");
+			create_component(rendertext.$$.fragment);
+			attr(div0, "class", "text-element-inner svelte-600oh0");
+			attr(div1, "class", div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-600oh0"));
+			attr(div1, "style", /*style*/ ctx[5]);
 		},
 		m(target, anchor) {
-			insert(target, div0, anchor);
-			/*div0_binding*/ ctx[9](div0);
-			insert(target, t1, anchor);
 			insert(target, div1, anchor);
-			/*div1_binding*/ ctx[10](div1);
+			append(div1, div0);
+			mount_component(rendertext, div0, null);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const rendertext_changes = {};
+			if (dirty & /*text*/ 1) rendertext_changes.text = /*text*/ ctx[0];
+			rendertext.$set(rendertext_changes);
+
+			if (!current || dirty & /*textDirection*/ 2 && div1_class_value !== (div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-600oh0"))) {
+				attr(div1, "class", div1_class_value);
+			}
+
+			if (!current || dirty & /*style*/ 32) {
+				attr(div1, "style", /*style*/ ctx[5]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(rendertext.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(rendertext.$$.fragment, local);
+			current = false;
 		},
-		p: noop,
 		d(detaching) {
-			if (detaching) detach(div0);
-			/*div0_binding*/ ctx[9](null);
-			if (detaching) detach(t1);
 			if (detaching) detach(div1);
-			/*div1_binding*/ ctx[10](null);
+			destroy_component(rendertext);
 		}
 	};
 }
 
-function create_fragment$p(ctx) {
-	let div2;
-	let link;
-	let link_href_value;
-	let t0;
-	let div1;
+// (69:2) {#if enableCopy}
+function create_if_block$3(ctx) {
+	let a;
 	let div0;
 	let rendertext;
-	let div1_class_value;
-	let t1;
+	let a_class_value;
+	let t0;
+	let div1;
+	let t2;
+	let div2;
 	let current;
 	let mounted;
 	let dispose;
 	rendertext = new RenderText({ props: { text: /*text*/ ctx[0] } });
-	let if_block = /*enableCopy*/ ctx[1] && create_if_block$3(ctx);
 
 	return {
 		c() {
-			div2 = element("div");
-			link = element("link");
-			t0 = space();
-			div1 = element("div");
+			a = element("a");
 			div0 = element("div");
 			create_component(rendertext.$$.fragment);
-			t1 = space();
-			if (if_block) if_block.c();
-			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`);
-			attr(link, "rel", "stylesheet");
-			attr(div0, "class", "text-element-inner svelte-13cs3g2");
-			attr(div1, "class", div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[2]}`) + " svelte-13cs3g2"));
-			attr(div1, "style", /*style*/ ctx[5]);
-			attr(div2, "class", "text-element-wrapper svelte-13cs3g2");
+			t0 = space();
+			div1 = element("div");
+			div1.textContent = "コピーしました";
+			t2 = space();
+			div2 = element("div");
+			div2.textContent = "コピーできませんでした";
+			attr(div0, "class", "text-element-inner svelte-600oh0");
+			attr(a, "href", '');
+			attr(a, "class", a_class_value = "" + (null_to_empty(`text-element text-link-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-600oh0"));
+			attr(a, "style", /*style*/ ctx[5]);
+			attr(div1, "class", "tooltip svelte-600oh0");
+			attr(div2, "class", "tooltip tooltip-error svelte-600oh0");
 		},
 		m(target, anchor) {
-			insert(target, div2, anchor);
-			append(div2, link);
-			append(div2, t0);
-			append(div2, div1);
-			append(div1, div0);
+			insert(target, a, anchor);
+			append(a, div0);
 			mount_component(rendertext, div0, null);
-			append(div2, t1);
-			if (if_block) if_block.m(div2, null);
+			insert(target, t0, anchor);
+			insert(target, div1, anchor);
+			/*div1_binding*/ ctx[10](div1);
+			insert(target, t2, anchor);
+			insert(target, div2, anchor);
+			/*div2_binding*/ ctx[11](div2);
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(div1, "click", /*click*/ ctx[6]);
+				dispose = listen(a, "click", /*onCopy*/ ctx[6]);
 				mounted = true;
 			}
 		},
-		p(ctx, [dirty]) {
-			if (!current || dirty & /*text*/ 1 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`)) {
-				attr(link, "href", link_href_value);
-			}
-
+		p(ctx, dirty) {
 			const rendertext_changes = {};
 			if (dirty & /*text*/ 1) rendertext_changes.text = /*text*/ ctx[0];
 			rendertext.$set(rendertext_changes);
 
-			if (!current || dirty & /*textDirection*/ 4 && div1_class_value !== (div1_class_value = "" + (null_to_empty(`text-element text-direction-${/*textDirection*/ ctx[2]}`) + " svelte-13cs3g2"))) {
-				attr(div1, "class", div1_class_value);
+			if (!current || dirty & /*textDirection*/ 2 && a_class_value !== (a_class_value = "" + (null_to_empty(`text-element text-link-element text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-600oh0"))) {
+				attr(a, "class", a_class_value);
 			}
 
 			if (!current || dirty & /*style*/ 32) {
-				attr(div1, "style", /*style*/ ctx[5]);
-			}
-
-			if (/*enableCopy*/ ctx[1]) {
-				if (if_block) {
-					if_block.p(ctx, dirty);
-				} else {
-					if_block = create_if_block$3(ctx);
-					if_block.c();
-					if_block.m(div2, null);
-				}
-			} else if (if_block) {
-				if_block.d(1);
-				if_block = null;
+				attr(a, "style", /*style*/ ctx[5]);
 			}
 		},
 		i(local) {
@@ -4293,53 +4299,147 @@ function create_fragment$p(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div2);
+			if (detaching) detach(a);
 			destroy_component(rendertext);
-			if (if_block) if_block.d();
+			if (detaching) detach(t0);
+			if (detaching) detach(div1);
+			/*div1_binding*/ ctx[10](null);
+			if (detaching) detach(t2);
+			if (detaching) detach(div2);
+			/*div2_binding*/ ctx[11](null);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
+function create_fragment$p(ctx) {
+	let div;
+	let link;
+	let link_href_value;
+	let t;
+	let current_block_type_index;
+	let if_block;
+	let current;
+	const if_block_creators = [create_if_block$3, create_else_block$1];
+	const if_blocks = [];
+
+	function select_block_type(ctx, dirty) {
+		if (/*enableCopy*/ ctx[2]) return 0;
+		return 1;
+	}
+
+	current_block_type_index = select_block_type(ctx);
+	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+
+	return {
+		c() {
+			div = element("div");
+			link = element("link");
+			t = space();
+			if_block.c();
+			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`);
+			attr(link, "rel", "stylesheet");
+			attr(div, "class", "text-element-wrapper svelte-600oh0");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, link);
+			append(div, t);
+			if_blocks[current_block_type_index].m(div, null);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (!current || dirty & /*text*/ 1 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`)) {
+				attr(link, "href", link_href_value);
+			}
+
+			let previous_block_index = current_block_type_index;
+			current_block_type_index = select_block_type(ctx);
+
+			if (current_block_type_index === previous_block_index) {
+				if_blocks[current_block_type_index].p(ctx, dirty);
+			} else {
+				group_outros();
+
+				transition_out(if_blocks[previous_block_index], 1, 1, () => {
+					if_blocks[previous_block_index] = null;
+				});
+
+				check_outros();
+				if_block = if_blocks[current_block_type_index];
+
+				if (!if_block) {
+					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+					if_block.c();
+				} else {
+					if_block.p(ctx, dirty);
+				}
+
+				transition_in(if_block, 1);
+				if_block.m(div, null);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if_blocks[current_block_type_index].d();
+		}
+	};
+}
+
 function instance$p($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'サンプルSample' } = $$props;
+	let { _textStyle = 'font-size:12px; line-height: 1.5;' } = $$props;
+	let { textDirection = 'horizontal' } = $$props;
+	let { _style = '' } = $$props;
 	let { enableCopy = false } = $$props;
+	let { eventName = '' } = $$props;
+	let eventValue = undefined;
 	let tooltipEl;
 	let tooltipErrorEl;
 
-	const click = async () => {
-		if (enableCopy) {
-			try {
-				await navigator.clipboard.writeText(text);
-				tooltipEl.classList.add('show');
-			} catch(err) {
-				tooltipErrorEl.classList.add('show');
+	const onCopy = async e => {
+		e.preventDefault();
+
+		try {
+			await navigator.clipboard.writeText(text);
+
+			if (eventName) {
+				send_event(eventName, eventValue);
 			}
 
-			setTimeout(
-				() => {
-					tooltipEl.classList.remove('show');
-					tooltipErrorEl.classList.remove('show');
-				},
-				1000
-			);
+			tooltipEl.classList.add('show');
+		} catch(err) {
+			tooltipErrorEl.classList.add('show');
 		}
-	};
 
-	let { _textStyle = 'font-size:12px; line-height: 1.5;' } = $$props;
-	let { textDirection = 'horizontal' } = $$props;
-	let { _style = '' } = $$props;
+		setTimeout(
+			() => {
+				tooltipEl.classList.remove('show');
+				tooltipErrorEl.classList.remove('show');
+			},
+			1000
+		);
+	};
 
-	function div0_binding($$value) {
+	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			tooltipEl = $$value;
 			$$invalidate(3, tooltipEl);
 		});
 	}
 
-	function div1_binding($$value) {
+	function div2_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			tooltipErrorEl = $$value;
 			$$invalidate(4, tooltipErrorEl);
@@ -4348,10 +4448,11 @@ function instance$p($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('text' in $$props) $$invalidate(0, text = $$props.text);
-		if ('enableCopy' in $$props) $$invalidate(1, enableCopy = $$props.enableCopy);
 		if ('_textStyle' in $$props) $$invalidate(7, _textStyle = $$props._textStyle);
-		if ('textDirection' in $$props) $$invalidate(2, textDirection = $$props.textDirection);
+		if ('textDirection' in $$props) $$invalidate(1, textDirection = $$props.textDirection);
 		if ('_style' in $$props) $$invalidate(8, _style = $$props._style);
+		if ('enableCopy' in $$props) $$invalidate(2, enableCopy = $$props.enableCopy);
+		if ('eventName' in $$props) $$invalidate(9, eventName = $$props.eventName);
 	};
 
 	$$self.$$.update = () => {
@@ -4362,16 +4463,17 @@ function instance$p($$self, $$props, $$invalidate) {
 
 	return [
 		text,
-		enableCopy,
 		textDirection,
+		enableCopy,
 		tooltipEl,
 		tooltipErrorEl,
 		style,
-		click,
+		onCopy,
 		_textStyle,
 		_style,
-		div0_binding,
-		div1_binding
+		eventName,
+		div1_binding,
+		div2_binding
 	];
 }
 
@@ -4387,10 +4489,11 @@ class TextElement extends SvelteComponent {
 			safe_not_equal,
 			{
 				text: 0,
-				enableCopy: 1,
 				_textStyle: 7,
-				textDirection: 2,
-				_style: 8
+				textDirection: 1,
+				_style: 8,
+				enableCopy: 2,
+				eventName: 9
 			},
 			add_css$o
 		);