# ngx-vud

[![npm version](https://badge.fury.io/js/%40vismaux%2Fngx-vud.svg)](https://www.npmjs.com/package/@vismaux/ngx-vud)
[![Main CI & CD](https://github.com/Visma-Unified-Design/ngx-vud/actions/workflows/main-ci-cd.yml/badge.svg)](https://github.com/Visma-Unified-Design/ngx-vud/actions/workflows/main-ci-cd.yml)

Common [Visma Unified Design](https://ux.visma.com) components for [Angular](https://angular.io).

- 🔥 Follows the official [Visma Unified 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;
- 🔥 Accessibility in mind;

## Demo & documentation

[https://ngx-vud.web.app](https://ngx-vud.web.app)

## Compatibility table

| @vismaux/ngx-vud | @vismaux/vud | @angular/\* |
| :--------------: | :----------: | :---------: |
|     ^13.0.0      |    ^1.7.0    |   ^17.0.0   |
|     ^12.0.0      |    ^1.6.3    |   ^16.0.0   |
|     ^11.0.0      |    ^1.6.3    |   ^15.0.0   |
|     ^10.0.0      |    ^1.6.3    |   ^14.1.0   |

> still looking for outdated nordic-cool version? [switch branch](https://github.com/Visma-Unified-Design/ngx-vud/tree/nordic-cool)

## Installation

```sh
ng add @vismaux/ngx-vud
```

## Manual installation

1. Install this package together with two peer dependencies:

   ```sh
   npm i @vismaux/ngx-vud @vismaux/vud @angular/cdk
   ```

2. Import required styles inside your global (e.g. `style.scss`) file:

   ```scss
   // One import that includes both global `@vismaux/vud` styles (dark-light) and extensions needed for the library.
   @use '@vismaux/ngx-vud';

   // 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/vud/dist/css/vud.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. (Optional) [Setup the icons](#icons) if you plan to use the `<vud-icon />` component.

## Icons

The required assets for the icons are not built into the package and requires setting them up separately.  
This is mandatory if you plan to use the `<vud-icon />` component.  
There are two ways to setup this.

```scss
// Option A (recommended): import from local assets
// this requires `@vismaux/vud-icons` npm package to be installed
@import '@vismaux/vud-icons/dist/css/vud-icons.min.css';

// Option B: import straight from CDN
// instructions taken from https://ux.visma.com/weblibrary/latest/index.php
@import 'https://vud-icons.s3.eu-north-1.amazonaws.com/latest/dist/css/vud-icons.min.css';
```

## 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 Visma Unified Design guidelines. 🙏