Skip to content

Commit 2a49e69

Browse files
skrustevskrustev
authored
feat(localization): Move old samples for localization and add separate sample for the new localization. (#3752)
1 parent 718c251 commit 2a49e69

21 files changed

+219
-93
lines changed

‎live-editing/configs/BaseConfig-AngularLocale.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const BaseAppAngularLocaleConfig = {
2+
modules: [
3+
{ 'module': 'BrowserModule', 'import': '@angular/platform-browser' },
4+
{ 'module': 'FormsModule', 'import': '@angular/forms' },
5+
{ 'module': 'HammerModule', 'import': '@angular/platform-browser' },
6+
],
7+
providers: [
8+
{ 'provider': 'provideAnimations()', 'import': '@angular/platform-browser/animations' }
9+
],
10+
router: false
11+
}

‎live-editing/configs/BaseConfig.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ export const BaseAppConfig = {
22
modules: [
33
{ 'module': 'BrowserModule', 'import': '@angular/platform-browser' },
44
{ 'module': 'FormsModule', 'import': '@angular/forms' },
5-
{ 'module': 'HammerModule', 'import': '@angular/platform-browser' }
5+
{ 'module': 'HammerModule', 'import': '@angular/platform-browser' },
66
],
77
providers: [
8-
{ 'provider': 'provideAnimations()', 'import': '@angular/platform-browser/animations' }
8+
{ 'provider': 'provideAnimations()', 'import': '@angular/platform-browser/animations' },
9+
{ 'provider': 'provideIgniteIntl()', 'import': 'igniteui-angular' }
910
],
1011
routesConfig: {
1112
router: false

‎live-editing/configs/LocalizationConfigGenerator.ts‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
import { IgxGridModule } from 'igniteui-angular/grids/grid';
2-
import { IgxIconModule } from 'igniteui-angular/icon';
3-
import { IgxInputGroupModule } from 'igniteui-angular/input-group';
4-
import { IgxTimePickerModule } from 'igniteui-angular/time-picker';
5-
import { IgxSelectModule } from 'igniteui-angular/select';
6-
import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
7-
import { BaseAppConfig } from './BaseConfig';;
1+
import { Config, IConfigGenerator} from 'igniteui-live-editing'
2+
import { BaseAppConfig } from './BaseConfig';
3+
import { BaseAppAngularLocaleConfig } from './BaseConfig-AngularLocale';
4+
85
export class LocalizationConfigGenerator implements IConfigGenerator {
96
public generateConfigs(): Config[] {
107
const configs = new Array<Config>();
@@ -14,23 +11,23 @@ export class LocalizationConfigGenerator implements IConfigGenerator {
1411
component: 'LocalizationSample1Component',
1512
additionalFiles: ['/src/app/data/nwindData.ts'],
1613
additionalDependencies: ['igniteui-angular-i18n'],
17-
appConfig: BaseAppConfig
14+
appConfig: BaseAppAngularLocaleConfig
1815
}));
1916

2017
// localization sample 2
2118
configs.push(new Config({
2219
component: 'LocalizationSample2Component',
2320
additionalFiles: ['/src/app/data/nwindData.ts'],
2421
additionalDependencies: ['igniteui-angular-i18n'],
25-
appConfig: BaseAppConfig
22+
appConfig: BaseAppAngularLocaleConfig
2623
}));
2724

2825
// localization sample 3
2926
configs.push(new Config({
3027
component: 'LocalizationSample3Component',
3128
additionalFiles: ['/src/app/data/nwindData.ts'],
3229
additionalDependencies: ['igniteui-angular-i18n'],
33-
appConfig: BaseAppConfig
30+
appConfig: BaseAppAngularLocaleConfig
3431
}));
3532

3633
// localization all resources

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
"igniteui-angular-i18n": "^21.1.0-rc.0",
8181
"igniteui-dockmanager": "^1.17.0",
8282
"igniteui-grid-lite": "^0.0.1",
83+
"igniteui-i18n-resources": "^1.0.2",
8384
"igniteui-live-editing": "^3.3.0",
8485
"igniteui-webcomponents": "^6.5.0",
8586
"marked": "^17.0.1",

‎src/app/app.config.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
77
import { provideRouter } from "@angular/router";
88
import { AppRoutes } from "./app.routes";
99
import { OverflowService } from "./services/overflow.service";
10+
import { provideIgniteIntl } from "igniteui-angular";
1011

1112
export const AppConfig: ApplicationConfig = {
1213
providers: [
@@ -19,6 +20,7 @@ export const AppConfig: ApplicationConfig = {
1920
provideHttpClient(withInterceptorsFromDi(), withFetch()),
2021
provideAnimations(),
2122
provideRouter(AppRoutes),
22-
OverflowService, provideClientHydration(withEventReplay())
23+
OverflowService, provideClientHydration(withEventReplay()),
24+
provideIgniteIntl()
2325
]
2426
};

‎src/app/services/localization-samples-old/localization-all-resources/localization-all-resources.component.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div class="grid__wrapper">
2+
<igx-grid #grid [data]="data" [autoGenerate]="false" height="520px" width="100%"
3+
[allowFiltering]="true" [locale]="locale" [rowEditable]="true" [primaryKey]="'ProductID'">
4+
<igx-grid-toolbar>
5+
<igx-grid-toolbar-title>Grid with Localization</igx-grid-toolbar-title>
6+
<igx-select [(ngModel)]="locale" (ngModelChange)="updateLocale()">
7+
@for (locale of selectLocales; track locale) {
8+
<igx-select-item [value]="locale">
9+
{{ locale }}
10+
</igx-select-item>
11+
}
12+
</igx-select>
13+
</igx-grid-toolbar>
14+
<igx-column field="ProductName" header="Product Name" [groupable]="true">
15+
</igx-column>
16+
<igx-column field="QuantityPerUnit" header="Quantity Per Unit" [groupable]="true">
17+
</igx-column>
18+
<igx-column field="UnitPrice" header="Unit Price" [sortable]="true" [hasSummary]="true"
19+
[dataType]="'currency'" [groupable]="true">
20+
</igx-column>
21+
<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [groupable]="true">
22+
</igx-column>
23+
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [groupable]="true">
24+
</igx-column>
25+
</igx-grid>
26+
</div>

‎src/app/services/localization-samples-old/localization-all-resources/localization-all-resources.component.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
:host {
2+
.grid__wrapper {
3+
margin: 16px 32px;
4+
}
5+
6+
--ig-size: var(--ig-size-small);
7+
}

‎src/app/services/localization-samples-old/localization-all-resources/localization-all-resources.component.ts‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/* eslint-disable @typescript-eslint/ban-types */
2+
/* eslint-disable @typescript-eslint/member-delimiter-style */
3+
/* eslint-disable @typescript-eslint/naming-convention */
4+
import { Component, OnInit, ViewChild } from '@angular/core';
5+
import { registerLocaleData } from '@angular/common';
6+
import localeBG from '@angular/common/locales/bg';
7+
import localeCS from '@angular/common/locales/cs';
8+
import localeDA from '@angular/common/locales/da';
9+
import localeDE from '@angular/common/locales/de';
10+
import localeEN from '@angular/common/locales/en';
11+
import localeES from '@angular/common/locales/es';
12+
import localeFR from '@angular/common/locales/fr';
13+
import localeHU from '@angular/common/locales/hu';
14+
import localeIT from '@angular/common/locales/it';
15+
import localeJA from '@angular/common/locales/ja';
16+
import localeKO from '@angular/common/locales/ko';
17+
import localeNB from '@angular/common/locales/nb';
18+
import localeNL from '@angular/common/locales/nl';
19+
import localePL from '@angular/common/locales/pl';
20+
import localePT from '@angular/common/locales/pt';
21+
import localeRO from '@angular/common/locales/ro';
22+
import localeSV from '@angular/common/locales/sv';
23+
import localeTR from '@angular/common/locales/tr';
24+
import localeHI from '@angular/common/locales/hi';
25+
import localeHans from '@angular/common/locales/zh-Hans';
26+
import localeHant from '@angular/common/locales/zh-Hant';
27+
import { DATA } from '../../../data/nwindData';
28+
import { IgxGridComponent, GridResourceStringsEN, IGridResourceStrings, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, IgxSelectItemComponent, IgxColumnComponent } from 'igniteui-angular';
29+
import {
30+
IgxResourceStringsBG, IgxResourceStringsCS, IgxResourceStringsDA, IgxResourceStringsDE,
31+
IgxResourceStringsES, IgxResourceStringsFR, IgxResourceStringsHU, IgxResourceStringsIT,
32+
IgxResourceStringsJA, IgxResourceStringsKO, IgxResourceStringsNB, IgxResourceStringsNL, IgxResourceStringsPL,
33+
IgxResourceStringsPT, IgxResourceStringsRO, IgxResourceStringsSV, IgxResourceStringsTR,
34+
IgxResourceStringsZHHANS, IgxResourceStringsZHHANT
35+
} from 'igniteui-angular-i18n';
36+
import { FormsModule } from '@angular/forms';
37+
38+
@Component({
39+
selector: 'app-localization-all-resources-old',
40+
styleUrls: ['./localization-all-resources.component.scss'],
41+
templateUrl: 'localization-all-resources.component.html',
42+
imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxColumnComponent]
43+
})
44+
export class LocalizationAllResourcesOldComponent implements OnInit {
45+
@ViewChild('grid', { read: IgxGridComponent, static: true })
46+
public grid: IgxGridComponent;
47+
public data: any[];
48+
public locale: string;
49+
public locales: { type: string, resource: object }[];
50+
public selectLocales = [
51+
'HI', 'BG', 'CS', 'DA', 'DE', 'EN', 'ES', 'FR', 'HU', 'IT', 'JA', 'KO', 'NB', 'NL',
52+
'PL', 'PT', 'RO', 'SV', 'TR', 'zh-Hans', 'zh-Hant'
53+
];
54+
public partialCustomHindi: IGridResourceStrings;
55+
56+
constructor() { }
57+
public ngOnInit(): void {
58+
registerLocaleData(localeBG);
59+
registerLocaleData(localeCS);
60+
registerLocaleData(localeDA);
61+
registerLocaleData(localeDE);
62+
registerLocaleData(localeEN);
63+
registerLocaleData(localeES);
64+
registerLocaleData(localeFR);
65+
registerLocaleData(localeHU);
66+
registerLocaleData(localeIT);
67+
registerLocaleData(localeJA);
68+
registerLocaleData(localeKO);
69+
registerLocaleData(localeNB);
70+
registerLocaleData(localeNL);
71+
registerLocaleData(localePL);
72+
registerLocaleData(localePT);
73+
registerLocaleData(localeRO);
74+
registerLocaleData(localeSV);
75+
registerLocaleData(localeTR);
76+
registerLocaleData(localeHI);
77+
registerLocaleData(localeHans);
78+
registerLocaleData(localeHant);
79+
80+
this.data = DATA;
81+
82+
// Creating a custom locale (HI) for specific grid strings.
83+
// Similarly can localize all needed strings in a separate IgxResourceStringsHI file (feel free to contribute)
84+
this.partialCustomHindi = {
85+
igx_grid_summary_count: 'गणना',
86+
igx_grid_summary_min: 'न्यून',
87+
igx_grid_summary_max: 'अधिक',
88+
igx_grid_summary_sum: 'योग',
89+
igx_grid_summary_average: 'औसत'
90+
};
91+
92+
this.locales = [
93+
{ type: 'BG', resource: IgxResourceStringsBG },
94+
{ type: 'CS', resource: IgxResourceStringsCS },
95+
{ type: 'DA', resource: IgxResourceStringsDA },
96+
{ type: 'DE', resource: IgxResourceStringsDE },
97+
{ type: 'ES', resource: IgxResourceStringsES },
98+
{ type: 'FR', resource: IgxResourceStringsFR },
99+
{ type: 'HU', resource: IgxResourceStringsHU },
100+
{ type: 'IT', resource: IgxResourceStringsIT },
101+
{ type: 'JA', resource: IgxResourceStringsJA },
102+
{ type: 'KO', resource: IgxResourceStringsKO },
103+
{ type: 'EN', resource: GridResourceStringsEN },
104+
{ type: 'HI', resource: this.partialCustomHindi },
105+
{ type: 'NB', resource: IgxResourceStringsNB },
106+
{ type: 'NL', resource: IgxResourceStringsNL },
107+
{ type: 'PL', resource: IgxResourceStringsPL },
108+
{ type: 'PT', resource: IgxResourceStringsPT },
109+
{ type: 'RO', resource: IgxResourceStringsRO },
110+
{ type: 'SV', resource: IgxResourceStringsSV },
111+
{ type: 'TR', resource: IgxResourceStringsTR },
112+
{ type: 'zh-Hans', resource: IgxResourceStringsZHHANS },
113+
{ type: 'zh-Hant', resource: IgxResourceStringsZHHANT }
114+
];
115+
this.locale = 'EN';
116+
}
117+
118+
public updateLocale() {
119+
const newLocale = this.locales.find(x => x.type === this.locale).resource;
120+
this.grid.resourceStrings = newLocale;
121+
}
122+
}

src/app/services/localization-samples/localization-sample-1/localization-sample-1.component.html renamed to src/app/services/localization-samples-old/localization-sample-1/localization-sample-1.component.html

File renamed without changes.

0 commit comments

Comments
 (0)