@forgeroute/ui 0.3.4 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "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

@@ -1767,7 +1767,8 @@ export declare class ToastComponent {
 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%.
+ * Pass `value` and `max`; the fill width is clamped to 0–100%, rounded to whole percents, and a value above 0 is never drawn narrower
+ * than 2% (so 1 of 300 is a visible sliver, not an empty bar). A value of 0 draws no fill.
  *
  * 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
@@ -1786,6 +1787,7 @@ export declare class ProgressBarComponent {
   readonly tooltip: import("@angular/core").InputSignal<string>;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   protected readonly clampedValue: import("@angular/core").Signal<number>;
+  /** Fill width in %: the rounded share, but never less than MIN_VISIBLE_PERCENT while the value is above 0 (1 of 300 would round to 0% and look empty). */
   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>;
@@ -1823,99 +1825,6 @@ 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`.
- *
- *   <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;
-    };
-    "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>;
-}
 export declare class SkeletonComponent {
   readonly height: import("@angular/core").InputSignal<number>;
   readonly width: import("@angular/core").InputSignal<string>;
@@ -2150,6 +2059,10 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
 }
 export declare class ButtonComponent {
   readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "danger" | "warning" | "link" | "ghost" | "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'`. */
+  readonly routerLink: import("@angular/core").InputSignal<string | readonly unknown[] | null>;
+  /** Query params of the `routerLink` (e.g. `{ section: 'deal-defaults' }`). */
+  readonly queryParams: import("@angular/core").InputSignal<Record<string, unknown> | null>;
   readonly color: import("@angular/core").InputSignal<string | undefined>;
   readonly active: import("@angular/core").InputSignal<boolean>;
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "xs" | "lg">;
@@ -2171,6 +2084,16 @@ export declare class ButtonComponent {
       "required": false;
       "isSignal": true;
     };
+    "routerLink": {
+      "alias": "routerLink";
+      "required": false;
+      "isSignal": true;
+    };
+    "queryParams": {
+      "alias": "queryParams";
+      "required": false;
+      "isSignal": true;
+    };
     "color": {
       "alias": "color";
       "required": false;
@@ -5632,6 +5555,8 @@ export declare class DateRangePickerComponent {
   readonly activePreset: import("@angular/core").InputSignal<DatePreset>;
   readonly showPresets: import("@angular/core").InputSignal<boolean>;
   readonly includeAllTime: import("@angular/core").InputSignal<boolean>;
+  /** 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. */
   protected readonly selectedPreset: import("@angular/core").WritableSignal<DatePreset>;
@@ -5657,6 +5582,11 @@ export declare class DateRangePickerComponent {
       "required": false;
       "isSignal": true;
     };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "rangeChange": "rangeChange";
   }, never, never, true, never>;