@ng-cn/core 1.0.18 → 1.0.21

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

@@ -0,0 +1,29 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemActions component - trailing actions (buttons, icons) for an Item.
+ *
+ * @example
+ * <ItemActions>
+ *   <Button variant="outline" size="sm">Open</Button>
+ * </ItemActions>
+ */
+@Component({
+  selector: 'ItemActions',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-actions"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemActions {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex items-center gap-2', this.class()),
+  );
+}

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

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemContent component - main content area of an Item, holding
+ * the title and description.
+ *
+ * @example
+ * <ItemContent>
+ *   <ItemTitle>Title</ItemTitle>
+ *   <ItemDescription>Description</ItemDescription>
+ * </ItemContent>
+ */
+@Component({
+  selector: 'ItemContent',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-content"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemContent {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', this.class()),
+  );
+}

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

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemDescription component - secondary description text for an Item.
+ *
+ * @example
+ * <ItemDescription>A short summary of the item.</ItemDescription>
+ */
+@Component({
+  selector: 'ItemDescription',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-description"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemDescription {
+  /** 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 line-clamp-2 text-sm leading-normal font-normal text-balance',
+      this.class(),
+    ),
+  );
+}

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

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemFooter component - full-width footer row inside an Item.
+ *
+ * @example
+ * <Item>
+ *   <ItemContent>...</ItemContent>
+ *   <ItemFooter>Footer content</ItemFooter>
+ * </Item>
+ */
+@Component({
+  selector: 'ItemFooter',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-footer"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemFooter {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex basis-full items-center justify-between gap-2', this.class()),
+  );
+}

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

@@ -0,0 +1,32 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemGroup component - container that stacks multiple Item components.
+ *
+ * @example
+ * <ItemGroup>
+ *   <Item>...</Item>
+ *   <ItemSeparator />
+ *   <Item>...</Item>
+ * </ItemGroup>
+ */
+@Component({
+  selector: 'ItemGroup',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-group"',
+    role: 'list',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemGroup {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('group/item-group flex flex-col', this.class()),
+  );
+}

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

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemHeader component - full-width header row inside an Item.
+ *
+ * @example
+ * <Item>
+ *   <ItemHeader>Header content</ItemHeader>
+ *   <ItemContent>...</ItemContent>
+ * </Item>
+ */
+@Component({
+  selector: 'ItemHeader',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-header"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemHeader {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex basis-full items-center justify-between gap-2', this.class()),
+  );
+}

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

@@ -0,0 +1,63 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * ItemMedia variants using class-variance-authority.
+ * Matches shadcn/ui React item-media exactly.
+ */
+export const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;
+export type ItemMediaVariant = 'default' | 'icon' | 'image';
+
+/**
+ * ItemMedia component - leading media (icon, image or avatar) for an Item.
+ *
+ * @example
+ * <!-- Icon -->
+ * <ItemMedia variant="icon">
+ *   <lucide-icon [img]="Music" />
+ * </ItemMedia>
+ *
+ * <!-- Image -->
+ * <ItemMedia variant="image">
+ *   <img src="..." alt="..." />
+ * </ItemMedia>
+ */
+@Component({
+  selector: 'ItemMedia',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-media"',
+    '[attr.data-variant]': 'variant()',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemMedia {
+  /** The visual style variant of the media container */
+  readonly variant = input<ItemMediaVariant>('default');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles, variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(itemMediaVariants({ variant: this.variant() }), this.class()),
+  );
+}

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

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemSeparator component - horizontal divider between items in an ItemGroup.
+ *
+ * @example
+ * <ItemGroup>
+ *   <Item>...</Item>
+ *   <ItemSeparator />
+ *   <Item>...</Item>
+ * </ItemGroup>
+ */
+@Component({
+  selector: 'ItemSeparator',
+  template: ``,
+  host: {
+    'attr.data-slot': '"item-separator"',
+    role: 'none',
+    'attr.data-orientation': '"horizontal"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemSeparator {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('bg-border shrink-0 h-px w-full my-0', this.class()),
+  );
+}

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

@@ -0,0 +1,27 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+/**
+ * ItemTitle component - title text for an Item.
+ *
+ * @example
+ * <ItemTitle>Basic Item</ItemTitle>
+ */
+@Component({
+  selector: 'ItemTitle',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item-title"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemTitle {
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', this.class()),
+  );
+}

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

@@ -0,0 +1,77 @@
+import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Item variants using class-variance-authority.
+ * Matches shadcn/ui React item exactly.
+ */
+export const itemVariants = cva(
+  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50',
+      },
+      size: {
+        default: 'p-4 gap-4',
+        sm: 'py-3 px-4 gap-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ItemVariants = VariantProps<typeof itemVariants>;
+export type ItemVariant = 'default' | 'outline' | 'muted';
+export type ItemSize = 'default' | 'sm';
+
+/**
+ * Item component - a flexible row for displaying content with
+ * media, title, description and actions.
+ *
+ * @example
+ * <Item variant="outline">
+ *   <ItemMedia variant="icon">
+ *     <lucide-icon [img]="User" />
+ *   </ItemMedia>
+ *   <ItemContent>
+ *     <ItemTitle>Profile</ItemTitle>
+ *     <ItemDescription>Manage your profile settings.</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions>
+ *     <Button size="sm">Edit</Button>
+ *   </ItemActions>
+ * </Item>
+ */
+@Component({
+  selector: 'Item',
+  template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"item"',
+    '[attr.data-variant]': 'variant()',
+    '[attr.data-size]': 'size()',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Item {
+  /** The visual style variant of the item */
+  readonly variant = input<ItemVariant>('default');
+
+  /** The size of the item */
+  readonly size = input<ItemSize>('default');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining base styles, variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(itemVariants({ variant: this.variant(), size: this.size() }), this.class()),
+  );
+}

package/src/app/lib/components/ui/phone-input/index.ts

@@ -0,0 +1 @@
+export { PhoneInput } from './phone-input.component';

package/src/app/lib/components/ui/phone-input/phone-input.component.ts

@@ -0,0 +1,169 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  signal,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CountrySelector } from '../country-selector/country-selector.component';
+import { COUNTRIES, type Country, getCountryByCode } from '../country-selector/country-data';
+
+/**
+ * PhoneInput component
+ *
+ * Combines a CountrySelector (dial code) with a number input.
+ * Implements ControlValueAccessor — value is the full phone string (e.g. "+1 555-123-4567").
+ *
+ * @example
+ * ```html
+ * <PhoneInput [(ngModel)]="phone" placeholder="Enter phone number" />
+ * ```
+ */
+@Component({
+  selector: 'PhoneInput',
+  imports: [CountrySelector],
+  template: `
+    <div [class]="containerClass()">
+      <CountrySelector
+        [disabled]="isDisabled()"
+        [class]="'rounded-r-none border-r-0 shrink-0 w-auto min-w-[120px]'"
+        [placeholder]="'Country'"
+        [value]="selectedCountryCode()"
+        (countryChange)="onCountryChange($event)"
+      />
+      <input
+        type="tel"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [value]="localNumber()"
+        (input)="onNumberInput($event)"
+        (blur)="onTouched()"
+        [class]="inputClass()"
+      />
+    </div>
+  `,
+  host: {
+    'attr.data-slot': '"phone-input"',
+    '[class]': 'hostClass()',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => PhoneInput),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PhoneInput implements ControlValueAccessor {
+  /** Placeholder for the number input */
+  readonly placeholder = input<string>('Phone number');
+  /** Whether the input is disabled */
+  readonly disabled = input<boolean>(false);
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Internal country code (ISO 2-letter) */
+  protected readonly selectedCountryCode = signal<string>('US');
+  /** Internal local number (without dial code) */
+  protected readonly localNumber = signal<string>('');
+  /** Internal disabled state from CVA */
+  private readonly _isDisabledFromCVA = signal<boolean>(false);
+
+  protected readonly isDisabled = computed(() => this.disabled() || this._isDisabledFromCVA());
+
+  protected readonly hostClass = computed(() => cn('block', this.class()));
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      'flex items-stretch w-full',
+      this.isDisabled() && 'pointer-events-none opacity-50',
+    ),
+  );
+
+  protected readonly inputClass = computed(() =>
+    cn(
+      'flex-1 min-w-0 h-10 rounded-xl rounded-l-none border px-3 py-2 text-sm',
+      'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-300 dark:border-zinc-700/50',
+      'text-zinc-900 dark:text-zinc-50 placeholder:text-zinc-500',
+      'shadow-xs transition-[color,box-shadow] outline-none',
+      'focus-visible:border-primary/30 dark:focus-visible:border-white/30 focus-visible:ring-primary/20 dark:focus-visible:ring-white/20 focus-visible:ring-2',
+      'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    ),
+  );
+
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: string) => void = () => {};
+  protected onTouched: () => void = () => {};
+
+  writeValue(value: string): void {
+    if (!value) {
+      this.localNumber.set('');
+      return;
+    }
+    // Parse: if value starts with a known dial code, split it
+    const country = getCountryByCode(this.selectedCountryCode());
+    const dialCode = country?.dialCode ?? '';
+    if (dialCode && value.startsWith(dialCode)) {
+      this.localNumber.set(value.slice(dialCode.length).trimStart());
+    } else if (value.startsWith('+')) {
+      // Try to find a matching dial code
+      const matched = this.findCountryByDialCode(value);
+      if (matched) {
+        this.selectedCountryCode.set(matched.code);
+        this.localNumber.set(value.slice(matched.dialCode.length).trimStart());
+      } else {
+        this.localNumber.set(value);
+      }
+    } else {
+      this.localNumber.set(value);
+    }
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._isDisabledFromCVA.set(isDisabled);
+  }
+
+  protected onCountryChange(country: Country): void {
+    this.selectedCountryCode.set(country.code);
+    this.emitValue();
+    this.onTouched();
+  }
+
+  protected onNumberInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.localNumber.set(target.value);
+    this.emitValue();
+  }
+
+  private emitValue(): void {
+    const country = getCountryByCode(this.selectedCountryCode());
+    const dialCode = country?.dialCode ?? '';
+    const number = this.localNumber().trim();
+    const fullValue = number ? `${dialCode} ${number}` : dialCode;
+    this.onChange(fullValue);
+  }
+
+  private findCountryByDialCode(phone: string): Country | undefined {
+    let best: Country | undefined;
+    let bestLen = 0;
+    for (const c of COUNTRIES) {
+      if (phone.startsWith(c.dialCode) && c.dialCode.length > bestLen) {
+        best = c;
+        bestLen = c.dialCode.length;
+      }
+    }
+    return best;
+  }
+}

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

@@ -8,7 +8,6 @@ import {
   inject,
   input,
   model,
-  output,
   signal,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -121,9 +120,6 @@ export type RadioGroupProps = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RadioGroup implements ControlValueAccessor {
-  /** Emitted when value changes */
-  readonly valueChange = output<string>();
-
   /** The current selected value */
   readonly value = model<string>('');
 
@@ -169,7 +165,6 @@ export class RadioGroup implements ControlValueAccessor {
         this.context.value.set(value);
         this.onChange(value);
         this.onTouched();
-        this.valueChange.emit(value);
       }
     },
     focusNext: (currentValue: string) => this.focusItem(currentValue, 1),

package/src/app/lib/components/ui/resizable/resizable-handle.component.ts

@@ -165,7 +165,7 @@ export class ResizableHandle {
       if (!this.isDragging()) return;
 
       const currentPosition = this.context.direction() === 'horizontal' ? e.clientX : e.clientY;
-      const delta = ((currentPosition - this.startPosition) / window.innerWidth) * 100;
+      const delta = ((currentPosition - this.startPosition) / (typeof window !== 'undefined' ? window.innerWidth : 1000)) * 100;
       this.context.onResize(delta);
       this.startPosition = currentPosition;
     };
@@ -194,7 +194,7 @@ export class ResizableHandle {
       const currentTouch = e.touches[0];
       const currentPosition =
         this.context.direction() === 'horizontal' ? currentTouch.clientX : currentTouch.clientY;
-      const delta = ((currentPosition - this.startPosition) / window.innerWidth) * 100;
+      const delta = ((currentPosition - this.startPosition) / (typeof window !== 'undefined' ? window.innerWidth : 1000)) * 100;
       this.context.onResize(delta);
       this.startPosition = currentPosition;
     };

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

@@ -10,7 +10,6 @@ import {
   inject,
   input,
   model,
-  output,
   signal,
 } from '@angular/core';
 import { SELECT_CONTEXT, type SelectContext } from './select-context';
@@ -168,11 +167,6 @@ export class Select {
     });
   }
 
-  /** Event handler called when the value changes */
-  readonly valueChange = output<string>();
-  /** Event handler called when the open state changes */
-  readonly openChange = output<boolean>();
-
   /** The controlled value of the select */
   readonly value = model<string>('');
   /** The controlled open state of the select */
@@ -211,7 +205,6 @@ export class Select {
     setOpen: (open: boolean) => {
       this._isOpen.set(open);
       this.open.set(open);
-      this.openChange.emit(open);
     },
     disabled: this._isDisabled,
     placeholder: signal(''),
@@ -225,7 +218,6 @@ export class Select {
     setValue: (value: string, label?: string) => {
       this._value.set(value);
       this.value.set(value);
-      this.valueChange.emit(value);
       if (label) {
         this.context.selectedLabel.set(label);
       }

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

@@ -139,7 +139,7 @@ export class SheetContent implements OnDestroy {
   }
 
   private lockBodyScroll(): void {
-    if (typeof document !== 'undefined') {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
       const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
       this.previousBodyOverflow = document.body.style.overflow;
       this.previousBodyPaddingRight = document.body.style.paddingRight;

package/src/app/lib/components/ui/sidebar/sidebar-provider.component.ts

@@ -10,7 +10,6 @@ import {
   HostListener,
   input,
   model,
-  output,
   signal,
 } from '@angular/core';
 import {
@@ -71,9 +70,6 @@ export class SidebarProvider {
     });
   }
 
-  /** Open state change event */
-  readonly openChange = output<boolean>();
-
   /** Controlled open state */
   readonly open = model<boolean>(true);
 
@@ -101,7 +97,6 @@ export class SidebarProvider {
       this.context.open.set(value);
       this.context.state.set(value ? 'expanded' : 'collapsed');
       this.open.set(value);
-      this.openChange.emit(value);
     },
     openMobile: signal(false),
     setOpenMobile: (value: boolean) => {