@ng-cn/core 1.0.10 → 1.0.12

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

@@ -0,0 +1,53 @@
+import { InjectionToken, WritableSignal } from '@angular/core';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type SelectPosition = 'popper' | 'item-aligned';
+
+export interface SelectContext {
+  /** Current selected value */
+  value: WritableSignal<string>;
+  /** Whether the select is open */
+  open: WritableSignal<boolean>;
+  /** Whether the select is disabled */
+  disabled: WritableSignal<boolean>;
+  /** Placeholder text when no value is selected */
+  placeholder: WritableSignal<string>;
+  /** Set the selected value and optionally the label */
+  setValue: (value: string, label?: string) => void;
+  /** The label of the currently selected item */
+  selectedLabel: WritableSignal<string>;
+  /** ARIA ID for the listbox */
+  contentId: string;
+  /** Reference to the trigger element for focus restoration */
+  triggerElement: WritableSignal<HTMLElement | null>;
+  /** Registry of all item values for keyboard navigation */
+  itemValues: WritableSignal<string[]>;
+  /** Currently focused item index */
+  focusedIndex: WritableSignal<number>;
+  /** Focus a specific item by index */
+  focusItem: (index: number) => void;
+  /** Whether the select is required */
+  required?: () => boolean;
+  /** Name for form submission */
+  name?: () => string;
+}
+
+export interface SelectGroupContext {
+  /** The label for this group */
+  label: WritableSignal<string>;
+}
+
+// ============================================================================
+// Injection Tokens
+// ============================================================================
+
+export const SELECT_CONTEXT = new InjectionToken<SelectContext>(
+  'SelectContext'
+);
+
+export const SELECT_GROUP_CONTEXT = new InjectionToken<SelectGroupContext>(
+  'SelectGroupContext'
+);

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

@@ -0,0 +1,56 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  signal,
+} from '@angular/core';
+import { SELECT_GROUP_CONTEXT, type SelectGroupContext } from './select-context';
+
+/**
+ * SelectGroup component - groups related select items.
+ *
+ * @example
+ * <SelectGroup>
+ *   <SelectLabel>Fruits</SelectLabel>
+ *   <SelectItem value="apple">Apple</SelectItem>
+ *   <SelectItem value="banana">Banana</SelectItem>
+ * </SelectGroup>
+ */
+@Component({
+  selector: 'SelectGroup',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'role': 'group',
+    '[attr.aria-labelledby]': 'labelId()',
+    'data-slot': 'select-group',
+  },
+  providers: [
+    {
+      provide: SELECT_GROUP_CONTEXT,
+      useFactory: (component: SelectGroup) => component.context,
+      deps: [forwardRef(() => SelectGroup)],
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectGroup {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Label ID for accessibility */
+  readonly labelId = input<string>();
+
+  /** Context for child components */
+  readonly context: SelectGroupContext = {
+    label: signal(''),
+  };
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('overflow-hidden p-1 text-foreground', this.class())
+  );
+}

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

@@ -0,0 +1,163 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    ElementRef,
+    inject,
+    input,
+    OnDestroy,
+    OnInit,
+    viewChild,
+} from '@angular/core';
+import { SELECT_CONTEXT } from './select-context';
+
+/**
+ * SelectItem component - individual selectable option.
+ * Implements proper ARIA option pattern with keyboard navigation.
+ *
+ * @example
+ * <SelectItem value="apple">Apple</SelectItem>
+ */
+@Component({
+  selector: 'SelectItem',
+  template: `
+    <span
+      class="absolute left-2 flex size-3.5 items-center justify-center"
+    >
+      @if (isSelected()) {
+        <svg
+          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"
+          class="size-4"
+        >
+          <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+      }
+    </span>
+    <span #textContent data-slot="select-item-text">
+      <ng-content />
+    </span>
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    'role': 'option',
+    '[attr.aria-selected]': 'isSelected()',
+    '[attr.data-state]': 'isSelected() ? "checked" : "unchecked"',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.data-value]': 'value()',
+    '[attr.data-highlighted]': 'isFocused() ? "" : null',
+    '[attr.tabindex]': 'disabled() ? -1 : 0',
+    '(click)': 'select()',
+    '(keydown)': 'onKeyDown($event)',
+    'data-slot': 'select-item',
+  },
+  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 */
+  readonly value = input.required<string>();
+
+  /** Whether this option is disabled */
+  readonly disabled = input<boolean>(false);
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Whether this item is selected */
+  protected readonly isSelected = computed(() => {
+    return this.context?.value() === this.value();
+  });
+
+  /** Whether this item is focused */
+  protected readonly isFocused = computed(() => {
+    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 => {
+      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);
+    }
+  }
+
+  /** Handle keyboard navigation */
+  onKeyDown(event: KeyboardEvent): void {
+    if (!this.context || this.disabled()) return;
+
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.preventDefault();
+        this.select();
+        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));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        const idx = this.context.focusedIndex();
+        this.context.focusItem(Math.max(idx - 1, 0));
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.context.focusItem(0);
+        break;
+      case 'End':
+        event.preventDefault();
+        const lastIndex = this.context.itemValues().length - 1;
+        this.context.focusItem(lastIndex);
+        break;
+      case 'Escape':
+        event.preventDefault();
+        this.context.open.set(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()
+    )
+  );
+}

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

@@ -0,0 +1,32 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SelectLabel component - label for a select group.
+ *
+ * @example
+ * <SelectLabel>Fruits</SelectLabel>
+ */
+@Component({
+  selector: 'SelectLabel',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-slot': 'select-label',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectLabel {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** 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())
+  );
+}

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

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * SelectSeparator component - visual separator between select items.
+ *
+ * @example
+ * <SelectSeparator />
+ */
+@Component({
+  selector: 'SelectSeparator',
+  template: ``,
+  host: {
+    '[class]': 'computedClass()',
+    'role': 'separator',
+    'aria-orientation': 'horizontal',
+    'data-slot': 'select-separator',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectSeparator {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** 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())
+  );
+}

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

@@ -0,0 +1,164 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    ElementRef,
+    inject,
+    input,
+    viewChild,
+} from '@angular/core';
+import { SELECT_CONTEXT } from './select-context';
+
+/**
+ * SelectTrigger component - the button that opens the select dropdown.
+ * Implements proper ARIA combobox trigger pattern with keyboard navigation.
+ *
+ * @example
+ * <SelectTrigger class="w-[180px]">
+ *   <SelectValue placeholder="Select an option" />
+ * </SelectTrigger>
+ */
+@Component({
+  selector: 'SelectTrigger',
+  template: `
+    <button
+      #triggerButton
+      type="button"
+      role="combobox"
+      [class]="computedClass()"
+      [attr.aria-expanded]="context?.open()"
+      aria-haspopup="listbox"
+      [attr.aria-controls]="context?.contentId"
+      [attr.data-state]="context?.open() ? 'open' : 'closed'"
+      [attr.data-disabled]="context?.disabled() ? '' : null"
+      [attr.data-placeholder]="!context?.value() ? '' : null"
+      [disabled]="context?.disabled()"
+      (click)="toggleOpen()"
+      (keydown)="onKeyDown($event)"
+    >
+      <ng-content />
+      <svg
+        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"
+        class="size-4 opacity-50 shrink-0"
+        aria-hidden="true"
+      >
+        <path d="m6 9 6 6 6-6"></path>
+      </svg>
+    </button>
+  `,
+  host: {
+    '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>('');
+
+  /** Toggle the select open state */
+  toggleOpen() {
+    if (!this.context?.disabled()) {
+      // Save trigger element for focus restoration
+      const button = this.triggerButton()?.nativeElement;
+      if (button) {
+        this.context?.triggerElement.set(button);
+      }
+      const newState = !this.context?.open();
+      this.context?.open.set(newState);
+      if (newState) {
+        // Focus first item when opening
+        setTimeout(() => this.context?.focusItem(0));
+      }
+    }
+  }
+
+  /** Close the select */
+  close() {
+    this.context?.open.set(false);
+  }
+
+  /** Handle keyboard navigation */
+  onKeyDown(event: KeyboardEvent): void {
+    if (!this.context || this.context.disabled()) return;
+
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.preventDefault();
+        this.toggleOpen();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!this.context.open()) {
+          // Save trigger element
+          const button = this.triggerButton()?.nativeElement;
+          if (button) {
+            this.context.triggerElement.set(button);
+          }
+          this.context.open.set(true);
+          setTimeout(() => this.context?.focusItem(0));
+        } else {
+          // Move to next item
+          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();
+        if (!this.context.open()) {
+          // Save trigger element
+          const button = this.triggerButton()?.nativeElement;
+          if (button) {
+            this.context.triggerElement.set(button);
+          }
+          this.context.open.set(true);
+          const lastIndex = this.context.itemValues().length - 1;
+          setTimeout(() => this.context?.focusItem(lastIndex));
+        } else {
+          // Move to previous item
+          const currentIndex = this.context.focusedIndex();
+          this.context.focusItem(Math.max(currentIndex - 1, 0));
+        }
+        break;
+      case 'Escape':
+        event.preventDefault();
+        this.close();
+        break;
+      case 'Home':
+        if (this.context.open()) {
+          event.preventDefault();
+          this.context.focusItem(0);
+        }
+        break;
+      case 'End':
+        if (this.context.open()) {
+          event.preventDefault();
+          const lastIndex = this.context.itemValues().length - 1;
+          this.context.focusItem(lastIndex);
+        }
+        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

@@ -0,0 +1,49 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    inject,
+    input,
+} from '@angular/core';
+import { SELECT_CONTEXT } from './select-context';
+
+/**
+ * SelectValue component - displays the selected value or placeholder.
+ *
+ * @example
+ * <SelectValue placeholder="Select an option" />
+ */
+@Component({
+  selector: 'SelectValue',
+  template: `{{ displayValue() }}`,
+  host: {
+    '[attr.data-placeholder]': '!context?.value() ? "" : null',
+    'data-slot': 'select-value',
+  },
+  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(() => {
+      if (this.context) {
+        this.context.placeholder.set(this.placeholder());
+      }
+    });
+  }
+
+  /** Computed display value */
+  protected readonly displayValue = computed(() => {
+    const label = this.context?.selectedLabel();
+    const value = this.context?.value();
+    if (label) return label;
+    if (value) return value;
+    return this.placeholder();
+  });
+}