@ng-cn/core 1.0.15 → 1.0.17

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

@@ -1,9 +1,5 @@
 import { InjectionToken, WritableSignal } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type RadioGroupOrientation = 'horizontal' | 'vertical';
 
 export interface RadioGroupContext {
@@ -33,6 +29,4 @@ export interface RadioGroupContext {
   focusLast: () => void;
 }
 
-export const RADIO_GROUP_CONTEXT = new InjectionToken<RadioGroupContext>(
-  'RadioGroupContext'
-);
+export const RADIO_GROUP_CONTEXT = new InjectionToken<RadioGroupContext>('RadioGroupContext');

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

@@ -1,21 +1,17 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    inject,
-    input,
-    OnDestroy,
-    OnInit,
-    viewChild,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
+  viewChild,
 } from '@angular/core';
 import { RADIO_GROUP_CONTEXT } from './radio-group-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type RadioGroupItemProps = {
   /** The unique value for this radio item */
   value: string;
@@ -29,10 +25,6 @@ export type RadioGroupItemProps = {
   class?: string;
 };
 
-// ============================================================================
-// RadioGroupItem Component
-// ============================================================================
-
 /**
  * RadioGroupItem component - individual radio option within a group.
  * Based on Radix UI RadioGroup.Item with shadcn/ui styling.
@@ -91,10 +83,7 @@ export type RadioGroupItemProps = {
       (keydown)="onKeyDown($event)"
     >
       @if (isChecked()) {
-        <span
-          data-slot="radio-group-indicator"
-          class="flex items-center justify-center"
-        >
+        <span data-slot="radio-group-indicator" class="flex items-center justify-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -130,47 +119,38 @@ export type RadioGroupItemProps = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RadioGroupItem implements OnInit, OnDestroy {
-  protected readonly context = inject(RADIO_GROUP_CONTEXT, { optional: true });
-  private readonly buttonElement =
-    viewChild<ElementRef<HTMLButtonElement>>('buttonElement');
-
-  /** The id for the radio button - used for label association */
-  readonly id = input<string>();
+  private readonly buttonElement = viewChild<ElementRef<HTMLButtonElement>>('buttonElement');
 
   /** The value of this radio option */
   readonly value = input.required<string>();
 
+  /** The id for the radio button - used for label association */
+  readonly id = input<string>();
   /** Whether this radio is disabled */
   readonly disabled = input<boolean>(false);
-
   /** Whether this radio is required (inherited from group if not set) */
   readonly required = input<boolean | undefined>(undefined);
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
+  protected readonly context = inject(RADIO_GROUP_CONTEXT, { optional: true });
+
   /** Whether this item is checked */
   protected readonly isChecked = computed(() => {
     return this.context?.value() === this.value();
   });
-
   /** State for data attribute */
-  protected readonly state = computed(() =>
-    this.isChecked() ? 'checked' : 'unchecked'
-  );
-
+  protected readonly state = computed(() => (this.isChecked() ? 'checked' : 'unchecked'));
   /** Whether this item is disabled */
   protected readonly isDisabled = computed(() => {
     return this.disabled() || this.context?.disabled() || false;
   });
-
   /** Whether this item is required */
   protected readonly isRequired = computed(() => {
     const explicitRequired = this.required();
     if (explicitRequired !== undefined) return explicitRequired;
     return this.context?.required() || false;
   });
-
   /**
    * Roving tabindex: only the checked item (or first item if none checked) is tabbable.
    */
@@ -185,16 +165,30 @@ export class RadioGroupItem implements OnInit, OnDestroy {
     if (currentValue === this.value()) return 0;
 
     // If no item is checked and this is the first item, it's tabbable
-    if (
-      !currentValue &&
-      itemValues.length > 0 &&
-      itemValues[0] === this.value()
-    ) {
+    if (!currentValue && itemValues.length > 0 && itemValues[0] === this.value()) {
       return 0;
     }
 
     return -1;
   });
+  /** Computed class for wrapper */
+  protected readonly computedClass = computed(() => cn('relative inline-flex', this.class()));
+  /** Computed radio visual class */
+  protected readonly radioClass = computed(() =>
+    cn(
+      // Base styles
+      'aspect-square size-4 shrink-0 rounded-full border shadow-xs',
+      'inline-flex items-center justify-center cursor-pointer',
+      'transition-[color,box-shadow] outline-none',
+      // Focus styles
+      'focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring',
+      // State styles
+      'border-input text-primary',
+      'data-[state=checked]:border-primary',
+      // Disabled styles
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ),
+  );
 
   ngOnInit(): void {
     // Register this item with the group
@@ -205,12 +199,9 @@ export class RadioGroupItem implements OnInit, OnDestroy {
       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()));
   }
 
   /** Select this radio option */
@@ -219,12 +210,10 @@ export class RadioGroupItem implements OnInit, OnDestroy {
       this.context?.setValue(this.value());
     }
   }
-
   /** Focus the button element */
   focus(): void {
     this.buttonElement()?.nativeElement.focus();
   }
-
   /** Handle keyboard navigation */
   onKeyDown(event: KeyboardEvent): void {
     if (this.isDisabled() || !this.context) return;
@@ -273,26 +262,4 @@ export class RadioGroupItem implements OnInit, OnDestroy {
         break;
     }
   }
-
-  /** Computed class for wrapper */
-  protected readonly computedClass = computed(() =>
-    cn('relative inline-flex', this.class())
-  );
-
-  /** Computed radio visual class */
-  protected readonly radioClass = computed(() =>
-    cn(
-      // Base styles
-      'aspect-square size-4 shrink-0 rounded-full border shadow-xs',
-      'inline-flex items-center justify-center cursor-pointer',
-      'transition-[color,box-shadow] outline-none',
-      // Focus styles
-      'focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring',
-      // State styles
-      'border-input text-primary',
-      'data-[state=checked]:border-primary',
-      // Disabled styles
-      'disabled:cursor-not-allowed disabled:opacity-50'
-    )
-  );
 }

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

@@ -1,27 +1,23 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    forwardRef,
-    inject,
-    input,
-    model,
-    output,
-    signal,
+  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,
+  RADIO_GROUP_CONTEXT,
+  type RadioGroupContext,
+  type RadioGroupOrientation,
 } from './radio-group-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type RadioGroupProps = {
   /** Current selected value */
   value?: string;
@@ -41,10 +37,6 @@ export type RadioGroupProps = {
   class?: string;
 };
 
-// ============================================================================
-// RadioGroup Component
-// ============================================================================
-
 /**
  * RadioGroup component for single selection from multiple options.
  * Based on Radix UI RadioGroup primitive with shadcn/ui styling.
@@ -129,48 +121,38 @@ export type RadioGroupProps = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RadioGroup implements ControlValueAccessor {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
+  /** Emitted when value changes */
+  readonly valueChange = output<string>();
 
   /** 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)}`
-  );
-
+  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);
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
 
-  /** Whether the group is disabled */
-  readonly isDisabled = computed(
-    () => this.disabled() || this.formsDisabled()
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('grid gap-3', this.orientation() === 'horizontal' && 'flex flex-row', this.class()),
   );
+  /** Whether the group is disabled */
+  readonly isDisabled = computed(() => this.disabled() || this.isFormsDisabled());
 
-  /** ControlValueAccessor callbacks */
-  private onChange: (value: string) => void = () => {};
-  private onTouched: () => void = () => {};
+  /** Whether disabled via forms */
+  private readonly isFormsDisabled = signal<boolean>(false);
 
   /** Context for child RadioGroupItem components */
   readonly context: RadioGroupContext = {
@@ -193,18 +175,11 @@ export class RadioGroup implements ControlValueAccessor {
     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),
+    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()
-    )
-  );
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: string) => void = () => {};
+  private onTouched: () => void = () => {};
 
   ngOnChanges(): void {
     this.context.value.set(this.value());
@@ -217,21 +192,18 @@ export class RadioGroup implements ControlValueAccessor {
 
   // ControlValueAccessor implementation
   writeValue(value: string): void {
-    const val = value ?? this.defaultValue();
-    this.value.set(val);
-    this.context.value.set(val);
+    const resolvedValue = value ?? this.defaultValue();
+    this.value.set(resolvedValue);
+    this.context.value.set(resolvedValue);
   }
-
   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.isFormsDisabled.set(isDisabled);
     this.context.disabled.set(this.isDisabled());
   }
 
@@ -255,21 +227,20 @@ export class RadioGroup implements ControlValueAccessor {
 
     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}"]`
+    const targetValue = values[index];
+    const radioElement = this._elementRef.nativeElement.querySelector(
+      `[data-slot="radio-group-item"][data-value="${targetValue}"]`,
     ) as HTMLElement;
 
-    if (item) {
-      item.focus();
+    if (radioElement) {
+      radioElement.focus();
       // Also select the item on focus (per ARIA spec for radio groups)
-      this.context.setValue(value);
+      this.context.setValue(targetValue);
     }
   }
 }

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

@@ -2,4 +2,3 @@ export { RESIZABLE_CONTEXT, type ResizableContextValue } from './resizable-conte
 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-handle.component.ts

@@ -1,12 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-    signal,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';
 import { RESIZABLE_CONTEXT } from './resizable-context';
 
 let handleIdCounter = 0;
@@ -50,6 +43,7 @@ let handleIdCounter = 0;
     }
   `,
   host: {
+    'attr.data-slot': '"resizable-handle"',
     '[class]': 'computedClass()',
     '[attr.data-panel-resize-handle]': 'true',
     '[attr.data-panel-resize-handle-id]': 'handleId',
@@ -69,31 +63,14 @@ let handleIdCounter = 0;
   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 context = inject(RESIZABLE_CONTEXT);
 
   protected readonly computedClass = computed(() =>
     cn(
@@ -102,18 +79,28 @@ export class ResizableHandle {
         '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()
-    )
+      this.class(),
+    ),
   );
 
+  /** Whether dragging */
+  private isDragging = signal(false);
+  /** Whether focused for keyboard interaction */
+  private isFocused = signal(false);
+  /** ARIA value (approximate percentage) */
+  protected readonly ariaValueNow = signal(50);
+
+  /** Starting position */
+  private startPosition = 0;
+  /** Unique handle ID */
+  readonly handleId = `handle-${handleIdCounter++}`;
+
   onFocus(): void {
     this.isFocused.set(true);
   }
-
   onBlur(): void {
     this.isFocused.set(false);
   }
-
   onKeyDown(event: KeyboardEvent): void {
     if (this.disabled()) return;
 
@@ -166,13 +153,6 @@ export class ResizableHandle {
       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;
 
@@ -200,7 +180,6 @@ export class ResizableHandle {
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
   }
-
   onTouchStart(event: TouchEvent): void {
     if (this.disabled()) return;
 
@@ -213,7 +192,8 @@ export class ResizableHandle {
       if (!this.isDragging()) return;
 
       const currentTouch = e.touches[0];
-      const currentPosition = this.context.direction() === 'horizontal' ? currentTouch.clientX : currentTouch.clientY;
+      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;
@@ -229,4 +209,10 @@ export class ResizableHandle {
     document.addEventListener('touchmove', onTouchMove);
     document.addEventListener('touchend', onTouchEnd);
   }
+
+  private updateAriaValue(delta: number): void {
+    const current = this.ariaValueNow();
+    const newValue = Math.max(0, Math.min(100, current + delta));
+    this.ariaValueNow.set(newValue);
+  }
 }

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

@@ -28,6 +28,7 @@ import { RESIZABLE_CONTEXT, type ResizableContextValue } from './resizable-conte
   selector: 'ResizablePanelGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"resizable-panel-group"',
     '[class]': 'computedClass()',
     '[attr.data-panel-group]': 'true',
     '[attr.data-panel-group-direction]': 'direction()',
@@ -46,63 +47,54 @@ export class ResizablePanelGroup implements ResizableContextValue {
 
   /** 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);
 
+  protected readonly computedClass = computed(() =>
+    cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', this.class()),
+  );
+
   /** 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 => {
+      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 => {
+      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;
 
@@ -123,8 +115,14 @@ export class ResizablePanelGroup implements ResizableContextValue {
       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));
+      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) {
@@ -133,7 +131,6 @@ export class ResizablePanelGroup implements ResizableContextValue {
       }
     }
   }
-
   endResize(): void {
     this.activeHandleId = null;
   }