@forgeroute/ui 0.4.19 → 0.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.4.19",
+  "version": "0.4.21",
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",

package/types/forgeroute-ui.d.ts

@@ -480,6 +480,8 @@ export declare class PaginationComponent {
   readonly totalItems: import("@angular/core").InputSignal<number>;
   /** Standalone look (full border, full radius, small top margin) for use under separate cards rather than flush under a table. */
   readonly detached: import("@angular/core").InputSignal<boolean>;
+  /** Embedded look for a container that already has its own background and edge (a `ui-detail-card` footer, a panel): transparent, no border, no radius, no padding. Default false: unchanged. Wins over `detached`. */
+  readonly embedded: import("@angular/core").InputSignal<boolean>;
   readonly pageChange: import("@angular/core").OutputEmitterRef<number>;
   readonly totalPages: import("@angular/core").Signal<number>;
   readonly startItem: import("@angular/core").Signal<number>;
@@ -508,6 +510,11 @@ export declare class PaginationComponent {
       "required": false;
       "isSignal": true;
     };
+    "embedded": {
+      "alias": "embedded";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "pageChange": "pageChange";
   }, never, never, true, never>;
@@ -959,6 +966,12 @@ export interface SelectOption<V extends string | number = string> {
    * Options without it are unchanged.
    */
   badge?: string;
+  /**
+   * Optional: list the choice but make it unselectable (native `<option disabled>`). Use it for an entry that must stay visible because it is the
+   * CURRENT value (e.g. an owner who is no longer active) but must not be picked. A disabled option that equals the current value is still shown as
+   * selected and still counts as a valid value; the user just cannot choose it again after picking another option. Options without it are unchanged.
+   */
+  disabled?: boolean;
 }
 export declare class SelectComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
@@ -1244,7 +1257,13 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    * tabs are all off, the header row is not rendered at all.
    */
   readonly showQuickTabs: import("@angular/core").InputSignal<boolean>;
-  /** False when the header row would be empty (no search box, no toolbar, no quick-filter tabs). */
+  /**
+   * Optional heading shown at the start of the header row, on the same row as the search box / tabs on the left and the
+   * Export / primary buttons on the right (rendered as an `<h3>`, also while the table is loading and when it is empty).
+   * Empty (default) renders nothing. Use it when the table is a section of a page and its title belongs with its toolbar.
+   */
+  readonly tableTitle: import("@angular/core").InputSignal<string>;
+  /** False when the header row would be empty (no title, no search box, no toolbar, no quick-filter tabs). */
   protected readonly _showHeader: Signal<boolean>;
   /** Optional endpoint that returns Record<string,number> counts per quick-filter value. */
   readonly countsEndpoint: import("@angular/core").InputSignal<string>;
@@ -1777,6 +1796,11 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
       "required": false;
       "isSignal": true;
     };
+    "tableTitle": {
+      "alias": "tableTitle";
+      "required": false;
+      "isSignal": true;
+    };
     "countsEndpoint": {
       "alias": "countsEndpoint";
       "required": false;
@@ -4292,6 +4316,12 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   readonly label: import("@angular/core").InputSignal<string>;
   /** Accessible name for a field with no visible label (e.g. an inline cell or title input). */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * `data-testid` placed on the inner `<input>` (the host `<ui-text-input>` keeps its own attributes). Lets e2e tests `fill()` / `blur()` the
+   * field directly instead of `getByTestId('x').locator('input')`. Pass a different id than the host's, e.g. host `data-testid="email"`
+   * and `inputTestId="email-input"`. Omitted = no attribute.
+   */
+  readonly inputTestId: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
   /**
    * An optional leading mark shown inside the field, left of the text (e.g. `prefix="$"` for a dollar amount). Hidden unless set; it is
@@ -4437,6 +4467,11 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
       "required": false;
       "isSignal": true;
     };
+    "inputTestId": {
+      "alias": "inputTestId";
+      "required": false;
+      "isSignal": true;
+    };
     "placeholder": {
       "alias": "placeholder";
       "required": false;
@@ -4557,7 +4592,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
     "focused": "focused";
     "blurred": "blurred";
     "invalidChange": "invalidChange";
-  }, never, never, true, never>;
+  }, never, ["[uiLabelEnd]"], true, never>;
 }
 export declare class TextareaInputComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
@@ -6105,6 +6140,213 @@ export declare class ListItemComponent {
     "select": "select";
   }, never, ["[list-item-action], [li-action]"], true, never>;
 }
+/** Colour of the priority dot (`high` red, `medium` amber, `low` grey, `blue`, `green`); `none` = no dot. */
+export type CardListIndicator = 'high' | 'medium' | 'low' | 'blue' | 'green' | 'none';
+/** Icon of the round marker on the left. */
+export type CardListIcon = 'call' | 'email' | 'sms' | 'task' | 'doc' | 'money' | 'deal' | 'survey' | 'property' | 'search' | 'heart' | 'calc' | 'repeat';
+/**
+ * Record row for the cards of a detail page (tasks, documents, deals, expenses, matches, surveys...). The layout is fixed;
+ * pass inputs only:
+ *
+ *   [dot | round icon]  [title] [type badge] [status badge]            [Edit] [View]
+ *                       [description]                       [inline link]
+ *                       [calendar icon + date]
+ *
+ * Each row is a bordered rounded box, 8px apart; put the rows straight in a `ui-detail-card` body (or in a `ui-list` template).
+ *
+ *   <ui-card-list-item title="Call John" indicator="high" type="Meeting" status="Pending" statusVariant="gray"
+ *     date="Due Aug 21, 2026" description="Follow up about the offer"
+ *     [editButton]="true" (editClick)="edit(t)" [viewButton]="true" (viewClick)="view(t)" />
+ *
+ * Links: the library has no router, so a link is content you project and the app owns (`routerLink` etc.):
+ *  - `<a card-list-action class="cli-chip cli-chip--view" routerLink="/x">View</a>` at the row end (blue chip, like the View button);
+ *  - `<a card-list-inline class="cli-inline-link" routerLink="/x">View ...</a>` at the end of the description line.
+ * Other projected content (default slot) shows after the chips at the row end; `[card-stats]` and `[card-detail]` add a footer row
+ * under the row (use the `.cli-stat`, `.cli-stat-label`, `.cli-stat-value`, `.cli-stat-divider` classes inside `[card-stats]`).
+ *
+ * Accessibility: the Edit / View buttons are real buttons; give them a longer name with `editAriaLabel` / `viewAriaLabel`
+ * ("Edit task Call John") when the visible word alone is ambiguous in a list. The priority dot (`high`/`medium`/`low`) has a tooltip and an
+ * accessible name (`High priority`, ...), is focusable so the tooltip works by keyboard; `blue`/`green` dots are decorative. The icon circle is decorative.
+ */
+export declare class CardListItemComponent {
+  readonly title: import("@angular/core").InputSignal<string>;
+  readonly description: import("@angular/core").InputSignal<string | undefined>;
+  /** Date text with a small calendar icon, e.g. "Due Aug 21, 2026". Pre-formatted by the page. */
+  readonly date: import("@angular/core").InputSignal<string | undefined>;
+  /** Badge after the title; `typeVariant` colours it (default `gray`). */
+  readonly type: import("@angular/core").InputSignal<string | undefined>;
+  readonly typeVariant: import("@angular/core").InputSignal<BadgeVariant>;
+  /** Second badge; shown only together with `statusVariant`. */
+  readonly status: import("@angular/core").InputSignal<string | undefined>;
+  readonly statusVariant: import("@angular/core").InputSignal<BadgeVariant | undefined>;
+  /** Priority dot on the left (ignored when `icon` is set). */
+  readonly indicator: import("@angular/core").InputSignal<CardListIndicator>;
+  /** Round icon on the left (wins over `indicator`). */
+  readonly icon: import("@angular/core").InputSignal<CardListIcon | undefined>;
+  /** Built-in "Edit" chip button -> `editClick`. */
+  readonly editButton: import("@angular/core").InputSignal<boolean>;
+  /** Built-in "View" chip button -> `viewClick`. */
+  readonly viewButton: import("@angular/core").InputSignal<boolean>;
+  /** Accessible names for the buttons when the visible word is not enough ("Edit task Call John"). */
+  readonly editAriaLabel: import("@angular/core").InputSignal<string>;
+  readonly viewAriaLabel: import("@angular/core").InputSignal<string>;
+  readonly editClick: import("@angular/core").OutputEmitterRef<void>;
+  readonly viewClick: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly calendarPath = "M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z M16 2v4 M8 2v4 M3 10h18";
+  protected readonly editPath = "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7 M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z";
+  protected readonly iconPath: import("@angular/core").Signal<string | null>;
+  protected readonly indicatorLabel: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CardListItemComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<CardListItemComponent, "ui-card-list-item", never, {
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
+      "required": false;
+      "isSignal": true;
+    };
+    "date": {
+      "alias": "date";
+      "required": false;
+      "isSignal": true;
+    };
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "typeVariant": {
+      "alias": "typeVariant";
+      "required": false;
+      "isSignal": true;
+    };
+    "status": {
+      "alias": "status";
+      "required": false;
+      "isSignal": true;
+    };
+    "statusVariant": {
+      "alias": "statusVariant";
+      "required": false;
+      "isSignal": true;
+    };
+    "indicator": {
+      "alias": "indicator";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "editButton": {
+      "alias": "editButton";
+      "required": false;
+      "isSignal": true;
+    };
+    "viewButton": {
+      "alias": "viewButton";
+      "required": false;
+      "isSignal": true;
+    };
+    "editAriaLabel": {
+      "alias": "editAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "viewAriaLabel": {
+      "alias": "viewAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "editClick": "editClick";
+    "viewClick": "viewClick";
+  }, never, ["[card-list-inline]", "[card-list-action]", "*", "[card-stats]", "[card-detail]"], true, never>;
+}
+/** A note as the notes API returns it. */
+export interface NoteItem {
+  id: string;
+  body: string;
+  createdByName: string;
+  createdAt: string;
+  updatedAt: string;
+}
+/**
+ * Notes for one record: a soft "Add a note" panel, then one clean card per note (author avatar, name, date, edit / delete icons, the text),
+ * inline edit and a delete confirmation. Notes are listed 5 per page in the server's order. It talks to the notes API itself, so a page only names the record:
+ *
+ *   <ui-notes resourceType="contact" [resourceId]="contactId" [readOnly]="!canEdit()" (totalChange)="notesTotal.set($event)" />
+ *
+ * API (under `FORGEROUTE_CONFIG.baseUrl`, default `/api`):
+ *  - `GET    /notes/{resourceType}/{resourceId}?page=<0-based>&size=5` -> `{ content: NoteItem[], totalElements, totalPages, page, size }`
+ *  - `POST   /notes/{resourceType}/{resourceId}` `{ body }` -> the new note
+ *  - `PUT    /notes/{noteId}` `{ body }` -> the updated note
+ *  - `DELETE /notes/{noteId}`
+ *
+ * `readOnly` lists the notes only (no box, no edit / delete). `totalChange` emits the total after every load. Failures show a
+ * library toast with the server's message. Put it in a `ui-detail-card`: the card's body padding is the only outer inset.
+ * Pagination is the library `ui-pagination` (shown only above one page). Cmd/Ctrl+Enter in the add box adds the note.
+ */
+export declare class NotesComponent {
+  /** What the notes belong to, as the API names it: `contact`, `transaction`, `property`, `task`, ... */
+  readonly resourceType: import("@angular/core").InputSignal<string>;
+  readonly resourceId: import("@angular/core").InputSignal<string>;
+  /** True: list only, no add box, edit or delete. */
+  readonly readOnly: import("@angular/core").InputSignal<boolean>;
+  /** Total number of notes after every load / add / delete. */
+  readonly totalChange: import("@angular/core").OutputEmitterRef<number>;
+  private readonly http;
+  private readonly toast;
+  private readonly destroyRef;
+  private readonly apiBase;
+  readonly pageSize = 5;
+  readonly notes: import("@angular/core").WritableSignal<NoteItem[]>;
+  readonly loading: import("@angular/core").WritableSignal<boolean>;
+  readonly saving: import("@angular/core").WritableSignal<boolean>;
+  /** 0-based page index, as the server numbers it. */
+  readonly page: import("@angular/core").WritableSignal<number>;
+  readonly totalElements: import("@angular/core").WritableSignal<number>;
+  readonly editingId: import("@angular/core").WritableSignal<string | null>;
+  readonly deletingId: import("@angular/core").WritableSignal<string | null>;
+  newBody: string;
+  editBody: string;
+  /** Up to two initials of the author's name for the avatar ("Ana Lopez" -> "AL"); "Y" for the current user's own unnamed notes. */
+  protected initials(name: string): string;
+  private get listUrl();
+  constructor();
+  loadPage(p: number): void;
+  addNote(): void;
+  startEdit(note: NoteItem): void;
+  cancelEdit(): void;
+  saveEdit(noteId: string): void;
+  confirmDelete(id: string): void;
+  deleteNote(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<NotesComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<NotesComponent, "ui-notes", never, {
+    "resourceType": {
+      "alias": "resourceType";
+      "required": false;
+      "isSignal": true;
+    };
+    "resourceId": {
+      "alias": "resourceId";
+      "required": false;
+      "isSignal": true;
+    };
+    "readOnly": {
+      "alias": "readOnly";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "totalChange": "totalChange";
+  }, never, never, true, never>;
+}
 /**
  * Adds one app-wide toast outlet (a `<ui-toast>` appended to `<body>`) when the app starts, so toasts show on pages that have
  * no `<ui-data-table>` and no `<ui-toast />` of their own.
@@ -6539,7 +6781,7 @@ export interface PanelInfoItem {
   phone?: string;
   /** Show the value with an "open" icon instead of blue link styling. */
   linkIcon?: boolean;
-  /** Renders a small edit (pencil) icon button after the value. */
+  /** Renders a small edit (pencil) `ui-icon` button after the value; `editTooltip` is its tooltip and accessible name (default "Edit"). */
   editAction?: () => void;
   editTooltip?: string;
   muted?: boolean;
@@ -6996,7 +7238,7 @@ export declare class AlertComponent {
 /** The SVG path (24×24 stroke icon) for an icon key, or undefined when the key is unknown. */
 export declare function iconPath(name: string): string | undefined;
 /** Keys with an icon of their own (the data-table action keys are accepted too — see `builtInActionIcon`). */
-export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'lock' | 'shield' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | 'view-off' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call' | 'refund' | 'chevron-right';
+export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'lock' | 'shield' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | 'view-off' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call' | 'refund' | 'chevron-right' | 'link' | 'save' | 'chart';
 /**
  * A clickable icon. The host passes a key (`name="delete"`) and the library draws that icon; clicking it emits
  * `iconClick`, and the host does the actual work (delete the row, open a panel, …).
@@ -8524,6 +8766,8 @@ export declare class PdfHotspotComponent {
  *  - `background`: the card's background colour (any CSS colour; default white).
  *  - `headerBackground`: the background colour of the header bar only (any CSS colour; default none, the card's own background shows). The body keeps the card's `background`, and a header-less card (`showHeader` false) has no bar to colour. A collapsible header keeps this colour on hover. Pair it with `textColor` when the colour is dark.
  *  - `textColor`: the colour of the title, subtitle, chevron and body text (any CSS colour; default: the normal slate colours). Use it for light text on a dark `background`. Text you colour yourself inside the body keeps its own colour.
+ *  - `<ng-container card-footer>` / `<div card-footer>`: a footer bar under the body (a pager, totals, a link). Hidden while empty or collapsed, 10px 18px padding,
+ *    a light top line; `footerBackground` colours it (pair it with `headerBackground` to frame the card). In a `fill` card it is pinned to the bottom edge.
  *  - The body has built-in padding (16px 18px, matching the header's 18px side padding); there is no padding input.
  *  - `collapsible` (default true): a chevron toggle and a clickable header; `[(expanded)]` is two-way.
  *    Without a header, or with `collapsible` false, the body is always open.
@@ -8566,6 +8810,8 @@ export declare class DetailCardComponent {
   readonly background: import("@angular/core").InputSignal<string>;
   /** Background colour of the header bar only, as any CSS colour (`#eaf3ff`, `var(--surface-2)` …). Empty = the header has no colour of its own (the card background shows). The body is not affected. */
   readonly headerBackground: import("@angular/core").InputSignal<string>;
+  /** Background colour of the footer bar (the `[card-footer]` slot) as any CSS colour. Empty = no colour of its own. */
+  readonly footerBackground: import("@angular/core").InputSignal<string>;
   /** Text colour as any CSS colour (`#fff`, `var(--on-dark)` …). Empty = the default colours. Colours the title, subtitle, chevron and body text. */
   readonly textColor: import("@angular/core").InputSignal<string>;
   /** false = no header at all (no title, edit button, toggle or divider): the card is only the body, always open. */
@@ -8645,6 +8891,11 @@ export declare class DetailCardComponent {
       "required": false;
       "isSignal": true;
     };
+    "footerBackground": {
+      "alias": "footerBackground";
+      "required": false;
+      "isSignal": true;
+    };
     "textColor": {
       "alias": "textColor";
       "required": false;
@@ -8719,7 +8970,7 @@ export declare class DetailCardComponent {
     "expanded": "expandedChange";
     "editClick": "editClick";
     "selected": "selectedChange";
-  }, never, ["[card-header-leading]", "[card-header]", "[card-header-action]", "*"], true, never>;
+  }, never, ["[card-header-leading]", "[card-header]", "[card-header-action]", "*", "[card-footer]"], true, never>;
 }
 export type DividerSpace = 'none' | 'sm' | 'md' | 'lg';
 /**
@@ -8760,6 +9011,204 @@ export declare class DividerComponent {
     };
   }, {}, never, never, true, never>;
 }
+/** One column (stage) of a [ui-board]. `items` are the host's own records; the board never reads their fields. */
+export interface BoardColumn<T = unknown> {
+  /** Unique id of the column (the stage key); reported in `from` / `to` of a move. */
+  key: string;
+  /** Column title (shown uppercase). */
+  label: string;
+  items: T[];
+  /** Dot colour: a CSS colour, or one of blue / cyan / green / teal / amber / orange / red / pink / slate / gray. */
+  color?: string;
+  /** Small line under the title, e.g. a pre-formatted total ("$120,000"). */
+  summary?: string;
+  /** Spoken version of `summary` (aria-label). Defaults to the summary text. */
+  summaryLabel?: string;
+  /** 'success' = green column and green card edge (a won / done stage). */
+  tone?: 'default' | 'success';
+  /** true = display-only column: items can't be dropped into it. */
+  dropDisabled?: boolean;
+  /** Text of the empty column; defaults to the board's `emptyColumnText`. */
+  emptyText?: string;
+}
+/** Fired when the user moves a card to another column (drag and drop, or Shift + Arrow keys on a focused card). */
+export interface BoardMoveEvent<T = unknown> {
+  item: T;
+  from: string;
+  to: string;
+  /** The board has ALREADY moved the card on screen. Call this if the host's save fails to put it back. */
+  revert: () => void;
+}
+export interface BoardCardActionEvent<T = unknown> {
+  type: string;
+  item: T;
+}
+/** Context of the card template: `<ng-template uiBoardCard let-item let-column="column" let-menu="menu">`. */
+export interface BoardCardContext<T = unknown> {
+  $implicit: T;
+  column: BoardColumn<T>;
+  /** Template of the card's "⋮" menu (renders nothing without `cardActions`). Output it with `{ $implicit: item }` in the card's top row. */
+  menu: TemplateRef<{
+    $implicit: T;
+  }>;
+}
+/** Marks the template that renders the INSIDE of a card (the board draws the card frame, menu and drag handling). */
+export declare class BoardCardDirective<T = unknown> {
+  readonly template: TemplateRef<BoardCardContext<T>>;
+  static ngTemplateContextGuard<T>(_dir: BoardCardDirective<T>, _ctx: unknown): _ctx is BoardCardContext<T>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BoardCardDirective<any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<BoardCardDirective<any>, "ng-template[uiBoardCard]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Kanban board: columns of cards that can be dragged between columns. Data and saving stay with the host.
+ *
+ *   <ui-board [columns]="columns()" [itemKey]="key" [itemLabel]="label" [cardActions]="actions" [readOnly]="perm() !== 'full'"
+ *             [loading]="loading()" [error]="error()" (retry)="load()"
+ *             (cardClick)="open($event)" (cardAction)="onAction($event)" (itemMove)="onMove($event)">
+ *     <ng-template uiBoardCard let-deal let-menu="menu">
+ *       <div class="ub-card__top"><span class="ub-card__title">{{ deal.title }}</span>
+ *         <ng-container [ngTemplateOutlet]="menu" [ngTemplateOutletContext]="{ $implicit: deal }" /></div>
+ *       <div class="ub-card__contact">{{ deal.contactName }}</div>
+ *     </ng-template>
+ *   </ui-board>
+ *
+ * - A drop moves the card on screen at once and emits `itemMove`; the host saves it and calls `event.revert()` if that fails.
+ * - Keyboard: Enter / Space opens a card; Shift + ← / → moves it to the neighbouring column (announced to screen readers).
+ * - `readOnly` removes dragging and keyboard moves. On phones (≤640px) the columns stack.
+ */
+export declare class BoardComponent<T = unknown> {
+  /** The columns in display order, each with its items. A new value replaces the board's content (and any on-screen move). */
+  readonly columns: import("@angular/core").InputSignal<BoardColumn<T>[]>;
+  /** Stable unique id of a card (used to track cards between renders). */
+  readonly itemKey: import("@angular/core").InputSignal<(item: T) => string>;
+  /** Spoken name of a card: title, who, status, value... The card's visible content is the `uiBoardCard` template. */
+  readonly itemLabel: import("@angular/core").InputSignal<(item: T) => string>;
+  /** Menu on every card (the "⋮" button). Empty = no menu. Handle the pick in `(cardAction)`. */
+  readonly cardActions: import("@angular/core").InputSignal<RowAction[]>;
+  readonly loading: import("@angular/core").InputSignal<boolean>;
+  /** Error text: replaces the board with the message and a Retry button. */
+  readonly error: import("@angular/core").InputSignal<string | null>;
+  /** true = no dragging, no keyboard moves. */
+  readonly readOnly: import("@angular/core").InputSignal<boolean>;
+  /** true = moves are paused (e.g. a save is running) so a second card can't be moved before the first is saved. */
+  readonly moveDisabled: import("@angular/core").InputSignal<boolean>;
+  /** Optional rule: may this card go from this column to that one? A refused drop does nothing. */
+  readonly canMove: import("@angular/core").InputSignal<((item: T, from: string, to: string) => boolean) | null>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly emptyMessage: import("@angular/core").InputSignal<string>;
+  readonly emptyColumnText: import("@angular/core").InputSignal<string>;
+  /** Singular / plural noun for the column's spoken count ("3 deals"). */
+  readonly itemNoun: import("@angular/core").InputSignal<string>;
+  readonly itemNounPlural: import("@angular/core").InputSignal<string>;
+  readonly retryLabel: import("@angular/core").InputSignal<string>;
+  readonly cardClick: import("@angular/core").OutputEmitterRef<T>;
+  readonly cardAction: import("@angular/core").OutputEmitterRef<BoardCardActionEvent<T>>;
+  readonly itemMove: import("@angular/core").OutputEmitterRef<BoardMoveEvent<T>>;
+  readonly retry: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly card: import("@angular/core").Signal<BoardCardDirective<any> | undefined>;
+  /** The columns as shown: the host's value, plus any move not yet replaced by new data. */
+  protected readonly cols: import("@angular/core").WritableSignal<BoardColumn<T>[]>;
+  protected readonly overKey: import("@angular/core").WritableSignal<string | null>;
+  protected readonly draggingKey: import("@angular/core").WritableSignal<string | null>;
+  protected readonly announcement: import("@angular/core").WritableSignal<string>;
+  private readonly host;
+  private drag;
+  protected readonly skeletonColumns: import("@angular/core").Signal<number[]>;
+  protected readonly canDrag: import("@angular/core").Signal<boolean>;
+  protected readonly canMoveAny: import("@angular/core").Signal<boolean>;
+  protected dot(color?: string): string;
+  protected onDragStart(event: DragEvent, item: T, col: BoardColumn<T>): void;
+  protected onDragEnd(): void;
+  protected onDragOver(event: DragEvent, col: BoardColumn<T>): void;
+  protected onDragLeave(event: DragEvent, col: BoardColumn<T>): void;
+  protected onDrop(event: DragEvent, col: BoardColumn<T>): void;
+  protected onCardKey(event: KeyboardEvent, item: T, col: BoardColumn<T>): void;
+  private accepts;
+  private move;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BoardComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BoardComponent<any>, "ui-board", never, {
+    "columns": {
+      "alias": "columns";
+      "required": true;
+      "isSignal": true;
+    };
+    "itemKey": {
+      "alias": "itemKey";
+      "required": true;
+      "isSignal": true;
+    };
+    "itemLabel": {
+      "alias": "itemLabel";
+      "required": true;
+      "isSignal": true;
+    };
+    "cardActions": {
+      "alias": "cardActions";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "readOnly": {
+      "alias": "readOnly";
+      "required": false;
+      "isSignal": true;
+    };
+    "moveDisabled": {
+      "alias": "moveDisabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "canMove": {
+      "alias": "canMove";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyMessage": {
+      "alias": "emptyMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyColumnText": {
+      "alias": "emptyColumnText";
+      "required": false;
+      "isSignal": true;
+    };
+    "itemNoun": {
+      "alias": "itemNoun";
+      "required": false;
+      "isSignal": true;
+    };
+    "itemNounPlural": {
+      "alias": "itemNounPlural";
+      "required": false;
+      "isSignal": true;
+    };
+    "retryLabel": {
+      "alias": "retryLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "cardClick": "cardClick";
+    "cardAction": "cardAction";
+    "itemMove": "itemMove";
+    "retry": "retry";
+  }, ["card"], never, true, never>;
+}
 /**
  * Wraps a block of form controls (a settings page, a configuration card) so a view-only user can look at the current
  * values but change nothing. While `readOnly` is true the wrapper's native `<fieldset>` is `disabled`, and the browser