@konce-pt/angular 0.7.8 → 0.7.10

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @konce-pt/angular
 
+## 0.7.10
+
+### Minor Changes
+
+- 8b827e1: **Breaking:** output `select` zmienia nazwę na `selected` w komponentach menu — `kpt-menu`,
+  `kpt-menubar`, `kpt-megamenu`, `kpt-context-menu`, `kpt-split-button` i `kpt-speed-dial`.
+
+  `select` to standardowe zdarzenie DOM (zaznaczenie tekstu w `<input>`/`<textarea>`), więc
+  output o tej nazwie przesłania je w szablonie. Nowa nazwa trzyma się konwencji imiesłowowej,
+  która jest już w bibliotece (`closed`, `cleared`, `removed`, `cancelled`).
+
+  Migracja to zamiana nazwy w bindowaniu:
+
+  ```diff
+  -<kpt-menu [items]="items" (select)="onSelect($event)">
+  +<kpt-menu [items]="items" (selected)="onSelect($event)">
+  ```
+
+  Przy okazji output `toggle` w wewnętrznej legendzie wykresu nosi teraz nazwę `seriesToggle`
+  (z tego samego powodu). `KptChartLegend` nie jest eksportowany z `@konce-pt/angular/charts`,
+  więc dla użytkowników `kpt-chart` nic się nie zmienia.
+
+### Patch Changes
+
+- `kpt-datepicker`: porządki w środku zegara i triggerze. Formatowanie tekstu triggera
+  rozbite na metodę per tryb wyboru, powtórzona trygonometria pierścieni godzin i minut
+  zebrana w jedną funkcję pozycjonującą znacznik, a obsługa wskaźnika tarczy liczy sam kąt
+  i oddaje ustawianie wartości osobnym metodom. Zachowanie i API bez zmian.
+- ea37d33: `kpt-data-table`: komórka z zwykłym obiektem nie jest już zamieniana na `'[object Object]'`
+  przy filtrowaniu, sortowaniu i w wierszu podsumowania — daje pusty tekst. Wcześniej filtr
+  tekstowy „obj" dopasowywał każdy wiersz z obiektem w takiej kolumnie, a sortowanie uznawało
+  je wszystkie za równe. Prymitywy, `Date` i tablice bez zmian.
+
+  Do `@konce-pt/angular` dołączają brakujące eksporty typów `KptColumnFilter`
+  i `KptColumnFilterType` (`KptColumn.filter` wymuszał je po stronie użytkownika).
+
+## 0.7.9
+
+### Minor Changes
+
+- kpt-data-table: wiersz podsumowania nad paginatorem
+
+  Kolumna z nowym polem `summary` jest agregowana w `<tfoot>` — ostatnim wierszu tabeli, przyklejonym
+  do dołu obszaru przewijania. Etykieta (`summaryLabel`, bez wartości i18n `dataTable.total` →
+  „Total”/„Razem”) renderuje się w komórce scalonej od początku wiersza do pierwszej liczonej kolumny
+  i jest wyrównana do prawej; colspan obejmuje też kolumny systemowe (rozwijanie, zaznaczanie).
+
+  Agregacje `sum`, `avg`, `min`, `max`, `count` albo własna funkcja `(rows) => unknown`; `format`
+  formatuje wynik (np. `Intl.NumberFormat`). Liczone są z całego zbioru po filtrach — ze wszystkich
+  stron, nie tylko z widocznej — więc wynik zgadza się z licznikiem paginatora. `data` jest zwykłym
+  inputem, więc podmiana tablicy w sygnale po `cellEdit` przelicza podsumowanie natychmiast: tabela
+  liczy na żywo przy edycji inline.
+
+  W trybie `lazy` tabela ma tylko bieżącą stronę i nie liczy nic sama — wartości podaje konsument
+  przez `summaryValues` (pole → wartość), które poza `lazy` nadpisuje wyliczenia.
+
+  Nowe typy `KptColumnSummary` i `KptSummaryFn` są eksportowane z `@konce-pt/angular`. Tło wiersza
+  bierze `--kpt-table-summary-bg` (fallback: header-bg). Klucz i18n `dataTable.total` doszedł do EN i PL.
+
 ## 0.7.8
 
 ### Minor Changes

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

@@ -503,7 +503,7 @@ function KptChartLegend_Conditional_1_Template(rf, ctx) { if (rf & 1) {
 function KptChartLegend_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵdomElementStart(0, "li")(1, "button", 3);
-    i0.ɵɵdomListener("click", function KptChartLegend_For_4_Template_button_click_1_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggle.emit(item_r3.key)); })("pointerenter", function KptChartLegend_For_4_Template_button_pointerenter_1_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.highlight.emit(item_r3.key)); })("pointerleave", function KptChartLegend_For_4_Template_button_pointerleave_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.highlight.emit(null)); });
+    i0.ɵɵdomListener("click", function KptChartLegend_For_4_Template_button_click_1_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.seriesToggle.emit(item_r3.key)); })("pointerenter", function KptChartLegend_For_4_Template_button_pointerenter_1_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.highlight.emit(item_r3.key)); })("pointerleave", function KptChartLegend_For_4_Template_button_pointerleave_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.highlight.emit(null)); });
     i0.ɵɵdomElement(2, "span", 4);
     i0.ɵɵdomElementStart(3, "span", 5);
     i0.ɵɵtext(4);
@@ -537,12 +537,12 @@ class KptChartLegend {
         this.title = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         /** Kliknięcie elementu — przełącz widoczność serii/wycinka (klucz). */
-        this.toggle = output();
+        this.seriesToggle = output();
         /** Wejście/wyjście kursora — podświetl serię (klucz) lub wyczyść (null). */
         this.highlight = output();
     }
     static { this.ɵfac = function KptChartLegend_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptChartLegend)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptChartLegend, selectors: [["kpt-chart-legend"]], hostAttrs: [1, "kpt-chart-legend-host"], inputs: { items: [1, "items"], position: [1, "position"], align: [1, "align"], pointStyle: [1, "pointStyle"], title: [1, "title"] }, outputs: { toggle: "toggle", highlight: "highlight" }, decls: 5, vars: 3, consts: [[1, "kpt-chart__legend"], [1, "kpt-chart__legend-title"], [1, "kpt-chart__legend-list"], ["type", "button", 1, "kpt-chart__legend-item", 3, "click", "pointerenter", "pointerleave"], [1, "kpt-chart__legend-marker"], [1, "kpt-chart__legend-label"]], template: function KptChartLegend_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptChartLegend, selectors: [["kpt-chart-legend"]], hostAttrs: [1, "kpt-chart-legend-host"], inputs: { items: [1, "items"], position: [1, "position"], align: [1, "align"], pointStyle: [1, "pointStyle"], title: [1, "title"] }, outputs: { seriesToggle: "seriesToggle", highlight: "highlight" }, decls: 5, vars: 3, consts: [[1, "kpt-chart__legend"], [1, "kpt-chart__legend-title"], [1, "kpt-chart__legend-list"], ["type", "button", 1, "kpt-chart__legend-item", 3, "click", "pointerenter", "pointerleave"], [1, "kpt-chart__legend-marker"], [1, "kpt-chart__legend-label"]], template: function KptChartLegend_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, KptChartLegend_Conditional_1_Template, 2, 2, "div", 1);
             i0.ɵɵdomElementStart(2, "ul", 2);
@@ -574,7 +574,7 @@ class KptChartLegend {
               type="button"
               class="kpt-chart__legend-item"
               [class.kpt-chart__legend-item--hidden]="item.hidden"
-              (click)="toggle.emit(item.key)"
+              (click)="seriesToggle.emit(item.key)"
               (pointerenter)="highlight.emit(item.key)"
               (pointerleave)="highlight.emit(null)"
             >
@@ -588,7 +588,7 @@ class KptChartLegend {
   `,
                 host: { class: 'kpt-chart-legend-host' },
             }]
-    }], null, { 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"] }] }); })();
+    }], null, { 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 }] }], seriesToggle: [{ type: i0.Output, args: ["seriesToggle"] }], highlight: [{ type: i0.Output, args: ["highlight"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptChartLegend, { className: "KptChartLegend", filePath: "lib/chart-legend.component.ts", lineNumber: 46 }); })();
 
 function KptChartTooltip_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -1040,7 +1040,7 @@ function KptChart_Case_9_Template(rf, ctx) { if (rf & 1) {
 function KptChart_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kpt-chart-legend", 36);
-    i0.ɵɵlistener("toggle", function KptChart_Conditional_11_Template_kpt_chart_legend_toggle_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onToggle($event)); })("highlight", function KptChart_Conditional_11_Template_kpt_chart_legend_highlight_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onHighlight($event)); });
+    i0.ɵɵlistener("seriesToggle", function KptChart_Conditional_11_Template_kpt_chart_legend_seriesToggle_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onToggle($event)); })("highlight", function KptChart_Conditional_11_Template_kpt_chart_legend_highlight_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onHighlight($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -1334,7 +1334,7 @@ class KptChart {
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptChart, selectors: [["kpt-chart"]], hostAttrs: [1, "kpt-chart-host"], hostVars: 8, hostBindings: function KptChart_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵstyleProp("--%NS%kpt-chart-duration", ctx.anim().duration + "ms")("--%NS%kpt-chart-stagger", ctx.anim().stagger + "ms")("--%NS%kpt-chart-delay", ctx.anim().delay + "ms");
             i0.ɵɵclassProp("kpt-chart--no-anim", !ctx.anim().enabled);
-        } }, inputs: { config: [1, "config"], width: [1, "width"], height: [1, "height"] }, decls: 12, vars: 7, consts: [[1, "kpt-chart"], [1, "kpt-chart__title", 3, "text-align", "color", "font-family", "font-size", "font-weight", "padding-top", "padding-bottom"], [1, "kpt-chart__subtitle", 3, "text-align", "color", "font-family", "font-size", "font-weight", "padding-top", "padding-bottom"], [1, "kpt-chart__body"], [1, "kpt-chart__canvas"], ["role", "img", "preserveAspectRatio", "xMidYMid meet", 1, "kpt-chart__svg"], [3, "state"], [3, "items", "position", "align", "pointStyle", "title"], [1, "kpt-chart__title"], [1, "kpt-chart__subtitle"], [1, "kpt-chart__grid"], [1, "kpt-chart__gridline"], [1, "kpt-chart__crosshair"], [1, "kpt-chart__axis"], [1, "kpt-chart__cat-active"], [1, "kpt-chart__series", 3, "kpt-chart__series--dim"], ["text-anchor", "middle"], [1, "kpt-chart__series"], [1, "kpt-chart__area", 3, "fill"], ["pathLength", "1", 1, "kpt-chart__line"], [1, "kpt-chart__area"], ["r", "4", 1, "kpt-chart__point", 3, "kpt-chart__point--active", "fill", "--%NS%kpt-chart-i"], ["r", "12", 1, "kpt-chart__hit", 3, "pointerenter", "pointerleave"], ["r", "4", 1, "kpt-chart__point"], [1, "kpt-chart__bars"], [1, "kpt-chart__bar", 3, "kpt-chart__series--dim", "fill", "--%NS%kpt-chart-i"], [1, "kpt-chart__bar", 3, "pointerenter", "pointerleave"], [1, "kpt-chart__ring"], [1, "kpt-chart__series", "kpt-chart__radar", 3, "kpt-chart__series--dim"], [1, "kpt-chart__series", "kpt-chart__radar"], [1, "kpt-chart__radar-area"], ["r", "4", 1, "kpt-chart__point", 3, "fill", "--%NS%kpt-chart-i"], ["r", "4", 1, "kpt-chart__point", 3, "pointerenter", "pointerleave"], [1, "kpt-chart__slices"], [1, "kpt-chart__slice", 3, "kpt-chart__series--dim", "fill", "--%NS%kpt-chart-i"], [1, "kpt-chart__slice", 3, "pointerenter", "pointerleave"], [3, "toggle", "highlight", "items", "position", "align", "pointStyle", "title"]], template: function KptChart_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { config: [1, "config"], width: [1, "width"], height: [1, "height"] }, decls: 12, vars: 7, consts: [[1, "kpt-chart"], [1, "kpt-chart__title", 3, "text-align", "color", "font-family", "font-size", "font-weight", "padding-top", "padding-bottom"], [1, "kpt-chart__subtitle", 3, "text-align", "color", "font-family", "font-size", "font-weight", "padding-top", "padding-bottom"], [1, "kpt-chart__body"], [1, "kpt-chart__canvas"], ["role", "img", "preserveAspectRatio", "xMidYMid meet", 1, "kpt-chart__svg"], [3, "state"], [3, "items", "position", "align", "pointStyle", "title"], [1, "kpt-chart__title"], [1, "kpt-chart__subtitle"], [1, "kpt-chart__grid"], [1, "kpt-chart__gridline"], [1, "kpt-chart__crosshair"], [1, "kpt-chart__axis"], [1, "kpt-chart__cat-active"], [1, "kpt-chart__series", 3, "kpt-chart__series--dim"], ["text-anchor", "middle"], [1, "kpt-chart__series"], [1, "kpt-chart__area", 3, "fill"], ["pathLength", "1", 1, "kpt-chart__line"], [1, "kpt-chart__area"], ["r", "4", 1, "kpt-chart__point", 3, "kpt-chart__point--active", "fill", "--%NS%kpt-chart-i"], ["r", "12", 1, "kpt-chart__hit", 3, "pointerenter", "pointerleave"], ["r", "4", 1, "kpt-chart__point"], [1, "kpt-chart__bars"], [1, "kpt-chart__bar", 3, "kpt-chart__series--dim", "fill", "--%NS%kpt-chart-i"], [1, "kpt-chart__bar", 3, "pointerenter", "pointerleave"], [1, "kpt-chart__ring"], [1, "kpt-chart__series", "kpt-chart__radar", 3, "kpt-chart__series--dim"], [1, "kpt-chart__series", "kpt-chart__radar"], [1, "kpt-chart__radar-area"], ["r", "4", 1, "kpt-chart__point", 3, "fill", "--%NS%kpt-chart-i"], ["r", "4", 1, "kpt-chart__point", 3, "pointerenter", "pointerleave"], [1, "kpt-chart__slices"], [1, "kpt-chart__slice", 3, "kpt-chart__series--dim", "fill", "--%NS%kpt-chart-i"], [1, "kpt-chart__slice", 3, "pointerenter", "pointerleave"], [3, "seriesToggle", "highlight", "items", "position", "align", "pointStyle", "title"]], template: function KptChart_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, KptChart_Conditional_1_Template, 2, 15, "div", 1);
             i0.ɵɵconditionalCreate(2, KptChart_Conditional_2_Template, 2, 15, "div", 2);
@@ -1373,7 +1373,7 @@ class KptChart {
                     '[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"] }]
+                }, 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        (seriesToggle)=\"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"] }]
     }], null, { 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 }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptChart, { className: "KptChart", filePath: "lib/chart.component.ts", lineNumber: 106 }); })();
 // Buduje SliceVm z pozycją tooltipa na promieniu środka wycinka.