@ng-cn/core 1.0.18 → 1.0.21

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

@@ -168,8 +168,6 @@ export class Slider implements ControlValueAccessor {
   private readonly thumb = viewChild<ElementRef<HTMLElement>>('thumb');
   private readonly elementRef = viewChild<ElementRef<HTMLElement>>('slider');
 
-  /** Emitted when value changes */
-  readonly valueChange = output<number>();
   /** Emitted when value change is committed (on release) */
   readonly valueCommit = output<number>();
 
@@ -373,7 +371,6 @@ export class Slider implements ControlValueAccessor {
     if (newValue !== this.value()) {
       this.value.set(newValue);
       this.onChange(newValue);
-      this.valueChange.emit(newValue);
     }
   }
 
@@ -406,7 +403,6 @@ export class Slider implements ControlValueAccessor {
     if (newValue !== this.value()) {
       this.value.set(newValue);
       this.onChange(newValue);
-      this.valueChange.emit(newValue);
     }
   }
 }

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

@@ -7,7 +7,6 @@ import {
   forwardRef,
   input,
   model,
-  output,
   signal,
   viewChild,
 } from '@angular/core';
@@ -144,9 +143,6 @@ export class Switch implements ControlValueAccessor {
 
   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);
 
@@ -237,7 +233,6 @@ export class Switch implements ControlValueAccessor {
       this.checked.set(newValue);
       this.onChange(newValue);
       this.onTouched();
-      this.checkedChange.emit(newValue);
     }
   }
 

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

@@ -187,6 +187,7 @@ export class TabsList {
 
     if (handled) {
       event.preventDefault();
+      if (typeof document === 'undefined') return;
 
       // Skip disabled tabs — scan in the movement direction
       const direction =
@@ -212,7 +213,7 @@ export class TabsList {
     let index = startIndex;
     for (let i = 0; i < length; i++) {
       const tabId = this.tabs.getTabId(tabValues[index]);
-      const el = document.getElementById(tabId);
+      const el = typeof document !== 'undefined' ? document.getElementById(tabId) : null;
       if (!el?.hasAttribute('data-disabled')) return index;
       index = ((index + direction) + length) % length;
     }
@@ -220,6 +221,7 @@ export class TabsList {
   }
 
   private updateIndicator(): void {
+    if (typeof document === 'undefined') return;
     const activeValue = this.tabs.value();
     if (!activeValue) return;
 

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

@@ -1,31 +1,91 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
  * Textarea component that applies shadcn textarea styles.
+ * Implements ControlValueAccessor for Angular Forms integration.
+ * Applied as an attribute on a native <textarea> element.
  *
  * @example
  * <!-- Basic textarea -->
- * <Textarea placeholder="Enter your message"></Textarea>
- *
- * <!-- With rows -->
- * <Textarea rows="5" placeholder="Description"></Textarea>
+ * <textarea Textarea placeholder="Type your message here."></textarea>
  *
  * <!-- Disabled -->
- * <Textarea disabled placeholder="Disabled"></Textarea>
+ * <textarea Textarea disabled placeholder="Disabled"></textarea>
+ *
+ * <!-- Auto-resize -->
+ * <textarea Textarea [autoResize]="true" placeholder="Grows as you type..."></textarea>
+ *
+ * <!-- With reactive forms -->
+ * <textarea Textarea formControlName="message" placeholder="Enter message"></textarea>
  */
 @Component({
-  selector: 'Textarea',
-  template: `<ng-content />`,
+  selector: 'textarea[Textarea], Textarea',
+  template: '',
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'textarea',
+    '[disabled]': 'isDisabled()',
+    '[id]': 'id()',
+    '[name]': 'name()',
+    '[placeholder]': 'placeholder()',
+    '[rows]': 'rows()',
+    '[attr.data-slot]': '"textarea"',
+    '[attr.data-auto-resize]': 'autoResize() || null',
+    '[attr.aria-invalid]': 'ariaInvalid() || null',
+    '[attr.aria-describedby]': 'ariaDescribedBy() || null',
+    '(input)': 'onInput($event)',
+    '(blur)': 'onTouched()',
   },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => Textarea),
+      multi: true,
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class Textarea {
+export class Textarea implements ControlValueAccessor, AfterViewInit {
+  /** Placeholder text */
+  readonly placeholder = input<string>('');
+  /** Textarea id attribute */
+  readonly id = input<string>('');
+  /** Textarea name attribute */
+  readonly name = input<string>('');
+  /** Number of visible text rows */
+  readonly rows = input<number>(3);
+  /** Whether the textarea is disabled */
+  readonly disabled = input(false, {
+    transform: (value: boolean | string) => value === '' || value === true || value === 'true',
+  });
+  /** Aria-invalid state for error display */
+  readonly ariaInvalid = input<boolean | undefined>(undefined, { alias: 'aria-invalid' });
+  /** Aria-describedby for accessibility */
+  readonly ariaDescribedBy = input<string | undefined>(undefined, { alias: 'aria-describedby' });
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
+  /** When true, the textarea height adjusts automatically as the user types */
+  readonly autoResize = input<boolean>(false);
+
+  private readonly _elementRef = inject(ElementRef<HTMLTextAreaElement>);
+
+  /** Internal disabled state (set by ControlValueAccessor) */
+  protected readonly isDisabled = signal<boolean>(false);
+
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: string) => void = () => {};
+  protected onTouched: () => void = () => {};
 
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
@@ -33,7 +93,47 @@ 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',
+      'resize-none data-[auto-resize=true]:resize-none',
       this.class(),
     ),
   );
+
+  ngAfterViewInit(): void {
+    // Ensure element is available after hydration
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: string): void {
+    const el = this._elementRef.nativeElement;
+    el.value = value ?? '';
+    if (this.autoResize()) {
+      el.style.height = 'auto';
+      el.style.height = el.scrollHeight + 'px';
+    }
+  }
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled.set(isDisabled);
+  }
+
+  /** Focus the textarea element */
+  focus(): void {
+    this._elementRef.nativeElement.focus();
+  }
+
+  /** Handle input events */
+  protected onInput(event: Event): void {
+    const target = event.target as HTMLTextAreaElement;
+    this.onChange(target.value);
+    if (this.autoResize()) {
+      const el = this._elementRef.nativeElement;
+      el.style.height = 'auto';
+      el.style.height = el.scrollHeight + 'px';
+    }
+  }
 }

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

@@ -178,7 +178,7 @@ export class ToastService {
     this._toasts.update((toasts) => [...toasts, newToast]);
 
     const duration = toast.duration ?? 4000;
-    if (duration > 0) {
+    if (duration > 0 && typeof window !== 'undefined') {
       setTimeout(() => this.dismiss(id), duration);
     }
 

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

@@ -6,7 +6,6 @@ import {
   forwardRef,
   input,
   model,
-  output,
   signal,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -120,9 +119,6 @@ export class Toggle implements ControlValueAccessor {
     }
   }
 
-  /** Emitted when pressed state changes */
-  readonly pressedChange = output<boolean>();
-
   /** Whether the toggle is pressed/on */
   readonly pressed = model<boolean>(false);
 
@@ -170,7 +166,6 @@ export class Toggle implements ControlValueAccessor {
       this.pressed.set(newValue);
       this.onChange(newValue);
       this.onTouched();
-      this.pressedChange.emit(newValue);
     }
   }
   // ControlValueAccessor implementation

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

@@ -8,7 +8,6 @@ import {
   inject,
   input,
   model,
-  output,
   signal,
 } from '@angular/core';
 import type { ToggleVariants } from '../toggle/toggle-variants';
@@ -138,9 +137,6 @@ export type ToggleGroupProps = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ToggleGroup {
-  /** Emitted when value changes */
-  readonly valueChange = output<string | string[]>();
-
   /** The current selected value(s) */
   readonly value = model<string | string[]>('');
 
@@ -205,7 +201,6 @@ export class ToggleGroup {
 
       this.value.set(newValue);
       this.context.value.set(newValue);
-      this.valueChange.emit(newValue);
     },
     isPressed: (itemValue: string) => {
       const currentValue = this.context.value();