diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db index 53ef147c0..4546920f6 100644 Binary files a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db and b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/angular.json b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/angular.json index a937c494f..ef519c90b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/angular.json +++ b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/angular.json @@ -3,8 +3,8 @@ "groupKey": "AI-Assisted Development", "section": "AI-Assisted Development", "groupLabel": "", - "summary": "Configure agent skills and MCP servers for coding assistants to scaffold apps, answer API questions, generate themes, and orchestrate consensus-based workflows", - "hash": "796e453c7cd747753e31eb9727f318da", + "summary": "Configure Agent Skills and MCP servers for AI assistants, scaffold and modify apps, find API details, generate themes, and plan tasks with consensus voting.", + "hash": "b5e5c74caf9d2c7842fe374e64b91b66", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -12,8 +12,8 @@ "groupKey": "Charts", "section": "Charts", "groupLabel": "", - "summary": "Create and configure category, financial, data, polar, scatter, shape, pie, sparkline, and hierarchical charts with series, axes, legends, tooltips, zooming, and styling", - "hash": "975da8af99b8827df5bab220583ba197", + "summary": "Covers category, financial, scatter, polar, shape, sparkline, pie, treemap, and stacked charts, plus series, axes, legends, styling, selection, and chart APIs.", + "hash": "defb55661957eceddfea5f998c297fe0", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -21,8 +21,8 @@ "groupKey": "Charts > Chart Features", "section": "Charts", "groupLabel": "Chart Features", - "summary": "Configure chart axes, annotations, aggregation, filtering, legends, selection, highlighting, navigation, tooltips, overlays, trendlines, and performance.", - "hash": "f8121d78bf282ce318ba24512eb31ae3", + "summary": "Covers chart axes, animations, annotations, aggregation, filtering, legends, tooltips, selection, highlighting, navigation, overlays, trendlines, zooming, and performance.", + "hash": "fecc19b11d32f2e564d3e5cb99dc6dad", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -30,8 +30,8 @@ "groupKey": "Dashboards", "section": "Dashboards", "groupLabel": "", - "summary": "Configure Dashboard Tile visualization and toolbar, with automatic visualization selection from data sources plus chart, gauge, and map integrations.", - "hash": "1e8fbef0744f3841964639a3bed51d8e", + "summary": "Covers Dashboard Tile setup, data binding, automatic visualization selection, changing visualization types, configuring properties, and toolbar capabilities.", + "hash": "77408fbac5bec2b53cff775aaa7d2bd1", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -39,8 +39,8 @@ "groupKey": "Data Entry & Display", "section": "Data Entry & Display", "groupLabel": "", - "summary": "Configure selection controls, inputs, buttons, toggles, ratings, badges, chips, progress, pagination, virtualization, masking, highlighting, and theming", - "hash": "5793c5450ec55244d80b5df1528e541b", + "summary": "Covers inputs, selection controls, buttons, badges, progress indicators, QR codes, dividers, chips, text highlighting, pagination, and virtualized collections.", + "hash": "5122ba3b819ff6f35486b44452342880", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -48,8 +48,8 @@ "groupKey": "Data Entry & Display > Drop Down", "section": "Data Entry & Display", "groupLabel": "Drop Down", - "summary": "Covers single-item selection, grouped and hierarchical data, menus, keyboard navigation, custom themes, virtualization, chunk loading, and multi-select chips.", - "hash": "3a36aed8050479861e843ddcfa6b6945", + "summary": "Configure option selection, grouped and hierarchical items, keyboard navigation, local/remote virtualization, and tree-grid selection with removable chips.", + "hash": "d8b3ad83cccd43a081e4497c77463812", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -57,8 +57,8 @@ "groupKey": "Data Entry & Display > Icon", "section": "Data Entry & Display", "groupLabel": "Icon", - "summary": "Covers font and SVG families, colors and sizes, inactive states, Material Symbols, theme styling, family registration, aliases, service methods, and template rendering", - "hash": "c568d462ce18a1bb650331f07e8b522a", + "summary": "Display and customize SVG icons and Material Symbols; register font and SVG families, map references, retrieve icons, and search, filter, copy, or download them", + "hash": "b954ea6731748790513b4970a3cb4563", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -66,8 +66,8 @@ "groupKey": "Data Entry & Display > Query Builder", "section": "Data Entry & Display", "groupLabel": "Query Builder", - "summary": "Create expression trees with entities, fields, conditions, grouping, and custom templates; define, serialize, filter data, build subqueries, and generate SQL.", - "hash": "f2dcf481a325d0bcbbf18ab754d2d7ff", + "summary": "Build data-filtering queries and expression trees with nested expressions, subqueries, value templates, binding, SQL generation, and grid results.", + "hash": "b67c788939a540f95512f79a493f9d88", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -75,8 +75,8 @@ "groupKey": "Frameworks > Excel Library", "section": "Frameworks", "groupLabel": "Excel Library", - "summary": "Create, load, and save workbooks; manage worksheets, cells, tables, charts, and sparklines with formulas, formatting, protection, filtering, and file utilities.", - "hash": "d789da0e8c10a480b199e96f03851c27", + "summary": "Create, load, and save workbooks; configure cells, worksheets, tables, charts, and sparklines with formulas, formatting, filtering, sorting, and protection.", + "hash": "a0a5c41d0fb1bc015e88a68c541399f9", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -84,8 +84,8 @@ "groupKey": "Gauges", "section": "Gauges", "groupLabel": "", - "summary": "Use bullet graphs and linear or radial gauges with scales, needles, ranges, labels, tick marks, backing, targets, titles, optical scaling, and animation", - "hash": "de174a5edb99f40780600706fd0240e0", + "summary": "Configure bullet, linear, and radial gauges to compare values, customize scales, ranges, ticks, labels, backing, needles, animation, and interactive dragging.", + "hash": "536b89aeafa601c78de8f6129835f118", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -93,8 +93,8 @@ "groupKey": "General", "section": "General", "groupLabel": "", - "summary": "Covers installation, licensing, localization, updates, SSR, code splitting, data binding, grid and chart configuration, and data analysis workflows.", - "hash": "28ba05e2716757a9f412dabb661b0c40", + "summary": "Covers setup, licensing, localization, updates, SSR, code splitting, grid configuration, remote data, data analysis, charting, and release history.", + "hash": "2c38f347159e1975f772a942977efff7", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -102,8 +102,8 @@ "groupKey": "General > Angular Schematics & Ignite UI CLI", "section": "General", "groupLabel": "Angular Schematics & Ignite UI CLI", - "summary": "Scaffold projects and component views, choose templates and themes, run applications, configure AI assistants and MCP integrations, and implement authentication.", - "hash": "120cbcf191b68dc333fa94f3cea6d3f8", + "summary": "Scaffold projects and component views with CLI or schematics, choose templates and themes, configure AI assistants and MCP, and set up authentication endpoints and social providers", + "hash": "958eb2bee468f6e02b68f72349aa1946", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -111,8 +111,8 @@ "groupKey": "General > How to", "section": "General", "groupLabel": "How to", - "summary": "Build live-data dashboards, validate reactive forms, connect CRUD services, customize themes, use standalone components, and scaffold apps through MCP.", - "hash": "f1cbe10c92d0d446cf12e2516a3e5790", + "summary": "Configure hubs and live data, validate reactive forms, implement Grid CRUD, customize themes and tokens, use standalone components, and scaffold with MCP.", + "hash": "4ecb818947d9d9f9a719b805b9668583", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -120,8 +120,8 @@ "groupKey": "General > WPF to Angular guide", "section": "General", "groupLabel": "WPF to Angular guide", - "summary": "Covers application creation, components, one- and two-way data binding, events, pipes, structural directives, and Flexbox/Grid layouts for migration.", - "hash": "e5ec35449bbe353d15727abedd3008fb", + "summary": "Covers application setup, components, one-way and two-way binding, events, pipes, structural directives, and CSS Flexbox and Grid layouts", + "hash": "5e68b27e76ff53877470fa0002c652ae", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -129,8 +129,8 @@ "groupKey": "Grids & Lists", "section": "Grids & Lists", "groupLabel": "", - "summary": "Covers data grids, trees, and lists with data operations, editing, selection, filtering, templating, navigation, lazy loading, accessibility, styling, and export.", - "hash": "9e881f4db3910f905043a871825684b4", + "summary": "Build data grids, hierarchical trees, and templated lists with searching, filtering, editing, grouping, selection, export, on-demand loading, and custom styling", + "hash": "bff16a9ae069fbc34d8add97ddd85ba3", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -138,8 +138,8 @@ "groupKey": "Grids & Lists > Combo", "section": "Grids & Lists", "groupLabel": "Combo", - "summary": "Configure ComboBox data binding for local and remote data, filtering, grouping, custom values, templates, forms, selection, overlays, and keyboard navigation.", - "hash": "99fcbd08b624695358044273571f998b", + "summary": "Configure ComboBox and Simple ComboBox data/value binding, selection, filtering, custom values, grouping, remote data, virtual scrolling, templates, and keyboard navigation", + "hash": "c76f1f4123ad946fc369ac89134db97f", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -147,8 +147,8 @@ "groupKey": "Grids & Lists > Data Grid", "section": "Grids & Lists", "groupLabel": "Data Grid", - "summary": "Build data grids with local, remote, and live data, virtualization, editing, validation, filtering, sorting, grouping, selection, and export", - "hash": "8874a12176a124e2ab0c770fa1896b85", + "summary": "Covers Data Grid setup, columns, data binding, editing, filtering, sorting, grouping, selection, virtualization, remote operations, export, and theming.", + "hash": "b0f148729c9fab57b0b5fa2e2dff338b", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -156,8 +156,8 @@ "groupKey": "Grids & Lists > Grid Lite", "section": "Grids & Lists", "groupLabel": "Grid Lite", - "summary": "Configure grids with data binding, column sizing, visibility, cell and header templates, filtering, sorting, virtualization, and theming.", - "hash": "53a678d177f5fa202128d3cfc8e4b1be", + "summary": "Covers setup, data binding, column configuration, cell and header templates, sorting, filtering, virtualization, theming, and custom data pipelines", + "hash": "b897052d4ec0026b9f24e938e1fc32e2", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -165,8 +165,8 @@ "groupKey": "Grids & Lists > Hierarchical Grid", "section": "Grids & Lists", "groupLabel": "Hierarchical Grid", - "summary": "Configure hierarchical grids for nested and load-on-demand data with CRUD, filtering, sorting, selection, virtualization, exports, and state persistence", - "hash": "04883c554e4cf024aef7afd658839578", + "summary": "Covers hierarchical tabular data, row islands, load-on-demand, remote data operations, editing, filtering, sorting, paging, virtualization, selection, pinning, and theming.", + "hash": "74ccfa7d9e2771bee04dd87ac9aa7945", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -174,8 +174,8 @@ "groupKey": "Grids & Lists > Pivot Grid", "section": "Grids & Lists", "groupLabel": "Pivot Grid", - "summary": "Covers Pivot Grid setup, dimensions, values, aggregations, filtering, sorting, selection, summaries, Excel/PDF export, remote data, and state persistence.", - "hash": "2a06f697b7e123063084739d6d4e557b", + "summary": "Configure Pivot Grid dimensions, aggregations, filters, features, remote grouping, Excel/PDF export, state persistence, and Sass or CSS theming.", + "hash": "7ef25a480c2a39a177b0873f4da0a947", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -183,8 +183,8 @@ "groupKey": "Grids & Lists > Spreadsheet", "section": "Grids & Lists", "groupLabel": "Spreadsheet", - "summary": "Covers Excel workbook loading and saving, editing, formatting, navigation, charts, clipboard actions, conditional formatting, data validation, hyperlinks, and commands.", - "hash": "240be6d2d1937a564b5dd502d0e246ac", + "summary": "Covers spreadsheet configuration, workbook loading and saving, active cells, panes and worksheets, charts, clipboard, conditional formatting, validation, hyperlinks, and commands", + "hash": "7858e118735c6684527ad018358a392e", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -192,8 +192,8 @@ "groupKey": "Grids & Lists > Tree Grid", "section": "Grids & Lists", "groupLabel": "Tree Grid", - "summary": "Configure hierarchical data, remote operations, virtualization, editing, filtering, sorting, selection, grouping, pinning, exporting, and state persistence.", - "hash": "9dbae68c9662496615910ad132a312a6", + "summary": "Configure hierarchical data, editing, filtering, sorting, grouping, paging, virtualization, selection, pinning, exporting, theming, state persistence, and Tree Grid layout.", + "hash": "110e05e2b63b1efa5f326d6419bae209", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -201,8 +201,8 @@ "groupKey": "Interactions", "section": "Interactions", "groupLabel": "", - "summary": "Covers messaging, dialogs, sliders, ripples, toggles, tooltips, drag and drop, chart zooming, and action strips with positioning, styling, and customization", - "hash": "66a0109c9fcf5211475e965a10db757a", + "summary": "Covers interactive chat, dialogs, sliders, ripple effects, toggles, tooltips, drag and drop, zoom navigation, and action strips with theming and accessibility.", + "hash": "c2a814d7bfe244f8dccc5fdf56192059", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -210,8 +210,8 @@ "groupKey": "Interactions > Overlay", "section": "Interactions", "groupLabel": "Overlay", - "summary": "Covers attaching, positioning, showing, hiding, and detaching components or elements, overlay settings, scroll strategies, toggle integration, outlets, and scoped styling.", - "hash": "cf90be24a0e8a75f531eab1f1c80fc7c", + "summary": "Attach, display, hide, and detach components; configure overlay settings, positioning and scroll strategies; style content, modal backdrops, and custom outlets", + "hash": "fdfdeca9f21982db3920928daf5ccf13", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -219,8 +219,8 @@ "groupKey": "Interactivity", "section": "Interactivity", "groupLabel": "", - "summary": "Covers right-to-left directionality configuration and calendar toggling, plus Section 508 and WCAG accessibility compliance, matrices, and theme notes.", - "hash": "546d5a581e53b19ca71828ddd96ab77f", + "summary": "Covers RTL direction and calendar switching, RTL limitations and stylesheet changes, accessibility standards, conformance requests, and issue reporting", + "hash": "07bce087516f70a3136f6c8afd0b938a", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -228,8 +228,8 @@ "groupKey": "Layouts", "section": "Layouts", "groupLabel": "", - "summary": "Create layouts with flex direction, spacing, alignment, wrapping, carousels, tabs, cards, accordions, steppers, split panes, docked panes, avatars, and draggable tiles", - "hash": "32a71b303d55be6733005241ea8dc972", + "summary": "Arrange elements with flex layouts, carousels, tabs and tab bars, cards, accordions, avatars, breadcrumbs, splitters, steppers, and dock or tile managers", + "hash": "0834622c84f10ac638e7b6acda517777", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -237,8 +237,8 @@ "groupKey": "Maps", "section": "Maps", "groupLabel": "", - "summary": "Display geospatial data on imagery maps with geographic series, data binding, triangulation, scaling, navigation, tooltips, heat color scales, shapefile shapes.", - "hash": "20e2cbf1dcf5a86d3df2d0664bcb9cc9", + "summary": "Render geographic data on imagery map with scatter area, contour, density, bubble and symbol series, polygons and polylines, navigation, tooltips, map APIs.", + "hash": "e0253f0eb3c74d3268850a85ba62e1b4", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -246,8 +246,8 @@ "groupKey": "Maps > Geographic Map Features", "section": "Maps", "groupLabel": "Geographic Map Features", - "summary": "Covers geographic maps with imagery, geographic series, CSV/JSON/model/Shape File binding, overlays, heat imagery, navigation, shape styling, and geospatial utilities", - "hash": "d99d959c1245b0772535da6940b2fb32", + "summary": "Displays map data with imagery, shape, polyline, and symbol series; covers CSV, JSON, model, and shapefile binding, styling, navigation, and geospatial utilities", + "hash": "bfcbaebf944aa7ebaabfdd575fcf6849", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -255,8 +255,8 @@ "groupKey": "Menus", "section": "Menus", "groupLabel": "", - "summary": "Covers toolbars with chart linking and actions; responsive navigation with pinned/mini modes, routing, and hierarchical menus; headers with back navigation", - "hash": "91c8c6af511fd8387487e98ba7994cb1", + "summary": "Configure toolbars, navigation drawers, and navbars with chart actions, custom commands, responsive and hierarchical navigation, routing, icons, and theming.", + "hash": "4771fb7247ea97c2ec497ddb2a10279e", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -264,8 +264,8 @@ "groupKey": "Notifications", "section": "Notifications", "groupLabel": "", - "summary": "Display banners, snackbars, and toasts with custom content, actions, animations, events, timing, positioning, interactions, and styling.", - "hash": "baa8a94c1325914eea4278a2fa6f6808", + "summary": "Display and customize banners, snackbars, and toast notifications with messages, icons, actions, positioning, auto-hide timing, events, and themes", + "hash": "3f17df0366d54d46d2fb87d43eaaac85", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -273,8 +273,8 @@ "groupKey": "Scheduling", "section": "Scheduling", "groupLabel": "", - "summary": "Covers date and time editing, single, multi, and range selection, month and year picking, formatting, validation, localization, forms, navigation, and styling.", - "hash": "6c4becff8680231103061f71657a8c81", + "summary": "Configure date-time editors, calendars, date, date-range, month, and time pickers for selecting, formatting, localization, validation, forms, navigation, and styling", + "hash": "35b7321d0037c3b978eec14a7ea4f300", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -282,8 +282,8 @@ "groupKey": "Services", "section": "Services", "groupLabel": "", - "summary": "Export arrays and grid data to CSV, TSV, TAB, Excel, or PDF with delimiters, filtering, excluded rows or columns, page options, and Unicode fonts.", - "hash": "016ff0121692e10f1fb8420756ca31b5", + "summary": "Export arrays and grid data to CSV, TAB, TSV, Excel, or PDF, with toolbar exports, row and column exclusions, page formatting, and custom fonts", + "hash": "6375f07bf3dd7f9e60e1062b193c2adf", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -291,8 +291,8 @@ "groupKey": "Services > Transaction Service", "section": "Services", "groupLabel": "Transaction Service", - "summary": "Accumulate, commit, clear, undo, and redo flat or hierarchical data changes with transaction services, factories, logs, batch editing, and custom implementations.", - "hash": "1c5788e7a8fe47a4537577e09b618c6b", + "summary": "Stage add, update, and delete operations; inspect transaction records and state; commit, clear, undo, or redo changes; and configure factories and service types.", + "hash": "6ea93cdd9183a33e7b33cdb50bea9e84", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -300,8 +300,8 @@ "groupKey": "Styling & Themes", "section": "Styling & Themes", "groupLabel": "", - "summary": "Customize themes with CSS variables or Sass, including palettes, elevations, typography, roundness, display density, and application- or component-level spacing.", - "hash": "b39a2e4779ebeea26f84d8ca40a46283", + "summary": "Customize themes with palettes, elevations, typography, roundness, density, spacing, CSS variables, Sass utilities, and accessibility settings for components.", + "hash": "729dee20dffdf048899e90670ad1baa8", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -309,8 +309,8 @@ "groupKey": "Styling & Themes > Sass", "section": "Styling & Themes", "groupLabel": "Sass", - "summary": "Configure Sass palettes, schemas, typography, elevations, animations, roundness, scoped themes, presets, printing, and Material or Bootstrap integrations", - "hash": "1aefc24674a81e2d89039a2757f6da7e", + "summary": "Covers Sass palettes, schemas, typography, elevations, animations, roundness, global and component themes, presets, CSS variables, and framework integrations", + "hash": "907a1ad97c2b4d34c2da5e039e1d992f", "model": "gpt-5.6-luna", "promptVersion": 1 } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/blazor.json b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/blazor.json index 0558c6077..ea25e0213 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/blazor.json +++ b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/blazor.json @@ -3,8 +3,8 @@ "groupKey": "AI-Assisted Development", "section": "AI-Assisted Development", "groupLabel": "", - "summary": "Configure Agent Skills and MCP servers for scaffolding, component generation, documentation and API answers, palettes, themes, typography, CSS, Sass, design-token overrides, and step plans", - "hash": "d4d13f572a1100d09d2d131407de6f9a", + "summary": "Configure Agent Skills and MCP servers, connect CLI and Theming tools, scaffold apps, generate components, create palettes, themes, typography, and overrides", + "hash": "018bdf4ce8760dfddb13f1b6d2ce137c", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -12,8 +12,8 @@ "groupKey": "Charts", "section": "Charts", "groupLabel": "", - "summary": "Build area, bar, bubble, column, line, pie, donut, scatter, polar, radial, stock, treemap, and sparkline charts with series, data binding, axes, styling, and legends.", - "hash": "cf160d0edb6e45999dd967316a49338e", + "summary": "Create and style area, bar, bubble, column, line, pie, polar, radial, scatter, stock, treemap, and sparkline charts with data binding, axes, legends, and stacking", + "hash": "9739bbfbd5c88319ad6d69181a652ca9", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -21,8 +21,8 @@ "groupKey": "Charts > Chart Features", "section": "Charts", "groupLabel": "Chart Features", - "summary": "Configure chart axes, annotations, animations, highlighting, markers, navigation, overlays, performance, tooltips, trendlines, filtering, and aggregation.", - "hash": "ec4b08d4c381c4f817ae8b68a6d7aaff", + "summary": "Configure chart axes, annotations, overlays, tooltips, legends, selection, highlighting, navigation, markers, trendlines, filtering, aggregation, and performance.", + "hash": "898986efcce04ed514d84bcd193e0832", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -30,8 +30,8 @@ "groupKey": "Dashboards", "section": "Dashboards", "groupLabel": "", - "summary": "Configure dashboard tiles with automatic visualization selection, data binding, supported visualizations, and toolbar tools for changing and configuring views.", - "hash": "196a4f1cda43d6eda9a5a5711d252c52", + "summary": "Analyzes bound data to select an appropriate visualization, with controls to change visualization types and configure dashboard tiles using the toolbar", + "hash": "fc6b0775974a4ac73516cb72dbc56ba0", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -39,8 +39,8 @@ "groupKey": "Data Entry & Display", "section": "Data Entry & Display", "groupLabel": "", - "summary": "Covers buttons, selection controls, inputs, masked date and time entry, dropdowns, progress indicators, badges, icons, chips, ratings, color editing, and styling.", - "hash": "f72097377f04e06007a2af48986489ca", + "summary": "Covers status indicators, buttons, button groups, text and date-time inputs, masks, selections, ratings, switches, icons, chips, progress, highlighting, validation, and styling.", + "hash": "6160be7796bd52142d1ebe1b6d02c16d", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -48,8 +48,8 @@ "groupKey": "Data Entry & Display > Combo Box", "section": "Data Entry & Display", "groupLabel": "Combo Box", - "summary": "Covers ComboBox data binding, single selection, quick filtering, grouping, sorting, validation, keyboard navigation, styling, disabled states, and templates.", - "hash": "1086484e5a5921630dd8e27d104602d0", + "summary": "Configure ComboBox binding, selections, validation, filtering, grouping, sorting, keyboard navigation, styling, templates, and header, footer, and empty states.", + "hash": "8b4d351118e2e279e53afac5a494ceec", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -57,8 +57,8 @@ "groupKey": "Frameworks > Excel Library", "section": "Frameworks", "groupLabel": "Excel Library", - "summary": "Create, load, edit, and export workbooks with cells, tables, worksheets, charts, sparklines, formulas, formatting, filtering, sorting, and protection.", - "hash": "ab346db52f8f576373552f2dc8eb933b", + "summary": "Create, load, save, and export Excel workbooks with cells, formulas, tables, worksheets, charts, sparklines, formatting, protection, filtering, and sorting.", + "hash": "805ff4e65393bf9ed44e12445aefee77", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -66,8 +66,8 @@ "groupKey": "Gauges", "section": "Gauges", "groupLabel": "", - "summary": "Configure bullet graphs and linear or radial gauges with scales, needles, ranges, tick marks, labels, backing, highlights, animation, and dragging.", - "hash": "a74e8a92a3cc941fb6339b8dabe3de47", + "summary": "Configure bullet graphs and linear or radial gauges with comparative ranges, needles, scales, tick marks, labels, backings, optical scaling, and animation", + "hash": "8d7b3b3d5046cc7eac87053212128bfb", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -75,8 +75,8 @@ "groupKey": "General", "section": "General", "groupLabel": "", - "summary": "Covers open-source versus Premium licensing, available controls, grid upgrades, and release notes for new components, API changes, breaking changes, and bug fixes.", - "hash": "3554387b18a229c563d250548c138c51", + "summary": "Compare open-source and premium components, licensing, premium features, Grid Lite upgrade path; review releases, fixes, breaking changes, and migration notes.", + "hash": "afd19feb802645b89b3dffffbfd2a6c8", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -84,8 +84,17 @@ "groupKey": "General > Getting Started", "section": "General", "groupLabel": "Getting Started", - "summary": "Create server, WebAssembly, Web App, and hybrid applications; install and register packages, configure styles and scripts, and render components", - "hash": "6e0698d58dd94293606c83a9fe70afba", + "summary": "Create server, client, web, hybrid, and open-source projects; install and register libraries, configure resources, and render cards, buttons, and components", + "hash": "3407fc03e74106ffba602ec9e545b56f", + "model": "gpt-5.6-luna", + "promptVersion": 1 + }, + { + "groupKey": "General > Ignite UI CLI", + "section": "General", + "groupLabel": "Ignite UI CLI", + "summary": "Covers CLI installation, interactive wizard project scaffolding, theme configuration, component templates and views, and AI assistant setup through MCP.", + "hash": "b93e720009c8b03455252b054f4eb1aa", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -93,8 +102,8 @@ "groupKey": "General > Installation", "section": "General", "groupLabel": "Installation", - "summary": "Configure private NuGet feeds and install packages using Visual Studio, the .NET CLI, or Package Manager, with licensed and trial sources covered", - "hash": "19434fd8865f3735021242c27ad43fa2", + "summary": "Configure the private NuGet feed and install packages with Visual Studio, NuGet CLI, .NET CLI, or Package Manager for licensed or trial use.", + "hash": "f2794428c7f3f557c5b7af830ea99713", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -102,8 +111,8 @@ "groupKey": "Grids & Lists", "section": "Grids & Lists", "groupLabel": "", - "summary": "Display text/contact and hierarchical data with headers, slots, avatars, buttons, static or data-bound items, expansion, selection, keyboard navigation, and styling", - "hash": "ad5ac512f0820f197a2871a02d9ddf2a", + "summary": "Display text and contact items with headers, slots, avatars, buttons, and sizes; build hierarchical trees with expansion, selection, and keyboard navigation.", + "hash": "127077b4c93c64377e0d37f145698460", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -111,8 +120,8 @@ "groupKey": "Grids & Lists > Grid", "section": "Grids & Lists", "groupLabel": "Grid", - "summary": "Configure grids with data binding, columns, filtering, sorting, editing, grouping, selection, paging, virtualization, exporting, theming, and row actions.", - "hash": "a15870be3f0464018ffcdc2fc2ebbc04", + "summary": "Configure data binding, columns, editing, filtering, sorting, grouping, selection, paging, virtualization, export, pinning, and state persistence.", + "hash": "479595adf7fbb196fb23139350c130de", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -120,8 +129,8 @@ "groupKey": "Grids & Lists > Grid Lite", "section": "Grids & Lists", "groupLabel": "Grid Lite", - "summary": "Covers Grid Lite setup, List binding, column configuration, virtualization, keyboard navigation, filtering, sorting, theming, and CSS customization.", - "hash": "c9d9736231fd5612ce75d8cf1d1c91ee", + "summary": "Covers setup, lightweight data presentation, column configuration and resizing, List binding, filtering, sorting, runtime state, events, and CSS custom properties.", + "hash": "9f0e9ee5b14fa5f833a569f8747504b0", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -129,8 +138,8 @@ "groupKey": "Grids & Lists > Hierarchical Grid", "section": "Grids & Lists", "groupLabel": "Hierarchical Grid", - "summary": "Configure hierarchical grids with nested data, row islands, load-on-demand, editing, filtering, sorting, selection, export, state, and virtualization.", - "hash": "a422873e40f0bcad5dbd77afc9619165", + "summary": "Configure hierarchical grids for nested and remote data, editing, filtering, sorting, selection, column operations, export, virtualization, sizing, and state.", + "hash": "3248d5e2191e18a535e1410e4c246665", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -138,8 +147,8 @@ "groupKey": "Grids & Lists > Pivot Grid", "section": "Grids & Lists", "groupLabel": "Pivot Grid", - "summary": "Configure Pivot Grid rows, columns, values, filters, and aggregations; persist state and manage dimensions with sorting, resizing, selection, and compact mode.", - "hash": "d9f5e6092f70bd97cde111f7e50b76c0", + "summary": "Configure Pivot Grid dimensions and values to group and aggregate data, use date hierarchies, persist state, and enable sorting, selection, and compact mode", + "hash": "de3fb8dd540b406bf6ae0201555d1d4d", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -147,8 +156,8 @@ "groupKey": "Grids & Lists > Tree Grid", "section": "Grids & Lists", "groupLabel": "Tree Grid", - "summary": "Configure hierarchical data, editing, filtering, sorting, selection, summaries, exporting, virtualization, state persistence, column and row APIs, and styling", - "hash": "279c8c630ed9accc6f1baf8e956fcfeb", + "summary": "Configure hierarchical data, columns, editing, filtering, sorting, selection, pinning, paging, exports, virtualization, summaries, and state persistence", + "hash": "b438ec3d2d32243bb3d33949cd4058fe", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -156,8 +165,8 @@ "groupKey": "Interactions", "section": "Interactions", "groupLabel": "", - "summary": "Covers ripple animations and color customization, tooltips with anchors, placement, triggers, and accessibility, plus sliders with ranges, ticks, labels, and events.", - "hash": "a313de8ca9e21b98bb3f33ffc37a1ff7", + "summary": "Configure chat messages, typing indicators, tooltips, ripple effects, sliders, and query builders with events, styling, templates, and expression trees.", + "hash": "ec5e4f6e156e57d03baf1d3ff19789b3", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -165,8 +174,8 @@ "groupKey": "Interactivity", "section": "Interactivity", "groupLabel": "", - "summary": "Covers accessibility support against Section 508 and WCAG guidelines, including compliance matrices, legends, and WAI-ARIA guidance.", - "hash": "75d7c9b2a6f38a71d3392e5d95469421", + "summary": "Covers accessibility standards, component accessibility behavior, application configuration, formal conformance reports, and accessibility issue reporting.", + "hash": "c77b5554345025bcd4633880b225233e", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -174,8 +183,8 @@ "groupKey": "Layouts", "section": "Layouts", "groupLabel": "", - "summary": "Build expandable panels, cards, carousels, tabs, steppers, avatars, dividers, and resizable tiles with navigation, customization, reordering, and keyboard support", - "hash": "392b7c99a19822ba83ec1a98f9e0d863", + "summary": "Build panels, cards, carousels, tabs, steppers, split panes, tile layouts, avatars, and dividers with expansion, navigation, sizing, accessibility, and styling", + "hash": "e9e57c19392a0b153affe9173ad228e5", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -183,8 +192,8 @@ "groupKey": "Layouts > Dock Manager", "section": "Layouts", "groupLabel": "Dock Manager", - "summary": "Configure split panes, document hosts, tab groups, pinned/floating panes; update content and embed charts, gauges, and maps with iframes, plus styling", - "hash": "34a7905d3d0e753c2bd3366d1878a296", + "summary": "Build split panes with document hosts, tab groups, floating panes, button slots, styling, keyboard navigation, iframes, and manager-driven chart/map updates.", + "hash": "8cd82a47f5b1d4c25f46f12914c0a163", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -192,8 +201,8 @@ "groupKey": "Maps", "section": "Maps", "groupLabel": "", - "summary": "Covers map navigation, coordinate conversion, data binding, and configuration for scatter area, contour, density, bubble, symbol, polygon, and polyline series", - "hash": "a941417a6bf4c1c4a4154da9b82e85f1", + "summary": "Map geographic data to scatter area, contour, density, bubble, and symbol series; support polygon/polyline maps, navigation, and coordinate conversion", + "hash": "9f999ffe5dc1cc65e326d5449835290a", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -201,8 +210,8 @@ "groupKey": "Maps > Geographic Map Features", "section": "Maps", "groupLabel": "Geographic Map Features", - "summary": "Display geographic data on imagery maps, bind CSV, JSON, models, and shapefiles, overlay sources and series, configure imagery, navigation, and resources", - "hash": "3c1687542ef1a1d64b77cc1f5235fb01", + "summary": "Display geographic data and imagery, bind CSV, JSON, custom models, and shapefiles, overlay map series and sources, zoom and pan, and use world utilities.", + "hash": "c6827746c0157db213b6399ce1d18922", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -210,8 +219,8 @@ "groupKey": "Menus", "section": "Menus", "groupLabel": "", - "summary": "Covers toolbars with chart components, custom actions, commands, icons, orientation, navbars, and expandable navigation drawers with mini mode and styling", - "hash": "9ef15ab69f98a67d4376a7e185cc69be", + "summary": "Configure toolbars, navbars, and navigation drawers with custom actions, icons, orientation, titles, mini variants, positioning, toggling, selection, and CSS parts.", + "hash": "eff009a582a8eca937deca0fc58d4544", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -219,8 +228,8 @@ "groupKey": "Notifications", "section": "Notifications", "groupLabel": "", - "summary": "Display banners, snackbars, toasts, and dialogs with custom content, actions, timing, positioning, events, modal prompts, forms, behavior, and styling.", - "hash": "0322ccba726baaa05fd26d2c486f6465", + "summary": "Display and customize banners, snackbars, toasts, and dialogs with messages, actions, visibility, timing, events, modal behavior, and CSS styling.", + "hash": "9774da876fa4674848aa8d86e9d91471", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -228,8 +237,8 @@ "groupKey": "Scheduling", "section": "Scheduling", "groupLabel": "", - "summary": "Covers calendar date selection, disabled and special dates, keyboard navigation, date picker input and formatting, and date range binding and validation", - "hash": "d6f85e2e65c55a8c041a92f25528bf9d", + "summary": "Calendar, Date Picker, and Date Range Picker cover selection modes, date ranges, events, formatting, keyboard navigation, validation, slots, and styling.", + "hash": "c635fa6cd3cf060b8ef54b58d2cd54ff", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -237,8 +246,8 @@ "groupKey": "Styling & Themes", "section": "Styling & Themes", "groupLabel": "", - "summary": "Load and configure bundled themes, switch light and dark stylesheet paths, and customize type scales, font families, and individual styles with CSS variables.", - "hash": "e4d81ce2fc6175a01174e0792020bc8d", + "summary": "Covers theme loading, CSS variables and Sass, palettes, light/dark themes, typography, elevations, spacing, CSS parts, accessibility utilities, and design tokens", + "hash": "423bf402f49bf4b064473258837530e7", "model": "gpt-5.6-luna", "promptVersion": 1 } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/react.json b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/react.json index 9597c92aa..fffcd7e19 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/react.json +++ b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/react.json @@ -3,8 +3,8 @@ "groupKey": "AI-Assisted Development", "section": "AI-Assisted Development", "groupLabel": "", - "summary": "Configure AI coding assistants with MCP tools for project scaffolding, component APIs, documentation, design tokens, themes, and validated executable plans.", - "hash": "a72059eec4fa4219a2dd50881eb88320", + "summary": "Configure agent skills and MCP servers for AI coding assistants to scaffold projects, modify components, answer documentation questions, and generate themes.", + "hash": "3d399aef178bb5a4535d242f9a161064", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -12,8 +12,8 @@ "groupKey": "Charts", "section": "Charts", "groupLabel": "", - "summary": "Create area, bar, column, line, pie, donut, scatter, polar, radial, stock, treemap, and sparkline charts with axes, series, legends, styling, and interaction.", - "hash": "89cf5307d7cd3da883729065fd78a252", + "summary": "Build and style area, bar, column, line, pie, donut, scatter, polar, radial, stock, treemap, and sparkline charts with data binding, axes, series, and legends", + "hash": "f1b8aade6932e2fa665f8cfe09f06daf", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -21,8 +21,8 @@ "groupKey": "Charts > Chart Features", "section": "Charts", "groupLabel": "Chart Features", - "summary": "Configure chart axes, annotations, animation, highlighting, navigation, overlays, tooltips, trendlines, selection, synchronization, and performance.", - "hash": "52d64ad56f47c3c6f59dab53dc35790c", + "summary": "Configure chart axes, annotations, overlays, animations, tooltips, selection, highlighting, navigation, trendlines, filtering, aggregation, and performance", + "hash": "c0db5822d7fe862b609e1452e2332506", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -30,8 +30,8 @@ "groupKey": "Dashboards", "section": "Dashboards", "groupLabel": "", - "summary": "Covers dashboard tile module registration, data binding, automatic visualization selection, toolbar tools, and supported visualization types.", - "hash": "79bebf5c77ce3313046b8cd7998eac9f", + "summary": "Covers Dashboard Tile data-source analysis, automatic visualization selection, and customization of displayed visualizations through the toolbar and properties.", + "hash": "845e1fc13b9c4041844fbdc27e6885a2", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -39,8 +39,8 @@ "groupKey": "Data Entry & Display", "section": "Data Entry & Display", "groupLabel": "", - "summary": "Covers badges, buttons, chips, icons, color editing, text and masked date/time inputs, selection controls, dropdowns, ratings, and progress indicators.", - "hash": "d0a9ff3fd8e9ce36d914d62705f84e3d", + "summary": "Covers inputs, selection, actions, status, progress indicators, icons, QR codes, highlighting, and virtual scrolling with validation, styling, and accessibility.", + "hash": "714161fc5a48ce3919f014adb6c3e843", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -48,8 +48,8 @@ "groupKey": "Data Entry & Display > Combo Box", "section": "Data Entry & Display", "groupLabel": "Combo Box", - "summary": "Configure data binding, filtering, grouping, selection, validation, keyboard navigation, disabled states, and custom item, header, footer, and icon content.", - "hash": "c6ef493262b64b5bda304d628fcc0199", + "summary": "Covers ComboBox data binding, displayed and selected values, filtering, grouping, validation, keyboard navigation, templates, slots, and single-selection mode", + "hash": "aecaed629caf0cffe9de0169ca822a9c", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -57,8 +57,8 @@ "groupKey": "Frameworks > Excel Library", "section": "Frameworks", "groupLabel": "Excel Library", - "summary": "Create, load, save, and manipulate Excel workbooks, worksheets, cells, tables, charts, sparklines, formulas, formatting, filtering, sorting, protection, and supported file formats.", - "hash": "5cd4d2a03c124690db7e1e2245ad6745", + "summary": "Create, load, save, and export Excel workbooks; manage worksheets, cells, tables, charts, sparklines, formulas, formatting, protection, and filtering.", + "hash": "349f8f38b618d2fcf10662f87b1c8688", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -66,8 +66,8 @@ "groupKey": "Gauges", "section": "Gauges", "groupLabel": "", - "summary": "Compare values and targets against scales with bullet, linear, and radial gauges using needles, ranges, labels, tick marks, backings, and animation.", - "hash": "19ecaa289fd76d5a49aa72174cad882c", + "summary": "Configure bullet graphs and linear/radial gauges to compare performance and targets, with needles, ranges, scales, labels, tick marks, backings, and animation", + "hash": "126b4d10333ad0f7e33974a5abc66984", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -75,8 +75,8 @@ "groupKey": "General", "section": "General", "groupLabel": "", - "summary": "Install and scaffold applications, render grids, localize components, manage licensing, compare component tiers, use client/server patterns, and track updates.", - "hash": "57d54f41eaf1d226b3d15c002cfe65ba", + "summary": "Install and update applications, render a Grid, configure licensing and packages, localize components, use client/server rendering, and review release changes.", + "hash": "6230d5b51b3098de7e87a80b221f9380", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -84,8 +84,8 @@ "groupKey": "General > How to", "section": "General", "groupLabel": "How to", - "summary": "Follow an end-to-end workflow to scaffold an app, connect MCP servers, add features, query documentation, and apply custom themes.", - "hash": "188f25174be9aa6e708242e9911e75ff", + "summary": "Use CLI and Theming MCP in one chat workflow to scaffold an app, add features, ask documentation questions, and apply a custom theme.", + "hash": "c943eb3fbdfce550492dc683d9df7f56", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -93,8 +93,8 @@ "groupKey": "General > Ignite UI CLI", "section": "General", "groupLabel": "Ignite UI CLI", - "summary": "Scaffold projects and component views, configure templates, themes, Vite development commands, AI tooling, and MCP integration through an interactive wizard.", - "hash": "c0ce5432ddce0a726fc42d4f99364bc3", + "summary": "Install the CLI, scaffold projects and component views, choose templates and themes, run development workflows, and configure AI tooling through its MCP server", + "hash": "112a6b9eb6e7acf2660cab1833dcaebc", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -102,8 +102,8 @@ "groupKey": "Grids & Lists", "section": "Grids & Lists", "groupLabel": "", - "summary": "Display text and templated items with headers, slots, avatars, and buttons, or show hierarchical data with expansion, selection, keyboard navigation, and styling.", - "hash": "1c97b115f7d1c7f6f6e729d59924b2e8", + "summary": "Build lists with headers, slotted items, avatars, action buttons, sizing, and CSS parts; create hierarchical trees with expansion, selection, and keyboard navigation", + "hash": "a0928c04427b8ecdea38dabd89b335fa", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -111,8 +111,8 @@ "groupKey": "Grids & Lists > Grid", "section": "Grids & Lists", "groupLabel": "Grid", - "summary": "Configure data, columns, editing, filtering, sorting, paging, grouping, selection, virtualization, exporting, clipboard, pinning, theming, and state persistence", - "hash": "e9e29648a31d1627981fbbd97230129d", + "summary": "Configure data binding, columns, editing, filtering, sorting, grouping, selection, paging, virtualization, exporting, pinning, resizing, navigation, and state persistence.", + "hash": "3fb3a158e792cdb95548d6ee3347be58", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -120,8 +120,8 @@ "groupKey": "Grids & Lists > Grid Lite", "section": "Grids & Lists", "groupLabel": "Grid Lite", - "summary": "Covers installation, data binding, data generation, column configuration, cell and header templates, filtering, sorting, remote operations, and theming.", - "hash": "6534e67e987d22d8455cd245f22d2ab2", + "summary": "Covers installing and using lightweight data grids, data binding, column configuration, cell and header templates, filtering, sorting, events, remote operations, and CSS/Sass theming.", + "hash": "59c3597d65b45657360dd27e6ef425d6", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -129,8 +129,8 @@ "groupKey": "Grids & Lists > Hierarchical Grid", "section": "Grids & Lists", "groupLabel": "Hierarchical Grid", - "summary": "Covers nested binding, row islands, editing, filtering, sorting, selection, column management, exporting, remote operations, state, summaries, and virtualization", - "hash": "de2a6acdba170dd4f0fb036a19213ec9", + "summary": "Configure hierarchical grids with nested row islands, remote and on-demand data, editing, filtering, sorting, selection, pinning, exporting, and virtualization", + "hash": "dbe8381241a7139692891a9ca8f15318", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -138,8 +138,8 @@ "groupKey": "Grids & Lists > Pivot Grid", "section": "Grids & Lists", "groupLabel": "Pivot Grid", - "summary": "Configure pivot grids for multidimensional data analysis with dimensions, values, aggregations, filtering, selection, sorting, resizing, and state persistence", - "hash": "03615af8fbb7d329e5bc4bfc022b52b8", + "summary": "Configure row, column, filter, and value dimensions; persist state; use date hierarchies, custom aggregations, sorting, resizing, selection, and compact mode.", + "hash": "af301c962abb5997322c985cfe1fba0c", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -147,8 +147,8 @@ "groupKey": "Grids & Lists > Spreadsheet", "section": "Grids & Lists", "groupLabel": "Spreadsheet", - "summary": "Manage Excel-like workbooks with editing, navigation, clipboard, charts, conditional formatting, data validation, hyperlinks, commands, and file import/export", - "hash": "912e7f4afe961351c3ac6225a2b408f5", + "summary": "Load and manage workbooks with Excel-like editing, active cells and worksheets, charts, clipboard actions, formatting, validation, hyperlinks, and commands", + "hash": "16fda9e979643c7b95a4c7a88f5840d5", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -156,8 +156,8 @@ "groupKey": "Grids & Lists > Tree Grid", "section": "Grids & Lists", "groupLabel": "Tree Grid", - "summary": "Covers hierarchical data, expandable rows, editing, filtering, sorting, selection, exporting, summaries, state persistence, and virtualization.", - "hash": "86e17329e1ce10a2123936f37fbccbc6", + "summary": "Covers hierarchical data, editing, filtering, sorting, paging, selection, column and row features, virtualization, summaries, state persistence, clipboard, and export", + "hash": "533f24f0570660e0839dfe3ce960204a", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -165,8 +165,8 @@ "groupKey": "Interactions", "section": "Interactions", "groupLabel": "", - "summary": "Build chats with attachments and Markdown, add ripples and tooltips, configure sliders and zoom navigation, and create query builders with expression trees.", - "hash": "63aac80606e4276a58671d3fbfe4c50c", + "summary": "Build chat experiences with messages and attachments; add ripples and tooltips; configure sliders and ZoomSlider navigation; create query builders", + "hash": "bc9dceeb08f11950da29ef7a8b178de6", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -174,8 +174,8 @@ "groupKey": "Interactivity", "section": "Interactivity", "groupLabel": "", - "summary": "Covers accessibility compliance, including Section 508, WCAG, and WAI-ARIA support, compliance matrices, legends, and implementation considerations.", - "hash": "3964f9c3c24a65f6a0feecfcd503844b", + "summary": "Covers accessibility standards, configuration considerations, component coverage, formal conformance documentation requests, and accessibility issue reporting.", + "hash": "acdf2c17c57e68664c4f2267a6c4bb4c", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -183,8 +183,8 @@ "groupKey": "Layouts", "section": "Layouts", "groupLabel": "", - "summary": "Build expandable panels, cards, carousels, tabs, steppers, split panes, dividers, avatars, and tile managers with navigation, sizing, and styling.", - "hash": "8fa4516222cb5d788c6c6c78a86201bb", + "summary": "Cover accordions, avatars, breadcrumbs, cards, carousels, expansion panels, steppers, tabs, splitters, and tile managers with layouts, styling, and accessibility", + "hash": "f2360f9132b8e7fe17c44be95e5ac2f5", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -192,8 +192,8 @@ "groupKey": "Layouts > Dock Manager", "section": "Layouts", "groupLabel": "Dock Manager", - "summary": "Configure split, tab, document, content, and floating panes with docking, persistence, events, styling, keyboard navigation, pane updates, and iframe embedding.", - "hash": "14e5f1a55833fe209aecb0c544156846", + "summary": "Define and update layouts with content, split, tab group, document host, and floating panes; organize content, embed iframes, and support docking, styling, and navigation", + "hash": "f7e42337a908d339c76d3689898a8f15", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -201,8 +201,8 @@ "groupKey": "Maps", "section": "Maps", "groupLabel": "", - "summary": "Configure maps with scatter area, contour, density, bubble, symbol, polygon, and polyline series, covering binding, scales, styling, tooltips, and navigation", - "hash": "6d2b32054774f756fa069be9a601cb3d", + "summary": "Map geographic coordinates and shapefiles with scatter, bubble, symbol, density, area, and contour series plus polygon and polyline series; configure scales, zoom, and viewport APIs.", + "hash": "07cfe93784c2a3eddf68dbb0d11e242f", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -210,8 +210,8 @@ "groupKey": "Maps > Geographic Map Features", "section": "Maps", "groupLabel": "Geographic Map Features", - "summary": "Covers geographic maps with imagery tiles, CSV, JSON, model, and shapefile data; overlays series, styles shapes, adds heat maps, and supports map navigation.", - "hash": "d7464d539c8e03d1b475661d8a1cbdf8", + "summary": "Covers geographic maps with map imagery, CSV/JSON/model/shapefile data binding, overlays, shape styling, navigation, heat maps, tooltips, and utilities", + "hash": "9a2a7c88da1cbead41cd5bd9f79183c2", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -219,8 +219,8 @@ "groupKey": "Menus", "section": "Menus", "groupLabel": "", - "summary": "Covers Toolbar actions, chart integration, icons, and color editing; Navbar titles, content, and icons; and Navigation Drawer items, toggling, selection, and styling", - "hash": "7da18519e479d8ca654e6e5ec7ebd42b", + "summary": "Covers chart toolbars with built-in and custom actions, navbars with titles and navigation, and drawers with menu items, mini variants, and open/close controls", + "hash": "0c421cd2df39868026558eb80c3ea60d", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -228,8 +228,8 @@ "groupKey": "Notifications", "section": "Notifications", "groupLabel": "", - "summary": "Display banners, snackbars, toasts, and modal dialogs with customized content, actions, timing, visibility duration, closing behavior, forms, slots, and styling.", - "hash": "1045610aec7af9b68f0d8ea727656e61", + "summary": "Display and customize banners, snackbars, toasts, and modal dialogs with messages, icons, actions, timing, visibility, forms, footers, events, and styling", + "hash": "4b410e910cb1977807744dbb29839d9e", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -237,8 +237,8 @@ "groupKey": "Scheduling", "section": "Scheduling", "groupLabel": "", - "summary": "Configure calendars and date pickers for date selection, ranges, entry, formatting, validation, localization, disabled dates, events, keyboard navigation, and styling", - "hash": "ac1f5b60b7cb6769d26fbdd7bf554f85", + "summary": "Configure calendars, date pickers, and date range pickers with selection modes, ranges, formatting, validation, localization, keyboard navigation, and forms", + "hash": "ae46b80ca6016d148f673ac910be8cb5", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -246,8 +246,8 @@ "groupKey": "Styling & Themes", "section": "Styling & Themes", "groupLabel": "", - "summary": "Load and configure bundled Bootstrap, Material, Fluent, and Indigo themes, with light and dark theme paths and the ConfigureTheme API.", - "hash": "86ffc94fd61992d17ffa33b747cd05f1", + "summary": "Load and customize themes with CSS variables or Sass, configuring palettes, typography, elevation, roundness, spacing, CSS parts, accessibility, and utility classes", + "hash": "99613c214c233ccd1d00f0bb87ae5d6b", "model": "gpt-5.6-luna", "promptVersion": 1 } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/webcomponents.json b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/webcomponents.json index b648c6b36..5d7d297fc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/webcomponents.json +++ b/packages/igniteui-mcp/igniteui-doc-mcp/data/group-summaries/webcomponents.json @@ -3,8 +3,8 @@ "groupKey": "AI-Assisted Development", "section": "AI-Assisted Development", "groupLabel": "", - "summary": "Configure Agent Skills and MCP servers to scaffold projects, generate components, answer API questions, create themes, and orchestrate validated AI workflows.", - "hash": "9a5f628e6c1f82c312fa2639ea4b80a9", + "summary": "Configure agent skills and MCP servers to scaffold applications, answer API questions, generate themes and palettes, and execute consensus-based plans.", + "hash": "e76307667624fcc63f501e02a9c991b6", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -12,8 +12,8 @@ "groupKey": "Charts", "section": "Charts", "groupLabel": "", - "summary": "Create area, bar, line, pie, polar, radial, scatter, stock, treemap, sparkline, stacked, combo, and step charts with data binding, styling, interaction, and APIs", - "hash": "f5884031a310933714342205e9eaf7ee", + "summary": "Covers area, bar, column, line, pie, polar, radial, scatter, stock, treemap, and sparkline charts, with data binding, series, axes, legends, and styling", + "hash": "61200e7315a4e782e364df4caef7018d", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -21,8 +21,8 @@ "groupKey": "Charts > Chart Features", "section": "Charts", "groupLabel": "Chart Features", - "summary": "Configure axes, annotations, animations, navigation, overlays, tooltips, trendlines, selection, highlighting, legends, filtering, and performance.", - "hash": "50d06c6a42ecafdc6f8efe9a1b2325eb", + "summary": "Configure chart axes, annotations, animations, highlighting, markers, navigation, overlays, tooltips, trendlines, filtering, selection, legends, and synchronization.", + "hash": "30ed25449b22f4b2f081a89275757874", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -30,8 +30,8 @@ "groupKey": "Dashboards", "section": "Dashboards", "groupLabel": "", - "summary": "Dashboard tiles automatically select visualizations from data sources, with toolbar tools to change visualization types and configure data and display settings.", - "hash": "db4226a2f7b1a044c6b021ddea6b0364", + "summary": "Analyze data sources in tiles, select and control visualization types, inspect data, and configure dashboard displays with the toolbar.", + "hash": "8ba8e75c17d65e764f66115855b2e3e5", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -39,8 +39,8 @@ "groupKey": "Data Entry & Display", "section": "Data Entry & Display", "groupLabel": "", - "summary": "Covers badges, buttons, inputs, selection controls, dropdowns, color and date-time editing, file uploads, progress indicators, icons, ratings, chips, Text Area, and styling.", - "hash": "1214040bfbaed664be72ad3bc0c193a9", + "summary": "Covers status indicators, buttons, selection controls, inputs, pickers, progress indicators, icons, ratings, text highlighting, QR codes, and virtualized lists", + "hash": "99c0ad3ea00af4850da1f9b973f6b7ab", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -48,8 +48,8 @@ "groupKey": "Data Entry & Display > Combo Box", "section": "Data Entry & Display", "groupLabel": "Combo Box", - "summary": "Covers ComboBox setup, data binding, filtering, grouping, selection, validation, keyboard navigation, disabled states, styling, templates, and content slots.", - "hash": "661eb86e82e97a493401dcb4c927f8ce", + "summary": "Covers ComboBox data binding, selection APIs, validation, keyboard navigation, filtering, grouping, templates, slots, styling, and single-selection behavior.", + "hash": "56007a51b16714f396a0436456ff406e", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -57,8 +57,8 @@ "groupKey": "Frameworks > Excel Library", "section": "Frameworks", "groupLabel": "Excel Library", - "summary": "Load and save Excel workbooks, configure worksheets, manipulate cells and tables, and support charts, sparklines, filtering, sorting, and protection.", - "hash": "079e3ba5be9fe3706f21bd12822556e7", + "summary": "Load, create, and save Excel workbooks; access and format cells, tables, and worksheets; add charts and sparklines; configure protection, filtering, and sorting", + "hash": "b214519048632e5b8bc02221c7f00bc4", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -66,8 +66,8 @@ "groupKey": "Gauges", "section": "Gauges", "groupLabel": "", - "summary": "Configure bullet graphs, linear gauges, and radial gauges with measures, scales, needles, ranges, labels, tick marks, backing, highlights, and animation.", - "hash": "cf3304e266884ee2d2f997fe925c64e9", + "summary": "Configure bullet, linear, and radial gauges to compare values with targets and ranges, customizing scales, labels, tick marks, backings, and needles.", + "hash": "ff07168337c28deea3cfac28c575e86a", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -75,8 +75,8 @@ "groupKey": "General", "section": "General", "groupLabel": "", - "summary": "Install and configure components via CLI or npm, localize dates and numbers, manage licensing and npm feeds, compare editions, and review release changes.", - "hash": "6eb3a8465fae9c45a8b9bd0bb5d5ef3c", + "summary": "Covers app scaffolding, package installation, polyfills, component registration, charts and maps setup, localization, licensing, tiers, CI, and release history.", + "hash": "c2d969e5b84ea2a1910957583040d52d", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -84,8 +84,8 @@ "groupKey": "General > How to", "section": "General", "groupLabel": "How to", - "summary": "Follow an end-to-end workflow for scaffolding, extending, documenting, and theming an app through AI chat, with CLI MCP and Theming MCP working together.", - "hash": "26552f71a235dd677afbe29054b7e448", + "summary": "Set up CLI and theming MCPs to scaffold, extend, and theme a Web Components app, ask documentation questions, and iterate on themes through chat.", + "hash": "dd4724136c6e18eeefee52f1c2f0be74", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -93,8 +93,8 @@ "groupKey": "General > Ignite UI CLI", "section": "General", "groupLabel": "Ignite UI CLI", - "summary": "Install and use the CLI to scaffold projects, select templates and themes, add component views, run applications, and configure AI assistants through MCP.", - "hash": "fbcd06c425c2430282aad43ac9cac904", + "summary": "Install and use the CLI to scaffold Web Components projects, select templates and themes, add component views, run applications, and configure AI tooling.", + "hash": "ed6001294439cebde87b5eb4b07a264e", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -102,8 +102,8 @@ "groupKey": "Grids & Lists", "section": "Grids & Lists", "groupLabel": "", - "summary": "Display templated lists and hierarchical trees with headers, slots, actions, selection, keyboard navigation, load on demand, virtualization, and styling.", - "hash": "3fe064142806e729470555cf8b08ea85", + "summary": "Display text and contact items in lists, customize slots and CSS parts, and build hierarchical trees with expansion, selection, and load on demand.", + "hash": "82522e0b819bd5a110b6a74ff967716d", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -111,8 +111,8 @@ "groupKey": "Grids & Lists > Grid", "section": "Grids & Lists", "groupLabel": "Grid", - "summary": "Configure grid data, columns, editing, filtering, sorting, grouping, selection, paging, virtualization, clipboard, export, state persistence, sizing, and theming", - "hash": "7312dd667ad44cbaca4da99e548ffdec", + "summary": "Configure and bind Grid data, columns, templates, editing, filtering, sorting, grouping, selection, paging, virtualization, exporting, pinning, sizing, and state", + "hash": "dce6ca5b48b3cc3fcec64b27f6980866", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -120,8 +120,8 @@ "groupKey": "Grids & Lists > Grid Lite", "section": "Grids & Lists", "groupLabel": "Grid Lite", - "summary": "Configure data binding, columns, cells, headers, filtering, sorting, themes, and runtime updates with custom templates, events, remote operations, and styling", - "hash": "1f753e3b5de7686de2bcc685f21738a4", + "summary": "Covers setup, data binding, column configuration, cell and header templates, filtering, sorting, theming, API methods, events, custom comparers, and data pipeline hooks.", + "hash": "45b123602d70e74c0716321ed33654ff", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -129,8 +129,8 @@ "groupKey": "Grids & Lists > Hierarchical Grid", "section": "Grids & Lists", "groupLabel": "Hierarchical Grid", - "summary": "Configure hierarchical data binding, load-on-demand, editing, selection, filtering, sorting, exporting, styling, sizing, virtualization, and state persistence.", - "hash": "8d2e90a7751b224573653dd745d192f0", + "summary": "Configure hierarchical data, on-demand child loading, columns, editing, filtering, sorting, selection, pinning, exporting, summaries, virtualization, and styling", + "hash": "a06aab186b9f603c76f99bcd6d926291", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -138,8 +138,8 @@ "groupKey": "Grids & Lists > Pivot Grid", "section": "Grids & Lists", "groupLabel": "Pivot Grid", - "summary": "Configure pivot grids for multidimensional analysis with rows, columns, filters, values, hierarchies, custom aggregations, state persistence, and remote operations.", - "hash": "97caed2647be0dec83f36265b98b4d63", + "summary": "Configure pivot grids for multidimensional cross-tabular data, define dimensions and hierarchies, persist state, and display remotely grouped and aggregated data", + "hash": "5b73c6a05fe3b5fd081c22d293b2da2e", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -147,8 +147,8 @@ "groupKey": "Grids & Lists > Spreadsheet", "section": "Grids & Lists", "groupLabel": "Spreadsheet", - "summary": "Configure spreadsheets, load and save Excel workbooks, edit and format cells, use formulas, validation, hyperlinks, charts, clipboard, and commands.", - "hash": "df2e062c7166ac319be2d1acf00a55be", + "summary": "Configure spreadsheets, load and save workbooks, manage active cells and worksheets, add charts and hyperlinks, use clipboard actions, formatting, validation, and commands.", + "hash": "d2b98dda3360584da26c06dbf7ba83f8", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -156,8 +156,8 @@ "groupKey": "Grids & Lists > Tree Grid", "section": "Grids & Lists", "groupLabel": "Tree Grid", - "summary": "Build hierarchical and flat Tree Grids with editing, filtering, sorting, selection, paging, virtualization, exporting, state persistence, and load-on-demand", - "hash": "dd715f303e6bbdb624c91b29fe07faa4", + "summary": "Configure hierarchical data, editing, filtering, sorting, selection, paging, virtualization, drag-and-drop, pinning, export, summaries, and state persistence.", + "hash": "1e2a05d194e22cb23d631c45bd8bdc92", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -165,8 +165,8 @@ "groupKey": "Interactions", "section": "Interactions", "groupLabel": "", - "summary": "Build chat experiences, touch and click ripples, tooltips, sliders, chart zooming, and query-builder filtering with expressions, events, accessibility, and styling.", - "hash": "885e11a79583d7c1ea208523ba2b74ca", + "summary": "Build chat with attachments and quick replies, configure ripples, tooltips, sliders, zoom and range navigation, and query builders with expression trees.", + "hash": "c9a2de26bc3da3a8b1e449d26c7e1116", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -174,8 +174,8 @@ "groupKey": "Interactivity", "section": "Interactivity", "groupLabel": "", - "summary": "Covers accessibility compliance through Section 508, WCAG, and WAI-ARIA support, with coverage matrices for grids and UI components.", - "hash": "60dabe59ac2d6555ba2e06100c27623c", + "summary": "Covers accessibility standards, component behaviors, configuration guidance, conformance reports, and procedures for reporting accessibility issues.", + "hash": "8af44f6b1cafe46c6f39020f65e1e20c", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -183,8 +183,8 @@ "groupKey": "Layouts", "section": "Layouts", "groupLabel": "", - "summary": "Build layouts with expandable panels, cards, tabs, steppers, carousels, split panes, dividers, avatars, and resizable, reorderable tiles.", - "hash": "90d056d698e4fc65bb4ba6b35bb794c3", + "summary": "Create layouts with expandable panels, cards, tabs, steppers, split panes, carousels, breadcrumbs, dividers, avatars, and tile managers.", + "hash": "ea6f9d99e6ff6a4edb653f2bb7e70b22", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -192,8 +192,8 @@ "groupKey": "Layouts > Dock Manager", "section": "Layouts", "groupLabel": "Dock Manager", - "summary": "Configure content, split, tab group, document, and floating panes with runtime docking, persistence, customization, localization, and Electron window dragging", - "hash": "68a2e9be1884303f50aa8e7d6002a45c", + "summary": "Define and update layouts, configure pane types and embedded content, and manage docking, floating, dragging, resizing, focus, visibility, and keyboard navigation.", + "hash": "ac1297df1633c2567823633e3ca1f01a", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -201,8 +201,8 @@ "groupKey": "Maps", "section": "Maps", "groupLabel": "", - "summary": "Configure maps with symbol, bubble, density, contour, area, polygon, and polyline series, including coordinate binding, triangulation, scales, shapefiles, and navigation", - "hash": "cf8a7c969c5b9d65eb923fac75babbfb", + "summary": "Map geographic points, surfaces, contours, density, bubbles, symbols, polygons, and polylines using data binding, color scales, triangulation, and shapefiles", + "hash": "dc678eb65b0b8a7a7faa54b4097ca955", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -210,8 +210,8 @@ "groupKey": "Maps > Geographic Map Features", "section": "Maps", "groupLabel": "Geographic Map Features", - "summary": "Display and bind geographic data from CSV, JSON, models, and shape files; overlay map series, imagery, navigation, shape styling, and world-data utilities.", - "hash": "45b576c449a12fc3351dfd34a609b816", + "summary": "Display geographic data with map series, imagery backgrounds, CSV, JSON, model, and shapefile binding, navigation, shape styling, heat maps, and geographic utilities.", + "hash": "ff9bffc381e9d0aa9fd62a93d62d1540", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -219,8 +219,8 @@ "groupKey": "Menus", "section": "Menus", "groupLabel": "", - "summary": "Toolbars cover built-in/custom actions, icons, orientation, color editing; navbars cover navigation, while drawers cover items, mini mode, positioning, styling.", - "hash": "7aee27018ba3bfd01b239015d00da53f", + "summary": "Covers Toolbar chart links, actions, custom icons, orientation and color editing; navbar titles/icons/styles; Navigation Drawer integration, position/visibility", + "hash": "52ba8b7db5bc480f3910475a95241770", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -228,8 +228,8 @@ "groupKey": "Notifications", "section": "Notifications", "groupLabel": "", - "summary": "Display banners, snackbars, toast notifications, and modal dialogs with custom content, actions, events, visibility controls, forms, and styling.", - "hash": "4087b3a0196f983f3dfce3ffc14c334b", + "summary": "Display and customize banners, snackbars, toasts, and modal dialogs with messages, actions, timing, visibility, closing behavior, events, registration, and CSS parts.", + "hash": "3d7e8c105ab215b85b7e8a9aae881895", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -237,8 +237,8 @@ "groupKey": "Scheduling", "section": "Scheduling", "groupLabel": "", - "summary": "Covers calendar, date picker, and date range picker setup, selection, formatting, localization, validation, ranges, keyboard navigation, events, and styling.", - "hash": "98309a8283b0c7608d7c7176e566c549", + "summary": "Covers Calendar, Date Picker, and date range picker selection modes, input modes, views, date restrictions, localization, validation, slots, and styling.", + "hash": "5480f089bcdb7f8bd9c4b61b039c32cb", "model": "gpt-5.6-luna", "promptVersion": 1 }, @@ -246,8 +246,8 @@ "groupKey": "Styling & Themes", "section": "Styling & Themes", "groupLabel": "", - "summary": "Load and switch Bootstrap, Material, Fluent, and Indigo themes; customize palettes, typography, elevation, roundness, size, spacing, CSS parts, and Tailwind utilities", - "hash": "4a7c77749dbab952d29ae356be467b20", + "summary": "Load and switch themes at runtime; customize palettes, typography, elevation, CSS variables; style components with utility-first styles and accessible dark themes", + "hash": "ddf8a1725b5655bd3efb9baf2968a719", "model": "gpt-5.6-luna", "promptVersion": 1 } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db index 53ef147c0..4546920f6 100644 Binary files a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db and b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md index 4042e3b11..f835bb1bc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md @@ -1,354 +1,348 @@ --- -title: Angular Accordion Component – Fully-featured collapsible panels - Infragistics - MIT license -_description: Angular Accordion is used to build vertical expandable panels in accordion menu. Check how to do it with Ignite UI for Angular accordion component. -_keywords: angular accordion, angular accordion component, angular accordion example, ignite ui for angular, angular UI components, infragistics -_license: MIT +title: "Angular Accordion Component | Layouts | Infragistics" +description: "Angular Accordion is a layout component for organizing expandable and collapsible content panels in a vertical container." +keywords: "Angular Accordion, accordion component, expandable panels, Ignite UI for Angular, Infragistics" +license: MIT +last_updated: "2026-07-30" +mentionedTypes: ["Accordion", "ExpansionPanel"] +namespace: Infragistics.Controls +relatedComponents: ["ExpansionPanel"] +llms: + description: "The Ignite UI for Angular Accordion helps developers group related content into expandable and collapsible panels inside a vertical layout." _tocName: Accordion --- +# Accordion Component -# Angular Accordion Component Overview +The Ignite UI for Angular Accordion is a layout component for organizing expandable content panels in a single vertical container. -## What is Angular Accordion? - -The Angular Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. It offers keyboard navigation and API to control the underlying panels' expansion state. - -Users are enabled to interact and navigate among a list of items, such as thumbnails or labels. Each one of those items can be toggled (expanded or collapsed) in order to reveal the containing information. Depending on the configuration, there can be a single or multiple expanded items at a time. - -## Angular Accordion Example - -The following is a basic Angular Accordion example of a FAQ section. It operates as an accordion, with individually working sections. You can toggle each text block with a single click, while expanding multiple panels at the same time. This way you can read information more easily, without having to go back and forth between an automatically expanding and collapsing panel, which conceals the previously opened section every time. - -In it, you can see how to define an `igx-accrodion` and its [expansion panels](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). The sample also demonstrates the two types of expansion behavior. The switch button sets the [singleBranchExpand](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=singleBranchExpand) property to toggle between single and multiple branches to be expanded at a time. +## Live Demo ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; -import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; import { FormsModule } from '@angular/forms'; @Component({ - selector: 'app-accordion-sample-1', - styleUrls: ['./accordion-sample-1.component.scss'], - templateUrl: './accordion-sample-1.component.html', - imports: [IgxSwitchComponent, FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] + selector: 'app-accordion-overview', + styleUrls: ['./accordion-overview.component.scss'], + templateUrl: './accordion-overview.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxSwitchComponent, FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] }) -export class AccordionSample1Component { +export class AccordionOverviewComponent { public singleBranchExpand = false; } ``` ```html -Single Branch Expand -
- - - - - What has changed about subscription and pricing model? - - - - We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. - - We updated our pricing and packages to provide you with flexible options and the best value. This - includes Ignite UI (formerly Ignite UI for - JavaScript) which includes all of our JavaScript framework - components for web development, including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and - Web Components), as well as Infragistics Professional, Infragistics Ultimate, our Ultimate UI products. - - We also offer multi-year subscriptions options with a built-in discount, so you can see the value up - front. With these updates we are confident that we are providing the best platforms and the best price. - - - - - Who will the updated changes impact? - - -
- The license updates will impact all new and current customers using Ignite UI, Infragistics Professional - and Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for - Ignite UI for JavaScript, Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. - For more information, please refer to this blog: - - Announcement: - Changes to Ignite UI Product & Packaging - - The pricing has been updated for all products and packages. So, all new or additional licenses will be - sold based on our new pricing and packages. All existing license agreements will be honored and renewed - based upon the current agreement. -
- - - - - What is the difference between your old model and your current subscription - model - for Ignite UI? - - - For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages - will be replaced with packages that include a “Trial Version” watermark. Licensed packages for Ignite UI - will be available from our cloud hosted ProGet server. - - For more information, please refer to this article: - - Moving - from Trial to Licensed Ignite UI NPM Packages - - - - - - What happens if I don't renew my subscription? - - - Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include - this watermark. - - - - - If I don't renew my subscription will - I still have access to previous versions of Infragistics products? - - - - Any version of Infragistics software which you have downloaded can continue to be used perpetually. - Access to download any new or previous versions through our customer portal and package feeds will - require maintaining an active subscription by continuing to renew it. - - - -
+
+
+
+ Single Expand +
+ + + + + Account + Profile and security settings + + +

Update your profile details, password, and sign-in preferences.

+ + + + + Notifications + Email and product updates + + +

Choose which notifications you receive and how often they are delivered.

+ + + + + Billing + Payment and invoice settings + + +

Manage payment methods, billing contacts, and invoice delivery options.

+ + + +
+
``` ```scss -$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25); - -.sample-wrapper { +.accordion-sample { + width: 100%; + height: 100%; overflow-y: auto; - max-height: 380px; - margin: 8px; } -igx-switch { - padding: 16px; +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; } -igx-expansion-panel { - border: $ep-sample-border; +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; } -``` - -
-## Getting Started with Ignite UI for Angular Accordion +igx-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} +``` -To get started with the Ignite UI for Angular Accordion component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: +## Anatomy -```cmd -ng add igniteui-angular -``` +The accordion structure consists of an accordion container with one or more expansion panel children. -For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. +**Angular Accordion anatomy anatomy:** The accordion anatomy labels the accordion host and child expansion panel structure. -The next step is to import the `IgxAccordionModule` in your **app.module.ts** file. +1. Header: displays the section title and description and can be clicked to reveal or hide the panel's content
+2. Icon: indicates if the panel is open or closed. Could be placed on the left or on the right side of the header
+3. Panel: the section of content linked to an accordion header -```typescript -// app.module.ts + -@NgModule({ - ... - imports: [..., IgxAccordionModule], - ... -}) -export class AppModule {} +```text +igx-accordion // host - manages a set of expansion panels +└─ igx-expansion-panel // child panel + ├─ igx-expansion-panel-header // panel header container + │ ├─ igx-expansion-panel-title // panel header title + │ ├─ igx-expansion-panel-description // optional header description + │ └─ igx-expansion-panel-icon // optional custom expand/collapse icon + └─ igx-expansion-panel-body // expandable panel content ``` -Alternatively, as of `16.0.0` you can import the `IgxAccordionComponent` as a standalone dependency, or use the [`IGX_ACCORDION_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/accordion/src/accordion/public_api.ts) token to import the component and all of its supporting components and directives. +## Getting Started -```typescript -// home.component.ts +Use the accordion with the Ignite UI for Angular version installed in your Angular application. Complete the shared [Getting Started](../general/getting-started.md) topic before importing the standalone accordion directives. -... +Import the standalone accordion directives before you use the component. + +```ts +import { Component } from '@angular/core'; import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion'; -// import { IGX_ACCORDION_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package @Component({ - selector: 'app-home', - template: ` - - - - Title Panel 1 - - - Content Panel 1 - - - - `, - styleUrls: ['home.component.scss'], - standalone: true, - imports: [IGX_ACCORDION_DIRECTIVES] - /* or imports: [IgxAccordionComponent] */ + selector: 'app-accordion', + imports: [IGX_ACCORDION_DIRECTIVES], + templateUrl: './accordion.component.html', }) -export class HomeComponent {} +export class AccordionComponent {} ``` -Now that you have the Ignite UI for Angular Accordion module or directives imported, you can start with a basic configuration of the `igx-accordion` and its panels. - -## Using the Angular Accordion Component +## Usage -Each section in the [IgxAccordionComponent](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) is defined using an [expansion panel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). -Panels provide [disabled](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelHeaderComponent&member=disabled), [collapsed](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent&member=collapsed) and [animationSettings](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent&member=animationSettings) properties, which give you the ability to configure the states of the panel as per your requirement. +Build the accordion by placing one or more [`IgxExpansionPanel`](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) components inside an [`IgxAccordion`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) container. -### Declaring an accordion +### Single Expansion -The accordion wraps all [`igx-expansion-panel`s](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) declared inside it. +Set [`singleBranchExpand`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=singleBranchExpand) to switch between one-open-panel behavior and multiple-open-panel behavior. ```html - - - - Title Panel 1 - - - Content Panel 1 - - - - - Title Panel 2 - - - Content Panel 2 - - + + + + Title Panel 1 + + +

Content Panel 1

+ + + + + Title Panel 2 + + +

Content Panel 2

+ + ``` -Using the [panels](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=panels) accessor you can get a reference to the collection containing all [expansion panels](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) children of the `igx-accordion`. +### Programmatic Expansion -```typescript -@ViewChild('accordion', { static: true }) -public accordion!: IgxAccordionComponent; - -this.accordion.panels; -``` +Use [`collapseAll()`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=collapseAll) and [`expandAll()`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=expandAll) to collapse or expand the accordion panels programmatically. -As demonstrated above, the [singleBranchExpand](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=singleBranchExpand) property gives you the ability to set whether single or multiple panels can be expanded at a time. +**Note:** +Calling [`expandAll()`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=expandAll) expands only the last enabled panel when [`singleBranchExpand`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=singleBranchExpand) is `true`. -### Angular Accordion Animations -Angular Accordion supports animations for both expanding and collapsing actions of the panels. Animation behavior can be customized. Normally, animations can be set for each expansion panel individually. However, it could also be applied to all panels at once on [IgxAccordionComponent](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) level. This gives users the ability to disable animations for all sections at once via the animations property of the [IgxAccordionComponent](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent). +```html + + -With regards to animation, you have two options. First, you could set the `animationSettings` property on the accordion component: + + + + Title Panel 1 + + +

Content Panel 1

+ + + + + Title Panel 2 + + +

Content Panel 2

+ + + +``` ```typescript -import { useAnimation, slideInLeft, slideOutRight } from '@angular/animations'; -// import { useAnimation, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular/animations'; for licensed package +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; @Component({ - ... + selector: 'app-accordion-programmatic-expansion', + styleUrls: ['./accordion-programmatic-expansion.component.scss'], + templateUrl: './accordion-programmatic-expansion.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxButtonDirective, IgxRippleDirective, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] }) -export class AccordionComponent { - public animationSettingsCustom = { - closeAnimation: useAnimation(slideOutRight, { - params: { - duration: '100ms', - toPosition: 'translateX(25px)' - } - }), - openAnimation: useAnimation(slideInLeft, { - params: { - duration: '500ms', - fromPosition: 'translateX(-15px)', - startOpacity: 0.1 - } - }) - }; +export class AccordionProgrammaticExpansionComponent { } ``` +```html +
+
+
+ + +
-As you can see, we are using [`slideInLeft`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/animations#mixin-slide-in-left) and [`slideOutRight`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/animations#mixin-slide-out-right) animations from our [**inbuilt suite of animations**](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/animations) to make the component content appear from the left side and disappear to the right when collapsing the content. We further customize the animations by overriding some of the animations' parameters. + + + + Billing + Invoices and payment settings + + +

Review invoices, update payment methods, and manage billing contacts.

+ + + + + + Security + Password and access controls + + +

Configure password rules, multi-factor authentication, and recovery options.

+ + + + + + Notifications + Product updates and account alerts + + +

Choose which product updates and account alerts are sent to your team.

+ + + +
+
+``` +```scss +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} -The following snippet demonstrates passing the animation settings to the component: +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} -```html - - ... - +.accordion-toolbar { + display: flex; + justify-content: flex-end; + gap: 8px; + margin-bottom: 12px; +} + +.action-button { + min-width: 96px; +} + +igx-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} ``` ->[!NOTE] -> If you would like to turn off the animation for the [IgxAccordionComponent](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) the `animationSettings` could be set to `null`. +### Customize Panel Content -Alternatively, you have the ability to set every single [expansion panel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent)`s [animationSettings](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent&member=animationSettings) input. +Customize panel headers with title and description elements, and place expandable content inside the panel body. ```html - - - - Title Panel 1 - - - Content Panel 1 - - - - - Title Panel 2 - - - Content Panel 2 - - + + + + Billing + Payment and invoice settings + + +

Update payment methods, billing contacts, and invoice delivery options.

+ + ``` -Using the [collapseAll](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=collapseAll) and [expandAll](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=expandAll) methods you can respectively collapse and expand all [IgxExpansionPanels](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) of the [IgxAccordion](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) programmatically. - ->[!NOTE] -> If [singleBranchExpand](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=singleBranchExpand) property is set to _true_ calling [expandAll](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=expandAll) method would expand only the last [panel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). - -### Angular Accordion Templating Example - -With the Angular [Accordion component](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent), you can customize the header and content panel`s appearance. -The sample below demonstrates how elaborate filtering options can be implemented using the built-in templating functionality of the [IgxExpansionPanel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). - ```typescript -import { Component } from '@angular/core'; -import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; -import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; -import { IgxRadioComponent } from 'igniteui-angular/radio'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; import { IgxIconComponent } from 'igniteui-angular/icon'; -import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; +import { IgxRadioComponent } from 'igniteui-angular/radio'; +import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; import { IgxLabelDirective } from 'igniteui-angular/input-group'; - -import { FormsModule } from '@angular/forms'; +import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; @Component({ - selector: 'app-accordion-sample-3', - styleUrls: ['./accordion-sample-3.component.scss'], - templateUrl: './accordion-sample-3.component.html', - imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent, IgxCheckboxComponent, FormsModule, IgxSliderComponent, IgxRadioComponent, IgxIconComponent, IgxTimePickerComponent, IgxLabelDirective] + selector: 'app-accordion-customization', + styleUrls: ['./accordion-customization.component.scss'], + templateUrl: './accordion-customization.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, IgxCheckboxComponent, IgxSliderComponent, IgxRadioComponent, IgxIconComponent, IgxTimePickerComponent, IgxLabelDirective] }) -export class AccordionSample3Component { - public sliderType = IgxSliderType; - public priceRange: PriceRange = new PriceRange(200, 800); - public checkedItems = ''; - public arriveTime: Date; - public rating: string; +export class AccordionCustomizationComponent { + public readonly ratingOptions = [2, 3, 4, 5]; + public readonly sliderType = IgxSliderType; + public priceRange = new PriceRange(200, 800); + public rating = ''; + public arriveTime: Date | null = null; public categories = [ { checked: false, type: 'Bike' }, @@ -358,20 +352,18 @@ export class AccordionSample3Component { { checked: false, type: 'Public Transport' } ]; - public checkedChange() { - this.checkedItems = ''; - this.categories.forEach(item => { - if (item.checked) { - this.checkedItems = this.checkedItems ? this.checkedItems + ', ' + item.type : ': ' + item.type; - } - }); + public get selectedCategories(): string { + return this.categories + .filter(item => item.checked) + .map(item => item.type) + .join(', '); } - public get time() { - return this.arriveTime ? - ': Arrive before ' + this.arriveTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : ''; + public get time(): string { + return this.arriveTime ? `: ${this.arriveTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}` : ''; } } + class PriceRange { constructor( public lower: number, @@ -381,499 +373,626 @@ class PriceRange { } ``` ```html -
- - - - Categories{{ checkedItems }} - - -
- @for (item of categories; track item) { - - {{ item.type }} - - } -
- - - - - - Cost: {{ '$' + slider.lowerValue + ' to ' + '$' + slider.upperValue }} - - - - - - - - - Rating@if (rating) { - {{': ' + rating }} - } - - - @for (item of [].constructor(4); track item; let i = $index) { -
- @if (i===0) { - {{ i + 1 }} star or more - } - @if (i>0) { - {{ i + 1 }} stars or more - } -
- @for (fillStar of [].constructor(i + 1); track fillStar) { -
- star -
- } - star_half - @for (borderStar of [].constructor(3 - i); track borderStar) { -
- star_border -
- } -
-
- } - - - - - - Time{{ time }} - - - - - - - - -
+
+
+ + + + Transportation@if (selectedCategories) {: {{ selectedCategories }}} + Choose how you want to travel + + +

Select one or more transportation options for your trip.

+
+ @for (category of categories; track category.type) { + {{ category.type }} + } +
+ + + + + + Budget: ${{ slider.lowerValue }} - ${{ slider.upperValue }} + Set the price range + + +

Adjust the minimum and maximum cost for available options.

+
+ ${{ slider.lowerValue }} + ${{ slider.upperValue }} +
+ + + + + + + Minimum Rating@if (rating) {: {{ rating }}} + Filter by review score + + +

Choose the lowest rating you want to include in the results.

+
+ @for (ratingOption of ratingOptions; track ratingOption) { + + {{ ratingOption }} stars or more + + @for (star of [].constructor(ratingOption); track $index) { + star + } + + + } +
+ + + + + + Arrival Time{{ time }} + Set the latest arrival time + + +

Pick the latest acceptable arrival time for your trip.

+ + + + + + +
+
``` ```scss -$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25); - -.sample-wrapper { +.accordion-sample { + width: 100%; + height: 100%; overflow-y: auto; - max-height: 530px; - margin: 8px; } -igx-slider { - margin: 24px; +.accordion-content { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +igx-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} + +.panel-description { + margin: 0 0 16px; + color: var(--ig-gray-700); } .categories-container { - display: flex; - flex-flow: column nowrap; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px 24px; + max-width: 520px; } -igx-checkbox, -igx-radio { +.category-option, +.rating-option { margin: 4px 0; } -igx-expansion-panel { - border: $ep-sample-border; +.range-summary { + display: flex; + justify-content: space-between; + max-width: 560px; + margin-bottom: 4px; + font-weight: 600; +} + +.cost-slider { + max-width: 560px; + margin: 8px 0 0; +} + +.rating-options { + display: grid; + gap: 8px; + max-width: 360px; } -``` -
+.rating-control { + flex-direction: row; +} + +.time-input { + max-width: 260px; +} + +.size-small { + --ig-size: var(--ig-size-small); +} +``` -### Nested Angular Accordions Scenario +### Nest Accordions -In the following Angular accordion example, we are going to create a complex FAQ section in order to illustrate how you can go about this common application scenario. In the sample nested [IgxAccordionComponent](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) is achieved by adding an [accordion](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) inside the body of an [expansion panel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). +Nest an accordion inside an expansion panel when you need a second level of grouped disclosure. ```html - - - - Title Panel 1 - - - - - - Title Nested Panel 1 - - - Content Nested Panel 1 - - - ... - - - - ... + + + + Account Settings + + + + + + Notifications + + +

Configure email and product notification preferences.

+ + + + + ``` -You can see the result below. - ```typescript -import { Component } from '@angular/core'; -import { IgxSwitchComponent } from 'igniteui-angular/switch'; -import { IgxAccordionComponent } from 'igniteui-angular/accordion'; -import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; @Component({ - selector: 'app-accordion-sample-2', - styleUrls: ['./accordion-sample-2.component.scss'], - templateUrl: './accordion-sample-2.component.html', - imports: [IgxSwitchComponent, FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] + selector: 'app-accordion-nested-scenario', + styleUrls: ['./accordion-nested-scenario.component.scss'], + templateUrl: './accordion-nested-scenario.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [FormsModule, IgxSwitchComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] }) -export class AccordionSample2Component { +export class AccordionNestedScenarioComponent { public singleBranchExpand = false; } ``` ```html -Single Branch Expand -
+
+
+
+ Single Expand +
- - - - - What has changed about subscription and pricing model? - - - - We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. - - We updated our pricing and packages to provide you with flexible options and the best value. This - includes Ignite UI (formerly Ignite UI for - JavaScript) which includes all of our JavaScript framework - components for web development, including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and - Web Components), as well as Infragistics Professional, Infragistics Ultimate, our Ultimate UI products. - - We also offer multi-year subscriptions options with a built-in discount, so you can see the value up - front. With these updates we are confident that we are providing the best platforms and the best price. - - - - - - Who will the updated changes impact? - - - - The license updates will impact all new and current customers using Ignite UI, Infragistics Professional - and Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for - Ignite UI for JavaScript, Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. - For more information, please refer to this blog: - - Announcement: - Changes to Ignite UI Product & Packaging - - The pricing has been updated for all products and packages. So, all new or additional licenses will be - sold based on our new pricing and packages. All existing license agreements will be honored and renewed - based upon the current agreement. - - - - - - What is the difference between your old model and your current subscription model for Ignite UI? - - - - For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages - will be replaced with packages that include a “Trial Version” watermark. Licensed packages for Ignite UI - will be available from our cloud hosted ProGet server. - - For more information, please refer to this article: - - Moving - from Trial to Licensed Ignite UI NPM Packages - - - - - - Common questions about renewal. - - - - - - - - What happens if I don't renew my subscription? - - - - Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now - include - this watermark. - - - - - - If I don't renew my subscription will I still have access to previous versions of - Infragistics products? - - - - Any version of Infragistics software which you have downloaded can continue to be used - perpetually. - Access to download any new or previous versions through our customer portal and package - feeds will - require maintaining an active subscription by continuing to renew it. - - - - - - Will I be automatically charged for my renewal/ Can I be automatically charged for - renewal? - - - - Any new subscriptions purchased online, via our eCommerce system, will renew automatically. - Subscription - renewal can be canceled, at any time, before the next automatic renewal date. Subscriptions - purchased - directly from Infragistics or Infragistics' partners are subject to the renewal terms that - were agreed - upon as part of that purchase. - - - - - - - - - I split my work across two computers. Can I install on both using my single-user license? - - - - The Infragistics Ultimate license is tied to the user, and not the computer. That means you're welcome - to install and use Ignite UI, Infragistics Professional, and Infragistics Ultimate on any computer you - use. However, if we notice a large number of activations using the same license, we may contact you to - verify this behavior. - - - - - - I used up my trial for an earlier version of Infragistics Ultimate. Can I start a new trial when a - major - version is released? - - - - Yes! If you have tried a previous version in the past, and used up your 30-day trial, you can try the - next major version for another 30 days! You can do this in the following two ways: - -
    -
  • If you have days remaining in your 30-day trial period for the current version (e.g., the - Version 15.1 Volume Release), use the Check for Update option inside the Platform Installer or - your account. You will be able to start a fresh trial for the next major version (e.g., 20.1 - Volume Release)
    • -
  • If you have used up the 30-day trial for the previous major version (e.g., the 19.2 Volume - Release), simply download and install Infragistics Ultimate from our website (This will also allow you - to start a new trial.)
    • -
- - - -
+ + + + Workspace Settings + Nested account, access, and billing options + + + + + + Profile + Name, photo, and contact details + + +

Update the public information shown to other workspace members.

+ + + + + + Security + Password and sign-in preferences + + +

Review active sessions, change your password, and configure sign-in requirements.

+ + + + + + Notifications + Email and product updates + + +

Choose the messages you receive for comments, assignments, and releases.

+ + + + + + + + + Team Access + Members, roles, and permissions + + +

Invite teammates, assign roles, and review workspace permissions.

+ + + + + + Billing + Plan, invoices, and payment method + + +

Manage subscription details, billing contacts, and invoice delivery.

+ + + + + ``` ```scss -$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25); - -.sample-wrapper { +.accordion-sample { + width: 100%; + height: 100%; overflow-y: auto; - max-height: 470px; - margin: 8px; } -igx-switch { - padding: 16px; +.accordion-content { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; } -.nested-accordion { - margin: 10px 16px; +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; } -igx-expansion-panel { - border: $ep-sample-border; +igx-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; } ``` -
+### Do/Don't + +**When to use:** Use the accordion when you need to organize secondary content, FAQ entries, settings groups, or other related vertical sections that users expand on demand. Keep panel titles short and descriptive, and enable single-expansion behavior when users should focus on one section at a time. -## Keyboard Navigation +**When not to use:** Use the [Expansion Panel](../expansion-panel.md) when you need a single standalone expandable section instead of a coordinated container that manages multiple panels together. Do not use an accordion to hide essential primary content or to group unrelated sections. -Keyboard navigation in the Ignite UI for Angular Accordion provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the panels. -The [IgxAccordionComponent](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) navigation is compliant with W3C accessibility standards and convenient to use. +
+ + + + + + + + + + + + + +
DoDon't
+
-**Key Combinations** +## Properties -- Tab - moves the focus to the first(if the focus is before accordion)/next panel -- Shift + Tab - moves the focus to the last(if the focus is after accordion)/previous panel -- Arrow Down - moves the focus to the panel below -- Arrow Up - moves the focus to the panel above -- Alt + Arrow Down - expands the focused panel in the accordion -- Alt + Arrow Up - collapses the focused panel in the accordion -- Shift + Alt + Arrow Down - expands all enabled panels(if singleBranchExpand is set to true expands the last enabled panel) -- Shift + Alt + Arrow Up - collapses all enabled panels -- Home - navigates to the FIRST enabled panel in the accordion -- End - navigates to the LAST enabled panel in the accordion +The accordion exposes container-level controls; panel-specific state is configured on each [`IgxExpansionPanel`](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| [`singleBranchExpand`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=singleBranchExpand) | `boolean` | `false` | Controls whether one or multiple panels can stay expanded at the same time. | +| [`panels`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=panels) | `QueryList` | n/a | Returns the collection of child expansion panels in the accordion. | + +## Methods + +Use the accordion methods when you need to change panel state from your code. + +| Name | Description | +| -- | -- | +| [`expandAll`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=expandAll) | Expands the available panels. | +| [`collapseAll`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=collapseAll) | Collapses the available panels. | ## Styling -The [`accordion`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) serves only as a container for the underlying [`panels`](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). Styles can be applied directly through the panel's theme, as described in the [`styling section of the IgxExpansionPanel topic`](expansion-panel.md#styling). +Style the Angular accordion with CSS parts and Ignite UI theme variables. -By design, there is a margin set to the expanded panels, in case that they are positioned within an `igx-accordion`. In order to modify it there is a property exposed inside the igx-expansion-panel theme. -In order to take advantage of the functions exposed by the theming engine, we have to import the `index` file in our style file: +```typescript +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; +@Component({ + selector: 'app-accordion-styling', + styleUrls: ['./accordion-styling.component.scss'], + templateUrl: './accordion-styling.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] +}) +export class AccordionStylingComponent {} +``` +```html +
+
+ + + + Getting Started + Setup and onboarding + + +

Find installation steps, project setup guidance, and resources for building your first application.

+ + + + + + Billing + Invoices and payment methods + + +

Review invoices, update payment methods, and manage billing contacts for your account.

+ + + + + + Security + Access and authentication + + +

Configure password rules, multi-factor authentication, and recovery options for your team.

+ + + +
+
+``` ```scss @use "igniteui-angular/theming" as *; -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +igx-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} + +$custom-panel-theme: expansion-panel-theme( + $header-background: var(--ig-gray-100), + $header-focus-background: var(--ig-primary-50), + $body-background: var(--ig-gray-50), + $body-color: var(--ig-gray-700), + $header-title-color: var(--ig-gray-900), + $header-description-color: var(--ig-gray-900), + $header-icon-color: var(--ig-primary-500), + $border-radius: 4px +); + +:host { + @include tokens($custom-panel-theme); +} + +::ng-deep { + .igx-expansion-panel--expanded .igx-expansion-panel__header-inner { + background-color: var(--ig-primary-50); + } + + .igx-expansion-panel--expanded .igx-expansion-panel__header-title, + .igx-expansion-panel--expanded .igx-expansion-panel__header-description { + color: var(--ig-primary-700); + } + + .igx-expansion-panel__header-title { + font-weight: 600; + } +} ``` -Following the simplest approach, we create a new theme that extends the [`expansion-panel-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-expansion-panel-theme) and accepts a `$header-background`, `$body-color` and `$expanded-margin` parameters. The theme automatically assigns foreground colors, either black or white, based on which provides better contrast with the specified backgrounds. +### Sass Theming + +Use the `expansion-panel-theme` function to create a custom expansion panel theme, then include the generated tokens in the component stylesheet. ```scss +@use "igniteui-angular/theming" as *; + $custom-panel-theme: expansion-panel-theme( $header-background: #011627, $body-background: #f0ece7, $expanded-margin: 10px ); -``` -The last step is to include the component's theme. - -```scss :host { - @include tokens($custom-panel-theme); + @include tokens($custom-panel-theme); } ``` -### Demo +### Styling Variables + +| Variable | What it changes | +| -- | -- | +| `$header-background` | The panel header background color. | +| `$header-focus-background` | The panel header background color when focused. | +| `$header-title-color` | The panel header title text color. | +| `$header-description-color` | The panel header description text color. | +| `$header-icon-color` | The panel header icon color. | +| `$body-background` | The panel body background color. | +| `$body-color` | The panel body text color. | +| `$expanded-margin` | The margin applied to expanded panels when they are placed inside an accordion. | +| `$border-radius` | The expansion panel border radius. | + +### Styling with Tailwind + +Use Tailwind utility classes with CSS part selectors when you want to keep the styling close to the component markup. ```typescript -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; -import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; -import { FormsModule } from '@angular/forms'; +import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; @Component({ - selector: 'app-accordion-style', - styleUrls: ['./accordion-style.component.scss'], - templateUrl: './accordion-style.component.html', - imports: [FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] + selector: 'app-accordion-tailwind-styling', + styleUrls: ['./accordion-tailwind-styling.component.scss'], + templateUrl: './accordion-tailwind-styling.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] }) -export class AccordionStyleComponent { - public singleBranchExpand = false; -} +export class AccordionTailwindStylingComponent {} ``` ```html -
- - - - - What has changed about subscription and pricing model? - - - - We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. - - We updated our pricing and packages to provide you with flexible options and the best value. This - includes Ignite UI (formerly Ignite UI for - JavaScript) which includes all of our JavaScript framework - components for web development, including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and - Web Components), as well as Infragistics Professional, Infragistics Ultimate, our Ultimate UI products. - - We also offer multi-year subscriptions options with a built-in discount, so you can see the value up - front. With these updates we are confident that we are providing the best platforms and the best price. - - - - - - Who will the updated changes impact? - - - - The license updates will impact all new and current customers using Ignite UI, Infragistics Professional - and Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for - Ignite UI for JavaScript, Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. - For more information, please refer to this blog: - - Announcement: - Changes to Ignite UI Product & Packaging - - The pricing has been updated for all products and packages. So, all new or additional licenses will be - sold based on our new pricing and packages. All existing license agreements will be honored and renewed - based upon the current agreement. - - - - - - What is the difference between your old model and your current subscription model for Ignite UI? - - - - For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages - will be replaced with packages that include a “Trial Version” watermark. Licensed packages for Ignite UI - will be available from our cloud hosted ProGet server. - - For more information, please refer to this article: - - Moving - from Trial to Licensed Ignite UI NPM Packages - - - -
+
+
+ + + + Getting Started + Setup and onboarding + + +

Find installation steps, project setup guidance, and resources for building your first application.

+ + + + + + Billing + Invoices and payment methods + + +

Review invoices, update payment methods, and manage billing contacts for your account.

+ + + + + + Security + Access and authentication + + +

Configure password rules, multi-factor authentication, and recovery options for your team.

+ + + +
+
``` ```scss -@use "layout.scss"; -@use "igniteui-angular/theming" as *; +.accordion-tailwind-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} -$custom-panel-theme: expansion-panel-theme( - $header-background: #011627, - $body-background: #f0ece7, - $expanded-margin: 10px -); +::ng-deep { + .igx-expansion-panel--expanded .igx-expansion-panel__header-inner { + background-color: var(--ig-primary-50); + } -:host { - @include tokens($custom-panel-theme); + .igx-expansion-panel--expanded .igx-expansion-panel__header-title, + .igx-expansion-panel--expanded .igx-expansion-panel__header-description { + color: var(--ig-primary-700); + } + + .igx-expansion-panel__header-title { + font-weight: 600; + } } ``` -## API Reference +## Accessibility + +The accordion supports keyboard interaction for moving focus between panels and changing their expanded state. + +### Keyboard Interaction + +Use the keyboard shortcuts below to move through the accordion and open or close panels. + +| Key | Action | +| -- | -- | +| Down Arrow | Moves focus to the panel below. | +| Up Arrow | Moves focus to the panel above. | +| Alt + Down Arrow | Opens the focused panel. | +| Alt + Up Arrow | Closes the focused panel. | +| Shift + Alt + Down Arrow | Opens all enabled panels. If [`singleBranchExpand`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=singleBranchExpand) is `true`, opens the last enabled panel. | +| Shift + Alt + Up Arrow | Closes all enabled panels. | +| Home | Moves focus to the first enabled panel. | +| End | Moves focus to the last enabled panel. | + +### Screen Readers / ARIA + +The accordion's accessibility semantics are provided through its child expansion panels and their headers. + +- Each panel header exposes `role="button"`, `aria-expanded`, and `aria-controls`. +- Each panel body exposes `role="region"` and a label through `aria-labelledby` or `aria-label`. +- Use clear title text for each panel so assistive technologies can announce a meaningful label. +- Keep interactive content inside panel bodies in a logical tab order. + +### Accessibility Compliance + +Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.md) topic. The accordion's compliance evidence comes from the child [`IgxExpansionPanel`](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) components that provide the interactive headers and regions. + +| Criterion | How the component complies | +| -- | -- | +| [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) | The accordion supports keyboard commands for moving focus and opening or closing panels. | +| [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/Understanding/focus-order) | Focus moves through enabled panels in sequence, with shortcuts for jumping to the first and last panel. | + +Your responsibilities: -- [IgxAccordion API](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) -- [IgxExpansionPanel API](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) -- [IgxExpansionPanelHeader API](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelHeaderComponent) -- [IgxExpansionPanelBody API](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelBodyComponent) -- [IgxExpansionPanel Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-igx-expansion-panel) +- Provide panel titles that describe the content behind each disclosure area. +- Preserve a logical focus order in the surrounding page layout. +- Validate any custom styling against your application's contrast and focus-indicator requirements. +## API References + +[`IgxAccordion`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) +[`IgxExpansionPanel`](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) + +## Dependencies + +The accordion depends on [`IgxExpansionPanel`](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) for its visible sections. ## Additional Resources -Our community is active and always welcoming new ideas. +Use these resources to continue with Ignite UI for Angular Accordion support, source, and related layout guidance. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) + +## Related Components + +- [Expansion Panel](../expansion-panel.md) - The collapsible section the accordion is built from. See it for configuring individual panels. + +## FAQ + + **Q: Should multiple accordion panels be open at the same time?** + + Allow multiple panels to stay open when users need to compare or cross-reference their content. Use single-expansion behavior when the workflow is clearer with one active section at a time. + + **Q: When should I avoid using an accordion?** + + Avoid using an accordion for essential, long, or comparison-heavy content that users need to read at once. Use clear headings, a separate page, or another layout when hiding the content would make it harder to find or compare. + + **Q: How should I write accordion headers?** + + Use short, descriptive headers that clearly identify the content revealed by each panel. Users should be able to scan the headers and decide which section to open. + + **Q: Can an accordion header contain other buttons or links?** + + Avoid placing other interactive controls inside an accordion header. Keep secondary actions outside the header so the panel trigger remains clear and does not contain nested interactive elements. + + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md index 51224e302..e3b0aa0df 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md @@ -1,16 +1,18 @@ --- title: Angular Action Strip Component – Ignite UI for Angular | Infragistics | MIT license -_description: The Action Strip represents a template area for one or more actions. The Action Strip requires to be inside a relative container, as it is going to overlay it. -_keywords: Angular Action Strip component, Angular Action Strip directive, Angular Action Strip control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Angular UI Components -_license: MIT +description: The Action Strip represents a template area for one or more actions. The Action Strip requires to be inside a relative container, as it is going to overlay it. +keywords: Angular Action Strip component, Angular Action Strip directive, Angular Action Strip control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Angular UI Components +license: MIT +llms: + description: "The Ignite UI for Angular Action Strip component provides an overlay area containing one or more actions allowing additional UI and functionality to be shown on top of a specific target container upon user interaction e.g. hover." _tocName: Action Strip --- - # Angular Action Strip Directive Overview -

+

+ The Ignite UI for Angular Action Strip component provides an overlay area containing one or more actions allowing additional UI and functionality to be shown on top of a specific target container upon user interaction e.g. hover. The container should be positioned relatively as the Action Strip attempts to overlay it and is itself positioned absolutely. Despite overlapped by an Action Strip, the main interactions and user access to the target container remain available. -

+
## Angular Action Strip Example @@ -137,7 +139,7 @@ $custom-strip: action-strip-theme( } ``` -
+
## Getting Started with Ignite UI for Angular Action Strip @@ -147,7 +149,7 @@ To get started with the Ignite UI for Angular Action Strip component, first you ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. The next step is to import the `IgxActionStripModule` in your **app.module.ts** file. @@ -196,8 +198,9 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; export class HomeComponent {} ``` -> [!NOTE] -> This component uses Material Icons. Add the following link to your `index.html`: `` + +**Note:** +This component uses Material Icons. Add the following link to your `index.html`: `` Now that you have the Ignite UI for Angular Action Strip module or directives imported, you can start with a basic configuration of the `igx-action-strip` component. @@ -219,7 +222,7 @@ By default, the Action Strip will not be visible, but this can be configured via ### Menu look and feel -For scenarios where more than three action items will be shown, it is best to use [`IgxActionStripMenuItem`](mcp:get_api_reference?platform=angular&component=IgxActionStripMenuItemDirective) directive. Any item within the Action Strip marked with the `*igxActionStripMenuItem` structural directive will be shown in a dropdown, revealed upon toggling the more button i.e. the three dots representing the last action. +For scenarios where more than three action items will be shown, it is best to use [`IgxActionStripMenuItemDirective`](mcp:get_api_reference?platform=angular&component=IgxActionStripMenuItemDirective) directive. Any item within the Action Strip marked with the `*igxActionStripMenuItem` structural directive will be shown in a dropdown, revealed upon toggling the more button i.e. the three dots representing the last action. ```html
@@ -366,16 +369,16 @@ The same Action Strip instance can be used in multiple places in the document as The Action Strip can change its parent container, which is possible by changing the [`context`](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent&member=context). The best way to do so is via the [`show`](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent&member=show) API method and passing the `context` as an argument. The `context` should be an instance of a component and should have an accessible `element` property of the `ElementRef` type. -> [!NOTE] -> The `show` API method uses [Angular Renderer2](https://angular.io/api/core/Renderer2) to append the Action Strip to that `element`. +**Note:** +The `show` API method uses [Angular Renderer2](https://angular.io/api/core/Renderer2) to append the Action Strip to that `element`. ## Usage in Grids The Action Strip provides additional functionality and UI for the IgxGrid. This can be utilized via grid action components and we are providing two default ones: -- [`IgxGridEditingActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) - includes functionality and UI related to grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the value of the `rowEditable` option of the grid and whether deleting rows is allowed. -- [`IgxGridPinningActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridPinningActionsComponent) - includes functionality and UI related to grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. +- [`IgxGridEditingActions`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) - includes functionality and UI related to grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the value of the `rowEditable` option of the grid and whether deleting rows is allowed. +- [`IgxGridPinningActions`](mcp:get_api_reference?platform=angular&component=IgxGridPinningActionsComponent) - includes functionality and UI related to grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. ```html @@ -388,10 +391,11 @@ This can be utilized via grid action components and we are providing two default ``` -> [!NOTE] -> These components inherit [`IgxGridActionsBaseDirective`](mcp:get_api_reference?platform=angular&component=IgxGridActionsBaseDirective) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. -> [!NOTE] -> When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. +**Note:** +These components inherit [`IgxGridActionsBaseDirective`](mcp:get_api_reference?platform=angular&component=IgxGridActionsBaseDirective) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. + +**Note:** +When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. ```typescript import { Component, ViewChild } from '@angular/core'; @@ -474,8 +478,8 @@ export class GridActionStripSampleComponent { } ``` -> [!NOTE] -> More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](/components/grid/row-actions.html). +**Note:** +More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](./grid/row-actions.md). ## Styling @@ -586,31 +590,31 @@ $custom-strip: action-strip-theme( For more detailed information regarding the Action Strip API, refer to the following links: -- [`IgxActionStripComponent API`](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent) +- [`IgxActionStrip`](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent) The following built-in CSS styles helped us achieve this Action Strip layout: -- [`IgxActionStripComponent Styles`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-action-strip-theme) +- `IgxActionStripComponent Styles` Additional components and/or directives that can be used within the Action Strip: - [`IgxGridActionsBaseDirective`](mcp:get_api_reference?platform=angular&component=IgxGridActionsBaseDirective) -- [`IgxGridPinningActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridPinningActionsComponent) -- [`IgxGridEditingActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) -- [`IgxDividerDirective`](mcp:get_api_reference?platform=angular&component=IgxDividerDirective) +- [`IgxGridPinningActions`](mcp:get_api_reference?platform=angular&component=IgxGridPinningActionsComponent) +- [`IgxGridEditingActions`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) +- [`IgxDivider`](mcp:get_api_reference?platform=angular&component=IgxDividerDirective) -
+ ## Theming Dependencies -- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) -- [IgxRipple Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-ripple-theme) -- [IgxDropDown Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) -- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) +- `IgxButton Theme` +- `IgxRipple Theme` +- `IgxDropDown Theme` +- `IgxIcon Theme` ## Additional Resources -
+
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-ai-assisted-development-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-ai-assisted-development-overview.md index f9975d390..e02238ad6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-ai-assisted-development-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-ai-assisted-development-overview.md @@ -1,18 +1,15 @@ --- title: AI-Assisted Development with Ignite UI - Ignite UI for Angular -_description: Configure Agent Skills, the Ignite UI MCP server, and the Theming MCP server in your Angular, React, Blazor, or Web Components project with a single command - npx igniteui-cli@latest ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs. -_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP server, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor, Claude Code, ai-config -_language: en -_license: MIT -_canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" -last_updated: "2026-05-03" -namespace: Infragistics.Controls +description: Configure Agent Skills, the Ignite UI MCP server, and the Theming MCP server in your Angular, React, Blazor, or Web Components project with a single command - npx igniteui-cli@latest ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs. +keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP server, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor, Claude Code, ai-config +license: MIT +canonicalLink: "/components/ai-assisted-development-overview" mentionedTypes: [] +last_updated: "2026-05-03" +llms: + description: "Ignite UI for Angular provides a complete AI toolchain - Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server and the MAKER MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens." _tocName: Agent Workflow --- - - - # AI-Assisted Development with Ignite UI Ignite UI for Angular provides a complete AI toolchain - Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server and the MAKER MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server (`igniteui-cli`) exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server (`igniteui-theming`) exposes the Ignite UI Theming Engine as queryable agent context. The MAKER MCP (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. Skills, CLI MCP and Theming MCP - all three are configured by a single command: `npx igniteui-cli ai-config` @@ -37,8 +34,8 @@ Run this command from the root of your existing Angular, React, Blazor, or Web C npx igniteui-cli ai-config ``` -> [!IMPORTANT] -> Without a version pin, `npx` may pull an older CLI version that does not recognize the `ai-config` subcommand and will instead launch an interactive project-creation prompt, scaffolding a new project inside your existing one. Make sure that you have installed CLI version 16.x. +**Note:** +Without a version pin, `npx` may pull an older CLI version that does not recognize the `ai-config` subcommand and will instead launch an interactive project-creation prompt, scaffolding a new project inside your existing one. Make sure that you have installed CLI version 16.x. If `ai-config` cannot detect the framework from your project files, it prompts you to select one - so the command works even from a project where no Ignite UI package is installed yet. @@ -48,17 +45,17 @@ After the command finishes, start the MCP servers in your AI client. The servers If Ignite UI is **not** installed in the project: -> [!NOTE] -> Ignite UI MCP servers configured for your selected clients -> No AI skill files found. Make sure packages are installed (`npm install`) and your Ignite UI packages are up-to-date. +**Note:** +Ignite UI MCP servers configured for your selected clients +No AI skill files found. Make sure packages are installed (`npm install`) and your Ignite UI packages are up-to-date. The MCP servers are ready to use. Skills will be added automatically the next time you run `ai-config` after installing Ignite UI. If Ignite UI **is** installed in the project: -> [!NOTE] -> Ignite UI MCP servers configured for your selected clients -> Agent Skills copied to your selected agents' skills directories +**Note:** +Ignite UI MCP servers configured for your selected clients +Agent Skills copied to your selected agents' skills directories Both the MCP servers and Skills are configured. @@ -182,11 +179,13 @@ If you have the Ignite UI CLI installed globally, use the shorter form: ig ai-config ``` -> [!NOTE] -> The `npx igniteui-cli` and `ig` forms do not register the `@angular/cli` MCP server. Use the Angular Schematics command above if you want all three servers configured in a single step. +**Note:** -> [!NOTE] -> The command requires Ignite UI packages to be installed in your project (`npm install`). If no skill files are found, make sure your packages are up-to-date. +The `npx igniteui-cli` and `ig` forms do not register the `@angular/cli` MCP server. Use the Angular Schematics command above if you want all three servers configured in a single step. + +**Note:** + +The command requires Ignite UI packages to be installed in your project (`npm install`). If no skill files are found, make sure your packages are up-to-date. ### Step 1 - Load Agent Skills @@ -268,8 +267,6 @@ For configuration details and theming workflows, see [Theming MCP](theming-mcp.m - [Ignite UI CLI MCP](./cli-mcp.md) - [Ignite UI Theming MCP](./theming-mcp.md) -
- Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-cli-mcp.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-cli-mcp.md index ec9e8e2b7..07c979ea6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-cli-mcp.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-cli-mcp.md @@ -1,23 +1,20 @@ --- title: Ignite UI CLI MCP | Infragistics -_description: Use the Ignite UI CLI MCP server to scaffold Ignite UI for Angular projects, add components, and answer API questions through your AI assistant. -_keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains -_language: en -_license: MIT -_canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp" -namespace: Infragistics.Controls +description: Use the Ignite UI CLI MCP server to scaffold Ignite UI for Angular projects, add components, and answer API questions through your AI assistant. +keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains +license: MIT +canonicalLink: "/components/ai/cli-mcp" mentionedTypes: [] last_updated: "2026-04-24" +llms: + description: "The Ignite UI CLI MCP is a Model Context Protocol (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for Ignite UI for Angular applications." _tocName: CLI MCP --- - - - # Ignite UI CLI MCP

The Ignite UI CLI MCP is a Model Context Protocol (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for Ignite UI for Angular applications. Connect the Ignite UI CLI MCP to your editor, GitHub repository, or desktop AI client and describe what you want - the assistant uses the CLI tools for you.

-
+ ## Overview @@ -63,8 +60,9 @@ The canonical launch command is: npx -y igniteui-cli mcp ``` -> [!NOTE] -> The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. +**Note:** + +The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. ### Choose a setup path @@ -156,8 +154,9 @@ If you created the project with Ignite UI CLI first, review the generated `.vsco Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI CLI MCP tools will be available. -> [!NOTE] -> MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. +**Note:** + +MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. ### Cursor @@ -180,8 +179,9 @@ Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.js The servers will be picked up automatically when you open a new Cursor chat session. -> [!NOTE] -> You can also configure MCP servers globally via **Settings → MCP** in Cursor. +**Note:** + +You can also configure MCP servers globally via **Settings → MCP** in Cursor. ### Claude Desktop @@ -264,8 +264,9 @@ JetBrains AI Assistant supports MCP servers through the IDE settings: 5. Click **OK** and restart the AI Assistant. -> [!NOTE] -> MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. +**Note:** + +MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. ### Other MCP Clients @@ -336,8 +337,9 @@ At a high level, the CLI MCP tools help with: - updating project structure and configuration - answering documentation and API questions -> [!NOTE] -> Framework detection uses component prefixes: `for Angular`, `for React`, `for Web Components`, `for Blazor`. The assistant picks up the right framework automatically from your open files or prompt context. +**Note:** + +Framework detection uses component prefixes: `for Angular`, `for React`, `for Web Components`, `for Blazor`. The assistant picks up the right framework automatically from your open files or prompt context. The theming server adds styling, theme, palette, and token workflows to the same client session. @@ -412,8 +414,6 @@ Validate that the JSON uses the `mcpServers` structure and that each local serve - [Ignite UI for Angular Skills](./skills.md) - [Ignite UI Theming MCP](./theming-mcp.md) -
- Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-maker-framework.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-maker-framework.md index 2fd288888..7db598f75 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-maker-framework.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-maker-framework.md @@ -1,19 +1,14 @@ --- title: MAKER Framework | Ignite UI AI Orchestration -_description: The MAKER Framework is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated step plans using consensus-based voting across OpenAI, Anthropic, and Google AI providers. -_keywords: Angular, Ignite UI for Angular, Infragistics, MAKER, multi-agent, AI orchestration, MCP, Model Context Protocol, consensus voting, plan and execute, task decomposition -_language: en -_license: MIT -_canonicalLink: "{environment:dvUrl}/components/ai/maker-framework" -namespace: Infragistics.Controls +description: The MAKER Framework is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated step plans using consensus-based voting across OpenAI, Anthropic, and Google AI providers. +keywords: Angular, Ignite UI for Angular, Infragistics, MAKER, multi-agent, AI orchestration, MCP, Model Context Protocol, consensus voting, plan and execute, task decomposition +license: MIT +canonicalLink: "/components/ai/maker-framework" mentionedTypes: [] +llms: + description: "The MAKER Framework (@igniteui/maker-mcp) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents." _tocName: Maker Framework --- - - - - - # MAKER Framework The MAKER Framework (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction. @@ -222,7 +217,7 @@ The native binary is distributed for four platforms. The correct binary is selec ARM Linux is not currently packaged. To request additional platform support, open an issue at [github.com/IgniteUI/MAKER](https://github.com/IgniteUI/MAKER). -The binary cache location can be overridden with the `MAKER_MCP_CACHE` environment variable. The default cache paths are `%LOCALAPPDATA%\maker-mcp\{version}\{rid}\` on Windows and `~/.cache/maker-mcp/{version}/{rid}/` on macOS and Linux. +The binary cache location can be overridden with the `MAKER_MCP_CACHE` environment variable. The default cache paths are `%LOCALAPPDATA%\maker-mcp{version}{rid}\` on Windows and `~/.cache/maker-mcp/{version}/{rid}/` on macOS and Linux. ## Additional Resources @@ -231,8 +226,6 @@ The binary cache location can be overridden with the `MAKER_MCP_CACHE` environme - [Ignite UI CLI MCP](./cli-mcp.md) - [Ignite UI Theming MCP](./theming-mcp.md) -
- Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-skills.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-skills.md index 421dbc653..00b894c81 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-skills.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-skills.md @@ -1,21 +1,18 @@ --- title: Agent Skills | AI Skills | AI-Assisted Development | Ignite UI for Angular | Infragistics -_description: Learn how to use Agent Skills to supercharge AI-assisted development with Ignite UI for Angular components, grids, data operations, and theming. -_keywords: Ignite UI for Angular, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie -_license: MIT -mentionedTypes: [] +description: Learn how to use Agent Skills to supercharge AI-assisted development with Ignite UI for Angular components, grids, data operations, and theming. +keywords: Ignite UI for Angular, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie last_updated: "2026-04-24" +llms: + description: "Ignite UI for Angular ships with Agent Skills - structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for Angular." _tocName: Ignite UI for Angular Skills --- - - - # Ignite UI for Angular Agent Skills Ignite UI for Angular ships with **[Agent Skills](https://agentskills.io/)** - structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for Angular. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. -> [!NOTE] -> The AI tooling landscape is evolving rapidly. Skill discovery locations and distribution options may change as tools and IDEs are updated. Always consult the official documentation for your specific tool or agent for the latest information. +**Note:** +The AI tooling landscape is evolving rapidly. Skill discovery locations and distribution options may change as tools and IDEs are updated. Always consult the official documentation for your specific tool or agent for the latest information. ## Available Skills @@ -28,8 +25,8 @@ The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-ang | Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | | Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-generate-from-image-design/SKILL.md) | Build Angular apps from screenshots, mockups, and wireframes using Ignite UI components | -> [!NOTE] -> Starting with Ignite UI for Angular **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional migration to add these skills to your project automatically. +**Note:** +Starting with Ignite UI for Angular **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional migration to add these skills to your project automatically. ## Skill Locations @@ -145,8 +142,8 @@ ng generate @igniteui/angular-schematics:ai-config --assistants cursor --agents This also registers the `@angular/cli` MCP server alongside the Ignite UI servers. -> [!NOTE] -> If you installed Ignite UI for Angular manually and want to copy skills without running `ai-config`, the skill files are also available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: +**Note:** +If you installed Ignite UI for Angular manually and want to copy skills without running `ai-config`, the skill files are also available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: **macOS / Linux / Windows (PowerShell)** @@ -247,11 +244,11 @@ Once complete, the skills are ready to use - no manual file copying required. The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. -For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./theming-mcp.md) documentation. +For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](/ai/theming-mcp) documentation. ## Additional Resources -
+
- Getting Started with Ignite UI for Angular - Angular Schematics & Ignite UI CLI @@ -259,7 +256,7 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./ - [Ignite UI CLI MCP](./cli-mcp.md) - [Ignite UI Theming MCP](./theming-mcp.md) -
+
Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-theming-mcp.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-theming-mcp.md index 5ecac0cbe..390a6ee17 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-theming-mcp.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-theming-mcp.md @@ -1,19 +1,16 @@ --- title: Angular Theming MCP | Infragistics -_description: Use the Ignite UI Theming MCP server to generate Ignite UI for Angular palettes, themes, typography, and design token overrides through your AI assistant. -_keywords: Ignite UI for Angular controls, Angular widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations -_license: MIT -mentionedTypes: [] +description: Use the Ignite UI Theming MCP server to generate Ignite UI for Angular palettes, themes, typography, and design token overrides through your AI assistant. +keywords: Ignite UI for Angular controls, Angular widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations +llms: + description: "The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications." _tocName: Theming MCP --- - - - # Ignite UI Theming MCP

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe the theme, palette, or component overrides you want generated.

-
+ ## Overview @@ -59,8 +56,8 @@ The canonical launch command is: npx -y igniteui-theming igniteui-theming-mcp ``` -> [!NOTE] -> The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. +**Note:** +The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. ### How version resolution works @@ -87,8 +84,8 @@ GitHub Copilot in VS Code supports MCP servers through a workspace-level configu Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI Theming tools will be available. -> [!NOTE] -> MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. +**Note:** +MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. ### Cursor @@ -107,8 +104,8 @@ Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.js The server will be picked up automatically when you open a new Cursor chat session. -> [!NOTE] -> You can also configure MCP servers globally via **Settings → MCP** in Cursor. +**Note:** +You can also configure MCP servers globally via **Settings → MCP** in Cursor. ### Claude Desktop @@ -178,8 +175,8 @@ JetBrains AI Assistant supports MCP servers through the IDE settings: 5. Click **OK** and restart the AI Assistant. -> [!NOTE] -> MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. +**Note:** +MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. ### Other MCP Clients @@ -230,8 +227,8 @@ globs: ["**/*.scss", "**/styles/**"] - For dark mode, only the palette changes. Component overrides stay the same. ``` -> [!NOTE] -> Both files are committed to source control, so every team member gets the same AI behavior without manual setup. Adapt the brand colors, design system, and file paths to match your project. +**Note:** +Both files are committed to source control, so every team member gets the same AI behavior without manual setup. Adapt the brand colors, design system, and file paths to match your project. ## Available Tools @@ -243,6 +240,9 @@ To see the current full list of tools and their parameters at any time, ask your Here is a brief overview of each tool: +**Note:** +When it generates a palette, the server checks the contrast ratio between your surface and gray colors against WCAG thresholds and warns you when the pairing falls short. See [Accessibility](../themes/accessibility.md) for the contrast behavior built into the theming engine itself. + | Tool | Description | |------|-------------| | `detect_platform` | Identifies the project framework and selects the correct import paths and selectors. For Angular, React, and Web Components projects, reads `package.json`. For Blazor projects, which do not have a `package.json`, returns `generic` - tell the AI explicitly: _"Use the Blazor platform."_ | @@ -259,11 +259,11 @@ Here is a brief overview of each tool: | `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | | `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | -> [!NOTE] -> For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. +**Note:** +For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. -> [!NOTE] -> If your project uses the licensed `@infragistics/igniteui-angular` package, tell the AI so it can set the `licensed` parameter on palette, theme, and component tools. This adjusts the generated import paths accordingly. +**Note:** +If your project uses the licensed `@infragistics/igniteui-angular` package, tell the AI so it can set the `licensed` parameter on palette, theme, and component tools. This adjusts the generated import paths accordingly. ## Common Workflows @@ -350,17 +350,7 @@ Also confirm that `core()` is called before any other theming mixin in your `sty - [Ignite UI CLI MCP](./cli-mcp.md) - [MAKER Framework](./maker-framework.md) - - -
+
Our community is active and always welcoming to new ideas. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/angular-reactive-form-validation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/angular-reactive-form-validation.md index cb003fbea..de67fd9ab 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/angular-reactive-form-validation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/angular-reactive-form-validation.md @@ -1,10 +1,11 @@ --- title: Angular reactive form validation – Ignite UI for Angular -_description: Angular form validation is a process of verifying if inputs entered by a user into a web-form are correct. Check how to do it with Ignite UI for Angular reactive forms. -_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Combo components, Angular Reactive Forms, Angular Forms +description: Angular form validation is a process of verifying if inputs entered by a user into a web-form are correct. Check how to do it with Ignite UI for Angular reactive forms. +keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Combo components, Angular Reactive Forms, Angular Forms +llms: + description: "Reactive forms in Angular provide a direct access to the underlying form object model, offering an immutable and explicit approach to handling form inputs." _tocName: Angular Reactive Forms --- - # Angular reactive form validation ## What are reactive forms in Angular? @@ -31,7 +32,6 @@ Reactive forms are built around observable streams which track every unique chan The data flow in Angular reactive forms is well-structured because the form logic is led by the component class. This enables you to add validator functions directly to the FormControl instance in the component class. Whenever a change occurs, Angular calls these functions. - ## What is angular form validation? Angular form validation is an integral technical process that verifies if any input provided by a user into a web-form is correct and complete. You can manage validation in a template-driven approach or with Angular reactive forms. Based on what is entered, the form will either allow users to proceed or will display a specific error message to help the user know where they went wrong with their data input. @@ -366,7 +366,7 @@ igx-card, article { } ``` -
+
## Angular form group validation @@ -420,15 +420,15 @@ export class MyComponent implements OnInit { ## Additional Resources -
+
Related topics: -- [Combo](combo.md) -- [Select](select.md) -- [Input Group](input-group.md) -- [Date Picker](date-picker.md) -- [Time Picker](time-picker.md) +- [Combo](/combo) +- [Select](/select) +- [Input Group](/input-group) +- [Date Picker](/date-picker) +- [Time Picker](/time-picker) Our community is active and always welcoming to new ideas. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md index 420a27d57..643f30530 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md @@ -1,19 +1,20 @@ --- title: Angular Autocomplete Component – Ignite UI for Angular - MIT license -_description: The Angular Autocomplete directive offers a way to enhance a text input by showing a panel of suggested options provided by the developer. Try it now. -_keywords: Angular Autocomplete component, Angular Autocomplete directive, Angular Autocomplete control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library -_license: MIT +description: The Angular Autocomplete directive offers a way to enhance a text input by showing a panel of suggested options provided by the developer. Try it now. +keywords: Angular Autocomplete component, Angular Autocomplete directive, Angular Autocomplete control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library +license: MIT +llms: + description: "Angular Autocomplete is a search box directive that enables users to easily find, filter and select an item from a list of suggestions while they type." _tocName: Autocomplete --- - # Angular Autocomplete Directive Overview Angular Autocomplete is a search box directive that enables users to easily find, filter and select an item from a list of suggestions while they type. Feature-rich, it supports seamless data binding, filtering, grouping, UI customization options, and other built-in functionalities so developers can create intuitive autocomplete search experience. -

+

The [`igxAutocomplete`](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective) directive provides a way to enhance a text input by showing an [`igxDropDown`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) with suggested options, provided by the developer. The suggestions will show once you start typing in the text input or use the `Arrow Up`/`Arrow Down` keys. -

+
## Angular Autocomplete Example @@ -75,7 +76,7 @@ export class AutocompletePipeStartsWith implements PipeTransform { } ``` -
+
## Getting Started with Ignite UI for Angular Autocomplete @@ -85,9 +86,9 @@ To get started with the Ignite UI for Angular for [Angular Components](https://w ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. -The next step is to import the **IgxAutocompleteModule** and **IgxDropDownModule** in our **app.module**. If [`igxAutocomplete`](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective) is applied on an [igxInput](mcp:get_api_reference?platform=angular&component=IgxInputDirective), the **igxInputGroupModule** is also required: +The next step is to import the **IgxAutocompleteModule** and **IgxDropDownModule** in our **app.module**. If [`igxAutocomplete`](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective) is applied on an [`igxInput`](mcp:get_api_reference?platform=angular&component=IgxInputDirective), the **igxInputGroupModule** is also required: ```typescript // app.module.ts @@ -185,8 +186,8 @@ export class AutocompletePipeStartsWith implements PipeTransform { } ``` ->[!NOTE] ->The [`igxAutocomplete`](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective) uses the [`igxDropDown`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) as a provider for the available options, which means that all capabilities of the dropdown component can be used in the autocomplete. +**Note:** +The [`igxAutocomplete`](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective) uses the [`igxDropDown`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) as a provider for the available options, which means that all capabilities of the dropdown component can be used in the autocomplete. ### Disable Angular Autocomplete @@ -263,12 +264,11 @@ export class AutocompleteComponent { } ``` ->[!NOTE] ->The default positioning strategy is `AutoPositionStrategy` and the dropdown is opened according to the available space. +**Note:** +The default positioning strategy is `AutoPositionStrategy` and the dropdown is opened according to the available space. If everything went right, you should see this in your browser: - ```typescript import { Component, Pipe, PipeTransform } from '@angular/core'; import { ConnectedPositioningStrategy, VerticalAlignment } from 'igniteui-angular/core'; @@ -365,12 +365,11 @@ export class AutocompletePipeStartsWith2 implements PipeTransform { } ``` - -
+
## Keyboard Navigation -
+
- ⬆ / ⬇ or typing in the input will open the dropdown, if it's closed. - ⬇ - will move to the next dropdown item. @@ -378,8 +377,8 @@ export class AutocompletePipeStartsWith2 implements PipeTransform { - ENTER will confirm the already selected item and will close the dropdown. - ESC will close the dropdown. ->[!NOTE] ->When the Angular autocomplete opens, then the first item on the list is automatically selected. The same is valid when the list is filtered. +**Note:** +When the Angular autocomplete opens, then the first item on the list is automatically selected. The same is valid when the list is filtered. You can also see how our [WYSIWYG App Builder™](https://www.infragistics.com/products/appbuilder) streamlines the entire design-to-code story by 80% using real Angular components. @@ -401,36 +400,34 @@ The `drop-down` component, used as provider for suggestions, will expose the fol - role="option" - applied on the `igx-drop-down-item` component container - aria-disabled="true"/"false" applied on `igx-drop-down-item`, `igx-drop-down-item-group` component containers when they are disabled. - ## Styling Every component has its own theme. -To get the `igxAutocomplete` styled, you have to style its containing components. In our case, these are the [input-group-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) and the [drop-down-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme). +To get the `igxAutocomplete` styled, you have to style its containing components. In our case, these are the `input-group-theme` and the `drop-down-theme`. -Take a look at the [`igxInputGroup`](input-group.md#styling) and the [`igxDropdown`](drop-down.md#styling) styling sections to get a better understanding of how to style those two components. +Take a look at the [`igxInputGroup`](/input-group#styling) and the [`igxDropdown`](/drop-down#styling) styling sections to get a better understanding of how to style those two components. ## API Reference -
- -- [IgxAutocompleteDirective](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective) -- [IgxDropDownComponent](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) -- [IgxInputGroupComponent](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) +
+- [`IgxAutocompleteDirective`](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective) +- [`IgxDropDown`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) +- [`IgxInputGroup`](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) ## Theming Dependencies -- [IgxDropDown Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-drop-down-theme) -- [IgxInputGroup Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme) +- `IgxDropDown Theme` +- `IgxInputGroup Theme` ## Additional Resources -
+
-- [IgxDropDown](drop-down.md) -- [IgxInputGroup](input-group.md) -- [Template Driven Forms Integration](input-group.md) +- [IgxDropDown](/drop-down) +- [IgxInputGroup](/input-group) +- [Template Driven Forms Integration](/input-group) Our community is active and always welcoming to new ideas. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md index 39a48e926..bba00d86d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md @@ -1,223 +1,623 @@ --- -title: Angular Avatar Component – Ignite UI for Angular | Infragistics | MIT license -_description: Ignite UI for Angular Avatar control enables users to add images, material icons or initials within any application for instances such as a profile button. -_keywords: Angular Avatar component, Angular Avatar control, Ignite UI for Angular, Angular UI components -_license: MIT +title: "Angular Avatar Component | Layouts | Infragistics" +description: "Use the Angular Avatar component to represent users, entities, or objects with images, initials, icons, or custom content." +keywords: "Angular Avatar, avatar component, profile image, initials, Ignite UI for Angular, Infragistics" +last_updated: "2026-07-29" +license: MIT +mentionedTypes: ["Avatar", "Badge", "Icon"] +relatedComponents: ["Badge"] +llms: + description: "The Ignite UI for Angular Avatar topic shows how to render user, entity, or object identity with images, initials, icons, custom content, shape, size, styling, and accessibility guidance." _tocName: Avatar --- +# Avatar Component -# Angular Avatar Component Overview +The Ignite UI for Angular Avatar represents a user, entity, or object with an image, initials, or custom content. -

Angular Avatar component helps adding initials, images, or material icons to your application.

-
+Use the avatar to provide a compact visual identity in lists, cards, profile menus, and activity feeds. -## Angular Avatar Example +## Live Demo - - +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; -
+@Component({ + selector: 'app-avatar-overview', + styleUrls: ['./avatar-overview.component.scss'], + templateUrl: './avatar-overview.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class AvatarOverviewComponent {} +``` +```html + + + -## Getting Started with Ignite UI for Angular Avatar + + + + + + + +
+ + + + + + + + +
+``` +```scss +@use "igniteui-theming/sass/typography" as *; -To get started with the Ignite UI for Angular Avatar component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: +:host { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: rem(100px); + height: 100vh; + padding: rem(32px); +} -```cmd -ng add igniteui-angular -``` +.profile-status { + anchor-name: --profile-status; +} -For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. +.status-badge { + position: absolute; + position-anchor: --profile-status; + inset-block-start: anchor(85%); + inset-inline-start: anchor(85%); + translate: -50% -50%; +} -The next step is to import the `IgxAvatarModule` in your **app.module.ts** file. +.avatar-stack { + display: flex; -```typescript -// app.module.ts + igx-avatar { + box-shadow: 0 0 0 calc(var(--size) * 0.07) var(--ig-surface-500); -... -import { IgxAvatarModule } from 'igniteui-angular/avatar'; -// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package + + igx-avatar { + // Proportional to the avatar's own rendered size (--size, set by + // the theme) rather than a fixed length, since themes disagree + // widely on how big a "large" avatar actually is. + margin-inline-start: calc(var(--size) * -0.27); + } -@NgModule({ - ... - imports: [..., IgxAvatarModule], - ... -}) -export class AppModule {} + &:last-child { + --ig-avatar-background: #e8eef6; + --ig-avatar-color: #6f8097; + } + } +} ``` -Alternatively, as of `16.0.0` you can import the `IgxAvatarComponent` as a standalone dependency. +## Anatomy -```typescript -// home.component.ts +The avatar is a single host element that applies image semantics and renders one of the supported content patterns. -... -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -// import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package +**Angular Avatar anatomy anatomy:** The avatar anatomy labels the image, icon, and initials containers. -@Component({ - selector: 'app-home', - template: '', - styleUrls: ['home.component.scss'], - standalone: true, - imports: [IgxAvatarComponent] -}) -export class HomeComponent {} -``` + -## Using the Angular Avatar Component +1. Image container: Displays image content type.
+2. Icon container: Displays icon content type.
+3. Initials container: Displays text content type. -The Ignite UI for Angular Avatar component comes in three shapes (square, rounded, and circle) and three size options (small, medium, and large). It can be used for displaying initials, images or icons. +```text +igx-avatar[role="img"] // host - exposes the avatar +└─ one of, by priority: + ├─ div.igx-avatar__image // `src` set - image painted as a background + ├─ igx-icon // `icon` set + ├─ span // `initials` set - first two characters + └─ ng-content // custom projected content +``` -### Avatar Shape +## Getting Started -We can change the avatar shape through the `shape` attribute setting its value to `square`, `rounded` or `circle`. By default, the shape of the avatar is `square`. +Import the Angular avatar component before you render ``. If you have not set up Ignite UI for Angular yet, complete the shared [Getting Started](../general/getting-started.md) topic first. -```html - +```ts +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; ``` -### Avatar displaying initials +## Usage -To get a simple avatar with [`initials`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent&member=initials) (i.e. JS for 'Jack Sock'), add the following code inside the component template: +Render an avatar with an image source, initials, or custom content in the default slot. -```html - -``` +### Variants -Let's enhance our avatar by making it circular and bigger in size. +Set only the content source you intend to show. The Angular avatar renders `src` first, then `icon`, then `initials`, and falls back to projected custom content when none of those inputs are set. ```html - + + + + + ``` -We can also change the background through the `background` property or set a color on the initials through the `color` property. +```typescript +import { Component, inject } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-avatar-variants', + styleUrls: ['./avatar-variants.component.scss'], + templateUrl: './avatar-variants.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent] +}) +export class AvatarVariantsComponent { + private iconService = inject(IgxIconService); + constructor() { + this.iconService.addSvgIconFromText( + 'mail', + '', + 'material' + ); + this.iconService.addSvgIconFromText( + 'check', + '', + 'material' + ); + } +} +``` +```html + + + + + +Image + + + + + + + 2 + +Icon + + + + + + + +Initials +``` ```scss -// avatar.component.scss +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; -igx-avatar { - background: #e41c77; - color: #000000; +$avatars: circle, square, rounded; + +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(48px); + row-gap: rem(8px); + height: 100vh; + padding: rem(32px); } -``` +// :where() keeps the sample's own rules at zero +:where(igx-avatar) { + grid-row: 1; +} -> [!WARNING] -> The `roundShape` property of the `igx-avatar` component have been deprecated. The `shape` attribute should be used instead. +:where(span) { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); + + @include type-style("body-1") { + margin: 0; + }; +} -If all went well, you should see something like the following in the browser: +:where(igx-badge) { + --ig-size: var(--ig-size-small); -
- -
+ position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} -### Avatar displaying image +// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to. +@each $avatar in $avatars { + $i: list.index($avatars, $avatar); -To get an avatar that displays an image, all you have to do is set the image source via the `src` property. + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$avatar}; + } -```html - - + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$avatar}; + } +} ``` -If all went well, you should see something like the following in the browser: +### Shape -
- -
+Set [`Shape`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent&member=shape) to `square`, `rounded`, or `circle`. -### Avatar displaying icon +```html + +``` -Analogically, the avatar can display an icon via the [`icon`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent&member=icon) property. Currently all icons from the material icon set are supported. +```typescript +import { Component, inject } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +@Component({ + selector: 'app-avatar-shape', + styleUrls: ['./avatar-shape.component.scss'], + templateUrl: './avatar-shape.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent] +}) +export class AvatarShapeComponent { + private iconService = inject(IgxIconService); + + constructor() { + this.iconService.addSvgIconFromText( + 'mail', + '', + 'material' + ); + this.iconService.addSvgIconFromText( + 'check', + '', + 'material' + ); + } +} +``` ```html - + + + + +Circle + + + + + + + 2 + +Square + + + + + + + +Rounded ``` +```scss +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; + +$avatars: circle, square, rounded; -> [!NOTE] -> This component uses Material Icons. Add the following link to your `index.html`: `` +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(40px); + row-gap: rem(8px); + height: 100vh; + padding: rem(32px); +} -You should see something like this: +igx-avatar { + grid-row: 1; +} -
- -
+span { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); + + @include type-style("body-1") { + margin: 0; + }; +} -## Styling +igx-badge { + --ig-size: var(--ig-size-small); -### Avatar Theme Property Map - -Changing the `$background` property automatically updates the following dependent properties: - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$background$colorThe text color used for the avatar.
$icon-colorThe icon color used for the avatar.
+ position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} -To get started with styling the avatar, we need to import the `index` file, where all the theme functions and component mixins live: +// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to. +@each $avatar in $avatars { + $i: list.index($avatars, $avatar); -```scss -@use "igniteui-angular/theming" as *; + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$avatar}; + } -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$avatar}; + } +} ``` -Following the simplest approach, we create a new theme that extends the [`avatar-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-avatar-theme) providing values for the `$background` and `$border-radius` parameters. The `$color` (or `$icon-color`) is automatically set to either black or white, depending on which offers better contrast with the specified background. Note that the `$border-radius` property only takes effect when the avatar's `shape` is set to `rounded`. +### Size -Given the following markup: +Set `--ig-size` to one of the shared size tokens when you need a preset avatar size. ```html -
- -
+ ``` -We create the following avatar theme: +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; -```scss -$custom-avatar-theme: avatar-theme( - $background: #72da67, - $border-radius: 16px -); +@Component({ + selector: 'app-avatar-size', + styleUrls: ['./avatar-size.component.scss'], + templateUrl: './avatar-size.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class AvatarSizeComponent { +} +``` +```html + + + + + +Large + + + + + + +Medium + + + + + + +Small ``` +```scss +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; -The last step is to pass the custom avatar theme: +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(48px); + row-gap: rem(8px); + height: 100vh; + padding: rem(32px); +} -```scss -.initials { - @include tokens($custom-avatar-theme); +igx-avatar { + grid-row: 1; +} + +span { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); + + @include type-style("body-1") { + margin: 0; + }; +} + +igx-badge { + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} + +$avatars: large, medium, small; + +// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to. +@each $avatar in $avatars { + $i: list.index($avatars, $avatar); + + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$avatar}; + } + + igx-badge:nth-of-type(#{$i}) { + --ig-size: var(--ig-size-#{$avatar}); + position-anchor: --#{$avatar}; + } } ``` -If all went well, you should see something like the following in the browser: +### Do/Don't + +**When to use:** Use the avatar when a UI needs a small representation of a person, organization, object, or account, such as a profile image, initials, or an icon. Keep a consistent avatar strategy within the same UI region so repeated identities are easy to scan. + +**When not to use:** Use the [Badge](../inputs/badge.md) component when you need to show a count, status, or notification indicator instead of representing an entity. Badges can also decorate avatars when both identity and status need to appear together. + +
+ + + + + + + + + + + + + +
DoDon't
+
+ +## Properties +The avatar exposes a small set of inputs for its content and shape. + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| [`icon`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent&member=icon) | `string` | n/a | Sets the icon rendered by the avatar. | +| [`initials`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent&member=initials) | `string` | n/a | Sets text initials rendered by the avatar. | +| [`shape`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent&member=shape) | `"square" \| "rounded" \| "circle"` | `"square"` | Sets the avatar shape. | +| [`size`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent&member=size) | `"small" \| "medium" \| "large"` | `"small"` | Sets the avatar size. | +| [`src`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent&member=src) | `string` | n/a | Sets the image source URL. | + +## Styling ```typescript import { Component, inject } from '@angular/core'; @@ -393,98 +793,344 @@ igx-badge { } ``` -### Styling with Tailwind +The avatar appearance is controlled through theme variables and platform-specific styling hooks. + +Use the avatar CSS variables for token-level changes and Angular host classes when you need to target a specific rendered type or shape. + +| Variable | What it changes | +| -- | -- | +| `--ig-avatar-background` | Avatar background color. | +| `--ig-avatar-color` | Text and initials color. | +| `--ig-avatar-icon-color` | Icon color. | +| `--ig-avatar-border-radius` | Border radius used by rounded avatars. | +| `--ig-avatar-size` | Avatar width and height. | +| `--ig-size` | Shared component size token used to derive preset avatar sizes. | -You can style the `avatar` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +| Selector | Description | +| -- | -- | +| `igx-avatar` | The avatar host element. | +| `.igx-avatar--rounded` | Applied when `shape` is `rounded`. | +| `.igx-avatar--circle` | Applied when `shape` is `circle`. | +| `.igx-avatar--image` | Applied when the avatar renders an image. | +| `.igx-avatar--icon` | Applied when the avatar renders an icon. | +| `.igx-avatar--initials` | Applied when the avatar renders initials. | +| `.igx-avatar__image` | The image avatar element. | -Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: +### Sass Theming + +Use the `avatar-theme` function when your application customizes Ignite UI themes through Sass. ```scss -@import "tailwindcss"; -... -@use 'igniteui-theming/tailwind/utilities/material.css'; -``` +@use "igniteui-angular/theming" as *; -The utility file includes both `light` and `dark` theme variants. +$custom-avatar-theme: avatar-theme( + $background: #72da67, + $border-radius: 16px, + $size: 3rem +); -- Use `light-*` classes for the light theme. -- Use `dark-*` classes for the dark theme. -- Append the component name after the prefix, e.g., `light-avatar`, `dark-avatar`. +:root { + @include tokens($custom-avatar-theme); +} +``` -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +### CSS Variables -You can find the full list of properties in the [avatar-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-avatar-theme). The syntax is as follows: +Set component CSS variables directly when you need local styling without a Sass build step. -```html - - +```css +igx-avatar { + --ig-avatar-background: var(--ig-success-500); + --ig-avatar-color: var(--ig-success-500-contrast); + --ig-avatar-border-radius: 20px; +} ``` ->[!NOTE] ->The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. +### Styling with Tailwind -At the end your avatar should look like this: +Use the Angular Tailwind utility syntax when your application styles Ignite UI components through Tailwind classes. -
- -
+```typescript +import { Component, inject } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxButtonDirective, IgxDividerComponent, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { + IgxCardActionsComponent, + IgxCardComponent, + IgxCardContentDirective, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective, + IgxCardThumbnailDirective +} from 'igniteui-angular/card'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { berealIcon, instagramIcon, plusIcon, threadsIcon } from './icons'; -### Custom sizing +@Component({ + selector: 'app-avatar-tailwind-styling', + styleUrls: ['./avatar-tailwind-styling.component.scss'], + templateUrl: './avatar-tailwind-styling.component.html', + imports: [ + IgxAvatarComponent, + IgxButtonDirective, + IgxCardActionsComponent, + IgxCardComponent, + IgxCardContentDirective, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardMediaDirective, + IgxCardThumbnailDirective, + IgxDividerComponent, + IgxIconButtonDirective, + IgxIconComponent, + IgxRippleDirective + ] +}) +export class AvatarTailwindStylingSampleComponent { + private iconService = inject(IgxIconService); -You can either use the `--size` variable, targeting the `igx-avatar` directly: + public profileStats = [ + { value: '23.9K', label: 'Likes' }, + { value: '163', label: 'Posts' }, + { value: '23.9K', label: 'Views' } + ]; -```scss -igx-avatar { - --size: 200px; + constructor() { + this.iconService.addSvgIconFromText('instagram', instagramIcon, 'material'); + this.iconService.addSvgIconFromText('bereal', berealIcon, 'material'); + this.iconService.addSvgIconFromText('threads', threadsIcon, 'material'); + this.iconService.addSvgIconFromText('plus', plusIcon, 'material'); + } } ``` - -Or you can use the universal `--ig-avatar-size` variable to target all instances: - ```html -
- -
-``` + + + Cafe interior + + + + + Kate Thompson +

3D Artist. Turning polygons into worlds and immersive digital realities

+ + + +
+ @for (stat of profileStats; track stat.label; let isLast = $last) { +
+ {{ stat.value }} + {{ stat.label }} +
+ @if (!isLast) { + + } + } +
+ + + +
+ + + +
+ + + + + + + + + Kate Thompson +

3D Artist. Turning polygons into worlds and immersive digital realities

+ + +
+ @for (stat of profileStats; track stat.label; let isLast = $last) { +
+ {{ stat.value }} + {{ stat.label }} +
+ @if (!isLast) { + + } + } +
+ + + +
+ + + +
+ + +``` ```scss -.my-app { - --ig-avatar-size: 200px; +@use "igniteui-theming/sass/typography" as *; + +:host { + display: grid; + grid-template-columns: repeat(auto-fit, rem(344px)); + gap: rem(40px); + place-content: center; + height: 100vh; } -``` -You can also use one of the predefined sizes, assigning it to the `--ig-size` variable, if theres no size attribute applied. The available values for `--ig-size` are `--ig-size-small`, `--ig-size-medium`, and `--ig-size-large`: +igx-card:nth-of-type(2) { + align-self: center; +} -```scss -igx-avatar { - --ig-size: var(--ig-size-small); +.card-sample-custom-subtitle { + display: block; + color: var(--ig-gray-700); + + @include type-style("body-2") { + margin-block-start: rem(8px); + }; +} + +.stats-title { + color: var(--ig-gray-900); + + @include type-style("subtitle-1") { + font-weight: 600; + }; +} + +.stats-subtitle { + color: var(--ig-gray-500); + + @include type-style("body-2"); } ``` -Learn more about it in the [Size](display-density.md) article. +## Accessibility -
+The avatar is a non-interactive identity visual with accessible image semantics. -## API References +### Keyboard Interaction -
+The avatar does not receive focus and has no keyboard interaction. -- [IgxAvatarComponent](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent) +| Key | Action | +| -- | -- | +| n/a | The avatar is not keyboard interactive. | +### Screen Readers / ARIA -## Theming Dependencies +The avatar initializes with image semantics and a default accessible label of `avatar`. -- [IgxAvatar Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-avatar-theme) -- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) +- Use surrounding text to identify the represented person, entity, or object when an image avatar conveys identity. +- Treat decorative avatars as redundant when adjacent text already identifies the same entity. -## Additional Resources +### Accessibility Compliance + +Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.md) topic. + +| Criterion | How the component complies | +| -- | -- | +| [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) | The avatar has an accessible label and can be paired with surrounding text that identifies the represented entity. | +| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | The component initializes with `role="img"` and a default accessible label. | + +Your responsibilities: + +- Keep sufficient contrast between the avatar background and text or icon color when overriding styles. +- Avoid duplicating the same identity announcement when adjacent text already names the person or entity. + +- Make sure nearby text identifies the represented entity when the avatar image conveys identity. + +## Troubleshooting + +Use this section to check boundaries and common decisions before treating Avatar as an interactive or status component. + +### Known Limitations + +The avatar is a visual identity primitive and does not add interaction, status, or notification behavior by itself. + +- Use an interactive container, such as a button or list item, when the represented entity must be clickable. +- Use a badge with the avatar when you need to show status, counts, or notification indicators. + +## API References + +Use these API references for the complete avatar API surface. + +[`IgxAvatar`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent) -
+## Dependencies -Our community is active and always welcoming to new ideas. +The Sass styling workflow uses the `IgxAvatar Theme` and `IgxIcon Theme` APIs. + +## Additional Resources + +Use these resources for support and related Ignite UI documentation. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) + +## Related Components + +Use these related components when identity needs to be combined with status, actions, or richer layout. + +- [Badge](../inputs/badge.md) - Use Badge to show counts, status, or notification indicators. Badge can decorate Avatar when the UI needs both identity and status. + +## FAQ + + **Q: When should I use Avatar instead of Badge?** + + Use Avatar when the UI needs to represent a person, account, organization, or object. Use Badge when the UI needs to show a count, status, or notification indicator. + + + **Q: Does Avatar add keyboard interaction?** + + No. Avatar is non-interactive and does not receive focus by itself. Put it inside an interactive component when the represented entity needs an action. + + + **Q: How should I label image avatars for screen readers?** + + Provide meaningful alternative text when the avatar image identifies a specific entity. Avoid repeating the same identity when adjacent text already names that entity. + + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md index c955110ef..00f6fec15 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md @@ -1,107 +1,178 @@ --- -title: Angular Badge Component – Ignite UI for Angular | Infragistics | MIT license -_description: Display an active count or icon in a predefined style to decorate other components anywhere in an application with Ignite UI for Angular Badge control. -_keywords: Angular Badge component, Angular Badge control, Ignite UI for Angular, Angular UI Components -_license: MIT +title: "Badge" +description: "The Ignite UI for Angular Badge displays a short status, category, count, or notification indicator alongside avatars, navigation menus, and other components." +keywords: "Angular Badge, Ignite UI for Angular, badge indicator" +license: MIT +mentionedTypes: ["Badge"] +last_updated: "2026-07-24" +llms: + description: "The Ignite UI for Angular Badge component displays a short status, category, count, or notification indicator alongside avatars, navigation menus, and other components." _tocName: Badge --- +# Badge Component -# Angular Badge Component Overview +The Angular Badge component is provided by the platform-specific Ignite UI for Angular package and is used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed with predefined styles to communicate information, success, warnings, or errors. -

Angular Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed as icons with a predefined style to communicate information, success, warnings, or errors.

+## Live Demo -## Angular Badge Example +The Angular Badge demo shows how the component can communicate a compact status or notification next to another interface element. - - +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-badge-overview', + templateUrl: './badge-overview.component.html', + styleUrls: ['./badge-overview.component.scss'], + imports: [IgxAvatarComponent, IgxBadgeComponent, IgxChipComponent, IgxIconComponent] +}) +export class BadgeOverviewComponent { } +``` +```html + + + + +mail + + +Events + + +notifications + +``` +```scss +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; + +:host { + display: grid; + grid-auto-flow: column; + place-content: center; + place-items: center; + column-gap: rem(60px); + min-height: 7rem; +} + +igx-icon { + color: var(--ig-gray-700); + font-size: rem(24px); +} + +igx-chip { + --ig-size: var(--ig-size-large); +} -
+igx-badge { + --ig-size: var(--ig-size-small); -## Getting Started with Ignite UI for Angular Badge + position: absolute; + inset-block-start: anchor(10%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} -To get started with the Ignite UI for Angular Badge component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: +igx-badge:nth-of-type(1) { + inset-block-start: anchor(85.5%); +} -```cmd -ng add igniteui-angular +$anchors: avatar, mail, events, notifications; + +@each $anchor in $anchors { + $i: list.index($anchors, $anchor); + + .#{$anchor}-anchor { + anchor-name: --#{$anchor}; + } + + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$anchor}; + } +} ``` -For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. +## Anatomy -The next step is to import the `IgxBadgeModule` in your **app.module.ts** file. +The Angular Badge presents a compact label or dot indicator that decorates another interface element. -```typescript -// app.module.ts +**Badge anatomy:** The Badge component is a compact label or dot indicator that decorates another interface element. -... -import { IgxBadgeModule } from 'igniteui-angular/badge'; -// import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package + + +1. Dot indicator: A small badge dot used to show a status or a new update.
+2. Icon: Represents the type of status or action.
+3. Container: The badge shape that holds and styles the icon or label.
+4. Label: Text or a number displayed inside the badge. + +The component renders its content inside the `base` CSS part. Use the component's default slot for text or other inline content; when `dot` is enabled, the badge renders as an indicator without content. + +```text + +└── ::part(base) + └── default slot content + ``` -Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` as a standalone dependency. +## Getting Started -```typescript -// home.component.ts +To use the Angular Badge, follow the [Ignite UI for Angular Getting Started](../general/getting-started.md) topic for the basic project setup, then register the component for your target platform. -... -import { IgxBadgeComponent } from 'igniteui-angular/badge'; -// import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package +For Angular using the **igniteui-angular** package, install the package: -@Component({ - selector: 'app-home', - template: '', - styleUrls: ['home.component.scss'], - standalone: true, - imports: [IgxBadgeComponent] -}) -export class HomeComponent {} +```cmd +npm install igniteui-angular +``` + +Then import `IgxBadgeComponent` in the component `imports` collection. + +```ts +import { IgxBadgeComponent } from 'igniteui-angular/badge'; ``` -> [!NOTE] -> This component uses Material Icons. Add the following link to your `index.html`: `` +The simplest way to start using the [`IgxBadge`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent) is as follows: + +```html + +``` -Now that you have the Ignite UI for Angular Badge module or component imported, you can start with a basic configuration of the `igx-badge` component. +## Usage -## Using the Angular Badge Component +Use the Angular Badge to display a short status, category, count, or notification indicator alongside another component. -Let's see how the demo sample is done. It's a simple success badge on an avatar. To build that, we need to import the `IgxAvatarModule`, along with the `IgxBadgeModule`: +Let's see how the demo sample is done. It's a simple success badge on an avatar. To build that, import the `IgxAvatarModule` together with the `IgxBadgeModule`: ```typescript -// app.module.ts -... import { IgxBadgeModule } from 'igniteui-angular/badge'; import { IgxAvatarModule } from 'igniteui-angular/avatar'; -// import { IgxBadgeModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxBadgeModule, IgxAvatarModule], - ... -}) - -export class AppModule {} ``` -_Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` and `IgxAvatarComponent` as standalone dependencies._ - -Next, we will add those components to our template: +Add both modules to the component `imports` collection, or import the standalone components. Then add the components to your template: ```html
- - + +
``` -Using the wrapper, we will position the badge absolutely, covering a little bit of the avatar: +Use a relatively positioned wrapper to place the Badge over the avatar: ```scss .wrapper { @@ -116,79 +187,130 @@ igx-badge { } ``` -### Badge Shape +### Type -We can change the badge shape through the `shape` attribute setting its value to `square`. By default, the shape of the badge is `rounded`. +The Badge can carry different types of content such as a number or an icon. + +Use the `[value]` input to display text or a numeric count inside the Badge: ```html - + ``` -If everything's done right, you should see the demo sample shown above in your browser. - -### Badge Size - -The size of the badge can be controlled using the `--size` variable. It will make sure that the badge sizes proportionally in both directions. Keep in mind, however, that badges containing text values use the `caption` typography style for its font-size and line-height. For that reason, when setting the `--size` of a badge containing text to values below 16px, you will also need to modify its typography. - -Example: - -```scss -igx-badge { - --size: 12px; +Use the `[icon]` input to display an icon inside the Badge: - font-size: calc(var(--size) / 2); - line-height: normal; -} +```html + ``` -### Badge Value and Icon - -Use the `[value]` input to display text or a numeric count inside the badge: +When both `[icon]` and `[value]` are set, the Badge displays both simultaneously: ```html - + ``` -Use the `[icon]` input to display an icon inside the badge: +You can also project content directly. When projecting both an icon and text, wrap the text to keep the correct padding: ```html - + + bluetooth + Bluetooth + ``` -When both `[icon]` and `[value]` are set, the badge displays both simultaneously: +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +@Component({ + selector: 'app-badge-type', + templateUrl: './badge-type.component.html', + styleUrls: ['./badge-type.component.scss'], + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeTypeComponent { } +``` ```html - - + + +Dot + + + +Icon + + + +Text ``` +```scss +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; -Or you can project content directly: +$types: dot, icon, text; -```html - {{ model.value }} +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(60px); + row-gap: rem(16px); + min-height: 8.5rem; + padding: rem(32px); +} - - - bluetooth - Bluetooth - -``` +igx-avatar { + --ig-avatar-size: #{rem(40px)}; + + grid-row: 1; +} + +span { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); + + @include type-style("caption") { + margin: 0; + } +} + +igx-badge { + --ig-size: var(--ig-size-small); -### Badge Icon + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} -In addition to material icons, the `igx-badge` component also supports usage of [Material Icons Extended](../components/material-icons-extended.md) and any other custom icon set. To add an icon from the material icons extended set inside your badge component, first you have to register it: +@each $type in $types { + $i: list.index($types, $type); -```ts -export class BadgeIconComponent implements OnInit { - constructor (protected _iconService: IgxIconService) {} + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$type}; + } - public ngOnInit() { - this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons'); + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$type}; } } ``` -Then, just specify the icon name and family as follows: +#### Icon +In addition to Material Icons, the Angular Badge supports Material Icons Extended and other custom icon sets. Register the custom icon with `IgxIconService`, then specify its name and icon set: + +```ts +this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons'); +``` ```html @@ -258,7 +380,12 @@ span { grid-row: 2; text-align: center; - color: var(--ig-gray-700); + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); } igx-badge:last-of-type { @@ -272,262 +399,917 @@ igx-badge:last-of-type { } ``` -### Dot Badge +#### Dot -The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its `dot` property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.). +The Ignite UI for Angular Badge can also render as a minimal dot indicator for notifications by setting its [`dot`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=dot) attribute. Dot badges do not support content, but they can be outlined and can use any of the available dot types (for example, `primary`, `success`, or `info`). - - +Set the [`dot`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=dot) attribute to render a minimal notification indicator without content: -### Badge in List +```html + +``` -Let's extend the previous sample and create a list with contacts, similar to those in chat clients. In addition to the contact name, we want to display an avatar and the current state of the contact (online, offline or away). To achieve this, we're using the [`igx-badge`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent) and [`igx-avatar`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent) components. For a container, [`igx-list`](mcp:get_api_reference?platform=angular&component=IgxListComponent) is used. +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxIconComponent, IgxIconService} from 'igniteui-angular/icon'; +import { facebookMessenger } from '@igniteui/material-icons-extended'; -To continue, include all needed modules and import them in the **app.module.ts** file. +@Component({ + selector: 'app-badge-dot', + styleUrls: ['./badge-dot.component.scss'], + templateUrl: './badge-dot.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent] +}) +export class BadgeDotComponent { + constructor(private iconService: IgxIconService) { + this.iconService.addSvgIconFromText('facebookMessenger', facebookMessenger.value); + } -```typescript -// app.module.ts + public notifications = [ + { title: 'Contract renewal', time: '09:12', unread: true }, + { title: 'Weekly digest', time: 'Yesterday', unread: false } + ]; -... -import { IgxListModule } from 'igniteui-angular/list'; -import { IgxAvatarModule } from 'igniteui-angular/avatar'; -import { IgxBadgeModule } from 'igniteui-angular/badge'; -// import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package + public tabs = [ + { label: 'Home', icon: 'home', active: true, hasUpdates: false }, + { label: 'Chat', icon: 'facebookMessenger', active: false, hasUpdates: true }, + { label: 'Profile', icon: 'person', active: false, hasUpdates: false } + ]; +} +``` +```html + + + + +
+ @for (item of notifications; track item.title) { +
+ + @if (item.unread) { + + } + + {{ item.title }} + {{ item.time }} + chevron_right +
+ } +
-@NgModule({ - ... - imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule], -}) -export class AppModule {} + + + + +
+ @for (tab of tabs; track tab.label) { +
+ + + @if (tab.hasUpdates) { + + } + + {{ tab.label }} +
+ } +
``` +```scss +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; + +:host { + --sample-accent: var(--ig-primary-800); ->[!NOTE] ->The [`igx-badge`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent) has [`icon`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=icon), [`value`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=value), and [`type`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=type) inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either [`default`](mcp:get_api_reference?platform=angular&component=Type&member=default), [`info`](mcp:get_api_reference?platform=angular&component=Type&member=info), [`success`](mcp:get_api_reference?platform=angular&component=Type&member=success), [`warning`](mcp:get_api_reference?platform=angular&component=Type&member=warning), or [`error`](mcp:get_api_reference?platform=angular&component=Type&member=error). Depending on the type, a specific background color is applied. + display: grid; + grid-auto-flow: column; + place-content: center; + place-items: center; + column-gap: rem(40px); + min-height: 8.5rem; +} -In our sample, [`icon`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=icon) and [`type`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=type) are bound to model properties named _icon_ and _type_. +igx-badge { + --ig-size: var(--ig-size-small); -Next, we're adding the contacts in our template: + position: absolute; + inset-block-start: anchor(14.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} -```html - - - - - Team Members (4) - - -
-
- - -
-
- {{ member.name }} -
-
- - -``` - -We're going to create our members in the typescript file like this: +igx-avatar.icon-anchor { + --ig-avatar-background: var(--ig-gray-300); +} -```typescript -// contacts.component.ts - -... - public members: Member[] = [ - new Member('Terrance Orta', 'online'), - new Member('Donna Price', 'online'), - new Member('Lisa Landers', 'away'), - new Member('Dorothy H. Spencer', 'offline'), - ]; +$anchors: icon, avatar; -``` +@each $anchor in $anchors { + $i: list.index($anchors, $anchor); -```typescript + .#{$anchor}-anchor { + anchor-name: --#{$anchor}; + } -... -class Member { - public name: string; - public status: string; - public type: string; - public icon: string; - - constructor(name: string, status: string) { - this.name = name; - this.status = status; - switch (status) { - case 'online': - this.type = 'success'; - this.icon = 'check'; - break; - case 'away': - this.type = 'warning'; - this.icon = 'schedule'; - break; - case 'offline': - this.type = 'error'; - this.icon = 'remove'; - break; - } + :host > igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$anchor}; } } -``` -Position the badge in its parent container: +.notifications-card, +.nav-card { + background: var(--ig-surface-500); + border-radius: rem(4px); + box-shadow: 0 rem(1px) rem(3px) hsl(from var(--ig-gray-900) h s l / 0.12); +} -```css -/* contacts.component.css */ +.notifications-card { + min-width: rem(270px); + padding-block: rem(8px); +} + +.notification-row { + @include type-style("body-2") { + margin: 0; + } -.wrapper { display: flex; - flex-direction: row; + align-items: center; + gap: rem(8px); + padding: rem(8px) rem(12px); + color: var(--ig-gray-900); +} + +.row-indicator { + display: inline-flex; + justify-content: center; + width: rem(12px); +} + +.row-title { + flex: 1; } -.contact-name { +.unread { + color: var(--ig-gray-900); font-weight: 600; } -.contact-container { - margin-left: 20px; +.row-chevron { + color: var(--ig-gray-600); + font-size: rem(18px); } -.badge-style { - position: absolute; - bottom: 2.5px; - left: 40px; +.nav-card { + display: flex; + align-items: center; + gap: rem(8px); + padding: rem(8px) rem(12px); } -``` +.nav-item { + @include type-style("caption") { + margin: 0; + } + + display: flex; + flex-direction: column; + align-items: center; + gap: rem(4px); + min-width: rem(56px); + color: var(--ig-gray-700); + + &.active { + color: var(--sample-accent); + } +} -If the sample is configured properly, a list of members should be displayed and every member has an avatar and a badge, showing its current state. +.nav-icon { + position: relative; + display: inline-flex; - - + igx-badge { + position: absolute; + inset-block: rem(-2px) auto; + inset-inline: auto rem(-6px); + } +} +``` -## Styling +### Size -### Badge Theme Property Map - -Changing the `$background-color` property automatically updates the following dependent properties: - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$background-color$icon-colorThe color used for icons in the badge.
$text-colorThe color used for text in the badge.
- -To get started with styling the badges, we need to import the `index` file, where all the theme functions and component mixins live: +Control the Badge size with the `--size` CSS variable. For text badges smaller than `16px`, also adjust the font size and line height: ```scss -@use "igniteui-angular/theming" as *; +igx-badge { + --size: 12px; -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; + font-size: calc(var(--size) / 2); + line-height: normal; +} ``` -Following the simplest approach, we create a new theme that extends the [`badge-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-badge-theme) and accepts some parameters that style the badge's items. When you set the `$background-color`, the `$icon-color` and `$text-color` are automatically assigned based on which offers better contrast—black or white. Note that the `$border-radius` property only takes effect when the badge's `shape` is set to `square`. +```typescript +import { Component } from '@angular/core'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; -```scss -$custom-badge-theme: badge-theme( - $background-color: #57a5cd, - $border-radius: 4px -); +@Component({ + selector: 'app-badge-size', + templateUrl: './badge-size.component.html', + styleUrls: ['./badge-size.component.scss'], + imports: [IgxBadgeComponent] +}) +export class BadgeSizeComponent { } ``` +```html +Small + + + -To include the new theme we use the `tokens` mixin: +Medium + + + +Large + + + +``` ```scss +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; + :host { - @include tokens($custom-badge-theme); + display: grid; + grid-template-columns: rem(80px) rem(32px) rem(40px) rem(40px); + place-content: center; + place-items: center; + column-gap: rem(8px); + row-gap: rem(40px); + padding: rem(32px); } -``` - -### Demo - - +span { + justify-self: end; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); -### Styling with Tailwind + @include type-style("body-2") { + margin: 0; + } +} -You can style the `badge` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +$sizes: small, medium, large; -Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: +@each $size in $sizes { + $i: list.index($sizes, $size); -```scss -@import "tailwindcss"; -... -@use 'igniteui-theming/tailwind/utilities/material.css'; + igx-badge:nth-of-type(n + #{($i - 1) * 3 + 1}):nth-of-type(-n + #{$i * 3}) { + --ig-size: var(--ig-size-#{$size}); + } +} ``` -The utility file includes both `light` and `dark` theme variants. - -- Use `light-*` classes for the light theme. -- Use `dark-*` classes for the dark theme. -- Append the component name after the prefix, e.g., `light-badge`, `dark-badge`. +### Shape -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). - -You can find the full list of properties in the [badge-theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-badge-theme). The syntax is as follows: +The Badge shape can be set to `rounded` (the default) or `square` with the [`shape`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=shape) attribute. ```html - - + ``` ->[!NOTE] ->The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. - -At the end your badges should look like this: - -
- -
- -## API References +```typescript +import { Component } from '@angular/core'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; -
+@Component({ + selector: 'app-badge-shape', + templateUrl: './badge-shape.component.html', + styleUrls: ['./badge-shape.component.scss'], + imports: [IgxBadgeComponent] +}) +export class BadgeShapeComponent { } +``` +```html +Rounded + + + + +Square + + + +``` +```scss +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; -- [IgxAvatarComponent](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent) -- [IgxBadgeComponent](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent) -- [IgxBadgeComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-badge-theme) -- [IgxListComponent](mcp:get_api_reference?platform=angular&component=IgxListComponent) -- [IgxListItemComponent](mcp:get_api_reference?platform=angular&component=IgxListItemComponent) -- [IgxBadgeType](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#IgxBadgeType) +:host { + display: grid; + grid-template-columns: rem(80px) rem(40px) rem(40px) rem(40px); + place-content: center; + place-items: center; + column-gap: rem(8px); + row-gap: rem(40px); + min-height: 8.5rem; +} -## Theming Dependencies +span { + justify-self: end; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); -- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) + @include type-style("body-2") { + margin: 0; + } +} -## Additional Resources +$sizes: small, medium, large; + +@each $size in $sizes { + $i: list.index($sizes, $size); + + igx-badge:nth-of-type(3n + #{$i}) { + --ig-size: var(--ig-size-#{$size}); + } +} +``` + +When the Badge has a `square` shape, it can be further customized by setting a custom border radius using the `--border-radius` CSS variable. + +### Variants + +The Angular Badge supports the Primary, Info, Success, Warn, and Error types. Set the [`type`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=type) attribute to select a type. + +```html + +``` + +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + +@Component({ + selector: 'app-badge-variants', + styleUrls: ['./badge-variants.component.scss'], + templateUrl: './badge-variants.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeVariantsComponent { } +``` +```html + + +Primary + + + +Info + + + +Success + + + +Warn + + + +Error +``` +```scss +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; + +$variants: primary, info, success, warning, error; + +:host { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-content: center; + place-items: center; + column-gap: rem(40px); + row-gap: rem(12px); + min-height: 8.5rem; + padding: rem(32px); +} + +igx-avatar { + grid-row: 1; +} + +span { + grid-row: 2; + text-align: center; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); + + @include type-style("body-2") { + margin: 0; + } +} + +igx-badge { + --ig-size: var(--ig-size-small); + + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} + +@each $variant in $variants { + $i: list.index($variants, $variant); + + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$variant}; + } + + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$variant}; + } +} +``` + +### Outlined + +The badge can also have a subtle border around it when the [`outlined`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=outlined) attribute is set. + +```html + +``` + +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper'; + +@Component({ + selector: 'app-badge-outlined', + styleUrls: ['./badge-outlined.component.scss'], + templateUrl: './badge-outlined.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent, IGX_STEPPER_DIRECTIVES] +}) + +export class BadgeOutlinedComponent { + public steps = [ + { index: 1, label: 'Orders', completed: true, active: false, flagged: false }, + { index: 2, label: 'Payment', completed: false, active: true, flagged: true }, + { index: 3, label: 'Shipping', completed: false, active: false, flagged: false } + ]; +} +``` +```html + + + + + + + + @for (step of steps; track step.label) { + + + {{ step.index }} + {{ step.label }} + + } + + +``` +```scss +@use "sass:list"; +@use "igniteui-theming/sass" as *; + +:host { + display: grid; + grid-auto-flow: column; + place-content: center; + place-items: center; + column-gap: rem(60px); + min-height: 100vh; + padding-inline: rem(16px); + + ::ng-deep { + // NOTE! This is just for the sake of the sample, don't do this in your app. + // The stepper body is where the content for each step goes, and it should be visible. + // This sample doesn't have any content, so we hide it to avoid the empty space. + .igx-stepper__body { + display: none; + } + } +} + +.icon-anchor { + --ig-avatar-background: #{color($color: gray, $variant: 900, $opacity: 0.08)}; +} + +igx-badge { + --ig-size: var(--ig-size-small); + + position: absolute; + inset-block-start: anchor(14.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; + + &:nth-of-type(2) { + inset-block-start: anchor(85.5%); + } +} + +$anchors: icon, initials, flagged; + +@each $anchor in $anchors { + $i: list.index($anchors, $anchor); + + .#{$anchor}-anchor { + anchor-name: --#{$anchor}; + } + + :host > igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$anchor}; + } +} + +igx-stepper { + --ig-stepper-step-separator-style: dashed; + --ig-stepper-step-separator-color: var(--ig-gray-400); + + inline-size: rem(320px); +} + +span[igxStepIndicator] { + display: grid; + place-items: center; + inline-size: 100%; + block-size: 100%; +} +``` + +### Do/Don't + +**When to use:** Use a Badge to communicate a short status, category, count, or notification state alongside another component. Use `dot` when the indicator does not need visible text. + +**When not to use:** Do not use a Badge as the primary control for an action, as a replacement for a form validation message, or when the status cannot be understood from the badge content, surrounding context, or accessible labeling. + +
+ + + + + + + + + + + + + +
DoDon't
+
+ +## Properties + +The Angular Badge exposes platform-specific properties for controlling its content, appearance, and indicator behavior. + +The Angular Badge exposes the following properties. Use the API reference for the complete type definitions. + +| name | type | default | description | +| --- | --- | --- | --- | +| [`dot`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=dot) | boolean | `false` | Renders the Badge as a dot indicator without content. | +| [`outlined`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=outlined) | boolean | `false` | Displays an outline around the Badge. | +| [`shape`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=shape) | BadgeShape | `rounded` | Sets the Badge shape. | +| [`type`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=type) | BadgeType | `default` | Sets the Angular Badge stylistic type. | +| [`cssClass`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=cssClass) | string | — | Applies a custom CSS class. | + +## Styling + +The Angular Badge uses the [`IgxBadge`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent) component's `base` CSS part and documented styling variables to customize its appearance. + +### Sass Theming + +Use the Ignite UI for Angular theme system to style the Badge consistently with the rest of your application. + +### CSS Variables + +| variable | what it changes | +| --- | --- | +| `--background-color` | The badge background color. | +| `--border-color` | The badge border color. | +| `--border-radius` | The badge corner radius. | +| `--elevation` | The badge shadow. | +| `--icon-color` | The badge icon color. | +| `--text-color` | The badge text color. | +| `--size` | The badge size. | +| `--dot-size` | The size of the dot-type badge. | + +### Style Parts + +| part | what it styles | +| --- | --- | +| `base` | The Badge root element. | + +```css +igc-badge::part(base) { + --background-color: var(--ig-error-A100); + --border-radius: 2px; +} +``` + +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + + +@Component({ + selector: 'app-badge-styling', + styleUrls: ['./badge-styling.component.scss'], + templateUrl: './badge-styling.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeStylingComponent { } +``` +```html + + + + + + + + + + + +``` +```scss +@use "sass:list"; +@use "sass:map"; +@use "igniteui-theming/sass/typography" as *; + +:host { + display: grid; + grid-auto-flow: column; + place-content: center; + place-items: center; + column-gap: rem(60px); + min-height: 7rem; +} + +igx-badge { + --ig-size: var(--ig-size-small); + + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} + +.avatar-green { + --ig-avatar-background: var(--ig-success-200); + --ig-avatar-icon-color: var(--ig-success-700); +} + +.avatar-pink { + --ig-avatar-background: #da64ff; + --ig-avatar-icon-color: var(--ig-gray-50); +} + +$badges: ( + teal: var(--ig-success-700), + amber: #c97c00, + magenta: #9c27b0, + lime: var(--ig-success-700), +); + +@each $name, $color in $badges { + $i: list.index(map.keys($badges), $name); + + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$name}; + } + + .badge-#{$name} { + --ig-badge-background-color: #{$color}; + + position-anchor: --#{$name}; + } +} +``` + +### Styling with Tailwind + +You can style the Badge using custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/tailwind) first. + +Along with the Tailwind import in your global stylesheet, include the utility file: + +```scss +@import "tailwindcss"; +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +Use `light-badge` and `dark-badge` for the light and dark theme variants. You can override the generated CSS variables with arbitrary properties: + +```html + + +``` + +The exclamation mark (`!`) ensures that the utility class takes precedence over the component's default theme. + +```typescript +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + + +@Component({ + selector: 'app-badge-tailwind-styling', + styleUrls: ['./badge-tailwind-styling.component.scss'], + templateUrl: './badge-tailwind-styling.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeTailwindStylingComponent { } +``` +```html + + + + + + + + + + + +``` +```scss +@use "sass:list"; +@use "igniteui-theming/sass/typography" as *; + +$anchors: close, volume, remove, check; + +:host { + display: grid; + grid-auto-flow: column; + place-content: center; + place-items: center; + column-gap: rem(48px); + min-height: 7rem; +} + +igx-badge { + --ig-size: var(--ig-size-small); + + position: absolute; + inset-block-start: anchor(85.5%); + inset-inline-start: anchor(85.5%); + translate: -50% -50%; +} + +@each $anchor in $anchors { + $i: list.index($anchors, $anchor); + + igx-avatar:nth-of-type(#{$i}) { + anchor-name: --#{$anchor}; + } + + igx-badge:nth-of-type(#{$i}) { + position-anchor: --#{$anchor}; + } +} +``` + +## Accessibility + +The Angular Badge is a non-interactive status visual that communicates a short count, state, or notification. -
+### Keyboard Interaction -Our community is active and always welcoming to new ideas. +The Badge does not receive focus, handle keyboard input, or expose component interaction events. + +| Key | Action | +| -- | -- | +| n/a | The Badge is not keyboard interactive. | + +### Screen Readers / ARIA + +The Badge host uses `role="status"` to expose its content as status information. + +- The component initializes with `role="status"` and `aria-label="badge"`. +- Angular derives `aria-roledescription` from the Badge type and its icon or value. Set the `label` input when `badge` is not a meaningful accessible name. +- Add a meaningful `label` for a Badge without text or a `dot` Badge when its status is not otherwise available to assistive technology. + +### Accessibility Compliance + +Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.md) topic. + +| Criterion | How the component complies | +| -- | -- | +| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) | The Badge exposes the semantic `status` role. The xplat implementation also exposes a role description based on the current variant; Angular exposes an accessible label and a role description based on its type and content. | + +Your responsibilities: + +- Provide an accessible name that explains the status when the Badge has no meaningful text, especially for `dot` Badges. +- Do not use Badge color as the only indication of status; pair it with text, an icon, or another accessible cue. +- Keep sufficient contrast between the Badge foreground and background when overriding theme styles. + +## Troubleshooting + +Use this section to check boundaries and common decisions before treating Badge as an interactive control or the only indication of status. + +### Why does my custom background color not change the Badge? + +The selected `variant` takes precedence over the `--background-color` CSS variable. To use a custom background color, avoid setting a variant that applies its own background color. + +### Why is my dot Badge not displaying content? + +The `dot` property renders the Badge as a minimal indicator and does not support content. Use a regular Badge when you need to display text or other inline content. + +### Known Limitations + +The Angular Badge has the following platform-independent limitations. + +- A dot Badge is an indicator only and cannot display text or an icon. +- Badge styling and variant/type names differ between Angular and the other supported frameworks. Use the platform-specific examples and API links on this page rather than copying an attribute between frameworks. +- The Badge is a visual status indicator and does not provide keyboard interaction of its own. + +## API References + +The Angular Badge API reference lists the complete verified API surface for the target platform. +[`IgxBadge`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent) + +## Dependencies + +The Angular Badge requires a theme stylesheet to apply its visual styling. See the framework-specific setup in **Getting Started**. + +## Additional Resources + +The following resources provide additional Angular Badge guidance and project support. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) + +## Related Components + +The Angular Badge is commonly used with related components such as Avatar when a status indicator belongs to another visual element. + +- [Avatar](../layouts/avatar.md) — combine an Avatar with a Badge to show a status indicator. + +## FAQ + + **Q: Can a Badge display both an icon and text?** + + Yes. Use the Badge's content area for the text and the supported icon content for the visual indicator. Keep the combination short so it remains a compact status or category label. + + + **Q: How do I display a notification dot without content?** + + Set the platform-specific `dot` property or attribute. A dot Badge intentionally renders without text or other content. + + + **Q: When should I use a dot Badge instead of a text Badge?** + + Use a dot Badge when the status is communicated by presence alone. Use a text Badge when users need the status, category, or count to be understandable without relying on color or position. + + + **Q: Which package should I install for Badge?** + + Use `igniteui-angular` for Angular, `igniteui-react` for React, `igniteui-webcomponents` for Web Components, and `IgniteUI.Blazor` for Blazor. Keep related Ignite UI packages on the same release version. + + diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md index 4152e99b3..f1eee95f6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md @@ -1,14 +1,17 @@ --- title: Angular Banner Component – Ignite UI for Angular | Infragistics | MIT license -_description: Easily integrate a short, non-intrusive message (along with optional actions) using Ignite UI for Angular Banner component. -_keywords: Angular Banner component, Angular Banner control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Angular UI Components -_license: MIT +description: Easily integrate a short, non-intrusive message (along with optional actions) using Ignite UI for Angular Banner component. +keywords: Angular Banner component, Angular Banner control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Angular UI Components +license: MIT +llms: + description: "Angular Banner Component provides a way to easily display a prominent message to your application's users in a way that is less transient than a snackbar and less obtrusive than a dialog." _tocName: Banner --- - # Angular Banner Component Overview -

Angular Banner Component provides a way to easily display a prominent message to your application's users in a way that is less transient than a snackbar and less obtrusive than a dialog. The Banner can also be configured to display custom action buttons and an icon.

+
+Angular Banner Component provides a way to easily display a prominent message to your application's users in a way that is less transient than a snackbar and less obtrusive than a dialog. The Banner can also be configured to display custom action buttons and an icon. +
## Angular Banner Example @@ -59,7 +62,7 @@ export class BannerSample1Component implements OnInit {
``` -
+
## Getting Started with Ignite UI for Angular Banner @@ -69,7 +72,7 @@ To get started with the Ignite UI for Angular Banner component, first you need t ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.md) topic. The next step is to import the `IgxBannerModule` in your **app.module.ts** file. @@ -112,6 +115,10 @@ import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular/banner'; export class HomeComponent {} ``` + +**Note:** +This component uses Material Icons. Add the following link to your `index.html`: `` + Now that you have the Ignite UI for Angular Banner module or directives imported, you can start with a basic configuration of the `igx-banner` component. ## Using the Angular Banner Component @@ -121,7 +128,7 @@ Now that you have the Ignite UI for Angular Banner module or directives imported In order to display the banner component, use its [`open()`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=open) method and call it on a button click. The banner appears relative to where the element was inserted in the page template, moving all other content. It typically shows some non-intrusive content that requires minimal user interaction to be dismissed. ```html - +{/*banner.component.html*/} refresh ... @@ -131,22 +138,19 @@ In order to display the banner component, use its [`open()`](mcp:get_api_referen ``` -> [!NOTE] -> This component uses Material Icons. Add the following link to your `index.html`: `` - -> [!NOTE] -> The `IgxBannerModule` includes a default banner button `Dismiss`, which closes the banner. +**Note:** +The `IgxBannerModule` includes a default banner button `Dismiss`, which closes the banner. ## Examples -The [`IgxBannerComponent`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent) allows templating of its content while still sticking as closely as possible to the material design banner guidelines. +The [`IgxBanner`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent) allows templating of its content while still sticking as closely as possible to the material design banner guidelines. ### Changing the banner message Configuring the message displayed in the banner is easy - just change the content you are passing to the `igx-banner` tag. The text will show up in the specified banner area and the banner will use its default template when displaying it. Below, we will change the content of our sample banner to be a bit more descriptive: ```html - +{/*banner.component.html*/} You have lost connection to the internet. This app is offline. @@ -154,15 +158,15 @@ Configuring the message displayed in the banner is easy - just change the conten ### Adding an icon -An [`igx-icon`](icon.md) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message. +An [`igx-icon`](./icon.md) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message. -> [!NOTE] -> If several `igx-icon` elements are inserted as direct descendants of the banner, the banner will try to position all of them at the beginning. It is strongly advised to pass only one `igx-icon` directly to the banner. +**Note:** +If several `igx-icon` elements are inserted as direct descendants of the banner, the banner will try to position all of them at the beginning. It is strongly advised to pass only one `igx-icon` directly to the banner. To pass an `igx-icon` to you banner, simply insert it in the banner's content: ```html - +{/*banner.component.html*/} signal_wifi_off You have lost connection to the internet. This app is offline. @@ -172,7 +176,7 @@ To pass an `igx-icon` to you banner, simply insert it in the banner's content: If you want to use an `igx-icon` in your banner message, wrap it in a `span` tag: ```html - +{/*banner.component.html*/} You have lost connection to the internet. This app is offline. @@ -186,7 +190,7 @@ If you want to use an `igx-icon` in your banner message, wrap it in a `span` tag The `IgxBannerModule` exposes a directive for templating the banner buttons - [`IgxBannerActionsDirective`](mcp:get_api_reference?platform=angular&component=IgxBannerActionsDirective). This directive allows you to override the default banner button (`Dismiss`) and add user-defined custom actions. ```html - +{/*banner.component.html*/} signal_wifi_off You have lost connection to the internet. This app is offline. @@ -196,7 +200,6 @@ The `IgxBannerModule` exposes a directive for templating the banner buttons - [` ``` - ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; @@ -251,15 +254,14 @@ export class BannerSample2Component implements OnInit { ``` - ### Applying custom animations -The banner component comes with the [`animationSettings`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=animationSettings) property that allows applying custom opening and closing animations. Developers can choose between self-defined animations, and those from our [`Animation suite`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/animations). The default ones, used by the banner, are `growVerIn` for entering and `growVerOut` for exiting. +The banner component comes with the [`animationSettings`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=animationSettings) property that allows applying custom opening and closing animations. Developers can choose between self-defined animations, and those from our `Animation suite`. The default ones, used by the banner, are `growVerIn` for entering and `growVerOut` for exiting. Let's change the animations that our banner uses, so that it slides in and out: ```html - +{/*banner.component.html*/} ... @@ -281,7 +283,6 @@ export class MyBannerComponent { } ``` - ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; @@ -340,15 +341,14 @@ export class BannerSample3Component implements OnInit { ``` - ### Binding to events -The banner component emits events when changing its state - [`opening`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=opening) and [`opened`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=opened) are called when the banner is shown (before and after, resp.), while [`closing`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=closing) and [`closed`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=closed) are emitted when the banner is closed. The _ing_ events (`opening`, `closing`) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel `opening`, the banner's `open` method will not finish and the banner will not be shown. +The banner component emits events when changing its state - [`opening`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=opening) and [`opened`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=opened) are called when the banner is shown (before and after, resp.), while [`closing`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=closing) and [`closed`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=closed) are emitted when the banner is closed. The _ing_ events ([`opening`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=opening), [`closing`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=closing)) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel [`opening`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=opening), the banner's [`open()`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=open) method will not finish and the banner will not be shown. To cancel an event, bind it to the emitted object and set its `cancel` property to `true`. ```html - +{/*banner.component.html*/} ... @@ -365,15 +365,15 @@ export class MyBannerComponent { } ``` -> [!NOTE] -> If the changes above are applied, the banner will never open, as the opening event is always cancelled. +**Note:** +If the changes above are applied, the banner will never open, as the opening event is always cancelled. ## Advanced Example Let's create a banner with two custom buttons - one for dismissing the notification and one for turning on the connection. We can pass custom action handlers using the `igx-banner-actions` selector: ```html - +{/*banner.component.html*/} signal_wifi_off You have lost connection to the internet. This app is offline. @@ -384,15 +384,15 @@ Let's create a banner with two custom buttons - one for dismissing the notificat ``` -> [!NOTE] -> According to Google's [`Material Design`](https://material.io/design/components/banners.html#anatomy) guidelines, a banner should have a maximum of 2 buttons present. The `IgxBannerComponent` does not explicitly limit the number of elements under the `igx-banner-actions` tag, but it is strongly recommended to use up to 2 if you want to adhere to the material design guidelines. +**Note:** +According to Google's [`Material Design`](https://material.io/design/components/banners.html#anatomy) guidelines, a banner should have a maximum of 2 buttons present. The `IgxBannerComponent` does not explicitly limit the number of elements under the `igx-banner-actions` tag, but it is strongly recommended to use up to 2 if you want to adhere to the material design guidelines. The dismiss option (`'Continue Offline'`) doesn't need any further logic, so it can just call the `close()` method. The confirm action (`'Turn On Wifi'`), however, requires some additional logic, so we have to define it in the component. Then, we will create `onNetworkStateChange` Observable and subscribe to it. The last step is to call the `refreshBanner()` method on each change, which will toggle the banner depending on the `wifiState`. The banner will also have a WiFi icon in the navbar. As the subscription fires on any change of the `wifiState`, the icon will not only toggle the banner, but change according to the state of the connection: ```html - +{/*banner.component.html*/} {{ wifiState ? 'signal_wifi_4_bar' : 'signal_wifi_off' }} @@ -400,8 +400,7 @@ The banner will also have a WiFi icon in the navbar. As the subscription fires o ``` -Finally, we will add a `toast`, displaying a message about the WiFi state. The results of the templated banner can be seen in the demo below: - +Finally, we will add a [`IgxToast`](mcp:get_api_reference?platform=angular&component=IgxToastComponent), displaying a message about the WiFi state. The results of the templated banner can be seen in the demo below: ```typescript import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; @@ -495,7 +494,6 @@ export class BannerAdvancedSampleComponent implements OnInit, OnDestroy { ``` - ## Styling First, in order to use the functions exposed by the theme engine, we need to import the index file in our style file: @@ -507,7 +505,7 @@ First, in order to use the functions exposed by the theme engine, we need to imp // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`banner-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-banner-theme) and specifying just the `$banner-background`. Based on this value, the `$banner-message-color` and `$banner-illustration-color` are automatically set to black or white, depending on which provides better contrast with the background. +Following the simplest approach, we create a new theme that extends the `banner-theme` and specifying just the `$banner-background`. Based on this value, the `$banner-message-color` and `$banner-illustration-color` are automatically set to black or white, depending on which provides better contrast with the background. ```scss $custom-banner-theme: banner-theme( @@ -515,8 +513,8 @@ $custom-banner-theme: banner-theme( ); ``` ->[!NOTE] ->Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) and [`color`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. +**Note:** +Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the `palette` and `color` functions. Please refer to [`Palettes`](./themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to pass the custom banner theme: @@ -633,35 +631,33 @@ igx-banner { } ``` - -
+
## API Reference -
+
-- [IgxBannerComponent](mcp:get_api_reference?platform=angular&component=IgxBannerComponent) -- [IgxBannerActionsDirective](mcp:get_api_reference?platform=angular&component=IgxBannerActionsDirective) -- [IgxBannerComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-banner-theme) +- [`IgxBanner`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent) +- [`IgxBannerActionsDirective`](mcp:get_api_reference?platform=angular&component=IgxBannerActionsDirective) +- `IgxBannerComponent Styles` Additional components and/or directives with relative APIs that were used: -- [IgxCardComponent](mcp:get_api_reference?platform=angular&component=IgxCardComponent) -- [IgxIconComponent](mcp:get_api_reference?platform=angular&component=IgxIconComponent) -- [IgxNavbarComponent](mcp:get_api_reference?platform=angular&component=IgxNavbarComponent) -- [IgxToastComponent](mcp:get_api_reference?platform=angular&component=IgxToastComponent) +- [`IgxCard`](mcp:get_api_reference?platform=angular&component=IgxCardComponent) +- [`IgxIcon`](mcp:get_api_reference?platform=angular&component=IgxIconComponent) +- [`IgxNavbar`](mcp:get_api_reference?platform=angular&component=IgxNavbarComponent) +- [`IgxToast`](mcp:get_api_reference?platform=angular&component=IgxToastComponent) ## Theming Dependencies -- [IgxIcon Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-icon-theme) -- [IgxButton Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) -- [IgxRipple Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-ripple-theme) -- [IgxExpansionPanel Theme](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-expansion-panel-theme) - +- `IgxIcon Theme` +- `IgxButton Theme` +- `IgxRipple Theme` +- `IgxExpansionPanel Theme` ## Additional Resources -
+
Our community is active and always welcoming to new ideas. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/breadcrumbs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/breadcrumbs.md new file mode 100644 index 000000000..a9506ea06 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/breadcrumbs.md @@ -0,0 +1,1133 @@ +--- +title: "Breadcrumbs" +description: "The Ignite UI for Angular Breadcrumbs component renders an ordered trail of navigation items separated by a configurable icon, communicating a user's location within a site's hierarchy and providing a way back to higher-level pages." +keywords: "Angular Breadcrumbs, Ignite UI for Angular, breadcrumb, navigation trail, current page, aria-current, separator, prefix, suffix" +license: MIT +mentionedTypes: ["Breadcrumbs", "Breadcrumb"] +relatedComponents: ["Navbar", "NavigationDrawer"] +last_updated: "2026-09-08" +llms: + description: "The Ignite UI for Angular Breadcrumbs component renders an ordered trail of navigation items separated by a configurable icon, communicating a user's location within a site's hierarchy and providing a way back to higher-level pages." +_tocName: Breadcrumbs +--- +# Breadcrumbs Component + +The Ignite UI for Angular Breadcrumbs component renders an ordered trail of navigation items separated by a configurable icon, communicating a user's location within a site's hierarchy and providing a way back to higher-level pages. + +## Live Demo + +The Angular Breadcrumbs demo shows a three-item trail with the current page marked at the end. + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcBreadcrumbComponent, IgcBreadcrumbsComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents'; + +defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent, IgcIconComponent); + +const homeIcon = + ''; +const notificationsIcon = + ''; + +if (typeof window !== 'undefined') { + registerIconFromText('home', homeIcon); + registerIconFromText('notifications', notificationsIcon); +} + +@Component({ + selector: 'app-breadcrumbs-overview', + styleUrls: ['./breadcrumbs-overview.component.scss'], + templateUrl: './breadcrumbs-overview.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class BreadcrumbsOverviewComponent { } +``` +```html + +``` +```scss +:host { + display: flex; + justify-content: center; + height: 100%; + align-items: center; + overflow: auto; + font-family: var(--ig-font-family); +} + +igc-breadcrumbs { + --ig-size: var(--ig-size-medium); +} + +@layer base { + a { + color: revert-layer; + } +} +``` + +## Anatomy + +The Angular Breadcrumbs component is a pair of elements - a container that manages shared state and renders as an ARIA list, and one or more item children that render arbitrary slotted content followed by a separator. + +**Breadcrumbs anatomy:** The Breadcrumbs component is composed of a container that renders an ARIA list and one or more items that render slotted content followed by a separator. + + + +1. Breadcrumbs Item: represents a single level within the breadcrumb trail
+2. Breadcrumbs Item Icon (optional): could be displayed on the right or on the left side of the label
+3. Separator: a visual element that divides individual items and indicates directionality within the hierarchy
+4. Current Item: represents the active level within the breadcrumb trail,typically non-clickable + +```text + + + ├── ::part(label) + │ ├── slot="prefix" // optional prefix content + │ ├── default slot // main content, typically + │ └── slot="suffix" // optional suffix content + └── ::part(separator) // hidden on the last item + └── slot="separator" // per-item override + + + + + + +``` + +## Getting Started + +To use the Angular Breadcrumbs, follow the [Ignite UI for Angular Getting Started](../general/getting-started.md) topic for the basic project setup, then register the components. + +The Breadcrumbs component requires `igniteui-webcomponents` 7.4.0 or later. + +Ignite UI for Angular renders the Breadcrumbs as a web component, so install `igniteui-webcomponents` in your Angular project: + +```cmd +npm install igniteui-webcomponents +``` + +Import [`IgcBreadcrumbsComponent`](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbsComponent), [`IgcBreadcrumbComponent`](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent), and a theme, then register both components: + +```ts +import { defineComponents, IgcBreadcrumbsComponent, IgcBreadcrumbComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent); +``` + +Add `CUSTOM_ELEMENTS_SCHEMA` to the Angular component that renders `igc-breadcrumbs`: + +```ts +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +@Component({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], +}) +``` + +Compose a trail by placing one breadcrumb item per level inside the Breadcrumbs container. Each item accepts arbitrary content in its default slot, most commonly an anchor that handles the navigation: + +```html + + Home + Products + Laptop + +``` + +## Usage + +### Current Page + +Mark the item that represents the currently viewed page with the [`current`](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent#current) property. The item reflects it as an attribute and sets `aria-current="page"`, so screen readers announce the current page. + +```html + + Home + Dashboard + +``` + +### Shared Separator + +Use the [`separator`](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbsComponent#separator) property on the container to set a shared separator icon for every item in the trail. The value is an icon name from the registered icon collection, and the container propagates it to each item. + +```html + + Home + Products + Laptops + Gaming Laptop + +``` + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcBreadcrumbComponent, IgcBreadcrumbsComponent, registerIconFromText } from 'igniteui-webcomponents'; + +defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent); + +const slashIcon = + ''; + +if (typeof window !== 'undefined') { + registerIconFromText('slash', slashIcon); +} + +@Component({ + selector: 'app-breadcrumbs-custom-separator', + styleUrls: ['./breadcrumbs-custom-separator.component.scss'], + templateUrl: './breadcrumbs-custom-separator.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class BreadcrumbsCustomSeparatorComponent { } +``` +```html + +``` +```scss +:host { + display: flex; + justify-content: center; + height: 100%; + align-items: center; + overflow: auto; +} + +igc-breadcrumbs { + --ig-size: var(--ig-size-medium); +} + +@layer base { + a { + color: revert-layer; + } +} +``` + +The trailing separator is automatically hidden on the last item in the trail, so you never need to omit it manually. + +### Per-Item Separator Override + +The separator can also be overridden for a single item by slotting content into that item's `separator` slot. This is useful for mixing text separators (such as `/` or `›`) with icons, or for using an entirely different separator at each boundary. + +```html + + + Home + / + + Settings + +``` + +### Prefix and Suffix Content + +Each breadcrumb item exposes `prefix` and `suffix` slots for supplementary content such as icons, badges, or status indicators around the main content. + +```html + + + + Home + + + Mail + + + Messages + + + Inbox + 3 + + +``` + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcBreadcrumbComponent, IgcBreadcrumbsComponent, IgcIconComponent, IgcBadgeComponent, registerIconFromText } from 'igniteui-webcomponents'; + +defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent, IgcIconComponent, IgcBadgeComponent); + +const homeIcon = + ''; + +if (typeof window !== 'undefined') { + registerIconFromText('home', homeIcon); +} + +@Component({ + selector: 'app-breadcrumbs-prefix-suffix', + styleUrls: ['./breadcrumbs-prefix-suffix.component.scss'], + templateUrl: './breadcrumbs-prefix-suffix.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class BreadcrumbsPrefixSuffixComponent { } +``` +```html + +``` +```scss +:host { + display: flex; + justify-content: center; + height: 100%; + align-items: center; + overflow: auto; +} + +igc-breadcrumbs { + --ig-size: var(--ig-size-medium); +} + +@layer base { + a { + color: revert-layer; + } + + * { + padding: revert-layer; + } +} +``` + +### Wrapping and Long Trails + +The container renders its items on a single wrapping row using flex layout. When a trail is longer than the available width, the items wrap to the next line automatically - no additional configuration is required. + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcBreadcrumbComponent, IgcBreadcrumbsComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent); + +@Component({ + selector: 'app-breadcrumbs-wrapping', + styleUrls: ['./breadcrumbs-wrapping.component.scss'], + templateUrl: './breadcrumbs-wrapping.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class BreadcrumbsWrappingComponent { } +``` +```html + +``` +```scss +:host { + display: flex; + justify-content: center; + height: 100%; + overflow: auto; + align-items: center; +} + +igc-breadcrumbs { + --ig-size: var(--ig-size-medium); + + max-width: 16rem; +} + +@layer base { + a { + color: revert-layer; + } +} +``` + +In Right-to-Left layouts, the separator icon is mirrored automatically without additional configuration, so a right-pointing chevron becomes left-pointing without changing the icon name. + +### Size + +Control the Breadcrumbs size by setting the `--ig-size` variable to one of three options: `--ig-size-small`, `--ig-size-medium`, or `--ig-size-large`. This can be used to adjust the text and icon sizes within the breadcrumbs, along with their paddings. + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcBreadcrumbComponent, IgcBreadcrumbsComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents'; + +defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent, IgcIconComponent); + +const homeIcon = + ''; +const notificationsIcon = + ''; + +if (typeof window !== 'undefined') { + registerIconFromText('home', homeIcon); + registerIconFromText('notifications', notificationsIcon); +} + +@Component({ + selector: 'app-breadcrumbs-sizes', + styleUrls: ['./breadcrumbs-sizes.component.scss'], + templateUrl: './breadcrumbs-sizes.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) + +export class BreadcrumbsSizesComponent { } +``` +```html + +``` +```scss +:host { + display: flex; + justify-content: center; + height: 100%; + align-items: center; + overflow: auto; +} + +.small { + --ig-size: var(--ig-size-small); +} + +.medium { + --ig-size: var(--ig-size-medium); +} + +.large { + --ig-size: var(--ig-size-large); + + margin-block-start: -0.25rem; +} + +span { + color: #7d8a96; + width: 3.75rem; + margin-inline-end: 2rem; + font-size: 0.875rem; + font-family: "Aktiv Grotesk", sans-serif; +} + +nav { + display: flex; + flex-direction: column; + gap: 1rem; +} + +@layer base { + a { + color: revert-layer; + } +} + +@media (width < 290px) { + span { + width: auto; + margin-inline-end: 1rem; + } +} +``` + +### States + +Breadcrumbs support various visual states such as `hover`, `focus`, `pressed`, and `disabled` and also combinations like `focus-hover` and `focus-pressed`. These states help indicate the current interaction status of each breadcrumb item. + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcBreadcrumbComponent, IgcBreadcrumbsComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents'; + +defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent, IgcIconComponent); + +const homeIcon = + ''; + +if (typeof window !== 'undefined') { + registerIconFromText('home', homeIcon); +} + +@Component({ + selector: 'app-breadcrumbs-states', + styleUrls: ['./breadcrumbs-states.component.scss'], + templateUrl: './breadcrumbs-states.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class BreadcrumbsStatesComponent { } +``` +```html + +``` +```scss +:host { + display: flex; + justify-content: center; + height: 100%; + max-height: 15rem; + padding-block-start: 1rem; + overflow: auto; +} + +igc-breadcrumbs { + --ig-size: var(--ig-size-medium); +} + +.state-hover { + igc-icon { + color: var(--hover-icon-color); + } + + a { + color: var(--hover-text-color); + } +} + +.state-focused { + igc-icon { + color: var(--focus-icon-color); + } + + a { + color: var(--focus-text-color); + text-decoration: underline var(--focus-underline-color); + } +} + +.state-pressed { + igc-icon { + color: var(--pressed-icon-color); + } + + a { + color: var(--pressed-text-color); + } +} + +.state-focused-hover { + igc-icon { + color: var(--focus-hover-icon-color); + } + + a { + color: var(--focus-hover-text-color); + text-decoration: underline var(--focus-hover-underline-color); + } +} + +.state-focused-pressed { + igc-icon { + color: var(--focus-pressed-icon-color); + } + + a { + color: var(--focus-pressed-text-color); + text-decoration: underline var(--focus-pressed-underline-color); + } +} + +.state-disabled { + igc-icon { + color: var(--disabled-icon-color); + } + + a { + color: var(--disabled-text-color); + } +} + +span { + color: #7d8a96; + font-size: 0.875rem; + margin-block-end: 1rem; + font-family: "Aktiv Grotesk", sans-serif; +} + +nav { + display: grid; + column-gap: 3rem; + row-gap: 1rem; +} + +igc-breadcrumbs { + flex-direction: column; + height: fit-content; +} + +igc-breadcrumbs:nth-of-type(-n+3) { + grid-row: 1; +} + +igc-breadcrumbs:nth-of-type(n+4) { + grid-row: 2; +} + +@media (width < 510px) { + :host { + max-height: unset; + } + + igc-breadcrumbs:nth-of-type(-n+3), + igc-breadcrumbs:nth-of-type(n+4) { + grid-row: unset; + } + + nav { + row-gap: 3rem; + } +} +``` + +### Do/Don't + +Use breadcrumbs to orient users in content-rich applications with three or more levels of hierarchy by providing a clear, low-friction path to navigate back to parent pages. Do not use breadcrumbs in flat, single-level site structures where they create unnecessary visual clutter, or in sequential step-by-step processes where progress indicators are required instead. + + + + + + + + + + + + + + + + +
+ +
+ Do + + Don't +
+ Use breadcrumbs for complex products where content is nested deeper than two levels. + + Avoid using breadcrumbs as primary navigation and if your hierarchy contains only one level. +
+ +## Properties + +The container exposes the shared separator, and each item exposes its state. + +**[`IgcBreadcrumbsComponent`](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbsComponent)** + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| [`separator`](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbsComponent#separator) | `string` | `'tree_expand'` | The icon name used as the default separator between items. Propagated to every item in the trail. | + +**[`IgcBreadcrumbComponent`](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent)** + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| [`current`](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent#current) | `boolean` | `false` | Marks the item as the current page and sets `aria-current="page"`. | +| [`disabled`](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent#disabled) | `boolean` | `false` | Disables the item, sets `aria-disabled="true"`, and removes the slotted content from the tab sequence. | + +## Styling + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcBreadcrumbComponent, IgcBreadcrumbsComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents'; + +defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent, IgcIconComponent); + +const musicNoteIcon = + ''; +const homeIcon = + ''; + +if (typeof window !== 'undefined') { + registerIconFromText('music_note', musicNoteIcon); + registerIconFromText('home', homeIcon); +} + +@Component({ + selector: 'app-breadcrumbs-styling', + styleUrls: ['./breadcrumbs-styling.component.scss'], + templateUrl: './breadcrumbs-styling.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class BreadcrumbsStylingComponent { } +``` +```html + +``` +```scss +igc-breadcrumbs { + --ig-breadcrumb-text-color: var(--ig-gray-900); + --ig-breadcrumb-icon-color: #8b5bb1; + --ig-breadcrumb-hover-text-color: var(--ig-gray-900); + --ig-breadcrumb-hover-icon-color: #8b5bb1; + --ig-breadcrumb-focus-text-color: var(--ig-gray-900); + --ig-breadcrumb-focus-icon-color: #8b5bb1; + --ig-breadcrumb-current-text-color: #8b5bb1; + --ig-breadcrumb-separator-color: #8b5bb1; + --ig-breadcrumb-focus-pressed-text-color: var(--ig-gray-900); + --ig-breadcrumb-focus-pressed-icon-color: #8b5bb1; + --ig-size: var(--ig-size-medium); +} + +:host { + display: flex; + justify-content: center; + height: 100%; + overflow: auto; + align-items: center; +} + +@layer base { + a { + color: revert-layer; + } +} +``` + +The Angular Breadcrumbs appearance is controlled through CSS variables, CSS parts, and the theming system. + +### Styling Variables + +| Variable | What it changes | +| -- | -- | +| `--ig-breadcrumb-text-color` | The text color of the breadcrumb. | +| `--ig-breadcrumb-icon-color` | The color of the breadcrumb icon. | +| `--ig-breadcrumb-current-text-color` | The text color of the currently selected breadcrumb item. | +| `--ig-breadcrumb-current-icon-color` | The icon color of the currently selected breadcrumb item. | +| `--ig-breadcrumb-pressed-text-color` | The text color of the breadcrumb when pressed. | +| `--ig-breadcrumb-pressed-icon-color` | The color of the breadcrumb icon when pressed. | +| `--ig-breadcrumb-hover-text-color` | The text color of the breadcrumb when hovered. | +| `--ig-breadcrumb-hover-icon-color` | The color of the breadcrumb icon when hovered. | +| `--ig-breadcrumb-focus-text-color` | The text color of the breadcrumb when focused. | +| `--ig-breadcrumb-focus-icon-color` | The color of the breadcrumb icon when focused. | +| `--ig-breadcrumb-focus-underline-color` | The text underline color of the breadcrumb on focus. Only used in the Material theme. | +| `--ig-breadcrumb-focus-border-color` | The focus border color. | +| `--ig-breadcrumb-focus-hover-text-color` | The text color of the breadcrumb when focused and hovered. | +| `--ig-breadcrumb-focus-hover-icon-color` | The color of the breadcrumb icon when focused and hovered. | +| `--ig-breadcrumb-focus-hover-underline-color` | The text underline color of the breadcrumb on focus and hover. Only used in the Material theme. | +| `--ig-breadcrumb-focus-pressed-text-color` | The text color of the breadcrumb when focused and pressed. | +| `--ig-breadcrumb-focus-pressed-icon-color` | The color of the breadcrumb icon when focused and pressed. | +| `--ig-breadcrumb-focus-pressed-underline-color` | The text underline color of the breadcrumb on focus and pressed. Only used in the Material theme. | +| `--ig-breadcrumb-disabled-text-color` | The text color of the breadcrumb when disabled. | +| `--ig-breadcrumb-disabled-icon-color` | The color of the breadcrumb icon when disabled. | +| `--ig-breadcrumb-separator-color` | The color of the breadcrumb separator. | + +### Style Parts + +**[`IgcBreadcrumbComponent`](https://www.infragistics.com/api/webcomponents/igniteui-webcomponents/latest/classes/IgcBreadcrumbComponent)** + +| Part | What it styles | +| -- | -- | +| `label` | The container wrapping the prefix, default, and suffix slots. | +| `separator` | The container wrapping the separator slot content. | + +### Sass Theming + +Use the `breadcrumb-theme` function for customizing the appearance of the Breadcrumbs through Sass. + +```scss +@use "igniteui-theming/sass/themes" as *; + +$my-breadcrumb-theme: breadcrumb-theme( + $text-color: #1E2125, + $icon-color: #8B5BB1 +); + +:root { + @include tokens($my-breadcrumb-theme); +} +``` + +### CSS Variables + +Set component CSS variables directly when you need local styling without a Sass build step. + +```css +igc-breadcrumbs { + --ig-breadcrumb-text-color: var(--ig-primary-50); + --ig-breadcrumb-icon-color: var(--ig-primary-200); + --ig-breadcrumb-separator-color: var(--ig-gray-200); +} + +igc-breadcrumb::part(label) { + padding-inline: 0.25rem; +} +``` + +### Styling with Tailwind + +Combine Tailwind utility classes with the Breadcrumbs CSS variables for utility-first styling. [Set up Tailwind](../themes/tailwind.md) with the Ignite UI theme first: + +```css +@import "tailwindcss/theme.css"; +@import "tailwindcss/utilities.css"; +``` + +```html + + Root + Current + +``` + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcBreadcrumbComponent, IgcBreadcrumbsComponent, registerIconFromText } from 'igniteui-webcomponents'; + +defineComponents(IgcBreadcrumbsComponent, IgcBreadcrumbComponent); + +const slashIcon = + ''; + +if (typeof window !== 'undefined') { + registerIconFromText('slash', slashIcon); +} + +@Component({ + selector: 'app-breadcrumbs-tailwind-styling', + styleUrls: ['./breadcrumbs-tailwind-styling.component.scss'], + templateUrl: './breadcrumbs-tailwind-styling.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class BreadcrumbsTailwindStylingComponent { } +``` +```html + +``` +```scss +:host { + display: flex; + justify-content: center; + height: 100%; + align-items: center; + overflow: auto; +} + +igc-breadcrumbs { + --ig-size: var(--ig-size-medium); +} + +@layer base { + a { + color: revert-layer; + } +} +``` + +The exclamation mark (`!`) gives the Tailwind utility precedence over the component's default styles. + +## Accessibility + +The Angular Breadcrumbs follows the ARIA breadcrumb navigation pattern. The container exposes the ARIA `list` role, each item exposes the `listitem` role, and the current item is announced with `aria-current="page"`. + +### Accessible Navigation Landmark + +Wrap the trail in a `