@plaidev/karte-action-sdk 1.1.226-28565789.7d347a9b → 1.1.226-28567498.f94b4f1a

package/dist/hydrate/index.es.js

@@ -59,16 +59,16 @@ const POSITION_STYLES = {
     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],
+    'top-center': { x: 50, y: 0 },
+    'top-left': { x: 0, y: 0 },
+    'top-right': { x: 0, y: 0 },
+    'center-left': { x: 0, y: -50 },
+    center: { x: -50, y: -50 },
+    'center-right': { x: 0, y: -50 },
+    'bottom-left': { x: 0, y: 0 },
+    'bottom-center': { x: -50, y: 0 },
+    'bottom-right': { x: 0, y: 0 },
+    none: { x: 0, y: 0 },
 };
 /** @internal */
 const getPositionStyle = (position) => {
@@ -3290,7 +3290,7 @@ const haveFunction = (onClickOperation) => {
  *
  * @internal
  */
-function customAnimation(node, { transform, animationStyle, delay = 0, duration = 1000 }) {
+function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
     {
         return {};
     }
@@ -3954,14 +3954,14 @@ function add_css$s(target) {
 	append_styles(target, "svelte-1ijkyzl", ".modal.svelte-1ijkyzl{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-1ijkyzl > .button{flex:auto;display:flex}.close.svelte-1ijkyzl{position:absolute;top:0;right:0}.close.svelte-1ijkyzl > .button{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-1ijkyzl > .button:hover{transform:rotate(90deg)}.modal-content.svelte-1ijkyzl{flex:auto;display:flex;justify-content:center;align-items:center;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}@media screen and (min-width: 641px){.modal-bp.svelte-1ijkyzl{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-1ijkyzl{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}}");
 }
 
-// (275:0) {:else}
+// (277:0) {:else}
 function create_else_block$3(ctx) {
 	let backgroundoverlay;
 	let current;
 
 	backgroundoverlay = new BackgroundOverlay({
 			props: {
-				backgroundOverlay: /*backgroundOverlay*/ ctx[11]
+				backgroundOverlay: /*backgroundOverlay*/ ctx[12]
 			}
 		});
 
@@ -3983,7 +3983,7 @@ function create_else_block$3(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay_changes = {};
-			if (dirty[0] & /*backgroundOverlay*/ 2048) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[11];
+			if (dirty[0] & /*backgroundOverlay*/ 4096) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[12];
 			backgroundoverlay.$set(backgroundoverlay_changes);
 		},
 		i(local) {
@@ -4001,7 +4001,7 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (264:24) 
+// (266:24) 
 function create_if_block_3(ctx) {
 	let backgroundoverlay0;
 	let t;
@@ -4011,7 +4011,7 @@ function create_if_block_3(ctx) {
 	backgroundoverlay0 = new BackgroundOverlay({
 			props: {
 				class: "background-bp-pc",
-				backgroundOverlay: /*backgroundOverlayPC*/ ctx[12]
+				backgroundOverlay: /*backgroundOverlayPC*/ ctx[13]
 			}
 		});
 
@@ -4022,7 +4022,7 @@ function create_if_block_3(ctx) {
 	backgroundoverlay1 = new BackgroundOverlay({
 			props: {
 				class: "background-bp-sp ",
-				backgroundOverlay: /*backgroundOverlaySP*/ ctx[13]
+				backgroundOverlay: /*backgroundOverlaySP*/ ctx[14]
 			}
 		});
 
@@ -4050,10 +4050,10 @@ function create_if_block_3(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay0_changes = {};
-			if (dirty[0] & /*backgroundOverlayPC*/ 4096) backgroundoverlay0_changes.backgroundOverlay = /*backgroundOverlayPC*/ ctx[12];
+			if (dirty[0] & /*backgroundOverlayPC*/ 8192) backgroundoverlay0_changes.backgroundOverlay = /*backgroundOverlayPC*/ ctx[13];
 			backgroundoverlay0.$set(backgroundoverlay0_changes);
 			const backgroundoverlay1_changes = {};
-			if (dirty[0] & /*backgroundOverlaySP*/ 8192) backgroundoverlay1_changes.backgroundOverlay = /*backgroundOverlaySP*/ ctx[13];
+			if (dirty[0] & /*backgroundOverlaySP*/ 16384) backgroundoverlay1_changes.backgroundOverlay = /*backgroundOverlaySP*/ ctx[14];
 			backgroundoverlay1.$set(backgroundoverlay1_changes);
 		},
 		i(local) {
@@ -4075,7 +4075,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (262:0) {#if isPreview()}
+// (264:0) {#if isPreview()}
 function create_if_block_2(ctx) {
 	return {
 		c: noop,
@@ -4088,7 +4088,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (278:0) {#if visible}
+// (280:0) {#if visible}
 function create_if_block$5(ctx) {
 	let div;
 	let button;
@@ -4161,7 +4161,7 @@ function create_if_block$5(ctx) {
 			if (!div_intro) {
 				add_render_callback(() => {
 					div_intro = create_in_transition(div, customAnimation, {
-						transform: /*transform*/ ctx[14],
+						transforms: /*transforms*/ ctx[11],
 						animationStyle: /*animation*/ ctx[4]
 					});
 
@@ -4183,7 +4183,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (291:6) {#if closable}
+// (293:6) {#if closable}
 function create_if_block_1$1(ctx) {
 	let div;
 	let button;
@@ -4255,7 +4255,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (293:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
+// (295:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
 function create_default_slot_1$1(ctx) {
 	let svg;
 	let path;
@@ -4312,7 +4312,7 @@ function create_default_slot_1$1(ctx) {
 	};
 }
 
-// (290:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
+// (292:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
 function create_default_slot$6(ctx) {
 	let t;
 	let div;
@@ -4578,7 +4578,7 @@ function instance$v($$self, $$props, $$invalidate) {
 	let backgroundClickFunctionPC = DefaultModalPlacement.backgroundClick;
 	let backgroundClickFunctionSP = DefaultModalPlacement.backgroundClick;
 	let modalStyles = new Set([]);
-	let transform = getTransform('center');
+	let transforms = [{ query: null, ...getTransform('center') }];
 	let modal;
 
 	onMount$1(() => {
@@ -4632,9 +4632,9 @@ function instance$v($$self, $$props, $$invalidate) {
 
 				if (useBreakPoint) {
 					const pc = breakPoint?.PC?.placement?.backgroundOverlay;
-					$$invalidate(12, backgroundOverlayPC = pc ?? false);
+					$$invalidate(13, backgroundOverlayPC = pc ?? false);
 					const sp = breakPoint?.SP?.placement?.backgroundOverlay;
-					$$invalidate(13, backgroundOverlaySP = sp ?? false);
+					$$invalidate(14, backgroundOverlaySP = sp ?? false);
 				}
 			}
 		}
@@ -4691,7 +4691,7 @@ function instance$v($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 50331656) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint, transforms*/ 50333704) {
 			// 表示位置のスタイルとアニメーションの動きを設定
 			{
 				// 表示位置のスタイルの設定
@@ -4703,6 +4703,8 @@ function instance$v($$self, $$props, $$invalidate) {
 					modalStyles.add(positionStyle);
 				}
 
+				$$invalidate(11, transforms = []);
+
 				DEVICE_IDS.forEach(deviceId => {
 
 					const positionVariables = stringifyStyleObj(formatObjectKey({
@@ -4715,7 +4717,7 @@ function instance$v($$self, $$props, $$invalidate) {
 				});
 
 				// アニメーションの動きの設定
-				$$invalidate(14, transform = getTransform(position));
+				transforms.push({ query: null, ...getTransform(position) });
 			}
 		}
 
@@ -4787,10 +4789,10 @@ function instance$v($$self, $$props, $$invalidate) {
 		closeEventValue,
 		closeButtonColor,
 		_closeStyle,
+		transforms,
 		backgroundOverlay,
 		backgroundOverlayPC,
 		backgroundOverlaySP,
-		transform,
 		modal,
 		visible,
 		handle_keydown,

package/dist/index.es.js

@@ -17,6 +17,11 @@ const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
 const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
 /** @internal */
 const DEVICE_IDS = ['PC', 'SP'];
+/** @internal */
+const DEVICE_QUERIES = {
+    PC: 'screen and (min-width: 641px)',
+    SP: 'screen and (max-width: 640px)',
+};
 // -------- The following codes are deprecated --------
 /**
  * 非推奨
@@ -59,16 +64,16 @@ const POSITION_STYLES = {
     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],
+    'top-center': { x: 50, y: 0 },
+    'top-left': { x: 0, y: 0 },
+    'top-right': { x: 0, y: 0 },
+    'center-left': { x: 0, y: -50 },
+    center: { x: -50, y: -50 },
+    'center-right': { x: 0, y: -50 },
+    'bottom-left': { x: 0, y: 0 },
+    'bottom-center': { x: -50, y: 0 },
+    'bottom-right': { x: 0, y: 0 },
+    none: { x: 0, y: 0 },
 };
 /** @internal */
 const getPositionStyle = (position) => {
@@ -3362,8 +3367,15 @@ const EASING = {
  *
  * @internal
  */
-function customAnimation(node, { transform, animationStyle, delay = 0, duration = 1000 }) {
-    const [x, y] = transform;
+function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
+    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,
@@ -3968,14 +3980,14 @@ function add_css$s(target) {
 	append_styles(target, "svelte-1ijkyzl", ".modal.svelte-1ijkyzl{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-1ijkyzl > .button{flex:auto;display:flex}.close.svelte-1ijkyzl{position:absolute;top:0;right:0}.close.svelte-1ijkyzl > .button{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-1ijkyzl > .button:hover{transform:rotate(90deg)}.modal-content.svelte-1ijkyzl{flex:auto;display:flex;justify-content:center;align-items:center;border-width:0px;border-style:solid;border-color:#000000;overflow:hidden}@media screen and (min-width: 641px){.modal-bp.svelte-1ijkyzl{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-1ijkyzl{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}}");
 }
 
-// (275:0) {:else}
+// (277:0) {:else}
 function create_else_block$3(ctx) {
 	let backgroundoverlay;
 	let current;
 
 	backgroundoverlay = new BackgroundOverlay({
 			props: {
-				backgroundOverlay: /*backgroundOverlay*/ ctx[11]
+				backgroundOverlay: /*backgroundOverlay*/ ctx[12]
 			}
 		});
 
@@ -3994,7 +4006,7 @@ function create_else_block$3(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay_changes = {};
-			if (dirty[0] & /*backgroundOverlay*/ 2048) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[11];
+			if (dirty[0] & /*backgroundOverlay*/ 4096) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[12];
 			backgroundoverlay.$set(backgroundoverlay_changes);
 		},
 		i(local) {
@@ -4012,7 +4024,7 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (264:24) 
+// (266:24) 
 function create_if_block_3(ctx) {
 	let backgroundoverlay0;
 	let t;
@@ -4022,7 +4034,7 @@ function create_if_block_3(ctx) {
 	backgroundoverlay0 = new BackgroundOverlay({
 			props: {
 				class: "background-bp-pc",
-				backgroundOverlay: /*backgroundOverlayPC*/ ctx[12]
+				backgroundOverlay: /*backgroundOverlayPC*/ ctx[13]
 			}
 		});
 
@@ -4033,7 +4045,7 @@ function create_if_block_3(ctx) {
 	backgroundoverlay1 = new BackgroundOverlay({
 			props: {
 				class: "background-bp-sp ",
-				backgroundOverlay: /*backgroundOverlaySP*/ ctx[13]
+				backgroundOverlay: /*backgroundOverlaySP*/ ctx[14]
 			}
 		});
 
@@ -4056,10 +4068,10 @@ function create_if_block_3(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay0_changes = {};
-			if (dirty[0] & /*backgroundOverlayPC*/ 4096) backgroundoverlay0_changes.backgroundOverlay = /*backgroundOverlayPC*/ ctx[12];
+			if (dirty[0] & /*backgroundOverlayPC*/ 8192) backgroundoverlay0_changes.backgroundOverlay = /*backgroundOverlayPC*/ ctx[13];
 			backgroundoverlay0.$set(backgroundoverlay0_changes);
 			const backgroundoverlay1_changes = {};
-			if (dirty[0] & /*backgroundOverlaySP*/ 8192) backgroundoverlay1_changes.backgroundOverlay = /*backgroundOverlaySP*/ ctx[13];
+			if (dirty[0] & /*backgroundOverlaySP*/ 16384) backgroundoverlay1_changes.backgroundOverlay = /*backgroundOverlaySP*/ ctx[14];
 			backgroundoverlay1.$set(backgroundoverlay1_changes);
 		},
 		i(local) {
@@ -4081,7 +4093,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (262:0) {#if isPreview()}
+// (264:0) {#if isPreview()}
 function create_if_block_2(ctx) {
 	return {
 		c: noop,
@@ -4093,7 +4105,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (278:0) {#if visible}
+// (280:0) {#if visible}
 function create_if_block$5(ctx) {
 	let div;
 	let button;
@@ -4150,7 +4162,7 @@ function create_if_block$5(ctx) {
 			if (!div_intro) {
 				add_render_callback(() => {
 					div_intro = create_in_transition(div, customAnimation, {
-						transform: /*transform*/ ctx[14],
+						transforms: /*transforms*/ ctx[11],
 						animationStyle: /*animation*/ ctx[4]
 					});
 
@@ -4172,7 +4184,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (291:6) {#if closable}
+// (293:6) {#if closable}
 function create_if_block_1$1(ctx) {
 	let div;
 	let button;
@@ -4234,7 +4246,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (293:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
+// (295:10) <Button             onClick={onClose}             style={_closeStyle}             eventName={closeEventName}             eventValue={closeEventValue}           >
 function create_default_slot_1$1(ctx) {
 	let svg;
 	let path;
@@ -4267,7 +4279,7 @@ function create_default_slot_1$1(ctx) {
 	};
 }
 
-// (290:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
+// (292:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
 function create_default_slot$6(ctx) {
 	let t;
 	let div;
@@ -4515,7 +4527,7 @@ function instance$v($$self, $$props, $$invalidate) {
 	let backgroundClickFunctionPC = DefaultModalPlacement.backgroundClick;
 	let backgroundClickFunctionSP = DefaultModalPlacement.backgroundClick;
 	let modalStyles = new Set([]);
-	let transform = getTransform('center');
+	let transforms = [{ query: null, ...getTransform('center') }];
 	let modal;
 
 	onMount$1(() => {
@@ -4567,14 +4579,14 @@ function instance$v($$self, $$props, $$invalidate) {
 		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 50331656) {
 			{
 				if (placement && placement.backgroundOverlay) {
-					$$invalidate(11, backgroundOverlay = placement.backgroundOverlay);
+					$$invalidate(12, backgroundOverlay = placement.backgroundOverlay);
 				}
 
 				if (useBreakPoint) {
 					const pc = breakPoint?.PC?.placement?.backgroundOverlay;
-					$$invalidate(12, backgroundOverlayPC = pc ?? false);
+					$$invalidate(13, backgroundOverlayPC = pc ?? false);
 					const sp = breakPoint?.SP?.placement?.backgroundOverlay;
-					$$invalidate(13, backgroundOverlaySP = sp ?? false);
+					$$invalidate(14, backgroundOverlaySP = sp ?? false);
 				}
 			}
 		}
@@ -4631,7 +4643,7 @@ function instance$v($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint*/ 50331656) {
+		if ($$self.$$.dirty[0] & /*placement, useBreakPoint, breakPoint, transforms*/ 50333704) {
 			// 表示位置のスタイルとアニメーションの動きを設定
 			{
 				// 表示位置のスタイルの設定
@@ -4647,9 +4659,17 @@ function instance$v($$self, $$props, $$invalidate) {
 					modalStyles.add(positionStyle);
 				}
 
+				$$invalidate(11, transforms = []);
+
 				DEVICE_IDS.forEach(deviceId => {
 					if (useBreakPoint) {
 						const positionWithBp = breakPoint[deviceId]?.placement?.position;
+
+						transforms.push({
+							query: DEVICE_QUERIES[deviceId],
+							...getTransform(positionWithBp)
+						});
+
 						positionStyle = getPositionStyle(positionWithBp);
 					}
 
@@ -4663,7 +4683,7 @@ function instance$v($$self, $$props, $$invalidate) {
 				});
 
 				// アニメーションの動きの設定
-				$$invalidate(14, transform = getTransform(position));
+				transforms.push({ query: null, ...getTransform(position) });
 			}
 		}
 
@@ -4747,10 +4767,10 @@ function instance$v($$self, $$props, $$invalidate) {
 		closeEventValue,
 		closeButtonColor,
 		_closeStyle,
+		transforms,
 		backgroundOverlay,
 		backgroundOverlayPC,
 		backgroundOverlaySP,
-		transform,
 		modal,
 		visible,
 		handle_keydown,

package/package.json

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