@rijkshuisstijl-community/components-angular 1.0.0 → 1.1.0

package/dist/button/button.component.d.ts

@@ -2,7 +2,6 @@ import * as i0 from "@angular/core";
 export declare class ButtonComponent {
     appearance?: '' | 'primary-action' | 'secondary-action' | 'subtle';
     disabled?: boolean;
-    computedClasses: () => string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "rhc-button", never, { "appearance": { "alias": "appearance"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[rhc-button]", never, { "appearance": { "alias": "appearance"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/dist/column-layout/column-layout.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class ColumnLayoutComponent {
+    rule?: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnLayoutComponent, "rhc-column-layout", never, { "rule": { "alias": "rule"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

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 {
@@ -61,13 +62,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
 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 +92,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-image": "true", "class.utrecht-image--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-image]': 'true',
+                        '[class.utrecht-image--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 +328,6 @@ class IconComponent {
         mail: 'mail',
         meer: 'dots-vertical',
         menu: 'menu-2',
-        'nederland-map': 'dutch-map-icon',
         nieuws: 'news',
         paperclip: 'paperclip',
         'permanent-beta': 'backhoe',
@@ -323,6 +378,381 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
                 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 value = event.target.value;
+        this.value = value;
+        this.onChange(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    [value]=\"value\"\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    [value]=\"value\"\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]',
+                }]
+        }] });
+
 /*
  * Public API Surface of components-angular
  */
@@ -331,5 +761,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, DeFlagComponent, DutchMapIconComponent, EndItemDirective, EsFlagComponent, FigureCaptionComponent, FigureComponent, FormFieldComponent, FormFieldDescriptionComponent, FormFieldErrorMessageComponent, FormFieldTextInputComponent, FormLabelComponent, FrFlagComponent, GrFlagComponent, HeadingComponent, HeadingItemDirective, HuFlagComponent, IconComponent, ImageComponent, ItFlagComponent, LinkComponent, LinkListComponent, LinkListItemComponent, LinkListLinkComponent, LogoComponent, LvFlagComponent, NavbarComponent, NavbarItemComponent, NlFlagComponent, ParagraphComponent, PlFlagComponent, PtFlagComponent, RoFlagComponent, SkFlagComponent, TextInputComponent, UkFlagComponent, UnorderedListComponent, UnorderedListItemComponent, appearanceOptions, headingLevels };
 //# sourceMappingURL=rijkshuisstijl-community-components-angular.mjs.map