@nauticana/sail 1.1.43 → 1.1.45

package/src/component/payout/bank_info_form.html

@@ -13,12 +13,14 @@
           <mat-option [value]="c.Id">{{ c.Caption }} ({{ c.Currency }})</mat-option>
         }
       </mat-select>
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
     <p class="hint">Sets your payout currency</p>
 
     <mat-form-field appearance="outline" class="full-width">
       <mat-label>Account holder name</mat-label>
       <input matInput formControlName="accountHolderName">
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
     <p class="hint">Legal name on the bank account (must match government ID)</p>
 
@@ -29,17 +31,20 @@
           <mat-option [value]="t.code">{{ t.caption }}</mat-option>
         }
       </mat-select>
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
 
     <mat-form-field appearance="outline" class="full-width">
       <mat-label>Tax ID</mat-label>
       <input matInput formControlName="taxId">
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
     <p class="hint">Shared with the tax authority for annual reporting</p>
 
     <mat-form-field appearance="outline" class="full-width">
       <mat-label>Billing address</mat-label>
       <input matInput formControlName="billingAddress">
+      <mat-error sailFieldError></mat-error>
     </mat-form-field>
     <p class="hint">Business or home address — used for tax correspondence</p>
 
@@ -59,8 +64,7 @@
           &lt; Back
         </button>
       }
-      <button matButton="filled" class="pill-btn primary-btn" type="submit"
-              [disabled]="form.invalid">
+      <button matButton="filled" class="pill-btn primary-btn" type="submit">
         {{ submitLabel() }}
       </button>
     </div>

package/src/component/payout/bank_info_form.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input, output, ElementRef } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -23,7 +25,7 @@ import { BackendService } from '../../service/rest_service';
   selector: 'sail-payout-bank-info-form',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    ReactiveFormsModule, MatButtonModule, MatCheckboxModule,
+    FieldError, ReactiveFormsModule, MatButtonModule, MatCheckboxModule,
     MatFormFieldModule, MatInputModule, MatSelectModule,
   ],
   templateUrl: './bank_info_form.html',
@@ -40,6 +42,7 @@ export class PayoutBankInfoFormComponent {
   readonly submitted = output<BankInfoFormValue>();
   readonly back = output<void>();
 
+  private readonly host: HTMLElement = inject(ElementRef).nativeElement;
   private readonly backend = inject(BackendService);
   private readonly labels = inject(LabelService);
 
@@ -62,7 +65,7 @@ export class PayoutBankInfoFormComponent {
 
   submit() {
     const currency = this.currency();
-    if (this.form.invalid || !currency) return;
+    if (!submittable(this.form, this.host) || !currency) return;
     const v = this.form.getRawValue();
     this.submitted.emit({
       countryCode:       v.countryCode!,

package/src/component/security/api_keys.html

@@ -12,15 +12,18 @@
       <mat-form-field>
         <mat-label>Key name</mat-label>
         <input matInput formControlName="keyName" maxlength="100">
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
       <mat-form-field>
         <mat-label>Allowed networks (optional)</mat-label>
         <input matInput formControlName="allowedCidrs" maxlength="2000">
         <mat-hint>Comma-separated addresses or CIDR ranges. Empty allows any address.</mat-hint>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
       <mat-form-field>
         <mat-label>Expires (optional)</mat-label>
         <input matInput type="datetime-local" formControlName="expiresAt">
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
       @if (offered().length) {
         <fieldset class="api-keys__scopes">
@@ -31,7 +34,7 @@
           }
         </fieldset>
       }
-      <button matButton="filled" type="submit" [disabled]="form.invalid || loading()">Create key</button>
+      <button matButton="filled" type="submit" [disabled]="loading()">Create key</button>
     </form>
   }
 
@@ -51,6 +54,7 @@
                 <mat-form-field>
                   <mat-label>Allowed networks</mat-label>
                   <input matInput [formControl]="networks" maxlength="2000" (keydown.enter)="saveNetworks(key)">
+                  <mat-error sailFieldError></mat-error>
                 </mat-form-field>
               } @else {
                 {{ key.AllowedCidrs || 'any address' }}
@@ -62,7 +66,7 @@
             <td>
               @if (restricting() === key.Id) {
                 <button matButton type="button" (click)="restricting.set(null)">Cancel</button>
-                <button matButton="filled" type="button" [disabled]="networks.invalid || loading()" (click)="saveNetworks(key)">Save</button>
+                <button matButton="filled" type="button" [disabled]="loading()" (click)="saveNetworks(key)">Save</button>
               } @else {
                 @if (key.IsActive && canRestrict) {
                   <button matButton type="button" [disabled]="loading()" (click)="editNetworks(key)">Restrict networks</button>

package/src/component/security/api_keys.ts

@@ -1,5 +1,7 @@
 import { DatePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, computed, inject, input, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, computed, inject, input, signal, ElementRef } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -10,6 +12,7 @@ import { ApiKey, MintedApiKey } from '../../model/access';
 import { AccessService } from '../../service/access.service';
 import { LabelOption, LabelService } from '../../service/label.service';
 import { BaseAsync } from '../abstract/base_async';
+import { PromptService } from '../../service/prompt.service';
 
 /**
  * The partner's API keys: mint one with scopes, allowed networks and an optional expiry (the
@@ -21,10 +24,12 @@ import { BaseAsync } from '../abstract/base_async';
   templateUrl: './api_keys.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  imports: [DatePipe, ReactiveFormsModule, MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule],
+  imports: [FieldError, DatePipe, ReactiveFormsModule, MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule],
 })
 export class ApiKeysComponent extends BaseAsync implements OnInit {
+  private readonly host: HTMLElement = inject(ElementRef).nativeElement;
   private readonly access = inject(AccessService);
+  private readonly prompt = inject(PromptService);
   private readonly labels = inject(LabelService);
   private readonly fb = inject(FormBuilder).nonNullable;
 
@@ -68,7 +73,7 @@ export class ApiKeysComponent extends BaseAsync implements OnInit {
   }
 
   mint(): void {
-    if (this.form.invalid) return;
+    if (!submittable(this.form, this.host)) return;
     const { keyName, scopes, allowedCidrs, expiresAt } = this.form.getRawValue();
     this.run(this.access.mintApiKey({
       key_name: keyName,
@@ -88,7 +93,7 @@ export class ApiKeysComponent extends BaseAsync implements OnInit {
   }
 
   saveNetworks(key: ApiKey): void {
-    if (this.networks.invalid) return;
+    if (!submittable(this.networks, this.host)) return;
     this.run(this.access.restrictApiKey(key.Id, this.networks.value), () => {
       this.restricting.set(null);
       this.successMessage.set(`Networks of "${key.KeyName}" saved.`);
@@ -97,10 +102,11 @@ export class ApiKeysComponent extends BaseAsync implements OnInit {
   }
 
   revoke(key: ApiKey): void {
-    if (!confirm(`Revoke key "${key.KeyName}" (${key.KeyPrefix}…)? Anything using it stops working.`)) return;
-    this.run(this.access.revokeApiKey(key.Id), () => {
+    this.prompt.ask({
+      title: `Revoke key "${key.KeyName}"?`, message: `Anything using ${key.KeyPrefix}… stops working.`, action: 'Revoke key', destructive: true,
+    }, () => this.run(this.access.revokeApiKey(key.Id), () => {
       this.successMessage.set(`Key "${key.KeyName}" revoked.`);
       this.load();
-    }, 'Failed to revoke the key.');
+    }, 'Failed to revoke the key.'));
   }
 }

package/src/component/security/connected_apps.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { OAuthGrant } from '../../model/access';
 import { AccessService } from '../../service/access.service';
 import { BaseAsync } from '../abstract/base_async';
+import { PromptService } from '../../service/prompt.service';
 
 /**
  * OAuth clients holding a live grant from the signed-in user, with disconnect; a disconnected
@@ -18,6 +19,7 @@ import { BaseAsync } from '../abstract/base_async';
 })
 export class ConnectedAppsComponent extends BaseAsync implements OnInit {
   private readonly access = inject(AccessService);
+  private readonly prompt = inject(PromptService);
 
   readonly grants = signal<OAuthGrant[]>([]);
 
@@ -31,10 +33,10 @@ export class ConnectedAppsComponent extends BaseAsync implements OnInit {
 
   revoke(grant: OAuthGrant): void {
     const name = grant.clientName || grant.clientId;
-    if (!confirm(`Disconnect "${name}"? It will have to connect again.`)) return;
-    this.run(this.access.revokeGrant(grant.clientId), () => {
-      this.successMessage.set(`Disconnected ${name}.`);
-      this.load();
-    }, 'Failed to disconnect the app.');
+    this.prompt.ask({ title: `Disconnect "${name}"?`, message: 'It will have to connect again.', action: 'Disconnect app', destructive: true },
+      () => this.run(this.access.revokeGrant(grant.clientId), () => {
+        this.successMessage.set(`Disconnected ${name}.`);
+        this.load();
+      }, 'Failed to disconnect the app.'));
   }
 }

package/src/component/security/sessions.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, inject,
 import { DatePipe } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { BaseAsync } from '../abstract/base_async';
+import { PromptService } from '../../service/prompt.service';
 import { BaseAuthService } from '../../service/auth.service';
 import { ActiveSession } from '../../model/appdata';
 
@@ -14,6 +15,7 @@ import { ActiveSession } from '../../model/appdata';
 })
 export class SessionsComponent extends BaseAsync implements OnInit {
   private readonly auth = inject(BaseAuthService);
+  private readonly prompt = inject(PromptService);
 
   readonly sessions = signal<ActiveSession[]>([]);
   private readonly methods = new Map(
@@ -32,14 +34,14 @@ export class SessionsComponent extends BaseAsync implements OnInit {
   }
 
   revoke(session: ActiveSession) {
-    if (!confirm(`Sign out the session on ${session.userAgent || 'an unknown device'}?`)) return;
-    this.run(
-      this.auth.revokeSession(session.id),
-      () => {
-        this.loadSessions();
-        this.successMessage.set('Session signed out.');
-      },
-      'Failed to sign out the session.',
-    );
+    this.prompt.ask({ title: `Sign out the session on ${session.userAgent || 'an unknown device'}?`, action: 'Sign out session', destructive: true }, () =>
+      this.run(
+        this.auth.revokeSession(session.id),
+        () => {
+          this.loadSessions();
+          this.successMessage.set('Session signed out.');
+        },
+        'Failed to sign out the session.',
+      ));
   }
 }

package/src/component/security/trusted_devices.html

@@ -53,9 +53,10 @@
         <mat-form-field appearance="outline">
           <mat-label>Password</mat-label>
           <input matInput type="password" formControlName="password" autocomplete="current-password" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
         <div class="auth-actions">
-          <button matButton="elevated" class="warn" type="submit" [disabled]="!logoutForm.valid || loading()">
+          <button matButton="elevated" class="warn" type="submit" [disabled]="loading()">
             Sign out everywhere
           </button>
           <button matButton type="button" (click)="logoutOpen.set(false)">Cancel</button>

package/src/component/security/trusted_devices.ts

@@ -1,6 +1,9 @@
-import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, inject, signal, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, inject, signal, input, ElementRef } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BaseAsync } from '../abstract/base_async';
+import { PromptService } from '../../service/prompt.service';
 import { BaseAuthService } from '../../service/auth.service';
 import { TrustedDevice } from '../../model/appdata';
 import { MatButtonModule } from '@angular/material/button';
@@ -15,7 +18,7 @@ import { RouterLink } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [
-    MatButtonModule,
+    FieldError, MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
     MatIconModule,
@@ -24,7 +27,9 @@ import { RouterLink } from '@angular/router';
   ],
 })
 export class TrustedDevicesComponent extends BaseAsync implements OnInit {
+  private readonly host: HTMLElement = inject(ElementRef).nativeElement;
   private readonly auth = inject(BaseAuthService);
+  private readonly prompt = inject(PromptService);
   private readonly fb = inject(FormBuilder);
 
   readonly devices = signal<TrustedDevice[]>([]);
@@ -50,23 +55,23 @@ export class TrustedDevicesComponent extends BaseAsync implements OnInit {
   }
 
   revokeDevice(device: TrustedDevice) {
-    if (!confirm(`Revoke trust for "${device.name}"?`)) return;
-    this.run(
-      this.auth.revokeTrustedDevice(device.id),
-      () => {
-        this.successMessage.set(`Device "${device.name}" revoked.`);
-        this.loadDevices();
-      },
-      'Failed to revoke device.',
-    );
+    this.prompt.ask({ title: `Revoke trust for "${device.name}"?`, action: 'Revoke device', destructive: true }, () =>
+      this.run(
+        this.auth.revokeTrustedDevice(device.id),
+        () => {
+          this.successMessage.set(`Device "${device.name}" revoked.`);
+          this.loadDevices();
+        },
+        'Failed to revoke device.',
+      ));
   }
 
   /**
    * logout-everywhere requires a re-auth gate, so we reveal a password
-   * field instead of relying on confirm() alone.
+   * field instead of relying on a confirmation alone.
    */
   signOutEverywhere() {
-    if (this.logoutForm.invalid) return;
+    if (!submittable(this.logoutForm, this.host)) return;
     const password = this.logoutForm.value.password!;
     this.run(
       this.auth.logoutEverywhere({ password }),

package/src/component/security/twofactor_setup.html

@@ -9,8 +9,9 @@
           <mat-form-field appearance="outline">
             <mat-label>Confirm your password</mat-label>
             <input matInput type="password" formControlName="password" autocomplete="current-password" required>
+            <mat-error sailFieldError></mat-error>
           </mat-form-field>
-          <button matButton="elevated" class="primary" type="submit" [disabled]="!initForm.valid">Enable 2FA</button>
+          <button matButton="elevated" class="primary" type="submit">Enable 2FA</button>
         </form>
       }
       @case ('qr') {
@@ -50,9 +51,10 @@
           <mat-form-field appearance="outline">
             <mat-label>Verification Code</mat-label>
             <input matInput type="text" formControlName="code" maxlength="6" autocomplete="one-time-code" required>
+            <mat-error sailFieldError></mat-error>
           </mat-form-field>
 
-          <button matButton="elevated" class="primary" type="submit" [disabled]="!verifyForm.valid">
+          <button matButton="elevated" class="primary" type="submit">
             Verify and Enable
           </button>
         </form>
@@ -64,12 +66,14 @@
           <mat-form-field appearance="outline">
             <mat-label>Password</mat-label>
             <input matInput type="password" formControlName="password" autocomplete="current-password" required>
+            <mat-error sailFieldError></mat-error>
           </mat-form-field>
           <mat-form-field appearance="outline">
             <mat-label>Current 6-digit code</mat-label>
             <input matInput type="text" formControlName="code" maxlength="6" autocomplete="one-time-code" required>
+            <mat-error sailFieldError></mat-error>
           </mat-form-field>
-          <button matButton class="warn" type="submit" [disabled]="!disableForm.valid">Disable 2FA</button>
+          <button matButton class="warn" type="submit">Disable 2FA</button>
         </form>
       }
     }

package/src/component/security/twofactor_setup.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, effect, inject, input, signal, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, input, signal, ViewEncapsulation, ElementRef } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { BaseAuthService } from '../../service/auth.service';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -14,7 +16,7 @@ import { toDataURL } from 'qrcode';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [
-    ReactiveFormsModule,
+    FieldError, ReactiveFormsModule,
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
@@ -22,6 +24,7 @@ import { toDataURL } from 'qrcode';
   ],
 })
 export class TwoFactorSetupComponent extends BaseAsync {
+  private readonly host: HTMLElement = inject(ElementRef).nativeElement;
   private readonly auth = inject(BaseAuthService);
   private readonly fb = inject(FormBuilder);
 
@@ -62,7 +65,7 @@ export class TwoFactorSetupComponent extends BaseAsync {
   }
 
   startSetup() {
-    if (this.initForm.invalid) return;
+    if (!submittable(this.initForm, this.host)) return;
     const password = this.initForm.value.password!;
     this.run(
       this.auth.setup2FA({ password }),
@@ -97,7 +100,7 @@ export class TwoFactorSetupComponent extends BaseAsync {
   }
 
   confirmSetup() {
-    if (this.verifyForm.invalid) return;
+    if (!submittable(this.verifyForm, this.host)) return;
     const { code } = this.verifyForm.value;
     this.run(
       this.auth.verify2FA({ code: code! }),
@@ -114,7 +117,7 @@ export class TwoFactorSetupComponent extends BaseAsync {
   }
 
   disable2FA() {
-    if (this.disableForm.invalid) return;
+    if (!submittable(this.disableForm, this.host)) return;
     const { password, code } = this.disableForm.value;
     this.run(
       this.auth.disable2FA(password!, code!),

package/src/component/security/twofactor_verify.html

@@ -19,6 +19,7 @@
       <mat-form-field appearance="outline">
         <mat-label>{{ useBackupCode() ? 'Backup Code' : 'Verification Code' }}</mat-label>
         <input matInput type="text" formControlName="code" autocomplete="one-time-code" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
 
       @if (!useBackupCode() && !emailed) {
@@ -33,7 +34,7 @@
         <div class="auth-error" role="alert">{{ errorMessage() }}</div>
       }
 
-      <button matButton="elevated" class="primary" type="submit" [disabled]="!verifyForm.valid">
+      <button matButton="elevated" class="primary" type="submit">
         Verify
       </button>
     </form>

package/src/component/security/twofactor_verify.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, inject, signal, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal, ViewEncapsulation, ElementRef } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { BaseAuthService } from '../../service/auth.service';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -15,7 +17,7 @@ import { BaseAsync } from '../abstract/base_async';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [
-    ReactiveFormsModule,
+    FieldError, ReactiveFormsModule,
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
@@ -24,6 +26,7 @@ import { BaseAsync } from '../abstract/base_async';
   ],
 })
 export class TwoFactorVerifyComponent extends BaseAsync {
+  private readonly host: HTMLElement = inject(ElementRef).nativeElement;
   private readonly auth = inject(BaseAuthService);
   private readonly fb = inject(FormBuilder);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
@@ -43,7 +46,7 @@ export class TwoFactorVerifyComponent extends BaseAsync {
   }
 
   verify() {
-    if (this.verifyForm.invalid) return;
+    if (!submittable(this.verifyForm, this.host)) return;
     const { code, trustDevice } = this.verifyForm.value;
 
     if (this.useBackupCode()) {

package/src/component/table/table_detail.ts

@@ -69,7 +69,7 @@ export class TableDetail extends BaseForm {
      */
     protected override beforeExecuteAction(action: TableAction, record?: Record<string, unknown>): boolean {
         if (action.recordSpecific && record && record[this.config.opField] === OpCode.Insert) {
-            alert('Save the record first before running this action.');
+            this.reportError('Save the record first before running this action.');
             return false;
         }
         return true;

package/src/component/table/table_edit.ts

@@ -48,7 +48,7 @@ export class TableEdit extends BaseForm implements OnInit {
         (this.cacheService.getTableDefinition(this.tableName())?.Children ?? []).map((child) => child.PascalName));
 
     protected get isDialog(): boolean { return !!this.dialogRef; }
-    /** Snapshot taken when the user enters edit mode; used for dirty-tracking on save. */
+    /** Scalar values when editing began; children carry their own op codes. */
     private originalSnapshot: Record<string, unknown> | null = null;
 
     ngOnInit(): void {
@@ -61,6 +61,7 @@ export class TableEdit extends BaseForm implements OnInit {
         }
         if (this.isNew()) {
             this.setEditableRecord(Object.assign(this.emptyRecord(), this.record()));
+            this.originalSnapshot = { ...this.editableRecord() };
         } else {
             this.fetchFullRecord();
         }
@@ -119,18 +120,29 @@ export class TableEdit extends BaseForm implements OnInit {
         return super.isReadOnly(fieldName);
     }
 
+    override hasUnsavedChanges(): boolean {
+        if (this.isReadOnlyMode() || !this.originalSnapshot) return false;
+        const op = this.config.opField;
+        return this.isRecordDirty(this.editableRecord(), this.originalSnapshot)
+            || this.tabFields().some((key) => this.childRecords(key).some((row) =>
+                row[op] === OpCode.Insert || row[op] === OpCode.Update || row[op] === OpCode.Delete));
+    }
+
+    protected override reportError(message: string): void {
+        this.saveError.set(message);
+    }
+
     onEdit() {
         this.isReadOnlyMode.set(false);
         this.isNew.set(false);
-        // Snapshot scalar fields only; children arrays are dirty-tracked per row.
         this.originalSnapshot = { ...this.editableRecord() };
     }
 
     onNew() {
         this.isReadOnlyMode.set(false);
         this.isNew.set(true);
-        this.originalSnapshot = null;
         this.setEditableRecord(this.emptyRecord());
+        this.originalSnapshot = { ...this.editableRecord() };
     }
 
     onSave() {
@@ -170,7 +182,7 @@ export class TableEdit extends BaseForm implements OnInit {
     }
 
     onDelete() {
-        if (confirm('Are you sure you want to delete this record?')) {
+        this.prompt.ask({ title: `Delete this ${this.getCaption()} record?`, action: 'Delete record', destructive: true }, () => {
             const result = {...this.editableRecord()};
             result[this.config.opField] = OpCode.Delete;
             this.backendService.post(this.apiName(), result).subscribe({
@@ -183,10 +195,20 @@ export class TableEdit extends BaseForm implements OnInit {
                     this.saveError.set(errorDetail(err, 'Delete failed.'));
                 },
             });
-        }
+        });
     }
 
     onCancel() {
+        if (!this.hasUnsavedChanges()) {
+            this.discard();
+            return;
+        }
+        this.prompt.ask({ title: 'Discard your changes?', message: 'Your edits to this record are not saved.', action: 'Discard changes', destructive: true },
+            () => this.discard());
+    }
+
+    private discard() {
+        this.originalSnapshot = null;
         if (this.dialogRef) {
             this.dialogRef.close();
             return;

package/src/component/table/table_list.html

@@ -20,7 +20,11 @@
     <p class="table-list__error" role="alert">{{ viewError() }}</p>
 }
 
-<table>
+@if (loading()) {
+    <mat-progress-bar mode="indeterminate" [attr.aria-label]="'Loading ' + getCaption()"></mat-progress-bar>
+}
+
+<table [attr.aria-busy]="loading()">
     <thead>
         <tr>
             @for (column of displayedColumns(); track column) {
@@ -40,9 +44,9 @@
             }
         </tr>
     </thead>
-@if (sortedRecords().length > 0) {
+@if (records().length > 0) {
     <tbody>
-    @for (record of sortedRecords(); track trackByRecord($index, record)) {
+    @for (record of records(); track trackByRecord($index, record)) {
         <tr>
         @for (column of displayedColumns(); track column) {
             <td>
@@ -90,6 +94,18 @@
     </mat-paginator>
 }
 
-@if (records().length === 0 && displayedColumns().length > 0 && !viewError()) {
-    <p class="empty-state">No records found.</p>
+@if (!loading() && records().length === 0 && !viewError()) {
+    <div class="empty-state" role="status">
+        @if (activeFilters().length > 0) {
+            <p>No {{ getCaption() }} match your search.</p>
+            <dl class="empty-state__filters">
+                @for (filter of activeFilters(); track $index) {
+                    <dt>{{ filter.label }}</dt><dd>{{ filter.value }}</dd>
+                }
+            </dl>
+            <button matButton="outlined" type="button" (click)="clearSearch()">Clear search</button>
+        } @else {
+            <p>{{ emptyMessage() || 'No ' + getCaption() + ' yet.' }}</p>
+        }
+    </div>
 }