@mintplayer/ng-spark 22.4.0 → 22.5.0

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

@@ -20,7 +20,7 @@ import { BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective } f
 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, InlineRefOptionsPipe, ErrorForAttributePipe } from '@mintplayer/ng-spark/pipes';
-import { resolveTranslation, ELookupDisplayType, EReferenceDisplayType, hasShowedOnFlag, ShowedOn } from '@mintplayer/ng-spark/models';
+import { resolveTranslation, ELookupDisplayType, EReferenceDisplayType, hasShowedOnFlag, ShowedOn, applyOverlay, evaluateRules, overlayFromResponse, mergeRefreshValues } from '@mintplayer/ng-spark/models';
 import { SparkIconComponent } from '@mintplayer/ng-spark/icon';
 import { SPARK_ATTRIBUTE_RENDERERS, withDeclaredInputs } from '@mintplayer/ng-spark/renderers';
 import { DatatableSettings, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective } from '@mintplayer/ng-bootstrap/datatable';
@@ -227,6 +227,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
             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;
+    }
+}
+/**
+ * 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);
@@ -247,6 +354,27 @@ class SparkPoFormComponent {
     ...(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 */ []));
+    /**
+     * 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.
+     */
+    refreshOverlay = signal({}, /* @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 */ []));
@@ -282,8 +410,24 @@ class SparkPoFormComponent {
     // 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 */
@@ -336,7 +480,7 @@ class SparkPoFormComponent {
         return result;
     }
     async loadReferenceOptions() {
-        const refAttrs = this.editableAttributes().filter(a => a.dataType === 'Reference' && a.query);
+        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) => {
@@ -396,7 +540,7 @@ class SparkPoFormComponent {
         this.formData.set(data);
     }
     async loadAsDetailTypes() {
-        const asDetailAttrs = this.editableAttributes().filter(a => a.dataType === 'AsDetail' && a.asDetailType);
+        const asDetailAttrs = this.optionSourceAttributes().filter(a => a.dataType === 'AsDetail' && a.asDetailType);
         if (asDetailAttrs.length === 0)
             return;
         const types = await this.sparkService.getEntityTypes();
@@ -435,7 +579,7 @@ class SparkPoFormComponent {
         this.asDetailTypes.set(newAsDetailTypes);
     }
     async loadLookupReferenceOptions() {
-        const lookupAttrs = this.editableAttributes().filter(a => a.lookupReferenceType);
+        const lookupAttrs = this.optionSourceAttributes().filter(a => a.lookupReferenceType);
         if (lookupAttrs.length === 0)
             return;
         const lookupNames = [...new Set(lookupAttrs.map(a => a.lookupReferenceType))];
@@ -511,8 +655,18 @@ class SparkPoFormComponent {
             },
         });
     }
+    /**
+     * 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.validationErrors().some(e => e.attributeName === 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.
@@ -528,10 +682,194 @@ class SparkPoFormComponent {
         const error = this.validationErrors().find(e => e.attributeName === path);
         return error ? resolveTranslation(error.errorMessage) : null;
     }
-    onFieldChange() {
+    /**
+     * The single funnel every scalar / boolean / inline-cell edit passes through.
+     *
+     * `attr` is optional only so the AsDetail modal's recursive form, which has no trigger context,
+     * can still call it. A caller that knows which attribute changed should always say so — without it
+     * no refresh can fire.
+     */
+    onFieldChange(attr) {
         this.formData.set({ ...this.formData() });
+        if (attr)
+            this.noteChange(attr);
     }
-    onSave() {
+    /**
+     * 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 = { attribute: attr.name, rowIndex };
+        if (triggersImmediately(col)) {
+            void this.refreshCoordinator.trigger(path);
+        }
+        else {
+            this.refreshCoordinator.markPending(path);
+        }
+    }
+    /** Which detail row the in-flight refresh belongs to, if any. */
+    pendingNestedTrigger = null;
+    /**
+     * 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;
+        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() });
+        }
+        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.canRefresh(attr))
+            return;
+        void this.refreshCoordinator.blur(attr.name);
+    }
+    noteChange(attr) {
+        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);
+        }
+    }
+    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.formData();
+        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,
+            })),
+        };
+    }
+    /**
+     * 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;
+                next[name] = (options ?? []).map(o => ({
+                    id: o.key,
+                    name: attr.referenceType ?? '',
+                    objectTypeId: '',
+                    breadcrumb: o.label ? resolveTranslation(o.label) : o.key,
+                    attributes: [],
+                }));
+            }
+            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() {
@@ -614,12 +952,12 @@ class SparkPoFormComponent {
         this.formData.set(data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkPoFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 } }, outputs: { formData: "formDataChange", save: "save", cancel: "cancel" }, 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        </label>\n        <div [md]=\"8\">\n          @if (attr.dataType === 'boolean') {\n            <bs-checkbox\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange()\">\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                [ngModel]=\"formData()[attr.name]\"\n                (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange()\"\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                @if (col.isReadOnly) {\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') {\n                  <bs-checkbox\n                    [(ngModel)]=\"row[col.name]\"\n                    (ngModelChange)=\"onFieldChange()\">\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; onFieldChange()\">\n                    </spark-reference-picker>\n                  } @else {\n                    <bs-select\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onFieldChange()\"\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.name || 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; onFieldChange()\">\n                    </spark-lookup-picker>\n                  } @else {\n                    <bs-select\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onFieldChange()\"\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)=\"onFieldChange()\"></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)=\"onFieldChange()\">\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 }}</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            @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 }}</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                      <button type=\"button\" class=\"btn btn-sm btn-outline-secondary me-1\" (click)=\"editArrayItem(attr, $index)\">\n                        <spark-icon name=\"pencil\" />\n                      </button>\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            @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()\"\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()\"\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        </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"], outputs: ["formDataChange", "save", "cancel"] }, { 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: "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: InlineRefOptionsPipe, name: "inlineRefOptions" }, { kind: "pipe", type: ErrorForAttributePipe, name: "errorForAttribute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 } }, outputs: { formData: "formDataChange", save: "save", cancel: "cancel" }, 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        </label>\n        <div [md]=\"8\">\n          @if (attr.dataType === 'boolean') {\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                @if (col.isReadOnly) {\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') {\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.name || 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)=\"onFieldChange()\"\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)=\"onFieldChange()\"\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 }}</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            @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 }}</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                      <button type=\"button\" class=\"btn btn-sm btn-outline-secondary me-1\" (click)=\"editArrayItem(attr, $index)\">\n                        <spark-icon name=\"pencil\" />\n                      </button>\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            @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        </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"], outputs: ["formDataChange", "save", "cancel"] }, { 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: "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: InlineRefOptionsPipe, name: "inlineRefOptions" }, { kind: "pipe", type: ErrorForAttributePipe, name: "errorForAttribute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.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, AsDetailCellValuePipe, CanCreateDetailRowPipe, CanDeleteDetailRowPipe, InlineRefOptionsPipe, ErrorForAttributePipe], 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        </label>\n        <div [md]=\"8\">\n          @if (attr.dataType === 'boolean') {\n            <bs-checkbox\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange()\">\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                [ngModel]=\"formData()[attr.name]\"\n                (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange()\"\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                @if (col.isReadOnly) {\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') {\n                  <bs-checkbox\n                    [(ngModel)]=\"row[col.name]\"\n                    (ngModelChange)=\"onFieldChange()\">\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; onFieldChange()\">\n                    </spark-reference-picker>\n                  } @else {\n                    <bs-select\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onFieldChange()\"\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.name || 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; onFieldChange()\">\n                    </spark-lookup-picker>\n                  } @else {\n                    <bs-select\n                      [(ngModel)]=\"row[col.name]\"\n                      (ngModelChange)=\"onFieldChange()\"\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)=\"onFieldChange()\"></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)=\"onFieldChange()\">\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 }}</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            @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 }}</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                      <button type=\"button\" class=\"btn btn-sm btn-outline-secondary me-1\" (click)=\"editArrayItem(attr, $index)\">\n                        <spark-icon name=\"pencil\" />\n                      </button>\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            @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()\"\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()\"\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        </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"] }] } });
+            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, InlineRefOptionsPipe, ErrorForAttributePipe], 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        </label>\n        <div [md]=\"8\">\n          @if (attr.dataType === 'boolean') {\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                @if (col.isReadOnly) {\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') {\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.name || 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)=\"onFieldChange()\"\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)=\"onFieldChange()\"\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 }}</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            @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 }}</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                      <button type=\"button\" class=\"btn btn-sm btn-outline-secondary me-1\" (click)=\"editArrayItem(attr, $index)\">\n                        <spark-icon name=\"pencil\" />\n                      </button>\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            @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        </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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.