diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 83907292..e243ac1a 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -28,3 +28,8 @@ jobs: cache: 'npm' - run: npm ci - run: npm run build --if-present + env: + # The Angular build runs close to the runner's 16 GB. Its bundler (esbuild, a Go program) lets its heap + # grow far beyond its live data on a 4-vCPU runner; this soft limit makes the Go garbage collector + # keep it near 10 GiB. Only esbuild reads GOMEMLIMIT. + GOMEMLIMIT: 10GiB diff --git a/README.md b/README.md index 59602d4a..349a973e 100644 --- a/README.md +++ b/README.md @@ -148,3 +148,191 @@ Angular sales app example for summaries by region, product, and time periods, wi - Filtering - Resizing - Super Compact Mode + +--- + +## New Financial Portfolio + +**Description:** +An updated Angular financial portfolio app for tracking assets with profit and loss analysis. Live prices flash as they change, sparklines show each asset's trend, and a search box highlights matches across the grid. + +**Components Used:** +- Data Grid +- Sparkline +- Avatar +- Chip +- Button +- Icon +- Linear Progress Bar +- Input Group +- Excel Exporter Service +- CSV Exporter Service +- PDF Exporter Service + +**Features:** +- Live Data Updates +- Sorting +- Search Highlighting +- Column Hiding +- Column Pinning +- Exporting +- Conditional Cell Styling +- Light and Dark Themes + +--- + +## FinTech 100K + +**Description:** +A high-volume Angular trading grid that virtualizes 100,000 generated financial instruments across 41 columns, with Excel-style filtering, cell editing, three component sizes, light and dark themes, and Excel and PDF export. + +**Components Used:** +- Data Grid +- Select +- Date Picker +- Button Group +- Button +- Icon +- Excel Exporter Service +- PDF Exporter Service + +**Features:** +- Virtualization (100,000 rows) +- Row Selection +- Sorting +- Excel Style Filtering +- Cell Editing +- Column Moving +- Column Resizing +- Column Hiding +- Column Pinning +- Exporting +- Conditional Cell Styling +- Small, Medium and Large Sizes +- Light and Dark Themes + +--- + +## Sales KPI Dashboard + +**Description:** +A sales dashboard with KPI cards, revenue and deals charts, revenue by region, recent activity and a leaderboard of top performers. + +**Components Used:** +- Data Grid +- Category Chart +- Doughnut Chart +- Card +- List +- Avatar +- Badge +- Button +- Icon + +**Features:** +- KPI Cards +- Interactive Charts +- Responsive Layout +- Light and Dark Themes + +--- + +## New Fleet Management + +**Description:** +An updated fleet management app for vehicle acquisition, operations and maintenance. Each vehicle expands into a detail view with tabs for its details, trips, maintenance, costs and utilization charts. + +**Components Used:** +- Data Grid +- Category Chart +- Doughnut Chart +- Tabs +- Card +- Chip +- Badge +- Dialog +- Snackbar +- Action Strip +- Button Group +- Button +- Icon +- Input Group + +**Features:** +- Master-Detail View +- Sorting +- Search Highlighting +- Column Moving +- Column Hiding +- Column Pinning +- Advanced Filtering +- State Persistence +- Row Actions +- Small, Medium and Large Sizes +- Light and Dark Themes + +--- + +## FinTech Dock Manager + +**Description:** +A trading desk built in a Dock Manager: a watchlist, positions and order grids, financial charts, an order ticket and a live market feed. The panes can be docked, floated and hidden, and the layout is saved between visits. + +**Components Used:** +- Dock Manager +- Data Grid +- Financial Chart +- Navigation Drawer +- Tabs +- List +- Dialog +- Snackbar +- Simple Combo +- Select +- Switch +- Button Group +- Action Strip +- Chip +- Badge +- Avatar +- Linear Progress Bar +- Button +- Icon +- Input Group +- Excel Exporter Service +- CSV Exporter Service +- PDF Exporter Service + +**Features:** +- Live Data Updates (SignalR with a simulated fallback) +- Docking and Floating Panes +- Row Selection +- Sorting +- Filtering and Advanced Filtering +- Column Moving, Hiding and Pinning +- Summaries +- Exporting +- Layout Persistence +- Light and Dark Themes + +--- + +## Budget Planning Workbook + +**Description:** +A retail budget planning workbook in the Angular Spreadsheet: an .xlsx file with eight worksheets, loaded with the Excel library, with live formulas, conditional formatting, data validation, filterable tables and Excel charts. + +**Components Used:** +- Spreadsheet +- Spreadsheet Chart Adapter +- Excel Library + +**Features:** +- Excel Workbook Loading +- Formulas +- Cell Editing +- Conditional Formatting +- Data Validation +- Table Filtering and Sorting +- Frozen Panes +- Excel Charts diff --git a/angular.json b/angular.json index e6f22259..95109302 100644 --- a/angular.json +++ b/angular.json @@ -54,6 +54,30 @@ { "glob": "**/*", "input": "projects/fleet-management-grid/public" + }, + { + "glob": "**/*", + "input": "projects/finance-grid-new/public" + }, + { + "glob": "**/*", + "input": "projects/grid-fintech-100k/public" + }, + { + "glob": "**/*", + "input": "projects/sales-dashboard/public" + }, + { + "glob": "**/*", + "input": "projects/fleet-management-new/public" + }, + { + "glob": "**/*", + "input": "projects/grid-fintech-dock-manager/public" + }, + { + "glob": "**/*", + "input": "projects/excel/public" } ], "styles": [ @@ -705,6 +729,690 @@ } } }, + "finance-grid-new": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "projects/finance-grid-new", + "sourceRoot": "projects/finance-grid-new/src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": "dist/finance-grid-new", + "index": "projects/finance-grid-new/src/index.html", + "browser": "projects/finance-grid-new/src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "projects/finance-grid-new/tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/finance-grid-new/public" + } + ], + "styles": [ + "projects/finance-grid-new/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "server": "projects/finance-grid-new/src/main.server.ts", + "prerender": true, + "ssr": { + "entry": "projects/finance-grid-new/src/server.ts" + }, + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "11MB", + "maximumError": "12MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "10mb", + "maximumError": "11mb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "finance-grid-new:build:production" + }, + "development": { + "buildTarget": "finance-grid-new:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n" + }, + "test": { + "builder": "@angular/build:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "projects/finance-grid-new/tsconfig.spec.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/finance-grid-new/public" + } + ], + "styles": [ + "projects/finance-grid-new/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + } + } + } + }, + "grid-fintech-100k": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "projects/grid-fintech-100k", + "sourceRoot": "projects/grid-fintech-100k/src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": "dist/grid-fintech-100k", + "index": "projects/grid-fintech-100k/src/index.html", + "browser": "projects/grid-fintech-100k/src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "projects/grid-fintech-100k/tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/grid-fintech-100k/public" + } + ], + "styles": [ + "projects/grid-fintech-100k/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "server": "projects/grid-fintech-100k/src/main.server.ts", + "prerender": true, + "ssr": { + "entry": "projects/grid-fintech-100k/src/server.ts" + }, + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "11MB", + "maximumError": "12MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "10mb", + "maximumError": "11mb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "grid-fintech-100k:build:production" + }, + "development": { + "buildTarget": "grid-fintech-100k:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n" + }, + "test": { + "builder": "@angular/build:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "projects/grid-fintech-100k/tsconfig.spec.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/grid-fintech-100k/public" + } + ], + "styles": [ + "projects/grid-fintech-100k/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + } + } + } + }, + "sales-dashboard": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "projects/sales-dashboard", + "sourceRoot": "projects/sales-dashboard/src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": "dist/sales-dashboard", + "index": "projects/sales-dashboard/src/index.html", + "browser": "projects/sales-dashboard/src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "projects/sales-dashboard/tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/sales-dashboard/public" + } + ], + "styles": [ + "projects/sales-dashboard/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "server": "projects/sales-dashboard/src/main.server.ts", + "prerender": true, + "ssr": { + "entry": "projects/sales-dashboard/src/server.ts" + }, + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "11MB", + "maximumError": "12MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "10mb", + "maximumError": "11mb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "sales-dashboard:build:production" + }, + "development": { + "buildTarget": "sales-dashboard:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n" + }, + "test": { + "builder": "@angular/build:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "projects/sales-dashboard/tsconfig.spec.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/sales-dashboard/public" + } + ], + "styles": [ + "projects/sales-dashboard/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + } + } + } + }, + "fleet-management-new": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "projects/fleet-management-new", + "sourceRoot": "projects/fleet-management-new/src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": "dist/fleet-management-new", + "index": "projects/fleet-management-new/src/index.html", + "browser": "projects/fleet-management-new/src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "projects/fleet-management-new/tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/fleet-management-new/public" + } + ], + "styles": [ + "projects/fleet-management-new/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "server": "projects/fleet-management-new/src/main.server.ts", + "prerender": true, + "ssr": { + "entry": "projects/fleet-management-new/src/server.ts" + }, + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "11MB", + "maximumError": "12MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "10mb", + "maximumError": "11mb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "fleet-management-new:build:production" + }, + "development": { + "buildTarget": "fleet-management-new:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n" + }, + "test": { + "builder": "@angular/build:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "projects/fleet-management-new/tsconfig.spec.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/fleet-management-new/public" + } + ], + "styles": [ + "projects/fleet-management-new/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + } + } + } + }, + "grid-fintech-dock-manager": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "projects/grid-fintech-dock-manager", + "sourceRoot": "projects/grid-fintech-dock-manager/src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": "dist/grid-fintech-dock-manager", + "index": "projects/grid-fintech-dock-manager/src/index.html", + "browser": "projects/grid-fintech-dock-manager/src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "projects/grid-fintech-dock-manager/tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/grid-fintech-dock-manager/public" + } + ], + "styles": [ + "projects/grid-fintech-dock-manager/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "server": "projects/grid-fintech-dock-manager/src/main.server.ts", + "prerender": true, + "ssr": { + "entry": "projects/grid-fintech-dock-manager/src/server.ts" + }, + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "11MB", + "maximumError": "12MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "10mb", + "maximumError": "11mb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "grid-fintech-dock-manager:build:production" + }, + "development": { + "buildTarget": "grid-fintech-dock-manager:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n" + }, + "test": { + "builder": "@angular/build:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "projects/grid-fintech-dock-manager/tsconfig.spec.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/grid-fintech-dock-manager/public" + } + ], + "styles": [ + "projects/grid-fintech-dock-manager/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + } + } + } + }, + "excel": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "projects/excel", + "sourceRoot": "projects/excel/src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": "dist/excel", + "index": "projects/excel/src/index.html", + "browser": "projects/excel/src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "projects/excel/tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/excel/public" + } + ], + "styles": [ + "projects/excel/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "server": "projects/excel/src/main.server.ts", + "prerender": true, + "ssr": { + "entry": "projects/excel/src/server.ts" + }, + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "11MB", + "maximumError": "12MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "10mb", + "maximumError": "11mb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "excel:build:production" + }, + "development": { + "buildTarget": "excel:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular/build:extract-i18n" + }, + "test": { + "builder": "@angular/build:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "projects/excel/tsconfig.spec.json", + "inlineStyleLanguage": "scss", + "assets": [ + { + "glob": "**/*", + "input": "projects/excel/public" + } + ], + "styles": [ + "projects/excel/src/styles.scss" + ], + "scripts": [ + "./node_modules/hammerjs/hammer.min.js" + ], + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules" + ] + } + } + } + } + }, "column-chart": { "projectType": "application", "schematics": { diff --git a/azure-pipelines/igniteui-angular-grid-examples.yml b/azure-pipelines/igniteui-angular-grid-examples.yml index 56cc0495..1505d4fe 100644 --- a/azure-pipelines/igniteui-angular-grid-examples.yml +++ b/azure-pipelines/igniteui-angular-grid-examples.yml @@ -128,6 +128,10 @@ stages: - task: Npm@1 displayName: 'npm run build:ci' + env: + # Same soft limit as the GitHub workflow (.github/workflows/node.js.yml): it keeps the heap of the + # Go-based bundler (esbuild) near 10 GiB. + GOMEMLIMIT: 10GiB inputs: command: custom workingDir: '$(Build.SourcesDirectory)' diff --git a/package-lock.json b/package-lock.json index 2c33fdef..8bc221a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,13 +19,18 @@ "@angular/router": "^22.2.1", "@angular/ssr": "^22.1.6", "@igniteui/material-icons-extended": "^3.1.0", + "@microsoft/signalr": "^10.0.11", "express": "^5.1.0", "fflate": "^0.8.1", "hammerjs": "^2.0.8", "igniteui-angular": "~22.1.0", "igniteui-angular-charts": "^22.0.1", "igniteui-angular-core": "^22.0.1", + "igniteui-angular-excel": "^22.0.1", "igniteui-angular-maps": "^22.0.1", + "igniteui-angular-spreadsheet": "^22.0.1", + "igniteui-angular-spreadsheet-chart-adapter": "^22.0.1", + "igniteui-dockmanager": "^2.1.3", "igniteui-theming": "^27.5.1", "igniteui-webcomponents": "^7.3.0", "minireset.css": "~0.0.4", @@ -2972,6 +2977,49 @@ "win32" ] }, + "node_modules/@microsoft/signalr": { + "version": "10.0.11", + "resolved": "https://registry.npmjs.org/@microsoft/signalr/-/signalr-10.0.11.tgz", + "integrity": "sha512-FulOJ2EEtKvLQcswe/U7v8pzyXyk7Jua5xgWJPPwyQU/2Z9ORvKcVjyO75VvLsem+CJ1ORRexJ+7Bz1FCei2aw==", + "license": "MIT", + "dependencies": { + "abort-controller": "^3.0.0", + "eventsource": "^2.0.2", + "fetch-cookie": "^2.0.3", + "node-fetch": "^2.6.7", + "ws": "^7.5.10" + } + }, + "node_modules/@microsoft/signalr/node_modules/eventsource": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz", + "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==", + "license": "MIT", + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/@microsoft/signalr/node_modules/ws": { + "version": "7.5.13", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.13.tgz", + "integrity": "sha512-rsKI6xDBFVf4r/x8XyChGK04QR/XHroxs/jUcoWvtEZM8TPU/X/uIY9B1CsSzYws9ZJb/6bbBu7dPhFW00CAoA==", + "license": "MIT", + "engines": { + "node": ">=8.3.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/@modelcontextprotocol/sdk": { "version": "1.30.0", "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.30.0.tgz", @@ -4725,6 +4773,18 @@ "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/abort-controller": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", + "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==", + "license": "MIT", + "dependencies": { + "event-target-shim": "^5.0.0" + }, + "engines": { + "node": ">=6.5" + } + }, "node_modules/accepts": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", @@ -5478,7 +5538,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", - "dev": true, "license": "MIT" }, "node_modules/cors": { @@ -5962,6 +6021,15 @@ "node": ">= 0.6" } }, + "node_modules/event-target-shim": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz", + "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/eventemitter3": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", @@ -6337,6 +6405,16 @@ } } }, + "node_modules/fetch-cookie": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/fetch-cookie/-/fetch-cookie-2.2.0.tgz", + "integrity": "sha512-h9AgfjURuCgA2+2ISl8GbavpUdR+WGAM2McW/ovn4tVccegp8ZqCKWSBR8uRdM8dDNlx5WdKRWxBYUwteLDCNQ==", + "license": "Unlicense", + "dependencies": { + "set-cookie-parser": "^2.4.8", + "tough-cookie": "^4.0.0" + } + }, "node_modules/fflate": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", @@ -6861,6 +6939,29 @@ "@angular/core": "^22.0.0" } }, + "node_modules/igniteui-angular-excel": { + "version": "22.0.1", + "resolved": "https://registry.npmjs.org/igniteui-angular-excel/-/igniteui-angular-excel-22.0.1.tgz", + "integrity": "sha512-YhVHvAuA96Qx9UB29sJY1YLLCCWzgPEFl7VzJyA4bPxCtbUcAiybKLCItAPxtOcucI3JNTntUN/JatWwUzxG7w==", + "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)", + "dependencies": { + "jszip": "^3.1.5", + "pako": "^1.0.6", + "tslib": "^2.3.1" + }, + "peerDependencies": { + "@angular/common": "^22.0.0", + "@angular/compiler": "^22.0.0", + "@angular/core": "^22.0.0", + "igniteui-angular-core": "22.0.1" + } + }, + "node_modules/igniteui-angular-excel/node_modules/pako": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", + "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==", + "license": "(MIT AND Zlib)" + }, "node_modules/igniteui-angular-maps": { "version": "22.0.1", "resolved": "https://registry.npmjs.org/igniteui-angular-maps/-/igniteui-angular-maps-22.0.1.tgz", @@ -6876,6 +6977,40 @@ "igniteui-angular-core": "22.0.1" } }, + "node_modules/igniteui-angular-spreadsheet": { + "version": "22.0.1", + "resolved": "https://registry.npmjs.org/igniteui-angular-spreadsheet/-/igniteui-angular-spreadsheet-22.0.1.tgz", + "integrity": "sha512-nQ56SHpXWdAM4g1ItPAjHGxCwWvNovHgOZsVOPopsfzm6B6OdJz6XEmd/XlqTWIwLnu8XorDeKkt5PmgERMzYw==", + "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)", + "dependencies": { + "tslib": "^2.3.1" + }, + "peerDependencies": { + "@angular/common": "^22.0.0", + "@angular/compiler": "^22.0.0", + "@angular/core": "^22.0.0", + "igniteui-angular-core": "22.0.1", + "igniteui-angular-excel": "22.0.1" + } + }, + "node_modules/igniteui-angular-spreadsheet-chart-adapter": { + "version": "22.0.1", + "resolved": "https://registry.npmjs.org/igniteui-angular-spreadsheet-chart-adapter/-/igniteui-angular-spreadsheet-chart-adapter-22.0.1.tgz", + "integrity": "sha512-H+O5WkFAUcxDCcswN6KiG6izOxwZxEeOO/wemXF0t5ELFrYswO3bbV8EomUdlt5uBVZ4ZRbvqutwvqF3jYUERA==", + "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)", + "dependencies": { + "tslib": "^2.3.1" + }, + "peerDependencies": { + "@angular/common": "^22.0.0", + "@angular/compiler": "^22.0.0", + "@angular/core": "^22.0.0", + "igniteui-angular-charts": "22.0.1", + "igniteui-angular-core": "22.0.1", + "igniteui-angular-excel": "22.0.1", + "igniteui-angular-spreadsheet": "22.0.1" + } + }, "node_modules/igniteui-angular/node_modules/igniteui-theming": { "version": "28.1.1", "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-28.1.1.tgz", @@ -6900,6 +7035,28 @@ "url": "https://github.com/sponsors/colinhacks" } }, + "node_modules/igniteui-dockmanager": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/igniteui-dockmanager/-/igniteui-dockmanager-2.1.3.tgz", + "integrity": "sha512-s0PdbdArUrppIBm7LvXaDXN2UOkkF+ldwNlWAHeOT+5LCxh1K1dfKBWnqbuPNNvYHleeNSCM9rMAXGVrx9xPTA==", + "license": "SEE LICENSE IN LICENSE", + "dependencies": { + "igniteui-i18n-core": "^1.0.1", + "igniteui-trial-watermark": "^3.1.0", + "lit": "^3.3.0" + }, + "engines": { + "node": ">=20" + }, + "peerDependencies": { + "igniteui-i18n-resources": "^1.0.1" + }, + "peerDependenciesMeta": { + "igniteui-i18n-resources": { + "optional": true + } + } + }, "node_modules/igniteui-i18n-core": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.5.tgz", @@ -6985,6 +7142,12 @@ } } }, + "node_modules/immediate": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", + "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==", + "license": "MIT" + }, "node_modules/immutable": { "version": "5.1.9", "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz", @@ -7161,7 +7324,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", - "dev": true, "license": "MIT" }, "node_modules/isbinaryfile": { @@ -7398,6 +7560,24 @@ "html2canvas": "^1.0.0-rc.5" } }, + "node_modules/jszip": { + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.2.tgz", + "integrity": "sha512-3l+rb15IOWtUhU0H5MFqES/T6Kh7abYwjosBey/vD6hDt8zoEffkSC5Ws5SGtgVw3gBx2NEbhTeSW1+kWkpyTQ==", + "license": "(MIT OR GPL-3.0-or-later)", + "dependencies": { + "lie": "~3.3.0", + "pako": "~1.0.2", + "readable-stream": "~2.3.6", + "setimmediate": "^1.0.5" + } + }, + "node_modules/jszip/node_modules/pako": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", + "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==", + "license": "(MIT AND Zlib)" + }, "node_modules/karma": { "version": "6.4.4", "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.4.tgz", @@ -7837,6 +8017,15 @@ "node": ">=10" } }, + "node_modules/lie": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", + "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", + "license": "MIT", + "dependencies": { + "immediate": "~3.0.5" + } + }, "node_modules/lightningcss": { "version": "1.33.0", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz", @@ -8521,6 +8710,26 @@ "license": "MIT", "optional": true }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "license": "MIT", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/node-gyp-build-optional-packages": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz", @@ -9017,7 +9226,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", - "dev": true, "license": "MIT" }, "node_modules/proxy-addr": { @@ -9051,6 +9259,27 @@ } } }, + "node_modules/psl": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz", + "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==", + "license": "MIT", + "dependencies": { + "punycode": "^2.3.1" + }, + "funding": { + "url": "https://github.com/sponsors/lupomontero" + } + }, + "node_modules/psl/node_modules/punycode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", + "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/punycode": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", @@ -9084,6 +9313,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/querystringify": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", + "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", + "license": "MIT" + }, "node_modules/raf": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", @@ -9123,7 +9358,6 @@ "version": "2.3.8", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", - "dev": true, "license": "MIT", "dependencies": { "core-util-is": "~1.0.0", @@ -9139,7 +9373,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true, "license": "MIT" }, "node_modules/readdirp": { @@ -9193,7 +9426,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", - "dev": true, "license": "MIT" }, "node_modules/restore-cursor": { @@ -9962,6 +10194,18 @@ "node": ">= 18" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", + "license": "MIT" + }, + "node_modules/setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==", + "license": "MIT" + }, "node_modules/setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -10294,7 +10538,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, "license": "MIT", "dependencies": { "safe-buffer": "~5.1.0" @@ -10304,7 +10547,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true, "license": "MIT" }, "node_modules/string-width": { @@ -10444,6 +10686,45 @@ "node": ">=0.6" } }, + "node_modules/tough-cookie": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", + "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==", + "license": "BSD-3-Clause", + "dependencies": { + "psl": "^1.1.33", + "punycode": "^2.1.1", + "universalify": "^0.2.0", + "url-parse": "^1.5.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/tough-cookie/node_modules/punycode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", + "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/tough-cookie/node_modules/universalify": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz", + "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==", + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", + "license": "MIT" + }, "node_modules/tslib": { "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", @@ -10562,11 +10843,20 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/url-parse": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz", + "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", + "license": "MIT", + "dependencies": { + "querystringify": "^2.1.1", + "requires-port": "^1.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", - "dev": true, "license": "MIT" }, "node_modules/utils-merge": { @@ -11065,6 +11355,22 @@ "license": "MIT", "optional": true }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", + "license": "BSD-2-Clause" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "license": "MIT", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index dd0b625b..a2557790 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,12 @@ "start:hr": "ng serve --project=hr-portal -o", "start:sales": "ng serve --project=sales-grid -o", "start:fleet": "ng serve --project=fleet-management -o", + "start:fin-new": "ng serve --project=finance-grid-new -o", + "start:fintech-100k": "ng serve --project=grid-fintech-100k -o", + "start:sales-dashboard": "ng serve --project=sales-dashboard -o", + "start:fleet-new": "ng serve --project=fleet-management-new -o", + "start:fintech-dock": "ng serve --project=grid-fintech-dock-manager -o", + "start:excel": "ng serve --project=excel -o", "start:column-chart": "ng serve --project=column-chart -o", "start:bar-chart": "ng serve --project=bar-chart -o", "start:line-chart": "ng serve --project=line-chart -o", @@ -29,6 +35,12 @@ "build:fin": "ng build finance-grid", "build:hr": "ng build hr-portal", "build:sales": "ng build sales-grid", + "build:fin-new": "ng build finance-grid-new", + "build:fintech-100k": "ng build grid-fintech-100k", + "build:sales-dashboard": "ng build sales-dashboard", + "build:fleet-new": "ng build fleet-management-new", + "build:fintech-dock": "ng build grid-fintech-dock-manager", + "build:excel": "ng build excel", "build:column-chart": "ng build column-chart", "build:bar-chart": "ng build bar-chart", "build:line-chart": "ng build line-chart", @@ -53,13 +65,18 @@ "@angular/router": "^22.2.1", "@angular/ssr": "^22.1.6", "@igniteui/material-icons-extended": "^3.1.0", + "@microsoft/signalr": "^10.0.11", "express": "^5.1.0", "fflate": "^0.8.1", "hammerjs": "^2.0.8", "igniteui-angular": "~22.1.0", "igniteui-angular-charts": "^22.0.1", "igniteui-angular-core": "^22.0.1", + "igniteui-angular-excel": "^22.0.1", "igniteui-angular-maps": "^22.0.1", + "igniteui-angular-spreadsheet": "^22.0.1", + "igniteui-angular-spreadsheet-chart-adapter": "^22.0.1", + "igniteui-dockmanager": "^2.1.3", "igniteui-theming": "^27.5.1", "igniteui-webcomponents": "^7.3.0", "minireset.css": "~0.0.4", diff --git a/projects/excel/.claude/skills/igniteui-angular-components/SKILL.md b/projects/excel/.claude/skills/igniteui-angular-components/SKILL.md new file mode 100644 index 00000000..bf1ed95d --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-components/SKILL.md @@ -0,0 +1,82 @@ +--- +name: igniteui-angular-components +description: "Covers all non-grid Ignite UI for Angular UI components: application scaffolding and setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider), layout containers (tabs, stepper, accordion, splitter, navigation drawer), data-display components (list, tree, card, chips, carousel, paginator, progress indicators, chat), feedback overlays (dialog, snackbar, toast, banner), directives (button, icon button, button group, ripple, tooltip, drag-and-drop), Dock Manager, Layout Manager, Tile Manager, and Charts. Use when users ask about any Ignite UI Angular component that is NOT a data grid — such as forms, dropdowns, pickers, dialogs, navigation, lists, trees, cards, charts, or initial project setup. Do NOT use for data grids, tables, or tabular data — use igniteui-angular-grids instead. Do NOT use for theming or styling — use igniteui-angular-theming instead." +user-invocable: true +--- + +# Ignite UI for Angular — UI Components + +## Prerequisites +- Angular 20+ project +- `@angular/cli` installed +- `igniteui-angular` or `@infragistics/igniteui-angular` added to the project via `ng add igniteui-angular` (or the `@infragistics` variant) or `npm install` — see [Package Variants](#package-variants) below. +- A theme applied to the application (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md)). +- `provideAnimations()` in `app.config.ts` — **required before using any overlay or animated component** +- The **Ignite UI CLI MCP server** (`igniteui-cli`) is available as a tool provider + +> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** +> +> Before using any Ignite UI CLI MCP tools, you MUST verify the MCP server is available +> by calling `list_components`. If the tool is not available or the call fails, +> you MUST automatically configure it by following the setup process steps described below. +> +> After writing the file, inform the user that the MCP server has been +> configured and they may need to reload the editor for the tools to activate. +> Start the MCP server and wait for that MCP server to start before continuing the component-related work. +> Do NOT skip this step or ask the user to do it manually. + +## Setting Up the Ignite UI CLI MCP Server + +> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/mcp-setup.md`](./references/mcp-setup.md).** Read that file for editor-specific configuration steps and verification. + +## MANDATORY AGENT PROTOCOL — YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT + +**This file is a routing hub only. It contains NO code examples and NO API details.** + +> **DO NOT write any component selectors, import paths, input names, output names, or directive names from memory.** +> Component APIs change between versions. Anything generated without reading the reference files will be incorrect. + +You are **required** to complete ALL of the following steps before producing any component-related code or answer: + +**STEP 1 — Identify every component or feature involved.** +Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., a form inside a Dialog requires reading both `form-controls.md` AND `feedback.md`). + +**STEP 2 — Read every identified reference file in full (PARALLEL).** +Call `read_file` (or equivalent) on **all** reference files identified in Step 1 **in a single parallel batch** — do NOT read them one at a time sequentially. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file. + +**STEP 3 — Only then produce output.** +Base your code and explanation exclusively on what you read. If the reference files do not cover something, say so explicitly rather than guessing. + +### Task → Reference File + +| Task | Reference file to read | +|---|---| +| App setup, `app.config.ts` providers, `provideAnimations()`, entry-point imports, convenience directive arrays | [`references/setup.md`](./references/setup.md) | +| Input Group, Combo, Simple Combo, Select, Date Picker, Date Range Picker, Time Picker, Calendar, Checkbox, Radio, Switch, Slider, Autocomplete, reactive/template-driven forms | [`references/form-controls.md`](./references/form-controls.md) | +| Tabs, Bottom Navigation, Stepper, Accordion, Expansion Panel, Splitter, Navigation Drawer | [`references/layout.md`](./references/layout.md) | +| List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Indicators, Chat | [`references/data-display.md`](./references/data-display.md) | +| Dialog, Snackbar, Toast, Banner | [`references/feedback.md`](./references/feedback.md) | +| Button, Icon Button, Button Group, Ripple, Tooltip, Drag and Drop | [`references/directives.md`](./references/directives.md) | +| Layout Manager (`igxLayout`, `igxFlex` directives), Dock Manager (`igc-dockmanager` web component), Tile Manager (`igc-tile-manager` web component) | [`references/layout-manager.md`](./references/layout-manager.md) | +| Charts (Area, Bar, Column, Stock/Financial, Pie), chart configuration, chart features (animation, tooltips, markers, highlighting, zooming), data binding | [`references/charts.md`](./references/charts.md) | + +> **When in doubt, read more rather than fewer reference files.** The cost of an unnecessary file read is negligible; the cost of hallucinated API usage is a broken application. + +--- + +## Package Variants + +| Package | Install | Who uses it | +|---|---|---| +| `igniteui-angular` | `npm install igniteui-angular` | Open-source / community | +| `@infragistics/igniteui-angular` | Requires private `@infragistics` registry | Licensed / enterprise users | + +Both packages share **identical entry-point paths**. Check `package.json` and use that package name as the prefix for every import. Never import from the root barrel of either package. +Both packages can be added to the project using `@angular/cli` with the following commands: `ng add igniteui-angular` or `ng add @infragistics/igniteui-angular`. + +--- + +## Related Skills + +- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — Data Grids (Flat Grid, Tree Grid, Hierarchical Grid, Pivot Grid, Grid Lite) +- [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md) — Theming & Styling diff --git a/projects/excel/.claude/skills/igniteui-angular-components/references/charts.md b/projects/excel/.claude/skills/igniteui-angular-components/references/charts.md new file mode 100644 index 00000000..c11b0254 --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-components/references/charts.md @@ -0,0 +1,280 @@ +# Angular Charts Reference + +## Contents + +- [Overview](#overview) +- [General Chart Configuration](#general-chart-configuration) +- [Key Chart Features](#key-chart-features) +- [Chart Types Reference](#chart-types-reference) +- [Common API Members by Chart Type](#common-api-members-by-chart-type) +- [Import Paths](#import-paths) +- [Styling & Theming](#styling--theming) +- [Data Requirements](#data-requirements) +- [Documentation References](#documentation-references) + +## Overview + +Ignite UI for Angular Charts provides 65+ chart types for data visualization. Charts are packaged separately in `igniteui-angular-charts` (or `@infragistics/igniteui-angular-charts` for licensed users). +This reference gives high-level guidance on when to use each chart type, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart component or feature you're interested in. + +### Chart Component packages +- `igniteui-angular-charts` — Category Chart, Financial Chart, Data Chart, Pie Chart, and Sparkline components (NPM) +- `@infragistics/igniteui-angular-charts` — Licensed version with same API (ProGet) + +### Main Chart Components + +> **IMPORTANT — Not Standalone Components**: Chart components from `igniteui-angular-charts` are **NOT** Angular standalone components (they predate the standalone API). They must always be imported via their **NgModule**. Standalone Angular components (Angular 14+) can still import NgModules directly in their `imports` array — this is fully supported. + +| Component | NgModule to import | Description | +|---|---|---| +| `IgxCategoryChartComponent` | `IgxCategoryChartModule` | Simplified API for column, line, area, spline, StepLine/StepArea, point, waterfall | +| `IgxFinancialChartComponent` | `IgxFinancialChartModule` | Stock/candlestick charts with OHLC data | +| `IgxDataChartComponent` | `IgxDataChartModule` | Advanced: explicit axes, series, >65 chart types | +| `IgxPieChartComponent` | `IgxPieChartModule` | Part-to-whole pie and donut charts | +| `IgxDataPieChartComponent` | `IgxDataPieChartModule` | Simplified API for pie charts | +| `IgxLegendComponent` | `IgxLegendModule` | Shared legend component | +| `IgxSparklineComponent` | `IgxSparklineModule` | Compact inline chart for grid cells or small layouts | + +### When to use each: +- **Category Chart** → Use for simple area/column/line/spline/waterfall; let framework auto-configure +- **Financial Chart** → Use for stock data with time-series OHLC, indicators, volume +- **Data Chart** → Use for advanced scenarios: multiple axes, custom series combinations, stacked/scatter +- **Pie Chart** → Use for part-to-whole (segments sum to 100%) +- **Sparkline** → Use for compact inline visualization in grid cells, dashboards, or small-space layouts + +--- + +## General Chart Configuration + +### Chart Type Selection +- **Category Chart**: `chartType` property — type: `CategoryChartType` (Auto, Line, Area, Column, Spline, ...) +- **Financial Chart**: `chartType` property — type: `FinancialChartType` (Auto, Bar, Candle, ...) +- **Data Chart**: Configure explicit series (IgxAreaSeriesComponent, IgxBarSeriesComponent, IgxColumnSeriesComponent, etc.) +- **Sparkline**: `displayType` property — type: `SparklineDisplayType` (Line, Area, Column, WinLoss) +- **Pie Chart**: No chartType needed; inherent pie structure + +### Required Properties + +**IgxCategoryChartComponent** (simplest API; auto-detects numeric & string columns): +- `dataSource` — Data array (required) +- `chartType` — type: `CategoryChartType` +- Component auto-detects: first string column → X-axis labels, numeric columns → Y-axis data + +**IgxDataChartComponent** (advanced; requires explicit configuration): +- Data is bound on individual series via `itemsSource`, not on the chart itself +- `valueMemberPath` — Set on the series, not the chart +- Requires explicit axis and series components + +**IgxFinancialChartComponent** (stock data): +- `dataSource` — Data array with date + OHLC columns (chart auto-detects columns) +- `chartType` — type: `FinancialChartType` + +**IgxPieChartComponent**: +- `dataSource` — Data array +- `labelMemberPath` — Field with category labels +- `valueMemberPath` — Field with numeric values + +### Responsive & Sizing +- Set height/width on chart container (div, flexbox parent). The chart will render with 0px height if the container doesn't have a defined height. + +--- + +## Chart Types Reference + +### Area Chart (`IgxCategoryChartComponent`, `chartType: 'Area'`) +- **Use**: Trends over time, cumulative part-to-whole +- **Data**: X-axis categories, Y-axis numeric values +- **Variants**: Area, StepArea, Stacked Area, Stacked 100% Area +- **API**: `chartType`, `dataSource` (auto-detects numeric columns) +- **Best Practices**: + - Start Y-axis at 0 for accuracy + - Use transparent colors for overlaid series + - Order time-series left to right +- **Avoid**: More than 7-10 series (readability), when data values are similar (overlap) + +### Bar Chart (`IgxDataChartComponent`, `IgxBarSeriesComponent`) +- **Use**: Compare categories, show rankings, time-series changes +- **Data**: X-axis numeric, Y-axis categories (reversed from Column) +- **Variants**: Grouped Bar, Stacked Bar, Stacked 100% Bar, Polar Bar +- **Best Practices**: + - Start numeric axis at 0 + - Sort categories by value (ascending/descending) + - Right-align Y-axis labels +- **Avoid**: Too much data (axis becomes illegible), Time-series detail (use Line instead) + +### Column Chart (`IgxCategoryChartComponent`, `chartType: 'Column'`) +- **Use**: Compare categories, show distribution, time-series changes +- **Data**: X-axis categories, Y-axis numeric values +- **Variants**: Column, StackedColumn, Stacked100%Column, RangeColumn, WaterfallColumn +- **Best Practices**: + - Start Y-axis at 0 + - Order time-series left to right +- **Avoid**: Many series (>10) side-by-side (readability) +- **Related**: Bar Chart (horizontal equivalent, use `IgxDataChartComponent` + `IgxBarSeriesComponent`), Waterfall (show differences between values) + +### Stock Chart (`IgxFinancialChartComponent`) +- **Use**: Financial/OHLC data analysis, candlestick visualization, technical indicators +- **Data Structure**: + - **Required**: Date/time column, numeric value column(s) + - **For Candlestick**: Open, High, Low, Close (4 numeric columns) + - **With Volume**: Open, High, Low, Close, Volume (5 numeric columns) +- **Display Modes**: + - **Price Pane**: Show candlestick, OHLC bar, line (configurable via `chartType`) + - **Volume Pane**: Show trading volume (column, line, or area chart) + - **Indicator Pane**: Financial indicators (RSI, MACD, Bollinger Bands, etc.) + - **Zoom Pane**: Navigation slider to zoom/pan +- **Indicators**: RSI, MACD, Bollinger Bands, Force Index, Standard Deviation, and more +- **Features**: + - Crosshairs with value snapshots + - Trendlines and overlays + - Time-based filters (users can select 1M, 3M, 6M, YTD, 1Y, ALL) +- **Data Binding**: + - The Financial Chart auto-detects OHLC, Volume, and Date columns from the data source + - Data items should have properties named like `open`, `high`, `low`, `close`, `volume`, `date` (or similar) + - No explicit member path properties are needed on the chart component + +### Pie Chart (`IgxPieChartComponent` or `IgxDataPieChartComponent`) +- **Use**: Part-to-whole visualization (segments sum to 100%) +- **Data**: Category labels, numeric values +- **Variants**: Pie, Donut (ring), Radial Pie +- **Features**: + - Slice explosion (separate a slice from pie) + - Slice selection (single or multiple) + - Legends with custom item templates + - Animation on load + - "Others" category for small segments +- **Best Practices**: + - Use for small data sets (6-8 segments max) + - Arrange largest to smallest (clockwise from 12 o'clock) + - Ensure segments sum to 100% + - Use distinguishable colors +- **Avoid**: Many segments (>8), change over time (use Bar/Line instead), precise comparisons (Bar is better) + +### Sparkline (`IgxSparklineComponent`) +- **Use**: Compact inline data visualization in grid cells, dashboards, or small-space layouts +- **Data**: One-dimensional array with at least one numeric field +- **Variants**: Line, Area, Column, WinLoss +- **Features**: + - Configurable markers (All, Low, High, First, Last, Negative) + - Normal range — horizontal shaded band (`normalRangeMinimum`, `normalRangeMaximum`) + - Trendlines via `trendLineType` + - Unknown value plotting via `unknownValuePlotting` + - Tooltip support via `tooltipTemplate` +- **Best Practices**: + - Set explicit `height` and `width` on the component or its container (renders at 0px otherwise) + - Start Y-axis at 0 for accurate comparisons + - Use Line or Area type for trend visualization; Column for discrete comparisons; WinLoss for binary positive/negative + - When embedding in a grid cell, set compact dimensions (e.g. `height="40px"` `width="220px"`) +- **Avoid**: Detailed data analysis (use Category Chart or Data Chart), displaying many data labels (Sparkline only supports first/last X-axis labels and high/low Y-axis values) + +--- + +### Standalone component example + +```typescript +import { Component } from '@angular/core'; +import { + IgxCategoryChartModule, + CategoryChartType +} from 'igniteui-angular-charts'; + +@Component({ + selector: 'app-sales-chart', + imports: [ + IgxCategoryChartModule // ✅ Import the NgModule, NOT IgxCategoryChartComponent + ], + template: ` + + + ` +}) +export class SalesChartComponent { + data = [ + { month: 'Jan', revenue: 5000 }, + { month: 'Feb', revenue: 6500 }, + { month: 'Mar', revenue: 7200 } + ]; +} +``` + +### Common errors and fixes + +**Error 1: NG2011 — component not standalone** +``` +// ❌ WRONG: importing component directly +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; +@Component({ imports: [IgxCategoryChartComponent] }) + +// ✅ CORRECT: import the NgModule instead +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; +@Component({ imports: [IgxCategoryChartModule] }) +``` + +**Error 2: NG8002 — can't bind to property (incorrect inputs)** +``` +// ❌ WRONG: using IgxDataChartComponent or generic property names + + [valueMemberPath]="'value'" + [showDefaultTooltip]="true" + [transitionDuration]="400"> + +// ✅ CORRECT: use Category Chart's actual inputs + +``` + +**Key difference**: IgxCategoryChartComponent **auto-detects** numeric columns and requires minimal configuration. For fine-grained control over field mapping and series types, use `IgxDataChartComponent` instead (but it requires explicit series and axis components). + +--- + +## Styling & Theming + +### Color Customization +- **Series colors**: `brushes` (fill), `outlines` (border) +- **Marker colors**: `markerBrushes`, `markerOutlines` +- **Axis styles**: `xAxisMajorStroke`, `yAxisMajorStroke`, `xAxisLabelTextColor`, `yAxisLabelTextColor` +- **Tooltip**: Controlled via `toolTipType` and custom tooltip templates +- **Highlight**: `highlightingFadeOpacity` (opacity for faded non-highlighted series) + +### CSS & Host Binding +- Chart containers inherit CSS flex/grid properties +- Use host element width/height for responsive sizing +- Theme colors via `IgxTheme` palette + +--- + +## Data Requirements + +### Category Chart (Area, Column, Line, Point, Spline, StepLine, StepArea, Waterfall) +- Array or list of data items +- At least 1 numeric column (values) +- Optionally 1 string/date column (labels) +- Example: `[{ month: 'Jan', value: 100 }, { month: 'Feb', value: 150 }]` + +### Financial Chart (Stock) +- Array of data items with date/time column +- For Candlestick: 4 numeric columns (O, H, L, C) +- For Volume: 5 numeric columns (O, H, L, C, Volume) +- Example: `[{ date: '2024-01-01', open: 100, high: 120, low: 95, close: 115, volume: 1000 }]` + +### Pie Chart +- Array of data items +- 1 label column (category) +- 1 numeric column (value; segments should sum to 100%) +- Example: `[{ label: 'Category A', value: 30 }, { label: 'Category B', value: 70 }]` + +### Sparkline +- Array of data items (one-dimensional) +- At least 1 numeric field mapped via `valueMemberPath` +- Optionally 1 string field mapped via `labelMemberPath` (used for first/last X-axis labels) +- Example: `[{ label: 'Jan', value: 10 }, { label: 'Feb', value: 25 }, { label: 'Mar', value: 15 }]` diff --git a/projects/excel/.claude/skills/igniteui-angular-components/references/data-display.md b/projects/excel/.claude/skills/igniteui-angular-components/references/data-display.md new file mode 100644 index 00000000..4fbdf3f6 --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-components/references/data-display.md @@ -0,0 +1,359 @@ +# Data Display & Other UI Components + +> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.** +> For app setup, providers, and import patterns — see [`setup.md`](./setup.md). + +## Contents + +- [List](#list) +- [Tree](#tree) +- [Card](#card) +- [Chips](#chips) +- [Avatar & Badge](#avatar--badge) +- [Icon](#icon) +- [Carousel](#carousel) +- [Paginator](#paginator) +- [Progress Indicators](#progress-indicators) +- [Chat (AI Chat Component)](#chat-ai-chat-component) + +## Overview +This reference gives high-level guidance on when to use each data display component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in. + +## List + +```typescript +import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +``` + +```html + + Contacts + @for (contact of contacts; track contact.id) { + + + {{ contact.name }} + {{ contact.phone }} + phone + + } + +``` + +Auxiliary directives for list items: `igxListThumbnail`, `igxListAction`, `igxListLine`, `igxListLineTitle`, `igxListLineSubTitle`. + +## Tree + +```typescript +import { IGX_TREE_DIRECTIVES } from 'igniteui-angular/tree'; +``` + +```html + + @for (node of treeData; track node.id) { + + folder + {{ node.label }} + @for (child of node.children; track child.id) { + + description + {{ child.label }} + + } + + } + +``` + +Selection modes: `'None'`, `'BiState'`, `'Cascading'`. + +## Card + +```typescript +import { IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxCardMediaDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective } from 'igniteui-angular/card'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +``` + +```html + + + + + + + +

{{ article.title }}

+
{{ author.name }}
+
+ +

{{ article.excerpt }}

+
+ + + + +
+``` + +## Chips + +```typescript +import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; +``` + +```html + + @for (tag of tags; track tag) { + + {{ tag }} + + } + +``` + +## Avatar & Badge + +```typescript +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +``` + +```html + +
+ + +
+ + + + + + + + + +``` + +```scss +// Required styles to position the badge as an overlay on the avatar +.avatar-badge-container { + position: relative; + display: inline-flex; + + igx-badge { + position: absolute; + bottom: 0; + right: 0; + transform: translate(25%, 25%); + } +} +``` + +Avatar shapes: `'circle'`, `'rounded'`, `'square'`. Sizes: `'small'`, `'medium'`, `'large'`, or custom CSS. +Badge types: `'primary'`, `'info'`, `'success'`, `'warning'`, `'error'`. + +## Icon + +```typescript +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +``` + +```html + +settings +favorite + + + +``` + +Register custom SVG icons in a service or component constructor: + +```typescript +export class AppComponent { + constructor() { + const iconService = inject(IgxIconService); + // From inline SVG string + iconService.addSvgIconFromText('logo', '...', 'my-icons'); + // From URL + iconService.addSvgIcon('arrow', '/assets/icons/arrow.svg', 'my-icons'); + } +} +``` + +## Carousel + +```typescript +import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; +``` + +```html + + @for (slide of slides; track slide.id) { + + +
{{ slide.caption }}
+
+ } +
+``` + +> **AGENT INSTRUCTION:** Carousel uses Angular animations — ensure `provideAnimations()` is present in `app.config.ts`. + +## Paginator + +```typescript +import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +``` + +```html + + +``` + +> **NOTE:** For grid paging, attach `` inside the grid element. See [`../../igniteui-angular-grids/references/paging-remote.md`](../../igniteui-angular-grids/references/paging-remote.md) for grid-specific paging patterns. + +## Progress Indicators + +```typescript +import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar'; +import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; +``` + +```html + + + + + + + + + +``` + +Types for linear bar: `'default'`, `'info'`, `'success'`, `'warning'`, `'error'`. + +## Chat (AI Chat Component) + +```typescript +import { IgxChatComponent } from 'igniteui-angular/chat'; +``` + +```html + + + + + @if (message.sender !== 'user') { +
+ Developer Support +
+ } +
+ + + 💡 + + + +
+
+``` + +```typescript +import { IgxChatComponent, IgxChatMessageContextDirective, type IgxChatOptions } from 'igniteui-angular/chat'; +import { MarkdownPipe } from 'igniteui-angular/chat-extras'; + +@Component({ + selector: 'app-chat-features-sample', + styleUrls: ['./features-sample.component.scss'], + templateUrl: './features-sample.component.html', + imports: [IgxChatComponent, IgxChatMessageContextDirective, AsyncPipe, MarkdownPipe] +}) +export class ChatFeaturesSampleComponent { + private _messageHeader = viewChild.required('messageHeader'); + private _suggestionPrefix = viewChild.required('suggestionPrefix'); + private _messageContent = viewChild.required('messageContent'); + +... + + +public options = signal({ + disableAutoScroll: false, + disableInputAttachments: false, + inputPlaceholder: 'Type your message here...', + headerText: 'Developer Support', + suggestionsPosition: "below-input", + suggestions: [ 'Send me an e-mail when support is available.' ] + }); + + public templates = signal({}); + + constructor() { + effect(() => { + const messageHeader = this._messageHeader(); + const suggestionPrefix = this._suggestionPrefix(); + const messageContent = this._messageContent(); + + if (messageHeader && suggestionPrefix && messageContent) { + this.templates.set({ + messageHeader: messageHeader, + suggestionPrefix: suggestionPrefix, + messageContent: messageContent + }); + } + }); + } + + public onMessageCreated(e: any): void { + const newMessage = e; + this.messages.update(messages => [...messages, newMessage]); + this.options.update(options => ({ ...options, isTyping: true, suggestions: [] })); + + const responseMessage = { + id: Date.now().toString(), + text: 'Our support team is currently unavailable. We\'ll get back to you as soon as possible.', + sender: 'support', + timestamp: Date.now().toString() + }; + + this.draftMessage = { text: '', attachments: [] }; + this.messages.update(messages => [...messages, responseMessage]); + this.options.update(options => ({ ...options, isTyping: false })); + } +``` + +## See Also + +- [`setup.md`](./setup.md) — App providers, architecture, all entry points +- [`form-controls.md`](./form-controls.md) — Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider +- [`layout.md`](./layout.md) — Tabs, Stepper, Accordion, Splitter, Navigation Drawer +- [`feedback.md`](./feedback.md) — Dialog, Snackbar, Toast, Banner +- [`directives.md`](./directives.md) — Button, Ripple, Tooltip, Drag and Drop +- [`../../igniteui-angular-grids/references/paging-remote.md`](../../igniteui-angular-grids/references/paging-remote.md) — Grid-specific paginator usage diff --git a/projects/excel/.claude/skills/igniteui-angular-components/references/directives.md b/projects/excel/.claude/skills/igniteui-angular-components/references/directives.md new file mode 100644 index 00000000..2470fd8f --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-components/references/directives.md @@ -0,0 +1,272 @@ +# Directives + +> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.** +> For app setup, providers, and import patterns — see [`setup.md`](./setup.md). + +## Contents + +- [Button & Icon Button](#button--icon-button) +- [Button Group](#button-group) +- [Ripple Effect](#ripple-effect) +- [Tooltip](#tooltip) +- [Drag and Drop](#drag-and-drop) + +## Overview +This reference gives high-level guidance on when to use each directive, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific directive or feature you're interested in. + +## Button & Icon Button + +```typescript +import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +``` + +```html + + + + + + + + + + + + + +``` + +Button variants for `igxButton`: `'flat'`, `'contained'`, `'outlined'`, `'fab'`. +Button variants for `igxIconButton`: `'flat'`, `'outlined'`, `'contained'`. + +## Button Group + +```typescript +// Option A — convenience collection (includes IgxButtonGroupComponent + IgxButtonDirective) +import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group'; + +// Option B — individual imports +import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +import { IgxIconComponent } from 'igniteui-angular/icon'; +``` + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +```typescript +import { IButtonGroupEventArgs } from 'igniteui-angular/button-group'; + +onSelected(event: IButtonGroupEventArgs) { + console.log('Selected index:', event.index, 'button:', event.button); +} + +onDeselected(event: IButtonGroupEventArgs) { + console.log('Deselected index:', event.index); +} +``` + +**Key inputs on `igx-buttongroup`:** + +| Input | Type | Default | Description | +|---|---|---|---| +| `selectionMode` | `'single' \| 'singleRequired' \| 'multi'` | `'single'` | Selection behaviour. `singleRequired` prevents full deselection. | +| `alignment` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction of the buttons. | +| `disabled` | `boolean` | `false` | Disables every button in the group. | + +**Key outputs on `igx-buttongroup`:** + +| Output | Payload | Emits when | +|---|---|---| +| `(selected)` | `IButtonGroupEventArgs` | A button is selected. | +| `(deselected)` | `IButtonGroupEventArgs` | A button is deselected. | + +`IButtonGroupEventArgs`: `{ owner: IgxButtonGroupComponent; button: IgxButtonDirective; index: number }`, where `IgxButtonGroupComponent` is from `igniteui-angular/button-group` and `IgxButtonDirective` is from `igniteui-angular/directives` (see **Button & Icon Button** section above). + +**Key inputs on each ` + + + +``` + +## Ripple Effect + +```typescript +import { IgxRippleDirective } from 'igniteui-angular/directives'; +``` + +```html + + +
Interactive div
+``` + +Inputs: `[igxRipple]` (ripple color), `[igxRippleCentered]` (always start from center), `[igxRippleDisabled]`. + +```html + +``` + +## Tooltip + +```typescript +import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; +``` + +```html + +
Helpful tooltip text
+``` + +Inputs on `[igxTooltipTarget]`: `[showDelay]` (ms), `[hideDelay]` (ms), `[tooltipDisabled]`. + +Programmatic control via the target directive: + +```typescript +tooltipTarget = viewChild.required(IgxTooltipTargetDirective); + +show() { this.tooltipTarget().showTooltip(); } +hide() { this.tooltipTarget().hideTooltip(); } +``` + +## Drag and Drop + +```typescript +import { IgxDragDirective, IgxDropDirective, IDragMoveEventArgs, IDropDroppedEventArgs } from 'igniteui-angular/directives'; +``` + +### Basic drag and drop + +```html + +
+ drag_indicator + {{ item.name }} +
+ + +
+ Drop here +
+``` + +```typescript +onDrop(event: IDropDroppedEventArgs) { + const draggedItem = event.drag.data; + // Move draggedItem to this drop zone + event.cancel = false; // allow the drop +} +``` + +### Ghost element (custom drag preview) + +```html +
Drag me
+ + +
+ content_copy Moving... +
+
+``` + +### Reorderable list + +```html + + @for (item of items; track item.id) { + + drag_handle + {{ item.name }} + + } + +``` + +Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(ghostCreate)`, `(ghostDestroy)`, `(transitioned)`. +Key drop events: `(enter)`, `(leave)`, `(over)`, `(dropped)`. + +> **NOTE (optional):** For touch-based drag, install `hammerjs` and add it to the `scripts` array in `angular.json`. +> ```bash +> npm install hammerjs +> ``` +> ```json +> // angular.json — inside your project's architect.build.options +> "scripts": ["./node_modules/hammerjs/hammer.min.js"] +> ``` + +## See Also + +- [`setup.md`](./setup.md) — App providers, architecture, all entry points +- [`form-controls.md`](./form-controls.md) — Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider +- [`layout.md`](./layout.md) — Tabs, Stepper, Accordion, Splitter, Navigation Drawer +- [`data-display.md`](./data-display.md) — List, Tree, Card and other display components +- [`feedback.md`](./feedback.md) — Dialog, Snackbar, Toast, Banner diff --git a/projects/excel/.claude/skills/igniteui-angular-components/references/feedback.md b/projects/excel/.claude/skills/igniteui-angular-components/references/feedback.md new file mode 100644 index 00000000..dc69603e --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-components/references/feedback.md @@ -0,0 +1,144 @@ +# Feedback & Overlay Components + +> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.** +> For app setup, providers, and import patterns — see [`setup.md`](./setup.md). + +> **AGENT INSTRUCTION:** All components in this file rely on Angular animations and the Ignite UI overlay system. Before using any of them, ensure `provideAnimations()` (or `provideAnimationsAsync()`) is present in `app.config.ts`. If it is missing, add it — these components will throw runtime errors or silently fail to animate without it. + +## Contents + +- [Dialog](#dialog) +- [Snackbar](#snackbar) +- [Toast](#toast) +- [Banner](#banner) +- [Key Rules](#key-rules) + +## Overview +This reference gives high-level guidance on when to use each feedback and overlay component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in. + +## Dialog + +```typescript +import { IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective } from 'igniteui-angular/dialog'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +``` + +```html + + Confirm Delete +

Are you sure you want to delete this item? This action cannot be undone.

+
+ + +
+
+ + +``` + +Programmatic control: + +```typescript +dialog = viewChild.required('confirmDialog'); + +open() { this.dialog().open(); } +close() { this.dialog().close(); } +``` + +Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(leftButtonSelect)`, `(rightButtonSelect)`. + +## Snackbar + +```typescript +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +``` + +```html + + Item saved successfully + +``` + +Trigger in TypeScript: + +```typescript +snackbar = viewChild.required('snackbar'); + +save() { + this.dataService.save(this.item); + this.snackbar().open('Item saved'); // optional: pass message text +} +``` + +## Toast + +```typescript +import { IgxToastComponent } from 'igniteui-angular/toast'; +``` + +```html +Operation complete + + +``` + +Toast vs Snackbar: Toast is non-interactive (no action button), always auto-hides. Snackbar supports an action button and can be persistent. + +## Banner + +```typescript +import { IgxBannerComponent, IgxBannerActionsDirective } from 'igniteui-angular/banner'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +``` + +```html + + wifi_off + You are offline. Some features may not be available. + + + + + +``` + +Trigger in TypeScript: + +```typescript +banner = viewChild.required('banner'); + +showOfflineWarning() { this.banner().open(); } +hideWarning() { this.banner().close(); } +``` + +Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`. + +Banner always renders inline (not overlaid) — it pushes page content down when open. + +## Key Rules + +- **`provideAnimations()` is required** — add it to `app.config.ts` before using Dialog, Snackbar, Toast, or Banner +- **Dialog** uses the Ignite UI overlay system — set `[isModal]="true"` for blocking modals +- **Snackbar** vs **Toast**: Snackbar supports action buttons and can be persistent; Toast is always auto-hiding and non-interactive +- **Banner** renders **inline** (pushes content), not as an overlay — use Dialog for blocking prompts + +## See Also + +- [`setup.md`](./setup.md) — App providers, architecture, all entry points +- [`form-controls.md`](./form-controls.md) — Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider +- [`layout.md`](./layout.md) — Tabs, Stepper, Accordion, Splitter, Navigation Drawer +- [`data-display.md`](./data-display.md) — List, Tree, Card and other display components +- [`directives.md`](./directives.md) — Button, Ripple, Tooltip, Drag and Drop diff --git a/projects/excel/.claude/skills/igniteui-angular-components/references/form-controls.md b/projects/excel/.claude/skills/igniteui-angular-components/references/form-controls.md new file mode 100644 index 00000000..1ee597e5 --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-components/references/form-controls.md @@ -0,0 +1,374 @@ +# Form Controls & Reactive Forms Integration + +> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.** +> For app setup, providers, and import patterns — see [`setup.md`](./setup.md). + +## Contents + +- [Input Group](#input-group) +- [Combo (Multi-Select Dropdown)](#combo-multi-select-dropdown) +- [Simple Combo (Single-Select)](#simple-combo-single-select) +- [Select](#select) +- [Date Picker](#date-picker) +- [Date Range Picker](#date-range-picker) +- [Time Picker](#time-picker) +- [Calendar](#calendar) +- [Checkbox, Radio, Switch](#checkbox-radio-switch) +- [Slider](#slider) +- [Autocomplete](#autocomplete) +- [Reactive Forms Integration](#reactive-forms-integration) +- [Key Rules](#key-rules) + +## Overview +This reference gives high-level guidance on when to use each form control component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in. + +## Input Group + +```typescript +import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +``` + +```html + + person + + + clear + Enter your username + +``` + +Types: `line` (default), `border`, `box`, `search`. + +## Combo (Multi-Select Dropdown) + +```typescript +import { IgxComboComponent } from 'igniteui-angular/combo'; +``` + +```html + + +``` + +Key inputs: `[data]`, `[valueKey]`, `[displayKey]`, `[groupKey]`, `[placeholder]`, `[allowCustomValues]`, `[filterFunction]`, `[itemsMaxHeight]`, `[type]`. + +Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(selectionChanging)`, `(addition)`, `(searchInputUpdate)`. + +## Simple Combo (Single-Select) + +```typescript +import { IgxSimpleComboComponent } from 'igniteui-angular/simple-combo'; +``` + +```html + + +``` + +Same API as `igx-combo` but restricted to single selection. + +## Select + +```typescript +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +``` + +```html + + @for (role of roles; track role.id) { + {{ role.name }} + } + +``` + +## Date Picker + +```typescript +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +``` + +```html + + +``` + +Implements `ControlValueAccessor` and `Validator`. Works with both reactive and template-driven forms. + +## Date Range Picker + +```typescript +import { IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent } from 'igniteui-angular/date-picker'; +import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives'; +import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxPickerToggleComponent, IgxPickerClearComponent } from 'igniteui-angular/core'; +``` + +```html + + + + + + + + +``` + + +`IgxDateRangePickerComponent` is imported from `igniteui-angular/date-picker`. + +In the two-input configuration: + +- place the `input` directly inside `igx-date-range-start` and `igx-date-range-end` +- use `igx-picker-toggle igxPrefix` for the calendar action +- use `igx-picker-clear igxSuffix` for the clear action + +A plain `igx-prefix` or `igx-suffix` with an `igx-icon` is decorative only and does not trigger picker actions. +Do not wrap the inputs in an additional `igx-input-group`. + +**Avoid these patterns in two-input mode:** + +- `calendar_today` + +- placing the toggle on only one input unless explicitly requested + +Common two-input configuration with calendar toggles: + +```html + + + + calendar_today + + + + + clear + + + + + + calendar_today + + + + + clear + + + +``` + +## Time Picker + +```typescript +import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; +``` + +```html + + +``` + +## Calendar + +```typescript +import { IgxCalendarComponent } from 'igniteui-angular/calendar'; +``` + +```html + + +``` + +Selection modes: `'single'`, `'multi'`, `'range'`. + +## Checkbox, Radio, Switch + +```typescript +import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; +import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; +import { IgxSwitchComponent } from 'igniteui-angular/switch'; +``` + +```html +Remember me + + + Basic + Pro + + +Dark mode +``` + +## Slider + +```typescript +import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; + +public sliderType = IgxSliderType; + public priceRange = { + lower: 200, + upper: 800 + }; +``` + +```html + + + + + + +``` + +## Autocomplete + +```typescript +import { IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down'; +import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group'; +``` + +```html + + + + + + @for (city of cities | startsWith:selectedCity; track city) { + + {{ city }} + + } + +``` + +The `igxAutocomplete` directive attaches to an input and displays a drop-down of suggestions as the user types. It references an `igx-drop-down` via a template variable. + +Filtering is **not** built in — use a pipe or filter the data in the component to control which items appear. + +## Reactive Forms Integration + +All form controls implement `ControlValueAccessor` and work with both reactive and template-driven forms. + +```typescript +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms'; +import { IgxComboComponent } from 'igniteui-angular/combo'; +import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; +import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; + +@Component({ + selector: 'app-my-form', + imports: [ + ReactiveFormsModule, + IGX_INPUT_GROUP_DIRECTIVES, + IgxComboComponent, + IgxDatePickerComponent, + IgxSelectComponent, + IgxSelectItemComponent + ], + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` +
+ + + + @if (form.controls.name.invalid && form.controls.name.touched) { + Name is required + } + + + + + + + + + @for (r of roles; track r.id) { + {{ r.name }} + } + +
+ ` +}) +export class MyFormComponent { + form = new FormGroup({ + name: new FormControl('', Validators.required), + skills: new FormControl([]), + startDate: new FormControl(null), + role: new FormControl(null) + }); + + skills = [{ id: 1, name: 'Angular' }, { id: 2, name: 'TypeScript' }]; + roles = [{ id: 'admin', name: 'Admin' }, { id: 'user', name: 'User' }]; + + submit() { + if (this.form.valid) { + console.log(this.form.value); + } + } +} +``` + +## Key Rules + +- **Always check `app.config.ts` first** — add `provideAnimations()` before using Combo, Select, Date Picker, or any overlay component +- **Import from specific entry points** — avoid the root `igniteui-angular` barrel +- Date/Time pickers implement both `ControlValueAccessor` and `Validator` — they integrate with reactive forms natively +- For `igx-date-range-picker` with separate start and end inputs, use this structure for both inputs: `igx-picker-toggle igxPrefix`, then `input igxInput igxDateTimeEditor`, then optional `igx-picker-clear igxSuffix`. +- Do not use a plain `igx-prefix` / `igx-suffix` icon for calendar or clear actions. +- How to choose between Combo, Simple Combo, Select, and Auto-complete: + - Use `igx-combo` for multi-select dropdowns with built-in filtering and grouping + - Use `igx-simple-combo` for single-select dropdowns with built-in filtering and grouping + - Use `igx-select` for simple single-select dropdowns without filtering or grouping (or when you want to provide custom filtering UI) + - Use `igxAutocomplete` for input fields with dynamic suggestions based on user input + +## See Also + +- [`setup.md`](./setup.md) — App providers, architecture, all entry points +- [`layout.md`](./layout.md) — Tabs, Stepper, Accordion, Splitter, Navigation Drawer +- [`data-display.md`](./data-display.md) — List, Tree, Card and other display components +- [`feedback.md`](./feedback.md) — Dialog, Snackbar, Toast, Banner +- [`directives.md`](./directives.md) — Button, Ripple, Tooltip, Drag and Drop diff --git a/projects/excel/.claude/skills/igniteui-angular-components/references/layout-manager.md b/projects/excel/.claude/skills/igniteui-angular-components/references/layout-manager.md new file mode 100644 index 00000000..c7436411 --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-components/references/layout-manager.md @@ -0,0 +1,505 @@ +# Layout Manager, Dock Manager & Tile Manager + +> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.** +> For app setup, providers, and import patterns — see [`setup.md`](./setup.md). + +## Contents + +- [Layout Manager Directives](#layout-manager-directives) +- [Dock Manager](#dock-manager) +- [Tile Manager](#tile-manager) + +## Overview +This reference gives high-level guidance on when to use each layout manager component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in. + +--- + +## Layout Manager Directives + +The Layout Manager is a pair of Angular directives (`igxLayout` / `igxFlex`) that wrap CSS Flexbox. Apply `igxLayout` to any container to control its children's flow; apply `igxFlex` to individual children to control their flex properties. + +```typescript +import { IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular/directives'; +``` + +```html + +
+
Item 1
+
Item 2
+
Item 3
+
+``` + +### Common Layout Patterns + +#### App Shell (Sidebar + Content) + +```html +
+ + + + + +
+
Header
+
+ +
+
Col 1
+
Col 2
+
Col 3
+
+
+ +
+ +
+``` + +#### Centered Content + +```html +
+
Centered content
+
+``` + +#### Wrapping Tiles + +```html +
+ @for (item of items; track item.id) { +
+ {{ item.title }} +
+ } +
+``` + +### `igxLayout` Directive Inputs + +| Input | Values | Default | Description | +|---|---|---|---| +| `igxLayoutDir` | `'row'` \| `'column'` | `'row'` | Flex direction | +| `igxLayoutReverse` | `true` \| `false` | `false` | Reverse flow order | +| `igxLayoutWrap` | `'nowrap'` \| `'wrap'` \| `'wrap-reverse'` | `'nowrap'` | Child wrapping | +| `igxLayoutJustify` | `'flex-start'` \| `'center'` \| `'flex-end'` \| `'space-between'` \| `'space-around'` | `'flex-start'` | Main axis alignment | +| `igxLayoutItemAlign` | `'flex-start'` \| `'center'` \| `'flex-end'` \| `'stretch'` \| `'baseline'` | `'stretch'` | Cross axis alignment | + +### `igxFlex` Directive Inputs + +| Input | Type | Default | Description | +|---|---|---|---| +| `igxFlexGrow` | `number` | `1` | How much the element grows to fill space | +| `igxFlexShrink` | `number` | `1` | How much the element shrinks when space is limited | +| `igxFlexBasis` | `string` | `'auto'` | Initial main-axis size (e.g., `'200px'`, `'30%'`) | +| `igxFlexOrder` | `number` | `0` | Visual order among siblings | + +### Key Rules for Layout Manager + +- `igxLayout` affects its **immediate children only** — nest multiple `igxLayout` containers for deeper control +- Combine `igxLayoutDir="column"` on the outer container with `igxFlex` on children to create page shells +- `igxFlexGrow="0"` on headers/footers/sidebars prevents them from stretching; leave it at `1` (default) for the main content area +- This is a thin CSS Flexbox wrapper — the container element gets `display: flex` applied + +--- + +## Dock Manager + +The Dock Manager is a **separate package** (`igniteui-dockmanager`) and is implemented as a **Web Component** (``). It provides IDE-style dockable, resizable, floating, and tabbed pane layouts. It is a **premium** (licensed) component. + +### Installation + +```bash +npm install igniteui-dockmanager +``` + +### Setup + +Because Dock Manager is a Web Component, it requires two one-time setup steps: + +**1. Register custom elements — `app.config.ts`:** + +```typescript +import { defineCustomElements } from 'igniteui-dockmanager/loader'; + +defineCustomElements(); +``` + +**2. Add `CUSTOM_ELEMENTS_SCHEMA` to every standalone component that uses ``:** + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +@Component({ + selector: 'app-dock-manager', + templateUrl: './dock-manager.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class DockManagerComponent { ... } +``` + +### Basic Usage + +```typescript +import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { + IgcDockManagerLayout, + IgcDockManagerPaneType, + IgcSplitPaneOrientation +} from 'igniteui-dockmanager'; + +@Component({ + selector: 'app-dock-manager', + templateUrl: './dock-manager.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DockManagerComponent { + layout: IgcDockManagerLayout = { + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'sidebar', + header: 'Explorer' + }, + { + type: IgcDockManagerPaneType.documentHost, + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + allowEmpty: true, + panes: [ + { + type: IgcDockManagerPaneType.tabGroupPane, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + header: 'File 1', + contentId: 'doc1', + documentOnly: true + }, + { + type: IgcDockManagerPaneType.contentPane, + header: 'File 2', + contentId: 'doc2', + documentOnly: true + } + ] + } + ] + } + }, + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + size: 280, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'properties', + header: 'Properties' + }, + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'output', + header: 'Output', + isPinned: false // starts unpinned (auto-hidden) + } + ] + } + ] + }, + floatingPanes: [ + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + floatingWidth: 300, + floatingHeight: 200, + floatingLocation: { x: 200, y: 150 }, + panes: [ + { + type: IgcDockManagerPaneType.contentPane, + contentId: 'search', + header: 'Search' + } + ] + } + ] + }; +} +``` + +```html + + +
File explorer content
+
Document 1 content
+
Document 2 content
+
Properties panel
+
Output panel
+
Search panel
+
+``` + +### Full Example (from user-provided code) + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { + IgcDockManagerLayout, + IgcDockManagerPaneType, + IgcSplitPaneOrientation +} from 'igniteui-dockmanager'; + +@Component({ + selector: 'app-dock-manager', + templateUrl: './dock-manager.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class DockManagerComponent { + layout: IgcDockManagerLayout = { + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + panes: [ + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + panes: [ + { type: IgcDockManagerPaneType.contentPane, contentId: 'content1', header: 'Content Pane 1' }, + { type: IgcDockManagerPaneType.contentPane, contentId: 'content2', header: 'Unpinned Pane 1', isPinned: false } + ] + }, + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + size: 200, + panes: [ + { + type: IgcDockManagerPaneType.documentHost, + size: 200, + rootPane: { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + allowEmpty: true, + panes: [ + { + type: IgcDockManagerPaneType.tabGroupPane, + panes: [ + { type: IgcDockManagerPaneType.contentPane, header: 'Document 1', contentId: 'content3', documentOnly: true }, + { type: IgcDockManagerPaneType.contentPane, header: 'Document 2', contentId: 'content4', documentOnly: true } + ] + } + ] + } + }, + { type: IgcDockManagerPaneType.contentPane, contentId: 'content5', header: 'Unpinned Pane 2', isPinned: false } + ] + }, + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.vertical, + panes: [ + { + type: IgcDockManagerPaneType.tabGroupPane, + size: 200, + panes: [ + { type: IgcDockManagerPaneType.contentPane, contentId: 'content6', header: 'Tab 1' }, + { type: IgcDockManagerPaneType.contentPane, contentId: 'content7', header: 'Tab 2' }, + { type: IgcDockManagerPaneType.contentPane, contentId: 'content8', header: 'Tab 3' }, + { type: IgcDockManagerPaneType.contentPane, contentId: 'content9', header: 'Tab 4' }, + { type: IgcDockManagerPaneType.contentPane, contentId: 'content10', header: 'Tab 5' } + ] + }, + { type: IgcDockManagerPaneType.contentPane, contentId: 'content11', header: 'Content Pane 2' } + ] + } + ] + }, + floatingPanes: [ + { + type: IgcDockManagerPaneType.splitPane, + orientation: IgcSplitPaneOrientation.horizontal, + floatingHeight: 150, + floatingWidth: 250, + floatingLocation: { x: 300, y: 200 }, + panes: [ + { type: IgcDockManagerPaneType.contentPane, contentId: 'content12', header: 'Floating Pane' } + ] + } + ] + }; +} +``` + +```html + +
Content 1
+
Content 2
+
Content 3
+
Content 4
+
Content 5
+
Content 6
+
Content 7
+
Content 8
+
Content 9
+
Content 10
+
Content 11
+
Content 12
+
+``` + +### Key Rules for Dock Manager + +1. **Separate package** — `igniteui-dockmanager` is installed independently of `igniteui-angular` +2. **Call `defineCustomElements()` from `igniteui-dockmanager/loader` in `app.config.ts`** — without this the `` element renders as an unknown element +3. **Add `CUSTOM_ELEMENTS_SCHEMA`** to every standalone component or NgModule that uses `` +4. **Slot names = `contentId` values** — the `slot="..."` attribute on child elements must exactly match the `contentId` string in the layout +5. **Premium component** — requires a licensed Ignite UI subscription; verify availability before recommending to users +6. **Not part of `igniteui-angular`** — do not import from `igniteui-angular` entry points; all Dock Manager types come from `igniteui-dockmanager` + +--- + +## Tile Manager + +> **Docs:** [Tile Manager (Angular)](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tile-manager) +> **Full API Docs:** [Tile Manager Web Component](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager.html) + +The Tile Manager is a **layout Web Component** that displays content in individual tiles users can **rearrange and resize**. It is implemented as an `igc-tile-manager` container with one or more `igc-tile` children. + +### Installation + +```bash +npm install igniteui-webcomponents +``` + +### Setup + +Register the Tile Manager Web Component before bootstrap: + +```typescript +import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcTileManagerComponent); +``` + +Add `CUSTOM_ELEMENTS_SCHEMA` to any component using ``: + +```typescript +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +@Component({ + selector: 'app-tile-manager', + templateUrl: './tile-manager.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class TileManagerComponent { } +``` + +### Basic Usage + +```html + + + Tile 1 header +

Tile 1 content

+
+ + Tile 2 header +

Tile 2 content

+
+
+``` + +### Layout Properties + +Key `igc-tile-manager` properties: + +- **`column-count`**: number of grid columns; if omitted or \<1, as many columns as fit with a minimum width (200px) are created. +- **`gap`**: space between tiles (e.g., `"20px"`, `"1rem"`). +- **`min-column-width`**: minimum width per column (e.g., `"200px"`). +- **`min-row-height`**: minimum height per row (e.g., `"150px"`). + +```html + + + Tile 1 header +

Tile 1 content

+
+ + Tile 2 header +

Tile 2 content

+
+
+``` + +### Tile Properties + +Each `igc-tile` can configure its own size and behavior: + +- **`row-start` / `col-start`**: starting row/column for the tile +- **`row-span` / `col-span`**: how many rows/columns the tile spans +- **`disable-resize`**: prevents the tile from being resized +- **`disable-maximize`** / **`disable-fullscreen`**: hide default header actions + +```html + + + Wide tile +

Content

+
+ + Tall tile +

Content that spans two rows.

+
+
+``` + +### Resizing & Dragging + +- Resizing is controlled by the `resize-mode` property on `igc-tile-manager` (`"none"`, `"hover"`, `"always"`). +- Reordering is enabled via the `drag-mode` property (`"tile"` or `"tile-header"`). + +```html + + + Tile 1 +

Content

+
+ + Tile 2 +

Content

+
+
+``` + +### Key Rules for Tile Manager + +1. **Web Component package** — Tile Manager ships via `igniteui-webcomponents`, not `igniteui-angular`. +2. **Register components** — call `defineComponents(IgcTileManagerComponent)` once before using ``. +3. **Use `CUSTOM_ELEMENTS_SCHEMA`** on Angular components that host the Tile Manager. +4. **Use slots** — header content goes into `slot="title"`; additional actions and custom adorners use the documented slots (`fullscreen-action`, `maximize-action`, `actions`, `side-adorner`, `corner-adorner`, `bottom-adorner`). +5. **Treat it as a layout container** — use Tile Manager when users need interactive, resizable and re-orderable tiles, not tabular data (use grids for that). + +## See Also + +- [`setup.md`](./setup.md) — App providers, architecture, all entry points +- [`layout.md`](./layout.md) — Tabs, Stepper, Accordion, Splitter, Navigation Drawer +- [`data-display.md`](./data-display.md) — List, Tree, Card and other display components +- [`feedback.md`](./feedback.md) — Dialog, Snackbar, Toast, Banner +- [`directives.md`](./directives.md) — Button, Ripple, Tooltip, Drag and Drop diff --git a/projects/excel/.claude/skills/igniteui-angular-components/references/layout.md b/projects/excel/.claude/skills/igniteui-angular-components/references/layout.md new file mode 100644 index 00000000..24e70f7c --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-components/references/layout.md @@ -0,0 +1,212 @@ +# Layout Components + +> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.** +> For app setup, providers, and import patterns — see [`setup.md`](./setup.md). + +## Contents + +- [Tabs](#tabs) +- [Bottom Navigation](#bottom-navigation) +- [Stepper](#stepper) +- [Accordion](#accordion) +- [Splitter](#splitter) +- [Navigation Drawer](#navigation-drawer) + +## Overview +This reference gives high-level guidance on when to use each layout component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in. + +## Tabs + +```typescript +import { IGX_TABS_DIRECTIVES } from 'igniteui-angular/tabs'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +``` + +```html + + + + info + Info + + Content for Info tab + + + + Settings + + Settings content + + +``` + +Key inputs: `[(selectedIndex)]`, `[tabAlignment]` (`'start'` | `'end'` | `'center'` | `'justify'`), `[disableAnimation]`. + +## Bottom Navigation + +```typescript +import { IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent } from 'igniteui-angular/bottom-nav'; +``` + +```html + + + + home + Home + + Home content + + + + settings + Settings + + Settings content + + +``` + +## Stepper + +```typescript +import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper'; +``` + +```html + + +
Account
+
Create your account
+
+ +
+
+ +
Profile
+
Optional step
+
...
+
+ +
Confirm
+
Review and submit
+
+
+``` + +Programmatic navigation: +```typescript +stepper = viewChild.required(IgxStepperComponent); + +next() { this.stepper().next(); } +prev() { this.stepper().prev(); } +navigateTo(index: number) { this.stepper().navigateTo(index); } +``` + +## Accordion + +```typescript +import { IgxAccordionComponent } from 'igniteui-angular/accordion'; +import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular/expansion-panel'; +``` + +```html + + + + Panel 1 + Subtitle text + + + Content for panel 1 + + + + + Panel 2 + + Content for panel 2 + + +``` + +Standalone `igx-expansion-panel` (without accordion): +```html + + + Settings + + Content + +``` + +## Splitter + +```typescript +import { IgxSplitterComponent, IgxSplitterPaneComponent, SplitterType } from 'igniteui-angular/splitter'; +``` + +```html + + + + Left panel content + + + Right panel content + + + + + + Top panel + Bottom panel + +``` + +## Navigation Drawer + +```typescript +import { IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerMiniTemplateDirective } from 'igniteui-angular/navigation-drawer'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxRippleDirective } from 'igniteui-angular/directives'; +``` + +```html + + + + + + + home + settings + + + + +``` + +Key inputs: `[isOpen]`, `[pin]` (dock to content), `[pinThreshold]` (auto-pin at viewport width), `[width]`, `[miniWidth]`. + +Events: `(opened)`, `(closed)`, `(pinChange)`. + +> **AGENT INSTRUCTION:** The Navigation Drawer uses the Ignite UI overlay/animation system — ensure `provideAnimations()` is in `app.config.ts`. + +## See Also + +- [`setup.md`](./setup.md) — App providers, architecture, all entry points +- [`form-controls.md`](./form-controls.md) — Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider +- [`data-display.md`](./data-display.md) — List, Tree, Card and other display components +- [`feedback.md`](./feedback.md) — Dialog, Snackbar, Toast, Banner +- [`directives.md`](./directives.md) — Button, Ripple, Tooltip, Drag and Drop diff --git a/projects/excel/.claude/skills/igniteui-angular-components/references/mcp-setup.md b/projects/excel/.claude/skills/igniteui-angular-components/references/mcp-setup.md new file mode 100644 index 00000000..6d905bb8 --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-components/references/mcp-setup.md @@ -0,0 +1,77 @@ +# Setting Up the Ignite UI CLI MCP Server + +> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.** + +## Contents + +- [VS Code](#vs-code) +- [Cursor](#cursor) +- [Claude Desktop](#claude-desktop) +- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides) +- [Verifying the Setup](#verifying-the-setup) + +The Ignite UI CLI MCP server enables AI assistants to discover Ignite UI components, access component documentation, and support related Ignite UI workflows. It must be configured in your editor before these tools become available. + +## VS Code + +Create or edit `.vscode/mcp.json` in your project: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +This works whether `igniteui-cli` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases. + +## Cursor + +Create or edit `.cursor/mcp.json`: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +## Claude Desktop + +Edit the Claude Desktop config file: +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +## WebStorm / JetBrains IDEs + +1. Go to **Settings → Tools → AI Assistant → MCP Servers** +2. Click **+ Add MCP Server** +3. Set Command to `npx` and Arguments to `-y igniteui-cli mcp` +4. Click OK and restart the AI Assistant + +## Verifying the Setup + +After configuring the MCP server, ask your AI assistant: + +> "List all available Ignite UI components" + +If the MCP server is running, the `list_components` tool will return all available components for the detected framework. diff --git a/projects/excel/.claude/skills/igniteui-angular-components/references/setup.md b/projects/excel/.claude/skills/igniteui-angular-components/references/setup.md new file mode 100644 index 00000000..db770c64 --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-components/references/setup.md @@ -0,0 +1,174 @@ +# Application Setup & Architecture + +> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.** + +## Contents + +- [Installation](#installation) +- [Required Providers (`app.config.ts`)](#required-providers-appconfigts) +- [Architecture — Standalone Components](#architecture--standalone-components) +- [Multi-Entry-Point Imports](#multi-entry-point-imports) + +## Installation + +```bash +# Open-source +npm install igniteui-angular + +# Licensed (requires @infragistics registry configured) +npm install @infragistics/igniteui-angular +``` + +Both packages share identical entry-point paths. Everywhere below, replace `igniteui-angular` with `@infragistics/igniteui-angular` if using the licensed package. + +## Required Providers (`app.config.ts`) + +> **AGENT INSTRUCTION:** Before adding any Ignite UI component, verify that `app.config.ts` contains the providers listed below. Missing `provideAnimations()` is the most common cause of runtime errors — all overlay and animated components (Dialog, Combo, Select, Date Picker, Snackbar, Toast, Banner, Navigation Drawer, Dropdown) will silently fail or throw without it. + +```typescript +import { ApplicationConfig } from '@angular/core'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { provideRouter } from '@angular/router'; +import { provideIgniteIntl } from 'igniteui-angular/core'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideAnimations(), // REQUIRED — all overlay and animated components + provideRouter(appRoutes), + provideIgniteIntl(), // recommended — localization for date/time pickers, grids, etc. + ] +}; +``` + +| Provider | Package | Required for | +|---|---|---| +| `provideAnimations()` | `@angular/platform-browser/animations` | **All overlay and animated components** — Dialog, Combo, Select, Dropdown, Date/Time Picker, Snackbar, Toast, Banner, Navigation Drawer, Carousel, Overlay service | + +> **Touch gestures** (Optional) (Slider, Drag & Drop, swipe) - To enable touch gesture support, install the `hammerjs` package and add it to the `scripts` array in your `angular.json`: +> +> ```bash +> npm install hammerjs +> ``` +> +> ```json +> // angular.json — inside your project's architect.build.options +> "scripts": ["./node_modules/hammerjs/hammer.min.js"] +> ``` + +> **`provideAnimationsAsync()`** lazy-loads the animations module — prefer it for SSR or when optimizing initial bundle size: +> ```typescript +> import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; +> ``` + +## Architecture — Standalone Components + +All Ignite UI components are **standalone** — no NgModules needed. Import them directly into your component's `imports` array: + +```typescript +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxDialogComponent } from 'igniteui-angular/dialog'; + +@Component({ + selector: 'app-example', + imports: [IgxButtonDirective, IgxDialogComponent], + templateUrl: './example.component.html', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ExampleComponent {} +``` + +## Multi-Entry-Point Imports + +> **AGENT INSTRUCTION:** Always import from specific entry points, never from the root barrel. Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular` — that prefix applies to every import path. + +```typescript +// CORRECT — tree-shakeable, specific entry point +import { IgxComboComponent } from 'igniteui-angular/combo'; +import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; + +// AVOID — pulls in entire library +import { IgxComboComponent } from 'igniteui-angular'; +``` + +### Common Entry Points + +| Component / Directive | Entry Point | +|---|---| +| Input Group | `igniteui-angular/input-group` | +| Combo / Simple Combo | `igniteui-angular/combo` | +| Select | `igniteui-angular/select` | +| Date Picker / Date Range Picker | `igniteui-angular/date-picker` | +| Time Picker | `igniteui-angular/time-picker` | +| Calendar | `igniteui-angular/calendar` | +| Checkbox | `igniteui-angular/checkbox` | +| Radio | `igniteui-angular/radio` | +| Switch | `igniteui-angular/switch` | +| Slider | `igniteui-angular/slider` | +| Tabs | `igniteui-angular/tabs` | +| Stepper | `igniteui-angular/stepper` | +| Accordion / Expansion Panel | `igniteui-angular/expansion-panel` | +| Splitter | `igniteui-angular/splitter` | +| Navigation Drawer | `igniteui-angular/navigation-drawer` | +| Bottom Navigation | `igniteui-angular/bottom-nav` | +| List | `igniteui-angular/list` | +| Tree | `igniteui-angular/tree` | +| Card | `igniteui-angular/card` | +| Dialog | `igniteui-angular/dialog` | +| Snackbar | `igniteui-angular/snackbar` | +| Toast | `igniteui-angular/toast` | +| Banner | `igniteui-angular/banner` | +| Chips | `igniteui-angular/chips` | +| Avatar | `igniteui-angular/avatar` | +| Badge | `igniteui-angular/badge` | +| Icon | `igniteui-angular/icon` | +| Carousel | `igniteui-angular/carousel` | +| Paginator | `igniteui-angular/paginator` | +| Linear Progress | `igniteui-angular/progressbar` | +| Circular Progress | `igniteui-angular/progressbar` | +| Chat | `igniteui-angular/chat` | +| Button / Icon Button | `igniteui-angular/directives` | +| Button Group | `igniteui-angular/button-group` | +| Ripple | `igniteui-angular/directives` | +| IgxTooltipDirective, IgxTooltipTargetDirective | `igniteui-angular/directives` | +| Drag & Drop | `igniteui-angular/directives` | +| Layout Manager (`igxLayout`, `igxFlex`) | `igniteui-angular/directives` | +| Core utilities, services, base types | `igniteui-angular/core` | +| Icon Service | `igniteui-angular/icon` | +| Overlay Service | `igniteui-angular/core` | +| **Dock Manager** | `igniteui-dockmanager` *(separate package — `npm install igniteui-dockmanager`)* | + +**Grid-specific entry points** (tree-shakable imports): + +| Component / Feature | Entry Point | +|---|---| +| Shared grid infrastructure (columns, toolbar, filtering, sorting, etc.) | `igniteui-angular/grids/core` | +| Standard grid (`IgxGridComponent`) | `igniteui-angular/grids/grid` | +| Tree grid (`IgxTreeGridComponent`) | `igniteui-angular/grids/tree-grid` | +| Hierarchical grid (`IgxHierarchicalGridComponent`, `IgxRowIslandComponent`) | `igniteui-angular/grids/hierarchical-grid` | +| Pivot grid (`IgxPivotGridComponent`, `IgxPivotDataSelectorComponent`) | `igniteui-angular/grids/pivot-grid` | + +### Convenience Directive Collections + +For complex components, use the bundled directive arrays instead of listing every sub-directive individually: + +| Token | Entry Point | Includes | +|---|---|---| +| `IGX_BUTTON_GROUP_DIRECTIVES` | `igniteui-angular/button-group` | Button group + button directive | +| `IGX_INPUT_GROUP_DIRECTIVES` | `igniteui-angular/input-group` | Input group + label, hint, prefix, suffix | +| `IGX_TABS_DIRECTIVES` | `igniteui-angular/tabs` | Tabs + tab item, header, content | +| `IGX_STEPPER_DIRECTIVES` | `igniteui-angular/stepper` | Stepper + step | +| `IGX_EXPANSION_PANEL_DIRECTIVES` | `igniteui-angular/expansion-panel` | Panel + header, body | +| `IGX_LIST_DIRECTIVES` | `igniteui-angular/list` | List + list item | +| `IGX_TREE_DIRECTIVES` | `igniteui-angular/tree` | Tree + tree node | + +## See Also + +- [`form-controls.md`](./form-controls.md) — Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, forms integration +- [`layout.md`](./layout.md) — Tabs, Stepper, Accordion, Splitter, Navigation Drawer +- [`data-display.md`](./data-display.md) — List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress, Chat +- [`feedback.md`](./feedback.md) — Dialog, Snackbar, Toast, Banner +- [`directives.md`](./directives.md) — Button, Icon Button, Button Group, Ripple, Tooltip, Drag and Drop +- [`layout-manager.md`](./layout-manager.md) — Layout Manager directives, Dock Manager +- [`../../igniteui-angular-grids/SKILL.md`](../../igniteui-angular-grids/SKILL.md) — Data Grids +- [`../../igniteui-angular-theming/SKILL.md`](../../igniteui-angular-theming/SKILL.md) — Theming & Styling diff --git a/projects/excel/.claude/skills/igniteui-angular-generate-from-image-design/SKILL.md b/projects/excel/.claude/skills/igniteui-angular-generate-from-image-design/SKILL.md new file mode 100644 index 00000000..a869db8a --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-generate-from-image-design/SKILL.md @@ -0,0 +1,226 @@ +--- +name: igniteui-angular-generate-from-image-design +description: Implement Angular application views from design images using Ignite UI Angular components. Uses MCP servers (igniteui-cli, igniteui-theming, angular-cli) to discover components, generate themes, and follow best practices. Triggers when the user provides a design image (screenshot, mockup, wireframe) and wants it built as a working Angular view with igniteui-angular components. Also triggers when the user asks to "implement this design", "build this UI", "convert this mockup", or "create a page from this image" in an Ignite UI Angular project. +user-invocable: true +--- + +# Implementing Ignite UI Angular Views from Design Images + +## MANDATORY AGENT PROTOCOL + +Before writing any implementation code, you must complete these steps in order: + +1. Analyze the image and identify all visible regions and UI patterns. +2. Read [references/component-mapping.md](references/component-mapping.md) and [references/gotchas.md](references/gotchas.md). +3. This skill is Angular-only. Check package layout or licensing only when imports, packages, or theming depend on it. +4. To apply a theme, use the theming workflow from this skill and the dedicated `igniteui-angular-theming` skill; use the `igniteui-theming` MCP tools instead of styling from memory. +5. Call `get_doc` for every chosen component family before using it. +6. Only then start coding. + +## Workflow + +1. **Analyze the design image** - Read the image, identify every UI section, component, layout structure. +2. **Confirm package layout if needed** - this skill is Angular-only; check package layout or licensing only when imports, packages, or theming depend on it +3. **Discover components** - Call `list_components` with targeted filters to find matching components for each UI pattern +4. **Look up component docs** - Call `get_doc` for every chosen component family before coding +5. **Generate theme** - (a) To generate a theme, first extract colors and create a color palette using `create_palette` or `create_custom_palette` depending on the scenario. Then extract elevations and call `create_elevations`. Then extract typography and call `create_typography`. Then call `create_theme` with the palette, elevations, and typography. (b) After a theme exists, prefer using design tokens or scoped semantic CSS variables over raw literals. (c) For every Ignite UI component, call `get_component_design_tokens`, map extracted image tokens to token roles, then call `create_component_theme` with the tokens differing from the global theme for the specific component. +6. **Implement** - Build the screenshot-first layout, data, and view components +7. **Refine** - Use the `set_size`, `set_spacing`, `set_roundness` tools to refine the view's visual fidelity against the image, then iterate on implementation and theming until the view matches the design closely +8. **Validate** - Build, test, run, compare against the image, and fix differences + +## Step 1: Analyze the Design Image + +Read the input image carefully. For each visual section, identify: + +- **Layout structure**: grid rows/columns, sidebar, navbar, content area proportions, and estimated fixed widths or percentages for major regions. +> Note: Do not guess the exact CSS properties at this stage; just identify the high-level structure and relative proportions. Do not try to fit the view into exact breakpoints or pixel values. Try to generate a flexible layout that preserves the observed proportions and can adapt to different screen sizes. You will refine the exact CSS rules in Step 8 after building a first version of the view. +- **Component type**: chart, list, card, map, gauge, table, form, etc. +- **Color palette**: primary, secondary, surface/background, accent, text colors +- **Typography**: font sizes, weights, letter-spacing patterns +- **Surface styling**: borders, border-radius, shadows, elevation, divider treatments +- **Data patterns**: what mock data is needed (time series, lists, KPIs, geographic) +- **Spacing system**: translate observed padding and gaps into a small reusable scale derived from the design + +Before writing code, create a decomposition table with one row per visible region containing: + +| Region | Visual role | Candidate component | Custom CSS required | Data type | +|---|---|---|---|---| +| Example: sidebar item list | repeated rows with icon + label | `IgxListComponent` | yes - item height, icon size | domain-appropriate mock data | +| Example: top bar | brand + tabs + search | `IgxNavbarComponent` | yes - multi-zone flex layout | n/a | +| Example: side panel | always-visible navigation | `IgxNavigationDrawerComponent` | yes - width, item styling | n/a | + +Start every region with the most appropriate Ignite UI component from [references/component-mapping.md](references/component-mapping.md). Only fall back to plain semantic HTML when the component DOM structure is fundamentally incompatible with the design after CSS overrides are considered. Document the reason for any plain-HTML fallback in a code comment. + +Before writing code, produce a compact implementation brief that captures: + +- chosen components per region +- fallback HTML regions +- theme strategy +- package needs +- major assumptions + +After the table, translate the image into CSS Grid rows and columns first. Preserve desktop proportions before adding responsive behavior, then define explicit breakpoint stacking rules for smaller screens. + +## Step 2-3: Use MCP Tools for Discovery + +This skill is Angular-only. Check package layout or licensing only when imports, packages, or theming depend on it. + +If you need to confirm package layout or licensing state, act on the result immediately: + +- If the project uses Open Source package layout, use `igniteui-angular` for all core imports. +- If the project is unlicensed or uses Open Source package layout, do not mark any core UI components as blocked or premium-only during implementation. +- If the result indicates a licensed package layout, follow the licensed import paths shown in the component reference when needed. + +Then call `list_components` with `framework: "angular"` and relevant filters to find components matching each UI pattern. Common filters: + +- `chart`, `sparkline` - for data visualization +- `list view`, `card`, `avatar`, `badge` - for data display +- `nav`, `navbar`, `drawer` - for navigation +- `progress`, `gauge` - for metrics +- `map` - for geographic displays +- `grid` - for tabular data + +Use narrow search terms to reduce noisy MCP results. Search for the specific UI pattern you need, such as `list view` instead of `list`. + +For component-to-Ignite-UI mapping, see [references/component-mapping.md](references/component-mapping.md). + +## Step 4: Look Up Component API + +For every chosen component category, call `get_doc` with the doc name from `list_components` results (e.g., `name: "card"`, `framework: "angular"`). Use the doc `name` field from the MCP results, not the result title shown in the list. This is mandatory before coding and gives exact usage patterns, inputs, and template structure. + +Call `search_docs` for feature-based questions (e.g., "how to configure [component] for [specific behavior or styling need]"). + +## Step 5: Generate Theme with MCP + +Use this skill for the image-to-view theming workflow only. The dedicated [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md) skill remains the source of truth for palette-token behavior, global theme rules, and broader theming-system guidance. + +### 5a - Existing app guard (always run first) + +Before generating any theme code, inspect the project's global stylesheet (typically `styles.scss`). Look for an active `@include theme(...)` or `@include palette(...)` call that already references a palette variable. + +- **Existing theme found** -> the global palette is already set. Do **not** call `create_theme` or `create_palette` unless the user explicitly wants a global theme change. Instead: + 1. Inspect the existing theme definition and any exposed palette tokens or semantic CSS variables + 2. Reuse the current design system, variant, and palette tokens wherever they already match the design image + 3. Skip to **5c** and apply only minimal scoped overrides for the new view's components +- **No theme found / blank/default palette** -> proceed with **5b** to generate a fresh global theme. + +### 5b - Global theme generation (new projects only) + +Follow this order - MCP guidance first, image extraction second: + +1. **Read MCP guidance first** - call `theming://guidance/colors/rules` (or `get_theming_guidance`) before looking at the image. This tells you the available theme inputs and any luminance or variant constraints. +2. **Resolve the design system** - infer it from the existing workspace, explicit user request, or the closest visual match in the design. Do not assume one if a stronger signal exists. +3. **Extract from the image** - now that you know the available slots, extract values only for the inputs you actually need. +4. **Call `create_theme` or `create_palette`** with the extracted seed values: + +``` +create_theme({ + primaryColor: "", + secondaryColor: "", + surfaceColor: "", + variant: "", + platform: "angular", + licensed: , + fontFamily: "", + designSystem: "" +}) +``` + +Read and act on any luminance warnings returned. If the design needs multiple surface depths that a single generated surface color does not cover, use `create_custom_palette` or define semantic CSS variables for the additional depths in `styles.scss`. + +Use `create_palette` for straightforward designs with a small, coherent color system. Use `create_custom_palette` when the design has multiple distinct surface depths, several accent families, or when the generated palette cannot reliably match the screenshot. + +### 5c - Per-component token discovery and mapping (always run) + +> **Scope:** this step applies only to **core Ignite UI Angular components** (grid, list, navbar, drawer, card, inputs, chips, etc.). DV components - charts, maps, gauges, and sparklines - have no Sass design tokens. Skip this step for them and set their visual properties exclusively via component inputs as described in [references/gotchas.md](references/gotchas.md) and in Step 7. + +For **every** core Ignite UI component chosen in Steps 3-4, follow this MCP-first loop - query MCP before touching the image: + +1. **Discover (MCP first)** - call `get_component_design_tokens(component)` before looking at the image for that component. Read the full token list with names, types, and descriptions. Identify which tokens correspond to visible surfaces, text, borders, icons, and interaction states. +2. **Extract (image second)** - now that you know the exact token names, go to the image region for that component and read the exact token value for each relevant token slot. Do not guess; zoom into the component region. +3. **Generate** - call `create_component_theme(component, platform, licensed, tokens)` passing only the tokens whose resolved value differs from the global theme. This produces scoped SCSS with the minimal override set. + +**Example - theming a grid:** +- `get_component_design_tokens("grid")` returns `header-background`, `content-background`, `row-hover-background` among many others +- Look at the grid region in the image -> extract the color intent for header, row background, and hover state +- Resolve each value to a palette token or local semantic CSS variable +- Call `create_component_theme("grid", ...)` with only `{ "header-background": "", "content-background": "", "row-hover-background": "" }` + +Apply the generated theme block using `@include tokens();` as returned by `create_component_theme`. + +Do not run `create_component_theme` for regions built with custom HTML/CSS only. + +### 5d - Theming sequence summary + +Apply in this exact order: + +1. Inspect `styles.scss` -> existing theme or blank? +2. Create or update a theme: `create_theme` (Step 5b) +3. For each Ignite UI component: `get_component_design_tokens` -> map image design tokens -> resolve values to design tokens or semantic CSS variables -> `create_component_theme` (Step 5c) +4. Use `get_color` after palette generation whenever a palette token can represent the final color intent + +If you use typography mixins with a comma-separated font family list, wrap the font families in parentheses as described in [references/gotchas.md](references/gotchas.md). + +## Step 6: Install DV Packages + +Core UI components ship with `igniteui-angular` in Open Source projects and may use `@infragistics/igniteui-angular` in licensed setups. Charts, maps, gauges, and sparklines require additional DV packages. These packages are version-sensitive: determine the installed Ignite UI version, resolve the compatible published DV package version, and install only the package set required by the selected components. See [references/component-mapping.md](references/component-mapping.md) for package names and import patterns. + +If DV packages are missing, identify the exact packages and versions required first, then ask for approval before installing packages or changing dependency manifests. + +In standalone Angular apps, DV chart, map, and gauge packages are imported via modules in the component `imports` array, not as standalone components. + +## Step 7: Implement + +### Structure + +- **Layout**: use Ignite UI layout and data-display components as the starting point for standard regions, then apply CSS Grid/Flexbox and component overrides to match the screenshot. Only substitute plain semantic HTML when an Ignite UI component remains structurally incompatible after a genuine attempt +- **Data**: use typed mock data that matches the design's density and domain; add models/services only when they help the implementation +- **View**: keep layout, spacing, typography, and surface styling in SCSS rather than inline attributes +- **Theming**: apply the resolved design system and theme variant from Step 5, and keep color usage aligned with palette tokens or local semantic CSS variables + +### Implementation Checks + +- Follow Angular and repo conventions from `AGENTS.md` and `.github/copilot-instructions.md` +- Use [references/component-mapping.md](references/component-mapping.md) for component-choice and semantic-fallback rules +- Use [references/gotchas.md](references/gotchas.md) for components, theming, and API edge cases instead of re-encoding those rules inline +- Favor Ignite UI components over custom HTML when both approaches can reach similar visual fidelity +- Import standalone pipes explicitly when their template syntax requires them +- Preserve spacing, hierarchy, and data density before adding extra interactivity +- Avoid generic placeholders when the image shows domain-specific content +- Document brief assumptions when the image is ambiguous instead of silently guessing + +## Step 8: Refine + +After the first implementation pass, use the `set_size`, `set_spacing`, and `set_roundness` tools to adjust the view's visual properties and close the gap with the image. Focus on the most visually distinctive elements first (e.g., panel proportions, chart shape, button prominence) before tuning smaller details (e.g., row heights, spacing between regions). + +## Step 9: Validate + +Use this validation loop explicitly: + +1. Build +2. Test +3. Run the app +4. Visually compare against the image +5. Adjust and repeat + +In terminal-only environments, the user performs the visual comparison and provides feedback on any mismatches. Only perform the visual check directly when the environment has browser and screenshot capabilities available to the agent. + +Use this checklist during the first visual comparison: + +- panel proportions +- control density +- chart shape +- legend placement +- button prominence +- row heights +- spacing between regions + +Fix TypeScript or template errors immediately during the build/test steps. Use the build output, component docs, [references/gotchas.md](references/gotchas.md), and the user's visual feedback to close the remaining gaps. Typical adjustments include: + +- revisiting chart data density, smoothing, or marker visibility +- adjusting layout ratios, region spacing, or row heights +- correcting navigation mode, panel chrome, or component choice +- tuning map/filter treatment and dark-surface hierarchy +- re-examining the original design for overlooked sections or missing imports + +After the build succeeds with zero errors, refine layout proportions, color values, missing sections, and typography until the view matches closely. diff --git a/projects/excel/.claude/skills/igniteui-angular-generate-from-image-design/references/component-mapping.md b/projects/excel/.claude/skills/igniteui-angular-generate-from-image-design/references/component-mapping.md new file mode 100644 index 00000000..faa8d202 --- /dev/null +++ b/projects/excel/.claude/skills/igniteui-angular-generate-from-image-design/references/component-mapping.md @@ -0,0 +1,144 @@ +# Ignite UI Angular Component Mapping Reference + +## Table of Contents +- [Dashboard & Layout Components](#dashboard--layout-components) +- [Chart Components](#chart-components) +- [Data Display Components](#data-display-components) +- [Form & Input Components](#form--input-components) +- [Calendar & Scheduling Components](#calendar--scheduling-components) +- [Map Components](#map-components) +- [Gauge Components](#gauge-components) +- [Package Requirements](#package-requirements) +- [Import Patterns](#import-patterns) + +## Dashboard & Layout Components + +| UI Pattern | Ignite UI Component | Key Properties | +|---|---|---| +| Top navigation bar | `IgxNavbarComponent` | `igxNavbarAction`, `igxNavbarTitle` | +| Side navigation | `IgxNavigationDrawerComponent` | `[pin]`, `[pinThreshold]`, `igxDrawer` template, `igxDrawerMini` template | +| Content cards/panels | `IgxCardComponent` | `igxCardHeader`, `igxCardContent`, `igxCardActions` | +| Tabbed content | `IgxBottomNavComponent` or `IgxTabsComponent` | Panel-based or router-based | +| Accordion sections | `IgxAccordionComponent` | `IgxExpansionPanelComponent` children | +| Split layouts | `IgxSplitterComponent` | Horizontal/vertical panes | +| Tile dashboard | `IgxTileManagerComponent` | Drag/resize tiles (Premium) | + +Decision rule: + +- Use `IgxNavbarComponent` for a top horizontal bar when its slot structure and behavior match the screenshot. Use custom projected content and CSS flex overrides to achieve multi-zone layouts inside it. Use a plain `
` when that is a closer structural fit. +- Use `IgxNavigationDrawerComponent` for a sidebar or side-navigation panel when drawer structure and behavior match the screenshot. Configure pinning and mini mode according to whether the design shows fixed, collapsible, or icon-only navigation. Use a plain `