@mintplayer/ng-spark 22.23.0 → 22.25.0

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

@@ -1,1228 +1,2248 @@
-import * as i0 from '@angular/core';
-import { inject, input, output, signal, computed, ChangeDetectionStrategy, Component, model, effect } from '@angular/core';
-import * as i1$1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, CdkDragPreview } from '@angular/cdk/drag-drop';
-import { Color } from '@mintplayer/ng-bootstrap';
-import { BsCardComponent, BsCardHeaderComponent } from '@mintplayer/ng-bootstrap/card';
-import { BsFormComponent, BsFormControlDirective } from '@mintplayer/ng-bootstrap/form';
-import { BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsGridColDirective, BsColFormLabelDirective } from '@mintplayer/ng-bootstrap/grid';
-import { BsInputGroupComponent } from '@mintplayer/ng-bootstrap/input-group';
-import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
-import { BsSelectComponent, BsSelectOption } from '@mintplayer/ng-bootstrap/select';
-import { InMemoryTreeSelectProvider, BsTreeSelectComponent } from '@mintplayer/ng-bootstrap/tree-select';
-import { BsModalHostComponent, BsModalDirective, BsModalHeaderDirective, BsModalBodyDirective, BsModalFooterDirective } from '@mintplayer/ng-bootstrap/modal';
-import { BsCheckboxComponent } from '@mintplayer/ng-bootstrap/checkbox';
-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 { SparkService, SparkLanguageService } from '@mintplayer/ng-spark/services';
-import { TranslateKeyPipe, ResolveTranslationPipe, ReferenceAttrValuePipe, InputTypePipe, LookupDisplayTypePipe, LookupOptionsPipe, AsDetailDisplayValuePipe, AsDetailTypePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, CanCreateDetailRowPipe, CanDeleteDetailRowPipe, CanEditDetailRowPipe, InlineRefOptionsPipe, ErrorForAttributePipe } from '@mintplayer/ng-spark/pipes';
-import { resolveTranslation, ELookupDisplayType, EReferenceDisplayType, hasShowedOnFlag, ShowedOn, applyOverlay, evaluateRules, overlayFromResponse, mergeRefreshValues, nestedPoToDict, AS_DETAIL_ROW_KEY } 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 { DatatableSettings, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective } from '@mintplayer/ng-bootstrap/datatable';
-
-/**
- * Reusable Reference value picker: a readonly textbox showing the current selection's
- * breadcrumb/name plus a "…" button that opens a searchable modal grid over the candidate
- * `options`. Per-instance state (no single top-level slot), so it works for top-level
- * reference attributes and for individual inline AsDetail reference cells alike.
- *
- * The parent pre-loads `options` (the query result) and passes `referenceType` (the target
- * CLR type); the component lazily loads that EntityType's metadata on first open to render
- * the grid's column headers. Emits the picked id via `valueChange`.
- */
-class SparkReferencePickerComponent {
-    sparkService = inject(SparkService);
-    lang = inject(SparkLanguageService);
-    /** Currently selected referenced id (or null when unset). */
-    value = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** Candidate items to pick from (the full query result, pre-loaded by the parent). */
-    options = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    /** Target entity type's CLR type name; used to load the grid's column headers. */
-    referenceType = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "referenceType" }] : /* istanbul ignore next */ []));
-    /** Renders the field with the Bootstrap is-invalid state. */
-    isInvalid = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
-    /** Optional id forwarded to the readonly input (for label association). */
-    inputId = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
-    /** Optional resolved label appended to the modal header ("Select {title}"). */
-    title = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    valueChange = output();
-    colors = Color;
-    showModal = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showModal" }] : /* istanbul ignore next */ []));
-    entityType = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []));
-    pagination = signal(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
-    settings = signal(new DatatableSettings({
-        perPage: { values: [10, 25, 50], selected: 10 },
-        page: { values: [1], selected: 1 },
-        sortColumns: []
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
-    searchTerm = '';
-    visibleAttributes = computed(() => {
-        return this.entityType()?.attributes
-            .filter(a => a.isVisible)
-            .sort((a, b) => a.order - b.order) || [];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibleAttributes" }] : /* istanbul ignore next */ []));
-    // Typed rows so the datatable generic infers the row type.
-    rows = computed(() => this.pagination()?.data ?? [], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    displayValue = computed(() => {
-        const id = this.value();
-        if (!id)
-            return this.lang.t('notSelected');
-        const selected = this.options().find(o => o.id === id);
-        return selected?.breadcrumb || id;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
-    async open() {
-        this.searchTerm = '';
-        this.settings.set(new DatatableSettings({
-            perPage: { values: [10, 25, 50], selected: 10 },
-            page: { values: [1], selected: 1 },
-            sortColumns: []
-        }));
-        // Lazily resolve the target entity type for the grid's column headers.
-        const refType = this.referenceType();
-        if (!this.entityType() && refType) {
-            const types = await this.sparkService.getEntityTypes();
-            this.entityType.set(types.find(t => t.clrType === refType) || null);
-        }
-        this.applyFilter();
-        this.showModal.set(true);
-    }
-    onSearchChange() {
-        this.settings().page.selected = 1;
-        this.applyFilter();
-    }
-    applyFilter() {
-        let filteredItems = this.options();
-        if (this.searchTerm.trim()) {
-            const term = this.searchTerm.toLowerCase().trim();
-            filteredItems = this.options().filter(item => {
-                if (item.breadcrumb?.toLowerCase().includes(term))
-                    return true;
-                return item.values.some(v => {
-                    const value = v.breadcrumb ?? v.value;
-                    if (value == null)
-                        return false;
-                    return String(value).toLowerCase().includes(term);
-                });
-            });
-        }
-        const totalPages = Math.ceil(filteredItems.length / this.settings().perPage.selected) || 1;
-        this.pagination.set({
-            data: filteredItems,
-            totalRecords: filteredItems.length,
-            totalPages: totalPages,
-            perPage: this.settings().perPage.selected,
-            page: this.settings().page.selected
-        });
-        this.settings().page.values = Array.from({ length: totalPages }, (_, i) => i + 1);
-        if (this.settings().page.selected > totalPages) {
-            this.settings().page.selected = 1;
-        }
-    }
-    clearSearch() {
-        this.searchTerm = '';
-        this.onSearchChange();
-    }
-    select(item) {
-        this.valueChange.emit(item.id ?? null);
-        this.close();
-    }
-    close() {
-        this.showModal.set(false);
-        this.searchTerm = '';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkReferencePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkReferencePickerComponent, isStandalone: true, selector: "spark-reference-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, referenceType: { classPropertyName: "referenceType", publicName: "referenceType", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<bs-input-group>\n  <input\n    type=\"text\"\n    [id]=\"inputId()\"\n    [value]=\"displayValue()\"\n    readonly\n    [class.is-invalid]=\"isInvalid()\">\n  <button\n    type=\"button\"\n    bsInputGroupBtn\n    [color]=\"colors.secondary\"\n    (click)=\"open()\">\n    ...\n  </button>\n</bs-input-group>\n\n<bs-modal [isOpen]=\"showModal()\" (isOpenChange)=\"!$event && close()\">\n  <div *bsModal class=\"reference-modal\">\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.select' | t }} {{ title() }}</h5>\n    </div>\n\n    <div bsModalBody>\n      <!-- bs-modal portals its content into a CDK overlay outside the host form, so the\n           modal needs its own <bs-form> context for inputs to pick up .form-control styles. -->\n      <bs-form>\n      @if (entityType()) {\n        <!-- Search box -->\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"12\">\n              <bs-input-group>\n                <span class=\"addon\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [(ngModel)]=\"searchTerm\"\n                  (ngModelChange)=\"onSearchChange()\">\n                @if (searchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            @if (searchTerm && pagination()) {\n              <div [md]=\"12\" class=\"text-end mt-1\">\n                <span class=\"text-muted\">\n                  {{ pagination()!.totalRecords }} {{ pagination()!.totalRecords === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              </div>\n            }\n          </div>\n        </bs-grid>\n\n        <bs-datatable\n          [(settings)]=\"settings\"\n          [data]=\"rows()\"\n          (rowClick)=\"select($event.row)\">\n          @for (attr of visibleAttributes(); track attr.id) {\n            <div *bsDatatableColumn=\"attr.name; sortable: true\">\n              {{ attr.label | resolveTranslation:attr.name }}\n              <spark-attribute-description [description]=\"attr.description\" />\n            </div>\n          }\n\n          <ng-container *bsRowTemplate=\"let item\">\n            @for (attr of visibleAttributes(); track attr.id) {\n              <td>{{ $any(item) | referenceAttrValue:attr.name }}</td>\n            }\n          </ng-container>\n        </bs-datatable>\n      } @else {\n        <div class=\"text-center p-3\">\n          <bs-spinner />\n        </div>\n      }\n      </bs-form>\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"close()\">{{ 'common.cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColumnDirective, selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]", inputs: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: BsInputGroupComponent, selector: "bs-input-group", inputs: ["size"] }, { kind: "directive", type: BsButtonTypeDirective, selector: "button[color],input[type=\"button\"][color],input[type=\"submit\"][color],a[color]", inputs: ["color"] }, { kind: "component", type: BsModalHostComponent, selector: "bs-modal", inputs: ["isOpen", "closeOnEscape", "scrollable"], outputs: ["isOpenChange"] }, { kind: "directive", type: BsModalDirective, selector: "[bsModal]" }, { kind: "directive", type: BsModalHeaderDirective, selector: "[bsModalHeader]" }, { kind: "directive", type: BsModalBodyDirective, selector: "[bsModalBody]" }, { kind: "directive", type: BsModalFooterDirective, selector: "[bsModalFooter]" }, { kind: "component", type: BsDatatableComponent, selector: "bs-datatable", inputs: ["columns", "data", "fetch", "distincts", "labels", "settings", "selectionMode", "selectable", "selection", "rowKey", "resizableColumns", "pagination", "virtualScroll", "itemSize", "virtualBuffer", "isResponsive", "compareWith", "tree", "idKey", "childCountKey", "treeIndent", "expandedIds", "selectionStrategy"], outputs: ["settingsChange", "selectionChange", "rowClick", "rowDblClick", "rowContextMenu", "expandedIdsChange", "rowExpand", "rowCollapse", "filterChange"] }, { kind: "directive", type: BsDatatableColumnDirective, selector: "[bsDatatableColumn]", inputs: ["bsDatatableColumn", "bsDatatableColumnSortable", "bsDatatableColumnFilterable", "bsDatatableColumnFilterActive", "bsDatatableColumnFilterSummary", "bsDatatableColumnFilterSelection", "bsDatatableColumnFilterMode", "bsDatatableColumnFilterInputType", "bsDatatableColumnFilterOperators"] }, { kind: "directive", type: BsRowTemplateDirective, selector: "[bsRowTemplate]" }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "component", type: SparkAttributeDescriptionComponent, selector: "spark-attribute-description", inputs: ["description", "position"] }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: ReferenceAttrValuePipe, name: "referenceAttrValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+import * as i0 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";
+import { FormsModule } from "@angular/forms";
+import { CdkDrag, CdkDragHandle, CdkDragPreview, CdkDropList, moveItemInArray } from "@angular/cdk/drag-drop";
+import { Color } from "@mintplayer/ng-bootstrap";
+import { BsCardComponent, BsCardHeaderComponent } from "@mintplayer/ng-bootstrap/card";
+import { BsFormComponent, BsFormControlDirective } from "@mintplayer/ng-bootstrap/form";
+import { BsColFormLabelDirective, BsGridColDirective, BsGridColumnDirective, BsGridComponent, BsGridRowDirective } from "@mintplayer/ng-bootstrap/grid";
+import { BsInputGroupComponent } from "@mintplayer/ng-bootstrap/input-group";
+import { BsButtonTypeDirective } from "@mintplayer/ng-bootstrap/button-type";
+import { BsSelectComponent, BsSelectOption } from "@mintplayer/ng-bootstrap/select";
+import { BsTreeSelectComponent, InMemoryTreeSelectProvider } from "@mintplayer/ng-bootstrap/tree-select";
+import { BsModalBodyDirective, BsModalDirective, BsModalFooterDirective, BsModalHeaderDirective, BsModalHostComponent } from "@mintplayer/ng-bootstrap/modal";
+import { BsCheckboxComponent } from "@mintplayer/ng-bootstrap/checkbox";
+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, 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, rowRendererInputs, withDeclaredInputs } from "@mintplayer/ng-spark/renderers";
+import { BsDatatableColumnDirective, BsDatatableComponent, BsRowTemplateDirective, DatatableSettings } from "@mintplayer/ng-bootstrap/datatable";
+var SparkReferencePickerComponent = class SparkReferencePickerComponent {
+	sparkService = inject(SparkService);
+	lang = inject(SparkLanguageService);
+	value = input(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	referenceType = input(void 0, ...ngDevMode ? [{ debugName: "referenceType" }] : /* istanbul ignore next */ []);
+	isInvalid = input(false, ...ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []);
+	inputId = input(void 0, ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	valueChange = output();
+	colors = Color;
+	showModal = signal(false, ...ngDevMode ? [{ debugName: "showModal" }] : /* istanbul ignore next */ []);
+	entityType = signal(null, ...ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []);
+	pagination = signal(void 0, ...ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []);
+	settings = signal(new DatatableSettings({
+		perPage: {
+			values: [
+				10,
+				25,
+				50
+			],
+			selected: 10
+		},
+		page: {
+			values: [1],
+			selected: 1
+		},
+		sortColumns: []
+	}), ...ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []);
+	searchTerm = "";
+	visibleAttributes = computed(() => {
+		return this.entityType()?.attributes.filter((a) => a.isVisible).sort((a, b) => a.order - b.order) || [];
+	}, ...ngDevMode ? [{ debugName: "visibleAttributes" }] : /* istanbul ignore next */ []);
+	rows = computed(() => this.pagination()?.data ?? [], ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	displayValue = computed(() => {
+		const id = this.value();
+		if (!id) return this.lang.t("common.notSelected");
+		return this.options().find((o) => o.id === id)?.breadcrumb || id;
+	}, ...ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []);
+	async open() {
+		this.searchTerm = "";
+		this.settings.set(new DatatableSettings({
+			perPage: {
+				values: [
+					10,
+					25,
+					50
+				],
+				selected: 10
+			},
+			page: {
+				values: [1],
+				selected: 1
+			},
+			sortColumns: []
+		}));
+		const refType = this.referenceType();
+		if (!this.entityType() && refType) {
+			const types = await this.sparkService.getEntityTypes();
+			this.entityType.set(types.find((t) => t.clrType === refType) || null);
+		}
+		this.applyFilter();
+		this.showModal.set(true);
+	}
+	onSearchChange() {
+		this.settings().page.selected = 1;
+		this.applyFilter();
+	}
+	applyFilter() {
+		let filteredItems = this.options();
+		if (this.searchTerm.trim()) {
+			const term = this.searchTerm.toLowerCase().trim();
+			filteredItems = this.options().filter((item) => {
+				if (item.breadcrumb?.toLowerCase().includes(term)) return true;
+				return item.values.some((v) => {
+					const value = v.breadcrumb ?? v.value;
+					if (value == null) return false;
+					return String(value).toLowerCase().includes(term);
+				});
+			});
+		}
+		const totalPages = Math.ceil(filteredItems.length / this.settings().perPage.selected) || 1;
+		this.pagination.set({
+			data: filteredItems,
+			totalRecords: filteredItems.length,
+			totalPages,
+			perPage: this.settings().perPage.selected,
+			page: this.settings().page.selected
+		});
+		this.settings().page.values = Array.from({ length: totalPages }, (_, i) => i + 1);
+		if (this.settings().page.selected > totalPages) this.settings().page.selected = 1;
+	}
+	clearSearch() {
+		this.searchTerm = "";
+		this.onSearchChange();
+	}
+	select(item) {
+		this.valueChange.emit(item.id ?? null);
+		this.close();
+	}
+	close() {
+		this.showModal.set(false);
+		this.searchTerm = "";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkReferencePickerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SparkReferencePickerComponent,
+		isStandalone: true,
+		selector: "spark-reference-picker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			referenceType: {
+				classPropertyName: "referenceType",
+				publicName: "referenceType",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isInvalid: {
+				classPropertyName: "isInvalid",
+				publicName: "isInvalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { valueChange: "valueChange" },
+		ngImport: i0,
+		template: "<bs-input-group>\n  <input\n    type=\"text\"\n    [id]=\"inputId()\"\n    [value]=\"displayValue()\"\n    readonly\n    [class.is-invalid]=\"isInvalid()\">\n  <button\n    type=\"button\"\n    bsInputGroupBtn\n    [color]=\"colors.secondary\"\n    (click)=\"open()\">\n    ...\n  </button>\n</bs-input-group>\n\n<bs-modal [isOpen]=\"showModal()\" (isOpenChange)=\"!$event && close()\">\n  <div *bsModal class=\"reference-modal\">\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.select' | t }} {{ title() }}</h5>\n    </div>\n\n    <div bsModalBody>\n      <!-- bs-modal portals its content into a CDK overlay outside the host form, so the\n           modal needs its own <bs-form> context for inputs to pick up .form-control styles. -->\n      <bs-form>\n      @if (entityType()) {\n        <!-- Search box -->\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"12\">\n              <bs-input-group>\n                <span class=\"addon\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [(ngModel)]=\"searchTerm\"\n                  (ngModelChange)=\"onSearchChange()\">\n                @if (searchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            @if (searchTerm && pagination()) {\n              <div [md]=\"12\" class=\"text-end mt-1\">\n                <span class=\"text-muted\">\n                  {{ pagination()!.totalRecords }} {{ pagination()!.totalRecords === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              </div>\n            }\n          </div>\n        </bs-grid>\n\n        <bs-datatable\n          [(settings)]=\"settings\"\n          [data]=\"rows()\"\n          (rowClick)=\"select($event.row)\">\n          @for (attr of visibleAttributes(); track attr.id) {\n            <div *bsDatatableColumn=\"attr.name; sortable: true\">\n              {{ attr.label | resolveTranslation:attr.name }}\n              <spark-attribute-description [description]=\"attr.description\" />\n            </div>\n          }\n\n          <ng-container *bsRowTemplate=\"let item\">\n            @for (attr of visibleAttributes(); track attr.id) {\n              <td>{{ $any(item) | referenceAttrValue:attr.name }}</td>\n            }\n          </ng-container>\n        </bs-datatable>\n      } @else {\n        <div class=\"text-center p-3\">\n          <bs-spinner />\n        </div>\n      }\n      </bs-form>\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"close()\">{{ 'common.cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1$1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: BsFormComponent,
+				selector: "bs-form",
+				inputs: ["action", "method"],
+				outputs: ["submitted"]
+			},
+			{
+				kind: "directive",
+				type: BsFormControlDirective,
+				selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)"
+			},
+			{
+				kind: "component",
+				type: BsGridComponent,
+				selector: "bs-grid",
+				inputs: ["stopFullWidthAt"]
+			},
+			{
+				kind: "directive",
+				type: BsGridRowDirective,
+				selector: "[bsRow]"
+			},
+			{
+				kind: "directive",
+				type: BsGridColumnDirective,
+				selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]",
+				inputs: [
+					"xxs",
+					"xs",
+					"sm",
+					"md",
+					"lg",
+					"xl",
+					"xxl"
+				]
+			},
+			{
+				kind: "component",
+				type: BsInputGroupComponent,
+				selector: "bs-input-group",
+				inputs: ["size"]
+			},
+			{
+				kind: "directive",
+				type: BsButtonTypeDirective,
+				selector: "button[color],input[type=\"button\"][color],input[type=\"submit\"][color],a[color]",
+				inputs: ["color"]
+			},
+			{
+				kind: "component",
+				type: BsModalHostComponent,
+				selector: "bs-modal",
+				inputs: [
+					"isOpen",
+					"closeOnEscape",
+					"scrollable"
+				],
+				outputs: ["isOpenChange"]
+			},
+			{
+				kind: "directive",
+				type: BsModalDirective,
+				selector: "[bsModal]"
+			},
+			{
+				kind: "directive",
+				type: BsModalHeaderDirective,
+				selector: "[bsModalHeader]"
+			},
+			{
+				kind: "directive",
+				type: BsModalBodyDirective,
+				selector: "[bsModalBody]"
+			},
+			{
+				kind: "directive",
+				type: BsModalFooterDirective,
+				selector: "[bsModalFooter]"
+			},
+			{
+				kind: "component",
+				type: BsDatatableComponent,
+				selector: "bs-datatable",
+				inputs: [
+					"columns",
+					"data",
+					"fetch",
+					"distincts",
+					"labels",
+					"settings",
+					"selectionMode",
+					"selectable",
+					"selection",
+					"rowKey",
+					"resizableColumns",
+					"pagination",
+					"virtualScroll",
+					"itemSize",
+					"virtualBuffer",
+					"isResponsive",
+					"compareWith",
+					"tree",
+					"idKey",
+					"childCountKey",
+					"treeIndent",
+					"expandedIds",
+					"selectionStrategy"
+				],
+				outputs: [
+					"settingsChange",
+					"selectionChange",
+					"rowClick",
+					"rowDblClick",
+					"rowContextMenu",
+					"expandedIdsChange",
+					"rowExpand",
+					"rowCollapse",
+					"filterChange"
+				]
+			},
+			{
+				kind: "directive",
+				type: BsDatatableColumnDirective,
+				selector: "[bsDatatableColumn]",
+				inputs: [
+					"bsDatatableColumn",
+					"bsDatatableColumnSortable",
+					"bsDatatableColumnFilterable",
+					"bsDatatableColumnFilterActive",
+					"bsDatatableColumnFilterSummary",
+					"bsDatatableColumnFilterSelection",
+					"bsDatatableColumnFilterMode",
+					"bsDatatableColumnFilterInputType",
+					"bsDatatableColumnFilterOperators"
+				]
+			},
+			{
+				kind: "directive",
+				type: BsRowTemplateDirective,
+				selector: "[bsRowTemplate]"
+			},
+			{
+				kind: "component",
+				type: BsSpinnerComponent,
+				selector: "bs-spinner",
+				inputs: ["type", "color"]
+			},
+			{
+				kind: "component",
+				type: SparkIconComponent,
+				selector: "spark-icon",
+				inputs: ["name"]
+			},
+			{
+				kind: "component",
+				type: SparkAttributeDescriptionComponent,
+				selector: "spark-attribute-description",
+				inputs: ["description", "position"]
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			},
+			{
+				kind: "pipe",
+				type: ResolveTranslationPipe,
+				name: "resolveTranslation"
+			},
+			{
+				kind: "pipe",
+				type: ReferenceAttrValuePipe,
+				name: "referenceAttrValue"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkReferencePickerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-reference-picker",
+			imports: [
+				FormsModule,
+				BsFormComponent,
+				BsFormControlDirective,
+				BsGridComponent,
+				BsGridRowDirective,
+				BsGridColumnDirective,
+				BsInputGroupComponent,
+				BsButtonTypeDirective,
+				BsModalHostComponent,
+				BsModalDirective,
+				BsModalHeaderDirective,
+				BsModalBodyDirective,
+				BsModalFooterDirective,
+				BsDatatableComponent,
+				BsDatatableColumnDirective,
+				BsRowTemplateDirective,
+				BsSpinnerComponent,
+				SparkIconComponent,
+				TranslateKeyPipe,
+				ResolveTranslationPipe,
+				ReferenceAttrValuePipe,
+				SparkAttributeDescriptionComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<bs-input-group>\n  <input\n    type=\"text\"\n    [id]=\"inputId()\"\n    [value]=\"displayValue()\"\n    readonly\n    [class.is-invalid]=\"isInvalid()\">\n  <button\n    type=\"button\"\n    bsInputGroupBtn\n    [color]=\"colors.secondary\"\n    (click)=\"open()\">\n    ...\n  </button>\n</bs-input-group>\n\n<bs-modal [isOpen]=\"showModal()\" (isOpenChange)=\"!$event && close()\">\n  <div *bsModal class=\"reference-modal\">\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.select' | t }} {{ title() }}</h5>\n    </div>\n\n    <div bsModalBody>\n      <!-- bs-modal portals its content into a CDK overlay outside the host form, so the\n           modal needs its own <bs-form> context for inputs to pick up .form-control styles. -->\n      <bs-form>\n      @if (entityType()) {\n        <!-- Search box -->\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"12\">\n              <bs-input-group>\n                <span class=\"addon\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [(ngModel)]=\"searchTerm\"\n                  (ngModelChange)=\"onSearchChange()\">\n                @if (searchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            @if (searchTerm && pagination()) {\n              <div [md]=\"12\" class=\"text-end mt-1\">\n                <span class=\"text-muted\">\n                  {{ pagination()!.totalRecords }} {{ pagination()!.totalRecords === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              </div>\n            }\n          </div>\n        </bs-grid>\n\n        <bs-datatable\n          [(settings)]=\"settings\"\n          [data]=\"rows()\"\n          (rowClick)=\"select($event.row)\">\n          @for (attr of visibleAttributes(); track attr.id) {\n            <div *bsDatatableColumn=\"attr.name; sortable: true\">\n              {{ attr.label | resolveTranslation:attr.name }}\n              <spark-attribute-description [description]=\"attr.description\" />\n            </div>\n          }\n\n          <ng-container *bsRowTemplate=\"let item\">\n            @for (attr of visibleAttributes(); track attr.id) {\n              <td>{{ $any(item) | referenceAttrValue:attr.name }}</td>\n            }\n          </ng-container>\n        </bs-datatable>\n      } @else {\n        <div class=\"text-center p-3\">\n          <bs-spinner />\n        </div>\n      }\n      </bs-form>\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"close()\">{{ 'common.cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n"
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		referenceType: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "referenceType",
+				required: false
+			}]
+		}],
+		isInvalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isInvalid",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}]
+	}
+});
+var SparkLookupPickerComponent = class SparkLookupPickerComponent {
+	value = input(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	isInvalid = input(false, ...ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []);
+	inputId = input(void 0, ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	valueChange = output();
+	colors = Color;
+	showModal = signal(false, ...ngDevMode ? [{ debugName: "showModal" }] : /* istanbul ignore next */ []);
+	searchTerm = signal("", ...ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []);
+	displayValue = computed(() => {
+		const key = this.value();
+		if (key == null || key === "") return "";
+		const selected = this.options().find((o) => o.key === String(key));
+		if (!selected) return String(key);
+		return resolveTranslation(selected.values) || selected.key;
+	}, ...ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []);
+	filteredItems = computed(() => {
+		if (!this.searchTerm().trim()) return this.options();
+		const term = this.searchTerm().toLowerCase().trim();
+		return this.options().filter((item) => {
+			return resolveTranslation(item.values).toLowerCase().includes(term) || item.key.toLowerCase().includes(term);
+		});
+	}, ...ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []);
+	open() {
+		this.searchTerm.set("");
+		this.showModal.set(true);
+	}
+	select(item) {
+		this.valueChange.emit(item.key);
+		this.close();
+	}
+	close() {
+		this.showModal.set(false);
+		this.searchTerm.set("");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkLookupPickerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SparkLookupPickerComponent,
+		isStandalone: true,
+		selector: "spark-lookup-picker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isInvalid: {
+				classPropertyName: "isInvalid",
+				publicName: "isInvalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { valueChange: "valueChange" },
+		ngImport: i0,
+		template: "<bs-input-group>\n  <input\n    type=\"text\"\n    [id]=\"inputId()\"\n    [value]=\"displayValue()\"\n    readonly\n    [class.is-invalid]=\"isInvalid()\">\n  <button\n    type=\"button\"\n    bsInputGroupBtn\n    [color]=\"colors.secondary\"\n    (click)=\"open()\">\n    ...\n  </button>\n</bs-input-group>\n\n<bs-modal [isOpen]=\"showModal()\" (isOpenChange)=\"!$event && close()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.select' | t }} {{ title() }}</h5>\n    </div>\n\n    <div bsModalBody>\n      <!-- bs-modal portals its content into a CDK overlay outside the host form, so the\n           modal needs its own <bs-form> context for inputs to pick up .form-control styles. -->\n      <bs-form>\n      <!-- Search box -->\n      <bs-grid>\n        <div bsRow class=\"mb-3\">\n          <div [col]>\n            <bs-input-group>\n              <span class=\"addon\">\n                <spark-icon name=\"search\" />\n              </span>\n              <input\n                type=\"text\"\n                [placeholder]=\"'common.search' | t\"\n                [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"searchTerm.set($event)\">\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"searchTerm.set('')\">\n                  <spark-icon name=\"x-lg\" />\n                </button>\n              }\n            </bs-input-group>\n          </div>\n        </div>\n      </bs-grid>\n\n      <!-- List of items -->\n      <bs-table [striped]=\"true\" [hover]=\"true\">\n        <tbody class=\"align-middle\">\n          @for (item of filteredItems(); track item.key) {\n            <tr\n              [class.table-primary]=\"value() === item.key\"\n              (click)=\"select(item)\"\n              style=\"cursor: pointer;\">\n              <td>{{ item.values | resolveTranslation:item.key }}</td>\n            </tr>\n          } @empty {\n            <tr>\n              <td class=\"text-center text-muted\">{{ 'common.noItemsFound' | t }}</td>\n            </tr>\n          }\n        </tbody>\n      </bs-table>\n      </bs-form>\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"close()\">{{ 'common.cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1$1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: BsFormComponent,
+				selector: "bs-form",
+				inputs: ["action", "method"],
+				outputs: ["submitted"]
+			},
+			{
+				kind: "directive",
+				type: BsFormControlDirective,
+				selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)"
+			},
+			{
+				kind: "component",
+				type: BsGridComponent,
+				selector: "bs-grid",
+				inputs: ["stopFullWidthAt"]
+			},
+			{
+				kind: "directive",
+				type: BsGridRowDirective,
+				selector: "[bsRow]"
+			},
+			{
+				kind: "directive",
+				type: BsGridColDirective,
+				selector: "[col]",
+				inputs: ["col"]
+			},
+			{
+				kind: "component",
+				type: BsInputGroupComponent,
+				selector: "bs-input-group",
+				inputs: ["size"]
+			},
+			{
+				kind: "directive",
+				type: BsButtonTypeDirective,
+				selector: "button[color],input[type=\"button\"][color],input[type=\"submit\"][color],a[color]",
+				inputs: ["color"]
+			},
+			{
+				kind: "component",
+				type: BsModalHostComponent,
+				selector: "bs-modal",
+				inputs: [
+					"isOpen",
+					"closeOnEscape",
+					"scrollable"
+				],
+				outputs: ["isOpenChange"]
+			},
+			{
+				kind: "directive",
+				type: BsModalDirective,
+				selector: "[bsModal]"
+			},
+			{
+				kind: "directive",
+				type: BsModalHeaderDirective,
+				selector: "[bsModalHeader]"
+			},
+			{
+				kind: "directive",
+				type: BsModalBodyDirective,
+				selector: "[bsModalBody]"
+			},
+			{
+				kind: "directive",
+				type: BsModalFooterDirective,
+				selector: "[bsModalFooter]"
+			},
+			{
+				kind: "component",
+				type: BsTableComponent,
+				selector: "bs-table",
+				inputs: [
+					"isResponsive",
+					"striped",
+					"hover",
+					"border",
+					"ariaRowCount"
+				]
+			},
+			{
+				kind: "component",
+				type: SparkIconComponent,
+				selector: "spark-icon",
+				inputs: ["name"]
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			},
+			{
+				kind: "pipe",
+				type: ResolveTranslationPipe,
+				name: "resolveTranslation"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkLookupPickerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-lookup-picker",
+			imports: [
+				FormsModule,
+				BsFormComponent,
+				BsFormControlDirective,
+				BsGridComponent,
+				BsGridRowDirective,
+				BsGridColDirective,
+				BsInputGroupComponent,
+				BsButtonTypeDirective,
+				BsModalHostComponent,
+				BsModalDirective,
+				BsModalHeaderDirective,
+				BsModalBodyDirective,
+				BsModalFooterDirective,
+				BsTableComponent,
+				SparkIconComponent,
+				TranslateKeyPipe,
+				ResolveTranslationPipe
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<bs-input-group>\n  <input\n    type=\"text\"\n    [id]=\"inputId()\"\n    [value]=\"displayValue()\"\n    readonly\n    [class.is-invalid]=\"isInvalid()\">\n  <button\n    type=\"button\"\n    bsInputGroupBtn\n    [color]=\"colors.secondary\"\n    (click)=\"open()\">\n    ...\n  </button>\n</bs-input-group>\n\n<bs-modal [isOpen]=\"showModal()\" (isOpenChange)=\"!$event && close()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.select' | t }} {{ title() }}</h5>\n    </div>\n\n    <div bsModalBody>\n      <!-- bs-modal portals its content into a CDK overlay outside the host form, so the\n           modal needs its own <bs-form> context for inputs to pick up .form-control styles. -->\n      <bs-form>\n      <!-- Search box -->\n      <bs-grid>\n        <div bsRow class=\"mb-3\">\n          <div [col]>\n            <bs-input-group>\n              <span class=\"addon\">\n                <spark-icon name=\"search\" />\n              </span>\n              <input\n                type=\"text\"\n                [placeholder]=\"'common.search' | t\"\n                [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"searchTerm.set($event)\">\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"searchTerm.set('')\">\n                  <spark-icon name=\"x-lg\" />\n                </button>\n              }\n            </bs-input-group>\n          </div>\n        </div>\n      </bs-grid>\n\n      <!-- List of items -->\n      <bs-table [striped]=\"true\" [hover]=\"true\">\n        <tbody class=\"align-middle\">\n          @for (item of filteredItems(); track item.key) {\n            <tr\n              [class.table-primary]=\"value() === item.key\"\n              (click)=\"select(item)\"\n              style=\"cursor: pointer;\">\n              <td>{{ item.values | resolveTranslation:item.key }}</td>\n            </tr>\n          } @empty {\n            <tr>\n              <td class=\"text-center text-muted\">{{ 'common.noItemsFound' | t }}</td>\n            </tr>\n          }\n        </tbody>\n      </bs-table>\n      </bs-form>\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"close()\">{{ 'common.cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n"
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		isInvalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isInvalid",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}]
+	}
+});
+var RefreshCoordinator = class {
+	host;
+	queue = Promise.resolve();
+	sequence = 0;
+	settled = 0;
+	pending = /* @__PURE__ */ new Set();
+	timers = /* @__PURE__ */ new Map();
+	constructor(host) {
+		this.host = host;
+	}
+	get isRefreshing() {
+		return this.sequence !== this.settled;
+	}
+	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;
+	}
+	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 () => {
+			const sent = { ...this.host.currentValues() };
+			try {
+				const response = await this.host.send(attributeName);
+				if (ticket !== this.sequence) return;
+				this.host.apply(response, sent);
+			} finally {
+				this.settled = Math.max(this.settled, ticket);
+				if (!this.isRefreshing) this.host.setBusy(false);
+			}
+		});
+		return this.queue;
+	}
+	clearTimer(attributeName) {
+		const timer = this.timers.get(attributeName);
+		if (timer === void 0) return;
+		clearTimeout(timer);
+		this.timers.delete(attributeName);
+	}
+};
+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";
+	}
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkReferencePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spark-reference-picker', imports: [FormsModule, BsFormComponent, BsFormControlDirective, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsInputGroupComponent, BsButtonTypeDirective, BsModalHostComponent, BsModalDirective, BsModalHeaderDirective, BsModalBodyDirective, BsModalFooterDirective, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsSpinnerComponent, SparkIconComponent, TranslateKeyPipe, ResolveTranslationPipe, ReferenceAttrValuePipe, SparkAttributeDescriptionComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-input-group>\n  <input\n    type=\"text\"\n    [id]=\"inputId()\"\n    [value]=\"displayValue()\"\n    readonly\n    [class.is-invalid]=\"isInvalid()\">\n  <button\n    type=\"button\"\n    bsInputGroupBtn\n    [color]=\"colors.secondary\"\n    (click)=\"open()\">\n    ...\n  </button>\n</bs-input-group>\n\n<bs-modal [isOpen]=\"showModal()\" (isOpenChange)=\"!$event && close()\">\n  <div *bsModal class=\"reference-modal\">\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.select' | t }} {{ title() }}</h5>\n    </div>\n\n    <div bsModalBody>\n      <!-- bs-modal portals its content into a CDK overlay outside the host form, so the\n           modal needs its own <bs-form> context for inputs to pick up .form-control styles. -->\n      <bs-form>\n      @if (entityType()) {\n        <!-- Search box -->\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"12\">\n              <bs-input-group>\n                <span class=\"addon\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [(ngModel)]=\"searchTerm\"\n                  (ngModelChange)=\"onSearchChange()\">\n                @if (searchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            @if (searchTerm && pagination()) {\n              <div [md]=\"12\" class=\"text-end mt-1\">\n                <span class=\"text-muted\">\n                  {{ pagination()!.totalRecords }} {{ pagination()!.totalRecords === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              </div>\n            }\n          </div>\n        </bs-grid>\n\n        <bs-datatable\n          [(settings)]=\"settings\"\n          [data]=\"rows()\"\n          (rowClick)=\"select($event.row)\">\n          @for (attr of visibleAttributes(); track attr.id) {\n            <div *bsDatatableColumn=\"attr.name; sortable: true\">\n              {{ attr.label | resolveTranslation:attr.name }}\n              <spark-attribute-description [description]=\"attr.description\" />\n            </div>\n          }\n\n          <ng-container *bsRowTemplate=\"let item\">\n            @for (attr of visibleAttributes(); track attr.id) {\n              <td>{{ $any(item) | referenceAttrValue:attr.name }}</td>\n            }\n          </ng-container>\n        </bs-datatable>\n      } @else {\n        <div class=\"text-center p-3\">\n          <bs-spinner />\n        </div>\n      }\n      </bs-form>\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"close()\">{{ 'common.cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], referenceType: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceType", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
-
-/**
- * Reusable LookupReference value picker: a readonly textbox showing the current selection's
- * translated label plus a "…" button that opens a searchable modal list over the active
- * `options`. Per-instance state, so it serves both top-level lookup attributes (display type
- * Modal) and individual inline AsDetail lookup cells. Emits the picked key via `valueChange`.
- */
-class SparkLookupPickerComponent {
-    /** Currently selected lookup key (or null when unset). */
-    value = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** Active lookup values to pick from. */
-    options = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    /** Renders the field with the Bootstrap is-invalid state. */
-    isInvalid = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
-    /** Optional id forwarded to the readonly input (for label association). */
-    inputId = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
-    /** Optional resolved label appended to the modal header ("Select {title}"). */
-    title = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    valueChange = output();
-    colors = Color;
-    showModal = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showModal" }] : /* istanbul ignore next */ []));
-    searchTerm = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
-    displayValue = computed(() => {
-        const key = this.value();
-        if (key == null || key === '')
-            return '';
-        const selected = this.options().find(o => o.key === String(key));
-        if (!selected)
-            return String(key);
-        return resolveTranslation(selected.values) || selected.key;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
-    filteredItems = computed(() => {
-        if (!this.searchTerm().trim()) {
-            return this.options();
-        }
-        const term = this.searchTerm().toLowerCase().trim();
-        return this.options().filter(item => {
-            const translation = resolveTranslation(item.values);
-            return translation.toLowerCase().includes(term) || item.key.toLowerCase().includes(term);
-        });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
-    open() {
-        this.searchTerm.set('');
-        this.showModal.set(true);
-    }
-    select(item) {
-        this.valueChange.emit(item.key);
-        this.close();
-    }
-    close() {
-        this.showModal.set(false);
-        this.searchTerm.set('');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkLookupPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkLookupPickerComponent, isStandalone: true, selector: "spark-lookup-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<bs-input-group>\n  <input\n    type=\"text\"\n    [id]=\"inputId()\"\n    [value]=\"displayValue()\"\n    readonly\n    [class.is-invalid]=\"isInvalid()\">\n  <button\n    type=\"button\"\n    bsInputGroupBtn\n    [color]=\"colors.secondary\"\n    (click)=\"open()\">\n    ...\n  </button>\n</bs-input-group>\n\n<bs-modal [isOpen]=\"showModal()\" (isOpenChange)=\"!$event && close()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.select' | t }} {{ title() }}</h5>\n    </div>\n\n    <div bsModalBody>\n      <!-- bs-modal portals its content into a CDK overlay outside the host form, so the\n           modal needs its own <bs-form> context for inputs to pick up .form-control styles. -->\n      <bs-form>\n      <!-- Search box -->\n      <bs-grid>\n        <div bsRow class=\"mb-3\">\n          <div [col]>\n            <bs-input-group>\n              <span class=\"addon\">\n                <spark-icon name=\"search\" />\n              </span>\n              <input\n                type=\"text\"\n                [placeholder]=\"'common.search' | t\"\n                [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"searchTerm.set($event)\">\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"searchTerm.set('')\">\n                  <spark-icon name=\"x-lg\" />\n                </button>\n              }\n            </bs-input-group>\n          </div>\n        </div>\n      </bs-grid>\n\n      <!-- List of items -->\n      <bs-table [striped]=\"true\" [hover]=\"true\">\n        <tbody class=\"align-middle\">\n          @for (item of filteredItems(); track item.key) {\n            <tr\n              [class.table-primary]=\"value() === item.key\"\n              (click)=\"select(item)\"\n              style=\"cursor: pointer;\">\n              <td>{{ item.values | resolveTranslation:item.key }}</td>\n            </tr>\n          } @empty {\n            <tr>\n              <td class=\"text-center text-muted\">{{ 'common.noItemsFound' | t }}</td>\n            </tr>\n          }\n        </tbody>\n      </bs-table>\n      </bs-form>\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"close()\">{{ 'common.cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColDirective, selector: "[col]", inputs: ["col"] }, { kind: "component", type: BsInputGroupComponent, selector: "bs-input-group", inputs: ["size"] }, { kind: "directive", type: BsButtonTypeDirective, selector: "button[color],input[type=\"button\"][color],input[type=\"submit\"][color],a[color]", inputs: ["color"] }, { kind: "component", type: BsModalHostComponent, selector: "bs-modal", inputs: ["isOpen", "closeOnEscape", "scrollable"], outputs: ["isOpenChange"] }, { kind: "directive", type: BsModalDirective, selector: "[bsModal]" }, { kind: "directive", type: BsModalHeaderDirective, selector: "[bsModalHeader]" }, { kind: "directive", type: BsModalBodyDirective, selector: "[bsModalBody]" }, { kind: "directive", type: BsModalFooterDirective, selector: "[bsModalFooter]" }, { kind: "component", type: BsTableComponent, selector: "bs-table", inputs: ["isResponsive", "striped", "hover", "border", "ariaRowCount"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+function refreshDispatch(attr) {
+	switch (effectiveTrigger(attr)) {
+		case "change": return isDiscreteEditor(attr) ? "immediate" : "debounced";
+		case "blur": return "blur";
+		default: return null;
+	}
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkLookupPickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spark-lookup-picker', imports: [FormsModule, BsFormComponent, BsFormControlDirective, BsGridComponent, BsGridRowDirective, BsGridColDirective, BsInputGroupComponent, BsButtonTypeDirective, BsModalHostComponent, BsModalDirective, BsModalHeaderDirective, BsModalBodyDirective, BsModalFooterDirective, BsTableComponent, SparkIconComponent, TranslateKeyPipe, ResolveTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-input-group>\n  <input\n    type=\"text\"\n    [id]=\"inputId()\"\n    [value]=\"displayValue()\"\n    readonly\n    [class.is-invalid]=\"isInvalid()\">\n  <button\n    type=\"button\"\n    bsInputGroupBtn\n    [color]=\"colors.secondary\"\n    (click)=\"open()\">\n    ...\n  </button>\n</bs-input-group>\n\n<bs-modal [isOpen]=\"showModal()\" (isOpenChange)=\"!$event && close()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.select' | t }} {{ title() }}</h5>\n    </div>\n\n    <div bsModalBody>\n      <!-- bs-modal portals its content into a CDK overlay outside the host form, so the\n           modal needs its own <bs-form> context for inputs to pick up .form-control styles. -->\n      <bs-form>\n      <!-- Search box -->\n      <bs-grid>\n        <div bsRow class=\"mb-3\">\n          <div [col]>\n            <bs-input-group>\n              <span class=\"addon\">\n                <spark-icon name=\"search\" />\n              </span>\n              <input\n                type=\"text\"\n                [placeholder]=\"'common.search' | t\"\n                [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"searchTerm.set($event)\">\n              @if (searchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"searchTerm.set('')\">\n                  <spark-icon name=\"x-lg\" />\n                </button>\n              }\n            </bs-input-group>\n          </div>\n        </div>\n      </bs-grid>\n\n      <!-- List of items -->\n      <bs-table [striped]=\"true\" [hover]=\"true\">\n        <tbody class=\"align-middle\">\n          @for (item of filteredItems(); track item.key) {\n            <tr\n              [class.table-primary]=\"value() === item.key\"\n              (click)=\"select(item)\"\n              style=\"cursor: pointer;\">\n              <td>{{ item.values | resolveTranslation:item.key }}</td>\n            </tr>\n          } @empty {\n            <tr>\n              <td class=\"text-center text-muted\">{{ 'common.noItemsFound' | t }}</td>\n            </tr>\n          }\n        </tbody>\n      </bs-table>\n      </bs-form>\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"close()\">{{ 'common.cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
-
-/**
- * Serializes refreshes for **one** form instance and drops superseded ones.
- *
- * Per-instance rather than a service, deliberately. The retry-action modal renders its own
- * `spark-po-form`, and a refresh can carry a retry operation — so a refresh can open a modal
- * containing a form whose own attributes may trigger refreshes. A shared coordinator would let the
- * nested form resolve or supersede the outer form's pending request. The same applies to the
- * recursive `spark-po-form` used for modal AsDetail editing.
- *
- * Cancellation is not available: the service layer is promise-based (`firstValueFrom`), so a stale
- * response *will* arrive. It is discarded by sequence number rather than prevented.
- */
-class RefreshCoordinator {
-    host;
-    queue = Promise.resolve();
-    sequence = 0;
-    settled = 0;
-    pending = new Set();
-    constructor(host) {
-        this.host = host;
-    }
-    /** Whether a refresh is in flight. */
-    get isRefreshing() {
-        return this.sequence !== this.settled;
-    }
-    /**
-     * Marks `attributeName` as needing a refresh without sending one — for free-text editors, which
-     * would otherwise issue a request per keystroke. Flushed by {@link blur} or {@link flush}.
-     */
-    markPending(attributeName) {
-        this.pending.add(attributeName);
-    }
-    /** Sends a pending refresh for `attributeName`, if one was marked. */
-    blur(attributeName) {
-        if (!this.pending.delete(attributeName))
-            return Promise.resolve();
-        return this.trigger(attributeName);
-    }
-    /**
-     * Sends every refresh still marked pending. Called before save, so a value typed and never blurred
-     * — the user tabbing straight to the save button — is still reflected before the object goes.
-     */
-    async flush() {
-        const names = [...this.pending];
-        this.pending.clear();
-        for (const name of names)
-            await this.trigger(name);
-        await this.queue;
-    }
-    /** Sends a refresh immediately — discrete editors, where every change is a committed one. */
-    trigger(attributeName) {
-        const ticket = ++this.sequence;
-        this.host.setBusy(true);
-        this.queue = this.queue.then(async () => {
-            const sent = { ...this.host.currentValues() };
-            try {
-                const response = await this.host.send(attributeName);
-                // A newer refresh was dispatched while this one was in flight, so this response describes a
-                // form state that no longer exists. Applying it would resurrect superseded metadata.
-                if (ticket !== this.sequence)
-                    return;
-                this.host.apply(response, sent);
-            }
-            finally {
-                this.settled = Math.max(this.settled, ticket);
-                if (!this.isRefreshing)
-                    this.host.setBusy(false);
-            }
-        });
-        return this.queue;
-    }
+function isDiscreteEditor(attr) {
+	if (!attr) return false;
+	if (attr.lookupReferenceType) return true;
+	switch ((attr.dataType ?? "").toLowerCase()) {
+		case "reference":
+		case "lookupreference":
+		case "boolean":
+		case "bool":
+		case "date":
+		case "datetime":
+		case "dateonly":
+		case "enum":
+		case "color": return true;
+		default: return false;
+	}
 }
-/**
- * Editors where every change is a deliberate, committed one, so a refresh fires immediately.
- * Everything else is free text, where firing per keystroke would be unacceptable and the refresh
- * waits for blur.
- *
- * ⚠️ This asks how the attribute is **rendered**, not what its `dataType` says, and the difference
- * is not academic. A lookup attribute carries the data type of its *key* — Fleet's `Car.Status` is
- * `dataType: "string"` with `lookupReferenceType: "CarStatus"` — so keying on `dataType` alone
- * classifies a `<bs-select>` as free text. It then waits for a blur that a select never emits, and
- * the refresh simply never fires: no request, no error, nothing to see.
- */
-function triggersImmediately(attr) {
-    if (!attr)
-        return false;
-    // A lookup renders as a select (or a modal picker) whatever its key's type is.
-    if (attr.lookupReferenceType)
-        return true;
-    switch ((attr.dataType ?? '').toLowerCase()) {
-        case 'reference':
-        case 'lookupreference':
-        case 'boolean':
-        case 'bool':
-        case 'date':
-        case 'datetime':
-        case 'dateonly':
-        case 'enum':
-        case 'color':
-            return true;
-        default:
-            return false;
-    }
-}
-/** Empty overlay, so callers do not have to spell the type. */
-const NO_OVERLAY = {};
-
-class SparkPoFormComponent {
-    sparkService = inject(SparkService);
-    translations = inject(SparkLanguageService);
-    rendererRegistry = inject(SPARK_ATTRIBUTE_RENDERERS);
-    entityType = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []));
-    formData = model({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "formData" }] : /* istanbul ignore next */ []));
-    validationErrors = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "validationErrors" }] : /* istanbul ignore next */ []));
-    showButtons = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showButtons" }] : /* istanbul ignore next */ []));
-    isSaving = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
-    parentId = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "parentId" }] : /* istanbul ignore next */ []));
-    parentType = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "parentType" }] : /* istanbul ignore next */ []));
-    save = output();
-    cancel = output();
-    /**
-     * The type id to refresh against. Absent means refresh is unavailable — the form still renders and
-     * edits normally, so a host that has not opted in loses nothing.
-     */
-    objectTypeId = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "objectTypeId" }] : /* istanbul ignore next */ []));
-    /** The id of the object being edited; absent for a create. */
-    objectId = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "objectId" }] : /* istanbul ignore next */ []));
-    /**
-     * Set when this form renders a single embedded AsDetail object inside a host form: the name of
-     * the attribute holding it, e.g. `"Gate"`. Presence of a prefix switches the form from issuing
-     * its own refreshes to reporting them upward, because an embedded object is not something the
-     * server can be asked about on its own — the request must describe, and be authorized against,
-     * the object that owns it.
-     */
-    triggerPathPrefix = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "triggerPathPrefix" }] : /* istanbul ignore next */ []));
-    /** Raised instead of self-issuing when {@link triggerPathPrefix} is set. */
-    nestedTriggerRequested = output();
-    /** Blur counterpart, flushing a trigger the host only marked pending. */
-    nestedTriggerBlurred = output();
-    /**
-     * What the last refresh changed about each attribute's presentation, keyed by attribute name.
-     *
-     * Deliberately NOT folded back into `entityType`. All option loading hangs off one effect keyed on
-     * `entityType` identity and `SparkService` caches nothing, so re-setting it would re-issue every
-     * reference query and lookup fetch on every refresh; mutating it in place would not re-render at
-     * all.
-     *
-     * ⚠️ A `model`, not a plain signal, because the page that owns the save has to see it. This form
-     * renders from the overlaid attribute list; `spark-po-edit` and `spark-po-create` build the
-     * payload from their own copy of the same filter. While the overlay stopped here, those two
-     * filtered on the attribute's state *as loaded* — so an attribute a refresh hook revealed was
-     * rendered, filled in by the user, and then silently left out of the save. When the same hook also
-     * made it required (the ordinary case — a field appears *because* it is now needed) the server
-     * refused the save for the very field the user had just filled, and the form became a dead end
-     * with no way forward from inside it.
-     */
-    refreshOverlay = model({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "refreshOverlay" }] : /* istanbul ignore next */ []));
-    isRefreshing = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isRefreshing" }] : /* istanbul ignore next */ []));
-    colors = Color;
-    referenceOptions = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "referenceOptions" }] : /* istanbul ignore next */ []));
-    // Multi-reference (Reference && isArray) editor state. Built from the same query
-    // results as referenceOptions: a flat TreeNode list per attribute drives an
-    // InMemoryTreeSelectProvider (the <bs-tree-select> data port), and a node lookup
-    // resolves selected ids back to chip labels.
-    referenceProviders = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "referenceProviders" }] : /* istanbul ignore next */ []));
-    referenceNodes = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "referenceNodes" }] : /* istanbul ignore next */ []));
-    asDetailTypes = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "asDetailTypes" }] : /* istanbul ignore next */ []));
-    lookupReferenceOptions = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : /* istanbul ignore next */ []));
-    // Modal state for AsDetail object editing
-    editingAsDetailAttr = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "editingAsDetailAttr" }] : /* istanbul ignore next */ []));
-    asDetailFormData = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "asDetailFormData" }] : /* istanbul ignore next */ []));
-    showAsDetailModal = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showAsDetailModal" }] : /* istanbul ignore next */ []));
-    editingArrayIndex = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "editingArrayIndex" }] : /* istanbul ignore next */ []));
-    // Permissions for array AsDetail entity types
-    asDetailPermissions = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "asDetailPermissions" }] : /* istanbul ignore next */ []));
-    /**
-     * What the server said when it refused to construct or release a row.
-     *
-     * A local signal rather than the `validationErrors` input, because this is the one class of error
-     * the form raises on its own behalf: `validationErrors` is owned by the host (po-edit / po-create)
-     * and arrives from a save. Cleared at the start of each lifecycle call, so a stale refusal never
-     * outlives the click that caused it.
-     *
-     * Keyed by attribute name so a message renders against the grid it came from. A single global
-     * alert would have been less code and worse: a form with two detail grids would show one grid's
-     * refusal above the other, and the user's next click is on the grid, not the top of the page.
-     */
-    rowLifecycleErrors = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rowLifecycleErrors" }] : /* istanbul ignore next */ []));
-    /** The refusal to render under `attrName`'s grid, if any. */
-    rowLifecycleErrorsFor(attrName) {
-        return this.rowLifecycleErrors()[attrName] ?? [];
-    }
-    // Reference options for columns within array AsDetail types (keyed by parent attr name, then column name)
-    asDetailReferenceOptions = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "asDetailReferenceOptions" }] : /* istanbul ignore next */ []));
-    // Reference/Lookup picking is owned by the standalone spark-reference-picker /
-    // spark-lookup-picker components (per-instance modal state); the form just feeds them
-    // options and writes the emitted value back into formData / the row.
-    ELookupDisplayType = ELookupDisplayType;
-    EReferenceDisplayType = EReferenceDisplayType;
-    /**
-     * Every attribute this form could ever need option data for — including ones the model hides,
-     * because a refresh may reveal them.
-     *
-     * Read by the option-loading effect, and deliberately independent of `refreshOverlay`: the loaders
-     * read this synchronously, so an overlay dependency here would make every refresh re-issue every
-     * reference query and lookup fetch. That is the whole reason the overlay is a separate signal.
-     */
-    optionSourceAttributes = computed(() => {
-        return this.entityType()?.attributes
-            .filter(a => hasShowedOnFlag(a.showedOn, ShowedOn.PersistentObject))
-            .sort((a, b) => a.order - b.order) || [];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "optionSourceAttributes" }] : /* istanbul ignore next */ []));
-    editableAttributes = computed(() => {
-        const overlay = this.refreshOverlay();
-        return this.entityType()?.attributes
-            .map(a => applyOverlay(a, overlay[a.name]))
-            .filter(a => a.isVisible && !a.isReadOnly && hasShowedOnFlag(a.showedOn, ShowedOn.PersistentObject))
-            .sort((a, b) => a.order - b.order) || [];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "editableAttributes" }] : /* istanbul ignore next */ []));
-    static DEFAULT_TAB = { id: '__default__', name: 'Algemeen', label: { nl: 'Algemeen', en: 'General' }, order: 0 };
-    ungroupedAttributes = computed(() => {
-        const attrs = this.editableAttributes();
-        const groupIds = new Set((this.entityType()?.groups || []).map(g => g.id));
-        return attrs.filter(a => !a.group || !groupIds.has(a.group));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ungroupedAttributes" }] : /* istanbul ignore next */ []));
-    resolvedTabs = computed(() => {
-        const et = this.entityType();
-        const definedTabs = et?.tabs?.length ? [...et.tabs].sort((a, b) => a.order - b.order) : [];
-        const hasUngroupedAttrs = this.ungroupedAttributes().length > 0;
-        const hasUntabbedGroups = (et?.groups || []).some(g => !g.tab);
-        if (hasUngroupedAttrs || hasUntabbedGroups || definedTabs.length === 0) {
-            return [SparkPoFormComponent.DEFAULT_TAB, ...definedTabs];
-        }
-        return definedTabs;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedTabs" }] : /* istanbul ignore next */ []));
-    groupsForTab(tab) {
-        const groups = this.entityType()?.groups || [];
-        if (tab.id === '__default__') {
-            return groups.filter(g => !g.tab).sort((a, b) => a.order - b.order);
-        }
-        return groups.filter(g => g.tab === tab.id).sort((a, b) => a.order - b.order);
-    }
-    attrsForGroup(group) {
-        return this.editableAttributes().filter(a => a.group === group.id);
-    }
-    constructor() {
-        effect(() => {
-            const et = this.entityType();
-            const _pid = this.parentId();
-            const _ptype = this.parentType();
-            if (et) {
-                this.loadReferenceOptions();
-                this.loadAsDetailTypes();
-                this.loadLookupReferenceOptions();
-            }
-        });
-    }
-    toRecord(entries) {
-        const result = {};
-        for (const [key, value] of entries) {
-            result[key] = value;
-        }
-        return result;
-    }
-    async loadReferenceOptions() {
-        const refAttrs = this.optionSourceAttributes().filter(a => a.dataType === 'Reference' && a.query);
-        if (refAttrs.length === 0)
-            return;
-        const entries = await Promise.all(refAttrs.filter(a => a.query).map(async (attr) => {
-            const result = await this.sparkService.executeQueryByName(attr.query, {
-                parentId: this.parentId(),
-                parentType: this.parentType(),
-            });
-            return [attr.name, result.items];
-        }));
-        const optionsByAttr = this.toRecord(entries);
-        this.referenceOptions.set(optionsByAttr);
-        // For multi-reference attributes (Reference && isArray), turn each query result
-        // into a flat TreeNode list + an in-memory provider for <bs-tree-select>, and a
-        // by-id node map used to render chip labels for the current selection.
-        const providers = {};
-        const nodesByAttr = {};
-        for (const attr of refAttrs) {
-            if (!attr.isArray)
-                continue;
-            const pos = optionsByAttr[attr.name] || [];
-            const nodes = pos
-                .filter(po => !!po.id)
-                .map(po => ({ id: po.id, label: po.breadcrumb || po.id }));
-            providers[attr.name] = new InMemoryTreeSelectProvider(nodes);
-            nodesByAttr[attr.name] = this.toRecord(nodes.map(n => [n.id, n]));
-        }
-        this.referenceProviders.set(providers);
-        this.referenceNodes.set(nodesByAttr);
-    }
-    /**
-     * Stable TreeNode[] value per multi-reference attribute, derived from the id array
-     * in formData and the resolved node map. Recomputes only when formData or the node
-     * map changes, so binding it into <bs-tree-select> doesn't churn on every CD pass.
-     * Ids without a resolved node fall back to a label of the id itself.
-     */
-    referenceTreeValues = computed(() => {
-        const fd = this.formData();
-        const nodesByAttr = this.referenceNodes();
-        const result = {};
-        for (const attr of this.editableAttributes()) {
-            if (attr.dataType !== 'Reference' || !attr.isArray)
-                continue;
-            const ids = Array.isArray(fd[attr.name]) ? fd[attr.name] : [];
-            const nodeMap = nodesByAttr[attr.name] || {};
-            result[attr.name] = ids.map(id => nodeMap[id] ?? { id, label: id });
-        }
-        return result;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "referenceTreeValues" }] : /* istanbul ignore next */ []));
-    getReferenceProvider(attr) {
-        return this.referenceProviders()[attr.name];
-    }
-    onReferenceTreeChange(attr, value) {
-        const nodes = Array.isArray(value) ? value : value ? [value] : [];
-        const data = { ...this.formData() };
-        data[attr.name] = nodes.map(n => n.id);
-        this.formData.set(data);
-    }
-    async loadAsDetailTypes() {
-        const asDetailAttrs = this.optionSourceAttributes().filter(a => a.dataType === 'AsDetail' && a.asDetailType);
-        if (asDetailAttrs.length === 0)
-            return;
-        const types = await this.sparkService.getEntityTypes();
-        const newAsDetailTypes = {};
-        // The catalogue is Query-gated, and a row type edited through its parent usually has no rights
-        // of its own — so it is normally absent from `types`, and resolving from there alone left
-        // `asDetailTypes` empty. `asDetailColumns` then returned [] and the table rendered with no
-        // columns at all. The server now ships the row definitions alongside the parent, gated on the
-        // parent's right; the catalogue stays the first source so nothing changes for a type that is
-        // in it (#385).
-        const embedded = this.entityType()?.detailTypes ?? [];
-        for (const attr of asDetailAttrs) {
-            const asDetailType = types.find(t => t.clrType === attr.asDetailType)
-                ?? embedded.find(t => t.clrType === attr.asDetailType);
-            if (asDetailType) {
-                newAsDetailTypes[attr.name] = asDetailType;
-                if (attr.isArray) {
-                    // Ask by CLR type when the row type carries no alias — the embedded copy has its alias
-                    // pruned, and `getPermissions` accepts either.
-                    const perms = await this.sparkService.getPermissions(asDetailType.id);
-                    this.asDetailPermissions.update(prev => ({ ...prev, [attr.name]: perms }));
-                    const refCols = asDetailType.attributes.filter(a => a.dataType === 'Reference' && a.query);
-                    if (refCols.length > 0) {
-                        const refEntries = await Promise.all(refCols.filter(c => c.query).map(async (col) => {
-                            const result = await this.sparkService.executeQueryByName(col.query, {
-                                parentId: this.parentId(),
-                                parentType: this.parentType(),
-                            });
-                            return [col.name, result.items];
-                        }));
-                        this.asDetailReferenceOptions.update(prev => ({ ...prev, [attr.name]: this.toRecord(refEntries) }));
-                    }
-                    // Inline editing of LookupReference child columns needs their options loaded
-                    // (keyed by lookup name in the shared lookupReferenceOptions, deduped).
-                    const lookupCols = asDetailType.attributes.filter(a => a.lookupReferenceType);
-                    for (const col of lookupCols) {
-                        const lookupName = col.lookupReferenceType;
-                        if (!this.lookupReferenceOptions()[lookupName]) {
-                            const ref = await this.sparkService.getLookupReference(lookupName);
-                            this.lookupReferenceOptions.update(prev => ({ ...prev, [lookupName]: ref }));
-                        }
-                    }
-                }
-            }
-        }
-        this.asDetailTypes.set(newAsDetailTypes);
-    }
-    async loadLookupReferenceOptions() {
-        const lookupAttrs = this.optionSourceAttributes().filter(a => a.lookupReferenceType);
-        if (lookupAttrs.length === 0)
-            return;
-        const lookupNames = [...new Set(lookupAttrs.map(a => a.lookupReferenceType))];
-        const entries = await Promise.all(lookupNames.map(async (name) => {
-            const ref = await this.sparkService.getLookupReference(name);
-            return [name, ref];
-        }));
-        this.lookupReferenceOptions.set(this.toRecord(entries));
-    }
-    getLookupOptions(attr) {
-        const lookupRef = attr.lookupReferenceType ? this.lookupReferenceOptions()[attr.lookupReferenceType] : null;
-        return lookupRef?.values.filter(v => v.isActive) || [];
-    }
-    // Write the value emitted by a top-level spark-reference-picker / spark-lookup-picker
-    // back into formData (the same write the old in-form modal selectors performed).
-    onReferenceValueChange(attr, id) {
-        const data = { ...this.formData() };
-        data[attr.name] = id;
-        this.formData.set(data);
-    }
-    onLookupValueChange(attr, key) {
-        const data = { ...this.formData() };
-        data[attr.name] = key;
-        this.formData.set(data);
-    }
-    getEditRendererComponent(attr) {
-        if (!attr.renderer)
-            return null;
-        const reg = this.rendererRegistry.find(r => r.name === attr.renderer);
-        return reg?.editComponent ?? null;
-    }
-    getEditRendererInputs(component, attr) {
-        return withDeclaredInputs(component, {
-            value: this.formData()[attr.name],
-            attribute: attr,
-            options: attr.rendererOptions,
-            valueChange: (newValue) => {
-                const data = { ...this.formData() };
-                data[attr.name] = newValue;
-                this.formData.set(data);
-            },
-        });
-    }
-    /** Column renderer for a cell of an AsDetail sub-table (so embedded rows honor `col.renderer` too). */
-    getAsDetailCellRendererComponent(col) {
-        if (!col.renderer)
-            return null;
-        return this.rendererRegistry.find(r => r.name === col.renderer)?.columnComponent ?? null;
-    }
-    getAsDetailCellRendererInputs(component, row, col) {
-        return withDeclaredInputs(component, {
-            value: row[col.name],
-            attribute: col,
-            options: col.rendererOptions,
-            item: row,
-        });
-    }
-    /** Edit-renderer for an inline AsDetail cell (so inline editing honors `col.renderer`, not just display). */
-    getAsDetailCellEditRenderer(col) {
-        if (!col.renderer)
-            return null;
-        return this.rendererRegistry.find(r => r.name === col.renderer)?.editComponent ?? null;
-    }
-    getAsDetailCellEditRendererInputs(component, row, col) {
-        return withDeclaredInputs(component, {
-            value: row[col.name],
-            attribute: col,
-            options: col.rendererOptions,
-            item: row,
-            valueChange: (newValue) => {
-                row[col.name] = newValue;
-                this.onFieldChange();
-            },
-        });
-    }
-    /**
-     * Rules evaluated in the browser, against the *effective* metadata — so a rule a refresh hook
-     * imposed is visible before the round-trip rather than only after the server rejects the save.
-     */
-    clientRuleFailures = computed(() => {
-        const values = this.formData();
-        return this.editableAttributes().flatMap(attr => evaluateRules(attr, values[attr.name]));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "clientRuleFailures" }] : /* istanbul ignore next */ []));
-    hasError(attrName) {
-        return this.clientRuleFailures().some(f => f.attributeName === attrName)
-            || this.validationErrors().some(e => e.attributeName === attrName);
-    }
-    // Per-cell validation for inline AsDetail rows. Server-emitted errors are keyed by the
-    // path "{attr}[{rowIndex}].{col}"; the client surfaces them like top-level field errors.
-    inlineErrorPath(attr, rowIndex, col) {
-        return `${attr.name}[${rowIndex}].${col.name}`;
-    }
-    hasInlineError(attr, rowIndex, col) {
-        const path = this.inlineErrorPath(attr, rowIndex, col);
-        return this.validationErrors().some(e => e.attributeName === path);
-    }
-    inlineErrorMessage(attr, rowIndex, col) {
-        const path = this.inlineErrorPath(attr, rowIndex, col);
-        const error = this.validationErrors().find(e => e.attributeName === path);
-        return error ? resolveTranslation(error.errorMessage) : null;
-    }
-    /**
-     * The single funnel every scalar / boolean / inline-cell edit passes through.
-     *
-     * `attr` is optional because some editors have nothing useful to say about which attribute moved.
-     * A caller that knows should always say so — without it no refresh can fire.
-     */
-    onFieldChange(attr) {
-        this.formData.set({ ...this.formData() });
-        if (attr)
-            this.noteChange(attr);
-    }
-    /**
-     * A trigger inside an AsDetail row. Addressed by the same `{attr}[{index}].{col}` path the inline
-     * validation errors already use, so the server can tell which row asked without a second
-     * addressing scheme being invented for it.
-     */
-    onInlineCellChange(attr, rowIndex, col) {
-        this.onFieldChange();
-        if (col.triggersRefresh !== true || !this.objectTypeId())
-            return;
-        const path = this.inlineErrorPath(attr, rowIndex, col);
-        this.pendingNestedTrigger = { kind: 'row', attribute: attr.name, rowIndex };
-        if (triggersImmediately(col)) {
-            void this.refreshCoordinator.trigger(path);
-        }
-        else {
-            this.refreshCoordinator.markPending(path);
-        }
-    }
-    /**
-     * Which embedded target the in-flight refresh belongs to, if any.
-     *
-     * ⚠️ Tagged, not a nullable `rowIndex`. The two arms write to different places — a row inside
-     * `formData`, versus the modal's working copy in `asDetailFormData` — and an index that happens
-     * to be absent is not the same statement as "this attribute holds one object". With a nullable
-     * index, a row refresh carrying a bad index would fall silently into the object arm.
-     */
-    pendingNestedTrigger = null;
-    /**
-     * A trigger inside a single embedded AsDetail object, raised by the modal's recursive form.
-     *
-     * The child form does not issue the request itself, for two reasons that both bite. Its
-     * `entityType` is the embedded type, so a payload built there describes `GateSettings` while the
-     * request must describe the Repository that owns it. And nested AsDetail types carry no rights of
-     * their own — the server authorizes a nested refresh on the OWNING type — so a child-issued
-     * request would be asking the wrong question of security.json.
-     */
-    onEmbeddedTrigger(attributeName, event) {
-        if (!this.objectTypeId())
-            return;
-        // Set on both arms, exactly as onInlineCellChange does: the blur that later flushes a pending
-        // trigger does not know which target it belongs to, so the mark is what remembers.
-        this.pendingNestedTrigger = { kind: 'object', attribute: attributeName };
-        if (event.immediate) {
-            void this.refreshCoordinator.trigger(event.path);
-        }
-        else {
-            this.refreshCoordinator.markPending(event.path);
-        }
-    }
-    /** Blur counterpart of {@link onEmbeddedTrigger}, for the child's free-text editors. */
-    onEmbeddedTriggerBlur(path) {
-        if (!this.objectTypeId())
-            return;
-        void this.refreshCoordinator.blur(path);
-    }
-    /**
-     * Applies a refresh that ran against a detail row: the row's own values, and the column metadata
-     * for the grid it lives in.
-     *
-     * The column metadata comes from `asDetailTypes` — a different signal from `entityType` — which is
-     * why a nested response cannot go through the top-level overlay.
-     *
-     * ⚠️ The row array is mutated in place rather than replaced. Rows are tracked by index, so handing
-     * the template a new array destroys and rebuilds every row's DOM and takes focus with it, mid-edit.
-     */
-    applyNestedResponse(nested, response) {
-        this.pendingNestedTrigger = null;
-        if (nested.kind === 'row') {
-            const rows = this.formData()[nested.attribute];
-            const row = Array.isArray(rows) ? rows[nested.rowIndex] : undefined;
-            if (row) {
-                for (const attribute of response.attributes ?? []) {
-                    row[attribute.name] = attribute.value ?? null;
-                }
-                // The array identity is unchanged; this only tells the signal graph the contents moved.
-                this.formData.set({ ...this.formData() });
-            }
-        }
-        else {
-            // ⚠️ The modal's working copy, never `formData`. `openAsDetailEditor` copies the embedded dict
-            // precisely so dismissing the modal discards the edit; writing a refreshed value through to
-            // the parent would make a cancelled edit stick. `saveAsDetailObject` remains the only writer.
-            //
-            // Replacing the object identity is also correct here, where mutating in place is correct for
-            // a row: rows are tracked by index and rebuilding them costs focus, while the recursive form
-            // re-renders from this signal by design.
-            const current = this.asDetailFormData();
-            const next = { ...current };
-            for (const attribute of response.attributes ?? []) {
-                next[attribute.name] = attribute.value ?? null;
-            }
-            this.asDetailFormData.set(next);
-        }
-        const overlay = overlayFromResponse(response);
-        this.asDetailTypes.update(prev => {
-            const type = prev[nested.attribute];
-            if (!type)
-                return prev;
-            return {
-                ...prev,
-                [nested.attribute]: {
-                    ...type,
-                    attributes: type.attributes.map(a => applyOverlay(a, overlay[a.name])),
-                },
-            };
-        });
-    }
-    onInlineCellBlur(attr, rowIndex, col) {
-        if (col.triggersRefresh !== true || !this.objectTypeId())
-            return;
-        void this.refreshCoordinator.blur(this.inlineErrorPath(attr, rowIndex, col));
-    }
-    /** Blur handler for free-text editors — sends the refresh their keystrokes only marked pending. */
-    onFieldBlur(attr) {
-        if (this.triggerPathPrefix()) {
-            if (attr.triggersRefresh !== true)
-                return;
-            this.nestedTriggerBlurred.emit(this.nestedTriggerPath(attr));
-            return;
-        }
-        if (!this.canRefresh(attr))
-            return;
-        void this.refreshCoordinator.blur(attr.name);
-    }
-    noteChange(attr) {
-        // Embedded: report upward and stop. The parent owns the request because only it knows the
-        // object being edited and holds the right the server authorizes against.
-        if (this.triggerPathPrefix()) {
-            if (attr.triggersRefresh !== true)
-                return;
-            this.nestedTriggerRequested.emit({
-                path: this.nestedTriggerPath(attr),
-                immediate: triggersImmediately(attr),
-            });
-            return;
-        }
-        if (!this.canRefresh(attr))
-            return;
-        if (triggersImmediately(attr)) {
-            void this.refreshCoordinator.trigger(attr.name);
-        }
-        else {
-            // Free text: marking is all a keystroke earns. The request goes on blur, or on save.
-            this.refreshCoordinator.markPending(attr.name);
-        }
-    }
-    /** `Gate.ProjectMode` — the index-free counterpart of the inline grid's `Jobs[1].Kind`. */
-    nestedTriggerPath(attr) {
-        return `${this.triggerPathPrefix()}.${attr.name}`;
-    }
-    canRefresh(attr) {
-        return attr.triggersRefresh === true && !!this.objectTypeId();
-    }
-    /**
-     * Per-instance, never a service: the retry-action modal renders its own `spark-po-form`, and a
-     * refresh may carry a retry operation — so a refresh can open a modal containing a form that
-     * refreshes. A shared coordinator would let the nested form supersede this one's request.
-     */
-    refreshCoordinator = new RefreshCoordinator({
-        send: (triggeredBy) => this.sparkService.refresh(this.objectTypeId(), this.buildRefreshPayload(), triggeredBy),
-        currentValues: () => this.formData(),
-        apply: (response, sent) => {
-            // A nested response describes a detail ROW, not this form. Applying it to the top-level
-            // overlay would hide every attribute the row does not happen to have.
-            const nested = this.pendingNestedTrigger;
-            if (nested) {
-                this.applyNestedResponse(nested, response);
-                return;
-            }
-            this.refreshOverlay.set(overlayFromResponse(response));
-            this.formData.set(mergeRefreshValues(sent, this.formData(), response));
-            this.applyRefreshedOptions(response);
-        },
-        setBusy: (busy) => this.isRefreshing.set(busy),
-    });
-    buildRefreshPayload() {
-        const et = this.entityType();
-        const values = this.embeddedValues();
-        return {
-            id: this.objectId(),
-            name: et?.name ?? '',
-            // The EntityType's id, never `objectTypeId()` — that is the ROUTE segment, which is an alias
-            // ("car") as often as a guid. The server types this field as a Guid, so an alias fails
-            // deserialization and the request 500s before the handler is reached: no hook, no error the
-            // client can act on. The route segment still carries the alias, which the server resolves.
-            objectTypeId: et?.id ?? this.objectTypeId(),
-            attributes: (et?.attributes ?? []).map(a => ({
-                name: a.name,
-                value: values[a.name] ?? null,
-                isValueChanged: true,
-            })),
-        };
-    }
-    /**
-     * The values to post, with the open modal's working copy substituted for the attribute it edits.
-     *
-     * ⚠️ Without this the server receives the embedded object as it was when the modal opened — `{}`
-     * for a gate that has never been set — and the hook decides against values the user cannot see it
-     * ignoring. `formData` deliberately does not hold the in-progress edit (cancelling the modal has
-     * to discard it), so the refresh has to reach into `asDetailFormData` instead. Only the attribute
-     * under edit is substituted; everything else is the form's own state.
-     */
-    embeddedValues() {
-        const nested = this.pendingNestedTrigger;
-        if (nested?.kind !== 'object')
-            return this.formData();
-        return { ...this.formData(), [nested.attribute]: this.asDetailFormData() };
-    }
-    /**
-     * Folds replaced option lists into the signals the editors already read, so a refreshed dropdown
-     * renders through the same path as a loaded one.
-     *
-     * `undefined` means the hook did not touch this attribute's options and the loaded set stands; an
-     * empty array means it deliberately left none. Collapsing the two would blank every dropdown the
-     * hook never mentioned.
-     */
-    applyRefreshedOptions(response) {
-        const replaced = (response.attributes ?? [])
-            .map(a => [a.name, a.options])
-            .filter(([, options]) => options !== undefined && options !== null);
-        if (replaced.length === 0)
-            return;
-        const byName = new Map(this.optionSourceAttributes().map(a => [a.name, a]));
-        this.lookupReferenceOptions.update(prev => {
-            const next = { ...prev };
-            for (const [name, options] of replaced) {
-                const attr = byName.get(name);
-                if (!attr?.lookupReferenceType)
-                    continue;
-                next[attr.lookupReferenceType] = {
-                    ...(next[attr.lookupReferenceType] ?? { name: attr.lookupReferenceType, isTransient: true, displayType: ELookupDisplayType.Dropdown }),
-                    values: (options ?? []).map(o => ({ key: o.key, values: o.label ?? { en: o.key }, isActive: true })),
-                };
-            }
-            return next;
-        });
-        this.referenceOptions.update(prev => {
-            const next = { ...prev };
-            for (const [name, options] of replaced) {
-                const attr = byName.get(name);
-                if (attr?.dataType !== 'Reference')
-                    continue;
-                // A refresh hook replaced this attribute's options, so synthesise the same row shape the
-                // query path produces: an id and a display string, which is all an option list ever needed.
-                next[name] = (options ?? []).map(o => ({
-                    id: o.key,
-                    breadcrumb: o.label ? resolveTranslation(o.label) : o.key,
-                    values: [],
-                }));
-            }
-            return next;
-        });
-    }
-    /** Sends anything still pending, so a typed-but-never-blurred trigger is reflected before save. */
-    async flushPendingRefresh() {
-        await this.refreshCoordinator.flush();
-    }
-    async onSave() {
-        // A value typed and never blurred — the user tabbing straight to Save — must still reshape the
-        // object before it goes, or the server enforces rules the user was never shown.
-        await this.flushPendingRefresh();
-        // Evaluated AFTER the flush: the refresh may be what imposes the rule being checked.
-        if (this.clientRuleFailures().length > 0)
-            return;
-        this.save.emit();
-    }
-    onCancel() {
-        this.cancel.emit();
-    }
-    // AsDetail object modal methods
-    openAsDetailEditor(attr) {
-        this.editingAsDetailAttr.set(attr);
-        this.editingArrayIndex.set(null);
-        this.asDetailFormData.set({ ...(this.formData()[attr.name] || {}) });
-        this.showAsDetailModal.set(true);
-    }
-    saveAsDetailObject() {
-        const attr = this.editingAsDetailAttr();
-        if (attr) {
-            const data = { ...this.formData() };
-            if (attr.isArray) {
-                const arr = [...(data[attr.name] || [])];
-                const idx = this.editingArrayIndex();
-                if (idx !== null) {
-                    arr[idx] = { ...this.asDetailFormData() };
-                }
-                else {
-                    arr.push({ ...this.asDetailFormData() });
-                }
-                data[attr.name] = arr;
-            }
-            else {
-                data[attr.name] = { ...this.asDetailFormData() };
-            }
-            this.formData.set(data);
-        }
-        this.closeAsDetailModal();
-    }
-    closeAsDetailModal() {
-        this.showAsDetailModal.set(false);
-        this.editingAsDetailAttr.set(null);
-        this.editingArrayIndex.set(null);
-        this.asDetailFormData.set({});
-    }
-    // ---- Server-side row lifecycle ------------------------------------------------------------
-    //
-    // A row type may opt in (EntityType.serverSideRowLifecycle) to having the server construct its
-    // new rows and be consulted before one is removed. Everything below is a no-op for a type that
-    // has not — which is the point: not opting in costs no request, and the four mutators behave
-    // exactly as they did before.
-    /**
-     * Whether `attr`'s row type asks the server before a row is added or removed.
-     *
-     * Read off the ROW type, never the parent. `asDetailTypes` already resolves it from the Query-gated
-     * catalogue first and the parent's `detailTypes` second, and the flag survives the server-side
-     * pruning of the embedded copy, so both sources give the same answer.
-     */
-    roundTripsRowLifecycle(attr) {
-        return this.asDetailTypes()[attr.name]?.serverSideRowLifecycle === true;
-    }
-    /** The type id to address the row type by on the wire. */
-    rowTypeId(attr) {
-        return this.asDetailTypes()[attr.name]?.id;
-    }
-    /**
-     * How to name the PARENT's type on the wire.
-     *
-     * ⚠️ The fallback must be the type **id**, never `clrType`. The server resolves this through
-     * `ModelLoader.ResolveEntityType`, which accepts a GUID or a declared alias and nothing else — so
-     * a CLR name resolves to null and the request is refused, indistinguishably from an unknown type.
-     * The user would see "the server refused this change" on a perfectly ordinary Add.
-     *
-     * It is a live path, not a theoretical one: `spark-po-create` binds no `parentType` (there is no
-     * parent route segment on a create page), so every host that creates an object with an opted-in
-     * detail grid lands here.
-     */
-    parentTypeForWire() {
-        return this.parentType() ?? this.entityType()?.id;
-    }
-    /**
-     * Builds the dict a new row starts from: `{}` as before, or the object the server constructed.
-     *
-     * Returns null when the server refused — the caller must then add nothing, which is the whole
-     * difference between a veto and a message.
-     */
-    async buildNewRow(attr) {
-        const typeId = this.rowTypeId(attr);
-        if (!this.roundTripsRowLifecycle(attr) || !typeId)
-            return {};
-        this.clearRowLifecycleError(attr.name);
-        try {
-            const po = await this.sparkService.newObject(typeId, {
-                asDetailAttribute: attr.name,
-                parentType: this.parentTypeForWire(),
-                // Absent while the parent is unsaved, deliberately: the server hands the hook a null parent
-                // rather than trusting the client's copy of one.
-                parentId: this.objectId(),
-            });
-            // nestedPoToDict carries the server-minted row key across as __sparkRowKey, so the row is
-            // matchable on save from the moment it appears — the reason the round trip is worth a request.
-            return nestedPoToDict(po);
-        }
-        catch (e) {
-            this.captureRowLifecycleError(attr.name, e);
-            return null;
-        }
-    }
-    /**
-     * Asks whether a stored row may be removed. True when it may — including every case where there
-     * is nothing to ask about: a type that has not opted in, a parent that has never been saved, or a
-     * row with no key yet because it was added in this same editing session and never persisted.
-     */
-    async mayRemoveRow(attr, row) {
-        const typeId = this.rowTypeId(attr);
-        const parentId = this.objectId();
-        const parentType = this.parentTypeForWire();
-        const rowKey = row?.[AS_DETAIL_ROW_KEY];
-        if (!this.roundTripsRowLifecycle(attr) || !typeId || !parentId || !parentType || !rowKey) {
-            return true;
-        }
-        this.clearRowLifecycleError(attr.name);
-        try {
-            await this.sparkService.deleteRow(typeId, {
-                asDetailAttribute: attr.name,
-                parentType,
-                parentId,
-                rowKey,
-            });
-            return true;
-        }
-        catch (e) {
-            this.captureRowLifecycleError(attr.name, e);
-            return false;
-        }
-    }
-    /**
-     * Turns a rejected lifecycle call into something the user can read.
-     *
-     * The envelope puts validation errors under `result`, the same place the save path reads them
-     * from — reading `error.error.errors` matched nothing and made every veto silent.
-     */
-    clearRowLifecycleError(attrName) {
-        this.rowLifecycleErrors.update(prev => {
-            const next = { ...prev };
-            delete next[attrName];
-            return next;
-        });
-    }
-    captureRowLifecycleError(attrName, e) {
-        const error = e;
-        const errors = error?.error?.result?.errors ?? error?.error?.errors;
-        const resolved = error?.status === 400 && errors?.length
-            ? errors
-            : [{
-                    attributeName: '',
-                    errorMessage: { en: error?.error?.result?.error || error?.error?.error || error?.message || 'The server refused this change.' },
-                    ruleType: 'error',
-                }];
-        this.rowLifecycleErrors.update(prev => ({ ...prev, [attrName]: resolved }));
-    }
-    // Inline AsDetail methods
-    async addInlineRow(attr) {
-        const row = await this.buildNewRow(attr);
-        if (row === null)
-            return;
-        const data = { ...this.formData() };
-        const arr = [...(data[attr.name] || [])];
-        arr.push(row);
-        data[attr.name] = arr;
-        this.formData.set(data);
-    }
-    // Array AsDetail methods
-    async addArrayItem(attr) {
-        const row = await this.buildNewRow(attr);
-        if (row === null)
-            return;
-        this.editingAsDetailAttr.set(attr);
-        this.editingArrayIndex.set(null);
-        this.asDetailFormData.set(row);
-        this.showAsDetailModal.set(true);
-    }
-    editArrayItem(attr, index) {
-        this.editingAsDetailAttr.set(attr);
-        this.editingArrayIndex.set(index);
-        const arr = this.formData()[attr.name] || [];
-        this.asDetailFormData.set({ ...(arr[index] || {}) });
-        this.showAsDetailModal.set(true);
-    }
-    async removeArrayItem(attr, index) {
-        const current = this.formData()[attr.name] || [];
-        if (!(await this.mayRemoveRow(attr, current[index])))
-            return;
-        const data = { ...this.formData() };
-        const arr = [...current];
-        arr.splice(index, 1);
-        data[attr.name] = arr;
-        this.formData.set(data);
-    }
-    // Drag-reorder for [Sortable] AsDetail arrays. Order = array position, so moving the
-    // row within formData()[attr.name] and re-emitting the signal IS the persisted order
-    // (po-edit flags AsDetail attributes isValueChanged on save).
-    onAsDetailReorder(attr, event) {
-        if (event.previousIndex === event.currentIndex)
-            return;
-        const data = { ...this.formData() };
-        const arr = [...(data[attr.name] ?? [])];
-        moveItemInArray(arr, event.previousIndex, event.currentIndex);
-        data[attr.name] = arr;
-        this.formData.set(data);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkPoFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkPoFormComponent, isStandalone: true, selector: "spark-po-form", inputs: { entityType: { classPropertyName: "entityType", publicName: "entityType", isSignal: true, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, validationErrors: { classPropertyName: "validationErrors", publicName: "validationErrors", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, isSaving: { classPropertyName: "isSaving", publicName: "isSaving", isSignal: true, isRequired: false, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: false, transformFunction: null }, objectTypeId: { classPropertyName: "objectTypeId", publicName: "objectTypeId", isSignal: true, isRequired: false, transformFunction: null }, objectId: { classPropertyName: "objectId", publicName: "objectId", isSignal: true, isRequired: false, transformFunction: null }, triggerPathPrefix: { classPropertyName: "triggerPathPrefix", publicName: "triggerPathPrefix", isSignal: true, isRequired: false, transformFunction: null }, refreshOverlay: { classPropertyName: "refreshOverlay", publicName: "refreshOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formData: "formDataChange", save: "save", cancel: "cancel", nestedTriggerRequested: "nestedTriggerRequested", nestedTriggerBlurred: "nestedTriggerBlurred", 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 \u2014\n               only `[Reference]` does \u2014 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", styles: [":host ::ng-deep .cdk-drag-placeholder{visibility:hidden}\n"], dependencies: [{ kind: "component", type: SparkPoFormComponent, selector: "spark-po-form", inputs: ["entityType", "formData", "validationErrors", "showButtons", "isSaving", "parentId", "parentType", "objectTypeId", "objectId", "triggerPathPrefix", "refreshOverlay"], outputs: ["formDataChange", "save", "cancel", "nestedTriggerRequested", "nestedTriggerBlurred", "refreshOverlayChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: BsCardComponent, selector: "bs-card", inputs: ["color", "outline"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["color", "navStyle"] }, { kind: "component", type: BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColumnDirective, selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]", inputs: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "directive", type: BsColFormLabelDirective, selector: "[bsColFormLabel]" }, { kind: "directive", type: BsButtonTypeDirective, selector: "button[color],input[type=\"button\"][color],input[type=\"submit\"][color],a[color]", inputs: ["color"] }, { kind: "component", type: BsInputGroupComponent, selector: "bs-input-group", inputs: ["size"] }, { kind: "component", type: BsSelectComponent, selector: "bs-select", inputs: ["identifier", "size", "multiple", "numberVisible", "disabled"] }, { kind: "directive", type: BsSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: BsTreeSelectComponent, selector: "bs-tree-select", inputs: ["provider", "mode", "variant", "cascadeSelect", "placeholder", "showClear", "panelScrollHeight", "searchDebounceMs", "disabled", "value"], outputs: ["valueChange", "opened", "closed", "cleared"] }, { kind: "component", type: BsModalHostComponent, selector: "bs-modal", inputs: ["isOpen", "closeOnEscape", "scrollable"], outputs: ["isOpenChange"] }, { kind: "directive", type: BsModalDirective, selector: "[bsModal]" }, { kind: "directive", type: BsModalHeaderDirective, selector: "[bsModalHeader]" }, { kind: "directive", type: BsModalBodyDirective, selector: "[bsModalBody]" }, { kind: "directive", type: BsModalFooterDirective, selector: "[bsModalFooter]" }, { kind: "component", type: BsTableComponent, selector: "bs-table", inputs: ["isResponsive", "striped", "hover", "border", "ariaRowCount"] }, { kind: "component", type: BsCheckboxComponent, selector: "bs-checkbox", inputs: ["type", "isToggled", "indeterminate", "name", "value", "group"], outputs: ["isToggledChange", "indeterminateChange"] }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: BsTabControlComponent, selector: "bs-tab-control", inputs: ["border", "selectFirstTab", "tabsPosition"] }, { kind: "component", type: BsTabPageComponent, selector: "bs-tab-page", inputs: ["disabled"] }, { kind: "directive", type: BsTabPageHeaderDirective, selector: "[bsTabPageHeader]" }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "component", type: SparkReferencePickerComponent, selector: "spark-reference-picker", inputs: ["value", "options", "referenceType", "isInvalid", "inputId", "title"], outputs: ["valueChange"] }, { kind: "component", type: SparkLookupPickerComponent, selector: "spark-lookup-picker", inputs: ["value", "options", "isInvalid", "inputId", "title"], outputs: ["valueChange"] }, { kind: "component", type: SparkAttributeDescriptionComponent, selector: "spark-attribute-description", inputs: ["description", "position"] }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: InputTypePipe, name: "inputType" }, { kind: "pipe", type: LookupDisplayTypePipe, name: "lookupDisplayType" }, { kind: "pipe", type: LookupOptionsPipe, name: "lookupOptions" }, { kind: "pipe", type: AsDetailDisplayValuePipe, name: "asDetailDisplayValue" }, { kind: "pipe", type: AsDetailTypePipe, name: "asDetailType" }, { kind: "pipe", type: AsDetailColumnsPipe, name: "asDetailColumns" }, { kind: "pipe", type: AsDetailCellValuePipe, name: "asDetailCellValue" }, { kind: "pipe", type: CanCreateDetailRowPipe, name: "canCreateDetailRow" }, { kind: "pipe", type: CanDeleteDetailRowPipe, name: "canDeleteDetailRow" }, { kind: "pipe", type: CanEditDetailRowPipe, name: "canEditDetailRow" }, { kind: "pipe", type: InlineRefOptionsPipe, name: "inlineRefOptions" }, { kind: "pipe", type: ErrorForAttributePipe, name: "errorForAttribute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkPoFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spark-po-form', imports: [CommonModule, NgTemplateOutlet, NgComponentOutlet, FormsModule, CdkDropList, CdkDrag, CdkDragHandle, CdkDragPreview, BsCardComponent, BsCardHeaderComponent, BsFormComponent, BsFormControlDirective, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsGridColDirective, BsColFormLabelDirective, BsButtonTypeDirective, BsInputGroupComponent, BsSelectComponent, BsSelectOption, BsTreeSelectComponent, BsModalHostComponent, BsModalDirective, BsModalHeaderDirective, BsModalBodyDirective, BsModalFooterDirective, BsTableComponent, BsCheckboxComponent, BsSpinnerComponent, BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective, SparkIconComponent, SparkPoFormComponent, SparkReferencePickerComponent, SparkLookupPickerComponent, TranslateKeyPipe, ResolveTranslationPipe, InputTypePipe, LookupDisplayTypePipe, LookupOptionsPipe, AsDetailDisplayValuePipe, AsDetailTypePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, CanCreateDetailRowPipe, CanDeleteDetailRowPipe, CanEditDetailRowPipe, InlineRefOptionsPipe, ErrorForAttributePipe, 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 \u2014\n               only `[Reference]` does \u2014 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", styles: [":host ::ng-deep .cdk-drag-placeholder{visibility:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { entityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityType", required: false }] }], formData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formData", required: false }] }, { type: i0.Output, args: ["formDataChange"] }], validationErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationErrors", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], isSaving: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSaving", required: false }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: false }] }], parentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentType", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], objectTypeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectTypeId", required: false }] }], objectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectId", required: false }] }], triggerPathPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerPathPrefix", required: false }] }], nestedTriggerRequested: [{ type: i0.Output, args: ["nestedTriggerRequested"] }], nestedTriggerBlurred: [{ type: i0.Output, args: ["nestedTriggerBlurred"] }], refreshOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshOverlay", required: false }] }, { type: i0.Output, args: ["refreshOverlayChange"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var SparkPoFormComponent = class SparkPoFormComponent {
+	sparkService = inject(SparkService);
+	translations = inject(SparkLanguageService);
+	rendererRegistry = inject(SPARK_ATTRIBUTE_RENDERERS);
+	entityType = input(null, ...ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []);
+	formData = model({}, ...ngDevMode ? [{ debugName: "formData" }] : /* istanbul ignore next */ []);
+	validationErrors = input([], ...ngDevMode ? [{ debugName: "validationErrors" }] : /* istanbul ignore next */ []);
+	showButtons = input(false, ...ngDevMode ? [{ debugName: "showButtons" }] : /* istanbul ignore next */ []);
+	isSaving = input(false, ...ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []);
+	parentId = input(void 0, ...ngDevMode ? [{ debugName: "parentId" }] : /* istanbul ignore next */ []);
+	parentType = input(void 0, ...ngDevMode ? [{ debugName: "parentType" }] : /* istanbul ignore next */ []);
+	save = output();
+	cancel = output();
+	objectTypeId = input(void 0, ...ngDevMode ? [{ debugName: "objectTypeId" }] : /* istanbul ignore next */ []);
+	objectId = input(void 0, ...ngDevMode ? [{ debugName: "objectId" }] : /* istanbul ignore next */ []);
+	triggerPathPrefix = input(null, ...ngDevMode ? [{ debugName: "triggerPathPrefix" }] : /* istanbul ignore next */ []);
+	nestedTriggerRequested = output();
+	nestedTriggerBlurred = output();
+	refreshOverlay = model({}, ...ngDevMode ? [{ debugName: "refreshOverlay" }] : /* istanbul ignore next */ []);
+	isRefreshing = signal(false, ...ngDevMode ? [{ debugName: "isRefreshing" }] : /* istanbul ignore next */ []);
+	colors = Color;
+	referenceOptions = signal({}, ...ngDevMode ? [{ debugName: "referenceOptions" }] : /* istanbul ignore next */ []);
+	referenceProviders = signal({}, ...ngDevMode ? [{ debugName: "referenceProviders" }] : /* istanbul ignore next */ []);
+	referenceNodes = signal({}, ...ngDevMode ? [{ debugName: "referenceNodes" }] : /* istanbul ignore next */ []);
+	asDetailTypes = signal({}, ...ngDevMode ? [{ debugName: "asDetailTypes" }] : /* istanbul ignore next */ []);
+	lookupReferenceOptions = signal({}, ...ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : /* istanbul ignore next */ []);
+	editingAsDetailAttr = signal(null, ...ngDevMode ? [{ debugName: "editingAsDetailAttr" }] : /* istanbul ignore next */ []);
+	asDetailFormData = signal({}, ...ngDevMode ? [{ debugName: "asDetailFormData" }] : /* istanbul ignore next */ []);
+	showAsDetailModal = signal(false, ...ngDevMode ? [{ debugName: "showAsDetailModal" }] : /* istanbul ignore next */ []);
+	editingArrayIndex = signal(null, ...ngDevMode ? [{ debugName: "editingArrayIndex" }] : /* istanbul ignore next */ []);
+	asDetailPermissions = signal({}, ...ngDevMode ? [{ debugName: "asDetailPermissions" }] : /* istanbul ignore next */ []);
+	rowLifecycleErrors = signal({}, ...ngDevMode ? [{ debugName: "rowLifecycleErrors" }] : /* istanbul ignore next */ []);
+	rowLifecycleErrorsFor(attrName) {
+		return this.rowLifecycleErrors()[attrName] ?? [];
+	}
+	asDetailReferenceOptions = signal({}, ...ngDevMode ? [{ debugName: "asDetailReferenceOptions" }] : /* istanbul ignore next */ []);
+	ELookupDisplayType = ELookupDisplayType;
+	EReferenceDisplayType = EReferenceDisplayType;
+	optionSourceAttributes = computed(() => {
+		return this.entityType()?.attributes.filter((a) => hasShowedOnFlag(a.showedOn, ShowedOn.PersistentObject)).sort((a, b) => a.order - b.order) || [];
+	}, ...ngDevMode ? [{ debugName: "optionSourceAttributes" }] : /* istanbul ignore next */ []);
+	editableAttributes = computed(() => {
+		const overlay = this.refreshOverlay();
+		return this.entityType()?.attributes.map((a) => applyOverlay(a, overlay[a.name])).filter((a) => a.isVisible && !a.isReadOnly && hasShowedOnFlag(a.showedOn, ShowedOn.PersistentObject)).sort((a, b) => a.order - b.order) || [];
+	}, ...ngDevMode ? [{ debugName: "editableAttributes" }] : /* istanbul ignore next */ []);
+	static DEFAULT_TAB = {
+		id: "__default__",
+		name: "Algemeen",
+		label: {
+			nl: "Algemeen",
+			en: "General"
+		},
+		order: 0
+	};
+	ungroupedAttributes = computed(() => {
+		const attrs = this.editableAttributes();
+		const groupIds = new Set((this.entityType()?.groups || []).map((g) => g.id));
+		return attrs.filter((a) => !a.group || !groupIds.has(a.group));
+	}, ...ngDevMode ? [{ debugName: "ungroupedAttributes" }] : /* istanbul ignore next */ []);
+	resolvedTabs = computed(() => {
+		const et = this.entityType();
+		const definedTabs = et?.tabs?.length ? [...et.tabs].sort((a, b) => a.order - b.order) : [];
+		const hasUngroupedAttrs = this.ungroupedAttributes().length > 0;
+		const hasUntabbedGroups = (et?.groups || []).some((g) => !g.tab);
+		if (hasUngroupedAttrs || hasUntabbedGroups || definedTabs.length === 0) return [SparkPoFormComponent.DEFAULT_TAB, ...definedTabs];
+		return definedTabs;
+	}, ...ngDevMode ? [{ debugName: "resolvedTabs" }] : /* istanbul ignore next */ []);
+	groupsForTab(tab) {
+		const groups = this.entityType()?.groups || [];
+		if (tab.id === "__default__") return groups.filter((g) => !g.tab).sort((a, b) => a.order - b.order);
+		return groups.filter((g) => g.tab === tab.id).sort((a, b) => a.order - b.order);
+	}
+	attrsForGroup(group) {
+		return this.editableAttributes().filter((a) => a.group === group.id);
+	}
+	constructor() {
+		inject(DestroyRef).onDestroy(() => this.refreshCoordinator.dispose());
+		effect(() => {
+			const et = this.entityType();
+			this.parentId();
+			this.parentType();
+			if (et) {
+				this.loadReferenceOptions();
+				this.loadAsDetailTypes();
+				this.loadLookupReferenceOptions();
+			}
+		});
+	}
+	toRecord(entries) {
+		const result = {};
+		for (const [key, value] of entries) result[key] = value;
+		return result;
+	}
+	async loadReferenceOptions() {
+		const refAttrs = this.optionSourceAttributes().filter((a) => a.dataType === "Reference" && a.query);
+		if (refAttrs.length === 0) return;
+		const entries = await Promise.all(refAttrs.filter((a) => a.query).map(async (attr) => {
+			const result = await this.sparkService.executeQueryByName(attr.query, {
+				parentId: this.parentId(),
+				parentType: this.parentType()
+			});
+			return [attr.name, result.items];
+		}));
+		const optionsByAttr = this.toRecord(entries);
+		this.referenceOptions.set(optionsByAttr);
+		const providers = {};
+		const nodesByAttr = {};
+		for (const attr of refAttrs) {
+			if (!attr.isArray) continue;
+			const nodes = (optionsByAttr[attr.name] || []).filter((po) => !!po.id).map((po) => ({
+				id: po.id,
+				label: po.breadcrumb || po.id
+			}));
+			providers[attr.name] = new InMemoryTreeSelectProvider(nodes);
+			nodesByAttr[attr.name] = this.toRecord(nodes.map((n) => [n.id, n]));
+		}
+		this.referenceProviders.set(providers);
+		this.referenceNodes.set(nodesByAttr);
+	}
+	referenceTreeValues = computed(() => {
+		const fd = this.formData();
+		const nodesByAttr = this.referenceNodes();
+		const result = {};
+		for (const attr of this.editableAttributes()) {
+			if (attr.dataType !== "Reference" || !attr.isArray) continue;
+			const ids = Array.isArray(fd[attr.name]) ? fd[attr.name] : [];
+			const nodeMap = nodesByAttr[attr.name] || {};
+			result[attr.name] = ids.map((id) => nodeMap[id] ?? {
+				id,
+				label: id
+			});
+		}
+		return result;
+	}, ...ngDevMode ? [{ debugName: "referenceTreeValues" }] : /* istanbul ignore next */ []);
+	getReferenceProvider(attr) {
+		return this.referenceProviders()[attr.name];
+	}
+	onReferenceTreeChange(attr, value) {
+		const nodes = Array.isArray(value) ? value : value ? [value] : [];
+		const data = { ...this.formData() };
+		data[attr.name] = nodes.map((n) => n.id);
+		this.formData.set(data);
+	}
+	async loadAsDetailTypes() {
+		const asDetailAttrs = this.optionSourceAttributes().filter((a) => a.dataType === "AsDetail" && a.asDetailType);
+		if (asDetailAttrs.length === 0) return;
+		const types = await this.sparkService.getEntityTypes();
+		const newAsDetailTypes = {};
+		const embedded = this.entityType()?.detailTypes ?? [];
+		for (const attr of asDetailAttrs) {
+			const asDetailType = types.find((t) => t.clrType === attr.asDetailType) ?? embedded.find((t) => t.clrType === attr.asDetailType);
+			if (asDetailType) {
+				newAsDetailTypes[attr.name] = asDetailType;
+				if (attr.isArray) {
+					const perms = await this.sparkService.getPermissions(asDetailType.id);
+					this.asDetailPermissions.update((prev) => ({
+						...prev,
+						[attr.name]: perms
+					}));
+					const refCols = asDetailType.attributes.filter((a) => a.dataType === "Reference" && a.query);
+					if (refCols.length > 0) {
+						const refEntries = await Promise.all(refCols.filter((c) => c.query).map(async (col) => {
+							const result = await this.sparkService.executeQueryByName(col.query, {
+								parentId: this.parentId(),
+								parentType: this.parentType()
+							});
+							return [col.name, result.items];
+						}));
+						this.asDetailReferenceOptions.update((prev) => ({
+							...prev,
+							[attr.name]: this.toRecord(refEntries)
+						}));
+					}
+					const lookupCols = asDetailType.attributes.filter((a) => a.lookupReferenceType);
+					for (const col of lookupCols) {
+						const lookupName = col.lookupReferenceType;
+						if (!this.lookupReferenceOptions()[lookupName]) {
+							const ref = await this.sparkService.getLookupReference(lookupName);
+							this.lookupReferenceOptions.update((prev) => ({
+								...prev,
+								[lookupName]: ref
+							}));
+						}
+					}
+				}
+			}
+		}
+		this.asDetailTypes.set(newAsDetailTypes);
+	}
+	async loadLookupReferenceOptions() {
+		const lookupAttrs = this.optionSourceAttributes().filter((a) => a.lookupReferenceType);
+		if (lookupAttrs.length === 0) return;
+		const lookupNames = [...new Set(lookupAttrs.map((a) => a.lookupReferenceType))];
+		const entries = await Promise.all(lookupNames.map(async (name) => {
+			return [name, await this.sparkService.getLookupReference(name)];
+		}));
+		this.lookupReferenceOptions.set(this.toRecord(entries));
+	}
+	getLookupOptions(attr) {
+		return (attr.lookupReferenceType ? this.lookupReferenceOptions()[attr.lookupReferenceType] : null)?.values.filter((v) => v.isActive) || [];
+	}
+	onReferenceValueChange(attr, id) {
+		const data = { ...this.formData() };
+		data[attr.name] = id;
+		this.formData.set(data);
+	}
+	onLookupValueChange(attr, key) {
+		const data = { ...this.formData() };
+		data[attr.name] = key;
+		this.formData.set(data);
+	}
+	getEditRendererComponent(attr) {
+		if (!attr.renderer) return null;
+		return this.rendererRegistry.find((r) => r.name === attr.renderer)?.editComponent ?? null;
+	}
+	getEditRendererInputs(component, attr) {
+		return withDeclaredInputs(component, {
+			value: this.formData()[attr.name],
+			attribute: attr,
+			options: attr.rendererOptions,
+			valueChange: (newValue) => {
+				const data = { ...this.formData() };
+				data[attr.name] = newValue;
+				this.formData.set(data);
+			}
+		});
+	}
+	getAsDetailCellRendererComponent(col) {
+		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],
+			attribute: col,
+			options: col.rendererOptions,
+			item: row
+		});
+	}
+	getAsDetailCellEditRenderer(col) {
+		if (!col.renderer) return null;
+		return this.rendererRegistry.find((r) => r.name === col.renderer)?.editComponent ?? null;
+	}
+	getAsDetailCellEditRendererInputs(component, row, col) {
+		return withDeclaredInputs(component, {
+			value: row[col.name],
+			attribute: col,
+			options: col.rendererOptions,
+			item: row,
+			valueChange: (newValue) => {
+				row[col.name] = newValue;
+				this.onFieldChange();
+			}
+		});
+	}
+	clientRuleFailures = computed(() => {
+		const values = this.formData();
+		return this.editableAttributes().flatMap((attr) => evaluateRules(attr, values[attr.name]));
+	}, ...ngDevMode ? [{ debugName: "clientRuleFailures" }] : /* istanbul ignore next */ []);
+	hasError(attrName) {
+		return this.clientRuleFailures().some((f) => f.attributeName === attrName) || this.validationErrors().some((e) => e.attributeName === attrName);
+	}
+	inlineErrorPath(attr, rowIndex, col) {
+		return `${attr.name}[${rowIndex}].${col.name}`;
+	}
+	hasInlineError(attr, rowIndex, col) {
+		const path = this.inlineErrorPath(attr, rowIndex, col);
+		return this.validationErrors().some((e) => e.attributeName === path);
+	}
+	inlineErrorMessage(attr, rowIndex, col) {
+		const path = this.inlineErrorPath(attr, rowIndex, col);
+		const error = this.validationErrors().find((e) => e.attributeName === path);
+		return error ? resolveTranslation(error.errorMessage) : null;
+	}
+	onFieldChange(attr) {
+		this.formData.set({ ...this.formData() });
+		if (attr) this.noteChange(attr);
+	}
+	onInlineCellChange(attr, rowIndex, col) {
+		this.onFieldChange();
+		const dispatch = refreshDispatch(col);
+		if (!dispatch || !this.objectTypeId()) return;
+		const path = this.inlineErrorPath(attr, rowIndex, col);
+		this.pendingNestedTrigger = {
+			kind: "row",
+			attribute: attr.name,
+			rowIndex
+		};
+		this.refreshCoordinator.dispatch(path, dispatch);
+	}
+	pendingNestedTrigger = null;
+	onEmbeddedTrigger(attributeName, event) {
+		if (!this.objectTypeId()) return;
+		this.pendingNestedTrigger = {
+			kind: "object",
+			attribute: attributeName
+		};
+		this.refreshCoordinator.dispatch(event.path, event.dispatch);
+	}
+	onEmbeddedTriggerBlur(path) {
+		if (!this.objectTypeId()) return;
+		this.refreshCoordinator.blur(path);
+	}
+	applyNestedResponse(nested, response) {
+		this.pendingNestedTrigger = null;
+		if (nested.kind === "row") {
+			const rows = this.formData()[nested.attribute];
+			const row = Array.isArray(rows) ? rows[nested.rowIndex] : void 0;
+			if (row) {
+				for (const attribute of response.attributes ?? []) row[attribute.name] = attribute.value ?? null;
+				this.formData.set({ ...this.formData() });
+			}
+		} else {
+			const next = { ...this.asDetailFormData() };
+			for (const attribute of response.attributes ?? []) next[attribute.name] = attribute.value ?? null;
+			this.asDetailFormData.set(next);
+		}
+		const overlay = overlayFromResponse(response);
+		this.asDetailTypes.update((prev) => {
+			const type = prev[nested.attribute];
+			if (!type) return prev;
+			return {
+				...prev,
+				[nested.attribute]: {
+					...type,
+					attributes: type.attributes.map((a) => applyOverlay(a, overlay[a.name]))
+				}
+			};
+		});
+	}
+	onInlineCellBlur(attr, rowIndex, col) {
+		if (effectiveTrigger(col) === "none" || !this.objectTypeId()) return;
+		this.refreshCoordinator.blur(this.inlineErrorPath(attr, rowIndex, col));
+	}
+	onFieldBlur(attr) {
+		if (this.triggerPathPrefix()) {
+			if (effectiveTrigger(attr) === "none") return;
+			this.nestedTriggerBlurred.emit(this.nestedTriggerPath(attr));
+			return;
+		}
+		if (!this.canRefresh(attr)) return;
+		this.refreshCoordinator.blur(attr.name);
+	}
+	noteChange(attr) {
+		const dispatch = refreshDispatch(attr);
+		if (this.triggerPathPrefix()) {
+			if (!dispatch) return;
+			this.nestedTriggerRequested.emit({
+				path: this.nestedTriggerPath(attr),
+				dispatch
+			});
+			return;
+		}
+		if (!dispatch || !this.canRefresh(attr)) return;
+		this.refreshCoordinator.dispatch(attr.name, dispatch);
+	}
+	nestedTriggerPath(attr) {
+		return `${this.triggerPathPrefix()}.${attr.name}`;
+	}
+	canRefresh(attr) {
+		return effectiveTrigger(attr) !== "none" && !!this.objectTypeId();
+	}
+	refreshCoordinator = new RefreshCoordinator({
+		send: (triggeredBy) => this.sparkService.refresh(this.objectTypeId(), this.buildRefreshPayload(), triggeredBy),
+		currentValues: () => this.formData(),
+		apply: (response, sent) => {
+			const nested = this.pendingNestedTrigger;
+			if (nested) {
+				this.applyNestedResponse(nested, response);
+				return;
+			}
+			this.refreshOverlay.set(overlayFromResponse(response));
+			this.formData.set(mergeRefreshValues(sent, this.formData(), response));
+			this.applyRefreshedOptions(response);
+		},
+		setBusy: (busy) => this.isRefreshing.set(busy)
+	});
+	buildRefreshPayload() {
+		const et = this.entityType();
+		const values = this.embeddedValues();
+		return {
+			id: this.objectId(),
+			name: et?.name ?? "",
+			objectTypeId: et?.id ?? this.objectTypeId(),
+			attributes: (et?.attributes ?? []).map((a) => ({
+				name: a.name,
+				value: values[a.name] ?? null,
+				isValueChanged: true
+			}))
+		};
+	}
+	embeddedValues() {
+		const nested = this.pendingNestedTrigger;
+		if (nested?.kind !== "object") return this.formData();
+		return {
+			...this.formData(),
+			[nested.attribute]: this.asDetailFormData()
+		};
+	}
+	applyRefreshedOptions(response) {
+		const replaced = (response.attributes ?? []).map((a) => [a.name, a.options]).filter(([, options]) => options !== void 0 && options !== null);
+		if (replaced.length === 0) return;
+		const byName = new Map(this.optionSourceAttributes().map((a) => [a.name, a]));
+		this.lookupReferenceOptions.update((prev) => {
+			const next = { ...prev };
+			for (const [name, options] of replaced) {
+				const attr = byName.get(name);
+				if (!attr?.lookupReferenceType) continue;
+				next[attr.lookupReferenceType] = {
+					...next[attr.lookupReferenceType] ?? {
+						name: attr.lookupReferenceType,
+						isTransient: true,
+						displayType: ELookupDisplayType.Dropdown
+					},
+					values: (options ?? []).map((o) => ({
+						key: o.key,
+						values: o.label ?? { en: o.key },
+						isActive: true
+					}))
+				};
+			}
+			return next;
+		});
+		this.referenceOptions.update((prev) => {
+			const next = { ...prev };
+			for (const [name, options] of replaced) {
+				if (byName.get(name)?.dataType !== "Reference") continue;
+				next[name] = (options ?? []).map((o) => ({
+					id: o.key,
+					breadcrumb: o.label ? resolveTranslation(o.label) : o.key,
+					values: []
+				}));
+			}
+			return next;
+		});
+	}
+	async flushPendingRefresh() {
+		await this.refreshCoordinator.flush();
+	}
+	async onSave() {
+		await this.flushPendingRefresh();
+		if (this.clientRuleFailures().length > 0) return;
+		this.save.emit();
+	}
+	onCancel() {
+		this.cancel.emit();
+	}
+	openAsDetailEditor(attr) {
+		this.editingAsDetailAttr.set(attr);
+		this.editingArrayIndex.set(null);
+		this.asDetailFormData.set({ ...this.formData()[attr.name] || {} });
+		this.showAsDetailModal.set(true);
+	}
+	saveAsDetailObject() {
+		const attr = this.editingAsDetailAttr();
+		if (attr) {
+			const data = { ...this.formData() };
+			if (attr.isArray) {
+				const arr = [...data[attr.name] || []];
+				const idx = this.editingArrayIndex();
+				if (idx !== null) arr[idx] = { ...this.asDetailFormData() };
+				else arr.push({ ...this.asDetailFormData() });
+				data[attr.name] = arr;
+			} else data[attr.name] = { ...this.asDetailFormData() };
+			this.formData.set(data);
+		}
+		this.closeAsDetailModal();
+	}
+	closeAsDetailModal() {
+		this.showAsDetailModal.set(false);
+		this.editingAsDetailAttr.set(null);
+		this.editingArrayIndex.set(null);
+		this.asDetailFormData.set({});
+	}
+	roundTripsRowLifecycle(attr) {
+		return this.asDetailTypes()[attr.name]?.serverSideRowLifecycle === true;
+	}
+	rowTypeId(attr) {
+		return this.asDetailTypes()[attr.name]?.id;
+	}
+	parentTypeForWire() {
+		return this.parentType() ?? this.entityType()?.id;
+	}
+	async buildNewRow(attr) {
+		const typeId = this.rowTypeId(attr);
+		if (!this.roundTripsRowLifecycle(attr) || !typeId) return {};
+		this.clearRowLifecycleError(attr.name);
+		try {
+			const po = await this.sparkService.newObject(typeId, {
+				asDetailAttribute: attr.name,
+				parentType: this.parentTypeForWire(),
+				parentId: this.objectId()
+			});
+			return nestedPoToDict(po);
+		} catch (e) {
+			this.captureRowLifecycleError(attr.name, e);
+			return null;
+		}
+	}
+	async mayRemoveRow(attr, row) {
+		const typeId = this.rowTypeId(attr);
+		const parentId = this.objectId();
+		const parentType = this.parentTypeForWire();
+		const rowKey = row?.[AS_DETAIL_ROW_KEY];
+		if (!this.roundTripsRowLifecycle(attr) || !typeId || !parentId || !parentType || !rowKey) return true;
+		this.clearRowLifecycleError(attr.name);
+		try {
+			await this.sparkService.deleteRow(typeId, {
+				asDetailAttribute: attr.name,
+				parentType,
+				parentId,
+				rowKey
+			});
+			return true;
+		} catch (e) {
+			this.captureRowLifecycleError(attr.name, e);
+			return false;
+		}
+	}
+	clearRowLifecycleError(attrName) {
+		this.rowLifecycleErrors.update((prev) => {
+			const next = { ...prev };
+			delete next[attrName];
+			return next;
+		});
+	}
+	captureRowLifecycleError(attrName, e) {
+		const error = e;
+		const errors = error?.error?.result?.errors ?? error?.error?.errors;
+		const resolved = error?.status === 400 && errors?.length ? errors : [{
+			attributeName: "",
+			errorMessage: { en: error?.error?.result?.error || error?.error?.error || error?.message || "The server refused this change." },
+			ruleType: "error"
+		}];
+		this.rowLifecycleErrors.update((prev) => ({
+			...prev,
+			[attrName]: resolved
+		}));
+	}
+	async addInlineRow(attr) {
+		const row = await this.buildNewRow(attr);
+		if (row === null) return;
+		const data = { ...this.formData() };
+		const arr = [...data[attr.name] || []];
+		arr.push(row);
+		data[attr.name] = arr;
+		this.formData.set(data);
+	}
+	async addArrayItem(attr) {
+		const row = await this.buildNewRow(attr);
+		if (row === null) return;
+		this.editingAsDetailAttr.set(attr);
+		this.editingArrayIndex.set(null);
+		this.asDetailFormData.set(row);
+		this.showAsDetailModal.set(true);
+	}
+	editArrayItem(attr, index) {
+		this.editingAsDetailAttr.set(attr);
+		this.editingArrayIndex.set(index);
+		const arr = this.formData()[attr.name] || [];
+		this.asDetailFormData.set({ ...arr[index] || {} });
+		this.showAsDetailModal.set(true);
+	}
+	async removeArrayItem(attr, index) {
+		const current = this.formData()[attr.name] || [];
+		if (!await this.mayRemoveRow(attr, current[index])) return;
+		const data = { ...this.formData() };
+		const arr = [...current];
+		arr.splice(index, 1);
+		data[attr.name] = arr;
+		this.formData.set(data);
+	}
+	onAsDetailReorder(attr, event) {
+		if (event.previousIndex === event.currentIndex) return;
+		const data = { ...this.formData() };
+		const arr = [...data[attr.name] ?? []];
+		moveItemInArray(arr, event.previousIndex, event.currentIndex);
+		data[attr.name] = arr;
+		this.formData.set(data);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkPoFormComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SparkPoFormComponent,
+		isStandalone: true,
+		selector: "spark-po-form",
+		inputs: {
+			entityType: {
+				classPropertyName: "entityType",
+				publicName: "entityType",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			formData: {
+				classPropertyName: "formData",
+				publicName: "formData",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			validationErrors: {
+				classPropertyName: "validationErrors",
+				publicName: "validationErrors",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showButtons: {
+				classPropertyName: "showButtons",
+				publicName: "showButtons",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isSaving: {
+				classPropertyName: "isSaving",
+				publicName: "isSaving",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			parentId: {
+				classPropertyName: "parentId",
+				publicName: "parentId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			parentType: {
+				classPropertyName: "parentType",
+				publicName: "parentType",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			objectTypeId: {
+				classPropertyName: "objectTypeId",
+				publicName: "objectTypeId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			objectId: {
+				classPropertyName: "objectId",
+				publicName: "objectId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			triggerPathPrefix: {
+				classPropertyName: "triggerPathPrefix",
+				publicName: "triggerPathPrefix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			refreshOverlay: {
+				classPropertyName: "refreshOverlay",
+				publicName: "refreshOverlay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			formData: "formDataChange",
+			save: "save",
+			cancel: "cancel",
+			nestedTriggerRequested: "nestedTriggerRequested",
+			nestedTriggerBlurred: "nestedTriggerBlurred",
+			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\" 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: [
+			{
+				kind: "component",
+				type: SparkPoFormComponent,
+				selector: "spark-po-form",
+				inputs: [
+					"entityType",
+					"formData",
+					"validationErrors",
+					"showButtons",
+					"isSaving",
+					"parentId",
+					"parentType",
+					"objectTypeId",
+					"objectId",
+					"triggerPathPrefix",
+					"refreshOverlay"
+				],
+				outputs: [
+					"formDataChange",
+					"save",
+					"cancel",
+					"nestedTriggerRequested",
+					"nestedTriggerBlurred",
+					"refreshOverlayChange"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgSelectOption,
+				selector: "option",
+				inputs: ["ngValue", "value"]
+			},
+			{
+				kind: "directive",
+				type: i1$1.ɵNgSelectMultipleOption,
+				selector: "option",
+				inputs: ["ngValue", "value"]
+			},
+			{
+				kind: "directive",
+				type: i1$1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.RequiredValidator,
+				selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",
+				inputs: ["required"]
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "directive",
+				type: CdkDropList,
+				selector: "[cdkDropList], cdk-drop-list",
+				inputs: [
+					"cdkDropListConnectedTo",
+					"cdkDropListData",
+					"cdkDropListOrientation",
+					"id",
+					"cdkDropListLockAxis",
+					"cdkDropListDisabled",
+					"cdkDropListSortingDisabled",
+					"cdkDropListEnterPredicate",
+					"cdkDropListSortPredicate",
+					"cdkDropListAutoScrollDisabled",
+					"cdkDropListAutoScrollStep",
+					"cdkDropListElementContainer",
+					"cdkDropListHasAnchor"
+				],
+				outputs: [
+					"cdkDropListDropped",
+					"cdkDropListEntered",
+					"cdkDropListExited",
+					"cdkDropListSorted"
+				],
+				exportAs: ["cdkDropList"]
+			},
+			{
+				kind: "directive",
+				type: CdkDrag,
+				selector: "[cdkDrag]",
+				inputs: [
+					"cdkDragData",
+					"cdkDragLockAxis",
+					"cdkDragRootElement",
+					"cdkDragBoundary",
+					"cdkDragStartDelay",
+					"cdkDragFreeDragPosition",
+					"cdkDragDisabled",
+					"cdkDragConstrainPosition",
+					"cdkDragPreviewClass",
+					"cdkDragPreviewContainer",
+					"cdkDragScale"
+				],
+				outputs: [
+					"cdkDragStarted",
+					"cdkDragReleased",
+					"cdkDragEnded",
+					"cdkDragEntered",
+					"cdkDragExited",
+					"cdkDragDropped",
+					"cdkDragMoved"
+				],
+				exportAs: ["cdkDrag"]
+			},
+			{
+				kind: "directive",
+				type: CdkDragHandle,
+				selector: "[cdkDragHandle]",
+				inputs: ["cdkDragHandleDisabled"]
+			},
+			{
+				kind: "directive",
+				type: CdkDragPreview,
+				selector: "ng-template[cdkDragPreview]",
+				inputs: ["data", "matchSize"]
+			},
+			{
+				kind: "component",
+				type: BsCardComponent,
+				selector: "bs-card",
+				inputs: ["color", "outline"]
+			},
+			{
+				kind: "component",
+				type: BsCardHeaderComponent,
+				selector: "bs-card-header",
+				inputs: ["color", "navStyle"]
+			},
+			{
+				kind: "component",
+				type: BsFormComponent,
+				selector: "bs-form",
+				inputs: ["action", "method"],
+				outputs: ["submitted"]
+			},
+			{
+				kind: "directive",
+				type: BsFormControlDirective,
+				selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)"
+			},
+			{
+				kind: "component",
+				type: BsGridComponent,
+				selector: "bs-grid",
+				inputs: ["stopFullWidthAt"]
+			},
+			{
+				kind: "directive",
+				type: BsGridRowDirective,
+				selector: "[bsRow]"
+			},
+			{
+				kind: "directive",
+				type: BsGridColumnDirective,
+				selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]",
+				inputs: [
+					"xxs",
+					"xs",
+					"sm",
+					"md",
+					"lg",
+					"xl",
+					"xxl"
+				]
+			},
+			{
+				kind: "directive",
+				type: BsColFormLabelDirective,
+				selector: "[bsColFormLabel]"
+			},
+			{
+				kind: "directive",
+				type: BsButtonTypeDirective,
+				selector: "button[color],input[type=\"button\"][color],input[type=\"submit\"][color],a[color]",
+				inputs: ["color"]
+			},
+			{
+				kind: "component",
+				type: BsInputGroupComponent,
+				selector: "bs-input-group",
+				inputs: ["size"]
+			},
+			{
+				kind: "component",
+				type: BsSelectComponent,
+				selector: "bs-select",
+				inputs: [
+					"identifier",
+					"size",
+					"multiple",
+					"numberVisible",
+					"disabled"
+				]
+			},
+			{
+				kind: "directive",
+				type: BsSelectOption,
+				selector: "option",
+				inputs: ["ngValue", "value"]
+			},
+			{
+				kind: "component",
+				type: BsTreeSelectComponent,
+				selector: "bs-tree-select",
+				inputs: [
+					"provider",
+					"mode",
+					"variant",
+					"cascadeSelect",
+					"placeholder",
+					"showClear",
+					"panelScrollHeight",
+					"searchDebounceMs",
+					"disabled",
+					"value"
+				],
+				outputs: [
+					"valueChange",
+					"opened",
+					"closed",
+					"cleared"
+				]
+			},
+			{
+				kind: "component",
+				type: BsModalHostComponent,
+				selector: "bs-modal",
+				inputs: [
+					"isOpen",
+					"closeOnEscape",
+					"scrollable"
+				],
+				outputs: ["isOpenChange"]
+			},
+			{
+				kind: "directive",
+				type: BsModalDirective,
+				selector: "[bsModal]"
+			},
+			{
+				kind: "directive",
+				type: BsModalHeaderDirective,
+				selector: "[bsModalHeader]"
+			},
+			{
+				kind: "directive",
+				type: BsModalBodyDirective,
+				selector: "[bsModalBody]"
+			},
+			{
+				kind: "directive",
+				type: BsModalFooterDirective,
+				selector: "[bsModalFooter]"
+			},
+			{
+				kind: "component",
+				type: BsTableComponent,
+				selector: "bs-table",
+				inputs: [
+					"isResponsive",
+					"striped",
+					"hover",
+					"border",
+					"ariaRowCount"
+				]
+			},
+			{
+				kind: "component",
+				type: BsCheckboxComponent,
+				selector: "bs-checkbox",
+				inputs: [
+					"type",
+					"isToggled",
+					"indeterminate",
+					"name",
+					"value",
+					"group"
+				],
+				outputs: ["isToggledChange", "indeterminateChange"]
+			},
+			{
+				kind: "component",
+				type: BsSpinnerComponent,
+				selector: "bs-spinner",
+				inputs: ["type", "color"]
+			},
+			{
+				kind: "component",
+				type: BsTabControlComponent,
+				selector: "bs-tab-control",
+				inputs: [
+					"border",
+					"selectFirstTab",
+					"tabsPosition"
+				]
+			},
+			{
+				kind: "component",
+				type: BsTabPageComponent,
+				selector: "bs-tab-page",
+				inputs: ["disabled"]
+			},
+			{
+				kind: "directive",
+				type: BsTabPageHeaderDirective,
+				selector: "[bsTabPageHeader]"
+			},
+			{
+				kind: "component",
+				type: SparkIconComponent,
+				selector: "spark-icon",
+				inputs: ["name"]
+			},
+			{
+				kind: "component",
+				type: SparkReferencePickerComponent,
+				selector: "spark-reference-picker",
+				inputs: [
+					"value",
+					"options",
+					"referenceType",
+					"isInvalid",
+					"inputId",
+					"title"
+				],
+				outputs: ["valueChange"]
+			},
+			{
+				kind: "component",
+				type: SparkLookupPickerComponent,
+				selector: "spark-lookup-picker",
+				inputs: [
+					"value",
+					"options",
+					"isInvalid",
+					"inputId",
+					"title"
+				],
+				outputs: ["valueChange"]
+			},
+			{
+				kind: "component",
+				type: SparkAttributeDescriptionComponent,
+				selector: "spark-attribute-description",
+				inputs: ["description", "position"]
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			},
+			{
+				kind: "pipe",
+				type: ResolveTranslationPipe,
+				name: "resolveTranslation"
+			},
+			{
+				kind: "pipe",
+				type: InputTypePipe,
+				name: "inputType"
+			},
+			{
+				kind: "pipe",
+				type: LookupDisplayTypePipe,
+				name: "lookupDisplayType"
+			},
+			{
+				kind: "pipe",
+				type: LookupOptionsPipe,
+				name: "lookupOptions"
+			},
+			{
+				kind: "pipe",
+				type: AsDetailDisplayValuePipe,
+				name: "asDetailDisplayValue"
+			},
+			{
+				kind: "pipe",
+				type: AsDetailTypePipe,
+				name: "asDetailType"
+			},
+			{
+				kind: "pipe",
+				type: AsDetailColumnsPipe,
+				name: "asDetailColumns"
+			},
+			{
+				kind: "pipe",
+				type: AsDetailRowRendererPipe,
+				name: "asDetailRowRenderer"
+			},
+			{
+				kind: "pipe",
+				type: AsDetailCellValuePipe,
+				name: "asDetailCellValue"
+			},
+			{
+				kind: "pipe",
+				type: CanCreateDetailRowPipe,
+				name: "canCreateDetailRow"
+			},
+			{
+				kind: "pipe",
+				type: CanDeleteDetailRowPipe,
+				name: "canDeleteDetailRow"
+			},
+			{
+				kind: "pipe",
+				type: CanEditDetailRowPipe,
+				name: "canEditDetailRow"
+			},
+			{
+				kind: "pipe",
+				type: InlineRefOptionsPipe,
+				name: "inlineRefOptions"
+			},
+			{
+				kind: "pipe",
+				type: ErrorForAttributePipe,
+				name: "errorForAttribute"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkPoFormComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-po-form",
+			imports: [
+				CommonModule,
+				NgTemplateOutlet,
+				NgComponentOutlet,
+				FormsModule,
+				CdkDropList,
+				CdkDrag,
+				CdkDragHandle,
+				CdkDragPreview,
+				BsCardComponent,
+				BsCardHeaderComponent,
+				BsFormComponent,
+				BsFormControlDirective,
+				BsGridComponent,
+				BsGridRowDirective,
+				BsGridColumnDirective,
+				BsGridColDirective,
+				BsColFormLabelDirective,
+				BsButtonTypeDirective,
+				BsInputGroupComponent,
+				BsSelectComponent,
+				BsSelectOption,
+				BsTreeSelectComponent,
+				BsModalHostComponent,
+				BsModalDirective,
+				BsModalHeaderDirective,
+				BsModalBodyDirective,
+				BsModalFooterDirective,
+				BsTableComponent,
+				BsCheckboxComponent,
+				BsSpinnerComponent,
+				BsTabControlComponent,
+				BsTabPageComponent,
+				BsTabPageHeaderDirective,
+				SparkIconComponent,
+				SparkPoFormComponent,
+				SparkReferencePickerComponent,
+				SparkLookupPickerComponent,
+				TranslateKeyPipe,
+				ResolveTranslationPipe,
+				InputTypePipe,
+				LookupDisplayTypePipe,
+				LookupOptionsPipe,
+				AsDetailDisplayValuePipe,
+				AsDetailTypePipe,
+				AsDetailColumnsPipe,
+				AsDetailRowRendererPipe,
+				AsDetailCellValuePipe,
+				CanCreateDetailRowPipe,
+				CanDeleteDetailRowPipe,
+				CanEditDetailRowPipe,
+				InlineRefOptionsPipe,
+				ErrorForAttributePipe,
+				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\" 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"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		entityType: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "entityType",
+				required: false
+			}]
+		}],
+		formData: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formData",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["formDataChange"]
+		}],
+		validationErrors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "validationErrors",
+				required: false
+			}]
+		}],
+		showButtons: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showButtons",
+				required: false
+			}]
+		}],
+		isSaving: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isSaving",
+				required: false
+			}]
+		}],
+		parentId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "parentId",
+				required: false
+			}]
+		}],
+		parentType: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "parentType",
+				required: false
+			}]
+		}],
+		save: [{
+			type: i0.Output,
+			args: ["save"]
+		}],
+		cancel: [{
+			type: i0.Output,
+			args: ["cancel"]
+		}],
+		objectTypeId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "objectTypeId",
+				required: false
+			}]
+		}],
+		objectId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "objectId",
+				required: false
+			}]
+		}],
+		triggerPathPrefix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "triggerPathPrefix",
+				required: false
+			}]
+		}],
+		nestedTriggerRequested: [{
+			type: i0.Output,
+			args: ["nestedTriggerRequested"]
+		}],
+		nestedTriggerBlurred: [{
+			type: i0.Output,
+			args: ["nestedTriggerBlurred"]
+		}],
+		refreshOverlay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "refreshOverlay",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["refreshOverlayChange"]
+		}]
+	}
+});
 export { SparkLookupPickerComponent, SparkPoFormComponent, SparkReferencePickerComponent };
-//# sourceMappingURL=mintplayer-ng-spark-po-form.mjs.map
+
+//# sourceMappingURL=mintplayer-ng-spark-po-form.mjs.map