@eagami/ui 5.51.0 → 5.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.51.0",
+  "version": "5.53.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

@@ -621,10 +621,13 @@ export declare class AccordionItemComponent implements OnInit, OnDestroy {
   private readonly accordion;
   readonly value: import("@angular/core").InputSignal<string>;
   readonly label: import("@angular/core").InputSignal<string>;
+  /** Optional icon component rendered before the label in the header button. */
+  readonly icon: import("@angular/core").InputSignal<Type<unknown> | undefined>;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly id: import("@angular/core").InputSignal<string>;
   readonly isExpanded: import("@angular/core").Signal<boolean>;
   readonly headingLevel: import("@angular/core").Signal<import("@eagami/ui").AccordionHeadingLevel>;
+  readonly isHighlighted: import("@angular/core").Signal<boolean>;
   readonly size: import("@angular/core").Signal<import("@eagami/ui").EaSize>;
   ngOnInit(): void;
   ngOnDestroy(): void;
@@ -641,6 +644,11 @@ export declare class AccordionItemComponent implements OnInit, OnDestroy {
       "required": true;
       "isSignal": true;
     };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
     "disabled": {
       "alias": "disabled";
       "required": false;
@@ -668,6 +676,8 @@ export declare class AccordionComponent {
   readonly size: import("@angular/core").InputSignal<EaSize>;
   /** Heading level (1-6) applied to every item's header wrapper. */
   readonly headingLevel: import("@angular/core").InputSignal<AccordionHeadingLevel>;
+  /** Tints an open item's header and sets its label, icon, and chevron in the brand color. */
+  readonly highlightExpanded: import("@angular/core").InputSignal<boolean>;
   readonly expandedItems: import("@angular/core").WritableSignal<Set<string>>;
   readonly registeredItems: import("@angular/core").WritableSignal<AccordionItemComponent[]>;
   constructor();
@@ -692,6 +702,11 @@ export declare class AccordionComponent {
       "required": false;
       "isSignal": true;
     };
+    "highlightExpanded": {
+      "alias": "highlightExpanded";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*"], true, never>;
 }
 /** Semantic colour scheme of an alert. Drives icon and palette. */
@@ -1338,6 +1353,37 @@ declare function injectChartViewport(size: Signal<ChartSize>): ChartViewport;
 declare function injectChartFormatter(formatValue: Signal<((value: number) => string) | null>): Signal<(value: number) => string>;
 /** Keeps a value inside `[min, max]`. */
 declare function clamp(value: number, min: number, max: number): number;
+/**
+ * How category or x-axis labels are set: level, at 45 degrees, at 90 degrees, or
+ * `auto`, which stays level while the labels fit and turns them 45 then 90 degrees
+ * as they crowd.
+ */
+type ChartLabelOrientation = 'horizontal' | 'diagonal' | 'vertical' | 'auto';
+declare const CHART_LABEL_ANGLES: Record<Exclude<ChartLabelOrientation, 'auto'>, number>;
+declare const TICK_EXTRA_PX = 2;
+declare const TICK_LABEL_GAP_PX = 2;
+declare const BREAK_CLEARANCE = 6;
+declare const BREAK_HEIGHT = 2.5;
+/** Length of a tick mark below the axis. */
+declare function tickLength(axisPx: number): number;
+/** Room along the axis a label needs: its width when level, a line's height when turned. */
+declare function labelRoom(text: string, angle: number, axisPx: number): number;
+/** Space below the plot for the axis labels, turned to `angle` degrees, and their ticks. */
+declare function labelBand(widest: number, angle: number, axisPx: number, height: number): number;
+/** Baseline of the axis labels below an axis at `axisY`. */
+declare function labelLine(axisY: number, angle: number, axisPx: number): number;
+interface AxisBreak {
+  axis: string;
+  slashes: string;
+  gap: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+}
+/** A y-axis line up the plot's left edge, cut where two parallel slashes cross it. */
+declare function axisBreak(x: number, top: number, bottom: number, y: number, axisPx: number): AxisBreak;
 /** Direction the bars extend from the baseline. */
 export type BarChartOrientation = 'vertical' | 'horizontal';
 /**
@@ -1387,6 +1433,13 @@ export declare class BarChartComponent {
   readonly showLegend: import("@angular/core").InputSignal<boolean>;
   /** Prints each bar's value at its end, or each stack's total when stacked. */
   readonly showValues: import("@angular/core").InputSignal<boolean>;
+  /** How the category labels under a vertical chart are set; `auto` turns them as they run out of room. */
+  readonly xLabelOrientation: import("@angular/core").InputSignal<ChartLabelOrientation>;
+  /**
+   * Starts the value axis of a vertical chart near its shortest bar instead of at
+   * zero, when every value is positive, and marks the cut with a break symbol.
+   */
+  readonly showAxisBreak: import("@angular/core").InputSignal<boolean>;
   /** 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. */
@@ -1440,6 +1493,11 @@ export declare class BarChartComponent {
     bars: PlotBar[];
     valueLabels: PlotValueLabel[];
     valuePos: (v: number) => number;
+    axisY: number;
+    tickEndY: number;
+    labelAngle: number;
+    labelY: number;
+    axisBreak: AxisBreak | null;
   }>;
   protected readonly tooltip: import("@angular/core").Signal<{
     x: number;
@@ -1518,6 +1576,16 @@ export declare class BarChartComponent {
       "required": false;
       "isSignal": true;
     };
+    "xLabelOrientation": {
+      "alias": "xLabelOrientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "showAxisBreak": {
+      "alias": "showAxisBreak";
+      "required": false;
+      "isSignal": true;
+    };
     "height": {
       "alias": "height";
       "required": false;
@@ -4281,6 +4349,16 @@ export type LineChartCurve = 'linear' | 'smooth' | 'step';
  * right, `fade` fades the plot in, and `rise` grows it up from the baseline.
  */
 export type LineChartAnimation = 'draw' | 'reveal' | 'fade' | 'rise' | 'none';
+/** A labelled mark along the x-axis, placed on the same scale as `xValues`. */
+export interface LineChartTick {
+  value: number;
+  label: string;
+}
+/** The stretch of the x scale a windowed line chart currently shows. */
+export interface LineChartVisibleRange {
+  start: number;
+  end: number;
+}
 interface PlotPoint {
   x: number;
   y: number;
@@ -4298,18 +4376,61 @@ interface ActivePoint {
   series: number;
   index: number;
 }
+interface XLabel {
+  key: number;
+  text: string;
+  x: number;
+}
+interface PlacedXLabel extends XLabel {
+  textX: number;
+}
+interface XDomain {
+  /** First and last positions on the x scale. */
+  first: number;
+  last: number;
+  /** Positions at the plot's left and right edges. */
+  start: number;
+  end: number;
+  /** Width of the visible window, set only when the data outgrows it. */
+  span: number | null;
+}
 /**
- * Plots one or more series of values across shared labels as lines, with
- * optional points and area fills. Hovering or arrowing through the chart
- * reveals each label's values in a tooltip, and a visually hidden table
- * carries the full data for screen readers.
+ * Plots one or more series of values as lines, with optional points and area
+ * fills. Points are spaced evenly by default, or placed along a numeric scale
+ * by `xValues`, with the x-axis labelled per point or by `xTicks`. A
+ * `visibleXSpan` window makes a long run of data pannable. Hovering or
+ * arrowing through the chart reveals each point's values in a tooltip, and a
+ * visually hidden table carries the full data for screen readers.
  */
 export declare class LineChartComponent {
   protected readonly i18n: EagamiI18nService;
-  /** Category labels along the x-axis, one per value. */
+  /**
+   * Each point's name, one per value, titling its tooltip and its row in the
+   * data table. Also labels the x-axis, unless `xTicks` is set.
+   */
   readonly labels: import("@angular/core").InputSignal<string[]>;
   /** The series to plot. */
   readonly series: import("@angular/core").InputSignal<ChartSeries[]>;
+  /**
+   * Position of each point along the x-axis, one per value in ascending
+   * order, so points sit proportionally apart. Spaced evenly by index when
+   * unset.
+   */
+  readonly xValues: import("@angular/core").InputSignal<readonly number[] | null>;
+  /**
+   * Marks drawn along the x-axis in place of the per-point labels, each at its
+   * value on the x scale (`xValues`, or the index when unset). They need not
+   * line up with any point, and the axis widens to take in any beyond the points.
+   */
+  readonly xTicks: import("@angular/core").InputSignal<readonly LineChartTick[] | null>;
+  /**
+   * Width of the x range shown at once, in the units of `xValues` (or of
+   * indices when unset). When the data spans more, the chart opens on its
+   * latest stretch and pans by trackpad, Shift + wheel, drag, or the arrow
+   * keys, and a trackpad pinch or Ctrl + wheel widens or narrows the window,
+   * fitting the y-axis to the points in view. `null` shows everything.
+   */
+  readonly visibleXSpan: import("@angular/core").InputSignal<number | null>;
   /** How the line bends between points. */
   readonly curve: import("@angular/core").InputSignal<LineChartCurve>;
   /** Fills the area beneath each line with a light wash of its color. */
@@ -4324,6 +4445,10 @@ export declare class LineChartComponent {
   readonly yMin: import("@angular/core").InputSignal<number | undefined>;
   /** Upper bound of the y-axis; derived from the data when unset. */
   readonly yMax: import("@angular/core").InputSignal<number | undefined>;
+  /** 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. */
+  readonly showAxisBreak: import("@angular/core").InputSignal<boolean>;
   /** 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. */
@@ -4340,16 +4465,33 @@ export declare class LineChartComponent {
   readonly pointClick: import("@angular/core").OutputEmitterRef<ChartPointEvent>;
   /** Fires when the highlighted point changes by pointer or keyboard, with `null` once cleared. */
   readonly activePointChange: import("@angular/core").OutputEmitterRef<ChartPointEvent | null>;
+  /** Fires with the newly visible x range whenever a windowed chart pans or zooms. */
+  readonly visibleRangeChange: import("@angular/core").OutputEmitterRef<LineChartVisibleRange>;
   private readonly viewport;
   private readonly format;
   protected readonly active: import("@angular/core").WritableSignal<ActivePoint | null>;
+  protected readonly clipId: string;
+  protected readonly breakMaskId: string;
+  private readonly panEnd;
+  private readonly zoomSpan;
+  private gestureSpan;
+  protected readonly panning: import("@angular/core").WritableSignal<boolean>;
+  private drag;
+  private suppressClick;
   protected readonly label: import("@angular/core").Signal<string>;
   protected readonly count: import("@angular/core").Signal<number>;
   protected readonly hasData: import("@angular/core").Signal<boolean>;
+  private readonly positions;
+  protected readonly domain: import("@angular/core").Signal<XDomain>;
+  protected readonly windowed: import("@angular/core").Signal<boolean>;
   protected readonly renderPass: import("@angular/core").Signal<{}[]>;
   protected readonly hostClasses: import("@angular/core").Signal<{
     [x: string]: boolean;
+    'ea-line-chart--pannable': boolean;
+    'ea-line-chart--panning': boolean;
   }>;
+  private readonly runs;
+  private readonly visibleValues;
   protected readonly layout: import("@angular/core").Signal<{
     width: number;
     height: number;
@@ -4358,6 +4500,11 @@ export declare class LineChartComponent {
     plotWidth: number;
     plotHeight: number;
     baselineY: number;
+    windowed: boolean;
+    axisBreak: AxisBreak | null;
+    axisY: number;
+    tickEndY: number;
+    labelAngle: number;
     labelY: number;
     tickX: number;
     ticks: {
@@ -4365,15 +4512,12 @@ export declare class LineChartComponent {
       value: number;
       text: string;
     }[];
-    xLabels: {
-      text: string;
-      index: number;
-      x: number;
-    }[];
+    xLabels: PlacedXLabel[];
     series: PlotSeries[];
     x: (i: number) => number;
     y: (v: number) => number;
   }>;
+  private plotArea;
   protected readonly tooltip: import("@angular/core").Signal<{
     x: number;
     y: number;
@@ -4404,12 +4548,32 @@ export declare class LineChartComponent {
   protected isDimmed(index: number): boolean;
   protected isActivePoint(seriesIndex: number, index: number): boolean;
   protected tableValue(value: number | null | undefined): string;
+  protected onPointerDown(event: PointerEvent): void;
   protected onPointerMove(event: PointerEvent): void;
+  protected onPointerUp(event: PointerEvent): void;
   protected onPointerLeave(): void;
+  protected onWheel(event: WheelEvent): void;
   protected onClick(): void;
   protected onFocus(): void;
   protected onBlur(): void;
   protected onKeydown(event: KeyboardEvent): void;
+  private isValue;
+  private yScale;
+  private atPosition;
+  private xLabelCandidates;
+  private labelsFit;
+  private xLabels;
+  private widestXLabel;
+  protected onGestureStart(event: Event): void;
+  protected onGestureChange(event: Event): void;
+  protected onGestureEnd(): void;
+  private zoomTo;
+  private minSpan;
+  private unitsPerPx;
+  private panTo;
+  private endDrag;
+  private reveal;
+  private indexAt;
   private valueAt;
   private firstPoint;
   private nearestValid;
@@ -4427,6 +4591,21 @@ export declare class LineChartComponent {
       "required": false;
       "isSignal": true;
     };
+    "xValues": {
+      "alias": "xValues";
+      "required": false;
+      "isSignal": true;
+    };
+    "xTicks": {
+      "alias": "xTicks";
+      "required": false;
+      "isSignal": true;
+    };
+    "visibleXSpan": {
+      "alias": "visibleXSpan";
+      "required": false;
+      "isSignal": true;
+    };
     "curve": {
       "alias": "curve";
       "required": false;
@@ -4462,6 +4641,16 @@ export declare class LineChartComponent {
       "required": false;
       "isSignal": true;
     };
+    "xLabelOrientation": {
+      "alias": "xLabelOrientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "showAxisBreak": {
+      "alias": "showAxisBreak";
+      "required": false;
+      "isSignal": true;
+    };
     "height": {
       "alias": "height";
       "required": false;
@@ -4495,6 +4684,7 @@ export declare class LineChartComponent {
   }, {
     "pointClick": "pointClick";
     "activePointChange": "activePointChange";
+    "visibleRangeChange": "visibleRangeChange";
   }, never, never, true, never>;
 }
 /** Placement of the menu list relative to its trigger. */
@@ -12058,4 +12248,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 { ChartPointEvent, ChartSeries, ChartSize, EaErrorMessages, EaValidationErrorKey };
+export type { ChartLabelOrientation, ChartPointEvent, ChartSeries, ChartSize, EaErrorMessages, EaValidationErrorKey };