d2coreui 21.0.33 → 23.0.0

package/components/clipboard/clipboardUtils.d.ts

@@ -1,3 +1,4 @@
-export declare class ClipboardUtils {
-    static copyToClipboard(text: string): boolean;
-}
+export declare class ClipboardUtils {
+    static copyToClipboard(text: string): boolean;
+    static readFromClipboard(): Promise<string | undefined>;
+}

package/components/clipboard/clipboardUtils.js

@@ -1,23 +1,48 @@
-export class ClipboardUtils {
-    static copyToClipboard(text) {
-        if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
-            var textarea = document.createElement("textarea");
-            textarea.textContent = text;
-            textarea.style.position = "fixed";
-            document.body.appendChild(textarea);
-            textarea.select();
-            try {
-                return document.execCommand("copy");
-            }
-            catch (ex) {
-                console.warn("Copy to clipboard failed.", ex);
-                return false;
-            }
-            finally {
-                document.body.removeChild(textarea);
-            }
-        }
-        return false;
-    }
-}
+import { ModalDialog } from "../modal/modalDialog";
+import i18n from "d2core/i18n/i18n";
+export class ClipboardUtils {
+    static copyToClipboard(text) {
+        if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
+            var textarea = document.createElement("textarea");
+            textarea.textContent = text;
+            textarea.style.position = "fixed";
+            document.body.appendChild(textarea);
+            textarea.select();
+            try {
+                return document.execCommand("copy");
+            }
+            catch (ex) {
+                console.warn("Copy to clipboard failed.", ex);
+                return false;
+            }
+            finally {
+                document.body.removeChild(textarea);
+            }
+        }
+        return false;
+    }
+    static async readFromClipboard() {
+        if (navigator.clipboard && window.isSecureContext) {
+            const permission = await navigator.permissions.query({ name: "clipboard-read" });
+            if (permission.state === "granted" || permission.state === "prompt") {
+                return await navigator.clipboard.readText();
+            }
+            else {
+                ModalDialog.error({
+                    mode: "OK",
+                    title: i18n("Error reading data from clipboard"),
+                    content: i18n("Clipboard not permitted")
+                });
+            }
+        }
+        else {
+            ModalDialog.error({
+                mode: "OK",
+                title: i18n("Error reading data from clipboard"),
+                content: i18n("Secure context not available")
+            });
+        }
+        return undefined;
+    }
+}
 //# sourceMappingURL=clipboardUtils.js.map

package/components/clipboard/clipboardUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"clipboardUtils.js","sourceRoot":"","sources":["../../../../components/clipboard/clipboardUtils.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,cAAc;IAQvB,MAAM,CAAC,eAAe,CAAC,IAAY;QAC/B,IAAI,QAAQ,CAAC,qBAAqB,IAAI,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE;YAC1E,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAClD,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;YAC5B,QAAQ,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;YAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;YACpC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAClB,IAAI;gBACA,OAAO,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;aACvC;YAAC,OAAO,EAAE,EAAE;gBACT,OAAO,CAAC,IAAI,CAAC,2BAA2B,EAAE,EAAE,CAAC,CAAC;gBAC9C,OAAO,KAAK,CAAC;aAChB;oBAAS;gBACN,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;aACvC;SACJ;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;CACJ","sourcesContent":["export class ClipboardUtils {\n    // Copies a string to the clipboard. Must be called from within an\n    // event handler such as click. May return false if it failed, but\n    // this is not always possible. Browser support for Chrome 43+,\n    // Firefox 42+, Safari 10+, Edge and IE 10+.\n    // IE: The clipboard feature may be disabled by an administrator. By\n    // default a prompt is shown the first time the clipboard is\n    // used (per session).\n    static copyToClipboard(text: string): boolean {\n        if (document.queryCommandSupported && document.queryCommandSupported(\"copy\")) {\n            var textarea = document.createElement(\"textarea\");\n            textarea.textContent = text;\n            textarea.style.position = \"fixed\";  // Prevent scrolling to bottom of page in MS Edge.\n            document.body.appendChild(textarea);\n            textarea.select();\n            try {\n                return document.execCommand(\"copy\");  // Security exception may be thrown by some browsers.\n            } catch (ex) {\n                console.warn(\"Copy to clipboard failed.\", ex);\n                return false;\n            } finally {\n                document.body.removeChild(textarea);\n            }\n        }\n        return false;\n    }\n}"]}
+{"version":3,"file":"clipboardUtils.js","sourceRoot":"","sources":["../../../../components/clipboard/clipboardUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAkB,MAAM,sBAAsB,CAAC;AAClE,OAAO,IAAI,MAAM,kBAAkB,CAAC;AAEpC,MAAM,OAAO,cAAc;IAQvB,MAAM,CAAC,eAAe,CAAC,IAAY;QAC/B,IAAI,QAAQ,CAAC,qBAAqB,IAAI,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3E,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAClD,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;YAC5B,QAAQ,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;YAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;YACpC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAClB,IAAI,CAAC;gBACD,OAAO,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;YACxC,CAAC;YAAC,OAAO,EAAE,EAAE,CAAC;gBACV,OAAO,CAAC,IAAI,CAAC,2BAA2B,EAAE,EAAE,CAAC,CAAC;gBAC9C,OAAO,KAAK,CAAC;YACjB,CAAC;oBAAS,CAAC;gBACP,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;YACxC,CAAC;QACL,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,iBAAiB;QAC1B,IAAI,SAAS,CAAC,SAAS,IAAI,MAAM,CAAC,eAAe,EAAE,CAAC;YAEhD,MAAM,UAAU,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;YACjF,IAAI,UAAU,CAAC,KAAK,KAAK,SAAS,IAAI,UAAU,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAClE,OAAO,MAAM,SAAS,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;YAChD,CAAC;iBAAM,CAAC;gBACJ,WAAW,CAAC,KAAK,CAAC;oBACd,IAAI,MAAoB;oBACxB,KAAK,EAAE,IAAI,CAAC,mCAAmC,CAAC;oBAChD,OAAO,EAAE,IAAI,CAAC,yBAAyB,CAAC;iBAC3C,CAAC,CAAA;YACN,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,WAAW,CAAC,KAAK,CAAC;gBACd,IAAI,MAAoB;gBACxB,KAAK,EAAE,IAAI,CAAC,mCAAmC,CAAC;gBAChD,OAAO,EAAE,IAAI,CAAC,8BAA8B,CAAC;aAChD,CAAC,CAAA;QACN,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;CACJ","sourcesContent":["import {ModalDialog, ModalDialogMode} from \"../modal/modalDialog\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\n\r\nexport class ClipboardUtils {\r\n    // Copies a string to the clipboard. Must be called from within an\r\n    // event handler such as click. May return false if it failed, but\r\n    // this is not always possible. Browser support for Chrome 43+,\r\n    // Firefox 42+, Safari 10+, Edge and IE 10+.\r\n    // IE: The clipboard feature may be disabled by an administrator. By\r\n    // default a prompt is shown the first time the clipboard is\r\n    // used (per session).\r\n    static copyToClipboard(text: string): boolean {\r\n        if (document.queryCommandSupported && document.queryCommandSupported(\"copy\")) {\r\n            var textarea = document.createElement(\"textarea\");\r\n            textarea.textContent = text;\r\n            textarea.style.position = \"fixed\";  // Prevent scrolling to bottom of page in MS Edge.\r\n            document.body.appendChild(textarea);\r\n            textarea.select();\r\n            try {\r\n                return document.execCommand(\"copy\");  // Security exception may be thrown by some browsers.\r\n            } catch (ex) {\r\n                console.warn(\"Copy to clipboard failed.\", ex);\r\n                return false;\r\n            } finally {\r\n                document.body.removeChild(textarea);\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n\r\n    static async readFromClipboard(): Promise<string | undefined> {\r\n        if (navigator.clipboard && window.isSecureContext) {\r\n            // @ts-ignore\r\n            const permission = await navigator.permissions.query({ name: \"clipboard-read\" });\r\n            if (permission.state === \"granted\" || permission.state === \"prompt\") {\r\n                return await navigator.clipboard.readText();\r\n            } else {\r\n                ModalDialog.error({\r\n                    mode: ModalDialogMode.OK,\r\n                    title: i18n(\"Error reading data from clipboard\"),\r\n                    content: i18n(\"Clipboard not permitted\")\r\n                })\r\n            }\r\n        } else {\r\n            ModalDialog.error({\r\n                mode: ModalDialogMode.OK,\r\n                title: i18n(\"Error reading data from clipboard\"),\r\n                content: i18n(\"Secure context not available\")\r\n            })\r\n        }\r\n        return undefined;\r\n    }\r\n}"]}

package/components/codemirror/SyntaxHighlighter.d.ts

@@ -1,21 +1,21 @@
-import React from 'react';
-import 'codemirror/addon/runmode/runmode';
-import 'codemirror/mode/meta';
-interface SyntaxHighlighterProps {
-    className?: string;
-    theme?: string;
-    inline?: boolean;
-    mode: string;
-    prefix?: string;
-    value: string;
-    tooltip?: boolean;
-}
-export default class SyntaxHighlighter extends React.Component<SyntaxHighlighterProps> {
-    static defaultProps: {
-        className: string;
-        prefix: string;
-    };
-    constructor(props: Readonly<SyntaxHighlighterProps>);
-    render(): JSX.Element;
-}
-export {};
+import React from 'react';
+import 'codemirror/addon/runmode/runmode';
+import 'codemirror/mode/meta';
+interface SyntaxHighlighterProps {
+    className?: string;
+    theme?: string;
+    inline?: boolean;
+    mode: string;
+    prefix?: string;
+    value: string;
+    tooltip?: boolean;
+}
+export default class SyntaxHighlighter extends React.Component<SyntaxHighlighterProps> {
+    static defaultProps: {
+        className: string;
+        prefix: string;
+    };
+    constructor(props: Readonly<SyntaxHighlighterProps>);
+    render(): React.JSX.Element;
+}
+export {};

package/components/codemirror/SyntaxHighlighter.js

@@ -1,45 +1,46 @@
-import React from 'react';
-import CodeMirror from 'codemirror';
-import 'codemirror/addon/runmode/runmode';
-import 'codemirror/mode/meta';
-export default class SyntaxHighlighter extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const { inline, value, mode, className, prefix, theme, tooltip } = this.props;
-        const elements = [];
-        let index = 0;
-        let lastStyle = null;
-        let tokenBuf = '';
-        let trimmedValue = value;
-        if (tooltip && value.length > 100) {
-            trimmedValue = value.substring(0, 100) + " ...";
-        }
-        CodeMirror.runMode(trimmedValue, mode, (token, style) => {
-            if (lastStyle === style) {
-                tokenBuf += token;
-                lastStyle = style;
-            }
-            else {
-                if (tokenBuf) {
-                    elements.push(React.createElement("span", { className: lastStyle ? prefix + lastStyle : '', key: ++index }, tokenBuf));
-                }
-                tokenBuf = token;
-                lastStyle = style;
-            }
-        });
-        elements.push(React.createElement("span", { className: lastStyle ? prefix + lastStyle : '', key: ++index }, tokenBuf));
-        let tooltipText = undefined;
-        if (tooltip && trimmedValue !== value) {
-            tooltipText = value;
-        }
-        const code = (React.createElement("code", { title: tooltipText, className: inline ? `inline ${prefix}s-${theme}` : '' }, elements));
-        return inline ? (code) : (React.createElement("pre", { className: `${className} ${prefix}s-${theme}` }, code));
-    }
-}
-SyntaxHighlighter.defaultProps = {
-    className: '',
-    prefix: 'cm-'
-};
+import React from 'react';
+import CodeMirror from 'codemirror';
+import 'codemirror/addon/runmode/runmode';
+import 'codemirror/mode/meta';
+class SyntaxHighlighter extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const { inline, value, mode, className, prefix, theme, tooltip } = this.props;
+        const elements = [];
+        let index = 0;
+        let lastStyle = null;
+        let tokenBuf = '';
+        let trimmedValue = value;
+        if (tooltip && value.length > 100) {
+            trimmedValue = value.substring(0, 100) + " ...";
+        }
+        CodeMirror.runMode(trimmedValue, mode, (token, style) => {
+            if (lastStyle === style) {
+                tokenBuf += token;
+                lastStyle = style;
+            }
+            else {
+                if (tokenBuf) {
+                    elements.push(React.createElement("span", { className: lastStyle ? prefix + lastStyle : '', key: ++index }, tokenBuf));
+                }
+                tokenBuf = token;
+                lastStyle = style;
+            }
+        });
+        elements.push(React.createElement("span", { className: lastStyle ? prefix + lastStyle : '', key: ++index }, tokenBuf));
+        let tooltipText = undefined;
+        if (tooltip && trimmedValue !== value) {
+            tooltipText = value;
+        }
+        const code = (React.createElement("code", { title: tooltipText, className: inline ? `inline ${prefix}s-${theme}` : '' }, elements));
+        return inline ? (code) : (React.createElement("pre", { className: `${className} ${prefix}s-${theme}` }, code));
+    }
+}
+SyntaxHighlighter.defaultProps = {
+    className: '',
+    prefix: 'cm-'
+};
+export default SyntaxHighlighter;
 //# sourceMappingURL=SyntaxHighlighter.js.map

package/components/codemirror/SyntaxHighlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SyntaxHighlighter.js","sourceRoot":"","sources":["../../../../components/codemirror/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,kCAAkC,CAAA;AACzC,OAAO,sBAAsB,CAAA;AAa7B,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAAiC;IAMlF,YAAY,KAAuC;QAC/C,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,MAAM,EAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QAC3E,MAAM,QAAQ,GAAsB,EAAE,CAAA;QACtC,IAAI,KAAK,GAAG,CAAC,CAAA;QACb,IAAI,SAAS,GAA8B,IAAI,CAAA;QAC/C,IAAI,QAAQ,GAAG,EAAE,CAAA;QACjB,IAAI,YAAY,GAAG,KAAK,CAAC;QACzB,IAAI,OAAO,IAAI,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE;YAC/B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC;SACnD;QACD,UAAU,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACpD,IAAI,SAAS,KAAK,KAAK,EAAE;gBACrB,QAAQ,IAAI,KAAK,CAAA;gBACjB,SAAS,GAAG,KAAK,CAAA;aACpB;iBAAM;gBACH,IAAI,QAAQ,EAAE;oBACV,QAAQ,CAAC,IAAI,CAAC,8BAAM,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,KAAK,IAAG,QAAQ,CAAQ,CAAC,CAAC;iBACxG;gBACD,QAAQ,GAAG,KAAK,CAAA;gBAChB,SAAS,GAAG,KAAK,CAAA;aACpB;QACL,CAAC,CAAC,CAAA;QACF,QAAQ,CAAC,IAAI,CAAC,8BAAM,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,KAAK,IAAG,QAAQ,CAAQ,CAAC,CAAC;QAErG,IAAI,WAAW,GAAuB,SAAS,CAAC;QAChD,IAAG,OAAO,IAAI,YAAY,KAAK,KAAK,EAAE;YAClC,WAAW,GAAG,KAAK,CAAC;SACvB;QACD,MAAM,IAAI,GAAG,CAAC,8BAAM,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,UAAU,MAAM,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAG,QAAQ,CAAQ,CAAC,CAAC;QAClH,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,GAAG,SAAS,IAAI,MAAM,KAAK,KAAK,EAAE,IAAG,IAAI,CAAO,CAAC,CAAC;IAChG,CAAC;;AAvCM,8BAAY,GAAG;IAClB,SAAS,EAAE,EAAE;IACb,MAAM,EAAE,KAAK;CAChB,CAAA","sourcesContent":["import React from 'react'\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/runmode/runmode'\nimport 'codemirror/mode/meta'\n\ninterface SyntaxHighlighterProps {\n    // codeMirror: typeof CodeMirror\n    className?: string\n    theme?: string\n    inline?: boolean\n    mode: string\n    prefix?: string\n    value: string\n    tooltip?:boolean\n}\n\nexport default class SyntaxHighlighter extends React.Component<SyntaxHighlighterProps> {\n    static defaultProps = {\n        className: '',\n        prefix: 'cm-'\n    }\n\n    constructor(props: Readonly<SyntaxHighlighterProps>) {\n        super(props);\n    }\n\n    render() {\n        const {inline, value, mode, className, prefix, theme, tooltip} = this.props\n        const elements: React.ReactNode[] = []\n        let index = 0\n        let lastStyle: string | null | undefined = null\n        let tokenBuf = ''\n        let trimmedValue = value;\n        if( tooltip && value.length > 100) {\n            trimmedValue = value.substring(0, 100) + \" ...\";\n        }\n        CodeMirror.runMode(trimmedValue, mode, (token, style) => {\n            if (lastStyle === style) {\n                tokenBuf += token\n                lastStyle = style\n            } else {\n                if (tokenBuf) {\n                    elements.push(<span className={lastStyle ? prefix + lastStyle : ''} key={++index}>{tokenBuf}</span>);\n                }\n                tokenBuf = token\n                lastStyle = style\n            }\n        })\n        elements.push(<span className={lastStyle ? prefix + lastStyle : ''} key={++index}>{tokenBuf}</span>);\n\n        let tooltipText: undefined | string = undefined;\n        if(tooltip && trimmedValue !== value) {\n            tooltipText = value;//.replace(\"\\t\",\"&#009;\").replace(\"\\n\",\"&#013;&#010;\");\n        }\n        const code = (<code title={tooltipText} className={inline ? `inline ${prefix}s-${theme}` : ''}>{elements}</code>);\n        return inline ? (code) : (<pre className={`${className} ${prefix}s-${theme}`}>{code}</pre>);\n    }\n}"]}
+{"version":3,"file":"SyntaxHighlighter.js","sourceRoot":"","sources":["../../../../components/codemirror/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,kCAAkC,CAAA;AACzC,OAAO,sBAAsB,CAAA;AAa7B,MAAqB,iBAAkB,SAAQ,KAAK,CAAC,SAAiC;IAMlF,YAAY,KAAuC;QAC/C,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,MAAM,EAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QAC3E,MAAM,QAAQ,GAAsB,EAAE,CAAA;QACtC,IAAI,KAAK,GAAG,CAAC,CAAA;QACb,IAAI,SAAS,GAA8B,IAAI,CAAA;QAC/C,IAAI,QAAQ,GAAG,EAAE,CAAA;QACjB,IAAI,YAAY,GAAG,KAAK,CAAC;QACzB,IAAI,OAAO,IAAI,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC;YAChC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC;QACpD,CAAC;QACD,UAAU,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACpD,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;gBACtB,QAAQ,IAAI,KAAK,CAAA;gBACjB,SAAS,GAAG,KAAK,CAAA;YACrB,CAAC;iBAAM,CAAC;gBACJ,IAAI,QAAQ,EAAE,CAAC;oBACX,QAAQ,CAAC,IAAI,CAAC,8BAAM,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,KAAK,IAAG,QAAQ,CAAQ,CAAC,CAAC;gBACzG,CAAC;gBACD,QAAQ,GAAG,KAAK,CAAA;gBAChB,SAAS,GAAG,KAAK,CAAA;YACrB,CAAC;QACL,CAAC,CAAC,CAAA;QACF,QAAQ,CAAC,IAAI,CAAC,8BAAM,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,KAAK,IAAG,QAAQ,CAAQ,CAAC,CAAC;QAErG,IAAI,WAAW,GAAuB,SAAS,CAAC;QAChD,IAAG,OAAO,IAAI,YAAY,KAAK,KAAK,EAAE,CAAC;YACnC,WAAW,GAAG,KAAK,CAAC;QACxB,CAAC;QACD,MAAM,IAAI,GAAG,CAAC,8BAAM,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,UAAU,MAAM,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAG,QAAQ,CAAQ,CAAC,CAAC;QAClH,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,GAAG,SAAS,IAAI,MAAM,KAAK,KAAK,EAAE,IAAG,IAAI,CAAO,CAAC,CAAC;IAChG,CAAC;;AAvCM,8BAAY,GAAG;IAClB,SAAS,EAAE,EAAE;IACb,MAAM,EAAE,KAAK;CAChB,CAAA;eAJgB,iBAAiB","sourcesContent":["import React from 'react'\nimport CodeMirror from 'codemirror';\nimport 'codemirror/addon/runmode/runmode'\nimport 'codemirror/mode/meta'\n\ninterface SyntaxHighlighterProps {\n    // codeMirror: typeof CodeMirror\n    className?: string\n    theme?: string\n    inline?: boolean\n    mode: string\n    prefix?: string\n    value: string\n    tooltip?:boolean\n}\n\nexport default class SyntaxHighlighter extends React.Component<SyntaxHighlighterProps> {\n    static defaultProps = {\n        className: '',\n        prefix: 'cm-'\n    }\n\n    constructor(props: Readonly<SyntaxHighlighterProps>) {\n        super(props);\n    }\n\n    render() {\n        const {inline, value, mode, className, prefix, theme, tooltip} = this.props\n        const elements: React.ReactNode[] = []\n        let index = 0\n        let lastStyle: string | null | undefined = null\n        let tokenBuf = ''\n        let trimmedValue = value;\n        if( tooltip && value.length > 100) {\n            trimmedValue = value.substring(0, 100) + \" ...\";\n        }\n        CodeMirror.runMode(trimmedValue, mode, (token, style) => {\n            if (lastStyle === style) {\n                tokenBuf += token\n                lastStyle = style\n            } else {\n                if (tokenBuf) {\n                    elements.push(<span className={lastStyle ? prefix + lastStyle : ''} key={++index}>{tokenBuf}</span>);\n                }\n                tokenBuf = token\n                lastStyle = style\n            }\n        })\n        elements.push(<span className={lastStyle ? prefix + lastStyle : ''} key={++index}>{tokenBuf}</span>);\n\n        let tooltipText: undefined | string = undefined;\n        if(tooltip && trimmedValue !== value) {\n            tooltipText = value;//.replace(\"\\t\",\"&#009;\").replace(\"\\n\",\"&#013;&#010;\");\n        }\n        const code = (<code title={tooltipText} className={inline ? `inline ${prefix}s-${theme}` : ''}>{elements}</code>);\n        return inline ? (code) : (<pre className={`${className} ${prefix}s-${theme}`}>{code}</pre>);\n    }\n}"]}

package/components/collapse/expandable.d.ts

@@ -1,12 +1,13 @@
-import React from "react";
-interface ExpandableProps {
-    extraContent?: React.ReactNode;
-    expanded?: boolean;
-    compact?: boolean;
-    onExpand?(expanded: boolean): void;
-}
-export default class Expandable extends React.Component<ExpandableProps> {
-    constructor(props: Readonly<ExpandableProps>);
-    render(): React.ReactNode;
-}
-export {};
+import React from "react";
+interface ExpandableProps {
+    extraContent?: React.ReactNode;
+    expanded?: boolean;
+    compact?: boolean;
+    children?: React.ReactNode;
+    onExpand?(expanded: boolean): void;
+}
+export default class Expandable extends React.Component<ExpandableProps> {
+    constructor(props: Readonly<ExpandableProps>);
+    render(): React.ReactNode;
+}
+export {};

package/components/collapse/expandable.js

@@ -1,21 +1,21 @@
-import React from "react";
-import { Divider } from "antd";
-import { DoubleRightOutlined } from "@ant-design/icons";
-import { Collapse } from 'react-collapse';
-export default class Expandable extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        return (React.createElement("div", { style: { transition: "height .5s" } },
-            React.createElement("header", null, this.props.children),
-            React.createElement(Collapse, { isOpened: !!this.props.expanded },
-                React.createElement("section", { style: { marginTop: 5 } }, this.props.extraContent)),
-            React.createElement(Divider, { style: { margin: this.props.compact ? "8px 0px" : "20px 0px" }, className: this.props.extraContent ? "stronger-divider-with-text" : "stronger-divider", plain: true }, this.props.extraContent && React.createElement(DoubleRightOutlined, { rotate: this.props.expanded ? -90 : 90, onClick: () => {
-                    var _a, _b;
-                    const expanded = !this.props.expanded;
-                    (_b = (_a = this.props).onExpand) === null || _b === void 0 ? void 0 : _b.call(_a, expanded);
-                } }))));
-    }
-}
+import React from "react";
+import { Divider } from "antd";
+import { DoubleRightOutlined } from "@ant-design/icons";
+import { Collapse } from 'react-collapse';
+export default class Expandable extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement("div", { style: { transition: "height .5s" } },
+            React.createElement("header", null, this.props.children),
+            React.createElement(Collapse, { isOpened: !!this.props.expanded },
+                React.createElement("section", { style: { marginTop: 5 } }, this.props.extraContent)),
+            React.createElement(Divider, { style: { margin: this.props.compact ? "8px 0px" : "20px 0px" }, className: this.props.extraContent ? "stronger-divider-with-text" : "stronger-divider", plain: true }, this.props.extraContent && React.createElement(DoubleRightOutlined, { rotate: this.props.expanded ? -90 : 90, onClick: () => {
+                    var _a, _b;
+                    const expanded = !this.props.expanded;
+                    (_b = (_a = this.props).onExpand) === null || _b === void 0 ? void 0 : _b.call(_a, expanded);
+                } }))));
+    }
+}
 //# sourceMappingURL=expandable.js.map

package/components/collapse/expandable.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable.js","sourceRoot":"","sources":["../../../../components/collapse/expandable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,OAAO,EAAC,MAAM,MAAM,CAAC;AAC7B,OAAO,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAUxC,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAA0B;IACpE,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,OAAO,CACH,6BAAK,KAAK,EAAE,EAAC,UAAU,EAAE,YAAY,EAAC;YAClC,oCACK,IAAI,CAAC,KAAK,CAAC,QAAQ,CACf;YACT,oBAAC,QAAQ,IAAC,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;gBACrC,iCAAS,KAAK,EAAE,EAAC,SAAS,EAAE,CAAC,EAAC,IACzB,IAAI,CAAC,KAAK,CAAC,YAAY,CAClB,CACH;YACX,oBAAC,OAAO,IACJ,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAC,EAC5D,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,kBAAkB,EACtF,KAAK,UAEJ,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,oBAAC,mBAAmB,IAC5C,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACtC,OAAO,EAAE,GAAG,EAAE;;oBACV,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;oBACtC,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,QAAQ,mDAAG,QAAQ,CAAC,CAAC;gBACpC,CAAC,GACH,CACI,CACR,CACT,CAAA;IACL,CAAC;CAEJ","sourcesContent":["import React from \"react\";\nimport {Divider} from \"antd\";\nimport {DoubleRightOutlined} from \"@ant-design/icons\";\nimport {Collapse} from 'react-collapse';\n\ninterface ExpandableProps {\n    extraContent?: React.ReactNode\n    expanded?: boolean\n    compact?: boolean\n\n    onExpand?(expanded: boolean): void\n}\n\nexport default class Expandable extends React.Component<ExpandableProps> {\n    constructor(props: Readonly<ExpandableProps>) {\n        super(props);\n    }\n\n    render(): React.ReactNode {\n        return (\n            <div style={{transition: \"height .5s\"}}>\n                <header>\n                    {this.props.children}\n                </header>\n                <Collapse isOpened={!!this.props.expanded}>\n                    <section style={{marginTop: 5}}>\n                        {this.props.extraContent}\n                    </section>\n                </Collapse>\n                <Divider\n                    style={{margin: this.props.compact ? \"8px 0px\" : \"20px 0px\"}}\n                    className={this.props.extraContent ? \"stronger-divider-with-text\" : \"stronger-divider\"}\n                    plain\n                >\n                    {this.props.extraContent && <DoubleRightOutlined\n                        rotate={this.props.expanded ? -90 : 90}\n                        onClick={() => {\n                            const expanded = !this.props.expanded;\n                            this.props.onExpand?.(expanded);\n                        }}\n                    />}\n                </Divider>\n            </div>\n        )\n    }\n\n}"]}
+{"version":3,"file":"expandable.js","sourceRoot":"","sources":["../../../../components/collapse/expandable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,OAAO,EAAC,MAAM,MAAM,CAAC;AAC7B,OAAO,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAWxC,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAA0B;IACpE,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,OAAO,CACH,6BAAK,KAAK,EAAE,EAAC,UAAU,EAAE,YAAY,EAAC;YAClC,oCACK,IAAI,CAAC,KAAK,CAAC,QAAQ,CACf;YACT,oBAAC,QAAQ,IAAC,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;gBACrC,iCAAS,KAAK,EAAE,EAAC,SAAS,EAAE,CAAC,EAAC,IACzB,IAAI,CAAC,KAAK,CAAC,YAAY,CAClB,CACH;YACX,oBAAC,OAAO,IACJ,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAC,EAC5D,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,kBAAkB,EACtF,KAAK,UAEJ,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,oBAAC,mBAAmB,IAC5C,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACtC,OAAO,EAAE,GAAG,EAAE;;oBACV,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;oBACtC,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,QAAQ,mDAAG,QAAQ,CAAC,CAAC;gBACpC,CAAC,GACH,CACI,CACR,CACT,CAAA;IACL,CAAC;CAEJ","sourcesContent":["import React from \"react\";\r\nimport {Divider} from \"antd\";\r\nimport {DoubleRightOutlined} from \"@ant-design/icons\";\r\nimport {Collapse} from 'react-collapse';\r\n\r\ninterface ExpandableProps {\r\n    extraContent?: React.ReactNode\r\n    expanded?: boolean\r\n    compact?: boolean\r\n    children?: React.ReactNode;\r\n\r\n    onExpand?(expanded: boolean): void\r\n}\r\n\r\nexport default class Expandable extends React.Component<ExpandableProps> {\r\n    constructor(props: Readonly<ExpandableProps>) {\r\n        super(props);\r\n    }\r\n\r\n    render(): React.ReactNode {\r\n        return (\r\n            <div style={{transition: \"height .5s\"}}>\r\n                <header>\r\n                    {this.props.children}\r\n                </header>\r\n                <Collapse isOpened={!!this.props.expanded}>\r\n                    <section style={{marginTop: 5}}>\r\n                        {this.props.extraContent}\r\n                    </section>\r\n                </Collapse>\r\n                <Divider\r\n                    style={{margin: this.props.compact ? \"8px 0px\" : \"20px 0px\"}}\r\n                    className={this.props.extraContent ? \"stronger-divider-with-text\" : \"stronger-divider\"}\r\n                    plain\r\n                >\r\n                    {this.props.extraContent && <DoubleRightOutlined\r\n                        rotate={this.props.expanded ? -90 : 90}\r\n                        onClick={() => {\r\n                            const expanded = !this.props.expanded;\r\n                            this.props.onExpand?.(expanded);\r\n                        }}\r\n                    />}\r\n                </Divider>\r\n            </div>\r\n        )\r\n    }\r\n\r\n}"]}

package/components/color/colorPicker.d.ts

@@ -1,20 +1,20 @@
-import React from "react";
-import { SketchPickerProps } from "react-color/lib/components/sketch/Sketch";
-import { TooltipPlacement } from "antd/lib/tooltip";
-interface ColorPickerProps extends SketchPickerProps {
-    badgeIcon?: React.ReactNode;
-    title: string;
-    placement?: TooltipPlacement;
-    disabled?: boolean;
-    transparentColorAllowed?: boolean;
-    onResetColor(): void;
-}
-interface ColorPickerState {
-    popupVisible: boolean;
-}
-export default class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {
-    constructor(props: Readonly<ColorPickerProps>);
-    private getColorString;
-    render(): JSX.Element;
-}
-export {};
+import React from "react";
+import { SketchPickerProps } from "react-color/lib/components/sketch/Sketch";
+import { TooltipPlacement } from "antd/lib/tooltip";
+interface ColorPickerProps extends SketchPickerProps {
+    badgeIcon?: React.ReactNode;
+    title: string;
+    placement?: TooltipPlacement;
+    disabled?: boolean;
+    transparentColorAllowed?: boolean;
+    onResetColor(): void;
+}
+interface ColorPickerState {
+    popupVisible: boolean;
+}
+export default class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {
+    constructor(props: Readonly<ColorPickerProps>);
+    private getColorString;
+    render(): React.JSX.Element;
+}
+export {};

package/components/color/colorPicker.js

@@ -1,54 +1,54 @@
-import React from "react";
-import i18n from "d2core/i18n/i18n";
-import { Badge, Button, Popover } from "antd";
-import { CloseOutlined, StopOutlined } from "@ant-design/icons";
-import { SketchPicker } from "react-color";
-const transparentBackgroundStyle = "url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==\") left center";
-const presetColors = [
-    "#fff1f0", "#ffccc7", "#ffa39e", "#ff7875", "#ff4d4f", "#f5222d", "#cf1322", "#a8071a", "#820014", "#5c0011",
-    "#fff2e8", "#ffd8bf", "#ffbb96", "#ff9c6e", "#ff7a45", "#fa541c", "#d4380d", "#ad2102", "#871400", "#610b00",
-    "#fff7e6", "#ffe7ba", "#ffd591", "#ffc069", "#ffa940", "#fa8c16", "#d46b08", "#ad4e00", "#873800", "#612500",
-    "#feffe6", "#ffffb8", "#fffb8f", "#fff566", "#ffec3d", "#fadb14", "#d4b106", "#ad8b00", "#876800", "#614700",
-    "#f6ffed", "#d9f7be", "#b7eb8f", "#95de64", "#73d13d", "#52c41a", "#389e0d", "#237804", "#135200", "#092b00",
-    "#e6fffb", "#b5f5ec", "#87e8de", "#5cdbd3", "#36cfc9", "#13c2c2", "#08979c", "#006d75", "#00474f", "#002329",
-    "#e6f7ff", "#bae7ff", "#91d5ff", "#69c0ff", "#40a9ff", "#1890ff", "#096dd9", "#0050b3", "#003a8c", "#002766",
-    "#ffffff", "#fafafa", "#f5f5f5", "#e8e8e8", "#d9d9d9", "#bfbfbf", "#8c8c8c", "#595959", "#262626", "#000000",
-];
-export default class ColorPicker extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            popupVisible: false,
-        };
-    }
-    getColorString(color) {
-        if (typeof color === "object") {
-            return `rgba(${color.r},${color.g},${color.b},${color.a})`;
-        }
-        else {
-            return color;
-        }
-    }
-    render() {
-        var _a;
-        return (React.createElement(Popover, { placement: this.props.placement, trigger: this.props.disabled ? "" : "click", open: this.state.popupVisible, onOpenChange: (visible) => {
-                this.setState({ popupVisible: visible });
-            }, title: React.createElement("div", null,
-                this.props.title,
-                React.createElement(Button, { style: { float: "right", paddingLeft: 8, border: "none" }, size: "small", title: i18n("Close"), onClick: () => {
-                        this.setState({ popupVisible: false });
-                    } },
-                    React.createElement(CloseOutlined, null)),
-                React.createElement(Button, { style: { background: transparentBackgroundStyle, float: "right" }, size: "small", title: i18n("Set No Color"), onClick: () => {
-                        this.props.onResetColor();
-                        this.setState({ popupVisible: false });
-                    } },
-                    React.createElement(StopOutlined, { style: { color: "rgba(0,0,0,0.85)" } }))), content: React.createElement(SketchPicker, { color: this.props.color, width: "250px", presetColors: this.props.transparentColorAllowed ? [...presetColors, "transparent"] : presetColors, onChange: this.props.onChange, onChangeComplete: this.props.onChangeComplete }) },
-            React.createElement(Badge, { className: this.props.className, count: this.props.badgeIcon ?
-                    React.createElement("span", { className: "ant-badge-count", style: { color: "#1890ff", background: "#e6f7ff", borderColor: "#91d5ff" } }, this.props.badgeIcon)
-                    : undefined },
-                React.createElement(Button, { style: { background: (_a = this.getColorString(this.props.color)) !== null && _a !== void 0 ? _a : transparentBackgroundStyle }, disabled: this.props.disabled, title: this.props.title },
-                    React.createElement("span", { role: "img", className: "anticon" })))));
-    }
-}
+import React from "react";
+import i18n from "d2core/i18n/i18n";
+import { Badge, Button, Popover } from "antd";
+import { CloseOutlined, StopOutlined } from "@ant-design/icons";
+import { SketchPicker } from "react-color";
+const transparentBackgroundStyle = "url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==\") left center";
+const presetColors = [
+    "#fff1f0", "#ffccc7", "#ffa39e", "#ff7875", "#ff4d4f", "#f5222d", "#cf1322", "#a8071a", "#820014", "#5c0011",
+    "#fff2e8", "#ffd8bf", "#ffbb96", "#ff9c6e", "#ff7a45", "#fa541c", "#d4380d", "#ad2102", "#871400", "#610b00",
+    "#fff7e6", "#ffe7ba", "#ffd591", "#ffc069", "#ffa940", "#fa8c16", "#d46b08", "#ad4e00", "#873800", "#612500",
+    "#feffe6", "#ffffb8", "#fffb8f", "#fff566", "#ffec3d", "#fadb14", "#d4b106", "#ad8b00", "#876800", "#614700",
+    "#f6ffed", "#d9f7be", "#b7eb8f", "#95de64", "#73d13d", "#52c41a", "#389e0d", "#237804", "#135200", "#092b00",
+    "#e6fffb", "#b5f5ec", "#87e8de", "#5cdbd3", "#36cfc9", "#13c2c2", "#08979c", "#006d75", "#00474f", "#002329",
+    "#e6f7ff", "#bae7ff", "#91d5ff", "#69c0ff", "#40a9ff", "#1890ff", "#096dd9", "#0050b3", "#003a8c", "#002766",
+    "#ffffff", "#fafafa", "#f5f5f5", "#e8e8e8", "#d9d9d9", "#bfbfbf", "#8c8c8c", "#595959", "#262626", "#000000",
+];
+export default class ColorPicker extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            popupVisible: false,
+        };
+    }
+    getColorString(color) {
+        if (typeof color === "object") {
+            return `rgba(${color.r},${color.g},${color.b},${color.a})`;
+        }
+        else {
+            return color;
+        }
+    }
+    render() {
+        var _a;
+        return (React.createElement(Popover, { placement: this.props.placement, trigger: this.props.disabled ? [] : "click", open: this.state.popupVisible, onOpenChange: (visible) => {
+                this.setState({ popupVisible: visible });
+            }, title: React.createElement("div", null,
+                this.props.title,
+                React.createElement(Button, { style: { float: "right", paddingLeft: 8, border: "none" }, size: "small", title: i18n("Close"), onClick: () => {
+                        this.setState({ popupVisible: false });
+                    } },
+                    React.createElement(CloseOutlined, null)),
+                React.createElement(Button, { style: { background: transparentBackgroundStyle, float: "right" }, size: "small", title: i18n("Set No Color"), onClick: () => {
+                        this.props.onResetColor();
+                        this.setState({ popupVisible: false });
+                    } },
+                    React.createElement(StopOutlined, { style: { color: "rgba(0,0,0,0.85)" } }))), content: React.createElement(SketchPicker, { color: this.props.color, width: "250px", presetColors: this.props.transparentColorAllowed ? [...presetColors, "transparent"] : presetColors, onChange: this.props.onChange, onChangeComplete: this.props.onChangeComplete }) },
+            React.createElement(Badge, { className: this.props.className, count: this.props.badgeIcon ?
+                    React.createElement("span", { className: "ant-badge-count", style: { color: "#1890ff", background: "#e6f7ff", borderColor: "#91d5ff" } }, this.props.badgeIcon)
+                    : undefined },
+                React.createElement(Button, { style: { background: (_a = this.getColorString(this.props.color)) !== null && _a !== void 0 ? _a : transparentBackgroundStyle }, disabled: this.props.disabled, title: this.props.title },
+                    React.createElement("span", { role: "img", className: "anticon" })))));
+    }
+}
 //# sourceMappingURL=colorPicker.js.map

package/components/color/colorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../components/color/colorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport i18n from \"d2core/i18n/i18n\";\nimport {Badge, Button, Popover} from \"antd\";\nimport {CloseOutlined, StopOutlined} from \"@ant-design/icons\";\nimport {RGBColor, SketchPicker} from \"react-color\";\nimport {SketchPickerProps} from \"react-color/lib/components/sketch/Sketch\";\nimport {TooltipPlacement} from \"antd/lib/tooltip\";\n\nconst transparentBackgroundStyle = \"url(\\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==\\\") left center\"\nconst presetColors = [\n    \"#fff1f0\", \"#ffccc7\", \"#ffa39e\", \"#ff7875\", \"#ff4d4f\", \"#f5222d\", \"#cf1322\", \"#a8071a\", \"#820014\", \"#5c0011\",\n    \"#fff2e8\", \"#ffd8bf\", \"#ffbb96\", \"#ff9c6e\", \"#ff7a45\", \"#fa541c\", \"#d4380d\", \"#ad2102\", \"#871400\", \"#610b00\",\n    \"#fff7e6\", \"#ffe7ba\", \"#ffd591\", \"#ffc069\", \"#ffa940\", \"#fa8c16\", \"#d46b08\", \"#ad4e00\", \"#873800\", \"#612500\",\n    \"#feffe6\", \"#ffffb8\", \"#fffb8f\", \"#fff566\", \"#ffec3d\", \"#fadb14\", \"#d4b106\", \"#ad8b00\", \"#876800\", \"#614700\",\n    \"#f6ffed\", \"#d9f7be\", \"#b7eb8f\", \"#95de64\", \"#73d13d\", \"#52c41a\", \"#389e0d\", \"#237804\", \"#135200\", \"#092b00\",\n    \"#e6fffb\", \"#b5f5ec\", \"#87e8de\", \"#5cdbd3\", \"#36cfc9\", \"#13c2c2\", \"#08979c\", \"#006d75\", \"#00474f\", \"#002329\",\n    \"#e6f7ff\", \"#bae7ff\", \"#91d5ff\", \"#69c0ff\", \"#40a9ff\", \"#1890ff\", \"#096dd9\", \"#0050b3\", \"#003a8c\", \"#002766\",\n    \"#ffffff\", \"#fafafa\", \"#f5f5f5\", \"#e8e8e8\", \"#d9d9d9\", \"#bfbfbf\", \"#8c8c8c\", \"#595959\", \"#262626\", \"#000000\",\n];\n\ninterface ColorPickerProps extends SketchPickerProps {\n    badgeIcon?: React.ReactNode\n    title: string\n    placement?: TooltipPlacement\n    disabled?: boolean\n    transparentColorAllowed?: boolean\n\n    onResetColor(): void\n}\n\ninterface ColorPickerState {\n    popupVisible: boolean\n}\n\nexport default class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {\n    constructor(props: Readonly<ColorPickerProps>) {\n        super(props);\n\n        this.state = {\n            popupVisible: false,\n        }\n    }\n\n    private getColorString(color: RGBColor | string | undefined): string | undefined {\n        if (typeof color === \"object\") {\n            return `rgba(${color.r},${color.g},${color.b},${color.a})`;\n        } else {\n            return color;\n        }\n    }\n\n    render() {\n        return (\n            <Popover\n                placement={this.props.placement}\n                trigger={this.props.disabled ? \"\" : \"click\"}\n                open={this.state.popupVisible}\n                onOpenChange={(visible) => {\n                    this.setState({popupVisible: visible});\n                }}\n                title={\n                    <div>\n                        {this.props.title}\n                        <Button\n                            style={{float: \"right\", paddingLeft: 8, border: \"none\"}}\n                            size=\"small\"\n                            title={i18n(\"Close\")}\n                            onClick={() => {\n                                this.setState({popupVisible: false});\n                            }}\n                        >\n                            <CloseOutlined/>\n                        </Button>\n                        <Button\n                            style={{background: transparentBackgroundStyle, float: \"right\"}}\n                            size=\"small\"\n                            title={i18n(\"Set No Color\")}\n                            onClick={() => {\n                                this.props.onResetColor();\n                                this.setState({popupVisible: false});\n                            }}\n                        >\n                            <StopOutlined style={{color: \"rgba(0,0,0,0.85)\"}}/>\n                        </Button>\n                    </div>\n                }\n                content={\n                    <SketchPicker\n                        color={this.props.color}\n                        width={\"250px\"}\n                        presetColors={this.props.transparentColorAllowed ? [...presetColors, \"transparent\"] : presetColors}\n                        onChange={this.props.onChange}\n                        onChangeComplete={this.props.onChangeComplete}\n                    />\n                }\n            >\n                <Badge\n                    className={this.props.className}\n                    count={this.props.badgeIcon ?\n                        <span\n                            className=\"ant-badge-count\"\n                            style={{color: \"#1890ff\", background: \"#e6f7ff\", borderColor: \"#91d5ff\"}}\n                        >\n                                {this.props.badgeIcon}\n                            </span>\n                        : undefined\n                    }\n                >\n                    <Button\n                        style={{background: this.getColorString(this.props.color as RGBColor | string | undefined) ?? transparentBackgroundStyle}}\n                        disabled={this.props.disabled}\n                        title={this.props.title}\n                    >\n                        <span role=\"img\" className=\"anticon\"/>\n                    </Button>\n                </Badge>\n            </Popover>\n        );\n    }\n\n}"]}
+{"version":3,"file":"colorPicker.js","sourceRoot":"","sources":["../../../../components/color/colorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {Badge, Button, Popover} from \"antd\";\r\nimport {CloseOutlined, StopOutlined} from \"@ant-design/icons\";\r\nimport {RGBColor, SketchPicker} from \"react-color\";\r\nimport {SketchPickerProps} from \"react-color/lib/components/sketch/Sketch\";\r\nimport {TooltipPlacement} from \"antd/lib/tooltip\";\r\n\r\nconst transparentBackgroundStyle = \"url(\\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==\\\") left center\"\r\nconst presetColors = [\r\n    \"#fff1f0\", \"#ffccc7\", \"#ffa39e\", \"#ff7875\", \"#ff4d4f\", \"#f5222d\", \"#cf1322\", \"#a8071a\", \"#820014\", \"#5c0011\",\r\n    \"#fff2e8\", \"#ffd8bf\", \"#ffbb96\", \"#ff9c6e\", \"#ff7a45\", \"#fa541c\", \"#d4380d\", \"#ad2102\", \"#871400\", \"#610b00\",\r\n    \"#fff7e6\", \"#ffe7ba\", \"#ffd591\", \"#ffc069\", \"#ffa940\", \"#fa8c16\", \"#d46b08\", \"#ad4e00\", \"#873800\", \"#612500\",\r\n    \"#feffe6\", \"#ffffb8\", \"#fffb8f\", \"#fff566\", \"#ffec3d\", \"#fadb14\", \"#d4b106\", \"#ad8b00\", \"#876800\", \"#614700\",\r\n    \"#f6ffed\", \"#d9f7be\", \"#b7eb8f\", \"#95de64\", \"#73d13d\", \"#52c41a\", \"#389e0d\", \"#237804\", \"#135200\", \"#092b00\",\r\n    \"#e6fffb\", \"#b5f5ec\", \"#87e8de\", \"#5cdbd3\", \"#36cfc9\", \"#13c2c2\", \"#08979c\", \"#006d75\", \"#00474f\", \"#002329\",\r\n    \"#e6f7ff\", \"#bae7ff\", \"#91d5ff\", \"#69c0ff\", \"#40a9ff\", \"#1890ff\", \"#096dd9\", \"#0050b3\", \"#003a8c\", \"#002766\",\r\n    \"#ffffff\", \"#fafafa\", \"#f5f5f5\", \"#e8e8e8\", \"#d9d9d9\", \"#bfbfbf\", \"#8c8c8c\", \"#595959\", \"#262626\", \"#000000\",\r\n];\r\n\r\ninterface ColorPickerProps extends SketchPickerProps {\r\n    badgeIcon?: React.ReactNode\r\n    title: string\r\n    placement?: TooltipPlacement\r\n    disabled?: boolean\r\n    transparentColorAllowed?: boolean\r\n\r\n    onResetColor(): void\r\n}\r\n\r\ninterface ColorPickerState {\r\n    popupVisible: boolean\r\n}\r\n\r\nexport default class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {\r\n    constructor(props: Readonly<ColorPickerProps>) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            popupVisible: false,\r\n        }\r\n    }\r\n\r\n    private getColorString(color: RGBColor | string | undefined): string | undefined {\r\n        if (typeof color === \"object\") {\r\n            return `rgba(${color.r},${color.g},${color.b},${color.a})`;\r\n        } else {\r\n            return color;\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Popover\r\n                placement={this.props.placement}\r\n                trigger={this.props.disabled ? [] : \"click\"}\r\n                open={this.state.popupVisible}\r\n                onOpenChange={(visible) => {\r\n                    this.setState({popupVisible: visible});\r\n                }}\r\n                title={\r\n                    <div>\r\n                        {this.props.title}\r\n                        <Button\r\n                            style={{float: \"right\", paddingLeft: 8, border: \"none\"}}\r\n                            size=\"small\"\r\n                            title={i18n(\"Close\")}\r\n                            onClick={() => {\r\n                                this.setState({popupVisible: false});\r\n                            }}\r\n                        >\r\n                            <CloseOutlined/>\r\n                        </Button>\r\n                        <Button\r\n                            style={{background: transparentBackgroundStyle, float: \"right\"}}\r\n                            size=\"small\"\r\n                            title={i18n(\"Set No Color\")}\r\n                            onClick={() => {\r\n                                this.props.onResetColor();\r\n                                this.setState({popupVisible: false});\r\n                            }}\r\n                        >\r\n                            <StopOutlined style={{color: \"rgba(0,0,0,0.85)\"}}/>\r\n                        </Button>\r\n                    </div>\r\n                }\r\n                content={\r\n                    <SketchPicker\r\n                        color={this.props.color}\r\n                        width={\"250px\"}\r\n                        presetColors={this.props.transparentColorAllowed ? [...presetColors, \"transparent\"] : presetColors}\r\n                        onChange={this.props.onChange}\r\n                        onChangeComplete={this.props.onChangeComplete}\r\n                    />\r\n                }\r\n            >\r\n                <Badge\r\n                    className={this.props.className}\r\n                    count={this.props.badgeIcon ?\r\n                        <span\r\n                            className=\"ant-badge-count\"\r\n                            style={{color: \"#1890ff\", background: \"#e6f7ff\", borderColor: \"#91d5ff\"}}\r\n                        >\r\n                                {this.props.badgeIcon}\r\n                            </span>\r\n                        : undefined\r\n                    }\r\n                >\r\n                    <Button\r\n                        style={{background: this.getColorString(this.props.color as RGBColor | string | undefined) ?? transparentBackgroundStyle}}\r\n                        disabled={this.props.disabled}\r\n                        title={this.props.title}\r\n                    >\r\n                        <span role=\"img\" className=\"anticon\"/>\r\n                    </Button>\r\n                </Badge>\r\n            </Popover>\r\n        );\r\n    }\r\n\r\n}"]}

package/components/color/colorSwatch.d.ts

@@ -1,12 +1,13 @@
-export function ColorSwatch({ hover, color, onClick, onSwatchHover, style, title, active, small }: {
-    hover: any;
-    color: any;
-    onClick: any;
-    onSwatchHover: any;
-    style: any;
-    title: any;
-    active: any;
-    small: any;
-}): JSX.Element;
-declare var _default: any;
-export default _default;
+export function ColorSwatch({ hover, color, onClick, onSwatchHover, style, title, active, small }: {
+    hover: any;
+    color: any;
+    onClick: any;
+    onSwatchHover: any;
+    style: any;
+    title: any;
+    active: any;
+    small: any;
+}): React.JSX.Element;
+declare const _default: any;
+export default _default;
+import React from 'react';