@plaidev/karte-action-sdk 1.1.113 → 1.1.114-27923606.791a6dfe

package/dist/index.es.js

@@ -980,6 +980,19 @@ const DefaultListBackground = DefaultListBackgroundNone;
  * @internal
  */
 const ListDirections = ['vertical', 'horizontal'];
+const DefaultSliderButton = {
+    type: 'icon',
+    icon: 'chevron-left',
+    color: '#999',
+    fill: '#999',
+    size: '20px',
+};
+const DefaultSliderNavigationButton = {
+    type: 'circle',
+    size: '8px',
+    color: '#ddd',
+    colorActive: '#666',
+};
 
 function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
     if (direction === 'down' && deltaRate > 0) {
@@ -3519,7 +3532,7 @@ class FlexItem extends SvelteComponent {
 
 /* src/components/RenderText.svelte generated by Svelte v3.53.1 */
 
-function get_each_context$3(ctx, list, i) {
+function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[2] = list[i];
 	return child_ctx;
@@ -3565,7 +3578,7 @@ function create_if_block$1(ctx) {
 }
 
 // (9:0) {#each items as item}
-function create_each_block$3(ctx) {
+function create_each_block$4(ctx) {
 	let show_if;
 	let if_block_anchor;
 
@@ -3614,7 +3627,7 @@ function create_fragment$i(ctx) {
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
+		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
 	}
 
 	return {
@@ -3638,12 +3651,12 @@ function create_fragment$i(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$3(ctx, each_value, i);
+					const child_ctx = get_each_context$4(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$3(child_ctx);
+						each_blocks[i] = create_each_block$4(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
 					}
@@ -5158,7 +5171,7 @@ function add_css$7(target) {
 	append_styles(target, "svelte-1ajmbw1", ".radio-buttons.svelte-1ajmbw1{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%}");
 }
 
-function get_each_context$2(ctx, list, i) {
+function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[7] = list[i];
 	child_ctx[9] = i;
@@ -5166,7 +5179,7 @@ function get_each_context$2(ctx, list, i) {
 }
 
 // (23:2) {#each _options as option, i}
-function create_each_block$2(ctx) {
+function create_each_block$3(ctx) {
 	let label;
 	let input;
 	let t0;
@@ -5226,7 +5239,7 @@ function create_fragment$7(ctx) {
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
 	}
 
 	return {
@@ -5252,12 +5265,12 @@ function create_fragment$7(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$2(ctx, each_value, i);
+					const child_ctx = get_each_context$3(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$2(child_ctx);
+						each_blocks[i] = create_each_block$3(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(div, null);
 					}
@@ -5330,7 +5343,7 @@ function add_css$6(target) {
 	append_styles(target, "svelte-1ajmbw1", ".radio-buttons.svelte-1ajmbw1{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%}");
 }
 
-function get_each_context$1(ctx, list, i) {
+function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[6] = list[i];
 	child_ctx[8] = i;
@@ -5377,7 +5390,7 @@ function create_if_block(ctx) {
 }
 
 // (24:4) {#each _options as option, i}
-function create_each_block$1(ctx) {
+function create_each_block$2(ctx) {
 	let option;
 	let t;
 	let option_value_value;
@@ -5437,7 +5450,7 @@ function create_fragment$6(ctx) {
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
+		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
 	}
 
 	return {
@@ -5470,12 +5483,12 @@ function create_fragment$6(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$1(ctx, each_value, i);
+					const child_ctx = get_each_context$2(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$1(child_ctx);
+						each_blocks[i] = create_each_block$2(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(select, null);
 					}
@@ -5546,7 +5559,7 @@ function add_css$5(target) {
 	append_styles(target, "svelte-3uhiw4", ".check-boxes.svelte-3uhiw4{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%}");
 }
 
-function get_each_context(ctx, list, i) {
+function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[8] = list[i];
 	child_ctx[10] = i;
@@ -5554,7 +5567,7 @@ function get_each_context(ctx, list, i) {
 }
 
 // (30:2) {#each _options as option, i}
-function create_each_block(ctx) {
+function create_each_block$1(ctx) {
 	let label;
 	let input;
 	let t0;
@@ -5614,7 +5627,7 @@ function create_fragment$5(ctx) {
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
 	}
 
 	return {
@@ -5640,12 +5653,12 @@ function create_fragment$5(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context(ctx, each_value, i);
+					const child_ctx = get_each_context$1(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i] = create_each_block$1(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(div, null);
 					}
@@ -5726,64 +5739,165 @@ class FormCheckBoxes extends SvelteComponent {
 /* src/components/Slider.svelte generated by Svelte v3.53.1 */
 
 function add_css$4(target) {
-	append_styles(target, "svelte-16jk4x2", ".root.svelte-16jk4x2{width:100%;height:100%;position:relative}.container.svelte-16jk4x2{width:100%;height:100%;position:relative;overflow:hidden}.slide.svelte-16jk4x2{height:100%;position:absolute;display:flex}.transition.svelte-16jk4x2{transition:left 0.2s cubic-bezier(.04,.67,.53,.96)}.item.svelte-16jk4x2{height:100%;flex:none}.prev-button.svelte-16jk4x2,.next-button.svelte-16jk4x2{height:50px;top:calc(50% - 25px);position:absolute}.prev-button.svelte-16jk4x2{left:8px}.next-button.svelte-16jk4x2{right:8px}");
+	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%}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[50] = list[i];
+	child_ctx[52] = i;
+	return child_ctx;
+}
+
+// (327:4) {#each items as _, i}
+function create_each_block(ctx) {
+	let div1;
+	let div0;
+	let div0_style_value;
+	let t;
+	let mounted;
+	let dispose;
+
+	function click_handler() {
+		return /*click_handler*/ ctx[26](/*i*/ ctx[52]);
+	}
+
+	return {
+		c() {
+			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[52]));
+			attr(div1, "class", "navigation-item svelte-105wdod");
+			attr(div1, "style", /*navigationItemStyle*/ ctx[7]);
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, div0);
+			append(div1, t);
+
+			if (!mounted) {
+				dispose = listen(div1, "click", click_handler);
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (dirty[0] & /*getNavigationItemInnerStyle*/ 64 && div0_style_value !== (div0_style_value = /*getNavigationItemInnerStyle*/ ctx[6](/*i*/ ctx[52]))) {
+				attr(div0, "style", div0_style_value);
+			}
+
+			if (dirty[0] & /*navigationItemStyle*/ 128) {
+				attr(div1, "style", /*navigationItemStyle*/ ctx[7]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div1);
+			mounted = false;
+			dispose();
+		}
+	};
 }
 
 function create_fragment$4(ctx) {
-	let div4;
+	let div9;
 	let div1;
 	let div0;
 	let div0_class_value;
 	let t0;
+	let div4;
+	let div3;
 	let div2;
+	let t1;
+	let div7;
+	let div6;
+	let div5;
 	let t2;
-	let div3;
+	let div8;
 	let current;
 	let mounted;
 	let dispose;
-	const default_slot_template = /*#slots*/ ctx[11].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[10], null);
+	const default_slot_template = /*#slots*/ ctx[23].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[22], null);
+	let each_value = /*items*/ ctx[3];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
 
 	return {
 		c() {
-			div4 = element("div");
+			div9 = element("div");
 			div1 = element("div");
 			div0 = element("div");
 			if (default_slot) default_slot.c();
 			t0 = space();
+			div4 = element("div");
+			div3 = element("div");
 			div2 = element("div");
-			div2.textContent = "<";
+			t1 = space();
+			div7 = element("div");
+			div6 = element("div");
+			div5 = element("div");
 			t2 = space();
-			div3 = element("div");
-			div3.textContent = ">";
-			attr(div0, "class", div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[2]) + " svelte-16jk4x2"));
-			attr(div0, "style", /*slideStyle*/ ctx[3]);
-			attr(div1, "class", "container svelte-16jk4x2");
-			attr(div2, "class", "prev-button svelte-16jk4x2");
-			attr(div3, "class", "next-button svelte-16jk4x2");
-			attr(div4, "class", "root svelte-16jk4x2");
+			div8 = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			attr(div0, "class", div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[10]) + " svelte-105wdod"));
+			attr(div0, "style", /*slideStyle*/ ctx[11]);
+			attr(div1, "class", "container svelte-105wdod");
+			attr(div2, "class", "prev-icon svelte-105wdod");
+			attr(div2, "style", /*prevIconStyle*/ ctx[9]);
+			attr(div3, "class", "button-container svelte-105wdod");
+			attr(div3, "style", /*prevButtonContainerStyle*/ ctx[0]);
+			attr(div4, "class", "prev-button svelte-105wdod");
+			attr(div5, "class", "next-icon svelte-105wdod");
+			attr(div5, "style", /*nextIconStyle*/ ctx[8]);
+			attr(div6, "class", "button-container svelte-105wdod");
+			attr(div6, "style", /*nextButtonContainerStyle*/ ctx[1]);
+			attr(div7, "class", "next-button svelte-105wdod");
+			attr(div8, "class", "navigation svelte-105wdod");
+			attr(div8, "style", /*navigationStyle*/ ctx[2]);
+			attr(div9, "class", "root svelte-105wdod");
 		},
 		m(target, anchor) {
-			insert(target, div4, anchor);
-			append(div4, div1);
+			insert(target, div9, anchor);
+			append(div9, div1);
 			append(div1, div0);
 
 			if (default_slot) {
 				default_slot.m(div0, null);
 			}
 
-			/*div0_binding*/ ctx[12](div0);
-			/*div1_binding*/ ctx[13](div1);
-			append(div4, t0);
-			append(div4, div2);
-			append(div4, t2);
+			/*div0_binding*/ ctx[24](div0);
+			/*div1_binding*/ ctx[25](div1);
+			append(div9, t0);
+			append(div9, div4);
 			append(div4, div3);
+			append(div3, div2);
+			append(div9, t1);
+			append(div9, div7);
+			append(div7, div6);
+			append(div6, div5);
+			append(div9, t2);
+			append(div9, div8);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div8, null);
+			}
+
 			current = true;
 
 			if (!mounted) {
 				dispose = [
-					listen(div2, "click", /*prev*/ ctx[4]),
-					listen(div3, "click", /*next*/ ctx[5])
+					listen(div4, "click", /*prev*/ ctx[12]),
+					listen(div7, "click", /*next*/ ctx[13])
 				];
 
 				mounted = true;
@@ -5791,26 +5905,69 @@ function create_fragment$4(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 1024)) {
+				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 4194304)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[10],
+						/*$$scope*/ ctx[22],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[10])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[10], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[22])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[22], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty[0] & /*slideClass*/ 4 && div0_class_value !== (div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[2]) + " svelte-16jk4x2"))) {
+			if (!current || dirty[0] & /*slideClass*/ 1024 && div0_class_value !== (div0_class_value = "" + (null_to_empty(/*slideClass*/ ctx[10]) + " svelte-105wdod"))) {
 				attr(div0, "class", div0_class_value);
 			}
 
-			if (!current || dirty[0] & /*slideStyle*/ 8) {
-				attr(div0, "style", /*slideStyle*/ ctx[3]);
+			if (!current || dirty[0] & /*slideStyle*/ 2048) {
+				attr(div0, "style", /*slideStyle*/ ctx[11]);
+			}
+
+			if (!current || dirty[0] & /*prevIconStyle*/ 512) {
+				attr(div2, "style", /*prevIconStyle*/ ctx[9]);
+			}
+
+			if (!current || dirty[0] & /*prevButtonContainerStyle*/ 1) {
+				attr(div3, "style", /*prevButtonContainerStyle*/ ctx[0]);
+			}
+
+			if (!current || dirty[0] & /*nextIconStyle*/ 256) {
+				attr(div5, "style", /*nextIconStyle*/ ctx[8]);
+			}
+
+			if (!current || dirty[0] & /*nextButtonContainerStyle*/ 2) {
+				attr(div6, "style", /*nextButtonContainerStyle*/ ctx[1]);
+			}
+
+			if (dirty[0] & /*navigationItemStyle, set, getNavigationItemInnerStyle, items*/ 16584) {
+				each_value = /*items*/ ctx[3];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(div8, null);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+
+			if (!current || dirty[0] & /*navigationStyle*/ 4) {
+				attr(div8, "style", /*navigationStyle*/ ctx[2]);
 			}
 		},
 		i(local) {
@@ -5823,10 +5980,11 @@ function create_fragment$4(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div4);
+			if (detaching) detach(div9);
 			if (default_slot) default_slot.d(detaching);
-			/*div0_binding*/ ctx[12](null);
-			/*div1_binding*/ ctx[13](null);
+			/*div0_binding*/ ctx[24](null);
+			/*div1_binding*/ ctx[25](null);
+			destroy_each(each_blocks, detaching);
 			mounted = false;
 			run_all(dispose);
 		}
@@ -5849,18 +6007,52 @@ function instance$4($$self, $$props, $$invalidate) {
 	let slideStyle;
 	let slideClass;
 	let _loop;
+	let prevIconStyle;
+	let nextIconStyle;
+	let navigationItemStyle;
+	let getNavigationItemInnerStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
+	let { loop = false } = $$props;
+
+	let { prevButton = {
+		type: 'icon',
+		icon: 'chevron-left',
+		color: '#666',
+		fill: '#666',
+		size: '20px'
+	} } = $$props;
+
+	let { prevButtonContainerStyle = 'height: 48px; width: 24px; margin: 0 0 0 8px;' } = $$props;
+
+	let { nextButton = {
+		type: 'icon',
+		icon: 'chevron-right',
+		color: '#666',
+		fill: '#666',
+		size: '20px'
+	} } = $$props;
+
+	let { nextButtonContainerStyle = 'height: 48px; width: 24px; margin: 0 8px 0 0;' } = $$props;
+
+	let { navigationButton = {
+		type: 'circle',
+		size: '8px',
+		color: '#ddd',
+		colorActive: '#666'
+	} } = $$props;
+
+	let { navigationStyle = 'margin: 0 0 8px 0' } = $$props;
 	let items = [];
 	const dispatch = createEventDispatcher();
 
 	setContext('SLIDE', {
 		registerItem: ({ onBeforeSlide, onMount, onResize }) => {
 			const id = new Date().getTime().toString();
-			$$invalidate(7, items = [...items, { id, onBeforeSlide, onMount, onResize }]);
+			$$invalidate(3, items = [...items, { id, onBeforeSlide, onMount, onResize }]);
 			return id;
 		},
 		unregisterItem: id => {
-			$$invalidate(7, items = items.filter(item => item.id !== id));
+			$$invalidate(3, items = items.filter(item => item.id !== id));
 		}
 	});
 
@@ -5887,7 +6079,7 @@ function instance$4($$self, $$props, $$invalidate) {
 						onBeforeSlide({ shiftCount, index, length: items.length });
 					});
 
-					$$invalidate(8, slidePosition = slidePosition + containerWidth * (calcPositionIndex(shiftCount, currentSlideId, items.length) - calcPositionIndex(previousShiftCount, currentSlideId, items.length)));
+					$$invalidate(20, slidePosition = slidePosition + containerWidth * (calcPositionIndex(shiftCount, currentSlideId, items.length) - calcPositionIndex(previousShiftCount, currentSlideId, items.length)));
 					previousShiftCount = shiftCount;
 					resolve();
 				});
@@ -5898,8 +6090,8 @@ function instance$4($$self, $$props, $$invalidate) {
 		if (transitioning) {
 			const slideRect = slideElement.getBoundingClientRect();
 			const containerRect = containerElement.getBoundingClientRect();
-			$$invalidate(9, transitioning = false);
-			$$invalidate(8, slidePosition = slideRect.x - containerRect.x);
+			$$invalidate(21, transitioning = false);
+			$$invalidate(20, slidePosition = slideRect.x - containerRect.x);
 		}
 	}
 
@@ -5919,10 +6111,10 @@ function instance$4($$self, $$props, $$invalidate) {
 				}
 			}
 
-			$$invalidate(9, transitioning = true);
-			$$invalidate(8, slidePosition = containerWidth * calcPositionIndex(shiftCount, slideIndex, items.length));
+			$$invalidate(21, transitioning = true);
+			$$invalidate(20, slidePosition = containerWidth * calcPositionIndex(shiftCount, slideIndex, items.length));
 			dispatch('change', { nextIndex: slideIndex });
-			currentSlideId = slideIndex;
+			$$invalidate(19, currentSlideId = slideIndex);
 		});
 	}
 
@@ -5944,7 +6136,7 @@ function instance$4($$self, $$props, $$invalidate) {
 			const updatedSlidePosition = slidePosition + dx;
 
 			window.requestAnimationFrame(() => {
-				$$invalidate(8, slidePosition = updatedSlidePosition);
+				$$invalidate(20, slidePosition = updatedSlidePosition);
 			});
 		}
 
@@ -5952,6 +6144,7 @@ function instance$4($$self, $$props, $$invalidate) {
 	}
 
 	function handleResize() {
+		if (!containerElement) return;
 		containerWidth = containerElement.clientWidth;
 
 		items.forEach((item, index) => {
@@ -5963,7 +6156,7 @@ function instance$4($$self, $$props, $$invalidate) {
 			});
 		});
 
-		$$invalidate(8, slidePosition = containerWidth * calcPositionIndex(shiftCount, currentSlideId, items.length));
+		$$invalidate(20, slidePosition = containerWidth * calcPositionIndex(shiftCount, currentSlideId, items.length));
 	}
 
 	function handleMoveEnd() {
@@ -6016,7 +6209,7 @@ function instance$4($$self, $$props, $$invalidate) {
 	}
 
 	function handleTransitionEnd() {
-		$$invalidate(9, transitioning = false);
+		$$invalidate(21, transitioning = false);
 		fixSlidePosition();
 	}
 
@@ -6027,7 +6220,7 @@ function instance$4($$self, $$props, $$invalidate) {
 			item.onMount({ containerElement });
 		});
 
-		currentSlideId = 0;
+		$$invalidate(19, currentSlideId = 0);
 
 		if (_loop) {
 			await fixSlidePosition();
@@ -6076,112 +6269,200 @@ function instance$4($$self, $$props, $$invalidate) {
 		setIndex(currentSlideId + 1);
 	}
 
-	let { loop = false } = $$props;
+	async function set(index) {
+		await fixSlidePosition();
+		setIndex(index);
+	}
 
 	function div0_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			slideElement = $$value;
-			$$invalidate(1, slideElement);
+			$$invalidate(5, slideElement);
 		});
 	}
 
 	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			containerElement = $$value;
-			$$invalidate(0, containerElement);
+			$$invalidate(4, containerElement);
 		});
 	}
 
+	const click_handler = i => set(i);
+
 	$$self.$$set = $$props => {
-		if ('loop' in $$props) $$invalidate(6, loop = $$props.loop);
-		if ('$$scope' in $$props) $$invalidate(10, $$scope = $$props.$$scope);
+		if ('loop' in $$props) $$invalidate(15, loop = $$props.loop);
+		if ('prevButton' in $$props) $$invalidate(16, prevButton = $$props.prevButton);
+		if ('prevButtonContainerStyle' in $$props) $$invalidate(0, prevButtonContainerStyle = $$props.prevButtonContainerStyle);
+		if ('nextButton' in $$props) $$invalidate(17, nextButton = $$props.nextButton);
+		if ('nextButtonContainerStyle' in $$props) $$invalidate(1, nextButtonContainerStyle = $$props.nextButtonContainerStyle);
+		if ('navigationButton' in $$props) $$invalidate(18, navigationButton = $$props.navigationButton);
+		if ('navigationStyle' in $$props) $$invalidate(2, navigationStyle = $$props.navigationStyle);
+		if ('$$scope' in $$props) $$invalidate(22, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*slidePosition*/ 256) {
-			$$invalidate(3, slideStyle = slidePosition != null ? `left: ${slidePosition}px;` : '');
+		if ($$self.$$.dirty[0] & /*slidePosition*/ 1048576) {
+			$$invalidate(11, slideStyle = slidePosition != null ? `left: ${slidePosition}px;` : '');
 		}
 
-		if ($$self.$$.dirty[0] & /*transitioning*/ 512) {
-			$$invalidate(2, slideClass = ['slide', transitioning ? 'transition' : ''].join(' '));
+		if ($$self.$$.dirty[0] & /*transitioning*/ 2097152) {
+			$$invalidate(10, slideClass = ['slide', transitioning ? 'transition' : ''].join(' '));
 		}
 
-		if ($$self.$$.dirty[0] & /*items, loop*/ 192) {
+		if ($$self.$$.dirty[0] & /*items, loop*/ 32776) {
 			_loop = items.length >= 3 ? loop : false;
 		}
+
+		if ($$self.$$.dirty[0] & /*prevButton*/ 65536) {
+			$$invalidate(9, prevIconStyle = prevButton.type === 'icon'
+			? `width: ${prevButton.size}; height: ${prevButton.size}; border-color: ${prevButton.color};`
+			: '');
+		}
+
+		if ($$self.$$.dirty[0] & /*nextButton*/ 131072) {
+			$$invalidate(8, nextIconStyle = nextButton.type === 'icon'
+			? `width: ${nextButton.size}; height: ${nextButton.size}; border-color: ${nextButton.color};`
+			: '');
+		}
+
+		if ($$self.$$.dirty[0] & /*navigationButton*/ 262144) {
+			$$invalidate(7, navigationItemStyle = `padding: calc(${navigationButton.size} / 2);`);
+		}
+
+		if ($$self.$$.dirty[0] & /*navigationButton, currentSlideId*/ 786432) {
+			$$invalidate(6, getNavigationItemInnerStyle = i => `
+width: ${navigationButton.size};
+height: ${navigationButton.size};
+background-color: ${i === currentSlideId
+			? navigationButton.colorActive
+			: navigationButton.color};`);
+		}
 	};
 
 	return [
+		prevButtonContainerStyle,
+		nextButtonContainerStyle,
+		navigationStyle,
+		items,
 		containerElement,
 		slideElement,
+		getNavigationItemInnerStyle,
+		navigationItemStyle,
+		nextIconStyle,
+		prevIconStyle,
 		slideClass,
 		slideStyle,
 		prev,
 		next,
+		set,
 		loop,
-		items,
+		prevButton,
+		nextButton,
+		navigationButton,
+		currentSlideId,
 		slidePosition,
 		transitioning,
 		$$scope,
 		slots,
 		div0_binding,
-		div1_binding
+		div1_binding,
+		click_handler
 	];
 }
 
 class Slider extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$4, create_fragment$4, safe_not_equal, { loop: 6 }, add_css$4, [-1, -1]);
+
+		init(
+			this,
+			options,
+			instance$4,
+			create_fragment$4,
+			safe_not_equal,
+			{
+				loop: 15,
+				prevButton: 16,
+				prevButtonContainerStyle: 0,
+				nextButton: 17,
+				nextButtonContainerStyle: 1,
+				navigationButton: 18,
+				navigationStyle: 2
+			},
+			add_css$4,
+			[-1, -1]
+		);
 	}
 }
 
 /* src/components/SliderItem.svelte generated by Svelte v3.53.1 */
 
 function add_css$3(target) {
-	append_styles(target, "svelte-1c77iik", ".item.svelte-1c77iik{height:100%;flex:none}.item.svelte-1c77iik img{user-select:none;-webkit-user-drag:none}");
+	append_styles(target, "svelte-xzo1un", ".item.svelte-xzo1un{height:100%;flex:none;position:relative}.item.svelte-xzo1un img{user-select:none;-webkit-user-drag:none}.item-inner.svelte-xzo1un{position:absolute;inset:0}");
 }
 
 function create_fragment$3(ctx) {
-	let div;
+	let div1;
+	let div0;
 	let current;
-	const default_slot_template = /*#slots*/ ctx[4].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[3], null);
+	let mounted;
+	let dispose;
+	const default_slot_template = /*#slots*/ ctx[8].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[7], null);
 
 	return {
 		c() {
-			div = element("div");
+			div1 = element("div");
+			div0 = element("div");
 			if (default_slot) default_slot.c();
-			attr(div, "class", "item svelte-1c77iik");
-			attr(div, "style", /*itemStyle*/ ctx[0]);
+			attr(div0, "class", "item-inner svelte-xzo1un");
+			attr(div0, "style", /*_style*/ ctx[0]);
+			attr(div1, "class", "item svelte-xzo1un");
+			attr(div1, "style", /*itemStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
+			insert(target, div1, anchor);
+			append(div1, div0);
 
 			if (default_slot) {
-				default_slot.m(div, null);
+				default_slot.m(div0, null);
 			}
 
 			current = true;
+
+			if (!mounted) {
+				dispose = listen(div1, "click", function () {
+					if (is_function(/*click*/ ctx[2])) /*click*/ ctx[2].apply(this, arguments);
+				});
+
+				mounted = true;
+			}
 		},
-		p(ctx, [dirty]) {
+		p(new_ctx, [dirty]) {
+			ctx = new_ctx;
+
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 8)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 128)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[3],
+						/*$$scope*/ ctx[7],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[3])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[3], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[7])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[7], dirty, null),
 						null
 					);
 				}
 			}
 
-			if (!current || dirty & /*itemStyle*/ 1) {
-				attr(div, "style", /*itemStyle*/ ctx[0]);
+			if (!current || dirty & /*_style*/ 1) {
+				attr(div0, "style", /*_style*/ ctx[0]);
+			}
+
+			if (!current || dirty & /*itemStyle*/ 2) {
+				attr(div1, "style", /*itemStyle*/ ctx[1]);
 			}
 		},
 		i(local) {
@@ -6194,24 +6475,27 @@ function create_fragment$3(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) detach(div1);
 			if (default_slot) default_slot.d(detaching);
+			mounted = false;
+			dispose();
 		}
 	};
 }
 
 function instance$3($$self, $$props, $$invalidate) {
+	let click;
 	let itemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	const { registerItem, unregisterItem } = getContext('SLIDE');
 
 	const id = registerItem({
 		onMount({ containerElement }) {
-			$$invalidate(1, itemWidth = containerElement.clientWidth);
+			$$invalidate(5, itemWidth = containerElement.clientWidth);
 		},
 		// TODO: onBeforeSlideと重複するロジックをまとめる
 		onResize({ containerElement, shiftCount, index, length }) {
-			$$invalidate(1, itemWidth = containerElement.clientWidth);
+			$$invalidate(5, itemWidth = containerElement.clientWidth);
 			let fixedShiftCount;
 
 			if (index - shiftCount < 0) {
@@ -6222,7 +6506,7 @@ function instance$3($$self, $$props, $$invalidate) {
 				fixedShiftCount = shiftCount;
 			}
 
-			$$invalidate(2, itemTransform = -fixedShiftCount * (itemWidth ?? 0));
+			$$invalidate(6, itemTransform = -fixedShiftCount * (itemWidth ?? 0));
 		},
 		onBeforeSlide({ shiftCount, index, length }) {
 			let fixedShiftCount;
@@ -6235,7 +6519,7 @@ function instance$3($$self, $$props, $$invalidate) {
 				fixedShiftCount = shiftCount;
 			}
 
-			$$invalidate(2, itemTransform = -fixedShiftCount * (itemWidth ?? 0));
+			$$invalidate(6, itemTransform = -fixedShiftCount * (itemWidth ?? 0));
 		}
 	});
 
@@ -6243,28 +6527,54 @@ function instance$3($$self, $$props, $$invalidate) {
 		unregisterItem(id);
 	});
 
+	let { onClick = { operation: 'none', args: [] } } = $$props;
+	let { clickEventName = '' } = $$props;
+	let { _style = 'cursor: ' } = $$props;
 	let itemWidth = null;
 	let itemTransform = 0;
 
 	$$self.$$set = $$props => {
-		if ('$$scope' in $$props) $$invalidate(3, $$scope = $$props.$$scope);
+		if ('onClick' in $$props) $$invalidate(3, onClick = $$props.onClick);
+		if ('clickEventName' in $$props) $$invalidate(4, clickEventName = $$props.clickEventName);
+		if ('_style' in $$props) $$invalidate(0, _style = $$props._style);
+		if ('$$scope' in $$props) $$invalidate(7, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*itemWidth, itemTransform*/ 6) {
-			$$invalidate(0, itemStyle = itemWidth != null
+		if ($$self.$$.dirty & /*clickEventName, onClick*/ 24) {
+			$$invalidate(2, click = () => {
+				if (clickEventName) {
+					send_event(clickEventName);
+				}
+
+				execOnClickOperation(onClick);
+			});
+		}
+
+		if ($$self.$$.dirty & /*itemWidth, itemTransform*/ 96) {
+			$$invalidate(1, itemStyle = itemWidth != null
 			? `width: ${itemWidth}px; transform: translateX(${itemTransform}px);`
 			: '');
 		}
 	};
 
-	return [itemStyle, itemWidth, itemTransform, $$scope, slots];
+	return [
+		_style,
+		itemStyle,
+		click,
+		onClick,
+		clickEventName,
+		itemWidth,
+		itemTransform,
+		$$scope,
+		slots
+	];
 }
 
 class SliderItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$3, create_fragment$3, safe_not_equal, {}, add_css$3);
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$3);
 	}
 }
 
@@ -6609,4 +6919,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, ALL_ACTION_SHORTEN_ID, Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormButton, FormCheckBoxes, FormOperationOptions, FormRadioButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_ACTION_SHORTEN_ID, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slider, SliderItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, actionId, actionSetting, addState, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection$1 as collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, formData, getActionSetting, getActionShadowRoot, getCustomHandlers, getCustomVariables, getInternalHandlers, getMarginStyle, getPositionStyle, getState$1 as getState, getStates, getStoreState, getSystem, getTransform, h, handleFocus, handleKeydown, handleState, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isClosed, isDestroyed, isOpened, isPreview, isStopped, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, randStr, resetActionSetting, runScript, send_event, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setDestroyed, setInternalHandlers, setMaximumZindex, setOpened, setPreviousFocus, setState$1 as setState, setStopped, setSystem, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, system, toBr, updateCustomHandlers, updateCustomVariables, updateInternalHandlers, widget };
+export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, ALL_ACTION_SHORTEN_ID, Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSliderButton, DefaultSliderNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormButton, FormCheckBoxes, FormOperationOptions, FormRadioButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_ACTION_SHORTEN_ID, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slider, SliderItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, actionId, actionSetting, addState, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection$1 as collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, formData, getActionSetting, getActionShadowRoot, getCustomHandlers, getCustomVariables, getInternalHandlers, getMarginStyle, getPositionStyle, getState$1 as getState, getStates, getStoreState, getSystem, getTransform, h, handleFocus, handleKeydown, handleState, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isClosed, isDestroyed, isOpened, isPreview, isStopped, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, randStr, resetActionSetting, runScript, send_event, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setDestroyed, setInternalHandlers, setMaximumZindex, setOpened, setPreviousFocus, setState$1 as setState, setStopped, setSystem, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, system, toBr, updateCustomHandlers, updateCustomVariables, updateInternalHandlers, widget };