@vismaux/ngx-nordic-cool
Version:
Common Nordic-Cool components for Angular.
84 lines (55 loc) • 3.92 kB
Markdown
# ngx-nordic-cool
[](https://www.npmjs.com/package/@vismaux/ngx-nordic-cool)
[](https://github.com/Nordic-Cool/ngx-nordic-cool/actions/workflows/main-ci-cd.yml)
Common [Nordic Cool](https://ux.visma.com) components for [Angular](https://angular.io).
- 🔥 Follows the [official nordic cool design](https://ux.visma.com);
- 🔥 Uses [storybook](https://storybook.js.org/);
- 🔥 Dark mode ready;
- 🔥 Follows [semantic versioning](https://semver.org/);
- 🔥 Uses [conventional commits](https://www.conventionalcommits.org) together with [standard version](https://github.com/conventional-changelog/standard-version) for a better changelog;
## Demo & documentation
[https://ngx-nordic-cool.web.app](https://ngx-nordic-cool.web.app)
## Compatibility table
| @vismaux/ngx-nordic-cool | @vismaux/nordic-cool | @angular/\* |
| :----------------------: | :------------------: | :---------: |
| >=4.0.0 | >=4.10.0 | >=13.0.0 |
| >=3.2.0 | >=4.10.0 | >=12.0.0 |
| >=3.0.0 | >=4.8.11 | >=12.0.0 |
| >=2.0.0 | >=4.8.10 | >=11.0.0 |
| >=1.0.0 <2.0.0 | >=4.8.0 <4.8.10 | >=11.0.0 |
## Installation
`ng add @vismaux/ngx-nordic-cool`
## Manual installation
1. Install this package together with two peer dependencies:
`npm i @vismaux/ngx-nordic-cool @vismaux/nordic-cool @angular/cdk`
> If you're using npm@v7 you only have to install `@vismaux/ngx-nordic-cool` as it will automatically install peer dependencies for you.
2. Import required styles inside your global (e.g. `style.scss`) file:
```scss
// One import that includes both global `@vismaux/nordic-cool` styles (dark-light) and extensions needed for the library.
@use '@vismaux/ngx-nordic-cool';
// In case you don't need the dark mode, don't use SCSS, or just want to have a more granual control, import these prebuilt files manully:
// @import '~@vismaux/nordic-cool/dist/css/nc.light-dark.mode.min.css';
// @import '~@angular/cdk/overlay-prebuilt.css';
```
3. Setup animations by importing `BrowserAnimationsModule` in your `app.module.ts`.
> Use `NoopAnimationsModule` in case you don't want animations.
4. This library's i18n is based on `@angular/localize`, so make sure you've installed that. Otherwise, run `ng add @angular/localize`. In case you're not familiar with [angular's i18n](https://angular.io/guide/i18n), read the localization section below.
5. Import the global `NordicCoolModule` module that contains all components,
or pick specific ones (recommended), e.g. `NcDatepickerModule`.
## Localization
If you're not using the native angular localization process that requires building application for each locale, you can take use of [dynamically loading translations](https://angular.io/api/localize/loadTranslations) which is available from Angular v9.
```ts
import { loadTranslations } from '@angular/localize';
// Make sure this is called *before* initialization of components that uses these translations
loadTranslations({
'nc-alert-close': 'Uždaryti',
});
```
> To get the list of all possible translations you can run `ng extract-i18n`.
## Browser support
Follows [PDAB Compatibility Policy](https://confluence.visma.com/display/PDAB/PDAB+Compatibility+Policy):
the latest major stable version of Firefox, Chrome, Safari and Edge are supported. **No support for IE.**
## Contributing to the library
You are more than welcome to open an issue or create a pull-request.
In the latter case, please make sure the changes follows the same coding principles,
is covered with unit tests and meets the official nordic cool design guidelines. 🙏