# ngx-nordic-cool

[![npm version](https://badge.fury.io/js/%40vismaux%2Fngx-nordic-cool.svg)](https://www.npmjs.com/package/@vismaux/ngx-nordic-cool)
[![Main CI & CD](https://github.com/Nordic-Cool/ngx-nordic-cool/actions/workflows/main-ci-cd.yml/badge.svg)](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. 🙏