@rijkshuisstijl-community/components-angular 7.0.0 → 9.0.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/dist/fesm2022/rijkshuisstijl-community-components-angular.mjs +95 -95
- package/dist/fesm2022/rijkshuisstijl-community-components-angular.mjs.map +1 -1
- package/dist/types/rijkshuisstijl-community-components-angular.d.ts +270 -0
- package/package.json +25 -24
- package/dist/action-group/action-group.component.d.ts +0 -6
- package/dist/back-to-top/back-to-top.component.d.ts +0 -7
- package/dist/button/button.component.d.ts +0 -7
- package/dist/column-layout/column-layout.component.d.ts +0 -6
- package/dist/data-summary/data-summary.component.d.ts +0 -6
- package/dist/data-summary-item/data-summary-item.component.d.ts +0 -10
- package/dist/figure/figure.component.d.ts +0 -9
- package/dist/figure-caption/figure-caption.component.d.ts +0 -5
- package/dist/footer/footer.component.d.ts +0 -13
- package/dist/form-field/form-field.component.d.ts +0 -12
- package/dist/form-field-description/form-field-description.component.d.ts +0 -9
- package/dist/form-field-error-message/form-field-error-message.component.d.ts +0 -5
- package/dist/form-field-text-input/form-field-text-input.component.d.ts +0 -46
- package/dist/form-label/form-label.component.d.ts +0 -8
- package/dist/heading/heading.component.d.ts +0 -11
- package/dist/icon/icon.component.d.ts +0 -5
- package/dist/image/image.component.d.ts +0 -5
- package/dist/index.d.ts +0 -5
- package/dist/link/link.component.d.ts +0 -9
- package/dist/link-list/link-list.component.d.ts +0 -5
- package/dist/link-list-item/link-list-item.component.d.ts +0 -5
- package/dist/link-list-link/link-list-link.component.d.ts +0 -6
- package/dist/logo/logo.component.d.ts +0 -7
- package/dist/navbar/navbar.component.d.ts +0 -6
- package/dist/navbar-item/end-item.directive.d.ts +0 -9
- package/dist/navbar-item/heading-item.directive.d.ts +0 -6
- package/dist/navbar-item/navbar-item.component.d.ts +0 -6
- package/dist/paragraph/paragraph.component.d.ts +0 -9
- package/dist/public-api.d.ts +0 -30
- package/dist/text-input/text-input.component.d.ts +0 -18
- package/dist/unordered-list/unordered-list.component.d.ts +0 -6
- package/dist/unordered-list-item/unordered-list-item.component.d.ts +0 -5
|
@@ -10,12 +10,12 @@ class HeadingComponent {
|
|
|
10
10
|
appearanceLevel;
|
|
11
11
|
stylingLevel = () => this.appearanceLevel ?? this.level;
|
|
12
12
|
computedClasses = () => `nl-heading nl-heading--level-${this.stylingLevel()}`;
|
|
13
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
14
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
13
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: HeadingComponent, isStandalone: true, selector: "rhc-heading", inputs: { level: "level", appearanceLevel: "appearanceLevel" }, ngImport: i0, template: "@switch (level) {\n @case (1) {\n <h1 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h1>\n }\n @case (2) {\n <h2 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h2>\n }\n @case (3) {\n <h3 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h3>\n }\n @case (4) {\n <h4 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h4>\n }\n @case (5) {\n <h5 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h5>\n }\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".nl-heading{break-after:avoid;break-inside:avoid}.nl-heading--level-1{color:var(--nl-heading-level-1-color, inherit);font-family:var(--nl-heading-level-1-font-family);font-size:var(--nl-heading-level-1-font-size, revert);font-weight:var(--nl-heading-level-1-font-weight, bold);line-height:var(--nl-heading-level-1-line-height);margin-block-end:var(--nl-heading-level-1-margin-block-end, revert);margin-block-start:var(--nl-heading-level-1-margin-block-start, revert)}.nl-heading--level-2{color:var(--nl-heading-level-2-color, inherit);font-family:var(--nl-heading-level-2-font-family);font-size:var(--nl-heading-level-2-font-size, revert);font-weight:var(--nl-heading-level-2-font-weight, bold);line-height:var(--nl-heading-level-2-line-height);margin-block-end:var(--nl-heading-level-2-margin-block-end, revert);margin-block-start:var(--nl-heading-level-2-margin-block-start, revert)}.nl-heading--level-3{color:var(--nl-heading-level-3-color, inherit);font-family:var(--nl-heading-level-3-font-family);font-size:var(--nl-heading-level-3-font-size, revert);font-weight:var(--nl-heading-level-3-font-weight, bold);line-height:var(--nl-heading-level-3-line-height);margin-block-end:var(--nl-heading-level-3-margin-block-end, revert);margin-block-start:var(--nl-heading-level-3-margin-block-start, revert)}.nl-heading--level-4{color:var(--nl-heading-level-4-color, inherit);font-family:var(--nl-heading-level-4-font-family);font-size:var(--nl-heading-level-4-font-size, revert);font-weight:var(--nl-heading-level-4-font-weight, bold);line-height:var(--nl-heading-level-4-line-height);margin-block-end:var(--nl-heading-level-4-margin-block-end, revert);margin-block-start:var(--nl-heading-level-4-margin-block-start, revert)}.nl-heading--level-5{color:var(--nl-heading-level-5-color, inherit);font-family:var(--nl-heading-level-5-font-family);font-size:var(--nl-heading-level-5-font-size, revert);font-weight:var(--nl-heading-level-5-font-weight, bold);line-height:var(--nl-heading-level-5-line-height);margin-block-end:var(--nl-heading-level-5-margin-block-end, revert);margin-block-start:var(--nl-heading-level-5-margin-block-start, revert)}.nl-heading--level-6{color:var(--nl-heading-level-6-color, inherit);font-family:var(--nl-heading-level-6-font-family);font-size:var(--nl-heading-level-6-font-size, revert);font-weight:var(--nl-heading-level-6-font-weight, bold);line-height:var(--nl-heading-level-6-line-height);margin-block-end:var(--nl-heading-level-6-margin-block-end, revert);margin-block-start:var(--nl-heading-level-6-margin-block-start, revert)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
15
15
|
}
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HeadingComponent, decorators: [{
|
|
17
17
|
type: Component,
|
|
18
|
-
args: [{ selector: 'rhc-heading', imports: [CommonModule], template: "@switch (level) {\n @case (1) {\n <h1 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h1>\n }\n @case (2) {\n <h2 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h2>\n }\n @case (3) {\n <h3 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h3>\n }\n @case (4) {\n <h4 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h4>\n }\n @case (5) {\n <h5 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h5>\n }\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".nl-heading{break-
|
|
18
|
+
args: [{ selector: 'rhc-heading', imports: [CommonModule], template: "@switch (level) {\n @case (1) {\n <h1 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h1>\n }\n @case (2) {\n <h2 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h2>\n }\n @case (3) {\n <h3 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h3>\n }\n @case (4) {\n <h4 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h4>\n }\n @case (5) {\n <h5 class=\"{{ computedClasses() }}\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h5>\n }\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".nl-heading{break-after:avoid;break-inside:avoid}.nl-heading--level-1{color:var(--nl-heading-level-1-color, inherit);font-family:var(--nl-heading-level-1-font-family);font-size:var(--nl-heading-level-1-font-size, revert);font-weight:var(--nl-heading-level-1-font-weight, bold);line-height:var(--nl-heading-level-1-line-height);margin-block-end:var(--nl-heading-level-1-margin-block-end, revert);margin-block-start:var(--nl-heading-level-1-margin-block-start, revert)}.nl-heading--level-2{color:var(--nl-heading-level-2-color, inherit);font-family:var(--nl-heading-level-2-font-family);font-size:var(--nl-heading-level-2-font-size, revert);font-weight:var(--nl-heading-level-2-font-weight, bold);line-height:var(--nl-heading-level-2-line-height);margin-block-end:var(--nl-heading-level-2-margin-block-end, revert);margin-block-start:var(--nl-heading-level-2-margin-block-start, revert)}.nl-heading--level-3{color:var(--nl-heading-level-3-color, inherit);font-family:var(--nl-heading-level-3-font-family);font-size:var(--nl-heading-level-3-font-size, revert);font-weight:var(--nl-heading-level-3-font-weight, bold);line-height:var(--nl-heading-level-3-line-height);margin-block-end:var(--nl-heading-level-3-margin-block-end, revert);margin-block-start:var(--nl-heading-level-3-margin-block-start, revert)}.nl-heading--level-4{color:var(--nl-heading-level-4-color, inherit);font-family:var(--nl-heading-level-4-font-family);font-size:var(--nl-heading-level-4-font-size, revert);font-weight:var(--nl-heading-level-4-font-weight, bold);line-height:var(--nl-heading-level-4-line-height);margin-block-end:var(--nl-heading-level-4-margin-block-end, revert);margin-block-start:var(--nl-heading-level-4-margin-block-start, revert)}.nl-heading--level-5{color:var(--nl-heading-level-5-color, inherit);font-family:var(--nl-heading-level-5-font-family);font-size:var(--nl-heading-level-5-font-size, revert);font-weight:var(--nl-heading-level-5-font-weight, bold);line-height:var(--nl-heading-level-5-line-height);margin-block-end:var(--nl-heading-level-5-margin-block-end, revert);margin-block-start:var(--nl-heading-level-5-margin-block-start, revert)}.nl-heading--level-6{color:var(--nl-heading-level-6-color, inherit);font-family:var(--nl-heading-level-6-font-family);font-size:var(--nl-heading-level-6-font-size, revert);font-weight:var(--nl-heading-level-6-font-weight, bold);line-height:var(--nl-heading-level-6-line-height);margin-block-end:var(--nl-heading-level-6-margin-block-end, revert);margin-block-start:var(--nl-heading-level-6-margin-block-start, revert)}\n"] }]
|
|
19
19
|
}], propDecorators: { level: [{
|
|
20
20
|
type: Input,
|
|
21
21
|
args: [{ required: true }]
|
|
@@ -34,10 +34,10 @@ class ParagraphComponent {
|
|
|
34
34
|
return 'nl-paragraph';
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
38
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
37
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ParagraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
38
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ParagraphComponent, isStandalone: true, selector: "rhc-paragraph", inputs: { appearance: "appearance" }, ngImport: i0, template: "<p class=\"{{ computedClass() }}\">\n <ng-content></ng-content>\n</p>\n", styles: [".nl-paragraph{color:var(--nl-paragraph-color, inherit);font-family:var(--nl-paragraph-font-family, inherit);font-size:var(--nl-paragraph-font-size, inherit);font-weight:var(--nl-paragraph-font-weight, inherit);line-height:var(--nl-paragraph-line-height, inherit);margin-block-end:var(--nl-paragraph-margin-block-end, revert);margin-block-start:var(--nl-paragraph-margin-block-start, revert)}.nl-paragraph--lead{font-size:var(--nl-paragraph-lead-font-size, var(--nl-paragraph-font-size, inherit));font-weight:var(--nl-paragraph-lead-font-weight, var(--nl-paragraph-font-weight, inherit));line-height:var(--nl-paragraph-lead-line-height, var(--nl-paragraph-line-height, inherit));margin-block-end:var(--nl-paragraph-lead-margin-block-end, var(--nl-paragraph-margin-block-end, revert));margin-block-start:var(--nl-paragraph-lead-margin-block-start, var(--nl-paragraph-margin-block-start, revert))}.nl-paragraph__lead{font-weight:inherit}\n"] });
|
|
39
39
|
}
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ParagraphComponent, decorators: [{
|
|
41
41
|
type: Component,
|
|
42
42
|
args: [{ selector: 'rhc-paragraph', imports: [], template: "<p class=\"{{ computedClass() }}\">\n <ng-content></ng-content>\n</p>\n", styles: [".nl-paragraph{color:var(--nl-paragraph-color, inherit);font-family:var(--nl-paragraph-font-family, inherit);font-size:var(--nl-paragraph-font-size, inherit);font-weight:var(--nl-paragraph-font-weight, inherit);line-height:var(--nl-paragraph-line-height, inherit);margin-block-end:var(--nl-paragraph-margin-block-end, revert);margin-block-start:var(--nl-paragraph-margin-block-start, revert)}.nl-paragraph--lead{font-size:var(--nl-paragraph-lead-font-size, var(--nl-paragraph-font-size, inherit));font-weight:var(--nl-paragraph-lead-font-weight, var(--nl-paragraph-font-weight, inherit));line-height:var(--nl-paragraph-lead-line-height, var(--nl-paragraph-line-height, inherit));margin-block-end:var(--nl-paragraph-lead-margin-block-end, var(--nl-paragraph-margin-block-end, revert));margin-block-start:var(--nl-paragraph-lead-margin-block-start, var(--nl-paragraph-margin-block-start, revert))}.nl-paragraph__lead{font-weight:inherit}\n"] }]
|
|
43
43
|
}], propDecorators: { appearance: [{
|
|
@@ -49,12 +49,12 @@ class LinkComponent {
|
|
|
49
49
|
inline;
|
|
50
50
|
target = '_self';
|
|
51
51
|
computedClasses = () => `nl-link rhc-link ${this.inline ? 'rhc-link--inline' : ''}`;
|
|
52
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
53
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LinkComponent, isStandalone: true, selector: "rhc-link", inputs: { href: "href", inline: "inline", target: "target" }, ngImport: i0, template: "<a href=\"{{ href }}\" class=\"{{ computedClasses() }}\" 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)}.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-disabled-color);cursor:var(--nl-link-disabled-cursor, not-allowed);text-decoration-line:none}\n"] });
|
|
54
54
|
}
|
|
55
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkComponent, decorators: [{
|
|
56
56
|
type: Component,
|
|
57
|
-
args: [{ selector: 'rhc-link', imports: [], template: "<a href=\"{{ href }}\" class=\"{{ computedClasses() }}\" 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)
|
|
57
|
+
args: [{ selector: 'rhc-link', imports: [], template: "<a href=\"{{ href }}\" class=\"{{ computedClasses() }}\" 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)}.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-disabled-color);cursor:var(--nl-link-disabled-cursor, not-allowed);text-decoration-line:none}\n"] }]
|
|
58
58
|
}], propDecorators: { href: [{
|
|
59
59
|
type: Input,
|
|
60
60
|
args: [{ required: true }]
|
|
@@ -67,10 +67,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
67
67
|
class ButtonComponent {
|
|
68
68
|
appearance = '';
|
|
69
69
|
disabled = false;
|
|
70
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
71
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
70
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
71
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ButtonComponent, isStandalone: true, selector: "button[rhc-button]", inputs: { appearance: "appearance", disabled: "disabled" }, host: { properties: { "class.utrecht-button": "true", "class.utrecht-button--primary-action": "appearance === \"primary-action\"", "class.utrecht-button--secondary-action": "appearance === \"secondary-action\"", "class.utrecht-button--subtle-action": "appearance === \"subtle\"", "attr.disabled": "disabled ? \"disabled\" : null" } }, ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
72
72
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
74
74
|
type: Component,
|
|
75
75
|
args: [{ selector: 'button[rhc-button]', imports: [CommonModule], host: {
|
|
76
76
|
'[class.utrecht-button]': 'true',
|
|
@@ -91,10 +91,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
91
91
|
*/
|
|
92
92
|
class ActionGroupComponent {
|
|
93
93
|
direction = 'row';
|
|
94
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
95
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
94
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
95
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ActionGroupComponent, isStandalone: true, selector: "rhc-action-group", inputs: { direction: "direction" }, ngImport: i0, template: "<!--\n @license EUPL-1.2\n Copyright (c) 2025 Community for NL Design System\n-->\n<div\n [class]=\"{\n 'utrecht-action-group': true,\n 'utrecht-action-group--column': direction === 'column',\n 'utrecht-action-group--column-stretch': direction === 'column-stretch',\n 'utrecht-action-group--row': direction === 'row',\n }\"\n>\n <ng-content />\n</div>\n" });
|
|
96
96
|
}
|
|
97
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
97
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionGroupComponent, decorators: [{
|
|
98
98
|
type: Component,
|
|
99
99
|
args: [{ selector: 'rhc-action-group', imports: [], template: "<!--\n @license EUPL-1.2\n Copyright (c) 2025 Community for NL Design System\n-->\n<div\n [class]=\"{\n 'utrecht-action-group': true,\n 'utrecht-action-group--column': direction === 'column',\n 'utrecht-action-group--column-stretch': direction === 'column-stretch',\n 'utrecht-action-group--row': direction === 'row',\n }\"\n>\n <ng-content />\n</div>\n" }]
|
|
100
100
|
}], propDecorators: { direction: [{
|
|
@@ -102,10 +102,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
102
102
|
}] } });
|
|
103
103
|
|
|
104
104
|
class ImageComponent {
|
|
105
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
105
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
106
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.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" });
|
|
107
107
|
}
|
|
108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageComponent, decorators: [{
|
|
109
109
|
type: Component,
|
|
110
110
|
args: [{ selector: 'img[rhc-image]', imports: [], host: {
|
|
111
111
|
'[class.utrecht-img]': 'true',
|
|
@@ -118,10 +118,10 @@ class FigureComponent {
|
|
|
118
118
|
borderEndStartRadius;
|
|
119
119
|
borderStartEndRadius;
|
|
120
120
|
borderStartStartRadius;
|
|
121
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
122
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
121
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FigureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FigureComponent, isStandalone: true, selector: "figure[rhc-figure]", inputs: { borderEndEndRadius: "borderEndEndRadius", borderEndStartRadius: "borderEndStartRadius", borderStartEndRadius: "borderStartEndRadius", borderStartStartRadius: "borderStartStartRadius" }, host: { properties: { "class.utrecht-figure": "true", "style.--utrecht-figure-img-border-end-end-radius": "borderEndEndRadius ? borderEndEndRadius + \"px\" : null", "style.--utrecht-figure-img-border-end-start-radius": "borderEndStartRadius ? borderEndStartRadius + \"px\" : null", "style.--utrecht-figure-img-border-start-end-radius": "borderStartEndRadius ? borderStartEndRadius + \"px\" : null", "style.--utrecht-figure-img-border-start-start-radius": "borderStartStartRadius ? borderStartStartRadius + \"px\" : null" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
123
123
|
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FigureComponent, decorators: [{
|
|
125
125
|
type: Component,
|
|
126
126
|
args: [{ selector: 'figure[rhc-figure]', imports: [], host: {
|
|
127
127
|
'[class.utrecht-figure]': 'true',
|
|
@@ -141,10 +141,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
141
141
|
}] } });
|
|
142
142
|
|
|
143
143
|
class FigureCaptionComponent {
|
|
144
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
144
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FigureCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FigureCaptionComponent, isStandalone: true, selector: "figcaption[rhc-figure-caption]", host: { properties: { "class.utrecht-figure__caption": "true" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
146
146
|
}
|
|
147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FigureCaptionComponent, decorators: [{
|
|
148
148
|
type: Component,
|
|
149
149
|
args: [{ selector: 'figcaption[rhc-figure-caption]', imports: [], host: {
|
|
150
150
|
'[class.utrecht-figure__caption]': 'true',
|
|
@@ -152,20 +152,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
152
152
|
}] });
|
|
153
153
|
|
|
154
154
|
class IconComponent {
|
|
155
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
156
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
155
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
156
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: IconComponent, isStandalone: true, selector: "rhc-icon", ngImport: i0, template: "<span class=\"utrecht-icon\">\n <ng-content />\n</span>\n", styles: [":host{display:contents}\n"] });
|
|
157
157
|
}
|
|
158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, decorators: [{
|
|
159
159
|
type: Component,
|
|
160
160
|
args: [{ selector: 'rhc-icon', template: "<span class=\"utrecht-icon\">\n <ng-content />\n</span>\n", styles: [":host{display:contents}\n"] }]
|
|
161
161
|
}] });
|
|
162
162
|
|
|
163
163
|
class UnorderedListComponent {
|
|
164
164
|
nested = false;
|
|
165
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
166
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
165
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnorderedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
166
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: UnorderedListComponent, isStandalone: true, selector: "ul[rhc-unordered-list]", inputs: { nested: "nested" }, host: { properties: { "class.utrecht-unordered-list": "true", "class.utrecht-unordered-list--nested": "nested" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
167
167
|
}
|
|
168
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnorderedListComponent, decorators: [{
|
|
169
169
|
type: Component,
|
|
170
170
|
args: [{ selector: 'ul[rhc-unordered-list]', imports: [], host: {
|
|
171
171
|
'[class.utrecht-unordered-list]': 'true',
|
|
@@ -176,10 +176,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
176
176
|
}] } });
|
|
177
177
|
|
|
178
178
|
class UnorderedListItemComponent {
|
|
179
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
180
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnorderedListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: UnorderedListItemComponent, isStandalone: true, selector: "li[rhc-unordered-list-item]", host: { properties: { "class.utrecht-unordered-list__item": "true" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
181
181
|
}
|
|
182
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UnorderedListItemComponent, decorators: [{
|
|
183
183
|
type: Component,
|
|
184
184
|
args: [{ selector: 'li[rhc-unordered-list-item]', imports: [], host: {
|
|
185
185
|
'[class.utrecht-unordered-list__item]': 'true',
|
|
@@ -188,10 +188,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
188
188
|
|
|
189
189
|
class ColumnLayoutComponent {
|
|
190
190
|
rule = false;
|
|
191
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
192
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
191
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ColumnLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
192
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ColumnLayoutComponent, isStandalone: true, selector: "rhc-column-layout", inputs: { rule: "rule" }, ngImport: i0, template: "<div\n [class]=\"{\n 'utrecht-column-layout': true,\n 'utrecht-column-layout--rule': rule,\n }\"\n>\n <ng-content></ng-content>\n</div>\n" });
|
|
193
193
|
}
|
|
194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ColumnLayoutComponent, decorators: [{
|
|
195
195
|
type: Component,
|
|
196
196
|
args: [{ selector: 'rhc-column-layout', imports: [], template: "<div\n [class]=\"{\n 'utrecht-column-layout': true,\n 'utrecht-column-layout--rule': rule,\n }\"\n>\n <ng-content></ng-content>\n</div>\n" }]
|
|
197
197
|
}], propDecorators: { rule: [{
|
|
@@ -201,10 +201,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
201
201
|
class LogoComponent {
|
|
202
202
|
organisation;
|
|
203
203
|
subtitle;
|
|
204
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
205
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
204
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
205
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LogoComponent, isStandalone: true, selector: "figure[rhc-logo]", inputs: { organisation: "organisation", subtitle: "subtitle" }, host: { properties: { "class.rhc-logo": "true" } }, ngImport: i0, template: "<div class=\"rhc-logo__image\">\n <ng-content></ng-content>\n</div>\n<figcaption class=\"rhc-logo__caption\">\n <p class=\"rhc-logo__title\">{{ organisation }}</p>\n @if (subtitle) {\n <p class=\"rhc-logo__subtitle\">{{ subtitle }}</p>\n }\n</figcaption>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
206
206
|
}
|
|
207
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LogoComponent, decorators: [{
|
|
208
208
|
type: Component,
|
|
209
209
|
args: [{ selector: 'figure[rhc-logo]', imports: [CommonModule], host: { '[class.rhc-logo]': 'true' }, template: "<div class=\"rhc-logo__image\">\n <ng-content></ng-content>\n</div>\n<figcaption class=\"rhc-logo__caption\">\n <p class=\"rhc-logo__title\">{{ organisation }}</p>\n @if (subtitle) {\n <p class=\"rhc-logo__subtitle\">{{ subtitle }}</p>\n }\n</figcaption>\n" }]
|
|
210
210
|
}], propDecorators: { organisation: [{
|
|
@@ -223,12 +223,12 @@ class FormFieldComponent {
|
|
|
223
223
|
showLabel = true;
|
|
224
224
|
showDescription = false;
|
|
225
225
|
constructor() { }
|
|
226
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
227
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
226
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
227
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FormFieldComponent, isStandalone: true, selector: "rhc-form-field", inputs: { type: "type", class: "class", invalid: "invalid", showInput: "showInput", showLabel: "showLabel", showDescription: "showDescription" }, ngImport: i0, template: "<div\n [ngClass]=\"{\n 'utrecht-form-field': true,\n 'rhc-form-field': true,\n 'utrecht-form-field--invalid': invalid,\n 'utrecht-form-field--checkbox': type === 'checkbox',\n 'utrecht-form-field--radio': type === 'radio',\n 'utrecht-form-field--text': type === 'text',\n }\"\n [class]=\"class\"\n>\n @if (showLabel) {\n <div class=\"utrecht-form-field__label\">\n <ng-content select=\"[rhc-form-label]\"></ng-content>\n </div>\n }\n\n @if (showDescription) {\n <div class=\"utrecht-form-field__description\">\n <ng-content select=\"rhc-form-field-description\"></ng-content>\n </div>\n }\n\n @if (invalid) {\n <div class=\"utrecht-form-field__error-message\">\n <ng-content select=\"rhc-form-field-error-message\"></ng-content>\n </div>\n }\n\n @if (showInput) {\n <div class=\"utrecht-form-field__input\">\n <ng-content select=\"[rhc-text-input]\"></ng-content>\n </div>\n }\n\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
228
228
|
}
|
|
229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
230
230
|
type: Component,
|
|
231
|
-
args: [{ selector: 'rhc-form-field', imports: [NgClass], template: "<div\n [ngClass]=\"{\n 'utrecht-form-field': true,\n 'utrecht-form-field--invalid': invalid,\n 'utrecht-form-field--checkbox': type === 'checkbox',\n 'utrecht-form-field--radio': type === 'radio',\n 'utrecht-form-field--text': type === 'text',\n }\"\n [class]=\"class\"\n>\n @if (showLabel) {\n <div class=\"utrecht-form-field__label\">\n <ng-content select=\"[rhc-form-label]\"></ng-content>\n </div>\n }\n\n @if (showDescription) {\n <div class=\"utrecht-form-field__description\">\n <ng-content select=\"rhc-form-field-description\"></ng-content>\n </div>\n }\n\n @if (invalid) {\n <div class=\"utrecht-form-field__error-message\">\n <ng-content select=\"rhc-form-field-error-message\"></ng-content>\n </div>\n }\n\n @if (showInput) {\n <div class=\"utrecht-form-field__input\">\n <ng-content select=\"[rhc-text-input]\"></ng-content>\n </div>\n }\n\n <ng-content></ng-content>\n</div>\n" }]
|
|
231
|
+
args: [{ selector: 'rhc-form-field', imports: [NgClass], template: "<div\n [ngClass]=\"{\n 'utrecht-form-field': true,\n 'rhc-form-field': true,\n 'utrecht-form-field--invalid': invalid,\n 'utrecht-form-field--checkbox': type === 'checkbox',\n 'utrecht-form-field--radio': type === 'radio',\n 'utrecht-form-field--text': type === 'text',\n }\"\n [class]=\"class\"\n>\n @if (showLabel) {\n <div class=\"utrecht-form-field__label\">\n <ng-content select=\"[rhc-form-label]\"></ng-content>\n </div>\n }\n\n @if (showDescription) {\n <div class=\"utrecht-form-field__description\">\n <ng-content select=\"rhc-form-field-description\"></ng-content>\n </div>\n }\n\n @if (invalid) {\n <div class=\"utrecht-form-field__error-message\">\n <ng-content select=\"rhc-form-field-error-message\"></ng-content>\n </div>\n }\n\n @if (showInput) {\n <div class=\"utrecht-form-field__input\">\n <ng-content select=\"[rhc-text-input]\"></ng-content>\n </div>\n }\n\n <ng-content></ng-content>\n</div>\n" }]
|
|
232
232
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
233
233
|
type: Input
|
|
234
234
|
}], class: [{
|
|
@@ -248,10 +248,10 @@ class FormFieldDescriptionComponent {
|
|
|
248
248
|
valid = false;
|
|
249
249
|
warning = false;
|
|
250
250
|
class;
|
|
251
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
252
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
251
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
252
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FormFieldDescriptionComponent, isStandalone: true, selector: "rhc-form-field-description", inputs: { invalid: "invalid", valid: "valid", warning: "warning", class: "class" }, ngImport: i0, template: "<div\n [ngClass]=\"{\n 'utrecht-form-field-description': true,\n 'utrecht-form-field-description--invalid': invalid,\n 'utrecht-form-field-description--valid': valid,\n 'utrecht-form-field-description--warning': warning,\n }\"\n [class]=\"class\"\n>\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
253
253
|
}
|
|
254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldDescriptionComponent, decorators: [{
|
|
255
255
|
type: Component,
|
|
256
256
|
args: [{ selector: 'rhc-form-field-description', imports: [NgClass], template: "<div\n [ngClass]=\"{\n 'utrecht-form-field-description': true,\n 'utrecht-form-field-description--invalid': invalid,\n 'utrecht-form-field-description--valid': valid,\n 'utrecht-form-field-description--warning': warning,\n }\"\n [class]=\"class\"\n>\n <ng-content></ng-content>\n</div>\n" }]
|
|
257
257
|
}], propDecorators: { invalid: [{
|
|
@@ -265,10 +265,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
265
265
|
}] } });
|
|
266
266
|
|
|
267
267
|
class FormFieldErrorMessageComponent {
|
|
268
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
269
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
268
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
269
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FormFieldErrorMessageComponent, isStandalone: true, selector: "rhc-form-field-error-message", ngImport: i0, template: "<div class=\"utrecht-form-field-error-message\">\n <ng-content></ng-content>\n</div>\n" });
|
|
270
270
|
}
|
|
271
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldErrorMessageComponent, decorators: [{
|
|
272
272
|
type: Component,
|
|
273
273
|
args: [{ selector: 'rhc-form-field-error-message', template: "<div class=\"utrecht-form-field-error-message\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
274
274
|
}] });
|
|
@@ -277,10 +277,10 @@ class FormLabelComponent {
|
|
|
277
277
|
disabled = false;
|
|
278
278
|
checked = false;
|
|
279
279
|
type;
|
|
280
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
281
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
280
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
281
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FormLabelComponent, isStandalone: true, selector: "label[rhc-form-label]", inputs: { disabled: "disabled", checked: "checked", type: "type" }, host: { properties: { "class.utrecht-form-label": "true", "class.utrecht-form-label--disabled": "disabled", "class.utrecht-form-label--checked": "checked", "class.utrecht-form-label--radio": "type === \"radio\"", "class.utrecht-form-label--checkbox": "type === \"checkbox\"" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
282
282
|
}
|
|
283
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormLabelComponent, decorators: [{
|
|
284
284
|
type: Component,
|
|
285
285
|
args: [{ selector: 'label[rhc-form-label]', imports: [], host: {
|
|
286
286
|
'[class.utrecht-form-label]': 'true',
|
|
@@ -311,10 +311,10 @@ class TextInputComponent {
|
|
|
311
311
|
*/
|
|
312
312
|
inputRequired = false;
|
|
313
313
|
readonly = false;
|
|
314
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
315
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
314
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
315
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TextInputComponent, isStandalone: true, selector: "input[rhc-text-input]", inputs: { disabled: "disabled", invalid: "invalid", required: "required", inputRequired: "inputRequired", readonly: "readonly" }, host: { properties: { "class.utrecht-textbox": "true", "class.utrecht-textbox--html-input": "true", "class.utrecht-textbox--disabled": "disabled", "class.utrecht-textbox--invalid": "invalid", "class.utrecht-textbox--readonly": "readonly", "class.utrecht-textbox--required": "required", "attr.aria-invalid": "invalid || undefined", "attr.disabled": "disabled ? \"disabled\": null", "attr.required": "inputRequired ? \"required\": null", "attr.aria-required": "required ? \"true\" : null", "attr.readonly": "readonly ? \"readonly\" : null" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
316
316
|
}
|
|
317
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
317
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
318
318
|
type: Component,
|
|
319
319
|
args: [{ selector: 'input[rhc-text-input]', imports: [], host: {
|
|
320
320
|
'[class.utrecht-textbox]': 'true',
|
|
@@ -396,8 +396,8 @@ class FormFieldTextInputComponent {
|
|
|
396
396
|
setDisabledState(isDisabled) {
|
|
397
397
|
this.disabled = isDisabled;
|
|
398
398
|
}
|
|
399
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
400
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
399
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FormFieldTextInputComponent, isStandalone: true, selector: "rhc-form-field-text-input", inputs: { invalid: "invalid", showDescription: "showDescription", label: "label", errorMessage: "errorMessage", description: "description", status: "status", required: "required", inputRequired: "inputRequired", readonly: "readonly", dir: "dir", name: "name", autocomplete: "autocomplete", placeholder: "placeholder", size: "size", minLength: "minLength", maxLength: "maxLength", min: "min", max: "max", step: "step", type: "type", inputId: "inputId" }, providers: [
|
|
401
401
|
{
|
|
402
402
|
provide: NG_VALUE_ACCESSOR,
|
|
403
403
|
useExisting: forwardRef(() => FormFieldTextInputComponent),
|
|
@@ -405,7 +405,7 @@ class FormFieldTextInputComponent {
|
|
|
405
405
|
},
|
|
406
406
|
], 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>\n {{ errorMessage }}\n </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 [inputRequired]=\"inputRequired\"\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", "inputRequired", "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"] }] });
|
|
407
407
|
}
|
|
408
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldTextInputComponent, decorators: [{
|
|
409
409
|
type: Component,
|
|
410
410
|
args: [{ selector: 'rhc-form-field-text-input', imports: [
|
|
411
411
|
FormFieldComponent,
|
|
@@ -467,15 +467,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
467
467
|
|
|
468
468
|
class LinkListLinkComponent {
|
|
469
469
|
href;
|
|
470
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
471
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
470
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkListLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
471
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LinkListLinkComponent, isStandalone: true, selector: "a[rhc-link-list-link]", inputs: { href: "href" }, host: { properties: { "class.utrecht-link-list__link": "true", "class.utrecht-link": "true", "class.utrecht-link--html-a": "true" } }, ngImport: i0, template: "<ng-content select=\"[icon]\"></ng-content>\n<span class=\"utrecht-link-list__link-text\">\n <ng-content></ng-content>\n</span>\n" });
|
|
472
472
|
}
|
|
473
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
473
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkListLinkComponent, decorators: [{
|
|
474
474
|
type: Component,
|
|
475
475
|
args: [{ selector: 'a[rhc-link-list-link]', imports: [], host: {
|
|
476
476
|
'[class.utrecht-link-list__link]': 'true',
|
|
477
477
|
'[class.utrecht-link]': 'true',
|
|
478
|
-
'[utrecht-link--html-a]': 'true',
|
|
478
|
+
'[class.utrecht-link--html-a]': 'true',
|
|
479
479
|
}, template: "<ng-content select=\"[icon]\"></ng-content>\n<span class=\"utrecht-link-list__link-text\">\n <ng-content></ng-content>\n</span>\n" }]
|
|
480
480
|
}], propDecorators: { href: [{
|
|
481
481
|
type: Input,
|
|
@@ -483,19 +483,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
483
483
|
}] } });
|
|
484
484
|
|
|
485
485
|
class LinkListComponent {
|
|
486
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
487
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
486
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
487
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LinkListComponent, isStandalone: true, selector: "rhc-link-list", ngImport: i0, template: "<ul class=\"rhc-link-list utrecht-link-list utrecht-link-list--html-ul\">\n <ng-content></ng-content>\n</ul>\n" });
|
|
488
488
|
}
|
|
489
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
489
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkListComponent, decorators: [{
|
|
490
490
|
type: Component,
|
|
491
|
-
args: [{ selector: 'rhc-link-list', imports: [], template: "<ul class=\"utrecht-link-list utrecht-link-list--html-ul\">\n <ng-content></ng-content>\n</ul>\n" }]
|
|
491
|
+
args: [{ selector: 'rhc-link-list', imports: [], template: "<ul class=\"rhc-link-list utrecht-link-list utrecht-link-list--html-ul\">\n <ng-content></ng-content>\n</ul>\n" }]
|
|
492
492
|
}] });
|
|
493
493
|
|
|
494
494
|
class LinkListItemComponent {
|
|
495
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
496
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
495
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
496
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LinkListItemComponent, isStandalone: true, selector: "li[rhc-link-list-item]", host: { properties: { "class.utrecht-link-list__item": "true" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
|
|
497
497
|
}
|
|
498
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
498
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkListItemComponent, decorators: [{
|
|
499
499
|
type: Component,
|
|
500
500
|
args: [{ selector: 'li[rhc-link-list-item]', imports: [], host: {
|
|
501
501
|
'[class.utrecht-link-list__item]': 'true',
|
|
@@ -504,10 +504,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
504
504
|
|
|
505
505
|
class NavbarComponent {
|
|
506
506
|
showEndItems = false;
|
|
507
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
508
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
507
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
508
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NavbarComponent, isStandalone: true, selector: "rhc-navbar", inputs: { showEndItems: "showEndItems" }, ngImport: i0, template: "<div class=\"rhc-nav-bar__container\">\n <nav class=\"rhc-nav-bar\">\n <ul class=\"rhc-nav-bar__list\">\n <ng-content select=\"[rhc-navbar-item][rhcHeadingItem]\"></ng-content>\n <ng-content select=\"[rhc-navbar-item]:not([rhcEndItem])\"></ng-content>\n </ul>\n @if (showEndItems) {\n <ul class=\"rhc-nav-bar__list rhc-nav-bar__list--end\">\n <ng-content select=\"[rhc-navbar-item][rhcEndItem]\"></ng-content>\n </ul>\n }\n <ng-content></ng-content>\n </nav>\n</div>\n" });
|
|
509
509
|
}
|
|
510
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
510
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
511
511
|
type: Component,
|
|
512
512
|
args: [{ selector: 'rhc-navbar', imports: [], template: "<div class=\"rhc-nav-bar__container\">\n <nav class=\"rhc-nav-bar\">\n <ul class=\"rhc-nav-bar__list\">\n <ng-content select=\"[rhc-navbar-item][rhcHeadingItem]\"></ng-content>\n <ng-content select=\"[rhc-navbar-item]:not([rhcEndItem])\"></ng-content>\n </ul>\n @if (showEndItems) {\n <ul class=\"rhc-nav-bar__list rhc-nav-bar__list--end\">\n <ng-content select=\"[rhc-navbar-item][rhcEndItem]\"></ng-content>\n </ul>\n }\n <ng-content></ng-content>\n </nav>\n</div>\n" }]
|
|
513
513
|
}], propDecorators: { showEndItems: [{
|
|
@@ -516,10 +516,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
516
516
|
|
|
517
517
|
class NavbarItemComponent {
|
|
518
518
|
href;
|
|
519
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
520
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
519
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
520
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: NavbarItemComponent, isStandalone: true, selector: "li[rhc-navbar-item]", inputs: { href: "href" }, host: { properties: { "class.rhc-nav-bar__item": "true" } }, ngImport: i0, template: "<a [href]=\"href\" class=\"nl-link rhc-nav-bar__link\">\n <ng-content select=\"[icon]\"></ng-content>\n <span class=\"rhc-nav-bar__label\">\n <ng-content></ng-content>\n </span>\n</a>\n" });
|
|
521
521
|
}
|
|
522
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
522
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarItemComponent, decorators: [{
|
|
523
523
|
type: Component,
|
|
524
524
|
args: [{ selector: 'li[rhc-navbar-item]', imports: [], host: {
|
|
525
525
|
'[class.rhc-nav-bar__item]': 'true',
|
|
@@ -531,10 +531,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
531
531
|
|
|
532
532
|
class HeadingItemDirective {
|
|
533
533
|
className = 'rhc-nav-bar__heading';
|
|
534
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
535
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
534
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HeadingItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
535
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: HeadingItemDirective, isStandalone: true, selector: "[rhcHeadingItem]", host: { properties: { "class": "this.className" } }, ngImport: i0 });
|
|
536
536
|
}
|
|
537
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
537
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HeadingItemDirective, decorators: [{
|
|
538
538
|
type: Directive,
|
|
539
539
|
args: [{
|
|
540
540
|
selector: '[rhcHeadingItem]',
|
|
@@ -549,10 +549,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
549
549
|
* Een endItem wordt aan het einde van de navbar geplaatst.
|
|
550
550
|
*/
|
|
551
551
|
class EndItemDirective {
|
|
552
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
553
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
552
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EndItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
553
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: EndItemDirective, isStandalone: true, selector: "[rhcEndItem]", ngImport: i0 });
|
|
554
554
|
}
|
|
555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
555
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EndItemDirective, decorators: [{
|
|
556
556
|
type: Directive,
|
|
557
557
|
args: [{
|
|
558
558
|
selector: '[rhcEndItem]',
|
|
@@ -569,10 +569,10 @@ class FooterComponent {
|
|
|
569
569
|
get backgroundClass() {
|
|
570
570
|
return `rhc-page-footer--${this.background}`;
|
|
571
571
|
}
|
|
572
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
573
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
572
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
573
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FooterComponent, isStandalone: true, selector: "footer[rhc-footer]", inputs: { background: "background", preFooter: "preFooter", preFooterMessage: "preFooterMessage", heading: "heading", appearanceLevel: "appearanceLevel", 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 [class]=\"`utrecht-page-footer rhc-page-footer ${backgroundClass}`\">\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 <ng-content select=\"[columns]\"></ng-content>\n </rhc-column-layout>\n </div>\n\n @if (subFooter) {\n <div [class]=\"`rhc-page-subfooter ${backgroundClass}`\">\n <div class=\"rhc-page-subfooter__content rhc-page-footer__wrapper\">\n <ng-content select=\"[subFooter]\"></ng-content>\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: HeadingComponent, selector: "rhc-heading", inputs: ["level", "appearanceLevel"] }, { kind: "component", type: ColumnLayoutComponent, selector: "rhc-column-layout", inputs: ["rule"] }] });
|
|
574
574
|
}
|
|
575
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
575
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FooterComponent, decorators: [{
|
|
576
576
|
type: Component,
|
|
577
577
|
args: [{ selector: 'footer[rhc-footer]', imports: [HeadingComponent, ColumnLayoutComponent], 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 [class]=\"`utrecht-page-footer rhc-page-footer ${backgroundClass}`\">\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 <ng-content select=\"[columns]\"></ng-content>\n </rhc-column-layout>\n </div>\n\n @if (subFooter) {\n <div [class]=\"`rhc-page-subfooter ${backgroundClass}`\">\n <div class=\"rhc-page-subfooter__content rhc-page-footer__wrapper\">\n <ng-content select=\"[subFooter]\"></ng-content>\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"] }]
|
|
578
578
|
}], propDecorators: { background: [{
|
|
@@ -591,10 +591,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
591
591
|
|
|
592
592
|
class DataSummaryComponent {
|
|
593
593
|
appearance = 'Column';
|
|
594
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
595
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
594
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
595
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.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"] }] });
|
|
596
596
|
}
|
|
597
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
597
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataSummaryComponent, decorators: [{
|
|
598
598
|
type: Component,
|
|
599
599
|
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" }]
|
|
600
600
|
}], propDecorators: { appearance: [{
|
|
@@ -607,10 +607,10 @@ class DataSummaryItemComponent {
|
|
|
607
607
|
href;
|
|
608
608
|
target = '_self';
|
|
609
609
|
actionLabel;
|
|
610
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
611
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
610
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
611
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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", "inline", "target"] }] });
|
|
612
612
|
}
|
|
613
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
613
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataSummaryItemComponent, decorators: [{
|
|
614
614
|
type: Component,
|
|
615
615
|
args: [{ selector: 'div[rhc-data-summary-item]', imports: [CommonModule, LinkComponent], host: {
|
|
616
616
|
'[class.rhc-data-summary__item]': 'true',
|
|
@@ -641,15 +641,15 @@ class BackToTopComponent {
|
|
|
641
641
|
return;
|
|
642
642
|
$target.focus({ preventScroll: true }); // Ensure target is focusable, ie via tabindex={-1} on #main
|
|
643
643
|
};
|
|
644
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
645
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
644
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BackToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
645
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: BackToTopComponent, isStandalone: true, selector: "rhc-back-to-top", providers: [
|
|
646
646
|
{
|
|
647
647
|
provide: Window,
|
|
648
648
|
useValue: window,
|
|
649
649
|
},
|
|
650
650
|
], ngImport: i0, template: "<a class=\"rhc-page-subfooter__backtotop\" href=\"#main\" (click)=\"scrollBackToTop($event)\">\n <ng-content></ng-content>\n</a>\n", styles: [":host{margin-left:auto}\n"] });
|
|
651
651
|
}
|
|
652
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
652
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BackToTopComponent, decorators: [{
|
|
653
653
|
type: Component,
|
|
654
654
|
args: [{ selector: 'rhc-back-to-top', imports: [], providers: [
|
|
655
655
|
{
|