refactor(*): New localization implementation.

angular.json

@@ -323,7 +323,7 @@
               ],
               "outputHashing": "none",
               "optimization": true,
-              "externalDependencies": ["lit"]
+              "externalDependencies": ["lit", "igniteui-i18n-core"]
             },
             "development": {
               "optimization": false,

projects/igniteui-angular-elements/esbuild.mjs

@@ -8,7 +8,7 @@ const config = {
     minify: false, // temporary disabled due to Webpack issues https://github.com/webpack/webpack/issues/16262
     outfile: `${ROOT}/elements.js`,
     format: 'esm',
-    external: ['lit'],
+    external: ['lit', 'igniteui-i18n-core'],
     target: 'es2022',
     metafile: true,
     treeShaking: true

projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

@@ -29,6 +29,7 @@ import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
 import { IgxActionStripToken } from './token';
 import { trackByIdentity } from '../core/utils';
+import { getI18nManager } from 'igniteui-i18n-core';
 
 @Directive({
     selector: '[igxActionStripMenuItem]',
@@ -197,7 +198,11 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten
         protected el: ElementRef,
         /** @hidden @internal **/
         public cdr: ChangeDetectorRef,
-    ) { }
+    ) {
+        getI18nManager().onResourceChange(() => {
+            this._resourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN, false);
+        });
+    }
 
     /**
      * Menu Items list.

projects/igniteui-angular/src/lib/banner/banner.component.ts

@@ -20,6 +20,7 @@ import { IgxExpansionPanelBodyComponent } from '../expansion-panel/expansion-pan
 import { IgxExpansionPanelComponent } from '../expansion-panel/expansion-panel.component';
 import { BannerResourceStringsEN, IBannerResourceStrings } from '../core/i18n/banner-resources';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
+import { getI18nManager } from 'igniteui-i18n-core';
 
 export interface BannerEventArgs extends IBaseEventArgs {
     event?: Event;
@@ -237,7 +238,11 @@ export class IgxBannerComponent implements IToggleView {
     private _animationSettings: ToggleAnimationSettings;
     private _resourceStrings = getCurrentResourceStrings(BannerResourceStringsEN);
 
-    constructor(public elementRef: ElementRef<HTMLElement>) { }
+    constructor(public elementRef: ElementRef<HTMLElement>) {
+        getI18nManager().onResourceChange(() => {
+            this._resourceStrings = getCurrentResourceStrings(BannerResourceStringsEN, false);
+        });
+    }
 
     /**
      * Opens the banner

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -3,14 +3,14 @@ import { WEEKDAYS, IFormattingOptions, IFormattingViews, IViewDateChangeEventArg
 import { ControlValueAccessor } from '@angular/forms';
 import { DateRangeDescriptor } from '../core/dates';
 import { noop, Subject } from 'rxjs';
-import { isDate, isEqual, PlatformUtil } from '../core/utils';
+import { getLocaleFirstDayOfWeek, isDate, isEqual, PlatformUtil } from '../core/utils';
 import { CalendarResourceStringsEN, ICalendarResourceStrings } from '../core/i18n/calendar-resources';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
-import { getLocaleFirstDayOfWeek } from "@angular/common";
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { KeyboardNavigationService } from './calendar.services';
 import { getYearRange, isDateInRanges } from './common/helpers';
 import { CalendarDay } from './common/model';
+import { getCurrentI18n, getI18nManager, ResourceChangeEventArgs } from 'igniteui-i18n-core';
 
 /** @hidden @internal */
 @Directive({
@@ -289,13 +289,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     public set locale(value: string) {
         this._locale = value;
 
-        // if value is not a valid BCP 47 tag, set it back to _localeId
-        try {
-            getLocaleFirstDayOfWeek(this._locale);
-        } catch (e) {
-            this._locale = this._localeId;
-        }
-
         // changing locale runtime needs to update the `weekStart` too, if `weekStart` is not explicitly set
         if (!this.weekStart) {
             this.weekStart = getLocaleFirstDayOfWeek(this._locale);
@@ -656,9 +649,14 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
         protected keyboardNavigation?: KeyboardNavigationService,
         protected cdr?: ChangeDetectorRef,
     ) {
-        this.locale = _localeId;
+        this.locale = getCurrentI18n() || _localeId;
         this.viewDate = this.viewDate ? this.viewDate : new Date();
         this.initFormatters();
+
+        getI18nManager().onResourceChange((args: ResourceChangeEventArgs) => {
+            this.locale = args.newLocale;
+            this._resourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN, false);
+        });
     }
 
     /**

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -13,7 +13,7 @@ import {
 	booleanAttribute,
     HostListener,
 } from '@angular/core';
-import { NgTemplateOutlet, DatePipe } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
@@ -34,6 +34,7 @@ import { areSameMonth, formatToParts, getClosestActiveDate, isDateInRanges } fro
 import { CalendarDay } from './common/model';
 import { IgxCalendarBaseDirective } from './calendar-base';
 import { KeyboardNavigationService } from './calendar.services';
+import { IgxDateFormatterPipe } from '../grids/common/pipes';
 
 let NEXT_ID = 0;
 
@@ -71,7 +72,7 @@ let NEXT_ID = 0;
     ],
     selector: 'igx-calendar',
     templateUrl: 'calendar.component.html',
-    imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar]
+    imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, IgxDateFormatterPipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar]
 })
 export class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy {
     /**

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts

@@ -9,7 +9,7 @@ import {
     OnDestroy,
     OnInit,
 } from "@angular/core";
-import { NgTemplateOutlet, DatePipe } from "@angular/common";
+import { NgTemplateOutlet } from "@angular/common";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { IgxMonthsViewComponent } from "../months-view/months-view.component";
@@ -21,6 +21,7 @@ import { CalendarDay } from "../common/model";
 import { IgxCalendarBaseDirective } from "../calendar-base";
 import { KeyboardNavigationService } from "../calendar.services";
 import { formatToParts } from "../common/helpers";
+import { IgxDateFormatterPipe } from '../../grids/common/pipes';
 
 let NEXT_ID = 0;
 @Component({
@@ -39,7 +40,7 @@ let NEXT_ID = 0;
     templateUrl: "month-picker.component.html",
     imports: [
         NgTemplateOutlet,
-        DatePipe,
+        IgxDateFormatterPipe,
         IgxIconComponent,
         IgxMonthsViewComponent,
         IgxYearsViewComponent,

projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -40,6 +40,7 @@ import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { HammerGesturesManager } from '../core/touch';
 import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums';
 import { IgxDirectionality } from '../services/direction/directionality';
+import { getI18nManager } from 'igniteui-i18n-core';
 
 let NEXT_ID = 0;
 
@@ -576,6 +577,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     ) {
         super(animationService, cdr);
         this.differ = this.iterableDiffers.find([]).create(null);
+        getI18nManager().onResourceChange(() => {
+            this._resourceStrings = getCurrentResourceStrings(CarouselResourceStringsEN, false);
+        });
     }
 
     /** @hidden */

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -24,6 +24,7 @@ import { IgxIconComponent } from '../icon/icon.component';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { Size } from '../grids/common/enums';
+import { getI18nManager } from 'igniteui-i18n-core';
 
 export const IgxChipTypeVariant = {
     PRIMARY: 'primary',
@@ -610,7 +611,11 @@ export class IgxChipComponent implements OnInit, OnDestroy {
         public cdr: ChangeDetectorRef,
         private ref: ElementRef<HTMLElement>,
         private renderer: Renderer2,
-        @Inject(DOCUMENT) public document: any) { }
+        @Inject(DOCUMENT) public document: any) {
+        getI18nManager().onResourceChange(() => {
+            this._resourceStrings = getCurrentResourceStrings(ChipResourceStringsEN, false);
+        });
+    }
 
     /**
      * @hidden

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -47,6 +47,7 @@ import { IComboItemAdditionEvent, IComboSearchInputEventArgs } from './public_ap
 import { ComboResourceStringsEN, IComboResourceStrings } from '../core/i18n/combo-resources';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { isEqual } from 'lodash-es';
+import { getI18nManager } from 'igniteui-i18n-core';
 
 export const IGX_COMBO_COMPONENT = /*@__PURE__*/new InjectionToken<IgxComboBase>('IgxComboComponentToken');
 
@@ -967,7 +968,11 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
         @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType: IgxInputGroupType,
         @Optional() protected _injector: Injector,
         @Optional() @Inject(IgxIconService) protected _iconService?: IgxIconService,
-    ) { }
+    ) {
+        getI18nManager().onResourceChange(() => {
+            this._resourceStrings = getCurrentResourceStrings(ComboResourceStringsEN, false);
+        });
+    }
 
     public ngAfterViewChecked() {
         const targetElement = this.inputGroup.element.nativeElement.querySelector('.igx-input-group__bundle') as HTMLElement;

projects/igniteui-angular/src/lib/core/i18n/resources.ts

@@ -13,48 +13,54 @@ import { IActionStripResourceStrings } from './action-strip-resources';
 import { IQueryBuilderResourceStrings } from './query-builder-resources';
 import { IComboResourceStrings } from './combo-resources';
 import { IBannerResourceStrings } from './banner-resources';
+import {
+    registerI18n,
+    getCurrentResourceStrings as getCurrentResourceStringsCore,
+    IResourceStrings as IResourceStringsCore
+} from 'igniteui-i18n-core';
 
 export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICalendarResourceStrings,
     ICarouselResourceStrings, IChipResourceStrings, IComboResourceStrings, IInputResourceStrings, IDatePickerResourceStrings,
     IDateRangePickerResourceStrings, IListResourceStrings, IPaginatorResourceStrings, ITreeResourceStrings,
     IActionStripResourceStrings, IQueryBuilderResourceStrings, IBannerResourceStrings { }
 
-export class igxI18N {
-    private static _instance: igxI18N;
-
-    private _currentResourceStrings: IResourceStrings = { };
-
-    private constructor() { }
-
-    public static instance() {
-        return this._instance || (this._instance = new this());
+function igxRegisterI18n(resourceStrings: IResourceStrings)  {
+    // Remove `igx_` prefix for compatibility with older versions.
+    const genericResourceStrings: IResourceStringsCore = {};
+    for (const key of Object.keys(resourceStrings)) {
+        let stringKey = key;
+        if (stringKey.startsWith("igx_")) {
+            stringKey = stringKey.replace("igx_", "");
+        }
+        genericResourceStrings[stringKey] = resourceStrings[key];
     }
+    registerI18n(genericResourceStrings);
+}
 
-    /**
-     * Changes the resource strings for all components in the application
-     * ```
-     * @param resourceStrings to be applied
-     */
-    public changei18n(resourceStrings: IResourceStrings) {
-        for (const key of Object.keys(resourceStrings)) {
-            this._currentResourceStrings[key] = resourceStrings[key];
-        }
+/** Get current resource strings based on default. Result is truncated result, containing only relevant locale strings. */
+export function getCurrentResourceStrings<T>(defaultEN: T, init = true) {
+    const igxResourceStringKeys = Object.keys(defaultEN);
+    if (init) {
+        igxRegisterI18n(defaultEN);
     }
 
-    public getCurrentResourceStrings(en: IResourceStrings): IResourceStrings {
-        for (const key of Object.keys(en)) {
-            if (!this._currentResourceStrings[key]) {
-                this._currentResourceStrings[key] = en[key];
-            }
+    // Append back `igx_` prefix for compatibility with older versions.
+    const resourceStrings = getCurrentResourceStringsCore();
+    const normalizedResourceStrings: T = {} as T;
+    const resourceStringsKeys = Object.keys(resourceStrings);
+    for (const key of resourceStringsKeys) {
+        let stringKey = key;
+        if (!stringKey.startsWith("igx_")) {
+            stringKey = "igx_" + stringKey;
+        }
+        if (igxResourceStringKeys.includes(stringKey)) {
+            normalizedResourceStrings[stringKey] = resourceStrings[key];
         }
-        return this._currentResourceStrings;
     }
-}
 
-export function getCurrentResourceStrings(en: IResourceStrings) {
-    return igxI18N.instance().getCurrentResourceStrings(en);
+    return normalizedResourceStrings;
 }
 
 export function changei18n(resourceStrings: IResourceStrings) {
-    igxI18N.instance().changei18n(resourceStrings);
+    igxRegisterI18n(resourceStrings);
 }