@plaidev/karte-action-sdk 1.1.187 → 1.1.188

package/dist/hydrate/index.es.js

@@ -25,233 +25,6 @@ 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 true;
-};
-/** @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 parseStyle = (style) => {
-    return Object.fromEntries(style.split(';').map(attr => attr.split(':').map(str => str.trim())));
-};
-/** @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);
-}
-/**
- * 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の定義
  */
@@ -671,8 +444,6 @@ const state = writable('/');
  * @public
  */
 function setState$1(stateId, options) {
-    if (options?.disableInPreview)
-        return;
     state.set(stateId);
 }
 /**
@@ -968,6 +739,233 @@ function resetVariables() {
  */
 const formData = writable({});
 
+/** @internal */
+const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
+/** @internal */
+const isPreview = () => {
+    return true;
+};
+/** @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 parseStyle = (style) => {
+    return Object.fromEntries(style.split(';').map(attr => attr.split(':').map(str => str.trim())));
+};
+/** @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);
+}
+/**
+ * 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;
+};
+
 /**
  * アクションのログの記録の管理
  */
@@ -1652,9 +1650,6 @@ function createModal(App, options = {
         const trigger = event?.detail?.trigger ? event.detail.trigger : 'none';
         show(trigger);
     };
-    const autoShow = () => {
-        return show('auto');
-    };
     // ここからメインの処理
     initialize({ send: options.send, initialState: data.initial_state });
     // ActionTable APIへの非同期リクエスト
@@ -1668,9 +1663,6 @@ function createModal(App, options = {
     window.addEventListener(ACTION_CHANGE_STATE_EVENT, handleState);
     let showTriggerCleanups = [];
     let closeTriggerCleanups = [];
-    {
-        autoShow();
-    }
     // 旧Widget API IFの処理
     const { onCreateHandlers } = getInternalHandlers();
     if (onCreateHandlers) {
@@ -9223,7 +9215,7 @@ class Countdown extends SvelteComponent {
 /* src/components/Box.svelte generated by Svelte v3.53.1 */
 
 function add_css$7(target) {
-	append_styles(target, "svelte-z0dar7", ".box.svelte-z0dar7{position:relative;width:100%;height:100%}.box.svelte-z0dar7 > .button{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000}");
+	append_styles(target, "svelte-ppc4fn", ".box.svelte-ppc4fn{position:relative;width:100%;height:100%}.box.svelte-ppc4fn > .button{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000}");
 }
 
 // (24:2) <Button {onClick} style={_style} {eventName}>
@@ -9306,7 +9298,7 @@ function create_fragment$8(ctx) {
 			this.h();
 		},
 		h() {
-			attr(div, "class", "box svelte-z0dar7");
+			attr(div, "class", "box svelte-ppc4fn");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -10529,7 +10521,7 @@ class TextButtonBlock extends SvelteComponent {
 /* src/components/ImageBlock.svelte generated by Svelte v3.53.1 */
 
 function add_css(target) {
-	append_styles(target, "svelte-xuever", ".image-block.svelte-xuever{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.image.svelte-xuever{width:100%;height:100%}.transport.svelte-xuever:hover,.transport.svelte-xuever:focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(0, 0, 0, 0.16)}");
+	append_styles(target, "svelte-77bqvv", ".image-block.svelte-77bqvv{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.image.svelte-77bqvv{width:100%;height:100%}.transport.svelte-77bqvv:hover,.transport.svelte-77bqvv:focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(0, 0, 0, 0.16)}");
 }
 
 function create_fragment(ctx) {
@@ -10564,14 +10556,14 @@ function create_fragment(ctx) {
 			this.h();
 		},
 		h() {
-			attr(img, "class", "image svelte-xuever");
+			attr(img, "class", "image svelte-77bqvv");
 			attr(img, "loading", "lazy");
 			attr(img, "width", "auto");
 			attr(img, "height", "auto");
 			attr(img, "style", /*_imageStyle*/ ctx[3]);
 			if (!src_url_equal(img.src, img_src_value = /*src*/ ctx[0])) attr(img, "src", img_src_value);
 			attr(img, "alt", /*alt*/ ctx[1]);
-			attr(div, "class", div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-xuever"));
+			attr(div, "class", div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-77bqvv"));
 			attr(div, "style", /*_style*/ ctx[4]);
 		},
 		m(target, anchor) {
@@ -10596,7 +10588,7 @@ function create_fragment(ctx) {
 				attr(img, "alt", /*alt*/ ctx[1]);
 			}
 
-			if (dirty & /*transport*/ 4 && div_class_value !== (div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-xuever"))) {
+			if (dirty & /*transport*/ 4 && div_class_value !== (div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-77bqvv"))) {
 				attr(div, "class", div_class_value);
 			}
 

package/dist/index.es.js

@@ -25,237 +25,6 @@ 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 parseStyle = (style) => {
-    return Object.fromEntries(style.split(';').map(attr => attr.split(':').map(str => str.trim())));
-};
-/** @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の定義
  */
@@ -970,6 +739,237 @@ function resetVariables() {
  */
 const formData = writable({});
 
+/** @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 parseStyle = (style) => {
+    return Object.fromEntries(style.split(';').map(attr => attr.split(':').map(str => str.trim())));
+};
+/** @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;
+};
+
 /**
  * アクションのログの記録の管理
  */
@@ -8702,7 +8702,7 @@ class Countdown extends SvelteComponent {
 /* src/components/Box.svelte generated by Svelte v3.53.1 */
 
 function add_css$7(target) {
-	append_styles(target, "svelte-z0dar7", ".box.svelte-z0dar7{position:relative;width:100%;height:100%}.box.svelte-z0dar7 > .button{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000}");
+	append_styles(target, "svelte-ppc4fn", ".box.svelte-ppc4fn{position:relative;width:100%;height:100%}.box.svelte-ppc4fn > .button{position:absolute;inset:0;border-width:0px;border-style:solid;border-color:#000000}");
 }
 
 // (24:2) <Button {onClick} style={_style} {eventName}>
@@ -8772,7 +8772,7 @@ function create_fragment$8(ctx) {
 		c() {
 			div = element("div");
 			create_component(button.$$.fragment);
-			attr(div, "class", "box svelte-z0dar7");
+			attr(div, "class", "box svelte-ppc4fn");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -9905,7 +9905,7 @@ class TextButtonBlock extends SvelteComponent {
 /* src/components/ImageBlock.svelte generated by Svelte v3.53.1 */
 
 function add_css(target) {
-	append_styles(target, "svelte-xuever", ".image-block.svelte-xuever{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.image.svelte-xuever{width:100%;height:100%}.transport.svelte-xuever:hover,.transport.svelte-xuever:focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(0, 0, 0, 0.16)}");
+	append_styles(target, "svelte-77bqvv", ".image-block.svelte-77bqvv{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.image.svelte-77bqvv{width:100%;height:100%}.transport.svelte-77bqvv:hover,.transport.svelte-77bqvv:focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(0, 0, 0, 0.16)}");
 }
 
 function create_fragment(ctx) {
@@ -9920,14 +9920,14 @@ function create_fragment(ctx) {
 		c() {
 			div = element("div");
 			img = element("img");
-			attr(img, "class", "image svelte-xuever");
+			attr(img, "class", "image svelte-77bqvv");
 			attr(img, "loading", "lazy");
 			attr(img, "width", "auto");
 			attr(img, "height", "auto");
 			attr(img, "style", /*_imageStyle*/ ctx[3]);
 			if (!src_url_equal(img.src, img_src_value = /*src*/ ctx[0])) attr(img, "src", img_src_value);
 			attr(img, "alt", /*alt*/ ctx[1]);
-			attr(div, "class", div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-xuever"));
+			attr(div, "class", div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-77bqvv"));
 			attr(div, "style", /*_style*/ ctx[4]);
 		},
 		m(target, anchor) {
@@ -9952,7 +9952,7 @@ function create_fragment(ctx) {
 				attr(img, "alt", /*alt*/ ctx[1]);
 			}
 
-			if (dirty & /*transport*/ 4 && div_class_value !== (div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-xuever"))) {
+			if (dirty & /*transport*/ 4 && div_class_value !== (div_class_value = "" + (null_to_empty('image-block' + (/*transport*/ ctx[2] ? ' transport' : '')) + " svelte-77bqvv"))) {
 				attr(div, "class", div_class_value);
 			}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.187",
+  "version": "1.1.188",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",