@things-factory/integration-ui 6.1.112 → 6.1.116
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/client/bootstrap.ts +2 -1
- package/client/editors/property-editor.ts +20 -1
- package/client/editors/things-editor-entity-selector.ts +7 -0
- package/client/editors/things-editor-http-body.ts +7 -0
- package/client/editors/things-editor-http-headers.ts +7 -0
- package/client/editors/things-editor-http-parameters.ts +7 -0
- package/client/editors/things-editor-procedure-parameters.ts +332 -0
- package/dist-client/bootstrap.js +2 -1
- package/dist-client/bootstrap.js.map +1 -1
- package/dist-client/editors/property-editor.d.ts +5 -0
- package/dist-client/editors/property-editor.js +17 -0
- package/dist-client/editors/property-editor.js.map +1 -1
- package/dist-client/editors/things-editor-entity-selector.js +7 -0
- package/dist-client/editors/things-editor-entity-selector.js.map +1 -1
- package/dist-client/editors/things-editor-http-body.js +7 -0
- package/dist-client/editors/things-editor-http-body.js.map +1 -1
- package/dist-client/editors/things-editor-http-headers.js +7 -0
- package/dist-client/editors/things-editor-http-headers.js.map +1 -1
- package/dist-client/editors/things-editor-http-parameters.js +7 -0
- package/dist-client/editors/things-editor-http-parameters.js.map +1 -1
- package/dist-client/editors/things-editor-procedure-output.d.ts +37 -0
- package/dist-client/editors/things-editor-procedure-output.js +234 -0
- package/dist-client/editors/things-editor-procedure-output.js.map +1 -0
- package/dist-client/editors/things-editor-procedure-parameters.d.ts +37 -0
- package/dist-client/editors/things-editor-procedure-parameters.js +291 -0
- package/dist-client/editors/things-editor-procedure-parameters.js.map +1 -0
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/translations/en.json +1 -0
- package/translations/ja.json +1 -0
- package/translations/ko.json +1 -0
- package/translations/ms.json +1 -0
- package/translations/zh.json +1 -0
package/client/bootstrap.ts
CHANGED
|
@@ -28,6 +28,7 @@ export default function bootstrap() {
|
|
|
28
28
|
'http-parameters': 'property-editor-http-parameters',
|
|
29
29
|
'http-body': 'property-editor-http-body',
|
|
30
30
|
'entity-selector': 'property-editor-entity-selector',
|
|
31
|
-
'scenario-step-input': 'property-editor-scenario-step-input'
|
|
31
|
+
'scenario-step-input': 'property-editor-scenario-step-input',
|
|
32
|
+
'procedure-parameters': 'property-editor-procedure-parameters'
|
|
32
33
|
})
|
|
33
34
|
}
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
import './things-editor-http-headers'
|
|
5
5
|
import './things-editor-http-parameters'
|
|
6
6
|
import './things-editor-http-body'
|
|
7
|
+
import './things-editor-procedure-parameters'
|
|
7
8
|
|
|
8
9
|
import { html } from 'lit'
|
|
9
|
-
import { customElement, property, query } from 'lit/decorators.js'
|
|
10
10
|
|
|
11
11
|
import { OxPropertyEditor } from '@operato/property-editor'
|
|
12
12
|
|
|
@@ -74,3 +74,22 @@ export class PropertyEditorHttpBody extends OxPropertyEditor {
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
customElements.define('property-editor-http-body', PropertyEditorHttpBody)
|
|
77
|
+
|
|
78
|
+
export class PropertyEditorProcedureParameters extends OxPropertyEditor {
|
|
79
|
+
static get styles() {
|
|
80
|
+
return [...OxPropertyEditor.styles]
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
editorTemplate(value, spec) {
|
|
84
|
+
return html`
|
|
85
|
+
<things-editor-procedure-parameters
|
|
86
|
+
id="editor"
|
|
87
|
+
.value=${value}
|
|
88
|
+
.properties=${spec.property}
|
|
89
|
+
fullwidth
|
|
90
|
+
></things-editor-procedure-parameters>
|
|
91
|
+
`
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
customElements.define('property-editor-procedure-parameters', PropertyEditorProcedureParameters)
|
|
@@ -0,0 +1,332 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import '@material/mwc-icon'
|
|
6
|
+
|
|
7
|
+
import { css, html } from 'lit'
|
|
8
|
+
import { customElement, property, queryAll } from 'lit/decorators.js'
|
|
9
|
+
|
|
10
|
+
import { OxFormField } from '@operato/input'
|
|
11
|
+
|
|
12
|
+
type ProcedureParameterType = { name: string; dir: string; type: string; val?: any; maxSize?: number }
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
input component for procedure-parameters
|
|
16
|
+
|
|
17
|
+
Example:
|
|
18
|
+
|
|
19
|
+
<things-editor-procedure-parameters
|
|
20
|
+
value=${map}
|
|
21
|
+
</things-editor-procedure-parameters>
|
|
22
|
+
*/
|
|
23
|
+
@customElement('things-editor-procedure-parameters')
|
|
24
|
+
export class ThingsEditorProcedureParameters extends OxFormField {
|
|
25
|
+
static styles = [
|
|
26
|
+
css`
|
|
27
|
+
:host {
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
margin-bottom: var(--margin-wide);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
div {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-flow: row nowrap;
|
|
37
|
+
gap: var(--margin-default);
|
|
38
|
+
margin-bottom: var(--margin-narrow);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
button {
|
|
42
|
+
border: var(--button-border);
|
|
43
|
+
border-radius: var(--border-radius);
|
|
44
|
+
background-color: var(--button-background-color);
|
|
45
|
+
padding: var(--padding-narrow) var(--padding-default);
|
|
46
|
+
line-height: 0.8;
|
|
47
|
+
color: var(--button-color);
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
button + button {
|
|
52
|
+
margin-left: -5px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
button mwc-icon {
|
|
56
|
+
font-size: var(--fontsize-default);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
button:focus,
|
|
60
|
+
button:hover,
|
|
61
|
+
button:active {
|
|
62
|
+
border: var(--button-activ-border);
|
|
63
|
+
background-color: var(--button-background-focus-color);
|
|
64
|
+
color: var(--theme-white-color);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
input {
|
|
68
|
+
flex: 1;
|
|
69
|
+
border: 0;
|
|
70
|
+
border-bottom: var(--border-dark-color);
|
|
71
|
+
padding: var(--input-padding);
|
|
72
|
+
font: var(--input-font);
|
|
73
|
+
color: var(--primary-text-color);
|
|
74
|
+
min-width: 50px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
input:focus {
|
|
78
|
+
outline: none;
|
|
79
|
+
border-bottom: 1px solid var(--primary-color);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
button.hidden {
|
|
83
|
+
opacity: 0;
|
|
84
|
+
cursor: default;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
select,
|
|
88
|
+
ox-select,
|
|
89
|
+
input:not([type='checkbox']) {
|
|
90
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
91
|
+
border-radius: 4px;
|
|
92
|
+
}
|
|
93
|
+
`
|
|
94
|
+
]
|
|
95
|
+
|
|
96
|
+
@property({ type: Array }) value: ProcedureParameterType[] = []
|
|
97
|
+
|
|
98
|
+
private _changingNow: boolean = false
|
|
99
|
+
|
|
100
|
+
firstUpdated() {
|
|
101
|
+
this.renderRoot.addEventListener('change', this._onChange.bind(this))
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
render() {
|
|
105
|
+
const value = !this.value || !Array.isArray(this.value) ? [] : this.value
|
|
106
|
+
|
|
107
|
+
return html`
|
|
108
|
+
${value.map(
|
|
109
|
+
item => html`
|
|
110
|
+
<div data-record>
|
|
111
|
+
<input type="text" data-name placeholder="name" .value=${item.name} />
|
|
112
|
+
<select data-dir placeholder="dir" .value=${item.dir}>
|
|
113
|
+
<option value="" ?selected=${item.dir == ''}> </option>
|
|
114
|
+
<option value="In" ?selected=${item.dir == 'In'}>In</option>
|
|
115
|
+
<option value="Inout" ?selected=${item.dir == 'Inout'}>Inout</option>
|
|
116
|
+
<option value="Out" ?selected=${item.dir == 'Out'}>Out</option>
|
|
117
|
+
</select>
|
|
118
|
+
<select data-type placeholder="type" .value=${item.type}>
|
|
119
|
+
<option value="" ?selected=${item.type == ''}> </option>
|
|
120
|
+
<option value="String" ?selected=${item.type == 'String'}>String</option>
|
|
121
|
+
<option value="Number" ?selected=${item.type == 'Number'}>Number</option>
|
|
122
|
+
<option value="Date" ?selected=${item.type == 'Date'}>Date</option>
|
|
123
|
+
<!--
|
|
124
|
+
<option value="Buffer" ?selected=${item.type == 'Buffer'}>Buffer</option>
|
|
125
|
+
<option value="Blob" ?selected=${item.type == 'Blob'}>Blob</option>
|
|
126
|
+
<option value="Clob" ?selected=${item.type == 'Clob'}>Clob</option>
|
|
127
|
+
-->
|
|
128
|
+
<option value="Cursor" ?selected=${item.type == 'Cursor'}>Cursor</option>
|
|
129
|
+
</select>
|
|
130
|
+
<input type="text" data-val placeholder="val" .value=${item.val} />
|
|
131
|
+
<input type="number" data-max-size placeholder="max-size" .value=${String(item.maxSize)} />
|
|
132
|
+
|
|
133
|
+
<button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
|
|
134
|
+
<mwc-icon>remove</mwc-icon>
|
|
135
|
+
</button>
|
|
136
|
+
<button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">
|
|
137
|
+
<mwc-icon>arrow_upward</mwc-icon>
|
|
138
|
+
</button>
|
|
139
|
+
<button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">
|
|
140
|
+
<mwc-icon>arrow_downward</mwc-icon>
|
|
141
|
+
</button>
|
|
142
|
+
</div>
|
|
143
|
+
`
|
|
144
|
+
)}
|
|
145
|
+
|
|
146
|
+
<div data-record-new>
|
|
147
|
+
<input type="text" data-name placeholder="name" value="" />
|
|
148
|
+
<select data-dir placeholder="dir">
|
|
149
|
+
<option value="" selected> </option>
|
|
150
|
+
<option value="In">In</option>
|
|
151
|
+
<option value="Inout">Inout</option>
|
|
152
|
+
<option value="Out">Out</option>
|
|
153
|
+
</select>
|
|
154
|
+
<select data-type placeholder="type" value="">
|
|
155
|
+
<option value="" selected> </option>
|
|
156
|
+
<option value="String">String</option>
|
|
157
|
+
<option value="Number">Number</option>
|
|
158
|
+
<option value="Date">Date</option>
|
|
159
|
+
<!--
|
|
160
|
+
<option value="Buffer">Buffer</option>
|
|
161
|
+
<option value="Blob">Blob</option>
|
|
162
|
+
<option value="Clob">Clob</option>
|
|
163
|
+
-->
|
|
164
|
+
<option value="Cursor">Cursor</option>
|
|
165
|
+
</select>
|
|
166
|
+
<input type="text" data-val placeholder="val" value="" />
|
|
167
|
+
<input type="number" data-max-size placeholder="max-size" value="" />
|
|
168
|
+
|
|
169
|
+
<button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
|
|
170
|
+
<mwc-icon>add</mwc-icon>
|
|
171
|
+
</button>
|
|
172
|
+
<button class="hidden"><mwc-icon>add</mwc-icon></button>
|
|
173
|
+
<button class="hidden"><mwc-icon>add</mwc-icon></button>
|
|
174
|
+
</div>
|
|
175
|
+
`
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
_onChange(e: Event) {
|
|
179
|
+
if (this._changingNow) {
|
|
180
|
+
return
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
this._changingNow = true
|
|
184
|
+
|
|
185
|
+
const input = e.target as HTMLInputElement
|
|
186
|
+
|
|
187
|
+
const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement
|
|
188
|
+
|
|
189
|
+
if (record.hasAttribute('data-record')) {
|
|
190
|
+
this._build()
|
|
191
|
+
} else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {
|
|
192
|
+
this._add()
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
this._changingNow = false
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
_adjust({ name, type, dir, maxSize, val }: ProcedureParameterType): ProcedureParameterType {
|
|
199
|
+
const entry = {
|
|
200
|
+
name,
|
|
201
|
+
type,
|
|
202
|
+
dir
|
|
203
|
+
} as ProcedureParameterType
|
|
204
|
+
|
|
205
|
+
if (
|
|
206
|
+
dir != 'In' &&
|
|
207
|
+
(type == 'String' || type == 'Buffer') &&
|
|
208
|
+
maxSize !== null &&
|
|
209
|
+
maxSize !== undefined &&
|
|
210
|
+
!isNaN(maxSize)
|
|
211
|
+
) {
|
|
212
|
+
entry.maxSize = maxSize
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
if (dir != 'Out' && val !== null && val !== undefined && val != '') {
|
|
216
|
+
entry.val = val
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
return entry
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
_build(includeNewRecord?: boolean) {
|
|
223
|
+
if (includeNewRecord) {
|
|
224
|
+
var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>
|
|
225
|
+
} else {
|
|
226
|
+
var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
var newmap: ProcedureParameterType[] = []
|
|
230
|
+
|
|
231
|
+
for (var i = 0; i < records.length; i++) {
|
|
232
|
+
var record = records[i]
|
|
233
|
+
|
|
234
|
+
const name = (record.querySelector('[data-name]') as HTMLInputElement).value
|
|
235
|
+
const type = (record.querySelector('[data-type]') as HTMLInputElement).value
|
|
236
|
+
const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value
|
|
237
|
+
const val = (record.querySelector('[data-val]') as HTMLInputElement).value
|
|
238
|
+
const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber
|
|
239
|
+
|
|
240
|
+
const inputs = record.querySelectorAll(
|
|
241
|
+
'[data-type]:not([style*="display: none"])'
|
|
242
|
+
) as NodeListOf<HTMLInputElement>
|
|
243
|
+
|
|
244
|
+
if (!inputs || inputs.length == 0) {
|
|
245
|
+
continue
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
if (name) {
|
|
249
|
+
newmap.push(this._adjust({ name, type, dir, val, maxSize }))
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
this.value = newmap
|
|
254
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
_add() {
|
|
258
|
+
this._build(true)
|
|
259
|
+
|
|
260
|
+
const inputs = this.renderRoot.querySelectorAll(
|
|
261
|
+
'[data-record-new] input:not([style*="display: none"])'
|
|
262
|
+
) as NodeListOf<HTMLInputElement & { value: any }>
|
|
263
|
+
|
|
264
|
+
for (var i = 0; i < inputs.length; i++) {
|
|
265
|
+
let input = inputs[i]
|
|
266
|
+
|
|
267
|
+
input.value = ''
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
inputs[0].focus()
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
_delete(e: MouseEvent) {
|
|
274
|
+
const record = (e.target as Element).closest('[data-record]') as HTMLElement
|
|
275
|
+
|
|
276
|
+
;(record!.querySelector('[data-name]') as HTMLInputElement)!.value = ''
|
|
277
|
+
|
|
278
|
+
this._build()
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
@queryAll('[data-record]') records!: NodeListOf<HTMLElement>
|
|
282
|
+
|
|
283
|
+
_up(e: MouseEvent) {
|
|
284
|
+
const record = (e.target as Element).closest('[data-record]') as HTMLElement
|
|
285
|
+
const array = Array.from(this.records)
|
|
286
|
+
const index = array.indexOf(record) - 1
|
|
287
|
+
|
|
288
|
+
if (index < 0) {
|
|
289
|
+
return
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
const deleted = array.splice(index, 1)
|
|
293
|
+
array.splice(index + 1, 0, ...deleted)
|
|
294
|
+
|
|
295
|
+
this.value = array.map(record => {
|
|
296
|
+
const name = (record.querySelector('[data-name]') as HTMLInputElement).value
|
|
297
|
+
const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value
|
|
298
|
+
const type = (record.querySelector('[data-type]') as HTMLInputElement).value
|
|
299
|
+
const val = (record.querySelector('[data-val]') as HTMLInputElement).value
|
|
300
|
+
const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber
|
|
301
|
+
|
|
302
|
+
return this._adjust({ name, dir, type, val, maxSize })
|
|
303
|
+
})
|
|
304
|
+
|
|
305
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
_down(e: MouseEvent) {
|
|
309
|
+
const record = (e.target as Element).closest('[data-record]') as HTMLElement
|
|
310
|
+
const array = Array.from(this.records)
|
|
311
|
+
const index = array.indexOf(record)
|
|
312
|
+
|
|
313
|
+
if (index > array.length) {
|
|
314
|
+
return
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
array.splice(index, 1)
|
|
318
|
+
array.splice(index + 1, 0, record)
|
|
319
|
+
|
|
320
|
+
this.value = array.map(record => {
|
|
321
|
+
const name = (record.querySelector('[data-name]') as HTMLInputElement).value
|
|
322
|
+
const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value
|
|
323
|
+
const type = (record.querySelector('[data-type]') as HTMLInputElement).value
|
|
324
|
+
const val = (record.querySelector('[data-val]') as HTMLInputElement).value
|
|
325
|
+
const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber
|
|
326
|
+
|
|
327
|
+
return this._adjust({ name, dir, type, val, maxSize })
|
|
328
|
+
})
|
|
329
|
+
|
|
330
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
|
|
331
|
+
}
|
|
332
|
+
}
|
package/dist-client/bootstrap.js
CHANGED
|
@@ -23,7 +23,8 @@ export default function bootstrap() {
|
|
|
23
23
|
'http-parameters': 'property-editor-http-parameters',
|
|
24
24
|
'http-body': 'property-editor-http-body',
|
|
25
25
|
'entity-selector': 'property-editor-entity-selector',
|
|
26
|
-
'scenario-step-input': 'property-editor-scenario-step-input'
|
|
26
|
+
'scenario-step-input': 'property-editor-scenario-step-input',
|
|
27
|
+
'procedure-parameters': 'property-editor-procedure-parameters'
|
|
27
28
|
});
|
|
28
29
|
}
|
|
29
30
|
//# sourceMappingURL=bootstrap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,yBAAyB,CAAA;AAChC,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mDAAmD,CAAA;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAA;AAC/F,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,gBAAgB,IAAI,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AACtH,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAA;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAE7D,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;IAClD,mBAAmB,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAA;IACnD,mBAAmB,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAA;IACrD,mBAAmB,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAA;IAC9C,mBAAmB,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAA;IAC1D,mBAAmB,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAA;IAEpD,qBAAqB,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAA;IAExD,gBAAgB,CAAC,QAAQ,CAAC;QACxB,cAAc,EAAE,8BAA8B;QAC9C,iBAAiB,EAAE,iCAAiC;QACpD,WAAW,EAAE,2BAA2B;QACxC,iBAAiB,EAAE,iCAAiC;QACpD,qBAAqB,EAAE,qCAAqC;
|
|
1
|
+
{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,yBAAyB,CAAA;AAChC,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mDAAmD,CAAA;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAA;AAC/F,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,gBAAgB,IAAI,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AACtH,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAA;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAE7D,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;IAClD,mBAAmB,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAA;IACnD,mBAAmB,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAA;IACrD,mBAAmB,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAA;IAC9C,mBAAmB,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAA;IAC1D,mBAAmB,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAA;IAEpD,qBAAqB,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAA;IAExD,gBAAgB,CAAC,QAAQ,CAAC;QACxB,cAAc,EAAE,8BAA8B;QAC9C,iBAAiB,EAAE,iCAAiC;QACpD,WAAW,EAAE,2BAA2B;QACxC,iBAAiB,EAAE,iCAAiC;QACpD,qBAAqB,EAAE,qCAAqC;QAC5D,sBAAsB,EAAE,sCAAsC;KAC/D,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import '@material/mwc-icon'\nimport './editors/entity-editor'\nimport './editors/property-editor'\n\nimport { OxGristEditorJson } from '@operato/app/grist-editor/ox-grist-editor-json.js'\nimport { OxGristRendererCrontab } from '@operato/app/grist-editor/ox-grist-renderer-crontab.js'\nimport { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer } from '@operato/data-grist'\nimport { OxGristEditorCrontab } from '@operato/grist-editor/ox-grist-editor-crontab.js'\nimport { OxGristEditorParameters } from '@operato/grist-editor/ox-grist-editor-parameters.js'\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nimport { ConnectionSelector } from './grist/connection-selector'\nimport { ConnectorSelector } from './grist/connector-selector'\nimport { TaskTypeSelector } from './grist/task-type-selector'\n\nexport default function bootstrap() {\n registerGristEditor('task-type', TaskTypeSelector)\n registerGristEditor('connector', ConnectorSelector)\n registerGristEditor('connection', ConnectionSelector)\n registerGristEditor('json', OxGristEditorJson)\n registerGristEditor('parameters', OxGristEditorParameters)\n registerGristEditor('crontab', OxGristEditorCrontab)\n\n registerGristRenderer('crontab', OxGristRendererCrontab)\n\n OxPropertyEditor.register({\n 'http-headers': 'property-editor-http-headers',\n 'http-parameters': 'property-editor-http-parameters',\n 'http-body': 'property-editor-http-body',\n 'entity-selector': 'property-editor-entity-selector',\n 'scenario-step-input': 'property-editor-scenario-step-input',\n 'procedure-parameters': 'property-editor-procedure-parameters'\n })\n}\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import './things-editor-http-headers';
|
|
2
2
|
import './things-editor-http-parameters';
|
|
3
3
|
import './things-editor-http-body';
|
|
4
|
+
import './things-editor-procedure-parameters';
|
|
4
5
|
import { OxPropertyEditor } from '@operato/property-editor';
|
|
5
6
|
export declare class PropertyEditorScenarioStepInput extends OxPropertyEditor {
|
|
6
7
|
static get styles(): import("lit").CSSResult[];
|
|
@@ -18,3 +19,7 @@ export declare class PropertyEditorHttpBody extends OxPropertyEditor {
|
|
|
18
19
|
static get styles(): import("lit").CSSResult[];
|
|
19
20
|
editorTemplate(value: any, spec: any): import("lit-html").TemplateResult<1>;
|
|
20
21
|
}
|
|
22
|
+
export declare class PropertyEditorProcedureParameters extends OxPropertyEditor {
|
|
23
|
+
static get styles(): import("lit").CSSResult[];
|
|
24
|
+
editorTemplate(value: any, spec: any): import("lit-html").TemplateResult<1>;
|
|
25
|
+
}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
import './things-editor-http-headers';
|
|
5
5
|
import './things-editor-http-parameters';
|
|
6
6
|
import './things-editor-http-body';
|
|
7
|
+
import './things-editor-procedure-parameters';
|
|
7
8
|
import { html } from 'lit';
|
|
8
9
|
import { OxPropertyEditor } from '@operato/property-editor';
|
|
9
10
|
export class PropertyEditorScenarioStepInput extends OxPropertyEditor {
|
|
@@ -58,4 +59,20 @@ export class PropertyEditorHttpBody extends OxPropertyEditor {
|
|
|
58
59
|
}
|
|
59
60
|
}
|
|
60
61
|
customElements.define('property-editor-http-body', PropertyEditorHttpBody);
|
|
62
|
+
export class PropertyEditorProcedureParameters extends OxPropertyEditor {
|
|
63
|
+
static get styles() {
|
|
64
|
+
return [...OxPropertyEditor.styles];
|
|
65
|
+
}
|
|
66
|
+
editorTemplate(value, spec) {
|
|
67
|
+
return html `
|
|
68
|
+
<things-editor-procedure-parameters
|
|
69
|
+
id="editor"
|
|
70
|
+
.value=${value}
|
|
71
|
+
.properties=${spec.property}
|
|
72
|
+
fullwidth
|
|
73
|
+
></things-editor-procedure-parameters>
|
|
74
|
+
`;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
customElements.define('property-editor-procedure-parameters', PropertyEditorProcedureParameters);
|
|
61
78
|
//# sourceMappingURL=property-editor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-editor.js","sourceRoot":"","sources":["../../client/editors/property-editor.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,8BAA8B,CAAA;AACrC,OAAO,iCAAiC,CAAA;AACxC,OAAO,2BAA2B,CAAA;
|
|
1
|
+
{"version":3,"file":"property-editor.js","sourceRoot":"","sources":["../../client/editors/property-editor.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,8BAA8B,CAAA;AACrC,OAAO,iCAAiC,CAAA;AACxC,OAAO,2BAA2B,CAAA;AAClC,OAAO,sCAAsC,CAAA;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,MAAM,OAAO,+BAAgC,SAAQ,gBAAgB;IACnE,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAED,cAAc,CAAC,KAAK,EAAE,IAAI;QACxB,2EAA2E;QAC3E,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;QAC5C,MAAM,KAAK,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,KAAI,EAAE,CAAA;QAExG,OAAO,IAAI,CAAA;kCACmB,KAAK,IAAI,EAAE;iCACZ,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC;KAClF,CAAA;IACH,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,qCAAqC,EAAE,+BAA+B,CAAC,CAAA;AAE7F,MAAM,OAAO,yBAA0B,SAAQ,gBAAgB;IAC7D,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAED,cAAc,CAAC,KAAK,EAAE,IAAI;QACxB,OAAO,IAAI,CAAA;uDACwC,KAAK,gBAAgB,IAAI,CAAC,QAAQ;KACpF,CAAA;IACH,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,8BAA8B,EAAE,yBAAyB,CAAC,CAAA;AAEhF,MAAM,OAAO,4BAA6B,SAAQ,gBAAgB;IAChE,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAED,cAAc,CAAC,KAAK,EAAE,IAAI;QACxB,OAAO,IAAI,CAAA;;;iBAGE,KAAK;sBACA,IAAI,CAAC,QAAQ;;KAE9B,CAAA;IACH,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,iCAAiC,EAAE,4BAA4B,CAAC,CAAA;AAEtF,MAAM,OAAO,sBAAuB,SAAQ,gBAAgB;IAC1D,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAED,cAAc,CAAC,KAAK,EAAE,IAAI;QACxB,OAAO,IAAI,CAAA;oDACqC,KAAK,gBAAgB,IAAI,CAAC,QAAQ;KACjF,CAAA;IACH,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,sBAAsB,CAAC,CAAA;AAE1E,MAAM,OAAO,iCAAkC,SAAQ,gBAAgB;IACrE,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAED,cAAc,CAAC,KAAK,EAAE,IAAI;QACxB,OAAO,IAAI,CAAA;;;iBAGE,KAAK;sBACA,IAAI,CAAC,QAAQ;;;KAG9B,CAAA;IACH,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,sCAAsC,EAAE,iCAAiC,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport './things-editor-http-headers'\nimport './things-editor-http-parameters'\nimport './things-editor-http-body'\nimport './things-editor-procedure-parameters'\n\nimport { html } from 'lit'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nexport class PropertyEditorScenarioStepInput extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n /* context must be a datagrid(grist) instance, and host must be a record */\n const { context: grid, host: record } = spec\n const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n return html`\n <input id=\"editor\" .value=${value || ''} list=\"step-list\" />\n <datalist id=\"step-list\">${steps.map(id => html` <option value=${id}></option> `)}</datalist>\n `\n }\n}\n\ncustomElements.define('property-editor-scenario-step-input', PropertyEditorScenarioStepInput)\n\nexport class PropertyEditorHttpHeaders extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-headers id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-headers>\n `\n }\n}\n\ncustomElements.define('property-editor-http-headers', PropertyEditorHttpHeaders)\n\nexport class PropertyEditorHttpParameters extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-parameters\n id=\"editor\"\n .value=${value}\n .properties=${spec.property}\n ></things-editor-http-parameters>\n `\n }\n}\n\ncustomElements.define('property-editor-http-parameters', PropertyEditorHttpParameters)\n\nexport class PropertyEditorHttpBody extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-http-body id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-body>\n `\n }\n}\n\ncustomElements.define('property-editor-http-body', PropertyEditorHttpBody)\n\nexport class PropertyEditorProcedureParameters extends OxPropertyEditor {\n static get styles() {\n return [...OxPropertyEditor.styles]\n }\n\n editorTemplate(value, spec) {\n return html`\n <things-editor-procedure-parameters\n id=\"editor\"\n .value=${value}\n .properties=${spec.property}\n fullwidth\n ></things-editor-procedure-parameters>\n `\n }\n}\n\ncustomElements.define('property-editor-procedure-parameters', PropertyEditorProcedureParameters)\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"things-editor-entity-selector.js","sourceRoot":"","sources":["../../client/editors/things-editor-entity-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAG5B,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"things-editor-entity-selector.js","sourceRoot":"","sources":["../../client/editors/things-editor-entity-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAG5B,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAkChE,MAAM;QACJ,OAAO,IAAI,CAAA;4CAC6B,IAAI,CAAC,KAAK,IAAI,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;;yBAE3E,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;KAC5C,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAC;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED,IAAI,QAAQ,GAAG,IAAI,CAAA;;qBAEF,IAAI;qBACJ,IAAI,CAAC,UAAU,CAAC,SAAS;iBAC7B,IAAI,CAAC,KAAK;2BACA,CAAC,CAAC,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAA;YAC5B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAA;YAErD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;SACxC,CAAC,CAAA;IACJ,CAAC;;AAtFM,iCAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAAgB;AA9BxB,0BAA0B;IAD9C,aAAa,CAAC,+BAA+B,CAAC;GAC1B,0BAA0B,CAwF9C;eAxFoB,0BAA0B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport './entity-selector'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('things-editor-entity-selector')\nexport default class ThingsEditorEntitySelector extends LitElement {\n static styles = [\n css`\n :host {\n position: relative;\n display: inline-block;\n }\n\n input[type='text'] {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n }\n\n mwc-icon {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n select,\n ox-select,\n input:not([type='checkbox']) {\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n }\n `\n ]\n\n @property({ type: String }) value?: string\n @property({ type: Object }) properties: any\n\n popup: any\n\n render() {\n return html`\n <input id=\"text\" type=\"text\" .value=${this.value || ''} @change=${e => this._onInputChanged(e)} />\n\n <mwc-icon @click=${e => this.openSelector()}>dashboard</mwc-icon>\n `\n }\n\n _onInputChanged(e) {\n e.stopPropagation()\n\n this.value = e.target.value\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n openSelector() {\n if (this.popup) {\n delete this.popup\n }\n\n var template = html`\n <entity-selector\n .creatable=${true}\n .queryName=${this.properties.queryName}\n .value=${this.value}\n @entity-selected=${e => {\n e.stopPropagation()\n\n var entity = e.detail.entity\n this.value = entity[this.properties.valueKey || 'id']\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n\n this.popup && this.popup.close()\n }}\n ></entity-selector>\n `\n\n this.popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.select entity')\n })\n }\n}\n"]}
|
|
@@ -117,6 +117,13 @@ ThingsEditorHttpBody.styles = [
|
|
|
117
117
|
min-height: 20px;
|
|
118
118
|
margin: 2px;
|
|
119
119
|
}
|
|
120
|
+
|
|
121
|
+
select,
|
|
122
|
+
ox-select,
|
|
123
|
+
input:not([type='checkbox']) {
|
|
124
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
125
|
+
border-radius: 4px;
|
|
126
|
+
}
|
|
120
127
|
`
|
|
121
128
|
];
|
|
122
129
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"things-editor-http-body.js","sourceRoot":"","sources":["../../client/editors/things-editor-http-body.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE;;;;;;;EAOE;AAGa,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;
|
|
1
|
+
{"version":3,"file":"things-editor-http-body.js","sourceRoot":"","sources":["../../client/editors/things-editor-http-body.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE;;;;;;;EAOE;AAGa,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAgDe,UAAK,GAA8B,EAAE,CAAA;IAyEnE,CAAC;IAvEC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAEpE,OAAO,IAAI,CAAA;;6DAE8C,IAAI,IAAI,MAAM;;;kEAGT,IAAI,IAAI,WAAW;;;;;;;qBAOhE,IAAI,IAAI,uBAAuB;;;;;4DAKQ,IAAI,IAAI,KAAK;;;+DAGV,IAAI,IAAI,QAAQ;;;gEAGf,IAAI,IAAI,SAAS;;;;QAIzE,IAAI,KAAK,MAAM;YACf,CAAC,CAAC,IAAI,CAAA;cACA,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;;+FAGqB,QAAQ;;WAE5F;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,iBAAiB,CAAC,WAAW;QAC3B,OAAO,IAAI,CAAA;;;;sEAIuD,WAAW,IAAI,MAAM;;;sEAGrB,WAAW,IAAI,MAAM;;;;KAItF,CAAA;IACH,CAAC;IAED,SAAS,CAAC,CAAC;QACT,IAAI,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;QAEpB,IAAI,CAAC,KAAK,mCACL,IAAI,CAAC,KAAK,KACb,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,KAAK,GAC1B,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAvHM,2BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDAAsC;AAhD9C,oBAAoB;IADxC,aAAa,CAAC,yBAAyB,CAAC;GACpB,oBAAoB,CAyHxC;eAzHoB,oBAAoB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n/**\nhttp body editor element\n\nExample:\n\n <things-editor-http-body value=${map}>\n </things-editor-http-body>\n*/\n\n@customElement('things-editor-http-body')\nexport default class ThingsEditorHttpBody extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n\n width: 100%;\n overflow: hidden;\n border: 1px solid #ccc;\n margin: 5px 0;\n }\n\n div {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n }\n\n div[kind] {\n border-bottom: 1px solid #aaa;\n background-color: #ddd;\n }\n\n div[accessor] {\n background-color: #eee;\n }\n\n label {\n margin: 0 12px 0 3px;\n }\n\n #accessor {\n flex: 1;\n min-height: 20px;\n margin: 2px;\n }\n\n select,\n ox-select,\n input:not([type='checkbox']) {\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n }\n `\n ]\n\n @property({ type: Object }) value: { [key: string]: string } = {}\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n var { kind = 'none', accessor = '', contentType } = this.value || {}\n\n return html`\n <div kind>\n <input type=\"radio\" id=\"none\" name=\"kind\" .checked=${kind == 'none'} value=\"none\" />\n <label for=\"none\">none</label>\n\n <input type=\"radio\" id=\"form-data\" name=\"kind\" .checked=${kind == 'form-data'} value=\"form-data\" disabled />\n <label for=\"form-data\">form-data</label>\n\n <input\n type=\"radio\"\n id=\"x-www-form-urlencoded\"\n name=\"kind\"\n .checked=${kind == 'x-www-form-urlencoded'}\n value=\"x-www-form-urlencoded\"\n />\n <label for=\"x-www-form-urlencoded\">x-www-form-urlencoded</label>\n\n <input type=\"radio\" id=\"raw\" name=\"kind\" .checked=${kind == 'raw'} value=\"raw\" />\n <label for=\"raw\">raw</label>\n\n <input type=\"radio\" id=\"binary\" name=\"kind\" .checked=${kind == 'binary'} value=\"binary\" disabled />\n <label for=\"binary\">binary</label>\n\n <input type=\"radio\" id=\"GraphQL\" name=\"kind\" .checked=${kind == 'GraphQL'} value=\"GraphQL\" disabled />\n <label for=\"GraphQL\">GraphQL</label>\n </div>\n\n ${kind !== 'none'\n ? html`\n ${kind == 'raw' ? this.renderContentType(contentType) : html``}\n <div accessor>\n <label for=\"accessor\">accessor</label>\n <input type=\"text\" id=\"accessor\" name=\"accessor\" placeholder=\"accessor\" .value=${accessor} />\n </div>\n `\n : html``}\n `\n }\n\n renderContentType(contentType) {\n return html`\n <div>\n <label>content-type</label>\n <div>\n <input type=\"radio\" id=\"text\" name=\"contentType\" .checked=${contentType == 'text'} value=\"text\" />\n <label for=\"text\">Text</label>\n\n <input type=\"radio\" id=\"json\" name=\"contentType\" .checked=${contentType == 'json'} value=\"json\" disabled />\n <label for=\"json\">Json</label>\n </div>\n </div>\n `\n }\n\n _onChange(e) {\n var input = e.target\n\n this.value = {\n ...this.value,\n [input.name]: input.value\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|