@forgeroute/ui 0.4.59 → 0.4.61

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -2682,7 +2682,7 @@ export declare class AudioPlayerComponent {
   /** Accessible name of the player. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** How much to load before play: 'metadata' (default), 'auto' or 'none'. */
-  readonly preload: import("@angular/core").InputSignal<"metadata" | "none" | "auto">;
+  readonly preload: import("@angular/core").InputSignal<"none" | "auto" | "metadata">;
   /** Fires when the browser can't load or decode the source. */
   readonly playbackError: import("@angular/core").OutputEmitterRef<void>;
   protected readonly failed: import("@angular/core").WritableSignal<boolean>;
@@ -3963,7 +3963,7 @@ export declare class ButtonComponent {
    * `ghost-start`: a ghost button for list / section toggles - a full-width row with its content aligned to the start, transparent
    * background, hover tint and the normal focus ring. Pair it with `ariaExpanded` / `ariaPressed`; the label may contain a heading element.
    */
-  readonly variant: import("@angular/core").InputSignal<"link" | "primary" | "secondary" | "danger" | "warning" | "ghost" | "ghost-start" | "tab" | "icon" | "icon-danger">;
+  readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "danger" | "warning" | "link" | "ghost" | "ghost-start" | "tab" | "icon" | "icon-danger">;
   /** Renders an anchor to this route instead of a button (use with `variant="link"` for an inline text link). `['/settings']` or `'/settings'`. While `disabled` or `loading` it renders a non-clickable `<span role="link" aria-disabled>` with no href (like `href`). */
   readonly routerLink: import("@angular/core").InputSignal<string | readonly unknown[] | null>;
   /** Query params of the `routerLink` (e.g. `{ section: 'deal-defaults' }`). */
@@ -4009,7 +4009,7 @@ export declare class ButtonComponent {
   readonly color: import("@angular/core").InputSignal<string | undefined>;
   readonly active: import("@angular/core").InputSignal<boolean>;
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xs">;
-  readonly type: import("@angular/core").InputSignal<"button" | "reset" | "submit">;
+  readonly type: import("@angular/core").InputSignal<"reset" | "submit" | "button">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
   readonly fullWidth: import("@angular/core").InputSignal<boolean>;
@@ -4957,7 +4957,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
    * `search`, `text`, `none`). Empty (default) = the browser's default for the field, except `type="tel"`, which keeps `tel`.
    * It only picks the keyboard; it does not restrict what can be typed or pasted.
    */
-  readonly inputmode: import("@angular/core").InputSignal<"" | "search" | "text" | "numeric" | "none" | "email" | "tel" | "url" | "decimal">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
   /** Id(s) of an external element that also describes this control (e.g. one shared error text for a group of fields). Space separated; MERGED after the control's own hint / error id in `aria-describedby`, never replacing it. Empty = unchanged. */
@@ -6424,7 +6424,7 @@ export declare class DropdownComponent {
   readonly loader: import("@angular/core").InputSignal<(() => Promise<DropdownItem[]>) | null>;
   readonly active: import("@angular/core").InputSignal<boolean>;
   readonly activeValue: import("@angular/core").InputSignal<string>;
-  readonly variant: import("@angular/core").InputSignal<"button" | "badge">;
+  readonly variant: import("@angular/core").InputSignal<"badge" | "button">;
   readonly menuWidth: import("@angular/core").InputSignal<string>;
   /**
    * Fixed width of the trigger as a CSS length (e.g. `'280px'`). Empty (default) = the trigger is as wide as its label. When set, the trigger keeps that
@@ -6745,7 +6745,7 @@ export declare class FormRowComponent {
  * child simply takes the full width. Keep a numeric span within the row's `cols` (use `all` for the whole row).
  */
 export declare class FormColSpanDirective {
-  readonly uiColSpan: import("@angular/core").InputSignal<"" | 2 | 3 | "2" | "3" | "all">;
+  readonly uiColSpan: import("@angular/core").InputSignal<"" | "2" | "3" | 2 | 3 | "all">;
   protected readonly _class: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormColSpanDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<FormColSpanDirective, "[uiColSpan]", never, {
@@ -7364,8 +7364,10 @@ export declare class ListComponent<T = unknown> {
   /** Announcement after a move; receives the row label, the new position (1-based) and the list size. */
   readonly moveAnnouncement: import("@angular/core").InputSignal<(label: string, position: number, total: number) => string>;
   /** Fires with the new array when the user moves a row (`[(items)]`). The list does not change `items` itself. */
-  /** Shows an arrow at the end of every row and makes the row open something: a click or Enter on the row (not on a button or link inside it) emits `itemClick`. Default false: no arrow, rows are not clickable. */
+  /** Makes the row open something: a click or Enter on the row (not on a button or link inside it) emits `itemClick`; the arrow only shows with `[arrow]="true"`. Default false: rows are not clickable. */
   readonly navigable: import("@angular/core").InputSignal<boolean>;
+  /** The arrow at the end of each row, drawn only with `[navigable]`. Default false (hidden): not every clickable list wants one. `[navigable]` alone keeps the click / Enter / focus behaviour; add `[arrow]="true"` to show it. */
+  readonly arrow: import("@angular/core").InputSignal<boolean>;
   /** The row of `[navigable]` that was clicked (or Enter was pressed on). */
   readonly itemClick: import("@angular/core").OutputEmitterRef<T>;
   readonly itemsChange: import("@angular/core").OutputEmitterRef<T[]>;
@@ -7502,6 +7504,11 @@ export declare class ListComponent<T = unknown> {
       "required": false;
       "isSignal": true;
     };
+    "arrow": {
+      "alias": "arrow";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "itemClick": "itemClick";
     "itemsChange": "itemsChange";
@@ -7693,13 +7700,15 @@ export interface PanelInfoSection {
    * A small secondary button at the end of the section's header bar (e.g. "Add item" for a list of line items). `action` runs on
    * click; `ariaLabel` is the accessible name when the visible label is not enough (default: the label). The header bar is shown
    * for a section with a `headerAction` even when it has no `title`. Not rendered for a section with no visible items unless
-   * `showEmptyState` keeps the section.
+   * `showEmptyState` keeps the section. `icon` is an optional SVG path (the `d` value, 24x24 grid, same convention as a toolbar action's
+   * `icon`) drawn before the label; it is decorative, so the accessible name stays the label / `ariaLabel`.
    */
   headerAction?: {
     label: string;
     action: () => void;
     ariaLabel?: string;
     disabled?: boolean;
+    icon?: string;
   };
   items: PanelInfoItem[];
   columns?: 2;
@@ -9036,10 +9045,10 @@ export declare function resolvePreset(key: DatePreset, today: Date): DateRange;
  * `textColor highlight` | `align` | `bulletList numberedList indent outdent` | `clearFormat`.
  * `align` is the three alignment buttons (left, center, right) as one option.
  */
-export type RichTextOption = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'heading' | 'fontSize' | 'fontFamily' | 'textColor' | 'highlight' | 'align' | 'bulletList' | 'numberedList' | 'indent' | 'outdent' | 'clearFormat';
+export type RichTextOption = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'link' | 'heading' | 'fontSize' | 'fontFamily' | 'textColor' | 'highlight' | 'align' | 'bulletList' | 'numberedList' | 'indent' | 'outdent' | 'clearFormat';
 /** All option keys, in toolbar order. */
 export declare const RICH_TEXT_OPTIONS: readonly RichTextOption[];
-type MenuId = 'heading' | 'size' | 'font';
+type MenuId = 'heading' | 'size' | 'font' | 'link';
 export declare class RichTextEditorComponent implements ControlValueAccessor {
   readonly label: import("@angular/core").InputSignal<string>;
   /** Accessible name for an editor with no visible label. */
@@ -9090,6 +9099,10 @@ export declare class RichTextEditorComponent implements ControlValueAccessor {
   protected readonly activeFont: import("@angular/core").WritableSignal<string>;
   protected readonly active: import("@angular/core").WritableSignal<Record<string, boolean>>;
   protected readonly empty: import("@angular/core").WritableSignal<boolean>;
+  protected readonly linkUrl: import("@angular/core").WritableSignal<string>;
+  protected readonly linkError: import("@angular/core").WritableSignal<string>;
+  protected readonly hasLink: import("@angular/core").WritableSignal<boolean>;
+  protected readonly _linkId: string;
   private readonly hidden;
   /** Group id → at least one of its controls is shown. */
   private readonly groupVisible;
@@ -9125,6 +9138,12 @@ export declare class RichTextEditorComponent implements ControlValueAccessor {
   protected selectHeading(tag: string, label: string): void;
   protected selectSize(value: string, label: string): void;
   protected selectFont(value: string, label: string): void;
+  /** The `<a>` the saved (or current) selection sits in, if any. */
+  private _anchorAtSelection;
+  protected toggleLink(): void;
+  protected closeLink(): void;
+  protected applyLink(): void;
+  protected removeLink(): void;
   protected exec(command: string): void;
   protected execWithArg(command: string, value: string): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<RichTextEditorComponent, never>;
@@ -13195,6 +13214,8 @@ export interface ConversationMessage {
   id: string;
   direction: ConversationMessageDirection;
   body?: string | null;
+  /** Formatted text (bold, links, lists) of a message written in the rich composer: shown instead of `body`, after the library's allow-list sanitiser. Keep `body` as its plain text. */
+  bodyHtml?: string | null;
   /** ISO instant. Drives the time under the bubble and the date separators. */
   sentAt: string;
   /** Outbound only: `sent` (✓), `delivered` (✓✓), `failed`, `scheduled`. Other values show nothing. */
@@ -13217,7 +13238,10 @@ export interface ConversationAttachment {
 }
 /** What `(send)` reports. */
 export interface ConversationSendEvent {
+  /** The message as plain text (trimmed). With `[richText]`, the text of the formatted message. */
   text: string;
+  /** With `[richText]`: the formatted message as sanitised HTML (bold, italic, underline, links, lists). Absent for a plain-text composer. */
+  html?: string;
 }
 /** A message with the date separator that goes above it ('' when it shares the day of the previous message). */
 export interface ConversationMessageRow {
@@ -13246,6 +13270,24 @@ export declare function groupMessagesByDay(messages: readonly ConversationMessag
 export declare function conversationMessageStatusLabel(status: string | null | undefined): string;
 /** The mark shown beside an outbound message: ticks for sent / delivered, the word for the rest. */
 export declare function conversationMessageStatusMark(status: string | null | undefined): string;
+/**
+ * The plain text of formatted composer HTML, the way it reads: paragraphs, list items and line breaks become line breaks, everything else
+ * is its text. Runs on an inert document, so nothing in `html` is executed. Trimmed; '' for nothing.
+ */
+export declare function conversationHtmlToText(html: string | null | undefined): string;
+/** A message's formatted text. Its own (unencapsulated) component so the styles reach the markup that `innerHTML` creates. */
+export declare class ConversationRichBodyComponent {
+  readonly html: import("@angular/core").InputSignal<string>;
+  protected readonly safe: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ConversationRichBodyComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ConversationRichBodyComponent, "ui-conversation-rich-body", never, {
+    "html": {
+      "alias": "html";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /**
  * The text-message inbox: a conversation list (search, filter tabs, pagination) on the left, the open thread (header, messages with date
  * separators and media, composer) in the middle and an optional contact panel on the right. On a phone the list and the thread take turns.
@@ -13270,9 +13312,9 @@ export declare function conversationMessageStatusMark(status: string | null | un
  * shows "Load earlier messages" while `[hasEarlier]` (`(loadEarlier)`); a failed thread load shows `[messagesError]` with Retry (`(messagesRetry)`).
  *
  * Test ids: conversations, conv-search, conv-filters, new-message-btn, conv-loading, conv-error, conv-retry, conv-empty, conv-item, conv-unread,
- * conv-delete-btn, thread-empty, thread-error, thread-retry, load-earlier, msg-sender, msg-action, back-to-list, thread-name, thread-phone, use-template-btn, context-toggle, status-btn, thread-delete-btn,
+ * conv-arrow, conv-delete-btn, thread-empty, thread-error, thread-retry, load-earlier, msg-sender, msg-action, back-to-list, thread-name, thread-phone, use-template-btn, context-toggle, status-btn, thread-delete-btn,
  * messages, messages-loading, messages-empty, message, msg-status, attach-btn, attach-input, attachment-preview, attachment-remove,
- * compose-input, send-btn, compose-opted-out, compose-loading-contact, context-panel, context-close.
+ * msg-rich-body, compose-input, send-btn, compose-opted-out, compose-loading-contact, context-panel, context-close.
  */
 export declare class ConversationsComponent {
   readonly conversations: import("@angular/core").InputSignal<readonly ConversationItem[]>;
@@ -13311,6 +13353,10 @@ export declare class ConversationsComponent {
   readonly allowNew: import("@angular/core").InputSignal<boolean>;
   /** Shows the bins (row and thread header) for a writer. `false` for a host that cannot delete conversations. */
   readonly allowDelete: import("@angular/core").InputSignal<boolean>;
+  /** The arrow at the end of each conversation row, drawn inside the row so its highlight covers it. Default false (hidden); `true` where the arrow helps (rows that open a thread on a phone). */
+  readonly showRowArrow: import("@angular/core").InputSignal<boolean>;
+  /** Rows open their conversation on click / Enter (pointer cursor, hover tint, focusable) and the thread has a Back button. `false` for a host with one conversation that is always open: nothing to click, no Back. */
+  readonly selectable: import("@angular/core").InputSignal<boolean>;
   readonly newLabel: import("@angular/core").InputSignal<string>;
   readonly newTooltip: import("@angular/core").InputSignal<string>;
   readonly deleteRowLabel: import("@angular/core").InputSignal<string>;
@@ -13367,6 +13413,8 @@ export declare class ConversationsComponent {
   readonly composerError: import("@angular/core").InputSignal<string>;
   /** Longest message the box accepts (1600 = the SMS provider's limit for one send). */
   readonly maxLength: import("@angular/core").InputSignal<number>;
+  /** The composer is the library's rich text editor (bold, italic, underline, links, lists) and `[(draft)]` holds its HTML; `(send)` reports `text` and `html`. Messages show their `bodyHtml`. Default false: a plain text box. */
+  readonly richText: import("@angular/core").InputSignal<boolean>;
   readonly attachment: import("@angular/core").InputSignal<ConversationAttachment | null>;
   readonly uploading: import("@angular/core").InputSignal<boolean>;
   readonly attachEnabled: import("@angular/core").InputSignal<boolean>;
@@ -13430,6 +13478,9 @@ export declare class ConversationsComponent {
   protected readonly contextVisible: import("@angular/core").Signal<boolean>;
   /** Something to send (text or a file), the composer is open and no request is running. */
   readonly canSend: import("@angular/core").Signal<boolean>;
+  /** The draft as plain text: the draft itself, or the text of its HTML in the rich composer. */
+  protected readonly draftText: import("@angular/core").Signal<string>;
+  protected readonly richHide: RichTextOption[];
   constructor();
   protected relativeTime(iso: string | null | undefined): string;
   protected preview(text: string | null | undefined): string;
@@ -13584,6 +13635,16 @@ export declare class ConversationsComponent {
       "required": false;
       "isSignal": true;
     };
+    "showRowArrow": {
+      "alias": "showRowArrow";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectable": {
+      "alias": "selectable";
+      "required": false;
+      "isSignal": true;
+    };
     "newLabel": {
       "alias": "newLabel";
       "required": false;
@@ -13789,6 +13850,11 @@ export declare class ConversationsComponent {
       "required": false;
       "isSignal": true;
     };
+    "richText": {
+      "alias": "richText";
+      "required": false;
+      "isSignal": true;
+    };
     "attachment": {
       "alias": "attachment";
       "required": false;