@plaidev/karte-action-sdk 1.1.270-29410070.b86a3f94e → 1.1.270-29419384.246a50882

package/dist/index.es.js

@@ -5,12 +5,17 @@ import { cubicOut, elasticOut, linear } from "svelte/easing";
 
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
-var __export = (all) => {
+var __export = (all, symbols) => {
 	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
 	return target;
 };
 
@@ -188,17 +193,13 @@ function onScroll(rate, fn) {
 			html.scrollHeight,
 			html.clientHeight
 		]);
-		const viewHeight = Math.min(...[html.clientHeight, body.clientHeight]);
-		const scrollRate = (scrollTop + viewHeight) / pageHeight;
+		const scrollRate = (scrollTop + Math.min(...[html.clientHeight, body.clientHeight])) / pageHeight;
 		contexts.forEach((ctx) => {
 			ctx.scrollRate = scrollRate;
 			ctx.deltaRate = ctx.scrollRate - ctx.previousRate;
 			ctx.previousRate = ctx.scrollRate;
 			ctx.scrollTop = scrollTop;
-			if (canCall(ctx)) {
-				const repeat = !!_fn(Object.assign({ direction: direction(ctx) }, ctx));
-				updateStates(ctx, repeat);
-			}
+			if (canCall(ctx)) updateStates(ctx, !!_fn(Object.assign({ direction: direction(ctx) }, ctx)));
 		});
 	};
 	window.addEventListener("scroll", onScroll$1);
@@ -1426,6 +1427,9 @@ function dispatchDestroyEvent() {
 
 //#endregion
 //#region src/display-logic.ts
+/**
+* モーダル(ポップアップ)のロジックを管理する
+*/
 function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
 	if (direction === "down" && deltaRate > 0) downFn();
 	else if (condition && direction === "up" && deltaRate < 0) upFn();
@@ -1559,6 +1563,9 @@ function checkAndDo(checkFn, fn, ...conditionFns) {
 
 //#endregion
 //#region src/collection.ts
+/**
+* アクションテーブルに関連するコードの管理
+*/
 const DEFAULT_COLLECTION_ENDPOINT = "https://action-table.karte.io/collection";
 /**
 * アクションテーブルを管理するメソッドを取得する
@@ -1752,6 +1759,11 @@ function initActionTable(localVariablesQuery) {
 
 //#endregion
 //#region src/modal.tsx
+/**
+* モーダル(ポップアップ)に関連するコードの管理
+*
+* アクションのShow, Close, ChangeStateの状態はここで管理する。
+*/
 /** @internal */
 const handleState = (event) => {
 	if (event.detail.actionId === actionId || event.detail.actionId === ALL_ACTION_ID) {
@@ -1970,8 +1982,7 @@ function createModal(App, options = {
 		return NOOP;
 	};
 	const handleClose = (event) => {
-		const trigger = event?.detail?.trigger ? event.detail.trigger : "none";
-		close$2(trigger);
+		close$2(event?.detail?.trigger ? event.detail.trigger : "none");
 	};
 	const show$2 = async (trigger = "none") => {
 		if (app) return;
@@ -1992,21 +2003,21 @@ function createModal(App, options = {
 		setOpened(true);
 		setClosed(false);
 		if (app) return;
-		const props = {
+		app = new App({
 			target: ensureActionRoot$1(true),
 			hydrate: false,
 			props: {
 				send: options.send,
 				publish: options.publish,
 				data,
-				onShow: (props$1) => {
+				onShow: (props) => {
 					const { onShowHandlers } = getInternalHandlers();
 					if (onShowHandlers) onShowHandlers.forEach((h$1) => {
 						console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify({ name: "onShow" })}`);
-						h$1(props$1);
+						h$1(props);
 					});
 				},
-				onChangeState: (props$1, newState) => {
+				onChangeState: (props, newState) => {
 					const { onChangeStateHandlers } = getInternalHandlers();
 					if (onChangeStateHandlers) onChangeStateHandlers.forEach((h$1) => {
 						const actionHookLog = {
@@ -2014,18 +2025,16 @@ function createModal(App, options = {
 							values: { newState }
 						};
 						console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
-						h$1(props$1, newState);
+						h$1(props, newState);
 					});
 					const { onChangeStateHandlers: onChangeWidgetStateHandlers } = getWidgetHandlers();
-					if (onChangeWidgetStateHandlers) onChangeStateHandlers.forEach((h$1) => h$1(props$1, newState));
+					if (onChangeWidgetStateHandlers) onChangeStateHandlers.forEach((h$1) => h$1(props, newState));
 				}
 			}
-		};
-		app = new App(props);
+		});
 	};
 	const handleShow = (event) => {
-		const trigger = event?.detail?.trigger ? event.detail.trigger : "none";
-		show$2(trigger);
+		show$2(event?.detail?.trigger ? event.detail.trigger : "none");
 	};
 	const currying = (conditionFn, options$1) => (fn) => conditionFn(options$1.props, fn);
 	const autoShow = () => {
@@ -2208,6 +2217,11 @@ function createFog({ color = "#000", opacity = "50%", zIndex = 999, onclick }) {
 //#endregion
 //#region src/modal.svelte5.tsx
 /**
+* モーダル(ポップアップ)に関連するコードの管理
+*
+* アクションのShow, Close, ChangeStateの状態はここで管理する。
+*/
+/**
 * アクションが表示 (show) された後にフックする関数
 *
 * @param fn - 呼び出されるフック関数
@@ -2476,6 +2490,9 @@ function createFog$1({ color = "#000", opacity = "50%", zIndex = 999, onclick })
 
 //#endregion
 //#region src/script.ts
+/**
+* スクリプト接客が利用するコードの管理
+*/
 /** @internal */
 async function runScript$1(options = {
 	send: () => {},
@@ -2579,6 +2596,11 @@ async function loadGlobalStyle(href) {
 
 //#endregion
 //#region src/action.ts
+/**
+* Edgeが起動するアクションに関連するコードを管理する
+*
+* アクションのCreate, Destroyの状態はここで管理する。
+*/
 const emptyOptions = {
 	send: () => {},
 	publish: () => {},
@@ -2765,8 +2787,7 @@ function validateFormData(formData$1, statePath) {
 /** @internal */
 const getValuesAreValidReadable = (statePath) => ({ subscribe(callback$5) {
 	return formData.subscribe((formData$1) => identifyFormData.subscribe((identifyFormData$1) => {
-		const valuesAreValid = validateFormData(formData$1, statePath) && validateFormData(identifyFormData$1, statePath);
-		callback$5(valuesAreValid);
+		callback$5(validateFormData(formData$1, statePath) && validateFormData(identifyFormData$1, statePath));
 	}));
 } });
 function createAnswerValue$1(value) {
@@ -2789,8 +2810,7 @@ function formDataToEventValues$1(campaignId, formData$1) {
 }
 function formDataToIdentifyEventValues$1(formData$1) {
 	return Object.fromEntries(Object.entries(formData$1).map(([name, dataItem]) => {
-		const value = dataItem.value;
-		return [name, value];
+		return [name, dataItem.value];
 	}));
 }
 /** @internal */
@@ -2911,6 +2931,9 @@ function sendAnswers() {
 
 //#endregion
 //#region src/widget.ts
+/**
+* エディタv1のWidget API 互換のインターフェース
+*/
 var widget_exports = /* @__PURE__ */ __export({
 	collection: () => collection$1,
 	getState: () => getState$1,
@@ -3841,10 +3864,12 @@ function onSubmitForm(fn) {
 
 //#endregion
 //#region src/functions.ts
+/**
+* モーダル(ポップアップ)のコンポーネントが利用するコードの管理
+*/
 function _moveTo(to) {
-	const currentState = getState();
 	dispatchActionEvent(ACTION_CHANGE_STATE_EVENT, { detail: {
-		from: currentState,
+		from: getState(),
 		to,
 		actionId
 	} });
@@ -4013,36 +4038,12 @@ const haveFunction = (onClickOperation) => {
 function getAnimation(animation) {
 	switch (animation.type) {
 		case "fade": return `opacity: ${animation.progress}`;
-		case "bounce": {
-			const translateX = animation.x;
-			const translateY = animation.y;
-			return `transform: translate3d(${translateX}%, ${translateY}%, 0) scale(${animation.progress});`;
-		}
-		case "slide-down": {
-			const translateX = animation.x;
-			const translateY = animation.y - 100 * (1 - animation.progress);
-			return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-		}
-		case "slide-up": {
-			const translateX = animation.x;
-			const translateY = animation.y + 100 * (1 - animation.progress);
-			return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-		}
-		case "slide-left": {
-			const translateX = animation.x + 100 * (1 - animation.progress);
-			const translateY = animation.y;
-			return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-		}
-		case "slide-right": {
-			const translateX = animation.x - 100 * (1 - animation.progress);
-			const translateY = animation.y;
-			return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
-		}
-		case "none": {
-			const translateX = animation.x;
-			const translateY = animation.y;
-			return `transform:  translate3d(${translateX}%, ${translateY}%, 0);`;
-		}
+		case "bounce": return `transform: translate3d(${animation.x}%, ${animation.y}%, 0) scale(${animation.progress});`;
+		case "slide-down": return `transform: translate3d(${animation.x}%, ${animation.y - 100 * (1 - animation.progress)}%, 0);`;
+		case "slide-up": return `transform: translate3d(${animation.x}%, ${animation.y + 100 * (1 - animation.progress)}%, 0);`;
+		case "slide-left": return `transform: translate3d(${animation.x + 100 * (1 - animation.progress)}%, ${animation.y}%, 0);`;
+		case "slide-right": return `transform: translate3d(${animation.x - 100 * (1 - animation.progress)}%, ${animation.y}%, 0);`;
+		case "none": return `transform:  translate3d(${animation.x}%, ${animation.y}%, 0);`;
 		default:
 			console.warn(`[action-sdk] invalid '${animation}', so we use 'transform: none' instead`);
 			return "transform: none";
@@ -4181,6 +4182,10 @@ var BackgroundOverlay_default$1 = BackgroundOverlay$1;
 
 //#endregion
 //#region src/enhancedStopPropagation.ts
+/**
+* data属性とカスタムのイベントハンドラによるstopPropagation。
+* デフォルトのstopPropagationだと伝播先のpreventDefaultも無効化されてしまうため、それの対策。
+*/
 function createDataAttrKey(eventName) {
 	return `data-stop-propagation-${eventName}-${actionId}`;
 }
@@ -5112,10 +5117,7 @@ function instance$103($$self, $$props, $$invalidate) {
 			let elasticStyle = ElasticityStyle[isPreview() ? "none" : elasticity];
 			if (!useBreakPoint) modalStyles.add(elasticStyle);
 			DEVICE_IDS.forEach((deviceId) => {
-				if (!isPreview() && useBreakPoint) {
-					const elasticityWithBp = breakPoint[deviceId]?.elasticity;
-					elasticStyle = ElasticityStyle[elasticityWithBp];
-				}
+				if (!isPreview() && useBreakPoint) elasticStyle = ElasticityStyle[breakPoint[deviceId]?.elasticity];
 				const elasticityVariables = stringifyStyleObj(formatObjectKey({
 					obj: parseStyle(elasticStyle),
 					prefix: "--modal-bp-",
@@ -6475,12 +6477,11 @@ function instance$93($$self, $$props, $$invalidate) {
 	let domRef = null;
 	function sendMovieEvent(event_name, values = {}) {
 		if (!sendEvent) return;
-		const sentValues = {
+		send_event(event_name, {
 			campaign_id: $system.campaignId,
 			shorten_id: $system.shortenId,
 			...values
-		};
-		send_event(event_name, sentValues);
+		});
 	}
 	function sendPlaytime() {
 		if (!startDate) return;
@@ -6729,12 +6730,11 @@ function instance$92($$self, $$props, $$invalidate) {
 	let domRef = null;
 	function sendMovieEvent(event_name, values = {}) {
 		if (!sendEvent) return;
-		const sentValues = {
+		send_event(event_name, {
 			campaign_id: $system.campaignId,
 			shorten_id: $system.shortenId,
 			...values
-		};
-		send_event(event_name, sentValues);
+		});
 	}
 	function sendPlaytime() {
 		if (!startDate) return;
@@ -8723,8 +8723,7 @@ function instance$83($$self, $$props, $$invalidate) {
 		if (!moving) return;
 		if (previousMove) {
 			const dx = clientX - previousMove.clientX;
-			const dt = timeStamp - previousMove.timeStamp;
-			moveSpeed = dx / dt;
+			moveSpeed = dx / (timeStamp - previousMove.timeStamp);
 			const updatedSlidePosition = slidePosition + dx;
 			window.requestAnimationFrame(() => {
 				$$invalidate(28, slidePosition = updatedSlidePosition);
@@ -10648,12 +10647,10 @@ const toCssOverflow = (p) => {
 function createComponentRawCss(layerId, define) {
 	const rootSelector = `[data-layer-id="${layerId}"]`;
 	const gen = (selector, styles) => {
-		const childSelector = selector.startsWith("&") ? selector.slice(1) : ` ${selector}`;
-		const body = Object.entries(styles).map(([k, v]) => {
+		return `${rootSelector}${selector.startsWith("&") ? selector.slice(1) : ` ${selector}`} {\n${Object.entries(styles).map(([k, v]) => {
 			if (!v) return "";
 			return `${k.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase())}: ${v};`;
-		}).filter((v) => v !== "").join("\n");
-		return `${rootSelector}${childSelector} {\n${body}\n}`;
+		}).filter((v) => v !== "").join("\n")}\n}`;
 	};
 	return define(gen).join("\n");
 }
@@ -12902,8 +12899,7 @@ var Icon_default = Icon;
 //#region src/components-flex/styles.ts
 const getPropStyles = (callback$5) => {
 	return (customBrandKit) => {
-		const brandKit = getBrandKit(customBrandKit);
-		return callback$5({ brandKit });
+		return callback$5({ brandKit: getBrandKit(customBrandKit) });
 	};
 };
 
@@ -17788,15 +17784,11 @@ function calcRemainingTime(limit) {
 	return limit - (/* @__PURE__ */ new Date()).getTime();
 }
 function formatTimeDiff(ms) {
-	const diffDay = Math.floor(ms / 1e3 / 60 / 60 / 24);
-	const diffHour = Math.floor(ms / 1e3 / 60 / 60) % 24;
-	const diffMin = Math.floor(ms / 1e3 / 60) % 60;
-	const diffSec = Math.floor(ms / 1e3) % 60;
 	return {
-		day: diffDay,
-		hour: diffHour,
-		min: diffMin,
-		sec: diffSec
+		day: Math.floor(ms / 1e3 / 60 / 60 / 24),
+		hour: Math.floor(ms / 1e3 / 60 / 60) % 24,
+		min: Math.floor(ms / 1e3 / 60) % 60,
+		sec: Math.floor(ms / 1e3) % 60
 	};
 }
 function instance$16($$self, $$props, $$invalidate) {
@@ -17893,24 +17885,22 @@ const useText = (props, layerId) => {
 			fontWeight: getFontWeight()
 		};
 	};
-	const escapedHTML = props.content.replace(/&/g, "&lt;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;").replace(/\n/g, "<br />");
-	const style = objToStyle({
-		position: props?.position ?? "static",
-		textAlign: props.align,
-		width: props.width,
-		fontFamily: `"${fontFamily}"`,
-		color: getColor(),
-		...getCssSize(),
-		...toCssRadius(props),
-		...toCssBackground(props),
-		...toCssCommon(props),
-		...toCssPosition(props),
-		...toCssPadding(props),
-		...toCssBorder(props)
-	});
 	return {
-		escapedHTML,
-		style
+		escapedHTML: props.content.replace(/&/g, "&lt;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;").replace(/\n/g, "<br />"),
+		style: objToStyle({
+			position: props?.position ?? "static",
+			textAlign: props.align,
+			width: props.width,
+			fontFamily: `"${fontFamily}"`,
+			color: getColor(),
+			...getCssSize(),
+			...toCssRadius(props),
+			...toCssBackground(props),
+			...toCssCommon(props),
+			...toCssPosition(props),
+			...toCssPadding(props),
+			...toCssBorder(props)
+		})
 	};
 };