@plaidev/karte-action-sdk 1.1.180-28042066.2d66783f → 1.1.181-28042947.ba6a2943

package/dist/index.es.js

@@ -1,6 +1,6 @@
 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, element, insert, noop, detach, component_subscribe, attr, create_slot, create_component, space, mount_component, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, append_styles, empty, group_outros, check_outros, listen, null_to_empty, is_function, 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 { SvelteComponent, init, safe_not_equal, element, insert, noop, detach, component_subscribe, attr, create_slot, create_component, space, mount_component, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, append_styles, empty, group_outros, check_outros, listen, assign, set_attributes, toggle_class, get_spread_update, null_to_empty, prevent_default, is_function, 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 */
@@ -25,6 +25,233 @@ const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
  */
 const KARTE_MODAL_ROOT = 'karte-modal-root';
 
+/** @internal */
+const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
+/** @internal */
+const isPreview = () => {
+    return false;
+};
+/** @internal */
+const setPreviousFocus = () => {
+    const previously_focused = typeof document !== 'undefined' && document.activeElement;
+    if (previously_focused) {
+        previously_focused?.focus();
+    }
+};
+/** @internal */
+const handleKeydown = (handlers) => (e) => {
+    if (handlers[e.key]) {
+        handlers[e.key](e);
+    }
+};
+const POSITION_STYLES = {
+    'top-center': 'top: 0; right: 50%; transform: translate(+50%, 0%);',
+    'top-left': 'top: 0; left: 0; transform: translate(0%, 0%);',
+    'top-right': 'top: 0; right: 0; transform: translate(0%, 0%);',
+    'center-left': 'top: 50%; left: 0; transform: translate(0%, -50%);',
+    center: 'top: 50%; left: 50%; transform: translate(-50%, -50%);',
+    'center-right': 'top: 50%; right: 0; transform: translate(0%, -50%);',
+    'bottom-left': 'bottom: 0; left: 0; transform: translate(0%, 0%);',
+    'bottom-center': 'bottom: 0; left: 50%; transform: translate(-50%, 0%);',
+    'bottom-right': 'bottom: 0; right: 0; transform: translate(0%, 0);',
+    none: 'top: 0; bottom: 0; right: 0; left: 0;',
+};
+const TRANSFORM = {
+    'top-center': [50, 0],
+    'top-left': [0, 0],
+    'top-right': [0, 0],
+    'center-left': [0, -50],
+    center: [-50, -50],
+    'center-right': [0, -50],
+    'bottom-left': [0, 0],
+    'bottom-center': [-50, 0],
+    'bottom-right': [0, 0],
+    none: [0, 0],
+};
+/** @internal */
+const getPositionStyle = (position) => {
+    const style = POSITION_STYLES[position];
+    if (style != null) {
+        return style;
+    }
+    else {
+        console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
+        return POSITION_STYLES['center'];
+    }
+};
+/** @internal */
+const getTransform = (position) => {
+    const transform = TRANSFORM[position];
+    if (transform != null) {
+        return transform;
+    }
+    else {
+        console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
+        return TRANSFORM['center'];
+    }
+};
+/** @internal */
+const getMarginStyle = (margin) => {
+    return `margin: ${margin?.top ?? 0} ${margin?.right ?? 0} ${margin?.bottom ?? 0} ${margin?.left ?? 0};`;
+};
+/** @internal */
+const stringifyStyleObj = (styleObj) => {
+    return Object.entries(styleObj)
+        .map(([key, value]) => `${key}:${value}`)
+        .join(';');
+};
+/**
+ * スクロール率が達したときに呼び出すコールバックを登録します
+ *
+ * @param rate - スクロール率。この値は viewport でのスクロールのパーセンテージ
+ * @param fn - スクロール率が達したときに呼び出されるコールバック関数
+ *
+ * @returns スクロール率によって呼び出されるコールバックを停止する関数を返します
+ *
+ * @public
+ */
+function onScroll(rate, fn) {
+    const rates = Array.isArray(rate) ? rate : [rate];
+    const body = window.document.body;
+    const html = window.document.documentElement;
+    const contexts = new Map();
+    rates.forEach(rate => {
+        contexts.set(rate, {
+            rate,
+            repeat: false,
+            zone: 'out',
+            previousRate: 0,
+            deltaRate: 0,
+            scrollRate: 0,
+            scrollTop: html.scrollTop || body.scrollTop,
+        });
+    });
+    const _fn = fn;
+    const direction = (ctx) => ctx.deltaRate > 0 ? 'down' : 'up';
+    const updateStates = (ctx, repeat) => {
+        ctx.repeat = repeat;
+        // prettier-ignore
+        ctx.zone =
+            // case: the scroll rate cannot detect the rate when scrolling to the top
+            ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate
+                ? 'out'
+                : ctx.scrollRate >= ctx.rate
+                    ? 'in'
+                    : 'out';
+        // console.log('updateStates', ctx.zone);
+    };
+    // prettier-ignore
+    const canCall = ({ zone, scrollRate, rate, scrollTop, repeat }) => zone === 'out'
+        ? scrollRate >= rate
+        : repeat
+            // case: the scroll rate cannot detect the rate when scrolling to the top
+            ? scrollRate < rate || (scrollTop === 0 && scrollRate >= rate)
+            : false;
+    /*
+    // NOTE: same logic the above (code size optimiazation)
+    const canCall = (ctx: OnScrollInternalContext): boolean => {
+      // console.log('repeat', ctx.repeat, 'rate', ctx.rate, 'scrollRate', ctx.scrollRate, '1 - rate', 1 - ctx.rate, '1 - scrollRate', 1 - ctx.scrollRate, 'scrollRate >= rate', ctx.scrollRate >= ctx.rate, '1 - scrollRate >= 1 - rate', 1 - ctx.scrollRate >= 1 - ctx.rate);
+      // console.log(ctx.rate, 'deltaRate', ctx.deltaRate, 'reviousRate', ctx.previousRate)
+      if (ctx.zone === 'out') {
+        return ctx.scrollRate >= ctx.rate;
+      } else {
+        // 'in'
+        if (ctx.repeat) {
+          return ctx.scrollRate < ctx.rate || (ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate);
+        } else {
+          return false;
+        }
+      }
+    };
+    //*/
+    const onScroll = () => {
+        const scrollTop = html.scrollTop || body.scrollTop;
+        const pageHeight = Math.max(...[body.clientHeight, body.scrollHeight, html.scrollHeight, html.clientHeight]);
+        const viewHeight = Math.min(...[html.clientHeight, body.clientHeight]);
+        const scrollRate = (scrollTop + viewHeight) / pageHeight;
+        // console.log('scrollRate ->', scrollRate, 'scrollTop ->', scrollTop);
+        contexts.forEach(ctx => {
+            ctx.scrollRate = scrollRate;
+            ctx.deltaRate = ctx.scrollRate - ctx.previousRate;
+            ctx.previousRate = ctx.scrollRate;
+            ctx.scrollTop = scrollTop;
+            if (canCall(ctx)) {
+                const repeat = !!_fn(Object.assign({ direction: direction(ctx) }, ctx));
+                updateStates(ctx, repeat);
+            }
+        });
+    };
+    // register scorll event
+    window.addEventListener('scroll', onScroll);
+    // return disposing (finalizing/releasing) function
+    return () => {
+        window.removeEventListener('scroll', onScroll);
+    };
+}
+/**
+ * 指定した時間の経過後に呼び出すコールバックを登録します
+ *
+ * @param time - コールバックを呼び出すまでの時間。単位はミリセカンド(ms)
+ * @param fn - 指定した時間が経過後に呼び出されるコールバック関数
+ *
+ * @returns コールバックを呼び出すためのタイマーを停止する関数を返します
+ *
+ * @public
+ */
+function onTime(time, fn) {
+    const timeoutHandler = setTimeout(fn, time);
+    return () => timeoutHandler && clearTimeout(timeoutHandler);
+}
+/** @internal */
+function hasSuffix(value, suffix) {
+    return new RegExp(`[0-9]${suffix}$`).test(value);
+}
+/** @internal */
+function randStr(digit = 8) {
+    return Math.random().toString(32).substring(digit);
+}
+/**
+ * Goolge Fonts用のURLを生成
+ *
+ * @param fonts - フォント名の配列
+ * @param texts - 使用するテキストの配列
+ *
+ * @remarks
+ * textsを指定した場合フォントサイズが削減される
+ *
+ * @internal
+ */
+function makeGoogleFontUrl(fonts, texts) {
+    const params = [];
+    params.push('display=swap');
+    if (texts) {
+        texts.forEach(text => params.push(`text=${text}`));
+    }
+    fonts.forEach(font => params.push(`family=${font.replace(/['"]/g, '').replace(/ /g, '+')}`));
+    return `https://fonts.googleapis.com/css2?${params.join('&')}`;
+}
+/**
+ * HTML要素を生成
+ *
+ * @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;
+};
+
 /**
  * ポップアップ(モーダル)のコンポーネントで利用するPropの定義
  */
@@ -253,258 +480,21 @@ const DefaultSlideButton = {
     type: 'icon',
     icon: 'chevron-left',
     color: '#999',
-    fill: '#999',
-    size: '20px',
-};
-/** @internal */
-const DefaultSlideNavigationButton = {
-    type: 'circle',
-    size: '8px',
-    color: '#ddd',
-    colorActive: '#666',
-};
-/** @internal */
-const DefaultFormButtonColor = {
-    main: '#2aab9f',
-    sub: '#fff',
-};
-
-/** @internal */
-const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
-/** @internal */
-const isPreview = () => {
-    return false;
-};
-/** @internal */
-const setPreviousFocus = () => {
-    const previously_focused = typeof document !== 'undefined' && document.activeElement;
-    if (previously_focused) {
-        previously_focused?.focus();
-    }
-};
-/** @internal */
-const handleKeydown = (handlers) => (e) => {
-    if (handlers[e.key]) {
-        handlers[e.key](e);
-    }
-};
-const POSITION_STYLES = {
-    'top-center': 'top: 0; right: 50%; transform: translate(+50%, 0%);',
-    'top-left': 'top: 0; left: 0; transform: translate(0%, 0%);',
-    'top-right': 'top: 0; right: 0; transform: translate(0%, 0%);',
-    'center-left': 'top: 50%; left: 0; transform: translate(0%, -50%);',
-    center: 'top: 50%; left: 50%; transform: translate(-50%, -50%);',
-    'center-right': 'top: 50%; right: 0; transform: translate(0%, -50%);',
-    'bottom-left': 'bottom: 0; left: 0; transform: translate(0%, 0%);',
-    'bottom-center': 'bottom: 0; left: 50%; transform: translate(-50%, 0%);',
-    'bottom-right': 'bottom: 0; right: 0; transform: translate(0%, 0);',
-    none: 'top: 0; bottom: 0; right: 0; left: 0;',
-};
-const TRANSFORM = {
-    'top-center': [50, 0],
-    'top-left': [0, 0],
-    'top-right': [0, 0],
-    'center-left': [0, -50],
-    center: [-50, -50],
-    'center-right': [0, -50],
-    'bottom-left': [0, 0],
-    'bottom-center': [-50, 0],
-    'bottom-right': [0, 0],
-    none: [0, 0],
-};
-/** @internal */
-const getPositionStyle = (position) => {
-    const style = POSITION_STYLES[position];
-    if (style != null) {
-        return style;
-    }
-    else {
-        console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
-        return POSITION_STYLES['center'];
-    }
-};
-/** @internal */
-const getTransform = (position) => {
-    const transform = TRANSFORM[position];
-    if (transform != null) {
-        return transform;
-    }
-    else {
-        console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
-        return TRANSFORM['center'];
-    }
-};
-/** @internal */
-const getMarginStyle = (margin) => {
-    return `margin: ${margin?.top ?? 0} ${margin?.right ?? 0} ${margin?.bottom ?? 0} ${margin?.left ?? 0};`;
-};
-/** @internal */
-const stringifyStyleObj = (styleObj) => {
-    return Object.entries(styleObj)
-        .map(([key, value]) => `${key}:${value}`)
-        .join(';');
+    fill: '#999',
+    size: '20px',
 };
-/**
- * スクロール率が達したときに呼び出すコールバックを登録します
- *
- * @param rate - スクロール率。この値は viewport でのスクロールのパーセンテージ
- * @param fn - スクロール率が達したときに呼び出されるコールバック関数
- *
- * @returns スクロール率によって呼び出されるコールバックを停止する関数を返します
- *
- * @public
- */
-function onScroll(rate, fn) {
-    const rates = Array.isArray(rate) ? rate : [rate];
-    const body = window.document.body;
-    const html = window.document.documentElement;
-    const contexts = new Map();
-    rates.forEach(rate => {
-        contexts.set(rate, {
-            rate,
-            repeat: false,
-            zone: 'out',
-            previousRate: 0,
-            deltaRate: 0,
-            scrollRate: 0,
-            scrollTop: html.scrollTop || body.scrollTop,
-        });
-    });
-    const _fn = fn;
-    const direction = (ctx) => ctx.deltaRate > 0 ? 'down' : 'up';
-    const updateStates = (ctx, repeat) => {
-        ctx.repeat = repeat;
-        // prettier-ignore
-        ctx.zone =
-            // case: the scroll rate cannot detect the rate when scrolling to the top
-            ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate
-                ? 'out'
-                : ctx.scrollRate >= ctx.rate
-                    ? 'in'
-                    : 'out';
-        // console.log('updateStates', ctx.zone);
-    };
-    // prettier-ignore
-    const canCall = ({ zone, scrollRate, rate, scrollTop, repeat }) => zone === 'out'
-        ? scrollRate >= rate
-        : repeat
-            // case: the scroll rate cannot detect the rate when scrolling to the top
-            ? scrollRate < rate || (scrollTop === 0 && scrollRate >= rate)
-            : false;
-    /*
-    // NOTE: same logic the above (code size optimiazation)
-    const canCall = (ctx: OnScrollInternalContext): boolean => {
-      // console.log('repeat', ctx.repeat, 'rate', ctx.rate, 'scrollRate', ctx.scrollRate, '1 - rate', 1 - ctx.rate, '1 - scrollRate', 1 - ctx.scrollRate, 'scrollRate >= rate', ctx.scrollRate >= ctx.rate, '1 - scrollRate >= 1 - rate', 1 - ctx.scrollRate >= 1 - ctx.rate);
-      // console.log(ctx.rate, 'deltaRate', ctx.deltaRate, 'reviousRate', ctx.previousRate)
-      if (ctx.zone === 'out') {
-        return ctx.scrollRate >= ctx.rate;
-      } else {
-        // 'in'
-        if (ctx.repeat) {
-          return ctx.scrollRate < ctx.rate || (ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate);
-        } else {
-          return false;
-        }
-      }
-    };
-    //*/
-    const onScroll = () => {
-        const scrollTop = html.scrollTop || body.scrollTop;
-        const pageHeight = Math.max(...[body.clientHeight, body.scrollHeight, html.scrollHeight, html.clientHeight]);
-        const viewHeight = Math.min(...[html.clientHeight, body.clientHeight]);
-        const scrollRate = (scrollTop + viewHeight) / pageHeight;
-        // console.log('scrollRate ->', scrollRate, 'scrollTop ->', scrollTop);
-        contexts.forEach(ctx => {
-            ctx.scrollRate = scrollRate;
-            ctx.deltaRate = ctx.scrollRate - ctx.previousRate;
-            ctx.previousRate = ctx.scrollRate;
-            ctx.scrollTop = scrollTop;
-            if (canCall(ctx)) {
-                const repeat = !!_fn(Object.assign({ direction: direction(ctx) }, ctx));
-                updateStates(ctx, repeat);
-            }
-        });
-    };
-    // register scorll event
-    window.addEventListener('scroll', onScroll);
-    // return disposing (finalizing/releasing) function
-    return () => {
-        window.removeEventListener('scroll', onScroll);
-    };
-}
-/**
- * 指定した時間の経過後に呼び出すコールバックを登録します
- *
- * @param time - コールバックを呼び出すまでの時間。単位はミリセカンド(ms)
- * @param fn - 指定した時間が経過後に呼び出されるコールバック関数
- *
- * @returns コールバックを呼び出すためのタイマーを停止する関数を返します
- *
- * @public
- */
-function onTime(time, fn) {
-    const timeoutHandler = setTimeout(fn, time);
-    return () => timeoutHandler && clearTimeout(timeoutHandler);
-}
 /** @internal */
-function hasSuffix(value, suffix) {
-    return new RegExp(`[0-9]${suffix}$`).test(value);
-}
+const DefaultSlideNavigationButton = {
+    type: 'circle',
+    size: '8px',
+    color: '#ddd',
+    colorActive: '#666',
+};
 /** @internal */
-function randStr(digit = 8) {
-    return Math.random().toString(32).substring(digit);
-}
-/**
- * Goolge Fonts用のURLを生成
- *
- * @param fonts - フォント名の配列
- * @param texts - 使用するテキストの配列
- *
- * @remarks
- * textsを指定した場合フォントサイズが削減される
- *
- * @internal
- */
-function makeGoogleFontUrl(fonts, texts) {
-    const params = [];
-    params.push('display=swap');
-    if (texts) {
-        texts.forEach(text => params.push(`text=${text}`));
-    }
-    fonts.forEach(font => params.push(`family=${font.replace(/['"]/g, '').replace(/ /g, '+')}`));
-    return `https://fonts.googleapis.com/css2?${params.join('&')}`;
-}
-/**
- * HTML要素を生成
- *
- * @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;
+const DefaultFormButtonColor = {
+    main: '#2aab9f',
+    sub: '#fff',
 };
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function getGoogleFontsParam() {
-    return 'family=' + Fonts.map(font => font.replace(/ /g, '+')).join('&family=');
-}
 
 /**
  * Store to handle action setting
@@ -2963,27 +2953,73 @@ class BackgroundOverlay extends SvelteComponent {
 	}
 }
 
+/**
+ * data属性とカスタムのイベントハンドラによるstopPropagation。
+ * デフォルトのstopPropagationだと伝播先のpreventDefaultも無効化されてしまうため、それの対策。
+ */
+function createDataAttrKey(eventName) {
+    return `data-stop-propagation-${eventName}-${actionId}`;
+}
+function dataAttrStopPropagation(eventName) {
+    const dataAttr = createDataAttrKey(eventName);
+    return {
+        [dataAttr]: true,
+    };
+}
+function checkStopPropagation(eventName, handler) {
+    const dataAttr = createDataAttrKey(eventName);
+    return function (event) {
+        let el = event.target;
+        do {
+            const _el = el;
+            if (_el === this) {
+                // handlerの中で伝播先のDOMが同期的に消されると
+                // preventDefaultが呼ばれずにデフォルトの挙動だけ残ってしまう
+                setTimeout(() => {
+                    handler(event);
+                }, 0);
+                break;
+            }
+            if (_el.hasAttribute(dataAttr))
+                break;
+            el = el.parentElement || el.parentNode;
+        } while (el !== null && el.nodeType === 1);
+    };
+}
+
 /* src/components/Button.svelte generated by Svelte v3.53.1 */
 
 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}");
 }
 
-// (49:0) {:else}
+// (50:0) {:else}
 function create_else_block$3(ctx) {
 	let button;
 	let current;
 	let mounted;
 	let dispose;
-	const default_slot_template = /*#slots*/ ctx[10].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[9], null);
+	const default_slot_template = /*#slots*/ ctx[9].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
+
+	let button_levels = [
+		{ class: BUTTON_CLASS },
+		{ style: /*style*/ ctx[1] },
+		dataAttrStopPropagation('click')
+	];
+
+	let button_data = {};
+
+	for (let i = 0; i < button_levels.length; i += 1) {
+		button_data = assign(button_data, button_levels[i]);
+	}
 
 	return {
 		c() {
 			button = element("button");
 			if (default_slot) default_slot.c();
-			attr(button, "class", "" + (null_to_empty(BUTTON_CLASS) + " svelte-1tg0tf"));
-			attr(button, "style", /*style*/ ctx[1]);
+			set_attributes(button, button_data);
+			toggle_class(button, "svelte-1tg0tf", true);
 		},
 		m(target, anchor) {
 			insert(target, button, anchor);
@@ -2992,32 +3028,37 @@ function create_else_block$3(ctx) {
 				default_slot.m(button, null);
 			}
 
+			if (button.autofocus) button.focus();
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(button, "click", /*handleClickButton*/ ctx[3]);
+				dispose = listen(button, "click", checkStopPropagation('click', /*handleClick*/ ctx[3]));
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 512)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[9],
+						/*$$scope*/ ctx[8],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[9])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[9], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty & /*style*/ 2) {
-				attr(button, "style", /*style*/ ctx[1]);
-			}
+			set_attributes(button, button_data = get_spread_update(button_levels, [
+				{ class: BUTTON_CLASS },
+				(!current || dirty & /*style*/ 2) && { style: /*style*/ ctx[1] },
+				dataAttrStopPropagation('click')
+			]));
+
+			toggle_class(button, "svelte-1tg0tf", true);
 		},
 		i(local) {
 			if (current) return;
@@ -3037,12 +3078,12 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (45:39) 
+// (46:39) 
 function create_if_block_2(ctx) {
 	let div;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[10].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[9], null);
+	const default_slot_template = /*#slots*/ ctx[9].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
 
 	return {
 		c() {
@@ -3062,15 +3103,15 @@ function create_if_block_2(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 512)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[9],
+						/*$$scope*/ ctx[8],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[9])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[9], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
 						null
 					);
 				}
@@ -3096,7 +3137,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (41:41) 
+// (35:41) 
 function create_if_block_1$2(ctx) {
 	let a;
 	let a_href_value;
@@ -3104,17 +3145,33 @@ function create_if_block_1$2(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	const default_slot_template = /*#slots*/ ctx[10].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[9], null);
+	const default_slot_template = /*#slots*/ ctx[9].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
+
+	let a_levels = [
+		{ class: BUTTON_CLASS },
+		{ style: /*style*/ ctx[1] },
+		{
+			href: a_href_value = /*onClick*/ ctx[0].args[0]
+		},
+		{
+			target: a_target_value = /*onClick*/ ctx[0].args[1] === true ? '_blank' : null
+		},
+		dataAttrStopPropagation('click')
+	];
+
+	let a_data = {};
+
+	for (let i = 0; i < a_levels.length; i += 1) {
+		a_data = assign(a_data, a_levels[i]);
+	}
 
 	return {
 		c() {
 			a = element("a");
 			if (default_slot) default_slot.c();
-			attr(a, "class", "" + (null_to_empty(BUTTON_CLASS) + " svelte-1tg0tf"));
-			attr(a, "style", /*style*/ ctx[1]);
-			attr(a, "href", a_href_value = /*onClick*/ ctx[0].args[0]);
-			attr(a, "target", a_target_value = /*onClick*/ ctx[0].args[1] === true ? '_blank' : null);
+			set_attributes(a, a_data);
+			toggle_class(a, "svelte-1tg0tf", true);
 		},
 		m(target, anchor) {
 			insert(target, a, anchor);
@@ -3126,37 +3183,35 @@ function create_if_block_1$2(ctx) {
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(a, "click", /*handleClickAnchor*/ ctx[4]);
+				dispose = listen(a, "click", prevent_default(checkStopPropagation('click', /*handleClick*/ ctx[3])));
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 512)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[9],
+						/*$$scope*/ ctx[8],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[9])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[9], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty & /*style*/ 2) {
-				attr(a, "style", /*style*/ ctx[1]);
-			}
-
-			if (!current || dirty & /*onClick*/ 1 && a_href_value !== (a_href_value = /*onClick*/ ctx[0].args[0])) {
-				attr(a, "href", a_href_value);
-			}
+			set_attributes(a, a_data = get_spread_update(a_levels, [
+				{ class: BUTTON_CLASS },
+				(!current || dirty & /*style*/ 2) && { style: /*style*/ ctx[1] },
+				(!current || dirty & /*onClick*/ 1 && a_href_value !== (a_href_value = /*onClick*/ ctx[0].args[0])) && { href: a_href_value },
+				(!current || dirty & /*onClick*/ 1 && a_target_value !== (a_target_value = /*onClick*/ ctx[0].args[1] === true ? '_blank' : null)) && { target: a_target_value },
+				dataAttrStopPropagation('click')
+			]));
 
-			if (!current || dirty & /*onClick*/ 1 && a_target_value !== (a_target_value = /*onClick*/ ctx[0].args[1] === true ? '_blank' : null)) {
-				attr(a, "target", a_target_value);
-			}
+			toggle_class(a, "svelte-1tg0tf", true);
 		},
 		i(local) {
 			if (current) return;
@@ -3176,12 +3231,12 @@ function create_if_block_1$2(ctx) {
 	};
 }
 
-// (37:0) {#if disabled}
+// (31:0) {#if disabled}
 function create_if_block$6(ctx) {
 	let div;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[10].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[9], null);
+	const default_slot_template = /*#slots*/ ctx[9].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
 
 	return {
 		c() {
@@ -3201,15 +3256,15 @@ function create_if_block$6(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 512)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[9],
+						/*$$scope*/ ctx[8],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[9])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[9], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
 						null
 					);
 				}
@@ -3317,17 +3372,7 @@ function instance$u($$self, $$props, $$invalidate) {
 	let { eventValue = undefined } = $$props;
 	let { style = '' } = $$props;
 
-	function handleClickButton() {
-		if (eventName) {
-			send_event(eventName, eventValue);
-		}
-
-		execOnClickOperation(onClick);
-	}
-
-	function handleClickAnchor(e) {
-		e.preventDefault();
-
+	function handleClick() {
 		if (eventName) {
 			send_event(eventName, eventValue);
 		}
@@ -3337,18 +3382,18 @@ function instance$u($$self, $$props, $$invalidate) {
 
 	const { path: statePath } = getStateItemContext() ?? { path: '/' };
 	const valuesAreValid = getValuesAreValidReader(statePath);
-	component_subscribe($$self, valuesAreValid, value => $$invalidate(8, $valuesAreValid = value));
+	component_subscribe($$self, valuesAreValid, value => $$invalidate(7, $valuesAreValid = value));
 
 	$$self.$$set = $$props => {
 		if ('onClick' in $$props) $$invalidate(0, onClick = $$props.onClick);
-		if ('eventName' in $$props) $$invalidate(6, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(7, eventValue = $$props.eventValue);
+		if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
+		if ('eventValue' in $$props) $$invalidate(6, eventValue = $$props.eventValue);
 		if ('style' in $$props) $$invalidate(1, style = $$props.style);
-		if ('$$scope' in $$props) $$invalidate(9, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*onClick, $valuesAreValid*/ 257) {
+		if ($$self.$$.dirty & /*onClick, $valuesAreValid*/ 129) {
 			$$invalidate(2, disabled = (() => {
 				let isEnabled = true;
 
@@ -3367,8 +3412,7 @@ function instance$u($$self, $$props, $$invalidate) {
 		onClick,
 		style,
 		disabled,
-		handleClickButton,
-		handleClickAnchor,
+		handleClick,
 		valuesAreValid,
 		eventName,
 		eventValue,
@@ -3390,8 +3434,8 @@ class Button extends SvelteComponent {
 			safe_not_equal,
 			{
 				onClick: 0,
-				eventName: 6,
-				eventValue: 7,
+				eventName: 5,
+				eventValue: 6,
 				style: 1
 			},
 			add_css$r
@@ -4737,7 +4781,7 @@ function add_css$n(target) {
 	append_styles(target, "svelte-wb7ek", ".text-button-element.svelte-wb7ek{width:100%;height:100%}.text-button-element.svelte-wb7ek > .button{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:transparent;border:none;box-shadow:transparent;box-sizing:border-box;cursor:pointer;transition:box-shadow 0.2s;white-space:pre-wrap;overflow:hidden}.text-button-element.svelte-wb7ek > .button._disabled{cursor:not-allowed !important;opacity:0.2}.text-button-element.svelte-wb7ek > .button:not(._disabled):active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button-element.svelte-wb7ek > .button:not(._disabled):hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
 }
 
-// (36:2) <Button onClick={onClick} {style} {eventName}>
+// (46:2) <Button onClick={onClick} {style} {eventName}>
 function create_default_slot$5(ctx) {
 	let rendertext;
 	let current;
@@ -4773,9 +4817,6 @@ function create_default_slot$5(ctx) {
 
 function create_fragment$o(ctx) {
 	let div;
-	let link;
-	let link_href_value;
-	let t;
 	let button;
 	let current;
 
@@ -4792,31 +4833,21 @@ function create_fragment$o(ctx) {
 	return {
 		c() {
 			div = element("div");
-			link = element("link");
-			t = space();
 			create_component(button.$$.fragment);
-			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-button-element svelte-wb7ek");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
-			append(div, link);
-			append(div, t);
 			mount_component(button, 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);
-			}
-
 			const button_changes = {};
 			if (dirty & /*onClick*/ 2) button_changes.onClick = /*onClick*/ ctx[1];
 			if (dirty & /*style*/ 8) button_changes.style = /*style*/ ctx[3];
 			if (dirty & /*eventName*/ 4) button_changes.eventName = /*eventName*/ ctx[2];
 
-			if (dirty & /*$$scope, text*/ 65) {
+			if (dirty & /*$$scope, text*/ 129) {
 				button_changes.$$scope = { dirty, ctx };
 			}
 
@@ -4843,6 +4874,7 @@ function instance$o($$self, $$props, $$invalidate) {
 	let { text = 'ボタンラベル' } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 	let { eventName = '' } = $$props;
+	let { font = SYSTEM_FONT } = $$props;
 	let { _buttonStyle = 'color:#ffffff; font-size:14px; font-weight:bold; justify-content:center; align-items:center; padding:1px 6px 1px 6px; line-height: 1.5;' } = $$props;
 	let { _style = 'background-color: #000000; border-radius:4px; cursor: pointer' } = $$props;
 
@@ -4850,17 +4882,22 @@ function instance$o($$self, $$props, $$invalidate) {
 		if ('text' in $$props) $$invalidate(0, text = $$props.text);
 		if ('onClick' in $$props) $$invalidate(1, onClick = $$props.onClick);
 		if ('eventName' in $$props) $$invalidate(2, eventName = $$props.eventName);
-		if ('_buttonStyle' in $$props) $$invalidate(4, _buttonStyle = $$props._buttonStyle);
-		if ('_style' in $$props) $$invalidate(5, _style = $$props._style);
+		if ('font' in $$props) $$invalidate(4, font = $$props.font);
+		if ('_buttonStyle' in $$props) $$invalidate(5, _buttonStyle = $$props._buttonStyle);
+		if ('_style' in $$props) $$invalidate(6, _style = $$props._style);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*_buttonStyle, _style*/ 48) {
-			$$invalidate(3, style = [..._buttonStyle.split(';'), ..._style.split(';')].filter(Boolean).join(';'));
+		if ($$self.$$.dirty & /*font*/ 16) {
+			addFont(font);
+		}
+
+		if ($$self.$$.dirty & /*_buttonStyle, _style, font*/ 112) {
+			$$invalidate(3, style = [..._buttonStyle.split(';'), ..._style.split(';'), `font-family:${font}`].filter(prop => prop).join(';'));
 		}
 	};
 
-	return [text, onClick, eventName, style, _buttonStyle, _style];
+	return [text, onClick, eventName, style, font, _buttonStyle, _style];
 }
 
 class TextButtonElement extends SvelteComponent {
@@ -4877,8 +4914,9 @@ class TextButtonElement extends SvelteComponent {
 				text: 0,
 				onClick: 1,
 				eventName: 2,
-				_buttonStyle: 4,
-				_style: 5
+				font: 4,
+				_buttonStyle: 5,
+				_style: 6
 			},
 			add_css$n
 		);
@@ -7277,7 +7315,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (369:2) {#if isVisiblePrevButton}
+// (371:2) {#if isVisiblePrevButton}
 function create_if_block_1(ctx) {
 	let div1;
 	let div0;
@@ -7328,7 +7366,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (378:2) {#if isVisibleNextButton}
+// (380:2) {#if isVisibleNextButton}
 function create_if_block$1(ctx) {
 	let div1;
 	let div0;
@@ -7379,7 +7417,7 @@ function create_if_block$1(ctx) {
 	};
 }
 
-// (391:4) {#each items as _, i}
+// (393:4) {#each items as _, i}
 function create_each_block(ctx) {
 	let div1;
 	let div0;
@@ -7452,6 +7490,13 @@ function create_fragment$b(ctx) {
 		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
 	}
 
+	let div3_levels = [{ class: "root" }, dataAttrStopPropagation('click')];
+	let div3_data = {};
+
+	for (let i = 0; i < div3_levels.length; i += 1) {
+		div3_data = assign(div3_data, div3_levels[i]);
+	}
+
 	return {
 		c() {
 			div3 = element("div");
@@ -7475,7 +7520,8 @@ function create_fragment$b(ctx) {
 			attr(div1, "style", /*_style*/ ctx[0]);
 			attr(div2, "class", "navigation svelte-1wlcw5a");
 			attr(div2, "style", /*navigationStyle*/ ctx[4]);
-			attr(div3, "class", "root svelte-1wlcw5a");
+			set_attributes(div3, div3_data);
+			toggle_class(div3, "svelte-1wlcw5a", true);
 		},
 		m(target, anchor) {
 			insert(target, div3, anchor);
@@ -7581,6 +7627,9 @@ function create_fragment$b(ctx) {
 			if (!current || dirty[0] & /*navigationStyle*/ 16) {
 				attr(div2, "style", /*navigationStyle*/ ctx[4]);
 			}
+
+			set_attributes(div3, div3_data = get_spread_update(div3_levels, [{ class: "root" }, dataAttrStopPropagation('click')]));
+			toggle_class(div3, "svelte-1wlcw5a", true);
 		},
 		i(local) {
 			if (current) return;
@@ -7834,7 +7883,9 @@ function instance$b($$self, $$props, $$invalidate) {
 	}
 
 	function handleTouchMove(event) {
+		// ウィンドウのスクロールを防ぐ
 		event.preventDefault();
+
 		const clientX = event.touches[0].clientX;
 		const timeStamp = event.timeStamp;
 		handleMoving(clientX, timeStamp);