@rijkshuisstijl-community/components-angular 1.2.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -11,55 +11,75 @@ Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) pr
|
|
|
11
11
|
|
|
12
12
|
## Aan de slag met Angular-componenten
|
|
13
13
|
|
|
14
|
-
Om de Angular-componenten van de Rijkshuisstijl
|
|
14
|
+
Om de Angular-componenten van de Rijkshuisstijl Community te gebruiken, installeer je het [components-angular npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-angular).
|
|
15
|
+
|
|
16
|
+
De Angular-componenten hebben geen eigen styling. Om de Rijkshuisstijl aan je project toe te voegen, installeer je het [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens) en [component-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
|
|
17
|
+
|
|
18
|
+
> [!NOTE]
|
|
19
|
+
> Let erop dat je zowel `@rijkshuisstijl-community/design-tokens/dist/index.css` als `@rijkshuisstijl-community/components-css/dist/index.css` importeert in je globale `styles.css` of `styles.scss` **en** dat je componenten gebruikt binnen een element met de `rhc-theme` class. Anders zie je de componenten zonder styling.
|
|
15
20
|
|
|
16
21
|
```bash
|
|
17
|
-
npm install --save-dev @rijkshuisstijl-community/components-angular
|
|
22
|
+
npm install --save-dev @rijkshuisstijl-community/components-angular @rijkshuisstijl-community/components-css @rijkshuisstijl-community/design-tokens
|
|
18
23
|
```
|
|
19
24
|
|
|
20
|
-
Dit installeert de Angular-componenten. Om deze
|
|
25
|
+
Dit installeert de Angular-componenten, de design tokens en de styling. Om deze te gebruiken, importeer je de CSS-bestanden in je globale stylesheet en de Angular modules in je app.
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
@import '@rijkshuisstijl-community/design-tokens/dist/index.css';
|
|
29
|
+
@import '@rijkshuisstijl-community/components-css/dist/index.css';
|
|
30
|
+
```
|
|
21
31
|
|
|
22
32
|
```ts
|
|
33
|
+
import { Component } from '@angular/core';
|
|
23
34
|
import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
|
|
24
35
|
|
|
25
36
|
@Component({
|
|
26
37
|
selector: 'app-root',
|
|
27
38
|
imports: [ButtonComponent],
|
|
28
|
-
|
|
29
|
-
|
|
39
|
+
template: `
|
|
40
|
+
<main class="rhc-theme">
|
|
41
|
+
<button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
|
|
42
|
+
</main>
|
|
43
|
+
`,
|
|
30
44
|
})
|
|
31
|
-
export class
|
|
32
|
-
title = 'angular-
|
|
45
|
+
export class App {
|
|
46
|
+
protected title = 'angular-readme';
|
|
33
47
|
}
|
|
34
48
|
```
|
|
35
49
|
|
|
36
50
|
### Thema toepassen
|
|
37
51
|
|
|
38
|
-
|
|
52
|
+
Voor de themas maken we gebruik van de volgende 2 packages: [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens) en [component-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
|
|
39
53
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
54
|
+
Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het `index.css`-bestand uit de `dist` map van het
|
|
55
|
+
pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema met de `rhc-theme` class.
|
|
56
|
+
|
|
57
|
+
#### Thema wijzigen
|
|
44
58
|
|
|
45
|
-
|
|
59
|
+
Om een ander thema toe te passen moet je het importeren van `import '@rijkshuisstijl-community/design-tokens/dist/{thema}/index.css';` en de class aanpassen naar het desbetreffende thema.
|
|
60
|
+
Zie het volgende voorbeeld om het uitvoerend-groen thema toe te passen:
|
|
61
|
+
|
|
62
|
+
```css
|
|
63
|
+
@import '@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css';
|
|
64
|
+
@import '@rijkshuisstijl-community/components-css/dist/index.css';
|
|
65
|
+
```
|
|
46
66
|
|
|
47
67
|
```ts
|
|
48
68
|
import { Component } from '@angular/core';
|
|
49
69
|
import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
|
|
50
|
-
import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
|
|
51
|
-
import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
|
|
52
70
|
|
|
53
71
|
@Component({
|
|
54
72
|
selector: 'app-root',
|
|
55
73
|
imports: [ButtonComponent],
|
|
56
74
|
template: `
|
|
57
|
-
<main class="
|
|
75
|
+
<main class="uitvoerend-groen">
|
|
58
76
|
<button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
|
|
59
77
|
</main>
|
|
60
78
|
`,
|
|
61
79
|
})
|
|
62
|
-
export class
|
|
80
|
+
export class App {
|
|
81
|
+
protected title = 'angular-readme';
|
|
82
|
+
}
|
|
63
83
|
```
|
|
64
84
|
|
|
65
85
|
Bekijk de [packages/font/README.md](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.
|
package/dist/README.md
CHANGED
|
@@ -11,55 +11,75 @@ Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) pr
|
|
|
11
11
|
|
|
12
12
|
## Aan de slag met Angular-componenten
|
|
13
13
|
|
|
14
|
-
Om de Angular-componenten van de Rijkshuisstijl
|
|
14
|
+
Om de Angular-componenten van de Rijkshuisstijl Community te gebruiken, installeer je het [components-angular npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-angular).
|
|
15
|
+
|
|
16
|
+
De Angular-componenten hebben geen eigen styling. Om de Rijkshuisstijl aan je project toe te voegen, installeer je het [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens) en [component-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
|
|
17
|
+
|
|
18
|
+
> [!NOTE]
|
|
19
|
+
> Let erop dat je zowel `@rijkshuisstijl-community/design-tokens/dist/index.css` als `@rijkshuisstijl-community/components-css/dist/index.css` importeert in je globale `styles.css` of `styles.scss` **en** dat je componenten gebruikt binnen een element met de `rhc-theme` class. Anders zie je de componenten zonder styling.
|
|
15
20
|
|
|
16
21
|
```bash
|
|
17
|
-
npm install --save-dev @rijkshuisstijl-community/components-angular
|
|
22
|
+
npm install --save-dev @rijkshuisstijl-community/components-angular @rijkshuisstijl-community/components-css @rijkshuisstijl-community/design-tokens
|
|
18
23
|
```
|
|
19
24
|
|
|
20
|
-
Dit installeert de Angular-componenten. Om deze
|
|
25
|
+
Dit installeert de Angular-componenten, de design tokens en de styling. Om deze te gebruiken, importeer je de CSS-bestanden in je globale stylesheet en de Angular modules in je app.
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
@import '@rijkshuisstijl-community/design-tokens/dist/index.css';
|
|
29
|
+
@import '@rijkshuisstijl-community/components-css/dist/index.css';
|
|
30
|
+
```
|
|
21
31
|
|
|
22
32
|
```ts
|
|
33
|
+
import { Component } from '@angular/core';
|
|
23
34
|
import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
|
|
24
35
|
|
|
25
36
|
@Component({
|
|
26
37
|
selector: 'app-root',
|
|
27
38
|
imports: [ButtonComponent],
|
|
28
|
-
|
|
29
|
-
|
|
39
|
+
template: `
|
|
40
|
+
<main class="rhc-theme">
|
|
41
|
+
<button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
|
|
42
|
+
</main>
|
|
43
|
+
`,
|
|
30
44
|
})
|
|
31
|
-
export class
|
|
32
|
-
title = 'angular-
|
|
45
|
+
export class App {
|
|
46
|
+
protected title = 'angular-readme';
|
|
33
47
|
}
|
|
34
48
|
```
|
|
35
49
|
|
|
36
50
|
### Thema toepassen
|
|
37
51
|
|
|
38
|
-
|
|
52
|
+
Voor de themas maken we gebruik van de volgende 2 packages: [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens) en [component-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
|
|
39
53
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
54
|
+
Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het `index.css`-bestand uit de `dist` map van het
|
|
55
|
+
pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema met de `rhc-theme` class.
|
|
56
|
+
|
|
57
|
+
#### Thema wijzigen
|
|
44
58
|
|
|
45
|
-
|
|
59
|
+
Om een ander thema toe te passen moet je het importeren van `import '@rijkshuisstijl-community/design-tokens/dist/{thema}/index.css';` en de class aanpassen naar het desbetreffende thema.
|
|
60
|
+
Zie het volgende voorbeeld om het uitvoerend-groen thema toe te passen:
|
|
61
|
+
|
|
62
|
+
```css
|
|
63
|
+
@import '@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css';
|
|
64
|
+
@import '@rijkshuisstijl-community/components-css/dist/index.css';
|
|
65
|
+
```
|
|
46
66
|
|
|
47
67
|
```ts
|
|
48
68
|
import { Component } from '@angular/core';
|
|
49
69
|
import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
|
|
50
|
-
import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
|
|
51
|
-
import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
|
|
52
70
|
|
|
53
71
|
@Component({
|
|
54
72
|
selector: 'app-root',
|
|
55
73
|
imports: [ButtonComponent],
|
|
56
74
|
template: `
|
|
57
|
-
<main class="
|
|
75
|
+
<main class="uitvoerend-groen">
|
|
58
76
|
<button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
|
|
59
77
|
</main>
|
|
60
78
|
`,
|
|
61
79
|
})
|
|
62
|
-
export class
|
|
80
|
+
export class App {
|
|
81
|
+
protected title = 'angular-readme';
|
|
82
|
+
}
|
|
63
83
|
```
|
|
64
84
|
|
|
65
85
|
Bekijk de [packages/font/README.md](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.
|
|
@@ -827,13 +827,13 @@ class DataSummaryItemComponent {
|
|
|
827
827
|
target = '_self';
|
|
828
828
|
actionLabel;
|
|
829
829
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DataSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: DataSummaryItemComponent, isStandalone: true, selector: "div[rhc-data-summary-item]", inputs: { key: "key", value: "value", href: "href", target: "target", actionLabel: "actionLabel" }, host: { properties: { "class.rhc-data-summary__item": "true" } }, ngImport: i0, template: "<ng-content>\n <dt class=\"rhc-data-summary__item-key\">\n {{ key }}\n </dt>\n <dd class=\"rhc-data-summary__item-value\">\n {{ value }}\n </dd>\n @if (href && actionLabel) {\n <rhc-link [href]=\"href\" [target]=\"target\"
|
|
830
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: DataSummaryItemComponent, isStandalone: true, selector: "div[rhc-data-summary-item]", inputs: { key: "key", value: "value", href: "href", target: "target", actionLabel: "actionLabel" }, host: { properties: { "class.rhc-data-summary__item": "true" } }, ngImport: i0, template: "<ng-content>\n <dt class=\"rhc-data-summary__item-key\">\n {{ key }}\n </dt>\n <dd class=\"rhc-data-summary__item-value\">\n {{ value }}\n </dd>\n @if (href && actionLabel) {\n <dd class=\"rhc-data-summary__item-action\">\n <rhc-link [href]=\"href\" [target]=\"target\">\n {{ actionLabel }}\n </rhc-link>\n </dd>\n }\n</ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LinkComponent, selector: "rhc-link", inputs: ["href", "target"] }] });
|
|
831
831
|
}
|
|
832
832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DataSummaryItemComponent, decorators: [{
|
|
833
833
|
type: Component,
|
|
834
834
|
args: [{ selector: 'div[rhc-data-summary-item]', imports: [CommonModule, LinkComponent], host: {
|
|
835
835
|
'[class.rhc-data-summary__item]': 'true',
|
|
836
|
-
}, template: "<ng-content>\n <dt class=\"rhc-data-summary__item-key\">\n {{ key }}\n </dt>\n <dd class=\"rhc-data-summary__item-value\">\n {{ value }}\n </dd>\n @if (href && actionLabel) {\n <rhc-link [href]=\"href\" [target]=\"target\"
|
|
836
|
+
}, template: "<ng-content>\n <dt class=\"rhc-data-summary__item-key\">\n {{ key }}\n </dt>\n <dd class=\"rhc-data-summary__item-value\">\n {{ value }}\n </dd>\n @if (href && actionLabel) {\n <dd class=\"rhc-data-summary__item-action\">\n <rhc-link [href]=\"href\" [target]=\"target\">\n {{ actionLabel }}\n </rhc-link>\n </dd>\n }\n</ng-content>\n" }]
|
|
837
837
|
}], propDecorators: { key: [{
|
|
838
838
|
type: Input
|
|
839
839
|
}], value: [{
|