@plaidev/karte-action-sdk 1.1.266-29059851.1bdc68e9 → 1.1.266-29065938.e3ec46c6

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.
@@ -5251,11 +5251,11 @@ const IMAGE_ROUND_STYLES = {
5251
5251
  },
5252
5252
  };
5253
5253
 
5254
- var root_1$3 = $.template(`<img class="image-img svelte-gzaieg">`);
5254
+ var root_1$3 = $.template(`<img class="image-img svelte-rewdem">`);
5255
5255
 
5256
5256
  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;}'
5257
+ hash: 'svelte-rewdem',
5258
+ 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
5259
  };
5260
5260
 
5261
5261
  function Image($$anchor, $$props) {
@@ -5270,6 +5270,7 @@ function Image($$anchor, $$props) {
5270
5270
 
5271
5271
  const { attributes, element, handleClick } = useClickable(props());
5272
5272
  const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
5273
+ const width = props().width ?? '100%';
5273
5274
 
5274
5275
  $.legacy_pre_effect(
5275
5276
  () => (
@@ -5279,7 +5280,8 @@ function Image($$anchor, $$props) {
5279
5280
  () => {
5280
5281
  $.set(style, objToStyle({
5281
5282
  ...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? 'square'],
5282
- width: props().width ?? '100%',
5283
+ width,
5284
+ flexShrink: String(width).indexOf('px') !== -1 ? 0 : 1,
5283
5285
  height: props().height ?? 'auto',
5284
5286
  aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
5285
5287
  ...toCssCommon(props()),
@@ -5306,7 +5308,7 @@ function Image($$anchor, $$props) {
5306
5308
  style: $.get(style),
5307
5309
  'data-layer-id': layerId()
5308
5310
  },
5309
- 'svelte-gzaieg'
5311
+ 'svelte-rewdem'
5310
5312
  ));
5311
5313
 
5312
5314
  $.event('click', $$element, handleClick);
@@ -6345,7 +6347,6 @@ function Modal($$anchor, $$props) {
6345
6347
  const backgroundClickSP = $.mutable_state();
6346
6348
  const handle_keydown = $.mutable_state();
6347
6349
  const visible = $.mutable_state();
6348
- const style = $.mutable_state();
6349
6350
  let useBreakPoint = $.prop($$props, 'useBreakPoint', 8, false);
6350
6351
  let placement = $.prop($$props, 'placement', 8);
6351
6352
  let breakPoint = $.prop($$props, 'breakPoint', 8);
@@ -6356,8 +6357,7 @@ function Modal($$anchor, $$props) {
6356
6357
  let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
6357
6358
  let layerId = $.prop($$props, 'layerId', 8, '');
6358
6359
  const { brandKit } = useBrandKit();
6359
- // falseが明示的に指定されている場合以外はtrueにする
6360
- const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
6360
+ const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
6361
6361
  // モーダル背景の設定
6362
6362
  const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
6363
6363
  let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6403,7 +6403,7 @@ function Modal($$anchor, $$props) {
6403
6403
  $.deep_read_state(breakPoint())
6404
6404
  ),
6405
6405
  () => {
6406
- if (isOnSite && isExistBackgroundOverlayValue) {
6406
+ if (!isCanvasPreview && isExistBackgroundOverlayValue) {
6407
6407
  $.set(backgroundOverlay, placement().backgroundOverlay);
6408
6408
  }
6409
6409
 
@@ -6509,7 +6509,7 @@ function Modal($$anchor, $$props) {
6509
6509
  // 表示位置のスタイルの設定
6510
6510
  let position = DefaultModalPlacement.position;
6511
6511
 
6512
- if (isOnSite && placement() && placement().position !== null) {
6512
+ if (!isCanvasPreview && placement() && placement().position !== null) {
6513
6513
  position = placement().position;
6514
6514
  }
6515
6515
 
@@ -6526,7 +6526,7 @@ function Modal($$anchor, $$props) {
6526
6526
  $.set(transforms, []);
6527
6527
 
6528
6528
  DEVICE_IDS.forEach((deviceId) => {
6529
- if (isOnSite && useBreakPoint()) {
6529
+ if (!isCanvasPreview && useBreakPoint()) {
6530
6530
  const positionWithBp = breakPoint()[deviceId]?.placement?.position;
6531
6531
 
6532
6532
  $.get(transforms).push({
@@ -6556,12 +6556,13 @@ function Modal($$anchor, $$props) {
6556
6556
  $.deep_read_state(placement()),
6557
6557
  $.deep_read_state(useBreakPoint()),
6558
6558
  $.deep_read_state(breakPoint()),
6559
- parseStyle
6559
+ $.deep_read_state(props()),
6560
+ toCssBorder
6560
6561
  ),
6561
6562
  () => {
6562
6563
  let margin = DefaultModalPlacement.margin;
6563
6564
 
6564
- if (isOnSite && placement() && placement().margin !== null) {
6565
+ if (!isCanvasPreview && placement() && placement().margin !== null) {
6565
6566
  margin = placement().margin;
6566
6567
  }
6567
6568
 
@@ -6572,7 +6573,7 @@ function Modal($$anchor, $$props) {
6572
6573
  }
6573
6574
 
6574
6575
  DEVICE_IDS.forEach((deviceId) => {
6575
- if (isOnSite && useBreakPoint()) {
6576
+ if (!isCanvasPreview && useBreakPoint()) {
6576
6577
  const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
6577
6578
 
6578
6579
  marginStyle = getMarginStyle(marginWithBp);
@@ -6586,6 +6587,18 @@ function Modal($$anchor, $$props) {
6586
6587
 
6587
6588
  modalStyles.add(marginVariables);
6588
6589
  });
6590
+
6591
+ const propsStyle = objToStyle({
6592
+ width: props().width,
6593
+ ...toCssOverflow(props()),
6594
+ ...toCssShadow(props()),
6595
+ ...toCssRadius(props()),
6596
+ ...toCssBackgroundImage(props()),
6597
+ ...toCssBackgroundColor(props()),
6598
+ ...toCssBorder(props())
6599
+ });
6600
+
6601
+ modalStyles.add(propsStyle);
6589
6602
  }
6590
6603
  );
6591
6604
 
@@ -6601,24 +6614,6 @@ function Modal($$anchor, $$props) {
6601
6614
  $.set(visible, false);
6602
6615
  });
6603
6616
 
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
6617
  $.legacy_pre_effect_reset();
6623
6618
  $.init();
6624
6619
 
@@ -6692,7 +6687,7 @@ function Modal($$anchor, $$props) {
6692
6687
  };
6693
6688
 
6694
6689
  $.if(node, ($$render) => {
6695
- if (!isOnSite) $$render(consequent); else $$render(alternate, false);
6690
+ if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
6696
6691
  });
6697
6692
  }
6698
6693
 
@@ -6718,10 +6713,7 @@ function Modal($$anchor, $$props) {
6718
6713
  'modal',
6719
6714
  useBreakPoint() ? 'modal-bp' : ''
6720
6715
  ].join(' ')),
6721
- () => [
6722
- Array.from(modalStyles).join(';'),
6723
- $.get(style)
6724
- ].join(' ')
6716
+ () => Array.from(modalStyles).join(';')
6725
6717
  ],
6726
6718
  $.derived_safe_equal
6727
6719
  );
@@ -5251,11 +5251,11 @@ const IMAGE_ROUND_STYLES = {
5251
5251
  },
5252
5252
  };
5253
5253
 
5254
- var root_1$3 = $.template(`<img class="image-img svelte-gzaieg">`);
5254
+ var root_1$3 = $.template(`<img class="image-img svelte-rewdem">`);
5255
5255
 
5256
5256
  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;}'
5257
+ hash: 'svelte-rewdem',
5258
+ 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
5259
  };
5260
5260
 
5261
5261
  function Image($$anchor, $$props) {
@@ -5270,6 +5270,7 @@ function Image($$anchor, $$props) {
5270
5270
 
5271
5271
  const { attributes, element, handleClick } = useClickable(props());
5272
5272
  const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
5273
+ const width = props().width ?? '100%';
5273
5274
 
5274
5275
  $.legacy_pre_effect(
5275
5276
  () => (
@@ -5279,7 +5280,8 @@ function Image($$anchor, $$props) {
5279
5280
  () => {
5280
5281
  $.set(style, objToStyle({
5281
5282
  ...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? 'square'],
5282
- width: props().width ?? '100%',
5283
+ width,
5284
+ flexShrink: String(width).indexOf('px') !== -1 ? 0 : 1,
5283
5285
  height: props().height ?? 'auto',
5284
5286
  aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
5285
5287
  ...toCssCommon(props()),
@@ -5306,7 +5308,7 @@ function Image($$anchor, $$props) {
5306
5308
  style: $.get(style),
5307
5309
  'data-layer-id': layerId()
5308
5310
  },
5309
- 'svelte-gzaieg'
5311
+ 'svelte-rewdem'
5310
5312
  ));
5311
5313
 
5312
5314
  $.event('click', $$element, handleClick);
@@ -6345,7 +6347,6 @@ function Modal($$anchor, $$props) {
6345
6347
  const backgroundClickSP = $.mutable_state();
6346
6348
  const handle_keydown = $.mutable_state();
6347
6349
  const visible = $.mutable_state();
6348
- const style = $.mutable_state();
6349
6350
  let useBreakPoint = $.prop($$props, 'useBreakPoint', 8, false);
6350
6351
  let placement = $.prop($$props, 'placement', 8);
6351
6352
  let breakPoint = $.prop($$props, 'breakPoint', 8);
@@ -6356,8 +6357,7 @@ function Modal($$anchor, $$props) {
6356
6357
  let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
6357
6358
  let layerId = $.prop($$props, 'layerId', 8, '');
6358
6359
  const { brandKit } = useBrandKit();
6359
- // falseが明示的に指定されている場合以外はtrueにする
6360
- const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
6360
+ const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
6361
6361
  // モーダル背景の設定
6362
6362
  const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
6363
6363
  let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6403,7 +6403,7 @@ function Modal($$anchor, $$props) {
6403
6403
  $.deep_read_state(breakPoint())
6404
6404
  ),
6405
6405
  () => {
6406
- if (isOnSite && isExistBackgroundOverlayValue) {
6406
+ if (!isCanvasPreview && isExistBackgroundOverlayValue) {
6407
6407
  $.set(backgroundOverlay, placement().backgroundOverlay);
6408
6408
  }
6409
6409
 
@@ -6509,7 +6509,7 @@ function Modal($$anchor, $$props) {
6509
6509
  // 表示位置のスタイルの設定
6510
6510
  let position = DefaultModalPlacement.position;
6511
6511
 
6512
- if (isOnSite && placement() && placement().position !== null) {
6512
+ if (!isCanvasPreview && placement() && placement().position !== null) {
6513
6513
  position = placement().position;
6514
6514
  }
6515
6515
 
@@ -6526,7 +6526,7 @@ function Modal($$anchor, $$props) {
6526
6526
  $.set(transforms, []);
6527
6527
 
6528
6528
  DEVICE_IDS.forEach((deviceId) => {
6529
- if (isOnSite && useBreakPoint()) {
6529
+ if (!isCanvasPreview && useBreakPoint()) {
6530
6530
  const positionWithBp = breakPoint()[deviceId]?.placement?.position;
6531
6531
 
6532
6532
  $.get(transforms).push({
@@ -6556,12 +6556,13 @@ function Modal($$anchor, $$props) {
6556
6556
  $.deep_read_state(placement()),
6557
6557
  $.deep_read_state(useBreakPoint()),
6558
6558
  $.deep_read_state(breakPoint()),
6559
- parseStyle
6559
+ $.deep_read_state(props()),
6560
+ toCssBorder
6560
6561
  ),
6561
6562
  () => {
6562
6563
  let margin = DefaultModalPlacement.margin;
6563
6564
 
6564
- if (isOnSite && placement() && placement().margin !== null) {
6565
+ if (!isCanvasPreview && placement() && placement().margin !== null) {
6565
6566
  margin = placement().margin;
6566
6567
  }
6567
6568
 
@@ -6572,7 +6573,7 @@ function Modal($$anchor, $$props) {
6572
6573
  }
6573
6574
 
6574
6575
  DEVICE_IDS.forEach((deviceId) => {
6575
- if (isOnSite && useBreakPoint()) {
6576
+ if (!isCanvasPreview && useBreakPoint()) {
6576
6577
  const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
6577
6578
 
6578
6579
  marginStyle = getMarginStyle(marginWithBp);
@@ -6586,6 +6587,18 @@ function Modal($$anchor, $$props) {
6586
6587
 
6587
6588
  modalStyles.add(marginVariables);
6588
6589
  });
6590
+
6591
+ const propsStyle = objToStyle({
6592
+ width: props().width,
6593
+ ...toCssOverflow(props()),
6594
+ ...toCssShadow(props()),
6595
+ ...toCssRadius(props()),
6596
+ ...toCssBackgroundImage(props()),
6597
+ ...toCssBackgroundColor(props()),
6598
+ ...toCssBorder(props())
6599
+ });
6600
+
6601
+ modalStyles.add(propsStyle);
6589
6602
  }
6590
6603
  );
6591
6604
 
@@ -6601,24 +6614,6 @@ function Modal($$anchor, $$props) {
6601
6614
  $.set(visible, false);
6602
6615
  });
6603
6616
 
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
6617
  $.legacy_pre_effect_reset();
6623
6618
  $.init();
6624
6619
 
@@ -6692,7 +6687,7 @@ function Modal($$anchor, $$props) {
6692
6687
  };
6693
6688
 
6694
6689
  $.if(node, ($$render) => {
6695
- if (!isOnSite) $$render(consequent); else $$render(alternate, false);
6690
+ if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
6696
6691
  });
6697
6692
  }
6698
6693
 
@@ -6718,10 +6713,7 @@ function Modal($$anchor, $$props) {
6718
6713
  'modal',
6719
6714
  useBreakPoint() ? 'modal-bp' : ''
6720
6715
  ].join(' ')),
6721
- () => [
6722
- Array.from(modalStyles).join(';'),
6723
- $.get(style)
6724
- ].join(' ')
6716
+ () => Array.from(modalStyles).join(';')
6725
6717
  ],
6726
6718
  $.derived_safe_equal
6727
6719
  );
@@ -8052,8 +8044,6 @@ function ThumbnailPreview($$anchor, $$props) {
8052
8044
  let option = $.prop($$props, 'option', 24, () => ({}));
8053
8045
  let customBrandKit = $.prop($$props, 'customBrandKit', 8, undefined);
8054
8046
 
8055
- console.log('option', option());
8056
-
8057
8047
  const getComponent = (key) => {
8058
8048
  return key in sdk ? sdk[key] : null;
8059
8049
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plaidev/karte-action-sdk",
3
- "version": "1.1.266-29059851.1bdc68e9",
3
+ "version": "1.1.266-29065938.e3ec46c6",
4
4
  "author": "Plaid Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "module": "./dist/index.es.js",