igniteui-angular 21.1.0-rc.5 → 21.1.1

package/skills/igniteui-angular-grids/references/types.md

@@ -5,6 +5,14 @@
 > For shared column config, sorting, filtering, selection — see [`structure.md`](./structure.md).
 > For editing, grouping, toolbar, export — see [`features.md`](./features.md).
 
+## Contents
+
+- [Tree Grid](#tree-grid)
+- [Hierarchical Grid](#hierarchical-grid)
+- [Grid Lite](#grid-lite)
+- [Pivot Grid](#pivot-grid)
+- [Key Rules](#key-rules)
+
 ## Tree Grid
 
 > **Docs:** [Tree Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid)
@@ -161,7 +169,9 @@ onChildGridCreated(event: IGridCreatedEventArgs) {
 
 The **lightest grid option** — an open-source (MIT licensed) Web Component with an Angular wrapper. Use it for **read-only data display** with sorting, filtering, column hiding/resizing, and row virtualization. It has **no editing, no selection, no paging, no grouping, no summaries, no export**.
 
-> **When to recommend Grid Lite vs. Flat Grid**: If the user only needs to display data with basic sorting/filtering and doesn't need editing, batch operations, paging, grouping, summaries, or export, Grid Lite is the lighter, faster choice. If any of those enterprise features are needed, use the Flat Grid.
+> **When to recommend Grid Lite vs. Flat Grid**: If the user only needs to display data with basic sorting/filtering and doesn't need editing, batch operations, paging, grouping, summaries, or export, Grid Lite is the lighter, faster choice. If any of those enterprise features are needed, **upgrade strictly to `igx-grid` (`IgxGridComponent`)** from `igniteui-angular/grids/grid` — do NOT recommend other non-grid components as a substitute.
+
+> **AGENT INSTRUCTION — Grid Lite → Grid Upgrade**: When a user is working with `igx-grid-lite` and you identify that their requirements exceed Grid Lite's capabilities (e.g., they need editing, selection, paging, grouping, summaries, export, row operations, or any feature not available in Grid Lite), you MUST recommend upgrading to `igx-grid` (`IgxGridComponent`). Never suggest a different component type — the upgrade path from Grid Lite is always to `igx-grid`. Replace `IgxGridLiteComponent` with `IgxGridComponent`, update imports from `igniteui-angular/grids/lite` to `igniteui-angular/grids/grid`, use `IGX_GRID_DIRECTIVES` instead of individual Grid Lite imports, and remove `CUSTOM_ELEMENTS_SCHEMA`.
 
 ### Installation
 
@@ -331,6 +341,27 @@ dataPipeline: IgxGridLiteDataPipelineConfiguration<Product> = {
 </igx-grid-lite>
 ```
 
+### Grid Lite Events
+
+| Event | Cancelable | Payload |
+|---|---|---|
+| `(sorting)` | Yes (`event.detail.cancel = true`) | Sorting expression about to be applied |
+| `(sorted)` | No | Sorting completed |
+| `(filtering)` | Yes (`event.detail.cancel = true`) | Filter expression about to be applied |
+| `(filtered)` | No | Filtering completed |
+
+### Grid Lite Limitations
+
+These features are **NOT available** in Grid Lite:
+- Editing (cell, row, batch) — no `[editable]`, no `beginEdit()`, no transactions
+- Grouping — no `groupBy()`, no `IgxGroupByRow`
+- Paging — no `IgxPaginatorComponent`
+- Summaries — no `IgxSummaryOperand`
+- Selection — no `rowSelection`, `cellSelection`, or `columnSelection`
+- State persistence — no `IgxGridStateDirective`
+- Export — no `IgxExcelExporterService` or `IgxCsvExporterService`
+- Advanced filtering — no `advancedFilteringExpressionsTree`
+
 ### Grid Lite Key Differences from Flat Grid
 
 - **Separate package**: `npm install igniteui-grid-lite`
@@ -354,41 +385,91 @@ For **pivot table analytics** where users reshape data by dragging dimensions be
 > **IMPORTANT**: The Pivot Grid is fundamentally different from the other three grids. Standard grid features like cell editing, row editing, batch editing, paging, column pinning, column moving, row dragging, and standard filtering/sorting are **disabled**. All data operations are driven by the `pivotConfiguration`.
 
 ```typescript
-import { Component, ChangeDetectionStrategy, signal, viewChild } from '@angular/core';
-import { IgxPivotGridComponent, IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
-import { IPivotConfiguration, IgxPivotNumericAggregate } from 'igniteui-angular/grids/pivot-grid';
+import { Component } from "@angular/core";
+import { DATA } from '../../data/pivot-data';
+
+import { IPivotConfiguration, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core';
+import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid';
 
 @Component({
-  selector: 'app-sales-pivot',
-  imports: [IGX_PIVOT_GRID_DIRECTIVES],
-  templateUrl: './sales-pivot.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+    selector: 'app-pivot-grid-basic-sample',
+    styleUrls: ['./pivot-grid-basic-sample.component.scss'],
+    templateUrl: './pivot-grid-basic-sample.component.html',
+    imports: [IgxPivotGridComponent]
 })
-export class SalesPivotComponent {
-  pivotGridRef = viewChild.required<IgxPivotGridComponent>('pivotGrid');
-  salesData = signal<Sale[]>([]);
-
-  pivotConfig: IPivotConfiguration = {
-    columns: [{ memberName: 'Quarter', enabled: true }],
-    rows: [{ memberName: 'Region', enabled: true }],
-    values: [{
-      member: 'Revenue',
-      aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'SUM', label: 'Sum' },
-      enabled: true
-    }],
-    filters: [{ memberName: 'Year', enabled: true }]
-  };
+export class PivotGridBasicSampleComponent {
+    public data = DATA;
+    public pivotConfigHierarchy: IPivotConfiguration = {
+        columns: [
+            {
+
+                memberName: 'Product',
+                memberFunction: (data) => data.Product.Name,
+                enabled: true
+            }
+            
+        ],
+        rows: [
+            {
+                memberName: 'Seller',
+                memberFunction: (data) => data.Seller.Name,
+                enabled: true
+            }
+        ],
+        values: [
+            {
+                member: 'NumberOfUnits',
+                aggregate: {
+                    aggregator: IgxPivotNumericAggregate.sum,
+                    key: 'sum',
+                    label: 'Sum'
+                },
+                enabled: true
+
+            }
+        ],
+        filters: null
+    };
 }
 ```
 
 ```html
-<igx-pivot-grid #pivotGrid
-  [data]="salesData()"
-  [pivotConfiguration]="pivotConfig"
-  height="600px">
+<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy" height="500px">
 </igx-pivot-grid>
 ```
 
+```json
+export const DATA = [
+    {
+        Product: {
+            Name: 'Clothing',
+            UnitPrice: '12.814860936633712'
+        },
+        Seller: {
+            Name: 'Stanley Brooker',
+            City: 'Seattle'
+        },
+        Date: '2007-01-01T00:00:00',
+        Value: '94.2652032683907',
+        NumberOfUnits: '282'
+    },
+    {
+        Product: {
+            Name: 'Clothing',
+            UnitPrice: '49.579375120615296'
+        },
+        Seller: {
+            Name: 'Elisa Longbottom',
+            City: 'Sofia'
+        },
+        Date: '2007-01-05T00:00:00',
+        Value: '70.798922689072285',
+        NumberOfUnits: '296'
+    }
+    ...
+];
+```
+
 ### Pivot Data Selector
 
 Provide a drag-and-drop UI for users to reshape the pivot interactively:

package/skills/igniteui-angular-theming/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: igniteui-angular-theming
-description: "Customize Ignite UI components styling using the igniteui-theming MCP server for AI-assisted theming. Use when users ask to theme or restyle Ignite UI components, change the color palette, switch between light and dark themes, apply or generate a global theme, customize typography or elevations, or configure component-level styles."
-user-invokable: true
+description: "Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens. Do NOT use for component behavior, APIs, or data binding — use igniteui-angular-components or igniteui-angular-grids instead."
+user-invocable: true
 ---
 
 # Ignite UI for Angular — Theming Skill
@@ -29,71 +29,7 @@ This skill teaches AI agents how to theme Ignite UI for Angular applications usi
 
 ## Setting Up the Theming MCP Server
 
-The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available.
-
-### VS Code
-
-Create or edit `.vscode/mcp.json` in your project:
-
-```json
-{
-  "servers": {
-    "igniteui-theming": {
-      "command": "npx",
-      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
-    }
-  }
-}
-```
-
-This works whether `igniteui-theming` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases.
-
-### Cursor
-
-Create or edit `.cursor/mcp.json`:
-
-```json
-{
-  "mcpServers": {
-    "igniteui-theming": {
-      "command": "npx",
-      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
-    }
-  }
-}
-```
-
-### Claude Desktop
-
-Edit the Claude Desktop config file:
-- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
-- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
-
-```json
-{
-  "mcpServers": {
-    "igniteui-theming": {
-      "command": "npx",
-      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
-    }
-  }
-}
-```
-
-### WebStorm / JetBrains IDEs
-
-1. Go to **Settings → Tools → AI Assistant → MCP Servers**
-2. Click **+ Add MCP Server**
-3. Set Command to `npx` and Arguments to `igniteui-theming igniteui-theming-mcp`
-4. Click OK and restart the AI Assistant
-
-### Verifying the Setup
-
-After configuring the MCP server, ask your AI assistant:
-
-> "Detect which Ignite UI platform my project uses"
-
-If the MCP server is running, the `detect_platform` tool will analyze your `package.json` and return the detected platform (e.g., `angular`).
+> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/mcp-setup.md`](./references/mcp-setup.md).** Read that file for editor-specific configuration steps and verification.
 
 ## Theming Architecture
 
@@ -474,41 +410,7 @@ Everything else must use `var(--ig-<family>-<shade>)` tokens.
 
 ## Common Patterns
 
-### Switching Between Light and Dark Themes
-
-```scss
-@use 'igniteui-angular/theming' as *;
-
-$light-palette: palette($primary: #1976D2, $secondary: #FF9800, $surface: #FAFAFA);
-$dark-palette: palette($primary: #90CAF9, $secondary: #FFB74D, $surface: #121212);
-
-@include core();
-@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
-
-// Light is default
-@include theme($palette: $light-palette, $schema: $light-material-schema);
-
-// Dark via class on <body> or <html>
-.dark-theme {
-  @include theme($palette: $dark-palette, $schema: $dark-material-schema);
-}
-```
-
-### Scoping a Theme to a Container
-
-```scss
-.admin-panel {
-  @include theme($palette: $admin-palette, $schema: $light-indigo-schema);
-}
-```
-
-### Licensed Package Users
-
-If using the licensed `@infragistics/igniteui-angular` package, set `licensed: true` on MCP tool calls and change the Sass import:
-
-```scss
-@use '@infragistics/igniteui-angular/theming' as *;
-```
+> **Light/dark theme switching, scoped themes, and licensed package configuration are in [`references/common-patterns.md`](./references/common-patterns.md).** Read that file for ready-to-use Sass patterns.
 
 ## Key Rules
 
@@ -524,7 +426,5 @@ If using the licensed `@infragistics/igniteui-angular` package, set `licensed: t
 
 ## Related Skills
 
-- [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) — Form controls, application setup, architecture, and import patterns
-- [`igniteui-angular-components-layout`](../igniteui-angular-components-layout/SKILL.md) — Layout, data display, feedback/overlay components, and directives
-- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — Data Grid structure, column configuration, sorting, filtering, selection
-- [`igniteui-angular-grids-types`](../igniteui-angular-grids-types/SKILL.md) — Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid specifics
+- [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) — UI components (form controls, layout, data display, feedback/overlays, directives, charts)
+- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — Data Grids (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid)

package/skills/igniteui-angular-theming/references/common-patterns.md

@@ -0,0 +1,45 @@
+# Common Theming Patterns
+
+> **Part of the [`igniteui-angular-theming`](../SKILL.md) skill hub.**
+
+## Contents
+
+- [Switching Between Light and Dark Themes](#switching-between-light-and-dark-themes)
+- [Scoping a Theme to a Container](#scoping-a-theme-to-a-container)
+- [Licensed Package Users](#licensed-package-users)
+
+## Switching Between Light and Dark Themes
+
+```scss
+@use 'igniteui-angular/theming' as *;
+
+$light-palette: palette($primary: #1976D2, $secondary: #FF9800, $surface: #FAFAFA);
+$dark-palette: palette($primary: #90CAF9, $secondary: #FFB74D, $surface: #121212);
+
+@include core();
+@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
+
+// Light is default
+@include theme($palette: $light-palette, $schema: $light-material-schema);
+
+// Dark via class on <body> or <html>
+.dark-theme {
+  @include theme($palette: $dark-palette, $schema: $dark-material-schema);
+}
+```
+
+## Scoping a Theme to a Container
+
+```scss
+.admin-panel {
+  @include theme($palette: $admin-palette, $schema: $light-indigo-schema);
+}
+```
+
+## Licensed Package Users
+
+If using the licensed `@infragistics/igniteui-angular` package, set `licensed: true` on MCP tool calls and change the Sass import:
+
+```scss
+@use '@infragistics/igniteui-angular/theming' as *;
+```

package/skills/igniteui-angular-theming/references/mcp-setup.md

@@ -0,0 +1,77 @@
+# Setting Up the Theming MCP Server
+
+> **Part of the [`igniteui-angular-theming`](../SKILL.md) skill hub.**
+
+## Contents
+
+- [VS Code](#vs-code)
+- [Cursor](#cursor)
+- [Claude Desktop](#claude-desktop)
+- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides)
+- [Verifying the Setup](#verifying-the-setup)
+
+The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available.
+
+## VS Code
+
+Create or edit `.vscode/mcp.json` in your project:
+
+```json
+{
+  "servers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
+
+This works whether `igniteui-theming` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases.
+
+## Cursor
+
+Create or edit `.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
+
+## Claude Desktop
+
+Edit the Claude Desktop config file:
+- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
+
+```json
+{
+  "mcpServers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
+
+## WebStorm / JetBrains IDEs
+
+1. Go to **Settings → Tools → AI Assistant → MCP Servers**
+2. Click **+ Add MCP Server**
+3. Set Command to `npx` and Arguments to `igniteui-theming igniteui-theming-mcp`
+4. Click OK and restart the AI Assistant
+
+## Verifying the Setup
+
+After configuring the MCP server, ask your AI assistant:
+
+> "Detect which Ignite UI platform my project uses"
+
+If the MCP server is running, the `detect_platform` tool will analyze your `package.json` and return the detected platform (e.g., `angular`).

package/types/igniteui-angular-grids-grid.d.ts

@@ -2071,6 +2071,7 @@ declare abstract class IgxGridBaseDirective implements GridType, OnInit, DoCheck
     private _sortDescendingHeaderIconTemplate;
     private _gridSize;
     private _defaultRowHeight;
+    private _borderSize;
     private _rowCount;
     private _cellMergeMode;
     private _columnsToMerge;

package/types/igniteui-angular-grids-lite.d.ts

@@ -114,6 +114,8 @@ type IgxGridLiteFilteringExpression<T extends object = any> = FilterExpression<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
  */
 declare class IgxGridLiteComponent<T extends object = any> implements OnInit {
     private readonly gridRef;