@plaidev/karte-action-sdk 1.1.63 → 1.1.64

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.
@@ -390,24 +390,24 @@ declare function hideOnScroll<Props extends {
390
390
  hide_on_scroll: boolean;
391
391
  hide_on_scroll_rate: number;
392
392
  show_on_scroll_reenter: boolean;
393
- }>(props: Props, fn?: () => void): () => void;
393
+ }>(props: Props, fn?: () => void): (() => void) | null;
394
394
  declare function hideOnTime<Props extends {
395
395
  hide_on_time: boolean;
396
396
  hide_on_time_count: number;
397
- }>(props: Props, fn?: () => void): () => void;
397
+ }>(props: Props, fn?: () => void): (() => void) | null;
398
398
  declare function showOnScroll<Props extends {
399
399
  show_on_scroll: boolean;
400
400
  show_on_scroll_rate: number;
401
401
  show_on_scroll_reenter: boolean;
402
- }>(props: Props, fn?: Function): () => void;
402
+ }>(props: Props, fn?: Function): (() => void) | null;
403
403
  declare function showOnTime<Props extends {
404
404
  show_on_time: boolean;
405
405
  show_on_time_count: number;
406
- }>(props: Props, fn?: Function): () => void;
406
+ }>(props: Props, fn?: Function): (() => void) | null;
407
407
  /**
408
- * An options for {@link createApp}
408
+ * An options for {@link showModal}
409
409
  */
410
- interface AppOptions<Props, Variables> {
410
+ interface ModalOptions<Props, Variables> {
411
411
  /**
412
412
  * {@link Send} function to receive events triggered in Karte action.
413
413
  *
@@ -427,8 +427,48 @@ interface AppOptions<Props, Variables> {
427
427
  */
428
428
  variables?: Variables;
429
429
  }
430
+ // types of props to reference for internaly
431
+ interface _Props {
432
+ hide_on_scroll: boolean;
433
+ hide_on_scroll_rate: number;
434
+ show_on_scroll_reenter: boolean;
435
+ hide_on_time: boolean;
436
+ hide_on_time_count: number;
437
+ show_on_scroll: boolean;
438
+ show_on_scroll_rate: number;
439
+ show_on_time: boolean;
440
+ show_on_time_count: number;
441
+ }
442
+ /**
443
+ * Show the modal
444
+ *
445
+ * @param App - An entry point of svelte component.
446
+ * @param options - A {@link ModalOptions | options}
447
+ *
448
+ * @return A function to close the modal
449
+ */
450
+ declare function showModal<Props extends _Props, Variables>(App: typeof SvelteComponentDev, options?: ModalOptions<Props, Variables>): () => void;
451
+ declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
452
+ declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
453
+ declare function createFog({ color, opacity, zIndex, onclick }: {
454
+ color?: string;
455
+ opacity?: string;
456
+ zIndex?: number;
457
+ onclick: () => void;
458
+ }): {
459
+ fog: HTMLDivElement;
460
+ close: () => void;
461
+ };
462
+ type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
463
+ declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
464
+ /**
465
+ * An options for {@link createApp}
466
+ * @deprecated
467
+ */
468
+ type AppOptions<Props, Variables> = ModalOptions<Props, Variables>;
430
469
  /**
431
470
  * App application instance that is with {@link createApp}
471
+ * @deprecated
432
472
  *
433
473
  * @description Currently, svelte component is supported only.
434
474
  */
@@ -443,26 +483,15 @@ interface App {
443
483
  show: () => void;
444
484
  }
445
485
  /**
446
- * Create an application instance.
486
+ * Create an application instance
487
+ * @deprecated
447
488
  *
448
489
  * @param App - An entry point of svelte component.
449
490
  * @param options - An {@link AppOptions | options}
450
- * @return An {@link App | app} instance
491
+ *
492
+ * @return A function to close the modal
451
493
  */
452
- declare const createApp: <Props, Variables>(App: typeof SvelteComponentDev, options?: AppOptions<Props, Variables>) => App;
453
- declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
454
- declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
455
- declare function createFog({ color, opacity, zIndex, onclick }: {
456
- color?: string;
457
- opacity?: string;
458
- zIndex?: number;
459
- onclick: () => void;
460
- }): {
461
- fog: HTMLDivElement;
462
- close: () => void;
463
- };
464
- type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
465
- declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
494
+ declare function createApp<Props, Variables>(App: typeof SvelteComponentDev, options?: AppOptions<Props, Variables>): App;
466
495
  declare const collection: (config: {
467
496
  api_key: string;
468
497
  table: string;
@@ -476,7 +505,7 @@ declare const collection: (config: {
476
505
  } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
477
506
  set(key: string, value: string, cb: (err: Error | null) => void): void;
478
507
  };
479
- export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, customAnimation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, AppOptions, App, createApp, ensureModalRoot, h, createFog, EmbedLogic, embed, collection };
508
+ export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, customAnimation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ModalOptions, showModal, ensureModalRoot, h, createFog, EmbedLogic, embed, AppOptions, App, createApp, collection };
480
509
  export { default as State } from './components/State.svelte';
481
510
  export { default as StateItem } from './components/StateItem.svelte';
482
511
  export { default as Modal } from './components/Modal.svelte';
@@ -439,21 +439,20 @@ const ObjectFits = ['fill', 'contain', 'cover'];
439
439
  const Repeats = ['repeat', 'space', 'round', 'no-repeat'];
440
440
  const BackgroundSizes = ['cover', 'contain', 'auto'];
441
441
 
442
- const NOOP = () => { };
443
442
  function hideOnScroll(props, fn) {
444
443
  return props.hide_on_scroll && props.hide_on_scroll_rate
445
444
  ? onScroll(props.hide_on_scroll_rate / 100, () => {
446
445
  fn && fn();
447
446
  return props.show_on_scroll_reenter;
448
447
  })
449
- : NOOP;
448
+ : null;
450
449
  }
451
450
  function hideOnTime(props, fn) {
452
451
  return props.hide_on_time && props.hide_on_time_count
453
452
  ? onTime(props.hide_on_time_count * 1000, () => {
454
453
  fn && fn();
455
454
  })
456
- : NOOP;
455
+ : null;
457
456
  }
458
457
  function showOnScroll(props, fn) {
459
458
  return props.show_on_scroll && props.show_on_scroll_rate
@@ -461,28 +460,29 @@ function showOnScroll(props, fn) {
461
460
  fn && fn();
462
461
  return props.show_on_scroll_reenter;
463
462
  })
464
- : NOOP;
463
+ : null;
465
464
  }
466
465
  function showOnTime(props, fn) {
467
466
  return props.show_on_time && props.show_on_time_count
468
467
  ? onTime(props.show_on_time_count * 1000, () => {
469
468
  fn && fn();
470
469
  })
471
- : NOOP;
470
+ : null;
472
471
  }
473
472
 
474
473
  /**
475
- * Create an application instance.
474
+ * Show the modal
476
475
  *
477
476
  * @param App - An entry point of svelte component.
478
- * @param options - An {@link AppOptions | options}
479
- * @return An {@link App | app} instance
477
+ * @param options - A {@link ModalOptions | options}
478
+ *
479
+ * @return A function to close the modal
480
480
  */
481
- const createApp = (App, options = {
481
+ function showModal(App, options = {
482
482
  send: () => { },
483
483
  props: {},
484
484
  variables: {},
485
- }) => {
485
+ }) {
486
486
  let app = null;
487
487
  const close = () => {
488
488
  if (app) {
@@ -490,33 +490,35 @@ const createApp = (App, options = {
490
490
  app = null;
491
491
  }
492
492
  };
493
- const appArgs = {
494
- target: null,
495
- props: {
496
- send: options.send,
497
- close,
498
- data: {
499
- ...options.props,
500
- ...options.variables,
493
+ const show = () => {
494
+ if (app) {
495
+ return;
496
+ }
497
+ options.send('message_open');
498
+ app = new App({
499
+ target: ensureModalRoot(!true),
500
+ hydrate: true,
501
+ props: {
502
+ send: options.send,
503
+ close,
504
+ data: {
505
+ ...options.props,
506
+ ...options.variables,
507
+ },
501
508
  },
502
- },
509
+ });
503
510
  };
504
- {
505
- const win = ensureModalRoot(false);
506
- appArgs.target = win;
507
- appArgs.hydrate = true;
508
- }
509
- return {
510
- close,
511
- show: () => {
512
- if (app) {
513
- return;
514
- }
515
- options.send('message_open');
516
- app = new App(appArgs);
517
- },
511
+ const _show = () => {
512
+ show();
513
+ return close;
518
514
  };
519
- };
515
+ // if in hydrate mode (preview), always show modal
516
+ const showCleanup = _show();
517
+ return () => {
518
+ close();
519
+ showCleanup();
520
+ };
521
+ }
520
522
  const KARTE_MODAL_ROOT = 'karte-modal-root';
521
523
  function ensureModalRoot(useShadow = true) {
522
524
  let el = document.getElementById(KARTE_MODAL_ROOT);
@@ -593,6 +595,54 @@ function embed(target, replace, embed_method) {
593
595
  target.before(replace);
594
596
  }
595
597
  }
598
+ /**
599
+ * Create an application instance
600
+ * @deprecated
601
+ *
602
+ * @param App - An entry point of svelte component.
603
+ * @param options - An {@link AppOptions | options}
604
+ *
605
+ * @return A function to close the modal
606
+ */
607
+ function createApp(App, options = {
608
+ send: () => { },
609
+ props: {},
610
+ variables: {},
611
+ }) {
612
+ let app = null;
613
+ const close = () => {
614
+ if (app) {
615
+ app.$destroy();
616
+ app = null;
617
+ }
618
+ };
619
+ const appArgs = {
620
+ target: null,
621
+ props: {
622
+ send: options.send,
623
+ close,
624
+ data: {
625
+ ...options.props,
626
+ ...options.variables,
627
+ },
628
+ },
629
+ };
630
+ {
631
+ const win = ensureModalRoot(false);
632
+ appArgs.target = win;
633
+ appArgs.hydrate = true;
634
+ }
635
+ return {
636
+ close,
637
+ show: () => {
638
+ if (app) {
639
+ return;
640
+ }
641
+ options.send('message_open');
642
+ app = new App(appArgs);
643
+ },
644
+ };
645
+ }
596
646
 
597
647
  const ENDPOINT = 'https://t.karte.io/collection';
598
648
  const collection = (config) => {
@@ -3227,4 +3277,4 @@ class ImageBlock extends SvelteComponent {
3227
3277
  }
3228
3278
  }
3229
3279
 
3230
- export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, closeApp, closed, collection, createApp, createFog, customAnimation, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getTransform, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showOnScroll, showOnTime, state, toBr };
3280
+ export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, closeApp, closed, collection, createApp, createFog, customAnimation, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getTransform, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showModal, showOnScroll, showOnTime, state, toBr };
@@ -390,24 +390,24 @@ declare function hideOnScroll<Props extends {
390
390
  hide_on_scroll: boolean;
391
391
  hide_on_scroll_rate: number;
392
392
  show_on_scroll_reenter: boolean;
393
- }>(props: Props, fn?: () => void): () => void;
393
+ }>(props: Props, fn?: () => void): (() => void) | null;
394
394
  declare function hideOnTime<Props extends {
395
395
  hide_on_time: boolean;
396
396
  hide_on_time_count: number;
397
- }>(props: Props, fn?: () => void): () => void;
397
+ }>(props: Props, fn?: () => void): (() => void) | null;
398
398
  declare function showOnScroll<Props extends {
399
399
  show_on_scroll: boolean;
400
400
  show_on_scroll_rate: number;
401
401
  show_on_scroll_reenter: boolean;
402
- }>(props: Props, fn?: Function): () => void;
402
+ }>(props: Props, fn?: Function): (() => void) | null;
403
403
  declare function showOnTime<Props extends {
404
404
  show_on_time: boolean;
405
405
  show_on_time_count: number;
406
- }>(props: Props, fn?: Function): () => void;
406
+ }>(props: Props, fn?: Function): (() => void) | null;
407
407
  /**
408
- * An options for {@link createApp}
408
+ * An options for {@link showModal}
409
409
  */
410
- interface AppOptions<Props, Variables> {
410
+ interface ModalOptions<Props, Variables> {
411
411
  /**
412
412
  * {@link Send} function to receive events triggered in Karte action.
413
413
  *
@@ -427,8 +427,48 @@ interface AppOptions<Props, Variables> {
427
427
  */
428
428
  variables?: Variables;
429
429
  }
430
+ // types of props to reference for internaly
431
+ interface _Props {
432
+ hide_on_scroll: boolean;
433
+ hide_on_scroll_rate: number;
434
+ show_on_scroll_reenter: boolean;
435
+ hide_on_time: boolean;
436
+ hide_on_time_count: number;
437
+ show_on_scroll: boolean;
438
+ show_on_scroll_rate: number;
439
+ show_on_time: boolean;
440
+ show_on_time_count: number;
441
+ }
442
+ /**
443
+ * Show the modal
444
+ *
445
+ * @param App - An entry point of svelte component.
446
+ * @param options - A {@link ModalOptions | options}
447
+ *
448
+ * @return A function to close the modal
449
+ */
450
+ declare function showModal<Props extends _Props, Variables>(App: typeof SvelteComponentDev, options?: ModalOptions<Props, Variables>): () => void;
451
+ declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
452
+ declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
453
+ declare function createFog({ color, opacity, zIndex, onclick }: {
454
+ color?: string;
455
+ opacity?: string;
456
+ zIndex?: number;
457
+ onclick: () => void;
458
+ }): {
459
+ fog: HTMLDivElement;
460
+ close: () => void;
461
+ };
462
+ type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
463
+ declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
464
+ /**
465
+ * An options for {@link createApp}
466
+ * @deprecated
467
+ */
468
+ type AppOptions<Props, Variables> = ModalOptions<Props, Variables>;
430
469
  /**
431
470
  * App application instance that is with {@link createApp}
471
+ * @deprecated
432
472
  *
433
473
  * @description Currently, svelte component is supported only.
434
474
  */
@@ -443,26 +483,15 @@ interface App {
443
483
  show: () => void;
444
484
  }
445
485
  /**
446
- * Create an application instance.
486
+ * Create an application instance
487
+ * @deprecated
447
488
  *
448
489
  * @param App - An entry point of svelte component.
449
490
  * @param options - An {@link AppOptions | options}
450
- * @return An {@link App | app} instance
491
+ *
492
+ * @return A function to close the modal
451
493
  */
452
- declare const createApp: <Props, Variables>(App: typeof SvelteComponentDev, options?: AppOptions<Props, Variables>) => App;
453
- declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
454
- declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
455
- declare function createFog({ color, opacity, zIndex, onclick }: {
456
- color?: string;
457
- opacity?: string;
458
- zIndex?: number;
459
- onclick: () => void;
460
- }): {
461
- fog: HTMLDivElement;
462
- close: () => void;
463
- };
464
- type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
465
- declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
494
+ declare function createApp<Props, Variables>(App: typeof SvelteComponentDev, options?: AppOptions<Props, Variables>): App;
466
495
  declare const collection: (config: {
467
496
  api_key: string;
468
497
  table: string;
@@ -476,7 +505,7 @@ declare const collection: (config: {
476
505
  } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
477
506
  set(key: string, value: string, cb: (err: Error | null) => void): void;
478
507
  };
479
- export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, customAnimation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, AppOptions, App, createApp, ensureModalRoot, h, createFog, EmbedLogic, embed, collection };
508
+ export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, customAnimation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ModalOptions, showModal, ensureModalRoot, h, createFog, EmbedLogic, embed, AppOptions, App, createApp, collection };
480
509
  export { default as State } from './components/State.svelte';
481
510
  export { default as StateItem } from './components/StateItem.svelte';
482
511
  export { default as Modal } from './components/Modal.svelte';
package/dist/index.es.js CHANGED
@@ -439,21 +439,20 @@ const ObjectFits = ['fill', 'contain', 'cover'];
439
439
  const Repeats = ['repeat', 'space', 'round', 'no-repeat'];
440
440
  const BackgroundSizes = ['cover', 'contain', 'auto'];
441
441
 
442
- const NOOP = () => { };
443
442
  function hideOnScroll(props, fn) {
444
443
  return props.hide_on_scroll && props.hide_on_scroll_rate
445
444
  ? onScroll(props.hide_on_scroll_rate / 100, () => {
446
445
  fn && fn();
447
446
  return props.show_on_scroll_reenter;
448
447
  })
449
- : NOOP;
448
+ : null;
450
449
  }
451
450
  function hideOnTime(props, fn) {
452
451
  return props.hide_on_time && props.hide_on_time_count
453
452
  ? onTime(props.hide_on_time_count * 1000, () => {
454
453
  fn && fn();
455
454
  })
456
- : NOOP;
455
+ : null;
457
456
  }
458
457
  function showOnScroll(props, fn) {
459
458
  return props.show_on_scroll && props.show_on_scroll_rate
@@ -461,28 +460,30 @@ function showOnScroll(props, fn) {
461
460
  fn && fn();
462
461
  return props.show_on_scroll_reenter;
463
462
  })
464
- : NOOP;
463
+ : null;
465
464
  }
466
465
  function showOnTime(props, fn) {
467
466
  return props.show_on_time && props.show_on_time_count
468
467
  ? onTime(props.show_on_time_count * 1000, () => {
469
468
  fn && fn();
470
469
  })
471
- : NOOP;
470
+ : null;
472
471
  }
473
472
 
473
+ const NOOP = () => { };
474
474
  /**
475
- * Create an application instance.
475
+ * Show the modal
476
476
  *
477
477
  * @param App - An entry point of svelte component.
478
- * @param options - An {@link AppOptions | options}
479
- * @return An {@link App | app} instance
478
+ * @param options - A {@link ModalOptions | options}
479
+ *
480
+ * @return A function to close the modal
480
481
  */
481
- const createApp = (App, options = {
482
+ function showModal(App, options = {
482
483
  send: () => { },
483
484
  props: {},
484
485
  variables: {},
485
- }) => {
486
+ }) {
486
487
  let app = null;
487
488
  const close = () => {
488
489
  if (app) {
@@ -490,32 +491,40 @@ const createApp = (App, options = {
490
491
  app = null;
491
492
  }
492
493
  };
493
- const appArgs = {
494
- target: null,
495
- props: {
496
- send: options.send,
497
- close,
498
- data: {
499
- ...options.props,
500
- ...options.variables,
494
+ const show = () => {
495
+ if (app) {
496
+ return;
497
+ }
498
+ options.send('message_open');
499
+ app = new App({
500
+ target: ensureModalRoot(!false),
501
+ hydrate: false,
502
+ props: {
503
+ send: options.send,
504
+ close,
505
+ data: {
506
+ ...options.props,
507
+ ...options.variables,
508
+ },
501
509
  },
502
- },
510
+ });
503
511
  };
504
- {
505
- const win = ensureModalRoot(true);
506
- appArgs.target = win;
507
- }
508
- return {
509
- close,
510
- show: () => {
511
- if (app) {
512
- return;
513
- }
514
- options.send('message_open');
515
- app = new App(appArgs);
516
- },
512
+ // if in hydrate mode (preview), nothing is done, since modal will be disposed and closed in the preview module
513
+ const hideCleanup = hideOnScroll(options.props, close) || hideOnTime(options.props, close) || NOOP
514
+ ;
515
+ const _show = () => {
516
+ show();
517
+ return close;
517
518
  };
518
- };
519
+ // if in hydrate mode (preview), always show modal
520
+ const showCleanup = showOnScroll(options.props, show) || showOnTime(options.props, show) || _show()
521
+ ;
522
+ return () => {
523
+ close();
524
+ showCleanup();
525
+ hideCleanup();
526
+ };
527
+ }
519
528
  const KARTE_MODAL_ROOT = 'karte-modal-root';
520
529
  function ensureModalRoot(useShadow = true) {
521
530
  let el = document.getElementById(KARTE_MODAL_ROOT);
@@ -592,6 +601,53 @@ function embed(target, replace, embed_method) {
592
601
  target.before(replace);
593
602
  }
594
603
  }
604
+ /**
605
+ * Create an application instance
606
+ * @deprecated
607
+ *
608
+ * @param App - An entry point of svelte component.
609
+ * @param options - An {@link AppOptions | options}
610
+ *
611
+ * @return A function to close the modal
612
+ */
613
+ function createApp(App, options = {
614
+ send: () => { },
615
+ props: {},
616
+ variables: {},
617
+ }) {
618
+ let app = null;
619
+ const close = () => {
620
+ if (app) {
621
+ app.$destroy();
622
+ app = null;
623
+ }
624
+ };
625
+ const appArgs = {
626
+ target: null,
627
+ props: {
628
+ send: options.send,
629
+ close,
630
+ data: {
631
+ ...options.props,
632
+ ...options.variables,
633
+ },
634
+ },
635
+ };
636
+ {
637
+ const win = ensureModalRoot(true);
638
+ appArgs.target = win;
639
+ }
640
+ return {
641
+ close,
642
+ show: () => {
643
+ if (app) {
644
+ return;
645
+ }
646
+ options.send('message_open');
647
+ app = new App(appArgs);
648
+ },
649
+ };
650
+ }
595
651
 
596
652
  const ENDPOINT = 'https://t.karte.io/collection';
597
653
  const collection = (config) => {
@@ -2986,4 +3042,4 @@ class ImageBlock extends SvelteComponent {
2986
3042
  }
2987
3043
  }
2988
3044
 
2989
- export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, closeApp, closed, collection, createApp, createFog, customAnimation, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getTransform, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showOnScroll, showOnTime, state, toBr };
3045
+ export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, closeApp, closed, collection, createApp, createFog, customAnimation, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getTransform, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showModal, showOnScroll, showOnTime, state, toBr };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plaidev/karte-action-sdk",
3
- "version": "1.1.63",
3
+ "version": "1.1.64",
4
4
  "author": "Plaid Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "module": "./dist/index.es.js",