@mintplayer/ng-spark 0.0.1

package/fesm2022/mintplayer-ng-spark.mjs

@@ -0,0 +1,1889 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, Injectable, inject, Pipe, input, computed, ChangeDetectionStrategy, Component, Directive, model, output, effect, ContentChildren } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Color } from '@mintplayer/ng-bootstrap';
+import { BsFormComponent, BsFormControlDirective } from '@mintplayer/ng-bootstrap/form';
+import { BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsGridColDirective, BsColFormLabelDirective } from '@mintplayer/ng-bootstrap/grid';
+import { BsInputGroupComponent } from '@mintplayer/ng-bootstrap/input-group';
+import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
+import { BsSelectComponent, BsSelectOption } from '@mintplayer/ng-bootstrap/select';
+import { BsModalHostComponent, BsModalDirective, BsModalHeaderDirective, BsModalBodyDirective, BsModalFooterDirective } from '@mintplayer/ng-bootstrap/modal';
+import { DatatableSettings, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective } from '@mintplayer/ng-bootstrap/datatable';
+import { BsToggleButtonComponent } from '@mintplayer/ng-bootstrap/toggle-button';
+import { DomSanitizer } from '@angular/platform-browser';
+import { BsTableComponent } from '@mintplayer/ng-bootstrap/table';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2$1 from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { BsAlertComponent } from '@mintplayer/ng-bootstrap/alert';
+import { BsCardComponent, BsCardHeaderComponent } from '@mintplayer/ng-bootstrap/card';
+import { BsContainerComponent } from '@mintplayer/ng-bootstrap/container';
+import { BsButtonGroupComponent } from '@mintplayer/ng-bootstrap/button-group';
+
+function resolveTranslation(ts, lang) {
+    if (!ts)
+        return '';
+    const language = lang ?? localStorage.getItem('spark-lang') ?? navigator.language?.split('-')[0] ?? 'en';
+    return ts[language] ?? ts['en'] ?? Object.values(ts)[0] ?? '';
+}
+
+/**
+ * Flags enum controlling on which pages an attribute should be displayed.
+ * Values can be combined: ShowedOn.Query | ShowedOn.PersistentObject
+ */
+var ShowedOn;
+(function (ShowedOn) {
+    ShowedOn[ShowedOn["Query"] = 1] = "Query";
+    ShowedOn[ShowedOn["PersistentObject"] = 2] = "PersistentObject";
+})(ShowedOn || (ShowedOn = {}));
+/**
+ * Helper function to check if a ShowedOn value includes a specific flag.
+ */
+function hasShowedOnFlag(value, flag) {
+    if (value === undefined)
+        return true; // Default: show on all pages
+    // Handle string values from JSON (e.g., "Query, PersistentObject")
+    if (typeof value === 'string') {
+        const parts = value.split(',').map(s => s.trim());
+        const flagName = ShowedOn[flag];
+        return parts.includes(flagName);
+    }
+    // Handle numeric flag values
+    return (value & flag) === flag;
+}
+
+const SPARK_CONFIG = new InjectionToken('SPARK_CONFIG');
+const defaultSparkConfig = {
+    baseUrl: '/spark'
+};
+
+var ELookupDisplayType;
+(function (ELookupDisplayType) {
+    ELookupDisplayType[ELookupDisplayType["Dropdown"] = 0] = "Dropdown";
+    ELookupDisplayType[ELookupDisplayType["Modal"] = 1] = "Modal";
+})(ELookupDisplayType || (ELookupDisplayType = {}));
+
+class RetryActionService {
+    resolveRetry = null;
+    payload = signal(null, ...(ngDevMode ? [{ debugName: "payload" }] : []));
+    show(payload) {
+        this.payload.set(payload);
+        return new Promise(resolve => { this.resolveRetry = resolve; });
+    }
+    respond(result) {
+        this.payload.set(null);
+        this.resolveRetry?.(result);
+        this.resolveRetry = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RetryActionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RetryActionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RetryActionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SparkService {
+    config = inject(SPARK_CONFIG, { optional: true });
+    baseUrl = this.config?.baseUrl ?? '/spark';
+    http = inject(HttpClient);
+    retryActionService = inject(RetryActionService);
+    // Entity Types
+    async getEntityTypes() {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/types`));
+    }
+    async getEntityType(id) {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/types/${encodeURIComponent(id)}`));
+    }
+    async getEntityTypeByClrType(clrType) {
+        const types = await this.getEntityTypes();
+        return types.find(t => t.clrType === clrType);
+    }
+    // Permissions
+    async getPermissions(entityTypeId) {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/permissions/${encodeURIComponent(entityTypeId)}`));
+    }
+    // Queries
+    async getQueries() {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/queries`));
+    }
+    async getQuery(id) {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/queries/${encodeURIComponent(id)}`));
+    }
+    async getQueryByName(name) {
+        const queries = await this.getQueries();
+        return queries.find(q => q.name === name);
+    }
+    async executeQuery(queryId, sortBy, sortDirection) {
+        let params = new HttpParams();
+        if (sortBy)
+            params = params.set('sortBy', sortBy);
+        if (sortDirection)
+            params = params.set('sortDirection', sortDirection);
+        return firstValueFrom(this.http.get(`${this.baseUrl}/queries/${encodeURIComponent(queryId)}/execute`, { params }));
+    }
+    async executeQueryByName(queryName) {
+        const query = await this.getQueryByName(queryName);
+        return query ? this.executeQuery(query.id) : [];
+    }
+    // Program Units
+    async getProgramUnits() {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/program-units`));
+    }
+    // Persistent Objects
+    async list(type) {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/po/${encodeURIComponent(type)}`));
+    }
+    async get(type, id) {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/po/${encodeURIComponent(type)}/${encodeURIComponent(id)}`));
+    }
+    async create(type, data) {
+        return this.postWithRetry(`${this.baseUrl}/po/${encodeURIComponent(type)}`, { persistentObject: data });
+    }
+    async update(type, id, data) {
+        return this.putWithRetry(`${this.baseUrl}/po/${encodeURIComponent(type)}/${encodeURIComponent(id)}`, { persistentObject: data });
+    }
+    async delete(type, id) {
+        return this.deleteWithRetry(`${this.baseUrl}/po/${encodeURIComponent(type)}/${encodeURIComponent(id)}`, {});
+    }
+    // Custom Actions
+    async getCustomActions(objectTypeId) {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/actions/${encodeURIComponent(objectTypeId)}`));
+    }
+    async executeCustomAction(objectTypeId, actionName, parent, selectedItems) {
+        const body = { parent, selectedItems };
+        return this.postWithRetry(`${this.baseUrl}/actions/${encodeURIComponent(objectTypeId)}/${encodeURIComponent(actionName)}`, body);
+    }
+    // LookupReferences
+    async getLookupReferences() {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/lookupref`));
+    }
+    async getLookupReference(name) {
+        return firstValueFrom(this.http.get(`${this.baseUrl}/lookupref/${encodeURIComponent(name)}`));
+    }
+    async addLookupReferenceValue(name, value) {
+        return firstValueFrom(this.http.post(`${this.baseUrl}/lookupref/${encodeURIComponent(name)}`, value));
+    }
+    async updateLookupReferenceValue(name, key, value) {
+        return firstValueFrom(this.http.put(`${this.baseUrl}/lookupref/${encodeURIComponent(name)}/${encodeURIComponent(key)}`, value));
+    }
+    async deleteLookupReferenceValue(name, key) {
+        return firstValueFrom(this.http.delete(`${this.baseUrl}/lookupref/${encodeURIComponent(name)}/${encodeURIComponent(key)}`));
+    }
+    // Retry Action helpers
+    async postWithRetry(url, body) {
+        try {
+            return await firstValueFrom(this.http.post(url, body));
+        }
+        catch (error) {
+            return this.handleRetryError(error, () => this.postWithRetry(url, body), body);
+        }
+    }
+    async putWithRetry(url, body) {
+        try {
+            return await firstValueFrom(this.http.put(url, body));
+        }
+        catch (error) {
+            return this.handleRetryError(error, () => this.putWithRetry(url, body), body);
+        }
+    }
+    async deleteWithRetry(url, body) {
+        try {
+            const hasRetry = body.retryResults && body.retryResults.length > 0;
+            return await firstValueFrom(hasRetry
+                ? this.http.delete(url, { body })
+                : this.http.delete(url));
+        }
+        catch (error) {
+            return this.handleRetryError(error, () => this.deleteWithRetry(url, body), body);
+        }
+    }
+    async handleRetryError(error, retryFn, body) {
+        if (error.status !== 449 || error.error?.type !== 'retry-action') {
+            throw error;
+        }
+        const payload = error.error;
+        const result = await this.retryActionService.show(payload);
+        // Modal dismissed (Escape/X) - Cancel was not an explicit developer option
+        if (result.option === 'Cancel' && !payload.options.includes('Cancel')) {
+            throw error;
+        }
+        body.retryResults = [...(body.retryResults || []), result];
+        return retryFn();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SparkLanguageService {
+    http = inject(HttpClient);
+    config = inject(SPARK_CONFIG, { optional: true });
+    baseUrl = this.config?.baseUrl ?? '/spark';
+    currentLang = signal('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
+    translationsMap = signal({}, ...(ngDevMode ? [{ debugName: "translationsMap" }] : []));
+    language = this.currentLang.asReadonly();
+    languages = signal({}, ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    constructor() {
+        this.loadCulture();
+        this.loadTranslations();
+    }
+    async loadCulture() {
+        const config = await firstValueFrom(this.http.get(`${this.baseUrl}/culture`));
+        this.languages.set(config.languages);
+        const saved = localStorage.getItem('spark-lang');
+        this.currentLang.set(saved ?? config.defaultLanguage);
+    }
+    async loadTranslations() {
+        const t = await firstValueFrom(this.http.get(`${this.baseUrl}/translations`));
+        this.translationsMap.set(t);
+    }
+    setLanguage(lang) {
+        this.currentLang.set(lang);
+        localStorage.setItem('spark-lang', lang);
+    }
+    resolve(ts) {
+        if (!ts)
+            return '';
+        const lang = this.currentLang();
+        return ts[lang] ?? ts['en'] ?? Object.values(ts)[0] ?? '';
+    }
+    t(key) {
+        const ts = this.translationsMap()[key];
+        return this.resolve(ts) || key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkLanguageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkLanguageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class TranslateKeyPipe {
+    lang = inject(SparkLanguageService);
+    transform(key) {
+        return this.lang.t(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslateKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: TranslateKeyPipe, isStandalone: true, name: "t", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TranslateKeyPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 't', pure: false, standalone: true }]
+        }] });
+
+class ResolveTranslationPipe {
+    transform(value, fallback) {
+        return resolveTranslation(value) || fallback || '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResolveTranslationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ResolveTranslationPipe, isStandalone: true, name: "resolveTranslation" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResolveTranslationPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'resolveTranslation', standalone: true, pure: true }]
+        }] });
+
+class InputTypePipe {
+    transform(dataType) {
+        switch (dataType) {
+            case 'number':
+            case 'decimal':
+                return 'number';
+            case 'boolean':
+                return 'checkbox';
+            case 'datetime':
+                return 'datetime-local';
+            case 'date':
+                return 'date';
+            case 'color':
+                return 'color';
+            default:
+                return 'text';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: InputTypePipe, isStandalone: true, name: "inputType" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputTypePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'inputType', standalone: true, pure: true }]
+        }] });
+
+class LookupDisplayValuePipe {
+    transform(attr, formData, lookupRefOptions) {
+        const currentValue = formData[attr.name];
+        if (currentValue == null || currentValue === '')
+            return '';
+        const lookupRef = attr.lookupReferenceType ? lookupRefOptions[attr.lookupReferenceType] : null;
+        const options = lookupRef?.values.filter(v => v.isActive) || [];
+        const selected = options.find(o => o.key === String(currentValue));
+        if (!selected)
+            return String(currentValue);
+        return resolveTranslation(selected.values) || selected.key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LookupDisplayValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: LookupDisplayValuePipe, isStandalone: true, name: "lookupDisplayValue" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LookupDisplayValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'lookupDisplayValue', standalone: true, pure: true }]
+        }] });
+
+class LookupDisplayTypePipe {
+    transform(attr, lookupRefOptions) {
+        const lookupRef = attr.lookupReferenceType ? lookupRefOptions[attr.lookupReferenceType] : null;
+        return lookupRef?.displayType ?? ELookupDisplayType.Dropdown;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LookupDisplayTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: LookupDisplayTypePipe, isStandalone: true, name: "lookupDisplayType" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LookupDisplayTypePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'lookupDisplayType', standalone: true, pure: true }]
+        }] });
+
+class LookupOptionsPipe {
+    transform(attr, lookupRefOptions) {
+        const lookupRef = attr.lookupReferenceType ? lookupRefOptions[attr.lookupReferenceType] : null;
+        return lookupRef?.values.filter(v => v.isActive) || [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LookupOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: LookupOptionsPipe, isStandalone: true, name: "lookupOptions" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LookupOptionsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'lookupOptions', standalone: true, pure: true }]
+        }] });
+
+class ReferenceDisplayValuePipe {
+    lang = inject(SparkLanguageService);
+    transform(attr, formData, referenceOptions) {
+        const selectedId = formData[attr.name];
+        if (!selectedId)
+            return this.lang.t('notSelected');
+        const options = referenceOptions[attr.name] || [];
+        const selected = options.find(o => o.id === selectedId);
+        return selected?.breadcrumb || selected?.name || selectedId;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReferenceDisplayValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ReferenceDisplayValuePipe, isStandalone: true, name: "referenceDisplayValue" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReferenceDisplayValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'referenceDisplayValue', standalone: true, pure: true }]
+        }] });
+
+class AsDetailDisplayValuePipe {
+    lang = inject(SparkLanguageService);
+    transform(attr, formData, asDetailTypes) {
+        const value = formData[attr.name];
+        if (!value)
+            return this.lang.t('notSet');
+        const asDetailType = asDetailTypes[attr.name] || null;
+        // 1. Try displayFormat (template with {PropertyName} placeholders)
+        if (asDetailType?.displayFormat) {
+            const result = this.resolveDisplayFormat(asDetailType.displayFormat, value);
+            if (result && result.trim())
+                return result;
+        }
+        // 2. Try displayAttribute (single property name)
+        if (asDetailType?.displayAttribute && value[asDetailType.displayAttribute]) {
+            return value[asDetailType.displayAttribute];
+        }
+        // 3. Fallback to common property names
+        const displayProps = ['Name', 'Title', 'Street', 'name', 'title'];
+        for (const prop of displayProps) {
+            if (value[prop])
+                return value[prop];
+        }
+        return this.lang.t('clickToEdit');
+    }
+    resolveDisplayFormat(format, data) {
+        return format.replace(/\{(\w+)\}/g, (match, propertyName) => {
+            const value = data[propertyName];
+            return value != null ? String(value) : '';
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AsDetailDisplayValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: AsDetailDisplayValuePipe, isStandalone: true, name: "asDetailDisplayValue" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AsDetailDisplayValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'asDetailDisplayValue', standalone: true, pure: true }]
+        }] });
+
+class AsDetailTypePipe {
+    transform(attr, asDetailTypes) {
+        return asDetailTypes[attr.name] || null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AsDetailTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: AsDetailTypePipe, isStandalone: true, name: "asDetailType" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AsDetailTypePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'asDetailType', standalone: true, pure: true }]
+        }] });
+
+class AsDetailColumnsPipe {
+    transform(attr, asDetailTypes) {
+        const type = asDetailTypes[attr.name];
+        if (!type)
+            return [];
+        return type.attributes
+            .filter(a => a.isVisible)
+            .sort((a, b) => a.order - b.order);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AsDetailColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: AsDetailColumnsPipe, isStandalone: true, name: "asDetailColumns" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AsDetailColumnsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'asDetailColumns', standalone: true, pure: true }]
+        }] });
+
+class AsDetailCellValuePipe {
+    transform(row, parentAttr, col, asDetailRefOptions) {
+        const value = row[col.name];
+        if (value == null)
+            return '';
+        if (col.dataType === 'Reference' && col.query) {
+            const parentOptions = asDetailRefOptions[parentAttr.name];
+            if (parentOptions) {
+                const options = parentOptions[col.name];
+                if (options) {
+                    const match = options.find(o => o.id === value);
+                    if (match)
+                        return match.breadcrumb || match.name || String(value);
+                }
+            }
+        }
+        return String(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AsDetailCellValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: AsDetailCellValuePipe, isStandalone: true, name: "asDetailCellValue" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AsDetailCellValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'asDetailCellValue', standalone: true, pure: true }]
+        }] });
+
+class CanCreateDetailRowPipe {
+    transform(attr, permissions) {
+        const perms = permissions[attr.name];
+        return perms ? perms.canCreate : true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CanCreateDetailRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: CanCreateDetailRowPipe, isStandalone: true, name: "canCreateDetailRow" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CanCreateDetailRowPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'canCreateDetailRow', standalone: true, pure: true }]
+        }] });
+
+class CanDeleteDetailRowPipe {
+    transform(attr, permissions) {
+        const perms = permissions[attr.name];
+        return perms ? perms.canDelete : true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CanDeleteDetailRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: CanDeleteDetailRowPipe, isStandalone: true, name: "canDeleteDetailRow" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CanDeleteDetailRowPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'canDeleteDetailRow', standalone: true, pure: true }]
+        }] });
+
+class InlineRefOptionsPipe {
+    transform(parentAttr, col, asDetailRefOptions) {
+        return asDetailRefOptions[parentAttr.name]?.[col.name] || [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InlineRefOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: InlineRefOptionsPipe, isStandalone: true, name: "inlineRefOptions" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InlineRefOptionsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'inlineRefOptions', standalone: true, pure: true }]
+        }] });
+
+class ReferenceAttrValuePipe {
+    transform(item, attrName) {
+        const attr = item.attributes.find(a => a.name === attrName);
+        if (!attr)
+            return '';
+        if (attr.breadcrumb)
+            return attr.breadcrumb;
+        return attr.value ?? '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReferenceAttrValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ReferenceAttrValuePipe, isStandalone: true, name: "referenceAttrValue" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReferenceAttrValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'referenceAttrValue', standalone: true, pure: true }]
+        }] });
+
+class ErrorForAttributePipe {
+    transform(attrName, validationErrors) {
+        const error = validationErrors.find(e => e.attributeName === attrName);
+        return error ? resolveTranslation(error.errorMessage) : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ErrorForAttributePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ErrorForAttributePipe, isStandalone: true, name: "errorForAttribute" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ErrorForAttributePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'errorForAttribute', standalone: true, pure: true }]
+        }] });
+
+/** Built-in SVG icons used by ng-spark library templates. */
+const SPARK_BUILT_IN_ICONS = {
+    'arrow-left': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/></svg>',
+    'pencil': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16"><path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/></svg>',
+    'plus': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>',
+    'plus-lg': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/></svg>',
+    'search': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>',
+    'trash': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/><path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/></svg>',
+    'x-lg': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg>',
+};
+
+class SparkIconRegistry {
+    sanitizer = inject(DomSanitizer);
+    icons = new Map();
+    constructor() {
+        for (const [name, svg] of Object.entries(SPARK_BUILT_IN_ICONS)) {
+            this.icons.set(name, this.sanitizer.bypassSecurityTrustHtml(svg));
+        }
+    }
+    register(name, svg) {
+        this.icons.set(name, this.sanitizer.bypassSecurityTrustHtml(svg));
+    }
+    get(name) {
+        return this.icons.get(name);
+    }
+    has(name) {
+        return this.icons.has(name);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkIconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkIconRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkIconRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class SparkIconComponent {
+    registry = inject(SparkIconRegistry);
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    iconHtml = computed(() => this.registry.get(this.name()), ...(ngDevMode ? [{ debugName: "iconHtml" }] : []));
+    cssFallbackClass = computed(() => `bi-${this.name()}`, ...(ngDevMode ? [{ debugName: "cssFallbackClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SparkIconComponent, isStandalone: true, selector: "spark-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (iconHtml(); as html) {
+      <span [innerHTML]="html"></span>
+    } @else {
+      <i class="bi" [class]="cssFallbackClass()"></i>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center}span{display:inline-flex;align-items:center}span ::ng-deep svg{width:1em;height:1em;fill:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spark-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (iconHtml(); as html) {
+      <span [innerHTML]="html"></span>
+    } @else {
+      <i class="bi" [class]="cssFallbackClass()"></i>
+    }
+  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center}span{display:inline-flex;align-items:center}span ::ng-deep svg{width:1em;height:1em;fill:currentColor}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
+
+class SparkFieldTemplateDirective {
+    template;
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), alias: 'sparkFieldTemplate' });
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkFieldTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: SparkFieldTemplateDirective, isStandalone: true, selector: "[sparkFieldTemplate]", inputs: { name: { classPropertyName: "name", publicName: "sparkFieldTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkFieldTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sparkFieldTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "sparkFieldTemplate", required: true }] }] } });
+
+class SparkPoFormComponent {
+    sparkService = inject(SparkService);
+    translations = inject(SparkLanguageService);
+    fieldTemplates;
+    entityType = input(null, ...(ngDevMode ? [{ debugName: "entityType" }] : []));
+    formData = model({}, ...(ngDevMode ? [{ debugName: "formData" }] : []));
+    validationErrors = input([], ...(ngDevMode ? [{ debugName: "validationErrors" }] : []));
+    showButtons = input(false, ...(ngDevMode ? [{ debugName: "showButtons" }] : []));
+    isSaving = input(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+    externalFieldTemplates = input([], ...(ngDevMode ? [{ debugName: "externalFieldTemplates" }] : []));
+    save = output();
+    cancel = output();
+    colors = Color;
+    referenceOptions = signal({}, ...(ngDevMode ? [{ debugName: "referenceOptions" }] : []));
+    asDetailTypes = signal({}, ...(ngDevMode ? [{ debugName: "asDetailTypes" }] : []));
+    lookupReferenceOptions = signal({}, ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : []));
+    // Modal state for AsDetail object editing
+    editingAsDetailAttr = signal(null, ...(ngDevMode ? [{ debugName: "editingAsDetailAttr" }] : []));
+    asDetailFormData = signal({}, ...(ngDevMode ? [{ debugName: "asDetailFormData" }] : []));
+    showAsDetailModal = signal(false, ...(ngDevMode ? [{ debugName: "showAsDetailModal" }] : []));
+    editingArrayIndex = signal(null, ...(ngDevMode ? [{ debugName: "editingArrayIndex" }] : []));
+    // Permissions for array AsDetail entity types
+    asDetailPermissions = signal({}, ...(ngDevMode ? [{ debugName: "asDetailPermissions" }] : []));
+    // Reference options for columns within array AsDetail types (keyed by parent attr name, then column name)
+    asDetailReferenceOptions = signal({}, ...(ngDevMode ? [{ debugName: "asDetailReferenceOptions" }] : []));
+    // Modal state for Reference selection
+    editingReferenceAttr = signal(null, ...(ngDevMode ? [{ debugName: "editingReferenceAttr" }] : []));
+    showReferenceModal = signal(false, ...(ngDevMode ? [{ debugName: "showReferenceModal" }] : []));
+    referenceModalItems = signal([], ...(ngDevMode ? [{ debugName: "referenceModalItems" }] : []));
+    referenceModalEntityType = signal(null, ...(ngDevMode ? [{ debugName: "referenceModalEntityType" }] : []));
+    referenceModalPagination = signal(undefined, ...(ngDevMode ? [{ debugName: "referenceModalPagination" }] : []));
+    referenceModalSettings = new DatatableSettings({
+        perPage: { values: [10, 25, 50], selected: 10 },
+        page: { values: [1], selected: 1 },
+        sortProperty: '',
+        sortDirection: 'ascending'
+    });
+    referenceSearchTerm = '';
+    // Modal state for LookupReference selection (Modal display type)
+    editingLookupAttr = signal(null, ...(ngDevMode ? [{ debugName: "editingLookupAttr" }] : []));
+    showLookupModal = signal(false, ...(ngDevMode ? [{ debugName: "showLookupModal" }] : []));
+    lookupModalItems = signal([], ...(ngDevMode ? [{ debugName: "lookupModalItems" }] : []));
+    lookupSearchTerm = signal('', ...(ngDevMode ? [{ debugName: "lookupSearchTerm" }] : []));
+    ELookupDisplayType = ELookupDisplayType;
+    editableAttributes = computed(() => {
+        return this.entityType()?.attributes
+            .filter(a => a.isVisible && !a.isReadOnly && hasShowedOnFlag(a.showedOn, ShowedOn.PersistentObject))
+            .sort((a, b) => a.order - b.order) || [];
+    }, ...(ngDevMode ? [{ debugName: "editableAttributes" }] : []));
+    referenceVisibleAttributes = computed(() => {
+        return this.referenceModalEntityType()?.attributes
+            .filter(a => a.isVisible)
+            .sort((a, b) => a.order - b.order) || [];
+    }, ...(ngDevMode ? [{ debugName: "referenceVisibleAttributes" }] : []));
+    filteredLookupItems = computed(() => {
+        if (!this.lookupSearchTerm().trim()) {
+            return this.lookupModalItems();
+        }
+        const term = this.lookupSearchTerm().toLowerCase().trim();
+        return this.lookupModalItems().filter(item => {
+            const translation = resolveTranslation(item.values);
+            return translation.toLowerCase().includes(term) || item.key.toLowerCase().includes(term);
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredLookupItems" }] : []));
+    getFieldTemplate(attr) {
+        const allTemplates = [
+            ...(this.fieldTemplates?.toArray() || []),
+            ...this.externalFieldTemplates()
+        ];
+        // Priority 1: match by field name
+        const byName = allTemplates.find(t => t.name() === attr.name);
+        if (byName)
+            return byName.template;
+        // Priority 2: match by data type
+        const byType = allTemplates.find(t => t.name() === attr.dataType);
+        if (byType)
+            return byType.template;
+        return null;
+    }
+    getFieldTemplateContext(attr) {
+        const errorEntry = this.validationErrors().find(e => e.attributeName === attr.name);
+        return {
+            $implicit: attr,
+            formData: this.formData(),
+            value: this.formData()[attr.name],
+            hasError: this.hasError(attr.name),
+            errorMessage: errorEntry?.errorMessage || null
+        };
+    }
+    constructor() {
+        effect(() => {
+            const et = this.entityType();
+            if (et) {
+                this.loadReferenceOptions();
+                this.loadAsDetailTypes();
+                this.loadLookupReferenceOptions();
+            }
+        });
+    }
+    toRecord(entries) {
+        const result = {};
+        for (const [key, value] of entries) {
+            result[key] = value;
+        }
+        return result;
+    }
+    async loadReferenceOptions() {
+        const refAttrs = this.editableAttributes().filter(a => a.dataType === 'Reference' && a.query);
+        if (refAttrs.length === 0)
+            return;
+        const entries = await Promise.all(refAttrs.filter(a => a.query).map(async (attr) => {
+            const items = await this.sparkService.executeQueryByName(attr.query);
+            return [attr.name, items];
+        }));
+        this.referenceOptions.set(this.toRecord(entries));
+    }
+    async loadAsDetailTypes() {
+        const asDetailAttrs = this.editableAttributes().filter(a => a.dataType === 'AsDetail' && a.asDetailType);
+        if (asDetailAttrs.length === 0)
+            return;
+        const types = await this.sparkService.getEntityTypes();
+        const newAsDetailTypes = {};
+        for (const attr of asDetailAttrs) {
+            const asDetailType = types.find(t => t.clrType === attr.asDetailType);
+            if (asDetailType) {
+                newAsDetailTypes[attr.name] = asDetailType;
+                if (attr.isArray) {
+                    const perms = await this.sparkService.getPermissions(asDetailType.id);
+                    this.asDetailPermissions.update(prev => ({ ...prev, [attr.name]: perms }));
+                    const refCols = asDetailType.attributes.filter(a => a.dataType === 'Reference' && a.query);
+                    if (refCols.length > 0) {
+                        const refEntries = await Promise.all(refCols.filter(c => c.query).map(async (col) => {
+                            const items = await this.sparkService.executeQueryByName(col.query);
+                            return [col.name, items];
+                        }));
+                        this.asDetailReferenceOptions.update(prev => ({ ...prev, [attr.name]: this.toRecord(refEntries) }));
+                    }
+                }
+            }
+        }
+        this.asDetailTypes.set(newAsDetailTypes);
+    }
+    async loadLookupReferenceOptions() {
+        const lookupAttrs = this.editableAttributes().filter(a => a.lookupReferenceType);
+        if (lookupAttrs.length === 0)
+            return;
+        const lookupNames = [...new Set(lookupAttrs.map(a => a.lookupReferenceType))];
+        const entries = await Promise.all(lookupNames.map(async (name) => {
+            const ref = await this.sparkService.getLookupReference(name);
+            return [name, ref];
+        }));
+        this.lookupReferenceOptions.set(this.toRecord(entries));
+    }
+    getReferenceOptions(attr) {
+        return this.referenceOptions()[attr.name] || [];
+    }
+    getLookupOptions(attr) {
+        const lookupRef = attr.lookupReferenceType ? this.lookupReferenceOptions()[attr.lookupReferenceType] : null;
+        return lookupRef?.values.filter(v => v.isActive) || [];
+    }
+    // LookupReference modal methods
+    openLookupSelector(attr) {
+        this.editingLookupAttr.set(attr);
+        this.lookupSearchTerm.set('');
+        this.lookupModalItems.set(this.getLookupOptions(attr));
+        this.showLookupModal.set(true);
+    }
+    selectLookupItem(item) {
+        const attr = this.editingLookupAttr();
+        if (attr) {
+            const data = { ...this.formData() };
+            data[attr.name] = item.key;
+            this.formData.set(data);
+        }
+        this.closeLookupModal();
+    }
+    closeLookupModal() {
+        this.showLookupModal.set(false);
+        this.editingLookupAttr.set(null);
+        this.lookupModalItems.set([]);
+        this.lookupSearchTerm.set('');
+    }
+    hasError(attrName) {
+        return this.validationErrors().some(e => e.attributeName === attrName);
+    }
+    onFieldChange() {
+        this.formData.set({ ...this.formData() });
+    }
+    onSave() {
+        this.save.emit();
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    // AsDetail object modal methods
+    openAsDetailEditor(attr) {
+        this.editingAsDetailAttr.set(attr);
+        this.editingArrayIndex.set(null);
+        this.asDetailFormData.set({ ...(this.formData()[attr.name] || {}) });
+        this.showAsDetailModal.set(true);
+    }
+    saveAsDetailObject() {
+        const attr = this.editingAsDetailAttr();
+        if (attr) {
+            const data = { ...this.formData() };
+            if (attr.isArray) {
+                const arr = [...(data[attr.name] || [])];
+                const idx = this.editingArrayIndex();
+                if (idx !== null) {
+                    arr[idx] = { ...this.asDetailFormData() };
+                }
+                else {
+                    arr.push({ ...this.asDetailFormData() });
+                }
+                data[attr.name] = arr;
+            }
+            else {
+                data[attr.name] = { ...this.asDetailFormData() };
+            }
+            this.formData.set(data);
+        }
+        this.closeAsDetailModal();
+    }
+    closeAsDetailModal() {
+        this.showAsDetailModal.set(false);
+        this.editingAsDetailAttr.set(null);
+        this.editingArrayIndex.set(null);
+        this.asDetailFormData.set({});
+    }
+    // Inline AsDetail methods
+    addInlineRow(attr) {
+        const data = { ...this.formData() };
+        const arr = [...(data[attr.name] || [])];
+        arr.push({});
+        data[attr.name] = arr;
+        this.formData.set(data);
+    }
+    // Array AsDetail methods
+    addArrayItem(attr) {
+        this.editingAsDetailAttr.set(attr);
+        this.editingArrayIndex.set(null);
+        this.asDetailFormData.set({});
+        this.showAsDetailModal.set(true);
+    }
+    editArrayItem(attr, index) {
+        this.editingAsDetailAttr.set(attr);
+        this.editingArrayIndex.set(index);
+        const arr = this.formData()[attr.name] || [];
+        this.asDetailFormData.set({ ...(arr[index] || {}) });
+        this.showAsDetailModal.set(true);
+    }
+    removeArrayItem(attr, index) {
+        const data = { ...this.formData() };
+        const arr = [...(data[attr.name] || [])];
+        arr.splice(index, 1);
+        data[attr.name] = arr;
+        this.formData.set(data);
+    }
+    // Reference modal methods
+    async openReferenceSelector(attr) {
+        this.editingReferenceAttr.set(attr);
+        this.referenceSearchTerm = '';
+        this.referenceModalItems.set(this.getReferenceOptions(attr));
+        const types = await this.sparkService.getEntityTypes();
+        this.referenceModalEntityType.set(types.find(t => t.clrType === attr.referenceType) || null);
+        this.referenceModalSettings = new DatatableSettings({
+            perPage: { values: [10, 25, 50], selected: 10 },
+            page: { values: [1], selected: 1 },
+            sortProperty: '',
+            sortDirection: 'ascending'
+        });
+        this.applyReferenceFilter();
+        this.showReferenceModal.set(true);
+    }
+    onReferenceSearchChange() {
+        this.referenceModalSettings.page.selected = 1;
+        this.applyReferenceFilter();
+    }
+    applyReferenceFilter() {
+        let filteredItems = this.referenceModalItems();
+        if (this.referenceSearchTerm.trim()) {
+            const term = this.referenceSearchTerm.toLowerCase().trim();
+            filteredItems = this.referenceModalItems().filter(item => {
+                if (item.name?.toLowerCase().includes(term))
+                    return true;
+                if (item.breadcrumb?.toLowerCase().includes(term))
+                    return true;
+                return item.attributes.some(attr => {
+                    const value = attr.breadcrumb || attr.value;
+                    if (value == null)
+                        return false;
+                    return String(value).toLowerCase().includes(term);
+                });
+            });
+        }
+        const totalPages = Math.ceil(filteredItems.length / this.referenceModalSettings.perPage.selected) || 1;
+        this.referenceModalPagination.set({
+            data: filteredItems,
+            totalRecords: filteredItems.length,
+            totalPages: totalPages,
+            perPage: this.referenceModalSettings.perPage.selected,
+            page: this.referenceModalSettings.page.selected
+        });
+        this.referenceModalSettings.page.values = Array.from({ length: totalPages }, (_, i) => i + 1);
+        if (this.referenceModalSettings.page.selected > totalPages) {
+            this.referenceModalSettings.page.selected = 1;
+        }
+    }
+    clearReferenceSearch() {
+        this.referenceSearchTerm = '';
+        this.onReferenceSearchChange();
+    }
+    selectReferenceItem(item) {
+        const attr = this.editingReferenceAttr();
+        if (attr) {
+            const data = { ...this.formData() };
+            data[attr.name] = item.id;
+            this.formData.set(data);
+        }
+        this.closeReferenceModal();
+    }
+    closeReferenceModal() {
+        this.showReferenceModal.set(false);
+        this.editingReferenceAttr.set(null);
+        this.referenceModalItems.set([]);
+        this.referenceModalEntityType.set(null);
+        this.referenceSearchTerm = '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkPoFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, externalFieldTemplates: { classPropertyName: "externalFieldTemplates", publicName: "externalFieldTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formData: "formDataChange", save: "save", cancel: "cancel" }, queries: [{ propertyName: "fieldTemplates", predicate: SparkFieldTemplateDirective }], ngImport: i0, template: "<bs-form>\n  @if (entityType()) {\n    <bs-grid>\n    @for (attr of editableAttributes(); track attr.id) {\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 (getFieldTemplate(attr); as customTpl) {\n            <ng-container *ngTemplateOutlet=\"customTpl; context: getFieldTemplateContext(attr)\"></ng-container>\n          } @else if (attr.dataType === 'boolean') {\n            <bs-toggle-button\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange()\">\n            </bs-toggle-button>\n          } @else if (attr.lookupReferenceType) {\n            @if ((attr | lookupDisplayType:lookupReferenceOptions()) === ELookupDisplayType.Modal) {\n              <bs-input-group>\n                <input\n                  type=\"text\"\n                  [id]=\"attr.name\"\n                  [value]=\"attr | lookupDisplayValue:formData():lookupReferenceOptions()\"\n                  readonly\n                  [class.is-invalid]=\"hasError(attr.name)\">\n                <button\n                  type=\"button\"\n                  bsInputGroupBtn\n                  [color]=\"colors.secondary\"\n                  (click)=\"openLookupSelector(attr)\">\n                  ...\n                </button>\n              </bs-input-group>\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\">{{ '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') {\n            <bs-input-group>\n              <input\n                type=\"text\"\n                [id]=\"attr.name\"\n                [value]=\"attr | referenceDisplayValue:formData():referenceOptions()\"\n                readonly\n                [class.is-invalid]=\"hasError(attr.name)\">\n              <button\n                type=\"button\"\n                bsInputGroupBtn\n                [color]=\"colors.secondary\"\n                (click)=\"openReferenceSelector(attr)\">\n                ...\n              </button>\n            </bs-input-group>\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray && attr.editMode === 'inline') {\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\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>\n                @for (row of formData()[attr.name] || []; track $index) {\n                  <tr>\n                    @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                      <td>\n                        @if (col.dataType === 'boolean') {\n                          <bs-toggle-button\n                            [(ngModel)]=\"row[col.name]\"\n                            (ngModelChange)=\"onFieldChange()\">\n                          </bs-toggle-button>\n                        } @else if (col.dataType === 'Reference' && col.query) {\n                          <bs-select\n                            [(ngModel)]=\"row[col.name]\"\n                            (ngModelChange)=\"onFieldChange()\">\n                            <option [ngValue]=\"null\">{{ '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                        } @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                            (ngModelChange)=\"onFieldChange()\">\n                        }\n                      </td>\n                    }\n                    <td class=\"text-nowrap\">\n                      @if (attr | canDeleteDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" [color]=\"colors.secondary\" (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 + 1\" class=\"text-center text-muted\">\n                      {{ '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\" /> {{ '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                  @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>\n                @for (row of formData()[attr.name] || []; track $index) {\n                  <tr>\n                    @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                      <td>{{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}</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 + 1\" class=\"text-center text-muted\">\n                      {{ '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\" /> {{ '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 {\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    }\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()\">{{ 'cancel' | t }}</button>\n          <button type=\"submit\" [color]=\"colors.primary\" [disabled]=\"isSaving()\" (click)=\"onSave()\">\n            @if (isSaving()) {\n              <span class=\"spinner-border spinner-border-sm me-1\" role=\"status\" aria-hidden=\"true\"></span>\n            }\n            {{ '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\">{{ '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        </spark-po-form>\n      </div>\n    }\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeAsDetailModal()\">{{ 'cancel' | t }}</button>\n      <button type=\"button\" [color]=\"colors.primary\" (click)=\"saveAsDetailObject()\">{{ 'save' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n\n<!-- Modal for selecting Reference items -->\n<bs-modal [isOpen]=\"showReferenceModal()\" (isOpenChange)=\"!$event && closeReferenceModal()\">\n  <div *bsModal class=\"reference-modal\">\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'select' | t }} {{ editingReferenceAttr()?.label | resolveTranslation:editingReferenceAttr()?.name }}</h5>\n    </div>\n\n    <div bsModalBody>\n      @if (referenceModalEntityType()) {\n        <!-- Search box -->\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"6\">\n              <bs-input-group>\n                <span class=\"input-group-text\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'search' | t\"\n                  [(ngModel)]=\"referenceSearchTerm\"\n                  (ngModelChange)=\"onReferenceSearchChange()\">\n                @if (referenceSearchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearReferenceSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <div [md]=\"6\" class=\"text-end\">\n              @if (referenceSearchTerm && referenceModalPagination()) {\n                <span class=\"text-muted\">\n                  {{ referenceModalPagination()!.totalRecords }} {{ referenceModalPagination()!.totalRecords === 1 ? ('resultFound' | t) : ('resultsFound' | t) }}\n                </span>\n              }\n            </div>\n          </div>\n        </bs-grid>\n\n        <bs-datatable [(settings)]=\"referenceModalSettings\" (settingsChange)=\"applyReferenceFilter()\">\n          @for (attr of referenceVisibleAttributes(); track attr.id) {\n            <div *bsDatatableColumn=\"attr.name; sortable: true\">\n              {{ attr.label | resolveTranslation:attr.name }}\n            </div>\n          }\n\n          <tr *bsRowTemplate=\"let item of referenceModalPagination()\" (click)=\"selectReferenceItem(item)\" style=\"cursor: pointer;\">\n            @for (attr of referenceVisibleAttributes(); track attr.id) {\n              <td>{{ item | referenceAttrValue:attr.name }}</td>\n            }\n          </tr>\n        </bs-datatable>\n      } @else {\n        <div class=\"text-center p-3\">\n          <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n            <span class=\"visually-hidden\">{{ 'loading' | t }}</span>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeReferenceModal()\">{{ 'cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n\n<!-- Modal for selecting LookupReference items -->\n<bs-modal [isOpen]=\"showLookupModal()\" (isOpenChange)=\"!$event && closeLookupModal()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'select' | t }} {{ editingLookupAttr()?.label | resolveTranslation:editingLookupAttr()?.name }}</h5>\n    </div>\n\n    <div bsModalBody>\n      <!-- Search box -->\n      <bs-grid>\n        <div bsRow class=\"mb-3\">\n          <div [col]>\n            <bs-input-group>\n              <span class=\"input-group-text\">\n                <spark-icon name=\"search\" />\n              </span>\n              <input\n                type=\"text\"\n                [placeholder]=\"'search' | t\"\n                [ngModel]=\"lookupSearchTerm()\"\n                (ngModelChange)=\"lookupSearchTerm.set($event)\">\n              @if (lookupSearchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"lookupSearchTerm.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>\n          @for (item of filteredLookupItems(); track item.key) {\n            <tr\n              [class.table-primary]=\"formData()[editingLookupAttr()?.name ?? ''] === item.key\"\n              (click)=\"selectLookupItem(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\">{{ 'noItemsFound' | t }}</td>\n            </tr>\n          }\n        </tbody>\n      </bs-table>\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeLookupModal()\">{{ 'cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n</bs-form>\n", dependencies: [{ kind: "component", type: SparkPoFormComponent, selector: "spark-po-form", inputs: ["entityType", "formData", "validationErrors", "showButtons", "isSaving", "externalFieldTemplates"], outputs: ["formDataChange", "save", "cancel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColumnDirective, selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]", inputs: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "directive", type: BsGridColDirective, selector: "[col]", inputs: ["col"] }, { 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" }, { 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: BsModalHostComponent, selector: "bs-modal", inputs: ["isOpen", "closeOnEscape"], outputs: ["isOpenChange"] }, { kind: "directive", type: BsModalDirective, selector: "[bsModal]" }, { kind: "directive", type: BsModalHeaderDirective, selector: "[bsModalHeader]" }, { kind: "directive", type: BsModalBodyDirective, selector: "[bsModalBody]" }, { kind: "directive", type: BsModalFooterDirective, selector: "[bsModalFooter]" }, { kind: "component", type: BsDatatableComponent, selector: "bs-datatable", inputs: ["settings", "data"], outputs: ["settingsChange", "dataChange"] }, { kind: "directive", type: BsDatatableColumnDirective, selector: "[bsDatatableColumn]", inputs: ["bsDatatableColumn", "bsDatatableColumnSortable"] }, { kind: "directive", type: BsRowTemplateDirective, selector: "[bsRowTemplate]", inputs: ["bsRowTemplateOf"] }, { kind: "component", type: BsTableComponent, selector: "bs-table", inputs: ["isResponsive", "striped", "hover"] }, { kind: "component", type: BsToggleButtonComponent, selector: "bs-toggle-button", inputs: ["type", "isToggled", "name", "value", "group"], outputs: ["isToggledChange"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: InputTypePipe, name: "inputType" }, { kind: "pipe", type: LookupDisplayValuePipe, name: "lookupDisplayValue" }, { kind: "pipe", type: LookupDisplayTypePipe, name: "lookupDisplayType" }, { kind: "pipe", type: LookupOptionsPipe, name: "lookupOptions" }, { kind: "pipe", type: ReferenceDisplayValuePipe, name: "referenceDisplayValue" }, { 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: ReferenceAttrValuePipe, name: "referenceAttrValue" }, { kind: "pipe", type: ErrorForAttributePipe, name: "errorForAttribute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkPoFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spark-po-form', imports: [CommonModule, NgTemplateOutlet, FormsModule, BsFormComponent, BsFormControlDirective, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsGridColDirective, BsColFormLabelDirective, BsButtonTypeDirective, BsInputGroupComponent, BsSelectComponent, BsSelectOption, BsModalHostComponent, BsModalDirective, BsModalHeaderDirective, BsModalBodyDirective, BsModalFooterDirective, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsTableComponent, BsToggleButtonComponent, SparkIconComponent, SparkPoFormComponent, TranslateKeyPipe, ResolveTranslationPipe, InputTypePipe, LookupDisplayValuePipe, LookupDisplayTypePipe, LookupOptionsPipe, ReferenceDisplayValuePipe, AsDetailDisplayValuePipe, AsDetailTypePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, CanCreateDetailRowPipe, CanDeleteDetailRowPipe, InlineRefOptionsPipe, ReferenceAttrValuePipe, ErrorForAttributePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-form>\n  @if (entityType()) {\n    <bs-grid>\n    @for (attr of editableAttributes(); track attr.id) {\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 (getFieldTemplate(attr); as customTpl) {\n            <ng-container *ngTemplateOutlet=\"customTpl; context: getFieldTemplateContext(attr)\"></ng-container>\n          } @else if (attr.dataType === 'boolean') {\n            <bs-toggle-button\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange()\">\n            </bs-toggle-button>\n          } @else if (attr.lookupReferenceType) {\n            @if ((attr | lookupDisplayType:lookupReferenceOptions()) === ELookupDisplayType.Modal) {\n              <bs-input-group>\n                <input\n                  type=\"text\"\n                  [id]=\"attr.name\"\n                  [value]=\"attr | lookupDisplayValue:formData():lookupReferenceOptions()\"\n                  readonly\n                  [class.is-invalid]=\"hasError(attr.name)\">\n                <button\n                  type=\"button\"\n                  bsInputGroupBtn\n                  [color]=\"colors.secondary\"\n                  (click)=\"openLookupSelector(attr)\">\n                  ...\n                </button>\n              </bs-input-group>\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\">{{ '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') {\n            <bs-input-group>\n              <input\n                type=\"text\"\n                [id]=\"attr.name\"\n                [value]=\"attr | referenceDisplayValue:formData():referenceOptions()\"\n                readonly\n                [class.is-invalid]=\"hasError(attr.name)\">\n              <button\n                type=\"button\"\n                bsInputGroupBtn\n                [color]=\"colors.secondary\"\n                (click)=\"openReferenceSelector(attr)\">\n                ...\n              </button>\n            </bs-input-group>\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray && attr.editMode === 'inline') {\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\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>\n                @for (row of formData()[attr.name] || []; track $index) {\n                  <tr>\n                    @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                      <td>\n                        @if (col.dataType === 'boolean') {\n                          <bs-toggle-button\n                            [(ngModel)]=\"row[col.name]\"\n                            (ngModelChange)=\"onFieldChange()\">\n                          </bs-toggle-button>\n                        } @else if (col.dataType === 'Reference' && col.query) {\n                          <bs-select\n                            [(ngModel)]=\"row[col.name]\"\n                            (ngModelChange)=\"onFieldChange()\">\n                            <option [ngValue]=\"null\">{{ '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                        } @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                            (ngModelChange)=\"onFieldChange()\">\n                        }\n                      </td>\n                    }\n                    <td class=\"text-nowrap\">\n                      @if (attr | canDeleteDetailRow:asDetailPermissions()) {\n                        <button type=\"button\" [color]=\"colors.secondary\" (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 + 1\" class=\"text-center text-muted\">\n                      {{ '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\" /> {{ '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                  @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>\n                @for (row of formData()[attr.name] || []; track $index) {\n                  <tr>\n                    @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                      <td>{{ row | asDetailCellValue:attr:col:asDetailReferenceOptions() }}</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 + 1\" class=\"text-center text-muted\">\n                      {{ '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\" /> {{ '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 {\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    }\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()\">{{ 'cancel' | t }}</button>\n          <button type=\"submit\" [color]=\"colors.primary\" [disabled]=\"isSaving()\" (click)=\"onSave()\">\n            @if (isSaving()) {\n              <span class=\"spinner-border spinner-border-sm me-1\" role=\"status\" aria-hidden=\"true\"></span>\n            }\n            {{ '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\">{{ '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        </spark-po-form>\n      </div>\n    }\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeAsDetailModal()\">{{ 'cancel' | t }}</button>\n      <button type=\"button\" [color]=\"colors.primary\" (click)=\"saveAsDetailObject()\">{{ 'save' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n\n<!-- Modal for selecting Reference items -->\n<bs-modal [isOpen]=\"showReferenceModal()\" (isOpenChange)=\"!$event && closeReferenceModal()\">\n  <div *bsModal class=\"reference-modal\">\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'select' | t }} {{ editingReferenceAttr()?.label | resolveTranslation:editingReferenceAttr()?.name }}</h5>\n    </div>\n\n    <div bsModalBody>\n      @if (referenceModalEntityType()) {\n        <!-- Search box -->\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"6\">\n              <bs-input-group>\n                <span class=\"input-group-text\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'search' | t\"\n                  [(ngModel)]=\"referenceSearchTerm\"\n                  (ngModelChange)=\"onReferenceSearchChange()\">\n                @if (referenceSearchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearReferenceSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <div [md]=\"6\" class=\"text-end\">\n              @if (referenceSearchTerm && referenceModalPagination()) {\n                <span class=\"text-muted\">\n                  {{ referenceModalPagination()!.totalRecords }} {{ referenceModalPagination()!.totalRecords === 1 ? ('resultFound' | t) : ('resultsFound' | t) }}\n                </span>\n              }\n            </div>\n          </div>\n        </bs-grid>\n\n        <bs-datatable [(settings)]=\"referenceModalSettings\" (settingsChange)=\"applyReferenceFilter()\">\n          @for (attr of referenceVisibleAttributes(); track attr.id) {\n            <div *bsDatatableColumn=\"attr.name; sortable: true\">\n              {{ attr.label | resolveTranslation:attr.name }}\n            </div>\n          }\n\n          <tr *bsRowTemplate=\"let item of referenceModalPagination()\" (click)=\"selectReferenceItem(item)\" style=\"cursor: pointer;\">\n            @for (attr of referenceVisibleAttributes(); track attr.id) {\n              <td>{{ item | referenceAttrValue:attr.name }}</td>\n            }\n          </tr>\n        </bs-datatable>\n      } @else {\n        <div class=\"text-center p-3\">\n          <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n            <span class=\"visually-hidden\">{{ 'loading' | t }}</span>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeReferenceModal()\">{{ 'cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n\n<!-- Modal for selecting LookupReference items -->\n<bs-modal [isOpen]=\"showLookupModal()\" (isOpenChange)=\"!$event && closeLookupModal()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'select' | t }} {{ editingLookupAttr()?.label | resolveTranslation:editingLookupAttr()?.name }}</h5>\n    </div>\n\n    <div bsModalBody>\n      <!-- Search box -->\n      <bs-grid>\n        <div bsRow class=\"mb-3\">\n          <div [col]>\n            <bs-input-group>\n              <span class=\"input-group-text\">\n                <spark-icon name=\"search\" />\n              </span>\n              <input\n                type=\"text\"\n                [placeholder]=\"'search' | t\"\n                [ngModel]=\"lookupSearchTerm()\"\n                (ngModelChange)=\"lookupSearchTerm.set($event)\">\n              @if (lookupSearchTerm()) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"lookupSearchTerm.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>\n          @for (item of filteredLookupItems(); track item.key) {\n            <tr\n              [class.table-primary]=\"formData()[editingLookupAttr()?.name ?? ''] === item.key\"\n              (click)=\"selectLookupItem(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\">{{ 'noItemsFound' | t }}</td>\n            </tr>\n          }\n        </tbody>\n      </bs-table>\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeLookupModal()\">{{ 'cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n</bs-form>\n" }]
+        }], ctorParameters: () => [], propDecorators: { fieldTemplates: [{
+                type: ContentChildren,
+                args: [SparkFieldTemplateDirective]
+            }], 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 }] }], externalFieldTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalFieldTemplates", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
+class SparkPoCreateComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    sparkService = inject(SparkService);
+    fieldTemplates;
+    saved = output();
+    cancelled = output();
+    colors = Color;
+    entityType = signal(null, ...(ngDevMode ? [{ debugName: "entityType" }] : []));
+    type = signal('', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    formData = signal({}, ...(ngDevMode ? [{ debugName: "formData" }] : []));
+    validationErrors = signal([], ...(ngDevMode ? [{ debugName: "validationErrors" }] : []));
+    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+    generalErrors = computed(() => this.validationErrors().filter(e => !e.attributeName), ...(ngDevMode ? [{ debugName: "generalErrors" }] : []));
+    constructor() {
+        this.route.paramMap.pipe(takeUntilDestroyed()).subscribe(params => this.onParamsChange(params));
+    }
+    async onParamsChange(params) {
+        this.type.set(params.get('type') || '');
+        const types = await this.sparkService.getEntityTypes();
+        const entityType = types.find(t => t.id === this.type() || t.alias === this.type()) || null;
+        this.entityType.set(entityType);
+        this.initFormData();
+    }
+    initFormData() {
+        const data = {};
+        this.getEditableAttributes().forEach(attr => {
+            if (attr.dataType === 'Reference') {
+                data[attr.name] = null;
+            }
+            else if (attr.dataType === 'AsDetail') {
+                data[attr.name] = attr.isArray ? [] : {};
+            }
+            else if (attr.dataType === 'boolean') {
+                data[attr.name] = false;
+            }
+            else {
+                data[attr.name] = '';
+            }
+        });
+        this.formData.set(data);
+    }
+    getEditableAttributes() {
+        return this.entityType()?.attributes
+            .filter(a => a.isVisible && !a.isReadOnly && hasShowedOnFlag(a.showedOn, ShowedOn.PersistentObject))
+            .sort((a, b) => a.order - b.order) || [];
+    }
+    async onSave() {
+        if (!this.entityType())
+            return;
+        this.validationErrors.set([]);
+        this.isSaving.set(true);
+        const attributes = this.getEditableAttributes().map(attr => ({
+            id: attr.id,
+            name: attr.name,
+            value: this.formData()[attr.name],
+            dataType: attr.dataType,
+            isRequired: attr.isRequired,
+            isVisible: attr.isVisible,
+            isReadOnly: attr.isReadOnly,
+            isValueChanged: true,
+            order: attr.order,
+            rules: attr.rules
+        }));
+        const po = {
+            name: this.formData()['Name'] || 'New Item',
+            objectTypeId: this.entityType().id,
+            attributes
+        };
+        try {
+            const result = await this.sparkService.create(this.type(), po);
+            this.isSaving.set(false);
+            this.saved.emit(result);
+            this.router.navigate(['/po', this.type(), result.id]);
+        }
+        catch (e) {
+            this.isSaving.set(false);
+            const error = e;
+            if (error.status === 400 && error.error?.errors) {
+                this.validationErrors.set(error.error.errors);
+            }
+            else {
+                this.validationErrors.set([{
+                        attributeName: '',
+                        errorMessage: { en: error.message || 'An unexpected error occurred' },
+                        ruleType: 'error'
+                    }]);
+            }
+        }
+    }
+    onCancel() {
+        this.cancelled.emit();
+        window.history.back();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkPoCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SparkPoCreateComponent, isStandalone: true, selector: "spark-po-create", outputs: { saved: "saved", cancelled: "cancelled" }, queries: [{ propertyName: "fieldTemplates", predicate: SparkFieldTemplateDirective }], ngImport: i0, template: "<bs-container>\n<div class=\"container\">\n  @if (entityType(); as et) {\n    <h2 class=\"mb-4\">{{ 'create' | t }} {{ (et.description | resolveTranslation) || et.name }}</h2>\n\n    @for (error of generalErrors(); track error.errorMessage) {\n      <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n        {{ error.errorMessage }}\n      </bs-alert>\n    }\n\n    <bs-card>\n      <bs-card-header>{{ 'properties' | t }}</bs-card-header>\n      <div class=\"p-3\">\n        <spark-po-form\n          [entityType]=\"et\"\n          [(formData)]=\"formData\"\n          [validationErrors]=\"validationErrors()\"\n          [showButtons]=\"true\"\n          [isSaving]=\"isSaving()\"\n          [externalFieldTemplates]=\"fieldTemplates.toArray()\"\n          (save)=\"onSave()\"\n          (cancel)=\"onCancel()\">\n        </spark-po-form>\n      </div>\n    </bs-card>\n  } @else {\n    <div class=\"text-center p-5\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{ 'loading' | t }}</span>\n      </div>\n    </div>\n  }\n</div>\n</bs-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BsAlertComponent, selector: "bs-alert", inputs: ["type", "isVisible"], outputs: ["isVisibleChange", "afterOpenedOrClosed"] }, { kind: "component", type: BsCardComponent, selector: "bs-card", inputs: ["rounded"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["noPadding"] }, { kind: "component", type: BsContainerComponent, selector: "bs-container" }, { kind: "component", type: SparkPoFormComponent, selector: "spark-po-form", inputs: ["entityType", "formData", "validationErrors", "showButtons", "isSaving", "externalFieldTemplates"], outputs: ["formDataChange", "save", "cancel"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkPoCreateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spark-po-create', imports: [CommonModule, BsAlertComponent, BsCardComponent, BsCardHeaderComponent, BsContainerComponent, SparkPoFormComponent, ResolveTranslationPipe, TranslateKeyPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-container>\n<div class=\"container\">\n  @if (entityType(); as et) {\n    <h2 class=\"mb-4\">{{ 'create' | t }} {{ (et.description | resolveTranslation) || et.name }}</h2>\n\n    @for (error of generalErrors(); track error.errorMessage) {\n      <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n        {{ error.errorMessage }}\n      </bs-alert>\n    }\n\n    <bs-card>\n      <bs-card-header>{{ 'properties' | t }}</bs-card-header>\n      <div class=\"p-3\">\n        <spark-po-form\n          [entityType]=\"et\"\n          [(formData)]=\"formData\"\n          [validationErrors]=\"validationErrors()\"\n          [showButtons]=\"true\"\n          [isSaving]=\"isSaving()\"\n          [externalFieldTemplates]=\"fieldTemplates.toArray()\"\n          (save)=\"onSave()\"\n          (cancel)=\"onCancel()\">\n        </spark-po-form>\n      </div>\n    </bs-card>\n  } @else {\n    <div class=\"text-center p-5\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{ 'loading' | t }}</span>\n      </div>\n    </div>\n  }\n</div>\n</bs-container>\n" }]
+        }], ctorParameters: () => [], propDecorators: { fieldTemplates: [{
+                type: ContentChildren,
+                args: [SparkFieldTemplateDirective]
+            }], saved: [{ type: i0.Output, args: ["saved"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+var sparkPoCreate_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SparkPoCreateComponent: SparkPoCreateComponent
+});
+
+class SparkPoEditComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    sparkService = inject(SparkService);
+    fieldTemplates;
+    saved = output();
+    cancelled = output();
+    colors = Color;
+    entityType = signal(null, ...(ngDevMode ? [{ debugName: "entityType" }] : []));
+    item = signal(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
+    type = '';
+    id = '';
+    formData = signal({}, ...(ngDevMode ? [{ debugName: "formData" }] : []));
+    validationErrors = signal([], ...(ngDevMode ? [{ debugName: "validationErrors" }] : []));
+    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+    generalErrors = computed(() => this.validationErrors().filter(e => !e.attributeName), ...(ngDevMode ? [{ debugName: "generalErrors" }] : []));
+    constructor() {
+        this.route.paramMap.pipe(takeUntilDestroyed()).subscribe(params => this.onParamsChange(params));
+    }
+    async onParamsChange(params) {
+        this.type = params.get('type') || '';
+        this.id = params.get('id') || '';
+        try {
+            const [types, item] = await Promise.all([
+                this.sparkService.getEntityTypes(),
+                this.sparkService.get(this.type, this.id)
+            ]);
+            const entityType = types.find(t => t.id === this.type || t.alias === this.type) || null;
+            this.entityType.set(entityType);
+            this.item.set(item);
+            this.initFormData();
+        }
+        catch (e) {
+            const error = e;
+            this.validationErrors.set([{
+                    attributeName: '',
+                    errorMessage: { en: error.error?.error || error.message || 'An unexpected error occurred' },
+                    ruleType: 'error'
+                }]);
+        }
+    }
+    initFormData() {
+        const data = {};
+        const currentItem = this.item();
+        this.getEditableAttributes().forEach(attr => {
+            const itemAttr = currentItem?.attributes.find(a => a.name === attr.name);
+            if (attr.dataType === 'Reference') {
+                data[attr.name] = itemAttr?.value ?? null;
+            }
+            else if (attr.dataType === 'AsDetail') {
+                data[attr.name] = itemAttr?.value ?? (attr.isArray ? [] : {});
+            }
+            else if (attr.dataType === 'boolean') {
+                data[attr.name] = itemAttr?.value ?? false;
+            }
+            else {
+                data[attr.name] = itemAttr?.value ?? '';
+            }
+        });
+        this.formData.set(data);
+    }
+    getEditableAttributes() {
+        return this.entityType()?.attributes
+            .filter(a => a.isVisible && !a.isReadOnly && hasShowedOnFlag(a.showedOn, ShowedOn.PersistentObject))
+            .sort((a, b) => a.order - b.order) || [];
+    }
+    async onSave() {
+        const currentItem = this.item();
+        if (!this.entityType() || !currentItem)
+            return;
+        this.validationErrors.set([]);
+        this.isSaving.set(true);
+        const attributes = currentItem.attributes.map(attr => {
+            const editableAttr = this.getEditableAttributes().find(a => a.name === attr.name);
+            const newValue = editableAttr ? this.formData()[attr.name] : attr.value;
+            return {
+                ...attr,
+                value: newValue,
+                isValueChanged: editableAttr ? newValue !== attr.value : false
+            };
+        });
+        const po = {
+            id: currentItem.id,
+            name: this.formData()['Name'] || currentItem.name,
+            objectTypeId: this.entityType().id,
+            attributes
+        };
+        try {
+            const result = await this.sparkService.update(this.type, this.id, po);
+            this.isSaving.set(false);
+            this.saved.emit(result);
+            this.router.navigate(['/po', this.type, this.id]);
+        }
+        catch (e) {
+            this.isSaving.set(false);
+            const error = e;
+            if (error.status === 400 && error.error?.errors) {
+                this.validationErrors.set(error.error.errors);
+            }
+            else {
+                this.validationErrors.set([{
+                        attributeName: '',
+                        errorMessage: { en: error.message || 'An unexpected error occurred' },
+                        ruleType: 'error'
+                    }]);
+            }
+        }
+    }
+    onCancel() {
+        this.cancelled.emit();
+        this.router.navigate(['/po', this.type, this.id]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkPoEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SparkPoEditComponent, isStandalone: true, selector: "spark-po-edit", outputs: { saved: "saved", cancelled: "cancelled" }, queries: [{ propertyName: "fieldTemplates", predicate: SparkFieldTemplateDirective }], ngImport: i0, template: "<bs-container>\n<div class=\"container\">\n  @for (error of generalErrors(); track error.errorMessage) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ error.errorMessage }}\n    </bs-alert>\n  }\n\n  @if (entityType(); as et) {\n    @if (item()) {\n    <h2 class=\"mb-4\">{{ 'edit' | t }} {{ (et.description | resolveTranslation) || et.name }}</h2>\n\n    <bs-card>\n      <bs-card-header>{{ 'properties' | t }}</bs-card-header>\n      <div class=\"p-3\">\n        <spark-po-form\n          [entityType]=\"et\"\n          [(formData)]=\"formData\"\n          [validationErrors]=\"validationErrors()\"\n          [showButtons]=\"true\"\n          [isSaving]=\"isSaving()\"\n          [externalFieldTemplates]=\"fieldTemplates.toArray()\"\n          (save)=\"onSave()\"\n          (cancel)=\"onCancel()\">\n        </spark-po-form>\n      </div>\n    </bs-card>\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{ 'loading' | t }}</span>\n      </div>\n    </div>\n  }\n</div>\n</bs-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BsAlertComponent, selector: "bs-alert", inputs: ["type", "isVisible"], outputs: ["isVisibleChange", "afterOpenedOrClosed"] }, { kind: "component", type: BsCardComponent, selector: "bs-card", inputs: ["rounded"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["noPadding"] }, { kind: "component", type: BsContainerComponent, selector: "bs-container" }, { kind: "component", type: SparkPoFormComponent, selector: "spark-po-form", inputs: ["entityType", "formData", "validationErrors", "showButtons", "isSaving", "externalFieldTemplates"], outputs: ["formDataChange", "save", "cancel"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkPoEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spark-po-edit', imports: [CommonModule, BsAlertComponent, BsCardComponent, BsCardHeaderComponent, BsContainerComponent, SparkPoFormComponent, ResolveTranslationPipe, TranslateKeyPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-container>\n<div class=\"container\">\n  @for (error of generalErrors(); track error.errorMessage) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ error.errorMessage }}\n    </bs-alert>\n  }\n\n  @if (entityType(); as et) {\n    @if (item()) {\n    <h2 class=\"mb-4\">{{ 'edit' | t }} {{ (et.description | resolveTranslation) || et.name }}</h2>\n\n    <bs-card>\n      <bs-card-header>{{ 'properties' | t }}</bs-card-header>\n      <div class=\"p-3\">\n        <spark-po-form\n          [entityType]=\"et\"\n          [(formData)]=\"formData\"\n          [validationErrors]=\"validationErrors()\"\n          [showButtons]=\"true\"\n          [isSaving]=\"isSaving()\"\n          [externalFieldTemplates]=\"fieldTemplates.toArray()\"\n          (save)=\"onSave()\"\n          (cancel)=\"onCancel()\">\n        </spark-po-form>\n      </div>\n    </bs-card>\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{ 'loading' | t }}</span>\n      </div>\n    </div>\n  }\n</div>\n</bs-container>\n" }]
+        }], ctorParameters: () => [], propDecorators: { fieldTemplates: [{
+                type: ContentChildren,
+                args: [SparkFieldTemplateDirective]
+            }], saved: [{ type: i0.Output, args: ["saved"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+var sparkPoEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SparkPoEditComponent: SparkPoEditComponent
+});
+
+class AttributeValuePipe {
+    transform(attrName, item, entityType, lookupRefOptions, allEntityTypes) {
+        if (!item)
+            return '';
+        const attr = item.attributes.find(a => a.name === attrName);
+        if (!attr)
+            return '';
+        if (attr.breadcrumb)
+            return attr.breadcrumb;
+        const attrDef = entityType?.attributes.find(a => a.name === attrName);
+        if (attrDef?.dataType === 'AsDetail' && attr.value) {
+            if (Array.isArray(attr.value)) {
+                return `${attr.value.length} item${attr.value.length !== 1 ? 's' : ''}`;
+            }
+            if (typeof attr.value === 'object') {
+                return this.formatAsDetailValue(attrDef, attr.value, allEntityTypes);
+            }
+        }
+        if (attrDef?.lookupReferenceType && attr.value != null && attr.value !== '') {
+            const lookupRef = lookupRefOptions[attrDef.lookupReferenceType];
+            if (lookupRef) {
+                const option = lookupRef.values.find(v => v.key === String(attr.value));
+                if (option) {
+                    return resolveTranslation(option.values) || option.key;
+                }
+            }
+        }
+        if (attrDef?.dataType === 'boolean') {
+            return attr.value ?? null;
+        }
+        return attr.value ?? '';
+    }
+    formatAsDetailValue(attrDef, value, allEntityTypes) {
+        const asDetailType = allEntityTypes.find(t => t.clrType === attrDef.asDetailType);
+        if (asDetailType?.displayFormat) {
+            const result = this.resolveDisplayFormat(asDetailType.displayFormat, value);
+            if (result && result.trim())
+                return result;
+        }
+        if (asDetailType?.displayAttribute && value[asDetailType.displayAttribute]) {
+            return value[asDetailType.displayAttribute];
+        }
+        const displayProps = ['Name', 'Title', 'Street', 'name', 'title'];
+        for (const prop of displayProps) {
+            if (value[prop])
+                return value[prop];
+        }
+        return '(object)';
+    }
+    resolveDisplayFormat(format, data) {
+        return format.replace(/\{(\w+)\}/g, (match, propertyName) => {
+            const value = data[propertyName];
+            return value != null ? String(value) : '';
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AttributeValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: AttributeValuePipe, isStandalone: true, name: "attributeValue" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AttributeValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'attributeValue', standalone: true, pure: true }]
+        }] });
+
+class RawAttributeValuePipe {
+    transform(attrName, item) {
+        return item?.attributes.find(a => a.name === attrName)?.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RawAttributeValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: RawAttributeValuePipe, isStandalone: true, name: "rawAttributeValue" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RawAttributeValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rawAttributeValue', standalone: true, pure: true }]
+        }] });
+
+class ArrayValuePipe {
+    transform(attrName, item) {
+        const attr = item?.attributes.find(a => a.name === attrName);
+        if (!attr || !Array.isArray(attr.value))
+            return [];
+        return attr.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrayValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ArrayValuePipe, isStandalone: true, name: "arrayValue" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrayValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'arrayValue', standalone: true, pure: true }]
+        }] });
+
+class ReferenceLinkRoutePipe {
+    transform(referenceClrType, referenceId, allEntityTypes) {
+        if (!referenceId || !referenceClrType)
+            return null;
+        const targetType = allEntityTypes.find(t => t.clrType === referenceClrType);
+        if (!targetType)
+            return null;
+        return ['/po', targetType.alias || targetType.id, referenceId];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReferenceLinkRoutePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ReferenceLinkRoutePipe, isStandalone: true, name: "referenceLinkRoute" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReferenceLinkRoutePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'referenceLinkRoute', standalone: true, pure: true }]
+        }] });
+
+class SparkDetailFieldTemplateDirective {
+    template;
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), alias: 'sparkDetailFieldTemplate' });
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkDetailFieldTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: SparkDetailFieldTemplateDirective, isStandalone: true, selector: "[sparkDetailFieldTemplate]", inputs: { name: { classPropertyName: "name", publicName: "sparkDetailFieldTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkDetailFieldTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sparkDetailFieldTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "sparkDetailFieldTemplate", required: true }] }] } });
+
+class SparkPoDetailComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    sparkService = inject(SparkService);
+    lang = inject(SparkLanguageService);
+    detailFieldTemplates;
+    showCustomActions = input(true, ...(ngDevMode ? [{ debugName: "showCustomActions" }] : []));
+    extraActionsTemplate = input(null, ...(ngDevMode ? [{ debugName: "extraActionsTemplate" }] : []));
+    extraContentTemplate = input(null, ...(ngDevMode ? [{ debugName: "extraContentTemplate" }] : []));
+    edited = output();
+    deleted = output();
+    customActionExecuted = output();
+    colors = Color;
+    errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    entityType = signal(null, ...(ngDevMode ? [{ debugName: "entityType" }] : []));
+    allEntityTypes = signal([], ...(ngDevMode ? [{ debugName: "allEntityTypes" }] : []));
+    item = signal(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
+    lookupReferenceOptions = signal({}, ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : []));
+    asDetailTypes = signal({}, ...(ngDevMode ? [{ debugName: "asDetailTypes" }] : []));
+    asDetailReferenceOptions = signal({}, ...(ngDevMode ? [{ debugName: "asDetailReferenceOptions" }] : []));
+    type = '';
+    id = '';
+    canEdit = signal(false, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canDelete = signal(false, ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    customActions = signal([], ...(ngDevMode ? [{ debugName: "customActions" }] : []));
+    constructor() {
+        this.route.paramMap.pipe(takeUntilDestroyed()).subscribe(params => this.onParamsChange(params));
+    }
+    async onParamsChange(params) {
+        this.type = params.get('type') || '';
+        this.id = params.get('id') || '';
+        try {
+            const [entityTypes, item] = await Promise.all([
+                this.sparkService.getEntityTypes(),
+                this.sparkService.get(this.type, this.id)
+            ]);
+            this.allEntityTypes.set(entityTypes);
+            this.entityType.set(entityTypes.find(t => t.id === this.type || t.alias === this.type) || null);
+            this.item.set(item);
+            this.loadLookupReferenceOptions();
+            this.loadAsDetailTypes();
+            const et = this.entityType();
+            if (et) {
+                const [permissions, actions] = await Promise.all([
+                    this.sparkService.getPermissions(et.id),
+                    this.sparkService.getCustomActions(et.id)
+                ]);
+                this.canEdit.set(permissions.canEdit);
+                this.canDelete.set(permissions.canDelete);
+                this.customActions.set(actions.filter(a => a.showedOn === 'detail' || a.showedOn === 'both'));
+            }
+        }
+        catch (e) {
+            const error = e;
+            this.errorMessage.set(error.error?.error || error.message || 'An unexpected error occurred');
+        }
+    }
+    visibleAttributes = computed(() => {
+        return this.entityType()?.attributes
+            .filter(a => a.isVisible && hasShowedOnFlag(a.showedOn, ShowedOn.PersistentObject))
+            .sort((a, b) => a.order - b.order) || [];
+    }, ...(ngDevMode ? [{ debugName: "visibleAttributes" }] : []));
+    getDetailFieldTemplate(attr) {
+        if (!this.detailFieldTemplates)
+            return null;
+        const byName = this.detailFieldTemplates.find(t => t.name() === attr.name);
+        if (byName)
+            return byName.template;
+        const byType = this.detailFieldTemplates.find(t => t.name() === attr.dataType);
+        if (byType)
+            return byType.template;
+        return null;
+    }
+    getDetailFieldContext(attr, item) {
+        const itemAttr = item.attributes.find(a => a.name === attr.name);
+        return {
+            $implicit: attr,
+            item,
+            value: itemAttr?.value
+        };
+    }
+    async loadLookupReferenceOptions() {
+        const lookupAttrs = this.visibleAttributes().filter(a => a.lookupReferenceType);
+        if (lookupAttrs.length === 0)
+            return;
+        const lookupNames = [...new Set(lookupAttrs.map(a => a.lookupReferenceType))];
+        const entries = await Promise.all(lookupNames.map(async (name) => {
+            const result = await this.sparkService.getLookupReference(name);
+            return [name, result];
+        }));
+        this.lookupReferenceOptions.set(entries.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {}));
+    }
+    async loadAsDetailTypes() {
+        const asDetailAttrs = this.visibleAttributes().filter(a => a.dataType === 'AsDetail' && a.isArray && a.asDetailType);
+        if (asDetailAttrs.length === 0)
+            return;
+        const types = this.allEntityTypes();
+        const newAsDetailTypes = {};
+        for (const attr of asDetailAttrs) {
+            const asDetailType = types.find(t => t.clrType === attr.asDetailType);
+            if (asDetailType) {
+                newAsDetailTypes[attr.name] = asDetailType;
+                const refCols = asDetailType.attributes.filter(a => a.dataType === 'Reference' && a.query);
+                if (refCols.length > 0) {
+                    const refEntries = await Promise.all(refCols.map(async (col) => {
+                        const results = await this.sparkService.executeQueryByName(col.query);
+                        return [col.name, results];
+                    }));
+                    this.asDetailReferenceOptions.update(prev => ({
+                        ...prev,
+                        [attr.name]: refEntries.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
+                    }));
+                }
+            }
+        }
+        this.asDetailTypes.set(newAsDetailTypes);
+    }
+    async onCustomAction(action) {
+        if (action.confirmationMessageKey) {
+            const message = this.lang.t(action.confirmationMessageKey) || 'Are you sure?';
+            if (!confirm(message))
+                return;
+        }
+        try {
+            await this.sparkService.executeCustomAction(this.type, action.name, this.item() || undefined);
+            this.customActionExecuted.emit({ action, item: this.item() });
+            if (action.refreshOnCompleted) {
+                const item = await this.sparkService.get(this.type, this.id);
+                this.item.set(item);
+            }
+        }
+        catch (e) {
+            const err = e;
+            this.errorMessage.set(err.error?.error || err.message || 'Action failed');
+        }
+    }
+    onEdit() {
+        this.edited.emit();
+        this.router.navigate(['/po', this.type, this.id, 'edit']);
+    }
+    async onDelete() {
+        if (confirm(this.lang.t('confirmDelete'))) {
+            await this.sparkService.delete(this.type, this.id);
+            this.deleted.emit();
+            this.router.navigate(['/']);
+        }
+    }
+    onBack() {
+        window.history.back();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkPoDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SparkPoDetailComponent, isStandalone: true, selector: "spark-po-detail", inputs: { showCustomActions: { classPropertyName: "showCustomActions", publicName: "showCustomActions", isSignal: true, isRequired: false, transformFunction: null }, extraActionsTemplate: { classPropertyName: "extraActionsTemplate", publicName: "extraActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraContentTemplate: { classPropertyName: "extraContentTemplate", publicName: "extraContentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edited: "edited", deleted: "deleted", customActionExecuted: "customActionExecuted" }, queries: [{ propertyName: "detailFieldTemplates", predicate: SparkDetailFieldTemplateDirective }], ngImport: i0, template: "<bs-container>\n<div class=\"container\">\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  } @else if (item(); as currentItem) {\n    @if (entityType(); as et) {\n    <div class=\"d-flex justify-content-between align-items-center mb-4\">\n      <h2>{{ currentItem.breadcrumb || currentItem.name }}</h2>\n      <bs-button-group>\n        <button class=\"btn btn-outline-secondary\" (click)=\"onBack()\">\n          <spark-icon name=\"arrow-left\" /> {{ 'back' | t }}\n        </button>\n        @if (canEdit()) {\n          <button class=\"btn btn-primary\" (click)=\"onEdit()\">\n            <spark-icon name=\"pencil\" /> {{ 'edit' | t }}\n          </button>\n        }\n        @if (extraActionsTemplate(); as extraActionsTpl) {\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        }\n        @if (showCustomActions()) {\n          @for (action of customActions(); track action.name) {\n            <button class=\"btn btn-outline-primary\" (click)=\"onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        }\n        @if (canDelete()) {\n          <button class=\"btn btn-danger\" (click)=\"onDelete()\">\n            <spark-icon name=\"trash\" /> {{ 'delete' | t }}\n          </button>\n        }\n      </bs-button-group>\n    </div>\n\n    <bs-card>\n      <bs-card-header>{{ 'details' | t }}</bs-card-header>\n      <div class=\"p-3\">\n        <bs-grid>\n          <dl bsRow>\n            @for (attr of visibleAttributes(); track attr.id) {\n              <dt [sm]=\"3\">{{ (attr.label | resolveTranslation) || attr.name }}</dt>\n              <dd [sm]=\"9\">\n              @if (getDetailFieldTemplate(attr); as customTpl) {\n                <ng-container *ngTemplateOutlet=\"customTpl; context: getDetailFieldContext(attr, currentItem)\"></ng-container>\n              } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n                <bs-table [isResponsive]=\"true\">\n                  <thead>\n                    <tr>\n                      @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                        <th>{{ (col.label | resolveTranslation) || col.name }}</th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (row of (attr.name | arrayValue:currentItem); track $index) {\n                      <tr>\n                        @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                          <td>\n                            @if (col.dataType === 'Reference' && col.referenceType) {\n                              @let route = (col.referenceType | referenceLinkRoute:row[col.name]:allEntityTypes());\n                              @if (route) {\n                                <a [routerLink]=\"route\">{{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}</a>\n                              } @else {\n                                {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                              }\n                            } @else {\n                              {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                            }\n                          </td>\n                        }\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length\" class=\"text-center text-muted\">\n                          {{ 'noItemsFound' | t }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </bs-table>\n              } @else if (attr.dataType === 'boolean') {\n                <input type=\"checkbox\"\n                  [checked]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                  [indeterminate]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                  disabled\n                  onclick=\"return false;\"\n                  style=\"opacity: 1;\">\n              } @else if (attr.dataType === 'color') {\n                @let colorVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (colorVal) {\n                  <span class=\"d-inline-block align-middle border rounded me-2\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n                  {{ colorVal }}\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.referenceType) {\n                @let refRoute = (attr.referenceType | referenceLinkRoute:(attr.name | rawAttributeValue:item()):allEntityTypes());\n                @if (refRoute && (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes())) {\n                  <a [routerLink]=\"refRoute\">{{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) }}</a>\n                } @else {\n                  {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n                }\n              } @else {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n            }\n          </dl>\n        </bs-grid>\n      </div>\n    </bs-card>\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{ 'loading' | t }}</span>\n      </div>\n    </div>\n  }\n</div>\n</bs-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: BsAlertComponent, selector: "bs-alert", inputs: ["type", "isVisible"], outputs: ["isVisibleChange", "afterOpenedOrClosed"] }, { kind: "component", type: BsButtonGroupComponent, selector: "bs-button-group" }, { kind: "component", type: BsCardComponent, selector: "bs-card", inputs: ["rounded"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["noPadding"] }, { kind: "component", type: BsContainerComponent, selector: "bs-container" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColumnDirective, selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]", inputs: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: BsTableComponent, selector: "bs-table", inputs: ["isResponsive", "striped", "hover"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }, { kind: "pipe", type: AttributeValuePipe, name: "attributeValue" }, { kind: "pipe", type: RawAttributeValuePipe, name: "rawAttributeValue" }, { kind: "pipe", type: AsDetailColumnsPipe, name: "asDetailColumns" }, { kind: "pipe", type: AsDetailCellValuePipe, name: "asDetailCellValue" }, { kind: "pipe", type: ArrayValuePipe, name: "arrayValue" }, { kind: "pipe", type: ReferenceLinkRoutePipe, name: "referenceLinkRoute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkPoDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spark-po-detail', imports: [CommonModule, NgTemplateOutlet, RouterModule, BsAlertComponent, BsButtonGroupComponent, BsCardComponent, BsCardHeaderComponent, BsContainerComponent, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsTableComponent, SparkIconComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe, RawAttributeValuePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, ArrayValuePipe, ReferenceLinkRoutePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-container>\n<div class=\"container\">\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  } @else if (item(); as currentItem) {\n    @if (entityType(); as et) {\n    <div class=\"d-flex justify-content-between align-items-center mb-4\">\n      <h2>{{ currentItem.breadcrumb || currentItem.name }}</h2>\n      <bs-button-group>\n        <button class=\"btn btn-outline-secondary\" (click)=\"onBack()\">\n          <spark-icon name=\"arrow-left\" /> {{ 'back' | t }}\n        </button>\n        @if (canEdit()) {\n          <button class=\"btn btn-primary\" (click)=\"onEdit()\">\n            <spark-icon name=\"pencil\" /> {{ 'edit' | t }}\n          </button>\n        }\n        @if (extraActionsTemplate(); as extraActionsTpl) {\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        }\n        @if (showCustomActions()) {\n          @for (action of customActions(); track action.name) {\n            <button class=\"btn btn-outline-primary\" (click)=\"onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        }\n        @if (canDelete()) {\n          <button class=\"btn btn-danger\" (click)=\"onDelete()\">\n            <spark-icon name=\"trash\" /> {{ 'delete' | t }}\n          </button>\n        }\n      </bs-button-group>\n    </div>\n\n    <bs-card>\n      <bs-card-header>{{ 'details' | t }}</bs-card-header>\n      <div class=\"p-3\">\n        <bs-grid>\n          <dl bsRow>\n            @for (attr of visibleAttributes(); track attr.id) {\n              <dt [sm]=\"3\">{{ (attr.label | resolveTranslation) || attr.name }}</dt>\n              <dd [sm]=\"9\">\n              @if (getDetailFieldTemplate(attr); as customTpl) {\n                <ng-container *ngTemplateOutlet=\"customTpl; context: getDetailFieldContext(attr, currentItem)\"></ng-container>\n              } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n                <bs-table [isResponsive]=\"true\">\n                  <thead>\n                    <tr>\n                      @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                        <th>{{ (col.label | resolveTranslation) || col.name }}</th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (row of (attr.name | arrayValue:currentItem); track $index) {\n                      <tr>\n                        @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                          <td>\n                            @if (col.dataType === 'Reference' && col.referenceType) {\n                              @let route = (col.referenceType | referenceLinkRoute:row[col.name]:allEntityTypes());\n                              @if (route) {\n                                <a [routerLink]=\"route\">{{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}</a>\n                              } @else {\n                                {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                              }\n                            } @else {\n                              {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                            }\n                          </td>\n                        }\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length\" class=\"text-center text-muted\">\n                          {{ 'noItemsFound' | t }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </bs-table>\n              } @else if (attr.dataType === 'boolean') {\n                <input type=\"checkbox\"\n                  [checked]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                  [indeterminate]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                  disabled\n                  onclick=\"return false;\"\n                  style=\"opacity: 1;\">\n              } @else if (attr.dataType === 'color') {\n                @let colorVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (colorVal) {\n                  <span class=\"d-inline-block align-middle border rounded me-2\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n                  {{ colorVal }}\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.referenceType) {\n                @let refRoute = (attr.referenceType | referenceLinkRoute:(attr.name | rawAttributeValue:item()):allEntityTypes());\n                @if (refRoute && (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes())) {\n                  <a [routerLink]=\"refRoute\">{{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) }}</a>\n                } @else {\n                  {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n                }\n              } @else {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n            }\n          </dl>\n        </bs-grid>\n      </div>\n    </bs-card>\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{ 'loading' | t }}</span>\n      </div>\n    </div>\n  }\n</div>\n</bs-container>\n" }]
+        }], ctorParameters: () => [], propDecorators: { detailFieldTemplates: [{
+                type: ContentChildren,
+                args: [SparkDetailFieldTemplateDirective]
+            }], showCustomActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomActions", required: false }] }], extraActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraActionsTemplate", required: false }] }], extraContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraContentTemplate", required: false }] }], edited: [{ type: i0.Output, args: ["edited"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }] } });
+
+var sparkPoDetail_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SparkPoDetailComponent: SparkPoDetailComponent
+});
+
+class SparkColumnTemplateDirective {
+    template;
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), alias: 'sparkColumnTemplate' });
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkColumnTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: SparkColumnTemplateDirective, isStandalone: true, selector: "[sparkColumnTemplate]", inputs: { name: { classPropertyName: "name", publicName: "sparkColumnTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkColumnTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sparkColumnTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "sparkColumnTemplate", required: true }] }] } });
+
+class SparkQueryListComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    sparkService = inject(SparkService);
+    columnTemplates;
+    extraActionsTemplate = input(null, ...(ngDevMode ? [{ debugName: "extraActionsTemplate" }] : []));
+    rowClicked = output();
+    createClicked = output();
+    colors = Color;
+    errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    query = signal(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
+    entityType = signal(null, ...(ngDevMode ? [{ debugName: "entityType" }] : []));
+    allEntityTypes = signal([], ...(ngDevMode ? [{ debugName: "allEntityTypes" }] : []));
+    allItems = signal([], ...(ngDevMode ? [{ debugName: "allItems" }] : []));
+    lookupReferenceOptions = signal({}, ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : []));
+    paginationData = signal(undefined, ...(ngDevMode ? [{ debugName: "paginationData" }] : []));
+    searchTerm = '';
+    canCreate = signal(false, ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    settings = new DatatableSettings({
+        perPage: { values: [10, 25, 50], selected: 10 },
+        page: { values: [1], selected: 1 },
+        sortProperty: '',
+        sortDirection: 'ascending'
+    });
+    currentSortProperty = '';
+    currentSortDirection = '';
+    constructor() {
+        this.route.paramMap.pipe(takeUntilDestroyed()).subscribe(params => this.onParamsChange(params));
+    }
+    async onParamsChange(params) {
+        const queryId = params.get('queryId');
+        const typeParam = params.get('type');
+        let resolvedQuery = null;
+        let resolvedEntityType = null;
+        let resolvedEntityTypes = [];
+        if (queryId) {
+            resolvedQuery = await this.sparkService.getQuery(queryId);
+            if (resolvedQuery) {
+                const result = await this.resolveEntityTypeForQuery(resolvedQuery);
+                resolvedEntityType = result.entityType;
+                resolvedEntityTypes = result.entityTypes;
+            }
+        }
+        else if (typeParam) {
+            resolvedEntityTypes = await this.sparkService.getEntityTypes();
+            resolvedEntityType = resolvedEntityTypes.find(t => t.id === typeParam || t.alias === typeParam) || null;
+            if (resolvedEntityType) {
+                const queries = await this.sparkService.getQueries();
+                const singularName = resolvedEntityType.name;
+                resolvedQuery = queries.find(q => {
+                    const contextSingular = this.singularize(q.contextProperty);
+                    return q.contextProperty === singularName ||
+                        contextSingular === singularName ||
+                        q.contextProperty === singularName + 's';
+                }) || null;
+            }
+        }
+        if (resolvedQuery)
+            this.query.set(resolvedQuery);
+        if (resolvedEntityType) {
+            this.entityType.set(resolvedEntityType);
+            this.allEntityTypes.set(resolvedEntityTypes);
+            this.settings = new DatatableSettings({
+                perPage: { values: [10, 25, 50], selected: 10 },
+                page: { values: [1], selected: 1 },
+                sortProperty: resolvedQuery?.sortBy || '',
+                sortDirection: resolvedQuery?.sortDirection === 'desc' ? 'descending' : 'ascending'
+            });
+            this.loadLookupReferenceOptions();
+            const permissions = await this.sparkService.getPermissions(resolvedEntityType.id);
+            this.canCreate.set(permissions.canCreate);
+            await this.loadItems();
+        }
+    }
+    async resolveEntityTypeForQuery(query) {
+        const singularName = this.singularize(query.contextProperty);
+        const entityTypes = await this.sparkService.getEntityTypes();
+        const type = entityTypes.find(t => t.name === query.contextProperty ||
+            t.name === singularName ||
+            t.clrType.endsWith(singularName));
+        return { entityType: type || null, entityTypes };
+    }
+    singularize(plural) {
+        const irregulars = {
+            'People': 'Person',
+            'Children': 'Child',
+            'Men': 'Men',
+            'Women': 'Woman'
+        };
+        if (irregulars[plural])
+            return irregulars[plural];
+        if (plural.endsWith('ies')) {
+            return plural.slice(0, -3) + 'y';
+        }
+        if (plural.endsWith('es')) {
+            return plural.slice(0, -2);
+        }
+        if (plural.endsWith('s')) {
+            return plural.slice(0, -1);
+        }
+        return plural;
+    }
+    async loadItems() {
+        const currentQuery = this.query();
+        if (!currentQuery)
+            return;
+        try {
+            const sortDirection = this.settings.sortDirection === 'descending' ? 'desc' : 'asc';
+            const items = await this.sparkService.executeQuery(currentQuery.id, this.settings.sortProperty || undefined, this.settings.sortProperty ? sortDirection : undefined);
+            this.errorMessage.set(null);
+            this.allItems.set(items);
+            this.currentSortProperty = this.settings.sortProperty;
+            this.currentSortDirection = this.settings.sortDirection;
+            this.applyFilter();
+        }
+        catch (e) {
+            this.errorMessage.set(e.error?.error || e.message || 'An unexpected error occurred');
+            this.allItems.set([]);
+            this.applyFilter();
+        }
+    }
+    onSettingsChange() {
+        const sortChanged = this.settings.sortProperty !== this.currentSortProperty ||
+            this.settings.sortDirection !== this.currentSortDirection;
+        if (sortChanged) {
+            this.settings.page.selected = 1;
+            this.loadItems();
+        }
+        else {
+            this.applyFilter();
+        }
+    }
+    onSearchChange() {
+        this.settings.page.selected = 1;
+        this.applyFilter();
+    }
+    applyFilter() {
+        let filteredItems = this.allItems();
+        if (this.searchTerm.trim()) {
+            const term = this.searchTerm.toLowerCase().trim();
+            filteredItems = filteredItems.filter(item => {
+                if (item.name?.toLowerCase().includes(term))
+                    return true;
+                if (item.breadcrumb?.toLowerCase().includes(term))
+                    return true;
+                return item.attributes.some(attr => {
+                    const value = attr.breadcrumb || attr.value;
+                    if (value == null)
+                        return false;
+                    return String(value).toLowerCase().includes(term);
+                });
+            });
+        }
+        const totalPages = Math.ceil(filteredItems.length / this.settings.perPage.selected) || 1;
+        this.paginationData.set({
+            data: filteredItems,
+            totalRecords: filteredItems.length,
+            totalPages: totalPages,
+            perPage: this.settings.perPage.selected,
+            page: this.settings.page.selected
+        });
+        this.settings.page.values = Array.from({ length: totalPages }, (_, i) => i + 1);
+        if (this.settings.page.selected > totalPages) {
+            this.settings.page.selected = 1;
+        }
+    }
+    clearSearch() {
+        this.searchTerm = '';
+        this.onSearchChange();
+    }
+    visibleAttributes = computed(() => {
+        return this.entityType()?.attributes
+            .filter(a => a.isVisible && hasShowedOnFlag(a.showedOn, ShowedOn.Query))
+            .sort((a, b) => a.order - b.order) || [];
+    }, ...(ngDevMode ? [{ debugName: "visibleAttributes" }] : []));
+    getColumnTemplate(attr) {
+        if (!this.columnTemplates)
+            return null;
+        const byName = this.columnTemplates.find(t => t.name() === attr.name);
+        if (byName)
+            return byName.template;
+        const byType = this.columnTemplates.find(t => t.name() === attr.dataType);
+        if (byType)
+            return byType.template;
+        return null;
+    }
+    getColumnTemplateContext(item, attr) {
+        const itemAttr = item.attributes.find(a => a.name === attr.name);
+        return {
+            $implicit: item,
+            attr,
+            value: itemAttr?.value
+        };
+    }
+    async loadLookupReferenceOptions() {
+        const lookupAttrs = this.visibleAttributes().filter(a => a.lookupReferenceType);
+        if (lookupAttrs.length === 0)
+            return;
+        const lookupNames = [...new Set(lookupAttrs.map(a => a.lookupReferenceType))];
+        const entries = await Promise.all(lookupNames.map(async (name) => {
+            const result = await this.sparkService.getLookupReference(name);
+            return [name, result];
+        }));
+        this.lookupReferenceOptions.set(entries.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {}));
+    }
+    onRowClick(item) {
+        this.rowClicked.emit(item);
+        const et = this.entityType();
+        if (et) {
+            this.router.navigate(['/po', et.alias || et.id, item.id]);
+        }
+    }
+    onCreate() {
+        this.createClicked.emit();
+        const et = this.entityType();
+        if (et) {
+            this.router.navigate(['/po', et.alias || et.id, 'new']);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkQueryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SparkQueryListComponent, isStandalone: true, selector: "spark-query-list", inputs: { extraActionsTemplate: { classPropertyName: "extraActionsTemplate", publicName: "extraActionsTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClicked: "rowClicked", createClicked: "createClicked" }, queries: [{ propertyName: "columnTemplates", predicate: SparkColumnTemplateDirective }], ngImport: i0, template: "<bs-container>\n<div class=\"container-fluid\">\n  <div class=\"d-flex justify-content-between align-items-center mb-4\">\n    <h2>{{ (query()?.description | resolveTranslation) || query()?.name || ('loading' | t) }}</h2>\n    <div class=\"d-flex gap-2\">\n      @if (extraActionsTemplate(); as extraActionsTpl) {\n        <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n      }\n      @if (canCreate()) {\n        <button class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'new' | t }}\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (entityType()) {\n    <!-- Search box -->\n    <bs-form>\n      <bs-grid>\n        <div bsRow class=\"mb-3\">\n          <div [md]=\"4\">\n            <bs-input-group>\n              <span class=\"input-group-text\">\n                <spark-icon name=\"search\" />\n              </span>\n              <input\n                type=\"text\"\n                [placeholder]=\"'search' | t\"\n                [(ngModel)]=\"searchTerm\"\n                (ngModelChange)=\"onSearchChange()\">\n              @if (searchTerm) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"clearSearch()\">\n                  <spark-icon name=\"x-lg\" />\n                </button>\n              }\n            </bs-input-group>\n          </div>\n          <div [md]=\"8\" class=\"text-end\">\n            @if (searchTerm && paginationData()) {\n              <span class=\"text-muted\">\n                {{ paginationData()!.totalRecords }} {{ paginationData()!.totalRecords === 1 ? ('resultFound' | t) : ('resultsFound' | t) }}\n              </span>\n            }\n          </div>\n        </div>\n      </bs-grid>\n    </bs-form>\n\n    @if (errorMessage(); as err) {\n      <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n        {{ err }}\n      </bs-alert>\n    }\n\n    <bs-datatable [(settings)]=\"settings\" (settingsChange)=\"onSettingsChange()\">\n      @for (attr of visibleAttributes(); track attr.id) {\n        <div *bsDatatableColumn=\"attr.name; sortable: true\">\n          {{ (attr.label | resolveTranslation) || attr.name }}\n        </div>\n      }\n\n      <tr *bsRowTemplate=\"let item of paginationData()\" (click)=\"onRowClick(item)\" style=\"cursor: pointer;\">\n        @for (attr of visibleAttributes(); track attr.id) {\n          <td>\n            @if (getColumnTemplate(attr); as customTpl) {\n              <ng-container *ngTemplateOutlet=\"customTpl; context: getColumnTemplateContext(item, attr)\"></ng-container>\n            } @else if (attr.dataType === 'boolean') {\n              <input type=\"checkbox\"\n                [checked]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                [indeterminate]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                disabled\n                onclick=\"return false;\">\n            } @else if (attr.dataType === 'color') {\n              @let colorVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n              @if (colorVal) {\n                <span class=\"d-inline-block align-middle border rounded\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n              }\n            } @else {\n              {{ (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) }}\n            }\n          </td>\n        }\n      </tr>\n    </bs-datatable>\n  } @else {\n    <div class=\"text-center p-5\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{ 'loading' | t }}</span>\n      </div>\n    </div>\n  }\n</div>\n</bs-container>\n", styles: ["tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: BsAlertComponent, selector: "bs-alert", inputs: ["type", "isVisible"], outputs: ["isVisibleChange", "afterOpenedOrClosed"] }, { kind: "component", type: BsContainerComponent, selector: "bs-container" }, { kind: "component", type: BsDatatableComponent, selector: "bs-datatable", inputs: ["settings", "data"], outputs: ["settingsChange", "dataChange"] }, { kind: "directive", type: BsDatatableColumnDirective, selector: "[bsDatatableColumn]", inputs: ["bsDatatableColumn", "bsDatatableColumnSortable"] }, { kind: "directive", type: BsRowTemplateDirective, selector: "[bsRowTemplate]", inputs: ["bsRowTemplateOf"] }, { kind: "component", type: BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColumnDirective, selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]", inputs: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: BsInputGroupComponent, selector: "bs-input-group" }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }, { kind: "pipe", type: AttributeValuePipe, name: "attributeValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkQueryListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spark-query-list', imports: [CommonModule, NgTemplateOutlet, FormsModule, RouterModule, BsAlertComponent, BsContainerComponent, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsFormComponent, BsFormControlDirective, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsInputGroupComponent, SparkIconComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-container>\n<div class=\"container-fluid\">\n  <div class=\"d-flex justify-content-between align-items-center mb-4\">\n    <h2>{{ (query()?.description | resolveTranslation) || query()?.name || ('loading' | t) }}</h2>\n    <div class=\"d-flex gap-2\">\n      @if (extraActionsTemplate(); as extraActionsTpl) {\n        <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n      }\n      @if (canCreate()) {\n        <button class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'new' | t }}\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (entityType()) {\n    <!-- Search box -->\n    <bs-form>\n      <bs-grid>\n        <div bsRow class=\"mb-3\">\n          <div [md]=\"4\">\n            <bs-input-group>\n              <span class=\"input-group-text\">\n                <spark-icon name=\"search\" />\n              </span>\n              <input\n                type=\"text\"\n                [placeholder]=\"'search' | t\"\n                [(ngModel)]=\"searchTerm\"\n                (ngModelChange)=\"onSearchChange()\">\n              @if (searchTerm) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"clearSearch()\">\n                  <spark-icon name=\"x-lg\" />\n                </button>\n              }\n            </bs-input-group>\n          </div>\n          <div [md]=\"8\" class=\"text-end\">\n            @if (searchTerm && paginationData()) {\n              <span class=\"text-muted\">\n                {{ paginationData()!.totalRecords }} {{ paginationData()!.totalRecords === 1 ? ('resultFound' | t) : ('resultsFound' | t) }}\n              </span>\n            }\n          </div>\n        </div>\n      </bs-grid>\n    </bs-form>\n\n    @if (errorMessage(); as err) {\n      <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n        {{ err }}\n      </bs-alert>\n    }\n\n    <bs-datatable [(settings)]=\"settings\" (settingsChange)=\"onSettingsChange()\">\n      @for (attr of visibleAttributes(); track attr.id) {\n        <div *bsDatatableColumn=\"attr.name; sortable: true\">\n          {{ (attr.label | resolveTranslation) || attr.name }}\n        </div>\n      }\n\n      <tr *bsRowTemplate=\"let item of paginationData()\" (click)=\"onRowClick(item)\" style=\"cursor: pointer;\">\n        @for (attr of visibleAttributes(); track attr.id) {\n          <td>\n            @if (getColumnTemplate(attr); as customTpl) {\n              <ng-container *ngTemplateOutlet=\"customTpl; context: getColumnTemplateContext(item, attr)\"></ng-container>\n            } @else if (attr.dataType === 'boolean') {\n              <input type=\"checkbox\"\n                [checked]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                [indeterminate]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                disabled\n                onclick=\"return false;\">\n            } @else if (attr.dataType === 'color') {\n              @let colorVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n              @if (colorVal) {\n                <span class=\"d-inline-block align-middle border rounded\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n              }\n            } @else {\n              {{ (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) }}\n            }\n          </td>\n        }\n      </tr>\n    </bs-datatable>\n  } @else {\n    <div class=\"text-center p-5\">\n      <div class=\"spinner-border\" role=\"status\">\n        <span class=\"visually-hidden\">{{ 'loading' | t }}</span>\n      </div>\n    </div>\n  }\n</div>\n</bs-container>\n", styles: ["tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columnTemplates: [{
+                type: ContentChildren,
+                args: [SparkColumnTemplateDirective]
+            }], extraActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraActionsTemplate", required: false }] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], createClicked: [{ type: i0.Output, args: ["createClicked"] }] } });
+
+var sparkQueryList_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SparkQueryListComponent: SparkQueryListComponent
+});
+
+class SparkRetryActionModalComponent {
+    retryActionService = inject(RetryActionService);
+    colors = Color;
+    isOpen = computed(() => this.retryActionService.payload() !== null, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    onOption(option) {
+        const payload = this.retryActionService.payload();
+        if (!payload)
+            return;
+        this.retryActionService.respond({
+            step: payload.step,
+            option,
+            persistentObject: payload.persistentObject
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkRetryActionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SparkRetryActionModalComponent, isStandalone: true, selector: "spark-retry-action-modal", ngImport: i0, template: `
+    <bs-modal [isOpen]="isOpen()" (isOpenChange)="!$event && onOption('Cancel')">
+      <div *bsModal>
+        <div bsModalHeader>
+          <h5 class="modal-title">{{ retryActionService.payload()?.title }}</h5>
+        </div>
+        @if (retryActionService.payload()?.message; as message) {
+          <div bsModalBody>
+            <p>{{ message }}</p>
+          </div>
+        }
+        <div bsModalFooter>
+          @for (option of retryActionService.payload()?.options; track option) {
+            <button
+              type="button"
+              [color]="option === 'Cancel' ? colors.secondary : colors.primary"
+              (click)="onOption(option)">
+              {{ option }}
+            </button>
+          }
+        </div>
+      </div>
+    </bs-modal>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BsModalHostComponent, selector: "bs-modal", inputs: ["isOpen", "closeOnEscape"], 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: "directive", type: BsButtonTypeDirective, selector: "button[color],input[type=\"button\"][color],input[type=\"submit\"][color],a[color]", inputs: ["color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SparkRetryActionModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'spark-retry-action-modal',
+                    imports: [CommonModule, BsModalHostComponent, BsModalDirective, BsModalHeaderDirective, BsModalBodyDirective, BsModalFooterDirective, BsButtonTypeDirective],
+                    template: `
+    <bs-modal [isOpen]="isOpen()" (isOpenChange)="!$event && onOption('Cancel')">
+      <div *bsModal>
+        <div bsModalHeader>
+          <h5 class="modal-title">{{ retryActionService.payload()?.title }}</h5>
+        </div>
+        @if (retryActionService.payload()?.message; as message) {
+          <div bsModalBody>
+            <p>{{ message }}</p>
+          </div>
+        }
+        <div bsModalFooter>
+          @for (option of retryActionService.payload()?.options; track option) {
+            <button
+              type="button"
+              [color]="option === 'Cancel' ? colors.secondary : colors.primary"
+              (click)="onOption(option)">
+              {{ option }}
+            </button>
+          }
+        </div>
+      </div>
+    </bs-modal>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class RouterLinkPipe {
+    transform(unit) {
+        if (unit.type === 'query') {
+            return ['/query', unit.alias || unit.queryId];
+        }
+        else if (unit.type === 'persistentObject') {
+            return ['/po', unit.alias || unit.persistentObjectId];
+        }
+        return ['/'];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RouterLinkPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: RouterLinkPipe, isStandalone: true, name: "routerLink" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RouterLinkPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'routerLink', standalone: true, pure: true }]
+        }] });
+
+class IconNamePipe {
+    transform(value, fallback) {
+        const iconClass = value || fallback;
+        // Strip 'bi-' prefix if present
+        return iconClass.startsWith('bi-') ? iconClass.substring(3) : iconClass;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: IconNamePipe, isStandalone: true, name: "iconName" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconNamePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'iconName', standalone: true, pure: true }]
+        }] });
+
+function sparkRoutes(config) {
+    return [
+        {
+            path: 'query/:queryId',
+            loadComponent: config?.queryList ?? (() => Promise.resolve().then(function () { return sparkQueryList_component; }).then(m => m.SparkQueryListComponent))
+        },
+        {
+            path: 'po/:type/new',
+            loadComponent: config?.poCreate ?? (() => Promise.resolve().then(function () { return sparkPoCreate_component; }).then(m => m.SparkPoCreateComponent))
+        },
+        {
+            path: 'po/:type/:id/edit',
+            loadComponent: config?.poEdit ?? (() => Promise.resolve().then(function () { return sparkPoEdit_component; }).then(m => m.SparkPoEditComponent))
+        },
+        {
+            path: 'po/:type/:id',
+            loadComponent: config?.poDetail ?? (() => Promise.resolve().then(function () { return sparkPoDetail_component; }).then(m => m.SparkPoDetailComponent))
+        },
+        {
+            path: 'po/:type',
+            loadComponent: config?.queryList ?? (() => Promise.resolve().then(function () { return sparkQueryList_component; }).then(m => m.SparkQueryListComponent))
+        }
+    ];
+}
+
+function provideSpark(config) {
+    return [
+        {
+            provide: SPARK_CONFIG,
+            useValue: { ...defaultSparkConfig, ...config }
+        }
+    ];
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ArrayValuePipe, AsDetailCellValuePipe, AsDetailColumnsPipe, AsDetailDisplayValuePipe, AsDetailTypePipe, AttributeValuePipe, CanCreateDetailRowPipe, CanDeleteDetailRowPipe, ELookupDisplayType, ErrorForAttributePipe, IconNamePipe, InlineRefOptionsPipe, InputTypePipe, LookupDisplayTypePipe, LookupDisplayValuePipe, LookupOptionsPipe, RawAttributeValuePipe, ReferenceAttrValuePipe, ReferenceDisplayValuePipe, ReferenceLinkRoutePipe, ResolveTranslationPipe, RetryActionService, RouterLinkPipe, SPARK_CONFIG, ShowedOn, SparkColumnTemplateDirective, SparkDetailFieldTemplateDirective, SparkFieldTemplateDirective, SparkIconComponent, SparkIconRegistry, SparkLanguageService, SparkPoCreateComponent, SparkPoDetailComponent, SparkPoEditComponent, SparkPoFormComponent, SparkQueryListComponent, SparkRetryActionModalComponent, SparkService, TranslateKeyPipe, defaultSparkConfig, hasShowedOnFlag, provideSpark, resolveTranslation, sparkRoutes };
+//# sourceMappingURL=mintplayer-ng-spark.mjs.map