@forgeroute/ui 0.4.47 → 0.4.49

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -1268,6 +1268,8 @@ export declare class ImportExportComponent {
   /** Unique prefix for the ids this window links with aria-describedby / aria-labelledby. */
   readonly uid: string;
   private readonly resultBox;
+  /** The container of the step on screen (Source / Upload / Map Columns / Preview): focused when the step changes, because the control the user pressed is gone. */
+  private readonly stepBox;
   private readonly http;
   /** API root from FORGEROUTE_CONFIG (e.g. a cross-origin prod API); falls back to same-origin `/api`. */
   private readonly apiBase;
@@ -1326,6 +1328,8 @@ export declare class ImportExportComponent {
   goToPreview(): void;
   get mappedFields(): ImportFieldDef[];
   get previewRows(): Record<string, string>[];
+  /** Shows another step and moves focus to its container (the pressed button / focused file input was removed from the page). */
+  goTo(step: ImportStep): void;
   /** Moves focus to the result summary (the button that had it is gone), so keyboard and screen reader users land on the outcome. */
   private focusResult;
   private stopImportTimer;
@@ -1573,6 +1577,13 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    */
   private _columnBadgeLabel;
   protected readonly _error: import("@angular/core").WritableSignal<string | null>;
+  private readonly _loadFailed;
+  /**
+   * True from a failed load (the table shows its error state) until a later load SUCCEEDS. Unlike the error state itself it stays true while
+   * Retry / a reload is in flight, so a host can keep its own controls (a date range card, say) out of the page for the whole time the
+   * table is not showing real data. Read it through the table reference: `tableRef()?.loadFailed()`.
+   */
+  readonly loadFailed: Signal<boolean>;
   protected readonly _search: import("@angular/core").WritableSignal<string>;
   /** The search text as sent to the API: lower-cased, so every search is case-insensitive whatever the backend does. The input still shows what the user typed. */
   protected readonly _searchParam: Signal<string>;
@@ -2222,7 +2233,7 @@ export declare class ModalComponent implements OnInit, OnDestroy {
   readonly title: import("@angular/core").InputSignal<string>;
   readonly description: import("@angular/core").InputSignal<string>;
   readonly maxWidth: import("@angular/core").InputSignal<string>;
-  readonly bodyOverflow: import("@angular/core").InputSignal<"auto" | "hidden" | "visible">;
+  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. */
   readonly dialogTestId: import("@angular/core").InputSignal<string>;
   /** Hides the header X button (e.g. while a request is running). Escape and a backdrop click still close unless `closable` is false. */
@@ -2606,7 +2617,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<"auto" | "none" | "metadata">;
+  readonly preload: import("@angular/core").InputSignal<"none" | "metadata" | "auto">;
   /** 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>;
@@ -2860,7 +2871,7 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
    * clicking it still toggles the box - e.g. a product name that is both the heading of its card and the label of its checkbox.
    * Default null: plain label text, exactly as before. Single mode only.
    */
-  readonly headingLevel: import("@angular/core").InputSignal<1 | 4 | 2 | 3 | 5 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 5 | 3 | 6 | 4 | null>;
   readonly indeterminate: import("@angular/core").InputSignal<boolean>;
   readonly checked: import("@angular/core").ModelSignal<boolean>;
   /**
@@ -4076,6 +4087,10 @@ export interface ToggleBadgeAction {
  * Pill that toggles on / off. Optional `actions` put small icon buttons INSIDE the pill, after the label and a divider, each with its own
  * tooltip; the label button and the icon buttons are separate buttons (never nested). Clicking an icon button emits `(action)` with its id and
  * never `(toggle)`. Content projected into the component (an icon) goes before the label, as before.
+ *
+ * Accessibility: the label button is a toggle button, so it carries `aria-pressed` (true while `active`); on touch devices
+ * (`pointer: coarse`) its hit area, and each icon button's, is 44px (an invisible overlay; it can reach into a neighbouring badge when the
+ * host's gap between badges is smaller than the overlay, see docs/ui-timeline-and-small-additions.md).
  */
 export declare class ToggleBadgeComponent {
   readonly label: import("@angular/core").InputSignal<string>;
@@ -4141,6 +4156,8 @@ export declare class PillTabsComponent {
   /** Accessible name for the tab list (e.g. 'Reporting period'). Omit to leave it unnamed. */
   readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
   readonly name: import("@angular/core").InputSignal<string>;
+  /** Keep every pill at its own width on one line (default false: pills may shrink and wrap their text). On a phone the row scrolls sideways, as it always does. */
+  readonly noWrap: import("@angular/core").InputSignal<boolean>;
   readonly tabChange: import("@angular/core").OutputEmitterRef<string>;
   /** True while pills are hidden past the start / end edge of the scroll area (drives the fade hints). */
   protected readonly canScrollStart: import("@angular/core").WritableSignal<boolean>;
@@ -4173,6 +4190,11 @@ export declare class PillTabsComponent {
       "required": false;
       "isSignal": true;
     };
+    "noWrap": {
+      "alias": "noWrap";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "tabChange": "tabChange";
   }, never, never, true, never>;
@@ -4363,7 +4385,7 @@ export declare class BulkMessagePanelComponent {
   readonly sending: import("@angular/core").InputSignal<boolean>;
   readonly closed: import("@angular/core").OutputEmitterRef<void>;
   readonly send: import("@angular/core").OutputEmitterRef<BulkMessageSendEvent>;
-  readonly channel: import("@angular/core").WritableSignal<"email" | "text">;
+  readonly channel: import("@angular/core").WritableSignal<"text" | "email">;
   private readonly _subject;
   private readonly _body;
   get subject(): string;
@@ -4418,7 +4440,7 @@ export declare class ImportSourceGridComponent {
   /** The `value` of the picked source (highlighted). `tile` only: the `card` appearance does not keep a selection. */
   readonly selected: import("@angular/core").InputSignal<string>;
   /** `tile`: the compact buttons of the import window. `card`: one `ui-detail-card` per source with its own select button (used on a page). */
-  readonly appearance: import("@angular/core").InputSignal<"tile" | "card">;
+  readonly appearance: import("@angular/core").InputSignal<"card" | "tile">;
   /** `card`: disables every card's button (for example while the page is saving). */
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   /** `card`: the text of each card's button. */
@@ -4727,7 +4749,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   readonly passwordRequirements: import("@angular/core").InputSignal<boolean>;
   /** Rules for `passwordRequirements`; default = the library's five rules (8+ characters, upper, lower, digit, special). */
   readonly passwordRules: import("@angular/core").InputSignal<readonly PasswordRule[] | undefined>;
-  readonly type: import("@angular/core").InputSignal<"number" | "email" | "text" | "password" | "tel" | "url">;
+  readonly type: import("@angular/core").InputSignal<"number" | "text" | "email" | "tel" | "password" | "url">;
   readonly maxlength: import("@angular/core").InputSignal<number | undefined>;
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
@@ -4736,7 +4758,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<"" | "email" | "search" | "none" | "text" | "tel" | "url" | "decimal" | "numeric">;
+  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>;
   readonly error: import("@angular/core").InputSignal<string>;
@@ -4800,7 +4822,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   protected readonly _stepAttr: import("@angular/core").Signal<string | null>;
   protected readonly _revealable: import("@angular/core").Signal<boolean>;
   protected readonly _shown: import("@angular/core").WritableSignal<boolean>;
-  protected readonly _inputType: import("@angular/core").Signal<"number" | "email" | "text" | "password" | "tel" | "url">;
+  protected readonly _inputType: import("@angular/core").Signal<"number" | "text" | "email" | "tel" | "password" | "url">;
   protected readonly _eyePath: string;
   protected readonly _eyeOffPath: string;
   protected readonly _showRequirements: import("@angular/core").Signal<boolean>;
@@ -6158,8 +6180,13 @@ 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
+   * width whatever label is selected (never wider than its container) and its label and chevron sit at the two ends.
+   */
+  readonly width: import("@angular/core").InputSignal<string>;
   /**
    * Accessible name. Set it when the trigger has no meaningful visible text. Applied as `aria-label` on the
    * trigger and on the menu; when empty (default) no `aria-label` is rendered, the trigger is named by its
@@ -6258,6 +6285,11 @@ export declare class DropdownComponent {
       "required": false;
       "isSignal": true;
     };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
     "ariaLabel": {
       "alias": "ariaLabel";
       "required": false;
@@ -6357,7 +6389,7 @@ export declare class FormSectionComponent {
   }, {}, never, ["*"], true, never>;
 }
 export declare class FormRowComponent {
-  readonly cols: import("@angular/core").InputSignal<1 | 4 | 2 | 3>;
+  readonly cols: import("@angular/core").InputSignal<1 | 2 | 3 | 4>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormRowComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<FormRowComponent, "ui-form-row", never, {
     "cols": {
@@ -7401,7 +7433,7 @@ export declare class ChipGroupComponent {
   readonly spaceAbove: import("@angular/core").InputSignal<"none" | "sm" | "md">;
   /** Space below the chip group. */
   readonly spaceBelow: import("@angular/core").InputSignal<"none" | "sm" | "md">;
-  protected readonly _gap: import("@angular/core").Signal<"8px" | "6px" | "12px">;
+  protected readonly _gap: import("@angular/core").Signal<"6px" | "12px" | "8px">;
   protected readonly _spaceAbove: import("@angular/core").Signal<"0" | "6px" | "12px">;
   protected readonly _spaceBelow: import("@angular/core").Signal<"0" | "6px" | "12px">;
   static ɵfac: i0.ɵɵFactoryDeclaration<ChipGroupComponent, never>;
@@ -8492,7 +8524,7 @@ export interface DateRange {
  * Date range picker: preset pills (Today … Year to Date, optional All Time, Custom Range) plus
  * From / To date inputs with an Apply button for the custom range. With the presets shown, the custom range opens in a
  * popover card under the pills (right-aligned, closes on Apply / Escape / outside click; picking Custom Range again
- * reopens it); with `showPresets` false the From / To row is rendered inline. Emits `rangeChange` with the
+ * reopens it; a picker CREATED on `activePreset="custom"` starts with the popover closed and the Custom Range tab highlighted); with `showPresets` false the From / To row is rendered inline. Emits `rangeChange` with the
  * resolved ISO dates whenever a preset is picked or a custom range is applied.
  *
  *   <ui-date-range-picker [activePreset]="preset()" [includeAllTime]="true" (rangeChange)="onRange($event)" />
@@ -8506,9 +8538,16 @@ export declare class DateRangePickerComponent {
   /** Accessible name of the preset tab list (screen readers announce it when the tabs get focus). */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly rangeChange: import("@angular/core").OutputEmitterRef<DateRange>;
-  /** Follows `activePreset` from the host, and the user's own picks in between. */
+  /**
+   * Follows `activePreset` from the host, and the user's own picks in between. A pick of Custom Range that is closed without Apply
+   * (Escape / outside click) is discarded: the selection goes back to `activePreset`, the range the host actually applied.
+   */
   protected readonly selectedPreset: import("@angular/core").WritableSignal<DatePreset>;
-  /** The popover was closed (Apply / Escape / outside click); any preset change reopens it. */
+  /**
+   * The popover was closed (Apply / Escape / outside click); any preset change reopens it. It starts CLOSED: a picker created with
+   * `activePreset="custom"` (a host that re-creates it while a custom range is applied: a tab switched back to, a retry after an error)
+   * shows that applied range as the highlighted tab, it does not open an empty From / To card. Clicking the tab reopens it.
+   */
   private readonly popoverDismissed;
   protected readonly popoverVisible: import("@angular/core").Signal<boolean>;
   protected readonly popTop: import("@angular/core").WritableSignal<number>;
@@ -8521,6 +8560,13 @@ export declare class DateRangePickerComponent {
   private place;
   protected onDocumentClick(e: Event): void;
   protected onEscape(e: Event): void;
+  /** Closes the custom popover without applying: nothing was applied, so the highlighted preset returns to the host's applied one. */
+  private dismissWithoutApply;
+  /**
+   * The tab list only reports a CHANGE of tab, so a click on the Custom Range tab that is already selected (an applied custom range whose
+   * popover was closed) reopens the popover here.
+   */
+  protected onPillsClick(e: Event): void;
   selectPreset(key: DatePreset): void;
   applyCustom(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerComponent, never>;
@@ -9315,7 +9361,7 @@ export declare class DetailCardComponent {
   /** true (default) = the title is displayed in capitals (CSS only); false = shown as written. The text, aria-label and heading name are never changed. */
   readonly uppercaseTitle: import("@angular/core").InputSignal<boolean>;
   /** 1-6 makes the title a real heading for screen readers (role=heading, aria-level); null keeps it plain text. */
-  readonly headingLevel: import("@angular/core").InputSignal<1 | 4 | 2 | 3 | 5 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 5 | 3 | 6 | 4 | null>;
   /** Optional id for the title text; the card is then labelled by it. Without it the title is the card's aria-label. */
   readonly titleId: import("@angular/core").InputSignal<string>;
   /** Accessible name of the card when the header gives none (no header, or no title). A visible title wins; blank = no name. */
@@ -10232,6 +10278,12 @@ export type ColumnsAlign = 'start' | 'center' | 'stretch';
  *  - `collapseAt`: sm (480px) | md (768px) | lg (1024px) | never. Below that viewport width the columns become one.
  *    Plain media queries are used (not container queries) because they behave the same in every supported browser.
  *  - `align`: start | center | stretch (default start) - how cells of different heights line up.
+ *  - `spanLastOdd` (default false): in a 2-column grid, a last cell that would sit alone in its row spans the whole row instead of
+ *    leaving an empty half (3 cells -> 2 + 1 full-width; 1 cell -> full width). Only for a grid that has 1 or 2 columns at EVERY width:
+ *    `count` 2 and every `countBelow*` tier (after its fallback to the next wider tier) 1 or 2, collapsing included. With a 3 or 4 column tier
+ *    at any width, or in `countFrom*` mode, the span is not applied at all (an inline span would break that width's grid). It is applied to the
+ *    last VISIBLE element child (a `hidden` / `display: none` cell is skipped), and a last cell that already has its own inline `grid-column`
+ *    is left alone. It is re-applied when cells come and go and when a direct child's `hidden`, `style` or `class` attribute changes.
  *  - Responsive tiers (optional): `countBelowLg` (viewport <= 1024px), `countBelowMd` (<= 768px) and `countBelowSm` (<= 480px)
  *    give a different column count (1-4) at narrower widths. Each tier falls back to the next wider one, then to `count`, so
  *    a grid that sets none of them is unchanged. `collapseAt` is applied last: a width at or below it is one column.
@@ -10250,6 +10302,8 @@ export declare class ColumnsComponent {
   readonly gap: import("@angular/core").InputSignal<string>;
   readonly collapseAt: import("@angular/core").InputSignal<ColumnsCollapse>;
   readonly align: import("@angular/core").InputSignal<ColumnsAlign>;
+  /** 2-column grids: an odd last cell spans the full row instead of leaving an empty half. Default false. */
+  readonly spanLastOdd: import("@angular/core").InputSignal<boolean>;
   /** Column count at viewport widths <= 1024px (falls back to `count`). */
   readonly countBelowLg: import("@angular/core").InputSignal<ColumnsCount | null>;
   /** Column count at <= 768px (falls back to `countBelowLg`, then `count`). */
@@ -10276,8 +10330,21 @@ export declare class ColumnsComponent {
   protected readonly fromSm: import("@angular/core").Signal<ColumnsCount | null>;
   protected readonly fromMd: import("@angular/core").Signal<ColumnsCount | null>;
   protected readonly fromLg: import("@angular/core").Signal<ColumnsCount | null>;
+  /** The column count at each width after the tier fallbacks: base (> 1024px), <= 1024, <= 768, <= 480. */
+  private readonly effectiveCols;
+  /** spanLastOdd only when the grid has 2 columns on wide screens and never more than 2 at any width (and is not in countFrom* mode). */
+  protected readonly spanFits: import("@angular/core").Signal<boolean>;
   protected readonly gapCss: import("@angular/core").Signal<string>;
   protected readonly collapseClass: import("@angular/core").Signal<string>;
+  private readonly grid;
+  private readonly destroyRef;
+  private static readonly SPAN_MARK;
+  constructor();
+  /**
+   * Marks the last VISIBLE element child (when it would be alone in its row) with `grid-column: 1 / -1`, and clears a mark left on any other child.
+   * A cell the consumer gave its own inline `grid-column` is never marked or cleared.
+   */
+  private applySpan;
   static ɵfac: i0.ɵɵFactoryDeclaration<ColumnsComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ColumnsComponent, "ui-columns", never, {
     "count": {
@@ -10300,6 +10367,11 @@ export declare class ColumnsComponent {
       "required": false;
       "isSignal": true;
     };
+    "spanLastOdd": {
+      "alias": "spanLastOdd";
+      "required": false;
+      "isSignal": true;
+    };
     "countBelowLg": {
       "alias": "countBelowLg";
       "required": false;