@mintplayer/ng-spark 22.24.0 → 22.25.0

package/fesm2022/mintplayer-ng-spark-po-form.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, computed, effect, inject, input, model, output, signal } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, computed, effect, inject, input, model, output, signal } from "@angular/core";
 import * as i1 from "@angular/common";
 import { CommonModule, NgComponentOutlet, NgTemplateOutlet } from "@angular/common";
 import * as i1$1 from "@angular/forms";
@@ -19,11 +19,11 @@ import { BsSpinnerComponent } from "@mintplayer/ng-bootstrap/spinner";
 import { BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective } from "@mintplayer/ng-bootstrap/tab-control";
 import { BsTableComponent } from "@mintplayer/ng-bootstrap/table";
 import { SparkLanguageService, SparkService } from "@mintplayer/ng-spark/services";
-import { AsDetailCellValuePipe, AsDetailColumnsPipe, AsDetailDisplayValuePipe, AsDetailTypePipe, CanCreateDetailRowPipe, CanDeleteDetailRowPipe, CanEditDetailRowPipe, ErrorForAttributePipe, InlineRefOptionsPipe, InputTypePipe, LookupDisplayTypePipe, LookupOptionsPipe, ReferenceAttrValuePipe, ResolveTranslationPipe, TranslateKeyPipe } from "@mintplayer/ng-spark/pipes";
+import { AsDetailCellValuePipe, AsDetailColumnsPipe, AsDetailDisplayValuePipe, AsDetailRowRendererPipe, AsDetailTypePipe, CanCreateDetailRowPipe, CanDeleteDetailRowPipe, CanEditDetailRowPipe, ErrorForAttributePipe, InlineRefOptionsPipe, InputTypePipe, LookupDisplayTypePipe, LookupOptionsPipe, ReferenceAttrValuePipe, ResolveTranslationPipe, TranslateKeyPipe } from "@mintplayer/ng-spark/pipes";
 import { AS_DETAIL_ROW_KEY, ELookupDisplayType, EReferenceDisplayType, ShowedOn, applyOverlay, evaluateRules, hasShowedOnFlag, mergeRefreshValues, nestedPoToDict, overlayFromResponse, resolveTranslation } from "@mintplayer/ng-spark/models";
 import { SparkIconComponent } from "@mintplayer/ng-spark/icon";
 import { SparkAttributeDescriptionComponent } from "@mintplayer/ng-spark/attribute-description";
-import { SPARK_ATTRIBUTE_RENDERERS, withDeclaredInputs } from "@mintplayer/ng-spark/renderers";
+import { SPARK_ATTRIBUTE_RENDERERS, rowRendererInputs, withDeclaredInputs } from "@mintplayer/ng-spark/renderers";
 import { BsDatatableColumnDirective, BsDatatableComponent, BsRowTemplateDirective, DatatableSettings } from "@mintplayer/ng-bootstrap/datatable";
 var SparkReferencePickerComponent = class SparkReferencePickerComponent {
 	sparkService = inject(SparkService);
@@ -796,6 +796,7 @@ var RefreshCoordinator = class {
 	sequence = 0;
 	settled = 0;
 	pending = /* @__PURE__ */ new Set();
+	timers = /* @__PURE__ */ new Map();
 	constructor(host) {
 		this.host = host;
 	}
@@ -805,17 +806,44 @@ var RefreshCoordinator = class {
 	markPending(attributeName) {
 		this.pending.add(attributeName);
 	}
+	dispatch(attributeName, mode) {
+		switch (mode) {
+			case "immediate": return this.trigger(attributeName);
+			case "debounced": return this.trigger(attributeName, { debounceMs: 300 });
+			case "blur":
+				this.markPending(attributeName);
+				return Promise.resolve();
+		}
+	}
 	blur(attributeName) {
+		this.clearTimer(attributeName);
 		if (!this.pending.delete(attributeName)) return Promise.resolve();
 		return this.trigger(attributeName);
 	}
 	async flush() {
+		for (const name of [...this.timers.keys()]) this.clearTimer(name);
 		const names = [...this.pending];
 		this.pending.clear();
 		for (const name of names) await this.trigger(name);
 		await this.queue;
 	}
-	trigger(attributeName) {
+	dispose() {
+		for (const name of [...this.timers.keys()]) this.clearTimer(name);
+		this.pending.clear();
+	}
+	trigger(attributeName, options) {
+		const debounceMs = options?.debounceMs ?? 0;
+		if (debounceMs > 0) {
+			this.clearTimer(attributeName);
+			this.pending.add(attributeName);
+			this.timers.set(attributeName, setTimeout(() => {
+				this.timers.delete(attributeName);
+				if (this.pending.delete(attributeName)) this.trigger(attributeName);
+			}, debounceMs));
+			return Promise.resolve();
+		}
+		this.clearTimer(attributeName);
+		this.pending.delete(attributeName);
 		const ticket = ++this.sequence;
 		this.host.setBusy(true);
 		this.queue = this.queue.then(async () => {
@@ -831,8 +859,29 @@ var RefreshCoordinator = class {
 		});
 		return this.queue;
 	}
+	clearTimer(attributeName) {
+		const timer = this.timers.get(attributeName);
+		if (timer === void 0) return;
+		clearTimeout(timer);
+		this.timers.delete(attributeName);
+	}
 };
-function triggersImmediately(attr) {
+function effectiveTrigger(attr) {
+	switch (attr?.triggersRefresh) {
+		case "Auto": return isDiscreteEditor(attr) ? "change" : "blur";
+		case "ValueChanged": return "change";
+		case "Blur": return isDiscreteEditor(attr) ? "change" : "blur";
+		default: return "none";
+	}
+}
+function refreshDispatch(attr) {
+	switch (effectiveTrigger(attr)) {
+		case "change": return isDiscreteEditor(attr) ? "immediate" : "debounced";
+		case "blur": return "blur";
+		default: return null;
+	}
+}
+function isDiscreteEditor(attr) {
 	if (!attr) return false;
 	if (attr.lookupReferenceType) return true;
 	switch ((attr.dataType ?? "").toLowerCase()) {
@@ -924,6 +973,7 @@ var SparkPoFormComponent = class SparkPoFormComponent {
 		return this.editableAttributes().filter((a) => a.group === group.id);
 	}
 	constructor() {
+		inject(DestroyRef).onDestroy(() => this.refreshCoordinator.dispose());
 		effect(() => {
 			const et = this.entityType();
 			this.parentId();
@@ -1078,6 +1128,9 @@ var SparkPoFormComponent = class SparkPoFormComponent {
 		if (!col.renderer) return null;
 		return this.rendererRegistry.find((r) => r.name === col.renderer)?.columnComponent ?? null;
 	}
+	getRowRendererInputs(renderer, row) {
+		return rowRendererInputs(renderer, row, this.objectId());
+	}
 	getAsDetailCellRendererInputs(component, row, col) {
 		return withDeclaredInputs(component, {
 			value: row[col.name],
@@ -1127,15 +1180,15 @@ var SparkPoFormComponent = class SparkPoFormComponent {
 	}
 	onInlineCellChange(attr, rowIndex, col) {
 		this.onFieldChange();
-		if (col.triggersRefresh !== true || !this.objectTypeId()) return;
+		const dispatch = refreshDispatch(col);
+		if (!dispatch || !this.objectTypeId()) return;
 		const path = this.inlineErrorPath(attr, rowIndex, col);
 		this.pendingNestedTrigger = {
 			kind: "row",
 			attribute: attr.name,
 			rowIndex
 		};
-		if (triggersImmediately(col)) this.refreshCoordinator.trigger(path);
-		else this.refreshCoordinator.markPending(path);
+		this.refreshCoordinator.dispatch(path, dispatch);
 	}
 	pendingNestedTrigger = null;
 	onEmbeddedTrigger(attributeName, event) {
@@ -1144,8 +1197,7 @@ var SparkPoFormComponent = class SparkPoFormComponent {
 			kind: "object",
 			attribute: attributeName
 		};
-		if (event.immediate) this.refreshCoordinator.trigger(event.path);
-		else this.refreshCoordinator.markPending(event.path);
+		this.refreshCoordinator.dispatch(event.path, event.dispatch);
 	}
 	onEmbeddedTriggerBlur(path) {
 		if (!this.objectTypeId()) return;
@@ -1179,12 +1231,12 @@ var SparkPoFormComponent = class SparkPoFormComponent {
 		});
 	}
 	onInlineCellBlur(attr, rowIndex, col) {
-		if (col.triggersRefresh !== true || !this.objectTypeId()) return;
+		if (effectiveTrigger(col) === "none" || !this.objectTypeId()) return;
 		this.refreshCoordinator.blur(this.inlineErrorPath(attr, rowIndex, col));
 	}
 	onFieldBlur(attr) {
 		if (this.triggerPathPrefix()) {
-			if (attr.triggersRefresh !== true) return;
+			if (effectiveTrigger(attr) === "none") return;
 			this.nestedTriggerBlurred.emit(this.nestedTriggerPath(attr));
 			return;
 		}
@@ -1192,23 +1244,23 @@ var SparkPoFormComponent = class SparkPoFormComponent {
 		this.refreshCoordinator.blur(attr.name);
 	}
 	noteChange(attr) {
+		const dispatch = refreshDispatch(attr);
 		if (this.triggerPathPrefix()) {
-			if (attr.triggersRefresh !== true) return;
+			if (!dispatch) return;
 			this.nestedTriggerRequested.emit({
 				path: this.nestedTriggerPath(attr),
-				immediate: triggersImmediately(attr)
+				dispatch
 			});
 			return;
 		}
-		if (!this.canRefresh(attr)) return;
-		if (triggersImmediately(attr)) this.refreshCoordinator.trigger(attr.name);
-		else this.refreshCoordinator.markPending(attr.name);
+		if (!dispatch || !this.canRefresh(attr)) return;
+		this.refreshCoordinator.dispatch(attr.name, dispatch);
 	}
 	nestedTriggerPath(attr) {
 		return `${this.triggerPathPrefix()}.${attr.name}`;
 	}
 	canRefresh(attr) {
-		return attr.triggersRefresh === true && !!this.objectTypeId();
+		return effectiveTrigger(attr) !== "none" && !!this.objectTypeId();
 	}
 	refreshCoordinator = new RefreshCoordinator({
 		send: (triggeredBy) => this.sparkService.refresh(this.objectTypeId(), this.buildRefreshPayload(), triggeredBy),
@@ -1530,7 +1582,7 @@ var SparkPoFormComponent = class SparkPoFormComponent {
 			refreshOverlay: "refreshOverlayChange"
 		},
 		ngImport: i0,
-		template: "<bs-form>\n  @if (entityType()) {\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"tabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n    <ng-template #tabContent let-tab>\n      @if (tab.id === '__default__') {\n        @if (ungroupedAttributes().length > 0) {\n          <bs-card class=\"d-block m-3\">\n            <div class=\"p-3\">\n              @for (attr of ungroupedAttributes(); track attr.id) {\n                <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n              }\n            </div>\n          </bs-card>\n        }\n      }\n      @for (group of groupsForTab(tab); track group.id) {\n        @if (attrsForGroup(group); as groupAttrs) {\n          @if (groupAttrs.length > 0) {\n            <bs-card class=\"d-block m-3\">\n              @if (group.label) {\n                <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n              }\n              <div class=\"p-3\">\n                @for (attr of groupAttrs; track attr.id) {\n                  <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n                }\n              </div>\n            </bs-card>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-template #attrField let-attr>\n      <div bsRow class=\"mb-3\">\n        <label [md]=\"4\" bsColFormLabel [for]=\"attr.name\">\n          {{ attr.label | resolveTranslation:attr.name }}\n          @if (attr.isRequired) {\n            <span class=\"text-danger\">*</span>\n          }\n          <spark-attribute-description [description]=\"attr.description\" />\n        </label>\n        <div [md]=\"8\">\n          <!-- A lookup wins over the raw data type. `[LookupReference]` does not change dataType —\n               only `[Reference]` does — so a lookup-backed bool still reports 'boolean' here. Tested\n               first, this branch swallowed it into a two-state checkbox and the select below was\n               unreachable, which made a declared lookup silently do nothing. -->\n          @if (attr.dataType === 'boolean' && !attr.lookupReferenceType) {\n            <bs-checkbox\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\">\n            </bs-checkbox>\n          } @else if (attr.lookupReferenceType) {\n            @if ((attr | lookupDisplayType:lookupReferenceOptions()) === ELookupDisplayType.Modal) {\n              <spark-lookup-picker\n                [value]=\"formData()[attr.name]\"\n                [options]=\"getLookupOptions(attr)\"\n                [inputId]=\"attr.name\"\n                [title]=\"attr.label | resolveTranslation:attr.name\"\n                [isInvalid]=\"hasError(attr.name)\"\n                (valueChange)=\"onLookupValueChange(attr, $event)\">\n              </spark-lookup-picker>\n            } @else {\n              <bs-select\n                class=\"w-100\"\n                [ngModel]=\"formData()[attr.name]\"\n                (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n                [id]=\"attr.name\"\n                [class.is-invalid]=\"hasError(attr.name)\">\n                <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                @for (option of (attr | lookupOptions:lookupReferenceOptions()); track option.key) {\n                  <option [ngValue]=\"option.key\">\n                    {{ option.values | resolveTranslation:option.key }}\n                  </option>\n                }\n              </bs-select>\n            }\n          } @else if (attr.dataType === 'Reference' && attr.isArray) {\n            <bs-tree-select\n              mode=\"multiple\"\n              variant=\"textbox\"\n              [showClear]=\"true\"\n              [placeholder]=\"'common.search' | t\"\n              [provider]=\"getReferenceProvider(attr)\"\n              [ngModel]=\"referenceTreeValues()[attr.name] || []\"\n              (ngModelChange)=\"onReferenceTreeChange(attr, $event)\"\n              [ngModelOptions]=\"{ standalone: true }\">\n            </bs-tree-select>\n          } @else if (attr.dataType === 'Reference') {\n            <spark-reference-picker\n              [value]=\"formData()[attr.name]\"\n              [options]=\"referenceOptions()[attr.name] || []\"\n              [referenceType]=\"attr.referenceType\"\n              [inputId]=\"attr.name\"\n              [title]=\"attr.label | resolveTranslation:attr.name\"\n              [isInvalid]=\"hasError(attr.name)\"\n              (valueChange)=\"onReferenceValueChange(attr, $event)\">\n            </spark-reference-picker>\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray && attr.editMode === 'inline') {\n            <!-- One source of truth for an inline cell, reused by the row and by the drag\n                 preview. The preview is a live Angular view (not a cloneNode), so its\n                 <bs-select> binds to row[col.name] and shows the value while dragging. -->\n            <ng-template #inlineDetailCell let-row=\"row\" let-col=\"col\" let-attr=\"attr\" let-rowIndex=\"rowIndex\">\n              <td>\n                <!-- A row the caller may not edit renders through the same read-only span as a\n                     read-only column: still fully readable, just not editable. Hiding it would\n                     hide the data, and the save path would silently restore any edit anyway. -->\n                @if (col.isReadOnly || !(attr | canEditDetailRow:asDetailPermissions())) {\n                  <span class=\"text-muted\">{{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}</span>\n                } @else if (getAsDetailCellEditRenderer(col); as editRenderer) {\n                  <ng-container *ngComponentOutlet=\"editRenderer; inputs: getAsDetailCellEditRendererInputs(editRenderer, row, col)\"></ng-container>\n                } @else if (col.dataType === 'AsDetail') {\n                  <!-- Nested AsDetail can't flatten into a row: escalate to the row modal,\n                       where the recursive spark-po-form renders the nested structure. -->\n                  <div class=\"d-flex align-items-center gap-1\">\n                    <span class=\"text-truncate flex-grow-1\">{{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}</span>\n                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"editArrayItem(attr, rowIndex)\">\n                      <spark-icon name=\"pencil\" />\n                    </button>\n                  </div>\n                } @else if (col.dataType === 'boolean' && !col.lookupReferenceType) {\n                  <!-- Same precedence as the top-level chain above: a lookup-backed column must\n                       reach its select rather than being swallowed by the checkbox. -->\n                  <bs-checkbox\n                    [(ngModel)]=\"row[col.name]\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\">\n                  </bs-checkbox>\n                } @else if (col.dataType === 'Reference' && col.query) {\n                  @if (col.referenceDisplayType === EReferenceDisplayType.Modal) {\n                    <spark-reference-picker\n                      [value]=\"row[col.name]\"\n                      [options]=\"(attr | inlineRefOptions:col:asDetailReferenceOptions())\"\n                      [referenceType]=\"col.referenceType\"\n                      [title]=\"col.label | resolveTranslation:col.name\"\n                      [isInvalid]=\"hasInlineError(attr, rowIndex, col)\"\n                      (valueChange)=\"row[col.name] = $event; onInlineCellChange(attr, rowIndex, col)\">\n                    </spark-reference-picker>\n                  } @else {\n                    <bs-select\n                      class=\"w-100\"\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                      [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\">\n                      <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                      @for (option of (attr | inlineRefOptions:col:asDetailReferenceOptions()); track option.id) {\n                        <option [ngValue]=\"option.id\">\n                          {{ option.breadcrumb || option.id }}\n                        </option>\n                      }\n                    </bs-select>\n                  }\n                } @else if (col.lookupReferenceType) {\n                  @if ((col | lookupDisplayType:lookupReferenceOptions()) === ELookupDisplayType.Modal) {\n                    <spark-lookup-picker\n                      [value]=\"row[col.name]\"\n                      [options]=\"getLookupOptions(col)\"\n                      [title]=\"col.label | resolveTranslation:col.name\"\n                      [isInvalid]=\"hasInlineError(attr, rowIndex, col)\"\n                      (valueChange)=\"row[col.name] = $event; onInlineCellChange(attr, rowIndex, col)\">\n                    </spark-lookup-picker>\n                  } @else {\n                    <bs-select\n                      class=\"w-100\"\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                      [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\">\n                      <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                      @for (option of getLookupOptions(col); track option.key) {\n                        <option [ngValue]=\"option.key\">\n                          {{ option.values | resolveTranslation:option.key }}\n                        </option>\n                      }\n                    </bs-select>\n                  }\n                } @else if (col.dataType === 'MultiLineString') {\n                  <textarea\n                    [(ngModel)]=\"row[col.name]\"\n                    [required]=\"col.isRequired\"\n                    rows=\"3\"\n                    [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                    (blur)=\"onInlineCellBlur(attr, rowIndex, col)\"></textarea>\n                } @else {\n                  <input\n                    [type]=\"col.dataType | inputType\"\n                    [(ngModel)]=\"row[col.name]\"\n                    [required]=\"col.isRequired\"\n                    [step]=\"col.dataType === 'decimal' ? '0.01' : '1'\"\n                    [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                    (blur)=\"onInlineCellBlur(attr, rowIndex, col)\">\n                }\n                @if (inlineErrorMessage(attr, rowIndex, col); as errorMsg) {\n                  <div class=\"invalid-feedback d-block\">{{ errorMsg }}</div>\n                }\n              </td>\n            </ng-template>\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\n                  @if (attr.isSortable) {\n                    <th style=\"width: 32px\"></th>\n                  }\n                  @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                    <th>{{ col.label | resolveTranslation:col.name }}<spark-attribute-description [description]=\"col.description\" /></th>\n                  }\n                  <th style=\"width: 50px\"></th>\n                </tr>\n              </thead>\n              <tbody class=\"align-middle\" cdkDropList [cdkDropListDisabled]=\"!attr.isSortable\" (cdkDropListDropped)=\"onAsDetailReorder(attr, $event)\">\n                @for (row of formData()[attr.name] || []; track $index; let rowIndex = $index) {\n                  <tr cdkDrag [cdkDragDisabled]=\"!attr.isSortable\">\n                    @if (attr.isSortable) {\n                      <td class=\"text-center text-muted\" style=\"cursor: move; touch-action: none\" cdkDragHandle>\n                        <spark-icon name=\"grip-vertical\" />\n                      </td>\n                    }\n                    @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                      <ng-container *ngTemplateOutlet=\"inlineDetailCell; context: { row: row, col: col, attr: attr, rowIndex: rowIndex }\"></ng-container>\n                    }\n                    <td class=\"text-nowrap\">\n                      @if (attr | canDeleteDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" [color]=\"colors.secondary\" (click)=\"removeArrayItem(attr, rowIndex)\">\n                          <spark-icon name=\"trash\" />\n                        </button>\n                      }\n                    </td>\n\n                    <!-- Floating preview = a LIVE view of the row's cells (not CDK's cloneNode),\n                         so <bs-select> shows its value instead of blanking. The in-grid\n                         placeholder still uses CDK's default clone (exact row height) and is\n                         hidden via .cdk-drag-placeholder { visibility:hidden } in the styles,\n                         so the drop gap is blank without collapsing/shifting the other rows. -->\n                    <ng-template cdkDragPreview>\n                      <table class=\"table mb-0 bg-body shadow-sm spark-drag-preview\">\n                        <tbody class=\"align-middle\">\n                          <tr>\n                            @if (attr.isSortable) {\n                              <td class=\"text-center text-muted\" style=\"width: 32px\"><spark-icon name=\"grip-vertical\" /></td>\n                            }\n                            @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                              <ng-container *ngTemplateOutlet=\"inlineDetailCell; context: { row: row, col: col, attr: attr, rowIndex: rowIndex }\"></ng-container>\n                            }\n                          </tr>\n                        </tbody>\n                      </table>\n                    </ng-template>\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length + (attr.isSortable ? 2 : 1)\" class=\"text-center text-muted\">\n                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @for (err of rowLifecycleErrorsFor(attr.name); track $index) {\n              <div class=\"text-danger small mt-1\">{{ err.errorMessage | resolveTranslation }}</div>\n            }\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addInlineRow(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\n                  @if (attr.isSortable) {\n                    <th style=\"width: 32px\"></th>\n                  }\n                  @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                    <th>{{ col.label | resolveTranslation:col.name }}<spark-attribute-description [description]=\"col.description\" /></th>\n                  }\n                  <th style=\"width: 80px\"></th>\n                </tr>\n              </thead>\n              <tbody class=\"align-middle\" cdkDropList [cdkDropListDisabled]=\"!attr.isSortable\" (cdkDropListDropped)=\"onAsDetailReorder(attr, $event)\">\n                @for (row of formData()[attr.name] || []; track $index) {\n                  <tr cdkDrag [cdkDragDisabled]=\"!attr.isSortable\">\n                    @if (attr.isSortable) {\n                      <td class=\"text-center text-muted\" style=\"cursor: move; touch-action: none\" cdkDragHandle>\n                        <spark-icon name=\"grip-vertical\" />\n                      </td>\n                    }\n                    @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                      <td>\n                        @if (getAsDetailCellRendererComponent(col); as cellRenderer) {\n                          <ng-container *ngComponentOutlet=\"cellRenderer; inputs: getAsDetailCellRendererInputs(cellRenderer, row, col)\"></ng-container>\n                        } @else {\n                          {{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}\n                        }\n                      </td>\n                    }\n                    <td class=\"text-nowrap\">\n                      @if (attr | canEditDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary me-1\" (click)=\"editArrayItem(attr, $index)\">\n                          <spark-icon name=\"pencil\" />\n                        </button>\n                      }\n                      @if (attr | canDeleteDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeArrayItem(attr, $index)\">\n                          <spark-icon name=\"trash\" />\n                        </button>\n                      }\n                    </td>\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length + (attr.isSortable ? 2 : 1)\" class=\"text-center text-muted\">\n                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @for (err of rowLifecycleErrorsFor(attr.name); track $index) {\n              <div class=\"text-danger small mt-1\">{{ err.errorMessage | resolveTranslation }}</div>\n            }\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addArrayItem(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail') {\n            <bs-input-group>\n              <input\n                type=\"text\"\n                [id]=\"attr.name\"\n                [value]=\"attr | asDetailDisplayValue:formData():asDetailTypes()\"\n                readonly\n                [class.is-invalid]=\"hasError(attr.name)\">\n              <button\n                type=\"button\"\n                bsInputGroupBtn\n                [color]=\"colors.secondary\"\n                (click)=\"openAsDetailEditor(attr)\">\n                <spark-icon name=\"pencil\" />\n              </button>\n            </bs-input-group>\n          } @else if (getEditRendererComponent(attr); as editComp) {\n            <ng-container *ngComponentOutlet=\"editComp; inputs: getEditRendererInputs(editComp, attr)\"></ng-container>\n          } @else if (attr.dataType === 'MultiLineString') {\n            <textarea\n              [id]=\"attr.name\"\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n              (blur)=\"onFieldBlur(attr)\"\n              [name]=\"attr.name\"\n              [required]=\"attr.isRequired\"\n              rows=\"6\"\n              [class.is-invalid]=\"hasError(attr.name)\"></textarea>\n          } @else {\n            <input\n              [type]=\"attr.dataType | inputType\"\n              [id]=\"attr.name\"\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n              (blur)=\"onFieldBlur(attr)\"\n              [name]=\"attr.name\"\n              [required]=\"attr.isRequired\"\n              [step]=\"attr.dataType === 'decimal' ? '0.01' : '1'\"\n              [class.is-invalid]=\"hasError(attr.name)\">\n          }\n          @if (attr.name | errorForAttribute:validationErrors(); as errorMsg) {\n            <div class=\"invalid-feedback d-block\">\n              {{ errorMsg }}\n            </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n\n    @if (showButtons()) {\n      <div bsRow class=\"mt-4\">\n        <div [md]=\"4\"></div>\n        <div [md]=\"8\" class=\"d-flex justify-content-end gap-2\">\n          <button type=\"button\" [color]=\"colors.secondary\" (click)=\"onCancel()\" [disabled]=\"isSaving()\">{{ 'common.cancel' | t }}</button>\n          <button type=\"submit\" [color]=\"colors.primary\" [disabled]=\"isSaving()\" (click)=\"onSave()\">\n            @if (isSaving()) {\n              <bs-spinner class=\"me-1\" />\n            }\n            {{ 'common.save' | t }}\n          </button>\n        </div>\n      </div>\n    }\n  </bs-grid>\n}\n\n<!-- Modal for editing AsDetail objects -->\n<bs-modal [isOpen]=\"showAsDetailModal()\" (isOpenChange)=\"!$event && closeAsDetailModal()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.edit' | t }} {{ editingAsDetailAttr()?.label | resolveTranslation:editingAsDetailAttr()?.name }}</h5>\n    </div>\n\n    @if (editingAsDetailAttr(); as attr) {\n      <div bsModalBody>\n        <spark-po-form\n          [entityType]=\"attr | asDetailType:asDetailTypes()\"\n          [(formData)]=\"asDetailFormData\"\n          [parentId]=\"parentId()\"\n          [parentType]=\"parentType()\"\n          [triggerPathPrefix]=\"attr.isArray ? null : attr.name\"\n          (nestedTriggerRequested)=\"onEmbeddedTrigger(attr.name, $event)\"\n          (nestedTriggerBlurred)=\"onEmbeddedTriggerBlur($event)\">\n        </spark-po-form>\n      </div>\n    }\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeAsDetailModal()\">{{ 'common.cancel' | t }}</button>\n      <button type=\"button\" [color]=\"colors.primary\" (click)=\"saveAsDetailObject()\">{{ 'common.save' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n</bs-form>\n",
+		template: "<bs-form>\n  @if (entityType()) {\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"tabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n    <ng-template #tabContent let-tab>\n      @if (tab.id === '__default__') {\n        @if (ungroupedAttributes().length > 0) {\n          <bs-card class=\"d-block m-3\">\n            <div class=\"p-3\">\n              @for (attr of ungroupedAttributes(); track attr.id) {\n                <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n              }\n            </div>\n          </bs-card>\n        }\n      }\n      @for (group of groupsForTab(tab); track group.id) {\n        @if (attrsForGroup(group); as groupAttrs) {\n          @if (groupAttrs.length > 0) {\n            <bs-card class=\"d-block m-3\">\n              @if (group.label) {\n                <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n              }\n              <div class=\"p-3\">\n                @for (attr of groupAttrs; track attr.id) {\n                  <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n                }\n              </div>\n            </bs-card>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-template #attrField let-attr>\n      <div bsRow class=\"mb-3\">\n        <label [md]=\"4\" bsColFormLabel [for]=\"attr.name\">\n          {{ attr.label | resolveTranslation:attr.name }}\n          @if (attr.isRequired) {\n            <span class=\"text-danger\">*</span>\n          }\n          <spark-attribute-description [description]=\"attr.description\" />\n        </label>\n        <div [md]=\"8\">\n          <!-- A lookup wins over the raw data type. `[LookupReference]` does not change dataType —\n               only `[Reference]` does — so a lookup-backed bool still reports 'boolean' here. Tested\n               first, this branch swallowed it into a two-state checkbox and the select below was\n               unreachable, which made a declared lookup silently do nothing. -->\n          @if (attr.dataType === 'boolean' && !attr.lookupReferenceType) {\n            <bs-checkbox\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\">\n            </bs-checkbox>\n          } @else if (attr.lookupReferenceType) {\n            @if ((attr | lookupDisplayType:lookupReferenceOptions()) === ELookupDisplayType.Modal) {\n              <spark-lookup-picker\n                [value]=\"formData()[attr.name]\"\n                [options]=\"getLookupOptions(attr)\"\n                [inputId]=\"attr.name\"\n                [title]=\"attr.label | resolveTranslation:attr.name\"\n                [isInvalid]=\"hasError(attr.name)\"\n                (valueChange)=\"onLookupValueChange(attr, $event)\">\n              </spark-lookup-picker>\n            } @else {\n              <bs-select\n                class=\"w-100\"\n                [ngModel]=\"formData()[attr.name]\"\n                (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n                [id]=\"attr.name\"\n                [class.is-invalid]=\"hasError(attr.name)\">\n                <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                @for (option of (attr | lookupOptions:lookupReferenceOptions()); track option.key) {\n                  <option [ngValue]=\"option.key\">\n                    {{ option.values | resolveTranslation:option.key }}\n                  </option>\n                }\n              </bs-select>\n            }\n          } @else if (attr.dataType === 'Reference' && attr.isArray) {\n            <bs-tree-select\n              mode=\"multiple\"\n              variant=\"textbox\"\n              [showClear]=\"true\"\n              [placeholder]=\"'common.search' | t\"\n              [provider]=\"getReferenceProvider(attr)\"\n              [ngModel]=\"referenceTreeValues()[attr.name] || []\"\n              (ngModelChange)=\"onReferenceTreeChange(attr, $event)\"\n              [ngModelOptions]=\"{ standalone: true }\">\n            </bs-tree-select>\n          } @else if (attr.dataType === 'Reference') {\n            <spark-reference-picker\n              [value]=\"formData()[attr.name]\"\n              [options]=\"referenceOptions()[attr.name] || []\"\n              [referenceType]=\"attr.referenceType\"\n              [inputId]=\"attr.name\"\n              [title]=\"attr.label | resolveTranslation:attr.name\"\n              [isInvalid]=\"hasError(attr.name)\"\n              (valueChange)=\"onReferenceValueChange(attr, $event)\">\n            </spark-reference-picker>\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray && attr.editMode === 'inline') {\n            <!-- One source of truth for an inline cell, reused by the row and by the drag\n                 preview. The preview is a live Angular view (not a cloneNode), so its\n                 <bs-select> binds to row[col.name] and shows the value while dragging. -->\n            <ng-template #inlineDetailCell let-row=\"row\" let-col=\"col\" let-attr=\"attr\" let-rowIndex=\"rowIndex\" let-rowRenderer=\"rowRenderer\">\n              <td>\n                <!-- A row the caller may not edit renders through the same read-only span as a\n                     read-only column: still fully readable, just not editable. Hiding it would\n                     hide the data, and the save path would silently restore any edit anyway. -->\n                @if (col.isReadOnly || !(attr | canEditDetailRow:asDetailPermissions())) {\n                  <span class=\"text-muted\">{{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}</span>\n                } @else if (getAsDetailCellEditRenderer(col); as editRenderer) {\n                  <ng-container *ngComponentOutlet=\"editRenderer; inputs: getAsDetailCellEditRendererInputs(editRenderer, row, col)\"></ng-container>\n                } @else if (col.dataType === 'AsDetail') {\n                  <!-- Nested AsDetail can't flatten into a row: escalate to the row modal,\n                       where the recursive spark-po-form renders the nested structure. -->\n                  <div class=\"d-flex align-items-center gap-1\">\n                    <span class=\"text-truncate flex-grow-1\">{{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}</span>\n                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"editArrayItem(attr, rowIndex)\">\n                      <spark-icon name=\"pencil\" />\n                    </button>\n                  </div>\n                } @else if (col.dataType === 'boolean' && !col.lookupReferenceType) {\n                  <!-- Same precedence as the top-level chain above: a lookup-backed column must\n                       reach its select rather than being swallowed by the checkbox. -->\n                  <bs-checkbox\n                    [(ngModel)]=\"row[col.name]\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\">\n                  </bs-checkbox>\n                } @else if (col.dataType === 'Reference' && col.query) {\n                  @if (col.referenceDisplayType === EReferenceDisplayType.Modal) {\n                    <spark-reference-picker\n                      [value]=\"row[col.name]\"\n                      [options]=\"(attr | inlineRefOptions:col:asDetailReferenceOptions())\"\n                      [referenceType]=\"col.referenceType\"\n                      [title]=\"col.label | resolveTranslation:col.name\"\n                      [isInvalid]=\"hasInlineError(attr, rowIndex, col)\"\n                      (valueChange)=\"row[col.name] = $event; onInlineCellChange(attr, rowIndex, col)\">\n                    </spark-reference-picker>\n                  } @else {\n                    <bs-select\n                      class=\"w-100\"\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                      [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\">\n                      <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                      @for (option of (attr | inlineRefOptions:col:asDetailReferenceOptions()); track option.id) {\n                        <option [ngValue]=\"option.id\">\n                          {{ option.breadcrumb || option.id }}\n                        </option>\n                      }\n                    </bs-select>\n                  }\n                } @else if (col.lookupReferenceType) {\n                  @if ((col | lookupDisplayType:lookupReferenceOptions()) === ELookupDisplayType.Modal) {\n                    <spark-lookup-picker\n                      [value]=\"row[col.name]\"\n                      [options]=\"getLookupOptions(col)\"\n                      [title]=\"col.label | resolveTranslation:col.name\"\n                      [isInvalid]=\"hasInlineError(attr, rowIndex, col)\"\n                      (valueChange)=\"row[col.name] = $event; onInlineCellChange(attr, rowIndex, col)\">\n                    </spark-lookup-picker>\n                  } @else {\n                    <bs-select\n                      class=\"w-100\"\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                      [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\">\n                      <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                      @for (option of getLookupOptions(col); track option.key) {\n                        <option [ngValue]=\"option.key\">\n                          {{ option.values | resolveTranslation:option.key }}\n                        </option>\n                      }\n                    </bs-select>\n                  }\n                } @else if (col.dataType === 'MultiLineString') {\n                  <textarea\n                    [(ngModel)]=\"row[col.name]\"\n                    [required]=\"col.isRequired\"\n                    rows=\"3\"\n                    [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                    (blur)=\"onInlineCellBlur(attr, rowIndex, col)\"></textarea>\n                } @else {\n                  <input\n                    [type]=\"col.dataType | inputType\"\n                    [(ngModel)]=\"row[col.name]\"\n                    [required]=\"col.isRequired\"\n                    [step]=\"col.dataType === 'decimal' ? '0.01' : '1'\"\n                    [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                    (blur)=\"onInlineCellBlur(attr, rowIndex, col)\">\n                }\n                @if (inlineErrorMessage(attr, rowIndex, col); as errorMsg) {\n                  <div class=\"invalid-feedback d-block\">{{ errorMsg }}</div>\n                }\n                <!-- Passed for the first cell only: a row renderer (rowComponent) draws its\n                     attributes once per row, under that cell, instead of as columns. -->\n                @if (rowRenderer) {\n                  <div class=\"spark-row-renderer\">\n                    <ng-container *ngComponentOutlet=\"rowRenderer.component; inputs: getRowRendererInputs(rowRenderer, row)\"></ng-container>\n                  </div>\n                }\n              </td>\n            </ng-template>\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\n                  @if (attr.isSortable) {\n                    <th style=\"width: 32px\"></th>\n                  }\n                  @for (col of (attr | asDetailColumns:asDetailTypes():rendererRegistry); track col.name) {\n                    <th>{{ col.label | resolveTranslation:col.name }}<spark-attribute-description [description]=\"col.description\" /></th>\n                  }\n                  <th style=\"width: 50px\"></th>\n                </tr>\n              </thead>\n              @let inlineRowRenderer = (attr | asDetailRowRenderer:asDetailTypes():rendererRegistry);\n              <tbody class=\"align-middle\" cdkDropList [cdkDropListDisabled]=\"!attr.isSortable\" (cdkDropListDropped)=\"onAsDetailReorder(attr, $event)\">\n                @for (row of formData()[attr.name] || []; track $index; let rowIndex = $index) {\n                  <tr cdkDrag [cdkDragDisabled]=\"!attr.isSortable\">\n                    @if (attr.isSortable) {\n                      <td class=\"text-center text-muted\" style=\"cursor: move; touch-action: none\" cdkDragHandle>\n                        <spark-icon name=\"grip-vertical\" />\n                      </td>\n                    }\n                    @for (col of (attr | asDetailColumns:asDetailTypes():rendererRegistry); track col.name; let firstCol = $first) {\n                      <ng-container *ngTemplateOutlet=\"inlineDetailCell; context: { row: row, col: col, attr: attr, rowIndex: rowIndex, rowRenderer: firstCol ? inlineRowRenderer : null }\"></ng-container>\n                    }\n                    <td class=\"text-nowrap\">\n                      @if (attr | canDeleteDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" [color]=\"colors.secondary\" (click)=\"removeArrayItem(attr, rowIndex)\">\n                          <spark-icon name=\"trash\" />\n                        </button>\n                      }\n                    </td>\n\n                    <!-- Floating preview = a LIVE view of the row's cells (not CDK's cloneNode),\n                         so <bs-select> shows its value instead of blanking. The in-grid\n                         placeholder still uses CDK's default clone (exact row height) and is\n                         hidden via .cdk-drag-placeholder { visibility:hidden } in the styles,\n                         so the drop gap is blank without collapsing/shifting the other rows. -->\n                    <ng-template cdkDragPreview>\n                      <table class=\"table mb-0 bg-body shadow-sm spark-drag-preview\">\n                        <tbody class=\"align-middle\">\n                          <tr>\n                            @if (attr.isSortable) {\n                              <td class=\"text-center text-muted\" style=\"width: 32px\"><spark-icon name=\"grip-vertical\" /></td>\n                            }\n                            @for (col of (attr | asDetailColumns:asDetailTypes():rendererRegistry); track col.name) {\n                              <ng-container *ngTemplateOutlet=\"inlineDetailCell; context: { row: row, col: col, attr: attr, rowIndex: rowIndex }\"></ng-container>\n                            }\n                          </tr>\n                        </tbody>\n                      </table>\n                    </ng-template>\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes():rendererRegistry).length + (attr.isSortable ? 2 : 1)\" class=\"text-center text-muted\">\n                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @for (err of rowLifecycleErrorsFor(attr.name); track $index) {\n              <div class=\"text-danger small mt-1\">{{ err.errorMessage | resolveTranslation }}</div>\n            }\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addInlineRow(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\n                  @if (attr.isSortable) {\n                    <th style=\"width: 32px\"></th>\n                  }\n                  @for (col of (attr | asDetailColumns:asDetailTypes():rendererRegistry); track col.name) {\n                    <th>{{ col.label | resolveTranslation:col.name }}<spark-attribute-description [description]=\"col.description\" /></th>\n                  }\n                  <th style=\"width: 80px\"></th>\n                </tr>\n              </thead>\n              <tbody class=\"align-middle\" cdkDropList [cdkDropListDisabled]=\"!attr.isSortable\" (cdkDropListDropped)=\"onAsDetailReorder(attr, $event)\">\n                @let modalRowRenderer = (attr | asDetailRowRenderer:asDetailTypes():rendererRegistry);\n                @for (row of formData()[attr.name] || []; track $index) {\n                  <tr cdkDrag [cdkDragDisabled]=\"!attr.isSortable\">\n                    @if (attr.isSortable) {\n                      <td class=\"text-center text-muted\" style=\"cursor: move; touch-action: none\" cdkDragHandle>\n                        <spark-icon name=\"grip-vertical\" />\n                      </td>\n                    }\n                    @for (col of (attr | asDetailColumns:asDetailTypes():rendererRegistry); track col.name; let firstCol = $first) {\n                      <td>\n                        @if (getAsDetailCellRendererComponent(col); as cellRenderer) {\n                          <ng-container *ngComponentOutlet=\"cellRenderer; inputs: getAsDetailCellRendererInputs(cellRenderer, row, col)\"></ng-container>\n                        } @else {\n                          {{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}\n                        }\n                        @if (firstCol && modalRowRenderer) {\n                          <div class=\"spark-row-renderer\">\n                            <ng-container *ngComponentOutlet=\"modalRowRenderer.component; inputs: getRowRendererInputs(modalRowRenderer, row)\"></ng-container>\n                          </div>\n                        }\n                      </td>\n                    }\n                    <td class=\"text-nowrap\">\n                      @if (attr | canEditDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary me-1\" (click)=\"editArrayItem(attr, $index)\">\n                          <spark-icon name=\"pencil\" />\n                        </button>\n                      }\n                      @if (attr | canDeleteDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeArrayItem(attr, $index)\">\n                          <spark-icon name=\"trash\" />\n                        </button>\n                      }\n                    </td>\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes():rendererRegistry).length + (attr.isSortable ? 2 : 1)\" class=\"text-center text-muted\">\n                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @for (err of rowLifecycleErrorsFor(attr.name); track $index) {\n              <div class=\"text-danger small mt-1\">{{ err.errorMessage | resolveTranslation }}</div>\n            }\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addArrayItem(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail') {\n            <bs-input-group>\n              <input\n                type=\"text\"\n                [id]=\"attr.name\"\n                [value]=\"attr | asDetailDisplayValue:formData():asDetailTypes()\"\n                readonly\n                [class.is-invalid]=\"hasError(attr.name)\">\n              <button\n                type=\"button\"\n                bsInputGroupBtn\n                [color]=\"colors.secondary\"\n                (click)=\"openAsDetailEditor(attr)\">\n                <spark-icon name=\"pencil\" />\n              </button>\n            </bs-input-group>\n          } @else if (getEditRendererComponent(attr); as editComp) {\n            <ng-container *ngComponentOutlet=\"editComp; inputs: getEditRendererInputs(editComp, attr)\"></ng-container>\n          } @else if (attr.dataType === 'MultiLineString') {\n            <textarea\n              [id]=\"attr.name\"\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n              (blur)=\"onFieldBlur(attr)\"\n              [name]=\"attr.name\"\n              [required]=\"attr.isRequired\"\n              rows=\"6\"\n              [class.is-invalid]=\"hasError(attr.name)\"></textarea>\n          } @else {\n            <input\n              [type]=\"attr.dataType | inputType\"\n              [id]=\"attr.name\"\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n              (blur)=\"onFieldBlur(attr)\"\n              [name]=\"attr.name\"\n              [required]=\"attr.isRequired\"\n              [step]=\"attr.dataType === 'decimal' ? '0.01' : '1'\"\n              [class.is-invalid]=\"hasError(attr.name)\">\n          }\n          @if (attr.name | errorForAttribute:validationErrors(); as errorMsg) {\n            <div class=\"invalid-feedback d-block\">\n              {{ errorMsg }}\n            </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n\n    @if (showButtons()) {\n      <div bsRow class=\"mt-4\">\n        <div [md]=\"4\"></div>\n        <div [md]=\"8\" class=\"d-flex justify-content-end gap-2\">\n          <button type=\"button\" [color]=\"colors.secondary\" (click)=\"onCancel()\" [disabled]=\"isSaving()\">{{ 'common.cancel' | t }}</button>\n          <button type=\"submit\" [color]=\"colors.primary\" [disabled]=\"isSaving()\" (click)=\"onSave()\">\n            @if (isSaving()) {\n              <bs-spinner class=\"me-1\" />\n            }\n            {{ 'common.save' | t }}\n          </button>\n        </div>\n      </div>\n    }\n  </bs-grid>\n}\n\n<!-- Modal for editing AsDetail objects -->\n<bs-modal [isOpen]=\"showAsDetailModal()\" (isOpenChange)=\"!$event && closeAsDetailModal()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.edit' | t }} {{ editingAsDetailAttr()?.label | resolveTranslation:editingAsDetailAttr()?.name }}</h5>\n    </div>\n\n    @if (editingAsDetailAttr(); as attr) {\n      <div bsModalBody>\n        <spark-po-form\n          [entityType]=\"attr | asDetailType:asDetailTypes()\"\n          [(formData)]=\"asDetailFormData\"\n          [parentId]=\"parentId()\"\n          [parentType]=\"parentType()\"\n          [triggerPathPrefix]=\"attr.isArray ? null : attr.name\"\n          (nestedTriggerRequested)=\"onEmbeddedTrigger(attr.name, $event)\"\n          (nestedTriggerBlurred)=\"onEmbeddedTriggerBlur($event)\">\n        </spark-po-form>\n      </div>\n    }\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeAsDetailModal()\">{{ 'common.cancel' | t }}</button>\n      <button type=\"button\" [color]=\"colors.primary\" (click)=\"saveAsDetailObject()\">{{ 'common.save' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n</bs-form>\n",
 		styles: [":host ::ng-deep .cdk-drag-placeholder{visibility:hidden}\n"],
 		dependencies: [
 			{
@@ -1969,6 +2021,11 @@ var SparkPoFormComponent = class SparkPoFormComponent {
 				type: AsDetailColumnsPipe,
 				name: "asDetailColumns"
 			},
+			{
+				kind: "pipe",
+				type: AsDetailRowRendererPipe,
+				name: "asDetailRowRenderer"
+			},
 			{
 				kind: "pipe",
 				type: AsDetailCellValuePipe,
@@ -2058,6 +2115,7 @@ i0.ɵɵngDeclareClassMetadata({
 				AsDetailDisplayValuePipe,
 				AsDetailTypePipe,
 				AsDetailColumnsPipe,
+				AsDetailRowRendererPipe,
 				AsDetailCellValuePipe,
 				CanCreateDetailRowPipe,
 				CanDeleteDetailRowPipe,
@@ -2067,7 +2125,7 @@ i0.ɵɵngDeclareClassMetadata({
 				SparkAttributeDescriptionComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<bs-form>\n  @if (entityType()) {\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"tabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n    <ng-template #tabContent let-tab>\n      @if (tab.id === '__default__') {\n        @if (ungroupedAttributes().length > 0) {\n          <bs-card class=\"d-block m-3\">\n            <div class=\"p-3\">\n              @for (attr of ungroupedAttributes(); track attr.id) {\n                <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n              }\n            </div>\n          </bs-card>\n        }\n      }\n      @for (group of groupsForTab(tab); track group.id) {\n        @if (attrsForGroup(group); as groupAttrs) {\n          @if (groupAttrs.length > 0) {\n            <bs-card class=\"d-block m-3\">\n              @if (group.label) {\n                <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n              }\n              <div class=\"p-3\">\n                @for (attr of groupAttrs; track attr.id) {\n                  <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n                }\n              </div>\n            </bs-card>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-template #attrField let-attr>\n      <div bsRow class=\"mb-3\">\n        <label [md]=\"4\" bsColFormLabel [for]=\"attr.name\">\n          {{ attr.label | resolveTranslation:attr.name }}\n          @if (attr.isRequired) {\n            <span class=\"text-danger\">*</span>\n          }\n          <spark-attribute-description [description]=\"attr.description\" />\n        </label>\n        <div [md]=\"8\">\n          <!-- A lookup wins over the raw data type. `[LookupReference]` does not change dataType —\n               only `[Reference]` does — so a lookup-backed bool still reports 'boolean' here. Tested\n               first, this branch swallowed it into a two-state checkbox and the select below was\n               unreachable, which made a declared lookup silently do nothing. -->\n          @if (attr.dataType === 'boolean' && !attr.lookupReferenceType) {\n            <bs-checkbox\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\">\n            </bs-checkbox>\n          } @else if (attr.lookupReferenceType) {\n            @if ((attr | lookupDisplayType:lookupReferenceOptions()) === ELookupDisplayType.Modal) {\n              <spark-lookup-picker\n                [value]=\"formData()[attr.name]\"\n                [options]=\"getLookupOptions(attr)\"\n                [inputId]=\"attr.name\"\n                [title]=\"attr.label | resolveTranslation:attr.name\"\n                [isInvalid]=\"hasError(attr.name)\"\n                (valueChange)=\"onLookupValueChange(attr, $event)\">\n              </spark-lookup-picker>\n            } @else {\n              <bs-select\n                class=\"w-100\"\n                [ngModel]=\"formData()[attr.name]\"\n                (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n                [id]=\"attr.name\"\n                [class.is-invalid]=\"hasError(attr.name)\">\n                <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                @for (option of (attr | lookupOptions:lookupReferenceOptions()); track option.key) {\n                  <option [ngValue]=\"option.key\">\n                    {{ option.values | resolveTranslation:option.key }}\n                  </option>\n                }\n              </bs-select>\n            }\n          } @else if (attr.dataType === 'Reference' && attr.isArray) {\n            <bs-tree-select\n              mode=\"multiple\"\n              variant=\"textbox\"\n              [showClear]=\"true\"\n              [placeholder]=\"'common.search' | t\"\n              [provider]=\"getReferenceProvider(attr)\"\n              [ngModel]=\"referenceTreeValues()[attr.name] || []\"\n              (ngModelChange)=\"onReferenceTreeChange(attr, $event)\"\n              [ngModelOptions]=\"{ standalone: true }\">\n            </bs-tree-select>\n          } @else if (attr.dataType === 'Reference') {\n            <spark-reference-picker\n              [value]=\"formData()[attr.name]\"\n              [options]=\"referenceOptions()[attr.name] || []\"\n              [referenceType]=\"attr.referenceType\"\n              [inputId]=\"attr.name\"\n              [title]=\"attr.label | resolveTranslation:attr.name\"\n              [isInvalid]=\"hasError(attr.name)\"\n              (valueChange)=\"onReferenceValueChange(attr, $event)\">\n            </spark-reference-picker>\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray && attr.editMode === 'inline') {\n            <!-- One source of truth for an inline cell, reused by the row and by the drag\n                 preview. The preview is a live Angular view (not a cloneNode), so its\n                 <bs-select> binds to row[col.name] and shows the value while dragging. -->\n            <ng-template #inlineDetailCell let-row=\"row\" let-col=\"col\" let-attr=\"attr\" let-rowIndex=\"rowIndex\">\n              <td>\n                <!-- A row the caller may not edit renders through the same read-only span as a\n                     read-only column: still fully readable, just not editable. Hiding it would\n                     hide the data, and the save path would silently restore any edit anyway. -->\n                @if (col.isReadOnly || !(attr | canEditDetailRow:asDetailPermissions())) {\n                  <span class=\"text-muted\">{{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}</span>\n                } @else if (getAsDetailCellEditRenderer(col); as editRenderer) {\n                  <ng-container *ngComponentOutlet=\"editRenderer; inputs: getAsDetailCellEditRendererInputs(editRenderer, row, col)\"></ng-container>\n                } @else if (col.dataType === 'AsDetail') {\n                  <!-- Nested AsDetail can't flatten into a row: escalate to the row modal,\n                       where the recursive spark-po-form renders the nested structure. -->\n                  <div class=\"d-flex align-items-center gap-1\">\n                    <span class=\"text-truncate flex-grow-1\">{{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}</span>\n                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"editArrayItem(attr, rowIndex)\">\n                      <spark-icon name=\"pencil\" />\n                    </button>\n                  </div>\n                } @else if (col.dataType === 'boolean' && !col.lookupReferenceType) {\n                  <!-- Same precedence as the top-level chain above: a lookup-backed column must\n                       reach its select rather than being swallowed by the checkbox. -->\n                  <bs-checkbox\n                    [(ngModel)]=\"row[col.name]\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\">\n                  </bs-checkbox>\n                } @else if (col.dataType === 'Reference' && col.query) {\n                  @if (col.referenceDisplayType === EReferenceDisplayType.Modal) {\n                    <spark-reference-picker\n                      [value]=\"row[col.name]\"\n                      [options]=\"(attr | inlineRefOptions:col:asDetailReferenceOptions())\"\n                      [referenceType]=\"col.referenceType\"\n                      [title]=\"col.label | resolveTranslation:col.name\"\n                      [isInvalid]=\"hasInlineError(attr, rowIndex, col)\"\n                      (valueChange)=\"row[col.name] = $event; onInlineCellChange(attr, rowIndex, col)\">\n                    </spark-reference-picker>\n                  } @else {\n                    <bs-select\n                      class=\"w-100\"\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                      [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\">\n                      <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                      @for (option of (attr | inlineRefOptions:col:asDetailReferenceOptions()); track option.id) {\n                        <option [ngValue]=\"option.id\">\n                          {{ option.breadcrumb || option.id }}\n                        </option>\n                      }\n                    </bs-select>\n                  }\n                } @else if (col.lookupReferenceType) {\n                  @if ((col | lookupDisplayType:lookupReferenceOptions()) === ELookupDisplayType.Modal) {\n                    <spark-lookup-picker\n                      [value]=\"row[col.name]\"\n                      [options]=\"getLookupOptions(col)\"\n                      [title]=\"col.label | resolveTranslation:col.name\"\n                      [isInvalid]=\"hasInlineError(attr, rowIndex, col)\"\n                      (valueChange)=\"row[col.name] = $event; onInlineCellChange(attr, rowIndex, col)\">\n                    </spark-lookup-picker>\n                  } @else {\n                    <bs-select\n                      class=\"w-100\"\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                      [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\">\n                      <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                      @for (option of getLookupOptions(col); track option.key) {\n                        <option [ngValue]=\"option.key\">\n                          {{ option.values | resolveTranslation:option.key }}\n                        </option>\n                      }\n                    </bs-select>\n                  }\n                } @else if (col.dataType === 'MultiLineString') {\n                  <textarea\n                    [(ngModel)]=\"row[col.name]\"\n                    [required]=\"col.isRequired\"\n                    rows=\"3\"\n                    [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                    (blur)=\"onInlineCellBlur(attr, rowIndex, col)\"></textarea>\n                } @else {\n                  <input\n                    [type]=\"col.dataType | inputType\"\n                    [(ngModel)]=\"row[col.name]\"\n                    [required]=\"col.isRequired\"\n                    [step]=\"col.dataType === 'decimal' ? '0.01' : '1'\"\n                    [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                    (blur)=\"onInlineCellBlur(attr, rowIndex, col)\">\n                }\n                @if (inlineErrorMessage(attr, rowIndex, col); as errorMsg) {\n                  <div class=\"invalid-feedback d-block\">{{ errorMsg }}</div>\n                }\n              </td>\n            </ng-template>\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\n                  @if (attr.isSortable) {\n                    <th style=\"width: 32px\"></th>\n                  }\n                  @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                    <th>{{ col.label | resolveTranslation:col.name }}<spark-attribute-description [description]=\"col.description\" /></th>\n                  }\n                  <th style=\"width: 50px\"></th>\n                </tr>\n              </thead>\n              <tbody class=\"align-middle\" cdkDropList [cdkDropListDisabled]=\"!attr.isSortable\" (cdkDropListDropped)=\"onAsDetailReorder(attr, $event)\">\n                @for (row of formData()[attr.name] || []; track $index; let rowIndex = $index) {\n                  <tr cdkDrag [cdkDragDisabled]=\"!attr.isSortable\">\n                    @if (attr.isSortable) {\n                      <td class=\"text-center text-muted\" style=\"cursor: move; touch-action: none\" cdkDragHandle>\n                        <spark-icon name=\"grip-vertical\" />\n                      </td>\n                    }\n                    @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                      <ng-container *ngTemplateOutlet=\"inlineDetailCell; context: { row: row, col: col, attr: attr, rowIndex: rowIndex }\"></ng-container>\n                    }\n                    <td class=\"text-nowrap\">\n                      @if (attr | canDeleteDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" [color]=\"colors.secondary\" (click)=\"removeArrayItem(attr, rowIndex)\">\n                          <spark-icon name=\"trash\" />\n                        </button>\n                      }\n                    </td>\n\n                    <!-- Floating preview = a LIVE view of the row's cells (not CDK's cloneNode),\n                         so <bs-select> shows its value instead of blanking. The in-grid\n                         placeholder still uses CDK's default clone (exact row height) and is\n                         hidden via .cdk-drag-placeholder { visibility:hidden } in the styles,\n                         so the drop gap is blank without collapsing/shifting the other rows. -->\n                    <ng-template cdkDragPreview>\n                      <table class=\"table mb-0 bg-body shadow-sm spark-drag-preview\">\n                        <tbody class=\"align-middle\">\n                          <tr>\n                            @if (attr.isSortable) {\n                              <td class=\"text-center text-muted\" style=\"width: 32px\"><spark-icon name=\"grip-vertical\" /></td>\n                            }\n                            @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                              <ng-container *ngTemplateOutlet=\"inlineDetailCell; context: { row: row, col: col, attr: attr, rowIndex: rowIndex }\"></ng-container>\n                            }\n                          </tr>\n                        </tbody>\n                      </table>\n                    </ng-template>\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length + (attr.isSortable ? 2 : 1)\" class=\"text-center text-muted\">\n                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @for (err of rowLifecycleErrorsFor(attr.name); track $index) {\n              <div class=\"text-danger small mt-1\">{{ err.errorMessage | resolveTranslation }}</div>\n            }\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addInlineRow(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\n                  @if (attr.isSortable) {\n                    <th style=\"width: 32px\"></th>\n                  }\n                  @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                    <th>{{ col.label | resolveTranslation:col.name }}<spark-attribute-description [description]=\"col.description\" /></th>\n                  }\n                  <th style=\"width: 80px\"></th>\n                </tr>\n              </thead>\n              <tbody class=\"align-middle\" cdkDropList [cdkDropListDisabled]=\"!attr.isSortable\" (cdkDropListDropped)=\"onAsDetailReorder(attr, $event)\">\n                @for (row of formData()[attr.name] || []; track $index) {\n                  <tr cdkDrag [cdkDragDisabled]=\"!attr.isSortable\">\n                    @if (attr.isSortable) {\n                      <td class=\"text-center text-muted\" style=\"cursor: move; touch-action: none\" cdkDragHandle>\n                        <spark-icon name=\"grip-vertical\" />\n                      </td>\n                    }\n                    @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                      <td>\n                        @if (getAsDetailCellRendererComponent(col); as cellRenderer) {\n                          <ng-container *ngComponentOutlet=\"cellRenderer; inputs: getAsDetailCellRendererInputs(cellRenderer, row, col)\"></ng-container>\n                        } @else {\n                          {{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}\n                        }\n                      </td>\n                    }\n                    <td class=\"text-nowrap\">\n                      @if (attr | canEditDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary me-1\" (click)=\"editArrayItem(attr, $index)\">\n                          <spark-icon name=\"pencil\" />\n                        </button>\n                      }\n                      @if (attr | canDeleteDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeArrayItem(attr, $index)\">\n                          <spark-icon name=\"trash\" />\n                        </button>\n                      }\n                    </td>\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length + (attr.isSortable ? 2 : 1)\" class=\"text-center text-muted\">\n                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @for (err of rowLifecycleErrorsFor(attr.name); track $index) {\n              <div class=\"text-danger small mt-1\">{{ err.errorMessage | resolveTranslation }}</div>\n            }\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addArrayItem(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail') {\n            <bs-input-group>\n              <input\n                type=\"text\"\n                [id]=\"attr.name\"\n                [value]=\"attr | asDetailDisplayValue:formData():asDetailTypes()\"\n                readonly\n                [class.is-invalid]=\"hasError(attr.name)\">\n              <button\n                type=\"button\"\n                bsInputGroupBtn\n                [color]=\"colors.secondary\"\n                (click)=\"openAsDetailEditor(attr)\">\n                <spark-icon name=\"pencil\" />\n              </button>\n            </bs-input-group>\n          } @else if (getEditRendererComponent(attr); as editComp) {\n            <ng-container *ngComponentOutlet=\"editComp; inputs: getEditRendererInputs(editComp, attr)\"></ng-container>\n          } @else if (attr.dataType === 'MultiLineString') {\n            <textarea\n              [id]=\"attr.name\"\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n              (blur)=\"onFieldBlur(attr)\"\n              [name]=\"attr.name\"\n              [required]=\"attr.isRequired\"\n              rows=\"6\"\n              [class.is-invalid]=\"hasError(attr.name)\"></textarea>\n          } @else {\n            <input\n              [type]=\"attr.dataType | inputType\"\n              [id]=\"attr.name\"\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n              (blur)=\"onFieldBlur(attr)\"\n              [name]=\"attr.name\"\n              [required]=\"attr.isRequired\"\n              [step]=\"attr.dataType === 'decimal' ? '0.01' : '1'\"\n              [class.is-invalid]=\"hasError(attr.name)\">\n          }\n          @if (attr.name | errorForAttribute:validationErrors(); as errorMsg) {\n            <div class=\"invalid-feedback d-block\">\n              {{ errorMsg }}\n            </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n\n    @if (showButtons()) {\n      <div bsRow class=\"mt-4\">\n        <div [md]=\"4\"></div>\n        <div [md]=\"8\" class=\"d-flex justify-content-end gap-2\">\n          <button type=\"button\" [color]=\"colors.secondary\" (click)=\"onCancel()\" [disabled]=\"isSaving()\">{{ 'common.cancel' | t }}</button>\n          <button type=\"submit\" [color]=\"colors.primary\" [disabled]=\"isSaving()\" (click)=\"onSave()\">\n            @if (isSaving()) {\n              <bs-spinner class=\"me-1\" />\n            }\n            {{ 'common.save' | t }}\n          </button>\n        </div>\n      </div>\n    }\n  </bs-grid>\n}\n\n<!-- Modal for editing AsDetail objects -->\n<bs-modal [isOpen]=\"showAsDetailModal()\" (isOpenChange)=\"!$event && closeAsDetailModal()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.edit' | t }} {{ editingAsDetailAttr()?.label | resolveTranslation:editingAsDetailAttr()?.name }}</h5>\n    </div>\n\n    @if (editingAsDetailAttr(); as attr) {\n      <div bsModalBody>\n        <spark-po-form\n          [entityType]=\"attr | asDetailType:asDetailTypes()\"\n          [(formData)]=\"asDetailFormData\"\n          [parentId]=\"parentId()\"\n          [parentType]=\"parentType()\"\n          [triggerPathPrefix]=\"attr.isArray ? null : attr.name\"\n          (nestedTriggerRequested)=\"onEmbeddedTrigger(attr.name, $event)\"\n          (nestedTriggerBlurred)=\"onEmbeddedTriggerBlur($event)\">\n        </spark-po-form>\n      </div>\n    }\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeAsDetailModal()\">{{ 'common.cancel' | t }}</button>\n      <button type=\"button\" [color]=\"colors.primary\" (click)=\"saveAsDetailObject()\">{{ 'common.save' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n</bs-form>\n",
+			template: "<bs-form>\n  @if (entityType()) {\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"tabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n    <ng-template #tabContent let-tab>\n      @if (tab.id === '__default__') {\n        @if (ungroupedAttributes().length > 0) {\n          <bs-card class=\"d-block m-3\">\n            <div class=\"p-3\">\n              @for (attr of ungroupedAttributes(); track attr.id) {\n                <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n              }\n            </div>\n          </bs-card>\n        }\n      }\n      @for (group of groupsForTab(tab); track group.id) {\n        @if (attrsForGroup(group); as groupAttrs) {\n          @if (groupAttrs.length > 0) {\n            <bs-card class=\"d-block m-3\">\n              @if (group.label) {\n                <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n              }\n              <div class=\"p-3\">\n                @for (attr of groupAttrs; track attr.id) {\n                  <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n                }\n              </div>\n            </bs-card>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-template #attrField let-attr>\n      <div bsRow class=\"mb-3\">\n        <label [md]=\"4\" bsColFormLabel [for]=\"attr.name\">\n          {{ attr.label | resolveTranslation:attr.name }}\n          @if (attr.isRequired) {\n            <span class=\"text-danger\">*</span>\n          }\n          <spark-attribute-description [description]=\"attr.description\" />\n        </label>\n        <div [md]=\"8\">\n          <!-- A lookup wins over the raw data type. `[LookupReference]` does not change dataType —\n               only `[Reference]` does — so a lookup-backed bool still reports 'boolean' here. Tested\n               first, this branch swallowed it into a two-state checkbox and the select below was\n               unreachable, which made a declared lookup silently do nothing. -->\n          @if (attr.dataType === 'boolean' && !attr.lookupReferenceType) {\n            <bs-checkbox\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\">\n            </bs-checkbox>\n          } @else if (attr.lookupReferenceType) {\n            @if ((attr | lookupDisplayType:lookupReferenceOptions()) === ELookupDisplayType.Modal) {\n              <spark-lookup-picker\n                [value]=\"formData()[attr.name]\"\n                [options]=\"getLookupOptions(attr)\"\n                [inputId]=\"attr.name\"\n                [title]=\"attr.label | resolveTranslation:attr.name\"\n                [isInvalid]=\"hasError(attr.name)\"\n                (valueChange)=\"onLookupValueChange(attr, $event)\">\n              </spark-lookup-picker>\n            } @else {\n              <bs-select\n                class=\"w-100\"\n                [ngModel]=\"formData()[attr.name]\"\n                (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n                [id]=\"attr.name\"\n                [class.is-invalid]=\"hasError(attr.name)\">\n                <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                @for (option of (attr | lookupOptions:lookupReferenceOptions()); track option.key) {\n                  <option [ngValue]=\"option.key\">\n                    {{ option.values | resolveTranslation:option.key }}\n                  </option>\n                }\n              </bs-select>\n            }\n          } @else if (attr.dataType === 'Reference' && attr.isArray) {\n            <bs-tree-select\n              mode=\"multiple\"\n              variant=\"textbox\"\n              [showClear]=\"true\"\n              [placeholder]=\"'common.search' | t\"\n              [provider]=\"getReferenceProvider(attr)\"\n              [ngModel]=\"referenceTreeValues()[attr.name] || []\"\n              (ngModelChange)=\"onReferenceTreeChange(attr, $event)\"\n              [ngModelOptions]=\"{ standalone: true }\">\n            </bs-tree-select>\n          } @else if (attr.dataType === 'Reference') {\n            <spark-reference-picker\n              [value]=\"formData()[attr.name]\"\n              [options]=\"referenceOptions()[attr.name] || []\"\n              [referenceType]=\"attr.referenceType\"\n              [inputId]=\"attr.name\"\n              [title]=\"attr.label | resolveTranslation:attr.name\"\n              [isInvalid]=\"hasError(attr.name)\"\n              (valueChange)=\"onReferenceValueChange(attr, $event)\">\n            </spark-reference-picker>\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray && attr.editMode === 'inline') {\n            <!-- One source of truth for an inline cell, reused by the row and by the drag\n                 preview. The preview is a live Angular view (not a cloneNode), so its\n                 <bs-select> binds to row[col.name] and shows the value while dragging. -->\n            <ng-template #inlineDetailCell let-row=\"row\" let-col=\"col\" let-attr=\"attr\" let-rowIndex=\"rowIndex\" let-rowRenderer=\"rowRenderer\">\n              <td>\n                <!-- A row the caller may not edit renders through the same read-only span as a\n                     read-only column: still fully readable, just not editable. Hiding it would\n                     hide the data, and the save path would silently restore any edit anyway. -->\n                @if (col.isReadOnly || !(attr | canEditDetailRow:asDetailPermissions())) {\n                  <span class=\"text-muted\">{{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}</span>\n                } @else if (getAsDetailCellEditRenderer(col); as editRenderer) {\n                  <ng-container *ngComponentOutlet=\"editRenderer; inputs: getAsDetailCellEditRendererInputs(editRenderer, row, col)\"></ng-container>\n                } @else if (col.dataType === 'AsDetail') {\n                  <!-- Nested AsDetail can't flatten into a row: escalate to the row modal,\n                       where the recursive spark-po-form renders the nested structure. -->\n                  <div class=\"d-flex align-items-center gap-1\">\n                    <span class=\"text-truncate flex-grow-1\">{{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}</span>\n                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"editArrayItem(attr, rowIndex)\">\n                      <spark-icon name=\"pencil\" />\n                    </button>\n                  </div>\n                } @else if (col.dataType === 'boolean' && !col.lookupReferenceType) {\n                  <!-- Same precedence as the top-level chain above: a lookup-backed column must\n                       reach its select rather than being swallowed by the checkbox. -->\n                  <bs-checkbox\n                    [(ngModel)]=\"row[col.name]\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\">\n                  </bs-checkbox>\n                } @else if (col.dataType === 'Reference' && col.query) {\n                  @if (col.referenceDisplayType === EReferenceDisplayType.Modal) {\n                    <spark-reference-picker\n                      [value]=\"row[col.name]\"\n                      [options]=\"(attr | inlineRefOptions:col:asDetailReferenceOptions())\"\n                      [referenceType]=\"col.referenceType\"\n                      [title]=\"col.label | resolveTranslation:col.name\"\n                      [isInvalid]=\"hasInlineError(attr, rowIndex, col)\"\n                      (valueChange)=\"row[col.name] = $event; onInlineCellChange(attr, rowIndex, col)\">\n                    </spark-reference-picker>\n                  } @else {\n                    <bs-select\n                      class=\"w-100\"\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                      [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\">\n                      <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                      @for (option of (attr | inlineRefOptions:col:asDetailReferenceOptions()); track option.id) {\n                        <option [ngValue]=\"option.id\">\n                          {{ option.breadcrumb || option.id }}\n                        </option>\n                      }\n                    </bs-select>\n                  }\n                } @else if (col.lookupReferenceType) {\n                  @if ((col | lookupDisplayType:lookupReferenceOptions()) === ELookupDisplayType.Modal) {\n                    <spark-lookup-picker\n                      [value]=\"row[col.name]\"\n                      [options]=\"getLookupOptions(col)\"\n                      [title]=\"col.label | resolveTranslation:col.name\"\n                      [isInvalid]=\"hasInlineError(attr, rowIndex, col)\"\n                      (valueChange)=\"row[col.name] = $event; onInlineCellChange(attr, rowIndex, col)\">\n                    </spark-lookup-picker>\n                  } @else {\n                    <bs-select\n                      class=\"w-100\"\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                      [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\">\n                      <option [ngValue]=\"null\">{{ 'common.selectPlaceholder' | t }}</option>\n                      @for (option of getLookupOptions(col); track option.key) {\n                        <option [ngValue]=\"option.key\">\n                          {{ option.values | resolveTranslation:option.key }}\n                        </option>\n                      }\n                    </bs-select>\n                  }\n                } @else if (col.dataType === 'MultiLineString') {\n                  <textarea\n                    [(ngModel)]=\"row[col.name]\"\n                    [required]=\"col.isRequired\"\n                    rows=\"3\"\n                    [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                    (blur)=\"onInlineCellBlur(attr, rowIndex, col)\"></textarea>\n                } @else {\n                  <input\n                    [type]=\"col.dataType | inputType\"\n                    [(ngModel)]=\"row[col.name]\"\n                    [required]=\"col.isRequired\"\n                    [step]=\"col.dataType === 'decimal' ? '0.01' : '1'\"\n                    [class.is-invalid]=\"hasInlineError(attr, rowIndex, col)\"\n                    (ngModelChange)=\"onInlineCellChange(attr, rowIndex, col)\"\n                    (blur)=\"onInlineCellBlur(attr, rowIndex, col)\">\n                }\n                @if (inlineErrorMessage(attr, rowIndex, col); as errorMsg) {\n                  <div class=\"invalid-feedback d-block\">{{ errorMsg }}</div>\n                }\n                <!-- Passed for the first cell only: a row renderer (rowComponent) draws its\n                     attributes once per row, under that cell, instead of as columns. -->\n                @if (rowRenderer) {\n                  <div class=\"spark-row-renderer\">\n                    <ng-container *ngComponentOutlet=\"rowRenderer.component; inputs: getRowRendererInputs(rowRenderer, row)\"></ng-container>\n                  </div>\n                }\n              </td>\n            </ng-template>\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\n                  @if (attr.isSortable) {\n                    <th style=\"width: 32px\"></th>\n                  }\n                  @for (col of (attr | asDetailColumns:asDetailTypes():rendererRegistry); track col.name) {\n                    <th>{{ col.label | resolveTranslation:col.name }}<spark-attribute-description [description]=\"col.description\" /></th>\n                  }\n                  <th style=\"width: 50px\"></th>\n                </tr>\n              </thead>\n              @let inlineRowRenderer = (attr | asDetailRowRenderer:asDetailTypes():rendererRegistry);\n              <tbody class=\"align-middle\" cdkDropList [cdkDropListDisabled]=\"!attr.isSortable\" (cdkDropListDropped)=\"onAsDetailReorder(attr, $event)\">\n                @for (row of formData()[attr.name] || []; track $index; let rowIndex = $index) {\n                  <tr cdkDrag [cdkDragDisabled]=\"!attr.isSortable\">\n                    @if (attr.isSortable) {\n                      <td class=\"text-center text-muted\" style=\"cursor: move; touch-action: none\" cdkDragHandle>\n                        <spark-icon name=\"grip-vertical\" />\n                      </td>\n                    }\n                    @for (col of (attr | asDetailColumns:asDetailTypes():rendererRegistry); track col.name; let firstCol = $first) {\n                      <ng-container *ngTemplateOutlet=\"inlineDetailCell; context: { row: row, col: col, attr: attr, rowIndex: rowIndex, rowRenderer: firstCol ? inlineRowRenderer : null }\"></ng-container>\n                    }\n                    <td class=\"text-nowrap\">\n                      @if (attr | canDeleteDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" [color]=\"colors.secondary\" (click)=\"removeArrayItem(attr, rowIndex)\">\n                          <spark-icon name=\"trash\" />\n                        </button>\n                      }\n                    </td>\n\n                    <!-- Floating preview = a LIVE view of the row's cells (not CDK's cloneNode),\n                         so <bs-select> shows its value instead of blanking. The in-grid\n                         placeholder still uses CDK's default clone (exact row height) and is\n                         hidden via .cdk-drag-placeholder { visibility:hidden } in the styles,\n                         so the drop gap is blank without collapsing/shifting the other rows. -->\n                    <ng-template cdkDragPreview>\n                      <table class=\"table mb-0 bg-body shadow-sm spark-drag-preview\">\n                        <tbody class=\"align-middle\">\n                          <tr>\n                            @if (attr.isSortable) {\n                              <td class=\"text-center text-muted\" style=\"width: 32px\"><spark-icon name=\"grip-vertical\" /></td>\n                            }\n                            @for (col of (attr | asDetailColumns:asDetailTypes():rendererRegistry); track col.name) {\n                              <ng-container *ngTemplateOutlet=\"inlineDetailCell; context: { row: row, col: col, attr: attr, rowIndex: rowIndex }\"></ng-container>\n                            }\n                          </tr>\n                        </tbody>\n                      </table>\n                    </ng-template>\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes():rendererRegistry).length + (attr.isSortable ? 2 : 1)\" class=\"text-center text-muted\">\n                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @for (err of rowLifecycleErrorsFor(attr.name); track $index) {\n              <div class=\"text-danger small mt-1\">{{ err.errorMessage | resolveTranslation }}</div>\n            }\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addInlineRow(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\n                  @if (attr.isSortable) {\n                    <th style=\"width: 32px\"></th>\n                  }\n                  @for (col of (attr | asDetailColumns:asDetailTypes():rendererRegistry); track col.name) {\n                    <th>{{ col.label | resolveTranslation:col.name }}<spark-attribute-description [description]=\"col.description\" /></th>\n                  }\n                  <th style=\"width: 80px\"></th>\n                </tr>\n              </thead>\n              <tbody class=\"align-middle\" cdkDropList [cdkDropListDisabled]=\"!attr.isSortable\" (cdkDropListDropped)=\"onAsDetailReorder(attr, $event)\">\n                @let modalRowRenderer = (attr | asDetailRowRenderer:asDetailTypes():rendererRegistry);\n                @for (row of formData()[attr.name] || []; track $index) {\n                  <tr cdkDrag [cdkDragDisabled]=\"!attr.isSortable\">\n                    @if (attr.isSortable) {\n                      <td class=\"text-center text-muted\" style=\"cursor: move; touch-action: none\" cdkDragHandle>\n                        <spark-icon name=\"grip-vertical\" />\n                      </td>\n                    }\n                    @for (col of (attr | asDetailColumns:asDetailTypes():rendererRegistry); track col.name; let firstCol = $first) {\n                      <td>\n                        @if (getAsDetailCellRendererComponent(col); as cellRenderer) {\n                          <ng-container *ngComponentOutlet=\"cellRenderer; inputs: getAsDetailCellRendererInputs(cellRenderer, row, col)\"></ng-container>\n                        } @else {\n                          {{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}\n                        }\n                        @if (firstCol && modalRowRenderer) {\n                          <div class=\"spark-row-renderer\">\n                            <ng-container *ngComponentOutlet=\"modalRowRenderer.component; inputs: getRowRendererInputs(modalRowRenderer, row)\"></ng-container>\n                          </div>\n                        }\n                      </td>\n                    }\n                    <td class=\"text-nowrap\">\n                      @if (attr | canEditDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary me-1\" (click)=\"editArrayItem(attr, $index)\">\n                          <spark-icon name=\"pencil\" />\n                        </button>\n                      }\n                      @if (attr | canDeleteDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"removeArrayItem(attr, $index)\">\n                          <spark-icon name=\"trash\" />\n                        </button>\n                      }\n                    </td>\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes():rendererRegistry).length + (attr.isSortable ? 2 : 1)\" class=\"text-center text-muted\">\n                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @for (err of rowLifecycleErrorsFor(attr.name); track $index) {\n              <div class=\"text-danger small mt-1\">{{ err.errorMessage | resolveTranslation }}</div>\n            }\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addArrayItem(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail') {\n            <bs-input-group>\n              <input\n                type=\"text\"\n                [id]=\"attr.name\"\n                [value]=\"attr | asDetailDisplayValue:formData():asDetailTypes()\"\n                readonly\n                [class.is-invalid]=\"hasError(attr.name)\">\n              <button\n                type=\"button\"\n                bsInputGroupBtn\n                [color]=\"colors.secondary\"\n                (click)=\"openAsDetailEditor(attr)\">\n                <spark-icon name=\"pencil\" />\n              </button>\n            </bs-input-group>\n          } @else if (getEditRendererComponent(attr); as editComp) {\n            <ng-container *ngComponentOutlet=\"editComp; inputs: getEditRendererInputs(editComp, attr)\"></ng-container>\n          } @else if (attr.dataType === 'MultiLineString') {\n            <textarea\n              [id]=\"attr.name\"\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n              (blur)=\"onFieldBlur(attr)\"\n              [name]=\"attr.name\"\n              [required]=\"attr.isRequired\"\n              rows=\"6\"\n              [class.is-invalid]=\"hasError(attr.name)\"></textarea>\n          } @else {\n            <input\n              [type]=\"attr.dataType | inputType\"\n              [id]=\"attr.name\"\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange(attr)\"\n              (blur)=\"onFieldBlur(attr)\"\n              [name]=\"attr.name\"\n              [required]=\"attr.isRequired\"\n              [step]=\"attr.dataType === 'decimal' ? '0.01' : '1'\"\n              [class.is-invalid]=\"hasError(attr.name)\">\n          }\n          @if (attr.name | errorForAttribute:validationErrors(); as errorMsg) {\n            <div class=\"invalid-feedback d-block\">\n              {{ errorMsg }}\n            </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n\n    @if (showButtons()) {\n      <div bsRow class=\"mt-4\">\n        <div [md]=\"4\"></div>\n        <div [md]=\"8\" class=\"d-flex justify-content-end gap-2\">\n          <button type=\"button\" [color]=\"colors.secondary\" (click)=\"onCancel()\" [disabled]=\"isSaving()\">{{ 'common.cancel' | t }}</button>\n          <button type=\"submit\" [color]=\"colors.primary\" [disabled]=\"isSaving()\" (click)=\"onSave()\">\n            @if (isSaving()) {\n              <bs-spinner class=\"me-1\" />\n            }\n            {{ 'common.save' | t }}\n          </button>\n        </div>\n      </div>\n    }\n  </bs-grid>\n}\n\n<!-- Modal for editing AsDetail objects -->\n<bs-modal [isOpen]=\"showAsDetailModal()\" (isOpenChange)=\"!$event && closeAsDetailModal()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.edit' | t }} {{ editingAsDetailAttr()?.label | resolveTranslation:editingAsDetailAttr()?.name }}</h5>\n    </div>\n\n    @if (editingAsDetailAttr(); as attr) {\n      <div bsModalBody>\n        <spark-po-form\n          [entityType]=\"attr | asDetailType:asDetailTypes()\"\n          [(formData)]=\"asDetailFormData\"\n          [parentId]=\"parentId()\"\n          [parentType]=\"parentType()\"\n          [triggerPathPrefix]=\"attr.isArray ? null : attr.name\"\n          (nestedTriggerRequested)=\"onEmbeddedTrigger(attr.name, $event)\"\n          (nestedTriggerBlurred)=\"onEmbeddedTriggerBlur($event)\">\n        </spark-po-form>\n      </div>\n    }\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeAsDetailModal()\">{{ 'common.cancel' | t }}</button>\n      <button type=\"button\" [color]=\"colors.primary\" (click)=\"saveAsDetailObject()\">{{ 'common.save' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n</bs-form>\n",
 			styles: [":host ::ng-deep .cdk-drag-placeholder{visibility:hidden}\n"]
 		}]
 	}],