@nexterajs/ui 0.0.2 → 0.1.0

package/fesm2022/nexterajs-ui-charts.mjs

@@ -0,0 +1,1096 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, afterNextRender, input, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, output, ElementRef, numberAttribute, model, signal, computed } from '@angular/core';
+import { NxeMessageService } from '@nexterajs/ui/core';
+import { NXE_NUMBER_SEPARATORS, formatNumber, parseNumberFormat, NXE_DEFAULT_DISPLAY_FORMAT, formatDisplay, parseDateValue } from '@nexterajs/ui/intl';
+import { NxeSkeletonComponent, NxeEmptyStateComponent } from '@nexterajs/ui/display';
+import { DateTime } from 'luxon';
+
+// Scale and tick maths shared by the charts. Pure functions: no DOM, no Angular.
+/** Rounds `value` to a 1, 2, 5 or 10 times a power of ten (Heckbert). */
+function niceNumber(value, round) {
+    if (!(value > 0) || !isFinite(value)) {
+        return 1;
+    }
+    const exponent = Math.floor(Math.log10(value));
+    const fraction = value / Math.pow(10, exponent);
+    let nice;
+    if (round) {
+        nice = fraction < 1.5 ? 1 : fraction < 3 ? 2 : fraction < 7 ? 5 : 10;
+    }
+    else {
+        nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10;
+    }
+    return nice * Math.pow(10, exponent);
+}
+/** Decimal places needed to write multiples of `step` exactly (0.25 -> 2, 5 -> 0). */
+function decimalsOf(step) {
+    if (!isFinite(step) || step <= 0) {
+        return 0;
+    }
+    let decimals = 0;
+    let scaled = step;
+    while (decimals < 10 && Math.abs(Math.round(scaled) - scaled) > 1e-9 * Math.max(1, Math.abs(scaled))) {
+        scaled *= 10;
+        decimals++;
+    }
+    return decimals;
+}
+/**
+ * Ticks for `[min, max]`: about `targetTicks` of them, spaced 1, 2 or 5 times a power of ten, the
+ * first at or below `min` and the last at or above `max`. A flat domain (`min === max`) opens up
+ * around the value so the line has somewhere to sit.
+ */
+function niceScale(min, max, targetTicks = 5) {
+    let lo = Math.min(min, max);
+    let hi = Math.max(min, max);
+    if (!isFinite(lo) || !isFinite(hi)) {
+        lo = 0;
+        hi = 1;
+    }
+    if (lo === hi) {
+        if (lo === 0) {
+            hi = 1;
+        }
+        else {
+            const pad = Math.abs(lo) * 0.1;
+            lo -= pad;
+            hi += pad;
+        }
+    }
+    const count = Math.max(2, Math.floor(targetTicks));
+    const step = niceNumber(niceNumber(hi - lo, false) / (count - 1), true);
+    const niceMin = Math.floor(lo / step + 1e-9) * step;
+    const niceMax = Math.ceil(hi / step - 1e-9) * step;
+    const decimals = decimalsOf(step);
+    const ticks = [];
+    const n = Math.round((niceMax - niceMin) / step);
+    for (let i = 0; i <= n; i++) {
+        ticks.push(Number((niceMin + i * step).toFixed(decimals)));
+    }
+    return { min: ticks[0], max: ticks[ticks.length - 1], step, ticks };
+}
+/** Maps `[d0, d1]` onto `[r0, r1]`. A degenerate domain maps to the middle of the range. */
+function linearScale(d0, d1, r0, r1) {
+    if (d1 === d0) {
+        return () => (r0 + r1) / 2;
+    }
+    const k = (r1 - r0) / (d1 - d0);
+    return (value) => r0 + (value - d0) * k;
+}
+/** A `#,##0.00` style pattern that shows `decimals` places, for tick labels that share a step. */
+function patternForDecimals(decimals) {
+    return decimals > 0 ? `#,##0.${'0'.repeat(decimals)}` : '#,##0';
+}
+/** Indexes (0-based) of at most `maxLabels` evenly spaced labels out of `count`, always including the first. */
+function labelIndexes(count, maxLabels) {
+    if (count <= 0) {
+        return [];
+    }
+    const step = Math.max(1, Math.ceil(count / Math.max(1, maxLabels)));
+    const out = [];
+    for (let i = 0; i < count; i += step) {
+        out.push(i);
+    }
+    return out;
+}
+/** Index of the entry of the ascending `xs` nearest to `x`; -1 when `xs` is empty. */
+function nearestIndex(xs, x) {
+    if (xs.length === 0) {
+        return -1;
+    }
+    let lo = 0;
+    let hi = xs.length - 1;
+    while (hi - lo > 1) {
+        const mid = (lo + hi) >> 1;
+        if (xs[mid] <= x) {
+            lo = mid;
+        }
+        else {
+            hi = mid;
+        }
+    }
+    return Math.abs(xs[lo] - x) <= Math.abs(xs[hi] - x) ? lo : hi;
+}
+
+// Path geometry for the charts. Pure functions returning SVG path data.
+const TAU = Math.PI * 2;
+const fmt = (n) => String(Math.round(n * 100) / 100);
+/** Splits a series at its gaps: each run of consecutive defined points is one segment. */
+function segments(points) {
+    const out = [];
+    let run = [];
+    for (const p of points) {
+        if (p) {
+            run.push(p);
+        }
+        else if (run.length) {
+            out.push(run);
+            run = [];
+        }
+    }
+    if (run.length) {
+        out.push(run);
+    }
+    return out;
+}
+/**
+ * The line through `points`, `null` entries leaving gaps (the pen lifts; it never joins across a
+ * missing value). A run of one point draws no line: it shows as a marker.
+ */
+function linePath(points) {
+    return segments(points)
+        .filter((run) => run.length > 1)
+        .map((run) => run.map((p, i) => `${i === 0 ? 'M' : 'L'}${fmt(p.x)} ${fmt(p.y)}`).join(''))
+        .join('');
+}
+/**
+ * The filled area between `top` and `bottom` (same length; `null` in either leaves a gap in the
+ * fill too). `bottom` is a baseline y for a plain area, or the lower edge of a stacked band.
+ */
+function areaPath(top, bottom) {
+    const base = typeof bottom === 'number' ? top.map((p) => (p ? { x: p.x, y: bottom } : null)) : bottom;
+    const out = [];
+    let run = [];
+    const flush = () => {
+        if (run.length > 1) {
+            const forward = run.map((r, i) => `${i === 0 ? 'M' : 'L'}${fmt(r.t.x)} ${fmt(r.t.y)}`).join('');
+            const back = run
+                .slice()
+                .reverse()
+                .map((r) => `L${fmt(r.b.x)} ${fmt(r.b.y)}`)
+                .join('');
+            out.push(`${forward}${back}Z`);
+        }
+        run = [];
+    };
+    top.forEach((t, i) => {
+        const b = base[i];
+        if (t && b) {
+            run.push({ t, b });
+        }
+        else {
+            flush();
+        }
+    });
+    flush();
+    return out.join('');
+}
+/**
+ * Cumulative stack of `rows` (one array of values per series, aligned by index). Missing and
+ * negative values count as 0 so the bands above them still sit on the stack. Returns the lower and
+ * upper edge per series.
+ */
+function stackValues(rows) {
+    const length = rows.reduce((m, r) => Math.max(m, r.length), 0);
+    const running = new Array(length).fill(0);
+    return rows.map((row) => {
+        const lower = running.slice();
+        const upper = running.map((total, i) => {
+            const v = row[i];
+            return total + (typeof v === 'number' && isFinite(v) ? Math.max(0, v) : 0);
+        });
+        for (let i = 0; i < length; i++) {
+            running[i] = upper[i];
+        }
+        return { lower, upper };
+    });
+}
+function polar(cx, cy, r, angle) {
+    // 0 is 12 o'clock, angles grow clockwise.
+    return { x: cx + r * Math.sin(angle), y: cy - r * Math.cos(angle) };
+}
+/**
+ * Ring segments for `values` (zeros and negatives get no arc, `null` in the result). `gap` is the
+ * visible gap between neighbours in px, measured on the ring's centre line, so it reads as the 2px
+ * surface gap the mark spec asks for. A lone segment that is the whole ring is drawn as two half
+ * arcs (an SVG arc cannot start and end on the same point) with no gap.
+ */
+function donutArcs(values, cx, cy, outer, inner, gap = 2) {
+    const total = values.reduce((s, v) => s + (v > 0 ? v : 0), 0);
+    if (total <= 0) {
+        return values.map(() => null);
+    }
+    const drawn = values.filter((v) => v > 0).length;
+    const mid = (outer + inner) / 2;
+    const pad = drawn > 1 ? gap / mid : 0;
+    let cursor = 0;
+    return values.map((v) => {
+        if (!(v > 0)) {
+            return null;
+        }
+        const sweep = (v / total) * TAU;
+        const a0 = cursor + pad / 2;
+        const a1 = Math.max(a0, cursor + sweep - pad / 2);
+        const centroid = polar(cx, cy, mid, cursor + sweep / 2);
+        cursor += sweep;
+        if (a1 - a0 >= TAU - 1e-6) {
+            const o0 = polar(cx, cy, outer, 0);
+            const o1 = polar(cx, cy, outer, Math.PI);
+            const i0 = polar(cx, cy, inner, 0);
+            const i1 = polar(cx, cy, inner, Math.PI);
+            const path = `M${fmt(o0.x)} ${fmt(o0.y)}A${outer} ${outer} 0 1 1 ${fmt(o1.x)} ${fmt(o1.y)}A${outer} ${outer} 0 1 1 ${fmt(o0.x)} ${fmt(o0.y)}Z` +
+                `M${fmt(i0.x)} ${fmt(i0.y)}A${inner} ${inner} 0 1 0 ${fmt(i1.x)} ${fmt(i1.y)}A${inner} ${inner} 0 1 0 ${fmt(i0.x)} ${fmt(i0.y)}Z`;
+            return { startAngle: 0, endAngle: TAU, path, centroid };
+        }
+        const large = a1 - a0 > Math.PI ? 1 : 0;
+        const os = polar(cx, cy, outer, a0);
+        const oe = polar(cx, cy, outer, a1);
+        const ie = polar(cx, cy, inner, a1);
+        const is = polar(cx, cy, inner, a0);
+        const path = `M${fmt(os.x)} ${fmt(os.y)}A${outer} ${outer} 0 ${large} 1 ${fmt(oe.x)} ${fmt(oe.y)}` +
+            `L${fmt(ie.x)} ${fmt(ie.y)}A${inner} ${inner} 0 ${large} 0 ${fmt(is.x)} ${fmt(is.y)}Z`;
+        return { startAngle: a0, endAngle: a1, path, centroid };
+    });
+}
+/**
+ * Keeps the `max - 1` largest items (in their input order) and folds the rest into one "Other"
+ * item last. Returns the live items unchanged when they fit in `max`. Non-positive values never count.
+ */
+function groupOther(items, max, otherLabel) {
+    const live = items.filter((i) => i.value > 0 && isFinite(i.value));
+    const limit = Math.max(2, Math.floor(max));
+    if (live.length <= limit) {
+        return live.slice();
+    }
+    const keepIdx = live
+        .map((item, index) => ({ item, index }))
+        .sort((a, b) => b.item.value - a.item.value || a.index - b.index)
+        .slice(0, limit - 1)
+        .map((e) => e.index)
+        .sort((a, b) => a - b);
+    const kept = keepIdx.map((i) => live[i]);
+    const rest = live.filter((_, i) => !keepIdx.includes(i));
+    return [...kept, { key: '__other__', label: otherLabel, value: rest.reduce((s, r) => s + r.value, 0), other: true }];
+}
+/**
+ * The segment under the point `(x, y)` of a donut drawn by `donutArcs`, or -1 when the point is
+ * off the ring (in the hole or outside). Gaps belong to the segment whose share they interrupt, so
+ * the pointer never flickers through the 2px surface line.
+ */
+function donutHit(values, cx, cy, outer, inner, x, y) {
+    const dx = x - cx;
+    const dy = y - cy;
+    const r = Math.hypot(dx, dy);
+    if (r < inner || r > outer) {
+        return -1;
+    }
+    const total = values.reduce((s, v) => s + (v > 0 ? v : 0), 0);
+    if (total <= 0) {
+        return -1;
+    }
+    let angle = Math.atan2(dx, -dy);
+    if (angle < 0) {
+        angle += TAU;
+    }
+    let cursor = 0;
+    for (let i = 0; i < values.length; i++) {
+        if (!(values[i] > 0)) {
+            continue;
+        }
+        cursor += (values[i] / total) * TAU;
+        if (angle <= cursor + 1e-9) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+/** How many categorical colours the palette has (`--nxe-ui-chart-1` to `--nxe-ui-chart-8`). */
+const NXE_CHART_SLOTS = 8;
+/** The colour of the grouped "Other" remainder: a neutral, never a categorical slot. */
+const NXE_CHART_OTHER_COLOR = 'var(--nxe-ui-chart-other)';
+/**
+ * The CSS colour of palette slot `index` (0-based). Slots are assigned in order and never cycled:
+ * past the eighth there is no ninth hue, so the remainder takes the neutral `Other` colour.
+ */
+function nxeChartColor(index) {
+    return index >= 0 && index < NXE_CHART_SLOTS ? `var(--nxe-ui-chart-${index + 1})` : NXE_CHART_OTHER_COLOR;
+}
+let sequence = 0;
+/** A document-unique id fragment for aria-describedby targets. */
+function nxeChartId(prefix) {
+    return `${prefix}-${++sequence}`;
+}
+/**
+ * Number formatting for a chart: separators follow `NXE_NUMBER_SEPARATORS` (which, with
+ * `provideNxeMessages({ separators: true })`, follows the active locale). Call inside a `computed`
+ * or a template so a locale switch re-renders.
+ */
+function nxeChartNumberFormatter() {
+    const separators = inject(NXE_NUMBER_SEPARATORS);
+    return (value, pattern) => formatNumber(value, parseNumberFormat(pattern), separators);
+}
+/** The message service, for a chart's strings and its locale. */
+function nxeChartMessages() {
+    return inject(NxeMessageService);
+}
+/**
+ * Reports the element's width now and whenever it changes (ResizeObserver, browser only). Call in
+ * an injection context. No `effect()`: the observer writes straight into whatever signal the
+ * callback sets.
+ */
+function nxeObserveWidth(element, onWidth) {
+    const destroyRef = inject(DestroyRef);
+    afterNextRender(() => {
+        onWidth(Math.round(element.getBoundingClientRect().width));
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width;
+            if (typeof width === 'number') {
+                onWidth(Math.round(width));
+            }
+        });
+        observer.observe(element);
+        destroyRef.onDestroy(() => observer.disconnect());
+    });
+}
+
+/**
+ * The data behind a chart as a real table: the alternative for a reader who cannot see the marks.
+ * It is a library-internal native table (the consuming app's own templates still avoid one). The
+ * chart keeps it visually hidden, or shows it in place of the plot under "View as table".
+ */
+class NxeChartDataTableComponent {
+    caption = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    /** Header of the first column (the category or segment). */
+    corner = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "corner" }] : /* istanbul ignore next */ []));
+    columns = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    rows = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeChartDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeChartDataTableComponent, isStandalone: true, selector: "nxe-chart-data-table", inputs: { caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, corner: { classPropertyName: "corner", publicName: "corner", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-chart-data-table" }, ngImport: i0, template: "<table class=\"nxe-chart-data-table__table\">\r\n    <caption>{{ caption() }}</caption>\r\n    <thead>\r\n        <tr>\r\n            <th scope=\"col\">{{ corner() }}</th>\r\n            @for (column of columns(); track $index) {\r\n                <th scope=\"col\">{{ column }}</th>\r\n            }\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        @for (row of rows(); track $index) {\r\n            <tr>\r\n                <th scope=\"row\">{{ row.header }}</th>\r\n                @for (cell of row.cells; track $index) {\r\n                    <td>{{ cell }}</td>\r\n                }\r\n            </tr>\r\n        }\r\n    </tbody>\r\n</table>\r\n", styles: [".nxe-chart-data-table{display:block;overflow-x:auto}.nxe-chart-data-table__table{width:100%;border-collapse:collapse;color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-sm, 13px);font-variant-numeric:tabular-nums}.nxe-chart-data-table__table caption{padding:0 0 var(--nxe-ui-space-2, 8px);color:var(--nxe-ui-neutral-600);text-align:start}.nxe-chart-data-table__table th,.nxe-chart-data-table__table td{padding:6px 10px;border-bottom:1px solid var(--nxe-ui-border)}.nxe-chart-data-table__table thead th{background:var(--nxe-ui-surface-alt);font-weight:var(--nxe-ui-font-weight-semibold, 600)}.nxe-chart-data-table__table th{text-align:start}.nxe-chart-data-table__table td{text-align:end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeChartDataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-chart-data-table', host: { class: 'nxe-chart-data-table' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<table class=\"nxe-chart-data-table__table\">\r\n    <caption>{{ caption() }}</caption>\r\n    <thead>\r\n        <tr>\r\n            <th scope=\"col\">{{ corner() }}</th>\r\n            @for (column of columns(); track $index) {\r\n                <th scope=\"col\">{{ column }}</th>\r\n            }\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        @for (row of rows(); track $index) {\r\n            <tr>\r\n                <th scope=\"row\">{{ row.header }}</th>\r\n                @for (cell of row.cells; track $index) {\r\n                    <td>{{ cell }}</td>\r\n                }\r\n            </tr>\r\n        }\r\n    </tbody>\r\n</table>\r\n", styles: [".nxe-chart-data-table{display:block;overflow-x:auto}.nxe-chart-data-table__table{width:100%;border-collapse:collapse;color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-sm, 13px);font-variant-numeric:tabular-nums}.nxe-chart-data-table__table caption{padding:0 0 var(--nxe-ui-space-2, 8px);color:var(--nxe-ui-neutral-600);text-align:start}.nxe-chart-data-table__table th,.nxe-chart-data-table__table td{padding:6px 10px;border-bottom:1px solid var(--nxe-ui-border)}.nxe-chart-data-table__table thead th{background:var(--nxe-ui-surface-alt);font-weight:var(--nxe-ui-font-weight-semibold, 600)}.nxe-chart-data-table__table th{text-align:start}.nxe-chart-data-table__table td{text-align:end}\n"] }]
+        }], propDecorators: { caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], corner: [{ type: i0.Input, args: [{ isSignal: true, alias: "corner", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+
+/**
+ * The legend of a chart: a swatch and a name per series or segment. Each entry is a toggle button
+ * (`aria-pressed`, reachable and operable from the keyboard) that asks the chart to hide or show
+ * that series. Colour never carries the identity alone: the name is always written.
+ */
+class NxeChartLegendComponent {
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the list. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** `false` renders plain entries instead of toggle buttons. */
+    toggleable = input(true, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emits the key of the entry the user toggled. */
+    toggled = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeChartLegendComponent, isStandalone: true, selector: "nxe-chart-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, host: { classAttribute: "nxe-chart-legend" }, ngImport: i0, template: "<ul class=\"nxe-chart-legend__list\" [attr.aria-label]=\"label() || null\">\r\n    @for (item of items(); track item.key) {\r\n        <li class=\"nxe-chart-legend__entry\">\r\n            @if (toggleable()) {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-chart-legend__item\"\r\n                    [class.nxe-chart-legend__item--off]=\"item.hidden\"\r\n                    [attr.aria-pressed]=\"!item.hidden\"\r\n                    (click)=\"toggled.emit(item.key)\">\r\n                    <span class=\"nxe-chart-legend__swatch\" aria-hidden=\"true\" [style.--nxe-chart-swatch]=\"item.color\"></span>\r\n                    <span class=\"nxe-chart-legend__label\">{{ item.label }}</span>\r\n                    @if (item.value) {\r\n                        <span class=\"nxe-chart-legend__value\">{{ item.value }}</span>\r\n                    }\r\n                </button>\r\n            } @else {\r\n                <span class=\"nxe-chart-legend__item\">\r\n                    <span class=\"nxe-chart-legend__swatch\" aria-hidden=\"true\" [style.--nxe-chart-swatch]=\"item.color\"></span>\r\n                    <span class=\"nxe-chart-legend__label\">{{ item.label }}</span>\r\n                    @if (item.value) {\r\n                        <span class=\"nxe-chart-legend__value\">{{ item.value }}</span>\r\n                    }\r\n                </span>\r\n            }\r\n        </li>\r\n    }\r\n</ul>\r\n", styles: [".nxe-chart-legend{display:block}.nxe-chart-legend__list{display:flex;flex-wrap:wrap;gap:var(--nxe-ui-space-1, 4px) var(--nxe-ui-space-3, 12px);margin:0;padding:0;list-style:none}.nxe-chart-legend__item{display:inline-flex;align-items:center;gap:var(--nxe-ui-space-2, 8px);margin:0;padding:2px 6px;border:0;border-radius:var(--nxe-ui-radius, 4px);background:transparent;color:var(--nxe-ui-text);font:inherit;font-size:var(--nxe-ui-font-size-sm, 13px);line-height:var(--nxe-ui-line-height-sm, 18px)}button.nxe-chart-legend__item{cursor:pointer}button.nxe-chart-legend__item:hover{background:var(--nxe-ui-hover-bg)}button.nxe-chart-legend__item:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}.nxe-chart-legend__swatch{flex:none;box-sizing:border-box;width:10px;height:10px;border:2px solid var(--nxe-chart-swatch);border-radius:2px;background:var(--nxe-chart-swatch)}.nxe-chart-legend__item--off{color:var(--nxe-ui-text-muted)}.nxe-chart-legend__item--off .nxe-chart-legend__swatch{background:transparent}.nxe-chart-legend__value{color:var(--nxe-ui-neutral-600);font-variant-numeric:tabular-nums}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeChartLegendComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-chart-legend', host: { class: 'nxe-chart-legend' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ul class=\"nxe-chart-legend__list\" [attr.aria-label]=\"label() || null\">\r\n    @for (item of items(); track item.key) {\r\n        <li class=\"nxe-chart-legend__entry\">\r\n            @if (toggleable()) {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-chart-legend__item\"\r\n                    [class.nxe-chart-legend__item--off]=\"item.hidden\"\r\n                    [attr.aria-pressed]=\"!item.hidden\"\r\n                    (click)=\"toggled.emit(item.key)\">\r\n                    <span class=\"nxe-chart-legend__swatch\" aria-hidden=\"true\" [style.--nxe-chart-swatch]=\"item.color\"></span>\r\n                    <span class=\"nxe-chart-legend__label\">{{ item.label }}</span>\r\n                    @if (item.value) {\r\n                        <span class=\"nxe-chart-legend__value\">{{ item.value }}</span>\r\n                    }\r\n                </button>\r\n            } @else {\r\n                <span class=\"nxe-chart-legend__item\">\r\n                    <span class=\"nxe-chart-legend__swatch\" aria-hidden=\"true\" [style.--nxe-chart-swatch]=\"item.color\"></span>\r\n                    <span class=\"nxe-chart-legend__label\">{{ item.label }}</span>\r\n                    @if (item.value) {\r\n                        <span class=\"nxe-chart-legend__value\">{{ item.value }}</span>\r\n                    }\r\n                </span>\r\n            }\r\n        </li>\r\n    }\r\n</ul>\r\n", styles: [".nxe-chart-legend{display:block}.nxe-chart-legend__list{display:flex;flex-wrap:wrap;gap:var(--nxe-ui-space-1, 4px) var(--nxe-ui-space-3, 12px);margin:0;padding:0;list-style:none}.nxe-chart-legend__item{display:inline-flex;align-items:center;gap:var(--nxe-ui-space-2, 8px);margin:0;padding:2px 6px;border:0;border-radius:var(--nxe-ui-radius, 4px);background:transparent;color:var(--nxe-ui-text);font:inherit;font-size:var(--nxe-ui-font-size-sm, 13px);line-height:var(--nxe-ui-line-height-sm, 18px)}button.nxe-chart-legend__item{cursor:pointer}button.nxe-chart-legend__item:hover{background:var(--nxe-ui-hover-bg)}button.nxe-chart-legend__item:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}.nxe-chart-legend__swatch{flex:none;box-sizing:border-box;width:10px;height:10px;border:2px solid var(--nxe-chart-swatch);border-radius:2px;background:var(--nxe-chart-swatch)}.nxe-chart-legend__item--off{color:var(--nxe-ui-text-muted)}.nxe-chart-legend__item--off .nxe-chart-legend__swatch{background:transparent}.nxe-chart-legend__value{color:var(--nxe-ui-neutral-600);font-variant-numeric:tabular-nums}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
+
+const MARGIN_TOP = 12;
+const MARGIN_RIGHT = 16;
+const MARGIN_BOTTOM = 30;
+const INSET = 10;
+const FALLBACK_WIDTH = 480;
+const CHAR_WIDTH = 6.6;
+/**
+ * `nxe-line-chart` draws one or more series as lines over a category or time x axis.
+ *
+ * ```html
+ * <nxe-line-chart
+ *     heading="Purchases per month"
+ *     [categories]="months"
+ *     [series]="[{ name: 'Total', values: totals }]"
+ *     xType="time"
+ *     xFormat="MMM yyyy" />
+ * ```
+ *
+ * It is SVG rendered by the template from computed scales: no chart library. It follows its
+ * container's width (ResizeObserver), takes colours from the `--nxe-ui-chart-1..8` tokens in
+ * order (so light and dark both validate), writes numbers with `NXE_NUMBER_SEPARATORS` and dates
+ * with Luxon in the active locale, leaves a gap where a value is `null`, and shows:
+ *
+ * - a legend (two series or more) whose entries hide and show a series from the keyboard;
+ * - a crosshair tooltip on hover, and on focus: Tab to the plot, then Left, Right, Home, End and
+ *   Esc move through the points, and the values are announced;
+ * - `role="img"` with a text summary (range, first, last, lowest and highest per series), and the
+ *   data as a visually hidden table that the "View as table" button shows in place of the plot;
+ * - `nxe-skeleton` while `loading`, and `nxe-empty-state` when there is nothing to draw.
+ *
+ * `area` fills under each line (`nxe-area-chart` is the same with `area` on); with `stacked` the
+ * series stack and a missing value counts as 0. Categories must be in ascending order on a time
+ * axis. Values are numbers in the unit of the axis: scale them first if the unit differs.
+ */
+class NxeLineChartComponent {
+    host = inject(ElementRef).nativeElement;
+    messages = nxeChartMessages();
+    formatter = nxeChartNumberFormatter();
+    /** The series to draw, in palette order. Up to 8 take a palette colour; give more a `color`. */
+    series = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    /** One entry per point along the x axis; a series' `values` line up with it by index. */
+    categories = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+    /** `category` spaces points evenly; `time` places them by date (Luxon parses strings, Dates and DateTimes). */
+    xType = input('category', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xType" }] : /* istanbul ignore next */ []));
+    /** Luxon format of a date label, in the active locale. Default `dd-MMM-yyyy`. */
+    xFormat = input(NXE_DEFAULT_DISPLAY_FORMAT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xFormat" }] : /* istanbul ignore next */ []));
+    /** Number pattern for values in the tooltip, summary and table. Default `#,##0.##`. */
+    valueFormat = input('#,##0.##', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    /** Number pattern for the y axis; by default as many decimals as the tick step needs. */
+    axisFormat = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "axisFormat" }] : /* istanbul ignore next */ []));
+    /** About how many y ticks. */
+    yTicks = input(5, { ...(ngDevMode ? { debugName: "yTicks" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(2, Math.floor(numberAttribute(v, 5))) });
+    /** Start the y axis at 0 when every value is positive. Areas always do. */
+    includeZero = input(true, { ...(ngDevMode ? { debugName: "includeZero" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Fill under each line. */
+    area = input(false, { ...(ngDevMode ? { debugName: "area" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** With `area`: stack the series instead of overlaying them. */
+    stacked = input(false, { ...(ngDevMode ? { debugName: "stacked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Visible title above the chart; also the start of its accessible summary. */
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Extra sentence for the accessible summary, e.g. what to take away from the chart. */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Height of the plot in px. */
+    height = input(280, { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(120, numberAttribute(v, 280)) });
+    /** Fixed width in px; by default the chart fills its container. */
+    width = input(undefined, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: (v) => (v === undefined || v === null || v === '' ? undefined : numberAttribute(v, FALLBACK_WIDTH)) });
+    /** Show the skeleton instead of the plot. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The legend: by default shown for two series or more. */
+    showLegend = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+    /** Offer the "View as table" button. */
+    showTableToggle = input(true, { ...(ngDevMode ? { debugName: "showTableToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Keys of the series the legend has hidden; two-way. */
+    hidden = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    /** `nxe-area-chart` turns this on. */
+    areaForced = false;
+    uid = nxeChartId('nxe-chart');
+    measured = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measured" }] : /* istanbul ignore next */ []));
+    hoverIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverIndex" }] : /* istanbul ignore next */ []));
+    keyboardIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardIndex" }] : /* istanbul ignore next */ []));
+    tableShown = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableShown" }] : /* istanbul ignore next */ []));
+    constructor() {
+        nxeObserveWidth(this.host, (w) => this.measured.set(w));
+    }
+    // ---- data ------------------------------------------------------------------------------
+    isTime = computed(() => this.xType() === 'time' &&
+        this.categories().length > 0 &&
+        this.categories().every((c) => this.toDate(c) !== null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTime" }] : /* istanbul ignore next */ []));
+    isArea = computed(() => this.areaForced || this.area(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isArea" }] : /* istanbul ignore next */ []));
+    isStacked = computed(() => this.isArea() && this.stacked(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isStacked" }] : /* istanbul ignore next */ []));
+    /** Number of points along x. */
+    count = computed(() => this.series().reduce((m, s) => Math.max(m, s.values.length), this.categories().length), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    labels = computed(() => {
+        const categories = this.categories();
+        const locale = this.messages.locale();
+        const format = this.xFormat();
+        const time = this.isTime();
+        return Array.from({ length: this.count() }, (_, i) => {
+            const c = categories[i];
+            if (c === undefined) {
+                return String(i + 1);
+            }
+            if (time || c instanceof Date || DateTime.isDateTime(c)) {
+                return formatDisplay(this.toDate(c), format, locale);
+            }
+            return String(c);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    xs = computed(() => {
+        const categories = this.categories();
+        const time = this.isTime();
+        return Array.from({ length: this.count() }, (_, i) => (time ? (this.toDate(categories[i])?.toMillis() ?? i) : i));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xs" }] : /* istanbul ignore next */ []));
+    entries = computed(() => {
+        const hidden = this.hidden();
+        return this.series().map((s, slot) => {
+            const key = s.key ?? s.name;
+            return { s, key, slot, color: s.color ?? nxeChartColor(slot), hidden: hidden.includes(key) };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    visible = computed(() => this.entries().filter((e) => !e.hidden), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    empty = computed(() => !this.series().some((s) => s.values.some((v) => typeof v === 'number' && isFinite(v))), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    stack = computed(() => this.isStacked() ? stackValues(this.visible().map((e) => e.s.values)) : [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stack" }] : /* istanbul ignore next */ []));
+    // ---- scales ----------------------------------------------------------------------------
+    domain = computed(() => {
+        let lo = Infinity;
+        let hi = -Infinity;
+        if (this.isStacked()) {
+            lo = 0;
+            for (const band of this.stack()) {
+                for (const v of band.upper) {
+                    hi = Math.max(hi, v);
+                }
+            }
+        }
+        else {
+            for (const e of this.visible()) {
+                for (const v of e.s.values) {
+                    if (typeof v === 'number' && isFinite(v)) {
+                        lo = Math.min(lo, v);
+                        hi = Math.max(hi, v);
+                    }
+                }
+            }
+            if (this.isArea() || (this.includeZero() && lo > 0)) {
+                lo = Math.min(lo, 0);
+            }
+            if (this.isArea() && hi < 0) {
+                hi = 0;
+            }
+        }
+        return isFinite(lo) && isFinite(hi) ? niceScale(lo, hi, this.yTicks()) : niceScale(0, 1, this.yTicks());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "domain" }] : /* istanbul ignore next */ []));
+    axisPattern = computed(() => this.axisFormat() ?? patternForDecimals(decimalsOf(this.domain().step)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "axisPattern" }] : /* istanbul ignore next */ []));
+    yLabels = computed(() => {
+        const pattern = this.axisPattern();
+        return this.domain().ticks.map((t) => this.formatter(t, pattern));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yLabels" }] : /* istanbul ignore next */ []));
+    svgWidth = computed(() => Math.max(160, this.width() ?? (this.measured() || FALLBACK_WIDTH)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svgWidth" }] : /* istanbul ignore next */ []));
+    svgHeight = computed(() => this.height() + MARGIN_TOP + MARGIN_BOTTOM, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []));
+    left = computed(() => Math.ceil(this.yLabels().reduce((m, l) => Math.max(m, l.length), 1) * CHAR_WIDTH) + 16, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "left" }] : /* istanbul ignore next */ []));
+    plotRight = computed(() => this.svgWidth() - MARGIN_RIGHT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plotRight" }] : /* istanbul ignore next */ []));
+    plotBottom = computed(() => MARGIN_TOP + this.height(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plotBottom" }] : /* istanbul ignore next */ []));
+    xScale = computed(() => {
+        const xs = this.xs();
+        const lo = xs.length ? xs[0] : 0;
+        const hi = xs.length ? xs[xs.length - 1] : 1;
+        return linearScale(lo, hi, this.left() + INSET, this.plotRight() - INSET);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xScale" }] : /* istanbul ignore next */ []));
+    yScale = computed(() => {
+        const d = this.domain();
+        return linearScale(d.min, d.max, this.plotBottom(), MARGIN_TOP);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yScale" }] : /* istanbul ignore next */ []));
+    /** Pixel x of each point. */
+    xPx = computed(() => {
+        const scale = this.xScale();
+        return this.xs().map((x) => scale(x));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xPx" }] : /* istanbul ignore next */ []));
+    yGrid = computed(() => {
+        const scale = this.yScale();
+        const labels = this.yLabels();
+        return this.domain().ticks.map((tick, i) => ({ y: scale(tick), label: labels[i], zero: tick === 0 }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yGrid" }] : /* istanbul ignore next */ []));
+    xTicks = computed(() => {
+        const labels = this.labels();
+        const px = this.xPx();
+        const widest = labels.reduce((m, l) => Math.max(m, l.length), 1) * CHAR_WIDTH + 18;
+        const room = Math.max(1, Math.floor((this.plotRight() - this.left()) / widest));
+        return labelIndexes(labels.length, room).map((i) => ({ x: px[i], text: labels[i] }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xTicks" }] : /* istanbul ignore next */ []));
+    // ---- marks -----------------------------------------------------------------------------
+    lines = computed(() => {
+        const px = this.xPx();
+        const y = this.yScale();
+        const d = this.domain();
+        const base = y(Math.min(Math.max(0, d.min), d.max));
+        const stacked = this.isStacked();
+        const stack = this.stack();
+        const area = this.isArea();
+        return this.visible().map((e, band) => {
+            const top = [];
+            const bottom = [];
+            for (let i = 0; i < px.length; i++) {
+                const v = e.s.values[i];
+                if (stacked) {
+                    top.push({ x: px[i], y: y(stack[band].upper[i]) });
+                    bottom.push({ x: px[i], y: y(stack[band].lower[i]) });
+                }
+                else {
+                    top.push(typeof v === 'number' && isFinite(v) ? { x: px[i], y: y(v) } : null);
+                }
+            }
+            const markers = top.flatMap((p, index) => p && (!stacked || typeof e.s.values[index] === 'number') ? [{ x: p.x, y: p.y, index }] : []);
+            return {
+                key: e.key,
+                name: e.s.name,
+                color: e.color,
+                line: linePath(top),
+                area: area ? areaPath(top, stacked ? bottom : base) : '',
+                markers,
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    /** Markers on every point while there are few enough to tell apart; otherwise only the active one. */
+    showAllMarkers = computed(() => {
+        const n = this.count();
+        return n > 0 && (this.plotRight() - this.left()) / Math.max(1, n - 1) >= 18;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAllMarkers" }] : /* istanbul ignore next */ []));
+    // ---- interaction -----------------------------------------------------------------------
+    activeIndex = computed(() => this.hoverIndex() ?? this.keyboardIndex(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    tooltip = computed(() => {
+        const index = this.activeIndex();
+        if (index === null || index >= this.count()) {
+            return null;
+        }
+        const pattern = this.valueFormat();
+        const noValue = this.messages.t('display.noValue');
+        const rows = this.visible().map((e) => {
+            const v = e.s.values[index];
+            return {
+                key: e.key,
+                name: e.s.name,
+                color: e.color,
+                value: typeof v === 'number' && isFinite(v) ? this.formatter(v, pattern) : noValue,
+            };
+        });
+        const x = this.xPx()[index];
+        const width = this.svgWidth();
+        const align = x < 100 ? 'start' : x > width - 100 ? 'end' : 'center';
+        return { title: this.labels()[index], rows, x, index, align };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    /** What a screen reader hears when keyboard focus lands on a point. */
+    announcement = computed(() => {
+        const t = this.keyboardIndex() === null ? null : this.tooltip();
+        return t ? `${t.title}: ${t.rows.map((r) => `${r.name} ${r.value}`).join(', ')}` : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    onPointerMove(event) {
+        const rect = event.currentTarget.getBoundingClientRect();
+        const i = nearestIndex(this.xPx(), event.clientX - rect.left);
+        this.hoverIndex.set(i < 0 ? null : i);
+    }
+    onPointerLeave() {
+        this.hoverIndex.set(null);
+    }
+    onFocus() {
+        if (this.keyboardIndex() === null && this.hoverIndex() === null) {
+            this.keyboardIndex.set(0);
+        }
+    }
+    onBlur() {
+        this.keyboardIndex.set(null);
+    }
+    onKeydown(event) {
+        const last = this.count() - 1;
+        const current = this.keyboardIndex() ?? 0;
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                next = Math.min(last, current + 1);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                next = Math.max(0, current - 1);
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = last;
+                break;
+            case 'Escape':
+                next = null;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.hoverIndex.set(null);
+        this.keyboardIndex.set(next);
+    }
+    // ---- legend, table, summary ------------------------------------------------------------
+    legendItems = computed(() => this.entries().map((e) => ({ key: e.key, label: e.s.name, color: e.color, hidden: e.hidden })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
+    legendShown = computed(() => {
+        const mode = this.showLegend();
+        return mode === 'auto' ? this.series().length > 1 : mode;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendShown" }] : /* istanbul ignore next */ []));
+    toggleSeries(key) {
+        const hidden = this.hidden();
+        this.hidden.set(hidden.includes(key) ? hidden.filter((k) => k !== key) : [...hidden, key]);
+    }
+    tableColumns = computed(() => this.series().map((s) => s.name), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableColumns" }] : /* istanbul ignore next */ []));
+    tableRows = computed(() => {
+        const labels = this.labels();
+        const pattern = this.valueFormat();
+        const noValue = this.messages.t('display.noValue');
+        return labels.map((header, i) => ({
+            header,
+            cells: this.series().map((s) => {
+                const v = s.values[i];
+                return typeof v === 'number' && isFinite(v) ? this.formatter(v, pattern) : noValue;
+            }),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableRows" }] : /* istanbul ignore next */ []));
+    summary = computed(() => {
+        const m = this.messages;
+        const labels = this.labels();
+        const pattern = this.valueFormat();
+        const kind = this.isStacked()
+            ? 'charts.summary.stackedArea'
+            : this.isArea()
+                ? 'charts.summary.area'
+                : 'charts.summary.line';
+        const parts = [];
+        if (this.heading()) {
+            parts.push(`${this.heading()}.`);
+        }
+        parts.push(m.t(kind, this.series().length, labels.length, labels[0] ?? '', labels[labels.length - 1] ?? ''));
+        for (const s of this.series()) {
+            const nums = s.values.filter((v) => typeof v === 'number' && isFinite(v));
+            if (nums.length) {
+                const f = (v) => this.formatter(v, pattern);
+                parts.push(m.t('charts.summary.series', s.name, f(nums[0]), f(nums[nums.length - 1]), f(Math.min(...nums)), f(Math.max(...nums))));
+            }
+        }
+        if (this.description()) {
+            parts.push(this.description());
+        }
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    toggleTable() {
+        this.tableShown.update((v) => !v);
+    }
+    toDate(value) {
+        if (typeof value === 'number') {
+            const dt = DateTime.fromMillis(value);
+            return dt.isValid ? dt : null;
+        }
+        return parseDateValue(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeLineChartComponent, isStandalone: true, selector: "nxe-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, xType: { classPropertyName: "xType", publicName: "xType", isSignal: true, isRequired: false, transformFunction: null }, xFormat: { classPropertyName: "xFormat", publicName: "xFormat", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, yTicks: { classPropertyName: "yTicks", publicName: "yTicks", isSignal: true, isRequired: false, transformFunction: null }, includeZero: { classPropertyName: "includeZero", publicName: "includeZero", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showTableToggle: { classPropertyName: "showTableToggle", publicName: "showTableToggle", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange" }, host: { classAttribute: "nxe-chart nxe-line-chart" }, ngImport: i0, template: "<figure class=\"nxe-chart__figure\" [attr.aria-busy]=\"loading() ? 'true' : null\">\r\n    @if (heading()) {\r\n        <figcaption class=\"nxe-chart__heading\">{{ heading() }}</figcaption>\r\n    }\r\n    @if (loading()) {\r\n        <nxe-skeleton variant=\"rect\" width=\"100%\" [height]=\"svgHeight()\" />\r\n    } @else if (empty()) {\r\n        <nxe-empty-state class=\"nxe-chart__empty\" [heading]=\"messages.t('charts.empty')\" [headingLevel]=\"4\" />\r\n    } @else {\r\n        @if (showTableToggle()) {\r\n            <div class=\"nxe-chart__toolbar\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-chart__toggle\"\r\n                    [attr.aria-controls]=\"uid + '-table'\"\r\n                    (click)=\"toggleTable()\">\r\n                    {{ messages.t(tableShown() ? 'charts.viewAsChart' : 'charts.viewAsTable') }}\r\n                </button>\r\n            </div>\r\n        }\r\n        <div class=\"nxe-chart__stage\" [hidden]=\"tableShown()\">\r\n            <svg\r\n                class=\"nxe-chart__svg\"\r\n                role=\"img\"\r\n                [attr.aria-label]=\"summary()\"\r\n                [attr.width]=\"svgWidth()\"\r\n                [attr.height]=\"svgHeight()\"\r\n                [attr.viewBox]=\"'0 0 ' + svgWidth() + ' ' + svgHeight()\">\r\n                @for (g of yGrid(); track $index) {\r\n                    <line\r\n                        class=\"nxe-chart__grid\"\r\n                        [class.nxe-chart__grid--zero]=\"g.zero\"\r\n                        [attr.x1]=\"left()\"\r\n                        [attr.x2]=\"plotRight()\"\r\n                        [attr.y1]=\"g.y\"\r\n                        [attr.y2]=\"g.y\" />\r\n                    <text class=\"nxe-chart__tick\" text-anchor=\"end\" [attr.x]=\"left() - 8\" [attr.y]=\"g.y\" dy=\"0.32em\">{{ g.label }}</text>\r\n                }\r\n                @for (t of xTicks(); track $index) {\r\n                    <text class=\"nxe-chart__tick\" text-anchor=\"middle\" [attr.x]=\"t.x\" [attr.y]=\"plotBottom() + 18\">{{ t.text }}</text>\r\n                }\r\n                @for (l of lines(); track l.key) {\r\n                    @if (l.area) {\r\n                        <path\r\n                            class=\"nxe-chart__area\"\r\n                            [class.nxe-chart__area--stacked]=\"isStacked()\"\r\n                            [attr.d]=\"l.area\"\r\n                            [style.fill]=\"l.color\" />\r\n                    }\r\n                }\r\n                @for (l of lines(); track l.key) {\r\n                    <path class=\"nxe-chart__line\" [attr.d]=\"l.line\" [style.stroke]=\"l.color\" />\r\n                    @for (m of l.markers; track m.index) {\r\n                        @if (showAllMarkers() || l.markers.length === 1 || m.index === activeIndex()) {\r\n                            <circle class=\"nxe-chart__marker\" [attr.cx]=\"m.x\" [attr.cy]=\"m.y\" r=\"4\" [style.fill]=\"l.color\" />\r\n                        }\r\n                    }\r\n                }\r\n                @if (tooltip(); as tip) {\r\n                    <line class=\"nxe-chart__crosshair\" [attr.x1]=\"tip.x\" [attr.x2]=\"tip.x\" [attr.y1]=\"marginTop\" [attr.y2]=\"plotBottom()\" />\r\n                    @for (l of lines(); track l.key) {\r\n                        @for (m of l.markers; track m.index) {\r\n                            @if (m.index === tip.index) {\r\n                                <circle class=\"nxe-chart__marker nxe-chart__marker--active\" [attr.cx]=\"m.x\" [attr.cy]=\"m.y\" r=\"5\" [style.fill]=\"l.color\" />\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            </svg>\r\n            <div\r\n                class=\"nxe-chart__focus\"\r\n                role=\"group\"\r\n                tabindex=\"0\"\r\n                [attr.aria-label]=\"messages.t('charts.navigate')\"\r\n                (pointermove)=\"onPointerMove($event)\"\r\n                (pointerleave)=\"onPointerLeave()\"\r\n                (focus)=\"onFocus()\"\r\n                (blur)=\"onBlur()\"\r\n                (keydown)=\"onKeydown($event)\"></div>\r\n            @if (tooltip(); as tip) {\r\n                <div\r\n                    class=\"nxe-chart__tooltip\"\r\n                    role=\"tooltip\"\r\n                    [class.nxe-chart__tooltip--start]=\"tip.align === 'start'\"\r\n                    [class.nxe-chart__tooltip--end]=\"tip.align === 'end'\"\r\n                    [style.left.px]=\"tip.x\"\r\n                    [style.top.px]=\"marginTop\">\r\n                    <div class=\"nxe-chart__tooltip-title\">{{ tip.title }}</div>\r\n                    @for (r of tip.rows; track r.key) {\r\n                        <div class=\"nxe-chart__tooltip-row\">\r\n                            <span class=\"nxe-chart__swatch\" aria-hidden=\"true\" [style.background]=\"r.color\"></span>\r\n                            <span class=\"nxe-chart__tooltip-name\">{{ r.name }}</span>\r\n                            <span class=\"nxe-chart__tooltip-value\">{{ r.value }}</span>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            }\r\n            <div class=\"nxe-chart__sr\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\r\n        </div>\r\n        <div [id]=\"uid + '-table'\" [class.nxe-chart__sr]=\"!tableShown()\">\r\n            <nxe-chart-data-table\r\n                [caption]=\"heading()\"\r\n                [corner]=\"messages.t('charts.table.category')\"\r\n                [columns]=\"tableColumns()\"\r\n                [rows]=\"tableRows()\" />\r\n        </div>\r\n        @if (legendShown()) {\r\n            <nxe-chart-legend [items]=\"legendItems()\" [label]=\"messages.t('charts.legend')\" (toggled)=\"toggleSeries($event)\" />\r\n        }\r\n    }\r\n</figure>\r\n", styles: [".nxe-chart{display:block;width:100%;min-width:0;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}.nxe-chart__figure{display:flex;flex-direction:column;gap:var(--nxe-ui-space-2, 8px);margin:0}.nxe-chart__heading{color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-lg, 16px);font-weight:var(--nxe-ui-font-weight-semibold, 600);line-height:var(--nxe-ui-line-height-lg, 24px)}.nxe-chart__toolbar{display:flex;justify-content:flex-end}.nxe-chart__toggle{margin:0;padding:2px 8px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface);color:var(--nxe-ui-text);font:inherit;font-size:var(--nxe-ui-font-size-xs, 12px);cursor:pointer}.nxe-chart__toggle:hover{background:var(--nxe-ui-hover-bg)}.nxe-chart__toggle:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}.nxe-chart__stage{position:relative;max-width:100%;overflow:visible}.nxe-chart__stage[hidden]{display:none}.nxe-chart__svg{display:block;max-width:100%;overflow:visible}.nxe-chart__focus{position:absolute;inset:0;border-radius:var(--nxe-ui-radius, 4px);outline:none;touch-action:pan-y}.nxe-chart__focus:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:2px}.nxe-chart__grid{stroke:var(--nxe-ui-neutral-150);stroke-width:1;shape-rendering:crispEdges}.nxe-chart__grid--zero{stroke:var(--nxe-ui-neutral-240)}.nxe-chart__tick{fill:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-xs, 12px);font-variant-numeric:tabular-nums}.nxe-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nxe-chart__area{fill-opacity:.16;stroke:none}.nxe-chart__area--stacked{fill-opacity:.9;stroke:var(--nxe-ui-surface);stroke-width:2;stroke-linejoin:round}.nxe-chart__marker{stroke:var(--nxe-ui-surface);stroke-width:2}.nxe-chart__crosshair{stroke:var(--nxe-ui-neutral-450);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}.nxe-chart__tooltip{position:absolute;z-index:2;min-width:120px;max-width:260px;padding:6px 10px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-md, 6px);background:var(--nxe-ui-surface);box-shadow:var(--nxe-ui-shadow-sm);color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-xs, 12px);line-height:var(--nxe-ui-line-height-xs, 16px);pointer-events:none;transform:translate(-50%)}.nxe-chart__tooltip.nxe-chart__tooltip--start{transform:translate(12px)}.nxe-chart__tooltip.nxe-chart__tooltip--end{transform:translate(calc(-100% - 12px))}.nxe-chart__tooltip-title{margin-bottom:2px;font-weight:var(--nxe-ui-font-weight-semibold, 600)}.nxe-chart__tooltip-row{display:flex;align-items:center;gap:var(--nxe-ui-space-2, 8px)}.nxe-chart__tooltip-name{flex:1;min-width:0;overflow:hidden;color:var(--nxe-ui-neutral-700);text-overflow:ellipsis;white-space:nowrap}.nxe-chart__tooltip-value{font-variant-numeric:tabular-nums;font-weight:var(--nxe-ui-font-weight-medium, 500)}.nxe-chart__swatch{flex:none;width:10px;height:10px;border-radius:2px}.nxe-chart__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip-path:inset(50%);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: NxeChartLegendComponent, selector: "nxe-chart-legend", inputs: ["items", "label", "toggleable"], outputs: ["toggled"] }, { kind: "component", type: NxeChartDataTableComponent, selector: "nxe-chart-data-table", inputs: ["caption", "corner", "columns", "rows"] }, { kind: "component", type: NxeSkeletonComponent, selector: "nxe-skeleton", inputs: ["variant", "width", "height", "lines", "animated"] }, { kind: "component", type: NxeEmptyStateComponent, selector: "nxe-empty-state", inputs: ["heading", "description", "headingLevel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeLineChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-line-chart', imports: [NxeChartLegendComponent, NxeChartDataTableComponent, NxeSkeletonComponent, NxeEmptyStateComponent], host: { class: 'nxe-chart nxe-line-chart' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<figure class=\"nxe-chart__figure\" [attr.aria-busy]=\"loading() ? 'true' : null\">\r\n    @if (heading()) {\r\n        <figcaption class=\"nxe-chart__heading\">{{ heading() }}</figcaption>\r\n    }\r\n    @if (loading()) {\r\n        <nxe-skeleton variant=\"rect\" width=\"100%\" [height]=\"svgHeight()\" />\r\n    } @else if (empty()) {\r\n        <nxe-empty-state class=\"nxe-chart__empty\" [heading]=\"messages.t('charts.empty')\" [headingLevel]=\"4\" />\r\n    } @else {\r\n        @if (showTableToggle()) {\r\n            <div class=\"nxe-chart__toolbar\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-chart__toggle\"\r\n                    [attr.aria-controls]=\"uid + '-table'\"\r\n                    (click)=\"toggleTable()\">\r\n                    {{ messages.t(tableShown() ? 'charts.viewAsChart' : 'charts.viewAsTable') }}\r\n                </button>\r\n            </div>\r\n        }\r\n        <div class=\"nxe-chart__stage\" [hidden]=\"tableShown()\">\r\n            <svg\r\n                class=\"nxe-chart__svg\"\r\n                role=\"img\"\r\n                [attr.aria-label]=\"summary()\"\r\n                [attr.width]=\"svgWidth()\"\r\n                [attr.height]=\"svgHeight()\"\r\n                [attr.viewBox]=\"'0 0 ' + svgWidth() + ' ' + svgHeight()\">\r\n                @for (g of yGrid(); track $index) {\r\n                    <line\r\n                        class=\"nxe-chart__grid\"\r\n                        [class.nxe-chart__grid--zero]=\"g.zero\"\r\n                        [attr.x1]=\"left()\"\r\n                        [attr.x2]=\"plotRight()\"\r\n                        [attr.y1]=\"g.y\"\r\n                        [attr.y2]=\"g.y\" />\r\n                    <text class=\"nxe-chart__tick\" text-anchor=\"end\" [attr.x]=\"left() - 8\" [attr.y]=\"g.y\" dy=\"0.32em\">{{ g.label }}</text>\r\n                }\r\n                @for (t of xTicks(); track $index) {\r\n                    <text class=\"nxe-chart__tick\" text-anchor=\"middle\" [attr.x]=\"t.x\" [attr.y]=\"plotBottom() + 18\">{{ t.text }}</text>\r\n                }\r\n                @for (l of lines(); track l.key) {\r\n                    @if (l.area) {\r\n                        <path\r\n                            class=\"nxe-chart__area\"\r\n                            [class.nxe-chart__area--stacked]=\"isStacked()\"\r\n                            [attr.d]=\"l.area\"\r\n                            [style.fill]=\"l.color\" />\r\n                    }\r\n                }\r\n                @for (l of lines(); track l.key) {\r\n                    <path class=\"nxe-chart__line\" [attr.d]=\"l.line\" [style.stroke]=\"l.color\" />\r\n                    @for (m of l.markers; track m.index) {\r\n                        @if (showAllMarkers() || l.markers.length === 1 || m.index === activeIndex()) {\r\n                            <circle class=\"nxe-chart__marker\" [attr.cx]=\"m.x\" [attr.cy]=\"m.y\" r=\"4\" [style.fill]=\"l.color\" />\r\n                        }\r\n                    }\r\n                }\r\n                @if (tooltip(); as tip) {\r\n                    <line class=\"nxe-chart__crosshair\" [attr.x1]=\"tip.x\" [attr.x2]=\"tip.x\" [attr.y1]=\"marginTop\" [attr.y2]=\"plotBottom()\" />\r\n                    @for (l of lines(); track l.key) {\r\n                        @for (m of l.markers; track m.index) {\r\n                            @if (m.index === tip.index) {\r\n                                <circle class=\"nxe-chart__marker nxe-chart__marker--active\" [attr.cx]=\"m.x\" [attr.cy]=\"m.y\" r=\"5\" [style.fill]=\"l.color\" />\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            </svg>\r\n            <div\r\n                class=\"nxe-chart__focus\"\r\n                role=\"group\"\r\n                tabindex=\"0\"\r\n                [attr.aria-label]=\"messages.t('charts.navigate')\"\r\n                (pointermove)=\"onPointerMove($event)\"\r\n                (pointerleave)=\"onPointerLeave()\"\r\n                (focus)=\"onFocus()\"\r\n                (blur)=\"onBlur()\"\r\n                (keydown)=\"onKeydown($event)\"></div>\r\n            @if (tooltip(); as tip) {\r\n                <div\r\n                    class=\"nxe-chart__tooltip\"\r\n                    role=\"tooltip\"\r\n                    [class.nxe-chart__tooltip--start]=\"tip.align === 'start'\"\r\n                    [class.nxe-chart__tooltip--end]=\"tip.align === 'end'\"\r\n                    [style.left.px]=\"tip.x\"\r\n                    [style.top.px]=\"marginTop\">\r\n                    <div class=\"nxe-chart__tooltip-title\">{{ tip.title }}</div>\r\n                    @for (r of tip.rows; track r.key) {\r\n                        <div class=\"nxe-chart__tooltip-row\">\r\n                            <span class=\"nxe-chart__swatch\" aria-hidden=\"true\" [style.background]=\"r.color\"></span>\r\n                            <span class=\"nxe-chart__tooltip-name\">{{ r.name }}</span>\r\n                            <span class=\"nxe-chart__tooltip-value\">{{ r.value }}</span>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            }\r\n            <div class=\"nxe-chart__sr\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\r\n        </div>\r\n        <div [id]=\"uid + '-table'\" [class.nxe-chart__sr]=\"!tableShown()\">\r\n            <nxe-chart-data-table\r\n                [caption]=\"heading()\"\r\n                [corner]=\"messages.t('charts.table.category')\"\r\n                [columns]=\"tableColumns()\"\r\n                [rows]=\"tableRows()\" />\r\n        </div>\r\n        @if (legendShown()) {\r\n            <nxe-chart-legend [items]=\"legendItems()\" [label]=\"messages.t('charts.legend')\" (toggled)=\"toggleSeries($event)\" />\r\n        }\r\n    }\r\n</figure>\r\n", styles: [".nxe-chart{display:block;width:100%;min-width:0;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}.nxe-chart__figure{display:flex;flex-direction:column;gap:var(--nxe-ui-space-2, 8px);margin:0}.nxe-chart__heading{color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-lg, 16px);font-weight:var(--nxe-ui-font-weight-semibold, 600);line-height:var(--nxe-ui-line-height-lg, 24px)}.nxe-chart__toolbar{display:flex;justify-content:flex-end}.nxe-chart__toggle{margin:0;padding:2px 8px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface);color:var(--nxe-ui-text);font:inherit;font-size:var(--nxe-ui-font-size-xs, 12px);cursor:pointer}.nxe-chart__toggle:hover{background:var(--nxe-ui-hover-bg)}.nxe-chart__toggle:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}.nxe-chart__stage{position:relative;max-width:100%;overflow:visible}.nxe-chart__stage[hidden]{display:none}.nxe-chart__svg{display:block;max-width:100%;overflow:visible}.nxe-chart__focus{position:absolute;inset:0;border-radius:var(--nxe-ui-radius, 4px);outline:none;touch-action:pan-y}.nxe-chart__focus:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:2px}.nxe-chart__grid{stroke:var(--nxe-ui-neutral-150);stroke-width:1;shape-rendering:crispEdges}.nxe-chart__grid--zero{stroke:var(--nxe-ui-neutral-240)}.nxe-chart__tick{fill:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-xs, 12px);font-variant-numeric:tabular-nums}.nxe-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nxe-chart__area{fill-opacity:.16;stroke:none}.nxe-chart__area--stacked{fill-opacity:.9;stroke:var(--nxe-ui-surface);stroke-width:2;stroke-linejoin:round}.nxe-chart__marker{stroke:var(--nxe-ui-surface);stroke-width:2}.nxe-chart__crosshair{stroke:var(--nxe-ui-neutral-450);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}.nxe-chart__tooltip{position:absolute;z-index:2;min-width:120px;max-width:260px;padding:6px 10px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-md, 6px);background:var(--nxe-ui-surface);box-shadow:var(--nxe-ui-shadow-sm);color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-xs, 12px);line-height:var(--nxe-ui-line-height-xs, 16px);pointer-events:none;transform:translate(-50%)}.nxe-chart__tooltip.nxe-chart__tooltip--start{transform:translate(12px)}.nxe-chart__tooltip.nxe-chart__tooltip--end{transform:translate(calc(-100% - 12px))}.nxe-chart__tooltip-title{margin-bottom:2px;font-weight:var(--nxe-ui-font-weight-semibold, 600)}.nxe-chart__tooltip-row{display:flex;align-items:center;gap:var(--nxe-ui-space-2, 8px)}.nxe-chart__tooltip-name{flex:1;min-width:0;overflow:hidden;color:var(--nxe-ui-neutral-700);text-overflow:ellipsis;white-space:nowrap}.nxe-chart__tooltip-value{font-variant-numeric:tabular-nums;font-weight:var(--nxe-ui-font-weight-medium, 500)}.nxe-chart__swatch{flex:none;width:10px;height:10px;border-radius:2px}.nxe-chart__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip-path:inset(50%);white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], xType: [{ type: i0.Input, args: [{ isSignal: true, alias: "xType", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], yTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "yTicks", required: false }] }], includeZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeZero", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showTableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableToggle", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }] } });
+
+/**
+ * `nxe-area-chart` is `nxe-line-chart` with the area under each line filled. It takes every input of
+ * the line chart; add `stacked` to stack the series (a missing value then counts as 0).
+ *
+ * ```html
+ * <nxe-area-chart heading="Spend by month" [categories]="months" [series]="series" stacked />
+ * ```
+ */
+class NxeAreaChartComponent extends NxeLineChartComponent {
+    areaForced = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeAreaChartComponent, isStandalone: true, selector: "nxe-area-chart", host: { classAttribute: "nxe-chart nxe-area-chart" }, usesInheritance: true, ngImport: i0, template: "<figure class=\"nxe-chart__figure\" [attr.aria-busy]=\"loading() ? 'true' : null\">\r\n    @if (heading()) {\r\n        <figcaption class=\"nxe-chart__heading\">{{ heading() }}</figcaption>\r\n    }\r\n    @if (loading()) {\r\n        <nxe-skeleton variant=\"rect\" width=\"100%\" [height]=\"svgHeight()\" />\r\n    } @else if (empty()) {\r\n        <nxe-empty-state class=\"nxe-chart__empty\" [heading]=\"messages.t('charts.empty')\" [headingLevel]=\"4\" />\r\n    } @else {\r\n        @if (showTableToggle()) {\r\n            <div class=\"nxe-chart__toolbar\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-chart__toggle\"\r\n                    [attr.aria-controls]=\"uid + '-table'\"\r\n                    (click)=\"toggleTable()\">\r\n                    {{ messages.t(tableShown() ? 'charts.viewAsChart' : 'charts.viewAsTable') }}\r\n                </button>\r\n            </div>\r\n        }\r\n        <div class=\"nxe-chart__stage\" [hidden]=\"tableShown()\">\r\n            <svg\r\n                class=\"nxe-chart__svg\"\r\n                role=\"img\"\r\n                [attr.aria-label]=\"summary()\"\r\n                [attr.width]=\"svgWidth()\"\r\n                [attr.height]=\"svgHeight()\"\r\n                [attr.viewBox]=\"'0 0 ' + svgWidth() + ' ' + svgHeight()\">\r\n                @for (g of yGrid(); track $index) {\r\n                    <line\r\n                        class=\"nxe-chart__grid\"\r\n                        [class.nxe-chart__grid--zero]=\"g.zero\"\r\n                        [attr.x1]=\"left()\"\r\n                        [attr.x2]=\"plotRight()\"\r\n                        [attr.y1]=\"g.y\"\r\n                        [attr.y2]=\"g.y\" />\r\n                    <text class=\"nxe-chart__tick\" text-anchor=\"end\" [attr.x]=\"left() - 8\" [attr.y]=\"g.y\" dy=\"0.32em\">{{ g.label }}</text>\r\n                }\r\n                @for (t of xTicks(); track $index) {\r\n                    <text class=\"nxe-chart__tick\" text-anchor=\"middle\" [attr.x]=\"t.x\" [attr.y]=\"plotBottom() + 18\">{{ t.text }}</text>\r\n                }\r\n                @for (l of lines(); track l.key) {\r\n                    @if (l.area) {\r\n                        <path\r\n                            class=\"nxe-chart__area\"\r\n                            [class.nxe-chart__area--stacked]=\"isStacked()\"\r\n                            [attr.d]=\"l.area\"\r\n                            [style.fill]=\"l.color\" />\r\n                    }\r\n                }\r\n                @for (l of lines(); track l.key) {\r\n                    <path class=\"nxe-chart__line\" [attr.d]=\"l.line\" [style.stroke]=\"l.color\" />\r\n                    @for (m of l.markers; track m.index) {\r\n                        @if (showAllMarkers() || l.markers.length === 1 || m.index === activeIndex()) {\r\n                            <circle class=\"nxe-chart__marker\" [attr.cx]=\"m.x\" [attr.cy]=\"m.y\" r=\"4\" [style.fill]=\"l.color\" />\r\n                        }\r\n                    }\r\n                }\r\n                @if (tooltip(); as tip) {\r\n                    <line class=\"nxe-chart__crosshair\" [attr.x1]=\"tip.x\" [attr.x2]=\"tip.x\" [attr.y1]=\"marginTop\" [attr.y2]=\"plotBottom()\" />\r\n                    @for (l of lines(); track l.key) {\r\n                        @for (m of l.markers; track m.index) {\r\n                            @if (m.index === tip.index) {\r\n                                <circle class=\"nxe-chart__marker nxe-chart__marker--active\" [attr.cx]=\"m.x\" [attr.cy]=\"m.y\" r=\"5\" [style.fill]=\"l.color\" />\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            </svg>\r\n            <div\r\n                class=\"nxe-chart__focus\"\r\n                role=\"group\"\r\n                tabindex=\"0\"\r\n                [attr.aria-label]=\"messages.t('charts.navigate')\"\r\n                (pointermove)=\"onPointerMove($event)\"\r\n                (pointerleave)=\"onPointerLeave()\"\r\n                (focus)=\"onFocus()\"\r\n                (blur)=\"onBlur()\"\r\n                (keydown)=\"onKeydown($event)\"></div>\r\n            @if (tooltip(); as tip) {\r\n                <div\r\n                    class=\"nxe-chart__tooltip\"\r\n                    role=\"tooltip\"\r\n                    [class.nxe-chart__tooltip--start]=\"tip.align === 'start'\"\r\n                    [class.nxe-chart__tooltip--end]=\"tip.align === 'end'\"\r\n                    [style.left.px]=\"tip.x\"\r\n                    [style.top.px]=\"marginTop\">\r\n                    <div class=\"nxe-chart__tooltip-title\">{{ tip.title }}</div>\r\n                    @for (r of tip.rows; track r.key) {\r\n                        <div class=\"nxe-chart__tooltip-row\">\r\n                            <span class=\"nxe-chart__swatch\" aria-hidden=\"true\" [style.background]=\"r.color\"></span>\r\n                            <span class=\"nxe-chart__tooltip-name\">{{ r.name }}</span>\r\n                            <span class=\"nxe-chart__tooltip-value\">{{ r.value }}</span>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            }\r\n            <div class=\"nxe-chart__sr\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\r\n        </div>\r\n        <div [id]=\"uid + '-table'\" [class.nxe-chart__sr]=\"!tableShown()\">\r\n            <nxe-chart-data-table\r\n                [caption]=\"heading()\"\r\n                [corner]=\"messages.t('charts.table.category')\"\r\n                [columns]=\"tableColumns()\"\r\n                [rows]=\"tableRows()\" />\r\n        </div>\r\n        @if (legendShown()) {\r\n            <nxe-chart-legend [items]=\"legendItems()\" [label]=\"messages.t('charts.legend')\" (toggled)=\"toggleSeries($event)\" />\r\n        }\r\n    }\r\n</figure>\r\n", styles: [".nxe-chart{display:block;width:100%;min-width:0;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}.nxe-chart__figure{display:flex;flex-direction:column;gap:var(--nxe-ui-space-2, 8px);margin:0}.nxe-chart__heading{color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-lg, 16px);font-weight:var(--nxe-ui-font-weight-semibold, 600);line-height:var(--nxe-ui-line-height-lg, 24px)}.nxe-chart__toolbar{display:flex;justify-content:flex-end}.nxe-chart__toggle{margin:0;padding:2px 8px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface);color:var(--nxe-ui-text);font:inherit;font-size:var(--nxe-ui-font-size-xs, 12px);cursor:pointer}.nxe-chart__toggle:hover{background:var(--nxe-ui-hover-bg)}.nxe-chart__toggle:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}.nxe-chart__stage{position:relative;max-width:100%;overflow:visible}.nxe-chart__stage[hidden]{display:none}.nxe-chart__svg{display:block;max-width:100%;overflow:visible}.nxe-chart__focus{position:absolute;inset:0;border-radius:var(--nxe-ui-radius, 4px);outline:none;touch-action:pan-y}.nxe-chart__focus:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:2px}.nxe-chart__grid{stroke:var(--nxe-ui-neutral-150);stroke-width:1;shape-rendering:crispEdges}.nxe-chart__grid--zero{stroke:var(--nxe-ui-neutral-240)}.nxe-chart__tick{fill:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-xs, 12px);font-variant-numeric:tabular-nums}.nxe-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nxe-chart__area{fill-opacity:.16;stroke:none}.nxe-chart__area--stacked{fill-opacity:.9;stroke:var(--nxe-ui-surface);stroke-width:2;stroke-linejoin:round}.nxe-chart__marker{stroke:var(--nxe-ui-surface);stroke-width:2}.nxe-chart__crosshair{stroke:var(--nxe-ui-neutral-450);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}.nxe-chart__tooltip{position:absolute;z-index:2;min-width:120px;max-width:260px;padding:6px 10px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-md, 6px);background:var(--nxe-ui-surface);box-shadow:var(--nxe-ui-shadow-sm);color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-xs, 12px);line-height:var(--nxe-ui-line-height-xs, 16px);pointer-events:none;transform:translate(-50%)}.nxe-chart__tooltip.nxe-chart__tooltip--start{transform:translate(12px)}.nxe-chart__tooltip.nxe-chart__tooltip--end{transform:translate(calc(-100% - 12px))}.nxe-chart__tooltip-title{margin-bottom:2px;font-weight:var(--nxe-ui-font-weight-semibold, 600)}.nxe-chart__tooltip-row{display:flex;align-items:center;gap:var(--nxe-ui-space-2, 8px)}.nxe-chart__tooltip-name{flex:1;min-width:0;overflow:hidden;color:var(--nxe-ui-neutral-700);text-overflow:ellipsis;white-space:nowrap}.nxe-chart__tooltip-value{font-variant-numeric:tabular-nums;font-weight:var(--nxe-ui-font-weight-medium, 500)}.nxe-chart__swatch{flex:none;width:10px;height:10px;border-radius:2px}.nxe-chart__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip-path:inset(50%);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: NxeChartLegendComponent, selector: "nxe-chart-legend", inputs: ["items", "label", "toggleable"], outputs: ["toggled"] }, { kind: "component", type: NxeChartDataTableComponent, selector: "nxe-chart-data-table", inputs: ["caption", "corner", "columns", "rows"] }, { kind: "component", type: NxeSkeletonComponent, selector: "nxe-skeleton", inputs: ["variant", "width", "height", "lines", "animated"] }, { kind: "component", type: NxeEmptyStateComponent, selector: "nxe-empty-state", inputs: ["heading", "description", "headingLevel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAreaChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-area-chart', imports: [NxeChartLegendComponent, NxeChartDataTableComponent, NxeSkeletonComponent, NxeEmptyStateComponent], host: { class: 'nxe-chart nxe-area-chart' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<figure class=\"nxe-chart__figure\" [attr.aria-busy]=\"loading() ? 'true' : null\">\r\n    @if (heading()) {\r\n        <figcaption class=\"nxe-chart__heading\">{{ heading() }}</figcaption>\r\n    }\r\n    @if (loading()) {\r\n        <nxe-skeleton variant=\"rect\" width=\"100%\" [height]=\"svgHeight()\" />\r\n    } @else if (empty()) {\r\n        <nxe-empty-state class=\"nxe-chart__empty\" [heading]=\"messages.t('charts.empty')\" [headingLevel]=\"4\" />\r\n    } @else {\r\n        @if (showTableToggle()) {\r\n            <div class=\"nxe-chart__toolbar\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-chart__toggle\"\r\n                    [attr.aria-controls]=\"uid + '-table'\"\r\n                    (click)=\"toggleTable()\">\r\n                    {{ messages.t(tableShown() ? 'charts.viewAsChart' : 'charts.viewAsTable') }}\r\n                </button>\r\n            </div>\r\n        }\r\n        <div class=\"nxe-chart__stage\" [hidden]=\"tableShown()\">\r\n            <svg\r\n                class=\"nxe-chart__svg\"\r\n                role=\"img\"\r\n                [attr.aria-label]=\"summary()\"\r\n                [attr.width]=\"svgWidth()\"\r\n                [attr.height]=\"svgHeight()\"\r\n                [attr.viewBox]=\"'0 0 ' + svgWidth() + ' ' + svgHeight()\">\r\n                @for (g of yGrid(); track $index) {\r\n                    <line\r\n                        class=\"nxe-chart__grid\"\r\n                        [class.nxe-chart__grid--zero]=\"g.zero\"\r\n                        [attr.x1]=\"left()\"\r\n                        [attr.x2]=\"plotRight()\"\r\n                        [attr.y1]=\"g.y\"\r\n                        [attr.y2]=\"g.y\" />\r\n                    <text class=\"nxe-chart__tick\" text-anchor=\"end\" [attr.x]=\"left() - 8\" [attr.y]=\"g.y\" dy=\"0.32em\">{{ g.label }}</text>\r\n                }\r\n                @for (t of xTicks(); track $index) {\r\n                    <text class=\"nxe-chart__tick\" text-anchor=\"middle\" [attr.x]=\"t.x\" [attr.y]=\"plotBottom() + 18\">{{ t.text }}</text>\r\n                }\r\n                @for (l of lines(); track l.key) {\r\n                    @if (l.area) {\r\n                        <path\r\n                            class=\"nxe-chart__area\"\r\n                            [class.nxe-chart__area--stacked]=\"isStacked()\"\r\n                            [attr.d]=\"l.area\"\r\n                            [style.fill]=\"l.color\" />\r\n                    }\r\n                }\r\n                @for (l of lines(); track l.key) {\r\n                    <path class=\"nxe-chart__line\" [attr.d]=\"l.line\" [style.stroke]=\"l.color\" />\r\n                    @for (m of l.markers; track m.index) {\r\n                        @if (showAllMarkers() || l.markers.length === 1 || m.index === activeIndex()) {\r\n                            <circle class=\"nxe-chart__marker\" [attr.cx]=\"m.x\" [attr.cy]=\"m.y\" r=\"4\" [style.fill]=\"l.color\" />\r\n                        }\r\n                    }\r\n                }\r\n                @if (tooltip(); as tip) {\r\n                    <line class=\"nxe-chart__crosshair\" [attr.x1]=\"tip.x\" [attr.x2]=\"tip.x\" [attr.y1]=\"marginTop\" [attr.y2]=\"plotBottom()\" />\r\n                    @for (l of lines(); track l.key) {\r\n                        @for (m of l.markers; track m.index) {\r\n                            @if (m.index === tip.index) {\r\n                                <circle class=\"nxe-chart__marker nxe-chart__marker--active\" [attr.cx]=\"m.x\" [attr.cy]=\"m.y\" r=\"5\" [style.fill]=\"l.color\" />\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            </svg>\r\n            <div\r\n                class=\"nxe-chart__focus\"\r\n                role=\"group\"\r\n                tabindex=\"0\"\r\n                [attr.aria-label]=\"messages.t('charts.navigate')\"\r\n                (pointermove)=\"onPointerMove($event)\"\r\n                (pointerleave)=\"onPointerLeave()\"\r\n                (focus)=\"onFocus()\"\r\n                (blur)=\"onBlur()\"\r\n                (keydown)=\"onKeydown($event)\"></div>\r\n            @if (tooltip(); as tip) {\r\n                <div\r\n                    class=\"nxe-chart__tooltip\"\r\n                    role=\"tooltip\"\r\n                    [class.nxe-chart__tooltip--start]=\"tip.align === 'start'\"\r\n                    [class.nxe-chart__tooltip--end]=\"tip.align === 'end'\"\r\n                    [style.left.px]=\"tip.x\"\r\n                    [style.top.px]=\"marginTop\">\r\n                    <div class=\"nxe-chart__tooltip-title\">{{ tip.title }}</div>\r\n                    @for (r of tip.rows; track r.key) {\r\n                        <div class=\"nxe-chart__tooltip-row\">\r\n                            <span class=\"nxe-chart__swatch\" aria-hidden=\"true\" [style.background]=\"r.color\"></span>\r\n                            <span class=\"nxe-chart__tooltip-name\">{{ r.name }}</span>\r\n                            <span class=\"nxe-chart__tooltip-value\">{{ r.value }}</span>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            }\r\n            <div class=\"nxe-chart__sr\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\r\n        </div>\r\n        <div [id]=\"uid + '-table'\" [class.nxe-chart__sr]=\"!tableShown()\">\r\n            <nxe-chart-data-table\r\n                [caption]=\"heading()\"\r\n                [corner]=\"messages.t('charts.table.category')\"\r\n                [columns]=\"tableColumns()\"\r\n                [rows]=\"tableRows()\" />\r\n        </div>\r\n        @if (legendShown()) {\r\n            <nxe-chart-legend [items]=\"legendItems()\" [label]=\"messages.t('charts.legend')\" (toggled)=\"toggleSeries($event)\" />\r\n        }\r\n    }\r\n</figure>\r\n", styles: [".nxe-chart{display:block;width:100%;min-width:0;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}.nxe-chart__figure{display:flex;flex-direction:column;gap:var(--nxe-ui-space-2, 8px);margin:0}.nxe-chart__heading{color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-lg, 16px);font-weight:var(--nxe-ui-font-weight-semibold, 600);line-height:var(--nxe-ui-line-height-lg, 24px)}.nxe-chart__toolbar{display:flex;justify-content:flex-end}.nxe-chart__toggle{margin:0;padding:2px 8px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface);color:var(--nxe-ui-text);font:inherit;font-size:var(--nxe-ui-font-size-xs, 12px);cursor:pointer}.nxe-chart__toggle:hover{background:var(--nxe-ui-hover-bg)}.nxe-chart__toggle:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}.nxe-chart__stage{position:relative;max-width:100%;overflow:visible}.nxe-chart__stage[hidden]{display:none}.nxe-chart__svg{display:block;max-width:100%;overflow:visible}.nxe-chart__focus{position:absolute;inset:0;border-radius:var(--nxe-ui-radius, 4px);outline:none;touch-action:pan-y}.nxe-chart__focus:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:2px}.nxe-chart__grid{stroke:var(--nxe-ui-neutral-150);stroke-width:1;shape-rendering:crispEdges}.nxe-chart__grid--zero{stroke:var(--nxe-ui-neutral-240)}.nxe-chart__tick{fill:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-xs, 12px);font-variant-numeric:tabular-nums}.nxe-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nxe-chart__area{fill-opacity:.16;stroke:none}.nxe-chart__area--stacked{fill-opacity:.9;stroke:var(--nxe-ui-surface);stroke-width:2;stroke-linejoin:round}.nxe-chart__marker{stroke:var(--nxe-ui-surface);stroke-width:2}.nxe-chart__crosshair{stroke:var(--nxe-ui-neutral-450);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}.nxe-chart__tooltip{position:absolute;z-index:2;min-width:120px;max-width:260px;padding:6px 10px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-md, 6px);background:var(--nxe-ui-surface);box-shadow:var(--nxe-ui-shadow-sm);color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-xs, 12px);line-height:var(--nxe-ui-line-height-xs, 16px);pointer-events:none;transform:translate(-50%)}.nxe-chart__tooltip.nxe-chart__tooltip--start{transform:translate(12px)}.nxe-chart__tooltip.nxe-chart__tooltip--end{transform:translate(calc(-100% - 12px))}.nxe-chart__tooltip-title{margin-bottom:2px;font-weight:var(--nxe-ui-font-weight-semibold, 600)}.nxe-chart__tooltip-row{display:flex;align-items:center;gap:var(--nxe-ui-space-2, 8px)}.nxe-chart__tooltip-name{flex:1;min-width:0;overflow:hidden;color:var(--nxe-ui-neutral-700);text-overflow:ellipsis;white-space:nowrap}.nxe-chart__tooltip-value{font-variant-numeric:tabular-nums;font-weight:var(--nxe-ui-font-weight-medium, 500)}.nxe-chart__swatch{flex:none;width:10px;height:10px;border-radius:2px}.nxe-chart__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip-path:inset(50%);white-space:nowrap}\n"] }]
+        }] });
+
+const INNER_RATIO = 0.64;
+const GAP = 2;
+/**
+ * `nxe-donut-chart` shows how a total divides into parts.
+ *
+ * ```html
+ * <nxe-donut-chart
+ *     heading="Spend by supplier"
+ *     [data]="[{ label: 'PT Maju', value: 420 }, { label: 'CV Sinar', value: 180 }]"
+ *     [maxSegments]="6" />
+ * ```
+ *
+ * Segments take the `--nxe-ui-chart-1..8` colours in order (or a `color` of their own, e.g. a status
+ * family `var(--nxe-ui-status-success-fg)`), separated by a 2px surface gap. When there are more than
+ * `maxSegments`, the smallest fold into one "Other" segment in a neutral colour. The centre shows
+ * the total of the visible segments. The legend lists each segment with its value and share and
+ * toggles it (keyboard accessible); hover or arrow-key focus on the ring shows a tooltip. It
+ * announces itself as an image with a summary, keeps a visually hidden data table (shown by "View
+ * as table"), and uses `nxe-skeleton` and `nxe-empty-state` for loading and no data.
+ *
+ * A donut is for a handful of parts of one whole: past six or so, use a bar chart.
+ */
+class NxeDonutChartComponent {
+    host = inject(ElementRef).nativeElement;
+    messages = nxeChartMessages();
+    formatter = nxeChartNumberFormatter();
+    /** The parts. Zero, negative and non-finite values are left out. */
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Most segments shown; the rest fold into "Other". At most 9 (eight colours and Other). */
+    maxSegments = input(6, { ...(ngDevMode ? { debugName: "maxSegments" } : /* istanbul ignore next */ {}), transform: (v) => Math.min(9, Math.max(2, Math.floor(numberAttribute(v, 6)))) });
+    /** Number pattern for values. Default `#,##0.##`. */
+    valueFormat = input('#,##0.##', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    /** Decimal places of the percentages. */
+    percentDecimals = input(1, { ...(ngDevMode ? { debugName: "percentDecimals" } : /* istanbul ignore next */ {}), transform: (v) => Math.min(4, Math.max(0, Math.floor(numberAttribute(v, 1)))) });
+    /** Visible title above the chart; also the start of its accessible summary. */
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Extra sentence for the accessible summary. */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Diameter of the ring in px; it shrinks to fit a narrower container. */
+    size = input(220, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(96, numberAttribute(v, 220)) });
+    /** Text under the total in the centre. Default: the message "Total". */
+    totalLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalLabel" }] : /* istanbul ignore next */ []));
+    /** Show the total in the centre. */
+    showTotal = input(true, { ...(ngDevMode ? { debugName: "showTotal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show the legend (value and share per segment, and the toggles). */
+    showLegend = input(true, { ...(ngDevMode ? { debugName: "showLegend" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show the skeleton instead of the ring. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Offer the "View as table" button. */
+    showTableToggle = input(true, { ...(ngDevMode ? { debugName: "showTableToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Keys of the segments the legend has hidden; two-way. */
+    hidden = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    uid = nxeChartId('nxe-chart');
+    measured = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measured" }] : /* istanbul ignore next */ []));
+    hoverIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverIndex" }] : /* istanbul ignore next */ []));
+    keyboardIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardIndex" }] : /* istanbul ignore next */ []));
+    pointer = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pointer" }] : /* istanbul ignore next */ []));
+    tableShown = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableShown" }] : /* istanbul ignore next */ []));
+    constructor() {
+        nxeObserveWidth(this.host, (w) => this.measured.set(w));
+    }
+    // ---- data ------------------------------------------------------------------------------
+    /** Kept segments plus the "Other" remainder; colours follow position, so hiding repaints nothing. */
+    all = computed(() => {
+        const grouped = groupOther(this.data(), this.maxSegments(), this.messages.t('charts.other'));
+        const hidden = this.hidden();
+        return grouped.map((d, i) => {
+            const key = d.key ?? d.label;
+            return {
+                key,
+                label: d.label,
+                value: d.value,
+                color: d.color ?? (d.other ? NXE_CHART_OTHER_COLOR : nxeChartColor(i)),
+                hidden: hidden.includes(key),
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "all" }] : /* istanbul ignore next */ []));
+    shown = computed(() => this.all().filter((s) => !s.hidden), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    total = computed(() => this.shown().reduce((s, x) => s + x.value, 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    grandTotal = computed(() => this.all().reduce((s, x) => s + x.value, 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grandTotal" }] : /* istanbul ignore next */ []));
+    empty = computed(() => this.all().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    pct(value, total) {
+        const decimals = this.percentDecimals();
+        const pattern = decimals > 0 ? `#,##0.${'0'.repeat(decimals)}` : '#,##0';
+        return `${this.formatter(total > 0 ? (value / total) * 100 : 0, pattern)}%`;
+    }
+    // ---- geometry --------------------------------------------------------------------------
+    diameter = computed(() => {
+        const available = this.measured();
+        return Math.round(available > 0 ? Math.min(this.size(), available) : this.size());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "diameter" }] : /* istanbul ignore next */ []));
+    outer = computed(() => this.diameter() / 2 - 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outer" }] : /* istanbul ignore next */ []));
+    inner = computed(() => this.outer() * INNER_RATIO, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inner" }] : /* istanbul ignore next */ []));
+    arcs = computed(() => {
+        const d = this.diameter() / 2;
+        const arcs = donutArcs(this.shown().map((s) => s.value), d, d, this.outer(), this.inner(), GAP);
+        return this.shown().map((s, i) => ({ ...s, arc: arcs[i] }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arcs" }] : /* istanbul ignore next */ []));
+    totalText = computed(() => this.formatter(this.total(), this.valueFormat()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalText" }] : /* istanbul ignore next */ []));
+    totalCaption = computed(() => this.totalLabel() ?? this.messages.t('charts.total'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalCaption" }] : /* istanbul ignore next */ []));
+    // ---- interaction -----------------------------------------------------------------------
+    activeIndex = computed(() => this.hoverIndex() ?? this.keyboardIndex(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    tooltip = computed(() => {
+        const i = this.activeIndex();
+        const s = i === null ? undefined : this.arcs()[i];
+        if (!s || !s.arc) {
+            return null;
+        }
+        const point = this.hoverIndex() !== null ? (this.pointer() ?? s.arc.centroid) : s.arc.centroid;
+        return {
+            label: s.label,
+            color: s.color,
+            value: this.formatter(s.value, this.valueFormat()),
+            share: this.pct(s.value, this.total()),
+            x: point.x,
+            y: point.y,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    announcement = computed(() => {
+        const t = this.keyboardIndex() === null ? null : this.tooltip();
+        return t ? this.messages.t('charts.summary.segment', t.label, t.value, t.share) : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    onPointerMove(event) {
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const d = this.diameter() / 2;
+        const i = donutHit(this.shown().map((s) => s.value), d, d, this.outer(), this.inner(), x, y);
+        this.pointer.set({ x, y });
+        this.hoverIndex.set(i < 0 ? null : i);
+    }
+    onPointerLeave() {
+        this.hoverIndex.set(null);
+        this.pointer.set(null);
+    }
+    onFocus() {
+        if (this.keyboardIndex() === null && this.hoverIndex() === null && this.shown().length) {
+            this.keyboardIndex.set(0);
+        }
+    }
+    onBlur() {
+        this.keyboardIndex.set(null);
+    }
+    onKeydown(event) {
+        const n = this.shown().length;
+        if (n === 0) {
+            return;
+        }
+        const current = this.keyboardIndex() ?? 0;
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                next = (current + 1) % n;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                next = (current - 1 + n) % n;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = n - 1;
+                break;
+            case 'Escape':
+                next = null;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.hoverIndex.set(null);
+        this.keyboardIndex.set(next);
+    }
+    // ---- legend, table, summary ------------------------------------------------------------
+    legendItems = computed(() => {
+        const total = this.total();
+        const pattern = this.valueFormat();
+        return this.all().map((s) => ({
+            key: s.key,
+            label: s.label,
+            color: s.color,
+            hidden: s.hidden,
+            value: s.hidden ? undefined : `${this.formatter(s.value, pattern)} · ${this.pct(s.value, total)}`,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
+    toggleSegment(key) {
+        const hidden = this.hidden();
+        this.hidden.set(hidden.includes(key) ? hidden.filter((k) => k !== key) : [...hidden, key]);
+    }
+    tableRows = computed(() => {
+        const grand = this.grandTotal();
+        const pattern = this.valueFormat();
+        return this.all().map((s) => ({
+            header: s.label,
+            cells: [this.formatter(s.value, pattern), this.pct(s.value, grand)],
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableRows" }] : /* istanbul ignore next */ []));
+    tableColumns = computed(() => [
+        this.messages.t('charts.table.value'),
+        this.messages.t('charts.table.share'),
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableColumns" }] : /* istanbul ignore next */ []));
+    summary = computed(() => {
+        const m = this.messages;
+        const total = this.total();
+        const pattern = this.valueFormat();
+        const parts = [];
+        if (this.heading()) {
+            parts.push(`${this.heading()}.`);
+        }
+        parts.push(m.t('charts.summary.donut', this.shown().length, this.formatter(total, pattern)));
+        for (const s of this.shown()) {
+            parts.push(m.t('charts.summary.segment', s.label, this.formatter(s.value, pattern), this.pct(s.value, total)));
+        }
+        if (this.description()) {
+            parts.push(this.description());
+        }
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    toggleTable() {
+        this.tableShown.update((v) => !v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDonutChartComponent, isStandalone: true, selector: "nxe-donut-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, maxSegments: { classPropertyName: "maxSegments", publicName: "maxSegments", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, percentDecimals: { classPropertyName: "percentDecimals", publicName: "percentDecimals", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, totalLabel: { classPropertyName: "totalLabel", publicName: "totalLabel", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showTableToggle: { classPropertyName: "showTableToggle", publicName: "showTableToggle", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange" }, host: { classAttribute: "nxe-chart nxe-donut-chart" }, ngImport: i0, template: "<figure class=\"nxe-chart__figure\" [attr.aria-busy]=\"loading() ? 'true' : null\">\r\n    @if (heading()) {\r\n        <figcaption class=\"nxe-chart__heading\">{{ heading() }}</figcaption>\r\n    }\r\n    @if (loading()) {\r\n        <nxe-skeleton variant=\"circle\" [width]=\"diameter()\" />\r\n    } @else if (empty()) {\r\n        <nxe-empty-state class=\"nxe-chart__empty\" [heading]=\"messages.t('charts.empty')\" [headingLevel]=\"4\" />\r\n    } @else {\r\n        @if (showTableToggle()) {\r\n            <div class=\"nxe-chart__toolbar\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-chart__toggle\"\r\n                    [attr.aria-controls]=\"uid + '-table'\"\r\n                    (click)=\"toggleTable()\">\r\n                    {{ messages.t(tableShown() ? 'charts.viewAsChart' : 'charts.viewAsTable') }}\r\n                </button>\r\n            </div>\r\n        }\r\n        <div class=\"nxe-donut-chart__layout\" [hidden]=\"tableShown()\">\r\n            <div class=\"nxe-donut-chart__plot nxe-chart__stage\" [style.width.px]=\"diameter()\" [style.height.px]=\"diameter()\">\r\n                <svg\r\n                    class=\"nxe-chart__svg\"\r\n                    role=\"img\"\r\n                    [attr.aria-label]=\"summary()\"\r\n                    [attr.width]=\"diameter()\"\r\n                    [attr.height]=\"diameter()\"\r\n                    [attr.viewBox]=\"'0 0 ' + diameter() + ' ' + diameter()\">\r\n                    @for (s of arcs(); track s.key; let i = $index) {\r\n                        @if (s.arc) {\r\n                            <path\r\n                                class=\"nxe-donut-chart__segment\"\r\n                                [class.nxe-donut-chart__segment--dim]=\"activeIndex() !== null && activeIndex() !== i\"\r\n                                fill-rule=\"evenodd\"\r\n                                [attr.d]=\"s.arc.path\"\r\n                                [style.fill]=\"s.color\" />\r\n                        }\r\n                    }\r\n                </svg>\r\n                @if (showTotal()) {\r\n                    <div class=\"nxe-donut-chart__centre\" aria-hidden=\"true\">\r\n                        <span class=\"nxe-donut-chart__total-value\">{{ totalText() }}</span>\r\n                        <span class=\"nxe-donut-chart__total-label\">{{ totalCaption() }}</span>\r\n                    </div>\r\n                }\r\n                <div\r\n                    class=\"nxe-chart__focus\"\r\n                    role=\"group\"\r\n                    tabindex=\"0\"\r\n                    [attr.aria-label]=\"messages.t('charts.navigateSegments')\"\r\n                    (pointermove)=\"onPointerMove($event)\"\r\n                    (pointerleave)=\"onPointerLeave()\"\r\n                    (focus)=\"onFocus()\"\r\n                    (blur)=\"onBlur()\"\r\n                    (keydown)=\"onKeydown($event)\"></div>\r\n                @if (tooltip(); as tip) {\r\n                    <div\r\n                        class=\"nxe-chart__tooltip nxe-donut-chart__tooltip\"\r\n                        role=\"tooltip\"\r\n                        [style.left.px]=\"tip.x\"\r\n                        [style.top.px]=\"tip.y - 12\">\r\n                        <div class=\"nxe-chart__tooltip-row\">\r\n                            <span class=\"nxe-chart__swatch\" aria-hidden=\"true\" [style.background]=\"tip.color\"></span>\r\n                            <span class=\"nxe-chart__tooltip-name\">{{ tip.label }}</span>\r\n                        </div>\r\n                        <div class=\"nxe-chart__tooltip-row\">\r\n                            <span class=\"nxe-chart__tooltip-value\">{{ tip.value }}</span>\r\n                            <span class=\"nxe-chart__tooltip-name\">{{ tip.share }}</span>\r\n                        </div>\r\n                    </div>\r\n                }\r\n                <div class=\"nxe-chart__sr\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\r\n            </div>\r\n            @if (showLegend()) {\r\n                <nxe-chart-legend\r\n                    class=\"nxe-donut-chart__legend\"\r\n                    [items]=\"legendItems()\"\r\n                    [label]=\"messages.t('charts.legend')\"\r\n                    (toggled)=\"toggleSegment($event)\" />\r\n            }\r\n        </div>\r\n        <div [id]=\"uid + '-table'\" [class.nxe-chart__sr]=\"!tableShown()\">\r\n            <nxe-chart-data-table\r\n                [caption]=\"heading()\"\r\n                [corner]=\"messages.t('charts.table.segment')\"\r\n                [columns]=\"tableColumns()\"\r\n                [rows]=\"tableRows()\" />\r\n        </div>\r\n    }\r\n</figure>\r\n", styles: [".nxe-chart{display:block;width:100%;min-width:0;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}.nxe-chart__figure{display:flex;flex-direction:column;gap:var(--nxe-ui-space-2, 8px);margin:0}.nxe-chart__heading{color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-lg, 16px);font-weight:var(--nxe-ui-font-weight-semibold, 600);line-height:var(--nxe-ui-line-height-lg, 24px)}.nxe-chart__toolbar{display:flex;justify-content:flex-end}.nxe-chart__toggle{margin:0;padding:2px 8px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface);color:var(--nxe-ui-text);font:inherit;font-size:var(--nxe-ui-font-size-xs, 12px);cursor:pointer}.nxe-chart__toggle:hover{background:var(--nxe-ui-hover-bg)}.nxe-chart__toggle:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}.nxe-chart__stage{position:relative;max-width:100%;overflow:visible}.nxe-chart__stage[hidden]{display:none}.nxe-chart__svg{display:block;max-width:100%;overflow:visible}.nxe-chart__focus{position:absolute;inset:0;border-radius:var(--nxe-ui-radius, 4px);outline:none;touch-action:pan-y}.nxe-chart__focus:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:2px}.nxe-chart__grid{stroke:var(--nxe-ui-neutral-150);stroke-width:1;shape-rendering:crispEdges}.nxe-chart__grid--zero{stroke:var(--nxe-ui-neutral-240)}.nxe-chart__tick{fill:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-xs, 12px);font-variant-numeric:tabular-nums}.nxe-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nxe-chart__area{fill-opacity:.16;stroke:none}.nxe-chart__area--stacked{fill-opacity:.9;stroke:var(--nxe-ui-surface);stroke-width:2;stroke-linejoin:round}.nxe-chart__marker{stroke:var(--nxe-ui-surface);stroke-width:2}.nxe-chart__crosshair{stroke:var(--nxe-ui-neutral-450);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}.nxe-chart__tooltip{position:absolute;z-index:2;min-width:120px;max-width:260px;padding:6px 10px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-md, 6px);background:var(--nxe-ui-surface);box-shadow:var(--nxe-ui-shadow-sm);color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-xs, 12px);line-height:var(--nxe-ui-line-height-xs, 16px);pointer-events:none;transform:translate(-50%)}.nxe-chart__tooltip.nxe-chart__tooltip--start{transform:translate(12px)}.nxe-chart__tooltip.nxe-chart__tooltip--end{transform:translate(calc(-100% - 12px))}.nxe-chart__tooltip-title{margin-bottom:2px;font-weight:var(--nxe-ui-font-weight-semibold, 600)}.nxe-chart__tooltip-row{display:flex;align-items:center;gap:var(--nxe-ui-space-2, 8px)}.nxe-chart__tooltip-name{flex:1;min-width:0;overflow:hidden;color:var(--nxe-ui-neutral-700);text-overflow:ellipsis;white-space:nowrap}.nxe-chart__tooltip-value{font-variant-numeric:tabular-nums;font-weight:var(--nxe-ui-font-weight-medium, 500)}.nxe-chart__swatch{flex:none;width:10px;height:10px;border-radius:2px}.nxe-chart__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip-path:inset(50%);white-space:nowrap}\n", ".nxe-donut-chart__layout{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-4, 16px) var(--nxe-ui-space-6, 24px)}.nxe-donut-chart__plot{position:relative;flex:none}.nxe-donut-chart__segment{stroke:none;transition:opacity .12s}.nxe-donut-chart__segment.nxe-donut-chart__segment--dim{opacity:.45}.nxe-donut-chart__centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}.nxe-donut-chart__total-value{color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-2xl, 24px);font-weight:var(--nxe-ui-font-weight-semibold, 600);line-height:var(--nxe-ui-line-height-2xl, 30px)}.nxe-donut-chart__total-label{color:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-xs, 12px)}.nxe-donut-chart__legend .nxe-chart-legend__list{flex-direction:column;gap:2px}.nxe-donut-chart__tooltip{min-width:0;transform:translate(-50%,-100%)}@media(prefers-reduced-motion:reduce){.nxe-donut-chart__segment{transition:none}}\n"], dependencies: [{ kind: "component", type: NxeChartLegendComponent, selector: "nxe-chart-legend", inputs: ["items", "label", "toggleable"], outputs: ["toggled"] }, { kind: "component", type: NxeChartDataTableComponent, selector: "nxe-chart-data-table", inputs: ["caption", "corner", "columns", "rows"] }, { kind: "component", type: NxeSkeletonComponent, selector: "nxe-skeleton", inputs: ["variant", "width", "height", "lines", "animated"] }, { kind: "component", type: NxeEmptyStateComponent, selector: "nxe-empty-state", inputs: ["heading", "description", "headingLevel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDonutChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-donut-chart', imports: [NxeChartLegendComponent, NxeChartDataTableComponent, NxeSkeletonComponent, NxeEmptyStateComponent], host: { class: 'nxe-chart nxe-donut-chart' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<figure class=\"nxe-chart__figure\" [attr.aria-busy]=\"loading() ? 'true' : null\">\r\n    @if (heading()) {\r\n        <figcaption class=\"nxe-chart__heading\">{{ heading() }}</figcaption>\r\n    }\r\n    @if (loading()) {\r\n        <nxe-skeleton variant=\"circle\" [width]=\"diameter()\" />\r\n    } @else if (empty()) {\r\n        <nxe-empty-state class=\"nxe-chart__empty\" [heading]=\"messages.t('charts.empty')\" [headingLevel]=\"4\" />\r\n    } @else {\r\n        @if (showTableToggle()) {\r\n            <div class=\"nxe-chart__toolbar\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-chart__toggle\"\r\n                    [attr.aria-controls]=\"uid + '-table'\"\r\n                    (click)=\"toggleTable()\">\r\n                    {{ messages.t(tableShown() ? 'charts.viewAsChart' : 'charts.viewAsTable') }}\r\n                </button>\r\n            </div>\r\n        }\r\n        <div class=\"nxe-donut-chart__layout\" [hidden]=\"tableShown()\">\r\n            <div class=\"nxe-donut-chart__plot nxe-chart__stage\" [style.width.px]=\"diameter()\" [style.height.px]=\"diameter()\">\r\n                <svg\r\n                    class=\"nxe-chart__svg\"\r\n                    role=\"img\"\r\n                    [attr.aria-label]=\"summary()\"\r\n                    [attr.width]=\"diameter()\"\r\n                    [attr.height]=\"diameter()\"\r\n                    [attr.viewBox]=\"'0 0 ' + diameter() + ' ' + diameter()\">\r\n                    @for (s of arcs(); track s.key; let i = $index) {\r\n                        @if (s.arc) {\r\n                            <path\r\n                                class=\"nxe-donut-chart__segment\"\r\n                                [class.nxe-donut-chart__segment--dim]=\"activeIndex() !== null && activeIndex() !== i\"\r\n                                fill-rule=\"evenodd\"\r\n                                [attr.d]=\"s.arc.path\"\r\n                                [style.fill]=\"s.color\" />\r\n                        }\r\n                    }\r\n                </svg>\r\n                @if (showTotal()) {\r\n                    <div class=\"nxe-donut-chart__centre\" aria-hidden=\"true\">\r\n                        <span class=\"nxe-donut-chart__total-value\">{{ totalText() }}</span>\r\n                        <span class=\"nxe-donut-chart__total-label\">{{ totalCaption() }}</span>\r\n                    </div>\r\n                }\r\n                <div\r\n                    class=\"nxe-chart__focus\"\r\n                    role=\"group\"\r\n                    tabindex=\"0\"\r\n                    [attr.aria-label]=\"messages.t('charts.navigateSegments')\"\r\n                    (pointermove)=\"onPointerMove($event)\"\r\n                    (pointerleave)=\"onPointerLeave()\"\r\n                    (focus)=\"onFocus()\"\r\n                    (blur)=\"onBlur()\"\r\n                    (keydown)=\"onKeydown($event)\"></div>\r\n                @if (tooltip(); as tip) {\r\n                    <div\r\n                        class=\"nxe-chart__tooltip nxe-donut-chart__tooltip\"\r\n                        role=\"tooltip\"\r\n                        [style.left.px]=\"tip.x\"\r\n                        [style.top.px]=\"tip.y - 12\">\r\n                        <div class=\"nxe-chart__tooltip-row\">\r\n                            <span class=\"nxe-chart__swatch\" aria-hidden=\"true\" [style.background]=\"tip.color\"></span>\r\n                            <span class=\"nxe-chart__tooltip-name\">{{ tip.label }}</span>\r\n                        </div>\r\n                        <div class=\"nxe-chart__tooltip-row\">\r\n                            <span class=\"nxe-chart__tooltip-value\">{{ tip.value }}</span>\r\n                            <span class=\"nxe-chart__tooltip-name\">{{ tip.share }}</span>\r\n                        </div>\r\n                    </div>\r\n                }\r\n                <div class=\"nxe-chart__sr\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\r\n            </div>\r\n            @if (showLegend()) {\r\n                <nxe-chart-legend\r\n                    class=\"nxe-donut-chart__legend\"\r\n                    [items]=\"legendItems()\"\r\n                    [label]=\"messages.t('charts.legend')\"\r\n                    (toggled)=\"toggleSegment($event)\" />\r\n            }\r\n        </div>\r\n        <div [id]=\"uid + '-table'\" [class.nxe-chart__sr]=\"!tableShown()\">\r\n            <nxe-chart-data-table\r\n                [caption]=\"heading()\"\r\n                [corner]=\"messages.t('charts.table.segment')\"\r\n                [columns]=\"tableColumns()\"\r\n                [rows]=\"tableRows()\" />\r\n        </div>\r\n    }\r\n</figure>\r\n", styles: [".nxe-chart{display:block;width:100%;min-width:0;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family)}.nxe-chart__figure{display:flex;flex-direction:column;gap:var(--nxe-ui-space-2, 8px);margin:0}.nxe-chart__heading{color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-lg, 16px);font-weight:var(--nxe-ui-font-weight-semibold, 600);line-height:var(--nxe-ui-line-height-lg, 24px)}.nxe-chart__toolbar{display:flex;justify-content:flex-end}.nxe-chart__toggle{margin:0;padding:2px 8px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface);color:var(--nxe-ui-text);font:inherit;font-size:var(--nxe-ui-font-size-xs, 12px);cursor:pointer}.nxe-chart__toggle:hover{background:var(--nxe-ui-hover-bg)}.nxe-chart__toggle:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}.nxe-chart__stage{position:relative;max-width:100%;overflow:visible}.nxe-chart__stage[hidden]{display:none}.nxe-chart__svg{display:block;max-width:100%;overflow:visible}.nxe-chart__focus{position:absolute;inset:0;border-radius:var(--nxe-ui-radius, 4px);outline:none;touch-action:pan-y}.nxe-chart__focus:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:2px}.nxe-chart__grid{stroke:var(--nxe-ui-neutral-150);stroke-width:1;shape-rendering:crispEdges}.nxe-chart__grid--zero{stroke:var(--nxe-ui-neutral-240)}.nxe-chart__tick{fill:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-xs, 12px);font-variant-numeric:tabular-nums}.nxe-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nxe-chart__area{fill-opacity:.16;stroke:none}.nxe-chart__area--stacked{fill-opacity:.9;stroke:var(--nxe-ui-surface);stroke-width:2;stroke-linejoin:round}.nxe-chart__marker{stroke:var(--nxe-ui-surface);stroke-width:2}.nxe-chart__crosshair{stroke:var(--nxe-ui-neutral-450);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}.nxe-chart__tooltip{position:absolute;z-index:2;min-width:120px;max-width:260px;padding:6px 10px;border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-md, 6px);background:var(--nxe-ui-surface);box-shadow:var(--nxe-ui-shadow-sm);color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-xs, 12px);line-height:var(--nxe-ui-line-height-xs, 16px);pointer-events:none;transform:translate(-50%)}.nxe-chart__tooltip.nxe-chart__tooltip--start{transform:translate(12px)}.nxe-chart__tooltip.nxe-chart__tooltip--end{transform:translate(calc(-100% - 12px))}.nxe-chart__tooltip-title{margin-bottom:2px;font-weight:var(--nxe-ui-font-weight-semibold, 600)}.nxe-chart__tooltip-row{display:flex;align-items:center;gap:var(--nxe-ui-space-2, 8px)}.nxe-chart__tooltip-name{flex:1;min-width:0;overflow:hidden;color:var(--nxe-ui-neutral-700);text-overflow:ellipsis;white-space:nowrap}.nxe-chart__tooltip-value{font-variant-numeric:tabular-nums;font-weight:var(--nxe-ui-font-weight-medium, 500)}.nxe-chart__swatch{flex:none;width:10px;height:10px;border-radius:2px}.nxe-chart__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip-path:inset(50%);white-space:nowrap}\n", ".nxe-donut-chart__layout{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-4, 16px) var(--nxe-ui-space-6, 24px)}.nxe-donut-chart__plot{position:relative;flex:none}.nxe-donut-chart__segment{stroke:none;transition:opacity .12s}.nxe-donut-chart__segment.nxe-donut-chart__segment--dim{opacity:.45}.nxe-donut-chart__centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}.nxe-donut-chart__total-value{color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-2xl, 24px);font-weight:var(--nxe-ui-font-weight-semibold, 600);line-height:var(--nxe-ui-line-height-2xl, 30px)}.nxe-donut-chart__total-label{color:var(--nxe-ui-neutral-600);font-size:var(--nxe-ui-font-size-xs, 12px)}.nxe-donut-chart__legend .nxe-chart-legend__list{flex-direction:column;gap:2px}.nxe-donut-chart__tooltip{min-width:0;transform:translate(-50%,-100%)}@media(prefers-reduced-motion:reduce){.nxe-donut-chart__segment{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], maxSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSegments", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], percentDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentDecimals", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], totalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalLabel", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showTableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableToggle", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }] } });
+
+// @nexterajs/ui/charts — public API.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NXE_CHART_OTHER_COLOR, NXE_CHART_SLOTS, NxeAreaChartComponent, NxeChartDataTableComponent, NxeChartLegendComponent, NxeDonutChartComponent, NxeLineChartComponent, areaPath, decimalsOf, donutArcs, donutHit, groupOther, labelIndexes, linePath, linearScale, nearestIndex, niceNumber, niceScale, nxeChartColor, patternForDecimals, segments, stackValues };
+//# sourceMappingURL=nexterajs-ui-charts.mjs.map