@plaidev/karte-action-sdk 1.1.266 → 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.
@@ -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) => {
@@ -5136,11 +5198,11 @@ const IMAGE_ROUND_STYLES = {
5136
5198
  },
5137
5199
  };
5138
5200
 
5139
- var root_1$3 = $.template(`<img class="image-img svelte-gzaieg">`);
5201
+ var root_1$3 = $.template(`<img class="image-img svelte-rewdem">`);
5140
5202
 
5141
5203
  const $$css$g = {
5142
- hash: 'svelte-gzaieg',
5143
- code: '.image.svelte-gzaieg {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.image-img.svelte-gzaieg {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
5204
+ hash: 'svelte-rewdem',
5205
+ code: '.image.svelte-rewdem {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;}.image-img.svelte-rewdem {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
5144
5206
  };
5145
5207
 
5146
5208
  function Image($$anchor, $$props) {
@@ -5155,6 +5217,7 @@ function Image($$anchor, $$props) {
5155
5217
 
5156
5218
  const { attributes, element, handleClick } = useClickable(props());
5157
5219
  const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
5220
+ const width = props().width ?? '100%';
5158
5221
 
5159
5222
  $.legacy_pre_effect(
5160
5223
  () => (
@@ -5164,7 +5227,8 @@ function Image($$anchor, $$props) {
5164
5227
  () => {
5165
5228
  $.set(style, objToStyle({
5166
5229
  ...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? 'square'],
5167
- width: props().width ?? '100%',
5230
+ width,
5231
+ flexShrink: String(width).indexOf('px') !== -1 ? 0 : 1,
5168
5232
  height: props().height ?? 'auto',
5169
5233
  aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
5170
5234
  ...toCssCommon(props()),
@@ -5191,7 +5255,7 @@ function Image($$anchor, $$props) {
5191
5255
  style: $.get(style),
5192
5256
  'data-layer-id': layerId()
5193
5257
  },
5194
- 'svelte-gzaieg'
5258
+ 'svelte-rewdem'
5195
5259
  ));
5196
5260
 
5197
5261
  $.event('click', $$element, handleClick);
@@ -6230,7 +6294,6 @@ function Modal($$anchor, $$props) {
6230
6294
  const backgroundClickSP = $.mutable_state();
6231
6295
  const handle_keydown = $.mutable_state();
6232
6296
  const visible = $.mutable_state();
6233
- const style = $.mutable_state();
6234
6297
  let useBreakPoint = $.prop($$props, 'useBreakPoint', 8, false);
6235
6298
  let placement = $.prop($$props, 'placement', 8);
6236
6299
  let breakPoint = $.prop($$props, 'breakPoint', 8);
@@ -6241,8 +6304,11 @@ function Modal($$anchor, $$props) {
6241
6304
  let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
6242
6305
  let layerId = $.prop($$props, 'layerId', 8, '');
6243
6306
  const { brandKit } = useBrandKit();
6244
- // falseが明示的に指定されている場合以外はtrueにする
6245
- const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
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);
@@ -6288,7 +6354,7 @@ function Modal($$anchor, $$props) {
6288
6354
  $.deep_read_state(breakPoint())
6289
6355
  ),
6290
6356
  () => {
6291
- if (isOnSite && isExistBackgroundOverlayValue) {
6357
+ if (!isCanvasPreview && isExistBackgroundOverlayValue) {
6292
6358
  $.set(backgroundOverlay, placement().backgroundOverlay);
6293
6359
  }
6294
6360
 
@@ -6394,7 +6460,7 @@ function Modal($$anchor, $$props) {
6394
6460
  // 表示位置のスタイルの設定
6395
6461
  let position = DefaultModalPlacement.position;
6396
6462
 
6397
- if (isOnSite && placement() && placement().position !== null) {
6463
+ if (!isCanvasPreview && placement() && placement().position !== null) {
6398
6464
  position = placement().position;
6399
6465
  }
6400
6466
 
@@ -6411,7 +6477,7 @@ function Modal($$anchor, $$props) {
6411
6477
  $.set(transforms, []);
6412
6478
 
6413
6479
  DEVICE_IDS.forEach((deviceId) => {
6414
- if (isOnSite && useBreakPoint()) {
6480
+ if (!isCanvasPreview && useBreakPoint()) {
6415
6481
  const positionWithBp = breakPoint()[deviceId]?.placement?.position;
6416
6482
 
6417
6483
  $.get(transforms).push({
@@ -6441,12 +6507,13 @@ function Modal($$anchor, $$props) {
6441
6507
  $.deep_read_state(placement()),
6442
6508
  $.deep_read_state(useBreakPoint()),
6443
6509
  $.deep_read_state(breakPoint()),
6444
- parseStyle
6510
+ $.deep_read_state(props()),
6511
+ toCssBorder
6445
6512
  ),
6446
6513
  () => {
6447
6514
  let margin = DefaultModalPlacement.margin;
6448
6515
 
6449
- if (isOnSite && placement() && placement().margin !== null) {
6516
+ if (!isCanvasPreview && placement() && placement().margin !== null) {
6450
6517
  margin = placement().margin;
6451
6518
  }
6452
6519
 
@@ -6457,7 +6524,7 @@ function Modal($$anchor, $$props) {
6457
6524
  }
6458
6525
 
6459
6526
  DEVICE_IDS.forEach((deviceId) => {
6460
- if (isOnSite && useBreakPoint()) {
6527
+ if (!isCanvasPreview && useBreakPoint()) {
6461
6528
  const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
6462
6529
 
6463
6530
  marginStyle = getMarginStyle(marginWithBp);
@@ -6471,6 +6538,18 @@ function Modal($$anchor, $$props) {
6471
6538
 
6472
6539
  modalStyles.add(marginVariables);
6473
6540
  });
6541
+
6542
+ const propsStyle = objToStyle({
6543
+ width: props().width,
6544
+ ...toCssOverflow(props()),
6545
+ ...toCssShadow(props()),
6546
+ ...toCssRadius(props()),
6547
+ ...toCssBackgroundImage(props()),
6548
+ ...toCssBackgroundColor(props()),
6549
+ ...toCssBorder(props())
6550
+ });
6551
+
6552
+ modalStyles.add(propsStyle);
6474
6553
  }
6475
6554
  );
6476
6555
 
@@ -6486,24 +6565,6 @@ function Modal($$anchor, $$props) {
6486
6565
  $.set(visible, false);
6487
6566
  });
6488
6567
 
6489
- $.legacy_pre_effect(
6490
- () => (
6491
- $.deep_read_state(props()),
6492
- toCssBorder
6493
- ),
6494
- () => {
6495
- $.set(style, objToStyle({
6496
- width: props().width,
6497
- ...toCssOverflow(props()),
6498
- ...toCssShadow(props()),
6499
- ...toCssRadius(props()),
6500
- ...toCssBackgroundImage(props()),
6501
- ...toCssBackgroundColor(props()),
6502
- ...toCssBorder(props())
6503
- }));
6504
- }
6505
- );
6506
-
6507
6568
  $.legacy_pre_effect_reset();
6508
6569
  $.init();
6509
6570
 
@@ -6577,7 +6638,7 @@ function Modal($$anchor, $$props) {
6577
6638
  };
6578
6639
 
6579
6640
  $.if(node, ($$render) => {
6580
- if (!isOnSite) $$render(consequent); else $$render(alternate, false);
6641
+ if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
6581
6642
  });
6582
6643
  }
6583
6644
 
@@ -6603,17 +6664,15 @@ function Modal($$anchor, $$props) {
6603
6664
  'modal',
6604
6665
  useBreakPoint() ? 'modal-bp' : ''
6605
6666
  ].join(' ')),
6606
- () => [
6607
- Array.from(modalStyles).join(';'),
6608
- $.get(style)
6609
- ].join(' ')
6667
+ () => Array.from(modalStyles).join(';')
6610
6668
  ],
6611
6669
  $.derived_safe_equal
6612
6670
  );
6613
6671
 
6614
- $.transition(1, div, () => customAnimation, () => ({
6672
+ $.transition(1, div, () => customAnimationV2, () => ({
6615
6673
  transforms: $.get(transforms),
6616
- animationStyle: animation()
6674
+ animationStyle: animation(),
6675
+ disabled: !isOnSite
6617
6676
  }));
6618
6677
 
6619
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) {
@@ -5251,11 +5254,11 @@ const IMAGE_ROUND_STYLES = {
5251
5254
  },
5252
5255
  };
5253
5256
 
5254
- var root_1$3 = $.template(`<img class="image-img svelte-gzaieg">`);
5257
+ var root_1$3 = $.template(`<img class="image-img svelte-rewdem">`);
5255
5258
 
5256
5259
  const $$css$g = {
5257
- hash: 'svelte-gzaieg',
5258
- code: '.image.svelte-gzaieg {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.image-img.svelte-gzaieg {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
5260
+ hash: 'svelte-rewdem',
5261
+ code: '.image.svelte-rewdem {max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;}.image-img.svelte-rewdem {vertical-align:top;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}'
5259
5262
  };
5260
5263
 
5261
5264
  function Image($$anchor, $$props) {
@@ -5270,6 +5273,7 @@ function Image($$anchor, $$props) {
5270
5273
 
5271
5274
  const { attributes, element, handleClick } = useClickable(props());
5272
5275
  const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
5276
+ const width = props().width ?? '100%';
5273
5277
 
5274
5278
  $.legacy_pre_effect(
5275
5279
  () => (
@@ -5279,7 +5283,8 @@ function Image($$anchor, $$props) {
5279
5283
  () => {
5280
5284
  $.set(style, objToStyle({
5281
5285
  ...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? 'square'],
5282
- width: props().width ?? '100%',
5286
+ width,
5287
+ flexShrink: String(width).indexOf('px') !== -1 ? 0 : 1,
5283
5288
  height: props().height ?? 'auto',
5284
5289
  aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
5285
5290
  ...toCssCommon(props()),
@@ -5306,7 +5311,7 @@ function Image($$anchor, $$props) {
5306
5311
  style: $.get(style),
5307
5312
  'data-layer-id': layerId()
5308
5313
  },
5309
- 'svelte-gzaieg'
5314
+ 'svelte-rewdem'
5310
5315
  ));
5311
5316
 
5312
5317
  $.event('click', $$element, handleClick);
@@ -6345,7 +6350,6 @@ function Modal($$anchor, $$props) {
6345
6350
  const backgroundClickSP = $.mutable_state();
6346
6351
  const handle_keydown = $.mutable_state();
6347
6352
  const visible = $.mutable_state();
6348
- const style = $.mutable_state();
6349
6353
  let useBreakPoint = $.prop($$props, 'useBreakPoint', 8, false);
6350
6354
  let placement = $.prop($$props, 'placement', 8);
6351
6355
  let breakPoint = $.prop($$props, 'breakPoint', 8);
@@ -6356,8 +6360,11 @@ function Modal($$anchor, $$props) {
6356
6360
  let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
6357
6361
  let layerId = $.prop($$props, 'layerId', 8, '');
6358
6362
  const { brandKit } = useBrandKit();
6359
- // falseが明示的に指定されている場合以外はtrueにする
6360
- const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
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);
@@ -6403,7 +6410,7 @@ function Modal($$anchor, $$props) {
6403
6410
  $.deep_read_state(breakPoint())
6404
6411
  ),
6405
6412
  () => {
6406
- if (isOnSite && isExistBackgroundOverlayValue) {
6413
+ if (!isCanvasPreview && isExistBackgroundOverlayValue) {
6407
6414
  $.set(backgroundOverlay, placement().backgroundOverlay);
6408
6415
  }
6409
6416
 
@@ -6509,7 +6516,7 @@ function Modal($$anchor, $$props) {
6509
6516
  // 表示位置のスタイルの設定
6510
6517
  let position = DefaultModalPlacement.position;
6511
6518
 
6512
- if (isOnSite && placement() && placement().position !== null) {
6519
+ if (!isCanvasPreview && placement() && placement().position !== null) {
6513
6520
  position = placement().position;
6514
6521
  }
6515
6522
 
@@ -6526,7 +6533,7 @@ function Modal($$anchor, $$props) {
6526
6533
  $.set(transforms, []);
6527
6534
 
6528
6535
  DEVICE_IDS.forEach((deviceId) => {
6529
- if (isOnSite && useBreakPoint()) {
6536
+ if (!isCanvasPreview && useBreakPoint()) {
6530
6537
  const positionWithBp = breakPoint()[deviceId]?.placement?.position;
6531
6538
 
6532
6539
  $.get(transforms).push({
@@ -6556,12 +6563,13 @@ function Modal($$anchor, $$props) {
6556
6563
  $.deep_read_state(placement()),
6557
6564
  $.deep_read_state(useBreakPoint()),
6558
6565
  $.deep_read_state(breakPoint()),
6559
- parseStyle
6566
+ $.deep_read_state(props()),
6567
+ toCssBorder
6560
6568
  ),
6561
6569
  () => {
6562
6570
  let margin = DefaultModalPlacement.margin;
6563
6571
 
6564
- if (isOnSite && placement() && placement().margin !== null) {
6572
+ if (!isCanvasPreview && placement() && placement().margin !== null) {
6565
6573
  margin = placement().margin;
6566
6574
  }
6567
6575
 
@@ -6572,7 +6580,7 @@ function Modal($$anchor, $$props) {
6572
6580
  }
6573
6581
 
6574
6582
  DEVICE_IDS.forEach((deviceId) => {
6575
- if (isOnSite && useBreakPoint()) {
6583
+ if (!isCanvasPreview && useBreakPoint()) {
6576
6584
  const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
6577
6585
 
6578
6586
  marginStyle = getMarginStyle(marginWithBp);
@@ -6586,6 +6594,18 @@ function Modal($$anchor, $$props) {
6586
6594
 
6587
6595
  modalStyles.add(marginVariables);
6588
6596
  });
6597
+
6598
+ const propsStyle = objToStyle({
6599
+ width: props().width,
6600
+ ...toCssOverflow(props()),
6601
+ ...toCssShadow(props()),
6602
+ ...toCssRadius(props()),
6603
+ ...toCssBackgroundImage(props()),
6604
+ ...toCssBackgroundColor(props()),
6605
+ ...toCssBorder(props())
6606
+ });
6607
+
6608
+ modalStyles.add(propsStyle);
6589
6609
  }
6590
6610
  );
6591
6611
 
@@ -6601,24 +6621,6 @@ function Modal($$anchor, $$props) {
6601
6621
  $.set(visible, false);
6602
6622
  });
6603
6623
 
6604
- $.legacy_pre_effect(
6605
- () => (
6606
- $.deep_read_state(props()),
6607
- toCssBorder
6608
- ),
6609
- () => {
6610
- $.set(style, objToStyle({
6611
- width: props().width,
6612
- ...toCssOverflow(props()),
6613
- ...toCssShadow(props()),
6614
- ...toCssRadius(props()),
6615
- ...toCssBackgroundImage(props()),
6616
- ...toCssBackgroundColor(props()),
6617
- ...toCssBorder(props())
6618
- }));
6619
- }
6620
- );
6621
-
6622
6624
  $.legacy_pre_effect_reset();
6623
6625
  $.init();
6624
6626
 
@@ -6692,7 +6694,7 @@ function Modal($$anchor, $$props) {
6692
6694
  };
6693
6695
 
6694
6696
  $.if(node, ($$render) => {
6695
- if (!isOnSite) $$render(consequent); else $$render(alternate, false);
6697
+ if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
6696
6698
  });
6697
6699
  }
6698
6700
 
@@ -6718,17 +6720,15 @@ function Modal($$anchor, $$props) {
6718
6720
  'modal',
6719
6721
  useBreakPoint() ? 'modal-bp' : ''
6720
6722
  ].join(' ')),
6721
- () => [
6722
- Array.from(modalStyles).join(';'),
6723
- $.get(style)
6724
- ].join(' ')
6723
+ () => Array.from(modalStyles).join(';')
6725
6724
  ],
6726
6725
  $.derived_safe_equal
6727
6726
  );
6728
6727
 
6729
- $.transition(1, div, () => customAnimation, () => ({
6728
+ $.transition(1, div, () => customAnimationV2, () => ({
6730
6729
  transforms: $.get(transforms),
6731
- animationStyle: animation()
6730
+ animationStyle: animation(),
6731
+ disabled: !isOnSite
6732
6732
  }));
6733
6733
 
6734
6734
  $.append($$anchor, div);