@openremote/or-json-forms 1.8.0-snapshot.20250725070921 → 1.8.0-snapshot.20250725120000

package/lib/layouts/layout-vertical-element.js

@@ -1,133 +1,345 @@
-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`
-    
-    #dynamic-wrapper {
-        display: table;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { computeLabel, createDefaultValue, getSchema, isControl, mapStateToControlProps, Paths } from "@jsonforms/core";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { LayoutBaseElement } from "./layout-base-element";
+import { controlWithoutLabel, getLabel, getSchemaPicker, getTemplateFromProps, showJsonEditor } from "../util";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import { i18next } from "@openremote/or-translate";
+import { OrMwcDialog, showDialog } 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, baseStyle, panelStyle } from "../styles";
+// language=CSS
+const style = css `
+    
+    #dynamic-wrapper {
+        display: table;
+    }
+    
+    #dynamic-wrapper .row {
+        display: table-row;
+    }
+    
+    #dynamic-wrapper .row:hover .button-clear {
+        visibility: visible;
+    }
+    
+    #dynamic-wrapper .row > div {
+        display: table-cell;
+    }
+    
+    .value-container {
+        padding: 0 0 20px 10px;
+    }
+
+    .key-container {
+        padding: 0 10px 20px 0;
+    }
+
+    .value-container, .key-container {
+        vertical-align: top;
+    }
+
+    .key-container or-mwc-input, .value-container or-mwc-input {
+        display: block;
+    }
+
+    .value-container > .item-container {
+        margin: 0;
+    }
+
+    .value-container > .item-container > .delete-container {
+        display: none;
+    }
+
+    .value-container > .item-container :first-child {
+        border: 0;
+        padding: 0;
+        margin: 0;
+        flex: 1;
+    }
+`;
+function isDynamic(schema) {
+    return schema.allOf === undefined && schema.anyOf === undefined && (schema.properties === undefined || Object.keys(schema.properties).length === 0);
+}
+let LayoutVerticalElement = class LayoutVerticalElement extends LayoutBaseElement {
+    static get styles() {
+        return [
+            baseStyle,
+            panelStyle,
+            style
+        ];
     }
-    
-    #dynamic-wrapper .row {
-        display: table-row;
+    render() {
+        const optionalProps = [];
+        const jsonFormsState = { jsonforms: Object.assign({}, this.state) };
+        const rootSchema = getSchema(jsonFormsState);
+        const dynamic = isDynamic(this.schema);
+        let dynamicPropertyRegex = ".+";
+        let dynamicValueSchema;
+        if (dynamic) {
+            if (typeof this.schema.patternProperties === "object") {
+                const patternObjs = Object.entries(this.schema.patternProperties);
+                if (patternObjs.length === 1) {
+                    dynamicPropertyRegex = patternObjs[0][0];
+                    dynamicValueSchema = patternObjs[0][1];
+                }
+            }
+            else if (typeof this.schema.additionalProperties === "object") {
+                dynamicValueSchema = this.schema.additionalProperties;
+            }
+        }
+        const header = this.minimal ? `` : html `
+            <div slot="header">
+                <span>${this.label ? computeLabel(this.label, this.required, false) : ""}</span>
+                ${this.type ? html `<span id="type-label">${this.type}</span>` : ``}
+            </div>
+            <div id="header-description" slot="header-description">
+                <div id="errors">
+                    ${!this.errors ? `` : html `<or-icon icon="alert"></or-icon><span>${this.errors}</span>`}
+                </div>
+                <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>
+            </div>
+        `;
+        let contentTemplate;
+        if (dynamic && dynamicValueSchema) {
+            contentTemplate = this._getDynamicContentTemplate(dynamicPropertyRegex, dynamicValueSchema);
+        }
+        else if (this.getChildProps().length > 0) {
+            contentTemplate = this.getChildProps().map((childProps) => {
+                if (isControl(childProps.uischema)) {
+                    const controlProps = childProps;
+                    const stateControlProps = mapStateToControlProps(jsonFormsState, controlProps);
+                    stateControlProps.label = stateControlProps.label || getLabel(this.schema, rootSchema, undefined, childProps.uischema.scope) || "";
+                    childProps.label = stateControlProps.label;
+                    childProps.required = !!stateControlProps.required;
+                    if (!stateControlProps.required && stateControlProps.data === undefined) {
+                        // Optional property with no data so show this in the add parameter dialog
+                        optionalProps.push(stateControlProps);
+                        return html ``;
+                    }
+                }
+                return getTemplateFromProps(this.state, childProps);
+            }).filter(t => t !== undefined);
+        }
+        const expandable = (!!contentTemplate && (!Array.isArray(contentTemplate) || contentTemplate.length > 0)) || (!this.errors && optionalProps.length > 0);
+        const content = html `
+            ${header}
+            <div id="content-wrapper" slot="content">
+                <div id="content">
+                    ${contentTemplate || ``}
+                </div>
+
+                ${this.errors || (optionalProps.length === 0 && !dynamic) ? `` : html `
+                        <div id="footer">
+                            <or-mwc-input .type="${InputType.BUTTON}" label="addParameter" icon="plus" @or-mwc-input-changed="${() => this._addParameter(rootSchema, optionalProps, dynamicPropertyRegex, dynamicValueSchema)}"></or-mwc-input>
+                        </div>`}
+            </div>
+        `;
+        return this.minimal ? html `<div>${content}</div>` : html `<or-collapsible-panel .expandable="${expandable}">${content}</or-collapsible-panel>`;
     }
-    
-    #dynamic-wrapper .row:hover .button-clear {
-        visibility: visible;
+    _getDynamicContentTemplate(dynamicPropertyRegex, dynamicValueSchema) {
+        if (!this.data) {
+            return undefined;
+        }
+        const deleteHandler = (key) => {
+            const data = Object.assign({}, this.data);
+            delete data[key];
+            this.handleChange(this.path, data);
+        };
+        const keyChangeHandler = (orInput, oldKey, newKey) => {
+            if (!orInput.valid) {
+                return;
+            }
+            if (this.data[newKey] !== undefined) {
+                orInput.setCustomValidity(i18next.t("validation.keyAlreadyExists"));
+                return;
+            }
+            else {
+                orInput.setCustomValidity(undefined);
+            }
+            const data = Object.assign({}, this.data);
+            const value = data[oldKey];
+            delete data[oldKey];
+            data[newKey] = value;
+            this.handleChange(this.path, data);
+        };
+        const props = {
+            renderers: this.renderers,
+            uischema: controlWithoutLabel("#"),
+            enabled: this.enabled,
+            visible: this.visible,
+            path: "",
+            schema: dynamicValueSchema,
+            minimal: true,
+            required: false,
+            label: ""
+        };
+        const getDynamicValueTemplate = (key, value) => {
+            props.path = Paths.compose(this.path, key);
+            return getTemplateFromProps(this.state, props) || html ``;
+        };
+        return html `
+            <div id="dynamic-wrapper">
+                ${Object.entries(this.data).map(([key, value]) => {
+            return html `
+                        <div class="row">
+                            <div class="key-container">
+                                <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>
+                            </div>
+                            <div class="value-container">
+                                ${getDynamicValueTemplate(key, value)}
+                            </div>
+                            <div class="delete-container">
+                                <button class="button-clear" @click="${() => deleteHandler(key)}"><or-icon icon="close-circle"></or-icon></input>
+                            </div>
+                        </div>
+                    `;
+        })}
+            </div>
+        `;
     }
-    
-    #dynamic-wrapper .row > div {
-        display: table-cell;
+    _showJson(ev) {
+        ev.stopPropagation();
+        showJsonEditor(this.title || this.schema.title || "", this.data, (newValue) => {
+            this.handleChange(this.path || "", newValue);
+        });
     }
-    
-    .value-container {
-        padding: 0 0 20px 10px;
+    _addParameter(rootSchema, optionalProps, dynamicPropertyRegex, dynamicValueSchema) {
+        const dynamic = optionalProps.length === 0;
+        let selectedParameter;
+        let selectedOneOf;
+        const listItems = optionalProps.map(props => {
+            const labelStr = computeLabel(props.label, !!props.required, false);
+            return {
+                text: labelStr,
+                value: labelStr,
+                data: props
+            };
+        });
+        const onParamChanged = (selected) => {
+            selectedParameter = selected;
+            const isOneOf = !!(selectedParameter && selectedParameter.schema && selectedParameter.schema.oneOf);
+            dialog.shadowRoot.getElementById("add-btn").disabled = isOneOf;
+            dialog.requestUpdate();
+        };
+        // const keyValue: [any, any] = [undefined, undefined];
+        // const onKeyValueChanged = (value: any, index: 0 | 1) => {
+        //     keyValue[index] = value;
+        //     const valid = keyValue[0] && keyValue[1] !== undefined;
+        //     (dialog.shadowRoot!.getElementById("add-btn") as OrMwcInput).disabled = !valid;
+        // };
+        let keyValue;
+        const onKeyChanged = (event) => {
+            const keyInput = event.currentTarget;
+            keyInput.setCustomValidity(undefined);
+            keyValue = keyInput.currentValue;
+            let valid = keyInput.valid;
+            if (this.data[keyValue] !== undefined) {
+                valid = false;
+                keyInput.setCustomValidity(i18next.t("validation.keyAlreadyExists"));
+            }
+            dialog.shadowRoot.getElementById("add-btn").disabled = !valid;
+        };
+        const dialogContentProvider = () => {
+            // Only set when !dynamic
+            let schemaPicker = undefined;
+            if (selectedParameter && selectedParameter.schema && selectedParameter.schema.oneOf) {
+                const handleChange = (selectedSchema) => {
+                    selectedOneOf = selectedSchema;
+                    dialog.shadowRoot.getElementById("add-btn").disabled = !selectedOneOf;
+                    dialog.shadowRoot.getElementById("schema-description").innerHTML = (selectedOneOf ? selectedOneOf.description : i18next.t("schema.selectTypeMessage")) || i18next.t("schema.noDescriptionAvailable");
+                };
+                schemaPicker = getSchemaPicker(rootSchema, selectedParameter.schema, selectedParameter.path, "oneOf", selectedParameter.label, handleChange);
+            }
+            return html `
+                <div class="col">
+                    <form id="mdc-dialog-form-add" class="row">
+                        ${dynamic ? `` : html `
+                            <div id="type-list" class="col">
+                                <or-mwc-list @or-mwc-list-changed="${(evt) => { if (evt.detail.length === 1)
+                onParamChanged(evt.detail[0].data); }}" .listItems="${listItems}" id="parameter-list"></or-mwc-list>
+                            </div>
+                        `}
+                        <div id="parameter-desc" class="col">
+                            ${!selectedParameter ? `` : html `
+                                <or-translate id="parameter-title" value="${selectedParameter.label}"></or-translate>
+                                <p>${selectedParameter.description}</p>`}
+                            ${!dynamic ? !schemaPicker ? `` : html `
+                                <style>
+                                    #schema-picker {
+                                        align-self: stretch;
+                                        margin: 10px;
+                                        display: flex;
+                                        align-items: center;
+                                    }
+                                    #schema-picker > or-translate {
+                                        padding-right: 20px;
+                                    }
+                                    #schema-picker > or-mwc-input {
+                                        flex: 1;
+                                    }
+                                </style>
+                                <div id="schema-picker">
+                                    <or-translate style="justify-self: left;" value="type"></or-translate>
+                                    ${schemaPicker}
+                                </div>
+                                <p id="schema-description">${i18next.t("schema.selectTypeMessage")}</p>`
+                : html `
+                                <style>
+                                    #dynamic-wrapper > or-mwc-input {
+                                        display: block;
+                                        margin: 10px;
+                                    }
+                                </style>
+                                <div id="dynamic-wrapper">
+                                    <or-mwc-input required .type="${InputType.TEXT}" .pattern="${dynamicPropertyRegex}" .label="${i18next.t("schema.keyInputLabel")}" @keyup="${(evt) => onKeyChanged(evt)}"></or-mwc-input>
+                                </div>
+                            `}
+                        </div>
+                    </form>
+                </div>
+            `;
+        };
+        const dialog = showDialog(new OrMwcDialog()
+            .setContent(dialogContentProvider)
+            .setStyles(addItemOrParameterDialogStyle)
+            .setHeading((this.label ? computeLabel(this.label, this.required, false) + " - " : "") + i18next.t("addParameter"))
+            .setActions([
+            {
+                actionName: "cancel",
+                content: "cancel"
+            },
+            {
+                default: true,
+                actionName: "add",
+                action: () => {
+                    const key = dynamic ? keyValue : selectedParameter.path.split(".").pop();
+                    const data = Object.assign({}, this.data);
+                    const schema = dynamic ? dynamicValueSchema : selectedParameter.schema;
+                    data[key] = Array.isArray(schema.type) ? null : ((selectedOneOf ? selectedOneOf.defaultValueCreator() : undefined) || createDefaultValue(schema, rootSchema));
+                    this.handleChange(this.path || "", data);
+                },
+                content: html `<or-mwc-input id="add-btn" .type="${InputType.BUTTON}" disabled label="add"></or-mwc-input>`
+            }
+        ])
+            .setDismissAction(null));
     }
-
-    .key-container {
-        padding: 0 10px 20px 0;
-    }
-
-    .value-container, .key-container {
-        vertical-align: top;
-    }
-
-    .key-container or-mwc-input, .value-container or-mwc-input {
-        display: block;
-    }
-
-    .value-container > .item-container {
-        margin: 0;
-    }
-
-    .value-container > .item-container > .delete-container {
-        display: none;
-    }
-
-    .value-container > .item-container :first-child {
-        border: 0;
-        padding: 0;
-        margin: 0;
-        flex: 1;
-    }
-`;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`
-            <div slot="header">
-                <span>${this.label?e(this.label,this.required,!1):""}</span>
-                ${this.type?l`<span id="type-label">${this.type}</span>`:""}
-            </div>
-            <div id="header-description" slot="header-description">
-                <div id="errors">
-                    ${!this.errors?"":l`<or-icon icon="alert"></or-icon><span>${this.errors}</span>`}
-                </div>
-                <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>
-            </div>
-        `;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`
-            ${h}
-            <div id="content-wrapper" slot="content">
-                <div id="content">
-                    ${o||""}
-                </div>
-
-                ${this.errors||0===s.length&&!c?"":l`
-                        <div id="footer">
-                            <or-mwc-input .type="${v.BUTTON}" label="addParameter" icon="plus" @or-mwc-input-changed="${()=>this._addParameter(d,s,p,t)}"></or-mwc-input>
-                        </div>`}
-            </div>
-        `;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`
-            <div id="dynamic-wrapper">
-                ${Object.entries(this.data).map(([t,a])=>l`
-                        <div class="row">
-                            <div class="key-container">
-                                <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>
-                            </div>
-                            <div class="value-container">
-                                ${i.path=o.compose(this.path,t),u(this.state,i)||l``}
-                            </div>
-                            <div class="delete-container">
-                                <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>
-                            </div>
-                        </div>
-                    `)}
-            </div>
-        `}_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`
-                <div class="col">
-                    <form id="mdc-dialog-form-add" class="row">
-                        ${c?"":l`
-                            <div id="type-list" class="col">
-                                <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>
-                            </div>
-                        `}
-                        <div id="parameter-desc" class="col">
-                            ${!s?"":l`
-                                <or-translate id="parameter-title" value="${s.label}"></or-translate>
-                                <p>${s.description}</p>`}
-                            ${!c?!e?"":l`
-                                <style>
-                                    #schema-picker {
-                                        align-self: stretch;
-                                        margin: 10px;
-                                        display: flex;
-                                        align-items: center;
-                                    }
-                                    #schema-picker > or-translate {
-                                        padding-right: 20px;
-                                    }
-                                    #schema-picker > or-mwc-input {
-                                        flex: 1;
-                                    }
-                                </style>
-                                <div id="schema-picker">
-                                    <or-translate style="justify-self: left;" value="type"></or-translate>
-                                    ${e}
-                                </div>
-                                <p id="schema-description">${b.t("schema.selectTypeMessage")}</p>`:l`
-                                <style>
-                                    #dynamic-wrapper > or-mwc-input {
-                                        display: block;
-                                        margin: 10px;
-                                    }
-                                </style>
-                                <div id="dynamic-wrapper">
-                                    <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>
-                                </div>
-                            `}
-                        </div>
-                    </form>
-                </div>
-            `}).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};
+};
+__decorate([
+    property()
+], LayoutVerticalElement.prototype, "minimal", void 0);
+__decorate([
+    property()
+], LayoutVerticalElement.prototype, "type", void 0);
+LayoutVerticalElement = __decorate([
+    customElement("or-json-forms-vertical-layout")
+], LayoutVerticalElement);
+export { LayoutVerticalElement };
+//# sourceMappingURL=layout-vertical-element.js.map