@mintplayer/ng-spark 0.1.2 → 0.3.0

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

@@ -0,0 +1,393 @@
+import * as i0 from '@angular/core';
+import { inject, input, model, output, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Color } from '@mintplayer/ng-bootstrap';
+import { BsCardComponent, BsCardHeaderComponent } from '@mintplayer/ng-bootstrap/card';
+import { BsFormComponent, BsFormControlDirective } from '@mintplayer/ng-bootstrap/form';
+import { BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsGridColDirective, BsColFormLabelDirective } from '@mintplayer/ng-bootstrap/grid';
+import { BsInputGroupComponent } from '@mintplayer/ng-bootstrap/input-group';
+import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
+import { BsSelectComponent, BsSelectOption } from '@mintplayer/ng-bootstrap/select';
+import { 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 { BsSpinnerComponent } from '@mintplayer/ng-bootstrap/spinner';
+import { BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective } from '@mintplayer/ng-bootstrap/tab-control';
+import { BsTableComponent } from '@mintplayer/ng-bootstrap/table';
+import { SparkService, SparkLanguageService } from '@mintplayer/ng-spark/services';
+import { TranslateKeyPipe, ResolveTranslationPipe, InputTypePipe, LookupDisplayValuePipe, LookupDisplayTypePipe, LookupOptionsPipe, ReferenceDisplayValuePipe, AsDetailDisplayValuePipe, AsDetailTypePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, CanCreateDetailRowPipe, CanDeleteDetailRowPipe, InlineRefOptionsPipe, ReferenceAttrValuePipe, ErrorForAttributePipe } from '@mintplayer/ng-spark/pipes';
+import { ELookupDisplayType, hasShowedOnFlag, ShowedOn, resolveTranslation } from '@mintplayer/ng-spark/models';
+import { SparkIconComponent } from '@mintplayer/ng-spark/icon';
+import { SPARK_ATTRIBUTE_RENDERERS } from '@mintplayer/ng-spark/renderers';
+
+class SparkPoFormComponent {
+    sparkService = inject(SparkService);
+    translations = inject(SparkLanguageService);
+    rendererRegistry = inject(SPARK_ATTRIBUTE_RENDERERS);
+    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" }] : []));
+    parentId = input(undefined, ...(ngDevMode ? [{ debugName: "parentId" }] : []));
+    parentType = input(undefined, ...(ngDevMode ? [{ debugName: "parentType" }] : []));
+    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 = signal(new DatatableSettings({
+        perPage: { values: [10, 25, 50], selected: 10 },
+        page: { values: [1], selected: 1 },
+        sortColumns: []
+    }), ...(ngDevMode ? [{ debugName: "referenceModalSettings" }] : []));
+    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" }] : []));
+    static DEFAULT_TAB = { id: '__default__', name: 'Algemeen', label: { nl: 'Algemeen', en: 'General' }, order: 0 };
+    ungroupedAttributes = computed(() => {
+        const attrs = this.editableAttributes();
+        const groupIds = new Set((this.entityType()?.groups || []).map(g => g.id));
+        return attrs.filter(a => !a.group || !groupIds.has(a.group));
+    }, ...(ngDevMode ? [{ debugName: "ungroupedAttributes" }] : []));
+    resolvedTabs = computed(() => {
+        const et = this.entityType();
+        const definedTabs = et?.tabs?.length ? [...et.tabs].sort((a, b) => a.order - b.order) : [];
+        const hasUngroupedAttrs = this.ungroupedAttributes().length > 0;
+        const hasUntabbedGroups = (et?.groups || []).some(g => !g.tab);
+        if (hasUngroupedAttrs || hasUntabbedGroups || definedTabs.length === 0) {
+            return [SparkPoFormComponent.DEFAULT_TAB, ...definedTabs];
+        }
+        return definedTabs;
+    }, ...(ngDevMode ? [{ debugName: "resolvedTabs" }] : []));
+    groupsForTab(tab) {
+        const groups = this.entityType()?.groups || [];
+        if (tab.id === '__default__') {
+            return groups.filter(g => !g.tab).sort((a, b) => a.order - b.order);
+        }
+        return groups.filter(g => g.tab === tab.id).sort((a, b) => a.order - b.order);
+    }
+    attrsForGroup(group) {
+        return this.editableAttributes().filter(a => a.group === group.id);
+    }
+    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" }] : []));
+    constructor() {
+        effect(() => {
+            const et = this.entityType();
+            const _pid = this.parentId();
+            const _ptype = this.parentType();
+            if (et) {
+                this.loadReferenceOptions();
+                this.loadAsDetailTypes();
+                this.loadLookupReferenceOptions();
+            }
+        });
+    }
+    toRecord(entries) {
+        const result = {};
+        for (const [key, value] of entries) {
+            result[key] = value;
+        }
+        return result;
+    }
+    async loadReferenceOptions() {
+        const refAttrs = this.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 result = await this.sparkService.executeQueryByName(attr.query, {
+                parentId: this.parentId(),
+                parentType: this.parentType(),
+            });
+            return [attr.name, result.data];
+        }));
+        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 result = await this.sparkService.executeQueryByName(col.query, {
+                                parentId: this.parentId(),
+                                parentType: this.parentType(),
+                            });
+                            return [col.name, result.data];
+                        }));
+                        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('');
+    }
+    getEditRendererComponent(attr) {
+        if (!attr.renderer)
+            return null;
+        const reg = this.rendererRegistry.find(r => r.name === attr.renderer);
+        return reg?.editComponent ?? null;
+    }
+    getEditRendererInputs(attr) {
+        return {
+            value: this.formData()[attr.name],
+            attribute: attr,
+            options: attr.rendererOptions,
+            valueChange: (newValue) => {
+                const data = { ...this.formData() };
+                data[attr.name] = newValue;
+                this.formData.set(data);
+            },
+        };
+    }
+    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.set(new DatatableSettings({
+            perPage: { values: [10, 25, 50], selected: 10 },
+            page: { values: [1], selected: 1 },
+            sortColumns: []
+        }));
+        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.1.6", ngImport: i0, type: SparkPoFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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 }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formData: "formDataChange", save: "save", cancel: "cancel" }, ngImport: i0, template: "<bs-form>\n  @if (entityType()) {\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"tabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n    <ng-template #tabContent let-tab>\n      @if (tab.id === '__default__') {\n        @if (ungroupedAttributes().length > 0) {\n          <bs-card class=\"d-block m-3\">\n            <div class=\"p-3\">\n              @for (attr of ungroupedAttributes(); track attr.id) {\n                <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n              }\n            </div>\n          </bs-card>\n        }\n      }\n      @for (group of groupsForTab(tab); track group.id) {\n        @if (attrsForGroup(group); as groupAttrs) {\n          @if (groupAttrs.length > 0) {\n            <bs-card class=\"d-block m-3\">\n              @if (group.label) {\n                <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n              }\n              <div class=\"p-3\">\n                @for (attr of groupAttrs; track attr.id) {\n                  <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n                }\n              </div>\n            </bs-card>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-template #attrField let-attr>\n      <div bsRow class=\"mb-3\">\n        <label [md]=\"4\" bsColFormLabel [for]=\"attr.name\">\n          {{ attr.label | resolveTranslation:attr.name }}\n          @if (attr.isRequired) {\n            <span class=\"text-danger\">*</span>\n          }\n        </label>\n        <div [md]=\"8\">\n          @if (attr.dataType === 'boolean') {\n            <bs-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\">{{ 'common.selectPlaceholder' | t }}</option>\n                @for (option of (attr | lookupOptions:lookupReferenceOptions()); track option.key) {\n                  <option [ngValue]=\"option.key\">\n                    {{ option.values | resolveTranslation:option.key }}\n                  </option>\n                }\n              </bs-select>\n            }\n          } @else if (attr.dataType === 'Reference') {\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 class=\"align-middle\">\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\">{{ 'common.selectPlaceholder' | t }}</option>\n                            @for (option of (attr | inlineRefOptions:col:asDetailReferenceOptions()); track option.id) {\n                              <option [ngValue]=\"option.id\">\n                                {{ option.breadcrumb || option.name || option.id }}\n                              </option>\n                            }\n                          </bs-select>\n                        } @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                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addInlineRow(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\n                  @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                    <th>{{ col.label | resolveTranslation:col.name }}</th>\n                  }\n                  <th style=\"width: 80px\"></th>\n                </tr>\n              </thead>\n              <tbody class=\"align-middle\">\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                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addArrayItem(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail') {\n            <bs-input-group>\n              <input\n                type=\"text\"\n                [id]=\"attr.name\"\n                [value]=\"attr | asDetailDisplayValue:formData():asDetailTypes()\"\n                readonly\n                [class.is-invalid]=\"hasError(attr.name)\">\n              <button\n                type=\"button\"\n                bsInputGroupBtn\n                [color]=\"colors.secondary\"\n                (click)=\"openAsDetailEditor(attr)\">\n                <spark-icon name=\"pencil\" />\n              </button>\n            </bs-input-group>\n          } @else if (getEditRendererComponent(attr); as editComp) {\n            <ng-container *ngComponentOutlet=\"editComp; inputs: getEditRendererInputs(attr)\"></ng-container>\n          } @else {\n            <input\n              [type]=\"attr.dataType | inputType\"\n              [id]=\"attr.name\"\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange()\"\n              [name]=\"attr.name\"\n              [required]=\"attr.isRequired\"\n              [step]=\"attr.dataType === 'decimal' ? '0.01' : '1'\"\n              [class.is-invalid]=\"hasError(attr.name)\">\n          }\n          @if (attr.name | errorForAttribute:validationErrors(); as errorMsg) {\n            <div class=\"invalid-feedback d-block\">\n              {{ errorMsg }}\n            </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n\n    @if (showButtons()) {\n      <div bsRow class=\"mt-4\">\n        <div [md]=\"4\"></div>\n        <div [md]=\"8\" class=\"d-flex justify-content-end gap-2\">\n          <button type=\"button\" [color]=\"colors.secondary\" (click)=\"onCancel()\" [disabled]=\"isSaving()\">{{ 'common.cancel' | t }}</button>\n          <button type=\"submit\" [color]=\"colors.primary\" [disabled]=\"isSaving()\" (click)=\"onSave()\">\n            @if (isSaving()) {\n              <bs-spinner class=\"me-1\" />\n            }\n            {{ 'common.save' | t }}\n          </button>\n        </div>\n      </div>\n    }\n  </bs-grid>\n}\n\n<!-- Modal for editing AsDetail objects -->\n<bs-modal [isOpen]=\"showAsDetailModal()\" (isOpenChange)=\"!$event && closeAsDetailModal()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.edit' | t }} {{ editingAsDetailAttr()?.label | resolveTranslation:editingAsDetailAttr()?.name }}</h5>\n    </div>\n\n    @if (editingAsDetailAttr(); as attr) {\n      <div bsModalBody>\n        <spark-po-form\n          [entityType]=\"attr | asDetailType:asDetailTypes()\"\n          [(formData)]=\"asDetailFormData\"\n          [parentId]=\"parentId()\"\n          [parentType]=\"parentType()\">\n        </spark-po-form>\n      </div>\n    }\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeAsDetailModal()\">{{ 'common.cancel' | t }}</button>\n      <button type=\"button\" [color]=\"colors.primary\" (click)=\"saveAsDetailObject()\">{{ 'common.save' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n\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\">{{ 'common.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]=\"'common.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 ? ('common.resultFound' | t) : ('common.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          <bs-spinner />\n        </div>\n      }\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeReferenceModal()\">{{ 'common.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\">{{ 'common.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]=\"'common.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 class=\"align-middle\">\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\">{{ 'common.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()\">{{ 'common.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", "parentId", "parentType"], outputs: ["formDataChange", "save", "cancel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: 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: BsCardComponent, selector: "bs-card", inputs: ["rounded"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["noPadding"] }, { 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: ["data"], outputs: ["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: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: BsTabControlComponent, selector: "bs-tab-control", inputs: ["border", "restrictDragging", "selectFirstTab", "tabsPosition", "allowDragDrop"] }, { kind: "component", type: BsTabPageComponent, selector: "bs-tab-page", inputs: ["disabled"] }, { kind: "directive", type: BsTabPageHeaderDirective, selector: "[bsTabPageHeader]" }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "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.1.6", ngImport: i0, type: SparkPoFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spark-po-form', imports: [CommonModule, NgTemplateOutlet, NgComponentOutlet, FormsModule, BsCardComponent, BsCardHeaderComponent, BsFormComponent, BsFormControlDirective, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsGridColDirective, BsColFormLabelDirective, BsButtonTypeDirective, BsInputGroupComponent, BsSelectComponent, BsSelectOption, BsModalHostComponent, BsModalDirective, BsModalHeaderDirective, BsModalBodyDirective, BsModalFooterDirective, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsTableComponent, BsToggleButtonComponent, BsSpinnerComponent, BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective, 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      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"tabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n    <ng-template #tabContent let-tab>\n      @if (tab.id === '__default__') {\n        @if (ungroupedAttributes().length > 0) {\n          <bs-card class=\"d-block m-3\">\n            <div class=\"p-3\">\n              @for (attr of ungroupedAttributes(); track attr.id) {\n                <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n              }\n            </div>\n          </bs-card>\n        }\n      }\n      @for (group of groupsForTab(tab); track group.id) {\n        @if (attrsForGroup(group); as groupAttrs) {\n          @if (groupAttrs.length > 0) {\n            <bs-card class=\"d-block m-3\">\n              @if (group.label) {\n                <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n              }\n              <div class=\"p-3\">\n                @for (attr of groupAttrs; track attr.id) {\n                  <ng-container *ngTemplateOutlet=\"attrField; context: { $implicit: attr }\"></ng-container>\n                }\n              </div>\n            </bs-card>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-template #attrField let-attr>\n      <div bsRow class=\"mb-3\">\n        <label [md]=\"4\" bsColFormLabel [for]=\"attr.name\">\n          {{ attr.label | resolveTranslation:attr.name }}\n          @if (attr.isRequired) {\n            <span class=\"text-danger\">*</span>\n          }\n        </label>\n        <div [md]=\"8\">\n          @if (attr.dataType === 'boolean') {\n            <bs-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\">{{ 'common.selectPlaceholder' | t }}</option>\n                @for (option of (attr | lookupOptions:lookupReferenceOptions()); track option.key) {\n                  <option [ngValue]=\"option.key\">\n                    {{ option.values | resolveTranslation:option.key }}\n                  </option>\n                }\n              </bs-select>\n            }\n          } @else if (attr.dataType === 'Reference') {\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 class=\"align-middle\">\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\">{{ 'common.selectPlaceholder' | t }}</option>\n                            @for (option of (attr | inlineRefOptions:col:asDetailReferenceOptions()); track option.id) {\n                              <option [ngValue]=\"option.id\">\n                                {{ option.breadcrumb || option.name || option.id }}\n                              </option>\n                            }\n                          </bs-select>\n                        } @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                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addInlineRow(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n            <bs-table [isResponsive]=\"true\" class=\"mb-1\">\n              <thead>\n                <tr>\n                  @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                    <th>{{ col.label | resolveTranslation:col.name }}</th>\n                  }\n                  <th style=\"width: 80px\"></th>\n                </tr>\n              </thead>\n              <tbody class=\"align-middle\">\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                      {{ 'common.noItemsFound' | t }}\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </bs-table>\n            @if (attr | canCreateDetailRow:asDetailPermissions()) {\n              <button type=\"button\" [color]=\"colors.primary\" class=\"w-100 rounded-0\" (click)=\"addArrayItem(attr)\">\n                <spark-icon name=\"plus\" /> {{ 'common.add' | t }}\n              </button>\n            }\n          } @else if (attr.dataType === 'AsDetail') {\n            <bs-input-group>\n              <input\n                type=\"text\"\n                [id]=\"attr.name\"\n                [value]=\"attr | asDetailDisplayValue:formData():asDetailTypes()\"\n                readonly\n                [class.is-invalid]=\"hasError(attr.name)\">\n              <button\n                type=\"button\"\n                bsInputGroupBtn\n                [color]=\"colors.secondary\"\n                (click)=\"openAsDetailEditor(attr)\">\n                <spark-icon name=\"pencil\" />\n              </button>\n            </bs-input-group>\n          } @else if (getEditRendererComponent(attr); as editComp) {\n            <ng-container *ngComponentOutlet=\"editComp; inputs: getEditRendererInputs(attr)\"></ng-container>\n          } @else {\n            <input\n              [type]=\"attr.dataType | inputType\"\n              [id]=\"attr.name\"\n              [ngModel]=\"formData()[attr.name]\"\n              (ngModelChange)=\"formData()[attr.name] = $event; onFieldChange()\"\n              [name]=\"attr.name\"\n              [required]=\"attr.isRequired\"\n              [step]=\"attr.dataType === 'decimal' ? '0.01' : '1'\"\n              [class.is-invalid]=\"hasError(attr.name)\">\n          }\n          @if (attr.name | errorForAttribute:validationErrors(); as errorMsg) {\n            <div class=\"invalid-feedback d-block\">\n              {{ errorMsg }}\n            </div>\n          }\n        </div>\n      </div>\n    </ng-template>\n\n    @if (showButtons()) {\n      <div bsRow class=\"mt-4\">\n        <div [md]=\"4\"></div>\n        <div [md]=\"8\" class=\"d-flex justify-content-end gap-2\">\n          <button type=\"button\" [color]=\"colors.secondary\" (click)=\"onCancel()\" [disabled]=\"isSaving()\">{{ 'common.cancel' | t }}</button>\n          <button type=\"submit\" [color]=\"colors.primary\" [disabled]=\"isSaving()\" (click)=\"onSave()\">\n            @if (isSaving()) {\n              <bs-spinner class=\"me-1\" />\n            }\n            {{ 'common.save' | t }}\n          </button>\n        </div>\n      </div>\n    }\n  </bs-grid>\n}\n\n<!-- Modal for editing AsDetail objects -->\n<bs-modal [isOpen]=\"showAsDetailModal()\" (isOpenChange)=\"!$event && closeAsDetailModal()\">\n  <div *bsModal>\n    <div bsModalHeader>\n      <h5 class=\"modal-title\">{{ 'common.edit' | t }} {{ editingAsDetailAttr()?.label | resolveTranslation:editingAsDetailAttr()?.name }}</h5>\n    </div>\n\n    @if (editingAsDetailAttr(); as attr) {\n      <div bsModalBody>\n        <spark-po-form\n          [entityType]=\"attr | asDetailType:asDetailTypes()\"\n          [(formData)]=\"asDetailFormData\"\n          [parentId]=\"parentId()\"\n          [parentType]=\"parentType()\">\n        </spark-po-form>\n      </div>\n    }\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeAsDetailModal()\">{{ 'common.cancel' | t }}</button>\n      <button type=\"button\" [color]=\"colors.primary\" (click)=\"saveAsDetailObject()\">{{ 'common.save' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n\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\">{{ 'common.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]=\"'common.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 ? ('common.resultFound' | t) : ('common.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          <bs-spinner />\n        </div>\n      }\n    </div>\n\n    <div bsModalFooter>\n      <button type=\"button\" [color]=\"colors.secondary\" (click)=\"closeReferenceModal()\">{{ 'common.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\">{{ 'common.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]=\"'common.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 class=\"align-middle\">\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\">{{ 'common.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()\">{{ 'common.cancel' | t }}</button>\n    </div>\n  </div>\n</bs-modal>\n</bs-form>\n" }]
+        }], ctorParameters: () => [], propDecorators: { entityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityType", required: false }] }], formData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formData", required: false }] }, { type: i0.Output, args: ["formDataChange"] }], validationErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationErrors", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], isSaving: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSaving", required: false }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: false }] }], parentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentType", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SparkPoFormComponent };
+//# sourceMappingURL=mintplayer-ng-spark-po-form.mjs.map