@icure/form 2.0.10 → 2.1.0

package/components/icure-form/renderer/form/form.js

@@ -17,7 +17,7 @@ const utils_1 = require("../../../common/utils");
 const code_utils_1 = require("../../../../utils/code-utils");
 require("./form-selection-button");
 const dates_1 = require("../../../../utils/dates");
-const render = (form, props, formsValueContainer, translationProvider, ownersProvider = () => __awaiter(void 0, void 0, void 0, function* () { return []; }), optionsProvider, actionListener = () => undefined, languages, readonly, displayMetadata) => {
+const render = (form_1, props_1, formsValueContainer_1, translationProvider_1, ...args_1) => __awaiter(void 0, [form_1, props_1, formsValueContainer_1, translationProvider_1, ...args_1], void 0, function* (form, props, formsValueContainer, translationProvider, ownersProvider = () => __awaiter(void 0, void 0, void 0, function* () { return []; }), optionsProvider, actionListener = () => undefined, languages, readonly, displayMetadata, sectionWrapper) {
     const composedOptionsProvider = optionsProvider && form.codifications
         ? (language, codifications, terms, sortOptions) => __awaiter(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
@@ -46,55 +46,63 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
                             : (0, lit_1.html) `<h6 class="${className}">${content}</h6>`;
     };
     function renderGroup(fg, fgSpan, level) {
-        var _a;
-        const subElements = ((_a = fg.fields) !== null && _a !== void 0 ? _a : []).map((fieldOrGroup) => renderFieldGroupOrSubform(fieldOrGroup, level + 1)).filter((x) => !!x && x !== lit_1.nothing);
-        return subElements.length
-            ? (0, lit_1.html) `<div class="${['group', fg.borderless ? undefined : 'bordered'].filter((x) => !!x).join(' ')}" style="${calculateFieldOrGroupSize(fgSpan, 1)}">
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const subElements = (yield Promise.all(((_a = fg.fields) !== null && _a !== void 0 ? _a : []).map((fieldOrGroup) => renderFieldGroupOrSubform(fieldOrGroup, level + 1)))).filter((x) => !!x && x !== lit_1.nothing);
+            return subElements.length
+                ? (0, lit_1.html) `<div class="${['group', fg.borderless ? undefined : 'bordered'].filter((x) => !!x).join(' ')}" style="${calculateFieldOrGroupSize(fgSpan, 1)}">
 					${fg.borderless ? lit_1.nothing : (0, lit_1.html) `<div>${h(level, '', (0, lit_1.html) `${fg.group}`)}</div>`}
 					<div class="icure-form">${subElements}</div>
 			  </div>`
-            : lit_1.nothing;
+                : lit_1.nothing;
+        });
     }
     function renderSubform(fg, fgSpan, level) {
-        var _a, _b, _c;
-        const children = (_a = formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.getChildren()) === null || _a === void 0 ? void 0 : _a.filter((c) => c.getLabel() === fg.id);
-        const tp = translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations));
-        return (0, lit_1.html) `<div class="subform" style="${calculateFieldOrGroupSize(fgSpan, 1)}">
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const children = (_a = (yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.getChildren()))) === null || _a === void 0 ? void 0 : _a.filter((c) => c.getLabel() === fg.id);
+            const tp = translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations));
+            return (0, lit_1.html) `<div class="subform" style="${calculateFieldOrGroupSize(fgSpan, 1)}">
 			<div class="subform__heading">
 				${h(level, 'subform__heading__title', (0, lit_1.html) `${(_b = (props.language && fg.shortLabel ? tp === null || tp === void 0 ? void 0 : tp(props.language, fg.shortLabel) : fg.shortLabel)) !== null && _b !== void 0 ? _b : ''}`)}
 				${readonly
-            ? lit_1.nothing
-            : (0, lit_1.html) `<form-selection-button
+                ? lit_1.nothing
+                : (0, lit_1.html) `<form-selection-button
 							.label="${(_c = fg.labels.add) !== null && _c !== void 0 ? _c : 'Add subform'}"
 							.forms="${Object.entries(fg.forms)}"
 							.formAdded="${(title, form) => {
-                var _a;
-                form.id && (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.addChild(fg.id, form.id, (_a = fg.shortLabel) !== null && _a !== void 0 ? _a : ''));
-            }}"
+                    var _a;
+                    form.id && (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.addChild(fg.id, form.id, (_a = fg.shortLabel) !== null && _a !== void 0 ? _a : ''));
+                }}"
 							.translationProvider="${tp}"
 							.language="${props.language}"
 					  ></form-selection-button>`}
 			</div>
-			${children === null || children === void 0 ? void 0 : children.map((child) => {
-            var _a, _b, _c;
-            const childForm = Object.values(fg.forms).find((f) => f.id === child.getFormId());
-            const title = (_a = childForm === null || childForm === void 0 ? void 0 : childForm.form) !== null && _a !== void 0 ? _a : childForm === null || childForm === void 0 ? void 0 : childForm.description;
-            const localisedTitle = (_b = (title && tp && props.language ? tp === null || tp === void 0 ? void 0 : tp(props.language, title) : title)) !== null && _b !== void 0 ? _b : '';
-            const localisedRemove = (_c = (fg.labels.remove && tp && props.language ? tp === null || tp === void 0 ? void 0 : tp(props.language, fg.labels.remove) : fg.labels.remove)) !== null && _c !== void 0 ? _c : 'Remove';
-            return (childForm &&
-                (0, lit_1.html) `
-							<div class="subform__child">
-								<h3 class="subform__child__title">${localisedTitle}</h3>
-								${(0, exports.render)(childForm, props, child, translationProvider, ownersProvider, optionsProvider, actionListener, languages, readonly, displayMetadata)}
-								${readonly ? lit_1.nothing : (0, lit_1.html) `<button class="subform__removeBtn" @click="${() => { var _a; return (_a = formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.removeChild) === null || _a === void 0 ? void 0 : _a.call(formsValueContainer, child); }}">${localisedRemove}</button>`}
-							</div>
-						`);
-        }).filter((x) => !!x)}
+			${yield (children === null || children === void 0 ? void 0 : children.reduce((templatesPromise, child) => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b, _c;
+                const templates = yield templatesPromise;
+                const childForm = Object.values(fg.forms).find((f) => f.id === child.getFormId());
+                const title = (_a = childForm === null || childForm === void 0 ? void 0 : childForm.form) !== null && _a !== void 0 ? _a : childForm === null || childForm === void 0 ? void 0 : childForm.description;
+                const localisedTitle = (_b = (title && tp && props.language ? tp === null || tp === void 0 ? void 0 : tp(props.language, title) : title)) !== null && _b !== void 0 ? _b : '';
+                const localisedRemove = (_c = (fg.labels.remove && tp && props.language ? tp === null || tp === void 0 ? void 0 : tp(props.language, fg.labels.remove) : fg.labels.remove)) !== null && _c !== void 0 ? _c : 'Remove';
+                if (childForm) {
+                    templates.push((0, lit_1.html) `
+						<div class="subform__child">
+							<h3 class="subform__child__title">${localisedTitle}</h3>
+							${yield (0, exports.render)(childForm, props, child, translationProvider, ownersProvider, optionsProvider, actionListener, languages, readonly, displayMetadata)}
+							${readonly ? lit_1.nothing : (0, lit_1.html) ` <button class="subform__removeBtn" @click="${() => { var _a; return (_a = formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.removeChild) === null || _a === void 0 ? void 0 : _a.call(formsValueContainer, child); }}">${localisedRemove}</button>`}
+						</div>
+					`);
+                }
+                return templates;
+            }), Promise.resolve([])))}
 		</div>`;
+        });
     }
     function renderTextField(fgSpan, fgRowSpan, fg) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (0, lit_1.html) `<icure-form-text-field
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            return (0, lit_1.html) `<icure-form-text-field
 			class="icure-form-field"
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan, (_a = fg.styleOptions) === null || _a === void 0 ? void 0 : _a.width)}"
 			label="${fg.field}"
@@ -109,21 +117,24 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
 			.suggestionProvider=${(_c = fg.options) === null || _c === void 0 ? void 0 : _c.suggestionProvider}
 			.ownersProvider=${ownersProvider}
 			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.codeColorProvider=${(_d = fg.options) === null || _d === void 0 ? void 0 : _d.codeColorProvider}
 			.linkColorProvider=${(_e = fg.options) === null || _e === void 0 ? void 0 : _e.linkColorProvider}
 			.codeContentProvider=${(_f = fg.options) === null || _f === void 0 ? void 0 : _f.codeContentProvider}
+			.defaultValueProvider=${() => formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.getDefaultValue(fg.field)}
 			.valueProvider="${formsValueContainer && (0, fields_values_provider_1.fieldValuesProvider)(formsValueContainer, fg)}"
 			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
 			.handleValueChanged=${(0, fields_values_provider_1.handleValueChangedProvider)(formsValueContainer, fg, props.defaultOwner)}
 			.handleMetadataChanged=${(0, fields_values_provider_1.handleMetadataChangedProvider)(formsValueContainer)}
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_g = fg.computedProperties) === null || _g === void 0 ? void 0 : _g.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_h = fg.computedProperties) === null || _h === void 0 ? void 0 : _h.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_g = fg.computedProperties) === null || _g === void 0 ? void 0 : _g.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_h = fg.computedProperties) === null || _h === void 0 ? void 0 : _h.readonly))) : false)}"
 		></icure-form-text-field>`;
+        });
     }
     function renderTokenField(fgSpan, fgRowSpan, fg) {
-        var _a, _b, _c, _d;
-        return (0, lit_1.html) `<icure-form-token-field
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            return (0, lit_1.html) `<icure-form-token-field
 			class="icure-form-field"
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan, (_a = fg.styleOptions) === null || _a === void 0 ? void 0 : _a.width)}"
 			label="${fg.field}"
@@ -136,18 +147,20 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
 			.suggestionProvider=${(_b = fg.options) === null || _b === void 0 ? void 0 : _b.suggestionProvider}
 			.ownersProvider=${ownersProvider}
 			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.valueProvider="${formsValueContainer && (0, fields_values_provider_1.fieldValuesProvider)(formsValueContainer, fg)}"
 			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
 			.handleValueChanged=${(0, fields_values_provider_1.handleValueChangedProvider)(formsValueContainer, fg, props.defaultOwner)}
 			.handleMetadataChanged=${(0, fields_values_provider_1.handleMetadataChangedProvider)(formsValueContainer)}
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_d = fg.computedProperties) === null || _d === void 0 ? void 0 : _d.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_d = fg.computedProperties) === null || _d === void 0 ? void 0 : _d.readonly))) : false)}"
 		></icure-form-token-field>`;
+        });
     }
     function renderItemsListField(fgSpan, fgRowSpan, fg) {
-        var _a, _b, _c, _d;
-        return (0, lit_1.html) `<icure-form-items-list-field
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            return (0, lit_1.html) `<icure-form-items-list-field
 			class="icure-form-field"
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan, (_a = fg.styleOptions) === null || _a === void 0 ? void 0 : _a.width)}"
 			label="${fg.field}"
@@ -160,18 +173,20 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
 			.suggestionProvider=${(_b = fg.options) === null || _b === void 0 ? void 0 : _b.suggestionProvider}
 			.ownersProvider=${ownersProvider}
 			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.valueProvider="${formsValueContainer && (0, fields_values_provider_1.fieldValuesProvider)(formsValueContainer, fg)}"
 			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
 			.handleValueChanged=${(0, fields_values_provider_1.handleValueChangedProvider)(formsValueContainer, fg, props.defaultOwner)}
 			.handleMetadataChanged=${(0, fields_values_provider_1.handleMetadataChangedProvider)(formsValueContainer)}
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_d = fg.computedProperties) === null || _d === void 0 ? void 0 : _d.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_d = fg.computedProperties) === null || _d === void 0 ? void 0 : _d.readonly))) : false)}"
 		></icure-form-items-list-field>`;
+        });
     }
     function renderMeasureField(fgSpan, fgRowSpan, fg) {
-        var _a, _b;
-        return (0, lit_1.html) `<icure-form-measure-field
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            return (0, lit_1.html) `<icure-form-measure-field
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
 			class="icure-form-field"
 			label="${fg.field}"
@@ -181,18 +196,20 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
 			unit="${fg.unit}"
 			.defaultLanguage="${props.language}"
 			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.valueProvider="${formsValueContainer && (0, fields_values_provider_1.fieldValuesProvider)(formsValueContainer, fg)}"
 			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
 			.handleValueChanged=${(0, fields_values_provider_1.handleValueChangedProvider)(formsValueContainer, fg, props.defaultOwner)}
 			.handleMetadataChanged=${(0, fields_values_provider_1.handleMetadataChangedProvider)(formsValueContainer)}
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly))) : false)}"
 		></icure-form-measure-field>`;
+        });
     }
     function renderNumberField(fgSpan, fgRowSpan, fg) {
-        var _a, _b;
-        return (0, lit_1.html) `<icure-form-number-field
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            return (0, lit_1.html) `<icure-form-number-field
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
 			class="icure-form-field"
 			label="${fg.field}"
@@ -201,18 +218,20 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
 			value="${fg.value}"
 			.defaultLanguage="${props.language}"
 			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.valueProvider="${formsValueContainer && (0, fields_values_provider_1.fieldValuesProvider)(formsValueContainer, fg)}"
 			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
 			.handleValueChanged=${(0, fields_values_provider_1.handleValueChangedProvider)(formsValueContainer, fg, props.defaultOwner)}
 			.handleMetadataChanged=${(0, fields_values_provider_1.handleMetadataChangedProvider)(formsValueContainer)}
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly))) : false)}"
 		></icure-form-number-field>`;
+        });
     }
     function renderDatePicker(fgSpan, fgRowSpan, fg) {
-        var _a, _b;
-        return (0, lit_1.html) `<icure-form-date-picker
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            return (0, lit_1.html) `<icure-form-date-picker
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
 			class="icure-form-field"
 			label="${fg.field}"
@@ -221,18 +240,20 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
 			value="${fg.now ? (0, dates_1.currentDate)() : fg.value}"
 			.defaultLanguage="${props.language}"
 			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.valueProvider="${formsValueContainer && (0, fields_values_provider_1.fieldValuesProvider)(formsValueContainer, fg)}"
 			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
 			.handleValueChanged=${(0, fields_values_provider_1.handleValueChangedProvider)(formsValueContainer, fg, props.defaultOwner)}
 			.handleMetadataChanged=${(0, fields_values_provider_1.handleMetadataChangedProvider)(formsValueContainer)}
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly))) : false)}"
 		></icure-form-date-picker>`;
+        });
     }
     function renderTimePicker(fgSpan, fgRowSpan, fg) {
-        var _a, _b;
-        return (0, lit_1.html) `<icure-form-time-picker
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            return (0, lit_1.html) `<icure-form-time-picker
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
 			class="icure-form-field"
 			label="${fg.field}"
@@ -241,18 +262,20 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
 			value="${fg.now ? (0, dates_1.currentTime)() : fg.value}"
 			.defaultLanguage="${props.language}"
 			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.valueProvider="${formsValueContainer && (0, fields_values_provider_1.fieldValuesProvider)(formsValueContainer, fg)}"
 			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
 			.handleValueChanged=${(0, fields_values_provider_1.handleValueChangedProvider)(formsValueContainer, fg, props.defaultOwner)}
 			.handleMetadataChanged=${(0, fields_values_provider_1.handleMetadataChangedProvider)(formsValueContainer)}
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly))) : false)}"
 		></icure-form-time-picker>`;
+        });
     }
     function renderDateTimePicker(fgSpan, fgRowSpan, fg) {
-        var _a, _b;
-        return (0, lit_1.html) `<icure-form-date-time-picker
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            return (0, lit_1.html) `<icure-form-date-time-picker
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
 			class="icure-form-field"
 			label="${fg.field}"
@@ -261,18 +284,20 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
 			value="${fg.now ? (0, dates_1.currentDateTime)() : fg.value}"
 			.defaultLanguage="${props.language}"
 			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.valueProvider="${formsValueContainer && (0, fields_values_provider_1.fieldValuesProvider)(formsValueContainer, fg)}"
 			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
 			.handleValueChanged=${(0, fields_values_provider_1.handleValueChangedProvider)(formsValueContainer, fg, props.defaultOwner)}
 			.handleMetadataChanged=${(0, fields_values_provider_1.handleMetadataChangedProvider)(formsValueContainer)}
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly))) : false)}"
 		></icure-form-date-time-picker>`;
+        });
     }
     function renderDropdownField(fgSpan, fgRowSpan, fg) {
-        var _a, _b, _c;
-        return (0, lit_1.html) `<icure-form-dropdown-field
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            return (0, lit_1.html) `<icure-form-dropdown-field
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
 			class="icure-form-field"
 			.label=${fg.field}
@@ -283,22 +308,24 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
 			value="${fg.value}"
 			.codifications="${fg.codifications}"
 			.optionsProvider="${composedOptionsProvider && ((_a = fg.codifications) === null || _a === void 0 ? void 0 : _a.length)
-            ? (language, terms) => { var _a; return composedOptionsProvider(language, (_a = fg.codifications) !== null && _a !== void 0 ? _a : [], terms, fg.sortOptions); }
-            : (language, terms) => (0, code_utils_1.filterAndSortOptionsFromFieldDefinition)(language, fg, translationProvider, terms)}"
+                ? (language, terms) => { var _a; return composedOptionsProvider(language, (_a = fg.codifications) !== null && _a !== void 0 ? _a : [], terms, fg.sortOptions); }
+                : (language, terms) => (0, code_utils_1.filterAndSortOptionsFromFieldDefinition)(language, fg, translationProvider, terms)}"
 			.ownersProvider=${ownersProvider}
 			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.valueProvider="${formsValueContainer && (0, fields_values_provider_1.fieldValuesProvider)(formsValueContainer, fg)}"
 			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
 			.handleValueChanged=${(0, fields_values_provider_1.handleValueChangedProvider)(formsValueContainer, fg, props.defaultOwner)}
 			.handleMetadataChanged=${(0, fields_values_provider_1.handleMetadataChangedProvider)(formsValueContainer)}
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.readonly))) : false)}"
 		></icure-form-dropdown-field>`;
+        });
     }
     function renderRadioButtons(fgSpan, fgRowSpan, fg) {
-        var _a, _b, _c;
-        return (0, lit_1.html) `<icure-form-radio-button
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            return (0, lit_1.html) `<icure-form-radio-button
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
 			class="icure-form-field"
 			.label="${fg.field}"
@@ -309,22 +336,24 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
 			.sortOptions="${fg.sortOptions}"
 			.codifications="${fg.codifications}"
 			.optionsProvider="${composedOptionsProvider && ((_a = fg.codifications) === null || _a === void 0 ? void 0 : _a.length)
-            ? (language, terms) => { var _a; return composedOptionsProvider(language, (_a = fg.codifications) !== null && _a !== void 0 ? _a : [], terms, fg.sortOptions); }
-            : (language, terms) => (0, code_utils_1.filterAndSortOptionsFromFieldDefinition)(language, fg, translationProvider, terms)}"
+                ? (language, terms) => { var _a; return composedOptionsProvider(language, (_a = fg.codifications) !== null && _a !== void 0 ? _a : [], terms, fg.sortOptions); }
+                : (language, terms) => (0, code_utils_1.filterAndSortOptionsFromFieldDefinition)(language, fg, translationProvider, terms)}"
 			.ownersProvider=${ownersProvider}
 			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.valueProvider="${formsValueContainer && (0, fields_values_provider_1.fieldValuesProvider)(formsValueContainer, fg)}"
 			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
 			.handleValueChanged=${(0, fields_values_provider_1.handleValueChangedProvider)(formsValueContainer, fg, props.defaultOwner)}
 			.handleMetadataChanged=${(0, fields_values_provider_1.handleMetadataChangedProvider)(formsValueContainer)}
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.readonly))) : false)}"
 		></icure-form-radio-button>`;
+        });
     }
     function renderCheckboxes(fgSpan, fgRowSpan, fg) {
-        var _a, _b, _c;
-        return (0, lit_1.html) ` <icure-form-checkbox
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            return (0, lit_1.html) ` <icure-form-checkbox
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
 			class="icure-form-field"
 			.label="${fg.field}"
@@ -336,106 +365,118 @@ const render = (form, props, formsValueContainer, translationProvider, ownersPro
 			value="${fg.value}"
 			.codifications="${fg.codifications}"
 			.optionsProvider="${composedOptionsProvider && ((_a = fg.codifications) === null || _a === void 0 ? void 0 : _a.length)
-            ? (language, terms) => { var _a; return composedOptionsProvider(language, (_a = fg.codifications) !== null && _a !== void 0 ? _a : [], terms, fg.sortOptions); }
-            : (language, terms) => (0, code_utils_1.filterAndSortOptionsFromFieldDefinition)(language, fg, translationProvider, terms)}"
+                ? (language, terms) => { var _a; return composedOptionsProvider(language, (_a = fg.codifications) !== null && _a !== void 0 ? _a : [], terms, fg.sortOptions); }
+                : (language, terms) => (0, code_utils_1.filterAndSortOptionsFromFieldDefinition)(language, fg, translationProvider, terms)}"
 			.ownersProvider="${ownersProvider}"
 			.translationProvider="${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}"
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.valueProvider="${formsValueContainer && (0, fields_values_provider_1.fieldValuesProvider)(formsValueContainer, fg)}"
 			.metadataProvider="${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}"
 			.handleValueChanged="${(0, fields_values_provider_1.handleValueChangedProvider)(formsValueContainer, fg, props.defaultOwner)}"
 			.handleMetadataChanged="${(0, fields_values_provider_1.handleMetadataChangedProvider)(formsValueContainer)}"
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.readonly))) : false)}"
 		></icure-form-checkbox>`;
+        });
     }
     function renderButton(fgSpan, fgRowSpan, fg) {
-        var _a, _b, _c, _d, _e;
-        return (0, lit_1.html) `<icure-form-button
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            return (0, lit_1.html) `<icure-form-button
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
 			class="icure-form-button"
 			label="${(_a = fg.shortLabel) !== null && _a !== void 0 ? _a : fg.field}"
 			.defaultLanguage="${props.language}"
 			.translationProvider="${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}"
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.actionListener="${actionListener}"
-			.event="${fg.event !== undefined ? fg.event : ((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.event) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.event)) : 'submit'}"
-			.payload="${fg.payload !== undefined ? fg.payload : ((_d = fg.computedProperties) === null || _d === void 0 ? void 0 : _d.payload) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_e = fg.computedProperties) === null || _e === void 0 ? void 0 : _e.payload)) : undefined}"
+			.event="${fg.event !== undefined ? fg.event : ((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.event) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.event))) : 'submit'}"
+			.payload="${fg.payload !== undefined ? fg.payload : ((_d = fg.computedProperties) === null || _d === void 0 ? void 0 : _d.payload) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_e = fg.computedProperties) === null || _e === void 0 ? void 0 : _e.payload))) : undefined}"
 			.styleOptions="${fg.styleOptions}"
 		></icure-form-button>`;
+        });
     }
     function renderLabel(fgSpan, fgRowSpan, fg) {
-        var _a, _b;
-        return (0, lit_1.html) `<icure-form-label
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            return (0, lit_1.html) `<icure-form-label
 			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
 			class="icure-form-field"
 			.defaultLanguage="${props.language}"
 			labelPosition=${props.labelPosition}
-			label="${fg.field}"
+			label="${(_a = fg.shortLabel) !== null && _a !== void 0 ? _a : fg.field}"
 			.translationProvider="${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && (0, languages_1.defaultTranslationProvider)(form.translations))}"
-			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationError)(formsValueContainer, fg)}"
+			.validationErrorsProvider="${(0, fields_values_provider_1.getValidationErrorProvider)(formsValueContainer, fg)}"
 			.styleOptions="${fg.styleOptions}"
-			.readonly="${readonly || fg.readonly || (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) ? !(formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly)) : false)}"
+			.readonly="${readonly || fg.readonly || (((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.readonly) ? !(yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_c = fg.computedProperties) === null || _c === void 0 ? void 0 : _c.readonly))) : false)}"
 		></icure-form-label>`;
+        });
     }
     const renderFieldGroupOrSubform = function (fg, level) {
-        var _a, _b, _c, _d, _e, _f;
-        if (!fg) {
-            return lit_1.nothing;
-        }
-        const computedProperties = Object.keys((_a = fg.computedProperties) !== null && _a !== void 0 ? _a : {}).reduce((acc, k) => { var _a; return (Object.assign(Object.assign({}, acc), { [k]: ((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a[k]) && (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute(fg.computedProperties[k])) })); }, {});
-        if (computedProperties['hidden']) {
-            return lit_1.nothing;
-        }
-        const fgSpan = ((_c = (_b = computedProperties['span']) !== null && _b !== void 0 ? _b : fg.span) !== null && _c !== void 0 ? _c : 6);
-        const fgRowSpan = ((_e = (_d = computedProperties['rowSpan']) !== null && _d !== void 0 ? _d : fg.rowSpan) !== null && _e !== void 0 ? _e : 1);
-        if (fg.clazz === 'group' && ((_f = fg.fields) === null || _f === void 0 ? void 0 : _f.length)) {
-            return renderGroup(fg.copy(Object.assign({}, computedProperties)), fgSpan, level);
-        }
-        else if (fg.clazz === 'subform' && (fg.id || computedProperties['title'])) {
-            return renderSubform(fg.copy(Object.assign({}, computedProperties)), fgSpan, level);
-        }
-        else if (fg.clazz === 'field') {
-            const field = fg.copy(Object.assign({}, computedProperties));
-            return (0, lit_1.html) `${fg.type === 'text-field'
-                ? renderTextField(fgSpan, fgRowSpan, field)
-                : fg.type === 'measure-field'
-                    ? renderMeasureField(fgSpan, fgRowSpan, field)
-                    : fg.type === 'token-field'
-                        ? renderTokenField(fgSpan, fgRowSpan, field)
-                        : fg.type === 'items-list-field'
-                            ? renderItemsListField(fgSpan, fgRowSpan, field)
-                            : fg.type === 'number-field'
-                                ? renderNumberField(fgSpan, fgRowSpan, field)
-                                : fg.type === 'date-picker'
-                                    ? renderDatePicker(fgSpan, fgRowSpan, field)
-                                    : fg.type === 'time-picker'
-                                        ? renderTimePicker(fgSpan, fgRowSpan, field)
-                                        : fg.type === 'date-time-picker'
-                                            ? renderDateTimePicker(fgSpan, fgRowSpan, field)
-                                            : fg.type === 'dropdown-field'
-                                                ? renderDropdownField(fgSpan, fgRowSpan, field)
-                                                : fg.type === 'radio-button'
-                                                    ? renderRadioButtons(fgSpan, fgRowSpan, field)
-                                                    : fg.type === 'checkbox'
-                                                        ? renderCheckboxes(fgSpan, fgRowSpan, field)
-                                                        : fg.type === 'label'
-                                                            ? renderLabel(fgSpan, fgRowSpan, field)
-                                                            : fg.type === 'action'
-                                                                ? renderButton(fgSpan, fgRowSpan, field)
-                                                                : ''}`;
-        }
-        return (0, lit_1.html) ``;
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f;
+            if (!fg) {
+                return lit_1.nothing;
+            }
+            const computedProperties = (yield Object.keys((_a = fg.computedProperties) !== null && _a !== void 0 ? _a : {})
+                .filter((k) => k !== 'value' && k !== 'defaultValue')
+                .reduce((acc, k) => __awaiter(this, void 0, void 0, function* () { var _a; return (Object.assign(Object.assign({}, (yield acc)), { [k]: ((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a[k]) && (yield (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute(fg.computedProperties[k]))) })); }), Promise.resolve({})));
+            if (computedProperties['hidden']) {
+                return lit_1.nothing;
+            }
+            const fgSpan = ((_c = (_b = computedProperties['span']) !== null && _b !== void 0 ? _b : fg.span) !== null && _c !== void 0 ? _c : 6);
+            const fgRowSpan = ((_e = (_d = computedProperties['rowSpan']) !== null && _d !== void 0 ? _d : fg.rowSpan) !== null && _e !== void 0 ? _e : 1);
+            if (fg.clazz === 'group' && ((_f = fg.fields) === null || _f === void 0 ? void 0 : _f.length)) {
+                return yield renderGroup(fg.copy(Object.assign({}, computedProperties)), fgSpan, level);
+            }
+            else if (fg.clazz === 'subform' && (fg.id || computedProperties['title'])) {
+                return yield renderSubform(fg.copy(Object.assign({}, computedProperties)), fgSpan, level);
+            }
+            else if (fg.clazz === 'field') {
+                const field = fg.copy(Object.assign({}, computedProperties));
+                return (0, lit_1.html) `${fg.type === 'text-field'
+                    ? yield renderTextField(fgSpan, fgRowSpan, field)
+                    : fg.type === 'measure-field'
+                        ? yield renderMeasureField(fgSpan, fgRowSpan, field)
+                        : fg.type === 'token-field'
+                            ? yield renderTokenField(fgSpan, fgRowSpan, field)
+                            : fg.type === 'items-list-field'
+                                ? yield renderItemsListField(fgSpan, fgRowSpan, field)
+                                : fg.type === 'number-field'
+                                    ? yield renderNumberField(fgSpan, fgRowSpan, field)
+                                    : fg.type === 'date-picker'
+                                        ? yield renderDatePicker(fgSpan, fgRowSpan, field)
+                                        : fg.type === 'time-picker'
+                                            ? yield renderTimePicker(fgSpan, fgRowSpan, field)
+                                            : fg.type === 'date-time-picker'
+                                                ? yield renderDateTimePicker(fgSpan, fgRowSpan, field)
+                                                : fg.type === 'dropdown-field'
+                                                    ? yield renderDropdownField(fgSpan, fgRowSpan, field)
+                                                    : fg.type === 'radio-button'
+                                                        ? yield renderRadioButtons(fgSpan, fgRowSpan, field)
+                                                        : fg.type === 'checkbox'
+                                                            ? yield renderCheckboxes(fgSpan, fgRowSpan, field)
+                                                            : fg.type === 'label'
+                                                                ? yield renderLabel(fgSpan, fgRowSpan, field)
+                                                                : fg.type === 'action'
+                                                                    ? yield renderButton(fgSpan, fgRowSpan, field)
+                                                                    : ''}`;
+            }
+            return (0, lit_1.html) ``;
+        });
     };
     const calculateFieldOrGroupSize = (span, rowSpan, fixedWidth) => {
         if (fixedWidth)
             return `width: ${fixedWidth}px`;
         return `grid-column: span ${span}; ${rowSpan > 1 ? `grid-row: span ${rowSpan}` : ''}`;
     };
-    const renderForm = (form) => {
-        return form.sections.map((s) => (0, lit_1.html) `<div class="icure-form">${s.fields.map((fieldOrGroup) => renderFieldGroupOrSubform(fieldOrGroup, 3))}</div>`);
-    };
-    return (0, lit_1.html) ` ${renderForm(form)} `;
-};
+    const renderForm = (form, sectionWrapper) => __awaiter(void 0, void 0, void 0, function* () {
+        return yield Promise.all(form.sections.map((s, idx) => __awaiter(void 0, void 0, void 0, function* () {
+            const section = yield Promise.all(s.fields.map((fieldOrGroup) => renderFieldGroupOrSubform(fieldOrGroup, 3)));
+            return sectionWrapper(idx, () => (0, lit_1.html) ` <div class="icure-form">${section}</div>`);
+        })));
+    });
+    return (0, lit_1.html) `${yield renderForm(form, sectionWrapper !== null && sectionWrapper !== void 0 ? sectionWrapper : ((idx, section) => section()))}`;
+});
 exports.render = render;
 //# sourceMappingURL=form.js.map