@nauticana/sail 0.7.0 → 0.8.1

package/src/component/abstract/base_table.ts

@@ -1,59 +1,69 @@
-import { inject } from "@angular/core";
+import { inject, signal, WritableSignal } from "@angular/core";
 import { ForeignKey, TableAction, TableColumn, TableDefinition } from "../../model/appdata";
-import { ConstantValue } from "../../model/common";
+import { ConstantValue, LookupStyle, OpCode } from "../../model/common";
 import { BaseAuthService } from "../../service/auth.service";
+import { BackendService } from "../../service/rest_service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
+import { titleCase } from "../../util/text";
+
+
+/** CRUD verb used by `requireAuth()` to compose the "Missing authorization" alert. */
+export type AuthVerb = 'create' | 'read' | 'update' | 'delete' | 'view';
 
 
 export abstract class BaseTable {
     protected readonly cacheService = inject(BaseAuthService);
+    protected readonly backendService = inject(BackendService);
     protected readonly config: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
     protected readonly dialogWidth: string = '400px';
-    tableName = '';
+    readonly tableName: WritableSignal<string> = signal('');
+    /** Optional consumer-set override; when empty the title-cased table name is used. */
     caption = '';
+    /** Consumer-set per-field option overrides (per fieldName). When unset, options come from the column's LookupDomain / LookupTable. */
     fieldOptions: {[key: string]: ConstantValue[]} = {};
-    fieldLabels: {[key: string]: string} = {};
     isReadOnlyBound = this.isReadOnly.bind(this);
 
     isReadOnly(_fieldName: string): boolean {
         return false;
     }
 
-    titleCase(str: string): string {
-        return str.replaceAll('_', ' ').toLowerCase().split(' ').map((word: string) => {
-                return word.charAt(0).toUpperCase() + word.slice(1);
-        }).join(' ');
-    }
+    /** Re-exported on the class so templates can call `titleCase(x)` without an extra import in the consumer. */
+    titleCase(str: string): string { return titleCase(str); }
 
-    getCaption() {
-        if (!this.caption) {
-            this.caption = this.titleCase(this.tableName);
-        }
-        return this.caption;
+    /** Display title for the active table; recomputes when `tableName` changes. */
+    getCaption(): string {
+        return this.caption || titleCase(this.tableName());
     }
 
+    /** Display label for a column; uses the metadata Caption, otherwise title-cases the field name. */
     colCaption(fieldName: string): string {
-        if (!this.fieldLabels[fieldName]) {
-            const col = this.getColumn(fieldName);
-            this.fieldLabels[fieldName] = col?.Caption || this.titleCase(fieldName);
-        }
-        return this.fieldLabels[fieldName];
-    }
-
-    canRead() {
-        return this.cacheService.canRead(this.tableName);
+        const col = this.getColumn(fieldName);
+        return col?.Caption || titleCase(fieldName);
     }
 
-    canCreate() {
-        return this.cacheService.canCreate(this.tableName);
-    }
+    canRead()   { return this.cacheService.canRead(this.tableName()); }
+    canCreate() { return this.cacheService.canCreate(this.tableName()); }
+    canUpdate() { return this.cacheService.canUpdate(this.tableName()); }
+    canDelete() { return this.cacheService.canDelete(this.tableName()); }
 
-    canUpdate() {
-        return this.cacheService.canUpdate(this.tableName);
-    }
+    /** True when the record is a locally-inserted row not yet persisted (op_code === 'I'). */
+    isInserted(record: Record<string, unknown>): boolean { return record[this.config.opField] === OpCode.Insert; }
+    /** True when the record is marked for update (op_code === 'U'). */
+    isUpdated(record: Record<string, unknown>):  boolean { return record[this.config.opField] === OpCode.Update; }
+    /** True when the record is marked for delete (op_code === 'D'). */
+    isDeleted(record: Record<string, unknown>):  boolean { return record[this.config.opField] === OpCode.Delete; }
 
-    canDelete() {
-        return this.cacheService.canDelete(this.tableName);
+    /**
+     * Authorization guard with shared "Missing authorization" copy. Pass the
+     * permission predicate (typically a `canX()` method on this class) and
+     * the verb that fills the alert. Returns true when allowed.
+     *
+     *   if (!this.requireAuth(() => this.canDelete(), 'delete')) return;
+     */
+    protected requireAuth(check: () => boolean, verb: AuthVerb): boolean {
+        if (check()) return true;
+        alert(`Missing authorization to ${verb} records`);
+        return false;
     }
 
     /**
@@ -62,7 +72,7 @@ export abstract class BaseTable {
      * when the table has no custom actions.
      */
     getActions(recordSpecific?: boolean): TableAction[] {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const tableDef = this.cacheService.getTableDefinition(this.tableName());
         const actions = tableDef?.Actions ?? [];
         if (recordSpecific === undefined) return [...actions].sort(this.sortActions);
         return actions.filter((a) => a.recordSpecific === recordSpecific).sort(this.sortActions);
@@ -78,7 +88,56 @@ export abstract class BaseTable {
      * action button should render.
      */
     canExecuteAction(action: TableAction): boolean {
-        return this.cacheService.canExecute(action.authorityObject, action.authorityCheck, this.tableName);
+        return this.cacheService.canExecute(action.authorityObject, action.authorityCheck, this.tableName());
+    }
+
+    /**
+     * Fire a TableAction. Template method:
+     *
+     *   1. Authorization check + alert  (shared)
+     *   2. Subclass-specific pre-flight guard via `beforeExecuteAction()` —
+     *      returns false to abort silently (the hook has already shown its
+     *      own alert).
+     *   3. Optional confirm prompt from `action.confirmMessage`
+     *   4. POST `{}` for table-level actions or `primaryKeyValues(record)`
+     *      for record-specific actions
+     *   5. On success, dispatch `onActionSuccess()` so subclasses can refresh
+     *      their views; on error, log and alert.
+     *
+     * Subclasses typically only override the two hooks.
+     */
+    executeAction(action: TableAction, record?: Record<string, unknown>): void {
+        if (!this.canExecuteAction(action)) {
+            alert(`Missing authorization for action ${action.authorityObject}/${action.authorityCheck}`);
+            return;
+        }
+        if (!this.beforeExecuteAction(action, record)) return;
+        if (action.confirmMessage && !confirm(action.confirmMessage)) return;
+        const body = action.recordSpecific && record ? this.primaryKeyValues(record) : {};
+        this.backendService.executeAction(action.method, body).subscribe({
+            next: () => this.onActionSuccess(action, record),
+            error: (err) => {
+                console.error(`Action ${action.action} failed`, err);
+                alert(err?.error?.detail ?? `Failed to ${action.caption}`);
+            },
+        });
+    }
+
+    /**
+     * Pre-flight hook for `executeAction()`. Return false to abort the action
+     * (the override should `alert()` or otherwise surface why). Default: allow.
+     */
+    protected beforeExecuteAction(_action: TableAction, _record?: Record<string, unknown>): boolean {
+        return true;
+    }
+
+    /**
+     * Post-success hook for `executeAction()`. Override to refresh the screen
+     * — e.g. `TableList` re-fetches the row list. Default: no-op (screens
+     * driven by parent state, like `TableDetail`, leave refresh to the parent).
+     */
+    protected onActionSuccess(_action: TableAction, _record?: Record<string, unknown>): void {
+        // intentionally empty
     }
 
     /**
@@ -89,7 +148,7 @@ export abstract class BaseTable {
      * does for get / delete.
      */
     primaryKeyValues(record: Record<string, unknown>): Record<string, unknown> {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const tableDef = this.cacheService.getTableDefinition(this.tableName());
         const pk: Record<string, unknown> = {};
         if (!tableDef?.Keys) return pk;
         for (const key of tableDef.Keys) {
@@ -99,9 +158,9 @@ export abstract class BaseTable {
     }
 
     emptyRecord(): any {
-        const record : any = {[this.config.opField]: 'I'}
-        const tableDef = this.cacheService.getTableDefinition(this.tableName);
-        const tableOverride = this.config.tableOverrides?.[this.tableName];
+        const record : any = {[this.config.opField]: OpCode.Insert}
+        const tableDef = this.cacheService.getTableDefinition(this.tableName());
+        const tableOverride = this.config.tableOverrides?.[this.tableName()];
         const editableTimestamps = new Set(tableOverride?.editableTimestamps ?? []);
 
         if (tableDef) {
@@ -141,8 +200,8 @@ export abstract class BaseTable {
     }
 
     getDisplayedColumns(records: any[] = []): string[] {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName);
-        const tableOverride = this.config.tableOverrides?.[this.tableName];
+        const tableDef = this.cacheService.getTableDefinition(this.tableName());
+        const tableOverride = this.config.tableOverrides?.[this.tableName()];
         const hidden = new Set([
             ...this.config.hiddenFields,
             ...(tableOverride?.hiddenFields ?? []),
@@ -162,7 +221,7 @@ export abstract class BaseTable {
     }
 
     getColumn(fieldName: string): TableColumn | undefined {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const tableDef = this.cacheService.getTableDefinition(this.tableName());
         if (tableDef && tableDef.Columns) {
             return tableDef.Columns.find((field) => field.PascalName === fieldName);
         }
@@ -178,7 +237,7 @@ export abstract class BaseTable {
             const match = options?.find(o => o.Value === String(rawValue));
             if (match) return match.Caption ?? String(rawValue);
         }
-        if (col.LookupTable && col.LookupStyle === 'D') {
+        if (col.LookupTable && col.LookupStyle === LookupStyle.Dropdown) {
             const options = this.cacheService.getTableValues(col.LookupTable);
             const match = options?.find(o => o.Value === String(rawValue));
             if (match) return match.Caption ?? String(rawValue);
@@ -261,7 +320,7 @@ export abstract class BaseTable {
     readyToSave(record: any, original?: any) {
         this.restoreRecordTimeStamp(record);
         const op = record[this.config.opField];
-        if (op === 'I' || op === 'D') return; // already marked
+        if (op === OpCode.Insert || op === OpCode.Delete) return; // already marked
         // Original snapshot may carry display-formatted timestamps; restore both
         // sides to the same wire format before comparing, otherwise scalar
         // fields like Passdate look "modified" purely due to formatting.
@@ -269,11 +328,11 @@ export abstract class BaseTable {
             const normalized = { ...original };
             this.restoreRecordTimeStamp(normalized);
             if (!this.isRecordDirty(record, normalized)) {
-                record[this.config.opField] = 'R';
+                record[this.config.opField] = OpCode.Readonly;
                 return;
             }
         }
-        record[this.config.opField] = 'U';
+        record[this.config.opField] = OpCode.Update;
     }
 
     /** Shallow compare of own scalar fields, ignoring child arrays and op_code. */
@@ -290,11 +349,11 @@ export abstract class BaseTable {
     }
 
     getDialogData(record: any, isNew: boolean, readOnlyColumns: string[] = []): any {
-        return {record, tableName: this.tableName, isNew, readOnlyColumns};
+        return {record, tableName: this.tableName(), isNew, readOnlyColumns};
     }
 
     getTableName(fieldName: string): string {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const tableDef = this.cacheService.getTableDefinition(this.tableName());
         if (!tableDef) return '';
         const fk = tableDef.Children?.find((c) => c.PascalName === fieldName);
         return fk ? fk.ChildTable : '';
@@ -308,14 +367,14 @@ export abstract class BaseTable {
         if (col && col.LookupDomain) {
             return this.cacheService.getDomainValues(col.LookupDomain);
         }
-        if (col && col.LookupTable && col.LookupStyle === 'D') {
+        if (col && col.LookupTable && col.LookupStyle === LookupStyle.Dropdown) {
             return this.cacheService.getTableValues(col.LookupTable);
         }
         return undefined;
     }
 
     getKeyFilters(record: any): {[key: string]: string} | undefined {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const tableDef = this.cacheService.getTableDefinition(this.tableName());
         if (!tableDef || !tableDef.Keys || tableDef.Keys.length === 0) {
             return undefined;
         }
@@ -328,7 +387,7 @@ export abstract class BaseTable {
 
     getForeignKeyConfig(parentTable: string): {fk: ForeignKey, parent: TableDefinition} | null{
         if (!parentTable) return null;
-        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const tableDef = this.cacheService.getTableDefinition(this.tableName());
         const parent = this.cacheService.getTableDefinition(parentTable);
         if (!tableDef || !tableDef.Keys || !tableDef.Parents || !parent) return null;
         const fk = tableDef.Parents.find((parent) => parent.ParentTable === parentTable);

package/src/component/abstract/base_view.ts

@@ -1,13 +1,12 @@
-import { Directive, inject, Input } from "@angular/core";
+import { Directive, inject, signal, WritableSignal } from "@angular/core";
 import { BaseTable } from "./base_table";
 import { MatDialog } from "@angular/material/dialog";
 
 @Directive()
 export abstract class BaseView extends BaseTable {
     protected readonly dialog = inject(MatDialog);
-    @Input() override tableName = '';
-    @Input() apiName = '';
-    @Input() dialogComponent: any;
+    readonly apiName: WritableSignal<string> = signal('');
+    readonly dialogComponent: WritableSignal<any> = signal(undefined);
     records: Array<{[key: string]: any}> = [];
     displayedColumns: string[] = [];
     searchTerms: {[key: string]: string} = {};
@@ -31,70 +30,58 @@ export abstract class BaseView extends BaseTable {
     }
 
     trackByRecord(index: number, record: {[key: string]: any}): any {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const tableDef = this.cacheService.getTableDefinition(this.tableName());
         if (!tableDef || !tableDef.Keys || tableDef.Keys.length === 0) return index;
         return tableDef.Keys.map((key) => record[key.PascalName]).join('_');
     }
 
-    addRecord() {
-        if (!this.canCreate()) {
-            alert('Missing authorization to create records');
-            return;
-        }
-        const record = this.emptyRecord();
-
-        if (Object.keys(record).length === 1 && this.records.length > 0) {
-            Object.keys(this.records[0]).forEach((key) => {
-                record[key] = '';
-            });
-        }
+    /**
+     * Shared row-dialog opener. Builds the dialog data and wires the result
+     * straight into `handleUpdate()` (subclass-specific). Used by both
+     * `addRecord()` (new row + empty `original`) and `editRecord()` (existing
+     * row passed through verbatim).
+     */
+    private openRecordDialog(record: {[key: string]: any}, isNew: boolean): void {
+        const dialogData = this.getDialogData(record, isNew);
+        const apiName = this.apiName();
+        if (apiName) dialogData['apiName'] = apiName;
 
-        const dialogRef = this.dialog.open(this.dialogComponent, {
+        this.dialog.open(this.dialogComponent(), {
             width: '90vw',
             maxWidth: '1200px',
             maxHeight: '90vh',
             disableClose: true,
-            data: this.getDialogData(record, true),
+            data: dialogData,
+        }).afterClosed().subscribe((result) => {
+            if (result) this.handleUpdate(result, isNew, isNew ? {} : record);
         });
+    }
 
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result) this.handleUpdate(result, true, {});
-        });
+    addRecord() {
+        if (!this.requireAuth(() => this.canCreate(), 'create')) return;
+        const record = this.emptyRecord();
+        // Seed columns from an existing row when emptyRecord() returned just the
+        // op-code field (table metadata wasn't loaded yet).
+        if (Object.keys(record).length === 1 && this.records.length > 0) {
+            Object.keys(this.records[0]).forEach((key) => { record[key] = ''; });
+        }
+        this.openRecordDialog(record, true);
     }
 
     /**
      * Open the row dialog. Renamed conceptually from "edit": when the user
-     * has only `canRead()` , we still want to show them the record + child rows.
+     * has only `canRead()`, we still want to show them the record + child rows.
      * The dialog itself (TableEdit) handles read-only mode — its Edit/New/Delete
      * buttons are gated by the same permissions.
      * Block only when neither read nor update is granted.
      */
     editRecord(record: {[key: string]: any}) {
-        if (!this.canUpdate() && !this.canRead()) {
-            alert('Missing authorization to view records');
-            return;
-        }
-        const dialogData = this.getDialogData(record, false);
-        if (this.apiName) {
-            dialogData['apiName'] = this.apiName;
-        }
-        const dialogRef = this.dialog.open(this.dialogComponent, {
-            width: '90vw',
-            maxWidth: '1200px',
-            maxHeight: '90vh',
-            disableClose: true,
-            data: dialogData,
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result) this.handleUpdate(result, false, record);
-        });
+        if (!this.canUpdate() && !this.requireAuth(() => this.canRead(), 'view')) return;
+        this.openRecordDialog(record, false);
     }
 
     deleteRecord(record: {[key: string]: any}) {
-        if (!this.canDelete()) {
-            alert('Missing authorization to delete records');
-            return;
-        }
+        if (!this.requireAuth(() => this.canDelete(), 'delete')) return;
         this.handleDelete(record);
     }
 }

package/src/component/billing/checkout_button.html

@@ -1,5 +1,5 @@
 <div class="checkout-button">
-  <button mat-raised-button class="primary" type="button"
+  <button matButton="elevated" class="primary" type="button"
           [disabled]="loading()"
           (click)="startCheckout()">
     @if (loading()) { Starting checkout… } @else { {{ label() }} }

package/src/component/billing/checkout_button.ts

@@ -13,7 +13,7 @@ import { CheckoutMode } from '../../model/appdata';
  * rejected with 400.
  */
 @Component({
-  selector: 'app-checkout-button',
+  selector: 'sail-checkout-button',
   templateUrl: './checkout_button.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/billing/payment_methods.ts

@@ -11,7 +11,7 @@ import { PaymentMethod } from '../../model/appdata';
  * `[portalUrl]` to show it; otherwise the button is hidden.
  */
 @Component({
-  selector: 'app-payment-methods',
+  selector: 'sail-payment-methods',
   templateUrl: './payment_methods.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/billing/plan_selector.html

@@ -13,7 +13,7 @@
           }
         </ul>
       }
-      <button mat-raised-button class="primary" type="button" (click)="onSelect(plan.id)">
+      <button matButton="elevated" class="primary" type="button" (click)="onSelect(plan.id)">
         @if (plan.id === selected()) { Selected } @else { Choose }
       </button>
     </div>

package/src/component/billing/plan_selector.ts

@@ -7,7 +7,7 @@ import { PublicPlan } from '../../model/appdata';
  * The caller provides the plans and handles the selection event.
  */
 @Component({
-  selector: 'app-plan-selector',
+  selector: 'sail-plan-selector',
   templateUrl: './plan_selector.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/form/form_field.html

@@ -2,7 +2,7 @@
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
         <input matInput [value]="readonlyField() ? displayCaption : value()" [required]="required" [readonly]="readonlyField()">
-        <button mat-icon-button matSuffix (click)="openLookup()" [disabled]="readonlyField()">
+        <button matIconButton matSuffix (click)="openLookup()" [disabled]="readonlyField()">
             <mat-icon>search</mat-icon>
         </button>
     </mat-form-field>

package/src/component/form/form_field.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, Input, input, output, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, input, linkedSignal, output, ViewEncapsulation } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatDialog } from "@angular/material/dialog";
@@ -7,11 +7,11 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatInputModule } from "@angular/material/input";
 import { MatSelectModule } from "@angular/material/select";
 import { BaseTable } from "../abstract/base_table";
-import { ConstantValue } from "../../model/common";
+import { ConstantValue, LookupStyle } from "../../model/common";
 import { TableLookup } from "../table/table_lookup";
 
 @Component({
-    selector: 'dynamic-field',
+    selector: 'sail-dynamic-field',
     templateUrl: './form_field.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
@@ -31,8 +31,7 @@ import { TableLookup } from "../table/table_lookup";
     ]
 })
 export class DynamicField extends BaseTable {
-    // @Input() required — signal input not possible due to BaseTable inheritance chain
-    @Input() override tableName = '';
+    protected readonly tableNameInput = input('', { alias: 'tableName' });
     readonly value = input<any>(undefined);
     readonly valueChange = output<any>();
     readonly recordUpdate = output<{[key: string]: any}>();
@@ -42,6 +41,8 @@ export class DynamicField extends BaseTable {
     readonly subscriptSizing = input<'fixed' | 'dynamic'>('dynamic');
     readonly appearance = input<'fill' | 'outline'>('outline');
 
+    override readonly tableName = linkedSignal<string, string>({ source: () => this.tableNameInput(), computation: (v, p) => v || p?.value || '' });
+
     private readonly dialog = inject(MatDialog);
 
     get col() {
@@ -49,7 +50,7 @@ export class DynamicField extends BaseTable {
     }
 
     get inputType() {
-        if (!this.col || !this.col.InputType || this.col.LookupStyle === 'S') return 'text';
+        if (!this.col || !this.col.InputType || this.col.LookupStyle === LookupStyle.Search) return 'text';
         return this.col.InputType;
     }
 
@@ -86,7 +87,7 @@ export class DynamicField extends BaseTable {
     }
 
     isLookupTableSearch(): boolean {
-        return !!(this.col && this.col.LookupTable && this.col.LookupStyle === 'S');
+        return !!(this.col && this.col.LookupTable && this.col.LookupStyle === LookupStyle.Search);
     }
 
     get maxLength() {

package/src/component/form/form_record.html

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

package/src/component/form/form_record.ts

@@ -4,7 +4,7 @@ import { BaseAuthService } from "../../service/auth.service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
 
 @Component({
-    selector: 'record-form',
+    selector: 'sail-record-form',
     templateUrl: './form_record.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,

package/src/component/form/form_table.html

@@ -6,14 +6,14 @@
             {{ getCaption() }} Details
         }
     </span>
-    <button mat-icon-button type="button" (click)="onCancel()" aria-label="Close dialog" class="table-form-close">
+    <button matIconButton type="button" (click)="onCancel()" aria-label="Close dialog" class="table-form-close">
         <mat-icon>close</mat-icon>
     </button>
 </h1>
 <div mat-dialog-content>
-    <record-form [tableName]="tableName" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></record-form>
+    <sail-record-form [tableName]="tableName()" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></sail-record-form>
 </div>
 <div mat-dialog-actions align="end">
-    <button mat-raised-button class="primary" type="submit" (click)="onSave()">Save</button>
-    <button mat-button type="button" (click)="onCancel()">Cancel</button>
+    <button matButton="elevated" class="primary" type="submit" (click)="onSave()">Save</button>
+    <button matButton type="button" (click)="onCancel()">Cancel</button>
 </div>

package/src/component/form/form_table.ts

@@ -14,7 +14,7 @@ interface TableFormDialogData {
 }
 
 @Component({
-    selector: 'table-form',
+    selector: 'sail-table-form',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     templateUrl: './form_table.html',
@@ -36,7 +36,7 @@ export class TableForm extends BaseForm {
     constructor() {
         super();
         this.editableRecord = {...this.data.record};
-        this.tableName = this.data.tableName;
+        this.tableName.set(this.data.tableName);
         this.isNew = !!this.data.isNew;
         this.readOnlyColumns = this.data.readOnlyColumns ?? [];
     }

package/src/component/login/account_deletion.html

@@ -23,7 +23,7 @@
         <textarea matInput rows="3" formControlName="reason"></textarea>
       </mat-form-field>
 
-      <button mat-raised-button class="warn" type="submit" [disabled]="!canSubmit()">
+      <button matButton="elevated" class="warn" type="submit" [disabled]="!canSubmit()">
         @if (loading()) { Deleting… } @else { Permanently delete account }
       </button>
 

package/src/component/login/account_deletion.ts

@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input, 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 { MatFormFieldModule } from '@angular/material/form-field';
@@ -23,7 +24,7 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
  * `/login/local`).
  */
 @Component({
-  selector: 'app-account-deletion',
+  selector: 'sail-account-deletion',
   templateUrl: './account_deletion.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -59,7 +60,9 @@ export class AccountDeletionComponent extends BaseAsync {
 
   constructor() {
     super();
-    this.form.controls.confirm.valueChanges.subscribe((v) => this.typedValue.set(v ?? ''));
+    this.form.controls.confirm.valueChanges
+      .pipe(takeUntilDestroyed())
+      .subscribe((v) => this.typedValue.set(v ?? ''));
   }
 
   onDelete() {

package/src/component/login/chpass_component.html

@@ -43,7 +43,7 @@
         <div class="auth-success" role="status">{{ successMessage() }}</div>
       }
 
-      <button mat-raised-button class="primary" type="submit" [disabled]="!chpassForm.valid">
+      <button matButton="elevated" class="primary" type="submit" [disabled]="!chpassForm.valid">
         @if (forgotPassword()) {
           Send Confirmation Code
         } @else {