@ojiepermana/angular 22.1.14 → 22.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 Accessible, tree-shakable Angular 22 design system from ojiepermana: UI components, charts, navigation shells, theme tokens, and an OpenAPI SDK generator.
 
-The ojiepermana design system for Angular v22+, published as **one package**.
+The ojiepermana design system for Angular v22.2+, published as **one package**.
 Components, charts, navigation shells, theme tokens, and the OpenAPI SDK
 generator all live behind subpath entry points of this single install.
 
@@ -21,14 +21,14 @@ bun add @ojiepermana/angular
 
 ## Peer dependencies
 
-You must already have Angular v22+ in your app (`@angular/common`, `@angular/core`,
+You must already have Angular v22.2+ in your app (`@angular/common`, `@angular/core`,
 plus `@angular/router` and `rxjs`). `@angular/cdk`, `@angular/forms`, and
 `@angular/platform-browser` are optional peers: install them when you use the
 surfaces that need them.
 
-**`@angular/material` is optional.** Only three components wrap Material and
-therefore require it: **`select`**, **`date-picker`**, and **`calendar`**. Install
-it _only_ if you import one of those:
+**`@angular/material` is optional.** The **`select`** skin requires it. Calendar
+and DatePicker use the library's own controls and do not require Material. Install
+it when you import Select:
 
 ```bash
 bun add @angular/material
@@ -120,6 +120,8 @@ MIT. See the bundled `LICENSE` file.
 
 ## Support and security
 
-Angular 22.1–22.x CSR/browser usage is supported; SSR, prerendering, and hydration are not. See the
+Angular 22.2–22.x CSR/browser usage is supported; SSR, prerendering, and hydration are not. See the
 bundled `SUPPORT.md`. Report suspected vulnerabilities privately using the instructions in the
 bundled `SECURITY.md`.
+
+Supported Node versions: ^22.22.3 || ^24.15.0 || >=26.0.0 <27.0.0. Apps on Angular 22.1 must upgrade. Angular peers require >=22.2.0 <23.0.0; optional peers remain optional.

package/SUPPORT.md

@@ -1,12 +1,12 @@
 # Runtime Support
 
-The published `@ojiepermana/*` UI packages support Angular 22.1 or newer applications running in a
+The published `@ojiepermana/*` UI packages support Angular 22.2 or newer applications running in a
 modern browser with client-side rendering (CSR).
 
 | Runtime                                                        | Support                                                |
 | -------------------------------------------------------------- | ------------------------------------------------------ |
-| Angular 22.1–22.x CSR in current Chromium, Firefox, and WebKit | Supported                                              |
-| Angular 22.0 or earlier                                        | Unsupported                                            |
+| Angular 22.2–22.x CSR in current Chromium, Firefox, and WebKit | Supported                                              |
+| Angular 22.1 or earlier                                        | Unsupported                                            |
 | Angular 23 or later                                            | Unsupported until a matching package major is released |
 | Server-side rendering, prerendering, and hydration             | Unsupported                                            |
 

package/chart/README.md

@@ -267,6 +267,6 @@ Check it before moving them: build the library and look for `d3-` imports in
 
 ## Support and security
 
-Angular 22.1–22.x CSR/browser usage is supported; SSR, prerendering, and hydration are not. See the
+Angular 22.2–22.x CSR/browser usage is supported; SSR, prerendering, and hydration are not. See the
 bundled `SUPPORT.md`. Report suspected vulnerabilities privately using the instructions in the
 bundled `SECURITY.md`. This package is MIT licensed; see the bundled `LICENSE`.

package/component/README.md

@@ -1,6 +1,6 @@
 # @ojiepermana/angular/component
 
-Library ini berada di `library/component` dan diterbitkan sebagai subpath `component` dari paket tunggal `@ojiepermana/angular`.
+Library ini berada di `packages/angular/component` dan diterbitkan sebagai subpath `component` dari paket tunggal `@ojiepermana/angular`.
 
 Library ini menggunakan pola secondary entry point per folder. Import yang disarankan adalah langsung ke subpath yang dibutuhkan, misalnya `@ojiepermana/angular/component/button` atau `@ojiepermana/angular/chart/bar`.
 
@@ -84,6 +84,6 @@ mengimpor `SelectField` tidak perlu memasang Material.
 
 ## Support and security
 
-Angular 22.1–22.x CSR/browser usage is supported; SSR, prerendering, and hydration are not. See the
+Angular 22.2–22.x CSR/browser usage is supported; SSR, prerendering, and hydration are not. See the
 bundled `SUPPORT.md`. Report suspected vulnerabilities privately using the instructions in the
 bundled `SECURITY.md`. This package is MIT licensed; see the bundled `LICENSE`.

package/component/calendar/README.md

@@ -1,6 +1,6 @@
 # Calendar
 
-Inline single-date calendar built on Angular Material `MatCalendar` and wrapped with shadcn-style theme tokens.
+Inline single-date calendar with native `Date` values and shadcn-style theme tokens.
 
 Use Calendar when the date grid should stay visible in the page. Use `DatePickerComponent` when the same selection should live behind an input and popover trigger.
 
@@ -10,21 +10,9 @@ Use Calendar when the date grid should stay visible in the page. Use `DatePicker
 import { CalendarComponent } from '@ojiepermana/angular/component/calendar';
 ```
 
-## Date adapter
+## Runtime dependencies
 
-The component self-provides a native `DateAdapter`, so it works out of the box in any
-consumer — including when federated into a host app that never wired one. You only need
-to add a date adapter at the application root if you want a non-native one or a custom
-locale (`MAT_DATE_LOCALE` flows in from the parent injector):
-
-```ts
-// app.config.ts — optional, only for a custom adapter/locale
-import { provideNativeDateAdapter } from '@angular/material/core';
-
-export const appConfig = {
-  providers: [provideNativeDateAdapter()],
-};
-```
+Calendar implements its own date grid. It does not require Angular Material or a date adapter provider. Date labels use the browser runtime locale through `Intl.DateTimeFormat`.
 
 ## Usage
 

package/component/drawer/README.md

@@ -20,7 +20,7 @@ import {
 ## Usage
 
 ```ts
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { ButtonComponent } from '@ojiepermana/angular/component/button';
 import {
   DrawerCloseDirective,
@@ -33,7 +33,6 @@ import {
 
 @Component({
   selector: 'app-drawer-example',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     ButtonComponent,
     DrawerCloseDirective,

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

@@ -1,121 +1,187 @@
-import * as i0 from '@angular/core';
-import { inject, input, output, computed, Component } from '@angular/core';
-import { ChartContext, CartesianContext, CategoricalViewportContext, resolveChartStyle, ChartThemeSpace, resolveChartMargin, DEFAULT_CARTESIAN_MARGIN_UNITS, setupCartesianChart, provideCartesianFromLineLayout, computeAreaLayout, ChartRovingFocus, ChartMarkFocus, ChartDataTable } from '@ojiepermana/angular/chart/core';
-import { ChartPointerTracker } from '@ojiepermana/angular/chart/primitives';
-
-/**
- * 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 */ []));
-    /**
-     * Presentational style of the chart.
-     *
-     * Replaces `styles`, which read like a CSS styles bag rather than a single
-     * variant. Named `styleVariant` and not `variant` because `ChartBar` already
-     * publishes a `variant` input for its grouped versus stacked axis, and one
-     * name cannot mean two things across the family.
-     */
-    styleVariant = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "styleVariant" }] : /* istanbul ignore next */ []));
-    /**
-     * @deprecated Use `styleVariant`. Still fully supported; when both are bound,
-     *   `styleVariant` wins. Due for removal in the next major.
-     */
-    styles = input('base', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
-    /** The style actually in effect. Bind this, never `styles()`. */
-    chartStyle = resolveChartStyle(this.styleVariant, this.styles);
-    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 */ []));
-    themeSpace = inject(ChartThemeSpace);
-    /**
-     * Plot gutters. Leave it unset and they follow the theme-space density
-     * axis; set it and your numbers win, unchanged, whatever the axis says.
-     */
-    margin = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    /** The margin actually in effect. Bind this, never `margin()`. */
-    plotMargin = resolveChartMargin(this.margin, DEFAULT_CARTESIAN_MARGIN_UNITS, this.themeSpace);
-    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();
-    /**
-     * The shared cartesian scaffolding: geometry, the index window, the layout
-     * effect, and the click plus active-point plus aria-label handlers.
-     *
-     * Declared before `layout` because the layout computed reads its geometry.
-     */
-    cx = setupCartesianChart({
-        data: () => this.data(),
-        margin: () => this.plotMargin(),
-        cartesian: { context: this.cart, orientation: () => this.orientation() },
-        viewport: this.viewport,
-        publishLayout: (inner) => provideCartesianFromLineLayout(this.cart, this.layout(), this.orientation(), inner.width, inner.height),
-        click: {
-            emit: (event) => this.pointClick.emit(event),
-            payload: (point, datumIndex, datum) => ({
-                seriesKey: point.seriesKey,
-                datumIndex,
-                category: point.category,
-                value: point.value,
-                datum,
-            }),
-        },
-        ariaLabel: (point, label) => `${label} at ${point.category}: ${point.value}`,
-    });
-    layout = computed(() => computeAreaLayout({
-        data: this.cx.visibleData(),
-        xKey: this.xKey(),
-        seriesKeys: this.root.visibleSeriesKeys(),
-        orientation: this.orientation(),
-        innerWidth: this.cx.innerWidth(),
-        innerHeight: this.cx.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 */ []));
-    ariaSummary = computed(() => {
-        const keys = this.root.visibleSeriesKeys();
-        return `Area chart, ${this.cx.visibleData().length} points, ${keys.length} series: ${keys.join(', ')}.`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
-    dataColumns = computed(() => [this.xKey(), ...this.root.visibleSeriesKeys()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []));
-    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;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AreaChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 }, styleVariant: { classPropertyName: "styleVariant", publicName: "styleVariant", 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": "chartStyle()" }, classAttribute: "relative block h-full w-full" }, providers: [CartesianContext, CategoricalViewportContext], ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { Component, computed, inject, input, output } from "@angular/core";
+import { CartesianContext, CategoricalViewportContext, ChartContext, ChartDataTable, ChartMarkFocus, ChartRovingFocus, ChartThemeSpace, DEFAULT_CARTESIAN_MARGIN_UNITS, computeAreaLayout, provideCartesianFromLineLayout, resolveChartMargin, resolveChartStyle, setupCartesianChart } from "@ojiepermana/angular/chart/core";
+import { ChartPointerTracker } from "@ojiepermana/angular/chart/primitives";
+var AreaChart = class AreaChart {
+	root = inject(ChartContext);
+	cart = inject(CartesianContext);
+	viewport = inject(CategoricalViewportContext);
+	data = input.required(...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	xKey = input.required(...ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	styleVariant = input(void 0, ...ngDevMode ? [{ debugName: "styleVariant" }] : /* istanbul ignore next */ []);
+	styles = input("base", ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
+	chartStyle = resolveChartStyle(this.styleVariant, this.styles);
+	stacked = input(false, ...ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []);
+	expanded = input(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	gradient = input(true, ...ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []);
+	curve = input("monotone", ...ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []);
+	themeSpace = inject(ChartThemeSpace);
+	margin = input(null, ...ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []);
+	plotMargin = resolveChartMargin(this.margin, DEFAULT_CARTESIAN_MARGIN_UNITS, this.themeSpace);
+	strokeWidth = input(2, ...ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []);
+	showDots = input(false, ...ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []);
+	dotRadius = input(3, ...ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []);
+	pointClick = output();
+	cx = setupCartesianChart({
+		data: () => this.data(),
+		margin: () => this.plotMargin(),
+		cartesian: {
+			context: this.cart,
+			orientation: () => this.orientation()
+		},
+		viewport: this.viewport,
+		publishLayout: (inner) => provideCartesianFromLineLayout(this.cart, this.layout(), this.orientation(), inner.width, inner.height),
+		click: {
+			emit: (event) => this.pointClick.emit(event),
+			payload: (point, datumIndex, datum) => ({
+				seriesKey: point.seriesKey,
+				datumIndex,
+				category: point.category,
+				value: point.value,
+				datum
+			})
+		},
+		ariaLabel: (point, label) => `${label} at ${point.category}: ${point.value}`
+	});
+	layout = computed(() => computeAreaLayout({
+		data: this.cx.visibleData(),
+		xKey: this.xKey(),
+		seriesKeys: this.root.visibleSeriesKeys(),
+		orientation: this.orientation(),
+		innerWidth: this.cx.innerWidth(),
+		innerHeight: this.cx.innerHeight(),
+		curve: this.curve(),
+		stacked: this.stacked(),
+		expanded: this.expanded()
+	}), ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	series = computed(() => this.layout().series, ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	ariaSummary = computed(() => {
+		const keys = this.root.visibleSeriesKeys();
+		return `Area chart, ${this.cx.visibleData().length} points, ${keys.length} series: ${keys.join(", ")}.`;
+	}, ...ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []);
+	dataColumns = computed(() => [this.xKey(), ...this.root.visibleSeriesKeys()], ...ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []);
+	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;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AreaChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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
+			},
+			styleVariant: {
+				classPropertyName: "styleVariant",
+				publicName: "styleVariant",
+				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": "chartStyle()" },
+			classAttribute: "relative block h-full w-full"
+		},
+		providers: [CartesianContext, CategoricalViewportContext],
+		ngImport: i0,
+		template: `
     <svg:svg
       ChartPointerTracker
       ChartRovingFocus
@@ -194,16 +260,59 @@ class AreaChart {
       [rowHeaderKey]="xKey()"
       [label]="ariaSummary()"
     />
-  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }, { kind: "directive", type: ChartRovingFocus, selector: "svg[ChartRovingFocus]" }, { kind: "directive", type: ChartMarkFocus, selector: "[ChartMarkFocus]" }, { kind: "component", type: ChartDataTable, selector: "ChartDataTable", inputs: ["data", "columns", "label", "rowHeaderKey"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AreaChart, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ChartArea',
-                    providers: [CartesianContext, CategoricalViewportContext],
-                    imports: [ChartPointerTracker, ChartRovingFocus, ChartMarkFocus, ChartDataTable],
-                    host: { class: 'relative block h-full w-full', '[attr.data-style]': 'chartStyle()' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: ChartPointerTracker,
+				selector: "svg:svg[ChartPointerTracker]"
+			},
+			{
+				kind: "directive",
+				type: ChartRovingFocus,
+				selector: "svg[ChartRovingFocus]"
+			},
+			{
+				kind: "directive",
+				type: ChartMarkFocus,
+				selector: "[ChartMarkFocus]"
+			},
+			{
+				kind: "component",
+				type: ChartDataTable,
+				selector: "ChartDataTable",
+				inputs: [
+					"data",
+					"columns",
+					"label",
+					"rowHeaderKey"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AreaChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ChartArea",
+			providers: [CartesianContext, CategoricalViewportContext],
+			imports: [
+				ChartPointerTracker,
+				ChartRovingFocus,
+				ChartMarkFocus,
+				ChartDataTable
+			],
+			host: {
+				class: "relative block h-full w-full",
+				"[attr.data-style]": "chartStyle()"
+			},
+			template: `
     <svg:svg
       ChartPointerTracker
       ChartRovingFocus
@@ -282,12 +391,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
       [rowHeaderKey]="xKey()"
       [label]="ariaSummary()"
     />
-  `,
-                }]
-        }], 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 }] }], styleVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleVariant", 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 };
+  `
+		}]
+	}],
+	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
+			}]
+		}],
+		styleVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleVariant",
+				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"]
+		}]
+	}
+});
+export { AreaChart };