@nauticana/sail 1.1.8 → 1.1.10

package/src/component/abstract/base_view.ts

@@ -1,39 +1,49 @@
-import { Directive, inject, signal, WritableSignal } from "@angular/core";
+import { computed, Directive, inject, signal, Type, WritableSignal } from "@angular/core";
 import { BaseTable } from "./base_table";
 import { MatDialog } from "@angular/material/dialog";
 
+/** Read-only listing surface; complete as-is (TableLookup). Editing views extend AbstractEditableView. */
 @Directive()
 export abstract class BaseView extends BaseTable {
-    protected readonly dialog = inject(MatDialog);
     readonly apiName: WritableSignal<string> = signal('');
-    readonly dialogComponent: WritableSignal<any> = signal(undefined);
-    records: Array<{[key: string]: any}> = [];
-    displayedColumns: string[] = [];
-    searchTerms: {[key: string]: string} = {};
-    protected hasLinkPermission = false;
+    readonly records = signal<Record<string, unknown>[]>([]);
+    readonly displayedColumns = signal<string[]>([]);
+    readonly searchTerms = signal<{[key: string]: string}>({});
+    /** Last load/save failure shown by the view's template ('' when none). */
+    readonly viewError = signal('');
 
-    protected abstract handleDelete(record: {[key: string]: any}): void;
+    protected readonly hasLinkPermission = computed(() => this.canUpdate() || this.canRead());
 
-    protected abstract handleUpdate(result: {[key: string]: any}, isNew: boolean, original: {[key: string]: any}): void;
+    /** Whether an "actions" column is appended for privileged users; lookup views return false. */
+    protected includeActionsColumn(): boolean {
+        return true;
+    }
 
-    updateDisplayedColumns(record: Array<{[key: string]: any}>) {
-        this.displayedColumns = this.getDisplayedColumns(record);
-        if (this.displayedColumns.length > 0 &&
-            !this.displayedColumns.includes('actions') &&
+    updateDisplayedColumns(records: Record<string, unknown>[]) {
+        const columns = this.getDisplayedColumns(records);
+        if (columns.length > 0 &&
+            this.includeActionsColumn() &&
+            !columns.includes('actions') &&
             (this.canUpdate() || this.canDelete())
-        ) this.displayedColumns.push('actions');
-        this.hasLinkPermission = this.canUpdate() || this.canRead();
+        ) columns.push('actions');
+        this.displayedColumns.set(columns);
     }
 
     isLinkColumn(column: string): boolean {
-        return (this.displayedColumns.length > 0 && this.displayedColumns[0] === column && this.hasLinkPermission);
+        const columns = this.displayedColumns();
+        return (columns.length > 0 && columns[0] === column && this.hasLinkPermission());
     }
+}
 
-    trackByRecord(index: number, record: {[key: string]: any}): any {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName());
-        if (!tableDef || !tableDef.Keys || tableDef.Keys.length === 0) return index;
-        return tableDef.Keys.map((key) => record[key.PascalName]).join('_');
-    }
+/** Listing surface with dialog-based create/edit/delete; subclasses implement persistence. */
+@Directive()
+export abstract class AbstractEditableView extends BaseView {
+    protected readonly dialog = inject(MatDialog);
+    readonly dialogComponent: WritableSignal<Type<unknown> | undefined> = signal(undefined);
+
+    protected abstract handleDelete(record: Record<string, unknown>): void;
+
+    protected abstract handleUpdate(result: Record<string, unknown>, isNew: boolean, original: Record<string, unknown>): void;
 
     /**
      * Shared row-dialog opener. Builds the dialog data and wires the result
@@ -41,12 +51,17 @@ export abstract class BaseView extends BaseTable {
      * `addRecord()` (new row + empty `original`) and `editRecord()` (existing
      * row passed through verbatim).
      */
-    private openRecordDialog(record: {[key: string]: any}, isNew: boolean): void {
+    private openRecordDialog(record: Record<string, unknown>, isNew: boolean): void {
+        const component = this.dialogComponent();
+        if (!component) {
+            console.error('sail: no dialogComponent configured for', this.tableName());
+            return;
+        }
         const dialogData = this.getDialogData(record, isNew);
         const apiName = this.apiName();
         if (apiName) dialogData['apiName'] = apiName;
 
-        this.dialog.open(this.dialogComponent(), {
+        this.dialog.open(component, {
             width: '90vw',
             maxWidth: '1200px',
             maxHeight: '90vh',
@@ -62,8 +77,9 @@ export abstract class BaseView extends BaseTable {
         const record = this.emptyRecord();
         // Seed columns from an existing row when emptyRecord() returned just the
         // op-code field (table metadata wasn't loaded yet).
-        if (Object.keys(record).length === 1 && this.records.length > 0) {
-            Object.keys(this.records[0]).forEach((key) => { record[key] = ''; });
+        const rows = this.records();
+        if (Object.keys(record).length === 1 && rows.length > 0) {
+            Object.keys(rows[0]).forEach((key) => { record[key] = ''; });
         }
         this.openRecordDialog(record, true);
     }
@@ -75,12 +91,12 @@ export abstract class BaseView extends BaseTable {
      * buttons are gated by the same permissions.
      * Block only when neither read nor update is granted.
      */
-    editRecord(record: {[key: string]: any}) {
+    editRecord(record: Record<string, unknown>) {
         if (!this.canUpdate() && !this.requireAuth(() => this.canRead(), 'view')) return;
         this.openRecordDialog(record, false);
     }
 
-    deleteRecord(record: {[key: string]: any}) {
+    deleteRecord(record: Record<string, unknown>) {
         if (!this.requireAuth(() => this.canDelete(), 'delete')) return;
         this.handleDelete(record);
     }

package/src/component/account/profile_editor.ts

@@ -96,7 +96,7 @@ export class ProfileEditorComponent implements OnInit {
     this.loading.set(true);
     this.emailErr.set('');
     this.auth.confirmEmailChange(this.newEmail.value!, Number(this.emailCode.value)).subscribe({
-      next: () => { this.loading.set(false); this.email.set(this.newEmail.value!); this.cancelEmailChange(); this.profileMsg.set('Email updated.'); },
+      next: () => { this.loading.set(false); this.email.set(this.newEmail.value!); this.cancelEmailChange(); this.emailMsg.set('Email updated.'); },
       error: (e) => { this.loading.set(false); this.emailErr.set(this.msg(e, 'Invalid or expired code.')); },
     });
   }
@@ -128,7 +128,7 @@ export class ProfileEditorComponent implements OnInit {
     this.loading.set(true);
     this.phoneErr.set('');
     this.auth.confirmPhoneChange(this.newPhone.value!, Number(this.phoneCode.value)).subscribe({
-      next: () => { this.loading.set(false); this.phone.set(this.newPhone.value!); this.cancelPhoneChange(); this.profileMsg.set('Phone updated.'); },
+      next: () => { this.loading.set(false); this.phone.set(this.newPhone.value!); this.cancelPhoneChange(); this.phoneMsg.set('Phone updated.'); },
       error: (e) => { this.loading.set(false); this.phoneErr.set(this.msg(e, 'Invalid or expired code.')); },
     });
   }

package/src/component/billing/payment_methods.ts

@@ -7,8 +7,7 @@ import { PaymentMethod } from '../../model/appdata';
 
 /**
  * Lists the partner's saved payment methods. Inherits loading/error state
- * from BaseAsyncView. The "Manage in Stripe" button is a placeholder — pass
- * `[portalUrl]` to show it; otherwise the button is hidden.
+ * from BaseAsync. Pair with `<sail-portal-button>` for provider-side management.
  */
 @Component({
   selector: 'sail-payment-methods',

package/src/component/billing/price_selector.html

@@ -1,9 +1,10 @@
-<div class="price-selector" role="radiogroup" aria-label="Billing options">
+<div class="price-selector" role="radiogroup" aria-label="Billing options" (keydown)="onKeydown($event)">
   @for (offer of offers(); track offer.key) {
     <button class="price-offer" type="button"
             role="radio"
             [class.price-selected]="offer.key === selected()"
             [attr.aria-checked]="offer.key === selected()"
+            [attr.tabindex]="tabIndexFor(offer, $index)"
             (click)="onSelect(offer)">
       <span class="price-amount">{{ offer.amountText }}</span>
       <span class="price-cycle">/ {{ offer.cycleText }}</span>

package/src/component/billing/price_selector.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, output } from '@angular/core';
 import { PlanPrice } from '../../model/appdata';
-import { formatCurrency } from '../../util/money';
+import { formatCurrency, PERIOD_TYPE_INFO } from '../../util/money';
 
 /** Per-offer view model for accessible, currency-formatted rendering. */
 interface OfferRow {
@@ -27,14 +27,6 @@ interface OfferRow {
   encapsulation: ViewEncapsulation.None,
 })
 export class PriceSelectorComponent {
-  private static readonly DEFAULT_CYCLE: Record<string, string> = {
-    D: 'Daily',
-    W: 'Weekly',
-    M: 'Monthly',
-    Q: 'Quarterly',
-    A: 'Annual',
-  };
-
   readonly prices = input<PlanPrice[]>([]);
   /** Selected offer key — a `priceId`, or the composite key when priceId is empty. */
   readonly selected = input<string | undefined>(undefined);
@@ -45,7 +37,9 @@ export class PriceSelectorComponent {
   readonly offers = computed<OfferRow[]>(() => {
     const labels = this.cycleLabels();
     const cycleLabel = (code: string) =>
-      labels[code] ?? PriceSelectorComponent.DEFAULT_CYCLE[code] ?? code;
+      labels[code] ?? PERIOD_TYPE_INFO[code]?.label ?? code;
+    const termNoun = (code: string) =>
+      PERIOD_TYPE_INFO[code]?.noun ?? cycleLabel(code).toLowerCase();
     return this.prices().map((p) => {
       const singleCycle = p.termCount === 1 && p.termType === p.billingCycle;
       return {
@@ -53,9 +47,7 @@ export class PriceSelectorComponent {
         price:      p,
         amountText: formatCurrency(p.amount, p.currency),
         cycleText:  cycleLabel(p.billingCycle),
-        termText:   singleCycle
-          ? ''
-          : `${p.termCount} ${cycleLabel(p.termType)}${p.termCount > 1 ? 's' : ''} commitment`,
+        termText:   singleCycle ? '' : `${p.termCount}-${termNoun(p.termType)} commitment`,
       };
     });
   });
@@ -63,4 +55,27 @@ export class PriceSelectorComponent {
   onSelect(offer: OfferRow): void {
     this.selectionChange.emit(offer.price);
   }
+
+  /** Roving-radio tabindex: the selected offer (or the first) is the tab stop. */
+  tabIndexFor(offer: OfferRow, index: number): number {
+    const sel = this.selected();
+    if (sel) return offer.key === sel ? 0 : -1;
+    return index === 0 ? 0 : -1;
+  }
+
+  /** Arrow-key navigation required by the radio pattern (WCAG 4.1.2). */
+  onKeydown(event: KeyboardEvent): void {
+    const forward = event.key === 'ArrowRight' || event.key === 'ArrowDown';
+    const backward = event.key === 'ArrowLeft' || event.key === 'ArrowUp';
+    if (!forward && !backward) return;
+    event.preventDefault();
+    const group = event.currentTarget as HTMLElement;
+    const buttons = Array.from(group.querySelectorAll<HTMLButtonElement>('[role="radio"]'));
+    if (!buttons.length) return;
+    const current = buttons.indexOf(event.target as HTMLButtonElement);
+    const next = (current + (forward ? 1 : -1) + buttons.length) % buttons.length;
+    buttons[next].focus();
+    const offer = this.offers()[next];
+    if (offer) this.onSelect(offer);
+  }
 }

package/src/component/billing/trial_banner.ts

@@ -1,4 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map, timer } from 'rxjs';
 
 /**
  * "Trial ends in N days" banner, bound to `Subscription.trialEnd`. Renders
@@ -15,12 +17,16 @@ export class TrialBannerComponent {
   /** ISO timestamp the trial ends (Subscription.trialEnd). */
   readonly trialEnd = input<string | undefined>(undefined);
 
+  // Hourly clock tick — a computed reading Date.now() directly would freeze
+  // at mount time and show a stale day count across midnight.
+  private readonly now = toSignal(timer(0, 3_600_000).pipe(map(() => Date.now())), { requireSync: true });
+
   readonly daysLeft = computed<number>(() => {
     const raw = this.trialEnd();
     if (!raw) return 0;
     const end = Date.parse(raw);
     if (Number.isNaN(end)) return 0;
-    return Math.ceil((end - Date.now()) / 86_400_000);
+    return Math.ceil((end - this.now()) / 86_400_000);
   });
 
   readonly message = computed<string>(() => {

package/src/component/billing/usage_meter.ts

@@ -34,9 +34,9 @@ export class UsageMeterComponent {
       return {
         resource:  m.resource,
         hasBar,
-        percent:   hasBar ? Math.min(100, Math.round((m.used / m.limit) * 100)) : 0,
+        percent:   hasBar ? Math.min(100, Math.max(0, Math.round((m.used / m.limit) * 100))) : 0,
         ariaMax:   m.limit,
-        ariaNow:   hasBar ? Math.min(m.used, m.limit) : m.used,
+        ariaNow:   hasBar ? Math.min(Math.max(0, m.used), m.limit) : m.used,
         valueText: `${m.used} / ${m.limit < 0 ? 'Unlimited' : m.limit}`,
       };
     }),

package/src/component/dashboard/data_card.html

@@ -3,7 +3,7 @@
 
   @switch (state()) {
     @case ('loading') {
-      <div class="data-card-loading"><mat-spinner diameter="28"></mat-spinner></div>
+      <div class="data-card-loading"><mat-spinner diameter="28" [attr.aria-label]="(heading() || 'Card') + ' loading'"></mat-spinner></div>
     }
     @case ('ready') {
       <p class="sr-only">{{ description() }}</p>

package/src/component/dashboard/entity_selector.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, effect, input, output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, input, linkedSignal } from '@angular/core';
+import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { EntityOption } from '../../model/dashboard';
@@ -19,32 +20,29 @@ export class EntitySelectorComponent {
   readonly entities = input<EntityOption[]>([]);
   readonly selected = input<string | undefined>(undefined);
   readonly label = input<string>('Business');
-  readonly selectionChange = output<string | undefined>();
 
-  readonly value = signal<string | undefined>(undefined);
+  /**
+   * Re-resolves only when the INPUTS change (a user pick via `.set()` sticks —
+   * an unchanged `[selected]` binding can never snap the selection back):
+   * a newly-changed valid `selected` wins, else the current pick if still
+   * valid, else the first active entity, else undefined (host clears stale data).
+   */
+  readonly value = linkedSignal<{ opts: EntityOption[]; sel?: string }, string | undefined>({
+    source: () => ({ opts: this.entities(), sel: this.selected() }),
+    computation: (src, prev) => {
+      const isActive = (id?: string) => !!id && src.opts.some((e) => e.id === id && e.active !== false);
+      const selChanged = src.sel !== prev?.source.sel;
+      if (selChanged && isActive(src.sel)) return src.sel;
+      if (isActive(prev?.value)) return prev?.value;
+      if (isActive(src.sel)) return src.sel;
+      return src.opts.find((e) => e.active !== false)?.id;
+    },
+  });
 
-  constructor() {
-    // Explicit selection wins; else keep the current pick if still valid; else the
-    // first active entity. "Valid" means present AND active, so a scope that goes
-    // inactive (or vanishes) is dropped. Emit on every change, including a clear
-    // (undefined) when no active option remains, so the host stops showing stale data.
-    effect(() => {
-      const opts = this.entities();
-      const isActive = (id?: string) => !!id && opts.some((e) => e.id === id && e.active !== false);
-      const cur = this.value();
-      const resolved =
-        isActive(this.selected()) ? this.selected()
-          : isActive(cur) ? cur
-            : opts.find((e) => e.active !== false)?.id;
-      if (resolved !== cur) {
-        this.value.set(resolved);
-        this.selectionChange.emit(resolved);
-      }
-    });
-  }
+  // Single emission path — signals already dedupe unchanged values.
+  readonly selectionChange = outputFromObservable(toObservable(this.value));
 
   onChange(id: string): void {
     this.value.set(id);
-    this.selectionChange.emit(id);
   }
 }

package/src/component/form/form_field.html

@@ -1,8 +1,9 @@
 @if (isLookupTableSearch()) {
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
-        <input matInput [value]="isReadonly ? displayCaption : value()" [required]="required" [readonly]="isReadonly">
-        <button matIconButton matSuffix (click)="openLookup()" [disabled]="isReadonly">
+        <input matInput [value]="isReadonly ? displayCaption : inputValue" [required]="required" readonly>
+        <button matIconButton matSuffix type="button" (click)="openLookup()" [disabled]="isReadonly"
+                [attr.aria-label]="'Look up ' + colCaption(field())">
             <mat-icon>search</mat-icon>
         </button>
     </mat-form-field>
@@ -14,7 +15,7 @@
 } @else if (inputType === 'select') {
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
-        <mat-select [value]="value()" (selectionChange)="onSelectChange($event);">
+        <mat-select [value]="value()" [required]="required" (selectionChange)="onSelectChange($event);">
             @for (option of options; track option.Value) {
                 <mat-option [value]="option.Value">{{option.Caption}}</mat-option>
             }
@@ -31,7 +32,7 @@
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
         <textarea matInput
-         [value]="value()"
+         [value]="inputValue"
          (input)="onInputChange($event);"
          [disabled]="isReadonly"
          [required]="required"
@@ -44,7 +45,7 @@
         <mat-label>{{ colCaption(field()) }}</mat-label>
         <input matInput
          [type]="inputType"
-         [value]="value()"
+         [value]="inputValue"
          (input)="onInputChange($event);"
          [disabled]="isReadonly"
          [required]="required"

package/src/component/form/form_field.ts

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, inject, input, linkedSignal, output, ViewEncapsulation } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
-import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatCheckboxChange, MatCheckboxModule } from "@angular/material/checkbox";
 import { MatDialog } from "@angular/material/dialog";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatIconModule } from "@angular/material/icon";
 import { MatInputModule } from "@angular/material/input";
-import { MatSelectModule } from "@angular/material/select";
+import { MatSelectChange, MatSelectModule } from "@angular/material/select";
 import { BaseTable } from "../abstract/base_table";
 import { ConstantValue, LookupStyle } from "../../model/common";
 import { TableLookup } from "../table/table_lookup";
@@ -32,9 +32,9 @@ import { TableLookup } from "../table/table_lookup";
 })
 export class DynamicField extends BaseTable {
     readonly tableNameInput = input('', { alias: 'tableName' });
-    readonly value = input<any>(undefined);
-    readonly valueChange = output<any>();
-    readonly recordUpdate = output<{[key: string]: any}>();
+    readonly value = input<unknown>(undefined);
+    readonly valueChange = output<unknown>();
+    readonly recordUpdate = output<{[key: string]: unknown}>();
     readonly field = input('');
     readonly label = input('');
     readonly readonlyField = input(false, {alias: 'readonly'});
@@ -103,9 +103,17 @@ export class DynamicField extends BaseTable {
         return !!(this.col && this.col.LookupTable && this.col.LookupStyle === LookupStyle.Search);
     }
 
-    get maxLength() {
-        if (!this.col) return 0;
-        return this.col.Size;
+    /** null when metadata is missing/zero — [attr.maxLength] then omits the
+     * attribute (maxlength="0" would block all typing). */
+    get maxLength(): number | null {
+        const size = this.col?.Size ?? 0;
+        return size > 0 ? size : null;
+    }
+
+    /** Input-safe string form of the bound value. */
+    get inputValue(): string {
+        const v = this.value();
+        return v === null || v === undefined ? '' : String(v);
     }
 
     get scale() {
@@ -132,27 +140,37 @@ export class DynamicField extends BaseTable {
         return this.displayValue(this.field(), this.value());
     }
 
-    onInputChange(event: any) {
-        if (event && event.target) this.valueChange.emit(event.target.value);
+    onInputChange(event: Event) {
+        const target = event.target as HTMLInputElement | HTMLTextAreaElement | null;
+        if (target) this.valueChange.emit(this.coerce(target.value));
     }
 
-    onSelectChange(event: any) {
-        if (event) this.valueChange.emit(event.value);
+    /** Numeric columns emit numbers, not the input's raw string. */
+    private coerce(raw: string): unknown {
+        if (raw !== '' && this.isNumber(this.field())) {
+            const n = Number(raw);
+            if (!isNaN(n)) return n;
+        }
+        return raw;
     }
 
-    onCheckboxChange(event: any) {
-        if (event) this.valueChange.emit(event.checked);
+    onSelectChange(event: MatSelectChange) {
+        this.valueChange.emit(event.value);
     }
 
-    updateForeignKeys(parentRecord: any) {
+    onCheckboxChange(event: MatCheckboxChange) {
+        this.valueChange.emit(event.checked);
+    }
+
+    updateForeignKeys(parentRecord: Record<string, unknown>) {
         if (!this.col || !this.col.LookupTable) return;
         const fk = this.getForeignKeyConfig(this.col.LookupTable);
-        const updates: {[key: string]: any} = {};
-        if (fk && fk.fk) {
-            fk.fk.Columns.forEach((column, index) => {
-                updates[column.PascalName] = parentRecord[fk.parent.Keys[index].PascalName];
-            });
-        }
+        // No FK config → nothing to map; emitting would wipe the current value.
+        if (!fk?.fk || fk.fk.Columns.length !== fk.parent.Keys.length) return;
+        const updates: {[key: string]: unknown} = {};
+        fk.fk.Columns.forEach((column, index) => {
+            updates[column.PascalName] = parentRecord[fk.parent.Keys[index].PascalName];
+        });
         this.recordUpdate.emit(updates);
         this.valueChange.emit(updates[this.field()]);
     }

package/src/component/form/form_record.html

@@ -1,10 +1,10 @@
 <div class="form-container">
     @for (key of computedFields(); track key) {
-        @if (!isArray(record()[key])) {
+        @if (!isArray(working()[key])) {
             <sail-dynamic-field
              [tableName]="tableName()"
-             [value]="record()[key]"
-             (valueChange)="record()[key]=$event"
+             [value]="working()[key]"
+             (valueChange)="onFieldChange(key, $event)"
              (recordUpdate)="onRecordUpdate($event)"
              [field]="key"
              [readonly]="isReadOnly()(key)">

package/src/component/form/form_record.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input, linkedSignal, output, ViewEncapsulation } from "@angular/core";
 import { DynamicField } from "./form_field";
 import { BaseAuthService } from "../../service/auth.service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
@@ -13,10 +13,15 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
 export class RecordForm {
     private readonly auth = inject(BaseAuthService);
     private readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
-    readonly record = input<{[key: string]: any}>({});
+    readonly record = input<{[key: string]: unknown}>({});
     readonly tableName = input('');
     readonly fields = input<string[]>([]);
     readonly isReadOnly = input<(key: string) => boolean>(() => false);
+    /** Full updated record on every field edit. The input object is never mutated. */
+    readonly recordChange = output<{[key: string]: unknown}>();
+
+    /** Local working copy — resets whenever the parent binds a new record object. */
+    readonly working = linkedSignal(() => ({...this.record()}));
 
     private get hiddenFields(): Set<string> {
         const global = this.guiConfig.hiddenFields;
@@ -31,12 +36,12 @@ export class RecordForm {
             return f.filter(key => !hidden.has(key));
         }
         const tableDef = this.auth.getTableDefinition(this.tableName());
-        const recordKeys = new Set(Object.keys(this.record()));
+        const record = this.working();
+        const recordKeys = new Set(Object.keys(record));
         const editableTimestamps = new Set(
             this.guiConfig.tableOverrides?.[this.tableName()]?.editableTimestamps ?? []
         );
         if (tableDef && tableDef.Columns && tableDef.Columns.length > 0) {
-            const record = this.record();
             return tableDef.Columns
                 .filter(col => !(col.HasDefault && col.DataType === 'timestamp'
                                  && !editableTimestamps.has(col.PascalName)))
@@ -55,15 +60,25 @@ export class RecordForm {
         return [...recordKeys].filter(key => !hidden.has(key));
     });
 
-    isArray(value: any): boolean {
+    isArray(value: unknown): boolean {
         return Array.isArray(value);
     }
 
-    private isEmpty(value: any): boolean {
+    private isEmpty(value: unknown): boolean {
         return value === null || value === undefined || value === '';
     }
 
-    onRecordUpdate(updates: {[key: string]: any}) {
-        Object.assign(this.record(), updates);
+    onFieldChange(key: string, value: unknown) {
+        this.applyUpdates({[key]: value});
+    }
+
+    onRecordUpdate(updates: {[key: string]: unknown}) {
+        this.applyUpdates(updates);
+    }
+
+    private applyUpdates(updates: {[key: string]: unknown}) {
+        const updated = {...this.working(), ...updates};
+        this.working.set(updated);
+        this.recordChange.emit(updated);
     }
 }

package/src/component/form/form_table.html

@@ -1,6 +1,6 @@
 <h1 mat-dialog-title class="table-form-title">
     <span class="table-form-title-text">
-        @if (isNew) {
+        @if (isNew()) {
             New {{ getCaption() }} Record
         } @else {
             {{ getCaption() }} Details
@@ -11,7 +11,7 @@
     </button>
 </h1>
 <div mat-dialog-content>
-    <sail-record-form [tableName]="tableName()" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></sail-record-form>
+    <sail-record-form [tableName]="tableName()" [record]="editableRecord()" (recordChange)="editableRecord.set($event)" [isReadOnly]="isReadOnlyFn"></sail-record-form>
 </div>
 <div mat-dialog-actions align="end">
     <button matButton="elevated" class="primary" type="submit" (click)="onSave()">Save</button>

package/src/component/form/form_table.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, signal, ViewEncapsulation } from "@angular/core";
 import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from "@angular/material/dialog";
 import { BaseForm } from "../abstract/base_form";
 import { RecordForm } from "./form_record";
@@ -6,7 +6,7 @@ import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
 
 interface TableFormDialogData {
-    record: {[key: string]: any};
+    record: {[key: string]: unknown};
     tableName: string;
     isNew?: boolean;
     readOnlyColumns?: string[];
@@ -28,6 +28,7 @@ interface TableFormDialogData {
     ]
 })
 export class TableForm extends BaseForm {
+    override readonly tableName = signal('');
     dialogRef = inject(MatDialogRef<TableForm>);
     data = inject<TableFormDialogData>(MAT_DIALOG_DATA);
 
@@ -35,9 +36,9 @@ export class TableForm extends BaseForm {
 
     constructor() {
         super();
-        this.editableRecord = {...this.data.record};
+        this.editableRecord.set({...this.data.record});
         this.tableName.set(this.data.tableName);
-        this.isNew = !!this.data.isNew;
+        this.isNew.set(!!this.data.isNew);
         this.readOnlyColumns = this.data.readOnlyColumns ?? [];
     }
 
@@ -47,7 +48,7 @@ export class TableForm extends BaseForm {
     }
 
     onSave(): void {
-        const result = {...this.editableRecord};
+        const result = {...this.editableRecord()};
         this.readyToSave(result);
         this.dialogRef.close(result);
     }