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

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 { linear, elasticOut, cubicOut } from 'svelte/easing';
4
+ import 'svelte/easing';
5
5
 
6
6
  /** @internal */
7
7
  const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
@@ -38,6 +38,7 @@ const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused
38
38
  const isPreview = () => {
39
39
  return true;
40
40
  };
41
+ const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
41
42
  /** @internal */
42
43
  const setPreviousFocus = () => {
43
44
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -3381,54 +3382,6 @@ const execOnClickOperation = (onClickOperation) => {
3381
3382
  const haveFunction = (onClickOperation) => {
3382
3383
  return onClickOperation.operation !== 'none';
3383
3384
  };
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
- };
3432
3385
  /**
3433
3386
  * The function to activate svelte animation.
3434
3387
  *
@@ -3444,35 +3397,6 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
3444
3397
  return {};
3445
3398
  }
3446
3399
  }
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
- }
3476
3400
 
3477
3401
  /* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
3478
3402
 
@@ -18728,7 +18652,7 @@ function add_css$9(target) {
18728
18652
  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}}");
18729
18653
  }
18730
18654
 
18731
- // (222:0) {:else}
18655
+ // (219:0) {:else}
18732
18656
  function create_else_block(ctx) {
18733
18657
  let backgroundoverlay;
18734
18658
  let current;
@@ -18775,7 +18699,7 @@ function create_else_block(ctx) {
18775
18699
  };
18776
18700
  }
18777
18701
 
18778
- // (211:24)
18702
+ // (208:24)
18779
18703
  function create_if_block_2(ctx) {
18780
18704
  let backgroundoverlay0;
18781
18705
  let t;
@@ -18849,7 +18773,7 @@ function create_if_block_2(ctx) {
18849
18773
  };
18850
18774
  }
18851
18775
 
18852
- // (209:0) {#if isCanvasPreview}
18776
+ // (206:0) {#if isCanvasPreview()}
18853
18777
  function create_if_block_1$1(ctx) {
18854
18778
  return {
18855
18779
  c: noop,
@@ -18862,14 +18786,14 @@ function create_if_block_1$1(ctx) {
18862
18786
  };
18863
18787
  }
18864
18788
 
18865
- // (225:0) {#if visible}
18789
+ // (222:0) {#if visible}
18866
18790
  function create_if_block$3(ctx) {
18867
18791
  let div;
18868
18792
  let div_class_value;
18869
18793
  let div_intro;
18870
18794
  let current;
18871
- const default_slot_template = /*#slots*/ ctx[27].default;
18872
- const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
18795
+ const default_slot_template = /*#slots*/ ctx[25].default;
18796
+ const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[24], null);
18873
18797
 
18874
18798
  return {
18875
18799
  c() {
@@ -18896,7 +18820,7 @@ function create_if_block$3(ctx) {
18896
18820
  attr(div, "role", "dialog");
18897
18821
  attr(div, "aria-modal", "true");
18898
18822
  attr(div, "data-layer-id", /*layerId*/ ctx[2]);
18899
- attr(div, "style", Array.from(/*modalStyles*/ ctx[15]).join(';'));
18823
+ attr(div, "style", Array.from(/*modalStyles*/ ctx[13]).join(';'));
18900
18824
  },
18901
18825
  m(target, anchor) {
18902
18826
  insert_hydration(target, div, anchor);
@@ -18905,22 +18829,22 @@ function create_if_block$3(ctx) {
18905
18829
  default_slot.m(div, null);
18906
18830
  }
18907
18831
 
18908
- /*div_binding*/ ctx[28](div);
18832
+ /*div_binding*/ ctx[26](div);
18909
18833
  current = true;
18910
18834
  },
18911
18835
  p(new_ctx, dirty) {
18912
18836
  ctx = new_ctx;
18913
18837
 
18914
18838
  if (default_slot) {
18915
- if (default_slot.p && (!current || dirty & /*$$scope*/ 67108864)) {
18839
+ if (default_slot.p && (!current || dirty & /*$$scope*/ 16777216)) {
18916
18840
  update_slot_base(
18917
18841
  default_slot,
18918
18842
  default_slot_template,
18919
18843
  ctx,
18920
- /*$$scope*/ ctx[26],
18844
+ /*$$scope*/ ctx[24],
18921
18845
  !current
18922
- ? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
18923
- : get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
18846
+ ? get_all_dirty_from_scope(/*$$scope*/ ctx[24])
18847
+ : get_slot_changes(default_slot_template, /*$$scope*/ ctx[24], dirty, null),
18924
18848
  null
18925
18849
  );
18926
18850
  }
@@ -18940,10 +18864,9 @@ function create_if_block$3(ctx) {
18940
18864
 
18941
18865
  if (!div_intro) {
18942
18866
  add_render_callback(() => {
18943
- div_intro = create_in_transition(div, customAnimationV2, {
18867
+ div_intro = create_in_transition(div, customAnimation, {
18944
18868
  transforms: /*transforms*/ ctx[3],
18945
- animationStyle: /*animation*/ ctx[1],
18946
- disabled: !/*isOnSite*/ ctx[14]
18869
+ animationStyle: /*animation*/ ctx[1]
18947
18870
  });
18948
18871
 
18949
18872
  div_intro.start();
@@ -18959,12 +18882,13 @@ function create_if_block$3(ctx) {
18959
18882
  d(detaching) {
18960
18883
  if (detaching) detach(div);
18961
18884
  if (default_slot) default_slot.d(detaching);
18962
- /*div_binding*/ ctx[28](null);
18885
+ /*div_binding*/ ctx[26](null);
18963
18886
  }
18964
18887
  };
18965
18888
  }
18966
18889
 
18967
18890
  function create_fragment$d(ctx) {
18891
+ let show_if;
18968
18892
  let current_block_type_index;
18969
18893
  let if_block0;
18970
18894
  let t;
@@ -18976,7 +18900,8 @@ function create_fragment$d(ctx) {
18976
18900
  const if_blocks = [];
18977
18901
 
18978
18902
  function select_block_type(ctx, dirty) {
18979
- if (/*isCanvasPreview*/ ctx[13]) return 0;
18903
+ if (show_if == null) show_if = !!isCanvasPreview();
18904
+ if (show_if) return 0;
18980
18905
  if (/*useBreakPoint*/ ctx[0]) return 1;
18981
18906
  return 2;
18982
18907
  }
@@ -19104,9 +19029,6 @@ function instance$d($$self, $$props, $$invalidate) {
19104
19029
  let { closeEventValue = null } = $$props;
19105
19030
  let { layerId = '' } = $$props;
19106
19031
  const { brandKit } = useBrandKit();
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);
19110
19032
 
19111
19033
  // モーダル背景の設定
19112
19034
  const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
@@ -19139,20 +19061,20 @@ function instance$d($$self, $$props, $$invalidate) {
19139
19061
 
19140
19062
  $$self.$$set = $$props => {
19141
19063
  if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
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);
19064
+ if ('placement' in $$props) $$invalidate(14, placement = $$props.placement);
19065
+ if ('breakPoint' in $$props) $$invalidate(15, breakPoint = $$props.breakPoint);
19066
+ if ('elasticity' in $$props) $$invalidate(16, elasticity = $$props.elasticity);
19145
19067
  if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
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);
19068
+ if ('props' in $$props) $$invalidate(17, props = $$props.props);
19069
+ if ('closeEventName' in $$props) $$invalidate(18, closeEventName = $$props.closeEventName);
19070
+ if ('closeEventValue' in $$props) $$invalidate(19, closeEventValue = $$props.closeEventValue);
19149
19071
  if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
19150
- if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
19072
+ if ('$$scope' in $$props) $$invalidate(24, $$scope = $$props.$$scope);
19151
19073
  };
19152
19074
 
19153
19075
  $$self.$$.update = () => {
19154
- if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 3145728) {
19155
- $$invalidate(25, close = () => {
19076
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 786432) {
19077
+ $$invalidate(23, close = () => {
19156
19078
  const onClose = { operation: 'closeApp', args: ['button'] };
19157
19079
 
19158
19080
  if (closeEventName) {
@@ -19163,9 +19085,9 @@ function instance$d($$self, $$props, $$invalidate) {
19163
19085
  });
19164
19086
  }
19165
19087
 
19166
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
19088
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
19167
19089
  {
19168
- if (!isCanvasPreview && isExistBackgroundOverlayValue) {
19090
+ if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
19169
19091
  $$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
19170
19092
  }
19171
19093
 
@@ -19178,29 +19100,29 @@ function instance$d($$self, $$props, $$invalidate) {
19178
19100
  }
19179
19101
  }
19180
19102
 
19181
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
19103
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
19182
19104
  {
19183
19105
  if (placement && placement.backgroundClick) {
19184
- $$invalidate(22, backgroundClickFunction = placement.backgroundClick);
19106
+ $$invalidate(20, backgroundClickFunction = placement.backgroundClick);
19185
19107
  }
19186
19108
 
19187
19109
  if (useBreakPoint) {
19188
19110
  const pc = breakPoint?.PC?.placement?.backgroundClick;
19189
19111
 
19190
19112
  if (pc) {
19191
- $$invalidate(23, backgroundClickFunctionPC = pc);
19113
+ $$invalidate(21, backgroundClickFunctionPC = pc);
19192
19114
  }
19193
19115
 
19194
19116
  const sp = breakPoint?.SP?.placement?.backgroundClick;
19195
19117
 
19196
19118
  if (sp) {
19197
- $$invalidate(24, backgroundClickFunctionSP = sp);
19119
+ $$invalidate(22, backgroundClickFunctionSP = sp);
19198
19120
  }
19199
19121
  }
19200
19122
  }
19201
19123
  }
19202
19124
 
19203
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 7340032) {
19125
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 1835008) {
19204
19126
  $$invalidate(12, backgroundClick = () => {
19205
19127
  if (closeEventName) {
19206
19128
  send_event(closeEventName, closeEventValue);
@@ -19210,7 +19132,7 @@ function instance$d($$self, $$props, $$invalidate) {
19210
19132
  });
19211
19133
  }
19212
19134
 
19213
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 11534336) {
19135
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 2883584) {
19214
19136
  $$invalidate(11, backgroundClickPC = () => {
19215
19137
  if (closeEventName) {
19216
19138
  send_event(closeEventName, closeEventValue);
@@ -19220,7 +19142,7 @@ function instance$d($$self, $$props, $$invalidate) {
19220
19142
  });
19221
19143
  }
19222
19144
 
19223
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 19922944) {
19145
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 4980736) {
19224
19146
  $$invalidate(10, backgroundClickSP = () => {
19225
19147
  if (closeEventName) {
19226
19148
  send_event(closeEventName, closeEventValue);
@@ -19230,13 +19152,13 @@ function instance$d($$self, $$props, $$invalidate) {
19230
19152
  });
19231
19153
  }
19232
19154
 
19233
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 196617) {
19155
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 49161) {
19234
19156
  // 表示位置のスタイルとアニメーションの動きを設定
19235
19157
  {
19236
19158
  // 表示位置のスタイルの設定
19237
19159
  let position = DefaultModalPlacement.position;
19238
19160
 
19239
- if (!isCanvasPreview && placement && placement.position !== null) {
19161
+ if (!isCanvasPreview() && placement && placement.position !== null) {
19240
19162
  position = placement.position;
19241
19163
  }
19242
19164
 
@@ -19253,7 +19175,7 @@ function instance$d($$self, $$props, $$invalidate) {
19253
19175
  $$invalidate(3, transforms = []);
19254
19176
 
19255
19177
  DEVICE_IDS.forEach(deviceId => {
19256
- if (!isCanvasPreview && useBreakPoint) {
19178
+ if (!isCanvasPreview() && useBreakPoint) {
19257
19179
  const positionWithBp = breakPoint[deviceId]?.placement?.position;
19258
19180
 
19259
19181
  transforms.push({
@@ -19278,12 +19200,12 @@ function instance$d($$self, $$props, $$invalidate) {
19278
19200
  }
19279
19201
  }
19280
19202
 
19281
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 720897) {
19203
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 180225) {
19282
19204
  // 表示位置の調整のスタイルを設定
19283
19205
  {
19284
19206
  let margin = DefaultModalPlacement.margin;
19285
19207
 
19286
- if (!isCanvasPreview && placement && placement.margin !== null) {
19208
+ if (!isCanvasPreview() && placement && placement.margin !== null) {
19287
19209
  margin = placement.margin;
19288
19210
  }
19289
19211
 
@@ -19294,7 +19216,7 @@ function instance$d($$self, $$props, $$invalidate) {
19294
19216
  }
19295
19217
 
19296
19218
  DEVICE_IDS.forEach(deviceId => {
19297
- if (!isCanvasPreview && useBreakPoint) {
19219
+ if (!isCanvasPreview() && useBreakPoint) {
19298
19220
  const marginWithBp = breakPoint[deviceId]?.placement?.margin;
19299
19221
  marginStyle = getMarginStyle(marginWithBp);
19300
19222
  }
@@ -19322,7 +19244,7 @@ function instance$d($$self, $$props, $$invalidate) {
19322
19244
  }
19323
19245
  }
19324
19246
 
19325
- if ($$self.$$.dirty & /*close*/ 33554432) {
19247
+ if ($$self.$$.dirty & /*close*/ 8388608) {
19326
19248
  $$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
19327
19249
  }
19328
19250
  };
@@ -19346,8 +19268,6 @@ function instance$d($$self, $$props, $$invalidate) {
19346
19268
  backgroundClickSP,
19347
19269
  backgroundClickPC,
19348
19270
  backgroundClick,
19349
- isCanvasPreview,
19350
- isOnSite,
19351
19271
  modalStyles,
19352
19272
  placement,
19353
19273
  breakPoint,
@@ -19377,13 +19297,13 @@ class Modal extends SvelteComponent {
19377
19297
  safe_not_equal,
19378
19298
  {
19379
19299
  useBreakPoint: 0,
19380
- placement: 16,
19381
- breakPoint: 17,
19382
- elasticity: 18,
19300
+ placement: 14,
19301
+ breakPoint: 15,
19302
+ elasticity: 16,
19383
19303
  animation: 1,
19384
- props: 19,
19385
- closeEventName: 20,
19386
- closeEventValue: 21,
19304
+ props: 17,
19305
+ closeEventName: 18,
19306
+ closeEventValue: 19,
19387
19307
  layerId: 2
19388
19308
  },
19389
19309
  add_css$9
package/dist/index.es.js CHANGED
@@ -38,6 +38,7 @@ const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused
38
38
  const isPreview = () => {
39
39
  return false;
40
40
  };
41
+ const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
41
42
  /** @internal */
42
43
  const setPreviousFocus = () => {
43
44
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -3479,35 +3480,6 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
3479
3480
  css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
3480
3481
  };
3481
3482
  }
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
- }
3511
3483
 
3512
3484
  /* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
3513
3485
 
@@ -17310,7 +17282,7 @@ function add_css$9(target) {
17310
17282
  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}}");
17311
17283
  }
17312
17284
 
17313
- // (222:0) {:else}
17285
+ // (219:0) {:else}
17314
17286
  function create_else_block(ctx) {
17315
17287
  let backgroundoverlay;
17316
17288
  let current;
@@ -17354,7 +17326,7 @@ function create_else_block(ctx) {
17354
17326
  };
17355
17327
  }
17356
17328
 
17357
- // (211:24)
17329
+ // (208:24)
17358
17330
  function create_if_block_2(ctx) {
17359
17331
  let backgroundoverlay0;
17360
17332
  let t;
@@ -17423,7 +17395,7 @@ function create_if_block_2(ctx) {
17423
17395
  };
17424
17396
  }
17425
17397
 
17426
- // (209:0) {#if isCanvasPreview}
17398
+ // (206:0) {#if isCanvasPreview()}
17427
17399
  function create_if_block_1$1(ctx) {
17428
17400
  return {
17429
17401
  c: noop,
@@ -17435,14 +17407,14 @@ function create_if_block_1$1(ctx) {
17435
17407
  };
17436
17408
  }
17437
17409
 
17438
- // (225:0) {#if visible}
17410
+ // (222:0) {#if visible}
17439
17411
  function create_if_block$3(ctx) {
17440
17412
  let div;
17441
17413
  let div_class_value;
17442
17414
  let div_intro;
17443
17415
  let current;
17444
- const default_slot_template = /*#slots*/ ctx[27].default;
17445
- const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
17416
+ const default_slot_template = /*#slots*/ ctx[25].default;
17417
+ const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[24], null);
17446
17418
 
17447
17419
  return {
17448
17420
  c() {
@@ -17452,7 +17424,7 @@ function create_if_block$3(ctx) {
17452
17424
  attr(div, "role", "dialog");
17453
17425
  attr(div, "aria-modal", "true");
17454
17426
  attr(div, "data-layer-id", /*layerId*/ ctx[2]);
17455
- attr(div, "style", Array.from(/*modalStyles*/ ctx[15]).join(';'));
17427
+ attr(div, "style", Array.from(/*modalStyles*/ ctx[13]).join(';'));
17456
17428
  },
17457
17429
  m(target, anchor) {
17458
17430
  insert(target, div, anchor);
@@ -17461,22 +17433,22 @@ function create_if_block$3(ctx) {
17461
17433
  default_slot.m(div, null);
17462
17434
  }
17463
17435
 
17464
- /*div_binding*/ ctx[28](div);
17436
+ /*div_binding*/ ctx[26](div);
17465
17437
  current = true;
17466
17438
  },
17467
17439
  p(new_ctx, dirty) {
17468
17440
  ctx = new_ctx;
17469
17441
 
17470
17442
  if (default_slot) {
17471
- if (default_slot.p && (!current || dirty & /*$$scope*/ 67108864)) {
17443
+ if (default_slot.p && (!current || dirty & /*$$scope*/ 16777216)) {
17472
17444
  update_slot_base(
17473
17445
  default_slot,
17474
17446
  default_slot_template,
17475
17447
  ctx,
17476
- /*$$scope*/ ctx[26],
17448
+ /*$$scope*/ ctx[24],
17477
17449
  !current
17478
- ? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
17479
- : get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
17450
+ ? get_all_dirty_from_scope(/*$$scope*/ ctx[24])
17451
+ : get_slot_changes(default_slot_template, /*$$scope*/ ctx[24], dirty, null),
17480
17452
  null
17481
17453
  );
17482
17454
  }
@@ -17496,10 +17468,9 @@ function create_if_block$3(ctx) {
17496
17468
 
17497
17469
  if (!div_intro) {
17498
17470
  add_render_callback(() => {
17499
- div_intro = create_in_transition(div, customAnimationV2, {
17471
+ div_intro = create_in_transition(div, customAnimation, {
17500
17472
  transforms: /*transforms*/ ctx[3],
17501
- animationStyle: /*animation*/ ctx[1],
17502
- disabled: !/*isOnSite*/ ctx[14]
17473
+ animationStyle: /*animation*/ ctx[1]
17503
17474
  });
17504
17475
 
17505
17476
  div_intro.start();
@@ -17515,12 +17486,13 @@ function create_if_block$3(ctx) {
17515
17486
  d(detaching) {
17516
17487
  if (detaching) detach(div);
17517
17488
  if (default_slot) default_slot.d(detaching);
17518
- /*div_binding*/ ctx[28](null);
17489
+ /*div_binding*/ ctx[26](null);
17519
17490
  }
17520
17491
  };
17521
17492
  }
17522
17493
 
17523
17494
  function create_fragment$d(ctx) {
17495
+ let show_if;
17524
17496
  let current_block_type_index;
17525
17497
  let if_block0;
17526
17498
  let t;
@@ -17532,7 +17504,8 @@ function create_fragment$d(ctx) {
17532
17504
  const if_blocks = [];
17533
17505
 
17534
17506
  function select_block_type(ctx, dirty) {
17535
- if (/*isCanvasPreview*/ ctx[13]) return 0;
17507
+ if (show_if == null) show_if = !!isCanvasPreview();
17508
+ if (show_if) return 0;
17536
17509
  if (/*useBreakPoint*/ ctx[0]) return 1;
17537
17510
  return 2;
17538
17511
  }
@@ -17654,9 +17627,6 @@ function instance$d($$self, $$props, $$invalidate) {
17654
17627
  let { closeEventValue = null } = $$props;
17655
17628
  let { layerId = '' } = $$props;
17656
17629
  const { brandKit } = useBrandKit();
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);
17660
17630
 
17661
17631
  // モーダル背景の設定
17662
17632
  const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
@@ -17689,20 +17659,20 @@ function instance$d($$self, $$props, $$invalidate) {
17689
17659
 
17690
17660
  $$self.$$set = $$props => {
17691
17661
  if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
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);
17662
+ if ('placement' in $$props) $$invalidate(14, placement = $$props.placement);
17663
+ if ('breakPoint' in $$props) $$invalidate(15, breakPoint = $$props.breakPoint);
17664
+ if ('elasticity' in $$props) $$invalidate(16, elasticity = $$props.elasticity);
17695
17665
  if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
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);
17666
+ if ('props' in $$props) $$invalidate(17, props = $$props.props);
17667
+ if ('closeEventName' in $$props) $$invalidate(18, closeEventName = $$props.closeEventName);
17668
+ if ('closeEventValue' in $$props) $$invalidate(19, closeEventValue = $$props.closeEventValue);
17699
17669
  if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
17700
- if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
17670
+ if ('$$scope' in $$props) $$invalidate(24, $$scope = $$props.$$scope);
17701
17671
  };
17702
17672
 
17703
17673
  $$self.$$.update = () => {
17704
- if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 3145728) {
17705
- $$invalidate(25, close = () => {
17674
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 786432) {
17675
+ $$invalidate(23, close = () => {
17706
17676
  const onClose = { operation: 'closeApp', args: ['button'] };
17707
17677
 
17708
17678
  if (closeEventName) {
@@ -17713,9 +17683,9 @@ function instance$d($$self, $$props, $$invalidate) {
17713
17683
  });
17714
17684
  }
17715
17685
 
17716
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
17686
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
17717
17687
  {
17718
- if (!isCanvasPreview && isExistBackgroundOverlayValue) {
17688
+ if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
17719
17689
  $$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
17720
17690
  }
17721
17691
 
@@ -17728,29 +17698,29 @@ function instance$d($$self, $$props, $$invalidate) {
17728
17698
  }
17729
17699
  }
17730
17700
 
17731
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
17701
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
17732
17702
  {
17733
17703
  if (placement && placement.backgroundClick) {
17734
- $$invalidate(22, backgroundClickFunction = placement.backgroundClick);
17704
+ $$invalidate(20, backgroundClickFunction = placement.backgroundClick);
17735
17705
  }
17736
17706
 
17737
17707
  if (useBreakPoint) {
17738
17708
  const pc = breakPoint?.PC?.placement?.backgroundClick;
17739
17709
 
17740
17710
  if (pc) {
17741
- $$invalidate(23, backgroundClickFunctionPC = pc);
17711
+ $$invalidate(21, backgroundClickFunctionPC = pc);
17742
17712
  }
17743
17713
 
17744
17714
  const sp = breakPoint?.SP?.placement?.backgroundClick;
17745
17715
 
17746
17716
  if (sp) {
17747
- $$invalidate(24, backgroundClickFunctionSP = sp);
17717
+ $$invalidate(22, backgroundClickFunctionSP = sp);
17748
17718
  }
17749
17719
  }
17750
17720
  }
17751
17721
  }
17752
17722
 
17753
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 7340032) {
17723
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 1835008) {
17754
17724
  $$invalidate(12, backgroundClick = () => {
17755
17725
  if (closeEventName) {
17756
17726
  send_event(closeEventName, closeEventValue);
@@ -17760,7 +17730,7 @@ function instance$d($$self, $$props, $$invalidate) {
17760
17730
  });
17761
17731
  }
17762
17732
 
17763
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 11534336) {
17733
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 2883584) {
17764
17734
  $$invalidate(11, backgroundClickPC = () => {
17765
17735
  if (closeEventName) {
17766
17736
  send_event(closeEventName, closeEventValue);
@@ -17770,7 +17740,7 @@ function instance$d($$self, $$props, $$invalidate) {
17770
17740
  });
17771
17741
  }
17772
17742
 
17773
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 19922944) {
17743
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 4980736) {
17774
17744
  $$invalidate(10, backgroundClickSP = () => {
17775
17745
  if (closeEventName) {
17776
17746
  send_event(closeEventName, closeEventValue);
@@ -17780,13 +17750,13 @@ function instance$d($$self, $$props, $$invalidate) {
17780
17750
  });
17781
17751
  }
17782
17752
 
17783
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 196617) {
17753
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 49161) {
17784
17754
  // 表示位置のスタイルとアニメーションの動きを設定
17785
17755
  {
17786
17756
  // 表示位置のスタイルの設定
17787
17757
  let position = DefaultModalPlacement.position;
17788
17758
 
17789
- if (!isCanvasPreview && placement && placement.position !== null) {
17759
+ if (!isCanvasPreview() && placement && placement.position !== null) {
17790
17760
  position = placement.position;
17791
17761
  }
17792
17762
 
@@ -17803,7 +17773,7 @@ function instance$d($$self, $$props, $$invalidate) {
17803
17773
  $$invalidate(3, transforms = []);
17804
17774
 
17805
17775
  DEVICE_IDS.forEach(deviceId => {
17806
- if (!isCanvasPreview && useBreakPoint) {
17776
+ if (!isCanvasPreview() && useBreakPoint) {
17807
17777
  const positionWithBp = breakPoint[deviceId]?.placement?.position;
17808
17778
 
17809
17779
  transforms.push({
@@ -17828,12 +17798,12 @@ function instance$d($$self, $$props, $$invalidate) {
17828
17798
  }
17829
17799
  }
17830
17800
 
17831
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 720897) {
17801
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 180225) {
17832
17802
  // 表示位置の調整のスタイルを設定
17833
17803
  {
17834
17804
  let margin = DefaultModalPlacement.margin;
17835
17805
 
17836
- if (!isCanvasPreview && placement && placement.margin !== null) {
17806
+ if (!isCanvasPreview() && placement && placement.margin !== null) {
17837
17807
  margin = placement.margin;
17838
17808
  }
17839
17809
 
@@ -17844,7 +17814,7 @@ function instance$d($$self, $$props, $$invalidate) {
17844
17814
  }
17845
17815
 
17846
17816
  DEVICE_IDS.forEach(deviceId => {
17847
- if (!isCanvasPreview && useBreakPoint) {
17817
+ if (!isCanvasPreview() && useBreakPoint) {
17848
17818
  const marginWithBp = breakPoint[deviceId]?.placement?.margin;
17849
17819
  marginStyle = getMarginStyle(marginWithBp);
17850
17820
  }
@@ -17872,7 +17842,7 @@ function instance$d($$self, $$props, $$invalidate) {
17872
17842
  }
17873
17843
  }
17874
17844
 
17875
- if ($$self.$$.dirty & /*close*/ 33554432) {
17845
+ if ($$self.$$.dirty & /*close*/ 8388608) {
17876
17846
  $$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
17877
17847
  }
17878
17848
  };
@@ -17896,8 +17866,6 @@ function instance$d($$self, $$props, $$invalidate) {
17896
17866
  backgroundClickSP,
17897
17867
  backgroundClickPC,
17898
17868
  backgroundClick,
17899
- isCanvasPreview,
17900
- isOnSite,
17901
17869
  modalStyles,
17902
17870
  placement,
17903
17871
  breakPoint,
@@ -17927,13 +17895,13 @@ class Modal extends SvelteComponent {
17927
17895
  safe_not_equal,
17928
17896
  {
17929
17897
  useBreakPoint: 0,
17930
- placement: 16,
17931
- breakPoint: 17,
17932
- elasticity: 18,
17898
+ placement: 14,
17899
+ breakPoint: 15,
17900
+ elasticity: 16,
17933
17901
  animation: 1,
17934
- props: 19,
17935
- closeEventName: 20,
17936
- closeEventValue: 21,
17902
+ props: 17,
17903
+ closeEventName: 18,
17904
+ closeEventValue: 19,
17937
17905
  layerId: 2
17938
17906
  },
17939
17907
  add_css$9
@@ -39,8 +39,10 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
39
39
  const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
40
40
  /** @internal */
41
41
  const isPreview = () => {
42
- return true;
42
+ return !isOnSite() ;
43
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';
44
46
  /** @internal */
45
47
  const setPreviousFocus = () => {
46
48
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -223,6 +225,10 @@ function onTime(time, fn) {
223
225
  const timeoutHandler = setTimeout(fn, time);
224
226
  return () => timeoutHandler && clearTimeout(timeoutHandler);
225
227
  }
228
+ /** @internal */
229
+ function randStr(digit = 8) {
230
+ return Math.random().toString(32).substring(digit);
231
+ }
226
232
  /**
227
233
  * Goolge Fonts用のURLを生成
228
234
  *
@@ -754,7 +760,7 @@ const state = writable('/');
754
760
  * @public
755
761
  */
756
762
  function setState$1(stateId, options) {
757
- if (options?.disableInPreview)
763
+ if (isPreview() && options?.disableInPreview)
758
764
  return;
759
765
  state.set(stateId);
760
766
  }
@@ -1198,8 +1204,11 @@ function cloneToJson(data) {
1198
1204
 
1199
1205
  // prettier-ignore
1200
1206
  /** @internal */
1201
- const actionId = ALL_ACTION_ID
1202
- ;
1207
+ const actionId = isPreview()
1208
+ ? ALL_ACTION_ID
1209
+ : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
1210
+ ? __FLYER_GEN_ACTION_ID_ON_BUILD__
1211
+ : randStr();
1203
1212
  /** @internal */
1204
1213
  const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
1205
1214
  /** @internal */
@@ -1553,8 +1562,23 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
1553
1562
  /** @internal */
1554
1563
  const loadActionTable = async (config, data, api_key, collection_endpoint) => {
1555
1564
  console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
1556
- const results = config.map(c => c.preview_value)
1557
- ;
1565
+ const results = isPreview()
1566
+ ? config.map(c => c.preview_value)
1567
+ : await Promise.all(config
1568
+ .filter(c => c.resolver === 'action-table-row' ||
1569
+ c.resolver === 'action-table-rows' ||
1570
+ c.resolver === 'action-table-query')
1571
+ .map(async (c) => {
1572
+ if (c.resolver === 'action-table-row') {
1573
+ return await loadActionTableRow(c, data, api_key, collection_endpoint);
1574
+ }
1575
+ else if (c.resolver === 'action-table-rows') {
1576
+ return await loadActionTableRows(c, data, api_key, collection_endpoint);
1577
+ }
1578
+ else if (c.resolver === 'action-table-query') {
1579
+ return await loadActionTableQuery(c, data, api_key, collection_endpoint);
1580
+ }
1581
+ }));
1558
1582
  return config.reduce((acc, c, i) => {
1559
1583
  const value = results[i] ?? c.query.default_value;
1560
1584
  if (value) {
@@ -2849,9 +2873,11 @@ function Header($$anchor, $$props) {
2849
2873
  $fonts()
2850
2874
  ),
2851
2875
  () => {
2852
- {
2876
+ if (isPreview()) {
2853
2877
  // フォントのロードが遅れてエディタのプレビューがガタつく対策
2854
2878
  $.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
2879
+ } else if ($fonts().length > 0) {
2880
+ $.set(googleFontUrl, makeGoogleFontUrl($fonts()));
2855
2881
  }
2856
2882
  }
2857
2883
  );
@@ -3411,7 +3437,7 @@ const EASING = {
3411
3437
  none: linear,
3412
3438
  };
3413
3439
  /**
3414
- * The function to activate svelte animation v2.
3440
+ * The function to activate svelte animation.
3415
3441
  *
3416
3442
  * @param node - A target node of animation. This argument is passed by svelte, by default.
3417
3443
  * @param customAnimationOptions - A custom animation option object
@@ -3420,8 +3446,8 @@ const EASING = {
3420
3446
  *
3421
3447
  * @internal
3422
3448
  */
3423
- function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
3424
- if (disabled) {
3449
+ function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3450
+ if (isPreview()) {
3425
3451
  return {};
3426
3452
  }
3427
3453
  let [x, y] = [0, 0];
@@ -6304,11 +6330,6 @@ function Modal($$anchor, $$props) {
6304
6330
  let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
6305
6331
  let layerId = $.prop($$props, 'layerId', 8, '');
6306
6332
  const { brandKit } = useBrandKit();
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
-
6312
6333
  // モーダル背景の設定
6313
6334
  const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
6314
6335
  let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6354,7 +6375,7 @@ function Modal($$anchor, $$props) {
6354
6375
  $.deep_read_state(breakPoint())
6355
6376
  ),
6356
6377
  () => {
6357
- if (!isCanvasPreview && isExistBackgroundOverlayValue) {
6378
+ if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
6358
6379
  $.set(backgroundOverlay, placement().backgroundOverlay);
6359
6380
  }
6360
6381
 
@@ -6460,7 +6481,7 @@ function Modal($$anchor, $$props) {
6460
6481
  // 表示位置のスタイルの設定
6461
6482
  let position = DefaultModalPlacement.position;
6462
6483
 
6463
- if (!isCanvasPreview && placement() && placement().position !== null) {
6484
+ if (!isCanvasPreview() && placement() && placement().position !== null) {
6464
6485
  position = placement().position;
6465
6486
  }
6466
6487
 
@@ -6477,7 +6498,7 @@ function Modal($$anchor, $$props) {
6477
6498
  $.set(transforms, []);
6478
6499
 
6479
6500
  DEVICE_IDS.forEach((deviceId) => {
6480
- if (!isCanvasPreview && useBreakPoint()) {
6501
+ if (!isCanvasPreview() && useBreakPoint()) {
6481
6502
  const positionWithBp = breakPoint()[deviceId]?.placement?.position;
6482
6503
 
6483
6504
  $.get(transforms).push({
@@ -6513,7 +6534,7 @@ function Modal($$anchor, $$props) {
6513
6534
  () => {
6514
6535
  let margin = DefaultModalPlacement.margin;
6515
6536
 
6516
- if (!isCanvasPreview && placement() && placement().margin !== null) {
6537
+ if (!isCanvasPreview() && placement() && placement().margin !== null) {
6517
6538
  margin = placement().margin;
6518
6539
  }
6519
6540
 
@@ -6524,7 +6545,7 @@ function Modal($$anchor, $$props) {
6524
6545
  }
6525
6546
 
6526
6547
  DEVICE_IDS.forEach((deviceId) => {
6527
- if (!isCanvasPreview && useBreakPoint()) {
6548
+ if (!isCanvasPreview() && useBreakPoint()) {
6528
6549
  const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
6529
6550
 
6530
6551
  marginStyle = getMarginStyle(marginWithBp);
@@ -6638,7 +6659,7 @@ function Modal($$anchor, $$props) {
6638
6659
  };
6639
6660
 
6640
6661
  $.if(node, ($$render) => {
6641
- if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
6662
+ if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
6642
6663
  });
6643
6664
  }
6644
6665
 
@@ -6669,10 +6690,9 @@ function Modal($$anchor, $$props) {
6669
6690
  $.derived_safe_equal
6670
6691
  );
6671
6692
 
6672
- $.transition(1, div, () => customAnimationV2, () => ({
6693
+ $.transition(1, div, () => customAnimation, () => ({
6673
6694
  transforms: $.get(transforms),
6674
- animationStyle: animation(),
6675
- disabled: !isOnSite
6695
+ animationStyle: animation()
6676
6696
  }));
6677
6697
 
6678
6698
  $.append($$anchor, div);
@@ -39,8 +39,10 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
39
39
  const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
40
40
  /** @internal */
41
41
  const isPreview = () => {
42
- return false;
42
+ return !isOnSite() ;
43
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';
44
46
  /** @internal */
45
47
  const setPreviousFocus = () => {
46
48
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -758,6 +760,8 @@ const state = writable('/');
758
760
  * @public
759
761
  */
760
762
  function setState$1(stateId, options) {
763
+ if (isPreview() && options?.disableInPreview)
764
+ return;
761
765
  state.set(stateId);
762
766
  }
763
767
  /**
@@ -1168,7 +1172,9 @@ function cloneToJson(data) {
1168
1172
 
1169
1173
  // prettier-ignore
1170
1174
  /** @internal */
1171
- const actionId = typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
1175
+ const actionId = isPreview()
1176
+ ? ALL_ACTION_ID
1177
+ : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
1172
1178
  ? __FLYER_GEN_ACTION_ID_ON_BUILD__
1173
1179
  : randStr();
1174
1180
  /** @internal */
@@ -1576,7 +1582,9 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
1576
1582
  /** @internal */
1577
1583
  const loadActionTable = async (config, data, api_key, collection_endpoint) => {
1578
1584
  console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
1579
- const results = await Promise.all(config
1585
+ const results = isPreview()
1586
+ ? config.map(c => c.preview_value)
1587
+ : await Promise.all(config
1580
1588
  .filter(c => c.resolver === 'action-table-row' ||
1581
1589
  c.resolver === 'action-table-rows' ||
1582
1590
  c.resolver === 'action-table-query')
@@ -2906,7 +2914,10 @@ function Header($$anchor, $$props) {
2906
2914
  $fonts()
2907
2915
  ),
2908
2916
  () => {
2909
- if ($fonts().length > 0) {
2917
+ if (isPreview()) {
2918
+ // フォントのロードが遅れてエディタのプレビューがガタつく対策
2919
+ $.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
2920
+ } else if ($fonts().length > 0) {
2910
2921
  $.set(googleFontUrl, makeGoogleFontUrl($fonts()));
2911
2922
  }
2912
2923
  }
@@ -3467,7 +3478,7 @@ const EASING = {
3467
3478
  none: linear,
3468
3479
  };
3469
3480
  /**
3470
- * The function to activate svelte animation v2.
3481
+ * The function to activate svelte animation.
3471
3482
  *
3472
3483
  * @param node - A target node of animation. This argument is passed by svelte, by default.
3473
3484
  * @param customAnimationOptions - A custom animation option object
@@ -3476,8 +3487,8 @@ const EASING = {
3476
3487
  *
3477
3488
  * @internal
3478
3489
  */
3479
- function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
3480
- if (disabled) {
3490
+ function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3491
+ if (isPreview()) {
3481
3492
  return {};
3482
3493
  }
3483
3494
  let [x, y] = [0, 0];
@@ -6360,11 +6371,6 @@ function Modal($$anchor, $$props) {
6360
6371
  let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
6361
6372
  let layerId = $.prop($$props, 'layerId', 8, '');
6362
6373
  const { brandKit } = useBrandKit();
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
-
6368
6374
  // モーダル背景の設定
6369
6375
  const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
6370
6376
  let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6410,7 +6416,7 @@ function Modal($$anchor, $$props) {
6410
6416
  $.deep_read_state(breakPoint())
6411
6417
  ),
6412
6418
  () => {
6413
- if (!isCanvasPreview && isExistBackgroundOverlayValue) {
6419
+ if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
6414
6420
  $.set(backgroundOverlay, placement().backgroundOverlay);
6415
6421
  }
6416
6422
 
@@ -6516,7 +6522,7 @@ function Modal($$anchor, $$props) {
6516
6522
  // 表示位置のスタイルの設定
6517
6523
  let position = DefaultModalPlacement.position;
6518
6524
 
6519
- if (!isCanvasPreview && placement() && placement().position !== null) {
6525
+ if (!isCanvasPreview() && placement() && placement().position !== null) {
6520
6526
  position = placement().position;
6521
6527
  }
6522
6528
 
@@ -6533,7 +6539,7 @@ function Modal($$anchor, $$props) {
6533
6539
  $.set(transforms, []);
6534
6540
 
6535
6541
  DEVICE_IDS.forEach((deviceId) => {
6536
- if (!isCanvasPreview && useBreakPoint()) {
6542
+ if (!isCanvasPreview() && useBreakPoint()) {
6537
6543
  const positionWithBp = breakPoint()[deviceId]?.placement?.position;
6538
6544
 
6539
6545
  $.get(transforms).push({
@@ -6569,7 +6575,7 @@ function Modal($$anchor, $$props) {
6569
6575
  () => {
6570
6576
  let margin = DefaultModalPlacement.margin;
6571
6577
 
6572
- if (!isCanvasPreview && placement() && placement().margin !== null) {
6578
+ if (!isCanvasPreview() && placement() && placement().margin !== null) {
6573
6579
  margin = placement().margin;
6574
6580
  }
6575
6581
 
@@ -6580,7 +6586,7 @@ function Modal($$anchor, $$props) {
6580
6586
  }
6581
6587
 
6582
6588
  DEVICE_IDS.forEach((deviceId) => {
6583
- if (!isCanvasPreview && useBreakPoint()) {
6589
+ if (!isCanvasPreview() && useBreakPoint()) {
6584
6590
  const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
6585
6591
 
6586
6592
  marginStyle = getMarginStyle(marginWithBp);
@@ -6694,7 +6700,7 @@ function Modal($$anchor, $$props) {
6694
6700
  };
6695
6701
 
6696
6702
  $.if(node, ($$render) => {
6697
- if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
6703
+ if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
6698
6704
  });
6699
6705
  }
6700
6706
 
@@ -6725,10 +6731,9 @@ function Modal($$anchor, $$props) {
6725
6731
  $.derived_safe_equal
6726
6732
  );
6727
6733
 
6728
- $.transition(1, div, () => customAnimationV2, () => ({
6734
+ $.transition(1, div, () => customAnimation, () => ({
6729
6735
  transforms: $.get(transforms),
6730
- animationStyle: animation(),
6731
- disabled: !isOnSite
6736
+ animationStyle: animation()
6732
6737
  }));
6733
6738
 
6734
6739
  $.append($$anchor, div);
@@ -39,8 +39,10 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
39
39
  const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
40
40
  /** @internal */
41
41
  const isPreview = () => {
42
- return false;
42
+ return !isOnSite() ;
43
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';
44
46
  /** @internal */
45
47
  const setPreviousFocus = () => {
46
48
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -758,6 +760,8 @@ const state = writable('/');
758
760
  * @public
759
761
  */
760
762
  function setState$1(stateId, options) {
763
+ if (isPreview() && options?.disableInPreview)
764
+ return;
761
765
  state.set(stateId);
762
766
  }
763
767
  /**
@@ -1168,7 +1172,9 @@ function cloneToJson(data) {
1168
1172
 
1169
1173
  // prettier-ignore
1170
1174
  /** @internal */
1171
- const actionId = typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
1175
+ const actionId = isPreview()
1176
+ ? ALL_ACTION_ID
1177
+ : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
1172
1178
  ? __FLYER_GEN_ACTION_ID_ON_BUILD__
1173
1179
  : randStr();
1174
1180
  /** @internal */
@@ -1576,7 +1582,9 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
1576
1582
  /** @internal */
1577
1583
  const loadActionTable = async (config, data, api_key, collection_endpoint) => {
1578
1584
  console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
1579
- const results = await Promise.all(config
1585
+ const results = isPreview()
1586
+ ? config.map(c => c.preview_value)
1587
+ : await Promise.all(config
1580
1588
  .filter(c => c.resolver === 'action-table-row' ||
1581
1589
  c.resolver === 'action-table-rows' ||
1582
1590
  c.resolver === 'action-table-query')
@@ -2906,7 +2914,10 @@ function Header($$anchor, $$props) {
2906
2914
  $fonts()
2907
2915
  ),
2908
2916
  () => {
2909
- if ($fonts().length > 0) {
2917
+ if (isPreview()) {
2918
+ // フォントのロードが遅れてエディタのプレビューがガタつく対策
2919
+ $.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
2920
+ } else if ($fonts().length > 0) {
2910
2921
  $.set(googleFontUrl, makeGoogleFontUrl($fonts()));
2911
2922
  }
2912
2923
  }
@@ -3467,7 +3478,7 @@ const EASING = {
3467
3478
  none: linear,
3468
3479
  };
3469
3480
  /**
3470
- * The function to activate svelte animation v2.
3481
+ * The function to activate svelte animation.
3471
3482
  *
3472
3483
  * @param node - A target node of animation. This argument is passed by svelte, by default.
3473
3484
  * @param customAnimationOptions - A custom animation option object
@@ -3476,8 +3487,8 @@ const EASING = {
3476
3487
  *
3477
3488
  * @internal
3478
3489
  */
3479
- function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
3480
- if (disabled) {
3490
+ function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3491
+ if (isPreview()) {
3481
3492
  return {};
3482
3493
  }
3483
3494
  let [x, y] = [0, 0];
@@ -6360,11 +6371,6 @@ function Modal($$anchor, $$props) {
6360
6371
  let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
6361
6372
  let layerId = $.prop($$props, 'layerId', 8, '');
6362
6373
  const { brandKit } = useBrandKit();
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
-
6368
6374
  // モーダル背景の設定
6369
6375
  const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
6370
6376
  let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6410,7 +6416,7 @@ function Modal($$anchor, $$props) {
6410
6416
  $.deep_read_state(breakPoint())
6411
6417
  ),
6412
6418
  () => {
6413
- if (!isCanvasPreview && isExistBackgroundOverlayValue) {
6419
+ if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
6414
6420
  $.set(backgroundOverlay, placement().backgroundOverlay);
6415
6421
  }
6416
6422
 
@@ -6516,7 +6522,7 @@ function Modal($$anchor, $$props) {
6516
6522
  // 表示位置のスタイルの設定
6517
6523
  let position = DefaultModalPlacement.position;
6518
6524
 
6519
- if (!isCanvasPreview && placement() && placement().position !== null) {
6525
+ if (!isCanvasPreview() && placement() && placement().position !== null) {
6520
6526
  position = placement().position;
6521
6527
  }
6522
6528
 
@@ -6533,7 +6539,7 @@ function Modal($$anchor, $$props) {
6533
6539
  $.set(transforms, []);
6534
6540
 
6535
6541
  DEVICE_IDS.forEach((deviceId) => {
6536
- if (!isCanvasPreview && useBreakPoint()) {
6542
+ if (!isCanvasPreview() && useBreakPoint()) {
6537
6543
  const positionWithBp = breakPoint()[deviceId]?.placement?.position;
6538
6544
 
6539
6545
  $.get(transforms).push({
@@ -6569,7 +6575,7 @@ function Modal($$anchor, $$props) {
6569
6575
  () => {
6570
6576
  let margin = DefaultModalPlacement.margin;
6571
6577
 
6572
- if (!isCanvasPreview && placement() && placement().margin !== null) {
6578
+ if (!isCanvasPreview() && placement() && placement().margin !== null) {
6573
6579
  margin = placement().margin;
6574
6580
  }
6575
6581
 
@@ -6580,7 +6586,7 @@ function Modal($$anchor, $$props) {
6580
6586
  }
6581
6587
 
6582
6588
  DEVICE_IDS.forEach((deviceId) => {
6583
- if (!isCanvasPreview && useBreakPoint()) {
6589
+ if (!isCanvasPreview() && useBreakPoint()) {
6584
6590
  const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
6585
6591
 
6586
6592
  marginStyle = getMarginStyle(marginWithBp);
@@ -6694,7 +6700,7 @@ function Modal($$anchor, $$props) {
6694
6700
  };
6695
6701
 
6696
6702
  $.if(node, ($$render) => {
6697
- if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
6703
+ if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
6698
6704
  });
6699
6705
  }
6700
6706
 
@@ -6725,10 +6731,9 @@ function Modal($$anchor, $$props) {
6725
6731
  $.derived_safe_equal
6726
6732
  );
6727
6733
 
6728
- $.transition(1, div, () => customAnimationV2, () => ({
6734
+ $.transition(1, div, () => customAnimation, () => ({
6729
6735
  transforms: $.get(transforms),
6730
- animationStyle: animation(),
6731
- disabled: !isOnSite
6736
+ animationStyle: animation()
6732
6737
  }));
6733
6738
 
6734
6739
  $.append($$anchor, div);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plaidev/karte-action-sdk",
3
- "version": "1.1.267-29071733.fabf64a6",
3
+ "version": "1.1.267-29071859.db1ade43",
4
4
  "author": "Plaid Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "module": "./dist/index.es.js",