@ng-cn/core 1.0.15 → 1.0.17

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

@@ -1,14 +1,14 @@
 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 { SELECT_CONTEXT } from './select-context';
 
@@ -22,9 +22,7 @@ import { SELECT_CONTEXT } from './select-context';
 @Component({
   selector: 'SelectItem',
   template: `
-    <span
-      class="absolute left-2 flex size-3.5 items-center justify-center"
-    >
+    <span class="absolute left-2 flex size-3.5 items-center justify-center">
       @if (isSelected()) {
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -48,7 +46,7 @@ import { SELECT_CONTEXT } from './select-context';
   `,
   host: {
     '[class]': 'computedClass()',
-    'role': 'option',
+    role: 'option',
     '[attr.aria-selected]': 'isSelected()',
     '[attr.data-state]': 'isSelected() ? "checked" : "unchecked"',
     '[attr.data-disabled]': 'disabled() ? "" : null',
@@ -62,8 +60,6 @@ import { SELECT_CONTEXT } from './select-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SelectItem implements OnInit, OnDestroy {
-  private readonly context = inject(SELECT_CONTEXT, { optional: true });
-
   private readonly textContent = viewChild<ElementRef>('textContent');
 
   /** The value of this option */
@@ -71,52 +67,49 @@ export class SelectItem implements OnInit, OnDestroy {
 
   /** Whether this option is disabled */
   readonly disabled = input<boolean>(false);
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
+  private readonly _context = inject(SELECT_CONTEXT, { optional: true });
+
   /** Whether this item is selected */
   protected readonly isSelected = computed(() => {
-    return this.context?.value() === this.value();
+    return this._context?.value() === this.value();
   });
-
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+      'hover:bg-accent hover:text-accent-foreground cursor-pointer',
+      this.disabled() && 'pointer-events-none opacity-50',
+      this.class(),
+    ),
+  );
   /** Whether this item is focused */
   protected readonly isFocused = computed(() => {
-    if (!this.context) return false;
-    const values = this.context.itemValues();
-    const focusedIndex = this.context.focusedIndex();
+    if (!this._context) return false;
+    const values = this._context.itemValues();
+    const focusedIndex = this._context.focusedIndex();
     return values[focusedIndex] === this.value();
   });
 
   ngOnInit(): void {
     // Register this item
-    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
-    this.context?.itemValues.update(values =>
-      values.filter(v => v !== this.value())
-    );
-  }
-
-  /** Select this option */
-  select() {
-    if (!this.disabled()) {
-      const textEl = this.textContent()?.nativeElement;
-      const label = textEl?.textContent?.trim() || this.value();
-      this.context?.setValue(this.value(), label);
-    }
+    this._context?.itemValues.update((values) => values.filter((v) => v !== this.value()));
   }
 
   /** Handle keyboard navigation */
   onKeyDown(event: KeyboardEvent): void {
-    if (!this.context || this.disabled()) return;
+    if (!this._context || this.disabled()) return;
 
     switch (event.key) {
       case ' ':
@@ -126,38 +119,36 @@ export class SelectItem implements OnInit, OnDestroy {
         break;
       case 'ArrowDown':
         event.preventDefault();
-        const currentIndex = this.context.focusedIndex();
-        const itemCount = this.context.itemValues().length;
-        this.context.focusItem(Math.min(currentIndex + 1, itemCount - 1));
+        const currentIndex = this._context.focusedIndex();
+        const itemCount = this._context.itemValues().length;
+        this._context.focusItem(Math.min(currentIndex + 1, itemCount - 1));
         break;
       case 'ArrowUp':
         event.preventDefault();
-        const idx = this.context.focusedIndex();
-        this.context.focusItem(Math.max(idx - 1, 0));
+        const idx = this._context.focusedIndex();
+        this._context.focusItem(Math.max(idx - 1, 0));
         break;
       case 'Home':
         event.preventDefault();
-        this.context.focusItem(0);
+        this._context.focusItem(0);
         break;
       case 'End':
         event.preventDefault();
-        const lastIndex = this.context.itemValues().length - 1;
-        this.context.focusItem(lastIndex);
+        const lastIndex = this._context.itemValues().length - 1;
+        this._context.focusItem(lastIndex);
         break;
       case 'Escape':
         event.preventDefault();
-        this.context.open.set(false);
+        this._context.setOpen(false);
         break;
     }
   }
-
-  /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn(
-      "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-      'hover:bg-accent hover:text-accent-foreground cursor-pointer',
-      this.disabled() && 'pointer-events-none opacity-50',
-      this.class()
-    )
-  );
+  /** Select this option */
+  select(): void {
+    if (!this.disabled()) {
+      const textEl = this.textContent()?.nativeElement;
+      const label = textEl?.textContent?.trim() || this.value();
+      this._context?.setValue(this.value(), label);
+    }
+  }
 }

package/src/app/lib/components/ui/select/select-label.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';
 
 /**
  * SelectLabel component - label for a select group.
@@ -27,6 +22,6 @@ export class SelectLabel {
 
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
-    cn('text-muted-foreground px-2 py-1.5 text-xs', this.class())
+    cn('text-muted-foreground px-2 py-1.5 text-xs', this.class()),
   );
 }

package/src/app/lib/components/ui/select/select-separator.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';
 
 /**
  * SelectSeparator component - visual separator between select items.
@@ -17,7 +12,7 @@ import {
   template: ``,
   host: {
     '[class]': 'computedClass()',
-    'role': 'separator',
+    role: 'separator',
     'aria-orientation': 'horizontal',
     'data-slot': 'select-separator',
   },
@@ -29,6 +24,6 @@ export class SelectSeparator {
 
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
-    cn('bg-muted pointer-events-none -mx-1 my-1 h-px', this.class())
+    cn('bg-muted pointer-events-none -mx-1 my-1 h-px', this.class()),
   );
 }

package/src/app/lib/components/ui/select/select-trigger.component.ts

@@ -1,12 +1,12 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    inject,
-    input,
-    viewChild,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+  viewChild,
 } from '@angular/core';
 import { SELECT_CONTEXT } from './select-context';
 
@@ -34,7 +34,7 @@ import { SELECT_CONTEXT } from './select-context';
       [attr.data-disabled]="context?.disabled() ? '' : null"
       [attr.data-placeholder]="!context?.value() ? '' : null"
       [disabled]="context?.disabled()"
-      (click)="toggleOpen()"
+      (click)="onTriggerClick($event)"
       (keydown)="onKeyDown($event)"
     >
       <ng-content />
@@ -56,20 +56,29 @@ import { SELECT_CONTEXT } from './select-context';
     </button>
   `,
   host: {
-    'class': 'contents',
+    class: 'contents',
     'data-slot': 'select-trigger',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SelectTrigger {
-  protected readonly context = inject(SELECT_CONTEXT, { optional: true });
   private readonly triggerButton = viewChild<ElementRef<HTMLButtonElement>>('triggerButton');
 
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
+  protected readonly context = inject(SELECT_CONTEXT, { optional: true });
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex h-9 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+      this.class(),
+    ),
+  );
+
   /** Toggle the select open state */
-  toggleOpen() {
+  toggleOpen(): void {
     if (!this.context?.disabled()) {
       // Save trigger element for focus restoration
       const button = this.triggerButton()?.nativeElement;
@@ -77,19 +86,21 @@ export class SelectTrigger {
         this.context?.triggerElement.set(button);
       }
       const newState = !this.context?.open();
-      this.context?.open.set(newState);
+      this.context?.setOpen(newState);
       if (newState) {
         // Focus first item when opening
         setTimeout(() => this.context?.focusItem(0));
       }
     }
   }
-
+  onTriggerClick(event: MouseEvent): void {
+    event.stopPropagation();
+    this.toggleOpen();
+  }
   /** Close the select */
-  close() {
+  close(): void {
     this.context?.open.set(false);
   }
-
   /** Handle keyboard navigation */
   onKeyDown(event: KeyboardEvent): void {
     if (!this.context || this.context.disabled()) return;
@@ -108,7 +119,7 @@ export class SelectTrigger {
           if (button) {
             this.context.triggerElement.set(button);
           }
-          this.context.open.set(true);
+          this.context.setOpen(true);
           setTimeout(() => this.context?.focusItem(0));
         } else {
           // Move to next item
@@ -125,7 +136,7 @@ export class SelectTrigger {
           if (button) {
             this.context.triggerElement.set(button);
           }
-          this.context.open.set(true);
+          this.context.setOpen(true);
           const lastIndex = this.context.itemValues().length - 1;
           setTimeout(() => this.context?.focusItem(lastIndex));
         } else {
@@ -153,12 +164,4 @@ export class SelectTrigger {
         break;
     }
   }
-
-  /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn(
-      "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex h-9 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
-      this.class()
-    )
-  );
 }

package/src/app/lib/components/ui/select/select-value.component.ts

@@ -1,11 +1,4 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input } from '@angular/core';
 import { SELECT_CONTEXT } from './select-context';
 
 /**
@@ -20,15 +13,11 @@ import { SELECT_CONTEXT } from './select-context';
   host: {
     '[attr.data-placeholder]': '!context?.value() ? "" : null',
     'data-slot': 'select-value',
+    class: 'flex-1 truncate text-left',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SelectValue {
-  protected readonly context = inject(SELECT_CONTEXT, { optional: true });
-
-  /** Placeholder text when no value is selected */
-  readonly placeholder = input<string>('');
-
   constructor() {
     // Update context placeholder on init and changes
     effect(() => {
@@ -38,6 +27,11 @@ export class SelectValue {
     });
   }
 
+  /** Placeholder text when no value is selected */
+  readonly placeholder = input<string>('');
+
+  protected readonly context = inject(SELECT_CONTEXT, { optional: true });
+
   /** Computed display value */
   protected readonly displayValue = computed(() => {
     const label = this.context?.selectedLabel();

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

@@ -1,24 +1,20 @@
 import { cn } from '@/lib/utils';
 import { AriaIdService } from '@/lib/utils/accessibility';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    ElementRef,
-    forwardRef,
-    inject,
-    input,
-    model,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  forwardRef,
+  inject,
+  input,
+  model,
+  output,
+  signal,
 } from '@angular/core';
 import { SELECT_CONTEXT, type SelectContext } from './select-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type SelectState = 'open' | 'closed';
 
 /**
@@ -46,10 +42,6 @@ export interface SelectProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component Select
  *
@@ -159,44 +151,64 @@ export interface SelectProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Select {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-  private readonly ariaIdService = inject(AriaIdService);
-  private readonly ariaIds = this.ariaIdService.generateMenuIds('select');
+  constructor() {
+    // Sync value input to internal signal
+    effect(() => {
+      this._value.set(this.value());
+    });
+
+    // Sync open input to internal signal
+    effect(() => {
+      this._isOpen.set(this.open());
+    });
+
+    // Sync disabled input to internal signal
+    effect(() => {
+      this._isDisabled.set(this.disabled());
+    });
+  }
+
+  /** Event handler called when the value changes */
+  readonly valueChange = output<string>();
+  /** Event handler called when the open state changes */
+  readonly openChange = output<boolean>();
 
   /** The controlled value of the select */
   readonly value = model<string>('');
-
   /** The controlled open state of the select */
   readonly open = model<boolean>(false);
 
   /** When true, prevents the user from interacting with select */
   readonly disabled = input<boolean>(false);
-
   /** The name of the select for form submission */
   readonly name = input<string>('');
-
   /** When true, indicates that the user must select a value */
   readonly required = input<boolean>(false);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  /** Event handler called when the value changes */
-  readonly valueChange = output<string>();
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
+  private readonly _ariaIdService = inject(AriaIdService);
 
-  /** Event handler called when the open state changes */
-  readonly openChange = output<boolean>();
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() => cn('relative block w-full', this.class()));
 
   /** Internal signals for context */
   private readonly _value = signal<string>('');
-  private readonly _open = signal<boolean>(false);
-  private readonly _disabled = signal<boolean>(false);
+  private readonly _isOpen = signal<boolean>(false);
+  private readonly _isDisabled = signal<boolean>(false);
 
+  private readonly ariaIds = this._ariaIdService.generateMenuIds('select');
   /** Context for child components */
   readonly context: SelectContext = {
     value: this._value,
-    open: this._open,
-    disabled: this._disabled,
+    open: this._isOpen,
+    setOpen: (open: boolean) => {
+      this._isOpen.set(open);
+      this.open.set(open);
+      this.openChange.emit(open);
+    },
+    disabled: this._isDisabled,
     placeholder: signal(''),
     selectedLabel: signal(''),
     contentId: this.ariaIds.contentId,
@@ -212,9 +224,7 @@ export class Select {
       if (label) {
         this.context.selectedLabel.set(label);
       }
-      this._open.set(false);
-      this.open.set(false);
-      this.openChange.emit(false);
+      this.context.setOpen(false);
       // Restore focus to trigger
       const trigger = this.context.triggerElement();
       if (trigger) {
@@ -224,40 +234,18 @@ export class Select {
     focusItem: (index: number) => this.focusItemByIndex(index),
   };
 
-  /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn('relative inline-block', this.class())
-  );
-
-  constructor() {
-    // Sync value input to internal signal
-    effect(() => {
-      this._value.set(this.value());
-    });
-
-    // Sync open input to internal signal
-    effect(() => {
-      this._open.set(this.open());
-    });
-
-    // Sync disabled input to internal signal
-    effect(() => {
-      this._disabled.set(this.disabled());
-    });
-  }
-
   /** Focus an item by index */
   private focusItemByIndex(index: number): void {
     const values = this.context.itemValues();
     if (index < 0 || index >= values.length) return;
 
     this.context.focusedIndex.set(index);
-    const value = values[index];
-    const item = this.elementRef.nativeElement.querySelector(
-      `[data-slot="select-item"][data-value="${value}"]`
+    const targetValue = values[index];
+    const selectItem = this._elementRef.nativeElement.querySelector(
+      `[data-slot="select-item"][data-value="${targetValue}"]`,
     ) as HTMLElement;
-    if (item) {
-      item.focus();
+    if (selectItem) {
+      selectItem.focus();
     }
   }
 }

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

@@ -1,6 +1 @@
-export {
-    Separator,
-    type SeparatorOrientation,
-    type SeparatorProps
-} from './separator.component';
-
+export { Separator, type SeparatorOrientation, type SeparatorProps } from './separator.component';

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

@@ -1,14 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
-
-// ============================================================================
-// Types
-// ============================================================================
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 export type SeparatorOrientation = 'horizontal' | 'vertical';
 
@@ -25,10 +16,6 @@ export type SeparatorProps = {
   class?: string;
 };
 
-// ============================================================================
-// Separator Component
-// ============================================================================
-
 /**
  * Separator component creates a visual divider between content.
  * Based on Radix UI Separator primitive with shadcn/ui styling.
@@ -99,9 +86,7 @@ export class Separator {
   readonly class = input<string>('');
 
   /** Computed role - none for decorative, separator otherwise */
-  protected readonly role = computed(() =>
-    this.decorative() ? 'none' : 'separator'
-  );
+  protected readonly role = computed(() => (this.decorative() ? 'none' : 'separator'));
 
   /**
    * aria-orientation is only needed for non-decorative separators.
@@ -122,7 +107,7 @@ export class Separator {
       // Orientation-specific styles
       this.orientation() === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
       // Custom classes
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -8,4 +8,3 @@ export { SheetTitle } from './sheet-title.component';
 export { SheetTrigger } from './sheet-trigger.component';
 export { sheetVariants, type SheetVariants } from './sheet-variants';
 export { Sheet } from './sheet.component';
-

package/src/app/lib/components/ui/sheet/sheet-close.component.ts

@@ -1,9 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 import { SHEET_CONTEXT } from './sheet-context';
 
 /**
@@ -14,17 +9,18 @@ import { SHEET_CONTEXT } from './sheet-context';
   selector: 'SheetClose',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-close"',
     class: 'contents',
     '(click)': 'onClick($event)',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SheetClose {
-  protected readonly context = inject(SHEET_CONTEXT);
-
   /** Render as child */
   readonly asChild = input<boolean>(false);
 
+  protected readonly context = inject(SHEET_CONTEXT);
+
   onClick(event: Event): void {
     event.stopPropagation();
     this.context.setOpen(false);