@konce-pt/angular 0.4.0 → 0.6.0

package/dist/fesm2022/konce-pt-angular-charts.mjs

@@ -0,0 +1,957 @@
+import * as i0 from '@angular/core';
+import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+
+function n$2(value) {
+    // Skraca zapis (mniejszy DOM) i unika notacji wykładniczej dla małych liczb.
+    return Number.isInteger(value) ? String(value) : value.toFixed(3);
+}
+/** Ścieżka odcinkowa (M/L). */
+function linearPath(points) {
+    return points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${n$2(p.x)} ${n$2(p.y)}`).join(' ');
+}
+/** Standardowa interpolacja sześcienna (Catmull-Rom przez punkty → krzywe Béziera). */
+function cubicPath(points) {
+    if (points.length < 3)
+        return linearPath(points);
+    let d = `M ${n$2(points[0].x)} ${n$2(points[0].y)}`;
+    for (let i = 0; i < points.length - 1; i++) {
+        const p0 = points[i - 1] ?? points[i];
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        const p3 = points[i + 2] ?? p2;
+        const c1x = p1.x + (p2.x - p0.x) / 6;
+        const c1y = p1.y + (p2.y - p0.y) / 6;
+        const c2x = p2.x - (p3.x - p1.x) / 6;
+        const c2y = p2.y - (p3.y - p1.y) / 6;
+        d += ` C ${n$2(c1x)} ${n$2(c1y)}, ${n$2(c2x)} ${n$2(c2y)}, ${n$2(p2.x)} ${n$2(p2.y)}`;
+    }
+    return d;
+}
+/**
+ * Monotoniczna interpolacja sześcienna (Fritsch–Carlson).
+ * Styczne przycinane tak, by krzywa nie przestrzelała ekstremów danych.
+ * Liczona względem indeksu punktu (równe odstępy w X, typowe dla osi kategorii).
+ */
+function monotonePath(points) {
+    const size = points.length;
+    if (size < 3)
+        return linearPath(points);
+    const dx = [];
+    const dy = [];
+    const slope = [];
+    for (let i = 0; i < size - 1; i++) {
+        dx[i] = points[i + 1].x - points[i].x;
+        dy[i] = points[i + 1].y - points[i].y;
+        slope[i] = dy[i] / (dx[i] || 1);
+    }
+    // Styczne w węzłach (m).
+    const m = new Array(size);
+    m[0] = slope[0];
+    m[size - 1] = slope[size - 2];
+    for (let i = 1; i < size - 1; i++) {
+        if (slope[i - 1] * slope[i] <= 0) {
+            m[i] = 0; // lokalne ekstremum → styczna pozioma
+        }
+        else {
+            m[i] = (slope[i - 1] + slope[i]) / 2;
+        }
+    }
+    // Ograniczenie Fritsch–Carlson.
+    for (let i = 0; i < size - 1; i++) {
+        if (slope[i] === 0) {
+            m[i] = 0;
+            m[i + 1] = 0;
+            continue;
+        }
+        const a = m[i] / slope[i];
+        const b = m[i + 1] / slope[i];
+        const h = Math.hypot(a, b);
+        if (h > 3) {
+            const t = 3 / h;
+            m[i] = t * a * slope[i];
+            m[i + 1] = t * b * slope[i];
+        }
+    }
+    let d = `M ${n$2(points[0].x)} ${n$2(points[0].y)}`;
+    for (let i = 0; i < size - 1; i++) {
+        const c1x = points[i].x + dx[i] / 3;
+        const c1y = points[i].y + (m[i] * dx[i]) / 3;
+        const c2x = points[i + 1].x - dx[i] / 3;
+        const c2y = points[i + 1].y - (m[i + 1] * dx[i]) / 3;
+        d += ` C ${n$2(c1x)} ${n$2(c1y)}, ${n$2(c2x)} ${n$2(c2y)}, ${n$2(points[i + 1].x)} ${n$2(points[i + 1].y)}`;
+    }
+    return d;
+}
+/** Ścieżka linii dla wybranego trybu interpolacji. */
+function linePath(points, mode = 'linear') {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1)
+        return `M ${n$2(points[0].x)} ${n$2(points[0].y)}`;
+    switch (mode) {
+        case 'cubic':
+            return cubicPath(points);
+        case 'cubic-monotonic':
+            return monotonePath(points);
+        default:
+            return linearPath(points);
+    }
+}
+/** Ścieżka obszaru pod linią (domknięta do `baselineY`). */
+function areaPath(points, baselineY, mode = 'linear') {
+    if (points.length === 0)
+        return '';
+    const top = linePath(points, mode);
+    const first = points[0];
+    const last = points[points.length - 1];
+    return `${top} L ${n$2(last.x)} ${n$2(baselineY)} L ${n$2(first.x)} ${n$2(baselineY)} Z`;
+}
+
+/*
+ * Skalowanie i „ładne" podziałki osi (auto-skala).
+ * Wszystkie funkcje czyste — bez stanu i DOM.
+ */
+/** Zakres [min, max] tablicy liczb (0..0 dla pustej). */
+function extent(values) {
+    if (values.length === 0)
+        return [0, 0];
+    let min = values[0];
+    let max = values[0];
+    for (const v of values) {
+        if (v < min)
+            min = v;
+        if (v > max)
+            max = v;
+    }
+    return [min, max];
+}
+/** Interpolacja liniowa domeny → zakresu (np. wartość → współrzędna piksela). */
+function linearScale(domainMin, domainMax, rangeMin, rangeMax) {
+    const dSpan = domainMax - domainMin || 1;
+    const rSpan = rangeMax - rangeMin;
+    return (value) => rangeMin + ((value - domainMin) / dSpan) * rSpan;
+}
+/** Zaokrągla liczbę do „ładnej" wartości (1/2/5 × 10ⁿ). */
+function niceNum(range, round) {
+    const exponent = Math.floor(Math.log10(range || 1));
+    const fraction = (range || 1) / 10 ** exponent;
+    return niceFraction(fraction, round) * 10 ** exponent;
+}
+/** Mantysa 1/2/5/10 — do najbliższej (`round`) albo w górę. */
+function niceFraction(fraction, round) {
+    if (round) {
+        if (fraction < 1.5)
+            return 1;
+        if (fraction < 3)
+            return 2;
+        if (fraction < 7)
+            return 5;
+        return 10;
+    }
+    if (fraction <= 1)
+        return 1;
+    if (fraction <= 2)
+        return 2;
+    if (fraction <= 5)
+        return 5;
+    return 10;
+}
+/**
+ * „Ładna" skala obejmująca [dataMin, dataMax] z ~`maxTicks` podziałkami.
+ * Wynikowy zakres jest rozszerzony do równych kroków; zawsze zawiera 0,
+ * gdy dane są jednoznakowe (typowe dla słupków/linii wartościowych).
+ */
+function niceScale(dataMin, dataMax, maxTicks = 5) {
+    let lo = dataMin;
+    let hi = dataMax;
+    if (lo > 0)
+        lo = 0;
+    if (hi < 0)
+        hi = 0;
+    if (lo === hi) {
+        hi = lo + 1;
+    }
+    const range = niceNum(hi - lo, false);
+    const step = niceNum(range / Math.max(1, maxTicks - 1), true);
+    const niceMin = Math.floor(lo / step) * step;
+    const niceMax = Math.ceil(hi / step) * step;
+    const ticks = [];
+    // +1e-9: zabezpieczenie przed błędami zmiennoprzecinkowymi na krańcu pętli.
+    for (let t = niceMin; t <= niceMax + 1e-9; t += step) {
+        ticks.push(Math.abs(t) < 1e-9 ? 0 : t);
+    }
+    return { min: niceMin, max: niceMax, step, ticks };
+}
+/**
+ * Skala pasmowa: dzieli [rangeStart, rangeEnd] na `count` równych pasm
+ * z marginesem `padding` (0..1 udziału pasma) po bokach i między pasmami.
+ */
+function bandScale(count, rangeStart, rangeEnd, padding = 0.1) {
+    const span = rangeEnd - rangeStart;
+    const step = count > 0 ? span / count : span;
+    const bandwidth = step * (1 - padding);
+    const offset = (step - bandwidth) / 2;
+    return {
+        bandwidth,
+        start: (index) => rangeStart + index * step + offset,
+        center: (index) => rangeStart + index * step + step / 2,
+    };
+}
+
+/*
+ * Geometria wykresu słupkowego (pionowego i poziomego) z zaokrągleniem rogów.
+ * Wspiera wiele serii (grupowanie obok siebie w obrębie kategorii).
+ */
+function n$1(value) {
+    return Number.isInteger(value) ? String(value) : value.toFixed(3);
+}
+/** Prostokąt z zaokrąglonymi rogami tylko po wybranych stronach. */
+function roundedRect(x, y, w, h, r, corners) {
+    const radius = Math.max(0, Math.min(r, w / 2, h / 2));
+    const tl = corners.tl ? radius : 0;
+    const tr = corners.tr ? radius : 0;
+    const br = corners.br ? radius : 0;
+    const bl = corners.bl ? radius : 0;
+    return [
+        `M ${n$1(x + tl)} ${n$1(y)}`,
+        `H ${n$1(x + w - tr)}`,
+        tr ? `A ${n$1(tr)} ${n$1(tr)} 0 0 1 ${n$1(x + w)} ${n$1(y + tr)}` : '',
+        `V ${n$1(y + h - br)}`,
+        br ? `A ${n$1(br)} ${n$1(br)} 0 0 1 ${n$1(x + w - br)} ${n$1(y + h)}` : '',
+        `H ${n$1(x + bl)}`,
+        bl ? `A ${n$1(bl)} ${n$1(bl)} 0 0 1 ${n$1(x)} ${n$1(y + h - bl)}` : '',
+        `V ${n$1(y + tl)}`,
+        tl ? `A ${n$1(tl)} ${n$1(tl)} 0 0 1 ${n$1(x + tl)} ${n$1(y)}` : '',
+        'Z',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+/**
+ * Wylicza słupki dla obszaru `plot`.
+ * @param seriesData  wartości[serie][kategorie]
+ * @param plot        obszar rysowania {x,y,width,height}
+ * @param orientation pionowa (rośnie w górę) lub pozioma (rośnie w prawo)
+ * @param borderRadius promień zaokrąglenia w px
+ */
+function barLayout(seriesData, categoryCount, plot, orientation, borderRadius) {
+    let min = 0;
+    let max = 0;
+    for (const row of seriesData) {
+        for (const v of row) {
+            if (v < min)
+                min = v;
+            if (v > max)
+                max = v;
+        }
+    }
+    const scale = niceScale(min, max, 5);
+    const seriesCount = seriesData.length || 1;
+    const bars = [];
+    if (orientation === 'vertical') {
+        const value = linearScale(scale.min, scale.max, plot.y + plot.height, plot.y);
+        const baseline = value(0);
+        const cat = bandScale(categoryCount, plot.x, plot.x + plot.width, 0.2);
+        const group = bandScale(seriesCount, 0, cat.bandwidth, 0.1);
+        seriesData.forEach((values, s) => {
+            for (let c = 0; c < categoryCount; c++) {
+                const v = values[c] ?? 0;
+                const x = cat.start(c) + group.start(s);
+                const w = group.bandwidth;
+                const yv = value(v);
+                const top = Math.min(baseline, yv);
+                const h = Math.abs(yv - baseline);
+                const up = v >= 0;
+                bars.push({
+                    rect: { x, y: top, width: w, height: h },
+                    path: roundedRect(x, top, w, h, borderRadius, up ? { tl: true, tr: true } : { bl: true, br: true }),
+                    seriesIndex: s,
+                    categoryIndex: c,
+                    value: v,
+                });
+            }
+        });
+        return { bars, baseline, scale, ticks: scale.ticks.map((t) => ({ value: t, pos: value(t) })) };
+    }
+    // horizontal
+    const value = linearScale(scale.min, scale.max, plot.x, plot.x + plot.width);
+    const baseline = value(0);
+    const cat = bandScale(categoryCount, plot.y, plot.y + plot.height, 0.2);
+    const group = bandScale(seriesCount, 0, cat.bandwidth, 0.1);
+    seriesData.forEach((values, s) => {
+        for (let c = 0; c < categoryCount; c++) {
+            const v = values[c] ?? 0;
+            const y = cat.start(c) + group.start(s);
+            const h = group.bandwidth;
+            const xv = value(v);
+            const left = Math.min(baseline, xv);
+            const w = Math.abs(xv - baseline);
+            const right = v >= 0;
+            bars.push({
+                rect: { x: left, y, width: w, height: h },
+                path: roundedRect(left, y, w, h, borderRadius, right ? { tr: true, br: true } : { tl: true, bl: true }),
+                seriesIndex: s,
+                categoryIndex: c,
+                value: v,
+            });
+        }
+    });
+    return { bars, baseline, scale, ticks: scale.ticks.map((t) => ({ value: t, pos: value(t) })) };
+}
+
+const HALF_PI = Math.PI / 2;
+function n(value) {
+    return Number.isInteger(value) ? String(value) : value.toFixed(3);
+}
+/** Punkt na okręgu dla kąta (0 = góra, rośnie zgodnie z zegarem). */
+function polarToCartesian(cx, cy, radius, angle) {
+    const a = angle - HALF_PI;
+    return { x: cx + radius * Math.cos(a), y: cy + radius * Math.sin(a) };
+}
+/**
+ * Ścieżka wycinka pierścienia od `startAngle` do `endAngle`.
+ * `innerRadius = 0` → pełny wycinek koła (pie); > 0 → pierścień (doughnut).
+ */
+function arcPath(cx, cy, outerRadius, innerRadius, startAngle, endAngle) {
+    const sweep = endAngle - startAngle;
+    const largeArc = sweep > Math.PI ? 1 : 0;
+    // Pełny okrąg (np. pojedynczy wycinek 100%) — rozbijamy na dwa łuki.
+    if (sweep >= Math.PI * 2 - 1e-6) {
+        const outer = fullCircle(cx, cy, outerRadius, 1);
+        if (innerRadius <= 0)
+            return outer;
+        return `${outer} ${fullCircle(cx, cy, innerRadius, 0)}`;
+    }
+    const oStart = polarToCartesian(cx, cy, outerRadius, startAngle);
+    const oEnd = polarToCartesian(cx, cy, outerRadius, endAngle);
+    if (innerRadius <= 0) {
+        return [
+            `M ${n(cx)} ${n(cy)}`,
+            `L ${n(oStart.x)} ${n(oStart.y)}`,
+            `A ${n(outerRadius)} ${n(outerRadius)} 0 ${largeArc} 1 ${n(oEnd.x)} ${n(oEnd.y)}`,
+            'Z',
+        ].join(' ');
+    }
+    const iStart = polarToCartesian(cx, cy, innerRadius, endAngle);
+    const iEnd = polarToCartesian(cx, cy, innerRadius, startAngle);
+    return [
+        `M ${n(oStart.x)} ${n(oStart.y)}`,
+        `A ${n(outerRadius)} ${n(outerRadius)} 0 ${largeArc} 1 ${n(oEnd.x)} ${n(oEnd.y)}`,
+        `L ${n(iStart.x)} ${n(iStart.y)}`,
+        `A ${n(innerRadius)} ${n(innerRadius)} 0 ${largeArc} 0 ${n(iEnd.x)} ${n(iEnd.y)}`,
+        'Z',
+    ].join(' ');
+}
+/** Pełny okrąg jako dwa półłuki (sweepFlag steruje kierunkiem — dla wycięcia). */
+function fullCircle(cx, cy, r, sweepFlag) {
+    const top = polarToCartesian(cx, cy, r, 0);
+    const bottom = polarToCartesian(cx, cy, r, Math.PI);
+    return [
+        `M ${n(top.x)} ${n(top.y)}`,
+        `A ${n(r)} ${n(r)} 0 1 ${sweepFlag} ${n(bottom.x)} ${n(bottom.y)}`,
+        `A ${n(r)} ${n(r)} 0 1 ${sweepFlag} ${n(top.x)} ${n(top.y)}`,
+        'Z',
+    ].join(' ');
+}
+/**
+ * Wycinki pie/doughnut: kąt proporcjonalny do wartości (Σ = 2π).
+ * `innerRadius` w px (0 dla pie).
+ */
+function pieSlices(values, cx, cy, outerRadius, innerRadius = 0) {
+    const total = values.reduce((a, v) => a + Math.max(0, v), 0);
+    if (total <= 0)
+        return [];
+    const slices = [];
+    let angle = 0;
+    for (const value of values) {
+        const sweep = (Math.max(0, value) / total) * Math.PI * 2;
+        const start = angle;
+        const end = angle + sweep;
+        slices.push({
+            path: arcPath(cx, cy, outerRadius, innerRadius, start, end),
+            midAngle: (start + end) / 2,
+            startAngle: start,
+            endAngle: end,
+            value,
+        });
+        angle = end;
+    }
+    return slices;
+}
+/**
+ * Wycinki polar area: równy kąt (2π/N), promień proporcjonalny do wartości.
+ * `maxValue` skaluje promień do `outerRadius`.
+ */
+function polarSlices(values, cx, cy, outerRadius, maxValue = 1) {
+    const count = values.length;
+    if (count === 0)
+        return [];
+    const sweep = (Math.PI * 2) / count;
+    return values.map((value, i) => {
+        const start = i * sweep;
+        const end = start + sweep;
+        const r = (Math.max(0, value) / maxValue) * outerRadius;
+        return {
+            path: arcPath(cx, cy, r, 0, start, end),
+            midAngle: (start + end) / 2,
+            startAngle: start,
+            endAngle: end,
+            value,
+        };
+    });
+}
+
+/*
+ * Geometria wykresu radarowego: osie promieniowe + wielokąty serii.
+ */
+/** Siatka radaru: `levels` koncentrycznych wielokątów + osie do etykiet. */
+function radarGrid(count, cx, cy, radius, levels = 4) {
+    const axes = [];
+    const step = (Math.PI * 2) / Math.max(1, count);
+    for (let i = 0; i < count; i++) {
+        const angle = i * step;
+        axes.push({ angle, labelIndex: i, end: polarToCartesian(cx, cy, radius, angle) });
+    }
+    const rings = [];
+    for (let l = 1; l <= levels; l++) {
+        const r = (radius * l) / levels;
+        rings.push(polygonPath(axes.map((a) => polarToCartesian(cx, cy, r, a.angle))));
+    }
+    return { rings, axes };
+}
+/** Punkty wielokąta serii (wartość → promień, skalowane do `maxValue`). */
+function radarPoints(values, cx, cy, radius, maxValue) {
+    const count = values.length;
+    const step = (Math.PI * 2) / Math.max(1, count);
+    const max = maxValue || 1;
+    return values.map((v, i) => polarToCartesian(cx, cy, (Math.max(0, v) / max) * radius, i * step));
+}
+/** Zamknięta ścieżka wielokąta łącząca punkty. */
+function polygonPath(points) {
+    if (points.length === 0)
+        return '';
+    const nf = (v) => (Number.isInteger(v) ? String(v) : v.toFixed(3));
+    return points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${nf(p.x)} ${nf(p.y)}`).join(' ') + ' Z';
+}
+
+/** Obszar rysowania po odjęciu marginesów od pełnego viewBoxa. */
+function plotArea(width, height, insets) {
+    return {
+        x: insets.left,
+        y: insets.top,
+        width: Math.max(0, width - insets.left - insets.right),
+        height: Math.max(0, height - insets.top - insets.bottom),
+    };
+}
+/** Środek i promień dla wykresów promieniowych (pie/doughnut/polar/radar). */
+function radialArea(width, height, padding) {
+    const cx = width / 2;
+    const cy = height / 2;
+    const radius = Math.max(0, Math.min(width, height) / 2 - padding);
+    return { cx, cy, radius };
+}
+
+/*
+ * Domyślna paleta kolorów wykresów — oparta o semantyczne tokeny Koncept UI.
+ * Rozszerzona o dodatkowe odcienie skali, by obsłużyć wiele serii/wycinków.
+ */
+/** Kolejność kolorów dla kolejnych serii / wycinków. */
+const KPT_CHART_PALETTE = [
+    'var(--kpt-color-primary)',
+    'var(--kpt-color-info)',
+    'var(--kpt-color-success)',
+    'var(--kpt-color-warning)',
+    'var(--kpt-color-danger)',
+    'var(--kpt-color-blue-700)',
+    'var(--kpt-color-green-700)',
+    'var(--kpt-color-amber-700)',
+    'var(--kpt-color-red-700)',
+    'var(--kpt-color-neutral-500)',
+];
+/** Kolor serii/wycinka: jawny z danych albo z palety (cyklicznie). */
+function seriesColor(explicit, index, palette = KPT_CHART_PALETTE) {
+    return explicit ?? palette[index % palette.length];
+}
+
+/*
+ * Lekki formatter liczb dla etykiet osi i tooltipów.
+ * Framework-free; korzysta z wbudowanego Intl (dostępny w przeglądarce i Node).
+ */
+/** Formatuje liczbę zwięźle (do 2 miejsc, bez zer końcowych). */
+function formatNumber(value, locale) {
+    if (!Number.isFinite(value))
+        return '';
+    return new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }).format(value);
+}
+/** Zaokrągla do skończonej liczby miejsc (do etykiet osi). */
+function round(value, digits = 0) {
+    const f = 10 ** digits;
+    return Math.round(value * f) / f;
+}
+
+/**
+ * Legenda wykresu — klikalne elementy (toggle serii), podświetlanie na hover,
+ * pozycjonowanie, wyrównanie, styl punktu i opcjonalny tytuł.
+ * Element wewnętrzny biblioteki — nie jest częścią publicznego API.
+ */
+class KptChartLegend {
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    position = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    align = input('center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    pointStyle = input('circle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pointStyle" }] : /* istanbul ignore next */ []));
+    title = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Kliknięcie elementu — przełącz widoczność serii/wycinka (klucz). */
+    toggle = output();
+    /** Wejście/wyjście kursora — podświetl serię (klucz) lub wyczyść (null). */
+    highlight = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptChartLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptChartLegend, isStandalone: true, selector: "kpt-chart-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, pointStyle: { classPropertyName: "pointStyle", publicName: "pointStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", highlight: "highlight" }, host: { classAttribute: "kpt-chart-legend-host" }, ngImport: i0, template: `
+    <div class="kpt-chart__legend" [attr.data-position]="position()" [attr.data-align]="align()">
+      @if (title()?.display && title()?.text) {
+        <div class="kpt-chart__legend-title" [attr.data-align]="title()?.position ?? 'start'">{{ title()?.text }}</div>
+      }
+      <ul class="kpt-chart__legend-list">
+        @for (item of items(); track item.key) {
+          <li>
+            <button
+              type="button"
+              class="kpt-chart__legend-item"
+              [class.kpt-chart__legend-item--hidden]="item.hidden"
+              (click)="toggle.emit(item.key)"
+              (pointerenter)="highlight.emit(item.key)"
+              (pointerleave)="highlight.emit(null)"
+            >
+              <span class="kpt-chart__legend-marker" [attr.data-style]="pointStyle()" [style.--kpt-chart-legend-color]="item.color"></span>
+              <span class="kpt-chart__legend-label">{{ item.name }}</span>
+            </button>
+          </li>
+        }
+      </ul>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptChartLegend, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kpt-chart-legend',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    <div class="kpt-chart__legend" [attr.data-position]="position()" [attr.data-align]="align()">
+      @if (title()?.display && title()?.text) {
+        <div class="kpt-chart__legend-title" [attr.data-align]="title()?.position ?? 'start'">{{ title()?.text }}</div>
+      }
+      <ul class="kpt-chart__legend-list">
+        @for (item of items(); track item.key) {
+          <li>
+            <button
+              type="button"
+              class="kpt-chart__legend-item"
+              [class.kpt-chart__legend-item--hidden]="item.hidden"
+              (click)="toggle.emit(item.key)"
+              (pointerenter)="highlight.emit(item.key)"
+              (pointerleave)="highlight.emit(null)"
+            >
+              <span class="kpt-chart__legend-marker" [attr.data-style]="pointStyle()" [style.--kpt-chart-legend-color]="item.color"></span>
+              <span class="kpt-chart__legend-label">{{ item.name }}</span>
+            </button>
+          </li>
+        }
+      </ul>
+    </div>
+  `,
+                    host: { class: 'kpt-chart-legend-host' },
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], pointStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointStyle", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], highlight: [{ type: i0.Output, args: ["highlight"] }] } });
+
+/**
+ * Dymek (tooltip) wykresu — pozycjonowany procentowo względem kontenera
+ * (niezależnie od skali SVG). Zabezpieczony przed wyjściem poza krawędzie.
+ * Element wewnętrzny biblioteki — nie jest częścią publicznego API.
+ */
+class KptChartTooltip {
+    state = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    // Utrzymuje dymek w granicach kontenera (margines 6%).
+    clampX = computed(() => {
+        const t = this.state();
+        if (!t)
+            return 50;
+        return Math.min(94, Math.max(6, t.x));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clampX" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptChartTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptChartTooltip, isStandalone: true, selector: "kpt-chart-tooltip", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kpt-chart-tooltip-host" }, ngImport: i0, template: `
+    @if (state(); as t) {
+      <div class="kpt-chart__tooltip" [class.kpt-chart__tooltip--flip]="t.y < 22" [style.left.%]="clampX()" [style.top.%]="t.y" role="tooltip">
+        @if (t.label) {
+          <div class="kpt-chart__tooltip-title">{{ t.label }}</div>
+        }
+        @for (row of t.rows; track $index) {
+          <div class="kpt-chart__tooltip-row">
+            <span class="kpt-chart__tooltip-dot" [style.background]="row.color"></span>
+            <span class="kpt-chart__tooltip-name">{{ row.name }}</span>
+            <span class="kpt-chart__tooltip-val">{{ row.value }}</span>
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptChartTooltip, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kpt-chart-tooltip',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    @if (state(); as t) {
+      <div class="kpt-chart__tooltip" [class.kpt-chart__tooltip--flip]="t.y < 22" [style.left.%]="clampX()" [style.top.%]="t.y" role="tooltip">
+        @if (t.label) {
+          <div class="kpt-chart__tooltip-title">{{ t.label }}</div>
+        }
+        @for (row of t.rows; track $index) {
+          <div class="kpt-chart__tooltip-row">
+            <span class="kpt-chart__tooltip-dot" [style.background]="row.color"></span>
+            <span class="kpt-chart__tooltip-name">{{ row.name }}</span>
+            <span class="kpt-chart__tooltip-val">{{ row.value }}</span>
+          </div>
+        }
+      </div>
+    }
+  `,
+                    host: { class: 'kpt-chart-tooltip-host' },
+                }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
+
+const VERTICAL_INSETS = { top: 12, right: 16, bottom: 28, left: 46 };
+const HORIZONTAL_INSETS = { top: 12, right: 16, bottom: 28, left: 76 };
+/**
+ * Wykres SVG w pełni konfigurowalny przez obiekt `config`.
+ * Typy: line, bar, pie, doughnut, polarArea, radar. Sygnały + zoneless,
+ * natywne renderowanie SVG (bez manipulacji DOM). Rdzeń obliczeń: `../core`.
+ *
+ * @example
+ * <kpt-chart [config]="{ type: 'line', labels: ['Sty','Lut','Mar'],
+ *   series: [{ name: 'Sprzedaż', data: [12, 19, 7] }] }" />
+ */
+class KptChart {
+    config = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /** Szerokość viewBoxa (jednostki SVG). Wykres skaluje się do kontenera. */
+    width = input(600, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Wysokość viewBoxa (jednostki SVG). */
+    height = input(360, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    // --- Stan interakcji ---
+    hidden = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    highlighted = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+    tooltip = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    /** Indeks kategorii pod kursorem (dla prowadnicy crosshair w wykresie liniowym). */
+    activeIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    // --- Znormalizowana konfiguracja ---
+    type = computed(() => this.config().type, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    anim = computed(() => {
+        const a = this.config().animation ?? {};
+        return { enabled: a.enabled ?? true, duration: a.duration ?? 400, delay: a.delay ?? 0, stagger: a.stagger ?? 60 };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anim" }] : /* istanbul ignore next */ []));
+    legendOpts = computed(() => {
+        const l = this.config().legend ?? {};
+        return {
+            display: l.display ?? true,
+            position: l.position ?? 'bottom',
+            align: l.align ?? 'center',
+            pointStyle: l.pointStyle ?? 'circle',
+            title: l.title,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendOpts" }] : /* istanbul ignore next */ []));
+    titleOpts = computed(() => this.config().title, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleOpts" }] : /* istanbul ignore next */ []));
+    subtitleOpts = computed(() => this.config().subtitle, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitleOpts" }] : /* istanbul ignore next */ []));
+    titleStyle = computed(() => styleFor(this.titleOpts()?.align), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleStyle" }] : /* istanbul ignore next */ []));
+    subtitleStyle = computed(() => styleFor(this.subtitleOpts()?.align), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitleStyle" }] : /* istanbul ignore next */ []));
+    // --- Legenda ---
+    legendItems = computed(() => {
+        const c = this.config();
+        const h = this.hidden();
+        if (c.type === 'pie' || c.type === 'doughnut' || c.type === 'polarArea') {
+            return c.labels.map((label, i) => {
+                const key = 'cat:' + i;
+                return { key, name: label, color: seriesColor(c.series[0]?.color, i), hidden: h.has(key) };
+            });
+        }
+        return c.series.map((s, i) => {
+            const key = 'ser:' + s.name;
+            return { key, name: s.name, color: seriesColor(s.color, i), hidden: h.has(key) };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
+    // --- Wykres liniowy ---
+    lineVm = computed(() => {
+        const c = this.config();
+        if (c.type !== 'line')
+            return null;
+        const h = this.hidden();
+        const active = c.series.map((s, i) => ({ s, i })).filter(({ s }) => !h.has('ser:' + s.name));
+        const values = [];
+        for (const { s } of active)
+            values.push(...s.data);
+        const [mn, mx] = extent(values.length ? values : [0]);
+        const scale = niceScale(Math.min(0, mn), Math.max(0, mx), 5);
+        const plot = plotArea(this.width(), this.height(), VERTICAL_INSETS);
+        const yScale = linearScale(scale.min, scale.max, plot.y + plot.height, plot.y);
+        const n = c.labels.length;
+        const xAt = (i) => (n > 1 ? plot.x + (i / (n - 1)) * plot.width : plot.x + plot.width / 2);
+        const baseline = yScale(0);
+        const series = active.map(({ s, i }) => {
+            const pts = s.data.map((v, idx) => ({ x: xAt(idx), y: yScale(v), value: v, label: c.labels[idx] ?? '' }));
+            const color = seriesColor(s.color, i);
+            return {
+                key: 'ser:' + s.name,
+                name: s.name,
+                color,
+                path: linePath(pts, c.interpolation ?? 'linear'),
+                area: c.area ? areaPath(pts, baseline, c.interpolation ?? 'linear') : null,
+                points: pts,
+            };
+        });
+        return {
+            plot,
+            series,
+            grid: scale.ticks.map((t) => ({ x1: plot.x, y1: yScale(t), x2: plot.x + plot.width, y2: yScale(t) })),
+            valueLabels: scale.ticks.map((t) => ({ x: plot.x - 8, y: yScale(t) + 3, text: formatNumber(t), anchor: 'end' })),
+            catLabels: c.labels.map((l, idx) => ({ x: xAt(idx), y: plot.y + plot.height + 18, text: l, anchor: 'middle' })),
+            showPoints: c.points ?? true,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineVm" }] : /* istanbul ignore next */ []));
+    // --- Wykres słupkowy ---
+    barVm = computed(() => {
+        const c = this.config();
+        if (c.type !== 'bar')
+            return null;
+        const h = this.hidden();
+        const orientation = c.orientation ?? 'vertical';
+        const active = c.series.map((s, i) => ({ s, i })).filter(({ s }) => !h.has('ser:' + s.name));
+        const plot = plotArea(this.width(), this.height(), orientation === 'vertical' ? VERTICAL_INSETS : HORIZONTAL_INSETS);
+        const layout = barLayout(active.map(({ s }) => s.data), c.labels.length, plot, orientation, c.borderRadius ?? 4);
+        const colors = active.map(({ s, i }) => seriesColor(s.color, i));
+        const names = active.map(({ s }) => s.name);
+        const bars = layout.bars.map((b, order) => {
+            const tipX = orientation === 'vertical' ? b.rect.x + b.rect.width / 2 : b.rect.x + b.rect.width;
+            const tipY = orientation === 'vertical' ? b.rect.y : b.rect.y + b.rect.height / 2;
+            return {
+                key: 'ser:' + names[b.seriesIndex],
+                path: b.path,
+                color: colors[b.seriesIndex],
+                name: names[b.seriesIndex],
+                label: c.labels[b.categoryIndex] ?? '',
+                value: b.value,
+                tipX,
+                tipY,
+                index: order,
+            };
+        });
+        const cat = orientation === 'vertical'
+            ? bandScale(c.labels.length, plot.x, plot.x + plot.width, 0.2)
+            : bandScale(c.labels.length, plot.y, plot.y + plot.height, 0.2);
+        if (orientation === 'vertical') {
+            return {
+                orientation,
+                bars,
+                grid: layout.ticks.map((t) => ({ x1: plot.x, y1: t.pos, x2: plot.x + plot.width, y2: t.pos })),
+                valueLabels: layout.ticks.map((t) => ({ x: plot.x - 8, y: t.pos + 3, text: formatNumber(t.value), anchor: 'end' })),
+                catLabels: c.labels.map((l, idx) => ({ x: cat.center(idx), y: plot.y + plot.height + 18, text: l, anchor: 'middle' })),
+            };
+        }
+        return {
+            orientation,
+            bars,
+            grid: layout.ticks.map((t) => ({ x1: t.pos, y1: plot.y, x2: t.pos, y2: plot.y + plot.height })),
+            valueLabels: layout.ticks.map((t) => ({ x: t.pos, y: plot.y + plot.height + 18, text: formatNumber(t.value), anchor: 'middle' })),
+            catLabels: c.labels.map((l, idx) => ({ x: plot.x - 8, y: cat.center(idx) + 3, text: l, anchor: 'end' })),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barVm" }] : /* istanbul ignore next */ []));
+    // --- Pie / Doughnut / Polar Area ---
+    pieVm = computed(() => {
+        const c = this.config();
+        if (c.type !== 'pie' && c.type !== 'doughnut' && c.type !== 'polarArea')
+            return null;
+        const h = this.hidden();
+        const s0 = c.series[0];
+        if (!s0)
+            return [];
+        const { cx, cy, radius } = radialArea(this.width(), this.height(), 8);
+        const entries = c.labels
+            .map((label, i) => ({ label, i, value: s0.data[i] ?? 0, color: seriesColor(s0.color, i) }))
+            .filter((e) => !h.has('cat:' + e.i));
+        const values = entries.map((e) => e.value);
+        if (c.type === 'polarArea') {
+            const max = Math.max(1, ...values.map((v) => Math.max(0, v)));
+            const slices = polarSlices(values, cx, cy, radius, max);
+            return slices.map((sl, k) => tipSlice(entries[k], sl.midAngle, radius * 0.62, cx, cy, sl.path));
+        }
+        const inner = c.type === 'doughnut' ? radius * (c.innerRadius ?? 0.6) : 0;
+        const slices = pieSlices(values, cx, cy, radius, inner);
+        return slices.map((sl, k) => tipSlice(entries[k], sl.midAngle, (radius + inner) / 2, cx, cy, sl.path));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pieVm" }] : /* istanbul ignore next */ []));
+    // --- Radar ---
+    radarVm = computed(() => {
+        const c = this.config();
+        if (c.type !== 'radar')
+            return null;
+        const h = this.hidden();
+        const count = c.labels.length;
+        const { cx, cy, radius } = radialArea(this.width(), this.height(), 30);
+        const grid = radarGrid(count, cx, cy, radius, 4);
+        const active = c.series.map((s, i) => ({ s, i })).filter(({ s }) => !h.has('ser:' + s.name));
+        let max = 1;
+        for (const { s } of active)
+            for (const v of s.data)
+                max = Math.max(max, v);
+        const series = active.map(({ s, i }) => {
+            const pts = radarPoints(s.data, cx, cy, radius, max);
+            return {
+                key: 'ser:' + s.name,
+                name: s.name,
+                color: seriesColor(s.color, i),
+                polygon: polygonPath(pts),
+                points: pts.map((p, idx) => ({ x: p.x, y: p.y, value: s.data[idx] ?? 0, label: c.labels[idx] ?? '' })),
+            };
+        });
+        return {
+            rings: grid.rings,
+            axisLines: grid.axes.map((a) => ({ x1: cx, y1: cy, x2: a.end.x, y2: a.end.y })),
+            axisLabels: grid.axes.map((a) => {
+                const p = polarToCartesian(cx, cy, radius + 14, a.angle);
+                const anchor = Math.abs(p.x - cx) < 1 ? 'middle' : p.x > cx ? 'start' : 'end';
+                return { x: p.x, y: p.y + 3, text: c.labels[a.labelIndex] ?? '', anchor };
+            }),
+            series,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radarVm" }] : /* istanbul ignore next */ []));
+    // --- Crosshair (prowadnica + pigułka etykiety osi X) dla wykresu liniowego ---
+    crosshair = computed(() => {
+        const c = this.config();
+        if (c.type !== 'line' || !c.crosshair)
+            return null;
+        const i = this.activeIndex();
+        const vm = this.lineVm();
+        if (i === null || !vm)
+            return null;
+        const cat = vm.catLabels[i];
+        if (!cat)
+            return null;
+        const w = Math.max(28, cat.text.length * 7 + 16);
+        return {
+            x: cat.x,
+            y1: vm.plot.y,
+            y2: vm.plot.y + vm.plot.height,
+            text: cat.text,
+            labelX: cat.x,
+            labelY: cat.y,
+            pillX: cat.x - w / 2,
+            pillY: cat.y - 13,
+            pillW: w,
+            pillH: 18,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "crosshair" }] : /* istanbul ignore next */ []));
+    // --- Zdarzenia ---
+    onLineEnter(idx, tipX, tipY, name, label, value, color) {
+        this.activeIndex.set(idx);
+        this.showTip(tipX, tipY, name, label, value, color);
+    }
+    onLineLeave() {
+        this.activeIndex.set(null);
+        this.hideTip();
+    }
+    showTip(tipX, tipY, name, label, value, color) {
+        if (this.config().tooltip?.enabled === false)
+            return;
+        const fmt = this.config().tooltip?.format;
+        const text = fmt ? fmt({ series: name, label, value }) : formatNumber(value);
+        this.tooltip.set({ x: (tipX / this.width()) * 100, y: (tipY / this.height()) * 100, label, rows: [{ name, value: text, color }] });
+    }
+    hideTip() {
+        this.tooltip.set(null);
+    }
+    onToggle(key) {
+        const set = new Set(this.hidden());
+        if (set.has(key))
+            set.delete(key);
+        else
+            set.add(key);
+        this.hidden.set(set);
+    }
+    onHighlight(key) {
+        this.highlighted.set(key);
+    }
+    /** Czy dany element ma być wygaszony (aktywne podświetlenie innego). */
+    dim(key) {
+        const hi = this.highlighted();
+        return hi !== null && hi !== key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptChart, isStandalone: true, selector: "kpt-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kpt-chart--no-anim": "!anim().enabled", "style.--kpt-chart-duration": "anim().duration + 'ms'", "style.--kpt-chart-stagger": "anim().stagger + 'ms'", "style.--kpt-chart-delay": "anim().delay + 'ms'" }, classAttribute: "kpt-chart-host" }, ngImport: i0, template: "<div class=\"kpt-chart\" [attr.data-legend]=\"legendOpts().display ? legendOpts().position : null\">\n  @if (titleOpts()?.display && titleOpts()?.text) {\n    <div\n      class=\"kpt-chart__title\"\n      [style.text-align]=\"titleStyle()\"\n      [style.color]=\"titleOpts()?.color\"\n      [style.font-family]=\"titleOpts()?.font?.family\"\n      [style.font-size.px]=\"titleOpts()?.font?.size\"\n      [style.font-weight]=\"titleOpts()?.font?.weight\"\n      [style.padding-top.px]=\"titleOpts()?.padding?.top\"\n      [style.padding-bottom.px]=\"titleOpts()?.padding?.bottom\"\n    >\n      {{ titleOpts()?.text }}\n    </div>\n  }\n  @if (subtitleOpts()?.display && subtitleOpts()?.text) {\n    <div\n      class=\"kpt-chart__subtitle\"\n      [style.text-align]=\"subtitleStyle()\"\n      [style.color]=\"subtitleOpts()?.color\"\n      [style.font-family]=\"subtitleOpts()?.font?.family\"\n      [style.font-size.px]=\"subtitleOpts()?.font?.size\"\n      [style.font-weight]=\"subtitleOpts()?.font?.weight\"\n      [style.padding-top.px]=\"subtitleOpts()?.padding?.top\"\n      [style.padding-bottom.px]=\"subtitleOpts()?.padding?.bottom\"\n    >\n      {{ subtitleOpts()?.text }}\n    </div>\n  }\n\n  <div class=\"kpt-chart__body\">\n    <div class=\"kpt-chart__canvas\">\n      <svg [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\" class=\"kpt-chart__svg\" role=\"img\" preserveAspectRatio=\"xMidYMid meet\">\n        @switch (type()) {\n          @case ('line') {\n            @if (lineVm(); as vm) {\n              <g class=\"kpt-chart__grid\">\n                @for (g of vm.grid; track $index) {\n                  <line class=\"kpt-chart__gridline\" [attr.x1]=\"g.x1\" [attr.y1]=\"g.y1\" [attr.x2]=\"g.x2\" [attr.y2]=\"g.y2\" />\n                }\n              </g>\n              @if (crosshair(); as ch) {\n                <line class=\"kpt-chart__crosshair\" [attr.x1]=\"ch.x\" [attr.y1]=\"ch.y1\" [attr.x2]=\"ch.x\" [attr.y2]=\"ch.y2\" />\n              }\n              <g class=\"kpt-chart__axis\">\n                @for (l of vm.valueLabels; track $index) {\n                  <text [attr.x]=\"l.x\" [attr.y]=\"l.y\" [attr.text-anchor]=\"l.anchor\">{{ l.text }}</text>\n                }\n                @for (l of vm.catLabels; track $index) {\n                  <text [attr.x]=\"l.x\" [attr.y]=\"l.y\" [attr.text-anchor]=\"l.anchor\">{{ l.text }}</text>\n                }\n              </g>\n              @if (crosshair(); as ch) {\n                <g class=\"kpt-chart__cat-active\">\n                  <rect [attr.x]=\"ch.pillX\" [attr.y]=\"ch.pillY\" [attr.width]=\"ch.pillW\" [attr.height]=\"ch.pillH\" [attr.rx]=\"ch.pillH / 2\" />\n                  <text [attr.x]=\"ch.labelX\" [attr.y]=\"ch.labelY\" text-anchor=\"middle\">{{ ch.text }}</text>\n                </g>\n              }\n              @for (s of vm.series; track s.key) {\n                <g class=\"kpt-chart__series\" [class.kpt-chart__series--dim]=\"dim(s.key)\">\n                  @if (s.area) {\n                    <path class=\"kpt-chart__area\" [attr.d]=\"s.area\" [style.fill]=\"s.color\" />\n                  }\n                  <path class=\"kpt-chart__line\" [attr.d]=\"s.path\" [style.stroke]=\"s.color\" pathLength=\"1\" />\n                  @for (p of s.points; track $index) {\n                    @if (vm.showPoints) {\n                      <circle\n                        class=\"kpt-chart__point\"\n                        [class.kpt-chart__point--active]=\"activeIndex() === $index\"\n                        [attr.cx]=\"p.x\"\n                        [attr.cy]=\"p.y\"\n                        r=\"4\"\n                        [style.fill]=\"s.color\"\n                        [style.--kpt-chart-i]=\"$index\"\n                      />\n                    }\n                    <circle\n                      class=\"kpt-chart__hit\"\n                      [attr.cx]=\"p.x\"\n                      [attr.cy]=\"p.y\"\n                      r=\"12\"\n                      (pointerenter)=\"onLineEnter($index, p.x, p.y, s.name, p.label, p.value, s.color)\"\n                      (pointerleave)=\"onLineLeave()\"\n                    />\n                  }\n                </g>\n              }\n            }\n          }\n\n          @case ('bar') {\n            @if (barVm(); as vm) {\n              <g class=\"kpt-chart__grid\">\n                @for (g of vm.grid; track $index) {\n                  <line class=\"kpt-chart__gridline\" [attr.x1]=\"g.x1\" [attr.y1]=\"g.y1\" [attr.x2]=\"g.x2\" [attr.y2]=\"g.y2\" />\n                }\n              </g>\n              <g class=\"kpt-chart__axis\">\n                @for (l of vm.valueLabels; track $index) {\n                  <text [attr.x]=\"l.x\" [attr.y]=\"l.y\" [attr.text-anchor]=\"l.anchor\">{{ l.text }}</text>\n                }\n                @for (l of vm.catLabels; track $index) {\n                  <text [attr.x]=\"l.x\" [attr.y]=\"l.y\" [attr.text-anchor]=\"l.anchor\">{{ l.text }}</text>\n                }\n              </g>\n              <g class=\"kpt-chart__bars\" [attr.data-orientation]=\"vm.orientation\">\n                @for (b of vm.bars; track b.key + '#' + b.index) {\n                  <path\n                    class=\"kpt-chart__bar\"\n                    [class.kpt-chart__series--dim]=\"dim(b.key)\"\n                    [attr.d]=\"b.path\"\n                    [style.fill]=\"b.color\"\n                    [style.--kpt-chart-i]=\"b.index\"\n                    (pointerenter)=\"showTip(b.tipX, b.tipY, b.name, b.label, b.value, b.color)\"\n                    (pointerleave)=\"hideTip()\"\n                  />\n                }\n              </g>\n            }\n          }\n\n          @case ('radar') {\n            @if (radarVm(); as vm) {\n              <g class=\"kpt-chart__grid\">\n                @for (r of vm.rings; track $index) {\n                  <path class=\"kpt-chart__ring\" [attr.d]=\"r\" />\n                }\n                @for (a of vm.axisLines; track $index) {\n                  <line class=\"kpt-chart__gridline\" [attr.x1]=\"a.x1\" [attr.y1]=\"a.y1\" [attr.x2]=\"a.x2\" [attr.y2]=\"a.y2\" />\n                }\n              </g>\n              <g class=\"kpt-chart__axis\">\n                @for (l of vm.axisLabels; track $index) {\n                  <text [attr.x]=\"l.x\" [attr.y]=\"l.y\" [attr.text-anchor]=\"l.anchor\">{{ l.text }}</text>\n                }\n              </g>\n              @for (s of vm.series; track s.key) {\n                <g class=\"kpt-chart__series kpt-chart__radar\" [class.kpt-chart__series--dim]=\"dim(s.key)\">\n                  <path class=\"kpt-chart__radar-area\" [attr.d]=\"s.polygon\" [style.fill]=\"s.color\" [style.stroke]=\"s.color\" />\n                  @for (p of s.points; track $index) {\n                    <circle\n                      class=\"kpt-chart__point\"\n                      [attr.cx]=\"p.x\"\n                      [attr.cy]=\"p.y\"\n                      r=\"4\"\n                      [style.fill]=\"s.color\"\n                      [style.--kpt-chart-i]=\"$index\"\n                      (pointerenter)=\"showTip(p.x, p.y, s.name, p.label, p.value, s.color)\"\n                      (pointerleave)=\"hideTip()\"\n                    />\n                  }\n                </g>\n              }\n            }\n          }\n\n          @default {\n            @if (pieVm(); as slices) {\n              <g class=\"kpt-chart__slices\">\n                @for (sl of slices; track sl.key) {\n                  <path\n                    class=\"kpt-chart__slice\"\n                    [class.kpt-chart__series--dim]=\"dim(sl.key)\"\n                    [attr.d]=\"sl.path\"\n                    [style.fill]=\"sl.color\"\n                    [style.--kpt-chart-i]=\"$index\"\n                    (pointerenter)=\"showTip(sl.tipX, sl.tipY, sl.label, '', sl.value, sl.color)\"\n                    (pointerleave)=\"hideTip()\"\n                  />\n                }\n              </g>\n            }\n          }\n        }\n      </svg>\n\n      <kpt-chart-tooltip [state]=\"tooltip()\" />\n    </div>\n\n    @if (legendOpts().display) {\n      <kpt-chart-legend\n        [items]=\"legendItems()\"\n        [position]=\"legendOpts().position\"\n        [align]=\"legendOpts().align\"\n        [pointStyle]=\"legendOpts().pointStyle\"\n        [title]=\"legendOpts().title\"\n        (toggle)=\"onToggle($event)\"\n        (highlight)=\"onHighlight($event)\"\n      />\n    }\n  </div>\n</div>\n", styles: ["@layer kpt.components{.kpt-chart-host{display:block;--kpt-chart-duration: .4s;--kpt-chart-stagger: 60ms;--kpt-chart-delay: 0ms;--kpt-chart-ease: cubic-bezier(.25, 1, .5, 1)}.kpt-chart{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem);color:var(--kpt-color-on-surface)}.kpt-chart__title{font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface)}.kpt-chart__subtitle{font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted, #6b7280)}.kpt-chart__body{display:flex;gap:var(--kpt-space-3, .75rem);align-items:center;min-width:0}.kpt-chart[data-legend=top] .kpt-chart__body,.kpt-chart[data-legend=bottom] .kpt-chart__body{flex-direction:column}.kpt-chart[data-legend=top] .kpt-chart-legend-host,.kpt-chart[data-legend=left] .kpt-chart-legend-host{order:-1}.kpt-chart__canvas{position:relative;flex:1 1 auto;min-width:0;width:100%}.kpt-chart__svg{display:block;width:100%;height:auto}.kpt-chart__gridline{stroke:var(--kpt-color-border);stroke-width:1;opacity:.7}.kpt-chart__ring{fill:none;stroke:var(--kpt-color-border);stroke-width:1;opacity:.7}.kpt-chart__axis text{fill:var(--kpt-color-on-surface-muted, #6b7280);font-size:11px;font-family:var(--kpt-font-family-sans)}.kpt-chart__crosshair{stroke:var(--kpt-color-border-strong);stroke-width:1;stroke-dasharray:4 4;opacity:.75;pointer-events:none}.kpt-chart__cat-active{pointer-events:none}.kpt-chart__cat-active rect{fill:var(--kpt-color-on-surface)}.kpt-chart__cat-active text{fill:var(--kpt-color-surface);font-size:11px;font-weight:var(--kpt-font-weight-medium, 500);font-family:var(--kpt-font-family-sans)}.kpt-chart__series,.kpt-chart__bar,.kpt-chart__slice{transition:opacity .2s var(--kpt-chart-ease)}.kpt-chart__series--dim{opacity:.22}.kpt-chart__line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.kpt-chart__area{stroke:none;opacity:.15}.kpt-chart__point{stroke:var(--kpt-color-surface);stroke-width:2;cursor:pointer;transition:transform .15s var(--kpt-chart-ease);transform-box:fill-box;transform-origin:center}.kpt-chart__point:hover{transform:scale(1.4)}.kpt-chart__point--active{transform:scale(1.5)}.kpt-chart__hit{fill:transparent;pointer-events:all;cursor:pointer}.kpt-chart__bar{cursor:pointer}.kpt-chart__slice{cursor:pointer;stroke:var(--kpt-color-surface);stroke-width:1.5}.kpt-chart__radar-area{fill-opacity:.18;stroke-width:2;stroke-linejoin:round}.kpt-chart__legend-title{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-color-on-surface-muted);margin-bottom:var(--kpt-space-1, .25rem)}.kpt-chart__legend-list{display:flex;flex-wrap:wrap;gap:var(--kpt-space-2, .5rem) var(--kpt-space-4, 1rem);align-items:center;justify-content:center;margin:0;padding:0;list-style:none}.kpt-chart__legend[data-align=start] .kpt-chart__legend-list{justify-content:flex-start}.kpt-chart__legend[data-align=end] .kpt-chart__legend-list{justify-content:flex-end}.kpt-chart__legend[data-position=left] .kpt-chart__legend-list,.kpt-chart__legend[data-position=right] .kpt-chart__legend-list{flex-direction:column;align-items:flex-start}.kpt-chart__legend-item{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-chart__legend-item--hidden{opacity:.45}.kpt-chart__legend-item--hidden .kpt-chart__legend-label{text-decoration:line-through}.kpt-chart__legend-marker{display:inline-block;width:12px;height:12px;background:var(--kpt-chart-legend-color);flex:none}.kpt-chart__legend-marker[data-style=circle]{border-radius:var(--kpt-radius-full, 9999px)}.kpt-chart__legend-marker[data-style=rect]{border-radius:var(--kpt-radius-sm, .25rem)}.kpt-chart__legend-marker[data-style=rectRot]{transform:rotate(45deg);border-radius:2px}.kpt-chart__legend-marker[data-style=triangle]{background:none;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--kpt-chart-legend-color)}.kpt-chart__legend-marker[data-style=line]{height:3px;border-radius:var(--kpt-radius-full, 9999px)}.kpt-chart__tooltip{position:absolute;transform:translate(-50%,calc(-100% - 10px));pointer-events:none;background:var(--kpt-color-surface-raised, var(--kpt-color-surface));color:var(--kpt-color-on-surface);border:1px solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:0 4px 16px #0000001f;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);white-space:nowrap;z-index:2}.kpt-chart__tooltip--flip{transform:translate(-50%,12px)}.kpt-chart__tooltip-title{font-weight:var(--kpt-font-weight-semibold, 600);margin-bottom:2px}.kpt-chart__tooltip-row{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem)}.kpt-chart__tooltip-dot{width:8px;height:8px;border-radius:var(--kpt-radius-full, 9999px);flex:none}.kpt-chart__tooltip-name{color:var(--kpt-color-on-surface-muted)}.kpt-chart__tooltip-val{margin-left:auto;font-weight:var(--kpt-font-weight-medium, 500)}.kpt-chart__line{stroke-dasharray:1;stroke-dashoffset:1;animation:kpt-chart-draw var(--kpt-chart-duration) var(--kpt-chart-ease) var(--kpt-chart-delay) forwards}.kpt-chart__area{animation:kpt-chart-fade var(--kpt-chart-duration) var(--kpt-chart-ease) var(--kpt-chart-delay) backwards}.kpt-chart__point{animation:kpt-chart-fade var(--kpt-chart-duration) var(--kpt-chart-ease) calc(var(--kpt-chart-delay) + var(--kpt-chart-duration) + var(--kpt-chart-i, 0) * var(--kpt-chart-stagger)) backwards}.kpt-chart__bars[data-orientation=vertical] .kpt-chart__bar{transform-box:fill-box;transform-origin:bottom;animation:kpt-chart-grow-y var(--kpt-chart-duration) var(--kpt-chart-ease) calc(var(--kpt-chart-delay) + var(--kpt-chart-i, 0) * var(--kpt-chart-stagger)) backwards}.kpt-chart__bars[data-orientation=horizontal] .kpt-chart__bar{transform-box:fill-box;transform-origin:left;animation:kpt-chart-grow-x var(--kpt-chart-duration) var(--kpt-chart-ease) calc(var(--kpt-chart-delay) + var(--kpt-chart-i, 0) * var(--kpt-chart-stagger)) backwards}.kpt-chart__slice,.kpt-chart__radar-area{transform-box:fill-box;transform-origin:center}.kpt-chart__slice{animation:kpt-chart-pop var(--kpt-chart-duration) var(--kpt-chart-ease) calc(var(--kpt-chart-delay) + var(--kpt-chart-i, 0) * var(--kpt-chart-stagger)) backwards}.kpt-chart__radar-area{animation:kpt-chart-pop var(--kpt-chart-duration) var(--kpt-chart-ease) var(--kpt-chart-delay) backwards}@keyframes kpt-chart-draw{to{stroke-dashoffset:0}}@keyframes kpt-chart-fade{0%{opacity:0}}@keyframes kpt-chart-grow-y{0%{transform:scaleY(0)}}@keyframes kpt-chart-grow-x{0%{transform:scaleX(0)}}@keyframes kpt-chart-pop{0%{transform:scale(0);opacity:0}}.kpt-chart--no-anim :is(.kpt-chart__line,.kpt-chart__area,.kpt-chart__point,.kpt-chart__bar,.kpt-chart__slice,.kpt-chart__radar-area){animation:none;stroke-dashoffset:0}@media(prefers-reduced-motion:reduce){.kpt-chart :is(.kpt-chart__line,.kpt-chart__area,.kpt-chart__point,.kpt-chart__bar,.kpt-chart__slice,.kpt-chart__radar-area){animation:none;stroke-dashoffset:0}}}\n"], dependencies: [{ kind: "component", type: KptChartLegend, selector: "kpt-chart-legend", inputs: ["items", "position", "align", "pointStyle", "title"], outputs: ["toggle", "highlight"] }, { kind: "component", type: KptChartTooltip, selector: "kpt-chart-tooltip", inputs: ["state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'kpt-chart', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptChartLegend, KptChartTooltip], host: {
+                        class: 'kpt-chart-host',
+                        '[class.kpt-chart--no-anim]': '!anim().enabled',
+                        '[style.--kpt-chart-duration]': "anim().duration + 'ms'",
+                        '[style.--kpt-chart-stagger]': "anim().stagger + 'ms'",
+                        '[style.--kpt-chart-delay]': "anim().delay + 'ms'",
+                    }, template: "<div class=\"kpt-chart\" [attr.data-legend]=\"legendOpts().display ? legendOpts().position : null\">\n  @if (titleOpts()?.display && titleOpts()?.text) {\n    <div\n      class=\"kpt-chart__title\"\n      [style.text-align]=\"titleStyle()\"\n      [style.color]=\"titleOpts()?.color\"\n      [style.font-family]=\"titleOpts()?.font?.family\"\n      [style.font-size.px]=\"titleOpts()?.font?.size\"\n      [style.font-weight]=\"titleOpts()?.font?.weight\"\n      [style.padding-top.px]=\"titleOpts()?.padding?.top\"\n      [style.padding-bottom.px]=\"titleOpts()?.padding?.bottom\"\n    >\n      {{ titleOpts()?.text }}\n    </div>\n  }\n  @if (subtitleOpts()?.display && subtitleOpts()?.text) {\n    <div\n      class=\"kpt-chart__subtitle\"\n      [style.text-align]=\"subtitleStyle()\"\n      [style.color]=\"subtitleOpts()?.color\"\n      [style.font-family]=\"subtitleOpts()?.font?.family\"\n      [style.font-size.px]=\"subtitleOpts()?.font?.size\"\n      [style.font-weight]=\"subtitleOpts()?.font?.weight\"\n      [style.padding-top.px]=\"subtitleOpts()?.padding?.top\"\n      [style.padding-bottom.px]=\"subtitleOpts()?.padding?.bottom\"\n    >\n      {{ subtitleOpts()?.text }}\n    </div>\n  }\n\n  <div class=\"kpt-chart__body\">\n    <div class=\"kpt-chart__canvas\">\n      <svg [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\" class=\"kpt-chart__svg\" role=\"img\" preserveAspectRatio=\"xMidYMid meet\">\n        @switch (type()) {\n          @case ('line') {\n            @if (lineVm(); as vm) {\n              <g class=\"kpt-chart__grid\">\n                @for (g of vm.grid; track $index) {\n                  <line class=\"kpt-chart__gridline\" [attr.x1]=\"g.x1\" [attr.y1]=\"g.y1\" [attr.x2]=\"g.x2\" [attr.y2]=\"g.y2\" />\n                }\n              </g>\n              @if (crosshair(); as ch) {\n                <line class=\"kpt-chart__crosshair\" [attr.x1]=\"ch.x\" [attr.y1]=\"ch.y1\" [attr.x2]=\"ch.x\" [attr.y2]=\"ch.y2\" />\n              }\n              <g class=\"kpt-chart__axis\">\n                @for (l of vm.valueLabels; track $index) {\n                  <text [attr.x]=\"l.x\" [attr.y]=\"l.y\" [attr.text-anchor]=\"l.anchor\">{{ l.text }}</text>\n                }\n                @for (l of vm.catLabels; track $index) {\n                  <text [attr.x]=\"l.x\" [attr.y]=\"l.y\" [attr.text-anchor]=\"l.anchor\">{{ l.text }}</text>\n                }\n              </g>\n              @if (crosshair(); as ch) {\n                <g class=\"kpt-chart__cat-active\">\n                  <rect [attr.x]=\"ch.pillX\" [attr.y]=\"ch.pillY\" [attr.width]=\"ch.pillW\" [attr.height]=\"ch.pillH\" [attr.rx]=\"ch.pillH / 2\" />\n                  <text [attr.x]=\"ch.labelX\" [attr.y]=\"ch.labelY\" text-anchor=\"middle\">{{ ch.text }}</text>\n                </g>\n              }\n              @for (s of vm.series; track s.key) {\n                <g class=\"kpt-chart__series\" [class.kpt-chart__series--dim]=\"dim(s.key)\">\n                  @if (s.area) {\n                    <path class=\"kpt-chart__area\" [attr.d]=\"s.area\" [style.fill]=\"s.color\" />\n                  }\n                  <path class=\"kpt-chart__line\" [attr.d]=\"s.path\" [style.stroke]=\"s.color\" pathLength=\"1\" />\n                  @for (p of s.points; track $index) {\n                    @if (vm.showPoints) {\n                      <circle\n                        class=\"kpt-chart__point\"\n                        [class.kpt-chart__point--active]=\"activeIndex() === $index\"\n                        [attr.cx]=\"p.x\"\n                        [attr.cy]=\"p.y\"\n                        r=\"4\"\n                        [style.fill]=\"s.color\"\n                        [style.--kpt-chart-i]=\"$index\"\n                      />\n                    }\n                    <circle\n                      class=\"kpt-chart__hit\"\n                      [attr.cx]=\"p.x\"\n                      [attr.cy]=\"p.y\"\n                      r=\"12\"\n                      (pointerenter)=\"onLineEnter($index, p.x, p.y, s.name, p.label, p.value, s.color)\"\n                      (pointerleave)=\"onLineLeave()\"\n                    />\n                  }\n                </g>\n              }\n            }\n          }\n\n          @case ('bar') {\n            @if (barVm(); as vm) {\n              <g class=\"kpt-chart__grid\">\n                @for (g of vm.grid; track $index) {\n                  <line class=\"kpt-chart__gridline\" [attr.x1]=\"g.x1\" [attr.y1]=\"g.y1\" [attr.x2]=\"g.x2\" [attr.y2]=\"g.y2\" />\n                }\n              </g>\n              <g class=\"kpt-chart__axis\">\n                @for (l of vm.valueLabels; track $index) {\n                  <text [attr.x]=\"l.x\" [attr.y]=\"l.y\" [attr.text-anchor]=\"l.anchor\">{{ l.text }}</text>\n                }\n                @for (l of vm.catLabels; track $index) {\n                  <text [attr.x]=\"l.x\" [attr.y]=\"l.y\" [attr.text-anchor]=\"l.anchor\">{{ l.text }}</text>\n                }\n              </g>\n              <g class=\"kpt-chart__bars\" [attr.data-orientation]=\"vm.orientation\">\n                @for (b of vm.bars; track b.key + '#' + b.index) {\n                  <path\n                    class=\"kpt-chart__bar\"\n                    [class.kpt-chart__series--dim]=\"dim(b.key)\"\n                    [attr.d]=\"b.path\"\n                    [style.fill]=\"b.color\"\n                    [style.--kpt-chart-i]=\"b.index\"\n                    (pointerenter)=\"showTip(b.tipX, b.tipY, b.name, b.label, b.value, b.color)\"\n                    (pointerleave)=\"hideTip()\"\n                  />\n                }\n              </g>\n            }\n          }\n\n          @case ('radar') {\n            @if (radarVm(); as vm) {\n              <g class=\"kpt-chart__grid\">\n                @for (r of vm.rings; track $index) {\n                  <path class=\"kpt-chart__ring\" [attr.d]=\"r\" />\n                }\n                @for (a of vm.axisLines; track $index) {\n                  <line class=\"kpt-chart__gridline\" [attr.x1]=\"a.x1\" [attr.y1]=\"a.y1\" [attr.x2]=\"a.x2\" [attr.y2]=\"a.y2\" />\n                }\n              </g>\n              <g class=\"kpt-chart__axis\">\n                @for (l of vm.axisLabels; track $index) {\n                  <text [attr.x]=\"l.x\" [attr.y]=\"l.y\" [attr.text-anchor]=\"l.anchor\">{{ l.text }}</text>\n                }\n              </g>\n              @for (s of vm.series; track s.key) {\n                <g class=\"kpt-chart__series kpt-chart__radar\" [class.kpt-chart__series--dim]=\"dim(s.key)\">\n                  <path class=\"kpt-chart__radar-area\" [attr.d]=\"s.polygon\" [style.fill]=\"s.color\" [style.stroke]=\"s.color\" />\n                  @for (p of s.points; track $index) {\n                    <circle\n                      class=\"kpt-chart__point\"\n                      [attr.cx]=\"p.x\"\n                      [attr.cy]=\"p.y\"\n                      r=\"4\"\n                      [style.fill]=\"s.color\"\n                      [style.--kpt-chart-i]=\"$index\"\n                      (pointerenter)=\"showTip(p.x, p.y, s.name, p.label, p.value, s.color)\"\n                      (pointerleave)=\"hideTip()\"\n                    />\n                  }\n                </g>\n              }\n            }\n          }\n\n          @default {\n            @if (pieVm(); as slices) {\n              <g class=\"kpt-chart__slices\">\n                @for (sl of slices; track sl.key) {\n                  <path\n                    class=\"kpt-chart__slice\"\n                    [class.kpt-chart__series--dim]=\"dim(sl.key)\"\n                    [attr.d]=\"sl.path\"\n                    [style.fill]=\"sl.color\"\n                    [style.--kpt-chart-i]=\"$index\"\n                    (pointerenter)=\"showTip(sl.tipX, sl.tipY, sl.label, '', sl.value, sl.color)\"\n                    (pointerleave)=\"hideTip()\"\n                  />\n                }\n              </g>\n            }\n          }\n        }\n      </svg>\n\n      <kpt-chart-tooltip [state]=\"tooltip()\" />\n    </div>\n\n    @if (legendOpts().display) {\n      <kpt-chart-legend\n        [items]=\"legendItems()\"\n        [position]=\"legendOpts().position\"\n        [align]=\"legendOpts().align\"\n        [pointStyle]=\"legendOpts().pointStyle\"\n        [title]=\"legendOpts().title\"\n        (toggle)=\"onToggle($event)\"\n        (highlight)=\"onHighlight($event)\"\n      />\n    }\n  </div>\n</div>\n", styles: ["@layer kpt.components{.kpt-chart-host{display:block;--kpt-chart-duration: .4s;--kpt-chart-stagger: 60ms;--kpt-chart-delay: 0ms;--kpt-chart-ease: cubic-bezier(.25, 1, .5, 1)}.kpt-chart{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem);color:var(--kpt-color-on-surface)}.kpt-chart__title{font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface)}.kpt-chart__subtitle{font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted, #6b7280)}.kpt-chart__body{display:flex;gap:var(--kpt-space-3, .75rem);align-items:center;min-width:0}.kpt-chart[data-legend=top] .kpt-chart__body,.kpt-chart[data-legend=bottom] .kpt-chart__body{flex-direction:column}.kpt-chart[data-legend=top] .kpt-chart-legend-host,.kpt-chart[data-legend=left] .kpt-chart-legend-host{order:-1}.kpt-chart__canvas{position:relative;flex:1 1 auto;min-width:0;width:100%}.kpt-chart__svg{display:block;width:100%;height:auto}.kpt-chart__gridline{stroke:var(--kpt-color-border);stroke-width:1;opacity:.7}.kpt-chart__ring{fill:none;stroke:var(--kpt-color-border);stroke-width:1;opacity:.7}.kpt-chart__axis text{fill:var(--kpt-color-on-surface-muted, #6b7280);font-size:11px;font-family:var(--kpt-font-family-sans)}.kpt-chart__crosshair{stroke:var(--kpt-color-border-strong);stroke-width:1;stroke-dasharray:4 4;opacity:.75;pointer-events:none}.kpt-chart__cat-active{pointer-events:none}.kpt-chart__cat-active rect{fill:var(--kpt-color-on-surface)}.kpt-chart__cat-active text{fill:var(--kpt-color-surface);font-size:11px;font-weight:var(--kpt-font-weight-medium, 500);font-family:var(--kpt-font-family-sans)}.kpt-chart__series,.kpt-chart__bar,.kpt-chart__slice{transition:opacity .2s var(--kpt-chart-ease)}.kpt-chart__series--dim{opacity:.22}.kpt-chart__line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.kpt-chart__area{stroke:none;opacity:.15}.kpt-chart__point{stroke:var(--kpt-color-surface);stroke-width:2;cursor:pointer;transition:transform .15s var(--kpt-chart-ease);transform-box:fill-box;transform-origin:center}.kpt-chart__point:hover{transform:scale(1.4)}.kpt-chart__point--active{transform:scale(1.5)}.kpt-chart__hit{fill:transparent;pointer-events:all;cursor:pointer}.kpt-chart__bar{cursor:pointer}.kpt-chart__slice{cursor:pointer;stroke:var(--kpt-color-surface);stroke-width:1.5}.kpt-chart__radar-area{fill-opacity:.18;stroke-width:2;stroke-linejoin:round}.kpt-chart__legend-title{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-color-on-surface-muted);margin-bottom:var(--kpt-space-1, .25rem)}.kpt-chart__legend-list{display:flex;flex-wrap:wrap;gap:var(--kpt-space-2, .5rem) var(--kpt-space-4, 1rem);align-items:center;justify-content:center;margin:0;padding:0;list-style:none}.kpt-chart__legend[data-align=start] .kpt-chart__legend-list{justify-content:flex-start}.kpt-chart__legend[data-align=end] .kpt-chart__legend-list{justify-content:flex-end}.kpt-chart__legend[data-position=left] .kpt-chart__legend-list,.kpt-chart__legend[data-position=right] .kpt-chart__legend-list{flex-direction:column;align-items:flex-start}.kpt-chart__legend-item{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-chart__legend-item--hidden{opacity:.45}.kpt-chart__legend-item--hidden .kpt-chart__legend-label{text-decoration:line-through}.kpt-chart__legend-marker{display:inline-block;width:12px;height:12px;background:var(--kpt-chart-legend-color);flex:none}.kpt-chart__legend-marker[data-style=circle]{border-radius:var(--kpt-radius-full, 9999px)}.kpt-chart__legend-marker[data-style=rect]{border-radius:var(--kpt-radius-sm, .25rem)}.kpt-chart__legend-marker[data-style=rectRot]{transform:rotate(45deg);border-radius:2px}.kpt-chart__legend-marker[data-style=triangle]{background:none;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--kpt-chart-legend-color)}.kpt-chart__legend-marker[data-style=line]{height:3px;border-radius:var(--kpt-radius-full, 9999px)}.kpt-chart__tooltip{position:absolute;transform:translate(-50%,calc(-100% - 10px));pointer-events:none;background:var(--kpt-color-surface-raised, var(--kpt-color-surface));color:var(--kpt-color-on-surface);border:1px solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:0 4px 16px #0000001f;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);white-space:nowrap;z-index:2}.kpt-chart__tooltip--flip{transform:translate(-50%,12px)}.kpt-chart__tooltip-title{font-weight:var(--kpt-font-weight-semibold, 600);margin-bottom:2px}.kpt-chart__tooltip-row{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem)}.kpt-chart__tooltip-dot{width:8px;height:8px;border-radius:var(--kpt-radius-full, 9999px);flex:none}.kpt-chart__tooltip-name{color:var(--kpt-color-on-surface-muted)}.kpt-chart__tooltip-val{margin-left:auto;font-weight:var(--kpt-font-weight-medium, 500)}.kpt-chart__line{stroke-dasharray:1;stroke-dashoffset:1;animation:kpt-chart-draw var(--kpt-chart-duration) var(--kpt-chart-ease) var(--kpt-chart-delay) forwards}.kpt-chart__area{animation:kpt-chart-fade var(--kpt-chart-duration) var(--kpt-chart-ease) var(--kpt-chart-delay) backwards}.kpt-chart__point{animation:kpt-chart-fade var(--kpt-chart-duration) var(--kpt-chart-ease) calc(var(--kpt-chart-delay) + var(--kpt-chart-duration) + var(--kpt-chart-i, 0) * var(--kpt-chart-stagger)) backwards}.kpt-chart__bars[data-orientation=vertical] .kpt-chart__bar{transform-box:fill-box;transform-origin:bottom;animation:kpt-chart-grow-y var(--kpt-chart-duration) var(--kpt-chart-ease) calc(var(--kpt-chart-delay) + var(--kpt-chart-i, 0) * var(--kpt-chart-stagger)) backwards}.kpt-chart__bars[data-orientation=horizontal] .kpt-chart__bar{transform-box:fill-box;transform-origin:left;animation:kpt-chart-grow-x var(--kpt-chart-duration) var(--kpt-chart-ease) calc(var(--kpt-chart-delay) + var(--kpt-chart-i, 0) * var(--kpt-chart-stagger)) backwards}.kpt-chart__slice,.kpt-chart__radar-area{transform-box:fill-box;transform-origin:center}.kpt-chart__slice{animation:kpt-chart-pop var(--kpt-chart-duration) var(--kpt-chart-ease) calc(var(--kpt-chart-delay) + var(--kpt-chart-i, 0) * var(--kpt-chart-stagger)) backwards}.kpt-chart__radar-area{animation:kpt-chart-pop var(--kpt-chart-duration) var(--kpt-chart-ease) var(--kpt-chart-delay) backwards}@keyframes kpt-chart-draw{to{stroke-dashoffset:0}}@keyframes kpt-chart-fade{0%{opacity:0}}@keyframes kpt-chart-grow-y{0%{transform:scaleY(0)}}@keyframes kpt-chart-grow-x{0%{transform:scaleX(0)}}@keyframes kpt-chart-pop{0%{transform:scale(0);opacity:0}}.kpt-chart--no-anim :is(.kpt-chart__line,.kpt-chart__area,.kpt-chart__point,.kpt-chart__bar,.kpt-chart__slice,.kpt-chart__radar-area){animation:none;stroke-dashoffset:0}@media(prefers-reduced-motion:reduce){.kpt-chart :is(.kpt-chart__line,.kpt-chart__area,.kpt-chart__point,.kpt-chart__bar,.kpt-chart__slice,.kpt-chart__radar-area){animation:none;stroke-dashoffset:0}}}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+// Buduje SliceVm z pozycją tooltipa na promieniu środka wycinka.
+function tipSlice(entry, midAngle, tipRadius, cx, cy, path) {
+    const p = polarToCartesian(cx, cy, tipRadius, midAngle);
+    return { key: 'cat:' + entry.i, path, color: entry.color, label: entry.label, value: entry.value, tipX: p.x, tipY: p.y };
+}
+function styleFor(align) {
+    if (align === 'center')
+        return 'center';
+    if (align === 'end')
+        return 'right';
+    return 'left';
+}
+
+/*
+ * Rdzeń wykresów — czyste typy TypeScript (bez zależności od DOM/frameworka).
+ * Współdzielone przez warstwę Angular (Faza 1) i React (Faza 2).
+ */
+
+/* Rdzeń wykresów (pure TS) — barrel eksportów. */
+
+/*
+ * Public API — @konce-pt/angular/charts
+ * Wykresy SVG dla Angulara (sygnały, zoneless). Rdzeń obliczeń: pure TS.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KPT_CHART_PALETTE, KptChart, areaPath, barLayout, linePath, niceScale, pieSlices, polarSlices, radarGrid, radarPoints, seriesColor };
+//# sourceMappingURL=konce-pt-angular-charts.mjs.map