feat(localization): Integration of new i18nManager resource strings. (#1835)

---------

Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: skrustev

.gitignore

@@ -35,3 +35,5 @@ i18nRepo
 .env
 .envrc
 .direnv
+
+.vs

.storybook/preview.ts

@@ -4,6 +4,24 @@ import { type CSSResult, html } from 'lit';
 import { configureTheme } from '../src/theming/config';
 import type { Decorator, Preview } from '@storybook/web-components-vite';
 import { withActions } from 'storybook/actions/decorator';
+import { registerI18n } from 'igniteui-i18n-core';
+import {
+  ResourceStringsBG,
+  ResourceStringsDE,
+  ResourceStringsES,
+  ResourceStringsFR,
+  ResourceStringsJA,
+} from 'igniteui-i18n-resources';
+
+const LocalizationResources = new Map(
+  Object.entries({
+    de: ResourceStringsDE,
+    fr: ResourceStringsFR,
+    es: ResourceStringsES,
+    ja: ResourceStringsJA,
+    bg: ResourceStringsBG,
+  })
+);
 
 type ThemeImport = { styles: CSSResult };
 
@@ -62,6 +80,12 @@ const themeProvider: Decorator = (story, context) => {
   `;
 };
 
+const localeProvider: Decorator = (story, context) => {
+  const { localization } = context.globals;
+  document.documentElement.lang = localization ?? 'en';
+  return story();
+};
+
 export default {
   globalTypes: {
     theme: {
@@ -102,6 +126,21 @@ export default {
         ],
       },
     },
+    localization: {
+      name: 'Localization',
+      description: 'Component localization',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'en', title: 'English' },
+          { value: 'de', title: 'German' },
+          { value: 'fr', title: 'French' },
+          { value: 'es', title: 'Spanish' },
+          { value: 'ja', title: 'Japanese' },
+          { value: 'bg', title: 'Bulgarian' },
+        ],
+      },
+    },
     size: {
       name: 'Size',
       description: 'Component size',
@@ -120,16 +159,21 @@ export default {
     theme: 'bootstrap',
     variant: 'light',
     direction: 'ltr',
+    localization: 'en',
     size: 'default',
   },
   parameters: {
     backgrounds: {
       disable: true,
     },
   },
-  decorators: [themeProvider, withActions],
+  decorators: [themeProvider, withActions, localeProvider],
   loaders: [
     async (context) => {
+      for (const [locale, resources] of LocalizationResources.entries()) {
+        registerI18n(resources, locale);
+      }
+
       const { theme, variant } = context.globals;
       return { theme: getTheme({ theme, variant }) };
     },

package-lock.json

@@ -56,7 +56,8 @@
     "@floating-ui/dom": "^1.7.4",
     "@lit-labs/virtualizer": "^2.1.1",
     "@lit/context": "^1.1.6",
-    "lit": "^3.3.1"
+    "lit": "^3.3.1",
+    "igniteui-i18n-core": "0.6.0-alpha.4"
   },
   "devDependencies": {
     "@biomejs/biome": "~2.2.6",
@@ -80,6 +81,7 @@
     "globby": "^15.0.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.2.3",
+    "igniteui-i18n-resources": "0.6.0-alpha.4",
     "igniteui-theming": "^20.0.0",
     "keep-a-changelog": "^2.7.1",
     "lint-staged": "^16.2.4",

package.json

@@ -4,6 +4,11 @@ import { property, state } from 'lit/decorators.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import { blazorIndirectRender } from '../common/decorators/blazorIndirectRender.js';
 import { watch } from '../common/decorators/watch.js';
+import {
+  IgcCalendarResourceStringEN,
+  type IgcCalendarResourceStrings,
+} from '../common/i18n/EN/calendar.resources.js';
+import { addI18nController } from '../common/i18n/i18n-controller.js';
 import { first } from '../common/util.js';
 import { convertToDate, convertToDates, getWeekDayNumber } from './helpers.js';
 import { CalendarDay } from './model.js';
@@ -16,6 +21,10 @@ import type {
 @blazorIndirectRender
 @blazorDeepImport
 export class IgcCalendarBaseComponent extends LitElement {
+  protected readonly _i18nController =
+    addI18nController<IgcCalendarResourceStrings>(this, {
+      defaultEN: IgcCalendarResourceStringEN,
+    });
   private _initialActiveDateSet = false;
 
   protected get _hasValues() {
@@ -130,7 +139,25 @@ export class IgcCalendarBaseComponent extends LitElement {
    * @attr locale
    */
   @property()
-  public locale = 'en';
+  public set locale(value: string) {
+    this._i18nController.locale = value;
+  }
+
+  public get locale() {
+    return this._i18nController.locale;
+  }
+
+  /**
+   * The resource strings for localization.
+   */
+  @property({ attribute: false })
+  public set resourceStrings(value: IgcCalendarResourceStrings) {
+    this._i18nController.resourceStrings = value;
+  }
+
+  public get resourceStrings(): IgcCalendarResourceStrings {
+    return this._i18nController.resourceStrings;
+  }
 
   /** Gets/Sets the special dates for the component. */
   @property({ attribute: false })

src/components/calendar/base.ts

@@ -62,7 +62,7 @@ describe('Calendar Rendering', () => {
         `
       <div part="header">
         <h5 part="header-title">
-          <slot name="title">Select date</slot>
+          <slot name="title">Select Date</slot>
         </h5>
 	      <h2 part="header-date">
           <slot>

src/components/calendar/calendar-rendering.spec.ts

@@ -17,7 +17,6 @@ import {
 } from '../common/controllers/key-bindings.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { IgcCalendarResourceStringEN } from '../common/i18n/calendar.resources.js';
 import { createDateTimeFormatters } from '../common/localization/intl-formatters.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
@@ -220,12 +219,6 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
   public formatOptions: Pick<Intl.DateTimeFormatOptions, 'month' | 'weekday'> =
     { month: 'long', weekday: 'narrow' };
 
-  /**
-   * The resource strings for localization.
-   */
-  @property({ attribute: false })
-  public resourceStrings = IgcCalendarResourceStringEN;
-
   private _intl = createDateTimeFormatters(this.locale, {
     month: {
       month: this.formatOptions.month,

src/components/calendar/calendar.ts

@@ -7,7 +7,6 @@ import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRend
 import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
 import { watch } from '../../common/decorators/watch.js';
 import { registerComponent } from '../../common/definitions/register.js';
-import { IgcCalendarResourceStringEN } from '../../common/i18n/calendar.resources.js';
 import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
@@ -101,10 +100,6 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
     return this._rangePreviewDate?.native;
   }
 
-  /** The resource strings. */
-  @property({ attribute: false })
-  public resourceStrings = IgcCalendarResourceStringEN;
-
   /**
    * The format of the days. Defaults to narrow.
    * @attr week-day-format

src/components/calendar/days-view/days-view.ts

@@ -133,12 +133,12 @@ describe('Carousel', () => {
       )?.id;
       expect(carousel).shadowDom.to.equal(
         `<section>
-          <igc-button aria-label="Previous slide" aria-controls="${carouselId}">
+          <igc-button aria-label="previous slide" aria-controls="${carouselId}">
             <slot name="previous-button">
               <igc-icon aria-hidden="true" collection="default" name="carousel_prev"></igc-icon>
             </slot>
           </igc-button>
-          <igc-button aria-label="Next slide" aria-controls="${carouselId}">
+          <igc-button aria-label="next slide" aria-controls="${carouselId}">
             <slot name="next-button">
               <igc-icon aria-hidden="true" collection="default" name="carousel_next"></igc-icon>
             </slot>