@ng-cn/core 1.0.11 → 1.0.14

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

@@ -0,0 +1,132 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { TABS_CONTEXT } from './tabs-context';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type TabsContentState = 'active' | 'inactive';
+
+/**
+ * Props for the TabsContent component
+ */
+export interface TabsContentProps {
+  /** A unique value that associates the content with a trigger */
+  value: string;
+  /** Used to force mounting when more control is needed.
+   * Useful when controlling animation with CSS animation libraries.
+   * @default false */
+  forceMount?: boolean;
+  /** Additional CSS classes */
+  class?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * @component TabsContent
+ *
+ * Contains the content associated with each trigger.
+ *
+ * @description
+ * TabsContent holds the content for each tab panel. It is shown when its
+ * associated TabsTrigger is activated.
+ *
+ * ## Features
+ * - Conditional rendering (unmounts when inactive by default)
+ * - Force mount option for animation control
+ * - Proper ARIA tabpanel role
+ * - Focusable when active
+ *
+ * ## Accessibility
+ * - `role="tabpanel"` on the element
+ * - `aria-labelledby` points to associated trigger
+ * - `hidden` attribute when inactive
+ * - `tabindex="0"` when active for keyboard access
+ *
+ * @example Basic usage
+ * ```html
+ * <TabsContent value="account">
+ *   <p>Account settings content here</p>
+ * </TabsContent>
+ * ```
+ *
+ * @example Force mounted (for animations)
+ * ```html
+ * <TabsContent value="account" [forceMount]="true">
+ *   <p>Content stays in DOM even when inactive</p>
+ * </TabsContent>
+ * ```
+ *
+ * @data-attributes
+ * - `data-state` - 'active' | 'inactive'
+ * - `data-orientation` - Inherited from parent Tabs
+ */
+@Component({
+  selector: 'TabsContent',
+  template: `
+    @if (shouldRender()) {
+      <ng-content />
+    }
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.id]': 'panelId()',
+    '[attr.data-state]': 'state()',
+    '[attr.data-orientation]': 'tabs.orientation()',
+    '[attr.aria-labelledby]': 'tabId()',
+    '[attr.hidden]': '!isActive() ? true : null',
+    '[attr.tabindex]': 'isActive() ? 0 : -1',
+    'role': 'tabpanel',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TabsContent {
+  protected readonly tabs = inject(TABS_CONTEXT);
+
+  /** A unique value that associates the content with a trigger */
+  readonly value = input.required<string>();
+
+  /** Used to force mounting when more control is needed */
+  readonly forceMount = input<boolean>(false);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Check if this content should be visible */
+  protected readonly isActive = computed(() => this.tabs.value() === this.value());
+
+  /** Current state: active or inactive */
+  protected readonly state = computed<TabsContentState>(() =>
+    this.isActive() ? 'active' : 'inactive'
+  );
+
+  /** Whether content should be rendered (force mount or active) */
+  protected readonly shouldRender = computed(() =>
+    this.forceMount() || this.isActive()
+  );
+
+  /** Generate panel ID */
+  protected readonly panelId = computed(() => this.tabs.getPanelId(this.value()));
+
+  /** Generate tab ID for aria-labelledby */
+  protected readonly tabId = computed(() => this.tabs.getTabId(this.value()));
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex-1 outline-none',
+      'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'mt-2',
+      this.class()
+    )
+  );
+}

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

@@ -0,0 +1,33 @@
+import { InjectionToken, WritableSignal } from '@angular/core';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsActivationMode = 'automatic' | 'manual';
+
+export interface TabsContext {
+  /** Current active tab value */
+  value: () => string;
+  /** Handle tab change */
+  onValueChange: (value: string) => void;
+  /** ARIA ID for the tablist */
+  tablistId: string;
+  /** Generate tab ID for a specific value */
+  getTabId: (value: string) => string;
+  /** Generate panel ID for a specific value */
+  getPanelId: (value: string) => string;
+  /** Orientation for keyboard navigation */
+  orientation: () => TabsOrientation;
+  /** Activation mode: automatic (on focus) or manual (on click/enter) */
+  activationMode: () => TabsActivationMode;
+  /** Registry of tab values for keyboard navigation */
+  tabValues: WritableSignal<string[]>;
+}
+
+// ============================================================================
+// Injection Tokens
+// ============================================================================
+
+export const TABS_CONTEXT = new InjectionToken<TabsContext>('TabsContext');

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

@@ -0,0 +1,228 @@
+import { cn } from '@/lib/utils';
+import {
+    afterNextRender,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    ElementRef,
+    inject,
+    Injector,
+    input,
+    signal,
+} from '@angular/core';
+import { TABS_CONTEXT } from './tabs-context';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Props for the TabsList component
+ */
+export interface TabsListProps {
+  /** Whether to show the animated indicator.
+   * @default true */
+  showIndicator?: boolean;
+  /** Additional CSS classes for the indicator */
+  indicatorClass?: string;
+  /** Additional CSS classes */
+  class?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * @component TabsList
+ *
+ * Contains the tab triggers. Provides proper ARIA tablist role and keyboard navigation.
+ *
+ * @description
+ * TabsList serves as the container for TabsTrigger components and implements
+ * the tablist role with proper ARIA attributes and keyboard navigation.
+ *
+ * ## Features
+ * - Animated indicator showing active tab
+ * - Full keyboard navigation (arrow keys, Home, End)
+ * - Proper ARIA tablist role
+ * - Horizontal and vertical orientation support
+ * - Automatic or manual activation modes
+ *
+ * ## Accessibility
+ * - `role="tablist"` on the container
+ * - `aria-orientation` reflects the orientation
+ * - Manages focus between tabs via roving tabindex
+ *
+ * ## Keyboard Navigation
+ * - `ArrowRight/ArrowLeft` - Navigate tabs (horizontal)
+ * - `ArrowDown/ArrowUp` - Navigate tabs (vertical)
+ * - `Home` - Focus first tab
+ * - `End` - Focus last tab
+ *
+ * @example Basic usage
+ * ```html
+ * <TabsList>
+ *   <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *   <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ * </TabsList>
+ * ```
+ *
+ * @example Without indicator
+ * ```html
+ * <TabsList [showIndicator]="false">
+ *   <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *   <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ * </TabsList>
+ * ```
+ *
+ * @data-attributes Inherits data-orientation from parent Tabs
+ */
+@Component({
+  selector: 'TabsList',
+  template: `
+    <ng-content />
+    @if (showIndicator()) {
+      <span
+        data-slot="tabs-indicator"
+        [class]="computedIndicatorClass()"
+        [style.width.px]="indicatorStyle().width"
+        [style.left.px]="indicatorStyle().left"
+        aria-hidden="true"
+      ></span>
+    }
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    'role': 'tablist',
+    '[attr.id]': 'tabs.tablistId',
+    '[attr.aria-orientation]': 'tabs.orientation()',
+    '(keydown)': 'onKeydown($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TabsList {
+  protected readonly tabs = inject(TABS_CONTEXT);
+  private readonly elementRef = inject(ElementRef);
+  private readonly injector = inject(Injector);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Whether to show the animated indicator */
+  readonly showIndicator = input<boolean>(false);
+
+  /** Additional indicator CSS classes */
+  readonly indicatorClass = input<string>('');
+
+  /** Indicator position and size */
+  protected readonly indicatorStyle = signal({ width: 0, left: 0 });
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'text-muted-foreground inline-flex h-9 w-fit items-center justify-center gap-1 rounded-lg bg-transparent p-1',
+      this.class()
+    )
+  );
+
+  protected readonly computedIndicatorClass = computed(() =>
+    cn(
+      'absolute inset-y-1 bg-background rounded-md shadow-sm transition-all duration-200',
+      this.indicatorClass()
+    )
+  );
+
+  constructor() {
+    // Update indicator when value changes (browser-only via afterNextRender)
+    effect(() => {
+      const _ = this.tabs.value(); // Subscribe to value changes
+      // Schedule browser-only DOM update
+      afterNextRender(() => {
+        this.updateIndicator();
+      }, { injector: this.injector });
+    });
+  }
+
+  private updateIndicator(): void {
+    const activeValue = this.tabs.value();
+    if (!activeValue) return;
+
+    const tabId = this.tabs.getTabId(activeValue);
+    const tabElement = document.getElementById(tabId);
+    const listElement = this.elementRef.nativeElement;
+
+    if (tabElement && listElement) {
+      const tabRect = tabElement.getBoundingClientRect();
+      const listRect = listElement.getBoundingClientRect();
+
+      this.indicatorStyle.set({
+        width: tabRect.width,
+        left: tabRect.left - listRect.left,
+      });
+    }
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    const tabValues = this.tabs.tabValues();
+    if (tabValues.length === 0) return;
+
+    const currentValue = this.tabs.value();
+    const currentIndex = tabValues.indexOf(currentValue);
+    const orientation = this.tabs.orientation();
+    const activationMode = this.tabs.activationMode();
+
+    let newIndex = currentIndex;
+    let handled = false;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        if (orientation === 'horizontal') {
+          newIndex = currentIndex > 0 ? currentIndex - 1 : tabValues.length - 1;
+          handled = true;
+        }
+        break;
+      case 'ArrowRight':
+        if (orientation === 'horizontal') {
+          newIndex = currentIndex < tabValues.length - 1 ? currentIndex + 1 : 0;
+          handled = true;
+        }
+        break;
+      case 'ArrowUp':
+        if (orientation === 'vertical') {
+          newIndex = currentIndex > 0 ? currentIndex - 1 : tabValues.length - 1;
+          handled = true;
+        }
+        break;
+      case 'ArrowDown':
+        if (orientation === 'vertical') {
+          newIndex = currentIndex < tabValues.length - 1 ? currentIndex + 1 : 0;
+          handled = true;
+        }
+        break;
+      case 'Home':
+        newIndex = 0;
+        handled = true;
+        break;
+      case 'End':
+        newIndex = tabValues.length - 1;
+        handled = true;
+        break;
+    }
+
+    if (handled) {
+      event.preventDefault();
+      const newValue = tabValues[newIndex];
+
+      // In automatic mode, activate on focus; in manual mode, just focus
+      if (activationMode === 'automatic') {
+        this.tabs.onValueChange(newValue);
+      }
+
+      // Focus the new tab
+      const tabId = this.tabs.getTabId(newValue);
+      const tabElement = document.getElementById(tabId);
+      tabElement?.focus();
+    }
+  }
+}

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

@@ -0,0 +1,167 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+    OnDestroy,
+    OnInit
+} from '@angular/core';
+import { TABS_CONTEXT } from './tabs-context';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type TabsTriggerState = 'active' | 'inactive';
+
+/**
+ * Props for the TabsTrigger component
+ */
+export interface TabsTriggerProps {
+  /** A unique value that associates the trigger with a content */
+  value: string;
+  /** When true, prevents the user from interacting with the tab.
+   * @default false */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  class?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * @component TabsTrigger
+ *
+ * The button that activates its associated content.
+ *
+ * @description
+ * TabsTrigger is the interactive element users click or focus to activate
+ * a tab panel. It implements the tab role with proper ARIA attributes.
+ *
+ * ## Features
+ * - Click activation
+ * - Keyboard activation (Enter/Space)
+ * - Disabled state support
+ * - Roving tabindex for keyboard navigation
+ * - Auto-registration with parent TabsList
+ *
+ * ## Accessibility
+ * - `role="tab"` on the element
+ * - `aria-selected` reflects active state
+ * - `aria-controls` points to associated panel
+ * - `tabindex` follows roving tabindex pattern (0 for active, -1 for inactive)
+ * - `aria-disabled` when disabled
+ *
+ * @example Basic usage
+ * ```html
+ * <TabsTrigger value="account">Account</TabsTrigger>
+ * ```
+ *
+ * @example Disabled trigger
+ * ```html
+ * <TabsTrigger value="settings" [disabled]="true">Settings</TabsTrigger>
+ * ```
+ *
+ * @example With icon
+ * ```html
+ * <TabsTrigger value="account">
+ *   <UserIcon class="size-4" />
+ *   Account
+ * </TabsTrigger>
+ * ```
+ *
+ * @data-attributes
+ * - `data-state` - 'active' | 'inactive'
+ * - `data-disabled` - Present when disabled
+ */
+@Component({
+  selector: 'TabsTrigger',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.id]': 'tabId()',
+    '[attr.data-state]': 'state()',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.aria-selected]': 'isActive()',
+    '[attr.aria-controls]': 'panelId()',
+    '[attr.aria-disabled]': 'disabled() || null',
+    '[attr.tabindex]': 'isActive() ? 0 : -1',
+    '[attr.disabled]': 'disabled() ? "" : null',
+    '(click)': 'onClick()',
+    '(keydown.enter)': 'onClick()',
+    '(keydown.space)': 'onSpace($event)',
+    'role': 'tab',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TabsTrigger implements OnInit, OnDestroy {
+  protected readonly tabs = inject(TABS_CONTEXT);
+
+  /** A unique value that associates the trigger with a content */
+  readonly value = input.required<string>();
+
+  /** When true, prevents the user from interacting with the tab */
+  readonly disabled = input<boolean>(false);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Check if this tab is currently active */
+  protected readonly isActive = computed(() => this.tabs.value() === this.value());
+
+  /** Current state: active or inactive */
+  protected readonly state = computed<TabsTriggerState>(() =>
+    this.isActive() ? 'active' : 'inactive'
+  );
+
+  /** Generate tab ID */
+  protected readonly tabId = computed(() => this.tabs.getTabId(this.value()));
+
+  /** Generate panel ID for aria-controls */
+  protected readonly panelId = computed(() => this.tabs.getPanelId(this.value()));
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:border data-[state=active]:border-border data-[state=active]:shadow-sm',
+      'data-[state=inactive]:hover:text-foreground',
+      'cursor-pointer',
+      this.disabled() && 'pointer-events-none opacity-50',
+      this.class()
+    )
+  );
+
+  ngOnInit(): void {
+    // Register this tab's value for keyboard navigation
+    this.tabs.tabValues.update(values => {
+      if (!values.includes(this.value())) {
+        return [...values, this.value()];
+      }
+      return values;
+    });
+  }
+
+  ngOnDestroy(): void {
+    // Unregister this tab's value
+    this.tabs.tabValues.update(values =>
+      values.filter(v => v !== this.value())
+    );
+  }
+
+  protected onClick(): void {
+    if (!this.disabled()) {
+      this.tabs.onValueChange(this.value());
+    }
+  }
+
+  protected onSpace(event: Event): void {
+    event.preventDefault();
+    this.onClick();
+  }
+}