@formio/js 5.0.0-dev.5632.8d1873d → 5.0.0-dev.5633.3b83d8c

package/lib/cjs/Webform.d.ts

@@ -356,6 +356,12 @@ 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,6 +716,17 @@ 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
@@ -728,10 +739,7 @@ class Webform extends NestedDataComponent_1.default {
             if (resolveFlags) {
                 flags = Object.assign(Object.assign({}, flags), resolveFlags);
             }
-            this.submissionSet = true;
-            this.triggerChange(flags);
-            this.emit('beforeSetSubmission', submission);
-            this.setValue(submission, flags);
+            this.onSetSubmission(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err)).catch((err) => this.submissionReadyReject(err));
     }

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

@@ -327,10 +327,12 @@ 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,6 +1029,9 @@ 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;
@@ -1036,7 +1039,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.renderTemplate('modalPreview', {
+        return this.renderModalPreview({
             previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
             messages: '',
             labelInfo: modalLabel,
@@ -1074,21 +1077,17 @@ 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) {
-                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 }),
-                });
+                this.tooltips[index] = this.createTooltip(tooltip);
             }
         });
     }
@@ -1850,6 +1849,9 @@ 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,6 +79,7 @@ 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

@@ -645,9 +645,12 @@ class FormComponent extends Component_1.default {
             });
         }
         else {
-            this.subForm.setValue(submission, flags);
+            this.onSetSubFormValue(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.removeHTML)(itemTemplate)
+                ? (0, utils_1.unescapeHTML)(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.renderTemplate('modalPreview', {
+        return this.renderModalPreview({
             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,12 +107,6 @@ 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.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;
+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;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
@@ -448,16 +448,6 @@ 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
@@ -467,9 +457,8 @@ function unescapeHTML(str) {
     if (typeof window === 'undefined' || !('DOMParser' in window)) {
         return str;
     }
-    const elem = document.createElement('textarea');
-    elem.innerHTML = str;
-    return elem.value;
+    const doc = new window.DOMParser().parseFromString(str, 'text/html');
+    return doc.documentElement.textContent;
 }
 exports.unescapeHTML = unescapeHTML;
 /**

package/lib/mjs/Webform.d.ts

@@ -356,6 +356,12 @@ 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,6 +714,17 @@ 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
@@ -732,10 +743,7 @@ export default class Webform extends NestedDataComponent {
                     ...resolveFlags
                 };
             }
-            this.submissionSet = true;
-            this.triggerChange(flags);
-            this.emit('beforeSetSubmission', submission);
-            this.setValue(submission, flags);
+            this.onSetSubmission(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err)).catch((err) => this.submissionReadyReject(err));
     }

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

@@ -327,10 +327,12 @@ 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,13 +996,16 @@ 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.renderTemplate('modalPreview', {
+        return this.renderModalPreview({
             previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
             messages: '',
             labelInfo: modalLabel,
@@ -1040,21 +1043,25 @@ 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) {
-                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 }),
-                });
+                this.tooltips[index] = this.createTooltip(tooltip);
             }
         });
     }
@@ -1814,6 +1821,9 @@ 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,6 +79,7 @@ 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

@@ -635,9 +635,12 @@ export default class FormComponent extends Component {
             });
         }
         else {
-            this.subForm.setValue(submission, flags);
+            this.onSetSubFormValue(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, removeHTML } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue } 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
-                ? removeHTML(itemTemplate)
+                ? unescapeHTML(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.renderTemplate('modalPreview', {
+        return this.renderModalPreview({
             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,12 +107,6 @@ 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,15 +395,6 @@ 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
@@ -413,9 +404,8 @@ export function unescapeHTML(str) {
     if (typeof window === 'undefined' || !('DOMParser' in window)) {
         return str;
     }
-    const elem = document.createElement('textarea');
-    elem.innerHTML = str;
-    return elem.value;
+    const doc = new window.DOMParser().parseFromString(str, 'text/html');
+    return doc.documentElement.textContent;
 }
 /**
  * Make HTML element from string

package/package.json

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