diff --git a/samples/grids/grid/localization/.prettierrc b/samples/grids/grid/localization/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/grids/grid/localization/.prettierrc
@@ -0,0 +1,11 @@
+{
+ "printWidth": 250,
+ "tabWidth": 4,
+ "useTabs": false,
+ "semi": true,
+ "singleQuote": false,
+ "trailingComma": "none",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": false,
+ "fluid": false
+}
\ No newline at end of file
diff --git a/samples/grids/grid/localization/ReadMe.md b/samples/grids/grid/localization/ReadMe.md
new file mode 100644
index 000000000..07e8c04c7
--- /dev/null
+++ b/samples/grids/grid/localization/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Localization feature using [Grid](https://infragistics.com/webcomponentssite/components/localization.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/grid/action-strip
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/grid/localization/index.html b/samples/grids/grid/localization/index.html
new file mode 100644
index 000000000..436726add
--- /dev/null
+++ b/samples/grids/grid/localization/index.html
@@ -0,0 +1,85 @@
+
+
+
+ Sample | Ignite UI | Web Components | infragistics
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Grid with Localization
+
+ HI
+ BG
+ CS
+ DA
+ DE
+ EN
+ ES
+ FR
+ HU
+ IT
+ JA
+ KO
+ NB
+ NL
+ PL
+ PT
+ RO
+ SV
+ TR
+ zh-Hans
+ zh-Hant
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <% if (false) { %><% } %>
+
+
\ No newline at end of file
diff --git a/samples/grids/grid/localization/package.json b/samples/grids/grid/localization/package.json
new file mode 100644
index 000000000..4d0e5b70e
--- /dev/null
+++ b/samples/grids/grid/localization/package.json
@@ -0,0 +1,62 @@
+{
+ "name": "example-ignite-ui-web-components",
+ "description": "This project provides example of using Ignite UI for Web Components",
+ "author": "Infragistics",
+ "version": "1.0.0",
+ "license": "",
+ "private": true,
+ "homepage": ".",
+ "main": "src/index.ts",
+ "scripts": {
+ "build": "npm run build:prod",
+ "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start": "npm run serve:dev",
+ "build:legacy": "npm run build:prod:legacy",
+ "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start:legacy": "npm run serve:dev:legacy"
+ },
+ "dependencies": {
+ "babel-runtime": "^6.26.0",
+ "igniteui-i18n-resources": "^1.0.2",
+ "igniteui-webcomponents": "6.5.1",
+ "igniteui-webcomponents-core": "6.3.1",
+ "igniteui-webcomponents-grids": "6.3.0-rc.0",
+ "igniteui-webcomponents-inputs": "6.3.1",
+ "igniteui-webcomponents-layouts": "6.3.1",
+ "lit-html": "^3.3.1",
+ "tslib": "^2.8.1"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.28.3",
+ "@babel/core": "^7.28.4",
+ "@babel/plugin-transform-class-properties": "^7.27.1",
+ "@babel/plugin-transform-class-static-block": "^7.28.3",
+ "@babel/plugin-transform-runtime": "^7.28.3",
+ "@babel/preset-env": "^7.28.3",
+ "@babel/preset-typescript": "^7.27.1",
+ "@types/source-map": "^0.5.7",
+ "babel-loader": "^10.0.0",
+ "babel-plugin-transform-custom-element-classes": "^0.1.0",
+ "css-loader": "^7.1.2",
+ "csv-loader": "^3.0.5",
+ "file-loader": "^6.2.0",
+ "fork-ts-checker-webpack-plugin": "^9.1.0",
+ "html-webpack-plugin": "^5.6.4",
+ "parcel-bundler": "^1.12.5",
+ "source-map": "^0.7.6",
+ "style-loader": "^4.0.0",
+ "tsconfig-paths-webpack-plugin": "^4.2.0",
+ "typescript": "^5.9.2",
+ "webpack": "^5.101.3",
+ "webpack-cli": "^6.0.1",
+ "webpack-dev-server": "^5.2.2",
+ "worker-loader": "^3.0.8",
+ "xml-loader": "^1.2.1"
+ }
+}
diff --git a/samples/grids/grid/localization/sandbox.config.json b/samples/grids/grid/localization/sandbox.config.json
new file mode 100644
index 000000000..52c787510
--- /dev/null
+++ b/samples/grids/grid/localization/sandbox.config.json
@@ -0,0 +1,6 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser",
+ "template": "parcel"
+}
\ No newline at end of file
diff --git a/samples/grids/grid/localization/src/NwindData.json b/samples/grids/grid/localization/src/NwindData.json
new file mode 100644
index 000000000..c00b03ec8
--- /dev/null
+++ b/samples/grids/grid/localization/src/NwindData.json
@@ -0,0 +1,458 @@
+[
+ {
+ "ProductID": 1,
+ "ProductName": "Chai",
+ "SupplierID": 1,
+ "CategoryID": 1,
+ "QuantityPerUnit": "10 boxes x 20 bags",
+ "UnitPrice": 18,
+ "UnitsInStock": 39,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 10,
+ "Discontinued": false,
+ "OrderDate": "2012-02-12",
+ "Rating": 5,
+ "Locations": [
+ {
+ "Shop": "Fun-Tasty Co.",
+ "LastInventory": "2018-06-12"
+ },
+ {
+ "Shop": "Farmer Market",
+ "LastInventory": "2018-04-04"
+ }
+ ]
+ },
+ {
+ "ProductID": 2,
+ "ProductName": "Chang",
+ "SupplierID": 1,
+ "CategoryID": 1,
+ "QuantityPerUnit": "24 - 12 oz bottles",
+ "UnitPrice": 19,
+ "UnitsInStock": 17,
+ "UnitsOnOrder": 40,
+ "ReorderLevel": 25,
+ "Discontinued": true,
+ "OrderDate": "2003-03-17",
+ "Rating": 5,
+ "Locations": [
+ {
+ "Shop": "Super Market",
+ "LastInventory": "2018-09-09"
+ }
+ ]
+ },
+ {
+ "ProductID": 3,
+ "ProductName": "Aniseed Syrup",
+ "SupplierID": 1,
+ "CategoryID": 2,
+ "QuantityPerUnit": "12 - 550 ml bottles",
+ "UnitPrice": 10,
+ "UnitsInStock": 13,
+ "UnitsOnOrder": 70,
+ "ReorderLevel": 25,
+ "Discontinued": false,
+ "OrderDate": "2006-03-17",
+ "Rating": 3,
+ "Locations": [
+ {
+ "Shop": "Farmer Market",
+ "LastInventory": "2018-04-04"
+ },
+ {
+ "Shop": "Street Market",
+ "LastInventory": "2018-12-12"
+ },
+ {
+ "Shop": "24/7 Market",
+ "LastInventory": "2018-11-11"
+ }
+ ]
+ },
+ {
+ "ProductID": 4,
+ "ProductName": "Chef Antons Cajun Seasoning",
+ "SupplierID": 2,
+ "CategoryID": 2,
+ "QuantityPerUnit": "48 - 6 oz jars",
+ "UnitPrice": 22,
+ "UnitsInStock": 53,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 0,
+ "Discontinued": false,
+ "OrderDate": "2016-03-17",
+ "Rating": 3,
+ "Locations": [
+ {
+ "Shop": "Fun-Tasty Co.",
+ "LastInventory": "2018-06-12"
+ },
+ {
+ "Shop": "Farmer Market",
+ "LastInventory": "2018-04-04"
+ },
+ {
+ "Shop": "Street Market",
+ "LastInventory": "2018-12-12"
+ }
+ ]
+ },
+ {
+ "ProductID": 5,
+ "ProductName": "Chef Antons Gumbo Mix",
+ "SupplierID": 2,
+ "CategoryID": 2,
+ "QuantityPerUnit": "36 boxes",
+ "UnitPrice": 21.35,
+ "UnitsInStock": 0,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 0,
+ "Discontinued": true,
+ "OrderDate": "2011-11-11",
+ "Rating": 5,
+ "Locations": [
+ {
+ "Shop": "Super Market",
+ "LastInventory": "2018-09-09"
+ }
+ ]
+ },
+ {
+ "ProductID": 6,
+ "ProductName": "Grandmas Boysenberry Spread",
+ "SupplierID": 3,
+ "CategoryID": 2,
+ "QuantityPerUnit": "12 - 8 oz jars",
+ "UnitPrice": 25,
+ "UnitsInStock": 0,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 25,
+ "Discontinued": false,
+ "OrderDate": "2017-12-17",
+ "Rating": 4,
+ "Locations": [
+ {
+ "Shop": "Super Market",
+ "LastInventory": "2018-09-09"
+ }
+ ]
+ },
+ {
+ "ProductID": 7,
+ "ProductName": "Uncle Bobs Organic Dried Pears",
+ "SupplierID": 3,
+ "CategoryID": 7,
+ "QuantityPerUnit": "12 - 1 lb pkgs.",
+ "UnitPrice": 30,
+ "UnitsInStock": 150,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 10,
+ "Discontinued": false,
+ "OrderDate": "2016-07-17",
+ "Rating": 5,
+ "Locations": [
+ {
+ "Shop": "Fun-Tasty Co.",
+ "LastInventory": "2018-06-12"
+ },
+ {
+ "Shop": "Farmer Market",
+ "LastInventory": "2018-04-04"
+ },
+ {
+ "Shop": "Street Market",
+ "LastInventory": "2018-12-12"
+ }
+ ]
+ },
+ {
+ "ProductID": 8,
+ "ProductName": "Northwoods Cranberry Sauce",
+ "SupplierID": 3,
+ "CategoryID": 2,
+ "QuantityPerUnit": "12 - 12 oz jars",
+ "UnitPrice": 40,
+ "UnitsInStock": 6,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 0,
+ "Discontinued": false,
+ "OrderDate": "2018-01-17",
+ "Rating": 4,
+ "Locations": [
+ {
+ "Shop": "Fun-Tasty Co.",
+ "LastInventory": "2018-06-12"
+ },
+ {
+ "Shop": "Farmer Market",
+ "LastInventory": "2018-04-04"
+ }
+ ]
+ },
+ {
+ "ProductID": 9,
+ "ProductName": "Mishi Kobe Niku",
+ "SupplierID": 4,
+ "CategoryID": 6,
+ "QuantityPerUnit": "18 - 500 g pkgs.",
+ "UnitPrice": 97,
+ "UnitsInStock": 29,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 0,
+ "Discontinued": true,
+ "OrderDate": "2010-02-17",
+ "Rating": 4,
+ "Locations": [
+ {
+ "Shop": "Farmer Market",
+ "LastInventory": "2018-04-04"
+ }
+ ]
+ },
+ {
+ "ProductID": 10,
+ "ProductName": "Ikura",
+ "SupplierID": 4,
+ "CategoryID": 8,
+ "QuantityPerUnit": "12 - 200 ml jars",
+ "UnitPrice": 31,
+ "UnitsInStock": 31,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 0,
+ "Discontinued": false,
+ "OrderDate": "2008-05-17",
+ "Rating": 3,
+ "Locations": [
+ {
+ "Shop": "Wall Market",
+ "LastInventory": "2018-12-06"
+ }
+ ]
+ },
+ {
+ "ProductID": 11,
+ "ProductName": "Queso Cabrales",
+ "SupplierID": 5,
+ "CategoryID": 4,
+ "QuantityPerUnit": "1 kg pkg.",
+ "UnitPrice": 21,
+ "UnitsInStock": 22,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 30,
+ "Discontinued": false,
+ "OrderDate": "2009-01-17",
+ "Rating": 5,
+ "Locations": [
+ {
+ "Shop": "Fun-Tasty Co.",
+ "LastInventory": "2018-06-12"
+ },
+ {
+ "Shop": "Farmer Market",
+ "LastInventory": "2018-04-04"
+ }
+ ]
+ },
+ {
+ "ProductID": 12,
+ "ProductName": "Queso Manchego La Pastora",
+ "SupplierID": 5,
+ "CategoryID": 4,
+ "QuantityPerUnit": "10 - 500 g pkgs.",
+ "UnitPrice": 38,
+ "UnitsInStock": 86,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 0,
+ "Discontinued": false,
+ "OrderDate": "2015-11-17",
+ "Rating": 3,
+ "Locations": [
+ {
+ "Shop": "Farmer Market",
+ "LastInventory": "2018-04-04"
+ }
+ ]
+ },
+ {
+ "ProductID": 13,
+ "ProductName": "Konbu",
+ "SupplierID": 6,
+ "CategoryID": 8,
+ "QuantityPerUnit": "2 kg box",
+ "UnitPrice": 6,
+ "UnitsInStock": 24,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 5,
+ "Discontinued": false,
+ "OrderDate": "2015-03-17",
+ "Rating": 2,
+ "Locations": [
+ {
+ "Shop": "Super Market",
+ "LastInventory": "2018-09-09"
+ }
+ ]
+ },
+ {
+ "ProductID": 14,
+ "ProductName": "Tofu",
+ "SupplierID": 6,
+ "CategoryID": 7,
+ "QuantityPerUnit": "40 - 100 g pkgs.",
+ "UnitPrice": 23.25,
+ "UnitsInStock": 35,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 0,
+ "Discontinued": false,
+ "OrderDate": "2017-06-17",
+ "Rating": 4,
+ "Locations": [
+ {
+ "Shop": "Farmer Market",
+ "LastInventory": "2018-04-04"
+ },
+ {
+ "Shop": "Street Market",
+ "LastInventory": "2018-12-12"
+ }
+ ]
+ },
+ {
+ "ProductID": 15,
+ "ProductName": "Genen Shouyu",
+ "SupplierID": 6,
+ "CategoryID": 2,
+ "QuantityPerUnit": "24 - 250 ml bottles",
+ "UnitPrice": 15.5,
+ "UnitsInStock": 39,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 5,
+ "Discontinued": false,
+ "OrderDate": "2014-03-17",
+ "Rating": 4,
+ "Locations": [
+ {
+ "Shop": "Local Market",
+ "LastInventory": "2018-07-03"
+ },
+ {
+ "Shop": "Wall Market",
+ "LastInventory": "2018-12-06"
+ }
+ ]
+ },
+ {
+ "ProductID": 16,
+ "ProductName": "Pavlova",
+ "SupplierID": 7,
+ "CategoryID": 3,
+ "QuantityPerUnit": "32 - 500 g boxes",
+ "UnitPrice": 17.45,
+ "UnitsInStock": 29,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 10,
+ "Discontinued": false,
+ "OrderDate": "2018-03-28",
+ "Rating": 2,
+ "Locations": [
+ {
+ "Shop": "Farmer Market",
+ "LastInventory": "2018-04-04"
+ },
+ {
+ "Shop": "Street Market",
+ "LastInventory": "2018-12-12"
+ },
+ {
+ "Shop": "24/7 Market",
+ "LastInventory": "2018-11-11"
+ }
+ ]
+ },
+ {
+ "ProductID": 17,
+ "ProductName": "Alice Mutton",
+ "SupplierID": 7,
+ "CategoryID": 6,
+ "QuantityPerUnit": "20 - 1 kg tins",
+ "UnitPrice": 39,
+ "UnitsInStock": 0,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 0,
+ "Discontinued": true,
+ "OrderDate": "2015-08-17",
+ "Rating": 2,
+ "Locations": [
+ {
+ "Shop": "Farmer Market",
+ "LastInventory": "2018-04-04"
+ }
+ ]
+ },
+ {
+ "ProductID": 18,
+ "ProductName": "Carnarvon Tigers",
+ "SupplierID": 7,
+ "CategoryID": 8,
+ "QuantityPerUnit": "16 kg pkg.",
+ "UnitPrice": 62.5,
+ "UnitsInStock": 42,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 0,
+ "Discontinued": false,
+ "OrderDate": "2005-09-27",
+ "Rating": 2,
+ "Locations": [
+ {
+ "Shop": "24/7 Market",
+ "LastInventory": "2018-11-11"
+ },
+ {
+ "Shop": "Super Market",
+ "LastInventory": "2018-09-09"
+ }
+ ]
+ },
+ {
+ "ProductID": 19,
+ "ProductName": "Teatime Chocolate Biscuits",
+ "SupplierID": 8,
+ "CategoryID": 3,
+ "QuantityPerUnit": "",
+ "UnitPrice": 9.2,
+ "UnitsInStock": 25,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 5,
+ "Discontinued": false,
+ "OrderDate": "2001-03-17",
+ "Rating": 2,
+ "Locations": [
+ {
+ "Shop": "Local Market",
+ "LastInventory": "2018-07-03"
+ }
+ ]
+ },
+ {
+ "ProductID": 20,
+ "ProductName": "Sir Rodneys Marmalade",
+ "SupplierID": 8,
+ "CategoryID": 3,
+ "QuantityPerUnit": "4 - 100 ml jars",
+ "UnitPrice": 4.5,
+ "UnitsInStock": 40,
+ "UnitsOnOrder": 30,
+ "ReorderLevel": 0,
+ "Discontinued": false,
+ "OrderDate": "2005-03-17",
+ "Rating": 5,
+ "Locations": [
+ {
+ "Shop": "Super Market",
+ "LastInventory": "2018-09-09"
+ }
+ ]
+ }
+]
\ No newline at end of file
diff --git a/samples/grids/grid/localization/src/index.css b/samples/grids/grid/localization/src/index.css
new file mode 100644
index 000000000..9284baeee
--- /dev/null
+++ b/samples/grids/grid/localization/src/index.css
@@ -0,0 +1,6 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.igx-grid-toolbar__title {
+ font-size: 1.25rem;
+}
\ No newline at end of file
diff --git a/samples/grids/grid/localization/src/index.ts b/samples/grids/grid/localization/src/index.ts
new file mode 100644
index 000000000..a772239e7
--- /dev/null
+++ b/samples/grids/grid/localization/src/index.ts
@@ -0,0 +1,102 @@
+import 'igniteui-webcomponents-grids/grids/combined';
+import { IgcGridComponent, registerI18n, setCurrentI18n } from 'igniteui-webcomponents-grids/grids';
+import NwindData from './NwindData.json';
+import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
+import "./index.css";
+import {
+ ResourceStringsBG,
+ ResourceStringsCS,
+ ResourceStringsDA,
+ ResourceStringsDE,
+ ResourceStringsES,
+ ResourceStringsFR,
+ ResourceStringsHU,
+ ResourceStringsIT,
+ ResourceStringsJA,
+ ResourceStringsKO,
+ ResourceStringsNB,
+ ResourceStringsNL,
+ ResourceStringsPL,
+ ResourceStringsPT,
+ ResourceStringsRO,
+ ResourceStringsSV,
+ ResourceStringsTR,
+ ResourceStringsZHHANS,
+ ResourceStringsZHHANT
+} from 'igniteui-i18n-resources';
+
+import { defineComponents, IgcSelectComponent, IgcSelectItemComponent, IgcInputComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcSelectComponent, IgcSelectItemComponent, IgcInputComponent);
+
+export class Sample {
+
+ private grid: IgcGridComponent;
+
+ private _bind: () => void;
+
+ constructor() {
+ const grid = this.grid = document.getElementById('grid') as IgcGridComponent;
+
+ // Partial custom Hindi locale (same as Angular sample)
+ const partialCustomHindi = {
+ grid_summary_count: 'गणना',
+ grid_summary_min: 'न्यून',
+ grid_summary_max: 'अधिक',
+ grid_summary_sum: 'योग',
+ grid_summary_average: 'औसत'
+ };
+
+ // Register locales
+ registerI18n(ResourceStringsBG, 'bg');
+ registerI18n(ResourceStringsCS, 'cs');
+ registerI18n(ResourceStringsDA, 'da');
+ registerI18n(ResourceStringsDE, 'de');
+ registerI18n(ResourceStringsES, 'es');
+ registerI18n(ResourceStringsFR, 'fr');
+ registerI18n(ResourceStringsHU, 'hu');
+ registerI18n(ResourceStringsIT, 'it');
+ registerI18n(ResourceStringsJA, 'ja');
+ registerI18n(ResourceStringsKO, 'ko');
+ registerI18n(ResourceStringsNB, 'nb');
+ registerI18n(ResourceStringsNL, 'nl');
+ registerI18n(ResourceStringsPL, 'pl');
+ registerI18n(ResourceStringsPT, 'pt');
+ registerI18n(ResourceStringsRO, 'ro');
+ registerI18n(ResourceStringsSV, 'sv');
+ registerI18n(ResourceStringsTR, 'tr');
+ registerI18n(ResourceStringsZHHANS, 'zh-Hans');
+ registerI18n(ResourceStringsZHHANT, 'zh-Hant');
+ registerI18n(partialCustomHindi, 'hi');
+
+ const localeSelect = document.getElementById('localeSelect') as IgcSelectComponent;
+
+ const applyLocale = (locale: string) => {
+ setCurrentI18n(locale);
+ grid.locale = locale;
+ };
+
+ // Initial value reflecting the default locale
+ const initialLocale = localeSelect.value || 'en';
+ localeSelect.value = initialLocale;
+ applyLocale(initialLocale);
+
+ // User changes reaction
+ localeSelect.addEventListener('igcChange', (e: CustomEvent) => {
+ applyLocale(e.detail.value);
+ });
+
+
+ this._bind = () => {
+ grid.data = this.nwindData;
+ };
+ this._bind();
+ }
+
+ private _nwindData: any[] = NwindData;
+ public get nwindData(): any[] {
+ return this._nwindData;
+ }
+}
+
+new Sample();
diff --git a/samples/grids/grid/localization/tsconfig.json b/samples/grids/grid/localization/tsconfig.json
new file mode 100644
index 000000000..e7c370def
--- /dev/null
+++ b/samples/grids/grid/localization/tsconfig.json
@@ -0,0 +1,41 @@
+{
+ "compilerOptions": {
+ "noImplicitReturns": true,
+ "esModuleInterop": true,
+ "resolveJsonModule": true,
+ "noImplicitAny": true,
+ "declarationDir": "dist/types",
+ "moduleResolution": "node",
+ "declaration": true,
+ "target": "es2015",
+ "module": "es2015",
+ "strict": true,
+ "strictNullChecks": false,
+ "baseUrl": ".",
+ "paths": {
+ "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+ "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
+ "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
+ "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
+ "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
+ "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
+ "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
+ "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
+ "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
+ "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
+ "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
+ "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
+ "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
+ "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
+ "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ],
+ "igniteui-webcomponents-dashboards": [ "node_modules/igniteui-webcomponents-dashboards", "node_modules/@infragistics/igniteui-webcomponents-dashboards" ]
+ }
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "node_modules",
+ "dist"
+ ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid/localization/tslint.json b/samples/grids/grid/localization/tslint.json
new file mode 100644
index 000000000..e3b56e93a
--- /dev/null
+++ b/samples/grids/grid/localization/tslint.json
@@ -0,0 +1,54 @@
+{
+ "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+ "linterOptions": {
+ "exclude": [
+ "node_modules/**/*.ts",
+ "**/odatajs-4.0.0.js",
+ "src/images/*.*"
+ ]
+ },
+ "rules": {
+ "curly": [false, "ignore-same-line"],
+ "jsx-no-lambda": false,
+ "jsx-self-close": false,
+ "jsx-wrap-multiline": false,
+ "max-classes-per-file": [true, 10],
+ "member-ordering": false,
+ "no-console": false,
+ "no-string-literal": false,
+ "no-unused-vars": false,
+ "no-useless-constructor": false,
+ "no-trailing-whitespace": false,
+ "no-var": false,
+ "no-var-requires": false,
+ "no-var-keyword": false,
+ "ordered-imports": false,
+ "object-literal-sort-keys": false,
+ "object-literal-shorthand": false,
+ "only-arrow-functions": false,
+ "prefer-const": false,
+ "prefer-for-of": false,
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/type-annotation-spacing": "off"
+ },
+ "jsRules": {
+ "curly": [false, "ignore-same-line"],
+ "jsx-no-lambda": false,
+ "jsx-self-close": false,
+ "jsx-wrap-multiline": false,
+ "max-classes-per-file": [true, 10],
+ "no-console": false,
+ "no-unused-vars": false,
+ "no-useless-constructor": false,
+ "no-var-requires": false,
+ "object-literal-sort-keys": false,
+ "object-literal-shorthand": false,
+ "only-arrow-functions": false,
+ "ordered-imports": false,
+ "prefer-const": false,
+ "prefer-for-of": false,
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-useless-constructor": "off"
+ }
+ }
\ No newline at end of file
diff --git a/samples/grids/grid/localization/webpack.config.js b/samples/grids/grid/localization/webpack.config.js
new file mode 100644
index 000000000..e90479cd7
--- /dev/null
+++ b/samples/grids/grid/localization/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+ const nodeEnv = process.env.NODE_ENV || 'development';
+ const isProd = nodeEnv === 'production';
+ const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+ console.log(">> webpack nodeEnv=" + nodeEnv);
+ console.log(">> webpack isProd=" + isProd);
+ console.log(">> webpack isLegacy=" + isLegacy);
+ const presets = [
+ ["@babel/preset-env", {
+ "useBuiltIns": "usage",
+ "corejs": 3,
+ "targets": {
+ "browsers": isLegacy ? ["defaults"] : [
+ "last 2 Chrome versions",
+ "last 2 Safari versions",
+ "last 2 iOS versions",
+ "last 2 Firefox versions",
+ "last 2 Edge versions"]
+ }
+ }],
+ "@babel/preset-typescript"
+ ];
+
+ return {
+ entry: isLegacy ? [
+ path.resolve(__dirname, 'src')
+ ] : path.resolve(__dirname, 'src'),
+ devtool: isProd ? false : 'source-map',
+ output: {
+ filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+ globalObject: 'this',
+ path: path.resolve(__dirname, 'dist'),
+ },
+
+ resolve: {
+ mainFields: ['esm2015', 'module', 'main'],
+ extensions: ['.ts', '.js', '.json'],
+ plugins: [new TsconfigPathsPlugin({
+ configFile: './tsconfig.json',
+ extensions: ['.ts', '.js'],
+ mainFields: ['esm2015', 'module', 'main']
+ })]
+ },
+
+ module: {
+ rules: [
+ { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+ { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+ { test: /\.xml$/, use: ['xml-loader'] },
+ { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+ {
+ test: /worker\.(ts|js)$/,
+ use: [
+ { loader: 'worker-loader' },
+ {
+ loader: 'babel-loader', options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-transform-class-static-block",
+ "@babel/plugin-transform-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ }
+ }
+ ]
+ },
+ {
+ test: /\.(ts|js)$/, loader: 'babel-loader',
+ options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-transform-class-static-block",
+ "@babel/plugin-transform-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ },
+ exclude:
+ function (modulePath) {
+ return /node_modules/.test(modulePath) &&
+ !/igniteui-webcomponents/.test(modulePath) &&
+ !/lit-html/.test(modulePath);
+ }
+ }],
+ },
+
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+ }),
+ new HtmlWebpackPlugin({
+ title: 'for-cs',
+ template: 'index.html'
+ }),
+ new ForkTsCheckerWebpackPlugin()
+ ]
+ };
+};