@nauticana/sail 0.7.0 → 0.8.0

package/src/component/security/twofactor_setup.html

@@ -10,7 +10,7 @@
             <mat-label>Confirm your password</mat-label>
             <input matInput type="password" formControlName="password" autocomplete="current-password" required>
           </mat-form-field>
-          <button mat-raised-button class="primary" type="submit" [disabled]="!initForm.valid">Enable 2FA</button>
+          <button matButton="elevated" class="primary" type="submit" [disabled]="!initForm.valid">Enable 2FA</button>
         </form>
       }
       @case ('qr') {
@@ -32,7 +32,7 @@
           </div>
         }
 
-        <button mat-raised-button class="primary" (click)="proceedToVerify()">I've saved my backup codes</button>
+        <button matButton="elevated" class="primary" (click)="proceedToVerify()">I've saved my backup codes</button>
       }
       @case ('verify') {
         <p class="auth-instructions">Enter the 6-digit code from your authenticator app to confirm setup.</p>
@@ -42,7 +42,7 @@
             <input matInput type="text" formControlName="code" maxlength="6" autocomplete="one-time-code" required>
           </mat-form-field>
 
-          <button mat-raised-button class="primary" type="submit" [disabled]="!verifyForm.valid">
+          <button matButton="elevated" class="primary" type="submit" [disabled]="!verifyForm.valid">
             Verify and Enable
           </button>
         </form>
@@ -59,7 +59,7 @@
             <mat-label>Current 6-digit code</mat-label>
             <input matInput type="text" formControlName="code" maxlength="6" autocomplete="one-time-code" required>
           </mat-form-field>
-          <button mat-button class="warn" type="submit" [disabled]="!disableForm.valid">Disable 2FA</button>
+          <button matButton class="warn" type="submit" [disabled]="!disableForm.valid">Disable 2FA</button>
         </form>
       }
     }

package/src/component/security/twofactor_verify.html

@@ -31,7 +31,7 @@
         <div class="auth-error" role="alert">{{ errorMessage() }}</div>
       }
 
-      <button mat-raised-button class="primary" type="submit" [disabled]="!verifyForm.valid">
+      <button matButton="elevated" class="primary" type="submit" [disabled]="!verifyForm.valid">
         Verify
       </button>
     </form>

package/src/component/table/table_detail.html

@@ -2,11 +2,11 @@
 <div class="child-table-header">
     <h3>{{ getCaption() }}</h3>
     @if (canCreate()) {
-        <button mat-raised-button class="accent" (click)="addRecord()">New Record</button>
+        <button matButton="elevated" class="accent" (click)="addRecord()">New Record</button>
     }
     @for (action of getActions(false); track action.action) {
         @if (canExecuteAction(action)) {
-            <button mat-stroked-button type="button"
+            <button matButton="outlined" type="button"
                     [title]="action.caption"
                     (click)="executeAction(action)">
                 @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
@@ -33,13 +33,13 @@
                             @if (isReadOnly(col)) {
                                 {{ record[col] }}
                             } @else {
-                                <dynamic-field [tableName]="tableName" [value]="record[col]" [field]="col" (valueChange)="record[col]=$event" subscriptSizing="dynamic"></dynamic-field>
+                                <dynamic-field [tableName]="tableName()" [value]="record[col]" [field]="col" (valueChange)="record[col]=$event" subscriptSizing="dynamic"></dynamic-field>
                             }
                         </td>
                     }
                     <td>
-                        <button mat-icon-button (click)="saveRow()" title="Save"><mat-icon>save</mat-icon></button>
-                        <button mat-icon-button (click)="cancelRow(record)" title="Cancel"><mat-icon>cancel</mat-icon></button>
+                        <button matIconButton (click)="saveRow()" title="Save"><mat-icon>save</mat-icon></button>
+                        <button matIconButton (click)="cancelRow(record)" title="Cancel"><mat-icon>cancel</mat-icon></button>
                     </td>
                 } @else {
                     @for (col of displayedColumns; track col) {
@@ -47,17 +47,17 @@
                     }
                     <td>
                         @if (canUpdate()) {
-                            <button mat-icon-button (click)="editRow(record)" title="Edit"><mat-icon>edit</mat-icon></button>
+                            <button matIconButton (click)="editRow(record)" title="Edit"><mat-icon>edit</mat-icon></button>
                         }
                         @if (record[config.opField] === 'D') {
-                            <button mat-icon-button (click)="unDeleteRow(record)" title="Undelete"><mat-icon>restore_from_trash</mat-icon></button>
+                            <button matIconButton (click)="unDeleteRow(record)" title="Undelete"><mat-icon>restore_from_trash</mat-icon></button>
                         } @else if (canDelete()) {
-                            <button mat-icon-button (click)="deleteRow(record)" title="Delete"><mat-icon>delete</mat-icon></button>
+                            <button matIconButton (click)="deleteRow(record)" title="Delete"><mat-icon>delete</mat-icon></button>
                         }
                         @if (record[config.opField] !== 'I') {
                             @for (action of getActions(true); track action.action) {
                                 @if (canExecuteAction(action)) {
-                                    <button mat-icon-button type="button"
+                                    <button matIconButton type="button"
                                             [title]="action.caption"
                                             (click)="executeAction(action, record)">
                                         <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>

package/src/component/table/table_detail.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, Input, input, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, effect, inject, input, OnInit, ViewEncapsulation } from "@angular/core";
 import { DynamicField } from "../form/form_field";
 import { MatButtonModule } from "@angular/material/button";
 import { BaseForm } from "../abstract/base_form";
@@ -20,13 +20,14 @@ import { TableAction } from "../../model/appdata";
     ],
 })
 export class TableDetail extends BaseForm implements OnInit {
-    @Input() override tableName = '';
-    @Input() records: any[] = [];
+    readonly tableNameInput = input('', { alias: 'tableName' });
+    readonly recordsInput = input<any[]>([], { alias: 'records' });
     readonly parentTableName = input('');
     readonly parentRecord = input<any>({});
     /** When true, the parent view is in read-only mode — disable all child row editing. */
     readonly parentReadOnly = input(false);
 
+    records: any[] = [];
     editingRecord: any = null;
     originalRecord: any = null;
     displayedColumns: string[] = [];
@@ -35,6 +36,12 @@ export class TableDetail extends BaseForm implements OnInit {
     private readonly dialog = inject(MatDialog);
     private readonly backendService = inject(BackendService);
 
+    constructor() {
+        super();
+        effect(() => { const v = this.tableNameInput(); if (v) this.tableName.set(v); });
+        effect(() => { this.records = this.recordsInput(); });
+    }
+
     /**
      * Fire a TableAction. Per-row actions require the record to be
      * server-side (not 'I' inserted-locally-not-saved); table-level

package/src/component/table/table_edit.html

@@ -9,7 +9,7 @@
         }
     </span>
     @if (isDialog) {
-        <button mat-icon-button type="button" class="table-edit-close"
+        <button matIconButton type="button" class="table-edit-close"
                 (click)="onCancel()" aria-label="Close dialog">
             <mat-icon>close</mat-icon>
         </button>
@@ -20,21 +20,21 @@
     <div class="actions-bar">
         @if (isReadOnlyMode) {
             @if (canUpdate()) {
-                <button mat-raised-button class="primary" (click)="onEdit()">Edit</button>
+                <button matButton="elevated" class="primary" (click)="onEdit()">Edit</button>
             }
             @if (canCreate()) {
-                <button mat-raised-button class="accent" (click)="onNew()">New</button>
+                <button matButton="elevated" class="accent" (click)="onNew()">New</button>
             }
             @if (canDelete()) {
-                <button mat-button class="warn" (click)="onDelete()">Delete</button>
+                <button matButton class="warn" (click)="onDelete()">Delete</button>
             }
         } @else {
-            <button mat-raised-button class="primary" (click)="onSave()">Save</button>
-            <button mat-button (click)="onCancel()">Cancel</button>
+            <button matButton="elevated" class="primary" (click)="onSave()">Save</button>
+            <button matButton (click)="onCancel()">Cancel</button>
         }
     </div>
 
-    <record-form [tableName]="tableName" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></record-form>
+    <record-form [tableName]="tableName()" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></record-form>
 
     @if (tabCount > 0) {
         <mat-tab-group>
@@ -45,7 +45,7 @@
                         <table-detail
                            [records]="editableRecord[key]"
                            [tableName]="getTableName(key)"
-                           [parentTableName]="tableName"
+                           [parentTableName]="tableName()"
                            [parentRecord]="editableRecord"
                            [parentReadOnly]="isReadOnlyMode">
                         </table-detail>

package/src/component/table/table_edit.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, inject, input, OnInit, signal, ViewEncapsulation } from "@angular/core";
 import { BaseForm } from "../abstract/base_form";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { MatTabsModule } from "@angular/material/tabs";
@@ -22,9 +22,11 @@ import { MatIconModule } from "@angular/material/icon";
     ]
 })
 export class TableEdit extends BaseForm implements OnInit {
-    @Input() record: any = {};
-    @Input() override tableName = '';
-    @Input() apiName = '';
+    readonly recordInput = input<any>({}, { alias: 'record' });
+    readonly tableNameInput = input('', { alias: 'tableName' });
+    readonly apiNameInput = input('', { alias: 'apiName' });
+    readonly record = signal<any>({});
+    readonly apiName = signal('');
     isReadOnlyMode = true;
     private readonly backendService = inject(BackendService);
     private readonly dialogRef = inject(MatDialogRef<TableEdit>, {optional: true});
@@ -37,11 +39,18 @@ export class TableEdit extends BaseForm implements OnInit {
     /** Snapshot taken when the user enters edit mode; used for dirty-tracking on save. */
     private originalSnapshot: any = null;
 
+    constructor() {
+        super();
+        effect(() => { const v = this.recordInput();    if (v) this.record.set(v); });
+        effect(() => { const v = this.tableNameInput(); if (v) this.tableName.set(v); });
+        effect(() => { const v = this.apiNameInput();   if (v) this.apiName.set(v); });
+    }
+
     ngOnInit(): void {
         if (this.dialogData) {
-            this.record = this.dialogData.record ?? {};
-            this.tableName = this.dialogData.tableName ?? '';
-            this.apiName = this.dialogData.apiName ?? '';
+            this.record.set(this.dialogData.record ?? {});
+            this.tableName.set(this.dialogData.tableName ?? '');
+            this.apiName.set(this.dialogData.apiName ?? '');
             this.isNew = this.dialogData.isNew ?? false;
             this.isReadOnlyMode = !this.isNew;
         }
@@ -55,7 +64,8 @@ export class TableEdit extends BaseForm implements OnInit {
 
     private initializeNewRecord() {
         this.editableRecord = this.emptyRecord();
-        if (this.record) Object.assign(this.editableRecord, this.record);
+        const rec = this.record();
+        if (rec) Object.assign(this.editableRecord, rec);
     }
 
     private buildTabs() {
@@ -70,16 +80,17 @@ export class TableEdit extends BaseForm implements OnInit {
     }
 
     private fetchFullRecord() {
-        this.editableRecord = {...this.record};
+        const rec = this.record();
+        this.editableRecord = {...rec};
         this.formatRecordTimeStamp(this.editableRecord);
 
-        const filter = this.getKeyFilters(this.record);
+        const filter = this.getKeyFilters(rec);
         if (!filter) {
             console.warn('Key definition could not be found');
             return;
         }
 
-        this.backendService.get<any>(this.apiName, filter).subscribe({
+        this.backendService.get<any>(this.apiName(), filter).subscribe({
             next: (record) => {
                 if (!record) {
                     console.error('failed to read single record from the backend');
@@ -123,7 +134,7 @@ export class TableEdit extends BaseForm implements OnInit {
         if (this.dialogRef) {
             this.dialogRef.close(result);
         } else {
-            this.backendService.post(this.apiName, result).subscribe({
+            this.backendService.post(this.apiName(), result).subscribe({
                 next: () => {
                     this.isReadOnlyMode = true;
                     this.isNew = false;
@@ -139,7 +150,7 @@ export class TableEdit extends BaseForm implements OnInit {
         if (confirm('Are you sure you want to delete this record?')) {
             const result = {...this.editableRecord};
             result[this.config.opField] = 'D';
-            this.backendService.post(this.apiName, result).subscribe({
+            this.backendService.post(this.apiName(), result).subscribe({
                 next: () => {
                     this.isReadOnlyMode = true;
                     this.isReadOnlyBound = this.isReadOnly.bind(this);
@@ -156,7 +167,7 @@ export class TableEdit extends BaseForm implements OnInit {
             return;
         }
         this.isReadOnlyMode = true;
-        this.editableRecord = {...this.record};
+        this.editableRecord = {...this.record()};
         this.isNew = false;
         this.isReadOnlyBound = this.isReadOnly.bind(this);
     }

package/src/component/table/table_list.html

@@ -2,11 +2,11 @@
 
 <div class="table-list__toolbar">
     @if (canCreate()) {
-        <button mat-raised-button class="accent" (click)="addRecord()">New Record</button>
+        <button matButton="elevated" class="accent" (click)="addRecord()">New Record</button>
     }
     @for (action of getActions(false); track action.action) {
         @if (canExecuteAction(action)) {
-            <button mat-stroked-button type="button"
+            <button matButton="outlined" type="button"
                     [title]="action.caption"
                     (click)="executeAction(action)">
                 @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
@@ -37,11 +37,11 @@
             } @else if (column !== 'actions') {
                 {{ displayValue(column, record[column]) }}
             } @else {
-                <button mat-icon-button type="button" (click)="editRecord(record)" title="Edit"><mat-icon>edit</mat-icon></button>
-                <button mat-icon-button type="button" (click)="deleteRecord(record)" title="Delete"><mat-icon>delete</mat-icon></button>
+                <button matIconButton type="button" (click)="editRecord(record)" title="Edit"><mat-icon>edit</mat-icon></button>
+                <button matIconButton type="button" (click)="deleteRecord(record)" title="Delete"><mat-icon>delete</mat-icon></button>
                 @for (action of getActions(true); track action.action) {
                     @if (canExecuteAction(action)) {
-                        <button mat-icon-button type="button"
+                        <button matIconButton type="button"
                                 [title]="action.caption"
                                 (click)="executeAction(action, record)">
                             <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>

package/src/component/table/table_list.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, effect, inject, input, OnInit, ViewEncapsulation } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute, Params } from "@angular/router";
 import { BaseView } from "../abstract/base_view";
@@ -18,17 +18,27 @@ import { MatIconModule } from "@angular/material/icon";
 })
 export class TableList extends BaseView implements OnInit {
     override dialogWidth = '400px';
+    readonly tableNameInput = input('', { alias: 'tableName' });
+    readonly apiNameInput = input('', { alias: 'apiName' });
+    readonly dialogComponentInput = input<any>(undefined, { alias: 'dialogComponent' });
 
     private readonly route = inject(ActivatedRoute);
     private readonly backendService = inject(BackendService);
     private readonly cdr = inject(ChangeDetectorRef);
     private readonly destroyRef = inject(DestroyRef);
 
+    constructor() {
+        super();
+        effect(() => { const v = this.tableNameInput();      if (v) this.tableName.set(v); });
+        effect(() => { const v = this.apiNameInput();        if (v) this.apiName.set(v); });
+        effect(() => { const v = this.dialogComponentInput();if (v) this.dialogComponent.set(v); });
+    }
+
     ngOnInit() {
         const data = this.route.snapshot.data;
-        if (!this.tableName && data['tableName']) this.tableName = data['tableName'];
-        if (!this.apiName && data['apiName']) this.apiName = data['apiName'];
-        if (!this.dialogComponent) this.dialogComponent = data['dialogComponent'] ?? TableEdit;
+        if (!this.tableName() && data['tableName']) this.tableName.set(data['tableName']);
+        if (!this.apiName() && data['apiName']) this.apiName.set(data['apiName']);
+        if (!this.dialogComponent()) this.dialogComponent.set(data['dialogComponent'] ?? TableEdit);
         this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => this.handleQueryParams(params));
     }
 
@@ -39,7 +49,7 @@ export class TableList extends BaseView implements OnInit {
         }
         if (confirm('Are you sure you want to delete this record?')) {
             const keyFilter = this.getKeyFilters(record);
-            this.backendService.delete(this.apiName, keyFilter).subscribe({
+            this.backendService.delete(this.apiName(), keyFilter).subscribe({
                 next: () => this.fetchRecords(),
                 error: (err) => console.error('Delete failed', err),
             });
@@ -56,7 +66,7 @@ export class TableList extends BaseView implements OnInit {
             return;
         }
         if (confirm('Are you sure you want to save this record?')) {
-            this.backendService.post(this.apiName, result).subscribe({
+            this.backendService.post(this.apiName(), result).subscribe({
                 next: () => this.fetchRecords(),
                 error: (err) => console.error('Save failed', err),
             });
@@ -68,7 +78,7 @@ export class TableList extends BaseView implements OnInit {
             alert('Missing authorization to read records');
             return;
         }
-        this.backendService.list<{[key: string]: any}>(this.apiName, this.searchTerms).subscribe({
+        this.backendService.list<{[key: string]: any}>(this.apiName(), this.searchTerms).subscribe({
             next: (records) => {
                 this.records = records;
                 this.updateDisplayedColumns(records);

package/src/component/table/table_lookup.html

@@ -1,9 +1,9 @@
 <h2 mat-dialog-title>{{ getCaption() }} Search</h2>
 <div mat-dialog-content>
-    <record-form [tableName]="tableName" [record]="searchRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></record-form>
+    <record-form [tableName]="tableName()" [record]="searchRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></record-form>
     <div class="search-actions">
-        <button mat-raised-button class="primary" (click)="onSearch()">Search</button>
-        <button mat-button (click)="onClear()">Clear</button>
+        <button matButton="elevated" class="primary" (click)="onSearch()">Search</button>
+        <button matButton (click)="onClear()">Clear</button>
     </div>
     @if (records.length > 0) {
         <table>
@@ -31,5 +31,5 @@
     }
 </div>
 <div mat-dialog-actions>
-    <button mat-button [mat-dialog-close]>Cancel</button>
+    <button matButton [mat-dialog-close]>Cancel</button>
 </div>

package/src/component/table/table_lookup.ts

@@ -22,7 +22,6 @@ import { BackendService } from "../../service/rest_service";
     ],
 })
 export class TableLookup extends BaseView implements OnInit {
-    override apiName = '';
     searchRecord: any = {};
     searchColumns: string[] = [];
 
@@ -33,8 +32,8 @@ export class TableLookup extends BaseView implements OnInit {
 
     ngOnInit() {
         if (this.data) {
-            this.tableName = this.data.tableName ?? '';
-            this.apiName   = this.data.apiName   ?? '';
+            this.tableName.set(this.data.tableName ?? '');
+            this.apiName.set(this.data.apiName   ?? '');
         }
         this.searchColumns = this.getDisplayedColumns();
         this.searchRecord  = this.emptyRecord();
@@ -42,13 +41,14 @@ export class TableLookup extends BaseView implements OnInit {
     }
 
     private resolveApi() {
-        if (!this.apiName && this.tableName) {
+        const tableName = this.tableName();
+        if (!this.apiName() && tableName) {
             this.cacheService.getAppData().subscribe((data) => {
                 if (data.Apis) {
                     for (const api in data.Apis) {
                         const entry = data.Apis[api];
-                        if (entry.Table.TableName === this.tableName) {
-                            this.apiName = entry.Version ? entry.Version + '/' + api : api;
+                        if (entry.Table.TableName === tableName) {
+                            this.apiName.set(entry.Version ? entry.Version + '/' + api : api);
                             break;
                         }
                     }
@@ -59,11 +59,12 @@ export class TableLookup extends BaseView implements OnInit {
 
     onSearch() {
         this.resolveApi();
-        if (!this.apiName) {
-            console.error('API name not found for table ' + this.tableName);
+        const apiName = this.apiName();
+        if (!apiName) {
+            console.error('API name not found for table ' + this.tableName());
             return;
         }
-        this.backendService.list<{[key: string]: any}>(this.apiName, this.buildSearchTerms(this.searchRecord)).subscribe({
+        this.backendService.list<{[key: string]: any}>(apiName, this.buildSearchTerms(this.searchRecord)).subscribe({
             next: (records) => {
                 this.records = records;
                 this.updateDisplayedColumns(records);

package/src/component/table/table_report.html

@@ -27,7 +27,7 @@
                 </mat-form-field>
             }
         }
-        <button mat-raised-button color="primary" type="submit">Run</button>
+        <button matButton="elevated" class="primary" type="submit">Run</button>
     </form>
 }
 

package/src/component/table/table_search.html

@@ -6,17 +6,17 @@
     }
 </h1>
 <div class="page-container">
-    <record-form [tableName]="tableName" [record]="editableRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></record-form>
+    <record-form [tableName]="tableName()" [record]="editableRecord" [fields]="searchColumns" [isReadOnly]="isReadOnlyBound"></record-form>
 </div>
 <div class="search-actions">
-    <button mat-raised-button class="primary" (click)="onSearch()">Search</button>
-    <button mat-button (click)="onClear()">Clear</button>
+    <button matButton="elevated" class="primary" (click)="onSearch()">Search</button>
+    <button matButton (click)="onClear()">Clear</button>
     @if (canCreate()) {
-        <button mat-raised-button class="accent" (click)="onAddRecord()">New Record</button>
+        <button matButton="elevated" class="accent" (click)="onAddRecord()">New Record</button>
     }
     @for (action of getActions(false); track action.action) {
         @if (canExecuteAction(action)) {
-            <button mat-stroked-button type="button"
+            <button matButton="outlined" type="button"
                     [title]="action.caption"
                     (click)="executeAction(action)">
                 @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }

package/src/component/table/table_search.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, inject, input, OnInit, signal, ViewEncapsulation } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -20,11 +20,20 @@ import { BackendService } from "../../service/rest_service";
     ],
 })
 export class TableSearch extends BaseForm implements OnInit {
-    @Input() override tableName = '';
-    @Input() apiName: string = '';
-    @Input() targetRoute: string = '';
+    readonly tableNameInput = input('', { alias: 'tableName' });
+    readonly apiNameInput = input('', { alias: 'apiName' });
+    readonly targetRouteInput = input('', { alias: 'targetRoute' });
+    readonly apiName = signal('');
+    readonly targetRoute = signal('');
     searchColumns: string[] = [];
 
+    constructor() {
+        super();
+        effect(() => { const v = this.tableNameInput();  if (v) this.tableName.set(v); });
+        effect(() => { const v = this.apiNameInput();    if (v) this.apiName.set(v); });
+        effect(() => { const v = this.targetRouteInput();if (v) this.targetRoute.set(v); });
+    }
+
     private readonly router = inject(Router);
     private readonly route = inject(ActivatedRoute);
     private readonly cdr = inject(ChangeDetectorRef);
@@ -52,21 +61,23 @@ export class TableSearch extends BaseForm implements OnInit {
 
     ngOnInit() {
         const data = this.route.snapshot.data;
-        if (!this.tableName && data['tableName']) this.tableName = data['tableName'];
-        if (!this.apiName && data['apiName']) this.apiName = data['apiName'];
-        if (!this.targetRoute && data['targetRoute']) this.targetRoute = data['targetRoute'];
+        if (!this.tableName() && data['tableName']) this.tableName.set(data['tableName']);
+        if (!this.apiName() && data['apiName']) this.apiName.set(data['apiName']);
+        if (!this.targetRoute() && data['targetRoute']) this.targetRoute.set(data['targetRoute']);
         this.title = this.getCaption() + ' Search';
-        if (!this.targetRoute && (this.apiName || this.tableName)) {
+        if (!this.targetRoute() && (this.apiName() || this.tableName())) {
             this.cacheService.getMenus().subscribe((menus: ApplicationMenu[]) => {
+                const apiName = this.apiName();
+                const tableName = this.tableName();
                 for (const menu of menus) {
                     for (const page of menu.ApplicationMenuItems!) {
-                        if (this.apiName.endsWith(page.RestUri!) ||
-                            (this.tableName && page.RestUri!.includes(this.tableName))
+                        if (apiName.endsWith(page.RestUri!) ||
+                            (tableName && page.RestUri!.includes(tableName))
                         ) {
                             if (page.FilterOnList) {
-                                this.targetRoute = '/' + menu.Id!.toLowerCase() + '/' + page.ItemId!;
+                                this.targetRoute.set('/' + menu.Id!.toLowerCase() + '/' + page.ItemId!);
                             } else {
-                                this.targetRoute = '/' + menu.Id!.toLowerCase() + '/' + page.ItemId! + '/list';
+                                this.targetRoute.set('/' + menu.Id!.toLowerCase() + '/' + page.ItemId! + '/list');
                             }
                             this.cdr.markForCheck();
                             return;
@@ -80,11 +91,12 @@ export class TableSearch extends BaseForm implements OnInit {
     }
 
     onSearch() {
-        if (!this.targetRoute) {
+        const targetRoute = this.targetRoute();
+        if (!targetRoute) {
             alert('Navigation target not found for this table');
             return;
         }
-        this.router.navigate([this.targetRoute], {queryParams: this.buildSearchTerms(this.editableRecord)});
+        this.router.navigate([targetRoute], {queryParams: this.buildSearchTerms(this.editableRecord)});
     }
 
     onClear() {
@@ -106,7 +118,7 @@ export class TableSearch extends BaseForm implements OnInit {
      */
     private emptySearchRecord(): any {
         const rec = this.emptyRecord();
-        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const tableDef = this.cacheService.getTableDefinition(this.tableName());
         if (tableDef?.Columns) {
             for (const col of tableDef.Columns) {
                 if (col.DataType === 'boolean') {
@@ -122,10 +134,11 @@ export class TableSearch extends BaseForm implements OnInit {
             alert('Missing authorization to create records');
             return;
         }
-        if (!this.targetRoute) {
+        const targetRoute = this.targetRoute();
+        if (!targetRoute) {
             alert('Navigation target not found for this table');
             return;
         }
-        this.router.navigate([this.targetRoute], {queryParams: {'_action': 'create'}});
+        this.router.navigate([targetRoute], {queryParams: {'_action': 'create'}});
     }
 }