budibase/packages/server/builder/bundle.css.map

{
  "version": 3,
  "file": "bundle.css",
  "sources": [
    "..\\..\\builder\\src\\App.svelte",
    "..\\..\\builder\\src\\PackageRoot.svelte",
    "..\\..\\builder\\src\\NoPackage.svelte",
    "..\\..\\builder\\src\\BackendRoot.svelte",
    "..\\..\\builder\\src\\common\\IconButton.svelte",
    "..\\..\\builder\\src\\userInterface\\UserInterfaceRoot.svelte",
    "..\\..\\builder\\src\\common\\Button.svelte",
    "..\\..\\builder\\src\\common\\ComingSoon.svelte",
    "..\\..\\builder\\src\\database\\DatabaseRoot.svelte",
    "..\\..\\builder\\src\\nav\\BackendNav.svelte",
    "..\\..\\builder\\src\\actionsAndTriggers\\ActionsAndTriggersRoot.svelte",
    "..\\..\\builder\\src\\accessLevels\\AccessLevelsRoot.svelte",
    "..\\..\\builder\\src\\userInterface\\ComponentsHierarchy.svelte",
    "..\\..\\builder\\src\\userInterface\\EditComponent.svelte",
    "..\\..\\builder\\src\\userInterface\\PagesList.svelte",
    "..\\..\\builder\\src\\userInterface\\NewComponent.svelte",
    "..\\..\\builder\\src\\userInterface\\CurrentItemPreview.svelte",
    "..\\..\\builder\\src\\userInterface\\PageView.svelte",
    "..\\..\\builder\\src\\userInterface\\SettingsView.svelte",
    "..\\..\\builder\\src\\database\\RecordView.svelte",
    "..\\..\\builder\\src\\database\\HierarchyRow.svelte",
    "..\\..\\builder\\src\\database\\ActionsHeader.svelte",
    "..\\..\\builder\\src\\database\\IndexView.svelte",
    "..\\..\\builder\\src\\common\\DropdownButton.svelte",
    "..\\..\\builder\\src\\nav\\HierarchyRow.svelte",
    "..\\..\\builder\\src\\nav\\NavItem.svelte",
    "..\\..\\builder\\src\\common\\ButtonGroup.svelte",
    "..\\..\\builder\\src\\actionsAndTriggers\\Triggers.svelte",
    "..\\..\\builder\\src\\actionsAndTriggers\\Actions.svelte",
    "..\\..\\builder\\src\\userInterface\\PropsView.svelte",
    "..\\..\\builder\\src\\common\\Textbox.svelte",
    "..\\..\\builder\\src\\userInterface\\ComponentInstanceEditor.svelte",
    "..\\..\\builder\\src\\userInterface\\ComponentSearch.svelte",
    "..\\..\\builder\\src\\common\\ErrorsBox.svelte",
    "..\\..\\builder\\src\\common\\CodeArea.svelte",
    "..\\..\\builder\\src\\actionsAndTriggers\\ActionView.svelte",
    "..\\..\\builder\\src\\common\\Checkbox.svelte",
    "..\\..\\builder\\src\\userInterface\\PropControl.svelte",
    "..\\..\\builder\\src\\userInterface\\ComponentPropSelector.svelte",
    "..\\..\\builder\\src\\common\\ValuesList.svelte",
    "..\\..\\builder\\src\\userInterface\\PropArraySelector.svelte",
    "..\\..\\builder\\src\\userInterface\\EventListSelector.svelte",
    "..\\..\\builder\\src\\userInterface\\EventSelector.svelte",
    "..\\..\\builder\\src\\userInterface\\StateBindingTextbox.svelte",
    "..\\..\\builder\\src\\userInterface\\StateBindingControl.svelte"
  ],
  "sourcesContent": [
    "<script>\n\t\n\timport NoPackage from \"./NoPackage.svelte\";\n\timport PackageRoot from \"./PackageRoot.svelte\";\n\timport {store, initialise} from \"./builderStore\";\n\timport { onMount } from 'svelte';\n\t\n\tlet init = initialise();\n\n</script>\n\n<main>\n\n\t{#await init}\n\t\n\t\t<h1>loading</h1>\n\n\t{:then result}\n\t\t{#if $store.hasAppPackage}\n\t\t<PackageRoot />\n\t\t{/if}\n\n\t\t{#if !$store.hasAppPackage}\n\t\t<NoPackage />\n\t\t{/if}\n\n\t{:catch err}\n\t\t<h1 style=\"color:red\">{err}</h1>\n\t{/await}\n</main>\n\n<style>\n\tmain {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tfont-family: \"Roboto\", Helvetica, Arial, sans-serif;\n\t}\n</style>",
    "<script>\n\nimport IconButton from \"./common/IconButton.svelte\";\nimport { store } from \"./builderStore\";\nimport UserInterfaceRoot from \"./userInterface/UserInterfaceRoot.svelte\";\nimport BackendRoot from \"./BackendRoot.svelte\";\nimport { fade } from \"svelte/transition\";\n\n</script>\n\n<div class=\"root\">\n\n    <div class=\"top-nav\">\n        <IconButton icon=\"home\" \n                    color=\"var(--slate)\"\n                    hoverColor=\"var(--secondary75)\"/>\n        <span class:active={$store.isBackend}\n              class=\"topnavitem\"\n              on:click={store.showBackend}>\n              Backend\n        </span>\n        <span class:active={!$store.isBackend}\n              class=\"topnavitem\"\n              on:click={store.showFrontend}>\n              Frontend\n        </span>\n    </div>\n\n    <div class=\"content\">\n        {#if $store.isBackend}\n        <div in:fade out:fade>\n            <BackendRoot />\n        </div>\n        {:else}\n        <div in:fade out:fade>\n            <UserInterfaceRoot />\n        </div>\n        {/if}\n    </div>\n\n</div>\n\n<style>\n\n.root {\n    height:100%;\n    width:100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.top-nav {\n    flex: 0 0 auto;\n    height:25px;\n    background: white;\n    border-style:solid;\n    border-width: 0px 0px 1px 0px;\n    border-color: var(--lightslate);\n    padding: 5px;\n    width: 100%;\n}\n\n.content {\n    flex: 1 1 auto;\n    width: 100%;\n    height: 100px;\n}\n\n.content > div {\n    height:100%;\n    width:100%;\n}\n\n.topnavitem {\n    cursor: pointer;\n    color: var(--slate);\n    padding: 0px 15px;\n}\n\n.topnavitem:hover {\n    color: var(--secondary75);\n}\n\n.active {\n    color: var(--secondary100);\n}\n\n\n</style>",
    "<script>\n\nimport Button from \"./common/Button.svelte\"\nimport { store } from \"./builderStore\";\n\nlet errors = [];\n\n</script>\n\n<div class=\"root\">\n    <div class=\"inner\">\n        <img src=\"/_builder/assets/budibase-logo.png\" class=\"logo\" alt=\"budibase logo\"/>\n        <div>\n            \n            <div>\n                <h4 style=\"margin-bottom: 20px\">Choose an Application</h4>\n                {#each $store.apps as app}\n                <a href={`#/${app}`} class=\"app-link\">{app}</a>\n                {/each}\n            </div>\n        </div>\n    </div>\n</div>\n\n<style>\n\n.root {\n    position: fixed;\n    margin: 0 auto;\n    text-align: center;\n    top: 20%;\n    /*color: #333333;\n    background-color: #fdfdfd;*/\n    width:100%;\n}\n\n.inner {\n    display:inline-block;\n    margin: auto;\n}\n\n.logo {\n    width: 300px;\n    margin-bottom: 40px;\n}\n\n.root :global(.option) {\n    width:250px;\n}\n\n.app-link {\n    margin-top: 10px;\n    display: block;\n}\n\n</style>",
    "<script>\n\nimport BackendNav from \"./nav/BackendNav.svelte\";\nimport Database from \"./database/DatabaseRoot.svelte\" ;\nimport UserInterface from \"./userInterface/UserInterfaceRoot.svelte\" ;\nimport ActionsAndTriggers from \"./actionsAndTriggers/ActionsAndTriggersRoot.svelte\" ;\nimport AccessLevels from \"./accessLevels/AccessLevelsRoot.svelte\" ;\nimport ComingSoon from \"./common/ComingSoon.svelte\";\n\nimport {store} from \"./builderStore\";\n\nexport let navWidth = \"50px\";\n\n\n</script>\n\n<div class=\"root\">\n  <div class=\"nav\">\n    <BackendNav />\n  </div>\n  <div class=\"content\" \n       style=\"width: calc(100% - {navWidth}); left: {navWidth}\"> \n    {#if $store.activeNav === \"database\"}\n    <Database />\n    {:else if $store.activeNav === \"actions\"}\n    <ActionsAndTriggers />\n    {:else if $store.activeNav === \"access levels\"}\n    <AccessLevels />\n    {/if}\n  </div>\n</div>\n\n\n\n<style>\n\n.root {\n  height: 100%;\n  display: flex;\n}\n\n\n.content {\n  flex: 1 1 auto;\n  height: 100%;\n  background-color: var(--white);\n  margin:0;\n}\n\n.nav {\n  flex: 0 1 auto;\n  width: 300px;\n  height: 100%;\n}\n\n</style>",
    "<script>\nimport getIcon from \"./icon\";\n\nexport let size = 18;\nexport let icon = \"\";\nexport let style = \"\";\nexport let color = \"var(--secondary100)\";\nexport let hoverColor = \"var(--secondary75)\";\nexport let attributes = {};\n\nlet currentAttributes = [];\nconst addAttributes = (node, attributes) => {\n\n    const add = (_attributes) => {\n        const attrs = [];\n        for(let attr in _attributes) {\n            node.setAttribute(attr, _attributes[attr]);\n            attrs.push(\"uk-toggle\")\n        }\n        currentAttributes = attrs;\n    }\n\n    add(attributes);\n\n    return {\n        // should implement update method\n        update(attributes) {\n            for(let attr of currentAttributes) {\n                node.removeAttribute(attr)\n            }\n            add(attributes);\n        },\n        destroy() {}\n    }\n}\n\n</script>\n\n<button style=\"{style}{style ? \";\" : \"\"} color:{color}; --hovercolor:{hoverColor}\"\n        on:click\n        use:addAttributes={attributes}>\n    {@html getIcon(icon, size)}\n</button>\n\n\n<style>\n\nbutton {\n    border-style: none;\n    background-color: rgba(0,0,0,0);\n    cursor: pointer;\n    outline:none;\n}\n\nbutton:hover {\n    color: var(--hovercolor);\n}\n\nbutton:active {\n    outline:none;\n}\n\n</style>",
    "<script>\n\nimport ComponentsHierarchy from \"./ComponentsHierarchy.svelte\";\nimport PagesList from \"./PagesList.svelte\"\nimport EditComponent from \"./EditComponent.svelte\";\nimport { store } from \"../builderStore\";\nimport getIcon from \"../common/icon\";\nimport { isComponent } from \"./pagesParsing/searchComponents\";\nimport IconButton from \"../common/IconButton.svelte\";\nimport Modal from \"../common/Modal.svelte\";\nimport NewComponent from \"./NewComponent.svelte\";\nimport CurrentItemPreview from \"./CurrentItemPreview.svelte\";\nimport SettingsView from \"./SettingsView.svelte\";\nimport PageView from \"./PageView.svelte\";\n\nlet newComponentPicker;  \nconst newComponent = () => {\n    newComponentPicker.show();\n}\n\nlet settingsView;\nconst settings = () => {\n    settingsView.show();\n}\n\n</script>\n\n<div class=\"root\">\n    \n    <div class=\"ui-nav\">\n\n        <div class=\"components-list-container\">\n            <div class=\"nav-group-header\">\n                <div>{@html getIcon(\"sidebar\",\"18\")}</div>\n                <span>COMPONENTS</span>\n                <div>\n                    <IconButton icon=\"settings\" \n                                size=\"14\"\n                                on:click={settings}/>\n                    <IconButton icon=\"plus\" \n                                on:click={newComponent}/>\n                </div>\n            </div>\n            <div class=\"nav-items-container\">\n                <ComponentsHierarchy components={$store.derivedComponents}/>\n            </div>\n        </div>\n\n        <div class=\"pages-list-container\">\n            <div class=\"nav-group-header\">\n                <div>{@html getIcon(\"grid\",\"18\")}</div>\n                <span>PAGES</span>\n            </div>\n            <div class=\"nav-items-container\">\n                <PagesList />\n            </div>\n        </div>\n\n    </div>\n\n    <div>\n        {#if $store.currentFrontEndItem}\n            {#if isComponent($store.currentFrontEndItem)}\n            <CurrentItemPreview />\n            {:else}\n            <PageView />\n            {/if}\n        {/if} \n    </div>\n\n    {#if $store.currentFrontEndItem && isComponent($store.currentFrontEndItem)}\n    <div class=\"properties-pane\">\n        <EditComponent />\n    </div>\n    {/if}\n\n</div>\n\n\n<NewComponent bind:this={newComponentPicker}/>\n<SettingsView bind:this={settingsView} />\n\n\n<style>\n\n.root {\n    display: grid;\n    grid-template-columns: [uiNav] 250px [preview] auto [properties] 300px;\n    height: 100%;\n    width: 100%;\n}\n\n.ui-nav {\n    grid-column-start: uiNav;\n    background-color: var(--primary10);\n    height: 100%;\n}\n\n.properties-pane {\n    grid-column-start: properties;\n    background-color: var(--primary10);\n    height: 100%;\n}\n\n.pages-list-container {\n    padding-top: 20px;\n}\n\n.nav-group-header {\n    font-size: 10pt;\n    padding-left: 10px;\n}\n\n.nav-items-container {\n    padding-top: 10px;\n}\n\n.nav-group-header {\n    display:grid;\n    grid-template-columns: [icon] auto [title] 1fr [button] auto;\n    padding: 10px 2px 0px 7px;\n}\n\n.nav-group-header>div:nth-child(1) {\n    padding:0px 7px 0px 0px;\n    vertical-align: bottom;\n    grid-column-start: icon;\n    margin-right: 5px;\n}\n\n.nav-group-header>span:nth-child(2) {\n    margin-left:5px;\n    vertical-align: bottom;\n    grid-column-start: title;\n    margin-top:auto;\n}\n\n.nav-group-header>div:nth-child(3) {\n    vertical-align: bottom;\n    grid-column-start: button;\n    cursor: pointer;\n    color: var(--slate);\n}\n\n.nav-group-header>div:nth-child(3):hover {\n    color: var(--primary75);   \n}\n\n</style>",
    "<script>\n\nexport let color = \"primary\";\nexport let className = \"\";\nexport let style = \"\";\nexport let groupPosition = \"\";\nexport let grouped = false;\n\n$: borderClass = grouped \n                 ? \"\"\n                 : \"border-normal\";\n\n</script>\n\n<button class=\"{color} {className} {borderClass} {grouped ? \"grouped\" : \"\"}\" \n        style=\"{style}\"\n        on:click >\n    <slot/>\n</button>\n\n<style>\n\n.border-normal { border-radius: var(--borderradiusall); }\n.border-left { border-radius: var(--borderradius) 0 0 var(--borderradius); }\n.border-right { border-radius: 0 var(--borderradius) var(--borderradius) 0; }\n.border-middle { border-radius: 0; }\n\nbutton {  \n    border-style: solid; \n    padding: 7.5px 15px;\n    cursor:pointer;\n    margin:5px;\n    border-radius: 5px;\n}\n\n/* ---- PRIMARY ----*/\n.primary {\n    background-color: var(--primary100);\n    border-color: var(--primary100);\n    color: var(--white);\n}\n\n.primary:hover {\n    background-color: var(--primary75);\n    border-color: var(--primary75);\n}\n\n.primary:active {\n    background-color: var(--primarydark);\n    border-color: var(--primarydark);\n}\n\n.primary-outline {\n    background-color: var(--white);\n    border-color: var(--primary100);\n    color: var(--primary100);\n}\n\n.primary-outline:hover {\n    background-color: var(--primary10);\n}\n\n.primary-outline:pressed {\n    background-color: var(--primary25);\n}\n\n/* ---- secondary ----*/\n\n.secondary {\n    background-color: var(--secondary100);\n    border-color: var(--secondary100);\n    color: var(--white);\n}\n\n.secondary:hover {\n    background-color: var(--secondary75);\n    border-color: var(--secondary75);\n}\n\n.secondary:pressed {\n    background-color: var(--secondarydark);\n    border-color: var(--secondarydark);\n}\n\n.secondary-outline {\n    background-color: var(--white);\n    border-color: var(--secondary100);\n    color: var(--secondary100);\n}\n\n.secondary-outline:hover {\n    background-color: var(--secondary10);\n}\n\n.secondary-outline:pressed {\n    background-color: var(--secondary25);\n}\n\n\n/* ---- success ----*/\n.success {\n    background-color: var(--success100);\n    border-color: var(--success100);\n    color: var(--white);\n}\n\n.success:hover {\n    background-color: var(--success75);\n    border-color: var(--success75);\n}\n\n.success:pressed {\n    background-color: var(--successdark);\n    border-color: var(--successdark);\n}\n\n.success-outline {\n    background-color: var(--white);\n    border-color: var(--success100);\n    color: var(--success100);\n}\n\n.success-outline:hover {\n    background-color: var(--success10);\n}\n\n.success-outline:pressed {\n    background-color: var(--success25);\n}\n\n/* ---- deletion ----*/\n.deletion {\n    background-color: var(--deletion100);\n    border-color: var(--deletion100);\n    color: var(--white);\n}\n\n.deletion:hover {\n    background-color: var(--deletion75);\n    border-color: var(--deletion75);\n}\n\n.deletion:pressed {\n    background-color: var(--deletiondark);\n    border-color: var(--deletiondark);\n}\n\n.deletion-outline {\n    background-color: var(--white);\n    border-color: var(--deletion100);\n    color: var(--deletion100);\n}\n\n.deletion-outline:hover {\n    background-color: var(--deletion10);\n}\n\n.deletion-outline:pressed {\n    background-color: var(--deletion25);\n}\n\n\n</style>",
    "<script>\n\nexport let name = \"\";\n\n</script>\n\n<div>\n    <h4>Coming Sometime: {name}</h4>\n</div>\n\n<style>\n\nh4 {\n    margin-top: 20px;\n}\n\n</style>",
    "<script>\n\nimport HierarchyRow from \"./HierarchyRow.svelte\";\nimport RecordView from \"./RecordView.svelte\";\nimport IndexView from \"./IndexView.svelte\";\nimport ActionsHeader from \"./ActionsHeader.svelte\";\nimport {store} from \"../builderStore\";\nimport getIcon from \"../common/icon\";\nimport DropdownButton from \"../common/DropdownButton.svelte\";\nimport {hierarchy as hierarchyFunctions} from \"../../../core/src\";\n\nconst hierarchyWidth = \"200px\";\n\nconst defaultNewIndexActions =  [{\n    label:\"New Root Index\", \n    onclick: store.newRootIndex\n}];\n\nconst defaultNewRecordActions = [{\n    label:\"New Root Record\", \n    onclick: store.newRootRecord\n}];\n\nlet newIndexActions = defaultNewIndexActions;\nlet newRecordActions = defaultNewRecordActions;\n\nstore.subscribe(db => {\n    if(!db.currentNode || hierarchyFunctions.isIndex(db.currentNode)) {\n        newRecordActions = defaultNewRecordActions;\n        newIndexActions = defaultNewIndexActions;\n    } else {\n        newRecordActions = [\n            ...defaultNewRecordActions,\n            {label: `New Child Record of ${db.currentNode.name}`, \n            onclick: store.newChildRecord}\n        ];\n\n        newIndexActions = [\n            ...defaultNewIndexActions,\n            {label: `New Index on ${db.currentNode.name}`, \n            onclick: store.newChildIndex}\n        ];\n    }\n});\n\n\n</script>\n\n<div class=\"root\">\n    <div class=\"actions-header\">\n        {#if $store.currentNode}\n        <ActionsHeader left={hierarchyWidth}/>\n        {/if}\n    </div>\n    <div class=\"node-view\">\n        {#if !$store.currentNode}\n        <h1 style=\"margin-left: 100px\">:)</h1>\n        {:else if $store.currentNode.type === \"record\"}\n        <RecordView />\n        {:else}\n        <IndexView />\n        {/if}\n    </div>\n</div>\n\n\n<style>\n.root {\n    height: 100%;\n    position: relative;\n}\n\n.actions-header {\n    flex: 0 1 auto;\n}\n\n.node-view {\n    overflow-y: auto;\n    flex: 1 1 auto;\n}\n\n</style>",
    "<script>\n\nimport { store } from \"../builderStore\";\nimport HierarchyRow from \"./HierarchyRow.svelte\";\nimport DropdownButton from \"../common/DropdownButton.svelte\";\nimport {hierarchy as hierarchyFunctions} from \"../../../core/src\";\nimport NavItem from \"./NavItem.svelte\";\n\nconst defaultNewChildActions =  [\n    {\n        label:\"New Root Index\", \n        onclick: store.newRootIndex\n    }, \n    {\n        label:\"New Root Record\", \n        onclick: store.newRootRecord\n    }\n];\n\nlet newChildActions = defaultNewChildActions;\n\nconst setActiveNav = (name) => () => {\n    store.setActiveNav(name);\n}\n\n\nstore.subscribe(db => {\n    if(!db.currentNode || hierarchyFunctions.isIndex(db.currentNode)) {\n        newChildActions = defaultNewChildActions;\n    } else {\n        newChildActions = [\n            {label:\"New Root Record\", \n            onclick: store.newRootRecord},\n            {label: `New Child Record of ${db.currentNode.name}`, \n            onclick: store.newChildRecord},\n            {label:\"New Root Index\", \n            onclick: store.newRootIndex},\n            {label: `New Index on ${db.currentNode.name}`, \n            onclick: store.newChildIndex}\n        ];\n    }\n});\n\n</script>\n\n<div class=\"root\">\n    <div class=\"items-root\">\n        <div class=\"hierarchy\">\n            <div class=\"hierarchy-title-row\">\n                <div class=\"hierarchy-title\">Database</div>\n                <DropdownButton iconName=\"plus\" actions={newChildActions} />\n            </div>\n\n            {#each $store.hierarchy.children as record}\n            <HierarchyRow node={record}\n                        type=\"record\" />\n            {/each}\n\n            {#each $store.hierarchy.indexes as index}\n            <HierarchyRow node={index}\n                        type=\"index\" />\n            {/each}\n\n        </div>\n\n        <NavItem name=\"actions\" label=\"Actions and Triggers\"/>\n        <NavItem name=\"access levels\" label=\"User Levels\"/>\n        <div class=\"space-filler\"></div>\n    </div>\n</div>\n\n<style>\n\n.root {\n    height: 100%;\n    background-color: var(--secondary5);\n}\n\n.items-root {\n    display: flex;\n    flex-direction: column;\n    max-height: 100%;\n    height: 10px;\n}\n\n\n.hierarchy {\n    flex: 1 1 auto;\n}\n\n\n.hierarchy-title-row {\n    padding: 2rem 1rem 0rem 1rem;\n    font-size: 10pt;\n    display: flex;\n    font-weight: bold;\n}\n\n.hierarchy-title {\n    flex: auto 1 1;\n}\n\n\n\n.space-filler {\n    flex: 1 1 auto;\n}\n\n\n</style>",
    "<script>\n\nimport getIcon from \"../common/icon\";\nimport {store} from \"../builderStore\";\nimport Button from \"../common/Button.svelte\";\nimport ButtonGroup from \"../common/ButtonGroup.svelte\";\nimport Actions from \"./Actions.svelte\";\nimport Triggers from \"./Triggers.svelte\";\nimport {getNewAction, getNewTrigger} from \"../common/core\";\n\nlet editingAction = null;\nlet editingActionIsNew = true;\nlet editingTrigger = null;\nlet editingTriggerIsNew = true;\n\nlet getDefaultOptionsHtml = defaultOptions => \n    pipe(defaultOptions, [\n        keys,\n        map(k => `<span style=\"color:var(--slate)\">${k}: </span>${JSON.parse(typeOptions[k])}`),\n        join(\"<br>\")\n    ]);\n\nlet onActionEdit = (action) => {\n    editingAction = action;\n    editingActionIsNew = false;\n}\n\nlet newAction = () => {\n    editingAction = getNewAction();\n    editingActionIsNew = true;\n}\n\nlet onActionDelete = (action) => {\n    store.deleteAction(action);\n}\n\nlet deleteTrigger = () => {}\n\nlet editTrigger = (trigger) => {\n    editingTrigger = trigger;\n    editingTriggerIsNew = false;\n}\n\nlet newTrigger = () => {\n    editingTrigger = getNewTrigger();\n    editingTriggerIsNew = true;\n}\n\nlet onActionSave = action => {\n    store.saveAction(\n            action, \n            editingActionIsNew, \n            editingAction);\n\n    editingAction = null;\n}\n\nlet onActionCancel = () => {\n    editingAction = null;\n}\n\nlet onTriggerSave = trigger => {\n    store.saveTrigger(\n            trigger, \n            editingTriggerIsNew, \n            editingTrigger);\n\n    editingTrigger = null;\n}\n\nlet onTriggerCancel = () => {\n    editingTrigger = null;\n}\n\nlet onTriggerEdit = (trigger) => {\n    editingTrigger = trigger;\n    editingTriggerIsNew = false;\n}\n\n\nlet onTriggerDelete = (trigger) => {\n    store.deleteTrigger(trigger);\n}\n\n</script>\n\n<div class=\"root\">\n\n<ButtonGroup>\n    <Button color=\"primary\" \n            grouped\n            on:click={newAction}>Create New Action</Button>\n    <Button color=\"secondary\" \n            grouped\n            on:click={newTrigger}>Create New Trigger</Button>\n</ButtonGroup>\n\n<Actions {editingActionIsNew} {editingAction} \n         {onActionEdit} {onActionDelete} {onActionSave}\n         {onActionCancel} />\n\n<Triggers {editingTriggerIsNew} {editingTrigger} \n         {onTriggerEdit} {onTriggerDelete} {onTriggerSave}\n         {onTriggerCancel} />\n\n</div>\n\n<style>\n\n.root {\n    padding: 10px;\n}\n\n\n</style>",
    "<script>\n\nimport ButtonGroup from \"../common/ButtonGroup.svelte\";\nimport Button from \"../common/Button.svelte\";\nimport {store} from \"../builderStore\";\nimport {generateFullPermissions, getNewAccessLevel} from \"../common/core\";\nimport getIcon from \"../common/icon\";\nimport AccessLevelView from \"./AccessLevelView.svelte\";\nimport Modal from \"../common/Modal.svelte\";\n\nlet editingLevel = null;\nlet editingLevelIsNew = false;\n$: isEditing = (editingLevel !== null); \n\nlet allPermissions = [];\nstore.subscribe(db => {\n    allPermissions = generateFullPermissions(db.hierarchy, db.actions);\n})\n\nlet onLevelEdit = (level) => {\n    editingLevel = level;\n    editingLevelIsNew = false;\n};\n\nlet onLevelCancel = () => {\n    editingAction = null;\n};\n\nlet onLevelDelete = (level) => {\n    store.deleteLevel(level);\n};\n\n\nlet createNewLevel = () => {\n    editingLevelIsNew = true;\n    editingLevel = getNewAccessLevel();\n}\n\nlet onEditingFinished = (level) => {\n    if(level) {\n        store.saveLevel(level, editingLevelIsNew, editingLevel);\n    }\n    editingLevel = null;\n}\n\nconst getPermissionsString = perms => {\n    return `${perms.length} / ${allPermissions.length}`;\n}\n\n</script>\n\n<div class=\"root\">\n\n<ButtonGroup>\n    <Button grouped color=\"secondary\" on:click={createNewLevel}>Create New Access Level</Button>\n</ButtonGroup>\n\n{#if $store.accessLevels}\n<table class=\"fields-table uk-table uk-table-small\">\n    <thead>\n        <tr>\n            <th>Name</th>\n            <th>Permissions</th>\n            <th></th>\n        </tr>\n    </thead>\n    <tbody>\n        {#each $store.accessLevels as level}\n        <tr>\n            <td >{level.name}</td>\n            <td >{getPermissionsString(level.permissions)}</td>\n            <td class=\"edit-button\">\n                <span on:click={() => onLevelEdit(level)}>{@html getIcon(\"edit\")}</span>\n                <span on:click={() => onLevelDelete(level)}>{@html getIcon(\"trash\")}</span>\n            </td>\n        </tr>\n        {/each}\n    </tbody>\n</table>\n{:else}\n(no actions added)\n{/if}\n\n\n<Modal bind:isOpen={isEditing}>\n    {#if isEditing}\n    <AccessLevelView level={editingLevel}\n                     allPermissions={allPermissions}\n                     onFinished={onEditingFinished}\n                     isNew={editingLevelIsNew}\n                     allLevels={$store.accessLevels}\n                     hierarchy={$store.hierarchy}\n                     actions={$store.actions} />\n    {/if}    \n</Modal>\n\n\n</div>\n\n<style>\n\n.root {\n    padding:10px;\n}\n\n.edit-button {\n    cursor:pointer;\n    color: var(--white);\n}\n\ntr:hover .edit-button  {\n    color: var(--secondary75);\n}\n\n\n</style>",
    "<script>\n\nimport { \n    last, \n    sortBy, \n    filter, \n    map,\n    uniqWith,\n    isEqual,\n    trimCharsStart,\n    trimChars,\n    join,\n    includes\n} from \"lodash/fp\";\n\nimport { pipe } from \"../common/core\";\nimport getIcon from \"../common/icon\";\nimport { store } from \"../builderStore\";\n\nexport let components = []\nexport let thisLevel = \"\";\n\nlet pathPartsThisLevel;\nlet componentsThisLevel;\nlet subfolders;\n\nlet expandedFolders = [];\n\nconst joinPath = join(\"/\");\n\nconst normalizedName = name => pipe(name, [\n        trimCharsStart(\"./\"),\n        trimCharsStart(\"~/\"),\n        trimCharsStart(\"../\"),\n        trimChars(\" \")\n    ]);\n\n\nconst isOnThisLevel = (c) => \n    normalizedName(c.name).split(\"/\").length === pathPartsThisLevel\n    &&\n    (!thisLevel || normalizedName(c.name).startsWith(normalizedName(thisLevel)));\n\nconst notOnThisLevel = (c) => !isOnThisLevel(c);\n\nconst isInSubfolder = (subfolder, c) => \n    normalizedName(c.name).startsWith(\n        trimCharsStart(\"/\")(\n            joinPath([thisLevel, subfolder])));\n\nconst isOnNextLevel = (c) => \n    normalizedName(c.name).split(\"/\").length === pathPartsThisLevel + 1\n\nconst lastPartOfName = (c) => \n    last(c.name.split(\"/\"))\n\nconst subFolder = (c) => {\n    const cname = normalizedName(c.name);\n    const folderName = cname.substring(thisLevel.length, cname.length).split(\"/\")[0];\n\n    return ({\n        name: folderName,\n        isExpanded: includes(folderName)(expandedFolders),\n        path: thisLevel + \"/\" + folderName\n    });\n}\n\nconst subComponents = (subfolder) => pipe(components, [\n        filter(c => isInSubfolder(subfolder, c))\n    ]);\n\nconst expandFolder = folder => {\n    const expandedFolder = {...folder};\n    if(expandedFolder.isExpanded) {\n        expandedFolder.isExpanded = false;\n        expandedFolders = filter(f => f.name !== folder.name)(expandedFolders);\n    } else {\n        expandedFolder.isExpanded = true;\n        expandedFolders.push(folder.name);\n    }\n    const newFolders = [...subfolders];\n    newFolders.splice(\n        newFolders.indexOf(folder),\n        1,\n        expandedFolder);\n    subfolders = newFolders;\n     \n}\n\nconst isComponentSelected = (current,c) =>\n    current \n    && current.name === c.name\n\nconst isFolderSelected = (current, folder) => \n    isInSubfolder(current, folder)\n\n\n\n$: {\n    pathPartsThisLevel = !thisLevel \n                            ? 1\n                            : normalizedName(thisLevel).split(\"/\").length + 1;\n\n    componentsThisLevel = \n        pipe(components, [\n            filter(isOnThisLevel),\n            map(c => ({component:c, title:lastPartOfName(c)})),\n            sortBy(\"title\")\n        ]);\n\n    subfolders = \n        pipe(components, [\n            filter(notOnThisLevel),\n            sortBy(\"name\"),\n            map(subFolder),\n            uniqWith((f1,f2) => f1.path === f2.path)\n        ]);\n}\n\n</script>\n\n<div class=\"root\" style={`padding-left: calc(10px * ${pathPartsThisLevel})`}>\n \n    {#each subfolders as folder}\n    <div class=\"hierarchy-item folder\"\n         on:click|stopPropagation={() => expandFolder(folder)}>\n        <span>{@html getIcon(folder.isExpanded ? \"chevron-down\" : \"chevron-right\", \"16\")}</span>\n        <span class=\"title\" class:currentfolder={$store.currentFrontEndItem && isInSubfolder(folder.name, $store.currentFrontEndItem)}>{folder.name}</span>\n        {#if folder.isExpanded}\n        <svelte:self components={subComponents(folder.name)} \n                     thisLevel={folder.path} />\n        {/if}\n    </div>\n    {/each}\n\n    {#each componentsThisLevel as component}\n    <div class=\"hierarchy-item component\" class:selected={isComponentSelected($store.currentFrontEndItem, component.component)}\n         on:click|stopPropagation={() => store.setCurrentComponent(component.component)}>\n        <span>{@html getIcon(\"circle\", \"7\")}</span>\n        <span class=\"title\">{component.title}</span>\n    </div>\
    "<script>\n\nimport PropsView from \"./PropsView.svelte\";\nimport { store } from \"../builderStore\";\nimport { isRootComponent } from \"./pagesParsing/searchComponents\";\nimport IconButton from \"../common/IconButton.svelte\";\nimport Textbox from \"../common/Textbox.svelte\";\nimport UIkit from \"uikit\";\nimport { pipe } from \"../common/core\";\nimport {\n    getComponentInfo\n} from \"./pagesParsing/createProps\";\nimport Button from \"../common/Button.svelte\";\nimport ButtonGroup from \"../common/ButtonGroup.svelte\";\nimport ComponentInstanceEditor from \"./ComponentInstanceEditor.svelte\";\n\nimport { \n    cloneDeep, \n    join,\n    split,\n    map,\n    keys,\n    isUndefined,\n    last\n} from \"lodash/fp\";\nimport { assign } from \"lodash\";\n\nlet component;\nlet name = \"\";\nlet description = \"\";\nlet tagsString = \"\";\nlet nameInvalid = \"\";\nlet componentDetailsExpanded = false;\nlet componentInfo;\nlet modalElement\nlet propsValidationErrors = [];\nlet editingComponentInstance;\nlet editingComponentInstancePropName=\"\";\nlet allComponents;\n\n$: shortName = last(name.split(\"/\"));\n\nstore.subscribe(s => {\n    component = s.currentFrontEndItem;\n    if(!component) return;\n    name = component.name;\n    description = component.description;\n    tagsString = join(\", \")(component.tags);\n    componentInfo = s.currentComponentInfo;\n    componentDetailsExpanded = s.currentComponentIsNew;\n    allComponents = s.allComponents;\n});\n\nconst save = () => {\n\n    if(!validate()) return;\n\n    component.name = name;\n    component.description = description;\n    component.tags = pipe(tagsString, [\n        split(\",\"),\n        map(s => s.trim())\n    ]);\n\n    store.saveDerivedComponent(component);\n}\n\nconst deleteComponent = () => {\n    showDialog();\n}\n\nconst confirmDeleteComponent = () => {\n    store.deleteDerivedComponent(component.name);\n    hideDialog();\n}\n\nconst onPropsValidate = result => {\n    propsValidationErrors = result;\n}\n\nconst updateComponent = doChange => {\n    const newComponent = cloneDeep(component);\n    doChange(newComponent);\n    component = newComponent;\n    componentInfo = getComponentInfo(allComponents, newComponent);\n}\n\nconst onPropsChanged = newProps => {\n    updateComponent(newComponent => \n        assign(newComponent.props, newProps));\n    \n}\n\nconst validate = () => {\n    const fieldInvalid = (field, err) => \n        errors[field] = err;\n    const fieldValid = field => \n        errors[field] && delete errors[field];\n\n    if(!name) nameInvalid = \"component name i not supplied\";\n    else nameInvalid = \"\";\n\n    return (!nameInvalid && propsValidationErrors.length === 0);\n}\n\nconst hideDialog = () => {\n    UIkit.modal(modalElement).hide();\n}\n\nconst showDialog = () => {\n    UIkit.modal(modalElement).show();\n}\n\nconst onEditComponentProp = (propName, arrayIndex, arrayPropName) => {\n\n    editingComponentInstance = isUndefined(arrayIndex) \n                               ? component.props[propName]\n                               : component.props[propName][arrayIndex][arrayPropName];\n    editingComponentInstancePropName = isUndefined(arrayIndex)\n                                       ? propName\n                                       : `${propName}[${arrayIndex}].${arrayPropName}`;\n}\n\nconst componentInstanceCancelEdit = () => {\n    editingComponentInstance = null;\n    editingComponentInstancePropName = \"\";\n}\n\nconst componentInstancePropsChanged = (instanceProps) => {\n    updateComponent(newComponent => \n        newComponent.props[editingComponentInstancePropName] = instanceProps);\n}\n\n</script>\n\n<div class=\"root\">\n\n    <div class=\"title\">\n        <div>{shortName}</div>\n        <div>\n            <IconButton icon=\"save\" \n                        on:click={save} \n                        color=\"var(--primary100)\"\n                        hoverColor=\"red\"/>\n            <IconButton icon=\"trash\" \n                        on:click={deleteComponent} \n                        color=\"var(
    "<script>\nimport { store } from \"../builderStore\";\nimport getIcon from \"../common/icon\";\n\nconst getPage = (s, name) => {\n    const props = s.pages[name];\n    return ({name, props});\n}\n\n</script>\n\n<div class=\"root\">\n    <div class=\"hierarchy-item component\" class:selected={$store.currentFrontEndItem && $store.currentPageName === \"main\"}\n            on:click|stopPropagation={() => store.setCurrentPage(\"main\")}>\n        <span>{@html getIcon(\"circle\", \"7\")}</span>\n        <span class=\"title\">Main</span>\n    </div>\n\n    <div class=\"hierarchy-item component\" class:selected={$store.currentFrontEndItem && $store.currentPageName === \"unauthenticated\"}\n            on:click|stopPropagation={() => store.setCurrentPage(\"unauthenticated\")}>\n        <span>{@html getIcon(\"circle\", \"7\")}</span>\n        <span class=\"title\">Login</span>\n    </div>\n\n</div>\n\n<style>\n\n.root {\n    padding-bottom: 10px;\n    padding-left: 10px;\n    font-size: 16px;\n    color: var(--secondary50);\n}\n\n.hierarchy-item {\n    cursor: pointer;\n    padding: 5px 0px;\n}\n\n.hierarchy-item:hover {\n    color: var(--secondary75);\n}\n\n.component {\n    margin-left: 5px;\n}\n\n.selected {\n    color: var(--primary100);\n}\n\n\n.title {\n    margin-left: 10px;\n}\n\n</style>",
    "<script>\n\nimport ComponentSearch from \"./ComponentSearch.svelte\";\nimport { store } from \"../builderStore\";\nimport PropsView from \"./PropsView.svelte\";\nimport Textbox from \"../common/Textbox.svelte\";\nimport Button from \"../common/Button.svelte\";\nimport ButtonGroup from \"../common/ButtonGroup.svelte\";\nimport { pipe } from \"../common/core\";\nimport UIkit from \"uikit\";\nimport {\n    getNewComponentInfo\n} from \"./pagesParsing/createProps\";\nimport { isRootComponent } from \"./pagesParsing/searchComponents\";\n\nimport { \n    cloneDeep, \n    join,\n    split,\n    map,\n    keys,\n    isUndefined\n} from \"lodash/fp\";\nimport { assign } from \"lodash\";\n\n\n\nlet modalElement;\nlet allComponents;\n\nstore.subscribe(s => {\n    allComponents = s.allComponents;\n})\n\nexport const close = () => {\n    UIkit.modal(modalElement).hide();\n}\n\nexport const show = () => {\n    UIkit.modal(modalElement).show();\n}\n\nconst onComponentChosen = (c) => {\n    store.createDerivedComponent(c.name);\n    close();\n}\n\n</script>\n\n<div bind:this={modalElement} id=\"new-component-modal\" uk-modal>\n    <div class=\"uk-modal-dialog\">\n\n        <div class=\"uk-modal-header\">\n            <h1>New Component</h1>\n        </div>\n\n        <div class=\"uk-modal-body\">\n            <ComponentSearch onComponentChosen={onComponentChosen} />\n        </div>\n    </div>\n</div>\n\n<style>\nh1 {\n    font-size:1.2em;\n}\n\n</style>",
    "<script>\nimport { store } from \"../builderStore\";\nimport { makeLibraryUrl } from \"../builderStore/loadComponentLibraries\";\nimport {\n    last,\n    split,\n    map,\n    join\n} from \"lodash/fp\";\nimport { pipe } from \"../common/core\";\nimport { splitName } from \"./pagesParsing/splitRootComponentName\"\nimport { afterUpdate } from 'svelte';\nimport { getRootComponent } from \"./pagesParsing/getRootComponent\";\n\nif(!window.budibaseIframeConnector) {\n    window.budibaseIframeConnector = {\n        initialiseComponent(props, htmlElement) {\n             const rootComponent = getRootComponent(\n                 props._component, allComponents);\n\n             const {componentName, libName} = splitName(\n                rootComponent.name);\n\n            new (libraries[libName][componentName])({\n                target: htmlElement,\n                props: {...props, _app: window.budibaseIframeConnector}\n            });\n        }\n    }\n}\n\nlet component;\nlet stylesheetLinks = \"\";\nlet componentHtml = \"\";\nlet props;\nlet componentLibraryUrl = \"\";\nlet rootComponentName = \"\";\nlet iframe;\nlet libraries;\nlet allComponents;\n\n\nstore.subscribe(s => {\n    const {componentName, libName} = splitName(\n        s.currentComponentInfo.rootComponent.name);\n\n    rootComponentName = componentName;\n    props = s.currentComponentInfo.fullProps;\n    component = s.libraries[libName][componentName];\n    stylesheetLinks = pipe(s.pages.stylesheets, [\n        map(s => `<link rel=\"stylesheet\" href=\"${s}\"/>`),\n        join(\"\\n\")\n    ]);\n    componentLibraryUrl = makeLibraryUrl(s.appname, libName);\n    libraries = s.libraries;\n    allComponents = s.allComponents;\n});\n\n/*\nafterUpdate(() => {\n    if(iframe) iframeLoaded();\n});\n*/\n\nconst iframeLoaded = () => {\n    setTimeout(() => {\n        iframe.style.height = (iframe.contentWindow.document.body.scrollHeight + 1).toString() + \"px\";\n        iframe.style.width = (iframe.contentWindow.document.body.scrollWidth + 1).toString() + \"px\";\n    }, 100);\n}\n\n</script>\n\n<div class=\"component-preview\" >\n    <div class=\"component-container\">\n        <iframe bind:this={iframe}\n                on:load={iframeLoaded}\n                title=\"componentPreview\"\n                srcdoc={\n`<html>\n    \n<head>\n    ${stylesheetLinks}\n    <script>\n    \n        import('${componentLibraryUrl}')\n        .then(module => {\n            const componentClass = module['${rootComponentName}'];\n            const instance = new componentClass({\n                target: document.body,\n                props: {...${JSON.stringify(props)}, _app: window.parent.budibaseIframeConnector}\n            }) ;\n        })\n        \n    </script>\n</head>\n<body>\n</body>\n</html>`}>\n        </iframe>\n    </div>\n</div>\n\n<style>\n.component-preview {\n    display: grid;\n    grid-template-rows: [top] 1fr [middle] auto [bottom] 1fr;\n    grid-template-columns: [left] 1fr [middle] auto [right] 1fr;\n    grid-column-start: preview;\n    height:100%;\n}\n\n.component-container {\n    grid-row-start: middle;\n    grid-column-start: middle;\n}\n\n</style>",
    "<script>\n\nimport Textbox from \"../common/Textbox.svelte\";\nimport Dropdown from \"../common/Dropdown.svelte\";\nimport Button from \"../common/Button.svelte\";\nimport { store } from \"../builderStore\";\nimport { isRootComponent } from \"./pagesParsing/searchComponents\";\nimport { pipe } from \"../common/core\";\nimport {\n    filter, find, concat\n} from \"lodash/fp\";\n\nlet entryComponent;\nlet title = \"\";\nlet components = [];\n\nconst notSeletedComponent = {name:\"(none selected)\"};\n\nstore.subscribe(s => {\n    title = s.currentFrontEndItem.index.title;\n    components = pipe(s.allComponents, [\n        filter(s => !isRootComponent(s)),\n        concat([notSeletedComponent])\n    ]);\n    entryComponent = find(c => c.name === s.currentFrontEndItem.appBody)(components);\n    if(!entryComponent) entryComponent = notSeletedComponent;\n});\n\nconst save = () => {\n    if(!title || !entryComponent || entryComponent === notSeletedComponent) return;\n    const page = {\n        index: {\n            title\n        },\n        appBody: entryComponent.name,\n    }\n    store.savePage(page);\n}\n\n</script>\n\n<div class=\"root\">\n\n    <h3>{$store.currentPageName}</h3>\n\n    <form class=\"uk-form-horizontal\">\n        <Textbox bind:text={title} label=\"Title\" hasError={!title}/>\n        <div class=\"help-text\">The title of your page, displayed in the bowser tab</div>\n        <Dropdown label=\"App Entry Component\"\n                options={components}\n                bind:selected={entryComponent}\n                textMember={(v) => v.name} />\n\n        <div class=\"help-text\">The component that will be loaded into the body of the page</div>\n        <div style=\"margin-top: 20px\"></div>\n        <Button on:click={save}>Save</Button>\n    </form>\n\n</div>\n\n<style>\n.root {\n    padding: 15px;\n}\n.help-text {\n    color: var(--slate);\n    font-size: 10pt;\n}\n</style>",
    "<script>\n\nimport { store } from \"../builderStore\";\nimport Textbox from \"../common/Textbox.svelte\";\nimport Button from \"../common/Button.svelte\";\nimport IconButton from \"../common/IconButton.svelte\";\nimport { libraryDependencies } from \"./pagesParsing/findDependencies\";\nimport UIkit from \"uikit\";\n\nlet addNewLib = \"\";\nlet addNewStylesheet = \"\";\nlet addComponentError = \"\";\nlet modalElement;\nlet allComponents;\n\nstore.subscribe(s => {\n    allComponents = s.allComponents;\n})\n\nconst removeLibrary = lib => {\n    const dependencies = libraryDependencies(allComponents, lib);\n    if(dependencies.length > 0) return;\n    store.removeComponentLibrary(lib);\n}\n\nconst addLib = () => {\n    store.addComponentLibrary(addNewLib)\n    .then(() => {\n        addNewLib = \"\";\n    });  \n}\n\nconst removeStylesheet = stylesheet => {\n    store.removeStylesheet(stylesheet);\n}\n\nconst addStylesheet = () => {\n    if(addNewStylesheet)\n        store.addStylesheet(addNewStylesheet);\n}\n\nexport const close = () => {\n    UIkit.modal(modalElement).hide();\n}\n\nexport const show = () => {\n    UIkit.modal(modalElement).show();\n}\n\n</script>\n\n<div bind:this={modalElement} id=\"new-component-modal\" uk-modal>\n    <div class=\"uk-modal-dialog\">\n\n        <div class=\"uk-modal-header header\">\n            <div>Settings</div>\n            <div>\n                <IconButton icon=\"x\"\n                            on:click={close}/>\n            </div>\n        </div>\n\n        <div class=\"uk-modal-body uk-form-horizontal\">\n\n            <div class=\"section-container\">\n                <p>Component Libraries\n                    <span>\n                        <input bind:value={addNewLib} /> \n                        <Button color=\"primary-outline\"\n                                on:click={addLib}>Add</Button>\n                    </span>\n                </p>\n                {#each $store.pages.componentLibraries as lib}\n                <div>\n                    <span class=\"row-text\">{lib}</span>\n                    <IconButton icon=\"x\" \n                                on:click={() => removeLibrary(lib)}/>\n                </div>\n                {/each}\n            </div>\n            \n\n            <div class=\"section-container\">\n                <p>Stylesheets\n                    <span>\n                        <input bind:value={addNewStylesheet} /> \n                        <Button color=\"primary-outline\"\n                                    on:click={addStylesheet} >Add</Button>\n                    </span>\n                </p>\n                {#each $store.pages.stylesheets as stylesheet}\n                <div>\n                    <span class=\"row-text\">{stylesheet}</span>\n                    <IconButton icon=\"x\" \n                                on:click={() => removeStylesheet(stylesheet)}/>\n                </div>\n                {/each}\n            </div>\n\n            \n        </div>\n    </div>\n</div>\n\n<style>\n\n.section-container {\n    padding: 15px;\n    border-style: dotted;\n    border-width: 1px;\n    border-color: var(--lightslate);\n    border-radius: 2px;\n}\n\n.section-container:nth-child(1) {\n    margin-bottom: 15px;\n}\n\n.row-text {\n    margin-right: 15px;\n    color: var(--primary100);\n}\n\ninput {\n    margin-right: 15px;\n}\n\np > span {\n    margin-left: 30px;\n}\n\n.header {\n    display: grid;\n    grid-template-columns: [title] 1fr [icon] auto;\n}\n\n.header > div:nth-child(1) {\n    grid-column-start: title;\n}\n\n.header > div:nth-child(2) {\n    grid-column-start: icon;\n}\n\n</style>",
    "<script>\n\nimport Textbox from \"../common/Textbox.svelte\";\nimport Button from \"../common/Button.svelte\";\nimport getIcon from \"../common/icon\";\nimport FieldView from \"./FieldView.svelte\";\nimport Modal from \"../common/Modal.svelte\";\nimport {map, join, filter, some, \n    find, keys, isDate} from \"lodash/fp\";\nimport { store } from \"../builderStore\";\nimport {common, hierarchy as h} from \"../../../core/src\";\nimport {templateApi, pipe, validate} from \"../common/core\";\n\nlet record;\nlet getIndexAllowedRecords;\nlet editingField = false;\nlet fieldToEdit;\nlet isNewField = false;\nlet newField;\nlet editField;\nlet deleteField;\nlet onFinishedFieldEdit;\nlet editIndex;\n\nstore.subscribe($store => {\n    record = $store.currentNode;\n    const flattened = h.getFlattenedHierarchy($store.hierarchy);\n    getIndexAllowedRecords = index => \n        pipe(index.allowedRecordNodeIds, [\n            filter(id => some(n => n.nodeId === id)(flattened)),\n            map(id => find(n => n.nodeId === id)\n                          (flattened).name),\n            join(\", \")\n        ]);\n\n    newField = () => {\n        isNewField = true;\n        fieldToEdit = templateApi($store.hierarchy).getNewField(\"string\");\n        editingField = true;\n    }\n\n    onFinishedFieldEdit = (field) => {\n        if(field) {\n            store.saveField(field);\n        }\n        editingField = false;\n    }\n\n    editField = (field) => {\n        isNewField = false;\n        fieldToEdit = field;\n        editingField = true;\n    }\n\n    deleteField = (field) => {\n        store.deleteField(field);\n    }\n\n    editIndex = index => {\n        store.selectExistingNode(index.nodeId);\n    }\n\n})\n\nlet getTypeOptionsValueText = value => {\n    if(value === Number.MAX_SAFE_INTEGER\n       || value === Number.MIN_SAFE_INTEGER\n       || new Date(value).getTime() === new Date(8640000000000000).getTime()\n       || new Date(value).getTime() === new Date(-8640000000000000).getTime()) return \"(any)\";\n    \n    if(value === null) return \"(not set)\";\n    return value;\n}\n\nlet getTypeOptions = typeOptions => \n    pipe(typeOptions, [\n        keys,\n        map(k => `<span style=\"color:var(--slate)\">${k}: </span>${getTypeOptionsValueText(typeOptions[k])}`),\n        join(\"<br>\")\n    ]);\n\n\n</script>\n\n<div class=\"root\">\n\n    <form class=\"uk-form-horizontal\">\n        <h3 class=\"settings-title\">\n        Settings \n    </h3>\n    \n        <Textbox label=\"Name:\" bind:text={record.name} />\n        {#if !record.isSingle}\n        <Textbox label=\"Collection Name:\" bind:text={record.collectionName} />\n        <Textbox label=\"Shard Factor:\" bind:text={record.allidsShardFactor} />\n        {/if}\n        <div class=\"recordkey\">{record.nodeKey()}</div>\n\n    </form>\n    <h3 class=\"title\">\n        Fields <span class=\"add-field-button\" on:click={newField}>{@html getIcon(\"plus\")}</span>\n    </h3>\n\n    {#if record.fields.length > 0}\n    <table class=\"fields-table uk-table\">\n        <thead>\n            <tr>\n                <th>Name</th>\n                <th>Type</th>\n                <th>Options</th>\n                <th></th>\n            </tr>\n        </thead>\n        <tbody>\n            {#each record.fields as field}\n            <tr>\n                <td >\n                    <div>{field.label}</div>\n                    <div style=\"font-size: 0.7em; color: var(--slate)\">{field.name}</div>\n                </td>\n                <td >{field.type}</td>\n                <td >{@html getTypeOptions(field.typeOptions)}</td>\n                <td>\n                    <span class=\"edit-button\" on:click={() => editField(field)}>{@html getIcon(\"edit\")}</span>\n                    <span class=\"edit-button\" on:click={() => deleteField(field)}>{@html getIcon(\"trash\")}</span>\n                </td>\n            </tr>\n            {/each}\n        </tbody>\n    </table>\n    {:else}\n    (no fields added)\n    {/if}\n\n    {#if editingField}\n    <Modal bind:isOpen={editingFiel
    "<script>\n\nimport {store} from \"../builderStore\";\nimport {cloneDeep} from \"lodash\";\nexport let level = 0;\nexport let node;\n\n</script>\n\n<div class=\"root\">\n    <div class=\"title\" on:click={() => store.selectExistingNode(node.nodeId)} style=\"padding-left: {20 + (level * 20)}px\">\n        {node.name}\n    </div>\n    {#if node.children}\n    {#each node.children as child}\n    <svelte:self node={child} \n                 level={level+1}/>\n    {/each}\n    {/if}\n</div>\n\n\n<style>\n\n.root { \n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    cursor: pointer;\n}\n\n.title {\n    font: var(--fontblack);\n    padding-top: 10px;\n    padding-right: 5px;\n    padding-bottom: 10px;\n    color: var(--secondary100);\n}\n\n.title:hover {\n    background-color: var(--secondary10);\n}\n\n</style>",
    "<script>\nimport Button from \"../common/Button.svelte\";\nimport ButtonGroup from \"../common/ButtonGroup.svelte\";\nimport {store} from \"../builderStore\";\nimport Modal from \"../common/Modal.svelte\";\nimport ErrorsBox from \"../common/ErrorsBox.svelte\";\n\nexport let left;\nlet confirmDelete = false;\nconst openConfirmDelete = () => {\n    confirmDelete = true;\n}\n\nconst deleteCurrentNode = () => {\n    confirmDelete = false;\n    store.deleteCurrentNode();\n}\n\n</script>\n\n<div class=\"root\" style=\"left: {left}\">\n\n    <ButtonGroup>\n        <Button color=\"secondary\" grouped on:click={store.saveCurrentNode}>\n            {#if $store.currentNodeIsNew}\n            Create\n            {:else}\n            Update\n            {/if}\n        </Button>\n\n        {#if !$store.currentNodeIsNew}\n        <Button color=\"tertiary\" grouped on:click={openConfirmDelete}>\n            Delete\n        </Button>\n        {/if}\n    </ButtonGroup>\n\n    {#if !!$store.errors && $store.errors.length > 0}\n    <div style=\"width: 500px\">\n        <ErrorsBox errors={$store.errors}/>\n    </div>\n    {/if}\n    \n    <Modal bind:isOpen={confirmDelete}>\n        <div style=\"margin: 10px 0px 20px 0px\">Are you sure you want to delete {$store.currentNode.name} ?</div>\n        <div style=\"float:right\">\n            <Button color=\"primary\"  on:click={deleteCurrentNode}>Yes</Button>\n            <Button color=\"secondary\" on:click={() => confirmDelete = false}>No</Button>\n        </div>\n    </Modal>\n</div>\n\n<style>\n\n.root {\n    padding: 1.5rem;\n    width: 100%;\n    align-items: right;\n    }\n\n</style>",
    "<script>\n\nimport Textbox from \"../common/Textbox.svelte\";\nimport CodeArea from \"../common/CodeArea.svelte\";\nimport Button from \"../common/Button.svelte\";\nimport Dropdown from \"../common/Dropdown.svelte\";\nimport {store} from \"../builderStore\";\nimport {filter, some, map} from \"lodash/fp\";\nimport {hierarchy as hierarchyFunctions, common} from \"../../../core/src\";\n\nconst pipe = common.$;\n\nlet index;\nlet indexableRecords = [];\n\nstore.subscribe($store => {\n    index = $store.currentNode;\n    indexableRecords = pipe($store.hierarchy,[\n        hierarchyFunctions.getFlattenedHierarchy,\n        filter(hierarchyFunctions.isDecendant(index.parent())),\n        filter(hierarchyFunctions.isRecord),\n        map(n => ({\n            node:n,\n            isallowed: some(id => n.nodeId === id)(index.allowedRecordNodeIds)\n        }))\n    ]);\n});\n\nconst toggleAllowedRecord = record => {\n    if(record.isallowed) {\n        index.allowedRecordNodeIds = filter(id => id !== record.node.nodeId)\n                                           (index.allowedRecordNodeIds);\n    } else {\n        index.allowedRecordNodeIds.push(record.node.nodeId);\n    }\n};\n\n</script>\n\n<form class=\"uk-form-horizontal root\">\n    <Textbox bind:text={index.name} label=\"Name\"/>\n    \n    <div class=\"allowed-records\">\n        <div>Records to Index</div>\n        {#each indexableRecords as rec}\n        <input type=\"checkbox\" checked={rec.isallowed} on:change={() => toggleAllowedRecord(rec)}/>\n        <span>{rec.node.name}</span>\n        {/each}\n    </div>\n\n\n    <Dropdown label=\"Index Type\" bind:selected={index.indexType} options={[\"ancestor\", \"reference\"]} />\n\n    <CodeArea bind:text={index.map} label=\"Map (javascript)\"/>\n    <CodeArea bind:text={index.filter} label=\"Filter (javascript expression)\"/>\n    <CodeArea bind:text={index.getShardName} label=\"Shard Name (javascript expression)\"/>\n\n    \n</form>\n\n<style>\n\n.root {\n    height: 100%;\n    padding: 15px;\n}\n\n.allowed-records {\n    margin: 20px 0px;\n}\n\n.allowed-records > span {\n    margin-right:30px;\n}\n\n</style>",
    "<script>\n\nimport getIcon from \"./icon\";\nexport let iconName;\nexport let actions = []; // [ {label: \"Action Name\", onclick: () => {...} } ]\nlet isDroppedDown = false;\n\n</script>\n\n\n<div class=\"root\" on:click={() => isDroppedDown = !isDroppedDown}>\n    {@html getIcon(iconName)}\n    \n    <div class=\"dropdown-background\" on:click|stopPropagation={() => isDroppedDown = false} style=\"display: {isDroppedDown ? 'block' : 'none'}\"></div>\n\n    <div class=\"dropdown-content\" style=\"display: {isDroppedDown ? 'inline-block' : 'none'}\">\n        {#each actions as action}\n        <div class=\"action-row\" on:click={action.onclick}>\n            {action.label}\n        </div>\n        {/each}\n    </div>\n    \n</div>\n\n\n<style>\n\n.dropdown-background {\n    position: fixed;\n    top:0;\n    left:0;\n    width:100vw;\n    height:100vh;\n}\n\n.root {\n    cursor: pointer;\n    z-index: 1;\n}\n\n.dropdown-content {\n    position: absolute;\n    background-color: var(--white);\n    min-width: 160px;\n    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n    z-index: 1;\n    font-weight: normal;\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--secondary10);\n}\n\n.dropdown-content:not(:focus) {\n    display: none;\n}\n\n.action-row {\n    padding: 7px 10px;\n    cursor:pointer;\n}\n\n.action-row:hover {\n    background-color: var(--primary100);\n    color:var(--white);\n}\n\n</style>",
    "<script>\n\nimport {store} from \"../builderStore\";\nimport {cloneDeep} from \"lodash\";\nimport getIcon from \"../common/icon\";\nexport let level = 0;\nexport let node;\nexport let type;\n\nlet navActive = \"\";\n$:icon = type===\"index\" ? \"list\" : \"file\";\n\nstore.subscribe(s => {\n    if(s.currentNode)\n        navActive = (s.activeNav === \"database\" && node.nodeId === s.currentNode.nodeId \n                    ? \"active\" : \"\")\n});\n\n</script>\n\n<div class=\"root\">\n    <div class=\"title {navActive}\" on:click={() => store.selectExistingNode(node.nodeId)} style=\"padding-left: {20 + (level * 20)}px\">\n        {@html getIcon(icon, 12)} <span style=\"margin-left: 5px\">{node.name}</span>\n    </div>\n    {#if node.children}\n        {#each node.children as child}\n        <svelte:self node={child} \n                    level={level+1}\n                    type=\"record\"/>\n        {/each}\n    {/if}\n    {#if node.indexes}\n        {#each node.indexes as index}\n        <svelte:self node={index} \n                    level={level+1}\n                    type=\"index\"/>\n        {/each}\n    {/if}\n</div>\n\n\n<style>\n\n.root { \n    display: block;\n    font-size: 10pt;\n    width: 100%;\n    cursor: pointer;\n}\n\n.title {\n    padding-top: .5rem;\n    padding-right: .5rem;\n    color: var(--secondary100);\n}\n\n.title:hover {\n    background-color: var(--secondary10);\n}\n\n.active {\n    background-color: var(--primary10);\n}\n\n</style>",
    "<script>\n\nimport {store} from \"../builderStore\";\nimport getIcon from \"../common/icon\";\n\nexport let name = \"\";\nexport let label = \"\";\n\nlet navActive = \"\";\n\nstore.subscribe(db => {\n    navActive = (db.activeNav === name ? \"active\" : \"\")\n});\n\nconst setActive = () => \n    store.setActiveNav(name);\n\n</script>\n\n<div class=\"nav-item {navActive}\" on:click={setActive}>\n    {label}\n</div>\n\n\n<style>\n\n.nav-item {\n    padding: 1rem 1rem 0rem 1rem;\n    font-size: 10pt;\n    font-weight: bold;\n    cursor: pointer;\n    flex: 0 0 auto;\n}\n\n.nav-item:hover {\n    background-color: var(--primary10);\n}\n\n.active {\n    background-color: var(--primary10);\n}\n\n</style>",
    "<script>\nexport let style=\"\";\n</script>\n\n<div class=\"root\" style={style}>\n    <slot />\n</div>\n\n<style>\n\n.root {\n    display: flex;\n}\n\n.root:last-child {\n    border-radius: 0 var(--borderradius) var(--borderradius) 0;\n}\n\n.root:first-child {\n    border-radius: var(--borderradius) 0 0 var(--borderradius); \n}\n\n.root:not(:first-child):not(:last-child) {\n    border-radius: 0;\n}\n\n</style>",
    "<script>\n\nimport {store} from \"../builderStore\";\nimport getIcon from \"../common/icon\";\nimport Button from \"../common/Button.svelte\";\nimport Modal from \"../common/Modal.svelte\";\nimport TriggerView from \"./TriggerView.svelte\";\n\n\nexport let editingTrigger = null;\nexport let editingTriggerIsNew = true;\nexport let onTriggerEdit = (trigger) => {};\nexport let onTriggerDelete = (trigger) => {};\nexport let onTriggerSave = (trigger) => {};\nexport let onTriggerCancel = () => {};\n\n$: isEditing = (editingTrigger !== null); \n\nlet triggerEditingFinished = (trigger) => {\n    \n    if(trigger) {\n        onTriggerSave(trigger)\n    } else {\n        onTriggerCancel();\n    }\n}\n\n</script>\n\n<h3>Triggers</h3>\n\n{#if $store.triggers}\n<table class=\"fields-table uk-table uk-table-small\">\n    <thead>\n        <tr>\n            <th>Event</th>\n            <th>Action</th>\n            <th>Condition</th>\n            <th>Create Options</th>\n            <th></th>\n        </tr>\n    </thead>\n    <tbody>\n        {#each $store.triggers as trigger}\n        <tr>\n            <td >{trigger.eventName}</td>\n            <td >{trigger.actionName}</td>\n            <td >{trigger.condition}</td>\n            <td >{trigger.optionsCreator}</td>\n            <td class=\"edit-button\">\n                <span on:click={() => onTriggerEdit(trigger)}>{@html getIcon(\"edit\")}</span>\n                <span on:click={() => onTriggerDelete(trigger)}>{@html getIcon(\"trash\")}</span>\n            </td>\n        </tr>\n        {/each}\n    </tbody>\n</table>\n{:else}\n(no triggers added)\n{/if}\n\n\n<Modal bind:isOpen={isEditing}>\n    {#if isEditing}\n    <TriggerView trigger={editingTrigger}\n                allActions={$store.actions}\n                allTriggers={$store.triggers}\n                onFinished={triggerEditingFinished}\n                isNew={editingTriggerIsNew}/>\n    {/if}    \n</Modal>\n\n<style>\n\n.edit-button {\n    cursor:pointer;\n    color: var(--white);\n}\n\ntr:hover .edit-button  {\n    color: var(--secondary75);\n}\n\n</style>",
    "<script>\n\nimport getIcon from \"../common/icon\";\nimport {store} from \"../builderStore\";\nimport Button from \"../common/Button.svelte\";\nimport ButtonGroup from \"../common/ButtonGroup.svelte\";\nimport ActionView from \"./ActionView.svelte\";\nimport Modal from \"../common/Modal.svelte\";\nimport {pipe} from \"../common/core\";\nimport {keys, map, join} from \"lodash/fp\";\n\nexport let editingActionIsNew = false;\nexport let editingAction = null;\nexport let onActionEdit = (action) => {};\nexport let onActionDelete = (action) => {};\nexport let onActionSave = (action) => {};\nexport let onActionCancel = () => {};\n\n$: isEditing = (editingAction !== null); \n\nlet actionsArray = [];\nstore.subscribe(s => {\n    actionsArray = pipe(s.actions, [\n        keys,\n        map(k => s.actions[k])\n    ]);\n});\n\nlet getDefaultOptionsHtml = defaultOptions => \n    pipe(defaultOptions, [\n        keys,\n        map(k => `<span style=\"color:var(--slate)\">${k}: </span>${JSON.stringify(defaultOptions[k])}`),\n        join(\"<br>\")\n    ]);\n\n\nlet actionEditingFinished = (action) => {\n    \n    if(action) {\n        onActionSave(action)\n    } else {\n        onActionCancel();\n    }\n}\n\n</script>\n\n<h3>Actions</h3>\n\n{#if actionsArray}\n<table class=\"fields-table uk-table uk-table-small\">\n    <thead>\n        <tr>\n            <th>Description</th>\n            <th>Behaviour Source</th>\n            <th>Behaviour Name</th>\n            <th>Default Options</th>\n            <th></th>\n        </tr>\n    </thead>\n    <tbody>\n        {#each actionsArray as action}\n        <tr>\n            <td >{action.name}</td>\n            <td >{action.behaviourSource}</td>\n            <td >{action.behaviourName}</td>\n            <td >{@html getDefaultOptionsHtml(action.initialOptions)}</td>\n            <td class=\"edit-button\">\n                <span on:click={() => onActionEdit(action)}>{@html getIcon(\"edit\")}</span>\n                <span on:click={() => onActionDelete(action)}>{@html getIcon(\"trash\")}</span>\n            </td>\n        </tr>\n        {/each}\n    </tbody>\n</table>\n{:else}\n(no actions added)\n{/if}\n\n\n<Modal bind:isOpen={isEditing}>\n    {#if isEditing}\n    <ActionView action={editingAction}\n                allActions={$store.actions}\n                onFinished={actionEditingFinished}\n                isNew={editingActionIsNew}/>\n    {/if}    \n</Modal>\n\n\n<style>\n\n.edit-button {\n    cursor:pointer;\n    color: var(--white);\n}\n\ntr:hover .edit-button  {\n    color: var(--secondary75);\n}\n\n\n</style>",
    "<script>\n\nimport {\n    keys,\n    map,\n    some,\n    includes,\n    cloneDeep,\n    isEqual,\n    sortBy,\n    filter,\n    difference\n} from \"lodash/fp\";\nimport { pipe } from \"../common/core\";\nimport { \n    getComponentInfo ,\n    getInstanceProps\n} from \"./pagesParsing/createProps\";\nimport { getExactComponent } from \"./pagesParsing/searchComponents\";\nimport Checkbox from \"../common/Checkbox.svelte\";\nimport Textbox from \"../common/Textbox.svelte\";\nimport Dropdown from \"../common/Dropdown.svelte\";\nimport { validateProps } from \"./pagesParsing/validateProps\";\nimport ComponentPropSelector from \"./ComponentPropSelector.svelte\";\nimport PropControl from \"./PropControl.svelte\";\nimport IconButton from \"../common/IconButton.svelte\";\n\nexport let shouldValidate = true;\nexport let onValidate = () => {};\nexport let componentInfo;\nexport let instanceProps = null;\nexport let onPropsChanged = () => {};\nexport let onEditComponentProp = () => {};\n\nlet errors = [];\nlet props = {};\nlet propsDefinitions = [];\nlet inheritedPropsDefinitions = [];\nlet inheritedExpanded = false;\nlet isInstance = false;\n\nconst isPropInherited = name => \n    includes(name)(componentInfo.inheritedProps);\n\n$: {\n    if(componentInfo)\n    {\n        isInstance = !!instanceProps;\n        props = isInstance \n                ? getInstanceProps(componentInfo, instanceProps)\n                : cloneDeep(componentInfo.fullProps);\n\n        propsDefinitions = pipe(componentInfo.propsDefinition, [\n                keys,\n                filter(k => !isPropInherited(k)),\n                map(k => ({...componentInfo.propsDefinition[k], ____name:k})),\n                sortBy(\"____name\")\n            ]);\n\n        inheritedPropsDefinitions = pipe(componentInfo.propsDefinition, [\n                keys,\n                filter(k => isPropInherited(k)),\n                map(k => ({...componentInfo.propsDefinition[k], ____name:k})),\n                sortBy(\"____name\")\n            ]);\n    }\n}\n\n\nlet setProp = (name, value) => {\n    const newProps = cloneDeep(props);\n\n    let finalProps = isInstance ? newProps : cloneDeep(componentInfo.component.props);\n\n    if(!isInstance) {\n        const nowSet = [];\n        for(let p of componentInfo.unsetProps) {\n            if(!isEqual(newProps[p])(componentInfo.rootDefaultProps[p])) {\n                finalProps[p] = newProps[p];\n                nowSet.push(p);\n            }\n        }\n        componentInfo.unsetProps = difference(nowSet)(componentInfo.unsetProps);\n    }\n\n    newProps[name] = value;\n    finalProps[name] = value;\n    props = newProps;\n    if(validate(finalProps))\n        onPropsChanged(finalProps);\n    \n}\n                  \nconst validate = (finalProps) => {\n    errors = validateProps(componentInfo.propsDefinition, finalProps, [], false);\n    onValidate(errors);\n    return errors.length === 0;\n}\n\nconst fieldHasError = (propName) => \n    some(e => e.propName === propName)(errors);\n\nconst onEditComponent = (propName) => (arrayIndex, arrayPropName) => {\n    onEditComponentProp(propName, arrayIndex, arrayPropName);\n}\n\n</script>\n\n<div class=\"root\">\n\n    <form class=\"uk-form-stacked\">\n        {#each propsDefinitions as propDef, index}\n        \n        <PropControl {setProp}\n                     {fieldHasError}\n                     {propDef}\n                     {props}\n                     {index}\n                     onEditComponent={onEditComponent(propDef.____name)}\n                     disabled={false} />\n            \n        {/each}\n\n        {#if inheritedPropsDefinitions.length > 0}\n        <div class=\"inherited-title padding\">\n            <div>Inherited</div>\n            <div>\n                <IconButton icon={inheritedExpanded ? \"chevron-down\" : \"chevron-right\"}\n                            on:click={() => inheritedExpanded = !inheritedExpanded}/>\n            </div>\n        </div>\n        {/if}\n\n        {#if inheritedExpanded}\n            {#each inheritedPropsDefinitions as prop
    "<script>\nexport let text = \"\";\nexport let label = \"\";\nexport let width = \"medium\";\nexport let size = \"small\";\nexport let margin = true;\nexport let infoText = \"\";\nexport let hasError = false;\nexport let disabled = false;\n</script>\n\n<div class:uk-margin={margin}>\n    <label class=\"uk-form-label\">{label}</label>\n    <div class=\"uk-form-controls\">\n        <input class=\"uk-input uk-form-width-{width} uk-form-{size}\"\n               class:uk-form-danger={hasError}\n               on:change\n               bind:value={text} \n               {disabled}>\n    </div>\n    {#if infoText}\n    <div class=\"info-text\">{infoText}</div>\n    {/if}\n</div>\n\n<style>\n.info-text {\n    font-size: 0.8em;\n    color: var(--slate);\n}\n</style>\n\n",
    "<script>\n\nimport PropsView from \"./PropsView.svelte\";\nimport IconButton from \"../common/IconButton.svelte\";\nimport { getComponentInfo } from \"./pagesParsing/createProps\";\nimport { store } from \"../builderStore\";\nimport { \n    cloneDeep,\n    isUndefined\n} from \"lodash/fp\";\nimport { fade, slide } from 'svelte/transition';\n\nexport let propertyName = \"\";\nexport let onGoBack = () => {};\nexport let instanceProps = {};\nexport let onPropsChanged = () => {};\n\n\nlet editingSubComponentName;\nlet editingSubComponentProps;\nlet allComponents;\n\nstore.subscribe(s => {\n    allComponents = s.allComponents;\n})\n\n$: componentInfo = getComponentInfo(\n    allComponents, instanceProps._component);\n\nconst onSubComponentGoBack = () => {\n    editingSubComponentName = null;\n    editingSubComponentProps = null;\n}\n\nconst onEditComponentProp = (propName, arrayIndex, arrayPropName) => {\n    editingSubComponentName = isUndefined(arrayIndex)\n                              ? propName\n                              : `${propName}[${arrayIndex}].${arrayPropName}`;\n    editingSubComponentProps = isUndefined(arrayIndex)\n                               ? instanceProps[propName]\n                               : instanceProps[propName][arrayIndex][arrayPropName];\n};\n\n\nconst onSubComponentPropsChanged = (subProps) => {\n    const newProps = cloneDeep(instanceProps);\n    newProps[editingSubComponentName] = subProps;\n    instanceProps = newProps;\n    onPropsChanged(newProps);\n}\n\n\nconst propsChanged = newProps => {\n    instanceProps = newProps;\n    onPropsChanged(newProps);\n}\n\n</script>\n\n<div>\n\n    <div class=\"title\">\n        <IconButton icon=\"chevron-left\"\n                    on:click={onGoBack}/>\n        <span>{propertyName}</span>\n    </div>\n\n    {#if editingSubComponentName}\n    <div in:slide={{delay: 250, duration: 300}}\n         out:fade>\n        <svelte:self onPropsChanged={onSubComponentPropsChanged}\n                    onGoBack={onSubComponentGoBack}\n                    instanceProps={editingSubComponentProps}\n                    propertyName={editingSubComponentName} />\n    </div>\n    {:else}\n    <PropsView {instanceProps}\n               {componentInfo}\n               onPropsChanged={propsChanged}\n               {onEditComponentProp} />\n    {/if}\n    \n\n     \n\n</div>\n\n<style>\n.title {\n    padding:3px;\n    background-color: white;\n    color: var(--secondary100);\n    border-style:solid;\n    border-width: 1px 0 0 0;\n    border-color: var(--lightslate);\n}\n\n.title > span {\n    margin-left: 10px;\n }\n</style>",
    "<script>\n\nimport { searchAllComponents } from \"./pagesParsing/searchComponents\";\nimport { store } from \"../builderStore\";\n\nexport let onComponentChosen = () => {};\n\nlet allComponents = [];\nlet phrase = \"\";\n\nstore.subscribe(s => {\n    allComponents = s.allComponents;\n});\n\n$: filteredComponents = \n    !phrase \n    ? [] \n    : searchAllComponents(allComponents, phrase);\n\n</script>\n\n<div class=\"root\">\n\n    <form class=\"uk-search uk-search-large\">\n        <span uk-search-icon></span>\n        <input class=\"uk-search-input\" \n               type=\"search\" \n               placeholder=\"Based on component...\" \n               bind:value={phrase}>\n    </form>\n\n    <div>\n        {#each filteredComponents as component}\n        <div class=\"component\" on:click={() => onComponentChosen(component)}>\n            <div class=\"title\">{component.name}</div>\n            <div class=\"description\">{component.description}</div>\n        </div>\n        {/each}\n    </div>\n\n</div>\n\n<style>\n\n.component {\n    padding:5px;\n    border-style: solid;\n    border-width: 0 0 1px 0;\n    border-color: var(--lightslate);\n    cursor: pointer;\n}\n\n.component:hover {\n    background-color: var(--primary10);\n}\n\n.component > .title {\n    font-size: 13pt;\n    color: var(--secondary100);\n}\n\n.component > .description {\n    font-size: 10pt;\n    color: var(--primary75);\n    font-style: italic;\n}\n\n</style>",
    "<script>\nexport let errors = [];\n\n$:hasErrors = errors.length > 0;\n</script>\n\n{#if hasErrors}\n<div class=\"error-container\">\n    {#each errors as error}\n    <div class=\"error-row\">{error.field ? `${error.field}: ` : \"\"}{error.error}</div>\n    {/each}\n</div>\n{/if}\n\n<style>\n\n.error-container {\n    padding:10px;\n    border-style: solid;\n    border-color: var(--deletion100);\n    border-radius: var(--borderradiusall);\n    background: var(--deletion75);\n}\n\n.error-row {\n    padding: 5px 0px;\n}\n\n</style>",
    "<script>\n// todo: use https://ace.c9.io\nexport let text = \"\";\nexport let label = \"\";\n</script>\n\n<div>{label}</div>\n<textarea class=\"uk-textarea\" bind:value={text}></textarea>\n\n<style>\n\ntextarea {\n    padding:3px;\n    margin-top:5px;\n    margin-bottom:10px;\n    background: var(--lightslate);\n    color: var(--white);\n    font-family: 'Courier New', Courier, monospace;\n    width:95%;\n    height:100px;\n    border-radius: 5px;\n}\n\n</style>",
    "<script>\n\nimport Textbox from \"../common/Textbox.svelte\";\nimport Button from \"../common/Button.svelte\";\nimport ButtonGroup from \"../common/ButtonGroup.svelte\";\nimport {cloneDeep, filter, keys,\nmap, isUndefined} from \"lodash/fp\";\nimport ErrorsBox from \"../common/ErrorsBox.svelte\";\nimport {validateActions, pipe} from \"../common/core\";\nimport getIcon from \"../common/icon\";\n\nexport let action;\nexport let onFinished = (action) => {};\nexport let allActions;\nexport let isNew = true;\n\nlet optKey = \"\";\nlet optValue = \"\";\n\nlet clonedAction = cloneDeep(action); \nlet initialOptions = pipe(action.initialOptions, [\n    keys,\n    map(k => ({key:k, value:action.initialOptions[k]}))\n]);\nlet errors = [];\n\nconst addNewOption = () => {\n\n    if(optKey && optValue && isUndefined(clonedAction.initialOptions[optKey])) {\n        clonedAction.initialOptions[optKey] = optValue;\n        initialOptions = [...initialOptions, {\n            key:optKey, value: optValue\n        }];\n        optKey = \"\";\n        optValue = \"\";\n    }\n}\n\nconst removeOption = (opt) => {\n    if(opt) {\n        delete clonedAction.initialOptions[opt.key]\n        initialOptions = pipe(initialOptions, [\n            filter(o => o.key !== opt.key)\n        ]);\n    }\n}\n\nconst save = () => {\n\n    const newActionsList = [\n        ...pipe(allActions ,[filter(a => a !== action)]),\n        clonedAction]\n\n    errors = pipe(newActionsList ,[\n        validateActions,\n        map(e => e.error)\n    ]);\n\n    if(errors.length === 0)\n        onFinished(clonedAction);\n}\n\nconst cancel = () => {\n    onFinished();\n}\n\n</script>\n\n<div class=\"root\">\n\n    <ErrorsBox {errors} />\n\n    <form class=\"uk-form-horizontal\">\n\n        <Textbox label=\"Name\" bind:text={clonedAction.name} />\n        <Textbox label=\"Behaviour Source\" bind:text={clonedAction.behaviourSource} />\n        <Textbox label=\"Behaviour\" bind:text={clonedAction.behaviourName} />\n\n    </form>\n\n    <div class=\" uk-form-stacked\" style=\"margin-bottom: 20px\">\n        <label class=\"uk-form-label\">Default Options</label>\n        <div class=\"uk-grid-small\" uk-grid>\n            <input class=\"uk-input uk-width-1-4\" placeholder=\"key\" bind:value={optKey} >        \n            <input class=\"uk-input uk-width-1-4\" placeholder=\"value\" bind:value={optValue} >        \n            <Button color=\"primary-outline uk-width-1-4\" on:click={addNewOption}>Add</Button>\n        </div>\n        <div style=\"margin-top: 10px\">\n            {#each initialOptions as option}\n            <span class=\"option-container\">{option.key} : {option.value} <span style=\"font-size:10pt; cursor: pointer\" on:click={() => removeOption(option)}>{@html getIcon(\"trash-2\")}</span></span>\n            {/each}\n        </div>\n    </div>\n\n    <ButtonGroup>\n        <Button color=\"primary\" grouped on:click={save}>Save</Button>\n        <Button color=\"tertiary\" grouped on:click={cancel}>Cancel</Button>\n    </ButtonGroup>\n\n    \n</div>\n\n\n<style>\n\n.root {\n    padding: 10px;\n}\n\n.option-container {\n    border-style: dotted;\n    border-width: 1px;\n    border-color: var(--primary75);\n    padding: 3px;\n    margin-right: 5px;\n}\n\n</style>",
    "<script>\n\nexport let checked=false;\nexport let label=\"\";\n\n</script>\n\n<input class=\"uk-checkbox\" type=\"checkbox\" bind:checked on:change />{label}\n\n<style>\n\ninput {\n    margin-right:7px;\n}\n\n</style>",
    "<script>\n\nimport Checkbox from \"../common/Checkbox.svelte\";\nimport Textbox from \"../common/Textbox.svelte\";\nimport Dropdown from \"../common/Dropdown.svelte\";\nimport ComponentPropSelector from \"./ComponentPropSelector.svelte\";\nimport PropArraySelector from \"./PropArraySelector.svelte\";\nimport EventListSelector from \"./EventListSelector.svelte\";\nimport StateBindingControl from \"./StateBindingControl.svelte\";\n\nexport let errors = [];\nexport let setProp = () => {};\nexport let fieldHasError =() => {};\nexport let propDef = {};\nexport let props = {};\nexport let disabled;\nexport let index;\nexport let onEditComponent = () => {};\n\n$: isOdd = (index % 2 !== 0);\n\nconst setComponentProp = (props) => {\n    setProp(propDef.____name, props);\n}\n\n</script>\n\n\n<div class=\"root\" >\n\n    {#if propDef.type === \"component\"}\n\n    <div class=\"prop-label\">{propDef.____name}</div>\n    <ComponentPropSelector label={propDef.____name}\n                            props={props[propDef.____name]}\n                            {disabled}\n                            onEdit={onEditComponent}\n                            onComponentChosen={onEditComponent}\n                            onValueChanged={setComponentProp}/>\n\n    {:else if propDef.type === \"array\"}\n\n    <div class=\"prop-label\">{propDef.____name}</div>\n    <PropArraySelector parentProps={props}\n                       {propDef}\n                       onValueChanged={setComponentProp}\n                       onEditComponentProp={onEditComponent} />\n\n    {:else if propDef.type === \"event\"}\n\n    <div class=\"prop-label\">{propDef.____name}</div>\n    <EventListSelector parentProps={props}\n                       {propDef}\n                       onValueChanged={setComponentProp} />\n\n    {:else}\n\n    <div class=\"prop-label\">{propDef.____name}</div>\n    <StateBindingControl value={props[propDef.____name]}\n                         type={propDef.type}\n                         options={propDef.options}\n                         onChanged={v => setProp(propDef.____name, v)}/>\n\n    {/if} \n\n</div>\n\n<style>\n\n.root {\n    padding: 3px 5px 7px 10px;\n    border-style: dotted;\n    border-width: 0 0 1px 0;\n    border-color: var(--primary25);\n}\n\n.prop-label {\n    font-size: 0.9em;\n    color: var(--primary100);\n    font-weight: bold;\n}\n\n</style>",
    "<script>\nimport {\n    last\n} from \"lodash/fp\";\nimport IconButton from \"../common/IconButton.svelte\";\nimport ComponentSearch from \"./ComponentSearch.svelte\";\nimport Button from \"../common/Button.svelte\";\nimport ButtonGroup from \"../common/ButtonGroup.svelte\";\nimport UIkit from \"uikit\";\nimport {\n    getComponentInfo\n} from \"./pagesParsing/createProps\";\nimport { store } from \"../builderStore\";\n\nconst emptyProps = () => ({_component:\"\"})\n\nexport let props = emptyProps();\nexport let onValueChanged = () => {};\nexport let onComponentChosen = () => {};\nexport let onEdit = () => {};\nexport let disabled = false;\n\nconst CHOOSE_COMPONENT = \"choose_component\";\nconst CLEAR_COMPONENT = \"clear_component\";\n\nlet allComponents;\nlet modalElement;\nlet modalAction;\n\nstore.subscribe(s => {\n    allComponents = s.allComponents;\n});\n\n$: componentSelected = props._component.length > 0;\n$: shortName = last(props._component.split(\"/\"));\n\nconst chooseComponent = () => {\n    modalAction = CHOOSE_COMPONENT;\n    showDialog();\n}\n\nconst clearComponent = () => {\n    modalAction = CLEAR_COMPONENT;\n    showDialog();\n}\n\nconst componentChosen = (component) => {\n    const componentInfo = getComponentInfo(allComponents, component.name);\n    props = componentInfo.fullProps;\n    onValueChanged(props);\n    onComponentChosen();\n    hideDialog();\n}\n\nconst hideDialog = () => {\n    UIkit.modal(modalElement).hide();\n}\n\nconst showDialog = () => {\n    UIkit.modal(modalElement).show();\n}\n\nconst confirmClearComponent = () => {\n    props = emptyProps();\n    onValueChanged(emptyProps());\n    hideDialog();\n}\n\n</script>\n\n\n<div class=\"root uk-form-controls\">\n    <div class:selectedname={componentSelected}>\n        {componentSelected ?  shortName : \"(none)\"}\n    </div>\n    <div>\n        {#if !disabled && componentSelected}\n        <IconButton icon=\"edit\" \n                    on:click={onEdit}/>\n\n        <IconButton icon=\"trash\" \n                    on:click={clearComponent} />\n        {:else if !disabled && !componentSelected}\n        <IconButton icon=\"plus\" \n                    on:click={chooseComponent} />\n        {/if}\n        \n    </div>\n</div>\n\n<div bind:this={modalElement} uk-modal>\n    <div class=\"uk-modal-dialog\">\n\n        {#if modalAction === CHOOSE_COMPONENT}\n        <div class=\"uk-modal-body\">\n            <ComponentSearch onComponentChosen={componentChosen} />\n        </div>\n        {:else if modalAction === CLEAR_COMPONENT}\n        <div class=\"uk-modal-body\">\n            Clear this component ?\n        </div>\n        <div class=\"uk-modal-footer\">\n            <ButtonGroup>\n                <Button grouped \n                        on:click={hideDialog} \n                        color=\"secondary\" >Cancel</Button>\n                <Button grouped \n                        on:click={confirmClearComponent}>OK</Button>\n            </ButtonGroup>\n        </div>\n        {/if}\n\n    </div>\n\n</div>\n\n<style>\n\n.root {\n    display: grid;\n    grid-template-columns: [name] 1fr [actions] auto;\n}\n\n.root > div:nth-child(1) {\n    grid-column-start: name;\n    color: var(--secondary50);\n}\n\n.root > div:nth-child(2) {\n    grid-column-start: actions;\n}\n\n.selectedname {\n    font-weight: bold;\n    color: var(--secondary);\n}\n\n</style>",
    "<script>\nimport {join} from \"lodash/fp\";\n\nexport let values;\nexport let label;\n\nconst inputChanged = ev => {\n    try {\n        values = ev.target.value.split(\"\\n\");\n    } catch(_) {\n        values = [];\n    }\n}\n\n$: valuesText = join(\"\\n\")(values);\n\n\n</script>\n\n\n<div class=\"uk-margin\">\n    <label class=\"uk-form-label\">{label}</label>\n    <div class=\"uk-form-controls\">\n        <textarea value={valuesText} on:change={inputChanged} ></textarea>\n    </div>\n</div>\n\n<style>\n\ntextarea {\n    width:300px;\n    height:200px;\n}\n\n</style>",
    "<script>\nimport IconButton from \"../common/IconButton.svelte\";\nimport {\n    createArrayElementProps\n} from \"./pagesParsing/createProps\";\nimport PropControl from \"./PropControl.svelte\";\nimport {\n    some,\n    cloneDeep,\n} from \"lodash/fp\";\nimport { validateProps } from \"./pagesParsing/validateProps\";\n\nexport let parentProps;\nexport let propDef;\nexport let onValueChanged;\nexport let onValidate = () => {};\nexport let onEditComponentProp = () => {};\n\nlet value = [];\nlet elementDefinitionArray;\nlet elementErrors = {};\n\n$: {\n    const elArray = [];\n    for(let elProp in propDef.elementDefinition) {\n        if(elProp === \"_component\") continue;\n        elArray.push({\n            ...propDef.elementDefinition[elProp],\n            ____name: elProp\n        });\n    }\n    elementDefinitionArray = elArray;\n    value = parentProps[propDef.____name];\n}\n\nconst addElement = () => {\n    const newElement = createArrayElementProps(\n        propDef.____name, \n        propDef.elementDefinition).props;\n\n    value = [...value, newElement];\n    onValueChanged(value);\n}\n\nconst validate = (index, elementProps) => {\n    elementErrors[index] = validateProps(\n        propDef.elementDefinition, elementProps, [], true);\n    onValidate(elementErrors[index]);\n    return elementErrors[index].length === 0;\n}\n\nconst setProp = (index) => (name, propValue) => {\n    const newValue = cloneDeep(value);\n    const newProps = cloneDeep(newValue[index]);\n    newProps[name] = propValue;\n    newValue[index] = newProps;\n    value = newValue;\n\n    if(validate(index, newProps))\n        onValueChanged(newValue);\n    \n}\n\nlet fieldHasError = index => propName => \n    some(e => e.propName === propName)(elementErrors[index]);\n\nconst onEditComponent = (index, propName) => () => {\n    onEditComponentProp(index, propName);\n}\n\n</script>\n\n<div class=\"root\">\n\n\n    <div class=\"item-container\">\n        {#each value as item, index}\n    \n        <div class=\"item-inner-container\">\n            {#each elementDefinitionArray as propDef}\n            <PropControl setProp={setProp(index)}\n                        fieldHasError={fieldHasError(index)}\n                        {propDef}\n                        props={item}\n                        {index}\n                        onEditComponent={onEditComponent(index, propDef.____name)}\n                        disabled={false} />\n            {/each}\n        </div>\n    \n        {/each}\n\n        <div class=\"addelement-container\"\n                    on:click={addElement}>\n            <IconButton icon=\"plus\" \n                            size=\"12\"/>\n        </div>\n    </div>\n</div>\n\n\n<style>\n\n.addelement-container {\n    cursor: pointer;\n    padding: 3px 0px;\n    text-align: center;\n}\n\n.addelement-container:hover {\n    background-color: var(--primary25);\n}\n\n\n.item-container {\n    padding-left: 3px;\n    background: var(--secondary10);\n}\n\n</style>",
    "<script>\r\nimport IconButton from \"../common/IconButton.svelte\";\r\nimport EventSelector from \"./EventSelector.svelte\";\r\nimport {\r\n    filter\r\n} from \"lodash/fp\";\r\n\r\nexport let parentProps;\r\nexport let propDef;\r\nexport let onValueChanged;\r\nexport let onValidate = () => {};\r\n\r\nlet events = [];\r\nlet elementErrors = {};\r\n\r\n$: {\r\n    events = parentProps[propDef.____name];\r\n}\r\n\r\nconst addHandler = () => {\r\n    const newHandler = {handlerType:\"\", parameters:{}};\r\n    events = [...events, newHandler];\r\n    onValueChanged(events);\r\n}\r\n\r\nconst onEventHandlerChanged = (oldEvent) => (newEvent) => {\r\n    const indexOfOldEvent = events.indexOf(oldEvent);\r\n    const newEvents = [...events];\r\n    newEvents.splice(\r\n        events.indexOf(oldEvent),\r\n        1,\r\n        newEvent);\r\n    events = newEvents;\r\n    onValueChanged(events);\r\n}\r\n\r\nconst removeHandler = (index) => () => {\r\n    events = filter(e => e !== events[index])(events);\r\n    onValueChanged(events);\r\n}\r\n\r\n</script>\r\n\r\n<div class=\"root\">\r\n    <div class=\"control-container\">\r\n        {#each events as ev, index}\r\n\r\n        <div class=\"handler-container\">\r\n            <EventSelector onChanged={onEventHandlerChanged(ev)}\r\n                        onRemoved={removeHandler(index)}\r\n                        event={ev} />\r\n\r\n        </div>\r\n\r\n        <div class=\"separator\"></div>\r\n        {/each}\r\n\r\n        <div class=\"addelement-container\"\r\n             on:click={addHandler}>\r\n            <IconButton icon=\"plus\" \r\n                            size=\"12\"/>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<style>\r\n\r\n.addelement-container {\r\n    cursor: pointer;\r\n    padding: 3px 0px;\r\n    text-align: center;\r\n}\r\n\r\n\r\n\r\n.addelement-container:hover {\r\n    background-color: var(--primary25);\r\n    margin-top: 5px;\r\n}\r\n\r\n\r\n.control-container {\r\n    padding-left: 3px;\r\n    background: var(--secondary10);\r\n}\r\n\r\n.separator {\r\n    width: 60%;\r\n    margin: 10px auto;\r\n    border-style:solid;\r\n    border-width: 1px 0 0 0;\r\n    border-color: var(--primary25);\r\n}\r\n\r\n</style>\r\n",
    "<script>\r\nimport IconButton from \"../common/IconButton.svelte\";\r\nimport StateBindingControl from \"./StateBindingControl.svelte\";\r\nimport {\r\n    find, map, keys, reduce\r\n} from \"lodash/fp\";\r\nimport { pipe } from \"../common/core\";\r\n\r\nexport let event;\r\nexport let onChanged;\r\nexport let onRemoved;\r\n\r\nconst events = [\r\n    {name:\"\", parameters: []},\r\n    {name:\"Set State\", parameters: [\"path\", \"value\"]},\r\n    {name:\"Load Record\", parameters: [\"recordKey\", \"statePath\"]},\r\n];\r\n\r\nlet eventType;\r\nlet parameters = [];\r\n\r\n$: {\r\n    if(event) {\r\n        eventType = event.handlerType;\r\n        parameters = pipe(event.parameters, [\r\n            keys,\r\n            map(k => ({name:k, value:event.parameters[k]}))\r\n        ]);\r\n    } else {\r\n        eventType = \"\";\r\n        parameters = [];\r\n    }\r\n}\r\n\r\nconst eventChanged = (type, parameters) => {\r\n    const paramsAsObject = reduce(\r\n        (obj, p) => {\r\n            obj[p.name] = p.value;\r\n            return obj;\r\n        }\r\n        , {}\r\n    )(parameters)\r\n\r\n    onChanged({\r\n        handlerType:type, \r\n        parameters: paramsAsObject\r\n    });\r\n}\r\n\r\nconst eventTypeChanged = (ev) => {\r\n    const eType = find(e => e.name === ev.target.value)(events);\r\n    const emptyParameters = map(p => ({name:p, value:\"\"}))(eType.parameters);\r\n    eventChanged(eType.name, emptyParameters);\r\n}\r\n\r\nconst onParameterChanged = index => ev => {\r\n    const newparameters = [...parameters];\r\n    newparameters[index].value = ev.target.value;\r\n    eventChanged(eventType, newparameters);\r\n}\r\n\r\n</script>\r\n\r\n<div class=\"type-selector-container\">\r\n    <select class=\"type-selector uk-select uk-form-small \" value={eventType} on:change={eventTypeChanged}>\r\n        {#each events as ev}\r\n        <option value={ev.name}>{ev.name}</option>\r\n        {/each}\r\n    </select>\r\n\r\n    <IconButton icon=\"trash\" \r\n                size=\"12\" \r\n                on:click={onRemoved}/>\r\n\r\n</div>\r\n\r\n{#if parameters}\r\n{#each parameters as p, index}\r\n\r\n<div>\r\n    {p.name}   \r\n</div>\r\n<StateBindingControl  onChanged={onParameterChanged(index)}\r\n                      value={p.value} />\r\n\r\n{/each}\r\n{/if}\r\n\r\n<style>\r\n\r\n.type-selector-container {\r\n    display: flex;\r\n}\r\n\r\n.type-selector {\r\n    border-color: var(--primary50);\r\n    border-radius: 2px;\r\n    width: 50px;\r\n    flex: 1 0 auto;\r\n}\r\n\r\n</style>",
    "<script>\r\nimport {\r\n    isString\r\n} from \"lodash/fp\";\r\nimport IconButton from \"../common/IconButton.svelte\";\r\nimport {\r\n    isBinding, getBinding, setBinding\r\n} from \"../common/binding\";\r\n\r\nexport let value=\"\";\r\nexport let onChanged= () => {};\r\n\r\nlet isBound=false;\r\nlet bindingPath=\"\";\r\nlet bindingFallbackValue=\"\";\r\nlet isExpanded = false;\r\nlet forceIsBound = false;\r\n\r\n$: {\r\n    isBound= forceIsBound || isBinding(value);\r\n\r\n    if(isBound) {\r\n        const binding = getBinding(value);\r\n        bindingPath= binding.path;\r\n        bindingFallbackValue= binding.fallback;\r\n    } else {\r\n        bindingPath=\"\";\r\n        bindingFallbackValue=\"\";\r\n    }\r\n}\r\n\r\nconst clearBinding = () => {\r\n    forceIsBound = false;\r\n    onChanged(\"\");\r\n}\r\n\r\nconst bind = (path, fallback) => {\r\n    if(!path) {\r\n        clearBinding(\"\");\r\n        return;\r\n    }\r\n    const binding = setBinding({path, fallback});\r\n    onChanged(binding);\r\n}\r\n\r\nconst setBindingPath = ev => {\r\n    forceIsBound = false;\r\n    bind(ev.target.value, bindingFallbackValue)\r\n}\r\n\r\nconst setBindingFallback = ev => {\r\n    bind(bindingPath, ev.target.value);\r\n}\r\n\r\n\r\nconst makeBinding = () => {\r\n    forceIsBound=true;\r\n    isExpanded=true;\r\n}\r\n\r\n</script>\r\n\r\n{#if isBound}\r\n<div>\r\n    <div class=\"bound-header\">\r\n        <div>{isExpanded ? \"\" : bindingPath}</div>\r\n        <IconButton icon={isExpanded ? \"chevron-up\" : \"chevron-down\"} \r\n                    size=\"12\"\r\n                    on:click={() => isExpanded=!isExpanded}/>\r\n        <IconButton icon=\"trash\" \r\n                    size=\"12\"\r\n                    on:click={clearBinding}/>\r\n    </div>\r\n    {#if isExpanded}\r\n    <div>\r\n        <div class=\"binding-prop-label\">Binding Path</div>\r\n        <input class=\"uk-input uk-form-small\"\r\n               value={bindingPath}\r\n               on:change={setBindingPath} >\r\n        <div class=\"binding-prop-label\">Fallback Value</div>\r\n        <input class=\"uk-input uk-form-small\"\r\n               value={bindingFallbackValue}\r\n               on:change={setBindingFallback} >\r\n    </div>\r\n    {/if}\r\n\r\n</div>\r\n{:else}\r\n<div class=\"unbound-container\">\r\n    <input class=\"uk-input uk-form-small\"\r\n            on:change={ev => onChanged(ev.target.value)}\r\n            bind:value={value}\r\n            style=\"flex: 1 0 auto;\" >\r\n    <IconButton icon=\"link\" \r\n                size=\"12\"\r\n                on:click={makeBinding} />\r\n</div>\r\n{/if}\r\n\r\n\r\n<style>\r\n\r\n.unbound-container {\r\n    display:flex;\r\n}\r\n\r\n.unbound-container > input {\r\n    width:auto;\r\n}\r\n\r\n.bound-header {\r\n    display: flex;\r\n}\r\n\r\n.bound-header > div:nth-child(1) {\r\n    flex: 1 0 auto;\r\n    width: 30px;\r\n    color: var(--darkslate);\r\n    padding-left: 5px;\r\n}\r\n\r\n.binding-prop-label {\r\n    color: var(--darkslate);\r\n}\r\n\r\n\r\n</style>",
    "<script>\r\nimport {\r\n    isString\r\n} from \"lodash/fp\";\r\nimport IconButton from \"../common/IconButton.svelte\";\r\nimport {\r\n    isBinding, getBinding, setBinding\r\n} from \"../common/binding\";\r\n\r\nexport let value=\"\";\r\nexport let onChanged= () => {};\r\nexport let type=\"\";\r\nexport let options=[];\r\n\r\nlet isBound=false;\r\nlet bindingPath=\"\";\r\nlet bindingFallbackValue=\"\";\r\nlet isExpanded = false;\r\nlet forceIsBound = false;\r\n\r\n$: {\r\n    isBound= forceIsBound || isBinding(value);\r\n\r\n    if(isBound) {\r\n        const binding = getBinding(value);\r\n        bindingPath= binding.path;\r\n        bindingFallbackValue= binding.fallback;\r\n    } else {\r\n        bindingPath=\"\";\r\n        bindingFallbackValue=\"\";\r\n    }\r\n}\r\n\r\nconst clearBinding = () => {\r\n    forceIsBound = false;\r\n    onChanged(\"\");\r\n}\r\n\r\nconst bind = (path, fallback) => {\r\n    if(!path) {\r\n        clearBinding(\"\");\r\n        return;\r\n    }\r\n    const binding = setBinding({path, fallback});\r\n    onChanged(binding);\r\n}\r\n\r\nconst setBindingPath = ev => {\r\n    forceIsBound = false;\r\n    bind(ev.target.value, bindingFallbackValue)\r\n}\r\n\r\nconst setBindingFallback = ev => {\r\n    bind(bindingPath, ev.target.value);\r\n}\r\n\r\n\r\nconst makeBinding = () => {\r\n    forceIsBound=true;\r\n    isExpanded=true;\r\n}\r\n\r\n</script>\r\n\r\n{#if isBound}\r\n<div>\r\n    <div class=\"bound-header\">\r\n        <div>{isExpanded ? \"\" : bindingPath}</div>\r\n        <IconButton icon={isExpanded ? \"chevron-up\" : \"chevron-down\"} \r\n                    size=\"12\"\r\n                    on:click={() => isExpanded=!isExpanded}/>\r\n        <IconButton icon=\"trash\" \r\n                    size=\"12\"\r\n                    on:click={clearBinding}/>\r\n    </div>\r\n    {#if isExpanded}\r\n    <div>\r\n        <div class=\"binding-prop-label\">Binding Path</div>\r\n        <input class=\"uk-input uk-form-small\"\r\n               value={bindingPath}\r\n               on:change={setBindingPath} >\r\n        <div class=\"binding-prop-label\">Fallback Value</div>\r\n        <input class=\"uk-input uk-form-small\"\r\n               value={bindingFallbackValue}\r\n               on:change={setBindingFallback} >\r\n    </div>\r\n    {/if}\r\n\r\n</div>\r\n{:else}\r\n<div class=\"unbound-container\">\r\n\r\n    {#if type === \"bool\"}\r\n\r\n    <div>\r\n        <IconButton icon={value == true ? \"check-square\" : \"square\"}\r\n                    size=\"19\"\r\n                    on:click={() => value = !value}/>\r\n    </div>\r\n\r\n    {:else if type === \"options\"}\r\n\r\n    <select class=\"uk-select uk-form-small\" \r\n            value={value} \r\n            on:change={ev => onChanged(ev.target.checked)}>\r\n        {#each options as option}\r\n        <option value={option}>{option}</option>\r\n        {/each}\r\n    </select>\r\n\r\n    {:else}\r\n\r\n    <input class=\"uk-input uk-form-small\"\r\n            on:change={ev => onChanged(ev.target.value)}\r\n            bind:value={value}\r\n            style=\"flex: 1 0 auto;\" > \r\n\r\n\r\n    {/if}\r\n    <IconButton icon=\"link\" \r\n                size=\"12\"\r\n                on:click={makeBinding} />\r\n</div>\r\n{/if}\r\n\r\n\r\n<style>\r\n\r\n.unbound-container {\r\n    display:flex;\r\n}\r\n\r\n.unbound-container > *:nth-child(1) {\r\n    width:auto;\r\n    flex: 1 0 auto;\r\n}\r\n\r\n.bound-header {\r\n    display: flex;\r\n}\r\n\r\n.bound-header > div:nth-child(1) {\r\n    flex: 1 0 auto;\r\n    width: 30px;\r\n    color: var(--darkslate);\r\n    padding-left: 5px;\r\n    font-style: italic;\r\n}\r\n\r\n.binding-prop-label {\r\n    color: var(--darkslate);\r\n}\r\n\r\n\r\n</style>"
  ],
  "names": [],
  "mappings": "AAgCC,IAAI,eAAC,CAAC,AACL,MAAM,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,CACX,WAAW,CAAE,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,AACpD,CAAC;ACQF,KAAK,cAAC,CAAC,AACH,OAAO,IAAI,CACX,MAAM,IAAI,CACV,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,AAC1B,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CACd,OAAO,IAAI,CACX,UAAU,CAAE,KAAK,CACjB,aAAa,KAAK,CAClB,YAAY,CAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAC7B,YAAY,CAAE,IAAI,YAAY,CAAC,CAC/B,OAAO,CAAE,GAAG,CACZ,KAAK,CAAE,IAAI,AACf,CAAC,AAED,QAAQ,cAAC,CAAC,AACN,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CACd,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,KAAK,AACjB,CAAC,AAED,sBAAQ,CAAG,GAAG,cAAC,CAAC,AACZ,OAAO,IAAI,CACX,MAAM,IAAI,AACd,CAAC,AAED,WAAW,cAAC,CAAC,AACT,MAAM,CAAE,OAAO,CACf,KAAK,CAAE,IAAI,OAAO,CAAC,CACnB,OAAO,CAAE,GAAG,CAAC,IAAI,AACrB,CAAC,AAED,yBAAW,MAAM,AAAC,CAAC,AACf,KAAK,CAAE,IAAI,aAAa,CAAC,AAC7B,CAAC,AAED,OAAO,cAAC,CAAC,AACL,KAAK,CAAE,IAAI,cAAc,CAAC,AAC9B,CAAC;AC3DD,KAAK,cAAC,CAAC,AACH,QAAQ,CAAE,KAAK,CACf,MAAM,CAAE,CAAC,CAAC,IAAI,CACd,UAAU,CAAE,MAAM,CAClB,GAAG,CAAE,GAAG,CAGR,MAAM,IAAI,AACd,CAAC,AAED,MAAM,cAAC,CAAC,AACJ,QAAQ,YAAY,CACpB,MAAM,CAAE,IAAI,AAChB,CAAC,AAED,KAAK,cAAC,CAAC,AACH,KAAK,CAAE,KAAK,CACZ,aAAa,CAAE,IAAI,AACvB,CAAC,AAED,mBAAK,CAAC,AAAQ,OAAO,AAAE,CAAC,AACpB,MAAM,KAAK,AACf,CAAC,AAED,SAAS,cAAC,CAAC,AACP,UAAU,CAAE,IAAI,CAChB,OAAO,CAAE,KAAK,AAClB,CAAC;ACjBD,KAAK,cAAC,CAAC,AACL,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,IAAI,AACf,CAAC,AAGD,QAAQ,cAAC,CAAC,AACR,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CACd,MAAM,CAAE,IAAI,CACZ,gBAAgB,CAAE,IAAI,OAAO,CAAC,CAC9B,OAAO,CAAC,AACV,CAAC,AAED,IAAI,cAAC,CAAC,AACJ,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CACd,KAAK,CAAE,KAAK,CACZ,MAAM,CAAE,IAAI,AACd,CAAC;ACND,MAAM,cAAC,CAAC,AACJ,YAAY,CAAE,IAAI,CAClB,gBAAgB,CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC/B,MAAM,CAAE,OAAO,CACf,QAAQ,IAAI,AAChB,CAAC,AAED,oBAAM,MAAM,AAAC,CAAC,AACV,KAAK,CAAE,IAAI,YAAY,CAAC,AAC5B,CAAC,AAED,oBAAM,OAAO,AAAC,CAAC,AACX,QAAQ,IAAI,AAChB,CAAC;ACyBD,KAAK,eAAC,CAAC,AACH,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CACtE,MAAM,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,AACf,CAAC,AAED,OAAO,eAAC,CAAC,AACL,iBAAiB,CAAE,KAAK,CACxB,gBAAgB,CAAE,IAAI,WAAW,CAAC,CAClC,MAAM,CAAE,IAAI,AAChB,CAAC,AAED,gBAAgB,eAAC,CAAC,AACd,iBAAiB,CAAE,UAAU,CAC7B,gBAAgB,CAAE,IAAI,WAAW,CAAC,CAClC,MAAM,CAAE,IAAI,AAChB,CAAC,AAED,qBAAqB,eAAC,CAAC,AACnB,WAAW,CAAE,IAAI,AACrB,CAAC,AAED,iBAAiB,eAAC,CAAC,AACf,SAAS,CAAE,IAAI,CACf,YAAY,CAAE,IAAI,AACtB,CAAC,AAED,oBAAoB,eAAC,CAAC,AAClB,WAAW,CAAE,IAAI,AACrB,CAAC,AAED,iBAAiB,eAAC,CAAC,AACf,QAAQ,IAAI,CACZ,qBAAqB,CAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAC5D,OAAO,CAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,AAC7B,CAAC,AAED,gCAAiB,CAAC,kBAAG,WAAW,CAAC,CAAC,AAAC,CAAC,AAChC,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CACvB,cAAc,CAAE,MAAM,CACtB,iBAAiB,CAAE,IAAI,CACvB,YAAY,CAAE,GAAG,AACrB,CAAC,AAED,gCAAiB,CAAC,mBAAI,WAAW,CAAC,CAAC,AAAC,CAAC,AACjC,YAAY,GAAG,CACf,cAAc,CAAE,MAAM,CACtB,iBAAiB,CAAE,KAAK,CACxB,WAAW,IAAI,AACnB,CAAC,AAED,gCAAiB,CAAC,kBAAG,WAAW,CAAC,CAAC,AAAC,CAAC,AAChC,cAAc,CAAE,MAAM,CACtB,iBAAiB,CAAE,MAAM,CACzB,MAAM,CAAE,OAAO,CACf,KAAK,CAAE,IAAI,OAAO,CAAC,AACvB,CAAC,AAED,gCAAiB,CAAC,kBAAG,WAAW,CAAC,CAAC,MAAM,AAAC,CAAC,AACtC,KAAK,CAAE,IAAI,WAAW,CAAC,AAC3B,CAAC;AC5HD,cAAc,cAAC,CAAC,AAAC,aAAa,CAAE,IAAI,iBAAiB,CAAC,AAAE,CAAC,AACzD,YAAY,cAAC,CAAC,AAAC,aAAa,CAAE,IAAI,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,cAAc,CAAC,AAAE,CAAC,AAC5E,aAAa,cAAC,CAAC,AAAC,aAAa,CAAE,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,AAAE,CAAC,AAC7E,cAAc,cAAC,CAAC,AAAC,aAAa,CAAE,CAAC,AAAE,CAAC,AAEpC,MAAM,cAAC,CAAC,AACJ,YAAY,CAAE,KAAK,CACnB,OAAO,CAAE,KAAK,CAAC,IAAI,CACnB,OAAO,OAAO,CACd,OAAO,GAAG,CACV,aAAa,CAAE,GAAG,AACtB,CAAC,AAGD,QAAQ,cAAC,CAAC,AACN,gBAAgB,CAAE,IAAI,YAAY,CAAC,CACnC,YAAY,CAAE,IAAI,YAAY,CAAC,CAC/B,KAAK,CAAE,IAAI,OAAO,CAAC,AACvB,CAAC,AAED,sBAAQ,MAAM,AAAC,CAAC,AACZ,gBAAgB,CAAE,IAAI,WAAW,CAAC,CAClC,YAAY,CAAE,IAAI,WAAW,CAAC,AAClC,CAAC,AAED,sBAAQ,OAAO,AAAC,CAAC,AACb,gBAAgB,CAAE,IAAI,aAAa,CAAC,CACpC,YAAY,CAAE,IAAI,aAAa,CAAC,AACpC,CAAC,AAED,gBAAgB,cAAC,CAAC,AACd,gBAAgB,CAAE,IAAI,OAAO,CAAC,CAC9B
}