@eagami/ui 5.68.0 → 5.69.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.68.0",
+  "version": "5.69.0",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/types/eagami-ui.d.ts

@@ -74,6 +74,14 @@ export interface EagamiMessages {
     point: (series: string, label: string, value: string) => string;
     /** Announces the highlighted slice of a pie chart. */
     slice: (label: string, value: string, percent: string) => string;
+    /** Caption beneath the total in a donut's hole. */
+    total: string;
+    /** Default accessible name of a sparkline. */
+    trend: string;
+    /** Describes a sparkline by its first, last, lowest, and highest values. */
+    trendSummary: (first: string, last: string, low: string, high: string) => string;
+    /** Reads out a reference line; `label` is empty when the line has none. */
+    referenceLine: (label: string, value: string) => string;
   };
   codeInput: {
     groupLabel: (length: number) => string;
@@ -1403,6 +1411,16 @@ interface ChartPointEvent {
   label: string;
   value: number;
 }
+/** A dashed rule across a line or bar chart's plot at a value, such as a target or an average. */
+interface ChartReferenceLine {
+  value: number;
+  /** Text printed at the line's end and read out with the chart's data. */
+  label?: string;
+  /** Any CSS color; defaults to the strong border color. */
+  color?: string;
+}
+/** How a line bends between points. */
+type ChartCurve = 'linear' | 'smooth' | 'step';
 /** Number of categorical colors in the `--color-chart-*` palette. */
 declare const CHART_COLOR_COUNT = 8;
 /** Resolves a series' color, falling back to its slot of the chart palette. */
@@ -1418,9 +1436,18 @@ interface NiceScale {
  * where a gap would otherwise exceed `maxStep`.
  */
 declare function niceScale(min: number, max: number, maxTicks?: number, maxStep?: number): NiceScale;
+/** A plotted point in pixels. */
+interface CurvePoint {
+  x: number;
+  y: number;
+}
+/** SVG path data tracing a run of points with each curve. */
+declare const CHART_CURVES: Record<ChartCurve, (points: CurvePoint[]) => string>;
+/** Reference lines with a finite value, the only ones a chart can place. */
+declare function plottableReferenceLines(lines: readonly ChartReferenceLine[]): ChartReferenceLine[];
 /** Rough rendered width of `text` in px, for reserving axis room without a layout pass. */
 declare function estimateTextWidth(text: string, fontPx: number): number;
-/** Live size of a chart's host, re-measured on resize and whenever `size` changes. */
+/** Live size of a chart's host, re-measured on resize and whenever `remeasureOn` changes. */
 interface ChartViewport {
   width: Signal<number>;
   fontSize: Signal<number>;
@@ -1429,7 +1456,7 @@ interface ChartViewport {
  * Measures the host's width and font-size so the chart can lay out its SVG in
  * real pixels, keeping text and stroke widths crisp at every width.
  */
-declare function injectChartViewport(size: Signal<ChartSize>): ChartViewport;
+declare function injectChartViewport(remeasureOn: Signal<unknown>): ChartViewport;
 /** Localized value formatter honouring a consumer's own `formatValue`. */
 declare function injectChartFormatter(formatValue: Signal<((value: number) => string) | null>): Signal<(value: number) => string>;
 /** Keeps a value inside `[min, max]`. */
@@ -1473,7 +1500,7 @@ export type BarChartOrientation = 'vertical' | 'horizontal';
  * another, and `fade` fades the bars in.
  */
 export type BarChartAnimation = 'grow' | 'cascade' | 'fade' | 'none';
-interface PlotBar {
+interface PlotBar$1 {
   series: number;
   index: number;
   value: number;
@@ -1521,6 +1548,11 @@ export declare class BarChartComponent {
    * zero, when every value is positive, and marks the cut with a break symbol.
    */
   readonly showAxisBreak: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Dashed rules across the plot at set values, such as a target or an
+   * average. The value axis widens to take them in.
+   */
+  readonly referenceLines: import("@angular/core").InputSignal<readonly ChartReferenceLine[]>;
   /** Height of the plot in pixels; the width fills the container. */
   readonly height: import("@angular/core").InputSignal<number>;
   /** Visual size; scales the axis, legend, and tooltip text and the bar thickness cap. */
@@ -1543,6 +1575,7 @@ export declare class BarChartComponent {
   protected readonly label: import("@angular/core").Signal<string>;
   protected readonly count: import("@angular/core").Signal<number>;
   protected readonly hasData: import("@angular/core").Signal<boolean>;
+  protected readonly references: import("@angular/core").Signal<ChartReferenceLine[]>;
   protected readonly renderPass: import("@angular/core").Signal<{}[]>;
   protected readonly hostClasses: import("@angular/core").Signal<{
     [x: string]: boolean;
@@ -1571,8 +1604,18 @@ export declare class BarChartComponent {
       index: number;
       pos: number;
     }[];
-    bars: PlotBar[];
+    bars: PlotBar$1[];
     valueLabels: PlotValueLabel[];
+    referenceLines: {
+      labelX: number;
+      labelY: number;
+      anchor: "start" | "end";
+      key: number;
+      pos: number;
+      value: number;
+      label?: string;
+      color?: string;
+    }[];
     valuePos: (v: number) => number;
     axisY: number;
     tickEndY: number;
@@ -1607,7 +1650,8 @@ export declare class BarChartComponent {
   protected readonly announcement: import("@angular/core").Signal<string>;
   protected readonly showsLegend: import("@angular/core").Signal<boolean>;
   protected seriesColor(index: number): string;
-  protected isDimmed(bar: PlotBar): boolean;
+  protected isDimmed(bar: PlotBar$1): boolean;
+  protected referenceText(line: ChartReferenceLine): string;
   protected tableValue(value: number | null | undefined): string;
   protected onPointerMove(event: PointerEvent): void;
   protected onPointerLeave(): void;
@@ -1667,6 +1711,11 @@ export declare class BarChartComponent {
       "required": false;
       "isSignal": true;
     };
+    "referenceLines": {
+      "alias": "referenceLines";
+      "required": false;
+      "isSignal": true;
+    };
     "height": {
       "alias": "height";
       "required": false;
@@ -5410,7 +5459,7 @@ export declare class InputComponent implements ControlValueAccessor {
   }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
 }
 /** How the line bends between points. */
-export type LineChartCurve = 'linear' | 'smooth' | 'step';
+export type LineChartCurve = ChartCurve;
 /**
  * Entrance animation, replayed whenever the data changes. `draw` traces each
  * line along its length, `reveal` wipes every line in together from left to
@@ -5500,7 +5549,7 @@ export declare class LineChartComponent {
    */
   readonly visibleXSpan: import("@angular/core").InputSignal<number | null>;
   /** How the line bends between points. */
-  readonly curve: import("@angular/core").InputSignal<LineChartCurve>;
+  readonly curve: import("@angular/core").InputSignal<ChartCurve>;
   /** Fills the area beneath each line with a light wash of its color. */
   readonly showArea: import("@angular/core").InputSignal<boolean>;
   /** Marks every value with a point. */
@@ -5515,6 +5564,12 @@ export declare class LineChartComponent {
   readonly yMax: import("@angular/core").InputSignal<number | undefined>;
   /** Largest gap between y-axis ticks; a wider range gets more ticks instead of wider gaps. */
   readonly maxYStep: import("@angular/core").InputSignal<number | undefined>;
+  /**
+   * Dashed rules across the plot at set values, such as a target or an
+   * average. The y-axis widens to take them in, unless `yMin` or `yMax` cuts
+   * them off.
+   */
+  readonly referenceLines: import("@angular/core").InputSignal<readonly ChartReferenceLine[]>;
   /** How the x-axis labels are set; `auto` turns them as they run out of room. */
   readonly xLabelOrientation: import("@angular/core").InputSignal<ChartLabelOrientation>;
   /** Marks the foot of a y-axis that stops short of zero with a break symbol. */
@@ -5556,6 +5611,7 @@ export declare class LineChartComponent {
   private readonly positions;
   protected readonly domain: import("@angular/core").Signal<XDomain>;
   protected readonly windowed: import("@angular/core").Signal<boolean>;
+  protected readonly references: import("@angular/core").Signal<ChartReferenceLine[]>;
   protected readonly renderPass: import("@angular/core").Signal<{}[]>;
   protected readonly hostClasses: import("@angular/core").Signal<{
     [x: string]: boolean;
@@ -5564,6 +5620,7 @@ export declare class LineChartComponent {
   }>;
   private readonly runs;
   private readonly visibleValues;
+  private withReferences;
   protected readonly layout: import("@angular/core").Signal<{
     width: number;
     height: number;
@@ -5586,6 +5643,14 @@ export declare class LineChartComponent {
     }[];
     xLabels: PlacedXLabel[];
     series: PlotSeries[];
+    references: {
+      labelY: number;
+      key: number;
+      y: number;
+      value: number;
+      label?: string;
+      color?: string;
+    }[];
     x: (i: number) => number;
     y: (v: number) => number;
   }>;
@@ -5620,6 +5685,7 @@ export declare class LineChartComponent {
   protected seriesColor(index: number): string;
   protected isDimmed(index: number): boolean;
   protected isActivePoint(seriesIndex: number, index: number): boolean;
+  protected referenceText(line: ChartReferenceLine): string;
   protected tableValue(value: number | null | undefined): string;
   protected onPointerDown(event: PointerEvent): void;
   protected onPointerMove(event: PointerEvent): void;
@@ -5722,6 +5788,11 @@ export declare class LineChartComponent {
       "required": false;
       "isSignal": true;
     };
+    "referenceLines": {
+      "alias": "referenceLines";
+      "required": false;
+      "isSignal": true;
+    };
     "xLabelOrientation": {
       "alias": "xLabelOrientation";
       "required": false;
@@ -6525,6 +6596,10 @@ export declare class PieChartComponent {
   readonly showLegend: import("@angular/core").InputSignal<boolean>;
   /** Adds each slice's share of the total to its legend entry. */
   readonly showPercentages: import("@angular/core").InputSignal<boolean>;
+  /** Prints the total of every slice in the middle of a donut. */
+  readonly showTotal: import("@angular/core").InputSignal<boolean>;
+  /** Caption beneath a donut's total; defaults to a localized "Total". */
+  readonly totalLabel: import("@angular/core").InputSignal<string | undefined>;
   /** Largest diameter of the chart in pixels; it shrinks to fit a narrower container. */
   readonly height: import("@angular/core").InputSignal<number>;
   /** Visual size; scales the legend and tooltip text. */
@@ -6559,6 +6634,12 @@ export declare class PieChartComponent {
     inner: number;
     slices: PlotSlice[];
   }>;
+  protected readonly center: import("@angular/core").Signal<{
+    value: string;
+    caption: string;
+    room: number;
+    valuePx: number;
+  } | null>;
   protected readonly legend: import("@angular/core").Signal<{
     label: string;
     color: string;
@@ -6583,6 +6664,7 @@ export declare class PieChartComponent {
   protected readonly announcement: import("@angular/core").Signal<string>;
   protected tableValue(slice: PieChartSlice): string;
   protected tablePercent(index: number): string;
+  protected totalPercent(): string;
   protected isDimmed(index: number): boolean;
   protected offset(slice: PlotSlice): string | null;
   protected onPointerMove(event: PointerEvent): void;
@@ -6618,6 +6700,16 @@ export declare class PieChartComponent {
       "required": false;
       "isSignal": true;
     };
+    "showTotal": {
+      "alias": "showTotal";
+      "required": false;
+      "isSignal": true;
+    };
+    "totalLabel": {
+      "alias": "totalLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "height": {
       "alias": "height";
       "required": false;
@@ -7682,6 +7774,183 @@ export declare class SliderComponent implements ControlValueAccessor {
     "changed": "changed";
   }, never, never, true, never>;
 }
+/** How a sparkline draws its values. */
+export type SparklineVariant = 'line' | 'area' | 'bar';
+/**
+ * Values a sparkline singles out: `last` the latest one, `extremes` the
+ * highest and lowest as well, and `all` every value. A line or area marks them
+ * with a dot; bars dim every other bar.
+ */
+export type SparklineMarkers = 'none' | 'last' | 'extremes' | 'all';
+/**
+ * Entrance animation, replayed whenever the data changes. `draw` traces the
+ * line or grows the bars, and `fade` fades the sparkline in.
+ */
+export type SparklineAnimation = 'draw' | 'fade' | 'none';
+interface PlotBar {
+  index: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+interface PlotPosition {
+  index: number;
+  x: number;
+  y: number;
+}
+/**
+ * A small, axis-free trend of one run of values, as a line, an area, or bars,
+ * sized to sit in a stat tile, a table cell, or a line of text. It is a single
+ * image to assistive technology, named by `aria-label` and described by its
+ * first, last, lowest, and highest values.
+ */
+export declare class SparklineComponent {
+  protected readonly i18n: EagamiI18nService;
+  /** The values to plot, oldest first; `null` leaves a gap. */
+  readonly data: import("@angular/core").InputSignal<(number | null)[]>;
+  /** Draws the values as a line, a line over a filled area, or bars. */
+  readonly variant: import("@angular/core").InputSignal<SparklineVariant>;
+  /** How a line or area bends between values. */
+  readonly curve: import("@angular/core").InputSignal<ChartCurve>;
+  /** Values singled out with a dot, or on bars by dimming the rest. */
+  readonly markers: import("@angular/core").InputSignal<SparklineMarkers>;
+  /** Any CSS color; defaults to the first color of the chart palette. */
+  readonly color: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Starts the scale of a line or area at zero, so its height shows the true
+   * size of each value rather than a close-up of how they vary. Bars always
+   * start at zero.
+   */
+  readonly startAtZero: import("@angular/core").InputSignal<boolean>;
+  /** Shows the value under the pointer in a tooltip, on hover or while a finger slides along. */
+  readonly showTooltip: import("@angular/core").InputSignal<boolean>;
+  /** Height in pixels; the width fills the container. */
+  readonly height: import("@angular/core").InputSignal<number>;
+  /** Entrance animation, replayed whenever the data changes. */
+  readonly animation: import("@angular/core").InputSignal<SparklineAnimation>;
+  /** Length of the entrance animation in milliseconds. */
+  readonly animationDuration: import("@angular/core").InputSignal<number>;
+  /** Formats the values in the tooltip and those read out to assistive technology; locale-grouped by default. */
+  readonly formatValue: import("@angular/core").InputSignal<((value: number) => string) | null>;
+  /** Accessible name for the sparkline; defaults to a localized "Trend". */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  private readonly viewport;
+  private readonly format;
+  protected readonly summaryId: string;
+  protected readonly active: import("@angular/core").WritableSignal<number | null>;
+  protected readonly label: import("@angular/core").Signal<string>;
+  private readonly values;
+  private readonly known;
+  protected readonly hasData: import("@angular/core").Signal<boolean>;
+  protected readonly renderPass: import("@angular/core").Signal<{}[]>;
+  protected readonly hostClasses: import("@angular/core").Signal<{
+    [x: string]: boolean;
+    'ea-sparkline--interactive': boolean;
+  }>;
+  protected readonly stroke: import("@angular/core").Signal<string>;
+  private readonly marked;
+  protected readonly layout: import("@angular/core").Signal<{
+    width: number;
+    height: number;
+    baseline: number;
+    bars: PlotBar[];
+    paths: never[];
+    areas: never[];
+    markers: never[];
+    positions: PlotPosition[];
+  } | {
+    width: number;
+    height: number;
+    baseline: number;
+    bars: never[];
+    paths: string[];
+    areas: string[];
+    markers: {
+      r: number;
+      x: number;
+      y: number;
+    }[];
+    positions: PlotPosition[];
+  }>;
+  protected readonly activePosition: import("@angular/core").Signal<PlotPosition | null>;
+  protected readonly activeRadius = 4.5;
+  protected readonly tooltips: import("@angular/core").Signal<{
+    key: number;
+    text: string;
+    index: number;
+    x: number;
+    y: number;
+  }[]>;
+  protected isDimmed(bar: PlotBar): boolean;
+  protected onPointer(event: PointerEvent): void;
+  protected onPointerUp(event: PointerEvent): void;
+  protected clear(): void;
+  protected readonly summary: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<SparklineComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<SparklineComponent, "ea-sparkline", never, {
+    "data": {
+      "alias": "data";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "curve": {
+      "alias": "curve";
+      "required": false;
+      "isSignal": true;
+    };
+    "markers": {
+      "alias": "markers";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "startAtZero": {
+      "alias": "startAtZero";
+      "required": false;
+      "isSignal": true;
+    };
+    "showTooltip": {
+      "alias": "showTooltip";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "animation": {
+      "alias": "animation";
+      "required": false;
+      "isSignal": true;
+    };
+    "animationDuration": {
+      "alias": "animationDuration";
+      "required": false;
+      "isSignal": true;
+    };
+    "formatValue": {
+      "alias": "formatValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "aria-label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /** Visual size of the spinner. */
 export type SpinnerSize = EaSize;
 /**
@@ -13565,4 +13834,4 @@ export declare class ZoomOutIconComponent extends IconComponentBase {
   static ɵfac: i0.ɵɵFactoryDeclaration<ZoomOutIconComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ZoomOutIconComponent, "ea-icon-zoom-out", never, {}, {}, never, never, true, never>;
 }
-export type { ChartLabelOrientation, ChartPointEvent, ChartSeries, ChartSize, EaErrorMessages, EaValidationErrorKey };
+export type { ChartCurve, ChartLabelOrientation, ChartPointEvent, ChartReferenceLine, ChartSeries, ChartSize, EaErrorMessages, EaValidationErrorKey };