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

package/lib/base-element.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,r,o){var p,a=arguments.length,y=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)y=Reflect.decorate(e,t,r,o);else for(var i=e.length-1;i>=0;i--)(p=e[i])&&(y=(a<3?p(y):a>3?p(t,r,y):p(t,r))||y);return a>3&&y&&Object.defineProperty(t,r,y),y};import{LitElement}from"lit";import{property}from"lit/decorators.js";export class BaseElement extends LitElement{set props(e){delete e.id,Object.assign(this,e)}}__decorate([property({type:Object})],BaseElement.prototype,"state",void 0),__decorate([property({type:Object})],BaseElement.prototype,"uischema",void 0),__decorate([property({type:Object})],BaseElement.prototype,"schema",void 0),__decorate([property({type:String,attribute:!1})],BaseElement.prototype,"data",void 0),__decorate([property({type:Array})],BaseElement.prototype,"renderers",void 0),__decorate([property({type:Array})],BaseElement.prototype,"cells",void 0),__decorate([property({type:String,attribute:!1})],BaseElement.prototype,"config",void 0),__decorate([property({type:Array})],BaseElement.prototype,"uischemas",void 0),__decorate([property({type:Boolean})],BaseElement.prototype,"enabled",void 0),__decorate([property({type:Boolean})],BaseElement.prototype,"visible",void 0),__decorate([property({type:String})],BaseElement.prototype,"path",void 0),__decorate([property({type:String})],BaseElement.prototype,"label",void 0),__decorate([property({type:Boolean})],BaseElement.prototype,"required",void 0),__decorate([property()],BaseElement.prototype,"errors",void 0);
+var __decorate=this&&this.__decorate||function(e,t,o,r){var a,p=arguments.length,d=p<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,o,r);else for(var i=e.length-1;i>=0;i--)(a=e[i])&&(d=(p<3?a(d):p>3?a(t,o,d):a(t,o))||d);return p>3&&d&&Object.defineProperty(t,o,d),d};import{LitElement as e}from"lit";import{property as t}from"lit/decorators.js";export class BaseElement extends e{set props(e){delete e.id,Object.assign(this,e)}}__decorate([t({type:Object})],BaseElement.prototype,"state",void 0),__decorate([t({type:Object})],BaseElement.prototype,"uischema",void 0),__decorate([t({type:Object})],BaseElement.prototype,"schema",void 0),__decorate([t({type:String,attribute:!1})],BaseElement.prototype,"data",void 0),__decorate([t({type:Array})],BaseElement.prototype,"renderers",void 0),__decorate([t({type:Array})],BaseElement.prototype,"cells",void 0),__decorate([t({type:String,attribute:!1})],BaseElement.prototype,"config",void 0),__decorate([t({type:Array})],BaseElement.prototype,"uischemas",void 0),__decorate([t({type:Boolean})],BaseElement.prototype,"enabled",void 0),__decorate([t({type:Boolean})],BaseElement.prototype,"visible",void 0),__decorate([t({type:String})],BaseElement.prototype,"path",void 0),__decorate([t({type:String})],BaseElement.prototype,"label",void 0),__decorate([t({type:Boolean})],BaseElement.prototype,"required",void 0),__decorate([t()],BaseElement.prototype,"errors",void 0);

package/lib/controls/control-array-element.js

@@ -1,6 +1,6 @@
-var __decorate=this&&this.__decorate||function(t,e,r,o){var a,i=arguments.length,s=i<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,o);else for(var n=t.length-1;n>=0;n--)(a=t[n])&&(s=(i<3?a(s):i>3?a(e,r,s):a(e,r))||s);return i>3&&s&&Object.defineProperty(e,r,s),s};import{computeLabel,createDefaultValue,mapDispatchToArrayControlProps,Paths,Resolve,update}from"@jsonforms/core";import{css,html,unsafeCSS}from"lit";import{customElement,property}from"lit/decorators.js";import{controlWithoutLabel,getCombinatorInfos,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{addItemOrParameterDialogStyle,baseStyle,panelStyle}from"../styles";import{DefaultColor4,DefaultColor5}from"@openremote/core";import{ControlBaseElement}from"./control-base-element";import{getTemplateWrapper}from"../index";const style=css`
+var __decorate=this&&this.__decorate||function(e,t,r,i){var o,a=arguments.length,s=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,r,s):o(t,r))||s);return a>3&&s&&Object.defineProperty(t,r,s),s};import{computeLabel as e,createDefaultValue as t,mapDispatchToArrayControlProps as r,Paths as i,Resolve as o,update as a}from"@jsonforms/core";import{css as s,html as n,unsafeCSS as d}from"lit";import{customElement as l,property as m}from"lit/decorators.js";import{controlWithoutLabel as c,getCombinatorInfos as p,getTemplateFromProps as h,showJsonEditor as g}from"../util";import{InputType as f}from"@openremote/or-mwc-components/or-mwc-input";import{i18next as u}from"@openremote/or-translate";import{OrMwcDialog as v,showDialog as b}from"@openremote/or-mwc-components/or-mwc-dialog";import"@openremote/or-mwc-components/or-mwc-list";import{addItemOrParameterDialogStyle as w,baseStyle as y,panelStyle as A}from"../styles";import{DefaultColor4 as I,DefaultColor5 as x}from"@openremote/core";import{ControlBaseElement as $}from"./control-base-element";import{getTemplateWrapper as E}from"../index";let style=s`
     .item-border, .drag-handle {
-        border-color: var(--or-app-color5, ${unsafeCSS(DefaultColor5)});
+        border-color: var(--or-app-color5, ${d(x)});
         border-radius: 4px;
         border-width: 1px;
         border-style: solid;
@@ -40,54 +40,54 @@ var __decorate=this&&this.__decorate||function(t,e,r,o){var a,i=arguments.length
     .item-wrapper.indicator-after {
         border-bottom-width: 3px;
         border-bottom-style: solid;
-        border-bottom-color: var(--or-app-color4, ${unsafeCSS(DefaultColor4)});
+        border-bottom-color: var(--or-app-color4, ${d(I)});
     }
 
     .item-wrapper.indicator-before {
         border-top-width: 3px;
         border-top-style: solid;
-        border-top-color: var(--or-app-color4, ${unsafeCSS(DefaultColor4)});
+        border-top-color: var(--or-app-color4, ${d(I)});
     }
     
     .drag-container > button {
         cursor: grab;
     }
-`;let ControlArrayElement=class extends ControlBaseElement{static get styles(){return[baseStyle,panelStyle,style]}shouldUpdate(t){if(t.has("schema")&&(this.itemInfos=void 0,this.resolvedSchema=Resolve.schema(this.schema,"items",this.rootSchema),Array.isArray(this.resolvedSchema.anyOf)?this.itemInfos=getCombinatorInfos(this.resolvedSchema.anyOf,this.rootSchema):Array.isArray(this.resolvedSchema.oneOf)&&(this.itemInfos=getCombinatorInfos(this.resolvedSchema.oneOf,this.rootSchema))),t.has("state")){const t=mapDispatchToArrayControlProps(this.state.dispatch);this.addItem=e=>t.addItem(this.path,e)(),this.removeItem=e=>{t.removeItems(this.path,[e])()},this.moveItem=(t,e)=>{this.state.dispatch(update(this.path,(r=>(((t,e,r)=>{let o=1;const a=t.splice(e,o)[0];o=0,t.splice(r,o,a)})(r,t,e),r))))}}return super.shouldUpdate(t)}render(){var t;const e=null!==(t=this.schema.maxItems)&&void 0!==t?t:Number.MAX_SAFE_INTEGER,r=Array.isArray(this.data)?this.data.length:0,o=this.minimal?"":html`
-            <span slot="header">${this.label?computeLabel(this.label,this.required,!1):""}</span>
+`,ControlArrayElement=class extends ${static get styles(){return[y,A,style]}shouldUpdate(e){if(e.has("schema")&&(this.itemInfos=void 0,this.resolvedSchema=o.schema(this.schema,"items",this.rootSchema),Array.isArray(this.resolvedSchema.anyOf)?this.itemInfos=p(this.resolvedSchema.anyOf,this.rootSchema):Array.isArray(this.resolvedSchema.oneOf)&&(this.itemInfos=p(this.resolvedSchema.oneOf,this.rootSchema))),e.has("state")){let e=r(this.state.dispatch);this.addItem=t=>e.addItem(this.path,t)(),this.removeItem=t=>{e.removeItems(this.path,[t])()},this.moveItem=(e,t)=>{this.state.dispatch(a(this.path,r=>{let i=1,o=r.splice(e,i)[0];return i=0,r.splice(t,i,o),r}))}}return super.shouldUpdate(e)}render(){var t;let r=null!=(t=this.schema.maxItems)?t:Number.MAX_SAFE_INTEGER,o=Array.isArray(this.data)?this.data.length:0,a=this.minimal?"":n`
+            <span slot="header">${this.label?e(this.label,this.required,!1):""}</span>
             <div id="header-description" slot="header-description">
                 <div id="errors">
-                    ${this.errors?html`<or-icon icon="alert"></or-icon><span>${this.errors}</span>`:""}
+                    ${!this.errors?"":n`<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="${t=>this._showJson(t)}"></or-mwc-input></div>
+                <div id="header-buttons"><or-mwc-input .type="${f.BUTTON}" outlined label="json" icon="pencil" @or-mwc-input-changed="${e=>this._showJson(e)}"></or-mwc-input></div>
             </div>
-        `,a=html`
-            ${o}
+        `,s=n`
+            ${a}
             <div id="content-wrapper" slot="content">
-                <div id="content" @dragover="${t=>this._onDragOver(t)}">
+                <div id="content" @dragover="${e=>this._onDragOver(e)}">
                     
-                    ${Array.isArray(this.data)?this.data.map(((t,e)=>{const r=Paths.compose(this.path,""+e),o={renderers:this.renderers,uischema:controlWithoutLabel("#"),schema:this.resolvedSchema,path:r};return this.getArrayItemWrapper(getTemplateFromProps(this.state,o)||html``,e)})):""}
+                    ${!Array.isArray(this.data)?"":this.data.map((e,t)=>{let r=i.compose(this.path,""+t),o={renderers:this.renderers,uischema:c("#"),schema:this.resolvedSchema,path:r};return this.getArrayItemWrapper(h(this.state,o)||n``,t)})}
 
                 </div>
-                ${this.errors?"":html`
+                ${this.errors?"":n`
                     <div id="footer">
-                        <or-mwc-input .disabled="${r&&r>=e}" .type="${InputType.BUTTON}" label="addItem" icon="plus" @or-mwc-input-changed="${()=>this.doAddItem()}"></or-mwc-input>
+                        <or-mwc-input .disabled="${o&&o>=r}" .type="${f.BUTTON}" label="addItem" icon="plus" @or-mwc-input-changed="${()=>this.doAddItem()}"></or-mwc-input>
                     </div>
                 `}
             </div>
-        `;return this.minimal?html`<div>${a}</div>`:html`<or-collapsible-panel>${a}</or-collapsible-panel>`}getArrayItemWrapper(t,e){return html`
-            <div class="item-wrapper" data-index="${e}">
+        `;return this.minimal?n`<div>${s}</div>`:n`<or-collapsible-panel>${s}</or-collapsible-panel>`}getArrayItemWrapper(e,t){return n`
+            <div class="item-wrapper" data-index="${t}">
                 <div class="drag-container">
-                    <button draggable="true" @dragstart="${t=>this._onDragStart(t)}" @dragend="${t=>this._onDragEnd(t)}" class="draggable button-clear"><or-icon icon="menu"></or-icon></input>
+                    <button draggable="true" @dragstart="${e=>this._onDragStart(e)}" @dragend="${e=>this._onDragEnd(e)}" class="draggable button-clear"><or-icon icon="menu"></or-icon></input>
                 </div>
-                ${getTemplateWrapper(t,(()=>this.removeItem(e)))}
+                ${E(e,()=>this.removeItem(t))}
             </div>
-        `}_onDragStart(t){const e=t.currentTarget.parentElement.parentElement;e.classList.add("dragging");const r=e.lastElementChild;t.dataTransfer.setDragImage(r,r.getBoundingClientRect().width/2-50,0)}_onDragEnd(t){const e=[...this.shadowRoot.querySelectorAll(".item-wrapper")],r=t.currentTarget.parentElement.parentElement;r.classList.remove("dragging");const o=Number(r.getAttribute("data-index")),a=Math.max(0,(null!==r.getAttribute("data-after-index")?Number(r.getAttribute("data-after-index")):e.length)-1);e.forEach((t=>t.classList.remove("indicator-before","indicator-after"))),o!==a&&this.moveItem(o,a)}_onDragOver(t){const e=this.shadowRoot.querySelector(".dragging");if(!e)return;t.preventDefault();const r=[...this.shadowRoot.querySelectorAll(".item-wrapper:not(.dragging)")],o={offset:Number.NEGATIVE_INFINITY,element:null},a=r.reduce(((e,r)=>{const o=r.getBoundingClientRect(),a=t.clientY-o.top-o.height/2;return a<0&&a>e.offset?{offset:a,element:r}:e}),o).element;if(r.forEach((t=>t.classList.remove("indicator-before","indicator-after"))),null===a)r[r.length-1].classList.add("indicator-after"),e.removeAttribute("data-after-index");else{a.classList.add("indicator-before");const t=a.getAttribute("data-index");e.setAttribute("data-after-index",t)}}_showJson(t){t.stopPropagation(),showJsonEditor(this.title||this.schema.title||"",this.data,(t=>{this.handleChange(this.path||"",t)}))}doAddItem(){this.resolvedSchema&&(this.itemInfos?this.showAddDialog():this.addItem(createDefaultValue(this.resolvedSchema,this.rootSchema)))}showAddDialog(){let t;const e=this.itemInfos.map(((t,e)=>{const r=t.title?computeLabel(t.title,!1,!0):"";return{text:r,value:r,data:t}})),r=showDialog((new OrMwcDialog).setContent(html`
+        `}_onDragStart(e){let t=e.currentTarget.parentElement.parentElement;t.classList.add("dragging");let r=t.lastElementChild;e.dataTransfer.setDragImage(r,r.getBoundingClientRect().width/2-50,0)}_onDragEnd(e){let t=[...this.shadowRoot.querySelectorAll(".item-wrapper")],r=e.currentTarget.parentElement.parentElement;r.classList.remove("dragging");let i=Number(r.getAttribute("data-index")),o=Math.max(0,(null!==r.getAttribute("data-after-index")?Number(r.getAttribute("data-after-index")):t.length)-1);t.forEach(e=>e.classList.remove("indicator-before","indicator-after")),i!==o&&this.moveItem(i,o)}_onDragOver(e){let t=this.shadowRoot.querySelector(".dragging");if(!t)return;e.preventDefault();let r=[...this.shadowRoot.querySelectorAll(".item-wrapper:not(.dragging)")],i=r.reduce((t,r)=>{let i=r.getBoundingClientRect(),o=e.clientY-i.top-i.height/2;return o<0&&o>t.offset?{offset:o,element:r}:t},{offset:-1/0,element:null}).element;if(r.forEach(e=>e.classList.remove("indicator-before","indicator-after")),null===i)r[r.length-1].classList.add("indicator-after"),t.removeAttribute("data-after-index");else{i.classList.add("indicator-before");let e=i.getAttribute("data-index");t.setAttribute("data-after-index",e)}}_showJson(e){e.stopPropagation(),g(this.title||this.schema.title||"",this.data,e=>{this.handleChange(this.path||"",e)})}doAddItem(){this.resolvedSchema&&(this.itemInfos?this.showAddDialog():this.addItem(t(this.resolvedSchema,this.rootSchema)))}showAddDialog(){let t,r=this.itemInfos.map((t,r)=>{let i=t.title?e(t.title,!1,!0):"";return{text:i,value:i,data:t}}),i=b(new v().setContent(n`
                 <div class="col">
                     <form id="mdc-dialog-form-add" class="row">
                         <div id="type-list" class="col">
-                            <or-mwc-list @or-mwc-list-changed="${e=>{var o;1===e.detail.length&&(o=e.detail[0].data,t=o,r.shadowRoot.getElementById("parameter-desc").innerHTML=o.description||"",r.shadowRoot.getElementById("add-btn").disabled=!1)}}" .listItems="${e.sort(((t,e)=>t.text.localeCompare(e.text)))}" id="parameter-list"></or-mwc-list>
+                            <or-mwc-list @or-mwc-list-changed="${e=>{var r;1===e.detail.length&&(t=r=e.detail[0].data,i.shadowRoot.getElementById("parameter-desc").innerHTML=r.description||"",i.shadowRoot.getElementById("add-btn").disabled=!1)}}" .listItems="${r.sort((e,t)=>e.text.localeCompare(t.text))}" id="parameter-list"></or-mwc-list>
                         </div>
                         <div id="parameter-desc" class="col"></div>
                     </form>
                 </div>
-            `).setStyles(addItemOrParameterDialogStyle).setHeading((this.label?computeLabel(this.label,this.required,!1)+" - ":"")+i18next.t("addItem")).setActions([{actionName:"cancel",content:"cancel"},{default:!0,actionName:"add",action:()=>{if(t){const e=t.defaultValueCreator();this.addItem(e)}},content:html`<or-mwc-input id="add-btn" .type="${InputType.BUTTON}" disabled label="add"></or-mwc-input>`}]).setDismissAction(null))}};__decorate([property()],ControlArrayElement.prototype,"minimal",void 0),ControlArrayElement=__decorate([customElement("or-json-forms-array-control")],ControlArrayElement);export{ControlArrayElement};
+            `).setStyles(w).setHeading((this.label?e(this.label,this.required,!1)+" - ":"")+u.t("addItem")).setActions([{actionName:"cancel",content:"cancel"},{default:!0,actionName:"add",action:()=>{if(t){let e=t.defaultValueCreator();this.addItem(e)}},content:n`<or-mwc-input id="add-btn" .type="${f.BUTTON}" disabled label="add"></or-mwc-input>`}]).setDismissAction(null))}};__decorate([m()],ControlArrayElement.prototype,"minimal",void 0),ControlArrayElement=__decorate([l("or-json-forms-array-control")],ControlArrayElement);export{ControlArrayElement};

package/lib/controls/control-base-element.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var c=e.length-1;c>=0;c--)(s=e[c])&&(a=(i<3?s(a):i>3?s(t,o,a):s(t,o))||a);return i>3&&a&&Object.defineProperty(t,o,a),a};import{createId,isControl,mapDispatchToControlProps,removeId}from"@jsonforms/core";import{property}from"lit/decorators.js";import{BaseElement}from"../base-element";export class ControlBaseElement extends BaseElement{constructor(){super()}updated(e){if(super.updated(e),e.has("state")){const{handleChange:e}=mapDispatchToControlProps(this.state.dispatch);this.handleChange=e}}shouldUpdate(e){var t;if(e.has("uischema")&&isControl(this.uischema)){const o=e.get("uischema");(null==o?void 0:o.scope)!==(null===(t=this.uischema)||void 0===t?void 0:t.scope)&&(this.id&&removeId(this.id),this.id=createId(this.uischema.scope))}return!0}disconnectedCallback(){isControl(this.uischema)&&removeId(this.id)}}__decorate([property()],ControlBaseElement.prototype,"description",void 0),__decorate([property()],ControlBaseElement.prototype,"rootSchema",void 0);
+var __decorate=this&&this.__decorate||function(e,t,o,s){var r,i=arguments.length,a=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,s);else for(var c=e.length-1;c>=0;c--)(r=e[c])&&(a=(i<3?r(a):i>3?r(t,o,a):r(t,o))||a);return i>3&&a&&Object.defineProperty(t,o,a),a};import{createId as e,isControl as t,mapDispatchToControlProps as o,removeId as s}from"@jsonforms/core";import{property as r}from"lit/decorators.js";import{BaseElement as i}from"../base-element";export class ControlBaseElement extends i{constructor(){super()}updated(e){if(super.updated(e),e.has("state")){let{handleChange:e}=o(this.state.dispatch);this.handleChange=e}}shouldUpdate(o){var r;if(o.has("uischema")&&t(this.uischema)){let t=o.get("uischema");(null==t?void 0:t.scope)!==(null==(r=this.uischema)?void 0:r.scope)&&(this.id&&s(this.id),this.id=e(this.uischema.scope))}return!0}disconnectedCallback(){t(this.uischema)&&s(this.id)}}__decorate([r()],ControlBaseElement.prototype,"description",void 0),__decorate([r()],ControlBaseElement.prototype,"rootSchema",void 0);

package/lib/controls/control-input-element.d.ts

@@ -3,6 +3,6 @@ import { ControlBaseElement } from "./control-base-element";
 export declare class ControlInputElement extends ControlBaseElement {
     protected inputType: InputType;
     static get styles(): import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     protected onValueChanged(e: OrInputChangedEvent): void;
 }

package/lib/controls/control-input-element.js

@@ -1,21 +1,21 @@
-var __decorate=this&&this.__decorate||function(t,e,n,i){var r,o=arguments.length,s=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,n,i);else for(var p=t.length-1;p>=0;p--)(r=t[p])&&(s=(o<3?r(s):o>3?r(e,n,s):r(e,n))||s);return o>3&&s&&Object.defineProperty(e,n,s),s};import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import{css,html}from"lit";import{customElement}from"lit/decorators.js";import{ControlBaseElement}from"./control-base-element";import{baseStyle}from"../styles";import{isBooleanControl,isEnumControl,isIntegerControl,isNumberControl,isOneOfEnumControl,isStringControl}from"@jsonforms/core";import{isEnumArray}from"../standard-renderers";const style=css`
+var __decorate=this&&this.__decorate||function(t,e,i,n){var r,o=arguments.length,s=o<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(s=(o<3?r(s):o>3?r(e,i,s):r(e,i))||s);return o>3&&s&&Object.defineProperty(e,i,s),s};import{InputType as t}from"@openremote/or-mwc-components/or-mwc-input";import{css as e,html as i}from"lit";import{customElement as n}from"lit/decorators.js";import{ControlBaseElement as r}from"./control-base-element";import{baseStyle as o}from"../styles";import{isBooleanControl as s,isEnumControl as a,isIntegerControl as p,isNumberControl as m,isOneOfEnumControl as l,isStringControl as h}from"@jsonforms/core";import{isEnumArray as u}from"../standard-renderers";let style=e`
     or-mwc-input {
         width: 100%;
     }
-`;let ControlInputElement=class extends ControlBaseElement{static get styles(){return[baseStyle,style]}render(){var t;const e=this.uischema,n=this.schema,i=this.schema.format,r={rootSchema:this.rootSchema,config:this.config};let o,s,p,l,a,m,u;this.inputType=InputType.TEXT;let h=!1,y=null!==(t=this.data)&&void 0!==t?t:n.default;return Array.isArray(n.type)?this.inputType=InputType.JSON:isBooleanControl(e,n,r)?this.inputType=InputType.CHECKBOX:isNumberControl(e,n,r)||isIntegerControl(e,n,r)?(o=isNumberControl(e,n,r)?.1:1,this.inputType=InputType.NUMBER,s=n.minimum,l=n.maximum,o=n.multipleOf||o,void 0!==s&&void 0!==l&&"or-range"===i&&(l-s)/o<=200&&(this.inputType=InputType.RANGE)):isEnumControl(e,n,r)||isOneOfEnumControl(e,n,r)||isEnumArray(e,n,r)?(this.inputType=InputType.SELECT,isEnumControl(e,n,r)?u=n.enum.map((t=>[JSON.stringify(t),String(t)])):isOneOfEnumControl(e,n,r)?u=n.oneOf.map((t=>[JSON.stringify(t.const),String(t.const)])):(h=!0,u=n.items.oneOf?n.items.oneOf.map((t=>[JSON.stringify(t.const),String(t.const)])):n.items.enum.map((t=>[JSON.stringify(t),String(t)]))),y=h?Array.isArray(y)?y.map((t=>JSON.stringify(t))):void 0!==y?[JSON.stringify(y)]:void 0:void 0!==y?JSON.stringify(y):void 0):isStringControl(e,n,r)&&(p=n.minLength,a=n.maxLength,m=n.pattern,"date-time"===i?this.inputType=InputType.DATETIME:"date"===i?this.inputType=InputType.DATE:"time"===i?this.inputType=InputType.TIME:"email"===i?this.inputType=InputType.EMAIL:"tel"===i?this.inputType=InputType.TELEPHONE:"or-multiline"===i?this.inputType=InputType.TEXTAREA:("or-password"===i||n.writeOnly)&&(this.inputType=InputType.PASSWORD)),html`<or-mwc-input
+`,ControlInputElement=class extends r{static get styles(){return[o,style]}render(){var e;let n,r,o,d,c,y,f,g=this.uischema,T=this.schema,E=this.schema.format,O={rootSchema:this.rootSchema,config:this.config};this.inputType=t.TEXT;let S=!1,v=null!=(e=this.data)?e:T.default;return Array.isArray(T.type)?this.inputType=t.JSON:s(g,T,O)?this.inputType=t.CHECKBOX:m(g,T,O)||p(g,T,O)?(n=m(g,T,O)?.1:1,this.inputType=t.NUMBER,r=T.minimum,d=T.maximum,n=T.multipleOf||n,void 0!==r&&void 0!==d&&"or-range"===E&&(d-r)/n<=200&&(this.inputType=t.RANGE)):a(g,T,O)||l(g,T,O)||u(g,T,O)?(this.inputType=t.SELECT,a(g,T,O)?f=T.enum.map(t=>[JSON.stringify(t),String(t)]):l(g,T,O)?f=T.oneOf.map(t=>[JSON.stringify(t.const),String(t.const)]):(S=!0,f=T.items.oneOf?T.items.oneOf.map(t=>[JSON.stringify(t.const),String(t.const)]):T.items.enum.map(t=>[JSON.stringify(t),String(t)])),v=S?Array.isArray(v)?v.map(t=>JSON.stringify(t)):void 0!==v?[JSON.stringify(v)]:void 0:void 0!==v?JSON.stringify(v):void 0):h(g,T,O)&&(o=T.minLength,c=T.maxLength,y=T.pattern,"date-time"===E?this.inputType=t.DATETIME:"date"===E?this.inputType=t.DATE:"time"===E?this.inputType=t.TIME:"email"===E?this.inputType=t.EMAIL:"tel"===E?this.inputType=t.TELEPHONE:"or-multiline"===E?this.inputType=t.TEXTAREA:("or-password"===E||T.writeOnly)&&(this.inputType=t.PASSWORD)),i`<or-mwc-input
                 .label="${this.label}"
                 .type="${this.inputType}"
                 .disabled="${!this.enabled}"
                 .required="${!!this.required}"
                 .id="${this.id}"
-                .options="${u}"
-                .multiple="${h}"
+                .options="${f}"
+                .multiple="${S}"
                 @or-mwc-input-changed="${t=>this.onValueChanged(t)}"
-                .maxLength="${a}"
-                .minLength="${p}"
-                .pattern="${m}"
+                .maxLength="${c}"
+                .minLength="${o}"
+                .pattern="${y}"
                 .validationMessage="${this.errors}"
-                .step="${o}"
-                .max="${l}"
-                .min="${s}"
-                .value="${y}"></or-mwc-input>`}onValueChanged(t){this.inputType===InputType.SELECT?Array.isArray(t.detail.value)?this.handleChange(this.path,t.detail.value.map((t=>JSON.parse(t)))):this.handleChange(this.path,JSON.parse(t.detail.value)):this.handleChange(this.path,t.detail.value)}};ControlInputElement=__decorate([customElement("or-json-forms-input-control")],ControlInputElement);export{ControlInputElement};
+                .step="${n}"
+                .max="${d}"
+                .min="${r}"
+                .value="${v}"></or-mwc-input>`}onValueChanged(e){this.inputType===t.SELECT?Array.isArray(e.detail.value)?this.handleChange(this.path,e.detail.value.map(t=>JSON.parse(t))):this.handleChange(this.path,JSON.parse(e.detail.value)):this.handleChange(this.path,e.detail.value)}};ControlInputElement=__decorate([n("or-json-forms-input-control")],ControlInputElement);export{ControlInputElement};

package/lib/index.d.ts

@@ -35,5 +35,5 @@ export declare class OrJSONForms extends LitElement implements OwnPropsOfJsonFor
     checkValidity(): boolean;
     shouldUpdate(_changedProperties: PropertyValues): boolean;
     updateCore<T extends CoreActions>(coreAction: T): T;
-    render(): import("lit-html").TemplateResult;
+    render(): import("lit").TemplateResult;
 }

package/lib/index.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(e,t,r,o){var s,a=arguments.length,i=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,o);else for(var c=e.length-1;c>=0;c--)(s=e[c])&&(i=(a<3?s(i):a>3?s(t,r,i):s(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i};import{css,html,LitElement}from"lit";import{customElement,property,state}from"lit/decorators.js";import{Actions,configReducer,coreReducer,createAjv,generateDefaultUISchema,generateJsonSchema,mapStateToJsonFormsRendererProps,setConfig}from"@jsonforms/core";import{getTemplateWrapper,StandardRenderers}from"./standard-renderers";import{getLabel,getTemplateFromProps}from"./util";import{baseStyle}from"./styles";import{Util}from"@openremote/core";export{StandardRenderers,getTemplateWrapper};const styles=css`
+var __decorate=this&&this.__decorate||function(e,t,r,o){var s,i=arguments.length,a=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,o);else for(var h=e.length-1;h>=0;h--)(s=e[h])&&(a=(i<3?s(a):i>3?s(t,r,a):s(t,r))||a);return i>3&&a&&Object.defineProperty(t,r,a),a};import{css as e,html as t,LitElement as r}from"lit";import{customElement as o,property as s,state as i}from"lit/decorators.js";import{Actions as a,configReducer as h,coreReducer as c,createAjv as d,generateDefaultUISchema as n,generateJsonSchema as p,mapStateToJsonFormsRendererProps as m,setConfig as l}from"@jsonforms/core";import{getTemplateWrapper as u,StandardRenderers as O}from"./standard-renderers";import{getLabel as y,getTemplateFromProps as _}from"./util";import{baseStyle as f}from"./styles";import{Util as v}from"@openremote/core";let styles=e`
     .delete-container {
         width: 0;
     }
@@ -6,4 +6,4 @@ var __decorate=this&&this.__decorate||function(e,t,r,o){var s,a=arguments.length
     .item-container {
         margin: 0; /* Remove inherited margin */
     }
-`;let OrJSONForms=class extends LitElement{constructor(){super(...arguments),this.renderers=StandardRenderers,this.readonly=!1,this.required=!1,this.previousErrors=[]}static get styles(){return[baseStyle,styles]}checkValidity(){return 0===this.previousErrors.length}shouldUpdate(e){if(super.shouldUpdate(e),this.schema||(this.schema=void 0!==this.data?generateJsonSchema(this.data):{}),this.uischema||(this.uischema=generateDefaultUISchema(this.schema)),this.core||(this.core={ajv:createAjv({useDefaults:!0,validateFormats:!1}),data:{},schema:this.schema,uischema:this.uischema},this.updateCore(Actions.init(this.data,this.schema,this.uischema)),this.config=configReducer(void 0,setConfig(this.config))),(e.has("data")||e.has("schema")||e.has("uischema"))&&this.updateCore(Actions.updateCore(this.data,this.schema,this.uischema)),(!this.contextValue||e.has("core")||e.has("renderers")||e.has("cells")||e.has("config")||e.has("readonly"))&&(this.contextValue={core:this.core,renderers:this.renderers,cells:this.cells,config:this.config,uischemas:this.uischemas,readonly:this.readonly,dispatch:e=>this.updateCore(e)}),e.has("core")){const e=this.core.data,t=this.core.errors;this.onChange&&(!Util.objectsEqual(e,this.previousData,!0)||t&&!Util.objectsEqual(t,this.previousErrors,!0))&&(this.previousErrors=t||[],this.previousData=e,this.onChange({data:e,errors:t}))}return!0}updateCore(e){const t=coreReducer(this.core,e);return t!==this.core&&(this.core=t),e}render(){if(!this.contextValue)return html``;const e=Object.assign(Object.assign({},mapStateToJsonFormsRendererProps({jsonforms:Object.assign({},this.contextValue)},this)),{label:getLabel(this.schema,this.uischema,this.label,void 0)||"",required:this.required});return getTemplateFromProps(this.contextValue,e)||html``}};__decorate([property({type:Object})],OrJSONForms.prototype,"uischema",void 0),__decorate([property({type:Object})],OrJSONForms.prototype,"schema",void 0),__decorate([property({type:Object,attribute:!1})],OrJSONForms.prototype,"data",void 0),__decorate([property({type:Array})],OrJSONForms.prototype,"renderers",void 0),__decorate([property({type:Array})],OrJSONForms.prototype,"cells",void 0),__decorate([property({type:String,attribute:!1})],OrJSONForms.prototype,"onChange",void 0),__decorate([property({type:String,attribute:!1})],OrJSONForms.prototype,"config",void 0),__decorate([property({type:Array})],OrJSONForms.prototype,"uischemas",void 0),__decorate([property({type:Boolean})],OrJSONForms.prototype,"readonly",void 0),__decorate([property({type:String})],OrJSONForms.prototype,"label",void 0),__decorate([property({type:Boolean})],OrJSONForms.prototype,"required",void 0),__decorate([state()],OrJSONForms.prototype,"core",void 0),__decorate([state()],OrJSONForms.prototype,"contextValue",void 0),OrJSONForms=__decorate([customElement("or-json-forms")],OrJSONForms);export{OrJSONForms};
+`,OrJSONForms=class extends r{constructor(){super(...arguments),this.renderers=O,this.readonly=!1,this.required=!1,this.previousErrors=[]}static get styles(){return[f,styles]}checkValidity(){return 0===this.previousErrors.length}shouldUpdate(e){if(super.shouldUpdate(e),this.schema||(this.schema=void 0!==this.data?p(this.data):{}),this.uischema||(this.uischema=n(this.schema)),this.core||(this.core={ajv:d({useDefaults:!0,validateFormats:!1}),data:{},schema:this.schema,uischema:this.uischema},this.updateCore(a.init(this.data,this.schema,this.uischema)),this.config=h(void 0,l(this.config))),(e.has("data")||e.has("schema")||e.has("uischema"))&&this.updateCore(a.updateCore(this.data,this.schema,this.uischema)),(!this.contextValue||e.has("core")||e.has("renderers")||e.has("cells")||e.has("config")||e.has("readonly"))&&(this.contextValue={core:this.core,renderers:this.renderers,cells:this.cells,config:this.config,uischemas:this.uischemas,readonly:this.readonly,dispatch:e=>this.updateCore(e)}),e.has("core")){let e=this.core.data,t=this.core.errors;this.onChange&&(!v.objectsEqual(e,this.previousData,!0)||t&&!v.objectsEqual(t,this.previousErrors,!0))&&(this.previousErrors=t||[],this.previousData=e,this.onChange({data:e,errors:t}))}return!0}updateCore(e){let t=c(this.core,e);return t!==this.core&&(this.core=t),e}render(){if(!this.contextValue)return t``;let e=Object.assign(Object.assign({},m({jsonforms:Object.assign({},this.contextValue)},this)),{label:y(this.schema,this.uischema,this.label,void 0)||"",required:this.required});return _(this.contextValue,e)||t``}};__decorate([s({type:Object})],OrJSONForms.prototype,"uischema",void 0),__decorate([s({type:Object})],OrJSONForms.prototype,"schema",void 0),__decorate([s({type:Object,attribute:!1})],OrJSONForms.prototype,"data",void 0),__decorate([s({type:Array})],OrJSONForms.prototype,"renderers",void 0),__decorate([s({type:Array})],OrJSONForms.prototype,"cells",void 0),__decorate([s({type:String,attribute:!1})],OrJSONForms.prototype,"onChange",void 0),__decorate([s({type:String,attribute:!1})],OrJSONForms.prototype,"config",void 0),__decorate([s({type:Array})],OrJSONForms.prototype,"uischemas",void 0),__decorate([s({type:Boolean})],OrJSONForms.prototype,"readonly",void 0),__decorate([s({type:String})],OrJSONForms.prototype,"label",void 0),__decorate([s({type:Boolean})],OrJSONForms.prototype,"required",void 0),__decorate([i()],OrJSONForms.prototype,"core",void 0),__decorate([i()],OrJSONForms.prototype,"contextValue",void 0),OrJSONForms=__decorate([o("or-json-forms")],OrJSONForms);export{O as StandardRenderers,u as getTemplateWrapper,OrJSONForms};

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

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,r,o){var s,i=arguments.length,c=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,r,o);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(c=(i<3?s(c):i>3?s(t,r,c):s(t,r))||c);return i>3&&c&&Object.defineProperty(t,r,c),c};import{property}from"lit/decorators.js";import{BaseElement}from"../base-element";export class LayoutBaseElement extends BaseElement{constructor(){super(...arguments),this.direction="column"}getChildProps(){return(this.uischema&&this.uischema.elements?this.uischema.elements:[]).map((e=>({renderers:this.renderers,uischema:e,schema:this.schema,path:this.path})))}}__decorate([property({type:String})],LayoutBaseElement.prototype,"direction",void 0);
+var __decorate=this&&this.__decorate||function(e,t,r,o){var s,i=arguments.length,c=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,r,o);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(c=(i<3?s(c):i>3?s(t,r,c):s(t,r))||c);return i>3&&c&&Object.defineProperty(t,r,c),c};import{property as e}from"lit/decorators.js";import{BaseElement as t}from"../base-element";export class LayoutBaseElement extends t{constructor(){super(...arguments),this.direction="column"}getChildProps(){return(this.uischema&&this.uischema.elements?this.uischema.elements:[]).map(e=>({renderers:this.renderers,uischema:e,schema:this.schema,path:this.path}))}}__decorate([e({type:String})],LayoutBaseElement.prototype,"direction",void 0);

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

@@ -1,4 +1,4 @@
-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,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";const style=css`
+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;
@@ -46,68 +46,58 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
         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 LayoutBaseElement{static get styles(){return[baseStyle,panelStyle,style]}render(){const e=[],t={jsonforms:Object.assign({},this.state)},i=getSchema(t),a=isDynamic(this.schema);let r,o=".+";if(a)if("object"==typeof this.schema.patternProperties){const e=Object.entries(this.schema.patternProperties);1===e.length&&(o=e[0][0],r=e[0][1])}else"object"==typeof this.schema.additionalProperties&&(r=this.schema.additionalProperties);const s=this.minimal?"":html`
+`;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?computeLabel(this.label,this.required,!1):""}</span>
-                ${this.type?html`<span id="type-label">${this.type}</span>`:""}
+                <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?html`<or-icon icon="alert"></or-icon><span>${this.errors}</span>`:""}
+                    ${!this.errors?"":l`<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="${e=>this._showJson(e)}"></or-mwc-input></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>
-        `;let l;a&&r?l=this._getDynamicContentTemplate(o,r):this.getChildProps().length>0&&(l=this.getChildProps().map((a=>{if(isControl(a.uischema)){const r=mapStateToControlProps(t,a);if(r.label=r.label||getLabel(this.schema,i,void 0,a.uischema.scope)||"",a.label=r.label,a.required=!!r.required,!r.required&&void 0===r.data)return e.push(r),html``}return getTemplateFromProps(this.state,a)})).filter((e=>void 0!==e)));const n=!!l&&(!Array.isArray(l)||l.length>0)||!this.errors&&e.length>0,c=html`
-            ${s}
+        `;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">
-                    ${l||""}
+                    ${o||""}
                 </div>
 
-                ${this.errors||0===e.length&&!a?"":html`
+                ${this.errors||0===s.length&&!c?"":l`
                         <div id="footer">
-                            <or-mwc-input .type="${InputType.BUTTON}" label="addParameter" icon="plus" @or-mwc-input-changed="${()=>this._addParameter(i,e,o,r)}"></or-mwc-input>
+                            <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?html`<div>${c}</div>`:html`<or-collapsible-panel .expandable="${n}">${c}</or-collapsible-panel>`}_getDynamicContentTemplate(e,t){if(!this.data)return;const i=e=>{const t=Object.assign({},this.data);delete t[e],this.handleChange(this.path,t)},a=(e,t,i)=>{if(!e.valid)return;if(void 0!==this.data[i])return void e.setCustomValidity(i18next.t("validation.keyAlreadyExists"));e.setCustomValidity(void 0);const a=Object.assign({},this.data),r=a[t];delete a[t],a[i]=r,this.handleChange(this.path,a)},r={renderers:this.renderers,uischema:controlWithoutLabel("#"),enabled:this.enabled,visible:this.visible,path:"",schema:t,minimal:!0,required:!1,label:""},o=(e,t)=>(r.path=Paths.compose(this.path,e),getTemplateFromProps(this.state,r)||html``);return html`
+        `;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,r])=>html`
+                ${Object.entries(this.data).map(([t,a])=>l`
                         <div class="row">
                             <div class="key-container">
-                                <or-mwc-input .type="${InputType.TEXT}" @or-mwc-input-changed="${e=>a(e.currentTarget,t,e.detail.value)}" required .pattern="${e}" .value="${t}"></or-mwc-input>
+                                <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">
-                                ${o(t)}
+                                ${i.path=o.compose(this.path,t),u(this.state,i)||l``}
                             </div>
                             <div class="delete-container">
-                                <button class="button-clear" @click="${()=>i(t)}"><or-icon icon="close-circle"></or-icon></input>
+                                <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(),showJsonEditor(this.title||this.schema.title||"",this.data,(e=>{this.handleChange(this.path||"",e)}))}_addParameter(e,t,i,a){const r=0===t.length;let o,s;const l=t.map((e=>{const t=computeLabel(e.label,!!e.required,!1);return{text:t,value:t,data:e}}));let n;const c=e=>{const t=e.currentTarget;t.setCustomValidity(void 0),n=t.currentValue;let i=t.valid;void 0!==this.data[n]&&(i=!1,t.setCustomValidity(i18next.t("validation.keyAlreadyExists"))),d.shadowRoot.getElementById("add-btn").disabled=!i},d=showDialog((new OrMwcDialog).setContent((()=>{let t;if(o&&o.schema&&o.schema.oneOf){const i=e=>{s=e,d.shadowRoot.getElementById("add-btn").disabled=!s,d.shadowRoot.getElementById("schema-description").innerHTML=(s?s.description:i18next.t("schema.selectTypeMessage"))||i18next.t("schema.noDescriptionAvailable")};t=getSchemaPicker(e,o.schema,o.path,"oneOf",o.label,i)}return html`
+        `}_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">
-                        ${r?"":html`
+                        ${c?"":l`
                             <div id="type-list" class="col">
-                                <or-mwc-list @or-mwc-list-changed="${e=>{1===e.detail.length&&(e=>{o=e;const t=!!(o&&o.schema&&o.schema.oneOf);d.shadowRoot.getElementById("add-btn").disabled=t,d.requestUpdate()})(e.detail[0].data)}}" .listItems="${l}" id="parameter-list"></or-mwc-list>
+                                <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">
-                            ${o?html`
-                                <or-translate id="parameter-title" value="${o.label}"></or-translate>
-                                <p>${o.description}</p>`:""}
-                            ${r?html`
-                                <style>
-                                    #dynamic-wrapper > or-mwc-input {
-                                        display: block;
-                                        margin: 10px;
-                                    }
-                                </style>
-                                <div id="dynamic-wrapper">
-                                    <or-mwc-input required .type="${InputType.TEXT}" .pattern="${i}" .label="${i18next.t("schema.keyInputLabel")}" @keyup="${e=>c(e)}"></or-mwc-input>
-                                </div>
-                            `:t?html`
+                            ${!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;
@@ -124,10 +114,20 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
                                 </style>
                                 <div id="schema-picker">
                                     <or-translate style="justify-self: left;" value="type"></or-translate>
-                                    ${t}
+                                    ${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>
-                                <p id="schema-description">${i18next.t("schema.selectTypeMessage")}</p>`:""}
+                            `}
                         </div>
                     </form>
                 </div>
-            `})).setStyles(addItemOrParameterDialogStyle).setHeading((this.label?computeLabel(this.label,this.required,!1)+" - ":"")+i18next.t("addParameter")).setActions([{actionName:"cancel",content:"cancel"},{default:!0,actionName:"add",action:()=>{const t=r?n:o.path.split(".").pop(),i=Object.assign({},this.data),l=r?a:o.schema;i[t]=Array.isArray(l.type)?null:(s?s.defaultValueCreator():void 0)||createDefaultValue(l,e),this.handleChange(this.path||"",i)},content:html`<or-mwc-input id="add-btn" .type="${InputType.BUTTON}" disabled label="add"></or-mwc-input>`}]).setDismissAction(null))}};__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};
+            `}).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};

package/lib/standard-renderers.js

@@ -1,12 +1,12 @@
-import{and,createCombinatorRenderInfos,findUISchema,hasType,isAllOfControl,isAnyOfControl,isBooleanControl,isDateControl,isDateTimeControl,isEnumControl,isIntegerControl,isNumberControl,isObjectControl,isOneOfControl,isOneOfEnumControl,isStringControl,isTimeControl,mapDispatchToControlProps,mapStateToControlProps,mapStateToControlWithDetailProps,mapStateToLayoutProps,or,rankWith,resolveSchema,schemaMatches,schemaSubPathMatches,uiTypeIs}from"@jsonforms/core";import{html}from"lit";import"@openremote/or-mwc-components/or-mwc-input";import{getCombinatorInfos,getLabel,getSchemaConst,getSchemaPicker,getTemplateFromProps,mapStateToCombinatorRendererProps,showJsonEditor}from"./util";import"./layouts/layout-vertical-element";import"./controls/control-input-element";import"./controls/control-array-element";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import{Util}from"@openremote/core";const hasOneOfItems=e=>void 0!==e.oneOf&&e.oneOf.length>0&&e.oneOf.every((e=>void 0!==getSchemaConst(e))),hasEnumItems=e=>Array.isArray(e.enum);export const isEnumArray=and(uiTypeIs("Control"),and(schemaMatches((e=>hasType(e,"array")&&!Array.isArray(e.items)&&!0===e.uniqueItems)),schemaSubPathMatches("items",(e=>hasOneOfItems(e)||hasEnumItems(e)))));export const verticalOrGroupLayoutTester=rankWith(1,or(uiTypeIs("VerticalLayout"),uiTypeIs("Group")));export const verticalLayoutRenderer=(e,r)=>{const t=Object.assign(Object.assign(Object.assign({},mapStateToLayoutProps({jsonforms:Object.assign({},e)},r)),mapDispatchToControlProps(e.dispatch)),{label:r.label,required:r.required,errors:r.errors,minimal:r.minimal,type:r.type}),o=html`<or-json-forms-vertical-layout .state="${e}" .props="${t}"></or-json-forms-vertical-layout>`;let n;return!t.required&&t.path&&(n=()=>{t.handleChange(t.path||"",void 0)}),getTemplateWrapper(o,n)};export const constTester=rankWith(6,schemaMatches((e=>void 0!==getSchemaConst(e))));export const constRenderer=(e,r)=>{};export const inputControlTester=rankWith(3,or(schemaMatches((e=>Array.isArray(e.type)&&7===e.type.length)),isStringControl,isBooleanControl,isNumberControl,isIntegerControl,isDateControl,isTimeControl,isDateTimeControl,isEnumControl,isOneOfEnumControl,isEnumArray));export const inputControlRenderer=(e,r)=>{const t=Object.assign(Object.assign({},mapStateToControlProps({jsonforms:Object.assign({},e)},r)),mapDispatchToControlProps(e.dispatch));t.label=r.label||t.label,t.required=!!r.required||t.required;const o=html`<or-json-forms-input-control .state="${e}" .props="${t}"></or-json-forms-input-control>`;let n;return!t.required&&t.path&&(n=()=>{t.handleChange(t.path,void 0)}),getTemplateWrapper(o,n)};export const objectControlTester=rankWith(2,isObjectControl);export const objectControlRenderer=(e,r)=>{const{required:t,renderers:o,cells:n,uischemas:a,schema:s,label:i,errors:l,path:c,visible:m,enabled:p,uischema:h,rootSchema:d}=mapStateToControlWithDetailProps({jsonforms:Object.assign({},e)},r),u={visible:m,enabled:p,schema:s,uischema:findUISchema(a,s,h.scope,c,"VerticalLayout",h,d),path:c,renderers:o,cells:n,label:r.label||getLabel(s,d,i)||"",required:!!r.required||!!t,errors:l,minimal:r.minimal};return getTemplateFromProps(e,u)};export const anyOfOneOfControlTester=rankWith(4,or(isAnyOfControl,isOneOfControl));export const anyOfOneOfControlRenderer=(e,r)=>{const t={jsonforms:Object.assign({},e)},{required:o,renderers:n,cells:a,schema:s,label:i,path:l,errors:c,visible:m,enabled:p,uischema:h,rootSchema:d,data:u}=mapStateToControlWithDetailProps(t,r),C=void 0!==s.anyOf?"anyOf":"oneOf",f=resolveSchema(s,C,d),O=mapStateToCombinatorRendererProps(t,r,C),b=createCombinatorRenderInfos(f,d,C,O.uischema||h,l,O.uischemas);if(null!=u&&(void 0===O.indexOfFittingSchema||O.indexOfFittingSchema<0)){const e=getCombinatorInfos(f,d),r=e.length>0?e[0].constProperty:void 0;if(r&&"object"==typeof u&&u[r]){const t=u[r];O.indexOfFittingSchema=e.findIndex((e=>e.constValue===t))}}if(void 0===O.indexOfFittingSchema||O.indexOfFittingSchema<0){const{handleChange:t}=mapDispatchToControlProps(e.dispatch);if(null!=u){console.warn("Cannot match "+C+" schema to instance data");const e=e=>{e.stopPropagation(),showJsonEditor(i,u,(e=>{t(l||"",e)}))};return html`
-                <div class="item-container no-match-container"><span>${i}:</span><b><or-translate value="validation.noSchemaMatchFound"></b><or-mwc-input .type="${InputType.BUTTON}" outlined label="json" icon="pencil" @or-mwc-input-changed="${r=>e(r)}"></or-mwc-input></div>
-            `}return getSchemaPicker(d,f,l,C,r.label||i,(e=>t(l,e.defaultValueCreator())))}const y=b[O.indexOfFittingSchema].schema;let T=b[O.indexOfFittingSchema].uischema;y.allOf&&(T={type:"Control",scope:"#",label:!1});const g={schema:y,uischema:T,path:l,renderers:n,cells:a,label:r.label||getLabel(y,d,i)||"",required:r.required||!!o,errors:c,minimal:r.minimal,type:y.title};return getTemplateFromProps(e,g)};export const allOfControlTester=rankWith(4,isAllOfControl);export const allOfControlRenderer=(e,r)=>{const t={jsonforms:Object.assign({},e)},o=Object.assign({},mapStateToControlWithDetailProps(t,r)),n=resolveSchema(o.schema,"allOf",o.rootSchema);return o.schema=n.allOf.reduce(((e,r)=>Util.mergeObjects(e,r,!1))),o.uischema.scope="#",o.label=r.label||o.label,o.required=!!r.required||o.required,o.minimal=r.minimal,getTemplateFromProps(e,o)};export const arrayControlTester=rankWith(2,schemaMatches((e=>hasType(e,"array")&&!Array.isArray(e.items))));export const arrayControlRenderer=(e,r)=>{const t=Object.assign(Object.assign({},mapStateToControlProps({jsonforms:Object.assign({},e)},r)),mapDispatchToControlProps(e.dispatch));t.label=r.label||t.label,t.required=!!r.required||t.required,t.minimal=r.minimal;const o=html`<or-json-forms-array-control .state="${e}" .props="${t}"></or-json-forms-array-control>`;let n;return!t.required&&t.path&&(n=()=>{t.handleChange(t.path,void 0)}),getTemplateWrapper(o,n)};export function getTemplateWrapper(e,r){const t=r?html`
+import{and as e,createCombinatorRenderInfos as r,findUISchema as t,hasType as o,isAllOfControl as n,isAnyOfControl as a,isBooleanControl as s,isDateControl as i,isDateTimeControl as l,isEnumControl as c,isIntegerControl as m,isNumberControl as p,isObjectControl as d,isOneOfControl as u,isOneOfEnumControl as f,isStringControl as O,isTimeControl as h,mapDispatchToControlProps as b,mapStateToControlProps as y,mapStateToControlWithDetailProps as g,mapStateToLayoutProps as j,or as v,rankWith as C,resolveSchema as x,schemaMatches as T,schemaSubPathMatches as q,uiTypeIs as R}from"@jsonforms/core";import{html as $}from"lit";import"@openremote/or-mwc-components/or-mwc-input";import{getCombinatorInfos as A,getLabel as S,getSchemaConst as w,getSchemaPicker as F,getTemplateFromProps as I,mapStateToCombinatorRendererProps as L,showJsonEditor as E}from"./util";import"./layouts/layout-vertical-element";import"./controls/control-input-element";import"./controls/control-array-element";import{InputType as V}from"@openremote/or-mwc-components/or-mwc-input";import{Util as W}from"@openremote/core";let hasOneOfItems=e=>void 0!==e.oneOf&&e.oneOf.length>0&&e.oneOf.every(e=>void 0!==w(e)),hasEnumItems=e=>Array.isArray(e.enum);export const isEnumArray=e(R("Control"),e(T(e=>o(e,"array")&&!Array.isArray(e.items)&&!0===e.uniqueItems),q("items",e=>hasOneOfItems(e)||hasEnumItems(e))));export const verticalOrGroupLayoutTester=C(1,v(R("VerticalLayout"),R("Group")));export const verticalLayoutRenderer=(e,r)=>{let t,o=Object.assign(Object.assign(Object.assign({},j({jsonforms:Object.assign({},e)},r)),b(e.dispatch)),{label:r.label,required:r.required,errors:r.errors,minimal:r.minimal,type:r.type}),n=$`<or-json-forms-vertical-layout .state="${e}" .props="${o}"></or-json-forms-vertical-layout>`;return!o.required&&o.path&&(t=()=>{o.handleChange(o.path||"",void 0)}),getTemplateWrapper(n,t)};export const constTester=C(6,T(e=>void 0!==w(e)));export const constRenderer=(e,r)=>{};export const inputControlTester=C(3,v(T(e=>Array.isArray(e.type)&&7===e.type.length),O,s,p,m,i,h,l,c,f,isEnumArray));export const inputControlRenderer=(e,r)=>{let t,o=Object.assign(Object.assign({},y({jsonforms:Object.assign({},e)},r)),b(e.dispatch));o.label=r.label||o.label,o.required=!!r.required||o.required;let n=$`<or-json-forms-input-control .state="${e}" .props="${o}"></or-json-forms-input-control>`;return!o.required&&o.path&&(t=()=>{o.handleChange(o.path,void 0)}),getTemplateWrapper(n,t)};export const objectControlTester=C(2,d);export const objectControlRenderer=(e,r)=>{let{required:o,renderers:n,cells:a,uischemas:s,schema:i,label:l,errors:c,path:m,visible:p,enabled:d,uischema:u,rootSchema:f}=g({jsonforms:Object.assign({},e)},r),O=t(s,i,u.scope,m,"VerticalLayout",u,f);return I(e,{visible:p,enabled:d,schema:i,uischema:O,path:m,renderers:n,cells:a,label:r.label||S(i,f,l)||"",required:!!r.required||!!o,errors:c,minimal:r.minimal})};export const anyOfOneOfControlTester=C(4,v(a,u));export const anyOfOneOfControlRenderer=(e,t)=>{let o={jsonforms:Object.assign({},e)},{required:n,renderers:a,cells:s,schema:i,label:l,path:c,errors:m,visible:p,enabled:d,uischema:u,rootSchema:f,data:O}=g(o,t),h=void 0!==i.anyOf?"anyOf":"oneOf",y=x(i,h,f),j=L(o,t,h),v=r(y,f,h,j.uischema||u,c,j.uischemas);if(null!=O&&(void 0===j.indexOfFittingSchema||j.indexOfFittingSchema<0)){let e=A(y,f),r=e.length>0?e[0].constProperty:void 0;if(r&&"object"==typeof O&&O[r]){let t=O[r];j.indexOfFittingSchema=e.findIndex(e=>e.constValue===t)}}if(void 0===j.indexOfFittingSchema||j.indexOfFittingSchema<0){let{handleChange:r}=b(e.dispatch);return null==O?F(f,y,c,h,t.label||l,e=>r(c,e.defaultValueCreator())):(console.warn("Cannot match "+h+" schema to instance data"),$`
+                <div class="item-container no-match-container"><span>${l}:</span><b><or-translate value="validation.noSchemaMatchFound"></b><or-mwc-input .type="${V.BUTTON}" outlined label="json" icon="pencil" @or-mwc-input-changed="${e=>{e.stopPropagation(),E(l,O,e=>{r(c||"",e)})}}"></or-mwc-input></div>
+            `)}let C=v[j.indexOfFittingSchema].schema,T=v[j.indexOfFittingSchema].uischema;return C.allOf&&(T={type:"Control",scope:"#",label:!1}),I(e,{schema:C,uischema:T,path:c,renderers:a,cells:s,label:t.label||S(C,f,l)||"",required:t.required||!!n,errors:m,minimal:t.minimal,type:C.title})};export const allOfControlTester=C(4,n);export const allOfControlRenderer=(e,r)=>{let t=Object.assign({},g({jsonforms:Object.assign({},e)},r)),o=x(t.schema,"allOf",t.rootSchema);return t.schema=o.allOf.reduce((e,r)=>W.mergeObjects(e,r,!1)),t.uischema.scope="#",t.label=r.label||t.label,t.required=!!r.required||t.required,t.minimal=r.minimal,I(e,t)};export const arrayControlTester=C(2,T(e=>o(e,"array")&&!Array.isArray(e.items)));export const arrayControlRenderer=(e,r)=>{let t,o=Object.assign(Object.assign({},y({jsonforms:Object.assign({},e)},r)),b(e.dispatch));o.label=r.label||o.label,o.required=!!r.required||o.required,o.minimal=r.minimal;let n=$`<or-json-forms-array-control .state="${e}" .props="${o}"></or-json-forms-array-control>`;return!o.required&&o.path&&(t=()=>{o.handleChange(o.path,void 0)}),getTemplateWrapper(n,t)};export function getTemplateWrapper(e,r){let t=r?$`
                 <button class="button-clear" @click="${r}"><or-icon icon="close-circle"></or-icon></input>
-            `:"";return html`
+            `:"";return $`
                 <div class="item-container">
                     ${e}
                     <div class="delete-container">
                         ${t}
                     </div>
                 </div>
-            `}export function unknownTemplate(){return html`<span>No applicable renderer found!</span>`}export const StandardRenderers=[{tester:verticalOrGroupLayoutTester,renderer:verticalLayoutRenderer},{tester:constTester,renderer:constRenderer},{tester:inputControlTester,renderer:inputControlRenderer},{tester:objectControlTester,renderer:objectControlRenderer},{tester:arrayControlTester,renderer:arrayControlRenderer},{tester:anyOfOneOfControlTester,renderer:anyOfOneOfControlRenderer},{tester:allOfControlTester,renderer:allOfControlRenderer}];
+            `}export function unknownTemplate(){return $`<span>No applicable renderer found!</span>`}export const StandardRenderers=[{tester:verticalOrGroupLayoutTester,renderer:verticalLayoutRenderer},{tester:constTester,renderer:constRenderer},{tester:inputControlTester,renderer:inputControlRenderer},{tester:objectControlTester,renderer:objectControlRenderer},{tester:arrayControlTester,renderer:arrayControlRenderer},{tester:anyOfOneOfControlTester,renderer:anyOfOneOfControlRenderer},{tester:allOfControlTester,renderer:allOfControlRenderer}];

package/lib/styles.d.ts

@@ -1,3 +1,3 @@
 export declare const baseStyle: import("lit").CSSResult;
 export declare const panelStyle: import("lit").CSSResult;
-export declare const addItemOrParameterDialogStyle: import("lit-html").TemplateResult<1>;
+export declare const addItemOrParameterDialogStyle: import("lit").TemplateResult<1>;

package/lib/styles.js

@@ -1,4 +1,4 @@
-import{DefaultColor3,DefaultColor4,DefaultColor5}from"@openremote/core";import{css,html,unsafeCSS}from"lit";export const baseStyle=css`
+import{DefaultColor3 as e,DefaultColor4 as o,DefaultColor5 as t}from"@openremote/core";import{css as r,html as i,unsafeCSS as l}from"lit";export const baseStyle=r`
     :host {
         flex: 1;
     }
@@ -27,8 +27,8 @@ import{DefaultColor3,DefaultColor4,DefaultColor5}from"@openremote/core";import{c
 
     .button-clear {
         background: none;
-        color: ${unsafeCSS(DefaultColor5)};
-        --or-icon-fill: ${unsafeCSS(DefaultColor5)};
+        color: ${l(t)};
+        --or-icon-fill: ${l(t)};
         visibility: hidden;
         display: inline-block;
         border: none;
@@ -36,7 +36,7 @@ import{DefaultColor3,DefaultColor4,DefaultColor5}from"@openremote/core";import{c
         cursor: pointer;
     }                
     .button-clear:hover {
-        --or-icon-fill: ${unsafeCSS(DefaultColor4)};
+        --or-icon-fill: ${l(o)};
     }                
     .button-clear:focus {
         outline: 0;
@@ -61,7 +61,7 @@ import{DefaultColor3,DefaultColor4,DefaultColor5}from"@openremote/core";import{c
     #errors > or-icon {
         margin-right: 5px;
     }
-`;export const panelStyle=css`
+`;export const panelStyle=r`
     #header-description {
         flex: 1;
         display: flex;
@@ -101,7 +101,7 @@ import{DefaultColor3,DefaultColor4,DefaultColor5}from"@openremote/core";import{c
         margin-top: 10px;
     }
 
-`;export const addItemOrParameterDialogStyle=html`
+`;export const addItemOrParameterDialogStyle=i`
     <style>
         .mdc-dialog__surface {
             width: 800px;
@@ -109,7 +109,7 @@ import{DefaultColor3,DefaultColor4,DefaultColor5}from"@openremote/core";import{c
             overflow-y: visible !important;
         }
         #dialog-content {
-            border-color: var(--or-app-color5, ${unsafeCSS(DefaultColor5)});
+            border-color: var(--or-app-color5, ${l(t)});
             border-top-width: 1px;
             border-top-style: solid;
             border-bottom-width: 1px;
@@ -132,7 +132,7 @@ import{DefaultColor3,DefaultColor4,DefaultColor5}from"@openremote/core";import{c
         }
         #parameter-title {
             text-transform: capitalize;
-            color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
+            color: var(--or-app-color3, ${l(e)});
             font-size: 18px;
             font-weight: bold;
         }

package/lib/util.js

@@ -1,8 +1,8 @@
-import{composeWithUi,createDefaultValue,deriveTypes,getAjv,getData,getRenderers,getSchema,hasShowRule,isVisible,Resolve}from"@jsonforms/core";import{DefaultColor5,Util}from"@openremote/core";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import{i18next}from"@openremote/or-translate";import"@openremote/or-components/or-ace-editor";import{html,unsafeCSS}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{unknownTemplate}from"./standard-renderers";import{OrMwcDialog,showDialog}from"@openremote/or-mwc-components/or-mwc-dialog";export function getTemplateFromProps(e,t){if(!e||!t)return html``;const o=t.renderers||getRenderers({jsonforms:Object.assign({},e)}),r=t.schema,i=t.uischema;let s;if(o&&r&&i&&e.core){const n=o.map((t=>[t,t.tester(i,r,{rootSchema:resolveSubSchemasRecursive(r,e.core.schema),config:e.config})])).sort(((e,t)=>t[1]-e[1])),a=n&&n.length>0?n[0]:void 0;s=a&&-1!==a[1]?a[0].renderer(e,t):unknownTemplate()}return s}export function getCombinatorInfos(e,t){return e.map((e=>{let o,r,i;const s=findSchemaTitleAndDescription(e,t);if(e.$ref&&(e=Resolve.schema(e,"",t)),Array.isArray(e.allOf)&&(e=Resolve.schema(e,"allOf",t)),deriveTypes(e).every((e=>"object"===e))){const n=getSchemaObjectProperties(e).find((([e,t])=>void 0!==getSchemaConst(t)));n?(o=n[0],r=getSchemaConst(n[1]),i=()=>{const e={};return e[n[0]]=getSchemaConst(n[1]),e},s[0]||(s[0]=getSchemaConst(n[1]))):i=()=>createDefaultValue(e,t)}else i=()=>createDefaultValue(e,t);return{title:s[0],description:s[1],defaultValueCreator:i,constProperty:o,constValue:r}}))}export function getSchemaConst(e){if(e)return void 0!==e.const?e.const:Array.isArray(e.enum)&&1===e.enum.length?e.enum[0]:void 0}export function getSchemaPicker(e,t,o,r,i,s){const n=getCombinatorInfos(t[r],e),a=n.map(((e,t)=>[t+"",e.title||i18next.t("schema.title.indexedItem",{index:t})])),c=i?i18next.t("schema.anyOfPickerLabel",{label:i}):i18next.t("type");return html`                
-        <or-mwc-input class="any-of-picker" .label="${c}" .type="${InputType.SELECT}" .options="${a}" @or-mwc-input-changed="${e=>(e=>{const t=n[e];s(t)})(Number(e.detail.value))}"></or-mwc-input>
-    `}export function findSchemaTitleAndDescription(e,t){let o;if(e.$ref&&(o=getLabelFromScopeOrRef(e.$ref),e=Resolve.schema(e,"",t)),e.title)return[e.title,e.description];if(e.allOf){const o=Resolve.schema(e,"allOf",t).allOf.find((e=>!!e.title));if(o)return[o.title,o.description]}return[i18next.t("schema.title."+o,{defaultValue:Util.camelCaseToSentenceCase(o)}),void 0]}function getLabelFromScopeOrRef(e){return e.substr(e.lastIndexOf("/")+1)}function getSchemaObjectProperties(e){let t=[];return e.allOf?t=e.allOf.map((e=>e.properties?Object.entries(e.properties):[])).flat():e.properties&&(t=Object.entries(e.properties)),t}export function mapStateToCombinatorRendererProps(e,t,o){const{uischema:r}=t,i=composeWithUi(r,t.path),s=getSchema(e),n=Resolve.schema(t.schema||s,r.scope,s),a=void 0===t.visible||hasShowRule(r)?isVisible(r,getData(e),t.path,getAjv(e)):t.visible,c=t.id,l=Resolve.data(getData(e),i),m=e.jsonforms.core.ajv,p=n||s,u=Resolve.schema(p,o,s),f=["required","additionalProperties","type","enum","const"];let d=-1;for(let e=0;e<u.length;e++)try{const t=Object.assign({definitions:s.definitions},u[e]),o=m.compile(t);if(o(l),!(h=o.errors)||0===h.length||!h.find((e=>-1!==f.indexOf(e.keyword)))){d=e;break}}catch(e){console.debug("Combinator subschema is not self contained, can't hand it over to AJV")}var h;return{data:l,path:i,schema:p,rootSchema:s,visible:a,id:c,indexOfFittingSchema:d,uischemas:e.jsonforms.uischemas,uischema:r}}export function getLabel(e,t,o,r){if(o)return o;const i=findSchemaTitleAndDescription(e,t);return i[0]?i[0]:r?Util.camelCaseToSentenceCase(getLabelFromScopeOrRef(r)):void 0}export function resolveSubSchemasRecursive(e,t,o){const r=o?[o]:["allOf","anyOf","oneOf"];return e.$ref?resolveSubSchemasRecursive(Resolve.schema(t,e.$ref,t),t):(r.forEach((o=>{const r=e[o];r&&(e[o]=r.map((e=>resolveSubSchemasRecursive(e,t))))})),e.items&&(Array.isArray(e.items)?e.items=e.items.map((e=>resolveSubSchemasRecursive(e,t))):e.items=resolveSubSchemasRecursive(e.items,t)),e.properties&&Object.keys(e.properties).forEach((o=>e.properties[o]=resolveSubSchemasRecursive(e.properties[o],t))),e)}export const controlWithoutLabel=e=>({type:"Control",scope:e,label:!1});export const showJsonEditor=(e,t,o)=>{const r=createRef(),i=createRef();showDialog((new OrMwcDialog).setContent(html`
-                <or-ace-editor ${ref(r)} @or-ace-editor-edit="${()=>{i.value.disabled=!0}}" @or-ace-editor-changed="${e=>(e=>{const t=e.detail.valid;i.value.disabled=!t})(e)}" .value="${t}"></or-ace-editor>
-            `).setActions([{actionName:"cancel",content:"cancel"},{default:!0,actionName:"update",action:()=>{const e=r.value;if(e.validate()){const t=e.getValue()?JSON.parse(e.getValue()):void 0;o(t)}},content:html`<or-mwc-input ${ref(i)} disabled .type="${InputType.BUTTON}" label="update"></or-mwc-input>`}]).setHeading(e).setDismissAction(null).setStyles(html`
+import{composeWithUi as e,createDefaultValue as t,deriveTypes as r,getAjv as o,getData as i,getRenderers as n,getSchema as s,hasShowRule as a,isVisible as c,Resolve as l}from"@jsonforms/core";import{DefaultColor5 as m,Util as p}from"@openremote/core";import{InputType as d}from"@openremote/or-mwc-components/or-mwc-input";import{i18next as f}from"@openremote/or-translate";import"@openremote/or-components/or-ace-editor";import{html as u,unsafeCSS as h}from"lit";import{createRef as b,ref as v}from"lit/directives/ref.js";import{unknownTemplate as S}from"./standard-renderers";import{OrMwcDialog as g,showDialog as y}from"@openremote/or-mwc-components/or-mwc-dialog";export function getTemplateFromProps(e,t){let r;if(!e||!t)return u``;let o=t.renderers||n({jsonforms:Object.assign({},e)}),i=t.schema,s=t.uischema;if(o&&i&&s&&e.core){let n=o.map(t=>[t,t.tester(s,i,{rootSchema:resolveSubSchemasRecursive(i,e.core.schema),config:e.config})]).sort((e,t)=>t[1]-e[1]),a=n&&n.length>0?n[0]:void 0;r=a&&-1!==a[1]?a[0].renderer(e,t):S()}return r}export function getCombinatorInfos(e,o){return e.map(e=>{let i,n,s,a=findSchemaTitleAndDescription(e,o);if(e.$ref&&(e=l.schema(e,"",o)),Array.isArray(e.allOf)&&(e=l.schema(e,"allOf",o)),r(e).every(e=>"object"===e)){let r=getSchemaObjectProperties(e).find(([e,t])=>void 0!==getSchemaConst(t));r?(i=r[0],n=getSchemaConst(r[1]),s=()=>{let e={};return e[r[0]]=getSchemaConst(r[1]),e},a[0]||(a[0]=getSchemaConst(r[1]))):s=()=>t(e,o)}else s=()=>t(e,o);return{title:a[0],description:a[1],defaultValueCreator:s,constProperty:i,constValue:n}})}export function getSchemaConst(e){if(e){if(void 0!==e.const)return e.const;if(Array.isArray(e.enum)&&1===e.enum.length)return e.enum[0]}}export function getSchemaPicker(e,t,r,o,i,n){let s=getCombinatorInfos(t[o],e),a=s.map((e,t)=>[t+"",e.title||f.t("schema.title.indexedItem",{index:t})]),c=i?f.t("schema.anyOfPickerLabel",{label:i}):f.t("type");return u`                
+        <or-mwc-input class="any-of-picker" .label="${c}" .type="${d.SELECT}" .options="${a}" @or-mwc-input-changed="${e=>{n(s[Number(e.detail.value)])}}"></or-mwc-input>
+    `}export function findSchemaTitleAndDescription(e,t){let r;if(e.$ref&&(r=getLabelFromScopeOrRef(e.$ref),e=l.schema(e,"",t)),e.title)return[e.title,e.description];if(e.allOf){let r=l.schema(e,"allOf",t).allOf.find(e=>!!e.title);if(r)return[r.title,r.description]}return[f.t("schema.title."+r,{defaultValue:p.camelCaseToSentenceCase(r)}),void 0]}function getLabelFromScopeOrRef(e){return e.substr(e.lastIndexOf("/")+1)}function getSchemaObjectProperties(e){let t=[];return e.allOf?t=e.allOf.map(e=>e.properties?Object.entries(e.properties):[]).flat():e.properties&&(t=Object.entries(e.properties)),t}export function mapStateToCombinatorRendererProps(t,r,n){let{uischema:m}=r,p=e(m,r.path),d=s(t),f=l.schema(r.schema||d,m.scope,d),u=void 0===r.visible||a(m)?c(m,i(t),r.path,o(t)):r.visible,h=r.id,b=l.data(i(t),p),v=t.jsonforms.core.ajv,S=f||d,g=l.schema(S,n,d),y=["required","additionalProperties","type","enum","const"],O=e=>!e||0===e.length||!e.find(e=>-1!==y.indexOf(e.keyword)),w=-1;for(let e=0;e<g.length;e++)try{let t=Object.assign({definitions:d.definitions},g[e]),r=v.compile(t);if(r(b),O(r.errors)){w=e;break}}catch(e){console.debug("Combinator subschema is not self contained, can't hand it over to AJV")}return{data:b,path:p,schema:S,rootSchema:d,visible:u,id:h,indexOfFittingSchema:w,uischemas:t.jsonforms.uischemas,uischema:m}}export function getLabel(e,t,r,o){if(r)return r;let i=findSchemaTitleAndDescription(e,t);return i[0]?i[0]:o?p.camelCaseToSentenceCase(getLabelFromScopeOrRef(o)):void 0}export function resolveSubSchemasRecursive(e,t,r){return e.$ref?resolveSubSchemasRecursive(l.schema(t,e.$ref,t),t):((r?[r]:["allOf","anyOf","oneOf"]).forEach(r=>{let o=e[r];o&&(e[r]=o.map(e=>resolveSubSchemasRecursive(e,t)))}),e.items&&(Array.isArray(e.items)?e.items=e.items.map(e=>resolveSubSchemasRecursive(e,t)):e.items=resolveSubSchemasRecursive(e.items,t)),e.properties&&Object.keys(e.properties).forEach(r=>e.properties[r]=resolveSubSchemasRecursive(e.properties[r],t)),e)}export const controlWithoutLabel=e=>({type:"Control",scope:e,label:!1});export const showJsonEditor=(e,t,r)=>{let o=b(),i=b();y(new g().setContent(u`
+                <or-ace-editor ${v(o)} @or-ace-editor-edit="${()=>void(i.value.disabled=!0)}" @or-ace-editor-changed="${e=>(e=>{let t=e.detail.valid;i.value.disabled=!t})(e)}" .value="${t}"></or-ace-editor>
+            `).setActions([{actionName:"cancel",content:"cancel"},{default:!0,actionName:"update",action:()=>{let e=o.value;e.validate()&&r(e.getValue()?JSON.parse(e.getValue()):void 0)},content:u`<or-mwc-input ${v(i)} disabled .type="${d.BUTTON}" label="update"></or-mwc-input>`}]).setHeading(e).setDismissAction(null).setStyles(u`
                 <style>
                     .mdc-dialog__surface {
                         width: 1024px;
@@ -10,7 +10,7 @@ import{composeWithUi,createDefaultValue,deriveTypes,getAjv,getData,getRenderers,
                         overflow-y: visible !important;
                     }
                     #dialog-content {
-                        border-color: var(--or-app-color5, ${unsafeCSS(DefaultColor5)});
+                        border-color: var(--or-app-color5, ${h(m)});
                         border-top-width: 1px;
                         border-top-style: solid;
                         border-bottom-width: 1px;