@plaidev/karte-action-sdk 1.1.267-29071733.fabf64a6 → 1.1.267-29082453.379cb476

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,9 +35,14 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
35
35
  /** @internal */
36
36
  const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
37
37
  /** @internal */
38
- const isPreview = () => {
39
- return true;
40
- };
38
+ const isPreview = () => (true);
39
+ const isCanvasPreview = () => typeof document !== 'undefined'
40
+ ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
41
+ 'true'
42
+ : false;
43
+ const isOnSite = () => typeof document !== 'undefined'
44
+ ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
45
+ : true;
41
46
  /** @internal */
42
47
  const setPreviousFocus = () => {
43
48
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -1848,6 +1853,7 @@ function createModal(App, options = {
1848
1853
  close(trigger);
1849
1854
  };
1850
1855
  const show = async (trigger = 'none') => {
1856
+ console.log('show trigger', trigger);
1851
1857
  if (app) {
1852
1858
  return;
1853
1859
  }
@@ -3440,22 +3446,7 @@ const EASING = {
3440
3446
  * @internal
3441
3447
  */
3442
3448
  function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
3443
- {
3444
- return {};
3445
- }
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) {
3449
+ if (!isOnSite()) {
3459
3450
  return {};
3460
3451
  }
3461
3452
  let [x, y] = [0, 0];
@@ -18728,7 +18719,7 @@ function add_css$9(target) {
18728
18719
  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
18720
  }
18730
18721
 
18731
- // (222:0) {:else}
18722
+ // (219:0) {:else}
18732
18723
  function create_else_block(ctx) {
18733
18724
  let backgroundoverlay;
18734
18725
  let current;
@@ -18775,7 +18766,7 @@ function create_else_block(ctx) {
18775
18766
  };
18776
18767
  }
18777
18768
 
18778
- // (211:24)
18769
+ // (208:24)
18779
18770
  function create_if_block_2(ctx) {
18780
18771
  let backgroundoverlay0;
18781
18772
  let t;
@@ -18849,7 +18840,7 @@ function create_if_block_2(ctx) {
18849
18840
  };
18850
18841
  }
18851
18842
 
18852
- // (209:0) {#if isCanvasPreview}
18843
+ // (206:0) {#if isCanvasPreview()}
18853
18844
  function create_if_block_1$1(ctx) {
18854
18845
  return {
18855
18846
  c: noop,
@@ -18862,14 +18853,14 @@ function create_if_block_1$1(ctx) {
18862
18853
  };
18863
18854
  }
18864
18855
 
18865
- // (225:0) {#if visible}
18856
+ // (222:0) {#if visible}
18866
18857
  function create_if_block$3(ctx) {
18867
18858
  let div;
18868
18859
  let div_class_value;
18869
18860
  let div_intro;
18870
18861
  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);
18862
+ const default_slot_template = /*#slots*/ ctx[25].default;
18863
+ const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[24], null);
18873
18864
 
18874
18865
  return {
18875
18866
  c() {
@@ -18896,7 +18887,7 @@ function create_if_block$3(ctx) {
18896
18887
  attr(div, "role", "dialog");
18897
18888
  attr(div, "aria-modal", "true");
18898
18889
  attr(div, "data-layer-id", /*layerId*/ ctx[2]);
18899
- attr(div, "style", Array.from(/*modalStyles*/ ctx[15]).join(';'));
18890
+ attr(div, "style", Array.from(/*modalStyles*/ ctx[13]).join(';'));
18900
18891
  },
18901
18892
  m(target, anchor) {
18902
18893
  insert_hydration(target, div, anchor);
@@ -18905,22 +18896,22 @@ function create_if_block$3(ctx) {
18905
18896
  default_slot.m(div, null);
18906
18897
  }
18907
18898
 
18908
- /*div_binding*/ ctx[28](div);
18899
+ /*div_binding*/ ctx[26](div);
18909
18900
  current = true;
18910
18901
  },
18911
18902
  p(new_ctx, dirty) {
18912
18903
  ctx = new_ctx;
18913
18904
 
18914
18905
  if (default_slot) {
18915
- if (default_slot.p && (!current || dirty & /*$$scope*/ 67108864)) {
18906
+ if (default_slot.p && (!current || dirty & /*$$scope*/ 16777216)) {
18916
18907
  update_slot_base(
18917
18908
  default_slot,
18918
18909
  default_slot_template,
18919
18910
  ctx,
18920
- /*$$scope*/ ctx[26],
18911
+ /*$$scope*/ ctx[24],
18921
18912
  !current
18922
- ? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
18923
- : get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
18913
+ ? get_all_dirty_from_scope(/*$$scope*/ ctx[24])
18914
+ : get_slot_changes(default_slot_template, /*$$scope*/ ctx[24], dirty, null),
18924
18915
  null
18925
18916
  );
18926
18917
  }
@@ -18940,10 +18931,9 @@ function create_if_block$3(ctx) {
18940
18931
 
18941
18932
  if (!div_intro) {
18942
18933
  add_render_callback(() => {
18943
- div_intro = create_in_transition(div, customAnimationV2, {
18934
+ div_intro = create_in_transition(div, customAnimation, {
18944
18935
  transforms: /*transforms*/ ctx[3],
18945
- animationStyle: /*animation*/ ctx[1],
18946
- disabled: !/*isOnSite*/ ctx[14]
18936
+ animationStyle: /*animation*/ ctx[1]
18947
18937
  });
18948
18938
 
18949
18939
  div_intro.start();
@@ -18959,12 +18949,13 @@ function create_if_block$3(ctx) {
18959
18949
  d(detaching) {
18960
18950
  if (detaching) detach(div);
18961
18951
  if (default_slot) default_slot.d(detaching);
18962
- /*div_binding*/ ctx[28](null);
18952
+ /*div_binding*/ ctx[26](null);
18963
18953
  }
18964
18954
  };
18965
18955
  }
18966
18956
 
18967
18957
  function create_fragment$d(ctx) {
18958
+ let show_if;
18968
18959
  let current_block_type_index;
18969
18960
  let if_block0;
18970
18961
  let t;
@@ -18976,7 +18967,8 @@ function create_fragment$d(ctx) {
18976
18967
  const if_blocks = [];
18977
18968
 
18978
18969
  function select_block_type(ctx, dirty) {
18979
- if (/*isCanvasPreview*/ ctx[13]) return 0;
18970
+ if (show_if == null) show_if = !!isCanvasPreview();
18971
+ if (show_if) return 0;
18980
18972
  if (/*useBreakPoint*/ ctx[0]) return 1;
18981
18973
  return 2;
18982
18974
  }
@@ -19104,9 +19096,6 @@ function instance$d($$self, $$props, $$invalidate) {
19104
19096
  let { closeEventValue = null } = $$props;
19105
19097
  let { layerId = '' } = $$props;
19106
19098
  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
19099
 
19111
19100
  // モーダル背景の設定
19112
19101
  const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
@@ -19139,20 +19128,20 @@ function instance$d($$self, $$props, $$invalidate) {
19139
19128
 
19140
19129
  $$self.$$set = $$props => {
19141
19130
  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);
19131
+ if ('placement' in $$props) $$invalidate(14, placement = $$props.placement);
19132
+ if ('breakPoint' in $$props) $$invalidate(15, breakPoint = $$props.breakPoint);
19133
+ if ('elasticity' in $$props) $$invalidate(16, elasticity = $$props.elasticity);
19145
19134
  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);
19135
+ if ('props' in $$props) $$invalidate(17, props = $$props.props);
19136
+ if ('closeEventName' in $$props) $$invalidate(18, closeEventName = $$props.closeEventName);
19137
+ if ('closeEventValue' in $$props) $$invalidate(19, closeEventValue = $$props.closeEventValue);
19149
19138
  if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
19150
- if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
19139
+ if ('$$scope' in $$props) $$invalidate(24, $$scope = $$props.$$scope);
19151
19140
  };
19152
19141
 
19153
19142
  $$self.$$.update = () => {
19154
- if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 3145728) {
19155
- $$invalidate(25, close = () => {
19143
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 786432) {
19144
+ $$invalidate(23, close = () => {
19156
19145
  const onClose = { operation: 'closeApp', args: ['button'] };
19157
19146
 
19158
19147
  if (closeEventName) {
@@ -19163,9 +19152,9 @@ function instance$d($$self, $$props, $$invalidate) {
19163
19152
  });
19164
19153
  }
19165
19154
 
19166
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
19155
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
19167
19156
  {
19168
- if (!isCanvasPreview && isExistBackgroundOverlayValue) {
19157
+ if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
19169
19158
  $$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
19170
19159
  }
19171
19160
 
@@ -19178,29 +19167,29 @@ function instance$d($$self, $$props, $$invalidate) {
19178
19167
  }
19179
19168
  }
19180
19169
 
19181
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
19170
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
19182
19171
  {
19183
19172
  if (placement && placement.backgroundClick) {
19184
- $$invalidate(22, backgroundClickFunction = placement.backgroundClick);
19173
+ $$invalidate(20, backgroundClickFunction = placement.backgroundClick);
19185
19174
  }
19186
19175
 
19187
19176
  if (useBreakPoint) {
19188
19177
  const pc = breakPoint?.PC?.placement?.backgroundClick;
19189
19178
 
19190
19179
  if (pc) {
19191
- $$invalidate(23, backgroundClickFunctionPC = pc);
19180
+ $$invalidate(21, backgroundClickFunctionPC = pc);
19192
19181
  }
19193
19182
 
19194
19183
  const sp = breakPoint?.SP?.placement?.backgroundClick;
19195
19184
 
19196
19185
  if (sp) {
19197
- $$invalidate(24, backgroundClickFunctionSP = sp);
19186
+ $$invalidate(22, backgroundClickFunctionSP = sp);
19198
19187
  }
19199
19188
  }
19200
19189
  }
19201
19190
  }
19202
19191
 
19203
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 7340032) {
19192
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 1835008) {
19204
19193
  $$invalidate(12, backgroundClick = () => {
19205
19194
  if (closeEventName) {
19206
19195
  send_event(closeEventName, closeEventValue);
@@ -19210,7 +19199,7 @@ function instance$d($$self, $$props, $$invalidate) {
19210
19199
  });
19211
19200
  }
19212
19201
 
19213
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 11534336) {
19202
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 2883584) {
19214
19203
  $$invalidate(11, backgroundClickPC = () => {
19215
19204
  if (closeEventName) {
19216
19205
  send_event(closeEventName, closeEventValue);
@@ -19220,7 +19209,7 @@ function instance$d($$self, $$props, $$invalidate) {
19220
19209
  });
19221
19210
  }
19222
19211
 
19223
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 19922944) {
19212
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 4980736) {
19224
19213
  $$invalidate(10, backgroundClickSP = () => {
19225
19214
  if (closeEventName) {
19226
19215
  send_event(closeEventName, closeEventValue);
@@ -19230,13 +19219,13 @@ function instance$d($$self, $$props, $$invalidate) {
19230
19219
  });
19231
19220
  }
19232
19221
 
19233
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 196617) {
19222
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 49161) {
19234
19223
  // 表示位置のスタイルとアニメーションの動きを設定
19235
19224
  {
19236
19225
  // 表示位置のスタイルの設定
19237
19226
  let position = DefaultModalPlacement.position;
19238
19227
 
19239
- if (!isCanvasPreview && placement && placement.position !== null) {
19228
+ if (!isCanvasPreview() && placement && placement.position !== null) {
19240
19229
  position = placement.position;
19241
19230
  }
19242
19231
 
@@ -19253,7 +19242,7 @@ function instance$d($$self, $$props, $$invalidate) {
19253
19242
  $$invalidate(3, transforms = []);
19254
19243
 
19255
19244
  DEVICE_IDS.forEach(deviceId => {
19256
- if (!isCanvasPreview && useBreakPoint) {
19245
+ if (!isCanvasPreview() && useBreakPoint) {
19257
19246
  const positionWithBp = breakPoint[deviceId]?.placement?.position;
19258
19247
 
19259
19248
  transforms.push({
@@ -19278,12 +19267,12 @@ function instance$d($$self, $$props, $$invalidate) {
19278
19267
  }
19279
19268
  }
19280
19269
 
19281
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 720897) {
19270
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 180225) {
19282
19271
  // 表示位置の調整のスタイルを設定
19283
19272
  {
19284
19273
  let margin = DefaultModalPlacement.margin;
19285
19274
 
19286
- if (!isCanvasPreview && placement && placement.margin !== null) {
19275
+ if (!isCanvasPreview() && placement && placement.margin !== null) {
19287
19276
  margin = placement.margin;
19288
19277
  }
19289
19278
 
@@ -19294,7 +19283,7 @@ function instance$d($$self, $$props, $$invalidate) {
19294
19283
  }
19295
19284
 
19296
19285
  DEVICE_IDS.forEach(deviceId => {
19297
- if (!isCanvasPreview && useBreakPoint) {
19286
+ if (!isCanvasPreview() && useBreakPoint) {
19298
19287
  const marginWithBp = breakPoint[deviceId]?.placement?.margin;
19299
19288
  marginStyle = getMarginStyle(marginWithBp);
19300
19289
  }
@@ -19322,7 +19311,7 @@ function instance$d($$self, $$props, $$invalidate) {
19322
19311
  }
19323
19312
  }
19324
19313
 
19325
- if ($$self.$$.dirty & /*close*/ 33554432) {
19314
+ if ($$self.$$.dirty & /*close*/ 8388608) {
19326
19315
  $$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
19327
19316
  }
19328
19317
  };
@@ -19346,8 +19335,6 @@ function instance$d($$self, $$props, $$invalidate) {
19346
19335
  backgroundClickSP,
19347
19336
  backgroundClickPC,
19348
19337
  backgroundClick,
19349
- isCanvasPreview,
19350
- isOnSite,
19351
19338
  modalStyles,
19352
19339
  placement,
19353
19340
  breakPoint,
@@ -19377,13 +19364,13 @@ class Modal extends SvelteComponent {
19377
19364
  safe_not_equal,
19378
19365
  {
19379
19366
  useBreakPoint: 0,
19380
- placement: 16,
19381
- breakPoint: 17,
19382
- elasticity: 18,
19367
+ placement: 14,
19368
+ breakPoint: 15,
19369
+ elasticity: 16,
19383
19370
  animation: 1,
19384
- props: 19,
19385
- closeEventName: 20,
19386
- closeEventValue: 21,
19371
+ props: 17,
19372
+ closeEventName: 18,
19373
+ closeEventValue: 19,
19387
19374
  layerId: 2
19388
19375
  },
19389
19376
  add_css$9
@@ -21172,7 +21159,8 @@ function getActionRoot() {
21172
21159
  return root.shadowRoot;
21173
21160
  }
21174
21161
  /** @internal */
21175
- function ensureActionRoot() {
21162
+ function ensureActionRoot(useShadow = true) {
21163
+ console.log('useShadow', useShadow);
21176
21164
  const systemConfig = getSystem();
21177
21165
  const rootAttrs = {
21178
21166
  class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -21183,11 +21171,13 @@ function ensureActionRoot() {
21183
21171
  style: { display: 'block' },
21184
21172
  };
21185
21173
  let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
21174
+ console.log('el', el);
21186
21175
  if (el == null) {
21187
21176
  el = h('div', rootAttrs);
21188
21177
  document.body.appendChild(el);
21189
21178
  }
21190
- const isShadow = !!document.body.attachShadow;
21179
+ const isShadow = !!document.body.attachShadow && useShadow;
21180
+ console.log('isShadow', isShadow);
21191
21181
  if (isShadow) {
21192
21182
  return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
21193
21183
  }
@@ -21256,7 +21246,7 @@ function createApp(App, options = {
21256
21246
  },
21257
21247
  },
21258
21248
  };
21259
- const win = ensureModalRoot();
21249
+ const win = ensureModalRoot(true);
21260
21250
  appArgs.target = win;
21261
21251
  return {
21262
21252
  close,