@ojiepermana/angular 22.1.11 → 22.1.12

package/component/tooltip/README.md

@@ -0,0 +1,230 @@
+# Tooltip
+
+Displays a small, supplemental text label when a focusable element receives hover or keyboard focus.
+
+This Angular implementation now supports a composition-based tooltip surface with `Tooltip`, `[TooltipTrigger]`, and `ng-template[TooltipContent]`, while keeping the older `[Tooltip]` string directive as a lightweight shortcut for one-line hints.
+
+## Import
+
+```ts
+import {
+  TooltipComponent,
+  TooltipContentDirective,
+  TooltipDirective,
+  TooltipTriggerDirective,
+} from '@ojiepermana/angular/component/tooltip';
+```
+
+## Composition
+
+```text
+Tooltip
+├── focusable host[TooltipTrigger]
+└── ng-template[TooltipContent]
+
+Optional convenience shortcut:
+button[Tooltip]
+```
+
+## Basic usage
+
+Use the composed surface when you want shadcn-style trigger and content structure or richer overlay content.
+
+```html
+<Tooltip [openDelay]="0">
+  <ng-template TooltipContent #tooltipContent="TooltipContent">
+    <span>Add to library</span>
+  </ng-template>
+
+  <button Button type="button" variant="outline" [TooltipTrigger]="tooltipContent">Hover</button>
+</Tooltip>
+```
+
+## Common patterns
+
+### Side and alignment
+
+Use `side="top|right|bottom|left"` and `align="start|center|end"` on `[TooltipTrigger]` to control placement.
+
+```html
+<Tooltip side="top" [openDelay]="0">
+  <ng-template TooltipContent #startContent="TooltipContent">
+    <span>Start aligned tooltip</span>
+  </ng-template>
+
+  <button Button type="button" variant="outline" [TooltipTrigger]="startContent" align="start">
+    Start
+  </button>
+</Tooltip>
+```
+
+### Rich content
+
+The overlay template can include small layout fragments, emphasized text, or keyboard shortcut chips.
+
+```html
+<Tooltip [openDelay]="0">
+  <ng-template TooltipContent #shortcutContent="TooltipContent">
+    <span class="inline-flex items-center gap-1.5">
+      Save changes
+      <kbd
+        class="border-primary-foreground/30 bg-primary-foreground/10 text-primary-foreground shadow-none"
+      >
+        Cmd
+      </kbd>
+      <kbd
+        class="border-primary-foreground/30 bg-primary-foreground/10 text-primary-foreground shadow-none"
+      >
+        S
+      </kbd>
+    </span>
+  </ng-template>
+
+  <button Button type="button" variant="outline" [TooltipTrigger]="shortcutContent">Save</button>
+</Tooltip>
+```
+
+### Disabled buttons
+
+Disabled native buttons do not emit hover or focus events. Wrap them with a focusable element and attach `[TooltipTrigger]` to the wrapper.
+
+```html
+<Tooltip [openDelay]="0">
+  <ng-template TooltipContent #disabledContent="TooltipContent">
+    <span>This feature is currently unavailable</span>
+  </ng-template>
+
+  <span
+    class="inline-block rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    tabindex="0"
+    [TooltipTrigger]="disabledContent"
+  >
+    <button Button type="button" variant="outline" disabled>Disabled</button>
+  </span>
+</Tooltip>
+```
+
+### Quick string API
+
+For simple one-line hints, the original directive remains available.
+
+```html
+<button
+  Button
+  type="button"
+  variant="outline"
+  [Tooltip]="'Quick text hint'"
+  TooltipPosition="above"
+>
+  String directive
+</button>
+```
+
+### Programmatic control
+
+Export the trigger as `TooltipTrigger` when a flow needs to open or close the composed tooltip imperatively.
+
+```html
+<Tooltip [openDelay]="0">
+  <ng-template TooltipContent #saveContent="TooltipContent">
+    <span>Saved</span>
+  </ng-template>
+
+  <button
+    Button
+    type="button"
+    variant="outline"
+    #saveTrigger="TooltipTrigger"
+    [TooltipTrigger]="saveContent"
+    (click)="saveTrigger.open()"
+  >
+    Save
+  </button>
+</Tooltip>
+```
+
+## API reference
+
+### `TooltipComponent`
+
+| Input        | Type                                     | Default    |
+| ------------ | ---------------------------------------- | ---------- |
+| `side`       | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'`    |
+| `align`      | `'start' \| 'center' \| 'end'`           | `'center'` |
+| `sideOffset` | `number`                                 | `4`        |
+| `openDelay`  | `number`                                 | `150`      |
+| `closeDelay` | `number`                                 | `0`        |
+
+### `TooltipTriggerDirective`
+
+| Input            | Type                                     | Notes                                               |
+| ---------------- | ---------------------------------------- | --------------------------------------------------- |
+| `TooltipTrigger` | `TooltipContentDirective`                | Required content template ref for the overlay body. |
+| `side`           | `'top' \| 'right' \| 'bottom' \| 'left'` | Overrides the root side for this trigger.           |
+| `align`          | `'start' \| 'center' \| 'end'`           | Overrides the root alignment for this trigger.      |
+| `sideOffset`     | `number`                                 | Overrides the root offset for this trigger.         |
+| `openDelay`      | `number`                                 | Overrides the root open delay for this trigger.     |
+| `closeDelay`     | `number`                                 | Overrides the root close delay for this trigger.    |
+| `disabled`       | `boolean`                                | Suppresses tooltip opening for the trigger.         |
+
+### `TooltipTriggerDirective` outputs
+
+| Output         | Type      | Notes                                                  |
+| -------------- | --------- | ------------------------------------------------------ |
+| `openedChange` | `boolean` | Emits `true` when the tooltip opens, `false` on close. |
+
+### `TooltipTriggerDirective` methods
+
+- `open()`: opens the composed tooltip.
+- `close()`: closes the composed tooltip.
+
+### `TooltipContentDirective`
+
+- Applied as `ng-template[TooltipContent]`.
+- Supplies the portal content rendered inside the tooltip overlay.
+
+### `TooltipDirective`
+
+| Input              | Type              | Notes                                                    |
+| ------------------ | ----------------- | -------------------------------------------------------- |
+| `Tooltip`          | `string`          | Message rendered inside the tooltip overlay.             |
+| `TooltipPosition`  | `TooltipPosition` | `left`, `right`, `above`, `below`, `before`, or `after`. |
+| `TooltipDisabled`  | `boolean`         | Temporarily suppresses tooltip display.                  |
+| `TooltipShowDelay` | `number`          | Delay in milliseconds before the tooltip opens.          |
+| `TooltipHideDelay` | `number`          | Delay in milliseconds before the tooltip closes.         |
+
+For the original primitive contract, see the Radix Tooltip API: <https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference>.
+
+## Styling and theming
+
+The composed tooltip applies its visual shell directly on the overlay pane and keeps the stable `tooltip-panel` class hook.
+
+Projected content inherits the library theme tokens, so small layout helpers such as `inline-flex`, gap utilities, and subtle emphasis classes can be used without rebuilding the panel wrapper.
+
+The string directive continues to force the `tooltip-panel` class on the Material tooltip overlay for backward-compatible styling.
+
+## Accessibility
+
+- The composed overlay pane uses `role="tooltip"`.
+- Trigger hosts receive `aria-describedby` while the tooltip is open.
+- Tooltip content should stay supplemental and should not be the only place that important instructions live.
+- Use focusable hosts so keyboard users can reveal the tooltip without relying on hover.
+- Disabled controls still need a focusable wrapper if you expect keyboard users to reach the explanation.
+
+## Keyboard interactions
+
+- Focusing the trigger opens the tooltip after the configured delay.
+- Moving focus away closes it again.
+- Pressing Escape closes the currently open composed tooltip.
+- Native hosts keep their default Enter and Space behavior.
+
+## Angular notes
+
+- Prefer the composition-based surface when you need richer content or closer shadcn parity.
+- Keep the string directive for quick one-line hints or for existing code that already relies on `MatTooltip` semantics.
+- The composed trigger is exported as `TooltipTrigger`, so template refs can call `open()` and `close()` directly.
+- For interactive overlay content, use Popover or Hover Card instead of Tooltip.
+
+## Source parity
+
+This Angular version now mirrors the shadcn runtime more closely with an explicit root, trigger, and content surface while preserving a compact Angular convenience directive for minimal text hints.

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

@@ -1,7 +1,293 @@
-export * from '@ojiepermana/angular-chart/area';
+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';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * 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.4", ngImport: i0, type: AreaChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="cx.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]="cx.innerTransform()">
+        <!-- The brush hitbox is slotted first so it sits UNDER the marks: it is
+             a hit-testable rect, and on top it swallowed every click, hover and
+             cursor affordance the dots publish. -->
+        <ng-content select="svg:g[ChartBrush]" />
+        <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
+                  ChartMarkFocus
+                  class="chart-dot cursor-pointer"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="s.color"
+                  [attr.aria-label]="cx.pointAriaLabel(p)"
+                  role="img"
+                  tabindex="0"
+                  (focus)="cx.setActivePoint($event, p)"
+                  (blur)="cx.clearActivePoint()"
+                  (click)="cx.emitClick(p)"
+                  (keydown.enter)="cx.emitClick(p)"
+                  (keydown.space)="cx.emitClick(p); $event.preventDefault()"
+                />
+              }
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ChartAxisX]" />
+        <ng-content select="svg\\:g[ChartAxisY]" />
+        <ng-content select="svg\\:g[ChartCrosshair]" />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ng-content select="ChartZoomControls" />
+    <ChartDataTable
+      [data]="cx.visibleData()"
+      [columns]="dataColumns()"
+      [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.4", 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
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="cx.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]="cx.innerTransform()">
+        <!-- The brush hitbox is slotted first so it sits UNDER the marks: it is
+             a hit-testable rect, and on top it swallowed every click, hover and
+             cursor affordance the dots publish. -->
+        <ng-content select="svg:g[ChartBrush]" />
+        <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
+                  ChartMarkFocus
+                  class="chart-dot cursor-pointer"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="s.color"
+                  [attr.aria-label]="cx.pointAriaLabel(p)"
+                  role="img"
+                  tabindex="0"
+                  (focus)="cx.setActivePoint($event, p)"
+                  (blur)="cx.clearActivePoint()"
+                  (click)="cx.emitClick(p)"
+                  (keydown.enter)="cx.emitClick(p)"
+                  (keydown.space)="cx.emitClick(p); $event.preventDefault()"
+                />
+              }
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ChartAxisX]" />
+        <ng-content select="svg\\:g[ChartAxisY]" />
+        <ng-content select="svg\\:g[ChartCrosshair]" />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ng-content select="ChartZoomControls" />
+    <ChartDataTable
+      [data]="cx.visibleData()"
+      [columns]="dataColumns()"
+      [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 };