{"_id":"@data360/mcp-ui-angular","_rev":"4-bcc1ec75db126a1711e395ba34e20973","name":"@data360/mcp-ui-angular","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@data360/mcp-ui-angular","version":"0.0.1","keywords":["data360","mcp","angular","vega-lite","world-bank"],"license":"MIT","_id":"@data360/mcp-ui-angular@0.0.1","maintainers":[{"name":"avsolatorio","email":"avsolatorio@gmail.com"}],"homepage":"https://github.com/worldbank/data360-mcp#readme","bugs":{"url":"https://github.com/worldbank/data360-mcp/issues"},"dist":{"shasum":"9feb6b7fcb24c04f3d641f72171e95dfaf805e6a","tarball":"https://registry.npmjs.org/@data360/mcp-ui-angular/-/mcp-ui-angular-0.0.1.tgz","fileCount":11,"integrity":"sha512-2AOpn67YOt9YFVGyC8geJRMJBgn+ww9vmRB2stO5gtK/NjLO+RDds+/SeHM1JEbVTDBRCJfLf+upcl57y8HASQ==","signatures":[{"sig":"MEUCIF2zBAm28SWvmFYNWBWrSGO2Zm3Qrc2khbFNuII/M9UYAiEAnxthQ1ykFt8yWGFPyA5h9oIFmsYScsG9WpoUBNvkh0M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":121553},"type":"module","gitHead":"ad407bd77c74ea25b4891e914c1184ccd6942f10","scripts":{"build":"ng-packagr -p ng-package.json"},"_npmUser":{"name":"avsolatorio","email":"avsolatorio@gmail.com"},"repository":{"url":"git+https://github.com/worldbank/data360-mcp.git","type":"git"},"_npmVersion":"11.12.1","description":"Angular components for presenting Data360 MCP tool output (Vega-Lite chart card).","directories":{},"sideEffects":false,"_nodeVersion":"25.9.0","publishConfig":{"access":"public","directory":"dist"},"_hasShrinkwrap":false,"devDependencies":{"rxjs":"^7.8.1","vega":"^5.30.0","vega-lite":"^5.21.0","ng-packagr":"^18.2.1","typescript":"~5.5.4","vega-embed":"^6.26.0","@angular/core":"^18.2.13","@angular/common":"^18.2.13","@angular/compiler":"^18.2.13","@angular/compiler-cli":"^18.2.13","@data360/mcp-viz-core":"0.0.1"},"peerDependencies":{"rxjs":"^7.5.0","vega":">=5.0.0","vega-lite":">=5.0.0","vega-embed":">=6.0.0","@angular/core":">=18.0.0 <21.0.0","@angular/common":">=18.0.0 <21.0.0","@data360/mcp-viz-core":"0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/mcp-ui-angular_0.0.1_1776819268289_0.8024885850513197","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@data360/mcp-ui-angular","version":"0.0.2","keywords":["data360","mcp","angular","vega-lite","world-bank"],"license":"MIT","_id":"@data360/mcp-ui-angular@0.0.2","maintainers":[{"name":"avsolatorio","email":"avsolatorio@gmail.com"},{"name":"rafamacalaba","email":"rafael.macalaba@yahoo.com"}],"homepage":"https://github.com/worldbank/data360-mcp#readme","bugs":{"url":"https://github.com/worldbank/data360-mcp/issues"},"dist":{"shasum":"49618f2aa6982dfb40d6c4a38d314831fe26bc46","tarball":"https://registry.npmjs.org/@data360/mcp-ui-angular/-/mcp-ui-angular-0.0.2.tgz","fileCount":13,"integrity":"sha512-YmzR2ZDfOJOEQWe4q+SKfLHSnwR6f4p/CV6B7YRuMt/QYPbGtLgmiOQqaJVbRzCtdoY6TcWab6nGL+lz10g3OA==","signatures":[{"sig":"MEUCIEOasYD4VHI1j/3CxJWceJj6+ItNcN347GLw9dJQowZBAiEAlWkKGP9TLN1DWCPo+QR8sSNRA99yi2HiodEemvxeRh8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":161751},"type":"module","gitHead":"7e594bcd9a6a32cf949ed417695ab59d16e276ae","scripts":{"build":"ng-packagr -p ng-package.json"},"_npmUser":{"name":"avsolatorio","email":"avsolatorio@gmail.com"},"repository":{"url":"git+https://github.com/worldbank/data360-mcp.git","type":"git"},"_npmVersion":"11.12.1","description":"Angular components for presenting Data360 MCP tool output (Vega-Lite chart card).","directories":{},"sideEffects":false,"_nodeVersion":"25.9.0","dependencies":{"html-to-image":"^1.11.13"},"publishConfig":{"access":"public","directory":"dist"},"_hasShrinkwrap":false,"devDependencies":{"rxjs":"^7.8.1","vega":"^5.30.0","vega-lite":"^5.21.0","ng-packagr":"^18.2.1","typescript":"~5.5.4","vega-embed":"^6.26.0","@angular/core":"^18.2.13","@angular/common":"^18.2.13","@angular/compiler":"^18.2.13","@data360/tool-types":"0.0.4","@angular/compiler-cli":"^18.2.13","@data360/mcp-viz-core":"0.0.2","@data360/chart-payload-normalize":"0.0.1"},"peerDependencies":{"rxjs":"^7.5.0","vega":">=5.0.0","vega-lite":">=5.0.0","vega-embed":">=6.0.0","@angular/core":">=18.0.0 <21.0.0","@angular/common":">=18.0.0 <21.0.0","@data360/tool-types":"0.0.4","@data360/mcp-viz-core":"0.0.2","@data360/chart-payload-normalize":"0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/mcp-ui-angular_0.0.2_1777353247188_0.06233440737642315","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@data360/mcp-ui-angular","version":"0.0.3","description":"Angular components for presenting Data360 MCP tool output (Vega-Lite chart card).","type":"module","module":"./dist/fesm2022/data360-mcp-ui-angular.mjs","typings":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/fesm2022/data360-mcp-ui-angular.mjs","default":"./dist/fesm2022/data360-mcp-ui-angular.mjs"}},"scripts":{"build":"ng-packagr -p ng-package.json","prepublishOnly":"npm run build"},"dependencies":{"html-to-image":"^1.11.13"},"peerDependencies":{"@angular/common":">=17.0.0 <21.0.0","@angular/core":">=17.0.0 <21.0.0","@data360/chart-payload-normalize":"0.0.1","@data360/mcp-viz-core":"0.0.2","@data360/tool-types":"0.0.4","rxjs":"^7.5.0","vega":">=5.0.0","vega-embed":">=6.0.0","vega-lite":">=5.0.0"},"devDependencies":{"@data360/chart-payload-normalize":"0.0.1","@data360/mcp-viz-core":"0.0.2","@data360/tool-types":"0.0.4","@angular/common":"^18.2.14","@angular/compiler":"^18.2.14","@angular/compiler-cli":"^18.2.14","@angular/core":"^18.2.14","ng-packagr":"^18.2.1","rxjs":"^7.8.1","typescript":"~5.5.4","vega":"^5.30.0","vega-embed":"^6.26.0","vega-lite":"^5.21.0"},"keywords":["data360","mcp","angular","vega-lite","world-bank"],"license":"MIT","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/worldbank/data360-mcp.git"},"sideEffects":false,"gitHead":"2503333943de17ae0f5dc96c295777941dff8caf","_id":"@data360/mcp-ui-angular@0.0.3","bugs":{"url":"https://github.com/worldbank/data360-mcp/issues"},"homepage":"https://github.com/worldbank/data360-mcp#readme","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-a19qLH2N9/VXL3XtGDNawopSKSsa+XE2hP3HSYv1dbegJ1G+/pKIAx3TcCY2d9zf6f9vtvTN1r7Qb6EJ8garDA==","shasum":"efedacb5fe121915c96fec508b6af9c4ab50d31c","tarball":"https://registry.npmjs.org/@data360/mcp-ui-angular/-/mcp-ui-angular-0.0.3.tgz","fileCount":13,"unpackedSize":177082,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCVtQri4oV9ZBiGBvBcCv+tGsShbIY2VJl349gDJj7EvgIgFskGxqY0HMK0nC/dZUMzJDQOj7r2q+urZIkR6kOmeao="}]},"_npmUser":{"name":"avsolatorio","email":"avsolatorio@gmail.com"},"directories":{},"maintainers":[{"name":"avsolatorio","email":"avsolatorio@gmail.com"},{"name":"rafamacalaba","email":"rafael.macalaba@yahoo.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mcp-ui-angular_0.0.3_1777862122201_0.05270526469508563"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-22T00:54:28.204Z","modified":"2026-05-04T02:35:22.496Z","0.0.1":"2026-04-22T00:54:28.433Z","0.0.2":"2026-04-28T05:14:07.390Z","0.0.3":"2026-05-04T02:35:22.342Z"},"bugs":{"url":"https://github.com/worldbank/data360-mcp/issues"},"license":"MIT","homepage":"https://github.com/worldbank/data360-mcp#readme","keywords":["data360","mcp","angular","vega-lite","world-bank"],"repository":{"type":"git","url":"git+https://github.com/worldbank/data360-mcp.git"},"description":"Angular components for presenting Data360 MCP tool output (Vega-Lite chart card).","maintainers":[{"name":"avsolatorio","email":"avsolatorio@gmail.com"},{"name":"rafamacalaba","email":"rafael.macalaba@yahoo.com"}],"readme":"# @data360/mcp-ui-angular\n\nAngular **standalone** components for presenting Data360 MCP tool output, aligned with the React [`@data360/mcp-ui`](../mcp-ui) chart card and the shared [`@data360/mcp-viz-core`](../mcp-viz-core) pipeline.\n\n## Install\n\n```bash\nnpm install @data360/mcp-ui-angular @data360/mcp-viz-core @data360/tool-types vega vega-lite vega-embed\n```\n\n`@data360/tool-types` is optional but recommended for parsing MCP tool results before passing a `spec` into the component.\n\n## Vega chart card\n\nImport `Data360VegaChartCardComponent` and add it to your standalone component’s `imports` (or declare it in an `NgModule`).\n\n```typescript\nimport { Component, OnInit } from \"@angular/core\";\nimport {\n parseData360VizToolResult,\n isData360VizToolSuccess,\n} from \"@data360/tool-types\";\nimport type { VLSpec } from \"@data360/mcp-viz-core\";\nimport { Data360VegaChartCardComponent } from \"@data360/mcp-ui-angular\";\n\n@Component({\n selector: \"app-chart\",\n standalone: true,\n imports: [Data360VegaChartCardComponent],\n template: `\n \n `,\n})\nexport class ChartExampleComponent implements OnInit {\n spec!: VLSpec;\n subtitle = \"Brazil, India · 2018–2022\";\n source = \"World Bank — WDI\";\n annotations = [{ id: 1, text: \"Example callout.\" }];\n\n // Replace with your MCP tool result payload.\n toolResult: unknown = {};\n\n async ngOnInit() {\n const parsed = parseData360VizToolResult(this.toolResult);\n if (!parsed.success || !isData360VizToolSuccess(parsed.data)) return;\n const specResponse = await fetch(parsed.data.url);\n this.spec = await specResponse.json();\n }\n}\n```\n\n### Right-rail top slot (React `railTopSlot`)\n\nPass an `ng-template` to **`[railTopSlot]`** for optional content above the action icons (e.g. expand in chat):\n\n```html\n\n \n\n\n\n```\n\n### Optional handlers\n\nSame contract as React: **`[onDownload]`** and **`[onExport]`** accept callbacks; if omitted, the component triggers default CSV / PNG downloads in the browser.\n\n### Peer dependencies\n\n| Package | Notes |\n|--------|--------|\n| `@angular/core`, `@angular/common` | **17.0.0**–20.x (see `package.json` peer range `>=17.0.0 <21.0.0`) |\n| `@data360/mcp-viz-core` | Same major/minor as this package |\n| `rxjs` | ^7.5 |\n| `vega`, `vega-lite`, `vega-embed` | Same as React viz card |\n\n## Development\n\nFrom `packages/mcp-ui-angular`:\n\n```bash\nnpm install\nnpm run build\n```\n\nOutput is written to `dist/` (FESM bundles and typings for publishing).\n\n### Publishing to npm\n\nThe published tarball is the **package root** plus the **`dist/`** tree only (`files` in `package.json`). Entry points use **`./dist/...`** (`module`, `typings`, and `exports`).\n\nFrom the monorepo root (after `npm login`):\n\n```bash\nnpm pack -w @data360/mcp-ui-angular --dry-run # optional: inspect tarball\nnpm publish -w @data360/mcp-ui-angular --access public\n```\n\n`prepublishOnly` runs **`npm run build`** so `dist/` is fresh before publish.\n\n### Live demo app\n\nA runnable sample app lives in **`packages/mcp-ui-angular-demo`** in this repo ([browse on GitHub](https://github.com/worldbank/data360-mcp/tree/main/packages/mcp-ui-angular-demo)). Clone the monorepo, then from `packages/mcp-ui-angular-demo`: `npm run build:libs`, then `npm install`, then `npm start` (see [that folder’s README](https://github.com/worldbank/data360-mcp/blob/main/packages/mcp-ui-angular-demo/README.md)).\n\n## Version coupling\n\nKeep versions aligned across **`@data360/tool-types`**, **`@data360/mcp-viz-core`**, **`@data360/mcp-ui`**, and **`@data360/mcp-ui-angular`** when viz contracts or `prepareSpec` behavior changes (see [`packages/mcp-ui` compatibility table](../mcp-ui/README.md)).\n","readmeFilename":"README.md"}