igniteui-angular 21.2.5 → 21.2.7

package/skills/igniteui-angular-components/references/feedback.md

@@ -18,8 +18,6 @@ This reference gives high-level guidance on when to use each feedback and overla
 
 ## Dialog
 
-> **Docs:** [Dialog Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog)
-
 ```typescript
 import { IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective } from 'igniteui-angular/dialog';
 import { IgxButtonDirective } from 'igniteui-angular/directives';
@@ -31,7 +29,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
   [isModal]="true"
   [closeOnEscape]="true"
   [closeOnOutsideSelect]="false"
-  title="Confirm Delete"
   (closed)="onDialogClosed()">
   <igx-dialog-title>Confirm Delete</igx-dialog-title>
   <p>Are you sure you want to delete this item? This action cannot be undone.</p>
@@ -57,10 +54,8 @@ Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(leftButtonSelect)`,
 
 ## Snackbar
 
-> **Docs:** [Snackbar Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar)
-
 ```typescript
-import { IgxSnackbarComponent, IgxSnackbarActionDirective } from 'igniteui-angular/snackbar';
+import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
 import { IgxButtonDirective } from 'igniteui-angular/directives';
 ```
 
@@ -69,9 +64,10 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
   #snackbar
   [displayTime]="3000"
   [autoHide]="true"
+  actionText="UNDO"
+  (clicked)="undo()"
   (animationDone)="onSnackbarDone()">
   Item saved successfully
-  <button igxButton="flat" igxSnackbarAction (click)="undo()">UNDO</button>
 </igx-snackbar>
 ```
 
@@ -88,8 +84,6 @@ save() {
 
 ## Toast
 
-> **Docs:** [Toast Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)
-
 ```typescript
 import { IgxToastComponent } from 'igniteui-angular/toast';
 ```
@@ -104,8 +98,6 @@ Toast vs Snackbar: Toast is non-interactive (no action button), always auto-hide
 
 ## Banner
 
-> **Docs:** [Banner Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner)
-
 ```typescript
 import { IgxBannerComponent, IgxBannerActionsDirective } from 'igniteui-angular/banner';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -114,12 +106,12 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
 
 ```html
 <igx-banner #banner (closed)="onBannerClosed()">
-  <igx-icon igxBannerIcon>wifi_off</igx-icon>
+  <igx-icon>wifi_off</igx-icon>
   You are offline. Some features may not be available.
-  <div igxBannerActions>
-    <button igxButton="flat" (click)="banner.dismiss()">Dismiss</button>
+  <igx-banner-actions>
+    <button igxButton="flat" (click)="banner.close()">Dismiss</button>
     <button igxButton="flat" (click)="retry()">Retry</button>
-  </div>
+  </igx-banner-actions>
 </igx-banner>
 ```
 

package/skills/igniteui-angular-components/references/form-controls.md

@@ -15,6 +15,7 @@
 - [Calendar](#calendar)
 - [Checkbox, Radio, Switch](#checkbox-radio-switch)
 - [Slider](#slider)
+- [Autocomplete](#autocomplete)
 - [Reactive Forms Integration](#reactive-forms-integration)
 - [Key Rules](#key-rules)
 
@@ -23,8 +24,6 @@ This reference gives high-level guidance on when to use each form control compon
 
 ## Input Group
 
-> **Docs:** [Input Group](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input-group)
-
 ```typescript
 import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -44,8 +43,6 @@ Types: `line` (default), `border`, `box`, `search`.
 
 ## Combo (Multi-Select Dropdown)
 
-> **Docs:** [Combo Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo)
-
 ```typescript
 import { IgxComboComponent } from 'igniteui-angular/combo';
 ```
@@ -68,8 +65,6 @@ Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(selectionChanging)`,
 
 ## Simple Combo (Single-Select)
 
-> **Docs:** [Combo — Single Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo#single-selection)
-
 ```typescript
 import { IgxSimpleComboComponent } from 'igniteui-angular/simple-combo';
 ```
@@ -88,8 +83,6 @@ Same API as `igx-combo` but restricted to single selection.
 
 ## Select
 
-> **Docs:** [Select Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select)
-
 ```typescript
 import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
 ```
@@ -104,8 +97,6 @@ import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/sel
 
 ## Date Picker
 
-> **Docs:** [Date Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-picker)
-
 ```typescript
 import { IgxDatePickerComponent } from 'igniteui-angular/date-picker';
 ```
@@ -124,8 +115,6 @@ Implements `ControlValueAccessor` and `Validator`. Works with both reactive and
 
 ## Date Range Picker
 
-> **Docs:** [Date Range Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-range-picker)
-
 ```typescript
 import { IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent } from 'igniteui-angular/date-picker';
 import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives';
@@ -193,8 +182,6 @@ Common two-input configuration with calendar toggles:
 
 ## Time Picker
 
-> **Docs:** [Time Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/time-picker)
-
 ```typescript
 import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
 ```
@@ -202,15 +189,12 @@ import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
 ```html
 <igx-time-picker
   [(ngModel)]="selectedTime"
-  [inputFormat]="'HH:mm'"
-  [is24HourFormat]="true">
+  [inputFormat]="'HH:mm'">
 </igx-time-picker>
 ```
 
 ## Calendar
 
-> **Docs:** [Calendar Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar)
-
 ```typescript
 import { IgxCalendarComponent } from 'igniteui-angular/calendar';
 ```
@@ -228,8 +212,6 @@ Selection modes: `'single'`, `'multi'`, `'range'`.
 
 ## Checkbox, Radio, Switch
 
-> **Docs:** [Checkbox](https://www.infragistics.com/products/ignite-ui-angular/angular/components/checkbox) · [Radio Button](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio-button) · [Switch](https://www.infragistics.com/products/ignite-ui-angular/angular/components/switch)
-
 ```typescript
 import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
 import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio';
@@ -249,8 +231,6 @@ import { IgxSwitchComponent } from 'igniteui-angular/switch';
 
 ## Slider
 
-> **Docs:** [Slider Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider)
-
 ```typescript
 import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider';
 
@@ -275,12 +255,37 @@ public sliderType = IgxSliderType;
 </igx-slider>
 ```
 
+## Autocomplete
+
+```typescript
+import { IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down';
+import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
+```
+
+```html
+<igx-input-group type="border">
+  <label igxLabel>City</label>
+  <input igxInput type="text"
+    [(ngModel)]="selectedCity"
+    [igxAutocomplete]="citiesPanel" />
+</igx-input-group>
+<igx-drop-down #citiesPanel>
+  @for (city of cities | startsWith:selectedCity; track city) {
+    <igx-drop-down-item [value]="city">
+      {{ city }}
+    </igx-drop-down-item>
+  }
+</igx-drop-down>
+```
+
+The `igxAutocomplete` directive attaches to an input and displays a drop-down of suggestions as the user types. It references an `igx-drop-down` via a template variable.
+
+Filtering is **not** built in — use a pipe or filter the data in the component to control which items appear.
+
 ## Reactive Forms Integration
 
 All form controls implement `ControlValueAccessor` and work with both reactive and template-driven forms.
 
-> **Docs:** [Angular Reactive Form Validation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/angular-reactive-form-validation)
-
 ```typescript
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
@@ -354,6 +359,11 @@ export class MyFormComponent {
 - Date/Time pickers implement both `ControlValueAccessor` and `Validator` — they integrate with reactive forms natively
 - For `igx-date-range-picker` with separate start and end inputs, use this structure for both inputs: `igx-picker-toggle igxPrefix`, then `input igxInput igxDateTimeEditor`, then optional `igx-picker-clear igxSuffix`.
 - Do not use a plain `igx-prefix` / `igx-suffix` icon for calendar or clear actions.
+- How to choose between Combo, Simple Combo, Select, and Auto-complete:
+  - Use `igx-combo` for multi-select dropdowns with built-in filtering and grouping
+  - Use `igx-simple-combo` for single-select dropdowns with built-in filtering and grouping
+  - Use `igx-select` for simple single-select dropdowns without filtering or grouping (or when you want to provide custom filtering UI)
+  - Use `igxAutocomplete` for input fields with dynamic suggestions based on user input
 
 ## See Also
 

package/skills/igniteui-angular-components/references/layout-manager.md

@@ -16,8 +16,6 @@ This reference gives high-level guidance on when to use each layout manager comp
 
 ## Layout Manager Directives
 
-> **Docs:** [Layout Manager](https://www.infragistics.com/products/ignite-ui-angular/angular/components/layout)
-
 The Layout Manager is a pair of Angular directives (`igxLayout` / `igxFlex`) that wrap CSS Flexbox. Apply `igxLayout` to any container to control its children's flow; apply `igxFlex` to individual children to control their flex properties.
 
 ```typescript
@@ -115,9 +113,6 @@ import { IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular/directive
 
 ## Dock Manager
 
-> **Docs:** [Dock Manager (Angular)](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dock-manager)
-> **Full API Docs:** [Dock Manager Web Component](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/dock-manager.html)
-
 The Dock Manager is a **separate package** (`igniteui-dockmanager`) and is implemented as a **Web Component** (`<igc-dockmanager>`). It provides IDE-style dockable, resizable, floating, and tabbed pane layouts. It is a **premium** (licensed) component.
 
 ### Installation
@@ -130,12 +125,11 @@ npm install igniteui-dockmanager
 
 Because Dock Manager is a Web Component, it requires two one-time setup steps:
 
-**1. Register custom elements — `main.ts`:**
+**1. Register custom elements — `app.config.ts`:**
 
 ```typescript
 import { defineCustomElements } from 'igniteui-dockmanager/loader';
 
-// Must be called before bootstrapApplication
 defineCustomElements();
 ```
 
@@ -366,50 +360,10 @@ export class DockManagerComponent {
 </igc-dockmanager>
 ```
 
-### Pane Types
-
-| `IgcDockManagerPaneType` | Purpose |
-|---|---|
-| `splitPane` | Splits space horizontally or vertically between child panes |
-| `contentPane` | A single leaf pane that renders a slotted element via `contentId` |
-| `tabGroupPane` | Groups multiple `contentPane` children as tabs |
-| `documentHost` | A special area for `documentOnly: true` panes (like an editor area) |
-
-### `IgcSplitPaneOrientation`
-
-| Value | Layout |
-|---|---|
-| `horizontal` | Children placed left-to-right |
-| `vertical` | Children placed top-to-bottom |
-
-### Key `contentPane` Properties
-
-| Property | Type | Description |
-|---|---|---|
-| `contentId` | `string` | Matches the `slot` attribute on the rendered HTML element |
-| `header` | `string` | Tab/title bar label |
-| `isPinned` | `boolean` | `false` = auto-hidden (collapsed to edge); default `true` |
-| `documentOnly` | `boolean` | Restricts pane to `documentHost` areas only |
-| `size` | `number` | Relative size within parent split |
-| `allowClose` | `boolean` | Show close button (default `true`) |
-| `allowPinning` | `boolean` | Allow user to pin/unpin (default `true`) |
-| `allowFloating` | `boolean` | Allow user to float the pane (default `true`) |
-
-### Key `splitPane` / floating pane Properties
-
-| Property | Type | Description |
-|---|---|---|
-| `orientation` | `IgcSplitPaneOrientation` | `horizontal` or `vertical` |
-| `size` | `number` | Relative size in the parent split |
-| `allowEmpty` | `boolean` | Allow pane to remain when all children are closed |
-| `floatingWidth` | `number` | Initial width of floating pane (px) |
-| `floatingHeight` | `number` | Initial height of floating pane (px) |
-| `floatingLocation` | `{x, y}` | Initial top-left corner position of floating pane |
-
 ### Key Rules for Dock Manager
 
 1. **Separate package** — `igniteui-dockmanager` is installed independently of `igniteui-angular`
-2. **Call `defineCustomElements()` in `main.ts`** before `bootstrapApplication` — without this the `<igc-dockmanager>` element renders as an unknown element
+2. **Call `defineCustomElements()` from `igniteui-dockmanager/loader` in `app.config.ts`** — without this the `<igc-dockmanager>` element renders as an unknown element
 3. **Add `CUSTOM_ELEMENTS_SCHEMA`** to every standalone component or NgModule that uses `<igc-dockmanager>`
 4. **Slot names = `contentId` values** — the `slot="..."` attribute on child elements must exactly match the `contentId` string in the layout
 5. **Premium component** — requires a licensed Ignite UI subscription; verify availability before recommending to users

package/skills/igniteui-angular-components/references/layout.md

@@ -17,8 +17,6 @@ This reference gives high-level guidance on when to use each layout component, t
 
 ## Tabs
 
-> **Docs:** [Tabs Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs)
-
 ```typescript
 import { IGX_TABS_DIRECTIVES } from 'igniteui-angular/tabs';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -46,8 +44,6 @@ Key inputs: `[(selectedIndex)]`, `[tabAlignment]` (`'start'` | `'end'` | `'cente
 
 ## Bottom Navigation
 
-> **Docs:** [Bottom Navigation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabbar)
-
 ```typescript
 import { IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent } from 'igniteui-angular/bottom-nav';
 ```
@@ -73,8 +69,6 @@ import { IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderCom
 
 ## Stepper
 
-> **Docs:** [Stepper Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper)
-
 ```typescript
 import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper';
 ```
@@ -100,10 +94,6 @@ import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper';
 </igx-stepper>
 ```
 
-Key inputs: `[linear]`, `[orientation]` (`'horizontal'` | `'vertical'`), `[stepType]` (`'indicator'` | `'title'` | `'full'`), `[animationType]`.
-
-Events: `(activeStepChanging)`, `(activeStepChanged)`.
-
 Programmatic navigation:
 ```typescript
 stepper = viewChild.required(IgxStepperComponent);
@@ -115,8 +105,6 @@ navigateTo(index: number) { this.stepper().navigateTo(index); }
 
 ## Accordion
 
-> **Docs:** [Accordion Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/accordion)
-
 ```typescript
 import { IgxAccordionComponent } from 'igniteui-angular/accordion';
 import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular/expansion-panel';
@@ -154,8 +142,6 @@ Standalone `igx-expansion-panel` (without accordion):
 
 ## Splitter
 
-> **Docs:** [Splitter Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/splitter)
-
 ```typescript
 import { IgxSplitterComponent, IgxSplitterPaneComponent, SplitterType } from 'igniteui-angular/splitter';
 ```
@@ -180,8 +166,6 @@ import { IgxSplitterComponent, IgxSplitterPaneComponent, SplitterType } from 'ig
 
 ## Navigation Drawer
 
-> **Docs:** [Navigation Drawer](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer)
-
 ```typescript
 import { IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerMiniTemplateDirective } from 'igniteui-angular/navigation-drawer';
 import { IgxIconComponent } from 'igniteui-angular/icon';

package/skills/igniteui-angular-components/references/setup.md

@@ -44,7 +44,6 @@ export const appConfig: ApplicationConfig = {
 |---|---|---|
 | `provideAnimations()` | `@angular/platform-browser/animations` | **All overlay and animated components** — Dialog, Combo, Select, Dropdown, Date/Time Picker, Snackbar, Toast, Banner, Navigation Drawer, Carousel, Overlay service |
 | `importProvidersFrom(HammerModule)` | `@angular/platform-browser` | OPTIONAL — touch gestures (Slider, Drag & Drop, swipe) |
-| `provideIgniteIntl()` | `igniteui-angular/core` | Localization for grids, date/time pickers, and components displaying formatted values |
 
 > **`provideAnimationsAsync()`** lazy-loads the animations module — prefer it for SSR or when optimizing initial bundle size:
 > ```typescript

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

@@ -44,6 +44,11 @@ Base your code and explanation exclusively on what you read in Step 3. If the re
 
 ---
 
+## Overview
+This reference gives high-level guidance on grids and their features. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component and feature you're interested in.
+
+---
+
 ## Prerequisites
 
 - Angular 20+ project

package/skills/igniteui-angular-grids/references/data-operations.md

@@ -20,32 +20,6 @@ All programmatic data operations require a reference to the grid component. Use
 
 > **AGENT INSTRUCTION:** Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular`. Replace the package prefix in every import accordingly. Always use specific entry points — never the root barrel of either package.
 
-```typescript
-import { Component, ChangeDetectionStrategy, signal, viewChild } from '@angular/core';
-
-// Open-source package — import from specific entry points
-// Grid Lite (separate npm package — requires `npm install igniteui-grid-lite`)
-import { IgxGridLiteComponent } from 'igniteui-angular/grids/lite';
-// Flat Grid
-import { IgxGridComponent, IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';
-// Tree Grid
-import { IgxTreeGridComponent, IGX_TREE_GRID_DIRECTIVES } from 'igniteui-angular/grids/tree-grid';
-// Hierarchical Grid
-import { IgxHierarchicalGridComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES } from 'igniteui-angular/grids/hierarchical-grid';
-// Pivot Grid
-import { IgxPivotGridComponent, IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
-
-// Licensed package — same entry-point paths, different prefix:
-// import { IgxGridComponent, IGX_GRID_DIRECTIVES } from '@infragistics/igniteui-angular/grids/grid';
-// import { IgxTreeGridComponent, IGX_TREE_GRID_DIRECTIVES } from '@infragistics/igniteui-angular/grids/tree-grid';
-// import { IgxHierarchicalGridComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES } from '@infragistics/igniteui-angular/grids/hierarchical-grid';
-// import { IgxPivotGridComponent, IGX_PIVOT_GRID_DIRECTIVES } from '@infragistics/igniteui-angular/grids/pivot-grid';
-
-// AVOID — never import from the root barrel (wrong for BOTH variants)
-// import { IgxGridComponent } from 'igniteui-angular';
-// import { IgxGridComponent } from '@infragistics/igniteui-angular';
-```
-
 ### Flat Grid Example
 
 ```typescript
@@ -123,8 +97,6 @@ export class CompanyGridComponent {
 
 ## Sorting
 
-> **Docs:** [Sorting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sorting) · [Tree Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/sorting) · [Hierarchical Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/sorting)
-
 > **Applies to**: Flat Grid, Tree Grid, and Hierarchical Grid. Pivot Grid uses dimension-level sorting instead (see [`state.md`](./state.md)). **Grid Lite** uses a different sorting API — see [`state.md`](./state.md).
 >
 > **Tree Grid behavior**: sorting is applied per-level — children are sorted among their siblings, not globally flattened.
@@ -178,18 +150,21 @@ this.gridRef().clearSort();
 | Event | Cancelable | Payload |
 |---|---|---|
 | `(sorting)` | Yes | `ISortingEventArgs` — set `event.cancel = true` to prevent |
-| `(sortingDone)` | No | `ISortingEventArgs` — fires after sort is applied |
+| `(sortingDone)` | No | `ISortingExpression \| ISortingExpression[]` — fires after sort is applied |
 
 ```typescript
 onSorting(event: ISortingEventArgs) {
   // Prevent sorting on a specific column
-  if (event.fieldName === 'id') {
+  const exprs = Array.isArray(event.sortingExpressions)
+    ? event.sortingExpressions : [event.sortingExpressions];
+  if (exprs.some(e => e?.fieldName === 'id')) {
     event.cancel = true;
   }
 }
 
-onSortingDone(event: ISortingEventArgs) {
-  console.log('Sorted by:', event.fieldName, event.dir);
+onSortingDone(event: ISortingExpression | ISortingExpression[]) {
+  const expr = Array.isArray(event) ? event[0] : event;
+  console.log('Sorted by:', expr.fieldName, expr.dir);
   // Good place to trigger remote data fetch
 }
 ```
@@ -204,8 +179,8 @@ import { ISortingStrategy, SortingDirection } from 'igniteui-angular/core';
 class PrioritySortStrategy implements ISortingStrategy {
   private priorityOrder = ['Critical', 'High', 'Medium', 'Low'];
 
-  sort(data: any[], fieldName: string, dir: SortingDirection): any[] {
-    return data.sort((a, b) => {
+  sort(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: (obj: any, key: string) => any): any[] {
+    return [...data].sort((a, b) => {
       const indexA = this.priorityOrder.indexOf(a[fieldName]);
       const indexB = this.priorityOrder.indexOf(b[fieldName]);
       return dir === SortingDirection.Asc ? indexA - indexB : indexB - indexA;
@@ -220,8 +195,6 @@ class PrioritySortStrategy implements ISortingStrategy {
 
 ## Filtering
 
-> **Docs:** [Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/filtering) · [Excel-Style](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel-style-filtering) · [Advanced](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/advanced-filtering) (substitute URL prefix per grid type)
-
 > **Applies to**: Flat Grid, Tree Grid, and Hierarchical Grid. Pivot Grid uses dimension-level filtering instead (see [`state.md`](./state.md)). **Grid Lite** uses a different filtering API — see [`state.md`](./state.md).
 >
 > **Tree Grid behavior**: filtering is **recursive** — when a child matches, all its ancestor rows are shown (even if they don't match) and auto-expanded.
@@ -305,8 +278,11 @@ this.gridRef().cdr.detectChanges();
 
 ### Global Filtering & Cross-Column Logic
 
+> **DEPRECATED (v19.0+):** `filterGlobal()` is deprecated. Use `filteringExpressionsTree` to build a tree that applies conditions across all columns instead.
+
 ```typescript
 // Filter all filterable columns at once with a search term
+// ⚠️ Deprecated since v19.0 — prefer filteringExpressionsTree
 this.gridRef().filterGlobal('search term', IgxStringFilteringOperand.instance().condition('contains'), true);
 ```
 
@@ -319,7 +295,8 @@ Control the AND/OR logic between **different column** filters:
 ```
 
 ```typescript
-import { FilteringLogic } from 'igniteui-angular';
+import { FilteringLogic } from 'igniteui-angular/core';
+// import { FilteringLogic } from '@infragistics/igniteui-angular/core'; for licensed package
 
 // FilteringLogic.And (default) — row must match ALL column filters
 // FilteringLogic.Or — row must match ANY column filter
@@ -331,11 +308,11 @@ filteringLogic = FilteringLogic.And;
 | Event | Cancelable | Payload |
 |---|---|---|
 | `(filtering)` | Yes | `IFilteringEventArgs` — set `event.cancel = true` to prevent |
-| `(filteringDone)` | No | `IFilteringEventArgs` — fires after a **column-level** filter is applied |
+| `(filteringDone)` | No | `IFilteringExpressionsTree` — fires after a **column-level** filter is applied |
 | `(filteringExpressionsTreeChange)` | No | `IFilteringExpressionsTree` — fires after the **grid-level** filter tree changes (use this for remote data) |
 
 ```typescript
-onFilteringDone(event: IFilteringEventArgs) {
+onFilteringDone(event: IFilteringExpressionsTree) {
   // Trigger remote data fetch with new filter state
   this.loadFilteredData();
 }
@@ -354,8 +331,6 @@ onFilteringDone(event: IFilteringEventArgs) {
 
 ## Grouping (Flat Grid Only)
 
-> **Docs:** [Group By](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby)
-
 > **NOTE**: GroupBy is **exclusive to the Flat Grid** (`igx-grid`). Tree Grid uses its natural hierarchy. Hierarchical Grid uses row islands. Pivot Grid uses dimensions.
 
 ### Template-Driven Grouping

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

@@ -31,8 +31,6 @@
 
 ### Cell Editing (Immediate)
 
-> **Docs:** [Cell Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-editing)
-
 The simplest mode. Each cell saves the moment the user tabs away or presses Enter.
 
 ```typescript
@@ -78,9 +76,7 @@ export class CarsGridComponent {
 </igx-grid>
 ```
 
-### Row Editing (Recommended for CRUD)
-
-> **Docs:** [Row Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-editing)
+### Row Editing
 
 Users click into a row, edit cells, then click **Done** or **Cancel** — changes only apply when Done is pressed. An overlay toolbar appears automatically.
 
@@ -171,10 +167,10 @@ When starting a new row programmatically, pre-populate fields using `(cellEditEn
 ```typescript
 onCellEditEnter(event: IGridEditEventArgs) {
   if (event.isAddRow && event.column.field === 'available') {
-    event.cellEditArgs.newValue = true; // default new cars to available
+    event.newValue = true; // default new cars to available
   }
   if (event.isAddRow && event.column.field === 'year') {
-    event.cellEditArgs.newValue = new Date().getFullYear();
+    event.newValue = new Date().getFullYear();
   }
 }
 ```
@@ -370,8 +366,6 @@ onCellEdit(event: IGridEditEventArgs) {
 
 ## Validation
 
-> **Docs:** [Validation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/validation)
-
 ### Template-Driven Validation
 
 Apply Angular validators directly on columns:
@@ -417,8 +411,6 @@ this.gridRef().validation.clear(recordId);
 
 ## Summaries
 
-> **Docs:** [Summaries](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/summaries) (substitute URL prefix per grid type)
-
 ### Built-In Summaries
 
 ```html
@@ -475,7 +467,7 @@ When grouping is enabled, summaries appear for each group. Control this with:
 2. **`[primaryKey]` is required for all editing** — row editing, batch editing, row adding, and row deletion all depend on it (Flat, Tree, Hierarchical, Pivot grids; NOT Grid Lite)
 3. **Always set `[autoGenerate]="false"` when editing** — define columns explicitly and mark each with `[editable]="true"` to control exactly what users can change
 4. **Batch editing requires `[primaryKey]`** — call `endEdit(true)` before `transactions.undo()`/`redo()`, commit via `transactions.commit(data)`
-5. **Cancelable events** — use `event.cancel = true` in `(cellEdit)`, `(rowEdit)`, `(paging)` to prevent the action
+5. **Cancelable events** — use `event.cancel = true` in `(cellEdit)`, `(rowEdit)`, `(rowEditEnter)`, `(cellEditEnter)` to prevent the action
 6. **Validation** — use template-driven validators on columns (`required`, `min`, `max`, `email`, `pattern`) or reactive validators via `(formGroupCreated)`
 7. **Use the correct component type for `viewChild`** — `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, or `IgxPivotGridComponent`
 8. **Import the correct directives/components** — `IGX_GRID_DIRECTIVES`, `IGX_TREE_GRID_DIRECTIVES`, `IGX_HIERARCHICAL_GRID_DIRECTIVES`, or `IGX_PIVOT_GRID_DIRECTIVES`