@plaidev/karte-action-sdk 1.1.266 → 1.1.267-29071859.db1ade43

package/dist/svelte5/hydrate/index.es.js

@@ -4,7 +4,7 @@ import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeU
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
-import 'svelte/easing';
+import { linear, elasticOut, cubicOut } from 'svelte/easing';
 
 /** @internal */
 const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
@@ -39,8 +39,10 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
 const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
 /** @internal */
 const isPreview = () => {
-    return true;
+    return !isOnSite() ;
 };
+const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
+const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -223,6 +225,10 @@ function onTime(time, fn) {
     const timeoutHandler = setTimeout(fn, time);
     return () => timeoutHandler && clearTimeout(timeoutHandler);
 }
+/** @internal */
+function randStr(digit = 8) {
+    return Math.random().toString(32).substring(digit);
+}
 /**
  * Goolge Fonts用のURLを生成
  *
@@ -754,7 +760,7 @@ const state = writable('/');
  * @public
  */
 function setState$1(stateId, options) {
-    if (options?.disableInPreview)
+    if (isPreview() && options?.disableInPreview)
         return;
     state.set(stateId);
 }
@@ -1198,8 +1204,11 @@ function cloneToJson(data) {
 
 // prettier-ignore
 /** @internal */
-const actionId = ALL_ACTION_ID
-    ;
+const actionId = isPreview()
+    ? ALL_ACTION_ID
+    : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
+        ? __FLYER_GEN_ACTION_ID_ON_BUILD__
+        : randStr();
 /** @internal */
 const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
 /** @internal */
@@ -1553,8 +1562,23 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
 /** @internal */
 const loadActionTable = async (config, data, api_key, collection_endpoint) => {
     console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
-    const results = config.map(c => c.preview_value)
-        ;
+    const results = isPreview()
+        ? config.map(c => c.preview_value)
+        : await Promise.all(config
+            .filter(c => c.resolver === 'action-table-row' ||
+            c.resolver === 'action-table-rows' ||
+            c.resolver === 'action-table-query')
+            .map(async (c) => {
+            if (c.resolver === 'action-table-row') {
+                return await loadActionTableRow(c, data, api_key, collection_endpoint);
+            }
+            else if (c.resolver === 'action-table-rows') {
+                return await loadActionTableRows(c, data, api_key, collection_endpoint);
+            }
+            else if (c.resolver === 'action-table-query') {
+                return await loadActionTableQuery(c, data, api_key, collection_endpoint);
+            }
+        }));
     return config.reduce((acc, c, i) => {
         const value = results[i] ?? c.query.default_value;
         if (value) {
@@ -2849,9 +2873,11 @@ function Header($$anchor, $$props) {
 			$fonts()
 		),
 		() => {
-			{
+			if (isPreview()) {
 				// フォントのロードが遅れてエディタのプレビューがガタつく対策
 				$.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
+			} else if ($fonts().length > 0) {
+				$.set(googleFontUrl, makeGoogleFontUrl($fonts()));
 			}
 		}
 	);
@@ -3362,6 +3388,54 @@ const execOnClickOperation = (onClickOperation) => {
         bootChat(...onClickOperation.args)();
     }
 };
+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);`;
+        }
+        default:
+            console.warn(`[action-sdk] invalid '${animation}', so we use 'transform: none' instead`);
+            return 'transform: none';
+    }
+}
+const EASING = {
+    fade: linear,
+    bounce: elasticOut,
+    'slide-down': cubicOut,
+    'slide-up': cubicOut,
+    'slide-left': cubicOut,
+    'slide-right': cubicOut,
+    none: linear,
+};
 /**
  * The function to activate svelte animation.
  *
@@ -3373,9 +3447,23 @@ const execOnClickOperation = (onClickOperation) => {
  * @internal
  */
 function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
-    {
+    if (isPreview()) {
         return {};
     }
+    let [x, y] = [0, 0];
+    for (const { query, x: tx, y: ty } of transforms) {
+        if (query == null || window.matchMedia(query).matches) {
+            x = tx;
+            y = ty;
+            break;
+        }
+    }
+    return {
+        delay,
+        duration,
+        easing: EASING[animationStyle],
+        css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
+    };
 }
 
 const getHref = (onClick) => {
@@ -5136,11 +5224,11 @@ const IMAGE_ROUND_STYLES = {
     },
 };
 
-var root_1$3 = $.template(`<img class="image-img svelte-gzaieg">`);
+var root_1$3 = $.template(`<img class="image-img svelte-rewdem">`);
 
 const $$css$g = {
-	hash: 'svelte-gzaieg',
-	code: '.image.svelte-gzaieg {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.image-img.svelte-gzaieg {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
+	hash: 'svelte-rewdem',
+	code: '.image.svelte-rewdem {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;}.image-img.svelte-rewdem {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
 };
 
 function Image($$anchor, $$props) {
@@ -5155,6 +5243,7 @@ function Image($$anchor, $$props) {
 
 	const { attributes, element, handleClick } = useClickable(props());
 	const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
+	const width = props().width ?? '100%';
 
 	$.legacy_pre_effect(
 		() => (
@@ -5164,7 +5253,8 @@ function Image($$anchor, $$props) {
 		() => {
 			$.set(style, objToStyle({
 				...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? 'square'],
-				width: props().width ?? '100%',
+				width,
+				flexShrink: String(width).indexOf('px') !== -1 ? 0 : 1,
 				height: props().height ?? 'auto',
 				aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
 				...toCssCommon(props()),
@@ -5191,7 +5281,7 @@ function Image($$anchor, $$props) {
 				style: $.get(style),
 				'data-layer-id': layerId()
 			},
-			'svelte-gzaieg'
+			'svelte-rewdem'
 		));
 
 		$.event('click', $$element, handleClick);
@@ -6230,7 +6320,6 @@ function Modal($$anchor, $$props) {
 	const backgroundClickSP = $.mutable_state();
 	const handle_keydown = $.mutable_state();
 	const visible = $.mutable_state();
-	const style = $.mutable_state();
 	let useBreakPoint = $.prop($$props, 'useBreakPoint', 8, false);
 	let placement = $.prop($$props, 'placement', 8);
 	let breakPoint = $.prop($$props, 'breakPoint', 8);
@@ -6241,8 +6330,6 @@ function Modal($$anchor, $$props) {
 	let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	const { brandKit } = useBrandKit();
-	// falseが明示的に指定されている場合以外はtrueにする
-	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
 	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6288,7 +6375,7 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(breakPoint())
 		),
 		() => {
-			if (isOnSite && isExistBackgroundOverlayValue) {
+			if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
 				$.set(backgroundOverlay, placement().backgroundOverlay);
 			}
 
@@ -6394,7 +6481,7 @@ function Modal($$anchor, $$props) {
 			// 表示位置のスタイルの設定
 			let position = DefaultModalPlacement.position;
 
-			if (isOnSite && placement() && placement().position !== null) {
+			if (!isCanvasPreview() && placement() && placement().position !== null) {
 				position = placement().position;
 			}
 
@@ -6411,7 +6498,7 @@ function Modal($$anchor, $$props) {
 			$.set(transforms, []);
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (isOnSite && useBreakPoint()) {
+				if (!isCanvasPreview() && useBreakPoint()) {
 					const positionWithBp = breakPoint()[deviceId]?.placement?.position;
 
 					$.get(transforms).push({
@@ -6441,12 +6528,13 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(placement()),
 			$.deep_read_state(useBreakPoint()),
 			$.deep_read_state(breakPoint()),
-			parseStyle
+			$.deep_read_state(props()),
+			toCssBorder
 		),
 		() => {
 			let margin = DefaultModalPlacement.margin;
 
-			if (isOnSite && placement() && placement().margin !== null) {
+			if (!isCanvasPreview() && placement() && placement().margin !== null) {
 				margin = placement().margin;
 			}
 
@@ -6457,7 +6545,7 @@ function Modal($$anchor, $$props) {
 			}
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (isOnSite && useBreakPoint()) {
+				if (!isCanvasPreview() && useBreakPoint()) {
 					const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
 
 					marginStyle = getMarginStyle(marginWithBp);
@@ -6471,6 +6559,18 @@ function Modal($$anchor, $$props) {
 
 				modalStyles.add(marginVariables);
 			});
+
+			const propsStyle = objToStyle({
+				width: props().width,
+				...toCssOverflow(props()),
+				...toCssShadow(props()),
+				...toCssRadius(props()),
+				...toCssBackgroundImage(props()),
+				...toCssBackgroundColor(props()),
+				...toCssBorder(props())
+			});
+
+			modalStyles.add(propsStyle);
 		}
 	);
 
@@ -6486,24 +6586,6 @@ function Modal($$anchor, $$props) {
 		$.set(visible, false);
 	});
 
-	$.legacy_pre_effect(
-		() => (
-			$.deep_read_state(props()),
-			toCssBorder
-		),
-		() => {
-			$.set(style, objToStyle({
-				width: props().width,
-				...toCssOverflow(props()),
-				...toCssShadow(props()),
-				...toCssRadius(props()),
-				...toCssBackgroundImage(props()),
-				...toCssBackgroundColor(props()),
-				...toCssBorder(props())
-			}));
-		}
-	);
-
 	$.legacy_pre_effect_reset();
 	$.init();
 
@@ -6577,7 +6659,7 @@ function Modal($$anchor, $$props) {
 		};
 
 		$.if(node, ($$render) => {
-			if (!isOnSite) $$render(consequent); else $$render(alternate, false);
+			if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
 		});
 	}
 
@@ -6603,10 +6685,7 @@ function Modal($$anchor, $$props) {
 						'modal',
 						useBreakPoint() ? 'modal-bp' : ''
 					].join(' ')),
-					() => [
-						Array.from(modalStyles).join(';'),
-						$.get(style)
-					].join(' ')
+					() => Array.from(modalStyles).join(';')
 				],
 				$.derived_safe_equal
 			);

package/dist/svelte5/index.es.js

@@ -39,8 +39,10 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
 const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
 /** @internal */
 const isPreview = () => {
-    return false;
+    return !isOnSite() ;
 };
+const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
+const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -758,6 +760,8 @@ const state = writable('/');
  * @public
  */
 function setState$1(stateId, options) {
+    if (isPreview() && options?.disableInPreview)
+        return;
     state.set(stateId);
 }
 /**
@@ -1168,7 +1172,9 @@ function cloneToJson(data) {
 
 // prettier-ignore
 /** @internal */
-const actionId = typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
+const actionId = isPreview()
+    ? ALL_ACTION_ID
+    : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
         ? __FLYER_GEN_ACTION_ID_ON_BUILD__
         : randStr();
 /** @internal */
@@ -1576,7 +1582,9 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
 /** @internal */
 const loadActionTable = async (config, data, api_key, collection_endpoint) => {
     console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
-    const results = await Promise.all(config
+    const results = isPreview()
+        ? config.map(c => c.preview_value)
+        : await Promise.all(config
             .filter(c => c.resolver === 'action-table-row' ||
             c.resolver === 'action-table-rows' ||
             c.resolver === 'action-table-query')
@@ -2906,7 +2914,10 @@ function Header($$anchor, $$props) {
 			$fonts()
 		),
 		() => {
-			if ($fonts().length > 0) {
+			if (isPreview()) {
+				// フォントのロードが遅れてエディタのプレビューがガタつく対策
+				$.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
+			} else if ($fonts().length > 0) {
 				$.set(googleFontUrl, makeGoogleFontUrl($fonts()));
 			}
 		}
@@ -3477,6 +3488,9 @@ const EASING = {
  * @internal
  */
 function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
+    if (isPreview()) {
+        return {};
+    }
     let [x, y] = [0, 0];
     for (const { query, x: tx, y: ty } of transforms) {
         if (query == null || window.matchMedia(query).matches) {
@@ -5251,11 +5265,11 @@ const IMAGE_ROUND_STYLES = {
     },
 };
 
-var root_1$3 = $.template(`<img class="image-img svelte-gzaieg">`);
+var root_1$3 = $.template(`<img class="image-img svelte-rewdem">`);
 
 const $$css$g = {
-	hash: 'svelte-gzaieg',
-	code: '.image.svelte-gzaieg {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.image-img.svelte-gzaieg {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
+	hash: 'svelte-rewdem',
+	code: '.image.svelte-rewdem {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;}.image-img.svelte-rewdem {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
 };
 
 function Image($$anchor, $$props) {
@@ -5270,6 +5284,7 @@ function Image($$anchor, $$props) {
 
 	const { attributes, element, handleClick } = useClickable(props());
 	const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
+	const width = props().width ?? '100%';
 
 	$.legacy_pre_effect(
 		() => (
@@ -5279,7 +5294,8 @@ function Image($$anchor, $$props) {
 		() => {
 			$.set(style, objToStyle({
 				...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? 'square'],
-				width: props().width ?? '100%',
+				width,
+				flexShrink: String(width).indexOf('px') !== -1 ? 0 : 1,
 				height: props().height ?? 'auto',
 				aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
 				...toCssCommon(props()),
@@ -5306,7 +5322,7 @@ function Image($$anchor, $$props) {
 				style: $.get(style),
 				'data-layer-id': layerId()
 			},
-			'svelte-gzaieg'
+			'svelte-rewdem'
 		));
 
 		$.event('click', $$element, handleClick);
@@ -6345,7 +6361,6 @@ function Modal($$anchor, $$props) {
 	const backgroundClickSP = $.mutable_state();
 	const handle_keydown = $.mutable_state();
 	const visible = $.mutable_state();
-	const style = $.mutable_state();
 	let useBreakPoint = $.prop($$props, 'useBreakPoint', 8, false);
 	let placement = $.prop($$props, 'placement', 8);
 	let breakPoint = $.prop($$props, 'breakPoint', 8);
@@ -6356,8 +6371,6 @@ function Modal($$anchor, $$props) {
 	let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	const { brandKit } = useBrandKit();
-	// falseが明示的に指定されている場合以外はtrueにする
-	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
 	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6403,7 +6416,7 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(breakPoint())
 		),
 		() => {
-			if (isOnSite && isExistBackgroundOverlayValue) {
+			if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
 				$.set(backgroundOverlay, placement().backgroundOverlay);
 			}
 
@@ -6509,7 +6522,7 @@ function Modal($$anchor, $$props) {
 			// 表示位置のスタイルの設定
 			let position = DefaultModalPlacement.position;
 
-			if (isOnSite && placement() && placement().position !== null) {
+			if (!isCanvasPreview() && placement() && placement().position !== null) {
 				position = placement().position;
 			}
 
@@ -6526,7 +6539,7 @@ function Modal($$anchor, $$props) {
 			$.set(transforms, []);
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (isOnSite && useBreakPoint()) {
+				if (!isCanvasPreview() && useBreakPoint()) {
 					const positionWithBp = breakPoint()[deviceId]?.placement?.position;
 
 					$.get(transforms).push({
@@ -6556,12 +6569,13 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(placement()),
 			$.deep_read_state(useBreakPoint()),
 			$.deep_read_state(breakPoint()),
-			parseStyle
+			$.deep_read_state(props()),
+			toCssBorder
 		),
 		() => {
 			let margin = DefaultModalPlacement.margin;
 
-			if (isOnSite && placement() && placement().margin !== null) {
+			if (!isCanvasPreview() && placement() && placement().margin !== null) {
 				margin = placement().margin;
 			}
 
@@ -6572,7 +6586,7 @@ function Modal($$anchor, $$props) {
 			}
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (isOnSite && useBreakPoint()) {
+				if (!isCanvasPreview() && useBreakPoint()) {
 					const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
 
 					marginStyle = getMarginStyle(marginWithBp);
@@ -6586,6 +6600,18 @@ function Modal($$anchor, $$props) {
 
 				modalStyles.add(marginVariables);
 			});
+
+			const propsStyle = objToStyle({
+				width: props().width,
+				...toCssOverflow(props()),
+				...toCssShadow(props()),
+				...toCssRadius(props()),
+				...toCssBackgroundImage(props()),
+				...toCssBackgroundColor(props()),
+				...toCssBorder(props())
+			});
+
+			modalStyles.add(propsStyle);
 		}
 	);
 
@@ -6601,24 +6627,6 @@ function Modal($$anchor, $$props) {
 		$.set(visible, false);
 	});
 
-	$.legacy_pre_effect(
-		() => (
-			$.deep_read_state(props()),
-			toCssBorder
-		),
-		() => {
-			$.set(style, objToStyle({
-				width: props().width,
-				...toCssOverflow(props()),
-				...toCssShadow(props()),
-				...toCssRadius(props()),
-				...toCssBackgroundImage(props()),
-				...toCssBackgroundColor(props()),
-				...toCssBorder(props())
-			}));
-		}
-	);
-
 	$.legacy_pre_effect_reset();
 	$.init();
 
@@ -6692,7 +6700,7 @@ function Modal($$anchor, $$props) {
 		};
 
 		$.if(node, ($$render) => {
-			if (!isOnSite) $$render(consequent); else $$render(alternate, false);
+			if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
 		});
 	}
 
@@ -6718,10 +6726,7 @@ function Modal($$anchor, $$props) {
 						'modal',
 						useBreakPoint() ? 'modal-bp' : ''
 					].join(' ')),
-					() => [
-						Array.from(modalStyles).join(';'),
-						$.get(style)
-					].join(' ')
+					() => Array.from(modalStyles).join(';')
 				],
 				$.derived_safe_equal
 			);