@forgeroute/ui 0.4.2 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
@@ -45,6 +45,14 @@
       "types": "./types/forgeroute-ui-charts.d.ts",
       "default": "./fesm2022/forgeroute-ui-charts.mjs"
     },
+    "./maps": {
+      "types": "./types/forgeroute-ui-maps.d.ts",
+      "default": "./fesm2022/forgeroute-ui-maps.mjs"
+    },
+    "./messaging": {
+      "types": "./types/forgeroute-ui-messaging.d.ts",
+      "default": "./fesm2022/forgeroute-ui-messaging.mjs"
+    },
     "./pdf": {
       "types": "./types/forgeroute-ui-pdf.d.ts",
       "default": "./fesm2022/forgeroute-ui-pdf.mjs"

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

@@ -0,0 +1,162 @@
+import * as i0 from "@angular/core";
+interface StateView {
+  id: string;
+  name: string;
+  path: string;
+  value: number;
+  /** "12 pickups" (or just "12"). */
+  valueText: string;
+  /** "Texas, 12 pickups": the accessible name, the tooltip text and the hidden-list entry. */
+  label: string;
+  fill: string;
+}
+/**
+ * US choropleth map: the 50 states plus Washington, DC, each coloured from `colorLow` (value 0) to `colorHigh` (the largest
+ * value) by its number in `data`.
+ *
+ * Interaction and accessibility
+ * - Every state is a button (`role="button"`, name "Texas, 12 pickups", `aria-pressed` for the selected one). The group has a
+ *   single tab stop (roving tabindex: last focused state, else the selected one, else Alabama); arrow keys,
+ *   Home and End move between states in alphabetical order, Enter / Space emit `stateClick` with the abbreviation.
+ * - The tooltip (state name + value) shows on hover AND on keyboard focus; it is real text, `aria-hidden` because the
+ *   state's accessible name already says the same. Colour is never the only signal: values are in names, tooltip and the
+ *   visually hidden list of all states.
+ * - A selected state gets an orange outline and the others are dimmed; the focus ring is drawn as an overlay outline
+ *   (works the same in Chrome, Edge, Firefox and Safari) and only for keyboard focus.
+ * - `prefers-reduced-motion` turns the transitions off. Strokes use `vector-effect: non-scaling-stroke`, so outlines keep
+ *   their pixel width when `focusState` zooms in.
+ *
+ * Known limitation: the very small states (CT, DC, DE, HI, MA, MD, NH, NJ, RI, VT) are tiny touch targets on a phone. They
+ * are reachable by keyboard and screen reader like any other; set `showSmallStateButtons` for a row of 44px buttons for them.
+ * Territories are not on the map.
+ */
+export declare class UsStateMapComponent {
+  /** State abbreviation -> value. Keys are case-insensitive; unknown keys are ignored; numbers and numeric strings (`'5'`) are read as numbers, anything else (negative, NaN, Infinity, text, booleans, null) counts as 0; repeated keys (`tx` and `TX`) are added up. */
+  readonly data: import("@angular/core").InputSignal<Record<string, number>>;
+  /** Abbreviation of the selected state (orange outline, the others are dimmed). Unknown / null = none. */
+  readonly selectedState: import("@angular/core").InputSignal<string | null>;
+  /** Abbreviation of a state to zoom the map to (bounding box plus 15% padding). Unknown / null = the whole map. */
+  readonly focusState: import("@angular/core").InputSignal<string | null>;
+  /** Unit for one, e.g. "pickup": "Texas, 1 pickup". Empty = just the number. */
+  readonly unitSingular: import("@angular/core").InputSignal<string>;
+  /** Unit for other counts, e.g. "pickups". Empty = the singular text is used for every count. */
+  readonly unitPlural: import("@angular/core").InputSignal<string>;
+  /** Colour of a value of 0 (CSS hex or rgb()). Invalid values fall back to #e5e7eb. */
+  readonly colorLow: import("@angular/core").InputSignal<string>;
+  /** Colour of the largest value (CSS hex or rgb()). Invalid values fall back to #1e40af. */
+  readonly colorHigh: import("@angular/core").InputSignal<string>;
+  /** Shows the colour scale (0 to the largest value). */
+  readonly showLegend: import("@angular/core").InputSignal<boolean>;
+  /** Shows a row of buttons for the very small states (touch friendly, 44px). Off by default. */
+  readonly showSmallStateButtons: import("@angular/core").InputSignal<boolean>;
+  /** Accessible name of the whole map. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** CSS maximum width of the map (it always shrinks to its container). */
+  readonly maxWidth: import("@angular/core").InputSignal<string>;
+  /** Optional CSS height of the map, e.g. "420px". Empty = follows the width (aspect ratio of the map). */
+  readonly height: import("@angular/core").InputSignal<string>;
+  /** Emits the state's abbreviation (upper case) on click, tap, Enter or Space. */
+  readonly stateClick: import("@angular/core").OutputEmitterRef<string>;
+  private readonly host;
+  /** True between a pointer press and the click that follows: a mouse / touch focus must not draw the keyboard ring. */
+  protected pointerDown: boolean;
+  private readonly hoveredId;
+  private readonly focusedId;
+  private readonly lastFocusedId;
+  private readonly ringVisible;
+  protected readonly tipPos: import("@angular/core").WritableSignal<{
+    x: number;
+    y: number;
+  } | null>;
+  private readonly low;
+  private readonly high;
+  private readonly values;
+  private readonly max;
+  private unit;
+  private valueText;
+  protected readonly views: import("@angular/core").Signal<StateView[]>;
+  protected readonly smallViews: import("@angular/core").Signal<StateView[]>;
+  protected readonly selectedId: import("@angular/core").Signal<string | null>;
+  protected readonly selectedView: import("@angular/core").Signal<StateView | null>;
+  protected readonly focusRingView: import("@angular/core").Signal<StateView | null>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  /** The one state in the tab order: last focused, else selected, else the first. */
+  protected readonly tabStop: import("@angular/core").Signal<string>;
+  protected readonly tip: import("@angular/core").Signal<StateView | null>;
+  protected readonly gradient: import("@angular/core").Signal<string>;
+  protected readonly maxText: import("@angular/core").Signal<string>;
+  protected readonly legendLabel: import("@angular/core").Signal<string>;
+  protected opacityOf(id: string): string | null;
+  protected onHover(ev: PointerEvent, id: string): void;
+  protected onLeave(id: string): void;
+  protected clearHover(): void;
+  protected onClick(id: string): void;
+  protected onFocus(id: string): void;
+  protected onBlur(id: string): void;
+  protected onKey(ev: KeyboardEvent, id: string): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UsStateMapComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UsStateMapComponent, "ui-us-state-map", never, {
+    "data": {
+      "alias": "data";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectedState": {
+      "alias": "selectedState";
+      "required": false;
+      "isSignal": true;
+    };
+    "focusState": {
+      "alias": "focusState";
+      "required": false;
+      "isSignal": true;
+    };
+    "unitSingular": {
+      "alias": "unitSingular";
+      "required": false;
+      "isSignal": true;
+    };
+    "unitPlural": {
+      "alias": "unitPlural";
+      "required": false;
+      "isSignal": true;
+    };
+    "colorLow": {
+      "alias": "colorLow";
+      "required": false;
+      "isSignal": true;
+    };
+    "colorHigh": {
+      "alias": "colorHigh";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "showSmallStateButtons": {
+      "alias": "showSmallStateButtons";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxWidth": {
+      "alias": "maxWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "stateClick": "stateClick";
+  }, never, never, true, never>;
+}