@ng-cn/core 1.0.15 → 1.0.17

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

@@ -1,22 +1,18 @@
 import { cn } from '@/lib/utils';
 import {
-    afterNextRender,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    ElementRef,
-    inject,
-    Injector,
-    input,
-    signal,
+  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
  */
@@ -30,10 +26,6 @@ export interface TabsListProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component TabsList
  *
@@ -94,8 +86,9 @@ export interface TabsListProps {
     }
   `,
   host: {
+    'attr.data-slot': '"tabs-list"',
     '[class]': 'computedClass()',
-    'role': 'tablist',
+    role: 'tablist',
     '[attr.id]': 'tabs.tablistId',
     '[attr.aria-orientation]': 'tabs.orientation()',
     '(keydown)': 'onKeydown($event)',
@@ -103,65 +96,47 @@ export interface TabsListProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TabsList {
-  protected readonly tabs = inject(TABS_CONTEXT);
-  private readonly elementRef = inject(ElementRef);
-  private readonly injector = inject(Injector);
+  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 },
+      );
+    });
+  }
 
   /** 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 });
+  private readonly _elementRef = inject(ElementRef);
+  private readonly _injector = inject(Injector);
+
+  protected readonly tabs = inject(TABS_CONTEXT);
 
   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()
-    )
+      this.class(),
+    ),
   );
-
   protected readonly computedIndicatorClass = computed(() =>
     cn(
       'absolute inset-y-1 bg-background rounded-md shadow-sm transition-all duration-200',
-      this.indicatorClass()
-    )
+      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,
-      });
-    }
-  }
+  /** Indicator position and size */
+  protected readonly indicatorStyle = signal({ width: 0, left: 0 });
 
   onKeydown(event: KeyboardEvent): void {
     const tabValues = this.tabs.tabValues();
@@ -225,4 +200,23 @@ export class TabsList {
       tabElement?.focus();
     }
   }
+
+  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,
+      });
+    }
+  }
 }

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

@@ -1,19 +1,15 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-    OnDestroy,
-    OnInit
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
 } from '@angular/core';
 import { TABS_CONTEXT } from './tabs-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type TabsTriggerState = 'active' | 'inactive';
 
 /**
@@ -29,10 +25,6 @@ export interface TabsTriggerProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component TabsTrigger
  *
@@ -82,6 +74,7 @@ export interface TabsTriggerProps {
   selector: 'TabsTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"tabs-trigger"',
     '[class]': 'computedClass()',
     '[attr.id]': 'tabId()',
     '[attr.data-state]': 'state()',
@@ -94,36 +87,27 @@ export interface TabsTriggerProps {
     '(click)': 'onClick()',
     '(keydown.enter)': 'onClick()',
     '(keydown.space)': 'onSpace($event)',
-    'role': 'tab',
+    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>('');
 
+  protected readonly tabs = inject(TABS_CONTEXT);
+
   /** 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',
@@ -133,25 +117,27 @@ export class TabsTrigger implements OnInit, OnDestroy {
       'data-[state=inactive]:hover:text-foreground',
       'cursor-pointer',
       this.disabled() && 'pointer-events-none opacity-50',
-      this.class()
-    )
+      this.class(),
+    ),
+  );
+
+  /** Current state: active or inactive */
+  protected readonly state = computed<TabsTriggerState>(() =>
+    this.isActive() ? 'active' : 'inactive',
   );
 
   ngOnInit(): void {
     // Register this tab's value for keyboard navigation
-    this.tabs.tabValues.update(values => {
+    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())
-    );
+    this.tabs.tabValues.update((values) => values.filter((v) => v !== this.value()));
   }
 
   protected onClick(): void {
@@ -159,7 +145,6 @@ export class TabsTrigger implements OnInit, OnDestroy {
       this.tabs.onValueChange(this.value());
     }
   }
-
   protected onSpace(event: Event): void {
     event.preventDefault();
     this.onClick();

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

@@ -1,22 +1,18 @@
 import { cn } from '@/lib/utils';
 import { AriaIdService } from '@/lib/utils/accessibility';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    forwardRef,
-    inject,
-    input,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  inject,
+  input,
+  output,
+  signal,
 } from '@angular/core';
 import { TABS_CONTEXT, TabsActivationMode, TabsContext, TabsOrientation } from './tabs-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the Tabs component
  */
@@ -38,10 +34,6 @@ export interface TabsProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component Tabs
  *
@@ -124,6 +116,7 @@ export interface TabsProps {
   selector: 'Tabs',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"tabs"',
     '[class]': 'computedClass()',
     '[attr.data-orientation]': 'orientation()',
   },
@@ -136,59 +129,53 @@ export interface TabsProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Tabs implements TabsContext {
-  private readonly ariaIdService = inject(AriaIdService);
-  private readonly ariaIds = this.ariaIdService.generateTabIds('tabs');
+  constructor() {
+    // Initialize with defaultValue, controlled value takes precedence
+    effect(() => {
+      const defaultVal = this.defaultValue();
+      const controlled = this.controlledValue();
+
+      if (controlled !== undefined) {
+        this._value.set(controlled);
+      } else if (defaultVal && !this._value()) {
+        this._value.set(defaultVal);
+      }
+    });
+  }
+
+  /** Event called when the value changes */
+  readonly valueChange = output<string>();
 
   /** The value of the tab that should be active when initially rendered */
   readonly defaultValue = input<string>('');
-
   /** The controlled value of the tab to activate */
   readonly controlledValue = input<string | undefined>(undefined, { alias: 'value' });
-
   /** The orientation of the component */
   readonly orientation = input<TabsOrientation>('horizontal');
-
   /** When automatic, tabs are activated upon focus. When manual, upon click. */
   readonly activationMode = input<TabsActivationMode>('automatic');
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  /** Event called when the value changes */
-  readonly valueChange = output<string>();
+  private readonly _ariaIdService = inject(AriaIdService);
+
+  protected readonly computedClass = computed(() => cn('flex flex-col gap-2', this.class()));
 
   /** Internal state for the active tab value */
   private readonly _value = signal<string>('');
+  /** Registry of tab values for keyboard navigation */
+  readonly tabValues = signal<string[]>([]);
 
+  private readonly ariaIds = this._ariaIdService.generateTabIds('tabs');
   /** ARIA IDs */
   readonly tablistId = this.ariaIds.tablistId;
 
-  /** Registry of tab values for keyboard navigation */
-  readonly tabValues = signal<string[]>([]);
-
   /** Generate tab ID for a specific value */
   getTabId = (value: string): string => `${this.tablistId}-tab-${value}`;
-
   /** Generate panel ID for a specific value */
   getPanelId = (value: string): string => `${this.tablistId}-panel-${value}`;
-
-  constructor() {
-    // Initialize with defaultValue, controlled value takes precedence
-    effect(() => {
-      const defaultVal = this.defaultValue();
-      const controlled = this.controlledValue();
-
-      if (controlled !== undefined) {
-        this._value.set(controlled);
-      } else if (defaultVal && !this._value()) {
-        this._value.set(defaultVal);
-      }
-    });
-  }
-
   /** Get the current active tab value */
   value = () => this.controlledValue() ?? this._value();
-
   /** Handle tab change */
   onValueChange = (newValue: string) => {
     if (this.controlledValue() === undefined) {
@@ -196,8 +183,4 @@ export class Tabs implements TabsContext {
     }
     this.valueChange.emit(newValue);
   };
-
-  protected readonly computedClass = computed(() =>
-    cn('flex flex-col gap-2', this.class())
-  );
 }

package/src/app/lib/components/ui/textarea/textarea.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';
 
 /**
  * Textarea component that applies shadcn textarea styles.
@@ -38,7 +33,7 @@ export class Textarea {
       'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
       'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
       'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -5,12 +5,11 @@ export { ToastTitle, type ToastTitleProps } from './toast-title.component';
 export { toastVariants, type ToastVariants } from './toast-variants';
 export { Toast, type ToastProps, type ToastState, type ToastSwipeState } from './toast.component';
 export {
-    ToastService,
-    type Toast as ToastData,
-    type ToastOptions,
-    type ToastPosition,
-    type ToastSwipeDirection,
-    type ToastType
+  ToastService,
+  type Toast as ToastData,
+  type ToastOptions,
+  type ToastPosition,
+  type ToastSwipeDirection,
+  type ToastType,
 } from './toast.service';
 export { Toaster, type ToasterProps } from './toaster.component';
-

package/src/app/lib/components/ui/toast/toast-action.component.ts

@@ -2,10 +2,6 @@ import { cn } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
 import { buttonVariants } from '../button';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the ToastAction component
  */
@@ -17,10 +13,6 @@ export interface ToastActionProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component ToastAction
  *
@@ -47,31 +39,28 @@ export interface ToastActionProps {
 @Component({
   selector: 'ToastAction',
   template: `
-    <button
-      type="button"
-      [class]="computedClass()"
-      (click)="onClick.emit()"
-    >
+    <button type="button" [class]="computedClass()" (click)="onClick.emit()">
       <ng-content />
     </button>
   `,
   host: {
+    'attr.data-slot': '"toast-action"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ToastAction {
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
   /** Event emitted when the action button is clicked */
   readonly onClick = output<void>();
 
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
   protected readonly computedClass = computed(() =>
     cn(
       buttonVariants({ variant: 'outline', size: 'sm' }),
       'shrink-0 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/toast/toast-description.component.ts

@@ -1,10 +1,6 @@
 import { cn } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the ToastDescription component
  */
@@ -13,10 +9,6 @@ export interface ToastDescriptionProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component ToastDescription
  *
@@ -38,6 +30,7 @@ export interface ToastDescriptionProps {
   selector: 'ToastDescription',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"toast-description"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -46,7 +39,5 @@ export class ToastDescription {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('text-sm opacity-90', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('text-sm opacity-90', this.class()));
 }

package/src/app/lib/components/ui/toast/toast-title.component.ts

@@ -1,10 +1,6 @@
 import { cn } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the ToastTitle component
  */
@@ -13,10 +9,6 @@ export interface ToastTitleProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component ToastTitle
  *
@@ -38,6 +30,7 @@ export interface ToastTitleProps {
   selector: 'ToastTitle',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"toast-title"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -47,6 +40,6 @@ export class ToastTitle {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('text-sm font-semibold [&+div]:text-xs', this.class())
+    cn('text-sm font-semibold [&+div]:text-xs', this.class()),
   );
 }

package/src/app/lib/components/ui/toast/toast-variants.ts

@@ -18,7 +18,7 @@ export const toastVariants = cva(
     defaultVariants: {
       variant: 'default',
     },
-  }
+  },
 );
 
 export type ToastVariants = VariantProps<typeof toastVariants>;