@plaidev/karte-action-sdk 1.1.267-29082699.18b12594 → 1.1.268-29083022.42c3d847

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.
@@ -1635,6 +1635,32 @@ function initActionTable(localVariablesQuery) {
1635
1635
  setVariables(initValues);
1636
1636
  }
1637
1637
 
1638
+ /**
1639
+ * モーダル(ポップアップ)に関連するコードの管理
1640
+ *
1641
+ * アクションのShow, Close, ChangeStateの状態はここで管理する。
1642
+ */
1643
+ /**
1644
+ * アクションを表示する
1645
+ *
1646
+ * @public
1647
+ */
1648
+ function showAction$1() {
1649
+ const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
1650
+ window.dispatchEvent(event);
1651
+ }
1652
+ /**
1653
+ * アクションを閉じる
1654
+ *
1655
+ * @param trigger - 閉じた時のトリガー。デフォルト `'none'`
1656
+ *
1657
+ * @public
1658
+ */
1659
+ function closeAction$1(trigger = 'none') {
1660
+ const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
1661
+ window.dispatchEvent(event);
1662
+ }
1663
+
1638
1664
  /**
1639
1665
  * モーダル(ポップアップ)に関連するコードの管理
1640
1666
  *
@@ -1652,12 +1678,57 @@ const handleState = (event) => {
1652
1678
  });
1653
1679
  }
1654
1680
  };
1681
+ /**
1682
+ * アクションが表示 (show) された後にフックする関数
1683
+ *
1684
+ * @param fn - 呼び出されるフック関数
1685
+ *
1686
+ * @public
1687
+ */
1688
+ function onShow(fn) {
1689
+ let { onShowHandlers } = getInternalHandlers();
1690
+ if (!onShowHandlers) {
1691
+ onShowHandlers = [];
1692
+ }
1693
+ onShowHandlers.push(fn);
1694
+ setInternalHandlers({ onShowHandlers });
1695
+ }
1696
+ /**
1697
+ * アクションがクローズ (close) される前にフックする関数
1698
+ *
1699
+ * @param fn - 呼び出されるフック関数
1700
+ *
1701
+ * @public
1702
+ */
1703
+ function onClose(fn) {
1704
+ let { onCloseHandlers } = getInternalHandlers();
1705
+ if (!onCloseHandlers) {
1706
+ onCloseHandlers = [];
1707
+ }
1708
+ onCloseHandlers.push(fn);
1709
+ setInternalHandlers({ onCloseHandlers });
1710
+ }
1711
+ /**
1712
+ * アクションのステートが変更された (changeState) 後にフックする関数
1713
+ *
1714
+ * @param fn - 呼び出されるフック関数
1715
+ *
1716
+ * @public
1717
+ */
1718
+ function onChangeState(fn) {
1719
+ let { onChangeStateHandlers } = getInternalHandlers();
1720
+ if (!onChangeStateHandlers) {
1721
+ onChangeStateHandlers = [];
1722
+ }
1723
+ onChangeStateHandlers.push(fn);
1724
+ setInternalHandlers({ onChangeStateHandlers });
1725
+ }
1655
1726
  /**
1656
1727
  * アクションを表示する
1657
1728
  *
1658
1729
  * @public
1659
1730
  */
1660
- function showAction$1() {
1731
+ function showAction() {
1661
1732
  const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
1662
1733
  window.dispatchEvent(event);
1663
1734
  }
@@ -1668,10 +1739,114 @@ function showAction$1() {
1668
1739
  *
1669
1740
  * @public
1670
1741
  */
1671
- function closeAction$1(trigger = 'none') {
1742
+ function closeAction(trigger = 'none') {
1672
1743
  const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
1673
1744
  window.dispatchEvent(event);
1674
1745
  }
1746
+ /**
1747
+ * アクションに CSS を適用する
1748
+ *
1749
+ * @param css - 適用する CSS
1750
+ *
1751
+ * @returns 適用された style 要素を返す Promise
1752
+ *
1753
+ * @public
1754
+ */
1755
+ async function applyCss(css) {
1756
+ return new Promise((resolve, reject) => {
1757
+ const style = document.createElement('style');
1758
+ style.textContent = css;
1759
+ const shadowRoot = getActionRoot();
1760
+ if (!shadowRoot)
1761
+ return;
1762
+ shadowRoot.append(style);
1763
+ style.addEventListener('load', () => resolve(style));
1764
+ style.addEventListener('error', () => reject(style));
1765
+ });
1766
+ }
1767
+ async function fixFontFaceIssue(href, cssRules) {
1768
+ const css = new CSSStyleSheet();
1769
+ // @ts-ignore
1770
+ await css.replace(cssRules);
1771
+ const rules = [];
1772
+ const fixedRules = [];
1773
+ Array.from(css.cssRules).forEach(cssRule => {
1774
+ if (cssRule.type !== 5) {
1775
+ rules.push(cssRule.cssText);
1776
+ }
1777
+ // type 5 is @font-face
1778
+ const split = href.split('/');
1779
+ const stylePath = split.slice(0, split.length - 1).join('/');
1780
+ const cssText = cssRule.cssText;
1781
+ const newCssText = cssText.replace(
1782
+ // relative paths
1783
+ /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
1784
+ if (cssText === newCssText)
1785
+ return;
1786
+ fixedRules.push(newCssText);
1787
+ });
1788
+ return [rules.join('\n'), fixedRules.join('\n')];
1789
+ }
1790
+ /**
1791
+ * アクションにグローバルなスタイルを読み込む
1792
+ *
1793
+ * @param href - style ファイルのリンク URL
1794
+ *
1795
+ * @public
1796
+ */
1797
+ async function loadStyle(href) {
1798
+ const sr = getActionRoot();
1799
+ if (!sr)
1800
+ return;
1801
+ let cssRules = '';
1802
+ try {
1803
+ const res = await fetch(href);
1804
+ cssRules = await res.text();
1805
+ }
1806
+ catch (_) {
1807
+ // pass
1808
+ }
1809
+ if (!cssRules)
1810
+ return;
1811
+ // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
1812
+ // @see https://stackoverflow.com/a/63717709
1813
+ const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
1814
+ const css = new CSSStyleSheet();
1815
+ // @ts-ignore
1816
+ await css.replace(rules);
1817
+ const fontFaceCss = new CSSStyleSheet();
1818
+ // @ts-ignore
1819
+ await fontFaceCss.replace(fontFaceRules);
1820
+ // @ts-ignore
1821
+ sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
1822
+ // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
1823
+ // @see https://stackoverflow.com/a/63717709
1824
+ // @ts-ignore
1825
+ document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
1826
+ }
1827
+ // @internal
1828
+ function getCssVariables(data) {
1829
+ return Object.entries(data)
1830
+ .filter(([key, value]) => {
1831
+ return ['string', 'number'].includes(typeof value) && key.startsWith('--');
1832
+ })
1833
+ .map(([key, value]) => `${key}:${value}`)
1834
+ .join(';');
1835
+ }
1836
+ /**
1837
+ * アクションのルートの DOM 要素を取得する
1838
+ *
1839
+ * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
1840
+ *
1841
+ * @public
1842
+ */
1843
+ function getActionRoot() {
1844
+ const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
1845
+ if (!root?.shadowRoot) {
1846
+ return null;
1847
+ }
1848
+ return root.shadowRoot;
1849
+ }
1675
1850
  /** @internal */
1676
1851
  function createModal(App, options = {
1677
1852
  send: () => { },
@@ -1739,6 +1914,9 @@ function createModal(App, options = {
1739
1914
  if (app) {
1740
1915
  return;
1741
1916
  }
1917
+ if (!isOnSite() && trigger === 'custom') {
1918
+ return;
1919
+ }
1742
1920
  if (trigger === 'custom' && (options.props.show_on_scroll || options.props.show_on_time)) {
1743
1921
  return;
1744
1922
  }
@@ -1763,9 +1941,9 @@ function createModal(App, options = {
1763
1941
  if (app) {
1764
1942
  return;
1765
1943
  }
1944
+ const target = ensureActionRoot(isOnSite());
1766
1945
  const props = {
1767
- target: ensureActionRoot$1(!false),
1768
- hydrate: false,
1946
+ target,
1769
1947
  props: {
1770
1948
  send: options.send,
1771
1949
  publish: options.publish,
@@ -1800,7 +1978,8 @@ function createModal(App, options = {
1800
1978
  },
1801
1979
  },
1802
1980
  };
1803
- app = svelte.mount(App, props)
1981
+ app = // @ts-ignore -- Svelte3 では `mount` は存在しない
1982
+ svelte.mount(App, props)
1804
1983
  ;
1805
1984
  };
1806
1985
  const handleShow = (event) => {
@@ -1850,7 +2029,10 @@ function createModal(App, options = {
1850
2029
  window.addEventListener(ACTION_CHANGE_STATE_EVENT, handleState);
1851
2030
  let showTriggerCleanups = [];
1852
2031
  let closeTriggerCleanups = [];
1853
- {
2032
+ if (!isOnSite()) {
2033
+ autoShow();
2034
+ }
2035
+ else {
1854
2036
  showTriggerCleanups = listenShowTrigger();
1855
2037
  closeTriggerCleanups = listenCloseTrigger();
1856
2038
  }
@@ -1882,7 +2064,7 @@ function createModal(App, options = {
1882
2064
  return appCleanup;
1883
2065
  }
1884
2066
  /** @internal */
1885
- function ensureActionRoot$1(useShadow = true) {
2067
+ function ensureActionRoot(useShadow = true) {
1886
2068
  const systemConfig = getSystem();
1887
2069
  const rootAttrs = {
1888
2070
  class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -1905,73 +2087,182 @@ function ensureActionRoot$1(useShadow = true) {
1905
2087
  return el;
1906
2088
  }
1907
2089
  }
1908
-
1909
2090
  /**
1910
- * スクリプト接客が利用するコードの管理
2091
+ * 非推奨
2092
+ *
2093
+ * @deprecated 非推奨
2094
+ *
2095
+ * @internal
1911
2096
  */
1912
- /** @internal */
1913
- async function runScript$1(options = {
1914
- send: () => { },
1915
- publish: () => { },
1916
- props: {},
1917
- variables: {},
1918
- localVariablesQuery: undefined,
1919
- karteTemplate: {},
1920
- context: { api_key: '', collection_endpoint: undefined },
1921
- }) {
1922
- if (!options.onCreate)
1923
- return;
1924
- let data = getVariables();
1925
- initialize({ send: options.send, initialState: data.initial_state });
1926
- initActionTable(options.localVariablesQuery);
1927
- const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key, options.context.collection_endpoint);
1928
- if (!success)
1929
- return;
1930
- // Action Tableの取得結果を反映する
1931
- data = getVariables();
1932
- const actionProps = {
1933
- send: options.send,
1934
- publish: options.publish,
1935
- data,
1936
- };
1937
- options.send('script_fired');
1938
- // 旧Widget API IFの処理
1939
- const { onCreateHandlers } = getInternalHandlers();
1940
- if (onCreateHandlers) {
1941
- onCreateHandlers.forEach(h => {
1942
- h({ send: options.send, publish: options.publish, data });
1943
- console.debug(`${ACTION_HOOK_LABEL}: onCreate`);
1944
- });
1945
- }
1946
- options.onCreate(actionProps);
1947
- finalize();
1948
- }
2097
+ const show = showAction;
1949
2098
  /**
1950
- * ES Modules に対応していない JavaScript をページに読み込む
2099
+ * 非推奨
1951
2100
  *
1952
- * @param src - JavaScript ファイルのリンク URL
2101
+ * @deprecated 非推奨
1953
2102
  *
1954
- * @public
2103
+ * @internal
1955
2104
  */
1956
- async function loadGlobalScript(src) {
1957
- return new Promise((resolve, reject) => {
1958
- const script = document.createElement('script');
1959
- script.src = src;
1960
- document.body.appendChild(script);
1961
- script.addEventListener('load', () => resolve(script));
1962
- script.addEventListener('error', () => reject(script));
1963
- });
1964
- }
2105
+ const close = closeAction;
1965
2106
  /**
1966
- * グローバル CSS をページに適用する
2107
+ * 非推奨
1967
2108
  *
1968
- * @param css - CSS
2109
+ * @deprecated 非推奨
1969
2110
  *
1970
- * @public
2111
+ * @internal
1971
2112
  */
1972
- async function applyGlobalCss(css) {
1973
- return new Promise((resolve, reject) => {
1974
- const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
2113
+ const ensureModalRoot = ensureActionRoot;
2114
+ /**
2115
+ * 非推奨
2116
+ *
2117
+ * @deprecated 非推奨
2118
+ *
2119
+ * @internal
2120
+ */
2121
+ function createApp(App, options = {
2122
+ send: () => { },
2123
+ publish: () => { },
2124
+ props: {},
2125
+ variables: {},
2126
+ localVariablesQuery: undefined,
2127
+ context: { api_key: '' },
2128
+ }) {
2129
+ let app = null;
2130
+ const close = () => {
2131
+ if (app) {
2132
+ {
2133
+ // @ts-ignore -- Svelte3 では `unmount` は存在しない
2134
+ svelte.unmount(app);
2135
+ }
2136
+ app = null;
2137
+ }
2138
+ };
2139
+ const appArgs = {
2140
+ target: null,
2141
+ props: {
2142
+ send: options.send,
2143
+ publish: options.publish,
2144
+ close,
2145
+ data: {
2146
+ ...options.props,
2147
+ ...options.variables,
2148
+ },
2149
+ },
2150
+ };
2151
+ const win = ensureActionRoot(isOnSite());
2152
+ appArgs.target = win;
2153
+ return {
2154
+ close,
2155
+ show: () => {
2156
+ if (app) {
2157
+ return;
2158
+ }
2159
+ options.send('message_open');
2160
+ app = // @ts-ignore -- Svelte3 では `mount` は存在しない
2161
+ svelte.mount(App, appArgs)
2162
+ ;
2163
+ },
2164
+ };
2165
+ }
2166
+ /**
2167
+ * 非推奨
2168
+ *
2169
+ * @deprecated 非推奨
2170
+ *
2171
+ * @internal
2172
+ */
2173
+ function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
2174
+ console.log('createFog');
2175
+ const root = ensureModalRoot();
2176
+ if (root.querySelector('.__krt-fog')) {
2177
+ return { fog: null, close: () => { } };
2178
+ }
2179
+ const fog = document.createElement('div');
2180
+ fog.className = '__krt-fog';
2181
+ Object.assign(fog.style, {
2182
+ position: 'fixed',
2183
+ left: 0,
2184
+ top: 0,
2185
+ width: '100%',
2186
+ height: '100%',
2187
+ 'z-index': zIndex,
2188
+ 'background-color': color,
2189
+ opacity,
2190
+ });
2191
+ const close = () => {
2192
+ onclick();
2193
+ fog.remove();
2194
+ };
2195
+ fog.onclick = close;
2196
+ root.appendChild(fog);
2197
+ return { fog, close };
2198
+ }
2199
+
2200
+ /**
2201
+ * スクリプト接客が利用するコードの管理
2202
+ */
2203
+ /** @internal */
2204
+ async function runScript$1(options = {
2205
+ send: () => { },
2206
+ publish: () => { },
2207
+ props: {},
2208
+ variables: {},
2209
+ localVariablesQuery: undefined,
2210
+ karteTemplate: {},
2211
+ context: { api_key: '', collection_endpoint: undefined },
2212
+ }) {
2213
+ if (!options.onCreate)
2214
+ return;
2215
+ let data = getVariables();
2216
+ initialize({ send: options.send, initialState: data.initial_state });
2217
+ initActionTable(options.localVariablesQuery);
2218
+ const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key, options.context.collection_endpoint);
2219
+ if (!success)
2220
+ return;
2221
+ // Action Tableの取得結果を反映する
2222
+ data = getVariables();
2223
+ const actionProps = {
2224
+ send: options.send,
2225
+ publish: options.publish,
2226
+ data,
2227
+ };
2228
+ options.send('script_fired');
2229
+ // 旧Widget API IFの処理
2230
+ const { onCreateHandlers } = getInternalHandlers();
2231
+ if (onCreateHandlers) {
2232
+ onCreateHandlers.forEach(h => {
2233
+ h({ send: options.send, publish: options.publish, data });
2234
+ console.debug(`${ACTION_HOOK_LABEL}: onCreate`);
2235
+ });
2236
+ }
2237
+ options.onCreate(actionProps);
2238
+ finalize();
2239
+ }
2240
+ /**
2241
+ * ES Modules に対応していない JavaScript をページに読み込む
2242
+ *
2243
+ * @param src - JavaScript ファイルのリンク URL
2244
+ *
2245
+ * @public
2246
+ */
2247
+ async function loadGlobalScript(src) {
2248
+ return new Promise((resolve, reject) => {
2249
+ const script = document.createElement('script');
2250
+ script.src = src;
2251
+ document.body.appendChild(script);
2252
+ script.addEventListener('load', () => resolve(script));
2253
+ script.addEventListener('error', () => reject(script));
2254
+ });
2255
+ }
2256
+ /**
2257
+ * グローバル CSS をページに適用する
2258
+ *
2259
+ * @param css - CSS
2260
+ *
2261
+ * @public
2262
+ */
2263
+ async function applyGlobalCss(css) {
2264
+ return new Promise((resolve, reject) => {
2265
+ const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
1975
2266
  if (!action) {
1976
2267
  return;
1977
2268
  }
@@ -2072,7 +2363,7 @@ function create(App, options) {
2072
2363
  runScript$1(options);
2073
2364
  }
2074
2365
  else {
2075
- modalCleanup = createModal(App, options);
2366
+ modalCleanup = createModal(App, options) ;
2076
2367
  }
2077
2368
  return () => {
2078
2369
  modalCleanup();
@@ -2139,313 +2430,6 @@ function destroy() {
2139
2430
  dispatchDestroyEvent();
2140
2431
  }
2141
2432
 
2142
- /**
2143
- * モーダル(ポップアップ)に関連するコードの管理
2144
- *
2145
- * アクションのShow, Close, ChangeStateの状態はここで管理する。
2146
- */
2147
- /**
2148
- * アクションが表示 (show) された後にフックする関数
2149
- *
2150
- * @param fn - 呼び出されるフック関数
2151
- *
2152
- * @public
2153
- */
2154
- function onShow(fn) {
2155
- let { onShowHandlers } = getInternalHandlers();
2156
- if (!onShowHandlers) {
2157
- onShowHandlers = [];
2158
- }
2159
- onShowHandlers.push(fn);
2160
- setInternalHandlers({ onShowHandlers });
2161
- }
2162
- /**
2163
- * アクションがクローズ (close) される前にフックする関数
2164
- *
2165
- * @param fn - 呼び出されるフック関数
2166
- *
2167
- * @public
2168
- */
2169
- function onClose(fn) {
2170
- let { onCloseHandlers } = getInternalHandlers();
2171
- if (!onCloseHandlers) {
2172
- onCloseHandlers = [];
2173
- }
2174
- onCloseHandlers.push(fn);
2175
- setInternalHandlers({ onCloseHandlers });
2176
- }
2177
- /**
2178
- * アクションのステートが変更された (changeState) 後にフックする関数
2179
- *
2180
- * @param fn - 呼び出されるフック関数
2181
- *
2182
- * @public
2183
- */
2184
- function onChangeState(fn) {
2185
- let { onChangeStateHandlers } = getInternalHandlers();
2186
- if (!onChangeStateHandlers) {
2187
- onChangeStateHandlers = [];
2188
- }
2189
- onChangeStateHandlers.push(fn);
2190
- setInternalHandlers({ onChangeStateHandlers });
2191
- }
2192
- /**
2193
- * アクションを表示する
2194
- *
2195
- * @public
2196
- */
2197
- function showAction() {
2198
- const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
2199
- window.dispatchEvent(event);
2200
- }
2201
- /**
2202
- * アクションを閉じる
2203
- *
2204
- * @param trigger - 閉じた時のトリガー。デフォルト `'none'`
2205
- *
2206
- * @public
2207
- */
2208
- function closeAction(trigger = 'none') {
2209
- const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
2210
- window.dispatchEvent(event);
2211
- }
2212
- /**
2213
- * アクションに CSS を適用する
2214
- *
2215
- * @param css - 適用する CSS
2216
- *
2217
- * @returns 適用された style 要素を返す Promise
2218
- *
2219
- * @public
2220
- */
2221
- async function applyCss(css) {
2222
- return new Promise((resolve, reject) => {
2223
- const style = document.createElement('style');
2224
- style.textContent = css;
2225
- const shadowRoot = getActionRoot();
2226
- if (!shadowRoot)
2227
- return;
2228
- shadowRoot.append(style);
2229
- style.addEventListener('load', () => resolve(style));
2230
- style.addEventListener('error', () => reject(style));
2231
- });
2232
- }
2233
- async function fixFontFaceIssue(href, cssRules) {
2234
- const css = new CSSStyleSheet();
2235
- // @ts-ignore
2236
- await css.replace(cssRules);
2237
- const rules = [];
2238
- const fixedRules = [];
2239
- Array.from(css.cssRules).forEach(cssRule => {
2240
- if (cssRule.type !== 5) {
2241
- rules.push(cssRule.cssText);
2242
- }
2243
- // type 5 is @font-face
2244
- const split = href.split('/');
2245
- const stylePath = split.slice(0, split.length - 1).join('/');
2246
- const cssText = cssRule.cssText;
2247
- const newCssText = cssText.replace(
2248
- // relative paths
2249
- /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
2250
- if (cssText === newCssText)
2251
- return;
2252
- fixedRules.push(newCssText);
2253
- });
2254
- return [rules.join('\n'), fixedRules.join('\n')];
2255
- }
2256
- /**
2257
- * アクションにグローバルなスタイルを読み込む
2258
- *
2259
- * @param href - style ファイルのリンク URL
2260
- *
2261
- * @public
2262
- */
2263
- async function loadStyle(href) {
2264
- const sr = getActionRoot();
2265
- if (!sr)
2266
- return;
2267
- let cssRules = '';
2268
- try {
2269
- const res = await fetch(href);
2270
- cssRules = await res.text();
2271
- }
2272
- catch (_) {
2273
- // pass
2274
- }
2275
- if (!cssRules)
2276
- return;
2277
- // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
2278
- // @see https://stackoverflow.com/a/63717709
2279
- const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
2280
- const css = new CSSStyleSheet();
2281
- // @ts-ignore
2282
- await css.replace(rules);
2283
- const fontFaceCss = new CSSStyleSheet();
2284
- // @ts-ignore
2285
- await fontFaceCss.replace(fontFaceRules);
2286
- // @ts-ignore
2287
- sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
2288
- // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
2289
- // @see https://stackoverflow.com/a/63717709
2290
- // @ts-ignore
2291
- document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
2292
- }
2293
- // @internal
2294
- function getCssVariables(data) {
2295
- return Object.entries(data)
2296
- .filter(([key, value]) => {
2297
- return ['string', 'number'].includes(typeof value) && key.startsWith('--');
2298
- })
2299
- .map(([key, value]) => `${key}:${value}`)
2300
- .join(';');
2301
- }
2302
- /**
2303
- * アクションのルートの DOM 要素を取得する
2304
- *
2305
- * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
2306
- *
2307
- * @public
2308
- */
2309
- function getActionRoot() {
2310
- const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
2311
- if (!root?.shadowRoot) {
2312
- return null;
2313
- }
2314
- return root.shadowRoot;
2315
- }
2316
- /** @internal */
2317
- function ensureActionRoot(useShadow = true) {
2318
- const systemConfig = getSystem();
2319
- const rootAttrs = {
2320
- class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
2321
- [`data-${KARTE_ACTION_RID}`]: actionId,
2322
- [`data-${KARTE_ACTION_SHORTEN_ID}`]: systemConfig.shortenId
2323
- ? systemConfig.shortenId
2324
- : ALL_ACTION_SHORTEN_ID,
2325
- style: { display: 'block' },
2326
- };
2327
- let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
2328
- if (el == null) {
2329
- el = h('div', rootAttrs);
2330
- document.body.appendChild(el);
2331
- }
2332
- const isShadow = !!document.body.attachShadow && useShadow;
2333
- if (isShadow) {
2334
- return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
2335
- }
2336
- else {
2337
- return el;
2338
- }
2339
- }
2340
- /**
2341
- * 非推奨
2342
- *
2343
- * @deprecated 非推奨
2344
- *
2345
- * @internal
2346
- */
2347
- const show = showAction;
2348
- /**
2349
- * 非推奨
2350
- *
2351
- * @deprecated 非推奨
2352
- *
2353
- * @internal
2354
- */
2355
- const close = closeAction;
2356
- /**
2357
- * 非推奨
2358
- *
2359
- * @deprecated 非推奨
2360
- *
2361
- * @internal
2362
- */
2363
- const ensureModalRoot = ensureActionRoot;
2364
- /**
2365
- * 非推奨
2366
- *
2367
- * @deprecated 非推奨
2368
- *
2369
- * @internal
2370
- */
2371
- function createApp(App, options = {
2372
- send: () => { },
2373
- publish: () => { },
2374
- props: {},
2375
- variables: {},
2376
- localVariablesQuery: undefined,
2377
- context: { api_key: '' },
2378
- }) {
2379
- let app = null;
2380
- const close = () => {
2381
- if (app) {
2382
- {
2383
- // @ts-ignore -- Svelte3 では `unmount` は存在しない
2384
- svelte.unmount(app);
2385
- }
2386
- app = null;
2387
- }
2388
- };
2389
- const appArgs = {
2390
- target: null,
2391
- props: {
2392
- send: options.send,
2393
- publish: options.publish,
2394
- close,
2395
- data: {
2396
- ...options.props,
2397
- ...options.variables,
2398
- },
2399
- },
2400
- };
2401
- const win = ensureModalRoot(true);
2402
- appArgs.target = win;
2403
- return {
2404
- close,
2405
- show: () => {
2406
- if (app) {
2407
- return;
2408
- }
2409
- options.send('message_open');
2410
- app = // @ts-ignore -- Svelte3 では `mount` は存在しない
2411
- svelte.mount(App, appArgs)
2412
- ;
2413
- },
2414
- };
2415
- }
2416
- /**
2417
- * 非推奨
2418
- *
2419
- * @deprecated 非推奨
2420
- *
2421
- * @internal
2422
- */
2423
- function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
2424
- const root = ensureModalRoot();
2425
- if (root.querySelector('.__krt-fog')) {
2426
- return { fog: null, close: () => { } };
2427
- }
2428
- const fog = document.createElement('div');
2429
- fog.className = '__krt-fog';
2430
- Object.assign(fog.style, {
2431
- position: 'fixed',
2432
- left: 0,
2433
- top: 0,
2434
- width: '100%',
2435
- height: '100%',
2436
- 'z-index': zIndex,
2437
- 'background-color': color,
2438
- opacity,
2439
- });
2440
- const close = () => {
2441
- onclick();
2442
- fog.remove();
2443
- };
2444
- fog.onclick = close;
2445
- root.appendChild(fog);
2446
- return { fog, close };
2447
- }
2448
-
2449
2433
  const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
2450
2434
  const MAX_LENGTH_FREE_ANSWER = 2000;
2451
2435
  function createAnswerValue(value) {