@nauticana/sail 1.1.8 → 1.1.10

package/src/component/payment/user_payment_methods.html

@@ -40,7 +40,7 @@
     </mat-card>
   }
 
-  @if (errorMsg()) {
-    <p class="user-payment-methods__error">{{ errorMsg() }}</p>
+  @if (errorMessage()) {
+    <p class="user-payment-methods__error" role="alert">{{ errorMessage() }}</p>
   }
 </div>

package/src/component/payment/user_payment_methods.ts

@@ -16,6 +16,8 @@ import { UserPaymentMethod } from '../../model/appdata';
  * the consumer routes to its own SetupIntent flow (sail does not bundle
  * a SetupIntent UI today — providers vary too much).
  *
+ * Ships no CSS — the consuming app styles the classes globally.
+ *
  * Selector: <sail-user-payment-methods>
  */
 @Component({
@@ -24,20 +26,6 @@ import { UserPaymentMethod } from '../../model/appdata';
   encapsulation: ViewEncapsulation.None,
   imports: [MatButtonModule, MatCardModule, MatIconModule],
   templateUrl: './user_payment_methods.html',
-  styles: `
-    .user-payment-methods { display: flex; flex-direction: column; gap: 12px; }
-    .user-payment-methods__title { margin: 0; }
-    .user-payment-methods__add { align-self: flex-start; }
-    .user-payment-methods__empty { color: var(--mat-app-on-surface-variant, #555); }
-    .user-payment-methods__item { background: var(--mat-app-surface, #fff); }
-    .user-payment-methods__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
-    .user-payment-methods__info { display: flex; align-items: center; gap: 8px; }
-    .user-payment-methods__brand { font-weight: 600; }
-    .user-payment-methods__last4 { color: var(--mat-app-on-surface-variant, #555); }
-    .user-payment-methods__default { color: var(--mat-app-primary, #1976d2); margin-left: 8px; font-size: 12px; font-weight: 600; }
-    .user-payment-methods__actions { display: flex; align-items: center; gap: 4px; }
-    .user-payment-methods__error { color: var(--mat-app-error, #b00020); font-size: 13px; margin: 0; }
-  `,
 })
 export class UserPaymentMethodsComponent extends BaseAsync implements OnInit {
   readonly title = input('Payment Methods');
@@ -55,7 +43,6 @@ export class UserPaymentMethodsComponent extends BaseAsync implements OnInit {
   private readonly service = inject(UserPaymentMethodService);
 
   readonly methods = signal<UserPaymentMethod[]>([]);
-  readonly errorMsg = signal<string>('');
 
   ngOnInit(): void {
     this.load();
@@ -77,25 +64,27 @@ export class UserPaymentMethodsComponent extends BaseAsync implements OnInit {
   }
 
   setDefault(m: UserPaymentMethod): void {
-    this.service.setDefault(m.Id).subscribe({
-      next: () => {
+    this.run(
+      this.service.setDefault(m.Id),
+      () => {
         this.methods.update((list) =>
           list.map((row) => ({ ...row, IsDefault: row.Id === m.Id })),
         );
         this.defaultChanged.emit(m);
       },
-      error: (err) => this.errorMsg.set(err?.error?.detail ?? 'Failed to set default'),
-    });
+      'Failed to set default.',
+    );
   }
 
   remove(m: UserPaymentMethod): void {
-    this.service.delete(m.Id).subscribe({
-      next: () => {
+    this.run(
+      this.service.delete(m.Id),
+      () => {
         this.methods.update((list) => list.filter((row) => row.Id !== m.Id));
         this.deleted.emit(m);
       },
-      error: (err) => this.errorMsg.set(err?.error?.detail ?? 'Failed to delete'),
-    });
+      'Failed to delete.',
+    );
   }
 
   iconFor(m: UserPaymentMethod): string {

package/src/component/payout/bank_info_form.html

@@ -7,7 +7,7 @@
 
   <form [formGroup]="form" (ngSubmit)="submit()">
     <mat-form-field appearance="outline" class="full-width">
-      <mat-label>Country *</mat-label>
+      <mat-label>Country</mat-label>
       <mat-select formControlName="countryCode">
         @for (c of countryProfiles(); track c.code) {
           <mat-option [value]="c.code">{{ c.label }} ({{ c.currency }})</mat-option>
@@ -17,19 +17,19 @@
     <p class="hint">Sets your tax ID format + payout currency</p>
 
     <mat-form-field appearance="outline" class="full-width">
-      <mat-label>Account holder name *</mat-label>
+      <mat-label>Account holder name</mat-label>
       <input matInput formControlName="accountHolderName">
     </mat-form-field>
     <p class="hint">Legal name on the bank account (must match government ID)</p>
 
     <mat-form-field appearance="outline" class="full-width">
-      <mat-label>{{ taxIdLabel() }} *</mat-label>
+      <mat-label>{{ taxIdLabel() }}</mat-label>
       <input matInput formControlName="taxId" [placeholder]="taxIdPlaceholder()">
     </mat-form-field>
     <p class="hint">{{ taxIdHint() }}</p>
 
     <mat-form-field appearance="outline" class="full-width">
-      <mat-label>Billing address *</mat-label>
+      <mat-label>Billing address</mat-label>
       <input matInput formControlName="billingAddress">
     </mat-form-field>
     <p class="hint">Business or home address — used for tax correspondence</p>

package/src/component/payout/bank_info_form.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, linkedSignal, output } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -29,8 +29,7 @@ export const DEFAULT_COUNTRY_PROFILES: CountryProfile[] = [
  * `(submitted)` — the consumer decides whether to POST directly to
  * /api/v1/user_bank_info or pipe through its own registration service.
  *
- * `[provider]` defaults to "AW" (Airwallex) to match keel/payout's
- * default --payout_provider flag. Override per deployment if needed.
+ * Ships no CSS — the consuming app styles the classes globally.
  *
  * Selector: <sail-payout-bank-info-form>
  */
@@ -42,18 +41,6 @@ export const DEFAULT_COUNTRY_PROFILES: CountryProfile[] = [
     MatFormFieldModule, MatInputModule, MatSelectModule,
   ],
   templateUrl: './bank_info_form.html',
-  styles: `
-    .bank-info-form { display: flex; flex-direction: column; gap: 4px; padding: 0 24px 32px; }
-    .bank-info-form__title { margin: 0 0 16px; }
-    .bank-info-form__intro { font-size: 14px; color: var(--mat-app-on-surface-variant, #555); margin: 0 0 16px; }
-    .full-width { width: 100%; }
-    .hint { font-size: 12px; color: var(--mat-app-on-surface-variant, #555); margin: -4px 0 8px; }
-    .provider-note { font-size: 13px; color: var(--mat-app-on-surface-variant, #555); background: rgba(0,0,0,0.04); padding: 12px; border-radius: 4px; margin: 12px 0; }
-    .agreement { margin: 12px 0 16px; font-size: 14px; }
-    .nav-buttons { display: flex; gap: 12px; margin-top: 8px; }
-    .pill-btn { border-radius: 24px; height: 48px; font-size: 15px; font-weight: 600; flex: 1; }
-    .primary-btn { background: var(--mat-app-primary, #1976d2); color: white; }
-  `,
 })
 export class PayoutBankInfoFormComponent {
   /** Step title rendered above the form. */
@@ -62,8 +49,8 @@ export class PayoutBankInfoFormComponent {
   readonly intro = input('Tax + payout details. Bank account itself is set up with the payout provider in a separate step — only tax-reporting and dispute-correspondence fields are collected here.');
   /** Override the list of supported countries — keep the default for most apps. */
   readonly countryProfiles = input<CountryProfile[]>(DEFAULT_COUNTRY_PROFILES);
-  /** Provider code persisted on user_bank_info.provider. Default AW (Airwallex) matches keel's default --payout_provider. */
-  readonly provider = input('AW');
+  /** Provider code persisted on user_bank_info.provider — must match the app's keel --payout_provider. */
+  readonly provider = input.required<string>();
   /** Wording on the provider-agreement checkbox. Override to name the live provider. */
   readonly agreementLabel = input('I agree to the payout provider account agreement');
   /** Submit-button label — wizards usually use "Next >". */
@@ -79,33 +66,42 @@ export class PayoutBankInfoFormComponent {
   private readonly fb = inject(FormBuilder);
 
   readonly form = this.fb.group({
-    countryCode:       ['CA', Validators.required],
+    countryCode:       ['', Validators.required],
     accountHolderName: ['', Validators.required],
     taxId:             ['', Validators.required],
     billingAddress:    ['', Validators.required],
     providerAgreement: [false, Validators.requiredTrue],
   });
 
-  private readonly selectedCountry = signal<CountryProfile>(this.countryProfiles()[0]);
+  // linkedSignal, not a field initializer: the bound countryProfiles input
+  // isn't available yet during construction.
+  private readonly selectedCountry = linkedSignal<CountryProfile | undefined>(() => this.countryProfiles()[0]);
 
-  readonly taxIdLabel       = computed(() => this.selectedCountry().taxIdLabel);
-  readonly taxIdPlaceholder = computed(() => this.selectedCountry().taxIdPlaceholder);
-  readonly taxIdHint        = computed(() => this.selectedCountry().taxIdHint);
+  readonly taxIdLabel       = computed(() => this.selectedCountry()?.taxIdLabel ?? '');
+  readonly taxIdPlaceholder = computed(() => this.selectedCountry()?.taxIdPlaceholder ?? '');
+  readonly taxIdHint        = computed(() => this.selectedCountry()?.taxIdHint ?? '');
 
   constructor() {
+    // Keep the form's country in the bound profile list (never a phantom default).
+    effect(() => {
+      const profiles = this.countryProfiles();
+      const current = this.form.controls.countryCode.value;
+      if (!profiles.some((c) => c.code === current)) {
+        this.form.controls.countryCode.setValue(profiles[0]?.code ?? '');
+      }
+    });
     this.form.controls.countryCode.valueChanges
       .pipe(takeUntilDestroyed())
       .subscribe((code) => {
         const profiles = this.countryProfiles();
-        const profile = profiles.find((c) => c.code === code) ?? profiles[0];
-        this.selectedCountry.set(profile);
+        this.selectedCountry.set(profiles.find((c) => c.code === code) ?? profiles[0]);
       });
   }
 
   submit() {
-    if (this.form.invalid) return;
-    const v = this.form.value;
     const country = this.selectedCountry();
+    if (this.form.invalid || !country) return;
+    const v = this.form.value;
     this.submitted.emit({
       countryCode:       country.code,
       currency:          country.currency,

package/src/component/payout/provider_onboarding.html

@@ -18,7 +18,7 @@
           {{ reusable().length === 1 ? 'another partner' : 'other partners' }}.
           You can reuse it here (no KYC redo) if the currency matches.
         </p>
-        <mat-radio-group [value]="selectedAccountId()" (change)="selectAccount($any($event.value))">
+        <mat-radio-group [value]="selectedAccountId()" (change)="onAccountChange($event)">
           @for (acc of reusable(); track acc.providerAccountId) {
             <mat-radio-button [value]="acc.providerAccountId" class="reuse-option">
               <strong>{{ acc.partnerCaption }}</strong>
@@ -27,7 +27,7 @@
           }
         </mat-radio-group>
         <button matButton="filled" class="payout-onboarding__btn payout-onboarding__btn--primary"
-                [disabled]="!selectedAccountId() || busy()"
+                [disabled]="!selectedAccountId() || loading()"
                 (click)="linkExisting()">
           Use this account
         </button>
@@ -45,11 +45,11 @@
         for bank routing details and government ID. The process
         usually takes a few minutes.
       </p>
-      @if (errorMsg()) {
-        <p class="payout-onboarding__error">{{ errorMsg() }}</p>
+      @if (errorMessage()) {
+        <p class="payout-onboarding__error">{{ errorMessage() }}</p>
       }
       <button matButton="filled" class="payout-onboarding__btn payout-onboarding__btn--primary"
-              [disabled]="busy()"
+              [disabled]="loading()"
               (click)="startProviderKyc()">
         <mat-icon>open_in_new</mat-icon>
         Start onboarding

package/src/component/payout/provider_onboarding.ts

@@ -1,8 +1,9 @@
 import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { BaseAsync } from '../abstract/base_async';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
-import { MatRadioModule } from '@angular/material/radio';
+import { MatRadioChange, MatRadioModule } from '@angular/material/radio';
 import { PayoutService } from '../../service/payout.service';
 import { ReusableAccount } from '../../model/appdata';
 
@@ -13,13 +14,15 @@ import { ReusableAccount } from '../../model/appdata';
  * two paths:
  *   1. Reuse an existing provider account from another partner row
  *      (zero-KYC; calls /api/v1/payout/reusable/link).
- *   2. Launch the provider's hosted-KYC page in a new tab
+ *   2. Hand off to the provider's hosted-KYC page
  *      (/api/v1/payout/onboard/start).
  *
  * Routing is consumer-owned via the `(linked)` / `(skipped)` outputs —
  * the component itself never calls Router. Optional `title` and
  * `skipLabel` inputs cover the common UX strings.
  *
+ * Ships no CSS — the consuming app styles the classes globally.
+ *
  * Selector: <sail-payout-provider-onboarding>
  */
 @Component({
@@ -27,20 +30,8 @@ import { ReusableAccount } from '../../model/appdata';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MatButtonModule, MatCardModule, MatIconModule, MatRadioModule],
   templateUrl: './provider_onboarding.html',
-  styles: `
-    .payout-onboarding { display: flex; flex-direction: column; gap: 16px; padding: 0 24px 32px; }
-    .payout-onboarding__title { margin: 0; }
-    .payout-onboarding__intro { font-size: 14px; color: var(--mat-app-on-surface-variant, #555); margin: 0; }
-    .reuse-card { background: var(--mat-app-surface-variant, #f5f5f5); }
-    .reuse-option { display: block; margin: 8px 0; }
-    .hint { font-size: 13px; color: var(--mat-app-on-surface-variant, #555); margin: 0 0 12px; }
-    .payout-onboarding__error { color: var(--mat-app-error, #b00020); font-size: 13px; margin: 0 0 12px; }
-    .payout-onboarding__nav { display: flex; gap: 12px; margin-top: 8px; }
-    .payout-onboarding__btn { border-radius: 24px; height: 48px; font-size: 15px; font-weight: 600; flex: 1; }
-    .payout-onboarding__btn--primary { background: var(--mat-app-primary, #1976d2); color: white; }
-  `,
 })
-export class PayoutProviderOnboardingComponent implements OnInit {
+export class PayoutProviderOnboardingComponent extends BaseAsync implements OnInit {
   /** Step title — defaults match the most common payout-step framing. */
   readonly title = input('Bank Account Setup');
   /** Skip-button label — covers wizards where skipping returns to the parent flow. */
@@ -54,58 +45,47 @@ export class PayoutProviderOnboardingComponent implements OnInit {
   readonly skipped = output<void>();
   /** Emitted when the user clicks Back. */
   readonly back = output<void>();
-  /** Emitted after the hosted page is opened in a new tab. Consumers can route away or show a "waiting on provider" screen. */
+  /** Emitted just before handing off to the hosted-KYC page. */
   readonly started = output<void>();
 
   private readonly payoutService = inject(PayoutService);
 
   readonly reusable = signal<ReusableAccount[]>([]);
   readonly selectedAccountId = signal<string>('');
-  readonly busy = signal<boolean>(false);
-  readonly errorMsg = signal<string>('');
 
   ngOnInit() {
-    this.payoutService.listReusable().subscribe({
-      next: ({ accounts }) => this.reusable.set(accounts ?? []),
-      error: () => this.reusable.set([]),
-    });
+    this.run(
+      this.payoutService.listReusable(),
+      ({ accounts }) => this.reusable.set(accounts ?? []),
+      'Could not check for reusable accounts.',
+    );
   }
 
-  selectAccount(id: string) {
-    this.selectedAccountId.set(id);
+  onAccountChange(event: MatRadioChange) {
+    this.selectedAccountId.set(String(event.value));
   }
 
   linkExisting() {
     const id = this.selectedAccountId();
     if (!id) return;
-    this.busy.set(true);
-    this.payoutService.linkReusable(id).subscribe({
-      next: () => {
-        this.busy.set(false);
-        this.linked.emit();
-      },
-      error: (err) => {
-        this.errorMsg.set(err?.error?.detail ?? 'Failed to link existing account');
-        this.busy.set(false);
-      },
-    });
+    this.run(
+      this.payoutService.linkReusable(id),
+      () => this.linked.emit(),
+      'Failed to link existing account',
+    );
   }
 
   startProviderKyc() {
-    this.busy.set(true);
-    this.payoutService.startOnboarding().subscribe({
-      next: (res) => {
-        this.busy.set(false);
-        // Open in the platform browser. Mobile webview wrappers
-        // intercept this and pop the system browser so the provider
-        // page works in its expected environment.
-        window.open(res.url, '_blank');
+    this.run(
+      this.payoutService.startOnboarding(),
+      (res) => {
         this.started.emit();
+        // Same-tab handoff: window.open from an async callback is popup-blocked
+        // (always on Safari), which used to leave users on a "waiting" screen
+        // with nothing open. Mobile webview wrappers intercept the navigation.
+        window.location.assign(res.url);
       },
-      error: (err) => {
-        this.errorMsg.set(err?.error?.detail ?? 'Failed to start onboarding');
-        this.busy.set(false);
-      },
-    });
+      'Failed to start onboarding',
+    );
   }
 }

package/src/component/security/trusted_devices.html

@@ -28,7 +28,7 @@
               <td>{{ formatDate(device.last_used_at) }}</td>
               <td>{{ formatDate(device.created_at) }}</td>
               <td>
-                <button matIconButton (click)="revokeDevice(device)" title="Revoke">
+                <button matIconButton (click)="revokeDevice(device)" title="Revoke" aria-label="Revoke device">
                   <mat-icon>delete</mat-icon>
                 </button>
               </td>

package/src/component/security/trusted_devices.ts

@@ -71,7 +71,6 @@ export class TrustedDevicesComponent extends BaseAsync implements OnInit {
     this.run(
       this.auth.logoutEverywhere({ password }),
       () => {
-        this.successMessage.set('Signed out of all devices.');
         this.logoutForm.reset();
         this.logoutOpen.set(false);
         this.auth.logout();

package/src/component/security/twofactor_setup.html

@@ -15,10 +15,14 @@
       }
       @case ('qr') {
         <p class="auth-instructions">Scan this QR code with your authenticator app (e.g., Google Authenticator, Authy).</p>
-        <div class="twofactor-qr">
-          <img [src]="qrUri()" alt="2FA QR Code" width="200" height="200">
-        </div>
-        <p class="auth-instructions">Or enter this secret manually: <code>{{ secret() }}</code></p>
+        @if (qrDataUrl()) {
+          <div class="twofactor-qr">
+            <img [src]="qrDataUrl()" alt="2FA QR Code" width="200" height="200">
+          </div>
+          <p class="auth-instructions">Or enter this secret manually: <code>{{ secret() }}</code></p>
+        } @else {
+          <p class="auth-instructions">Enter this secret in your authenticator app: <code>{{ secret() }}</code></p>
+        }
 
         @if (backupCodes().length > 0) {
           <div class="twofactor-backup">

package/src/component/security/twofactor_setup.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, signal, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, input, signal, ViewEncapsulation } from '@angular/core';
 import { BaseAuthService } from '../../service/auth.service';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -6,6 +6,7 @@ import { MatInputModule } from '@angular/material/input';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { BaseAsync } from '../abstract/base_async';
+import { toDataURL } from 'qrcode';
 
 @Component({
   selector: 'sail-twofactor-setup',
@@ -24,8 +25,13 @@ export class TwoFactorSetupComponent extends BaseAsync {
   private readonly auth = inject(BaseAuthService);
   private readonly fb = inject(FormBuilder);
 
+  /** keel has no 2FA-status endpoint — the app tells us whether 2FA is already
+   * on so returning users land on the manage/disable view, not a fresh setup
+   * (which would rotate their seed and revoke all refresh tokens). */
+  readonly twoFactorEnabled = input(false);
+
   readonly step = signal<'init' | 'qr' | 'verify' | 'done'>('init');
-  readonly qrUri = signal('');
+  readonly qrDataUrl = signal('');
   readonly secret = signal('');
   readonly backupCodes = signal<string[]>([]);
   readonly showCodes = signal(false);
@@ -46,13 +52,25 @@ export class TwoFactorSetupComponent extends BaseAsync {
     code: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(6)]],
   });
 
+  constructor() {
+    super();
+    // Only flips between the two idle states; never yanks a user out of a flow.
+    effect(() => {
+      const enabled = this.twoFactorEnabled();
+      this.step.update((s) => (s === 'init' || s === 'done') ? (enabled ? 'done' : 'init') : s);
+    });
+  }
+
   startSetup() {
     if (this.initForm.invalid) return;
     const password = this.initForm.value.password!;
     this.run(
       this.auth.setup2FA({ password }),
       (res) => {
-        this.qrUri.set(res.qrUri);
+        // keel returns an otpauth:// provisioning URI, not an image — render it.
+        toDataURL(res.qrUri, { width: 200, margin: 1 })
+          .then((url) => this.qrDataUrl.set(url))
+          .catch(() => this.qrDataUrl.set(''));
         this.secret.set(res.secret);
         this.backupCodes.set(res.backupCodes);
         this.step.set('qr');

package/src/component/security/twofactor_verify.html

@@ -36,7 +36,8 @@
       </button>
     </form>
     <div class="auth-actions">
-      <a tabindex="0" role="button" (click)="toggleBackupCode()" (keydown.enter)="toggleBackupCode()">
+      <a tabindex="0" role="button" (click)="toggleBackupCode()" (keydown.enter)="toggleBackupCode()"
+         (keydown.space)="$event.preventDefault(); toggleBackupCode()">
         {{ useBackupCode() ? 'Use authenticator code' : 'Use a backup code instead' }}
       </a>
       <a routerLink="/login/local">Back to Login</a>

package/src/component/security/twofactor_verify.ts

@@ -46,17 +46,11 @@ export class TwoFactorVerifyComponent extends BaseAsync {
     const { code, trustDevice } = this.verifyForm.value;
 
     if (this.useBackupCode()) {
+      // verifyBackupCode completes the login inside BaseAuthService.
       this.run(
         this.auth.verifyBackupCode(code!),
         (res) => {
-          if (res.valid && res.token) {
-            localStorage.removeItem('loginToken');
-            this.auth.token = res.token;
-            this.auth.isLoggedIn.set(true);
-            localStorage.setItem('jwt', res.token);
-            this.auth.loadAppData();
-            this.auth.initRoutes();
-          } else {
+          if (!res.valid || !res.token) {
             this.errorMessage.set('Invalid backup code.');
           }
         },

package/src/component/table/table_detail.html

@@ -4,7 +4,7 @@
     @if (canCreate()) {
         <button matButton="elevated" class="accent" (click)="addRecord()">New Record</button>
     }
-    @for (action of getActions(false); track action.action) {
+    @for (action of tableActions(); track action.action) {
         @if (canExecuteAction(action)) {
             <button matButton="outlined" type="button"
                     [title]="action.caption"
@@ -18,17 +18,17 @@
 <table class="mat-table">
     <thead>
         <tr>
-            @for (col of displayedColumns; track col) {
-                <th>{{ colCaption(col) }}</th>
+            @for (col of displayedColumns(); track col) {
+                <th scope="col">{{ colCaption(col) }}</th>
             }
-            <th>Actions</th>
+            <th scope="col">Actions</th>
         </tr>
     </thead>
     <tbody>
-        @for (record of records; track $index) {
+        @for (record of visibleRecords(); track trackByRecord($index, record)) {
             <tr [class.deleted-record]="isDeleted(record)" [class.updated-record]="isUpdated(record)" [class.new-record]="isInserted(record)">
-                @if (record == editingRecord) {
-                    @for (col of displayedColumns; track col) {
+                @if (record === editingRecord()) {
+                    @for (col of displayedColumns(); track col) {
                         <td>
                             @if (isReadOnly(col)) {
                                 {{ record[col] }}
@@ -38,27 +38,28 @@
                         </td>
                     }
                     <td>
-                        <button matIconButton (click)="saveRow()" [title]="isNew ? 'Add' : 'Update'"><mat-icon>{{ isNew ? 'add' : 'check' }}</mat-icon></button>
-                        <button matIconButton (click)="cancelRow(record)" title="Cancel"><mat-icon>cancel</mat-icon></button>
+                        <button matIconButton (click)="saveRow()" [title]="isNew() ? 'Add' : 'Update'" [attr.aria-label]="isNew() ? 'Add' : 'Update'"><mat-icon>{{ isNew() ? 'add' : 'check' }}</mat-icon></button>
+                        <button matIconButton (click)="cancelRow(record)" title="Cancel" aria-label="Cancel"><mat-icon>cancel</mat-icon></button>
                     </td>
                 } @else {
-                    @for (col of displayedColumns; track col) {
+                    @for (col of displayedColumns(); track col) {
                         <td>{{ displayValue(col, record[col]) }}</td>
                     }
                     <td>
                         @if (canUpdate()) {
-                            <button matIconButton (click)="editRow(record)" title="Edit"><mat-icon>edit</mat-icon></button>
+                            <button matIconButton (click)="editRow(record)" title="Edit" aria-label="Edit"><mat-icon>edit</mat-icon></button>
                         }
                         @if (isDeleted(record)) {
-                            <button matIconButton (click)="unDeleteRow(record)" title="Undelete"><mat-icon>restore_from_trash</mat-icon></button>
+                            <button matIconButton (click)="unDeleteRow(record)" title="Undelete" aria-label="Undelete"><mat-icon>restore_from_trash</mat-icon></button>
                         } @else if (canDelete()) {
-                            <button matIconButton (click)="deleteRow(record)" title="Delete"><mat-icon>delete</mat-icon></button>
+                            <button matIconButton (click)="deleteRow(record)" title="Delete" aria-label="Delete"><mat-icon>delete</mat-icon></button>
                         }
                         @if (!isInserted(record)) {
-                            @for (action of getActions(true); track action.action) {
+                            @for (action of recordActions(); track action.action) {
                                 @if (canExecuteAction(action)) {
                                     <button matIconButton type="button"
                                             [title]="action.caption"
+                                            [attr.aria-label]="action.caption"
                                             (click)="executeAction(action, record)">
                                         <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>
                                     </button>