@rijkshuisstijl-community/components-angular 1.1.0 → 1.2.0
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 +55 -0
- package/dist/README.md +55 -0
- package/dist/data-summary/data-summary.component.d.ts +6 -0
- package/dist/data-summary-item/data-summary-item.component.d.ts +10 -0
- package/dist/fesm2022/rijkshuisstijl-community-components-angular.mjs +106 -13
- package/dist/fesm2022/rijkshuisstijl-community-components-angular.mjs.map +1 -1
- package/dist/footer/footer.component.d.ts +27 -0
- package/dist/link/link.component.d.ts +2 -1
- package/dist/public-api.d.ts +3 -0
- package/package.json +13 -13
package/README.md
CHANGED
|
@@ -8,3 +8,58 @@ _Dit project wordt **niet** gesteund door het Ministerie van Algemene Zaken._
|
|
|
8
8
|
centrale overheid van Nederland.**
|
|
9
9
|
|
|
10
10
|
Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) project.
|
|
11
|
+
|
|
12
|
+
## Aan de slag met Angular-componenten
|
|
13
|
+
|
|
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
|
+
```bash
|
|
17
|
+
npm install --save-dev @rijkshuisstijl-community/components-angular
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Dit installeert de Angular-componenten. Om deze componenten te gebruiken, kun je ze importeren in jouw app.
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
|
|
24
|
+
|
|
25
|
+
@Component({
|
|
26
|
+
selector: 'app-root',
|
|
27
|
+
imports: [ButtonComponent],
|
|
28
|
+
templateUrl: './app.component.html',
|
|
29
|
+
styleUrl: './app.component.css',
|
|
30
|
+
})
|
|
31
|
+
export class AppComponent {
|
|
32
|
+
title = 'angular-test';
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Thema toepassen
|
|
37
|
+
|
|
38
|
+
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 het [components-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install --save-dev @rijkshuisstijl-community/design-tokens
|
|
42
|
+
npm install --save-dev @rijkshuisstijl-community/components-css
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Deze pakketten bevat de CSS-variabelen van het design systeem en de CSS-classes die de componenten aan de variabelen koppelen. Importeer het `index.css`-bestand uit de `dist` mappen van de pakketten, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema: `rhc-theme`.
|
|
46
|
+
|
|
47
|
+
```ts
|
|
48
|
+
import { Component } from '@angular/core';
|
|
49
|
+
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
|
+
|
|
53
|
+
@Component({
|
|
54
|
+
selector: 'app-root',
|
|
55
|
+
imports: [ButtonComponent],
|
|
56
|
+
template: `
|
|
57
|
+
<main class="main" class="rhc-theme">
|
|
58
|
+
<button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
|
|
59
|
+
</main>
|
|
60
|
+
`,
|
|
61
|
+
})
|
|
62
|
+
export class AppComponent {}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
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
|
@@ -8,3 +8,58 @@ _Dit project wordt **niet** gesteund door het Ministerie van Algemene Zaken._
|
|
|
8
8
|
centrale overheid van Nederland.**
|
|
9
9
|
|
|
10
10
|
Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) project.
|
|
11
|
+
|
|
12
|
+
## Aan de slag met Angular-componenten
|
|
13
|
+
|
|
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
|
+
```bash
|
|
17
|
+
npm install --save-dev @rijkshuisstijl-community/components-angular
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Dit installeert de Angular-componenten. Om deze componenten te gebruiken, kun je ze importeren in jouw app.
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
|
|
24
|
+
|
|
25
|
+
@Component({
|
|
26
|
+
selector: 'app-root',
|
|
27
|
+
imports: [ButtonComponent],
|
|
28
|
+
templateUrl: './app.component.html',
|
|
29
|
+
styleUrl: './app.component.css',
|
|
30
|
+
})
|
|
31
|
+
export class AppComponent {
|
|
32
|
+
title = 'angular-test';
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Thema toepassen
|
|
37
|
+
|
|
38
|
+
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 het [components-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install --save-dev @rijkshuisstijl-community/design-tokens
|
|
42
|
+
npm install --save-dev @rijkshuisstijl-community/components-css
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Deze pakketten bevat de CSS-variabelen van het design systeem en de CSS-classes die de componenten aan de variabelen koppelen. Importeer het `index.css`-bestand uit de `dist` mappen van de pakketten, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema: `rhc-theme`.
|
|
46
|
+
|
|
47
|
+
```ts
|
|
48
|
+
import { Component } from '@angular/core';
|
|
49
|
+
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
|
+
|
|
53
|
+
@Component({
|
|
54
|
+
selector: 'app-root',
|
|
55
|
+
imports: [ButtonComponent],
|
|
56
|
+
template: `
|
|
57
|
+
<main class="main" class="rhc-theme">
|
|
58
|
+
<button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
|
|
59
|
+
</main>
|
|
60
|
+
`,
|
|
61
|
+
})
|
|
62
|
+
export class AppComponent {}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
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.
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class DataSummaryComponent {
|
|
3
|
+
appearance: 'Column' | 'Row';
|
|
4
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DataSummaryComponent, never>;
|
|
5
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DataSummaryComponent, "rhc-data-summary", never, { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
6
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class DataSummaryItemComponent {
|
|
3
|
+
key: string;
|
|
4
|
+
value: string;
|
|
5
|
+
href?: string;
|
|
6
|
+
target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop';
|
|
7
|
+
actionLabel?: string;
|
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DataSummaryItemComponent, never>;
|
|
9
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DataSummaryItemComponent, "div[rhc-data-summary-item]", never, { "key": { "alias": "key"; "required": false; }; "value": { "alias": "value"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "actionLabel": { "alias": "actionLabel"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
10
|
+
}
|
|
@@ -48,15 +48,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
48
48
|
|
|
49
49
|
class LinkComponent {
|
|
50
50
|
href;
|
|
51
|
+
target = '_self';
|
|
51
52
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: LinkComponent, isStandalone: true, selector: "rhc-link", inputs: { href: "href" }, ngImport: i0, template: "<a href=\"{{ href }}\" class=\"nl-link\">\n <ng-content></ng-content>\n</a>\n", styles: [".nl-link:any-link{--_nl-link-forced-colors-color: LinkText;color:var(--_nl-link-state-color, var(--nl-link-color, var(--_nl-link-forced-colors-color)));text-decoration-color:var(--_nl-link-state-text-decoration-color, var(--nl-link-text-decoration-color, currentcolor));text-decoration-line:var(--_nl-link-state-text-decoration-line, var(--nl-link-text-decoration-line, underline));text-decoration-skip-ink:all;text-decoration-thickness:max(var(--_nl-link-state-text-decoration-thickness, var(--nl-link-text-decoration-thickness)),1px);text-underline-offset:var(--nl-link-text-underline-offset)}.nl-link:any-link:hover{--_nl-link-forced-colors-color: LinkText;--_nl-link-state-color: var(--nl-link-hover-color);--_nl-link-state-text-decoration-line: var(--nl-link-hover-text-decoration-line);--_nl-link-state-text-decoration-thickness: var(--nl-link-hover-text-decoration-thickness);text-decoration-skip-ink:none}.nl-link:any-link:active{--_nl-link-forced-colors-color: ActiveText;--_nl-link-state-color: var(--nl-link-active-color)}.nl-link--current:any-link{cursor:var(--nl-link-current-cursor, normal);font-weight:var(--nl-link-current-font-weight)}.nl-link--inline-box:any-link{color:unset;display:inline-block;text-decoration-line:unset;text-decoration-skip-ink:unset;text-decoration-thickness:unset;text-underline-offset:unset}.nl-link--disabled{--_nl-link-forced-colors-color: GrayText;--_nl-link-state-color: var(--nl-link-placeholder-color);cursor:var(--nl-link-placeholder-cursor, not-allowed);font-weight:var(--nl-link-placeholder-font-weight);text-decoration-line:none}\n"] });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: LinkComponent, isStandalone: true, selector: "rhc-link", inputs: { href: "href", target: "target" }, ngImport: i0, template: "<a href=\"{{ href }}\" class=\"nl-link\" target=\"{{ target }}\">\n <ng-content></ng-content>\n</a>\n", styles: [".nl-link:any-link{--_nl-link-forced-colors-color: LinkText;color:var(--_nl-link-state-color, var(--nl-link-color, var(--_nl-link-forced-colors-color)));text-decoration-color:var(--_nl-link-state-text-decoration-color, var(--nl-link-text-decoration-color, currentcolor));text-decoration-line:var(--_nl-link-state-text-decoration-line, var(--nl-link-text-decoration-line, underline));text-decoration-skip-ink:all;text-decoration-thickness:max(var(--_nl-link-state-text-decoration-thickness, var(--nl-link-text-decoration-thickness)),1px);text-underline-offset:var(--nl-link-text-underline-offset)}.nl-link:any-link:hover{--_nl-link-forced-colors-color: LinkText;--_nl-link-state-color: var(--nl-link-hover-color);--_nl-link-state-text-decoration-line: var(--nl-link-hover-text-decoration-line);--_nl-link-state-text-decoration-thickness: var(--nl-link-hover-text-decoration-thickness);text-decoration-skip-ink:none}.nl-link:any-link:active{--_nl-link-forced-colors-color: ActiveText;--_nl-link-state-color: var(--nl-link-active-color)}.nl-link--current:any-link{cursor:var(--nl-link-current-cursor, normal);font-weight:var(--nl-link-current-font-weight)}.nl-link--inline-box:any-link{color:unset;display:inline-block;text-decoration-line:unset;text-decoration-skip-ink:unset;text-decoration-thickness:unset;text-underline-offset:unset}.nl-link--disabled{--_nl-link-forced-colors-color: GrayText;--_nl-link-state-color: var(--nl-link-placeholder-color);cursor:var(--nl-link-placeholder-cursor, not-allowed);font-weight:var(--nl-link-placeholder-font-weight);text-decoration-line:none}\n"] });
|
|
53
54
|
}
|
|
54
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkComponent, decorators: [{
|
|
55
56
|
type: Component,
|
|
56
|
-
args: [{ selector: 'rhc-link', imports: [], template: "<a href=\"{{ href }}\" class=\"nl-link\">\n <ng-content></ng-content>\n</a>\n", styles: [".nl-link:any-link{--_nl-link-forced-colors-color: LinkText;color:var(--_nl-link-state-color, var(--nl-link-color, var(--_nl-link-forced-colors-color)));text-decoration-color:var(--_nl-link-state-text-decoration-color, var(--nl-link-text-decoration-color, currentcolor));text-decoration-line:var(--_nl-link-state-text-decoration-line, var(--nl-link-text-decoration-line, underline));text-decoration-skip-ink:all;text-decoration-thickness:max(var(--_nl-link-state-text-decoration-thickness, var(--nl-link-text-decoration-thickness)),1px);text-underline-offset:var(--nl-link-text-underline-offset)}.nl-link:any-link:hover{--_nl-link-forced-colors-color: LinkText;--_nl-link-state-color: var(--nl-link-hover-color);--_nl-link-state-text-decoration-line: var(--nl-link-hover-text-decoration-line);--_nl-link-state-text-decoration-thickness: var(--nl-link-hover-text-decoration-thickness);text-decoration-skip-ink:none}.nl-link:any-link:active{--_nl-link-forced-colors-color: ActiveText;--_nl-link-state-color: var(--nl-link-active-color)}.nl-link--current:any-link{cursor:var(--nl-link-current-cursor, normal);font-weight:var(--nl-link-current-font-weight)}.nl-link--inline-box:any-link{color:unset;display:inline-block;text-decoration-line:unset;text-decoration-skip-ink:unset;text-decoration-thickness:unset;text-underline-offset:unset}.nl-link--disabled{--_nl-link-forced-colors-color: GrayText;--_nl-link-state-color: var(--nl-link-placeholder-color);cursor:var(--nl-link-placeholder-cursor, not-allowed);font-weight:var(--nl-link-placeholder-font-weight);text-decoration-line:none}\n"] }]
|
|
57
|
+
args: [{ selector: 'rhc-link', imports: [], template: "<a href=\"{{ href }}\" class=\"nl-link\" target=\"{{ target }}\">\n <ng-content></ng-content>\n</a>\n", styles: [".nl-link:any-link{--_nl-link-forced-colors-color: LinkText;color:var(--_nl-link-state-color, var(--nl-link-color, var(--_nl-link-forced-colors-color)));text-decoration-color:var(--_nl-link-state-text-decoration-color, var(--nl-link-text-decoration-color, currentcolor));text-decoration-line:var(--_nl-link-state-text-decoration-line, var(--nl-link-text-decoration-line, underline));text-decoration-skip-ink:all;text-decoration-thickness:max(var(--_nl-link-state-text-decoration-thickness, var(--nl-link-text-decoration-thickness)),1px);text-underline-offset:var(--nl-link-text-underline-offset)}.nl-link:any-link:hover{--_nl-link-forced-colors-color: LinkText;--_nl-link-state-color: var(--nl-link-hover-color);--_nl-link-state-text-decoration-line: var(--nl-link-hover-text-decoration-line);--_nl-link-state-text-decoration-thickness: var(--nl-link-hover-text-decoration-thickness);text-decoration-skip-ink:none}.nl-link:any-link:active{--_nl-link-forced-colors-color: ActiveText;--_nl-link-state-color: var(--nl-link-active-color)}.nl-link--current:any-link{cursor:var(--nl-link-current-cursor, normal);font-weight:var(--nl-link-current-font-weight)}.nl-link--inline-box:any-link{color:unset;display:inline-block;text-decoration-line:unset;text-decoration-skip-ink:unset;text-decoration-thickness:unset;text-underline-offset:unset}.nl-link--disabled{--_nl-link-forced-colors-color: GrayText;--_nl-link-state-color: var(--nl-link-placeholder-color);cursor:var(--nl-link-placeholder-cursor, not-allowed);font-weight:var(--nl-link-placeholder-font-weight);text-decoration-line:none}\n"] }]
|
|
57
58
|
}], propDecorators: { href: [{
|
|
58
59
|
type: Input,
|
|
59
60
|
args: [{ required: true }]
|
|
61
|
+
}], target: [{
|
|
62
|
+
type: Input
|
|
60
63
|
}] } });
|
|
61
64
|
|
|
62
65
|
class ButtonComponent {
|
|
@@ -94,13 +97,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
94
97
|
|
|
95
98
|
class ImageComponent {
|
|
96
99
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
97
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: ImageComponent, isStandalone: true, selector: "img[rhc-image]", host: { properties: { "class.utrecht-
|
|
100
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: ImageComponent, isStandalone: true, selector: "img[rhc-image]", host: { properties: { "class.utrecht-img": "true", "class.utrecht-img--photo": "true" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
98
101
|
}
|
|
99
102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ImageComponent, decorators: [{
|
|
100
103
|
type: Component,
|
|
101
104
|
args: [{ selector: 'img[rhc-image]', imports: [], host: {
|
|
102
|
-
'[class.utrecht-
|
|
103
|
-
'[class.utrecht-
|
|
105
|
+
'[class.utrecht-img]': 'true',
|
|
106
|
+
'[class.utrecht-img--photo]': 'true',
|
|
104
107
|
}, template: "<ng-content></ng-content>\n" }]
|
|
105
108
|
}] });
|
|
106
109
|
|
|
@@ -368,11 +371,11 @@ class IconComponent {
|
|
|
368
371
|
return Object.keys(IconComponent.iconSet);
|
|
369
372
|
}
|
|
370
373
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
371
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: IconComponent, isStandalone: true, selector: "rhc-icon", inputs: { icon: "icon" }, providers: [provideTablerIcons(TablerIcons)], ngImport: i0, template: "<span class=\"utrecht-icon\">\n @if (icon) {\n <i-tabler [name]=\"computedIconRender()\" />\n }\n <ng-content />\n</span>\n", styles: [":host{display:
|
|
374
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: IconComponent, isStandalone: true, selector: "rhc-icon", inputs: { icon: "icon" }, providers: [provideTablerIcons(TablerIcons)], ngImport: i0, template: "<span class=\"utrecht-icon\">\n @if (icon) {\n <i-tabler [name]=\"computedIconRender()\" />\n }\n <ng-content />\n</span>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: TablerIconComponent, selector: "i-tabler, tabler-icon", inputs: ["name"] }] });
|
|
372
375
|
}
|
|
373
376
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IconComponent, decorators: [{
|
|
374
377
|
type: Component,
|
|
375
|
-
args: [{ selector: 'rhc-icon', imports: [TablerIconComponent], providers: [provideTablerIcons(TablerIcons)], template: "<span class=\"utrecht-icon\">\n @if (icon) {\n <i-tabler [name]=\"computedIconRender()\" />\n }\n <ng-content />\n</span>\n", styles: [":host{display:
|
|
378
|
+
args: [{ selector: 'rhc-icon', imports: [TablerIconComponent], providers: [provideTablerIcons(TablerIcons)], template: "<span class=\"utrecht-icon\">\n @if (icon) {\n <i-tabler [name]=\"computedIconRender()\" />\n }\n <ng-content />\n</span>\n", styles: [":host{display:contents}\n"] }]
|
|
376
379
|
}], propDecorators: { icon: [{
|
|
377
380
|
type: Input,
|
|
378
381
|
args: [{ required: false }]
|
|
@@ -573,9 +576,9 @@ class FormFieldTextInputComponent {
|
|
|
573
576
|
onChange = () => { };
|
|
574
577
|
onTouched = () => { };
|
|
575
578
|
onValueChange(event) {
|
|
576
|
-
const
|
|
577
|
-
this.value = value;
|
|
578
|
-
this.onChange(value);
|
|
579
|
+
const input = event.target;
|
|
580
|
+
this.value = input.value;
|
|
581
|
+
this.onChange(this.value);
|
|
579
582
|
}
|
|
580
583
|
markAsTouched() {
|
|
581
584
|
this.onTouched();
|
|
@@ -600,7 +603,7 @@ class FormFieldTextInputComponent {
|
|
|
600
603
|
useExisting: forwardRef(() => FormFieldTextInputComponent),
|
|
601
604
|
multi: true,
|
|
602
605
|
},
|
|
603
|
-
], ngImport: i0, template: "<rhc-form-field\n type=\"text\"\n [invalid]=\"invalid\"\n [showDescription]=\"showDescription\"\n [showInput]=\"true\"\n [showLabel]=\"true\"\n [dir]=\"dir\"\n>\n <label rhc-form-label [for]=\"inputId\">{{ label }}</label>\n <rhc-form-field-description>{{ description }}</rhc-form-field-description>\n <rhc-form-field-error-message>{{ errorMessage }}</rhc-form-field-error-message>\n <input\n rhc-text-input\n (input)=\"onValueChange($event)\"\n (blur)=\"markAsTouched()\"\n [id]=\"inputId\"\n [
|
|
606
|
+
], ngImport: i0, template: "<rhc-form-field\n type=\"text\"\n [invalid]=\"invalid\"\n [showDescription]=\"showDescription\"\n [showInput]=\"true\"\n [showLabel]=\"true\"\n [dir]=\"dir\"\n>\n <label rhc-form-label [for]=\"inputId\">{{ label }}</label>\n <rhc-form-field-description>{{ description }}</rhc-form-field-description>\n <rhc-form-field-error-message>{{ errorMessage }}</rhc-form-field-error-message>\n <input\n rhc-text-input\n (input)=\"onValueChange($event)\"\n (blur)=\"markAsTouched()\"\n [id]=\"inputId\"\n [invalid]=\"invalid\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.dir]=\"dir\"\n [attr.name]=\"name\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.placeholder]=\"placeholder\"\n [attr.size]=\"size\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.step]=\"step\"\n [attr.type]=\"type\"\n />\n @if (status) {\n <div class=\"utrecht-form-field__status\">\n {{ status }}\n </div>\n }\n</rhc-form-field>\n", dependencies: [{ kind: "component", type: FormFieldComponent, selector: "rhc-form-field", inputs: ["type", "class", "invalid", "showInput", "showLabel", "showDescription"] }, { kind: "component", type: FormLabelComponent, selector: "label[rhc-form-label]", inputs: ["disabled", "checked", "type"] }, { kind: "component", type: TextInputComponent, selector: "input[rhc-text-input]", inputs: ["disabled", "invalid", "required", "readonly"] }, { kind: "component", type: FormFieldErrorMessageComponent, selector: "rhc-form-field-error-message" }, { kind: "component", type: FormFieldDescriptionComponent, selector: "rhc-form-field-description", inputs: ["invalid", "valid", "warning", "class"] }] });
|
|
604
607
|
}
|
|
605
608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldTextInputComponent, decorators: [{
|
|
606
609
|
type: Component,
|
|
@@ -616,7 +619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
616
619
|
useExisting: forwardRef(() => FormFieldTextInputComponent),
|
|
617
620
|
multi: true,
|
|
618
621
|
},
|
|
619
|
-
], template: "<rhc-form-field\n type=\"text\"\n [invalid]=\"invalid\"\n [showDescription]=\"showDescription\"\n [showInput]=\"true\"\n [showLabel]=\"true\"\n [dir]=\"dir\"\n>\n <label rhc-form-label [for]=\"inputId\">{{ label }}</label>\n <rhc-form-field-description>{{ description }}</rhc-form-field-description>\n <rhc-form-field-error-message>{{ errorMessage }}</rhc-form-field-error-message>\n <input\n rhc-text-input\n (input)=\"onValueChange($event)\"\n (blur)=\"markAsTouched()\"\n [id]=\"inputId\"\n [
|
|
622
|
+
], template: "<rhc-form-field\n type=\"text\"\n [invalid]=\"invalid\"\n [showDescription]=\"showDescription\"\n [showInput]=\"true\"\n [showLabel]=\"true\"\n [dir]=\"dir\"\n>\n <label rhc-form-label [for]=\"inputId\">{{ label }}</label>\n <rhc-form-field-description>{{ description }}</rhc-form-field-description>\n <rhc-form-field-error-message>{{ errorMessage }}</rhc-form-field-error-message>\n <input\n rhc-text-input\n (input)=\"onValueChange($event)\"\n (blur)=\"markAsTouched()\"\n [id]=\"inputId\"\n [invalid]=\"invalid\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.dir]=\"dir\"\n [attr.name]=\"name\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.placeholder]=\"placeholder\"\n [attr.size]=\"size\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.step]=\"step\"\n [attr.type]=\"type\"\n />\n @if (status) {\n <div class=\"utrecht-form-field__status\">\n {{ status }}\n </div>\n }\n</rhc-form-field>\n" }]
|
|
620
623
|
}], propDecorators: { invalid: [{
|
|
621
624
|
type: Input
|
|
622
625
|
}], showDescription: [{
|
|
@@ -753,6 +756,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
753
756
|
}]
|
|
754
757
|
}] });
|
|
755
758
|
|
|
759
|
+
class FooterComponent {
|
|
760
|
+
background;
|
|
761
|
+
preFooter;
|
|
762
|
+
preFooterMessage;
|
|
763
|
+
heading;
|
|
764
|
+
appearanceLevel = 3;
|
|
765
|
+
columns;
|
|
766
|
+
backtotop;
|
|
767
|
+
subFooter;
|
|
768
|
+
scrollBackToTop = (event) => {
|
|
769
|
+
event.preventDefault();
|
|
770
|
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
771
|
+
const targetElement = event.currentTarget;
|
|
772
|
+
const targetSelector = targetElement.getAttribute('href');
|
|
773
|
+
if (!targetSelector)
|
|
774
|
+
return;
|
|
775
|
+
const $target = document.querySelector(targetSelector);
|
|
776
|
+
if (!$target)
|
|
777
|
+
return;
|
|
778
|
+
$target.focus({ preventScroll: true }); // Ensure target is focusable, ie via tabindex={-1} on #main
|
|
779
|
+
};
|
|
780
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
781
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: FooterComponent, isStandalone: true, selector: "footer[rhc-footer]", inputs: { background: "background", preFooter: "preFooter", preFooterMessage: "preFooterMessage", heading: "heading", appearanceLevel: "appearanceLevel", columns: "columns", backtotop: "backtotop", subFooter: "subFooter" }, ngImport: i0, template: "@if (preFooter) {\n <div class=\"rhc-page-prefooter\">\n @if (preFooterMessage) {\n <span class=\"rhc-page-prefooter__content\">{{ preFooterMessage }}</span>\n }\n </div>\n}\n\n<footer\n [class]=\"\n 'utrecht-page-footer rhc-page-footer' +\n (background ? ' rhc-page-footer--' + background : '') +\n (background === 'primary' ? ' rhc-page-footer--primary-filled' : '')\n \"\n>\n <div class=\"rhc-page-footer__content rhc-page-footer__wrapper\">\n @if (heading) {\n <div class=\"rhc-page-footer__title\">\n <rhc-heading [level]=\"2\" [appearanceLevel]=\"appearanceLevel\">{{ heading }}</rhc-heading>\n </div>\n }\n <rhc-column-layout>\n @for (column of columns; track $index) {\n <div class=\"rhc-page-footer__section\">\n <rhc-heading [level]=\"heading ? 3 : 2\" [appearanceLevel]=\"column.appearanceLevel\">{{\n column.heading\n }}</rhc-heading>\n\n <rhc-link-list>\n @for (item of column.items; track $index) {\n <li rhc-link-list-item>\n <a rhc-link-list-link [href]=\"item.href\" [attr.href]=\"item.href\">\n <rhc-icon icon=\"chevron-right\" />\n {{ item.label }}\n </a>\n </li>\n }\n </rhc-link-list>\n </div>\n }\n </rhc-column-layout>\n </div>\n\n @if (backtotop || subFooter) {\n <div\n [class]=\"\n 'rhc-page-subfooter' +\n (background ? ' rhc-page-footer--' + background : '') +\n (background ? ' rhc-page-footer--primary-filled' : '')\n \"\n >\n <div class=\"rhc-page-subfooter__content rhc-page-footer__wrapper\">\n <rhc-link-list>\n @for (subFooterItem of subFooter?.items; track $index) {\n <li rhc-link-list-item>\n <a rhc-link-list-link [href]=\"subFooterItem.href\" [attr.href]=\"subFooterItem.href\">\n {{ subFooterItem.label }}\n </a>\n </li>\n }\n </rhc-link-list>\n\n @if (backtotop) {\n <a class=\"rhc-page-subfooter__backtotop\" href=\"#main\" (click)=\"scrollBackToTop($event)\">\n Terug naar boven <rhc-icon icon=\"pijl-omhoog\"\n /></a>\n }\n </div>\n </div>\n }\n</footer>\n", styles: [".nl-link{--nl-link-hover-text-decoration: underline;color:inherit}.nl-link:hover{text-decoration:var(--nl-link-hover-text-decoration)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "rhc-icon", inputs: ["icon"] }, { kind: "component", type: HeadingComponent, selector: "rhc-heading", inputs: ["level", "appearanceLevel"] }, { kind: "component", type: ColumnLayoutComponent, selector: "rhc-column-layout", inputs: ["rule"] }, { kind: "component", type: LinkListComponent, selector: "rhc-link-list" }, { kind: "component", type: LinkListItemComponent, selector: "li[rhc-link-list-item]" }, { kind: "component", type: LinkListLinkComponent, selector: "a[rhc-link-list-link]", inputs: ["href"] }] });
|
|
782
|
+
}
|
|
783
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FooterComponent, decorators: [{
|
|
784
|
+
type: Component,
|
|
785
|
+
args: [{ selector: 'footer[rhc-footer]', imports: [
|
|
786
|
+
IconComponent,
|
|
787
|
+
HeadingComponent,
|
|
788
|
+
ColumnLayoutComponent,
|
|
789
|
+
LinkListComponent,
|
|
790
|
+
LinkListItemComponent,
|
|
791
|
+
LinkListLinkComponent,
|
|
792
|
+
], template: "@if (preFooter) {\n <div class=\"rhc-page-prefooter\">\n @if (preFooterMessage) {\n <span class=\"rhc-page-prefooter__content\">{{ preFooterMessage }}</span>\n }\n </div>\n}\n\n<footer\n [class]=\"\n 'utrecht-page-footer rhc-page-footer' +\n (background ? ' rhc-page-footer--' + background : '') +\n (background === 'primary' ? ' rhc-page-footer--primary-filled' : '')\n \"\n>\n <div class=\"rhc-page-footer__content rhc-page-footer__wrapper\">\n @if (heading) {\n <div class=\"rhc-page-footer__title\">\n <rhc-heading [level]=\"2\" [appearanceLevel]=\"appearanceLevel\">{{ heading }}</rhc-heading>\n </div>\n }\n <rhc-column-layout>\n @for (column of columns; track $index) {\n <div class=\"rhc-page-footer__section\">\n <rhc-heading [level]=\"heading ? 3 : 2\" [appearanceLevel]=\"column.appearanceLevel\">{{\n column.heading\n }}</rhc-heading>\n\n <rhc-link-list>\n @for (item of column.items; track $index) {\n <li rhc-link-list-item>\n <a rhc-link-list-link [href]=\"item.href\" [attr.href]=\"item.href\">\n <rhc-icon icon=\"chevron-right\" />\n {{ item.label }}\n </a>\n </li>\n }\n </rhc-link-list>\n </div>\n }\n </rhc-column-layout>\n </div>\n\n @if (backtotop || subFooter) {\n <div\n [class]=\"\n 'rhc-page-subfooter' +\n (background ? ' rhc-page-footer--' + background : '') +\n (background ? ' rhc-page-footer--primary-filled' : '')\n \"\n >\n <div class=\"rhc-page-subfooter__content rhc-page-footer__wrapper\">\n <rhc-link-list>\n @for (subFooterItem of subFooter?.items; track $index) {\n <li rhc-link-list-item>\n <a rhc-link-list-link [href]=\"subFooterItem.href\" [attr.href]=\"subFooterItem.href\">\n {{ subFooterItem.label }}\n </a>\n </li>\n }\n </rhc-link-list>\n\n @if (backtotop) {\n <a class=\"rhc-page-subfooter__backtotop\" href=\"#main\" (click)=\"scrollBackToTop($event)\">\n Terug naar boven <rhc-icon icon=\"pijl-omhoog\"\n /></a>\n }\n </div>\n </div>\n }\n</footer>\n", styles: [".nl-link{--nl-link-hover-text-decoration: underline;color:inherit}.nl-link:hover{text-decoration:var(--nl-link-hover-text-decoration)}\n"] }]
|
|
793
|
+
}], propDecorators: { background: [{
|
|
794
|
+
type: Input
|
|
795
|
+
}], preFooter: [{
|
|
796
|
+
type: Input
|
|
797
|
+
}], preFooterMessage: [{
|
|
798
|
+
type: Input
|
|
799
|
+
}], heading: [{
|
|
800
|
+
type: Input
|
|
801
|
+
}], appearanceLevel: [{
|
|
802
|
+
type: Input
|
|
803
|
+
}], columns: [{
|
|
804
|
+
type: Input
|
|
805
|
+
}], backtotop: [{
|
|
806
|
+
type: Input
|
|
807
|
+
}], subFooter: [{
|
|
808
|
+
type: Input
|
|
809
|
+
}] } });
|
|
810
|
+
|
|
811
|
+
class DataSummaryComponent {
|
|
812
|
+
appearance = 'Column';
|
|
813
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DataSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
814
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: DataSummaryComponent, isStandalone: true, selector: "rhc-data-summary", inputs: { appearance: "appearance" }, ngImport: i0, template: "<dl\n [ngClass]=\"{\n 'rhc-data-summary': true,\n 'rhc-data-summary--column': appearance === 'Column',\n 'rhc-data-summary--row': appearance === 'Row',\n }\"\n>\n <ng-content></ng-content>\n</dl>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
815
|
+
}
|
|
816
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DataSummaryComponent, decorators: [{
|
|
817
|
+
type: Component,
|
|
818
|
+
args: [{ selector: 'rhc-data-summary', imports: [CommonModule], template: "<dl\n [ngClass]=\"{\n 'rhc-data-summary': true,\n 'rhc-data-summary--column': appearance === 'Column',\n 'rhc-data-summary--row': appearance === 'Row',\n }\"\n>\n <ng-content></ng-content>\n</dl>\n" }]
|
|
819
|
+
}], propDecorators: { appearance: [{
|
|
820
|
+
type: Input
|
|
821
|
+
}] } });
|
|
822
|
+
|
|
823
|
+
class DataSummaryItemComponent {
|
|
824
|
+
key = '';
|
|
825
|
+
value = '';
|
|
826
|
+
href;
|
|
827
|
+
target = '_self';
|
|
828
|
+
actionLabel;
|
|
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\" class=\"rhc-data-summary__item-action\">\n {{ actionLabel }}\n </rhc-link>\n }\n</ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LinkComponent, selector: "rhc-link", inputs: ["href", "target"] }] });
|
|
831
|
+
}
|
|
832
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DataSummaryItemComponent, decorators: [{
|
|
833
|
+
type: Component,
|
|
834
|
+
args: [{ selector: 'div[rhc-data-summary-item]', imports: [CommonModule, LinkComponent], host: {
|
|
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\" class=\"rhc-data-summary__item-action\">\n {{ actionLabel }}\n </rhc-link>\n }\n</ng-content>\n" }]
|
|
837
|
+
}], propDecorators: { key: [{
|
|
838
|
+
type: Input
|
|
839
|
+
}], value: [{
|
|
840
|
+
type: Input
|
|
841
|
+
}], href: [{
|
|
842
|
+
type: Input
|
|
843
|
+
}], target: [{
|
|
844
|
+
type: Input
|
|
845
|
+
}], actionLabel: [{
|
|
846
|
+
type: Input
|
|
847
|
+
}] } });
|
|
848
|
+
|
|
756
849
|
/*
|
|
757
850
|
* Public API Surface of components-angular
|
|
758
851
|
*/
|
|
@@ -761,5 +854,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
761
854
|
* Generated bundle index. Do not edit.
|
|
762
855
|
*/
|
|
763
856
|
|
|
764
|
-
export { ActionGroupComponent, BgFlagComponent, ButtonComponent, ColumnLayoutComponent, DeFlagComponent, DutchMapIconComponent, EndItemDirective, EsFlagComponent, FigureCaptionComponent, FigureComponent, FormFieldComponent, FormFieldDescriptionComponent, FormFieldErrorMessageComponent, FormFieldTextInputComponent, FormLabelComponent, FrFlagComponent, GrFlagComponent, HeadingComponent, HeadingItemDirective, HuFlagComponent, IconComponent, ImageComponent, ItFlagComponent, LinkComponent, LinkListComponent, LinkListItemComponent, LinkListLinkComponent, LogoComponent, LvFlagComponent, NavbarComponent, NavbarItemComponent, NlFlagComponent, ParagraphComponent, PlFlagComponent, PtFlagComponent, RoFlagComponent, SkFlagComponent, TextInputComponent, UkFlagComponent, UnorderedListComponent, UnorderedListItemComponent, appearanceOptions, headingLevels };
|
|
857
|
+
export { ActionGroupComponent, BgFlagComponent, ButtonComponent, ColumnLayoutComponent, DataSummaryComponent, DataSummaryItemComponent, DeFlagComponent, DutchMapIconComponent, EndItemDirective, EsFlagComponent, FigureCaptionComponent, FigureComponent, FooterComponent, FormFieldComponent, FormFieldDescriptionComponent, FormFieldErrorMessageComponent, FormFieldTextInputComponent, FormLabelComponent, FrFlagComponent, GrFlagComponent, HeadingComponent, HeadingItemDirective, HuFlagComponent, IconComponent, ImageComponent, ItFlagComponent, LinkComponent, LinkListComponent, LinkListItemComponent, LinkListLinkComponent, LogoComponent, LvFlagComponent, NavbarComponent, NavbarItemComponent, NlFlagComponent, ParagraphComponent, PlFlagComponent, PtFlagComponent, RoFlagComponent, SkFlagComponent, TextInputComponent, UkFlagComponent, UnorderedListComponent, UnorderedListItemComponent, appearanceOptions, headingLevels };
|
|
765
858
|
//# sourceMappingURL=rijkshuisstijl-community-components-angular.mjs.map
|