@formio/js 5.0.0-rc.36 → 5.0.0-rc.38

package/dist/formio.utils.min.js.LICENSE.txt

@@ -10,9 +10,11 @@
  * MIT licensed
  */
 
-/*! @license DOMPurify 3.0.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.6/LICENSE */
+/*! @license DOMPurify 3.0.7 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.7/LICENSE */
 
-/*! formiojs v5.0.0-rc.34 | https://unpkg.com/formiojs@5.0.0-rc.34/LICENSE.txt */
+/*! @license DOMPurify 3.0.8 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.8/LICENSE */
+
+/*! formiojs v5.0.0-rc.38 | https://unpkg.com/formiojs@5.0.0-rc.38/LICENSE.txt */
 
 /**
  * @license
@@ -33,4 +35,4 @@
 
 //! moment.js
 
-//! version : 0.5.43
+//! version : 0.5.44

package/lib/cjs/Element.js

@@ -208,7 +208,7 @@ class Element {
      * @param persistent
      *   If this listener should persist beyond "destroy" commands.
      */
-    addEventListener(obj, type, func, persistent) {
+    addEventListener(obj, type, func, persistent, capture) {
         if (!obj) {
             return;
         }
@@ -216,7 +216,7 @@ class Element {
             this.eventHandlers.push({ id: this.id, obj, type, func });
         }
         if ('addEventListener' in obj) {
-            obj.addEventListener(type, func, false);
+            obj.addEventListener(type, func, !!capture);
         }
         else if ('attachEvent' in obj) {
             obj.attachEvent(`on${type}`, func);

package/lib/cjs/Embed.js

@@ -210,6 +210,24 @@ class Formio {
             }
         });
     }
+    static addLoader(wrapper) {
+        return __awaiter(this, void 0, void 0, function* () {
+            wrapper.appendChild(Formio.createElement('div', {
+                'class': 'formio-loader'
+            }, [{
+                    tag: 'div',
+                    attrs: {
+                        class: 'loader-wrapper'
+                    },
+                    children: [{
+                            tag: 'div',
+                            attrs: {
+                                class: 'loader text-center'
+                            }
+                        }]
+                }]));
+        });
+    }
     // eslint-disable-next-line max-statements
     static init(element, options = {}, builder = false) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -254,20 +272,7 @@ class Formio {
             // Load the renderer styles.
             yield Formio.addStyles(wrapper, Formio.config.embedCSS || `${Formio.cdn.js}/formio.embed.css`);
             // Add a loader.
-            wrapper.appendChild(Formio.createElement('div', {
-                'class': 'formio-loader'
-            }, [{
-                    tag: 'div',
-                    attrs: {
-                        class: 'loader-wrapper'
-                    },
-                    children: [{
-                            tag: 'div',
-                            attrs: {
-                                class: 'loader text-center'
-                            }
-                        }]
-                }]));
+            Formio.addLoader(wrapper);
             const formioSrc = Formio.config.full ? 'formio.full' : 'formio.form';
             const renderer = Formio.config.debug ? formioSrc : `${formioSrc}.min`;
             Formio.FormioClass = yield Formio.addScript(wrapper, Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');

package/lib/cjs/Formio.js

@@ -111,3 +111,6 @@ sdk_1.Formio.Form = Embed_1.Formio.Form;
 sdk_1.Formio.FormBuilder = Embed_1.Formio.FormBuilder;
 sdk_1.Formio.use = Embed_1.Formio.use;
 sdk_1.Formio.createForm = Embed_1.Formio.createForm;
+sdk_1.Formio.submitDone = Embed_1.Formio.submitDone;
+sdk_1.Formio.addLibrary = Embed_1.Formio.addLibrary;
+sdk_1.Formio.addLoader = Embed_1.Formio.addLoader;

package/lib/cjs/components/_classes/component/Component.js

@@ -850,7 +850,11 @@ class Component extends Element_1.default {
     renderTemplate(name, data = {}, modeOption) {
         // Need to make this fall back to form if renderMode is not found similar to how we search templates.
         const mode = modeOption || this.options.renderMode || 'form';
-        data.component = this.component;
+        data.component = Object.assign({}, this.component);
+        // Escape HTML provided in component description and render it as a string instead
+        if (this.component.description) {
+            data.component.description = FormioUtils.escapeHTML(this.component.description);
+        }
         data.self = this;
         data.options = this.options;
         data.readOnly = this.options.readOnly;
@@ -1064,12 +1068,12 @@ class Component extends Element_1.default {
                 const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
                     .replace(/(?:\r\n|\r|\n)/g, '<br />');
                 this.tooltips[index] = (0, tippy_js_1.default)(tooltip, {
-                    allowHTML: true,
+                    allowHTML: false,
                     trigger: 'mouseenter click focus',
                     placement: 'right',
                     zIndex: 10000,
                     interactive: true,
-                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),
+                    content: this.t(tooltipText, { _userInput: true }),
                 });
             }
         });
@@ -2606,7 +2610,7 @@ class Component extends Element_1.default {
             scope: validationScope,
             instance: this,
             processors: [
-                process_1.validateProcessSync
+                process_1.validateProcessInfo
             ]
         });
         const errors = validationScope.errors;
@@ -2688,7 +2692,7 @@ class Component extends Element_1.default {
             instance: this,
             scope: { errors: [] },
             processors: [
-                async ? process_1.validateProcess : process_1.validateProcessSync
+                process_1.validateProcessInfo
             ]
         };
         if (async) {
@@ -2717,7 +2721,12 @@ class Component extends Element_1.default {
             return this.validateComponent(data, row, flags).then((errors) => {
                 allErrors.push(...errors);
                 if (this.parent && this.parent.childErrors) {
-                    this.parent.childErrors.push(...errors);
+                    if (errors.length) {
+                        this.parent.childErrors.push(...errors);
+                    }
+                    else {
+                        lodash_1.default.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                    }
                 }
                 this.showValidationErrors(errors, data, row, flags);
                 return errors.length === 0;
@@ -2728,7 +2737,12 @@ class Component extends Element_1.default {
             this.showValidationErrors(errors, data, row, flags);
             allErrors.push(...errors);
             if (this.parent && this.parent.childErrors) {
-                this.parent.childErrors.push(...errors);
+                if (errors.length) {
+                    this.parent.childErrors.push(...errors);
+                }
+                else {
+                    lodash_1.default.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                }
             }
             return errors.length === 0;
         }

package/lib/cjs/components/_classes/component/fixtures/comp5.js

@@ -6,8 +6,8 @@ exports.default = {
     components: [
         {
             label: 'Text Field',
-            description: "<img <img src='https://somesite' onerror='var _ee = 2' >",
-            tooltip: "<img src='https://somesite' onerror='var _ee = 1 >",
+            description: "<img src='https://somesite' onerror='var _ee = 2' >",
+            tooltip: "<img src='https://somesite' onerror='var _ee = 1' >",
             applyMaskOn: 'change',
             tableView: true,
             key: 'textField',

package/lib/cjs/components/_classes/list/ListComponent.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Field_1 = __importDefault(require("../field/Field"));
 const Formio_1 = require("../../../Formio");
 const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../../utils/utils");
 class ListComponent extends Field_1.default {
     static schema(...extend) {
         return Field_1.default.schema({
@@ -48,18 +49,10 @@ class ListComponent extends Field_1.default {
         return true;
     }
     getTemplateKeys() {
-        this.templateKeys = [];
-        if (this.options.readOnly && this.component.template) {
-            const keys = this.component.template.match(/({{\s*(.*?)\s*}})/g);
-            if (keys) {
-                keys.forEach((key) => {
-                    const propKey = key.match(/{{\s*item\.(.*?)\s*}}/);
-                    if (propKey && propKey.length > 1) {
-                        this.templateKeys.push(propKey[1]);
-                    }
-                });
-            }
-        }
+        const template = this.component.template;
+        this.templateKeys = this.options.readOnly && template
+            ? (0, utils_1.getItemTemplateKeys)(template)
+            : [];
     }
     get requestHeaders() {
         // Create the headers object.

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

@@ -586,6 +586,16 @@ class NestedComponent extends Field_1.default {
         components = components || this.component.components;
         data = data || this.rootValue;
         const { async, dirty, process } = flags;
+        const validationProcessorProcess = (context) => this.validationProcessor(context, flags);
+        const checkModalProcessorProcess = ({ instance, component, components }) => {
+            // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.
+            if (instance &&
+                instance.parent &&
+                (component === components[components.length - 1]) &&
+                instance.parent.componentModal) {
+                instance.parent.checkModal(instance.parent.childErrors, dirty);
+            }
+        };
         const processorContext = {
             process: process || 'unknown',
             components,
@@ -593,15 +603,13 @@ class NestedComponent extends Field_1.default {
             data: data,
             scope: { errors: [] },
             processors: [
-                (context) => this.validationProcessor(context, flags),
-                ({ instance, component, components }) => {
-                    // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.
-                    if (instance &&
-                        instance.parent &&
-                        (component === components[components.length - 1]) &&
-                        instance.parent.componentModal) {
-                        instance.parent.checkModal(instance.parent.childErrors, dirty);
-                    }
+                {
+                    process: validationProcessorProcess,
+                    processSync: validationProcessorProcess
+                },
+                {
+                    process: checkModalProcessorProcess,
+                    processSync: checkModalProcessorProcess
                 }
             ]
         };

package/lib/cjs/components/columns/editForm/Columns.edit.display.js

@@ -58,7 +58,7 @@ exports.default = [
         key: 'columns',
         label: 'Column Properties',
         addAnother: 'Add Column',
-        tooltip: 'The width, offset, push, and pull settings for each column.',
+        tooltip: 'The size and width settings for each column. One row is equal to 12. (e.g., a row with two columns spanning the entire page should be 6 and 6)',
         reorder: true,
         components: [
             {

package/lib/cjs/components/editgrid/EditGrid.js

@@ -473,7 +473,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 ].forEach(({ className, event, action, }) => {
                     const elements = row.getElementsByClassName(className);
                     Array.prototype.forEach.call(elements, (element) => {
-                        if (this.options.readOnly && lodash_1.default.intersection(element.classList, ['editRow', 'removeRow']).length) {
+                        if (this.options.pdf && lodash_1.default.intersection(element.classList, ['editRow', 'removeRow']).length) {
                             element.style.display = 'none';
                         }
                         else {
@@ -608,6 +608,9 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         const dataObj = {};
         const rowIndex = this.editRows.length;
         const editRow = this.createRow(dataObj, rowIndex);
+        if (editRow.state === EditRowState.New) {
+            this.emptyRow = (0, utils_1.fastCloneDeep)(editRow.data);
+        }
         if (this.inlineEditMode) {
             this.triggerChange();
         }
@@ -678,7 +681,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
     }
     showDialog(rowIndex) {
         const editRow = this.editRows[rowIndex];
-        if (lodash_1.default.isEqual(editRow.backup, editRow.data)) {
+        if (editRow.state === EditRowState.New ? lodash_1.default.isEqual(this.emptyRow, editRow.data) : lodash_1.default.isEqual(editRow.backup, editRow.data)) {
             return Promise.resolve();
         }
         const wrapper = this.ce('div', { ref: 'confirmationDialog' });
@@ -980,6 +983,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             const editGridValue = lodash_1.default.get(rootValue, this.path, []);
             editGridValue[editRow.rowIndex] = editRow.data;
             lodash_1.default.set(rootValue, this.path, editGridValue);
+            const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });
             editRow.errors = (0, process_1.processSync)({
                 components: (0, utils_1.fastCloneDeep)(this.component.components).map((component) => {
                     component.parentPath = `${this.path}[${editRow.rowIndex}]`;
@@ -991,7 +995,10 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 instances: this.componentsMap,
                 scope: { errors: [] },
                 processors: [
-                    (context) => this.validationProcessor(context, { dirty, silentCheck })
+                    {
+                        process: validationProcessorProcess,
+                        processSync: validationProcessorProcess
+                    }
                 ]
             }).errors;
         }
@@ -1082,7 +1089,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
             return false;
         }
-        const message = this.invalid || this.invalidMessage(data, dirty);
+        const message = this.invalid || this.invalidMessage(data, dirty, false, row);
         if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {
             this._errors = this.setCustomValidity(message, dirty);
             errors.push(...this._errors);

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

@@ -609,7 +609,9 @@ class FormComponent extends Component_1.default {
             const formId = submission.form || this.formObj.form || this.component.form;
             const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
             this.subForm.setUrl(submissionUrl, this.options);
-            this.subForm.loadSubmission();
+            this.subForm.loadSubmission().catch((err) => {
+                console.error(`Unable to load subform submission ${submission._id}:`, err);
+            });
         }
         else {
             this.subForm.setValue(submission, flags);

package/lib/cjs/components/html/HTML.js

@@ -43,13 +43,13 @@ class HTMLComponent extends Component_1.default {
             return ` ${this.component.content} `;
         }
         const submission = lodash_1.default.get(this.root, 'submission', {});
-        const content = this.component.content ? this.interpolate(this.component.content, {
+        const content = this.component.content ? this.interpolate(this.sanitize(this.component.content, this.shouldSanitizeValue), {
             metadata: submission.metadata || {},
             submission: submission,
             data: this.rootValue,
             row: this.data
         }) : '';
-        return this.sanitize(content, this.shouldSanitizeValue);
+        return content;
     }
     get singleTags() {
         return ['br', 'img', 'hr'];

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'HTML',
+            attrs: [
+                {
+                    attr: '',
+                    value: '',
+                },
+            ],
+            content: '<img src=1 onerror=alert("htmlContent")>',
+            refreshOnChange: false,
+            key: 'html',
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

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

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp2 = exports.comp1 = void 0;
+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;

package/lib/cjs/components/radio/Radio.js

@@ -352,7 +352,8 @@ class RadioComponent extends ListComponent_1.default {
         if (value === this.emptyValue) {
             return value;
         }
-        if (!isNaN(parseFloat(value)) && isFinite(value)) {
+        const isEquivalent = lodash_1.default.toString(value) === Number(value).toString();
+        if (!isNaN(parseFloat(value)) && isFinite(value) && isEquivalent) {
             value = +value;
         }
         if (value === 'true') {

package/lib/cjs/components/radio/fixtures/comp10.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'label': 'Radio',
+    'optionsLabelPosition': 'right',
+    'inline': false,
+    'tableView': false,
+    'values': [
+        {
+            'label': '01',
+            'value': '01',
+            'shortcut': ''
+        },
+        {
+            'label': '1',
+            'value': '1',
+            'shortcut': ''
+        }
+    ],
+    'key': 'radio',
+    'type': 'radio',
+    'input': true
+};

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = 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"));
@@ -22,3 +22,5 @@ const comp8_1 = __importDefault(require("./comp8"));
 exports.comp8 = comp8_1.default;
 const comp9_1 = __importDefault(require("./comp9"));
 exports.comp9 = comp9_1.default;
+const comp10_1 = __importDefault(require("./comp10"));
+exports.comp10 = comp10_1.default;

package/lib/cjs/components/recaptcha/ReCaptcha.js

@@ -57,6 +57,9 @@ class ReCaptchaComponent extends Component_1.default {
     createLabel() {
         return;
     }
+    get skipInEmail() {
+        return true;
+    }
     verify(actionName) {
         const siteKey = (0, get_1.default)(this.root.form, 'settings.recaptcha.siteKey');
         if (!siteKey) {

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

@@ -64,7 +64,19 @@ class SelectComponent extends ListComponent_1.default {
     }
     static get conditionOperatorsSettings() {
         return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {
-                return Object.assign(Object.assign({}, classComp), { type: 'select' });
+                const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });
+                if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {
+                    valueComp.reference = false;
+                    valueComp.onSetItems = `
+            var templateKeys = utils.getItemTemplateKeys(component.template) || [];
+            items = _.map(items || [], i => {
+              var item = {};
+              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));
+              return item;
+            })
+          `;
+                }
+                return valueComp;
             } });
     }
     static savedValueTypes(schema) {
@@ -122,6 +134,7 @@ class SelectComponent extends ListComponent_1.default {
         this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
+        this.shouldPositionDropdown = this.hasDataGridAncestor();
         if (this.isHtmlRenderMode()) {
             this.activate();
         }
@@ -822,6 +835,11 @@ class SelectComponent extends ListComponent_1.default {
                 });
             }
         }
+        if (window && this.choices && this.shouldPositionDropdown) {
+            this.addEventListener(window.document, 'scroll', () => {
+                this.positionDropdown(true);
+            }, false, true);
+        }
         this.focusableElement.setAttribute('tabIndex', tabIndex);
         // If a search field is provided, then add an event listener to update items on search.
         if (this.component.searchField) {
@@ -851,7 +869,10 @@ class SelectComponent extends ListComponent_1.default {
             const updateComponent = (evt) => {
                 this.triggerUpdate(evt.detail.value);
             };
-            this.addEventListener(input, 'search', lodash_1.default.debounce(updateComponent, debounceTimeout));
+            this.addEventListener(input, 'search', lodash_1.default.debounce((e) => {
+                updateComponent(e);
+                this.positionDropdown();
+            }, debounceTimeout));
             this.addEventListener(input, 'stopSearch', () => this.triggerUpdate());
             this.addEventListener(input, 'hideDropdown', () => {
                 if (this.choices && this.choices.input && this.choices.input.element) {
@@ -860,7 +881,15 @@ class SelectComponent extends ListComponent_1.default {
                 this.updateItems(null, true);
             });
         }
-        this.addEventListener(input, 'showDropdown', () => this.update());
+        this.addEventListener(input, 'showDropdown', () => {
+            this.update();
+            this.positionDropdown();
+        });
+        if (this.shouldPositionDropdown) {
+            this.addEventListener(input, 'highlightChoice', () => {
+                this.positionDropdown();
+            });
+        }
         if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {
             this.addPlaceholderItem(choicesOptions.placeholderValue);
             this.addEventListener(input, 'removeItem', () => {
@@ -897,6 +926,46 @@ class SelectComponent extends ListComponent_1.default {
         this.triggerUpdate();
         return superAttach;
     }
+    setDropdownPosition() {
+        var _a, _b, _c, _d;
+        const dropdown = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.dropdown) === null || _b === void 0 ? void 0 : _b.element;
+        const container = (_d = (_c = this.choices) === null || _c === void 0 ? void 0 : _c.containerOuter) === null || _d === void 0 ? void 0 : _d.element;
+        if (!dropdown || !container) {
+            return;
+        }
+        const containerPosition = container.getBoundingClientRect();
+        const isFlipped = container.classList.contains('is-flipped');
+        lodash_1.default.assign(dropdown.style, {
+            top: `${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px`,
+            left: `${containerPosition.left}px`,
+            width: `${containerPosition.width}px`,
+            position: 'fixed',
+            bottom: 'unset',
+            right: 'unset',
+        });
+    }
+    hasDataGridAncestor(comp) {
+        comp = comp || this;
+        if (comp.inDataGrid || comp.type === 'datagrid') {
+            return true;
+        }
+        else if (comp.parent) {
+            return this.hasDataGridAncestor(comp.parent);
+        }
+        else {
+            return false;
+        }
+    }
+    positionDropdown(scroll) {
+        var _a;
+        if (!this.shouldPositionDropdown || !this.choices || (!((_a = this.choices.dropdown) === null || _a === void 0 ? void 0 : _a.isActive) && scroll)) {
+            return;
+        }
+        this.setDropdownPosition();
+        this.itemsLoaded.then(() => {
+            this.setDropdownPosition();
+        });
+    }
     get isLoadingAvailable() {
         return !this.isScrollLoading && this.additionalResourcesAvailable;
     }
@@ -1014,10 +1083,10 @@ class SelectComponent extends ListComponent_1.default {
         }
         return added;
     }
-    getValueAsString(data) {
+    getValueAsString(data, options) {
         return (this.component.multiple && Array.isArray(data))
-            ? data.map(this.asString.bind(this)).join(', ')
-            : this.asString(data);
+            ? data.map((v) => this.asString(v, options)).join(', ')
+            : this.asString(data, options);
     }
     getValue() {
         // If the widget isn't active.
@@ -1370,7 +1439,7 @@ class SelectComponent extends ListComponent_1.default {
         }
         return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));
     }
-    asString(value) {
+    asString(value, options = {}) {
         var _a;
         value = value !== null && value !== void 0 ? value : this.getValue();
         //need to convert values to strings to be able to compare values with available options that are strings
@@ -1421,9 +1490,15 @@ class SelectComponent extends ListComponent_1.default {
         if (lodash_1.default.isString(value)) {
             return value;
         }
+        const getTemplateValue = (v) => {
+            const itemTemplate = this.itemTemplate(v);
+            return options.csv && itemTemplate
+                ? (0, utils_1.unescapeHTML)(itemTemplate)
+                : itemTemplate;
+        };
         if (Array.isArray(value)) {
             const items = [];
-            value.forEach(item => items.push(this.itemTemplate(item)));
+            value.forEach(item => items.push(getTemplateValue(item)));
             if (this.component.dataSrc === 'resource' && items.length > 0) {
                 return items.join(', ');
             }
@@ -1438,7 +1513,7 @@ class SelectComponent extends ListComponent_1.default {
             return JSON.stringify(value);
         }
         return !lodash_1.default.isNil(value)
-            ? this.itemTemplate(value)
+            ? getTemplateValue(value)
             : '-';
     }
     detach() {

package/lib/cjs/components/survey/Survey.js

@@ -150,6 +150,16 @@ class SurveyComponent extends Field_1.default {
             result += '</tbody></table>';
             return result;
         }
+        if (lodash_1.default.isPlainObject(value)) {
+            const { values = [], questions = [] } = this.component;
+            return lodash_1.default.isEmpty(value)
+                ? ''
+                : lodash_1.default.map(value, (v, q) => {
+                    const valueLabel = lodash_1.default.get(lodash_1.default.find(values, val => lodash_1.default.isEqual(val.value, v)), 'label', v);
+                    const questionLabel = lodash_1.default.get(lodash_1.default.find(questions, quest => lodash_1.default.isEqual(quest.value, q)), 'label', q);
+                    return `${questionLabel}: ${valueLabel}`;
+                }).join('; ');
+        }
         return super.getValueAsString(value, options);
     }
 }