@rijkshuisstijl-community/components-angular 1.0.0 → 1.2.0

package/dist/fesm2022/rijkshuisstijl-community-components-angular.mjs

@@ -1,9 +1,10 @@
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component } from '@angular/core';
+import { Input, Component, forwardRef, HostBinding, Directive } from '@angular/core';
 import { TablerIconComponent, provideTablerIcons } from 'angular-tabler-icons';
 import * as TablerIcons from 'angular-tabler-icons/icons';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 const headingLevels = [1, 2, 3, 4, 5];
 class HeadingComponent {
@@ -47,27 +48,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
 
 class LinkComponent {
     href;
+    target = '_self';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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"] });
+    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"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], propDecorators: { href: [{
                 type: Input,
                 args: [{ required: true }]
+            }], target: [{
+                type: Input
             }] } });
 
 class ButtonComponent {
     appearance = '';
     disabled = false;
-    computedClasses = () => `utrecht-button utrecht-button--${this.appearance}`;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: ButtonComponent, isStandalone: true, selector: "rhc-button", inputs: { appearance: "appearance", disabled: "disabled" }, ngImport: i0, template: "<button class=\"{{ computedClasses() }}\" [disabled]=\"disabled\">\n  <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rhc-button', imports: [CommonModule], template: "<button class=\"{{ computedClasses() }}\" [disabled]=\"disabled\">\n  <ng-content></ng-content>\n</button>\n" }]
+            args: [{ selector: 'button[rhc-button]', imports: [CommonModule], host: {
+                        '[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',
+                    }, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { appearance: [{
                 type: Input
             }], disabled: [{
@@ -86,6 +95,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
                 type: Input
             }] } });
 
+class ImageComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'img[rhc-image]', imports: [], host: {
+                        '[class.utrecht-img]': 'true',
+                        '[class.utrecht-img--photo]': 'true',
+                    }, template: "<ng-content></ng-content>\n" }]
+        }] });
+
+class FigureComponent {
+    borderEndEndRadius;
+    borderEndStartRadius;
+    borderStartEndRadius;
+    borderStartStartRadius;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FigureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FigureComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'figure[rhc-figure]', imports: [], host: {
+                        '[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',
+                    }, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { borderEndEndRadius: [{
+                type: Input
+            }], borderEndStartRadius: [{
+                type: Input
+            }], borderStartEndRadius: [{
+                type: Input
+            }], borderStartStartRadius: [{
+                type: Input
+            }] } });
+
+class FigureCaptionComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FigureCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FigureCaptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'figcaption[rhc-figure-caption]', imports: [], host: {
+                        '[class.utrecht-figure__caption]': 'true',
+                    }, template: "<ng-content></ng-content>\n" }]
+        }] });
+
 class BgFlagComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: BgFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: BgFlagComponent, isStandalone: true, selector: "rhc-bg-flag", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1000\" height=\"600\" viewBox=\"0 0 5 3\">\n  <rect width=\"5\" height=\"3\" fill=\"#fff\" />\n  <rect width=\"5\" height=\"2\" y=\"1\" fill=\"#00966E\" />\n  <rect width=\"5\" height=\"1\" y=\"2\" fill=\"#D62612\" />\n</svg>\n" });
@@ -272,7 +331,6 @@ class IconComponent {
         mail: 'mail',
         meer: 'dots-vertical',
         menu: 'menu-2',
-        'nederland-map': 'dutch-map-icon',
         nieuws: 'news',
         paperclip: 'paperclip',
         'permanent-beta': 'backhoe',
@@ -313,16 +371,481 @@ class IconComponent {
         return Object.keys(IconComponent.iconSet);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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:inline-flex}\n"], dependencies: [{ kind: "component", type: TablerIconComponent, selector: "i-tabler, tabler-icon", inputs: ["name"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            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:inline-flex}\n"] }]
+            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"] }]
         }], propDecorators: { icon: [{
                 type: Input,
                 args: [{ required: false }]
             }] } });
 
+class UnorderedListComponent {
+    nested = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: UnorderedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: UnorderedListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul[rhc-unordered-list]', imports: [], host: {
+                        '[class.utrecht-unordered-list]': 'true',
+                        '[class.utrecht-unordered-list--nested]': 'nested',
+                    }, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { nested: [{
+                type: Input
+            }] } });
+
+class UnorderedListItemComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: UnorderedListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: UnorderedListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[rhc-unordered-list-item]', imports: [], host: {
+                        '[class.utrecht-unordered-list__item]': 'true',
+                    }, template: "<ng-content></ng-content>\n" }]
+        }] });
+
+class ColumnLayoutComponent {
+    rule = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ColumnLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ColumnLayoutComponent, decorators: [{
+            type: Component,
+            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" }]
+        }], propDecorators: { rule: [{
+                type: Input
+            }] } });
+
+class LogoComponent {
+    organisation;
+    subtitle;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LogoComponent, decorators: [{
+            type: Component,
+            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" }]
+        }], propDecorators: { organisation: [{
+                type: Input,
+                args: [{ required: true }]
+            }], subtitle: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
+
+class FormFieldComponent {
+    type;
+    class;
+    invalid = false;
+    showInput = true;
+    showLabel = true;
+    showDescription = false;
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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    '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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            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" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], showInput: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], showDescription: [{
+                type: Input
+            }] } });
+
+class FormFieldDescriptionComponent {
+    invalid = false;
+    valid = false;
+    warning = false;
+    class;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldDescriptionComponent, decorators: [{
+            type: Component,
+            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" }]
+        }], propDecorators: { invalid: [{
+                type: Input
+            }], valid: [{
+                type: Input
+            }], warning: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+class FormFieldErrorMessageComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: FormFieldErrorMessageComponent, isStandalone: true, selector: "rhc-form-field-error-message", ngImport: i0, template: "<div class=\"utrecht-form-field-error-message\">\n  <span class=\"utrecht-form-field-error-message--icon-container\">\n    <rhc-icon icon=\"alert-circle\" class=\"utrecht-form-field-error-message--icon-container-icon\" />\n    <ng-content></ng-content>\n  </span>\n</div>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "rhc-icon", inputs: ["icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldErrorMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rhc-form-field-error-message', imports: [IconComponent], template: "<div class=\"utrecht-form-field-error-message\">\n  <span class=\"utrecht-form-field-error-message--icon-container\">\n    <rhc-icon icon=\"alert-circle\" class=\"utrecht-form-field-error-message--icon-container-icon\" />\n    <ng-content></ng-content>\n  </span>\n</div>\n" }]
+        }] });
+
+class FormLabelComponent {
+    disabled = false;
+    checked = false;
+    type;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'label[rhc-form-label]', imports: [], host: {
+                        '[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"',
+                    }, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+class TextInputComponent {
+    disabled = false;
+    invalid = false;
+    required = false;
+    readonly = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: TextInputComponent, isStandalone: true, selector: "input[rhc-text-input]", inputs: { disabled: "disabled", invalid: "invalid", required: "required", 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": "required ? \"required\": null", "attr.readonly": "readonly ? \"readonly\" : null" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[rhc-text-input]', imports: [], host: {
+                        '[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]': 'required ? "required": null',
+                        '[attr.readonly]': 'readonly ? "readonly" : null',
+                    }, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }] } });
+
+class FormFieldTextInputComponent {
+    invalid = false;
+    showDescription = false;
+    label;
+    errorMessage;
+    description;
+    status;
+    required = false;
+    readonly = false;
+    dir = 'auto';
+    name;
+    autocomplete;
+    placeholder;
+    size;
+    minLength;
+    maxLength;
+    min;
+    max;
+    step;
+    type = 'text';
+    inputId;
+    value = '';
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    onValueChange(event) {
+        const input = event.target;
+        this.value = input.value;
+        this.onChange(this.value);
+    }
+    markAsTouched() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    // eslint-disable-next-line no-unused-vars
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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", 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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FormFieldTextInputComponent),
+                multi: true,
+            },
+        ], 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormFieldTextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rhc-form-field-text-input', imports: [
+                        FormFieldComponent,
+                        FormLabelComponent,
+                        TextInputComponent,
+                        FormFieldErrorMessageComponent,
+                        FormFieldDescriptionComponent,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FormFieldTextInputComponent),
+                            multi: true,
+                        },
+                    ], 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" }]
+        }], propDecorators: { invalid: [{
+                type: Input
+            }], showDescription: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], dir: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], inputId: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class LinkListLinkComponent {
+    href;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkListLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: LinkListLinkComponent, isStandalone: true, selector: "a[rhc-link-list-link]", inputs: { href: "href" }, host: { properties: { "class.utrecht-link-list__link": "true", "class.nl-link": "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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkListLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[rhc-link-list-link]', imports: [], host: {
+                        '[class.utrecht-link-list__link]': 'true',
+                        '[class.nl-link]': 'true',
+                    }, template: "<ng-content select=\"[icon]\"></ng-content>\n<span class=\"utrecht-link-list__link-text\">\n  <ng-content></ng-content>\n</span>\n" }]
+        }], propDecorators: { href: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class LinkListComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: LinkListComponent, isStandalone: true, selector: "rhc-link-list", ngImport: i0, template: "<ul class=\"utrecht-link-list utrecht-link-list--html-ul\">\n  <ng-content></ng-content>\n</ul>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkListComponent, decorators: [{
+            type: Component,
+            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" }]
+        }] });
+
+class LinkListItemComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LinkListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[rhc-link-list-item]', imports: [], host: {
+                        '[class.utrecht-link-list__item]': 'true',
+                    }, template: "<ng-content></ng-content>\n" }]
+        }] });
+
+class NavbarComponent {
+    showEndItems = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            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" }]
+        }], propDecorators: { showEndItems: [{
+                type: Input
+            }] } });
+
+class NavbarItemComponent {
+    href;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NavbarItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[rhc-navbar-item]', imports: [], host: {
+                        '[class.rhc-nav-bar__item]': 'true',
+                    }, 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" }]
+        }], propDecorators: { href: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class HeadingItemDirective {
+    className = 'rhc-nav-bar__heading';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: HeadingItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: HeadingItemDirective, isStandalone: true, selector: "[rhcHeadingItem]", host: { properties: { "class": "this.className" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: HeadingItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rhcHeadingItem]',
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Deze directive wordt gebruikt als "marker". Hiermee kunnen <li>'s gemarkeerd worden als endItem.
+ * Een endItem wordt aan het einde van de navbar geplaatst.
+ */
+class EndItemDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EndItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: EndItemDirective, isStandalone: true, selector: "[rhcEndItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EndItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rhcEndItem]',
+                }]
+        }] });
+
+class FooterComponent {
+    background;
+    preFooter;
+    preFooterMessage;
+    heading;
+    appearanceLevel = 3;
+    columns;
+    backtotop;
+    subFooter;
+    scrollBackToTop = (event) => {
+        event.preventDefault();
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+        const targetElement = event.currentTarget;
+        const targetSelector = targetElement.getAttribute('href');
+        if (!targetSelector)
+            return;
+        const $target = document.querySelector(targetSelector);
+        if (!$target)
+            return;
+        $target.focus({ preventScroll: true }); // Ensure target is focusable, ie via tabindex={-1} on #main
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'footer[rhc-footer]', imports: [
+                        IconComponent,
+                        HeadingComponent,
+                        ColumnLayoutComponent,
+                        LinkListComponent,
+                        LinkListItemComponent,
+                        LinkListLinkComponent,
+                    ], 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"] }]
+        }], propDecorators: { background: [{
+                type: Input
+            }], preFooter: [{
+                type: Input
+            }], preFooterMessage: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], appearanceLevel: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], backtotop: [{
+                type: Input
+            }], subFooter: [{
+                type: Input
+            }] } });
+
+class DataSummaryComponent {
+    appearance = 'Column';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DataSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DataSummaryComponent, decorators: [{
+            type: Component,
+            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" }]
+        }], propDecorators: { appearance: [{
+                type: Input
+            }] } });
+
+class DataSummaryItemComponent {
+    key = '';
+    value = '';
+    href;
+    target = '_self';
+    actionLabel;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DataSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DataSummaryItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[rhc-data-summary-item]', imports: [CommonModule, LinkComponent], host: {
+                        '[class.rhc-data-summary__item]': 'true',
+                    }, 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" }]
+        }], propDecorators: { key: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], actionLabel: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of components-angular
  */
@@ -331,5 +854,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionGroupComponent, BgFlagComponent, ButtonComponent, DeFlagComponent, DutchMapIconComponent, EsFlagComponent, FrFlagComponent, GrFlagComponent, HeadingComponent, HuFlagComponent, IconComponent, ItFlagComponent, LinkComponent, LvFlagComponent, NlFlagComponent, ParagraphComponent, PlFlagComponent, PtFlagComponent, RoFlagComponent, SkFlagComponent, UkFlagComponent, appearanceOptions, headingLevels };
+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 };
 //# sourceMappingURL=rijkshuisstijl-community-components-angular.mjs.map