chore(deps): bump grid lite and igniteui-webcomponents; grid lite changelog (#16970)

Author: damyanpetev

CHANGELOG.md

@@ -59,6 +59,33 @@ All notable changes for each version of this project will be documented in this
         - **Theming & Styling** - Theming & Styling (includes MCP server setup for live theming tools)
     - These skills are automatically discovered when placed in the agent's skills path ( e.g. `.claude/skills`) and this release ships with an optional migration to add those to your project. For more information, see the [README](README.md#ai-assisted-development).
 
+- Added `IgxGridLiteComponent` wrapper around the `igc-grid-lite` Web Component _(in Developer Preview)_ 
+
+  Available from the `igniteui-angular/grids/lite` entry point. The wrapper component adds Angular-friendly API with similar inputs, including two-way bindable `sortingExpressions` and `filteringExpressions`, Angular template-based cell and header rendering with declarative templates via the `igxGridLiteCell` and `igxGridLiteHeader` directives.
+
+    ```
+    npm i igniteui-grid-lite
+    ```
+    ```ts
+    import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteHeaderTemplateDirective, IgxGridLiteCellTemplateDirective } from "igniteui-angular/grids/lite";
+
+    @Component({
+        selector: 'app-grid-lite-sample',
+        templateUrl: 'grid-lite.sample.html',
+        imports: [IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteHeaderTemplateDirective, IgxGridLiteCellTemplateDirective]
+    })
+    export class GridLiteSampleComponent { }
+    ```
+    ```html
+    <igx-grid-lite [data]="data">
+        <igx-grid-lite-column field="name" header="Name" [sortable]="true">
+            <ng-template igxGridLiteCell let-value>
+                <strong>{{ value }}</strong>
+            </ng-template>
+        </igx-grid-lite-column>
+    </igx-grid-lite>
+    ```
+
 ### General
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`, `IgxPivotGrid`

package-lock.json

@@ -126,10 +126,10 @@
     "hammerjs": "^2.0.8",
     "ig-typedoc-theme": "^7.0.1",
     "igniteui-dockmanager": "^1.17.0",
-    "igniteui-grid-lite": "~0.5.0",
+    "igniteui-grid-lite": "^0.6.0",
     "igniteui-i18n-resources": "^1.0.2",
     "igniteui-sassdoc-theme": "^2.1.0",
-    "igniteui-webcomponents": "^6.5.0",
+    "igniteui-webcomponents": "^7.0.0",
     "jasmine": "^5.6.0",
     "jasmine-core": "^5.6.0",
     "karma": "^6.4.4",

package.json

@@ -32,6 +32,8 @@ class IgxGridLite<T extends object = any> extends IgcGridLite<T> {
  * @fires sorted - Emitted when a sort operation initiated through the UI has completed.
  * @fires filtering - Emitted when filtering is initiated through the UI.
  * @fires filtered - Emitted when a filter operation initiated through the UI has completed.
+ *
+ * @developerPreview 21.1.0
  */
 @Component({
     selector: 'igx-grid-lite',

projects/igniteui-angular/grids/lite/src/grid-lite.component.ts

@@ -86,8 +86,8 @@
         "@angular/forms": "21",
         "hammerjs": "^2.0.8",
         "@types/hammerjs": "^2.0.46",
-        "igniteui-webcomponents": "^6.5.0",
-        "igniteui-grid-lite": "~0.5.0"
+        "igniteui-webcomponents": "^7.0.0",
+        "igniteui-grid-lite": "~0.6.0"
     },
     "peerDependenciesMeta": {
         "hammerjs": {