@plaidev/karte-action-sdk 1.1.255 → 1.1.256

package/dist/index.es.js

@@ -11418,11 +11418,19 @@ const useClickable = ({ eventValue = {}, eventName = '', onClick, element = 'div
 
 const useInjectCustomizeCss = (props) => {
     function injectCss() {
+        const modalElement = document.querySelector(`.${KARTE_MODAL_ROOT}`);
         const style = document.createElement('style');
         style.textContent = props.customizeCss;
-        document.head.appendChild(style);
+        if (modalElement?.shadowRoot) {
+            modalElement.shadowRoot.appendChild(style);
+        }
+        else {
+            document.head.appendChild(style);
+        }
         return () => {
-            document.head.removeChild(style);
+            modalElement?.shadowRoot
+                ? modalElement.shadowRoot.removeChild(style)
+                : document.head.removeChild(style);
         };
     }
     onMount$1(() => {
@@ -15012,10 +15020,10 @@ class CloseButton extends SvelteComponent {
 /* src/components-flex/image/Image.svelte generated by Svelte v3.53.1 */
 
 function add_css$7(target) {
-	append_styles(target, "svelte-1x7ex8r", ".image.svelte-1x7ex8r{max-width:100%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}.image-object.svelte-1x7ex8r{width:100%;overflow:hidden}.image-img.svelte-1x7ex8r{vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}");
+	append_styles(target, "svelte-1n4oa5l", ".image.svelte-1n4oa5l{max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}.image-object.svelte-1n4oa5l{width:100%;overflow:hidden}.image-img.svelte-1n4oa5l{vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}");
 }
 
-// (19:0) <svelte:element   {...attributes}   this={element}   class="image"   style={style}   data-layer-id={layerId}   on:click={handleClick} >
+// (19:0) <svelte:element   this={element}   {...attributes}   class="image"   {style}   data-layer-id={layerId}   on:click={handleClick} >
 function create_dynamic_element$2(ctx) {
 	let svelte_element;
 	let object;
@@ -15045,9 +15053,9 @@ function create_dynamic_element$2(ctx) {
 			img = element("img");
 			if (!src_url_equal(img.src, img_src_value = /*props*/ ctx[0].image)) attr(img, "src", img_src_value);
 			attr(img, "alt", img_alt_value = /*props*/ ctx[0].alt);
-			attr(img, "class", "image-img svelte-1x7ex8r");
+			attr(img, "class", "image-img svelte-1n4oa5l");
 			attr(object, "style", /*objectStyle*/ ctx[2]);
-			attr(object, "class", "image-object svelte-1x7ex8r");
+			attr(object, "class", "image-object svelte-1n4oa5l");
 
 			if ((/-/).test(/*element*/ ctx[5])) {
 				set_custom_element_data_map(svelte_element, svelte_element_data);
@@ -15055,7 +15063,7 @@ function create_dynamic_element$2(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-1x7ex8r", true);
+			toggle_class(svelte_element, "svelte-1n4oa5l", true);
 		},
 		m(target, anchor) {
 			insert(target, svelte_element, anchor);
@@ -15093,7 +15101,7 @@ function create_dynamic_element$2(ctx) {
 				set_attributes(svelte_element, svelte_element_data);
 			}
 
-			toggle_class(svelte_element, "svelte-1x7ex8r", true);
+			toggle_class(svelte_element, "svelte-1n4oa5l", true);
 		},
 		d(detaching) {
 			if (detaching) detach(svelte_element);
@@ -16474,19 +16482,19 @@ function add_css$1(target) {
 	append_styles(target, "svelte-15b58xm", "*{box-sizing:border-box}.modal.svelte-15b58xm{position:fixed;z-index:2147483647;display:flex}.modal.svelte-15b58xm > .button{flex:auto;display:flex}@media screen and (min-width: 641px){.modal-bp.svelte-15b58xm{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-15b58xm{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}}");
 }
 
-// (219:0) {:else}
+// (220:0) {:else}
 function create_else_block(ctx) {
 	let backgroundoverlay;
 	let current;
 
 	backgroundoverlay = new BackgroundOverlay({
 			props: {
-				backgroundOverlay: /*backgroundOverlay*/ ctx[3]
+				backgroundOverlay: /*backgroundOverlay*/ ctx[4]
 			}
 		});
 
 	backgroundoverlay.$on("click", function () {
-		if (is_function(/*backgroundClick*/ ctx[11])) /*backgroundClick*/ ctx[11].apply(this, arguments);
+		if (is_function(/*backgroundClick*/ ctx[12])) /*backgroundClick*/ ctx[12].apply(this, arguments);
 	});
 
 	return {
@@ -16500,7 +16508,7 @@ function create_else_block(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay_changes = {};
-			if (dirty & /*backgroundOverlay*/ 8) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[3];
+			if (dirty & /*backgroundOverlay*/ 16) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[4];
 			backgroundoverlay.$set(backgroundoverlay_changes);
 		},
 		i(local) {
@@ -16518,7 +16526,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (208:24) 
+// (209:24) 
 function create_if_block_2(ctx) {
 	let backgroundoverlay0;
 	let t;
@@ -16528,23 +16536,23 @@ function create_if_block_2(ctx) {
 	backgroundoverlay0 = new BackgroundOverlay({
 			props: {
 				class: "background-bp-pc",
-				backgroundOverlay: /*backgroundOverlayPC*/ ctx[4]
+				backgroundOverlay: /*backgroundOverlayPC*/ ctx[5]
 			}
 		});
 
 	backgroundoverlay0.$on("click", function () {
-		if (is_function(/*backgroundClickPC*/ ctx[10])) /*backgroundClickPC*/ ctx[10].apply(this, arguments);
+		if (is_function(/*backgroundClickPC*/ ctx[11])) /*backgroundClickPC*/ ctx[11].apply(this, arguments);
 	});
 
 	backgroundoverlay1 = new BackgroundOverlay({
 			props: {
 				class: "background-bp-sp ",
-				backgroundOverlay: /*backgroundOverlaySP*/ ctx[5]
+				backgroundOverlay: /*backgroundOverlaySP*/ ctx[6]
 			}
 		});
 
 	backgroundoverlay1.$on("click", function () {
-		if (is_function(/*backgroundClickSP*/ ctx[9])) /*backgroundClickSP*/ ctx[9].apply(this, arguments);
+		if (is_function(/*backgroundClickSP*/ ctx[10])) /*backgroundClickSP*/ ctx[10].apply(this, arguments);
 	});
 
 	return {
@@ -16562,10 +16570,10 @@ function create_if_block_2(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const backgroundoverlay0_changes = {};
-			if (dirty & /*backgroundOverlayPC*/ 16) backgroundoverlay0_changes.backgroundOverlay = /*backgroundOverlayPC*/ ctx[4];
+			if (dirty & /*backgroundOverlayPC*/ 32) backgroundoverlay0_changes.backgroundOverlay = /*backgroundOverlayPC*/ ctx[5];
 			backgroundoverlay0.$set(backgroundoverlay0_changes);
 			const backgroundoverlay1_changes = {};
-			if (dirty & /*backgroundOverlaySP*/ 32) backgroundoverlay1_changes.backgroundOverlay = /*backgroundOverlaySP*/ ctx[5];
+			if (dirty & /*backgroundOverlaySP*/ 64) backgroundoverlay1_changes.backgroundOverlay = /*backgroundOverlaySP*/ ctx[6];
 			backgroundoverlay1.$set(backgroundoverlay1_changes);
 		},
 		i(local) {
@@ -16587,7 +16595,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (206:0) {#if isPreview()}
+// (207:0) {#if isPreview()}
 function create_if_block_1(ctx) {
 	return {
 		c: noop,
@@ -16599,14 +16607,14 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (222:0) {#if visible}
+// (223:0) {#if visible}
 function create_if_block(ctx) {
 	let div;
 	let div_class_value;
 	let div_intro;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[23].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[22], null);
+	const default_slot_template = /*#slots*/ ctx[24].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[23], null);
 
 	return {
 		c() {
@@ -16615,7 +16623,8 @@ function create_if_block(ctx) {
 			attr(div, "class", div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[0] ? 'modal-bp' : ''].join(' ')) + " svelte-15b58xm"));
 			attr(div, "role", "dialog");
 			attr(div, "aria-modal", "true");
-			attr(div, "style", Array.from(/*modalStyles*/ ctx[12]).join(';'));
+			attr(div, "data-layer-id", /*layerId*/ ctx[2]);
+			attr(div, "style", Array.from(/*modalStyles*/ ctx[13]).join(';'));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -16624,22 +16633,22 @@ function create_if_block(ctx) {
 				default_slot.m(div, null);
 			}
 
-			/*div_binding*/ ctx[24](div);
+			/*div_binding*/ ctx[25](div);
 			current = true;
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 4194304)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 8388608)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[22],
+						/*$$scope*/ ctx[23],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[22])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[22], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[23])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[23], dirty, null),
 						null
 					);
 				}
@@ -16648,6 +16657,10 @@ function create_if_block(ctx) {
 			if (!current || dirty & /*useBreakPoint*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(['modal', /*useBreakPoint*/ ctx[0] ? 'modal-bp' : ''].join(' ')) + " svelte-15b58xm"))) {
 				attr(div, "class", div_class_value);
 			}
+
+			if (!current || dirty & /*layerId*/ 4) {
+				attr(div, "data-layer-id", /*layerId*/ ctx[2]);
+			}
 		},
 		i(local) {
 			if (current) return;
@@ -16656,7 +16669,7 @@ function create_if_block(ctx) {
 			if (!div_intro) {
 				add_render_callback(() => {
 					div_intro = create_in_transition(div, customAnimation, {
-						transforms: /*transforms*/ ctx[2],
+						transforms: /*transforms*/ ctx[3],
 						animationStyle: /*animation*/ ctx[1]
 					});
 
@@ -16673,7 +16686,7 @@ function create_if_block(ctx) {
 		d(detaching) {
 			if (detaching) detach(div);
 			if (default_slot) default_slot.d(detaching);
-			/*div_binding*/ ctx[24](null);
+			/*div_binding*/ ctx[25](null);
 		}
 	};
 }
@@ -16699,7 +16712,7 @@ function create_fragment$1(ctx) {
 
 	current_block_type_index = select_block_type(ctx);
 	if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-	let if_block1 = /*visible*/ ctx[7] && create_if_block(ctx);
+	let if_block1 = /*visible*/ ctx[8] && create_if_block(ctx);
 
 	return {
 		c() {
@@ -16717,7 +16730,7 @@ function create_fragment$1(ctx) {
 
 			if (!mounted) {
 				dispose = listen(window, "keydown", function () {
-					if (is_function(/*handle_keydown*/ ctx[8])) /*handle_keydown*/ ctx[8].apply(this, arguments);
+					if (is_function(/*handle_keydown*/ ctx[9])) /*handle_keydown*/ ctx[9].apply(this, arguments);
 				});
 
 				mounted = true;
@@ -16751,11 +16764,11 @@ function create_fragment$1(ctx) {
 				if_block0.m(t.parentNode, t);
 			}
 
-			if (/*visible*/ ctx[7]) {
+			if (/*visible*/ ctx[8]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 
-					if (dirty & /*visible*/ 128) {
+					if (dirty & /*visible*/ 256) {
 						transition_in(if_block1, 1);
 					}
 				} else {
@@ -16811,6 +16824,7 @@ function instance$1($$self, $$props, $$invalidate) {
 	let { animation = 'none' } = $$props;
 	let { closeEventName = '' } = $$props;
 	let { closeEventValue = null } = $$props;
+	let { layerId = '' } = $$props;
 
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
@@ -16829,7 +16843,7 @@ function instance$1($$self, $$props, $$invalidate) {
 	let modal;
 
 	onMount$1(() => {
-		$$invalidate(7, visible = true);
+		$$invalidate(8, visible = true);
 	});
 
 	onDestroy$1(() => setPreviousFocus());
@@ -16837,24 +16851,25 @@ function instance$1($$self, $$props, $$invalidate) {
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			modal = $$value;
-			$$invalidate(6, modal);
+			$$invalidate(7, modal);
 		});
 	}
 
 	$$self.$$set = $$props => {
 		if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
-		if ('placement' in $$props) $$invalidate(13, placement = $$props.placement);
-		if ('breakPoint' in $$props) $$invalidate(14, breakPoint = $$props.breakPoint);
-		if ('elasticity' in $$props) $$invalidate(15, elasticity = $$props.elasticity);
+		if ('placement' in $$props) $$invalidate(14, placement = $$props.placement);
+		if ('breakPoint' in $$props) $$invalidate(15, breakPoint = $$props.breakPoint);
+		if ('elasticity' in $$props) $$invalidate(16, elasticity = $$props.elasticity);
 		if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
-		if ('closeEventName' in $$props) $$invalidate(16, closeEventName = $$props.closeEventName);
-		if ('closeEventValue' in $$props) $$invalidate(17, closeEventValue = $$props.closeEventValue);
-		if ('$$scope' in $$props) $$invalidate(22, $$scope = $$props.$$scope);
+		if ('closeEventName' in $$props) $$invalidate(17, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(18, closeEventValue = $$props.closeEventValue);
+		if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
+		if ('$$scope' in $$props) $$invalidate(23, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 196608) {
-			$$invalidate(21, close = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 393216) {
+			$$invalidate(22, close = () => {
 				const onClose = { operation: 'closeApp', args: ['button'] };
 
 				if (closeEventName) {
@@ -16865,45 +16880,45 @@ function instance$1($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 24577) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
 			{
 				if (isExistBackgroundOverlayValue) {
-					$$invalidate(3, backgroundOverlay = placement.backgroundOverlay);
+					$$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
 				}
 
 				if (useBreakPoint) {
 					const pc = breakPoint?.PC?.placement?.backgroundOverlay;
-					$$invalidate(4, backgroundOverlayPC = pc ?? false);
+					$$invalidate(5, backgroundOverlayPC = pc ?? false);
 					const sp = breakPoint?.SP?.placement?.backgroundOverlay;
-					$$invalidate(5, backgroundOverlaySP = sp ?? false);
+					$$invalidate(6, backgroundOverlaySP = sp ?? false);
 				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 24577) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
 			{
 				if (placement && placement.backgroundClick) {
-					$$invalidate(18, backgroundClickFunction = placement.backgroundClick);
+					$$invalidate(19, backgroundClickFunction = placement.backgroundClick);
 				}
 
 				if (useBreakPoint) {
 					const pc = breakPoint?.PC?.placement?.backgroundClick;
 
 					if (pc) {
-						$$invalidate(19, backgroundClickFunctionPC = pc);
+						$$invalidate(20, backgroundClickFunctionPC = pc);
 					}
 
 					const sp = breakPoint?.SP?.placement?.backgroundClick;
 
 					if (sp) {
-						$$invalidate(20, backgroundClickFunctionSP = sp);
+						$$invalidate(21, backgroundClickFunctionSP = sp);
 					}
 				}
 			}
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 458752) {
-			$$invalidate(11, backgroundClick = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 917504) {
+			$$invalidate(12, backgroundClick = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -16912,8 +16927,8 @@ function instance$1($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 720896) {
-			$$invalidate(10, backgroundClickPC = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 1441792) {
+			$$invalidate(11, backgroundClickPC = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -16922,8 +16937,8 @@ function instance$1($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 1245184) {
-			$$invalidate(9, backgroundClickSP = () => {
+		if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 2490368) {
+			$$invalidate(10, backgroundClickSP = () => {
 				if (closeEventName) {
 					send_event(closeEventName, closeEventValue);
 				}
@@ -16932,7 +16947,7 @@ function instance$1($$self, $$props, $$invalidate) {
 			});
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 24581) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 49161) {
 			// 表示位置のスタイルとアニメーションの動きを設定
 			{
 				// 表示位置のスタイルの設定
@@ -16948,7 +16963,7 @@ function instance$1($$self, $$props, $$invalidate) {
 					modalStyles.add(positionStyle);
 				}
 
-				$$invalidate(2, transforms = []);
+				$$invalidate(3, transforms = []);
 
 				DEVICE_IDS.forEach(deviceId => {
 					if (useBreakPoint) {
@@ -16976,7 +16991,7 @@ function instance$1($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 24577) {
+		if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
 			// 表示位置の調整のスタイルを設定
 			{
 				let margin = DefaultModalPlacement.margin;
@@ -17008,7 +17023,7 @@ function instance$1($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*elasticity, useBreakPoint, breakPoint*/ 49153) {
+		if ($$self.$$.dirty & /*elasticity, useBreakPoint, breakPoint*/ 98305) {
 			// 拡大方法のスタイルを設定
 			{
 				let elasticStyle = ElasticityStyle[elasticity];
@@ -17034,19 +17049,20 @@ function instance$1($$self, $$props, $$invalidate) {
 			}
 		}
 
-		if ($$self.$$.dirty & /*close*/ 2097152) {
-			$$invalidate(8, handle_keydown = handleKeydown({ Escape: close }));
+		if ($$self.$$.dirty & /*close*/ 4194304) {
+			$$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
 		}
 	};
 
-	$$invalidate(6, modal = null);
+	$$invalidate(7, modal = null);
 
 	// svelteコンポーネントのアニメーションを発火させるためにマウント時にvisibleをtrueにする。
-	$$invalidate(7, visible = false);
+	$$invalidate(8, visible = false);
 
 	return [
 		useBreakPoint,
 		animation,
+		layerId,
 		transforms,
 		backgroundOverlay,
 		backgroundOverlayPC,
@@ -17085,12 +17101,13 @@ class Modal extends SvelteComponent {
 			safe_not_equal,
 			{
 				useBreakPoint: 0,
-				placement: 13,
-				breakPoint: 14,
-				elasticity: 15,
+				placement: 14,
+				breakPoint: 15,
+				elasticity: 16,
 				animation: 1,
-				closeEventName: 16,
-				closeEventValue: 17
+				closeEventName: 17,
+				closeEventValue: 18,
+				layerId: 2
 			},
 			add_css$1
 		);