@haiilo/catalyst-angular 3.0.2 → 4.1.0

package/fesm2020/haiilo-catalyst-angular.mjs

@@ -1,90 +1,43 @@
-import * as i1$1 from '@angular/cdk/dialog';
-import { DialogModule } from '@angular/cdk/dialog';
-import * as i0 from '@angular/core';
-import { Directive, HostListener, Component, ChangeDetectionStrategy, EventEmitter, ViewEncapsulation, Inject, Input, Output, ContentChild, InjectionToken, NgModule, Injectable } from '@angular/core';
 import * as i3 from '@haiilo/catalyst';
 import { catI18nRegistry, catIconRegistry, catNotificationService } from '@haiilo/catalyst';
 export { catI18nRegistry, catIconRegistry, catNotificationService } from '@haiilo/catalyst';
+import * as i1$1 from '@angular/cdk/dialog';
+import { DialogModule } from '@angular/cdk/dialog';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, Inject, Output, ContentChild, Directive, HostListener, Self, Optional, InjectionToken, NgModule, Injectable } from '@angular/core';
 import { defineCustomElements } from '@haiilo/catalyst/loader';
 import log from 'loglevel';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { __decorate } from 'tslib';
 import { fromEvent } from 'rxjs';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import * as i1$2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-class ValueAccessor {
-    constructor(el) {
-        this.el = el;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-    }
-    writeValue(value) {
-        this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
-    }
-    handleChangeEvent(value) {
-        if (value !== this.lastValue) {
-            this.lastValue = value;
-            this.onChange(value);
-        }
-    }
-    _handleBlurEvent() {
-        this.onTouched();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.el.nativeElement.disabled = isDisabled;
+/**
+ * The bottom actions of a dialog.
+ */
+class CatDialogActionsComponent {
+    constructor() {
+        /**
+         * Horizontal alignment of action buttons.
+         */
+        this.align = 'end';
     }
 }
-ValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ValueAccessor, host: { listeners: { "focusout": "_handleBlurEvent()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValueAccessor, decorators: [{
-            type: Directive,
-            args: [{}]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _handleBlurEvent: [{
-                type: HostListener,
-                args: ['focusout']
+CatDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CatDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatDialogActionsComponent, selector: "cat-dialog-actions", inputs: { align: "align" }, host: { properties: { "class.cat-dialog-actions-center": "align === \"center\"", "class.cat-dialog-actions-end": "align === \"end\"" }, classAttribute: "cat-dialog-actions" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".cat-dialog-actions-center{justify-content:center}.cat-dialog-actions-end{flex-direction:row-reverse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cat-dialog-actions', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'cat-dialog-actions',
+                        '[class.cat-dialog-actions-center]': 'align === "center"',
+                        '[class.cat-dialog-actions-end]': 'align === "end"'
+                    }, styles: [".cat-dialog-actions-center{justify-content:center}.cat-dialog-actions-end{flex-direction:row-reverse}\n"] }]
+        }], propDecorators: { align: [{
+                type: Input
             }] } });
 
-class BooleanValueAccessor extends ValueAccessor {
-    constructor(el) {
-        super(el);
-    }
-    writeValue(value) {
-        this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
-    }
-}
-BooleanValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BooleanValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BooleanValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: BooleanValueAccessor, selector: "cat-checkbox, cat-toggle", host: { listeners: { "catChange": "handleChangeEvent($event.target.value)" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: BooleanValueAccessor,
-            multi: true
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BooleanValueAccessor, decorators: [{
-            type: Directive,
-            args: [{
-                    /* tslint:disable-next-line:directive-selector */
-                    selector: 'cat-checkbox, cat-toggle',
-                    host: {
-                        '(catChange)': 'handleChangeEvent($event.target.value)'
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: BooleanValueAccessor,
-                            multi: true
-                        }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
 /* eslint-disable */
 const proxyInputs = (Cmp, inputs) => {
     const Prototype = Cmp.prototype;
@@ -217,11 +170,11 @@ let CatButton = class CatButton {
     }
 };
 CatButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CatButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatButton, selector: "cat-button", inputs: { a11yCurrent: "a11yCurrent", a11yLabel: "a11yLabel", active: "active", buttonId: "buttonId", color: "color", disabled: "disabled", icon: "icon", iconOnly: "iconOnly", iconRight: "iconRight", iconSrc: "iconSrc", loading: "loading", name: "name", noEllipsis: "noEllipsis", round: "round", size: "size", submit: "submit", url: "url", urlTarget: "urlTarget", value: "value", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CatButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatButton, selector: "cat-button", inputs: { a11yCurrent: "a11yCurrent", a11yLabel: "a11yLabel", active: "active", buttonId: "buttonId", color: "color", disabled: "disabled", icon: "icon", iconOnly: "iconOnly", iconRight: "iconRight", iconSrc: "iconSrc", loading: "loading", name: "name", nativeAttributes: "nativeAttributes", noEllipsis: "noEllipsis", round: "round", size: "size", submit: "submit", url: "url", urlTarget: "urlTarget", value: "value", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 CatButton = __decorate([
     ProxyCmp({
         defineCustomElementFn: undefined,
-        inputs: ['a11yCurrent', 'a11yLabel', 'active', 'buttonId', 'color', 'disabled', 'icon', 'iconOnly', 'iconRight', 'iconSrc', 'loading', 'name', 'noEllipsis', 'round', 'size', 'submit', 'url', 'urlTarget', 'value', 'variant'],
+        inputs: ['a11yCurrent', 'a11yLabel', 'active', 'buttonId', 'color', 'disabled', 'icon', 'iconOnly', 'iconRight', 'iconSrc', 'loading', 'name', 'nativeAttributes', 'noEllipsis', 'round', 'size', 'submit', 'url', 'urlTarget', 'value', 'variant'],
         methods: ['doFocus', 'doBlur', 'doClick']
     })
 ], CatButton);
@@ -231,7 +184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     selector: 'cat-button',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['a11yCurrent', 'a11yLabel', 'active', 'buttonId', 'color', 'disabled', 'icon', 'iconOnly', 'iconRight', 'iconSrc', 'loading', 'name', 'noEllipsis', 'round', 'size', 'submit', 'url', 'urlTarget', 'value', 'variant']
+                    inputs: ['a11yCurrent', 'a11yLabel', 'active', 'buttonId', 'color', 'disabled', 'icon', 'iconOnly', 'iconRight', 'iconSrc', 'loading', 'name', 'nativeAttributes', 'noEllipsis', 'round', 'size', 'submit', 'url', 'urlTarget', 'value', 'variant']
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let CatCard = class CatCard {
@@ -265,11 +218,11 @@ let CatCheckbox = class CatCheckbox {
     }
 };
 CatCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatCheckbox, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CatCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatCheckbox, selector: "cat-checkbox", inputs: { checked: "checked", disabled: "disabled", hint: "hint", identifier: "identifier", indeterminate: "indeterminate", label: "label", labelHidden: "labelHidden", labelLeft: "labelLeft", name: "name", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CatCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatCheckbox, selector: "cat-checkbox", inputs: { checked: "checked", disabled: "disabled", hint: "hint", identifier: "identifier", indeterminate: "indeterminate", label: "label", labelHidden: "labelHidden", labelLeft: "labelLeft", name: "name", nativeAttributes: "nativeAttributes", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 CatCheckbox = __decorate([
     ProxyCmp({
         defineCustomElementFn: undefined,
-        inputs: ['checked', 'disabled', 'hint', 'identifier', 'indeterminate', 'label', 'labelHidden', 'labelLeft', 'name', 'required', 'value'],
+        inputs: ['checked', 'disabled', 'hint', 'identifier', 'indeterminate', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'required', 'value'],
         methods: ['doFocus', 'doBlur', 'doClick']
     })
 ], CatCheckbox);
@@ -279,7 +232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     selector: 'cat-checkbox',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['checked', 'disabled', 'hint', 'identifier', 'indeterminate', 'label', 'labelHidden', 'labelLeft', 'name', 'required', 'value']
+                    inputs: ['checked', 'disabled', 'hint', 'identifier', 'indeterminate', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'required', 'value']
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let CatDropdown = class CatDropdown {
@@ -365,11 +318,11 @@ let CatInput = class CatInput {
     }
 };
 CatInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatInput, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CatInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatInput, selector: "cat-input", inputs: { autoComplete: "autoComplete", clearable: "clearable", disabled: "disabled", hint: "hint", icon: "icon", iconRight: "iconRight", identifier: "identifier", label: "label", labelHidden: "labelHidden", max: "max", maxLength: "maxLength", min: "min", minLength: "minLength", name: "name", placeholder: "placeholder", readonly: "readonly", required: "required", requiredMarker: "requiredMarker", round: "round", textPrefix: "textPrefix", textSuffix: "textSuffix", type: "type", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CatInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatInput, selector: "cat-input", inputs: { autoComplete: "autoComplete", clearable: "clearable", disabled: "disabled", errorUpdate: "errorUpdate", errors: "errors", hint: "hint", icon: "icon", iconRight: "iconRight", identifier: "identifier", label: "label", labelHidden: "labelHidden", max: "max", maxLength: "maxLength", min: "min", minLength: "minLength", name: "name", nativeAttributes: "nativeAttributes", placeholder: "placeholder", readonly: "readonly", required: "required", requiredMarker: "requiredMarker", round: "round", textPrefix: "textPrefix", textSuffix: "textSuffix", type: "type", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 CatInput = __decorate([
     ProxyCmp({
         defineCustomElementFn: undefined,
-        inputs: ['autoComplete', 'clearable', 'disabled', 'hint', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'maxLength', 'min', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'requiredMarker', 'round', 'textPrefix', 'textSuffix', 'type', 'value'],
+        inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'maxLength', 'min', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'round', 'textPrefix', 'textSuffix', 'type', 'value'],
         methods: ['doFocus', 'doBlur', 'doClick', 'clear']
     })
 ], CatInput);
@@ -379,7 +332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     selector: 'cat-input',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['autoComplete', 'clearable', 'disabled', 'hint', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'maxLength', 'min', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'requiredMarker', 'round', 'textPrefix', 'textSuffix', 'type', 'value']
+                    inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'maxLength', 'min', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'round', 'textPrefix', 'textSuffix', 'type', 'value']
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let CatLabel = class CatLabel {
@@ -439,11 +392,11 @@ let CatRadio = class CatRadio {
     }
 };
 CatRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatRadio, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CatRadio.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatRadio, selector: "cat-radio", inputs: { checked: "checked", disabled: "disabled", hint: "hint", identifier: "identifier", label: "label", labelHidden: "labelHidden", labelLeft: "labelLeft", name: "name", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CatRadio.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatRadio, selector: "cat-radio", inputs: { checked: "checked", disabled: "disabled", hint: "hint", identifier: "identifier", label: "label", labelHidden: "labelHidden", labelLeft: "labelLeft", name: "name", nativeAttributes: "nativeAttributes", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 CatRadio = __decorate([
     ProxyCmp({
         defineCustomElementFn: undefined,
-        inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'required', 'value'],
+        inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'required', 'value'],
         methods: ['doFocus', 'doBlur', 'doClick']
     })
 ], CatRadio);
@@ -453,7 +406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     selector: 'cat-radio',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'required', 'value']
+                    inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'required', 'value']
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let CatRadioGroup = class CatRadioGroup {
@@ -515,11 +468,11 @@ let CatSelect = class CatSelect {
     }
 };
 CatSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatSelect, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CatSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatSelect, selector: "cat-select", inputs: { clearable: "clearable", debounce: "debounce", disabled: "disabled", hint: "hint", identifier: "identifier", label: "label", labelHidden: "labelHidden", multiple: "multiple", name: "name", noItems: "noItems", placeholder: "placeholder", placement: "placement", required: "required", requiredMarker: "requiredMarker", tagHint: "tagHint", tags: "tags", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CatSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatSelect, selector: "cat-select", inputs: { clearable: "clearable", debounce: "debounce", disabled: "disabled", errorUpdate: "errorUpdate", errors: "errors", hint: "hint", identifier: "identifier", label: "label", labelHidden: "labelHidden", multiple: "multiple", name: "name", nativeAttributes: "nativeAttributes", noItems: "noItems", placeholder: "placeholder", placement: "placement", required: "required", requiredMarker: "requiredMarker", tagHint: "tagHint", tags: "tags", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 CatSelect = __decorate([
     ProxyCmp({
         defineCustomElementFn: undefined,
-        inputs: ['clearable', 'debounce', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'multiple', 'name', 'noItems', 'placeholder', 'placement', 'required', 'requiredMarker', 'tagHint', 'tags', 'value'],
+        inputs: ['clearable', 'debounce', 'disabled', 'errorUpdate', 'errors', 'hint', 'identifier', 'label', 'labelHidden', 'multiple', 'name', 'nativeAttributes', 'noItems', 'placeholder', 'placement', 'required', 'requiredMarker', 'tagHint', 'tags', 'value'],
         methods: ['connect']
     })
 ], CatSelect);
@@ -529,7 +482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     selector: 'cat-select',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['clearable', 'debounce', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'multiple', 'name', 'noItems', 'placeholder', 'placement', 'required', 'requiredMarker', 'tagHint', 'tags', 'value']
+                    inputs: ['clearable', 'debounce', 'disabled', 'errorUpdate', 'errors', 'hint', 'identifier', 'label', 'labelHidden', 'multiple', 'name', 'nativeAttributes', 'noItems', 'placeholder', 'placement', 'required', 'requiredMarker', 'tagHint', 'tags', 'value']
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let CatSelectDemo = class CatSelectDemo {
@@ -660,11 +613,11 @@ let CatTextarea = class CatTextarea {
     }
 };
 CatTextarea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatTextarea, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CatTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatTextarea, selector: "cat-textarea", inputs: { disabled: "disabled", hint: "hint", identifier: "identifier", label: "label", labelHidden: "labelHidden", maxLength: "maxLength", minLength: "minLength", name: "name", placeholder: "placeholder", readonly: "readonly", required: "required", requiredMarker: "requiredMarker", rows: "rows", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CatTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatTextarea, selector: "cat-textarea", inputs: { disabled: "disabled", errorUpdate: "errorUpdate", errors: "errors", hint: "hint", identifier: "identifier", label: "label", labelHidden: "labelHidden", maxLength: "maxLength", minLength: "minLength", name: "name", nativeAttributes: "nativeAttributes", placeholder: "placeholder", readonly: "readonly", required: "required", requiredMarker: "requiredMarker", rows: "rows", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 CatTextarea = __decorate([
     ProxyCmp({
         defineCustomElementFn: undefined,
-        inputs: ['disabled', 'hint', 'identifier', 'label', 'labelHidden', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'requiredMarker', 'rows', 'value'],
+        inputs: ['disabled', 'errorUpdate', 'errors', 'hint', 'identifier', 'label', 'labelHidden', 'maxLength', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'rows', 'value'],
         methods: ['doFocus', 'doBlur', 'doClick']
     })
 ], CatTextarea);
@@ -674,7 +627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     selector: 'cat-textarea',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['disabled', 'hint', 'identifier', 'label', 'labelHidden', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'requiredMarker', 'rows', 'value']
+                    inputs: ['disabled', 'errorUpdate', 'errors', 'hint', 'identifier', 'label', 'labelHidden', 'maxLength', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'rows', 'value']
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let CatToggle = class CatToggle {
@@ -686,11 +639,11 @@ let CatToggle = class CatToggle {
     }
 };
 CatToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatToggle, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CatToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatToggle, selector: "cat-toggle", inputs: { checked: "checked", disabled: "disabled", hint: "hint", identifier: "identifier", label: "label", labelHidden: "labelHidden", labelLeft: "labelLeft", name: "name", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CatToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatToggle, selector: "cat-toggle", inputs: { checked: "checked", disabled: "disabled", hint: "hint", identifier: "identifier", label: "label", labelHidden: "labelHidden", labelLeft: "labelLeft", name: "name", nativeAttributes: "nativeAttributes", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 CatToggle = __decorate([
     ProxyCmp({
         defineCustomElementFn: undefined,
-        inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'required', 'value'],
+        inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'required', 'value'],
         methods: ['doFocus', 'doBlur', 'doClick']
     })
 ], CatToggle);
@@ -700,7 +653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     selector: 'cat-toggle',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'required', 'value']
+                    inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'required', 'value']
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let CatTooltip = class CatTooltip {
@@ -728,6 +681,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
+/**
+ * The header of a dialog.
+ */
+class CatDialogHeaderComponent {
+    constructor(i18n) {
+        this.i18n = i18n;
+        this.closeTxt = this.i18n.t('dialog.close');
+        this.closeSvg = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.53 6.47a.75.75 0 0 0-1.06 1.06L10.94 12l-4.47 4.47a.75.75 0 1 0 1.06 1.06L12 13.06l4.47 4.47a.75.75 0 1 0 1.06-1.06L13.06 12l4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.94 7.53 6.47Z"/></svg>';
+        /**
+         * Whether the dialog can be closed via a close button.
+         */
+        this.closable = true;
+        /**
+         * Emits when the close button is clicked.
+         */
+        this.close = new EventEmitter();
+    }
+}
+CatDialogHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogHeaderComponent, deps: [{ token: CAT_I18N_REGISTRY_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+CatDialogHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatDialogHeaderComponent, selector: "cat-dialog-header", inputs: { headline: "headline", subline: "subline", closable: "closable" }, outputs: { close: "close" }, host: { classAttribute: "cat-dialog-header" }, ngImport: i0, template: "<div class=\"cat-dialog-header-content\" *ngIf=\"headline || subline\">\n  <h3 class=\"cat-h5 cat-m-0\" *ngIf=\"headline\">{{ headline }}</h3>\n  <h4 class=\"cat-h6 cat-m-0\" *ngIf=\"subline\">{{ subline }}</h4>\n</div>\n<ng-content></ng-content>\n<cat-button\n  *ngIf=\"closable\"\n  class=\"cat-dialog-close cat-button-pull\"\n  variant=\"text\"\n  size=\"s\"\n  [iconSrc]=\"closeSvg\"\n  [iconOnly]=\"true\"\n  [a11yLabel]=\"closeTxt\"\n  (click)=\"close.emit()\"\n></cat-button>\n", styles: [".cat-dialog-close{margin-left:auto;align-self:start}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CatButton, selector: "cat-button", inputs: ["a11yCurrent", "a11yLabel", "active", "buttonId", "color", "disabled", "icon", "iconOnly", "iconRight", "iconSrc", "loading", "name", "nativeAttributes", "noEllipsis", "round", "size", "submit", "url", "urlTarget", "value", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cat-dialog-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'cat-dialog-header'
+                    }, template: "<div class=\"cat-dialog-header-content\" *ngIf=\"headline || subline\">\n  <h3 class=\"cat-h5 cat-m-0\" *ngIf=\"headline\">{{ headline }}</h3>\n  <h4 class=\"cat-h6 cat-m-0\" *ngIf=\"subline\">{{ subline }}</h4>\n</div>\n<ng-content></ng-content>\n<cat-button\n  *ngIf=\"closable\"\n  class=\"cat-dialog-close cat-button-pull\"\n  variant=\"text\"\n  size=\"s\"\n  [iconSrc]=\"closeSvg\"\n  [iconOnly]=\"true\"\n  [a11yLabel]=\"closeTxt\"\n  (click)=\"close.emit()\"\n></cat-button>\n", styles: [".cat-dialog-close{margin-left:auto;align-self:start}\n"] }]
+        }], ctorParameters: function () { return [{ type: i3.CatI18nRegistry, decorators: [{
+                    type: Inject,
+                    args: [CAT_I18N_REGISTRY_TOKEN]
+                }] }]; }, propDecorators: { headline: [{
+                type: Input
+            }], subline: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });
+
+/**
+ * A modal dialog.
+ */
+class CatDialogComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+    }
+    ngAfterContentInit() {
+        this.header?.close.subscribe(() => this.dialogRef.close());
+    }
+}
+CatDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+CatDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatDialogComponent, selector: "cat-dialog", host: { classAttribute: "cat-dialog-inner" }, queries: [{ propertyName: "header", first: true, predicate: CatDialogHeaderComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"cat-dialog-header\"></ng-content>\n  <cat-scrollable>\n    <div class=\"cat-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n  </cat-scrollable>\n<ng-content select=\"cat-dialog-actions\"></ng-content>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane{transition:transform .25s ease,opacity .25s ease;transform:translateY(24px);opacity:0}.cdk-overlay-backdrop-showing+.cdk-global-overlay-wrapper .cdk-overlay-pane{transform:translateY(0);opacity:1}.cat-backdrop.cdk-overlay-backdrop{transition-duration:.5s}.cdk-dialog-container>*:only-child{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}.cat-dialog-inner{display:flex;flex-direction:column;width:100%;height:100%;min-height:inherit;max-height:inherit}\n"], dependencies: [{ kind: "component", type: CatScrollable, selector: "cat-scrollable", inputs: ["noOverflowX", "noOverflowY", "noOverscroll", "noScrolledInit", "noShadowX", "noShadowY", "scrolledBuffer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cat-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'cat-dialog-inner',
+                    }, template: "<ng-content select=\"cat-dialog-header\"></ng-content>\n  <cat-scrollable>\n    <div class=\"cat-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n  </cat-scrollable>\n<ng-content select=\"cat-dialog-actions\"></ng-content>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane{transition:transform .25s ease,opacity .25s ease;transform:translateY(24px);opacity:0}.cdk-overlay-backdrop-showing+.cdk-global-overlay-wrapper .cdk-overlay-pane{transform:translateY(0);opacity:1}.cat-backdrop.cdk-overlay-backdrop{transition-duration:.5s}.cdk-dialog-container>*:only-child{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}.cat-dialog-inner{display:flex;flex-direction:column;width:100%;height:100%;min-height:inherit;max-height:inherit}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; }, propDecorators: { header: [{
+                type: ContentChild,
+                args: [CatDialogHeaderComponent]
+            }] } });
+
+class ValueAccessor {
+    constructor(el) {
+        this.el = el;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+    }
+    handleChangeEvent(value) {
+        if (value !== this.lastValue) {
+            this.lastValue = value;
+            this.onChange(value);
+        }
+    }
+    _handleBlurEvent() {
+        this.onTouched();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.nativeElement.disabled = isDisabled;
+    }
+}
+ValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ValueAccessor, host: { listeners: { "focusout": "_handleBlurEvent()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValueAccessor, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _handleBlurEvent: [{
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+class BooleanValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+    writeValue(value) {
+        this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+    }
+}
+BooleanValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BooleanValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BooleanValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: BooleanValueAccessor, selector: "cat-checkbox, cat-toggle", host: { listeners: { "catChange": "handleChangeEvent($event.target.value)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: BooleanValueAccessor,
+            multi: true
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BooleanValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'cat-checkbox, cat-toggle',
+                    host: {
+                        '(catChange)': 'handleChangeEvent($event.target.value)'
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: BooleanValueAccessor,
+                            multi: true
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
 class RadioValueAccessor extends ValueAccessor {
     constructor(el) {
         super(el);
@@ -821,90 +907,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-/**
- * The header of a dialog.
- */
-class CatDialogHeaderComponent {
-    constructor(i18n) {
-        this.i18n = i18n;
-        this.closeTxt = this.i18n.t('dialog.close');
-        this.closeSvg = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.53 6.47a.75.75 0 0 0-1.06 1.06L10.94 12l-4.47 4.47a.75.75 0 1 0 1.06 1.06L12 13.06l4.47 4.47a.75.75 0 1 0 1.06-1.06L13.06 12l4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.94 7.53 6.47Z"/></svg>';
-        /**
-         * Whether the dialog can be closed via a close button.
-         */
-        this.closable = true;
-        /**
-         * Emits when the close button is clicked.
-         */
-        this.close = new EventEmitter();
-    }
-}
-CatDialogHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogHeaderComponent, deps: [{ token: CAT_I18N_REGISTRY_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-CatDialogHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatDialogHeaderComponent, selector: "cat-dialog-header", inputs: { headline: "headline", subline: "subline", closable: "closable" }, outputs: { close: "close" }, host: { classAttribute: "cat-dialog-header" }, ngImport: i0, template: "<div class=\"cat-dialog-header-content\" *ngIf=\"headline || subline\">\n  <h3 class=\"cat-h5 cat-m-0\" *ngIf=\"headline\">{{ headline }}</h3>\n  <h4 class=\"cat-h6 cat-m-0\" *ngIf=\"subline\">{{ subline }}</h4>\n</div>\n<ng-content></ng-content>\n<cat-button\n  *ngIf=\"closable\"\n  class=\"cat-dialog-close cat-button-pull\"\n  variant=\"text\"\n  size=\"s\"\n  [iconSrc]=\"closeSvg\"\n  [iconOnly]=\"true\"\n  [a11yLabel]=\"closeTxt\"\n  (click)=\"close.emit()\"\n></cat-button>\n", styles: [".cat-dialog-close{margin-left:auto;align-self:start}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CatButton, selector: "cat-button", inputs: ["a11yCurrent", "a11yLabel", "active", "buttonId", "color", "disabled", "icon", "iconOnly", "iconRight", "iconSrc", "loading", "name", "noEllipsis", "round", "size", "submit", "url", "urlTarget", "value", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cat-dialog-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'cat-dialog-header'
-                    }, template: "<div class=\"cat-dialog-header-content\" *ngIf=\"headline || subline\">\n  <h3 class=\"cat-h5 cat-m-0\" *ngIf=\"headline\">{{ headline }}</h3>\n  <h4 class=\"cat-h6 cat-m-0\" *ngIf=\"subline\">{{ subline }}</h4>\n</div>\n<ng-content></ng-content>\n<cat-button\n  *ngIf=\"closable\"\n  class=\"cat-dialog-close cat-button-pull\"\n  variant=\"text\"\n  size=\"s\"\n  [iconSrc]=\"closeSvg\"\n  [iconOnly]=\"true\"\n  [a11yLabel]=\"closeTxt\"\n  (click)=\"close.emit()\"\n></cat-button>\n", styles: [".cat-dialog-close{margin-left:auto;align-self:start}\n"] }]
-        }], ctorParameters: function () { return [{ type: i3.CatI18nRegistry, decorators: [{
-                    type: Inject,
-                    args: [CAT_I18N_REGISTRY_TOKEN]
-                }] }]; }, propDecorators: { headline: [{
-                type: Input
-            }], subline: [{
-                type: Input
-            }], closable: [{
-                type: Input
-            }], close: [{
-                type: Output
-            }] } });
-
-/**
- * A modal dialog.
- */
-class CatDialogComponent {
-    constructor(dialogRef) {
-        this.dialogRef = dialogRef;
+class ValueAccessorDecorator {
+    constructor(el, controlDirective) {
+        this.el = el;
+        this.controlDirective = controlDirective;
     }
-    ngAfterContentInit() {
-        this.header?.close.subscribe(() => this.dialogRef.close());
+    ngAfterViewInit() {
+        this.updateErrors();
+        this.controlDirective?.statusChanges?.subscribe(() => this.updateErrors());
     }
-}
-CatDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-CatDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatDialogComponent, selector: "cat-dialog", host: { classAttribute: "cat-dialog-inner" }, queries: [{ propertyName: "header", first: true, predicate: CatDialogHeaderComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"cat-dialog-header\"></ng-content>\n  <cat-scrollable>\n    <div class=\"cat-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n  </cat-scrollable>\n<ng-content select=\"cat-dialog-actions\"></ng-content>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane{transition:transform .25s ease,opacity .25s ease;transform:translateY(24px);opacity:0}.cdk-overlay-backdrop-showing+.cdk-global-overlay-wrapper .cdk-overlay-pane{transform:translateY(0);opacity:1}.cat-backdrop.cdk-overlay-backdrop{transition-duration:.5s}.cdk-dialog-container>*:only-child{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}.cat-dialog-inner{display:flex;flex-direction:column;width:100%;height:100%;min-height:inherit;max-height:inherit}\n"], dependencies: [{ kind: "component", type: CatScrollable, selector: "cat-scrollable", inputs: ["noOverflowX", "noOverflowY", "noOverscroll", "noScrolledInit", "noShadowX", "noShadowY", "scrolledBuffer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cat-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'cat-dialog-inner',
-                    }, template: "<ng-content select=\"cat-dialog-header\"></ng-content>\n  <cat-scrollable>\n    <div class=\"cat-dialog-content\">\n      <ng-content></ng-content>\n    </div>\n  </cat-scrollable>\n<ng-content select=\"cat-dialog-actions\"></ng-content>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-pane{transition:transform .25s ease,opacity .25s ease;transform:translateY(24px);opacity:0}.cdk-overlay-backdrop-showing+.cdk-global-overlay-wrapper .cdk-overlay-pane{transform:translateY(0);opacity:1}.cat-backdrop.cdk-overlay-backdrop{transition-duration:.5s}.cdk-dialog-container>*:only-child{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}.cat-dialog-inner{display:flex;flex-direction:column;width:100%;height:100%;min-height:inherit;max-height:inherit}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; }, propDecorators: { header: [{
-                type: ContentChild,
-                args: [CatDialogHeaderComponent]
-            }] } });
-
-/**
- * The bottom actions of a dialog.
- */
-class CatDialogActionsComponent {
-    constructor() {
-        /**
-         * Horizontal alignment of action buttons.
-         */
-        this.align = 'end';
+    updateErrors() {
+        this.el.nativeElement.errors = this.controlDirective?.errors || !!this.controlDirective?.invalid;
     }
 }
-CatDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CatDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CatDialogActionsComponent, selector: "cat-dialog-actions", inputs: { align: "align" }, host: { properties: { "class.cat-dialog-actions-center": "align === \"center\"", "class.cat-dialog-actions-end": "align === \"end\"" }, classAttribute: "cat-dialog-actions" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".cat-dialog-actions-center{justify-content:center}.cat-dialog-actions-end{flex-direction:row-reverse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatDialogActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cat-dialog-actions', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'cat-dialog-actions',
-                        '[class.cat-dialog-actions-center]': 'align === "center"',
-                        '[class.cat-dialog-actions-end]': 'align === "end"'
-                    }, styles: [".cat-dialog-actions-center{justify-content:center}.cat-dialog-actions-end{flex-direction:row-reverse}\n"] }]
-        }], propDecorators: { align: [{
-                type: Input
-            }] } });
+ValueAccessorDecorator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValueAccessorDecorator, deps: [{ token: i0.ElementRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+ValueAccessorDecorator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ValueAccessorDecorator, selector: "cat-input, cat-textarea, cat-select", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValueAccessorDecorator, decorators: [{
+            type: Directive,
+            args: [{
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'cat-input, cat-textarea, cat-select'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }]; } });
 
 const CatComponents = [
     CatAlert,
@@ -934,23 +962,24 @@ const CatDirectives = [
     TextValueAccessor,
     SelectValueAccessor,
     RadioValueAccessor,
-    BooleanValueAccessor
+    BooleanValueAccessor,
+    ValueAccessorDecorator
 ];
 const CAT_LOG_TOKEN = new InjectionToken('CAT_LOG', {
     providedIn: 'root',
-    factory: () => log,
+    factory: () => log
 });
 const CAT_I18N_REGISTRY_TOKEN = new InjectionToken('CAT_I18N_REGISTRY', {
     providedIn: 'root',
-    factory: () => catI18nRegistry,
+    factory: () => catI18nRegistry
 });
 const CAT_ICON_REGISTRY_TOKEN = new InjectionToken('CAT_ICON_REGISTRY', {
     providedIn: 'root',
-    factory: () => catIconRegistry,
+    factory: () => catIconRegistry
 });
 const CAT_NOTIFICATION_SERVICE_TOKEN = new InjectionToken('CAT_NOTIFICATION_SERVICE', {
     providedIn: 'root',
-    factory: () => catNotificationService,
+    factory: () => catNotificationService
 });
 class CatalystModule {
     static forRoot() {
@@ -964,17 +993,35 @@ CatalystModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 CatalystModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CatalystModule, declarations: [CatAlert, CatAvatar, CatBadge, CatButton, CatCard, CatCheckbox, CatDropdown, CatFormGroup, CatIcon, CatInput, CatLabel, CatRadio, CatRadioGroup, CatScrollable, CatSelect, CatSkeleton, CatSpinner, CatTab, CatTabs, CatTextarea, CatToggle, CatTooltip, TextValueAccessor,
         SelectValueAccessor,
         RadioValueAccessor,
-        BooleanValueAccessor, CatDialogComponent, CatDialogActionsComponent, CatDialogHeaderComponent], imports: [CommonModule, DialogModule], exports: [CatAlert, CatAvatar, CatBadge, CatButton, CatCard, CatCheckbox, CatDropdown, CatFormGroup, CatIcon, CatInput, CatLabel, CatRadio, CatRadioGroup, CatScrollable, CatSelect, CatSkeleton, CatSpinner, CatTab, CatTabs, CatTextarea, CatToggle, CatTooltip, TextValueAccessor,
+        BooleanValueAccessor,
+        ValueAccessorDecorator, CatDialogComponent,
+        CatDialogActionsComponent,
+        CatDialogHeaderComponent], imports: [CommonModule, DialogModule], exports: [CatAlert, CatAvatar, CatBadge, CatButton, CatCard, CatCheckbox, CatDropdown, CatFormGroup, CatIcon, CatInput, CatLabel, CatRadio, CatRadioGroup, CatScrollable, CatSelect, CatSkeleton, CatSpinner, CatTab, CatTabs, CatTextarea, CatToggle, CatTooltip, TextValueAccessor,
         SelectValueAccessor,
         RadioValueAccessor,
-        BooleanValueAccessor, CatDialogComponent, CatDialogActionsComponent, CatDialogHeaderComponent] });
+        BooleanValueAccessor,
+        ValueAccessorDecorator, CatDialogComponent,
+        CatDialogActionsComponent,
+        CatDialogHeaderComponent] });
 CatalystModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatalystModule, imports: [CommonModule, DialogModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CatalystModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, DialogModule],
-                    declarations: [...CatComponents, ...CatDirectives, CatDialogComponent, CatDialogActionsComponent, CatDialogHeaderComponent],
-                    exports: [...CatComponents, ...CatDirectives, CatDialogComponent, CatDialogActionsComponent, CatDialogHeaderComponent],
+                    declarations: [
+                        ...CatComponents,
+                        ...CatDirectives,
+                        CatDialogComponent,
+                        CatDialogActionsComponent,
+                        CatDialogHeaderComponent
+                    ],
+                    exports: [
+                        ...CatComponents,
+                        ...CatDirectives,
+                        CatDialogComponent,
+                        CatDialogActionsComponent,
+                        CatDialogHeaderComponent
+                    ],
                     providers: []
                 }]
         }] });
@@ -1025,5 +1072,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BooleanValueAccessor, CAT_I18N_REGISTRY_TOKEN, CAT_ICON_REGISTRY_TOKEN, CAT_LOG_TOKEN, CAT_NOTIFICATION_SERVICE_TOKEN, CatAlert, CatAvatar, CatBadge, CatButton, CatCard, CatCheckbox, CatDialogActionsComponent, CatDialogComponent, CatDialogHeaderComponent, CatDialogService, CatDropdown, CatFormGroup, CatIcon, CatInput, CatLabel, CatPagination, CatRadio, CatRadioGroup, CatScrollable, CatSelect, CatSelectDemo, CatSkeleton, CatSpinner, CatTab, CatTabs, CatTextarea, CatToggle, CatTooltip, CatalystModule, RadioValueAccessor, SelectValueAccessor, TextValueAccessor, ValueAccessor };
+export { BooleanValueAccessor, CAT_I18N_REGISTRY_TOKEN, CAT_ICON_REGISTRY_TOKEN, CAT_LOG_TOKEN, CAT_NOTIFICATION_SERVICE_TOKEN, CatAlert, CatAvatar, CatBadge, CatButton, CatCard, CatCheckbox, CatDialogActionsComponent, CatDialogComponent, CatDialogHeaderComponent, CatDialogService, CatDropdown, CatFormGroup, CatIcon, CatInput, CatLabel, CatPagination, CatRadio, CatRadioGroup, CatScrollable, CatSelect, CatSelectDemo, CatSkeleton, CatSpinner, CatTab, CatTabs, CatTextarea, CatToggle, CatTooltip, CatalystModule, RadioValueAccessor, SelectValueAccessor, TextValueAccessor, ValueAccessor, ValueAccessorDecorator };
 //# sourceMappingURL=haiilo-catalyst-angular.mjs.map