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

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

@@ -0,0 +1,3 @@
+export default function _default(...extend: any[]): {
+    components: any;
+};

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

@@ -354,6 +354,10 @@ class Component extends Element_1.default {
         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.
@@ -809,21 +813,22 @@ class Component extends Element_1.default {
         const name = names[names.length - 1];
         const templatesByName = Templates_1.default.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 };
                 }
             }
         }
@@ -880,7 +885,11 @@ class Component extends Element_1.default {
             `${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.
@@ -996,11 +1005,19 @@ class Component extends Element_1.default {
         // Return current timezone if none are provided.
         return (0, utils_1.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);
             }
@@ -1076,7 +1093,7 @@ class Component extends Element_1.default {
         });
     }
     createComponentModal(element, modalShouldBeOpened, currentValue) {
-        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue);
+        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);
     }
     attach(element) {
         if (!this.builderMode && !this.previewMode && this.component.modalEdit) {