@igniteui/angular-templates 21.1.14100-alpha.2 → 21.1.14100-alpha.4

package/igx-ts/projects/_base/files/__dot__claude/skills/igniteui-angular-components/references/setup.md

@@ -0,0 +1,166 @@
+# Application Setup & Architecture
+
+> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
+
+## Contents
+
+- [Installation](#installation)
+- [Required Providers (`app.config.ts`)](#required-providers-appconfigts)
+- [Architecture — Standalone Components](#architecture--standalone-components)
+- [Multi-Entry-Point Imports](#multi-entry-point-imports)
+
+## Installation
+
+```bash
+# Open-source
+npm install igniteui-angular
+
+# Licensed (requires @infragistics registry configured)
+npm install @infragistics/igniteui-angular
+```
+
+Both packages share identical entry-point paths. Everywhere below, replace `igniteui-angular` with `@infragistics/igniteui-angular` if using the licensed package.
+
+## Required Providers (`app.config.ts`)
+
+> **AGENT INSTRUCTION:** Before adding any Ignite UI component, verify that `app.config.ts` contains the providers listed below. Missing `provideAnimations()` is the most common cause of runtime errors — all overlay and animated components (Dialog, Combo, Select, Date Picker, Snackbar, Toast, Banner, Navigation Drawer, Dropdown) will silently fail or throw without it.
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
+import { provideIgniteIntl } from 'igniteui-angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimations(),    // REQUIRED — all overlay and animated components
+    provideRouter(appRoutes),
+    provideIgniteIntl(),    // recommended — localization for date/time pickers, grids, etc.
+  ]
+};
+```
+
+| Provider | Package | Required for |
+|---|---|---|
+| `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
+> import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+> ```
+
+## Architecture — Standalone Components
+
+All Ignite UI components are **standalone** — no NgModules needed. Import them directly into your component's `imports` array:
+
+```typescript
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxDialogComponent } from 'igniteui-angular/dialog';
+
+@Component({
+  selector: 'app-example',
+  imports: [IgxButtonDirective, IgxDialogComponent],
+  templateUrl: './example.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ExampleComponent {}
+```
+
+## Multi-Entry-Point Imports
+
+> **AGENT INSTRUCTION:** Always import from specific entry points, never from the root barrel. Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular` — that prefix applies to every import path.
+
+```typescript
+// CORRECT — tree-shakeable, specific entry point
+import { IgxComboComponent } from 'igniteui-angular/combo';
+import { IgxDatePickerComponent } from 'igniteui-angular/date-picker';
+
+// AVOID — pulls in entire library
+import { IgxComboComponent } from 'igniteui-angular';
+```
+
+### Common Entry Points
+
+| Component / Directive | Entry Point |
+|---|---|
+| Input Group | `igniteui-angular/input-group` |
+| Combo / Simple Combo | `igniteui-angular/combo` |
+| Select | `igniteui-angular/select` |
+| Date Picker | `igniteui-angular/date-picker` |
+| Date Range Picker | `igniteui-angular/date-range-picker` |
+| Time Picker | `igniteui-angular/time-picker` |
+| Calendar | `igniteui-angular/calendar` |
+| Checkbox | `igniteui-angular/checkbox` |
+| Radio | `igniteui-angular/radio` |
+| Switch | `igniteui-angular/switch` |
+| Slider | `igniteui-angular/slider` |
+| Tabs | `igniteui-angular/tabs` |
+| Stepper | `igniteui-angular/stepper` |
+| Accordion / Expansion Panel | `igniteui-angular/expansion-panel` |
+| Splitter | `igniteui-angular/splitter` |
+| Navigation Drawer | `igniteui-angular/navigation-drawer` |
+| Bottom Navigation | `igniteui-angular/bottom-nav` |
+| List | `igniteui-angular/list` |
+| Tree | `igniteui-angular/tree` |
+| Card | `igniteui-angular/card` |
+| Dialog | `igniteui-angular/dialog` |
+| Snackbar | `igniteui-angular/snackbar` |
+| Toast | `igniteui-angular/toast` |
+| Banner | `igniteui-angular/banner` |
+| Chips | `igniteui-angular/chips` |
+| Avatar | `igniteui-angular/avatar` |
+| Badge | `igniteui-angular/badge` |
+| Icon | `igniteui-angular/icon` |
+| Carousel | `igniteui-angular/carousel` |
+| Paginator | `igniteui-angular/paginator` |
+| Linear Progress | `igniteui-angular/progressbar` |
+| Circular Progress | `igniteui-angular/progressbar` |
+| Chat | `igniteui-angular/chat` |
+| Button / Icon Button | `igniteui-angular/directives` |
+| Button Group | `igniteui-angular/button-group` |
+| Ripple | `igniteui-angular/directives` |
+| IgxTooltipDirective, IgxTooltipTargetDirective | `igniteui-angular/directives` |
+| Drag & Drop | `igniteui-angular/directives` |
+| Layout Manager (`igxLayout`, `igxFlex`) | `igniteui-angular/directives` |
+| Core utilities, services, base types | `igniteui-angular/core` |
+| Icon Service | `igniteui-angular/icon` |
+| Overlay Service | `igniteui-angular/core` |
+| **Dock Manager** | `igniteui-dockmanager` *(separate package — `npm install igniteui-dockmanager`)* |
+
+**Grid-specific entry points** (tree-shakable imports):
+
+| Component / Feature | Entry Point |
+|---|---|
+| Shared grid infrastructure (columns, toolbar, filtering, sorting, etc.) | `igniteui-angular/grids/core` |
+| Standard grid (`IgxGridComponent`) | `igniteui-angular/grids/grid` |
+| Tree grid (`IgxTreeGridComponent`) | `igniteui-angular/grids/tree-grid` |
+| Hierarchical grid (`IgxHierarchicalGridComponent`, `IgxRowIslandComponent`) | `igniteui-angular/grids/hierarchical-grid` |
+| Pivot grid (`IgxPivotGridComponent`, `IgxPivotDataSelectorComponent`) | `igniteui-angular/grids/pivot-grid` |
+
+### Convenience Directive Collections
+
+For complex components, use the bundled directive arrays instead of listing every sub-directive individually:
+
+| Token | Entry Point | Includes |
+|---|---|---|
+| `IGX_BUTTON_GROUP_DIRECTIVES` | `igniteui-angular/button-group` | Button group + button directive |
+| `IGX_INPUT_GROUP_DIRECTIVES` | `igniteui-angular/input-group` | Input group + label, hint, prefix, suffix |
+| `IGX_TABS_DIRECTIVES` | `igniteui-angular/tabs` | Tabs + tab item, header, content |
+| `IGX_STEPPER_DIRECTIVES` | `igniteui-angular/stepper` | Stepper + step |
+| `IGX_EXPANSION_PANEL_DIRECTIVES` | `igniteui-angular/expansion-panel` | Panel + header, body |
+| `IGX_LIST_DIRECTIVES` | `igniteui-angular/list` | List + list item |
+| `IGX_TREE_DIRECTIVES` | `igniteui-angular/tree` | Tree + tree node |
+
+## See Also
+
+- [`form-controls.md`](./form-controls.md) — Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, forms integration
+- [`layout.md`](./layout.md) — Tabs, Stepper, Accordion, Splitter, Navigation Drawer
+- [`data-display.md`](./data-display.md) — List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress, Chat
+- [`feedback.md`](./feedback.md) — Dialog, Snackbar, Toast, Banner
+- [`directives.md`](./directives.md) — Button, Icon Button, Button Group, Ripple, Tooltip, Drag and Drop
+- [`layout-manager.md`](./layout-manager.md) — Layout Manager directives, Dock Manager
+- [`../../igniteui-angular-grids/SKILL.md`](../../igniteui-angular-grids/SKILL.md) — Data Grids
+- [`../../igniteui-angular-theming/SKILL.md`](../../igniteui-angular-theming/SKILL.md) — Theming & Styling

package/igx-ts/projects/_base/files/__dot__claude/skills/igniteui-angular-grids/SKILL.md

@@ -0,0 +1,110 @@
+---
+name: igniteui-angular-grids
+description: "Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data. Do NOT use for non-grid UI components (forms, dialogs, navigation, charts) — use igniteui-angular-components instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
+user-invocable: true
+---
+
+# Ignite UI for Angular — Data Grids
+
+## MANDATORY AGENT PROTOCOL — YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT
+
+**This file is a routing hub only. It contains NO code examples and NO API details.**
+
+> **DO NOT write any code, component selectors, import paths, method names, or property names from memory.**
+> Grid APIs change between versions. Anything generated without reading the reference files will be wrong.
+
+You are **required** to complete ALL of the following steps before producing any grid-related code or answer:
+
+**STEP 1 — Identify the grid type.**
+Use the Grid Selection Decision Guide below. If the grid type is not explicitly stated, infer it from context or ask.
+
+**STEP 2 — Identify every task category involved.**
+Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., remote paging AND editing requires reading both `paging-remote.md` AND `editing.md`).
+
+**STEP 3 — Read every identified reference file in full (PARALLEL).**
+Call `read_file` (or equivalent) on **all** reference files identified in Step 2 **in a single parallel batch** — do NOT read them one at a time sequentially. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.
+
+**STEP 4 — Only then produce output.**
+Base your code and explanation exclusively on what you read in Step 3. If the reference files do not cover something, say so explicitly rather than guessing.
+
+### Task → Reference File
+ 
+| Task | Reference file to read |
+|---|---|
+| Grid type selection, column config, column templates, column groups, MRL, pinning, sorting UI, filtering UI, selection | [`references/structure.md`](./references/structure.md) |
+| Grouping, summaries, cell merging, toolbar, export, row drag, action strip, master-detail, clipboard | [`references/features.md`](./references/features.md) |
+| Tree Grid specifics, Hierarchical Grid specifics, Grid Lite setup, Grid Lite data operations, Pivot Grid setup | [`references/types.md`](./references/types.md) |
+| Programmatic sorting / filtering / grouping, canonical import patterns, `viewChild` access | [`references/data-operations.md`](./references/data-operations.md) |
+| Cell editing, row editing, batch editing, transactions, validation, summaries | [`references/editing.md`](./references/editing.md) |
+| Paging, remote data, server-side ops, noop strategies, virtual scroll, multi-grid coordination | [`references/paging-remote.md`](./references/paging-remote.md) |
+| State persistence, Tree Grid / Hierarchical Grid / Pivot Grid data operations | [`references/state.md`](./references/state.md) |
+
+> **When in doubt, read more rather than fewer reference files.** The cost of an unnecessary file read is negligible; the cost of hallucinated API usage is a broken application.
+
+---
+
+## Prerequisites
+
+- Angular 20+ project
+- `igniteui-angular` installed, **or** `@infragistics/igniteui-angular` for licensed users — both packages share the same entry-point structure
+- A theme applied (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md))
+
+---
+
+## Choosing the Right Grid
+
+Ignite UI has **five grid types**. Picking the correct one is the most important decision — each has different data structures, features, and constraints.
+
+### Grid Selection Decision Guide
+
+Ask these questions in order:
+
+1. **Does the user need a lightweight, read-only data display** with sorting, filtering, and virtualization but no editing, selection, or paging? → **Grid Lite** (open-source, MIT licensed). **If the user later needs features beyond Grid Lite's capabilities, upgrade strictly to `igx-grid` (`IgxGridComponent`)** — never recommend non-grid components as a substitute.
+2. **Does the user need pivot-table analytics** (rows/columns/values/aggregations that users can drag-and-drop to reshape)? → **Pivot Grid**
+3. **Does the data have parent-child relationships where each level has a DIFFERENT schema** (e.g., Companies → Departments → Employees)? → **Hierarchical Grid**
+4. **Does the data have parent-child relationships within a SINGLE schema** (e.g., Employees with a `managerId` field, or nested children arrays)? → **Tree Grid**
+5. **Is the data a flat list/table with enterprise features needed** (editing, batch editing, grouping, paging, export, etc.)? → **Flat Grid**
+
+After choosing the grid type, **you must still complete Steps 2–4 from the mandatory protocol above** — return to the routing table and read every applicable `references/` file before writing any code. The decision guide and the tables on this page are discovery aids only; they do not replace the reference files.
+
+### Grid Types & Imports
+
+> **AGENT INSTRUCTION:** Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular`. Always import from the specific entry point. Never import from the root barrel of either package.
+
+| Grid | Selector | Component | Directives | Entry Point |
+|---|---|---|---|---|
+| **Grid Lite** | `igx-grid-lite` | `IgxGridLiteComponent` | Individual imports | `igniteui-angular/grids/lite` |
+| **Flat Grid** | `igx-grid` | `IgxGridComponent` | `IGX_GRID_DIRECTIVES` | `igniteui-angular/grids/grid` |
+| **Tree Grid** | `igx-tree-grid` | `IgxTreeGridComponent` | `IGX_TREE_GRID_DIRECTIVES` | `igniteui-angular/grids/tree-grid` |
+| **Hierarchical Grid** | `igx-hierarchical-grid` | `IgxHierarchicalGridComponent` | `IGX_HIERARCHICAL_GRID_DIRECTIVES` | `igniteui-angular/grids/hierarchical-grid` |
+| **Pivot Grid** | `igx-pivot-grid` | `IgxPivotGridComponent` | `IGX_PIVOT_GRID_DIRECTIVES` | `igniteui-angular/grids/pivot-grid` |
+
+Replace `igniteui-angular` with `@infragistics/igniteui-angular` for the licensed package — entry-point paths are identical.
+
+> **AGENT INSTRUCTION — Documentation URL Pattern**: For grid-specific topics (sorting, filtering, editing, paging, etc.), docs URLs follow this naming pattern per grid type:
+> - Flat Grid: `.../components/grid/{topic}`
+> - Tree Grid: `.../components/treegrid/{topic}`
+> - Hierarchical Grid: `.../components/hierarchicalgrid/{topic}`
+> - Pivot Grid: `.../components/pivotGrid/{topic}`
+
+### Feature Availability per Grid Type
+
+| Feature | Grid Lite | Flat Grid | Tree Grid | Hierarchical Grid | Pivot Grid |
+|---|---|---|---|---|---|
+| Column sorting | Yes | Yes | Yes (per-level) | Yes (per grid level) | Per-dimension only |
+| Column filtering | Yes | Yes | Yes (recursive — keeps matching parents) | Yes (per grid level) | Per-dimension only |
+| GroupBy | No | **Exclusive** | No (use tree hierarchy) | No | Inherent via dimensions |
+| Paging | No | Yes | Yes | Yes (each level independent) | No |
+| Batch editing | No | Yes | Yes (hierarchical transactions) | Yes (propagated from root) | No |
+| Cell / Row editing | No | Yes | Yes | Yes (per grid level) | No |
+| Row adding | No | Yes | Yes (with parent support) | Yes (per grid level) | No |
+| Master-Detail | No | **Exclusive** | No | No (use row islands) | No |
+| Row selection | No | Yes | Yes + `multipleCascade` | Yes (per grid level) | Limited |
+| Load on demand | No | No | **Exclusive** | No | No |
+| Column pinning / moving | No | Yes | Yes | Yes | No |
+| Column hiding | Yes | Yes | Yes | Yes | No |
+| Column resizing | Yes | Yes | Yes | Yes | No |
+| Summaries | No | Yes | Yes (per-level) | Yes (per grid level) | Horizontal summaries only |
+| State persistence | No | Yes | Yes | Yes + row island state | Pivot config serialization |
+| Remote data ops | `dataPipelineConfiguration` | Events + noop strategies | Events + noop strategies | Events + noop strategies | N/A |
+| Row virtualization | Yes | Yes (rows + columns) | Yes (rows + columns) | Yes (rows + columns) | Yes |