@plaidev/karte-action-sdk 1.1.126 → 1.1.127-27953328.1721c5e0

package/dist/index.es.js

@@ -439,6 +439,32 @@ function updateInternalHandlers(handlers) {
     });
     return getInternalHandlers();
 }
+/**
+ * Store to handle internal event handlers for widget API
+ *
+ * @internal
+ */
+const widgetHandlers = writable({});
+/**
+ * {@link getWidgetHandlers} function to get internal event handlers for widget API.
+ *
+ * @param handlers - New internal widget event handlers
+ *
+ * @returns Current internal widget handlers
+ *
+ * @internal
+ */
+function getWidgetHandlers() {
+    return get(widgetHandlers);
+}
+/**
+ * {@link setWidgetHandlers} function to set internal event handlers.
+ *
+ * @internal
+ */
+function setWidgetHandlers(handlers) {
+    widgetHandlers.set(handlers);
+}
 /**
  * Store to handle custom event handlers
  *
@@ -958,9 +984,11 @@ const EVENTS_LIMIT = 1000;
 let logs = [];
 // KARTEイベント
 let events = [];
+/** @internal */
 function getLogs() {
     return logs;
 }
+/** @internal */
 function getEvents() {
     return events;
 }
@@ -970,22 +998,24 @@ function w(w) {
 }
 /**
  * ログを送信する関数群
+ *
+ * @internal
  */
 const logger = {
     info: (...messages) => {
-        const log = { level: 'info', messages, date: new Date() };
+        const log = cloneToJson({ level: 'info', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     log: (...messages) => {
-        const log = { level: 'info', messages, date: new Date() };
+        const log = cloneToJson({ level: 'info', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     error: (...messages) => {
-        const log = { level: 'error', messages, date: new Date() };
+        const log = cloneToJson({ level: 'error', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     warn: (...messages) => {
-        const log = { level: 'warn', messages, date: new Date() };
+        const log = cloneToJson({ level: 'warn', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     event: (name, values) => {
@@ -1004,6 +1034,8 @@ const logger = {
 };
 /**
  * メッセージを実行ログに表示する
+ *
+ * @internal
  */
 function listenLogger() {
     const handler = (event) => {
@@ -1044,6 +1076,14 @@ function listenLogger() {
         window.removeEventListener('message', handler, false);
     };
 }
+function cloneToJson(data) {
+    try {
+        return JSON.parse(JSON.stringify(data));
+    }
+    catch (e) {
+        return data;
+    }
+}
 
 function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
     if (direction === 'down' && deltaRate > 0) {
@@ -1361,6 +1401,11 @@ const WritingModes = ['horizontal-tb', 'vertical-lr'];
 /** @internal */
 const ListSeparatorTypes = ['none', 'border', 'gap'];
 /** @internal */
+const DefaultEdgePosition = {
+    edgeDistance: '8px',
+    edgeDirectionOffset: '0px',
+};
+/** @internal */
 const DefaultListSeparatorNone = {
     type: 'none',
 };
@@ -1522,6 +1567,8 @@ const loadActionTable = async (config, api_key, endpoint) => {
     }, {});
 };
 
+/** @internal */
+const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
 /**
  * アクションが作成 (create) される前にフックする関数
  *
@@ -1575,12 +1622,12 @@ function onClose(fn) {
  * @public
  */
 function onDestroy(fn) {
-    let { onDestoryHandlers } = getInternalHandlers();
-    if (!onDestoryHandlers) {
-        onDestoryHandlers = [];
+    let { onDestroyHandlers } = getInternalHandlers();
+    if (!onDestroyHandlers) {
+        onDestroyHandlers = [];
     }
-    onDestoryHandlers.push(fn);
-    updateInternalHandlers({ onDestoryHandlers });
+    onDestroyHandlers.push(fn);
+    updateInternalHandlers({ onDestroyHandlers });
 }
 /**
  * アクションのステートが変更された (changeState) 後にフックする関数
@@ -1621,13 +1668,21 @@ function create(App, options = {
     };
     const actionProps = { send: options.send, data };
     initialize({ send: options.send });
-    // NOTE: onCreateより前にListenする必要がある
-    window.addEventListener(ACTION_DESTROY_EVENT, () => {
+    const handleDestroy = () => {
         const { onDestroyHandlers } = getInternalHandlers();
-        onDestroyHandlers?.forEach(h => h(actionProps));
-        // 複数回onDestroyを呼ばないようにする処理
-        window.removeEventListener('beforeunload', dispatchDestroyEvent);
-    });
+        onDestroyHandlers?.forEach(h => {
+            const actionHookLog = { name: 'onDestroy' };
+            console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+            h(actionProps);
+        });
+        // 旧Widget APIの内部で利用するため、実行ログは出力しない
+        const { onDestroyHandlers: onDestroyWidgetHandlers } = getWidgetHandlers();
+        if (onDestroyWidgetHandlers) {
+            onDestroyWidgetHandlers.forEach(h => h(actionProps));
+        }
+    };
+    // NOTE: onCreateより前にListenする必要がある
+    window.addEventListener(ACTION_DESTROY_EVENT, handleDestroy);
     window.addEventListener('beforeunload', dispatchDestroyEvent, false);
     setSystem({
         // @ts-ignore
@@ -1649,9 +1704,14 @@ function create(App, options = {
         window.removeEventListener(ACTION_CHANGE_STATE_EVENT, handleState);
         const { onCloseHandlers } = getInternalHandlers();
         if (onCloseHandlers) {
-            onCloseHandlers.forEach(h => h({ send: options.send, data }, trigger));
+            onCloseHandlers.forEach(h => {
+                const actionHookLog = { name: 'onClose', values: { trigger } };
+                console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+                h({ send: options.send, data }, trigger);
+            });
         }
         finalize();
+        dispatchDestroyEvent();
         app.$destroy();
         app = null;
     };
@@ -1677,12 +1737,28 @@ function create(App, options = {
                 onShow: (props) => {
                     const { onShowHandlers } = getInternalHandlers();
                     if (onShowHandlers) {
-                        onShowHandlers.forEach(h => h(props));
+                        onShowHandlers.forEach(h => {
+                            const actionHookLog = { name: 'onShow' };
+                            console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+                            h(props);
+                        });
                     }
                 },
                 onChangeState: (props, newState) => {
                     const { onChangeStateHandlers } = getInternalHandlers();
                     if (onChangeStateHandlers) {
+                        onChangeStateHandlers.forEach(h => {
+                            const actionHookLog = {
+                                name: 'onChangeState',
+                                values: { newState },
+                            };
+                            console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+                            h(props, newState);
+                        });
+                    }
+                    // 旧Widget APIの内部で利用するため、実行ログは出力しない
+                    const { onChangeStateHandlers: onChangeWidgetStateHandlers } = getWidgetHandlers();
+                    if (onChangeWidgetStateHandlers) {
                         onChangeStateHandlers.forEach(h => h(props, newState));
                     }
                 },
@@ -1727,7 +1803,10 @@ function create(App, options = {
     }
     const { onCreateHandlers } = getInternalHandlers();
     if (onCreateHandlers) {
-        onCreateHandlers.forEach(h => h({ send: options.send, data }));
+        onCreateHandlers.forEach(h => {
+            h({ send: options.send, data });
+            console.debug(`${ACTION_HOOK_LABEL}: onCreate`);
+        });
     }
     // 初期化処理
     // NOTE: onCreateの後に実行する必要がある
@@ -1735,6 +1814,8 @@ function create(App, options = {
         return () => {
             window.removeEventListener(ACTION_SHOW_EVENT, show);
             window.removeEventListener(ACTION_CLOSE_EVENT, handleClose);
+            window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
+            window.removeEventListener('beforeunload', dispatchDestroyEvent, false);
         };
     }
     let hideCleanup = NOOP;
@@ -1749,6 +1830,8 @@ function create(App, options = {
         showCleanup();
         window.removeEventListener(ACTION_SHOW_EVENT, show);
         window.removeEventListener(ACTION_CLOSE_EVENT, handleClose);
+        window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
+        window.removeEventListener('beforeunload', dispatchDestroyEvent, false);
     };
 }
 /**
@@ -2063,15 +2146,21 @@ const STORE_LS_KEY_PREFIX = 'krt___';
 const valCallbacks = {};
 const eventCallbacks = {};
 const memoryStore = {};
-onChangeState((_props, newState) => {
-    setVal('state', newState);
-});
-onDestroy(() => {
-    Object.entries(eventCallbacks).map(([name, cbs]) => {
-        cbs.forEach(cb => {
-            window.removeEventListener(name, cb);
-        });
-    });
+setWidgetHandlers({
+    onChangeState: [
+        (_props, newState) => {
+            setVal('state', newState);
+        },
+    ],
+    onDestroy: [
+        () => {
+            Object.entries(eventCallbacks).map(([name, cbs]) => {
+                cbs.forEach(cb => {
+                    window.removeEventListener(name, cb);
+                });
+            });
+        },
+    ],
 });
 /**
  * 変数を設定する
@@ -6631,109 +6720,119 @@ class FormRatingButtons extends SvelteComponent {
 /* src/components/Slide.svelte generated by Svelte v3.53.1 */
 
 function add_css$4(target) {
-	append_styles(target, "svelte-105wdod", ".root.svelte-105wdod{width:100%;height:100%;position:relative}.container.svelte-105wdod{width:100%;height:100%;position:relative;overflow:hidden}.slide.svelte-105wdod{height:100%;position:absolute;display:flex}.transition.svelte-105wdod{transition:left 0.2s cubic-bezier(.04,.67,.53,.96)}.item.svelte-105wdod{height:100%;flex:none}.prev-button.svelte-105wdod,.next-button.svelte-105wdod{top:50%;height:0;position:absolute;display:flex;overflow:visible;align-items:center}.prev-button.svelte-105wdod{left:0}.next-button.svelte-105wdod{right:0}.button-container.svelte-105wdod{display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box}.prev-icon.svelte-105wdod{width:20px;height:20px;box-sizing:border-box;border-right:solid 3px #000;border-top:solid 3px #000;transform:translateX(35.4%) rotate(-135deg)}.next-icon.svelte-105wdod{width:20px;height:20px;box-sizing:border-box;border-right:solid 3px #000;border-top:solid 3px #000;transform:translateX(-35.4%) rotate(45deg)}.navigation.svelte-105wdod{position:absolute;width:0;left:50%;bottom:0;display:flex;justify-content:center;overflow:visible}.navigation-item.svelte-105wdod{flex-shrink:0;cursor:pointer}.navigation-item-inner.circle.svelte-105wdod{border-radius:51%}");
+	append_styles(target, "svelte-c7zaph", ".root.svelte-c7zaph{width:100%;height:100%;position:relative}.container.svelte-c7zaph{width:100%;height:100%;position:relative;overflow:hidden}.slide.svelte-c7zaph{height:100%;position:absolute;display:flex}.transition.svelte-c7zaph{transition:left 0.2s cubic-bezier(.04,.67,.53,.96)}.item.svelte-c7zaph{height:100%;flex:none}.prev-button.svelte-c7zaph,.next-button.svelte-c7zaph{top:50%;height:0;position:absolute;display:flex;overflow:visible;align-items:center}.prev-button.svelte-c7zaph{left:0}.next-button.svelte-c7zaph{right:0}.button-container.svelte-c7zaph{display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box}.navigation.svelte-c7zaph{position:absolute;width:0;left:50%;bottom:0;display:flex;justify-content:center;overflow:visible}.navigation-item.svelte-c7zaph{flex-shrink:0;cursor:pointer}.navigation-item-inner.circle.svelte-c7zaph{border-radius:51%}");
 }
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[52] = list[i];
-	child_ctx[54] = i;
+	child_ctx[57] = list[i];
+	child_ctx[59] = i;
 	return child_ctx;
 }
 
-// (315:2) {#if isVisiblePrevButton}
+// (349:2) {#if isVisiblePrevButton}
 function create_if_block_1(ctx) {
-	let div2;
 	let div1;
 	let div0;
+	let svg;
+	let polygon;
 	let mounted;
 	let dispose;
 
 	return {
 		c() {
-			div2 = element("div");
 			div1 = element("div");
 			div0 = element("div");
-			attr(div0, "class", "prev-icon svelte-105wdod");
-			attr(div0, "style", /*prevIconStyle*/ ctx[9]);
-			attr(div1, "class", "button-container svelte-105wdod");
-			attr(div1, "style", /*prevButtonContainerStyle*/ ctx[0]);
-			attr(div2, "class", "prev-button svelte-105wdod");
+			svg = svg_element("svg");
+			polygon = svg_element("polygon");
+			attr(polygon, "points", "8,0 10,2 4,8 10,14 8,16 0,8");
+			attr(svg, "viewBox", "0 0 10 16");
+			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+			attr(svg, "style", /*prevIconStyle*/ ctx[9]);
+			attr(div0, "class", "button-container svelte-c7zaph");
+			attr(div0, "style", /*_prevButtonContainerStyle*/ ctx[8]);
+			attr(div1, "class", "prev-button svelte-c7zaph");
 		},
 		m(target, anchor) {
-			insert(target, div2, anchor);
-			append(div2, div1);
+			insert(target, div1, anchor);
 			append(div1, div0);
+			append(div0, svg);
+			append(svg, polygon);
 
 			if (!mounted) {
-				dispose = listen(div2, "click", /*prev*/ ctx[14]);
+				dispose = listen(div1, "click", /*prev*/ ctx[14]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
 			if (dirty[0] & /*prevIconStyle*/ 512) {
-				attr(div0, "style", /*prevIconStyle*/ ctx[9]);
+				attr(svg, "style", /*prevIconStyle*/ ctx[9]);
 			}
 
-			if (dirty[0] & /*prevButtonContainerStyle*/ 1) {
-				attr(div1, "style", /*prevButtonContainerStyle*/ ctx[0]);
+			if (dirty[0] & /*_prevButtonContainerStyle*/ 256) {
+				attr(div0, "style", /*_prevButtonContainerStyle*/ ctx[8]);
 			}
 		},
 		d(detaching) {
-			if (detaching) detach(div2);
+			if (detaching) detach(div1);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-// (322:2) {#if isVisibleNextButton}
+// (358:2) {#if isVisibleNextButton}
 function create_if_block(ctx) {
-	let div2;
 	let div1;
 	let div0;
+	let svg;
+	let polygon;
 	let mounted;
 	let dispose;
 
 	return {
 		c() {
-			div2 = element("div");
 			div1 = element("div");
 			div0 = element("div");
-			attr(div0, "class", "next-icon svelte-105wdod");
-			attr(div0, "style", /*nextIconStyle*/ ctx[8]);
-			attr(div1, "class", "button-container svelte-105wdod");
-			attr(div1, "style", /*nextButtonContainerStyle*/ ctx[1]);
-			attr(div2, "class", "next-button svelte-105wdod");
+			svg = svg_element("svg");
+			polygon = svg_element("polygon");
+			attr(polygon, "points", "2,0 10,8 2,16 0,14 6,8 0,2");
+			attr(svg, "viewBox", "0 0 10 16");
+			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+			attr(svg, "style", /*nextIconStyle*/ ctx[7]);
+			attr(div0, "class", "button-container svelte-c7zaph");
+			attr(div0, "style", /*_nextButtonContainerStyle*/ ctx[6]);
+			attr(div1, "class", "next-button svelte-c7zaph");
 		},
 		m(target, anchor) {
-			insert(target, div2, anchor);
-			append(div2, div1);
+			insert(target, div1, anchor);
 			append(div1, div0);
+			append(div0, svg);
+			append(svg, polygon);
 
 			if (!mounted) {
-				dispose = listen(div2, "click", /*next*/ ctx[15]);
+				dispose = listen(div1, "click", /*next*/ ctx[15]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*nextIconStyle*/ 256) {
-				attr(div0, "style", /*nextIconStyle*/ ctx[8]);
+			if (dirty[0] & /*nextIconStyle*/ 128) {
+				attr(svg, "style", /*nextIconStyle*/ ctx[7]);
 			}
 
-			if (dirty[0] & /*nextButtonContainerStyle*/ 2) {
-				attr(div1, "style", /*nextButtonContainerStyle*/ ctx[1]);
+			if (dirty[0] & /*_nextButtonContainerStyle*/ 64) {
+				attr(div0, "style", /*_nextButtonContainerStyle*/ ctx[6]);
 			}
 		},
 		d(detaching) {
-			if (detaching) detach(div2);
+			if (detaching) detach(div1);
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-// (333:4) {#each items as _, i}
+// (371:4) {#each items as _, i}
 function create_each_block(ctx) {
 	let div1;
 	let div0;
@@ -6743,7 +6842,7 @@ function create_each_block(ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[29](/*i*/ ctx[54]);
+		return /*click_handler*/ ctx[34](/*i*/ ctx[59]);
 	}
 
 	return {
@@ -6751,10 +6850,10 @@ function create_each_block(ctx) {
 			div1 = element("div");
 			div0 = element("div");
 			t = space();
-			attr(div0, "class", "navigation-item-inner circle svelte-105wdod");
-			attr(div0, "style", div0_style_value = /*getNavigationItemInnerStyle*/ ctx[6](/*i*/ ctx[54]));
-			attr(div1, "class", "navigation-item svelte-105wdod");
-			attr(div1, "style", /*navigationItemStyle*/ ctx[7]);
+			attr(div0, "class", "navigation-item-inner circle svelte-c7zaph");
+			attr(div0, "style", div0_style_value = /*getNavigationItemInnerStyle*/ ctx[4](/*i*/ ctx[59]));
+			attr(div1, "class", "navigation-item svelte-c7zaph");
+			attr(div1, "style", /*navigationItemStyle*/ ctx[5]);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -6769,12 +6868,12 @@ function create_each_block(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (dirty[0] & /*getNavigationItemInnerStyle*/ 64 && div0_style_value !== (div0_style_value = /*getNavigationItemInnerStyle*/ ctx[6](/*i*/ ctx[54]))) {
+			if (dirty[0] & /*getNavigationItemInnerStyle*/ 16 && div0_style_value !== (div0_style_value = /*getNavigationItemInnerStyle*/ ctx[4](/*i*/ ctx[59]))) {
 				attr(div0, "style", div0_style_value);
 			}
 
-			if (dirty[0] & /*navigationItemStyle*/ 128) {
-				attr(div1, "style", /*navigationItemStyle*/ ctx[7]);
+			if (dirty[0] & /*navigationItemStyle*/ 32) {
+				attr(div1, "style", /*navigationItemStyle*/ ctx[5]);
 			}
 		},
 		d(detaching) {
@@ -6795,11 +6894,11 @@ function create_fragment$4(ctx) {
 	let t2;
 	let div2;
 	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[31].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[30], null);
 	let if_block0 = /*isVisiblePrevButton*/ ctx[11] && create_if_block_1(ctx);
 	let if_block1 = /*isVisibleNextButton*/ ctx[10] && create_if_block(ctx);
-	let each_value = /*items*/ ctx[3];
+	let each_value = /*items*/ ctx[0];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -6823,12 +6922,12 @@ function create_fragment$4(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div0, "class", div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[12]) + " svelte-105wdod"));
+			attr(div0, "class", div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[12]) + " svelte-c7zaph"));
 			attr(div0, "style", /*slideStyle*/ ctx[13]);
-			attr(div1, "class", "container svelte-105wdod");
-			attr(div2, "class", "navigation svelte-105wdod");
-			attr(div2, "style", /*navigationStyle*/ ctx[2]);
-			attr(div3, "class", "root svelte-105wdod");
+			attr(div1, "class", "container svelte-c7zaph");
+			attr(div2, "class", "navigation svelte-c7zaph");
+			attr(div2, "style", /*navigationStyle*/ ctx[3]);
+			attr(div3, "class", "root svelte-c7zaph");
 		},
 		m(target, anchor) {
 			insert(target, div3, anchor);
@@ -6839,8 +6938,8 @@ function create_fragment$4(ctx) {
 				default_slot.m(div0, null);
 			}
 
-			/*div0_binding*/ ctx[27](div0);
-			/*div1_binding*/ ctx[28](div1);
+			/*div0_binding*/ ctx[32](div0);
+			/*div1_binding*/ ctx[33](div1);
 			append(div3, t0);
 			if (if_block0) if_block0.m(div3, null);
 			append(div3, t1);
@@ -6856,21 +6955,21 @@ function create_fragment$4(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 33554432)) {
+				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 1073741824)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[25],
+						/*$$scope*/ ctx[30],
 						!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[30])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[30], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty[0] & /*slideClass*/ 4096 && div0_class_value !== (div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[12]) + " svelte-105wdod"))) {
+			if (!current || dirty[0] & /*slideClass*/ 4096 && div0_class_value !== (div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[12]) + " svelte-c7zaph"))) {
 				attr(div0, "class", div0_class_value);
 			}
 
@@ -6904,8 +7003,8 @@ function create_fragment$4(ctx) {
 				if_block1 = null;
 			}
 
-			if (dirty[0] & /*navigationItemStyle, set, getNavigationItemInnerStyle, items*/ 65736) {
-				each_value = /*items*/ ctx[3];
+			if (dirty[0] & /*navigationItemStyle, set, getNavigationItemInnerStyle, items*/ 65585) {
+				each_value = /*items*/ ctx[0];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -6927,8 +7026,8 @@ function create_fragment$4(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (!current || dirty[0] & /*navigationStyle*/ 4) {
-				attr(div2, "style", /*navigationStyle*/ ctx[2]);
+			if (!current || dirty[0] & /*navigationStyle*/ 8) {
+				attr(div2, "style", /*navigationStyle*/ ctx[3]);
 			}
 		},
 		i(local) {
@@ -6943,8 +7042,8 @@ function create_fragment$4(ctx) {
 		d(detaching) {
 			if (detaching) detach(div3);
 			if (default_slot) default_slot.d(detaching);
-			/*div0_binding*/ ctx[27](null);
-			/*div1_binding*/ ctx[28](null);
+			/*div0_binding*/ ctx[32](null);
+			/*div1_binding*/ ctx[33](null);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
 			destroy_each(each_blocks, detaching);
@@ -6971,9 +7070,12 @@ function instance$4($$self, $$props, $$invalidate) {
 	let isVisiblePrevButton;
 	let isVisibleNextButton;
 	let prevIconStyle;
+	let _prevButtonContainerStyle;
 	let nextIconStyle;
+	let _nextButtonContainerStyle;
 	let navigationItemStyle;
 	let getNavigationItemInnerStyle;
+	let navigationStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { loop = false } = $$props;
 
@@ -6985,7 +7087,12 @@ function instance$4($$self, $$props, $$invalidate) {
 		size: '20px'
 	} } = $$props;
 
-	let { prevButtonContainerStyle = 'height: 48px; width: 24px; margin: 0 0 0 8px;' } = $$props;
+	let { prevButtonContainerStyle = 'height: 48px; width: 24px;' } = $$props;
+
+	let { prevButtonEdgePosition = {
+		edgeDistance: '8px',
+		edgeDirectionOffset: '0px'
+	} } = $$props;
 
 	let { nextButton = {
 		type: 'icon',
@@ -6995,7 +7102,12 @@ function instance$4($$self, $$props, $$invalidate) {
 		size: '20px'
 	} } = $$props;
 
-	let { nextButtonContainerStyle = 'height: 48px; width: 24px; margin: 0 8px 0 0;' } = $$props;
+	let { nextButtonContainerStyle = 'height: 48px; width: 24px;' } = $$props;
+
+	let { nextButtonEdgePosition = {
+		edgeDistance: '8px',
+		edgeDirectionOffset: '0px'
+	} } = $$props;
 
 	let { navigationButton = {
 		type: 'circle',
@@ -7004,18 +7116,22 @@ function instance$4($$self, $$props, $$invalidate) {
 		colorActive: '#666'
 	} } = $$props;
 
-	let { navigationStyle = 'margin: 0 0 8px 0' } = $$props;
+	let { navigationEdgePosition = {
+		edgeDistance: '8px',
+		edgeDirectionOffset: '0px'
+	} } = $$props;
+
 	let items = [];
 	const dispatch = createEventDispatcher();
 
 	setContext('SLIDE', {
 		registerItem: ({ onBeforeSlide, onMount, onResize }) => {
 			const id = new Date().getTime().toString();
-			$$invalidate(3, items = [...items, { id, onBeforeSlide, onMount, onResize }]);
+			$$invalidate(0, items = [...items, { id, onBeforeSlide, onMount, onResize }]);
 			return id;
 		},
 		unregisterItem: id => {
-			$$invalidate(3, items = items.filter(item => item.id !== id));
+			$$invalidate(0, items = items.filter(item => item.id !== id));
 		}
 	});
 
@@ -7042,7 +7158,7 @@ function instance$4($$self, $$props, $$invalidate) {
 						onBeforeSlide({ shiftCount, index, length: items.length });
 					});
 
-					$$invalidate(22, slidePosition = slidePosition + containerWidth * (calcPositionIndex(shiftCount, currentSlideId, items.length) - calcPositionIndex(previousShiftCount, currentSlideId, items.length)));
+					$$invalidate(27, slidePosition = slidePosition + containerWidth * (calcPositionIndex(shiftCount, currentSlideId, items.length) - calcPositionIndex(previousShiftCount, currentSlideId, items.length)));
 					previousShiftCount = shiftCount;
 					resolve();
 				});
@@ -7053,8 +7169,8 @@ function instance$4($$self, $$props, $$invalidate) {
 		if (transitioning) {
 			const slideRect = slideElement.getBoundingClientRect();
 			const containerRect = containerElement.getBoundingClientRect();
-			$$invalidate(23, transitioning = false);
-			$$invalidate(22, slidePosition = slideRect.x - containerRect.x);
+			$$invalidate(28, transitioning = false);
+			$$invalidate(27, slidePosition = slideRect.x - containerRect.x);
 		}
 	}
 
@@ -7074,10 +7190,10 @@ function instance$4($$self, $$props, $$invalidate) {
 				}
 			}
 
-			$$invalidate(23, transitioning = true);
-			$$invalidate(22, slidePosition = containerWidth * calcPositionIndex(shiftCount, slideIndex, items.length));
+			$$invalidate(28, transitioning = true);
+			$$invalidate(27, slidePosition = containerWidth * calcPositionIndex(shiftCount, slideIndex, items.length));
 			dispatch('change', { nextIndex: slideIndex });
-			$$invalidate(21, currentSlideId = slideIndex);
+			$$invalidate(26, currentSlideId = slideIndex);
 		});
 	}
 
@@ -7099,7 +7215,7 @@ function instance$4($$self, $$props, $$invalidate) {
 			const updatedSlidePosition = slidePosition + dx;
 
 			window.requestAnimationFrame(() => {
-				$$invalidate(22, slidePosition = updatedSlidePosition);
+				$$invalidate(27, slidePosition = updatedSlidePosition);
 			});
 		}
 
@@ -7119,7 +7235,7 @@ function instance$4($$self, $$props, $$invalidate) {
 			});
 		});
 
-		$$invalidate(22, slidePosition = containerWidth * calcPositionIndex(shiftCount, currentSlideId, items.length));
+		$$invalidate(27, slidePosition = containerWidth * calcPositionIndex(shiftCount, currentSlideId, items.length));
 	}
 
 	function handleMoveEnd() {
@@ -7172,7 +7288,7 @@ function instance$4($$self, $$props, $$invalidate) {
 	}
 
 	function handleTransitionEnd() {
-		$$invalidate(23, transitioning = false);
+		$$invalidate(28, transitioning = false);
 		fixSlidePosition();
 	}
 
@@ -7183,7 +7299,7 @@ function instance$4($$self, $$props, $$invalidate) {
 			item.onMount({ containerElement });
 		});
 
-		$$invalidate(21, currentSlideId = 0);
+		$$invalidate(26, currentSlideId = 0);
 
 		if (_loop) {
 			await fixSlidePosition();
@@ -7240,14 +7356,14 @@ function instance$4($$self, $$props, $$invalidate) {
 	function div0_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			slideElement = $$value;
-			$$invalidate(5, slideElement);
+			$$invalidate(2, slideElement);
 		});
 	}
 
 	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			containerElement = $$value;
-			$$invalidate(4, containerElement);
+			$$invalidate(1, containerElement);
 		});
 	}
 
@@ -7256,71 +7372,95 @@ function instance$4($$self, $$props, $$invalidate) {
 	$$self.$$set = $$props => {
 		if ('loop' in $$props) $$invalidate(17, loop = $$props.loop);
 		if ('prevButton' in $$props) $$invalidate(18, prevButton = $$props.prevButton);
-		if ('prevButtonContainerStyle' in $$props) $$invalidate(0, prevButtonContainerStyle = $$props.prevButtonContainerStyle);
-		if ('nextButton' in $$props) $$invalidate(19, nextButton = $$props.nextButton);
-		if ('nextButtonContainerStyle' in $$props) $$invalidate(1, nextButtonContainerStyle = $$props.nextButtonContainerStyle);
-		if ('navigationButton' in $$props) $$invalidate(20, navigationButton = $$props.navigationButton);
-		if ('navigationStyle' in $$props) $$invalidate(2, navigationStyle = $$props.navigationStyle);
-		if ('$$scope' in $$props) $$invalidate(25, $$scope = $$props.$$scope);
+		if ('prevButtonContainerStyle' in $$props) $$invalidate(19, prevButtonContainerStyle = $$props.prevButtonContainerStyle);
+		if ('prevButtonEdgePosition' in $$props) $$invalidate(20, prevButtonEdgePosition = $$props.prevButtonEdgePosition);
+		if ('nextButton' in $$props) $$invalidate(21, nextButton = $$props.nextButton);
+		if ('nextButtonContainerStyle' in $$props) $$invalidate(22, nextButtonContainerStyle = $$props.nextButtonContainerStyle);
+		if ('nextButtonEdgePosition' in $$props) $$invalidate(23, nextButtonEdgePosition = $$props.nextButtonEdgePosition);
+		if ('navigationButton' in $$props) $$invalidate(24, navigationButton = $$props.navigationButton);
+		if ('navigationEdgePosition' in $$props) $$invalidate(25, navigationEdgePosition = $$props.navigationEdgePosition);
+		if ('$$scope' in $$props) $$invalidate(30, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*slidePosition*/ 4194304) {
+		if ($$self.$$.dirty[0] & /*slidePosition*/ 134217728) {
 			$$invalidate(13, slideStyle = slidePosition != null ? `left: ${slidePosition}px;` : '');
 		}
 
-		if ($$self.$$.dirty[0] & /*transitioning*/ 8388608) {
+		if ($$self.$$.dirty[0] & /*transitioning*/ 268435456) {
 			$$invalidate(12, slideClass = ['slide', transitioning ? 'transition' : ''].join(' '));
 		}
 
-		if ($$self.$$.dirty[0] & /*items, loop*/ 131080) {
-			$$invalidate(24, _loop = items.length >= 3 ? loop : false);
+		if ($$self.$$.dirty[0] & /*items, loop*/ 131073) {
+			$$invalidate(29, _loop = items.length >= 3 ? loop : false);
 		}
 
-		if ($$self.$$.dirty[0] & /*_loop, currentSlideId*/ 18874368) {
+		if ($$self.$$.dirty[0] & /*_loop, currentSlideId*/ 603979776) {
 			$$invalidate(11, isVisiblePrevButton = _loop || currentSlideId > 0);
 		}
 
-		if ($$self.$$.dirty[0] & /*_loop, currentSlideId, items*/ 18874376) {
+		if ($$self.$$.dirty[0] & /*_loop, currentSlideId, items*/ 603979777) {
 			$$invalidate(10, isVisibleNextButton = _loop || currentSlideId < items.length - 1);
 		}
 
 		if ($$self.$$.dirty[0] & /*prevButton*/ 262144) {
 			$$invalidate(9, prevIconStyle = prevButton.type === 'icon'
-			? `width: ${prevButton.size}; height: ${prevButton.size}; border-color: ${prevButton.color};`
+			? `height: ${prevButton.size}; fill: ${prevButton.color};`
 			: '');
 		}
 
-		if ($$self.$$.dirty[0] & /*nextButton*/ 524288) {
-			$$invalidate(8, nextIconStyle = nextButton.type === 'icon'
-			? `width: ${nextButton.size}; height: ${nextButton.size}; border-color: ${nextButton.color};`
+		if ($$self.$$.dirty[0] & /*prevButtonEdgePosition, prevButtonContainerStyle*/ 1572864) {
+			$$invalidate(8, _prevButtonContainerStyle = (() => {
+				const marginLeft = prevButtonEdgePosition.edgeDistance;
+				const marginTop = prevButtonEdgePosition.edgeDirectionOffset;
+				const marginString = `margin:${marginTop} 0 0 ${marginLeft}`;
+				return [...prevButtonContainerStyle.split(';'), marginString].join(';');
+			})());
+		}
+
+		if ($$self.$$.dirty[0] & /*nextButton*/ 2097152) {
+			$$invalidate(7, nextIconStyle = nextButton.type === 'icon'
+			? `height: ${nextButton.size}; fill: ${nextButton.color};`
 			: '');
 		}
 
-		if ($$self.$$.dirty[0] & /*navigationButton*/ 1048576) {
-			$$invalidate(7, navigationItemStyle = `padding: calc(${navigationButton.size} / 2);`);
+		if ($$self.$$.dirty[0] & /*nextButtonEdgePosition, nextButtonContainerStyle*/ 12582912) {
+			$$invalidate(6, _nextButtonContainerStyle = (() => {
+				const marginRight = nextButtonEdgePosition.edgeDistance;
+				const marginTop = nextButtonEdgePosition.edgeDirectionOffset;
+				const marginString = `margin:${marginTop} ${marginRight} 0 0`;
+				return [...nextButtonContainerStyle.split(';'), marginString].join(';');
+			})());
 		}
 
-		if ($$self.$$.dirty[0] & /*navigationButton, currentSlideId*/ 3145728) {
-			$$invalidate(6, getNavigationItemInnerStyle = i => `
+		if ($$self.$$.dirty[0] & /*navigationButton*/ 16777216) {
+			$$invalidate(5, navigationItemStyle = `padding: calc(${navigationButton.size} / 2);`);
+		}
+
+		if ($$self.$$.dirty[0] & /*navigationButton, currentSlideId*/ 83886080) {
+			$$invalidate(4, getNavigationItemInnerStyle = i => `
 width: ${navigationButton.size};
 height: ${navigationButton.size};
 background-color: ${i === currentSlideId
 			? navigationButton.colorActive
 			: navigationButton.color};`);
 		}
+
+		if ($$self.$$.dirty[0] & /*navigationEdgePosition*/ 33554432) {
+			$$invalidate(3, navigationStyle = `margin:0 0 ${navigationEdgePosition.edgeDistance} ${navigationEdgePosition.edgeDirectionOffset}`);
+		}
 	};
 
 	return [
-		prevButtonContainerStyle,
-		nextButtonContainerStyle,
-		navigationStyle,
 		items,
 		containerElement,
 		slideElement,
+		navigationStyle,
 		getNavigationItemInnerStyle,
 		navigationItemStyle,
+		_nextButtonContainerStyle,
 		nextIconStyle,
+		_prevButtonContainerStyle,
 		prevIconStyle,
 		isVisibleNextButton,
 		isVisiblePrevButton,
@@ -7331,8 +7471,13 @@ background-color: ${i === currentSlideId
 		set,
 		loop,
 		prevButton,
+		prevButtonContainerStyle,
+		prevButtonEdgePosition,
 		nextButton,
+		nextButtonContainerStyle,
+		nextButtonEdgePosition,
 		navigationButton,
+		navigationEdgePosition,
 		currentSlideId,
 		slidePosition,
 		transitioning,
@@ -7358,11 +7503,13 @@ class Slide extends SvelteComponent {
 			{
 				loop: 17,
 				prevButton: 18,
-				prevButtonContainerStyle: 0,
-				nextButton: 19,
-				nextButtonContainerStyle: 1,
-				navigationButton: 20,
-				navigationStyle: 2
+				prevButtonContainerStyle: 19,
+				prevButtonEdgePosition: 20,
+				nextButton: 21,
+				nextButtonContainerStyle: 22,
+				nextButtonEdgePosition: 23,
+				navigationButton: 24,
+				navigationEdgePosition: 25
 			},
 			add_css$4,
 			[-1, -1]
@@ -7854,4 +8001,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultFormButtonStyle, DefaultFormRatingButtonType, DefaultFormSelectStyle, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtonTypes, FormRatingButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, applyCss, applyGlobalCss, close, closeAction, closed, collection$1 as collection, create, createApp, createFog, customHandlers, customVariables, destroy, destroyed, ensureModalRoot, finalize, formData, getActionShadowRoot, getCustomHandlers, getCustomVariables, getEvents, getLogs, getState$1 as getState, getStates, getStoreState, getSystem, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setState$1 as setState, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, widget };
+export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultEdgePosition, DefaultFormButtonStyle, DefaultFormRatingButtonType, DefaultFormSelectStyle, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtonTypes, FormRatingButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, applyCss, applyGlobalCss, close, closeAction, closed, collection$1 as collection, create, createApp, createFog, customHandlers, customVariables, destroy, destroyed, ensureModalRoot, finalize, formData, getActionShadowRoot, getCustomHandlers, getCustomVariables, getEvents, getLogs, getState$1 as getState, getStates, getStoreState, getSystem, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setState$1 as setState, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, widget };