@ng-cn/core 1.0.11 → 1.0.12

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

@@ -0,0 +1,202 @@
+import { computed, Injectable, signal } from '@angular/core';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Toast variant types for different notification styles
+ */
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info';
+
+/**
+ * Position options for toast placement
+ */
+export type ToastPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+/**
+ * Swipe direction for dismissing toasts
+ */
+export type ToastSwipeDirection = 'up' | 'down' | 'left' | 'right';
+
+/**
+ * Toast data structure
+ */
+export interface Toast {
+  /** Unique identifier for the toast */
+  id: string;
+  /** Title text displayed prominently */
+  title?: string;
+  /** Description text with more details */
+  description?: string;
+  /** Visual variant of the toast */
+  type: ToastType;
+  /** Duration in ms before auto-dismiss (0 = persistent) */
+  duration?: number;
+  /** Optional action button configuration */
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  /** Callback when toast is dismissed */
+  onDismiss?: () => void;
+}
+
+/**
+ * Options for creating a toast
+ */
+export interface ToastOptions {
+  /** Title text displayed prominently */
+  title?: string;
+  /** Description text with more details */
+  description?: string;
+  /** Duration in ms before auto-dismiss (0 = persistent)
+   * @default 4000 */
+  duration?: number;
+  /** Optional action button configuration */
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  /** Callback when toast is dismissed */
+  onDismiss?: () => void;
+}
+
+// ============================================================================
+// Service
+// ============================================================================
+
+/**
+ * @service ToastService
+ *
+ * Service for managing toast notifications throughout the application.
+ *
+ * @description
+ * ToastService provides a centralized way to display toast notifications.
+ * It manages toast state, handles auto-dismissal, and supports multiple
+ * toast variants for different notification types.
+ *
+ * ## Features
+ * - Multiple toast variants (default, success, error, warning, info)
+ * - Auto-dismiss with configurable duration
+ * - Persistent toasts (duration = 0)
+ * - Action buttons in toasts
+ * - Dismiss callbacks
+ * - Dismiss all functionality
+ *
+ * ## Usage
+ * The service is provided at root level and can be injected anywhere.
+ *
+ * @example Basic usage
+ * ```typescript
+ * export class MyComponent {
+ *   private toast = inject(ToastService);
+ *
+ *   showNotification() {
+ *     this.toast.success({
+ *       title: 'Saved!',
+ *       description: 'Your changes have been saved.',
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * @example With action button
+ * ```typescript
+ * this.toast.error({
+ *   title: 'Error occurred',
+ *   description: 'Failed to save changes.',
+ *   action: {
+ *     label: 'Retry',
+ *     onClick: () => this.save(),
+ *   },
+ * });
+ * ```
+ *
+ * @example Persistent toast
+ * ```typescript
+ * const id = this.toast.info({
+ *   title: 'Uploading...',
+ *   description: 'Please wait while we upload your file.',
+ *   duration: 0, // Won't auto-dismiss
+ * });
+ *
+ * // Later, dismiss manually
+ * this.toast.dismiss(id);
+ * ```
+ */
+@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;
+  }
+
+  /** 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);
+    if (toast?.onDismiss) {
+      toast.onDismiss();
+    }
+    this._toasts.update(toasts => toasts.filter(t => t.id !== id));
+  }
+
+  /** Dismiss all active toasts */
+  dismissAll(): void {
+    this._toasts().forEach(toast => {
+      if (toast.onDismiss) {
+        toast.onDismiss();
+      }
+    });
+    this._toasts.set([]);
+  }
+}

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

@@ -0,0 +1,128 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { ToastAction } from './toast-action.component';
+import { ToastDescription } from './toast-description.component';
+import { ToastTitle } from './toast-title.component';
+import { Toast } from './toast.component';
+import { ToastService, type ToastPosition } from './toast.service';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Props for the Toaster component
+ */
+export interface ToasterProps {
+  /** Position of the toast container.
+   * @default "bottom-right" */
+  position?: ToastPosition;
+  /** Additional CSS classes */
+  class?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * @component Toaster
+ *
+ * Container component that renders all active toasts from ToastService.
+ *
+ * @description
+ * Toaster is a viewport component that displays all active toasts. It should
+ * be placed once in your app layout (typically in app.component) and will
+ * automatically render toasts created via ToastService.
+ *
+ * ## Features
+ * - Multiple position options
+ * - Automatic toast rendering
+ * - Stacking animations
+ * - Responsive design
+ * - Live region for accessibility
+ *
+ * ## Accessibility
+ * - Uses `role="region"` for landmark navigation
+ * - `aria-live="polite"` for screen reader announcements
+ * - `aria-relevant="additions"` to announce new toasts
+ *
+ * @example Basic usage
+ * ```html
+ * <!-- In your app.component.html -->
+ * <Toaster />
+ * ```
+ *
+ * @example Custom position
+ * ```html
+ * <Toaster position="top-center" />
+ * ```
+ *
+ * @example With custom styling
+ * ```html
+ * <Toaster position="bottom-left" class="md:max-w-[350px]" />
+ * ```
+ */
+@Component({
+  selector: 'Toaster',
+  imports: [Toast, ToastTitle, ToastDescription, ToastAction],
+  template: `
+    <div
+      [class]="computedClass()"
+      role="region"
+      aria-label="Notifications"
+      aria-live="polite"
+      aria-relevant="additions"
+    >
+      @for (toast of toastService.toasts(); track toast.id) {
+        <Toast
+          [variant]="toast.type"
+          (onClose)="toastService.dismiss(toast.id)"
+        >
+          @if (toast.title) {
+            <ToastTitle>{{ toast.title }}</ToastTitle>
+          }
+          @if (toast.description) {
+            <ToastDescription>{{ toast.description }}</ToastDescription>
+          }
+          @if (toast.action) {
+            <ToastAction (onClick)="toast.action.onClick()">
+              {{ toast.action.label }}
+            </ToastAction>
+          }
+        </Toast>
+      }
+    </div>
+  `,
+  host: {
+    class: 'contents',
+    '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 computedClass = computed(() => {
+    const positionClasses: Record<ToastPosition, string> = {
+      'top-left': 'top-0 left-0',
+      'top-center': 'top-0 left-1/2 -translate-x-1/2',
+      'top-right': 'top-0 right-0',
+      'bottom-left': 'bottom-0 left-0',
+      'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+      'bottom-right': 'bottom-0 right-0',
+    };
+
+    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()
+    );
+  });
+}

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

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

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

@@ -0,0 +1,30 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Toggle variants using class-variance-authority
+ * Matches shadcn/ui React toggle exactly
+ * 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",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;

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

@@ -0,0 +1,199 @@
+import { cn } from '@/lib/utils';
+import {
+    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 = {
+  /** The controlled pressed state */
+  pressed?: boolean;
+  /** Whether the toggle starts pressed (uncontrolled) */
+  defaultPressed?: boolean;
+  /** Whether the toggle is disabled */
+  disabled?: boolean;
+  /** The visual style variant */
+  variant?: ToggleVariants['variant'];
+  /** The size of the toggle */
+  size?: ToggleVariants['size'];
+  /** Additional CSS classes */
+  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.
+ * Implements ControlValueAccessor for Angular Forms integration.
+ *
+ * ## Features
+ * - Toggle between on/off (pressed/not pressed) states
+ * - Multiple visual variants (default, outline)
+ * - Multiple sizes (sm, default, lg)
+ * - Full keyboard support
+ * - Angular Forms integration (ngModel, formControl)
+ *
+ * ## Accessibility
+ * - Uses `aria-pressed` to indicate pressed state
+ * - Keyboard: Space/Enter to toggle
+ * - Focus ring for keyboard navigation
+ * - Disabled state removes from tab order
+ *
+ * ## Data Attributes
+ * - `data-state`: "on" | "off"
+ * - `data-disabled`: Present when disabled
+ *
+ * @example
+ * <!-- Basic toggle -->
+ * <Toggle aria-label="Toggle bold">
+ *   <BoldIcon />
+ * </Toggle>
+ *
+ * @example
+ * <!-- Controlled with two-way binding -->
+ * <Toggle [(pressed)]="isBold" aria-label="Toggle bold">
+ *   <BoldIcon />
+ * </Toggle>
+ *
+ * @example
+ * <!-- With variant -->
+ * <Toggle variant="outline" aria-label="Toggle italic">
+ *   <ItalicIcon />
+ * </Toggle>
+ *
+ * @example
+ * <!-- Different sizes -->
+ * <Toggle size="sm" aria-label="Small toggle"><Icon /></Toggle>
+ * <Toggle size="default" aria-label="Default toggle"><Icon /></Toggle>
+ * <Toggle size="lg" aria-label="Large toggle"><Icon /></Toggle>
+ *
+ * @example
+ * <!-- With text content -->
+ * <Toggle [(pressed)]="isActive">
+ *   Toggle me
+ * </Toggle>
+ *
+ * @example
+ * <!-- Disabled -->
+ * <Toggle [disabled]="true" aria-label="Disabled toggle">
+ *   <Icon />
+ * </Toggle>
+ *
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/toggle Radix Toggle}
+ * @see {@link https://ui.shadcn.com/docs/components/toggle shadcn/ui Toggle}
+ */
+@Component({
+  selector: 'Toggle',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    type: 'button',
+    '[attr.aria-pressed]': 'pressed()',
+    '[attr.data-state]': 'state()',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.disabled]': 'disabled() ? "" : null',
+    '(click)': 'toggle()',
+    'data-slot': 'toggle',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Toggle),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Toggle implements ControlValueAccessor {
+  /** 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>();
+
+  /** 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);
+    }
+  }
+
+  /** Toggle the pressed state */
+  toggle(): void {
+    if (!this.disabled()) {
+      const newValue = !this.pressed();
+      this.pressed.set(newValue);
+      this.onChange(newValue);
+      this.onTouched();
+      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

@@ -0,0 +1,11 @@
+export {
+  TOGGLE_GROUP_CONTEXT,
+  type ToggleGroupContext,
+  type ToggleGroupOrientation,
+  type ToggleGroupType,
+} from './toggle-group-context';
+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

@@ -0,0 +1,48 @@
+import { InjectionToken, WritableSignal } from '@angular/core';
+import type { ToggleVariants } from '../toggle/toggle-variants';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type ToggleGroupType = 'single' | 'multiple';
+export type ToggleGroupOrientation = 'horizontal' | 'vertical';
+
+export interface ToggleGroupContext {
+  /** Current selected value(s) */
+  value: WritableSignal<string | string[]>;
+  /** Selection type: single or multiple */
+  type: WritableSignal<ToggleGroupType>;
+  /** Whether the group is disabled */
+  disabled: WritableSignal<boolean>;
+  /** Visual variant for items */
+  variant: WritableSignal<ToggleVariants['variant']>;
+  /** Size for items */
+  size: WritableSignal<ToggleVariants['size']>;
+  /** Orientation for keyboard navigation */
+  orientation: WritableSignal<ToggleGroupOrientation>;
+  /** Whether to loop focus at boundaries */
+  loop: WritableSignal<boolean>;
+  /** Whether focus should follow selection in single mode */
+  rovingFocus: WritableSignal<boolean>;
+  /** Registry of all toggle item values */
+  itemValues: WritableSignal<string[]>;
+  /** Currently focused item value */
+  focusedValue: WritableSignal<string | null>;
+  /** Toggle an item's pressed state */
+  toggle: (value: string) => void;
+  /** Check if an item is pressed */
+  isPressed: (value: string) => boolean;
+  /** Move focus to the next toggle item */
+  focusNext: (currentValue: string) => void;
+  /** Move focus to the previous toggle item */
+  focusPrevious: (currentValue: string) => void;
+  /** Move focus to the first toggle item */
+  focusFirst: () => void;
+  /** Move focus to the last toggle item */
+  focusLast: () => void;
+}
+
+export const TOGGLE_GROUP_CONTEXT = new InjectionToken<ToggleGroupContext>(
+  'ToggleGroupContext'
+);