@forgeroute/ui 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
@@ -36,6 +36,10 @@
     ".": {
       "types": "./types/forgeroute-ui.d.ts",
       "default": "./fesm2022/forgeroute-ui.mjs"
+    },
+    "./charts": {
+      "types": "./types/forgeroute-ui-charts.d.ts",
+      "default": "./fesm2022/forgeroute-ui-charts.mjs"
     }
   },
   "sideEffects": false,

package/types/forgeroute-ui-charts.d.ts

@@ -0,0 +1,95 @@
+import * as i0 from "@angular/core";
+/**
+ * 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).
+ * - With an `ariaLabel` the chart is an image for assistive tech (`role="img"` + that label; without a label no role is set, as an
+ *   unnamed image is an accessibility error); 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;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "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>;
+}

package/types/forgeroute-ui.d.ts

@@ -834,7 +834,7 @@ export declare class SelectComponent implements ControlValueAccessor, Validator,
   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>;
-  readonly size: import("@angular/core").InputSignal<"sm" | "default">;
+  readonly size: import("@angular/core").InputSignal<"default" | "sm">;
   readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
@@ -1685,7 +1685,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<"hidden" | "auto" | "visible">;
+  readonly bodyOverflow: import("@angular/core").InputSignal<"auto" | "hidden" | "visible">;
   readonly close: import("@angular/core").OutputEmitterRef<void>;
   protected readonly titleId: string;
   private readonly el;
@@ -1826,74 +1826,33 @@ export declare class ProgressBarComponent {
   }, {}, never, never, true, never>;
 }
 /**
- * Bar chart of one series (e.g. calls per day). Pass the category `labels` and the matching `values`.
+ * Audio player for a recording (a call, a voicemail, a message): the browser's own controls (play / pause, seek, time, volume,
+ * keyboard and screen-reader support, the same in Chrome, Edge, Firefox and Safari) in the library's look, plus a readable message
+ * when the file can't be played.
  *
- *   <ui-bar-chart [labels]="['8/1', '8/2']" [values]="[3, 0]" ariaLabel="Daily call volume"
- *                 unitSingular="call" unitPlural="calls" />
+ *   <ui-audio-player [src]="blobUrl()" ariaLabel="Call recording playback" />
  *
- * - 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).
- * - With an `ariaLabel` the chart is an image for assistive tech (`role="img"` + that label; without a label no role is set, as an
- *   unnamed image is an accessibility error); 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).
+ * - `src`: the audio URL (an object URL from a fetched blob works). An empty `src` renders the player with nothing to play.
+ * - `ariaLabel`: the accessible name of the player. Give it one; without it assistive tech just hears "audio".
+ * - `preload`: 'metadata' (default; loads the length only), 'auto' or 'none'.
+ * - `playbackError` fires once per failed source; the message "Audio could not be played." replaces the player until `src` changes.
  */
-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. */
+export declare class AudioPlayerComponent {
+  /** The audio URL. */
+  readonly src: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the player. */
   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;
-  }>;
+  /** How much to load before play: 'metadata' (default), 'auto' or 'none'. */
+  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>;
   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";
+  protected onError(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<AudioPlayerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<AudioPlayerComponent, "ui-audio-player", never, {
+    "src": {
+      "alias": "src";
       "required": false;
       "isSignal": true;
     };
@@ -1902,22 +1861,14 @@ export declare class BarChartComponent {
       "required": false;
       "isSignal": true;
     };
-    "showValues": {
-      "alias": "showValues";
+    "preload": {
+      "alias": "preload";
       "required": false;
       "isSignal": true;
     };
-    "unitSingular": {
-      "alias": "unitSingular";
-      "required": false;
-      "isSignal": true;
-    };
-    "unitPlural": {
-      "alias": "unitPlural";
-      "required": false;
-      "isSignal": true;
-    };
-  }, {}, never, never, true, never>;
+  }, {
+    "playbackError": "playbackError";
+  }, never, never, true, never>;
 }
 export declare class SkeletonComponent {
   readonly height: import("@angular/core").InputSignal<number>;
@@ -1957,7 +1908,7 @@ export declare class TooltipDirective {
   /** Tooltip text; empty or null disables the tooltip. */
   readonly uiTooltip: import("@angular/core").InputSignal<string | null | undefined>;
   /** Preferred side; flips to the other side when there is no room. */
-  readonly tooltipPosition: import("@angular/core").InputSignal<"bottom" | "top">;
+  readonly tooltipPosition: import("@angular/core").InputSignal<"top" | "bottom">;
   private readonly host;
   private readonly doc;
   private bubble;
@@ -6195,7 +6146,7 @@ export declare class DetailCardComponent {
   /** Bold uppercase title. Empty = no title text. */
   readonly title: import("@angular/core").InputSignal<string>;
   /** 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 | 2 | 5 | 3 | 6 | 4 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 6 | 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>;
   /** Grey line under the title. */