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

package/dist/hydrate/index.es.js

@@ -1,7 +1,7 @@
 import { writable, get } from 'svelte/store';
 import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeUpdate$1, afterUpdate as afterUpdate$1, tick as tick$1, getContext, setContext, createEventDispatcher } from 'svelte';
 import { SvelteComponent, init, safe_not_equal, empty, head_selector, detach, append_hydration, noop, component_subscribe, element, claim_element, attr, insert_hydration, create_slot, create_component, space, claim_component, claim_space, mount_component, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, append_styles, group_outros, check_outros, children, null_to_empty, listen, assign, set_attributes, toggle_class, get_spread_update, prevent_default, is_function, add_render_callback, create_in_transition, binding_callbacks, set_style, svg_element, claim_svg_element, destroy_each, text, claim_text, set_data, src_url_equal, set_store_value, run_all, HtmlTagHydration, claim_html_tag, construct_svelte_component, subscribe, set_custom_element_data_map } from 'svelte/internal';
-import 'svelte/easing';
+import { linear, elasticOut, cubicOut } from 'svelte/easing';
 
 /** @internal */
 const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
@@ -35,10 +35,14 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
 /** @internal */
 const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
 /** @internal */
-const isPreview = () => {
-    return true;
-};
-const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
+const isPreview = () => (true);
+const isCanvasPreview = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
+        'true'
+    : false;
+const isOnSite = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
+    : true;
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -3382,6 +3386,54 @@ const execOnClickOperation = (onClickOperation) => {
 const haveFunction = (onClickOperation) => {
     return onClickOperation.operation !== 'none';
 };
+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.
  *
@@ -3393,9 +3445,23 @@ const haveFunction = (onClickOperation) => {
  * @internal
  */
 function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
-    {
+    if (!isOnSite()) {
         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 }),
+    };
 }
 
 /* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
@@ -21092,7 +21158,7 @@ function getActionRoot() {
     return root.shadowRoot;
 }
 /** @internal */
-function ensureActionRoot() {
+function ensureActionRoot(useShadow = true) {
     const systemConfig = getSystem();
     const rootAttrs = {
         class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -21107,7 +21173,7 @@ function ensureActionRoot() {
         el = h('div', rootAttrs);
         document.body.appendChild(el);
     }
-    const isShadow = !!document.body.attachShadow;
+    const isShadow = !!document.body.attachShadow && useShadow;
     if (isShadow) {
         return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
     }
@@ -21176,7 +21242,7 @@ function createApp(App, options = {
             },
         },
     };
-    const win = ensureModalRoot();
+    const win = ensureModalRoot(true);
     appArgs.target = win;
     return {
         close,

package/dist/index.es.js

@@ -35,10 +35,14 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
 /** @internal */
 const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
 /** @internal */
-const isPreview = () => {
-    return false;
-};
-const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
+const isPreview = () => (false);
+const isCanvasPreview = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
+        'true'
+    : false;
+const isOnSite = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
+    : true;
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -3465,6 +3469,9 @@ const EASING = {
  * @internal
  */
 function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
+    if (!isOnSite()) {
+        return {};
+    }
     let [x, y] = [0, 0];
     for (const { query, x: tx, y: ty } of transforms) {
         if (query == null || window.matchMedia(query).matches) {
@@ -19544,7 +19551,7 @@ function getActionRoot() {
     return root.shadowRoot;
 }
 /** @internal */
-function ensureActionRoot() {
+function ensureActionRoot(useShadow = true) {
     const systemConfig = getSystem();
     const rootAttrs = {
         class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -19559,7 +19566,7 @@ function ensureActionRoot() {
         el = h('div', rootAttrs);
         document.body.appendChild(el);
     }
-    const isShadow = !!document.body.attachShadow;
+    const isShadow = !!document.body.attachShadow && useShadow;
     if (isShadow) {
         return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
     }
@@ -19628,7 +19635,7 @@ function createApp(App, options = {
             },
         },
     };
-    const win = ensureModalRoot();
+    const win = ensureModalRoot(true);
     appArgs.target = win;
     return {
         close,

package/dist/svelte5/hydrate/index.es.d.ts

@@ -1419,7 +1419,7 @@ declare function getCssVariables(data: {
  */
 declare function getActionRoot(): ShadowRoot | null;
 /** @internal */
-declare function ensureActionRoot(): ShadowRoot | HTMLElement;
+declare function ensureActionRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
 /**
  * 非推奨
  *

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

@@ -38,11 +38,15 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
 /** @internal */
 const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
 /** @internal */
-const isPreview = () => {
-    return !isOnSite() ;
-};
-const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
-const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
+const isPreview = () => (isInFrame() );
+const isCanvasPreview = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
+        'true'
+    : false;
+const isOnSite = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
+    : true;
+const isInFrame = () => window && window.self !== window.top;
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -2269,7 +2273,7 @@ function getActionRoot() {
     return root.shadowRoot;
 }
 /** @internal */
-function ensureActionRoot() {
+function ensureActionRoot(useShadow = true) {
     const systemConfig = getSystem();
     const rootAttrs = {
         class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -2284,7 +2288,7 @@ function ensureActionRoot() {
         el = h('div', rootAttrs);
         document.body.appendChild(el);
     }
-    const isShadow = !!document.body.attachShadow;
+    const isShadow = !!document.body.attachShadow && useShadow;
     if (isShadow) {
         return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
     }
@@ -2353,7 +2357,7 @@ function createApp(App, options = {
             },
         },
     };
-    const win = ensureModalRoot();
+    const win = ensureModalRoot(true);
     appArgs.target = win;
     return {
         close,
@@ -3447,7 +3451,7 @@ const EASING = {
  * @internal
  */
 function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
-    if (isPreview()) {
+    if (!isOnSite()) {
         return {};
     }
     let [x, y] = [0, 0];

package/dist/svelte5/index.es.d.ts

@@ -1419,7 +1419,7 @@ declare function getCssVariables(data: {
  */
 declare function getActionRoot(): ShadowRoot | null;
 /** @internal */
-declare function ensureActionRoot(): ShadowRoot | HTMLElement;
+declare function ensureActionRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
 /**
  * 非推奨
  *

package/dist/svelte5/index.es.js

@@ -38,11 +38,15 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
 /** @internal */
 const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
 /** @internal */
-const isPreview = () => {
-    return !isOnSite() ;
-};
-const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
-const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
+const isPreview = () => (isInFrame() );
+const isCanvasPreview = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
+        'true'
+    : false;
+const isOnSite = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
+    : true;
+const isInFrame = () => window && window.self !== window.top;
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -2310,7 +2314,7 @@ function getActionRoot() {
     return root.shadowRoot;
 }
 /** @internal */
-function ensureActionRoot() {
+function ensureActionRoot(useShadow = true) {
     const systemConfig = getSystem();
     const rootAttrs = {
         class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -2325,7 +2329,7 @@ function ensureActionRoot() {
         el = h('div', rootAttrs);
         document.body.appendChild(el);
     }
-    const isShadow = !!document.body.attachShadow;
+    const isShadow = !!document.body.attachShadow && useShadow;
     if (isShadow) {
         return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
     }
@@ -2394,7 +2398,7 @@ function createApp(App, options = {
             },
         },
     };
-    const win = ensureModalRoot();
+    const win = ensureModalRoot(true);
     appArgs.target = win;
     return {
         close,
@@ -3488,7 +3492,7 @@ const EASING = {
  * @internal
  */
 function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
-    if (isPreview()) {
+    if (!isOnSite()) {
         return {};
     }
     let [x, y] = [0, 0];

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

@@ -38,11 +38,15 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
 /** @internal */
 const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
 /** @internal */
-const isPreview = () => {
-    return !isOnSite() ;
-};
-const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
-const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
+const isPreview = () => (isInFrame() );
+const isCanvasPreview = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
+        'true'
+    : false;
+const isOnSite = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
+    : true;
+const isInFrame = () => window && window.self !== window.top;
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -2310,7 +2314,7 @@ function getActionRoot() {
     return root.shadowRoot;
 }
 /** @internal */
-function ensureActionRoot() {
+function ensureActionRoot(useShadow = true) {
     const systemConfig = getSystem();
     const rootAttrs = {
         class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -2325,7 +2329,7 @@ function ensureActionRoot() {
         el = h('div', rootAttrs);
         document.body.appendChild(el);
     }
-    const isShadow = !!document.body.attachShadow;
+    const isShadow = !!document.body.attachShadow && useShadow;
     if (isShadow) {
         return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
     }
@@ -2394,7 +2398,7 @@ function createApp(App, options = {
             },
         },
     };
-    const win = ensureModalRoot();
+    const win = ensureModalRoot(true);
     appArgs.target = win;
     return {
         close,
@@ -3488,7 +3492,7 @@ const EASING = {
  * @internal
  */
 function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
-    if (isPreview()) {
+    if (!isOnSite()) {
         return {};
     }
     let [x, y] = [0, 0];

package/package.json

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