@forgeroute/ui 0.4.70 → 0.4.71

package/package.json

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

package/src/_animations.scss

@@ -7,8 +7,11 @@
   to { opacity: 1; }
 }
 
-@keyframes rowFadeUp {
-  from { opacity: 0; transform: translateY(6px); }
+// Entrance of the table header and rows: slides up only, it never fades. The header holds the tabs, search and buttons and the rows hold the
+// cell text, so while they fade in (opacity 0 to 1) an accessibility audit run right after render measures half-transparent text and reports a
+// colour-contrast failure that is gone 300ms later. Moving without changing opacity keeps every pixel of text at full contrast at all times.
+@keyframes slideUp {
+  from { transform: translateY(6px); }
 }
 
 @keyframes dotPulse {
@@ -25,13 +28,13 @@
 // Applied automatically by ui-data-table (rows and cards).
 // The stagger is capped at 8 steps (240ms) so a 50-row page never starts its last row ~1.5s late.
 .alive-row {
-  animation: rowFadeUp .3s ease backwards;
+  animation: slideUp .3s ease backwards;
   animation-delay: calc(min(var(--i, 0), 8) * 30ms);
 }
 
 // ── Page/toolbar header ──
 .alive-header {
-  animation: fadeUp .3s ease both;
+  animation: slideUp .3s ease both;
 }
 
 // ── Detail page cards ──

package/types/forgeroute-ui.d.ts

@@ -1801,6 +1801,10 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   /** State for the built-in single-row delete confirmation modal. */
   protected readonly _rowDeleteTarget: import("@angular/core").WritableSignal<T | null>;
   protected readonly _rowDeleting: import("@angular/core").WritableSignal<boolean>;
+  /** Ids the built-in delete confirm dialog is described by (aria-describedby): its message and the "what will happen" list. */
+  private readonly _confirmUid;
+  protected readonly _confirmMsgId: string;
+  protected readonly _confirmDetailsId: string;
   protected readonly _rowDeleteConfig: import("@angular/core").WritableSignal<{
     title: string;
     message: string;
@@ -2261,6 +2265,12 @@ export declare class ModalComponent implements OnInit, OnDestroy {
   readonly open: import("@angular/core").InputSignal<boolean>;
   readonly title: import("@angular/core").InputSignal<string>;
   readonly description: import("@angular/core").InputSignal<string>;
+  /**
+   * Id(s) of the element(s) inside the dialog that describe it (space-separated, as `aria-describedby` takes them), e.g. the confirm message
+   * paragraph. Screen readers read them after the title when the dialog opens. When it is not set and `description` is, the dialog is described
+   * by that description line; with neither, no `aria-describedby` is rendered (the body of a form dialog is not a description).
+   */
+  readonly describedBy: import("@angular/core").InputSignal<string | null>;
   readonly maxWidth: import("@angular/core").InputSignal<string>;
   readonly bodyOverflow: import("@angular/core").InputSignal<"hidden" | "auto" | "visible">;
   /** `data-testid` of the dialog element itself (the host `<ui-modal>` is always in the page, the dialog only while open). None when empty. */
@@ -2295,6 +2305,8 @@ export declare class ModalComponent implements OnInit, OnDestroy {
   readonly returnFocusTo: import("@angular/core").InputSignal<HTMLElement | null>;
   protected readonly kiosk: import("@angular/core").Signal<boolean>;
   protected readonly titleId: string;
+  protected readonly descId: string;
+  protected readonly describedById: import("@angular/core").Signal<string | null>;
   private readonly el;
   private readonly ren;
   private readonly doc;
@@ -2332,6 +2344,11 @@ export declare class ModalComponent implements OnInit, OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "describedBy": {
+      "alias": "describedBy";
+      "required": false;
+      "isSignal": true;
+    };
     "maxWidth": {
       "alias": "maxWidth";
       "required": false;
@@ -4943,6 +4960,11 @@ export declare class ConfirmService {
 export declare class ConfirmOutletComponent implements OnInit, OnDestroy {
   protected readonly svc: ConfirmService;
   protected readonly _isPrimary: import("@angular/core").Signal<boolean>;
+  /** Unique per outlet: the dialog is described by the message and, when there is one, the "what will happen" list (aria-describedby). */
+  private readonly _uid;
+  protected readonly msgId: string;
+  protected readonly detailsId: string;
+  protected readonly _describedBy: import("@angular/core").Signal<string>;
   ngOnInit(): void;
   ngOnDestroy(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmOutletComponent, never>;
@@ -13693,6 +13715,30 @@ export interface ConversationMessage {
   sender?: string | null;
   /** A link-style button under the text, e.g. "View transaction"; clicking it emits `(messageAction)` with this message. */
   action?: ConversationMessageAction | null;
+  /** A record the message points at (a job, an estimate…), shown as a chip under the text; a chip with a `url` is a link. */
+  link?: ConversationLink | null;
+}
+/** A record linked to a message (see `ConversationMessage.link`, `[(link)]` and `ConversationSendEvent.link`). */
+export interface ConversationLink {
+  /** What kind of record it is (`JOB`, `ESTIMATE`…): the host's own code, handed back unchanged. */
+  type: string;
+  /** The record's id. */
+  id: string;
+  /** What the chip says, e.g. "Johnson Roof — Alice". */
+  label: string;
+  /** Where the chip goes when it is clicked; none = a plain chip. Only used on messages, not in the composer. */
+  url?: string | null;
+}
+/** One section of the "Link a record" picker: the records of one kind. */
+export interface ConversationLinkGroup {
+  /** The kind, copied to `ConversationLink.type` of every pick from this section. */
+  type: string;
+  /** The section heading, e.g. "Jobs". */
+  label: string;
+  items: ReadonlyArray<{
+    id: string;
+    label: string;
+  }>;
 }
 /** The button a message can carry (see `ConversationMessage.action`). */
 export interface ConversationMessageAction {
@@ -13710,6 +13756,8 @@ export interface ConversationSendEvent {
   text: string;
   /** Only with `[richText]="true"`: the formatted message as sanitised HTML (bold, italic, underline, links, lists). */
   html?: string;
+  /** Only when a record is linked (`[(link)]`): the chosen record. The key is absent otherwise. */
+  link?: ConversationLink;
 }
 /** A message with the date separator that goes above it ('' when it shares the day of the previous message). */
 export interface ConversationMessageRow {
@@ -13921,6 +13969,24 @@ export declare class ConversationsComponent {
   /** Files accepted by the attach picker (type and size already checked against `acceptedFiles` / `maxFileSize`). */
   readonly filesSelected: import("@angular/core").OutputEmitterRef<File[]>;
   readonly attachmentRemove: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Link a record to a message (opt-in): `null` (default) = no link button, no picker, nothing changes. A list (even an empty one) turns on a "Link a record"
+   * button in the composer that opens a searchable picker of these sections; the pick becomes `[(link)]`, shows as a removable chip above the composer, and
+   * goes out with `(send)` as `link`. Load the sections when `(linkPickerOpened)` fires and show `[linkLoading]` meanwhile.
+   */
+  readonly linkGroups: import("@angular/core").InputSignal<readonly ConversationLinkGroup[] | null>;
+  readonly linkLoading: import("@angular/core").InputSignal<boolean>;
+  /** The record linked to the message being written. Cleared by the host after a send, like `[(draft)]`; the chip's × clears it too. */
+  readonly link: import("@angular/core").ModelSignal<ConversationLink | null>;
+  readonly linkLabel: import("@angular/core").InputSignal<string>;
+  readonly linkPickerTitle: import("@angular/core").InputSignal<string>;
+  readonly linkSearchPlaceholder: import("@angular/core").InputSignal<string>;
+  readonly linkSearchLabel: import("@angular/core").InputSignal<string>;
+  readonly linkEmptyText: import("@angular/core").InputSignal<string>;
+  readonly linkLoadingText: import("@angular/core").InputSignal<string>;
+  readonly removeLinkLabel: import("@angular/core").InputSignal<string>;
+  /** The "Link a record" button opened the picker: load the sections now. */
+  readonly linkPickerOpened: import("@angular/core").OutputEmitterRef<void>;
   /** An image in a bubble was clicked: the host opens it (usually in a new tab). */
   readonly mediaOpen: import("@angular/core").OutputEmitterRef<string>;
   /** The link-style button of a message (`ConversationMessage.action`) was clicked. */
@@ -13949,8 +14015,12 @@ export declare class ConversationsComponent {
   protected readonly emptyText: import("@angular/core").Signal<string>;
   protected readonly messageRows: import("@angular/core").Signal<import("@forgeroute/ui").ConversationMessageRow[]>;
   protected readonly contextVisible: import("@angular/core").Signal<boolean>;
-  /** Something to send (text or a file), the composer is open and no request is running. */
+  /** Something to send (text, a file or a linked record), the composer is open and no request is running. */
   readonly canSend: import("@angular/core").Signal<boolean>;
+  protected readonly pickerOpen: import("@angular/core").WritableSignal<boolean>;
+  protected readonly linkQuery: import("@angular/core").WritableSignal<string>;
+  /** The picker's sections narrowed by the search (case-insensitive, on the record label); a section with no match is left out. */
+  protected readonly visibleLinkGroups: import("@angular/core").Signal<ConversationLinkGroup[]>;
   /** The composer's formatted content. `draft` is always its plain text, so a host that reads or sets `[(draft)]` never sees markup. */
   protected readonly editorHtml: import("@angular/core").WritableSignal<string>;
   protected readonly richHide: RichTextOption[];
@@ -13969,6 +14039,12 @@ export declare class ConversationsComponent {
   protected onComposeKeydown(event: KeyboardEvent): void;
   protected onEditorChange(html: string): void;
   protected sendMessage(): void;
+  protected openLinkPicker(): void;
+  protected closeLinkPicker(): void;
+  protected pickLink(group: ConversationLinkGroup, item: {
+    id: string;
+    label: string;
+  }): void;
   private clock;
   private singleColumn;
   private scrollToBottom;
@@ -14399,6 +14475,56 @@ export declare class ConversationsComponent {
       "required": false;
       "isSignal": true;
     };
+    "linkGroups": {
+      "alias": "linkGroups";
+      "required": false;
+      "isSignal": true;
+    };
+    "linkLoading": {
+      "alias": "linkLoading";
+      "required": false;
+      "isSignal": true;
+    };
+    "link": {
+      "alias": "link";
+      "required": false;
+      "isSignal": true;
+    };
+    "linkLabel": {
+      "alias": "linkLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "linkPickerTitle": {
+      "alias": "linkPickerTitle";
+      "required": false;
+      "isSignal": true;
+    };
+    "linkSearchPlaceholder": {
+      "alias": "linkSearchPlaceholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "linkSearchLabel": {
+      "alias": "linkSearchLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "linkEmptyText": {
+      "alias": "linkEmptyText";
+      "required": false;
+      "isSignal": true;
+    };
+    "linkLoadingText": {
+      "alias": "linkLoadingText";
+      "required": false;
+      "isSignal": true;
+    };
+    "removeLinkLabel": {
+      "alias": "removeLinkLabel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "searchText": "searchTextChange";
     "contextOpen": "contextOpenChange";
@@ -14416,6 +14542,8 @@ export declare class ConversationsComponent {
     "send": "send";
     "filesSelected": "filesSelected";
     "attachmentRemove": "attachmentRemove";
+    "link": "linkChange";
+    "linkPickerOpened": "linkPickerOpened";
     "mediaOpen": "mediaOpen";
     "messageAction": "messageAction";
     "loadEarlier": "loadEarlier";