@cocoar/ui-components 0.1.0-beta.119 → 0.1.0-beta.122

package/fesm2022/cocoar-ui-components.mjs

@@ -4036,7 +4036,12 @@ 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 = computed(() => {
+        // Use the language Signal from service if available, otherwise undefined
+        const lang = this.localizationService?.language();
+        console.debug('[CoarDatePicker] currentLanguage computed:', lang);
+        return lang;
+    }, ...(ngDevMode ? [{ debugName: "currentLanguage" }] : []));
     // ============================================================
     // Inputs
     // ============================================================
@@ -4137,7 +4142,13 @@ 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(() => getLocalizedWeekdays(this.effectiveLocale(), this.firstDayOfWeek()), ...(ngDevMode ? [{ debugName: "daysOfWeek" }] : []));
+    daysOfWeek = computed(() => {
+        const locale = this.effectiveLocale();
+        const firstDay = this.firstDayOfWeek();
+        const days = getLocalizedWeekdays(locale, firstDay);
+        console.debug('[CoarDatePicker] daysOfWeek - locale:', locale, 'firstDay:', firstDay, 'days:', days);
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "daysOfWeek" }] : []));
     /** Reference to the input element */
     inputRef = viewChild('dateInput', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
     /** Reference to the trigger element */
@@ -4212,7 +4223,11 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
      * Priority: input locale > locale service language > browser locale
      */
     effectiveLocale = computed(() => {
-        return this.locale() ?? this.currentLanguage() ?? navigator.language;
+        const localeInput = this.locale();
+        const currentLang = this.currentLanguage();
+        const effective = localeInput ?? currentLang ?? navigator.language;
+        console.debug('[CoarDatePicker] effectiveLocale - input:', localeInput, 'currentLang:', currentLang, 'effective:', effective);
+        return effective;
     }, ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : []));
     /** Whether the picker has an error state */
     hasError = computed(() => this.error(), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
@@ -4266,11 +4281,14 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
     /** Month name for calendar header */
     viewMonth = computed(() => {
         const viewMonth = this.viewDate();
-        const formatter = new Intl.DateTimeFormat(this.effectiveLocale(), {
+        const locale = this.effectiveLocale();
+        const formatter = new Intl.DateTimeFormat(locale, {
             month: 'long',
         });
         const jsDate = new Date(viewMonth.year, viewMonth.month - 1, 1);
-        return formatter.format(jsDate);
+        const monthName = formatter.format(jsDate);
+        console.debug('[CoarDatePicker] viewMonth - locale:', locale, 'month:', viewMonth.month, 'name:', monthName);
+        return monthName;
     }, ...(ngDevMode ? [{ debugName: "viewMonth" }] : []));
     /** Year for calendar header */
     viewYear = computed(() => {