@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/carousel/carousel-previous.component.ts

@@ -29,18 +29,17 @@ import { CAROUSEL_CONTEXT } from './carousel-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CarouselPrevious {
-  protected readonly context = inject(CAROUSEL_CONTEXT);
-  protected readonly ArrowLeftIcon = ArrowLeft;
-
   /** Button variant */
-  readonly variant = input<'default' | 'outline' | 'secondary' | 'ghost' | 'link' | 'destructive'>('outline');
-
+  readonly variant = input<'default' | 'outline' | 'secondary' | 'ghost' | 'link' | 'destructive'>(
+    'outline',
+  );
   /** Button size */
   readonly size = input<'default' | 'sm' | 'lg' | 'icon'>('icon');
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(CAROUSEL_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
       buttonVariants({ variant: this.variant(), size: this.size() }),
@@ -48,7 +47,9 @@ export class CarouselPrevious {
       this.context.orientation() === 'horizontal'
         ? '-left-12 top-1/2 -translate-y-1/2'
         : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      this.class()
-    )
+      this.class(),
+    ),
   );
+
+  protected readonly ArrowLeftIcon = ArrowLeft;
 }

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

@@ -1,17 +1,10 @@
 import { cn } from '@/lib/utils';
 import { LiveAnnouncerService } from '@/lib/utils/accessibility';
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-    signal,
-} from '@angular/core';
-import {
-    CAROUSEL_CONTEXT,
-    type CarouselContextValue,
-    type CarouselOrientation,
+  CAROUSEL_CONTEXT,
+  type CarouselContextValue,
+  type CarouselOrientation,
 } from './carousel-context';
 
 /**
@@ -85,7 +78,7 @@ import {
   ],
   host: {
     '[class]': 'computedClass()',
-    'role': 'region',
+    role: 'region',
     '[attr.aria-label]': 'ariaLabel()',
     'aria-roledescription': 'carousel',
     '(keydown.arrowleft)': 'onKeyDown($event, "left")',
@@ -94,32 +87,28 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Carousel {
-  private readonly liveAnnouncer = inject(LiveAnnouncerService);
-
   /** Carousel orientation */
   readonly orientation = input<CarouselOrientation>('horizontal');
-
   /** Accessible label for the carousel */
   readonly ariaLabel = input<string>('Carousel');
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  /** Current slide announcement for screen readers */
-  readonly slideAnnouncement = signal<string>('');
+  private readonly _liveAnnouncer = inject(LiveAnnouncerService);
 
-  protected readonly computedClass = computed(() =>
-    cn('relative', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('relative', this.class()));
 
-  protected onKeyDown(_event: Event, _direction: 'left' | 'right'): void {
-    // Keyboard navigation is handled by the carousel API
-  }
+  /** Current slide announcement for screen readers */
+  readonly slideAnnouncement = signal<string>('');
 
   /** Announce slide change to screen readers */
   announceSlideChange(index: number, total: number): void {
     const message = `Slide ${index + 1} of ${total}`;
     this.slideAnnouncement.set(message);
-    this.liveAnnouncer.announce(message, 'polite');
+    this._liveAnnouncer.announce(message, 'polite');
+  }
+
+  protected onKeyDown(_event: Event, _direction: 'left' | 'right'): void {
+    // Keyboard navigation is handled by the carousel API
   }
 }

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

@@ -1,7 +1,10 @@
 export { CarouselContent } from './carousel-content.component';
-export { CAROUSEL_CONTEXT, type CarouselContextValue, type CarouselOrientation } from './carousel-context';
+export {
+  CAROUSEL_CONTEXT,
+  type CarouselContextValue,
+  type CarouselOrientation,
+} from './carousel-context';
 export { CarouselItem } from './carousel-item.component';
 export { CarouselNext } from './carousel-next.component';
 export { CarouselPrevious } from './carousel-previous.component';
 export { Carousel } from './carousel.component';
-

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

@@ -1,18 +1,14 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    forwardRef,
-    input,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  input,
+  signal,
 } from '@angular/core';
-import {
-    CHART_CONTEXT,
-    type ChartConfig,
-    type ChartContext,
-} from './chart-context';
+import { CHART_CONTEXT, type ChartConfig, type ChartContext } from './chart-context';
 
 /**
  * ChartContainer component - wrapper that provides chart context and styling.
@@ -42,23 +38,17 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChartContainer {
-  /** Chart configuration with colors and labels */
-  readonly config = input<ChartConfig>({});
-
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
-  /** Context for child components */
-  readonly context: ChartContext = {
-    config: signal(this.config()),
-  };
-
   constructor() {
     effect(() => {
       this.context.config.set(this.config());
     });
   }
 
+  /** Chart configuration with colors and labels */
+  readonly config = input<ChartConfig>({});
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
   protected readonly chartStyles = computed(() => {
     const config = this.config();
     const styles: { [key: string]: string } = {};
@@ -71,11 +61,15 @@ export class ChartContainer {
 
     return styles;
   });
-
   protected readonly computedClass = computed(() =>
     cn(
       'flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_]:stroke-border [&_.recharts-sector]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none',
-      this.class()
-    )
+      this.class(),
+    ),
   );
+
+  /** Context for child components */
+  readonly context: ChartContext = {
+    config: signal(this.config()),
+  };
 }

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

@@ -1,11 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { CHART_COLORS, CHART_CONTEXT } from './chart-context';
 
 /**
@@ -16,10 +10,7 @@ import { CHART_COLORS, CHART_CONTEXT } from './chart-context';
   template: `
     @for (item of items(); track item.label) {
       <div class="flex items-center gap-2">
-        <div
-          class="h-2 w-2 rounded-full"
-          [style.backgroundColor]="item.color"
-        ></div>
+        <div class="h-2 w-2 rounded-full" [style.backgroundColor]="item.color"></div>
         <span class="text-sm text-muted-foreground">{{ item.label }}</span>
       </div>
     }
@@ -30,13 +21,13 @@ import { CHART_COLORS, CHART_CONTEXT } from './chart-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChartLegendContent {
-  private readonly context = inject(CHART_CONTEXT, { optional: true });
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  private readonly _context = inject(CHART_CONTEXT, { optional: true });
+
   protected readonly items = computed(() => {
-    const config = this.context?.config() || {};
+    const config = this._context?.config() || {};
     const colors = Object.values(CHART_COLORS);
 
     return Object.entries(config).map(([key, value], i) => ({
@@ -44,8 +35,7 @@ export class ChartLegendContent {
       color: value.color || colors[i % colors.length],
     }));
   });
-
   protected readonly computedClass = computed(() =>
-    cn('flex flex-wrap items-center justify-center gap-4', this.class())
+    cn('flex flex-wrap items-center justify-center gap-4', this.class()),
   );
 }

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * ChartLegend component - legend for chart series.
@@ -23,6 +18,6 @@ export class ChartLegend {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex flex-wrap items-center justify-center gap-4', this.class())
+    cn('flex flex-wrap items-center justify-center gap-4', this.class()),
   );
 }

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * ChartTooltipContent component - content inside tooltip.
@@ -31,7 +26,5 @@ export class ChartTooltipContent {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('flex flex-col gap-1', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('flex flex-col gap-1', this.class()));
 }

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * ChartTooltip component - tooltip for chart data points.
@@ -23,6 +18,6 @@ export class ChartTooltip {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('rounded-lg border bg-background p-2 shadow-sm', this.class())
+    cn('rounded-lg border bg-background p-2 shadow-sm', this.class()),
   );
 }

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

@@ -1,11 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import {
   CHART_COLORS,
   CHART_CONTEXT,
@@ -125,45 +119,38 @@ import {
   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()}`
-  );
+  private readonly _context = inject(CHART_CONTEXT, { optional: true });
 
+  protected readonly viewBox = computed(() => `0 0 ${this.width()} ${this.height()}`);
   protected readonly primaryColor = computed(() => {
-    const config = this.context?.config() || {};
+    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 config = this._context?.config() || {};
     const w = this.width();
     const h = this.height();
     const padding = 40;
@@ -178,7 +165,6 @@ export class Chart {
       color: d.color || config[d.label]?.color || CHART_COLORS.chart1,
     }));
   });
-
   protected readonly linePoints = computed(() => {
     const data = this.data();
     const w = this.width();
@@ -191,16 +177,17 @@ export class Chart {
       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('')
+      points
+        .slice(1)
+        .map((p) => ` L ${p.x} ${p.y}`)
+        .join('')
     );
   });
-
   protected readonly areaPath = computed(() => {
     const points = this.linePoints();
     const h = this.height();
@@ -214,10 +201,9 @@ export class Chart {
 
     return `${linePath} L ${lastX} ${bottomY} L ${firstX} ${bottomY} Z`;
   });
-
   protected readonly pieSlices = computed(() => {
     const data = this.data();
-    const config = this.context?.config() || {};
+    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;
@@ -243,10 +229,9 @@ export class Chart {
       };
     });
   });
-
   protected readonly donutSlices = computed(() => {
     const data = this.data();
-    const config = this.context?.config() || {};
+    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;
@@ -277,7 +262,6 @@ export class Chart {
       };
     });
   });
-
   protected readonly xAxisLabels = computed(() => {
     const data = this.data();
     const w = this.width();
@@ -288,7 +272,6 @@ export class Chart {
       text: d.label,
     }));
   });
-
   protected readonly yAxisLabels = computed(() => {
     const data = this.data();
     const h = this.height();
@@ -301,8 +284,5 @@ export class Chart {
       text: String(Math.round(maxValue * (1 - i / steps))),
     }));
   });
-
-  protected readonly computedClass = computed(() =>
-    cn('w-full h-full', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('w-full h-full', this.class()));
 }

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

@@ -1,16 +1,15 @@
 export { ChartContainer } from './chart-container.component';
 export {
-    CHART_COLORS,
-    CHART_CONTEXT,
-    type ChartConfig,
-    type ChartContext,
-    type ChartDataPoint,
-    type ChartSeries,
-    type ChartType
+  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

@@ -1,14 +1,14 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    forwardRef,
-    input,
-    model,
-    signal,
-    viewChild,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  input,
+  model,
+  signal,
+  viewChild,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -58,10 +58,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
       [attr.data-disabled]="isDisabled() ? '' : null"
       aria-hidden="true"
     >
-      <span
-        data-slot="checkbox-indicator"
-        class="flex items-center justify-center text-current"
-      >
+      <span data-slot="checkbox-indicator" class="flex items-center justify-center text-current">
         @if (checked() === true) {
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -113,91 +110,75 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 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);
 
+  /** The id for the checkbox input - used for label association */
+  readonly id = input<string>();
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
   /** 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());
+  readonly isDisabled = computed(() => this.disabled() || this.isFormsDisabled());
+  /** 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()));
 
-  /** Additional CSS classes to apply */
-  readonly class = input<string>('');
+  /** Whether the checkbox is disabled via forms */
+  private readonly isFormsDisabled = signal<boolean>(false);
 
   /** 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);
+    this.isFormsDisabled.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()
-    )
-  );
+  /** Toggle the checkbox state */
+  toggle(): void {
+    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();
+    }
+  }
+  /** Get the data-state attribute value */
+  getDataState(): string {
+    const state = this.checked();
+    if (state === true) return 'checked';
+    if (state === 'indeterminate') return 'indeterminate';
+    return 'unchecked';
+  }
 }