@ng-cn/core 1.0.11 → 1.0.12

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

@@ -0,0 +1,275 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    ElementRef,
+    forwardRef,
+    inject,
+    input,
+    model,
+    output,
+    signal,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+    RADIO_GROUP_CONTEXT,
+    type RadioGroupContext,
+    type RadioGroupOrientation,
+} from './radio-group-context';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type RadioGroupProps = {
+  /** Current selected value */
+  value?: string;
+  /** Default value for uncontrolled mode */
+  defaultValue?: string;
+  /** Whether the group is disabled */
+  disabled?: boolean;
+  /** Whether the group is required */
+  required?: boolean;
+  /** The name for radio inputs */
+  name?: string;
+  /** Orientation for keyboard navigation */
+  orientation?: RadioGroupOrientation;
+  /** Whether to loop focus at boundaries */
+  loop?: boolean;
+  /** Additional CSS classes */
+  class?: string;
+};
+
+// ============================================================================
+// RadioGroup Component
+// ============================================================================
+
+/**
+ * RadioGroup component for single selection from multiple options.
+ * Based on Radix UI RadioGroup primitive with shadcn/ui styling.
+ * Implements roving tabindex and arrow key navigation per WAI-ARIA radiogroup pattern.
+ *
+ * ## Features
+ * - Single selection from multiple radio items
+ * - Full keyboard navigation with arrow keys
+ * - Roving tabindex for efficient keyboard navigation
+ * - Angular Forms integration (ngModel, formControl)
+ * - Horizontal or vertical orientation
+ *
+ * ## Accessibility
+ * - Uses `role="radiogroup"` for grouping semantics
+ * - `aria-orientation` indicates layout direction
+ * - `aria-required` when required
+ * - Roving tabindex: only selected (or first) item is in tab order
+ * - Arrow keys navigate between items and select
+ *
+ * ## Keyboard Navigation
+ * - **ArrowRight/ArrowDown**: Focus and select next item
+ * - **ArrowLeft/ArrowUp**: Focus and select previous item
+ * - **Space**: Select current focused item (if not already selected)
+ *
+ * @example
+ * <RadioGroup [(value)]="selectedValue">
+ *   <div class="flex items-center space-x-2">
+ *     <RadioGroupItem value="option1" id="option1" />
+ *     <Label for="option1">Option 1</Label>
+ *   </div>
+ *   <div class="flex items-center space-x-2">
+ *     <RadioGroupItem value="option2" id="option2" />
+ *     <Label for="option2">Option 2</Label>
+ *   </div>
+ * </RadioGroup>
+ *
+ * @example
+ * <!-- With reactive forms -->
+ * <RadioGroup formControlName="preference">
+ *   <RadioGroupItem value="a" id="pref-a" />
+ *   <Label for="pref-a">Option A</Label>
+ *   <RadioGroupItem value="b" id="pref-b" />
+ *   <Label for="pref-b">Option B</Label>
+ * </RadioGroup>
+ *
+ * @example
+ * <!-- Horizontal orientation -->
+ * <RadioGroup orientation="horizontal" [(value)]="size">
+ *   <div class="flex gap-4">
+ *     <RadioGroupItem value="sm" />
+ *     <RadioGroupItem value="md" />
+ *     <RadioGroupItem value="lg" />
+ *   </div>
+ * </RadioGroup>
+ *
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/radio-group Radix RadioGroup}
+ * @see {@link https://ui.shadcn.com/docs/components/radio-group shadcn/ui RadioGroup}
+ */
+@Component({
+  selector: 'RadioGroup',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    role: 'radiogroup',
+    '[attr.aria-orientation]': 'orientation()',
+    '[attr.aria-required]': 'required() || null',
+    '[attr.data-disabled]': 'isDisabled() ? "" : null',
+    'data-slot': 'radio-group',
+  },
+  providers: [
+    {
+      provide: RADIO_GROUP_CONTEXT,
+      useFactory: (component: RadioGroup) => component.context,
+      deps: [forwardRef(() => RadioGroup)],
+    },
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RadioGroup),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RadioGroup implements ControlValueAccessor {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  /** The current selected value */
+  readonly value = model<string>('');
+
+  /** Default value for uncontrolled mode */
+  readonly defaultValue = input<string>('');
+
+  /** Whether the radio group is disabled via input */
+  readonly disabled = input<boolean>(false);
+
+  /** Whether the radio group is required */
+  readonly required = input<boolean>(false);
+
+  /** The orientation of the radio group */
+  readonly orientation = input<RadioGroupOrientation>('vertical');
+
+  /** Whether to loop focus at boundaries */
+  readonly loop = input<boolean>(true);
+
+  /** The name attribute for the radio inputs */
+  readonly name = input<string>(
+    `radio-group-${Math.random().toString(36).substring(7)}`
+  );
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Emitted when value changes */
+  readonly valueChange = output<string>();
+
+  /** Whether disabled via forms */
+  private readonly formsDisabled = signal<boolean>(false);
+
+  /** Whether the group is disabled */
+  readonly isDisabled = computed(
+    () => this.disabled() || this.formsDisabled()
+  );
+
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: string) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  /** Context for child RadioGroupItem components */
+  readonly context: RadioGroupContext = {
+    value: signal(this.value()),
+    disabled: signal(this.disabled()),
+    name: signal(this.name()),
+    orientation: signal(this.orientation()),
+    loop: signal(this.loop()),
+    required: signal(this.required()),
+    itemValues: signal<string[]>([]),
+    setValue: (value: string) => {
+      if (!this.isDisabled()) {
+        this.value.set(value);
+        this.context.value.set(value);
+        this.onChange(value);
+        this.onTouched();
+        this.valueChange.emit(value);
+      }
+    },
+    focusNext: (currentValue: string) => this.focusItem(currentValue, 1),
+    focusPrevious: (currentValue: string) => this.focusItem(currentValue, -1),
+    focusFirst: () => this.focusItemByIndex(0),
+    focusLast: () =>
+      this.focusItemByIndex(this.context.itemValues().length - 1),
+  };
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'grid gap-3',
+      this.orientation() === 'horizontal' && 'flex flex-row',
+      this.class()
+    )
+  );
+
+  ngOnChanges(): void {
+    this.context.value.set(this.value());
+    this.context.disabled.set(this.disabled());
+    this.context.name.set(this.name());
+    this.context.orientation.set(this.orientation());
+    this.context.loop.set(this.loop());
+    this.context.required.set(this.required());
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: string): void {
+    const val = value ?? this.defaultValue();
+    this.value.set(val);
+    this.context.value.set(val);
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formsDisabled.set(isDisabled);
+    this.context.disabled.set(this.isDisabled());
+  }
+
+  /** Focus a radio item relative to the current item */
+  private focusItem(currentValue: string, direction: number): void {
+    const values = this.context.itemValues();
+    const currentIndex = values.indexOf(currentValue);
+    if (currentIndex === -1) return;
+
+    const shouldLoop = this.loop();
+    let nextIndex = currentIndex + direction;
+
+    if (shouldLoop) {
+      // Wrap around
+      if (nextIndex < 0) nextIndex = values.length - 1;
+      if (nextIndex >= values.length) nextIndex = 0;
+    } else {
+      // Clamp to boundaries
+      if (nextIndex < 0 || nextIndex >= values.length) return;
+    }
+
+    this.focusItemByIndex(nextIndex);
+  }
+
+  /** Focus a radio item by index and select it */
+  private focusItemByIndex(index: number): void {
+    const values = this.context.itemValues();
+    if (index < 0 || index >= values.length) return;
+
+    const value = values[index];
+    const item = this.elementRef.nativeElement.querySelector(
+      `[data-slot="radio-group-item"][data-value="${value}"]`
+    ) as HTMLElement;
+
+    if (item) {
+      item.focus();
+      // Also select the item on focus (per ARIA spec for radio groups)
+      this.context.setValue(value);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+export { RESIZABLE_CONTEXT, type ResizableContextValue } from './resizable-context';
+export { ResizableHandle } from './resizable-handle.component';
+export { ResizablePanelGroup } from './resizable-panel-group.component';
+export { ResizablePanel } from './resizable-panel.component';
+

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

@@ -0,0 +1,14 @@
+import { InjectionToken, InputSignal, WritableSignal } from '@angular/core';
+
+export interface ResizableContextValue {
+  direction: InputSignal<'horizontal' | 'vertical'>;
+  registerPanel: (id: string, minSize?: number, maxSize?: number, defaultSize?: number) => void;
+  getPanelSize: (id: string) => number;
+  setPanelSize: (id: string, size: number) => void;
+  startResize: (handleId: string) => void;
+  onResize: (delta: number) => void;
+  endResize: () => void;
+  panelSizes: WritableSignal<Map<string, number>>;
+}
+
+export const RESIZABLE_CONTEXT = new InjectionToken<ResizableContextValue>('RESIZABLE_CONTEXT');

package/src/app/lib/components/ui/resizable/resizable-handle.component.ts

@@ -0,0 +1,232 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+    signal,
+} from '@angular/core';
+import { RESIZABLE_CONTEXT } from './resizable-context';
+
+let handleIdCounter = 0;
+
+/**
+ * ResizableHandle component - the draggable divider between panels.
+ * Matches shadcn/ui React ResizableHandle exactly.
+ *
+ * ACCESSIBILITY: Fully keyboard accessible with arrow keys.
+ * - Arrow keys resize in the direction of the handle
+ * - Shift+Arrow keys for larger resize steps
+ * - Home/End to set minimum/maximum sizes
+ *
+ * @example
+ * <ResizableHandle />
+ * <ResizableHandle withHandle />
+ */
+@Component({
+  selector: 'ResizableHandle',
+  template: `
+    @if (withHandle()) {
+      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-2.5 w-2.5"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="12" r="1" />
+          <circle cx="12" cy="5" r="1" />
+          <circle cx="12" cy="19" r="1" />
+        </svg>
+      </div>
+    }
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.data-panel-resize-handle]': 'true',
+    '[attr.data-panel-resize-handle-id]': 'handleId',
+    '[attr.role]': '"separator"',
+    '[attr.aria-valuenow]': 'ariaValueNow()',
+    '[attr.aria-valuemin]': '0',
+    '[attr.aria-valuemax]': '100',
+    '[attr.aria-orientation]': 'context.direction() === "horizontal" ? "vertical" : "horizontal"',
+    '[attr.aria-label]': '"Resize handle. Use arrow keys to resize."',
+    '[attr.tabindex]': 'disabled() ? -1 : 0',
+    '(mousedown)': 'onMouseDown($event)',
+    '(touchstart)': 'onTouchStart($event)',
+    '(keydown)': 'onKeyDown($event)',
+    '(focus)': 'onFocus()',
+    '(blur)': 'onBlur()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResizableHandle {
+  protected readonly context = inject(RESIZABLE_CONTEXT);
+
+  /** Show a visible handle grip */
+  readonly withHandle = input<boolean>(false);
+
+  /** Whether the handle is disabled */
+  readonly disabled = input<boolean>(false);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Unique handle ID */
+  readonly handleId = `handle-${handleIdCounter++}`;
+
+  /** Whether dragging */
+  private isDragging = signal(false);
+
+  /** Whether focused for keyboard interaction */
+  private isFocused = signal(false);
+
+  /** Starting position */
+  private startPosition = 0;
+
+  /** ARIA value (approximate percentage) */
+  protected readonly ariaValueNow = signal(50);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
+      this.context.direction() === 'vertical' &&
+        'h-px w-full after:left-0 after:h-1 after:w-full after:-translate-y-1/2 after:translate-x-0',
+      '[&[data-panel-group-direction=vertical]>div]:rotate-90',
+      this.isFocused() && 'ring-2 ring-ring',
+      this.class()
+    )
+  );
+
+  onFocus(): void {
+    this.isFocused.set(true);
+  }
+
+  onBlur(): void {
+    this.isFocused.set(false);
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.disabled()) return;
+
+    const isHorizontal = this.context.direction() === 'horizontal';
+    const step = event.shiftKey ? 5 : 1; // Larger steps with Shift
+
+    let delta = 0;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        if (isHorizontal) {
+          event.preventDefault();
+          delta = -step;
+        }
+        break;
+      case 'ArrowRight':
+        if (isHorizontal) {
+          event.preventDefault();
+          delta = step;
+        }
+        break;
+      case 'ArrowUp':
+        if (!isHorizontal) {
+          event.preventDefault();
+          delta = -step;
+        }
+        break;
+      case 'ArrowDown':
+        if (!isHorizontal) {
+          event.preventDefault();
+          delta = step;
+        }
+        break;
+      case 'Home':
+        event.preventDefault();
+        delta = -100; // Go to minimum
+        break;
+      case 'End':
+        event.preventDefault();
+        delta = 100; // Go to maximum
+        break;
+      default:
+        return;
+    }
+
+    if (delta !== 0) {
+      this.context.startResize(this.handleId);
+      this.context.onResize(delta);
+      this.context.endResize();
+      this.updateAriaValue(delta);
+    }
+  }
+
+  private updateAriaValue(delta: number): void {
+    const current = this.ariaValueNow();
+    const newValue = Math.max(0, Math.min(100, current + delta));
+    this.ariaValueNow.set(newValue);
+  }
+
+  onMouseDown(event: MouseEvent): void {
+    if (this.disabled()) return;
+
+    event.preventDefault();
+    this.isDragging.set(true);
+    this.startPosition = this.context.direction() === 'horizontal' ? event.clientX : event.clientY;
+    this.context.startResize(this.handleId);
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!this.isDragging()) return;
+
+      const currentPosition = this.context.direction() === 'horizontal' ? e.clientX : e.clientY;
+      const delta = ((currentPosition - this.startPosition) / window.innerWidth) * 100;
+      this.context.onResize(delta);
+      this.startPosition = currentPosition;
+    };
+
+    const onMouseUp = () => {
+      this.isDragging.set(false);
+      this.context.endResize();
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }
+
+  onTouchStart(event: TouchEvent): void {
+    if (this.disabled()) return;
+
+    const touch = event.touches[0];
+    this.isDragging.set(true);
+    this.startPosition = this.context.direction() === 'horizontal' ? touch.clientX : touch.clientY;
+    this.context.startResize(this.handleId);
+
+    const onTouchMove = (e: TouchEvent) => {
+      if (!this.isDragging()) return;
+
+      const currentTouch = e.touches[0];
+      const currentPosition = this.context.direction() === 'horizontal' ? currentTouch.clientX : currentTouch.clientY;
+      const delta = ((currentPosition - this.startPosition) / window.innerWidth) * 100;
+      this.context.onResize(delta);
+      this.startPosition = currentPosition;
+    };
+
+    const onTouchEnd = () => {
+      this.isDragging.set(false);
+      this.context.endResize();
+      document.removeEventListener('touchmove', onTouchMove);
+      document.removeEventListener('touchend', onTouchEnd);
+    };
+
+    document.addEventListener('touchmove', onTouchMove);
+    document.addEventListener('touchend', onTouchEnd);
+  }
+}

package/src/app/lib/components/ui/resizable/resizable-panel-group.component.ts

@@ -0,0 +1,140 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  signal,
+} from '@angular/core';
+import { RESIZABLE_CONTEXT, type ResizableContextValue } from './resizable-context';
+
+/**
+ * ResizablePanelGroup component - container for resizable panels.
+ * Matches shadcn/ui React ResizablePanelGroup exactly.
+ *
+ * @example
+ * <ResizablePanelGroup direction="horizontal" class="min-h-[200px] max-w-md rounded-lg border">
+ *   <ResizablePanel defaultSize={50}>
+ *     <div class="p-6">One</div>
+ *   </ResizablePanel>
+ *   <ResizableHandle />
+ *   <ResizablePanel defaultSize={50}>
+ *     <div class="p-6">Two</div>
+ *   </ResizablePanel>
+ * </ResizablePanelGroup>
+ */
+@Component({
+  selector: 'ResizablePanelGroup',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.data-panel-group]': 'true',
+    '[attr.data-panel-group-direction]': 'direction()',
+  },
+  providers: [
+    {
+      provide: RESIZABLE_CONTEXT,
+      useExisting: forwardRef(() => ResizablePanelGroup),
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResizablePanelGroup implements ResizableContextValue {
+  /** Direction of the panel group */
+  readonly direction = input<'horizontal' | 'vertical'>('horizontal');
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Whether keyboard resize is disabled */
+  readonly keyboardResizeBy = input<number>(10);
+
+  /** Auto-save ID for persisting layout */
+  readonly autoSaveId = input<string | null>(null);
+
+  /** Panel sizes state */
+  readonly panelSizes = signal<Map<string, number>>(new Map());
+
+  /** Currently active resize handle */
+  private activeHandleId: string | null = null;
+
+  /** Panels metadata */
+  private panels = new Map<string, { minSize: number; maxSize: number; order: number }>();
+
+  /** Panel order counter */
+  private panelOrderCounter = 0;
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+      this.class()
+    )
+  );
+
+  registerPanel(id: string, minSize = 0, maxSize = 100, defaultSize?: number): void {
+    this.panels.set(id, { minSize, maxSize, order: this.panelOrderCounter++ });
+    if (defaultSize !== undefined) {
+      this.panelSizes.update(sizes => {
+        const newSizes = new Map(sizes);
+        newSizes.set(id, defaultSize);
+        return newSizes;
+      });
+    }
+  }
+
+  getPanelSize(id: string): number {
+    return this.panelSizes().get(id) ?? 50;
+  }
+
+  setPanelSize(id: string, size: number): void {
+    const panel = this.panels.get(id);
+    if (panel) {
+      const clampedSize = Math.max(panel.minSize, Math.min(panel.maxSize, size));
+      this.panelSizes.update(sizes => {
+        const newSizes = new Map(sizes);
+        newSizes.set(id, clampedSize);
+        return newSizes;
+      });
+    }
+  }
+
+  startResize(handleId: string): void {
+    this.activeHandleId = handleId;
+  }
+
+  onResize(delta: number): void {
+    if (!this.activeHandleId) return;
+
+    // Get panels on either side of the handle
+    const panelIds = Array.from(this.panels.entries())
+      .sort((a, b) => a[1].order - b[1].order)
+      .map(([id]) => id);
+
+    // Find the handle index (handles are between panels)
+    const handleIndex = parseInt(this.activeHandleId.replace('handle-', ''), 10);
+    const leftPanelId = panelIds[handleIndex];
+    const rightPanelId = panelIds[handleIndex + 1];
+
+    if (leftPanelId && rightPanelId) {
+      const leftSize = this.getPanelSize(leftPanelId);
+      const rightSize = this.getPanelSize(rightPanelId);
+
+      const leftPanel = this.panels.get(leftPanelId)!;
+      const rightPanel = this.panels.get(rightPanelId)!;
+
+      const newLeftSize = Math.max(leftPanel.minSize, Math.min(leftPanel.maxSize, leftSize + delta));
+      const newRightSize = Math.max(rightPanel.minSize, Math.min(rightPanel.maxSize, rightSize - delta));
+
+      // Only update if both constraints are satisfied
+      if (newLeftSize + newRightSize === leftSize + rightSize) {
+        this.setPanelSize(leftPanelId, newLeftSize);
+        this.setPanelSize(rightPanelId, newRightSize);
+      }
+    }
+  }
+
+  endResize(): void {
+    this.activeHandleId = null;
+  }
+}