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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  import { writable, get } from 'svelte/store';
2
2
  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';
3
3
  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';
4
- import 'svelte/easing';
4
+ import { linear, elasticOut, cubicOut } from 'svelte/easing';
5
5
 
6
6
  /** @internal */
7
7
  const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
@@ -35,10 +35,14 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
35
35
  /** @internal */
36
36
  const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
37
37
  /** @internal */
38
- const isPreview = () => {
39
- return true;
40
- };
41
- const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
38
+ const isPreview = () => (true);
39
+ const isCanvasPreview = () => typeof document !== 'undefined'
40
+ ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
41
+ 'true'
42
+ : false;
43
+ const isOnSite = () => typeof document !== 'undefined'
44
+ ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
45
+ : true;
42
46
  /** @internal */
43
47
  const setPreviousFocus = () => {
44
48
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -1849,6 +1853,7 @@ function createModal(App, options = {
1849
1853
  close(trigger);
1850
1854
  };
1851
1855
  const show = async (trigger = 'none') => {
1856
+ console.log('show trigger', trigger);
1852
1857
  if (app) {
1853
1858
  return;
1854
1859
  }
@@ -3382,6 +3387,54 @@ const execOnClickOperation = (onClickOperation) => {
3382
3387
  const haveFunction = (onClickOperation) => {
3383
3388
  return onClickOperation.operation !== 'none';
3384
3389
  };
3390
+ function getAnimation(animation) {
3391
+ switch (animation.type) {
3392
+ case 'fade':
3393
+ return `opacity: ${animation.progress}`;
3394
+ case 'bounce': {
3395
+ const translateX = animation.x;
3396
+ const translateY = animation.y;
3397
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0) scale(${animation.progress});`;
3398
+ }
3399
+ case 'slide-down': {
3400
+ const translateX = animation.x;
3401
+ const translateY = animation.y - 100 * (1 - animation.progress);
3402
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3403
+ }
3404
+ case 'slide-up': {
3405
+ const translateX = animation.x;
3406
+ const translateY = animation.y + 100 * (1 - animation.progress);
3407
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3408
+ }
3409
+ case 'slide-left': {
3410
+ const translateX = animation.x + 100 * (1 - animation.progress);
3411
+ const translateY = animation.y;
3412
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3413
+ }
3414
+ case 'slide-right': {
3415
+ const translateX = animation.x - 100 * (1 - animation.progress);
3416
+ const translateY = animation.y;
3417
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3418
+ }
3419
+ case 'none': {
3420
+ const translateX = animation.x;
3421
+ const translateY = animation.y;
3422
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3423
+ }
3424
+ default:
3425
+ console.warn(`[action-sdk] invalid '${animation}', so we use 'transform: none' instead`);
3426
+ return 'transform: none';
3427
+ }
3428
+ }
3429
+ const EASING = {
3430
+ fade: linear,
3431
+ bounce: elasticOut,
3432
+ 'slide-down': cubicOut,
3433
+ 'slide-up': cubicOut,
3434
+ 'slide-left': cubicOut,
3435
+ 'slide-right': cubicOut,
3436
+ none: linear,
3437
+ };
3385
3438
  /**
3386
3439
  * The function to activate svelte animation.
3387
3440
  *
@@ -3393,9 +3446,23 @@ const haveFunction = (onClickOperation) => {
3393
3446
  * @internal
3394
3447
  */
3395
3448
  function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3396
- {
3449
+ if (!isOnSite()) {
3397
3450
  return {};
3398
3451
  }
3452
+ let [x, y] = [0, 0];
3453
+ for (const { query, x: tx, y: ty } of transforms) {
3454
+ if (query == null || window.matchMedia(query).matches) {
3455
+ x = tx;
3456
+ y = ty;
3457
+ break;
3458
+ }
3459
+ }
3460
+ return {
3461
+ delay,
3462
+ duration,
3463
+ easing: EASING[animationStyle],
3464
+ css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
3465
+ };
3399
3466
  }
3400
3467
 
3401
3468
  /* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
@@ -21092,7 +21159,8 @@ function getActionRoot() {
21092
21159
  return root.shadowRoot;
21093
21160
  }
21094
21161
  /** @internal */
21095
- function ensureActionRoot() {
21162
+ function ensureActionRoot(useShadow = true) {
21163
+ console.log('useShadow', useShadow);
21096
21164
  const systemConfig = getSystem();
21097
21165
  const rootAttrs = {
21098
21166
  class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -21103,11 +21171,13 @@ function ensureActionRoot() {
21103
21171
  style: { display: 'block' },
21104
21172
  };
21105
21173
  let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
21174
+ console.log('el', el);
21106
21175
  if (el == null) {
21107
21176
  el = h('div', rootAttrs);
21108
21177
  document.body.appendChild(el);
21109
21178
  }
21110
- const isShadow = !!document.body.attachShadow;
21179
+ const isShadow = !!document.body.attachShadow && useShadow;
21180
+ console.log('isShadow', isShadow);
21111
21181
  if (isShadow) {
21112
21182
  return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
21113
21183
  }
@@ -21176,7 +21246,7 @@ function createApp(App, options = {
21176
21246
  },
21177
21247
  },
21178
21248
  };
21179
- const win = ensureModalRoot();
21249
+ const win = ensureModalRoot(true);
21180
21250
  appArgs.target = win;
21181
21251
  return {
21182
21252
  close,
package/dist/index.es.js CHANGED
@@ -35,10 +35,14 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
35
35
  /** @internal */
36
36
  const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
37
37
  /** @internal */
38
- const isPreview = () => {
39
- return false;
40
- };
41
- const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
38
+ const isPreview = () => (false);
39
+ const isCanvasPreview = () => typeof document !== 'undefined'
40
+ ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
41
+ 'true'
42
+ : false;
43
+ const isOnSite = () => typeof document !== 'undefined'
44
+ ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
45
+ : true;
42
46
  /** @internal */
43
47
  const setPreviousFocus = () => {
44
48
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -1885,6 +1889,7 @@ function createModal(App, options = {
1885
1889
  close(trigger);
1886
1890
  };
1887
1891
  const show = async (trigger = 'none') => {
1892
+ console.log('show trigger', trigger);
1888
1893
  if (app) {
1889
1894
  return;
1890
1895
  }
@@ -3465,6 +3470,9 @@ const EASING = {
3465
3470
  * @internal
3466
3471
  */
3467
3472
  function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3473
+ if (!isOnSite()) {
3474
+ return {};
3475
+ }
3468
3476
  let [x, y] = [0, 0];
3469
3477
  for (const { query, x: tx, y: ty } of transforms) {
3470
3478
  if (query == null || window.matchMedia(query).matches) {
@@ -19544,7 +19552,8 @@ function getActionRoot() {
19544
19552
  return root.shadowRoot;
19545
19553
  }
19546
19554
  /** @internal */
19547
- function ensureActionRoot() {
19555
+ function ensureActionRoot(useShadow = true) {
19556
+ console.log('useShadow', useShadow);
19548
19557
  const systemConfig = getSystem();
19549
19558
  const rootAttrs = {
19550
19559
  class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -19555,11 +19564,13 @@ function ensureActionRoot() {
19555
19564
  style: { display: 'block' },
19556
19565
  };
19557
19566
  let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
19567
+ console.log('el', el);
19558
19568
  if (el == null) {
19559
19569
  el = h('div', rootAttrs);
19560
19570
  document.body.appendChild(el);
19561
19571
  }
19562
- const isShadow = !!document.body.attachShadow;
19572
+ const isShadow = !!document.body.attachShadow && useShadow;
19573
+ console.log('isShadow', isShadow);
19563
19574
  if (isShadow) {
19564
19575
  return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
19565
19576
  }
@@ -19628,7 +19639,7 @@ function createApp(App, options = {
19628
19639
  },
19629
19640
  },
19630
19641
  };
19631
- const win = ensureModalRoot();
19642
+ const win = ensureModalRoot(true);
19632
19643
  appArgs.target = win;
19633
19644
  return {
19634
19645
  close,
@@ -1419,7 +1419,7 @@ declare function getCssVariables(data: {
1419
1419
  */
1420
1420
  declare function getActionRoot(): ShadowRoot | null;
1421
1421
  /** @internal */
1422
- declare function ensureActionRoot(): ShadowRoot | HTMLElement;
1422
+ declare function ensureActionRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
1423
1423
  /**
1424
1424
  * 非推奨
1425
1425
  *
@@ -38,11 +38,15 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
38
38
  /** @internal */
39
39
  const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
40
40
  /** @internal */
41
- const isPreview = () => {
42
- return !isOnSite() ;
43
- };
44
- const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
45
- const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
41
+ const isPreview = () => (isInFrame() );
42
+ const isCanvasPreview = () => typeof document !== 'undefined'
43
+ ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
44
+ 'true'
45
+ : false;
46
+ const isOnSite = () => typeof document !== 'undefined'
47
+ ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
48
+ : true;
49
+ const isInFrame = () => window && window.self !== window.top;
46
50
  /** @internal */
47
51
  const setPreviousFocus = () => {
48
52
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -1712,6 +1716,7 @@ function createModal(App, options = {
1712
1716
  close(trigger);
1713
1717
  };
1714
1718
  const show = async (trigger = 'none') => {
1719
+ console.log('show trigger', trigger);
1715
1720
  if (app) {
1716
1721
  return;
1717
1722
  }
@@ -2269,7 +2274,8 @@ function getActionRoot() {
2269
2274
  return root.shadowRoot;
2270
2275
  }
2271
2276
  /** @internal */
2272
- function ensureActionRoot() {
2277
+ function ensureActionRoot(useShadow = true) {
2278
+ console.log('useShadow', useShadow);
2273
2279
  const systemConfig = getSystem();
2274
2280
  const rootAttrs = {
2275
2281
  class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -2280,11 +2286,13 @@ function ensureActionRoot() {
2280
2286
  style: { display: 'block' },
2281
2287
  };
2282
2288
  let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
2289
+ console.log('el', el);
2283
2290
  if (el == null) {
2284
2291
  el = h('div', rootAttrs);
2285
2292
  document.body.appendChild(el);
2286
2293
  }
2287
- const isShadow = !!document.body.attachShadow;
2294
+ const isShadow = !!document.body.attachShadow && useShadow;
2295
+ console.log('isShadow', isShadow);
2288
2296
  if (isShadow) {
2289
2297
  return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
2290
2298
  }
@@ -2353,7 +2361,7 @@ function createApp(App, options = {
2353
2361
  },
2354
2362
  },
2355
2363
  };
2356
- const win = ensureModalRoot();
2364
+ const win = ensureModalRoot(true);
2357
2365
  appArgs.target = win;
2358
2366
  return {
2359
2367
  close,
@@ -3447,7 +3455,7 @@ const EASING = {
3447
3455
  * @internal
3448
3456
  */
3449
3457
  function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3450
- if (isPreview()) {
3458
+ if (!isOnSite()) {
3451
3459
  return {};
3452
3460
  }
3453
3461
  let [x, y] = [0, 0];
@@ -1419,7 +1419,7 @@ declare function getCssVariables(data: {
1419
1419
  */
1420
1420
  declare function getActionRoot(): ShadowRoot | null;
1421
1421
  /** @internal */
1422
- declare function ensureActionRoot(): ShadowRoot | HTMLElement;
1422
+ declare function ensureActionRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
1423
1423
  /**
1424
1424
  * 非推奨
1425
1425
  *
@@ -38,11 +38,15 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
38
38
  /** @internal */
39
39
  const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
40
40
  /** @internal */
41
- const isPreview = () => {
42
- return !isOnSite() ;
43
- };
44
- const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
45
- const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
41
+ const isPreview = () => (isInFrame() );
42
+ const isCanvasPreview = () => typeof document !== 'undefined'
43
+ ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
44
+ 'true'
45
+ : false;
46
+ const isOnSite = () => typeof document !== 'undefined'
47
+ ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
48
+ : true;
49
+ const isInFrame = () => window && window.self !== window.top;
46
50
  /** @internal */
47
51
  const setPreviousFocus = () => {
48
52
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -1732,6 +1736,7 @@ function createModal(App, options = {
1732
1736
  close(trigger);
1733
1737
  };
1734
1738
  const show = async (trigger = 'none') => {
1739
+ console.log('show trigger', trigger);
1735
1740
  if (app) {
1736
1741
  return;
1737
1742
  }
@@ -2310,7 +2315,8 @@ function getActionRoot() {
2310
2315
  return root.shadowRoot;
2311
2316
  }
2312
2317
  /** @internal */
2313
- function ensureActionRoot() {
2318
+ function ensureActionRoot(useShadow = true) {
2319
+ console.log('useShadow', useShadow);
2314
2320
  const systemConfig = getSystem();
2315
2321
  const rootAttrs = {
2316
2322
  class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -2321,11 +2327,13 @@ function ensureActionRoot() {
2321
2327
  style: { display: 'block' },
2322
2328
  };
2323
2329
  let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
2330
+ console.log('el', el);
2324
2331
  if (el == null) {
2325
2332
  el = h('div', rootAttrs);
2326
2333
  document.body.appendChild(el);
2327
2334
  }
2328
- const isShadow = !!document.body.attachShadow;
2335
+ const isShadow = !!document.body.attachShadow && useShadow;
2336
+ console.log('isShadow', isShadow);
2329
2337
  if (isShadow) {
2330
2338
  return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
2331
2339
  }
@@ -2394,7 +2402,7 @@ function createApp(App, options = {
2394
2402
  },
2395
2403
  },
2396
2404
  };
2397
- const win = ensureModalRoot();
2405
+ const win = ensureModalRoot(true);
2398
2406
  appArgs.target = win;
2399
2407
  return {
2400
2408
  close,
@@ -3488,7 +3496,7 @@ const EASING = {
3488
3496
  * @internal
3489
3497
  */
3490
3498
  function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3491
- if (isPreview()) {
3499
+ if (!isOnSite()) {
3492
3500
  return {};
3493
3501
  }
3494
3502
  let [x, y] = [0, 0];
@@ -38,11 +38,15 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
38
38
  /** @internal */
39
39
  const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
40
40
  /** @internal */
41
- const isPreview = () => {
42
- return !isOnSite() ;
43
- };
44
- const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
45
- const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
41
+ const isPreview = () => (isInFrame() );
42
+ const isCanvasPreview = () => typeof document !== 'undefined'
43
+ ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
44
+ 'true'
45
+ : false;
46
+ const isOnSite = () => typeof document !== 'undefined'
47
+ ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
48
+ : true;
49
+ const isInFrame = () => window && window.self !== window.top;
46
50
  /** @internal */
47
51
  const setPreviousFocus = () => {
48
52
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -1732,6 +1736,7 @@ function createModal(App, options = {
1732
1736
  close(trigger);
1733
1737
  };
1734
1738
  const show = async (trigger = 'none') => {
1739
+ console.log('show trigger', trigger);
1735
1740
  if (app) {
1736
1741
  return;
1737
1742
  }
@@ -2310,7 +2315,8 @@ function getActionRoot() {
2310
2315
  return root.shadowRoot;
2311
2316
  }
2312
2317
  /** @internal */
2313
- function ensureActionRoot() {
2318
+ function ensureActionRoot(useShadow = true) {
2319
+ console.log('useShadow', useShadow);
2314
2320
  const systemConfig = getSystem();
2315
2321
  const rootAttrs = {
2316
2322
  class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -2321,11 +2327,13 @@ function ensureActionRoot() {
2321
2327
  style: { display: 'block' },
2322
2328
  };
2323
2329
  let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
2330
+ console.log('el', el);
2324
2331
  if (el == null) {
2325
2332
  el = h('div', rootAttrs);
2326
2333
  document.body.appendChild(el);
2327
2334
  }
2328
- const isShadow = !!document.body.attachShadow;
2335
+ const isShadow = !!document.body.attachShadow && useShadow;
2336
+ console.log('isShadow', isShadow);
2329
2337
  if (isShadow) {
2330
2338
  return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
2331
2339
  }
@@ -2394,7 +2402,7 @@ function createApp(App, options = {
2394
2402
  },
2395
2403
  },
2396
2404
  };
2397
- const win = ensureModalRoot();
2405
+ const win = ensureModalRoot(true);
2398
2406
  appArgs.target = win;
2399
2407
  return {
2400
2408
  close,
@@ -3488,7 +3496,7 @@ const EASING = {
3488
3496
  * @internal
3489
3497
  */
3490
3498
  function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3491
- if (isPreview()) {
3499
+ if (!isOnSite()) {
3492
3500
  return {};
3493
3501
  }
3494
3502
  let [x, y] = [0, 0];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plaidev/karte-action-sdk",
3
- "version": "1.1.267-29071859.db1ade43",
3
+ "version": "1.1.267-29082453.379cb476",
4
4
  "author": "Plaid Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "module": "./dist/index.es.js",