@openremote/or-json-forms 1.8.0-snapshot.20250725120001 → 1.8.0-snapshot.20250725123024

package/lib/standard-renderers.js

@@ -1,188 +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 = (schema) => schema.oneOf !== undefined &&
-    schema.oneOf.length > 0 &&
-    schema.oneOf.every((entry) => {
-        return getSchemaConst(entry) !== undefined;
-    });
-const hasEnumItems = (schema) => Array.isArray(schema.enum);
-export const isEnumArray = and(uiTypeIs('Control'), and(schemaMatches(schema => hasType(schema, 'array') &&
-    !Array.isArray(schema.items) &&
-    schema.uniqueItems === true), schemaSubPathMatches('items', schema => {
-    return hasOneOfItems(schema) || hasEnumItems(schema);
-})));
-export const verticalOrGroupLayoutTester = rankWith(1, or(uiTypeIs("VerticalLayout"), uiTypeIs("Group")));
-export const verticalLayoutRenderer = (state, props) => {
-    const contentProps = Object.assign(Object.assign(Object.assign({}, mapStateToLayoutProps({ jsonforms: Object.assign({}, state) }, props)), mapDispatchToControlProps(state.dispatch)), { label: props.label, required: props.required, errors: props.errors, minimal: props.minimal, type: props.type });
-    const template = html `<or-json-forms-vertical-layout .state="${state}" .props="${contentProps}"></or-json-forms-vertical-layout>`;
-    let deleteHandler;
-    if (!contentProps.required && contentProps.path) {
-        deleteHandler = () => {
-            contentProps.handleChange(contentProps.path || "", undefined);
-        };
-    }
-    return getTemplateWrapper(template, deleteHandler);
-};
-export const constTester = rankWith(6, schemaMatches(schema => getSchemaConst(schema) !== undefined));
-export const constRenderer = (state, props) => {
-    // Don't render const
-    return undefined;
-};
-export const inputControlTester = rankWith(3, or(schemaMatches(schema => Array.isArray(schema.type) && schema.type.length === 7), isStringControl, isBooleanControl, isNumberControl, isIntegerControl, isDateControl, isTimeControl, isDateTimeControl, isEnumControl, isOneOfEnumControl, isEnumArray));
-export const inputControlRenderer = (state, props) => {
-    const contentProps = Object.assign(Object.assign({}, mapStateToControlProps({ jsonforms: Object.assign({}, state) }, props)), mapDispatchToControlProps(state.dispatch));
-    contentProps.label = props.label || contentProps.label;
-    contentProps.required = !!props.required || contentProps.required;
-    const template = html `<or-json-forms-input-control .state="${state}" .props="${contentProps}"></or-json-forms-input-control>`;
-    let deleteHandler;
-    if (!contentProps.required && contentProps.path) {
-        deleteHandler = () => {
-            contentProps.handleChange(contentProps.path, undefined);
-        };
-    }
-    return getTemplateWrapper(template, deleteHandler);
-};
-export const objectControlTester = rankWith(2, isObjectControl);
-export const objectControlRenderer = (state, props) => {
-    const { required, renderers, cells, uischemas, schema, label, errors, path, visible, enabled, uischema, rootSchema } = mapStateToControlWithDetailProps({ jsonforms: Object.assign({}, state) }, props);
-    const detailUiSchema = findUISchema(uischemas, schema, uischema.scope, path, "VerticalLayout", uischema, rootSchema);
-    const contentProps = {
-        visible: visible,
-        enabled: enabled,
-        schema: schema,
-        uischema: detailUiSchema,
-        path: path,
-        renderers: renderers,
-        cells: cells,
-        label: props.label || getLabel(schema, rootSchema, label) || "",
-        required: !!props.required || !!required,
-        errors: errors,
-        minimal: props.minimal
-    };
-    return getTemplateFromProps(state, contentProps);
-};
-export const anyOfOneOfControlTester = rankWith(4, or(isAnyOfControl, isOneOfControl));
-export const anyOfOneOfControlRenderer = (state, props) => {
-    const jsonFormsContext = { jsonforms: Object.assign({}, state) };
-    const { required, renderers, cells, schema, label, path, errors, visible, enabled, uischema, rootSchema, data } = mapStateToControlWithDetailProps(jsonFormsContext, props);
-    const keyword = schema.anyOf !== undefined ? "anyOf" : "oneOf";
-    const resolvedSchema = resolveSchema(schema, keyword, rootSchema);
-    const resolvedProps = mapStateToCombinatorRendererProps(jsonFormsContext, props, keyword);
-    const renderInfos = createCombinatorRenderInfos(resolvedSchema, rootSchema, keyword, resolvedProps.uischema || uischema, path, resolvedProps.uischemas);
-    if (data !== undefined && data !== null && (resolvedProps.indexOfFittingSchema === undefined || resolvedProps.indexOfFittingSchema < 0)) {
-        // Try and match the data using our own combinator info objects
-        const combinatorInfos = getCombinatorInfos(resolvedSchema, rootSchema);
-        const constProp = combinatorInfos.length > 0 ? combinatorInfos[0].constProperty : undefined;
-        if (constProp && typeof data === "object" && data[constProp]) {
-            const dataType = data[constProp];
-            resolvedProps.indexOfFittingSchema = combinatorInfos.findIndex((combinatorInfo) => combinatorInfo.constValue === dataType);
-        }
-    }
-    if (resolvedProps.indexOfFittingSchema === undefined || resolvedProps.indexOfFittingSchema < 0) {
-        const { handleChange } = mapDispatchToControlProps(state.dispatch);
-        if (data !== undefined && data !== null) {
-            // We have data that doesn't match a schema so show invalid template
-            console.warn("Cannot match " + keyword + " schema to instance data");
-            const showJson = (ev) => {
-                ev.stopPropagation();
-                showJsonEditor(label, data, ((newValue) => {
-                    handleChange(path || "", newValue);
-                }));
-            };
-            return html `
-                <div class="item-container no-match-container"><span>${label}:</span><b><or-translate value="validation.noSchemaMatchFound"></b><or-mwc-input .type="${InputType.BUTTON}" outlined label="json" icon="pencil" @or-mwc-input-changed="${(ev) => showJson(ev)}"></or-mwc-input></div>
-            `;
-        }
-        else {
-            // We have no data so show a schema picker
-            return getSchemaPicker(rootSchema, resolvedSchema, path, keyword, props.label || label, (selectedSchema => handleChange(path, selectedSchema.defaultValueCreator())));
-        }
-    }
-    // Return template for the anyOf/oneOf schema that matches the data
-    const matchedSchema = renderInfos[resolvedProps.indexOfFittingSchema].schema;
-    let matchedUischema = renderInfos[resolvedProps.indexOfFittingSchema].uischema;
-    if (matchedSchema.allOf) {
-        // Force the uischema to be a simple control so it goes through the allOf renderer
-        matchedUischema = {
-            type: 'Control',
-            scope: "#",
-            label: false
-        };
-    }
-    const contentProps = {
-        schema: matchedSchema,
-        uischema: matchedUischema,
-        path: path,
-        renderers: renderers,
-        cells: cells,
-        label: props.label || getLabel(matchedSchema, rootSchema, label) || "",
-        required: props.required || !!required,
-        errors: errors,
-        minimal: props.minimal,
-        type: matchedSchema.title
-    };
-    return getTemplateFromProps(state, contentProps);
-};
-export const allOfControlTester = rankWith(4, isAllOfControl);
-export const allOfControlRenderer = (state, props) => {
-    const jsonFormsContext = { jsonforms: Object.assign({}, state) };
-    const contentProps = Object.assign({}, mapStateToControlWithDetailProps(jsonFormsContext, props));
-    // Merge the schemas
-    const allOfSchema = resolveSchema(contentProps.schema, "allOf", contentProps.rootSchema);
-    contentProps.schema = allOfSchema.allOf.reduce((accumulator, value) => Util.mergeObjects(accumulator, value, false));
-    // Reset the uischema scope
-    contentProps.uischema.scope = "#";
-    contentProps.label = props.label || contentProps.label;
-    contentProps.required = !!props.required || contentProps.required;
-    contentProps.minimal = props.minimal;
-    return getTemplateFromProps(state, contentProps);
-};
-export const arrayControlTester = rankWith(2, schemaMatches(schema => hasType(schema, 'array') && !Array.isArray(schema.items) // we don't care about tuples
-));
-export const arrayControlRenderer = (state, props) => {
-    const contentProps = Object.assign(Object.assign({}, mapStateToControlProps({ jsonforms: Object.assign({}, state) }, props)), mapDispatchToControlProps(state.dispatch));
-    contentProps.label = props.label || contentProps.label;
-    contentProps.required = !!props.required || contentProps.required;
-    contentProps.minimal = props.minimal;
-    const template = html `<or-json-forms-array-control .state="${state}" .props="${contentProps}"></or-json-forms-array-control>`;
-    let deleteHandler;
-    if (!contentProps.required && contentProps.path) {
-        deleteHandler = () => {
-            contentProps.handleChange(contentProps.path, undefined);
-        };
-    }
-    return getTemplateWrapper(template, deleteHandler);
-};
-export function getTemplateWrapper(elementTemplate, deleteHandler) {
-    const deleteTemplate = !deleteHandler ? `` : html `
-                <button class="button-clear" @click="${deleteHandler}"><or-icon icon="close-circle"></or-icon></input>
-            `;
-    return html `
-                <div class="item-container">
-                    ${elementTemplate}
-                    <div class="delete-container">
-                        ${deleteTemplate}
-                    </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 }
-];
-//# sourceMappingURL=standard-renderers.js.map
+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 $`
+                <div class="item-container">
+                    ${e}
+                    <div class="delete-container">
+                        ${t}
+                    </div>
+                </div>
+            `}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.js

@@ -1,156 +1,148 @@
-import { DefaultColor3, DefaultColor4, DefaultColor5 } from "@openremote/core";
-import { css, html, unsafeCSS } from "lit";
-// language=CSS
-export const baseStyle = css `
-    :host {
-        flex: 1;
-    }
-    
-    .item-container {
-        display: flex;
-    }
-    
-    .delete-container, .drag-container {
-        width: 30px;
-        display: flex;
-        vertical-align: middle;
-    }
-    
-    .item-container:hover .button-clear, .item-wrapper:hover .button-clear {
-        visibility: visible;
-    }
-    
-    .no-match-container {
-        align-items: center;
-    }
-
-    .no-match-container > *:not(:last-child) {
-        margin-right: 10px;
-    }
-
-    .button-clear {
-        background: none;
-        color: ${unsafeCSS(DefaultColor5)};
-        --or-icon-fill: ${unsafeCSS(DefaultColor5)};
-        visibility: hidden;
-        display: inline-block;
-        border: none;
-        padding: 0 0 0 5px;
-        cursor: pointer;
-    }                
-    .button-clear:hover {
-        --or-icon-fill: ${unsafeCSS(DefaultColor4)};
-    }                
-    .button-clear:focus {
-        outline: 0;
-    }                
-    .button-clear.hidden {
-        visibility: hidden;
-    }
-    
-    .any-of-picker {
-        width: 100%;
-        min-width: 200px;
-    }
-
-    #errors {
-        color: red;
-        margin-right: 10px;
-        flex: 1;
-        display: flex;
-        align-items: center;
-    }
-
-    #errors > or-icon {
-        margin-right: 5px;
-    }
-`;
-// language=CSS
-export const panelStyle = css `
-    #header-description {
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-    }
-
-    #type-label {
-        border: 1px solid green;
-        border-radius: 3px;
-        padding: 3px;
-        margin-left: 10px;
-    }
-
-    #header-buttons {
-        flex: 0;
-    }
-
-    #content-wrapper {
-        flex: 1;
-        padding: 0 4px 14px 24px;
-    }
-
-    #content {
-        display: flex;
-        flex-direction: column;
-    }
-
-    #content > * {
-        flex: 1;
-    }
-
-    .item-container + .item-container {
-        padding-top: 10px;
-    }
-
-    #footer {
-        margin-top: 10px;
-    }
-
-`;
-// language=HTML
-export const addItemOrParameterDialogStyle = html `
-    <style>
-        .mdc-dialog__surface {
-            width: 800px;
-            overflow-x: visible !important;
-            overflow-y: visible !important;
-        }
-        #dialog-content {
-            border-color: var(--or-app-color5, ${unsafeCSS(DefaultColor5)});
-            border-top-width: 1px;
-            border-top-style: solid;
-            border-bottom-width: 1px;
-            border-bottom-style: solid;
-            padding: 0;
-        }
-        form {
-            display: flex;
-            height: 100%;
-        }
-        #type-list {
-            overflow: auto;
-            min-width: 150px;
-            max-width: 300px;
-            flex: 0 0 40%;
-            border-right: 1px solid var(--or-app-color5, #CCC);
-        }
-        #parameter-list {
-            display: block;
-        }
-        #parameter-title {
-            text-transform: capitalize;
-            color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
-            font-size: 18px;
-            font-weight: bold;
-        }
-        #parameter-desc {
-            padding: 15px;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            overflow: auto;
-        }
-    </style>
-`;
-//# sourceMappingURL=styles.js.map
+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;
+    }
+    
+    .item-container {
+        display: flex;
+    }
+    
+    .delete-container, .drag-container {
+        width: 30px;
+        display: flex;
+        vertical-align: middle;
+    }
+    
+    .item-container:hover .button-clear, .item-wrapper:hover .button-clear {
+        visibility: visible;
+    }
+    
+    .no-match-container {
+        align-items: center;
+    }
+
+    .no-match-container > *:not(:last-child) {
+        margin-right: 10px;
+    }
+
+    .button-clear {
+        background: none;
+        color: ${l(t)};
+        --or-icon-fill: ${l(t)};
+        visibility: hidden;
+        display: inline-block;
+        border: none;
+        padding: 0 0 0 5px;
+        cursor: pointer;
+    }                
+    .button-clear:hover {
+        --or-icon-fill: ${l(o)};
+    }                
+    .button-clear:focus {
+        outline: 0;
+    }                
+    .button-clear.hidden {
+        visibility: hidden;
+    }
+    
+    .any-of-picker {
+        width: 100%;
+        min-width: 200px;
+    }
+
+    #errors {
+        color: red;
+        margin-right: 10px;
+        flex: 1;
+        display: flex;
+        align-items: center;
+    }
+
+    #errors > or-icon {
+        margin-right: 5px;
+    }
+`;export const panelStyle=r`
+    #header-description {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+    }
+
+    #type-label {
+        border: 1px solid green;
+        border-radius: 3px;
+        padding: 3px;
+        margin-left: 10px;
+    }
+
+    #header-buttons {
+        flex: 0;
+    }
+
+    #content-wrapper {
+        flex: 1;
+        padding: 0 4px 14px 24px;
+    }
+
+    #content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    #content > * {
+        flex: 1;
+    }
+
+    .item-container + .item-container {
+        padding-top: 10px;
+    }
+
+    #footer {
+        margin-top: 10px;
+    }
+
+`;export const addItemOrParameterDialogStyle=i`
+    <style>
+        .mdc-dialog__surface {
+            width: 800px;
+            overflow-x: visible !important;
+            overflow-y: visible !important;
+        }
+        #dialog-content {
+            border-color: var(--or-app-color5, ${l(t)});
+            border-top-width: 1px;
+            border-top-style: solid;
+            border-bottom-width: 1px;
+            border-bottom-style: solid;
+            padding: 0;
+        }
+        form {
+            display: flex;
+            height: 100%;
+        }
+        #type-list {
+            overflow: auto;
+            min-width: 150px;
+            max-width: 300px;
+            flex: 0 0 40%;
+            border-right: 1px solid var(--or-app-color5, #CCC);
+        }
+        #parameter-list {
+            display: block;
+        }
+        #parameter-title {
+            text-transform: capitalize;
+            color: var(--or-app-color3, ${l(e)});
+            font-size: 18px;
+            font-weight: bold;
+        }
+        #parameter-desc {
+            padding: 15px;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            overflow: auto;
+        }
+    </style>
+`;