@siemens/ix-angular 2.4.1 → 2.6.0

package/fesm2020/siemens-ix-angular.mjs

@@ -1,85 +1,13 @@
 import { closeModal, dismissModal, showModal, themeSwitcher, getToastContainer, toast } from '@siemens/ix';
 export * from '@siemens/ix';
-import * as i0 from '@angular/core';
-import { Directive, HostListener, Component, ChangeDetectionStrategy, Input, Type, Injector, ElementRef, Injectable, EventEmitter, Output, APP_INITIALIZER, NgZone, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Directive, Input, Type, Injector, ElementRef, Injectable, HostListener, EventEmitter, Output, APP_INITIALIZER, NgZone, NgModule } from '@angular/core';
 import { fromEvent } from 'rxjs';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DOCUMENT } from '@angular/common';
-import { defineCustomElements as defineCustomElements$1 } from '@siemens/ix-icons/loader';
-import { defineCustomElements } from '@siemens/ix/loader';
-
-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;
-    }
-}
-/** @nocollapse */ ValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ ValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: ValueAccessor, host: { listeners: { "focusout": "_handleBlurEvent()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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;
-    }
-}
-/** @nocollapse */ BooleanValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BooleanValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ BooleanValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: BooleanValueAccessor, selector: "ix-toggle[ngModel],ix-toggle[formControlName],ix-toggle[formControl]", host: { listeners: { "checkedChange": "handleChangeEvent($event.target.checked)" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: BooleanValueAccessor,
-            multi: true
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BooleanValueAccessor, decorators: [{
-            type: Directive,
-            args: [{
-                    /* tslint:disable-next-line:directive-selector */
-                    selector: 'ix-toggle[ngModel],ix-toggle[formControlName],ix-toggle[formControl]',
-                    host: {
-                        '(checkedChange)': 'handleChangeEvent($event.target.checked)'
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: BooleanValueAccessor,
-                            multi: true
-                        }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+import { defineCustomElements } from '@siemens/ix-icons/loader';
+import { defineCustomElements as defineCustomElements$1 } from '@siemens/ix/loader';
 
 /* eslint-disable */
 const proxyInputs = (Cmp, inputs) => {
@@ -191,13 +119,14 @@ let IxApplicationHeader = class IxApplicationHeader {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['menuToggle']);
     }
 };
 /** @nocollapse */ IxApplicationHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxApplicationHeader, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxApplicationHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxApplicationHeader, selector: "ix-application-header", inputs: { name: "name" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxApplicationHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxApplicationHeader, selector: "ix-application-header", inputs: { name: "name", showMenu: "showMenu" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxApplicationHeader = __decorate([
     ProxyCmp({
-        inputs: ['name']
+        inputs: ['name', 'showMenu']
     })
 ], IxApplicationHeader);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxApplicationHeader, decorators: [{
@@ -207,7 +136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['name'],
+                    inputs: ['name', 'showMenu'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxAvatar = class IxAvatar {
@@ -478,7 +407,7 @@ let IxCategoryFilter = class IxCategoryFilter {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['categoryChanged', 'inputChanged', 'filterChanged']);
+        proxyOutputs(this, this.el, ['categoryChanged', 'inputChanged', 'filterChanged', 'filterCleared']);
     }
 };
 /** @nocollapse */ IxCategoryFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxCategoryFilter, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
@@ -498,6 +427,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     inputs: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'staticOperator', 'suggestions'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxCheckbox = class IxCheckbox {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['checkedChange', 'valueChange']);
+    }
+};
+/** @nocollapse */ IxCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxCheckbox, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxCheckbox, selector: "ix-checkbox", inputs: { checked: "checked", disabled: "disabled", indeterminate: "indeterminate", label: "label", name: "name", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxCheckbox = __decorate([
+    ProxyCmp({
+        inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value']
+    })
+], IxCheckbox);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxCheckbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-checkbox',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['checked', 'disabled', 'indeterminate', 'label', 'name', 'required', 'value'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxCheckboxGroup = class IxCheckboxGroup {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxCheckboxGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxCheckboxGroup, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxCheckboxGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxCheckboxGroup, selector: "ix-checkbox-group", inputs: { direction: "direction", helperText: "helperText", infoText: "infoText", invalidText: "invalidText", label: "label", showTextAsTooltip: "showTextAsTooltip", validText: "validText", warningText: "warningText" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxCheckboxGroup = __decorate([
+    ProxyCmp({
+        inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'warningText']
+    })
+], IxCheckboxGroup);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxCheckboxGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-checkbox-group',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'warningText'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxChip = class IxChip {
     constructor(c, r, z) {
         this.z = z;
@@ -594,6 +572,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxCustomField = class IxCustomField {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxCustomField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxCustomField, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxCustomField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxCustomField, selector: "ix-custom-field", inputs: { helperText: "helperText", infoText: "infoText", invalidText: "invalidText", label: "label", required: "required", showTextAsTooltip: "showTextAsTooltip", validText: "validText", warningText: "warningText" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxCustomField = __decorate([
+    ProxyCmp({
+        inputs: ['helperText', 'infoText', 'invalidText', 'label', 'required', 'showTextAsTooltip', 'validText', 'warningText']
+    })
+], IxCustomField);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxCustomField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-custom-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['helperText', 'infoText', 'invalidText', 'label', 'required', 'showTextAsTooltip', 'validText', 'warningText'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxDateDropdown = class IxDateDropdown {
     constructor(c, r, z) {
         this.z = z;
@@ -603,10 +605,10 @@ let IxDateDropdown = class IxDateDropdown {
     }
 };
 /** @nocollapse */ IxDateDropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxDateDropdown, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxDateDropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxDateDropdown, selector: "ix-date-dropdown", inputs: { customRangeAllowed: "customRangeAllowed", dateRangeId: "dateRangeId", dateRangeOptions: "dateRangeOptions", disabled: "disabled", format: "format", from: "from", i18nCustomItem: "i18nCustomItem", i18nDone: "i18nDone", i18nNoRange: "i18nNoRange", maxDate: "maxDate", minDate: "minDate", range: "range", to: "to" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxDateDropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxDateDropdown, selector: "ix-date-dropdown", inputs: { customRangeAllowed: "customRangeAllowed", dateRangeId: "dateRangeId", dateRangeOptions: "dateRangeOptions", disabled: "disabled", format: "format", from: "from", i18nCustomItem: "i18nCustomItem", i18nDone: "i18nDone", i18nNoRange: "i18nNoRange", locale: "locale", maxDate: "maxDate", minDate: "minDate", range: "range", to: "to", weekStartIndex: "weekStartIndex" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxDateDropdown = __decorate([
     ProxyCmp({
-        inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'],
+        inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'locale', 'maxDate', 'minDate', 'range', 'to', 'weekStartIndex'],
         methods: ['getDateRange']
     })
 ], IxDateDropdown);
@@ -617,7 +619,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'],
+                    inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'locale', 'maxDate', 'minDate', 'range', 'to', 'weekStartIndex'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxDateInput = class IxDateInput {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['valueChange', 'validityStateChange']);
+    }
+};
+/** @nocollapse */ IxDateInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxDateInput, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxDateInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxDateInput, selector: "ix-date-input", inputs: { disabled: "disabled", format: "format", helperText: "helperText", i18nErrorDateUnparsable: "i18nErrorDateUnparsable", infoText: "infoText", invalidText: "invalidText", label: "label", locale: "locale", name: "name", placeholder: "placeholder", readonly: "readonly", required: "required", showTextAsTooltip: "showTextAsTooltip", validText: "validText", value: "value", warningText: "warningText" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxDateInput = __decorate([
+    ProxyCmp({
+        inputs: ['disabled', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'validText', 'value', 'warningText'],
+        methods: ['getNativeInputElement', 'focusInput']
+    })
+], IxDateInput);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxDateInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-date-input',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['disabled', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'validText', 'value', 'warningText'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxDatePicker = class IxDatePicker {
@@ -939,6 +967,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     inputs: ['fullWidth', 'icon', 'placeholder', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxFieldLabel = class IxFieldLabel {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxFieldLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxFieldLabel, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxFieldLabel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxFieldLabel, selector: "ix-field-label", inputs: { htmlFor: "htmlFor", required: "required" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxFieldLabel = __decorate([
+    ProxyCmp({
+        inputs: ['htmlFor', 'required']
+    })
+], IxFieldLabel);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxFieldLabel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-field-label',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['htmlFor', 'required'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxFilterChip = class IxFilterChip {
     constructor(c, r, z) {
         this.z = z;
@@ -1010,30 +1062,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     inputs: [],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let IxFormField = class IxFormField {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-/** @nocollapse */ IxFormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxFormField, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxFormField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxFormField, selector: "ix-form-field", inputs: { label: "label" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxFormField = __decorate([
-    ProxyCmp({
-        inputs: ['label']
-    })
-], IxFormField);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxFormField, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ix-form-field',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['label'],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxGroup = class IxGroup {
     constructor(c, r, z) {
         this.z = z;
@@ -1106,6 +1134,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     inputs: ['focusable', 'icon', 'index', 'secondaryText', 'selected', 'suppressSelection', 'text'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxHelperText = class IxHelperText {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxHelperText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxHelperText, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxHelperText.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxHelperText, selector: "ix-helper-text", inputs: { helperText: "helperText", htmlFor: "htmlFor", infoText: "infoText", invalidText: "invalidText", validText: "validText", warningText: "warningText" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxHelperText = __decorate([
+    ProxyCmp({
+        inputs: ['helperText', 'htmlFor', 'infoText', 'invalidText', 'validText', 'warningText']
+    })
+], IxHelperText);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxHelperText, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-helper-text',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['helperText', 'htmlFor', 'infoText', 'invalidText', 'validText', 'warningText'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxIconButton = class IxIconButton {
     constructor(c, r, z) {
         this.z = z;
@@ -1155,6 +1207,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     inputs: ['disabled', 'ghost', 'icon', 'loading', 'outline', 'pressed', 'size', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxInput = class IxInput {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['valueChange', 'validityStateChange', 'ixBlur']);
+    }
+};
+/** @nocollapse */ IxInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxInput, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxInput, selector: "ix-input", inputs: { allowedCharactersPattern: "allowedCharactersPattern", disabled: "disabled", helperText: "helperText", infoText: "infoText", invalidText: "invalidText", label: "label", maxLength: "maxLength", minLength: "minLength", name: "name", pattern: "pattern", placeholder: "placeholder", readonly: "readonly", required: "required", showTextAsTooltip: "showTextAsTooltip", type: "type", validText: "validText", value: "value", warningText: "warningText" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxInput = __decorate([
+    ProxyCmp({
+        inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'type', 'validText', 'value', 'warningText'],
+        methods: ['getNativeInputElement', 'focusInput']
+    })
+], IxInput);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-input',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'type', 'validText', 'value', 'warningText'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxInputGroup = class IxInputGroup {
     constructor(c, r, z) {
         this.z = z;
@@ -1249,6 +1327,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     inputs: ['label', 'orientation', 'state', 'unit', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxLayoutAuto = class IxLayoutAuto {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+/** @nocollapse */ IxLayoutAuto.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxLayoutAuto, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxLayoutAuto.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxLayoutAuto, selector: "ix-layout-auto", inputs: { layout: "layout" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxLayoutAuto = __decorate([
+    ProxyCmp({
+        inputs: ['layout']
+    })
+], IxLayoutAuto);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxLayoutAuto, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-layout-auto',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['layout'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxLayoutGrid = class IxLayoutGrid {
     constructor(c, r, z) {
         this.z = z;
@@ -1670,28 +1772,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     inputs: [],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let IxModalExample = class IxModalExample {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-};
-/** @nocollapse */ IxModalExample.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxModalExample, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxModalExample.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxModalExample, selector: "ix-modal-example", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-IxModalExample = __decorate([
-    ProxyCmp({})
-], IxModalExample);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxModalExample, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ix-modal-example',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: [],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxModalFooter = class IxModalFooter {
     constructor(c, r, z) {
         this.z = z;
@@ -1739,6 +1819,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     inputs: ['hideClose', 'icon', 'iconColor'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxNumberInput = class IxNumberInput {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['valueChange', 'validityStateChange', 'ixBlur']);
+    }
+};
+/** @nocollapse */ IxNumberInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxNumberInput, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxNumberInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxNumberInput, selector: "ix-number-input", inputs: { allowedCharactersPattern: "allowedCharactersPattern", disabled: "disabled", helperText: "helperText", infoText: "infoText", invalidText: "invalidText", label: "label", max: "max", min: "min", name: "name", pattern: "pattern", placeholder: "placeholder", readonly: "readonly", required: "required", showStepperButtons: "showStepperButtons", showTextAsTooltip: "showTextAsTooltip", validText: "validText", value: "value", warningText: "warningText" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxNumberInput = __decorate([
+    ProxyCmp({
+        inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'validText', 'value', 'warningText'],
+        methods: ['getNativeInputElement', 'focusInput']
+    })
+], IxNumberInput);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxNumberInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-number-input',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'validText', 'value', 'warningText'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxPagination = class IxPagination {
     constructor(c, r, z) {
         this.z = z;
@@ -1861,6 +1967,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     inputs: ['collapse', 'heading', 'icon', 'notification', 'subheading', 'variant'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxRadio = class IxRadio {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['checkedChange', 'valueChange']);
+    }
+};
+/** @nocollapse */ IxRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxRadio, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxRadio.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxRadio, selector: "ix-radio", inputs: { checked: "checked", disabled: "disabled", label: "label", name: "name", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxRadio = __decorate([
+    ProxyCmp({
+        inputs: ['checked', 'disabled', 'label', 'name', 'value']
+    })
+], IxRadio);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxRadio, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-radio',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['checked', 'disabled', 'label', 'name', 'value'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxRadioGroup = class IxRadioGroup {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['valueChange']);
+    }
+};
+/** @nocollapse */ IxRadioGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxRadioGroup, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxRadioGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxRadioGroup, selector: "ix-radio-group", inputs: { direction: "direction", helperText: "helperText", infoText: "infoText", invalidText: "invalidText", label: "label", showTextAsTooltip: "showTextAsTooltip", validText: "validText", value: "value", warningText: "warningText" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxRadioGroup = __decorate([
+    ProxyCmp({
+        inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText']
+    })
+], IxRadioGroup);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxRadioGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-radio-group',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['direction', 'helperText', 'infoText', 'invalidText', 'label', 'showTextAsTooltip', 'validText', 'value', 'warningText'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxRow = class IxRow {
     constructor(c, r, z) {
         this.z = z;
@@ -1888,14 +2044,15 @@ let IxSelect = class IxSelect {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['valueChange', 'itemSelectionChange', 'inputChange', 'addItem']);
+        proxyOutputs(this, this.el, ['valueChange', 'itemSelectionChange', 'inputChange', 'addItem', 'ixBlur']);
     }
 };
 /** @nocollapse */ IxSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxSelect, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxSelect, selector: "ix-select", inputs: { allowClear: "allowClear", disabled: "disabled", editable: "editable", hideListHeader: "hideListHeader", i18nNoMatches: "i18nNoMatches", i18nPlaceholder: "i18nPlaceholder", i18nPlaceholderEditable: "i18nPlaceholderEditable", i18nSelectListHeader: "i18nSelectListHeader", mode: "mode", readonly: "readonly", selectedIndices: "selectedIndices", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxSelect, selector: "ix-select", inputs: { allowClear: "allowClear", disabled: "disabled", editable: "editable", helperText: "helperText", hideListHeader: "hideListHeader", i18nNoMatches: "i18nNoMatches", i18nPlaceholder: "i18nPlaceholder", i18nPlaceholderEditable: "i18nPlaceholderEditable", i18nSelectListHeader: "i18nSelectListHeader", infoText: "infoText", invalidText: "invalidText", label: "label", mode: "mode", name: "name", readonly: "readonly", required: "required", selectedIndices: "selectedIndices", showTextAsTooltip: "showTextAsTooltip", validText: "validText", value: "value", warningText: "warningText" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxSelect = __decorate([
     ProxyCmp({
-        inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices', 'value']
+        inputs: ['allowClear', 'disabled', 'editable', 'helperText', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'infoText', 'invalidText', 'label', 'mode', 'name', 'readonly', 'required', 'selectedIndices', 'showTextAsTooltip', 'validText', 'value', 'warningText'],
+        methods: ['getNativeInputElement', 'focusInput']
     })
 ], IxSelect);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxSelect, decorators: [{
@@ -1905,7 +2062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices', 'value'],
+                    inputs: ['allowClear', 'disabled', 'editable', 'helperText', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'infoText', 'invalidText', 'label', 'mode', 'name', 'readonly', 'required', 'selectedIndices', 'showTextAsTooltip', 'validText', 'value', 'warningText'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxSelectItem = class IxSelectItem {
@@ -2082,6 +2239,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     inputs: ['layout', 'placement', 'rounded', 'selected', 'small'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let IxTextarea = class IxTextarea {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['valueChange', 'validityStateChange', 'ixBlur']);
+    }
+};
+/** @nocollapse */ IxTextarea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxTextarea, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IxTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxTextarea, selector: "ix-textarea", inputs: { disabled: "disabled", helperText: "helperText", infoText: "infoText", invalidText: "invalidText", label: "label", maxLength: "maxLength", minLength: "minLength", name: "name", placeholder: "placeholder", readonly: "readonly", required: "required", resizeBehavior: "resizeBehavior", showTextAsTooltip: "showTextAsTooltip", textareaCols: "textareaCols", textareaHeight: "textareaHeight", textareaRows: "textareaRows", textareaWidth: "textareaWidth", validText: "validText", value: "value", warningText: "warningText" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IxTextarea = __decorate([
+    ProxyCmp({
+        inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'],
+        methods: ['getNativeInputElement', 'focusInput']
+    })
+], IxTextarea);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxTextarea, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ix-textarea',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxTile = class IxTile {
     constructor(c, r, z) {
         this.z = z;
@@ -2191,10 +2374,10 @@ let IxToggle = class IxToggle {
     }
 };
 /** @nocollapse */ IxToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxToggle, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IxToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxToggle, selector: "ix-toggle", inputs: { checked: "checked", disabled: "disabled", hideText: "hideText", indeterminate: "indeterminate", textIndeterminate: "textIndeterminate", textOff: "textOff", textOn: "textOn" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ IxToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IxToggle, selector: "ix-toggle", inputs: { checked: "checked", disabled: "disabled", hideText: "hideText", indeterminate: "indeterminate", name: "name", required: "required", textIndeterminate: "textIndeterminate", textOff: "textOff", textOn: "textOn", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 IxToggle = __decorate([
     ProxyCmp({
-        inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn']
+        inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'name', 'required', 'textIndeterminate', 'textOff', 'textOn', 'value']
     })
 ], IxToggle);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxToggle, decorators: [{
@@ -2204,7 +2387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn'],
+                    inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'name', 'required', 'textIndeterminate', 'textOff', 'textOn', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let IxToggleButton = class IxToggleButton {
@@ -2587,6 +2770,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * LICENSE file in the root directory of this source tree.
  */
 
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class ValueAccessor {
+    constructor(injector, elementRef) {
+        this.injector = injector;
+        this.elementRef = elementRef;
+        this.onChange = () => {
+            /**/
+        };
+        this.onTouched = () => {
+            /**/
+        };
+    }
+    writeValue(value) {
+        this.elementRef.nativeElement.value = this.lastValue = value;
+        mapNgToIxClassNames(this.elementRef);
+    }
+    handleValueChange(el, value) {
+        if (el === this.elementRef.nativeElement) {
+            if (value !== this.lastValue) {
+                this.lastValue = value;
+                this.onChange(value);
+            }
+            mapNgToIxClassNames(this.elementRef);
+        }
+    }
+    _handleBlurEvent(el) {
+        if (el === this.elementRef.nativeElement) {
+            this.onTouched();
+            mapNgToIxClassNames(this.elementRef);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.elementRef.nativeElement.disabled = isDisabled;
+    }
+    ngOnDestroy() {
+        if (this.statusChanges) {
+            this.statusChanges.unsubscribe();
+        }
+    }
+    ngAfterViewInit() {
+        let ngControl;
+        try {
+            ngControl = this.injector.get(NgControl);
+        }
+        catch {
+            /* No FormControl or ngModel binding */
+        }
+        if (!ngControl) {
+            return;
+        }
+        if (ngControl.statusChanges) {
+            this.statusChanges = ngControl.statusChanges.subscribe(() => {
+                mapNgToIxClassNames(this.elementRef);
+            });
+        }
+        detourFormControlMethods(ngControl, this.elementRef);
+    }
+}
+ValueAccessor.ANGULAR_CLASS_PREFIX = 'ng-';
+/** @nocollapse */ ValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ ValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: ValueAccessor, host: { listeners: { "ixBlur": "_handleBlurEvent($event.target)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ValueAccessor, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { _handleBlurEvent: [{
+                type: HostListener,
+                args: ['ixBlur', ['$event.target']]
+            }] } });
+const detourFormControlMethods = (ngControl, elementRef) => {
+    const formControl = ngControl.control;
+    if (formControl) {
+        const methodsToPatch = [
+            'markAsTouched',
+            'markAllAsTouched',
+            'markAsUntouched',
+            'markAsDirty',
+            'markAsPristine',
+        ];
+        methodsToPatch.forEach((method) => {
+            if (typeof formControl[method] !== 'undefined') {
+                const oldFn = formControl[method].bind(formControl);
+                formControl[method] = (...params) => {
+                    oldFn(...params);
+                    mapNgToIxClassNames(elementRef);
+                };
+            }
+        });
+    }
+};
+const mapNgToIxClassNames = (element) => {
+    setTimeout(() => {
+        const input = element.nativeElement;
+        const classes = getClasses(input);
+        const classList = input.classList;
+        classList.remove('ix-valid', 'ix-invalid', 'ix-touched', 'ix-untouched', 'ix-dirty', 'ix-pristine');
+        classList.add(...classes);
+    });
+};
+const getClasses = (element) => {
+    const classList = element.classList;
+    const classes = [];
+    for (let i = 0; i < classList.length; i++) {
+        const item = classList.item(i);
+        if (item?.startsWith(ValueAccessor.ANGULAR_CLASS_PREFIX)) {
+            classes.push(`ix-${item.substring(3)}`);
+        }
+    }
+    return classes;
+};
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class TextValueAccessorDirective extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleInputEvent(el) {
+        super.handleValueChange(el, el.value);
+    }
+}
+/** @nocollapse */ TextValueAccessorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TextValueAccessorDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ TextValueAccessorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: TextValueAccessorDirective, selector: "ix-input,ix-number-field,ix-textarea-field", host: { listeners: { "input": "handleInputEvent($event.target)", "valueChange": "handleInputEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: TextValueAccessorDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TextValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ix-input,ix-number-field,ix-textarea-field',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TextValueAccessorDirective,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleInputEvent: [{
+                type: HostListener,
+                args: ['input', ['$event.target']]
+            }, {
+                type: HostListener,
+                args: ['valueChange', ['$event.target']]
+            }] } });
+
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
  *
@@ -2604,8 +2953,8 @@ const appInitialize = (doc) => {
                 return;
             }
             didInitialize = true;
-            defineCustomElements();
-            await defineCustomElements$1();
+            await defineCustomElements();
+            defineCustomElements$1();
         }
     };
 };
@@ -2626,11 +2975,15 @@ const DIRECTIVES = [
     IxCardList,
     IxCardTitle,
     IxCategoryFilter,
+    IxCheckbox,
+    IxCheckboxGroup,
     IxChip,
     IxCol,
     IxContent,
     IxContentHeader,
+    IxCustomField,
     IxDateDropdown,
+    IxDateInput,
     IxDatePicker,
     IxDatetimePicker,
     IxDivider,
@@ -2644,19 +2997,22 @@ const DIRECTIVES = [
     IxEventList,
     IxEventListItem,
     IxExpandingSearch,
+    IxFieldLabel,
     IxFilterChip,
     IxFlipTile,
     IxFlipTileContent,
-    IxFormField,
     IxGroup,
     IxGroupContextMenu,
     IxGroupItem,
+    IxHelperText,
     IxIconButton,
     IxIconToggleButton,
+    IxInput,
     IxInputGroup,
     IxKeyValue,
     IxKeyValueList,
     IxKpi,
+    IxLayoutAuto,
     IxLayoutGrid,
     IxLinkButton,
     IxMapNavigation,
@@ -2674,14 +3030,16 @@ const DIRECTIVES = [
     IxMessageBar,
     IxModal,
     IxModalContent,
-    IxModalExample,
     IxModalFooter,
     IxModalHeader,
+    IxNumberInput,
     IxPagination,
     IxPane,
     IxPaneLayout,
     IxPill,
     IxPushCard,
+    IxRadio,
+    IxRadioGroup,
     IxRow,
     IxSelect,
     IxSelectItem,
@@ -2691,6 +3049,7 @@ const DIRECTIVES = [
     IxSplitButtonItem,
     IxTabItem,
     IxTabs,
+    IxTextarea,
     IxTile,
     IxTimePicker,
     IxToast,
@@ -2706,37 +3065,6 @@ const DIRECTIVES = [
     IxWorkflowSteps
 ];
 
-class SelectValueAccessor extends ValueAccessor {
-    constructor(el) {
-        super(el);
-    }
-}
-/** @nocollapse */ SelectValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ SelectValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: SelectValueAccessor, selector: "ix-select[ngModel],ix-select[formControlName],ix-select[formControl]", host: { listeners: { "valueChange": "handleChangeEvent($event.target.value)" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: SelectValueAccessor,
-            multi: true
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectValueAccessor, decorators: [{
-            type: Directive,
-            args: [{
-                    /* tslint:disable-next-line:directive-selector */
-                    selector: 'ix-select[ngModel],ix-select[formControlName],ix-select[formControl]',
-                    host: {
-                        '(valueChange)': 'handleChangeEvent($event.target.value)'
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: SelectValueAccessor,
-                            multi: true
-                        }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
  *
@@ -2916,6 +3244,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * LICENSE file in the root directory of this source tree.
  */
 
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class SelectValueAccessorDirective extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleChangeEvent(el) {
+        super.handleValueChange(el, el.value);
+    }
+}
+/** @nocollapse */ SelectValueAccessorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectValueAccessorDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ SelectValueAccessorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: SelectValueAccessorDirective, selector: "ix-select", host: { listeners: { "valueChange": "handleChangeEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: SelectValueAccessorDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ix-select',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SelectValueAccessorDirective,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleChangeEvent: [{
+                type: HostListener,
+                args: ['valueChange', ['$event.target']]
+            }] } });
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class RadioValueAccessorDirective extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    writeValue(value) {
+        this.lastValue = value;
+        this.elementRef.nativeElement.checked =
+            this.elementRef.nativeElement.value === value;
+        mapNgToIxClassNames(this.elementRef);
+    }
+    handleChangeEvent(el) {
+        super.handleValueChange(el, el.value);
+    }
+}
+/** @nocollapse */ RadioValueAccessorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RadioValueAccessorDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ RadioValueAccessorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: RadioValueAccessorDirective, selector: "ix-radio", host: { listeners: { "checkedChange": "handleChangeEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: RadioValueAccessorDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RadioValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ix-radio',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: RadioValueAccessorDirective,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleChangeEvent: [{
+                type: HostListener,
+                args: ['checkedChange', ['$event.target']]
+            }] } });
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class BooleanValueAccessorDirective extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    writeValue(value) {
+        this.elementRef.nativeElement.checked = this.lastValue = value;
+        mapNgToIxClassNames(this.elementRef);
+    }
+    handleChangeEvent(el) {
+        super.handleValueChange(el, el.checked);
+    }
+}
+/** @nocollapse */ BooleanValueAccessorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BooleanValueAccessorDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ BooleanValueAccessorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: BooleanValueAccessorDirective, selector: "ix-checkbox,ix-toggle", host: { listeners: { "checkedChange": "handleChangeEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: BooleanValueAccessorDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BooleanValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ix-checkbox,ix-toggle',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: BooleanValueAccessorDirective,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleChangeEvent: [{
+                type: HostListener,
+                args: ['checkedChange', ['$event.target']]
+            }] } });
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class DateValueAccessorDirective extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleInputEvent(el) {
+        super.handleValueChange(el, el.value);
+    }
+}
+/** @nocollapse */ DateValueAccessorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DateValueAccessorDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DateValueAccessorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: DateValueAccessorDirective, selector: "ix-date-input", host: { listeners: { "valueChange": "handleInputEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: DateValueAccessorDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DateValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ix-date-input',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: DateValueAccessorDirective,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleInputEvent: [{
+                type: HostListener,
+                args: ['valueChange', ['$event.target']]
+            }] } });
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
  *
@@ -2929,8 +3440,11 @@ const DECLARATIONS = [
     IxTree,
     IxDropdownTriggerDirective,
     IxIcon,
-    SelectValueAccessor,
-    BooleanValueAccessor
+    TextValueAccessorDirective,
+    SelectValueAccessorDirective,
+    RadioValueAccessorDirective,
+    BooleanValueAccessorDirective,
+    DateValueAccessorDirective,
 ];
 class IxModule {
     static forRoot() {
@@ -2951,13 +3465,19 @@ class IxModule {
     }
 }
 /** @nocollapse */ IxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ IxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxModule, declarations: [IxActionCard, IxApplication, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxCol, IxContent, IxContentHeader, IxDateDropdown, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxFormField, IxGroup, IxGroupContextMenu, IxGroupItem, IxIconButton, IxIconToggleButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutGrid, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalExample, IxModalFooter, IxModalHeader, IxPagination, IxPane, IxPaneLayout, IxPill, IxPushCard, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, IxTree, IxDropdownTriggerDirective,
+/** @nocollapse */ IxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxModule, declarations: [IxActionCard, IxApplication, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxCheckbox, IxCheckboxGroup, IxChip, IxCol, IxContent, IxContentHeader, IxCustomField, IxDateDropdown, IxDateInput, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFieldLabel, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupItem, IxHelperText, IxIconButton, IxIconToggleButton, IxInput, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutAuto, IxLayoutGrid, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalFooter, IxModalHeader, IxNumberInput, IxPagination, IxPane, IxPaneLayout, IxPill, IxPushCard, IxRadio, IxRadioGroup, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTextarea, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, IxTree, IxDropdownTriggerDirective,
         IxIcon,
-        SelectValueAccessor,
-        BooleanValueAccessor], exports: [IxActionCard, IxApplication, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxCol, IxContent, IxContentHeader, IxDateDropdown, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxFormField, IxGroup, IxGroupContextMenu, IxGroupItem, IxIconButton, IxIconToggleButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutGrid, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalExample, IxModalFooter, IxModalHeader, IxPagination, IxPane, IxPaneLayout, IxPill, IxPushCard, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, IxTree, IxDropdownTriggerDirective,
+        TextValueAccessorDirective,
+        SelectValueAccessorDirective,
+        RadioValueAccessorDirective,
+        BooleanValueAccessorDirective,
+        DateValueAccessorDirective], exports: [IxActionCard, IxApplication, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxCheckbox, IxCheckboxGroup, IxChip, IxCol, IxContent, IxContentHeader, IxCustomField, IxDateDropdown, IxDateInput, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFieldLabel, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupItem, IxHelperText, IxIconButton, IxIconToggleButton, IxInput, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutAuto, IxLayoutGrid, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalFooter, IxModalHeader, IxNumberInput, IxPagination, IxPane, IxPaneLayout, IxPill, IxPushCard, IxRadio, IxRadioGroup, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTextarea, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, IxTree, IxDropdownTriggerDirective,
         IxIcon,
-        SelectValueAccessor,
-        BooleanValueAccessor] });
+        TextValueAccessorDirective,
+        SelectValueAccessorDirective,
+        RadioValueAccessorDirective,
+        BooleanValueAccessorDirective,
+        DateValueAccessorDirective] });
 /** @nocollapse */ IxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxModule });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IxModule, decorators: [{
             type: NgModule,
@@ -2980,5 +3500,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BooleanValueAccessor, IxActionCard, IxActiveModal, IxApplication, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxCol, IxContent, IxContentHeader, IxDateDropdown, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxDropdownTriggerDirective, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxFormField, IxGroup, IxGroupContextMenu, IxGroupItem, IxIcon, IxIconButton, IxIconToggleButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutGrid, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalExample, IxModalFooter, IxModalHeader, IxModule, IxPagination, IxPane, IxPaneLayout, IxPill, IxPushCard, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTree, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, ModalService, SelectValueAccessor, ThemeService, ToastService };
+export { BooleanValueAccessorDirective, DateValueAccessorDirective, IxActionCard, IxActiveModal, IxApplication, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxCheckbox, IxCheckboxGroup, IxChip, IxCol, IxContent, IxContentHeader, IxCustomField, IxDateDropdown, IxDateInput, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxDropdownTriggerDirective, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFieldLabel, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupItem, IxHelperText, IxIcon, IxIconButton, IxIconToggleButton, IxInput, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutAuto, IxLayoutGrid, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalFooter, IxModalHeader, IxModule, IxNumberInput, IxPagination, IxPane, IxPaneLayout, IxPill, IxPushCard, IxRadio, IxRadioGroup, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTextarea, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTree, IxTreeItem, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, ModalService, RadioValueAccessorDirective, SelectValueAccessorDirective, TextValueAccessorDirective, ThemeService, ToastService };
 //# sourceMappingURL=siemens-ix-angular.mjs.map