@plaidev/karte-action-sdk 1.1.266-29065938.e3ec46c6 → 1.1.267-29071733.fabf64a6

package/dist/hydrate/index.es.js

@@ -1,7 +1,7 @@
 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, getContext, setContext, createEventDispatcher } from 'svelte';
 import { SvelteComponent, init, safe_not_equal, empty, head_selector, detach, append_hydration, noop, component_subscribe, element, claim_element, attr, insert_hydration, create_slot, create_component, space, claim_component, claim_space, mount_component, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, append_styles, group_outros, check_outros, children, null_to_empty, listen, assign, set_attributes, toggle_class, get_spread_update, prevent_default, is_function, add_render_callback, create_in_transition, binding_callbacks, set_style, svg_element, claim_svg_element, destroy_each, text, claim_text, set_data, src_url_equal, set_store_value, run_all, HtmlTagHydration, claim_html_tag, construct_svelte_component, subscribe, set_custom_element_data_map } from 'svelte/internal';
-import 'svelte/easing';
+import { linear, elasticOut, cubicOut } from 'svelte/easing';
 
 /** @internal */
 const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
@@ -3381,6 +3381,54 @@ const execOnClickOperation = (onClickOperation) => {
 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.
  *
@@ -3396,6 +3444,35 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
         return {};
     }
 }
+/**
+ * The function to activate svelte animation v2.
+ *
+ * @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 customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
+    if (disabled) {
+        return {};
+    }
+    let [x, y] = [0, 0];
+    for (const { query, x: tx, y: ty } of transforms) {
+        if (query == null || window.matchMedia(query).matches) {
+            x = tx;
+            y = ty;
+            break;
+        }
+    }
+    return {
+        delay,
+        duration,
+        easing: EASING[animationStyle],
+        css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
+    };
+}
 
 /* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
 
@@ -18651,7 +18728,7 @@ function add_css$9(target) {
 	append_styles(target, "svelte-45ue06", "*{box-sizing:border-box}.modal.svelte-45ue06{position:fixed;z-index:2147483647;display:flex}.modal.svelte-45ue06 > .button{flex:auto;display:flex}@media screen and (min-width: 641px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc);margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
 }
 
-// (220:0) {:else}
+// (222:0) {:else}
 function create_else_block(ctx) {
 	let backgroundoverlay;
 	let current;
@@ -18698,7 +18775,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (209:24) 
+// (211:24) 
 function create_if_block_2(ctx) {
 	let backgroundoverlay0;
 	let t;
@@ -18772,7 +18849,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (207:0) {#if isCanvasPreview}
+// (209:0) {#if isCanvasPreview}
 function create_if_block_1$1(ctx) {
 	return {
 		c: noop,
@@ -18785,14 +18862,14 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (223:0) {#if visible}
+// (225:0) {#if visible}
 function create_if_block$3(ctx) {
 	let div;
 	let div_class_value;
 	let div_intro;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[26].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[25], null);
+	const default_slot_template = /*#slots*/ ctx[27].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
 
 	return {
 		c() {
@@ -18819,7 +18896,7 @@ function create_if_block$3(ctx) {
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
 			attr(div, "data-layer-id", /*layerId*/ ctx[2]);
-			attr(div, "style", Array.from(/*modalStyles*/ ctx[14]).join(';'));
+			attr(div, "style", Array.from(/*modalStyles*/ ctx[15]).join(';'));
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -18828,22 +18905,22 @@ function create_if_block$3(ctx) {
 				default_slot.m(div, null);
 			}
 
-			/*div_binding*/ ctx[27](div);
+			/*div_binding*/ ctx[28](div);
 			current = true;
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 33554432)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 67108864)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[25],
+						/*$$scope*/ ctx[26],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[25], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
 						null
 					);
 				}
@@ -18863,9 +18940,10 @@ function create_if_block$3(ctx) {
 
 			if (!div_intro) {
 				add_render_callback(() => {
-					div_intro = create_in_transition(div, customAnimation, {
+					div_intro = create_in_transition(div, customAnimationV2, {
 						transforms: /*transforms*/ ctx[3],
-						animationStyle: /*animation*/ ctx[1]
+						animationStyle: /*animation*/ ctx[1],
+						disabled: !/*isOnSite*/ ctx[14]
 					});
 
 					div_intro.start();
@@ -18881,7 +18959,7 @@ function create_if_block$3(ctx) {
 		d(detaching) {
 			if (detaching) detach(div);
 			if (default_slot) default_slot.d(detaching);
-			/*div_binding*/ ctx[27](null);
+			/*div_binding*/ ctx[28](null);
 		}
 	};
 }
@@ -19027,6 +19105,8 @@ function instance$d($$self, $$props, $$invalidate) {
 	let { layerId = '' } = $$props;
 	const { brandKit } = useBrandKit();
 	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
+	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
+	console.log('isOnSite', isOnSite);
 
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
@@ -19059,20 +19139,20 @@ function instance$d($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
-		if ('placement' in $$props) $$invalidate(15, placement = $$props.placement);
-		if ('breakPoint' in $$props) $$invalidate(16, breakPoint = $$props.breakPoint);
-		if ('elasticity' in $$props) $$invalidate(17, elasticity = $$props.elasticity);
+		if ('placement' in $$props) $$invalidate(16, placement = $$props.placement);
+		if ('breakPoint' in $$props) $$invalidate(17, breakPoint = $$props.breakPoint);
+		if ('elasticity' in $$props) $$invalidate(18, elasticity = $$props.elasticity);
 		if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
-		if ('props' in $$props) $$invalidate(18, props = $$props.props);
-		if ('closeEventName' in $$props) $$invalidate(19, closeEventName = $$props.closeEventName);
-		if ('closeEventValue' in $$props) $$invalidate(20, closeEventValue = $$props.closeEventValue);
+		if ('props' in $$props) $$invalidate(19, props = $$props.props);
+		if ('closeEventName' in $$props) $$invalidate(20, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(21, closeEventValue = $$props.closeEventValue);
 		if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
-		if ('$$scope' in $$props) $$invalidate(25, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 1572864) {
-			$$invalidate(24, close = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 3145728) {
+			$$invalidate(25, close = () => {
 				const onClose = { operation: 'closeApp', args: ['button'] };
 
 				if (closeEventName) {
@@ -19083,7 +19163,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
 			{
 				if (!isCanvasPreview && isExistBackgroundOverlayValue) {
 					$$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
@@ -19098,29 +19178,29 @@ function instance$d($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
 			{
 				if (placement && placement.backgroundClick) {
-					$$invalidate(21, backgroundClickFunction = placement.backgroundClick);
+					$$invalidate(22, backgroundClickFunction = placement.backgroundClick);
 				}
 
 				if (useBreakPoint) {
 					const pc = breakPoint?.PC?.placement?.backgroundClick;
 
 					if (pc) {
-						$$invalidate(22, backgroundClickFunctionPC = pc);
+						$$invalidate(23, backgroundClickFunctionPC = pc);
 					}
 
 					const sp = breakPoint?.SP?.placement?.backgroundClick;
 
 					if (sp) {
-						$$invalidate(23, backgroundClickFunctionSP = sp);
+						$$invalidate(24, backgroundClickFunctionSP = sp);
 					}
 				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 3670016) {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 7340032) {
 			$$invalidate(12, backgroundClick = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -19130,7 +19210,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 5767168) {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 11534336) {
 			$$invalidate(11, backgroundClickPC = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -19140,7 +19220,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 9961472) {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 19922944) {
 			$$invalidate(10, backgroundClickSP = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -19150,7 +19230,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 98313) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 196617) {
 			// 表示位置のスタイルとアニメーションの動きを設定
 			{
 				// 表示位置のスタイルの設定
@@ -19198,7 +19278,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 360449) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 720897) {
 			// 表示位置の調整のスタイルを設定
 			{
 				let margin = DefaultModalPlacement.margin;
@@ -19242,7 +19322,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*close*/ 16777216) {
+		if ($$self.$$.dirty & /*close*/ 33554432) {
 			$$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
 		}
 	};
@@ -19267,6 +19347,7 @@ function instance$d($$self, $$props, $$invalidate) {
 		backgroundClickPC,
 		backgroundClick,
 		isCanvasPreview,
+		isOnSite,
 		modalStyles,
 		placement,
 		breakPoint,
@@ -19296,13 +19377,13 @@ class Modal extends SvelteComponent {
 			safe_not_equal,
 			{
 				useBreakPoint: 0,
-				placement: 15,
-				breakPoint: 16,
-				elasticity: 17,
+				placement: 16,
+				breakPoint: 17,
+				elasticity: 18,
 				animation: 1,
-				props: 18,
-				closeEventName: 19,
-				closeEventValue: 20,
+				props: 19,
+				closeEventName: 20,
+				closeEventValue: 21,
 				layerId: 2
 			},
 			add_css$9

package/dist/index.es.js

@@ -3479,6 +3479,35 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
         css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
     };
 }
+/**
+ * The function to activate svelte animation v2.
+ *
+ * @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 customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
+    if (disabled) {
+        return {};
+    }
+    let [x, y] = [0, 0];
+    for (const { query, x: tx, y: ty } of transforms) {
+        if (query == null || window.matchMedia(query).matches) {
+            x = tx;
+            y = ty;
+            break;
+        }
+    }
+    return {
+        delay,
+        duration,
+        easing: EASING[animationStyle],
+        css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
+    };
+}
 
 /* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
 
@@ -17281,7 +17310,7 @@ function add_css$9(target) {
 	append_styles(target, "svelte-45ue06", "*{box-sizing:border-box}.modal.svelte-45ue06{position:fixed;z-index:2147483647;display:flex}.modal.svelte-45ue06 > .button{flex:auto;display:flex}@media screen and (min-width: 641px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc);margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
 }
 
-// (220:0) {:else}
+// (222:0) {:else}
 function create_else_block(ctx) {
 	let backgroundoverlay;
 	let current;
@@ -17325,7 +17354,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (209:24) 
+// (211:24) 
 function create_if_block_2(ctx) {
 	let backgroundoverlay0;
 	let t;
@@ -17394,7 +17423,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (207:0) {#if isCanvasPreview}
+// (209:0) {#if isCanvasPreview}
 function create_if_block_1$1(ctx) {
 	return {
 		c: noop,
@@ -17406,14 +17435,14 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (223:0) {#if visible}
+// (225:0) {#if visible}
 function create_if_block$3(ctx) {
 	let div;
 	let div_class_value;
 	let div_intro;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[26].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[25], null);
+	const default_slot_template = /*#slots*/ ctx[27].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
 
 	return {
 		c() {
@@ -17423,7 +17452,7 @@ function create_if_block$3(ctx) {
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
 			attr(div, "data-layer-id", /*layerId*/ ctx[2]);
-			attr(div, "style", Array.from(/*modalStyles*/ ctx[14]).join(';'));
+			attr(div, "style", Array.from(/*modalStyles*/ ctx[15]).join(';'));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -17432,22 +17461,22 @@ function create_if_block$3(ctx) {
 				default_slot.m(div, null);
 			}
 
-			/*div_binding*/ ctx[27](div);
+			/*div_binding*/ ctx[28](div);
 			current = true;
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 33554432)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 67108864)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[25],
+						/*$$scope*/ ctx[26],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[25], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
 						null
 					);
 				}
@@ -17467,9 +17496,10 @@ function create_if_block$3(ctx) {
 
 			if (!div_intro) {
 				add_render_callback(() => {
-					div_intro = create_in_transition(div, customAnimation, {
+					div_intro = create_in_transition(div, customAnimationV2, {
 						transforms: /*transforms*/ ctx[3],
-						animationStyle: /*animation*/ ctx[1]
+						animationStyle: /*animation*/ ctx[1],
+						disabled: !/*isOnSite*/ ctx[14]
 					});
 
 					div_intro.start();
@@ -17485,7 +17515,7 @@ function create_if_block$3(ctx) {
 		d(detaching) {
 			if (detaching) detach(div);
 			if (default_slot) default_slot.d(detaching);
-			/*div_binding*/ ctx[27](null);
+			/*div_binding*/ ctx[28](null);
 		}
 	};
 }
@@ -17625,6 +17655,8 @@ function instance$d($$self, $$props, $$invalidate) {
 	let { layerId = '' } = $$props;
 	const { brandKit } = useBrandKit();
 	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
+	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
+	console.log('isOnSite', isOnSite);
 
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
@@ -17657,20 +17689,20 @@ function instance$d($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
-		if ('placement' in $$props) $$invalidate(15, placement = $$props.placement);
-		if ('breakPoint' in $$props) $$invalidate(16, breakPoint = $$props.breakPoint);
-		if ('elasticity' in $$props) $$invalidate(17, elasticity = $$props.elasticity);
+		if ('placement' in $$props) $$invalidate(16, placement = $$props.placement);
+		if ('breakPoint' in $$props) $$invalidate(17, breakPoint = $$props.breakPoint);
+		if ('elasticity' in $$props) $$invalidate(18, elasticity = $$props.elasticity);
 		if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
-		if ('props' in $$props) $$invalidate(18, props = $$props.props);
-		if ('closeEventName' in $$props) $$invalidate(19, closeEventName = $$props.closeEventName);
-		if ('closeEventValue' in $$props) $$invalidate(20, closeEventValue = $$props.closeEventValue);
+		if ('props' in $$props) $$invalidate(19, props = $$props.props);
+		if ('closeEventName' in $$props) $$invalidate(20, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(21, closeEventValue = $$props.closeEventValue);
 		if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
-		if ('$$scope' in $$props) $$invalidate(25, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 1572864) {
-			$$invalidate(24, close = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 3145728) {
+			$$invalidate(25, close = () => {
 				const onClose = { operation: 'closeApp', args: ['button'] };
 
 				if (closeEventName) {
@@ -17681,7 +17713,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
 			{
 				if (!isCanvasPreview && isExistBackgroundOverlayValue) {
 					$$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
@@ -17696,29 +17728,29 @@ function instance$d($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
 			{
 				if (placement && placement.backgroundClick) {
-					$$invalidate(21, backgroundClickFunction = placement.backgroundClick);
+					$$invalidate(22, backgroundClickFunction = placement.backgroundClick);
 				}
 
 				if (useBreakPoint) {
 					const pc = breakPoint?.PC?.placement?.backgroundClick;
 
 					if (pc) {
-						$$invalidate(22, backgroundClickFunctionPC = pc);
+						$$invalidate(23, backgroundClickFunctionPC = pc);
 					}
 
 					const sp = breakPoint?.SP?.placement?.backgroundClick;
 
 					if (sp) {
-						$$invalidate(23, backgroundClickFunctionSP = sp);
+						$$invalidate(24, backgroundClickFunctionSP = sp);
 					}
 				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 3670016) {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 7340032) {
 			$$invalidate(12, backgroundClick = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -17728,7 +17760,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 5767168) {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 11534336) {
 			$$invalidate(11, backgroundClickPC = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -17738,7 +17770,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 9961472) {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 19922944) {
 			$$invalidate(10, backgroundClickSP = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
@@ -17748,7 +17780,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 98313) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 196617) {
 			// 表示位置のスタイルとアニメーションの動きを設定
 			{
 				// 表示位置のスタイルの設定
@@ -17796,7 +17828,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 360449) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 720897) {
 			// 表示位置の調整のスタイルを設定
 			{
 				let margin = DefaultModalPlacement.margin;
@@ -17840,7 +17872,7 @@ function instance$d($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*close*/ 16777216) {
+		if ($$self.$$.dirty & /*close*/ 33554432) {
 			$$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
 		}
 	};
@@ -17865,6 +17897,7 @@ function instance$d($$self, $$props, $$invalidate) {
 		backgroundClickPC,
 		backgroundClick,
 		isCanvasPreview,
+		isOnSite,
 		modalStyles,
 		placement,
 		breakPoint,
@@ -17894,13 +17927,13 @@ class Modal extends SvelteComponent {
 			safe_not_equal,
 			{
 				useBreakPoint: 0,
-				placement: 15,
-				breakPoint: 16,
-				elasticity: 17,
+				placement: 16,
+				breakPoint: 17,
+				elasticity: 18,
 				animation: 1,
-				props: 18,
-				closeEventName: 19,
-				closeEventValue: 20,
+				props: 19,
+				closeEventName: 20,
+				closeEventValue: 21,
 				layerId: 2
 			},
 			add_css$9

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

@@ -4,7 +4,7 @@ import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeU
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
-import 'svelte/easing';
+import { linear, elasticOut, cubicOut } from 'svelte/easing';
 
 /** @internal */
 const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
@@ -3362,8 +3362,56 @@ const execOnClickOperation = (onClickOperation) => {
         bootChat(...onClickOperation.args)();
     }
 };
+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.
+ * The function to activate svelte animation v2.
  *
  * @param node - A target node of animation. This argument is passed by svelte, by default.
  * @param customAnimationOptions - A custom animation option object
@@ -3372,10 +3420,24 @@ const execOnClickOperation = (onClickOperation) => {
  *
  * @internal
  */
-function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
-    {
+function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
+    if (disabled) {
         return {};
     }
+    let [x, y] = [0, 0];
+    for (const { query, x: tx, y: ty } of transforms) {
+        if (query == null || window.matchMedia(query).matches) {
+            x = tx;
+            y = ty;
+            break;
+        }
+    }
+    return {
+        delay,
+        duration,
+        easing: EASING[animationStyle],
+        css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
+    };
 }
 
 const getHref = (onClick) => {
@@ -6243,6 +6305,10 @@ function Modal($$anchor, $$props) {
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	const { brandKit } = useBrandKit();
 	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
+	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
+
+	console.log('isOnSite', isOnSite);
+
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
 	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6603,9 +6669,10 @@ function Modal($$anchor, $$props) {
 				$.derived_safe_equal
 			);
 
-			$.transition(1, div, () => customAnimation, () => ({
+			$.transition(1, div, () => customAnimationV2, () => ({
 				transforms: $.get(transforms),
-				animationStyle: animation()
+				animationStyle: animation(),
+				disabled: !isOnSite
 			}));
 
 			$.append($$anchor, div);

package/dist/svelte5/index.es.js

@@ -3467,7 +3467,7 @@ const EASING = {
     none: linear,
 };
 /**
- * The function to activate svelte animation.
+ * The function to activate svelte animation v2.
  *
  * @param node - A target node of animation. This argument is passed by svelte, by default.
  * @param customAnimationOptions - A custom animation option object
@@ -3476,7 +3476,10 @@ const EASING = {
  *
  * @internal
  */
-function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
+function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
+    if (disabled) {
+        return {};
+    }
     let [x, y] = [0, 0];
     for (const { query, x: tx, y: ty } of transforms) {
         if (query == null || window.matchMedia(query).matches) {
@@ -6358,6 +6361,10 @@ function Modal($$anchor, $$props) {
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	const { brandKit } = useBrandKit();
 	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
+	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
+
+	console.log('isOnSite', isOnSite);
+
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
 	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6718,9 +6725,10 @@ function Modal($$anchor, $$props) {
 				$.derived_safe_equal
 			);
 
-			$.transition(1, div, () => customAnimation, () => ({
+			$.transition(1, div, () => customAnimationV2, () => ({
 				transforms: $.get(transforms),
-				animationStyle: animation()
+				animationStyle: animation(),
+				disabled: !isOnSite
 			}));
 
 			$.append($$anchor, div);

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

@@ -3467,7 +3467,7 @@ const EASING = {
     none: linear,
 };
 /**
- * The function to activate svelte animation.
+ * The function to activate svelte animation v2.
  *
  * @param node - A target node of animation. This argument is passed by svelte, by default.
  * @param customAnimationOptions - A custom animation option object
@@ -3476,7 +3476,10 @@ const EASING = {
  *
  * @internal
  */
-function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
+function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
+    if (disabled) {
+        return {};
+    }
     let [x, y] = [0, 0];
     for (const { query, x: tx, y: ty } of transforms) {
         if (query == null || window.matchMedia(query).matches) {
@@ -6358,6 +6361,10 @@ function Modal($$anchor, $$props) {
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	const { brandKit } = useBrandKit();
 	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
+	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
+
+	console.log('isOnSite', isOnSite);
+
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
 	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6718,9 +6725,10 @@ function Modal($$anchor, $$props) {
 				$.derived_safe_equal
 			);
 
-			$.transition(1, div, () => customAnimation, () => ({
+			$.transition(1, div, () => customAnimationV2, () => ({
 				transforms: $.get(transforms),
-				animationStyle: animation()
+				animationStyle: animation(),
+				disabled: !isOnSite
 			}));
 
 			$.append($$anchor, div);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.266-29065938.e3ec46c6",
+  "version": "1.1.267-29071733.fabf64a6",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",