@cocoar/localization 0.1.0-beta.126 → 0.1.0-beta.151

package/fesm2022/cocoar-localization.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, InjectionToken, inject, computed, DestroyRef, makeEnvironmentProviders, APP_INITIALIZER, Pipe, ChangeDetectorRef } from '@angular/core';
-import { of, tap, switchMap, catchError, BehaviorSubject, lastValueFrom, map, distinctUntilChanged } from 'rxjs';
+import { signal, computed, Injectable, InjectionToken, inject, DestroyRef, makeEnvironmentProviders, APP_INITIALIZER, Pipe, ChangeDetectorRef } from '@angular/core';
+import { of, switchMap, tap, catchError, forkJoin, combineLatest, BehaviorSubject, Subject, lastValueFrom, map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
 import { ReadonlyState, BehaviorSubjectProxy } from '@cocoar/ts-utils';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { HttpClient } from '@angular/common/http';
+import { map, distinctUntilChanged } from 'rxjs/operators';
 import { Temporal } from '@js-temporal/polyfill';
 
 /**
@@ -12,6 +13,14 @@ import { Temporal } from '@js-temporal/polyfill';
  */
 class CoarLocalizationDataStore {
     store = signal(new Map(), ...(ngDevMode ? [{ debugName: "store" }] : []));
+    /**
+     * Reactive signal that changes whenever any locale data is updated.
+     * Use this in computed() to ensure reactivity to data loading.
+     */
+    dataVersion = computed(() => {
+        // Reading store() creates the signal dependency
+        return this.store().size;
+    }, ...(ngDevMode ? [{ debugName: "dataVersion" }] : []));
     /**
      * Set locale data for a specific locale.
      * @param locale Locale code (e.g., 'en', 'de', 'en-US')
@@ -370,6 +379,12 @@ function coarInterpolate(template, params) {
     });
 }
 
+/**
+ * Injection token for translation loaders (multi-provider).
+ * Loaders are executed in order and results are deep-merged.
+ * Intl loader is always first (provides common defaults from browser Intl API).
+ */
+const COAR_TRANSLATION_LOADERS = new InjectionToken('COAR_TRANSLATION_LOADERS');
 /**
  * Abstract loader for translation data.
  *
@@ -697,11 +712,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class CoarI18nService {
     locale = inject(CoarLocalizationService);
     store = inject(CoarTranslationStore);
-    loader = inject(CoarTranslationLoader, { optional: true });
+    loaders = inject(COAR_TRANSLATION_LOADERS, { optional: true }) ?? [];
     destroyRef = inject(DestroyRef);
     constructor() {
-        // Auto-load translations when language changes.
-        // Observable-first so there is a single canonical dataflow.
+        // Coordination: Wait for pending language changes, load translations, then resolve
+        // This ensures translations are ready BEFORE the language state changes
+        this.locale.pendingLanguageChange$
+            .pipe(takeUntilDestroyed(this.destroyRef), switchMap(({ language, resolve }) => {
+            // Load translations if not already loaded
+            if (this.store.hasLanguage(language)) {
+                resolve(); // Already loaded, resolve immediately
+                return of(void 0);
+            }
+            // Load and then resolve
+            return this.loadLanguage(language).pipe(tap(() => resolve()) // Signal that translations are ready
+            );
+        }))
+            .subscribe();
+        // Fallback: Auto-load translations when language changes without coordination
+        // (for backwards compatibility if someone directly mutates the subject)
         this.locale.languageState.value$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((lang) => {
             if (this.store.hasLanguage(lang)) {
                 return;
@@ -729,29 +758,56 @@ class CoarI18nService {
         return coarInterpolate(value, params);
     }
     /**
-     * Loads translations for a specific language.
+     * Loads translations from all sources and deep-merges them.
      *
-     * Called automatically when language changes via effect.
-     * Can also be called manually to preload languages.
+     * Sources are executed in order:
+     * 1. Intl (always first, provides common translations from browser APIs)
+     * 2. HTTP (if configured, merges application-specific overrides)
+     * 3. Custom sources (if provided, can add dynamic updates)
+     *
+     * Later sources override earlier sources at the key level.
      *
      * @param language - Language code to load
      * @returns Observable that completes when loading finishes
      */
     loadLanguage(language) {
-        // No loader configured - mark as loaded with empty translations
-        if (!this.loader) {
+        // No loaders configured - mark as loaded with empty translations
+        if (this.loaders.length === 0) {
             this.store.setTranslations(language, {});
             return of(void 0);
         }
-        return this.loader.loadTranslations(language).pipe(tap((translations) => {
-            this.store.setTranslations(language, translations);
+        // Load from all sources in parallel
+        const loadObservables = this.loaders.map((loader) => loader.loadTranslations(language).pipe(catchError((err) => {
+            console.warn(`[CoarI18n] Translation loader failed for '${language}':`, err);
+            return of(null); // Return null for failed sources
+        })));
+        return forkJoin(loadObservables).pipe(tap((results) => {
+            // Deep merge all sources (nulls are ignored)
+            const merged = this.mergeTranslations(results.filter((r) => r !== null));
+            this.store.setTranslations(language, merged);
         }), switchMap(() => of(void 0)), catchError((error) => {
-            console.error(`Failed to load translations for language: ${language}`, error);
+            console.error(`[CoarI18n] Failed to load translations for '${language}':`, error);
             // Store empty translations to prevent repeated load attempts
             this.store.setTranslations(language, {});
             return of(void 0);
         }));
     }
+    /**
+     * Merges multiple translation sources.
+     * Later sources override earlier sources at the key level.
+     */
+    mergeTranslations(sources) {
+        const result = {};
+        for (const source of sources) {
+            if (!source)
+                continue;
+            // Merge all keys from this source
+            for (const [key, value] of Object.entries(source)) {
+                result[key] = value;
+            }
+        }
+        return result;
+    }
     /**
      * Preloads translations for a specific language.
      *
@@ -776,6 +832,212 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
+/**
+ * Translation loader that generates common translations from browser's Intl API.
+ *
+ * This loader provides default translations for common UI elements that can be
+ * automatically localized using browser APIs, without requiring JSON files.
+ *
+ * Translations generated:
+ * - Relative time labels (today, yesterday, tomorrow)
+ * - Month names (full and abbreviated)
+ * - Weekday names (full and abbreviated)
+ * - Common date/time units
+ *
+ * These translations can be overridden by registering additional loaders
+ * (e.g., HTTP loader) that provide custom values.
+ *
+ * @example
+ * ```ts
+ * // Automatic registration via provideCoarLocalization()
+ * provideCoarLocalization({ defaultLanguage: 'en' })
+ *
+ * // Intl loader provides: { 'common.today': 'today' }
+ * // HTTP loader can override: { 'common.today': 'Now' }
+ * ```
+ */
+class CoarIntlTranslationLoader extends CoarTranslationLoader {
+    loadTranslations(locale) {
+        return of(this.generateFromIntl(locale));
+    }
+    /**
+     * Generate translations from browser Intl API.
+     */
+    generateFromIntl(locale) {
+        const translations = {};
+        // Relative time labels (for date pickers, calendars, etc.)
+        try {
+            const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+            translations['common.today'] = rtf.format(0, 'day');
+            translations['common.yesterday'] = rtf.format(-1, 'day');
+            translations['common.tomorrow'] = rtf.format(1, 'day');
+        }
+        catch {
+            // Fallback for older browsers without RelativeTimeFormat
+            translations['common.today'] = 'today';
+            translations['common.yesterday'] = 'yesterday';
+            translations['common.tomorrow'] = 'tomorrow';
+        }
+        // Month names (full)
+        const monthFormatter = new Intl.DateTimeFormat(locale, { month: 'long' });
+        for (let m = 0; m < 12; m++) {
+            const date = new Date(2024, m, 1);
+            const monthName = monthFormatter.format(date);
+            translations[`common.month.${m + 1}`] = monthName;
+        }
+        // Month names (abbreviated)
+        const monthFormatterShort = new Intl.DateTimeFormat(locale, { month: 'short' });
+        for (let m = 0; m < 12; m++) {
+            const date = new Date(2024, m, 1);
+            const monthName = monthFormatterShort.format(date);
+            translations[`common.month.short.${m + 1}`] = monthName;
+        }
+        // Weekday names (full) - Monday=1, Sunday=7
+        const dayFormatter = new Intl.DateTimeFormat(locale, { weekday: 'long' });
+        for (let d = 0; d < 7; d++) {
+            // Jan 1, 2024 is Monday
+            const date = new Date(2024, 0, 1 + d);
+            const dayName = dayFormatter.format(date);
+            translations[`common.weekday.${d + 1}`] = dayName;
+        }
+        // Weekday names (abbreviated)
+        const dayFormatterShort = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+        for (let d = 0; d < 7; d++) {
+            const date = new Date(2024, 0, 1 + d);
+            const dayName = dayFormatterShort.format(date);
+            translations[`common.weekday.short.${d + 1}`] = dayName;
+        }
+        return translations;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIntlTranslationLoader, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIntlTranslationLoader });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIntlTranslationLoader, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Built-in timezone provider using browser's Intl API.
+ *
+ * Always present as guaranteed baseline fallback.
+ * Returns the user's operating system timezone.
+ *
+ * Note: This is a one-time snapshot. If user changes OS timezone
+ * while app is running, this will not update (browser limitation).
+ *
+ * @internal
+ */
+class BrowserTimeZoneProvider {
+    timeZone$;
+    constructor() {
+        // Detect browser timezone using Intl API
+        // This is a one-time snapshot (browser doesn't provide reactive updates)
+        const browserTimeZone = this.detectBrowserTimeZone();
+        this.timeZone$ = of(browserTimeZone);
+    }
+    detectBrowserTimeZone() {
+        try {
+            // Use Intl API to get user's timezone
+            // Example return values: "America/New_York", "Europe/Paris", "Asia/Tokyo"
+            const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            // Fallback to UTC if browser returns undefined (shouldn't happen in modern browsers)
+            return timeZone || 'UTC';
+        }
+        catch {
+            // Fallback to UTC if Intl API fails
+            return 'UTC';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BrowserTimeZoneProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BrowserTimeZoneProvider });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BrowserTimeZoneProvider, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Injection token for custom timezone providers (multi-provider).
+ *
+ * Providers are resolved in array order (first to last).
+ * First non-null value wins.
+ *
+ * Browser provider is always present as guaranteed baseline (automatically added).
+ *
+ * @internal
+ */
+const COAR_TIMEZONE_PROVIDERS = new InjectionToken('COAR_TIMEZONE_PROVIDERS');
+
+/**
+ * Service for timezone resolution with pluggable provider hierarchy.
+ *
+ * Resolution order:
+ * 1. Custom providers (from config, in array order)
+ * 2. Browser provider (Intl API, always present as guaranteed baseline)
+ * 3. UTC safety net (if all providers return null)
+ *
+ * First non-null value wins. Changes propagate reactively.
+ *
+ * @example
+ * ```ts
+ * // In component
+ * export class MyComponent {
+ *   private timeZoneService = inject(CoarTimeZoneService);
+ *
+ *   // Reactive signal (updates when timezone changes)
+ *   currentTimeZone = this.timeZoneService.currentTimeZone;
+ *
+ *   // Observable stream
+ *   timeZone$ = this.timeZoneService.timeZone$;
+ * }
+ * ```
+ */
+class CoarTimeZoneService {
+    browserProvider = inject(BrowserTimeZoneProvider);
+    customProviders = inject(COAR_TIMEZONE_PROVIDERS, { optional: true }) ?? [];
+    /**
+     * Observable stream of the current timezone (IANA identifier).
+     *
+     * Emits when any provider in the hierarchy changes.
+     * Uses `distinctUntilChanged()` to prevent unnecessary emissions.
+     *
+     * Resolution order: Custom providers → Browser → UTC
+     */
+    timeZone$;
+    /**
+     * Signal of the current timezone (IANA identifier).
+     *
+     * Automatically updates when timezone changes.
+     * Use this in templates or reactive contexts.
+     */
+    currentTimeZone;
+    constructor() {
+        // Build provider chain: Custom providers → Browser (always last)
+        const allProviders = [
+            ...this.customProviders,
+            this.browserProvider, // Browser is guaranteed baseline, always present
+        ];
+        // Combine all provider streams
+        const providerStreams = allProviders.map((provider) => provider.timeZone$);
+        this.timeZone$ = combineLatest(providerStreams).pipe(
+        // Find first non-null value in priority order
+        map((timeZones) => {
+            const resolved = timeZones.find((tz) => tz !== null);
+            // UTC as safety net if all providers return null (shouldn't happen)
+            return resolved ?? 'UTC';
+        }), 
+        // Prevent unnecessary emissions when value doesn't actually change
+        distinctUntilChanged());
+        // Initialize signal after timeZone$ is set up
+        this.currentTimeZone = toSignal(this.timeZone$, { requireSync: true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTimeZoneService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTimeZoneService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTimeZoneService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /**
  * Injection token for locale configuration.
  */
@@ -824,6 +1086,16 @@ function provideCoarLocalization(config) {
         },
         CoarLocalizationService,
         CoarLocalizationDataStore,
+        // TimeZone: Provide the timezone service
+        CoarTimeZoneService,
+        // TimeZone: Browser provider (always present as guaranteed baseline)
+        BrowserTimeZoneProvider,
+        // TimeZone: Register custom providers from config (if any)
+        ...(config.timeZoneProviders?.map((provider) => ({
+            provide: COAR_TIMEZONE_PROVIDERS,
+            multi: true,
+            useValue: provider,
+        })) ?? []),
         // L10n: Auto-include Intl source as first loader (provides complete defaults)
         {
             provide: COAR_LOCALIZATION_DATA_LOADERS,
@@ -835,6 +1107,12 @@ function provideCoarLocalization(config) {
             provide: COAR_I18N_PROVIDER,
             useClass: CoarI18nService,
         },
+        // i18n: Auto-include Intl source as first translation loader (provides common defaults)
+        {
+            provide: COAR_TRANSLATION_LOADERS,
+            multi: true,
+            useClass: CoarIntlTranslationLoader,
+        },
         // APP_INITIALIZER: Preload default language (L10n + i18n if loader registered)
         {
             provide: APP_INITIALIZER,
@@ -955,6 +1233,12 @@ class CoarLocalizationService {
     localeDataLoaders = inject(COAR_LOCALIZATION_DATA_LOADERS, { optional: true }) ?? [];
     defaultLanguage = this.config?.defaultLanguage ?? 'en';
     languageSubject = new BehaviorSubject(this.defaultLanguage);
+    /**
+     * Subject for coordinating language changes with i18n service.
+     * The i18n service subscribes to this to load translations BEFORE the language change is emitted.
+     * @internal
+     */
+    pendingLanguageChange$ = new Subject();
     /**
      * Canonical language state.
      *
@@ -965,9 +1249,13 @@ class CoarLocalizationService {
     constructor() {
         // Expose to window for debugging
         if (typeof window !== 'undefined') {
-            window.__coarLocalizationStore =
-                this.localeDataStore;
+            window.__coarLocalizationStore = this.localeDataStore;
         }
+        // Load locale data for the default language on initialization
+        // This ensures firstDayOfWeek and other formatting data is available immediately
+        this.loadAndmergeLocalizationData(this.defaultLanguage).catch((error) => {
+            console.warn(`[CoarLocalizationService] Failed to load initial locale data for '${this.defaultLanguage}':`, error);
+        });
     }
     /**
      * Set the current language.
@@ -990,6 +1278,10 @@ class CoarLocalizationService {
      */
     async setLanguage(language) {
         const current = this.languageState.value;
+        // Skip if language hasn't changed
+        if (current === language) {
+            return;
+        }
         // Load locale data if not already loaded (cached)
         if (!this.localeDataStore.hasLocaleData(language)) {
             try {
@@ -1001,10 +1293,16 @@ class CoarLocalizationService {
                 // Formatting pipes will use fallback values
             }
         }
-        // Only notify if language actually changed
-        if (current !== language) {
-            this.languageSubject.next(language);
-        }
+        // Wait for i18n service to load translations before emitting language change
+        // Use a timeout in case i18n service is not injected (e.g., in tests)
+        await Promise.race([
+            new Promise((resolve) => {
+                this.pendingLanguageChange$.next({ language, resolve });
+            }),
+            new Promise((resolve) => setTimeout(resolve, 100)), // Fallback timeout
+        ]);
+        // Now emit the language change (UI will react with translations ready)
+        this.languageSubject.next(language);
     }
     /**
      * Load locale data from all sources and deep-merge them.
@@ -1425,7 +1723,7 @@ class CoarI18n {
      */
     t$(key, params, fallback) {
         // Re-evaluate on every language change from CoarLocalizationService
-        return this.locale.languageState.value$.pipe(map(() => this.callT(key, params, fallback)), distinctUntilChanged());
+        return this.locale.languageState.value$.pipe(map$1(() => this.callT(key, params, fallback)), distinctUntilChanged$1());
     }
     /**
      * Signal variant that updates when the language changes.
@@ -1641,7 +1939,8 @@ function provideCoarI18nHttpSource(config) {
     const headers = config?.headers;
     return makeEnvironmentProviders([
         {
-            provide: CoarTranslationLoader,
+            provide: COAR_TRANSLATION_LOADERS,
+            multi: true,
             useFactory: () => {
                 const loader = new CoarHttpTranslationLoader();
                 loader.urlFn = urlFn;
@@ -1658,5 +1957,5 @@ function provideCoarI18nHttpSource(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { COAR_I18N_PROVIDER, COAR_LOCALIZATION_CONFIG, COAR_LOCALIZATION_DATA_LOADERS, CoarCurrencyPipe, CoarDatePipe, CoarHttpLocaleDataLoader, CoarHttpTranslationLoader, CoarI18n, CoarI18nContext, CoarI18nPipe, CoarI18nService, CoarIntlLocaleDataLoader, CoarLocalizationDataLoader, CoarLocalizationDataStore, CoarLocalizationService, CoarNumberPipe, CoarPercentPipe, CoarTranslationLoader, CoarTranslationStore, coarInterpolate, coarIsMissingTranslation, mergeLocalizationData, provideCoarI18nHttpSource, provideCoarL10nHttpSource, provideCoarLocalization };
+export { COAR_I18N_PROVIDER, COAR_LOCALIZATION_CONFIG, COAR_LOCALIZATION_DATA_LOADERS, COAR_TRANSLATION_LOADERS, CoarCurrencyPipe, CoarDatePipe, CoarHttpLocaleDataLoader, CoarHttpTranslationLoader, CoarI18n, CoarI18nContext, CoarI18nPipe, CoarI18nService, CoarIntlLocaleDataLoader, CoarIntlTranslationLoader, CoarLocalizationDataLoader, CoarLocalizationDataStore, CoarLocalizationService, CoarNumberPipe, CoarPercentPipe, CoarTimeZoneService, CoarTranslationLoader, CoarTranslationStore, coarInterpolate, coarIsMissingTranslation, mergeLocalizationData, provideCoarI18nHttpSource, provideCoarL10nHttpSource, provideCoarLocalization };
 //# sourceMappingURL=cocoar-localization.mjs.map