@openremote/or-json-forms 1.8.0-snapshot.20250725120001 → 1.8.0-snapshot.20250725123024
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/README.md +113 -113
- package/custom-elements.json +2 -2
- package/dist/umd/index.js +1105 -1105
- package/dist/umd/index.js.map +1 -1
- package/dist/umd/index.orbundle.js +1163 -1163
- package/dist/umd/index.orbundle.js.map +1 -1
- package/lib/base-element.js +1 -57
- package/lib/controls/control-array-element.js +83 -277
- package/lib/controls/control-base-element.js +1 -48
- package/lib/controls/control-input-element.js +20 -157
- package/lib/index.js +7 -141
- package/lib/layouts/layout-base-element.js +1 -29
- package/lib/layouts/layout-vertical-element.js +128 -340
- package/lib/standard-renderers.js +12 -188
- package/lib/styles.js +148 -156
- package/lib/util.js +23 -291
- package/package.json +4 -4
|
@@ -1,345 +1,133 @@
|
|
|
1
|
-
var __decorate =
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { computeLabel, createDefaultValue, getSchema, isControl, mapStateToControlProps, Paths } from "@jsonforms/core";
|
|
8
|
-
import { css, html } from "lit";
|
|
9
|
-
import { customElement, property } from "lit/decorators.js";
|
|
10
|
-
import { LayoutBaseElement } from "./layout-base-element";
|
|
11
|
-
import { controlWithoutLabel, getLabel, getSchemaPicker, getTemplateFromProps, showJsonEditor } from "../util";
|
|
12
|
-
import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
|
|
13
|
-
import { i18next } from "@openremote/or-translate";
|
|
14
|
-
import { OrMwcDialog, showDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
|
|
15
|
-
import "@openremote/or-mwc-components/or-mwc-list";
|
|
16
|
-
import "@openremote/or-components/or-collapsible-panel";
|
|
17
|
-
import { addItemOrParameterDialogStyle, baseStyle, panelStyle } from "../styles";
|
|
18
|
-
// language=CSS
|
|
19
|
-
const style = css `
|
|
20
|
-
|
|
21
|
-
#dynamic-wrapper {
|
|
22
|
-
display: table;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
#dynamic-wrapper .row {
|
|
26
|
-
display: table-row;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
#dynamic-wrapper .row:hover .button-clear {
|
|
30
|
-
visibility: visible;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
#dynamic-wrapper .row > div {
|
|
34
|
-
display: table-cell;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.value-container {
|
|
38
|
-
padding: 0 0 20px 10px;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.key-container {
|
|
42
|
-
padding: 0 10px 20px 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.value-container, .key-container {
|
|
46
|
-
vertical-align: top;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.key-container or-mwc-input, .value-container or-mwc-input {
|
|
50
|
-
display: block;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.value-container > .item-container {
|
|
54
|
-
margin: 0;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.value-container > .item-container > .delete-container {
|
|
58
|
-
display: none;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.value-container > .item-container :first-child {
|
|
62
|
-
border: 0;
|
|
63
|
-
padding: 0;
|
|
64
|
-
margin: 0;
|
|
65
|
-
flex: 1;
|
|
66
|
-
}
|
|
67
|
-
`;
|
|
68
|
-
function isDynamic(schema) {
|
|
69
|
-
return schema.allOf === undefined && schema.anyOf === undefined && (schema.properties === undefined || Object.keys(schema.properties).length === 0);
|
|
70
|
-
}
|
|
71
|
-
let LayoutVerticalElement = class LayoutVerticalElement extends LayoutBaseElement {
|
|
72
|
-
static get styles() {
|
|
73
|
-
return [
|
|
74
|
-
baseStyle,
|
|
75
|
-
panelStyle,
|
|
76
|
-
style
|
|
77
|
-
];
|
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,s=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(o<3?r(s):o>3?r(t,i,s):r(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s};import{computeLabel as e,createDefaultValue as t,getSchema as i,isControl as a,mapStateToControlProps as r,Paths as o}from"@jsonforms/core";import{css as s,html as l}from"lit";import{customElement as n,property as d}from"lit/decorators.js";import{LayoutBaseElement as c}from"./layout-base-element";import{controlWithoutLabel as p,getLabel as m,getSchemaPicker as h,getTemplateFromProps as u,showJsonEditor as y}from"../util";import{InputType as v}from"@openremote/or-mwc-components/or-mwc-input";import{i18next as b}from"@openremote/or-translate";import{OrMwcDialog as f,showDialog as g}from"@openremote/or-mwc-components/or-mwc-dialog";import"@openremote/or-mwc-components/or-mwc-list";import"@openremote/or-components/or-collapsible-panel";import{addItemOrParameterDialogStyle as w,baseStyle as $,panelStyle as j}from"../styles";let style=s`
|
|
2
|
+
|
|
3
|
+
#dynamic-wrapper {
|
|
4
|
+
display: table;
|
|
78
5
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
const rootSchema = getSchema(jsonFormsState);
|
|
83
|
-
const dynamic = isDynamic(this.schema);
|
|
84
|
-
let dynamicPropertyRegex = ".+";
|
|
85
|
-
let dynamicValueSchema;
|
|
86
|
-
if (dynamic) {
|
|
87
|
-
if (typeof this.schema.patternProperties === "object") {
|
|
88
|
-
const patternObjs = Object.entries(this.schema.patternProperties);
|
|
89
|
-
if (patternObjs.length === 1) {
|
|
90
|
-
dynamicPropertyRegex = patternObjs[0][0];
|
|
91
|
-
dynamicValueSchema = patternObjs[0][1];
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
else if (typeof this.schema.additionalProperties === "object") {
|
|
95
|
-
dynamicValueSchema = this.schema.additionalProperties;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
const header = this.minimal ? `` : html `
|
|
99
|
-
<div slot="header">
|
|
100
|
-
<span>${this.label ? computeLabel(this.label, this.required, false) : ""}</span>
|
|
101
|
-
${this.type ? html `<span id="type-label">${this.type}</span>` : ``}
|
|
102
|
-
</div>
|
|
103
|
-
<div id="header-description" slot="header-description">
|
|
104
|
-
<div id="errors">
|
|
105
|
-
${!this.errors ? `` : html `<or-icon icon="alert"></or-icon><span>${this.errors}</span>`}
|
|
106
|
-
</div>
|
|
107
|
-
<div id="header-buttons"><or-mwc-input .type="${InputType.BUTTON}" outlined label="json" icon="pencil" @or-mwc-input-changed="${(ev) => this._showJson(ev)}"></or-mwc-input></div>
|
|
108
|
-
</div>
|
|
109
|
-
`;
|
|
110
|
-
let contentTemplate;
|
|
111
|
-
if (dynamic && dynamicValueSchema) {
|
|
112
|
-
contentTemplate = this._getDynamicContentTemplate(dynamicPropertyRegex, dynamicValueSchema);
|
|
113
|
-
}
|
|
114
|
-
else if (this.getChildProps().length > 0) {
|
|
115
|
-
contentTemplate = this.getChildProps().map((childProps) => {
|
|
116
|
-
if (isControl(childProps.uischema)) {
|
|
117
|
-
const controlProps = childProps;
|
|
118
|
-
const stateControlProps = mapStateToControlProps(jsonFormsState, controlProps);
|
|
119
|
-
stateControlProps.label = stateControlProps.label || getLabel(this.schema, rootSchema, undefined, childProps.uischema.scope) || "";
|
|
120
|
-
childProps.label = stateControlProps.label;
|
|
121
|
-
childProps.required = !!stateControlProps.required;
|
|
122
|
-
if (!stateControlProps.required && stateControlProps.data === undefined) {
|
|
123
|
-
// Optional property with no data so show this in the add parameter dialog
|
|
124
|
-
optionalProps.push(stateControlProps);
|
|
125
|
-
return html ``;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
return getTemplateFromProps(this.state, childProps);
|
|
129
|
-
}).filter(t => t !== undefined);
|
|
130
|
-
}
|
|
131
|
-
const expandable = (!!contentTemplate && (!Array.isArray(contentTemplate) || contentTemplate.length > 0)) || (!this.errors && optionalProps.length > 0);
|
|
132
|
-
const content = html `
|
|
133
|
-
${header}
|
|
134
|
-
<div id="content-wrapper" slot="content">
|
|
135
|
-
<div id="content">
|
|
136
|
-
${contentTemplate || ``}
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
${this.errors || (optionalProps.length === 0 && !dynamic) ? `` : html `
|
|
140
|
-
<div id="footer">
|
|
141
|
-
<or-mwc-input .type="${InputType.BUTTON}" label="addParameter" icon="plus" @or-mwc-input-changed="${() => this._addParameter(rootSchema, optionalProps, dynamicPropertyRegex, dynamicValueSchema)}"></or-mwc-input>
|
|
142
|
-
</div>`}
|
|
143
|
-
</div>
|
|
144
|
-
`;
|
|
145
|
-
return this.minimal ? html `<div>${content}</div>` : html `<or-collapsible-panel .expandable="${expandable}">${content}</or-collapsible-panel>`;
|
|
6
|
+
|
|
7
|
+
#dynamic-wrapper .row {
|
|
8
|
+
display: table-row;
|
|
146
9
|
}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
}
|
|
151
|
-
const deleteHandler = (key) => {
|
|
152
|
-
const data = Object.assign({}, this.data);
|
|
153
|
-
delete data[key];
|
|
154
|
-
this.handleChange(this.path, data);
|
|
155
|
-
};
|
|
156
|
-
const keyChangeHandler = (orInput, oldKey, newKey) => {
|
|
157
|
-
if (!orInput.valid) {
|
|
158
|
-
return;
|
|
159
|
-
}
|
|
160
|
-
if (this.data[newKey] !== undefined) {
|
|
161
|
-
orInput.setCustomValidity(i18next.t("validation.keyAlreadyExists"));
|
|
162
|
-
return;
|
|
163
|
-
}
|
|
164
|
-
else {
|
|
165
|
-
orInput.setCustomValidity(undefined);
|
|
166
|
-
}
|
|
167
|
-
const data = Object.assign({}, this.data);
|
|
168
|
-
const value = data[oldKey];
|
|
169
|
-
delete data[oldKey];
|
|
170
|
-
data[newKey] = value;
|
|
171
|
-
this.handleChange(this.path, data);
|
|
172
|
-
};
|
|
173
|
-
const props = {
|
|
174
|
-
renderers: this.renderers,
|
|
175
|
-
uischema: controlWithoutLabel("#"),
|
|
176
|
-
enabled: this.enabled,
|
|
177
|
-
visible: this.visible,
|
|
178
|
-
path: "",
|
|
179
|
-
schema: dynamicValueSchema,
|
|
180
|
-
minimal: true,
|
|
181
|
-
required: false,
|
|
182
|
-
label: ""
|
|
183
|
-
};
|
|
184
|
-
const getDynamicValueTemplate = (key, value) => {
|
|
185
|
-
props.path = Paths.compose(this.path, key);
|
|
186
|
-
return getTemplateFromProps(this.state, props) || html ``;
|
|
187
|
-
};
|
|
188
|
-
return html `
|
|
189
|
-
<div id="dynamic-wrapper">
|
|
190
|
-
${Object.entries(this.data).map(([key, value]) => {
|
|
191
|
-
return html `
|
|
192
|
-
<div class="row">
|
|
193
|
-
<div class="key-container">
|
|
194
|
-
<or-mwc-input .type="${InputType.TEXT}" @or-mwc-input-changed="${(ev) => keyChangeHandler(ev.currentTarget, key, ev.detail.value)}" required .pattern="${dynamicPropertyRegex}" .value="${key}"></or-mwc-input>
|
|
195
|
-
</div>
|
|
196
|
-
<div class="value-container">
|
|
197
|
-
${getDynamicValueTemplate(key, value)}
|
|
198
|
-
</div>
|
|
199
|
-
<div class="delete-container">
|
|
200
|
-
<button class="button-clear" @click="${() => deleteHandler(key)}"><or-icon icon="close-circle"></or-icon></input>
|
|
201
|
-
</div>
|
|
202
|
-
</div>
|
|
203
|
-
`;
|
|
204
|
-
})}
|
|
205
|
-
</div>
|
|
206
|
-
`;
|
|
10
|
+
|
|
11
|
+
#dynamic-wrapper .row:hover .button-clear {
|
|
12
|
+
visibility: visible;
|
|
207
13
|
}
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
this.handleChange(this.path || "", newValue);
|
|
212
|
-
});
|
|
14
|
+
|
|
15
|
+
#dynamic-wrapper .row > div {
|
|
16
|
+
display: table-cell;
|
|
213
17
|
}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
let selectedOneOf;
|
|
218
|
-
const listItems = optionalProps.map(props => {
|
|
219
|
-
const labelStr = computeLabel(props.label, !!props.required, false);
|
|
220
|
-
return {
|
|
221
|
-
text: labelStr,
|
|
222
|
-
value: labelStr,
|
|
223
|
-
data: props
|
|
224
|
-
};
|
|
225
|
-
});
|
|
226
|
-
const onParamChanged = (selected) => {
|
|
227
|
-
selectedParameter = selected;
|
|
228
|
-
const isOneOf = !!(selectedParameter && selectedParameter.schema && selectedParameter.schema.oneOf);
|
|
229
|
-
dialog.shadowRoot.getElementById("add-btn").disabled = isOneOf;
|
|
230
|
-
dialog.requestUpdate();
|
|
231
|
-
};
|
|
232
|
-
// const keyValue: [any, any] = [undefined, undefined];
|
|
233
|
-
// const onKeyValueChanged = (value: any, index: 0 | 1) => {
|
|
234
|
-
// keyValue[index] = value;
|
|
235
|
-
// const valid = keyValue[0] && keyValue[1] !== undefined;
|
|
236
|
-
// (dialog.shadowRoot!.getElementById("add-btn") as OrMwcInput).disabled = !valid;
|
|
237
|
-
// };
|
|
238
|
-
let keyValue;
|
|
239
|
-
const onKeyChanged = (event) => {
|
|
240
|
-
const keyInput = event.currentTarget;
|
|
241
|
-
keyInput.setCustomValidity(undefined);
|
|
242
|
-
keyValue = keyInput.currentValue;
|
|
243
|
-
let valid = keyInput.valid;
|
|
244
|
-
if (this.data[keyValue] !== undefined) {
|
|
245
|
-
valid = false;
|
|
246
|
-
keyInput.setCustomValidity(i18next.t("validation.keyAlreadyExists"));
|
|
247
|
-
}
|
|
248
|
-
dialog.shadowRoot.getElementById("add-btn").disabled = !valid;
|
|
249
|
-
};
|
|
250
|
-
const dialogContentProvider = () => {
|
|
251
|
-
// Only set when !dynamic
|
|
252
|
-
let schemaPicker = undefined;
|
|
253
|
-
if (selectedParameter && selectedParameter.schema && selectedParameter.schema.oneOf) {
|
|
254
|
-
const handleChange = (selectedSchema) => {
|
|
255
|
-
selectedOneOf = selectedSchema;
|
|
256
|
-
dialog.shadowRoot.getElementById("add-btn").disabled = !selectedOneOf;
|
|
257
|
-
dialog.shadowRoot.getElementById("schema-description").innerHTML = (selectedOneOf ? selectedOneOf.description : i18next.t("schema.selectTypeMessage")) || i18next.t("schema.noDescriptionAvailable");
|
|
258
|
-
};
|
|
259
|
-
schemaPicker = getSchemaPicker(rootSchema, selectedParameter.schema, selectedParameter.path, "oneOf", selectedParameter.label, handleChange);
|
|
260
|
-
}
|
|
261
|
-
return html `
|
|
262
|
-
<div class="col">
|
|
263
|
-
<form id="mdc-dialog-form-add" class="row">
|
|
264
|
-
${dynamic ? `` : html `
|
|
265
|
-
<div id="type-list" class="col">
|
|
266
|
-
<or-mwc-list @or-mwc-list-changed="${(evt) => { if (evt.detail.length === 1)
|
|
267
|
-
onParamChanged(evt.detail[0].data); }}" .listItems="${listItems}" id="parameter-list"></or-mwc-list>
|
|
268
|
-
</div>
|
|
269
|
-
`}
|
|
270
|
-
<div id="parameter-desc" class="col">
|
|
271
|
-
${!selectedParameter ? `` : html `
|
|
272
|
-
<or-translate id="parameter-title" value="${selectedParameter.label}"></or-translate>
|
|
273
|
-
<p>${selectedParameter.description}</p>`}
|
|
274
|
-
${!dynamic ? !schemaPicker ? `` : html `
|
|
275
|
-
<style>
|
|
276
|
-
#schema-picker {
|
|
277
|
-
align-self: stretch;
|
|
278
|
-
margin: 10px;
|
|
279
|
-
display: flex;
|
|
280
|
-
align-items: center;
|
|
281
|
-
}
|
|
282
|
-
#schema-picker > or-translate {
|
|
283
|
-
padding-right: 20px;
|
|
284
|
-
}
|
|
285
|
-
#schema-picker > or-mwc-input {
|
|
286
|
-
flex: 1;
|
|
287
|
-
}
|
|
288
|
-
</style>
|
|
289
|
-
<div id="schema-picker">
|
|
290
|
-
<or-translate style="justify-self: left;" value="type"></or-translate>
|
|
291
|
-
${schemaPicker}
|
|
292
|
-
</div>
|
|
293
|
-
<p id="schema-description">${i18next.t("schema.selectTypeMessage")}</p>`
|
|
294
|
-
: html `
|
|
295
|
-
<style>
|
|
296
|
-
#dynamic-wrapper > or-mwc-input {
|
|
297
|
-
display: block;
|
|
298
|
-
margin: 10px;
|
|
299
|
-
}
|
|
300
|
-
</style>
|
|
301
|
-
<div id="dynamic-wrapper">
|
|
302
|
-
<or-mwc-input required .type="${InputType.TEXT}" .pattern="${dynamicPropertyRegex}" .label="${i18next.t("schema.keyInputLabel")}" @keyup="${(evt) => onKeyChanged(evt)}"></or-mwc-input>
|
|
303
|
-
</div>
|
|
304
|
-
`}
|
|
305
|
-
</div>
|
|
306
|
-
</form>
|
|
307
|
-
</div>
|
|
308
|
-
`;
|
|
309
|
-
};
|
|
310
|
-
const dialog = showDialog(new OrMwcDialog()
|
|
311
|
-
.setContent(dialogContentProvider)
|
|
312
|
-
.setStyles(addItemOrParameterDialogStyle)
|
|
313
|
-
.setHeading((this.label ? computeLabel(this.label, this.required, false) + " - " : "") + i18next.t("addParameter"))
|
|
314
|
-
.setActions([
|
|
315
|
-
{
|
|
316
|
-
actionName: "cancel",
|
|
317
|
-
content: "cancel"
|
|
318
|
-
},
|
|
319
|
-
{
|
|
320
|
-
default: true,
|
|
321
|
-
actionName: "add",
|
|
322
|
-
action: () => {
|
|
323
|
-
const key = dynamic ? keyValue : selectedParameter.path.split(".").pop();
|
|
324
|
-
const data = Object.assign({}, this.data);
|
|
325
|
-
const schema = dynamic ? dynamicValueSchema : selectedParameter.schema;
|
|
326
|
-
data[key] = Array.isArray(schema.type) ? null : ((selectedOneOf ? selectedOneOf.defaultValueCreator() : undefined) || createDefaultValue(schema, rootSchema));
|
|
327
|
-
this.handleChange(this.path || "", data);
|
|
328
|
-
},
|
|
329
|
-
content: html `<or-mwc-input id="add-btn" .type="${InputType.BUTTON}" disabled label="add"></or-mwc-input>`
|
|
330
|
-
}
|
|
331
|
-
])
|
|
332
|
-
.setDismissAction(null));
|
|
18
|
+
|
|
19
|
+
.value-container {
|
|
20
|
+
padding: 0 0 20px 10px;
|
|
333
21
|
}
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
22
|
+
|
|
23
|
+
.key-container {
|
|
24
|
+
padding: 0 10px 20px 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.value-container, .key-container {
|
|
28
|
+
vertical-align: top;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.key-container or-mwc-input, .value-container or-mwc-input {
|
|
32
|
+
display: block;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.value-container > .item-container {
|
|
36
|
+
margin: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.value-container > .item-container > .delete-container {
|
|
40
|
+
display: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.value-container > .item-container :first-child {
|
|
44
|
+
border: 0;
|
|
45
|
+
padding: 0;
|
|
46
|
+
margin: 0;
|
|
47
|
+
flex: 1;
|
|
48
|
+
}
|
|
49
|
+
`;function isDynamic(e){return void 0===e.allOf&&void 0===e.anyOf&&(void 0===e.properties||0===Object.keys(e.properties).length)}let LayoutVerticalElement=class extends c{static get styles(){return[$,j,style]}render(){let t,o,s=[],n={jsonforms:Object.assign({},this.state)},d=i(n),c=isDynamic(this.schema),p=".+";if(c)if("object"==typeof this.schema.patternProperties){let e=Object.entries(this.schema.patternProperties);1===e.length&&(p=e[0][0],t=e[0][1])}else"object"==typeof this.schema.additionalProperties&&(t=this.schema.additionalProperties);let h=this.minimal?"":l`
|
|
50
|
+
<div slot="header">
|
|
51
|
+
<span>${this.label?e(this.label,this.required,!1):""}</span>
|
|
52
|
+
${this.type?l`<span id="type-label">${this.type}</span>`:""}
|
|
53
|
+
</div>
|
|
54
|
+
<div id="header-description" slot="header-description">
|
|
55
|
+
<div id="errors">
|
|
56
|
+
${!this.errors?"":l`<or-icon icon="alert"></or-icon><span>${this.errors}</span>`}
|
|
57
|
+
</div>
|
|
58
|
+
<div id="header-buttons"><or-mwc-input .type="${v.BUTTON}" outlined label="json" icon="pencil" @or-mwc-input-changed="${e=>this._showJson(e)}"></or-mwc-input></div>
|
|
59
|
+
</div>
|
|
60
|
+
`;c&&t?o=this._getDynamicContentTemplate(p,t):this.getChildProps().length>0&&(o=this.getChildProps().map(e=>{if(a(e.uischema)){let t=r(n,e);if(t.label=t.label||m(this.schema,d,void 0,e.uischema.scope)||"",e.label=t.label,e.required=!!t.required,!t.required&&void 0===t.data)return s.push(t),l``}return u(this.state,e)}).filter(e=>void 0!==e));let y=!!o&&(!Array.isArray(o)||o.length>0)||!this.errors&&s.length>0,b=l`
|
|
61
|
+
${h}
|
|
62
|
+
<div id="content-wrapper" slot="content">
|
|
63
|
+
<div id="content">
|
|
64
|
+
${o||""}
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
${this.errors||0===s.length&&!c?"":l`
|
|
68
|
+
<div id="footer">
|
|
69
|
+
<or-mwc-input .type="${v.BUTTON}" label="addParameter" icon="plus" @or-mwc-input-changed="${()=>this._addParameter(d,s,p,t)}"></or-mwc-input>
|
|
70
|
+
</div>`}
|
|
71
|
+
</div>
|
|
72
|
+
`;return this.minimal?l`<div>${b}</div>`:l`<or-collapsible-panel .expandable="${y}">${b}</or-collapsible-panel>`}_getDynamicContentTemplate(e,t){if(!this.data)return;let i={renderers:this.renderers,uischema:p("#"),enabled:this.enabled,visible:this.visible,path:"",schema:t,minimal:!0,required:!1,label:""};return l`
|
|
73
|
+
<div id="dynamic-wrapper">
|
|
74
|
+
${Object.entries(this.data).map(([t,a])=>l`
|
|
75
|
+
<div class="row">
|
|
76
|
+
<div class="key-container">
|
|
77
|
+
<or-mwc-input .type="${v.TEXT}" @or-mwc-input-changed="${e=>((e,t,i)=>{if(!e.valid)return;if(void 0!==this.data[i])return void e.setCustomValidity(b.t("validation.keyAlreadyExists"));e.setCustomValidity(void 0);let a=Object.assign({},this.data),r=a[t];delete a[t],a[i]=r,this.handleChange(this.path,a)})(e.currentTarget,t,e.detail.value)}" required .pattern="${e}" .value="${t}"></or-mwc-input>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="value-container">
|
|
80
|
+
${i.path=o.compose(this.path,t),u(this.state,i)||l``}
|
|
81
|
+
</div>
|
|
82
|
+
<div class="delete-container">
|
|
83
|
+
<button class="button-clear" @click="${()=>(e=>{let t=Object.assign({},this.data);delete t[e],this.handleChange(this.path,t)})(t)}"><or-icon icon="close-circle"></or-icon></input>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
`)}
|
|
87
|
+
</div>
|
|
88
|
+
`}_showJson(e){e.stopPropagation(),y(this.title||this.schema.title||"",this.data,e=>{this.handleChange(this.path||"",e)})}_addParameter(i,a,r,o){let s,n,d,c=0===a.length,p=a.map(t=>{let i=e(t.label,!!t.required,!1);return{text:i,value:i,data:t}}),m=g(new f().setContent(()=>{let e;return s&&s.schema&&s.schema.oneOf&&(e=h(i,s.schema,s.path,"oneOf",s.label,e=>{n=e,m.shadowRoot.getElementById("add-btn").disabled=!n,m.shadowRoot.getElementById("schema-description").innerHTML=(n?n.description:b.t("schema.selectTypeMessage"))||b.t("schema.noDescriptionAvailable")})),l`
|
|
89
|
+
<div class="col">
|
|
90
|
+
<form id="mdc-dialog-form-add" class="row">
|
|
91
|
+
${c?"":l`
|
|
92
|
+
<div id="type-list" class="col">
|
|
93
|
+
<or-mwc-list @or-mwc-list-changed="${e=>{1===e.detail.length&&(e=>{let t=!!((s=e)&&s.schema&&s.schema.oneOf);m.shadowRoot.getElementById("add-btn").disabled=t,m.requestUpdate()})(e.detail[0].data)}}" .listItems="${p}" id="parameter-list"></or-mwc-list>
|
|
94
|
+
</div>
|
|
95
|
+
`}
|
|
96
|
+
<div id="parameter-desc" class="col">
|
|
97
|
+
${!s?"":l`
|
|
98
|
+
<or-translate id="parameter-title" value="${s.label}"></or-translate>
|
|
99
|
+
<p>${s.description}</p>`}
|
|
100
|
+
${!c?!e?"":l`
|
|
101
|
+
<style>
|
|
102
|
+
#schema-picker {
|
|
103
|
+
align-self: stretch;
|
|
104
|
+
margin: 10px;
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
}
|
|
108
|
+
#schema-picker > or-translate {
|
|
109
|
+
padding-right: 20px;
|
|
110
|
+
}
|
|
111
|
+
#schema-picker > or-mwc-input {
|
|
112
|
+
flex: 1;
|
|
113
|
+
}
|
|
114
|
+
</style>
|
|
115
|
+
<div id="schema-picker">
|
|
116
|
+
<or-translate style="justify-self: left;" value="type"></or-translate>
|
|
117
|
+
${e}
|
|
118
|
+
</div>
|
|
119
|
+
<p id="schema-description">${b.t("schema.selectTypeMessage")}</p>`:l`
|
|
120
|
+
<style>
|
|
121
|
+
#dynamic-wrapper > or-mwc-input {
|
|
122
|
+
display: block;
|
|
123
|
+
margin: 10px;
|
|
124
|
+
}
|
|
125
|
+
</style>
|
|
126
|
+
<div id="dynamic-wrapper">
|
|
127
|
+
<or-mwc-input required .type="${v.TEXT}" .pattern="${r}" .label="${b.t("schema.keyInputLabel")}" @keyup="${e=>(e=>{let t=e.currentTarget;t.setCustomValidity(void 0),d=t.currentValue;let i=t.valid;void 0!==this.data[d]&&(i=!1,t.setCustomValidity(b.t("validation.keyAlreadyExists"))),m.shadowRoot.getElementById("add-btn").disabled=!i})(e)}"></or-mwc-input>
|
|
128
|
+
</div>
|
|
129
|
+
`}
|
|
130
|
+
</div>
|
|
131
|
+
</form>
|
|
132
|
+
</div>
|
|
133
|
+
`}).setStyles(w).setHeading((this.label?e(this.label,this.required,!1)+" - ":"")+b.t("addParameter")).setActions([{actionName:"cancel",content:"cancel"},{default:!0,actionName:"add",action:()=>{let e=c?d:s.path.split(".").pop(),a=Object.assign({},this.data),r=c?o:s.schema;a[e]=Array.isArray(r.type)?null:(n?n.defaultValueCreator():void 0)||t(r,i),this.handleChange(this.path||"",a)},content:l`<or-mwc-input id="add-btn" .type="${v.BUTTON}" disabled label="add"></or-mwc-input>`}]).setDismissAction(null))}};__decorate([d()],LayoutVerticalElement.prototype,"minimal",void 0),__decorate([d()],LayoutVerticalElement.prototype,"type",void 0),LayoutVerticalElement=__decorate([n("or-json-forms-vertical-layout")],LayoutVerticalElement);export{LayoutVerticalElement};
|