@vismaux/ngx-vud

ngx-vud

Common Visma Unified Design components for Angular.

• 🔥 Follows the official Visma Unified Design;
• 🔥 Uses storybook;
• 🔥 Dark mode ready;
• 🔥 Follows semantic versioning;
• 🔥 Uses conventional commits together with standard version for a better changelog;
• 🔥 Accessibility in mind;

Demo & documentation

https://ngx-vud.web.app

Compatibility table

@vismaux/ngx-vud	@vismaux/vud	@angular/*
^11.0.0	^1.6.3	^15.0.0
^10.0.0	^1.6.3	^14.1.0
^9.0.0	^1.5.0	^14.1.0
^8.0.0	^1.5.0	^14.0.0
^7.0.0	^1.0.0	^14.0.0
^5.0.0	^1.0.0	^13.0.0

still looking for outdated nordic-cool version? switch branch

Installation

ng add @vismaux/ngx-vud

Manual installation

1. Install this package together with two peer dependencies:

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

   If you're using npm@v7 you only have to install @vismaux/ngx-vud as it will automatically install peer dependencies for you.

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

   // 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. 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, read the localization section below.

5. Import the global VismaUnifiedDesignModule module that contains all components,
   or pick specific ones (recommended), e.g. VudDatepickerModule.

6. (Optional) Setup the icons if you plan to use the <vud-icon /> component or vismaicon- CSS classes directly.

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 or vismaicon- CSS classes directly.
There are two ways to setup this.

// 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';

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 which is available from Angular v9.

import { loadTranslations } from '@angular/localize';

// Make sure this is called *before* initialization of components that uses these translations
loadTranslations({
  'vud-alert-close': 'Uždaryti',
});

To get the list of all possible translations you can run ng extract-i18n.

Browser support

Follows 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. 🙏