@visuno/angular 0.0.0-stage → 0.1.0

package/run-queue/run-queue.component.d.ts

@@ -0,0 +1,93 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges } from '@angular/core';
+import { type VoIconName } from '../core/icon.component';
+import * as i0 from "@angular/core";
+export type RunState = 'queued' | 'running' | 'failed' | 'done';
+export interface RunStep {
+    label: string;
+    state: RunState;
+    /** What the step came to, shown once it is done, like "3 of 3" or "4 articles". */
+    meta?: string;
+}
+export interface RunJob {
+    /** Keeps the job's row when the list changes order. Defaults to the title. */
+    id?: string;
+    /** What the job is, like "Draft the launch email". */
+    title: string;
+    /** Who does it, like "Copy agent", under the title. */
+    agent?: string;
+    /** The icon on the job's badge. Defaults to a spark. */
+    icon?: VoIconName;
+    state: RunState;
+    /** How far the job is, 0 to 1. Defaults to the share of its steps that are done. */
+    progress?: number;
+    /** The time at the end of the row, like "in ~4s", "12s left" or "4.2s". */
+    time?: string;
+    /** The line after the agent while it runs. Defaults to the step running or failed. */
+    note?: string;
+    steps?: RunStep[];
+}
+export type RunQueueDensity = 'detailed' | 'compact';
+/** Internal per-job render state. */
+interface JobView {
+    job: RunJob;
+    index: number;
+    key: string;
+    part: 'run' | 'next' | 'done';
+    dataS: 'run' | 'fail' | 'done' | 'wait';
+    progress: number;
+    note?: string;
+    showSteps: boolean;
+}
+/** A queue of agent jobs: running, up next, and done, with per-row progress and a compact toggle. */
+export declare class RunQueueComponent implements AfterViewInit, OnChanges {
+    private readonly cdr;
+    private readonly host;
+    jobs: RunJob[];
+    /** The queue's name over its status line. */
+    title: string;
+    /** Overrides the status line. */
+    status?: string;
+    /** The line under "All N jobs done" once every job is done. */
+    summary?: string;
+    /** detailed lists the running job's steps, compact folds them away. */
+    set density(value: RunQueueDensity | undefined);
+    defaultDensity: RunQueueDensity;
+    /** Whether the Retry button shows on a failed step (React: onRetry wired). */
+    retryWired: boolean;
+    /** Sits flat in a chat thread, with no card. */
+    bare: boolean;
+    densityChange: EventEmitter<RunQueueDensity>;
+    retry: EventEmitter<{
+        job: number;
+        step: number;
+    }>;
+    readonly densityOptions: {
+        value: RunQueueDensity;
+        label: string;
+    }[];
+    dens: RunQueueDensity;
+    knobLeft: number;
+    knobWidth: number;
+    private controlled;
+    private ready;
+    constructor(cdr: ChangeDetectorRef, host: ElementRef<HTMLElement>);
+    private keyOf;
+    private partOf;
+    get views(): JobView[];
+    get runViews(): JobView[];
+    get nextViews(): JobView[];
+    get doneViews(): JobView[];
+    get doneCount(): number;
+    get fin(): boolean;
+    get line(): string;
+    subLine(v: JobView): string;
+    pctText(v: JobView): number;
+    stepClass(st: RunStep): string;
+    setDensity(value: RunQueueDensity): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(): void;
+    private placeKnob;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RunQueueComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RunQueueComponent, "vo-run-queue", never, { "jobs": { "alias": "jobs"; "required": false; }; "title": { "alias": "title"; "required": false; }; "status": { "alias": "status"; "required": false; }; "summary": { "alias": "summary"; "required": false; }; "density": { "alias": "density"; "required": false; }; "defaultDensity": { "alias": "defaultDensity"; "required": false; }; "retryWired": { "alias": "retryWired"; "required": false; }; "bare": { "alias": "bare"; "required": false; }; }, { "densityChange": "densityChange"; "retry": "retry"; }, never, never, true, never>;
+}
+export {};

package/run-summary/run-summary.component.d.ts

@@ -0,0 +1,81 @@
+import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/** One stat in the row under the title, like "files" or "cost". */
+export interface RunStat {
+    /** Like "files" or "cost". */
+    label: string;
+    /** Counts up from 0 when the summary appears. */
+    value: number;
+    /** Before the number, like "$". */
+    prefix?: string;
+    /** After the number, like "k". */
+    suffix?: string;
+    /** Decimal places, like 2 for a cost. */
+    decimals?: number;
+}
+/** One file the run changed, under "What changed". */
+export interface RunChange {
+    file: string;
+    added: number;
+    removed: number;
+}
+/** The button at the end of a need, like Review. */
+export interface RunNeedAction {
+    label: string;
+    onClick: () => void;
+    /** Swaps the label for a spinner. */
+    busy?: boolean;
+}
+/** One item left for the person, under "Needs you". */
+export interface RunNeed {
+    key: string;
+    /** What needs the person. Crossfades when it changes. */
+    text: string;
+    action?: RunNeedAction;
+}
+export declare class RunSummaryComponent implements AfterViewInit, OnChanges, OnDestroy {
+    /** Defaults to "Run complete". */
+    title: string;
+    /** The title once the changes are undone. */
+    undoneTitle: string;
+    /** The quiet line under the title, like "Finished in 12m 40s". */
+    subtitle?: string;
+    /** One line on what the run did. */
+    summary?: string;
+    stats?: RunStat[];
+    /** The files the run changed, under "What changed". */
+    changes?: RunChange[];
+    /** What is left for the person, under "Needs you". */
+    needs?: RunNeed[];
+    /** Whether the changes are undone. Leave it out to let "Undo all" toggle it. */
+    undone?: boolean;
+    defaultUndone: boolean;
+    /** Sits flat in a chat thread (the default). Set false to give it a card of its own. */
+    bare: boolean;
+    /** Adds a button in the corner that opens the run's details. */
+    details: EventEmitter<void>;
+    /** The main button, "Open changes". */
+    openChanges: EventEmitter<void>;
+    undoneChange: EventEmitter<boolean>;
+    private root;
+    private readonly motion;
+    private innerUndone;
+    /** Whether the glyph should play its entrance (only after undone changes). */
+    moved: boolean;
+    /** The live counted-up value per stat label; null until its tween starts. */
+    private counts;
+    private timers;
+    private frames;
+    ngOnChanges(changes: SimpleChanges): void;
+    get isUndone(): boolean;
+    ngAfterViewInit(): void;
+    /** The text shown for a stat: its live count while rolling, else its final value. */
+    display(s: RunStat): string;
+    toggleUndone(): void;
+    runNeed(a: RunNeedAction): void;
+    private tween;
+    private after;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RunSummaryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RunSummaryComponent, "vo-run-summary", never, { "title": { "alias": "title"; "required": false; }; "undoneTitle": { "alias": "undoneTitle"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "summary": { "alias": "summary"; "required": false; }; "stats": { "alias": "stats"; "required": false; }; "changes": { "alias": "changes"; "required": false; }; "needs": { "alias": "needs"; "required": false; }; "undone": { "alias": "undone"; "required": false; }; "defaultUndone": { "alias": "defaultUndone"; "required": false; }; "bare": { "alias": "bare"; "required": false; }; }, { "details": "details"; "openChanges": "openChanges"; "undoneChange": "undoneChange"; }, never, never, true, never>;
+}

package/scatter-chart/scatter-chart.component.d.ts

@@ -0,0 +1,139 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/** A shape for a series, so it reads without colour too. */
+export type ScatterShape = 'circle' | 'square' | 'triangle';
+/** One run: a dot on the chart. */
+export interface ScatterRun {
+    id: string | number;
+    /** Which series it belongs to, by key. */
+    series: string;
+    /** Along the bottom, like cost per run in dollars. */
+    x: number;
+    /** Up the side, like an eval score in %. */
+    y: number;
+    /** Its dot's size, like thousands of tokens. */
+    size: number;
+}
+/** One series: a colour and a shape, with a legend label. */
+export interface ScatterSeries {
+    key: string;
+    label: string;
+    /** Defaults to the chart palette in order: --vo-c1, --vo-c2, --vo-c3. */
+    color?: string;
+    /** Each series has a shape as well as a colour, so it reads without colour too. */
+    shape?: ScatterShape;
+}
+/** Internal per-dot render data. */
+interface DotView {
+    run: ScatterRun;
+    index: number;
+    cls: string;
+    fill: string;
+    shape: ScatterShape;
+    cx: number;
+    cy: number;
+    r: number;
+}
+export declare class ScatterChartComponent implements AfterViewInit, OnDestroy {
+    runs: ScatterRun[];
+    series: ScatterSeries[];
+    className: string;
+    title: string;
+    subtitle?: string;
+    /** [min, max] of each axis. */
+    xDomain: [number, number];
+    yDomain: [number, number];
+    /** Where the labels go along the bottom. A narrow chart keeps the two ends and the middle. */
+    xTicks: number[];
+    /** Where the gridlines and their labels go up the side. A narrow chart keeps the two ends and the middle. */
+    yTicks: number[];
+    xTitle: string;
+    yTitle: string;
+    formatX: (x: number) => string;
+    formatY: (y: number) => string;
+    formatSize: (s: number) => string;
+    /** The four quadrants the medians make, from the top left, clockwise. A narrow chart keeps the median lines and leaves the names out. */
+    quadrants: [string, string, string, string];
+    /** Runs to ring, like outliers the agent found. */
+    ringed: (string | number)[];
+    /** The line under the chart while nothing is selected or in focus. */
+    note?: string;
+    /** The selected runs, by id. Leave it out to let the chart hold the selection. */
+    set selected(value: (string | number)[] | undefined);
+    selectedChange: EventEmitter<(string | number)[]>;
+    /** Adds "Ask the agent why" to a selection. Return the answer and it streams in. */
+    ask: EventEmitter<ScatterRun[]>;
+    plotRef: ElementRef<HTMLDivElement>;
+    tipRef: ElementRef<HTMLDivElement>;
+    private readonly reduced;
+    private readonly cdr;
+    W: number;
+    H: number;
+    narrow: boolean;
+    l: number;
+    b: number;
+    t: number;
+    rr: number;
+    dots: DotView[];
+    ringDots: DotView[];
+    xt: number[];
+    yt: number[];
+    mx: number;
+    my: number;
+    hot: number;
+    hr: ScatterRun | null;
+    box: number[] | null;
+    ttX: number;
+    ttY: number;
+    focused: boolean;
+    order: number[];
+    selectedRuns: ScatterRun[];
+    avgX: number;
+    avgY: number;
+    answer: {
+        text: string;
+        busy: boolean;
+    } | null;
+    off: string[];
+    private sel;
+    private controlled;
+    private ready;
+    private asked;
+    private drag;
+    private ro?;
+    private timers;
+    readonly min: (...values: number[]) => number;
+    readonly abs: (x: number) => number;
+    get defaultNote(): string;
+    ngAfterViewInit(): void;
+    private si;
+    colorOf(key: string): string;
+    shapeOf(key: string): ScatterShape;
+    labelOf(key: string): string;
+    /** The triangle mark's path, so a dot reads without colour too. */
+    triPath(x: number, y: number, s: number): string;
+    X(v: number): number;
+    Y(v: number): number;
+    private R;
+    private shownIdx;
+    draw(): void;
+    toggle(key: string): void;
+    private local;
+    private near;
+    private setSel;
+    onPointerDown(e: PointerEvent): void;
+    onPointerMove(e: PointerEvent): void;
+    onPointerUp(): void;
+    onPointerCancel(): void;
+    onPointerLeave(): void;
+    onBlur(): void;
+    onKeyDown(e: KeyboardEvent): void;
+    runAsk(): void;
+    private pendingAsk;
+    /** The host calls this with the answer; it streams in word by word. */
+    streamAnswer(text: string): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScatterChartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ScatterChartComponent, "vo-scatter-chart", never, { "runs": { "alias": "runs"; "required": true; }; "series": { "alias": "series"; "required": true; }; "className": { "alias": "className"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "xDomain": { "alias": "xDomain"; "required": false; }; "yDomain": { "alias": "yDomain"; "required": false; }; "xTicks": { "alias": "xTicks"; "required": false; }; "yTicks": { "alias": "yTicks"; "required": false; }; "xTitle": { "alias": "xTitle"; "required": false; }; "yTitle": { "alias": "yTitle"; "required": false; }; "formatX": { "alias": "formatX"; "required": false; }; "formatY": { "alias": "formatY"; "required": false; }; "formatSize": { "alias": "formatSize"; "required": false; }; "quadrants": { "alias": "quadrants"; "required": false; }; "ringed": { "alias": "ringed"; "required": false; }; "note": { "alias": "note"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; "ask": "ask"; }, never, never, true, never>;
+}
+export {};

package/score-breakdown/score-breakdown.component.d.ts

@@ -0,0 +1,107 @@
+import { AfterViewInit, ChangeDetectorRef, EventEmitter, OnDestroy } from '@angular/core';
+import { ReducedMotionService } from '../core/reduced-motion.service';
+import * as i0 from "@angular/core";
+/** One factor that goes into the score. */
+export interface ScoreFactor {
+    key: string;
+    /** Like "Speed". */
+    label: string;
+    /** The points it can earn; the weights add up to 100. */
+    weight: number;
+    /** The points it earned. */
+    earned: number;
+    /** The agent's one-line note, like "Median reply 6.4s, target under 4s". */
+    note: string;
+    /** Adds an Improve button to the open row. */
+    improvable?: boolean;
+    /** A line shown first in the open row, like what was changed. */
+    detail?: string;
+}
+/** The agent's proposal for an improvable factor. */
+export interface ScoreProposal {
+    /** What the agent would change. */
+    text: string;
+    /** What it would gain, like "About 2.1s faster a reply". */
+    gain?: string;
+    /** The points the factor would earn after it. */
+    to: number;
+}
+/** Per-factor render state held by the component. */
+interface Row {
+    factor: ScoreFactor;
+    index: number;
+    color: string;
+    /** The span of this factor's gauge segment: [startAngle, endAngle]. */
+    seg: [number, number];
+    /** The track arc path (the full segment). */
+    track: string;
+    /** The filled arc path, grown to the share currently shown. */
+    fillPath: string;
+    /** Width of the small inline bar, as a CSS length. */
+    barWidth: string;
+    /** The proposal for this row, "busy" while the agent works, or null. */
+    proposal: ScoreProposal | 'busy' | null;
+}
+export declare class ScoreBreakdownComponent implements AfterViewInit, OnDestroy {
+    private readonly reduced;
+    private readonly cdr;
+    factors: ScoreFactor[];
+    title: string;
+    /** Last period's score, for the change beside the band word. */
+    previous?: number;
+    /** What the change is measured against ("since last week"). */
+    since: string;
+    /** The open rows, by key. Leave it out to let clicks open and close rows. */
+    set open(value: string[] | undefined);
+    defaultOpen: string[];
+    /** What the row says while the agent works on a proposal. */
+    improvingLabel: string;
+    /** Emitted when a row opens or closes (when uncontrolled). */
+    openChange: EventEmitter<string[]>;
+    /** Called by Improve; return (or resolve) the agent's proposal. */
+    improveRequest: EventEmitter<{
+        factor: ScoreFactor;
+        resolve: (p: ScoreProposal) => void;
+    }>;
+    /** Called by Apply on a proposal; update the factor's earned and note. */
+    applyProposal: EventEmitter<{
+        factor: ScoreFactor;
+        proposal: ScoreProposal;
+    }>;
+    rows: Row[];
+    hot: number;
+    weakest: number;
+    total: number;
+    drawn: boolean;
+    shownRounded: number;
+    bandWord: string;
+    delta: number | null;
+    absDelta: number;
+    private opened;
+    private controlled;
+    private timers;
+    private frames;
+    constructor(reduced: ReducedMotionService, cdr: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    private fillTo;
+    private sweep;
+    private count;
+    valueText(): string;
+    rowLabel(r: Row): string;
+    lostText(r: Row): string;
+    isOpen(key: string): boolean;
+    toggle(key: string): void;
+    setHot(index: number): void;
+    onPointGauge(e: PointerEvent, index: number): void;
+    onPointRow(e: PointerEvent, index: number): void;
+    onListLeave(e: Event): void;
+    onListFocusOut(e: FocusEvent): void;
+    improve(r: Row): void;
+    apply(r: Row): void;
+    drop(r: Row): void;
+    private later;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScoreBreakdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ScoreBreakdownComponent, "vo-score-breakdown", never, { "factors": { "alias": "factors"; "required": true; }; "title": { "alias": "title"; "required": false; }; "previous": { "alias": "previous"; "required": false; }; "since": { "alias": "since"; "required": false; }; "open": { "alias": "open"; "required": false; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; }; "improvingLabel": { "alias": "improvingLabel"; "required": false; }; }, { "openChange": "openChange"; "improveRequest": "improveRequest"; "applyProposal": "applyProposal"; }, never, never, true, never>;
+}
+export {};

package/segmented-control/segmented-control.component.d.ts

@@ -0,0 +1,44 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/** One choice in the control: its value plus its label. */
+export interface SegmentOption {
+    value: string;
+    label: string;
+}
+export declare class SegmentedControlComponent implements AfterViewInit, OnChanges, OnDestroy {
+    /** The choices, each with a value and a label. */
+    options: SegmentOption[];
+    /** Controlled selected value. Leave out for uncontrolled (uses defaultValue). */
+    value?: string;
+    /** Initial value when uncontrolled. Defaults to the first option's value. */
+    defaultValue?: string;
+    /** Names the group for screen readers, like "View". */
+    label: string;
+    /** `tabs` (default) when it switches a panel, `radio` when it sets an option.
+     *  Exposed as the `as` attribute (Angular template syntax reserves `as`, so the
+     *  field itself is named `variant`). */
+    variant: 'tabs' | 'radio';
+    /** Ties the tabs to their panel. Defaults to a generated id. */
+    id?: string;
+    /** Emitted when the selected value changes. */
+    valueChange: EventEmitter<string>;
+    root: ElementRef<HTMLDivElement>;
+    /** The value shown now (controlled by `value`, else held internally). */
+    current: string;
+    base: string;
+    knobLeft: number;
+    knobWidth: number;
+    knobTransition: string;
+    private first;
+    private ro?;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** The knob takes the picked button's place and width. */
+    private place;
+    select(v: string): void;
+    /** Arrow keys move along and pick; Home/End jump to the ends. */
+    onKey(e: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SegmentedControlComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SegmentedControlComponent, "vo-segmented-control", never, { "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "label": { "alias": "label"; "required": false; }; "variant": { "alias": "as"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}

package/source-stack/source-stack.component.d.ts

@@ -0,0 +1,60 @@
+import { AfterViewInit, EventEmitter, OnDestroy } from '@angular/core';
+import { ReducedMotionService } from '../core/reduced-motion.service';
+import * as i0 from "@angular/core";
+/** One source the answer draws on, drawn as a row when the stack is open. */
+export interface StackSource {
+    /** What kind of source it is. The filter chips pick by this, like 'web', 'file' or 'figma'. */
+    kind: string;
+    title: string;
+    /** Where it came from, like "baymard.com" or "Drive". */
+    host: string;
+    /** 0 to 1, drawn as a small bar. */
+    relevance: number;
+    /** One to three letters in the favicon square, like "B" or "CSV". */
+    mark: string;
+    /** The favicon colour, any CSS colour, like '#635bff' or 'var(--vo-pl)'. */
+    color: string;
+    /** Adds an open button that shows on hover. */
+    onOpen?: () => void;
+}
+/** A filter chip above the list: 'all' or a source kind. */
+export interface SourceFilter {
+    /** 'all', or a source kind. */
+    value: string;
+    label: string;
+}
+export declare class SourceStackComponent implements AfterViewInit, OnDestroy {
+    private readonly reduced;
+    /** The answer the sources back up, shown above the pill. */
+    message?: string;
+    sources: StackSource[];
+    /** The chips above the list. Defaults to All, Web, Files and Figma. */
+    filters: SourceFilter[];
+    /** The chosen filter. Leave it out to let the chips switch it. */
+    filter?: string;
+    defaultFilter: string;
+    /** Whether the list is open. Leave it out to let the pill toggle it. */
+    open?: boolean;
+    defaultOpen: boolean;
+    className?: string;
+    filterChange: EventEmitter<string>;
+    openChange: EventEmitter<boolean>;
+    /** Internal open state when `open` is not controlled. */
+    private innerOpen;
+    /** Internal filter when `filter` is not controlled. */
+    private innerFilter?;
+    /** Opens the sources once on its own, unless the viewer takes over first. */
+    private autoTimer?;
+    private touched;
+    constructor(reduced: ReducedMotionService);
+    get isOpen(): boolean;
+    get activeFilter(): string;
+    get items(): StackSource[];
+    pct(s: StackSource): number;
+    toggle(): void;
+    pick(value: string): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SourceStackComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SourceStackComponent, "vo-source-stack", never, { "message": { "alias": "message"; "required": false; }; "sources": { "alias": "sources"; "required": false; }; "filters": { "alias": "filters"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "defaultFilter": { "alias": "defaultFilter"; "required": false; }; "open": { "alias": "open"; "required": false; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; }; "className": { "alias": "className"; "required": false; }; }, { "filterChange": "filterChange"; "openChange": "openChange"; }, never, never, true, never>;
+}

package/stat-cards/stat-cards.component.d.ts

@@ -0,0 +1,86 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { type VoIconName } from '../core/icon.component';
+import { ReducedMotionService } from '../core/reduced-motion.service';
+import * as i0 from "@angular/core";
+/** One period's figures for a card. */
+export interface StatCardsValue {
+    /** The number in large type, which rolls to it. */
+    value: number;
+    /** Change against the period before, in percent. Green from 0, red below. */
+    change: number;
+    /** The sparkline, oldest first. */
+    points: number[];
+}
+/** One card. */
+export interface StatCardsStat {
+    /** Identifies the card. Defaults to its label. */
+    key?: string;
+    icon: VoIconName;
+    /** Like "Agent runs". */
+    label: string;
+    /** One entry per period, in the same order as `periods`. */
+    values: StatCardsValue[];
+    /** Before the number, like "$". */
+    prefix?: string;
+    /** After the number, like "h". */
+    suffix?: string;
+    /** The sparkline colour. Defaults to the chart palette (--vo-c1..c6). */
+    color?: string;
+}
+/** One entry in the period switch. */
+export interface StatCardsPeriod {
+    /** The switch label, like "30 days". */
+    label: string;
+    /** Shown when you hover a card, like "vs previous 30 days". */
+    compare?: string;
+}
+/** Internal per-card render state. */
+interface CardView {
+    stat: StatCardsStat;
+    index: number;
+    shown: number;
+    changeText: string;
+    changeClass: string;
+    changeOut: boolean;
+    d: string;
+    color: string;
+    enterDelay: number;
+    sparkDelay: number;
+    sparkDrawn: boolean;
+}
+export declare class StatCardsComponent implements AfterViewInit, OnDestroy {
+    private readonly reduced;
+    private readonly cdr;
+    private readonly host;
+    stats: StatCardsStat[];
+    periods: StatCardsPeriod[];
+    /** The period on show, by index. Leave it out to let the switch pick it. */
+    set period(value: number | undefined);
+    defaultPeriod: number;
+    /** The values at the bottom and top of every sparkline. Defaults to each card's own range. */
+    sparkRange?: [number, number];
+    periodChange: EventEmitter<number>;
+    at: number;
+    cards: CardView[];
+    knobLeft: number;
+    knobWidth: number;
+    sparkAnimate: boolean;
+    private controlled;
+    private ready;
+    private timers;
+    private frames;
+    constructor(reduced: ReducedMotionService, cdr: ChangeDetectorRef, host: ElementRef<HTMLElement>);
+    compareFor(): string | null;
+    format(stat: StatCardsStat, value: number): string;
+    ngAfterViewInit(): void;
+    selectPeriod(index: number): void;
+    private draw;
+    private sparklinePath;
+    private roll;
+    private placeKnob;
+    private later;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatCardsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatCardsComponent, "vo-stat-cards", never, { "stats": { "alias": "stats"; "required": true; }; "periods": { "alias": "periods"; "required": true; }; "period": { "alias": "period"; "required": false; }; "defaultPeriod": { "alias": "defaultPeriod"; "required": false; }; "sparkRange": { "alias": "sparkRange"; "required": false; }; }, { "periodChange": "periodChange"; }, never, never, true, never>;
+}
+export {};