@tolle_/tolle-ui 18.3.0 → 18.3.1

package/lib/bar-list.component.d.ts

@@ -0,0 +1,39 @@
+import { OnChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/** One resolved row: its label, its value, and its share of the list's largest value. */
+export interface BarListRow {
+    label: string;
+    value: number;
+    percent: number;
+    formattedValue: string;
+}
+/**
+ * A ranked list of horizontal bars — label left, value right, bar width
+ * scaled to each row's share of the list's largest value. Unlike a chart
+ * series or a category bar's segments, every bar is the same accent: rank is
+ * carried by length, not by a categorical palette.
+ * @new
+ */
+export declare class BarListComponent implements OnChanges {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */
+    trackByIndex: (index: number) => number;
+    /** Rows to rank, in the order they should be drawn. @default [] */
+    data: Record<string, any>[];
+    /** Row key holding each row's label. @default 'label' */
+    labelKey: string;
+    /** Row key holding each row's numeric value. @default 'value' */
+    valueKey: string;
+    /** Extra Tailwind classes merged onto the list via `cn()` (last-wins). */
+    class: string;
+    private readonly cdr;
+    get rows(): BarListRow[];
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BarListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BarListComponent, "tolle-bar-list", never, { "data": { "alias": "data"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "valueKey": { "alias": "valueKey"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/category-bar.component.d.ts

@@ -0,0 +1,49 @@
+import { OnChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/** One resolved segment: its share of the bar's width, its paint, and the numbers behind it. */
+export interface CategoryBarSegment {
+    label: string;
+    value: number;
+    percent: number;
+    color: string;
+}
+/**
+ * A single bar split into proportional, labelled ranges — for showing where
+ * one value falls against a scale made of categories (a credit score inside
+ * "Poor / Fair / Good / Excellent", latency inside "Fast / OK / Slow").
+ *
+ * Segments take the chart palette by position, since a category bar has no
+ * stable per-render identity to key colour off the way a chart series does —
+ * pass `colors` to override.
+ * @new
+ */
+export declare class CategoryBarComponent implements OnChanges {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */
+    trackByIndex: (index: number) => number;
+    /** Width of each segment. Values that are not finite and greater than zero are dropped. @default [] */
+    values: number[];
+    /** Name for each segment, used in the accessible summary and as a title tooltip. @default [] */
+    labels: string[];
+    /** Paint for each segment, by index. Falls back to the chart palette --chart-1 through --chart-5. @default [] */
+    colors: string[];
+    /** Position of the pointer, 0-100 on the same scale the segments sum to. Omit to draw no pointer. @default null */
+    markerValue: number | null;
+    /** Accessible name, prefixed onto the sr-only summary of segments and marker. @default '' */
+    ariaLabel: string;
+    /** Extra Tailwind classes merged onto the bar via `cn()` (last-wins). */
+    class: string;
+    private readonly cdr;
+    private get total();
+    get segments(): CategoryBarSegment[];
+    get clampedMarker(): number | null;
+    get summary(): string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CategoryBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CategoryBarComponent, "tolle-category-bar", never, { "values": { "alias": "values"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "colors": { "alias": "colors"; "required": false; }; "markerValue": { "alias": "markerValue"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/chart-spark.component.d.ts

@@ -0,0 +1,49 @@
+import { OnChanges } from '@angular/core';
+import { type ChartMargin, type ChartSeries } from './chart.component';
+import * as i0 from "@angular/core";
+/**
+ * A minimal inline chart: one series, no grid, no axes, no legend — sized to
+ * sit next to a number in a table cell or a stat card. A thin composition
+ * over `tolle-chart`; it draws nothing of its own and inherits `--chart-1`
+ * the same way any other single-series chart in this library does.
+ * @new
+ */
+export declare class ChartSparkComponent implements OnChanges {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Rows to plot, in x order. @default [] */
+    data: Record<string, any>[];
+    /** Row key holding each row's numeric value. @default 'value' */
+    valueKey: string;
+    /** Row key holding each row's x position. Only matters once `hover` is on. @default '' */
+    xKey: string;
+    /** Which mark to draw. @default 'line' */
+    type: 'line' | 'area' | 'bar';
+    /** Interpolation for line/area. @default 'linear' */
+    curve: 'linear' | 'smooth';
+    /** Largest bar thickness in px, used when `type` is 'bar'. @default 6 */
+    maxBarWidth: number;
+    /** Height in px. @default 32 */
+    height: number;
+    /** Renders the crosshair, hit layer and tooltip. @default false */
+    hover: boolean;
+    /** Shows the data table instead of leaving it visually hidden. @default false */
+    showTable: boolean;
+    /** Accessible name, used as the svg <title>. @default '' */
+    ariaLabel: string;
+    /** Longer summary used as the svg <desc>. Falls back to `ariaLabel`. @default '' */
+    description: string;
+    /** Space reserved around the plot — a sparkline has no axis labels to fit. @default { top: 2, right: 2, bottom: 2, left: 2 } */
+    margin: ChartMargin;
+    /** Extra Tailwind classes merged onto the chart via `cn()` (last-wins). */
+    class: string;
+    private readonly cdr;
+    /** Always exactly one series, reading `valueKey` off each row. */
+    get series(): ChartSeries[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChartSparkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChartSparkComponent, "tolle-chart-spark", never, { "data": { "alias": "data"; "required": false; }; "valueKey": { "alias": "valueKey"; "required": false; }; "xKey": { "alias": "xKey"; "required": false; }; "type": { "alias": "type"; "required": false; }; "curve": { "alias": "curve"; "required": false; }; "maxBarWidth": { "alias": "maxBarWidth"; "required": false; }; "height": { "alias": "height"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "showTable": { "alias": "showTable"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "description": { "alias": "description"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/chart.component.d.ts

@@ -1,9 +1,9 @@
 import { EventEmitter, ChangeDetectorRef, ElementRef, OnInit, OnChanges, OnDestroy, AfterViewInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { type VariantProps } from 'class-variance-authority';
-import { ChartService, type ChartSeries, type ChartMargin } from './chart.service';
+import { ChartService, type ChartSeries, type ChartMargin, type ChartOrientation } from './chart.service';
 import * as i0 from "@angular/core";
-export type { ChartSeries, ChartMargin, ChartTick, ChartBand } from './chart.service';
+export type { ChartSeries, ChartMargin, ChartTick, ChartBand, ChartOrientation } from './chart.service';
 /**
  * Base for every chart part that has to redraw when the shared scales change.
  * Parts subscribe to the service rather than reading the container component,
@@ -203,6 +203,11 @@ export declare class ChartComponent implements OnInit, OnChanges, AfterViewInit,
     description: string;
     /** Stacks marks on a shared baseline instead of grouping them. @default false */
     stacked: boolean;
+    /**
+     * Which physical axis carries the category vs the value. Only bars support
+     * 'horizontal' — line/area marks stay vertical regardless. @default 'vertical'
+     */
+    orientation: ChartOrientation;
     /** Renders the crosshair, hit layer and shared tooltip. @default true */
     hover: boolean;
     /** Shows the data table instead of leaving it visually hidden. @default false */
@@ -238,28 +243,56 @@ export declare class ChartComponent implements OnInit, OnChanges, AfterViewInit,
     /**
      * One catchment rect per x position, deliberately wider than the marks it
      * covers — readers aim at a category, never at a 2px line or an 8px dot.
+     * Spans the full plot in the cross direction: full height in a vertical
+     * chart, full width in a horizontal one.
      */
-    get hitBands(): import("./chart.service").ChartBand[];
+    get hitRects(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }[];
     onEnterBand(index: number): void;
     onPointerLeave(): void;
     get computedClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "tolle-chart", never, { "data": { "alias": "data"; "required": false; }; "series": { "alias": "series"; "required": false; }; "xKey": { "alias": "xKey"; "required": false; }; "height": { "alias": "height"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "description": { "alias": "description"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "showTable": { "alias": "showTable"; "required": false; }; "xHeader": { "alias": "xHeader"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "density": { "alias": "density"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "activeIndexChange": "activeIndexChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "tolle-chart", never, { "data": { "alias": "data"; "required": false; }; "series": { "alias": "series"; "required": false; }; "xKey": { "alias": "xKey"; "required": false; }; "height": { "alias": "height"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "description": { "alias": "description"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "showTable": { "alias": "showTable"; "required": false; }; "xHeader": { "alias": "xHeader"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "density": { "alias": "density"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "activeIndexChange": "activeIndexChange"; }, never, ["*"], true, never>;
 }
-/** Horizontal rules at the y ticks, with optional vertical rules at the x positions. */
+/**
+ * Rules at the value ticks, with optional rules at the category positions.
+ * Orientation-aware: in a horizontal chart the value rules run vertically and
+ * the (optional) category rules run horizontally — the transpose of a
+ * vertical chart's grid.
+ */
 export declare class ChartGridComponent extends ChartChild {
-    /** Also draws a rule at every x position. @default false */
+    /** Also draws a rule at every category position. @default false */
     vertical: boolean;
     /** Extra Tailwind classes merged onto each rule via `cn()` (last-wins). */
     class: string;
-    get verticalXs(): number[];
+    /** Rules at each value tick, spanning the plot in the cross direction. */
+    get valueLines(): {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    }[];
+    /** Rules at each category position, only when `vertical` is set. */
+    get categoryLines(): {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    }[];
     get lineClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChartGridComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChartGridComponent, "svg:g[tolle-chart-grid]", never, { "vertical": { "alias": "vertical"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
 }
 /** X-axis tick labels, thinned so they never collide. */
 export declare class ChartXAxisComponent extends ChartChild {
-    /** Approximate px per character, used to decide when labels would collide. @default 7 */
+    /**
+     * Approximate px per character, used to decide when category labels would
+     * collide. Only consulted in the vertical orientation. @default 7
+     */
     charWidth: number;
     /** Extra Tailwind classes merged onto each label via `cn()` (last-wins). */
     class: string;
@@ -268,6 +301,11 @@ export declare class ChartXAxisComponent extends ChartChild {
      * gets, so a dense axis thins out instead of overprinting itself.
      */
     get stride(): number;
+    /**
+     * Vertical orientation: category labels, thinned so they never collide
+     * (today's behaviour). Horizontal orientation: this is the bottom axis'
+     * physical position, which a horizontal chart uses for its value ticks.
+     */
     get visibleTicks(): {
         x: number;
         label: string;
@@ -284,6 +322,15 @@ export declare class ChartYAxisComponent extends ChartChild {
     /** Extra Tailwind classes merged onto each label via `cn()` (last-wins). */
     class: string;
     get labelX(): number;
+    /**
+     * Vertical orientation: value ticks (today's behaviour). Horizontal
+     * orientation: this is the left axis' physical position, which a
+     * horizontal chart uses for its category labels.
+     */
+    get visibleTicks(): {
+        y: number;
+        label: string;
+    }[];
     get labelClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChartYAxisComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChartYAxisComponent, "svg:g[tolle-chart-y-axis]", never, { "offset": { "alias": "offset"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
@@ -333,6 +380,12 @@ export declare class ChartAreaComponent extends ChartChild {
  * Handles both directions, so a negative value rounds downward.
  */
 export declare function barPath(x: number, width: number, yBase: number, yValue: number, radius: number): string;
+/**
+ * `barPath()` transposed for horizontal bars: fixed vertical extent
+ * `[y, y+height]`, variable horizontal extent `[xBase, xValue]`, rounded at
+ * the `xValue` (data) end.
+ */
+export declare function barPathHorizontal(y: number, height: number, xBase: number, xValue: number, radius: number): string;
 /**
  * A bar mark for one series. Grouped beside its siblings by default, stacked
  * when the container's `stacked` is set. The data end carries a 4px radius, the
@@ -355,7 +408,13 @@ export declare class ChartBarComponent extends ChartChild {
     protected register(): void;
     ngOnInit(): void;
     get color(): string;
-    /** Geometry for every bar this series contributes. */
+    /**
+     * Geometry for every bar this series contributes. `x`/`width` are the bar's
+     * footprint on the category axis and `yBase`/`yValue` its extent on the
+     * value axis — physical x/y when vertical (the original meaning), but
+     * transposed (x holds a vertical footprint, yBase/yValue hold horizontal
+     * positions) when the chart is horizontal, same as `ChartService.yFor()`.
+     */
     get bars(): {
         d: string;
         active: boolean;

package/lib/chart.service.d.ts

@@ -25,6 +25,12 @@ export interface ChartBand {
 }
 /** How x positions are resolved: discrete bands (bars) or points (line/area). */
 export type ChartScaleMode = 'point' | 'band';
+/**
+ * Which physical axis carries the category vs the value. Only the band scale
+ * (bars) supports 'horizontal' — line/area stay point-scale and vertical,
+ * same as Tremor never offers a horizontal line/area chart either.
+ */
+export type ChartOrientation = 'vertical' | 'horizontal';
 /** Number of chart palette steps that exist. A 6th series does not get a colour. */
 export declare const CHART_COLOR_LIMIT = 5;
 /**
@@ -79,6 +85,12 @@ export declare class ChartService {
     margin: ChartMargin;
     /** Fraction of a band's step spent on padding, split either side. */
     bandPadding: number;
+    /**
+     * Which physical axis is the category axis. Bars flip this via `configure()`;
+     * every other geometry getter branches on it internally, defaulting to the
+     * exact vertical formula when unset, so existing vertical charts are unaffected.
+     */
+    orientation: ChartOrientation;
     private scaleMode;
     private zeroRequired;
     private domainMin;
@@ -115,7 +127,7 @@ export declare class ChartService {
      * Replaces the chart's configuration and recomputes the scales.
      * Called by the container on input changes and on resize.
      */
-    configure(config: Partial<Pick<ChartService, 'data' | 'series' | 'xKey' | 'stacked' | 'width' | 'height' | 'margin' | 'bandPadding'>>): void;
+    configure(config: Partial<Pick<ChartService, 'data' | 'series' | 'xKey' | 'stacked' | 'width' | 'height' | 'margin' | 'bandPadding' | 'orientation'>>): void;
     /** Switches x to a band scale. Bars call this; it also forces zero into the domain. */
     useBandScale(): void;
     /** Forces zero into the y domain, for marks anchored to a baseline. */
@@ -136,17 +148,25 @@ export declare class ChartService {
     /** Sum of every series at `index`. */
     stackTotal(index: number): number;
     /**
-     * Maps a data value to an svg y. SVG y grows downward, so the domain maximum
-     * lands on `plotTop` and the minimum on `plotBottom`.
+     * Maps a data value to a position along the *value* axis — svg y when
+     * vertical (svg y grows downward, so the domain maximum lands on `plotTop`),
+     * svg x when horizontal (the domain maximum lands on `plotRight`).
      */
     yFor(value: number): number;
-    /** The svg y of the zero line, clamped into the plot. */
+    /** The value-axis position of the zero line, clamped into the plot. */
     get baselineY(): number;
+    /** Length of the plot along the category axis: `plotHeight` when horizontal, else `plotWidth`. */
+    private get categoryAxisLength();
+    /** Origin of the plot along the category axis: `plotTop` when horizontal, else `plotLeft`. */
+    private get categoryAxisOrigin();
     /** Width of one band, excluding its padding. Meaningful in band mode. */
     get bandWidth(): number;
     /** Distance between adjacent band starts. Bands tile the plot exactly. */
     get bandStep(): number;
-    /** Geometry of the band at `index`. */
+    /**
+     * Geometry of the band at `index`, along the category axis — x when
+     * vertical (today's meaning), y when horizontal.
+     */
     bandFor(index: number): ChartBand;
     /** x of the data point at `index` on the point scale. */
     pointX(index: number): number;

package/lib/progress-circle.component.d.ts

@@ -0,0 +1,35 @@
+import { OnChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Radial counterpart to `tolle-progress`: a ring that fills clockwise from
+ * 12 o'clock. Project content to label the centre — a percentage, an icon,
+ * whatever the caller wants; the ring renders nothing there on its own.
+ * @new
+ */
+export declare class ProgressCircleComponent implements OnChanges {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Percent complete, 0-100. @default 0 */
+    value: number | null;
+    /** Diameter of the ring in px. @default 120 */
+    size: number;
+    /** Thickness of the ring in px. @default 8 */
+    strokeWidth: number;
+    /** Extra Tailwind classes merged onto the ring via `cn()` (last-wins). */
+    class: string;
+    private readonly cdr;
+    get clampedValue(): number;
+    get viewBox(): string;
+    get center(): number;
+    /** Leaves half the stroke width as margin so the ring never clips the frame. */
+    get radius(): number;
+    get circumference(): number;
+    get dashOffset(): number;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressCircleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressCircleComponent, "tolle-progress-circle", never, { "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/lib/tracker.component.d.ts

@@ -0,0 +1,39 @@
+import { OnChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Health of one period in the strip. Maps to the theme's semantic status tokens, not the chart palette. */
+export type TrackerStatus = 'success' | 'warning' | 'error' | 'neutral';
+/** One block: its health, an optional per-block colour override, and the tooltip naming it. */
+export interface TrackerBlock {
+    status?: TrackerStatus;
+    color?: string;
+    tooltip?: string;
+}
+/**
+ * A row of equal-width blocks, one per period — an uptime or activity strip.
+ * Each block is a real `<button>` so its tooltip is reachable by keyboard and
+ * has a screen-reader name of its own, not just a hover affordance.
+ * @new
+ */
+export declare class TrackerComponent implements OnChanges {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */
+    trackByIndex: (index: number) => number;
+    /** One block per period, in chronological order. @default [] */
+    data: TrackerBlock[];
+    /** Height of each block in px. @default 32 */
+    blockHeight: number;
+    /** Accessible name for the whole strip. @default '' */
+    ariaLabel: string;
+    /** Extra Tailwind classes merged onto the strip via `cn()` (last-wins). */
+    class: string;
+    private readonly cdr;
+    colorFor(block: TrackerBlock): string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TrackerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TrackerComponent, "tolle-tracker", never, { "data": { "alias": "data"; "required": false; }; "blockHeight": { "alias": "blockHeight"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tolle_/tolle-ui",
-  "version": "18.3.0",
+  "version": "18.3.1",
   "publishConfig": {
     "access": "public"
   },

package/public-api.d.ts

@@ -61,6 +61,7 @@ export * from './lib/carousel';
 export * from './lib/label.component';
 export * from './lib/separator.component';
 export * from './lib/progress.component';
+export * from './lib/progress-circle.component';
 export * from './lib/slider.component';
 export * from './lib/toggle.component';
 export * from './lib/toggle-group.component';
@@ -130,6 +131,10 @@ export * from './lib/model-selector.component';
 export * from './lib/chart.service';
 export * from './lib/chart.component';
 export * from './lib/chart-pie.component';
+export * from './lib/chart-spark.component';
+export * from './lib/category-bar.component';
+export * from './lib/tracker.component';
+export * from './lib/bar-list.component';
 export * from './lib/direction.component';
 export * from './lib/time-picker.component';
 export * from './lib/date-time-picker.component';