@nauticana/sail 0.7.0 → 0.8.0

package/src/component/login/confirm_register_component.html

@@ -26,7 +26,7 @@
         <div class="auth-success" role="status">{{ successMessage() }}</div>
       }
 
-      <button mat-raised-button class="primary" type="submit" [disabled]="!confirmForm.valid">
+      <button matButton="elevated" class="primary" type="submit" [disabled]="!confirmForm.valid">
         Confirm
       </button>
     </form>

package/src/component/login/login_component.html

@@ -18,7 +18,7 @@
         <mat-label>Password</mat-label>
         <input matInput type="password" formControlName="password" required>
       </mat-form-field>
-      <button mat-raised-button class="primary" type="submit" [disabled]="!loginForm.valid">
+      <button matButton="elevated" class="primary" type="submit" [disabled]="!loginForm.valid">
         Login
       </button>
     </form>

package/src/component/login/otp_input.html

@@ -16,7 +16,7 @@
 
   <p class="otp-resend">
     @if (canResend()) {
-      <button mat-button class="resend-btn" type="button" (click)="onResend()">Resend code</button>
+      <button matButton class="resend-btn" type="button" (click)="onResend()">Resend code</button>
     } @else {
       Resend code in {{ countdown() }}s
     }
@@ -27,11 +27,11 @@
       @if (key === '') {
         <div class="keypad-spacer"></div>
       } @else if (key === 'back') {
-        <button mat-button class="keypad-key" type="button" (click)="onBackspace()" aria-label="Backspace" [disabled]="disabled()">
+        <button matButton class="keypad-key" type="button" (click)="onBackspace()" aria-label="Backspace" [disabled]="disabled()">
           <mat-icon>backspace</mat-icon>
         </button>
       } @else {
-        <button mat-button class="keypad-key" type="button" (click)="onKeyPress(key)" [disabled]="disabled()">{{ key }}</button>
+        <button matButton class="keypad-key" type="button" (click)="onKeyPress(key)" [disabled]="disabled()">{{ key }}</button>
       }
     }
   </div>

package/src/component/login/register_component.html

@@ -120,7 +120,7 @@
         <div class="geocode-status geocode-error" role="alert">{{ registerError() }}</div>
       }
 
-      <button mat-raised-button class="primary" type="submit"
+      <button matButton="elevated" class="primary" type="submit"
         [disabled]="!registerForm.valid || geocodeStatus() !== 'success'">
         Create Account
       </button>

package/src/component/navigation/navigation.html

@@ -29,7 +29,7 @@
     <mat-sidenav-content>
         <mat-toolbar class="primary">
             @if (isHandset()) {
-                <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="sidenav.toggle()">
+                <button type="button" aria-label="Toggle sidenav" matIconButton (click)="sidenav.toggle()">
                     <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
                 </button>
             }
@@ -37,10 +37,10 @@
             <span class="toolbar-spacer"></span>
             <ng-content select="[toolbar-actions]"></ng-content>
             @if (isLoggedIn()) {
-                <button mat-button (click)="logout()">Logout</button>
+                <button matButton (click)="logout()">Logout</button>
             } @else if (guiConfig.publicRouteLinks) {
                 @for (link of guiConfig.publicRouteLinks; track link.routerLink) {
-                    <a mat-button [routerLink]="link.routerLink">{{ link.label }}</a>
+                    <a matButton [routerLink]="link.routerLink">{{ link.label }}</a>
                 }
             }
         </mat-toolbar>

package/src/component/payment/user_payment_methods.html

@@ -0,0 +1,46 @@
+<div class="user-payment-methods">
+  <h2 class="user-payment-methods__title">{{ title() }}</h2>
+
+  @if (showAdd()) {
+    <button matButton="elevated"
+            class="user-payment-methods__add accent"
+            (click)="addClicked.emit()">
+      <mat-icon>add</mat-icon> {{ addLabel() }}
+    </button>
+  }
+
+  @if (methods().length === 0 && !loading()) {
+    <p class="user-payment-methods__empty">{{ emptyLabel() }}</p>
+  }
+
+  @for (m of methods(); track m.Id) {
+    <mat-card class="user-payment-methods__item">
+      <mat-card-content>
+        <div class="user-payment-methods__row">
+          <div class="user-payment-methods__info">
+            <mat-icon>{{ iconFor(m) }}</mat-icon>
+            <span class="user-payment-methods__brand">{{ m.Brand || m.MethodType }}</span>
+            @if (m.LastFour) {
+              <span class="user-payment-methods__last4">•••• {{ m.LastFour }}</span>
+            }
+            @if (m.IsDefault) {
+              <span class="user-payment-methods__default">Default</span>
+            }
+          </div>
+          <div class="user-payment-methods__actions">
+            @if (!m.IsDefault) {
+              <button matButton (click)="setDefault(m)">Set default</button>
+            }
+            <button matIconButton (click)="remove(m)" aria-label="Delete payment method">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  }
+
+  @if (errorMsg()) {
+    <p class="user-payment-methods__error">{{ errorMsg() }}</p>
+  }
+</div>

package/src/component/payment/user_payment_methods.ts

@@ -1,5 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation, inject, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, 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';
@@ -23,55 +22,8 @@ import { UserPaymentMethod } from '../../model/appdata';
   selector: 'sail-user-payment-methods',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  imports: [CommonModule, MatButtonModule, MatCardModule, MatIconModule],
-  template: `
-    <div class="user-payment-methods">
-      <h2 class="user-payment-methods__title">{{ title }}</h2>
-
-      @if (showAdd) {
-        <button mat-raised-button color="accent"
-                class="user-payment-methods__add"
-                (click)="addClicked.emit()">
-          <mat-icon>add</mat-icon> {{ addLabel }}
-        </button>
-      }
-
-      @if (methods().length === 0 && !loading()) {
-        <p class="user-payment-methods__empty">{{ emptyLabel }}</p>
-      }
-
-      @for (m of methods(); track m.Id) {
-        <mat-card class="user-payment-methods__item">
-          <mat-card-content>
-            <div class="user-payment-methods__row">
-              <div class="user-payment-methods__info">
-                <mat-icon>{{ iconFor(m) }}</mat-icon>
-                <span class="user-payment-methods__brand">{{ m.Brand || m.MethodType }}</span>
-                @if (m.LastFour) {
-                  <span class="user-payment-methods__last4">•••• {{ m.LastFour }}</span>
-                }
-                @if (m.IsDefault) {
-                  <span class="user-payment-methods__default">Default</span>
-                }
-              </div>
-              <div class="user-payment-methods__actions">
-                @if (!m.IsDefault) {
-                  <button mat-button (click)="setDefault(m)">Set default</button>
-                }
-                <button mat-icon-button (click)="remove(m)" aria-label="Delete payment method">
-                  <mat-icon>delete</mat-icon>
-                </button>
-              </div>
-            </div>
-          </mat-card-content>
-        </mat-card>
-      }
-
-      @if (errorMsg()) {
-        <p class="user-payment-methods__error">{{ errorMsg() }}</p>
-      }
-    </div>
-  `,
+  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; }
@@ -88,17 +40,17 @@ import { UserPaymentMethod } from '../../model/appdata';
   `,
 })
 export class UserPaymentMethodsComponent extends BaseAsync implements OnInit {
-  @Input() title = 'Payment Methods';
-  @Input() addLabel = 'Add Payment Method';
-  @Input() emptyLabel = 'No saved payment methods yet.';
-  @Input() showAdd = true;
+  readonly title = input('Payment Methods');
+  readonly addLabel = input('Add Payment Method');
+  readonly emptyLabel = input('No saved payment methods yet.');
+  readonly showAdd = input(true);
 
   /** Emitted when the "Add" button is tapped. Consumer routes to its SetupIntent flow. */
-  @Output() addClicked = new EventEmitter<void>();
+  readonly addClicked = output<void>();
   /** Emitted after a successful set-default flip. */
-  @Output() defaultChanged = new EventEmitter<UserPaymentMethod>();
+  readonly defaultChanged = output<UserPaymentMethod>();
   /** Emitted after a successful delete. */
-  @Output() deleted = new EventEmitter<UserPaymentMethod>();
+  readonly deleted = output<UserPaymentMethod>();
 
   private readonly service = inject(UserPaymentMethodService);
 

package/src/component/payout/bank_info_form.html

@@ -0,0 +1,59 @@
+<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 matButton="outlined" class="pill-btn" type="button" (click)="back.emit()">
+          &lt; Back
+        </button>
+      }
+      <button matButton="filled" class="pill-btn primary-btn" type="submit"
+              [disabled]="form.invalid">
+        {{ submitLabel() }}
+      </button>
+    </div>
+  </form>
+</div>

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>