─Actions
diff --git a/browser/tasks/gulp-samples.js b/browser/tasks/gulp-samples.js
index 8d049e3c2..d94e551f9 100644
--- a/browser/tasks/gulp-samples.js
+++ b/browser/tasks/gulp-samples.js
@@ -1011,7 +1011,8 @@ function updateIG(cb) {
{ version: "6.3.0-beta.0", name: "igniteui-webcomponents-spreadsheet" },
{ version: "6.3.0-beta.0", name: "igniteui-webcomponents-datasources" },
{ version: "6.3.0-beta.0", name: "igniteui-webcomponents-dashboards" },
- // these IG packages are sometimes updated:
+ // these IG packages are sometimes updated:
+ { version: "^1.0.0-alpha.9", name: "igniteui-grid-lite" },
{ version: "6.2.0", name: "igniteui-webcomponents-grids" },
{ version: "^6.3.1" , name: "igniteui-webcomponents" },
{ version: "1.16.0", name: "igniteui-dockmanager" },
diff --git a/package-lock.json b/package-lock.json
index 0e56351e2..8f94fd003 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,6 +56,7 @@
"gulp-flatten": "^0.4.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.6.4",
+ "igniteui-grid-lite": "^1.0.0-alpha.9",
"igniteui-webcomponents": "^6.3.1",
"igniteui-webcomponents-charts": "6.3.0-beta.0",
"igniteui-webcomponents-core": "6.3.0-beta.0",
@@ -1918,13 +1919,13 @@
"license": "0BSD"
},
"node_modules/@lit/context": {
- "version": "1.1.3",
- "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.3.tgz",
- "integrity": "sha512-Auh37F4S0PZM93HTDfZWs97mmzaQ7M3vnTc9YvxAGyP3UItSK/8Fs0vTOGT+njuvOwbKio/l8Cx/zWL4vkutpQ==",
+ "version": "1.1.6",
+ "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.6.tgz",
+ "integrity": "sha512-M26qDE6UkQbZA2mQ3RjJ3Gzd8TxP+/0obMgE5HfkfLhEEyYE3Bui4A5XHiGPjy0MUGAyxB3QgVuw2ciS0kHn6A==",
"dev": true,
"license": "BSD-3-Clause",
"dependencies": {
- "@lit/reactive-element": "^1.6.2 || ^2.0.0"
+ "@lit/reactive-element": "^1.6.2 || ^2.1.0"
}
},
"node_modules/@lit/reactive-element": {
@@ -2753,6 +2754,330 @@
"node": ">= 8"
}
},
+ "node_modules/@parcel/watcher": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+ "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+ "hasInstallScript": true,
+ "license": "MIT",
+ "optional": true,
+ "peer": true,
+ "dependencies": {
+ "detect-libc": "^1.0.3",
+ "is-glob": "^4.0.3",
+ "micromatch": "^4.0.5",
+ "node-addon-api": "^7.0.0"
+ },
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ },
+ "optionalDependencies": {
+ "@parcel/watcher-android-arm64": "2.5.1",
+ "@parcel/watcher-darwin-arm64": "2.5.1",
+ "@parcel/watcher-darwin-x64": "2.5.1",
+ "@parcel/watcher-freebsd-x64": "2.5.1",
+ "@parcel/watcher-linux-arm-glibc": "2.5.1",
+ "@parcel/watcher-linux-arm-musl": "2.5.1",
+ "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+ "@parcel/watcher-linux-arm64-musl": "2.5.1",
+ "@parcel/watcher-linux-x64-glibc": "2.5.1",
+ "@parcel/watcher-linux-x64-musl": "2.5.1",
+ "@parcel/watcher-win32-arm64": "2.5.1",
+ "@parcel/watcher-win32-ia32": "2.5.1",
+ "@parcel/watcher-win32-x64": "2.5.1"
+ }
+ },
+ "node_modules/@parcel/watcher-android-arm64": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+ "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-darwin-arm64": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+ "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-darwin-x64": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+ "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-freebsd-x64": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+ "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-arm-glibc": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+ "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+ "cpu": [
+ "arm"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-arm-musl": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+ "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+ "cpu": [
+ "arm"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-arm64-glibc": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+ "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-arm64-musl": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+ "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-x64-glibc": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+ "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-x64-musl": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+ "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-win32-arm64": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+ "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-win32-ia32": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+ "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+ "cpu": [
+ "ia32"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-win32-x64": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+ "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "peer": true,
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher/node_modules/detect-libc": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+ "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+ "license": "Apache-2.0",
+ "optional": true,
+ "peer": true,
+ "bin": {
+ "detect-libc": "bin/detect-libc.js"
+ },
+ "engines": {
+ "node": ">=0.10"
+ }
+ },
"node_modules/@shikijs/core": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.15.0.tgz",
@@ -4627,7 +4952,7 @@
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"fill-range": "^7.0.1"
},
@@ -7349,7 +7674,7 @@
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"to-regex-range": "^5.0.1"
},
@@ -9223,6 +9548,38 @@
"igniteui-trial-watermark": "^1.0.3"
}
},
+ "node_modules/igniteui-grid-lite": {
+ "version": "1.0.0-alpha.9",
+ "resolved": "https://registry.npmjs.org/igniteui-grid-lite/-/igniteui-grid-lite-1.0.0-alpha.9.tgz",
+ "integrity": "sha512-LxyUDHf/lTTbAAupup8HovSKsy1qgTUp4btrWVRQDFq2HI2s75UroplNGSX1yLfy3VCMEf8xY0sciM2tyFgzQQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@lit-labs/virtualizer": "~2.1.0",
+ "@lit/context": "~1.1.5",
+ "igniteui-webcomponents": "~6.1.0",
+ "lit": "^3.3.0"
+ },
+ "engines": {
+ "node": ">=20"
+ }
+ },
+ "node_modules/igniteui-grid-lite/node_modules/igniteui-webcomponents": {
+ "version": "6.1.2",
+ "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.1.2.tgz",
+ "integrity": "sha512-q3a3Q28xzRwDBmfDprY0PsN9cs5xgqOJigXWWmbWAfcMgPg5dIrPyMDV6Aj6GD7u1RgPeoZmTP/pz9gTWNhHJA==",
+ "dev": true,
+ "license": "SEE LICENSE IN LICENSE",
+ "dependencies": {
+ "@floating-ui/dom": "^1.7.0",
+ "@lit-labs/virtualizer": "^2.1.0",
+ "@lit/context": "^1.1.0",
+ "lit": "^3.3.0"
+ },
+ "engines": {
+ "node": ">=20"
+ }
+ },
"node_modules/igniteui-theming": {
"version": "19.1.1",
"resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-19.1.1.tgz",
@@ -9555,6 +9912,13 @@
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
"dev": true
},
+ "node_modules/immutable": {
+ "version": "5.1.4",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
+ "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+ "license": "MIT",
+ "peer": true
+ },
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -9845,7 +10209,7 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
- "dev": true,
+ "devOptional": true,
"engines": {
"node": ">=0.10.0"
}
@@ -9863,7 +10227,7 @@
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"is-extglob": "^2.1.1"
},
@@ -9916,7 +10280,7 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
- "dev": true,
+ "devOptional": true,
"engines": {
"node": ">=0.12.0"
}
@@ -11577,7 +11941,7 @@
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"braces": "^3.0.2",
"picomatch": "^2.3.1"
@@ -11857,6 +12221,14 @@
"integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==",
"dev": true
},
+ "node_modules/node-addon-api": {
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+ "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+ "license": "MIT",
+ "optional": true,
+ "peer": true
+ },
"node_modules/node-forge": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -12539,7 +12911,7 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
- "dev": true,
+ "devOptional": true,
"engines": {
"node": ">=8.6"
},
@@ -13620,6 +13992,57 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
+ "node_modules/sass": {
+ "version": "1.94.1",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.1.tgz",
+ "integrity": "sha512-/YVm5FRQaRlr3oNh2LLFYne1PdPlRZGyKnHh1sLleOqLcohTR4eUUvBjBIqkl1fEXd1MGOHgzJGJh+LgTtV4KQ==",
+ "license": "MIT",
+ "peer": true,
+ "dependencies": {
+ "chokidar": "^4.0.0",
+ "immutable": "^5.0.2",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ },
+ "bin": {
+ "sass": "sass.js"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "optionalDependencies": {
+ "@parcel/watcher": "^2.4.1"
+ }
+ },
+ "node_modules/sass/node_modules/chokidar": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+ "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+ "license": "MIT",
+ "peer": true,
+ "dependencies": {
+ "readdirp": "^4.0.1"
+ },
+ "engines": {
+ "node": ">= 14.16.0"
+ },
+ "funding": {
+ "url": "https://paulmillr.com/funding/"
+ }
+ },
+ "node_modules/sass/node_modules/readdirp": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+ "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+ "license": "MIT",
+ "peer": true,
+ "engines": {
+ "node": ">= 14.18.0"
+ },
+ "funding": {
+ "type": "individual",
+ "url": "https://paulmillr.com/funding/"
+ }
+ },
"node_modules/sax": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
@@ -15037,7 +15460,7 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"is-number": "^7.0.0"
},
diff --git a/package.json b/package.json
index 7449bc56a..d4d7abd78 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
"gulp-flatten": "^0.4.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.6.4",
+ "igniteui-grid-lite": "^1.0.0-alpha.9",
"igniteui-webcomponents": "^6.3.1",
"igniteui-webcomponents-charts": "6.3.0-beta.0",
"igniteui-webcomponents-core": "6.3.0-beta.0",
diff --git a/samples/charts/data-chart/user-annotation-layer/ReadMe.md b/samples/charts/data-chart/user-annotation-layer/ReadMe.md
index d013f37d4..d59a36634 100644
--- a/samples/charts/data-chart/user-annotation-layer/ReadMe.md
+++ b/samples/charts/data-chart/user-annotation-layer/ReadMe.md
@@ -1,7 +1,7 @@
-This folder contains implementation of Web Components application with example of Actions Built In Data Chart feature using [Toolbar](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+This folder contains implementation of Web Components application with example of User Annotation Layer feature using [Data Chart](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
@@ -12,10 +12,10 @@ This folder contains implementation of Web Components application with example o
-
+
-
+
@@ -33,7 +33,7 @@ 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/charts/toolbar/actions-built-in-data-chart
+cd ./samples/charts/data-chart/user-annotation-layer
```
open above folder in VS Code or type:
diff --git a/samples/grids/grid-lite/column-config-dynamic/.prettierrc b/samples/grids/grid-lite/column-config-dynamic/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-dynamic/.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-lite/column-config-dynamic/ReadMe.md b/samples/grids/grid-lite/column-config-dynamic/ReadMe.md
new file mode 100644
index 000000000..db3e13aa3
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-dynamic/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Config Dynamic feature using [Grid Lite](https://infragistics.com/webcomponentssite/components/general-getting-started.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-lite/column-config-dynamic
+```
+
+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-lite/column-config-dynamic/index.html b/samples/grids/grid-lite/column-config-dynamic/index.html
new file mode 100644
index 000000000..493133a9b
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-dynamic/index.html
@@ -0,0 +1,28 @@
+
+
+
+
Grid Lite Dynamic Column Config | Ignite UI | Web Components
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <% if (false) { %><% } %>
+
+
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-dynamic/package.json b/samples/grids/grid-lite/column-config-dynamic/package.json
new file mode 100644
index 000000000..6d584d260
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-dynamic/package.json
@@ -0,0 +1,59 @@
+{
+ "name": "grid-lite-column-config-simple-example",
+ "description": "Grid Lite Column Config Simple sample 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-webcomponents-core": "6.3.0-beta.0",
+ "igniteui-grid-lite": "latest",
+ "igniteui-webcomponents": "6.3.0-beta.0",
+ "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"
+ }
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-dynamic/sandbox.config.json b/samples/grids/grid-lite/column-config-dynamic/sandbox.config.json
new file mode 100644
index 000000000..52c787510
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-dynamic/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-lite/column-config-dynamic/src/GridLiteDataService.ts b/samples/grids/grid-lite/column-config-dynamic/src/GridLiteDataService.ts
new file mode 100644
index 000000000..aa34be2d5
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-dynamic/src/GridLiteDataService.ts
@@ -0,0 +1,122 @@
+export type UserSimple = {
+ id: string;
+ username: string;
+ email: string;
+ subscribed: boolean;
+};
+
+export type ProductInfo = {
+ id: string;
+ name: string;
+ price: number;
+ sold: number;
+ rating: number;
+ total: number;
+};
+
+export type User = {
+ id: string;
+ firstName: string;
+ lastName: string;
+ age: number;
+ email: string;
+ avatar: string;
+ active: boolean;
+ priority: 'Low' | 'Standard' | 'High';
+ satisfaction: number;
+ registeredAt: Date;
+};
+
+export class GridLiteDataService {
+ private counter = 0;
+
+ private firstNames = ['John', 'Jane', 'Bob', 'Alice', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Henry',
+ 'Ivy', 'Jack', 'Kate', 'Liam', 'Mia', 'Noah', 'Olivia', 'Peter', 'Quinn', 'Rachel'];
+ private lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis',
+ 'Rodriguez', 'Martinez', 'Wilson', 'Anderson', 'Taylor', 'Thomas', 'Moore', 'Jackson', 'White', 'Harris'];
+ private productNames = ['Widget', 'Gadget', 'Doohickey', 'Thingamajig', 'Gizmo', 'Contraption',
+ 'Device', 'Tool', 'Apparatus', 'Instrument', 'Machine', 'Equipment'];
+ private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High'];
+
+ private randomInt(min: number, max: number): number {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ private randomFloat(min: number, max: number, precision = 2): number {
+ const array = new Uint32Array(1);
+ window.crypto.getRandomValues(array);
+ const random01 = array[0] / 2 ** 32;
+ return parseFloat((random01 * (max - min) + min).toFixed(precision));
+ }
+
+ private randomElement
(array: T[]): T {
+ return array[this.randomInt(0, array.length - 1)];
+ }
+
+ private randomBoolean(): boolean {
+ const array = new Uint8Array(1);
+ window.crypto.getRandomValues(array);
+ return (array[0] & 1) === 0;
+ }
+
+ private generateId(): string {
+ return `${Date.now()}-${this.counter++}-${this.randomInt(1000, 9999)}`;
+ }
+
+ createProductInfo(): ProductInfo {
+ const price = this.randomFloat(50, 500, 2);
+ const sold = this.randomInt(10, 100);
+ const total = parseFloat((price * sold).toFixed(2));
+
+ return {
+ price,
+ sold,
+ total,
+ id: this.generateId(),
+ name: `${this.randomElement(this.productNames)} ${this.randomElement(['Pro', 'Plus', 'Max', 'Ultra', 'Mini', 'Lite'])}`,
+ rating: this.randomFloat(0, 5, 1)
+ };
+ }
+
+ createUserSimple(): UserSimple {
+ const firstName = this.randomElement(this.firstNames);
+ const lastName = this.randomElement(this.lastNames);
+ return {
+ id: this.generateId(),
+ username: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${this.randomInt(1, 99)}`,
+ email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`,
+ subscribed: this.randomBoolean()
+ };
+ }
+
+ createUser(): User {
+ const firstName = this.randomElement(this.firstNames);
+ const lastName = this.randomElement(this.lastNames);
+ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`;
+
+ return {
+ id: this.generateId(),
+ firstName,
+ lastName,
+ age: this.randomInt(18, 90),
+ email,
+ avatar: `https://i.pravatar.cc/150?img=${this.randomInt(1, 70)}`,
+ active: this.randomBoolean(),
+ priority: this.randomElement(this.priorities),
+ satisfaction: this.randomInt(0, 5),
+ registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000))
+ };
+ }
+
+ generateUsers(count: number): User[] {
+ return Array.from({ length: count }, () => this.createUser());
+ }
+
+ generateProducts(count: number): ProductInfo[] {
+ return Array.from({ length: count }, () => this.createProductInfo());
+ }
+
+ generateSimpleUsers(count: number): UserSimple[] {
+ return Array.from({ length: count }, () => this.createUserSimple());
+ }
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-dynamic/src/index.css b/samples/grids/grid-lite/column-config-dynamic/src/index.css
new file mode 100644
index 000000000..6e21273af
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-dynamic/src/index.css
@@ -0,0 +1,28 @@
+.controls-wrapper {
+ margin-bottom: 1rem;
+ display: flex;
+ gap: 0.5rem;
+}
+
+.sample-button {
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+}
+
+.sample-button:hover {
+ background-color: #0056b3;
+}
+
+.grid-lite-wrapper {
+ width: 100%;
+ height: 100%;
+}
+
+igc-grid-lite {
+ min-height: 65vh;
+ --ig-size: 2;
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-dynamic/src/index.ts b/samples/grids/grid-lite/column-config-dynamic/src/index.ts
new file mode 100644
index 000000000..22ff2d0bd
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-dynamic/src/index.ts
@@ -0,0 +1,56 @@
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, User } from './GridLiteDataService';
+
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import "./index.css";
+
+IgcGridLite.register();
+
+export class Sample {
+ private dataService: GridLiteDataService;
+ private gridLite: any;
+ private columns: any[] = [];
+ private availableColumns = [
+ { key: 'firstName', headerText: 'First Name' },
+ { key: 'lastName', headerText: 'Last Name' },
+ { key: 'age', headerText: 'Age', type: 'number' },
+ { key: 'email', headerText: 'Email' },
+ { key: 'priority', headerText: 'Priority' },
+ { key: 'satisfaction', headerText: 'Satisfaction', type: 'number' }
+ ];
+
+ constructor() {
+ this.dataService = new GridLiteDataService();
+ this.gridLite = document.getElementById('grid-lite') as any;
+ const data: User[] = this.dataService.generateUsers(50);
+
+ // Start with first two columns
+ this.columns = [
+ this.availableColumns[0],
+ this.availableColumns[1]
+ ];
+
+ this.gridLite.columns = this.columns;
+ this.gridLite.data = data;
+
+ // Setup button handlers
+ document.getElementById('addColumn')?.addEventListener('click', () => this.addColumn());
+ document.getElementById('removeColumn')?.addEventListener('click', () => this.removeColumn());
+ }
+
+ private addColumn() {
+ if (this.columns.length < this.availableColumns.length) {
+ this.columns.push(this.availableColumns[this.columns.length]);
+ this.gridLite.columns = [...this.columns];
+ }
+ }
+
+ private removeColumn() {
+ if (this.columns.length > 1) {
+ this.columns.pop();
+ this.gridLite.columns = [...this.columns];
+ }
+ }
+}
+
+new Sample();
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-dynamic/tslint.json b/samples/grids/grid-lite/column-config-dynamic/tslint.json
new file mode 100644
index 000000000..e3b56e93a
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-dynamic/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-lite/column-config-dynamic/webpack.config.js b/samples/grids/grid-lite/column-config-dynamic/webpack.config.js
new file mode 100644
index 000000000..e90479cd7
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-dynamic/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()
+ ]
+ };
+};
diff --git a/samples/grids/grid-lite/column-config-headers/.prettierrc b/samples/grids/grid-lite/column-config-headers/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-headers/.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-lite/column-config-headers/ReadMe.md b/samples/grids/grid-lite/column-config-headers/ReadMe.md
new file mode 100644
index 000000000..533cc4e05
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-headers/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Config Headers feature using [Grid Lite](https://infragistics.com/webcomponentssite/components/general-getting-started.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-lite/column-config-headers
+```
+
+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-lite/column-config-headers/index.html b/samples/grids/grid-lite/column-config-headers/index.html
new file mode 100644
index 000000000..b6fb684c4
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-headers/index.html
@@ -0,0 +1,24 @@
+
+
+
+ Grid Lite Column Headers | Ignite UI | Web Components
+
+
+
+
+
+
+
+
+
+
+
+ <% if (false) { %><% } %>
+
+
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-headers/package.json b/samples/grids/grid-lite/column-config-headers/package.json
new file mode 100644
index 000000000..6d584d260
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-headers/package.json
@@ -0,0 +1,59 @@
+{
+ "name": "grid-lite-column-config-simple-example",
+ "description": "Grid Lite Column Config Simple sample 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-webcomponents-core": "6.3.0-beta.0",
+ "igniteui-grid-lite": "latest",
+ "igniteui-webcomponents": "6.3.0-beta.0",
+ "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"
+ }
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-headers/sandbox.config.json b/samples/grids/grid-lite/column-config-headers/sandbox.config.json
new file mode 100644
index 000000000..52c787510
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-headers/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-lite/column-config-headers/src/GridLiteDataService.ts b/samples/grids/grid-lite/column-config-headers/src/GridLiteDataService.ts
new file mode 100644
index 000000000..aa34be2d5
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-headers/src/GridLiteDataService.ts
@@ -0,0 +1,122 @@
+export type UserSimple = {
+ id: string;
+ username: string;
+ email: string;
+ subscribed: boolean;
+};
+
+export type ProductInfo = {
+ id: string;
+ name: string;
+ price: number;
+ sold: number;
+ rating: number;
+ total: number;
+};
+
+export type User = {
+ id: string;
+ firstName: string;
+ lastName: string;
+ age: number;
+ email: string;
+ avatar: string;
+ active: boolean;
+ priority: 'Low' | 'Standard' | 'High';
+ satisfaction: number;
+ registeredAt: Date;
+};
+
+export class GridLiteDataService {
+ private counter = 0;
+
+ private firstNames = ['John', 'Jane', 'Bob', 'Alice', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Henry',
+ 'Ivy', 'Jack', 'Kate', 'Liam', 'Mia', 'Noah', 'Olivia', 'Peter', 'Quinn', 'Rachel'];
+ private lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis',
+ 'Rodriguez', 'Martinez', 'Wilson', 'Anderson', 'Taylor', 'Thomas', 'Moore', 'Jackson', 'White', 'Harris'];
+ private productNames = ['Widget', 'Gadget', 'Doohickey', 'Thingamajig', 'Gizmo', 'Contraption',
+ 'Device', 'Tool', 'Apparatus', 'Instrument', 'Machine', 'Equipment'];
+ private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High'];
+
+ private randomInt(min: number, max: number): number {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ private randomFloat(min: number, max: number, precision = 2): number {
+ const array = new Uint32Array(1);
+ window.crypto.getRandomValues(array);
+ const random01 = array[0] / 2 ** 32;
+ return parseFloat((random01 * (max - min) + min).toFixed(precision));
+ }
+
+ private randomElement(array: T[]): T {
+ return array[this.randomInt(0, array.length - 1)];
+ }
+
+ private randomBoolean(): boolean {
+ const array = new Uint8Array(1);
+ window.crypto.getRandomValues(array);
+ return (array[0] & 1) === 0;
+ }
+
+ private generateId(): string {
+ return `${Date.now()}-${this.counter++}-${this.randomInt(1000, 9999)}`;
+ }
+
+ createProductInfo(): ProductInfo {
+ const price = this.randomFloat(50, 500, 2);
+ const sold = this.randomInt(10, 100);
+ const total = parseFloat((price * sold).toFixed(2));
+
+ return {
+ price,
+ sold,
+ total,
+ id: this.generateId(),
+ name: `${this.randomElement(this.productNames)} ${this.randomElement(['Pro', 'Plus', 'Max', 'Ultra', 'Mini', 'Lite'])}`,
+ rating: this.randomFloat(0, 5, 1)
+ };
+ }
+
+ createUserSimple(): UserSimple {
+ const firstName = this.randomElement(this.firstNames);
+ const lastName = this.randomElement(this.lastNames);
+ return {
+ id: this.generateId(),
+ username: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${this.randomInt(1, 99)}`,
+ email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`,
+ subscribed: this.randomBoolean()
+ };
+ }
+
+ createUser(): User {
+ const firstName = this.randomElement(this.firstNames);
+ const lastName = this.randomElement(this.lastNames);
+ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`;
+
+ return {
+ id: this.generateId(),
+ firstName,
+ lastName,
+ age: this.randomInt(18, 90),
+ email,
+ avatar: `https://i.pravatar.cc/150?img=${this.randomInt(1, 70)}`,
+ active: this.randomBoolean(),
+ priority: this.randomElement(this.priorities),
+ satisfaction: this.randomInt(0, 5),
+ registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000))
+ };
+ }
+
+ generateUsers(count: number): User[] {
+ return Array.from({ length: count }, () => this.createUser());
+ }
+
+ generateProducts(count: number): ProductInfo[] {
+ return Array.from({ length: count }, () => this.createProductInfo());
+ }
+
+ generateSimpleUsers(count: number): UserSimple[] {
+ return Array.from({ length: count }, () => this.createUserSimple());
+ }
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-headers/src/index.css b/samples/grids/grid-lite/column-config-headers/src/index.css
new file mode 100644
index 000000000..2079f4e88
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-headers/src/index.css
@@ -0,0 +1,9 @@
+.grid-lite-wrapper {
+ width: 100%;
+ height: 100%;
+}
+
+igc-grid-lite {
+ min-height: 65vh;
+ --ig-size: 2;
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-headers/src/index.ts b/samples/grids/grid-lite/column-config-headers/src/index.ts
new file mode 100644
index 000000000..732b30321
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-headers/src/index.ts
@@ -0,0 +1,48 @@
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, User } from './GridLiteDataService';
+
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import "./index.css";
+
+IgcGridLite.register();
+
+export class Sample {
+ private dataService: GridLiteDataService;
+
+ constructor() {
+ this.dataService = new GridLiteDataService();
+ const gridLite = document.getElementById('grid-lite') as any;
+ const data: User[] = this.dataService.generateUsers(50);
+
+ const columns = [
+ {
+ key: 'id',
+ headerText: '🆔 ID',
+ width: '150px'
+ },
+ {
+ key: 'firstName',
+ headerText: '👤 First Name'
+ },
+ {
+ key: 'lastName',
+ headerText: '👤 Last Name'
+ },
+ {
+ key: 'age',
+ headerText: '🎂 Age',
+ type: 'number',
+ width: '100px'
+ },
+ {
+ key: 'email',
+ headerText: '📧 Email'
+ }
+ ];
+
+ gridLite.columns = columns;
+ gridLite.data = data;
+ }
+}
+
+new Sample();
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-headers/tslint.json b/samples/grids/grid-lite/column-config-headers/tslint.json
new file mode 100644
index 000000000..e3b56e93a
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-headers/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-lite/column-config-headers/webpack.config.js b/samples/grids/grid-lite/column-config-headers/webpack.config.js
new file mode 100644
index 000000000..e90479cd7
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-headers/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()
+ ]
+ };
+};
diff --git a/samples/grids/grid-lite/column-config-sample/.prettierrc b/samples/grids/grid-lite/column-config-sample/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-sample/.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-lite/column-config-sample/ReadMe.md b/samples/grids/grid-lite/column-config-sample/ReadMe.md
new file mode 100644
index 000000000..743b3229f
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-sample/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Column Config Sample feature using [Grid Lite](https://infragistics.com/webcomponentssite/components/general-getting-started.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-lite/column-config-sample
+```
+
+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-lite/column-config-sample/index.html b/samples/grids/grid-lite/column-config-sample/index.html
new file mode 100644
index 000000000..ca05a0a41
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-sample/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+ Grid Lite Column Config Simple | Ignite UI | Web Components | infragistics
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <% if (false) { %>
+
+ <% } %>
+
+
+
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-sample/package.json b/samples/grids/grid-lite/column-config-sample/package.json
new file mode 100644
index 000000000..6d584d260
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-sample/package.json
@@ -0,0 +1,59 @@
+{
+ "name": "grid-lite-column-config-simple-example",
+ "description": "Grid Lite Column Config Simple sample 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-webcomponents-core": "6.3.0-beta.0",
+ "igniteui-grid-lite": "latest",
+ "igniteui-webcomponents": "6.3.0-beta.0",
+ "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"
+ }
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-sample/sandbox.config.json b/samples/grids/grid-lite/column-config-sample/sandbox.config.json
new file mode 100644
index 000000000..52c787510
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-sample/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-lite/column-config-sample/src/GridLiteDataService.ts b/samples/grids/grid-lite/column-config-sample/src/GridLiteDataService.ts
new file mode 100644
index 000000000..aa34be2d5
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-sample/src/GridLiteDataService.ts
@@ -0,0 +1,122 @@
+export type UserSimple = {
+ id: string;
+ username: string;
+ email: string;
+ subscribed: boolean;
+};
+
+export type ProductInfo = {
+ id: string;
+ name: string;
+ price: number;
+ sold: number;
+ rating: number;
+ total: number;
+};
+
+export type User = {
+ id: string;
+ firstName: string;
+ lastName: string;
+ age: number;
+ email: string;
+ avatar: string;
+ active: boolean;
+ priority: 'Low' | 'Standard' | 'High';
+ satisfaction: number;
+ registeredAt: Date;
+};
+
+export class GridLiteDataService {
+ private counter = 0;
+
+ private firstNames = ['John', 'Jane', 'Bob', 'Alice', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Henry',
+ 'Ivy', 'Jack', 'Kate', 'Liam', 'Mia', 'Noah', 'Olivia', 'Peter', 'Quinn', 'Rachel'];
+ private lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis',
+ 'Rodriguez', 'Martinez', 'Wilson', 'Anderson', 'Taylor', 'Thomas', 'Moore', 'Jackson', 'White', 'Harris'];
+ private productNames = ['Widget', 'Gadget', 'Doohickey', 'Thingamajig', 'Gizmo', 'Contraption',
+ 'Device', 'Tool', 'Apparatus', 'Instrument', 'Machine', 'Equipment'];
+ private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High'];
+
+ private randomInt(min: number, max: number): number {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ private randomFloat(min: number, max: number, precision = 2): number {
+ const array = new Uint32Array(1);
+ window.crypto.getRandomValues(array);
+ const random01 = array[0] / 2 ** 32;
+ return parseFloat((random01 * (max - min) + min).toFixed(precision));
+ }
+
+ private randomElement(array: T[]): T {
+ return array[this.randomInt(0, array.length - 1)];
+ }
+
+ private randomBoolean(): boolean {
+ const array = new Uint8Array(1);
+ window.crypto.getRandomValues(array);
+ return (array[0] & 1) === 0;
+ }
+
+ private generateId(): string {
+ return `${Date.now()}-${this.counter++}-${this.randomInt(1000, 9999)}`;
+ }
+
+ createProductInfo(): ProductInfo {
+ const price = this.randomFloat(50, 500, 2);
+ const sold = this.randomInt(10, 100);
+ const total = parseFloat((price * sold).toFixed(2));
+
+ return {
+ price,
+ sold,
+ total,
+ id: this.generateId(),
+ name: `${this.randomElement(this.productNames)} ${this.randomElement(['Pro', 'Plus', 'Max', 'Ultra', 'Mini', 'Lite'])}`,
+ rating: this.randomFloat(0, 5, 1)
+ };
+ }
+
+ createUserSimple(): UserSimple {
+ const firstName = this.randomElement(this.firstNames);
+ const lastName = this.randomElement(this.lastNames);
+ return {
+ id: this.generateId(),
+ username: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${this.randomInt(1, 99)}`,
+ email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`,
+ subscribed: this.randomBoolean()
+ };
+ }
+
+ createUser(): User {
+ const firstName = this.randomElement(this.firstNames);
+ const lastName = this.randomElement(this.lastNames);
+ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`;
+
+ return {
+ id: this.generateId(),
+ firstName,
+ lastName,
+ age: this.randomInt(18, 90),
+ email,
+ avatar: `https://i.pravatar.cc/150?img=${this.randomInt(1, 70)}`,
+ active: this.randomBoolean(),
+ priority: this.randomElement(this.priorities),
+ satisfaction: this.randomInt(0, 5),
+ registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000))
+ };
+ }
+
+ generateUsers(count: number): User[] {
+ return Array.from({ length: count }, () => this.createUser());
+ }
+
+ generateProducts(count: number): ProductInfo[] {
+ return Array.from({ length: count }, () => this.createProductInfo());
+ }
+
+ generateSimpleUsers(count: number): UserSimple[] {
+ return Array.from({ length: count }, () => this.createUserSimple());
+ }
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-sample/src/index.css b/samples/grids/grid-lite/column-config-sample/src/index.css
new file mode 100644
index 000000000..4a470efda
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-sample/src/index.css
@@ -0,0 +1,9 @@
+.grid-lite-wrapper {
+ width: 100%;
+ height: 100%;
+}
+
+igc-grid-lite {
+ min-height: 65vh;
+ --ig-size: 2;
+}
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-sample/src/index.ts b/samples/grids/grid-lite/column-config-sample/src/index.ts
new file mode 100644
index 000000000..382c671d2
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-sample/src/index.ts
@@ -0,0 +1,73 @@
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+import { GridLiteDataService, ProductInfo } from './GridLiteDataService';
+
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import "./index.css";
+
+IgcGridLite.register();
+defineComponents(IgcRatingComponent);
+
+export class Sample {
+ private dataService: GridLiteDataService;
+ private formatter: Intl.NumberFormat;
+
+ constructor() {
+ this.dataService = new GridLiteDataService();
+ this.formatter = new Intl.NumberFormat('en-EN', {
+ style: 'currency',
+ currency: 'EUR'
+ });
+
+ const gridLite = document.getElementById('grid-lite') as any;
+ const data: ProductInfo[] = this.dataService.generateProducts(50);
+
+ const columns = [
+ {
+ key: 'name',
+ headerText: 'Product Name'
+ },
+ {
+ key: 'price',
+ headerText: 'Price',
+ type: 'number',
+ cellTemplate: (params: any) => {
+ const span = document.createElement('span');
+ span.textContent = this.formatter.format(params.value);
+ return span;
+ }
+ },
+ {
+ key: 'sold',
+ type: 'number',
+ headerText: 'Units sold'
+ },
+ {
+ key: 'total',
+ headerText: 'Total sold',
+ cellTemplate: (params: any) => {
+ const span = document.createElement('span');
+ span.textContent = this.formatter.format(params.value);
+ return span;
+ }
+ },
+ {
+ key: 'rating',
+ type: 'number',
+ headerText: 'Customer rating',
+ cellTemplate: (params: any) => {
+ const rating = document.createElement('igc-rating');
+ rating.setAttribute('readonly', '');
+ rating.setAttribute('step', '0.01');
+ rating.setAttribute('value', params.value.toString());
+ return rating;
+ }
+ }
+ ];
+
+ gridLite.columns = columns;
+ gridLite.data = data;
+ }
+}
+
+new Sample();
\ No newline at end of file
diff --git a/samples/grids/grid-lite/column-config-sample/tslint.json b/samples/grids/grid-lite/column-config-sample/tslint.json
new file mode 100644
index 000000000..e3b56e93a
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-sample/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-lite/column-config-sample/webpack.config.js b/samples/grids/grid-lite/column-config-sample/webpack.config.js
new file mode 100644
index 000000000..e90479cd7
--- /dev/null
+++ b/samples/grids/grid-lite/column-config-sample/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()
+ ]
+ };
+};
diff --git a/samples/grids/grid-lite/data-binding-dynamic/.prettierrc b/samples/grids/grid-lite/data-binding-dynamic/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/grids/grid-lite/data-binding-dynamic/.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-lite/data-binding-dynamic/ReadMe.md b/samples/grids/grid-lite/data-binding-dynamic/ReadMe.md
new file mode 100644
index 000000000..744828b6d
--- /dev/null
+++ b/samples/grids/grid-lite/data-binding-dynamic/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Data Binding Dynamic feature using [Grid Lite](https://infragistics.com/webcomponentssite/components/general-getting-started.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-lite/data-binding-dynamic
+```
+
+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-lite/data-binding-dynamic/index.html b/samples/grids/grid-lite/data-binding-dynamic/index.html
new file mode 100644
index 000000000..9e6af43e5
--- /dev/null
+++ b/samples/grids/grid-lite/data-binding-dynamic/index.html
@@ -0,0 +1,29 @@
+
+
+
+ Grid Lite Dynamic Data Binding | Ignite UI | Web Components
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Records: 0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
${entry}
`)
+ .join('');
+ }
+
+ private handleSorting(event: any) {
+ const { detail, type } = event;
+ const allowedColumns = ['price', 'total', 'sold'];
+
+ if (!allowedColumns.includes(detail.key)) {
+ event.preventDefault();
+ this.updateLog(
+ `${this.timeStamp} :: Event '${type}' :: Sort operation was prevented for column '${detail.key}'`
+ );
+ } else {
+ this.updateLog(
+ `${this.timeStamp} :: Event '${type}' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}`
+ );
+ }
+ }
+
+ private handleSorted(event: any) {
+ const { detail, type } = event;
+ this.updateLog(
+ `${this.timeStamp} :: Event '${type}' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}`
+ );
+ }
+}
+
+new Sample();
\ No newline at end of file
diff --git a/samples/grids/grid-lite/sorting-events/tslint.json b/samples/grids/grid-lite/sorting-events/tslint.json
new file mode 100644
index 000000000..e3b56e93a
--- /dev/null
+++ b/samples/grids/grid-lite/sorting-events/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-lite/sorting-events/webpack.config.js b/samples/grids/grid-lite/sorting-events/webpack.config.js
new file mode 100644
index 000000000..e90479cd7
--- /dev/null
+++ b/samples/grids/grid-lite/sorting-events/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()
+ ]
+ };
+};
diff --git a/samples/grids/grid-lite/sorting-grid-config/.prettierrc b/samples/grids/grid-lite/sorting-grid-config/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/grids/grid-lite/sorting-grid-config/.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-lite/sorting-grid-config/ReadMe.md b/samples/grids/grid-lite/sorting-grid-config/ReadMe.md
new file mode 100644
index 000000000..4546fef6c
--- /dev/null
+++ b/samples/grids/grid-lite/sorting-grid-config/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Sorting Grid Config feature using [Grid Lite](https://infragistics.com/webcomponentssite/components/general-getting-started.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-lite/sorting-grid-config
+```
+
+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-lite/sorting-grid-config/index.html b/samples/grids/grid-lite/sorting-grid-config/index.html
new file mode 100644
index 000000000..a4cab07c9
--- /dev/null
+++ b/samples/grids/grid-lite/sorting-grid-config/index.html
@@ -0,0 +1,33 @@
+
+
+
+ Grid Lite Sorting Configuration | Ignite UI | Web Components
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enable multi-sort
+
+
+ Enable tri-state sorting
+
+
+
+
+
+
+