@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.
- package/dist/hydrate/index.es.d.ts +29 -3
- package/dist/hydrate/index.es.js +799 -302
- package/dist/index.es.d.ts +29 -3
- package/dist/index.es.js +773 -310
- package/dist/svelte5/hydrate/index.es.d.ts +30 -4
- package/dist/svelte5/hydrate/index.es.js +707 -375
- package/dist/svelte5/index.es.d.ts +30 -4
- package/dist/svelte5/index.es.js +587 -389
- package/dist/svelte5/index.front2.es.js +591 -389
- package/package.json +1 -1
package/dist/svelte5/index.es.js
CHANGED
@@ -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
|
2279
|
-
|
2280
|
-
|
2281
|
-
|
2282
|
-
|
2283
|
-
|
2284
|
-
|
2285
|
-
|
2286
|
-
|
2287
|
-
|
2288
|
-
|
2289
|
-
|
2290
|
-
|
2291
|
-
|
2292
|
-
|
2293
|
-
|
2294
|
-
|
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
|
-
|
2306
|
-
|
2307
|
-
|
2308
|
-
|
2309
|
-
|
2310
|
-
|
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
|
-
|
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
|
-
* @
|
2331
|
+
* @deprecated 非推奨
|
2332
|
+
*
|
2333
|
+
* @internal
|
2332
2334
|
*/
|
2333
|
-
|
2334
|
-
setDestroyed(true);
|
2335
|
-
dispatchDestroyEvent();
|
2336
|
-
}
|
2335
|
+
const show = showAction;
|
2337
2336
|
/**
|
2338
|
-
*
|
2337
|
+
* 非推奨
|
2339
2338
|
*
|
2340
|
-
* @
|
2339
|
+
* @deprecated 非推奨
|
2341
2340
|
*
|
2342
|
-
* @
|
2341
|
+
* @internal
|
2343
2342
|
*/
|
2344
|
-
|
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
|
-
*
|
2345
|
+
* 非推奨
|
2354
2346
|
*
|
2355
|
-
* @
|
2347
|
+
* @deprecated 非推奨
|
2356
2348
|
*
|
2357
|
-
* @
|
2349
|
+
* @internal
|
2358
2350
|
*/
|
2359
|
-
|
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
|
-
|
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
|
2384
|
-
|
2385
|
-
|
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
|
-
|
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
|
-
|
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 };
|