@bpmn-io/form-js-playground 0.6.1 → 0.7.2
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/assets/form-js-playground.css +190 -0
- package/dist/form-playground.umd.js +36921 -0
- package/dist/index.cjs +412 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.es.js +402 -0
- package/dist/index.es.js.map +1 -0
- package/karma.conf.js +1 -1
- package/package.json +7 -5
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,412 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var mitt = require('mitt');
|
|
6
|
+
var basicSetup = require('@codemirror/basic-setup');
|
|
7
|
+
var state = require('@codemirror/state');
|
|
8
|
+
var langJson = require('@codemirror/lang-json');
|
|
9
|
+
var preact = require('preact');
|
|
10
|
+
var hooks = require('preact/hooks');
|
|
11
|
+
var fileDrop = require('file-drops');
|
|
12
|
+
var download = require('downloadjs');
|
|
13
|
+
var formJs = require('@bpmn-io/form-js');
|
|
14
|
+
var jsxRuntime = require('preact/jsx-runtime');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
+
|
|
18
|
+
var mitt__default = /*#__PURE__*/_interopDefaultLegacy(mitt);
|
|
19
|
+
var fileDrop__default = /*#__PURE__*/_interopDefaultLegacy(fileDrop);
|
|
20
|
+
var download__default = /*#__PURE__*/_interopDefaultLegacy(download);
|
|
21
|
+
|
|
22
|
+
function JSONEditor(options = {}) {
|
|
23
|
+
const emitter = mitt__default['default']();
|
|
24
|
+
const {
|
|
25
|
+
readonly = false
|
|
26
|
+
} = options;
|
|
27
|
+
let language = new state.Compartment().of(langJson.json());
|
|
28
|
+
let tabSize = new state.Compartment().of(state.EditorState.tabSize.of(2));
|
|
29
|
+
|
|
30
|
+
function createState(doc, extensions = []) {
|
|
31
|
+
return state.EditorState.create({
|
|
32
|
+
doc,
|
|
33
|
+
extensions: [basicSetup.basicSetup, language, tabSize, ...extensions]
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function createView(readonly) {
|
|
38
|
+
const updateListener = basicSetup.EditorView.updateListener.of(update => {
|
|
39
|
+
if (update.docChanged) {
|
|
40
|
+
emitter.emit('changed', {
|
|
41
|
+
value: update.view.state.doc.toString()
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
const editable = basicSetup.EditorView.editable.of(!readonly);
|
|
46
|
+
const view = new basicSetup.EditorView({
|
|
47
|
+
state: createState('', [updateListener, editable])
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
view.setValue = function (value) {
|
|
51
|
+
this.setState(createState(value, [updateListener, editable]));
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
return view;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
const view = createView(readonly);
|
|
58
|
+
|
|
59
|
+
this.setValue = function (value) {
|
|
60
|
+
view.setValue(value);
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
this.getValue = function () {
|
|
64
|
+
return view.state.doc.toString();
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
this.on = emitter.on;
|
|
68
|
+
this.off = emitter.off;
|
|
69
|
+
|
|
70
|
+
this.attachTo = function (container) {
|
|
71
|
+
container.appendChild(view.dom);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
this.destroy = function () {
|
|
75
|
+
if (view.dom.parentNode) {
|
|
76
|
+
view.dom.parentNode.removeChild(view.dom);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
view.destroy();
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
function Modal(props) {
|
|
84
|
+
hooks.useEffect(() => {
|
|
85
|
+
function handleKey(event) {
|
|
86
|
+
if (event.key === 'Escape') {
|
|
87
|
+
event.stopPropagation();
|
|
88
|
+
props.onClose();
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
document.addEventListener('keydown', handleKey);
|
|
93
|
+
return () => {
|
|
94
|
+
document.removeEventListener('keydown', handleKey);
|
|
95
|
+
};
|
|
96
|
+
});
|
|
97
|
+
return jsxRuntime.jsxs("div", {
|
|
98
|
+
class: "fjs-pgl-modal",
|
|
99
|
+
children: [jsxRuntime.jsx("div", {
|
|
100
|
+
class: "fjs-pgl-modal-backdrop",
|
|
101
|
+
onClick: props.onClose
|
|
102
|
+
}), jsxRuntime.jsxs("div", {
|
|
103
|
+
class: "fjs-pgl-modal-content",
|
|
104
|
+
children: [jsxRuntime.jsx("h1", {
|
|
105
|
+
class: "fjs-pgl-modal-header",
|
|
106
|
+
children: props.name
|
|
107
|
+
}), jsxRuntime.jsx("div", {
|
|
108
|
+
class: "fjs-pgl-modal-body",
|
|
109
|
+
children: props.children
|
|
110
|
+
}), jsxRuntime.jsx("div", {
|
|
111
|
+
class: "fjs-pgl-modal-footer",
|
|
112
|
+
children: jsxRuntime.jsx("button", {
|
|
113
|
+
class: "fjs-pgl-button fjs-pgl-button-default",
|
|
114
|
+
onClick: props.onClose,
|
|
115
|
+
children: "Close"
|
|
116
|
+
})
|
|
117
|
+
})]
|
|
118
|
+
})]
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
function Section(props) {
|
|
123
|
+
const elements = Array.isArray(props.children) ? props.children : [props.children];
|
|
124
|
+
const {
|
|
125
|
+
headerItems,
|
|
126
|
+
children
|
|
127
|
+
} = elements.reduce((_, child) => {
|
|
128
|
+
const bucket = child.type === Section.HeaderItem ? _.headerItems : _.children;
|
|
129
|
+
bucket.push(child);
|
|
130
|
+
return _;
|
|
131
|
+
}, {
|
|
132
|
+
headerItems: [],
|
|
133
|
+
children: []
|
|
134
|
+
});
|
|
135
|
+
return jsxRuntime.jsxs("div", {
|
|
136
|
+
class: "fjs-pgl-section",
|
|
137
|
+
children: [jsxRuntime.jsxs("h1", {
|
|
138
|
+
class: "header",
|
|
139
|
+
children: [props.name, " ", headerItems.length ? jsxRuntime.jsx("span", {
|
|
140
|
+
class: "header-items",
|
|
141
|
+
children: headerItems
|
|
142
|
+
}) : null]
|
|
143
|
+
}), jsxRuntime.jsx("div", {
|
|
144
|
+
class: "body",
|
|
145
|
+
children: children
|
|
146
|
+
})]
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
Section.HeaderItem = function (props) {
|
|
151
|
+
return props.children;
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
function serializeValue(obj) {
|
|
155
|
+
return JSON.stringify(JSON.stringify(obj)).replace(/</g, '<').replace(/>/g, '>');
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
function EmbedModal(props) {
|
|
159
|
+
const schema = serializeValue(props.schema);
|
|
160
|
+
const data = serializeValue(props.data || {});
|
|
161
|
+
const fieldRef = hooks.useRef();
|
|
162
|
+
const snippet = `<!-- styles needed for rendering -->
|
|
163
|
+
<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/assets/form-js.css">
|
|
164
|
+
|
|
165
|
+
<!-- container to render the form into -->
|
|
166
|
+
<div class="fjs-pgl-form-container"></div>
|
|
167
|
+
|
|
168
|
+
<!-- scripts needed for embedding -->
|
|
169
|
+
<script src="https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/form-viewer.umd.js"></script>
|
|
170
|
+
|
|
171
|
+
<!-- actual script to instantiate the form and load form schema + data -->
|
|
172
|
+
<script>
|
|
173
|
+
const data = JSON.parse(${data});
|
|
174
|
+
const schema = JSON.parse(${schema});
|
|
175
|
+
|
|
176
|
+
const form = new FormViewer.Form({
|
|
177
|
+
container: document.querySelector(".fjs-pgl-form-container")
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
form.on("submit", (event) => {
|
|
181
|
+
console.log(event.data, event.errors);
|
|
182
|
+
});
|
|
183
|
+
|
|
184
|
+
form.importSchema(schema, data).catch(err => {
|
|
185
|
+
console.error("Failed to render form", err);
|
|
186
|
+
});
|
|
187
|
+
</script>
|
|
188
|
+
`.trim();
|
|
189
|
+
hooks.useEffect(() => {
|
|
190
|
+
fieldRef.current.select();
|
|
191
|
+
});
|
|
192
|
+
return jsxRuntime.jsxs(Modal, {
|
|
193
|
+
name: "Embed form",
|
|
194
|
+
onClose: props.onClose,
|
|
195
|
+
children: [jsxRuntime.jsxs("p", {
|
|
196
|
+
children: ["Use the following HTML snippet to embed your form with ", jsxRuntime.jsx("a", {
|
|
197
|
+
href: "https://github.com/bpmn-io/form-js",
|
|
198
|
+
children: "form-js"
|
|
199
|
+
}), ":"]
|
|
200
|
+
}), jsxRuntime.jsx("textarea", {
|
|
201
|
+
spellCheck: "false",
|
|
202
|
+
ref: fieldRef,
|
|
203
|
+
children: snippet
|
|
204
|
+
})]
|
|
205
|
+
});
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
function PlaygroundRoot(props) {
|
|
209
|
+
const editorContainerRef = hooks.useRef();
|
|
210
|
+
const formContainerRef = hooks.useRef();
|
|
211
|
+
const dataContainerRef = hooks.useRef();
|
|
212
|
+
const resultContainerRef = hooks.useRef();
|
|
213
|
+
const formEditorRef = hooks.useRef();
|
|
214
|
+
const formRef = hooks.useRef();
|
|
215
|
+
const dataEditorRef = hooks.useRef();
|
|
216
|
+
const resultViewRef = hooks.useRef();
|
|
217
|
+
const [showEmbed, setShowEmbed] = hooks.useState(false);
|
|
218
|
+
const [initialData] = hooks.useState(props.data || {});
|
|
219
|
+
const [initialSchema, setInitialSchema] = hooks.useState(props.schema);
|
|
220
|
+
const [data, setData] = hooks.useState(props.data || {});
|
|
221
|
+
const [schema, setSchema] = hooks.useState(props.schema);
|
|
222
|
+
const [resultData, setResultData] = hooks.useState(props.data || {});
|
|
223
|
+
hooks.useEffect(() => {
|
|
224
|
+
props.onInit({
|
|
225
|
+
setSchema: setInitialSchema
|
|
226
|
+
});
|
|
227
|
+
});
|
|
228
|
+
hooks.useEffect(() => {
|
|
229
|
+
setInitialSchema(props.schema || {});
|
|
230
|
+
}, [props.schema]);
|
|
231
|
+
hooks.useEffect(() => {
|
|
232
|
+
const dataEditor = dataEditorRef.current = new JSONEditor({
|
|
233
|
+
value: toJSON(data)
|
|
234
|
+
});
|
|
235
|
+
const resultView = resultViewRef.current = new JSONEditor({
|
|
236
|
+
readonly: true,
|
|
237
|
+
value: toJSON(resultData)
|
|
238
|
+
});
|
|
239
|
+
const form = formRef.current = new formJs.Form();
|
|
240
|
+
const formEditor = formEditorRef.current = new formJs.FormEditor({
|
|
241
|
+
renderer: {
|
|
242
|
+
compact: true
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
formEditor.on('changed', () => {
|
|
246
|
+
setSchema(formEditor.getSchema());
|
|
247
|
+
});
|
|
248
|
+
form.on('changed', event => {
|
|
249
|
+
setResultData(event.data);
|
|
250
|
+
});
|
|
251
|
+
dataEditor.on('changed', event => {
|
|
252
|
+
try {
|
|
253
|
+
setData(JSON.parse(event.value));
|
|
254
|
+
} catch (err) {// TODO(nikku): indicate JSON parse error
|
|
255
|
+
}
|
|
256
|
+
});
|
|
257
|
+
const formContainer = formContainerRef.current;
|
|
258
|
+
const editorContainer = editorContainerRef.current;
|
|
259
|
+
const dataContainer = dataContainerRef.current;
|
|
260
|
+
const resultContainer = resultContainerRef.current;
|
|
261
|
+
dataEditor.attachTo(dataContainer);
|
|
262
|
+
resultView.attachTo(resultContainer);
|
|
263
|
+
form.attachTo(formContainer);
|
|
264
|
+
formEditor.attachTo(editorContainer);
|
|
265
|
+
return () => {
|
|
266
|
+
dataEditor.destroy();
|
|
267
|
+
resultView.destroy();
|
|
268
|
+
form.destroy();
|
|
269
|
+
formEditor.destroy();
|
|
270
|
+
};
|
|
271
|
+
}, []);
|
|
272
|
+
hooks.useEffect(() => {
|
|
273
|
+
dataEditorRef.current.setValue(toJSON(initialData));
|
|
274
|
+
}, [initialData]);
|
|
275
|
+
hooks.useEffect(() => {
|
|
276
|
+
formEditorRef.current.importSchema(initialSchema);
|
|
277
|
+
}, [initialSchema]);
|
|
278
|
+
hooks.useEffect(() => {
|
|
279
|
+
formRef.current.importSchema(schema, data);
|
|
280
|
+
}, [schema, data]);
|
|
281
|
+
hooks.useEffect(() => {
|
|
282
|
+
resultViewRef.current.setValue(toJSON(resultData));
|
|
283
|
+
}, [resultData]);
|
|
284
|
+
hooks.useEffect(() => {
|
|
285
|
+
props.onStateChanged({
|
|
286
|
+
schema,
|
|
287
|
+
data
|
|
288
|
+
});
|
|
289
|
+
}, [schema, data]);
|
|
290
|
+
const handleDownload = hooks.useCallback(() => {
|
|
291
|
+
download__default['default'](JSON.stringify(schema, null, ' '), 'form.json', 'text/json');
|
|
292
|
+
}, [schema]);
|
|
293
|
+
const hideEmbedModal = hooks.useCallback(() => {
|
|
294
|
+
setShowEmbed(false);
|
|
295
|
+
}, []);
|
|
296
|
+
const showEmbedModal = hooks.useCallback(() => {
|
|
297
|
+
setShowEmbed(true);
|
|
298
|
+
}, []);
|
|
299
|
+
return jsxRuntime.jsxs("div", {
|
|
300
|
+
class: "fjs-pgl-root",
|
|
301
|
+
children: [jsxRuntime.jsx("div", {
|
|
302
|
+
class: "fjs-pgl-modals",
|
|
303
|
+
children: showEmbed ? jsxRuntime.jsx(EmbedModal, {
|
|
304
|
+
schema: schema,
|
|
305
|
+
data: data,
|
|
306
|
+
onClose: hideEmbedModal
|
|
307
|
+
}) : null
|
|
308
|
+
}), jsxRuntime.jsxs("div", {
|
|
309
|
+
class: "fjs-pgl-main",
|
|
310
|
+
children: [jsxRuntime.jsxs(Section, {
|
|
311
|
+
name: "Form Definition",
|
|
312
|
+
children: [jsxRuntime.jsx(Section.HeaderItem, {
|
|
313
|
+
children: jsxRuntime.jsx("button", {
|
|
314
|
+
class: "fjs-pgl-button",
|
|
315
|
+
title: "Download form definition",
|
|
316
|
+
onClick: handleDownload,
|
|
317
|
+
children: "Download"
|
|
318
|
+
})
|
|
319
|
+
}), jsxRuntime.jsx(Section.HeaderItem, {
|
|
320
|
+
children: jsxRuntime.jsx("button", {
|
|
321
|
+
class: "fjs-pgl-button",
|
|
322
|
+
onClick: showEmbedModal,
|
|
323
|
+
children: "Embed"
|
|
324
|
+
})
|
|
325
|
+
}), jsxRuntime.jsx("div", {
|
|
326
|
+
ref: editorContainerRef,
|
|
327
|
+
class: "fjs-pgl-form-container"
|
|
328
|
+
})]
|
|
329
|
+
}), jsxRuntime.jsx(Section, {
|
|
330
|
+
name: "Form Preview",
|
|
331
|
+
children: jsxRuntime.jsx("div", {
|
|
332
|
+
ref: formContainerRef,
|
|
333
|
+
class: "fjs-pgl-form-container"
|
|
334
|
+
})
|
|
335
|
+
}), jsxRuntime.jsx(Section, {
|
|
336
|
+
name: "Form Data (Input)",
|
|
337
|
+
children: jsxRuntime.jsx("div", {
|
|
338
|
+
ref: dataContainerRef,
|
|
339
|
+
class: "fjs-pgl-text-container"
|
|
340
|
+
})
|
|
341
|
+
}), jsxRuntime.jsx(Section, {
|
|
342
|
+
name: "Form Data (Submit)",
|
|
343
|
+
children: jsxRuntime.jsx("div", {
|
|
344
|
+
ref: resultContainerRef,
|
|
345
|
+
class: "fjs-pgl-text-container"
|
|
346
|
+
})
|
|
347
|
+
})]
|
|
348
|
+
})]
|
|
349
|
+
});
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
function Playground(options) {
|
|
353
|
+
const {
|
|
354
|
+
container: parent,
|
|
355
|
+
schema,
|
|
356
|
+
data
|
|
357
|
+
} = options;
|
|
358
|
+
const emitter = mitt__default['default']();
|
|
359
|
+
let state = {
|
|
360
|
+
data,
|
|
361
|
+
schema
|
|
362
|
+
};
|
|
363
|
+
let ref;
|
|
364
|
+
const container = document.createElement('div');
|
|
365
|
+
container.classList.add('fjs-pgl-parent');
|
|
366
|
+
parent.appendChild(container);
|
|
367
|
+
const handleDrop = fileDrop__default['default']('Drop a form file', function (files) {
|
|
368
|
+
const file = files[0];
|
|
369
|
+
|
|
370
|
+
if (file) {
|
|
371
|
+
try {
|
|
372
|
+
ref.setSchema(JSON.parse(file.contents));
|
|
373
|
+
} catch (err) {// TODO(nikku): indicate JSON parse error
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
});
|
|
377
|
+
container.addEventListener('dragover', handleDrop);
|
|
378
|
+
preact.render(jsxRuntime.jsx(PlaygroundRoot, {
|
|
379
|
+
schema: schema,
|
|
380
|
+
data: data,
|
|
381
|
+
onStateChanged: _state => state = _state,
|
|
382
|
+
onInit: _ref => ref = _ref
|
|
383
|
+
}), container);
|
|
384
|
+
this.on = emitter.on;
|
|
385
|
+
this.off = emitter.off;
|
|
386
|
+
this.emit = emitter.emit;
|
|
387
|
+
this.on('destroy', function () {
|
|
388
|
+
preact.render(null, container);
|
|
389
|
+
});
|
|
390
|
+
this.on('destroy', function () {
|
|
391
|
+
parent.removeChild(container);
|
|
392
|
+
});
|
|
393
|
+
|
|
394
|
+
this.getState = function () {
|
|
395
|
+
return state;
|
|
396
|
+
};
|
|
397
|
+
|
|
398
|
+
this.setSchema = function (schema) {
|
|
399
|
+
return ref.setSchema(schema);
|
|
400
|
+
};
|
|
401
|
+
|
|
402
|
+
this.destroy = function () {
|
|
403
|
+
this.emit('destroy');
|
|
404
|
+
};
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
function toJSON(obj) {
|
|
408
|
+
return JSON.stringify(obj, null, ' ');
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
exports.Playground = Playground;
|
|
412
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/JSONView.js","../src/Playground.js"],"sourcesContent":["import mitt from 'mitt';\n\nimport { basicSetup, EditorView } from '@codemirror/basic-setup';\nimport { EditorState, Compartment } from '@codemirror/state';\nimport { json } from '@codemirror/lang-json';\n\n\nexport default function JSONEditor(options = {}) {\n\n const emitter = mitt();\n\n const {\n readonly = false\n } = options;\n\n let language = new Compartment().of(json());\n let tabSize = new Compartment().of(EditorState.tabSize.of(2));\n\n function createState(doc, extensions=[]) {\n return EditorState.create({\n doc,\n extensions: [\n basicSetup,\n language,\n tabSize,\n ...extensions\n ]\n });\n }\n\n function createView(readonly) {\n\n const updateListener = EditorView.updateListener.of(update => {\n if (update.docChanged) {\n emitter.emit('changed', {\n value: update.view.state.doc.toString()\n });\n }\n });\n\n const editable = EditorView.editable.of(!readonly);\n\n const view = new EditorView({\n state: createState('', [ updateListener, editable ])\n });\n\n view.setValue = function(value) {\n this.setState(createState(value, [ updateListener, editable ]));\n };\n\n return view;\n }\n\n const view = createView(readonly);\n\n this.setValue = function(value) {\n view.setValue(value);\n };\n\n this.getValue = function() {\n return view.state.doc.toString();\n };\n\n this.on = emitter.on;\n this.off = emitter.off;\n\n this.attachTo = function(container) {\n container.appendChild(view.dom);\n };\n\n this.destroy = function() {\n if (view.dom.parentNode) {\n view.dom.parentNode.removeChild(view.dom);\n }\n\n view.destroy();\n };\n}\n","import JSONView from './JSONView';\n\nimport { render } from 'preact';\n\nimport { useRef, useEffect, useState, useCallback } from 'preact/hooks';\n\nimport fileDrop from 'file-drops';\n\nimport mitt from 'mitt';\n\nimport download from 'downloadjs';\n\nimport {\n Form,\n FormEditor\n} from '@bpmn-io/form-js';\n\nimport './FileDrop.css';\nimport './Playground.css';\n\n\nfunction Modal(props) {\n\n useEffect(() => {\n function handleKey(event) {\n\n if (event.key === 'Escape') {\n event.stopPropagation();\n\n props.onClose();\n }\n }\n\n document.addEventListener('keydown', handleKey);\n\n return () => {\n document.removeEventListener('keydown', handleKey);\n };\n });\n\n return (\n <div class=\"fjs-pgl-modal\">\n <div class=\"fjs-pgl-modal-backdrop\" onClick={ props.onClose }></div>\n <div class=\"fjs-pgl-modal-content\">\n <h1 class=\"fjs-pgl-modal-header\">{ props.name }</h1>\n <div class=\"fjs-pgl-modal-body\">\n { props.children }\n </div>\n <div class=\"fjs-pgl-modal-footer\">\n <button class=\"fjs-pgl-button fjs-pgl-button-default\" onClick={ props.onClose }>Close</button>\n </div>\n </div>\n </div>\n );\n}\n\nfunction Section(props) {\n\n const elements =\n Array.isArray(props.children)\n ? props.children :\n [ props.children ];\n\n const {\n headerItems,\n children\n } = elements.reduce((_, child) => {\n const bucket =\n child.type === Section.HeaderItem\n ? _.headerItems\n : _.children;\n\n bucket.push(child);\n\n return _;\n }, { headerItems: [], children: [] });\n\n return (\n <div class=\"fjs-pgl-section\">\n <h1 class=\"header\">{ props.name } { headerItems.length ? <span class=\"header-items\">{ headerItems }</span> : null }</h1>\n <div class=\"body\">\n { children }\n </div>\n </div>\n );\n}\n\nSection.HeaderItem = function(props) {\n return props.children;\n};\n\nfunction serializeValue(obj) {\n return JSON.stringify(JSON.stringify(obj)).replace(/</g, '<').replace(/>/g, '>');\n}\n\nfunction EmbedModal(props) {\n\n const schema = serializeValue(props.schema);\n const data = serializeValue(props.data || {});\n\n const fieldRef = useRef();\n\n const snippet = `<!-- styles needed for rendering -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/assets/form-js.css\">\n\n<!-- container to render the form into -->\n<div class=\"fjs-pgl-form-container\"></div>\n\n<!-- scripts needed for embedding -->\n<script src=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/form-viewer.umd.js\"></script>\n\n<!-- actual script to instantiate the form and load form schema + data -->\n<script>\n const data = JSON.parse(${data});\n const schema = JSON.parse(${schema});\n\n const form = new FormViewer.Form({\n container: document.querySelector(\".fjs-pgl-form-container\")\n });\n\n form.on(\"submit\", (event) => {\n console.log(event.data, event.errors);\n });\n\n form.importSchema(schema, data).catch(err => {\n console.error(\"Failed to render form\", err);\n });\n</script>\n `.trim();\n\n useEffect(() => {\n fieldRef.current.select();\n });\n\n return (\n <Modal name=\"Embed form\" onClose={ props.onClose }>\n <p>Use the following HTML snippet to embed your form with <a href=\"https://github.com/bpmn-io/form-js\">form-js</a>:</p>\n\n <textarea spellCheck=\"false\" ref={ fieldRef }>{snippet}</textarea>\n </Modal>\n );\n}\n\nfunction PlaygroundRoot(props) {\n\n const editorContainerRef = useRef();\n const formContainerRef = useRef();\n const dataContainerRef = useRef();\n const resultContainerRef = useRef();\n\n const formEditorRef = useRef();\n const formRef = useRef();\n const dataEditorRef = useRef();\n const resultViewRef = useRef();\n\n const [ showEmbed, setShowEmbed ] = useState(false);\n\n const [ initialData ] = useState(props.data || {});\n const [ initialSchema, setInitialSchema ] = useState(props.schema);\n\n const [ data, setData ] = useState(props.data || {});\n const [ schema, setSchema ] = useState(props.schema);\n\n const [ resultData, setResultData ] = useState(props.data || {});\n\n useEffect(() => {\n props.onInit({\n setSchema: setInitialSchema\n });\n });\n\n useEffect(() => {\n setInitialSchema(props.schema || {});\n }, [ props.schema ]);\n\n useEffect(() => {\n const dataEditor = dataEditorRef.current = new JSONView({\n value: toJSON(data)\n });\n\n const resultView = resultViewRef.current = new JSONView({\n readonly: true,\n value: toJSON(resultData)\n });\n\n const form = formRef.current = new Form();\n const formEditor = formEditorRef.current = new FormEditor({\n renderer: {\n compact: true\n }\n });\n\n formEditor.on('changed', () => {\n setSchema(formEditor.getSchema());\n });\n\n form.on('changed', event => {\n setResultData(event.data);\n });\n\n dataEditor.on('changed', event => {\n try {\n setData(JSON.parse(event.value));\n } catch (err) {\n\n // TODO(nikku): indicate JSON parse error\n }\n });\n\n const formContainer = formContainerRef.current;\n const editorContainer = editorContainerRef.current;\n const dataContainer = dataContainerRef.current;\n const resultContainer = resultContainerRef.current;\n\n dataEditor.attachTo(dataContainer);\n resultView.attachTo(resultContainer);\n form.attachTo(formContainer);\n formEditor.attachTo(editorContainer);\n\n return () => {\n dataEditor.destroy();\n resultView.destroy();\n form.destroy();\n formEditor.destroy();\n };\n }, []);\n\n useEffect(() => {\n dataEditorRef.current.setValue(toJSON(initialData));\n }, [ initialData ]);\n\n useEffect(() => {\n formEditorRef.current.importSchema(initialSchema);\n }, [ initialSchema ]);\n\n useEffect(() => {\n formRef.current.importSchema(schema, data);\n }, [ schema, data ]);\n\n useEffect(() => {\n resultViewRef.current.setValue(toJSON(resultData));\n }, [ resultData ]);\n\n useEffect(() => {\n props.onStateChanged({\n schema,\n data\n });\n }, [ schema, data ]);\n\n const handleDownload = useCallback(() => {\n\n download(JSON.stringify(schema, null, ' '), 'form.json', 'text/json');\n }, [ schema ]);\n\n const hideEmbedModal = useCallback(() => {\n setShowEmbed(false);\n }, []);\n\n const showEmbedModal = useCallback(() => {\n setShowEmbed(true);\n }, []);\n\n return (\n <div class=\"fjs-pgl-root\">\n <div class=\"fjs-pgl-modals\">\n { showEmbed ? <EmbedModal schema={ schema } data={ data } onClose={ hideEmbedModal } /> : null }\n </div>\n <div class=\"fjs-pgl-main\">\n\n <Section name=\"Form Definition\">\n <Section.HeaderItem>\n <button\n class=\"fjs-pgl-button\"\n title=\"Download form definition\"\n onClick={ handleDownload }\n >Download</button>\n </Section.HeaderItem>\n <Section.HeaderItem>\n <button\n class=\"fjs-pgl-button\"\n onClick={ showEmbedModal }\n >Embed</button>\n </Section.HeaderItem>\n <div ref={ editorContainerRef } class=\"fjs-pgl-form-container\"></div>\n </Section>\n <Section name=\"Form Preview\">\n <div ref={ formContainerRef } class=\"fjs-pgl-form-container\"></div>\n </Section>\n <Section name=\"Form Data (Input)\">\n <div ref={ dataContainerRef } class=\"fjs-pgl-text-container\"></div>\n </Section>\n <Section name=\"Form Data (Submit)\">\n <div ref={ resultContainerRef } class=\"fjs-pgl-text-container\"></div>\n </Section>\n </div>\n </div>\n );\n}\n\n\nexport default function Playground(options) {\n\n const {\n container: parent,\n schema,\n data\n } = options;\n\n const emitter = mitt();\n\n let state = { data, schema };\n let ref;\n\n const container = document.createElement('div');\n\n container.classList.add('fjs-pgl-parent');\n\n parent.appendChild(container);\n\n const handleDrop = fileDrop('Drop a form file', function(files) {\n const file = files[0];\n\n if (file) {\n try {\n ref.setSchema(JSON.parse(file.contents));\n } catch (err) {\n\n // TODO(nikku): indicate JSON parse error\n }\n }\n });\n\n container.addEventListener('dragover', handleDrop);\n\n render(\n <PlaygroundRoot\n schema={ schema }\n data={ data }\n onStateChanged={ (_state) => state = _state }\n onInit={ _ref => ref = _ref }\n />,\n container\n );\n\n this.on = emitter.on;\n this.off = emitter.off;\n\n this.emit = emitter.emit;\n\n this.on('destroy', function() {\n render(null, container);\n });\n\n this.on('destroy', function() {\n parent.removeChild(container);\n });\n\n this.getState = function() {\n return state;\n };\n\n this.setSchema = function(schema) {\n return ref.setSchema(schema);\n };\n\n this.destroy = function() {\n this.emit('destroy');\n };\n}\n\n\nfunction toJSON(obj) {\n return JSON.stringify(obj, null, ' ');\n}"],"names":["JSONEditor","options","emitter","mitt","readonly","language","Compartment","of","json","tabSize","EditorState","createState","doc","extensions","create","basicSetup","createView","updateListener","EditorView","update","docChanged","emit","value","view","state","toString","editable","setValue","setState","getValue","on","off","attachTo","container","appendChild","dom","destroy","parentNode","removeChild","Modal","props","useEffect","handleKey","event","key","stopPropagation","onClose","document","addEventListener","removeEventListener","_jsxs","_jsx","name","children","Section","elements","Array","isArray","headerItems","reduce","_","child","bucket","type","HeaderItem","push","length","serializeValue","obj","JSON","stringify","replace","EmbedModal","schema","data","fieldRef","useRef","snippet","trim","current","select","PlaygroundRoot","editorContainerRef","formContainerRef","dataContainerRef","resultContainerRef","formEditorRef","formRef","dataEditorRef","resultViewRef","showEmbed","setShowEmbed","useState","initialData","initialSchema","setInitialSchema","setData","setSchema","resultData","setResultData","onInit","dataEditor","JSONView","toJSON","resultView","form","Form","formEditor","FormEditor","renderer","compact","getSchema","parse","err","formContainer","editorContainer","dataContainer","resultContainer","importSchema","onStateChanged","handleDownload","useCallback","download","hideEmbedModal","showEmbedModal","Playground","parent","ref","createElement","classList","add","handleDrop","fileDrop","files","file","contents","render","_state","_ref","getState"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOe,SAASA,UAAT,CAAoBC,OAAO,GAAG,EAA9B,EAAkC;AAE/C,QAAMC,OAAO,GAAGC,wBAAI,EAApB;AAEA,QAAM;AACJC,IAAAA,QAAQ,GAAG;AADP,MAEFH,OAFJ;AAIA,MAAII,QAAQ,GAAG,IAAIC,iBAAJ,GAAkBC,EAAlB,CAAqBC,aAAI,EAAzB,CAAf;AACA,MAAIC,OAAO,GAAG,IAAIH,iBAAJ,GAAkBC,EAAlB,CAAqBG,iBAAW,CAACD,OAAZ,CAAoBF,EAApB,CAAuB,CAAvB,CAArB,CAAd;;AAEA,WAASI,WAAT,CAAqBC,GAArB,EAA0BC,UAAU,GAAC,EAArC,EAAyC;AACvC,WAAOH,iBAAW,CAACI,MAAZ,CAAmB;AACxBF,MAAAA,GADwB;AAExBC,MAAAA,UAAU,EAAE,CACVE,qBADU,EAEVV,QAFU,EAGVI,OAHU,EAIV,GAAGI,UAJO;AAFY,KAAnB,CAAP;AASD;;AAED,WAASG,UAAT,CAAoBZ,QAApB,EAA8B;AAE5B,UAAMa,cAAc,GAAGC,qBAAU,CAACD,cAAX,CAA0BV,EAA1B,CAA6BY,MAAM,IAAI;AAC5D,UAAIA,MAAM,CAACC,UAAX,EAAuB;AACrBlB,QAAAA,OAAO,CAACmB,IAAR,CAAa,SAAb,EAAwB;AACtBC,UAAAA,KAAK,EAAEH,MAAM,CAACI,IAAP,CAAYC,KAAZ,CAAkBZ,GAAlB,CAAsBa,QAAtB;AADe,SAAxB;AAGD;AACF,KANsB,CAAvB;AAQA,UAAMC,QAAQ,GAAGR,qBAAU,CAACQ,QAAX,CAAoBnB,EAApB,CAAuB,CAACH,QAAxB,CAAjB;AAEA,UAAMmB,IAAI,GAAG,IAAIL,qBAAJ,CAAe;AAC1BM,MAAAA,KAAK,EAAEb,WAAW,CAAC,EAAD,EAAK,CAAEM,cAAF,EAAkBS,QAAlB,CAAL;AADQ,KAAf,CAAb;;AAIAH,IAAAA,IAAI,CAACI,QAAL,GAAgB,UAASL,KAAT,EAAgB;AAC9B,WAAKM,QAAL,CAAcjB,WAAW,CAACW,KAAD,EAAQ,CAAEL,cAAF,EAAkBS,QAAlB,CAAR,CAAzB;AACD,KAFD;;AAIA,WAAOH,IAAP;AACD;;AAED,QAAMA,IAAI,GAAGP,UAAU,CAACZ,QAAD,CAAvB;;AAEA,OAAKuB,QAAL,GAAgB,UAASL,KAAT,EAAgB;AAC9BC,IAAAA,IAAI,CAACI,QAAL,CAAcL,KAAd;AACD,GAFD;;AAIA,OAAKO,QAAL,GAAgB,YAAW;AACzB,WAAON,IAAI,CAACC,KAAL,CAAWZ,GAAX,CAAea,QAAf,EAAP;AACD,GAFD;;AAIA,OAAKK,EAAL,GAAU5B,OAAO,CAAC4B,EAAlB;AACA,OAAKC,GAAL,GAAW7B,OAAO,CAAC6B,GAAnB;;AAEA,OAAKC,QAAL,GAAgB,UAASC,SAAT,EAAoB;AAClCA,IAAAA,SAAS,CAACC,WAAV,CAAsBX,IAAI,CAACY,GAA3B;AACD,GAFD;;AAIA,OAAKC,OAAL,GAAe,YAAW;AACxB,QAAIb,IAAI,CAACY,GAAL,CAASE,UAAb,EAAyB;AACvBd,MAAAA,IAAI,CAACY,GAAL,CAASE,UAAT,CAAoBC,WAApB,CAAgCf,IAAI,CAACY,GAArC;AACD;;AAEDZ,IAAAA,IAAI,CAACa,OAAL;AACD,GAND;AAOD;;ACxDD,SAASG,KAAT,CAAeC,KAAf,EAAsB;AAEpBC,EAAAA,eAAS,CAAC,MAAM;AACd,aAASC,SAAT,CAAmBC,KAAnB,EAA0B;AAExB,UAAIA,KAAK,CAACC,GAAN,KAAc,QAAlB,EAA4B;AAC1BD,QAAAA,KAAK,CAACE,eAAN;AAEAL,QAAAA,KAAK,CAACM,OAAN;AACD;AACF;;AAEDC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCN,SAArC;AAEA,WAAO,MAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCP,SAAxC;AACD,KAFD;AAGD,GAfQ,CAAT;AAiBA,SACEQ;AAAK,IAAA,KAAK,EAAC,eAAX;AAAA,eACEC;AAAK,MAAA,KAAK,EAAC,wBAAX;AAAoC,MAAA,OAAO,EAAGX,KAAK,CAACM;AAApD,MADF,EAEEI;AAAK,MAAA,KAAK,EAAC,uBAAX;AAAA,iBACEC;AAAI,QAAA,KAAK,EAAC,sBAAV;AAAA,kBAAmCX,KAAK,CAACY;AAAzC,QADF,EAEED;AAAK,QAAA,KAAK,EAAC,oBAAX;AAAA,kBACIX,KAAK,CAACa;AADV,QAFF,EAKEF;AAAK,QAAA,KAAK,EAAC,sBAAX;AAAA,kBACEA;AAAQ,UAAA,KAAK,EAAC,uCAAd;AAAsD,UAAA,OAAO,EAAGX,KAAK,CAACM,OAAtE;AAAA;AAAA;AADF,QALF;AAAA,MAFF;AAAA,IADF;AAcD;;AAED,SAASQ,OAAT,CAAiBd,KAAjB,EAAwB;AAEtB,QAAMe,QAAQ,GACZC,KAAK,CAACC,OAAN,CAAcjB,KAAK,CAACa,QAApB,IACIb,KAAK,CAACa,QADV,GAEE,CAAEb,KAAK,CAACa,QAAR,CAHJ;AAKA,QAAM;AACJK,IAAAA,WADI;AAEJL,IAAAA;AAFI,MAGFE,QAAQ,CAACI,MAAT,CAAgB,CAACC,CAAD,EAAIC,KAAJ,KAAc;AAChC,UAAMC,MAAM,GACVD,KAAK,CAACE,IAAN,KAAeT,OAAO,CAACU,UAAvB,GACIJ,CAAC,CAACF,WADN,GAEIE,CAAC,CAACP,QAHR;AAKAS,IAAAA,MAAM,CAACG,IAAP,CAAYJ,KAAZ;AAEA,WAAOD,CAAP;AACD,GATG,EASD;AAAEF,IAAAA,WAAW,EAAE,EAAf;AAAmBL,IAAAA,QAAQ,EAAE;AAA7B,GATC,CAHJ;AAcA,SACEH;AAAK,IAAA,KAAK,EAAC,iBAAX;AAAA,eACEA;AAAI,MAAA,KAAK,EAAC,QAAV;AAAA,iBAAqBV,KAAK,CAACY,IAA3B,OAAoCM,WAAW,CAACQ,MAAZ,GAAqBf;AAAM,QAAA,KAAK,EAAC,cAAZ;AAAA,kBAA6BO;AAA7B,QAArB,GAAyE,IAA7G;AAAA,MADF,EAEEP;AAAK,MAAA,KAAK,EAAC,MAAX;AAAA,gBACIE;AADJ,MAFF;AAAA,IADF;AAQD;;AAEDC,OAAO,CAACU,UAAR,GAAqB,UAASxB,KAAT,EAAgB;AACnC,SAAOA,KAAK,CAACa,QAAb;AACD,CAFD;;AAIA,SAASc,cAAT,CAAwBC,GAAxB,EAA6B;AAC3B,SAAOC,IAAI,CAACC,SAAL,CAAeD,IAAI,CAACC,SAAL,CAAeF,GAAf,CAAf,EAAoCG,OAApC,CAA4C,IAA5C,EAAkD,MAAlD,EAA0DA,OAA1D,CAAkE,IAAlE,EAAwE,MAAxE,CAAP;AACD;;AAED,SAASC,UAAT,CAAoBhC,KAApB,EAA2B;AAEzB,QAAMiC,MAAM,GAAGN,cAAc,CAAC3B,KAAK,CAACiC,MAAP,CAA7B;AACA,QAAMC,IAAI,GAAGP,cAAc,CAAC3B,KAAK,CAACkC,IAAN,IAAc,EAAf,CAA3B;AAEA,QAAMC,QAAQ,GAAGC,YAAM,EAAvB;AAEA,QAAMC,OAAO,GAAI;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BH,IAAK;AACjC,8BAA8BD,MAAO;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GA1BkB,CA0BdK,IA1Bc,EAAhB;AA4BArC,EAAAA,eAAS,CAAC,MAAM;AACdkC,IAAAA,QAAQ,CAACI,OAAT,CAAiBC,MAAjB;AACD,GAFQ,CAAT;AAIA,SACE9B,gBAAC,KAAD;AAAO,IAAA,IAAI,EAAC,YAAZ;AAAyB,IAAA,OAAO,EAAGV,KAAK,CAACM,OAAzC;AAAA,eACEI;AAAA,4EAA0DC;AAAG,QAAA,IAAI,EAAC,oCAAR;AAAA;AAAA,QAA1D;AAAA,MADF,EAGEA;AAAU,MAAA,UAAU,EAAC,OAArB;AAA6B,MAAA,GAAG,EAAGwB,QAAnC;AAAA,gBAA+CE;AAA/C,MAHF;AAAA,IADF;AAOD;;AAED,SAASI,cAAT,CAAwBzC,KAAxB,EAA+B;AAE7B,QAAM0C,kBAAkB,GAAGN,YAAM,EAAjC;AACA,QAAMO,gBAAgB,GAAGP,YAAM,EAA/B;AACA,QAAMQ,gBAAgB,GAAGR,YAAM,EAA/B;AACA,QAAMS,kBAAkB,GAAGT,YAAM,EAAjC;AAEA,QAAMU,aAAa,GAAGV,YAAM,EAA5B;AACA,QAAMW,OAAO,GAAGX,YAAM,EAAtB;AACA,QAAMY,aAAa,GAAGZ,YAAM,EAA5B;AACA,QAAMa,aAAa,GAAGb,YAAM,EAA5B;AAEA,QAAM,CAAEc,SAAF,EAAaC,YAAb,IAA8BC,cAAQ,CAAC,KAAD,CAA5C;AAEA,QAAM,CAAEC,WAAF,IAAkBD,cAAQ,CAACpD,KAAK,CAACkC,IAAN,IAAc,EAAf,CAAhC;AACA,QAAM,CAAEoB,aAAF,EAAiBC,gBAAjB,IAAsCH,cAAQ,CAACpD,KAAK,CAACiC,MAAP,CAApD;AAEA,QAAM,CAAEC,IAAF,EAAQsB,OAAR,IAAoBJ,cAAQ,CAACpD,KAAK,CAACkC,IAAN,IAAc,EAAf,CAAlC;AACA,QAAM,CAAED,MAAF,EAAUwB,SAAV,IAAwBL,cAAQ,CAACpD,KAAK,CAACiC,MAAP,CAAtC;AAEA,QAAM,CAAEyB,UAAF,EAAcC,aAAd,IAAgCP,cAAQ,CAACpD,KAAK,CAACkC,IAAN,IAAc,EAAf,CAA9C;AAEAjC,EAAAA,eAAS,CAAC,MAAM;AACdD,IAAAA,KAAK,CAAC4D,MAAN,CAAa;AACXH,MAAAA,SAAS,EAAEF;AADA,KAAb;AAGD,GAJQ,CAAT;AAMAtD,EAAAA,eAAS,CAAC,MAAM;AACdsD,IAAAA,gBAAgB,CAACvD,KAAK,CAACiC,MAAN,IAAgB,EAAjB,CAAhB;AACD,GAFQ,EAEN,CAAEjC,KAAK,CAACiC,MAAR,CAFM,CAAT;AAIAhC,EAAAA,eAAS,CAAC,MAAM;AACd,UAAM4D,UAAU,GAAGb,aAAa,CAACT,OAAd,GAAwB,IAAIuB,UAAJ,CAAa;AACtDhF,MAAAA,KAAK,EAAEiF,MAAM,CAAC7B,IAAD;AADyC,KAAb,CAA3C;AAIA,UAAM8B,UAAU,GAAGf,aAAa,CAACV,OAAd,GAAwB,IAAIuB,UAAJ,CAAa;AACtDlG,MAAAA,QAAQ,EAAE,IAD4C;AAEtDkB,MAAAA,KAAK,EAAEiF,MAAM,CAACL,UAAD;AAFyC,KAAb,CAA3C;AAKA,UAAMO,IAAI,GAAGlB,OAAO,CAACR,OAAR,GAAkB,IAAI2B,WAAJ,EAA/B;AACA,UAAMC,UAAU,GAAGrB,aAAa,CAACP,OAAd,GAAwB,IAAI6B,iBAAJ,CAAe;AACxDC,MAAAA,QAAQ,EAAE;AACRC,QAAAA,OAAO,EAAE;AADD;AAD8C,KAAf,CAA3C;AAMAH,IAAAA,UAAU,CAAC7E,EAAX,CAAc,SAAd,EAAyB,MAAM;AAC7BmE,MAAAA,SAAS,CAACU,UAAU,CAACI,SAAX,EAAD,CAAT;AACD,KAFD;AAIAN,IAAAA,IAAI,CAAC3E,EAAL,CAAQ,SAAR,EAAmBa,KAAK,IAAI;AAC1BwD,MAAAA,aAAa,CAACxD,KAAK,CAAC+B,IAAP,CAAb;AACD,KAFD;AAIA2B,IAAAA,UAAU,CAACvE,EAAX,CAAc,SAAd,EAAyBa,KAAK,IAAI;AAChC,UAAI;AACFqD,QAAAA,OAAO,CAAC3B,IAAI,CAAC2C,KAAL,CAAWrE,KAAK,CAACrB,KAAjB,CAAD,CAAP;AACD,OAFD,CAEE,OAAO2F,GAAP,EAAY;AAGb;AACF,KAPD;AASA,UAAMC,aAAa,GAAG/B,gBAAgB,CAACJ,OAAvC;AACA,UAAMoC,eAAe,GAAGjC,kBAAkB,CAACH,OAA3C;AACA,UAAMqC,aAAa,GAAGhC,gBAAgB,CAACL,OAAvC;AACA,UAAMsC,eAAe,GAAGhC,kBAAkB,CAACN,OAA3C;AAEAsB,IAAAA,UAAU,CAACrE,QAAX,CAAoBoF,aAApB;AACAZ,IAAAA,UAAU,CAACxE,QAAX,CAAoBqF,eAApB;AACAZ,IAAAA,IAAI,CAACzE,QAAL,CAAckF,aAAd;AACAP,IAAAA,UAAU,CAAC3E,QAAX,CAAoBmF,eAApB;AAEA,WAAO,MAAM;AACXd,MAAAA,UAAU,CAACjE,OAAX;AACAoE,MAAAA,UAAU,CAACpE,OAAX;AACAqE,MAAAA,IAAI,CAACrE,OAAL;AACAuE,MAAAA,UAAU,CAACvE,OAAX;AACD,KALD;AAMD,GAlDQ,EAkDN,EAlDM,CAAT;AAoDAK,EAAAA,eAAS,CAAC,MAAM;AACd+C,IAAAA,aAAa,CAACT,OAAd,CAAsBpD,QAAtB,CAA+B4E,MAAM,CAACV,WAAD,CAArC;AACD,GAFQ,EAEN,CAAEA,WAAF,CAFM,CAAT;AAIApD,EAAAA,eAAS,CAAC,MAAM;AACd6C,IAAAA,aAAa,CAACP,OAAd,CAAsBuC,YAAtB,CAAmCxB,aAAnC;AACD,GAFQ,EAEN,CAAEA,aAAF,CAFM,CAAT;AAIArD,EAAAA,eAAS,CAAC,MAAM;AACd8C,IAAAA,OAAO,CAACR,OAAR,CAAgBuC,YAAhB,CAA6B7C,MAA7B,EAAqCC,IAArC;AACD,GAFQ,EAEN,CAAED,MAAF,EAAUC,IAAV,CAFM,CAAT;AAIAjC,EAAAA,eAAS,CAAC,MAAM;AACdgD,IAAAA,aAAa,CAACV,OAAd,CAAsBpD,QAAtB,CAA+B4E,MAAM,CAACL,UAAD,CAArC;AACD,GAFQ,EAEN,CAAEA,UAAF,CAFM,CAAT;AAIAzD,EAAAA,eAAS,CAAC,MAAM;AACdD,IAAAA,KAAK,CAAC+E,cAAN,CAAqB;AACnB9C,MAAAA,MADmB;AAEnBC,MAAAA;AAFmB,KAArB;AAID,GALQ,EAKN,CAAED,MAAF,EAAUC,IAAV,CALM,CAAT;AAOA,QAAM8C,cAAc,GAAGC,iBAAW,CAAC,MAAM;AAEvCC,IAAAA,4BAAQ,CAACrD,IAAI,CAACC,SAAL,CAAeG,MAAf,EAAuB,IAAvB,EAA6B,IAA7B,CAAD,EAAqC,WAArC,EAAkD,WAAlD,CAAR;AACD,GAHiC,EAG/B,CAAEA,MAAF,CAH+B,CAAlC;AAKA,QAAMkD,cAAc,GAAGF,iBAAW,CAAC,MAAM;AACvC9B,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,GAFiC,EAE/B,EAF+B,CAAlC;AAIA,QAAMiC,cAAc,GAAGH,iBAAW,CAAC,MAAM;AACvC9B,IAAAA,YAAY,CAAC,IAAD,CAAZ;AACD,GAFiC,EAE/B,EAF+B,CAAlC;AAIA,SACEzC;AAAK,IAAA,KAAK,EAAC,cAAX;AAAA,eACEC;AAAK,MAAA,KAAK,EAAC,gBAAX;AAAA,gBACIuC,SAAS,GAAGvC,eAAC,UAAD;AAAY,QAAA,MAAM,EAAGsB,MAArB;AAA8B,QAAA,IAAI,EAAGC,IAArC;AAA4C,QAAA,OAAO,EAAGiD;AAAtD,QAAH,GAA+E;AAD5F,MADF,EAIEzE;AAAK,MAAA,KAAK,EAAC,cAAX;AAAA,iBAEEA,gBAAC,OAAD;AAAS,QAAA,IAAI,EAAC,iBAAd;AAAA,mBACEC,eAAC,OAAD,CAAS,UAAT;AAAA,oBACEA;AACE,YAAA,KAAK,EAAC,gBADR;AAEE,YAAA,KAAK,EAAC,0BAFR;AAGE,YAAA,OAAO,EAAGqE,cAHZ;AAAA;AAAA;AADF,UADF,EAQErE,eAAC,OAAD,CAAS,UAAT;AAAA,oBACEA;AACE,YAAA,KAAK,EAAC,gBADR;AAEE,YAAA,OAAO,EAAGyE,cAFZ;AAAA;AAAA;AADF,UARF,EAcEzE;AAAK,UAAA,GAAG,EAAG+B,kBAAX;AAAgC,UAAA,KAAK,EAAC;AAAtC,UAdF;AAAA,QAFF,EAkBE/B,eAAC,OAAD;AAAS,QAAA,IAAI,EAAC,cAAd;AAAA,kBACEA;AAAK,UAAA,GAAG,EAAGgC,gBAAX;AAA8B,UAAA,KAAK,EAAC;AAApC;AADF,QAlBF,EAqBEhC,eAAC,OAAD;AAAS,QAAA,IAAI,EAAC,mBAAd;AAAA,kBACEA;AAAK,UAAA,GAAG,EAAGiC,gBAAX;AAA8B,UAAA,KAAK,EAAC;AAApC;AADF,QArBF,EAwBEjC,eAAC,OAAD;AAAS,QAAA,IAAI,EAAC,oBAAd;AAAA,kBACEA;AAAK,UAAA,GAAG,EAAGkC,kBAAX;AAAgC,UAAA,KAAK,EAAC;AAAtC;AADF,QAxBF;AAAA,MAJF;AAAA,IADF;AAmCD;;AAGc,SAASwC,UAAT,CAAoB5H,OAApB,EAA6B;AAE1C,QAAM;AACJgC,IAAAA,SAAS,EAAE6F,MADP;AAEJrD,IAAAA,MAFI;AAGJC,IAAAA;AAHI,MAIFzE,OAJJ;AAMA,QAAMC,OAAO,GAAGC,wBAAI,EAApB;AAEA,MAAIqB,KAAK,GAAG;AAAEkD,IAAAA,IAAF;AAAQD,IAAAA;AAAR,GAAZ;AACA,MAAIsD,GAAJ;AAEA,QAAM9F,SAAS,GAAGc,QAAQ,CAACiF,aAAT,CAAuB,KAAvB,CAAlB;AAEA/F,EAAAA,SAAS,CAACgG,SAAV,CAAoBC,GAApB,CAAwB,gBAAxB;AAEAJ,EAAAA,MAAM,CAAC5F,WAAP,CAAmBD,SAAnB;AAEA,QAAMkG,UAAU,GAAGC,4BAAQ,CAAC,kBAAD,EAAqB,UAASC,KAAT,EAAgB;AAC9D,UAAMC,IAAI,GAAGD,KAAK,CAAC,CAAD,CAAlB;;AAEA,QAAIC,IAAJ,EAAU;AACR,UAAI;AACFP,QAAAA,GAAG,CAAC9B,SAAJ,CAAc5B,IAAI,CAAC2C,KAAL,CAAWsB,IAAI,CAACC,QAAhB,CAAd;AACD,OAFD,CAEE,OAAOtB,GAAP,EAAY;AAGb;AACF;AACF,GAX0B,CAA3B;AAaAhF,EAAAA,SAAS,CAACe,gBAAV,CAA2B,UAA3B,EAAuCmF,UAAvC;AAEAK,EAAAA,aAAM,CACJrF,eAAC,cAAD;AACE,IAAA,MAAM,EAAGsB,MADX;AAEE,IAAA,IAAI,EAAGC,IAFT;AAGE,IAAA,cAAc,EAAI+D,MAAD,IAAYjH,KAAK,GAAGiH,MAHvC;AAIE,IAAA,MAAM,EAAGC,IAAI,IAAIX,GAAG,GAAGW;AAJzB,IADI,EAOJzG,SAPI,CAAN;AAUA,OAAKH,EAAL,GAAU5B,OAAO,CAAC4B,EAAlB;AACA,OAAKC,GAAL,GAAW7B,OAAO,CAAC6B,GAAnB;AAEA,OAAKV,IAAL,GAAYnB,OAAO,CAACmB,IAApB;AAEA,OAAKS,EAAL,CAAQ,SAAR,EAAmB,YAAW;AAC5B0G,IAAAA,aAAM,CAAC,IAAD,EAAOvG,SAAP,CAAN;AACD,GAFD;AAIA,OAAKH,EAAL,CAAQ,SAAR,EAAmB,YAAW;AAC5BgG,IAAAA,MAAM,CAACxF,WAAP,CAAmBL,SAAnB;AACD,GAFD;;AAIA,OAAK0G,QAAL,GAAgB,YAAW;AACzB,WAAOnH,KAAP;AACD,GAFD;;AAIA,OAAKyE,SAAL,GAAiB,UAASxB,MAAT,EAAiB;AAChC,WAAOsD,GAAG,CAAC9B,SAAJ,CAAcxB,MAAd,CAAP;AACD,GAFD;;AAIA,OAAKrC,OAAL,GAAe,YAAW;AACxB,SAAKf,IAAL,CAAU,SAAV;AACD,GAFD;AAGD;;AAGD,SAASkF,MAAT,CAAgBnC,GAAhB,EAAqB;AACnB,SAAOC,IAAI,CAACC,SAAL,CAAeF,GAAf,EAAoB,IAApB,EAA0B,IAA1B,CAAP;AACD;;;;"}
|