@plaidev/karte-action-sdk 1.1.266-29065938.e3ec46c6 → 1.1.267-29071733.fabf64a6

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__';
@@ -3381,6 +3381,54 @@ const execOnClickOperation = (onClickOperation) => {
3381
3381
  const haveFunction = (onClickOperation) => {
3382
3382
  return onClickOperation.operation !== 'none';
3383
3383
  };
3384
+ function getAnimation(animation) {
3385
+ switch (animation.type) {
3386
+ case 'fade':
3387
+ return `opacity: ${animation.progress}`;
3388
+ case 'bounce': {
3389
+ const translateX = animation.x;
3390
+ const translateY = animation.y;
3391
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0) scale(${animation.progress});`;
3392
+ }
3393
+ case 'slide-down': {
3394
+ const translateX = animation.x;
3395
+ const translateY = animation.y - 100 * (1 - animation.progress);
3396
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3397
+ }
3398
+ case 'slide-up': {
3399
+ const translateX = animation.x;
3400
+ const translateY = animation.y + 100 * (1 - animation.progress);
3401
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3402
+ }
3403
+ case 'slide-left': {
3404
+ const translateX = animation.x + 100 * (1 - animation.progress);
3405
+ const translateY = animation.y;
3406
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3407
+ }
3408
+ case 'slide-right': {
3409
+ const translateX = animation.x - 100 * (1 - animation.progress);
3410
+ const translateY = animation.y;
3411
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3412
+ }
3413
+ case 'none': {
3414
+ const translateX = animation.x;
3415
+ const translateY = animation.y;
3416
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3417
+ }
3418
+ default:
3419
+ console.warn(`[action-sdk] invalid '${animation}', so we use 'transform: none' instead`);
3420
+ return 'transform: none';
3421
+ }
3422
+ }
3423
+ const EASING = {
3424
+ fade: linear,
3425
+ bounce: elasticOut,
3426
+ 'slide-down': cubicOut,
3427
+ 'slide-up': cubicOut,
3428
+ 'slide-left': cubicOut,
3429
+ 'slide-right': cubicOut,
3430
+ none: linear,
3431
+ };
3384
3432
  /**
3385
3433
  * The function to activate svelte animation.
3386
3434
  *
@@ -3396,6 +3444,35 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
3396
3444
  return {};
3397
3445
  }
3398
3446
  }
3447
+ /**
3448
+ * The function to activate svelte animation v2.
3449
+ *
3450
+ * @param node - A target node of animation. This argument is passed by svelte, by default.
3451
+ * @param customAnimationOptions - A custom animation option object
3452
+ *
3453
+ * @see {@link https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions| Custom transition functions} for detail documentation
3454
+ *
3455
+ * @internal
3456
+ */
3457
+ function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
3458
+ if (disabled) {
3459
+ return {};
3460
+ }
3461
+ let [x, y] = [0, 0];
3462
+ for (const { query, x: tx, y: ty } of transforms) {
3463
+ if (query == null || window.matchMedia(query).matches) {
3464
+ x = tx;
3465
+ y = ty;
3466
+ break;
3467
+ }
3468
+ }
3469
+ return {
3470
+ delay,
3471
+ duration,
3472
+ easing: EASING[animationStyle],
3473
+ css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
3474
+ };
3475
+ }
3399
3476
 
3400
3477
  /* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
3401
3478
 
@@ -18651,7 +18728,7 @@ function add_css$9(target) {
18651
18728
  append_styles(target, "svelte-45ue06", "*{box-sizing:border-box}.modal.svelte-45ue06{position:fixed;z-index:2147483647;display:flex}.modal.svelte-45ue06 > .button{flex:auto;display:flex}@media screen and (min-width: 641px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc);margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
18652
18729
  }
18653
18730
 
18654
- // (220:0) {:else}
18731
+ // (222:0) {:else}
18655
18732
  function create_else_block(ctx) {
18656
18733
  let backgroundoverlay;
18657
18734
  let current;
@@ -18698,7 +18775,7 @@ function create_else_block(ctx) {
18698
18775
  };
18699
18776
  }
18700
18777
 
18701
- // (209:24)
18778
+ // (211:24)
18702
18779
  function create_if_block_2(ctx) {
18703
18780
  let backgroundoverlay0;
18704
18781
  let t;
@@ -18772,7 +18849,7 @@ function create_if_block_2(ctx) {
18772
18849
  };
18773
18850
  }
18774
18851
 
18775
- // (207:0) {#if isCanvasPreview}
18852
+ // (209:0) {#if isCanvasPreview}
18776
18853
  function create_if_block_1$1(ctx) {
18777
18854
  return {
18778
18855
  c: noop,
@@ -18785,14 +18862,14 @@ function create_if_block_1$1(ctx) {
18785
18862
  };
18786
18863
  }
18787
18864
 
18788
- // (223:0) {#if visible}
18865
+ // (225:0) {#if visible}
18789
18866
  function create_if_block$3(ctx) {
18790
18867
  let div;
18791
18868
  let div_class_value;
18792
18869
  let div_intro;
18793
18870
  let current;
18794
- const default_slot_template = /*#slots*/ ctx[26].default;
18795
- const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[25], null);
18871
+ const default_slot_template = /*#slots*/ ctx[27].default;
18872
+ const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
18796
18873
 
18797
18874
  return {
18798
18875
  c() {
@@ -18819,7 +18896,7 @@ function create_if_block$3(ctx) {
18819
18896
  attr(div, "role", "dialog");
18820
18897
  attr(div, "aria-modal", "true");
18821
18898
  attr(div, "data-layer-id", /*layerId*/ ctx[2]);
18822
- attr(div, "style", Array.from(/*modalStyles*/ ctx[14]).join(';'));
18899
+ attr(div, "style", Array.from(/*modalStyles*/ ctx[15]).join(';'));
18823
18900
  },
18824
18901
  m(target, anchor) {
18825
18902
  insert_hydration(target, div, anchor);
@@ -18828,22 +18905,22 @@ function create_if_block$3(ctx) {
18828
18905
  default_slot.m(div, null);
18829
18906
  }
18830
18907
 
18831
- /*div_binding*/ ctx[27](div);
18908
+ /*div_binding*/ ctx[28](div);
18832
18909
  current = true;
18833
18910
  },
18834
18911
  p(new_ctx, dirty) {
18835
18912
  ctx = new_ctx;
18836
18913
 
18837
18914
  if (default_slot) {
18838
- if (default_slot.p && (!current || dirty & /*$$scope*/ 33554432)) {
18915
+ if (default_slot.p && (!current || dirty & /*$$scope*/ 67108864)) {
18839
18916
  update_slot_base(
18840
18917
  default_slot,
18841
18918
  default_slot_template,
18842
18919
  ctx,
18843
- /*$$scope*/ ctx[25],
18920
+ /*$$scope*/ ctx[26],
18844
18921
  !current
18845
- ? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
18846
- : get_slot_changes(default_slot_template, /*$$scope*/ ctx[25], dirty, null),
18922
+ ? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
18923
+ : get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
18847
18924
  null
18848
18925
  );
18849
18926
  }
@@ -18863,9 +18940,10 @@ function create_if_block$3(ctx) {
18863
18940
 
18864
18941
  if (!div_intro) {
18865
18942
  add_render_callback(() => {
18866
- div_intro = create_in_transition(div, customAnimation, {
18943
+ div_intro = create_in_transition(div, customAnimationV2, {
18867
18944
  transforms: /*transforms*/ ctx[3],
18868
- animationStyle: /*animation*/ ctx[1]
18945
+ animationStyle: /*animation*/ ctx[1],
18946
+ disabled: !/*isOnSite*/ ctx[14]
18869
18947
  });
18870
18948
 
18871
18949
  div_intro.start();
@@ -18881,7 +18959,7 @@ function create_if_block$3(ctx) {
18881
18959
  d(detaching) {
18882
18960
  if (detaching) detach(div);
18883
18961
  if (default_slot) default_slot.d(detaching);
18884
- /*div_binding*/ ctx[27](null);
18962
+ /*div_binding*/ ctx[28](null);
18885
18963
  }
18886
18964
  };
18887
18965
  }
@@ -19027,6 +19105,8 @@ function instance$d($$self, $$props, $$invalidate) {
19027
19105
  let { layerId = '' } = $$props;
19028
19106
  const { brandKit } = useBrandKit();
19029
19107
  const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
19108
+ const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
19109
+ console.log('isOnSite', isOnSite);
19030
19110
 
19031
19111
  // モーダル背景の設定
19032
19112
  const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
@@ -19059,20 +19139,20 @@ function instance$d($$self, $$props, $$invalidate) {
19059
19139
 
19060
19140
  $$self.$$set = $$props => {
19061
19141
  if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
19062
- if ('placement' in $$props) $$invalidate(15, placement = $$props.placement);
19063
- if ('breakPoint' in $$props) $$invalidate(16, breakPoint = $$props.breakPoint);
19064
- if ('elasticity' in $$props) $$invalidate(17, elasticity = $$props.elasticity);
19142
+ if ('placement' in $$props) $$invalidate(16, placement = $$props.placement);
19143
+ if ('breakPoint' in $$props) $$invalidate(17, breakPoint = $$props.breakPoint);
19144
+ if ('elasticity' in $$props) $$invalidate(18, elasticity = $$props.elasticity);
19065
19145
  if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
19066
- if ('props' in $$props) $$invalidate(18, props = $$props.props);
19067
- if ('closeEventName' in $$props) $$invalidate(19, closeEventName = $$props.closeEventName);
19068
- if ('closeEventValue' in $$props) $$invalidate(20, closeEventValue = $$props.closeEventValue);
19146
+ if ('props' in $$props) $$invalidate(19, props = $$props.props);
19147
+ if ('closeEventName' in $$props) $$invalidate(20, closeEventName = $$props.closeEventName);
19148
+ if ('closeEventValue' in $$props) $$invalidate(21, closeEventValue = $$props.closeEventValue);
19069
19149
  if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
19070
- if ('$$scope' in $$props) $$invalidate(25, $$scope = $$props.$$scope);
19150
+ if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
19071
19151
  };
19072
19152
 
19073
19153
  $$self.$$.update = () => {
19074
- if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 1572864) {
19075
- $$invalidate(24, close = () => {
19154
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 3145728) {
19155
+ $$invalidate(25, close = () => {
19076
19156
  const onClose = { operation: 'closeApp', args: ['button'] };
19077
19157
 
19078
19158
  if (closeEventName) {
@@ -19083,7 +19163,7 @@ function instance$d($$self, $$props, $$invalidate) {
19083
19163
  });
19084
19164
  }
19085
19165
 
19086
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
19166
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
19087
19167
  {
19088
19168
  if (!isCanvasPreview && isExistBackgroundOverlayValue) {
19089
19169
  $$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
@@ -19098,29 +19178,29 @@ function instance$d($$self, $$props, $$invalidate) {
19098
19178
  }
19099
19179
  }
19100
19180
 
19101
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
19181
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
19102
19182
  {
19103
19183
  if (placement && placement.backgroundClick) {
19104
- $$invalidate(21, backgroundClickFunction = placement.backgroundClick);
19184
+ $$invalidate(22, backgroundClickFunction = placement.backgroundClick);
19105
19185
  }
19106
19186
 
19107
19187
  if (useBreakPoint) {
19108
19188
  const pc = breakPoint?.PC?.placement?.backgroundClick;
19109
19189
 
19110
19190
  if (pc) {
19111
- $$invalidate(22, backgroundClickFunctionPC = pc);
19191
+ $$invalidate(23, backgroundClickFunctionPC = pc);
19112
19192
  }
19113
19193
 
19114
19194
  const sp = breakPoint?.SP?.placement?.backgroundClick;
19115
19195
 
19116
19196
  if (sp) {
19117
- $$invalidate(23, backgroundClickFunctionSP = sp);
19197
+ $$invalidate(24, backgroundClickFunctionSP = sp);
19118
19198
  }
19119
19199
  }
19120
19200
  }
19121
19201
  }
19122
19202
 
19123
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 3670016) {
19203
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 7340032) {
19124
19204
  $$invalidate(12, backgroundClick = () => {
19125
19205
  if (closeEventName) {
19126
19206
  send_event(closeEventName, closeEventValue);
@@ -19130,7 +19210,7 @@ function instance$d($$self, $$props, $$invalidate) {
19130
19210
  });
19131
19211
  }
19132
19212
 
19133
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 5767168) {
19213
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 11534336) {
19134
19214
  $$invalidate(11, backgroundClickPC = () => {
19135
19215
  if (closeEventName) {
19136
19216
  send_event(closeEventName, closeEventValue);
@@ -19140,7 +19220,7 @@ function instance$d($$self, $$props, $$invalidate) {
19140
19220
  });
19141
19221
  }
19142
19222
 
19143
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 9961472) {
19223
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 19922944) {
19144
19224
  $$invalidate(10, backgroundClickSP = () => {
19145
19225
  if (closeEventName) {
19146
19226
  send_event(closeEventName, closeEventValue);
@@ -19150,7 +19230,7 @@ function instance$d($$self, $$props, $$invalidate) {
19150
19230
  });
19151
19231
  }
19152
19232
 
19153
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 98313) {
19233
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 196617) {
19154
19234
  // 表示位置のスタイルとアニメーションの動きを設定
19155
19235
  {
19156
19236
  // 表示位置のスタイルの設定
@@ -19198,7 +19278,7 @@ function instance$d($$self, $$props, $$invalidate) {
19198
19278
  }
19199
19279
  }
19200
19280
 
19201
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 360449) {
19281
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 720897) {
19202
19282
  // 表示位置の調整のスタイルを設定
19203
19283
  {
19204
19284
  let margin = DefaultModalPlacement.margin;
@@ -19242,7 +19322,7 @@ function instance$d($$self, $$props, $$invalidate) {
19242
19322
  }
19243
19323
  }
19244
19324
 
19245
- if ($$self.$$.dirty & /*close*/ 16777216) {
19325
+ if ($$self.$$.dirty & /*close*/ 33554432) {
19246
19326
  $$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
19247
19327
  }
19248
19328
  };
@@ -19267,6 +19347,7 @@ function instance$d($$self, $$props, $$invalidate) {
19267
19347
  backgroundClickPC,
19268
19348
  backgroundClick,
19269
19349
  isCanvasPreview,
19350
+ isOnSite,
19270
19351
  modalStyles,
19271
19352
  placement,
19272
19353
  breakPoint,
@@ -19296,13 +19377,13 @@ class Modal extends SvelteComponent {
19296
19377
  safe_not_equal,
19297
19378
  {
19298
19379
  useBreakPoint: 0,
19299
- placement: 15,
19300
- breakPoint: 16,
19301
- elasticity: 17,
19380
+ placement: 16,
19381
+ breakPoint: 17,
19382
+ elasticity: 18,
19302
19383
  animation: 1,
19303
- props: 18,
19304
- closeEventName: 19,
19305
- closeEventValue: 20,
19384
+ props: 19,
19385
+ closeEventName: 20,
19386
+ closeEventValue: 21,
19306
19387
  layerId: 2
19307
19388
  },
19308
19389
  add_css$9
package/dist/index.es.js CHANGED
@@ -3479,6 +3479,35 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
3479
3479
  css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
3480
3480
  };
3481
3481
  }
3482
+ /**
3483
+ * The function to activate svelte animation v2.
3484
+ *
3485
+ * @param node - A target node of animation. This argument is passed by svelte, by default.
3486
+ * @param customAnimationOptions - A custom animation option object
3487
+ *
3488
+ * @see {@link https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions| Custom transition functions} for detail documentation
3489
+ *
3490
+ * @internal
3491
+ */
3492
+ function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
3493
+ if (disabled) {
3494
+ return {};
3495
+ }
3496
+ let [x, y] = [0, 0];
3497
+ for (const { query, x: tx, y: ty } of transforms) {
3498
+ if (query == null || window.matchMedia(query).matches) {
3499
+ x = tx;
3500
+ y = ty;
3501
+ break;
3502
+ }
3503
+ }
3504
+ return {
3505
+ delay,
3506
+ duration,
3507
+ easing: EASING[animationStyle],
3508
+ css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
3509
+ };
3510
+ }
3482
3511
 
3483
3512
  /* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
3484
3513
 
@@ -17281,7 +17310,7 @@ function add_css$9(target) {
17281
17310
  append_styles(target, "svelte-45ue06", "*{box-sizing:border-box}.modal.svelte-45ue06{position:fixed;z-index:2147483647;display:flex}.modal.svelte-45ue06 > .button{flex:auto;display:flex}@media screen and (min-width: 641px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc);margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
17282
17311
  }
17283
17312
 
17284
- // (220:0) {:else}
17313
+ // (222:0) {:else}
17285
17314
  function create_else_block(ctx) {
17286
17315
  let backgroundoverlay;
17287
17316
  let current;
@@ -17325,7 +17354,7 @@ function create_else_block(ctx) {
17325
17354
  };
17326
17355
  }
17327
17356
 
17328
- // (209:24)
17357
+ // (211:24)
17329
17358
  function create_if_block_2(ctx) {
17330
17359
  let backgroundoverlay0;
17331
17360
  let t;
@@ -17394,7 +17423,7 @@ function create_if_block_2(ctx) {
17394
17423
  };
17395
17424
  }
17396
17425
 
17397
- // (207:0) {#if isCanvasPreview}
17426
+ // (209:0) {#if isCanvasPreview}
17398
17427
  function create_if_block_1$1(ctx) {
17399
17428
  return {
17400
17429
  c: noop,
@@ -17406,14 +17435,14 @@ function create_if_block_1$1(ctx) {
17406
17435
  };
17407
17436
  }
17408
17437
 
17409
- // (223:0) {#if visible}
17438
+ // (225:0) {#if visible}
17410
17439
  function create_if_block$3(ctx) {
17411
17440
  let div;
17412
17441
  let div_class_value;
17413
17442
  let div_intro;
17414
17443
  let current;
17415
- const default_slot_template = /*#slots*/ ctx[26].default;
17416
- const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[25], null);
17444
+ const default_slot_template = /*#slots*/ ctx[27].default;
17445
+ const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
17417
17446
 
17418
17447
  return {
17419
17448
  c() {
@@ -17423,7 +17452,7 @@ function create_if_block$3(ctx) {
17423
17452
  attr(div, "role", "dialog");
17424
17453
  attr(div, "aria-modal", "true");
17425
17454
  attr(div, "data-layer-id", /*layerId*/ ctx[2]);
17426
- attr(div, "style", Array.from(/*modalStyles*/ ctx[14]).join(';'));
17455
+ attr(div, "style", Array.from(/*modalStyles*/ ctx[15]).join(';'));
17427
17456
  },
17428
17457
  m(target, anchor) {
17429
17458
  insert(target, div, anchor);
@@ -17432,22 +17461,22 @@ function create_if_block$3(ctx) {
17432
17461
  default_slot.m(div, null);
17433
17462
  }
17434
17463
 
17435
- /*div_binding*/ ctx[27](div);
17464
+ /*div_binding*/ ctx[28](div);
17436
17465
  current = true;
17437
17466
  },
17438
17467
  p(new_ctx, dirty) {
17439
17468
  ctx = new_ctx;
17440
17469
 
17441
17470
  if (default_slot) {
17442
- if (default_slot.p && (!current || dirty & /*$$scope*/ 33554432)) {
17471
+ if (default_slot.p && (!current || dirty & /*$$scope*/ 67108864)) {
17443
17472
  update_slot_base(
17444
17473
  default_slot,
17445
17474
  default_slot_template,
17446
17475
  ctx,
17447
- /*$$scope*/ ctx[25],
17476
+ /*$$scope*/ ctx[26],
17448
17477
  !current
17449
- ? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
17450
- : get_slot_changes(default_slot_template, /*$$scope*/ ctx[25], dirty, null),
17478
+ ? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
17479
+ : get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
17451
17480
  null
17452
17481
  );
17453
17482
  }
@@ -17467,9 +17496,10 @@ function create_if_block$3(ctx) {
17467
17496
 
17468
17497
  if (!div_intro) {
17469
17498
  add_render_callback(() => {
17470
- div_intro = create_in_transition(div, customAnimation, {
17499
+ div_intro = create_in_transition(div, customAnimationV2, {
17471
17500
  transforms: /*transforms*/ ctx[3],
17472
- animationStyle: /*animation*/ ctx[1]
17501
+ animationStyle: /*animation*/ ctx[1],
17502
+ disabled: !/*isOnSite*/ ctx[14]
17473
17503
  });
17474
17504
 
17475
17505
  div_intro.start();
@@ -17485,7 +17515,7 @@ function create_if_block$3(ctx) {
17485
17515
  d(detaching) {
17486
17516
  if (detaching) detach(div);
17487
17517
  if (default_slot) default_slot.d(detaching);
17488
- /*div_binding*/ ctx[27](null);
17518
+ /*div_binding*/ ctx[28](null);
17489
17519
  }
17490
17520
  };
17491
17521
  }
@@ -17625,6 +17655,8 @@ function instance$d($$self, $$props, $$invalidate) {
17625
17655
  let { layerId = '' } = $$props;
17626
17656
  const { brandKit } = useBrandKit();
17627
17657
  const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
17658
+ const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
17659
+ console.log('isOnSite', isOnSite);
17628
17660
 
17629
17661
  // モーダル背景の設定
17630
17662
  const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
@@ -17657,20 +17689,20 @@ function instance$d($$self, $$props, $$invalidate) {
17657
17689
 
17658
17690
  $$self.$$set = $$props => {
17659
17691
  if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
17660
- if ('placement' in $$props) $$invalidate(15, placement = $$props.placement);
17661
- if ('breakPoint' in $$props) $$invalidate(16, breakPoint = $$props.breakPoint);
17662
- if ('elasticity' in $$props) $$invalidate(17, elasticity = $$props.elasticity);
17692
+ if ('placement' in $$props) $$invalidate(16, placement = $$props.placement);
17693
+ if ('breakPoint' in $$props) $$invalidate(17, breakPoint = $$props.breakPoint);
17694
+ if ('elasticity' in $$props) $$invalidate(18, elasticity = $$props.elasticity);
17663
17695
  if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
17664
- if ('props' in $$props) $$invalidate(18, props = $$props.props);
17665
- if ('closeEventName' in $$props) $$invalidate(19, closeEventName = $$props.closeEventName);
17666
- if ('closeEventValue' in $$props) $$invalidate(20, closeEventValue = $$props.closeEventValue);
17696
+ if ('props' in $$props) $$invalidate(19, props = $$props.props);
17697
+ if ('closeEventName' in $$props) $$invalidate(20, closeEventName = $$props.closeEventName);
17698
+ if ('closeEventValue' in $$props) $$invalidate(21, closeEventValue = $$props.closeEventValue);
17667
17699
  if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
17668
- if ('$$scope' in $$props) $$invalidate(25, $$scope = $$props.$$scope);
17700
+ if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
17669
17701
  };
17670
17702
 
17671
17703
  $$self.$$.update = () => {
17672
- if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 1572864) {
17673
- $$invalidate(24, close = () => {
17704
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 3145728) {
17705
+ $$invalidate(25, close = () => {
17674
17706
  const onClose = { operation: 'closeApp', args: ['button'] };
17675
17707
 
17676
17708
  if (closeEventName) {
@@ -17681,7 +17713,7 @@ function instance$d($$self, $$props, $$invalidate) {
17681
17713
  });
17682
17714
  }
17683
17715
 
17684
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
17716
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
17685
17717
  {
17686
17718
  if (!isCanvasPreview && isExistBackgroundOverlayValue) {
17687
17719
  $$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
@@ -17696,29 +17728,29 @@ function instance$d($$self, $$props, $$invalidate) {
17696
17728
  }
17697
17729
  }
17698
17730
 
17699
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
17731
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
17700
17732
  {
17701
17733
  if (placement && placement.backgroundClick) {
17702
- $$invalidate(21, backgroundClickFunction = placement.backgroundClick);
17734
+ $$invalidate(22, backgroundClickFunction = placement.backgroundClick);
17703
17735
  }
17704
17736
 
17705
17737
  if (useBreakPoint) {
17706
17738
  const pc = breakPoint?.PC?.placement?.backgroundClick;
17707
17739
 
17708
17740
  if (pc) {
17709
- $$invalidate(22, backgroundClickFunctionPC = pc);
17741
+ $$invalidate(23, backgroundClickFunctionPC = pc);
17710
17742
  }
17711
17743
 
17712
17744
  const sp = breakPoint?.SP?.placement?.backgroundClick;
17713
17745
 
17714
17746
  if (sp) {
17715
- $$invalidate(23, backgroundClickFunctionSP = sp);
17747
+ $$invalidate(24, backgroundClickFunctionSP = sp);
17716
17748
  }
17717
17749
  }
17718
17750
  }
17719
17751
  }
17720
17752
 
17721
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 3670016) {
17753
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 7340032) {
17722
17754
  $$invalidate(12, backgroundClick = () => {
17723
17755
  if (closeEventName) {
17724
17756
  send_event(closeEventName, closeEventValue);
@@ -17728,7 +17760,7 @@ function instance$d($$self, $$props, $$invalidate) {
17728
17760
  });
17729
17761
  }
17730
17762
 
17731
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 5767168) {
17763
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 11534336) {
17732
17764
  $$invalidate(11, backgroundClickPC = () => {
17733
17765
  if (closeEventName) {
17734
17766
  send_event(closeEventName, closeEventValue);
@@ -17738,7 +17770,7 @@ function instance$d($$self, $$props, $$invalidate) {
17738
17770
  });
17739
17771
  }
17740
17772
 
17741
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 9961472) {
17773
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 19922944) {
17742
17774
  $$invalidate(10, backgroundClickSP = () => {
17743
17775
  if (closeEventName) {
17744
17776
  send_event(closeEventName, closeEventValue);
@@ -17748,7 +17780,7 @@ function instance$d($$self, $$props, $$invalidate) {
17748
17780
  });
17749
17781
  }
17750
17782
 
17751
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 98313) {
17783
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 196617) {
17752
17784
  // 表示位置のスタイルとアニメーションの動きを設定
17753
17785
  {
17754
17786
  // 表示位置のスタイルの設定
@@ -17796,7 +17828,7 @@ function instance$d($$self, $$props, $$invalidate) {
17796
17828
  }
17797
17829
  }
17798
17830
 
17799
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 360449) {
17831
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 720897) {
17800
17832
  // 表示位置の調整のスタイルを設定
17801
17833
  {
17802
17834
  let margin = DefaultModalPlacement.margin;
@@ -17840,7 +17872,7 @@ function instance$d($$self, $$props, $$invalidate) {
17840
17872
  }
17841
17873
  }
17842
17874
 
17843
- if ($$self.$$.dirty & /*close*/ 16777216) {
17875
+ if ($$self.$$.dirty & /*close*/ 33554432) {
17844
17876
  $$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
17845
17877
  }
17846
17878
  };
@@ -17865,6 +17897,7 @@ function instance$d($$self, $$props, $$invalidate) {
17865
17897
  backgroundClickPC,
17866
17898
  backgroundClick,
17867
17899
  isCanvasPreview,
17900
+ isOnSite,
17868
17901
  modalStyles,
17869
17902
  placement,
17870
17903
  breakPoint,
@@ -17894,13 +17927,13 @@ class Modal extends SvelteComponent {
17894
17927
  safe_not_equal,
17895
17928
  {
17896
17929
  useBreakPoint: 0,
17897
- placement: 15,
17898
- breakPoint: 16,
17899
- elasticity: 17,
17930
+ placement: 16,
17931
+ breakPoint: 17,
17932
+ elasticity: 18,
17900
17933
  animation: 1,
17901
- props: 18,
17902
- closeEventName: 19,
17903
- closeEventValue: 20,
17934
+ props: 19,
17935
+ closeEventName: 20,
17936
+ closeEventValue: 21,
17904
17937
  layerId: 2
17905
17938
  },
17906
17939
  add_css$9
@@ -4,7 +4,7 @@ import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeU
4
4
  import 'svelte/internal/disclose-version';
5
5
  import 'svelte/internal/flags/legacy';
6
6
  import * as $ from 'svelte/internal/client';
7
- import 'svelte/easing';
7
+ import { linear, elasticOut, cubicOut } from 'svelte/easing';
8
8
 
9
9
  /** @internal */
10
10
  const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
@@ -3362,8 +3362,56 @@ const execOnClickOperation = (onClickOperation) => {
3362
3362
  bootChat(...onClickOperation.args)();
3363
3363
  }
3364
3364
  };
3365
+ function getAnimation(animation) {
3366
+ switch (animation.type) {
3367
+ case 'fade':
3368
+ return `opacity: ${animation.progress}`;
3369
+ case 'bounce': {
3370
+ const translateX = animation.x;
3371
+ const translateY = animation.y;
3372
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0) scale(${animation.progress});`;
3373
+ }
3374
+ case 'slide-down': {
3375
+ const translateX = animation.x;
3376
+ const translateY = animation.y - 100 * (1 - animation.progress);
3377
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3378
+ }
3379
+ case 'slide-up': {
3380
+ const translateX = animation.x;
3381
+ const translateY = animation.y + 100 * (1 - animation.progress);
3382
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3383
+ }
3384
+ case 'slide-left': {
3385
+ const translateX = animation.x + 100 * (1 - animation.progress);
3386
+ const translateY = animation.y;
3387
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3388
+ }
3389
+ case 'slide-right': {
3390
+ const translateX = animation.x - 100 * (1 - animation.progress);
3391
+ const translateY = animation.y;
3392
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3393
+ }
3394
+ case 'none': {
3395
+ const translateX = animation.x;
3396
+ const translateY = animation.y;
3397
+ return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
3398
+ }
3399
+ default:
3400
+ console.warn(`[action-sdk] invalid '${animation}', so we use 'transform: none' instead`);
3401
+ return 'transform: none';
3402
+ }
3403
+ }
3404
+ const EASING = {
3405
+ fade: linear,
3406
+ bounce: elasticOut,
3407
+ 'slide-down': cubicOut,
3408
+ 'slide-up': cubicOut,
3409
+ 'slide-left': cubicOut,
3410
+ 'slide-right': cubicOut,
3411
+ none: linear,
3412
+ };
3365
3413
  /**
3366
- * The function to activate svelte animation.
3414
+ * The function to activate svelte animation v2.
3367
3415
  *
3368
3416
  * @param node - A target node of animation. This argument is passed by svelte, by default.
3369
3417
  * @param customAnimationOptions - A custom animation option object
@@ -3372,10 +3420,24 @@ const execOnClickOperation = (onClickOperation) => {
3372
3420
  *
3373
3421
  * @internal
3374
3422
  */
3375
- function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3376
- {
3423
+ function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
3424
+ if (disabled) {
3377
3425
  return {};
3378
3426
  }
3427
+ let [x, y] = [0, 0];
3428
+ for (const { query, x: tx, y: ty } of transforms) {
3429
+ if (query == null || window.matchMedia(query).matches) {
3430
+ x = tx;
3431
+ y = ty;
3432
+ break;
3433
+ }
3434
+ }
3435
+ return {
3436
+ delay,
3437
+ duration,
3438
+ easing: EASING[animationStyle],
3439
+ css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
3440
+ };
3379
3441
  }
3380
3442
 
3381
3443
  const getHref = (onClick) => {
@@ -6243,6 +6305,10 @@ function Modal($$anchor, $$props) {
6243
6305
  let layerId = $.prop($$props, 'layerId', 8, '');
6244
6306
  const { brandKit } = useBrandKit();
6245
6307
  const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
6308
+ const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
6309
+
6310
+ console.log('isOnSite', isOnSite);
6311
+
6246
6312
  // モーダル背景の設定
6247
6313
  const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
6248
6314
  let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6603,9 +6669,10 @@ function Modal($$anchor, $$props) {
6603
6669
  $.derived_safe_equal
6604
6670
  );
6605
6671
 
6606
- $.transition(1, div, () => customAnimation, () => ({
6672
+ $.transition(1, div, () => customAnimationV2, () => ({
6607
6673
  transforms: $.get(transforms),
6608
- animationStyle: animation()
6674
+ animationStyle: animation(),
6675
+ disabled: !isOnSite
6609
6676
  }));
6610
6677
 
6611
6678
  $.append($$anchor, div);
@@ -3467,7 +3467,7 @@ const EASING = {
3467
3467
  none: linear,
3468
3468
  };
3469
3469
  /**
3470
- * The function to activate svelte animation.
3470
+ * The function to activate svelte animation v2.
3471
3471
  *
3472
3472
  * @param node - A target node of animation. This argument is passed by svelte, by default.
3473
3473
  * @param customAnimationOptions - A custom animation option object
@@ -3476,7 +3476,10 @@ const EASING = {
3476
3476
  *
3477
3477
  * @internal
3478
3478
  */
3479
- function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3479
+ function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
3480
+ if (disabled) {
3481
+ return {};
3482
+ }
3480
3483
  let [x, y] = [0, 0];
3481
3484
  for (const { query, x: tx, y: ty } of transforms) {
3482
3485
  if (query == null || window.matchMedia(query).matches) {
@@ -6358,6 +6361,10 @@ function Modal($$anchor, $$props) {
6358
6361
  let layerId = $.prop($$props, 'layerId', 8, '');
6359
6362
  const { brandKit } = useBrandKit();
6360
6363
  const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
6364
+ const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
6365
+
6366
+ console.log('isOnSite', isOnSite);
6367
+
6361
6368
  // モーダル背景の設定
6362
6369
  const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
6363
6370
  let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6718,9 +6725,10 @@ function Modal($$anchor, $$props) {
6718
6725
  $.derived_safe_equal
6719
6726
  );
6720
6727
 
6721
- $.transition(1, div, () => customAnimation, () => ({
6728
+ $.transition(1, div, () => customAnimationV2, () => ({
6722
6729
  transforms: $.get(transforms),
6723
- animationStyle: animation()
6730
+ animationStyle: animation(),
6731
+ disabled: !isOnSite
6724
6732
  }));
6725
6733
 
6726
6734
  $.append($$anchor, div);
@@ -3467,7 +3467,7 @@ const EASING = {
3467
3467
  none: linear,
3468
3468
  };
3469
3469
  /**
3470
- * The function to activate svelte animation.
3470
+ * The function to activate svelte animation v2.
3471
3471
  *
3472
3472
  * @param node - A target node of animation. This argument is passed by svelte, by default.
3473
3473
  * @param customAnimationOptions - A custom animation option object
@@ -3476,7 +3476,10 @@ const EASING = {
3476
3476
  *
3477
3477
  * @internal
3478
3478
  */
3479
- function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3479
+ function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
3480
+ if (disabled) {
3481
+ return {};
3482
+ }
3480
3483
  let [x, y] = [0, 0];
3481
3484
  for (const { query, x: tx, y: ty } of transforms) {
3482
3485
  if (query == null || window.matchMedia(query).matches) {
@@ -6358,6 +6361,10 @@ function Modal($$anchor, $$props) {
6358
6361
  let layerId = $.prop($$props, 'layerId', 8, '');
6359
6362
  const { brandKit } = useBrandKit();
6360
6363
  const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
6364
+ const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
6365
+
6366
+ console.log('isOnSite', isOnSite);
6367
+
6361
6368
  // モーダル背景の設定
6362
6369
  const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
6363
6370
  let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6718,9 +6725,10 @@ function Modal($$anchor, $$props) {
6718
6725
  $.derived_safe_equal
6719
6726
  );
6720
6727
 
6721
- $.transition(1, div, () => customAnimation, () => ({
6728
+ $.transition(1, div, () => customAnimationV2, () => ({
6722
6729
  transforms: $.get(transforms),
6723
- animationStyle: animation()
6730
+ animationStyle: animation(),
6731
+ disabled: !isOnSite
6724
6732
  }));
6725
6733
 
6726
6734
  $.append($$anchor, div);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plaidev/karte-action-sdk",
3
- "version": "1.1.266-29065938.e3ec46c6",
3
+ "version": "1.1.267-29071733.fabf64a6",
4
4
  "author": "Plaid Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "module": "./dist/index.es.js",