@plaidev/karte-action-sdk 1.1.265 → 1.1.266-29059851.1bdc68e9

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.
@@ -1640,57 +1640,12 @@ const handleState = (event) => {
1640
1640
  });
1641
1641
  }
1642
1642
  };
1643
- /**
1644
- * アクションが表示 (show) された後にフックする関数
1645
- *
1646
- * @param fn - 呼び出されるフック関数
1647
- *
1648
- * @public
1649
- */
1650
- function onShow(fn) {
1651
- let { onShowHandlers } = getInternalHandlers();
1652
- if (!onShowHandlers) {
1653
- onShowHandlers = [];
1654
- }
1655
- onShowHandlers.push(fn);
1656
- setInternalHandlers({ onShowHandlers });
1657
- }
1658
- /**
1659
- * アクションがクローズ (close) される前にフックする関数
1660
- *
1661
- * @param fn - 呼び出されるフック関数
1662
- *
1663
- * @public
1664
- */
1665
- function onClose(fn) {
1666
- let { onCloseHandlers } = getInternalHandlers();
1667
- if (!onCloseHandlers) {
1668
- onCloseHandlers = [];
1669
- }
1670
- onCloseHandlers.push(fn);
1671
- setInternalHandlers({ onCloseHandlers });
1672
- }
1673
- /**
1674
- * アクションのステートが変更された (changeState) 後にフックする関数
1675
- *
1676
- * @param fn - 呼び出されるフック関数
1677
- *
1678
- * @public
1679
- */
1680
- function onChangeState(fn) {
1681
- let { onChangeStateHandlers } = getInternalHandlers();
1682
- if (!onChangeStateHandlers) {
1683
- onChangeStateHandlers = [];
1684
- }
1685
- onChangeStateHandlers.push(fn);
1686
- setInternalHandlers({ onChangeStateHandlers });
1687
- }
1688
1643
  /**
1689
1644
  * アクションを表示する
1690
1645
  *
1691
1646
  * @public
1692
1647
  */
1693
- function showAction() {
1648
+ function showAction$1() {
1694
1649
  const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
1695
1650
  window.dispatchEvent(event);
1696
1651
  }
@@ -1701,114 +1656,10 @@ function showAction() {
1701
1656
  *
1702
1657
  * @public
1703
1658
  */
1704
- function closeAction(trigger = 'none') {
1659
+ function closeAction$1(trigger = 'none') {
1705
1660
  const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
1706
1661
  window.dispatchEvent(event);
1707
1662
  }
1708
- /**
1709
- * アクションに CSS を適用する
1710
- *
1711
- * @param css - 適用する CSS
1712
- *
1713
- * @returns 適用された style 要素を返す Promise
1714
- *
1715
- * @public
1716
- */
1717
- async function applyCss(css) {
1718
- return new Promise((resolve, reject) => {
1719
- const style = document.createElement('style');
1720
- style.textContent = css;
1721
- const shadowRoot = getActionRoot();
1722
- if (!shadowRoot)
1723
- return;
1724
- shadowRoot.append(style);
1725
- style.addEventListener('load', () => resolve(style));
1726
- style.addEventListener('error', () => reject(style));
1727
- });
1728
- }
1729
- async function fixFontFaceIssue(href, cssRules) {
1730
- const css = new CSSStyleSheet();
1731
- // @ts-ignore
1732
- await css.replace(cssRules);
1733
- const rules = [];
1734
- const fixedRules = [];
1735
- Array.from(css.cssRules).forEach(cssRule => {
1736
- if (cssRule.type !== 5) {
1737
- rules.push(cssRule.cssText);
1738
- }
1739
- // type 5 is @font-face
1740
- const split = href.split('/');
1741
- const stylePath = split.slice(0, split.length - 1).join('/');
1742
- const cssText = cssRule.cssText;
1743
- const newCssText = cssText.replace(
1744
- // relative paths
1745
- /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
1746
- if (cssText === newCssText)
1747
- return;
1748
- fixedRules.push(newCssText);
1749
- });
1750
- return [rules.join('\n'), fixedRules.join('\n')];
1751
- }
1752
- /**
1753
- * アクションにグローバルなスタイルを読み込む
1754
- *
1755
- * @param href - style ファイルのリンク URL
1756
- *
1757
- * @public
1758
- */
1759
- async function loadStyle(href) {
1760
- const sr = getActionRoot();
1761
- if (!sr)
1762
- return;
1763
- let cssRules = '';
1764
- try {
1765
- const res = await fetch(href);
1766
- cssRules = await res.text();
1767
- }
1768
- catch (_) {
1769
- // pass
1770
- }
1771
- if (!cssRules)
1772
- return;
1773
- // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
1774
- // @see https://stackoverflow.com/a/63717709
1775
- const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
1776
- const css = new CSSStyleSheet();
1777
- // @ts-ignore
1778
- await css.replace(rules);
1779
- const fontFaceCss = new CSSStyleSheet();
1780
- // @ts-ignore
1781
- await fontFaceCss.replace(fontFaceRules);
1782
- // @ts-ignore
1783
- sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
1784
- // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
1785
- // @see https://stackoverflow.com/a/63717709
1786
- // @ts-ignore
1787
- document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
1788
- }
1789
- // @internal
1790
- function getCssVariables(data) {
1791
- return Object.entries(data)
1792
- .filter(([key, value]) => {
1793
- return ['string', 'number'].includes(typeof value) && key.startsWith('--');
1794
- })
1795
- .map(([key, value]) => `${key}:${value}`)
1796
- .join(';');
1797
- }
1798
- /**
1799
- * アクションのルートの DOM 要素を取得する
1800
- *
1801
- * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
1802
- *
1803
- * @public
1804
- */
1805
- function getActionRoot() {
1806
- const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
1807
- if (!root?.shadowRoot) {
1808
- return null;
1809
- }
1810
- return root.shadowRoot;
1811
- }
1812
1663
  /** @internal */
1813
1664
  function createModal(App, options = {
1814
1665
  send: () => { },
@@ -1901,7 +1752,7 @@ function createModal(App, options = {
1901
1752
  return;
1902
1753
  }
1903
1754
  const props = {
1904
- target: ensureActionRoot(!false),
1755
+ target: ensureActionRoot$1(!false),
1905
1756
  hydrate: false,
1906
1757
  props: {
1907
1758
  send: options.send,
@@ -2019,7 +1870,7 @@ function createModal(App, options = {
2019
1870
  return appCleanup;
2020
1871
  }
2021
1872
  /** @internal */
2022
- function ensureActionRoot(useShadow = true) {
1873
+ function ensureActionRoot$1(useShadow = true) {
2023
1874
  const systemConfig = getSystem();
2024
1875
  const rootAttrs = {
2025
1876
  class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -2042,115 +1893,6 @@ function ensureActionRoot(useShadow = true) {
2042
1893
  return el;
2043
1894
  }
2044
1895
  }
2045
- /**
2046
- * 非推奨
2047
- *
2048
- * @deprecated 非推奨
2049
- *
2050
- * @internal
2051
- */
2052
- const show = showAction;
2053
- /**
2054
- * 非推奨
2055
- *
2056
- * @deprecated 非推奨
2057
- *
2058
- * @internal
2059
- */
2060
- const close = closeAction;
2061
- /**
2062
- * 非推奨
2063
- *
2064
- * @deprecated 非推奨
2065
- *
2066
- * @internal
2067
- */
2068
- const ensureModalRoot = ensureActionRoot;
2069
- /**
2070
- * 非推奨
2071
- *
2072
- * @deprecated 非推奨
2073
- *
2074
- * @internal
2075
- */
2076
- function createApp(App, options = {
2077
- send: () => { },
2078
- publish: () => { },
2079
- props: {},
2080
- variables: {},
2081
- localVariablesQuery: undefined,
2082
- context: { api_key: '' },
2083
- }) {
2084
- let app = null;
2085
- const close = () => {
2086
- if (app) {
2087
- {
2088
- // @ts-ignore -- Svelte3 では `unmount` は存在しない
2089
- svelte.unmount(app);
2090
- }
2091
- app = null;
2092
- }
2093
- };
2094
- const appArgs = {
2095
- target: null,
2096
- props: {
2097
- send: options.send,
2098
- publish: options.publish,
2099
- close,
2100
- data: {
2101
- ...options.props,
2102
- ...options.variables,
2103
- },
2104
- },
2105
- };
2106
- {
2107
- const win = ensureModalRoot(true);
2108
- appArgs.target = win;
2109
- }
2110
- return {
2111
- close,
2112
- show: () => {
2113
- if (app) {
2114
- return;
2115
- }
2116
- options.send('message_open');
2117
- app = svelte.mount(App, appArgs)
2118
- ;
2119
- },
2120
- };
2121
- }
2122
- /**
2123
- * 非推奨
2124
- *
2125
- * @deprecated 非推奨
2126
- *
2127
- * @internal
2128
- */
2129
- function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
2130
- const root = ensureModalRoot(false);
2131
- if (root.querySelector('.__krt-fog')) {
2132
- return { fog: null, close: () => { } };
2133
- }
2134
- const fog = document.createElement('div');
2135
- fog.className = '__krt-fog';
2136
- Object.assign(fog.style, {
2137
- position: 'fixed',
2138
- left: 0,
2139
- top: 0,
2140
- width: '100%',
2141
- height: '100%',
2142
- 'z-index': zIndex,
2143
- 'background-color': color,
2144
- opacity,
2145
- });
2146
- const close = () => {
2147
- onclick();
2148
- fog.remove();
2149
- };
2150
- fog.onclick = close;
2151
- root.appendChild(fog);
2152
- return { fog, close };
2153
- }
2154
1896
 
2155
1897
  /**
2156
1898
  * スクリプト接客が利用するコードの管理
@@ -2266,105 +2008,347 @@ const emptyOptions = {
2266
2008
  context: { api_key: '', collection_endpoint: undefined },
2267
2009
  };
2268
2010
  /**
2269
- * アクションを作成する
2270
- *
2271
- * @param App - Svelte コンポーネントのエントリポイント
2272
- * @param options - {@link ActionOptions | オプション}
2011
+ * アクションを作成する
2012
+ *
2013
+ * @param App - Svelte コンポーネントのエントリポイント
2014
+ * @param options - {@link ActionOptions | オプション}
2015
+ *
2016
+ * @returns アクションを破棄する関数
2017
+ *
2018
+ * @public
2019
+ */
2020
+ function create(App, options) {
2021
+ // TSの型検査が効かない場所やエラーを無視している箇所があるため、念の為
2022
+ options = { ...emptyOptions, ...options };
2023
+ setVariables({
2024
+ ...options.props,
2025
+ ...options.variables,
2026
+ });
2027
+ const data = getVariables();
2028
+ const actionProps = {
2029
+ send: options.send,
2030
+ publish: options.publish,
2031
+ data,
2032
+ };
2033
+ const handleDestroy = () => {
2034
+ const { onDestroyHandlers } = getInternalHandlers();
2035
+ onDestroyHandlers?.forEach(h => {
2036
+ const actionHookLog = { name: 'onDestroy' };
2037
+ console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
2038
+ h(actionProps);
2039
+ });
2040
+ // 旧Widget APIの内部で利用するため、実行ログは出力しない
2041
+ const { onDestroyHandlers: onDestroyWidgetHandlers } = getWidgetHandlers();
2042
+ if (onDestroyWidgetHandlers) {
2043
+ onDestroyWidgetHandlers.forEach(h => h(actionProps));
2044
+ }
2045
+ };
2046
+ // ここからメインの処理
2047
+ setSystem({
2048
+ // @ts-ignore
2049
+ apiKey: data.api_key || null,
2050
+ collection_endpoint: options.context.collection_endpoint,
2051
+ shortenId: data.shorten_id || null,
2052
+ campaignId: data.campaign_id || null,
2053
+ });
2054
+ setActionRunnerContext(options.context);
2055
+ window.addEventListener(ACTION_DESTROY_EVENT, handleDestroy);
2056
+ window.addEventListener('beforeunload', dispatchDestroyEvent, false);
2057
+ let modalCleanup = NOOP;
2058
+ if (options.karteTemplate?.template_type === 'script' ||
2059
+ options.karteTemplate?.template_content_types?.includes('script')) {
2060
+ runScript$1(options);
2061
+ }
2062
+ else {
2063
+ modalCleanup = createModal(App, options);
2064
+ }
2065
+ return () => {
2066
+ modalCleanup();
2067
+ window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
2068
+ };
2069
+ }
2070
+ /**
2071
+ * アクションの破棄する
2072
+ *
2073
+ * @public
2074
+ */
2075
+ function destroyAction() {
2076
+ setDestroyed(true);
2077
+ dispatchDestroyEvent();
2078
+ }
2079
+ /**
2080
+ * アクションが作成 (create) される前にフックする関数
2081
+ *
2082
+ * @param fn - 呼び出されるフック関数
2083
+ *
2084
+ * @public
2085
+ */
2086
+ function onCreate(fn) {
2087
+ let { onCreateHandlers } = getInternalHandlers();
2088
+ if (!onCreateHandlers) {
2089
+ onCreateHandlers = [];
2090
+ }
2091
+ onCreateHandlers.push(fn);
2092
+ setInternalHandlers({ onCreateHandlers });
2093
+ }
2094
+ /**
2095
+ * アクションが破棄 (destroy) される前にフックする関数
2096
+ *
2097
+ * @param fn - 呼び出されるフック関数
2098
+ *
2099
+ * @public
2100
+ */
2101
+ function onDestroy(fn) {
2102
+ let { onDestroyHandlers } = getInternalHandlers();
2103
+ if (!onDestroyHandlers) {
2104
+ onDestroyHandlers = [];
2105
+ }
2106
+ onDestroyHandlers.push(fn);
2107
+ setInternalHandlers({ onDestroyHandlers });
2108
+ }
2109
+ // -------- The following codes are deprecated --------
2110
+ /**
2111
+ * 非推奨
2112
+ *
2113
+ * @deprecated 非推奨
2114
+ *
2115
+ * @internal
2116
+ */
2117
+ const showModal = create;
2118
+ /**
2119
+ * 非推奨
2120
+ *
2121
+ * @deprecated 非推奨
2122
+ *
2123
+ * @internal
2124
+ */
2125
+ function destroy() {
2126
+ setDestroyed(true);
2127
+ dispatchDestroyEvent();
2128
+ }
2129
+
2130
+ /**
2131
+ * モーダル(ポップアップ)に関連するコードの管理
2132
+ *
2133
+ * アクションのShow, Close, ChangeStateの状態はここで管理する。
2134
+ */
2135
+ /**
2136
+ * アクションが表示 (show) された後にフックする関数
2137
+ *
2138
+ * @param fn - 呼び出されるフック関数
2139
+ *
2140
+ * @public
2141
+ */
2142
+ function onShow(fn) {
2143
+ let { onShowHandlers } = getInternalHandlers();
2144
+ if (!onShowHandlers) {
2145
+ onShowHandlers = [];
2146
+ }
2147
+ onShowHandlers.push(fn);
2148
+ setInternalHandlers({ onShowHandlers });
2149
+ }
2150
+ /**
2151
+ * アクションがクローズ (close) される前にフックする関数
2152
+ *
2153
+ * @param fn - 呼び出されるフック関数
2154
+ *
2155
+ * @public
2156
+ */
2157
+ function onClose(fn) {
2158
+ let { onCloseHandlers } = getInternalHandlers();
2159
+ if (!onCloseHandlers) {
2160
+ onCloseHandlers = [];
2161
+ }
2162
+ onCloseHandlers.push(fn);
2163
+ setInternalHandlers({ onCloseHandlers });
2164
+ }
2165
+ /**
2166
+ * アクションのステートが変更された (changeState) 後にフックする関数
2167
+ *
2168
+ * @param fn - 呼び出されるフック関数
2169
+ *
2170
+ * @public
2171
+ */
2172
+ function onChangeState(fn) {
2173
+ let { onChangeStateHandlers } = getInternalHandlers();
2174
+ if (!onChangeStateHandlers) {
2175
+ onChangeStateHandlers = [];
2176
+ }
2177
+ onChangeStateHandlers.push(fn);
2178
+ setInternalHandlers({ onChangeStateHandlers });
2179
+ }
2180
+ /**
2181
+ * アクションを表示する
2182
+ *
2183
+ * @public
2184
+ */
2185
+ function showAction() {
2186
+ const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
2187
+ window.dispatchEvent(event);
2188
+ }
2189
+ /**
2190
+ * アクションを閉じる
2191
+ *
2192
+ * @param trigger - 閉じた時のトリガー。デフォルト `'none'`
2193
+ *
2194
+ * @public
2195
+ */
2196
+ function closeAction(trigger = 'none') {
2197
+ const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
2198
+ window.dispatchEvent(event);
2199
+ }
2200
+ /**
2201
+ * アクションに CSS を適用する
2202
+ *
2203
+ * @param css - 適用する CSS
2204
+ *
2205
+ * @returns 適用された style 要素を返す Promise
2206
+ *
2207
+ * @public
2208
+ */
2209
+ async function applyCss(css) {
2210
+ return new Promise((resolve, reject) => {
2211
+ const style = document.createElement('style');
2212
+ style.textContent = css;
2213
+ const shadowRoot = getActionRoot();
2214
+ if (!shadowRoot)
2215
+ return;
2216
+ shadowRoot.append(style);
2217
+ style.addEventListener('load', () => resolve(style));
2218
+ style.addEventListener('error', () => reject(style));
2219
+ });
2220
+ }
2221
+ async function fixFontFaceIssue(href, cssRules) {
2222
+ const css = new CSSStyleSheet();
2223
+ // @ts-ignore
2224
+ await css.replace(cssRules);
2225
+ const rules = [];
2226
+ const fixedRules = [];
2227
+ Array.from(css.cssRules).forEach(cssRule => {
2228
+ if (cssRule.type !== 5) {
2229
+ rules.push(cssRule.cssText);
2230
+ }
2231
+ // type 5 is @font-face
2232
+ const split = href.split('/');
2233
+ const stylePath = split.slice(0, split.length - 1).join('/');
2234
+ const cssText = cssRule.cssText;
2235
+ const newCssText = cssText.replace(
2236
+ // relative paths
2237
+ /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
2238
+ if (cssText === newCssText)
2239
+ return;
2240
+ fixedRules.push(newCssText);
2241
+ });
2242
+ return [rules.join('\n'), fixedRules.join('\n')];
2243
+ }
2244
+ /**
2245
+ * アクションにグローバルなスタイルを読み込む
2246
+ *
2247
+ * @param href - style ファイルのリンク URL
2248
+ *
2249
+ * @public
2250
+ */
2251
+ async function loadStyle(href) {
2252
+ const sr = getActionRoot();
2253
+ if (!sr)
2254
+ return;
2255
+ let cssRules = '';
2256
+ try {
2257
+ const res = await fetch(href);
2258
+ cssRules = await res.text();
2259
+ }
2260
+ catch (_) {
2261
+ // pass
2262
+ }
2263
+ if (!cssRules)
2264
+ return;
2265
+ // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
2266
+ // @see https://stackoverflow.com/a/63717709
2267
+ const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
2268
+ const css = new CSSStyleSheet();
2269
+ // @ts-ignore
2270
+ await css.replace(rules);
2271
+ const fontFaceCss = new CSSStyleSheet();
2272
+ // @ts-ignore
2273
+ await fontFaceCss.replace(fontFaceRules);
2274
+ // @ts-ignore
2275
+ sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
2276
+ // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
2277
+ // @see https://stackoverflow.com/a/63717709
2278
+ // @ts-ignore
2279
+ document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
2280
+ }
2281
+ // @internal
2282
+ function getCssVariables(data) {
2283
+ return Object.entries(data)
2284
+ .filter(([key, value]) => {
2285
+ return ['string', 'number'].includes(typeof value) && key.startsWith('--');
2286
+ })
2287
+ .map(([key, value]) => `${key}:${value}`)
2288
+ .join(';');
2289
+ }
2290
+ /**
2291
+ * アクションのルートの DOM 要素を取得する
2273
2292
  *
2274
- * @returns アクションを破棄する関数
2293
+ * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
2275
2294
  *
2276
2295
  * @public
2277
2296
  */
2278
- function create(App, options) {
2279
- // TSの型検査が効かない場所やエラーを無視している箇所があるため、念の為
2280
- options = { ...emptyOptions, ...options };
2281
- setVariables({
2282
- ...options.props,
2283
- ...options.variables,
2284
- });
2285
- const data = getVariables();
2286
- const actionProps = {
2287
- send: options.send,
2288
- publish: options.publish,
2289
- data,
2290
- };
2291
- const handleDestroy = () => {
2292
- const { onDestroyHandlers } = getInternalHandlers();
2293
- onDestroyHandlers?.forEach(h => {
2294
- const actionHookLog = { name: 'onDestroy' };
2295
- console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
2296
- h(actionProps);
2297
- });
2298
- // 旧Widget APIの内部で利用するため、実行ログは出力しない
2299
- const { onDestroyHandlers: onDestroyWidgetHandlers } = getWidgetHandlers();
2300
- if (onDestroyWidgetHandlers) {
2301
- onDestroyWidgetHandlers.forEach(h => h(actionProps));
2302
- }
2297
+ function getActionRoot() {
2298
+ const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
2299
+ if (!root?.shadowRoot) {
2300
+ return null;
2301
+ }
2302
+ return root.shadowRoot;
2303
+ }
2304
+ /** @internal */
2305
+ function ensureActionRoot() {
2306
+ const systemConfig = getSystem();
2307
+ const rootAttrs = {
2308
+ class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
2309
+ [`data-${KARTE_ACTION_RID}`]: actionId,
2310
+ [`data-${KARTE_ACTION_SHORTEN_ID}`]: systemConfig.shortenId
2311
+ ? systemConfig.shortenId
2312
+ : ALL_ACTION_SHORTEN_ID,
2313
+ style: { display: 'block' },
2303
2314
  };
2304
- // ここからメインの処理
2305
- setSystem({
2306
- // @ts-ignore
2307
- apiKey: data.api_key || null,
2308
- collection_endpoint: options.context.collection_endpoint,
2309
- shortenId: data.shorten_id || null,
2310
- campaignId: data.campaign_id || null,
2311
- });
2312
- setActionRunnerContext(options.context);
2313
- window.addEventListener(ACTION_DESTROY_EVENT, handleDestroy);
2314
- window.addEventListener('beforeunload', dispatchDestroyEvent, false);
2315
- let modalCleanup = NOOP;
2316
- if (options.karteTemplate?.template_type === 'script' ||
2317
- options.karteTemplate?.template_content_types?.includes('script')) {
2318
- runScript$1(options);
2315
+ let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
2316
+ if (el == null) {
2317
+ el = h('div', rootAttrs);
2318
+ document.body.appendChild(el);
2319
+ }
2320
+ const isShadow = !!document.body.attachShadow;
2321
+ if (isShadow) {
2322
+ return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
2319
2323
  }
2320
2324
  else {
2321
- modalCleanup = createModal(App, options);
2325
+ return el;
2322
2326
  }
2323
- return () => {
2324
- modalCleanup();
2325
- window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
2326
- };
2327
2327
  }
2328
2328
  /**
2329
- * アクションの破棄する
2329
+ * 非推奨
2330
2330
  *
2331
- * @public
2331
+ * @deprecated 非推奨
2332
+ *
2333
+ * @internal
2332
2334
  */
2333
- function destroyAction() {
2334
- setDestroyed(true);
2335
- dispatchDestroyEvent();
2336
- }
2335
+ const show = showAction;
2337
2336
  /**
2338
- * アクションが作成 (create) される前にフックする関数
2337
+ * 非推奨
2339
2338
  *
2340
- * @param fn - 呼び出されるフック関数
2339
+ * @deprecated 非推奨
2341
2340
  *
2342
- * @public
2341
+ * @internal
2343
2342
  */
2344
- function onCreate(fn) {
2345
- let { onCreateHandlers } = getInternalHandlers();
2346
- if (!onCreateHandlers) {
2347
- onCreateHandlers = [];
2348
- }
2349
- onCreateHandlers.push(fn);
2350
- setInternalHandlers({ onCreateHandlers });
2351
- }
2343
+ const close = closeAction;
2352
2344
  /**
2353
- * アクションが破棄 (destroy) される前にフックする関数
2345
+ * 非推奨
2354
2346
  *
2355
- * @param fn - 呼び出されるフック関数
2347
+ * @deprecated 非推奨
2356
2348
  *
2357
- * @public
2349
+ * @internal
2358
2350
  */
2359
- function onDestroy(fn) {
2360
- let { onDestroyHandlers } = getInternalHandlers();
2361
- if (!onDestroyHandlers) {
2362
- onDestroyHandlers = [];
2363
- }
2364
- onDestroyHandlers.push(fn);
2365
- setInternalHandlers({ onDestroyHandlers });
2366
- }
2367
- // -------- The following codes are deprecated --------
2351
+ const ensureModalRoot = ensureActionRoot;
2368
2352
  /**
2369
2353
  * 非推奨
2370
2354
  *
@@ -2372,7 +2356,51 @@ function onDestroy(fn) {
2372
2356
  *
2373
2357
  * @internal
2374
2358
  */
2375
- const showModal = create;
2359
+ function createApp(App, options = {
2360
+ send: () => { },
2361
+ publish: () => { },
2362
+ props: {},
2363
+ variables: {},
2364
+ localVariablesQuery: undefined,
2365
+ context: { api_key: '' },
2366
+ }) {
2367
+ let app = null;
2368
+ const close = () => {
2369
+ if (app) {
2370
+ {
2371
+ // @ts-ignore -- Svelte3 では `unmount` は存在しない
2372
+ svelte.unmount(app);
2373
+ }
2374
+ app = null;
2375
+ }
2376
+ };
2377
+ const appArgs = {
2378
+ target: null,
2379
+ props: {
2380
+ send: options.send,
2381
+ publish: options.publish,
2382
+ close,
2383
+ data: {
2384
+ ...options.props,
2385
+ ...options.variables,
2386
+ },
2387
+ },
2388
+ };
2389
+ const win = ensureModalRoot();
2390
+ appArgs.target = win;
2391
+ return {
2392
+ close,
2393
+ show: () => {
2394
+ if (app) {
2395
+ return;
2396
+ }
2397
+ options.send('message_open');
2398
+ app = // @ts-ignore -- Svelte3 では `mount` は存在しない
2399
+ svelte.mount(App, appArgs)
2400
+ ;
2401
+ },
2402
+ };
2403
+ }
2376
2404
  /**
2377
2405
  * 非推奨
2378
2406
  *
@@ -2380,9 +2408,30 @@ const showModal = create;
2380
2408
  *
2381
2409
  * @internal
2382
2410
  */
2383
- function destroy() {
2384
- setDestroyed(true);
2385
- dispatchDestroyEvent();
2411
+ function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
2412
+ const root = ensureModalRoot();
2413
+ if (root.querySelector('.__krt-fog')) {
2414
+ return { fog: null, close: () => { } };
2415
+ }
2416
+ const fog = document.createElement('div');
2417
+ fog.className = '__krt-fog';
2418
+ Object.assign(fog.style, {
2419
+ position: 'fixed',
2420
+ left: 0,
2421
+ top: 0,
2422
+ width: '100%',
2423
+ height: '100%',
2424
+ 'z-index': zIndex,
2425
+ 'background-color': color,
2426
+ opacity,
2427
+ });
2428
+ const close = () => {
2429
+ onclick();
2430
+ fog.remove();
2431
+ };
2432
+ fog.onclick = close;
2433
+ root.appendChild(fog);
2434
+ return { fog, close };
2386
2435
  }
2387
2436
 
2388
2437
  const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
@@ -2792,13 +2841,13 @@ var widget = /*#__PURE__*/Object.freeze({
2792
2841
  collection: collection,
2793
2842
  getState: getState,
2794
2843
  getVal: getVal,
2795
- hide: closeAction,
2844
+ hide: closeAction$1,
2796
2845
  method: method,
2797
2846
  on: on,
2798
2847
  onChangeVal: onChangeVal,
2799
2848
  setState: setState,
2800
2849
  setVal: setVal,
2801
- show: showAction,
2850
+ show: showAction$1,
2802
2851
  storage: storage
2803
2852
  });
2804
2853
 
@@ -5322,8 +5371,8 @@ function Layout($$anchor, $$props) {
5322
5371
  flexDirection: props().direction,
5323
5372
  alignItems: props().align,
5324
5373
  justifyContent: props().justify,
5325
- rowGap: props().rowGap,
5326
- columnGap: props().columnGap,
5374
+ rowGap: props().rowGap ?? props().gap,
5375
+ columnGap: props().columnGap ?? props().gap,
5327
5376
  width: props().width,
5328
5377
  ...toCssOverflow(props()),
5329
5378
  ...toCssShadow(props()),
@@ -6300,13 +6349,15 @@ function Modal($$anchor, $$props) {
6300
6349
  let useBreakPoint = $.prop($$props, 'useBreakPoint', 8, false);
6301
6350
  let placement = $.prop($$props, 'placement', 8);
6302
6351
  let breakPoint = $.prop($$props, 'breakPoint', 8);
6303
- let elasticity = $.prop($$props, 'elasticity', 8);
6352
+ $.prop($$props, 'elasticity', 8);
6304
6353
  let animation = $.prop($$props, 'animation', 8, 'none');
6305
6354
  let props = $.prop($$props, 'props', 24, () => ({}));
6306
6355
  let closeEventName = $.prop($$props, 'closeEventName', 8, '');
6307
6356
  let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
6308
6357
  let layerId = $.prop($$props, 'layerId', 8, '');
6309
6358
  const { brandKit } = useBrandKit();
6359
+ // falseが明示的に指定されている場合以外はtrueにする
6360
+ const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') !== 'false';
6310
6361
  // モーダル背景の設定
6311
6362
  const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
6312
6363
  let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6352,7 +6403,7 @@ function Modal($$anchor, $$props) {
6352
6403
  $.deep_read_state(breakPoint())
6353
6404
  ),
6354
6405
  () => {
6355
- if (isExistBackgroundOverlayValue) {
6406
+ if (isOnSite && isExistBackgroundOverlayValue) {
6356
6407
  $.set(backgroundOverlay, placement().backgroundOverlay);
6357
6408
  }
6358
6409
 
@@ -6458,7 +6509,7 @@ function Modal($$anchor, $$props) {
6458
6509
  // 表示位置のスタイルの設定
6459
6510
  let position = DefaultModalPlacement.position;
6460
6511
 
6461
- if (placement() && placement().position !== null) {
6512
+ if (isOnSite && placement() && placement().position !== null) {
6462
6513
  position = placement().position;
6463
6514
  }
6464
6515
 
@@ -6475,7 +6526,7 @@ function Modal($$anchor, $$props) {
6475
6526
  $.set(transforms, []);
6476
6527
 
6477
6528
  DEVICE_IDS.forEach((deviceId) => {
6478
- if (useBreakPoint()) {
6529
+ if (isOnSite && useBreakPoint()) {
6479
6530
  const positionWithBp = breakPoint()[deviceId]?.placement?.position;
6480
6531
 
6481
6532
  $.get(transforms).push({
@@ -6510,7 +6561,7 @@ function Modal($$anchor, $$props) {
6510
6561
  () => {
6511
6562
  let margin = DefaultModalPlacement.margin;
6512
6563
 
6513
- if (placement() && placement().margin !== null) {
6564
+ if (isOnSite && placement() && placement().margin !== null) {
6514
6565
  margin = placement().margin;
6515
6566
  }
6516
6567
 
@@ -6521,7 +6572,7 @@ function Modal($$anchor, $$props) {
6521
6572
  }
6522
6573
 
6523
6574
  DEVICE_IDS.forEach((deviceId) => {
6524
- if (useBreakPoint()) {
6575
+ if (isOnSite && useBreakPoint()) {
6525
6576
  const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
6526
6577
 
6527
6578
  marginStyle = getMarginStyle(marginWithBp);
@@ -6538,38 +6589,6 @@ function Modal($$anchor, $$props) {
6538
6589
  }
6539
6590
  );
6540
6591
 
6541
- $.legacy_pre_effect(
6542
- () => (
6543
- $.deep_read_state(elasticity()),
6544
- $.deep_read_state(useBreakPoint()),
6545
- $.deep_read_state(breakPoint()),
6546
- parseStyle
6547
- ),
6548
- () => {
6549
- let elasticStyle = ElasticityStyle[elasticity()];
6550
-
6551
- if (!useBreakPoint()) {
6552
- modalStyles.add(elasticStyle);
6553
- }
6554
-
6555
- DEVICE_IDS.forEach((deviceId) => {
6556
- if (useBreakPoint()) {
6557
- const elasticityWithBp = breakPoint()[deviceId]?.elasticity;
6558
-
6559
- elasticStyle = ElasticityStyle[elasticityWithBp];
6560
- }
6561
-
6562
- const elasticityVariables = stringifyStyleObj(formatObjectKey({
6563
- obj: parseStyle(elasticStyle),
6564
- prefix: '--modal-bp-',
6565
- suffix: `-${deviceId.toLowerCase()}`
6566
- }));
6567
-
6568
- modalStyles.add(elasticityVariables);
6569
- });
6570
- }
6571
- );
6572
-
6573
6592
  $.legacy_pre_effect(() => {}, () => {
6574
6593
  $.set(modal, null);
6575
6594
  });
@@ -6612,6 +6631,7 @@ function Modal($$anchor, $$props) {
6612
6631
  var node = $.first_child(fragment);
6613
6632
 
6614
6633
  {
6634
+ var consequent = ($$anchor) => {};
6615
6635
 
6616
6636
  var alternate = ($$anchor, $$elseif) => {
6617
6637
  {
@@ -6672,7 +6692,7 @@ function Modal($$anchor, $$props) {
6672
6692
  };
6673
6693
 
6674
6694
  $.if(node, ($$render) => {
6675
- $$render(alternate, false);
6695
+ if (!isOnSite) $$render(consequent); else $$render(alternate, false);
6676
6696
  });
6677
6697
  }
6678
6698
 
@@ -7639,4 +7659,182 @@ const ROUND_STYLES = {
7639
7659
  },
7640
7660
  };
7641
7661
 
7642
- 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, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, 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, 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, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, 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 };
7662
+ const createProp = (key, type, suggestions = [], priority = 0, defaultValue = undefined) => {
7663
+ return {
7664
+ key,
7665
+ type,
7666
+ priority,
7667
+ suggestions: suggestions,
7668
+ default: defaultValue,
7669
+ };
7670
+ };
7671
+ const byObj = (obj) => {
7672
+ return Object.keys(obj);
7673
+ };
7674
+ const overflowProps = [
7675
+ createProp('overflow', 'string', ['hidden', 'visible', 'scroll', 'auto']),
7676
+ ];
7677
+ const borderProps = [
7678
+ createProp('borderTopWidth', 'string'),
7679
+ createProp('borderLeftWidth', 'string'),
7680
+ createProp('borderRightWidth', 'string'),
7681
+ createProp('borderBottomWidth', 'string'),
7682
+ createProp('borderColor', 'color'),
7683
+ ];
7684
+ const radiusProps = [
7685
+ createProp('borderTopLeftRadius', 'string'),
7686
+ createProp('borderTopRightRadius', 'string'),
7687
+ createProp('borderBottomLeftRadius', 'string'),
7688
+ createProp('borderBottomRightRadius', 'string'),
7689
+ ];
7690
+ const paddingProps = [
7691
+ createProp('paddingTop', 'string'),
7692
+ createProp('paddingLeft', 'string'),
7693
+ createProp('paddingRight', 'string'),
7694
+ createProp('paddingBottom', 'string'),
7695
+ ];
7696
+ const backgroundColorProps = [
7697
+ createProp('backgroundColor', 'string'),
7698
+ ];
7699
+ const backgroundImageProps = [
7700
+ createProp('backgroundImageUrl', 'url'),
7701
+ ];
7702
+ const flexComponentSchemes = {
7703
+ FlexAvatar: {
7704
+ props: [
7705
+ createProp('size', 'string', byObj(AVATAR_SIZE), 10),
7706
+ createProp('width', 'string', [], 5),
7707
+ createProp('height', 'string', [], 5),
7708
+ createProp('shape', 'string', byObj(AVATAR_SHAPE), 10),
7709
+ createProp('image', 'url', [], 99),
7710
+ // createProp('caption', 'string'),
7711
+ createProp('alt', 'string', [], 50),
7712
+ // TODO: clickable
7713
+ ...borderProps,
7714
+ ],
7715
+ },
7716
+ FlexButton: {
7717
+ props: [
7718
+ createProp('size', 'string', byObj(BUTTON_SIZE), 50),
7719
+ createProp('label', 'string', [], 99),
7720
+ createProp('paddingLeft', 'string'),
7721
+ createProp('paddingRight', 'string'),
7722
+ createProp('fontSize', 'string'),
7723
+ createProp('theme', 'string', byObj(BUTTON_THEME), 50),
7724
+ createProp('variant', 'string', byObj(BUTTON_VARIANT)),
7725
+ createProp('color', 'color', [], 5),
7726
+ createProp('backgroundColor', 'string', [], 5),
7727
+ createProp('borderColor', 'string', [], 5),
7728
+ createProp('fontWeight', 'string', ['normal', 'bold']),
7729
+ createProp('round', 'string', byObj(BUTTON_ROUND)),
7730
+ createProp('width', 'string', [], 10),
7731
+ createProp('wrap', 'string', ['wrap', 'nowrap']),
7732
+ // TODO: clickable
7733
+ ...radiusProps,
7734
+ ],
7735
+ },
7736
+ FlexClipCopy: {
7737
+ props: [
7738
+ createProp('content', 'string'),
7739
+ createProp('copiedEventName', 'string'),
7740
+ createProp('noneTooltip', 'boolean'),
7741
+ ],
7742
+ },
7743
+ FlexCloseButton: {
7744
+ props: [
7745
+ createProp('size', 'number'),
7746
+ createProp('placement', 'string', byObj(CLOSE_BUTTON_PLACEMENT), 99),
7747
+ createProp('round', 'string', byObj(CLOSE_BUTTON_ROUND)),
7748
+ createProp('bordered', 'boolean'),
7749
+ createProp('color', 'color'),
7750
+ createProp('backgroundColor', 'color'),
7751
+ createProp('label', 'string'),
7752
+ createProp('labelColor', 'color'),
7753
+ createProp('labelPlacement', 'string', byObj(CLOSE_BUTTON_LABEL_PLACEMENT)),
7754
+ createProp('top', 'string'),
7755
+ createProp('left', 'string'),
7756
+ createProp('right', 'string'),
7757
+ createProp('bottom', 'string'),
7758
+ ],
7759
+ },
7760
+ FlexCountDown: {
7761
+ props: [
7762
+ createProp('timeLimit', 'date_string', [], 99),
7763
+ // createProp('timeLimit', 'date_string'),
7764
+ ],
7765
+ },
7766
+ FlexIcon: {
7767
+ props: [
7768
+ createProp('variant', 'string', byObj(ICON_VARIANTS), 99),
7769
+ createProp('size', 'string', byObj(ICON_SIZE), 50),
7770
+ createProp('color', 'color', [], 5),
7771
+ createProp('width', 'string', [], 10),
7772
+ createProp('height', 'string', [], 10),
7773
+ ],
7774
+ },
7775
+ FlexImage: {
7776
+ props: [
7777
+ createProp('image', 'url', [], 99),
7778
+ createProp('aspect', 'string', Object.keys(ASPECT_VARIANT).map(key => ASPECT_VARIANT[key].getProps().aspect), 98),
7779
+ createProp('width', 'string', [], 5),
7780
+ createProp('height', 'string', [], 5),
7781
+ createProp('shape', 'string', byObj(IMAGE_ROUND_SHAPE), 10),
7782
+ ],
7783
+ },
7784
+ FlexLayout: {
7785
+ props: [
7786
+ createProp('display', 'string', ['flex', 'inline-flex', 'block']),
7787
+ createProp('direction', 'string', ['row', 'column', 'row-reverse', 'column-reverse'], 10),
7788
+ createProp('align', 'string', ['center', 'stretch', 'flex-start', 'flex-end'], 10),
7789
+ createProp('justify', 'string', ['center', 'flex-start', 'flex-end', 'space-between'], 10),
7790
+ createProp('gap', 'string', [], 10),
7791
+ createProp('rowGap', 'string', [], 10),
7792
+ createProp('columnGap', 'string', [], 10),
7793
+ createProp('width', 'string', [], 5),
7794
+ ...overflowProps,
7795
+ ...borderProps,
7796
+ ...radiusProps,
7797
+ ...backgroundColorProps,
7798
+ ...backgroundImageProps,
7799
+ ...paddingProps,
7800
+ ],
7801
+ },
7802
+ FlexList: {
7803
+ props: [
7804
+ createProp('gap', 'string', [], 10),
7805
+ createProp('borderWidth', 'string', [], 10),
7806
+ createProp('borderStyle', 'string', [], 10),
7807
+ createProp('borderColor', 'string', [], 10),
7808
+ createProp('itemPaddingTop', 'string', [], 5),
7809
+ createProp('itemPaddingLeft', 'string', [], 5),
7810
+ createProp('itemPaddingRight', 'string', [], 5),
7811
+ createProp('itemPaddingBottom', 'string', [], 5),
7812
+ createProp('itemGap', 'string', [], 5),
7813
+ ],
7814
+ },
7815
+ FlexListItem: {
7816
+ props: [
7817
+ createProp('gap', 'number', [], 10),
7818
+ // TODO: clickable
7819
+ ],
7820
+ },
7821
+ FlexText: {
7822
+ props: [
7823
+ createProp('content', 'string', [], 99),
7824
+ createProp('theme', 'string', byObj(TEXT_THEME), 50),
7825
+ createProp('size', 'string', byObj(LAYER_TEXT_SIZE), 50),
7826
+ createProp('align', 'string', [], 5),
7827
+ createProp('fontStyle', 'string', [], 5),
7828
+ createProp('fontSize', 'string', [], 5),
7829
+ createProp('fontWeight', 'string', [], 5),
7830
+ createProp('lineHeight', 'string', [], 5),
7831
+ createProp('color', 'string', [], 5),
7832
+ createProp('width', 'string', [], 10),
7833
+ createProp('fontFamilyVariant', 'string', byObj(FONT_FAMILY_VARIANT), 10),
7834
+ createProp('fontFamily', 'string', []),
7835
+ // TODO: clickable
7836
+ ],
7837
+ },
7838
+ };
7839
+
7840
+ 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, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, 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, 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, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection$1 as collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, 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 };