@formio/js 5.3.0 → 5.4.0-api98.1

package/lib/cjs/components/_classes/component/editForm/Component.edit.data.d.ts

@@ -82,6 +82,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -101,6 +102,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -126,6 +128,7 @@ declare const _default: ({
         value: string;
     })[];
     placeholder?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -141,6 +144,7 @@ declare const _default: ({
     tooltip: string;
     key: string;
     input: boolean;
+    customConditional: string;
     logic: ({
         name: string;
         trigger: {
@@ -211,6 +215,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     as?: undefined;
     editor?: undefined;
@@ -226,6 +231,7 @@ declare const _default: ({
     placeholder?: undefined;
     inline?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -248,6 +254,7 @@ declare const _default: ({
     placeholder?: undefined;
     inline?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;

package/lib/cjs/components/_classes/component/editForm/Component.edit.data.js

@@ -60,6 +60,7 @@ exports.default = [
         tooltip: 'Encrypt this field on the server. This is two way encryption which is not suitable for passwords.',
         key: 'encrypted',
         input: true,
+        customConditional: 'show = data.encrypted;',
         logic: [
             {
                 name: 'disabled',

package/lib/cjs/components/_classes/input/Input.js

@@ -20,6 +20,7 @@ class Input extends Multivalue_1.default {
         }, ...extend);
     }
     get inputInfo() {
+        var _a;
         const attr = {
             name: this.options.name,
             type: this.component.inputType || 'text',
@@ -34,7 +35,7 @@ class Input extends Multivalue_1.default {
         if (this.component.inputMode) {
             attr.inputmode = this.component.inputMode;
         }
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly)) {
             attr.placeholder = this.getFormattedAttribute(this.component.placeholder);
         }
         if (this.component.tabindex) {
@@ -166,6 +167,9 @@ class Input extends Multivalue_1.default {
         }
     }
     updateValueAt(value, flags, index) {
+        if (flags.modified) {
+            (0, index_1.announceScreenReaderMessage)(this, value, index);
+        }
         flags = flags || {};
         if (lodash_1.default.get(this.component, 'showWordCount', false)) {
             if (this.refs.wordcount && this.refs.wordcount[index]) {
@@ -190,7 +194,7 @@ class Input extends Multivalue_1.default {
     updateValue(value, flags, index) {
         flags = flags || {};
         const changed = super.updateValue(value, flags);
-        this.triggerUpdateValueAt(this.dataValue, flags, index);
+        this.triggerUpdateValueAt(this.dataValue, Object.assign({}, flags), index);
         return changed;
     }
     parseValue(value) {
@@ -201,6 +205,7 @@ class Input extends Multivalue_1.default {
     }
     attach(element) {
         this.loadRefs(element, {
+            announceMessage: 'multiple',
             charcount: 'multiple',
             wordcount: 'multiple',
             prefix: 'multiple',
@@ -244,6 +249,16 @@ class Input extends Multivalue_1.default {
                 }
             });
         }
+        this.on('focus', (comp) => {
+            (0, index_1.announceScreenReaderMessage)(comp, comp.dataValue, 0, true);
+        });
+        this.on('blur', (comp) => {
+            var _a, _b;
+            const el = (_b = (_a = comp.refs) === null || _a === void 0 ? void 0 : _a["announceMessage"]) === null || _b === void 0 ? void 0 : _b[0];
+            if (el) {
+                el.textContent = "";
+            }
+        });
         return promise;
     }
     /**

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -835,6 +835,11 @@ class NestedComponent extends Field_1.default {
         else if (value && component.hasValue(value)) {
             return component.setValue(lodash_1.default.get(value, component.key), flags);
         }
+        // if no value is provided and noDefault flag, set empty value
+        else if (flags.noDefault && component.allowData) {
+            flags.resetValue = true;
+            return component.setValue(component.emptyValue, flags);
+        }
         else if ((!this.rootPristine || component.visible) &&
             (flags.resetValue || component.shouldAddDefaultValue)) {
             flags.noValidate = !flags.dirty;

package/lib/cjs/components/address/Address.js

@@ -310,6 +310,7 @@ class AddressComponent extends Container_1.default {
         return this.refs ? this.refs[AddressComponent.removeRowButtonRef] || null : null;
     }
     get searchInputAttributes() {
+        var _a;
         const attr = {
             name: this.options.name,
             type: 'text',
@@ -317,7 +318,7 @@ class AddressComponent extends Container_1.default {
             lang: this.options.language,
             tabindex: this.component.tabindex || 0,
         };
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly)) {
             ((attr.placeholder = this.t(this.component.placeholder)), { _userInput: true });
         }
         if (this.disabled) {
@@ -402,6 +403,7 @@ class AddressComponent extends Container_1.default {
         super.redraw();
     }
     attach(element) {
+        var _a;
         const result = (this.builderMode || this.manualMode ? super.attach : Field_1.default.prototype.attach).call(this, element);
         if (!this.builderMode) {
             if (!this.provider && this.component.provider) {
@@ -417,6 +419,20 @@ class AddressComponent extends Container_1.default {
             [AddressComponent.removeValueIconRef]: 'multiple',
             [AddressComponent.searchInputRef]: 'multiple',
         });
+        // We define a container for rendering autocomplete.
+        // If isInShadowDOM=true then we render it in shadow dom otherwise in the document body.
+        const isInShadowDOM = typeof ShadowRoot !== 'undefined' && ((_a = this.element) === null || _a === void 0 ? void 0 : _a.getRootNode()) instanceof ShadowRoot;
+        let container;
+        if (isInShadowDOM) {
+            const shadowRoot = this.element.getRootNode();
+            container = document.createElement('div');
+            const target = shadowRoot.querySelector('.formio-form-wrapper');
+            target.appendChild(container);
+        }
+        else {
+            container = document.createElement('div');
+            document.body.appendChild(container);
+        }
         this.searchInput.forEach((element, index) => {
             if (!this.builderMode && element && this.provider) {
                 if (this.component.provider === 'google') {
@@ -425,6 +441,7 @@ class AddressComponent extends Container_1.default {
                 else {
                     (0, autocompleter_1.default)({
                         input: element,
+                        container,
                         debounceWaitMs: 300,
                         fetch: (text, update) => {
                             const query = text;

package/lib/cjs/components/datagrid/DataGrid.js

@@ -113,6 +113,17 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {
             defaultValue.push({});
         }
+        if (this.component.customDefaultValue) {
+            return defaultValue;
+        }
+        if (defaultValue.length === 1 && this.columns) {
+            (0, utils_1.eachComponent)(this.components, (comp, path) => {
+                var _a;
+                if (((_a = comp.component) === null || _a === void 0 ? void 0 : _a.input) && comp.defaultValue) {
+                    lodash_1.default.set(defaultValue[0], path, comp.defaultValue);
+                }
+            });
+        }
         return defaultValue;
     }
     set disabled(disabled) {
@@ -437,7 +448,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         });
         (0, utils_1.screenReaderSpeech)('Row has been added');
         this.checkConditions();
-        (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, { modified: true });
+        (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, { modified: true, noPristineChangeOnModified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
         });
@@ -525,7 +536,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
             options.onChange = (flags, changed, modified) => {
-                var _a, _b, _c, _d, _e;
+                var _a, _b, _c, _d;
                 if (changed.component.type === 'form') {
                     const formComp = (0, utils_1.getComponent)(this.component.components, changed.component.key);
                     lodash_1.default.set(formComp, 'components', changed.component.components);
@@ -535,7 +546,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
                     (_d = (_c = changed.instance.root).triggerChange) === null || _d === void 0 ? void 0 : _d.call(_c, flags, changed, modified);
                 }
                 else {
-                    (_e = this.triggerChange) === null || _e === void 0 ? void 0 : _e.call(this, { modified });
+                    this.triggerRootChange(flags, changed, modified);
                 }
             };
             let columnComponent;

package/lib/cjs/components/datamap/DataMap.d.ts

@@ -15,6 +15,10 @@ export default class DataMapComponent extends DataGridComponent {
         disableBuilderActions: boolean;
     };
     get valueKey(): any;
+    get iteratableRows(): {
+        components: any;
+        data: any;
+    }[][];
     hasHeader(): boolean;
     getRowKey(rowIndex: any): string;
     get defaultRowKey(): string;

package/lib/cjs/components/datamap/DataMap.js

@@ -123,14 +123,15 @@ class DataMapComponent extends DataGrid_1.default {
     }
     get iteratableRows() {
         return this.rows.map((row) => {
-            return {
-                components: row,
-                data: lodash_1.default.mapValues(row, (comp) => comp.dataValue)
-            };
+            return Object.keys(row).map((key) => ({
+                components: row[key],
+                data: row[key].dataValue,
+            }));
         });
     }
     componentContext(component) {
-        return this.iteratableRows[component.row].data[component.key];
+        return this.iteratableRows[component.row].find((comp) => comp.components.key === component.key)
+            .data;
     }
     hasHeader() {
         return true;

package/lib/cjs/components/fieldset/Fieldset.d.ts

@@ -10,6 +10,7 @@ export default class FieldsetComponent extends NestedComponent {
     };
     static savedValueTypes(): never[];
     constructor(...args: any[]);
+    attach(element: any): Promise<void>;
     noField: boolean;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/cjs/components/fieldset/Fieldset.js

@@ -12,6 +12,7 @@ class FieldsetComponent extends NestedComponent_1.default {
             type: 'fieldset',
             legend: '',
             components: [],
+            clearOnHide: false,
             input: false,
             persistent: false,
         }, ...extend);
@@ -39,6 +40,13 @@ class FieldsetComponent extends NestedComponent_1.default {
     get templateName() {
         return 'fieldset';
     }
+    attach(element) {
+        return super.attach(element).then(() => {
+            if (this.component.legend && this.refs.header) {
+                this.refs.header.setAttribute('id', `l-${this.id}-legend`);
+            }
+        });
+    }
     constructor(...args) {
         super(...args);
         this.noField = true;

package/lib/cjs/components/file/File.d.ts

@@ -30,6 +30,8 @@ export default class FileComponent extends Field {
     } | undefined;
     isSyncing: boolean | undefined;
     abortUploads: any[] | undefined;
+    pendingfiles: any;
+    resolvedFiles: any[] | undefined;
     get dataReady(): Promise<any>;
     loadImage(fileInfo: any): any;
     get emptyValue(): never[];
@@ -147,7 +149,7 @@ export default class FileComponent extends Field {
     getMultipartOptions(fileToSync: any): any;
     uploadFile(fileToSync: any): Promise<any>;
     upload(): Promise<void | {
-        fileToSync: never;
+        fileToSync: any;
         fileInfo: any;
     }[]>;
     syncFiles(): Promise<void>;

package/lib/cjs/components/file/File.js

@@ -107,6 +107,8 @@ class FileComponent extends Field_1.default {
         };
         this.isSyncing = false;
         this.abortUploads = [];
+        this.pendingfiles = [];
+        this.resolvedFiles = [];
     }
     get dataReady() {
         return this.filesReady || Promise.resolve();
@@ -700,22 +702,42 @@ class FileComponent extends Field_1.default {
             };
         }
         // Check file minimum size
-        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {
-            return {
-                status: 'error',
-                message: this.t('File is too small; it must be at least {{ size }}', {
-                    size: this.component.fileMinSize,
-                }),
-            };
+        if (this.component.fileMinSize) {
+            const interpolatedMinSize = this.interpolate(this.component.fileMinSize, this.evalContext());
+            // This case is when the user entered fileMinSize expression, but did not enter or made a typo when
+            // setting the fileMinSize variable in the config of the project
+            if (!interpolatedMinSize) {
+                return {
+                    status: 'error',
+                    message: 'Please, check the entered parameters',
+                };
+            }
+            if (!this.validateMinSize(file, interpolatedMinSize)) {
+                return {
+                    status: 'error',
+                    message: this.t('fileTooSmall', {
+                        size: interpolatedMinSize,
+                    }),
+                };
+            }
         }
         // Check file maximum size
-        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {
-            return {
-                status: 'error',
-                message: this.t('File is too big; it must be at most {{ size }}', {
-                    size: this.component.fileMaxSize,
-                }),
-            };
+        if (this.component.fileMaxSize) {
+            const interpolatedMaxSize = this.interpolate(this.component.fileMaxSize, this.evalContext());
+            if (!interpolatedMaxSize) {
+                return {
+                    status: 'error',
+                    message: 'Please, check the entered parameters',
+                };
+            }
+            if (!this.validateMaxSize(file, interpolatedMaxSize)) {
+                return {
+                    status: 'error',
+                    message: this.t('fileTooBig', {
+                        size: interpolatedMaxSize,
+                    }),
+                };
+            }
         }
         return {};
     }
@@ -972,7 +994,23 @@ class FileComponent extends Field_1.default {
                             fileInfo,
                         };
                     }
-                    fileInfo = yield this.uploadFile(fileToSync);
+                    if (fileToSync.status === "success") {
+                        const uploadedFile = this.resolvedFiles.find(x => x.fileToSync.originalName === fileToSync.originalName);
+                        return {
+                            fileToSync: uploadedFile.fileToSync,
+                            fileInfo: uploadedFile.fileInfo,
+                        };
+                    }
+                    const pendingFile = this.pendingfiles.find(x => x.name === fileToSync.name);
+                    if (pendingFile) {
+                        fileInfo = yield pendingFile.fileInfoProm;
+                    }
+                    else {
+                        const promInfo = this.uploadFile(fileToSync);
+                        this.pendingfiles.push({ name: fileToSync.name, fileInfoProm: promInfo });
+                        fileInfo = yield promInfo;
+                    }
+                    this.pendingfiles = this.pendingfiles.filter(x => x.name !== fileToSync.name);
                     fileToSync.status = 'success';
                     fileToSync.message = this.t('Succefully uploaded');
                     fileInfo.originalName = fileToSync.originalName;
@@ -997,6 +1035,10 @@ class FileComponent extends Field_1.default {
                 finally {
                     delete fileToSync.progress;
                     this.redraw();
+                    const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);
+                    if (!fileExists) {
+                        this.resolvedFiles.push({ fileToSync, fileInfo });
+                    }
                 }
                 return {
                     fileToSync,
@@ -1006,7 +1048,7 @@ class FileComponent extends Field_1.default {
         });
     }
     syncFiles() {
-        var _a;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             this.isSyncing = true;
             this.fileDropHidden = true;
@@ -1016,6 +1058,9 @@ class FileComponent extends Field_1.default {
                     this.delete(),
                     this.upload(),
                 ]);
+                if (filesToUpload.length !== ((_b = (_a = this.filesToSync) === null || _a === void 0 ? void 0 : _a.filesToUpload) === null || _b === void 0 ? void 0 : _b.length)) {
+                    return;
+                }
                 this.filesToSync.filesToDelete = filesToDelete
                     .filter((file) => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })
                     .map((file) => file.fileToSync);
@@ -1029,7 +1074,7 @@ class FileComponent extends Field_1.default {
                     .filter((file) => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })
                     .map((file) => file.fileInfo);
                 this.dataValue.push(...data);
-                (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, {
+                (_c = this.triggerChange) === null || _c === void 0 ? void 0 : _c.call(this, {
                     modified: true,
                 });
                 return Promise.resolve();

package/lib/cjs/components/form/Form.js

@@ -564,7 +564,8 @@ class FormComponent extends Component_1.default {
     get shouldSubmit() {
         return (this.subFormReady &&
             (!this.component.hasOwnProperty('reference') || this.component.reference) &&
-            !this.shouldConditionallyClear());
+            !this.shouldConditionallyClear() &&
+            !(this.component.hidden && this.component.clearOnHide));
     }
     /**
      * Returns the data for the subform.

package/lib/cjs/components/select/Select.js

@@ -276,9 +276,9 @@ class SelectComponent extends ListComponent_1.default {
         // Inside DataTable component won't have dataValue set
         const shouldUseSelectData = (this.component.multiple && lodash_1.default.isArray(this.dataValue)
             ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)
-            : this.dataValue === this.normalizeSingleValue(value)) || this.inDataTable;
+            : this.dataValue === this.normalizeSingleValue(value)) || (this.inDataTable && !this.element);
         if (shouldUseSelectData) {
-            const selectData = this.selectData;
+            const selectData = (this.inDataTable && !this.element) ? this.component.selectData : this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
                 if (!this.templateData || !this.templateData[templateValue]) {
@@ -519,7 +519,7 @@ class SelectComponent extends ListComponent_1.default {
                     noUpdateEvent: true,
                 });
             }
-            else if (this.shouldAddDefaultValue && !this.options.readOnly) {
+            else if (this.shouldAddDefaultValue && !this.options.readOnly && this.root && !this.root.submissionSet) {
                 // If a default value is provided then select it.
                 const defaultValue = this.defaultValue;
                 if (!this.isEmpty(defaultValue)) {
@@ -766,7 +766,8 @@ class SelectComponent extends ListComponent_1.default {
         }
     }
     addPlaceholder() {
-        if (!this.component.placeholder) {
+        var _a;
+        if (!this.component.placeholder || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly)) {
             return;
         }
         this.addOption('', this.component.placeholder, { placeholder: true });
@@ -830,10 +831,12 @@ class SelectComponent extends ListComponent_1.default {
             : element;
     }
     choicesOptions() {
+        var _a;
         const useSearch = this.component.hasOwnProperty('searchEnabled')
             ? this.component.searchEnabled
             : true;
-        const placeholderValue = this.t(this.component.placeholder, { _userInput: true });
+        const hasPlaceholder = !!this.component.placeholder && !((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly);
+        const placeholderValue = hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null;
         let customOptions = this.component.customOptions || {};
         if (typeof customOptions == 'string') {
             try {
@@ -857,7 +860,7 @@ class SelectComponent extends ListComponent_1.default {
                     'formio-choices',
                 ],
                 containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),
-            }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: this.component.dropdown || 'auto', searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', [
+            }, addItemText: false, allowHTML: true, placeholder: hasPlaceholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: this.component.dropdown || 'auto', searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', [
                 'label',
             ]), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch
                 ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false, duplicateItemsAllowed: false }, customOptions);
@@ -1296,7 +1299,8 @@ class SelectComponent extends ListComponent_1.default {
     }
     setMetadata(value, flags = {}) {
         var _a, _b;
-        if (lodash_1.default.isNil(value)) {
+        if (lodash_1.default.isNil(value) ||
+            (this.inDataTable && this.component.dataSrc === 'values')) {
             return;
         }
         const valueIsObject = lodash_1.default.isObject(value);
@@ -1306,7 +1310,7 @@ class SelectComponent extends ListComponent_1.default {
         }
         // Check to see if we need to save off the template data into our metadata.
         const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
-        const shouldSaveData = (!valueIsObject || this.component.reference) && !this.inDataTable;
+        const shouldSaveData = (!valueIsObject || this.component.reference) && !(this.inDataTable && this.row === '');
         if (!lodash_1.default.isNil(templateValue) &&
             shouldSaveData &&
             this.templateData &&
@@ -1592,7 +1596,8 @@ class SelectComponent extends ListComponent_1.default {
     asString(value, options = {}) {
         var _a;
         value = value !== null && value !== void 0 ? value : this.getValue();
-        if (options.modalPreview || this.inDataTable) {
+        if (options.modalPreview ||
+            ((this.inDataTable || this.inEditGrid) && !['values', 'custom'].includes(this.component.dataSrc))) {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }

package/lib/cjs/components/table/editForm/Table.edit.display.d.ts

@@ -10,6 +10,8 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -27,6 +29,8 @@ declare const _default: ({
     autofocus: boolean;
     overrideEditForm: boolean;
     ignore?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -42,6 +46,25 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    defaultValue?: undefined;
+} | {
+    label: string;
+    multiple: boolean;
+    key: string;
+    type: string;
+    input: boolean;
+    tooltip: string;
+    customConditional: string;
+    weight: number;
+    ignore?: undefined;
+    placeholder?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -57,6 +80,8 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -80,5 +105,7 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
 })[];
 export default _default;

package/lib/cjs/components/table/editForm/Table.edit.display.js

@@ -69,6 +69,16 @@ exports.default = [
         placeholder: 'Number of Columns',
         tooltip: 'Enter the number or columns that should be displayed by this table.',
     },
+    {
+        label: "Column Headers",
+        multiple: true,
+        key: "header",
+        type: "textfield",
+        input: true,
+        tooltip: 'Enter header names for the columns',
+        customConditional: "if(instance && instance.dataValue && Array.isArray(instance.dataValue)) {\r\n  const isAllowToAddHeader = instance.dataValue.length < data.numCols;\r\n  const addBtn = _.get(instance, 'refs.addButton[0]', null);\r\n  if(addBtn) {\r\n    isAllowToAddHeader? addBtn.removeAttribute('disabled'):  addBtn.setAttribute('disabled', 'disabled');\r\n  }\r\n} ",
+        weight: 3,
+    },
     {
         type: 'checkbox',
         label: 'Clone Row Components',

package/lib/cjs/components/tags/Tags.js

@@ -63,6 +63,7 @@ class TagsComponent extends Input_1.default {
         return this.component.delimeter || ',';
     }
     attachElement(element, index) {
+        var _a;
         super.attachElement(element, index);
         if (!element) {
             return;
@@ -76,7 +77,7 @@ class TagsComponent extends Input_1.default {
         if (!choices_js_1.default) {
             return;
         }
-        const hasPlaceholder = !!this.component.placeholder;
+        const hasPlaceholder = !!this.component.placeholder && !((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly);
         this.choices = new choices_js_1.default(element, {
             delimiter: this.delimiter,
             editItems: true,

package/lib/cjs/package.json

@@ -1,4 +1,4 @@
 {
     "type": "commonjs",
-    "version": "5.3.0"
+    "version": "5.4.0-api98.1"
 }

package/lib/cjs/templates/index.d.ts

@@ -20,6 +20,9 @@ declare namespace _default {
         wizardHeaderVertical: {
             form: string;
         };
+        wizardHeaderStepIndicator: {
+            form: string;
+        };
         wizardNav: {
             form: string;
         };

package/lib/cjs/translations/en.d.ts

@@ -76,5 +76,7 @@ declare namespace _default {
     let requiredDayEmpty: string;
     let requiredMonthField: string;
     let requiredYearField: string;
+    let fileTooSmall: string;
+    let fileTooBig: string;
 }
 export default _default;