@formio/js 5.0.0-rc.5

package/lib/cjs/components/address/fixtures/comp3.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    _id: '610cd91f1c0d42a708a148de',
+    type: 'form',
+    components: [
+        {
+            label: 'Address',
+            tableView: false,
+            modalEdit: true,
+            provider: 'google',
+            key: 'address',
+            type: 'address',
+            providerOptions: {
+                params: {
+                    autocompleteOptions: {},
+                    key: 'AIzaSyBNL2e4MnmyPj9zN7SVAe428nCSLP1X144',
+                },
+            },
+            input: true,
+            components: [
+                {
+                    label: 'Address 1',
+                    tableView: false,
+                    key: 'address1',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: 'show = _.get(instance, "parent.manualMode", false);',
+                },
+                {
+                    label: 'Address 2',
+                    tableView: false,
+                    key: 'address2',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: 'show = _.get(instance, "parent.manualMode", false);',
+                },
+                {
+                    label: 'City',
+                    tableView: false,
+                    key: 'city',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: 'show = _.get(instance, "parent.manualMode", false);',
+                },
+                {
+                    label: 'State',
+                    tableView: false,
+                    key: 'state',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: 'show = _.get(instance, "parent.manualMode", false);',
+                },
+                {
+                    label: 'Country',
+                    tableView: false,
+                    key: 'country',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: 'show = _.get(instance, "parent.manualMode", false);',
+                },
+                {
+                    label: 'Zip Code',
+                    tableView: false,
+                    key: 'zip',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: 'show = _.get(instance, "parent.manualMode", false);',
+                },
+            ],
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+    title: 'FIO-3280',
+    display: 'form',
+    name: 'fio3280',
+    path: 'fio3280',
+};

package/lib/cjs/components/address/fixtures/comp4.d.ts

@@ -0,0 +1,56 @@
+declare namespace _default {
+    const type: string;
+    const components: ({
+        label: string;
+        tableView: boolean;
+        provider: string;
+        key: string;
+        type: string;
+        providerOptions: {
+            params: {
+                autocompleteOptions: {};
+            };
+        };
+        input: boolean;
+        components: {
+            label: string;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            customConditional: string;
+        }[];
+        conditional?: undefined;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        tableView: boolean;
+        key: string;
+        conditional: {
+            show: boolean;
+            when: string;
+        };
+        type: string;
+        input: boolean;
+        provider?: undefined;
+        providerOptions?: undefined;
+        components?: undefined;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        provider?: undefined;
+        providerOptions?: undefined;
+        components?: undefined;
+        conditional?: undefined;
+    })[];
+    const title: string;
+    const display: string;
+    const name: string;
+    const path: string;
+}
+export default _default;

package/lib/cjs/components/address/fixtures/comp4.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    components: [
+        {
+            label: 'Address',
+            tableView: false,
+            provider: 'nominatim',
+            key: 'address',
+            type: 'address',
+            providerOptions: {
+                params: {
+                    autocompleteOptions: {},
+                },
+            },
+            input: true,
+            components: [
+                {
+                    label: 'Address 1',
+                    tableView: false,
+                    key: 'address1',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                },
+                {
+                    label: 'Address 2',
+                    tableView: false,
+                    key: 'address2',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                },
+                {
+                    label: 'City',
+                    tableView: false,
+                    key: 'city',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                },
+                {
+                    label: 'State',
+                    tableView: false,
+                    key: 'state',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                },
+                {
+                    label: 'Country',
+                    tableView: false,
+                    key: 'country',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                },
+                {
+                    label: 'Zip Code',
+                    tableView: false,
+                    key: 'zip',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                },
+            ],
+        },
+        {
+            label: 'Text Field',
+            tableView: true,
+            key: 'textField',
+            conditional: {
+                show: false,
+                when: 'address',
+            },
+            type: 'textfield',
+            input: true,
+        },
+        {
+            label: 'Submit',
+            showValidations: false,
+            tableView: false,
+            key: 'submit',
+            type: 'button',
+            input: true,
+        },
+    ],
+    title: 'testconditional',
+    display: 'form',
+    name: 'testconditional',
+    path: 'testconditional',
+};

package/lib/cjs/components/address/fixtures/index.d.ts

@@ -0,0 +1,5 @@
+import comp1 from './comp1';
+import comp2 from './comp2';
+import comp3 from './comp3';
+import comp4 from './comp4';
+export { comp1, comp2, comp3, comp4 };

package/lib/cjs/components/address/fixtures/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+const comp1_1 = __importDefault(require("./comp1"));
+exports.comp1 = comp1_1.default;
+const comp2_1 = __importDefault(require("./comp2"));
+exports.comp2 = comp2_1.default;
+const comp3_1 = __importDefault(require("./comp3"));
+exports.comp3 = comp3_1.default;
+const comp4_1 = __importDefault(require("./comp4"));
+exports.comp4 = comp4_1.default;

package/lib/cjs/components/address/fixtures/values.d.ts

@@ -0,0 +1,22 @@
+declare const _default: ({
+    mode: string;
+    address: {
+        street?: undefined;
+        city?: undefined;
+        county?: undefined;
+        state?: undefined;
+        zip?: undefined;
+        country?: undefined;
+    };
+} | {
+    mode: string;
+    address: {
+        street: string;
+        city: string;
+        county: string;
+        state: string;
+        zip: string;
+        country: string;
+    };
+})[];
+export default _default;

package/lib/cjs/components/address/fixtures/values.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        mode: 'autocomplete',
+        address: {},
+    },
+    {
+        mode: 'manual',
+        address: {
+            street: '',
+            city: '',
+            county: '',
+            state: '',
+            zip: '',
+            country: '',
+        },
+    },
+];

package/lib/cjs/components/alert/Alert.d.ts

@@ -0,0 +1,30 @@
+export default class Alert {
+    constructor(container: any, component: any);
+    container: any;
+    alert: any;
+    parentComponent: any;
+    refs: {};
+    loadRefs: any;
+    get refsNames(): {
+        messageRef: string;
+    };
+    get alertTypes(): {
+        error: string;
+        success: string;
+        info: string;
+        warning: string;
+    };
+    showErrors(errors?: any[], triggerEvent?: boolean, options?: {}): any[];
+    showMessage(message: any, type: any, options?: {}): void;
+    createMessagesList(type: any, ...args: any[]): any;
+    createErrorList(errors: any): any;
+    showAlert(type: any, messagesList: any, options?: {}): void;
+    setAlert(type: any, messagesList: any, options?: {}): void;
+    attach(options: any): void;
+    eventListenersKeys: any[] | undefined;
+    clear(): void;
+    focusOnComponent(keyOrPath: any): void;
+    createMessage(type: any, element: any, message: any, index: any, err: any): void;
+    createErrorMessage(element: any, message: any, index: any, err: any): void;
+    appendErrorToList(err: any, ul: any): void;
+}

package/lib/cjs/components/alert/Alert.js

@@ -0,0 +1,183 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../utils/utils");
+class Alert {
+    constructor(container, component) {
+        this.container = container;
+        this.alert = null;
+        this.parentComponent = component;
+        this.refs = {};
+        this.loadRefs = this.parentComponent.loadRefs.bind(this);
+    }
+    get refsNames() {
+        return {
+            messageRef: 'multiple'
+        };
+    }
+    get alertTypes() {
+        return {
+            error: 'danger',
+            success: 'success',
+            info: 'info',
+            warning: 'warning'
+        };
+    }
+    showErrors(errors = [], triggerEvent = false, options = {}) {
+        errors = lodash_1.default.isArray(errors) ? errors : [errors];
+        const messagesList = this.createMessagesList('error', errors);
+        this.showAlert('error', messagesList, options);
+        if (triggerEvent) {
+            this.parentComponent.emit('error', errors);
+        }
+        return errors;
+    }
+    showMessage(message, type, options = {}) {
+        let messageElement = message;
+        if (messageElement instanceof HTMLElement) {
+            messageElement.setAttribute('ref', 'messageRef');
+        }
+        else {
+            messageElement = this.parentComponent.ce('p', {
+                ref: 'messageRef'
+            });
+        }
+        this.showAlert(type, messageElement, options);
+    }
+    createMessagesList(type, ...args) {
+        switch (type) {
+            case 'error':
+                return this.createErrorList(...args);
+        }
+    }
+    createErrorList(errors) {
+        const p = this.parentComponent.ce('p');
+        this.parentComponent.setContent(p, this.parentComponent.t('error'));
+        const ul = this.parentComponent.ce('ul');
+        const messagesList = document.createDocumentFragment();
+        errors.forEach(err => this.appendErrorToList(err, ul));
+        p.appendChild(ul);
+        messagesList.appendChild(p);
+        return messagesList;
+    }
+    showAlert(type, messagesList, options = {}) {
+        const { customClasses, customEvents } = options;
+        this.setAlert(type, messagesList, { customClasses });
+        if (!this.alert) {
+            return;
+        }
+        this.attach({ customEvents });
+        this.parentComponent.prependTo(this.alert, this.container);
+    }
+    setAlert(type, messagesList, options = {}) {
+        const alertType = this.alertTypes[type];
+        if (this.alert) {
+            this.clear();
+        }
+        if (messagesList) {
+            const { id = `${type}-list-${this.parentComponent.id}`, customClasses = `alert alert-${alertType}` } = options;
+            this.alert = this.parentComponent.ce('div', { id, class: customClasses });
+            if (messagesList instanceof HTMLElement) {
+                this.parentComponent.appendTo(messagesList, this.alert);
+            }
+            else {
+                this.parentComponent.setContent(this.alert, messagesList);
+            }
+        }
+    }
+    attach(options) {
+        var _a, _b, _c;
+        let { customEvents = {} } = options;
+        this.eventListenersKeys = [];
+        this.loadRefs(this.alert, this.refsNames);
+        const clickListeners = ((_a = customEvents.click) === null || _a === void 0 ? void 0 : _a.listeners) || [];
+        const keyPressListeners = ((_b = customEvents.keypress) === null || _b === void 0 ? void 0 : _b.listeners) || [];
+        customEvents = Object.assign(Object.assign({}, customEvents), { click: [
+                ...clickListeners,
+                (e) => {
+                    const key = e.currentTarget.dataset.componentKey;
+                    this.focusOnComponent(key);
+                }
+            ], keypress: [
+                ...keyPressListeners,
+                (e) => {
+                    const key = e.currentTarget.dataset.componentKey;
+                    this.focusOnComponent(key);
+                }
+            ] });
+        if ((_c = this.refs.messageRef) === null || _c === void 0 ? void 0 : _c.length) {
+            this.refs.messageRef.forEach(el => {
+                Object.entries(customEvents).forEach(([event, listeners]) => {
+                    listeners.forEach((listener) => this.parentComponent.addEventListener(el, event, listener));
+                    this.eventListenersKeys.push(event);
+                });
+            });
+        }
+    }
+    clear() {
+        var _a;
+        try {
+            if ((_a = this.refs.messageRef) === null || _a === void 0 ? void 0 : _a.length) {
+                this.refs.messageRef.forEach(el => {
+                    this.eventListenersKeys.forEach(event => this.parentComponent.removeEventListener(el, event));
+                });
+            }
+            this.refs = {};
+            this.parentComponent.removeChildFrom(this.alert, this.container);
+            this.alert = null;
+        }
+        catch (err) {
+            // ignore
+        }
+    }
+    focusOnComponent(keyOrPath) {
+        var _a;
+        if (keyOrPath) {
+            const path = this.parentComponent._parentPath ? keyOrPath.replace(this.parentComponent._parentPath, '') : keyOrPath;
+            const component = (_a = this.parentComponent.root) === null || _a === void 0 ? void 0 : _a.getComponent(path, null, keyOrPath);
+            if (component && lodash_1.default.isFunction(component.focus)) {
+                component.focus();
+            }
+        }
+    }
+    createMessage(type, element, message, index, err) {
+        switch (type) {
+            case 'error':
+                return this.createErrorMessage(element, message, index, err);
+        }
+    }
+    createErrorMessage(element, message, index, err) {
+        var _a, _b;
+        const params = {
+            style: 'cursor: pointer',
+            ref: 'messageRef',
+            tabIndex: 0,
+            'aria-label': `${message}. Click to navigate to the field with following error.`
+        };
+        const li = this.parentComponent.ce('li', params);
+        this.parentComponent.setContent(li, message);
+        const messageFromIndex = !lodash_1.default.isUndefined(index) && ((_a = err === null || err === void 0 ? void 0 : err.messages) === null || _a === void 0 ? void 0 : _a[index]);
+        const keyOrPath = (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.path) || ((_b = err === null || err === void 0 ? void 0 : err.component) === null || _b === void 0 ? void 0 : _b.key);
+        if (keyOrPath) {
+            const formattedKeyOrPath = (0, utils_1.getStringFromComponentPath)(keyOrPath);
+            li.dataset.componentKey = formattedKeyOrPath;
+        }
+        this.parentComponent.appendTo(li, element);
+    }
+    appendErrorToList(err, ul) {
+        var _a;
+        if ((_a = err === null || err === void 0 ? void 0 : err.messages) === null || _a === void 0 ? void 0 : _a.length) {
+            err.messages.forEach(({ message }, index) => {
+                this.createMessage('error', ul, message, index, err);
+            });
+        }
+        else if (err) {
+            const message = lodash_1.default.isObject(err) ? err.message || '' : err;
+            this.createMessage('error', ul, message);
+        }
+    }
+}
+exports.default = Alert;

package/lib/cjs/components/builder.d.ts

@@ -0,0 +1,2 @@
+export default Components;
+import Components from '.';

package/lib/cjs/components/builder.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const _1 = __importDefault(require("."));
+const Address_form_1 = __importDefault(require("./address/Address.form"));
+const Button_form_1 = __importDefault(require("./button/Button.form"));
+const Checkbox_form_1 = __importDefault(require("./checkbox/Checkbox.form"));
+const Columns_form_1 = __importDefault(require("./columns/Columns.form"));
+const Component_form_1 = __importDefault(require("./_classes/component/Component.form"));
+const Container_form_1 = __importDefault(require("./container/Container.form"));
+const Content_form_1 = __importDefault(require("./content/Content.form"));
+const Currency_form_1 = __importDefault(require("./currency/Currency.form"));
+const DataGrid_form_1 = __importDefault(require("./datagrid/DataGrid.form"));
+const DataMap_form_1 = __importDefault(require("./datamap/DataMap.form"));
+const DateTime_form_1 = __importDefault(require("./datetime/DateTime.form"));
+const Day_form_1 = __importDefault(require("./day/Day.form"));
+const EditGrid_form_1 = __importDefault(require("./editgrid/EditGrid.form"));
+const Email_form_1 = __importDefault(require("./email/Email.form"));
+const Fieldset_form_1 = __importDefault(require("./fieldset/Fieldset.form"));
+const File_form_1 = __importDefault(require("./file/File.form"));
+const Form_form_1 = __importDefault(require("./form/Form.form"));
+const ListComponent_form_1 = __importDefault(require("./_classes/list/ListComponent.form"));
+const Hidden_form_1 = __importDefault(require("./hidden/Hidden.form"));
+const HTML_form_1 = __importDefault(require("./html/HTML.form"));
+const NestedComponent_form_1 = __importDefault(require("./_classes/nested/NestedComponent.form"));
+const Number_form_1 = __importDefault(require("./number/Number.form"));
+const Panel_form_1 = __importDefault(require("./panel/Panel.form"));
+const Password_form_1 = __importDefault(require("./password/Password.form"));
+const PhoneNumber_form_1 = __importDefault(require("./phonenumber/PhoneNumber.form"));
+const Radio_form_1 = __importDefault(require("./radio/Radio.form"));
+const ReCaptcha_form_1 = __importDefault(require("./recaptcha/ReCaptcha.form"));
+const Resource_form_1 = __importDefault(require("./resource/Resource.form"));
+const SelectBoxes_form_1 = __importDefault(require("./selectboxes/SelectBoxes.form"));
+const Select_form_1 = __importDefault(require("./select/Select.form"));
+const Signature_form_1 = __importDefault(require("./signature/Signature.form"));
+const Survey_form_1 = __importDefault(require("./survey/Survey.form"));
+const Table_form_1 = __importDefault(require("./table/Table.form"));
+const Tabs_form_1 = __importDefault(require("./tabs/Tabs.form"));
+const Tags_form_1 = __importDefault(require("./tags/Tags.form"));
+const TextArea_form_1 = __importDefault(require("./textarea/TextArea.form"));
+const TextField_form_1 = __importDefault(require("./textfield/TextField.form"));
+const Time_form_1 = __importDefault(require("./time/Time.form"));
+const Tree_form_1 = __importDefault(require("./tree/Tree.form"));
+const Unknown_form_1 = __importDefault(require("./unknown/Unknown.form"));
+const Url_form_1 = __importDefault(require("./url/Url.form"));
+const Well_form_1 = __importDefault(require("./well/Well.form"));
+_1.default.address.editForm = Address_form_1.default;
+_1.default.button.editForm = Button_form_1.default;
+_1.default.checkbox.editForm = Checkbox_form_1.default;
+_1.default.columns.editForm = Columns_form_1.default;
+_1.default.component.editForm = Component_form_1.default;
+_1.default.container.editForm = Container_form_1.default;
+_1.default.content.editForm = Content_form_1.default;
+_1.default.currency.editForm = Currency_form_1.default;
+_1.default.datagrid.editForm = DataGrid_form_1.default;
+_1.default.datamap.editForm = DataMap_form_1.default;
+_1.default.datetime.editForm = DateTime_form_1.default;
+_1.default.day.editForm = Day_form_1.default;
+_1.default.editgrid.editForm = EditGrid_form_1.default;
+_1.default.email.editForm = Email_form_1.default;
+_1.default.fieldset.editForm = Fieldset_form_1.default;
+_1.default.file.editForm = File_form_1.default;
+_1.default.form.editForm = Form_form_1.default;
+_1.default.list.editForm = ListComponent_form_1.default;
+_1.default.hidden.editForm = Hidden_form_1.default;
+_1.default.htmlelement.editForm = HTML_form_1.default;
+_1.default.nested.editForm = NestedComponent_form_1.default;
+_1.default.number.editForm = Number_form_1.default;
+_1.default.panel.editForm = Panel_form_1.default;
+_1.default.password.editForm = Password_form_1.default;
+_1.default.phoneNumber.editForm = PhoneNumber_form_1.default;
+_1.default.radio.editForm = Radio_form_1.default;
+_1.default.recaptcha.editForm = ReCaptcha_form_1.default;
+_1.default.resource.editForm = Resource_form_1.default;
+_1.default.select.editForm = Select_form_1.default;
+_1.default.selectboxes.editForm = SelectBoxes_form_1.default;
+_1.default.signature.editForm = Signature_form_1.default;
+_1.default.survey.editForm = Survey_form_1.default;
+_1.default.table.editForm = Table_form_1.default;
+_1.default.tabs.editForm = Tabs_form_1.default;
+_1.default.tags.editForm = Tags_form_1.default;
+_1.default.textarea.editForm = TextArea_form_1.default;
+_1.default.textfield.editForm = TextField_form_1.default;
+_1.default.time.editForm = Time_form_1.default;
+_1.default.tree.editForm = Tree_form_1.default;
+_1.default.unknown.editForm = Unknown_form_1.default;
+_1.default.url.editForm = Url_form_1.default;
+_1.default.well.editForm = Well_form_1.default;
+exports.default = _1.default;

package/lib/cjs/components/button/Button.d.ts

@@ -0,0 +1,44 @@
+export default class ButtonComponent extends Field {
+    static get builderInfo(): {
+        title: string;
+        group: string;
+        icon: string;
+        documentation: string;
+        weight: number;
+        schema: any;
+    };
+    constructor(component: any, options: any, data: any);
+    filesUploading: any[];
+    get inputInfo(): {
+        type: string;
+        component: any;
+        changeEvent: string;
+        attr: {
+            name: any;
+            type: any;
+            class: string;
+            lang: any;
+        };
+    };
+    get labelInfo(): {
+        hidden: boolean;
+    };
+    set loading(arg: any);
+    createLabel(): void;
+    createInput(container: any): any;
+    get emptyValue(): boolean;
+    get clicked(): any;
+    get defaultValue(): boolean;
+    get oauthConfig(): any;
+    render(): any;
+    attachButton(): void;
+    hasError: boolean | undefined;
+    isDisabledOnInvalid: any;
+    detach(element: any): void;
+    onClick(event: any): void;
+    openOauth(settings: any): void;
+    get oauthComponentPath(): any;
+    focus(): void;
+    triggerReCaptcha(): void;
+}
+import Field from '../_classes/field/Field';

package/lib/cjs/components/button/Button.form.d.ts

@@ -0,0 +1,3 @@
+export default function _default(...extend: any[]): {
+    components: any;
+};