diff --git a/packages/bootstrap-components/.gitignore b/packages/bootstrap-components/.gitignore
new file mode 100644
index 0000000000..2986122cff
--- /dev/null
+++ b/packages/bootstrap-components/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+yarn.lock
+package-lock.json
+dist/index.js
diff --git a/packages/bootstrap-components/README.md b/packages/bootstrap-components/README.md
new file mode 100644
index 0000000000..71e531fc9d
--- /dev/null
+++ b/packages/bootstrap-components/README.md
@@ -0,0 +1,33 @@
+*Psst — looking for an app template? Go here --> [sveltejs/template](https://github.com/sveltejs/template)*
+
+---
+
+# component-template
+
+A base for building shareable Svelte components. Clone it with [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/component-template my-new-component
+cd my-new-component
+npm install # or yarn
+```
+
+Your component's source code lives in `src/index.html`.
+
+TODO
+
+* [ ] some firm opinions about the best way to test components
+* [ ] update `degit` so that it automates some of the setup work
+
+
+## Setting up
+
+* Run `npm init` (or `yarn init`)
+* Replace this README with your own
+
+
+## Consuming components
+
+Your package.json has a `"svelte"` field pointing to `src/index.html`, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader) (where [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config includes `"svelte"`). **This is recommended.**
+
+For everyone else, `npm run build` will bundle your component's source code into a plain JavaScript module (`index.mjs`) and a UMD script (`index.js`). This will happen automatically when you publish your component to npm, courtesy of the `prepublishOnly` hook in package.json.
diff --git a/packages/bootstrap-components/components.json b/packages/bootstrap-components/components.json
new file mode 100644
index 0000000000..e80c0c36a4
--- /dev/null
+++ b/packages/bootstrap-components/components.json
@@ -0,0 +1,255 @@
+{
+ "_lib": "./dist/index.js",
+ "_generators": {
+ "_lib": "./dist/generators.js",
+ "app": {
+ "name": "App",
+ "description": "Generate app based on your backend"
+ },
+ "forms": {
+ "name": "Forms",
+ "description": "Generate forms, based on your records"
+ },
+ "buttons": {
+ "name": "Buttons",
+ "description": "Generate some styled buttons"
+ },
+ "headers": {
+ "name": "Headers",
+ "description": "Generate some styled headings"
+ },
+ "nav": {
+ "name": "Nav bar",
+ "description": "Generate a nav bar, based n your root records"
+ },
+ "indexTables": {
+ "name": "Nav bar",
+ "description": "Generate a table based on an index"
+ }
+ },
+ "button" : {
+ "importPath": "button",
+ "name": "Button",
+ "description": "an html ",
+ "props": {
+ "contentText": { "type": "string", "default": "Button" },
+ "contentComponent": "component",
+ "className": {"type": "string", "default": "default"},
+ "disabled": "bool",
+ "onClick": "event",
+ "background": "string",
+ "color": "string",
+ "border": "string",
+ "padding": "string",
+ "hoverColor": "string",
+ "hoverBackground": "string",
+ "hoverBorder": "string"
+ },
+ "tags": ["button"]
+ },
+ "login" : {
+ "importPath": "Login",
+ "name": "Login Control",
+ "description": "A control that accepts username, password an also handles password resets",
+ "props" : {
+ "logo": "asset",
+ "loginRedirect": "string",
+ "usernameLabel": {"type":"string", "default": "Username"},
+ "passwordLabel": {"type":"string", "default": "Password"},
+ "loginButtonLabel": {"type":"string", "default": "Login"},
+ "buttonClass": "string",
+ "inputClass": "string"
+ },
+ "tags": ["login", "credentials", "password", "logon"]
+ },
+ "form" : {
+ "importPath": "Form",
+ "name": "Form",
+ "description": "A form - allgned fields with labels",
+ "props" : {
+ "containerClass": "string",
+ "formControls": {
+ "type":"array",
+ "elementDefinition": {
+ "label": "string",
+ "control":"component"
+ }
+ }
+ },
+ "tags": ["form"]
+ },
+ "textbox" : {
+ "importPath": "Textbox",
+ "name": "Textbox",
+ "description": "An input type=text or password",
+ "props" : {
+ "value": "string",
+ "hideValue": "bool",
+ "className": {"type": "string", "default": "default"}
+ },
+ "tags": ["form"]
+ },
+ "stackpanel": {
+ "importPath": "StackPanel",
+ "name": "StackPanel",
+ "description": "Layout elements in a stack, either horizontally or vertically",
+ "props" : {
+ "direction": {
+ "type": "options",
+ "options": ["horizontal", "vertical"],
+ "default":"horizontal"
+ },
+ "children": {
+ "type":"array",
+ "elementDefinition": {
+ "control":"component"
+ }
+ },
+ "width": {"type":"string","default":"auto"},
+ "height": {"type":"string","default":"auto"},
+ "containerClass":"string",
+ "itemContainerClass":"string",
+ "data": "state",
+ "dataItemComponent": "component",
+ "onLoad": "event"
+ },
+ "tags": ["div", "container", "layout", "panel"]
+ },
+ "grid": {
+ "importPath": "Grid",
+ "name": "Grid",
+ "description": "CSS Grid layout ",
+ "props" : {
+ "gridTemplateRows": "string",
+ "gridTemplateColumns": "string",
+ "children": {
+ "type":"array",
+ "elementDefinition": {
+ "control":"component",
+ "gridColumn":"string",
+ "gridRow":"string",
+ "gridColumnStart":"string",
+ "gridColumnEnd":"string",
+ "gridRowStart":"string",
+ "gridRowEnd":"string"
+ }
+ },
+ "width": {"type":"string","default":"auto"},
+ "height": {"type":"string","default":"auto"},
+ "containerClass":"string",
+ "itemContainerClass":"string"
+ },
+ "tags": ["div", "container", "layout", "panel", "grid"]
+ },
+ "text": {
+ "importPath": "Text",
+ "name": "Text",
+ "description": "stylable block of text",
+ "props" : {
+ "value": "string",
+ "containerClass": "string",
+ "font": "string",
+ "color": "string",
+ "textAlign": {
+ "type": "options",
+ "default":"inline",
+ "options": [
+ "left", "center", "right"
+ ]
+ },
+ "verticalAlign": {
+ "type": "options",
+ "default":"inline",
+ "options": [
+ "top", "middle", "bottom"
+ ]
+ },
+ "display": {
+ "type": "options",
+ "default":"inline",
+ "options": [
+ "inline", "block", "inline-block"
+ ]
+ }
+ },
+ "tags": ["div", "container"]
+ },
+ "panel": {
+ "importPath": "Panel",
+ "name": "Panel",
+ "description": "A stylable div with a component inside",
+ "props" : {
+ "text": "string",
+ "component": "component",
+ "containerClass": "string",
+ "background": "string",
+ "border": "string",
+ "borderRadius":"string",
+ "font": "string",
+ "color": "string",
+ "padding": "string",
+ "margin": "string",
+ "hoverColor": "string",
+ "hoverBackground": "string",
+ "height":"string",
+ "width":"string",
+ "onClick": "event",
+ "display": {
+ "type": "options",
+ "default":"inline",
+ "options": [
+ "inline", "block", "inline-block"
+ ]
+ }
+ },
+ "tags": ["div", "container"]
+ },
+ "nav": {
+ "importPath": "Nav",
+ "name": "Nav",
+ "description": "A nav - a side bar of buttons that control the currently active component",
+ "props" : {
+ "navBarBackground": {"type" :"string", "default":"silver"},
+ "navBarBorder": "string",
+ "navBarColor": {"type" :"string", "default":"black"},
+ "selectedItemBackground": {"type" :"string", "default":"white"},
+ "selectedItemColor": {"type" :"string", "default":"black"},
+ "selectedItemBorder": "string",
+ "itemHoverBackground": {"type" :"string", "default":"gainsboro"},
+ "itemHoverColor": {"type" :"string", "default":"black"},
+ "items": {
+ "type": "array",
+ "elementDefinition" : {
+ "title": "string",
+ "component": "component"
+ }
+ },
+ "selectedItem":"string",
+ "hideNavBar":"bool"
+
+ },
+ "tags": ["nav", "navigation", "sidebar"]
+ },
+ "table": {
+ "importPath": "Table",
+ "name": "Table",
+ "description": "An HTML table",
+ "props" : {
+ "data": "state",
+ "columns": {
+ "type": "array",
+ "elementDefinition" : {
+ "title": "string",
+ "value": "string"
+ }
+ },
+ "onRowClick":"event",
+ "tableClass": {"type":"string", "default":"table-default"},
+ "theadClass": {"type":"string", "default":"thead-default"},
+ "tbodyClass": {"type":"string", "default":"tbody-default"},
+ "trClass": {"type":"string", "default":"tr-default"},
+ "thClass": {"type":"string", "default":"th-default"}
+ },
+ "tags": ["table"]
+ }
+}
\ No newline at end of file
diff --git a/packages/bootstrap-components/dist/generators.js b/packages/bootstrap-components/dist/generators.js
new file mode 100644
index 0000000000..67dd2ee24a
--- /dev/null
+++ b/packages/bootstrap-components/dist/generators.js
@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2VuZXJhdG9ycy5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIifQ==
diff --git a/packages/server/appPackages/testApp2/public/main/index.js.map b/packages/bootstrap-components/dist/index.js.map
similarity index 100%
rename from packages/server/appPackages/testApp2/public/main/index.js.map
rename to packages/bootstrap-components/dist/index.js.map
diff --git a/packages/bootstrap-components/package.json b/packages/bootstrap-components/package.json
new file mode 100644
index 0000000000..93d3f496ae
--- /dev/null
+++ b/packages/bootstrap-components/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "@budibase/bootstrap-components",
+ "svelte": "src/index.svelte",
+ "main": "dist/index.js",
+ "module": "dist/index.js",
+ "scripts": {
+ "build": "rollup -c && rollup -c rollup.generatorsconfig.js",
+ "prepublishOnly": "npm run build",
+ "testbuild": "rollup -w -c rollup.testconfig.js",
+ "dev": "run-p start:dev testbuild",
+ "start:dev": "sirv public --single --dev",
+ "publishdev": "yarn build && node ./scripts/publishDev.js"
+ },
+ "devDependencies": {
+ "@budibase/client": "^0.0.11",
+ "fs-extra": "^8.1.0",
+ "lodash": "^4.17.15",
+ "npm-run-all": "^4.1.5",
+ "rollup": "^1.11.0",
+ "rollup-plugin-commonjs": "^10.0.2",
+ "rollup-plugin-json": "^4.0.0",
+ "rollup-plugin-livereload": "^1.0.1",
+ "rollup-plugin-node-resolve": "^5.0.0",
+ "rollup-plugin-svelte": "^5.0.0",
+ "rollup-plugin-terser": "^5.1.1",
+ "shortid": "^2.2.15",
+ "sirv-cli": "^0.4.4",
+ "svelte": "^3.12.1"
+ },
+ "keywords": [
+ "svelte"
+ ],
+ "version": "0.0.11",
+ "license": "MIT",
+ "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
+}
diff --git a/packages/server/appPackages/testApp2/public/_shared/budibase-logo.png b/packages/bootstrap-components/public/budibase-logo.png
similarity index 100%
rename from packages/server/appPackages/testApp2/public/_shared/budibase-logo.png
rename to packages/bootstrap-components/public/budibase-logo.png
diff --git a/packages/bootstrap-components/public/bundle.css b/packages/bootstrap-components/public/bundle.css
new file mode 100644
index 0000000000..238494fab3
--- /dev/null
+++ b/packages/bootstrap-components/public/bundle.css
@@ -0,0 +1,13 @@
+#current_component.svelte-1xqz9vm{height:100%;width:100%}
+.root.svelte-10kw8to{display:grid}
+.root.svelte-crnq0a{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-crnq0a{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-crnq0a{margin-bottom:20px
+}.logo-container.svelte-crnq0a>img.svelte-crnq0a{max-width:100%}.login-button-container.svelte-crnq0a{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-crnq0a{margin-top:30px;padding:10px;border-style:solid;border-width:1px;border-color:maroon;border-radius:1px;text-align:center;color:maroon;background-color:mistyrose}.form-root.svelte-crnq0a{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-crnq0a{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-crnq0a{grid-column-start:control;padding:5px 10px}.default-input.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default-button.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default-button.svelte-crnq0a:active{background-color:#ddd}.default-button.svelte-crnq0a:focus{border-color:#666}
+.form-root.svelte-m9d6ue{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-m9d6ue{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-m9d6ue{grid-column-start:control;padding:5px 10px}.overflow.svelte-m9d6ue{grid-column-start:overflow}.full-width.svelte-m9d6ue{width:100%}
+.root.svelte-aihwli{height:100%;width:100%;grid-template-columns:[navbar] auto [content] 1fr;display:grid}.navbar.svelte-aihwli{grid-column:navbar;background:var(--navBarBackground);border:var(--navBarBorder);color:var(--navBarColor)}.navitem.svelte-aihwli{padding:10px 17px;cursor:pointer}.navitem.svelte-aihwli:hover{background:var(--itemHoverBackground);color:var(--itemHoverColor)}.navitem.selected.svelte-aihwli{background:var(--selectedItemBackground);border:var(--selectedItemBorder);color:var(--selectedItemColor)}.content.svelte-aihwli{grid-column:content}
+.default.svelte-1ec4wqj{width:100%;font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default.svelte-1ec4wqj:disabled{color:#ccc}
+.panel.svelte-6yfcjx:hover{background:var(--hoverBackground);color:var(--hoverColor)}
+.horizontal.svelte-osi0db{display:inline-block}.vertical.svelte-osi0db{display:block}
+.table-default.svelte-h8rqk6{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse}.table-default.svelte-h8rqk6 .thead-default .th-default.svelte-h8rqk6{vertical-align:bottom;border-bottom:2px solid #dee2e6;font-weight:bold}.table-default.svelte-h8rqk6 .th-default.svelte-h8rqk6{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6;font-weight:normal}.th-default.svelte-h8rqk6{text-align:inherit}.table-default.svelte-h8rqk6 .tbody-default .tr-default.svelte-h8rqk6:hover{color:#212529;background-color:rgba(0,0,0,.075);cursor:pointer}
+.default.svelte-1q8lga0{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default.svelte-1q8lga0:active{background-color:#ddd}.default.svelte-1q8lga0:focus{border-color:#666}
+
+/*# sourceMappingURL=bundle.css.map */
\ No newline at end of file
diff --git a/packages/bootstrap-components/public/bundle.css.map b/packages/bootstrap-components/public/bundle.css.map
new file mode 100644
index 0000000000..20454673ef
--- /dev/null
+++ b/packages/bootstrap-components/public/bundle.css.map
@@ -0,0 +1,30 @@
+{
+ "version": 3,
+ "file": "bundle.css",
+ "sources": [
+ "..\\src\\Test\\TestApp.svelte",
+ "..\\src\\Grid.svelte",
+ "..\\src\\Login.svelte",
+ "..\\src\\Form.svelte",
+ "..\\src\\Nav.svelte",
+ "..\\src\\Textbox.svelte",
+ "..\\src\\Panel.svelte",
+ "..\\src\\StackPanel.svelte",
+ "..\\src\\Table.svelte",
+ "..\\src\\Button.svelte"
+ ],
+ "sourcesContent": [
+ "\n\n{#await _appPromise}\nloading\n{:then _bb}\n\n
\n
\n\n{/await}\n\n\n\n\n",
+ "\r\n\r\n\r\n {#each children as child, index}\r\n
\r\n
\r\n {/each}\r\n
\r\n\r\n",
+ "\n\n\n\n
\n\n {#if _logo}\n
\n
\n
\n {/if}\n\n
\n\n
\n \n
\n\n {#if incorrect}\n
\n Incorrect username or password\n
\n {/if}\n\n
\n\n
\n\n",
+ "\n\n\n\n",
+ "\r\n\r\n\r\n {#if !hideNavBar}\r\n
\r\n {#each items as navItem, index}\r\n
\r\n {navItem.title}\r\n
\r\n {/each}\r\n
\r\n {/if}\r\n {#each items as navItem, index}\r\n\r\n
\r\n
\r\n {/each}\r\n
\r\n\r\n\r\n\r\n",
+ "\n\n{#if hideValue}\n\n{:else}\n\n{/if}\n\n",
+ "\r\n\r\n\r\n {component && component._component ? \"\" : text}\r\n
\r\n\r\n\r\n",
+ "\n\n\n\n {#if children}\n {#each children as child, index}\n
\n {/each}\n {/if}\n\n {#if data && data.length > 0}\n {#each data as child, index}\n
\n {/each}\n {/if}\n
\n\n",
+ "\r\n\r\n \r\n \r\n \r\n {#each columns as col}\r\n {col.title} | \r\n {/each}\r\n
\r\n \r\n \r\n {#each data as row}\r\n \r\n {#each columns as col}\r\n {_bb.getStateOrValue(col.value, row)} | \r\n {/each}\r\n
\r\n {/each}\r\n \r\n
\r\n\r\n",
+ "\n\n\n\n\n\n"
+ ],
+ "names": [],
+ "mappings": "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"
+}
\ No newline at end of file
diff --git a/packages/bootstrap-components/public/bundle.js b/packages/bootstrap-components/public/bundle.js
new file mode 100644
index 0000000000..949818b210
--- /dev/null
+++ b/packages/bootstrap-components/public/bundle.js
@@ -0,0 +1,25493 @@
+
+(function(l, i, v, e) { v = l.createElement(i); v.async = 1; v.src = '//' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; e = l.getElementsByTagName(i)[0]; e.parentNode.insertBefore(v, e)})(document, 'script');
+var app = (function () {
+ 'use strict';
+
+ function noop() { }
+ function assign(tar, src) {
+ // @ts-ignore
+ for (const k in src)
+ tar[k] = src[k];
+ return tar;
+ }
+ function is_promise(value) {
+ return value && typeof value === 'object' && typeof value.then === 'function';
+ }
+ function add_location(element, file, line, column, char) {
+ element.__svelte_meta = {
+ loc: { file, line, column, char }
+ };
+ }
+ function run(fn) {
+ return fn();
+ }
+ function blank_object() {
+ return Object.create(null);
+ }
+ function run_all(fns) {
+ fns.forEach(run);
+ }
+ function is_function(thing) {
+ return typeof thing === 'function';
+ }
+ function safe_not_equal(a, b) {
+ return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
+ }
+ function create_slot(definition, ctx, fn) {
+ if (definition) {
+ const slot_ctx = get_slot_context(definition, ctx, fn);
+ return definition[0](slot_ctx);
+ }
+ }
+ function get_slot_context(definition, ctx, fn) {
+ return definition[1]
+ ? assign({}, assign(ctx.$$scope.ctx, definition[1](fn ? fn(ctx) : {})))
+ : ctx.$$scope.ctx;
+ }
+ function get_slot_changes(definition, ctx, changed, fn) {
+ return definition[1]
+ ? assign({}, assign(ctx.$$scope.changed || {}, definition[1](fn ? fn(changed) : {})))
+ : ctx.$$scope.changed || {};
+ }
+ function null_to_empty(value) {
+ return value == null ? '' : value;
+ }
+
+ function append(target, node) {
+ target.appendChild(node);
+ }
+ function insert(target, node, anchor) {
+ target.insertBefore(node, anchor || null);
+ }
+ function detach(node) {
+ node.parentNode.removeChild(node);
+ }
+ function destroy_each(iterations, detaching) {
+ for (let i = 0; i < iterations.length; i += 1) {
+ if (iterations[i])
+ iterations[i].d(detaching);
+ }
+ }
+ function element(name) {
+ return document.createElement(name);
+ }
+ function svg_element(name) {
+ return document.createElementNS('http://www.w3.org/2000/svg', name);
+ }
+ function text(data) {
+ return document.createTextNode(data);
+ }
+ function space() {
+ return text(' ');
+ }
+ function empty() {
+ return text('');
+ }
+ function listen(node, event, handler, options) {
+ node.addEventListener(event, handler, options);
+ return () => node.removeEventListener(event, handler, options);
+ }
+ function attr(node, attribute, value) {
+ if (value == null)
+ node.removeAttribute(attribute);
+ else
+ node.setAttribute(attribute, value);
+ }
+ function children(element) {
+ return Array.from(element.childNodes);
+ }
+ function claim_element(nodes, name, attributes, svg) {
+ for (let i = 0; i < nodes.length; i += 1) {
+ const node = nodes[i];
+ if (node.nodeName === name) {
+ for (let j = 0; j < node.attributes.length; j += 1) {
+ const attribute = node.attributes[j];
+ if (!attributes[attribute.name])
+ node.removeAttribute(attribute.name);
+ }
+ return nodes.splice(i, 1)[0]; // TODO strip unwanted attributes
+ }
+ }
+ return svg ? svg_element(name) : element(name);
+ }
+ function claim_text(nodes, data) {
+ for (let i = 0; i < nodes.length; i += 1) {
+ const node = nodes[i];
+ if (node.nodeType === 3) {
+ node.data = '' + data;
+ return nodes.splice(i, 1)[0];
+ }
+ }
+ return text(data);
+ }
+ function claim_space(nodes) {
+ return claim_text(nodes, ' ');
+ }
+ function set_input_value(input, value) {
+ if (value != null || input.value) {
+ input.value = value;
+ }
+ }
+ function set_style(node, key, value, important) {
+ node.style.setProperty(key, value, important ? 'important' : '');
+ }
+ function toggle_class(element, name, toggle) {
+ element.classList[toggle ? 'add' : 'remove'](name);
+ }
+ function custom_event(type, detail) {
+ const e = document.createEvent('CustomEvent');
+ e.initCustomEvent(type, false, false, detail);
+ return e;
+ }
+
+ let current_component;
+ function set_current_component(component) {
+ current_component = component;
+ }
+ function get_current_component() {
+ if (!current_component)
+ throw new Error(`Function called outside component initialization`);
+ return current_component;
+ }
+ // TODO figure out if we still want to support
+ // shorthand events, or if we want to implement
+ // a real bubbling mechanism
+ function bubble(component, event) {
+ const callbacks = component.$$.callbacks[event.type];
+ if (callbacks) {
+ callbacks.slice().forEach(fn => fn(event));
+ }
+ }
+
+ const dirty_components = [];
+ const binding_callbacks = [];
+ const render_callbacks = [];
+ const flush_callbacks = [];
+ const resolved_promise = Promise.resolve();
+ let update_scheduled = false;
+ function schedule_update() {
+ if (!update_scheduled) {
+ update_scheduled = true;
+ resolved_promise.then(flush);
+ }
+ }
+ function add_render_callback(fn) {
+ render_callbacks.push(fn);
+ }
+ function flush() {
+ const seen_callbacks = new Set();
+ do {
+ // first, call beforeUpdate functions
+ // and update components
+ while (dirty_components.length) {
+ const component = dirty_components.shift();
+ set_current_component(component);
+ update(component.$$);
+ }
+ while (binding_callbacks.length)
+ binding_callbacks.pop()();
+ // then, once components are updated, call
+ // afterUpdate functions. This may cause
+ // subsequent updates...
+ for (let i = 0; i < render_callbacks.length; i += 1) {
+ const callback = render_callbacks[i];
+ if (!seen_callbacks.has(callback)) {
+ callback();
+ // ...so guard against infinite loops
+ seen_callbacks.add(callback);
+ }
+ }
+ render_callbacks.length = 0;
+ } while (dirty_components.length);
+ while (flush_callbacks.length) {
+ flush_callbacks.pop()();
+ }
+ update_scheduled = false;
+ }
+ function update($$) {
+ if ($$.fragment) {
+ $$.update($$.dirty);
+ run_all($$.before_update);
+ $$.fragment.p($$.dirty, $$.ctx);
+ $$.dirty = null;
+ $$.after_update.forEach(add_render_callback);
+ }
+ }
+ const outroing = new Set();
+ let outros;
+ function group_outros() {
+ outros = {
+ r: 0,
+ c: [],
+ p: outros // parent group
+ };
+ }
+ function check_outros() {
+ if (!outros.r) {
+ run_all(outros.c);
+ }
+ outros = outros.p;
+ }
+ function transition_in(block, local) {
+ if (block && block.i) {
+ outroing.delete(block);
+ block.i(local);
+ }
+ }
+ function transition_out(block, local, detach, callback) {
+ if (block && block.o) {
+ if (outroing.has(block))
+ return;
+ outroing.add(block);
+ outros.c.push(() => {
+ outroing.delete(block);
+ if (callback) {
+ if (detach)
+ block.d(1);
+ callback();
+ }
+ });
+ block.o(local);
+ }
+ }
+
+ function handle_promise(promise, info) {
+ const token = info.token = {};
+ function update(type, index, key, value) {
+ if (info.token !== token)
+ return;
+ info.resolved = key && { [key]: value };
+ const child_ctx = assign(assign({}, info.ctx), info.resolved);
+ const block = type && (info.current = type)(child_ctx);
+ if (info.block) {
+ if (info.blocks) {
+ info.blocks.forEach((block, i) => {
+ if (i !== index && block) {
+ group_outros();
+ transition_out(block, 1, 1, () => {
+ info.blocks[i] = null;
+ });
+ check_outros();
+ }
+ });
+ }
+ else {
+ info.block.d(1);
+ }
+ block.c();
+ transition_in(block, 1);
+ block.m(info.mount(), info.anchor);
+ flush();
+ }
+ info.block = block;
+ if (info.blocks)
+ info.blocks[index] = block;
+ }
+ if (is_promise(promise)) {
+ const current_component = get_current_component();
+ promise.then(value => {
+ set_current_component(current_component);
+ update(info.then, 1, info.value, value);
+ set_current_component(null);
+ }, error => {
+ set_current_component(current_component);
+ update(info.catch, 2, info.error, error);
+ set_current_component(null);
+ });
+ // if we previously had a then/catch block, destroy it
+ if (info.current !== info.pending) {
+ update(info.pending, 0);
+ return true;
+ }
+ }
+ else {
+ if (info.current !== info.then) {
+ update(info.then, 1, info.value, promise);
+ return true;
+ }
+ info.resolved = { [info.value]: promise };
+ }
+ }
+
+ const globals = (typeof window !== 'undefined' ? window : global);
+ function mount_component(component, target, anchor) {
+ const { fragment, on_mount, on_destroy, after_update } = component.$$;
+ fragment.m(target, anchor);
+ // onMount happens before the initial afterUpdate
+ add_render_callback(() => {
+ const new_on_destroy = on_mount.map(run).filter(is_function);
+ if (on_destroy) {
+ on_destroy.push(...new_on_destroy);
+ }
+ else {
+ // Edge case - component was destroyed immediately,
+ // most likely as a result of a binding initialising
+ run_all(new_on_destroy);
+ }
+ component.$$.on_mount = [];
+ });
+ after_update.forEach(add_render_callback);
+ }
+ function destroy_component(component, detaching) {
+ if (component.$$.fragment) {
+ run_all(component.$$.on_destroy);
+ component.$$.fragment.d(detaching);
+ // TODO null out other refs, including component.$$ (but need to
+ // preserve final state?)
+ component.$$.on_destroy = component.$$.fragment = null;
+ component.$$.ctx = {};
+ }
+ }
+ function make_dirty(component, key) {
+ if (!component.$$.dirty) {
+ dirty_components.push(component);
+ schedule_update();
+ component.$$.dirty = blank_object();
+ }
+ component.$$.dirty[key] = true;
+ }
+ function init(component, options, instance, create_fragment, not_equal, prop_names) {
+ const parent_component = current_component;
+ set_current_component(component);
+ const props = options.props || {};
+ const $$ = component.$$ = {
+ fragment: null,
+ ctx: null,
+ // state
+ props: prop_names,
+ update: noop,
+ not_equal,
+ bound: blank_object(),
+ // lifecycle
+ on_mount: [],
+ on_destroy: [],
+ before_update: [],
+ after_update: [],
+ context: new Map(parent_component ? parent_component.$$.context : []),
+ // everything else
+ callbacks: blank_object(),
+ dirty: null
+ };
+ let ready = false;
+ $$.ctx = instance
+ ? instance(component, props, (key, ret, value = ret) => {
+ if ($$.ctx && not_equal($$.ctx[key], $$.ctx[key] = value)) {
+ if ($$.bound[key])
+ $$.bound[key](value);
+ if (ready)
+ make_dirty(component, key);
+ }
+ return ret;
+ })
+ : props;
+ $$.update();
+ ready = true;
+ run_all($$.before_update);
+ $$.fragment = create_fragment($$.ctx);
+ if (options.target) {
+ if (options.hydrate) {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ $$.fragment.l(children(options.target));
+ }
+ else {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ $$.fragment.c();
+ }
+ if (options.intro)
+ transition_in(component.$$.fragment);
+ mount_component(component, options.target, options.anchor);
+ flush();
+ }
+ set_current_component(parent_component);
+ }
+ let SvelteElement;
+ if (typeof HTMLElement !== 'undefined') {
+ SvelteElement = class extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+ }
+ connectedCallback() {
+ // @ts-ignore todo: improve typings
+ for (const key in this.$$.slotted) {
+ // @ts-ignore todo: improve typings
+ this.appendChild(this.$$.slotted[key]);
+ }
+ }
+ attributeChangedCallback(attr, _oldValue, newValue) {
+ this[attr] = newValue;
+ }
+ $destroy() {
+ destroy_component(this, 1);
+ this.$destroy = noop;
+ }
+ $on(type, callback) {
+ // TODO should this delegate to addEventListener?
+ const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
+ callbacks.push(callback);
+ return () => {
+ const index = callbacks.indexOf(callback);
+ if (index !== -1)
+ callbacks.splice(index, 1);
+ };
+ }
+ $set() {
+ // overridden by instance, if it has props
+ }
+ };
+ }
+ class SvelteComponent {
+ $destroy() {
+ destroy_component(this, 1);
+ this.$destroy = noop;
+ }
+ $on(type, callback) {
+ const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
+ callbacks.push(callback);
+ return () => {
+ const index = callbacks.indexOf(callback);
+ if (index !== -1)
+ callbacks.splice(index, 1);
+ };
+ }
+ $set() {
+ // overridden by instance, if it has props
+ }
+ }
+
+ function dispatch_dev(type, detail) {
+ document.dispatchEvent(custom_event(type, detail));
+ }
+ function append_dev(target, node) {
+ dispatch_dev("SvelteDOMInsert", { target, node });
+ append(target, node);
+ }
+ function insert_dev(target, node, anchor) {
+ dispatch_dev("SvelteDOMInsert", { target, node, anchor });
+ insert(target, node, anchor);
+ }
+ function detach_dev(node) {
+ dispatch_dev("SvelteDOMRemove", { node });
+ detach(node);
+ }
+ function listen_dev(node, event, handler, options, has_prevent_default, has_stop_propagation) {
+ const modifiers = options === true ? ["capture"] : options ? Array.from(Object.keys(options)) : [];
+ if (has_prevent_default)
+ modifiers.push('preventDefault');
+ if (has_stop_propagation)
+ modifiers.push('stopPropagation');
+ dispatch_dev("SvelteDOMAddEventListener", { node, event, handler, modifiers });
+ const dispose = listen(node, event, handler, options);
+ return () => {
+ dispatch_dev("SvelteDOMRemoveEventListener", { node, event, handler, modifiers });
+ dispose();
+ };
+ }
+ function attr_dev(node, attribute, value) {
+ attr(node, attribute, value);
+ if (value == null)
+ dispatch_dev("SvelteDOMRemoveAttribute", { node, attribute });
+ else
+ dispatch_dev("SvelteDOMSetAttribute", { node, attribute, value });
+ }
+ function prop_dev(node, property, value) {
+ node[property] = value;
+ dispatch_dev("SvelteDOMSetProperty", { node, property, value });
+ }
+ function set_data_dev(text, data) {
+ data = '' + data;
+ if (text.data === data)
+ return;
+ dispatch_dev("SvelteDOMSetData", { node: text, data });
+ text.data = data;
+ }
+ class SvelteComponentDev extends SvelteComponent {
+ constructor(options) {
+ if (!options || (!options.target && !options.$$inline)) {
+ throw new Error(`'target' is a required option`);
+ }
+ super();
+ }
+ $destroy() {
+ super.$destroy();
+ this.$destroy = () => {
+ console.warn(`Component was already destroyed`); // eslint-disable-line no-console
+ };
+ }
+ }
+
+ const subscriber_queue = [];
+ /**
+ * Create a `Writable` store that allows both updating and reading by subscription.
+ * @param {*=}value initial value
+ * @param {StartStopNotifier=}start start and stop notifications for subscriptions
+ */
+ function writable(value, start = noop) {
+ let stop;
+ const subscribers = [];
+ function set(new_value) {
+ if (safe_not_equal(value, new_value)) {
+ value = new_value;
+ if (stop) { // store is ready
+ const run_queue = !subscriber_queue.length;
+ for (let i = 0; i < subscribers.length; i += 1) {
+ const s = subscribers[i];
+ s[1]();
+ subscriber_queue.push(s, value);
+ }
+ if (run_queue) {
+ for (let i = 0; i < subscriber_queue.length; i += 2) {
+ subscriber_queue[i][0](subscriber_queue[i + 1]);
+ }
+ subscriber_queue.length = 0;
+ }
+ }
+ }
+ }
+ function update(fn) {
+ set(fn(value));
+ }
+ function subscribe(run, invalidate = noop) {
+ const subscriber = [run, invalidate];
+ subscribers.push(subscriber);
+ if (subscribers.length === 1) {
+ stop = start(set) || noop;
+ }
+ run(value);
+ return () => {
+ const index = subscribers.indexOf(subscriber);
+ if (index !== -1) {
+ subscribers.splice(index, 1);
+ }
+ if (subscribers.length === 0) {
+ stop();
+ stop = null;
+ }
+ };
+ }
+ return { set, update, subscribe };
+ }
+
+ /* src\Textbox.svelte generated by Svelte v3.12.1 */
+
+ const file = "src\\Textbox.svelte";
+
+ // (32:0) {:else}
+ function create_else_block(ctx) {
+ var input, input_class_value;
+
+ const block = {
+ c: function create() {
+ input = element("input");
+ this.h();
+ },
+
+ l: function claim(nodes) {
+ input = claim_element(nodes, "INPUT", { class: true, type: true, value: true }, false);
+ var input_nodes = children(input);
+
+ input_nodes.forEach(detach_dev);
+ this.h();
+ },
+
+ h: function hydrate() {
+ attr_dev(input, "class", input_class_value = "" + null_to_empty(ctx.className) + " svelte-1ec4wqj");
+ attr_dev(input, "type", "text");
+ input.value = ctx.actualValue;
+ add_location(input, file, 32, 0, 546);
+ },
+
+ m: function mount(target, anchor) {
+ insert_dev(target, input, anchor);
+ },
+
+ p: function update(changed, ctx) {
+ if ((changed.className) && input_class_value !== (input_class_value = "" + null_to_empty(ctx.className) + " svelte-1ec4wqj")) {
+ attr_dev(input, "class", input_class_value);
+ }
+
+ if (changed.actualValue) {
+ prop_dev(input, "value", ctx.actualValue);
+ }
+ },
+
+ d: function destroy(detaching) {
+ if (detaching) {
+ detach_dev(input);
+ }
+ }
+ };
+ dispatch_dev("SvelteRegisterBlock", { block, id: create_else_block.name, type: "else", source: "(32:0) {:else}", ctx });
+ return block;
+ }
+
+ // (28:0) {#if hideValue}
+ function create_if_block(ctx) {
+ var input, input_class_value, dispose;
+
+ const block = {
+ c: function create() {
+ input = element("input");
+ this.h();
+ },
+
+ l: function claim(nodes) {
+ input = claim_element(nodes, "INPUT", { class: true, type: true, value: true }, false);
+ var input_nodes = children(input);
+
+ input_nodes.forEach(detach_dev);
+ this.h();
+ },
+
+ h: function hydrate() {
+ attr_dev(input, "class", input_class_value = "" + null_to_empty(ctx.className) + " svelte-1ec4wqj");
+ attr_dev(input, "type", "password");
+ input.value = ctx.actualValue;
+ add_location(input, file, 28, 0, 455);
+ dispose = listen_dev(input, "change", ctx.change_handler);
+ },
+
+ m: function mount(target, anchor) {
+ insert_dev(target, input, anchor);
+ },
+
+ p: function update(changed, ctx) {
+ if ((changed.className) && input_class_value !== (input_class_value = "" + null_to_empty(ctx.className) + " svelte-1ec4wqj")) {
+ attr_dev(input, "class", input_class_value);
+ }
+
+ if (changed.actualValue) {
+ prop_dev(input, "value", ctx.actualValue);
+ }
+ },
+
+ d: function destroy(detaching) {
+ if (detaching) {
+ detach_dev(input);
+ }
+
+ dispose();
+ }
+ };
+ dispatch_dev("SvelteRegisterBlock", { block, id: create_if_block.name, type: "if", source: "(28:0) {#if hideValue}", ctx });
+ return block;
+ }
+
+ function create_fragment(ctx) {
+ var if_block_anchor;
+
+ function select_block_type(changed, ctx) {
+ if (ctx.hideValue) return create_if_block;
+ return create_else_block;
+ }
+
+ var current_block_type = select_block_type(null, ctx);
+ var if_block = current_block_type(ctx);
+
+ const block = {
+ c: function create() {
+ if_block.c();
+ if_block_anchor = empty();
+ },
+
+ l: function claim(nodes) {
+ if_block.l(nodes);
+ if_block_anchor = empty();
+ },
+
+ m: function mount(target, anchor) {
+ if_block.m(target, anchor);
+ insert_dev(target, if_block_anchor, anchor);
+ },
+
+ p: function update(changed, ctx) {
+ if (current_block_type === (current_block_type = select_block_type(changed, ctx)) && if_block) {
+ if_block.p(changed, ctx);
+ } else {
+ if_block.d(1);
+ if_block = current_block_type(ctx);
+ if (if_block) {
+ if_block.c();
+ if_block.m(if_block_anchor.parentNode, if_block_anchor);
+ }
+ }
+ },
+
+ i: noop,
+ o: noop,
+
+ d: function destroy(detaching) {
+ if_block.d(detaching);
+
+ if (detaching) {
+ detach_dev(if_block_anchor);
+ }
+ }
+ };
+ dispatch_dev("SvelteRegisterBlock", { block, id: create_fragment.name, type: "component", source: "", ctx });
+ return block;
+ }
+
+ function instance($$self, $$props, $$invalidate) {
+ let { value="", hideValue = false, className = "default", _bb } = $$props;
+
+ let actualValue = "";
+
+ const writable_props = ['value', 'hideValue', 'className', '_bb'];
+ Object.keys($$props).forEach(key => {
+ if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(` was created with unknown prop '${key}'`);
+ });
+
+ function change_handler(event) {
+ bubble($$self, event);
+ }
+
+ $$self.$set = $$props => {
+ if ('value' in $$props) $$invalidate('value', value = $$props.value);
+ if ('hideValue' in $$props) $$invalidate('hideValue', hideValue = $$props.hideValue);
+ if ('className' in $$props) $$invalidate('className', className = $$props.className);
+ if ('_bb' in $$props) $$invalidate('_bb', _bb = $$props._bb);
+ };
+
+ $$self.$capture_state = () => {
+ return { value, hideValue, className, _bb, actualValue };
+ };
+
+ $$self.$inject_state = $$props => {
+ if ('value' in $$props) $$invalidate('value', value = $$props.value);
+ if ('hideValue' in $$props) $$invalidate('hideValue', hideValue = $$props.hideValue);
+ if ('className' in $$props) $$invalidate('className', className = $$props.className);
+ if ('_bb' in $$props) $$invalidate('_bb', _bb = $$props._bb);
+ if ('actualValue' in $$props) $$invalidate('actualValue', actualValue = $$props.actualValue);
+ };
+
+ $$self.$$.update = ($$dirty = { _bb: 1, value: 1 }) => {
+ if ($$dirty._bb || $$dirty.value) { {
+ if(_bb && value._isstate) {
+ _bb.store.subscribe(s => {
+ $$invalidate('actualValue', actualValue = _bb.store.getValue(s, value));
+ });
+ }
+ } }
+ };
+
+ return {
+ value,
+ hideValue,
+ className,
+ _bb,
+ actualValue,
+ change_handler
+ };
+ }
+
+ class Textbox extends SvelteComponentDev {
+ constructor(options) {
+ super(options);
+ init(this, options, instance, create_fragment, safe_not_equal, ["value", "hideValue", "className", "_bb"]);
+ dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "Textbox", options, id: create_fragment.name });
+
+ const { ctx } = this.$$;
+ const props = options.props || {};
+ if (ctx._bb === undefined && !('_bb' in props)) {
+ console.warn(" was created without expected prop '_bb'");
+ }
+ }
+
+ get value() {
+ throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
+ }
+
+ set value(value) {
+ throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
+ }
+
+ get hideValue() {
+ throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
+ }
+
+ set hideValue(value) {
+ throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
+ }
+
+ get className() {
+ throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
+ }
+
+ set className(value) {
+ throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
+ }
+
+ get _bb() {
+ throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
+ }
+
+ set _bb(value) {
+ throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
+ }
+ }
+
+ /* src\Form.svelte generated by Svelte v3.12.1 */
+
+ const file$1 = "src\\Form.svelte";
+
+ function get_each_context(ctx, list, i) {
+ const child_ctx = Object.create(ctx);
+ child_ctx.child = list[i];
+ child_ctx.index = i;
+ return child_ctx;
+ }
+
+ // (30:4) {#each formControls as child, index}
+ function create_each_block(ctx) {
+ var div0, t0_value = ctx.labels[ctx.index] + "", t0, t1, div1, index = ctx.index;
+
+ const assign_div1 = () => ctx.div1_binding(div1, index);
+ const unassign_div1 = () => ctx.div1_binding(null, index);
+
+ const block = {
+ c: function create() {
+ div0 = element("div");
+ t0 = text(t0_value);
+ t1 = space();
+ div1 = element("div");
+ this.h();
+ },
+
+ l: function claim(nodes) {
+ div0 = claim_element(nodes, "DIV", { class: true }, false);
+ var div0_nodes = children(div0);
+
+ t0 = claim_text(div0_nodes, t0_value);
+ div0_nodes.forEach(detach_dev);
+ t1 = claim_space(nodes);
+
+ div1 = claim_element(nodes, "DIV", { class: true }, false);
+ var div1_nodes = children(div1);
+
+ div1_nodes.forEach(detach_dev);
+ this.h();
+ },
+
+ h: function hydrate() {
+ attr_dev(div0, "class", "label svelte-m9d6ue");
+ add_location(div0, file$1, 30, 4, 559);
+ attr_dev(div1, "class", "control svelte-m9d6ue");
+ add_location(div1, file$1, 31, 4, 604);
+ },
+
+ m: function mount(target, anchor) {
+ insert_dev(target, div0, anchor);
+ append_dev(div0, t0);
+ insert_dev(target, t1, anchor);
+ insert_dev(target, div1, anchor);
+ assign_div1();
+ },
+
+ p: function update(changed, new_ctx) {
+ ctx = new_ctx;
+ if ((changed.labels) && t0_value !== (t0_value = ctx.labels[ctx.index] + "")) {
+ set_data_dev(t0, t0_value);
+ }
+
+ if (index !== ctx.index) {
+ unassign_div1();
+ index = ctx.index;
+ assign_div1();
+ }
+ },
+
+ d: function destroy(detaching) {
+ if (detaching) {
+ detach_dev(div0);
+ detach_dev(t1);
+ detach_dev(div1);
+ }
+
+ unassign_div1();
+ }
+ };
+ dispatch_dev("SvelteRegisterBlock", { block, id: create_each_block.name, type: "each", source: "(30:4) {#each formControls as child, index}", ctx });
+ return block;
+ }
+
+ function create_fragment$1(ctx) {
+ var div, div_class_value;
+
+ let each_value = ctx.formControls;
+
+ let each_blocks = [];
+
+ for (let i = 0; i < each_value.length; i += 1) {
+ each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+ }
+
+ const block = {
+ c: function create() {
+ div = element("div");
+
+ for (let i = 0; i < each_blocks.length; i += 1) {
+ each_blocks[i].c();
+ }
+ this.h();
+ },
+
+ l: function claim(nodes) {
+ div = claim_element(nodes, "DIV", { class: true }, false);
+ var div_nodes = children(div);
+
+ for (let i = 0; i < each_blocks.length; i += 1) {
+ each_blocks[i].l(div_nodes);
+ }
+
+ div_nodes.forEach(detach_dev);
+ this.h();
+ },
+
+ h: function hydrate() {
+ attr_dev(div, "class", div_class_value = "form-root " + ctx.containerClass + " svelte-m9d6ue");
+ add_location(div, file$1, 28, 0, 473);
+ },
+
+ m: function mount(target, anchor) {
+ insert_dev(target, div, anchor);
+
+ for (let i = 0; i < each_blocks.length; i += 1) {
+ each_blocks[i].m(div, null);
+ }
+ },
+
+ p: function update(changed, ctx) {
+ if (changed.htmlElements || changed.labels || changed.formControls) {
+ each_value = ctx.formControls;
+
+ let i;
+ for (i = 0; i < each_value.length; i += 1) {
+ const child_ctx = get_each_context(ctx, each_value, i);
+
+ if (each_blocks[i]) {
+ each_blocks[i].p(changed, child_ctx);
+ } else {
+ each_blocks[i] = create_each_block(child_ctx);
+ each_blocks[i].c();
+ each_blocks[i].m(div, null);
+ }
+ }
+
+ for (; i < each_blocks.length; i += 1) {
+ each_blocks[i].d(1);
+ }
+ each_blocks.length = each_value.length;
+ }
+
+ if ((changed.containerClass) && div_class_value !== (div_class_value = "form-root " + ctx.containerClass + " svelte-m9d6ue")) {
+ attr_dev(div, "class", div_class_value);
+ }
+ },
+
+ i: noop,
+ o: noop,
+
+ d: function destroy(detaching) {
+ if (detaching) {
+ detach_dev(div);
+ }
+
+ destroy_each(each_blocks, detaching);
+ }
+ };
+ dispatch_dev("SvelteRegisterBlock", { block, id: create_fragment$1.name, type: "component", source: "", ctx });
+ return block;
+ }
+
+ function instance$1($$self, $$props, $$invalidate) {
+ let { containerClass = "", formControls = [], _bb } = $$props;
+
+ let htmlElements = {};
+ let labels = {};
+
+ const writable_props = ['containerClass', 'formControls', '_bb'];
+ Object.keys($$props).forEach(key => {
+ if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(`