@cocoar/ui-components 0.1.0-beta.115 → 0.1.0-beta.118

package/fesm2022/cocoar-ui-components.mjs

@@ -7,6 +7,8 @@ import { shareReplay, catchError, finalize } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
 import { Maskito } from '@maskito/core';
 import { maskitoNumberOptionsGenerator, maskitoDateOptionsGenerator } from '@maskito/kit';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CoarLocalizationService, CoarLocalizationDataStore } from '@cocoar/localization';
 import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import { createOverlayBuilder } from '@cocoar/ui-overlay';
 import * as i1 from '@angular/common';
@@ -19,7 +21,6 @@ import 'prismjs/components/prism-scss';
 import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-markup';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Temporal } from '@js-temporal/polyfill';
 
 const COAR_ICON_SOURCE_ENTRY = new InjectionToken('COAR_ICON_SOURCE_ENTRY');
@@ -641,6 +642,8 @@ function transformStepperButtons(value) {
 }
 class CoarNumberInputComponent extends CoarControlValueAccessor {
     destroyRef = inject(DestroyRef);
+    localizationService = inject(CoarLocalizationService, { optional: true });
+    currentLanguage = toSignal(this.localizationService?.languageChanged$ ?? of(navigator.language));
     maskitoInstance;
     /** Label text displayed above the input */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -792,7 +795,7 @@ class CoarNumberInputComponent extends CoarControlValueAccessor {
             return format;
         }
         // Priority 2: Use Intl.NumberFormat to detect format for the locale
-        const locale = this.locale();
+        const locale = this.locale() ?? this.currentLanguage() ?? navigator.language;
         if (locale) {
             try {
                 const formatter = new Intl.NumberFormat(locale);
@@ -4029,7 +4032,11 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
     elementRef = inject(ElementRef);
     destroyRef = inject(DestroyRef);
     overlayBuilder = createOverlayBuilder();
+    localizationService = inject(CoarLocalizationService, { optional: true });
+    localizationDataStore = inject(CoarLocalizationDataStore, { optional: true });
     overlayRef = null;
+    /** Current language from localization service (reactive) */
+    currentLanguage = toSignal(this.localizationService?.languageChanged$ ?? of(navigator.language));
     // ============================================================
     // Inputs
     // ============================================================
@@ -4142,7 +4149,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
     // ============================================================
     /**
      * Effective date format configuration.
-     * Priority: input dateFormatConfig > browser Intl detection > fallback
+     * Priority: input dateFormatConfig > localization service > browser Intl detection > fallback
      */
     effectiveDateFormat = computed(() => {
         // 1. Direct config input takes highest priority
@@ -4150,8 +4157,19 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
         if (directConfig) {
             return directConfig;
         }
-        // 2. Detect from browser Intl (lightweight fallback)
-        const locale = this.locale() ?? navigator.language;
+        // 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)
+            : undefined;
+        if (localeData?.date) {
+            return {
+                pattern: localeData.date.pattern,
+                firstDayOfWeek: localeData.date.firstDayOfWeek === 0 ? 7 : 1, // Convert 0=Sunday to 7, keep 1=Monday
+            };
+        }
+        // 3. Fallback to Intl detection (for components without localization service)
+        const locale = this.effectiveLocale();
         try {
             const formatter = new Intl.DateTimeFormat(locale);
             const parts = formatter.formatToParts(new Date(2024, 0, 15));
@@ -4168,7 +4186,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
             return { pattern, firstDayOfWeek: 1 };
         }
         catch {
-            // 3. Fallback
+            // 4. Final fallback
             return { pattern: 'dd.mm.yyyy', firstDayOfWeek: 1 };
         }
     }, ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : []));
@@ -4191,10 +4209,10 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
     }, ...(ngDevMode ? [{ debugName: "inputPlaceholder" }] : []));
     /**
      * Effective locale for calendar month/year display.
-     * Priority: input locale > locale service default > browser locale
+     * Priority: input locale > locale service language > browser locale
      */
     effectiveLocale = computed(() => {
-        return this.locale() ?? navigator.language;
+        return this.locale() ?? this.currentLanguage() ?? navigator.language;
     }, ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : []));
     /** Whether the picker has an error state */
     hasError = computed(() => this.error(), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
@@ -4324,7 +4342,12 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
         this.calendarPosition.set(placement === 'top' ? 'top' : 'bottom');
         const ref = this.overlayBuilder
             .anchor({ kind: 'element', element: trigger })
-            .position({ placement, offset: 4, flip: false, shift: false })
+            .position({
+            placement: placement === 'top' ? 'top-end' : 'bottom-end',
+            offset: 4,
+            flip: false,
+            shift: false,
+        })
             .scroll({ strategy: 'reposition' })
             .dismiss({ outsideClick: true, escapeKey: true })
             .size({ mode: 'content' })