@cocoar/ui-components 0.1.0-beta.120 → 0.1.0-beta.125

package/fesm2022/cocoar-ui-components.mjs

@@ -643,7 +643,9 @@ function transformStepperButtons(value) {
 class CoarNumberInputComponent extends CoarControlValueAccessor {
     destroyRef = inject(DestroyRef);
     localizationService = inject(CoarLocalizationService, { optional: true });
-    currentLanguage = toSignal(this.localizationService?.languageChanged$ ?? of(navigator.language));
+    currentLanguage = toSignal(this.localizationService?.languageState.value$ ?? of(navigator.language), {
+        initialValue: this.localizationService?.languageState.value ?? navigator.language,
+    });
     maskitoInstance;
     /** Label text displayed above the input */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -841,9 +843,7 @@ class CoarNumberInputComponent extends CoarControlValueAccessor {
             return null;
         const format = this.resolveNumberFormat();
         // Remove thousand separators first (before converting decimal)
-        const withoutThousands = format.thousand
-            ? str.replace(new RegExp(`\\${format.thousand}`, 'g'), '')
-            : str;
+        const withoutThousands = format.thousand ? str.replace(new RegExp(`\\${format.thousand}`, 'g'), '') : str;
         // Replace locale-specific decimal separator with period for parseFloat
         const normalized = withoutThousands.replace(format.decimal, '.');
         const parsed = parseFloat(normalized);
@@ -4036,7 +4036,9 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
     localizationDataStore = inject(CoarLocalizationDataStore, { optional: true });
     overlayRef = null;
     /** Current language from localization service (reactive) */
-    currentLanguage = toSignal(this.localizationService?.languageChanged$ ?? of(navigator.language));
+    currentLanguage = toSignal(this.localizationService?.languageState.value$ ?? of(''), {
+        initialValue: this.localizationService?.languageState.value ?? '',
+    });
     // ============================================================
     // Inputs
     // ============================================================
@@ -4137,12 +4139,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
     /** Display value for the input field */
     displayValue = signal('', ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
     /** Days of week header (localized based on locale and firstDayOfWeek) */
-    daysOfWeek = computed(() => {
-        const locale = this.effectiveLocale();
-        const firstDay = this.firstDayOfWeek();
-        console.log('[CoarDatePicker] daysOfWeek computed - locale:', locale, 'firstDay:', firstDay);
-        return getLocalizedWeekdays(locale, firstDay);
-    }, ...(ngDevMode ? [{ debugName: "daysOfWeek" }] : []));
+    daysOfWeek = computed(() => getLocalizedWeekdays(this.effectiveLocale(), this.firstDayOfWeek()), ...(ngDevMode ? [{ debugName: "daysOfWeek" }] : []));
     /** Reference to the input element */
     inputRef = viewChild('dateInput', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
     /** Reference to the trigger element */
@@ -4163,9 +4160,9 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
             return directConfig;
         }
         // 2. Try to get from localization data store (which uses Intl with proper firstDayOfWeek detection)
-        const currentLang = this.localizationService?.getCurrentLanguage();
-        const localeData = currentLang
-            ? this.localizationDataStore?.getLocaleData(currentLang)
+        const storeLocale = this.locale() ?? this.currentLanguage();
+        const localeData = storeLocale
+            ? this.localizationDataStore?.getLocaleData(storeLocale)
             : undefined;
         if (localeData?.date) {
             return {
@@ -4217,12 +4214,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
      * Priority: input locale > locale service language > browser locale
      */
     effectiveLocale = computed(() => {
-        // Always re-evaluate navigator.language to ensure fresh browser locale
-        const localeInput = this.locale();
-        const currentLang = this.currentLanguage();
-        const effective = localeInput ?? currentLang ?? navigator.language;
-        console.log('[CoarDatePicker] effectiveLocale computed - input:', localeInput, 'currentLang:', currentLang, 'effective:', effective);
-        return effective;
+        return this.locale() ?? this.currentLanguage() ?? navigator.language;
     }, ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : []));
     /** Whether the picker has an error state */
     hasError = computed(() => this.error(), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
@@ -4276,9 +4268,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
     /** Month name for calendar header */
     viewMonth = computed(() => {
         const viewMonth = this.viewDate();
-        const locale = this.effectiveLocale();
-        console.log('[CoarDatePicker] viewMonth computed - locale:', locale, 'month:', viewMonth.month);
-        const formatter = new Intl.DateTimeFormat(locale, {
+        const formatter = new Intl.DateTimeFormat(this.effectiveLocale(), {
             month: 'long',
         });
         const jsDate = new Date(viewMonth.year, viewMonth.month - 1, 1);
@@ -4323,12 +4313,14 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
                 this.displayValue.set('');
             }
         });
-        // Initialize Maskito after render
-        afterNextRender(() => {
+        // Keep Maskito config in sync with date format + constraints.
+        effect(() => {
             const inputElement = this.inputRef()?.nativeElement;
-            if (inputElement) {
-                this.initializeMaskito(inputElement);
+            if (!inputElement) {
+                return;
             }
+            this.maskitoInstance?.destroy();
+            this.initializeMaskito(inputElement);
         });
         // Cleanup on destroy
         this.destroyRef.onDestroy(() => {