@ng-cn/core 1.0.15 → 1.0.17

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

@@ -1,22 +1,18 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    forwardRef,
-    input,
-    model,
-    output,
-    signal,
-    viewChild,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type SwitchState = 'checked' | 'unchecked';
 
 export type SwitchProps = {
@@ -38,10 +34,6 @@ export type SwitchProps = {
   class?: string;
 };
 
-// ============================================================================
-// Switch Component
-// ============================================================================
-
 /**
  * Switch component for toggling between on/off states.
  * Based on Radix UI Switch primitive with shadcn/ui styling.
@@ -111,14 +103,11 @@ export type SwitchProps = {
       [attr.data-disabled]="isDisabled() ? '' : null"
       [disabled]="isDisabled()"
       [class]="trackClass()"
+      [style.backgroundColor]="checked() ? checkedBgColor() : 'var(--color-input)'"
       (click)="toggle()"
       (keydown)="onKeyDown($event)"
     >
-      <span
-        data-slot="switch-thumb"
-        [class]="thumbClass()"
-        [attr.data-state]="state()"
-      ></span>
+      <span data-slot="switch-thumb" [class]="thumbClass()" [attr.data-state]="state()"></span>
     </button>
     <!-- Hidden input for form submission -->
     @if (name()) {
@@ -148,63 +137,104 @@ export type SwitchProps = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Switch implements ControlValueAccessor {
-  private readonly buttonElement =
-    viewChild<ElementRef<HTMLButtonElement>>('buttonElement');
+  constructor() {
+    // Initialize from defaultChecked if provided
+    if (this.defaultChecked()) {
+      this.checked.set(true);
+    }
+  }
 
-  /** The id for the switch button - used for label association */
-  readonly id = input<string>();
+  private readonly buttonElement = viewChild<ElementRef<HTMLButtonElement>>('buttonElement');
+
+  /** Emitted when checked state changes */
+  readonly checkedChange = output<boolean>();
 
   /** Whether the switch is checked/on */
   readonly checked = model<boolean>(false);
 
+  /** The id for the switch button - used for label association */
+  readonly id = input<string>();
   /** Whether the switch starts checked (uncontrolled mode) */
   readonly defaultChecked = input<boolean>(false);
-
   /** Whether the switch is disabled via input */
   readonly disabled = input<boolean>(false);
-
   /** Whether the switch is required */
   readonly required = input<boolean>(false);
-
   /** The name for the hidden input (form submission) */
   readonly name = input<string>();
-
   /** The value for the hidden input (form submission) */
   readonly value = input<string>('on');
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
+  /** Additional CSS classes to apply to the inner track button */
+  readonly buttonClass = input<string>('');
+  /** Background color for checked state (hex, rgb, or CSS color name) */
+  readonly checkedBgColor = input<string>('rgb(59, 130, 246)');
 
-  /** Emitted when checked state changes */
-  readonly checkedChange = output<boolean>();
+  /** Current state for data attribute */
+  protected readonly state = computed(
+    (): SwitchState => (this.checked() ? 'checked' : 'unchecked'),
+  );
+  /** Input value for form submission */
+  protected readonly inputValue = computed(() => (this.checked() ? this.value() : undefined));
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() => cn('relative inline-flex', this.class()));
+  /** Computed track class */
+  protected readonly trackClass = computed(() =>
+    cn(
+      // Custom overrides first (higher specificity)
+      this.buttonClass(),
+      // Base styles
+      'inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent',
+      'shadow-xs transition-colors duration-200',
+      // Focus styles
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+      // State styles
+      'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'dark:data-[state=unchecked]:bg-input/80',
+      // Disabled styles
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ),
+  );
+  /** Computed thumb class */
+  protected readonly thumbClass = computed(() =>
+    cn(
+      // Base styles
+      'pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0',
+      // Transition
+      'transition-transform duration-200',
+      // Position based on state
+      'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+    ),
+  );
+  /** Whether the switch is disabled (either via input or forms) */
+  readonly isDisabled = computed(() => this.disabled() || this.isFormsDisabled());
 
   /** Whether the switch is disabled via forms */
-  private readonly formsDisabled = signal<boolean>(false);
-
-  /** Whether the switch is disabled (either via input or forms) */
-  readonly isDisabled = computed(() => this.disabled() || this.formsDisabled());
+  private readonly isFormsDisabled = signal<boolean>(false);
 
   /** ControlValueAccessor callbacks */
   private onChange: (value: boolean) => void = () => {};
   private onTouched: () => void = () => {};
 
-  /** Current state for data attribute */
-  protected readonly state = computed((): SwitchState =>
-    this.checked() ? 'checked' : 'unchecked'
-  );
-
-  /** Input value for form submission */
-  protected readonly inputValue = computed(() =>
-    this.checked() ? this.value() : undefined
-  );
-
-  constructor() {
-    // Initialize from defaultChecked if provided
-    if (this.defaultChecked()) {
-      this.checked.set(true);
-    }
+  // ControlValueAccessor implementation
+  writeValue(value: boolean): void {
+    this.checked.set(value ?? false);
+  }
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+  setDisabledState(isDisabled: boolean): void {
+    this.isFormsDisabled.set(isDisabled);
   }
 
+  /** Focus the switch button */
+  focus(): void {
+    this.buttonElement()?.nativeElement.focus();
+  }
   /** Toggle the switch state */
   toggle(): void {
     if (!this.isDisabled()) {
@@ -224,59 +254,4 @@ export class Switch implements ControlValueAccessor {
       return;
     }
   }
-
-  /** Focus the switch button */
-  focus(): void {
-    this.buttonElement()?.nativeElement.focus();
-  }
-
-  // ControlValueAccessor implementation
-  writeValue(value: boolean): void {
-    this.checked.set(value ?? false);
-  }
-
-  registerOnChange(fn: (value: boolean) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.formsDisabled.set(isDisabled);
-  }
-
-  /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn('relative inline-flex', this.class())
-  );
-
-  /** Computed track class */
-  protected readonly trackClass = computed(() =>
-    cn(
-      // Base styles
-      'inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent',
-      'shadow-xs transition-colors duration-200',
-      // Focus styles
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
-      // State styles
-      'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-      'dark:data-[state=unchecked]:bg-input/80',
-      // Disabled styles
-      'disabled:cursor-not-allowed disabled:opacity-50'
-    )
-  );
-
-  /** Computed thumb class */
-  protected readonly thumbClass = computed(() =>
-    cn(
-      // Base styles
-      'pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0',
-      // Transition
-      'transition-transform duration-200',
-      // Position based on state
-      'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
-    )
-  );
 }

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

@@ -6,4 +6,3 @@ export { TableHead } from './table-head.component';
 export { TableHeader } from './table-header.component';
 export { TableRow } from './table-row.component';
 export { Table } from './table.component';
-

package/src/app/lib/components/ui/table/table-body.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';
 
 /**
  * TableBody component - tbody wrapper.
@@ -12,8 +7,11 @@ import {
  */
 @Component({
   selector: 'TableBody',
-  template: `<tbody [class]="computedClass()"><ng-content /></tbody>`,
+  template: `<tbody [class]="computedClass()">
+    <ng-content />
+  </tbody>`,
   host: {
+    'attr.data-slot': '"table-body"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,7 +20,5 @@ export class TableBody {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('[&_tr:last-child]:border-0', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('[&_tr:last-child]:border-0', this.class()));
 }

package/src/app/lib/components/ui/table/table-caption.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';
 
 /**
  * TableCaption component - caption wrapper.
@@ -12,8 +7,11 @@ import {
  */
 @Component({
   selector: 'TableCaption',
-  template: `<caption [class]="computedClass()"><ng-content /></caption>`,
+  template: `<caption [class]="computedClass()">
+    <ng-content />
+  </caption>`,
   host: {
+    'attr.data-slot': '"table-caption"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,6 +21,6 @@ export class TableCaption {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('mt-4 text-sm text-muted-foreground', this.class())
+    cn('mt-4 text-sm text-muted-foreground', this.class()),
   );
 }

package/src/app/lib/components/ui/table/table-cell.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';
 
 /**
  * TableCell component - td wrapper.
@@ -14,6 +9,7 @@ import {
   selector: 'TableCell',
   template: `<td [class]="computedClass()"><ng-content /></td>`,
   host: {
+    'attr.data-slot': '"table-cell"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -25,7 +21,7 @@ export class TableCell {
   protected readonly computedClass = computed(() =>
     cn(
       'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/table/table-footer.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';
 
 /**
  * TableFooter component - tfoot wrapper.
@@ -12,8 +7,11 @@ import {
  */
 @Component({
   selector: 'TableFooter',
-  template: `<tfoot [class]="computedClass()"><ng-content /></tfoot>`,
+  template: `<tfoot [class]="computedClass()">
+    <ng-content />
+  </tfoot>`,
   host: {
+    'attr.data-slot': '"table-footer"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,6 +21,6 @@ export class TableFooter {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', this.class())
+    cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', this.class()),
   );
 }

package/src/app/lib/components/ui/table/table-head.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';
 
 /**
  * TableHead component - th wrapper.
@@ -16,6 +11,7 @@ import {
   selector: 'TableHead',
   template: `<th [scope]="scope()" [class]="computedClass()"><ng-content /></th>`,
   host: {
+    'attr.data-slot': '"table-head"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -30,7 +26,7 @@ export class TableHead {
   protected readonly computedClass = computed(() =>
     cn(
       'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/table/table-header.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';
 
 /**
  * TableHeader component - thead wrapper.
@@ -12,8 +7,11 @@ import {
  */
 @Component({
   selector: 'TableHeader',
-  template: `<thead [class]="computedClass()"><ng-content /></thead>`,
+  template: `<thead [class]="computedClass()">
+    <ng-content />
+  </thead>`,
   host: {
+    'attr.data-slot': '"table-header"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,7 +20,5 @@ export class TableHeader {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('[&_tr]:border-b', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('[&_tr]:border-b', this.class()));
 }

package/src/app/lib/components/ui/table/table-row.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';
 
 /**
  * TableRow component - tr wrapper.
@@ -12,8 +7,11 @@ import {
  */
 @Component({
   selector: 'TableRow',
-  template: `<tr [class]="computedClass()" [attr.data-state]="selected() ? 'selected' : null"><ng-content /></tr>`,
+  template: `<tr [class]="computedClass()" [attr.data-state]="selected() ? 'selected' : null">
+    <ng-content />
+  </tr>`,
   host: {
+    'attr.data-slot': '"table-row"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -26,9 +24,6 @@ export class TableRow {
   readonly selected = input<boolean>(false);
 
   protected readonly computedClass = computed(() =>
-    cn(
-      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-      this.class()
-    )
+    cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', this.class()),
   );
 }

package/src/app/lib/components/ui/table/table.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';
 
 /**
  * Table component - base table wrapper.
@@ -34,6 +29,7 @@ import {
     </table>
   `,
   host: {
+    'attr.data-slot': '"table"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -43,10 +39,10 @@ export class Table {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('relative w-full overflow-auto', this.class())
+    cn('relative w-full overflow-auto', this.class()),
   );
 
   protected readonly tableClass = computed(() =>
-    cn('w-full caption-bottom text-sm border-collapse')
+    cn('w-full caption-bottom text-sm border-collapse'),
   );
 }

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

@@ -1,14 +1,21 @@
 // Context and types
 export {
-    TABS_CONTEXT,
-    type TabsActivationMode,
-    type TabsContext,
-    type TabsOrientation
+  TABS_CONTEXT,
+  type TabsActivationMode,
+  type TabsContext,
+  type TabsOrientation,
 } from './tabs-context';
 
 // Components and their types
-export { TabsContent, type TabsContentProps, type TabsContentState } from './tabs-content.component';
+export {
+  TabsContent,
+  type TabsContentProps,
+  type TabsContentState,
+} from './tabs-content.component';
 export { TabsList, type TabsListProps } from './tabs-list.component';
-export { TabsTrigger, type TabsTriggerProps, type TabsTriggerState } from './tabs-trigger.component';
+export {
+  TabsTrigger,
+  type TabsTriggerProps,
+  type TabsTriggerState,
+} from './tabs-trigger.component';
 export { Tabs, type TabsProps } from './tabs.component';
-

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

@@ -1,17 +1,7 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { TABS_CONTEXT } from './tabs-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type TabsContentState = 'active' | 'inactive';
 
 /**
@@ -28,10 +18,6 @@ export interface TabsContentProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component TabsContent
  *
@@ -73,60 +59,49 @@ export interface TabsContentProps {
  */
 @Component({
   selector: 'TabsContent',
-  template: `
-    @if (shouldRender()) {
-      <ng-content />
-    }
-  `,
+  template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"tabs-content"',
     '[class]': 'computedClass()',
     '[attr.id]': 'panelId()',
     '[attr.data-state]': 'state()',
     '[attr.data-orientation]': 'tabs.orientation()',
     '[attr.aria-labelledby]': 'tabId()',
-    '[attr.hidden]': '!isActive() ? true : null',
+    '[attr.hidden]': '!isActive() && !forceMount() ? true : null',
     '[attr.tabindex]': 'isActive() ? 0 : -1',
-    'role': 'tabpanel',
+    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>('');
 
+  protected readonly tabs = inject(TABS_CONTEXT);
+
   /** 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'
+    this.isActive() ? 'active' : 'inactive',
   );
-
   /** Whether content should be rendered (force mount or active) */
-  protected readonly shouldRender = computed(() =>
-    this.forceMount() || this.isActive()
-  );
-
+  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()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -1,9 +1,5 @@
 import { InjectionToken, WritableSignal } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type TabsOrientation = 'horizontal' | 'vertical';
 export type TabsActivationMode = 'automatic' | 'manual';
 
@@ -26,8 +22,4 @@ export interface TabsContext {
   tabValues: WritableSignal<string[]>;
 }
 
-// ============================================================================
-// Injection Tokens
-// ============================================================================
-
 export const TABS_CONTEXT = new InjectionToken<TabsContext>('TabsContext');