@ng-cn/core 1.0.11 → 1.0.14

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

@@ -0,0 +1,102 @@
+import { cn } from '@/lib/utils';
+import {
+    booleanAttribute,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    forwardRef,
+    input,
+    model,
+    output,
+    signal,
+} from '@angular/core';
+import { COLLAPSIBLE_CONTEXT, CollapsibleContext } from './collapsible-context';
+
+/**
+ * Collapsible component - root container for collapsible content.
+ * Matches shadcn/ui React Collapsible exactly.
+ *
+ * @example
+ * <Collapsible>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Content here</CollapsibleContent>
+ * </Collapsible>
+ *
+ * @example
+ * <!-- With default open -->
+ * <Collapsible [defaultOpen]="true">
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Content here</CollapsibleContent>
+ * </Collapsible>
+ */
+@Component({
+  selector: 'Collapsible',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+  },
+  providers: [
+    {
+      provide: COLLAPSIBLE_CONTEXT,
+      useExisting: forwardRef(() => Collapsible),
+    },
+  ],
+  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(() => {
+      const defaultVal = this.defaultOpen();
+      const controlled = this.open();
+
+      if (controlled !== undefined) {
+        this._isOpen.set(controlled);
+      } else if (defaultVal && !this._isOpen()) {
+        this._isOpen.set(defaultVal);
+      }
+    });
+  }
+
+  /** Get the current open state */
+  isOpen = () => this.open() ?? this._isOpen();
+
+  /** Toggle the open state */
+  toggle = () => {
+    if (this.disabled()) return;
+
+    const newState = !this.isOpen();
+
+    if (this.open() === undefined) {
+      this._isOpen.set(newState);
+    }
+
+    this.open.set(newState);
+    this.openChange.emit(newState);
+  };
+
+  protected readonly computedClass = computed(() =>
+    cn('', this.class())
+  );
+}

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,59 @@
+import { cn, Presence } from '@/lib/utils';
+import { ClickOutsideDirective } from '@/lib/utils/accessibility';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { COMBOBOX_CONTEXT } from './combobox-context';
+
+/**
+ * ComboboxContent component - container for the combobox dropdown.
+ * Implements proper listbox role and click-outside behavior.
+ */
+@Component({
+  selector: 'ComboboxContent',
+  imports: [ClickOutsideDirective, Presence],
+  template: `
+    <Presence [present]="context.open()">
+      <div
+        [id]="context.listboxId"
+        [class]="dropdownClass()"
+        [attr.data-state]="context.open() ? 'open' : 'closed'"
+        role="listbox"
+        [attr.aria-labelledby]="context.id + '-trigger'"
+        (clickOutside)="onClickOutside()"
+      >
+        <ng-content />
+      </div>
+    </Presence>
+  `,
+  host: {
+    '[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 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'
+    )
+  );
+
+  protected onClickOutside(): void {
+    this.context.onOpenChange(false);
+  }
+}

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

@@ -0,0 +1,49 @@
+import { InjectionToken, Signal, WritableSignal } from '@angular/core';
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface ComboboxContext {
+  /** Unique ID for the combobox */
+  id: string;
+  /** Whether the dropdown is open */
+  open: WritableSignal<boolean>;
+  /** Currently selected value */
+  value: WritableSignal<string>;
+  /** Current search/filter text */
+  search: WritableSignal<string>;
+  /** All available options */
+  options: WritableSignal<ComboboxOption[]>;
+  /** Filtered options based on search */
+  filteredOptions: Signal<ComboboxOption[]>;
+  /** Currently highlighted option index for keyboard navigation */
+  highlightedIndex: WritableSignal<number>;
+  /** ID of the listbox element */
+  listboxId: string;
+  /** ID of the currently highlighted option */
+  activeDescendantId: Signal<string | null>;
+  /** Select an option */
+  onSelect: (value: string) => void;
+  /** Toggle or set open state */
+  onOpenChange: (open: boolean) => void;
+  /** Handle search input */
+  onSearch: (searchTerm: string) => void;
+  /** Handle keyboard navigation */
+  onKeyDown: (event: KeyboardEvent) => void;
+  /** Move highlight up */
+  highlightPrevious: () => void;
+  /** Move highlight down */
+  highlightNext: () => void;
+  /** Select highlighted option */
+  selectHighlighted: () => void;
+  /** Get option ID for ARIA */
+  getOptionId: (index: number) => string;
+}
+
+export const COMBOBOX_CONTEXT = new InjectionToken<ComboboxContext>(
+  'ComboboxContext'
+);
+

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

@@ -0,0 +1,35 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { COMBOBOX_CONTEXT } from './combobox-context';
+
+/**
+ * ComboboxEmpty component - displayed when no options match the search.
+ */
+@Component({
+  selector: 'ComboboxEmpty',
+  template: `
+    @if (context.filteredOptions().length === 0) {
+      <ng-content />
+    }
+  `,
+  host: {
+    '[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())
+  );
+}

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

@@ -0,0 +1,32 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * ComboboxGroup component - groups combobox items with proper accessibility.
+ */
+@Component({
+  selector: 'ComboboxGroup',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    role: 'group',
+    '[attr.aria-label]': 'label()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ComboboxGroup {
+  /** Accessible label for this group */
+  readonly label = input<string>();
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('overflow-hidden p-1 overflow-y-auto', this.class())
+  );
+}

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

@@ -0,0 +1,89 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    ElementRef,
+    inject,
+    input,
+    viewChild
+} from '@angular/core';
+import { LucideAngularModule, Search } from 'lucide-angular';
+import { COMBOBOX_CONTEXT } from './combobox-context';
+
+/**
+ * ComboboxInput component - search input for filtering options.
+ * Supports keyboard navigation within the combobox.
+ */
+@Component({
+  selector: 'ComboboxInput',
+  imports: [LucideAngularModule],
+  template: `
+    <lucide-icon [img]="SearchIcon" class="mr-2 h-4 w-4 shrink-0 opacity-50" aria-hidden="true" />
+    <input
+      #searchInput
+      type="text"
+      [class]="inputClass()"
+      [placeholder]="placeholder()"
+      [value]="context.search()"
+      role="searchbox"
+      [attr.aria-label]="placeholder()"
+      [attr.aria-controls]="context.listboxId"
+      [attr.aria-activedescendant]="context.activeDescendantId()"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      (input)="onInput($event)"
+      (keydown)="onKeyDown($event)"
+    />
+  `,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ComboboxInput {
+  protected readonly context = inject(COMBOBOX_CONTEXT);
+  protected readonly SearchIcon = Search;
+
+  private readonly searchInput = viewChild<ElementRef<HTMLInputElement>>('searchInput');
+
+  /** Placeholder text */
+  readonly placeholder = input<string>('Search...');
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    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'
+    )
+  );
+
+  constructor() {
+    // Auto-focus input when combobox opens
+    effect(() => {
+      if (this.context.open()) {
+        setTimeout(() => {
+          this.searchInput()?.nativeElement?.focus();
+        }, 0);
+      }
+    });
+  }
+
+  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

@@ -0,0 +1,129 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    ElementRef,
+    inject,
+    input,
+    viewChild,
+} from '@angular/core';
+import { COMBOBOX_CONTEXT } from './combobox-context';
+
+/**
+ * ComboboxItem component - individual option in the combobox.
+ * Implements WAI-ARIA option pattern with keyboard navigation support.
+ */
+@Component({
+  selector: 'ComboboxItem',
+  template: `
+    <div #itemElement [class]="innerClass()">
+      <svg
+        [class]="checkClass()"
+        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"
+        aria-hidden="true"
+      >
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+      <ng-content />
+    </div>
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '[id]': 'optionId()',
+    role: 'option',
+    '[attr.aria-selected]': 'isSelected()',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.data-selected]': 'isSelected() ? "" : null',
+    '[attr.data-highlighted]': 'isHighlighted() ? "" : null',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '(click)': 'onSelect()',
+    '(mouseenter)': 'onMouseEnter()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ComboboxItem {
+  protected readonly context = inject(COMBOBOX_CONTEXT);
+
+  private readonly itemElement = viewChild<ElementRef<HTMLDivElement>>('itemElement');
+
+  /** The value of this item */
+  readonly value = input.required<string>();
+
+  /** 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 isSelected = computed(
+    () => this.context.value() === this.value()
+  );
+
+  protected readonly isHighlighted = computed(
+    () => 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',
+      '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'
+    )
+  );
+
+  protected readonly checkClass = computed(() =>
+    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 {
+    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

@@ -0,0 +1,40 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject
+} from '@angular/core';
+import { COMBOBOX_CONTEXT } from './combobox-context';
+import { ComboboxItem } from './combobox-item.component';
+
+/**
+ * ComboboxList component - renders filtered combobox items.
+ * Automatically handles filtering and index assignment.
+ *
+ * @example
+ * <ComboboxContent>
+ *   <ComboboxInput placeholder="Search..." />
+ *   <ComboboxEmpty>No options found.</ComboboxEmpty>
+ *   <ComboboxGroup>
+ *     <ComboboxList />
+ *   </ComboboxGroup>
+ * </ComboboxContent>
+ */
+@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>
+    }
+  `,
+  host: {
+    'class': 'contents',
+    'data-slot': 'combobox-list',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ComboboxList {
+  protected readonly context = inject(COMBOBOX_CONTEXT);
+}

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

@@ -0,0 +1,53 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { COMBOBOX_CONTEXT } from './combobox-context';
+
+/**
+ * ComboboxTrigger component - button that opens the combobox.
+ * Implements WAI-ARIA combobox trigger pattern.
+ */
+@Component({
+  selector: 'ComboboxTrigger',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    role: 'combobox',
+    '[attr.id]': 'context.id + "-trigger"',
+    '[attr.aria-expanded]': 'context.open()',
+    '[attr.aria-haspopup]': '"listbox"',
+    '[attr.aria-controls]': 'context.listboxId',
+    '[attr.aria-activedescendant]': 'context.open() ? context.activeDescendantId() : null',
+    '[attr.tabindex]': '0',
+    '(click)': 'onClick()',
+    '(keydown)': 'onKeyDown($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ComboboxTrigger {
+  protected readonly context = inject(COMBOBOX_CONTEXT);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  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()
+    )
+  );
+
+  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

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { COMBOBOX_CONTEXT } from './combobox-context';
+
+/**
+ * ComboboxValue component - displays the selected value or placeholder.
+ */
+@Component({
+  selector: 'ComboboxValue',
+  template: `
+    @if (selectedLabel()) {
+      {{ selectedLabel() }}
+    } @else {
+      <span class="text-muted-foreground">{{ placeholder() }}</span>
+    }
+  `,
+  host: {
+    '[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(() => {
+    const value = this.context.value();
+    const options = this.context.options();
+    const option = options.find((o) => o.value === value);
+    return option?.label || '';
+  });
+
+  protected readonly computedClass = computed(() =>
+    cn('pointer-events-none flex-1 text-left', this.class())
+  );
+}