@formio/js 5.0.0-rc.43 → 5.0.0-rc.44

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    title: 'Test',
+    name: 'test',
+    path: 'test',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Radio',
+            optionsLabelPosition: 'right',
+            inline: false,
+            tableView: false,
+            values: [
+                {
+                    label: '0',
+                    value: '0',
+                    shortcut: ''
+                },
+                {
+                    label: '1',
+                    value: '1',
+                    shortcut: ''
+                }
+            ],
+            key: 'radioNumber',
+            type: 'radio',
+            dataType: 'number',
+            input: true
+        },
+        {
+            label: 'Radio',
+            optionsLabelPosition: 'right',
+            inline: false,
+            tableView: false,
+            values: [
+                {
+                    label: '0',
+                    value: '0',
+                    shortcut: ''
+                },
+                {
+                    label: '1',
+                    value: '1',
+                    shortcut: ''
+                }
+            ],
+            key: 'radioString',
+            dataType: 'string',
+            type: 'radio',
+            input: true
+        },
+        {
+            label: 'Radio',
+            optionsLabelPosition: 'right',
+            inline: false,
+            tableView: false,
+            values: [
+                {
+                    label: 'true',
+                    value: 'true',
+                    shortcut: ''
+                },
+                {
+                    label: 'false',
+                    value: 'false',
+                    shortcut: ''
+                }
+            ],
+            key: 'radioBoolean',
+            dataType: 'boolean',
+            type: 'radio',
+            input: true
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ]
+};

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.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp11 = 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"));
@@ -24,3 +24,5 @@ const comp9_1 = __importDefault(require("./comp9"));
 exports.comp9 = comp9_1.default;
 const comp10_1 = __importDefault(require("./comp10"));
 exports.comp10 = comp10_1.default;
+const comp11_1 = __importDefault(require("./comp11"));
+exports.comp11 = comp11_1.default;

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

@@ -217,6 +217,9 @@ class SelectComponent extends ListComponent_1.default {
         }
         return super.shouldLoad;
     }
+    get selectData() {
+        return this.component.selectData || super.selectData;
+    }
     isEntireObjectDisplay() {
         return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
     }

package/lib/cjs/components/select/editForm/Select.edit.data.js

@@ -1,6 +1,36 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
 const utils_1 = require("../../../utils/utils");
+const calculateSelectData = (context) => {
+    const { instance, data } = context;
+    const rawDefaultValue = instance.downloadedResources.find(resource => lodash_1.default.get(resource, data.valueProperty) === instance.getValue());
+    const options = { data: {}, noeval: true };
+    instance.interpolate(data.template, {
+        item: rawDefaultValue,
+    }, options);
+    return options.data.item;
+};
+const setSelectData = (context) => {
+    // Wait before downloadedResources will be set
+    setTimeout(() => {
+        var _a;
+        const { instance, data } = context;
+        const selectDataComponent = instance === null || instance === void 0 ? void 0 : instance.root.getComponent('selectData');
+        // nothing can set if don't have downloaded resources
+        if (!selectDataComponent || !instance.getValue() || !((_a = instance.downloadedResources) === null || _a === void 0 ? void 0 : _a.length)) {
+            return;
+        }
+        // if valueProperty is not provided, we have entire object
+        const shouldCalculateUrlData = data.dataSrc === 'url' && data.data.url && data.valueProperty;
+        const shouldCalculateResourceData = data.dataSrc === 'resource' && data.data.resource && data.valueProperty;
+        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : undefined;
+        selectDataComponent.setValue(newValue);
+    }, 0);
+};
 exports.default = [
     {
         key: 'dataSrc',
@@ -625,5 +655,37 @@ exports.default = [
         key: 'useExactSearch',
         label: 'Use exact search',
         tooltip: 'Disables search algorithm threshold.',
-    }
+    },
+    {
+        key: 'defaultValue',
+        onSetItems(component) {
+            setSelectData(component.evalContext());
+        },
+        onChange(context) {
+            if (context && context.flags && context.flags.modified) {
+                setSelectData(context);
+            }
+        },
+    },
+    {
+        key: 'selectData',
+        conditional: {
+            json: { 'and': [
+                    { '!==': [{ var: 'data.valueProperty' }, null] },
+                    { '!==': [{ var: 'data.valueProperty' }, ''] },
+                ] },
+        },
+    },
+    {
+        key: 'template',
+        onChange(context) {
+            if (context && context.flags && context.flags.modified) {
+                const defaultValueComponent = context.instance.root.getComponent('defaultValue');
+                if (!defaultValueComponent) {
+                    return;
+                }
+                setSelectData(defaultValueComponent.evalContext());
+            }
+        },
+    },
 ];

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

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

package/lib/cjs/components/textarea/TextArea.js

@@ -62,7 +62,7 @@ class TextAreaComponent extends TextField_1.default {
         info.content = value;
         if ((this.options.readOnly || this.disabled) && !this.isHtmlRenderMode()) {
             const elementStyle = this.info.attr.style || '';
-            const children = `<div ref="input" class="formio-editor-read-only-content" ${elementStyle ? `style='${elementStyle}'` : ''}></div>`;
+            const children = `<div ${this._referenceAttributeName}="input" class="formio-editor-read-only-content" ${elementStyle ? `style='${elementStyle}'` : ''}></div>`;
             return this.renderTemplate('well', {
                 children,
                 nestedKey: this.key,

package/lib/cjs/formio.form.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.Licenses = exports.Formio = exports.Form = exports.Utils = exports.Templates = exports.Widgets = exports.Providers = exports.Displays = exports.Components = exports.useModule = exports.registerModule = void 0;
+exports.Webform = exports.EventEmitter = exports.Licenses = exports.Formio = exports.Form = exports.Utils = exports.Templates = exports.Widgets = exports.Providers = exports.Displays = exports.Components = exports.useModule = exports.registerModule = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 const Formio_1 = require("./Formio");
 Object.defineProperty(exports, "Formio", { enumerable: true, get: function () { return Formio_1.Formio; } });
@@ -25,6 +25,10 @@ exports.Utils = utils_1.default;
 const Evaluator_1 = __importDefault(require("./utils/Evaluator"));
 const licenses_1 = __importDefault(require("./licenses"));
 exports.Licenses = licenses_1.default;
+const EventEmitter_1 = __importDefault(require("./EventEmitter"));
+exports.EventEmitter = EventEmitter_1.default;
+const Webform_1 = __importDefault(require("./Webform"));
+exports.Webform = Webform_1.default;
 Formio_1.Formio.loadModules = (path = `${Formio_1.Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {
     Formio_1.Formio.requireLibrary(name, name, path, true)
         .then((modules) => {

package/lib/cjs/providers/storage/s3.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -14,7 +37,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const xhr_1 = __importDefault(require("./xhr"));
 const util_1 = require("./util");
-const AbortController = window.AbortController || require('abortcontroller-polyfill/dist/cjs-ponyfill');
+const loadAbortControllerPolyfill = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (typeof AbortController === 'undefined') {
+        yield Promise.resolve().then(() => __importStar(require('abortcontroller-polyfill/dist/polyfill-patch-fetch')));
+    }
+});
 function s3(formio) {
     return {
         uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions) {
@@ -25,6 +52,7 @@ function s3(formio) {
                     if (response.signed) {
                         if (multipartOptions && Array.isArray(response.signed)) {
                             // patch abort callback
+                            yield loadAbortControllerPolyfill();
                             const abortController = new AbortController();
                             const abortSignal = abortController.signal;
                             if (typeof abortCallback === 'function') {

package/lib/mjs/Element.js

@@ -69,6 +69,8 @@ export default class Element {
      *
      * @param {string} event - The event you wish to register the handler for.
      * @param {function} cb - The callback handler to handle this event.
+     * @param {boolean} [internal] - This is an internal event handler.
+     * @param {boolean} [once] - This event should only fire once.
      */
     on(event, cb, internal, once = false) {
         if (!this.events) {

package/lib/mjs/Form.js

@@ -97,7 +97,9 @@ export default class Form extends Element {
             this.element.appendChild(this.loader);
         }
         else if (this.loader) {
-            this.element.removeChild(this.loader);
+            if (this.element.contains(this.loader)) {
+                this.element.removeChild(this.loader);
+            }
             this.loader = null;
         }
     }

package/lib/mjs/Webform.js

@@ -1,12 +1,13 @@
 import _ from 'lodash';
 import moment from 'moment';
 import { compareVersions } from 'compare-versions';
+import { Component } from '@formio/core';
 import EventEmitter from './EventEmitter';
 import i18nDefaults from './i18n';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath, interpolateErrors } from './utils/utils';
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils';
 import { eachComponent } from './utils/formUtils';
 // Initialize the available forms.
 Formio.forms = {};
@@ -34,32 +35,113 @@ function getOptions(options) {
     }
     return options;
 }
+/**
+ * Represents a JSON value.
+ * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON
+ */
+/**
+ * Represents a JSON array.
+ * @typedef {Array<JSON>} JSONArray
+ */
+/**
+ * Represents a JSON object.
+ * @typedef {{[key: string]: JSON}} JSONObject
+ */
+/**
+ * @typedef {Object} FormioHooks
+ * @property {function} [beforeSubmit]
+ * @property {function} [beforeCancel]
+ * @property {function} [beforeNext]
+ * @property {function} [beforePrev]
+ * @property {function} [attachComponent]
+ * @property {function} [setDataValue]
+ * @property {function} [addComponents]
+ * @property {function} [addComponent]
+ * @property {function} [customValidation]
+ * @property {function} [attachWebform]
+ */
+/**
+ * @typedef {Object} SanitizeConfig
+ * @property {string[]} [addAttr]
+ * @property {string[]} [addTags]
+ * @property {string[]} [allowedAttrs]
+ * @property {string[]} [allowedTags]
+ * @property {string[]} [allowedUriRegex]
+ * @property {string[]} [addUriSafeAttr]
+ */
+/**
+ * @typedef {Object} ButtonSettings
+ * @property {boolean} [showPrevious]
+ * @property {boolean} [showNext]
+ * @property {boolean} [showCancel]
+ * @property {boolean} [showSubmit]
+ */
+/**
+ * @typedef {Object} FormOptions
+ * @property {boolean} [saveDraft] - Enable the save draft feature.
+ * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
+ * @property {boolean} [readOnly] - Set this form to readOnly.
+ * @property {boolean} [noAlerts] - Disable the alerts dialog.
+ * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {string} [template] - Custom logic for creation of elements.
+ * @property {boolean} [noDefaults] - Exclude default values from the settings.
+ * @property {any} [fileService] - The file service for this form.
+ * @property {EventEmitter} [events] - The EventEmitter for this form.
+ * @property {string} [language] - The language to render this form in.
+ * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.
+ * @property {boolean} [viewAsHtml] - View the form as raw HTML.
+ * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.
+ * @property {boolean} [highlightErrors] - Highlight any errors on the form.
+ * @property {string} [componentErrorClass] - The error class for components.
+ * @property {any} [templates] - The templates for this form.
+ * @property {string} [iconset] - The iconset for this form.
+ * @property {Component[]} [components] - The components for this form.
+ * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.
+ * @property {boolean} [showHiddenFields] - Show hidden fields.
+ * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.
+ * @property {{[key: string]: boolean}} [show] - Components to show for this form.
+ * @property {Formio} [formio] - The Formio instance for this form.
+ * @property {string} [decimalSeparator] - The decimal separator for this form.
+ * @property {string} [thousandsSeparator] - The thousands separator for this form.
+ * @property {FormioHooks} [hooks] - The hooks for this form.
+ * @property {boolean} [alwaysDirty] - Always be dirty.
+ * @property {boolean} [skipDraftRestore] - Skip restoring a draft.
+ * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.
+ * @property {string} [cdnUrl] - The CDN url for this form.
+ * @property {boolean} [flatten] - Flatten the form.
+ * @property {boolean} [sanitize] - Sanitize the form.
+ * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.
+ * @property {ButtonSettings} [buttonSettings] - The button settings for this form.
+ * @property {Object} [breadCrumbSettings] - The breadcrumb settings for this form.
+ * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).
+ * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).
+ * @property {boolean} [showCheckboxBackground] - Show the checkbox background.
+ * @property {number} [zoom] - The zoom for PDF forms.
+ */
 /**
  * Renders a Form.io form within the webpage.
  */
 export default class Webform extends NestedDataComponent {
+    /**
+     * @type {FormOptions} - the options for this Webform.
+     */
+    options;
     /**
      * Creates a new Form instance.
      *
-     * @param {Object} options - The options to create a new form instance.
-     * @param {boolean} options.saveDraft - Set this if you would like to enable the save draft feature.
-     * @param {boolean} options.saveDraftThrottle - The throttle for the save draft feature.
-     * @param {boolean} options.readOnly - Set this form to readOnly
-     * @param {boolean} options.noAlerts - Set to true to disable the alerts dialog.
-     * @param {boolean} options.i18n - The translation file for this rendering. @see https://github.com/formio/formio.js/blob/master/i18n.js
-     * @param {boolean} options.template - Provides a way to inject custom logic into the creation of every element rendered within the form.
+     * @param {HTMLElement | Object | FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.
+     * @param {FormOptions} [options] - The options to create a new form instance.
      */
-    /* eslint-disable max-statements */
-    constructor() {
-        let element, options;
-        if (arguments[0] instanceof HTMLElement || arguments[1]) {
-            element = arguments[0];
-            options = arguments[1];
+    constructor(elementOrOptions, options) {
+        let element, formOptions;
+        if (elementOrOptions instanceof HTMLElement || options) {
+            element = elementOrOptions;
+            formOptions = options;
         }
         else {
-            options = arguments[0];
+            formOptions = elementOrOptions;
         }
-        super(null, getOptions(options));
+        super(null, getOptions(formOptions));
         this.setElement(element);
         // Keep track of all available forms globally.
         Formio.forms[this.id] = this;

package/lib/mjs/WebformBuilder.js

@@ -157,7 +157,7 @@ export default class WebformBuilder extends Component {
                 return element;
             }
             // Attach container and component to element for later reference.
-            const containerElement = element.querySelector(`[ref="${component.component.key}-container"]`) || element;
+            const containerElement = element.querySelector(`[${this._referenceAttributeName}="${component.component.key}-container"]`) || element;
             containerElement.formioContainer = container;
             containerElement.formioComponent = component;
             // Add container to draggable list.
@@ -1009,7 +1009,7 @@ export default class WebformBuilder extends Component {
             };
             const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));
-            const previewElement = this.componentEdit.querySelector('[ref="preview"]');
+            const previewElement = this.componentEdit.querySelector(`[${this._referenceAttributeName}="preview"]`);
             if (previewElement) {
                 this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);
                 this.preview.attach(previewElement);
@@ -1176,7 +1176,7 @@ export default class WebformBuilder extends Component {
         this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);
     }
     attachEditComponentControls(component, parent, isNew, original, ComponentClass) {
-        const cancelButtons = this.componentEdit.querySelectorAll('[ref="cancelButton"]');
+        const cancelButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="cancelButton"]`);
         cancelButtons.forEach((cancelButton) => {
             this.editForm.addEventListener(cancelButton, 'click', (event) => {
                 event.preventDefault();
@@ -1186,7 +1186,7 @@ export default class WebformBuilder extends Component {
                 this.highlightInvalidComponents();
             });
         });
-        const removeButtons = this.componentEdit.querySelectorAll('[ref="removeButton"]');
+        const removeButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="removeButton"]`);
         removeButtons.forEach((removeButton) => {
             this.editForm.addEventListener(removeButton, 'click', (event) => {
                 event.preventDefault();
@@ -1198,7 +1198,7 @@ export default class WebformBuilder extends Component {
                 this.highlightInvalidComponents();
             });
         });
-        const saveButtons = this.componentEdit.querySelectorAll('[ref="saveButton"]');
+        const saveButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="saveButton"]`);
         saveButtons.forEach((saveButton) => {
             this.editForm.addEventListener(saveButton, 'click', (event) => {
                 event.preventDefault();
@@ -1214,7 +1214,7 @@ export default class WebformBuilder extends Component {
                 this.saveComponent(component, parent, isNew, original);
             });
         });
-        const previewButtons = this.componentEdit.querySelectorAll('[ref="previewButton"]');
+        const previewButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="previewButton"]`);
         previewButtons.forEach((previewButton) => {
             this.editForm.addEventListener(previewButton, 'click', (event) => {
                 event.preventDefault();
@@ -1227,7 +1227,7 @@ export default class WebformBuilder extends Component {
                     showPreview: this.showPreview,
                     helplinks: this.helplinks,
                 }));
-                this.editForm.attach(this.componentEdit.querySelector('[ref="editForm"]'));
+                this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });
@@ -1326,7 +1326,7 @@ export default class WebformBuilder extends Component {
         }));
         this.dialog = this.createModal(this.componentEdit, _.get(this.options, 'dialogAttr', {}));
         // This is the attach step.
-        this.editForm.attach(this.componentEdit.querySelector('[ref="editForm"]'));
+        this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
         this.hook('editFormWrapper');
         this.updateComponent(componentCopy);
         this.editForm.on('change', (event) => {

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

@@ -326,6 +326,10 @@ export default class Component extends Element {
         this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;
         this._visible = this._parentVisible && this.conditionallyVisible(null, data);
         this._parentDisabled = false;
+        /**
+         * The reference attribute name for this component
+         */
+        this._referenceAttributeName = 'ref';
         /**
          * Used to trigger a new change in this component.
          * @type {function} - Call to trigger a change in this component.
@@ -778,21 +782,22 @@ export default class Component extends Element {
         const name = names[names.length - 1];
         const templatesByName = Templates.defaultTemplates[name];
         if (!templatesByName) {
-            return `Unknown template: ${name}`;
+            return { template: `Unknown template: ${name}` };
         }
         const templateByMode = this.checkTemplateMode(templatesByName, modes);
         if (templateByMode) {
-            return templateByMode;
+            return { template: templateByMode };
         }
-        return templatesByName.form;
+        return { template: templatesByName.form };
     }
     checkTemplate(templates, names, modes) {
         for (const name of names) {
             const templatesByName = templates[name];
             if (templatesByName) {
+                const { referenceAttributeName } = templatesByName;
                 const templateByMode = this.checkTemplateMode(templatesByName, modes);
                 if (templateByMode) {
-                    return templateByMode;
+                    return { template: templateByMode, referenceAttributeName };
                 }
             }
         }
@@ -849,7 +854,11 @@ export default class Component extends Element {
             `${name}`,
         ];
         // Allow template alters.
-        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(this.getTemplate(names, mode), data), data, mode);
+        const { referenceAttributeName, template } = this.getTemplate(names, mode);
+        if (referenceAttributeName) {
+            this._referenceAttributeName = referenceAttributeName;
+        }
+        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);
     }
     /**
      * Sanitize an html string.
@@ -963,11 +972,19 @@ export default class Component extends Element {
         // Return current timezone if none are provided.
         return currentTimezone();
     }
-    loadRefs(element, refs) {
+    /**
+     *
+     * @param {HTMLElement} element - The containing DOM element to query for the ref value.
+     * @param {object} refs - The references to load.
+     * @param {string} [referenceAttributeName] - The attribute name to use for the reference.
+     */
+    loadRefs(element, refs, referenceAttributeName) {
         for (const ref in refs) {
             const refType = refs[ref];
             const isString = typeof refType === 'string';
-            const selector = isString && refType.includes('scope') ? `:scope > [ref="${ref}"]` : `[ref="${ref}"]`;
+            const selector = isString && refType.includes('scope')
+                ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}="${ref}"]`
+                : `[${referenceAttributeName || this._referenceAttributeName || 'ref'}="${ref}"]`;
             if (isString && refType.startsWith('single')) {
                 this.refs[ref] = element.querySelector(selector);
             }
@@ -1042,7 +1059,7 @@ export default class Component extends Element {
         });
     }
     createComponentModal(element, modalShouldBeOpened, currentValue) {
-        return new ComponentModal(this, element, modalShouldBeOpened, currentValue);
+        return new ComponentModal(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
     }
     attach(element) {
         if (!this.builderMode && !this.previewMode && this.component.modalEdit) {

package/lib/mjs/components/_classes/componentModal/ComponentModal.js

@@ -8,7 +8,8 @@ export default class ComponentModal {
             children,
         });
     }
-    constructor(component, element, isOpened, currentValue) {
+    constructor(component, element, isOpened, currentValue, referenceAttributeName = 'ref') {
+        this._referenceAttributeName = referenceAttributeName;
         this.isOpened = isOpened;
         this.component = component;
         this.element = element;
@@ -142,10 +143,10 @@ export default class ComponentModal {
     showDialog() {
         this.dialogElement = this.component.ce('div');
         const dialogContent = `
-      <h3 ref="dialogHeader">${this.component.t('Do you want to clear changes?')}</h3>
+      <h3 ${this._referenceAttributeName}="dialogHeader">${this.component.t('Do you want to clear changes?')}</h3>
       <div style="display:flex; justify-content: flex-end;">
-        <button ref="dialogCancelButton" class="btn btn-secondary">${this.component.t('Cancel')}</button>
-        <button ref="dialogYesButton" class="btn btn-danger">${this.component.t('Yes, delete it')}</button>
+        <button ${this._referenceAttributeName}="dialogCancelButton" class="btn btn-secondary">${this.component.t('Cancel')}</button>
+        <button ${this._referenceAttributeName}="dialogYesButton" class="btn btn-danger">${this.component.t('Yes, delete it')}</button>
       </div>
     `;
         this.dialogElement.innerHTML = dialogContent;

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

@@ -101,7 +101,7 @@ export default class Input extends Multivalue {
             }).trim();
             if (this.component.prefix !== calendarIcon) {
                 // converting string to HTML markup to render correctly DateTime component in portal.form.io
-                return convertStringToHTMLElement(calendarIcon, '[ref="icon"]');
+                return convertStringToHTMLElement(calendarIcon, `[${this._referenceAttributeName}="icon"]`);
             }
         }
         return this.component.suffix;

package/lib/mjs/components/_classes/multivalue/Multivalue.js

@@ -32,7 +32,7 @@ export default class Multivalue extends Field {
     render() {
         // If single value field.
         if (!this.useWrapper()) {
-            return super.render(`<div ref="element">
+            return super.render(`<div ${this._referenceAttributeName}="element">
           ${this.renderElement(this.component.type !== 'hidden' ? this.dataValue : '')}
         </div>`);
         }