@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/collapsible/collapsible-content.component.ts

@@ -1,11 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { COLLAPSIBLE_CONTEXT } from './collapsible-context';
 
 /**
@@ -24,35 +18,32 @@ import { COLLAPSIBLE_CONTEXT } from './collapsible-context';
     </div>
   `,
   host: {
+    'attr.data-slot': '"collapsible-content"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'collapsible.isOpen() ? "open" : "closed"',
     '[attr.data-disabled]': 'collapsible.disabled() ? "" : null',
     '[attr.aria-hidden]': '!collapsible.isOpen()',
   },
-  styles: [`
-    :host {
-      display: grid;
-      grid-template-rows: 0fr;
-      transition: grid-template-rows 200ms ease-out;
-    }
-    :host[data-state="open"] {
-      grid-template-rows: 1fr;
-    }
-  `],
+  styles: [
+    `
+      :host {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 200ms ease-out;
+      }
+      :host[data-state='open'] {
+        grid-template-rows: 1fr;
+      }
+    `,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CollapsibleContent {
-  protected readonly collapsible = inject(COLLAPSIBLE_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn(
-      'overflow-hidden',
-      this.class()
-    )
-  );
+  protected readonly collapsible = inject(COLLAPSIBLE_CONTEXT);
 
+  protected readonly computedClass = computed(() => cn('overflow-hidden', this.class()));
   protected readonly innerClass = computed(() => 'min-h-0');
 }

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

@@ -1,17 +1,9 @@
 import { InjectionToken } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export interface CollapsibleContext {
   isOpen: () => boolean;
   toggle: () => void;
   disabled: () => boolean;
 }
 
-// ============================================================================
-// Injection Tokens
-// ============================================================================
-
 export const COLLAPSIBLE_CONTEXT = new InjectionToken<CollapsibleContext>('CollapsibleContext');

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

@@ -1,11 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { COLLAPSIBLE_CONTEXT } from './collapsible-context';
 
 /**
@@ -18,6 +12,7 @@ import { COLLAPSIBLE_CONTEXT } from './collapsible-context';
   selector: 'CollapsibleTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"collapsible-trigger"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'collapsible.isOpen() ? "open" : "closed"',
     '[attr.data-disabled]': 'collapsible.disabled() ? "" : null',
@@ -27,28 +22,23 @@ import { COLLAPSIBLE_CONTEXT } from './collapsible-context';
     '(keydown.enter)': 'onClick()',
     '(keydown.space)': 'onSpace($event)',
     '[attr.tabindex]': 'collapsible.disabled() ? -1 : 0',
-    'role': 'button',
+    role: 'button',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CollapsibleTrigger {
-  protected readonly collapsible = inject(COLLAPSIBLE_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly collapsible = inject(COLLAPSIBLE_CONTEXT);
+
   protected readonly computedClass = computed(() =>
-    cn(
-      'cursor-pointer',
-      'disabled:pointer-events-none disabled:opacity-50',
-      this.class()
-    )
+    cn('cursor-pointer', 'disabled:pointer-events-none disabled:opacity-50', this.class()),
   );
 
   protected onClick(): void {
     this.collapsible.toggle();
   }
-
   protected onSpace(event: Event): void {
     event.preventDefault();
     this.onClick();

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

@@ -1,15 +1,15 @@
 import { cn } from '@/lib/utils';
 import {
-    booleanAttribute,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    forwardRef,
-    input,
-    model,
-    output,
-    signal,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  input,
+  model,
+  output,
+  signal,
 } from '@angular/core';
 import { COLLAPSIBLE_CONTEXT, CollapsibleContext } from './collapsible-context';
 
@@ -34,6 +34,7 @@ import { COLLAPSIBLE_CONTEXT, CollapsibleContext } from './collapsible-context';
   selector: 'Collapsible',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"collapsible"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'isOpen() ? "open" : "closed"',
     '[attr.data-disabled]': 'disabled() ? "" : null',
@@ -47,24 +48,6 @@ import { COLLAPSIBLE_CONTEXT, CollapsibleContext } from './collapsible-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Collapsible implements CollapsibleContext {
-  /** Whether the collapsible is open by default */
-  readonly defaultOpen = input<boolean, unknown>(false, { transform: booleanAttribute });
-
-  /** Controlled open state - two-way binding supported */
-  readonly open = model<boolean | undefined>(undefined);
-
-  /** Whether the collapsible is disabled */
-  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });
-
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
-  /** Event emitted when open state changes */
-  readonly openChange = output<boolean>();
-
-  /** Internal state for open/closed */
-  private readonly _isOpen = signal<boolean>(false);
-
   constructor() {
     // Initialize with defaultOpen
     effect(() => {
@@ -79,9 +62,26 @@ export class Collapsible implements CollapsibleContext {
     });
   }
 
+  /** Event emitted when open state changes */
+  readonly openChange = output<boolean>();
+
+  /** Controlled open state - two-way binding supported */
+  readonly open = model<boolean | undefined>(undefined);
+
+  /** Whether the collapsible is open by default */
+  readonly defaultOpen = input<boolean, unknown>(false, { transform: booleanAttribute });
+  /** Whether the collapsible is disabled */
+  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => cn('', this.class()));
+
+  /** Internal state for open/closed */
+  private readonly _isOpen = signal<boolean>(false);
+
   /** Get the current open state */
   isOpen = () => this.open() ?? this._isOpen();
-
   /** Toggle the open state */
   toggle = () => {
     if (this.disabled()) return;
@@ -95,8 +95,4 @@ export class Collapsible implements CollapsibleContext {
     this.open.set(newState);
     this.openChange.emit(newState);
   };
-
-  protected readonly computedClass = computed(() =>
-    cn('', this.class())
-  );
 }

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

@@ -2,4 +2,3 @@ export { CollapsibleContent } from './collapsible-content.component';
 export { COLLAPSIBLE_CONTEXT, type CollapsibleContext } from './collapsible-context';
 export { CollapsibleTrigger } from './collapsible-trigger.component';
 export { Collapsible } from './collapsible.component';
-

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

@@ -1,12 +1,6 @@
 import { cn, Presence } from '@/lib/utils';
 import { ClickOutsideDirective } from '@/lib/utils/accessibility';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { COMBOBOX_CONTEXT } from './combobox-context';
 
 /**
@@ -31,26 +25,25 @@ import { COMBOBOX_CONTEXT } from './combobox-context';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"combobox-content"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'context.open() ? "open" : "closed"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ComboboxContent {
-  protected readonly context = inject(COMBOBOX_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('contents', this.class())
-  );
+  protected readonly context = inject(COMBOBOX_CONTEXT);
 
+  protected readonly computedClass = computed(() => cn('contents'));
   protected readonly dropdownClass = computed(() =>
     cn(
-      'absolute z-50 mt-1 max-h-60 w-full min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95'
-    )
+      'absolute z-50 mt-1 max-h-72 w-full min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+      this.class(),
+    ),
   );
 
   protected onClickOutside(): void {

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

@@ -1,9 +1,11 @@
 import { InjectionToken, Signal, WritableSignal } from '@angular/core';
+import { LucideIconData } from 'lucide-angular';
 
 export interface ComboboxOption {
   value: string;
   label: string;
   disabled?: boolean;
+  icon?: LucideIconData;
 }
 
 export interface ComboboxContext {
@@ -25,6 +27,8 @@ export interface ComboboxContext {
   listboxId: string;
   /** ID of the currently highlighted option */
   activeDescendantId: Signal<string | null>;
+  /** Optional icon position for items with icons */
+  iconPosition: Signal<'left' | 'right'>;
   /** Select an option */
   onSelect: (value: string) => void;
   /** Toggle or set open state */
@@ -43,7 +47,4 @@ export interface ComboboxContext {
   getOptionId: (index: number) => string;
 }
 
-export const COMBOBOX_CONTEXT = new InjectionToken<ComboboxContext>(
-  'ComboboxContext'
-);
-
+export const COMBOBOX_CONTEXT = new InjectionToken<ComboboxContext>('ComboboxContext');

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

@@ -1,11 +1,5 @@
 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';
 
 /**
@@ -19,17 +13,16 @@ import { COMBOBOX_CONTEXT } from './combobox-context';
     }
   `,
   host: {
+    'attr.data-slot': '"combobox-empty"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ComboboxEmpty {
-  protected readonly context = inject(COMBOBOX_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('py-6 text-center text-sm', this.class())
-  );
+  protected readonly context = inject(COMBOBOX_CONTEXT);
+
+  protected readonly computedClass = computed(() => cn('py-6 text-center text-sm', this.class()));
 }

package/src/app/lib/components/ui/combobox/combobox-group.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';
 
 /**
  * ComboboxGroup component - groups combobox items with proper accessibility.
@@ -13,6 +8,7 @@ import {
   selector: 'ComboboxGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"combobox-group"',
     '[class]': 'computedClass()',
     role: 'group',
     '[attr.aria-label]': 'label()',
@@ -27,6 +23,6 @@ export class ComboboxGroup {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('overflow-hidden p-1 overflow-y-auto', this.class())
+    cn('overflow-hidden p-1 overflow-y-auto', this.class()),
   );
 }

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

@@ -1,13 +1,13 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    ElementRef,
-    inject,
-    input,
-    viewChild
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  viewChild,
 } from '@angular/core';
 import { LucideAngularModule, Search } from 'lucide-angular';
 import { COMBOBOX_CONTEXT } from './combobox-context';
@@ -40,13 +40,22 @@ import { COMBOBOX_CONTEXT } from './combobox-context';
     />
   `,
   host: {
+    'attr.data-slot': '"combobox-input"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ComboboxInput {
-  protected readonly context = inject(COMBOBOX_CONTEXT);
-  protected readonly SearchIcon = Search;
+  constructor() {
+    // Auto-focus input when combobox opens
+    effect(() => {
+      if (this.context.open()) {
+        setTimeout(() => {
+          this.searchInput()?.nativeElement?.focus();
+        }, 0);
+      }
+    });
+  }
 
   private readonly searchInput = viewChild<ElementRef<HTMLInputElement>>('searchInput');
 
@@ -56,32 +65,23 @@ export class ComboboxInput {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(COMBOBOX_CONTEXT);
+
   protected readonly computedClass = computed(() =>
-    cn('flex items-center border-b px-3', this.class())
+    cn('flex items-center border-b px-3', this.class()),
   );
-
   protected readonly inputClass = 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'
-    )
+      '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',
+    ),
   );
 
-  constructor() {
-    // Auto-focus input when combobox opens
-    effect(() => {
-      if (this.context.open()) {
-        setTimeout(() => {
-          this.searchInput()?.nativeElement?.focus();
-        }, 0);
-      }
-    });
-  }
+  protected readonly SearchIcon = Search;
 
   protected onInput(event: Event): void {
     const target = event.target as HTMLInputElement;
     this.context.onSearch(target.value);
   }
-
   protected onKeyDown(event: KeyboardEvent): void {
     // Pass keyboard events to the main handler for navigation
     this.context.onKeyDown(event);

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

@@ -1,24 +1,33 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    ElementRef,
-    inject,
-    input,
-    viewChild,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  viewChild,
 } from '@angular/core';
 import { COMBOBOX_CONTEXT } from './combobox-context';
 
+import { LucideAngularModule } from 'lucide-angular';
+
 /**
  * ComboboxItem component - individual option in the combobox.
  * Implements WAI-ARIA option pattern with keyboard navigation support.
  */
 @Component({
   selector: 'ComboboxItem',
+  imports: [LucideAngularModule],
   template: `
     <div #itemElement [class]="innerClass()">
+      @if (option()?.icon && iconPosition() === 'left') {
+        <lucide-icon [img]="option()?.icon" class="h-4 w-4 shrink" />
+      }
+
+      <ng-content />
+
       <svg
         [class]="checkClass()"
         xmlns="http://www.w3.org/2000/svg"
@@ -34,10 +43,14 @@ import { COMBOBOX_CONTEXT } from './combobox-context';
       >
         <path d="M20 6 9 17l-5-5" />
       </svg>
-      <ng-content />
+
+      @if (option()?.icon && iconPosition() === 'right') {
+        <lucide-icon [img]="option()?.icon" class="h-4 w-4 shrink ms-auto" />
+      }
     </div>
   `,
   host: {
+    'attr.data-slot': '"combobox-item"',
     '[class]': 'computedClass()',
     '[id]': 'optionId()',
     role: 'option',
@@ -52,7 +65,16 @@ import { COMBOBOX_CONTEXT } from './combobox-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ComboboxItem {
-  protected readonly context = inject(COMBOBOX_CONTEXT);
+  constructor() {
+    effect(() => {
+      if (this.isHighlighted()) {
+        this.itemElement()?.nativeElement?.scrollIntoView({
+          block: 'nearest',
+          behavior: 'smooth',
+        });
+      }
+    });
+  }
 
   private readonly itemElement = viewChild<ElementRef<HTMLDivElement>>('itemElement');
 
@@ -61,66 +83,45 @@ export class ComboboxItem {
 
   /** Index of this item in the filtered list */
   readonly index = input<number>(0);
-
   /** Whether this item is disabled */
   readonly disabled = input<boolean>(false);
 
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly optionId = computed(() =>
-    this.context.getOptionId(this.index())
-  );
+  protected readonly context = inject(COMBOBOX_CONTEXT);
 
-  protected readonly isSelected = computed(
-    () => this.context.value() === this.value()
+  readonly iconPosition = computed(() => this.context.iconPosition());
+  protected readonly option = computed(() =>
+    this.context.options().find((o) => o.value === this.value()),
   );
-
+  protected readonly optionId = computed(() => this.context.getOptionId(this.index()));
+  protected readonly isSelected = computed(() => this.context.value() === this.value());
   protected readonly isHighlighted = computed(
-    () => this.context.highlightedIndex() === this.index()
-  );
-
-  protected readonly computedClass = computed(() =>
-    cn('contents', this.class())
+    () => this.context.highlightedIndex() === this.index(),
   );
-
+  protected readonly computedClass = computed(() => cn('contents', this.class()));
   protected readonly innerClass = computed(() =>
     cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none',
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-2 pl-2.5 pr-8 text-sm outline-none',
       'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       'data-[selected]:bg-accent data-[selected]:text-accent-foreground',
       'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
       'hover:bg-accent hover:text-accent-foreground',
       this.isSelected() && 'bg-accent text-accent-foreground',
-      this.isHighlighted() && 'bg-accent text-accent-foreground'
-    )
+      this.isHighlighted() && 'bg-accent text-accent-foreground',
+    ),
   );
-
   protected readonly checkClass = computed(() =>
-    cn(
-      'absolute right-2 h-4 w-4',
-      this.isSelected() ? 'opacity-100' : 'opacity-0'
-    )
+    cn('absolute right-2 h-4 w-4', this.isSelected() ? 'opacity-100' : 'opacity-0'),
   );
 
-  constructor() {
-    // Scroll into view when highlighted
-    effect(() => {
-      if (this.isHighlighted()) {
-        this.itemElement()?.nativeElement?.scrollIntoView({
-          block: 'nearest',
-          behavior: 'smooth',
-        });
-      }
-    });
-  }
-
   protected onSelect(): void {
+    // console.log('Selecting value:', this.value());
     if (!this.disabled()) {
       this.context.onSelect(this.value());
     }
   }
-
   protected onMouseEnter(): void {
     if (!this.disabled()) {
       this.context.highlightedIndex.set(this.index());

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

@@ -1,8 +1,4 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    inject
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { COMBOBOX_CONTEXT } from './combobox-context';
 import { ComboboxItem } from './combobox-item.component';
 
@@ -23,15 +19,21 @@ import { ComboboxItem } from './combobox-item.component';
   selector: 'ComboboxList',
   imports: [ComboboxItem],
   template: `
-    @for (option of context.filteredOptions(); track option.value; let i = $index) {
-      <ComboboxItem [value]="option.value" [index]="i" [disabled]="option.disabled ?? false">
-        {{ option.label }}
-      </ComboboxItem>
-    }
+    <div class="max-h-60 flex flex-col scroll-py-2 overflow-y-auto px-1 py-1">
+      @if (context.filteredOptions().length === 0) {
+        <ng-content />
+      } @else {
+        @for (option of context.filteredOptions(); track option.value; let i = $index) {
+          <ComboboxItem [value]="option.value" [index]="i" [disabled]="option.disabled ?? false">
+            {{ option.label }}
+          </ComboboxItem>
+        }
+      }
+    </div>
   `,
   host: {
-    'class': 'contents',
-    'data-slot': 'combobox-list',
+    class: 'contents',
+    'attr.data-slot': '"combobox-list"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })