@forgeroute/ui 0.3.1 → 0.3.3

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/forms": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@angular/platform-browser": ">=22.0.0"
+    "@angular/platform-browser": ">=22.0.0",
+    "chart.js": ">=4.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/forms": {
       "optional": false
+    },
+    "chart.js": {
+      "optional": true
     }
   },
   "publishConfig": {

package/types/forgeroute-ui.d.ts

@@ -135,19 +135,14 @@ export interface ColumnDef {
   overdueThreshold?: number;
   /**
    * Maps a row to a progress bar. Return null to render a plain '—' (e.g. nothing to track).
-   * `label` is the text beside the bar (e.g. "3/5"); `tooltip` is the hover text.
+   * `label` is the text beside the bar (e.g. "3/5"); `tooltip` is the hover text. Leave `variant` out and the bar colors itself by completion (red / amber / blue / green).
    */
   progressFn?: (item: any) => {
     value: number;
     max: number;
     label?: string;
-    variant?: 'blue' | 'green' | 'amber' | 'red' | 'slate' | 'lime';
+    variant?: 'blue' | 'green' | 'amber' | 'red' | 'slate';
     tooltip?: string;
-    autoColor?: boolean;
-    thresholds?: {
-      at: number;
-      variant: 'blue' | 'green' | 'amber' | 'red' | 'slate' | 'lime';
-    }[];
   } | null;
   /** Key in item holding the tags array. Defaults to col.key.
    *  Expected shape: { name: string; variant?: BadgeVariant }[] */
@@ -279,14 +274,17 @@ export interface BulkConfirmContext<T = any> {
   /** Raw target value ("APPROVED") and its display label ("Approved"). */
   targetValue: string;
   targetLabel: string;
-  /** The eligible row objects (name records, show before -> after). Only rows on the loaded page are available. */
+  /**
+   * The eligible row objects (name records, show before -> after). A selection never spans pages (any reload clears it and
+   * select-all takes the loaded page), so these are every row that will be sent.
+   */
   rows: T[];
   /** The selected rows that will be skipped. */
   skippedRows: T[];
 }
 /** Host copy for one bulk confirm. Plain text only (never HTML); `\n` in `message` shows as a line break. */
 export interface BulkConfirmCopy {
-  /** Default: the action label ("Change Status") / "Delete Selected". */
+  /** Default: the action label ("Change Status") / "Delete <Items>" built from the table's item label ("template" → "Delete Templates"). */
   title?: string;
   message: string;
   /** Rendered as a bullet list under the message (consequences, what is NOT affected, undoable or not). */
@@ -1086,6 +1084,8 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   /** Plural label; defaults to English pluralisation of `itemLabel` ("property" → "properties"). */
   readonly itemLabelPlural: import("@angular/core").InputSignal<string>;
   protected _countLabel(count: number): string;
+  /** Default bulk-Delete confirm title: "Delete " + the title-cased plural item label ("template" → "Delete Templates", "lien waiver" → "Delete Lien Waivers"). */
+  protected _deleteTitle(): string;
   /**
    * Column keys to enable bulk updates for, plus the special keyword `'delete'`.
    * e.g. `['status', 'type', 'delete']`
@@ -1764,17 +1764,14 @@ export declare class ToastComponent {
   static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "ui-toast", never, {}, {}, never, never, true, never>;
 }
-export type ProgressBarVariant = 'blue' | 'green' | 'amber' | 'red' | 'slate' | 'lime';
-/** Switch the fill to `variant` once completion reaches `at` percent (0-100). */
-export interface ProgressThreshold {
-  at: number;
-  variant: ProgressBarVariant;
-}
-/** Standard completion colors: red under 25%, amber 25%, blue 50%, lime 75%, green at 100%. */
-export declare const PROGRESS_STEP_THRESHOLDS: ProgressThreshold[];
+export type ProgressBarVariant = 'blue' | 'green' | 'amber' | 'red' | 'slate';
 /**
  * Horizontal progress bar with an optional trailing label (e.g. "3/5").
  * Pass `value` and `max`; the fill width is clamped to 0–100%.
+ *
+ * The fill color is built in and follows completion, in four bands: red up to 25%, amber up to 50%, blue up to 75%,
+ * green above 75% (full = green). Nothing needs to be passed. `variant` is an optional override for a bar whose
+ * color means something else (for example an overdue status) — when it is set the color stays fixed.
  */
 export declare class ProgressBarComponent {
   /** Completed amount. */
@@ -1783,21 +1780,14 @@ export declare class ProgressBarComponent {
   readonly max: import("@angular/core").InputSignal<number>;
   /** Text shown to the right of the bar, e.g. "3/5". */
   readonly label: import("@angular/core").InputSignal<string>;
-  /** Fixed color; with `autoColor` it is the color below the first step (use `red`). */
-  readonly variant: import("@angular/core").InputSignal<ProgressBarVariant>;
-  /**
-   * Optional automatic color: the fill uses the variant of the highest threshold whose `at` is
-   * <= the exact completion percent (not the rounded one), else `variant`.
-   * e.g. `[{ at: 50, variant: 'amber' }, { at: 100, variant: 'green' }]`. Omit to keep `variant` fixed.
-   */
-  readonly thresholds: import("@angular/core").InputSignal<ProgressThreshold[] | null>;
-  /** Shortcut for the standard steps (`PROGRESS_STEP_THRESHOLDS`): red <25%, amber 25%, blue 50%, lime 75%, green 100%. Explicit `thresholds` win. */
-  readonly autoColor: import("@angular/core").InputSignal<boolean>;
+  /** Optional fixed color override. Leave it out and the color follows completion (red / amber / blue / green). */
+  readonly variant: import("@angular/core").InputSignal<ProgressBarVariant | null | undefined>;
   /** Hover / focus tooltip (library `uiTooltip`); `\n` starts a new line. */
   readonly tooltip: import("@angular/core").InputSignal<string>;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   protected readonly clampedValue: import("@angular/core").Signal<number>;
   protected readonly percent: import("@angular/core").Signal<number>;
+  /** The override when given, else the completion band: up to 25% red, up to 50% amber, up to 75% blue, above 75% green. */
   protected readonly effectiveVariant: import("@angular/core").Signal<ProgressBarVariant>;
   static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "ui-progress-bar", never, {
@@ -1821,18 +1811,86 @@ export declare class ProgressBarComponent {
       "required": false;
       "isSignal": true;
     };
-    "thresholds": {
-      "alias": "thresholds";
+    "tooltip": {
+      "alias": "tooltip";
       "required": false;
       "isSignal": true;
     };
-    "autoColor": {
-      "alias": "autoColor";
+    "ariaLabel": {
+      "alias": "ariaLabel";
       "required": false;
       "isSignal": true;
     };
-    "tooltip": {
-      "alias": "tooltip";
+  }, {}, never, never, true, never>;
+}
+/**
+ * Bar chart of one series (e.g. calls per day). Pass the category `labels` and the matching `values`.
+ *
+ *   <ui-bar-chart [labels]="['8/1', '8/2']" [values]="[3, 0]" ariaLabel="Daily call volume"
+ *                 unitSingular="call" unitPlural="calls" />
+ *
+ * - Bars show their value above them (`showValues`, a 0 bar shows nothing), the y axis starts at 0 and counts whole numbers.
+ * - The tooltip reads "<value> <unit>" (`unitSingular` for 1, `unitPlural` otherwise; no unit = just the number).
+ * - The canvas is an image for assistive tech (`role="img"` + `ariaLabel`); render the same figures as text next to it
+ *   (e.g. a visually hidden list) when the exact values matter.
+ * - Height is `height` px (shorter on phones: 200px up to 768px wide, 160px up to 480px wide, when the default 240 is used);
+ *   the width follows the container. Needs the optional peer dependency `chart.js` (>= 4).
+ */
+export declare class BarChartComponent {
+  /** Category labels, left to right (one per bar). */
+  readonly labels: import("@angular/core").InputSignal<string[]>;
+  /** The bar values, in the order of `labels`. */
+  readonly values: import("@angular/core").InputSignal<number[]>;
+  /** Bar colour (any CSS colour). */
+  readonly color: import("@angular/core").InputSignal<string>;
+  /** Bar colour while hovered. */
+  readonly hoverColor: import("@angular/core").InputSignal<string>;
+  /** Chart height in px. */
+  readonly height: import("@angular/core").InputSignal<number>;
+  /** Spoken description of the chart. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Show each bar's value above it. */
+  readonly showValues: import("@angular/core").InputSignal<boolean>;
+  /** Tooltip unit for exactly 1 (e.g. "call"). */
+  readonly unitSingular: import("@angular/core").InputSignal<string>;
+  /** Tooltip unit for any other value (e.g. "calls"). */
+  readonly unitPlural: import("@angular/core").InputSignal<string>;
+  private readonly canvas;
+  private readonly zone;
+  private chart;
+  private readonly tooltipText;
+  protected readonly series: import("@angular/core").Signal<{
+    labels: string[];
+    data: number[];
+    color: string;
+    hoverColor: string;
+    showValues: boolean;
+  }>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<BarChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BarChartComponent, "ui-bar-chart", never, {
+    "labels": {
+      "alias": "labels";
+      "required": false;
+      "isSignal": true;
+    };
+    "values": {
+      "alias": "values";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "hoverColor": {
+      "alias": "hoverColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
       "required": false;
       "isSignal": true;
     };
@@ -1841,6 +1899,21 @@ export declare class ProgressBarComponent {
       "required": false;
       "isSignal": true;
     };
+    "showValues": {
+      "alias": "showValues";
+      "required": false;
+      "isSignal": true;
+    };
+    "unitSingular": {
+      "alias": "unitSingular";
+      "required": false;
+      "isSignal": true;
+    };
+    "unitPlural": {
+      "alias": "unitPlural";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 export declare class SkeletonComponent {
@@ -2087,6 +2160,8 @@ export declare class ButtonComponent {
   readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
   readonly ariaExpanded: import("@angular/core").InputSignal<boolean | undefined>;
   readonly ariaPressed: import("@angular/core").InputSignal<boolean | undefined>;
+  /** Id of the element that describes this button (an error or hint rendered next to it), e.g. `<ui-error errorId="x">`. Absent when empty. */
+  readonly ariaDescribedBy: import("@angular/core").InputSignal<string | undefined>;
   _footerLeft?: string;
   _footerRight?: string;
   static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
@@ -2146,6 +2221,11 @@ export declare class ButtonComponent {
       "required": false;
       "isSignal": true;
     };
+    "ariaDescribedBy": {
+      "alias": "ariaDescribedBy";
+      "required": false;
+      "isSignal": true;
+    };
     "_footerLeft": {
       "alias": "modal-footer-left";
       "required": false;
@@ -5936,6 +6016,133 @@ export declare class RadioGroupComponent implements ControlValueAccessor, Valida
     "invalidChange": "invalidChange";
   }, never, never, true, never>;
 }
+/** One row of a `ui-radio-matrix`: `value` is the key in the model, `label` the row header. */
+export interface RadioMatrixRow {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+/**
+ * Matrix of native radio buttons: one row per item, one column per choice, exactly one choice per row (e.g. a page-permission
+ * grid: rows = pages, columns = Full Access / Read Only / Hidden). A ControlValueAccessor whose value is a record
+ * `{ [row.value]: column.value }` (`''` / missing = nothing chosen for that row). Arrow keys move inside a row natively because the
+ * radios of a row share one `name`. Every radio is named "<row>: <column>" for screen readers; rows are `<th scope="row">`, columns
+ * `<th scope="col">`.
+ *
+ * Built-in validation: `required` -> every row needs a choice ("Choose an option in every row." / "<label>: choose an option in
+ * every row."); a value that is not one of the `columns` -> "Select a valid option."; a key that is not one of the `rows` is
+ * ignored (and kept untouched in the model). Disabled matrices are never invalid.
+ *
+ * Validity API (same on every ui input): Angular `Validator`, signals `invalid` + `errorMessage`, `invalidChange` output,
+ * provides `UiFieldValidity`. Messages show after the matrix lost focus or while `[showErrors]="true"`; a host `[error]` wins.
+ *
+ *   <ui-radio-matrix label="Page permissions" rowHeader="Page" [rows]="pages" [columns]="levels" [(ngModel)]="permissions" />
+ */
+export declare class RadioMatrixComponent implements ControlValueAccessor, Validator, UiFieldValidity {
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Text of the top-left header cell (what the rows are, e.g. "Page"). */
+  readonly rowHeader: import("@angular/core").InputSignal<string>;
+  readonly rows: import("@angular/core").InputSignal<RadioMatrixRow[]>;
+  /** The choices, one column each (same shape as `ui-radio-group` options; `description` is not shown). */
+  readonly columns: import("@angular/core").InputSignal<RadioOption[]>;
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  readonly hint: import("@angular/core").InputSignal<string>;
+  readonly error: import("@angular/core").InputSignal<string>;
+  /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
+  readonly showErrors: import("@angular/core").InputSignal<boolean>;
+  /** Prefix of the native radio `name`s (one name per row); a unique one is generated when omitted. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  private readonly _cvaDisabled;
+  protected readonly disabled: import("@angular/core").Signal<boolean>;
+  private readonly _generatedName;
+  protected get _name(): string;
+  protected readonly _descId: string;
+  protected readonly _value: import("@angular/core").WritableSignal<Record<string, string>>;
+  private readonly _reveal;
+  private readonly _issue;
+  /** True while the value breaks a built-in rule or the host passed an `[error]`. */
+  readonly invalid: import("@angular/core").Signal<boolean>;
+  /** Message of the first broken built-in rule ('' when valid), shown or not. */
+  readonly errorMessage: import("@angular/core").Signal<string>;
+  /** Emits whenever the field becomes invalid / valid. */
+  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  protected readonly _activeError: import("@angular/core").Signal<string>;
+  private _onValidatorChange;
+  constructor();
+  /** Re-run the form control's validation when a rule input (required, rows, columns) changes. */
+  ngOnChanges(): void;
+  validate(control: AbstractControl): ValidationErrors | null;
+  registerOnValidatorChange(fn: () => void): void;
+  private _onChange;
+  private _onTouched;
+  writeValue(val: Record<string, string> | null): void;
+  registerOnChange(fn: (v: Record<string, string>) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  protected onSelect(row: string, column: string): void;
+  /** True when a required matrix has no valid choice in this row (shown on the row header and the dots). */
+  protected _rowInvalid(row: RadioMatrixRow): boolean;
+  /** Touched once focus leaves the whole matrix (moving between its radios does not count). */
+  protected onFocusOut(event: FocusEvent): void;
+  private _toRecord;
+  private _check;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RadioMatrixComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RadioMatrixComponent, "ui-radio-matrix", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "rowHeader": {
+      "alias": "rowHeader";
+      "required": false;
+      "isSignal": true;
+    };
+    "rows": {
+      "alias": "rows";
+      "required": false;
+      "isSignal": true;
+    };
+    "columns": {
+      "alias": "columns";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "showErrors": {
+      "alias": "showErrors";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "_disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "invalidChange": "invalidChange";
+  }, never, never, true, never>;
+}
 /**
  * Card for detail pages: an optional header and a body, both filled by the page that uses it.
  *