@ng-cn/core 1.0.18 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-cn/core",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "Beautifully designed Angular components built with Tailwind CSS v4 - The official Angular port of shadcn/ui",
   "keywords": [
     "angular",

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

@@ -119,7 +119,7 @@ export class AlertDialogContent {
   }
 
   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/calendar/calendar.component.ts

@@ -4,6 +4,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  ElementRef,
   inject,
   input,
   model,
@@ -51,6 +52,7 @@ import { buttonVariants } from '../button';
                 type="button"
                 [class]="navButtonClass()"
                 (click)="previousMonth()"
+                [disabled]="isPrevMonthDisabled()"
                 [attr.aria-label]="'Go to previous month, ' + getPreviousMonthLabel()"
               >
                 <lucide-icon [img]="ChevronLeftIcon" class="h-4 w-4" aria-hidden="true" />
@@ -59,6 +61,7 @@ import { buttonVariants } from '../button';
                 type="button"
                 [class]="navButtonClass()"
                 (click)="nextMonth()"
+                [disabled]="isNextMonthDisabled()"
                 [attr.aria-label]="'Go to next month, ' + getNextMonthLabel()"
               >
                 <lucide-icon [img]="ChevronRightIcon" class="h-4 w-4" aria-hidden="true" />
@@ -98,6 +101,7 @@ import { buttonVariants } from '../button';
                       <button
                         type="button"
                         [class]="getDayClass(day)"
+                        [attr.data-date]="day.date.getFullYear() + '-' + day.date.getMonth() + '-' + day.date.getDate()"
                         [attr.aria-label]="getDateLabel(day.date)"
                         [attr.aria-selected]="isSelected(day.date) ? 'true' : null"
                         [attr.aria-current]="isToday(day.date) ? 'date' : null"
@@ -138,12 +142,19 @@ export class Calendar {
   readonly showOutsideDays = input<boolean>(true);
   /** Disabled dates function */
   readonly disabled = input<((date: Date) => boolean) | undefined>(undefined);
+  /** Minimum selectable date — dates before this are disabled, navigation before this month is blocked */
+  readonly minDate = input<Date | undefined>(undefined);
+  /** Maximum selectable date — dates after this are disabled, navigation after this month is blocked */
+  readonly maxDate = input<Date | undefined>(undefined);
+  /** Locale for date formatting (e.g. 'en-US', 'fr-FR') */
+  readonly locale = input<string>('en-US');
   /** Accessible label for the calendar */
   readonly ariaLabel = input<string>('Calendar');
   /** Additional CSS classes */
   readonly class = input<string>('');
 
   private readonly _liveAnnouncer = inject(LiveAnnouncerService);
+  private readonly _elementRef = inject(ElementRef);
 
   protected readonly computedClass = computed(() => cn('w-full p-3', this.class()));
   protected readonly navButtonClass = computed(() =>
@@ -152,9 +163,25 @@ export class Calendar {
       'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-gray-100 dark:hover:bg-neutral-800',
     ),
   );
+  /** True when navigating to the previous month would go before minDate */
+  protected readonly isPrevMonthDisabled = computed(() => {
+    const min = this.minDate();
+    if (!min) return false;
+    const current = this.currentMonth();
+    const prevMonthEnd = new Date(current.getFullYear(), current.getMonth(), 0);
+    return prevMonthEnd < new Date(min.getFullYear(), min.getMonth(), 1);
+  });
+  /** True when navigating to the next month would go after maxDate */
+  protected readonly isNextMonthDisabled = computed(() => {
+    const max = this.maxDate();
+    if (!max) return false;
+    const current = this.currentMonth();
+    const nextMonthStart = new Date(current.getFullYear(), current.getMonth() + 1, 1);
+    return nextMonthStart > new Date(max.getFullYear(), max.getMonth() + 1, 0);
+  });
   protected readonly monthYear = computed(() => {
     const date = this.currentMonth();
-    return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+    return date.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });
   });
   protected readonly calendarWeeks = computed(() => {
     const date = this.currentMonth();
@@ -188,7 +215,12 @@ export class Calendar {
         const dayDate = new Date(current);
         const isOutside = dayDate.getMonth() !== month;
         const disabledFn = this.disabled();
-        const isDisabled = disabledFn ? disabledFn(dayDate) : false;
+        const min = this.minDate();
+        const max = this.maxDate();
+        const isDisabled =
+          (disabledFn ? disabledFn(dayDate) : false) ||
+          (min != null && this.isBeforeDay(dayDate, min)) ||
+          (max != null && this.isAfterDay(dayDate, max));
 
         week.push({
           date: dayDate,
@@ -228,7 +260,7 @@ export class Calendar {
       day: 'numeric',
       year: 'numeric',
     };
-    const label = date.toLocaleDateString('en-US', options);
+    const label = date.toLocaleDateString(this.locale(), options);
 
     if (this.isToday(date)) {
       return `${label}, today`;
@@ -246,13 +278,13 @@ export class Calendar {
   protected getPreviousMonthLabel(): string {
     const current = this.currentMonth();
     const prev = new Date(current.getFullYear(), current.getMonth() - 1, 1);
-    return prev.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+    return prev.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });
   }
   /** Get label for next month button */
   protected getNextMonthLabel(): string {
     const current = this.currentMonth();
     const next = new Date(current.getFullYear(), current.getMonth() + 1, 1);
-    return next.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+    return next.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });
   }
   /** Get tabindex for day button (roving tabindex) */
   protected getDayTabIndex(day: { date: Date; isOutside: boolean; disabled: boolean }): number {
@@ -302,13 +334,21 @@ export class Calendar {
       if (newDate.getMonth() !== this.currentMonth().getMonth()) {
         this.currentMonth.set(new Date(newDate.getFullYear(), newDate.getMonth(), 1));
       }
-      // Focus the new date after DOM update
-      setTimeout(() => {
-        const button = document.querySelector(
-          `[aria-label*="${newDate!.getDate()},"]`,
-        ) as HTMLElement;
-        button?.focus();
-      }, 0);
+      // Focus the new date after DOM update (browser only)
+      if (typeof document !== 'undefined') {
+        const targetDate = newDate;
+        setTimeout(() => {
+          const root: HTMLElement = this._elementRef.nativeElement;
+          const buttons = root.querySelectorAll<HTMLElement>('button[data-date]');
+          const targetStr = `${targetDate.getFullYear()}-${targetDate.getMonth()}-${targetDate.getDate()}`;
+          for (const btn of Array.from(buttons)) {
+            if (btn.dataset['date'] === targetStr) {
+              btn.focus();
+              break;
+            }
+          }
+        }, 0);
+      }
     }
   }
   protected getDayClass(day: { date: Date; isOutside: boolean; disabled: boolean }): string {
@@ -357,4 +397,17 @@ export class Calendar {
       date1.getDate() === date2.getDate()
     );
   }
+  private isBeforeDay(date: Date, ref: Date): boolean {
+    if (date.getFullYear() !== ref.getFullYear()) return date.getFullYear() < ref.getFullYear();
+    if (date.getMonth() !== ref.getMonth()) return date.getMonth() < ref.getMonth();
+    return date.getDate() < ref.getDate();
+  }
+  private isAfterDay(date: Date, ref: Date): boolean {
+    if (date.getFullYear() !== ref.getFullYear()) return date.getFullYear() > ref.getFullYear();
+    if (date.getMonth() !== ref.getMonth()) return date.getMonth() > ref.getMonth();
+    return date.getDate() > ref.getDate();
+  }
+
+  // TODO: range and multiple modes - requires multi-select state
 }
+

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

@@ -115,6 +115,7 @@ export class ContextMenuContent implements OnDestroy {
   }
 
   private clampPosition(): void {
+    if (typeof window === 'undefined') return;
     const menu = this._elementRef.nativeElement.querySelector('[role="menu"]') as HTMLElement;
     if (!menu) return;
     const pos = this.context.position();

package/src/app/lib/components/ui/country-selector/country-data.ts

@@ -0,0 +1,63 @@
+export interface Country {
+  code: string;     // ISO 2-letter code: "US", "GB", "JP"
+  name: string;     // "United States", "United Kingdom"
+  dialCode: string; // "+1", "+44", "+81"
+  flag: string;     // emoji flag: "🇺🇸", "🇬🇧"
+}
+
+export const COUNTRIES: Country[] = [
+  { code: 'US', name: 'United States',        dialCode: '+1',   flag: '🇺🇸' },
+  { code: 'GB', name: 'United Kingdom',       dialCode: '+44',  flag: '🇬🇧' },
+  { code: 'CA', name: 'Canada',               dialCode: '+1',   flag: '🇨🇦' },
+  { code: 'AU', name: 'Australia',            dialCode: '+61',  flag: '🇦🇺' },
+  { code: 'NZ', name: 'New Zealand',          dialCode: '+64',  flag: '🇳🇿' },
+  { code: 'DE', name: 'Germany',              dialCode: '+49',  flag: '🇩🇪' },
+  { code: 'FR', name: 'France',               dialCode: '+33',  flag: '🇫🇷' },
+  { code: 'ES', name: 'Spain',                dialCode: '+34',  flag: '🇪🇸' },
+  { code: 'IT', name: 'Italy',                dialCode: '+39',  flag: '🇮🇹' },
+  { code: 'PT', name: 'Portugal',             dialCode: '+351', flag: '🇵🇹' },
+  { code: 'NL', name: 'Netherlands',          dialCode: '+31',  flag: '🇳🇱' },
+  { code: 'BE', name: 'Belgium',              dialCode: '+32',  flag: '🇧🇪' },
+  { code: 'SE', name: 'Sweden',               dialCode: '+46',  flag: '🇸🇪' },
+  { code: 'NO', name: 'Norway',               dialCode: '+47',  flag: '🇳🇴' },
+  { code: 'DK', name: 'Denmark',              dialCode: '+45',  flag: '🇩🇰' },
+  { code: 'FI', name: 'Finland',              dialCode: '+358', flag: '🇫🇮' },
+  { code: 'CH', name: 'Switzerland',          dialCode: '+41',  flag: '🇨🇭' },
+  { code: 'AT', name: 'Austria',              dialCode: '+43',  flag: '🇦🇹' },
+  { code: 'PL', name: 'Poland',               dialCode: '+48',  flag: '🇵🇱' },
+  { code: 'CZ', name: 'Czech Republic',       dialCode: '+420', flag: '🇨🇿' },
+  { code: 'HU', name: 'Hungary',              dialCode: '+36',  flag: '🇭🇺' },
+  { code: 'RO', name: 'Romania',              dialCode: '+40',  flag: '🇷🇴' },
+  { code: 'GR', name: 'Greece',               dialCode: '+30',  flag: '🇬🇷' },
+  { code: 'JP', name: 'Japan',                dialCode: '+81',  flag: '🇯🇵' },
+  { code: 'CN', name: 'China',                dialCode: '+86',  flag: '🇨🇳' },
+  { code: 'KR', name: 'South Korea',          dialCode: '+82',  flag: '🇰🇷' },
+  { code: 'IN', name: 'India',                dialCode: '+91',  flag: '🇮🇳' },
+  { code: 'PK', name: 'Pakistan',             dialCode: '+92',  flag: '🇵🇰' },
+  { code: 'BD', name: 'Bangladesh',           dialCode: '+880', flag: '🇧🇩' },
+  { code: 'NG', name: 'Nigeria',              dialCode: '+234', flag: '🇳🇬' },
+  { code: 'ZA', name: 'South Africa',         dialCode: '+27',  flag: '🇿🇦' },
+  { code: 'EG', name: 'Egypt',                dialCode: '+20',  flag: '🇪🇬' },
+  { code: 'SA', name: 'Saudi Arabia',         dialCode: '+966', flag: '🇸🇦' },
+  { code: 'AE', name: 'United Arab Emirates', dialCode: '+971', flag: '🇦🇪' },
+  { code: 'TR', name: 'Turkey',               dialCode: '+90',  flag: '🇹🇷' },
+  { code: 'MX', name: 'Mexico',               dialCode: '+52',  flag: '🇲🇽' },
+  { code: 'BR', name: 'Brazil',               dialCode: '+55',  flag: '🇧🇷' },
+  { code: 'AR', name: 'Argentina',            dialCode: '+54',  flag: '🇦🇷' },
+  { code: 'CO', name: 'Colombia',             dialCode: '+57',  flag: '🇨🇴' },
+  { code: 'CL', name: 'Chile',                dialCode: '+56',  flag: '🇨🇱' },
+  { code: 'PE', name: 'Peru',                 dialCode: '+51',  flag: '🇵🇪' },
+  { code: 'VE', name: 'Venezuela',            dialCode: '+58',  flag: '🇻🇪' },
+  { code: 'ID', name: 'Indonesia',            dialCode: '+62',  flag: '🇮🇩' },
+  { code: 'PH', name: 'Philippines',          dialCode: '+63',  flag: '🇵🇭' },
+  { code: 'TH', name: 'Thailand',             dialCode: '+66',  flag: '🇹🇭' },
+  { code: 'VN', name: 'Vietnam',              dialCode: '+84',  flag: '🇻🇳' },
+  { code: 'MY', name: 'Malaysia',             dialCode: '+60',  flag: '🇲🇾' },
+  { code: 'SG', name: 'Singapore',            dialCode: '+65',  flag: '🇸🇬' },
+  { code: 'HK', name: 'Hong Kong',            dialCode: '+852', flag: '🇭🇰' },
+  { code: 'TW', name: 'Taiwan',               dialCode: '+886', flag: '🇹🇼' },
+];
+
+export function getCountryByCode(code: string): Country | undefined {
+  return COUNTRIES.find((c) => c.code === code);
+}

package/src/app/lib/components/ui/country-selector/country-selector.component.ts

@@ -0,0 +1,199 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Command } from '../command/command.component';
+import { CommandEmpty } from '../command/command-empty.component';
+import { CommandInput } from '../command/command-input.component';
+import { CommandItem } from '../command/command-item.component';
+import { CommandList } from '../command/command-list.component';
+import { Popover } from '../popover/popover.component';
+import { PopoverContent } from '../popover/popover-content.component';
+import { PopoverTrigger } from '../popover/popover-trigger.component';
+import { COUNTRIES, type Country, getCountryByCode } from './country-data';
+
+/**
+ * CountrySelector component
+ *
+ * A searchable country dropdown that integrates with Angular Forms via ControlValueAccessor.
+ * The value is the ISO 2-letter country code (e.g. "US").
+ *
+ * @example
+ * ```html
+ * <CountrySelector [(ngModel)]="countryCode" />
+ * <CountrySelector [value]="'US'" (countryChange)="onCountryChange($event)" />
+ * ```
+ */
+@Component({
+  selector: 'CountrySelector',
+  imports: [Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandItem, CommandEmpty],
+  template: `
+    <Popover>
+      <PopoverTrigger>
+        <button
+          type="button"
+          [disabled]="isDisabled()"
+          [class]="triggerClass()"
+          [attr.aria-label]="selectedCountry() ? selectedCountry()!.name : placeholder()"
+        >
+          @if (selectedCountry()) {
+            <span class="text-base leading-none">{{ selectedCountry()!.flag }}</span>
+            <span class="truncate">{{ selectedCountry()!.name }}</span>
+          } @else {
+            <span class="text-muted-foreground truncate">{{ placeholder() }}</span>
+          }
+          <svg
+            class="ml-auto h-4 w-4 shrink-0 opacity-50"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="m7 15 5 5 5-5" />
+            <path d="m7 9 5-5 5 5" />
+          </svg>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent [matchTriggerWidth]="true" class="p-0">
+        <Command>
+          <CommandInput placeholder="Search country..." />
+          <CommandEmpty>No country found.</CommandEmpty>
+          <CommandList>
+            @for (country of countries; track country.code) {
+              <CommandItem
+                [value]="country.name"
+                [keywords]="[country.code, country.dialCode]"
+                (onSelect)="selectCountry(country)"
+                [class]="country.code === selectedCode() ? 'bg-accent text-accent-foreground' : ''"
+              >
+                <span class="text-base leading-none mr-2">{{ country.flag }}</span>
+                <span class="flex-1">{{ country.name }}</span>
+                <span class="text-muted-foreground text-xs ml-auto">{{ country.dialCode }}</span>
+                @if (country.code === selectedCode()) {
+                  <svg
+                    class="ml-2 h-4 w-4 shrink-0"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                }
+              </CommandItem>
+            }
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  `,
+  host: {
+    'attr.data-slot': '"country-selector"',
+    '[class]': 'hostClass()',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CountrySelector),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CountrySelector implements ControlValueAccessor {
+  /** Placeholder text shown when no country is selected */
+  readonly placeholder = input<string>('Select country');
+  /** Whether the selector is disabled */
+  readonly disabled = input<boolean>(false);
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+  /**
+   * Direct value binding (ISO 2-letter country code).
+   * Takes precedence when set — syncs to internal state.
+   */
+  readonly value = input<string>('');
+
+  /** Emits the full Country object when selection changes */
+  readonly countryChange = output<Country>();
+
+  /** All available countries */
+  protected readonly countries = COUNTRIES;
+
+  /** Internal selected country code */
+  protected readonly selectedCode = signal<string>('');
+  /** Internal disabled state (from CVA) */
+  private readonly _isDisabledFromCVA = signal<boolean>(false);
+
+  constructor() {
+    // Sync the value input to internal signal
+    effect(() => {
+      const v = this.value();
+      if (v) {
+        this.selectedCode.set(v);
+      }
+    });
+  }
+
+  protected readonly isDisabled = computed(() => this.disabled() || this._isDisabledFromCVA());
+
+  protected readonly selectedCountry = computed(() => {
+    const code = this.selectedCode();
+    return code ? getCountryByCode(code) : undefined;
+  });
+
+  protected readonly hostClass = computed(() => cn('block', this.class()));
+
+  protected readonly triggerClass = computed(() =>
+    cn(
+      'flex h-10 w-full items-center gap-2 rounded-xl border px-3 py-2 text-sm text-left',
+      'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-300 dark:border-zinc-700/50',
+      'text-zinc-900 dark:text-zinc-50',
+      '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 = () => {};
+  private onTouched: () => void = () => {};
+
+  writeValue(value: string): void {
+    this.selectedCode.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 selectCountry(country: Country): void {
+    this.selectedCode.set(country.code);
+    this.onChange(country.code);
+    this.onTouched();
+    this.countryChange.emit(country);
+  }
+}

package/src/app/lib/components/ui/country-selector/index.ts

@@ -0,0 +1,2 @@
+export { CountrySelector } from './country-selector.component';
+export { COUNTRIES, getCountryByCode, type Country } from './country-data';

package/src/app/lib/components/ui/date-picker/date-picker.component.ts

@@ -3,11 +3,14 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  forwardRef,
   input,
   model,
   output,
+  signal,
   viewChild,
 } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CalendarIcon, LucideAngularModule } from 'lucide-angular';
 import { buttonVariants } from '../button';
 import { Calendar } from '../calendar';
@@ -16,6 +19,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 /**
  * DatePicker component - date selection with calendar popover.
  * Matches shadcn/ui React DatePicker exactly.
+ * Implements ControlValueAccessor for Angular Forms integration.
  */
 @Component({
   selector: 'DatePicker',
@@ -38,6 +42,9 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
           [selected]="date()"
           (onSelect)="onDateSelect($event)"
           [disabled]="disabledDates()"
+          [minDate]="minDate()"
+          [maxDate]="maxDate()"
+          [locale]="locale()"
           class="w-full"
         />
       </PopoverContent>
@@ -47,25 +54,43 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
     'attr.data-slot': '"date-picker"',
     class: 'contents',
   },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DatePicker),
+      multi: true,
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DatePicker {
+export class DatePicker implements ControlValueAccessor {
   private readonly popover = viewChild(Popover);
 
   /** Date select event */
   readonly onSelect = output<Date | undefined>();
 
-  /** Selected date */
+  /** Selected date (model input for two-way binding) */
   readonly date = model<Date | undefined>(undefined);
 
   /** Additional CSS classes */
   readonly class = input<string>('');
   /** Placeholder text */
   readonly placeholder = input<string>('Pick a date');
-  /** Date format */
-  readonly dateFormat = input<string>('PPP');
   /** Disabled dates function */
   readonly disabledDates = input<((date: Date) => boolean) | undefined>(undefined);
+  /** Minimum selectable date — passed to Calendar */
+  readonly minDate = input<Date | undefined>(undefined);
+  /** Maximum selectable date — passed to Calendar */
+  readonly maxDate = input<Date | undefined>(undefined);
+  /** Locale used for date formatting (e.g. 'en-US', 'fr-FR') */
+  readonly locale = input<string>('en-US');
+
+  /** Internal disabled state set by ControlValueAccessor */
+  protected readonly isDisabled = signal<boolean>(false);
+
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: Date | undefined) => void = () => {};
+  private onTouched: () => void = () => {};
 
   protected readonly computedButtonClass = computed(() =>
     cn(
@@ -74,6 +99,7 @@ export class DatePicker {
       this.popover()?.isOpen() &&
         'border-primary/30 ring-primary/20 ring-2 dark:border-white/30 dark:ring-white/20',
       !this.date() && 'text-muted-foreground',
+      this.isDisabled() && 'pointer-events-none cursor-not-allowed opacity-50',
       this.class(),
     ),
   );
@@ -81,7 +107,7 @@ export class DatePicker {
   protected readonly CalendarIconRef = CalendarIcon;
 
   protected formatDate(date: Date): string {
-    return date.toLocaleDateString('en-US', {
+    return date.toLocaleDateString(this.locale(), {
       year: 'numeric',
       month: 'long',
       day: 'numeric',
@@ -90,6 +116,22 @@ export class DatePicker {
   protected onDateSelect(date: Date | undefined): void {
     this.date.set(date);
     this.onSelect.emit(date);
+    this.onChange(date);
+    this.onTouched();
     this.popover()?.setOpen(false);
   }
+
+  // ControlValueAccessor implementation
+  writeValue(value: Date | undefined): void {
+    this.date.set(value ?? undefined);
+  }
+  registerOnChange(fn: (value: Date | undefined) => void): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled.set(isDisabled);
+  }
 }

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

@@ -155,7 +155,7 @@ export class DialogContent {
   }
 
   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/dropdown-menu/dropdown-menu-content.component.ts

@@ -55,29 +55,31 @@ export class DropdownMenuContent implements OnDestroy {
     effect(() => {
       if (this.context.open()) {
         if (this.strategy() === 'fixed') {
-          const trigger = this.context.triggerElement();
-          if (trigger) {
-            const rect = trigger.getBoundingClientRect();
-            const side = this.side();
-            const offset = this.sideOffset();
-            let top = rect.top;
-            let left = rect.left;
+          if (typeof window !== 'undefined') {
+            const trigger = this.context.triggerElement();
+            if (trigger) {
+              const rect = trigger.getBoundingClientRect();
+              const side = this.side();
+              const offset = this.sideOffset();
+              let top = rect.top;
+              let left = rect.left;
 
-            if (side === 'bottom') {
-              top = rect.bottom + offset;
-              left = rect.left;
-            } else if (side === 'top') {
-              top = rect.top - offset;
-              left = rect.left;
-            } else if (side === 'right') {
-              top = rect.top;
-              left = rect.right + offset;
-            } else if (side === 'left') {
-              top = rect.top;
-              left = rect.left - offset;
-            }
+              if (side === 'bottom') {
+                top = rect.bottom + offset;
+                left = rect.left;
+              } else if (side === 'top') {
+                top = rect.top - offset;
+                left = rect.left;
+              } else if (side === 'right') {
+                top = rect.top;
+                left = rect.right + offset;
+              } else if (side === 'left') {
+                top = rect.top;
+                left = rect.left - offset;
+              }
 
-            this.fixedPos.set({ top, left });
+              this.fixedPos.set({ top, left });
+            }
           }
         } else {
           this.fixedPos.set(null);