igniteui-angular 21.1.2 → 21.1.3

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

@@ -1,6 +1,6 @@
 ---
 name: igniteui-angular-components
-description: "Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, icon button, button group, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
+description: "Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, icon button, button group, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, Tile Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead."
 user-invocable: true
 ---
 
@@ -34,7 +34,7 @@ Base your code and explanation exclusively on what you read. If the reference fi
 | List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Indicators, Chat | [`references/data-display.md`](./references/data-display.md) |
 | Dialog, Snackbar, Toast, Banner | [`references/feedback.md`](./references/feedback.md) |
 | Button, Icon Button, Button Group, Ripple, Tooltip, Drag and Drop | [`references/directives.md`](./references/directives.md) |
-| Layout Manager (`igxLayout`, `igxFlex` directives), Dock Manager (`igc-dockmanager` web component) | [`references/layout-manager.md`](./references/layout-manager.md) |
+| Layout Manager (`igxLayout`, `igxFlex` directives), Dock Manager (`igc-dockmanager` web component), Tile Manager (`igc-tile-manager` web component) | [`references/layout-manager.md`](./references/layout-manager.md) |
 | Charts (Area, Bar, Column, Stock/Financial, Pie), chart configuration, chart features (animation, tooltips, markers, highlighting, zooming), data binding | [`references/charts.md`](./references/charts.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.

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

@@ -1,4 +1,4 @@
-# Layout Manager & Dock Manager
+# Layout Manager, Dock Manager & Tile Manager
 
 > **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.**
 > For app setup, providers, and import patterns — see [`setup.md`](./setup.md).
@@ -7,6 +7,7 @@
 
 - [Layout Manager Directives](#layout-manager-directives)
 - [Dock Manager](#dock-manager)
+- [Tile Manager](#tile-manager)
 
 ---
 
@@ -411,6 +412,133 @@ export class DockManagerComponent {
 5. **Premium component** — requires a licensed Ignite UI subscription; verify availability before recommending to users
 6. **Not part of `igniteui-angular`** — do not import from `igniteui-angular` entry points; all Dock Manager types come from `igniteui-dockmanager`
 
+---
+
+## Tile Manager
+
+> **Docs:** [Tile Manager (Angular)](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tile-manager)
+> **Full API Docs:** [Tile Manager Web Component](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager.html)
+
+The Tile Manager is a **layout Web Component** that displays content in individual tiles users can **rearrange and resize**. It is implemented as an `igc-tile-manager` container with one or more `igc-tile` children.
+
+### Installation
+
+```bash
+npm install igniteui-webcomponents
+```
+
+### Setup
+
+Register the Tile Manager Web Component before bootstrap:
+
+```typescript
+import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcTileManagerComponent);
+```
+
+Add `CUSTOM_ELEMENTS_SCHEMA` to any component using `<igc-tile-manager>`:
+
+```typescript
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@Component({
+  selector: 'app-tile-manager',
+  templateUrl: './tile-manager.component.html',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class TileManagerComponent { }
+```
+
+### Basic Usage
+
+```html
+<igc-tile-manager>
+  <igc-tile>
+    <span slot="title">Tile 1 header</span>
+    <p>Tile 1 content</p>
+  </igc-tile>
+  <igc-tile>
+    <span slot="title">Tile 2 header</span>
+    <p>Tile 2 content</p>
+  </igc-tile>
+</igc-tile-manager>
+```
+
+### Layout Properties
+
+Key `igc-tile-manager` properties:
+
+- **`column-count`**: number of grid columns; if omitted or \<1, as many columns as fit with a minimum width (200px) are created.
+- **`gap`**: space between tiles (e.g., `"20px"`, `"1rem"`).
+- **`min-column-width`**: minimum width per column (e.g., `"200px"`).
+- **`min-row-height`**: minimum height per row (e.g., `"150px"`).
+
+```html
+<igc-tile-manager
+  column-count="2"
+  gap="20px"
+  min-column-width="220px"
+  min-row-height="160px">
+  <igc-tile>
+    <span slot="title">Tile 1 header</span>
+    <p>Tile 1 content</p>
+  </igc-tile>
+  <igc-tile>
+    <span slot="title">Tile 2 header</span>
+    <p>Tile 2 content</p>
+  </igc-tile>
+</igc-tile-manager>
+```
+
+### Tile Properties
+
+Each `igc-tile` can configure its own size and behavior:
+
+- **`row-start` / `col-start`**: starting row/column for the tile
+- **`row-span` / `col-span`**: how many rows/columns the tile spans
+- **`disable-resize`**: prevents the tile from being resized
+- **`disable-maximize`** / **`disable-fullscreen`**: hide default header actions
+
+```html
+<igc-tile-manager>
+  <igc-tile col-span="2" disable-resize>
+    <span slot="title">Wide tile</span>
+    <p>Content</p>
+  </igc-tile>
+  <igc-tile row-span="2">
+    <span slot="title">Tall tile</span>
+    <p>Content that spans two rows.</p>
+  </igc-tile>
+</igc-tile-manager>
+```
+
+### Resizing & Dragging
+
+- Resizing is controlled by the `resize-mode` property on `igc-tile-manager` (`"none"`, `"hover"`, `"always"`).
+- Reordering is enabled via the `drag-mode` property (`"tile"` or `"tile-header"`).
+
+```html
+<igc-tile-manager resize-mode="hover" drag-mode="tile-header">
+  <igc-tile>
+    <span slot="title">Tile 1</span>
+    <p>Content</p>
+  </igc-tile>
+  <igc-tile>
+    <span slot="title">Tile 2</span>
+    <p>Content</p>
+  </igc-tile>
+</igc-tile-manager>
+```
+
+### Key Rules for Tile Manager
+
+1. **Web Component package** — Tile Manager ships via `igniteui-webcomponents`, not `igniteui-angular`.
+2. **Register components** — call `defineComponents(IgcTileManagerComponent)` once before using `<igc-tile-manager>`.
+3. **Use `CUSTOM_ELEMENTS_SCHEMA`** on Angular components that host the Tile Manager.
+4. **Use slots** — header content goes into `slot="title"`; additional actions and custom adorners use the documented slots (`fullscreen-action`, `maximize-action`, `actions`, `side-adorner`, `corner-adorner`, `bottom-adorner`).
+5. **Treat it as a layout container** — use Tile Manager when users need interactive, resizable and re-orderable tiles, not tabular data (use grids for that).
+
 ## See Also
 
 - [`setup.md`](./setup.md) — App providers, architecture, all entry points