@ng-cn/core 1.0.15 → 1.0.17

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

@@ -1,13 +1,16 @@
 import { cn } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
-import { AlertCircle, AlertTriangle, CheckCircle, Info, LucideAngularModule, X } from 'lucide-angular';
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle,
+  Info,
+  LucideAngularModule,
+  X,
+} from 'lucide-angular';
 import { toastVariants, type ToastVariants } from './toast-variants';
 import type { ToastType } from './toast.service';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Toast visual state for animations
  */
@@ -35,10 +38,6 @@ export interface ToastProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component Toast
  *
@@ -134,32 +133,24 @@ export interface ToastProps {
     </div>
   `,
   host: {
+    'attr.data-slot': '"toast"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Toast {
-  protected readonly XIcon = X;
-  protected readonly CheckCircleIcon = CheckCircle;
-  protected readonly AlertCircleIcon = AlertCircle;
-  protected readonly AlertTriangleIcon = AlertTriangle;
-  protected readonly InfoIcon = Info;
+  /** Event emitted when close button is clicked */
+  readonly onClose = output<void>();
 
   /** Visual variant of the toast */
   readonly variant = input<ToastType>('default');
-
   /** Whether to display the variant icon */
   readonly showIcon = input<boolean>(true);
-
   /** Whether the toast is visible (controls animation state) */
   readonly isVisible = input<boolean>(true);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  /** Event emitted when close button is clicked */
-  readonly onClose = output<void>();
-
   protected readonly computedClass = computed(() => {
     const variantMap: Record<ToastType, ToastVariants['variant']> = {
       default: 'default',
@@ -169,9 +160,12 @@ export class Toast {
       info: 'info',
     };
 
-    return cn(
-      toastVariants({ variant: variantMap[this.variant()] }),
-      this.class()
-    );
+    return cn(toastVariants({ variant: variantMap[this.variant()] }), this.class());
   });
+
+  protected readonly XIcon = X;
+  protected readonly CheckCircleIcon = CheckCircle;
+  protected readonly AlertCircleIcon = AlertCircle;
+  protected readonly AlertTriangleIcon = AlertTriangle;
+  protected readonly InfoIcon = Info;
 }

package/src/app/lib/components/ui/toast/toast.service.ts

@@ -1,9 +1,5 @@
 import { computed, Injectable, signal } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Toast variant types for different notification styles
  */
@@ -68,10 +64,6 @@ export interface ToastOptions {
   onDismiss?: () => void;
 }
 
-// ============================================================================
-// Service
-// ============================================================================
-
 /**
  * @service ToastService
  *
@@ -96,7 +88,7 @@ export interface ToastOptions {
  * @example Basic usage
  * ```typescript
  * export class MyComponent {
- *   private toast = inject(ToastService);
+ *   private readonly _toast = inject(ToastService);
  *
  *   showNotification() {
  *     this.toast.success({
@@ -133,70 +125,63 @@ export interface ToastOptions {
  */
 @Injectable({ providedIn: 'root' })
 export class ToastService {
-  private readonly _toasts = signal<Toast[]>([]);
-
   /** Reactive list of active toasts */
   readonly toasts = computed(() => this._toasts());
 
-  private generateId(): string {
-    return Math.random().toString(36).substring(2, 9);
-  }
-
-  private addToast(toast: Omit<Toast, 'id'>): string {
-    const id = this.generateId();
-    const newToast: Toast = { ...toast, id };
-
-    this._toasts.update(toasts => [...toasts, newToast]);
-
-    const duration = toast.duration ?? 4000;
-    if (duration > 0) {
-      setTimeout(() => this.dismiss(id), duration);
-    }
-
-    return id;
-  }
+  private readonly _toasts = signal<Toast[]>([]);
 
   /** Show a default toast */
   toast(options: ToastOptions): string {
     return this.addToast({ ...options, type: 'default' });
   }
-
   /** Show a success toast */
   success(options: ToastOptions): string {
     return this.addToast({ ...options, type: 'success' });
   }
-
   /** Show an error toast */
   error(options: ToastOptions): string {
     return this.addToast({ ...options, type: 'error' });
   }
-
   /** Show a warning toast */
   warning(options: ToastOptions): string {
     return this.addToast({ ...options, type: 'warning' });
   }
-
   /** Show an info toast */
   info(options: ToastOptions): string {
     return this.addToast({ ...options, type: 'info' });
   }
-
   /** Dismiss a specific toast by ID */
   dismiss(id: string): void {
-    const toast = this._toasts().find(t => t.id === id);
+    const toast = this._toasts().find((t) => t.id === id);
     if (toast?.onDismiss) {
       toast.onDismiss();
     }
-    this._toasts.update(toasts => toasts.filter(t => t.id !== id));
+    this._toasts.update((toasts) => toasts.filter((t) => t.id !== id));
   }
-
   /** Dismiss all active toasts */
   dismissAll(): void {
-    this._toasts().forEach(toast => {
+    this._toasts().forEach((toast) => {
       if (toast.onDismiss) {
         toast.onDismiss();
       }
     });
     this._toasts.set([]);
   }
+
+  private generateId(): string {
+    return Math.random().toString(36).substring(2, 9);
+  }
+  private addToast(toast: Omit<Toast, 'id'>): string {
+    const id = this.generateId();
+    const newToast: Toast = { ...toast, id };
+
+    this._toasts.update((toasts) => [...toasts, newToast]);
+
+    const duration = toast.duration ?? 4000;
+    if (duration > 0) {
+      setTimeout(() => this.dismiss(id), duration);
+    }
+
+    return id;
+  }
 }

package/src/app/lib/components/ui/toast/toaster.component.ts

@@ -6,10 +6,6 @@ import { ToastTitle } from './toast-title.component';
 import { Toast } from './toast.component';
 import { ToastService, type ToastPosition } from './toast.service';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the Toaster component
  */
@@ -21,10 +17,6 @@ export interface ToasterProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component Toaster
  *
@@ -75,10 +67,7 @@ export interface ToasterProps {
       aria-relevant="additions"
     >
       @for (toast of toastService.toasts(); track toast.id) {
-        <Toast
-          [variant]="toast.type"
-          (onClose)="toastService.dismiss(toast.id)"
-        >
+        <Toast [variant]="toast.type" (onClose)="toastService.dismiss(toast.id)">
           @if (toast.title) {
             <ToastTitle>{{ toast.title }}</ToastTitle>
           }
@@ -95,20 +84,21 @@ export interface ToasterProps {
     </div>
   `,
   host: {
+    'attr.data-slot': '"toaster"',
     class: 'contents',
-    'ngSkipHydration': 'true',
+    ngSkipHydration: 'true',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Toaster {
-  protected readonly toastService = inject(ToastService);
-
   /** Position of the toast container */
   readonly position = input<ToastPosition>('bottom-right');
 
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly toastService = inject(ToastService);
+
   protected readonly computedClass = computed(() => {
     const positionClasses: Record<ToastPosition, string> = {
       'top-left': 'top-0 left-0',
@@ -122,7 +112,7 @@ export class Toaster {
     return cn(
       'fixed z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col md:max-w-[420px]',
       positionClasses[this.position()],
-      this.class()
+      this.class(),
     );
   });
 }

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

@@ -1,6 +1,2 @@
 export { toggleVariants, type ToggleVariants } from './toggle-variants';
-export {
-  Toggle,
-  type ToggleProps,
-  type ToggleState,
-} from './toggle.component';
+export { Toggle, type ToggleProps, type ToggleState } from './toggle.component';

package/src/app/lib/components/ui/toggle/toggle-variants.ts

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
  * WCAG AA compliant contrast ratios for all variants
  */
 export const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium text-foreground transition-colors hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium text-foreground transition-colors hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 [&_lucide-icon]:pointer-events-none [&_lucide-icon:not([class*='size-'])]:size-4 [&_lucide-icon]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
   {
     variants: {
       variant: {
@@ -24,7 +24,7 @@ export const toggleVariants = cva(
       variant: 'default',
       size: 'default',
     },
-  }
+  },
 );
 
 export type ToggleVariants = VariantProps<typeof toggleVariants>;

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

@@ -1,20 +1,16 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    input,
-    model,
-    output,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  output,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { toggleVariants, type ToggleVariants } from './toggle-variants';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type ToggleState = 'on' | 'off';
 
 export type ToggleProps = {
@@ -32,10 +28,6 @@ export type ToggleProps = {
   class?: string;
 };
 
-// ============================================================================
-// Toggle Component
-// ============================================================================
-
 /**
  * Toggle component - a two-state button that can be on or off.
  * Based on Radix UI Toggle primitive with shadcn/ui styling.
@@ -120,41 +112,49 @@ export type ToggleProps = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Toggle implements ControlValueAccessor {
+  constructor() {
+    // Initialize from defaultPressed if provided
+    if (this.defaultPressed()) {
+      this.pressed.set(true);
+    }
+  }
+
+  /** Emitted when pressed state changes */
+  readonly pressedChange = output<boolean>();
+
   /** Whether the toggle is pressed/on */
   readonly pressed = model<boolean>(false);
 
   /** Whether the toggle starts pressed (uncontrolled mode) */
   readonly defaultPressed = input<boolean>(false);
-
   /** The visual style variant of the toggle */
   readonly variant = input<ToggleVariants['variant']>('default');
-
   /** The size of the toggle */
   readonly size = input<ToggleVariants['size']>('default');
-
   /** Whether the toggle is disabled */
   readonly disabled = input<boolean>(false);
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
-  /** Emitted when pressed state changes */
-  readonly pressedChange = output<boolean>();
+  /** Current state for data attribute */
+  protected readonly state = computed((): ToggleState => (this.pressed() ? 'on' : 'off'));
+  /** Computed class combining variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      toggleVariants({
+        variant: this.variant(),
+        size: this.size(),
+      }),
+      this.class(),
+    ),
+  );
 
   /** ControlValueAccessor callbacks */
   private onChange: (value: boolean) => void = () => {};
   private onTouched: () => void = () => {};
-
-  /** Current state for data attribute */
-  protected readonly state = computed((): ToggleState =>
-    this.pressed() ? 'on' : 'off'
-  );
-
-  constructor() {
-    // Initialize from defaultPressed if provided
-    if (this.defaultPressed()) {
-      this.pressed.set(true);
-    }
+  setDisabledState?(isDisabled: boolean): void {
+    // Disabled state is managed by the disabled input
+    // Angular forms will call this but we use the input binding
   }
 
   /** Toggle the pressed state */
@@ -167,33 +167,14 @@ export class Toggle implements ControlValueAccessor {
       this.pressedChange.emit(newValue);
     }
   }
-
   // ControlValueAccessor implementation
   writeValue(value: boolean): void {
     this.pressed.set(value ?? false);
   }
-
   registerOnChange(fn: (value: boolean) => void): void {
     this.onChange = fn;
   }
-
   registerOnTouched(fn: () => void): void {
     this.onTouched = fn;
   }
-
-  setDisabledState?(isDisabled: boolean): void {
-    // Disabled state is managed by the disabled input
-    // Angular forms will call this but we use the input binding
-  }
-
-  /** Computed class combining variants and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn(
-      toggleVariants({
-        variant: this.variant(),
-        size: this.size(),
-      }),
-      this.class()
-    )
-  );
 }

package/src/app/lib/components/ui/toggle-group/index.ts

@@ -4,8 +4,5 @@ export {
   type ToggleGroupOrientation,
   type ToggleGroupType,
 } from './toggle-group-context';
-export {
-  ToggleGroupItem,
-  type ToggleGroupItemProps,
-} from './toggle-group-item.component';
+export { ToggleGroupItem, type ToggleGroupItemProps } from './toggle-group-item.component';
 export { ToggleGroup, type ToggleGroupProps } from './toggle-group.component';

package/src/app/lib/components/ui/toggle-group/toggle-group-context.ts

@@ -1,10 +1,6 @@
 import { InjectionToken, WritableSignal } from '@angular/core';
 import type { ToggleVariants } from '../toggle/toggle-variants';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type ToggleGroupType = 'single' | 'multiple';
 export type ToggleGroupOrientation = 'horizontal' | 'vertical';
 
@@ -43,6 +39,4 @@ export interface ToggleGroupContext {
   focusLast: () => void;
 }
 
-export const TOGGLE_GROUP_CONTEXT = new InjectionToken<ToggleGroupContext>(
-  'ToggleGroupContext'
-);
+export const TOGGLE_GROUP_CONTEXT = new InjectionToken<ToggleGroupContext>('ToggleGroupContext');

package/src/app/lib/components/ui/toggle-group/toggle-group-item.component.ts

@@ -1,20 +1,16 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-    OnDestroy,
-    OnInit,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
 } from '@angular/core';
 import { toggleVariants, type ToggleVariants } from '../toggle/toggle-variants';
 import { TOGGLE_GROUP_CONTEXT } from './toggle-group-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type ToggleGroupItemProps = {
   /** The unique value for this toggle item */
   value: string;
@@ -28,10 +24,6 @@ export type ToggleGroupItemProps = {
   class?: string;
 };
 
-// ============================================================================
-// ToggleGroupItem Component
-// ============================================================================
-
 /**
  * ToggleGroupItem component - individual toggle button within a group.
  * Based on Radix UI ToggleGroup.Item with shadcn/ui styling.
@@ -92,36 +84,30 @@ export type ToggleGroupItemProps = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ToggleGroupItem implements OnInit, OnDestroy {
-  private readonly context = inject(TOGGLE_GROUP_CONTEXT, { optional: true });
-
   /** The value of this toggle item */
   readonly value = input.required<string>();
 
   /** Override the variant from the group */
   readonly variant = input<ToggleVariants['variant']>();
-
   /** Override the size from the group */
   readonly size = input<ToggleVariants['size']>();
-
   /** Whether this toggle item is disabled */
   readonly disabled = input<boolean>(false);
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
+  private readonly _context = inject(TOGGLE_GROUP_CONTEXT, { optional: true });
+
   /** Whether this item is pressed */
   protected readonly isPressed = computed(() => {
-    return this.context?.isPressed(this.value()) ?? false;
+    return this._context?.isPressed(this.value()) ?? false;
   });
-
   /** State for data attribute */
   protected readonly state = computed(() => (this.isPressed() ? 'on' : 'off'));
-
   /** Whether this item is disabled */
   protected readonly isDisabled = computed(() => {
-    return this.disabled() || this.context?.disabled() || false;
+    return this.disabled() || this._context?.disabled() || false;
   });
-
   /**
    * Roving tabindex pattern:
    * - If roving focus is enabled: first item or focused item is tabbable
@@ -129,13 +115,13 @@ export class ToggleGroupItem implements OnInit, OnDestroy {
    */
   protected readonly tabIndex = computed(() => {
     if (this.isDisabled()) return -1;
-    if (!this.context) return 0;
+    if (!this._context) return 0;
 
-    const rovingFocus = this.context.rovingFocus();
+    const rovingFocus = this._context.rovingFocus();
     if (!rovingFocus) return 0;
 
-    const itemValues = this.context.itemValues();
-    const focusedValue = this.context.focusedValue();
+    const itemValues = this._context.itemValues();
+    const focusedValue = this._context.focusedValue();
 
     // If an item is explicitly focused, only that item is tabbable
     if (focusedValue !== null) {
@@ -149,46 +135,50 @@ export class ToggleGroupItem implements OnInit, OnDestroy {
 
     return -1;
   });
-
   /** Get the effective variant */
   protected readonly effectiveVariant = computed(() => {
-    return this.variant() ?? this.context?.variant() ?? 'default';
+    return this.variant() ?? this._context?.variant() ?? 'default';
   });
-
   /** Get the effective size */
   protected readonly effectiveSize = computed(() => {
-    return this.size() ?? this.context?.size() ?? 'default';
+    return this.size() ?? this._context?.size() ?? 'default';
   });
+  /** Computed class combining variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      toggleVariants({
+        variant: this.effectiveVariant(),
+        size: this.effectiveSize(),
+      }),
+      this.class(),
+    ),
+  );
 
   ngOnInit(): void {
     // Register this item with the group
-    this.context?.itemValues.update((values) => {
+    this._context?.itemValues.update((values) => {
       if (!values.includes(this.value())) {
         return [...values, this.value()];
       }
       return values;
     });
   }
-
   ngOnDestroy(): void {
     // Unregister this item from the group
-    this.context?.itemValues.update((values) =>
-      values.filter((v) => v !== this.value())
-    );
+    this._context?.itemValues.update((values) => values.filter((v) => v !== this.value()));
   }
 
   /** Toggle this item */
   toggle(): void {
     if (!this.isDisabled()) {
-      this.context?.toggle(this.value());
+      this._context?.toggle(this.value());
     }
   }
-
   /** Handle keyboard navigation */
   onKeyDown(event: KeyboardEvent): void {
-    if (this.isDisabled() || !this.context) return;
+    if (this.isDisabled() || !this._context) return;
 
-    const orientation = this.context.orientation();
+    const orientation = this._context.orientation();
     const isVertical = orientation === 'vertical';
     const isHorizontal = orientation === 'horizontal';
 
@@ -196,46 +186,35 @@ export class ToggleGroupItem implements OnInit, OnDestroy {
       case 'ArrowDown':
         if (isVertical) {
           event.preventDefault();
-          this.context.focusNext(this.value());
+          this._context.focusNext(this.value());
         }
         break;
       case 'ArrowUp':
         if (isVertical) {
           event.preventDefault();
-          this.context.focusPrevious(this.value());
+          this._context.focusPrevious(this.value());
         }
         break;
       case 'ArrowRight':
         if (isHorizontal) {
           event.preventDefault();
-          this.context.focusNext(this.value());
+          this._context.focusNext(this.value());
         }
         break;
       case 'ArrowLeft':
         if (isHorizontal) {
           event.preventDefault();
-          this.context.focusPrevious(this.value());
+          this._context.focusPrevious(this.value());
         }
         break;
       case 'Home':
         event.preventDefault();
-        this.context.focusFirst();
+        this._context.focusFirst();
         break;
       case 'End':
         event.preventDefault();
-        this.context.focusLast();
+        this._context.focusLast();
         break;
     }
   }
-
-  /** Computed class combining variants and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn(
-      toggleVariants({
-        variant: this.effectiveVariant(),
-        size: this.effectiveSize(),
-      }),
-      this.class()
-    )
-  );
 }