@formio/js 5.0.0-rc.19 → 5.0.0-rc.21

package/lib/mjs/WebformBuilder.d.ts

@@ -49,6 +49,7 @@ export default class WebformBuilder extends Component {
             weight: number;
         };
     };
+    redraw(): Promise<void> | Promise<boolean>;
     set form(arg: any);
     get form(): any;
     get container(): any;
@@ -60,6 +61,7 @@ export default class WebformBuilder extends Component {
     findNamespaceRoot(component: any): any;
     recurseNamespace(component: any): any;
     render(): any;
+    attach(element: any): Promise<any>;
     searchFields(searchString?: string): void;
     orderComponents(groupInfo: any, foundComponents: any): void;
     updateDragAndDrop(): any;
@@ -86,6 +88,9 @@ export default class WebformBuilder extends Component {
     saveComponent(component: any, parent: any, isNew: any, original: any): boolean;
     isComponentCreated: boolean | undefined;
     emitSaveComponentEvent(schema: any, originalComp: any, parentComponentSchema: any, path: any, index: any, isNew: any, originalComponentSchema: any): void;
+    attachEditComponentControls(component: any, parent: any, isNew: any, original: any, ComponentClass: any): void;
+    saved: boolean | undefined;
+    showPreview: any;
     editComponent(component: any, parent: any, isNew: any, isJsonEdit: any, original: any, flags?: {}): void;
     editForm: Webform | undefined;
     preview: Webform | null | undefined;
@@ -93,7 +98,7 @@ export default class WebformBuilder extends Component {
     dialog: any;
     updateComponentKey(data: any): any;
     moveComponent(component: any): void;
-    selectedElement: any;
+    selectedComponent: any;
     moveHandler: (e: any) => void;
     updateComponentPlacement(direction: any): void;
     stopMoving(comp: any): void;

package/lib/mjs/WebformBuilder.js

@@ -1,7 +1,6 @@
 import Webform from './Webform';
 import Component from './components/_classes/component/Component';
 import tippy from 'tippy.js';
-import NativePromise from 'native-promise-only';
 import Components from './components/Components';
 import { Formio } from './Formio';
 import { fastCloneDeep, bootstrapVersion, getArrayFromComponentPath, getStringFromComponentPath } from './utils/utils';
@@ -305,6 +304,9 @@ export default class WebformBuilder extends Component {
         });
     }
     attachComponent(element, component) {
+        if (component instanceof WebformBuilder) {
+            return;
+        }
         // Add component to element for later reference.
         element.formioComponent = component;
         component.loadRefs(element, {
@@ -391,7 +393,7 @@ export default class WebformBuilder extends Component {
             premium: {
                 title: 'Premium',
                 weight: 40
-            },
+            }
         };
     }
     redraw() {
@@ -571,7 +573,7 @@ export default class WebformBuilder extends Component {
             const { subgroups = [], components } = result;
             const filteredComponents = [];
             for (const key in components) {
-                const isMatchedToTitle = components[key].title.toLowerCase().match(searchValue);
+                const isMatchedToTitle = this.t(components[key].title).toLowerCase().match(searchValue);
                 const isMatchedToKey = components[key].key.toLowerCase().match(searchValue);
                 if (isMatchedToTitle || isMatchedToKey) {
                     filteredComponents.push(components[key]);
@@ -689,8 +691,17 @@ export default class WebformBuilder extends Component {
     }
     getComponentInfo(key, group) {
         let info;
+        // Need to check in first order as resource component key can be the same as from webform default components
+        if (group && group.slice(0, group.indexOf('-')) === 'resource') {
+            // This is an existing resource field.
+            const resourceGroups = this.groups.resource.subgroups;
+            const resourceGroup = _.find(resourceGroups, { key: group });
+            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {
+                info = fastCloneDeep(resourceGroup.components[`component-${key}`].schema);
+            }
+        }
         // This is a new component
-        if (this.schemas.hasOwnProperty(key)) {
+        else if (this.schemas.hasOwnProperty(key)) {
             info = fastCloneDeep(this.schemas[key]);
         }
         else if (this.groups.hasOwnProperty(group)) {
@@ -699,14 +710,6 @@ export default class WebformBuilder extends Component {
                 info = fastCloneDeep(groupComponents[key].schema);
             }
         }
-        else if (group.slice(0, group.indexOf('-')) === 'resource') {
-            // This is an existing resource field.
-            const resourceGroups = this.groups.resource.subgroups;
-            const resourceGroup = _.find(resourceGroups, { key: group });
-            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {
-                info = fastCloneDeep(resourceGroup.components[`component-${key}`].schema);
-            }
-        }
         else if (group === 'searchFields') { //Search components go into this group
             const resourceGroups = this.groups.resource.subgroups;
             for (let ix = 0; ix < resourceGroups.length; ix++) {
@@ -853,7 +856,7 @@ export default class WebformBuilder extends Component {
             rebuild = target.formioComponent.rebuild();
         }
         if (!rebuild) {
-            rebuild = NativePromise.resolve();
+            rebuild = Promise.resolve();
         }
         return rebuild.then(() => {
             this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);
@@ -871,7 +874,7 @@ export default class WebformBuilder extends Component {
         }
         this.keyboardActionsEnabled = _.get(this.options, 'keyboardBuilder', false) || this.options.properties?.keyboardBuilder;
         const isShowSubmitButton = !this.options.noDefaultSubmitButton
-            && !form.components.length;
+            && (!form.components.length || !form.components.find(comp => comp.key === 'submit'));
         // Ensure there is at least a submit button.
         if (isShowSubmitButton) {
             form.components.push({
@@ -898,7 +901,7 @@ export default class WebformBuilder extends Component {
                 return this.rebuild().then(() => this.form);
             });
         }
-        return NativePromise.resolve(form);
+        return Promise.resolve(form);
     }
     populateRecaptchaSettings(form) {
         //populate isEnabled for recaptcha form settings
@@ -947,7 +950,7 @@ export default class WebformBuilder extends Component {
             else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
                 parent.formioComponent.removeChildComponent(component);
             }
-            const rebuild = parent.formioComponent.rebuild() || NativePromise.resolve();
+            const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
             rebuild.then(() => {
                 this.emit('removeComponent', component, parent.formioComponent.schema, path, index);
                 this.emit('change', this.form);
@@ -996,6 +999,9 @@ export default class WebformBuilder extends Component {
                 _.assign(defaultValueComponent.component, _.omit({ ...component }, [
                     'key',
                     'label',
+                    'labelPosition',
+                    'labelMargin',
+                    'labelWidth',
                     'placeholder',
                     'tooltip',
                     'hidden',
@@ -1124,7 +1130,7 @@ export default class WebformBuilder extends Component {
             else if (isParentSaveChildMethod) {
                 parent.formioComponent.saveChildComponent(submissionData);
             }
-            const rebuild = parentComponent.rebuild() || NativePromise.resolve();
+            const rebuild = parentComponent.rebuild() || Promise.resolve();
             return rebuild.then(() => {
                 const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);
                 this.emitSaveComponentEvent(schema, originalComp, parentComponent.schema, path, index, isNew, originalComponentSchema);
@@ -1138,16 +1144,70 @@ export default class WebformBuilder extends Component {
             });
         }
         this.highlightInvalidComponents();
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     emitSaveComponentEvent(schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema) {
         this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);
     }
+    attachEditComponentControls(component, parent, isNew, original, ComponentClass) {
+        const cancelButtons = this.componentEdit.querySelectorAll('[ref="cancelButton"]');
+        cancelButtons.forEach((cancelButton) => {
+            this.editForm.addEventListener(cancelButton, 'click', (event) => {
+                event.preventDefault();
+                this.editForm.detach();
+                this.emit('cancelComponent', component);
+                this.dialog.close();
+                this.highlightInvalidComponents();
+            });
+        });
+        const removeButtons = this.componentEdit.querySelectorAll('[ref="removeButton"]');
+        removeButtons.forEach((removeButton) => {
+            this.editForm.addEventListener(removeButton, 'click', (event) => {
+                event.preventDefault();
+                // Since we are already removing the component, don't trigger another remove.
+                this.saved = true;
+                this.editForm.detach();
+                this.removeComponent(component, parent, original);
+                this.dialog.close();
+                this.highlightInvalidComponents();
+            });
+        });
+        const saveButtons = this.componentEdit.querySelectorAll('[ref="saveButton"]');
+        saveButtons.forEach((saveButton) => {
+            this.editForm.addEventListener(saveButton, 'click', (event) => {
+                event.preventDefault();
+                if (!this.editForm.checkValidity(this.editForm.data, true, this.editForm.data)) {
+                    this.editForm.setPristine(false);
+                    this.editForm.showErrors();
+                    return false;
+                }
+                this.saved = true;
+                this.saveComponent(component, parent, isNew, original);
+            });
+        });
+        const previewButtons = this.componentEdit.querySelectorAll('[ref="previewButton"]');
+        previewButtons.forEach((previewButton) => {
+            this.editForm.addEventListener(previewButton, 'click', (event) => {
+                event.preventDefault();
+                this.showPreview = !this.showPreview;
+                this.editForm.detach();
+                this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {
+                    componentInfo: ComponentClass.builderInfo,
+                    editForm: this.editForm.render(),
+                    preview: this.preview ? this.preview.render() : false,
+                    showPreview: this.showPreview,
+                    helplinks: this.helplinks,
+                }));
+                this.editForm.attach(this.componentEdit.querySelector('[ref="editForm"]'));
+                this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
+            });
+        });
+    }
     editComponent(component, parent, isNew, isJsonEdit, original, flags = {}) {
         if (!component.key) {
             return;
         }
-        let saved = false;
+        this.saved = false;
         const componentCopy = fastCloneDeep(component);
         let ComponentClass = Components.components[componentCopy.type];
         const isCustom = ComponentClass === undefined;
@@ -1195,7 +1255,9 @@ export default class WebformBuilder extends Component {
                 }
             ]
         } : ComponentClass.editForm(_.cloneDeep(overrides));
-        const instanceOptions = {};
+        const instanceOptions = {
+            inFormBuilder: true,
+        };
         this.hook('instanceOptionsPreview', instanceOptions);
         const instance = new ComponentClass(componentCopy, instanceOptions);
         const schema = this.hook('builderComponentSchema', component, instance);
@@ -1220,12 +1282,14 @@ export default class WebformBuilder extends Component {
             ]));
             this.hook('previewFormSettitngs', schema, isJsonEdit);
         }
+        this.showPreview = ComponentClass.builderInfo.showPreview ?? true;
         this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });
         this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {
             componentInfo: ComponentClass.builderInfo,
             editForm: this.editForm.render(),
             preview: this.preview ? this.preview.render() : false,
-            helplinks: this.helplinks,
+            showPreview: this.showPreview,
+            helplinks: this.helplinks
         }));
         this.dialog = this.createModal(this.componentEdit, _.get(this.options, 'dialogAttr', {}));
         // This is the attach step.
@@ -1279,48 +1343,14 @@ export default class WebformBuilder extends Component {
                 this.updateComponent(event.data.componentJson || event.data, event.changed);
             }
         });
-        const cancelButtons = this.componentEdit.querySelectorAll('[ref="cancelButton"]');
-        cancelButtons.forEach((cancelButton) => {
-            this.addEventListener(cancelButton, 'click', (event) => {
-                event.preventDefault();
-                this.editForm.detach();
-                this.emit('cancelComponent', component);
-                this.dialog.close();
-                this.highlightInvalidComponents();
-            });
-        });
-        const removeButtons = this.componentEdit.querySelectorAll('[ref="removeButton"]');
-        removeButtons.forEach((removeButton) => {
-            this.addEventListener(removeButton, 'click', (event) => {
-                event.preventDefault();
-                // Since we are already removing the component, don't trigger another remove.
-                saved = true;
-                this.editForm.detach();
-                this.removeComponent(component, parent, original);
-                this.dialog.close();
-                this.highlightInvalidComponents();
-            });
-        });
-        const saveButtons = this.componentEdit.querySelectorAll('[ref="saveButton"]');
-        saveButtons.forEach((saveButton) => {
-            this.addEventListener(saveButton, 'click', (event) => {
-                event.preventDefault();
-                if (!this.editForm.checkValidity(this.editForm.data, true, this.editForm.data)) {
-                    this.editForm.setPristine(false);
-                    this.editForm.showErrors();
-                    return false;
-                }
-                saved = true;
-                this.saveComponent(component, parent, isNew, original);
-            });
-        });
+        this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
         const dialogClose = () => {
             this.editForm.destroy(true);
             if (this.preview) {
                 this.preview.destroy(true);
                 this.preview = null;
             }
-            if (isNew && !saved) {
+            if (isNew && !this.saved) {
                 this.removeComponent(component, parent, original);
                 this.highlightInvalidComponents();
             }
@@ -1339,15 +1369,21 @@ export default class WebformBuilder extends Component {
             data.type).replace(/^[0-9]*/, '');
     }
     moveComponent(component) {
+        if (this.selectedComponent) {
+            const prevSelected = this.selectedComponent;
+            prevSelected.element?.classList.remove('builder-component-selected');
+            this.removeEventListener(document, 'keydown');
+        }
         component.element.focus();
-        component.element.classList.add('builder-selected');
-        this.selectedElement = component;
-        this.removeEventListener(component.element, 'keydown');
-        this.addEventListener(component.element, 'keydown', this.moveHandler.bind(this));
+        component.element.classList.add('builder-component-selected');
+        this.selectedComponent = component;
+        this.addEventListener(document, 'keydown', this.moveHandler.bind(this));
     }
     moveHandler = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
+        if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
         if (e.keyCode === 38) {
             this.updateComponentPlacement(true);
         }
@@ -1355,11 +1391,11 @@ export default class WebformBuilder extends Component {
             this.updateComponentPlacement(false);
         }
         if (e.keyCode === 13) {
-            this.stopMoving(this.selectedElement);
+            this.stopMoving(this.selectedComponent);
         }
     };
     updateComponentPlacement(direction) {
-        const component = this.selectedElement;
+        const component = this.selectedComponent;
         let index, info;
         const step = direction ? -1 : 1;
         if (component) {
@@ -1402,7 +1438,9 @@ export default class WebformBuilder extends Component {
     }
     stopMoving(comp) {
         const parent = comp.element.parentNode;
+        this.removeEventListener(document, 'keydown');
         parent.formioComponent.rebuild();
+        this.selectedComponent = null;
     }
     addNewComponent(element) {
         const source = document.querySelector('.formio-builder-form');

package/lib/mjs/Wizard.d.ts

@@ -11,7 +11,7 @@ declare class Wizard extends Webform {
     _seenPages: number[];
     subWizards: any[];
     allPages: any[];
-    lastPromise: any;
+    lastPromise: Promise<void>;
     enabledIndex: number;
     editMode: boolean;
     originalOptions: any;
@@ -40,6 +40,7 @@ declare class Wizard extends Webform {
     prepareHeaderSettings(ctx: any, headerType: any): any;
     redrawNavigation(): void;
     redrawHeader(): void;
+    attach(element: any): Promise<void>;
     scrollPageToTop(): void;
     isBreadcrumbClickable(): any;
     isAllowPrevious(): any;
@@ -60,16 +61,18 @@ declare class Wizard extends Webform {
     establishPages(data?: any): any[];
     updatePages(): void;
     addComponents(): void;
-    setPage(num: any): any;
+    setPage(num: any): Promise<void>;
     pageFieldLogic(page: any): void;
     get currentPage(): any;
     getNextPage(): number | null;
     getPreviousPage(): number;
+    beforeSubmit(): Promise<any[]>;
+    beforePage(next: any): Promise<any>;
     emitNextPage(): void;
-    nextPage(): any;
+    nextPage(): Promise<void>;
     emitPrevPage(): void;
-    prevPage(): any;
-    cancel(noconfirm: any): any;
+    prevPage(): Promise<void>;
+    cancel(noconfirm: any): Promise<void> | Promise<number>;
     getPageIndexByKey(key: any): number;
     get schema(): Object;
     setComponentSchema(): void;

package/lib/mjs/Wizard.js

@@ -1,4 +1,3 @@
-import NativePromise from 'native-promise-only';
 import _ from 'lodash';
 import Webform from './Webform';
 import { Formio } from './Formio';
@@ -35,7 +34,7 @@ export default class Wizard extends Webform {
         this._seenPages = [0];
         this.subWizards = [];
         this.allPages = [];
-        this.lastPromise = NativePromise.resolve();
+        this.lastPromise = Promise.resolve();
         this.enabledIndex = 0;
         this.editMode = false;
         this.originalOptions = _.cloneDeep(this.options);
@@ -550,7 +549,7 @@ export default class Wizard extends Webform {
     }
     setPage(num) {
         if (num === this.page) {
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         if (num >= 0 && num < this.pages.length) {
             this.page = num;
@@ -572,13 +571,13 @@ export default class Wizard extends Webform {
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
             });
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         else if (!this.pages.length) {
             this.redraw();
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
-        return NativePromise.reject('Page not found');
+        return Promise.reject('Page not found');
     }
     pageFieldLogic(page) {
         if (this.pages?.[page]) {
@@ -631,13 +630,13 @@ export default class Wizard extends Webform {
     }
     beforeSubmit() {
         const pages = this.getPages();
-        return NativePromise.all(pages.map((page) => {
+        return Promise.all(pages.map((page) => {
             page.options.beforeSubmit = true;
             return page.beforeSubmit();
         }));
     }
     beforePage(next) {
-        return new NativePromise((resolve, reject) => {
+        return new Promise((resolve, reject) => {
             this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {
                 if (err) {
                     this.showErrors(err, true);
@@ -681,7 +680,7 @@ export default class Wizard extends Webform {
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
             this.scrollIntoView(this.element);
-            return NativePromise.reject(this.showErrors([], true));
+            return Promise.reject(this.showErrors([], true));
         }
     }
     emitPrevPage() {
@@ -696,7 +695,7 @@ export default class Wizard extends Webform {
     }
     cancel(noconfirm) {
         if (this.options.readOnly) {
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         if (super.cancel(noconfirm)) {
             this.setPristine(true);
@@ -709,7 +708,7 @@ export default class Wizard extends Webform {
                 return this.page;
             });
         }
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     getPageIndexByKey(key) {
         let pageIndex = this.page;
@@ -772,7 +771,8 @@ export default class Wizard extends Webform {
     setValue(submission, flags = {}, ignoreEstablishment) {
         this._submission = submission;
         if ((flags && flags.fromSubmission && (this.options.readOnly || this.editMode) && !this.isHtmlRenderMode()) ||
-            (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id)) {
+            (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id) ||
+            (this.options.server && (this.prefixComps.length || this.suffixComps.length))) {
             this._data = submission.data;
         }
         if (!ignoreEstablishment) {

package/lib/mjs/WizardBuilder.d.ts

@@ -30,10 +30,12 @@ export default class WizardBuilder extends WebformBuilder {
             components: any[];
         }[];
     };
-    addPage(page: any): any;
-    removePage(pageIndex: any, componentIndex: any): any;
-    onReorder(element: any, _target: any, _source: any, sibling: any): any;
-    setPage(index: any): any;
+    navigationDragula: any;
+    rebuild(): Promise<void> | Promise<boolean>;
+    addPage(page: any): Promise<void> | Promise<boolean>;
+    removePage(pageIndex: any, componentIndex: any): Promise<void> | Promise<boolean> | undefined;
+    onReorder(element: any, _target: any, _source: any, sibling: any): Promise<void> | undefined;
+    setPage(index: any): Promise<void> | Promise<boolean> | undefined;
     getPageConfig(index: any, components?: any[]): {
         title: string;
         label: string;

package/lib/mjs/WizardBuilder.js

@@ -101,6 +101,11 @@ export default class WizardBuilder extends WebformBuilder {
             const components = this._form.components.filter((component) => component.type !== 'button');
             this._form.components = [this.getPageConfig(1, components)];
         }
+        else {
+            const components = this._form.components
+                .filter((component) => component.type !== 'button' || component.action !== 'submit');
+            this._form.components = components;
+        }
         this.rebuild();
     }
     get form() {
@@ -143,7 +148,10 @@ export default class WizardBuilder extends WebformBuilder {
             page.parentNode.dragInfo = { index };
         });
         if (this.dragulaLib) {
-            this.dragulaLib([this.element.querySelector('.wizard-pages')])
+            this.navigationDragula = this.dragulaLib([this.element.querySelector('.wizard-pages')], {
+                moves: (el) => (!el.classList.contains('wizard-add-page')),
+                accepts: (el, target, source, sibling) => (sibling ? true : false),
+            })
                 .on('drop', this.onReorder.bind(this));
         }
         this.refs.addPage.forEach(link => {
@@ -160,6 +168,13 @@ export default class WizardBuilder extends WebformBuilder {
         });
         return super.attach(element);
     }
+    detach() {
+        if (this.navigationDragula) {
+            this.navigationDragula.destroy();
+        }
+        this.navigationDragula = null;
+        super.detach();
+    }
     rebuild() {
         const page = this.currentPage;
         this.webform.setForm({
@@ -196,13 +211,15 @@ export default class WizardBuilder extends WebformBuilder {
         }
     }
     onReorder(element, _target, _source, sibling) {
-        if (!element.dragInfo || (sibling && !sibling.dragInfo)) {
+        const isSiblingAnAddPageButton = sibling?.classList.contains('wizard-add-page');
+        // We still can paste before Add Page button
+        if (!element.dragInfo || (sibling && !sibling.dragInfo && !isSiblingAnAddPageButton)) {
             console.warn('There is no Drag Info available for either dragged or sibling element');
             return;
         }
         const oldPosition = element.dragInfo.index;
         //should drop at next sibling position; no next sibling means drop to last position
-        const newPosition = (sibling ? sibling.dragInfo.index : this.pages.length);
+        const newPosition = (sibling && sibling.dragInfo ? sibling.dragInfo.index : this.pages.length);
         const movedBelow = newPosition > oldPosition;
         const formComponents = fastCloneDeep(this._form.components);
         const draggedRowData = this._form.components[oldPosition];

package/lib/mjs/addons/FormioAddon.d.ts

@@ -12,7 +12,7 @@ export default class FormioAddon extends Element {
     namespace: string;
     component: any;
     settings: any;
-    attach(element: any): any;
+    attach(element: any): Promise<void>;
     _element: any;
     destroy(): void;
 }

package/lib/mjs/addons/FormioAddon.js

@@ -1,5 +1,4 @@
 import Element from '../Element';
-import NativePromise from 'native-promise-only';
 import _ from 'lodash';
 export default class FormioAddon extends Element {
     static get info() {
@@ -25,7 +24,7 @@ export default class FormioAddon extends Element {
     }
     attach(element) {
         this._element = element;
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     destroy() { }
 }

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -4,6 +4,21 @@
  */
 declare class Component extends Element {
     static schema(...sources: any[]): any;
+    /**
+     * Return the simple condition settings as part of the component.
+     *
+     * @return {Object}
+     *
+     */
+    static get conditionOperatorsSettings(): Object;
+    /**
+     * Return the array of possible types of component value absed on its schema.
+     *
+     * @param schema
+     * @return {Array}
+     *
+     */
+    static savedValueTypes(schema: any): any[];
     /**
      * Provides a table view for this component. Override if you wish to do something different than using getView
      * method of your instance.
@@ -12,6 +27,7 @@ declare class Component extends Element {
      * @param options
      */
     static tableView(value: any, options: any): void;
+    static get serverConditionSettings(): Object;
     /**
      * Initialize a new Component.
      *
@@ -151,7 +167,7 @@ declare class Component extends Element {
     set data(arg: any);
     get data(): any;
     mergeSchema(component?: {}): any;
-    get ready(): any;
+    get ready(): Promise<Component>;
     get isPDFReadOnlyMode(): any;
     get labelInfo(): {
         hidden: any;
@@ -293,12 +309,12 @@ declare class Component extends Element {
     loadRefs(element: any, refs: any): void;
     setOpenModalElement(template: any): void;
     getModalPreviewTemplate(): any;
-    build(element: any): any;
+    build(element: any): Promise<void>;
     get hasModalSaveButton(): boolean;
     render(children?: string, topLevel?: boolean): any;
     attachTooltips(toolTipsRefs: any): void;
     createComponentModal(element: any, modalShouldBeOpened: any, currentValue: any): ComponentModal;
-    attach(element: any): any;
+    attach(element: any): Promise<void>;
     componentModal: any;
     restoreFocus(): void;
     addShortcut(element: any, shortcut: any): void;
@@ -402,8 +418,8 @@ declare class Component extends Element {
     errorMessage(type: any): any;
     setContent(element: any, content: any, forceSanitize: any, sanitizeOptions: any): boolean;
     restoreCaretPosition(): void;
-    redraw(): any;
-    rebuild(): any;
+    redraw(): Promise<void>;
+    rebuild(): Promise<void>;
     hasClass(element: any, className: any): boolean | undefined;
     addClass(element: any, className: any): Component | undefined;
     removeClass(element: any, className: any): Component | undefined;
@@ -694,7 +710,7 @@ declare class Component extends Element {
      */
     checkComponentValidity(data: any, dirty: any, row: any, options?: {}): boolean;
     checkValidity(data: any, dirty: any, row: any, silentCheck: any): boolean;
-    checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any): any;
+    checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any): Promise<boolean>;
     /**
      * Check the conditions, calculations, and validity of a single component and triggers an update if
      * something changed.
@@ -728,8 +744,8 @@ declare class Component extends Element {
      */
     isValueHidden(): boolean | any;
     shouldSkipValidation(data: any, dirty: any, row: any): boolean;
-    whenReady(): any;
-    get dataReady(): any;
+    whenReady(): Promise<void>;
+    get dataReady(): Promise<void>;
     /**
      * Prints out the value of this component as a string value.
      */