refactor(localization): Override FormAssociated localization controller when extended by localized component.

Author: skrustev

src/components/combo/combo.ts

@@ -1,6 +1,8 @@
 import {
   ComboResourceStringsEN,
   type IComboResourceStrings,
+  type IValidationResourceStrings,
+  ValidationResourceStringsEN,
 } from 'igniteui-i18n-core';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import {
@@ -149,12 +151,11 @@ export default class IgcComboComponent<
     },
   });
 
-  private readonly _i18nController = addI18nController<IComboResourceStrings>(
-    this,
-    {
-      defaultEN: ComboResourceStringsEN,
-    }
-  );
+  protected override readonly __i18nController = addI18nController<
+    IComboResourceStrings & IValidationResourceStrings
+  >(this, {
+    defaultEN: { ...ComboResourceStringsEN, ...ValidationResourceStringsEN },
+  });
 
   protected override readonly _formValue = createFormValueState<
     ComboValue<T>[]
@@ -275,11 +276,11 @@ export default class IgcComboComponent<
    */
   @property()
   public set locale(value: string) {
-    this._i18nController.locale = value;
+    this.__i18nController.locale = value;
   }
 
   public get locale() {
-    return this._i18nController.locale;
+    return this.__i18nController.locale;
   }
 
   /**
@@ -326,12 +327,15 @@ export default class IgcComboComponent<
    * The resource strings for localization.
    */
   @property({ attribute: false })
-  public set resourceStrings(value: IComboResourceStrings) {
-    this._i18nController.resourceStrings = value;
+  public set resourceStrings(
+    value: IComboResourceStrings & IValidationResourceStrings
+  ) {
+    this.__i18nController.resourceStrings = value;
   }
 
-  public get resourceStrings(): IComboResourceStrings {
-    return this._i18nController.resourceStrings;
+  public get resourceStrings(): IComboResourceStrings &
+    IValidationResourceStrings {
+    return this.__i18nController.resourceStrings;
   }
 
   /**

src/components/common/i18n/i18n-controller.ts

@@ -166,32 +166,31 @@ class I18nController<T extends object> implements ReactiveController {
     const coreResourceStrings = getI18nManager().getCurrentResourceStrings(
       this.locale
     );
-    const resourceMap = this._getResourceMapForComponent();
-
-    if (!resourceMap) {
-      return coreResourceStrings as T;
-    }
 
+    const resourceMap = this._getResourceMapForComponent();
     const normalizedResourceStrings: T = {} as T;
     const defaultComponentKeys = Object.keys(this._defaultEN) as (keyof T)[];
 
     for (const igcKey of defaultComponentKeys) {
-      const coreKey = resourceMap.get(igcKey as string);
+      const coreKey = resourceMap?.get(igcKey as string);
       let resolvedValue: T[keyof T] = this._defaultEN[igcKey];
 
       if (coreKey) {
         if (coreKey.includes('getWeekLabel')) {
           resolvedValue = getDisplayNamesFormatter().getWeekLabel(this.locale, {
             style: 'short',
           }) as T[keyof T];
-        } else {
-          resolvedValue =
-            coreKey in coreResourceStrings
-              ? (coreResourceStrings[
-                  coreKey as keyof IResourceStrings
-                ] as T[keyof T])
-              : this._defaultEN[igcKey];
+        } else if (coreKey in coreResourceStrings) {
+          resolvedValue = coreResourceStrings[
+            coreKey as keyof IResourceStrings
+          ] as T[keyof T];
         }
+      } else if (igcKey in coreResourceStrings) {
+        // For a mix of old and core resources.
+        // Only for internal default resources. Users shouldn't mix them.
+        resolvedValue = coreResourceStrings[
+          igcKey as keyof IResourceStrings
+        ] as T[keyof T];
       }
 
       normalizedResourceStrings[igcKey] = resolvedValue;

src/components/common/mixins/forms/associated.ts

@@ -41,7 +41,7 @@ function BaseFormAssociated<T extends Constructor<LitElement>>(base: T) {
     //#region Internal state and properties
 
     private readonly __internals = addInternalsController(this);
-    private readonly __i18nController =
+    protected readonly __i18nController =
       addI18nController<IValidationResourceStrings>(this, {
         defaultEN: ValidationResourceStringsEN,
       });

src/components/common/mixins/forms/types.ts

@@ -1,5 +1,7 @@
+import type { IValidationResourceStrings } from 'igniteui-i18n-core';
 import type { LitElement } from 'lit';
 import type { ElementInternalsController } from '../../controllers/internals.js';
+import type { I18nController } from '../../i18n/i18n-controller.js';
 import type { Validator } from '../../validators.js';
 
 export type FormRestoreMode = 'autocomplete' | 'restore';
@@ -13,6 +15,7 @@ declare class BaseFormAssociatedElement {
   //#region Properties
 
   private readonly __internals: ElementInternalsController;
+  protected readonly __i18nController: I18nController<IValidationResourceStrings>;
   protected readonly _formValue: unknown;
 
   protected _pristine: boolean;

src/components/date-picker/date-picker.ts

@@ -1,3 +1,7 @@
+import {
+  type IValidationResourceStrings,
+  ValidationResourceStringsEN,
+} from 'igniteui-i18n-core';
 import { html, nothing, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -199,10 +203,19 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   private readonly _inputId = `date-picker-${nextId++}`;
   private readonly _themes = addThemingController(this, all);
   private readonly _slots = addSlotController(this, { slots: Slots });
-  private readonly _i18nController =
-    addI18nController<IgcCalendarResourceStrings>(this, {
-      defaultEN: IgcCalendarResourceStringEN,
-    });
+
+  /**
+   * For now we use the core validation strings internally only, to avoid mixing with old resources by users.
+   * To Do: Update resourceStrings type when the IgcCalendarResourceStrings is changed to ICalendarResourceStrings
+   */
+  protected override readonly __i18nController = addI18nController<
+    IgcCalendarResourceStrings & IValidationResourceStrings
+  >(this, {
+    defaultEN: {
+      ...IgcCalendarResourceStringEN,
+      ...ValidationResourceStringsEN,
+    },
+  });
 
   private _oldValue: Date | null = null;
   private _activeDate: Date | null = null;
@@ -455,23 +468,23 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
    */
   @property()
   public set locale(value: string) {
-    this._i18nController.locale = value;
+    this.__i18nController.locale = value;
   }
 
   public get locale() {
-    return this._i18nController.locale;
+    return this.__i18nController.locale;
   }
 
   /**
    * The resource strings for localization.
    */
   @property({ attribute: false })
   public set resourceStrings(value: IgcCalendarResourceStrings) {
-    this._i18nController.resourceStrings = value;
+    this.__i18nController.resourceStrings = value;
   }
 
   public get resourceStrings(): IgcCalendarResourceStrings {
-    return this._i18nController.resourceStrings;
+    return this.__i18nController.resourceStrings;
   }
 
   /** Sets the start day of the week for the calendar. */

src/components/date-range-picker/date-range-picker.ts

@@ -1,4 +1,8 @@
-import { getDateFormatter } from 'igniteui-i18n-core';
+import {
+  getDateFormatter,
+  type IValidationResourceStrings,
+  ValidationResourceStringsEN,
+} from 'igniteui-i18n-core';
 import { html, nothing, type TemplateResult } from 'lit';
 import {
   property,
@@ -229,10 +233,18 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
     }
   );
 
-  private readonly _i18nController =
-    addI18nController<IgcDateRangePickerResourceStrings>(this, {
-      defaultEN: IgcDateRangePickerResourceStringsEN,
-    });
+  /**
+   * For now we use the core validation strings internally only, to avoid mixing with old resources by users.
+   * To Do: Update resourceStrings type when the IgcDateRangePickerResourceStrings is changed to IDateRangePickerResourceStrings
+   */
+  protected override readonly __i18nController = addI18nController<
+    IgcDateRangePickerResourceStrings & IValidationResourceStrings
+  >(this, {
+    defaultEN: {
+      ...IgcDateRangePickerResourceStringsEN,
+      ...ValidationResourceStringsEN,
+    },
+  });
 
   private _activeDate: Date | null = null;
   private _min: Date | null = null;
@@ -346,21 +358,21 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
    */
   @property()
   public set locale(value: string) {
-    this._i18nController.locale = value;
+    this.__i18nController.locale = value;
   }
 
   public get locale() {
-    return this._i18nController.locale;
+    return this.__i18nController.locale;
   }
 
   /** The resource strings of the date range picker. */
   @property({ attribute: false })
   public set resourceStrings(value: IgcDateRangePickerResourceStrings) {
-    this._i18nController.resourceStrings = value;
+    this.__i18nController.resourceStrings = value;
   }
 
   public get resourceStrings(): IgcDateRangePickerResourceStrings {
-    return this._i18nController.resourceStrings;
+    return this.__i18nController.resourceStrings;
   }
 
   // #endregion