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

package/lib/control-value-accessors/checkbox-value-accessor.d.ts

@@ -0,0 +1,10 @@
+import { ElementRef, Injector } from '@angular/core';
+import { ValueAccessor } from './value-accessor';
+import * as i0 from "@angular/core";
+export declare class CheckboxValueAccessor extends ValueAccessor {
+    constructor(injector: Injector, el: ElementRef);
+    handleChangeEvent(el: HTMLSixCheckboxElement): void;
+    writeValue(value: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CheckboxValueAccessor, "six-checkbox", never, {}, {}, never, never, false, never>;
+}

package/lib/control-value-accessors/datepicker-value-accessor.d.ts

@@ -0,0 +1,9 @@
+import { ElementRef, Injector } from '@angular/core';
+import { ValueAccessor } from './value-accessor';
+import * as i0 from "@angular/core";
+export declare class DatepickerValueAccessor extends ValueAccessor {
+    constructor(injector: Injector, el: ElementRef);
+    handleChangeEvent(el: HTMLSixDatepickerElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatepickerValueAccessor, "six-datepicker", never, {}, {}, never, never, false, never>;
+}

package/lib/control-value-accessors/numeric-value-accessor.d.ts

@@ -0,0 +1,10 @@
+import { ElementRef, Injector } from '@angular/core';
+import { ValueAccessor } from './value-accessor';
+import * as i0 from "@angular/core";
+export declare class NumericValueAccessor extends ValueAccessor {
+    constructor(injector: Injector, el: ElementRef);
+    handleInputEvent(el: HTMLSixInputElement): void;
+    registerOnChange(fn: (_: number | null) => void): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NumericValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NumericValueAccessor, "six-input[type=number]", never, {}, {}, never, never, false, never>;
+}

package/lib/control-value-accessors/radio-value-accessor.d.ts

@@ -0,0 +1,15 @@
+import { ElementRef, Injector, OnInit } from '@angular/core';
+import { ValueAccessor } from './value-accessor';
+import * as i0 from "@angular/core";
+export declare class RadioValueAccessor extends ValueAccessor implements OnInit {
+    constructor(injector: Injector, el: ElementRef);
+    value: any;
+    formControlName?: string;
+    name?: string;
+    handleChangeEvent(el: HTMLSixRadioElement): void;
+    ngOnInit(): void;
+    writeValue(value: any): void;
+    private checkName;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RadioValueAccessor, "six-radio", never, { "value": "value"; "formControlName": "formControlName"; "name": "name"; }, {}, never, never, false, never>;
+}

package/lib/control-value-accessors/range-value-accessor.d.ts

@@ -0,0 +1,10 @@
+import { ElementRef, Injector } from '@angular/core';
+import { ValueAccessor } from './value-accessor';
+import * as i0 from "@angular/core";
+export declare class RangeValueAccessor extends ValueAccessor {
+    constructor(injector: Injector, el: ElementRef);
+    handleInputEvent(el: HTMLSixRangeElement): void;
+    registerOnChange(fn: (_: number | null) => void): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RangeValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RangeValueAccessor, "six-range", never, {}, {}, never, never, false, never>;
+}

package/lib/control-value-accessors/select-value-accessor.d.ts

@@ -0,0 +1,9 @@
+import { ElementRef, Injector } from '@angular/core';
+import { ValueAccessor } from './value-accessor';
+import * as i0 from "@angular/core";
+export declare class SelectValueAccessor extends ValueAccessor {
+    constructor(injector: Injector, el: ElementRef);
+    handleChangeEvent(el: HTMLSixSelectElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectValueAccessor, "six-select", never, {}, {}, never, never, false, never>;
+}

package/lib/control-value-accessors/switch-value-accessor.d.ts

@@ -0,0 +1,10 @@
+import { ElementRef, Injector } from '@angular/core';
+import { ValueAccessor } from './value-accessor';
+import * as i0 from "@angular/core";
+export declare class SwitchValueAccessor extends ValueAccessor {
+    constructor(injector: Injector, el: ElementRef);
+    handleChangeEvent(el: HTMLSixSwitchElement): void;
+    writeValue(value: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SwitchValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SwitchValueAccessor, "six-switch", never, {}, {}, never, never, false, never>;
+}

package/lib/control-value-accessors/text-value-accessor.d.ts

@@ -0,0 +1,9 @@
+import { ElementRef, Injector } from '@angular/core';
+import { ValueAccessor } from './value-accessor';
+import * as i0 from "@angular/core";
+export declare class TextValueAccessor extends ValueAccessor {
+    constructor(injector: Injector, el: ElementRef);
+    handleInputEvent(el: HTMLSixInputElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TextValueAccessor, "six-input:not([type=number]),six-textarea", never, {}, {}, never, never, false, never>;
+}

package/lib/control-value-accessors/timepicker-value-accessor.d.ts

@@ -0,0 +1,9 @@
+import { ElementRef, Injector } from '@angular/core';
+import { ValueAccessor } from './value-accessor';
+import * as i0 from "@angular/core";
+export declare class TimepickerValueAccessor extends ValueAccessor {
+    constructor(injector: Injector, el: ElementRef);
+    handleChangeEvent(el: HTMLSixTimepickerElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimepickerValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TimepickerValueAccessor, "six-timepicker", never, {}, {}, never, never, false, never>;
+}

package/lib/control-value-accessors/value-accessor.d.ts

@@ -0,0 +1,39 @@
+import { AfterViewInit, ElementRef, Injector, OnDestroy } from '@angular/core';
+import { AbstractControl, ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    protected injector: Injector;
+    protected el: ElementRef;
+    private statusChanges?;
+    private ngControl?;
+    private initialErrorText?;
+    private validationMessagesService;
+    constructor(injector: Injector, el: ElementRef);
+    private onChange;
+    private onTouched;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    writeValue(value: any): void;
+    /**
+     * 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: HTMLElement, value: any): void;
+    _handleBlurEvent(el: any): void;
+    updateValidation(): void;
+    setDisabledState(isDisabled: boolean): void;
+    ngOnDestroy(): void;
+    ngAfterViewInit(): void;
+    getErrorTexts(control: AbstractControl): string[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ValueAccessor, never, never, {}, {}, never, never, false, never>;
+}

package/lib/form/six-form.directive.d.ts

@@ -0,0 +1,71 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import { FormGroupDirective } from '@angular/forms';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export declare class SixFormDirective {
+    private elementRef;
+    private formGroupDirective;
+    /**
+     * Emits an event when the form is valid and the form submission has been triggered.
+     */
+    sixSubmit: EventEmitter<SubmitEvent>;
+    onNgSubmit(event: SubmitEvent): void;
+    constructor(elementRef: ElementRef<HTMLElement>, formGroupDirective: FormGroupDirective);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SixFormDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SixFormDirective, "form[sixForm]", never, {}, { "sixSubmit": "sixSubmit"; }, never, never, false, never>;
+}
+/**
+ * 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 {
+ *      // ...
+ *   }
+ * }
+ * ```
+ */
+export declare class SixFormUtilDirective {
+    private elementRef;
+    private formGroupDirective;
+    constructor(elementRef: ElementRef<HTMLElement>, formGroupDirective: FormGroupDirective);
+    /** markAllControlsAsDirty(Object.values(formGroup.controls));
+     * Marks all form controls as touched and dirty, and focuses the first
+     * invalid form element.
+     */
+    focusInvalidField(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SixFormUtilDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SixFormUtilDirective, "[sixFormUtil]", never, {}, {}, never, never, false, never>;
+}

package/lib/services/validation-messages.service.d.ts

@@ -0,0 +1,7 @@
+import { Language, ValidationError } from '@six-group/ui-library';
+import * as i0 from "@angular/core";
+export declare class ValidationMessagesService {
+    getErrorMessage(language: Language, error: ValidationError): string | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValidationMessagesService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ValidationMessagesService>;
+}

package/lib/stencil-generated/components.d.ts

@@ -16,9 +16,6 @@ import type { SixFileListDownloadPayload as ISixFileListItemSixFileListDownloadP
 import type { SixFileListRemovePayload as ISixFileListItemSixFileListRemovePayload } from '@six-group/ui-library';
 import type { SixFileUploadSuccessPayload as ISixFileUploadSixFileUploadSuccessPayload } from '@six-group/ui-library';
 import type { SixFileUploadFailurePayload as ISixFileUploadSixFileUploadFailurePayload } from '@six-group/ui-library';
-import type { SixFormSubmitPayload as ISixFormSixFormSubmitPayload } from '@six-group/ui-library';
-import type { SixFormChangePayload as ISixFormSixFormChangePayload } from '@six-group/ui-library';
-import type { EmptyPayload as ISixFormEmptyPayload } from '@six-group/ui-library';
 import type { EmptyPayload as ISixHeaderEmptyPayload } from '@six-group/ui-library';
 import type { SixHeaderAppSwitcherSelectPayload as ISixHeaderSixHeaderAppSwitcherSelectPayload } from '@six-group/ui-library';
 import type { SixHeaderProfileSelectPayload as ISixHeaderSixHeaderProfileSelectPayload } from '@six-group/ui-library';
@@ -128,7 +125,7 @@ export declare class SixCheckbox {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<SixCheckbox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SixCheckbox, "six-checkbox", never, { "checked": "checked"; "disabled": "disabled"; "errorOnBlur": "errorOnBlur"; "errorText": "errorText"; "indeterminate": "indeterminate"; "invalid": "invalid"; "label": "label"; "name": "name"; "required": "required"; "value": "value"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SixCheckbox, "six-checkbox", never, { "checked": "checked"; "disabled": "disabled"; "errorText": "errorText"; "errorTextCount": "errorTextCount"; "indeterminate": "indeterminate"; "invalid": "invalid"; "label": "label"; "name": "name"; "required": "required"; "value": "value"; }, {}, never, ["*"], false, never>;
 }
 export declare interface SixCheckbox extends Components.SixCheckbox {
     /**
@@ -149,7 +146,7 @@ export declare class SixDatepicker {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<SixDatepicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SixDatepicker, "six-datepicker", never, { "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"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SixDatepicker, "six-datepicker", never, { "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"; }, {}, never, ["*"], false, never>;
 }
 export declare interface SixDatepicker extends Components.SixDatepicker {
     /**
@@ -295,6 +292,15 @@ export declare interface SixDropdown extends Components.SixDropdown {
      */
     'six-dropdown-scroll': EventEmitter<CustomEvent<ISixDropdownSixDropdownScrollPayload>>;
 }
+export declare class SixError {
+    protected z: NgZone;
+    protected el: HTMLElement;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SixError, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SixError, "six-error", never, {}, {}, never, ["*"], false, never>;
+}
+export declare interface SixError extends Components.SixError {
+}
 export declare class SixErrorPage {
     protected z: NgZone;
     protected el: HTMLElement;
@@ -356,30 +362,6 @@ export declare class SixFooter {
 }
 export declare interface SixFooter extends Components.SixFooter {
 }
-export declare class SixForm {
-    protected z: NgZone;
-    protected el: HTMLElement;
-    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
-    static ɵfac: i0.ɵɵFactoryDeclaration<SixForm, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SixForm, "six-form", never, { "novalidate": "novalidate"; }, {}, never, ["*"], false, never>;
-}
-export declare interface SixForm extends Components.SixForm {
-    /**
-     * Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an
-  invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this
-  event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional
-  around the XHR request you use to submit the form's data with.
-     */
-    'six-form-submit': EventEmitter<CustomEvent<ISixFormSixFormSubmitPayload>>;
-    /**
-     * Emitted when the control's value changes.
-     */
-    'six-form-change': EventEmitter<CustomEvent<ISixFormSixFormChangePayload>>;
-    /**
-     * Emitted when the forms values are reset.
-     */
-    'six-form-reset': EventEmitter<CustomEvent<ISixFormEmptyPayload>>;
-}
 export declare class SixGroupLabel {
     protected z: NgZone;
     protected el: HTMLElement;
@@ -445,7 +427,7 @@ export declare class SixInput {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<SixInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SixInput, "six-input", never, { "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"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SixInput, "six-input", never, { "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"; }, {}, never, ["*"], false, never>;
 }
 export declare interface SixInput extends Components.SixInput {
     /**
@@ -468,14 +450,6 @@ export declare interface SixInput extends Components.SixInput {
      * Emitted when the control loses focus. Access the new value via event.target.value.
      */
     'six-input-blur': EventEmitter<CustomEvent<ISixInputEmptyPayload>>;
-    /**
-     * Emitted whenever the value changes. Access the new value via event.target.value.
-  six-input-value-change will emit whenever the value changes.
-  So be it on input or when dynamically set. six-input-input will only be emitted when the user enters data,
-  but not when a value is dynamically set. six-input-change will only be emitted when the user either presses enter
-  or leaves the input field after entering some data.
-     */
-    'six-input-value-change': EventEmitter<CustomEvent<ISixInputEmptyPayload>>;
 }
 export declare class SixItemPicker {
     protected z: NgZone;
@@ -618,7 +592,7 @@ export declare class SixRange {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<SixRange, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SixRange, "six-range", never, { "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"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SixRange, "six-range", never, { "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"; }, {}, never, ["*"], false, never>;
 }
 export declare interface SixRange extends Components.SixRange {
     /**
@@ -665,7 +639,7 @@ export declare class SixSelect {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<SixSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SixSelect, "six-select", never, { "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"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SixSelect, "six-select", never, { "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"; }, {}, never, ["*"], false, never>;
 }
 export declare interface SixSelect extends Components.SixSelect {
     /**
@@ -752,7 +726,7 @@ export declare class SixSwitch {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<SixSwitch, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SixSwitch, "six-switch", never, { "checked": "checked"; "disabled": "disabled"; "invalid": "invalid"; "name": "name"; "required": "required"; "value": "value"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SixSwitch, "six-switch", never, { "checked": "checked"; "disabled": "disabled"; "errorText": "errorText"; "errorTextCount": "errorTextCount"; "invalid": "invalid"; "label": "label"; "name": "name"; "required": "required"; "value": "value"; }, {}, never, ["*"], false, never>;
 }
 export declare interface SixSwitch extends Components.SixSwitch {
     /**
@@ -825,7 +799,7 @@ export declare class SixTextarea {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<SixTextarea, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SixTextarea, "six-textarea", never, { "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"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SixTextarea, "six-textarea", never, { "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"; }, {}, never, ["*"], false, never>;
 }
 export declare interface SixTextarea extends Components.SixTextarea {
     /**
@@ -844,14 +818,6 @@ export declare interface SixTextarea extends Components.SixTextarea {
      * Emitted when the control loses focus. Access the new value via event.target.value.
      */
     'six-textarea-blur': EventEmitter<CustomEvent<ISixTextareaEmptyPayload>>;
-    /**
-     * Emitted whenever the value changes. Access the new value via event.target.value.
-  six-textarea-value-change will emit whenever the value changes.
-  So be it on textarea or when dynamically set. six-textarea-input will only be emitted when the user enters data,
-  but not when a value is dynamically set. six-textarea-change will only be emitted when the user either presses enter
-  or leaves the textarea field after entering some data.
-     */
-    'six-textarea-value-change': EventEmitter<CustomEvent<ISixTextareaEmptyPayload>>;
 }
 export declare class SixTile {
     protected z: NgZone;
@@ -875,7 +841,7 @@ export declare class SixTimepicker {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<SixTimepicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SixTimepicker, "six-timepicker", never, { "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"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SixTimepicker, "six-timepicker", never, { "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"; }, {}, never, ["*"], false, never>;
 }
 export declare interface SixTimepicker extends Components.SixTimepicker {
     /**

package/lib/stencil-generated/index.d.ts

@@ -1,2 +1,2 @@
 import * as d from './components';
-export declare const DIRECTIVES: (typeof d.SetAttributes | typeof d.SixAlert | typeof d.SixAvatar | typeof d.SixBadge | typeof d.SixButton | typeof d.SixCard | typeof d.SixCheckbox | typeof d.SixDatepicker | typeof d.SixDetails | typeof d.SixDialog | typeof d.SixDrawer | typeof d.SixDropdown | typeof d.SixErrorPage | typeof d.SixFileList | typeof d.SixFileListItem | typeof d.SixFileUpload | typeof d.SixFooter | typeof d.SixForm | typeof d.SixGroupLabel | typeof d.SixHeader | typeof d.SixIcon | typeof d.SixIconButton | typeof d.SixInput | typeof d.SixItemPicker | typeof d.SixLanguageSwitcher | typeof d.SixLayoutGrid | typeof d.SixMainContainer | typeof d.SixMenu | typeof d.SixMenuDivider | typeof d.SixMenuItem | typeof d.SixMenuLabel | typeof d.SixPicto | typeof d.SixProgressBar | typeof d.SixProgressRing | typeof d.SixRadio | typeof d.SixRange | typeof d.SixRoot | typeof d.SixSearchField | typeof d.SixSelect | typeof d.SixSidebar | typeof d.SixSidebarItem | typeof d.SixSidebarItemGroup | typeof d.SixSpinner | typeof d.SixStageIndicator | typeof d.SixSwitch | typeof d.SixTab | typeof d.SixTabGroup | typeof d.SixTabPanel | typeof d.SixTag | typeof d.SixTextarea | typeof d.SixTile | typeof d.SixTimepicker | typeof d.SixTooltip)[];
+export declare const DIRECTIVES: (typeof d.SetAttributes | typeof d.SixAlert | typeof d.SixAvatar | typeof d.SixBadge | typeof d.SixButton | typeof d.SixCard | typeof d.SixCheckbox | typeof d.SixDatepicker | typeof d.SixDetails | typeof d.SixDialog | typeof d.SixDrawer | typeof d.SixDropdown | typeof d.SixError | typeof d.SixErrorPage | typeof d.SixFileList | typeof d.SixFileListItem | typeof d.SixFileUpload | typeof d.SixFooter | typeof d.SixGroupLabel | typeof d.SixHeader | typeof d.SixIcon | typeof d.SixIconButton | typeof d.SixInput | typeof d.SixItemPicker | typeof d.SixLanguageSwitcher | typeof d.SixLayoutGrid | typeof d.SixMainContainer | typeof d.SixMenu | typeof d.SixMenuDivider | typeof d.SixMenuItem | typeof d.SixMenuLabel | typeof d.SixPicto | typeof d.SixProgressBar | typeof d.SixProgressRing | typeof d.SixRadio | typeof d.SixRange | typeof d.SixRoot | typeof d.SixSearchField | typeof d.SixSelect | typeof d.SixSidebar | typeof d.SixSidebarItem | typeof d.SixSidebarItemGroup | typeof d.SixSpinner | typeof d.SixStageIndicator | typeof d.SixSwitch | typeof d.SixTab | typeof d.SixTabGroup | typeof d.SixTabPanel | typeof d.SixTag | typeof d.SixTextarea | typeof d.SixTile | typeof d.SixTimepicker | typeof d.SixTooltip)[];

package/lib/ui-library-angular.module.d.ts

@@ -1,7 +1,21 @@
+import { ModuleWithProviders, Type } from '@angular/core';
+import { ValidationMessagesService } from './services/validation-messages.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./stencil-generated/components";
+import * as i2 from "./control-value-accessors/text-value-accessor";
+import * as i3 from "./control-value-accessors/numeric-value-accessor";
+import * as i4 from "./control-value-accessors/radio-value-accessor";
+import * as i5 from "./control-value-accessors/datepicker-value-accessor";
+import * as i6 from "./control-value-accessors/timepicker-value-accessor";
+import * as i7 from "./control-value-accessors/select-value-accessor";
+import * as i8 from "./control-value-accessors/checkbox-value-accessor";
+import * as i9 from "./control-value-accessors/switch-value-accessor";
+import * as i10 from "./control-value-accessors/range-value-accessor";
+import * as i11 from "./validators/six-ui-library-validators";
+import * as i12 from "./form/six-form.directive";
 export declare class UiLibraryAngularModule {
+    static forRoot<T extends ValidationMessagesService>(customValidationMessagesService?: Type<T>): ModuleWithProviders<UiLibraryAngularModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiLibraryAngularModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UiLibraryAngularModule, [typeof i1.SetAttributes, typeof i1.SixAlert, typeof i1.SixAvatar, typeof i1.SixBadge, typeof i1.SixButton, typeof i1.SixCard, typeof i1.SixCheckbox, typeof i1.SixDatepicker, typeof i1.SixDetails, typeof i1.SixDialog, typeof i1.SixDrawer, typeof i1.SixDropdown, typeof i1.SixErrorPage, typeof i1.SixFileList, typeof i1.SixFileListItem, typeof i1.SixFileUpload, typeof i1.SixFooter, typeof i1.SixForm, typeof i1.SixGroupLabel, typeof i1.SixHeader, typeof i1.SixIcon, typeof i1.SixIconButton, typeof i1.SixInput, typeof i1.SixItemPicker, typeof i1.SixLanguageSwitcher, typeof i1.SixLayoutGrid, typeof i1.SixMainContainer, typeof i1.SixMenu, typeof i1.SixMenuDivider, typeof i1.SixMenuItem, typeof i1.SixMenuLabel, typeof i1.SixPicto, typeof i1.SixProgressBar, typeof i1.SixProgressRing, typeof i1.SixRadio, typeof i1.SixRange, typeof i1.SixRoot, typeof i1.SixSearchField, typeof i1.SixSelect, typeof i1.SixSidebar, typeof i1.SixSidebarItem, typeof i1.SixSidebarItemGroup, typeof i1.SixSpinner, typeof i1.SixStageIndicator, typeof i1.SixSwitch, typeof i1.SixTab, typeof i1.SixTabGroup, typeof i1.SixTabPanel, typeof i1.SixTag, typeof i1.SixTextarea, typeof i1.SixTile, typeof i1.SixTimepicker, typeof i1.SixTooltip], never, [typeof i1.SetAttributes, typeof i1.SixAlert, typeof i1.SixAvatar, typeof i1.SixBadge, typeof i1.SixButton, typeof i1.SixCard, typeof i1.SixCheckbox, typeof i1.SixDatepicker, typeof i1.SixDetails, typeof i1.SixDialog, typeof i1.SixDrawer, typeof i1.SixDropdown, typeof i1.SixErrorPage, typeof i1.SixFileList, typeof i1.SixFileListItem, typeof i1.SixFileUpload, typeof i1.SixFooter, typeof i1.SixForm, typeof i1.SixGroupLabel, typeof i1.SixHeader, typeof i1.SixIcon, typeof i1.SixIconButton, typeof i1.SixInput, typeof i1.SixItemPicker, typeof i1.SixLanguageSwitcher, typeof i1.SixLayoutGrid, typeof i1.SixMainContainer, typeof i1.SixMenu, typeof i1.SixMenuDivider, typeof i1.SixMenuItem, typeof i1.SixMenuLabel, typeof i1.SixPicto, typeof i1.SixProgressBar, typeof i1.SixProgressRing, typeof i1.SixRadio, typeof i1.SixRange, typeof i1.SixRoot, typeof i1.SixSearchField, typeof i1.SixSelect, typeof i1.SixSidebar, typeof i1.SixSidebarItem, typeof i1.SixSidebarItemGroup, typeof i1.SixSpinner, typeof i1.SixStageIndicator, typeof i1.SixSwitch, typeof i1.SixTab, typeof i1.SixTabGroup, typeof i1.SixTabPanel, typeof i1.SixTag, typeof i1.SixTextarea, typeof i1.SixTile, typeof i1.SixTimepicker, typeof i1.SixTooltip]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UiLibraryAngularModule, [typeof i1.SetAttributes, typeof i1.SixAlert, typeof i1.SixAvatar, typeof i1.SixBadge, typeof i1.SixButton, typeof i1.SixCard, typeof i1.SixCheckbox, typeof i1.SixDatepicker, typeof i1.SixDetails, typeof i1.SixDialog, typeof i1.SixDrawer, typeof i1.SixDropdown, typeof i1.SixError, typeof i1.SixErrorPage, typeof i1.SixFileList, typeof i1.SixFileListItem, typeof i1.SixFileUpload, typeof i1.SixFooter, typeof i1.SixGroupLabel, typeof i1.SixHeader, typeof i1.SixIcon, typeof i1.SixIconButton, typeof i1.SixInput, typeof i1.SixItemPicker, typeof i1.SixLanguageSwitcher, typeof i1.SixLayoutGrid, typeof i1.SixMainContainer, typeof i1.SixMenu, typeof i1.SixMenuDivider, typeof i1.SixMenuItem, typeof i1.SixMenuLabel, typeof i1.SixPicto, typeof i1.SixProgressBar, typeof i1.SixProgressRing, typeof i1.SixRadio, typeof i1.SixRange, typeof i1.SixRoot, typeof i1.SixSearchField, typeof i1.SixSelect, typeof i1.SixSidebar, typeof i1.SixSidebarItem, typeof i1.SixSidebarItemGroup, typeof i1.SixSpinner, typeof i1.SixStageIndicator, typeof i1.SixSwitch, typeof i1.SixTab, typeof i1.SixTabGroup, typeof i1.SixTabPanel, typeof i1.SixTag, typeof i1.SixTextarea, typeof i1.SixTile, typeof i1.SixTimepicker, typeof i1.SixTooltip, typeof i2.TextValueAccessor, typeof i3.NumericValueAccessor, typeof i4.RadioValueAccessor, typeof i5.DatepickerValueAccessor, typeof i6.TimepickerValueAccessor, typeof i7.SelectValueAccessor, typeof i8.CheckboxValueAccessor, typeof i9.SwitchValueAccessor, typeof i10.RangeValueAccessor, typeof i11.MinValidator, typeof i11.MaxValidator, typeof i11.MinDateValidator, typeof i11.MaxDateValidator, typeof i11.AllowedDatesValidator, typeof i12.SixFormDirective, typeof i12.SixFormUtilDirective], never, [typeof i1.SetAttributes, typeof i1.SixAlert, typeof i1.SixAvatar, typeof i1.SixBadge, typeof i1.SixButton, typeof i1.SixCard, typeof i1.SixCheckbox, typeof i1.SixDatepicker, typeof i1.SixDetails, typeof i1.SixDialog, typeof i1.SixDrawer, typeof i1.SixDropdown, typeof i1.SixError, typeof i1.SixErrorPage, typeof i1.SixFileList, typeof i1.SixFileListItem, typeof i1.SixFileUpload, typeof i1.SixFooter, typeof i1.SixGroupLabel, typeof i1.SixHeader, typeof i1.SixIcon, typeof i1.SixIconButton, typeof i1.SixInput, typeof i1.SixItemPicker, typeof i1.SixLanguageSwitcher, typeof i1.SixLayoutGrid, typeof i1.SixMainContainer, typeof i1.SixMenu, typeof i1.SixMenuDivider, typeof i1.SixMenuItem, typeof i1.SixMenuLabel, typeof i1.SixPicto, typeof i1.SixProgressBar, typeof i1.SixProgressRing, typeof i1.SixRadio, typeof i1.SixRange, typeof i1.SixRoot, typeof i1.SixSearchField, typeof i1.SixSelect, typeof i1.SixSidebar, typeof i1.SixSidebarItem, typeof i1.SixSidebarItemGroup, typeof i1.SixSpinner, typeof i1.SixStageIndicator, typeof i1.SixSwitch, typeof i1.SixTab, typeof i1.SixTabGroup, typeof i1.SixTabPanel, typeof i1.SixTag, typeof i1.SixTextarea, typeof i1.SixTile, typeof i1.SixTimepicker, typeof i1.SixTooltip, typeof i2.TextValueAccessor, typeof i3.NumericValueAccessor, typeof i4.RadioValueAccessor, typeof i5.DatepickerValueAccessor, typeof i6.TimepickerValueAccessor, typeof i7.SelectValueAccessor, typeof i8.CheckboxValueAccessor, typeof i9.SwitchValueAccessor, typeof i10.RangeValueAccessor, typeof i11.MinValidator, typeof i11.MaxValidator, typeof i11.MinDateValidator, typeof i11.MaxDateValidator, typeof i11.AllowedDatesValidator, typeof i12.SixFormDirective, typeof i12.SixFormUtilDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<UiLibraryAngularModule>;
 }

package/lib/validators/six-ui-library-validators.d.ts

@@ -0,0 +1,47 @@
+import { AbstractControl, Validator, ValidatorFn } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class SixUiLibraryValidators {
+    static minDate(mindate: Date): ValidatorFn;
+    static maxDate(maxdate: Date): ValidatorFn;
+    static allowedDates(allowedDates?: (date: Date) => boolean): ValidatorFn;
+}
+export declare class MinDateValidator implements Validator {
+    mindate: Date;
+    validate(control: AbstractControl): {
+        [key: string]: any;
+    } | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MinDateValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MinDateValidator, "six-datepicker[min]", never, { "mindate": "mindate"; }, {}, never, never, false, never>;
+}
+export declare class MaxDateValidator implements Validator {
+    maxdate: Date;
+    validate(control: AbstractControl): {
+        [key: string]: any;
+    } | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MaxDateValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MaxDateValidator, "six-datepicker[max]", never, { "maxdate": "maxdate"; }, {}, never, never, false, never>;
+}
+export declare class AllowedDatesValidator implements Validator {
+    allowedDates: (date: Date) => boolean;
+    validate(control: AbstractControl): {
+        [key: string]: any;
+    } | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AllowedDatesValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AllowedDatesValidator, "six-datepicker[allowedDates]", never, { "allowedDates": "allowedDates"; }, {}, never, never, false, never>;
+}
+export declare class MinValidator implements Validator {
+    min: number | string;
+    validate(control: AbstractControl): {
+        [key: string]: any;
+    } | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MinValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MinValidator, "six-input[type=number][min]", never, { "min": "min"; }, {}, never, never, false, never>;
+}
+export declare class MaxValidator implements Validator {
+    max: number | string;
+    validate(control: AbstractControl): {
+        [key: string]: any;
+    } | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MaxValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MaxValidator, "six-input[type=number][max]", never, { "max": "max"; }, {}, never, never, false, never>;
+}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@six-group/ui-library-angular",
-  "version": "0.0.0-insider.ebd822a",
+  "version": "0.0.0-insider.f24090c",
+  "description": "Angular wrapper components for @six-group/ui-library",
   "private": false,
   "peerDependencies": {
-    "@angular/common": "^15.2.0",
-    "@angular/core": "^15.2.0",
+    "@angular/common": ">=14.0.0",
+    "@angular/core": ">=14.0.0",
     "@six-group/ui-library": "*"
   },
   "dependencies": {

package/public-api.d.ts

@@ -1,3 +1,16 @@
 export * from './lib/ui-library-angular.module';
 export { DIRECTIVES } from './lib/stencil-generated';
 export * from './lib/stencil-generated/components';
+export * from './lib/control-value-accessors/value-accessor';
+export * from './lib/control-value-accessors/text-value-accessor';
+export * from './lib/control-value-accessors/numeric-value-accessor';
+export * from './lib/control-value-accessors/radio-value-accessor';
+export * from './lib/control-value-accessors/datepicker-value-accessor';
+export * from './lib/control-value-accessors/timepicker-value-accessor';
+export * from './lib/control-value-accessors/select-value-accessor';
+export * from './lib/control-value-accessors/checkbox-value-accessor';
+export * from './lib/control-value-accessors/switch-value-accessor';
+export * from './lib/control-value-accessors/range-value-accessor';
+export * from './lib/validators/six-ui-library-validators';
+export * from './lib/form/six-form.directive';
+export * from './lib/services/validation-messages.service';