@formio/js 5.0.0-dev.5633.3b83d8c → 5.0.0-dev.5634.29c714c

package/lib/cjs/Webform.d.ts

@@ -356,12 +356,6 @@ declare class Webform extends NestedDataComponent {
      * @returns {Object}
      */
     get submission(): Object;
-    /**
-   * @param submission
-   * @param flags
-   * @return {void}
-   */
-    onSetSubmission(submission: any, flags?: {}): void;
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param submission

package/lib/cjs/Webform.js

@@ -716,17 +716,6 @@ class Webform extends NestedDataComponent_1.default {
     set submission(submission) {
         this.setSubmission(submission);
     }
-    /**
-   * @param submission
-   * @param flags
-   * @return {void}
-   */
-    onSetSubmission(submission, flags = {}) {
-        this.submissionSet = true;
-        this.triggerChange(flags);
-        this.emit('beforeSetSubmission', submission);
-        this.setValue(submission, flags);
-    }
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param submission
@@ -739,7 +728,10 @@ class Webform extends NestedDataComponent_1.default {
             if (resolveFlags) {
                 flags = Object.assign(Object.assign({}, flags), resolveFlags);
             }
-            this.onSetSubmission(submission, flags);
+            this.submissionSet = true;
+            this.triggerChange(flags);
+            this.emit('beforeSetSubmission', submission);
+            this.setValue(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err)).catch((err) => this.submissionReadyReject(err));
     }
@@ -795,7 +787,8 @@ class Webform extends NestedDataComponent_1.default {
         formio.loadSubmissions({
             params: {
                 state: 'draft',
-                owner: userId
+                owner: userId,
+                sort: '-created'
             }
         }).then(submissions => {
             if (submissions.length > 0 && !this.options.skipDraftRestore) {

package/lib/cjs/WebformBuilder.js

@@ -986,8 +986,14 @@ class WebformBuilder extends Component_1.default {
             else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
                 parent.formioComponent.removeChildComponent(component);
             }
-            if (component.input && componentInstance && componentInstance.parent) {
-                lodash_1.default.unset(componentInstance._data, componentInstance.key);
+            if (component.input && componentInstance && parent.formioComponent) {
+                const parentDefaultValue = lodash_1.default.get(parent.formioComponent, 'component.defaultValue', null);
+                if (Array.isArray(parentDefaultValue)) {
+                    parentDefaultValue.forEach(v => lodash_1.default.unset(v, componentInstance.key));
+                }
+                else if (typeof parentDefaultValue === 'object') {
+                    lodash_1.default.unset(parentDefaultValue, componentInstance.key);
+                }
             }
             const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
             rebuild.then(() => {

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

@@ -327,12 +327,10 @@ declare class Component extends Element {
      */
     loadRefs(element: HTMLElement, refs: object, referenceAttributeName?: string | undefined): void;
     setOpenModalElement(template: any): void;
-    renderModalPreview(ctx: any): any;
     getModalPreviewTemplate(): any;
     build(element: any): Promise<void>;
     get hasModalSaveButton(): boolean;
     render(children?: string, topLevel?: boolean): any;
-    createTooltip(tooltipEl: any, settings?: {}): import("tippy.js").Instance<import("tippy.js").Props>[];
     attachTooltips(toolTipsRefs: any): void;
     createComponentModal(element: any, modalShouldBeOpened: any, currentValue: any): ComponentModal;
     attach(element: any): Promise<void>;

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

@@ -1029,9 +1029,6 @@ class Component extends Element_1.default {
     setOpenModalElement(template) {
         this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());
     }
-    renderModalPreview(ctx) {
-        return this.renderTemplate('modalPreview', ctx || {});
-    }
     getModalPreviewTemplate() {
         var _a;
         const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;
@@ -1039,7 +1036,7 @@ class Component extends Element_1.default {
         if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {
             modalLabel = { className: 'field-required' };
         }
-        return this.renderModalPreview({
+        return this.renderTemplate('modalPreview', {
             previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
             messages: '',
             labelInfo: modalLabel,
@@ -1077,17 +1074,21 @@ class Component extends Element_1.default {
             }, topLevel);
         }
     }
-    createTooltip(tooltipEl, settings = {}) {
-        const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
-        const tooltipDataTitle = tooltipEl.getAttribute('data-title');
-        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
-            .replace(/(?:\r\n|\r|\n)/g, '<br />');
-        return (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));
-    }
     attachTooltips(toolTipsRefs) {
         toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {
             if (tooltip) {
-                this.tooltips[index] = this.createTooltip(tooltip);
+                const tooltipAttribute = tooltip.getAttribute('data-tooltip');
+                const tooltipDataTitle = tooltip.getAttribute('data-title');
+                const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
+                    .replace(/(?:\r\n|\r|\n)/g, '<br />');
+                this.tooltips[index] = (0, tippy_js_1.default)(tooltip, {
+                    allowHTML: true,
+                    trigger: 'mouseenter click focus',
+                    placement: 'right',
+                    zIndex: 10000,
+                    interactive: true,
+                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),
+                });
             }
         });
     }
@@ -1849,9 +1850,6 @@ class Component extends Element_1.default {
         messages = lodash_1.default.uniqBy(messages, message => message.message);
         if (this.refs.messageContainer) {
             this.setContent(this.refs.messageContainer, messages.map((message) => {
-                if (message.message && typeof message.message === 'string') {
-                    message.message = message.message.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-                }
                 return this.renderTemplate('message', Object.assign({}, message));
             }).join(''));
         }

package/lib/cjs/components/form/Form.d.ts

@@ -79,7 +79,6 @@ export default class FormComponent extends Component {
     isHidden(): boolean;
     setValue(submission: any, flags?: {}): boolean;
     setSubFormValue(submission: any, flags: any): void;
-    onSetSubFormValue(submission: any, flags: any): void;
     areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**

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

@@ -630,9 +630,10 @@ class FormComponent extends Component_1.default {
             && submission._id
             && this.subForm.formio
             && lodash_1.default.isEmpty(submission.data);
-        if (shouldLoadSubmissionById) {
+        const shouldLoadDraftById = this.options.saveDraft && lodash_1.default.isEmpty(submission.data) && lodash_1.default.get(this.subForm, 'submission._id');
+        if (shouldLoadSubmissionById || shouldLoadDraftById) {
             const formId = submission.form || this.formObj.form || this.component.form;
-            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
+            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;
             const options = ((_a = this.root.formio) === null || _a === void 0 ? void 0 : _a.base) && ((_b = this.root.formio) === null || _b === void 0 ? void 0 : _b.projectUrl)
                 ? {
                     base: this.root.formio.base,
@@ -645,12 +646,9 @@ class FormComponent extends Component_1.default {
             });
         }
         else {
-            this.onSetSubFormValue(submission, flags);
+            this.subForm.setValue(submission, flags);
         }
     }
-    onSetSubFormValue(submission, flags) {
-        this.subForm.setValue(submission, flags);
-    }
     isEmpty(value = this.dataValue) {
         return value === null || lodash_1.default.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value === null || value === void 0 ? void 0 : value.data) && !(value === null || value === void 0 ? void 0 : value._id));
     }

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

@@ -1526,7 +1526,7 @@ class SelectComponent extends ListComponent_1.default {
         const getTemplateValue = (v) => {
             const itemTemplate = this.itemTemplate(v);
             return options.csv && itemTemplate
-                ? (0, utils_1.unescapeHTML)(itemTemplate)
+                ? (0, utils_1.removeHTML)(itemTemplate)
                 : itemTemplate;
         };
         if (Array.isArray(value)) {

package/lib/cjs/components/signature/Signature.js

@@ -172,7 +172,7 @@ class SignatureComponent extends Input_1.default {
         return false;
     }
     getModalPreviewTemplate() {
-        return this.renderModalPreview({
+        return this.renderTemplate('modalPreview', {
             previewText: this.dataValue ?
                 `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />` :
                 this.t('Click to Sign')

package/lib/cjs/utils/utils.d.ts

@@ -107,6 +107,12 @@ export function checkCondition(component: any, row: any, data: any, form: any, i
  */
 export function checkTrigger(component: any, trigger: any, row: any, data: any, form: any, instance: any): mixed;
 export function setActionProperty(component: any, action: any, result: any, row: any, data: any, instance: any): any;
+/**
+ * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World
+ * @param {string} str
+ * @returns {string}
+ */
+export function removeHTML(str: string): string;
 /**
  * Unescape HTML characters like &lt, &gt, &amp and etc.
  * @param str

package/lib/cjs/utils/utils.js

@@ -30,8 +30,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
-exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = void 0;
+exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
+exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
@@ -448,6 +448,16 @@ function setActionProperty(component, action, result, row, data, instance) {
     return component;
 }
 exports.setActionProperty = setActionProperty;
+/**
+ * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World
+ * @param {string} str
+ * @returns {string}
+ */
+function removeHTML(str) {
+    const doc = new window.DOMParser().parseFromString(str, 'text/html');
+    return (doc.body.textContent || '').trim();
+}
+exports.removeHTML = removeHTML;
 /**
  * Unescape HTML characters like &lt, &gt, &amp and etc.
  * @param str
@@ -457,8 +467,9 @@ function unescapeHTML(str) {
     if (typeof window === 'undefined' || !('DOMParser' in window)) {
         return str;
     }
-    const doc = new window.DOMParser().parseFromString(str, 'text/html');
-    return doc.documentElement.textContent;
+    const elem = document.createElement('textarea');
+    elem.innerHTML = str;
+    return elem.value;
 }
 exports.unescapeHTML = unescapeHTML;
 /**

package/lib/mjs/Webform.d.ts

@@ -356,12 +356,6 @@ declare class Webform extends NestedDataComponent {
      * @returns {Object}
      */
     get submission(): Object;
-    /**
-   * @param submission
-   * @param flags
-   * @return {void}
-   */
-    onSetSubmission(submission: any, flags?: {}): void;
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param submission

package/lib/mjs/Webform.js

@@ -714,17 +714,6 @@ export default class Webform extends NestedDataComponent {
     set submission(submission) {
         this.setSubmission(submission);
     }
-    /**
-   * @param submission
-   * @param flags
-   * @return {void}
-   */
-    onSetSubmission(submission, flags = {}) {
-        this.submissionSet = true;
-        this.triggerChange(flags);
-        this.emit('beforeSetSubmission', submission);
-        this.setValue(submission, flags);
-    }
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param submission
@@ -743,7 +732,10 @@ export default class Webform extends NestedDataComponent {
                     ...resolveFlags
                 };
             }
-            this.onSetSubmission(submission, flags);
+            this.submissionSet = true;
+            this.triggerChange(flags);
+            this.emit('beforeSetSubmission', submission);
+            this.setValue(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err)).catch((err) => this.submissionReadyReject(err));
     }
@@ -799,7 +791,8 @@ export default class Webform extends NestedDataComponent {
         formio.loadSubmissions({
             params: {
                 state: 'draft',
-                owner: userId
+                owner: userId,
+                sort: '-created'
             }
         }).then(submissions => {
             if (submissions.length > 0 && !this.options.skipDraftRestore) {

package/lib/mjs/WebformBuilder.js

@@ -970,8 +970,14 @@ export default class WebformBuilder extends Component {
             else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
                 parent.formioComponent.removeChildComponent(component);
             }
-            if (component.input && componentInstance && componentInstance.parent) {
-                _.unset(componentInstance._data, componentInstance.key);
+            if (component.input && componentInstance && parent.formioComponent) {
+                const parentDefaultValue = _.get(parent.formioComponent, 'component.defaultValue', null);
+                if (Array.isArray(parentDefaultValue)) {
+                    parentDefaultValue.forEach(v => _.unset(v, componentInstance.key));
+                }
+                else if (typeof parentDefaultValue === 'object') {
+                    _.unset(parentDefaultValue, componentInstance.key);
+                }
             }
             const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
             rebuild.then(() => {

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

@@ -327,12 +327,10 @@ declare class Component extends Element {
      */
     loadRefs(element: HTMLElement, refs: object, referenceAttributeName?: string | undefined): void;
     setOpenModalElement(template: any): void;
-    renderModalPreview(ctx: any): any;
     getModalPreviewTemplate(): any;
     build(element: any): Promise<void>;
     get hasModalSaveButton(): boolean;
     render(children?: string, topLevel?: boolean): any;
-    createTooltip(tooltipEl: any, settings?: {}): import("tippy.js").Instance<import("tippy.js").Props>[];
     attachTooltips(toolTipsRefs: any): void;
     createComponentModal(element: any, modalShouldBeOpened: any, currentValue: any): ComponentModal;
     attach(element: any): Promise<void>;

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

@@ -996,16 +996,13 @@ export default class Component extends Element {
     setOpenModalElement(template) {
         this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());
     }
-    renderModalPreview(ctx) {
-        return this.renderTemplate('modalPreview', ctx || {});
-    }
     getModalPreviewTemplate() {
         const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;
         let modalLabel;
         if (this.hasInput && this.component.validate?.required && !this.isPDFReadOnlyMode) {
             modalLabel = { className: 'field-required' };
         }
-        return this.renderModalPreview({
+        return this.renderTemplate('modalPreview', {
             previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
             messages: '',
             labelInfo: modalLabel,
@@ -1043,25 +1040,21 @@ export default class Component extends Element {
             }, topLevel);
         }
     }
-    createTooltip(tooltipEl, settings = {}) {
-        const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
-        const tooltipDataTitle = tooltipEl.getAttribute('data-title');
-        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
-            .replace(/(?:\r\n|\r|\n)/g, '<br />');
-        return tippy(tooltipEl, {
-            allowHTML: true,
-            trigger: 'mouseenter click focus',
-            placement: 'right',
-            zIndex: 10000,
-            interactive: true,
-            ...settings,
-            content: this.t(this.sanitize(tooltipText), { _userInput: true }),
-        });
-    }
     attachTooltips(toolTipsRefs) {
         toolTipsRefs?.forEach((tooltip, index) => {
             if (tooltip) {
-                this.tooltips[index] = this.createTooltip(tooltip);
+                const tooltipAttribute = tooltip.getAttribute('data-tooltip');
+                const tooltipDataTitle = tooltip.getAttribute('data-title');
+                const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
+                    .replace(/(?:\r\n|\r|\n)/g, '<br />');
+                this.tooltips[index] = tippy(tooltip, {
+                    allowHTML: true,
+                    trigger: 'mouseenter click focus',
+                    placement: 'right',
+                    zIndex: 10000,
+                    interactive: true,
+                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),
+                });
             }
         });
     }
@@ -1821,9 +1814,6 @@ export default class Component extends Element {
         messages = _.uniqBy(messages, message => message.message);
         if (this.refs.messageContainer) {
             this.setContent(this.refs.messageContainer, messages.map((message) => {
-                if (message.message && typeof message.message === 'string') {
-                    message.message = message.message.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-                }
                 return this.renderTemplate('message', { ...message });
             }).join(''));
         }

package/lib/mjs/components/form/Form.d.ts

@@ -79,7 +79,6 @@ export default class FormComponent extends Component {
     isHidden(): boolean;
     setValue(submission: any, flags?: {}): boolean;
     setSubFormValue(submission: any, flags: any): void;
-    onSetSubFormValue(submission: any, flags: any): void;
     areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**

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

@@ -620,9 +620,10 @@ export default class FormComponent extends Component {
             && submission._id
             && this.subForm.formio
             && _.isEmpty(submission.data);
-        if (shouldLoadSubmissionById) {
+        const shouldLoadDraftById = this.options.saveDraft && _.isEmpty(submission.data) && _.get(this.subForm, 'submission._id');
+        if (shouldLoadSubmissionById || shouldLoadDraftById) {
             const formId = submission.form || this.formObj.form || this.component.form;
-            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
+            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;
             const options = this.root.formio?.base && this.root.formio?.projectUrl
                 ? {
                     base: this.root.formio.base,
@@ -635,12 +636,9 @@ export default class FormComponent extends Component {
             });
         }
         else {
-            this.onSetSubFormValue(submission, flags);
+            this.subForm.setValue(submission, flags);
         }
     }
-    onSetSubFormValue(submission, flags) {
-        this.subForm.setValue(submission, flags);
-    }
     isEmpty(value = this.dataValue) {
         return value === null || _.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value?.data) && !value?._id);
     }

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

@@ -3,7 +3,7 @@ import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
 import Input from '../_classes/input/Input';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue, removeHTML } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {
@@ -1551,7 +1551,7 @@ export default class SelectComponent extends ListComponent {
         const getTemplateValue = (v) => {
             const itemTemplate = this.itemTemplate(v);
             return options.csv && itemTemplate
-                ? unescapeHTML(itemTemplate)
+                ? removeHTML(itemTemplate)
                 : itemTemplate;
         };
         if (Array.isArray(value)) {

package/lib/mjs/components/signature/Signature.js

@@ -169,7 +169,7 @@ export default class SignatureComponent extends Input {
         return false;
     }
     getModalPreviewTemplate() {
-        return this.renderModalPreview({
+        return this.renderTemplate('modalPreview', {
             previewText: this.dataValue ?
                 `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />` :
                 this.t('Click to Sign')

package/lib/mjs/utils/utils.d.ts

@@ -107,6 +107,12 @@ export function checkCondition(component: any, row: any, data: any, form: any, i
  */
 export function checkTrigger(component: any, trigger: any, row: any, data: any, form: any, instance: any): mixed;
 export function setActionProperty(component: any, action: any, result: any, row: any, data: any, instance: any): any;
+/**
+ * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World
+ * @param {string} str
+ * @returns {string}
+ */
+export function removeHTML(str: string): string;
 /**
  * Unescape HTML characters like &lt, &gt, &amp and etc.
  * @param str

package/lib/mjs/utils/utils.js

@@ -395,6 +395,15 @@ export function setActionProperty(component, action, result, row, data, instance
     }
     return component;
 }
+/**
+ * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World
+ * @param {string} str
+ * @returns {string}
+ */
+export function removeHTML(str) {
+    const doc = new window.DOMParser().parseFromString(str, 'text/html');
+    return (doc.body.textContent || '').trim();
+}
 /**
  * Unescape HTML characters like &lt, &gt, &amp and etc.
  * @param str
@@ -404,8 +413,9 @@ export function unescapeHTML(str) {
     if (typeof window === 'undefined' || !('DOMParser' in window)) {
         return str;
     }
-    const doc = new window.DOMParser().parseFromString(str, 'text/html');
-    return doc.documentElement.textContent;
+    const elem = document.createElement('textarea');
+    elem.innerHTML = str;
+    return elem.value;
 }
 /**
  * Make HTML element from string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5633.3b83d8c",
+  "version": "5.0.0-dev.5634.29c714c",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {