{"_id":"@visa/nova-angular","_rev":"8-6c5aa4b931cdf24e97ad3a488871bddf","name":"@visa/nova-angular","dist-tags":{"latest":"7.0.0"},"versions":{"5.1.1":{"name":"@visa/nova-angular","version":"5.1.1","author":{"name":"Visa Product Design System"},"license":"Apache-2.0","_id":"@visa/nova-angular@5.1.1","maintainers":[{"name":"david.kutas.npm","email":"david.kutas.npm@gmail.com"},{"name":"chris-demartini","email":"chris.demartini.npm@gmail.com"},{"name":"visaproductdesignsystem","email":"productdesignsystem@visa.com"}],"homepage":"https://productdesignsystem.visa.com/","dist":{"shasum":"915bb7f7b731785aaffb32961c2a802c1152c297","tarball":"https://registry.npmjs.org/@visa/nova-angular/-/nova-angular-5.1.1.tgz","fileCount":254,"integrity":"sha512-s/7xnKSx+umK0YiTmBEOQS56+I0f9RtzkZX7xrfei9CBJCole8Z7Jt9M0CXata3C43MWNqVN6o1Eg94FSPYAog==","signatures":[{"sig":"MEUCIBiWiOfUYwJ+o2prblSeKx84HIycaGYXZa9pX/h0K5d0AiEA87BEtx02JkBpNUpKAsc7qGYdVaq9PwXVh0VLhJGllzQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3549532},"module":"fesm2022/visa-nova-angular.mjs","exports":{".":{"esm":"./esm2022/visa-nova-angular.mjs","types":"./index.d.ts","default":"./fesm2022/visa-nova-angular.mjs","esm2022":"./esm2022/visa-nova-angular.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"4bc3c85b1af3bd2a29de182bfc884cd49bc6010b","typings":"index.d.ts","_npmUser":{"name":"visaproductdesignsystem","email":"productdesignsystem@visa.com"},"_npmVersion":"10.8.2","description":"Visa Product Design System Nova Angular library","directories":{},"sideEffects":false,"_nodeVersion":"20.18.0","dependencies":{"tslib":"^2.6.2","@angular/cdk":"^16 || ^17","@angular/core":"^16 || ^17","@angular/common":"^16 || ^17"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"~7.8.0","@angular/forms":"^16 || ^17","@angular/router":"^16 || ^17","@floating-ui/dom":"^1.6.5","@visa/nova-styles":"^1.5.8"},"_npmOperationalInternal":{"tmp":"tmp/nova-angular_5.1.1_1742857488178_0.4691178185016718","host":"s3://npm-registry-packages-npm-production"}},"5.1.2":{"name":"@visa/nova-angular","version":"5.1.2","keywords":["angular","design system","javascript","nova","nx","typescript","ui","visa","visa design","visa design system","visa product design system"],"author":{"name":"Visa Product Design System"},"license":"Apache-2.0","_id":"@visa/nova-angular@5.1.2","maintainers":[{"name":"david.kutas.npm","email":"david.kutas.npm@gmail.com"},{"name":"chris-demartini","email":"chris.demartini.npm@gmail.com"},{"name":"visaproductdesignsystem","email":"productdesignsystem@visa.com"}],"dist":{"shasum":"091977d692890c5cce4d490b003bdfcdc9319295","tarball":"https://registry.npmjs.org/@visa/nova-angular/-/nova-angular-5.1.2.tgz","fileCount":256,"integrity":"sha512-tI/N/u85xj6cTr9wf+rmHN7RHSDDdcPVqm66CMl1PCDADG3OmHaYNa5MwFeECC0Lrh4H18tUJJnbwBWo8zC0PA==","signatures":[{"sig":"MEQCIBvJV1sJrSsLe06ANaao7do8y+LsS/0pz3b9AiS5SbYmAiBjnDcBrMPHTkryA1uGHwn2f+/cQcYS4g00Md3l1Az+Kw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3586190},"module":"fesm2022/visa-nova-angular.mjs","exports":{".":{"esm":"./esm2022/visa-nova-angular.mjs","types":"./index.d.ts","default":"./fesm2022/visa-nova-angular.mjs","esm2022":"./esm2022/visa-nova-angular.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"a55b0e0171c517e7d9c6eb6a2151e0a9767a08ab","typings":"index.d.ts","_npmUser":{"name":"visaproductdesignsystem","email":"productdesignsystem@visa.com"},"_npmVersion":"10.8.2","description":"Visa Product Design System Nova Angular library","directories":{},"sideEffects":false,"_nodeVersion":"20.18.0","dependencies":{"tslib":"^2.6.2","@angular/cdk":"^16 || ^17","@angular/core":"^16 || ^17","@angular/common":"^16 || ^17"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"~7.8.0","@angular/forms":"^16 || ^17","@angular/router":"^16 || ^17","@floating-ui/dom":"^1.6.5","@visa/nova-styles":"^1.6.1"},"_npmOperationalInternal":{"tmp":"tmp/nova-angular_5.1.2_1743010735783_0.41138149141004576","host":"s3://npm-registry-packages-npm-production"}},"5.1.3":{"name":"@visa/nova-angular","version":"5.1.3","keywords":["angular","design system","javascript","nova","nx","typescript","ui","visa","visa design","visa design system","visa product design system"],"author":{"name":"Visa Product Design System"},"license":"Apache-2.0","_id":"@visa/nova-angular@5.1.3","maintainers":[{"name":"david.kutas.npm","email":"david.kutas.npm@gmail.com"},{"name":"chris-demartini","email":"chris.demartini.npm@gmail.com"},{"name":"visaproductdesignsystem","email":"productdesignsystem@visa.com"}],"dist":{"shasum":"92716ec56dd25bc6e075a8a776152979deb0abb4","tarball":"https://registry.npmjs.org/@visa/nova-angular/-/nova-angular-5.1.3.tgz","fileCount":254,"integrity":"sha512-GoaT01czwI/SS0XMFoMlqvUhu195bh56EvUBd6HqDo4h4T7wUQwowqHuHXXROdS5PjyS2C7oYWWloDSJjLwKrw==","signatures":[{"sig":"MEQCIELmeEss6jesledo9so6B9EPv+U4YmDDH++zOeQhYXBqAiAP6ZQI7Q1xkc6YDU2hFj3erq1b7Erccy7opY+TnnHXig==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3537582},"module":"fesm2022/visa-nova-angular.mjs","exports":{".":{"esm":"./esm2022/visa-nova-angular.mjs","types":"./index.d.ts","default":"./fesm2022/visa-nova-angular.mjs","esm2022":"./esm2022/visa-nova-angular.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"15f297caec4fffa4ab19c244276b509d494709bf","typings":"index.d.ts","_npmUser":{"name":"visaproductdesignsystem","email":"productdesignsystem@visa.com"},"_npmVersion":"10.2.3","description":"Visa Product Design System Nova Angular library","directories":{},"sideEffects":false,"_nodeVersion":"20.10.0","dependencies":{"tslib":"^2.6.2","@angular/cdk":"^16 || ^17","@angular/core":"^16 || ^17","@angular/common":"^16 || ^17"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"~7.8.0","@angular/forms":"^16 || ^17","@angular/router":"^16 || ^17","@floating-ui/dom":"^1.6.5","@visa/nova-styles":"^1.6.1"},"_npmOperationalInternal":{"tmp":"tmp/nova-angular_5.1.3_1744391210182_0.9474986245241388","host":"s3://npm-registry-packages-npm-production"}},"6.0.2":{"name":"@visa/nova-angular","version":"6.0.2","keywords":["angular","design system","javascript","nova","nx","typescript","ui","visa","visa design","visa design system","visa product design system"],"author":{"name":"Visa Product Design System"},"license":"Apache-2.0","_id":"@visa/nova-angular@6.0.2","maintainers":[{"name":"chris-demartini","email":"chris.demartini.npm@gmail.com"},{"name":"visaproductdesignsystem","email":"productdesignsystem@visa.com"}],"dist":{"shasum":"47457b4cb68cde8793a8af01c34be2db15817ab3","tarball":"https://registry.npmjs.org/@visa/nova-angular/-/nova-angular-6.0.2.tgz","fileCount":7,"integrity":"sha512-7eH8ugRfl9VnFNwL3wYBwk5qS5oq0gB2nqXFUr00EFicjdFdh/EtyaxDOxrlae35PN7kJeSJzMoIzozqkZ2rgQ==","signatures":[{"sig":"MEUCIHp4YwRpC8Wkd1uo3fTkITWI6oQEKOqiFc06jFqTd1tOAiEAjWQ5KgNVxsFOTQpSXmWEuye0flyJdYgLbJtjFKzV8KE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1419783},"module":"fesm2022/visa-nova-angular.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/visa-nova-angular.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"f1782669162715ee7565a1e83762dda4e6213807","typings":"index.d.ts","_npmUser":{"name":"visaproductdesignsystem","email":"productdesignsystem@visa.com"},"_npmVersion":"10.9.2","description":"Visa Product Design System Nova Angular library","directories":{},"sideEffects":false,"_nodeVersion":"22.13.0","dependencies":{"tslib":"^2.6.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^18 || ^19 || ^20","@angular/forms":"^18 || ^19 || ^20","@angular/common":"^18 || ^19 || ^20","@floating-ui/dom":"^1.6.5","@visa/nova-styles":"^1.6.4"},"_npmOperationalInternal":{"tmp":"tmp/nova-angular_6.0.2_1758922227354_0.4823432851470508","host":"s3://npm-registry-packages-npm-production"}},"7.0.0":{"name":"@visa/nova-angular","version":"7.0.0","keywords":["angular","design system","javascript","nova","nx","typescript","ui","visa","visa design","visa design system","visa product design system"],"author":{"name":"Visa Product Design System"},"license":"Apache-2.0","_id":"@visa/nova-angular@7.0.0","maintainers":[{"name":"chris-demartini","email":"chris.demartini.npm@gmail.com"},{"name":"jbrans-visa","email":"jbrans@visa.com"},{"name":"visaproductdesignsystem","email":"productdesignsystem@visa.com"}],"dist":{"shasum":"018f2721146b56b071a6927c36039b7f76076671","tarball":"https://registry.npmjs.org/@visa/nova-angular/-/nova-angular-7.0.0.tgz","fileCount":6,"integrity":"sha512-Mzh4MsbTO+tn68DXoyEfqHxjO6/iprjHoZ/caX+fgs+TQ6JESPG6hJf2c04RaSFMy8j+b6uE2ZNevrbaUGS2LA==","signatures":[{"sig":"MEUCIDfzij1SQGMR4FtopYfW/XCOZnFASnU46p2CzEd/b8a5AiEAjNPQAyF8v6FQh9KDCzk65Eu6PX2ai1TzYPvBnROATvw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1463742},"module":"fesm2022/visa-nova-angular.mjs","exports":{".":{"types":"./types/visa-nova-angular.d.ts","default":"./fesm2022/visa-nova-angular.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"823bee3abfca142890743314c55e1c6945d4a1a5","typings":"types/visa-nova-angular.d.ts","_npmUser":{"name":"visaproductdesignsystem","email":"productdesignsystem@visa.com"},"_npmVersion":"10.9.2","description":"Visa Product Design System Nova Angular library. Compatible with Angular ^19.0.0 || ^20.0.0 || ^21.0.0.","directories":{},"sideEffects":false,"_nodeVersion":"22.13.0","dependencies":{"tslib":"^2.6.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^19.0.0 || ^20.0.0 || ^21.0.0","@angular/forms":"^19.0.0 || ^20.0.0 || ^21.0.0","@angular/common":"^19.0.0 || ^20.0.0 || ^21.0.0","@floating-ui/dom":"^1.6.5","@visa/nova-styles":"^1.6.4"},"_npmOperationalInternal":{"tmp":"tmp/nova-angular_7.0.0_1774036920986_0.07960625566390966","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-03-24T23:04:48.062Z","modified":"2026-04-03T19:31:49.904Z","5.1.1":"2025-03-24T23:04:48.459Z","5.1.2":"2025-03-26T17:38:56.022Z","5.1.3":"2025-04-11T17:06:50.474Z","6.0.2":"2025-09-26T21:30:27.626Z","7.0.0":"2026-03-20T20:02:01.171Z"},"author":{"name":"Visa Product Design System"},"license":"Apache-2.0","keywords":["angular","design system","javascript","nova","nx","typescript","ui","visa","visa design","visa design system","visa product design system"],"description":"Visa Product Design System Nova Angular library. Compatible with Angular ^19.0.0 || ^20.0.0 || ^21.0.0.","maintainers":[{"email":"chris.demartini.npm@gmail.com","name":"chris-demartini"},{"email":"jbrans@visa.com","name":"jbrans-visa"},{"email":"michayan@visa.com","name":"michaelyang1"},{"email":"productdesignsystem@visa.com","name":"visaproductdesignsystem"}],"readme":"<!--\n *              © 2025-2026 Visa\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *         http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n -->\n\n# Visa Product Design System - Nova Angular\n\n- [About](#about)\n- [Security](#security)\n- [Background](#background)\n- [Install](#install)\n- [Usage](#usage)\n- [Why Nova Angular?](#why-nova-angular)\n- [Testing](#testing)\n- [Maintainers](#maintainers)\n- [Thanks](#thanks)\n- [Contributing](#contributing)\n- [License](#license)\n\n## <a name=\"about\"></a>Nova Angular\n\n> Accessible Visa Product Design System components built for Angular\n\nNova Angular is a comprehensive library of accessible components designed to align with the Visa Product Design System.\nIt provides developers with a set of reusable UI elements that can be easily integrated into Angular applications. With\nNova Angular, developers can quickly build visually consistent and user-friendly interfaces that adhere to accessibility\nbest practices.\n\n### Key Features\n\n- **Wide range of components**: Includes buttons, form elements, navigation menus, and more.\n- **Customizable**: Built on Nova Styles CSS, allowing for extensive theming and customization.\n- **Accessibility**: Adheres to accessibility best practices to ensure inclusive user experiences.\n- **Flexible state management**: Supports bring-your-own state, enabling custom services and classes.\n\nWhether you are building a small project or a large-scale application, Nova Angular offers a robust foundation for\ncreating visually appealing and accessible user interfaces.\n\nThis library is built on our Nova Styles CSS which is extremely theme-able/customizable and the Angular components are\nnow bring-your-own state. That means if our examples, styles, or behaviors don't cover your use case then you just add\nyour own services, classes, or themes and now the world is your oyster!\n\n## <a name=\"security\"></a>Security\n\nOur package follows security best practices and ensures the safety of user data. It relies on a minimal number of\ndependencies, minimizing potential vulnerabilities.\n\n## <a name=\"install\"></a>Install\n\nAvailable through the [NPM](https://www.npmjs.com/).\n\n**NPM:**\n\n```sh\nnpm install @visa/nova-angular\n```\n\n**PNPM:**\n\n```sh\npnpm install @visa/nova-angular\n```\n\n**Yarn:**\n\n```sh\nyarn add @visa/nova-angular\n```\n\n**Bun:**\n\n```sh\nbun add @visa/nova-angular\n```\n\n### Dependencies\n\nView our package.json for the most up-to-date dependencies, including peer dependencies and dev dependencies.\n\n## <a name=\"usage\"></a>Usage\n\n### Step 1: Update Angular\n\nNova Angular supports Angular v16 and v17. Visit Angular’s guide on how to update\n[Angular to v16](https://angular.dev/update-guide?v=15.0-16.0&l=1) or update\n[Angular to v17](https://angular.dev/update-guide?v=16.0-17.0&l=1).\n\n### Step 2: Install the library\n\nReference our [install guidelines](#install).\n\n### Step 3: Set up the application\n\n#### Import Nova styles\n\nImport the Nova Styles library and theme in your `angular.json` or equivalent file. Visa-light is the default theme, but\ncan be replaced with other available themes. To learn more, visit Theming, and for more about Nova Styles, visit Get\nstarted for Styles (CSS).\n\n```json\n\"styles\": [\n    // ...\n    \"node_modules/@visa/nova-styles/styles.css\",\n    \"node_modules/@visa/nova-styles/themes/visa-light/index.css\", // see theme options within node_modules/@visa/nova-styles/themes/\n    // project specific CSS style overrides\n  ],\n```\n\n#### Update compilerOptions\n\nAdd or update your paths in your `tsconfig.json` or equivalent file.\n\n##### Using Angular 16\n\n```json\n{\n  \"compilerOptions\": {\n    ...,\n    \"paths\": {\n      \"@angular/*\": [\"node_modules/@angular/*\"],\n      \"@visa/*\": [\"node_modules/@visa/*\"],\n    }\n  }\n}\n```\n\n##### Using Angular 17\n\n```json\n{\n  \"compilerOptions\": {\n    ...,\n    \"paths\": {\n      \"@visa/*\": [\"node_modules/@visa/*\"],\n    }\n  }\n}\n```\n\n#### Import the Nova Angular component library\n\nImport our library into your standalone component or NgModule.\n\n##### Using standalone Components\n\n```tsx\nimport { NovaLibModule } from '@visa/nova-angular';\n\n@Component({\n  ...\n  standalone: true,\n  imports: [\n    ...\n    NovaLibModule,\n    ...\n  ],\n})\n```\n\n##### Using NgModule\n\n```tsx\nimport { NovaLibModule } from '@visa/nova-angular';\n\n@NgModule({\n  imports: [\n    ...\n    NovaLibModule,\n    ...\n  ],\n})\n```\n\n### Step 4: Add icons (optional)\n\nNova Angular can be used with Nova icons or a custom icon library. This documentation and the component examples use the\nNova icons library. In addition, Angular icons are available as standalone icons or icon sprites. They can be imported\ninto your standalone component file, or your NgModule.\n\n#### Using standalone icons (recommended)\n\nIf you need just a few icons, you can import them directly from `@visa/nova-icons-angular`, then use the icons directly\ninside your HTML.\n\n```html\n<div class=\"my-component\">\n  <svg v-icon-generic-accessability-low />\n  <svg v-icon-generic-calendar-tiny />\n</div>\n```\n\n##### Importing in standalone components\n\n```tsx\nimport { Component } from '@angular/core';\nimport { GenericAccessabilityLow, GenericCalendarTiny } from '@visa/nova-icons-angular';\n\n@Component({\n  selector: 'simple-my-component',\n  templateUrl: './my-component.component.html',\n  standalone: true,\n  imports: [GenericAccessabilityLow, GenericCalendarTiny]\n})\nexport class MyComponent {}\n```\n\n##### Importing in NgModule\n\n```tsx\nimport { NgModule } from '@angular/core';\nimport { GenericAccessabilityLow, GenericCalendarTiny } from '@visa/nova-icons-angular';\n\n@NgModule({\n  selector: 'simple-my-component',\n  templateUrl: './my-component.component.html',\n  standalone: true,\n  imports: [GenericAccessabilityLow, GenericCalendarTiny]\n})\nexport class MyModule {}\n```\n\n#### Icon sprites\n\nIf you need many icons or prefer a single import for all icons of a type, you can use icon sprites. Import them directly\nfrom `@visa/nova-icons-angular`, then use the icons inside your HTML.\n\n```html\n<div class=\"my-component\">\n  <svg v-icon icon=\"information\" iconSize=\"low\" aria-label=\"info\"></svg>\n  ...\n  <v-icon-library-generic></v-icon-library-generic>\n</div>\n```\n\n##### Importing in standalone components\n\n```tsx\nimport { Component } from '@angular/core';\nimport { NovaIconsGenericModule } from '@visa/nova-icons-angular';\n\n@Component({\n  selector: 'simple-my-component',\n  templateUrl: './my-component.component.html',\n  standalone: true,\n  imports: [NovaIconsGenericModule]\n})\nexport class MyComponent {}\n```\n\n##### Importing in NgModule\n\n```tsx\nimport { NgModule } from '@angular/core';\nimport { NovaIconsGenericModule } from '@visa/nova-icons-angular';\n\n@NgModule({\n  selector: 'simple-my-component',\n  templateUrl: './my-component.component.html',\n  standalone: true,\n  imports: [NovaIconsGenericModule]\n})\nexport class MyModule {}\n```\n\n### Step 5: Use the components\n\nAfter adding icons, you’re ready to use Angular components by copying and pasting the example code into your\napplication. Check out any of our components to give it a try.\n\n## <a name=\"why-nova-angular\"></a>Why Nova Angular?\n\n### Light Weight\n\nWe've reduced our library to basic markup components and functional hooks for a lighter, simpler, and more flexible\nexperience.\n\n### Building Blocks\n\nNo more waiting on feature requests. We provide the building blocks for you to easily create and customize your own\ncomponents.\n\n### Built For Developers\n\nNova Angular is sleek and unobtrusive. Our beautifully designed components allow any developer to create stunning apps\nwith ease. We now also support strict type safety, so now type warnings are provided inline, before building and\ndeploying.\n\n## <a name=\"testing\"></a>Testing\n\n### Our Approach\n\nWe conduct rigorous testing using Jest to ensure our components are accessible and meet our high standards. We use Axe\nfor comprehensive accessibility testing and snapshot testing to minimize regression. Each component undergoes individual\nunit testing based on its API, followed by integration testing using examples to ensure seamless interaction.\n\nOur goal is to achieve 100% test coverage for all components. Our pipeline safeguards against merging any code that\nfails our tests. While we have hundreds of tests providing us with full code coverage, we recognize that there is always\nroom for improvement. We are constantly working to improve our testing suite.\n\n## <a name=\"maintainers\"></a>Maintainers\n\nThis project is maintained by the Visa Product Design System engineering team. If you need to get in touch please reach\nout to us via any of our options on our support page.\n\n## <a name=\"thanks\"></a>Thanks\n\nThanks to all those who have contributed and to the Visa Product Design team for all of the hours and thought that have\ngone into making the design system as easy to use as possible.\n\n## <a name=\"contributing\"></a>Contributing\n\nSEE CONTRIBUTING.md\n\n## <a name=\"license\"></a>License\n\nSEE LICENSE IN LICENSE\n","readmeFilename":"README.md"}