@six-group/ui-library-angular 0.0.0-insider.ebd822a → 0.0.0-insider.f24090c

package/fesm2020/six-group-ui-library-angular.mjs

@@ -1,8 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, APP_INITIALIZER, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Injectable, inject, Directive, HostListener, Input, EventEmitter, Output, APP_INITIALIZER, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import { fromEvent } from 'rxjs';
 import { defineCustomElements } from '@six-group/ui-library/loader';
+import * as i1 from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR, FormControl, FormGroup, FormArray, NG_VALIDATORS, Validators } from '@angular/forms';
+import { getErrorMessage } from '@six-group/ui-library';
 
 /* eslint-disable */
 /* tslint:disable */
@@ -209,11 +212,11 @@ let SixCheckbox = class SixCheckbox {
     }
 };
 SixCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixCheckbox, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SixCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixCheckbox, selector: "six-checkbox", inputs: { checked: "checked", disabled: "disabled", errorOnBlur: "errorOnBlur", errorText: "errorText", indeterminate: "indeterminate", invalid: "invalid", label: "label", name: "name", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SixCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixCheckbox, selector: "six-checkbox", inputs: { checked: "checked", disabled: "disabled", errorText: "errorText", errorTextCount: "errorTextCount", indeterminate: "indeterminate", invalid: "invalid", label: "label", name: "name", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 SixCheckbox = __decorate([
     ProxyCmp({
-        inputs: ['checked', 'disabled', 'errorOnBlur', 'errorText', 'indeterminate', 'invalid', 'label', 'name', 'required', 'value'],
-        methods: ['setFocus', 'removeFocus', 'reportValidity', 'checkValidity', 'setCustomValidity', 'reset']
+        inputs: ['checked', 'disabled', 'errorText', 'errorTextCount', 'indeterminate', 'invalid', 'label', 'name', 'required', 'value'],
+        methods: ['setFocus', 'removeFocus']
     })
 ], SixCheckbox);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixCheckbox, decorators: [{
@@ -223,7 +226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['checked', 'disabled', 'errorOnBlur', 'errorText', 'indeterminate', 'invalid', 'label', 'name', 'required', 'value'],
+                    inputs: ['checked', 'disabled', 'errorText', 'errorTextCount', 'indeterminate', 'invalid', 'label', 'name', 'required', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let SixDatepicker = class SixDatepicker {
@@ -235,11 +238,11 @@ let SixDatepicker = class SixDatepicker {
     }
 };
 SixDatepicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixDatepicker, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SixDatepicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixDatepicker, selector: "six-datepicker", inputs: { allowedDates: "allowedDates", clearable: "clearable", closeOnSelect: "closeOnSelect", containingElement: "containingElement", dateFormat: "dateFormat", debounce: "debounce", defaultDate: "defaultDate", disabled: "disabled", errorOnBlur: "errorOnBlur", errorText: "errorText", hoist: "hoist", iconPosition: "iconPosition", inline: "inline", label: "label", locale: "locale", max: "max", min: "min", name: "name", open: "open", placeholder: "placeholder", placement: "placement", readonly: "readonly", required: "required", size: "size", type: "type", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SixDatepicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixDatepicker, selector: "six-datepicker", inputs: { allowedDates: "allowedDates", clearable: "clearable", closeOnSelect: "closeOnSelect", containingElement: "containingElement", dateFormat: "dateFormat", debounce: "debounce", defaultDate: "defaultDate", disabled: "disabled", errorText: "errorText", errorTextCount: "errorTextCount", hoist: "hoist", iconPosition: "iconPosition", inline: "inline", invalid: "invalid", label: "label", locale: "locale", max: "max", min: "min", name: "name", open: "open", placeholder: "placeholder", placement: "placement", readonly: "readonly", required: "required", size: "size", type: "type", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 SixDatepicker = __decorate([
     ProxyCmp({
-        inputs: ['allowedDates', 'clearable', 'closeOnSelect', 'containingElement', 'dateFormat', 'debounce', 'defaultDate', 'disabled', 'errorOnBlur', 'errorText', 'hoist', 'iconPosition', 'inline', 'label', 'locale', 'max', 'min', 'name', 'open', 'placeholder', 'placement', 'readonly', 'required', 'size', 'type', 'value'],
-        methods: ['reportValidity', 'checkValidity', 'setCustomValidity', 'reset', 'select']
+        inputs: ['allowedDates', 'clearable', 'closeOnSelect', 'containingElement', 'dateFormat', 'debounce', 'defaultDate', 'disabled', 'errorText', 'errorTextCount', 'hoist', 'iconPosition', 'inline', 'invalid', 'label', 'locale', 'max', 'min', 'name', 'open', 'placeholder', 'placement', 'readonly', 'required', 'size', 'type', 'value'],
+        methods: ['setFocus', 'select']
     })
 ], SixDatepicker);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixDatepicker, decorators: [{
@@ -249,7 +252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['allowedDates', 'clearable', 'closeOnSelect', 'containingElement', 'dateFormat', 'debounce', 'defaultDate', 'disabled', 'errorOnBlur', 'errorText', 'hoist', 'iconPosition', 'inline', 'label', 'locale', 'max', 'min', 'name', 'open', 'placeholder', 'placement', 'readonly', 'required', 'size', 'type', 'value'],
+                    inputs: ['allowedDates', 'clearable', 'closeOnSelect', 'containingElement', 'dateFormat', 'debounce', 'defaultDate', 'disabled', 'errorText', 'errorTextCount', 'hoist', 'iconPosition', 'inline', 'invalid', 'label', 'locale', 'max', 'min', 'name', 'open', 'placeholder', 'placement', 'readonly', 'required', 'size', 'type', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let SixDetails = class SixDetails {
@@ -356,6 +359,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     inputs: ['asyncFilter', 'autofocusFilter', 'closeOnSelect', 'containingElement', 'disableHideOnEnterAndSpace', 'distance', 'filter', 'filterDebounce', 'filterPlaceholder', 'hoist', 'open', 'options', 'placement', 'skidding', 'virtualScroll'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let SixError = class SixError {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+SixError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixError, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SixError.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixError, selector: "six-error", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SixError = __decorate([
+    ProxyCmp({})
+], SixError);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixError, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'six-error',
+                    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 SixErrorPage = class SixErrorPage {
     constructor(c, r, z) {
         this.z = z;
@@ -474,32 +499,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     inputs: [],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let SixForm = class SixForm {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['six-form-submit', 'six-form-change', 'six-form-reset']);
-    }
-};
-SixForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixForm, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SixForm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixForm, selector: "six-form", inputs: { novalidate: "novalidate" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-SixForm = __decorate([
-    ProxyCmp({
-        inputs: ['novalidate'],
-        methods: ['getFormData', 'getFormControls', 'submit', 'checkValidity', 'reset']
-    })
-], SixForm);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixForm, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'six-form',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['novalidate'],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let SixGroupLabel = class SixGroupLabel {
     constructor(c, r, z) {
         this.z = z;
@@ -603,15 +602,15 @@ let SixInput = class SixInput {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['six-input-change', 'six-input-clear', 'six-input-input', 'six-input-focus', 'six-input-blur', 'six-input-value-change']);
+        proxyOutputs(this, this.el, ['six-input-change', 'six-input-clear', 'six-input-input', 'six-input-focus', 'six-input-blur']);
     }
 };
 SixInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixInput, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SixInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixInput, selector: "six-input", inputs: { autocapitalize: "autocapitalize", autocomplete: "autocomplete", autocorrect: "autocorrect", autofocus: "autofocus", clearable: "clearable", disabled: "disabled", errorOnBlur: "errorOnBlur", errorText: "errorText", helpText: "helpText", inputmode: "inputmode", invalid: "invalid", label: "label", line: "line", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", name: "name", pattern: "pattern", pill: "pill", placeholder: "placeholder", readonly: "readonly", required: "required", size: "size", spellcheck: "spellcheck", step: "step", togglePassword: "togglePassword", type: "type", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SixInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixInput, selector: "six-input", inputs: { autocapitalize: "autocapitalize", autocomplete: "autocomplete", autocorrect: "autocorrect", autofocus: "autofocus", clearable: "clearable", disabled: "disabled", errorText: "errorText", errorTextCount: "errorTextCount", helpText: "helpText", inputmode: "inputmode", invalid: "invalid", label: "label", line: "line", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", name: "name", pattern: "pattern", pill: "pill", placeholder: "placeholder", readonly: "readonly", required: "required", size: "size", spellcheck: "spellcheck", step: "step", togglePassword: "togglePassword", type: "type", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 SixInput = __decorate([
     ProxyCmp({
-        inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearable', 'disabled', 'errorOnBlur', 'errorText', 'helpText', 'inputmode', 'invalid', 'label', 'line', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'pill', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'togglePassword', 'type', 'value'],
-        methods: ['setFocus', 'removeFocus', 'select', 'setSelectionRange', 'setRangeText', 'reportValidity', 'checkValidity', 'setCustomValidity', 'getValidity', 'isValid', 'getValidationMessage', 'reset']
+        inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearable', 'disabled', 'errorText', 'errorTextCount', 'helpText', 'inputmode', 'invalid', 'label', 'line', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'pill', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'togglePassword', 'type', 'value'],
+        methods: ['setFocus', 'removeFocus', 'select', 'setSelectionRange', 'setRangeText']
     })
 ], SixInput);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixInput, decorators: [{
@@ -621,7 +620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearable', 'disabled', 'errorOnBlur', 'errorText', 'helpText', 'inputmode', 'invalid', 'label', 'line', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'pill', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'togglePassword', 'type', 'value'],
+                    inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearable', 'disabled', 'errorText', 'errorTextCount', 'helpText', 'inputmode', 'invalid', 'label', 'line', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'pill', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'togglePassword', 'type', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let SixItemPicker = class SixItemPicker {
@@ -902,7 +901,7 @@ SixRadio.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
 SixRadio = __decorate([
     ProxyCmp({
         inputs: ['checked', 'disabled', 'invalid', 'name', 'value'],
-        methods: ['setFocus', 'removeFocus', 'reportValidity', 'checkValidity', 'setCustomValidity', 'reset']
+        methods: ['setFocus', 'removeFocus']
     })
 ], SixRadio);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixRadio, decorators: [{
@@ -924,11 +923,11 @@ let SixRange = class SixRange {
     }
 };
 SixRange.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixRange, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SixRange.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixRange, selector: "six-range", inputs: { disabled: "disabled", errorOnBlur: "errorOnBlur", errorText: "errorText", helpText: "helpText", invalid: "invalid", label: "label", max: "max", min: "min", name: "name", required: "required", step: "step", tooltip: "tooltip", tooltipFormatter: "tooltipFormatter", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SixRange.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixRange, selector: "six-range", inputs: { disabled: "disabled", errorText: "errorText", errorTextCount: "errorTextCount", helpText: "helpText", invalid: "invalid", label: "label", max: "max", min: "min", name: "name", required: "required", step: "step", tooltip: "tooltip", tooltipFormatter: "tooltipFormatter", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 SixRange = __decorate([
     ProxyCmp({
-        inputs: ['disabled', 'errorOnBlur', 'errorText', 'helpText', 'invalid', 'label', 'max', 'min', 'name', 'required', 'step', 'tooltip', 'tooltipFormatter', 'value'],
-        methods: ['setFocus', 'removeFocus', 'setCustomValidity', 'reset']
+        inputs: ['disabled', 'errorText', 'errorTextCount', 'helpText', 'invalid', 'label', 'max', 'min', 'name', 'required', 'step', 'tooltip', 'tooltipFormatter', 'value'],
+        methods: ['setFocus', 'removeFocus']
     })
 ], SixRange);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixRange, decorators: [{
@@ -938,7 +937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['disabled', 'errorOnBlur', 'errorText', 'helpText', 'invalid', 'label', 'max', 'min', 'name', 'required', 'step', 'tooltip', 'tooltipFormatter', 'value'],
+                    inputs: ['disabled', 'errorText', 'errorTextCount', 'helpText', 'invalid', 'label', 'max', 'min', 'name', 'required', 'step', 'tooltip', 'tooltipFormatter', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let SixRoot = class SixRoot {
@@ -1000,11 +999,11 @@ let SixSelect = class SixSelect {
     }
 };
 SixSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixSelect, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SixSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixSelect, selector: "six-select", inputs: { asyncFilter: "asyncFilter", autocomplete: "autocomplete", clearable: "clearable", defaultValue: "defaultValue", disabled: "disabled", errorOnBlur: "errorOnBlur", errorText: "errorText", filter: "filter", filterDebounce: "filterDebounce", filterPlaceholder: "filterPlaceholder", helpText: "helpText", hoist: "hoist", inputDebounce: "inputDebounce", invalid: "invalid", label: "label", line: "line", maxTagsVisible: "maxTagsVisible", multiple: "multiple", name: "name", options: "options", pill: "pill", placeholder: "placeholder", required: "required", size: "size", value: "value", virtualScroll: "virtualScroll" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SixSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixSelect, selector: "six-select", inputs: { asyncFilter: "asyncFilter", autocomplete: "autocomplete", clearable: "clearable", disabled: "disabled", errorText: "errorText", errorTextCount: "errorTextCount", filter: "filter", filterDebounce: "filterDebounce", filterPlaceholder: "filterPlaceholder", helpText: "helpText", hoist: "hoist", inputDebounce: "inputDebounce", invalid: "invalid", label: "label", line: "line", maxTagsVisible: "maxTagsVisible", multiple: "multiple", name: "name", options: "options", pill: "pill", placeholder: "placeholder", required: "required", size: "size", value: "value", virtualScroll: "virtualScroll" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 SixSelect = __decorate([
     ProxyCmp({
-        inputs: ['asyncFilter', 'autocomplete', 'clearable', 'defaultValue', 'disabled', 'errorOnBlur', 'errorText', 'filter', 'filterDebounce', 'filterPlaceholder', 'helpText', 'hoist', 'inputDebounce', 'invalid', 'label', 'line', 'maxTagsVisible', 'multiple', 'name', 'options', 'pill', 'placeholder', 'required', 'size', 'value', 'virtualScroll'],
-        methods: ['reportValidity', 'checkValidity', 'setCustomValidity', 'reset']
+        inputs: ['asyncFilter', 'autocomplete', 'clearable', 'disabled', 'errorText', 'errorTextCount', 'filter', 'filterDebounce', 'filterPlaceholder', 'helpText', 'hoist', 'inputDebounce', 'invalid', 'label', 'line', 'maxTagsVisible', 'multiple', 'name', 'options', 'pill', 'placeholder', 'required', 'size', 'value', 'virtualScroll'],
+        methods: ['setFocus']
     })
 ], SixSelect);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixSelect, decorators: [{
@@ -1014,7 +1013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['asyncFilter', 'autocomplete', 'clearable', 'defaultValue', 'disabled', 'errorOnBlur', 'errorText', 'filter', 'filterDebounce', 'filterPlaceholder', 'helpText', 'hoist', 'inputDebounce', 'invalid', 'label', 'line', 'maxTagsVisible', 'multiple', 'name', 'options', 'pill', 'placeholder', 'required', 'size', 'value', 'virtualScroll'],
+                    inputs: ['asyncFilter', 'autocomplete', 'clearable', 'disabled', 'errorText', 'errorTextCount', 'filter', 'filterDebounce', 'filterPlaceholder', 'helpText', 'hoist', 'inputDebounce', 'invalid', 'label', 'line', 'maxTagsVisible', 'multiple', 'name', 'options', 'pill', 'placeholder', 'required', 'size', 'value', 'virtualScroll'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let SixSidebar = class SixSidebar {
@@ -1148,11 +1147,11 @@ let SixSwitch = class SixSwitch {
     }
 };
 SixSwitch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixSwitch, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SixSwitch.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixSwitch, selector: "six-switch", inputs: { checked: "checked", disabled: "disabled", invalid: "invalid", name: "name", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SixSwitch.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixSwitch, selector: "six-switch", inputs: { checked: "checked", disabled: "disabled", errorText: "errorText", errorTextCount: "errorTextCount", invalid: "invalid", label: "label", name: "name", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 SixSwitch = __decorate([
     ProxyCmp({
-        inputs: ['checked', 'disabled', 'invalid', 'name', 'required', 'value'],
-        methods: ['setFocus', 'removeFocus', 'reportValidity', 'checkValidity', 'setCustomValidity', 'reset']
+        inputs: ['checked', 'disabled', 'errorText', 'errorTextCount', 'invalid', 'label', 'name', 'required', 'value'],
+        methods: ['setFocus', 'removeFocus']
     })
 ], SixSwitch);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixSwitch, decorators: [{
@@ -1162,7 +1161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['checked', 'disabled', 'invalid', 'name', 'required', 'value'],
+                    inputs: ['checked', 'disabled', 'errorText', 'errorTextCount', 'invalid', 'label', 'name', 'required', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let SixTab = class SixTab {
@@ -1271,15 +1270,15 @@ let SixTextarea = class SixTextarea {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['six-textarea-change', 'six-textarea-input', 'six-textarea-focus', 'six-textarea-blur', 'six-textarea-value-change']);
+        proxyOutputs(this, this.el, ['six-textarea-change', 'six-textarea-input', 'six-textarea-focus', 'six-textarea-blur']);
     }
 };
 SixTextarea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixTextarea, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SixTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixTextarea, selector: "six-textarea", inputs: { autocapitalize: "autocapitalize", autocomplete: "autocomplete", autocorrect: "autocorrect", autofocus: "autofocus", disabled: "disabled", errorOnBlur: "errorOnBlur", errorText: "errorText", helpText: "helpText", inputmode: "inputmode", invalid: "invalid", label: "label", maxlength: "maxlength", minlength: "minlength", name: "name", placeholder: "placeholder", readonly: "readonly", required: "required", resize: "resize", rows: "rows", size: "size", spellcheck: "spellcheck", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SixTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixTextarea, selector: "six-textarea", inputs: { autocapitalize: "autocapitalize", autocomplete: "autocomplete", autocorrect: "autocorrect", autofocus: "autofocus", disabled: "disabled", errorText: "errorText", errorTextCount: "errorTextCount", helpText: "helpText", inputmode: "inputmode", invalid: "invalid", label: "label", maxlength: "maxlength", minlength: "minlength", name: "name", placeholder: "placeholder", readonly: "readonly", required: "required", resize: "resize", rows: "rows", size: "size", spellcheck: "spellcheck", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 SixTextarea = __decorate([
     ProxyCmp({
-        inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'disabled', 'errorOnBlur', 'errorText', 'helpText', 'inputmode', 'invalid', 'label', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'resize', 'rows', 'size', 'spellcheck', 'value'],
-        methods: ['setFocus', 'removeFocus', 'select', 'setSelectionRange', 'setRangeText', 'reportValidity', 'checkValidity', 'setCustomValidity', 'reset']
+        inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'disabled', 'errorText', 'errorTextCount', 'helpText', 'inputmode', 'invalid', 'label', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'resize', 'rows', 'size', 'spellcheck', 'value'],
+        methods: ['setFocus', 'removeFocus', 'select', 'setSelectionRange', 'setRangeText']
     })
 ], SixTextarea);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixTextarea, decorators: [{
@@ -1289,7 +1288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'disabled', 'errorOnBlur', 'errorText', 'helpText', 'inputmode', 'invalid', 'label', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'resize', 'rows', 'size', 'spellcheck', 'value'],
+                    inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'disabled', 'errorText', 'errorTextCount', 'helpText', 'inputmode', 'invalid', 'label', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'resize', 'rows', 'size', 'spellcheck', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let SixTile = class SixTile {
@@ -1327,11 +1326,11 @@ let SixTimepicker = class SixTimepicker {
     }
 };
 SixTimepicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixTimepicker, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SixTimepicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixTimepicker, selector: "six-timepicker", inputs: { clearable: "clearable", debounce: "debounce", defaultTime: "defaultTime", disabled: "disabled", errorOnBlur: "errorOnBlur", errorText: "errorText", format: "format", hoist: "hoist", iconPosition: "iconPosition", inline: "inline", interval: "interval", label: "label", name: "name", open: "open", placeholder: "placeholder", placement: "placement", readonly: "readonly", required: "required", separator: "separator", size: "size", timeout: "timeout", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SixTimepicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SixTimepicker, selector: "six-timepicker", inputs: { clearable: "clearable", debounce: "debounce", defaultTime: "defaultTime", disabled: "disabled", errorText: "errorText", errorTextCount: "errorTextCount", format: "format", hoist: "hoist", iconPosition: "iconPosition", inline: "inline", interval: "interval", invalid: "invalid", label: "label", name: "name", open: "open", placeholder: "placeholder", placement: "placement", readonly: "readonly", required: "required", separator: "separator", size: "size", timeout: "timeout", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 SixTimepicker = __decorate([
     ProxyCmp({
-        inputs: ['clearable', 'debounce', 'defaultTime', 'disabled', 'errorOnBlur', 'errorText', 'format', 'hoist', 'iconPosition', 'inline', 'interval', 'label', 'name', 'open', 'placeholder', 'placement', 'readonly', 'required', 'separator', 'size', 'timeout', 'value'],
-        methods: ['reportValidity', 'checkValidity', 'setCustomValidity', 'reset']
+        inputs: ['clearable', 'debounce', 'defaultTime', 'disabled', 'errorText', 'errorTextCount', 'format', 'hoist', 'iconPosition', 'inline', 'interval', 'invalid', 'label', 'name', 'open', 'placeholder', 'placement', 'readonly', 'required', 'separator', 'size', 'timeout', 'value'],
+        methods: ['setFocus']
     })
 ], SixTimepicker);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixTimepicker, decorators: [{
@@ -1341,7 +1340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['clearable', 'debounce', 'defaultTime', 'disabled', 'errorOnBlur', 'errorText', 'format', 'hoist', 'iconPosition', 'inline', 'interval', 'label', 'name', 'open', 'placeholder', 'placement', 'readonly', 'required', 'separator', 'size', 'timeout', 'value'],
+                    inputs: ['clearable', 'debounce', 'defaultTime', 'disabled', 'errorText', 'errorTextCount', 'format', 'hoist', 'iconPosition', 'inline', 'interval', 'invalid', 'label', 'name', 'open', 'placeholder', 'placement', 'readonly', 'required', 'separator', 'size', 'timeout', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let SixTooltip = class SixTooltip {
@@ -1384,12 +1383,12 @@ const DIRECTIVES = [
     SixDialog,
     SixDrawer,
     SixDropdown,
+    SixError,
     SixErrorPage,
     SixFileList,
     SixFileListItem,
     SixFileUpload,
     SixFooter,
-    SixForm,
     SixGroupLabel,
     SixHeader,
     SixIcon,
@@ -1427,33 +1426,849 @@ const DIRECTIVES = [
     SixTooltip
 ];
 
-class UiLibraryAngularModule {
+class ValidationMessagesService {
+    getErrorMessage(language, error) {
+        return getErrorMessage(language, error);
+    }
 }
-UiLibraryAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UiLibraryAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UiLibraryAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: UiLibraryAngularModule, declarations: [SetAttributes, SixAlert, SixAvatar, SixBadge, SixButton, SixCard, SixCheckbox, SixDatepicker, SixDetails, SixDialog, SixDrawer, SixDropdown, SixErrorPage, SixFileList, SixFileListItem, SixFileUpload, SixFooter, SixForm, SixGroupLabel, SixHeader, SixIcon, SixIconButton, SixInput, SixItemPicker, SixLanguageSwitcher, SixLayoutGrid, SixMainContainer, SixMenu, SixMenuDivider, SixMenuItem, SixMenuLabel, SixPicto, SixProgressBar, SixProgressRing, SixRadio, SixRange, SixRoot, SixSearchField, SixSelect, SixSidebar, SixSidebarItem, SixSidebarItemGroup, SixSpinner, SixStageIndicator, SixSwitch, SixTab, SixTabGroup, SixTabPanel, SixTag, SixTextarea, SixTile, SixTimepicker, SixTooltip], exports: [SetAttributes, SixAlert, SixAvatar, SixBadge, SixButton, SixCard, SixCheckbox, SixDatepicker, SixDetails, SixDialog, SixDrawer, SixDropdown, SixErrorPage, SixFileList, SixFileListItem, SixFileUpload, SixFooter, SixForm, SixGroupLabel, SixHeader, SixIcon, SixIconButton, SixInput, SixItemPicker, SixLanguageSwitcher, SixLayoutGrid, SixMainContainer, SixMenu, SixMenuDivider, SixMenuItem, SixMenuLabel, SixPicto, SixProgressBar, SixProgressRing, SixRadio, SixRange, SixRoot, SixSearchField, SixSelect, SixSidebar, SixSidebarItem, SixSidebarItemGroup, SixSpinner, SixStageIndicator, SixSwitch, SixTab, SixTabGroup, SixTabPanel, SixTag, SixTextarea, SixTile, SixTimepicker, SixTooltip] });
-UiLibraryAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UiLibraryAngularModule, providers: [
+ValidationMessagesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ValidationMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ValidationMessagesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ValidationMessagesService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ValidationMessagesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ValueAccessor {
+    constructor(injector, el) {
+        this.injector = injector;
+        this.el = el;
+        this.validationMessagesService = inject(ValidationMessagesService);
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.el.nativeElement.value = value;
+        this.updateValidation();
+    }
+    /**
+     * Notifies the ControlValueAccessor of a change in the value of the control.
+     *
+     * This is called by each of the ValueAccessor directives when we want to update
+     * the status and validity of the form control. For example with text components this
+     * is called when the input event is fired. For select components this is called
+     * when the change event is fired.
+     *
+     * This also updates the form status on the element by setting the 'invalid' property to true/false.
+     *
+     * @param el The component element.
+     * @param value The new value of the control.
+     */
+    handleValueChange(el, value) {
+        if (el === this.el.nativeElement) {
+            this.onChange(value);
+            this.updateValidation();
+        }
+    }
+    _handleBlurEvent(el) {
+        if (el === this.el.nativeElement) {
+            this.onTouched();
+            this.updateValidation();
+        }
+    }
+    updateValidation() {
+        nextTick(() => {
+            if (this.ngControl?.control == null)
+                return;
+            const element = this.el.nativeElement;
+            const control = this.ngControl?.control;
+            const invalid = !control.valid && control.dirty && control.touched;
+            let errorTexts;
+            if (invalid) {
+                errorTexts = this.initialErrorText || this.getErrorTexts(control);
+            }
+            element.invalid = invalid;
+            element.errorText = errorTexts ?? '';
+        });
+    }
+    setDisabledState(isDisabled) {
+        this.el.nativeElement.disabled = isDisabled;
+    }
+    ngOnDestroy() {
+        if (this.statusChanges) {
+            this.statusChanges.unsubscribe();
+        }
+    }
+    ngAfterViewInit() {
+        this.initialErrorText = this.el.nativeElement?.errorText?.trim() || undefined;
+        try {
+            this.ngControl = this.injector.get(NgControl);
+        }
+        catch {
+            /* No FormControl or ngModel binding */
+        }
+        if (!this.ngControl) {
+            return;
+        }
+        // Listen for changes in validity, disabled, or pending states
+        if (this.ngControl.statusChanges) {
+            this.statusChanges = this.ngControl.statusChanges.subscribe(() => this.updateValidation());
+        }
+        /**
+         * TODO FW-2787: Remove this in favor of https://github.com/angular/angular/issues/10887
+         * whenever it is implemented.
+         */
+        const formControl = this.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);
+                        this.updateValidation();
+                    };
+                }
+            });
+        }
+    }
+    getErrorTexts(control) {
+        if (control.errors == null) {
+            console.warn('no errors for invalid control', control);
+            return [];
+        }
+        const errorList = Object.entries(control.errors);
+        if (errorList.length <= 0) {
+            console.warn('no errors for invalid control', control);
+            return [];
+        }
+        return errorList.map((error) => {
+            const [key, value] = error;
+            return (this.validationMessagesService.getErrorMessage(getLanguage(), { key: key, ...value }) ?? key);
+        });
+    }
+}
+ValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ValueAccessor, host: { listeners: { "blur": "_handleBlurEvent($event.target)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ValueAccessor, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { _handleBlurEvent: [{
+                type: HostListener,
+                args: ['blur', ['$event.target']]
+            }] } });
+function getLanguage() {
+    const languages = ['de', 'fr', 'it', 'en'];
+    const documentLang = document.documentElement.lang;
+    if (languages.includes(documentLang)) {
+        return documentLang;
+    }
+    return 'de';
+}
+const nextTick = (h) => {
+    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+        return __zone_symbol__requestAnimationFrame(h);
+    }
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(h);
+    }
+    return setTimeout(h);
+};
+
+class TextValueAccessor extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleInputEvent(el) {
+        this.handleValueChange(el, el.value);
+    }
+}
+TextValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TextValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TextValueAccessor, selector: "six-input:not([type=number]),six-textarea", host: { listeners: { "input": "handleInputEvent($event.target)" } }, providers: [
         {
-            provide: APP_INITIALIZER,
-            useFactory: () => {
-                return defineCustomElements();
-            },
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: TextValueAccessor,
+            multi: true,
         },
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UiLibraryAngularModule, decorators: [{
-            type: NgModule,
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextValueAccessor, decorators: [{
+            type: Directive,
             args: [{
-                    declarations: [...DIRECTIVES],
-                    imports: [],
-                    exports: [...DIRECTIVES],
+                    selector: 'six-input:not([type=number]),six-textarea',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TextValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleInputEvent: [{
+                type: HostListener,
+                args: ['input', ['$event.target']]
+            }] } });
+
+class NumericValueAccessor extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleInputEvent(el) {
+        this.handleValueChange(el, el.value);
+    }
+    registerOnChange(fn) {
+        super.registerOnChange((value) => {
+            fn(value === '' ? null : parseFloat(value));
+        });
+    }
+}
+NumericValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumericValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+NumericValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NumericValueAccessor, selector: "six-input[type=number]", host: { listeners: { "input": "handleInputEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: NumericValueAccessor,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumericValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-input[type=number]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NumericValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleInputEvent: [{
+                type: HostListener,
+                args: ['input', ['$event.target']]
+            }] } });
+
+class RadioValueAccessor extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleChangeEvent(el) {
+        this.handleValueChange(el, this.value);
+    }
+    ngOnInit() {
+        this.checkName();
+    }
+    writeValue(value) {
+        this.el.nativeElement.checked = value === this.value;
+        this.updateValidation();
+    }
+    checkName() {
+        if (this.name && this.formControlName && this.name !== this.formControlName) {
+            throw new Error(`
+      If you define both a name and a formControlName attribute on your radio button, their values
+      must match. Ex: <six-input type="radio" formControlName="food" name="food">
+    `);
+        }
+        if (!this.name && this.formControlName) {
+            this.name = this.formControlName;
+            this.el.nativeElement.name = this.formControlName;
+        }
+    }
+}
+RadioValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+RadioValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: RadioValueAccessor, selector: "six-radio", inputs: { value: "value", formControlName: "formControlName", name: "name" }, host: { listeners: { "change": "handleChangeEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: RadioValueAccessor,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-radio',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: RadioValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { value: [{
+                type: Input
+            }], formControlName: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], handleChangeEvent: [{
+                type: HostListener,
+                args: ['change', ['$event.target']]
+            }] } });
+
+class DatepickerValueAccessor extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleChangeEvent(el) {
+        this.handleValueChange(el, el.value);
+    }
+}
+DatepickerValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatepickerValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DatepickerValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DatepickerValueAccessor, selector: "six-datepicker", host: { listeners: { "change": "handleChangeEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: DatepickerValueAccessor,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatepickerValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-datepicker',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: DatepickerValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleChangeEvent: [{
+                type: HostListener,
+                args: ['change', ['$event.target']]
+            }] } });
+
+/**
+ * This directive intercepts the ngSubmit event of an Angular form and introduces
+ * a supplementary event named sixSubmit. The sixSubmit event is triggered exclusively
+ * when the form is valid. In cases where the form is considered invalid, this directive
+ * takes proactive actions by marking all form controls as touched and dirty. Additionally,
+ * it shifts the focus to the initial invalid form element, facilitating quick error
+ * resolution.
+ *
+ * To utilize this directive, apply it to an Angular form.
+ * ```html
+ * <form [formGroup]="form" sixForm (sixSubmit)="onSubmit($event)">
+ *   <!-- form content -->
+ * </form>
+ * ```
+ *
+ * For users needing greater flexibility in determining when error messages are displayed,
+ * or for those who prefer not to rely solely on the form submission event,
+ * an alternative is to use the SixFormUtilDirective.
+ */
+class SixFormDirective {
+    onNgSubmit(event) {
+        if (this.formGroupDirective.invalid) {
+            focusInvalidField(this.formGroupDirective, this.elementRef);
+        }
+        else {
+            this.sixSubmit.emit(event);
+        }
+    }
+    constructor(elementRef, formGroupDirective) {
+        this.elementRef = elementRef;
+        this.formGroupDirective = formGroupDirective;
+        /**
+         * Emits an event when the form is valid and the form submission has been triggered.
+         */
+        this.sixSubmit = new EventEmitter();
+    }
+}
+SixFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixFormDirective, deps: [{ token: i0.ElementRef }, { token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Directive });
+SixFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SixFormDirective, selector: "form[sixForm]", outputs: { sixSubmit: "sixSubmit" }, host: { listeners: { "ngSubmit": "onNgSubmit($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form[sixForm]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FormGroupDirective }]; }, propDecorators: { sixSubmit: [{
+                type: Output
+            }], onNgSubmit: [{
+                type: HostListener,
+                args: ['ngSubmit', ['$event']]
+            }] } });
+/**
+ * This directive provides a utility method, that marks all form controls
+ * as touched and dirty, and focuses the first invalid form element.
+ *
+ * To utilize this directive, apply it to an Angular form.
+ * ```html
+ * <form [formGroup]="form" sixFormUtil (ngSubmit)="onSubmit($event)">
+ *   <!-- form content -->
+ * </form>
+ * ```
+ *
+ * Then, get a reference to the directive and invoke `focusInvalidField()` if the
+ * form is invalid:
+ * ```ts
+ * @ViewChild(SixFormUtilDirective) sixFormUtil!: SixFormUtilDirective;
+ * // ...
+ * onSubmit() {
+ *   if (this.form.invalid) {
+ *     this.sixFormUtil.focusInvalidField();
+ *   } else {
+ *      // ...
+ *   }
+ * }
+ * ```
+ */
+class SixFormUtilDirective {
+    constructor(elementRef, formGroupDirective) {
+        this.elementRef = elementRef;
+        this.formGroupDirective = formGroupDirective;
+    }
+    /** markAllControlsAsDirty(Object.values(formGroup.controls));
+     * Marks all form controls as touched and dirty, and focuses the first
+     * invalid form element.
+     */
+    focusInvalidField() {
+        focusInvalidField(this.formGroupDirective, this.elementRef);
+    }
+}
+SixFormUtilDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixFormUtilDirective, deps: [{ token: i0.ElementRef }, { token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Directive });
+SixFormUtilDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SixFormUtilDirective, selector: "[sixFormUtil]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixFormUtilDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sixFormUtil]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FormGroupDirective }]; } });
+function focusInvalidField(formGroupDirective, formElement) {
+    formGroupDirective.form.markAllAsTouched();
+    markAllAsDirty([formGroupDirective.form]);
+    const invalidElement = getInvalidElement(formElement.nativeElement);
+    if ('setFocus' in invalidElement && typeof invalidElement?.setFocus === 'function') {
+        invalidElement.setFocus();
+    }
+    if ('focus' in invalidElement && typeof invalidElement?.focus === 'function') {
+        invalidElement.focus();
+    }
+}
+function getInvalidElement(parent) {
+    const invalidElement = parent.querySelector('.ng-invalid');
+    if (invalidElement == null) {
+        return parent;
+    }
+    return getInvalidElement(invalidElement);
+}
+function markAllAsDirty(controls) {
+    controls.forEach((control) => {
+        if (control instanceof FormControl) {
+            control.markAsDirty({ onlySelf: true });
+        }
+        else if (control instanceof FormGroup) {
+            control.markAsDirty({ onlySelf: true });
+            markAllAsDirty(Object.values(control.controls));
+        }
+        else if (control instanceof FormArray) {
+            control.markAsDirty({ onlySelf: true });
+            markAllAsDirty(control.controls);
+        }
+    });
+}
+
+class SixUiLibraryValidators {
+    static minDate(mindate) {
+        return (control) => {
+            if (control.value == null)
+                return null;
+            const actualDate = control.value;
+            return actualDate.getTime() >= mindate.getTime() ? null : { mindate: { mindate, actual: actualDate } };
+        };
+    }
+    static maxDate(maxdate) {
+        return (control) => {
+            if (control.value == null)
+                return null;
+            const actualDate = control.value;
+            return actualDate.getTime() <= maxdate.getTime() ? null : { maxdate: { maxdate, actual: actualDate } };
+        };
+    }
+    static allowedDates(allowedDates = () => true) {
+        return (control) => {
+            if (control.value == null)
+                return null;
+            const allowed = allowedDates(control.value);
+            return allowed ? null : { invaliddate: { actual: control.value } };
+        };
+    }
+}
+class MinDateValidator {
+    validate(control) {
+        return SixUiLibraryValidators.minDate(this.mindate);
+    }
+}
+MinDateValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MinDateValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+MinDateValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: MinDateValidator, selector: "six-datepicker[min]", inputs: { mindate: "mindate" }, providers: [{ provide: NG_VALIDATORS, useExisting: MinDateValidator, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MinDateValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-datepicker[min]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: MinDateValidator, multi: true }],
+                }]
+        }], propDecorators: { mindate: [{
+                type: Input
+            }] } });
+class MaxDateValidator {
+    validate(control) {
+        return SixUiLibraryValidators.maxDate(this.maxdate);
+    }
+}
+MaxDateValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MaxDateValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+MaxDateValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: MaxDateValidator, selector: "six-datepicker[max]", inputs: { maxdate: "maxdate" }, providers: [{ provide: NG_VALIDATORS, useExisting: MaxDateValidator, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MaxDateValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-datepicker[max]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: MaxDateValidator, multi: true }],
+                }]
+        }], propDecorators: { maxdate: [{
+                type: Input
+            }] } });
+class AllowedDatesValidator {
+    constructor() {
+        this.allowedDates = () => true;
+    }
+    validate(control) {
+        return SixUiLibraryValidators.allowedDates(this.allowedDates)(control);
+    }
+}
+AllowedDatesValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AllowedDatesValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AllowedDatesValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: AllowedDatesValidator, selector: "six-datepicker[allowedDates]", inputs: { allowedDates: "allowedDates" }, providers: [{ provide: NG_VALIDATORS, useExisting: AllowedDatesValidator, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AllowedDatesValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-datepicker[allowedDates]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: AllowedDatesValidator, multi: true }],
+                }]
+        }], propDecorators: { allowedDates: [{
+                type: Input
+            }] } });
+class MinValidator {
+    validate(control) {
+        return Validators.min(toFloat(this.min))(control);
+    }
+}
+MinValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MinValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+MinValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: MinValidator, selector: "six-input[type=number][min]", inputs: { min: "min" }, providers: [{ provide: NG_VALIDATORS, useExisting: MinValidator, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MinValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-input[type=number][min]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: MinValidator, multi: true }],
+                }]
+        }], propDecorators: { min: [{
+                type: Input
+            }] } });
+class MaxValidator {
+    validate(control) {
+        return Validators.max(toFloat(this.max))(control);
+    }
+}
+MaxValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MaxValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+MaxValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: MaxValidator, selector: "six-input[type=number][max]", inputs: { max: "max" }, providers: [{ provide: NG_VALIDATORS, useExisting: MaxValidator, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MaxValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-input[type=number][max]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: MaxValidator, multi: true }],
+                }]
+        }], propDecorators: { max: [{
+                type: Input
+            }] } });
+function toFloat(value) {
+    return typeof value === 'number' ? value : parseFloat(value);
+}
+
+class SelectValueAccessor extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleChangeEvent(el) {
+        this.handleValueChange(el, el.value);
+    }
+}
+SelectValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SelectValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SelectValueAccessor, selector: "six-select", host: { listeners: { "change": "handleChangeEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: SelectValueAccessor,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-select',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SelectValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleChangeEvent: [{
+                type: HostListener,
+                args: ['change', ['$event.target']]
+            }] } });
+
+class CheckboxValueAccessor extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleChangeEvent(el) {
+        this.handleValueChange(el, el.checked);
+    }
+    writeValue(value) {
+        this.el.nativeElement.checked = value === true;
+        this.updateValidation();
+    }
+}
+CheckboxValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+CheckboxValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxValueAccessor, selector: "six-checkbox", host: { listeners: { "change": "handleChangeEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: CheckboxValueAccessor,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-checkbox',
                     providers: [
                         {
-                            provide: APP_INITIALIZER,
-                            useFactory: () => {
-                                return defineCustomElements();
-                            },
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: CheckboxValueAccessor,
+                            multi: true,
                         },
                     ],
                 }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleChangeEvent: [{
+                type: HostListener,
+                args: ['change', ['$event.target']]
+            }] } });
+
+class RangeValueAccessor extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleInputEvent(el) {
+        this.handleValueChange(el, el.value);
+    }
+    registerOnChange(fn) {
+        super.registerOnChange((value) => {
+            fn(value === '' ? null : parseFloat(value));
+        });
+    }
+}
+RangeValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RangeValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+RangeValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: RangeValueAccessor, selector: "six-range", host: { listeners: { "input": "handleInputEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: RangeValueAccessor,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RangeValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-range',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: RangeValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleInputEvent: [{
+                type: HostListener,
+                args: ['input', ['$event.target']]
+            }] } });
+
+class SwitchValueAccessor extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleChangeEvent(el) {
+        this.handleValueChange(el, el.checked);
+    }
+    writeValue(value) {
+        this.el.nativeElement.checked = value === true;
+        this.updateValidation();
+    }
+}
+SwitchValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SwitchValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SwitchValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SwitchValueAccessor, selector: "six-switch", host: { listeners: { "change": "handleChangeEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: SwitchValueAccessor,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SwitchValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-switch',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SwitchValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleChangeEvent: [{
+                type: HostListener,
+                args: ['change', ['$event.target']]
+            }] } });
+
+class TimepickerValueAccessor extends ValueAccessor {
+    constructor(injector, el) {
+        super(injector, el);
+    }
+    handleChangeEvent(el) {
+        this.handleValueChange(el, el.value);
+    }
+}
+TimepickerValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TimepickerValueAccessor, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TimepickerValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TimepickerValueAccessor, selector: "six-timepicker", host: { listeners: { "change": "handleChangeEvent($event.target)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: TimepickerValueAccessor,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TimepickerValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'six-timepicker',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TimepickerValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { handleChangeEvent: [{
+                type: HostListener,
+                args: ['change', ['$event.target']]
+            }] } });
+
+class UiLibraryAngularModule {
+    static forRoot(customValidationMessagesService) {
+        return {
+            ngModule: UiLibraryAngularModule,
+            providers: [
+                {
+                    provide: APP_INITIALIZER,
+                    useFactory: () => async () => defineCustomElements(),
+                    multi: true,
+                },
+                { provide: ValidationMessagesService, useClass: customValidationMessagesService ?? ValidationMessagesService },
+            ],
+        };
+    }
+}
+UiLibraryAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UiLibraryAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UiLibraryAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: UiLibraryAngularModule, declarations: [SetAttributes, SixAlert, SixAvatar, SixBadge, SixButton, SixCard, SixCheckbox, SixDatepicker, SixDetails, SixDialog, SixDrawer, SixDropdown, SixError, SixErrorPage, SixFileList, SixFileListItem, SixFileUpload, SixFooter, SixGroupLabel, SixHeader, SixIcon, SixIconButton, SixInput, SixItemPicker, SixLanguageSwitcher, SixLayoutGrid, SixMainContainer, SixMenu, SixMenuDivider, SixMenuItem, SixMenuLabel, SixPicto, SixProgressBar, SixProgressRing, SixRadio, SixRange, SixRoot, SixSearchField, SixSelect, SixSidebar, SixSidebarItem, SixSidebarItemGroup, SixSpinner, SixStageIndicator, SixSwitch, SixTab, SixTabGroup, SixTabPanel, SixTag, SixTextarea, SixTile, SixTimepicker, SixTooltip, 
+        // value accessors
+        TextValueAccessor,
+        NumericValueAccessor,
+        RadioValueAccessor,
+        DatepickerValueAccessor,
+        TimepickerValueAccessor,
+        SelectValueAccessor,
+        CheckboxValueAccessor,
+        SwitchValueAccessor,
+        RangeValueAccessor,
+        // validators
+        MinValidator,
+        MaxValidator,
+        MinDateValidator,
+        MaxDateValidator,
+        AllowedDatesValidator,
+        // form helpers
+        SixFormDirective,
+        SixFormUtilDirective], exports: [SetAttributes, SixAlert, SixAvatar, SixBadge, SixButton, SixCard, SixCheckbox, SixDatepicker, SixDetails, SixDialog, SixDrawer, SixDropdown, SixError, SixErrorPage, SixFileList, SixFileListItem, SixFileUpload, SixFooter, SixGroupLabel, SixHeader, SixIcon, SixIconButton, SixInput, SixItemPicker, SixLanguageSwitcher, SixLayoutGrid, SixMainContainer, SixMenu, SixMenuDivider, SixMenuItem, SixMenuLabel, SixPicto, SixProgressBar, SixProgressRing, SixRadio, SixRange, SixRoot, SixSearchField, SixSelect, SixSidebar, SixSidebarItem, SixSidebarItemGroup, SixSpinner, SixStageIndicator, SixSwitch, SixTab, SixTabGroup, SixTabPanel, SixTag, SixTextarea, SixTile, SixTimepicker, SixTooltip, 
+        // value accessors
+        TextValueAccessor,
+        NumericValueAccessor,
+        RadioValueAccessor,
+        DatepickerValueAccessor,
+        TimepickerValueAccessor,
+        SelectValueAccessor,
+        CheckboxValueAccessor,
+        SwitchValueAccessor,
+        RangeValueAccessor,
+        // validators
+        MinValidator,
+        MaxValidator,
+        MinDateValidator,
+        MaxDateValidator,
+        AllowedDatesValidator,
+        // form helpers
+        SixFormDirective,
+        SixFormUtilDirective] });
+UiLibraryAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UiLibraryAngularModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UiLibraryAngularModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        // proxies
+                        ...DIRECTIVES,
+                        // value accessors
+                        TextValueAccessor,
+                        NumericValueAccessor,
+                        RadioValueAccessor,
+                        DatepickerValueAccessor,
+                        TimepickerValueAccessor,
+                        SelectValueAccessor,
+                        CheckboxValueAccessor,
+                        SwitchValueAccessor,
+                        RangeValueAccessor,
+                        // validators
+                        MinValidator,
+                        MaxValidator,
+                        MinDateValidator,
+                        MaxDateValidator,
+                        AllowedDatesValidator,
+                        // form helpers
+                        SixFormDirective,
+                        SixFormUtilDirective,
+                    ],
+                    imports: [],
+                    exports: [
+                        // proxies
+                        ...DIRECTIVES,
+                        // value accessors
+                        TextValueAccessor,
+                        NumericValueAccessor,
+                        RadioValueAccessor,
+                        DatepickerValueAccessor,
+                        TimepickerValueAccessor,
+                        SelectValueAccessor,
+                        CheckboxValueAccessor,
+                        SwitchValueAccessor,
+                        RangeValueAccessor,
+                        // validators
+                        MinValidator,
+                        MaxValidator,
+                        MinDateValidator,
+                        MaxDateValidator,
+                        AllowedDatesValidator,
+                        // form helpers
+                        SixFormDirective,
+                        SixFormUtilDirective,
+                    ],
+                }]
         }] });
 
 /*
@@ -1464,5 +2279,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DIRECTIVES, SetAttributes, SixAlert, SixAvatar, SixBadge, SixButton, SixCard, SixCheckbox, SixDatepicker, SixDetails, SixDialog, SixDrawer, SixDropdown, SixErrorPage, SixFileList, SixFileListItem, SixFileUpload, SixFooter, SixForm, SixGroupLabel, SixHeader, SixIcon, SixIconButton, SixInput, SixItemPicker, SixLanguageSwitcher, SixLayoutGrid, SixMainContainer, SixMenu, SixMenuDivider, SixMenuItem, SixMenuLabel, SixPicto, SixProgressBar, SixProgressRing, SixRadio, SixRange, SixRoot, SixSearchField, SixSelect, SixSidebar, SixSidebarItem, SixSidebarItemGroup, SixSpinner, SixStageIndicator, SixSwitch, SixTab, SixTabGroup, SixTabPanel, SixTag, SixTextarea, SixTile, SixTimepicker, SixTooltip, UiLibraryAngularModule };
+export { AllowedDatesValidator, CheckboxValueAccessor, DIRECTIVES, DatepickerValueAccessor, MaxDateValidator, MaxValidator, MinDateValidator, MinValidator, NumericValueAccessor, RadioValueAccessor, RangeValueAccessor, SelectValueAccessor, SetAttributes, SixAlert, SixAvatar, SixBadge, SixButton, SixCard, SixCheckbox, SixDatepicker, SixDetails, SixDialog, SixDrawer, SixDropdown, SixError, SixErrorPage, SixFileList, SixFileListItem, SixFileUpload, SixFooter, SixFormDirective, SixFormUtilDirective, SixGroupLabel, SixHeader, SixIcon, SixIconButton, SixInput, SixItemPicker, SixLanguageSwitcher, SixLayoutGrid, SixMainContainer, SixMenu, SixMenuDivider, SixMenuItem, SixMenuLabel, SixPicto, SixProgressBar, SixProgressRing, SixRadio, SixRange, SixRoot, SixSearchField, SixSelect, SixSidebar, SixSidebarItem, SixSidebarItemGroup, SixSpinner, SixStageIndicator, SixSwitch, SixTab, SixTabGroup, SixTabPanel, SixTag, SixTextarea, SixTile, SixTimepicker, SixTooltip, SixUiLibraryValidators, SwitchValueAccessor, TextValueAccessor, TimepickerValueAccessor, UiLibraryAngularModule, ValidationMessagesService, ValueAccessor };
 //# sourceMappingURL=six-group-ui-library-angular.mjs.map