@ojiepermana/angular-chart 22.0.27

package/README.md

@@ -0,0 +1,249 @@
+# Chart
+
+Angular chart primitives and chart families inspired by shadcn Chart.
+
+In this repository, shadcn's single Chart page maps to the dedicated `/ui/chart/*` demo route group so each chart family can keep focused, production-like examples without forcing everything into one `/ui/shadcn/chart` page.
+
+Use Chart for dashboards, KPI cards, trend comparisons, radial summaries, and interactive data views where one shared config should drive labels, colors, legends, and tooltip copy.
+
+## Installation
+
+```bash
+bun add @ojiepermana/angular-chart
+npm install @ojiepermana/angular-chart
+```
+
+## Import
+
+Import shared primitives from the chart root entrypoint, then import the concrete chart family from its granular subpath.
+
+```ts
+import {
+  ChartAxisX,
+  ChartAxisY,
+  ChartContainer,
+  ChartGrid,
+  ChartLegend,
+  ChartTooltip,
+  type ChartConfig,
+} from '@ojiepermana/angular-chart';
+import { BarChart } from '@ojiepermana/angular-chart/bar';
+```
+
+### Supported chart entrypoints
+
+| Import path            | Selector       | Best for                                                          |
+| ---------------------- | -------------- | ----------------------------------------------------------------- |
+| `@ojiepermana/angular-chart/bar`     | `ChartBar`     | grouped, stacked, horizontal, active, and mixed-color bar layouts |
+| `@ojiepermana/angular-chart/line`    | `ChartLine`    | trends, comparisons, and zoomable time-series lines               |
+| `@ojiepermana/angular-chart/area`    | `ChartArea`    | filled trend bands, stacked areas, and expanded percent views     |
+| `@ojiepermana/angular-chart/pie`     | `ChartPie`     | part-to-whole slices and donut charts                             |
+| `@ojiepermana/angular-chart/radar`   | `ChartRadar`   | multi-axis performance comparisons                                |
+| `@ojiepermana/angular-chart/radial`  | `ChartRadial`  | progress rings, radial comparisons, and center-metric summaries   |
+| `@ojiepermana/angular-chart/scatter` | `ChartScatter` | XY correlation plots and point clouds                             |
+
+## Composition
+
+The Angular structure keeps the same high-level idea as shadcn Chart: define a shared chart config once, then compose a specific chart type with optional grid, axis, tooltip, legend, and center content.
+
+```text
+chart
+├── chart-bar | chart-line | chart-area | chart-scatter
+│   ├── svg:g[chart-grid]
+│   ├── svg:g[chart-axis-x]
+│   ├── svg:g[chart-axis-y]
+│   └── svg:g[chart-crosshair] / svg:g[chart-brush] (optional)
+├── chart-pie | chart-radial | chart-radar
+│   └── chart-pie-center | chart-radial-center (optional)
+├── chart-tooltip
+├── chart-legend
+└── chart-zoom-controls (optional)
+```
+
+All child primitives read dimensions, series metadata, and scoped color tokens from `Chart`.
+
+## Basic usage
+
+Start with a readonly `ChartConfig`, keep the dataset in any shape that makes sense for your feature, and map the chart to the relevant keys.
+
+```ts
+const trafficChartConfig = {
+  desktop: { label: 'Desktop', color: 'var(--chart-1)' },
+  mobile: { label: 'Mobile', color: 'var(--chart-2)' },
+} satisfies ChartConfig;
+
+const trafficData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+```
+
+```html
+<div class="w-full max-w-3xl">
+  <Chart [config]="trafficChartConfig" chartId="traffic-overview">
+    <ChartBar [data]="trafficData" xKey="month">
+      <svg:g ChartGrid></svg:g>
+      <svg:g ChartAxisX></svg:g>
+      <svg:g ChartAxisY></svg:g>
+    </ChartBar>
+    <ChartTooltip [data]="trafficData" xKey="month" />
+    <ChartLegend />
+  </Chart>
+</div>
+```
+
+## Common patterns
+
+### First chart flow
+
+The closest Angular equivalent to the upstream shadcn walkthrough is:
+
+1. Define your dataset.
+2. Define `ChartConfig` so labels and colors stay decoupled from the raw data.
+3. Wrap the chart in `Chart`.
+4. Add `svg:g[ChartGrid]`, axis directives, `ChartTooltip`, and `ChartLegend` only where they add value.
+
+This keeps the chart family focused while still letting the shared primitives manage the common UI pieces.
+
+### Swapping chart families
+
+The same `ChartConfig` can back multiple chart families. In most cases you only swap the concrete chart import and the family-specific inputs.
+
+```ts
+import { AreaChart } from '@ojiepermana/angular-chart/area';
+import { LineChart } from '@ojiepermana/angular-chart/line';
+```
+
+- `ChartLine` adds inputs such as `curve`, `showDots`, and `showValueLabels`.
+- `ChartArea` adds `stacked`, `expanded`, `gradient`, and `curve`.
+- `ChartBar` adds `orientation`, `variant`, `colorKey`, `activeKey`, and `activeValue`.
+
+### Pie and radial summaries
+
+For donut, pie, and radial progress layouts, use `nameKey` plus `valueKey` instead of `xKey`.
+
+```html
+<Chart [config]="browserConfig" aspect="aspect-square">
+  <ChartPie
+    [data]="browserData"
+    nameKey="browser"
+    valueKey="visitors"
+    [seriesKeys]="browserSeriesKeys"
+    [innerRadius]="64">
+  </ChartPie>
+  <ChartTooltip [data]="browserData" xKey="browser" valueKey="visitors" indicator="dot" />
+  <ChartLegend />
+</Chart>
+```
+
+### Tooltip formatting
+
+`ChartTooltip` is where most presentational customization lives.
+
+```html
+<ChartTooltip
+  [data]="activityData"
+  xKey="date"
+  indicator="line"
+  labelKey="views"
+  [labelFormatter]="longDateFormatter"
+  [formatter]="compactNumberFormatter" />
+```
+
+Use `valueKey` for single-value radial and pie datasets, `hideLabel` when the card already provides the label context, and `indicator="none"` when you want a copy-first tooltip layout.
+
+### Per-row colors and active emphasis
+
+Use `colorKey` when the dataset itself carries a color token such as `fill`, and use `activeKey` plus `activeValue` when one category should be visually emphasized without rewriting the whole series config.
+
+## API reference
+
+### `ChartContainer`
+
+| Input     | Type             | Default          |
+| --------- | ---------------- | ---------------- |
+| `config`  | `ChartConfig`    | —                |
+| `aspect`  | `string`         | `'aspect-video'` |
+| `ChartId` | `string \| null` | auto-generated   |
+
+`ChartConfig` is a readonly record of series keys to labels, icons, colors, or theme-aware light/dark color maps.
+
+```ts
+type ChartConfig = Readonly<
+  Record<
+    string,
+    {
+      label?: string;
+      icon?: Type<unknown>;
+      color?: string;
+      theme?: Readonly<Record<'light' | 'dark', string>>;
+    }
+  >
+>;
+```
+
+### Shared primitives
+
+| Part                | Key inputs                                                                                               | Notes                                                           |
+| ------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
+| `svg:g[ChartGrid]`  | none                                                                                                     | Adds cartesian grid lines behind bar, line, and area charts.    |
+| `svg:g[ChartAxisX]` | `tickCount`, `tickLine`, `tickFormat`                                                                    | Categorical axis for cartesian layouts.                         |
+| `svg:g[ChartAxisY]` | `tickCount`, `tickLine`, `tickFormat`                                                                    | Numeric axis for cartesian layouts.                             |
+| `ChartTooltip`      | `data`, `xKey`, `valueKey`, `indicator`, `label`, `labelKey`, `labelFormatter`, `formatter`, `hideLabel` | Handles default tooltip layout plus custom template projection. |
+| `ChartLegend`       | none                                                                                                     | Renders toggle buttons for visible series.                      |
+| `ChartZoomControls` | none                                                                                                     | Pair with zoomable line and scatter views.                      |
+| `ChartPieCenter`    | projected content                                                                                        | Centers labels or KPIs inside pie layouts.                      |
+| `ChartRadialCenter` | projected content                                                                                        | Centers labels or KPIs inside radial layouts.                   |
+
+### Chart families
+
+| Selector       | Key inputs                                                                                          |
+| -------------- | --------------------------------------------------------------------------------------------------- |
+| `ChartBar`     | `data`, `xKey`, `orientation`, `variant`, `colorKey`, `activeKey`, `activeValue`, `showValueLabels` |
+| `ChartLine`    | `data`, `xKey`, `curve`, `showDots`, `dotRadius`, `showValueLabels`                                 |
+| `ChartArea`    | `data`, `xKey`, `stacked`, `expanded`, `gradient`, `curve`                                          |
+| `ChartPie`     | `data`, `nameKey`, `valueKey`, `seriesKeys`, `innerRadius`, `activeIndex`, `activeOffset`           |
+| `ChartRadar`   | `data`, `axisKey`, `curve`, `levels`, `grid`, `showLabels`, `showDots`                              |
+| `ChartRadial`  | `data`, `nameKey`, `valueKey`, `seriesKeys`, `maxValue`, `showTrack`, `showValueLabels`             |
+| `ChartScatter` | `data`, `xKey`, `yKey`, `sizeKey`, `seriesKey`, `xDomain`, `yDomain`                                |
+
+## Styling and theming
+
+- Prefer CSS variables such as `var(--chart-1)` and `var(--chart-2)` in `ChartConfig`. This matches the current shadcn guidance and the theme tokens shipped by this library.
+- `Chart` scopes generated `--color-<series>` variables to the chart instance, so tooltip rows, legends, and series shapes stay aligned.
+- Use `theme: { light, dark }` on a series config entry when the chart needs different values per color scheme.
+- Keep the parent container responsible for width, and use the `aspect` input when the default `aspect-video` does not match the layout.
+- Use `colorKey` only when the dataset should override per-series colors with a row-specific token such as `fill`.
+
+## Accessibility
+
+- Chart hosts expose an `aria-label` summary describing the chart type, category count, and visible series.
+- Interactive marks such as bars, dots, and slices are keyboard focusable where the layout supports activation.
+- `ChartTooltip` includes a polite live region so changing categories can be announced to assistive technology.
+- `ChartLegend` uses native buttons with `aria-pressed` to reflect hidden and visible series state.
+- Keep surrounding card copy descriptive so the chart has enough context when read outside its visual layout.
+
+## Keyboard interactions
+
+- `Tab` reaches interactive bars, dots, slices, and legend toggle buttons.
+- `Enter` and `Space` trigger the same click behavior as pointer activation on interactive marks.
+- Focusing a supported data mark updates the shared active point so tooltip content stays reachable without hover.
+
+## Angular notes
+
+- Keep chart config objects readonly and signal-friendly. A top-level `const` or signal-backed computed config works well.
+- Every chart family must live inside `Chart`; that container provides dimensions, series visibility state, and scoped color variables to descendants.
+- Use an explicit `ChartId` when multiple charts of the same family appear on one page or when tests need a stable selector.
+- The local shadcn mapping for Chart lives in the dedicated `/ui/chart` overview route with focused family demos under `/ui/chart/*`.
+
+## Source parity
+
+This Angular package follows the shadcn Chart information architecture and theming concepts, but it does not mirror the React API one-to-one.
+
+- shadcn uses Recharts components directly and layers `ChartTooltipContent` and `ChartLegendContent` around them.
+- This Angular library ships standalone chart families plus shared primitives, so you compose `Chart`, the relevant `chart-*`, `ChartTooltip`, and `ChartLegend` instead of wiring Recharts JSX.
+- The dedicated `/ui/chart/*` route group is the intentional local mapping for shadcn Chart in this repo; no duplicate `/ui/shadcn/chart` page is required.

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

@@ -0,0 +1,266 @@
+import * as i0 from '@angular/core';
+import { inject, input, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChartContext, CartesianContext, CategoricalViewportContext, sliceByIndexRange, computeAreaLayout, provideCartesianFromLineLayout, elementClientCenter } from '@ojiepermana/angular-chart/core';
+import { ChartPointerTracker } from '@ojiepermana/angular-chart/primitives';
+
+const DEFAULT_MARGIN = { top: 8, right: 8, bottom: 24, left: 40 };
+/**
+ * Area chart — composable within `<Chart>`.
+ *
+ * - `stacked=true` stacks series along the value axis.
+ * - `gradient=true` fills each area with a vertical linear-gradient from
+ *   the series color (top) to transparent (bottom). The gradient is
+ *   emitted as `<defs><linearGradient>` per series, unique per chart id.
+ */
+class AreaChart {
+    root = inject(ChartContext);
+    cart = inject(CartesianContext);
+    viewport = inject(CategoricalViewportContext);
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    styles = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
+    stacked = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
+    expanded = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    gradient = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
+    curve = input('monotone', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    showDots = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
+    dotRadius = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
+    pointClick = output();
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    visibleStartIndex = computed(() => this.viewport.zoomRange()?.startIndex ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleStartIndex" }] : /* istanbul ignore next */ []));
+    visibleData = computed(() => sliceByIndexRange(this.data(), this.viewport.zoomRange()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleData" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computeAreaLayout({
+        data: this.visibleData(),
+        xKey: this.xKey(),
+        seriesKeys: this.root.visibleSeriesKeys(),
+        orientation: this.orientation(),
+        innerWidth: this.innerWidth(),
+        innerHeight: this.innerHeight(),
+        curve: this.curve(),
+        stacked: this.stacked(),
+        expanded: this.expanded(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    series = computed(() => this.layout().series, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => {
+        const { width, height } = this.root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => {
+        const keys = this.root.visibleSeriesKeys();
+        return `Area chart, ${this.visibleData().length} points, ${keys.length} series: ${keys.join(', ')}.`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const layout = this.layout();
+            this.viewport.dataCount.set(this.data().length);
+            provideCartesianFromLineLayout(this.cart, layout, this.orientation(), this.innerWidth(), this.innerHeight());
+            this.cart.margin.set(this.margin());
+        });
+    }
+    gradientId(seriesKey) {
+        return `${this.root.id()}-grad-${seriesKey.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+    }
+    areaFill(seriesKey, color) {
+        return this.gradient() ? `url(#${this.gradientId(seriesKey)})` : color;
+    }
+    emitClick(p) {
+        const datumIndex = this.visibleStartIndex() + p.datumIndex;
+        this.pointClick.emit({
+            seriesKey: p.seriesKey,
+            datumIndex,
+            category: p.category,
+            value: p.value,
+            datum: this.data()[datumIndex],
+        });
+    }
+    setActivePoint(event, p) {
+        const center = elementClientCenter(event.currentTarget);
+        const datumIndex = this.visibleStartIndex() + p.datumIndex;
+        this.root.activePoint.set({
+            index: p.datumIndex,
+            datumIndex,
+            seriesKey: p.seriesKey,
+            clientX: center?.clientX,
+            clientY: center?.clientY,
+        });
+    }
+    clearActivePoint() {
+        this.root.activePoint.set(null);
+    }
+    pointAriaLabel(p) {
+        const label = this.root.config()[p.seriesKey]?.label ?? p.seriesKey;
+        return `${label} at ${p.category}: ${p.value}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AreaChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AreaChart, isStandalone: true, selector: "ChartArea", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { properties: { "attr.data-style": "styles()" }, classAttribute: "relative block h-full w-full" }, providers: [CartesianContext, CategoricalViewportContext], ngImport: i0, template: `
+    <svg:svg
+      ChartPointerTracker
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      @if (gradient()) {
+        <svg:defs>
+          @for (s of series(); track s.seriesKey) {
+            <svg:linearGradient [attr.id]="gradientId(s.seriesKey)" x1="0" y1="0" x2="0" y2="1">
+              <svg:stop offset="0%" [attr.stop-color]="s.color" stop-opacity="0.4" />
+              <svg:stop offset="100%" [attr.stop-color]="s.color" stop-opacity="0" />
+            </svg:linearGradient>
+          }
+        </svg:defs>
+      }
+      <svg:g [attr.transform]="innerTransform()">
+        <ng-content select="svg\\:g[ChartGrid]" />
+        <svg:g class="chart-areas">
+          @for (s of series(); track s.seriesKey) {
+            <svg:path
+              class="chart-area"
+              [attr.d]="s.areaPath"
+              [attr.fill]="areaFill(s.seriesKey, s.color)"
+              stroke="none" />
+            <svg:path
+              class="chart-area-stroke"
+              [attr.d]="s.linePath"
+              [attr.stroke]="s.color"
+              [attr.stroke-width]="strokeWidth()"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round" />
+            @if (showDots()) {
+              @for (p of s.points; track p.datumIndex) {
+                <svg:circle
+                  class="chart-dot cursor-pointer outline-none"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="s.color"
+                  [attr.aria-label]="pointAriaLabel(p)"
+                  tabindex="0"
+                  (focus)="setActivePoint($event, p)"
+                  (blur)="clearActivePoint()"
+                  (click)="emitClick(p)"
+                  (keydown.enter)="emitClick(p)"
+                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+              }
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ChartAxisX]" />
+        <ng-content select="svg\\:g[ChartAxisY]" />
+        <ng-content select="svg\\:g[ChartCrosshair]" />
+        <ng-content select="svg:g[ChartBrush]" />
+      </svg:g>
+    </svg:svg>
+    <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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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()' },
+                    template: `
+    <svg:svg
+      ChartPointerTracker
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      @if (gradient()) {
+        <svg:defs>
+          @for (s of series(); track s.seriesKey) {
+            <svg:linearGradient [attr.id]="gradientId(s.seriesKey)" x1="0" y1="0" x2="0" y2="1">
+              <svg:stop offset="0%" [attr.stop-color]="s.color" stop-opacity="0.4" />
+              <svg:stop offset="100%" [attr.stop-color]="s.color" stop-opacity="0" />
+            </svg:linearGradient>
+          }
+        </svg:defs>
+      }
+      <svg:g [attr.transform]="innerTransform()">
+        <ng-content select="svg\\:g[ChartGrid]" />
+        <svg:g class="chart-areas">
+          @for (s of series(); track s.seriesKey) {
+            <svg:path
+              class="chart-area"
+              [attr.d]="s.areaPath"
+              [attr.fill]="areaFill(s.seriesKey, s.color)"
+              stroke="none" />
+            <svg:path
+              class="chart-area-stroke"
+              [attr.d]="s.linePath"
+              [attr.stroke]="s.color"
+              [attr.stroke-width]="strokeWidth()"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round" />
+            @if (showDots()) {
+              @for (p of s.points; track p.datumIndex) {
+                <svg:circle
+                  class="chart-dot cursor-pointer outline-none"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="s.color"
+                  [attr.aria-label]="pointAriaLabel(p)"
+                  tabindex="0"
+                  (focus)="setActivePoint($event, p)"
+                  (blur)="clearActivePoint()"
+                  (click)="emitClick(p)"
+                  (keydown.enter)="emitClick(p)"
+                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+              }
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ChartAxisX]" />
+        <ng-content select="svg\\:g[ChartAxisY]" />
+        <ng-content select="svg\\:g[ChartCrosshair]" />
+        <ng-content select="svg:g[ChartBrush]" />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ng-content select="ChartZoomControls" />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], xKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "xKey", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], gradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "gradient", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], dotRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotRadius", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AreaChart };
+//# sourceMappingURL=ojiepermana-angular-chart-area.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-chart-area.mjs","sources":["../../../library/chart/area/area-chart.ts","../../../library/chart/area/ojiepermana-angular-chart-area.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, effect, inject, input, output } from '@angular/core';\nimport { ChartContext } from '@ojiepermana/angular-chart/core';\nimport {\n  CartesianContext,\n  type ChartDatum,\n  type ChartMargin,\n  type ChartOrientation,\n  type ChartStyleVariant,\n} from '@ojiepermana/angular-chart/core';\nimport { CategoricalViewportContext } from '@ojiepermana/angular-chart/core';\nimport { computeAreaLayout, type LineCurve, type LinePoint, type LineSeriesPath } from '@ojiepermana/angular-chart/core';\nimport { provideCartesianFromLineLayout } from '@ojiepermana/angular-chart/core';\nimport { ChartPointerTracker } from '@ojiepermana/angular-chart/primitives';\nimport { elementClientCenter } from '@ojiepermana/angular-chart/core';\nimport { sliceByIndexRange } from '@ojiepermana/angular-chart/core';\n\nconst DEFAULT_MARGIN: ChartMargin = { top: 8, right: 8, bottom: 24, left: 40 };\n\nexport interface AreaPointClickEvent {\n  readonly seriesKey: string;\n  readonly datumIndex: number;\n  readonly category: string;\n  readonly value: number;\n  readonly datum: ChartDatum;\n}\n\n/**\n * Area chart — composable within `<Chart>`.\n *\n * - `stacked=true` stacks series along the value axis.\n * - `gradient=true` fills each area with a vertical linear-gradient from\n *   the series color (top) to transparent (bottom). The gradient is\n *   emitted as `<defs><linearGradient>` per series, unique per chart id.\n */\n@Component({\n  selector: 'ChartArea',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [CartesianContext, CategoricalViewportContext],\n  imports: [ChartPointerTracker],\n  host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },\n  template: `\n    <svg:svg\n      ChartPointerTracker\n      class=\"block h-full w-full overflow-visible\"\n      [attr.viewBox]=\"viewBox()\"\n      preserveAspectRatio=\"none\"\n      role=\"img\"\n      [attr.aria-label]=\"ariaSummary()\">\n      @if (gradient()) {\n        <svg:defs>\n          @for (s of series(); track s.seriesKey) {\n            <svg:linearGradient [attr.id]=\"gradientId(s.seriesKey)\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <svg:stop offset=\"0%\" [attr.stop-color]=\"s.color\" stop-opacity=\"0.4\" />\n              <svg:stop offset=\"100%\" [attr.stop-color]=\"s.color\" stop-opacity=\"0\" />\n            </svg:linearGradient>\n          }\n        </svg:defs>\n      }\n      <svg:g [attr.transform]=\"innerTransform()\">\n        <ng-content select=\"svg\\\\:g[ChartGrid]\" />\n        <svg:g class=\"chart-areas\">\n          @for (s of series(); track s.seriesKey) {\n            <svg:path\n              class=\"chart-area\"\n              [attr.d]=\"s.areaPath\"\n              [attr.fill]=\"areaFill(s.seriesKey, s.color)\"\n              stroke=\"none\" />\n            <svg:path\n              class=\"chart-area-stroke\"\n              [attr.d]=\"s.linePath\"\n              [attr.stroke]=\"s.color\"\n              [attr.stroke-width]=\"strokeWidth()\"\n              fill=\"none\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            @if (showDots()) {\n              @for (p of s.points; track p.datumIndex) {\n                <svg:circle\n                  class=\"chart-dot cursor-pointer outline-none\"\n                  [attr.cx]=\"p.x\"\n                  [attr.cy]=\"p.y\"\n                  [attr.r]=\"dotRadius()\"\n                  [attr.fill]=\"s.color\"\n                  [attr.aria-label]=\"pointAriaLabel(p)\"\n                  tabindex=\"0\"\n                  (focus)=\"setActivePoint($event, p)\"\n                  (blur)=\"clearActivePoint()\"\n                  (click)=\"emitClick(p)\"\n                  (keydown.enter)=\"emitClick(p)\"\n                  (keydown.space)=\"emitClick(p); $event.preventDefault()\" />\n              }\n            }\n          }\n        </svg:g>\n        <ng-content select=\"svg\\\\:g[ChartAxisX]\" />\n        <ng-content select=\"svg\\\\:g[ChartAxisY]\" />\n        <ng-content select=\"svg\\\\:g[ChartCrosshair]\" />\n        <ng-content select=\"svg:g[ChartBrush]\" />\n      </svg:g>\n    </svg:svg>\n    <ng-content select=\"ChartTooltip\" />\n    <ng-content select=\"ChartLegend\" />\n    <ng-content select=\"ChartZoomControls\" />\n  `,\n})\nexport class AreaChart {\n  private readonly root = inject(ChartContext);\n  private readonly cart = inject(CartesianContext);\n  private readonly viewport = inject(CategoricalViewportContext);\n\n  readonly data = input.required<readonly ChartDatum[]>();\n  readonly xKey = input.required<string>();\n  readonly orientation = input<ChartOrientation>('vertical');\n  readonly styles = input<ChartStyleVariant>('base');\n  readonly stacked = input<boolean>(false);\n  readonly expanded = input<boolean>(false);\n  readonly gradient = input<boolean>(true);\n  readonly curve = input<LineCurve>('monotone');\n  readonly margin = input<ChartMargin>(DEFAULT_MARGIN);\n  readonly strokeWidth = input<number>(2);\n  readonly showDots = input<boolean>(false);\n  readonly dotRadius = input<number>(3);\n\n  readonly pointClick = output<AreaPointClickEvent>();\n\n  protected readonly innerWidth = computed(() =>\n    Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right),\n  );\n  protected readonly innerHeight = computed(() =>\n    Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom),\n  );\n\n  protected readonly visibleStartIndex = computed(() => this.viewport.zoomRange()?.startIndex ?? 0);\n\n  protected readonly visibleData = computed(() => sliceByIndexRange(this.data(), this.viewport.zoomRange()));\n\n  protected readonly layout = computed(() =>\n    computeAreaLayout({\n      data: this.visibleData(),\n      xKey: this.xKey(),\n      seriesKeys: this.root.visibleSeriesKeys(),\n      orientation: this.orientation(),\n      innerWidth: this.innerWidth(),\n      innerHeight: this.innerHeight(),\n      curve: this.curve(),\n      stacked: this.stacked(),\n      expanded: this.expanded(),\n    }),\n  );\n\n  protected readonly series = computed<readonly LineSeriesPath[]>(() => this.layout().series);\n\n  protected readonly viewBox = computed(() => {\n    const { width, height } = this.root.dimensions();\n    return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;\n  });\n\n  protected readonly innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`);\n\n  protected readonly ariaSummary = computed(() => {\n    const keys = this.root.visibleSeriesKeys();\n    return `Area chart, ${this.visibleData().length} points, ${keys.length} series: ${keys.join(', ')}.`;\n  });\n\n  constructor() {\n    effect(() => {\n      const layout = this.layout();\n      this.viewport.dataCount.set(this.data().length);\n      provideCartesianFromLineLayout(this.cart, layout, this.orientation(), this.innerWidth(), this.innerHeight());\n      this.cart.margin.set(this.margin());\n    });\n  }\n\n  protected gradientId(seriesKey: string): string {\n    return `${this.root.id()}-grad-${seriesKey.replace(/[^a-zA-Z0-9_-]/g, '_')}`;\n  }\n\n  protected areaFill(seriesKey: string, color: string): string {\n    return this.gradient() ? `url(#${this.gradientId(seriesKey)})` : color;\n  }\n\n  protected emitClick(p: LinePoint): void {\n    const datumIndex = this.visibleStartIndex() + p.datumIndex;\n    this.pointClick.emit({\n      seriesKey: p.seriesKey,\n      datumIndex,\n      category: p.category,\n      value: p.value,\n      datum: this.data()[datumIndex],\n    });\n  }\n\n  protected setActivePoint(event: FocusEvent, p: LinePoint): void {\n    const center = elementClientCenter(event.currentTarget);\n    const datumIndex = this.visibleStartIndex() + p.datumIndex;\n    this.root.activePoint.set({\n      index: p.datumIndex,\n      datumIndex,\n      seriesKey: p.seriesKey,\n      clientX: center?.clientX,\n      clientY: center?.clientY,\n    });\n  }\n\n  protected clearActivePoint(): void {\n    this.root.activePoint.set(null);\n  }\n\n  protected pointAriaLabel(p: LinePoint): string {\n    const label = this.root.config()[p.seriesKey]?.label ?? p.seriesKey;\n    return `${label} at ${p.category}: ${p.value}`;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAgBA,MAAM,cAAc,GAAgB,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;AAU9E;;;;;;;AAOG;MAwEU,SAAS,CAAA;AACH,IAAA,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC;AAC3B,IAAA,IAAI,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC/B,IAAA,QAAQ,GAAG,MAAM,CAAC,0BAA0B,CAAC;IAErD,IAAI,GAAG,KAAK,CAAC,QAAQ;6EAAyB;IAC9C,IAAI,GAAG,KAAK,CAAC,QAAQ;6EAAU;IAC/B,WAAW,GAAG,KAAK,CAAmB,UAAU;oFAAC;IACjD,MAAM,GAAG,KAAK,CAAoB,MAAM;+EAAC;IACzC,OAAO,GAAG,KAAK,CAAU,KAAK;gFAAC;IAC/B,QAAQ,GAAG,KAAK,CAAU,KAAK;iFAAC;IAChC,QAAQ,GAAG,KAAK,CAAU,IAAI;iFAAC;IAC/B,KAAK,GAAG,KAAK,CAAY,UAAU;8EAAC;IACpC,MAAM,GAAG,KAAK,CAAc,cAAc;+EAAC;IAC3C,WAAW,GAAG,KAAK,CAAS,CAAC;oFAAC;IAC9B,QAAQ,GAAG,KAAK,CAAU,KAAK;iFAAC;IAChC,SAAS,GAAG,KAAK,CAAS,CAAC;kFAAC;IAE5B,UAAU,GAAG,MAAM,EAAuB;AAEhC,IAAA,UAAU,GAAG,QAAQ,CAAC,MACvC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC;mFACrF;AACkB,IAAA,WAAW,GAAG,QAAQ,CAAC,MACxC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC;oFACtF;AAEkB,IAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,UAAU,IAAI,CAAC;0FAAC;AAE9E,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;oFAAC;AAEvF,IAAA,MAAM,GAAG,QAAQ,CAAC,MACnC,iBAAiB,CAAC;AAChB,QAAA,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE;AACxB,QAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,QAAA,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;AACzC,QAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;AAC/B,QAAA,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE;AAC7B,QAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;AAC/B,QAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACnB,QAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;AACvB,QAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;KAC1B,CAAC;+EACH;IAEkB,MAAM,GAAG,QAAQ,CAA4B,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM;+EAAC;AAExE,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;AAChD,QAAA,OAAO,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE;IAC3D,CAAC;gFAAC;IAEiB,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAA,UAAA,EAAa,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,CAAA,CAAA,CAAG;uFAAC;AAExF,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;QAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;AAC1C,QAAA,OAAO,eAAe,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAA,SAAA,EAAY,IAAI,CAAC,MAAM,CAAA,SAAA,EAAY,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;IACtG,CAAC;oFAAC;AAEF,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,YAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC;YAC/C,8BAA8B,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;AAC5G,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;AACrC,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,UAAU,CAAC,SAAiB,EAAA;AACpC,QAAA,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAA,MAAA,EAAS,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE;IAC9E;IAEU,QAAQ,CAAC,SAAiB,EAAE,KAAa,EAAA;AACjD,QAAA,OAAO,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAA,CAAA,CAAG,GAAG,KAAK;IACxE;AAEU,IAAA,SAAS,CAAC,CAAY,EAAA;QAC9B,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC,UAAU;AAC1D,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,SAAS,EAAE,CAAC,CAAC,SAAS;YACtB,UAAU;YACV,QAAQ,EAAE,CAAC,CAAC,QAAQ;YACpB,KAAK,EAAE,CAAC,CAAC,KAAK;AACd,YAAA,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC;AAC/B,SAAA,CAAC;IACJ;IAEU,cAAc,CAAC,KAAiB,EAAE,CAAY,EAAA;QACtD,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,aAAa,CAAC;QACvD,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC,UAAU;AAC1D,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;YACxB,KAAK,EAAE,CAAC,CAAC,UAAU;YACnB,UAAU;YACV,SAAS,EAAE,CAAC,CAAC,SAAS;YACtB,OAAO,EAAE,MAAM,EAAE,OAAO;YACxB,OAAO,EAAE,MAAM,EAAE,OAAO;AACzB,SAAA,CAAC;IACJ;IAEU,gBAAgB,GAAA;QACxB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;IACjC;AAEU,IAAA,cAAc,CAAC,CAAY,EAAA;AACnC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,SAAS;QACnE,OAAO,CAAA,EAAG,KAAK,CAAA,IAAA,EAAO,CAAC,CAAC,QAAQ,CAAA,EAAA,EAAK,CAAC,CAAC,KAAK,CAAA,CAAE;IAChD;uGA1GW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,msDApET,CAAC,gBAAgB,EAAE,0BAA0B,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAG/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAjES,mBAAmB,EAAA,QAAA,EAAA,8BAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAmElB,SAAS,EAAA,UAAA,EAAA,CAAA;kBAvErB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;oBACrB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,SAAS,EAAE,CAAC,gBAAgB,EAAE,0BAA0B,CAAC;oBACzD,OAAO,EAAE,CAAC,mBAAmB,CAAC;oBAC9B,IAAI,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE,mBAAmB,EAAE,UAAU,EAAE;AAChF,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DT,EAAA,CAAA;AACF,iBAAA;;;ACxGD;;AAEG;;;;"}