Events and state binding

AUTHORS.md

@@ -2,4 +2,5 @@ Contributors
 ===
 
 * Michael Shanks - [@mjashanks](https://github.com/mjashanks)
-* Daniel Loudon - [@danbudi](https://github.com/danbudi)
+* Dan - [@danbudi](https://github.com/danbudi)
+* Joe  - [@joebudi](https://github.com/joebudi)

packages/builder/rollup.config.js

@@ -33,7 +33,7 @@ const production = !process.env.ROLLUP_WATCH;
 const lodash_fp_exports = ["union", "reduce", "isUndefined", "cloneDeep", "split", "some", "map", "filter", "isEmpty", "countBy", "includes", "last", "find", "constant", 
 "take", "first", "intersection", "mapValues", "isNull", "has", "isNumber", "isString", "isBoolean", "isDate", "isArray", "isObject", "clone", "values", "keyBy", 
 "keys", "orderBy", "concat", "reverse", "difference", "merge", "flatten", "each", "pull", "join", "defaultCase", "uniqBy", "every", "uniqWith", "isFunction", "groupBy", 
-"differenceBy", "intersectionBy", "isEqual", "max", "sortBy", "assign", "uniq", "trimChars", "trimCharsStart", "isObjectLike", "flattenDeep", "indexOf"];
+"differenceBy", "intersectionBy", "isEqual", "max", "sortBy", "assign", "uniq", "trimChars", "trimCharsStart", "isObjectLike", "flattenDeep", "indexOf", "isPlainObject"];
 
 const lodash_exports = ["toNumber", "flow", "isArray", "join", "replace", "trim", "dropRight", "takeRight", "head", "isUndefined", "isNull", "isNaN", "reduce", "isEmpty", 
 "constant", "tail", "includes", "startsWith", "findIndex", "isInteger", "isDate", "isString", "split", "clone", "keys", "isFunction", "merge", "has", "isBoolean", "isNumber", 

packages/builder/src/common/binding.js

@@ -0,0 +1,25 @@
+import {
+    isString
+} from "lodash/fp";
+
+export const BB_STATE_BINDINGPATH = "##bbstate";
+export const BB_STATE_FALLBACK = "##bbstatefallback";
+
+export const isBinding = value => 
+    !isString(value) 
+    && value
+    && isString(value[BB_STATE_BINDINGPATH])
+    && value[BB_STATE_BINDINGPATH].length > 0;
+
+export const setBinding = ({path, fallback}, binding={} ) => {
+    if(isNonEmptyString(path)) binding[BB_STATE_BINDINGPATH] = path;
+    if(isNonEmptyString(fallback)) binding[BB_STATE_FALLBACK] = fallback;
+    return binding
+}
+
+export const getBinding = binding => ({
+    path: binding[BB_STATE_BINDINGPATH] || "",
+    fallback: binding[BB_STATE_FALLBACK] || ""
+});
+
+const isNonEmptyString = s => isString(s) && s.length > 0;

packages/builder/src/userInterface/ComponentPropSelector.svelte

@@ -18,7 +18,6 @@ export let props = emptyProps();
 export let onValueChanged = () => {};
 export let onComponentChosen = () => {};
 export let onEdit = () => {};
-export let label = "";
 export let disabled = false;
 
 const CHOOSE_COMPONENT = "choose_component";
@@ -70,7 +69,6 @@ const confirmClearComponent = () => {
 </script>
 
 
-<label class="uk-form-label">{label}</label>
 <div class="root uk-form-controls">
     <div class:selectedname={componentSelected}>
         {componentSelected ?  shortName : "(none)"}

packages/builder/src/userInterface/EventListSelector.svelte

@@ -0,0 +1,96 @@
+<script>
+import IconButton from "../common/IconButton.svelte";
+import EventSelector from "./EventSelector.svelte";
+import {
+    filter
+} from "lodash/fp";
+
+export let parentProps;
+export let propDef;
+export let onValueChanged;
+export let onValidate = () => {};
+
+let events = [];
+let elementErrors = {};
+
+$: {
+    events = parentProps[propDef.____name];
+}
+
+const addHandler = () => {
+    const newHandler = {handlerType:"", parameters:{}};
+    events = [...events, newHandler];
+    onValueChanged(events);
+}
+
+const onEventHandlerChanged = (oldEvent) => (newEvent) => {
+    const indexOfOldEvent = events.indexOf(oldEvent);
+    const newEvents = [...events];
+    newEvents.splice(
+        events.indexOf(oldEvent),
+        1,
+        newEvent);
+    events = newEvents;
+    onValueChanged(events);
+}
+
+const removeHandler = (index) => () => {
+    events = filter(e => e !== events[index])(events);
+    onValueChanged(events);
+}
+
+</script>
+
+<div class="root">
+    <div class="control-container">
+        {#each events as ev, index}
+
+        <div class="handler-container">
+            <EventSelector onChanged={onEventHandlerChanged(ev)}
+                        onRemoved={removeHandler(index)}
+                        event={ev} />
+
+        </div>
+
+        <div class="separator"></div>
+        {/each}
+
+        <div class="addelement-container"
+             on:click={addHandler}>
+            <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);
+    margin-top: 5px;
+}
+
+
+.control-container {
+    padding-left: 3px;
+    background: var(--secondary10);
+}
+
+.separator {
+    width: 60%;
+    margin: 10px auto;
+    border-style:solid;
+    border-width: 1px 0 0 0;
+    border-color: var(--primary25);
+}
+
+</style>

packages/builder/src/userInterface/EventSelector.svelte

@@ -0,0 +1,102 @@
+<script>
+import IconButton from "../common/IconButton.svelte";
+import StateBindingControl from "./StateBindingControl.svelte";
+import {
+    find, map, keys, reduce
+} from "lodash/fp";
+import { pipe } from "../common/core";
+
+export let event;
+export let onChanged;
+export let onRemoved;
+
+const events = [
+    {name:"", parameters: []},
+    {name:"Set State", parameters: ["path", "value"]},
+    {name:"Load Record", parameters: ["recordKey", "statePath"]},
+];
+
+let eventType;
+let parameters = [];
+
+$: {
+    if(event) {
+        eventType = event.handlerType;
+        parameters = pipe(event.parameters, [
+            keys,
+            map(k => ({name:k, value:event.parameters[k]}))
+        ]);
+    } else {
+        eventType = "";
+        parameters = [];
+    }
+}
+
+const eventChanged = (type, parameters) => {
+    const paramsAsObject = reduce(
+        (obj, p) => {
+            obj[p.name] = p.value;
+            return obj;
+        }
+        , {}
+    )(parameters)
+
+    onChanged({
+        handlerType:type, 
+        parameters: paramsAsObject
+    });
+}
+
+const eventTypeChanged = (ev) => {
+    const eType = find(e => e.name === ev.target.value)(events);
+    const emptyParameters = map(p => ({name:p, value:""}))(eType.parameters);
+    eventChanged(eType.name, emptyParameters);
+}
+
+const onParameterChanged = index => ev => {
+    const newparameters = [...parameters];
+    newparameters[index].value = ev.target.value;
+    eventChanged(eventType, newparameters);
+}
+
+</script>
+
+<div class="type-selector-container">
+    <select class="type-selector uk-select uk-form-small " value={eventType} on:change={eventTypeChanged}>
+        {#each events as ev}
+        <option value={ev.name}>{ev.name}</option>
+        {/each}
+    </select>
+
+    <IconButton icon="trash" 
+                size="12" 
+                on:click={onRemoved}/>
+
+</div>
+
+{#if parameters}
+{#each parameters as p, index}
+
+<div>
+    {p.name}   
+</div>
+<StateBindingControl  onChanged={onParameterChanged(index)}
+                      value={p.value} />
+
+{/each}
+{/if}
+
+<style>
+
+.type-selector-container {
+    display: flex;
+}
+
+.type-selector {
+    border-color: var(--primary50);
+    border-radius: 2px;
+    width: 50px;
+    flex: 1 0 auto;
+}
+
+</style>

packages/builder/src/userInterface/PropArraySelector.svelte

@@ -18,7 +18,6 @@ export let onEditComponentProp = () => {};
 
 let value = [];
 let elementDefinitionArray;
-let label = "";
 let elementErrors = {};
 
 $: {
@@ -31,7 +30,6 @@ $: {
         });
     }
     elementDefinitionArray = elArray;
-    label = propDef.____name;
     value = parentProps[propDef.____name];
 }
 
@@ -73,9 +71,7 @@ const onEditComponent = (index, propName) => () => {
 </script>
 
 <div class="root">
-    <div>
+
-        {label}
-    </div>
 
     <div class="item-container">
         {#each value as item, index}

packages/builder/src/userInterface/PropControl.svelte

@@ -5,6 +5,8 @@ import Textbox from "../common/Textbox.svelte";
 import Dropdown from "../common/Dropdown.svelte";
 import ComponentPropSelector from "./ComponentPropSelector.svelte";
 import PropArraySelector from "./PropArraySelector.svelte";
+import EventListSelector from "./EventListSelector.svelte";
+import StateBindingControl from "./StateBindingControl.svelte";
 
 export let errors = [];
 export let setProp = () => {};
@@ -26,37 +28,39 @@ const setComponentProp = (props) => {
 
 <div class="root" >
 
+    {#if propDef.type === "component"}
 
-    {#if propDef.type === "bool"}
+    <div class="prop-label">{propDef.____name}</div>
-    <Checkbox label={propDef.____name} 
-                checked={props[propDef.____name]} 
-                on:change={ev => setProp(propDef.____name, ev.target.checked)}
-                hasError={fieldHasError(propDef.____name)} />
-    {:else if propDef.type === "options"}
-    <Dropdown label={propDef.____name}
-                selected={props[propDef.____name]} 
-                options={propDef.options}
-                on:change={ev => setProp(propDef.____name, ev.target.value)}
-                hasError={fieldHasError(propDef.____name)}/>
-    {:else if propDef.type === "component"}
     <ComponentPropSelector label={propDef.____name}
                             props={props[propDef.____name]}
                             {disabled}
                             onEdit={onEditComponent}
                             onComponentChosen={onEditComponent}
                             onValueChanged={setComponentProp}/>
+
     {:else if propDef.type === "array"}
+
+    <div class="prop-label">{propDef.____name}</div>
     <PropArraySelector parentProps={props}
                        {propDef}
                        onValueChanged={setComponentProp}
-                       onEditComponentProp={onEditComponent}/>
+                       onEditComponentProp={onEditComponent} />
+
+    {:else if propDef.type === "event"}
+
+    <div class="prop-label">{propDef.____name}</div>
+    <EventListSelector parentProps={props}
+                       {propDef}
+                       onValueChanged={setComponentProp} />
+
     {:else}
-    <Textbox label={propDef.____name}
+
-                text={props[propDef.____name]}
+    <div class="prop-label">{propDef.____name}</div>
-                on:change={ev => setProp(propDef.____name, ev.target.value)}
+    <StateBindingControl value={props[propDef.____name]}
-                margin={false}
+                         type={propDef.type}
-                hasError={fieldHasError(propDef.____name)}
+                         options={propDef.options}
-                {disabled}/>
+                         onChanged={v => setProp(propDef.____name, v)}/>
+
     {/if} 
 
 </div>
@@ -70,4 +74,10 @@ const setComponentProp = (props) => {
     border-color: var(--primary25);
 }
 
+.prop-label {
+    font-size: 0.9em;
+    color: var(--primary100);
+    font-weight: bold;
+}
+
 </style>

packages/builder/src/userInterface/StateBindingControl.svelte

@@ -0,0 +1,155 @@
+<script>
+import {
+    isString
+} from "lodash/fp";
+import IconButton from "../common/IconButton.svelte";
+import {
+    isBinding, getBinding, setBinding
+} from "../common/binding";
+
+export let value="";
+export let onChanged= () => {};
+export let type="";
+export let options=[];
+
+let isBound=false;
+let bindingPath="";
+let bindingFallbackValue="";
+let isExpanded = false;
+let forceIsBound = false;
+
+$: {
+    isBound= forceIsBound || isBinding(value);
+
+    if(isBound) {
+        const binding = getBinding(value);
+        bindingPath= binding.path;
+        bindingFallbackValue= binding.fallback;
+    } else {
+        bindingPath="";
+        bindingFallbackValue="";
+    }
+}
+
+const clearBinding = () => {
+    forceIsBound = false;
+    onChanged("");
+}
+
+const bind = (path, fallback) => {
+    if(!path) {
+        clearBinding("");
+        return;
+    }
+    const binding = setBinding({path, fallback});
+    onChanged(binding);
+}
+
+const setBindingPath = ev => {
+    forceIsBound = false;
+    bind(ev.target.value, bindingFallbackValue)
+}
+
+const setBindingFallback = ev => {
+    bind(bindingPath, ev.target.value);
+}
+
+
+const makeBinding = () => {
+    forceIsBound=true;
+    isExpanded=true;
+}
+
+</script>
+
+{#if isBound}
+<div>
+    <div class="bound-header">
+        <div>{isExpanded ? "" : bindingPath}</div>
+        <IconButton icon={isExpanded ? "chevron-up" : "chevron-down"} 
+                    size="12"
+                    on:click={() => isExpanded=!isExpanded}/>
+        <IconButton icon="trash" 
+                    size="12"
+                    on:click={clearBinding}/>
+    </div>
+    {#if isExpanded}
+    <div>
+        <div class="binding-prop-label">Binding Path</div>
+        <input class="uk-input uk-form-small"
+               value={bindingPath}
+               on:change={setBindingPath} >
+        <div class="binding-prop-label">Fallback Value</div>
+        <input class="uk-input uk-form-small"
+               value={bindingFallbackValue}
+               on:change={setBindingFallback} >
+    </div>
+    {/if}
+
+</div>
+{:else}
+<div class="unbound-container">
+
+    {#if type === "bool"}
+
+    <div>
+        <IconButton icon={value == true ? "check-square" : "square"}
+                    size="19"
+                    on:click={() => value = !value}/>
+    </div>
+
+    {:else if type === "options"}
+
+    <select class="uk-select uk-form-small" 
+            value={value} 
+            on:change={ev => onChanged(ev.target.checked)}>
+        {#each options as option}
+        <option value={option}>{option}</option>
+        {/each}
+    </select>
+
+    {:else}
+
+    <input class="uk-input uk-form-small"
+            on:change={ev => onChanged(ev.target.value)}
+            bind:value={value}
+            style="flex: 1 0 auto;" > 
+
+
+    {/if}
+    <IconButton icon="link" 
+                size="12"
+                on:click={makeBinding} />
+</div>
+{/if}
+
+
+<style>
+
+.unbound-container {
+    display:flex;
+}
+
+.unbound-container > *:nth-child(1) {
+    width:auto;
+    flex: 1 0 auto;
+}
+
+.bound-header {
+    display: flex;
+}
+
+.bound-header > div:nth-child(1) {
+    flex: 1 0 auto;
+    width: 30px;
+    color: var(--darkslate);
+    padding-left: 5px;
+    font-style: italic;
+}
+
+.binding-prop-label {
+    color: var(--darkslate);
+}
+
+
+</style>

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

@@ -4,7 +4,8 @@ import {
     isNumber,
     isArray,
     isObjectLike,
-    some
+    isPlainObject,
+    every
 } from "lodash/fp";
 
 const defaultDef = typeName => () => ({
@@ -49,12 +50,12 @@ export const expandPropsDefinition = propsDefinition => {
 
 const isComponent = isObjectLike;
 const isEvent = e => 
-    isObjectLike(e) 
+    isPlainObject(e) 
-    && e.handlerType && isString(e.handlerType)
+    && isString(e.handlerType)
-    && e.parameters && isArray(e.parameters);
+    && isPlainObject(e.parameters);
 
 const isEventList = e => 
-    isArray(e) && !some(ev => !isEvent(ev));
+    isArray(e) && every(isEvent)(e);
 
 
 export const types = {

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

@@ -1,21 +1,17 @@
 import { types } from "./types";
 import { 
-    createProps, 
+    createProps, arrayElementComponentName 
-    arrayElementComponentName 
 } from "./createProps";
 import { isString } from "util";
 import { 
-    includes,
+    includes, filter, map, keys, 
-    filter, 
+    flatten, flattenDeep, each,
-    map, 
+    indexOf, isUndefined
-    keys, 
-    flatten,
-    flattenDeep,
-    each,
-    indexOf,
-    isUndefined
 } from "lodash/fp";
 import { common } from "../../../../core/src";
+import {
+    isBinding
+} from "../../common/binding";
 
 const pipe = common.$;
 
@@ -133,7 +129,15 @@ export const validateProps = (propsDefinition, props, stack=[], isFinal=true) =>
             continue;
         } 
 
-        if(!type.isOfType(propValue)) {
+        if(isBinding(propValue)) {
+            if(propDef.type === "array" 
+                || propDef.type === "component"
+                || propDef.type === "event") {
+                error(`Cannot apply binding to type ${propDef.type}`);
+                continue;
+            }
+        }
+        else if(!type.isOfType(propValue)) {
             error(`Property ${propDefName} is not of type ${propDef.type}. Actual value ${propValue}`)
             continue;
         }
@@ -157,6 +161,7 @@ export const validateProps = (propsDefinition, props, stack=[], isFinal=true) =>
 
         if(propDef.type === "options" 
            && propValue
+           && !isBinding(propValue)
            && !includes(propValue)(propDef.options)) {
             error(`Property ${propDefName} is not one of allowed options. Acutal value is ${propValue}`);
         }

packages/builder/tests/validateProps.spec.js

@@ -4,6 +4,9 @@ import {
     recursivelyValidate
 } from "../src/userInterface/pagesParsing/validateProps";
 import { createProps }  from "../src/userInterface/pagesParsing/createProps";
+import {
+    setBinding
+} from "../src/common/binding";
 
 // not that allot of this functionality is covered
 // in createDefaultProps - as validate props uses that.
@@ -151,6 +154,14 @@ describe("validateProps", () => {
         expect(errors[0].propName).toBe("width");
         
     });
+
+    it("should not return error when has binding", () => {
+        const props = validProps();
+        props.columns[0].width = setBinding({path:"some_path"});
+        props.size = setBinding({path:"other path", fallback:"small"});
+        const errors = validateProps(validPropDef, props, [], true);
+        expect(errors.length).toEqual(0);
+    });
 });
 
 describe("recursivelyValidateProps", () => {

packages/client/src/stateBinding.js

@@ -1,5 +1,5 @@
 
-export const BB_STATE_INDICATOR = "##bbstate";
+export const BB_STATE_BINDINGPATH = "##bbstate";
 export const BB_STATE_FALLBACK = "##bbstatefallback";
 
 export const bindComponent = (store, component) => {
@@ -49,8 +49,8 @@ export const bindComponent = (store, component) => {
 
 }
 
-const isState = (prop) => prop[BB_STATE_INDICATOR] !== undefined;
+const isState = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
-const stateBinding = (prop) => prop[BB_STATE_INDICATOR];
+const stateBinding = (prop) => prop[BB_STATE_BINDINGPATH];
 const stateFallback = (prop) => prop[BB_STATE_FALLBACK];
 const boundValueFromStore = (s, binding, fallback) => {
     const value = s[binding];

packages/server/appPackages/testApp2/components/Button in the middle.json

@@ -0,0 +1,37 @@
+{
+  "name": "Button in the middle",
+  "description": "",
+  "inherits": "Centered Panel",
+  "props": {
+    "children": [
+      {
+        "_component": "undefined:children",
+        "control": {
+          "_component": "@budibase/standard-components/button",
+          "contentText": "Button",
+          "contentComponent": {
+            "_component": ""
+          },
+          "className": "default",
+          "disabled": false,
+          "onClick": []
+        },
+        "gridColumn": "center",
+        "gridRow": "middle",
+        "gridColumnStart": "",
+        "gridColumnEnd": "",
+        "gridRowStart": "",
+        "gridRowEnd": ""
+      }
+    ],
+    "height": "200px",
+    "width": "200px"
+  },
+  "tags": [
+    "div",
+    "container",
+    "layout",
+    "panel",
+    "grid"
+  ]
+}

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

@@ -0,0 +1,16 @@
+{
+  "name": "Centered Panel",
+  "description": "",
+  "inherits": "@budibase/standard-components/grid",
+  "props": {
+    "gridTemplateColumns": "[left] 30px [center] 1fr [right] 30px",
+    "gridTemplateRows": "[top] 30px [middle] 1fr [bottom] 30px"
+  },
+  "tags": [
+    "div",
+    "container",
+    "layout",
+    "panel",
+    "grid"
+  ]
+}

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

@@ -0,0 +1,29 @@
+{
+  "name": "Primary Button",
+  "description": "",
+  "inherits": "@budibase/standard-components/button",
+  "props": {
+    "onClick": [
+      {
+        "handlerType": "Load Record",
+        "parameters": {
+          "recordKey": "waa",
+          "statePath": "yea"
+        }
+      },
+      {
+        "handlerType": "Load Record",
+        "parameters": {
+          "recordKey": "ttt",
+          "statePath": "eee"
+        }
+      }
+    ],
+    "contentText": {
+      "##bbstate": "yea"
+    }
+  },
+  "tags": [
+    "button"
+  ]
+}

packages/server/builder/bundle.css

@@ -1,43 +1,47 @@
-main.svelte-kajqu6{height:100%;width:100%;font-family:"Roboto", Helvetica, Arial, sans-serif}
+main.svelte-1ui0j3s{height:100%;width:100%;font-family:"Roboto", Helvetica, Arial, sans-serif}
-.root.svelte-h9y88z{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-h9y88z{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-h9y88z{flex:1 1 auto;width:100%;height:100px}.content.svelte-h9y88z>div.svelte-h9y88z{height:100%;width:100%}.topnavitem.svelte-h9y88z{cursor:pointer;color:var(--slate);padding:0px 15px}.topnavitem.svelte-h9y88z:hover{color:var(--secondary75)}.active.svelte-h9y88z{color:var(--secondary100)}
+.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-jymnqv{position:fixed;margin:0 auto;text-align:center;top:20%;width:100%}.inner.svelte-jymnqv{display:inline-block;margin:auto}.logo.svelte-jymnqv{width:300px;margin-bottom:40px}.root.svelte-jymnqv .option{width:250px}.app-link.svelte-jymnqv{margin-top:10px;display:block}
+.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-tavaga{height:100%;display:flex}.content.svelte-tavaga{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-tavaga{flex:0 1 auto;width:300px;height:100%}
+.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%}
-.root.svelte-1rbfs7z{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%}.ui-nav.svelte-1rbfs7z{grid-column-start:uiNav;background-color:var(--primary10);height:100%}.properties-pane.svelte-1rbfs7z{grid-column-start:properties;background-color:var(--primary10);height:100%}.pages-list-container.svelte-1rbfs7z{padding-top:20px}.nav-group-header.svelte-1rbfs7z{font-size:10pt;padding-left:10px}.nav-items-container.svelte-1rbfs7z{padding-top:10px}.nav-group-header.svelte-1rbfs7z{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:10px 2px 0px 7px}.nav-group-header.svelte-1rbfs7z>div.svelte-1rbfs7z:nth-child(1){padding:0px 7px 0px 0px;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1rbfs7z>span.svelte-1rbfs7z:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-1rbfs7z>div.svelte-1rbfs7z:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--slate)}.nav-group-header.svelte-1rbfs7z>div.svelte-1rbfs7z:nth-child(3):hover{color:var(--primary75)}
+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-p1bw3l{border-radius:var(--borderradiusall)}.border-left.svelte-p1bw3l{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-p1bw3l{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-p1bw3l{border-radius:0}button.svelte-p1bw3l{border-style:solid;padding:7.5px 15px;cursor:pointer;margin:5px;border-radius:5px}.primary.svelte-p1bw3l{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-p1bw3l:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-p1bw3l:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-p1bw3l:hover{background-color:var(--primary10)}.primary-outline.svelte-p1bw3l:pressed{background-color:var(--primary25)}.secondary.svelte-p1bw3l{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-p1bw3l:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-p1bw3l:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-p1bw3l:hover{background-color:var(--secondary10)}.secondary-outline.svelte-p1bw3l:pressed{background-color:var(--secondary25)}.success.svelte-p1bw3l{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-p1bw3l:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-p1bw3l:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-p1bw3l:hover{background-color:var(--success10)}.success-outline.svelte-p1bw3l:pressed{background-color:var(--success25)}.deletion.svelte-p1bw3l{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-p1bw3l:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-p1bw3l:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-p1bw3l:hover{background-color:var(--deletion10)}.deletion-outline.svelte-p1bw3l: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)}
-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}
+.border-normal.svelte-vnon4v{border-radius:var(--borderradiusall)}.border-left.svelte-vnon4v{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-vnon4v{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-vnon4v{border-radius:0}button.svelte-vnon4v{border-style:solid;padding:7.5px 15px;cursor:pointer;margin:5px;border-radius:5px}.primary.svelte-vnon4v{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-vnon4v:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-vnon4v:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-vnon4v:hover{background-color:var(--primary10)}.primary-outline.svelte-vnon4v:pressed{background-color:var(--primary25)}.secondary.svelte-vnon4v{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-vnon4v:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-vnon4v:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-vnon4v:hover{background-color:var(--secondary10)}.secondary-outline.svelte-vnon4v:pressed{background-color:var(--secondary25)}.success.svelte-vnon4v{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-vnon4v:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-vnon4v:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-vnon4v:hover{background-color:var(--success10)}.success-outline.svelte-vnon4v:pressed{background-color:var(--success25)}.deletion.svelte-vnon4v{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-vnon4v:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-vnon4v:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-vnon4v:hover{background-color:var(--deletion10)}.deletion-outline.svelte-vnon4v:pressed{background-color:var(--deletion25)}
-h4.svelte-o0id5a{margin-top:20px}
+h4.svelte-sqtlby{margin-top:20px}
-.root.svelte-85bkcq{height:100%;position:relative}.actions-header.svelte-85bkcq{flex:0 1 auto}.node-view.svelte-85bkcq{overflow-y:auto;flex:1 1 auto}
+.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}
-.root.svelte-pdeftd{height:100%;background-color:var(--secondary5)}.items-root.svelte-pdeftd{display:flex;flex-direction:column;max-height:100%;height:10px}.hierarchy.svelte-pdeftd{flex:1 1 auto}.hierarchy-title-row.svelte-pdeftd{padding:2rem 1rem 0rem 1rem;font-size:10pt;display:flex;font-weight:bold}.hierarchy-title.svelte-pdeftd{flex:auto 1 1}.space-filler.svelte-pdeftd{flex:1 1 auto}
+.root.svelte-1ywqvdl{height:100%;background-color:var(--secondary5)}.items-root.svelte-1ywqvdl{display:flex;flex-direction:column;max-height:100%;height:10px}.hierarchy.svelte-1ywqvdl{flex:1 1 auto}.hierarchy-title-row.svelte-1ywqvdl{padding:2rem 1rem 0rem 1rem;font-size:10pt;display:flex;font-weight:bold}.hierarchy-title.svelte-1ywqvdl{flex:auto 1 1}.space-filler.svelte-1ywqvdl{flex:1 1 auto}
-.root.svelte-1y6dy5x{padding:10px}
+.root.svelte-zzs4qg{padding:10px}
-.root.svelte-1iwq1b2{padding-bottom:10px;padding-left:10px;font-size:16px;color:var(--secondary50)}.hierarchy-item.svelte-1iwq1b2{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1iwq1b2:hover{color:var(--secondary75)}.component.svelte-1iwq1b2{margin-left:5px}.selected.svelte-1iwq1b2{color:var(--primary100)}.title.svelte-1iwq1b2{margin-left: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-1be865r{padding:10px}.edit-button.svelte-1be865r{cursor:pointer;color:var(--white)}tr.svelte-1be865r:hover .edit-button.svelte-1be865r{color:var(--secondary75)}
+.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-1ba51k0{color:var(--secondary50)}.hierarchy-item.svelte-1ba51k0{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1ba51k0:hover{color:var(--secondary75)}.component.svelte-1ba51k0{margin-left:5px}.currentfolder.svelte-1ba51k0{color:var(--secondary100)}.selected.svelte-1ba51k0{color:var(--primary100)}.title.svelte-1ba51k0{margin-left:10px}
+.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-xai2hc{height:100%;border-style:solid;border-color:var(--lightslate);border-width:0px 0px 0px 1px}.padding.svelte-xai2hc{padding:0px 5px 0px 10px}.title.svelte-xai2hc{background-color:white;padding:3px;display:grid;grid-template-columns:[name] 1fr [actions] auto}.title.svelte-xai2hc>div.svelte-xai2hc:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-xai2hc>div.svelte-xai2hc:nth-child(2){grid-column-start:actions}.section-header.svelte-xai2hc{font-style:italic;color:var(--slate);border-style:solid;border-color:var(--lightslate);border-width:0px 0px 1px 0px}.section-header.svelte-xai2hc{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}
-h1.svelte-2ukyrk{font-size:1.2em}
+h1.svelte-16jkjx9{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-is81a4{padding:15px}.help-text.svelte-is81a4{color:var(--slate);font-size:10pt}
+.root.svelte-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt}
-.component-preview.svelte-1rf8xuh{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-1rf8xuh{grid-row-start:middle;grid-column-start:middle}
+.section-container.svelte-yk1mmr{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-yk1mmr:nth-child(1){margin-bottom:15px}.row-text.svelte-yk1mmr{margin-right:15px;color:var(--primary100)}input.svelte-yk1mmr{margin-right:15px}p.svelte-yk1mmr>span.svelte-yk1mmr{margin-left:30px}.header.svelte-yk1mmr{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(1){grid-column-start:title}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(2){grid-column-start:icon}
-.dropdown-background.svelte-rq5j5s{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-rq5j5s{cursor:pointer;z-index:1}.dropdown-content.svelte-rq5j5s{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-rq5j5s:not(:focus){display:none}.action-row.svelte-rq5j5s{padding:7px 10px;cursor:pointer}.action-row.svelte-rq5j5s:hover{background-color:var(--primary100);color:var(--white)}
+.root.svelte-16m6n12{height:100%;padding:2rem}.settings-title.svelte-16m6n12{font-weight:600}.title.svelte-16m6n12{margin:3rem 0rem 0rem 0rem;font-weight:600}.recordkey.svelte-16m6n12{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-16m6n12{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-16m6n12{cursor:pointer}.edit-button.svelte-16m6n12{cursor:pointer;color:var(--white)}.edit-button.svelte-16m6n12:hover{color:var(--secondary75)}th.svelte-16m6n12{text-align:left}td.svelte-16m6n12{padding:1rem 5rem 1rem 0rem;margin:0}thead.svelte-16m6n12>tr.svelte-16m6n12{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-16m6n12>tr.svelte-16m6n12{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-16m6n12>tr.svelte-16m6n12:hover{background-color:var(--primary10)}tbody.svelte-16m6n12>tr:hover .edit-button.svelte-16m6n12{color:var(--secondary75)}.index-container.svelte-16m6n12{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-16m6n12{color:var(--slate)}.index-name.svelte-16m6n12{font-weight:bold;color:var(--primary100)}.index-container.svelte-16m6n12 code.svelte-16m6n12{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-16m6n12{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-16m6n12{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px}
-.root.svelte-17w6x7f{height:100%;padding:2rem}.settings-title.svelte-17w6x7f{font-weight:600}.title.svelte-17w6x7f{margin:3rem 0rem 0rem 0rem;font-weight:600}.recordkey.svelte-17w6x7f{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-17w6x7f{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-17w6x7f{cursor:pointer}.edit-button.svelte-17w6x7f{cursor:pointer;color:var(--white)}.edit-button.svelte-17w6x7f:hover{color:var(--secondary75)}th.svelte-17w6x7f{text-align:left}td.svelte-17w6x7f{padding:1rem 5rem 1rem 0rem;margin:0}thead.svelte-17w6x7f>tr.svelte-17w6x7f{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-17w6x7f>tr.svelte-17w6x7f{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-17w6x7f>tr.svelte-17w6x7f:hover{background-color:var(--primary10)}tbody.svelte-17w6x7f>tr:hover .edit-button.svelte-17w6x7f{color:var(--secondary75)}.index-container.svelte-17w6x7f{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-17w6x7f{color:var(--slate)}.index-name.svelte-17w6x7f{font-weight:bold;color:var(--primary100)}.index-container.svelte-17w6x7f code.svelte-17w6x7f{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-17w6x7f{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-17w6x7f{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px}
+.root.svelte-b3063u{display:block;font-size:1rem;width:100%;cursor:pointer}.title.svelte-b3063u{font:var(--fontblack);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-b3063u:hover{background-color:var(--secondary10)}
-.root.svelte-1fkfoam{height:100%;padding:15px}.allowed-records.svelte-1fkfoam{margin:20px 0px}.allowed-records.svelte-1fkfoam>span.svelte-1fkfoam{margin-right:30px}
+.root.svelte-wgyofl{padding:1.5rem;width:100%;align-items:right}
-.root.svelte-1xd1rdl{display:block;font-size:1rem;width:100%;cursor:pointer}.title.svelte-1xd1rdl{font:var(--fontblack);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-1xd1rdl: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-1k0qm{display:block;font-size:10pt;width:100%;cursor:pointer}.title.svelte-1k0qm{padding-top:.5rem;padding-right:.5rem;color:var(--secondary100)}.title.svelte-1k0qm:hover{background-color:var(--secondary10)}.active.svelte-1k0qm{background-color:var(--primary10)}
+.dropdown-background.svelte-11ifkop{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-11ifkop{cursor:pointer;z-index:1}.dropdown-content.svelte-11ifkop{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-11ifkop:not(:focus){display:none}.action-row.svelte-11ifkop{padding:7px 10px;cursor:pointer}.action-row.svelte-11ifkop:hover{background-color:var(--primary100);color:var(--white)}
-.root.svelte-1qdntd{padding:1.5rem;width:100%;align-items:right}
+.root.svelte-3fdbwl{display:block;font-size:10pt;width:100%;cursor:pointer}.title.svelte-3fdbwl{padding-top:.5rem;padding-right:.5rem;color:var(--secondary100)}.title.svelte-3fdbwl:hover{background-color:var(--secondary10)}.active.svelte-3fdbwl{background-color:var(--primary10)}
-.nav-item.svelte-ys4cw{padding:1rem 1rem 0rem 1rem;font-size:10pt;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-ys4cw:hover{background-color:var(--primary10)}.active.svelte-ys4cw{background-color:var(--primary10)}
+.nav-item.svelte-1ld5h6g{padding:1rem 1rem 0rem 1rem;font-size:10pt;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1ld5h6g:hover{background-color:var(--primary10)}.active.svelte-1ld5h6g{background-color:var(--primary10)}
-.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}
+.root.svelte-x3bf9z{display:flex}.root.svelte-x3bf9z:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-x3bf9z:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-x3bf9z:not(:first-child):not(:last-child){border-radius:0}
-.edit-button.svelte-1le5bpl{cursor:pointer;color:var(--white)}tr.svelte-1le5bpl:hover .edit-button.svelte-1le5bpl{color:var(--secondary75)}
+.edit-button.svelte-9z4fqi{cursor:pointer;color:var(--white)}tr.svelte-9z4fqi:hover .edit-button.svelte-9z4fqi{color:var(--secondary75)}
-.edit-button.svelte-12jzg4k{cursor:pointer;color:var(--white)}tr.svelte-12jzg4k:hover .edit-button.svelte-12jzg4k{color:var(--secondary75)}
+.edit-button.svelte-neetem{cursor:pointer;color:var(--white)}tr.svelte-neetem:hover .edit-button.svelte-neetem{color:var(--secondary75)}
-.root.svelte-beukw7{font-size:10pt}.padding.svelte-beukw7{padding:0 10px}.inherited-title.svelte-beukw7{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-beukw7>div.svelte-beukw7:nth-child(1){grid-column-start:name;color:var(--slate)}.inherited-title.svelte-beukw7>div.svelte-beukw7:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
+.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)}
-.info-text.svelte-um9cf7{font-size:0.8em;color:var(--slate)}
+.info-text.svelte-y0b7l0{font-size:0.8em;color:var(--slate)}
-.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}
+.title.svelte-dhe1ge{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-dhe1ge>span.svelte-dhe1ge{margin-left:10px}
-.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}
+.component.svelte-qxar5p{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-qxar5p:hover{background-color:var(--primary10)}.component.svelte-qxar5p>.title.svelte-qxar5p{font-size:13pt;color:var(--secondary100)}.component.svelte-qxar5p>.description.svelte-qxar5p{font-size:10pt;color:var(--primary75);font-style:italic}
-textarea.svelte-1iox4u1{padding:3px;margin-top:5px;margin-bottom:10px;background:var(--lightslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px;border-radius:5px}
+.error-container.svelte-ole1mk{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-ole1mk{padding:5px 0px}
-.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-di7k4b{padding:3px;margin-top:5px;margin-bottom:10px;background:var(--lightslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px;border-radius:5px}
-.root.svelte-emcy8y{padding:10px}.option-container.svelte-emcy8y{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
+.root.svelte-bv289q{padding:10px}.option-container.svelte-bv289q{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
-.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)}
+input.svelte-9fre0g{margin-right:7px}
-input.svelte-66516k{margin-right:7px}
+.root.svelte-1el8vet{padding:3px 5px 7px 10px;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary25)}.prop-label.svelte-1el8vet{font-size:0.9em;color:var(--primary100);font-weight:bold}
-.root.svelte-w5on8s{padding:3px 5px 7px 10px;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary25)}
+.root.svelte-ogh8o0{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(2){grid-column-start:actions}.selectedname.svelte-ogh8o0{font-weight:bold;color:var(--secondary)}
-textarea.svelte-1wfv4cc{width:300px;height:200px}
+textarea.svelte-1kv2xk7{width:300px;height:200px}
-.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)}
+.addelement-container.svelte-199q8jr{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-199q8jr:hover{background-color:var(--primary25)}.item-container.svelte-199q8jr{padding-left:3px;background:var(--secondary10)}
+.addelement-container.svelte-r1ft9p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-r1ft9p:hover{background-color:var(--primary25);margin-top:5px}.control-container.svelte-r1ft9p{padding-left:3px;background:var(--secondary10)}.separator.svelte-r1ft9p{width:60%;margin:10px auto;border-style:solid;border-width:1px 0 0 0;border-color:var(--primary25)}
+.type-selector-container.svelte-1b6pj9u{display:flex}.type-selector.svelte-1b6pj9u{border-color:var(--primary50);border-radius:2px;width:50px;flex:1 0 auto}
+.unbound-container.svelte-1fe5d1g{display:flex}.unbound-container.svelte-1fe5d1g>input.svelte-1fe5d1g{width:auto}.bound-header.svelte-1fe5d1g{display:flex}.bound-header.svelte-1fe5d1g>div.svelte-1fe5d1g:nth-child(1){flex:1 0 auto;width:30px;color:var(--darkslate);padding-left:5px}.binding-prop-label.svelte-1fe5d1g{color:var(--darkslate)}
+.unbound-container.svelte-18ig4tf{display:flex}.unbound-container.svelte-18ig4tf>.svelte-18ig4tf:nth-child(1){width:auto;flex:1 0 auto}.bound-header.svelte-18ig4tf{display:flex}.bound-header.svelte-18ig4tf>div.svelte-18ig4tf:nth-child(1){flex:1 0 auto;width:30px;color:var(--darkslate);padding-left:5px;font-style:italic}.binding-prop-label.svelte-18ig4tf{color:var(--darkslate)}
 
 /*# sourceMappingURL=bundle.css.map */

packages/standard-components/components.json

@@ -8,7 +8,8 @@
 			"contentText": { "type": "string", "default": "Button" },
 			"contentComponent": "component",
 			"className": {"type": "string", "default": "default"},
-			"disabled": "bool"
+			"disabled": "bool",
+			"onClick": "event"
 		},
 		"tags": ["button"]
 	}, 

packages/standard-components/src/button.svelte

@@ -16,7 +16,7 @@ $:{
 </script>
 
 
-<button class={className} {disabled} on:click>
+<button class={className} {disabled} on:click={onClick}>
     {#if contentComponent && contentComponent._component}
 	<div bind:this={contentComponentContainer}>
 	</div>

packages/standard-components/src/index.js

@@ -1,6 +1,6 @@
 export {default as button} from  "./Button.svelte";
 export {default as login} from  "./Login.svelte";
 export {default as form} from  "./Form.svelte";
-export {default as formControl} from  "./FormControl.svelte";
+export {default as grid} from  "./Grid.svelte";
 export {default as textbox} from  "./Textbox.svelte";
 export {default as stackpanel} from  "./StackPanel.svelte";