array component

packages/builder/src/BackendRoot.svelte

@@ -33,23 +33,24 @@ export let navWidth = "50px";
 
 
 <style>
-	.root {
-    height: 100%;
-    display: flex;
-	}
-  
-
-  .content {
-    flex: 1 1 auto;
-    height: 100%;
-    background-color: var(--white);
-    margin:0;
-  }
-
-  .nav {
-    flex: 0 1 auto;
-    width: 300px;
-    height: 100%;
-  }
+
+.root {
+  height: 100%;
+  display: flex;
+}
+
+
+.content {
+  flex: 1 1 auto;
+  height: 100%;
+  background-color: var(--white);
+  margin:0;
+}
+
+.nav {
+  flex: 0 1 auto;
+  width: 300px;
+  height: 100%;
+}
 
 </style>

packages/builder/src/builderStore/store.js

@@ -55,7 +55,7 @@ export const getStore = () => {
         hasAppPackage: false,
         accessLevels: [],
         currentNode: null,
-        libraries:null,
+        libraries:null
     };
 
     const store = writable(initial);

packages/builder/src/userInterface/ComponentInstanceEditor.svelte

@@ -4,7 +4,10 @@ import PropsView from "./PropsView.svelte";
 import IconButton from "../common/IconButton.svelte";
 import { getComponentInfo } from "./pagesParsing/createProps";
 import { store } from "../builderStore";
-import { cloneDeep } from "lodash/fp";
+import { 
+    cloneDeep,
+    isUndefined
+} from "lodash/fp";
 import { fade, slide } from 'svelte/transition';
 
 export let propertyName = "";
@@ -29,9 +32,13 @@ const onSubComponentGoBack = () => {
     editingSubComponentProps = null;
 }
 
-const onEditComponentProp = (propName) => {
-    editingSubComponentName = propName;
-    editingSubComponentProps = instanceProps[propName];
+const onEditComponentProp = (propName, arrayIndex, arrayPropName) => {
+    editingSubComponentName = isUndefined(arrayIndex)
+                              ? propName
+                              : `${propName}[${arrayIndex}].${arrayPropName}`;
+    editingSubComponentProps = isUndefined(arrayIndex)
+                               ? instanceProps[propName]
+                               : instanceProps[propName][arrayIndex][arrayPropName];
 };
 
 

packages/builder/src/userInterface/ComponentPropSelector.svelte

@@ -18,7 +18,7 @@ export let props = emptyProps();
 export let onValueChanged = () => {};
 export let onComponentChosen = () => {};
 export let onEdit = () => {};
-export let label = ""
+export let label = "";
 export let disabled = false;
 
 const CHOOSE_COMPONENT = "choose_component";

packages/builder/src/userInterface/CurrentItemPreview.svelte

@@ -10,6 +10,24 @@ import {
 import { pipe } from "../common/core";
 import { splitName } from "./pagesParsing/splitRootComponentName"
 import { afterUpdate } from 'svelte';
+import { getRootComponent } from "./pagesParsing/getRootComponent";
+
+if(!window.budibaseIframeConnector) {
+    window.budibaseIframeConnector = {
+        initialiseComponent(props, htmlElement) {
+             const rootComponent = getRootComponent(
+                 props._component, allComponents);
+
+             const {componentName, libName} = splitName(
+                rootComponent.name);
+
+            new (libraries[libName][componentName])({
+                target: htmlElement,
+                props: {...props, _app: window.budibaseIframeConnector}
+            });
+        }
+    }
+}
 
 let component;
 let stylesheetLinks = "";
@@ -18,6 +36,9 @@ let props;
 let componentLibraryUrl = "";
 let rootComponentName = "";
 let iframe;
+let libraries;
+let allComponents;
+
 
 store.subscribe(s => {
     const {componentName, libName} = splitName(
@@ -31,6 +52,8 @@ store.subscribe(s => {
         join("\n")
     ]);
     componentLibraryUrl = makeLibraryUrl(s.appname, libName);
+    libraries = s.libraries;
+    allComponents = s.allComponents;
 });
 
 /*
@@ -65,7 +88,7 @@ const iframeLoaded = () => {
             const componentClass = module['${rootComponentName}'];
             const instance = new componentClass({
                 target: document.body,
-                props: JSON.parse('${JSON.stringify(props)}')
+                props: {...${JSON.stringify(props)}, _app: window.parent.budibaseIframeConnector}
             }) ;
         })
         
@@ -92,9 +115,4 @@ const iframeLoaded = () => {
     grid-column-start: middle;
 }
 
-#comonent-container-mock {
-    position:fixed;
-    left: -2000px
-}
-
 </style>

packages/builder/src/userInterface/EditComponent.svelte

@@ -111,9 +111,14 @@ const showDialog = () => {
     UIkit.modal(modalElement).show();
 }
 
-const onEditComponentProp = (propName) => {
-    editingComponentInstance = component.props[propName];
-    editingComponentInstancePropName = propName;
+const onEditComponentProp = (propName, arrayIndex, arrayPropName) => {
+
+    editingComponentInstance = isUndefined(arrayIndex) 
+                               ? component.props[propName]
+                               : component.props[propName][arrayIndex][arrayPropName];
+    editingComponentInstancePropName = isUndefined(arrayIndex)
+                                       ? propName
+                                       : `${propName}[${arrayIndex}].${arrayPropName}`;
 }
 
 const componentInstanceCancelEdit = () => {

packages/builder/src/userInterface/PropArraySelector.svelte

@@ -0,0 +1,124 @@
+<script>
+import IconButton from "../common/IconButton.svelte";
+import {
+    createArrayElementProps
+} from "./pagesParsing/createProps";
+import PropControl from "./PropControl.svelte";
+import {
+    some,
+    cloneDeep,
+} from "lodash/fp";
+import { validateProps } from "./pagesParsing/validateProps";
+
+export let parentProps;
+export let propDef;
+export let onValueChanged;
+export let onValidate = () => {};
+export let onEditComponentProp = () => {};
+
+let value = [];
+let elementDefinitionArray;
+let label = "";
+let elementErrors = {};
+
+$: {
+    const elArray = [];
+    for(let elProp in propDef.elementDefinition) {
+        if(elProp === "_component") continue;
+        elArray.push({
+            ...propDef.elementDefinition[elProp],
+            ____name: elProp
+        });
+    }
+    elementDefinitionArray = elArray;
+    label = propDef.____name;
+    value = parentProps[propDef.____name];
+}
+
+const addElement = () => {
+    const newElement = createArrayElementProps(
+        propDef.____name, 
+        propDef.elementDefinition).props;
+
+    value = [...value, newElement];
+    onValueChanged(value);
+}
+
+const validate = (index, elementProps) => {
+    elementErrors[index] = validateProps(
+        propDef.elementDefinition, elementProps, [], true);
+    onValidate(elementErrors[index]);
+    return elementErrors[index].length === 0;
+}
+
+const setProp = (index) => (name, propValue) => {
+    const newValue = cloneDeep(value);
+    const newProps = cloneDeep(newValue[index]);
+    newProps[name] = propValue;
+    newValue[index] = newProps;
+    value = newValue;
+
+    if(validate(index, newProps))
+        onValueChanged(newValue);
+    
+}
+
+let fieldHasError = index => propName => 
+    some(e => e.propName === propName)(elementErrors[index]);
+
+const onEditComponent = (index, propName) => () => {
+    onEditComponentProp(index, propName);
+}
+
+</script>
+
+<div class="root">
+    <div>
+        {label}
+    </div>
+
+    <div class="item-container">
+        {#each value as item, index}
+    
+        <div class="item-inner-container">
+            {#each elementDefinitionArray as propDef}
+            <PropControl setProp={setProp(index)}
+                        fieldHasError={fieldHasError(index)}
+                        {propDef}
+                        props={item}
+                        {index}
+                        onEditComponent={onEditComponent(index, propDef.____name)}
+                        disabled={false} />
+            {/each}
+        </div>
+    
+        {/each}
+
+        <div class="addelement-container"
+                    on:click={addElement}>
+            <IconButton icon="plus" 
+                            size="12"/>
+        </div>
+    </div>
+</div>
+
+
+<style>
+
+.addelement-container {
+    cursor: pointer;
+    padding: 3px 0px;
+    text-align: center;
+}
+
+.addelement-container:hover {
+    background-color: var(--primary25);
+}
+
+
+.item-container {
+    padding-left: 3px;
+    background: var(--secondary10);
+}
+
+</style>

packages/builder/src/userInterface/PropControl.svelte

@@ -4,6 +4,7 @@ import Checkbox from "../common/Checkbox.svelte";
 import Textbox from "../common/Textbox.svelte";
 import Dropdown from "../common/Dropdown.svelte";
 import ComponentPropSelector from "./ComponentPropSelector.svelte";
+import PropArraySelector from "./PropArraySelector.svelte";
 
 export let errors = [];
 export let setProp = () => {};
@@ -44,6 +45,11 @@ const setComponentProp = (props) => {
                             onEdit={onEditComponent}
                             onComponentChosen={onEditComponent}
                             onValueChanged={setComponentProp}/>
+    {:else if propDef.type === "array"}
+    <PropArraySelector parentProps={props}
+                       {propDef}
+                       onValueChanged={setComponentProp}
+                       onEditComponentProp={onEditComponent}/>
     {:else}
     <Textbox label={propDef.____name}
                 text={props[propDef.____name]}

packages/builder/src/userInterface/PropsView.svelte

@@ -100,8 +100,8 @@ const validate = (finalProps) => {
 const fieldHasError = (propName) => 
     some(e => e.propName === propName)(errors);
 
-const onEditComponent = (propName) => () => {
-    onEditComponentProp(propName);
+const onEditComponent = (propName) => (arrayIndex, arrayPropName) => {
+    onEditComponentProp(propName, arrayIndex, arrayPropName);
 }
 
 </script>
@@ -111,14 +111,13 @@ const onEditComponent = (propName) => () => {
     <form class="uk-form-stacked">
         {#each propsDefinitions as propDef, index}
         
-        <PropControl {errors}
-                        {setProp}
-                        {fieldHasError}
-                        {propDef}
-                        {props}
-                        {index}
-                        onEditComponent={onEditComponent(propDef.____name)}
-                        disabled={false} />
+        <PropControl {setProp}
+                     {fieldHasError}
+                     {propDef}
+                     {props}
+                     {index}
+                     onEditComponent={onEditComponent(propDef.____name)}
+                     disabled={false} />
             
         {/each}
 
@@ -135,13 +134,12 @@ const onEditComponent = (propName) => () => {
         {#if inheritedExpanded}
             {#each inheritedPropsDefinitions as propDef, index}
             
-            <PropControl {errors}
-                            {setProp}
-                            {fieldHasError}
-                            {propDef}
-                            {props}
-                            {index}
-                            disabled={true} />
+            <PropControl {setProp}
+                         {fieldHasError}
+                         {propDef}
+                         {props}
+                         {index}
+                         disabled={true} />
                 
             {/each}
         {/if}

packages/builder/src/userInterface/pagesParsing/createProps.js

@@ -148,6 +148,11 @@ export const createProps = (componentName, propsDefinition, derivedFromProps) =>
     });
 }
 
+export const createArrayElementProps = (arrayPropName, elementDefinition) => 
+    createProps(
+        `#element#${arrayPropName}`,
+        elementDefinition);
+
 const parsePropDef = propDef => {
     const error = message => ({error:message, propDef});
 
@@ -174,6 +179,9 @@ const parsePropDef = propDef => {
     return propDef.default;
 }
 
+export const arrayElementComponentName = (parentComponentName, arrayPropName) => 
+    `${parentComponentName}:${arrayPropName}`;
+
 /*
 Allowed propDefOptions
 - type: string, bool, number, array

packages/builder/src/userInterface/pagesParsing/getRootComponent.js

@@ -0,0 +1,10 @@
+import { isRootComponent } from "./searchComponents";
+import { find } from "lodash/fp";
+
+export const getRootComponent = (componentName, allComponents) => {
+    const component = find(c => c.name === componentName)(allComponents);
+
+    if(isRootComponent(component)) return component;
+
+    return getRootComponent(component.inherits, allComponents);
+}

packages/builder/src/userInterface/pagesParsing/validateProps.js

@@ -1,5 +1,8 @@
 import { types } from "./types";
-import { createProps } from "./createProps";
+import { 
+    createProps, 
+    arrayElementComponentName 
+} from "./createProps";
 import { isString } from "util";
 import { 
     includes,
@@ -138,7 +141,7 @@ export const validateProps = (propsDefinition, props, stack=[], isFinal=true) =>
         if(propDef.type === "array") {
             let index = 0;
             for(let arrayItem of propValue) {
-                arrayItem._component = `${props._component}:${propDefName}`
+                arrayItem._component = arrayElementComponentName(props._component, propDefName);
                 const arrayErrs = validateProps(
                     propDef.elementDefinition,
                     arrayItem,

packages/server/appPackages/testApp2/appDefinition.json

@@ -41,20 +41,7 @@
             "children": [],
             "validationRules": [],
             "nodeId": 2,
-            "indexes": [
-              {
-                "name": "Some index",
-                "type": "index",
-                "map": "return {...record};",
-                "filter": "",
-                "indexType": "ancestor",
-                "getShardName": "",
-                "getSortKey": "record.id",
-                "aggregateGroups": [],
-                "allowedRecordNodeIds": [],
-                "nodeId": 3
-              }
-            ],
+            "indexes": [],
             "allidsShardFactor": 1,
             "collectionName": "invoices",
             "isSingle": false
@@ -62,7 +49,22 @@
         ],
         "validationRules": [],
         "nodeId": 1,
-        "indexes": [],
+        "indexes": [
+          {
+            "name": "customer_invoices",
+            "type": "index",
+            "map": "return {...record};",
+            "filter": "",
+            "indexType": "ancestor",
+            "getShardName": "",
+            "getSortKey": "record.id",
+            "aggregateGroups": [],
+            "allowedRecordNodeIds": [
+              2
+            ],
+            "nodeId": 5
+          }
+        ],
         "allidsShardFactor": 64,
         "collectionName": "customers",
         "isSingle": false
@@ -83,6 +85,20 @@
           1
         ],
         "nodeId": 4
+      },
+      {
+        "name": "everyones_invoices",
+        "type": "index",
+        "map": "return {...record};",
+        "filter": "",
+        "indexType": "ancestor",
+        "getShardName": "",
+        "getSortKey": "record.id",
+        "aggregateGroups": [],
+        "allowedRecordNodeIds": [
+          2
+        ],
+        "nodeId": 6
       }
     ],
     "nodeId": 0
@@ -107,12 +123,20 @@
         [
           [
             [
-              {
-                "name": "output_to_file",
-                "behaviourSource": "main",
-                "behaviourName": "outputToFile",
-                "initialOptions": {}
-              }
+              [
+                [
+                  [
+                    [
+                      {
+                        "name": "output_to_file",
+                        "behaviourSource": "main",
+                        "behaviourName": "outputToFile",
+                        "initialOptions": {}
+                      }
+                    ]
+                  ]
+                ]
+              ]
             ]
           ]
         ]

packages/server/appPackages/testApp2/components/Mikes Panel.json

@@ -0,0 +1,46 @@
+{
+  "name": "Mikes Panel",
+  "description": "",
+  "inherits": "./standard-components/stackpanel",
+  "props": {
+    "children": [
+      {
+        "_component": "Mikes Panel:children",
+        "control": {
+          "_component": "Primary Button",
+          "contentText": "Button",
+          "contentComponent": {
+            "_component": ""
+          },
+          "className": "btn btn-primary",
+          "disabled": false
+        }
+      },
+      {
+        "_component": "Mikes Panel:children",
+        "control": {
+          "_component": ""
+        }
+      }
+    ],
+    "_component": "Mikes Panel",
+    "children[0].control": {
+      "_component": "Primary Button",
+      "contentText": "yeo",
+      "contentComponent": {
+        "_component": ""
+      },
+      "className": "btn btn-primary",
+      "disabled": false
+    },
+    "direction": "vertical",
+    "height": "200px",
+    "width": "200px"
+  },
+  "tags": [
+    "div",
+    "container",
+    "layout",
+    "panel"
+  ]
+}

packages/server/appPackages/testApp2/components/Random Button.json

@@ -0,0 +1,19 @@
+{
+  "name": "Random Button",
+  "description": "",
+  "inherits": "./standard-components/button",
+  "props": {
+    "contentComponent": {
+      "_component": "./standard-components/button",
+      "contentText": "Inner Button",
+      "contentComponent": {
+        "_component": ""
+      },
+      "className": "default",
+      "disabled": false
+    }
+  },
+  "tags": [
+    "button"
+  ]
+}

packages/server/appPackages/testApp2/components/Success Button.json

@@ -3,7 +3,7 @@
   "description": "",
   "inherits": "./standard-components/button",
   "props": {
-    "className": "btn btn-success",
+    "className": "btn btn-primary",
     "_component": "Success Button"
   },
   "tags": [

packages/server/appPackages/testApp2/components/login_screen.json

@@ -4,7 +4,8 @@
   "inherits": "./standard-components/login",
   "props": {
     "usernameLabel": "User",
-    "_component": "login_screen"
+    "_component": "login_screen",
+    "passwordLabel": "Secret"
   },
   "tags": [
     "login",

packages/server/appPackages/testApp2/components/mikes.json

@@ -0,0 +1,28 @@
+{
+  "name": "mikes",
+  "description": "",
+  "inherits": "./standard-components/stackpanel",
+  "props": {
+    "children": [
+      {
+        "_component": "undefined:children",
+        "control": {
+          "_component": "Primary Button",
+          "contentText": "Button",
+          "contentComponent": {
+            "_component": ""
+          },
+          "className": "btn btn-primary",
+          "disabled": false
+        }
+      }
+    ],
+    "_component": "mikes"
+  },
+  "tags": [
+    "div",
+    "container",
+    "layout",
+    "panel"
+  ]
+}

packages/server/appPackages/testApp2/components/schpanel.json

@@ -0,0 +1,27 @@
+{
+  "name": "schpanel",
+  "description": "",
+  "inherits": "./standard-components/stackpanel",
+  "props": {
+    "children": [
+      {
+        "_component": "undefined:children",
+        "control": {
+          "_component": "Primary Button",
+          "contentText": "Button",
+          "contentComponent": {
+            "_component": ""
+          },
+          "className": "btn btn-primary",
+          "disabled": false
+        }
+      }
+    ]
+  },
+  "tags": [
+    "div",
+    "container",
+    "layout",
+    "panel"
+  ]
+}

packages/server/appPackages/testApp2/components/yeeeeo.json

@@ -0,0 +1,51 @@
+{
+  "name": "yeeeeo",
+  "description": "",
+  "inherits": "./standard-components/stackpanel",
+  "props": {
+    "children": [
+      {
+        "_component": "yeeeeo:children",
+        "control": {
+          "_component": "Primary Button",
+          "contentText": "Button",
+          "contentComponent": {
+            "_component": ""
+          },
+          "className": "btn btn-primary",
+          "disabled": false
+        }
+      },
+      {
+        "_component": "yeeeeo:children",
+        "control": {
+          "_component": "Random Button",
+          "contentText": "Button",
+          "contentComponent": {
+            "_component": "./standard-components/button",
+            "contentText": "Inner Button",
+            "contentComponent": {
+              "_component": ""
+            },
+            "className": "default",
+            "disabled": false
+          },
+          "className": "default",
+          "disabled": false
+        }
+      }
+    ],
+    "_component": "yeeeeo",
+    "height": "400px",
+    "width": "400px",
+    "direction": "vertical",
+    "itemContainerClass": "",
+    "containerClass": ""
+  },
+  "tags": [
+    "div",
+    "container",
+    "layout",
+    "panel"
+  ]
+}

packages/server/appPackages/testApp2/standard-components/components.json

@@ -66,5 +66,28 @@
 			"className": {"type": "string", "default": "default"}
 		},
 		"tags": ["form"]
+	},
+	"stackpanel": {
+		"importPath": "stackpanel",
+		"name": "StackPanel",
+		"desciption": "Layout elements in a stack, either horizontally or vertically",
+		"props" : {
+			"direction": {
+				"type": "options", 
+				"options": ["horizontal", "vertical"],
+				"default":"horizontal"
+			},
+			"children": {
+				"type":"array",
+				"elementDefinition": {
+					"control":"component"
+				}
+			},
+			"width": {"type":"string","default":"auto"},
+			"height": {"type":"string","default":"auto"},
+			"containerClass":"string",
+			"itemContainerClass":"string"
+		},
+		"tags": ["div", "container", "layout", "panel"]
 	}
 }

packages/server/appPackages/testApp2/standard-components/src/Button.svelte

@@ -4,12 +4,21 @@ export let disabled = false;
 export let contentText;
 export let contentComponent;
 
+export let _app;
+let contentComponentContainer;
+
+$:{
+	if(_app && contentComponentContainer)
+		_app.initialiseComponent(contentComponent, contentComponentContainer);
+}
+
 </script>
 
 
 <button class={className} {disabled} on:click>
     {#if contentComponent && contentComponent._component}
-    {contentComponent}
+	<div bind:this={contentComponentContainer}>
+	</div>
     {:else if contentText}
     {contentText}
     {:else}

packages/server/appPackages/testApp2/standard-components/src/StackPanel.svelte

@@ -0,0 +1,51 @@
+<script>
+import { onMount } from 'svelte'
+
+export let direction = "horizontal";
+export let children = [];
+export let width = "auto";
+export let height = "auto";
+export let containerClass="";
+export let itemContainerClass="";
+
+
+export let _app;
+
+let htmlElements = {};
+
+onMount(() => {
+    if(_app && htmlElements) {
+        for(let el in htmlElements) {
+            _app.initialiseComponent(
+                children[el].control,
+                htmlElements[el]
+            );
+        }
+    }
+});
+
+
+</script>
+
+<div class="root {containerClass}"
+     style="width: {width}; height: {height}">
+    {#each children as child, index}
+    <div class={direction}>
+        <div class="{itemContainerClass}"
+            bind:this={htmlElements[index]}>
+        </div>
+    </div>
+    {/each}
+</div>
+
+<style>
+
+.horizontal {
+    display:inline-block;
+}
+
+.vertical {
+    display: block;
+}
+
+</style>

packages/server/appPackages/testApp2/standard-components/src/button.svelte

@@ -4,12 +4,21 @@ export let disabled = false;
 export let contentText;
 export let contentComponent;
 
+export let _app;
+let contentComponentContainer;
+
+$:{
+	if(_app && contentComponentContainer)
+		_app.initialiseComponent(contentComponent, contentComponentContainer);
+}
+
 </script>
 
 
 <button class={className} {disabled} on:click>
     {#if contentComponent && contentComponent._component}
-    {contentComponent}
+	<div bind:this={contentComponentContainer}>
+	</div>
     {:else if contentText}
     {contentText}
     {:else}

packages/server/appPackages/testApp2/standard-components/src/button.svelte.orig

@@ -1,44 +0,0 @@
-<script>
-export let className = "default";
-export let disabled = false;
-export let contentText;
-export let contentComponent;
-
-</script>
-
-
-<button class={className} {disabled} on:click>
-    {#if contentComponent && contentComponent._component}
-    {contentComponent}
-    {:else if contentText}
-    {contentText}
-    {:else}
-    <slot />
-    {/if}
-</button>
-
-
-<style>
-
-.default {
-	font-family: inherit;
-	font-size: inherit;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-.default:active {
-	background-color: #ddd;
-}
-
-.default:focus {
-	border-color: #666;
-}
-
-</style>

packages/server/appPackages/testApp2/standard-components/src/button.svelte~master

@@ -1,44 +0,0 @@
-<script>
-export let className = "default";
-export let disabled = false;
-export let contentText;
-export let contentComponent;
-
-</script>
-
-
-<button class={className} {disabled} on:click>
-    {#if contentComponent && contentComponent._component}
-    {contentComponent}
-    {:else if contentText}
-    {contentText}
-    {:else}
-    <slot />
-    {/if}
-</button>
-
-
-<style>
-
-.default {
-	font-family: inherit;
-	font-size: inherit;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-.default:active {
-	background-color: #ddd;
-}
-
-.default:focus {
-	border-color: #666;
-}
-
-</style>

packages/server/builder/bundle.css

@@ -1,41 +1,42 @@
 main.svelte-j8mzr7{height:100%;width:100%;font-family:"Lato", Helvetica, Arial, sans-serif}
 .root.svelte-fkeby9{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-fkeby9{flex:0 0 auto;height:25px;background:white;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);padding:5px;width:100%}.content.svelte-fkeby9{flex:1 1 auto;width:100%;height:100px}.content.svelte-fkeby9>div.svelte-fkeby9{height:100%;width:100%}.topnavitem.svelte-fkeby9{cursor:pointer;color:var(--slate);padding:0px 15px}.topnavitem.svelte-fkeby9:hover{color:var(--secondary75)}.active.svelte-fkeby9{color:var(--secondary100)}
 .root.svelte-e4n7zy{position:fixed;margin:0 auto;text-align:center;top:20%;width:100%}.inner.svelte-e4n7zy{display:inline-block;margin:auto}.logo.svelte-e4n7zy{width:300px;margin-bottom:40px}.root.svelte-e4n7zy .option{width:250px}.app-link.svelte-e4n7zy{margin-top:10px;display:block}
-.root.svelte-uaf5ep{height:100%;display:flex}.content.svelte-uaf5ep{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-uaf5ep{flex:0 1 auto;width:300px;height:100%}
-button.svelte-4po3k2{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-4po3k2:hover{color:var(--hovercolor)}button.svelte-4po3k2:active{outline:none}
-.root.svelte-1dih19s{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%}.ui-nav.svelte-1dih19s{grid-column-start:uiNav;background-color:var(--primary10);height:100%}.properties-pane.svelte-1dih19s{grid-column-start:properties;background-color:var(--primary10);height:100%}.pages-list-container.svelte-1dih19s{padding-top:20px}.nav-group-header.svelte-1dih19s{font-size:10pt;padding-left:10px}.nav-items-container.svelte-1dih19s{padding-top:10px}.nav-group-header.svelte-1dih19s{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:10px 2px 0px 7px}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(1){padding:0px 7px 0px 0px;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1dih19s>span.svelte-1dih19s:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--slate)}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3):hover{color:var(--primary75)}
+.root.svelte-q8uz1n{height:100%;display:flex}.content.svelte-q8uz1n{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-q8uz1n{flex:0 1 auto;width:300px;height:100%}
+button.svelte-bxuckr{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-bxuckr:hover{color:var(--hovercolor)}button.svelte-bxuckr:active{outline:none}
 .border-normal.svelte-7rfkdx{border-radius:var(--borderradiusall)}.border-left.svelte-7rfkdx{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-7rfkdx{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-7rfkdx{border-radius:0}button.svelte-7rfkdx{border-style:solid;padding:7px 15px;cursor:pointer}.primary.svelte-7rfkdx{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-7rfkdx:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-7rfkdx:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-7rfkdx:hover{background-color:var(--primary10)}.primary-outline.svelte-7rfkdx:pressed{background-color:var(--primary25)}.secondary.svelte-7rfkdx{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-7rfkdx:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-7rfkdx:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-7rfkdx:hover{background-color:var(--secondary10)}.secondary-outline.svelte-7rfkdx:pressed{background-color:var(--secondary25)}.success.svelte-7rfkdx{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-7rfkdx:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-7rfkdx:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-7rfkdx:hover{background-color:var(--success10)}.success-outline.svelte-7rfkdx:pressed{background-color:var(--success25)}.deletion.svelte-7rfkdx{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-7rfkdx:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-7rfkdx:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-7rfkdx:hover{background-color:var(--deletion10)}.deletion-outline.svelte-7rfkdx:pressed{background-color:var(--deletion25)}
+.root.svelte-1dih19s{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%}.ui-nav.svelte-1dih19s{grid-column-start:uiNav;background-color:var(--primary10);height:100%}.properties-pane.svelte-1dih19s{grid-column-start:properties;background-color:var(--primary10);height:100%}.pages-list-container.svelte-1dih19s{padding-top:20px}.nav-group-header.svelte-1dih19s{font-size:10pt;padding-left:10px}.nav-items-container.svelte-1dih19s{padding-top:10px}.nav-group-header.svelte-1dih19s{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:10px 2px 0px 7px}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(1){padding:0px 7px 0px 0px;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1dih19s>span.svelte-1dih19s:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--slate)}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3):hover{color:var(--primary75)}
 h4.svelte-o0id5a{margin-top:20px}
-.root.svelte-1py90dy{height:100%;background-color:var(--primary10)}.items-root.svelte-1py90dy{display:flex;flex-direction:column;max-height:100%;height:10px}.hierarchy.svelte-1py90dy{flex:1 1 auto}.hierarchy-title-row.svelte-1py90dy{padding:15px 7px;font-size:12pt;display:flex;font-weight:bold}.hierarchy-title.svelte-1py90dy{flex:auto 1 1}.space-filler.svelte-1py90dy{flex:1 1 auto}
-.root.svelte-zzs4qg{padding:10px}
-.root.svelte-1qmjs65{padding:10px}.edit-button.svelte-1qmjs65{cursor:pointer;color:var(--white)}tr.svelte-1qmjs65:hover .edit-button.svelte-1qmjs65{color:var(--secondary75)}
 .root.svelte-apja7r{height:100%;position:relative}.actions-header.svelte-apja7r{flex:0 1 auto}.node-view.svelte-apja7r{overflow-y:auto;flex:1 1 auto}
-h1.svelte-2ukyrk{font-size:1.2em}
-.root.svelte-1cnqtw{color:var(--secondary50)}.hierarchy-item.svelte-1cnqtw{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1cnqtw:hover{color:var(--secondary75)}.component.svelte-1cnqtw{margin-left:5px}.currentfolder.svelte-1cnqtw{color:var(--secondary100)}.selected.svelte-1cnqtw{color:var(--primary100)}.title.svelte-1cnqtw{margin-left:10px}
+.root.svelte-zy9ybu{height:100%;background-color:var(--primary10)}.items-root.svelte-zy9ybu{display:flex;flex-direction:column;max-height:100%;height:10px}.hierarchy.svelte-zy9ybu{flex:1 1 auto}.hierarchy-title-row.svelte-zy9ybu{padding:15px 7px;font-size:12pt;display:flex;font-weight:bold}.hierarchy-title.svelte-zy9ybu{flex:auto 1 1}.space-filler.svelte-zy9ybu{flex:1 1 auto}
+.root.svelte-1qmjs65{padding:10px}.edit-button.svelte-1qmjs65{cursor:pointer;color:var(--white)}tr.svelte-1qmjs65:hover .edit-button.svelte-1qmjs65{color:var(--secondary75)}
 .root.svelte-183dehm{height:100%;border-style:solid;border-color:var(--lightslate);border-width:0px 0px 0px 1px}.padding.svelte-183dehm{padding:0px 5px 0px 10px}.title.svelte-183dehm{background-color:white;padding:3px;display:grid;grid-template-columns:[name] 1fr [actions] auto}.title.svelte-183dehm>div.svelte-183dehm:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-183dehm>div.svelte-183dehm:nth-child(2){grid-column-start:actions}.section-header.svelte-183dehm{font-style:italic;color:var(--slate);border-style:solid;border-color:var(--lightslate);border-width:0px 0px 1px 0px}.section-header.svelte-183dehm{vertical-align:middle;margin-top:20px}
 .root.svelte-ffb307{padding-bottom:10px;padding-left:10px;font-size:16px;color:var(--secondary50)}.hierarchy-item.svelte-ffb307{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-ffb307:hover{color:var(--secondary75)}.component.svelte-ffb307{margin-left:5px}.selected.svelte-ffb307{color:var(--primary100)}.title.svelte-ffb307{margin-left:10px}
-.component-preview.svelte-3nuv7g{display:grid;grid-template-rows:[top] 1fr [middle] auto [bottom] 1fr;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-column-start:preview;height:100%}.component-container.svelte-3nuv7g{grid-row-start:middle;grid-column-start:middle}
+h1.svelte-2ukyrk{font-size:1.2em}
 .section-container.svelte-1t0x31f{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-1t0x31f:nth-child(1){margin-bottom:15px}.row-text.svelte-1t0x31f{margin-right:15px;color:var(--primary100)}input.svelte-1t0x31f{margin-right:15px}p.svelte-1t0x31f>span.svelte-1t0x31f{margin-left:30px}.header.svelte-1t0x31f{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(1){grid-column-start:title}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(2){grid-column-start:icon}
+.component-preview.svelte-1jir83x{display:grid;grid-template-rows:[top] 1fr [middle] auto [bottom] 1fr;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-column-start:preview;height:100%}.component-container.svelte-1jir83x{grid-row-start:middle;grid-column-start:middle}
+.root.svelte-zzs4qg{padding:10px}
+.root.svelte-1cnqtw{color:var(--secondary50)}.hierarchy-item.svelte-1cnqtw{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1cnqtw:hover{color:var(--secondary75)}.component.svelte-1cnqtw{margin-left:5px}.currentfolder.svelte-1cnqtw{color:var(--secondary100)}.selected.svelte-1cnqtw{color:var(--primary100)}.title.svelte-1cnqtw{margin-left:10px}
+.root.svelte-kswv5p{height:100%;padding:15px}.fields-table.svelte-kswv5p{margin:10px;border-collapse:collapse}.add-field-button.svelte-kswv5p{margin-left:15px;cursor:pointer}.edit-button.svelte-kswv5p{cursor:pointer;color:var(--white)}.edit-button.svelte-kswv5p:hover{color:var(--secondary75)}th.svelte-kswv5p{text-align:left}td.svelte-kswv5p{padding:5px 30px 5px 0px;margin:0}thead.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-kswv5p>tr.svelte-kswv5p:hover{background-color:var(--primary10)}tbody.svelte-kswv5p>tr:hover .edit-button.svelte-kswv5p{color:var(--secondary75)}.index-container.svelte-kswv5p{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-kswv5p{color:var(--slate)}.index-name.svelte-kswv5p{font-weight:bold;color:var(--primary100)}.index-container.svelte-kswv5p code.svelte-kswv5p{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-kswv5p{margin-top:7px}
+.root.svelte-1q40nqm{display:block;font-size:13pt;width:100%;cursor:pointer}.title.svelte-1q40nqm{font:var(--bodytext);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-1q40nqm:hover{background-color:var(--secondary10)}
+.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
+.root.svelte-1bn4xbe{display:block;font-size:12pt;width:100%;cursor:pointer}.title.svelte-1bn4xbe{padding-top:5px;padding-right:5px;padding-bottom:5px;color:var(--secondary100)}.title.svelte-1bn4xbe:hover{background-color:var(--secondary10)}.active.svelte-1bn4xbe{background-color:var(--primary10)}
 .dropdown-background.svelte-179p8ge{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-179p8ge{cursor:pointer;z-index:1}.dropdown-content.svelte-179p8ge{position:absolute;background-color:var(--white);min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;font-weight:normal;border-style:solid;border-width:1px;border-color:var(--secondary10)}.dropdown-content.svelte-179p8ge:not(:focus){display:none}.action-row.svelte-179p8ge{padding:7px 10px;cursor:pointer}.action-row.svelte-179p8ge:hover{background-color:var(--primary100);color:var(--white)}
 .root.svelte-d6wwkb{display:flex}.root.svelte-d6wwkb:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-d6wwkb:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-d6wwkb:not(:first-child):not(:last-child){border-radius:0}
-.edit-button.svelte-neetem{cursor:pointer;color:var(--white)}tr.svelte-neetem:hover .edit-button.svelte-neetem{color:var(--secondary75)}
-.edit-button.svelte-9z4fqi{cursor:pointer;color:var(--white)}tr.svelte-9z4fqi:hover .edit-button.svelte-9z4fqi{color:var(--secondary75)}
-.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
-.root.svelte-1q40nqm{display:block;font-size:13pt;width:100%;cursor:pointer}.title.svelte-1q40nqm{font:var(--bodytext);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-1q40nqm:hover{background-color:var(--secondary10)}
-.root.svelte-kswv5p{height:100%;padding:15px}.fields-table.svelte-kswv5p{margin:10px;border-collapse:collapse}.add-field-button.svelte-kswv5p{margin-left:15px;cursor:pointer}.edit-button.svelte-kswv5p{cursor:pointer;color:var(--white)}.edit-button.svelte-kswv5p:hover{color:var(--secondary75)}th.svelte-kswv5p{text-align:left}td.svelte-kswv5p{padding:5px 30px 5px 0px;margin:0}thead.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-kswv5p>tr.svelte-kswv5p:hover{background-color:var(--primary10)}tbody.svelte-kswv5p>tr:hover .edit-button.svelte-kswv5p{color:var(--secondary75)}.index-container.svelte-kswv5p{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-kswv5p{color:var(--slate)}.index-name.svelte-kswv5p{font-weight:bold;color:var(--primary100)}.index-container.svelte-kswv5p code.svelte-kswv5p{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-kswv5p{margin-top:7px}
+.info-text.svelte-um9cf7{font-size:0.8em;color:var(--slate)}
+.nav-item.svelte-1y614ns{padding:7px;font-size:12pt;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1y614ns:hover{background-color:var(--primary10)}.active.svelte-1y614ns{background-color:var(--primary10)}
 .root.svelte-1tilbnf{padding:5px;top:0;width:100%}
-.root.svelte-1sxai5n{font-size:10pt}.padding.svelte-1sxai5n{padding:0 10px}.inherited-title.svelte-1sxai5n{margin-top:40px;display:grid;grid-template-columns:[name] 1fr [actions] auto;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);font-style:italic}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(1){grid-column-start:name;color:var(--slate)}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
 .component.svelte-13tuzj8{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-13tuzj8:hover{background-color:var(--primary10)}.component.svelte-13tuzj8>.title.svelte-13tuzj8{font-size:13pt;color:var(--secondary100)}.component.svelte-13tuzj8>.description.svelte-13tuzj8{font-size:10pt;color:var(--primary75);font-style:italic}
-.info-text.svelte-um9cf7{font-size:0.8em;color:var(--slate)}
+.edit-button.svelte-9z4fqi{cursor:pointer;color:var(--white)}tr.svelte-9z4fqi:hover .edit-button.svelte-9z4fqi{color:var(--secondary75)}
+.root.svelte-1sxai5n{font-size:10pt}.padding.svelte-1sxai5n{padding:0 10px}.inherited-title.svelte-1sxai5n{margin-top:40px;display:grid;grid-template-columns:[name] 1fr [actions] auto;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);font-style:italic}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(1){grid-column-start:name;color:var(--slate)}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
 .title.svelte-1pp53c5{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-1pp53c5>span.svelte-1pp53c5{margin-left:10px}
-.root.svelte-1bn4xbe{display:block;font-size:12pt;width:100%;cursor:pointer}.title.svelte-1bn4xbe{padding-top:5px;padding-right:5px;padding-bottom:5px;color:var(--secondary100)}.title.svelte-1bn4xbe:hover{background-color:var(--secondary10)}.active.svelte-1bn4xbe{background-color:var(--primary10)}
-.root.svelte-bv289q{padding:10px}.option-container.svelte-bv289q{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
+.edit-button.svelte-neetem{cursor:pointer;color:var(--white)}tr.svelte-neetem:hover .edit-button.svelte-neetem{color:var(--secondary75)}
+textarea.svelte-1ooq0hh{padding:3px;background:var(--darkslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px}
 input.svelte-66516k{margin-right:7px}
 .error-container.svelte-jwy920{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-jwy920{padding:5px 0px}
-textarea.svelte-1ooq0hh{padding:3px;background:var(--darkslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px}
-.root.svelte-w5on8s{padding:3px 5px 7px 10px;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary25)}
 .root.svelte-woqcuf{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(2){grid-column-start:actions}.selectedname.svelte-woqcuf{font-weight:bold;color:var(--secondary)}
+.root.svelte-w5on8s{padding:3px 5px 7px 10px;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary25)}
+.root.svelte-bv289q{padding:10px}.option-container.svelte-bv289q{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
+.addelement-container.svelte-jliz3p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-jliz3p:hover{background-color:var(--primary25)}.item-container.svelte-jliz3p{padding-left:3px;background:var(--secondary10)}
 textarea.svelte-1wfv4cc{width:300px;height:200px}
-.nav-item.svelte-1y614ns{padding:7px;font-size:12pt;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1y614ns:hover{background-color:var(--primary10)}.active.svelte-1y614ns{background-color:var(--primary10)}
 
 /*# sourceMappingURL=bundle.css.map */

packages/server/config.js

@@ -11,4 +11,5 @@ module.exports = () => ({
     extraMasterPlugins: {},
     dev:true,
     customizeMaster: appDefinition => appDefinition
-})
+})
+