@tomino/dynamic-form-semantic-ui/public/luis-client.js

Semantic UI form renderer based on dynamic form generation

(function(FuseBox){FuseBox.$fuse$=FuseBox;
FuseBox.target = "browser";
// allowSyntheticDefaultImports
FuseBox.sdep = true;
var __process_env__ = {"NODE_ENV":"test"};
FuseBox.pkg("default", {}, function(___scope___){
___scope___.file("luis_app.js", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const luis_1 = require("luis");
if (!global.process) {
    global.process = { env: { NODE_ENV: 'development' } };
}
require("semantic-ui-css/semantic.css");
const react_router_1 = require("luis/proxies/react-router");
const apollo_1 = require("luis/proxies/apollo");
const proxy_store_1 = require("luis/client/models/proxy_store");
exports.ApolloProxy = apollo_1.createApolloProxy({
    endpoint: 'http://localhost:4000/graphql'
});
const RouterProxy = { proxy: react_router_1.createRouterProxy(), key: 'router' };
proxy_store_1.ProxyStore.init([exports.ApolloProxy, RouterProxy]);
luis_1.renderLuis({
    loadTests: () => {
        require('**.test');
    }
});
//# sourceMappingURL=luis-client.js.map?tm=1560968381591
});
___scope___.file("apollo/tests/apollo_mutation.test.jsx", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const common_1 = require("../../semantic/tests/common");
const form_query_data_1 = require("../../semantic/tests/form_query_data");
const schema = {
    type: 'object',
    properties: {
        people: {
            type: 'array',
            items: {
                type: 'object',
                properties: {
                    name: { type: 'string' },
                    sex: { type: 'string' }
                }
            }
        }
    }
};
const withFakeData = (data) => [
    {
        control: 'Stack',
        props: {
            layout: 'column',
            gap: '3px'
        },
        elements: [
            {
                control: 'ApolloMutation',
                props: {
                    fakeData: data,
                    clickHandler: 'mutate',
                    mutation: `mutation Mutate {
          mutate {
            name
            sex
          }
        }`,
                    target: 'people',
                    loadingText: 'Loading ...'
                },
                elements: [
                    {
                        control: 'Button',
                        props: {
                            content: 'Mutate',
                            onClick: 'mutate'
                        }
                    },
                    {
                        control: 'Repeater',
                        props: { value: { source: 'people' } },
                        elements: [
                            {
                                control: 'Stack',
                                elements: [
                                    {
                                        control: 'Text',
                                        props: { value: { source: 'name' } }
                                    },
                                    {
                                        control: 'Text',
                                        props: { value: ':\xa0' }
                                    },
                                    {
                                        control: 'Text',
                                        props: { value: { source: 'sex' } }
                                    }
                                ]
                            },
                            null,
                            null
                        ]
                    }
                ]
            }
        ]
    }
];
const formDefinition = form_query_data_1.create.stack({
    elements: [
        {
            control: 'Text',
            props: {
                value: 'Empty'
            }
        },
        {
            control: 'ApolloProvider',
            props: {
                server: 'http://localhost:4000/graphql',
                auth: false
            },
            elements: []
        },
        {
            control: 'Text',
            props: {
                value: 'Real Data'
            }
        },
        {
            control: 'ApolloProvider',
            props: {
                server: 'http://localhost:4000/graphql',
                auth: false,
                disable: false
            },
            elements: withFakeData(null)
        },
        {
            control: 'Text',
            props: {
                value: 'Fake Data'
            }
        },
        {
            control: 'ApolloProvider',
            props: {
                server: 'http://localhost:4000/graphql',
                auth: false,
                disable: false
            },
            elements: withFakeData(JSON.stringify({
                mutate: [
                    { __typename: 'Person', name: 'Tomas', sex: 'Male' },
                    { __typename: 'Person', name: 'Valeria', sex: 'Female' }
                ]
            }))
        }
    ]
});
const formData = {};
describe('Apollo', () => {
    describe('Mutation', () => {
        return {
            component: common_1.prepareComponent(formDefinition, schema, formData, { addEditor: true })
        };
    });
});
//# sourceMappingURL=apollo_mutation.test.js.map
});
___scope___.file("semantic/tests/common.jsx", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_test_renderer_1 = tslib_1.__importDefault(require("react-test-renderer"));
const propertyHandlers = tslib_1.__importStar(require("../../editor/properties/property_panel.handlers"));
const semantic_ui_react_1 = require("semantic-ui-react");
const dynamic_form_1 = require("@tomino/dynamic-form");
const mobx_react_1 = require("mobx-react");
require("prismjs/themes/prism.css");
require("prismjs/themes/prism-dark.css");
const form_view_1 = require("../../form_view");
const catalogue_editor_1 = require("../../catalogue_editor");
const tool_box_1 = require("../../editor/toolbox/tool_box");
const form_view_2 = require("../form_view");
const catalogue_1 = require("../../catalogue");
const property_view_1 = require("../../editor/properties/property_view");
const error_boundary_1 = require("../../vanilla/error_boundary");
const context_1 = require("../../context");
const editor_context_1 = require("../../editor/editor_context");
const editor_state_1 = require("../../editor/editor_state");
const catalogue_2 = require("../../editor/catalogue");
const catalogue_editor_2 = require("../../editor/catalogue_editor");
const helpers_1 = require("../../helpers");
const mobx_1 = require("mobx");
const outline_view_1 = require("../../editor/outline/outline_view");
const editor_styles_1 = require("../../editor/editor_styles");
const componentCatalogue = helpers_1.merge(catalogue_1.catalogue, catalogue_2.catalogue);
const editorComponentCatalogue = helpers_1.merge(catalogue_editor_1.catalogueEditor, catalogue_editor_2.catalogueEditor);
exports.d = 2;
function testStandard(formDefinition, schema, formData) {
    const component = prepareComponent(formDefinition, schema, formData, {
        addEditor: false,
        showReadOnly: false
    });
    const wrapper = react_test_renderer_1.default.create(component());
    require('chai')
        .expect(wrapper)
        .toMatchSnapshot();
}
exports.testStandard = testStandard;
function testReadonly(formDefinition, schema, formData) {
    const component = prepareComponent(formDefinition, schema, formData, {
        addEditor: false,
        showReadOnly: true,
        showStandard: false
    });
    const wrapper = react_test_renderer_1.default.create(component());
    require('chai')
        .expect(wrapper)
        .toMatchSnapshot();
}
exports.testReadonly = testReadonly;
function testEditor(formDefinition, schema, formData) {
    const component = prepareComponent(formDefinition, schema, formData, {
        addEditor: true,
        showReadOnly: false,
        showStandard: false,
        showProperties: false,
        showToolBox: false
    });
    const wrapper = react_test_renderer_1.default.create(component());
    require('chai')
        .expect(wrapper)
        .toMatchSnapshot();
}
exports.testEditor = testEditor;
function prepareComponent(formDefinition, schema, data, { addEditor = false, showToolBox = true, showReadOnly = false, showStandard = true, showProperties = true, showOutline = false, validate = false, handlers = {} } = {}) {
    return function component() {
        const form = new dynamic_form_1.FormModel(formDefinition, schema, data);
        let context = null;
        if (addEditor) {
            context = new editor_state_1.EditorState(componentCatalogue, editorComponentCatalogue, handlers);
            context.load({
                form: form.formDefinition,
                schema
            }, false);
            if (validate) {
                form.validateWithReport();
            }
        }
        return (react_1.default.createElement(TestComponent, { form: form, context: context, handlers: handlers, showToolbox: showToolBox, showOutline: showOutline, showStandard: showStandard, showReadOnly: showReadOnly, showProperties: showProperties }));
    };
}
exports.prepareComponent = prepareComponent;
let TestComponent = class TestComponent extends react_1.default.Component {
    render() {
        const { form, context, handlers } = this.props;
        return (react_1.default.createElement(error_boundary_1.ErrorBoundary, null,
            react_1.default.createElement(context_1.Context.Provider, { value: {
                    auth: mobx_1.observable({ user: null }),
                    alert: null,
                    app: {},
                    authToken: null
                } },
                react_1.default.createElement(semantic_ui_react_1.Segment, null,
                    this.props.showStandard && (react_1.default.createElement(react_1.default.Fragment, null,
                        react_1.default.createElement(semantic_ui_react_1.Header, { content: "Standard", dividing: true }),
                        react_1.default.createElement(form_view_2.SemanticFormView, { formElement: form, owner: form.dataSet, readOnly: false, handlers: handlers, catalogue: componentCatalogue }))),
                    this.props.showReadonly && (react_1.default.createElement(react_1.default.Fragment, null,
                        react_1.default.createElement(semantic_ui_react_1.Header, { content: "Readonly", dividing: true }),
                        react_1.default.createElement(form_view_2.SemanticFormView, { formElement: form, owner: form.dataSet, readOnly: true, handlers: handlers, catalogue: componentCatalogue }))),
                    context && (react_1.default.createElement(editor_context_1.EditorContext.Provider, { value: context },
                        react_1.default.createElement(semantic_ui_react_1.Header, { content: "Editor", dividing: true }),
                        react_1.default.createElement("div", { style: { display: 'flex' } },
                            this.props.showToolbox && (react_1.default.createElement("div", { style: { position: 'relative', flexBasis: '200px', paddingRight: '12px' } },
                                react_1.default.createElement(tool_box_1.ToolBox, { catalogue: catalogue_editor_1.catalogueEditor }))),
                            this.props.showOutline && (react_1.default.createElement("div", { style: { position: 'relative', flexBasis: '200px', paddingRight: '12px' } },
                                react_1.default.createElement(editor_styles_1.List, null,
                                    react_1.default.createElement(outline_view_1.OutlineView, { catalogue: catalogue_editor_1.catalogueEditor })))),
                            react_1.default.createElement("div", { style: { flex: '1' } },
                                react_1.default.createElement(form_view_1.FormView, { formElement: context.form, owner: form.dataSet, readOnly: false, handlers: handlers, catalogue: editorComponentCatalogue })),
                            context && this.props.showProperties && (react_1.default.createElement("div", { style: {
                                    padding: '12px',
                                    flexBasis: '350px',
                                    minHeight: '600px',
                                    position: 'relative'
                                } },
                                react_1.default.createElement(property_view_1.PropertyEditor, { handlers: propertyHandlers }))))))))));
    }
};
TestComponent = tslib_1.__decorate([
    mobx_react_1.observer
], TestComponent);
exports.TestComponent = TestComponent;
//# sourceMappingURL=common.js.map
});
___scope___.file("editor/properties/property_panel.handlers.jsx", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const helpers_1 = require("../../helpers");
const controlVisibility = (controls) => ({ owner }) => {
    return controls.indexOf(owner.control) >= 0;
};
const controlInvisibility = (controls) => ({ owner }) => {
    return controls.indexOf(owner.control) === -1;
};
const parentControlVisibility = (controls) => ({ owner }) => {
    return controls.indexOf(owner.parent.control) >= 0;
};
exports.elementWithSource = ({ owner, context }) => {
    const editorElement = context.editorCatalogue.components[owner.control];
    return editorElement ? editorElement.bound : false;
};
exports.readonlyElements = controlInvisibility(['Text', 'Image', 'Value']);
exports.textVisibleHandler = controlVisibility(['Text', 'Link']);
exports.gridVisibleHandler = controlVisibility(['Grid']);
exports.verticalVisibleHandler = controlVisibility(['Radio', 'Checkbox']);
exports.parentGridVisibleHandler = parentControlVisibility(['Grid']);
exports.parentStackVisibleHandler = parentControlVisibility(['Stack']);
function clickApproveHandler() {
}
exports.clickApproveHandler = clickApproveHandler;
function buildDatasetPaths(element, parent = '', parentPaths = '') {
    let result = [];
    let adjustedPath = parentPaths + '.';
    for (let key of Object.keys(element.properties || {})) {
        let current = element.properties[key];
        let parentPath = (parent ? parent + '.' : '') + key;
        if (parentPaths) {
            if (parentPath.substring(0, adjustedPath.length) === adjustedPath) {
                result.push(parentPath.replace(adjustedPath, ''));
            }
        }
        else {
            result.push(parentPath);
        }
        if (current.type === 'object') {
            result.push(...buildDatasetPaths(current, parentPath, parentPaths));
        }
        else if (parentPaths &&
            current.type === 'array' &&
            current.items &&
            current.items.type === 'object') {
            result.push(...buildDatasetPaths(current.items, parentPath, parentPaths));
        }
    }
    return result;
}
exports.datasetSource = ({ owner, context }) => {
    let parent = owner.parent;
    let parentPath = '';
    while (parent.parent != null) {
        parent = parent.parent;
        const control = context.editorCatalogue.components[parent.control];
        if (control &&
            control.valueProvider &&
            parent.props &&
            parent.props.value &&
            parent.props.value.source) {
            parentPath = parent.props.value.source + (parentPath ? '.' : '') + parentPath;
        }
    }
    let schema = helpers_1.schemaDatasetToJS(context.schema);
    let paths = buildDatasetPaths(schema, '', parentPath);
    let all = buildDatasetPaths(schema);
    let array = [{ text: 'Item', value: '__item', disabled: false }];
    const values = [{ text: 'None', value: '', disabled: false }]
        .concat(array)
        .concat(paths.sort().map(p => ({ text: p, value: p, disabled: false })))
        .concat(parentPath !== ''
        ? [{ text: 'GLOBAL', value: '__global', disabled: true }].concat(all.sort().map(p => ({ text: p, value: '/' + p, disabled: false })))
        : []);
    return values;
};
exports.optionsHandlers = ({ context }) => {
    return [{ text: 'None', value: '' }].concat(context.projectHandlers.filter(h => h !== '__esModule').map(h => ({ value: h, text: h })));
};
//# sourceMappingURL=property_panel.handlers.js.map
});
___scope___.file("helpers.js", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const mobx_1 = require("mobx");
const context_1 = require("./context");
function merge(...catalogues) {
    if (!catalogues.some(c => c.createComponent)) {
        throw new Error('The catalogue needs to define a createComponent function!');
    }
    return {
        createComponent: catalogues.find(c => c.createComponent).createComponent,
        cssClass: catalogues.map(c => (c.cssClass ? c.cssClass + ' ' : '')).join(''),
        components: Object.assign({}, ...catalogues.map(c => c.components))
    };
}
exports.merge = merge;
const composites = ['definitions', 'properties', 'items'];
function schemaDatasetToJS(schema, faker = true) {
    let result = cleanSchemaDataset(mobx_1.toJS(schema), faker);
    if (!result) {
        return null;
    }
    if (result.type === 'object' && !result.properties) {
        result.properties = {};
    }
    return result;
}
exports.schemaDatasetToJS = schemaDatasetToJS;
function formDatasetToJS(form) {
    return cleanForm(mobx_1.toJS(form));
}
exports.formDatasetToJS = formDatasetToJS;
function cleanForm(form) {
    if (!form) {
        return null;
    }
    let result = {};
    for (let key of Object.getOwnPropertyNames(form)) {
        if (key === 'parent' || key === 'isSelected') {
            continue;
        }
        let value = form[key];
        if (Array.isArray(value)) {
            if (value.length > 0) {
                result[key] = value.map(v => (typeof v === 'object' ? cleanForm(v) : v));
            }
        }
        else if (value != null && typeof value === 'object') {
            if (Object.getOwnPropertyNames(value).length > 0) {
                result[key] = cleanForm(value);
            }
        }
        else if (value) {
            result[key] = value;
        }
    }
    if (Object.keys(result).length === 0) {
        return undefined;
    }
    return result;
}
function cleanSchemaDataset(schema, faker) {
    const cleaned = {};
    if (schema == null) {
        return;
    }
    let keys = Object.getOwnPropertyNames(schema || {});
    for (let key of keys) {
        let value = schema[key];
        if (value == null || value === '') {
            continue;
        }
        if (key === 'errors' || key === 'imports' || typeof schema[key] === 'function') {
        }
        else if (key === 'reference') {
            if (faker) {
                cleaned.properties = cleanSchemaDataset(schema.reference.properties, faker);
            }
        }
        else if (composites.indexOf(key) >= 0) {
            if ((faker || !schema.$ref) && value && Object.getOwnPropertyNames(value).length > 0) {
                cleaned[key] = cleanSchemaDataset(schema[key], faker);
            }
        }
        else if (key === '$enum') {
            if (schema.$enum.length > 0) {
                cleaned.enum = schema.$enum.map((e) => e.value);
                cleaned.$enum = schema.$enum.map((e) => ({
                    text: e.text,
                    value: e.value,
                    icon: e.icon
                }));
            }
        }
        else if (Array.isArray(value)) {
            if (value.length > 0) {
                cleaned[key] = value.map(v => (typeof v === 'object' ? cleanSchemaDataset(v, faker) : v));
            }
        }
        else if (typeof value === 'object') {
            if (Object.getOwnPropertyNames(value).length > 0) {
                cleaned[key] = cleanSchemaDataset(value, faker);
            }
        }
        else {
            cleaned[key] = value;
        }
    }
    if (faker) {
        if (schema.properties) {
            cleaned.required = Object.getOwnPropertyNames(schema.properties);
        }
    }
    return cleaned;
}
function simpleHandle(props, handleName, context, args) {
    return handle(props.handlers, handleName, props.owner, props, props.formElement, context, args);
}
exports.simpleHandle = simpleHandle;
function handle(handlers, handle, owner, props, formElement, context, args) {
    if (!handlers[handle]) {
        console.error('Handler does not exist: ' + handle);
        return;
    }
    return handle && handlers[handle]
        ? handlers[handle]({ owner, props, formElement, context, args })
        : null;
}
exports.handle = handle;
function bindGetValue(props, context) {
    return function (element, propName, defaultValue) {
        return getPropValue(props, element, context, propName, defaultValue);
    };
}
exports.bindGetValue = bindGetValue;
function getValues(props, ...propNames) {
    const context = react_1.default.useContext(context_1.Context);
    return propNames.map(p => getPropValue(props, props.formElement, context, p));
}
exports.getValues = getValues;
function getValue(props, context, propName, defaultValue, path = '') {
    return getPropValue(props, props.formElement, context, propName, defaultValue, path);
}
exports.getValue = getValue;
function getPropValue(props, formElement, context, propName = undefined, defaultValue = undefined, path = '') {
    if (!propName) {
        propName = 'value';
    }
    let prop = formElement.props ? formElement.props[propName] : null;
    if (prop == null) {
        return defaultValue;
    }
    if (typeof prop !== 'object' || Array.isArray(prop)) {
        return prop;
    }
    if (prop.value != null) {
        return prop.value;
    }
    else if (prop.handler) {
        return handle(props.handlers, prop.handler, props.owner, props, props.formElement, context);
    }
    else if (prop.source) {
        return props.owner.getValue
            ? props.owner.getValue(prop.source + path)
            : props.owner[prop.source];
    }
    return defaultValue === null ? '' : defaultValue;
}
exports.getPropValue = getPropValue;
function safeGetValue(props, context, propName = null, defaultValue = null) {
    let value = getValue(props, context, propName, defaultValue);
    if (value == null) {
        return value;
    }
    return value.toString();
}
exports.safeGetValue = safeGetValue;
function setValue(props, context, value, propName = undefined, path = '') {
    setPropValue(props, props.owner, context, value, propName, path);
}
exports.setValue = setValue;
function setPropValue(props, owner, context, value, propName = undefined, path = '') {
    if (!propName) {
        propName = 'value';
    }
    let prop = props.formElement.props[propName];
    if (prop == null) {
        return;
    }
    if (typeof prop !== 'object') {
        owner.setValue(propName, value);
    }
    if (prop.parse) {
        handle(props.handlers, prop.parse, props.owner, props, props.formElement, context, {
            current: value,
            previous: getValue(props, context, propName)
        });
        return;
    }
    if (prop.source) {
        owner.setValue(prop.source, path ? { [path.substring(1)]: value } : value, prop.validate ? props.handlers[prop.validate] : undefined);
    }
    else if (prop.handler) {
        handle(props.handlers, prop.handler, props.owner, props, context, value);
    }
}
exports.setPropValue = setPropValue;
function prop(formElement, propName = 'value', type = 'source') {
    return formElement && formElement.props && formElement.props[propName]
        ? formElement.props[propName][type]
        : null;
}
exports.prop = prop;
function isNullOrEmpty(val) {
    return val == null || val == '';
}
exports.isNullOrEmpty = isNullOrEmpty;
function valueSource(formElement) {
    return prop(formElement, 'value', 'source');
}
exports.valueSource = valueSource;
function valueHandler(formElement) {
    return prop(formElement, 'value', 'handler');
}
exports.valueHandler = valueHandler;
function value(formElement) {
    return prop(formElement, 'value', 'value');
}
exports.value = value;
function stripUid(obj) {
    if (obj.uid) {
        delete obj.uid;
    }
    for (let key of Object.keys(obj)) {
        let property = obj[key];
        if (property.uid) {
            delete property.uid;
        }
        if (Array.isArray(property)) {
            for (let e of property) {
                stripUid(e);
            }
        }
        else if (typeof property === 'object') {
            stripUid(property);
        }
    }
    return obj;
}
function clone(dataset) {
    return stripUid(formDatasetToJS(dataset));
}
exports.clone = clone;
function parseProps(props, context) {
    const value = getValue(props, context, undefined, undefined) || '';
    const controlSource = valueSource(props.formElement);
    let error = '';
    let disabled = false;
    const label = getValue(props, context, 'label');
    if (controlSource !== '' && props.owner.getSchema(controlSource, false) != null) {
        error = controlSource ? props.owner.getError(controlSource) : null;
        disabled = props.readOnly || (controlSource && props.owner.getSchema(controlSource).readOnly);
    }
    return { value, label, error, disabled };
}
exports.parseProps = parseProps;
function processControl(props, createCallback = true) {
    const context = react_1.default.useContext(context_1.Context);
    const { formElement, owner } = props;
    let handleChange;
    if (createCallback) {
        handleChange = react_1.default.useCallback((e, uiProps) => {
            const source = valueSource(formElement);
            if (!source) {
                return;
            }
            setValue(props, context, uiProps.checked != null
                ? uiProps.checked
                : uiProps.value != null
                    ? uiProps.value
                    : e.currentTarget.checked !== undefined
                        ? e.currentTarget.checked
                        : e.currentTarget.value);
            const changeHandler = props.formElement.props.onChange;
            if (changeHandler) {
                simpleHandle(props, changeHandler, context);
            }
        }, [context, formElement, props]);
    }
    const { error, value, disabled } = parseProps(props, context);
    const source = valueSource(formElement);
    return {
        context,
        owner,
        formElement,
        error,
        value,
        disabled,
        source,
        handleChange,
        controlProps: formElement.props
    };
}
exports.processControl = processControl;
//# sourceMappingURL=luis-client.js.map?tm=1561468800872
});
___scope___.file("context.js", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const mobx_1 = require("mobx");
exports.context = {
    alert: null,
    authToken: null,
    auth: mobx_1.observable({ user: null }),
    app: {}
};
exports.Context = react_1.default.createContext(exports.context);
//# sourceMappingURL=luis-client.js.map?tm=1560968381591
});
___scope___.file("form_view.jsx", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const mobx_react_1 = require("mobx-react");
const common_1 = require("./common");
const context_1 = require("./context");
const wrapper_1 = require("./wrapper");
const form = common_1.css `
  background: white;
  label: form;
`;
const FormViewComponent = props => {
    const context = React.useContext(context_1.Context);
    const controlProps = props.formElement.props || {};
    const { formElement, owner, extra } = controlProps.onCreate
        ? common_1.handle(props.handlers, controlProps.onCreate, props.owner, props, props.formElement, context)
        : props;
    if (!formElement.elements) {
        return React.createElement("div", null, "Form is empty \u00AF\\_(\u30C4)_/\u00AF");
    }
    return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props, { styleName: common_1.names(props.className, props.catalogue.cssClass, form) }), common_1.createComponents({ ...props, formElement, owner, extra })));
};
exports.FormView = mobx_react_1.observer(FormViewComponent);
//# sourceMappingURL=form_view.js.map
});
___scope___.file("common.jsx", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const emotion_1 = require("emotion");
const mobx_1 = require("mobx");
const toolbelt_1 = require("@tomino/toolbelt");
const helpers_1 = require("./helpers");
var emotion_2 = require("emotion");
exports.css = emotion_2.css;
var common_1 = require("./editor/themes/common");
exports.Theme = common_1.Theme;
var classnames_2 = require("classnames");
exports.names = classnames_2.default;
var context_1 = require("./context");
exports.Context = context_1.Context;
var helpers_2 = require("./helpers");
exports.handle = helpers_2.handle;
exports.getValue = helpers_2.getValue;
exports.isNullOrEmpty = helpers_2.isNullOrEmpty;
exports.prop = helpers_2.prop;
exports.processControl = helpers_2.processControl;
exports.valueSource = helpers_2.valueSource;
var wrapper_1 = require("./wrapper");
exports.DynamicControl = wrapper_1.DynamicComponent;
exports.paintProps = wrapper_1.paintProps;
exports.select = emotion_1.css `
  .react-select__control {
    border: 0px;
    border-radius: 0 !important;
    min-height: 23px;
  }

  .react-select__indicators {
    height: 23px;
  }

  .react-select__indicator {
    padding: 2px;
  }

  .react-select__value-container {
    height: 23px;

    > div {
      /* position: absolute; */
      margin: 0px;
      padding: 0px;
    }
  }

  .react-select__single-value {
    margin-top: 0px;
  }

  .react-select__menu {
    border-radius: 0px;
    margin-top: 2px;
  }

  label: select;
`;
exports.fieldSet = emotion_1.css `
  /* name: fieldset */
  border: solid 1px #ddd;
  border-radius: 5px;
  background-color: #fafafa;

  legend {
    padding: 0px 6px;
    font-weight: bold;
  }
`;
exports.breakingLabel = emotion_1.css `
  display: block;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 3px;
`;
exports.nonBreakingLabel = emotion_1.css `
  display: inline-block;
  font-weight: bold;
  padding-right: 6px;
  margin-top: 3px;
  margin-bottom: 3px;
`;
exports.fullWidth = emotion_1.css `
  width: 100%;
`;
exports.noPadding = emotion_1.css `
  padding: 0px !important;
`;
exports.marginLess = emotion_1.css `
  margin: 0px !important;
`;
exports.pointer = emotion_1.css `
  cursor: pointer !important;
  label: pointer;
`;
const missing = emotion_1.css `
  background: red;
  padding: 3px;
  border-radius: 3px;
  font-weight: bold;
  color: white;
`;
function parseFromOwner(str, owner) {
    try {
        return toolbelt_1.interpolate(str, owner);
    }
    catch (ex) {
        return 'Error parsing string: ' + ex.message;
    }
}
exports.parseFromOwner = parseFromOwner;
function sourceValue(prop) {
    return prop ? prop.source : null;
}
exports.sourceValue = sourceValue;
function handlerValue(prop) {
    return prop ? prop.handler : null;
}
exports.handlerValue = handlerValue;
function root(formElement) {
    let root = formElement;
    while (root.parent != null && (!root.pages || root.pages.length === 0)) {
        root = root.parent;
    }
    return root;
}
exports.root = root;
const extraProps = ['editorLabel'];
function cleanProps(props) {
    const result = {};
    const js = toJS(props);
    for (let key of Object.keys(js)) {
        if (js[key] === '' || js[key] == null || js[key].length === 0 || extraProps.indexOf(key) >= 0) {
            continue;
        }
        result[key] = js[key];
    }
    return result;
}
exports.cleanProps = cleanProps;
function tryInterpolate(text, owner) {
    try {
        return toolbelt_1.interpolate(text, owner);
    }
    catch (ex) {
        return 'Error: ' + ex.message;
    }
}
exports.tryInterpolate = tryInterpolate;
function useMergeState(initialState) {
    const [state, setState] = react_1.default.useState(initialState);
    const setMergedState = (newState) => setState((prevState) => Object.assign({}, prevState, newState));
    return [state, setMergedState];
}
exports.useMergeState = useMergeState;
function createComponents(props, className = null) {
    if (!props.formElement.elements || props.formElement.elements.length === 0) {
        return undefined;
    }
    return props.formElement.elements.map((e, i) => (react_1.default.createElement(react_1.default.Fragment, { key: i }, props.catalogue.createComponent({ ...props, className: '' }, e, className))));
}
exports.createComponents = createComponents;
function createComponent1(props, formElement, context, className, extraProps) {
    if (!formElement || formElement.control === 'EditorCell') {
        return null;
    }
    if (props.catalogue.components[formElement.control] === undefined) {
        return react_1.default.createElement("div", { className: classnames_1.default(className, missing) }, formElement.control);
    }
    const hide = helpers_1.getPropValue(props, formElement, context, 'hidden', false);
    if (hide) {
        return null;
    }
    const controlDefinition = props.catalogue.components[formElement.control];
    const Control = controlDefinition.Component ||
        controlDefinition;
    Control.displayName = 'CreateComponentWrapper';
    let renderedControl = (react_1.default.createElement(Control, { owner: props.owner, className: className, handlers: props.handlers, catalogue: props.catalogue, formElement: formElement, extra: { ...props.extra, ...extraProps }, dataProps: props.dataProps }));
    return renderedControl;
}
exports.createComponent1 = createComponent1;
function toJS(obj) {
    return mobx_1.toJS(obj);
}
exports.toJS = toJS;
function addProviders(mainForm, form) {
    let formElement = form;
    if (form !== mainForm) {
        let model = toJS(mainForm);
        let provider = model;
        while (provider.elements &&
            provider.elements.length &&
            provider.elements[0].control.indexOf('Provider') >= 0) {
            provider = provider.elements[0];
        }
        if (provider != model) {
            provider.elements = [form];
            formElement = model;
        }
    }
    return formElement;
}
exports.addProviders = addProviders;
//# sourceMappingURL=common.js.map
});
___scope___.file("editor/themes/common.js", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=common.js.map
});
___scope___.file("wrapper.jsx", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const context_1 = require("./context");
const emotion_1 = require("emotion");
const helpers_1 = require("./helpers");
const error_boundary_1 = require("./vanilla/error_boundary");
const common_1 = require("./common");
const mobx_react_1 = require("mobx-react");
const error_view_1 = require("./semantic/error_view");
exports.breakingLabel = emotion_1.css `
  display: block;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 3px;
`;
exports.nonBreakingLabel = emotion_1.css `
  display: inline-block;
  font-weight: bold;
  padding-right: 6px;
  margin-top: 3px;
  margin-bottom: 3px;
`;
const defaultMouseEvents = ['onClick', 'onMouseOver', 'onMouseOut', 'onMouseDown', 'onMouseUp'];
const defaultFormEvents = ['onChange', 'onInput'];
const defaultKeyEvents = ['onKeyDown', 'onKeyUp'];
const defaultEvents = [...defaultMouseEvents, ...defaultFormEvents, ...defaultKeyEvents];
const omitKeys = [
    'styleName',
    'catalogue',
    'children',
    'extra',
    'formElement',
    'handlers',
    'owner',
    'className',
    'readOnly',
    'controlProps',
    'control',
    'ownAddCell',
    'EmptyCell',
    'Component',
    'showError',
    'staticContext',
    'routerProps',
    'dataProps',
    'hideLabel'
];
function omit(obj, keys) {
    var target = {};
    for (var i of Object.keys(obj)) {
        if (keys.indexOf(i) >= 0)
            continue;
        target[i] = obj[i];
    }
    return Object.keys(target).length > 0 ? target : null;
}
const eventCache = [];
function getCachedEvent(formElement, event, props, context, extra = null, events = null) {
    let current = eventCache.find(c => c.props === props);
    if (!current) {
        current = { props };
        eventCache.push(current);
    }
    if (!current[event]) {
        current[event] = (e, ui) => {
            if (extra && extra[event]) {
                extra[event](e, ui);
            }
            if (events && events[event]) {
                events[event](e, ui);
            }
            if (formElement.props[event]) {
                helpers_1.handle(props.handlers, formElement.props[event], props.owner, props, context, {
                    e,
                    ui
                });
            }
        };
    }
    else {
        console.log('Using cached ...');
    }
    return current[event];
}
function paintProps(props, context, className, allowedProperties, componentProps) {
    let result = {
        id: props.formElement.uid,
        'data-control': props.formElement.control
    };
    if (props.formElement.props) {
        for (let prop of Object.keys(props.formElement.props)) {
            if (defaultEvents.indexOf(prop) >= 0) {
                result[prop] = getCachedEvent(props.formElement, prop, props, context, props.extra, componentProps);
            }
            else if (allowedProperties && allowedProperties.indexOf(prop) >= 0) {
                result[prop] = helpers_1.getValue(props, context, prop, undefined);
                result[prop] = helpers_1.isNullOrEmpty(result[prop]) ? undefined : result[prop];
            }
        }
    }
    const controlCss = helpers_1.getValue(props, context, 'css');
    if (props.className || controlCss || className || (props.extra && props.extra.className)) {
        result.className = classnames_1.default(result[className], className, props.className, props.extra ? props.extra.className : undefined, controlCss ? emotion_1.css([controlCss]) : undefined);
    }
    if (props.extra) {
        for (let prop of Object.keys(props.extra)) {
            if (!result[prop]) {
                result[prop] = props.extra[prop];
            }
        }
    }
    if (componentProps) {
        for (let prop of Object.keys(componentProps)) {
            result[prop] = componentProps[prop];
        }
    }
    return result;
}
exports.paintProps = paintProps;
function renderEmptyCell(props, className) {
    return (props.formElement.elements.length === 0 &&
        props.EmptyCell && react_1.default.createElement(props.EmptyCell, Object.assign({}, props, { className: className })));
}
exports.renderEmptyCell = renderEmptyCell;
exports.DynamicComponent = mobx_react_1.observer(props => {
    const context = react_1.default.useContext(context_1.Context);
    react_1.default.useEffect(() => () => {
        eventCache.splice(eventCache.findIndex(c => c.props == props), 1);
    });
    let formElement = props.formElement;
    let currentProps = paintProps(props, context, props.styleName, props.controlProps, omit(props, omitKeys));
    if (props.preserveProps) {
        currentProps = { ...currentProps, ...props };
    }
    currentProps.key = formElement.uid;
    const label = helpers_1.getValue(props, context, 'label');
    if (label) {
        const { onMouseOver, onMouseOut, className, ...rest } = currentProps;
        return (react_1.default.createElement(error_boundary_1.ErrorBoundary, null,
            react_1.default.createElement("div", { onMouseOver: onMouseOver, onMouseOut: onMouseOut, className: className, "data-control": currentProps['data-control'] + 'Wrapper' },
                !props.hideLabel && (label || formElement.props.formAlign) && (react_1.default.createElement("label", { className: formElement.props.inline ? exports.nonBreakingLabel : exports.breakingLabel, htmlFor: formElement.uid }, label || '\xa0')),
                react_1.default.createElement(props.control || 'div', rest, props.children)),
            props.showError && (react_1.default.createElement(error_view_1.ErrorView, { inline: !!formElement.props.inline, owner: props.owner, source: helpers_1.valueSource(formElement) }))));
    }
    return (react_1.default.createElement(error_boundary_1.ErrorBoundary, null,
        react_1.default.createElement(props.control || 'div', currentProps, props.children || common_1.createComponents(props)),
        props.showError && (react_1.default.createElement(error_view_1.ErrorView, { inline: !!formElement.props.inline, owner: props.owner, source: helpers_1.valueSource(formElement) }))));
});
exports.DynamicComponent.displayName = 'DynamicControl';
//# sourceMappingURL=wrapper.js.map
});
___scope___.file("vanilla/error_boundary.jsx", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const semantic_ui_react_1 = require("semantic-ui-react");
const common_1 = require("../common");
const segment = common_1.css `
  margin: 12px !important;
`;
const error = common_1.css `
  overflow: auto;
`;
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    componentDidCatch(error, info) {
        this.setState({ hasError: true, error, info });
        console.group('REACT ERROR');
        console.error(error);
        console.error(info);
        console.groupEnd();
    }
    render() {
        if (this.state.hasError) {
            return (React.createElement("div", { className: segment },
                React.createElement(semantic_ui_react_1.Segment, { inverted: true, attached: "top", color: "red" },
                    "\uD83D\uDE22 ",
                    this.state.error.message),
                React.createElement(semantic_ui_react_1.Segment, { attached: "bottom", className: error },
                    React.createElement("pre", null, this.state.error.stack),
                    React.createElement("pre", null, this.state.info.componentStack))));
        }
        return this.props.children;
    }
}
ErrorBoundary.displayName = 'ErrorBoundary';
exports.ErrorBoundary = ErrorBoundary;
//# sourceMappingURL=error_boundary.js.map
});
___scope___.file("semantic/error_view.jsx", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const mobx_react_1 = require("mobx-react");
const semantic_ui_react_1 = require("semantic-ui-react");
function renderError(error, pointing) {
    return (React.createElement(semantic_ui_react_1.Label, { pointing: pointing, color: "red" }, error));
}
exports.renderError = renderError;
const ErrorViewComponent = ({ owner, source, newLine, inline, pointing = true }) => {
    if (!owner.getError) {
        return null;
    }
    pointing = inline ? 'left' : pointing;
    let error = source && owner.getError(source);
    if (!error) {
        return null;
    }
    if (newLine) {
        return React.createElement("div", null, renderError(error, pointing));
    }
    return renderError(error, pointing);
};
ErrorViewComponent.displayName = 'ErrorView';
exports.ErrorView = mobx_react_1.observer(ErrorViewComponent);
const ErrorLabelComponent = ({ error, pointing = true }) => {
    if (!error) {
        return null;
    }
    return (React.createElement(semantic_ui_react_1.Label, { color: "red", pointing: pointing }, error));
};
ErrorLabelComponent.displayName = 'ErrorLabel';
exports.ErrorLabel = mobx_react_1.observer(ErrorLabelComponent);
//# sourceMappingURL=error_view.js.map
});
___scope___.file("catalogue_editor.js", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const catalogue_editor_1 = require("./vanilla/catalogue_editor");
const catalogue_editor_2 = require("./semantic/catalogue_editor");
const catalogue_editor_3 = require("./apollo/catalogue_editor");
const catalogue_editor_4 = require("./react-router/catalogue_editor");
const catalogue_editor_5 = require("./react-alert/catalogue_editor");
const catalogue_editor_6 = require("./semantic/auth-graphql-react-router/catalogue_editor");
const helpers_1 = require("./helpers");
exports.catalogueEditor = helpers_1.merge(catalogue_editor_1.catalogueEditor, catalogue_editor_2.catalogueEditor, catalogue_editor_3.catalogueEditor, catalogue_editor_4.catalogueEditor, catalogue_editor_5.catalogueEditor, catalogue_editor_6.catalogueEditor);
//# sourceMappingURL=luis-client.js.map?tm=1561469333852
});
___scope___.file("vanilla/catalogue_editor.js", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const formula_editor_1 = require("./formula_editor");
const repeater_editor_1 = require("./repeater_editor");
const text_editor_1 = require("./text_editor");
const grid_editor_1 = require("../layouts/grid_editor");
const stack_editor_1 = require("../layouts/stack_editor");
const form_editor_1 = require("../form_editor");
const auth_item_editor_1 = require("./auth_item_editor");
const flex_editor_1 = require("../layouts/flex_editor");
const layouts_common_editor_1 = require("../editor/layouts_common_editor");
exports.catalogueEditor = {
    createComponent: layouts_common_editor_1.createComponent,
    cssClass: '',
    components: {
        AuthItem: auth_item_editor_1.AuthItemEditor,
        Flex: flex_editor_1.FlexEditor,
        Form: form_editor_1.FormEditor,
        Formula: formula_editor_1.FormulaEditor,
        Grid: grid_editor_1.GridEditor,
        Image: text_editor_1.ImageEditor,
        Repeater: repeater_editor_1.RepeaterEditor,
        Link: text_editor_1.LinkEditor,
        LinkSelector: text_editor_1.LinkSelectorEditor,
        Stack: stack_editor_1.StackEditor,
        Text: text_editor_1.TextEditor
    }
};
//# sourceMappingURL=catalogue_editor.js.map
});
___scope___.file("vanilla/formula_editor.jsx", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const formula_view_1 = require("./formula_view");
exports.FormulaEditor = {
    Component: formula_view_1.FormulaComponent,
    title: 'Formula',
    control: 'Formula',
    icon: 'code'
};
//# sourceMappingURL=formula_editor.js.map
});
___scope___.file("vanilla/formula_view.jsx", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const mobx_react_1 = require("mobx-react");
const common_1 = require("../common");
const helpers_1 = require("../helpers");
const context_1 = require("../context");
const formula = common_1.css `
  padding: 9px 0px;
`;
exports.FormulaComponent = props => {
    const context = React.useContext(context_1.Context);
    const value = helpers_1.getValue(props, context);
    return (React.createElement("div", { className: "ui input" },
        React.createElement("div", { className: formula }, value == null ? '#Formula' : value)));
};
exports.FormulaView = {
    Component: mobx_react_1.observer(exports.FormulaComponent),
    toString: (_owner, props, context) => helpers_1.getValue(props, context)
};
//# sourceMappingURL=formula_view.js.map
});
___scope___.file("vanilla/repeater_editor.jsx", function(exports, require, module, __filename, __dirname){

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const repeater_view_1 = require("./repeater_view");
const mobx_react_1 = require("mobx-react");
const editor_common_1 = require("../editor/editor_common");
const wrapper_1 = require("../wrapper");
const template_editor_1 = require("./template_editor");
const templates = [
    { text: 'Component View', value: 'component' },
    { text: 'View Template', value: 'view' },
    { text: 'Edit Template', value: 'edit' },
    { text: 'Add Template', value: 'add' }
];
const RepeaterComponent = (props) => {
    return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props),
        React.createElement(template_editor_1.TemplateEditor, Object.assign({}, props, { extra: props.extra, Component: repeater_view_1.RepeaterView.Component, options: templates }))));
};
exports.RepeaterEditor = {
    Component: mobx_react_1.observer(RepeaterComponent),
    title: 'Repeater',
    control: 'Repeater',
    ico