array component

This commit is contained in:
michael shanks 2019-09-03 10:42:19 +01:00
parent bf7afe369d
commit b715b2a842
31 changed files with 1661 additions and 751 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -41,20 +41,7 @@
"children": [],
"validationRules": [],
"nodeId": 2,
"indexes": [
{
"name": "Some index",
"type": "index",
"map": "return {...record};",
"filter": "",
"indexType": "ancestor",
"getShardName": "",
"getSortKey": "record.id",
"aggregateGroups": [],
"allowedRecordNodeIds": [],
"nodeId": 3
}
],
"indexes": [],
"allidsShardFactor": 1,
"collectionName": "invoices",
"isSingle": false
@ -62,7 +49,22 @@
],
"validationRules": [],
"nodeId": 1,
"indexes": [],
"indexes": [
{
"name": "customer_invoices",
"type": "index",
"map": "return {...record};",
"filter": "",
"indexType": "ancestor",
"getShardName": "",
"getSortKey": "record.id",
"aggregateGroups": [],
"allowedRecordNodeIds": [
2
],
"nodeId": 5
}
],
"allidsShardFactor": 64,
"collectionName": "customers",
"isSingle": false
@ -83,6 +85,20 @@
1
],
"nodeId": 4
},
{
"name": "everyones_invoices",
"type": "index",
"map": "return {...record};",
"filter": "",
"indexType": "ancestor",
"getShardName": "",
"getSortKey": "record.id",
"aggregateGroups": [],
"allowedRecordNodeIds": [
2
],
"nodeId": 6
}
],
"nodeId": 0
@ -103,6 +119,10 @@
],
"actions": {
"undefined": [
[
[
[
[
[
[
[
@ -118,6 +138,10 @@
]
]
]
]
]
]
]
},
"mainUi": {},
"unauthenticatedUi": {}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -12,3 +12,4 @@ module.exports = () => ({
dev:true,
customizeMaster: appDefinition => appDefinition
})