@ojiepermana/angular-chart 22.0.44 → 22.0.46

package/fesm2022/ojiepermana-angular-chart-area.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, output, computed, effect, Component } from '@angular/core';
 import { ChartContext, CartesianContext, CategoricalViewportContext, sliceByIndexRange, computeAreaLayout, provideCartesianFromLineLayout, elementClientCenter } from '@ojiepermana/angular-chart/core';
 import { ChartPointerTracker } from '@ojiepermana/angular-chart/primitives';
 
@@ -125,7 +125,8 @@ class AreaChart {
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       @if (gradient()) {
         <svg:defs>
           @for (s of series(); track s.seriesKey) {
@@ -144,7 +145,8 @@ class AreaChart {
               class="chart-area"
               [attr.d]="s.areaPath"
               [attr.fill]="areaFill(s.seriesKey, s.color)"
-              stroke="none" />
+              stroke="none"
+            />
             <svg:path
               class="chart-area-stroke"
               [attr.d]="s.linePath"
@@ -152,7 +154,8 @@ class AreaChart {
               [attr.stroke-width]="strokeWidth()"
               fill="none"
               stroke-linecap="round"
-              stroke-linejoin="round" />
+              stroke-linejoin="round"
+            />
             @if (showDots()) {
               @for (p of s.points; track p.datumIndex) {
                 <svg:circle
@@ -162,12 +165,14 @@ class AreaChart {
                   [attr.r]="dotRadius()"
                   [attr.fill]="s.color"
                   [attr.aria-label]="pointAriaLabel(p)"
+                  role="img"
                   tabindex="0"
                   (focus)="setActivePoint($event, p)"
                   (blur)="clearActivePoint()"
                   (click)="emitClick(p)"
                   (keydown.enter)="emitClick(p)"
-                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+                  (keydown.space)="emitClick(p); $event.preventDefault()"
+                />
               }
             }
           }
@@ -181,13 +186,12 @@ class AreaChart {
     <ng-content select="ChartTooltip" />
     <ng-content select="ChartLegend" />
     <ng-content select="ChartZoomControls" />
-  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AreaChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartArea',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [CartesianContext, CategoricalViewportContext],
                     imports: [ChartPointerTracker],
                     host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
@@ -198,7 +202,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       @if (gradient()) {
         <svg:defs>
           @for (s of series(); track s.seriesKey) {
@@ -217,7 +222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               class="chart-area"
               [attr.d]="s.areaPath"
               [attr.fill]="areaFill(s.seriesKey, s.color)"
-              stroke="none" />
+              stroke="none"
+            />
             <svg:path
               class="chart-area-stroke"
               [attr.d]="s.linePath"
@@ -225,7 +231,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               [attr.stroke-width]="strokeWidth()"
               fill="none"
               stroke-linecap="round"
-              stroke-linejoin="round" />
+              stroke-linejoin="round"
+            />
             @if (showDots()) {
               @for (p of s.points; track p.datumIndex) {
                 <svg:circle
@@ -235,12 +242,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                   [attr.r]="dotRadius()"
                   [attr.fill]="s.color"
                   [attr.aria-label]="pointAriaLabel(p)"
+                  role="img"
                   tabindex="0"
                   (focus)="setActivePoint($event, p)"
                   (blur)="clearActivePoint()"
                   (click)="emitClick(p)"
                   (keydown.enter)="emitClick(p)"
-                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+                  (keydown.space)="emitClick(p); $event.preventDefault()"
+                />
               }
             }
           }

package/fesm2022/ojiepermana-angular-chart-bar.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, output, computed, effect, Component } from '@angular/core';
 import { seriesColorVar, ChartContext, CartesianContext, ChartThemeRadius, elementClientCenter } from '@ojiepermana/angular-chart/core';
 import { scaleBand, scaleLinear } from 'd3-scale';
 import { min, max } from 'd3-array';
@@ -414,7 +414,7 @@ class BarChart {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dotLayout" }] : /* istanbul ignore next */ []));
-    dotTrackCells = computed(() => (this.showDotTrack() ? (this.dotLayout()?.track ?? []) : []), /* @ts-ignore */
+    dotTrackCells = computed(() => this.showDotTrack() ? (this.dotLayout()?.track ?? []) : [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dotTrackCells" }] : /* istanbul ignore next */ []));
     dotValueCells = computed(() => this.dotLayout()?.values ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dotValueCells" }] : /* istanbul ignore next */ []));
@@ -534,7 +534,8 @@ class BarChart {
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <ng-content select="svg\\:g[ChartGrid]" />
         <svg:g class="chart-bars">
@@ -549,7 +550,8 @@ class BarChart {
                   [attr.height]="cell.height"
                   [attr.rx]="resolvedDotCornerRadius()"
                   [attr.ry]="resolvedDotCornerRadius()"
-                  fill="hsl(var(--muted))" />
+                  fill="hsl(var(--muted))"
+                />
               }
               @for (cell of dotValueCells(); track cell.key) {
                 <svg:rect
@@ -561,7 +563,8 @@ class BarChart {
                   [attr.rx]="resolvedDotCornerRadius()"
                   [attr.ry]="resolvedDotCornerRadius()"
                   [attr.fill]="cell.color"
-                  [attr.opacity]="dotCellOpacity(cell)" />
+                  [attr.opacity]="dotCellOpacity(cell)"
+                />
               }
             </svg:g>
           }
@@ -579,20 +582,23 @@ class BarChart {
               [attr.stroke]="bar.active ? 'hsl(var(--foreground))' : null"
               [attr.stroke-width]="bar.active ? 1.5 : null"
               [attr.aria-label]="barAriaLabel(bar)"
+              role="img"
               tabindex="0"
               (focus)="setActivePoint($event, bar)"
               (blur)="clearActivePoint()"
               (click)="emitClick(bar)"
               (keydown.enter)="emitClick(bar)"
               (keydown.space)="emitClick(bar); $event.preventDefault()"
-              (keydown)="onKeydown($event, idx)" />
+              (keydown)="onKeydown($event, idx)"
+            />
             @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
               <svg:text
                 class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
                 [attr.x]="barLabelX(bar)"
                 [attr.y]="barLabelY(bar)"
                 [attr.text-anchor]="barLabelAnchor(bar)"
-                dominant-baseline="middle">
+                dominant-baseline="middle"
+              >
                 {{ formatValueLabel(bar) }}
               </svg:text>
             }
@@ -627,13 +633,12 @@ class BarChart {
         }
       </tbody>
     </table>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: BarChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartBar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [CartesianContext],
                     imports: [ChartPointerTracker],
                     host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
@@ -644,7 +649,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <ng-content select="svg\\:g[ChartGrid]" />
         <svg:g class="chart-bars">
@@ -659,7 +665,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                   [attr.height]="cell.height"
                   [attr.rx]="resolvedDotCornerRadius()"
                   [attr.ry]="resolvedDotCornerRadius()"
-                  fill="hsl(var(--muted))" />
+                  fill="hsl(var(--muted))"
+                />
               }
               @for (cell of dotValueCells(); track cell.key) {
                 <svg:rect
@@ -671,7 +678,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                   [attr.rx]="resolvedDotCornerRadius()"
                   [attr.ry]="resolvedDotCornerRadius()"
                   [attr.fill]="cell.color"
-                  [attr.opacity]="dotCellOpacity(cell)" />
+                  [attr.opacity]="dotCellOpacity(cell)"
+                />
               }
             </svg:g>
           }
@@ -689,20 +697,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               [attr.stroke]="bar.active ? 'hsl(var(--foreground))' : null"
               [attr.stroke-width]="bar.active ? 1.5 : null"
               [attr.aria-label]="barAriaLabel(bar)"
+              role="img"
               tabindex="0"
               (focus)="setActivePoint($event, bar)"
               (blur)="clearActivePoint()"
               (click)="emitClick(bar)"
               (keydown.enter)="emitClick(bar)"
               (keydown.space)="emitClick(bar); $event.preventDefault()"
-              (keydown)="onKeydown($event, idx)" />
+              (keydown)="onKeydown($event, idx)"
+            />
             @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
               <svg:text
                 class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
                 [attr.x]="barLabelX(bar)"
                 [attr.y]="barLabelY(bar)"
                 [attr.text-anchor]="barLabelAnchor(bar)"
-                dominant-baseline="middle">
+                dominant-baseline="middle"
+              >
                 {{ formatValueLabel(bar) }}
               </svg:text>
             }

package/fesm2022/ojiepermana-angular-chart-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Renderer2, effect, ChangeDetectionStrategy, Component, NgZone, PLATFORM_ID, DestroyRef, viewChild, input, afterNextRender, Service } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Renderer2, effect, Component, NgZone, PLATFORM_ID, DestroyRef, viewChild, input, afterNextRender, Service } from '@angular/core';
 import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { scalePoint, scaleLinear, scaleBand } from 'd3-scale';
 import { max } from 'd3-array';
@@ -140,13 +140,12 @@ class ChartStyle {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartStyle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ChartStyle, isStandalone: true, selector: "ChartStyle", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ChartStyle, isStandalone: true, selector: "ChartStyle", ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartStyle, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartStyle',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '',
                 }]
         }], ctorParameters: () => [] });
@@ -232,13 +231,12 @@ class ChartContainer {
       <ng-content />
     </div>
     <ng-content select="ChartLegend" />
-  `, isInline: true, dependencies: [{ kind: "component", type: ChartStyle, selector: "ChartStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: ChartStyle, selector: "ChartStyle" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'Chart',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [ChartContext],
                     imports: [ChartStyle],
                     host: {

package/fesm2022/ojiepermana-angular-chart-line.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, output, computed, effect, Component } from '@angular/core';
 import { ChartContext, CartesianContext, CategoricalViewportContext, sliceByIndexRange, computeLineLayout, provideCartesianFromLineLayout, elementClientCenter } from '@ojiepermana/angular-chart/core';
 export { buildCartesianScales, cloneLinear, computeAreaLayout, computeLineLayout, pointToBandAdapter, provideCartesianFromLineLayout } from '@ojiepermana/angular-chart/core';
 import { ChartPointerTracker } from '@ojiepermana/angular-chart/primitives';
@@ -146,7 +146,8 @@ class LineChart {
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <ng-content select="svg\\:g[ChartGrid]" />
         <svg:g class="chart-lines">
@@ -158,7 +159,8 @@ class LineChart {
               stroke-linejoin="round"
               [attr.stroke]="s.color"
               [attr.stroke-width]="strokeWidth()"
-              [attr.d]="s.linePath" />
+              [attr.d]="s.linePath"
+            />
             @if (showDots()) {
               @for (p of s.points; track p.datumIndex) {
                 <svg:circle
@@ -170,19 +172,22 @@ class LineChart {
                   [attr.stroke]="dotStrokeColor()"
                   [attr.stroke-width]="dotStrokeWidth() || null"
                   [attr.aria-label]="pointAriaLabel(p)"
+                  role="img"
                   tabindex="0"
                   (focus)="setActivePoint($event, p)"
                   (blur)="clearActivePoint()"
                   (click)="emitClick(p)"
                   (keydown.enter)="emitClick(p)"
-                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+                  (keydown.space)="emitClick(p); $event.preventDefault()"
+                />
                 @if (showValueLabels()) {
                   <svg:text
                     class="chart-line-value pointer-events-none fill-muted-foreground text-2xs"
                     [attr.x]="labelX(p)"
                     [attr.y]="labelY(p)"
                     [attr.text-anchor]="labelAnchor()"
-                    dominant-baseline="middle">
+                    dominant-baseline="middle"
+                  >
                     {{ formatValueLabel(p) }}
                   </svg:text>
                 }
@@ -199,13 +204,12 @@ class LineChart {
     <ng-content select="ChartTooltip" />
     <ng-content select="ChartLegend" />
     <ng-content select="ChartZoomControls" />
-  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LineChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartLine',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [CartesianContext, CategoricalViewportContext],
                     imports: [ChartPointerTracker],
                     host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
@@ -216,7 +220,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="none"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <ng-content select="svg\\:g[ChartGrid]" />
         <svg:g class="chart-lines">
@@ -228,7 +233,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               stroke-linejoin="round"
               [attr.stroke]="s.color"
               [attr.stroke-width]="strokeWidth()"
-              [attr.d]="s.linePath" />
+              [attr.d]="s.linePath"
+            />
             @if (showDots()) {
               @for (p of s.points; track p.datumIndex) {
                 <svg:circle
@@ -240,19 +246,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                   [attr.stroke]="dotStrokeColor()"
                   [attr.stroke-width]="dotStrokeWidth() || null"
                   [attr.aria-label]="pointAriaLabel(p)"
+                  role="img"
                   tabindex="0"
                   (focus)="setActivePoint($event, p)"
                   (blur)="clearActivePoint()"
                   (click)="emitClick(p)"
                   (keydown.enter)="emitClick(p)"
-                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+                  (keydown.space)="emitClick(p); $event.preventDefault()"
+                />
                 @if (showValueLabels()) {
                   <svg:text
                     class="chart-line-value pointer-events-none fill-muted-foreground text-2xs"
                     [attr.x]="labelX(p)"
                     [attr.y]="labelY(p)"
                     [attr.text-anchor]="labelAnchor()"
-                    dominant-baseline="middle">
+                    dominant-baseline="middle"
+                  >
                     {{ formatValueLabel(p) }}
                   </svg:text>
                 }

package/fesm2022/ojiepermana-angular-chart-pie.mjs

@@ -1,7 +1,7 @@
 import { pie, arc } from 'd3-shape';
 import { seriesColorVar, ChartContext, ChartThemeRadius } from '@ojiepermana/angular-chart/core';
 import * as i0 from '@angular/core';
-import { inject, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, output, computed, Component } from '@angular/core';
 
 function computePieLayout(input) {
     const { data, valueKey, nameKey, seriesKeys, innerWidth, innerHeight, innerRadius, padAngle, cornerRadius, startAngle, endAngle, activeIndex, activeOffset = 12, } = input;
@@ -125,8 +125,12 @@ class PieChart {
         });
     }
     setActive(event, s) {
-        const clientX = event instanceof PointerEvent ? event.clientX : event.target.getBoundingClientRect().left;
-        const clientY = event instanceof PointerEvent ? event.clientY : event.target.getBoundingClientRect().top;
+        const clientX = event instanceof PointerEvent
+            ? event.clientX
+            : event.target.getBoundingClientRect().left;
+        const clientY = event instanceof PointerEvent
+            ? event.clientY
+            : event.target.getBoundingClientRect().top;
         this.root.activePoint.set({
             index: s.datumIndex,
             datumIndex: s.datumIndex,
@@ -145,7 +149,8 @@ class PieChart {
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="xMidYMid meet"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
           @for (s of layout().slices; track s.seriesKey) {
@@ -155,6 +160,7 @@ class PieChart {
               [attr.fill]="s.color"
               [attr.transform]="sliceTransform(s)"
               [attr.aria-label]="sliceAriaLabel(s)"
+              role="img"
               tabindex="0"
               (click)="emitClick(s)"
               (keydown.enter)="emitClick(s)"
@@ -163,7 +169,8 @@ class PieChart {
               (pointermove)="setActive($event, s)"
               (pointerleave)="clearActive()"
               (focus)="setActive($event, s)"
-              (blur)="clearActive()" />
+              (blur)="clearActive()"
+            />
           }
           @if (showLabels()) {
             @for (s of layout().slices; track s.seriesKey) {
@@ -172,7 +179,8 @@ class PieChart {
                 text-anchor="middle"
                 dominant-baseline="middle"
                 [attr.x]="s.centroid[0] + s.translateX"
-                [attr.y]="s.centroid[1] + s.translateY">
+                [attr.y]="s.centroid[1] + s.translateY"
+              >
                 {{ s.value }}
               </svg:text>
             }
@@ -185,13 +193,12 @@ class PieChart {
     </div>
     <ng-content select="ChartTooltip" />
     <ng-content select="ChartLegend" />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PieChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ChartPie',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
                     template: `
     <svg:svg
@@ -199,7 +206,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.viewBox]="viewBox()"
       preserveAspectRatio="xMidYMid meet"
       role="img"
-      [attr.aria-label]="ariaSummary()">
+      [attr.aria-label]="ariaSummary()"
+    >
       <svg:g [attr.transform]="innerTransform()">
         <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
           @for (s of layout().slices; track s.seriesKey) {
@@ -209,6 +217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               [attr.fill]="s.color"
               [attr.transform]="sliceTransform(s)"
               [attr.aria-label]="sliceAriaLabel(s)"
+              role="img"
               tabindex="0"
               (click)="emitClick(s)"
               (keydown.enter)="emitClick(s)"
@@ -217,7 +226,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               (pointermove)="setActive($event, s)"
               (pointerleave)="clearActive()"
               (focus)="setActive($event, s)"
-              (blur)="clearActive()" />
+              (blur)="clearActive()"
+            />
           }
           @if (showLabels()) {
             @for (s of layout().slices; track s.seriesKey) {
@@ -226,7 +236,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 text-anchor="middle"
                 dominant-baseline="middle"
                 [attr.x]="s.centroid[0] + s.translateX"
-                [attr.y]="s.centroid[1] + s.translateY">
+                [attr.y]="s.centroid[1] + s.translateY"
+              >
                 {{ s.value }}
               </svg:text>
             }