@ng-cn/core 1.0.11 → 1.0.12

package/src/app/lib/components/ui/chart/chart.component.ts

@@ -0,0 +1,308 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
+import {
+  CHART_COLORS,
+  CHART_CONTEXT,
+  type ChartDataPoint,
+  type ChartSeries,
+  type ChartType,
+} from './chart-context';
+
+/**
+ * Chart component - renders the actual chart visualization.
+ * This is a simplified SVG-based chart implementation.
+ * For production use, integrate with a charting library like ng2-charts or ngx-charts.
+ */
+@Component({
+  selector: 'Chart',
+  template: `
+    <svg [attr.viewBox]="viewBox()" class="w-full h-full">
+      @switch (type()) {
+        @case ('bar') {
+          @for (bar of barData(); track $index) {
+            <rect
+              [attr.x]="bar.x"
+              [attr.y]="bar.y"
+              [attr.width]="bar.width"
+              [attr.height]="bar.height"
+              [attr.fill]="bar.color"
+              class="transition-all duration-300 hover:opacity-80"
+              rx="4"
+            />
+          }
+        }
+        @case ('line') {
+          <path
+            [attr.d]="linePath()"
+            fill="none"
+            [attr.stroke]="primaryColor()"
+            stroke-width="2"
+            class="transition-all duration-300"
+          />
+          @for (point of linePoints(); track $index) {
+            <circle
+              [attr.cx]="point.x"
+              [attr.cy]="point.y"
+              r="4"
+              [attr.fill]="primaryColor()"
+              class="transition-all duration-300 hover:r-6"
+            />
+          }
+        }
+        @case ('area') {
+          <path
+            [attr.d]="areaPath()"
+            [attr.fill]="primaryColor()"
+            fill-opacity="0.2"
+            class="transition-all duration-300"
+          />
+          <path
+            [attr.d]="linePath()"
+            fill="none"
+            [attr.stroke]="primaryColor()"
+            stroke-width="2"
+            class="transition-all duration-300"
+          />
+        }
+        @case ('pie') {
+          @for (slice of pieSlices(); track $index) {
+            <path
+              [attr.d]="slice.path"
+              [attr.fill]="slice.color"
+              class="transition-all duration-300 hover:opacity-80"
+            />
+          }
+        }
+        @case ('donut') {
+          @for (slice of donutSlices(); track $index) {
+            <path
+              [attr.d]="slice.path"
+              [attr.fill]="slice.color"
+              class="transition-all duration-300 hover:opacity-80"
+            />
+          }
+        }
+      }
+
+      <!-- X-axis labels -->
+      @if (showXAxis()) {
+        @for (label of xAxisLabels(); track $index) {
+          <text
+            [attr.x]="label.x"
+            [attr.y]="height() - 5"
+            text-anchor="middle"
+            class="fill-muted-foreground text-[10px]"
+          >
+            {{ label.text }}
+          </text>
+        }
+      }
+
+      <!-- Y-axis labels -->
+      @if (showYAxis()) {
+        @for (label of yAxisLabels(); track $index) {
+          <text
+            [attr.x]="5"
+            [attr.y]="label.y"
+            text-anchor="start"
+            class="fill-muted-foreground text-[10px]"
+          >
+            {{ label.text }}
+          </text>
+        }
+      }
+    </svg>
+  `,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Chart {
+  private readonly context = inject(CHART_CONTEXT, { optional: true });
+
+  /** Chart type */
+  readonly type = input<ChartType>('bar');
+
+  /** Data points for the chart */
+  readonly data = input<ChartDataPoint[]>([]);
+
+  /** Series data for multi-series charts */
+  readonly series = input<ChartSeries[]>([]);
+
+  /** Chart width */
+  readonly width = input<number>(400);
+
+  /** Chart height */
+  readonly height = input<number>(300);
+
+  /** Show X axis */
+  readonly showXAxis = input<boolean>(true);
+
+  /** Show Y axis */
+  readonly showYAxis = input<boolean>(true);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly viewBox = computed(
+    () => `0 0 ${this.width()} ${this.height()}`
+  );
+
+  protected readonly primaryColor = computed(() => {
+    const config = this.context?.config() || {};
+    const firstKey = Object.keys(config)[0];
+    return config[firstKey]?.color || CHART_COLORS.chart1;
+  });
+
+  protected readonly barData = computed(() => {
+    const data = this.data();
+    const config = this.context?.config() || {};
+    const w = this.width();
+    const h = this.height();
+    const padding = 40;
+    const maxValue = Math.max(...data.map((d) => d.value), 1);
+    const barWidth = (w - padding * 2) / data.length - 10;
+
+    return data.map((d, i) => ({
+      x: padding + i * (barWidth + 10) + 5,
+      y: padding + (h - padding * 2) * (1 - d.value / maxValue),
+      width: barWidth,
+      height: (h - padding * 2) * (d.value / maxValue),
+      color: d.color || config[d.label]?.color || CHART_COLORS.chart1,
+    }));
+  });
+
+  protected readonly linePoints = computed(() => {
+    const data = this.data();
+    const w = this.width();
+    const h = this.height();
+    const padding = 40;
+    const maxValue = Math.max(...data.map((d) => d.value), 1);
+
+    return data.map((d, i) => ({
+      x: padding + (i / Math.max(data.length - 1, 1)) * (w - padding * 2),
+      y: padding + (h - padding * 2) * (1 - d.value / maxValue),
+    }));
+  });
+
+  protected readonly linePath = computed(() => {
+    const points = this.linePoints();
+    if (points.length === 0) return '';
+    return (
+      `M ${points[0].x} ${points[0].y}` +
+      points.slice(1).map((p) => ` L ${p.x} ${p.y}`).join('')
+    );
+  });
+
+  protected readonly areaPath = computed(() => {
+    const points = this.linePoints();
+    const h = this.height();
+    const padding = 40;
+    if (points.length === 0) return '';
+
+    const linePath = this.linePath();
+    const lastX = points[points.length - 1].x;
+    const firstX = points[0].x;
+    const bottomY = h - padding;
+
+    return `${linePath} L ${lastX} ${bottomY} L ${firstX} ${bottomY} Z`;
+  });
+
+  protected readonly pieSlices = computed(() => {
+    const data = this.data();
+    const config = this.context?.config() || {};
+    const total = data.reduce((sum, d) => sum + d.value, 0);
+    const cx = this.width() / 2;
+    const cy = this.height() / 2;
+    const radius = Math.min(cx, cy) - 20;
+    const colors = Object.values(CHART_COLORS);
+
+    let currentAngle = -Math.PI / 2;
+    return data.map((d, i) => {
+      const angle = (d.value / total) * Math.PI * 2;
+      const startAngle = currentAngle;
+      const endAngle = currentAngle + angle;
+      currentAngle = endAngle;
+
+      const x1 = cx + radius * Math.cos(startAngle);
+      const y1 = cy + radius * Math.sin(startAngle);
+      const x2 = cx + radius * Math.cos(endAngle);
+      const y2 = cy + radius * Math.sin(endAngle);
+      const largeArc = angle > Math.PI ? 1 : 0;
+
+      return {
+        path: `M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`,
+        color: d.color || config[d.label]?.color || colors[i % colors.length],
+      };
+    });
+  });
+
+  protected readonly donutSlices = computed(() => {
+    const data = this.data();
+    const config = this.context?.config() || {};
+    const total = data.reduce((sum, d) => sum + d.value, 0);
+    const cx = this.width() / 2;
+    const cy = this.height() / 2;
+    const outerRadius = Math.min(cx, cy) - 20;
+    const innerRadius = outerRadius * 0.6;
+    const colors = Object.values(CHART_COLORS);
+
+    let currentAngle = -Math.PI / 2;
+    return data.map((d, i) => {
+      const angle = (d.value / total) * Math.PI * 2;
+      const startAngle = currentAngle;
+      const endAngle = currentAngle + angle;
+      currentAngle = endAngle;
+
+      const x1 = cx + outerRadius * Math.cos(startAngle);
+      const y1 = cy + outerRadius * Math.sin(startAngle);
+      const x2 = cx + outerRadius * Math.cos(endAngle);
+      const y2 = cy + outerRadius * Math.sin(endAngle);
+      const x3 = cx + innerRadius * Math.cos(endAngle);
+      const y3 = cy + innerRadius * Math.sin(endAngle);
+      const x4 = cx + innerRadius * Math.cos(startAngle);
+      const y4 = cy + innerRadius * Math.sin(startAngle);
+      const largeArc = angle > Math.PI ? 1 : 0;
+
+      return {
+        path: `M ${x1} ${y1} A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${x4} ${y4} Z`,
+        color: d.color || config[d.label]?.color || colors[i % colors.length],
+      };
+    });
+  });
+
+  protected readonly xAxisLabels = computed(() => {
+    const data = this.data();
+    const w = this.width();
+    const padding = 40;
+
+    return data.map((d, i) => ({
+      x: padding + (i / Math.max(data.length - 1, 1)) * (w - padding * 2),
+      text: d.label,
+    }));
+  });
+
+  protected readonly yAxisLabels = computed(() => {
+    const data = this.data();
+    const h = this.height();
+    const padding = 40;
+    const maxValue = Math.max(...data.map((d) => d.value), 1);
+    const steps = 5;
+
+    return Array.from({ length: steps + 1 }, (_, i) => ({
+      y: padding + ((h - padding * 2) * i) / steps,
+      text: String(Math.round(maxValue * (1 - i / steps))),
+    }));
+  });
+
+  protected readonly computedClass = computed(() =>
+    cn('w-full h-full', this.class())
+  );
+}

package/src/app/lib/components/ui/chart/index.ts

@@ -0,0 +1,16 @@
+export { ChartContainer } from './chart-container.component';
+export {
+    CHART_COLORS,
+    CHART_CONTEXT,
+    type ChartConfig,
+    type ChartContext,
+    type ChartDataPoint,
+    type ChartSeries,
+    type ChartType
+} from './chart-context';
+export { ChartLegendContent } from './chart-legend-content.component';
+export { ChartLegend } from './chart-legend.component';
+export { ChartTooltipContent } from './chart-tooltip-content.component';
+export { ChartTooltip } from './chart-tooltip.component';
+export { Chart } from './chart.component';
+

package/src/app/lib/components/ui/checkbox/checkbox.component.ts

@@ -0,0 +1,203 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    ElementRef,
+    forwardRef,
+    input,
+    model,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * Checkbox component for boolean selection.
+ * Implements ControlValueAccessor for Angular Forms integration.
+ * Supports checked, unchecked, and indeterminate states (Radix UI compatible).
+ *
+ * @example
+ * <!-- Basic checkbox -->
+ * <Checkbox id="terms" />
+ *
+ * <!-- Controlled checkbox -->
+ * <Checkbox [(checked)]="isChecked" />
+ *
+ * <!-- Indeterminate state -->
+ * <Checkbox [checked]="'indeterminate'" />
+ *
+ * <!-- With reactive forms -->
+ * <Checkbox formControlName="agree" />
+ *
+ * <!-- Disabled checkbox -->
+ * <Checkbox [disabled]="true" />
+ *
+ * <!-- With label -->
+ * <div class="flex items-center gap-2">
+ *   <Checkbox id="terms" />
+ *   <Label for="terms">Accept terms</Label>
+ * </div>
+ */
+@Component({
+  selector: 'Checkbox',
+  template: `
+    <input
+      #inputElement
+      type="checkbox"
+      [attr.id]="id()"
+      [checked]="checked() === true"
+      [indeterminate]="checked() === 'indeterminate'"
+      [disabled]="isDisabled()"
+      (change)="toggle()"
+      class="sr-only peer"
+    />
+    <div
+      [class]="boxClass()"
+      [attr.data-state]="getDataState()"
+      [attr.data-disabled]="isDisabled() ? '' : null"
+      aria-hidden="true"
+    >
+      <span
+        data-slot="checkbox-indicator"
+        class="flex items-center justify-center text-current"
+      >
+        @if (checked() === true) {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            [class]="checkIconClass()"
+          >
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        }
+        @if (checked() === 'indeterminate') {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            [class]="checkIconClass()"
+          >
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+        }
+      </span>
+    </div>
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    'data-slot': 'checkbox',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Checkbox),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Checkbox implements ControlValueAccessor {
+  private readonly inputElement = viewChild<ElementRef<HTMLInputElement>>('inputElement');
+
+  /** The id for the checkbox input - used for label association */
+  readonly id = input<string>();
+
+  /** Whether the checkbox is checked (boolean) or indeterminate ('indeterminate') */
+  readonly checked = model<boolean | 'indeterminate'>(false);
+
+  /** Whether the checkbox is disabled via input */
+  readonly disabled = input<boolean>(false);
+
+  /** Whether the checkbox is disabled via forms */
+  private readonly formsDisabled = signal<boolean>(false);
+
+  /** Whether the checkbox is disabled (either via input or forms) */
+  readonly isDisabled = computed(() => this.disabled() || this.formsDisabled());
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: boolean | 'indeterminate') => void = () => {};
+  private onTouched: () => void = () => {};
+
+  /** Get the data-state attribute value */
+  getDataState(): string {
+    const state = this.checked();
+    if (state === true) return 'checked';
+    if (state === 'indeterminate') return 'indeterminate';
+    return 'unchecked';
+  }
+
+  /** Toggle the checkbox state */
+  toggle() {
+    if (!this.isDisabled()) {
+      const current = this.checked();
+      // Cycle through: unchecked -> checked -> unchecked
+      const next = current === true ? false : true;
+      this.checked.set(next);
+      this.onChange(next);
+      this.onTouched();
+    }
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: boolean | 'indeterminate'): void {
+    this.checked.set(value ?? false);
+  }
+
+  registerOnChange(fn: (value: boolean | 'indeterminate') => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formsDisabled.set(isDisabled);
+  }
+
+  /** Computed class for the check icon with animation */
+  protected readonly checkIconClass = computed(() =>
+    cn(
+      'size-3.5 transition-all duration-200 ease-in-out',
+      this.checked()
+        ? 'opacity-100 scale-100'
+        : 'opacity-0 scale-0'
+    )
+  );
+
+  /** Computed class for the visual checkbox box */
+  protected readonly boxClass = computed(() =>
+    cn(
+      'peer-focus-visible:border-ring peer-focus-visible:ring-ring/50 peer-focus-visible:ring-[3px]',
+      'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary',
+      'size-4 shrink-0 rounded-[4px] border shadow-xs transition-all duration-200 outline-none',
+      'inline-flex items-center justify-center cursor-pointer',
+      this.isDisabled() && 'cursor-not-allowed opacity-50'
+    )
+  );
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'relative inline-flex',
+      this.class()
+    )
+  );
+}

package/src/app/lib/components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox.component';

package/src/app/lib/components/ui/collapsible/collapsible-content.component.ts

@@ -0,0 +1,58 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { COLLAPSIBLE_CONTEXT } from './collapsible-context';
+
+/**
+ * CollapsibleContent component - content that is shown/hidden.
+ *
+ * @example
+ * <CollapsibleContent>
+ *   <p>Content that can be collapsed</p>
+ * </CollapsibleContent>
+ */
+@Component({
+  selector: 'CollapsibleContent',
+  template: `
+    <div [class]="innerClass()">
+      <ng-content />
+    </div>
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.data-state]': 'collapsible.isOpen() ? "open" : "closed"',
+    '[attr.data-disabled]': 'collapsible.disabled() ? "" : null',
+    '[attr.aria-hidden]': '!collapsible.isOpen()',
+  },
+  styles: [`
+    :host {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 200ms ease-out;
+    }
+    :host[data-state="open"] {
+      grid-template-rows: 1fr;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CollapsibleContent {
+  protected readonly collapsible = inject(COLLAPSIBLE_CONTEXT);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'overflow-hidden',
+      this.class()
+    )
+  );
+
+  protected readonly innerClass = computed(() => 'min-h-0');
+}

package/src/app/lib/components/ui/collapsible/collapsible-context.ts

@@ -0,0 +1,17 @@
+import { InjectionToken } from '@angular/core';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CollapsibleContext {
+  isOpen: () => boolean;
+  toggle: () => void;
+  disabled: () => boolean;
+}
+
+// ============================================================================
+// Injection Tokens
+// ============================================================================
+
+export const COLLAPSIBLE_CONTEXT = new InjectionToken<CollapsibleContext>('CollapsibleContext');

package/src/app/lib/components/ui/collapsible/collapsible-trigger.component.ts

@@ -0,0 +1,56 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { COLLAPSIBLE_CONTEXT } from './collapsible-context';
+
+/**
+ * CollapsibleTrigger component - clickable element that toggles content.
+ *
+ * @example
+ * <CollapsibleTrigger>Click to toggle</CollapsibleTrigger>
+ */
+@Component({
+  selector: 'CollapsibleTrigger',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.data-state]': 'collapsible.isOpen() ? "open" : "closed"',
+    '[attr.data-disabled]': 'collapsible.disabled() ? "" : null',
+    '[attr.aria-expanded]': 'collapsible.isOpen()',
+    '[attr.disabled]': 'collapsible.disabled() ? true : null',
+    '(click)': 'onClick()',
+    '(keydown.enter)': 'onClick()',
+    '(keydown.space)': 'onSpace($event)',
+    '[attr.tabindex]': 'collapsible.disabled() ? -1 : 0',
+    'role': 'button',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CollapsibleTrigger {
+  protected readonly collapsible = inject(COLLAPSIBLE_CONTEXT);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'cursor-pointer',
+      'disabled:pointer-events-none disabled:opacity-50',
+      this.class()
+    )
+  );
+
+  protected onClick(): void {
+    this.collapsible.toggle();
+  }
+
+  protected onSpace(event: Event): void {
+    event.preventDefault();
+    this.onClick();
+  }
+}