@honuware/ui 0.1.0

package/fesm2022/honuware-ui-crud.mjs

@@ -0,0 +1,1101 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, Inject, Injectable, InjectionToken, Input, Component, ViewChild, ViewChildren } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, timer, of, from, Subject, combineLatest, takeUntil } from 'rxjs';
+import { map, distinctUntilChanged, tap, catchError, filter, take, concatMap } from 'rxjs/operators';
+import * as i2 from '@honuware/ui/access';
+import { HONUWARE_CRUD_ACCESS } from '@honuware/ui/access';
+import * as i1 from '@honuware/ui/auth';
+import * as i5 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i6 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i8 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i4 from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
+import * as i9 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { isMicrosecondTimestamp, formatMicroseconds, ConfirmDialogComponent } from '@honuware/ui/foundation';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i4$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { CompositeControlComponent } from '@honuware/ui/controls';
+import { PhotoUploadComponent } from '@honuware/ui/photos';
+import * as i3 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+
+class DatabaseSchemaService {
+    crudAccess;
+    authService;
+    _schema;
+    _schemaSubject = new BehaviorSubject(undefined);
+    _refreshSub;
+    _fetchInProgress = false;
+    _retryTimeoutMs = 6000; // configurable timeout
+    destroyRef = inject(DestroyRef);
+    schema$ = this._schemaSubject.asObservable();
+    constructor(crudAccess, authService) {
+        this.crudAccess = crudAccess;
+        this.authService = authService;
+        this.startSchemaPolling();
+        this.authService.authData$.pipe(map(authData => authData.isAuth), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.refreshSchema();
+        });
+    }
+    startSchemaPolling() {
+        this.tryFetchSchema();
+    }
+    refreshSchema() {
+        this._schema = undefined;
+        this._schemaSubject.next(undefined);
+        this.tryFetchSchema();
+    }
+    tryFetchSchema() {
+        if (this._fetchInProgress)
+            return;
+        this._refreshSub?.unsubscribe();
+        this._fetchInProgress = true;
+        this._refreshSub = this.crudAccess.getDbSchema().pipe(tap(schema => {
+            this._schema = schema;
+            this._schemaSubject.next(schema);
+            this._fetchInProgress = false;
+            this._refreshSub?.unsubscribe(); // Stop further polling
+            this._refreshSub = undefined;
+        }), catchError(() => {
+            this._fetchInProgress = false;
+            // Schedule retry after timeout
+            this._refreshSub = timer(this._retryTimeoutMs).subscribe(() => this.tryFetchSchema());
+            return of(undefined);
+        })).subscribe();
+    }
+    /**
+     * Returns the cached DatabaseSchema if present, otherwise waits for a successful fetch.
+     */
+    GetDBSchema() {
+        if (this._schema) {
+            return of(this._schema);
+        }
+        // Wait for the schema to be available
+        return this.schema$.pipe(filter((schema) => !!schema), take(1));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatabaseSchemaService, deps: [{ token: HONUWARE_CRUD_ACCESS }, { token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatabaseSchemaService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatabaseSchemaService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HONUWARE_CRUD_ACCESS]
+                }] }, { type: i1.AuthService }] });
+
+/**
+ * Serialize a binding stack to a ctx query param string.
+ * Format: "table:pkColumn:pkValue,table:pkColumn:pkValue"
+ */
+function serializeBindingStack(stack) {
+    return stack.map(b => `${b.tableName}:${b.primaryKeyName}:${b.primaryKeyValue}`).join(',');
+}
+/**
+ * Deserialize a ctx query param string into a TableBinding array.
+ * Returns empty array for null/empty input.
+ */
+function parseBindingStack(ctx) {
+    if (!ctx)
+        return [];
+    return ctx.split(',').map(triple => {
+        const [tableName, primaryKeyName, primaryKeyValue] = triple.split(':');
+        return { tableName, primaryKeyName, primaryKeyValue };
+    });
+}
+/**
+ * Derive filter pairs from the binding stack for the current table.
+ * Looks at the current table's foreign keys and matches them against
+ * the binding stack to build WHERE clause filters.
+ *
+ * For example, if viewing purchases with ctx=people:person_id:42,
+ * and purchases has FK column payer_person_id -> people.person_id,
+ * this returns [{ column_name: 'payer_person_id', column_value: '42' }].
+ */
+function deriveFilterPairs(currentTableSchema, bindingStack) {
+    if (bindingStack.length === 0)
+        return [];
+    const filterPairs = [];
+    for (const fk of currentTableSchema.foreign_keys) {
+        const binding = bindingStack.find(b => b.tableName === fk.parent_table_name && b.primaryKeyName === fk.parent_column_name);
+        if (binding) {
+            filterPairs.push({
+                column_name: fk.column_name,
+                column_value: binding.primaryKeyValue,
+            });
+        }
+    }
+    return filterPairs;
+}
+
+const DEFAULT_CRUD_EDITOR_ROUTES = {
+    basePath: '/admin/tables',
+    adminHome: '/admin',
+};
+// Root-provided with the knottyyoga defaults, so nothing needs wiring today.
+const CRUD_EDITOR_ROUTES = new InjectionToken('CRUD_EDITOR_ROUTES', {
+    providedIn: 'root',
+    factory: () => DEFAULT_CRUD_EDITOR_ROUTES,
+});
+
+class TableViewControlComponent {
+    dbSchemaService;
+    crudAccess;
+    photoUrlBuilder;
+    editorRoutes;
+    router;
+    dialog;
+    tableName;
+    pageSize = 10;
+    pageOffset = 0;
+    sortColumn;
+    sortAscending = true;
+    bindingStack = [];
+    databaseSchema;
+    tableSchema;
+    columns = [];
+    displayedColumns = [];
+    dataSource = [];
+    totalCount = 0;
+    loading = true;
+    error;
+    childTableReferences = [];
+    /** Maps column_name → pk_value → display_text for FK columns. */
+    fkDisplayMap = {};
+    pageSizeOptions = [5, 10, 20, 30, 50, 100];
+    constructor(dbSchemaService, crudAccess, photoUrlBuilder, editorRoutes, router, dialog) {
+        this.dbSchemaService = dbSchemaService;
+        this.crudAccess = crudAccess;
+        this.photoUrlBuilder = photoUrlBuilder;
+        this.editorRoutes = editorRoutes;
+        this.router = router;
+        this.dialog = dialog;
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    ngOnChanges(changes) {
+        if (changes['tableName'] || changes['pageSize'] || changes['pageOffset'] ||
+            changes['sortColumn'] || changes['sortAscending'] || changes['bindingStack']) {
+            if (!changes['tableName']?.firstChange) {
+                this.loadData();
+            }
+        }
+    }
+    loadData() {
+        this.loading = true;
+        this.error = undefined;
+        this.dbSchemaService.GetDBSchema().subscribe({
+            next: (schema) => {
+                this.databaseSchema = schema;
+                this.tableSchema = schema.tables.find(t => t.table_name === this.tableName);
+                if (!this.tableSchema) {
+                    this.error = `Table "${this.tableName}" not found in schema`;
+                    this.loading = false;
+                    return;
+                }
+                this.columns = this.tableSchema.columns.filter(c => !this.isTrueValue(c.hidden));
+                // Display actions column first, then photo column if supported, then data columns
+                const photoColumn = this.hasPhotoSupport ? ['photo'] : [];
+                this.displayedColumns = ['actions'].concat(photoColumn, this.columns.map(c => c.column_name));
+                // Compute child table references
+                this.childTableReferences = this.getChildTableReferences(schema);
+                // Derive filter pairs from binding stack + FK info
+                const filterPairs = deriveFilterPairs(this.tableSchema, this.bindingStack);
+                // Use primary key as default sort column if not specified
+                const sortCol = this.sortColumn || this.tableSchema.primary_key;
+                this.crudAccess.getFilteredTableRows(this.tableName, sortCol, this.sortAscending, this.pageSize, this.pageOffset, filterPairs).subscribe({
+                    next: (result) => {
+                        this.totalCount = result.totalCount;
+                        // Convert dataTable array to array of objects
+                        this.dataSource = result.dataTable.map(row => {
+                            const obj = {};
+                            result.sortedColumnNames.forEach((colName, idx) => {
+                                obj[colName] = row[idx];
+                            });
+                            return obj;
+                        });
+                        this.resolveFkDisplayValues();
+                    },
+                    error: (err) => {
+                        this.error = 'Failed to load data';
+                        this.loading = false;
+                        console.error('Error loading table data:', err);
+                    }
+                });
+            },
+            error: (err) => {
+                this.error = 'Failed to load schema';
+                this.loading = false;
+                console.error('Error loading schema:', err);
+            }
+        });
+    }
+    getChildTableReferences(schema) {
+        const refs = [];
+        for (const nestedTableName of schema.nested_tables) {
+            const childSchema = schema.tables.find(t => t.table_name === nestedTableName);
+            if (!childSchema)
+                continue;
+            for (const fk of childSchema.foreign_keys) {
+                if (fk.parent_table_name === this.tableName) {
+                    refs.push({
+                        childTableName: nestedTableName,
+                        childTableFriendlyName: childSchema.table_friendly_name || nestedTableName,
+                        foreignKey: fk,
+                    });
+                }
+            }
+        }
+        return refs;
+    }
+    resolveFkDisplayValues() {
+        if (!this.tableSchema || this.tableSchema.foreign_keys.length === 0) {
+            this.loading = false;
+            return;
+        }
+        const fkEntries = [];
+        for (const fk of this.tableSchema.foreign_keys) {
+            const uniqueValues = [...new Set(this.dataSource
+                    .map(row => row[fk.column_name])
+                    .filter(v => !!v))];
+            if (uniqueValues.length === 0)
+                continue;
+            fkEntries.push({
+                colName: fk.column_name,
+                parentTable: fk.parent_table_name,
+                values: uniqueValues,
+            });
+        }
+        if (fkEntries.length === 0) {
+            this.loading = false;
+            return;
+        }
+        // Process sequentially to avoid concurrent transaction errors on the server
+        from(fkEntries).pipe(concatMap(entry => this.crudAccess.resolveFkDisplay(entry.parentTable, entry.values).pipe(tap(response => {
+            this.fkDisplayMap[entry.colName] = response.resolved;
+        })))).subscribe({
+            complete: () => {
+                this.loading = false;
+            },
+            error: (err) => {
+                console.error('FK display resolution failed:', err);
+                this.loading = false;
+            }
+        });
+    }
+    onNavigateToChild(ref, row) {
+        const primaryKeyValue = this.getPrimaryKeyValue(row);
+        if (!primaryKeyValue || !this.tableSchema)
+            return;
+        const newStack = [
+            ...this.bindingStack,
+            {
+                tableName: this.tableName,
+                primaryKeyName: this.tableSchema.primary_key,
+                primaryKeyValue,
+            }
+        ];
+        this.router.navigate([this.editorRoutes.basePath, ref.childTableName, 'view', this.pageSize, 0], { queryParams: { ctx: serializeBindingStack(newStack) } });
+    }
+    isTrueValue(value) {
+        return value === true || value === 't';
+    }
+    formatCellValue(column, value) {
+        if (!value)
+            return value;
+        // Check FK display map first
+        const fkResolved = this.fkDisplayMap[column.column_name];
+        if (fkResolved && fkResolved[value]) {
+            return fkResolved[value];
+        }
+        if (column.html_input_type === 'date' && isMicrosecondTimestamp(value)) {
+            return formatMicroseconds(value);
+        }
+        return value;
+    }
+    isBoolColumn(column) {
+        return column.type === 'bool' ||
+            column.html_input_type === 'bool' ||
+            column.html_input_type === 'checkbox';
+    }
+    getBoolValue(value) {
+        return value === 't' || value === 'true' || value === '1';
+    }
+    getColumnHeader(column) {
+        return column.column_friendly_name || column.column_name;
+    }
+    get hasPhotoSupport() {
+        return this.isTrueValue(this.tableSchema?.has_photo_support);
+    }
+    getPhotoUrl(row) {
+        const id = this.getPrimaryKeyValue(row);
+        return this.photoUrlBuilder.scaledPhotoUrl(this.tableName, id, 50, 50);
+    }
+    getPrimaryKeyValue(row) {
+        return this.tableSchema ? row[this.tableSchema.primary_key] : '';
+    }
+    // Pagination helpers
+    get currentPage() {
+        return this.pageOffset;
+    }
+    get totalPages() {
+        return Math.ceil(this.totalCount / this.pageSize);
+    }
+    get startRow() {
+        return this.pageOffset * this.pageSize + 1;
+    }
+    get endRow() {
+        return Math.min((this.pageOffset + 1) * this.pageSize, this.totalCount);
+    }
+    get canGoPrevious() {
+        return this.pageOffset > 0;
+    }
+    get canGoNext() {
+        return this.pageOffset < this.totalPages - 1;
+    }
+    // Navigation methods
+    goToFirstPage() {
+        this.navigateToPage(0);
+    }
+    goToPreviousPage() {
+        if (this.canGoPrevious) {
+            this.navigateToPage(this.pageOffset - 1);
+        }
+    }
+    goToNextPage() {
+        if (this.canGoNext) {
+            this.navigateToPage(this.pageOffset + 1);
+        }
+    }
+    goToLastPage() {
+        this.navigateToPage(this.totalPages - 1);
+    }
+    /** Build query params preserving ctx for nested navigation. */
+    buildCtxQueryParams(extra) {
+        const params = { ...extra };
+        if (this.bindingStack.length > 0) {
+            params['ctx'] = serializeBindingStack(this.bindingStack);
+        }
+        return params;
+    }
+    navigateToPage(page) {
+        this.router.navigate([this.editorRoutes.basePath, this.tableName, 'view', this.pageSize, page], { queryParams: this.buildCtxQueryParams() });
+    }
+    onPageSizeChange(newPageSize) {
+        // Reset to first page when changing page size
+        this.router.navigate([this.editorRoutes.basePath, this.tableName, 'view', newPageSize, 0], { queryParams: this.buildCtxQueryParams() });
+    }
+    // Action methods
+    onNewItem() {
+        const returnUrl = this.router.url;
+        this.router.navigate([this.editorRoutes.basePath, this.tableName, 'new'], {
+            queryParams: this.buildCtxQueryParams({ returnUrl })
+        });
+    }
+    onEditRow(row) {
+        const primaryKeyValue = this.getPrimaryKeyValue(row);
+        if (!primaryKeyValue) {
+            console.error('Cannot edit row: no primary key value found', { row, tableSchema: this.tableSchema });
+            return;
+        }
+        const returnUrl = this.router.url;
+        this.router.navigate([this.editorRoutes.basePath, this.tableName, 'edit', primaryKeyValue], {
+            queryParams: this.buildCtxQueryParams({ returnUrl })
+        });
+    }
+    /** Navigate back to the parent table's edit page by popping the binding stack. */
+    onNavigateToParent() {
+        if (this.bindingStack.length === 0)
+            return;
+        const parentBinding = this.bindingStack[this.bindingStack.length - 1];
+        const parentStack = this.bindingStack.slice(0, -1);
+        const queryParams = {};
+        if (parentStack.length > 0) {
+            queryParams['ctx'] = serializeBindingStack(parentStack);
+        }
+        this.router.navigate([this.editorRoutes.basePath, parentBinding.tableName, 'edit', parentBinding.primaryKeyValue], { queryParams });
+    }
+    get hasParent() {
+        return this.bindingStack.length > 0;
+    }
+    get parentFriendlyName() {
+        if (this.bindingStack.length === 0)
+            return '';
+        const parentBinding = this.bindingStack[this.bindingStack.length - 1];
+        const parentSchema = this.databaseSchema?.tables.find(t => t.table_name === parentBinding.tableName);
+        return parentSchema?.table_friendly_name || parentBinding.tableName;
+    }
+    onDeleteRow(row) {
+        const primaryKeyValue = this.getPrimaryKeyValue(row);
+        const primaryKeyName = this.tableSchema?.primary_key || 'id';
+        const friendlyName = this.tableSchema?.table_friendly_name || this.tableName;
+        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+            width: '400px',
+            data: {
+                title: 'Confirm Delete',
+                description: `Are you sure you want to delete this ${friendlyName} record (ID: ${primaryKeyValue})?`,
+                buttonText: 'Delete',
+            }
+        });
+        dialogRef.afterClosed().subscribe(confirmed => {
+            if (confirmed) {
+                this.crudAccess.deleteItem(this.tableName, primaryKeyName, primaryKeyValue).subscribe({
+                    next: () => {
+                        // Refresh the data after deletion
+                        this.loadData();
+                    },
+                    error: (err) => {
+                        console.error('Error deleting row:', err);
+                        this.error = 'Failed to delete row';
+                    }
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableViewControlComponent, deps: [{ token: DatabaseSchemaService }, { token: HONUWARE_CRUD_ACCESS }, { token: i2.PhotoUrlBuilder }, { token: CRUD_EDITOR_ROUTES }, { token: i1$1.Router }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TableViewControlComponent, isStandalone: true, selector: "hw-table-view-control", inputs: { tableName: "tableName", pageSize: "pageSize", pageOffset: "pageOffset", sortColumn: "sortColumn", sortAscending: "sortAscending", bindingStack: "bindingStack" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-view-container\">\n  <!-- Back to Parent button -->\n  @if (hasParent) {\n    <button mat-stroked-button class=\"parent-button\" (click)=\"onNavigateToParent()\">\n      <mat-icon>arrow_back</mat-icon>\n      Back to {{ parentFriendlyName }}\n    </button>\n  }\n\n  <!-- Header with New Item button -->\n  <div class=\"table-header\">\n    <h2>{{ tableSchema?.table_friendly_name || tableName }}</h2>\n    <button mat-raised-button color=\"primary\" (click)=\"onNewItem()\">\n      <mat-icon>add</mat-icon>\n      New Item\n    </button>\n  </div>\n\n  <!-- Loading state -->\n  @if (loading) {\n    <div class=\"loading-container\">\n      <mat-spinner diameter=\"40\"></mat-spinner>\n      <p>Loading...</p>\n    </div>\n  }\n\n  <!-- Error state -->\n  @if (error && !loading) {\n    <div class=\"error-container\">\n      <mat-icon>error</mat-icon>\n      <p>{{ error }}</p>\n    </div>\n  }\n\n  <!-- Empty state -->\n  @if (!loading && !error && dataSource.length === 0) {\n    <div class=\"empty-container\">\n      <mat-icon>inbox</mat-icon>\n      <p>No records found</p>\n      <button mat-stroked-button color=\"primary\" (click)=\"onNewItem()\">\n        Create First Record\n      </button>\n    </div>\n  }\n\n  <!-- Data table -->\n  @if (!loading && !error && dataSource.length > 0) {\n    <div class=\"table-wrapper\">\n      <table mat-table [dataSource]=\"dataSource\" multiTemplateDataRows>\n        <!-- Dynamic columns -->\n        @for (column of columns; track column.column_name) {\n          <ng-container [matColumnDef]=\"column.column_name\">\n            <th mat-header-cell *matHeaderCellDef>{{ getColumnHeader(column) }}</th>\n            <td mat-cell *matCellDef=\"let row\">\n              @if (isBoolColumn(column)) {\n                <mat-icon [class]=\"getBoolValue(row[column.column_name]) ? 'bool-true' : 'bool-false'\">\n                  {{ getBoolValue(row[column.column_name]) ? 'check_circle' : 'cancel' }}\n                </mat-icon>\n              } @else {\n                {{ formatCellValue(column, row[column.column_name]) }}\n              }\n            </td>\n          </ng-container>\n        }\n\n        <!-- Photo column (always defined, only included in displayedColumns when supported) -->\n        <ng-container matColumnDef=\"photo\">\n          <th mat-header-cell *matHeaderCellDef>Photo</th>\n          <td mat-cell *matCellDef=\"let row\">\n            <img [src]=\"getPhotoUrl(row)\"\n                 class=\"photo-thumbnail\"\n                 (error)=\"$any($event.target).style.display='none'; $any($event.target).nextElementSibling.style.display='inline-flex'\"\n                 alt=\"Photo\">\n            <mat-icon class=\"photo-placeholder\" style=\"display: none\">image</mat-icon>\n          </td>\n        </ng-container>\n\n        <!-- Actions column -->\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef>Actions</th>\n          <td mat-cell *matCellDef=\"let row\">\n            <div class=\"actions-row\">\n              <button mat-icon-button color=\"primary\" (click)=\"onEditRow(row); $event.stopPropagation()\" title=\"Edit\">\n                <mat-icon>edit</mat-icon>\n              </button>\n              <button mat-icon-button color=\"warn\" (click)=\"onDeleteRow(row); $event.stopPropagation()\" title=\"Delete\">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Child tables detail row (spans all columns) -->\n        <ng-container matColumnDef=\"childTables\">\n          <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"displayedColumns.length\">\n            <div class=\"child-table-pills\">\n              @for (ref of childTableReferences; track ref.childTableName + ref.foreignKey.column_name) {\n                <button class=\"child-pill\" (click)=\"onNavigateToChild(ref, row); $event.stopPropagation()\">\n                  <mat-icon>subdirectory_arrow_right</mat-icon>\n                  {{ ref.childTableFriendlyName }}\n                </button>\n              }\n            </div>\n          </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: ['childTables'];\"\n            class=\"child-tables-row\"\n            [class.hidden-row]=\"childTableReferences.length === 0\"></tr>\n      </table>\n    </div>\n\n    <!-- Pagination controls -->\n    <div class=\"pagination-container\">\n      <div class=\"pagination-left\">\n        <mat-form-field appearance=\"outline\" class=\"page-size-select\">\n          <mat-label>Page size</mat-label>\n          <mat-select [value]=\"pageSize\" (selectionChange)=\"onPageSizeChange($event.value)\">\n            @for (size of pageSizeOptions; track size) {\n              <mat-option [value]=\"size\">{{ size }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <span class=\"pagination-info\">\n          Showing {{ startRow }} - {{ endRow }} of {{ totalCount }}\n        </span>\n      </div>\n      <div class=\"pagination-buttons\">\n        <button mat-icon-button\n                [disabled]=\"!canGoPrevious\"\n                (click)=\"goToFirstPage()\"\n                title=\"First page\">\n          <mat-icon>first_page</mat-icon>\n        </button>\n        <button mat-icon-button\n                [disabled]=\"!canGoPrevious\"\n                (click)=\"goToPreviousPage()\"\n                title=\"Previous page\">\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n        <span class=\"page-info\">Page {{ currentPage + 1 }} of {{ totalPages }}</span>\n        <button mat-icon-button\n                [disabled]=\"!canGoNext\"\n                (click)=\"goToNextPage()\"\n                title=\"Next page\">\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button mat-icon-button\n                [disabled]=\"!canGoNext\"\n                (click)=\"goToLastPage()\"\n                title=\"Last page\">\n          <mat-icon>last_page</mat-icon>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".table-view-container{padding:16px}.parent-button{margin-bottom:12px}.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.table-header h2{margin:0}.loading-container,.error-container,.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;text-align:center}.loading-container mat-icon,.error-container mat-icon,.empty-container mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px}.loading-container p,.error-container p,.empty-container p{margin:0 0 16px;color:#666}.error-container mat-icon{color:#f44336}.empty-container mat-icon{color:#9e9e9e}.table-wrapper{overflow-x:auto;margin-bottom:16px}.table-wrapper table{width:100%}.table-wrapper tr.mat-mdc-row td{border-bottom:none}.table-wrapper tr.child-tables-row td{border-bottom:1px solid #e0e0e0}.mat-column-actions{width:80px}.actions-row{display:flex;align-items:center}.actions-row .mat-mdc-icon-button{--mat-icon-button-state-layer-size: 36px;padding:0}.pagination-container{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid #e0e0e0}.pagination-left{display:flex;align-items:center;gap:16px}.page-size-select{width:100px}.page-size-select ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.pagination-info{color:#666;font-size:14px}.pagination-buttons{display:flex;align-items:center;gap:4px}.page-info{padding:0 12px;font-size:14px}.bool-true{color:#16a34a}.bool-false{color:#dc2626}.mat-column-photo{width:60px;text-align:center}.photo-thumbnail{max-width:50px;max-height:50px;border-radius:4px;object-fit:cover}.photo-placeholder{color:#9e9e9e;font-size:24px;width:24px;height:24px}.child-tables-row{height:auto!important}.child-tables-row td{padding:0!important;border-bottom:1px solid #e0e0e0}.hidden-row{display:none}.child-table-pills{display:flex;flex-wrap:wrap;gap:6px;padding:4px 16px 6px 48px}.child-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 10px 2px 6px;border:1px solid #90caf9;border-radius:16px;background:#e3f2fd;color:#1565c0;font-size:12px;cursor:pointer;white-space:nowrap}.child-pill mat-icon{font-size:14px;width:14px;height:14px}.child-pill:hover{background:#bbdefb;border-color:#42a5f5}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableViewControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hw-table-view-control', standalone: true, imports: [
+                        MatTableModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatDialogModule,
+                        MatSelectModule,
+                        MatFormFieldModule
+                    ], template: "<div class=\"table-view-container\">\n  <!-- Back to Parent button -->\n  @if (hasParent) {\n    <button mat-stroked-button class=\"parent-button\" (click)=\"onNavigateToParent()\">\n      <mat-icon>arrow_back</mat-icon>\n      Back to {{ parentFriendlyName }}\n    </button>\n  }\n\n  <!-- Header with New Item button -->\n  <div class=\"table-header\">\n    <h2>{{ tableSchema?.table_friendly_name || tableName }}</h2>\n    <button mat-raised-button color=\"primary\" (click)=\"onNewItem()\">\n      <mat-icon>add</mat-icon>\n      New Item\n    </button>\n  </div>\n\n  <!-- Loading state -->\n  @if (loading) {\n    <div class=\"loading-container\">\n      <mat-spinner diameter=\"40\"></mat-spinner>\n      <p>Loading...</p>\n    </div>\n  }\n\n  <!-- Error state -->\n  @if (error && !loading) {\n    <div class=\"error-container\">\n      <mat-icon>error</mat-icon>\n      <p>{{ error }}</p>\n    </div>\n  }\n\n  <!-- Empty state -->\n  @if (!loading && !error && dataSource.length === 0) {\n    <div class=\"empty-container\">\n      <mat-icon>inbox</mat-icon>\n      <p>No records found</p>\n      <button mat-stroked-button color=\"primary\" (click)=\"onNewItem()\">\n        Create First Record\n      </button>\n    </div>\n  }\n\n  <!-- Data table -->\n  @if (!loading && !error && dataSource.length > 0) {\n    <div class=\"table-wrapper\">\n      <table mat-table [dataSource]=\"dataSource\" multiTemplateDataRows>\n        <!-- Dynamic columns -->\n        @for (column of columns; track column.column_name) {\n          <ng-container [matColumnDef]=\"column.column_name\">\n            <th mat-header-cell *matHeaderCellDef>{{ getColumnHeader(column) }}</th>\n            <td mat-cell *matCellDef=\"let row\">\n              @if (isBoolColumn(column)) {\n                <mat-icon [class]=\"getBoolValue(row[column.column_name]) ? 'bool-true' : 'bool-false'\">\n                  {{ getBoolValue(row[column.column_name]) ? 'check_circle' : 'cancel' }}\n                </mat-icon>\n              } @else {\n                {{ formatCellValue(column, row[column.column_name]) }}\n              }\n            </td>\n          </ng-container>\n        }\n\n        <!-- Photo column (always defined, only included in displayedColumns when supported) -->\n        <ng-container matColumnDef=\"photo\">\n          <th mat-header-cell *matHeaderCellDef>Photo</th>\n          <td mat-cell *matCellDef=\"let row\">\n            <img [src]=\"getPhotoUrl(row)\"\n                 class=\"photo-thumbnail\"\n                 (error)=\"$any($event.target).style.display='none'; $any($event.target).nextElementSibling.style.display='inline-flex'\"\n                 alt=\"Photo\">\n            <mat-icon class=\"photo-placeholder\" style=\"display: none\">image</mat-icon>\n          </td>\n        </ng-container>\n\n        <!-- Actions column -->\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef>Actions</th>\n          <td mat-cell *matCellDef=\"let row\">\n            <div class=\"actions-row\">\n              <button mat-icon-button color=\"primary\" (click)=\"onEditRow(row); $event.stopPropagation()\" title=\"Edit\">\n                <mat-icon>edit</mat-icon>\n              </button>\n              <button mat-icon-button color=\"warn\" (click)=\"onDeleteRow(row); $event.stopPropagation()\" title=\"Delete\">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Child tables detail row (spans all columns) -->\n        <ng-container matColumnDef=\"childTables\">\n          <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"displayedColumns.length\">\n            <div class=\"child-table-pills\">\n              @for (ref of childTableReferences; track ref.childTableName + ref.foreignKey.column_name) {\n                <button class=\"child-pill\" (click)=\"onNavigateToChild(ref, row); $event.stopPropagation()\">\n                  <mat-icon>subdirectory_arrow_right</mat-icon>\n                  {{ ref.childTableFriendlyName }}\n                </button>\n              }\n            </div>\n          </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: ['childTables'];\"\n            class=\"child-tables-row\"\n            [class.hidden-row]=\"childTableReferences.length === 0\"></tr>\n      </table>\n    </div>\n\n    <!-- Pagination controls -->\n    <div class=\"pagination-container\">\n      <div class=\"pagination-left\">\n        <mat-form-field appearance=\"outline\" class=\"page-size-select\">\n          <mat-label>Page size</mat-label>\n          <mat-select [value]=\"pageSize\" (selectionChange)=\"onPageSizeChange($event.value)\">\n            @for (size of pageSizeOptions; track size) {\n              <mat-option [value]=\"size\">{{ size }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <span class=\"pagination-info\">\n          Showing {{ startRow }} - {{ endRow }} of {{ totalCount }}\n        </span>\n      </div>\n      <div class=\"pagination-buttons\">\n        <button mat-icon-button\n                [disabled]=\"!canGoPrevious\"\n                (click)=\"goToFirstPage()\"\n                title=\"First page\">\n          <mat-icon>first_page</mat-icon>\n        </button>\n        <button mat-icon-button\n                [disabled]=\"!canGoPrevious\"\n                (click)=\"goToPreviousPage()\"\n                title=\"Previous page\">\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n        <span class=\"page-info\">Page {{ currentPage + 1 }} of {{ totalPages }}</span>\n        <button mat-icon-button\n                [disabled]=\"!canGoNext\"\n                (click)=\"goToNextPage()\"\n                title=\"Next page\">\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button mat-icon-button\n                [disabled]=\"!canGoNext\"\n                (click)=\"goToLastPage()\"\n                title=\"Last page\">\n          <mat-icon>last_page</mat-icon>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".table-view-container{padding:16px}.parent-button{margin-bottom:12px}.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.table-header h2{margin:0}.loading-container,.error-container,.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;text-align:center}.loading-container mat-icon,.error-container mat-icon,.empty-container mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px}.loading-container p,.error-container p,.empty-container p{margin:0 0 16px;color:#666}.error-container mat-icon{color:#f44336}.empty-container mat-icon{color:#9e9e9e}.table-wrapper{overflow-x:auto;margin-bottom:16px}.table-wrapper table{width:100%}.table-wrapper tr.mat-mdc-row td{border-bottom:none}.table-wrapper tr.child-tables-row td{border-bottom:1px solid #e0e0e0}.mat-column-actions{width:80px}.actions-row{display:flex;align-items:center}.actions-row .mat-mdc-icon-button{--mat-icon-button-state-layer-size: 36px;padding:0}.pagination-container{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid #e0e0e0}.pagination-left{display:flex;align-items:center;gap:16px}.page-size-select{width:100px}.page-size-select ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.pagination-info{color:#666;font-size:14px}.pagination-buttons{display:flex;align-items:center;gap:4px}.page-info{padding:0 12px;font-size:14px}.bool-true{color:#16a34a}.bool-false{color:#dc2626}.mat-column-photo{width:60px;text-align:center}.photo-thumbnail{max-width:50px;max-height:50px;border-radius:4px;object-fit:cover}.photo-placeholder{color:#9e9e9e;font-size:24px;width:24px;height:24px}.child-tables-row{height:auto!important}.child-tables-row td{padding:0!important;border-bottom:1px solid #e0e0e0}.hidden-row{display:none}.child-table-pills{display:flex;flex-wrap:wrap;gap:6px;padding:4px 16px 6px 48px}.child-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 10px 2px 6px;border:1px solid #90caf9;border-radius:16px;background:#e3f2fd;color:#1565c0;font-size:12px;cursor:pointer;white-space:nowrap}.child-pill mat-icon{font-size:14px;width:14px;height:14px}.child-pill:hover{background:#bbdefb;border-color:#42a5f5}\n"] }]
+        }], ctorParameters: () => [{ type: DatabaseSchemaService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HONUWARE_CRUD_ACCESS]
+                }] }, { type: i2.PhotoUrlBuilder }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CRUD_EDITOR_ROUTES]
+                }] }, { type: i1$1.Router }, { type: i4.MatDialog }], propDecorators: { tableName: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageOffset: [{
+                type: Input
+            }], sortColumn: [{
+                type: Input
+            }], sortAscending: [{
+                type: Input
+            }], bindingStack: [{
+                type: Input
+            }] } });
+
+class CompositeRowControlComponent {
+    dbSchemaService;
+    crudAccess;
+    editorRoutes;
+    router;
+    tableName;
+    columnNames;
+    primaryKeyName;
+    primaryKeyValue;
+    isCreateMode;
+    returnUrl;
+    bindingStack = [];
+    formAssist;
+    controls;
+    photoUpload;
+    columnInfos = [];
+    loading = true;
+    columnValues = []; // values for each column
+    hasPhotoSupport = false;
+    childTableReferences = [];
+    /** Set of FK column names from navigation context (readonly + pre-filled in create mode). */
+    contextFkColumnNames = new Set();
+    databaseSchema;
+    tableSchema;
+    /** Tracks whether each computed date dest column is in auto-compute mode. */
+    computedDateAutoState = {};
+    constructor(dbSchemaService, crudAccess, editorRoutes, router) {
+        this.dbSchemaService = dbSchemaService;
+        this.crudAccess = crudAccess;
+        this.editorRoutes = editorRoutes;
+        this.router = router;
+    }
+    ngOnInit() {
+        this.loadColumnInfos();
+    }
+    loadColumnInfos() {
+        this.dbSchemaService.GetDBSchema().subscribe(schema => {
+            this.databaseSchema = schema;
+            const table = schema.tables.find(t => t.table_name === this.tableName);
+            if (!table) {
+                this.columnInfos = [];
+                this.loading = false;
+                return;
+            }
+            this.tableSchema = table;
+            this.hasPhotoSupport = this.isTrueValue(table.has_photo_support);
+            this.columnInfos = this.columnNames.map(colName => table.columns.find(col => col.column_name === colName));
+            // Compute context FK columns from binding stack
+            this.contextFkColumnNames = this.computeContextFkColumns(table);
+            // Compute child table references (for nested table navigation buttons)
+            this.childTableReferences = this.isCreateMode ? [] : this.getChildTableReferences(schema);
+            if (!this.isCreateMode && this.primaryKeyName && this.primaryKeyValue) {
+                // Fetch row data using getRowByValues (unified for root and nested)
+                const filterPairs = [
+                    { column_name: this.primaryKeyName, column_value: this.primaryKeyValue }
+                ];
+                this.crudAccess.getRowByValues(this.tableName, filterPairs).subscribe(result => {
+                    // Map each columnName to its value in the returned row
+                    this.columnValues = this.columnNames.map(colName => {
+                        const sortedIdx = result.sortedColumnNames.indexOf(colName);
+                        return result.dataTable.length > 0 && sortedIdx !== -1 ? result.dataTable[0][sortedIdx] : undefined;
+                    });
+                    this.loading = false;
+                });
+            }
+            else {
+                // Create mode: pre-fill FK columns from binding stack context, then apply formAssist defaults
+                this.columnValues = this.columnNames.map(colName => {
+                    const fkPrefill = this.getContextFkValue(table, colName);
+                    if (fkPrefill)
+                        return fkPrefill;
+                    // Apply formAssist defaults
+                    if (this.formAssist?.defaults && colName in this.formAssist.defaults) {
+                        return this.formAssist.defaults[colName];
+                    }
+                    return undefined;
+                });
+                // Initialize computed date auto state
+                this.initComputedDateState();
+                this.loading = false;
+            }
+        });
+    }
+    /**
+     * Compute the set of FK column names that come from navigation context.
+     * These should be readonly in both edit and create mode.
+     */
+    computeContextFkColumns(table) {
+        const fkColumns = new Set();
+        for (const fk of table.foreign_keys) {
+            const binding = this.bindingStack.find(b => b.tableName === fk.parent_table_name && b.primaryKeyName === fk.parent_column_name);
+            if (binding) {
+                fkColumns.add(fk.column_name);
+            }
+        }
+        return fkColumns;
+    }
+    /**
+     * Get the pre-fill value for an FK column from the binding stack.
+     * Returns null if the column is not an FK from context.
+     */
+    getContextFkValue(table, columnName) {
+        for (const fk of table.foreign_keys) {
+            if (fk.column_name !== columnName)
+                continue;
+            const binding = this.bindingStack.find(b => b.tableName === fk.parent_table_name && b.primaryKeyName === fk.parent_column_name);
+            if (binding) {
+                return binding.primaryKeyValue;
+            }
+        }
+        return null;
+    }
+    /**
+     * Find nested tables that have FK references to the current table.
+     * Only includes tables listed in schema.nested_tables.
+     */
+    getChildTableReferences(schema) {
+        const refs = [];
+        for (const nestedTableName of schema.nested_tables) {
+            const childSchema = schema.tables.find(t => t.table_name === nestedTableName);
+            if (!childSchema)
+                continue;
+            for (const fk of childSchema.foreign_keys) {
+                if (fk.parent_table_name === this.tableName) {
+                    refs.push({
+                        childTableName: nestedTableName,
+                        childTableFriendlyName: childSchema.table_friendly_name || nestedTableName,
+                        foreignKey: fk,
+                    });
+                }
+            }
+        }
+        return refs;
+    }
+    get visibleColumns() {
+        return this.columnInfos
+            .map((col, index) => ({ col, index }))
+            .filter(({ col }) => {
+            if (this.isTrueValue(col.hidden))
+                return false;
+            if (this.isTrueValue(col.readonly) && this.isCreateMode)
+                return false;
+            return true;
+        });
+    }
+    /** Check if a column should be readonly. Includes context FK columns. */
+    isReadonlyColumn(col) {
+        return this.isPrimaryKeyColumn(col) || this.isTrueValue(col.readonly)
+            || this.contextFkColumnNames.has(col.column_name);
+    }
+    /** Whether the column is an FK from navigation context. */
+    isContextFkColumn(col) {
+        return this.contextFkColumnNames.has(col.column_name);
+    }
+    onValueChanged(index, value) {
+        const visible = this.visibleColumns;
+        const entry = visible[index];
+        if (!entry)
+            return;
+        const control = this.controls.get(index);
+        if (control) {
+            control.value = value;
+        }
+        // Update the backing columnValues so computed dates can read it
+        this.columnValues[entry.index] = value;
+        // Propagate to computed date destinations
+        this.applyComputedDates(entry.col.column_name);
+    }
+    getControlValues() {
+        const values = {};
+        const visible = this.visibleColumns;
+        this.controls.forEach((control, idx) => {
+            const entry = visible[idx];
+            if (!entry)
+                return;
+            const col = entry.col;
+            if (this.isTrueValue(col.readonly))
+                return;
+            // Skip empty strings for non-text columns — PostgreSQL can't cast ""
+            // to numeric/date/bool types, and empty means "no change" for those.
+            if (control.value === '' && !this.isTextColumnType(col.type))
+                return;
+            values[this.columnNames[entry.index]] = control.value;
+        });
+        return values;
+    }
+    isTextColumnType(type) {
+        const upper = type.toUpperCase();
+        return upper === 'VARCHAR' || upper === 'TEXT' || upper === 'CHAR';
+    }
+    onSubmit() {
+        const values = this.getControlValues();
+        if (this.isCreateMode) {
+            const body = {
+                table_name: this.tableName,
+                value: values
+            };
+            if (this.hasPhotoSupport) {
+                this.crudAccess.addItemFetchPrimaryKey(body).subscribe({
+                    next: (primaryKey) => {
+                        if (this.photoUpload?.hasPendingFile) {
+                            this.photoUpload.uploadPendingPhoto(this.tableName, Number(primaryKey)).subscribe({
+                                next: () => this.navigateBack(),
+                                error: (err) => {
+                                    console.error('Error uploading photo:', err);
+                                    this.navigateBack();
+                                }
+                            });
+                        }
+                        else {
+                            this.navigateBack();
+                        }
+                    },
+                    error: (err) => console.error('Error creating item:', err)
+                });
+            }
+            else {
+                this.crudAccess.addItem(body).subscribe({
+                    next: () => this.navigateBack(),
+                    error: (err) => console.error('Error creating item:', err)
+                });
+            }
+        }
+        else {
+            if (!this.primaryKeyName || !this.primaryKeyValue)
+                return;
+            const body = {
+                table_name: this.tableName,
+                value: values,
+                column_name: this.primaryKeyName,
+                column_value: this.primaryKeyValue
+            };
+            this.crudAccess.updateItem(body).subscribe({
+                next: () => this.navigateBack(),
+                error: (err) => console.error('Error updating item:', err)
+            });
+        }
+    }
+    onCancel() {
+        this.navigateBack();
+    }
+    isTrueValue(value) {
+        return value === true || value === 't';
+    }
+    get showPhotoUpload() {
+        if (!this.hasPhotoSupport)
+            return false;
+        if (this.isCreateMode)
+            return true;
+        return !!this.primaryKeyValue;
+    }
+    get photoItemId() {
+        if (this.isCreateMode)
+            return 0;
+        return Number(this.primaryKeyValue);
+    }
+    getForeignKeyInfo(col) {
+        return this.tableSchema?.foreign_keys.find(fk => fk.column_name === col.column_name);
+    }
+    isPrimaryKeyColumn(col) {
+        if (this.isCreateMode)
+            return false;
+        // Handle both boolean true and string "t" from server
+        return col.primary_key === true || col.primary_key === 't';
+    }
+    // --- Nested navigation ---
+    get hasParent() {
+        return this.bindingStack.length > 0;
+    }
+    get parentFriendlyName() {
+        if (this.bindingStack.length === 0)
+            return '';
+        const parentBinding = this.bindingStack[this.bindingStack.length - 1];
+        const parentSchema = this.databaseSchema?.tables.find(t => t.table_name === parentBinding.tableName);
+        return parentSchema?.table_friendly_name || parentBinding.tableName;
+    }
+    /** Navigate back to the parent table's edit page by popping the binding stack. */
+    onNavigateToParent() {
+        if (this.bindingStack.length === 0)
+            return;
+        const parentBinding = this.bindingStack[this.bindingStack.length - 1];
+        const parentStack = this.bindingStack.slice(0, -1);
+        const queryParams = {};
+        if (parentStack.length > 0) {
+            queryParams['ctx'] = serializeBindingStack(parentStack);
+        }
+        this.router.navigate([this.editorRoutes.basePath, parentBinding.tableName, 'edit', parentBinding.primaryKeyValue], { queryParams });
+    }
+    /** Navigate to a child (nested) table filtered by the current row. */
+    onNavigateToChild(ref) {
+        if (!this.primaryKeyValue || !this.tableSchema)
+            return;
+        // Push current table onto the binding stack
+        const newStack = [
+            ...this.bindingStack,
+            {
+                tableName: this.tableName,
+                primaryKeyName: this.tableSchema.primary_key,
+                primaryKeyValue: this.primaryKeyValue,
+            }
+        ];
+        const queryParams = {
+            ctx: serializeBindingStack(newStack),
+        };
+        this.router.navigate([this.editorRoutes.basePath, ref.childTableName, 'view', 10, 0], { queryParams });
+    }
+    // --- Computed date support ---
+    initComputedDateState() {
+        if (!this.formAssist?.computedDates)
+            return;
+        for (const rule of this.formAssist.computedDates) {
+            this.computedDateAutoState[rule.dest] = rule.autoByDefault;
+        }
+    }
+    /** When a source field changes, update any auto-computed dest fields. */
+    applyComputedDates(changedColumn) {
+        if (!this.formAssist?.computedDates)
+            return;
+        for (const rule of this.formAssist.computedDates) {
+            if (rule.source !== changedColumn)
+                continue;
+            if (!this.computedDateAutoState[rule.dest])
+                continue;
+            this.computeAndSetDate(rule);
+        }
+    }
+    computeAndSetDate(rule) {
+        const sourceIndex = this.columnNames.indexOf(rule.source);
+        const destIndex = this.columnNames.indexOf(rule.dest);
+        if (sourceIndex === -1 || destIndex === -1)
+            return;
+        const sourceValue = this.columnValues[sourceIndex];
+        if (!sourceValue)
+            return;
+        const sourceUs = parseInt(sourceValue, 10);
+        if (isNaN(sourceUs))
+            return;
+        const destUs = sourceUs + (rule.offsetMinutes * 60 * 1_000_000);
+        const destValue = String(destUs);
+        this.columnValues[destIndex] = destValue;
+        // Update the visible control if it exists
+        const visible = this.visibleColumns;
+        const visibleIdx = visible.findIndex(v => v.index === destIndex);
+        if (visibleIdx !== -1) {
+            const control = this.controls?.get(visibleIdx);
+            if (control) {
+                control.value = destValue;
+            }
+        }
+    }
+    /** Toggle auto-compute for a computed date dest column. */
+    onToggleComputedDate(destColumn) {
+        this.computedDateAutoState[destColumn] = !this.computedDateAutoState[destColumn];
+        if (this.computedDateAutoState[destColumn]) {
+            // Re-compute from source
+            const rule = this.formAssist?.computedDates?.find(r => r.dest === destColumn);
+            if (rule) {
+                this.computeAndSetDate(rule);
+            }
+        }
+    }
+    /** Check if a column is a computed date dest in auto mode. */
+    isComputedDateAuto(columnName) {
+        return this.computedDateAutoState[columnName] === true;
+    }
+    /** Get the computed date rule for a column, if any. */
+    getComputedDateRule(columnName) {
+        return this.formAssist?.computedDates?.find(r => r.dest === columnName);
+    }
+    navigateBack() {
+        if (this.returnUrl) {
+            this.router.navigateByUrl(this.returnUrl);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CompositeRowControlComponent, deps: [{ token: DatabaseSchemaService }, { token: HONUWARE_CRUD_ACCESS }, { token: CRUD_EDITOR_ROUTES }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: CompositeRowControlComponent, isStandalone: true, selector: "hw-composite-row-control", inputs: { tableName: "tableName", columnNames: "columnNames", primaryKeyName: "primaryKeyName", primaryKeyValue: "primaryKeyValue", isCreateMode: "isCreateMode", returnUrl: "returnUrl", bindingStack: "bindingStack", formAssist: "formAssist" }, viewQueries: [{ propertyName: "photoUpload", first: true, predicate: PhotoUploadComponent, descendants: true }, { propertyName: "controls", predicate: CompositeControlComponent, descendants: true }], ngImport: i0, template: "@if (loading) {\n<div>Loading...</div>\n}\n@if (!loading) {\n<!-- Back to Parent button -->\n@if (hasParent) {\n  <button mat-stroked-button class=\"parent-button\" (click)=\"onNavigateToParent()\">\n    <mat-icon>arrow_back</mat-icon>\n    Back to {{ parentFriendlyName }}\n  </button>\n}\n@if (showPhotoUpload) {\n  <hw-photo-upload [tableName]=\"tableName\" [tableItemId]=\"photoItemId\" [deferUpload]=\"isCreateMode\"></hw-photo-upload>\n}\n<form>\n  @for (entry of visibleColumns; track entry.col.column_name; let i = $index) {\n  <hw-composite-control [dataInfo]=\"entry.col\"\n                         [value]=\"columnValues[entry.index]\"\n                         [readOnly]=\"isReadonlyColumn(entry.col) || isComputedDateAuto(entry.col.column_name)\"\n                         [foreignKeyInfo]=\"getForeignKeyInfo(entry.col)\"\n                         (valueChanged)=\"onValueChanged(i, $event)\">\n  </hw-composite-control>\n  @if (getComputedDateRule(entry.col.column_name); as rule) {\n    <div class=\"computed-date-toggle\">\n      <mat-checkbox [checked]=\"isComputedDateAuto(entry.col.column_name)\"\n                    (change)=\"onToggleComputedDate(entry.col.column_name)\">\n        Auto-compute from {{ rule.source }} + {{ rule.offsetMinutes }} min\n      </mat-checkbox>\n    </div>\n  }\n  }\n  <div class=\"form-actions\">\n    <button type=\"button\" mat-raised-button color=\"primary\" class=\"submit-button\" (click)=\"onSubmit()\">\n      {{ isCreateMode ? 'Create' : 'Update' }}\n    </button>\n    @if (returnUrl) {\n      <button type=\"button\" mat-stroked-button class=\"cancel-button\" (click)=\"onCancel()\">\n        Cancel\n      </button>\n    }\n  </div>\n</form>\n<!-- Nested table cards (only in edit mode) -->\n@if (!isCreateMode && childTableReferences.length > 0) {\n  <div class=\"nested-tables-section\">\n    <h3>Related Tables</h3>\n    <div class=\"nested-table-cards\">\n      @for (ref of childTableReferences; track ref.childTableName + ref.foreignKey.column_name) {\n        <button mat-stroked-button class=\"nested-table-card\" (click)=\"onNavigateToChild(ref)\">\n          <mat-icon>subdirectory_arrow_right</mat-icon>\n          {{ ref.childTableFriendlyName }}\n        </button>\n      }\n    </div>\n  </div>\n}\n}\n", styles: [":host{display:block}.parent-button{margin-bottom:12px}hw-photo-upload{display:block;margin-bottom:1rem}form{display:flex;flex-direction:column;gap:1rem;max-width:600px}.form-actions{display:flex;justify-content:flex-start;gap:.5rem;margin-top:1rem}.nested-tables-section{margin-top:2rem;max-width:600px}.nested-tables-section h3{margin:0 0 12px;font-size:16px;color:#333}.nested-table-cards{display:flex;flex-wrap:wrap;gap:8px}.nested-table-card{display:inline-flex;align-items:center;gap:6px}.computed-date-toggle{margin-top:-.5rem;margin-bottom:.25rem;font-size:.85rem;color:#666}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CompositeControlComponent, selector: "hw-composite-control", inputs: ["dataInfo", "value", "readOnly", "foreignKeyInfo"], outputs: ["valueChanged"] }, { kind: "component", type: PhotoUploadComponent, selector: "hw-photo-upload", inputs: ["tableName", "tableItemId", "userMode", "deferUpload"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CompositeRowControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hw-composite-row-control', standalone: true, imports: [MatButtonModule, MatCheckboxModule, MatIconModule, CompositeControlComponent, PhotoUploadComponent], template: "@if (loading) {\n<div>Loading...</div>\n}\n@if (!loading) {\n<!-- Back to Parent button -->\n@if (hasParent) {\n  <button mat-stroked-button class=\"parent-button\" (click)=\"onNavigateToParent()\">\n    <mat-icon>arrow_back</mat-icon>\n    Back to {{ parentFriendlyName }}\n  </button>\n}\n@if (showPhotoUpload) {\n  <hw-photo-upload [tableName]=\"tableName\" [tableItemId]=\"photoItemId\" [deferUpload]=\"isCreateMode\"></hw-photo-upload>\n}\n<form>\n  @for (entry of visibleColumns; track entry.col.column_name; let i = $index) {\n  <hw-composite-control [dataInfo]=\"entry.col\"\n                         [value]=\"columnValues[entry.index]\"\n                         [readOnly]=\"isReadonlyColumn(entry.col) || isComputedDateAuto(entry.col.column_name)\"\n                         [foreignKeyInfo]=\"getForeignKeyInfo(entry.col)\"\n                         (valueChanged)=\"onValueChanged(i, $event)\">\n  </hw-composite-control>\n  @if (getComputedDateRule(entry.col.column_name); as rule) {\n    <div class=\"computed-date-toggle\">\n      <mat-checkbox [checked]=\"isComputedDateAuto(entry.col.column_name)\"\n                    (change)=\"onToggleComputedDate(entry.col.column_name)\">\n        Auto-compute from {{ rule.source }} + {{ rule.offsetMinutes }} min\n      </mat-checkbox>\n    </div>\n  }\n  }\n  <div class=\"form-actions\">\n    <button type=\"button\" mat-raised-button color=\"primary\" class=\"submit-button\" (click)=\"onSubmit()\">\n      {{ isCreateMode ? 'Create' : 'Update' }}\n    </button>\n    @if (returnUrl) {\n      <button type=\"button\" mat-stroked-button class=\"cancel-button\" (click)=\"onCancel()\">\n        Cancel\n      </button>\n    }\n  </div>\n</form>\n<!-- Nested table cards (only in edit mode) -->\n@if (!isCreateMode && childTableReferences.length > 0) {\n  <div class=\"nested-tables-section\">\n    <h3>Related Tables</h3>\n    <div class=\"nested-table-cards\">\n      @for (ref of childTableReferences; track ref.childTableName + ref.foreignKey.column_name) {\n        <button mat-stroked-button class=\"nested-table-card\" (click)=\"onNavigateToChild(ref)\">\n          <mat-icon>subdirectory_arrow_right</mat-icon>\n          {{ ref.childTableFriendlyName }}\n        </button>\n      }\n    </div>\n  </div>\n}\n}\n", styles: [":host{display:block}.parent-button{margin-bottom:12px}hw-photo-upload{display:block;margin-bottom:1rem}form{display:flex;flex-direction:column;gap:1rem;max-width:600px}.form-actions{display:flex;justify-content:flex-start;gap:.5rem;margin-top:1rem}.nested-tables-section{margin-top:2rem;max-width:600px}.nested-tables-section h3{margin:0 0 12px;font-size:16px;color:#333}.nested-table-cards{display:flex;flex-wrap:wrap;gap:8px}.nested-table-card{display:inline-flex;align-items:center;gap:6px}.computed-date-toggle{margin-top:-.5rem;margin-bottom:.25rem;font-size:.85rem;color:#666}\n"] }]
+        }], ctorParameters: () => [{ type: DatabaseSchemaService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HONUWARE_CRUD_ACCESS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CRUD_EDITOR_ROUTES]
+                }] }, { type: i1$1.Router }], propDecorators: { tableName: [{
+                type: Input
+            }], columnNames: [{
+                type: Input
+            }], primaryKeyName: [{
+                type: Input
+            }], primaryKeyValue: [{
+                type: Input
+            }], isCreateMode: [{
+                type: Input
+            }], returnUrl: [{
+                type: Input
+            }], bindingStack: [{
+                type: Input
+            }], formAssist: [{
+                type: Input
+            }], controls: [{
+                type: ViewChildren,
+                args: [CompositeControlComponent]
+            }], photoUpload: [{
+                type: ViewChild,
+                args: [PhotoUploadComponent]
+            }] } });
+
+class TableViewPageComponent {
+    route;
+    tableName = '';
+    pageSize = 10;
+    pageOffset = 0;
+    bindingStack = [];
+    adminHome;
+    destroy$ = new Subject();
+    constructor(route, editorRoutes) {
+        this.route = route;
+        this.adminHome = editorRoutes.adminHome;
+    }
+    ngOnInit() {
+        combineLatest([
+            this.route.params,
+            this.route.queryParams
+        ]).pipe(takeUntil(this.destroy$)).subscribe(([params, queryParams]) => {
+            this.tableName = params['tableName'] || '';
+            this.pageSize = parseInt(params['pageSize'], 10) || 10;
+            this.pageOffset = parseInt(params['pageOffset'], 10) || 0;
+            this.bindingStack = parseBindingStack(queryParams['ctx']);
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableViewPageComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: CRUD_EDITOR_ROUTES }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: TableViewPageComponent, isStandalone: true, selector: "hw-table-view-page", ngImport: i0, template: "<a [routerLink]=\"adminHome\" class=\"din text-sm text-blue-600 hover:underline mb-4 inline-block\">&larr; Back to admin portal</a>\n<hw-table-view-control\n  [tableName]=\"tableName\"\n  [pageSize]=\"pageSize\"\n  [pageOffset]=\"pageOffset\"\n  [bindingStack]=\"bindingStack\">\n</hw-table-view-control>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TableViewControlComponent, selector: "hw-table-view-control", inputs: ["tableName", "pageSize", "pageOffset", "sortColumn", "sortAscending", "bindingStack"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableViewPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hw-table-view-page', standalone: true, imports: [RouterModule, TableViewControlComponent], template: "<a [routerLink]=\"adminHome\" class=\"din text-sm text-blue-600 hover:underline mb-4 inline-block\">&larr; Back to admin portal</a>\n<hw-table-view-control\n  [tableName]=\"tableName\"\n  [pageSize]=\"pageSize\"\n  [pageOffset]=\"pageOffset\"\n  [bindingStack]=\"bindingStack\">\n</hw-table-view-control>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CRUD_EDITOR_ROUTES]
+                }] }] });
+
+class TableEditPageComponent {
+    route;
+    dbSchemaService;
+    tableName = '';
+    primaryKeyName = 'id';
+    primaryKeyValue = '';
+    columnNames = [];
+    tableFriendlyName = '';
+    returnUrl = '';
+    bindingStack = [];
+    loading = true;
+    error;
+    adminHome;
+    destroy$ = new Subject();
+    constructor(route, dbSchemaService, editorRoutes) {
+        this.route = route;
+        this.dbSchemaService = dbSchemaService;
+        this.adminHome = editorRoutes.adminHome;
+    }
+    ngOnInit() {
+        combineLatest([
+            this.route.params,
+            this.route.queryParams,
+            this.dbSchemaService.GetDBSchema()
+        ]).pipe(takeUntil(this.destroy$)).subscribe({
+            next: ([params, queryParams, schema]) => {
+                this.tableName = params['tableName'] || '';
+                this.primaryKeyValue = params['id'] || '';
+                this.returnUrl = queryParams['returnUrl'] || '';
+                this.bindingStack = parseBindingStack(queryParams['ctx']);
+                const tableSchema = schema.tables.find(t => t.table_name === this.tableName);
+                if (!tableSchema) {
+                    this.error = `Table "${this.tableName}" not found`;
+                    this.loading = false;
+                    return;
+                }
+                this.tableFriendlyName = tableSchema.table_friendly_name || this.tableName;
+                this.primaryKeyName = tableSchema.primary_key;
+                this.columnNames = tableSchema.columns.map(c => c.column_name);
+                this.loading = false;
+            },
+            error: (err) => {
+                this.error = 'Failed to load schema';
+                this.loading = false;
+                console.error('Error loading schema:', err);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableEditPageComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DatabaseSchemaService }, { token: CRUD_EDITOR_ROUTES }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TableEditPageComponent, isStandalone: true, selector: "hw-table-edit-page", ngImport: i0, template: "@if (loading) {\n  <div class=\"loading-container\">\n    <mat-spinner diameter=\"40\"></mat-spinner>\n    <p>Loading...</p>\n  </div>\n}\n@if (!loading && error) {\n  <div class=\"error-container\">\n    <mat-icon>error</mat-icon>\n    <p>{{ error }}</p>\n  </div>\n}\n@if (!loading && !error) {\n  <div class=\"edit-page-container\">\n    <a [routerLink]=\"adminHome\" class=\"din text-sm text-blue-600 hover:underline mb-4 inline-block\">&larr; Back to admin portal</a>\n    <h1 class=\"din-condensed-bold text-2xl mb-6\">Edit {{ tableFriendlyName }}</h1>\n    <mat-card class=\"edit-card\">\n      <mat-card-content>\n        <hw-composite-row-control\n          [tableName]=\"tableName\"\n          [columnNames]=\"columnNames\"\n          [primaryKeyName]=\"primaryKeyName\"\n          [primaryKeyValue]=\"primaryKeyValue\"\n          [isCreateMode]=\"false\"\n          [returnUrl]=\"returnUrl\"\n          [bindingStack]=\"bindingStack\">\n        </hw-composite-row-control>\n      </mat-card-content>\n    </mat-card>\n  </div>\n}\n", styles: [".edit-page-container{padding:24px;max-width:800px}.edit-card{padding:16px;border:1px solid rgba(0,0,0,.12);box-shadow:0 2px 4px #0000001a}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:16px}.loading-container p{color:#0009}.error-container{display:flex;align-items:center;gap:8px;padding:24px;color:#f44336}.error-container mat-icon{color:#f44336}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CompositeRowControlComponent, selector: "hw-composite-row-control", inputs: ["tableName", "columnNames", "primaryKeyName", "primaryKeyValue", "isCreateMode", "returnUrl", "bindingStack", "formAssist"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableEditPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hw-table-edit-page', standalone: true, imports: [
+                        RouterModule,
+                        MatCardModule,
+                        MatProgressSpinnerModule,
+                        MatIconModule,
+                        CompositeRowControlComponent
+                    ], template: "@if (loading) {\n  <div class=\"loading-container\">\n    <mat-spinner diameter=\"40\"></mat-spinner>\n    <p>Loading...</p>\n  </div>\n}\n@if (!loading && error) {\n  <div class=\"error-container\">\n    <mat-icon>error</mat-icon>\n    <p>{{ error }}</p>\n  </div>\n}\n@if (!loading && !error) {\n  <div class=\"edit-page-container\">\n    <a [routerLink]=\"adminHome\" class=\"din text-sm text-blue-600 hover:underline mb-4 inline-block\">&larr; Back to admin portal</a>\n    <h1 class=\"din-condensed-bold text-2xl mb-6\">Edit {{ tableFriendlyName }}</h1>\n    <mat-card class=\"edit-card\">\n      <mat-card-content>\n        <hw-composite-row-control\n          [tableName]=\"tableName\"\n          [columnNames]=\"columnNames\"\n          [primaryKeyName]=\"primaryKeyName\"\n          [primaryKeyValue]=\"primaryKeyValue\"\n          [isCreateMode]=\"false\"\n          [returnUrl]=\"returnUrl\"\n          [bindingStack]=\"bindingStack\">\n        </hw-composite-row-control>\n      </mat-card-content>\n    </mat-card>\n  </div>\n}\n", styles: [".edit-page-container{padding:24px;max-width:800px}.edit-card{padding:16px;border:1px solid rgba(0,0,0,.12);box-shadow:0 2px 4px #0000001a}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:16px}.loading-container p{color:#0009}.error-container{display:flex;align-items:center;gap:8px;padding:24px;color:#f44336}.error-container mat-icon{color:#f44336}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DatabaseSchemaService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CRUD_EDITOR_ROUTES]
+                }] }] });
+
+class TableNewPageComponent {
+    route;
+    router;
+    dbSchemaService;
+    tableName = '';
+    columnNames = [];
+    tableFriendlyName = '';
+    returnUrl = '';
+    bindingStack = [];
+    formAssist;
+    loading = true;
+    error;
+    adminHome;
+    destroy$ = new Subject();
+    constructor(route, router, dbSchemaService, editorRoutes) {
+        this.route = route;
+        this.router = router;
+        this.dbSchemaService = dbSchemaService;
+        this.adminHome = editorRoutes.adminHome;
+        // Read formAssist from browser history state. Angular's router.navigate({ state })
+        // stores data in the History API. getCurrentNavigation() is unreliable (returns null
+        // for lazy-loaded routes), so we read directly from history.state instead.
+        this.formAssist = history.state?.formAssist;
+    }
+    ngOnInit() {
+        combineLatest([
+            this.route.params,
+            this.route.queryParams,
+            this.dbSchemaService.GetDBSchema()
+        ]).pipe(takeUntil(this.destroy$)).subscribe({
+            next: ([params, queryParams, schema]) => {
+                this.tableName = params['tableName'] || '';
+                this.returnUrl = queryParams['returnUrl'] || '';
+                this.bindingStack = parseBindingStack(queryParams['ctx']);
+                const tableSchema = schema.tables.find(t => t.table_name === this.tableName);
+                if (!tableSchema) {
+                    this.error = `Table "${this.tableName}" not found`;
+                    this.loading = false;
+                    return;
+                }
+                this.tableFriendlyName = tableSchema.table_friendly_name || this.tableName;
+                // Filter out primary key column for create mode (auto-generated)
+                // Handle both boolean true and string "t" from server
+                this.columnNames = tableSchema.columns
+                    .filter(c => c.primary_key !== true && c.primary_key !== 't')
+                    .map(c => c.column_name);
+                this.loading = false;
+            },
+            error: (err) => {
+                this.error = 'Failed to load schema';
+                this.loading = false;
+                console.error('Error loading schema:', err);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableNewPageComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: DatabaseSchemaService }, { token: CRUD_EDITOR_ROUTES }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TableNewPageComponent, isStandalone: true, selector: "hw-table-new-page", ngImport: i0, template: "@if (loading) {\n  <div class=\"loading\">Loading...</div>\n}\n@if (!loading && error) {\n  <div class=\"error\">{{ error }}</div>\n}\n@if (!loading && !error) {\n  <div class=\"new-page-container\">\n    <a [routerLink]=\"adminHome\" class=\"din text-sm text-blue-600 hover:underline mb-4 inline-block\">&larr; Back to admin portal</a>\n    <h1 class=\"din-condensed-bold text-2xl mb-6\">New {{ tableFriendlyName }}</h1>\n    <hw-composite-row-control\n      [tableName]=\"tableName\"\n      [columnNames]=\"columnNames\"\n      [isCreateMode]=\"true\"\n      [returnUrl]=\"returnUrl\"\n      [bindingStack]=\"bindingStack\"\n      [formAssist]=\"formAssist\">\n    </hw-composite-row-control>\n  </div>\n}\n", styles: [".new-page-container{padding:16px}h2{margin-bottom:16px}.loading,.error{padding:16px}.error{color:#f44336}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CompositeRowControlComponent, selector: "hw-composite-row-control", inputs: ["tableName", "columnNames", "primaryKeyName", "primaryKeyValue", "isCreateMode", "returnUrl", "bindingStack", "formAssist"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableNewPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hw-table-new-page', standalone: true, imports: [RouterModule, CompositeRowControlComponent], template: "@if (loading) {\n  <div class=\"loading\">Loading...</div>\n}\n@if (!loading && error) {\n  <div class=\"error\">{{ error }}</div>\n}\n@if (!loading && !error) {\n  <div class=\"new-page-container\">\n    <a [routerLink]=\"adminHome\" class=\"din text-sm text-blue-600 hover:underline mb-4 inline-block\">&larr; Back to admin portal</a>\n    <h1 class=\"din-condensed-bold text-2xl mb-6\">New {{ tableFriendlyName }}</h1>\n    <hw-composite-row-control\n      [tableName]=\"tableName\"\n      [columnNames]=\"columnNames\"\n      [isCreateMode]=\"true\"\n      [returnUrl]=\"returnUrl\"\n      [bindingStack]=\"bindingStack\"\n      [formAssist]=\"formAssist\">\n    </hw-composite-row-control>\n  </div>\n}\n", styles: [".new-page-container{padding:16px}h2{margin-bottom:16px}.loading,.error{padding:16px}.error{color:#f44336}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: DatabaseSchemaService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CRUD_EDITOR_ROUTES]
+                }] }] });
+
+/*
+ * @honuware/ui/crud — the generic table editor: DatabaseSchemaService, the
+ * table-binding utils, the table-view / composite-row containers, the
+ * TableView/Edit/New pages, and the CRUD_EDITOR_ROUTES config token. Sits on
+ * top of foundation + access + auth + controls + photos. Selectors use `hw-`.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CRUD_EDITOR_ROUTES, CompositeRowControlComponent, DEFAULT_CRUD_EDITOR_ROUTES, DatabaseSchemaService, TableEditPageComponent, TableNewPageComponent, TableViewControlComponent, TableViewPageComponent, deriveFilterPairs, parseBindingStack, serializeBindingStack };
+//# sourceMappingURL=honuware-ui-crud.mjs.map