Event bindings with context, array binding, Table component...

packages/builder/src/common/binding.js

@@ -2,8 +2,10 @@ import {
     isString
 } from "lodash/fp";
 
-export const BB_STATE_BINDINGPATH = "##bbstate";
-export const BB_STATE_FALLBACK = "##bbstatefallback";
+import {
+    BB_STATE_BINDINGPATH, BB_STATE_FALLBACK, 
+    BB_STATE_BINDINGSOURCE
+} from "@budibase/client/src/state/isState";
 
 export const isBinding = value => 
     !isString(value) 
@@ -11,15 +13,17 @@ export const isBinding = value =>
     && isString(value[BB_STATE_BINDINGPATH])
     && value[BB_STATE_BINDINGPATH].length > 0;
 
-export const setBinding = ({path, fallback}, binding={} ) => {
+export const setBinding = ({path, fallback, source}, binding={} ) => {
     if(isNonEmptyString(path)) binding[BB_STATE_BINDINGPATH] = path;
     if(isNonEmptyString(fallback)) binding[BB_STATE_FALLBACK] = fallback;
+    binding[BB_STATE_BINDINGSOURCE] = source || "store";
     return binding
 }
 
 export const getBinding = binding => ({
     path: binding[BB_STATE_BINDINGPATH] || "",
-    fallback: binding[BB_STATE_FALLBACK] || ""
+    fallback: binding[BB_STATE_FALLBACK] || "",
+    source: binding[BB_STATE_BINDINGSOURCE] || "store"
 });
 
 const isNonEmptyString = s => isString(s) && s.length > 0;

packages/builder/src/userInterface/StateBindingControl.svelte

@@ -15,19 +15,27 @@ export let options=[];
 let isBound=false;
 let bindingPath="";
 let bindingFallbackValue="";
+let bindingSource="store";
 let isExpanded = false;
 let forceIsBound = false;
+let canOnlyBind = false;
 
 $: {
+    canOnlyBind = type === "state";
+    if(!forceIsBound && canOnlyBind)
+        forceIsBound = true;
+
     isBound= forceIsBound || isBinding(value);
 
     if(isBound) {
         const binding = getBinding(value);
         bindingPath= binding.path;
         bindingFallbackValue= binding.fallback;
+        bindingSource = binding.source || "store";
     } else {
         bindingPath="";
         bindingFallbackValue="";
+        bindingSource="store";
     }
 }
 
@@ -36,24 +44,27 @@ const clearBinding = () => {
     onChanged("");
 }
 
-const bind = (path, fallback) => {
+const bind = (path, fallback, source) => {
     if(!path) {
         clearBinding("");
         return;
     }
-    const binding = setBinding({path, fallback});
+    const binding = setBinding({path, fallback, source});
     onChanged(binding);
 }
 
 const setBindingPath = ev => {
-    forceIsBound = false;
-    bind(ev.target.value, bindingFallbackValue)
+    forceIsBound = canOnlyBind;
+    bind(ev.target.value, bindingFallbackValue, bindingSource)
 }
 
 const setBindingFallback = ev => {
-    bind(bindingPath, ev.target.value);
+    bind(bindingPath, ev.target.value, bindingSource);
 }
 
+const setBindingSource = ev => {
+    bind(bindingPath, bindingFallbackValue, ev.target.value);
+}
 
 const makeBinding = () => {
     forceIsBound=true;
@@ -69,9 +80,11 @@ const makeBinding = () => {
         <IconButton icon={isExpanded ? "chevron-up" : "chevron-down"} 
                     size="12"
                     on:click={() => isExpanded=!isExpanded}/>
+        {#if !canOnlyBind}
         <IconButton icon="trash" 
                     size="12"
                     on:click={clearBinding}/>
+        {/if}
     </div>
     {#if isExpanded}
     <div>
@@ -83,6 +96,15 @@ const makeBinding = () => {
         <input class="uk-input uk-form-small"
                value={bindingFallbackValue}
                on:change={setBindingFallback} >
+        <div class="binding-prop-label">Binding Source</div>
+        <select class="uk-select uk-form-small" 
+            value={bindingSource} 
+            on:change={setBindingSource}>
+
+            <option>store</option>
+            <option>context</option>
+
+        </select>
     </div>
     {/if}
 

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

@@ -12,6 +12,10 @@ import {
     EVENT_TYPE_MEMBER_NAME
 } from "../../common/eventHandlers";
 
+import {
+    isBound, BB_STATE_BINDINGPATH
+} from "@budibase/client/src/state/isState";
+
 const defaultDef = typeName => () => ({
     type: typeName,
     required:false,
@@ -61,6 +65,11 @@ const isEvent = e =>
 const isEventList = e => 
     isArray(e) && every(isEvent)(e);
 
+const emptyState = () => {
+    const s = {};
+    s[BB_STATE_BINDINGPATH] = "";
+    return s;
+}
 
 export const types = {
     string: propType(() => "", isString, defaultDef("string")),
@@ -70,5 +79,6 @@ export const types = {
     options: propType(() => "", isString, defaultDef("options")),
     component: propType(() => ({_component:""}), isComponent, defaultDef("component")),
     asset: propType(() => "", isString, defaultDef("asset")),
-    event: propType(() => [], isEventList, defaultDef("event"))
+    event: propType(() => [], isEventList, defaultDef("event")),
+    state: propType(() => emptyState(), isBound, defaultDef("state"))
 };

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

@@ -73,8 +73,7 @@ export const recursivelyValidate = (rootProps, getComponent, stack=[]) => {
     const childArrayErrors = pipe(propsDefArray, [
         filter(d => d.type === "array"),
         map(d => pipe(rootProps[d.name], [ 
-                    map(elementProps => pipe(elementProps._component, [
-                                            getComponentPropsDefinition,
+                    map(elementProps => pipe(d.elementDefinition, [
                                             getPropsDefArray,
                                             arr => validateChildren(
                                                         arr, 
@@ -99,11 +98,11 @@ const expandPropDef = propDef => {
 }
 
 
-export const validateProps = (propsDefinition, props, stack=[], isFinal=true) => {
+export const validateProps = (propsDefinition, props, stack=[], isFinal=true, isArrayElement=false) => {
 
     const errors = [];
 
-    if(isFinal && !props._component) {
+    if(isFinal && !props._component && !isArrayElement) {
         makeError(errors, "_component", stack)("Component is not set");
         return errors;
         // this would break everything else anyway
@@ -149,7 +148,8 @@ export const validateProps = (propsDefinition, props, stack=[], isFinal=true) =>
                     propDef.elementDefinition,
                     arrayItem,
                     [...stack, `${propDefName}[${index}]`],
-                    isFinal
+                    isFinal,
+                    true
                 )
                 for(let arrErr of arrayErrs) {
                     errors.push(arrErr);

packages/builder/tests/buildPropsHierarchy.spec.js

@@ -30,7 +30,7 @@ describe("buildPropsHierarchy", () => {
         const button1 = primaryButtonProps();
         button1.contentText = "Button 1";
         expect(allprops.children[0]).toEqual({
-            _component: "children[0]",
+            _component: "children#array_element#",
             control: button1
         });
 
@@ -38,7 +38,7 @@ describe("buildPropsHierarchy", () => {
         const button2 = primaryButtonProps();
         button2.contentText = "Button 2";
         expect(allprops.children[1]).toEqual({
-            _component: "children[1]",
+            _component: "children#array_element#",
             control: button2
         })
 

packages/builder/tests/createDefaultProps.spec.js

@@ -1,11 +1,12 @@
 import { 
     createProps,
-    createPropsAndDefinition 
 } from "../src/userInterface/pagesParsing/createProps";
 import {
     keys, some
 } from "lodash/fp";
-import { allComponents } from "./testData";
+import {
+    BB_STATE_BINDINGPATH
+} from "@budibase/client/src/state/isState";
 
 describe("createDefaultProps", () => {
 
@@ -115,6 +116,18 @@ describe("createDefaultProps", () => {
         expect(props.onClick).toEqual([]);
     });
 
+    it("should create a object with empty state when prop def is 'state' ", () => {
+        const propDef = {
+            data: "state"
+        };
+
+        const { props, errors } = createProps("some_component",propDef);
+
+        expect(errors).toEqual([]);
+        expect(props.data[BB_STATE_BINDINGPATH]).toBeDefined();
+        expect(props.data[BB_STATE_BINDINGPATH]).toBe("");
+    });
+
     it("should create a object with single empty component props, when prop definition is 'component' ", () => {
         const propDef = {
             content: "component"

packages/builder/tests/searchComponentsProps.spec.js

@@ -92,8 +92,8 @@ describe("getAncestorProps", () => {
 
         expect(result).toEqual([
             components[0].props,
-            {...components[3].props},
-            {...components[4].props}
+            {...components[4].props},
+            {...components[5].props}
         ]);
 
     });

packages/builder/tests/testData.js

@@ -34,6 +34,13 @@ export const allComponents = () => ([
             } 
         }
     },
+    {
+        name:"budibase-components/RecordView",
+        tags: ["record"],
+        props: {
+            data: "state"
+        }
+    },
     {
         inherits:"budibase-components/TextBox",
         name: "common/SmallTextbox",
@@ -41,6 +48,7 @@ export const allComponents = () => ([
             size: "small"
         }
     },
+    
     {
         inherits:"common/SmallTextbox",
         name: "common/PasswordBox",

packages/client/src/createApp.js

@@ -4,8 +4,12 @@ import {
 } from "lodash/fp";
 import {writable} from "svelte/store";
 import { $ } from "./core/common";
-import { setupBinding } from "./state/stateBinding";
+import { 
+    setupBinding 
+} from "./state/stateBinding";
 import { createCoreApi } from "./core";
+import { getStateOrValue } from "./state/getState";
+
 
 export const createApp = (componentLibraries, appDefinition, user) => {
 
@@ -19,7 +23,7 @@ export const createApp = (componentLibraries, appDefinition, user) => {
 
         const component = new (componentLibraries[libName][componentName])({
             target: htmlElement,
-            props: {...initialProps, _app},
+            props: {...initialProps, _bb},
             hydrate:true
         });
 
@@ -32,12 +36,20 @@ export const createApp = (componentLibraries, appDefinition, user) => {
         _bbuser: user
     });
 
-    const _app = {
+
+    let globalState = null;
+    store.subscribe(s => {
+        globalState = s;
+    });
+
+    const _bb = {
         initialiseComponent, 
-        store
+        store,
+        getStateOrValue: (prop, currentContext) => 
+            getStateOrValue(globalState, prop, currentContext)
     };
 
-    return _app;
+    return _bb;
 
 }
 

packages/client/src/state/getState.js

@@ -2,9 +2,14 @@ import {
     isUndefined,
     isObject
 } from "lodash/fp";
+import { 
+    isBound,BB_STATE_BINDINGPATH, BB_STATE_FALLBACK, takeStateFromStore
+} from "./isState";
 
 export const getState = (s, path, fallback) => {
 
+    if(!path || path.length === 0) return fallback;
+
     const pathParts = path.split(".");
     const safeGetPath = (obj, currentPartIndex=0) => {
 
@@ -31,4 +36,14 @@ export const getState = (s, path, fallback) => {
 
 
     return safeGetPath(s);
+}
+
+export const getStateOrValue = (globalState, prop, currentContext) => {
+    if(!isBound(prop)) return prop;
+
+    const stateToUse = takeStateFromStore(prop) 
+                       ? globalState
+                       : currentContext;
+
+    return getState(stateToUse, prop[BB_STATE_BINDINGPATH], prop[BB_STATE_FALLBACK]);
 }

packages/client/src/state/isState.js

@@ -0,0 +1,8 @@
+export const BB_STATE_BINDINGPATH = "##bbstate";
+export const BB_STATE_BINDINGSOURCE = "##bbsource";
+export const BB_STATE_FALLBACK = "##bbstatefallback";
+
+export const isBound = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
+export const takeStateFromStore = (prop) => 
+    prop[BB_STATE_BINDINGSOURCE] === undefined 
+    || prop[BB_STATE_BINDINGSOURCE] === "store";

packages/client/src/state/setState.js

@@ -5,6 +5,8 @@ import {
 
 export const setState = (store, path, value) => {
 
+    if(!path || path.length === 0) return;
+
     const pathParts = path.split(".");
     const safeSetPath = (obj, currentPartIndex=0) => {
 

packages/client/src/state/stateBinding.js

@@ -6,110 +6,166 @@ import {
     getState
 } from "./getState";
 
-export const BB_STATE_BINDINGPATH = "##bbstate";
-export const BB_STATE_FALLBACK = "##bbstatefallback";
-const doNothing = () => {};
-export const setupBinding = (store, props, coreApi) => {
+import {
+    isBound, takeStateFromStore,
+    BB_STATE_FALLBACK, BB_STATE_BINDINGPATH
+} from "./isState";
 
-    const initialProps = {...props};
-    const boundProps = [];
-    const componentEventHandlers = [];
+const doNothing = () => {};
+export const setupBinding = (store, rootProps, coreApi) => {
 
-    for(let propName in props) {
-        const val = initialProps[propName];
-        
-        if(isState(val)) {
+    const rootInitialProps = {...rootProps};
 
-            const binding = stateBinding(val);
-            const fallback = stateFallback(val);
+    const getBindings = (props, initialProps) => {
 
-            boundProps.push({ 
-                stateBinding:binding,
-                fallback, propName
-            });
+        const boundProps = [];
+        const componentEventHandlers = [];
+        const boundArrays = [];
 
-            initialProps[propName] = fallback;
-        } else if(isEventType(val)) {
+        for(let propName in props) {
+            
+            if(propName === "_component") continue;
 
-            const handlers = { propName, handlers:[] };
-            componentEventHandlers.push(handlers);
+            const val = initialProps[propName];
             
-            for(let e of val) {
-                handlers.handlers.push({
-                    handlerType: e[EVENT_TYPE_MEMBER_NAME],
-                    parameters: e.parameters
-                })
+            if(isBound(val) && takeStateFromStore(val)) {
+
+                const binding = stateBinding(val);
+                const fallback = stateFallback(val);
+
+                boundProps.push({ 
+                    stateBinding:binding,
+                    fallback, propName
+                });
+
+                initialProps[propName] = fallback;
+            } else if(isEventType(val)) {
+
+                const handlers = { propName, handlers:[] };
+                componentEventHandlers.push(handlers);
+                
+                for(let e of val) {
+                    handlers.handlers.push({
+                        handlerType: e[EVENT_TYPE_MEMBER_NAME],
+                        parameters: e.parameters
+                    })
+                }
+                
+                initialProps[propName] = doNothing;
+            } else if(Array.isArray(val)) {
+                const arrayOfBindings = [];
+                for(let element of val){
+                    arrayOfBindings.push(getBindings(element, {...element}));
+                }
+
+                boundArrays.push({ 
+                    arrayOfBindings,
+                    propName
+                });
             }
             
-            initialProps[propName] = doNothing;
         }
-        
+
+        return {boundProps, componentEventHandlers, boundArrays, initialProps};
     }
 
-    const bind = (component) => {
 
-        if(boundProps.length === 0 && componentEventHandlers.length === 0) return;
+
+    const bind = (rootBindings) => (component) => {
+
+        if(rootBindings.boundProps.length === 0 
+            && rootBindings.componentEventHandlers.length === 0
+            && rootBindings.boundArrays.length === 0) return;
 
         const handlerTypes = eventHandlers(store, coreApi);
 
-        const unsubscribe = store.subscribe(s => {
-            const newProps = {};
+        const unsubscribe = store.subscribe(rootState => {
+           
 
-            for(let boundProp of boundProps) {
-                const val = getState(
-                    s, 
-                    boundProp.stateBinding, 
-                    boundProp.fallback);
+            const getPropsFromBindings = (s, bindings) => {
 
-                if(val === undefined && newProps[boundProp.propName] !== undefined) {
-                    delete newProps[boundProp.propName];
-                }
+                const {boundProps, componentEventHandlers, boundArrays} = bindings;
+                const newProps = {...bindings.initialProps};
+            
+                for(let boundProp of boundProps) {
+                    const val = getState(
+                        s, 
+                        boundProp.stateBinding, 
+                        boundProp.fallback);
+
+                    if(val === undefined && newProps[boundProp.propName] !== undefined) {
+                        delete newProps[boundProp.propName];
+                    }
 
-                if(val !== undefined) {
-                    newProps[boundProp.propName] = val;
+                    if(val !== undefined) {
+                        newProps[boundProp.propName] = val;
+                    }
                 }
-            }
 
-            for(let boundHandler of componentEventHandlers) {
-
-                const closuredHandlers = [];
-                for(let h of boundHandler.handlers) {
-                    const parameters = {};
-                    for(let pname in h.parameters) {
-                        const p = h.parameters[pname];
-                        parameters[pname] = isState(p) 
-                            ? getState(
-                                s, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
-                            : p;
-                        
+                for(let boundHandler of componentEventHandlers) {
+
+                    const closuredHandlers = [];
+                    for(let h of boundHandler.handlers) {
+                        const handlerType = handlerTypes[h.handlerType];
+                        closuredHandlers.push((context) => {
+
+                            const parameters = {};
+                            for(let pname in h.parameters) {
+                                const p = h.parameters[pname];
+                                parameters[pname] = 
+                                    !isBound(p) 
+                                    ? p 
+                                    : takeStateFromStore(p)
+                                    ? getState(
+                                        s, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+                                    : getState(
+                                        context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
+                                
+                            }
+                            handlerType.execute(parameters)
+                        });
                     }
-                    const handlerType = handlerTypes[h.handlerType];
-                    closuredHandlers.push(() => handlerType.execute(parameters));
-                }
 
-                newProps[boundHandler.propName] = async () => {
-                    for(let runHandler of closuredHandlers) {
-                        await runHandler();
+                    newProps[boundHandler.propName] = async (context) => {
+                        for(let runHandler of closuredHandlers) {
+                            await runHandler(context);
+                        }
                     }
+
+                }
+
+                for(let boundArray of boundArrays) {
+                    let index = 0;
+                    if(!newProps[boundArray.propName])
+                        newProps[boundArray.propName] = [];
+                    for(let bindings of boundArray.arrayOfBindings){
+                        newProps[boundArray.propName][index] = getPropsFromBindings(
+                            s,
+                            bindings);
+                        index++;
+                    }   
                 }
 
+                return newProps;
+
             }
-            
 
-            component.$set(newProps);
+            const rootNewProps = getPropsFromBindings(rootState, rootBindings);
+            
+            component.$set(rootNewProps);
         });
 
         return unsubscribe;
     }
 
+    const bindings = getBindings(rootProps, rootInitialProps);
+
     return {
-        initialProps, bind
+        initialProps:rootInitialProps, bind:bind(bindings)
     };
 
 }
 
-
-const isState = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
 const stateBinding = (prop) => prop[BB_STATE_BINDINGPATH];
 const stateFallback = (prop) => prop[BB_STATE_FALLBACK];
 

packages/client/tests/stateBinding.spec.js

@@ -1,8 +1,11 @@
 import {
-    setupBinding,
-    BB_STATE_BINDINGPATH,
-    BB_STATE_FALLBACK
+    setupBinding
 } from "../src/state/stateBinding";
+import {
+    BB_STATE_BINDINGPATH,
+    BB_STATE_FALLBACK,
+    BB_STATE_BINDINGSOURCE
+} from "../src/state/isState";
 import { EVENT_TYPE_MEMBER_NAME } from "../src/state/eventHandlers";
 import {writable} from "svelte/store";
 import { isFunction } from "lodash/fp";
@@ -71,6 +74,59 @@ describe("setupBinding", () => {
 
     });
 
+    it("should update bound array props when updated ", () => {
+
+        const {component, store, props} = testSetup();
+
+        const {bind} = testSetupBinding(store, props, component);
+        bind(component);
+
+        store.update(s => {
+            s.FirstName = "Bobby";
+            s.LastName = "Thedog";
+            s.Customer = {
+                Name: "ACME inc",
+                Address: ""
+            };
+            s.addressToSet = "123 Main Street";
+            s.ArrayVal1 = "item 1 - version 1";
+            s.ArrayVal2 = "item 2 - version 1";
+            s.ArrayVal3 = "inner array item";
+            return s;
+        });
+
+        expect(component.props.arrayWithInnerBinding[0].innerBound).toBe("item 1 - version 1");
+        expect(component.props.arrayWithInnerBinding[1].innerBound).toBe("item 2 - version 1");
+        expect(component.props.arrayWithInnerBinding[0].innerUnbound).toBe("not bound 1");
+        expect(component.props.arrayWithInnerBinding[1].innerUnbound).toBe("not bound 2");
+
+    });
+
+    it("should update bound nested (2nd level) array props when updated ", () => {
+
+        const {component, store, props} = testSetup();
+
+        const {bind} = testSetupBinding(store, props, component);
+        bind(component);
+
+        store.update(s => {
+            s.FirstName = "Bobby";
+            s.LastName = "Thedog";
+            s.Customer = {
+                Name: "ACME inc",
+                Address: ""
+            };
+            s.addressToSet = "123 Main Street";
+            s.ArrayVal1 = "item 1 - version 1";
+            s.ArrayVal2 = "item 2 - version 1";
+            s.ArrayVal3 = "inner array item";
+            return s;
+        });
+
+        expect(component.props.arrayWithInnerBinding[2].innerArray[0].innerInnerBound).toBe("inner array item");
+
+    });
+
     it("should update event handlers on state change", () => {
 
         const {component, store, props} = testSetup();
@@ -92,6 +148,30 @@ describe("setupBinding", () => {
 
     });
 
+    it("event handlers should recognise context state", () => {
+
+        const {component, store, props} = testSetup();
+
+        const {bind} = testSetupBinding(store, props, component);
+        bind(component);
+        
+        expect(component.props.boundToEventOutput).toBe("initial address");
+        component.props.eventBoundUsingContext({addressOverride: "Overridden Address"});
+        expect(component.props.boundToEventOutput).toBe("Overridden Address");
+        
+        store.update(s => {
+            s.addressToSet = "123 Main Street"
+            return s;
+        });
+
+        component.props.eventBound();
+        expect(component.props.boundToEventOutput).toBe("123 Main Street");
+
+        component.props.eventBoundUsingContext({addressOverride: "Overridden Address"});
+        expect(component.props.boundToEventOutput).toBe("Overridden Address");
+
+    });
+
 });
 const testSetupBinding = (store, props, component) => {
     const setup = setupBinding(store, props);
@@ -109,10 +189,11 @@ const testSetup = () => {
     }
 
 
-    const binding = (path, fallback) => {
+    const binding = (path, fallback, source) => {
         const b = {};
         b[BB_STATE_BINDINGPATH] = path;
         b[BB_STATE_FALLBACK] = fallback;
+        b[BB_STATE_BINDINGSOURCE] = source || "store";
         return b;
     };
 
@@ -134,6 +215,29 @@ const testSetup = () => {
                 path: "Customer.Address",
                 value: binding("addressToSet", "event fallback address")
             })
+        ],
+        eventBoundUsingContext: [
+            event("Set State", {
+                path: "Customer.Address",
+                value: binding("addressOverride", "", "context")
+            })
+        ],
+        arrayWithInnerBinding: [
+            {
+                innerBound: binding("ArrayVal1"),
+                innerUnbound: "not bound 1"
+            },
+            {
+                innerBound: binding("ArrayVal2"),
+                innerUnbound: "not bound 2"
+            },
+            {
+                innerArray: [
+                    {
+                        innerInnerBound: binding("ArrayVal3")
+                    }
+                ]
+            }
         ]
     }
 

packages/server/builder/bundle.css

@@ -1,47 +1,47 @@
-main.svelte-24wuof{height:100%;width:100%;font-family:"Roboto", Helvetica, Arial, sans-serif}.settings.svelte-24wuof{position:absolute;bottom:25px;right:25px}
-.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}
-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-kmbqdt{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-kmbqdt{flex:0 0 auto;height:25px;background:white;padding:5px;width:100%}.content.svelte-kmbqdt{flex:1 1 auto;width:100%;height:100px}.content.svelte-kmbqdt>div.svelte-kmbqdt{height:100%;width:100%}.topnavitem.svelte-kmbqdt{cursor:pointer;color:var(--secondary50);padding:0px 15px;font-weight:600;font-size:.9rem}.topnavitem.svelte-kmbqdt:hover{color:var(--secondary75);font-weight:600}.active.svelte-kmbqdt{color:var(--primary100);font-weight:900}
-.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-1nqai3b{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%;overflow-y:auto}.ui-nav.svelte-1nqai3b{grid-column-start:uiNav;background-color:var(--secondary5);height:100%}.properties-pane.svelte-1nqai3b{grid-column-start:properties;background-color:var(--secondary5);height:100%;overflow-y:hidden}.pages-list-container.svelte-1nqai3b{padding-top:2rem}.components-nav-header.svelte-1nqai3b{font-size:.9rem}.nav-group-header.svelte-1nqai3b{font-size:.9rem;padding-left:1rem}.nav-items-container.svelte-1nqai3b{padding:1rem 1rem 0rem 1rem}.nav-group-header.svelte-1nqai3b{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-1nqai3b>div.svelte-1nqai3b:nth-child(1){padding:0rem .5rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1nqai3b>span.svelte-1nqai3b:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-1nqai3b>div.svelte-1nqai3b:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-1nqai3b>div.svelte-1nqai3b:nth-child(3):hover{color:var(--primary75)}
-.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-1kpw258{color:var(--secondary50);font-size:.9rem;font-weight:bold}.hierarchy-item.svelte-1kpw258{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1kpw258:hover{color:var(--secondary)}.component.svelte-1kpw258{margin-left:5px}.currentfolder.svelte-1kpw258{color:var(--secondary100)}.selected.svelte-1kpw258{color:var(--primary100);font-weight:bold}.title.svelte-1kpw258{margin-left:10px}
-.root.svelte-1jxca3{padding-bottom:10px;padding-left:10px;font-size:.9rem;color:var(--secondary50);font-weight:bold}.hierarchy-item.svelte-1jxca3{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1jxca3:hover{color:var(--secondary100)}.component.svelte-1jxca3{margin-left:5px}.selected.svelte-1jxca3{color:var(--primary100);font-weight:bold}.title.svelte-1jxca3{margin-left:10px}
-.uk-modal-dialog.svelte-91ta29{border-radius:.3rem}
-.root.svelte-arxsah{height:100%;display:flex;flex-direction:column}.padding.svelte-arxsah{padding:1rem 1rem 0rem 1rem}.info-text.svelte-arxsah{color:var(--secondary100);font-size:.8rem !important;font-weight:bold}.title.svelte-arxsah{padding:2rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.title.svelte-arxsah>div.svelte-arxsah:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-arxsah>div.svelte-arxsah:nth-child(2){grid-column-start:actions}.section-header.svelte-arxsah{display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary50);font-size:.9rem;font-weight:bold;vertical-align:middle}.component-props-container.svelte-arxsah{flex:1 1 auto;overflow-y:auto}
-.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}
-h1.svelte-2ukyrk{font-size:1.2em}
-h4.svelte-o0id5a{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-is81a4{padding:15px}.help-text.svelte-is81a4{color:var(--slate);font-size:10pt}
-.root.svelte-1hx5jh5{height:100%;background-color:var(--secondary5)}.items-root.svelte-1hx5jh5{display:flex;flex-direction:column;max-height:100%;height:1rem}.nav-group-header.svelte-1hx5jh5{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-1hx5jh5>div.svelte-1hx5jh5:nth-child(1){padding:0rem .7rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1hx5jh5>div.svelte-1hx5jh5:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-1hx5jh5>div.svelte-1hx5jh5:nth-child(3):hover{color:var(--primary75)}.hierarchy-title.svelte-1hx5jh5{flex:auto 1 1}.space-filler.svelte-1hx5jh5{flex:1 1 auto}
-.root.svelte-12v04h3{height:100%;position:relative;padding:1.5rem}.actions-header.svelte-12v04h3{flex:0 1 auto}.node-view.svelte-12v04h3{overflow-y:auto;flex:1 1 auto}
-.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}
-.root.svelte-v4l1v4{height:100%;position:relative;padding:1.5rem}
-.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}
-.info-text.svelte-sphuh4{font-size:0.7rem;color:var(--secondary50)}
-.root.svelte-1hs1zh2{height:100%;padding:2rem}.settings-title.svelte-1hs1zh2{font-weight:700}.title.svelte-1hs1zh2{margin:3rem 0rem 0rem 0rem;font-weight:700}.recordkey.svelte-1hs1zh2{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-1hs1zh2{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-1hs1zh2{cursor:pointer}.edit-button.svelte-1hs1zh2{cursor:pointer;color:var(--secondary25)}.edit-button.svelte-1hs1zh2:hover{cursor:pointer;color:var(--secondary75)}th.svelte-1hs1zh2{text-align:left}td.svelte-1hs1zh2{padding:1rem 5rem 1rem 0rem;margin:0;font-size:14px;font-weight:500}.field-label.svelte-1hs1zh2{font-size:14px;font-weight:500}thead.svelte-1hs1zh2>tr.svelte-1hs1zh2{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-1hs1zh2>tr.svelte-1hs1zh2{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-1hs1zh2>tr.svelte-1hs1zh2:hover{background-color:var(--primary10)}tbody.svelte-1hs1zh2>tr:hover .edit-button.svelte-1hs1zh2{color:var(--secondary75)}.index-container.svelte-1hs1zh2{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-1hs1zh2{color:var(--slate)}.index-name.svelte-1hs1zh2{font-weight:bold;color:var(--primary100)}.index-container.svelte-1hs1zh2 code.svelte-1hs1zh2{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-1hs1zh2{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-1hs1zh2{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px}
-.root.svelte-69mcqc{display:block;font-size:.9rem;width:100%;cursor:pointer;font-weight:bold}.title.svelte-69mcqc{font:var(--fontblack);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-69mcqc:hover{background-color:var(--secondary10)}
-.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}
-.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}
-.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-1fkfoam{height:100%;padding:15px}.allowed-records.svelte-1fkfoam{margin:20px 0px}.allowed-records.svelte-1fkfoam>span.svelte-1fkfoam{margin-right:30px}
-.root.svelte-14rrb31{display:block;font-size:.9rem;width:100%;cursor:pointer;color:var(--secondary50);font-weight:500}.title.svelte-14rrb31{padding-top:.5rem;padding-right:.5rem}.title.svelte-14rrb31:hover{background-color:var(--secondary10)}.active.svelte-14rrb31{background-color:var(--primary10)}
-.root.svelte-1bzmaa6{font-size:10pt}.padding.svelte-1bzmaa6{padding:0 10px}.inherited-title.svelte-1bzmaa6{padding:1rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.inherited-title.svelte-1bzmaa6>div.svelte-1bzmaa6:nth-child(1){grid-column-start:name;color:var(--secondary50)}.inherited-title.svelte-1bzmaa6>div.svelte-1bzmaa6:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
-.root.svelte-1qdntd{padding:1.5rem;width:100%;align-items:right}
-.edit-button.svelte-p55po4{cursor:pointer;color:var(--secondary25)}tr.svelte-p55po4:hover .edit-button.svelte-p55po4{color:var(--secondary75)}.title.svelte-p55po4{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-p55po4{font-weight:500;font-size:.9rem}
-.nav-item.svelte-1vytvi5{padding:1.5rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1vytvi5:hover{background-color:var(--primary10)}.active.svelte-1vytvi5{background-color:var(--primary10)}
-.edit-button.svelte-vqv7kc{cursor:pointer;color:var(--secondary25)}.title.svelte-vqv7kc{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-vqv7kc{font-weight:500;font-size:.9rem}tr.svelte-vqv7kc:hover .edit-button.svelte-vqv7kc{color:var(--secondary75)}
-.root.svelte-97do09{padding:1rem 1rem 0rem 1rem}.prop-label.svelte-97do09{font-size:0.8rem;color:var(--secondary100);font-weight:bold}
-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}
-.root.svelte-15cha7q{padding:2rem;border-radius:2rem}.uk-grid-small.svelte-15cha7q{padding:1rem}.option-container.svelte-15cha7q{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
-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}
-.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)}
-textarea.svelte-1wfv4cc{width:300px;height:200px}
-.unbound-container.svelte-1pzt3a0{display:flex;margin:.5rem 0rem .5rem 0rem}.unbound-container.svelte-1pzt3a0>.svelte-1pzt3a0:nth-child(1){width:auto;flex:1 0 auto;font-size:0.8rem;color:var(--secondary100);border-radius:.2rem}.bound-header.svelte-1pzt3a0{display:flex}.bound-header.svelte-1pzt3a0>div.svelte-1pzt3a0:nth-child(1){flex:1 0 auto;width:30px;color:var(--secondary50);padding-left:5px}.binding-prop-label.svelte-1pzt3a0{color:var(--secondary50)}
+main.svelte-15fmzor{height:100%;width:100%;font-family:"Roboto", Helvetica, Arial, sans-serif}.settings.svelte-15fmzor{position:absolute;bottom:25px;right:25px}
+.root.svelte-y7jhgd{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-y7jhgd{flex:0 0 auto;height:25px;background:white;padding:5px;width:100%}.content.svelte-y7jhgd{flex:1 1 auto;width:100%;height:100px}.content.svelte-y7jhgd>div.svelte-y7jhgd{height:100%;width:100%}.topnavitem.svelte-y7jhgd{cursor:pointer;color:var(--secondary50);padding:0px 15px;font-weight:600;font-size:.9rem}.topnavitem.svelte-y7jhgd:hover{color:var(--secondary75);font-weight:600}.active.svelte-y7jhgd{color:var(--primary100);font-weight:900}
+.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}
+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}
+.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%}
+.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)}
+.root.svelte-rjo9m0{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%;overflow-y:auto}.ui-nav.svelte-rjo9m0{grid-column-start:uiNav;background-color:var(--secondary5);height:100%}.properties-pane.svelte-rjo9m0{grid-column-start:properties;background-color:var(--secondary5);height:100%;overflow-y:hidden}.pages-list-container.svelte-rjo9m0{padding-top:2rem}.components-nav-header.svelte-rjo9m0{font-size:.9rem}.nav-group-header.svelte-rjo9m0{font-size:.9rem;padding-left:1rem}.nav-items-container.svelte-rjo9m0{padding:1rem 1rem 0rem 1rem}.nav-group-header.svelte-rjo9m0{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(1){padding:0rem .5rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-rjo9m0>span.svelte-rjo9m0:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(3):hover{color:var(--primary75)}
+h4.svelte-sqtlby{margin-top:20px}
+.root.svelte-1q89a1w{height:100%;background-color:var(--secondary5)}.items-root.svelte-1q89a1w{display:flex;flex-direction:column;max-height:100%;height:1rem}.nav-group-header.svelte-1q89a1w{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-1q89a1w>div.svelte-1q89a1w:nth-child(1){padding:0rem .7rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1q89a1w>div.svelte-1q89a1w:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-1q89a1w>div.svelte-1q89a1w:nth-child(3):hover{color:var(--primary75)}.hierarchy-title.svelte-1q89a1w{flex:auto 1 1}.space-filler.svelte-1q89a1w{flex:1 1 auto}
+.root.svelte-wfv60d{height:100%;position:relative;padding:1.5rem}.actions-header.svelte-wfv60d{flex:0 1 auto}.node-view.svelte-wfv60d{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-117bbrk{padding-bottom:10px;padding-left:10px;font-size:.9rem;color:var(--secondary50);font-weight:bold}.hierarchy-item.svelte-117bbrk{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-117bbrk:hover{color:var(--secondary100)}.component.svelte-117bbrk{margin-left:5px}.selected.svelte-117bbrk{color:var(--primary100);font-weight:bold}.title.svelte-117bbrk{margin-left:10px}
+.root.svelte-nd1yft{height:100%;position:relative;padding:1.5rem}
+.uk-modal-dialog.svelte-vwwrf9{border-radius:.3rem}
+.root.svelte-1r2dipt{color:var(--secondary50);font-size:.9rem;font-weight:bold}.hierarchy-item.svelte-1r2dipt{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1r2dipt:hover{color:var(--secondary)}.component.svelte-1r2dipt{margin-left:5px}.currentfolder.svelte-1r2dipt{color:var(--secondary100)}.selected.svelte-1r2dipt{color:var(--primary100);font-weight:bold}.title.svelte-1r2dipt{margin-left:10px}
+h1.svelte-16jkjx9{font-size:1.2em}
+.root.svelte-1abif7s{height:100%;display:flex;flex-direction:column}.padding.svelte-1abif7s{padding:1rem 1rem 0rem 1rem}.info-text.svelte-1abif7s{color:var(--secondary100);font-size:.8rem !important;font-weight:bold}.title.svelte-1abif7s{padding:2rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(2){grid-column-start:actions}.section-header.svelte-1abif7s{display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary50);font-size:.9rem;font-weight:bold;vertical-align:middle}.component-props-container.svelte-1abif7s{flex:1 1 auto;overflow-y:auto}
+.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}
+.root.svelte-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt}
+.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-17ju2r{display:block;font-size:.9rem;width:100%;cursor:pointer;color:var(--secondary50);font-weight:500}.title.svelte-17ju2r{padding-top:.5rem;padding-right:.5rem}.title.svelte-17ju2r:hover{background-color:var(--secondary10)}.active.svelte-17ju2r{background-color:var(--primary10)}
+.nav-item.svelte-1i5jqm7{padding:1.5rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1i5jqm7:hover{background-color:var(--primary10)}.active.svelte-1i5jqm7{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-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}
+.root.svelte-18xd5y3{height:100%;padding:2rem}.settings-title.svelte-18xd5y3{font-weight:700}.title.svelte-18xd5y3{margin:3rem 0rem 0rem 0rem;font-weight:700}.recordkey.svelte-18xd5y3{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-18xd5y3{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-18xd5y3{cursor:pointer}.edit-button.svelte-18xd5y3{cursor:pointer;color:var(--secondary25)}.edit-button.svelte-18xd5y3:hover{cursor:pointer;color:var(--secondary75)}th.svelte-18xd5y3{text-align:left}td.svelte-18xd5y3{padding:1rem 5rem 1rem 0rem;margin:0;font-size:14px;font-weight:500}.field-label.svelte-18xd5y3{font-size:14px;font-weight:500}thead.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-18xd5y3>tr.svelte-18xd5y3:hover{background-color:var(--primary10)}tbody.svelte-18xd5y3>tr:hover .edit-button.svelte-18xd5y3{color:var(--secondary75)}.index-container.svelte-18xd5y3{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-18xd5y3{color:var(--slate)}.index-name.svelte-18xd5y3{font-weight:bold;color:var(--primary100)}.index-container.svelte-18xd5y3 code.svelte-18xd5y3{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px}
+.edit-button.svelte-zm41av{cursor:pointer;color:var(--secondary25)}.title.svelte-zm41av{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-zm41av{font-weight:500;font-size:.9rem}tr.svelte-zm41av:hover .edit-button.svelte-zm41av{color:var(--secondary75)}
+.root.svelte-ehsf0i{display:block;font-size:.9rem;width:100%;cursor:pointer;font-weight:bold}.title.svelte-ehsf0i{font:var(--fontblack);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-ehsf0i:hover{background-color:var(--secondary10)}
+.edit-button.svelte-lhfdtn{cursor:pointer;color:var(--secondary25)}tr.svelte-lhfdtn:hover .edit-button.svelte-lhfdtn{color:var(--secondary75)}.title.svelte-lhfdtn{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-lhfdtn{font-weight:500;font-size:.9rem}
+.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-wgyofl{padding:1.5rem;width:100%;align-items:right}
+.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}
+.root.svelte-47ohpz{font-size:10pt}.padding.svelte-47ohpz{padding:0 10px}.inherited-title.svelte-47ohpz{padding:1rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(1){grid-column-start:name;color:var(--secondary50)}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
+.info-text.svelte-1gx0gkl{font-size:0.7rem;color:var(--secondary50)}
+.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}
+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-16sjty9{padding:2rem;border-radius:2rem}.uk-grid-small.svelte-16sjty9{padding:1rem}.option-container.svelte-16sjty9{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right: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}
+input.svelte-9fre0g{margin-right:7px}
+.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)}
+.root.svelte-1v0yya9{padding:1rem 1rem 0rem 1rem}.prop-label.svelte-1v0yya9{font-size:0.8rem;color:var(--secondary100);font-weight:bold}
+textarea.svelte-1kv2xk7{width:300px;height:200px}
 .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)}
-.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)}
+.unbound-container.svelte-jubmd5{display:flex;margin:.5rem 0rem .5rem 0rem}.unbound-container.svelte-jubmd5>.svelte-jubmd5:nth-child(1){width:auto;flex:1 0 auto;font-size:0.8rem;color:var(--secondary100);border-radius:.2rem}.bound-header.svelte-jubmd5{display:flex}.bound-header.svelte-jubmd5>div.svelte-jubmd5:nth-child(1){flex:1 0 auto;width:30px;color:var(--secondary50);padding-left:5px}.binding-prop-label.svelte-jubmd5{color:var(--secondary50)}
 .type-selector-container.svelte-1b6pj9u{display:flex}.type-selector.svelte-1b6pj9u{border-color:var(--primary50);border-radius:2px;width:50px;flex:1 0 auto}
 
 /*# sourceMappingURL=bundle.css.map */

packages/standard-components/components.json

@@ -183,5 +183,27 @@
 
 		},
 		"tags": ["nav", "navigation", "sidebar"]
+	},
+	"table": {
+		"importPath": "Table",
+		"name": "Table",
+		"desciption": "An HTML table",
+		"props" : {
+			"data": "state",
+			"columns": {
+				"type": "array",
+				"elementDefinition" : {
+					"title": "string",
+					"value": "string"
+				}
+			},
+			"onRowClick":"event",
+			"tableClass": {"type":"string", "default":"table-default"},
+			"theadClass": {"type":"string", "default":"thead-default"},
+			"tbodyClass": {"type":"string", "default":"tbody-default"},
+			"trClass": {"type":"string", "default":"tr-default"},
+			"thClass": {"type":"string", "default":"th-default"}
+		},
+		"tags": ["table"]
 	}
 }

packages/standard-components/public/bundle.css

@@ -1,10 +1,11 @@
 #current_component.svelte-1xqz9vm{height:100%;width:100%}
 .root.svelte-1oto99m{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-1oto99m{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-1oto99m{margin-bottom:20px
 }.logo-container.svelte-1oto99m>img.svelte-1oto99m{max-width:100%}.login-button-container.svelte-1oto99m{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-1oto99m{margin-top:30px;padding:10px;border-style:solid;border-width:1px;border-color:maroon;border-radius:1px;text-align:center;color:maroon;background-color:mistyrose}.form-root.svelte-1oto99m{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-1oto99m{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-1oto99m{grid-column-start:control;padding:5px 10px}
-.default.svelte-1ec4wqj{width:100%;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;width:100%}.default.svelte-1ec4wqj:disabled{color:#ccc}
 .root.svelte-10kw8to{display:grid}
 .root.svelte-aihwli{height:100%;width:100%;grid-template-columns:[navbar] auto [content] 1fr;display:grid}.navbar.svelte-aihwli{grid-column:navbar;background:var(--navBarBackground);border:var(--navBarBorder);color:var(--navBarColor)}.navitem.svelte-aihwli{padding:10px 17px;cursor:pointer}.navitem.svelte-aihwli:hover{background:var(--itemHoverBackground);color:var(--itemHoverColor)}.navitem.selected.svelte-aihwli{background:var(--selectedItemBackground);border:var(--selectedItemBorder);color:var(--selectedItemColor)}.content.svelte-aihwli{grid-column:content}
+.default.svelte-1ec4wqj{width:100%;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;width:100%}.default.svelte-1ec4wqj:disabled{color:#ccc}
 .form-root.svelte-m9d6ue{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-m9d6ue{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-m9d6ue{grid-column-start:control;padding:5px 10px}.overflow.svelte-m9d6ue{grid-column-start:overflow}.full-width.svelte-m9d6ue{width:100%}
+.table-default.svelte-h8rqk6{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse}.table-default.svelte-h8rqk6 .thead-default .th-default.svelte-h8rqk6{vertical-align:bottom;border-bottom:2px solid #dee2e6;font-weight:bold}.table-default.svelte-h8rqk6 .th-default.svelte-h8rqk6{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6;font-weight:normal}.th-default.svelte-h8rqk6{text-align:inherit}.table-default.svelte-h8rqk6 .tbody-default .tr-default.svelte-h8rqk6:hover{color:#212529;background-color:rgba(0,0,0,.075);cursor:pointer}
 .default.svelte-1q8lga0{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.svelte-1q8lga0:active{background-color:#ddd}.default.svelte-1q8lga0:focus{border-color:#666}
 
 /*# sourceMappingURL=bundle.css.map */

packages/standard-components/public/bundle.css.map

@@ -4,21 +4,23 @@
   "sources": [
     "..\\src\\Test\\TestApp.svelte",
     "..\\src\\Login.svelte",
-    "..\\src\\Textbox.svelte",
     "..\\src\\Grid.svelte",
     "..\\src\\Nav.svelte",
+    "..\\src\\Textbox.svelte",
     "..\\src\\Form.svelte",
+    "..\\src\\Table.svelte",
     "..\\src\\Button.svelte"
   ],
   "sourcesContent": [
-    "<script>\nimport createApp from \"./createApp\";\nimport { props } from \"./props\";\n\nlet _app;\n\nconst _appPromise = createApp();\n_appPromise.then(a => _app = a);\n\nconst testProps = props.nav;\n\nlet currentComponent;\n\n$: {\n    if(_app && currentComponent) {\n        _app.initialiseComponent(testProps, currentComponent);\n    }\n}\n\n\n\n</script>\n\n{#await _appPromise}\nloading\n{:then _app}\n\n<div id=\"current_component\" bind:this={currentComponent}>\n</div>\n\n{/await}\n\n\n<style>\n#current_component {\n    height: 100%;\n    width: 100%;\n}\n</style>\n\n",
-    "<script>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\nimport { authenticate } from \"./api\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\n\nexport let _app;\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\n\nconst login = () => {\n    busy = true;\n    authenticate(username, password)\n    .then(r => {\n        busy = false;\n        if(r.status === 200) {\n            return r.json();\n        } else {\n            incorrect = true;\n            return;\n        }\n    })\n    .then(user => {\n        if(user) {\n            localStorage.setItem(\"budibase:user\", user);\n            location.reload();\n        }\n    })\n}\n\n</script>\n\n<div class=\"root\">\n\n    <div class=\"content\">\n\n        {#if logo}\n        <div class=\"logo-container\">\n            <img src={logo} alt=\"logo\"/>\n        </div>\n        {/if}\n\n        <div class=\"form-root\">\n            <div class=\"label\">\n                {usernameLabel}\n            </div>\n            <div class=\"control\">\n                <Textbox bind:value={username} />\n            </div>\n            <div class=\"label\">\n                {passwordLabel}\n            </div>\n            <div class=\"control\">\n                <Textbox bind:value={password} hideValue=true />\n            </div>\n        </div>\n\n        <div class=\"login-button-container\">\n            <Button disabled={busy} \n                    on:click={login}\n                    class={buttonClass}>\n                    {loginButtonLabel}\n            </Button>\n        </div>\n\n        {#if incorrect}\n        <div class=\"incorrect-details-panel\">\n            Incorrect username or password\n        </div>\n        {/if}\n\n    </div>\n\n</div>\n\n<style>\n\n.root {\n    height: 100%;\n    display:grid;\n    grid-template-columns: [left] 1fr [middle] auto [right] 1fr;\n    grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;\n}\n\n.content {\n    grid-column-start: middle;\n    grid-row-start: center;\n    width: 400px;\n}\n\n.logo-container {\n    margin-bottom: 20px\n}\n\n.logo-container > img {\n    max-width: 100%;\n}\n\n.login-button-container {\n    text-align: right;\n    margin-top: 20px;\n}\n\n.incorrect-details-panel {\n    margin-top: 30px;\n    padding: 10px;\n    border-style: solid;\n    border-width: 1px;\n    border-color: maroon;\n    border-radius: 1px;\n    text-align: center;\n    color: maroon;\n    background-color: mistyrose;\n}\n\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n\n</style>",
-    "<script>\n\nexport let value=\"\";\nexport let hideValue = false;\nexport let className = \"default\";\n\nexport let _app;\n\nlet actualValue = \"\";\n$: {\n\tif(_app && value._isstate) {\n\t\t_app.store.subscribe(s => {\n\t\t\tactualValue = _app.store.getValue(s, value);\n\t\t});\n\t}\n}\n\nconst onchange = (ev) => {\n\tif(_app && value._isstate) {\n\t\t_app.store.setValue(value, ev.target.value);\n\t} else if(!value._isstate) {\n\t\tactualValue = ev.target.value;\n\t}\n}\n\n</script>\n\n{#if hideValue}\n<input class={className} \n\t   type=\"password\" \n\t   value={actualValue} on:change/>\n{:else}\n<input class={className} type=\"text\" value={actualValue}/>\n{/if}\n\n<style>\n.default {\n    width: 100%;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n    border-radius: 2px;\n    width: 100%;\n}\n\n.default:disabled {\n\tcolor: #ccc;\n}\n\n</style>",
-    "<script>\r\nimport { onMount } from 'svelte'\r\nimport {buildStyle} from \"./buildStyle\";\r\n\r\nexport let gridTemplateRows =\"\";\r\nexport let gridTemplateColumns =\"\";\r\nexport let children = [];\r\nexport let width = \"auto\";\r\nexport let height = \"auto\";\r\nexport let containerClass=\"\";\r\nexport let itemContainerClass=\"\";\r\n\r\n/*\"gridColumnStart\":\"string\",\r\n\"gridColumnEnd\":\"string\",\r\n\"gridRowStart\":\"string\",\r\n\"gridRowEnd\":\"string\"*/\r\n\r\n\r\nexport let _app;\r\n\r\nlet style=\"\";\r\nlet htmlElements = {};\r\n\r\n$ : {\r\n    if(_app && htmlElements) {\r\n        for(let el in htmlElements) {\r\n            _app.initialiseComponent(\r\n                children[el].control,\r\n                htmlElements[el]\r\n            );\r\n        }\r\n    }\r\n}\r\n\r\nconst childStyle = child => \r\n    buildStyle({\r\n        \"grid-column-start\": child.gridColumnStart,\r\n        \"grid-column-end\": child.gridColumnEnd,\r\n        \"grid-column\": child.gridColumn,\r\n        \"grid-row-start\": child.gridRowStart,\r\n        \"grid-row-end\": child.gridRowStart,\r\n        \"grid-row\": child.gridRow,\r\n    });\r\n\r\n</script>\r\n\r\n<div class=\"root {containerClass}\"\r\n     style=\"width: {width}; height: {height}; grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};\">\r\n    {#each children as child, index}\r\n    <div class=\"{itemContainerClass}\"\r\n        style={childStyle(child)}\r\n        bind:this={htmlElements[index]}>\r\n    </div>\r\n    {/each}\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n    display: grid;\r\n}\r\n\r\n</style>",
-    "<script>\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let navBarBackground = \"\";\r\nexport let navBarBorder=\"\";\r\nexport let navBarColor=\"\";\r\nexport let selectedItemBackground=\"\";\r\nexport let selectedItemColor=\"\";\r\nexport let selectedItemBorder=\"\";\r\nexport let itemHoverBackground=\"\";\r\nexport let itemHoverColor=\"\";\r\nexport let items = []\r\n\r\nexport let _app;\r\n\r\nlet selectedIndex;\r\nlet contentElement;\r\n\r\n$: styleVars = {\r\n    navBarBackground, navBarBorder,\r\n    navBarColor, selectedItemBackground,\r\n    selectedItemColor, selectedItemBorder,\r\n    itemHoverBackground, itemHoverColor\r\n}\r\n\r\nconst onSelectItem = (index) => () => {\r\n    selectedIndex = index;\r\n    _app.initialiseComponent(items[index].component, contentElement);\r\n}\r\n\r\n\r\n</script>\r\n\r\n<div class=\"root\" use:cssVars={styleVars}>\r\n    <div class=\"navbar\">\r\n        {#each items as navItem, index}\r\n        <div class=\"navitem\"\r\n             on:click={onSelectItem(index)}\r\n             class:selected={selectedIndex === index}>\r\n            {navItem.title}\r\n        </div>\r\n        {/each}\r\n    </div>\r\n    <div class=\"content\"\r\n         bind:this={contentElement}>\r\n    </div>\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n    height: 100%;\r\n    width:100%;\r\n    grid-template-columns: [navbar] auto [content] 1fr;\r\n    display: grid;\r\n}\r\n\r\n.navbar {\r\n    grid-column: navbar;\r\n    background: var(--navBarBackground);\r\n    border: var(--navBarBorder);\r\n    color: var(--navBarColor);\r\n}\r\n\r\n.navitem {\r\n    padding: 10px 17px;\r\n    cursor: pointer;\r\n}\r\n\r\n.navitem:hover {\r\n    background: var(--itemHoverBackground);\r\n    color: var(--itemHoverColor);\r\n}\r\n\r\n.navitem.selected {\r\n    background: var(--selectedItemBackground);\r\n    border: var(--selectedItemBorder);\r\n    color: var(--selectedItemColor);\r\n}\r\n\r\n.content {\r\n    grid-column: content;\r\n}\r\n\r\n</style>\r\n\r\n",
-    "<script>\nexport let containerClass = \"\";\nexport let formControls = [];\n\nexport let _app;\n\nlet htmlElements = {};\nlet labels = {};\n\n$ : {\n    let cIndex = 0;\n    for(let c of formControls) {\n        labels[cIndex] = c.label;\n        cIndex++;\n    }\n\n    if(_app && htmlElements) {\n        for(let el in htmlElements) {\n            _app.initialiseComponent(\n                formControls[el].control,\n                htmlElements[el]\n            );\n        }\n    }\n}\n\n</script>\n\n<div class=\"form-root {containerClass}\">\n    {#each formControls as child, index}\n    <div class=\"label\">{labels[index]}</div>\n    <div class=\"control\"\n        bind:this={htmlElements[index]}>\n    </div>\n    {/each}\n</div>\n\n<style>\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n.overflow {\n    grid-column-start: overflow;\n}\n.full-width {\n    width: 100%;\n}\n</style>",
-    "<script>\nexport let className = \"default\";\nexport let disabled = false;\nexport let contentText;\nexport let contentComponent;\nexport let onClick = () => {};\n\nexport let _app;\nlet contentComponentContainer;\n\n$:{\n\tif(_app && contentComponentContainer && contentComponent._component)\n\t\t_app.initialiseComponent(contentComponent, contentComponentContainer);\n}\n\n\nconst clickHandler = () => {\n\tif(onClick) onClick();\n}\n\n</script>\n\n\n<button class={className} {disabled} on:click={clickHandler}>\n    {#if contentComponent && contentComponent._component}\n\t<div bind:this={contentComponentContainer}>\n\t</div>\n    {:else if contentText}\n    {contentText}\n    {:else}\n    <slot />\n    {/if}\n</button>\n\n\n<style>\n\n.default {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\n.default:active {\n\tbackground-color: #ddd;\n}\n\n.default:focus {\n\tborder-color: #666;\n}\n\n</style>"
+    "<script>\nimport createApp from \"./createApp\";\nimport { props } from \"./props\";\n\nlet _bb;\n\nconst _appPromise = createApp();\n_appPromise.then(a => _bb = a);\n\nconst testProps = props.table;\n\nlet currentComponent;\n\n$: {\n    if(_bb && currentComponent) {\n        _bb.initialiseComponent(testProps, currentComponent);\n    }\n}\n\n\n\n</script>\n\n{#await _appPromise}\nloading\n{:then _bb}\n\n<div id=\"current_component\" bind:this={currentComponent}>\n</div>\n\n{/await}\n\n\n<style>\n#current_component {\n    height: 100%;\n    width: 100%;\n}\n</style>\n\n",
+    "<script>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\nimport { authenticate } from \"./api\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\n\nexport let _bb;\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\n\nconst login = () => {\n    busy = true;\n    authenticate(username, password)\n    .then(r => {\n        busy = false;\n        if(r.status === 200) {\n            return r.json();\n        } else {\n            incorrect = true;\n            return;\n        }\n    })\n    .then(user => {\n        if(user) {\n            localStorage.setItem(\"budibase:user\", user);\n            location.reload();\n        }\n    })\n}\n\n</script>\n\n<div class=\"root\">\n\n    <div class=\"content\">\n\n        {#if logo}\n        <div class=\"logo-container\">\n            <img src={logo} alt=\"logo\"/>\n        </div>\n        {/if}\n\n        <div class=\"form-root\">\n            <div class=\"label\">\n                {usernameLabel}\n            </div>\n            <div class=\"control\">\n                <Textbox bind:value={username} />\n            </div>\n            <div class=\"label\">\n                {passwordLabel}\n            </div>\n            <div class=\"control\">\n                <Textbox bind:value={password} hideValue=true />\n            </div>\n        </div>\n\n        <div class=\"login-button-container\">\n            <Button disabled={busy} \n                    on:click={login}\n                    class={buttonClass}>\n                    {loginButtonLabel}\n            </Button>\n        </div>\n\n        {#if incorrect}\n        <div class=\"incorrect-details-panel\">\n            Incorrect username or password\n        </div>\n        {/if}\n\n    </div>\n\n</div>\n\n<style>\n\n.root {\n    height: 100%;\n    display:grid;\n    grid-template-columns: [left] 1fr [middle] auto [right] 1fr;\n    grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;\n}\n\n.content {\n    grid-column-start: middle;\n    grid-row-start: center;\n    width: 400px;\n}\n\n.logo-container {\n    margin-bottom: 20px\n}\n\n.logo-container > img {\n    max-width: 100%;\n}\n\n.login-button-container {\n    text-align: right;\n    margin-top: 20px;\n}\n\n.incorrect-details-panel {\n    margin-top: 30px;\n    padding: 10px;\n    border-style: solid;\n    border-width: 1px;\n    border-color: maroon;\n    border-radius: 1px;\n    text-align: center;\n    color: maroon;\n    background-color: mistyrose;\n}\n\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n\n</style>",
+    "<script>\r\nimport { onMount } from 'svelte'\r\nimport {buildStyle} from \"./buildStyle\";\r\n\r\nexport let gridTemplateRows =\"\";\r\nexport let gridTemplateColumns =\"\";\r\nexport let children = [];\r\nexport let width = \"auto\";\r\nexport let height = \"auto\";\r\nexport let containerClass=\"\";\r\nexport let itemContainerClass=\"\";\r\n\r\n/*\"gridColumnStart\":\"string\",\r\n\"gridColumnEnd\":\"string\",\r\n\"gridRowStart\":\"string\",\r\n\"gridRowEnd\":\"string\"*/\r\n\r\n\r\nexport let _bb;\r\n\r\nlet style=\"\";\r\nlet htmlElements = {};\r\n\r\n$ : {\r\n    if(_bb && htmlElements) {\r\n        for(let el in htmlElements) {\r\n            _bb.initialiseComponent(\r\n                children[el].control,\r\n                htmlElements[el]\r\n            );\r\n        }\r\n    }\r\n}\r\n\r\nconst childStyle = child => \r\n    buildStyle({\r\n        \"grid-column-start\": child.gridColumnStart,\r\n        \"grid-column-end\": child.gridColumnEnd,\r\n        \"grid-column\": child.gridColumn,\r\n        \"grid-row-start\": child.gridRowStart,\r\n        \"grid-row-end\": child.gridRowStart,\r\n        \"grid-row\": child.gridRow,\r\n    });\r\n\r\n</script>\r\n\r\n<div class=\"root {containerClass}\"\r\n     style=\"width: {width}; height: {height}; grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};\">\r\n    {#each children as child, index}\r\n    <div class=\"{itemContainerClass}\"\r\n        style={childStyle(child)}\r\n        bind:this={htmlElements[index]}>\r\n    </div>\r\n    {/each}\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n    display: grid;\r\n}\r\n\r\n</style>",
+    "<script>\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let navBarBackground = \"\";\r\nexport let navBarBorder=\"\";\r\nexport let navBarColor=\"\";\r\nexport let selectedItemBackground=\"\";\r\nexport let selectedItemColor=\"\";\r\nexport let selectedItemBorder=\"\";\r\nexport let itemHoverBackground=\"\";\r\nexport let itemHoverColor=\"\";\r\nexport let items = []\r\n\r\nexport let _bb;\r\n\r\nlet selectedIndex;\r\nlet contentElement;\r\n\r\n$: styleVars = {\r\n    navBarBackground, navBarBorder,\r\n    navBarColor, selectedItemBackground,\r\n    selectedItemColor, selectedItemBorder,\r\n    itemHoverBackground, itemHoverColor\r\n}\r\n\r\nconst onSelectItem = (index) => () => {\r\n    selectedIndex = index;\r\n    _bb.initialiseComponent(items[index].component, contentElement);\r\n}\r\n\r\n\r\n</script>\r\n\r\n<div class=\"root\" use:cssVars={styleVars}>\r\n    <div class=\"navbar\">\r\n        {#each items as navItem, index}\r\n        <div class=\"navitem\"\r\n             on:click={onSelectItem(index)}\r\n             class:selected={selectedIndex === index}>\r\n            {navItem.title}\r\n        </div>\r\n        {/each}\r\n    </div>\r\n    <div class=\"content\"\r\n         bind:this={contentElement}>\r\n    </div>\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n    height: 100%;\r\n    width:100%;\r\n    grid-template-columns: [navbar] auto [content] 1fr;\r\n    display: grid;\r\n}\r\n\r\n.navbar {\r\n    grid-column: navbar;\r\n    background: var(--navBarBackground);\r\n    border: var(--navBarBorder);\r\n    color: var(--navBarColor);\r\n}\r\n\r\n.navitem {\r\n    padding: 10px 17px;\r\n    cursor: pointer;\r\n}\r\n\r\n.navitem:hover {\r\n    background: var(--itemHoverBackground);\r\n    color: var(--itemHoverColor);\r\n}\r\n\r\n.navitem.selected {\r\n    background: var(--selectedItemBackground);\r\n    border: var(--selectedItemBorder);\r\n    color: var(--selectedItemColor);\r\n}\r\n\r\n.content {\r\n    grid-column: content;\r\n}\r\n\r\n</style>\r\n\r\n",
+    "<script>\n\nexport let value=\"\";\nexport let hideValue = false;\nexport let className = \"default\";\n\nexport let _bb;\n\nlet actualValue = \"\";\n$: {\n\tif(_bb && value._isstate) {\n\t\t_bb.store.subscribe(s => {\n\t\t\tactualValue = _bb.store.getValue(s, value);\n\t\t});\n\t}\n}\n\nconst onchange = (ev) => {\n\tif(_bb && value._isstate) {\n\t\t_bb.store.setValue(value, ev.target.value);\n\t} else if(!value._isstate) {\n\t\tactualValue = ev.target.value;\n\t}\n}\n\n</script>\n\n{#if hideValue}\n<input class={className} \n\t   type=\"password\" \n\t   value={actualValue} on:change/>\n{:else}\n<input class={className} type=\"text\" value={actualValue}/>\n{/if}\n\n<style>\n.default {\n    width: 100%;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n    border-radius: 2px;\n    width: 100%;\n}\n\n.default:disabled {\n\tcolor: #ccc;\n}\n\n</style>",
+    "<script>\nexport let containerClass = \"\";\nexport let formControls = [];\n\nexport let _bb;\n\nlet htmlElements = {};\nlet labels = {};\n\n$ : {\n    let cIndex = 0;\n    for(let c of formControls) {\n        labels[cIndex] = c.label;\n        cIndex++;\n    }\n\n    if(_bb && htmlElements) {\n        for(let el in htmlElements) {\n            _bb.initialiseComponent(\n                formControls[el].control,\n                htmlElements[el]\n            );\n        }\n    }\n}\n\n</script>\n\n<div class=\"form-root {containerClass}\">\n    {#each formControls as child, index}\n    <div class=\"label\">{labels[index]}</div>\n    <div class=\"control\"\n        bind:this={htmlElements[index]}>\n    </div>\n    {/each}\n</div>\n\n<style>\n.form-root {\n    display: grid;\n    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n    grid-column-start: label;\n    padding: 5px 10px;\n    vertical-align: middle;\n}\n.control {\n    grid-column-start: control;\n    padding: 5px 10px;\n}\n.overflow {\n    grid-column-start: overflow;\n}\n.full-width {\n    width: 100%;\n}\n</style>",
+    "<script>\r\n\r\nexport let columns=[];\r\nexport let data=\"\";\r\nexport let tableClass=\"\";\r\nexport let theadClass=\"\";\r\nexport let tbodyClass=\"\";\r\nexport let trClass=\"\";\r\nexport let thClass=\"\";\r\nexport let onRowClick;\r\n\r\nexport let _bb;\r\n\r\nconst rowClickHandler = (row) => () => {\r\n    onRowClick(row);\r\n}\r\n\r\n</script>\r\n\r\n <table class={tableClass}>\r\n    <thead class={theadClass}>\r\n        <tr class={trClass}>\r\n            {#each columns as col}\r\n            <th class={thClass}>{col.title}</th>\r\n            {/each}\r\n        </tr>\r\n    </thead>\r\n    <tbody class={tbodyClass}>\r\n        {#each data as row}\r\n        <tr class={trClass}\r\n            on:click={rowClickHandler(row)} >\r\n            {#each columns as col}\r\n            <th class={thClass}>{_bb.getStateOrValue(col.value, row)}</th>\r\n            {/each}\r\n        </tr>\r\n        {/each}\r\n    </tbody>\r\n</table> \r\n\r\n<style>\r\n\r\n.table-default {\r\n    width: 100%;\r\n    margin-bottom: 1rem;\r\n    color: #212529;\r\n    border-collapse: collapse;\r\n}\r\n\r\n.table-default .thead-default .th-default {\r\n    vertical-align: bottom;\r\n    border-bottom: 2px solid #dee2e6;\r\n    font-weight: bold;\r\n}\r\n\r\n.table-default .th-default {\r\n    padding: .75rem;\r\n    vertical-align: top;\r\n    border-top: 1px solid #dee2e6;\r\n    font-weight: normal;\r\n}\r\n\r\n.th-default {\r\n    text-align: inherit;\r\n}\r\n\r\n.table-default .tbody-default .tr-default:hover {\r\n    color: #212529;\r\n    background-color: rgba(0,0,0,.075);\r\n    cursor: pointer;\r\n}\r\n\r\n</style>",
+    "<script>\nexport let className = \"default\";\nexport let disabled = false;\nexport let contentText;\nexport let contentComponent;\nexport let onClick = () => {};\n\nexport let _bb;\nlet contentComponentContainer;\n\n$:{\n\tif(_bb && contentComponentContainer && contentComponent._component)\n\t\t_bb.initialiseComponent(contentComponent, contentComponentContainer);\n}\n\n\nconst clickHandler = () => {\n\tif(onClick) onClick();\n}\n\n</script>\n\n\n<button class={className} {disabled} on:click={clickHandler}>\n    {#if contentComponent && contentComponent._component}\n\t<div bind:this={contentComponentContainer}>\n\t</div>\n    {:else if contentText}\n    {contentText}\n    {:else}\n    <slot />\n    {/if}\n</button>\n\n\n<style>\n\n.default {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\n.default:active {\n\tbackground-color: #ddd;\n}\n\n.default:focus {\n\tborder-color: #666;\n}\n\n</style>"
   ],
   "names": [],
-  "mappings": "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"
+  "mappings": "AAkCA,kBAAkB,eAAC,CAAC,AAChB,MAAM,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,AACf,CAAC;ACmDD,KAAK,eAAC,CAAC,AACH,MAAM,CAAE,IAAI,CACZ,QAAQ,IAAI,CACZ,qBAAqB,CAAE,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAC3D,kBAAkB,CAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,AAC5D,CAAC,AAED,QAAQ,eAAC,CAAC,AACN,iBAAiB,CAAE,MAAM,CACzB,cAAc,CAAE,MAAM,CACtB,KAAK,CAAE,KAAK,AAChB,CAAC,AAED,eAAe,eAAC,CAAC,AACb,aAAa,CAAE,IAAI;AACvB,CAAC,AAED,8BAAe,CAAG,GAAG,eAAC,CAAC,AACnB,SAAS,CAAE,IAAI,AACnB,CAAC,AAED,uBAAuB,eAAC,CAAC,AACrB,UAAU,CAAE,KAAK,CACjB,UAAU,CAAE,IAAI,AACpB,CAAC,AAED,wBAAwB,eAAC,CAAC,AACtB,UAAU,CAAE,IAAI,CAChB,OAAO,CAAE,IAAI,CACb,YAAY,CAAE,KAAK,CACnB,YAAY,CAAE,GAAG,CACjB,YAAY,CAAE,MAAM,CACpB,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,MAAM,CAClB,KAAK,CAAE,MAAM,CACb,gBAAgB,CAAE,SAAS,AAC/B,CAAC,AAED,UAAU,eAAC,CAAC,AACR,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,AACrD,CAAC,AAED,MAAM,eAAC,CAAC,AACJ,iBAAiB,CAAE,KAAK,CACxB,OAAO,CAAE,GAAG,CAAC,IAAI,CACjB,cAAc,CAAE,MAAM,AAC1B,CAAC,AACD,QAAQ,eAAC,CAAC,AACN,iBAAiB,CAAE,OAAO,CAC1B,OAAO,CAAE,GAAG,CAAC,IAAI,AACrB,CAAC;ACjFD,KAAK,eAAC,CAAC,AACH,OAAO,CAAE,IAAI,AACjB,CAAC;ACVD,KAAK,cAAC,CAAC,AACH,MAAM,CAAE,IAAI,CACZ,MAAM,IAAI,CACV,qBAAqB,CAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAClD,OAAO,CAAE,IAAI,AACjB,CAAC,AAED,OAAO,cAAC,CAAC,AACL,WAAW,CAAE,MAAM,CACnB,UAAU,CAAE,IAAI,kBAAkB,CAAC,CACnC,MAAM,CAAE,IAAI,cAAc,CAAC,CAC3B,KAAK,CAAE,IAAI,aAAa,CAAC,AAC7B,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,OAAO,CAAE,IAAI,CAAC,IAAI,CAClB,MAAM,CAAE,OAAO,AACnB,CAAC,AAED,sBAAQ,MAAM,AAAC,CAAC,AACZ,UAAU,CAAE,IAAI,qBAAqB,CAAC,CACtC,KAAK,CAAE,IAAI,gBAAgB,CAAC,AAChC,CAAC,AAED,QAAQ,SAAS,cAAC,CAAC,AACf,UAAU,CAAE,IAAI,wBAAwB,CAAC,CACzC,MAAM,CAAE,IAAI,oBAAoB,CAAC,CACjC,KAAK,CAAE,IAAI,mBAAmB,CAAC,AACnC,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,WAAW,CAAE,OAAO,AACxB,CAAC;AC9CD,QAAQ,eAAC,CAAC,AACN,KAAK,CAAE,IAAI,CACd,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACnB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,AACf,CAAC,AAED,uBAAQ,SAAS,AAAC,CAAC,AAClB,KAAK,CAAE,IAAI,AACZ,CAAC;ACZD,UAAU,cAAC,CAAC,AACR,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,AACrD,CAAC,AAED,MAAM,cAAC,CAAC,AACJ,iBAAiB,CAAE,KAAK,CACxB,OAAO,CAAE,GAAG,CAAC,IAAI,CACjB,cAAc,CAAE,MAAM,AAC1B,CAAC,AACD,QAAQ,cAAC,CAAC,AACN,iBAAiB,CAAE,OAAO,CAC1B,OAAO,CAAE,GAAG,CAAC,IAAI,AACrB,CAAC,AACD,SAAS,cAAC,CAAC,AACP,iBAAiB,CAAE,QAAQ,AAC/B,CAAC,AACD,WAAW,cAAC,CAAC,AACT,KAAK,CAAE,IAAI,AACf,CAAC;AChBD,cAAc,cAAC,CAAC,AACZ,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,IAAI,CACnB,KAAK,CAAE,OAAO,CACd,eAAe,CAAE,QAAQ,AAC7B,CAAC,AAED,4BAAc,CAAC,cAAc,CAAC,WAAW,cAAC,CAAC,AACvC,cAAc,CAAE,MAAM,CACtB,aAAa,CAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CAChC,WAAW,CAAE,IAAI,AACrB,CAAC,AAED,4BAAc,CAAC,WAAW,cAAC,CAAC,AACxB,OAAO,CAAE,MAAM,CACf,cAAc,CAAE,GAAG,CACnB,UAAU,CAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CAC7B,WAAW,CAAE,MAAM,AACvB,CAAC,AAED,WAAW,cAAC,CAAC,AACT,UAAU,CAAE,OAAO,AACvB,CAAC,AAED,4BAAc,CAAC,cAAc,CAAC,yBAAW,MAAM,AAAC,CAAC,AAC7C,KAAK,CAAE,OAAO,CACd,gBAAgB,CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAClC,MAAM,CAAE,OAAO,AACnB,CAAC;AChCD,QAAQ,eAAC,CAAC,AACT,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACnB,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CACtB,aAAa,CAAE,GAAG,CAClB,KAAK,CAAE,IAAI,CACX,gBAAgB,CAAE,OAAO,CACzB,OAAO,CAAE,IAAI,AACd,CAAC,AAED,uBAAQ,OAAO,AAAC,CAAC,AAChB,gBAAgB,CAAE,IAAI,AACvB,CAAC,AAED,uBAAQ,MAAM,AAAC,CAAC,AACf,YAAY,CAAE,IAAI,AACnB,CAAC"
 }

packages/standard-components/src/Form.svelte

@@ -2,7 +2,7 @@
 export let containerClass = "";
 export let formControls = [];
 
-export let _app;
+export let _bb;
 
 let htmlElements = {};
 let labels = {};
@@ -14,9 +14,9 @@ $ : {
         cIndex++;
     }
 
-    if(_app && htmlElements) {
+    if(_bb && htmlElements) {
         for(let el in htmlElements) {
-            _app.initialiseComponent(
+            _bb.initialiseComponent(
                 formControls[el].control,
                 htmlElements[el]
             );

packages/standard-components/src/Grid.svelte

@@ -16,15 +16,15 @@ export let itemContainerClass="";
 "gridRowEnd":"string"*/
 
 
-export let _app;
+export let _bb;
 
 let style="";
 let htmlElements = {};
 
 $ : {
-    if(_app && htmlElements) {
+    if(_bb && htmlElements) {
         for(let el in htmlElements) {
-            _app.initialiseComponent(
+            _bb.initialiseComponent(
                 children[el].control,
                 htmlElements[el]
             );

packages/standard-components/src/Login.svelte

@@ -12,7 +12,7 @@ export let loginRedirect = "";
 export let logo = "";
 export let buttonClass = "";
 
-export let _app;
+export let _bb;
 
 let username = "";
 let password = "";

packages/standard-components/src/Nav.svelte

@@ -11,7 +11,7 @@ export let itemHoverBackground="";
 export let itemHoverColor="";
 export let items = []
 
-export let _app;
+export let _bb;
 
 let selectedIndex;
 let contentElement;
@@ -25,7 +25,7 @@ $: styleVars = {
 
 const onSelectItem = (index) => () => {
     selectedIndex = index;
-    _app.initialiseComponent(items[index].component, contentElement);
+    _bb.initialiseComponent(items[index].component, contentElement);
 }
 
 

packages/standard-components/src/Panel.svelte

@@ -13,7 +13,7 @@ export let textAlign="";
 export let color="";
 export let padding="";
 
-export let _app;
+export let _bb;
 
 let style="";
 let componentElement;
@@ -26,8 +26,8 @@ $: {
         "border-radius":borderRadius
     });
 
-    if(_app && component) {
-        _app.initialiseComponent(component, componentElement);
+    if(_bb && component) {
+        _bb.initialiseComponent(component, componentElement);
     }
 }
 

packages/standard-components/src/StackPanel.svelte

@@ -9,14 +9,14 @@ export let containerClass="";
 export let itemContainerClass="";
 
 
-export let _app;
+export let _bb;
 
 let htmlElements = {};
 
 onMount(() => {
-    if(_app && htmlElements) {
+    if(_bb && htmlElements) {
         for(let el in htmlElements) {
-            _app.initialiseComponent(
+            _bb.initialiseComponent(
                 children[el].control,
                 htmlElements[el]
             );

packages/standard-components/src/Table.svelte

@@ -0,0 +1,72 @@
+<script>
+
+export let columns=[];
+export let data="";
+export let tableClass="";
+export let theadClass="";
+export let tbodyClass="";
+export let trClass="";
+export let thClass="";
+export let onRowClick;
+
+export let _bb;
+
+const rowClickHandler = (row) => () => {
+    onRowClick(row);
+}
+
+</script>
+
+ <table class={tableClass}>
+    <thead class={theadClass}>
+        <tr class={trClass}>
+            {#each columns as col}
+            <th class={thClass}>{col.title}</th>
+            {/each}
+        </tr>
+    </thead>
+    <tbody class={tbodyClass}>
+        {#each data as row}
+        <tr class={trClass}
+            on:click={rowClickHandler(row)} >
+            {#each columns as col}
+            <th class={thClass}>{_bb.getStateOrValue(col.value, row)}</th>
+            {/each}
+        </tr>
+        {/each}
+    </tbody>
+</table> 
+
+<style>
+
+.table-default {
+    width: 100%;
+    margin-bottom: 1rem;
+    color: #212529;
+    border-collapse: collapse;
+}
+
+.table-default .thead-default .th-default {
+    vertical-align: bottom;
+    border-bottom: 2px solid #dee2e6;
+    font-weight: bold;
+}
+
+.table-default .th-default {
+    padding: .75rem;
+    vertical-align: top;
+    border-top: 1px solid #dee2e6;
+    font-weight: normal;
+}
+
+.th-default {
+    text-align: inherit;
+}
+
+.table-default .tbody-default .tr-default:hover {
+    color: #212529;
+    background-color: rgba(0,0,0,.075);
+    cursor: pointer;
+}
+
+</style>

packages/standard-components/src/Test/TestApp.svelte

@@ -2,18 +2,18 @@
 import createApp from "./createApp";
 import { props } from "./props";
 
-let _app;
+let _bb;
 
 const _appPromise = createApp();
-_appPromise.then(a => _app = a);
+_appPromise.then(a => _bb = a);
 
-const testProps = props.nav;
+const testProps = props.table;
 
 let currentComponent;
 
 $: {
-    if(_app && currentComponent) {
-        _app.initialiseComponent(testProps, currentComponent);
+    if(_bb && currentComponent) {
+        _bb.initialiseComponent(testProps, currentComponent);
     }
 }
 
@@ -23,7 +23,7 @@ $: {
 
 {#await _appPromise}
 loading
-{:then _app}
+{:then _bb}
 
 <div id="current_component" bind:this={currentComponent}>
 </div>

packages/standard-components/src/Test/createApp.js

@@ -6,6 +6,7 @@ import Textbox from "../Textbox.svelte";
 import Text from "../Text.svelte";
 import Nav from "../Nav.svelte";
 import Panel from "../Panel.svelte";
+import Table from "../Table.svelte";
 import { createApp } from "@budibase/client/src/createApp";
 
 export default async () =>  {
@@ -18,13 +19,24 @@ export default async () =>  {
             textbox : Textbox,
             text: Text,
             nav: Nav,
-            panel: Panel
+            panel: Panel,
+            table: Table
         }
     }
 
     const appDef = {hierarchy:{}, actions:{}};
     const user = {name:"yeo", permissions:[]};
    
-    return createApp(componentLibraries, appDef, user);
+    var app = createApp(componentLibraries, appDef, user);
+    app.store.update(s => {
+        s.people = [
+            {name:"bob", address: "123 Main Street", status: "Open"},
+            {name:"poppy", address: "456 Side Road", status: "Closed"},
+            {name:"Oscar", address: "678 Dodgy Alley", status: "Open"},
+        ];
+        return s;
+    })
+
+    return app;
 
 }

packages/standard-components/src/Test/props.js

@@ -56,6 +56,59 @@ export const props = {
         ]
     },
 
+    table: {
+        _component:"components/table",
+        columns: [
+            {
+                title: {
+                    "##bbstate":"NameColumnName",
+                    "##bbsource":"store",
+                    "##bbstatefallback": "Name"
+                },
+                value: {
+                    "##bbstate":"name",
+                    "##bbsource":"context"
+                }
+            },
+            {
+                title: "Address",
+                value: {
+                    "##bbstate":"address",
+                    "##bbsource":"context"
+                }
+            },
+            {
+                title: "Status",
+                value: {
+                    "##bbstate":"status",
+                    "##bbsource":"context"
+                }
+            }
+        ],
+        data: {
+            "##bbstate":"people"
+        },
+        onRowClick: [
+            {
+                "##eventHandlerType": "Set State",
+                parameters: {
+                    path: "NameColumnName",
+                    value: {
+                        "##bbstate":"name",
+                        "##bbsource":"context",
+                        "##bbstatefallback": "balls to that"
+                    }
+                }
+            }
+        ],
+        tableClass: "table-default",
+        theadClass: "thead-default",
+        tbodyClass: "tbody-default",
+        trClass: "tr-default",
+        thClass: "th-default"
+
+    },
+
     grid: {
         _component: "components/grid",
         gridTemplateColumns: "[left] auto [center] auto [right] auto",

packages/standard-components/src/Text.svelte

@@ -10,7 +10,7 @@ export let verticalAlign=""
 export let color="";
 export let display="";
 
-export let _app;
+export let _bb;
 
 let style="";
 

packages/standard-components/src/Textbox.svelte

@@ -4,20 +4,20 @@ export let value="";
 export let hideValue = false;
 export let className = "default";
 
-export let _app;
+export let _bb;
 
 let actualValue = "";
 $: {
-	if(_app && value._isstate) {
-		_app.store.subscribe(s => {
-			actualValue = _app.store.getValue(s, value);
+	if(_bb && value._isstate) {
+		_bb.store.subscribe(s => {
+			actualValue = _bb.store.getValue(s, value);
 		});
 	}
 }
 
 const onchange = (ev) => {
-	if(_app && value._isstate) {
-		_app.store.setValue(value, ev.target.value);
+	if(_bb && value._isstate) {
+		_bb.store.setValue(value, ev.target.value);
 	} else if(!value._isstate) {
 		actualValue = ev.target.value;
 	}

packages/standard-components/src/button.svelte

@@ -5,12 +5,12 @@ export let contentText;
 export let contentComponent;
 export let onClick = () => {};
 
-export let _app;
+export let _bb;
 let contentComponentContainer;
 
 $:{
-	if(_app && contentComponentContainer && contentComponent._component)
-		_app.initialiseComponent(contentComponent, contentComponentContainer);
+	if(_bb && contentComponentContainer && contentComponent._component)
+		_bb.initialiseComponent(contentComponent, contentComponentContainer);
 }