@plaidev/karte-action-sdk 1.0.34 → 1.0.37

package/dist/index.es.d.ts

@@ -165,12 +165,12 @@ type ModalMargin = {
     top?: string;
     bottom?: string;
 };
-type ModalPlacement = {
+type ModalPlacement<M = ModalMargin> = {
     position?: ModalPosition;
-    margin?: ModalMargin;
+    margin?: M;
     backgroundOverlay?: boolean;
 };
-declare const DefaultModalPlacement: ModalPlacement;
+declare const DefaultModalPlacement: Required<ModalPlacement<Required<ModalMargin>>>;
 type LongText = string;
 type Url = string;
 type Image = string;

package/dist/index.es.js

@@ -873,7 +873,7 @@ function add_css$6(target) {
 	append_styles(target, "svelte-1bxl6mz", ".modal.svelte-1bxl6mz{position:fixed;box-sizing:border-box;z-index:2147483647}.close.svelte-1bxl6mz{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-1bxl6mz:hover{transform:rotate(90deg)}");
 }
 
-// (84:4) {#if closable}
+// (116:4) {#if closable}
 function create_if_block(ctx) {
 	let button;
 	let svg;
@@ -904,7 +904,7 @@ function create_if_block(ctx) {
 			append(svg, path);
 
 			if (!mounted) {
-				dispose = listen(button, "click", /*close*/ ctx[10]);
+				dispose = listen(button, "click", /*close*/ ctx[11]);
 				mounted = true;
 			}
 		},
@@ -925,15 +925,17 @@ function create_if_block(ctx) {
 	};
 }
 
-// (72:0) <Animation {animation}>
+// (103:0) <Animation {animation}>
 function create_default_slot$1(ctx) {
 	let div;
 	let t;
 	let div_style_value;
 	let current;
+	let mounted;
+	let dispose;
 	let if_block = /*closable*/ ctx[2] && create_if_block(ctx);
-	const default_slot_template = /*#slots*/ ctx[17].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[19], null);
+	const default_slot_template = /*#slots*/ ctx[20].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[22], null);
 
 	return {
 		c() {
@@ -955,8 +957,13 @@ function create_default_slot$1(ctx) {
 				default_slot.m(div, null);
 			}
 
-			/*div_binding*/ ctx[18](div);
+			/*div_binding*/ ctx[21](div);
 			current = true;
+
+			if (!mounted) {
+				dispose = listen(div, "click", /*click*/ ctx[10]);
+				mounted = true;
+			}
 		},
 		p(ctx, dirty) {
 			if (/*closable*/ ctx[2]) {
@@ -973,15 +980,15 @@ function create_default_slot$1(ctx) {
 			}
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 524288)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 4194304)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[19],
+						/*$$scope*/ ctx[22],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[19])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[19], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[22])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[22], dirty, null),
 						null
 					);
 				}
@@ -1004,7 +1011,9 @@ function create_default_slot$1(ctx) {
 			if (detaching) detach(div);
 			if (if_block) if_block.d();
 			if (default_slot) default_slot.d(detaching);
-			/*div_binding*/ ctx[18](null);
+			/*div_binding*/ ctx[21](null);
+			mounted = false;
+			dispose();
 		}
 	};
 }
@@ -1023,7 +1032,7 @@ function create_fragment$8(ctx) {
 			}
 		});
 
-	backgroundoverray.$on("click", /*close*/ ctx[10]);
+	backgroundoverray.$on("click", /*close*/ ctx[11]);
 
 	animation_1 = new Animation({
 			props: {
@@ -1046,7 +1055,7 @@ function create_fragment$8(ctx) {
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(window, "keydown", /*handle_keydown*/ ctx[11]);
+				dispose = listen(window, "keydown", /*handle_keydown*/ ctx[12]);
 				mounted = true;
 			}
 		},
@@ -1057,7 +1066,7 @@ function create_fragment$8(ctx) {
 			const animation_1_changes = {};
 			if (dirty & /*animation*/ 1) animation_1_changes.animation = /*animation*/ ctx[0];
 
-			if (dirty & /*$$scope, pos, marginStyle, _style, modal, $maximumZindex, _closeStyle, closeButtonColor, closable*/ 525054) {
+			if (dirty & /*$$scope, pos, marginStyle, _style, modal, $maximumZindex, _closeStyle, closeButtonColor, closable*/ 4195070) {
 				animation_1_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1093,28 +1102,40 @@ function instance$8($$self, $$props, $$invalidate) {
 	let $maximumZindex;
 	component_subscribe($$self, maximumZindex, $$value => $$invalidate(9, $maximumZindex = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
+	const dispatchClick = createEventDispatcher();
+
+	const click = () => {
+		if (clickEventName) {
+			send_event(clickEventName, clickEventValue);
+		}
+
+		dispatchClick('click');
+	};
+
+	let { clickEventName = '' } = $$props;
+	let { clickEventValue = null } = $$props;
 	let { placement = DefaultModalPlacement } = $$props;
 	let { animation = 'none' } = $$props;
 	let { _style = '' } = $$props;
 	let { closable = true } = $$props;
-	let { closeButtonColor = '#000000' } = $$props;
-	let { eventName = '' } = $$props;
-	let { eventValue = null } = $$props;
-	let { _closeStyle = '' } = $$props;
 
 	/**
- * {"title": {"ja": "閉じるボタン", "en": "Close Button"}}
+ * {"title": {"ja": "イベントタイプ", "en": "Event Type"}, "folder": {"ja": "閉じるボタン", "en": "Close Button"}}
  */
-	const dispatch = createEventDispatcher();
+	const dispatchClose = createEventDispatcher();
 
 	const close = () => {
-		if (eventName) {
-			send_event(eventName, eventValue);
+		if (closeEventName) {
+			send_event(closeEventName, closeEventValue);
 		}
 
-		dispatch('close');
+		dispatchClose('close');
 	};
 
+	let { closeButtonColor = '#000000' } = $$props;
+	let { closeEventName = '' } = $$props;
+	let { closeEventValue = null } = $$props;
+	let { _closeStyle = '' } = $$props;
 	let modal = null;
 	const handle_keydown = handleKeydown({ Escape: close, Tab: handleFocus(modal) });
 	onDestroy(() => setPreviousFocus());
@@ -1127,34 +1148,36 @@ function instance$8($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('placement' in $$props) $$invalidate(12, placement = $$props.placement);
+		if ('clickEventName' in $$props) $$invalidate(13, clickEventName = $$props.clickEventName);
+		if ('clickEventValue' in $$props) $$invalidate(14, clickEventValue = $$props.clickEventValue);
+		if ('placement' in $$props) $$invalidate(15, placement = $$props.placement);
 		if ('animation' in $$props) $$invalidate(0, animation = $$props.animation);
 		if ('_style' in $$props) $$invalidate(1, _style = $$props._style);
 		if ('closable' in $$props) $$invalidate(2, closable = $$props.closable);
 		if ('closeButtonColor' in $$props) $$invalidate(3, closeButtonColor = $$props.closeButtonColor);
-		if ('eventName' in $$props) $$invalidate(13, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(14, eventValue = $$props.eventValue);
+		if ('closeEventName' in $$props) $$invalidate(16, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(17, closeEventValue = $$props.closeEventValue);
 		if ('_closeStyle' in $$props) $$invalidate(4, _closeStyle = $$props._closeStyle);
-		if ('$$scope' in $$props) $$invalidate(19, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(22, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*placement*/ 4096) {
+		if ($$self.$$.dirty & /*placement*/ 32768) {
 			$$invalidate(8, backgroundOverray = placement && placement.backgroundOverlay != null
 			? placement.backgroundOverlay
 			: DefaultModalPlacement.backgroundOverlay);
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 4096) {
-			$$invalidate(16, overwritePosition = isPreview()
+		if ($$self.$$.dirty & /*placement*/ 32768) {
+			$$invalidate(19, overwritePosition = isPreview()
 			? 'center'
 			: placement && placement.position != null
 				? placement.position
 				: DefaultModalPlacement.position);
 		}
 
-		if ($$self.$$.dirty & /*placement*/ 4096) {
-			$$invalidate(15, overwriteMargin = isPreview()
+		if ($$self.$$.dirty & /*placement*/ 32768) {
+			$$invalidate(18, overwriteMargin = isPreview()
 			? {
 					left: '0px',
 					right: '0px',
@@ -1166,11 +1189,11 @@ function instance$8($$self, $$props, $$invalidate) {
 				: DefaultModalPlacement.margin);
 		}
 
-		if ($$self.$$.dirty & /*overwritePosition*/ 65536) {
+		if ($$self.$$.dirty & /*overwritePosition*/ 524288) {
 			$$invalidate(7, pos = getPositionStyle(overwritePosition));
 		}
 
-		if ($$self.$$.dirty & /*overwriteMargin*/ 32768) {
+		if ($$self.$$.dirty & /*overwriteMargin*/ 262144) {
 			$$invalidate(6, marginStyle = getMarginStyle(overwriteMargin));
 		}
 	};
@@ -1186,11 +1209,14 @@ function instance$8($$self, $$props, $$invalidate) {
 		pos,
 		backgroundOverray,
 		$maximumZindex,
+		click,
 		close,
 		handle_keydown,
+		clickEventName,
+		clickEventValue,
 		placement,
-		eventName,
-		eventValue,
+		closeEventName,
+		closeEventValue,
 		overwriteMargin,
 		overwritePosition,
 		slots,
@@ -1210,13 +1236,15 @@ class Modal extends SvelteComponent {
 			create_fragment$8,
 			safe_not_equal,
 			{
-				placement: 12,
+				clickEventName: 13,
+				clickEventValue: 14,
+				placement: 15,
 				animation: 0,
 				_style: 1,
 				closable: 2,
 				closeButtonColor: 3,
-				eventName: 13,
-				eventValue: 14,
+				closeEventName: 16,
+				closeEventValue: 17,
 				_closeStyle: 4
 			},
 			add_css$6
@@ -1344,8 +1372,8 @@ class Grid extends SvelteComponent {
 
 function create_default_slot_2(ctx) {
 	let current;
-	const default_slot_template = /*#slots*/ ctx[16].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[17], null);
+	const default_slot_template = /*#slots*/ ctx[19].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[20], null);
 
 	return {
 		c() {
@@ -1360,15 +1388,15 @@ function create_default_slot_2(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 131072)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 1048576)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[17],
+						/*$$scope*/ ctx[20],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[17])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[17], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[20], dirty, null),
 						null
 					);
 				}
@@ -1389,19 +1417,19 @@ function create_default_slot_2(ctx) {
 	};
 }
 
-// (85:2) <Modal     {eventName}     {eventValue}     {closable}     {closeButtonColor}     {_closeStyle}     _style={_modalStyle}     on:close={close}   >
+// (115:2) <Modal     {placement}     {animation}     {closable}     {closeButtonColor}     {_closeStyle}     _style={_modalStyle}     {clickEventName}     {clickEventValue}     on:click={click}     {closeEventName}     {closeEventValue}     on:close={close}   >
 function create_default_slot_1(ctx) {
 	let grid;
 	let current;
 
 	grid = new Grid({
 			props: {
-				width: /*width*/ ctx[7],
-				height: /*height*/ ctx[8],
-				rows: /*rows*/ ctx[9],
-				columns: /*columns*/ ctx[10],
-				gap: /*gap*/ ctx[11],
-				background: /*background*/ ctx[12],
+				width: /*width*/ ctx[11],
+				height: /*height*/ ctx[12],
+				rows: /*rows*/ ctx[13],
+				columns: /*columns*/ ctx[14],
+				gap: /*gap*/ ctx[15],
+				background: /*background*/ ctx[16],
 				$$slots: { default: [create_default_slot_2] },
 				$$scope: { ctx }
 			}
@@ -1417,14 +1445,14 @@ function create_default_slot_1(ctx) {
 		},
 		p(ctx, dirty) {
 			const grid_changes = {};
-			if (dirty & /*width*/ 128) grid_changes.width = /*width*/ ctx[7];
-			if (dirty & /*height*/ 256) grid_changes.height = /*height*/ ctx[8];
-			if (dirty & /*rows*/ 512) grid_changes.rows = /*rows*/ ctx[9];
-			if (dirty & /*columns*/ 1024) grid_changes.columns = /*columns*/ ctx[10];
-			if (dirty & /*gap*/ 2048) grid_changes.gap = /*gap*/ ctx[11];
-			if (dirty & /*background*/ 4096) grid_changes.background = /*background*/ ctx[12];
-
-			if (dirty & /*$$scope*/ 131072) {
+			if (dirty & /*width*/ 2048) grid_changes.width = /*width*/ ctx[11];
+			if (dirty & /*height*/ 4096) grid_changes.height = /*height*/ ctx[12];
+			if (dirty & /*rows*/ 8192) grid_changes.rows = /*rows*/ ctx[13];
+			if (dirty & /*columns*/ 16384) grid_changes.columns = /*columns*/ ctx[14];
+			if (dirty & /*gap*/ 32768) grid_changes.gap = /*gap*/ ctx[15];
+			if (dirty & /*background*/ 65536) grid_changes.background = /*background*/ ctx[16];
+
+			if (dirty & /*$$scope*/ 1048576) {
 				grid_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1445,25 +1473,30 @@ function create_default_slot_1(ctx) {
 	};
 }
 
-// (84:0) <StateItem {path}>
+// (114:0) <StateItem {path}>
 function create_default_slot(ctx) {
 	let modal;
 	let current;
 
 	modal = new Modal({
 			props: {
-				eventName: /*eventName*/ ctx[4],
-				eventValue: /*eventValue*/ ctx[5],
-				closable: /*closable*/ ctx[2],
-				closeButtonColor: /*closeButtonColor*/ ctx[3],
-				_closeStyle: /*_closeStyle*/ ctx[6],
-				_style: /*_modalStyle*/ ctx[1],
+				placement: /*placement*/ ctx[3],
+				animation: /*animation*/ ctx[4],
+				closable: /*closable*/ ctx[6],
+				closeButtonColor: /*closeButtonColor*/ ctx[7],
+				_closeStyle: /*_closeStyle*/ ctx[10],
+				_style: /*_modalStyle*/ ctx[5],
+				clickEventName: /*clickEventName*/ ctx[1],
+				clickEventValue: /*clickEventValue*/ ctx[2],
+				closeEventName: /*closeEventName*/ ctx[8],
+				closeEventValue: /*closeEventValue*/ ctx[9],
 				$$slots: { default: [create_default_slot_1] },
 				$$scope: { ctx }
 			}
 		});
 
-	modal.$on("close", /*close*/ ctx[13]);
+	modal.$on("click", /*click*/ ctx[17]);
+	modal.$on("close", /*close*/ ctx[18]);
 
 	return {
 		c() {
@@ -1475,14 +1508,18 @@ function create_default_slot(ctx) {
 		},
 		p(ctx, dirty) {
 			const modal_changes = {};
-			if (dirty & /*eventName*/ 16) modal_changes.eventName = /*eventName*/ ctx[4];
-			if (dirty & /*eventValue*/ 32) modal_changes.eventValue = /*eventValue*/ ctx[5];
-			if (dirty & /*closable*/ 4) modal_changes.closable = /*closable*/ ctx[2];
-			if (dirty & /*closeButtonColor*/ 8) modal_changes.closeButtonColor = /*closeButtonColor*/ ctx[3];
-			if (dirty & /*_closeStyle*/ 64) modal_changes._closeStyle = /*_closeStyle*/ ctx[6];
-			if (dirty & /*_modalStyle*/ 2) modal_changes._style = /*_modalStyle*/ ctx[1];
-
-			if (dirty & /*$$scope, width, height, rows, columns, gap, background*/ 139136) {
+			if (dirty & /*placement*/ 8) modal_changes.placement = /*placement*/ ctx[3];
+			if (dirty & /*animation*/ 16) modal_changes.animation = /*animation*/ ctx[4];
+			if (dirty & /*closable*/ 64) modal_changes.closable = /*closable*/ ctx[6];
+			if (dirty & /*closeButtonColor*/ 128) modal_changes.closeButtonColor = /*closeButtonColor*/ ctx[7];
+			if (dirty & /*_closeStyle*/ 1024) modal_changes._closeStyle = /*_closeStyle*/ ctx[10];
+			if (dirty & /*_modalStyle*/ 32) modal_changes._style = /*_modalStyle*/ ctx[5];
+			if (dirty & /*clickEventName*/ 2) modal_changes.clickEventName = /*clickEventName*/ ctx[1];
+			if (dirty & /*clickEventValue*/ 4) modal_changes.clickEventValue = /*clickEventValue*/ ctx[2];
+			if (dirty & /*closeEventName*/ 256) modal_changes.closeEventName = /*closeEventName*/ ctx[8];
+			if (dirty & /*closeEventValue*/ 512) modal_changes.closeEventValue = /*closeEventValue*/ ctx[9];
+
+			if (dirty & /*$$scope, width, height, rows, columns, gap, background*/ 1177600) {
 				modal_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1527,7 +1564,7 @@ function create_fragment$6(ctx) {
 			const stateitem_changes = {};
 			if (dirty & /*path*/ 1) stateitem_changes.path = /*path*/ ctx[0];
 
-			if (dirty & /*$$scope, eventName, eventValue, closable, closeButtonColor, _closeStyle, _modalStyle, width, height, rows, columns, gap, background*/ 139262) {
+			if (dirty & /*$$scope, placement, animation, closable, closeButtonColor, _closeStyle, _modalStyle, clickEventName, clickEventValue, closeEventName, closeEventValue, width, height, rows, columns, gap, background*/ 1179646) {
 				stateitem_changes.$$scope = { dirty, ctx };
 			}
 
@@ -1551,13 +1588,41 @@ function create_fragment$6(ctx) {
 function instance$6($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
+
+	/**
+ * {
+ * "title": {"ja": "クリック", "en": "Click"},
+ * "folder": {"ja": "全体のクリックイベント", "en": "Whole Click Event"}
+ * }
+ */
+	const dispatchClick = createEventDispatcher();
+
+	const click = () => {
+		dispatchClick('click');
+	};
+
+	let { clickEventName = '' } = $$props;
+	let { clickEventValue = null } = $$props;
 	let { placement = DefaultModalPlacement } = $$props;
 	let { animation = 'none' } = $$props;
 	let { _modalStyle = '' } = $$props;
 	let { closable = true } = $$props;
 	let { closeButtonColor = '#000000' } = $$props;
-	let { eventName = '' } = $$props;
-	let { eventValue = null } = $$props;
+
+	/**
+ * {
+ * "title": {"ja": "クリック", "en": "Click"},
+ * "folder": {"ja": "閉じるボタン", "en": "Close Button"}
+ * }
+ */
+	const dispatchClose = createEventDispatcher();
+
+	const close = () => {
+		dispatchClose('close');
+	};
+
+	let { closeEventName = '' } = $$props;
+	let { closeEventValue = null } = $$props;
 	let { _closeStyle = '' } = $$props;
 	let { width = '512px' } = $$props;
 	let { height = '256px' } = $$props;
@@ -1566,41 +1631,38 @@ function instance$6($$self, $$props, $$invalidate) {
 	let { gap = '0px' } = $$props;
 	let { background = 'transparent' } = $$props;
 
-	/**
- * {"title": {"ja": "閉じるボタン", "en": "Close Button"}}
- */
-	const dispatch = createEventDispatcher();
-
-	const close = () => {
-		dispatch('close');
-	};
-
 	$$self.$$set = $$props => {
 		if ('path' in $$props) $$invalidate(0, path = $$props.path);
-		if ('placement' in $$props) $$invalidate(14, placement = $$props.placement);
-		if ('animation' in $$props) $$invalidate(15, animation = $$props.animation);
-		if ('_modalStyle' in $$props) $$invalidate(1, _modalStyle = $$props._modalStyle);
-		if ('closable' in $$props) $$invalidate(2, closable = $$props.closable);
-		if ('closeButtonColor' in $$props) $$invalidate(3, closeButtonColor = $$props.closeButtonColor);
-		if ('eventName' in $$props) $$invalidate(4, eventName = $$props.eventName);
-		if ('eventValue' in $$props) $$invalidate(5, eventValue = $$props.eventValue);
-		if ('_closeStyle' in $$props) $$invalidate(6, _closeStyle = $$props._closeStyle);
-		if ('width' in $$props) $$invalidate(7, width = $$props.width);
-		if ('height' in $$props) $$invalidate(8, height = $$props.height);
-		if ('rows' in $$props) $$invalidate(9, rows = $$props.rows);
-		if ('columns' in $$props) $$invalidate(10, columns = $$props.columns);
-		if ('gap' in $$props) $$invalidate(11, gap = $$props.gap);
-		if ('background' in $$props) $$invalidate(12, background = $$props.background);
-		if ('$$scope' in $$props) $$invalidate(17, $$scope = $$props.$$scope);
+		if ('clickEventName' in $$props) $$invalidate(1, clickEventName = $$props.clickEventName);
+		if ('clickEventValue' in $$props) $$invalidate(2, clickEventValue = $$props.clickEventValue);
+		if ('placement' in $$props) $$invalidate(3, placement = $$props.placement);
+		if ('animation' in $$props) $$invalidate(4, animation = $$props.animation);
+		if ('_modalStyle' in $$props) $$invalidate(5, _modalStyle = $$props._modalStyle);
+		if ('closable' in $$props) $$invalidate(6, closable = $$props.closable);
+		if ('closeButtonColor' in $$props) $$invalidate(7, closeButtonColor = $$props.closeButtonColor);
+		if ('closeEventName' in $$props) $$invalidate(8, closeEventName = $$props.closeEventName);
+		if ('closeEventValue' in $$props) $$invalidate(9, closeEventValue = $$props.closeEventValue);
+		if ('_closeStyle' in $$props) $$invalidate(10, _closeStyle = $$props._closeStyle);
+		if ('width' in $$props) $$invalidate(11, width = $$props.width);
+		if ('height' in $$props) $$invalidate(12, height = $$props.height);
+		if ('rows' in $$props) $$invalidate(13, rows = $$props.rows);
+		if ('columns' in $$props) $$invalidate(14, columns = $$props.columns);
+		if ('gap' in $$props) $$invalidate(15, gap = $$props.gap);
+		if ('background' in $$props) $$invalidate(16, background = $$props.background);
+		if ('$$scope' in $$props) $$invalidate(20, $$scope = $$props.$$scope);
 	};
 
 	return [
 		path,
+		clickEventName,
+		clickEventValue,
+		placement,
+		animation,
 		_modalStyle,
 		closable,
 		closeButtonColor,
-		eventName,
-		eventValue,
+		closeEventName,
+		closeEventValue,
 		_closeStyle,
 		width,
 		height,
@@ -1608,9 +1670,8 @@ function instance$6($$self, $$props, $$invalidate) {
 		columns,
 		gap,
 		background,
+		click,
 		close,
-		placement,
-		animation,
 		slots,
 		$$scope
 	];
@@ -1622,20 +1683,22 @@ class GridModalState extends SvelteComponent {
 
 		init(this, options, instance$6, create_fragment$6, safe_not_equal, {
 			path: 0,
-			placement: 14,
-			animation: 15,
-			_modalStyle: 1,
-			closable: 2,
-			closeButtonColor: 3,
-			eventName: 4,
-			eventValue: 5,
-			_closeStyle: 6,
-			width: 7,
-			height: 8,
-			rows: 9,
-			columns: 10,
-			gap: 11,
-			background: 12
+			clickEventName: 1,
+			clickEventValue: 2,
+			placement: 3,
+			animation: 4,
+			_modalStyle: 5,
+			closable: 6,
+			closeButtonColor: 7,
+			closeEventName: 8,
+			closeEventValue: 9,
+			_closeStyle: 10,
+			width: 11,
+			height: 12,
+			rows: 13,
+			columns: 14,
+			gap: 15,
+			background: 16
 		});
 	}
 }
@@ -1643,7 +1706,7 @@ class GridModalState extends SvelteComponent {
 /* src/components/GridItem.svelte generated by Svelte v3.44.1 */
 
 function add_css$5(target) {
-	append_styles(target, "svelte-g0rfgr", ".grid-item.svelte-g0rfgr{word-break:break-all}");
+	append_styles(target, "svelte-1pachgk", ".grid-item.svelte-1pachgk{word-break:break-all;overflow:hidden}");
 }
 
 function create_fragment$5(ctx) {
@@ -1656,7 +1719,7 @@ function create_fragment$5(ctx) {
 		c() {
 			div = element("div");
 			if (default_slot) default_slot.c();
-			attr(div, "class", "grid-item svelte-g0rfgr");
+			attr(div, "class", "grid-item svelte-1pachgk");
 			attr(div, "style", /*_style*/ ctx[0]);
 		},
 		m(target, anchor) {
@@ -1991,7 +2054,7 @@ class FlexItem extends SvelteComponent {
 /* src/components/TextBlock.svelte generated by Svelte v3.44.1 */
 
 function add_css$2(target) {
-	append_styles(target, "svelte-1xf20ux", ".text-block.svelte-1xf20ux{display:flex;width:100%;height:100%;box-sizing:border-box}.text-block-inner.svelte-1xf20ux{width:100%}");
+	append_styles(target, "svelte-sxonpr", ".text-block.svelte-sxonpr{display:flex;width:100%;height:100%;box-sizing:border-box}.text-block-inner.svelte-sxonpr{display:flex;width:100%;height:100%}");
 }
 
 function create_fragment$2(ctx) {
@@ -2003,9 +2066,10 @@ function create_fragment$2(ctx) {
 		c() {
 			div1 = element("div");
 			div0 = element("div");
-			attr(div0, "class", "text-block-inner svelte-1xf20ux");
-			attr(div1, "class", "text-block svelte-1xf20ux");
-			attr(div1, "style", /*_style*/ ctx[1]);
+			attr(div0, "class", "text-block-inner svelte-sxonpr");
+			attr(div0, "style", /*_textStyle*/ ctx[1]);
+			attr(div1, "class", "text-block svelte-sxonpr");
+			attr(div1, "style", /*_style*/ ctx[2]);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -2014,8 +2078,12 @@ function create_fragment$2(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (dirty & /*text*/ 1 && raw_value !== (raw_value = toBr(/*text*/ ctx[0]) + "")) div0.innerHTML = raw_value;
-			if (dirty & /*_style*/ 2) {
-				attr(div1, "style", /*_style*/ ctx[1]);
+			if (dirty & /*_textStyle*/ 2) {
+				attr(div0, "style", /*_textStyle*/ ctx[1]);
+			}
+
+			if (dirty & /*_style*/ 4) {
+				attr(div1, "style", /*_style*/ ctx[2]);
 			}
 		},
 		i: noop,
@@ -2028,20 +2096,22 @@ function create_fragment$2(ctx) {
 
 function instance$2($$self, $$props, $$invalidate) {
 	let { text = 'サンプルSample' } = $$props;
-	let { _style = 'font-size:12px;' } = $$props;
+	let { _textStyle = 'font-size:12px;' } = $$props;
+	let { _style = '' } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('text' in $$props) $$invalidate(0, text = $$props.text);
-		if ('_style' in $$props) $$invalidate(1, _style = $$props._style);
+		if ('_textStyle' in $$props) $$invalidate(1, _textStyle = $$props._textStyle);
+		if ('_style' in $$props) $$invalidate(2, _style = $$props._style);
 	};
 
-	return [text, _style];
+	return [text, _textStyle, _style];
 }
 
 class TextBlock extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$2, create_fragment$2, safe_not_equal, { text: 0, _style: 1 }, add_css$2);
+		init(this, options, instance$2, create_fragment$2, safe_not_equal, { text: 0, _textStyle: 1, _style: 2 }, add_css$2);
 	}
 }
 
@@ -2154,13 +2224,14 @@ class TextButtonBlock extends SvelteComponent {
 /* src/components/ImageBlock.svelte generated by Svelte v3.44.1 */
 
 function add_css(target) {
-	append_styles(target, "svelte-95tcq4", ".image-block.svelte-95tcq4{display:flex;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;overflow:hidden;box-sizing:border-box}.image.svelte-95tcq4{width:100%;height:100%}");
+	append_styles(target, "svelte-ci8ktf", ".image-block.svelte-ci8ktf{display:flex;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;overflow:hidden;box-sizing:border-box}.image.svelte-ci8ktf{width:100%;height:100%}.transport.svelte-ci8ktf:hover,.transport.svelte-ci8ktf:focus{opacity:.75;box-shadow:0 5px 16px rgba(0,0,0,.1), 0 8px 28px rgba(0,0,0,.16)}");
 }
 
 function create_fragment(ctx) {
 	let div;
 	let img;
 	let img_src_value;
+	let div_class_value;
 	let mounted;
 	let dispose;
 
@@ -2168,28 +2239,28 @@ function create_fragment(ctx) {
 		c() {
 			div = element("div");
 			img = element("img");
-			attr(img, "class", "image svelte-95tcq4");
+			attr(img, "class", "image svelte-ci8ktf");
 			attr(img, "loading", "lazy");
 			attr(img, "width", "auto");
 			attr(img, "height", "auto");
-			attr(img, "style", /*_imageStyle*/ ctx[2]);
+			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", "image-block svelte-95tcq4");
-			attr(div, "style", /*_style*/ ctx[3]);
+			attr(div, "class", div_class_value = "" + (null_to_empty("image-block" + (/*transport*/ ctx[2] ? " transport" : "")) + " svelte-ci8ktf"));
+			attr(div, "style", /*_style*/ ctx[4]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			append(div, img);
 
 			if (!mounted) {
-				dispose = listen(div, "click", /*click*/ ctx[4]);
+				dispose = listen(div, "click", /*click*/ ctx[5]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*_imageStyle*/ 4) {
-				attr(img, "style", /*_imageStyle*/ ctx[2]);
+			if (dirty & /*_imageStyle*/ 8) {
+				attr(img, "style", /*_imageStyle*/ ctx[3]);
 			}
 
 			if (dirty & /*src*/ 1 && !src_url_equal(img.src, img_src_value = /*src*/ ctx[0])) {
@@ -2200,8 +2271,12 @@ function create_fragment(ctx) {
 				attr(img, "alt", /*alt*/ ctx[1]);
 			}
 
-			if (dirty & /*_style*/ 8) {
-				attr(div, "style", /*_style*/ ctx[3]);
+			if (dirty & /*transport*/ 4 && div_class_value !== (div_class_value = "" + (null_to_empty("image-block" + (/*transport*/ ctx[2] ? " transport" : "")) + " svelte-ci8ktf"))) {
+				attr(div, "class", div_class_value);
+			}
+
+			if (dirty & /*_style*/ 16) {
+				attr(div, "style", /*_style*/ ctx[4]);
 			}
 		},
 		i: noop,
@@ -2217,6 +2292,7 @@ function create_fragment(ctx) {
 function instance($$self, $$props, $$invalidate) {
 	let { src = 'https://admin.karte.io/action-editor2/public/images/no_image_en.svg' } = $$props;
 	let { alt = 'No Image' } = $$props;
+	let { transport = false } = $$props;
 
 	/**
  * {"title": {"ja": "イベントタイプ", "en": "Event Type"}, "folder": {"ja": "クリックイベント", "en": "Click Event"}}
@@ -2238,12 +2314,13 @@ function instance($$self, $$props, $$invalidate) {
 	$$self.$$set = $$props => {
 		if ('src' in $$props) $$invalidate(0, src = $$props.src);
 		if ('alt' in $$props) $$invalidate(1, alt = $$props.alt);
-		if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
-		if ('_imageStyle' in $$props) $$invalidate(2, _imageStyle = $$props._imageStyle);
-		if ('_style' in $$props) $$invalidate(3, _style = $$props._style);
+		if ('transport' in $$props) $$invalidate(2, transport = $$props.transport);
+		if ('eventName' in $$props) $$invalidate(6, eventName = $$props.eventName);
+		if ('_imageStyle' in $$props) $$invalidate(3, _imageStyle = $$props._imageStyle);
+		if ('_style' in $$props) $$invalidate(4, _style = $$props._style);
 	};
 
-	return [src, alt, _imageStyle, _style, click, eventName];
+	return [src, alt, transport, _imageStyle, _style, click, eventName];
 }
 
 class ImageBlock extends SvelteComponent {
@@ -2259,9 +2336,10 @@ class ImageBlock extends SvelteComponent {
 			{
 				src: 0,
 				alt: 1,
-				eventName: 5,
-				_imageStyle: 2,
-				_style: 3
+				transport: 2,
+				eventName: 6,
+				_imageStyle: 3,
+				_style: 4
 			},
 			add_css
 		);

package/package.json

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