@forgeroute/ui 0.3.12 → 0.3.13

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -1971,6 +1971,107 @@ export declare class ProgressBarComponent {
     };
   }, {}, never, never, true, never>;
 }
+export type ProgressRingVariant = 'blue' | 'green' | 'amber' | 'red' | 'slate' | 'sky';
+/**
+ * Circular progress ring with the rounded percentage (or a custom `label`) in the middle.
+ * Pass `value` and `max` (default 100); the arc is clamped to 0–100% and starts at 12 o'clock. A value of 0 draws no arc; invalid numbers
+ * (NaN, a negative or infinite max) draw an empty ring.
+ *
+ * The arc color follows completion exactly like `ui-progress-bar` (red up to 25%, amber up to 50%, blue up to 75%, green above 75%);
+ * `variant` fixes it for a ring whose color means something else (e.g. one ring per metric). The ring is a `role="progressbar"`
+ * (name it with `ariaLabel` or `ariaLabelledby`; `valueText` adds a human reading such as "$200K of $300K"). The arc animates unless
+ * `prefers-reduced-motion` is set and stays visible in forced-colors mode.
+ *
+ *   <ui-progress-ring [value]="67" ariaLabel="Gross income progress" variant="green" />
+ *   <ui-progress-ring [value]="done" [max]="total" [size]="72" [strokeWidth]="6" [label]="done + '/' + total" ariaLabel="Checklist" />
+ */
+export declare class ProgressRingComponent {
+  /** Completed amount. */
+  readonly value: import("@angular/core").InputSignal<number>;
+  /** Total amount (default 100, so `value` is a percentage); 0 renders an empty ring. */
+  readonly max: import("@angular/core").InputSignal<number>;
+  /** Diameter in px. */
+  readonly size: import("@angular/core").InputSignal<number>;
+  /** Ring thickness in px. */
+  readonly strokeWidth: import("@angular/core").InputSignal<number>;
+  /** Optional fixed arc color. Leave it out and the color follows completion (red / amber / blue / green). */
+  readonly variant: import("@angular/core").InputSignal<ProgressRingVariant | null | undefined>;
+  /** Text in the middle instead of the rounded percentage, e.g. "3/5". */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** `false` draws the ring without any text in the middle. */
+  readonly showValue: import("@angular/core").InputSignal<boolean>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Id of an element that names the ring (wins over `ariaLabel`). */
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
+  /** Human text for `aria-valuetext`, e.g. "$200K of $300K". Empty = not set. */
+  readonly valueText: import("@angular/core").InputSignal<string>;
+  /** `max` made safe: NaN / negative / infinite become 0 (empty ring, no division by zero). */
+  protected readonly safeMax: import("@angular/core").Signal<number>;
+  protected readonly clampedValue: import("@angular/core").Signal<number>;
+  /** Exact completion in % (0–100). */
+  private readonly exact;
+  /** Rounded completion in %, shown in the middle. */
+  protected readonly percent: import("@angular/core").Signal<number>;
+  protected readonly center: import("@angular/core").Signal<number>;
+  protected readonly radius: import("@angular/core").Signal<number>;
+  protected readonly circumference: import("@angular/core").Signal<number>;
+  protected readonly dashOffset: 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<ProgressRingVariant>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ProgressRingComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ProgressRingComponent, "ui-progress-ring", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "strokeWidth": {
+      "alias": "strokeWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "showValue": {
+      "alias": "showValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueText": {
+      "alias": "valueText";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /**
  * 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
@@ -8157,6 +8258,9 @@ export type KpiCardValueColor = 'default' | 'green' | 'blue';
  * role="button", focusable (tabindex 0, visible focus ring), and Enter / Space fire the host's (click). Give it an
  * accessible name with [attr.aria-label] when the label alone isn't enough (e.g. "Net Commission: $12.5K — show details").
  *
+ *   Optional ring: `[progress]="67"` (+ `progressMax`, `progressVariant`, `progressSize`) draws a ui-progress-ring beside the label; extra lines
+ *   (a pace badge, a projection…) go in an element with the `kpi-footer` attribute.
+ *
  *   <ui-kpi-card label="Deals Closed" [value]="'' + deals" subtitle="Year to Date" icon="check-circle" color="blue" />
  *   <ui-kpi-card label="Net Commission" [value]="net" icon="dollar" color="green" [highlight]="true"
  *                [clickable]="true" (click)="openDetails()" />
@@ -8173,6 +8277,20 @@ export declare class KpiCardComponent {
   readonly highlight: import("@angular/core").InputSignal<boolean>;
   readonly clickable: import("@angular/core").InputSignal<boolean>;
   readonly valueColor: import("@angular/core").InputSignal<KpiCardValueColor>;
+  /** Completed amount shown as a `ui-progress-ring` beside the label. `null` (default) = no ring. */
+  readonly progress: import("@angular/core").InputSignal<number | null>;
+  /** Total for `progress` (default 100, so `progress` is a percentage). */
+  readonly progressMax: import("@angular/core").InputSignal<number>;
+  /** Ring diameter in px. */
+  readonly progressSize: import("@angular/core").InputSignal<number>;
+  readonly progressStrokeWidth: import("@angular/core").InputSignal<number>;
+  /** Fixed ring color; leave it out and the color follows completion (red / amber / blue / green). */
+  readonly progressVariant: import("@angular/core").InputSignal<ProgressRingVariant | null | undefined>;
+  /** Accessible name of the ring; default "<label> progress". */
+  readonly progressAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Human reading of the ring for assistive tech, e.g. "$200K of $300K". */
+  readonly progressValueText: import("@angular/core").InputSignal<string>;
+  protected readonly hasProgress: import("@angular/core").Signal<boolean>;
   /** Enter / Space on a clickable card act like a click (Space would otherwise scroll the page). */
   protected onActivateKey(event: Event): void;
   protected readonly iconSvg: import("@angular/core").Signal<SafeHtml | null>;
@@ -8218,7 +8336,42 @@ export declare class KpiCardComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, never, true, never>;
+    "progress": {
+      "alias": "progress";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressMax": {
+      "alias": "progressMax";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressSize": {
+      "alias": "progressSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressStrokeWidth": {
+      "alias": "progressStrokeWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressVariant": {
+      "alias": "progressVariant";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressAriaLabel": {
+      "alias": "progressAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "progressValueText": {
+      "alias": "progressValueText";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[kpi-footer]"], true, never>;
 }
 export type DatePreset = 'today' | '7days' | '30days' | 'month' | 'quarter' | 'ytd' | 'all' | 'custom';
 export interface DateRange {