@icure/form 3.0.37 → 3.0.39

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

@@ -7,6 +7,31 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __await = (this && this.__await) || function (v) { return this instanceof __await ? (this.v = v, this) : new __await(v); }
+var __asyncGenerator = (this && this.__asyncGenerator) || function (thisArg, _arguments, generator) {
+    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+    var g = generator.apply(thisArg, _arguments || []), i, q = [];
+    return i = Object.create((typeof AsyncIterator === "function" ? AsyncIterator : Object).prototype), verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
+    function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
+    function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }
+    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
+    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+    function fulfill(value) { resume("next", value); }
+    function reject(value) { resume("throw", value); }
+    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
+};
+var __asyncValues = (this && this.__asyncValues) || function (o) {
+    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+    var m = o[Symbol.asyncIterator], i;
+    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+};
+var __asyncDelegator = (this && this.__asyncDelegator) || function (o) {
+    var i, p;
+    return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
+};
 import { html, nothing } from 'lit';
 import { fieldValuesProvider, getValidationErrorProvider, handleMetadataChangedProvider, handleValueChangedProvider } from '../../../../utils/fields-values-provider';
 import { defaultTranslationProvider } from '../../../../utils/languages';
@@ -14,465 +39,604 @@ import { getLabels } from '../../../common/utils';
 import { filterAndSortOptionsFromFieldDefinition, sortSuggestions } from '../../../../utils/code-utils';
 import './form-selection-button';
 import { currentDate, currentDateTime, currentTime } from '../../../../utils/dates';
-export 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;
-            const originalOptions = optionsProvider ? yield optionsProvider(language, codifications, terms) : [];
-            return sortSuggestions(originalOptions.concat((_c = (_b = (_a = form.codifications) === null || _a === void 0 ? void 0 : _a.filter((c) => codifications.includes(c.type))) === null || _b === void 0 ? void 0 : _b.flatMap((c) => c.codes
-                .filter((c) => (terms !== null && terms !== void 0 ? terms : []).map((st) => st.toLowerCase()).every((st) => c.label[language].toLowerCase().includes(st)))
-                .map((c) => ({ id: c.id, label: c.label, text: c.label[language], terms: terms !== null && terms !== void 0 ? terms : [] })))) !== null && _c !== void 0 ? _c : []), language, sortOptions);
-        })
-        : optionsProvider
-            ? (language, codifications, terms, sortOptions) => {
-                var _a;
-                return (_a = optionsProvider === null || optionsProvider === void 0 ? void 0 : optionsProvider(language, codifications, terms).then((codes) => sortSuggestions(codes, language, sortOptions))) !== null && _a !== void 0 ? _a : Promise.resolve([]);
-            }
-            : undefined;
-    const h = function (level, className = '', content) {
-        return level === 1
-            ? html `<h1 class="${className}">${content}</h1>`
-            : level === 2
-                ? html `<h2 class="${className}">${content}</h2>`
-                : level === 3
-                    ? html `<h3 class="${className}">${content}</h3>`
-                    : level === 4
-                        ? html `<h4 class="${className}">${content}</h4>`
-                        : level === 5
-                            ? html `<h5 class="${className}">${content}</h5>`
-                            : html `<h6 class="${className}">${content}</h6>`;
-    };
-    function renderGroup(fg, fgSpan, level) {
-        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 !== nothing);
-            return subElements.length
-                ? html `<div class="${['group', fg.borderless ? undefined : 'bordered'].filter((x) => !!x).join(' ')}" style="${calculateFieldOrGroupSize(fgSpan, 1)}">
-					${fg.borderless ? nothing : html `<div>${h(level, '', html `${fg.group}`)}</div>`}
-					<div class="icure-form">${subElements}</div>
-			  </div>`
-                : nothing;
-        });
-    }
-    function renderSubform(fg, fgSpan, level) {
-        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 && defaultTranslationProvider(form.translations));
-            return html `<div class="subform" style="${calculateFieldOrGroupSize(fgSpan, 1)}">
-			<div class="subform__heading">
-				${h(level, 'subform__heading__title', 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
-                ? nothing
-                : 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 : ''));
-                }}"
-							.translationProvider="${tp}"
-							.language="${props.language}"
-					  ></form-selection-button>`}
-			</div>
-			${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(html `
-						<div class="subform__child">
-							<h3 class="subform__child__title">${localisedTitle}</h3>
-							${yield render(childForm, props, child, translationProvider, ownersProvider, optionsProvider, actionListener, languages, readonly, displayMetadata)}
-							${readonly ? nothing : 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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            return 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}"
-			value="${fg.value}"
-			.displayedLabels="${getLabels(fg)}"
-			.displayMetadata="${displayMetadata}"
-			.multiline="${fg.multiline || false}"
-			.lines=${fgRowSpan}
-			.defaultLanguage="${props.language}"
-			.languages="${languages}"
-			.linksProvider=${(_b = fg.options) === null || _b === void 0 ? void 0 : _b.linksProvider}
-			.suggestionProvider=${(_c = fg.options) === null || _c === void 0 ? void 0 : _c.suggestionProvider}
-			.ownersProvider=${ownersProvider}
-			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
-			.validationErrorsProvider="${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 && fieldValuesProvider(formsValueContainer, fg)}"
-			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
-			.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
-			.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d;
-            return 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}"
-			value="${fg.value}"
-			.displayedLabels="${getLabels(fg)}"
-			.displayMetadata="${displayMetadata}"
-			.multiline="${fg.multiline || false}"
-			.lines=${fgRowSpan}
-			.defaultLanguage="${props.language}"
-			.suggestionProvider=${(_b = fg.options) === null || _b === void 0 ? void 0 : _b.suggestionProvider}
-			.ownersProvider=${ownersProvider}
-			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
-			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
-			.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
-			.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d;
-            return 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}"
-			value="${fg.value}"
-			.displayedLabels="${getLabels(fg)}"
-			.displayMetadata="${displayMetadata}"
-			.multiline="${fg.multiline || false}"
-			.lines=${fgRowSpan}
-			.defaultLanguage="${props.language}"
-			.suggestionProvider=${(_b = fg.options) === null || _b === void 0 ? void 0 : _b.suggestionProvider}
-			.ownersProvider=${ownersProvider}
-			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
-			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
-			.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
-			.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            return html `<icure-form-measure-field
-			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
-			class="icure-form-field"
-			label="${fg.field}"
-			.displayedLabels="${getLabels(fg)}"
-			.displayMetadata="${displayMetadata}"
-			value="${fg.value}"
-			unit="${fg.unit}"
-			.defaultLanguage="${props.language}"
-			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
-			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
-			.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
-			.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            return html `<icure-form-number-field
-			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
-			class="icure-form-field"
-			label="${fg.field}"
-			.displayedLabels="${getLabels(fg)}"
-			.displayMetadata="${displayMetadata}"
-			value="${fg.value}"
-			.defaultLanguage="${props.language}"
-			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
-			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
-			.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
-			.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            return html `<icure-form-date-picker
-			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
-			class="icure-form-field"
-			label="${fg.field}"
-			.displayedLabels="${getLabels(fg)}"
-			.displayMetadata="${displayMetadata}"
-			value="${fg.now ? currentDate() : fg.value}"
-			.defaultLanguage="${props.language}"
-			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
-			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
-			.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
-			.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            return html `<icure-form-time-picker
-			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
-			class="icure-form-field"
-			label="${fg.field}"
-			.displayedLabels="${getLabels(fg)}"
-			.displayMetadata="${displayMetadata}"
-			value="${fg.now ? currentTime() : fg.value}"
-			.defaultLanguage="${props.language}"
-			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
-			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
-			.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
-			.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            return html `<icure-form-date-time-picker
-			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
-			class="icure-form-field"
-			label="${fg.field}"
-			.displayedLabels="${getLabels(fg)}"
-			.displayMetadata="${displayMetadata}"
-			value="${fg.now ? currentDateTime() : fg.value}"
-			.defaultLanguage="${props.language}"
-			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
-			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
-			.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
-			.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c;
-            return html `<icure-form-dropdown-field
-			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
-			class="icure-form-field"
-			.label=${fg.field}
-			.displayedLabels=${getLabels(fg)}
-			.defaultLanguage="${props.language}"
-			.translate="${fg.translate}"
-			.sortOptions="${fg.sortOptions}"
-			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) => filterAndSortOptionsFromFieldDefinition(language, fg, translationProvider, terms)}"
-			.ownersProvider=${ownersProvider}
-			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
-			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
-			.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
-			.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c;
-            return html `<icure-form-radio-button
-			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
-			class="icure-form-field"
-			.label="${fg.field}"
-			.displayedLabels="${getLabels(fg)}"
-			.displayMetadata="${displayMetadata}"
-			.defaultLanguage="${props.language}"
-			.translate="${fg.translate}"
-			.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) => filterAndSortOptionsFromFieldDefinition(language, fg, translationProvider, terms)}"
-			.ownersProvider=${ownersProvider}
-			.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
-			.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
-			.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
-			.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c;
-            return html ` <icure-form-checkbox
-			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
-			class="icure-form-field"
-			.label="${fg.field}"
-			.displayedLabels="${getLabels(fg)}"
-			.displayMetadata="${displayMetadata}"
-			.defaultLanguage="${props.language}"
-			.translate="${fg.translate}"
-			.sortOptions="${fg.sortOptions}"
-			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) => filterAndSortOptionsFromFieldDefinition(language, fg, translationProvider, terms)}"
-			.ownersProvider="${ownersProvider}"
-			.translationProvider="${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}"
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
-			.metadataProvider="${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}"
-			.handleValueChanged="${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}"
-			.handleMetadataChanged="${handleMetadataChangedProvider(formsValueContainer)}"
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e;
-            return 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 && defaultTranslationProvider(form.translations))}"
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.actionListener="${actionListener}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c;
-            return html `<icure-form-label
-			style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
-			class="icure-form-field"
-			.defaultLanguage="${props.language}"
-			labelPosition=${props.labelPosition}
-			label="${(_a = fg.shortLabel) !== null && _a !== void 0 ? _a : fg.field}"
-			.translationProvider="${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}"
-			.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
-			.styleOptions="${fg.styleOptions}"
-			.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) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f;
-            if (!fg) {
-                return 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']) {
+function allNext(subGenerators, cache) {
+    return __awaiter(this, void 0, void 0, function* () {
+        let done = true;
+        const subElements = yield Promise.all(subGenerators.map((sg, idx) => __awaiter(this, void 0, void 0, function* () {
+            if (!sg) {
                 return 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);
+            if (cache[idx]) {
+                return cache[idx];
             }
-            else if (fg.clazz === 'subform' && (fg.id || computedProperties['title'])) {
-                return yield renderSubform(fg.copy(Object.assign({}, computedProperties)), fgSpan, level);
+            const itv = yield sg.next();
+            if (itv.value) {
+                const [value, isStale] = itv.value;
+                if (isStale) {
+                    cache[idx] = value;
+                }
+                done = done && isStale;
+                return value;
             }
-            else if (fg.clazz === 'field') {
-                const field = fg.copy(Object.assign({}, computedProperties));
-                return 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)
-                                                                    : ''}`;
+            else {
+                return nothing;
             }
-            return 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, 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, () => html ` <div class="icure-form">${section}</div>`);
         })));
+        return { done, subElements };
+    });
+}
+export function render(form_1, props_1, formsValueContainer_1, translationProvider_1) {
+    return __asyncGenerator(this, arguments, function* render_1(form, props, formsValueContainer, translationProvider, ownersProvider = () => __awaiter(this, void 0, void 0, function* () { return []; }), optionsProvider, actionListener = () => undefined, languages, readonly, displayMetadata, sectionWrapper) {
+        function renderPotentiallyReadonlyField(fg, getHtml) {
+            return __asyncGenerator(this, arguments, function* renderPotentiallyReadonlyField_1() {
+                var _a, _b;
+                if (formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.isFieldBeingComputed(fg.label())) {
+                    yield yield __await([getHtml(true), true]);
+                }
+                else if ((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) {
+                    const readonlyPromise = formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute(fg.computedProperties.readonly);
+                    yield yield __await([getHtml(true), false]);
+                    const finalResult = getHtml(!!readonlyPromise ? yield __await(readonlyPromise) : false);
+                    while (true) {
+                        yield yield __await([finalResult, true]);
+                    }
+                }
+                else {
+                    const finalResult = getHtml((_b = readonly !== null && readonly !== void 0 ? readonly : fg.readonly) !== null && _b !== void 0 ? _b : false);
+                    while (true) {
+                        yield yield __await([finalResult, true]);
+                    }
+                }
+            });
+        }
+        const composedOptionsProvider = optionsProvider && form.codifications
+            ? (language, codifications, terms, sortOptions) => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b, _c;
+                const originalOptions = optionsProvider ? yield optionsProvider(language, codifications, terms) : [];
+                return sortSuggestions(originalOptions.concat((_c = (_b = (_a = form.codifications) === null || _a === void 0 ? void 0 : _a.filter((c) => codifications.includes(c.type))) === null || _b === void 0 ? void 0 : _b.flatMap((c) => c.codes
+                    .filter((c) => (terms !== null && terms !== void 0 ? terms : []).map((st) => st.toLowerCase()).every((st) => c.label[language].toLowerCase().includes(st)))
+                    .map((c) => ({ id: c.id, label: c.label, text: c.label[language], terms: terms !== null && terms !== void 0 ? terms : [] })))) !== null && _c !== void 0 ? _c : []), language, sortOptions);
+            })
+            : optionsProvider
+                ? (language, codifications, terms, sortOptions) => {
+                    var _a;
+                    return (_a = optionsProvider === null || optionsProvider === void 0 ? void 0 : optionsProvider(language, codifications, terms).then((codes) => sortSuggestions(codes, language, sortOptions))) !== null && _a !== void 0 ? _a : Promise.resolve([]);
+                }
+                : undefined;
+        const h = function (level, className = '', content) {
+            return level === 1
+                ? html `<h1 class="${className}">${content}</h1>`
+                : level === 2
+                    ? html `<h2 class="${className}">${content}</h2>`
+                    : level === 3
+                        ? html `<h3 class="${className}">${content}</h3>`
+                        : level === 4
+                            ? html `<h4 class="${className}">${content}</h4>`
+                            : level === 5
+                                ? html `<h5 class="${className}">${content}</h5>`
+                                : html `<h6 class="${className}">${content}</h6>`;
+        };
+        function renderGroup(fg, fgSpan, level) {
+            return __asyncGenerator(this, arguments, function* renderGroup_1() {
+                var _a, _b;
+                const subGenerators = (_b = (_a = fg.fields) === null || _a === void 0 ? void 0 : _a.map((fieldOrGroup) => renderFieldGroupOrSubform(fieldOrGroup, level + 1))) !== null && _b !== void 0 ? _b : [];
+                const cache = [];
+                while (true) {
+                    const { done, subElements } = yield __await(allNext(subGenerators, cache));
+                    const filteredSubElements = subElements.filter((x) => !!x && x !== nothing);
+                    yield yield __await([
+                        filteredSubElements.length
+                            ? html ` <div class="${['group', fg.borderless ? undefined : 'bordered'].filter((x) => !!x).join(' ')}" style="${calculateFieldOrGroupSize(fgSpan, 1)}">
+							${fg.borderless ? nothing : html ` <div>${h(level, '', html `${fg.group}`)}</div>`}
+							<div class="icure-form">${filteredSubElements}</div>
+					  </div>`
+                            : nothing,
+                        done,
+                    ]);
+                }
+            });
+        }
+        function renderSubform(fg, fgSpan, level) {
+            return __asyncGenerator(this, arguments, function* renderSubform_1() {
+                var _a;
+                function getHtml(children) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        var _a, _b;
+                        return html `<div class="subform" style="${calculateFieldOrGroupSize(fgSpan, 1)}">
+				<div class="subform__heading">
+					${h(level, 'subform__heading__title', html `${(_a = (props.language && fg.shortLabel ? tp === null || tp === void 0 ? void 0 : tp(props.language, fg.shortLabel) : fg.shortLabel)) !== null && _a !== void 0 ? _a : ''}`)}
+					${readonly
+                            ? nothing
+                            : html `<form-selection-button
+								.label="${(_b = fg.labels.add) !== null && _b !== void 0 ? _b : 'Add subform'}"
+								.forms="${Object.entries(fg.forms)}"
+								.formAdded="${(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 : ''));
+                            }}"
+								.translationProvider="${tp}"
+								.language="${props.language}"
+						  ></form-selection-button>`}
+				</div>
+				${yield Promise.all(children === null || children === void 0 ? void 0 : children.map((_a) => __awaiter(this, [_a], void 0, function* ([child, childForm, renderedChildForm]) {
+                            var _b, _c, _d;
+                            const title = (_b = childForm === null || childForm === void 0 ? void 0 : childForm.form) !== null && _b !== void 0 ? _b : childForm === null || childForm === void 0 ? void 0 : childForm.description;
+                            const localisedTitle = (_c = (title && tp && props.language ? tp === null || tp === void 0 ? void 0 : tp(props.language, title) : title)) !== null && _c !== void 0 ? _c : '';
+                            const localisedRemove = (_d = (fg.labels.remove && tp && props.language ? tp === null || tp === void 0 ? void 0 : tp(props.language, fg.labels.remove) : fg.labels.remove)) !== null && _d !== void 0 ? _d : 'Remove';
+                            return html `
+							<div class="subform__child">
+								<h3 class="subform__child__title">${localisedTitle}</h3>
+								${renderedChildForm} ${readonly ? nothing : 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>
+						`;
+                        })))}
+			</div>`;
+                    });
+                }
+                const children = (_a = (yield __await((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 && defaultTranslationProvider(form.translations));
+                const subGenerators = (children !== null && children !== void 0 ? children : []).map((child) => {
+                    const childForm = Object.values(fg.forms).find((f) => f.id === child.getFormId());
+                    return childForm ? render(childForm, props, child, translationProvider, ownersProvider, optionsProvider, actionListener, languages, readonly, displayMetadata) : undefined;
+                });
+                const cache = [];
+                while (true) {
+                    const { done, subElements } = yield __await(allNext(subGenerators, cache));
+                    yield yield __await([yield __await(getHtml((children !== null && children !== void 0 ? children : []).map((child, idx) => [child, Object.values(fg.forms).find((f) => f.id === child.getFormId()), subElements[idx]]))), done]);
+                }
+            });
+        }
+        function renderTextField(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderTextField_1() {
+                yield __await(yield* __asyncDelegator(__asyncValues(renderPotentiallyReadonlyField(fg, function (readonly) {
+                    var _a, _b, _c, _d, _e, _f;
+                    const loading = formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.isFieldBeingComputed(fg.label());
+                    return html `<icure-form-text-field
+				class="icure-form-field ${loading ? 'loading' : ''}"
+				style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan, (_a = fg.styleOptions) === null || _a === void 0 ? void 0 : _a.width)}"
+				label="${fg.field}"
+				value="${fg.value}"
+				.displayedLabels="${getLabels(fg)}"
+				.displayMetadata="${displayMetadata}"
+				.multiline="${fg.multiline || false}"
+				.lines=${fgRowSpan}
+				.defaultLanguage="${props.language}"
+				.languages="${languages}"
+				.linksProvider=${(_b = fg.options) === null || _b === void 0 ? void 0 : _b.linksProvider}
+				.suggestionProvider=${(_c = fg.options) === null || _c === void 0 ? void 0 : _c.suggestionProvider}
+				.ownersProvider=${ownersProvider}
+				.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
+				.validationErrorsProvider="${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}
+				.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
+				.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
+				.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
+				.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
+				.styleOptions="${fg.styleOptions}"
+				.readonly="${readonly}"
+				.loading="${loading}"
+			></icure-form-text-field>`;
+                }))));
+            });
+        }
+        function renderTokenField(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderTokenField_1() {
+                yield __await(yield* __asyncDelegator(__asyncValues(renderPotentiallyReadonlyField(fg, function (readonly) {
+                    var _a, _b;
+                    return 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}"
+				value="${fg.value}"
+				.displayedLabels="${getLabels(fg)}"
+				.displayMetadata="${displayMetadata}"
+				.multiline="${fg.multiline || false}"
+				.lines=${fgRowSpan}
+				.defaultLanguage="${props.language}"
+				.suggestionProvider=${(_b = fg.options) === null || _b === void 0 ? void 0 : _b.suggestionProvider}
+				.ownersProvider=${ownersProvider}
+				.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
+				.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
+				.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
+				.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
+				.styleOptions="${fg.styleOptions}"
+				.readonly="${readonly}"
+			></icure-form-token-field>`;
+                }))));
+            });
+        }
+        function renderItemsListField(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderItemsListField_1() {
+                yield __await(yield* __asyncDelegator(__asyncValues(renderPotentiallyReadonlyField(fg, function (readonly) {
+                    var _a, _b;
+                    return 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}"
+				value="${fg.value}"
+				.displayedLabels="${getLabels(fg)}"
+				.displayMetadata="${displayMetadata}"
+				.multiline="${fg.multiline || false}"
+				.lines=${fgRowSpan}
+				.defaultLanguage="${props.language}"
+				.suggestionProvider=${(_b = fg.options) === null || _b === void 0 ? void 0 : _b.suggestionProvider}
+				.ownersProvider=${ownersProvider}
+				.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
+				.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
+				.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
+				.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
+				.styleOptions="${fg.styleOptions}"
+				.readonly="${readonly}"
+			></icure-form-items-list-field>`;
+                }))));
+            });
+        }
+        function renderMeasureField(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderMeasureField_1() {
+                yield __await(yield* __asyncDelegator(__asyncValues(renderPotentiallyReadonlyField(fg, function (readonly) {
+                    return html `<icure-form-measure-field
+				style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
+				class="icure-form-field"
+				label="${fg.field}"
+				.displayedLabels="${getLabels(fg)}"
+				.displayMetadata="${displayMetadata}"
+				value="${fg.value}"
+				unit="${fg.unit}"
+				.defaultLanguage="${props.language}"
+				.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
+				.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
+				.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
+				.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
+				.styleOptions="${fg.styleOptions}"
+				.readonly="${readonly}"
+			></icure-form-measure-field>`;
+                }))));
+            });
+        }
+        function renderNumberField(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderNumberField_1() {
+                yield __await(yield* __asyncDelegator(__asyncValues(renderPotentiallyReadonlyField(fg, function (readonly) {
+                    const loading = formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.isFieldBeingComputed(fg.label());
+                    return html `<icure-form-number-field
+				style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
+				class="icure-form-field ${loading ? 'loading' : ''}"
+				label="${fg.field}"
+				.displayedLabels="${getLabels(fg)}"
+				.displayMetadata="${displayMetadata}"
+				value="${fg.value}"
+				.defaultLanguage="${props.language}"
+				.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
+				.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
+				.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
+				.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
+				.styleOptions="${fg.styleOptions}"
+				.readonly="${readonly}"
+				.loading="${loading}"
+			></icure-form-number-field>`;
+                }))));
+            });
+        }
+        function renderDatePicker(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderDatePicker_1() {
+                yield __await(yield* __asyncDelegator(__asyncValues(renderPotentiallyReadonlyField(fg, function (readonly) {
+                    return html ` <icure-form-date-picker
+				style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
+				class="icure-form-field"
+				label="${fg.field}"
+				.displayedLabels="${getLabels(fg)}"
+				.displayMetadata="${displayMetadata}"
+				value="${fg.now ? currentDate() : fg.value}"
+				.defaultLanguage="${props.language}"
+				.translationProvider="${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}"
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
+				.metadataProvider="${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}"
+				.handleValueChanged="${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}"
+				.handleMetadataChanged="${handleMetadataChangedProvider(formsValueContainer)}"
+				.styleOptions="${fg.styleOptions}"
+				.readonly="${readonly}"
+			></icure-form-date-picker>`;
+                }))));
+            });
+        }
+        function renderTimePicker(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderTimePicker_1() {
+                yield __await(yield* __asyncDelegator(__asyncValues(renderPotentiallyReadonlyField(fg, function (readonly) {
+                    return html `<icure-form-time-picker
+				style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
+				class="icure-form-field"
+				label="${fg.field}"
+				.displayedLabels="${getLabels(fg)}"
+				.displayMetadata="${displayMetadata}"
+				value="${fg.now ? currentTime() : fg.value}"
+				.defaultLanguage="${props.language}"
+				.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
+				.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
+				.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
+				.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
+				.styleOptions="${fg.styleOptions}"
+				.readonly="${readonly}"
+			></icure-form-time-picker>`;
+                }))));
+            });
+        }
+        function renderDateTimePicker(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderDateTimePicker_1() {
+                yield __await(yield* __asyncDelegator(__asyncValues(renderPotentiallyReadonlyField(fg, function (readonly) {
+                    return html `<icure-form-date-time-picker
+				style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
+				class="icure-form-field"
+				label="${fg.field}"
+				.displayedLabels="${getLabels(fg)}"
+				.displayMetadata="${displayMetadata}"
+				value="${fg.now ? currentDateTime() : fg.value}"
+				.defaultLanguage="${props.language}"
+				.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
+				.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
+				.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
+				.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
+				.styleOptions="${fg.styleOptions}"
+				.readonly="${readonly}"
+			></icure-form-date-time-picker>`;
+                }))));
+            });
+        }
+        function renderDropdownField(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderDropdownField_1() {
+                yield __await(yield* __asyncDelegator(__asyncValues(renderPotentiallyReadonlyField(fg, function (readonly) {
+                    var _a;
+                    return html `<icure-form-dropdown-field
+				style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
+				class="icure-form-field"
+				.label=${fg.field}
+				.displayedLabels=${getLabels(fg)}
+				.defaultLanguage="${props.language}"
+				.translate="${fg.translate}"
+				.sortOptions="${fg.sortOptions}"
+				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) => filterAndSortOptionsFromFieldDefinition(language, fg, translationProvider, terms)}"
+				.ownersProvider=${ownersProvider}
+				.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
+				.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
+				.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
+				.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
+				.styleOptions="${fg.styleOptions}"
+				.readonly="${readonly}"
+			></icure-form-dropdown-field>`;
+                }))));
+            });
+        }
+        function renderRadioButtons(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderRadioButtons_1() {
+                yield __await(yield* __asyncDelegator(__asyncValues(renderPotentiallyReadonlyField(fg, function (readonly) {
+                    var _a;
+                    return html `<icure-form-radio-button
+				style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
+				class="icure-form-field"
+				.label="${fg.field}"
+				.displayedLabels="${getLabels(fg)}"
+				.displayMetadata="${displayMetadata}"
+				.defaultLanguage="${props.language}"
+				.translate="${fg.translate}"
+				.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) => filterAndSortOptionsFromFieldDefinition(language, fg, translationProvider, terms)}"
+				.ownersProvider=${ownersProvider}
+				.translationProvider=${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
+				.metadataProvider=${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}
+				.handleValueChanged=${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}
+				.handleMetadataChanged=${handleMetadataChangedProvider(formsValueContainer)}
+				.styleOptions="${fg.styleOptions}"
+				.readonly="${readonly}"
+			></icure-form-radio-button>`;
+                }))));
+            });
+        }
+        function renderCheckboxes(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderCheckboxes_1() {
+                yield __await(yield* __asyncDelegator(__asyncValues(renderPotentiallyReadonlyField(fg, function (readonly) {
+                    var _a;
+                    return html ` <icure-form-checkbox
+				style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
+				class="icure-form-field"
+				.label="${fg.field}"
+				.displayedLabels="${getLabels(fg)}"
+				.displayMetadata="${displayMetadata}"
+				.defaultLanguage="${props.language}"
+				.translate="${fg.translate}"
+				.sortOptions="${fg.sortOptions}"
+				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) => filterAndSortOptionsFromFieldDefinition(language, fg, translationProvider, terms)}"
+				.ownersProvider="${ownersProvider}"
+				.translationProvider="${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}"
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.valueProvider="${formsValueContainer && fieldValuesProvider(formsValueContainer, fg)}"
+				.metadataProvider="${formsValueContainer && formsValueContainer.getMetadata.bind(formsValueContainer)}"
+				.handleValueChanged="${handleValueChangedProvider(formsValueContainer, fg, props.defaultOwner)}"
+				.handleMetadataChanged="${handleMetadataChangedProvider(formsValueContainer)}"
+				.styleOptions="${fg.styleOptions}"
+				.readonly="${readonly}"
+			></icure-form-checkbox>`;
+                }))));
+            });
+        }
+        function renderButton(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderButton_1() {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                function getHtml(payload, event) {
+                    var _a;
+                    return 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 && defaultTranslationProvider(form.translations))}"
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.actionListener="${actionListener}"
+				.event="${event}"
+				.payload="${payload}"
+				.styleOptions="${fg.styleOptions}"
+			></icure-form-button>`;
+                }
+                if (((_a = fg.computedProperties) === null || _a === void 0 ? void 0 : _a.readonly) || ((_b = fg.computedProperties) === null || _b === void 0 ? void 0 : _b.event)) {
+                    yield yield __await([getHtml(true, (_c = fg.event) !== null && _c !== void 0 ? _c : 'submit'), false]);
+                    const [payload, event] = (yield __await(Promise.all([
+                        fg.payload !== undefined ? fg.payload : ((_d = fg.computedProperties) === null || _d === void 0 ? void 0 : _d.payload) ? !(yield __await((formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_e = fg.computedProperties) === null || _e === void 0 ? void 0 : _e.payload)))) : undefined,
+                        fg.event !== undefined ? fg.event : ((_f = fg.computedProperties) === null || _f === void 0 ? void 0 : _f.event) ? !(yield __await((formsValueContainer === null || formsValueContainer === void 0 ? void 0 : formsValueContainer.compute((_g = fg.computedProperties) === null || _g === void 0 ? void 0 : _g.event)))) : 'submit',
+                    ])));
+                    yield yield __await([getHtml(payload, event), true]);
+                }
+                else {
+                    yield yield __await([getHtml(true, (_h = fg.event) !== null && _h !== void 0 ? _h : 'submit'), true]);
+                }
+            });
+        }
+        function renderLabel(fgSpan, fgRowSpan, fg) {
+            return __asyncGenerator(this, arguments, function* renderLabel_1() {
+                var _a;
+                yield yield __await([
+                    html `<icure-form-label
+				style="${calculateFieldOrGroupSize(fgSpan, fgRowSpan)}"
+				class="icure-form-field"
+				.defaultLanguage="${props.language}"
+				labelPosition="${props.labelPosition}"
+				label="${(_a = fg.shortLabel) !== null && _a !== void 0 ? _a : fg.field}"
+				.translationProvider="${translationProvider !== null && translationProvider !== void 0 ? translationProvider : (form.translations && defaultTranslationProvider(form.translations))}"
+				.validationErrorsProvider="${getValidationErrorProvider(formsValueContainer, fg)}"
+				.styleOptions="${fg.styleOptions}"
+			></icure-form-label>`,
+                    true,
+                ]);
+            });
+        }
+        function dummyGen() {
+            return __asyncGenerator(this, arguments, function* dummyGen_1() {
+                yield yield __await([html ``, true]);
+            });
+        }
+        function renderFieldGroupOrSubform(fg, level) {
+            return __asyncGenerator(this, arguments, function* renderFieldGroupOrSubform_1() {
+                var _a, e_1, _b, _c;
+                var _d, _e, _f, _g, _h, _j;
+                if (!fg) {
+                    yield yield __await(Promise.resolve([nothing, true]));
+                    return yield __await(void 0);
+                }
+                const computedProperties = (yield __await(Object.keys((_d = fg.computedProperties) !== null && _d !== void 0 ? _d : {})
+                    .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']) {
+                    yield yield __await(Promise.resolve([nothing, true]));
+                    return yield __await(void 0);
+                }
+                const fgSpan = ((_f = (_e = computedProperties['span']) !== null && _e !== void 0 ? _e : fg.span) !== null && _f !== void 0 ? _f : 6);
+                const fgRowSpan = ((_h = (_g = computedProperties['rowSpan']) !== null && _g !== void 0 ? _g : fg.rowSpan) !== null && _h !== void 0 ? _h : 1);
+                if (fg.clazz === 'group' && ((_j = fg.fields) === null || _j === void 0 ? void 0 : _j.length)) {
+                    yield __await(yield* __asyncDelegator(__asyncValues(renderGroup(fg.copy(Object.assign({}, computedProperties)), fgSpan, level))));
+                }
+                else if (fg.clazz === 'subform' && (fg.id || computedProperties['title'])) {
+                    yield __await(yield* __asyncDelegator(__asyncValues(renderSubform(fg.copy(Object.assign({}, computedProperties)), fgSpan, level))));
+                }
+                else if (fg.clazz === 'field') {
+                    const field = fg.copy(Object.assign({}, computedProperties));
+                    try {
+                        for (var _k = true, _l = __asyncValues(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)
+                                                                            : dummyGen()), _m; _m = yield __await(_l.next()), _a = _m.done, !_a; _k = true) {
+                            _c = _m.value;
+                            _k = false;
+                            const render = _c;
+                            yield yield __await([html `${render[0]}`, render[1]]);
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (!_k && !_a && (_b = _l.return)) yield __await(_b.call(_l));
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                }
+                else {
+                    yield yield __await([html ``, true]);
+                }
+            });
+        }
+        const calculateFieldOrGroupSize = (span, rowSpan, fixedWidth) => {
+            if (fixedWidth)
+                return `width: ${fixedWidth}px`;
+            return `grid-column: span ${span}; ${rowSpan > 1 ? `grid-row: span ${rowSpan}` : ''}`;
+        };
+        function renderForm(form, sectionWrapper) {
+            return __asyncGenerator(this, arguments, function* renderForm_1() {
+                const sectionGenerators = form.sections.map(function (s) {
+                    return __asyncGenerator(this, arguments, function* () {
+                        const fieldsGenerator = s.fields.map((fieldOrGroup) => renderFieldGroupOrSubform(fieldOrGroup, 3));
+                        const cache = [];
+                        while (true) {
+                            const { done, subElements } = yield __await(allNext(fieldsGenerator, cache));
+                            yield yield __await([subElements, done]);
+                        }
+                    });
+                });
+                const cache = [];
+                while (true) {
+                    const { done, subElements } = yield __await(allNext(sectionGenerators, cache));
+                    yield yield __await([html `${yield __await(Promise.all(subElements.map((section, idx) => sectionWrapper(idx, () => __awaiter(this, void 0, void 0, function* () { return html ` <div class="icure-form">${section}</div>`; })))))}`, done]);
+                }
+            });
+        }
+        yield __await(yield* __asyncDelegator(__asyncValues(renderForm(form, sectionWrapper !== null && sectionWrapper !== void 0 ? sectionWrapper : ((_idx, section) => __awaiter(this, void 0, void 0, function* () { return yield section(); }))))));
     });
-    return html `${yield renderForm(form, sectionWrapper !== null && sectionWrapper !== void 0 ? sectionWrapper : ((idx, section) => section()))}`;
-});
+}
 //# sourceMappingURL=form.js.map