@plaidev/karte-action-sdk 1.1.264-29052187.465265af → 1.1.265-29058826.de4fe889

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.
package/dist/index.es.js CHANGED
@@ -1658,7 +1658,7 @@ const handleState = (event) => {
1658
1658
  *
1659
1659
  * @public
1660
1660
  */
1661
- function onShow(fn) {
1661
+ function onShow$1(fn) {
1662
1662
  let { onShowHandlers } = getInternalHandlers();
1663
1663
  if (!onShowHandlers) {
1664
1664
  onShowHandlers = [];
@@ -1673,7 +1673,7 @@ function onShow(fn) {
1673
1673
  *
1674
1674
  * @public
1675
1675
  */
1676
- function onClose(fn) {
1676
+ function onClose$1(fn) {
1677
1677
  let { onCloseHandlers } = getInternalHandlers();
1678
1678
  if (!onCloseHandlers) {
1679
1679
  onCloseHandlers = [];
@@ -1688,7 +1688,7 @@ function onClose(fn) {
1688
1688
  *
1689
1689
  * @public
1690
1690
  */
1691
- function onChangeState(fn) {
1691
+ function onChangeState$1(fn) {
1692
1692
  let { onChangeStateHandlers } = getInternalHandlers();
1693
1693
  if (!onChangeStateHandlers) {
1694
1694
  onChangeStateHandlers = [];
@@ -1701,7 +1701,7 @@ function onChangeState(fn) {
1701
1701
  *
1702
1702
  * @public
1703
1703
  */
1704
- function showAction() {
1704
+ function showAction$1() {
1705
1705
  const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
1706
1706
  window.dispatchEvent(event);
1707
1707
  }
@@ -1712,7 +1712,7 @@ function showAction() {
1712
1712
  *
1713
1713
  * @public
1714
1714
  */
1715
- function closeAction(trigger = 'none') {
1715
+ function closeAction$1(trigger = 'none') {
1716
1716
  const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
1717
1717
  window.dispatchEvent(event);
1718
1718
  }
@@ -1725,11 +1725,11 @@ function closeAction(trigger = 'none') {
1725
1725
  *
1726
1726
  * @public
1727
1727
  */
1728
- async function applyCss(css) {
1728
+ async function applyCss$1(css) {
1729
1729
  return new Promise((resolve, reject) => {
1730
1730
  const style = document.createElement('style');
1731
1731
  style.textContent = css;
1732
- const shadowRoot = getActionRoot();
1732
+ const shadowRoot = getActionRoot$1();
1733
1733
  if (!shadowRoot)
1734
1734
  return;
1735
1735
  shadowRoot.append(style);
@@ -1737,7 +1737,7 @@ async function applyCss(css) {
1737
1737
  style.addEventListener('error', () => reject(style));
1738
1738
  });
1739
1739
  }
1740
- async function fixFontFaceIssue(href, cssRules) {
1740
+ async function fixFontFaceIssue$1(href, cssRules) {
1741
1741
  const css = new CSSStyleSheet();
1742
1742
  // @ts-ignore
1743
1743
  await css.replace(cssRules);
@@ -1767,8 +1767,8 @@ async function fixFontFaceIssue(href, cssRules) {
1767
1767
  *
1768
1768
  * @public
1769
1769
  */
1770
- async function loadStyle(href) {
1771
- const sr = getActionRoot();
1770
+ async function loadStyle$1(href) {
1771
+ const sr = getActionRoot$1();
1772
1772
  if (!sr)
1773
1773
  return;
1774
1774
  let cssRules = '';
@@ -1783,7 +1783,7 @@ async function loadStyle(href) {
1783
1783
  return;
1784
1784
  // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
1785
1785
  // @see https://stackoverflow.com/a/63717709
1786
- const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
1786
+ const [rules, fontFaceRules] = await fixFontFaceIssue$1(href, cssRules);
1787
1787
  const css = new CSSStyleSheet();
1788
1788
  // @ts-ignore
1789
1789
  await css.replace(rules);
@@ -1798,7 +1798,7 @@ async function loadStyle(href) {
1798
1798
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
1799
1799
  }
1800
1800
  // @internal
1801
- function getCssVariables(data) {
1801
+ function getCssVariables$1(data) {
1802
1802
  return Object.entries(data)
1803
1803
  .filter(([key, value]) => {
1804
1804
  return ['string', 'number'].includes(typeof value) && key.startsWith('--');
@@ -1813,7 +1813,7 @@ function getCssVariables(data) {
1813
1813
  *
1814
1814
  * @public
1815
1815
  */
1816
- function getActionRoot() {
1816
+ function getActionRoot$1() {
1817
1817
  const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
1818
1818
  if (!root?.shadowRoot) {
1819
1819
  return null;
@@ -1912,7 +1912,7 @@ function createModal(App, options = {
1912
1912
  return;
1913
1913
  }
1914
1914
  const props = {
1915
- target: ensureActionRoot(!false),
1915
+ target: ensureActionRoot$1(!false),
1916
1916
  hydrate: false,
1917
1917
  props: {
1918
1918
  send: options.send,
@@ -2030,7 +2030,7 @@ function createModal(App, options = {
2030
2030
  return appCleanup;
2031
2031
  }
2032
2032
  /** @internal */
2033
- function ensureActionRoot(useShadow = true) {
2033
+ function ensureActionRoot$1(useShadow = true) {
2034
2034
  const systemConfig = getSystem();
2035
2035
  const rootAttrs = {
2036
2036
  class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -2060,7 +2060,7 @@ function ensureActionRoot(useShadow = true) {
2060
2060
  *
2061
2061
  * @internal
2062
2062
  */
2063
- const show = showAction;
2063
+ const show$1 = showAction$1;
2064
2064
  /**
2065
2065
  * 非推奨
2066
2066
  *
@@ -2068,7 +2068,7 @@ const show = showAction;
2068
2068
  *
2069
2069
  * @internal
2070
2070
  */
2071
- const close = closeAction;
2071
+ const close$1 = closeAction$1;
2072
2072
  /**
2073
2073
  * 非推奨
2074
2074
  *
@@ -2076,7 +2076,7 @@ const close = closeAction;
2076
2076
  *
2077
2077
  * @internal
2078
2078
  */
2079
- const ensureModalRoot = ensureActionRoot;
2079
+ const ensureModalRoot$1 = ensureActionRoot$1;
2080
2080
  /**
2081
2081
  * 非推奨
2082
2082
  *
@@ -2084,7 +2084,7 @@ const ensureModalRoot = ensureActionRoot;
2084
2084
  *
2085
2085
  * @internal
2086
2086
  */
2087
- function createApp(App, options = {
2087
+ function createApp$1(App, options = {
2088
2088
  send: () => { },
2089
2089
  publish: () => { },
2090
2090
  props: {},
@@ -2115,7 +2115,7 @@ function createApp(App, options = {
2115
2115
  },
2116
2116
  };
2117
2117
  {
2118
- const win = ensureModalRoot(true);
2118
+ const win = ensureModalRoot$1(true);
2119
2119
  appArgs.target = win;
2120
2120
  }
2121
2121
  return {
@@ -2137,8 +2137,8 @@ function createApp(App, options = {
2137
2137
  *
2138
2138
  * @internal
2139
2139
  */
2140
- function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
2141
- const root = ensureModalRoot(false);
2140
+ function createFog$1({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
2141
+ const root = ensureModalRoot$1(false);
2142
2142
  if (root.querySelector('.__krt-fog')) {
2143
2143
  return { fog: null, close: () => { } };
2144
2144
  }
@@ -2882,13 +2882,13 @@ var widget = /*#__PURE__*/Object.freeze({
2882
2882
  collection: collection,
2883
2883
  getState: getState,
2884
2884
  getVal: getVal,
2885
- hide: closeAction,
2885
+ hide: closeAction$1,
2886
2886
  method: method,
2887
2887
  on: on,
2888
2888
  onChangeVal: onChangeVal,
2889
2889
  setState: setState,
2890
2890
  setVal: setVal,
2891
- show: showAction,
2891
+ show: showAction$1,
2892
2892
  storage: storage
2893
2893
  });
2894
2894
 
@@ -15795,8 +15795,8 @@ function instance$k($$self, $$props, $$invalidate) {
15795
15795
  flexDirection: props.direction,
15796
15796
  alignItems: props.align,
15797
15797
  justifyContent: props.justify,
15798
- rowGap: props.rowGap,
15799
- columnGap: props.columnGap,
15798
+ rowGap: props.rowGap ?? props.gap,
15799
+ columnGap: props.columnGap ?? props.gap,
15800
15800
  width: props.width,
15801
15801
  ...toCssOverflow(props),
15802
15802
  ...toCssShadow(props),
@@ -17279,7 +17279,7 @@ function add_css$9(target) {
17279
17279
  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}}");
17280
17280
  }
17281
17281
 
17282
- // (237:0) {:else}
17282
+ // (220:0) {:else}
17283
17283
  function create_else_block(ctx) {
17284
17284
  let backgroundoverlay;
17285
17285
  let current;
@@ -17323,7 +17323,7 @@ function create_else_block(ctx) {
17323
17323
  };
17324
17324
  }
17325
17325
 
17326
- // (226:24)
17326
+ // (209:24)
17327
17327
  function create_if_block_2(ctx) {
17328
17328
  let backgroundoverlay0;
17329
17329
  let t;
@@ -17392,7 +17392,7 @@ function create_if_block_2(ctx) {
17392
17392
  };
17393
17393
  }
17394
17394
 
17395
- // (224:0) {#if isPreview()}
17395
+ // (207:0) {#if !isOnSite}
17396
17396
  function create_if_block_1$1(ctx) {
17397
17397
  return {
17398
17398
  c: noop,
@@ -17404,15 +17404,15 @@ function create_if_block_1$1(ctx) {
17404
17404
  };
17405
17405
  }
17406
17406
 
17407
- // (240:0) {#if visible}
17407
+ // (223:0) {#if visible}
17408
17408
  function create_if_block$3(ctx) {
17409
17409
  let div;
17410
17410
  let div_class_value;
17411
17411
  let div_style_value;
17412
17412
  let div_intro;
17413
17413
  let current;
17414
- const default_slot_template = /*#slots*/ ctx[26].default;
17415
- const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[25], null);
17414
+ const default_slot_template = /*#slots*/ ctx[27].default;
17415
+ const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
17416
17416
 
17417
17417
  return {
17418
17418
  c() {
@@ -17422,7 +17422,7 @@ function create_if_block$3(ctx) {
17422
17422
  attr(div, "role", "dialog");
17423
17423
  attr(div, "aria-modal", "true");
17424
17424
  attr(div, "data-layer-id", /*layerId*/ ctx[2]);
17425
- attr(div, "style", div_style_value = [Array.from(/*modalStyles*/ ctx[14]).join(';'), /*style*/ ctx[9]].join(' '));
17425
+ attr(div, "style", div_style_value = [Array.from(/*modalStyles*/ ctx[15]).join(';'), /*style*/ ctx[9]].join(' '));
17426
17426
  },
17427
17427
  m(target, anchor) {
17428
17428
  insert(target, div, anchor);
@@ -17431,22 +17431,22 @@ function create_if_block$3(ctx) {
17431
17431
  default_slot.m(div, null);
17432
17432
  }
17433
17433
 
17434
- /*div_binding*/ ctx[27](div);
17434
+ /*div_binding*/ ctx[28](div);
17435
17435
  current = true;
17436
17436
  },
17437
17437
  p(new_ctx, dirty) {
17438
17438
  ctx = new_ctx;
17439
17439
 
17440
17440
  if (default_slot) {
17441
- if (default_slot.p && (!current || dirty & /*$$scope*/ 33554432)) {
17441
+ if (default_slot.p && (!current || dirty & /*$$scope*/ 67108864)) {
17442
17442
  update_slot_base(
17443
17443
  default_slot,
17444
17444
  default_slot_template,
17445
17445
  ctx,
17446
- /*$$scope*/ ctx[25],
17446
+ /*$$scope*/ ctx[26],
17447
17447
  !current
17448
- ? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
17449
- : get_slot_changes(default_slot_template, /*$$scope*/ ctx[25], dirty, null),
17448
+ ? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
17449
+ : get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
17450
17450
  null
17451
17451
  );
17452
17452
  }
@@ -17460,7 +17460,7 @@ function create_if_block$3(ctx) {
17460
17460
  attr(div, "data-layer-id", /*layerId*/ ctx[2]);
17461
17461
  }
17462
17462
 
17463
- if (!current || dirty & /*style*/ 512 && div_style_value !== (div_style_value = [Array.from(/*modalStyles*/ ctx[14]).join(';'), /*style*/ ctx[9]].join(' '))) {
17463
+ if (!current || dirty & /*style*/ 512 && div_style_value !== (div_style_value = [Array.from(/*modalStyles*/ ctx[15]).join(';'), /*style*/ ctx[9]].join(' '))) {
17464
17464
  attr(div, "style", div_style_value);
17465
17465
  }
17466
17466
  },
@@ -17488,13 +17488,12 @@ function create_if_block$3(ctx) {
17488
17488
  d(detaching) {
17489
17489
  if (detaching) detach(div);
17490
17490
  if (default_slot) default_slot.d(detaching);
17491
- /*div_binding*/ ctx[27](null);
17491
+ /*div_binding*/ ctx[28](null);
17492
17492
  }
17493
17493
  };
17494
17494
  }
17495
17495
 
17496
17496
  function create_fragment$d(ctx) {
17497
- let show_if;
17498
17497
  let current_block_type_index;
17499
17498
  let if_block0;
17500
17499
  let t;
@@ -17506,8 +17505,7 @@ function create_fragment$d(ctx) {
17506
17505
  const if_blocks = [];
17507
17506
 
17508
17507
  function select_block_type(ctx, dirty) {
17509
- if (show_if == null) show_if = !!isPreview();
17510
- if (show_if) return 0;
17508
+ if (!/*isOnSite*/ ctx[14]) return 0;
17511
17509
  if (/*useBreakPoint*/ ctx[0]) return 1;
17512
17510
  return 2;
17513
17511
  }
@@ -17631,6 +17629,9 @@ function instance$d($$self, $$props, $$invalidate) {
17631
17629
  let { layerId = '' } = $$props;
17632
17630
  const { brandKit } = useBrandKit();
17633
17631
 
17632
+ // falseが明示的に指定されている場合以外はtrueにする
17633
+ const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
17634
+
17634
17635
  // モーダル背景の設定
17635
17636
  const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
17636
17637
 
@@ -17662,20 +17663,20 @@ function instance$d($$self, $$props, $$invalidate) {
17662
17663
 
17663
17664
  $$self.$$set = $$props => {
17664
17665
  if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
17665
- if ('placement' in $$props) $$invalidate(15, placement = $$props.placement);
17666
- if ('breakPoint' in $$props) $$invalidate(16, breakPoint = $$props.breakPoint);
17667
- if ('elasticity' in $$props) $$invalidate(17, elasticity = $$props.elasticity);
17666
+ if ('placement' in $$props) $$invalidate(16, placement = $$props.placement);
17667
+ if ('breakPoint' in $$props) $$invalidate(17, breakPoint = $$props.breakPoint);
17668
+ if ('elasticity' in $$props) $$invalidate(18, elasticity = $$props.elasticity);
17668
17669
  if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
17669
- if ('props' in $$props) $$invalidate(18, props = $$props.props);
17670
- if ('closeEventName' in $$props) $$invalidate(19, closeEventName = $$props.closeEventName);
17671
- if ('closeEventValue' in $$props) $$invalidate(20, closeEventValue = $$props.closeEventValue);
17670
+ if ('props' in $$props) $$invalidate(19, props = $$props.props);
17671
+ if ('closeEventName' in $$props) $$invalidate(20, closeEventName = $$props.closeEventName);
17672
+ if ('closeEventValue' in $$props) $$invalidate(21, closeEventValue = $$props.closeEventValue);
17672
17673
  if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
17673
- if ('$$scope' in $$props) $$invalidate(25, $$scope = $$props.$$scope);
17674
+ if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
17674
17675
  };
17675
17676
 
17676
17677
  $$self.$$.update = () => {
17677
- if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 1572864) {
17678
- $$invalidate(24, close = () => {
17678
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 3145728) {
17679
+ $$invalidate(25, close = () => {
17679
17680
  const onClose = { operation: 'closeApp', args: ['button'] };
17680
17681
 
17681
17682
  if (closeEventName) {
@@ -17686,9 +17687,9 @@ function instance$d($$self, $$props, $$invalidate) {
17686
17687
  });
17687
17688
  }
17688
17689
 
17689
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
17690
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
17690
17691
  {
17691
- if (isExistBackgroundOverlayValue) {
17692
+ if (isOnSite && isExistBackgroundOverlayValue) {
17692
17693
  $$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
17693
17694
  }
17694
17695
 
@@ -17701,29 +17702,29 @@ function instance$d($$self, $$props, $$invalidate) {
17701
17702
  }
17702
17703
  }
17703
17704
 
17704
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
17705
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
17705
17706
  {
17706
17707
  if (placement && placement.backgroundClick) {
17707
- $$invalidate(21, backgroundClickFunction = placement.backgroundClick);
17708
+ $$invalidate(22, backgroundClickFunction = placement.backgroundClick);
17708
17709
  }
17709
17710
 
17710
17711
  if (useBreakPoint) {
17711
17712
  const pc = breakPoint?.PC?.placement?.backgroundClick;
17712
17713
 
17713
17714
  if (pc) {
17714
- $$invalidate(22, backgroundClickFunctionPC = pc);
17715
+ $$invalidate(23, backgroundClickFunctionPC = pc);
17715
17716
  }
17716
17717
 
17717
17718
  const sp = breakPoint?.SP?.placement?.backgroundClick;
17718
17719
 
17719
17720
  if (sp) {
17720
- $$invalidate(23, backgroundClickFunctionSP = sp);
17721
+ $$invalidate(24, backgroundClickFunctionSP = sp);
17721
17722
  }
17722
17723
  }
17723
17724
  }
17724
17725
  }
17725
17726
 
17726
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 3670016) {
17727
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 7340032) {
17727
17728
  $$invalidate(13, backgroundClick = () => {
17728
17729
  if (closeEventName) {
17729
17730
  send_event(closeEventName, closeEventValue);
@@ -17733,7 +17734,7 @@ function instance$d($$self, $$props, $$invalidate) {
17733
17734
  });
17734
17735
  }
17735
17736
 
17736
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 5767168) {
17737
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 11534336) {
17737
17738
  $$invalidate(12, backgroundClickPC = () => {
17738
17739
  if (closeEventName) {
17739
17740
  send_event(closeEventName, closeEventValue);
@@ -17743,7 +17744,7 @@ function instance$d($$self, $$props, $$invalidate) {
17743
17744
  });
17744
17745
  }
17745
17746
 
17746
- if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 9961472) {
17747
+ if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 19922944) {
17747
17748
  $$invalidate(11, backgroundClickSP = () => {
17748
17749
  if (closeEventName) {
17749
17750
  send_event(closeEventName, closeEventValue);
@@ -17753,13 +17754,13 @@ function instance$d($$self, $$props, $$invalidate) {
17753
17754
  });
17754
17755
  }
17755
17756
 
17756
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 98313) {
17757
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 196617) {
17757
17758
  // 表示位置のスタイルとアニメーションの動きを設定
17758
17759
  {
17759
17760
  // 表示位置のスタイルの設定
17760
17761
  let position = DefaultModalPlacement.position;
17761
17762
 
17762
- if (placement && placement.position !== null) {
17763
+ if (isOnSite && placement && placement.position !== null) {
17763
17764
  position = placement.position;
17764
17765
  }
17765
17766
 
@@ -17776,7 +17777,7 @@ function instance$d($$self, $$props, $$invalidate) {
17776
17777
  $$invalidate(3, transforms = []);
17777
17778
 
17778
17779
  DEVICE_IDS.forEach(deviceId => {
17779
- if (useBreakPoint) {
17780
+ if (isOnSite && useBreakPoint) {
17780
17781
  const positionWithBp = breakPoint[deviceId]?.placement?.position;
17781
17782
 
17782
17783
  transforms.push({
@@ -17801,12 +17802,12 @@ function instance$d($$self, $$props, $$invalidate) {
17801
17802
  }
17802
17803
  }
17803
17804
 
17804
- if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 98305) {
17805
+ if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 196609) {
17805
17806
  // 表示位置の調整のスタイルを設定
17806
17807
  {
17807
17808
  let margin = DefaultModalPlacement.margin;
17808
17809
 
17809
- if (placement && placement.margin !== null) {
17810
+ if (isOnSite && placement && placement.margin !== null) {
17810
17811
  margin = placement.margin;
17811
17812
  }
17812
17813
 
@@ -17817,7 +17818,7 @@ function instance$d($$self, $$props, $$invalidate) {
17817
17818
  }
17818
17819
 
17819
17820
  DEVICE_IDS.forEach(deviceId => {
17820
- if (useBreakPoint) {
17821
+ if (isOnSite && useBreakPoint) {
17821
17822
  const marginWithBp = breakPoint[deviceId]?.placement?.margin;
17822
17823
  marginStyle = getMarginStyle(marginWithBp);
17823
17824
  }
@@ -17833,37 +17834,11 @@ function instance$d($$self, $$props, $$invalidate) {
17833
17834
  }
17834
17835
  }
17835
17836
 
17836
- if ($$self.$$.dirty & /*elasticity, useBreakPoint, breakPoint*/ 196609) {
17837
- // 拡大方法のスタイルを設定
17838
- {
17839
- let elasticStyle = ElasticityStyle[elasticity];
17840
-
17841
- if (!useBreakPoint) {
17842
- modalStyles.add(elasticStyle);
17843
- }
17844
-
17845
- DEVICE_IDS.forEach(deviceId => {
17846
- if (useBreakPoint) {
17847
- const elasticityWithBp = breakPoint[deviceId]?.elasticity;
17848
- elasticStyle = ElasticityStyle[elasticityWithBp];
17849
- }
17850
-
17851
- const elasticityVariables = stringifyStyleObj(formatObjectKey({
17852
- obj: parseStyle(elasticStyle),
17853
- prefix: '--modal-bp-',
17854
- suffix: `-${deviceId.toLowerCase()}`
17855
- }));
17856
-
17857
- modalStyles.add(elasticityVariables);
17858
- });
17859
- }
17860
- }
17861
-
17862
- if ($$self.$$.dirty & /*close*/ 16777216) {
17837
+ if ($$self.$$.dirty & /*close*/ 33554432) {
17863
17838
  $$invalidate(10, handle_keydown = handleKeydown({ Escape: close }));
17864
17839
  }
17865
17840
 
17866
- if ($$self.$$.dirty & /*props*/ 262144) {
17841
+ if ($$self.$$.dirty & /*props*/ 524288) {
17867
17842
  $$invalidate(9, style = objToStyle({
17868
17843
  width: props.width,
17869
17844
  ...toCssOverflow(props),
@@ -17896,6 +17871,7 @@ function instance$d($$self, $$props, $$invalidate) {
17896
17871
  backgroundClickSP,
17897
17872
  backgroundClickPC,
17898
17873
  backgroundClick,
17874
+ isOnSite,
17899
17875
  modalStyles,
17900
17876
  placement,
17901
17877
  breakPoint,
@@ -17925,13 +17901,13 @@ class Modal extends SvelteComponent {
17925
17901
  safe_not_equal,
17926
17902
  {
17927
17903
  useBreakPoint: 0,
17928
- placement: 15,
17929
- breakPoint: 16,
17930
- elasticity: 17,
17904
+ placement: 16,
17905
+ breakPoint: 17,
17906
+ elasticity: 18,
17931
17907
  animation: 1,
17932
- props: 18,
17933
- closeEventName: 19,
17934
- closeEventValue: 20,
17908
+ props: 19,
17909
+ closeEventName: 20,
17910
+ closeEventValue: 21,
17935
17911
  layerId: 2
17936
17912
  },
17937
17913
  add_css$9
@@ -19399,6 +19375,312 @@ class ClipCopy extends SvelteComponent {
19399
19375
  }
19400
19376
  }
19401
19377
 
19378
+ /**
19379
+ * モーダル(ポップアップ)に関連するコードの管理
19380
+ *
19381
+ * アクションのShow, Close, ChangeStateの状態はここで管理する。
19382
+ */
19383
+ /**
19384
+ * アクションが表示 (show) された後にフックする関数
19385
+ *
19386
+ * @param fn - 呼び出されるフック関数
19387
+ *
19388
+ * @public
19389
+ */
19390
+ function onShow(fn) {
19391
+ let { onShowHandlers } = getInternalHandlers();
19392
+ if (!onShowHandlers) {
19393
+ onShowHandlers = [];
19394
+ }
19395
+ onShowHandlers.push(fn);
19396
+ setInternalHandlers({ onShowHandlers });
19397
+ }
19398
+ /**
19399
+ * アクションがクローズ (close) される前にフックする関数
19400
+ *
19401
+ * @param fn - 呼び出されるフック関数
19402
+ *
19403
+ * @public
19404
+ */
19405
+ function onClose(fn) {
19406
+ let { onCloseHandlers } = getInternalHandlers();
19407
+ if (!onCloseHandlers) {
19408
+ onCloseHandlers = [];
19409
+ }
19410
+ onCloseHandlers.push(fn);
19411
+ setInternalHandlers({ onCloseHandlers });
19412
+ }
19413
+ /**
19414
+ * アクションのステートが変更された (changeState) 後にフックする関数
19415
+ *
19416
+ * @param fn - 呼び出されるフック関数
19417
+ *
19418
+ * @public
19419
+ */
19420
+ function onChangeState(fn) {
19421
+ let { onChangeStateHandlers } = getInternalHandlers();
19422
+ if (!onChangeStateHandlers) {
19423
+ onChangeStateHandlers = [];
19424
+ }
19425
+ onChangeStateHandlers.push(fn);
19426
+ setInternalHandlers({ onChangeStateHandlers });
19427
+ }
19428
+ /**
19429
+ * アクションを表示する
19430
+ *
19431
+ * @public
19432
+ */
19433
+ function showAction() {
19434
+ const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
19435
+ window.dispatchEvent(event);
19436
+ }
19437
+ /**
19438
+ * アクションを閉じる
19439
+ *
19440
+ * @param trigger - 閉じた時のトリガー。デフォルト `'none'`
19441
+ *
19442
+ * @public
19443
+ */
19444
+ function closeAction(trigger = 'none') {
19445
+ const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
19446
+ window.dispatchEvent(event);
19447
+ }
19448
+ /**
19449
+ * アクションに CSS を適用する
19450
+ *
19451
+ * @param css - 適用する CSS
19452
+ *
19453
+ * @returns 適用された style 要素を返す Promise
19454
+ *
19455
+ * @public
19456
+ */
19457
+ async function applyCss(css) {
19458
+ return new Promise((resolve, reject) => {
19459
+ const style = document.createElement('style');
19460
+ style.textContent = css;
19461
+ const shadowRoot = getActionRoot();
19462
+ if (!shadowRoot)
19463
+ return;
19464
+ shadowRoot.append(style);
19465
+ style.addEventListener('load', () => resolve(style));
19466
+ style.addEventListener('error', () => reject(style));
19467
+ });
19468
+ }
19469
+ async function fixFontFaceIssue(href, cssRules) {
19470
+ const css = new CSSStyleSheet();
19471
+ // @ts-ignore
19472
+ await css.replace(cssRules);
19473
+ const rules = [];
19474
+ const fixedRules = [];
19475
+ Array.from(css.cssRules).forEach(cssRule => {
19476
+ if (cssRule.type !== 5) {
19477
+ rules.push(cssRule.cssText);
19478
+ }
19479
+ // type 5 is @font-face
19480
+ const split = href.split('/');
19481
+ const stylePath = split.slice(0, split.length - 1).join('/');
19482
+ const cssText = cssRule.cssText;
19483
+ const newCssText = cssText.replace(
19484
+ // relative paths
19485
+ /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
19486
+ if (cssText === newCssText)
19487
+ return;
19488
+ fixedRules.push(newCssText);
19489
+ });
19490
+ return [rules.join('\n'), fixedRules.join('\n')];
19491
+ }
19492
+ /**
19493
+ * アクションにグローバルなスタイルを読み込む
19494
+ *
19495
+ * @param href - style ファイルのリンク URL
19496
+ *
19497
+ * @public
19498
+ */
19499
+ async function loadStyle(href) {
19500
+ const sr = getActionRoot();
19501
+ if (!sr)
19502
+ return;
19503
+ let cssRules = '';
19504
+ try {
19505
+ const res = await fetch(href);
19506
+ cssRules = await res.text();
19507
+ }
19508
+ catch (_) {
19509
+ // pass
19510
+ }
19511
+ if (!cssRules)
19512
+ return;
19513
+ // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
19514
+ // @see https://stackoverflow.com/a/63717709
19515
+ const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
19516
+ const css = new CSSStyleSheet();
19517
+ // @ts-ignore
19518
+ await css.replace(rules);
19519
+ const fontFaceCss = new CSSStyleSheet();
19520
+ // @ts-ignore
19521
+ await fontFaceCss.replace(fontFaceRules);
19522
+ // @ts-ignore
19523
+ sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
19524
+ // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
19525
+ // @see https://stackoverflow.com/a/63717709
19526
+ // @ts-ignore
19527
+ document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
19528
+ }
19529
+ // @internal
19530
+ function getCssVariables(data) {
19531
+ return Object.entries(data)
19532
+ .filter(([key, value]) => {
19533
+ return ['string', 'number'].includes(typeof value) && key.startsWith('--');
19534
+ })
19535
+ .map(([key, value]) => `${key}:${value}`)
19536
+ .join(';');
19537
+ }
19538
+ /**
19539
+ * アクションのルートの DOM 要素を取得する
19540
+ *
19541
+ * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
19542
+ *
19543
+ * @public
19544
+ */
19545
+ function getActionRoot() {
19546
+ const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
19547
+ if (!root?.shadowRoot) {
19548
+ return null;
19549
+ }
19550
+ return root.shadowRoot;
19551
+ }
19552
+ /** @internal */
19553
+ function ensureActionRoot() {
19554
+ const systemConfig = getSystem();
19555
+ const rootAttrs = {
19556
+ class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
19557
+ [`data-${KARTE_ACTION_RID}`]: actionId,
19558
+ [`data-${KARTE_ACTION_SHORTEN_ID}`]: systemConfig.shortenId
19559
+ ? systemConfig.shortenId
19560
+ : ALL_ACTION_SHORTEN_ID,
19561
+ style: { display: 'block' },
19562
+ };
19563
+ let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
19564
+ if (el == null) {
19565
+ el = h('div', rootAttrs);
19566
+ document.body.appendChild(el);
19567
+ }
19568
+ const isShadow = !!document.body.attachShadow;
19569
+ if (isShadow) {
19570
+ return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
19571
+ }
19572
+ else {
19573
+ return el;
19574
+ }
19575
+ }
19576
+ /**
19577
+ * 非推奨
19578
+ *
19579
+ * @deprecated 非推奨
19580
+ *
19581
+ * @internal
19582
+ */
19583
+ const show = showAction;
19584
+ /**
19585
+ * 非推奨
19586
+ *
19587
+ * @deprecated 非推奨
19588
+ *
19589
+ * @internal
19590
+ */
19591
+ const close = closeAction;
19592
+ /**
19593
+ * 非推奨
19594
+ *
19595
+ * @deprecated 非推奨
19596
+ *
19597
+ * @internal
19598
+ */
19599
+ const ensureModalRoot = ensureActionRoot;
19600
+ /**
19601
+ * 非推奨
19602
+ *
19603
+ * @deprecated 非推奨
19604
+ *
19605
+ * @internal
19606
+ */
19607
+ function createApp(App, options = {
19608
+ send: () => { },
19609
+ publish: () => { },
19610
+ props: {},
19611
+ variables: {},
19612
+ localVariablesQuery: undefined,
19613
+ context: { api_key: '' },
19614
+ }) {
19615
+ let app = null;
19616
+ const close = () => {
19617
+ if (app) {
19618
+ {
19619
+ // @ts-ignore -- Svelte5 では $destroy は存在しない
19620
+ app.$destroy();
19621
+ }
19622
+ app = null;
19623
+ }
19624
+ };
19625
+ const appArgs = {
19626
+ target: null,
19627
+ props: {
19628
+ send: options.send,
19629
+ publish: options.publish,
19630
+ close,
19631
+ data: {
19632
+ ...options.props,
19633
+ ...options.variables,
19634
+ },
19635
+ },
19636
+ };
19637
+ const win = ensureModalRoot();
19638
+ appArgs.target = win;
19639
+ return {
19640
+ close,
19641
+ show: () => {
19642
+ if (app) {
19643
+ return;
19644
+ }
19645
+ options.send('message_open');
19646
+ app = // @ts-ignore -- Svelte5 では `App` はクラスではない
19647
+ new App(appArgs);
19648
+ },
19649
+ };
19650
+ }
19651
+ /**
19652
+ * 非推奨
19653
+ *
19654
+ * @deprecated 非推奨
19655
+ *
19656
+ * @internal
19657
+ */
19658
+ function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
19659
+ const root = ensureModalRoot();
19660
+ if (root.querySelector('.__krt-fog')) {
19661
+ return { fog: null, close: () => { } };
19662
+ }
19663
+ const fog = document.createElement('div');
19664
+ fog.className = '__krt-fog';
19665
+ Object.assign(fog.style, {
19666
+ position: 'fixed',
19667
+ left: 0,
19668
+ top: 0,
19669
+ width: '100%',
19670
+ height: '100%',
19671
+ 'z-index': zIndex,
19672
+ 'background-color': color,
19673
+ opacity,
19674
+ });
19675
+ const close = () => {
19676
+ onclick();
19677
+ fog.remove();
19678
+ };
19679
+ fog.onclick = close;
19680
+ root.appendChild(fog);
19681
+ return { fog, close };
19682
+ }
19683
+
19402
19684
  /* src/components-flex/state/Header.svelte generated by Svelte v3.53.1 */
19403
19685
 
19404
19686
  function create_if_block$2(ctx) {
@@ -19770,6 +20052,184 @@ const ROUND_STYLES = {
19770
20052
  },
19771
20053
  };
19772
20054
 
20055
+ const createProp = (key, type, suggestions = [], priority = 0, defaultValue = undefined) => {
20056
+ return {
20057
+ key,
20058
+ type,
20059
+ priority,
20060
+ suggestions: suggestions,
20061
+ default: defaultValue,
20062
+ };
20063
+ };
20064
+ const byObj = (obj) => {
20065
+ return Object.keys(obj);
20066
+ };
20067
+ const overflowProps = [
20068
+ createProp('overflow', 'string', ['hidden', 'visible', 'scroll', 'auto']),
20069
+ ];
20070
+ const borderProps = [
20071
+ createProp('borderTopWidth', 'string'),
20072
+ createProp('borderLeftWidth', 'string'),
20073
+ createProp('borderRightWidth', 'string'),
20074
+ createProp('borderBottomWidth', 'string'),
20075
+ createProp('borderColor', 'color'),
20076
+ ];
20077
+ const radiusProps = [
20078
+ createProp('borderTopLeftRadius', 'string'),
20079
+ createProp('borderTopRightRadius', 'string'),
20080
+ createProp('borderBottomLeftRadius', 'string'),
20081
+ createProp('borderBottomRightRadius', 'string'),
20082
+ ];
20083
+ const paddingProps = [
20084
+ createProp('paddingTop', 'string'),
20085
+ createProp('paddingLeft', 'string'),
20086
+ createProp('paddingRight', 'string'),
20087
+ createProp('paddingBottom', 'string'),
20088
+ ];
20089
+ const backgroundColorProps = [
20090
+ createProp('backgroundColor', 'string'),
20091
+ ];
20092
+ const backgroundImageProps = [
20093
+ createProp('backgroundImageUrl', 'url'),
20094
+ ];
20095
+ const flexComponentSchemes = {
20096
+ FlexAvatar: {
20097
+ props: [
20098
+ createProp('size', 'string', byObj(AVATAR_SIZE), 10),
20099
+ createProp('width', 'string', [], 5),
20100
+ createProp('height', 'string', [], 5),
20101
+ createProp('shape', 'string', byObj(AVATAR_SHAPE), 10),
20102
+ createProp('image', 'url', [], 99),
20103
+ // createProp('caption', 'string'),
20104
+ createProp('alt', 'string', [], 50),
20105
+ // TODO: clickable
20106
+ ...borderProps,
20107
+ ],
20108
+ },
20109
+ FlexButton: {
20110
+ props: [
20111
+ createProp('size', 'string', byObj(BUTTON_SIZE), 50),
20112
+ createProp('label', 'string', [], 99),
20113
+ createProp('paddingLeft', 'string'),
20114
+ createProp('paddingRight', 'string'),
20115
+ createProp('fontSize', 'string'),
20116
+ createProp('theme', 'string', byObj(BUTTON_THEME), 50),
20117
+ createProp('variant', 'string', byObj(BUTTON_VARIANT)),
20118
+ createProp('color', 'color', [], 5),
20119
+ createProp('backgroundColor', 'string', [], 5),
20120
+ createProp('borderColor', 'string', [], 5),
20121
+ createProp('fontWeight', 'string', ['normal', 'bold']),
20122
+ createProp('round', 'string', byObj(BUTTON_ROUND)),
20123
+ createProp('width', 'string', [], 10),
20124
+ createProp('wrap', 'string', ['wrap', 'nowrap']),
20125
+ // TODO: clickable
20126
+ ...radiusProps,
20127
+ ],
20128
+ },
20129
+ FlexClipCopy: {
20130
+ props: [
20131
+ createProp('content', 'string'),
20132
+ createProp('copiedEventName', 'string'),
20133
+ createProp('noneTooltip', 'boolean'),
20134
+ ],
20135
+ },
20136
+ FlexCloseButton: {
20137
+ props: [
20138
+ createProp('size', 'number'),
20139
+ createProp('placement', 'string', byObj(CLOSE_BUTTON_PLACEMENT), 99),
20140
+ createProp('round', 'string', byObj(CLOSE_BUTTON_ROUND)),
20141
+ createProp('bordered', 'boolean'),
20142
+ createProp('color', 'color'),
20143
+ createProp('backgroundColor', 'color'),
20144
+ createProp('label', 'string'),
20145
+ createProp('labelColor', 'color'),
20146
+ createProp('labelPlacement', 'string', byObj(CLOSE_BUTTON_LABEL_PLACEMENT)),
20147
+ createProp('top', 'string'),
20148
+ createProp('left', 'string'),
20149
+ createProp('right', 'string'),
20150
+ createProp('bottom', 'string'),
20151
+ ],
20152
+ },
20153
+ FlexCountDown: {
20154
+ props: [
20155
+ createProp('timeLimit', 'date_string', [], 99),
20156
+ // createProp('timeLimit', 'date_string'),
20157
+ ],
20158
+ },
20159
+ FlexIcon: {
20160
+ props: [
20161
+ createProp('variant', 'string', byObj(ICON_VARIANTS), 99),
20162
+ createProp('size', 'string', byObj(ICON_SIZE), 50),
20163
+ createProp('color', 'color', [], 5),
20164
+ createProp('width', 'string', [], 10),
20165
+ createProp('height', 'string', [], 10),
20166
+ ],
20167
+ },
20168
+ FlexImage: {
20169
+ props: [
20170
+ createProp('image', 'url', [], 99),
20171
+ createProp('aspect', 'string', Object.keys(ASPECT_VARIANT).map(key => ASPECT_VARIANT[key].getProps().aspect), 98),
20172
+ createProp('width', 'string', [], 5),
20173
+ createProp('height', 'string', [], 5),
20174
+ createProp('shape', 'string', byObj(IMAGE_ROUND_SHAPE), 10),
20175
+ ],
20176
+ },
20177
+ FlexLayout: {
20178
+ props: [
20179
+ createProp('display', 'string', ['flex', 'inline-flex', 'block']),
20180
+ createProp('direction', 'string', ['row', 'column', 'row-reverse', 'column-reverse'], 10),
20181
+ createProp('align', 'string', ['center', 'stretch', 'flex-start', 'flex-end'], 10),
20182
+ createProp('justify', 'string', ['center', 'flex-start', 'flex-end', 'space-between'], 10),
20183
+ createProp('gap', 'string', [], 10),
20184
+ createProp('rowGap', 'string', [], 10),
20185
+ createProp('columnGap', 'string', [], 10),
20186
+ createProp('width', 'string', [], 5),
20187
+ ...overflowProps,
20188
+ ...borderProps,
20189
+ ...radiusProps,
20190
+ ...backgroundColorProps,
20191
+ ...backgroundImageProps,
20192
+ ...paddingProps,
20193
+ ],
20194
+ },
20195
+ FlexList: {
20196
+ props: [
20197
+ createProp('gap', 'string', [], 10),
20198
+ createProp('borderWidth', 'string', [], 10),
20199
+ createProp('borderStyle', 'string', [], 10),
20200
+ createProp('borderColor', 'string', [], 10),
20201
+ createProp('itemPaddingTop', 'string', [], 5),
20202
+ createProp('itemPaddingLeft', 'string', [], 5),
20203
+ createProp('itemPaddingRight', 'string', [], 5),
20204
+ createProp('itemPaddingBottom', 'string', [], 5),
20205
+ createProp('itemGap', 'string', [], 5),
20206
+ ],
20207
+ },
20208
+ FlexListItem: {
20209
+ props: [
20210
+ createProp('gap', 'number', [], 10),
20211
+ // TODO: clickable
20212
+ ],
20213
+ },
20214
+ FlexText: {
20215
+ props: [
20216
+ createProp('content', 'string', [], 99),
20217
+ createProp('theme', 'string', byObj(TEXT_THEME), 50),
20218
+ createProp('size', 'string', byObj(LAYER_TEXT_SIZE), 50),
20219
+ createProp('align', 'string', [], 5),
20220
+ createProp('fontStyle', 'string', [], 5),
20221
+ createProp('fontSize', 'string', [], 5),
20222
+ createProp('fontWeight', 'string', [], 5),
20223
+ createProp('lineHeight', 'string', [], 5),
20224
+ createProp('color', 'string', [], 5),
20225
+ createProp('width', 'string', [], 10),
20226
+ createProp('fontFamilyVariant', 'string', byObj(FONT_FAMILY_VARIANT), 10),
20227
+ createProp('fontFamily', 'string', []),
20228
+ // TODO: clickable
20229
+ ],
20230
+ },
20231
+ };
20232
+
19773
20233
  var sdk = /*#__PURE__*/Object.freeze({
19774
20234
  __proto__: null,
19775
20235
  ACTION_HOOK_LABEL: ACTION_HOOK_LABEL,
@@ -19910,11 +20370,13 @@ var sdk = /*#__PURE__*/Object.freeze({
19910
20370
  create: create,
19911
20371
  createApp: createApp,
19912
20372
  createFog: createFog,
20373
+ createProp: createProp,
19913
20374
  destroy: destroy,
19914
20375
  destroyAction: destroyAction,
19915
20376
  ensureModalRoot: ensureModalRoot,
19916
20377
  eventHandlers: eventHandlers,
19917
20378
  finalize: finalize,
20379
+ flexComponentSchemes: flexComponentSchemes,
19918
20380
  formData: formData,
19919
20381
  getActionRoot: getActionRoot,
19920
20382
  getAnsweredQuestion: getAnsweredQuestion,
@@ -19984,7 +20446,7 @@ function get_each_context(ctx, list, i) {
19984
20446
  return child_ctx;
19985
20447
  }
19986
20448
 
19987
- // (12:0) {#if component}
20449
+ // (13:0) {#if component}
19988
20450
  function create_if_block(ctx) {
19989
20451
  let switch_instance;
19990
20452
  let switch_instance_anchor;
@@ -20068,7 +20530,7 @@ function create_if_block(ctx) {
20068
20530
  };
20069
20531
  }
20070
20532
 
20071
- // (19:4) {#if option.children}
20533
+ // (20:4) {#if option.children}
20072
20534
  function create_if_block_1(ctx) {
20073
20535
  let each_1_anchor;
20074
20536
  let current;
@@ -20152,7 +20614,7 @@ function create_if_block_1(ctx) {
20152
20614
  };
20153
20615
  }
20154
20616
 
20155
- // (20:6) {#each option.children as child}
20617
+ // (21:6) {#each option.children as child}
20156
20618
  function create_each_block(ctx) {
20157
20619
  let thumbnailpreview;
20158
20620
  let current;
@@ -20186,7 +20648,7 @@ function create_each_block(ctx) {
20186
20648
  };
20187
20649
  }
20188
20650
 
20189
- // (13:2) <svelte:component this={component} props={'previewProps' in option && typeof option.previewProps !== 'undefined' ? option.previewProps : option.props} >
20651
+ // (14:2) <svelte:component this={component} props={'previewProps' in option && typeof option.previewProps !== 'undefined' ? option.previewProps : option.props} >
20190
20652
  function create_default_slot(ctx) {
20191
20653
  let if_block_anchor;
20192
20654
  let current;
@@ -20299,8 +20761,9 @@ function create_fragment(ctx) {
20299
20761
 
20300
20762
  function instance($$self, $$props, $$invalidate) {
20301
20763
  let component;
20302
- let { option } = $$props;
20764
+ let { option = {} } = $$props;
20303
20765
  let { customBrandKit = undefined } = $$props;
20766
+ console.log('option', option);
20304
20767
 
20305
20768
  const getComponent = key => {
20306
20769
  return key in sdk ? sdk[key] : null;
@@ -20329,4 +20792,4 @@ class ThumbnailPreview extends SvelteComponent {
20329
20792
  }
20330
20793
  }
20331
20794
 
20332
- export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Flex, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List$1 as List, ListBackgroundTypes, ListDirections, ListItem$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal$1 as Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide, SlideItem, State$1 as State, StateItem$1 as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget };
20795
+ export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Flex, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List$1 as List, ListBackgroundTypes, ListDirections, ListItem$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal$1 as Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide, SlideItem, State$1 as State, StateItem$1 as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss$1 as applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close$1 as close, closeAction$1 as closeAction, collection$1 as collection, create, createApp$1 as createApp, createFog$1 as createFog, createProp, destroy, destroyAction, ensureModalRoot$1 as ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot$1 as getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables$1 as getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle$1 as loadStyle, logger, onChangeState$1 as onChangeState, onClose$1 as onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow$1 as onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState$1 as setState, setVariables, show$1 as show, showAction$1 as showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget };