# `@vmsw/styling`

NPM package voor styling van VMSW toepassingen, gebaseerd op [Webuniversum](https://overheid.vlaanderen.be/webuniversum/v3/documentation)

# Inhoudstafel
- [Installatie](#Installatie)
- [Configuratie](#Configuratie)
- [Gebruik components](#Gebruik-components)
- [Gebruik JS-components](#Gebruik-js-components)
    - [Drilldown](#Drilldown)
    - [Select](#Select)

# Installatie

Om te beginnen, moet de npm package in de toepassing geïnstalleerd worden.

```console
npm install @vmsw/styling
```

# Configuratie

`@vmsw/styling` heeft 3 files in de dist folder: ***vmsw.webuniversum.css***, ***vmsw.webuniversum.js*** en ***vmsw.webuniversum-reset.css***
***vmsw.webuniversum.css*** en ***vmsw.webuniversum.js*** moeten geconfigureerd worden in ***angular.json***:

**angular.json**

```javascript
...
"styles": [
    ...
    "node_modules/@vmsw/styling/dist/vmsw.webuniversum.css"
],
"scripts": [
    ...
    "node_modules/@vmsw/styling/dist/vmsw.webuniversum.js"
]
```

***vmsw.webuniversum-reset.css*** is een optioneel bestand dat styling van basiselementen gaat resetten, als dit geen problemen geeft laadt je dit ook best in:

**angular.json**

```javascript
...
"styles": [
    ...
    "node_modules/@vmsw/styling/dist/vmsw.webuniversum-reset.css"
]
```

## Dependencies
`@vmsw/styling` heeft als dependency `FontAwesome 4`, deze zal je zelf nog moeten toevoegen aan je project.

**angular.json**
```javascript
...
"styles": [
    ...
    "node_modules/font-awesome/css/font-awesome.css"
]
```

# Gebruik components

Volgende ***webuniversum*** componenten zijn momenteel beschikbaar:

- [vl-ui-action-group](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-action-group)
- [vl-ui-button](https://overheid.vlaanderen.be/webuniversum/v3/documentation/atoms/vl-ui-button)
- [vl-ui-checkbox](https://overheid.vlaanderen.be/webuniversum/v3/documentation/forms/vl-ui-checkbox)
- [vl-ui-data-table](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-data-table)
- [vl-ui-document](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-document)
- [vl-ui-drilldown](https://overheid.vlaanderen.be/webuniversum/v3/documentation/js-components/vl-ui-drilldown)
- [vl-ui-form-message](https://overheid.vlaanderen.be/webuniversum/v3/documentation/forms/vl-ui-form-message)
- [vl-ui-form-structure](https://overheid.vlaanderen.be/webuniversum/v3/documentation/forms/vl-ui-form-structure)
- [vl-ui-icon](https://overheid.vlaanderen.be/webuniversum/v3/documentation/atoms/vl-ui-icon)
- [vl-ui-icon-list](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-icon-list)
- [vl-ui-input-field](https://overheid.vlaanderen.be/webuniversum/v3/documentation/forms/vl-ui-input-field)
- [vl-ui-link](https://overheid.vlaanderen.be/webuniversum/v3/documentation/atoms/vl-ui-link)
- [vl-ui-link-list](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-link-list)
- [vl-ui-pager](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-pager)
- [vl-ui-pill](https://overheid.vlaanderen.be/webuniversum/v3/documentation/atoms/vl-ui-pill)
- [vl-ui-radio](https://overheid.vlaanderen.be/webuniversum/v3/documentation/forms/vl-ui-radio)
- [vl-ui-search](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-search)
- [vl-ui-select](https://overheid.vlaanderen.be/webuniversum/v3/documentation/forms/vl-ui-select)
- [vl-ui-spotlight](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-spotlight)
- [vl-ui-steps](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-steps)
- [vl-ui-tabs](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-tabs)
- [vl-ui-textarea](https://overheid.vlaanderen.be/webuniversum/v3/documentation/forms/vl-ui-textarea)
- [vl-ui-modal](https://overheid.vlaanderen.be/webuniversum/v3/documentation/js-components/vl-ui-modal)
- [vl-ui-accordion](https://overheid.vlaanderen.be/webuniversum/v3/documentation/js-components/vl-ui-accordion)
- [vl-ui-progress-bar](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-progress-bar)

# Gebruik js-components

Om de [js-components van Webuniversum](https://overheid.vlaanderen.be/webuniversum/v3/documentation/js-components) te kunnen gebruiken, moeten de componenten manueel geïnitialiseerd worden.

**[feature].component.ts**
```typescript
import { Component, OnInit } from '@angular/core';
...
declare var vl: any;
```

```typescript
@ViewChild('element') public element: ElementRef;
ngOnInit() {
    ...
    vl.[component].dress(document.getElementById('[id]');
    vl.[component].dress(this.element.nativeElement); // The Angular way
}
```

## Drilldown

```typescript
@ViewChild('element') public element: ElementRef;
ngOnInit() {
    ...
    vl.drilldown.dress(document.getElementById('[id]');
    vl.[component].dress(this.element.nativeElement); // The Angular way
}
```

## Select

```typescript
@ViewChild('element') public element: ElementRef;
ngOnInit() {
    ...
    vl.select.dress(document.getElementById('[id]');
    vl.[component].dress(this.element.nativeElement); // The Angular way
}
```