@nauticana/sail 0.7.0 → 0.8.1

package/src/component/payout/bank_info_form.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input, output, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -40,67 +41,7 @@ export const DEFAULT_COUNTRY_PROFILES: CountryProfile[] = [
     ReactiveFormsModule, MatButtonModule, MatCheckboxModule,
     MatFormFieldModule, MatInputModule, MatSelectModule,
   ],
-  template: `
-    <div class="bank-info-form">
-      <h2 class="bank-info-form__title">{{ title }}</h2>
-
-      @if (intro) {
-        <p class="bank-info-form__intro">{{ intro }}</p>
-      }
-
-      <form [formGroup]="form" (ngSubmit)="submit()">
-        <mat-form-field appearance="outline" class="full-width">
-          <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>
-            }
-          </mat-select>
-        </mat-form-field>
-        <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>
-          <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>
-          <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>
-          <input matInput formControlName="billingAddress">
-        </mat-form-field>
-        <p class="hint">Business or home address — used for tax correspondence</p>
-
-        <p class="provider-note">
-          Bank routing details (account number + institution / ABA /
-          IBAN) are collected by the payout provider in the next step;
-          this application does not store them.
-        </p>
-
-        <mat-checkbox formControlName="providerAgreement" class="agreement">
-          {{ agreementLabel }}
-        </mat-checkbox>
-
-        <div class="nav-buttons">
-          @if (showBack) {
-            <button mat-stroked-button class="pill-btn" type="button" (click)="back.emit()">
-              &lt; Back
-            </button>
-          }
-          <button mat-flat-button class="pill-btn primary-btn" type="submit"
-                  [disabled]="form.invalid">
-            {{ submitLabel }}
-          </button>
-        </div>
-      </form>
-    </div>
-  `,
+  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; }
@@ -116,24 +57,24 @@ export const DEFAULT_COUNTRY_PROFILES: CountryProfile[] = [
 })
 export class PayoutBankInfoFormComponent {
   /** Step title rendered above the form. */
-  @Input() title = 'Payment and Tax';
+  readonly title = input('Payment and Tax');
   /** Optional explainer rendered below the title. */
-  @Input() intro = '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.';
+  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. */
-  @Input() countryProfiles: CountryProfile[] = DEFAULT_COUNTRY_PROFILES;
+  readonly countryProfiles = input<CountryProfile[]>(DEFAULT_COUNTRY_PROFILES);
   /** Provider code persisted on user_bank_info.provider. Default AW (Airwallex) matches keel's default --payout_provider. */
-  @Input() provider = 'AW';
+  readonly provider = input('AW');
   /** Wording on the provider-agreement checkbox. Override to name the live provider. */
-  @Input() agreementLabel = 'I agree to the payout provider account agreement';
+  readonly agreementLabel = input('I agree to the payout provider account agreement');
   /** Submit-button label — wizards usually use "Next >". */
-  @Input() submitLabel = 'Next >';
+  readonly submitLabel = input('Next >');
   /** When true, the back button renders alongside submit. */
-  @Input() showBack = true;
+  readonly showBack = input(true);
 
   /** Emitted on submit; payload maps 1:1 to basis user_bank_info columns. */
-  @Output() submitted = new EventEmitter<BankInfoFormValue>();
+  readonly submitted = output<BankInfoFormValue>();
   /** Emitted when the user clicks Back. */
-  @Output() back = new EventEmitter<void>();
+  readonly back = output<void>();
 
   private readonly fb = inject(FormBuilder);
 
@@ -145,17 +86,20 @@ export class PayoutBankInfoFormComponent {
     providerAgreement: [false, Validators.requiredTrue],
   });
 
-  private readonly selectedCountry = signal<CountryProfile>(this.countryProfiles[0]);
+  private readonly selectedCountry = signal<CountryProfile>(this.countryProfiles()[0]);
 
   readonly taxIdLabel       = computed(() => this.selectedCountry().taxIdLabel);
   readonly taxIdPlaceholder = computed(() => this.selectedCountry().taxIdPlaceholder);
   readonly taxIdHint        = computed(() => this.selectedCountry().taxIdHint);
 
   constructor() {
-    this.form.controls.countryCode.valueChanges.subscribe((code) => {
-      const profile = this.countryProfiles.find((c) => c.code === code) ?? this.countryProfiles[0];
-      this.selectedCountry.set(profile);
-    });
+    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);
+      });
   }
 
   submit() {
@@ -169,7 +113,7 @@ export class PayoutBankInfoFormComponent {
       billingAddress:    v.billingAddress!,
       taxIdType:         country.taxIdType,
       taxId:             v.taxId!,
-      provider:          this.provider,
+      provider:          this.provider(),
       providerAgreement: v.providerAgreement!,
     });
   }

package/src/component/payout/provider_onboarding.html

@@ -0,0 +1,70 @@
+<div class="payout-onboarding">
+  <h2 class="payout-onboarding__title">{{ title() }}</h2>
+
+  <p class="payout-onboarding__intro">
+    Bank routing details are collected by the payout provider, not
+    this application. After this step the provider will run KYC and
+    notify us when the account is ready for payouts.
+  </p>
+
+  @if (reusable().length > 0) {
+    <mat-card class="reuse-card">
+      <mat-card-header>
+        <mat-card-title>Reuse an existing account</mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <p class="hint">
+          You already have a payout account on
+          {{ 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))">
+          @for (acc of reusable(); track acc.providerAccountId) {
+            <mat-radio-button [value]="acc.providerAccountId" class="reuse-option">
+              <strong>{{ acc.partnerCaption }}</strong>
+              — {{ acc.countryCode }} / {{ acc.currency }} ({{ acc.provider }})
+            </mat-radio-button>
+          }
+        </mat-radio-group>
+        <button matButton="filled" class="payout-onboarding__btn payout-onboarding__btn--primary"
+                [disabled]="!selectedAccountId() || busy()"
+                (click)="linkExisting()">
+          Use this account
+        </button>
+      </mat-card-content>
+    </mat-card>
+  }
+
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Set up a new account</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <p class="hint">
+        Opens the provider's secure onboarding page. You'll be asked
+        for bank routing details and government ID. The process
+        usually takes a few minutes.
+      </p>
+      @if (errorMsg()) {
+        <p class="payout-onboarding__error">{{ errorMsg() }}</p>
+      }
+      <button matButton="filled" class="payout-onboarding__btn payout-onboarding__btn--primary"
+              [disabled]="busy()"
+              (click)="startProviderKyc()">
+        <mat-icon>open_in_new</mat-icon>
+        Start onboarding
+      </button>
+    </mat-card-content>
+  </mat-card>
+
+  <div class="payout-onboarding__nav">
+    @if (showBack()) {
+      <button matButton="outlined" class="payout-onboarding__btn" type="button" (click)="back.emit()">
+        &lt; Back
+      </button>
+    }
+    <button matButton="outlined" class="payout-onboarding__btn" type="button" (click)="skipped.emit()">
+      {{ skipLabel() }}
+    </button>
+  </div>
+</div>

package/src/component/payout/provider_onboarding.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
@@ -26,78 +26,7 @@ import { ReusableAccount } from '../../model/appdata';
   selector: 'sail-payout-provider-onboarding',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MatButtonModule, MatCardModule, MatIconModule, MatRadioModule],
-  template: `
-    <div class="payout-onboarding">
-      <h2 class="payout-onboarding__title">{{ title }}</h2>
-
-      <p class="payout-onboarding__intro">
-        Bank routing details are collected by the payout provider, not
-        this application. After this step the provider will run KYC and
-        notify us when the account is ready for payouts.
-      </p>
-
-      @if (reusable().length > 0) {
-        <mat-card class="reuse-card">
-          <mat-card-header>
-            <mat-card-title>Reuse an existing account</mat-card-title>
-          </mat-card-header>
-          <mat-card-content>
-            <p class="hint">
-              You already have a payout account on
-              {{ 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))">
-              @for (acc of reusable(); track acc.providerAccountId) {
-                <mat-radio-button [value]="acc.providerAccountId" class="reuse-option">
-                  <strong>{{ acc.partnerCaption }}</strong>
-                  — {{ acc.countryCode }} / {{ acc.currency }} ({{ acc.provider }})
-                </mat-radio-button>
-              }
-            </mat-radio-group>
-            <button mat-flat-button class="payout-onboarding__btn payout-onboarding__btn--primary"
-                    [disabled]="!selectedAccountId() || busy()"
-                    (click)="linkExisting()">
-              Use this account
-            </button>
-          </mat-card-content>
-        </mat-card>
-      }
-
-      <mat-card>
-        <mat-card-header>
-          <mat-card-title>Set up a new account</mat-card-title>
-        </mat-card-header>
-        <mat-card-content>
-          <p class="hint">
-            Opens the provider's secure onboarding page. You'll be asked
-            for bank routing details and government ID. The process
-            usually takes a few minutes.
-          </p>
-          @if (errorMsg()) {
-            <p class="payout-onboarding__error">{{ errorMsg() }}</p>
-          }
-          <button mat-flat-button class="payout-onboarding__btn payout-onboarding__btn--primary"
-                  [disabled]="busy()"
-                  (click)="startProviderKyc()">
-            <mat-icon>open_in_new</mat-icon>
-            Start onboarding
-          </button>
-        </mat-card-content>
-      </mat-card>
-
-      <div class="payout-onboarding__nav">
-        @if (showBack) {
-          <button mat-stroked-button class="payout-onboarding__btn" type="button" (click)="back.emit()">
-            &lt; Back
-          </button>
-        }
-        <button mat-stroked-button class="payout-onboarding__btn" type="button" (click)="skipped.emit()">
-          {{ skipLabel }}
-        </button>
-      </div>
-    </div>
-  `,
+  templateUrl: './provider_onboarding.html',
   styles: `
     .payout-onboarding { display: flex; flex-direction: column; gap: 16px; padding: 0 24px 32px; }
     .payout-onboarding__title { margin: 0; }
@@ -113,20 +42,20 @@ import { ReusableAccount } from '../../model/appdata';
 })
 export class PayoutProviderOnboardingComponent implements OnInit {
   /** Step title — defaults match the most common payout-step framing. */
-  @Input() title = 'Bank Account Setup';
+  readonly title = input('Bank Account Setup');
   /** Skip-button label — covers wizards where skipping returns to the parent flow. */
-  @Input() skipLabel = "I'll do this later";
+  readonly skipLabel = input("I'll do this later");
   /** When true, the back button renders alongside skip. */
-  @Input() showBack = true;
+  readonly showBack = input(true);
 
   /** Emitted after a successful reuse-link operation. */
-  @Output() linked = new EventEmitter<void>();
+  readonly linked = output<void>();
   /** Emitted when the user dismisses the step (skip). */
-  @Output() skipped = new EventEmitter<void>();
+  readonly skipped = output<void>();
   /** Emitted when the user clicks Back. */
-  @Output() back = new EventEmitter<void>();
+  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. */
-  @Output() started = new EventEmitter<void>();
+  readonly started = output<void>();
 
   private readonly payoutService = inject(PayoutService);
 

package/src/component/security/trusted_devices.html

@@ -31,7 +31,7 @@
               <td>{{ formatDate(device.last_used_at) }}</td>
               <td>{{ formatDate(device.created_at) }}</td>
               <td>
-                <button mat-icon-button (click)="revokeDevice(device)" title="Revoke">
+                <button matIconButton (click)="revokeDevice(device)" title="Revoke">
                   <mat-icon>delete</mat-icon>
                 </button>
               </td>
@@ -58,15 +58,15 @@
           <input matInput type="password" formControlName="password" autocomplete="current-password" required>
         </mat-form-field>
         <div class="auth-actions">
-          <button mat-raised-button class="warn" type="submit" [disabled]="!logoutForm.valid || loading()">
+          <button matButton="elevated" class="warn" type="submit" [disabled]="!logoutForm.valid || loading()">
             Sign out everywhere
           </button>
-          <button mat-button type="button" (click)="logoutOpen.set(false)">Cancel</button>
+          <button matButton type="button" (click)="logoutOpen.set(false)">Cancel</button>
         </div>
       </form>
     } @else {
       <div class="auth-actions">
-        <button mat-button class="warn" type="button" (click)="logoutOpen.set(true)" [disabled]="loading()">
+        <button matButton class="warn" type="button" (click)="logoutOpen.set(true)" [disabled]="loading()">
           Sign out of all devices
         </button>
         <a routerLink="/dashboard">Back to Dashboard</a>

package/src/component/security/trusted_devices.ts

@@ -10,7 +10,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
 
 @Component({
-  selector: 'app-trusted-devices',
+  selector: 'sail-trusted-devices',
   templateUrl: './trusted_devices.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

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_setup.ts

@@ -5,9 +5,10 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink } from '@angular/router';
+import { BaseAsync } from '../abstract/base_async';
 
 @Component({
-  selector: 'app-twofactor-setup',
+  selector: 'sail-twofactor-setup',
   templateUrl: './twofactor_setup.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -19,7 +20,7 @@ import { RouterLink } from '@angular/router';
     RouterLink,
   ],
 })
-export class TwoFactorSetupComponent {
+export class TwoFactorSetupComponent extends BaseAsync {
   private readonly auth = inject(BaseAuthService);
   private readonly fb = inject(FormBuilder);
 
@@ -27,8 +28,6 @@ export class TwoFactorSetupComponent {
   readonly qrUri = signal('');
   readonly secret = signal('');
   readonly backupCodes = signal<string[]>([]);
-  readonly errorMessage = signal('');
-  readonly successMessage = signal('');
 
   // setup2FA requires the user's current password (or current TOTP code
   // if 2FA already enabled — pass twoFactorCode instead). Disable additionally
@@ -48,20 +47,18 @@ export class TwoFactorSetupComponent {
 
   startSetup() {
     if (this.initForm.invalid) return;
-    this.errorMessage.set('');
     const password = this.initForm.value.password!;
-    this.auth.setup2FA({ password }).subscribe({
-      next: (res) => {
+    this.run(
+      this.auth.setup2FA({ password }),
+      (res) => {
         this.qrUri.set(res.qrUri);
         this.secret.set(res.secret);
         this.backupCodes.set(res.backupCodes);
         this.step.set('qr');
         this.initForm.reset();
       },
-      error: (err) => {
-        this.errorMessage.set(err.error?.message ?? '2FA setup failed.');
-      },
-    });
+      '2FA setup failed.',
+    );
   }
 
   proceedToVerify() {
@@ -70,11 +67,10 @@ export class TwoFactorSetupComponent {
 
   confirmSetup() {
     if (this.verifyForm.invalid) return;
-    this.errorMessage.set('');
-
     const { code } = this.verifyForm.value;
-    this.auth.verify2FA({ code: code! }).subscribe({
-      next: (res) => {
+    this.run(
+      this.auth.verify2FA({ code: code! }),
+      (res) => {
         if (res.valid) {
           this.successMessage.set('Two-factor authentication enabled.');
           this.step.set('done');
@@ -82,25 +78,21 @@ export class TwoFactorSetupComponent {
           this.errorMessage.set('Invalid code. Please try again.');
         }
       },
-      error: (err) => {
-        this.errorMessage.set(err.error?.message ?? 'Verification failed.');
-      },
-    });
+      'Verification failed.',
+    );
   }
 
   disable2FA() {
     if (this.disableForm.invalid) return;
-    this.errorMessage.set('');
     const { password, code } = this.disableForm.value;
-    this.auth.disable2FA(password!, code!).subscribe({
-      next: () => {
+    this.run(
+      this.auth.disable2FA(password!, code!),
+      () => {
         this.successMessage.set('Two-factor authentication disabled.');
         this.step.set('init');
         this.disableForm.reset();
       },
-      error: (err) => {
-        this.errorMessage.set(err.error?.message ?? 'Failed to disable 2FA.');
-      },
-    });
+      'Failed to disable 2FA.',
+    );
   }
 }

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/security/twofactor_verify.ts

@@ -7,9 +7,10 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import { BaseAsync } from '../abstract/base_async';
 
 @Component({
-  selector: 'app-twofactor-verify',
+  selector: 'sail-twofactor-verify',
   templateUrl: './twofactor_verify.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -22,13 +23,12 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
     RouterLink,
   ],
 })
-export class TwoFactorVerifyComponent {
+export class TwoFactorVerifyComponent extends BaseAsync {
   private readonly auth = inject(BaseAuthService);
   private readonly fb = inject(FormBuilder);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
 
   readonly useBackupCode = signal(false);
-  readonly errorMessage = signal('');
 
   readonly verifyForm = this.fb.group({
     code: ['', [Validators.required, Validators.minLength(6)]],
@@ -38,18 +38,17 @@ export class TwoFactorVerifyComponent {
   toggleBackupCode() {
     this.useBackupCode.update(v => !v);
     this.verifyForm.controls.code.reset();
-    this.errorMessage.set('');
+    this.clearMessages();
   }
 
   verify() {
     if (this.verifyForm.invalid) return;
-    this.errorMessage.set('');
-
     const { code, trustDevice } = this.verifyForm.value;
 
     if (this.useBackupCode()) {
-      this.auth.verifyBackupCode(code!).subscribe({
-        next: (res) => {
+      this.run(
+        this.auth.verifyBackupCode(code!),
+        (res) => {
           if (res.valid && res.token) {
             localStorage.removeItem('loginToken');
             this.auth.token = res.token;
@@ -61,11 +60,10 @@ export class TwoFactorVerifyComponent {
             this.errorMessage.set('Invalid backup code.');
           }
         },
-        error: (err) => {
-          this.errorMessage.set(err.error?.message ?? 'Backup code verification failed.');
-        },
-      });
+        'Backup code verification failed.',
+      );
     } else {
+      this.clearMessages();
       this.auth.verify2FALogin(
         code!,
         trustDevice ?? false,

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> }
@@ -26,20 +26,20 @@
     </thead>
     <tbody>
         @for (record of records; track $index) {
-            <tr [class.deleted-record]="record[config.opField] === 'D'" [class.updated-record]="record[config.opField] === 'U'" [class.new-record]="record[config.opField] === 'I'">
+            <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) {
                         <td>
                             @if (isReadOnly(col)) {
                                 {{ record[col] }}
                             } @else {
-                                <dynamic-field [tableName]="tableName" [value]="record[col]" [field]="col" (valueChange)="record[col]=$event" subscriptSizing="dynamic"></dynamic-field>
+                                <sail-dynamic-field [tableName]="tableName()" [value]="record[col]" [field]="col" (valueChange)="record[col]=$event" subscriptSizing="dynamic"></sail-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>
+                        @if (isDeleted(record)) {
+                            <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') {
+                        @if (!isInserted(record)) {
                             @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>