@ng-cn/core 1.0.15 → 1.0.17

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

@@ -1,11 +1,6 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { ChevronDown, LucideAngularModule } from 'lucide-angular';
 import { COMBOBOX_CONTEXT } from './combobox-context';
 
 /**
@@ -14,8 +9,19 @@ import { COMBOBOX_CONTEXT } from './combobox-context';
  */
 @Component({
   selector: 'ComboboxTrigger',
-  template: `<ng-content />`,
+  template: `
+    <ng-content />
+
+    @if (showIcon()) {
+      <lucide-icon
+        [img]="ChevronDownIcon"
+        class="ms-auto w-4 h-4 shrink-0 opacity-50 text-gray-500 dark:text-neutral-400"
+      />
+    }
+  `,
+  imports: [LucideAngularModule],
   host: {
+    'attr.data-slot': '"combobox-trigger"',
     '[class]': 'computedClass()',
     role: 'combobox',
     '[attr.id]': 'context.id + "-trigger"',
@@ -30,22 +36,26 @@ import { COMBOBOX_CONTEXT } from './combobox-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ComboboxTrigger {
-  protected readonly context = inject(COMBOBOX_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  /** Whether to show the dropdown chevron icon */
+  readonly showIcon = input<boolean>(false);
+
+  protected readonly context = inject(COMBOBOX_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      this.class()
-    )
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate',
+      this.class(),
+    ),
   );
 
+  protected readonly ChevronDownIcon = ChevronDown;
+
   protected onClick(): void {
     this.context.onOpenChange(!this.context.open());
   }
-
   protected onKeyDown(event: KeyboardEvent): void {
     // Let the main combobox handle most keyboard events
     this.context.onKeyDown(event);

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

@@ -1,47 +1,52 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { COMBOBOX_CONTEXT } from './combobox-context';
 
+import { LucideAngularModule } from 'lucide-angular';
+
 /**
  * ComboboxValue component - displays the selected value or placeholder.
  */
 @Component({
   selector: 'ComboboxValue',
-  template: `
-    @if (selectedLabel()) {
-      {{ selectedLabel() }}
+  imports: [LucideAngularModule],
+  template: ` @if (selectedOption(); as option) {
+      <span class="flex items-center gap-2 text-foreground">
+        @if (option.icon && iconPosition() === 'left') {
+          <lucide-icon [img]="option.icon" class="h-4 w-4 shrink-0" />
+        }
+
+        <span class="truncate">{{ option.label }}</span>
+
+        @if (option.icon && iconPosition() === 'right') {
+          <lucide-icon [img]="option.icon" class="h-4 w-4 shrink-0 ms-auto" />
+        }
+      </span>
     } @else {
-      <span class="text-muted-foreground">{{ placeholder() }}</span>
-    }
-  `,
+      <span class="text-neutral-500">{{ placeholder() }}</span>
+    }`,
   host: {
+    'attr.data-slot': '"combobox-value"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ComboboxValue {
-  protected readonly context = inject(COMBOBOX_CONTEXT);
-
   /** Placeholder text */
   readonly placeholder = input<string>('Select...');
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly selectedLabel = computed(() => {
+  protected readonly context = inject(COMBOBOX_CONTEXT);
+
+  /** icon position either left or right text */
+  readonly iconPosition = computed(() => this.context.iconPosition());
+
+  protected readonly selectedOption = computed(() => {
     const value = this.context.value();
-    const options = this.context.options();
-    const option = options.find((o) => o.value === value);
-    return option?.label || '';
+    return this.context.options().find((option) => option.value === value);
   });
-
   protected readonly computedClass = computed(() =>
-    cn('pointer-events-none flex-1 text-left', this.class())
+    cn('pointer-events-none flex-1 text-left', this.class()),
   );
 }

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

@@ -1,19 +1,16 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    forwardRef,
-    input,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  input,
+  output,
+  signal,
 } from '@angular/core';
-import {
-    COMBOBOX_CONTEXT,
-    type ComboboxContext,
-    type ComboboxOption,
-} from './combobox-context';
+
+import { COMBOBOX_CONTEXT, type ComboboxContext, type ComboboxOption } from './combobox-context';
 
 let comboboxIdCounter = 0;
 
@@ -40,9 +37,10 @@ let comboboxIdCounter = 0;
 @Component({
   selector: 'Combobox',
   template: `<ng-content />`,
+  exportAs: 'combobox',
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'combobox',
+    'attr.data-slot': '"combobox"',
   },
   providers: [
     {
@@ -54,44 +52,63 @@ let comboboxIdCounter = 0;
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Combobox {
-  private readonly uniqueId = `combobox-${++comboboxIdCounter}`;
-
-  /** Available options */
-  readonly options = input<ComboboxOption[]>([]);
+  constructor() {
+    // Sync options from input to internal signal
+    effect(() => {
+      this._options.set(this.options());
+    });
 
-  /** Currently selected value */
-  readonly value = input<string>('');
+    // Sync value from input to internal signal
+    effect(() => {
+      this._value.set(this.value());
+    });
+  }
 
   /** Value change event */
   readonly valueChange = output<string>();
-
   /** Open state change event */
   readonly openChange = output<boolean>();
 
+  readonly iconPosition = input<'left' | 'right'>('left');
+  /** Available options */
+  readonly options = input<ComboboxOption[]>([]);
+  /** Currently selected value */
+  readonly value = input<string>('');
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  /** Internal signals */
-  private readonly _options = signal<ComboboxOption[]>([]);
-  private readonly _value = signal<string>('');
-  private readonly _open = signal<boolean>(false);
-  private readonly _search = signal<string>('');
-  private readonly _highlightedIndex = signal<number>(-1);
-
   /** Computed filtered options */
   private readonly _filteredOptions = computed(() => {
     const options = this._options();
-    const search = this._search().toLowerCase().trim();
+    const raw = this._search().trim();
 
-    if (!search) {
+    if (!raw) {
       return options;
     }
 
-    return options.filter((option) =>
-      option.label.toLowerCase().includes(search)
-    );
-  });
+    const query = raw
+      .toLowerCase()
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '');
+
+    const exact: ComboboxOption[] = [];
+    const fuzzy: ComboboxOption[] = [];
+
+    for (const option of options) {
+      const label = option.label
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '');
+
+      if (label.includes(query)) {
+        exact.push(option);
+      } else if (this._isFuzzyMatch(label, query)) {
+        fuzzy.push(option);
+      }
+    }
 
+    return [...exact, ...fuzzy];
+  });
   /** Computed active descendant ID */
   private readonly _activeDescendantId = computed(() => {
     const index = this._highlightedIndex();
@@ -101,11 +118,20 @@ export class Combobox {
     }
     return null;
   });
+  protected readonly computedClass = computed(() => cn('relative inline-block', this.class()));
+
+  /** Internal signals */
+  private readonly _options = signal<ComboboxOption[]>([]);
+  private readonly _value = signal<string>('');
+  private readonly _isOpen = signal<boolean>(false);
+  private readonly _search = signal<string>('');
+  private readonly _highlightedIndex = signal<number>(-1);
 
+  private readonly uniqueId = `combobox-${++comboboxIdCounter}`;
   /** Context for child components */
   readonly context: ComboboxContext = {
     id: this.uniqueId,
-    open: this._open,
+    open: this._isOpen,
     value: this._value,
     search: this._search,
     options: this._options,
@@ -113,17 +139,18 @@ export class Combobox {
     highlightedIndex: this._highlightedIndex,
     listboxId: `${this.uniqueId}-listbox`,
     activeDescendantId: this._activeDescendantId,
+    iconPosition: this.iconPosition,
 
     onSelect: (value: string) => {
       this._value.set(value);
-      this._open.set(false);
+      this._isOpen.set(false);
       this._search.set('');
       this._highlightedIndex.set(-1);
       this.valueChange.emit(value);
     },
 
     onOpenChange: (open: boolean) => {
-      this._open.set(open);
+      this._isOpen.set(open);
       if (!open) {
         this._search.set('');
         this._highlightedIndex.set(-1);
@@ -131,7 +158,7 @@ export class Combobox {
         // When opening, highlight current value if exists
         const currentValue = this._value();
         if (currentValue) {
-          const index = this._filteredOptions().findIndex(o => o.value === currentValue);
+          const index = this._filteredOptions().findIndex((o) => o.value === currentValue);
           if (index >= 0) {
             this._highlightedIndex.set(index);
           }
@@ -207,25 +234,18 @@ export class Combobox {
 
     getOptionId: (index: number) => `${this.uniqueId}-option-${index}`,
   };
+  /** Expose filtered options for template-level custom item rendering */
+  readonly filteredOptions = this._filteredOptions;
 
-  protected readonly computedClass = computed(() =>
-    cn('relative inline-block', this.class())
-  );
-
-  constructor() {
-    // Sync options from input to internal signal
-    effect(() => {
-      this._options.set(this.options());
-    });
-
-    // Sync value from input to internal signal
-    effect(() => {
-      this._value.set(this.value());
-    });
+  private _isFuzzyMatch(text: string, query: string): boolean {
+    let qi = 0;
+    for (let i = 0; i < text.length && qi < query.length; i++) {
+      if (text[i] === query[qi]) qi++;
+    }
+    return qi === query.length;
   }
-
   private handleKeyDown(event: KeyboardEvent): void {
-    const open = this._open();
+    const open = this._isOpen();
 
     switch (event.key) {
       case 'ArrowDown':

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

@@ -1,9 +1,5 @@
 export { ComboboxContent } from './combobox-content.component';
-export {
-    COMBOBOX_CONTEXT,
-    type ComboboxContext,
-    type ComboboxOption
-} from './combobox-context';
+export { COMBOBOX_CONTEXT, type ComboboxContext, type ComboboxOption } from './combobox-context';
 export { ComboboxEmpty } from './combobox-empty.component';
 export { ComboboxGroup } from './combobox-group.component';
 export { ComboboxInput } from './combobox-input.component';
@@ -12,4 +8,3 @@ export { ComboboxList } from './combobox-list.component';
 export { ComboboxTrigger } from './combobox-trigger.component';
 export { ComboboxValue } from './combobox-value.component';
 export { Combobox } from './combobox.component';
-

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

@@ -1,10 +1,6 @@
 import { InjectionToken, type Signal, type WritableSignal } from '@angular/core';
 
-export type CommandFilterFunction = (
-  value: string,
-  search: string,
-  keywords?: string[]
-) => number; // 0 = hidden, 1 = shown, between 0-1 for ranking
+export type CommandFilterFunction = (value: string, search: string, keywords?: string[]) => number; // 0 = hidden, 1 = shown, between 0-1 for ranking
 
 export interface CommandContextValue {
   search: WritableSignal<string>;

package/src/app/lib/components/ui/command/command-dialog.component.ts

@@ -16,34 +16,31 @@ import { Command } from './command.component';
         [attr.data-state]="open() ? 'open' : 'closed'"
         (click)="closeDialog()"
       ></div>
-      <div
-        [class]="computedDialogClass()"
-        [attr.data-state]="open() ? 'open' : 'closed'"
-      >
-        <Command [class]="'[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'">
+      <div [class]="computedDialogClass()" [attr.data-state]="open() ? 'open' : 'closed'">
+        <Command
+          [class]="'[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'"
+        >
           <ng-content />
         </Command>
       </div>
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"command-dialog"',
     class: 'contents',
     '(document:keydown.escape)': 'onEscapeKey()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CommandDialog {
+  /** Close event */
+  readonly openChange = output<boolean>();
+
   /** Whether the dialog is open */
   readonly open = input<boolean>(false);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  /** Close event */
-  readonly openChange = output<boolean>();
-
-  private readonly internalOpen = signal(false);
-
   protected readonly computedDialogClass = computed(() =>
     cn(
       'fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-full max-w-[450px] translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-lg border bg-popover shadow-lg',
@@ -53,14 +50,15 @@ export class CommandDialog {
       'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
       'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
       'duration-200',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
+  private readonly internalOpen = signal(false);
+
   protected closeDialog(): void {
     this.openChange.emit(false);
   }
-
   protected onEscapeKey(): void {
     if (this.open()) {
       this.closeDialog();

package/src/app/lib/components/ui/command/command-empty.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'CommandEmpty',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"command-empty"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -17,7 +18,5 @@ export class CommandEmpty {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('py-6 text-center text-sm', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('py-6 text-center text-sm', this.class()));
 }

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

@@ -1,5 +1,13 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+} from '@angular/core';
 
 /**
  * CommandGroup component - a group of command items.
@@ -15,35 +23,13 @@ import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, injec
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"command-group"',
     '[class]': 'computedClass()',
     '[hidden]': '!hasVisibleItems()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CommandGroup {
-  private readonly elementRef = inject(ElementRef);
-
-  /** Group heading */
-  readonly heading = input<string>('');
-
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
-  /** Check if group has any visible items */
-  protected readonly hasVisibleItems = computed(() => {
-    // This will be re-evaluated whenever DOM changes
-    const element = this.elementRef.nativeElement;
-    const visibleItems = element.querySelectorAll('CommandItem:not([hidden])');
-    return visibleItems.length > 0;
-  });
-
-  protected readonly computedClass = computed(() =>
-    cn(
-      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
-      this.class()
-    )
-  );
-
   constructor() {
     // Trigger re-evaluation of hasVisibleItems when children change
     effect(() => {
@@ -53,7 +39,7 @@ export class CommandGroup {
         this.hasVisibleItems();
       });
 
-      const element = this.elementRef.nativeElement;
+      const element = this._elementRef.nativeElement;
       observer.observe(element, {
         attributes: true,
         attributeFilter: ['hidden'],
@@ -63,4 +49,25 @@ export class CommandGroup {
       return () => observer.disconnect();
     });
   }
+
+  /** Group heading */
+  readonly heading = input<string>('');
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  private readonly _elementRef = inject(ElementRef);
+
+  /** Check if group has any visible items */
+  protected readonly hasVisibleItems = computed(() => {
+    // This will be re-evaluated whenever DOM changes
+    const element = this._elementRef.nativeElement;
+    const visibleItems = element.querySelectorAll('CommandItem:not([hidden])');
+    return visibleItems.length > 0;
+  });
+  protected readonly computedClass = computed(() =>
+    cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      this.class(),
+    ),
+  );
 }

package/src/app/lib/components/ui/command/command-input.component.ts

@@ -44,22 +44,12 @@ import { COMMAND_CONTEXT } from './command-context';
     </div>
   `,
   host: {
+    'attr.data-slot': '"command-input-wrapper"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CommandInput {
-  protected readonly context = inject(COMMAND_CONTEXT);
-  protected readonly SearchIcon = Search;
-
-  private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');
-
-  /** Placeholder text */
-  readonly placeholder = input<string>('Search...');
-
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
   constructor() {
     // Auto-focus input when rendered (browser-only)
     afterNextRender(() => {
@@ -70,13 +60,22 @@ export class CommandInput {
     });
   }
 
+  private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');
+
+  /** Placeholder text */
+  readonly placeholder = input<string>('Search...');
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly context = inject(COMMAND_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
       'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-      this.class()
-    )
+      this.class(),
+    ),
   );
-
   protected readonly activeDescendant = computed(() => {
     const index = this.context.focusedIndex();
     if (index >= 0) {
@@ -85,51 +84,53 @@ export class CommandInput {
     return null;
   });
 
+  protected readonly SearchIcon = Search;
+
   protected onInput(event: Event): void {
     const target = event.target as HTMLInputElement;
     this.context.search.set(target.value);
     // Reset focus to first visible item when searching
     this.context.focusedIndex.set(0);
   }
-
   protected onKeydown(event: KeyboardEvent): void {
-    const itemCount = this.context.itemCount();
     const currentIndex = this.context.focusedIndex();
+    const listEl = document.getElementById(this.context.listId);
+    const visibleItems = listEl
+      ? Array.from(listEl.querySelectorAll('CommandItem:not([hidden])'))
+      : [];
+    const visibleCount = visibleItems.length;
 
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();
-        if (itemCount > 0) {
-          const nextIndex = currentIndex < itemCount - 1 ? currentIndex + 1 : 0;
+        if (visibleCount > 0) {
+          const nextIndex = currentIndex < visibleCount - 1 ? currentIndex + 1 : 0;
           this.context.focusedIndex.set(nextIndex);
         }
         break;
       case 'ArrowUp':
         event.preventDefault();
-        if (itemCount > 0) {
-          const prevIndex = currentIndex > 0 ? currentIndex - 1 : itemCount - 1;
+        if (visibleCount > 0) {
+          const prevIndex = currentIndex > 0 ? currentIndex - 1 : visibleCount - 1;
           this.context.focusedIndex.set(prevIndex);
         }
         break;
       case 'Home':
         event.preventDefault();
-        if (itemCount > 0) {
+        if (visibleCount > 0) {
           this.context.focusedIndex.set(0);
         }
         break;
       case 'End':
         event.preventDefault();
-        if (itemCount > 0) {
-          this.context.focusedIndex.set(itemCount - 1);
+        if (visibleCount > 0) {
+          this.context.focusedIndex.set(visibleCount - 1);
         }
         break;
       case 'Enter':
         event.preventDefault();
-        // Selection is handled by the focused item
-        // Trigger click on currently focused item
-        const focusedItem = document.querySelector(`[data-command-index="${currentIndex}"]`) as HTMLElement;
-        if (focusedItem) {
-          focusedItem.click();
+        if (currentIndex >= 0 && currentIndex < visibleCount) {
+          (visibleItems[currentIndex] as HTMLElement).click();
         }
         break;
     }