@3kles/kles-material-dynamicforms 21.8.2 → 22.0.1

package/types/3kles-kles-material-dynamicforms.d.ts

@@ -1,21 +1,17 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnDestroy, Type, PipeTransform, ViewContainerRef, Provider, StaticProvider, Signal, OnChanges, EventEmitter, ChangeDetectorRef, SimpleChanges, ComponentRef, Injector, ApplicationRef, AfterViewInit, ElementRef, InjectionToken } from '@angular/core';
-import * as i2$1 from '@angular/forms';
-import { UntypedFormGroup, ValidatorFn, AsyncValidatorFn, ɵGetProperty as _GetProperty, ɵTypedOrUntyped as _TypedOrUntyped, UntypedFormBuilder, FormGroup, ControlValueAccessor, Validators, AsyncValidator, UntypedFormArray, FormControl, UntypedFormControl, FormGroupDirective, NgForm, AbstractControl } from '@angular/forms';
+import { OnInit, OnDestroy, Type, PipeTransform, ViewContainerRef, Provider, StaticProvider, Signal, OnChanges, EventEmitter, ChangeDetectorRef, SimpleChanges, ComponentRef, Injector, ApplicationRef, AfterViewInit, InjectionToken } from '@angular/core';
+import * as _angular_forms from '@angular/forms';
+import { UntypedFormGroup, ValidatorFn, AsyncValidatorFn, UntypedFormBuilder, FormGroup, ControlValueAccessor, UntypedFormArray, AbstractControl, FormControl, UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms';
 import { Subject, Observable } from 'rxjs';
 import * as i30 from '@angular/material/core';
-import { DateAdapter, MatDateFormats, ErrorStateMatcher } from '@angular/material/core';
+import { ThemePalette, DateAdapter, MatDateFormats, ErrorStateMatcher } from '@angular/material/core';
 import * as i10 from '@angular/material/form-field';
-import { SubscriptSizing, MatFormFieldControl } from '@angular/material/form-field';
+import { SubscriptSizing } from '@angular/material/form-field';
 import * as i3 from '@angular/material/button';
 import { MatButtonAppearance } from '@angular/material/button';
 import * as _3kles_kles_material_color_picker from '@3kles/kles-material-color-picker';
 import { ColorPickerPosition, ColorOutputFormat, ColorCommitMode } from '@3kles/kles-material-color-picker';
-import * as i24 from '@angular/material/checkbox';
-import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
-import * as i16 from '@angular/material/tooltip';
-import { MatTooltip } from '@angular/material/tooltip';
-import { Clipboard } from '@angular/cdk/clipboard';
+import * as _3kles_kles_material_dynamicforms from '@3kles/kles-material-dynamicforms';
 import * as i1 from '@angular/common';
 import * as i2 from '@angular/material/slider';
 import * as i4 from '@angular/material/toolbar';
@@ -31,6 +27,7 @@ import * as i13 from '@angular/material/radio';
 import * as i14 from '@angular/material/datepicker';
 import * as i15 from '@angular/material/chips';
 import { MatChipInputEvent, MatChipInput } from '@angular/material/chips';
+import * as i16 from '@angular/material/tooltip';
 import * as i17 from '@angular/material/table';
 import * as i18 from '@angular/material/paginator';
 import * as i19 from '@angular/material/card';
@@ -38,6 +35,8 @@ import * as i20 from '@angular/material/menu';
 import * as i21 from '@angular/material/tabs';
 import * as i22 from '@angular/cdk/table';
 import * as i23 from '@angular/material/progress-spinner';
+import * as i24 from '@angular/material/checkbox';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 import * as i25 from '@angular/material/dialog';
 import * as i26 from '@angular/material/autocomplete';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
@@ -50,7 +49,6 @@ import * as i33 from '@angular/material/slide-toggle';
 import * as i34 from '@angular/material/button-toggle';
 import * as i35 from '@angular/cdk/portal';
 import * as i36 from '@angular/cdk/scrolling';
-import * as _3kles_kles_material_dynamicforms from '@3kles/kles-material-dynamicforms';
 
 type Exclusive<T, U> = (T & {
     [K in keyof U]?: never;
@@ -74,6 +72,7 @@ declare enum EnumType {
     select = "select",
     text = "text",
     file = "file",
+    imageUpload = "imageUpload",
     button = "button",
     checkbox = "checkbox",
     number = "number",
@@ -100,6 +99,67 @@ interface IKlesField {
 interface IKlesDirective extends OnInit, OnDestroy {
 }
 
+/** Contract implemented by components used to render an option or a select trigger. */
+interface IKlesComponent<TValue = unknown> {
+    value: TValue;
+}
+/** Angular component type compatible with the dynamic option renderer. */
+type KlesComponentType<TValue = unknown> = Type<IKlesComponent<TValue>>;
+
+interface IKlesElementLayoutBreakpoint {
+    colSpan?: number;
+    rowSpan?: number;
+    colStart?: number;
+    rowStart?: number;
+}
+interface IKlesElementLayout extends IKlesElementLayoutBreakpoint {
+    class?: string | string[];
+    responsive?: {
+        xs?: IKlesElementLayoutBreakpoint;
+        sm?: IKlesElementLayoutBreakpoint;
+        md?: IKlesElementLayoutBreakpoint;
+        lg?: IKlesElementLayoutBreakpoint;
+        xl?: IKlesElementLayoutBreakpoint;
+    };
+}
+interface IKlesLayoutConfig {
+    /** Number of columns in the grid. Defaults to 12. */
+    columns?: number;
+    /** CSS gap between grid cells. Defaults to 10px. */
+    gap?: string;
+}
+interface IKlesStructuralElement {
+    layout?: IKlesElementLayout;
+}
+interface IKlesFormSection extends IKlesStructuralElement {
+    type: 'section';
+    title: string;
+    description?: string;
+    /** Material icon displayed before the section title. */
+    icon?: string;
+    /** Registered Material SVG icon displayed before the section title. */
+    iconSvg?: string;
+    fields: KlesFormElement[];
+    layoutConfig?: IKlesLayoutConfig;
+}
+/** A visual layout group. Unlike an EnumType.group field, it creates no FormGroup. */
+interface IKlesFormLayoutGroup extends IKlesStructuralElement {
+    type: 'layoutGroup';
+    fields: KlesFormElement[];
+    layoutConfig?: IKlesLayoutConfig;
+}
+interface IKlesFormDivider extends IKlesStructuralElement {
+    type: 'divider';
+}
+interface IKlesFormSpacer extends IKlesStructuralElement {
+    type: 'spacer';
+    size?: string | number;
+}
+type KlesFormStructuralElement = IKlesFormSection | IKlesFormLayoutGroup | IKlesFormDivider | IKlesFormSpacer;
+type KlesFormElement = IKlesFieldConfig | KlesFormStructuralElement;
+declare function isKlesStructuralElement(element: KlesFormElement): element is KlesFormStructuralElement;
+declare function flattenKlesFields(elements: readonly KlesFormElement[]): IKlesFieldConfig[];
+
 interface IKlesFieldActionEvent<TContext = unknown, TValue = unknown> {
     actionId: string;
     value?: TValue;
@@ -125,6 +185,16 @@ interface IKlesCurrencyOptions {
     useGrouping?: boolean;
     allowNegative?: boolean;
 }
+interface IKlesImageUploadOptions {
+    /** Taille maximale autorisée, en octets. 2 Mio par défaut. */
+    maxFileSize?: number;
+    changeLabel?: string;
+    deleteLabel?: string;
+    emptyIcon?: string;
+    uploadIcon?: string;
+    invalidTypeMessage?: string;
+    maxFileSizeMessage?: string;
+}
 type KlesStatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
 type KlesStatusAppearance = 'chip' | 'badge' | 'text';
 interface IKlesStatusDefinition {
@@ -170,7 +240,7 @@ interface IKlesFieldUi {
     ngClass?: any;
     ngStyle?: any;
     indeterminate?: boolean;
-    color?: string;
+    color?: ThemePalette;
     icon?: string;
     iconSvg?: string;
     appearance?: 'fill' | 'outline';
@@ -219,19 +289,18 @@ interface IKlesFormField {
     name: string;
     component?: Type<any>;
     id?: string;
-    copyTooltip?: string;
     options?: any[] | Subject<any[]> | Observable<any[]> | ((value?: string, group?: {
         [key: string]: any;
     }) => Observable<any[]>);
     search?: boolean | IKlesSelectSearchOptions;
     property?: string;
-    collections?: any;
+    collections?: IKlesFieldConfig[];
     value?: any;
     asyncValue?: Observable<any>;
     multiple?: boolean;
     disabled?: boolean;
     autocomplete?: boolean;
-    autocompleteComponent?: Type<any>;
+    autocompleteComponent?: KlesComponentType<any>;
     displayWith?: ((value: any) => string) | null;
     panelWidth?: string | number;
     pending?: boolean;
@@ -242,7 +311,7 @@ interface IKlesFormField {
         options?: any[];
     }[];
     valueChanges?: (field: IKlesFieldConfig, group: UntypedFormGroup, siblingField?: IKlesFieldConfig[], valueChanged?: any) => void;
-    triggerComponent?: Type<any>;
+    triggerComponent?: KlesComponentType<any>;
     searchKeys?: string[];
     updateOn?: 'change' | 'blur' | 'submit';
     debounceTime?: number;
@@ -250,6 +319,7 @@ interface IKlesFormField {
     lazy?: boolean;
     buttonType?: 'submit' | 'button' | 'reset';
     accept?: string;
+    imageUploadOptions?: IKlesImageUploadOptions;
     dateOptions?: {
         adapter?: {
             class: Type<DateAdapter<any>>;
@@ -269,15 +339,27 @@ interface IKlesFormField {
     providers?: Array<Provider | StaticProvider>;
     onAction?: (event: IKlesFieldActionEvent<any, any>) => void;
     statusOptions?: IKlesStatusOptions;
+    /** Position of this field in an advanced CSS Grid container. */
+    layout?: IKlesElementLayout;
 }
 type IKlesFieldConfig = IKlesFormField & IKlesFieldUi;
 
+/** Selects the untyped result when T is `any`, otherwise the typed result. */
+type KlesTypedOrUntyped<T, TTyped, TUntyped> = 0 extends 1 & T ? TUntyped : TTyped;
+type KlesPathSegment = string | number;
+type KlesTokenize<TPath extends string> = TPath extends `${infer THead}.${infer TTail}` ? [THead, ...KlesTokenize<TTail>] : [TPath];
+type KlesCoercePathSegment<TSegment> = TSegment extends `${infer TIndex extends number}` ? TIndex : TSegment;
+type KlesProperty<TValue, TKey> = TValue extends unknown ? KlesCoercePathSegment<TKey> extends keyof TValue ? TValue[KlesCoercePathSegment<TKey>] : never : never;
+type KlesNavigate<TValue, TPath extends readonly KlesPathSegment[]> = number extends TPath['length'] ? any : TPath extends readonly [infer THead extends KlesPathSegment, ...infer TTail extends KlesPathSegment[]] ? KlesNavigate<KlesProperty<TValue, THead>, TTail> : TValue;
+/** Resolves the value located at a dot-separated path or an array of path segments. */
+type KlesGetProperty<TValue, TPath> = KlesTypedOrUntyped<TValue, TPath extends string ? string extends TPath ? any : KlesNavigate<TValue, KlesTokenize<TPath>> : TPath extends readonly KlesPathSegment[] ? KlesNavigate<TValue, TPath> : never, any>;
+
 declare abstract class AbstractUiState<TValue = any, TRawValue extends TValue = TValue> {
-    protected _value: i0.WritableSignal<TValue>;
+    protected _value: i0.WritableSignal<TValue | undefined>;
     private _parent;
     private _parentKey;
-    get<P extends string | readonly (string | number)[]>(path: P): AbstractUiState<_GetProperty<TRawValue, P>> | null;
-    get<P extends string | Array<string | number>>(path: P): AbstractUiState<_GetProperty<TRawValue, P>> | null;
+    get<P extends string | readonly (string | number)[]>(path: P): AbstractUiState<KlesGetProperty<TRawValue, P>> | null;
+    get<P extends string | Array<string | number>>(path: P): AbstractUiState<KlesGetProperty<TRawValue, P>> | null;
     _find(name: string | number): AbstractUiState | null;
     abstract setValue(value: TRawValue): void;
     abstract patchValue(value: Partial<TValue>): void;
@@ -290,7 +372,7 @@ declare abstract class AbstractUiState<TValue = any, TRawValue extends TValue =
 declare class GroupUiState<TUiState extends {
     [K in keyof TUiState]: AbstractUiState<any>;
 } = any> extends AbstractUiState<any, any> {
-    states: _TypedOrUntyped<TUiState, TUiState, {
+    states: KlesTypedOrUntyped<TUiState, TUiState, {
         [key: string]: AbstractUiState<any>;
     }>;
     constructor(states?: TUiState);
@@ -306,25 +388,33 @@ declare class KlesDynamicFormComponent implements OnInit, OnChanges {
     private fb;
     private ref;
     context: Signal<unknown | null> | null;
-    fields: IKlesFieldConfig[];
+    fields: KlesFormElement[];
     validators: IKlesValidator<ValidatorFn>[];
     asyncValidators: IKlesValidator<AsyncValidatorFn>[];
     submit: EventEmitter<any>;
     _onLoaded: EventEmitter<any>;
     direction: 'column' | 'row' | 'grid' | 'inline-grid';
     wrap: boolean;
+    /** Configuration of the advanced grid container. */
+    layout: IKlesLayoutConfig;
     formClass: string | string[] | Set<string> | {
         [klass: string]: any;
     };
     form: UntypedFormGroup;
     ui: GroupUiState;
-    orientationClass: 'dynamic-form-column' | 'dynamic-form-row' | 'dynamic-form-grid' | 'dynamic-form-inline-grid';
+    private flattenedSource;
+    private flattenedFields;
+    private readonly layoutWarnings;
+    get orientationClass(): 'dynamic-form-column' | 'dynamic-form-row' | 'dynamic-form-grid' | 'dynamic-form-inline-grid';
     get value(): any;
+    get legacyFields(): IKlesFieldConfig[];
+    get usesAdvancedLayout(): boolean;
+    get gridStyles(): Record<string, string | number> | null;
+    private get hasRootElementLayout();
     constructor(fb: UntypedFormBuilder, ref: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     onSubmit(event: Event): void;
-    private setOrientationClass;
     private updateForm;
     private updateControl;
     private createControl;
@@ -332,22 +422,24 @@ declare class KlesDynamicFormComponent implements OnInit, OnChanges {
     private createForm;
     private validateAllFormFields;
     private createUi;
+    private normalizeColumns;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesDynamicFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KlesDynamicFormComponent, "app-kles-dynamic-form", ["klesDynamicForm"], { "context": { "alias": "context"; "required": false; }; "fields": { "alias": "fields"; "required": false; }; "validators": { "alias": "validators"; "required": false; }; "asyncValidators": { "alias": "asyncValidators"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "formClass": { "alias": "formClass"; "required": false; }; }, { "submit": "submit"; "_onLoaded": "_onLoaded"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KlesDynamicFormComponent, "app-kles-dynamic-form", ["klesDynamicForm"], { "context": { "alias": "context"; "required": false; }; "fields": { "alias": "fields"; "required": false; }; "validators": { "alias": "validators"; "required": false; }; "asyncValidators": { "alias": "asyncValidators"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "formClass": { "alias": "formClass"; "required": false; }; }, { "submit": "submit"; "_onLoaded": "_onLoaded"; }, never, never, true, never>;
 }
 
-declare class KlesComponentDirective implements OnInit, OnChanges {
+declare class KlesComponentDirective<TValue = unknown> implements OnInit, OnChanges, OnDestroy {
     private container;
-    component: Type<any>;
-    value: any;
-    field?: IKlesFieldConfig;
-    componentRef: ComponentRef<any>;
+    component: KlesComponentType<TValue>;
+    value: TValue;
+    field: IKlesFieldConfig;
+    componentRef?: ComponentRef<IKlesComponent<TValue>>;
     constructor(container: ViewContainerRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
-    buildComponent(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KlesComponentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KlesComponentDirective, "[klesComponent]", never, { "component": { "alias": "component"; "required": false; }; "value": { "alias": "value"; "required": false; }; "field": { "alias": "field"; "required": false; }; }, {}, never, never, true, never>;
+    ngOnDestroy(): void;
+    private buildComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KlesComponentDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KlesComponentDirective<any>, "[klesComponent]", never, { "component": { "alias": "component"; "required": true; }; "value": { "alias": "value"; "required": true; }; "field": { "alias": "field"; "required": true; }; }, {}, never, never, true, never>;
 }
 
 declare class KlesDynamicFieldDirective<T extends IKlesFieldConfig = IKlesFieldConfig> implements OnInit, OnChanges, OnDestroy {
@@ -375,34 +467,42 @@ declare class KlesDynamicFieldDirective<T extends IKlesFieldConfig = IKlesFieldC
     static ɵdir: i0.ɵɵDirectiveDeclaration<KlesDynamicFieldDirective<any>, "[klesDynamicField]", never, { "field": { "alias": "field"; "required": false; }; "group": { "alias": "group"; "required": false; }; "ui": { "alias": "ui"; "required": false; }; "siblingFields": { "alias": "siblingFields"; "required": false; }; "context": { "alias": "context"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+declare class KlesFocusTargetDirective {
+    private readonly element;
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KlesFocusTargetDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KlesFocusTargetDirective, "[klesFocusTarget]", never, {}, {}, never, never, true, never>;
+}
+
 declare abstract class KlesFieldAbstract<TContext = unknown> implements IKlesField, OnInit, AfterViewInit, OnDestroy {
     readonly field: IKlesFieldConfig;
     readonly group: FormGroup<any>;
     readonly siblingFields: IKlesFieldConfig[];
-    readonly ui: GroupUiState<any>;
+    readonly ui: GroupUiState<any> | null;
     readonly context: Signal<TContext | null> | null;
     protected readonly fieldUi: Signal<any>;
     protected readonly resolvedFieldUi: Signal<IKlesFieldUi>;
     readonly appearance: Signal<"fill" | "outline">;
-    readonly inputType: Signal<"number" | "date" | "email" | "submit" | "search" | "reset" | "text" | "file" | "button" | "checkbox" | "time" | "color" | "range" | "datetime-local" | "hidden" | "image" | "month" | "password" | "radio" | "tel" | "url" | "week">;
-    readonly min: Signal<number | Date>;
-    readonly max: Signal<number | Date>;
+    readonly inputType: Signal<"number" | "text" | "image" | "url" | "search" | "date" | "email" | "submit" | "reset" | "file" | "button" | "checkbox" | "time" | "color" | "range" | "datetime-local" | "hidden" | "month" | "password" | "radio" | "tel" | "week">;
+    readonly min: Signal<number | Date | undefined>;
+    readonly max: Signal<number | Date | undefined>;
     readonly maxLength: Signal<number>;
-    readonly step: Signal<number>;
+    readonly step: Signal<number | undefined>;
     readonly ngClass: Signal<any>;
     readonly ngStyle: Signal<any>;
     readonly indeterminate: Signal<boolean>;
-    readonly color: Signal<string>;
+    readonly color: Signal<"primary" | "accent" | "warn">;
     readonly icon: Signal<string>;
     readonly iconSvg: Signal<string>;
     readonly buttonAppearance: Signal<i3.MatButtonAppearance>;
     readonly label: Signal<string>;
-    readonly hint: Signal<string>;
+    readonly hint: Signal<string | undefined>;
     readonly placeholder: Signal<any>;
-    readonly tooltip: Signal<string>;
-    readonly imageUrl: Signal<string>;
+    readonly tooltip: Signal<string | undefined>;
+    readonly imageUrl: Signal<string | undefined>;
     readonly imageAlt: Signal<string>;
     protected readonly viewRef: ViewContainerRef;
+    protected readonly focusTarget: Signal<KlesFocusTargetDirective | undefined>;
     directive: any;
     protected _onDestroy: Subject<void>;
     constructor();
@@ -410,9 +510,10 @@ declare abstract class KlesFieldAbstract<TContext = unknown> implements IKlesFie
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     applyPipeTransform(): void;
-    isPending(): boolean;
+    isPending(): boolean | undefined;
     onFocus(): void;
     onBlur(): void;
+    protected focus(): void;
     triggerAction(actionId: string, originalEvent: Event, value?: unknown): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFieldAbstract<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KlesFieldAbstract<any>, never, never, {}, {}, never, never, true, never>;
@@ -427,7 +528,7 @@ declare class KlesFormLabelComponent extends KlesFieldAbstract implements OnInit
 }
 
 interface IButton {
-    event?: any;
+    event?: string;
     uiButton?: IUIButton;
 }
 interface IUIButton {
@@ -441,31 +542,42 @@ interface IUIButton {
     accept?: string;
     buttonAppearance?: MatButtonAppearance;
 }
-declare abstract class KlesButtonBase implements OnInit, ControlValueAccessor {
-    name: string;
-    label: string;
-    color: string;
-    icon: string;
-    iconSvg: string;
-    disabled: boolean;
-    get type(): any;
-    set type(value: any);
-    classButton: string;
-    value: IButton;
-    tooltip?: string;
-    buttonAppearance: MatButtonAppearance;
+declare abstract class KlesButtonBase<TButton extends IButton = IButton> implements OnInit, ControlValueAccessor {
+    readonly name: i0.InputSignal<string>;
+    readonly label: i0.InputSignal<string>;
+    readonly color: i0.InputSignal<string>;
+    readonly icon: i0.InputSignal<string>;
+    readonly iconSvg: i0.InputSignal<string>;
+    readonly disabled: i0.InputSignal<boolean>;
+    readonly type: i0.InputSignal<string | undefined>;
+    readonly classButton: i0.InputSignal<string>;
+    readonly value: i0.InputSignal<TButton>;
+    readonly tooltip: i0.InputSignal<string | undefined>;
+    readonly buttonAppearance: i0.InputSignal<MatButtonAppearance>;
+    protected readonly uiButtonState: i0.WritableSignal<IUIButton | undefined>;
+    private readonly formDisabledState;
+    private readonly writtenValueState;
+    readonly effectiveLabel: i0.Signal<string>;
+    readonly effectiveColor: i0.Signal<string>;
+    readonly effectiveIcon: i0.Signal<string>;
+    readonly effectiveIconSvg: i0.Signal<string>;
+    readonly effectiveDisabled: i0.Signal<boolean>;
+    readonly effectiveType: i0.Signal<string>;
+    readonly effectiveClassButton: i0.Signal<string>;
+    readonly effectiveButtonAppearance: i0.Signal<MatButtonAppearance>;
+    readonly effectiveValue: i0.Signal<TButton>;
     action: EventEmitter<MouseEvent>;
-    protected _type: string;
-    onChange: any;
-    onTouched: any;
+    protected onChange: (value: TButton) => void;
+    protected onTouched: () => void;
     ngOnInit(): void;
     click(event: MouseEvent): void;
-    writeValue(value: IButton): void;
-    registerOnChange(fn: any): void;
-    registerOnTouched(fn: any): void;
+    writeValue(value: TButton | null | undefined): void;
+    registerOnChange(fn: (value: TButton) => void): void;
+    registerOnTouched(fn: () => void): void;
+    protected markAsTouched(): void;
     setDisabledState?(isDisabled: boolean): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KlesButtonBase, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KlesButtonBase, "ng-component", never, { "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "color": { "alias": "color"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSvg": { "alias": "iconSvg"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; "classButton": { "alias": "classButton"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "buttonAppearance": { "alias": "buttonAppearance"; "required": false; }; }, { "action": "action"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KlesButtonBase<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KlesButtonBase<any>, "ng-component", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSvg": { "alias": "iconSvg"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "classButton": { "alias": "classButton"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "buttonAppearance": { "alias": "buttonAppearance"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
 }
 
 declare class KlesButtonComponent extends KlesButtonBase implements OnInit {
@@ -473,8 +585,35 @@ declare class KlesButtonComponent extends KlesButtonBase implements OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesButtonComponent, "kles-button", never, {}, {}, never, never, true, never>;
 }
 
+interface IButtonChecker extends IButton {
+    busy: boolean;
+    error?: any[];
+    message?: string;
+}
+declare class KlesButtonCheckerComponent extends KlesButtonBase<IButtonChecker> implements ControlValueAccessor {
+    countError(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KlesButtonCheckerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KlesButtonCheckerComponent, "kles-button-checker", never, {}, {}, never, never, true, never>;
+}
+
+interface IButtonFile extends IButton {
+    fileContent?: string | ArrayBuffer | (string | ArrayBuffer)[] | null;
+}
+declare class KlesButtonFileComponent extends KlesButtonBase<IButtonFile> {
+    private readonly file;
+    readonly accept: i0.InputSignal<string>;
+    readonly effectiveAccept: i0.Signal<string>;
+    click(_event: MouseEvent): void;
+    writeValue(value: IButtonFile | null | undefined): void;
+    onFileSelect(input: HTMLInputElement): Promise<void>;
+    readUploadedFile(inputFile: File): Promise<string | ArrayBuffer | null>;
+    private resetNativeFileInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KlesButtonFileComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KlesButtonFileComponent, "kles-button-file", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class KlesTransformPipe implements PipeTransform {
-    transform(value: any, pipes: {
+    transform(value: any, pipes?: {
         pipe: PipeTransform;
         options?: any[];
     }[]): any;
@@ -492,90 +631,93 @@ interface IKlesClearControl extends IKlesField {
     clear(event: any): void;
 }
 
-declare class KlesFormClearComponent implements IKlesClearControl, OnDestroy {
+declare class KlesFormClearComponent implements IKlesClearControl {
     readonly field: IKlesFieldConfig;
     readonly group: FormGroup<any>;
     readonly siblingFields: IKlesFieldConfig[];
-    private _onDestroy;
     disabled: Signal<boolean>;
     constructor();
-    ngOnDestroy(): void;
-    clear(event: any): void;
+    clear(event: MouseEvent): void;
     private isPresent;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormClearComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormClearComponent, "kles-form-clear", never, {}, {}, never, never, true, never>;
 }
 
 declare class MatErrorMessageDirective implements AfterViewInit {
-    private _inj;
-    validationsKeys: KlesValidationKey[];
-    asyncValidationsKeys: KlesValidationKey[];
-    set validations(v: IKlesValidator<Validators>[]);
-    set asyncValidations(v: IKlesValidator<AsyncValidator>[]);
-    inputRef: MatFormFieldControl<MatFormFieldControl<any>>;
-    constructor(_inj: Injector);
+    readonly validations: i0.InputSignal<IKlesValidator<ValidatorFn>[] | undefined>;
+    readonly asyncValidations: i0.InputSignal<IKlesValidator<AsyncValidatorFn>[] | undefined>;
+    readonly validationsKeys: i0.Signal<_3kles_kles_material_dynamicforms.KlesValidationKey[]>;
+    readonly asyncValidationsKeys: i0.Signal<_3kles_kles_material_dynamicforms.KlesValidationKey[]>;
+    private readonly formField;
+    private readonly inputRef;
+    private readonly controlStatus;
+    readonly errors: i0.Signal<_angular_forms.ValidationErrors | null>;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatErrorMessageDirective, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatErrorMessageDirective, "[matErrorMessage]", never, { "validations": { "alias": "validations"; "required": false; }; "asyncValidations": { "alias": "asyncValidations"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatErrorMessageDirective, "[matErrorMessage]", never, { "validations": { "alias": "validations"; "required": false; "isSignal": true; }; "asyncValidations": { "alias": "asyncValidations"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class MatErrorFormDirective {
-    validationsKeys: KlesValidationKey[];
-    asyncValidationsKeys: KlesValidationKey[];
-    form: UntypedFormGroup;
-    set validations(v: IKlesValidator<Validators>[]);
-    set asyncValidations(v: IKlesValidator<AsyncValidator>[]);
+    readonly form: i0.InputSignal<UntypedFormGroup>;
+    readonly validations: i0.InputSignal<IKlesValidator<ValidatorFn>[]>;
+    readonly asyncValidations: i0.InputSignal<IKlesValidator<AsyncValidatorFn>[]>;
+    readonly validationsKeys: i0.Signal<_3kles_kles_material_dynamicforms.KlesValidationKey[]>;
+    readonly asyncValidationsKeys: i0.Signal<_3kles_kles_material_dynamicforms.KlesValidationKey[]>;
+    readonly formErrors: i0.Signal<_angular_forms.ValidationErrors | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatErrorFormDirective, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatErrorFormDirective, "[matErrorForm]", never, { "form": { "alias": "form"; "required": true; }; "validations": { "alias": "validations"; "required": false; }; "asyncValidations": { "alias": "asyncValidations"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-declare class KlesIndeterminateCheckboxComponent implements ControlValueAccessor, AfterViewInit {
-    label: string;
-    color: string;
-    checkbox: MatCheckbox;
-    isIndeterminate: boolean;
-    private innerValue;
-    onChange: any;
-    onTouched: any;
-    ngAfterViewInit(): void;
-    writeValue(value: any): void;
-    registerOnChange(fn: any): void;
-    registerOnTouched(fn: any): void;
-    setDisabledState?(isDisabled: boolean): void;
-    onCheckboxChange(event: any): void;
-    private updateCheckbox;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KlesIndeterminateCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KlesIndeterminateCheckboxComponent, "kles-checkbox-indeterminate", never, { "label": { "alias": "label"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatErrorFormDirective, "[matErrorForm]", never, { "form": { "alias": "form"; "required": true; "isSignal": true; }; "validations": { "alias": "validations"; "required": false; "isSignal": true; }; "asyncValidations": { "alias": "asyncValidations"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class KlesFileControlComponent implements ControlValueAccessor {
-    disabled: boolean;
+    private readonly fileInput;
+    private readonly disabledState;
+    get disabled(): boolean;
+    set disabled(value: boolean);
     accept: string;
     multiple: boolean;
-    value: {
-        name: string;
-        content: ArrayBuffer;
-    }[];
-    onChange: any;
-    onTouched: any;
-    writeValue(obj: any): void;
+    value: KlesFileControlValue;
+    private onChange;
+    private onTouched;
+    writeValue(value: KlesFileControlValue | undefined): void;
     onFileSelected(input: HTMLInputElement): Promise<void>;
-    registerOnChange(fn: any): void;
-    registerOnTouched(fn: any): void;
+    registerOnChange(fn: (value: KlesFileControlValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    markAsTouched(): void;
     setDisabledState?(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFileControlComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFileControlComponent, "kles-file-control", never, { "disabled": { "alias": "disabled"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; }, {}, never, never, true, never>;
 }
+interface KlesFileValue {
+    name: string;
+    content: ArrayBuffer;
+    type?: string;
+    size?: number;
+}
+type KlesFileControlValue = KlesFileValue[] | null;
+
+declare class KlesDynamicFormIntl {
+    loading: string;
+    selectAll: string;
+    clearSearch: string;
+    search: string;
+    copy: string;
+    imageUploadChange: string;
+    imageUploadDelete: string;
+    imageUploadInvalidType: string;
+    imageUploadMaxSize: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KlesDynamicFormIntl, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KlesDynamicFormIntl>;
+}
 
 declare class KlesFormCopyComponent implements IKlesField {
-    private clipBoard;
-    tooltip: MatTooltip;
+    private readonly tooltip;
     readonly field: IKlesFieldConfig;
     readonly group: FormGroup<any>;
     readonly siblingFields: IKlesFieldConfig[];
-    tooltipText: string;
-    constructor(clipBoard: Clipboard);
-    copy(event: any): void;
+    readonly intl: KlesDynamicFormIntl;
+    private readonly clipboard;
+    readonly tooltipText: string;
+    copy(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormCopyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormCopyComponent, "kles-form-copy", never, {}, {}, never, never, true, never>;
 }
@@ -586,15 +728,6 @@ declare class MaterialModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MaterialModule>;
 }
 
-declare class KlesDynamicFormIntl {
-    loading: string;
-    selectAll: string;
-    clearSearch: string;
-    search: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KlesDynamicFormIntl, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<KlesDynamicFormIntl>;
-}
-
 declare class KlesFormInputComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
     filteredOption$: Observable<{
         loading: boolean;
@@ -642,18 +775,6 @@ declare class KlesFormButtonComponent extends KlesFieldAbstract implements OnIni
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormButtonComponent, "kles-form-button", never, {}, {}, never, never, true, never>;
 }
 
-interface IButtonChecker extends IButton {
-    busy: boolean;
-    error?: any[];
-    message?: string;
-}
-declare class KlesButtonCheckerComponent extends KlesButtonBase implements ControlValueAccessor {
-    value: IButtonChecker;
-    countError(): number;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KlesButtonCheckerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KlesButtonCheckerComponent, "kles-button-checker", never, {}, {}, never, never, true, never>;
-}
-
 declare class KlesFormButtonCheckerComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -661,24 +782,6 @@ declare class KlesFormButtonCheckerComponent extends KlesFieldAbstract implement
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormButtonCheckerComponent, "kles-form-button-checker", never, {}, {}, never, never, true, never>;
 }
 
-interface IButtonFile extends IButton {
-    fileContent?: string | string[];
-}
-declare class KlesButtonFileComponent extends KlesButtonBase {
-    file: any;
-    accept: string;
-    fileReader: FileReader;
-    fileContent: string | string[];
-    value: IButtonFile;
-    click(event: any): void;
-    writeValue(value: IButton): void;
-    onFileLoad(fileLoadedEvent: any): void;
-    onFileSelect(input: HTMLInputElement): Promise<void>;
-    readUploadedFile(inputFile: any): Promise<any>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KlesButtonFileComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KlesButtonFileComponent, "kles-button-file", never, { "accept": { "alias": "accept"; "required": false; }; }, {}, never, never, true, never>;
-}
-
 declare class KlesFormButtonFileComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -699,6 +802,8 @@ declare class KlesFormDateTimeComponent extends KlesFieldAbstract {
 }
 
 declare class KlesFormRadioComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
+    private readonly radioButtons;
+    protected focus(): void;
     options$: Observable<any[]>;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -707,6 +812,8 @@ declare class KlesFormRadioComponent extends KlesFieldAbstract implements OnInit
 }
 
 declare class KlesFormCheckboxComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
+    private readonly checkbox;
+    protected focus(): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
     onChange(e: MatCheckboxChange): void;
@@ -714,16 +821,9 @@ declare class KlesFormCheckboxComponent extends KlesFieldAbstract implements OnI
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormCheckboxComponent, "kles-form-checkbox", never, {}, {}, never, never, true, never>;
 }
 
-declare class KlesFormCheckboxIndeterminateComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormCheckboxIndeterminateComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormCheckboxIndeterminateComponent, "kles-form-checkbox-indeterminate", never, {}, {}, never, never, true, never>;
-}
-
 declare class KlesFormListFieldComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
     formArray: UntypedFormArray;
-    collections: IKlesFieldConfig[][];
+    readonly collections: i0.WritableSignal<IKlesFieldConfig[][]>;
     private fb;
     ngOnInit(): void;
     private createFormGroup;
@@ -741,7 +841,7 @@ declare class KlesFormColorComponent extends KlesFieldAbstract {
     private readonly controlValue;
     private readonly controlStatus;
     readonly colorOption: i0.Signal<any>;
-    readonly parsedColor: i0.Signal<_3kles_kles_material_color_picker.RgbaColor>;
+    readonly parsedColor: i0.Signal<_3kles_kles_material_color_picker.RgbaColor | null>;
     readonly currentColor: i0.Signal<any>;
     readonly backgroundColor: i0.Signal<string>;
     readonly foregroundColor: i0.Signal<"#000000" | "#ffffff">;
@@ -773,13 +873,12 @@ declare class KlesFormChipComponent extends KlesFieldAbstract implements OnInit,
 }
 
 declare class KlesFormGroupComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
-    orientationClass: 'group-container' | 'group-container-column' | 'group-container-row' | 'group-container-grid' | 'group-container-inline-grid';
+    private readonly orientationClass;
     get className(): string;
     subGroup: UntypedFormGroup;
     subUi: GroupUiState;
     ngOnInit(): void;
     ngOnDestroy(): void;
-    private setOrientationClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormGroupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormGroupComponent, "kles-group", never, {}, {}, never, never, true, never>;
 }
@@ -806,6 +905,8 @@ declare class KlesFormLinkComponent extends KlesFieldAbstract implements OnInit,
 }
 
 declare class KlesFormSlideToggleComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
+    private readonly slideToggle;
+    protected focus(): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormSlideToggleComponent, never>;
@@ -819,7 +920,8 @@ declare class KlesFormSlideToggleComponent extends KlesFieldAbstract implements
 declare class KlesSelectionModel<T> {
     private _multiple;
     private _emitChanges;
-    compareWith?: (o1: T, o2: T) => boolean;
+    compareWith?: ((o1: T, o2: T) => boolean) | undefined;
+    private readonly _revision;
     /** Currently-selected values. */
     private _selection;
     /** Keeps track of the deselected options that haven't been emitted by the change event. */
@@ -832,7 +934,7 @@ declare class KlesSelectionModel<T> {
     get selected(): T[];
     /** Event emitted when the value has changed. */
     readonly changed: Subject<any>;
-    constructor(_multiple?: boolean, initiallySelectedValues?: T[], _emitChanges?: boolean, compareWith?: (o1: T, o2: T) => boolean);
+    constructor(_multiple?: boolean, initiallySelectedValues?: T[], _emitChanges?: boolean, compareWith?: ((o1: T, o2: T) => boolean) | undefined);
     /**
      * Selects a value or an array of values.
      * @param values The values to select
@@ -917,6 +1019,9 @@ declare class KlesSelectionModel<T> {
 declare class KlesFormSelectionListComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
     selection: KlesSelectionModel<any>;
     options$: Observable<any[]>;
+    private readonly control;
+    private readonly controlStatus;
+    readonly disabled: i0.Signal<boolean>;
     ngOnInit(): void;
     ngOnDestroy(): void;
     onSelectionChange(selection: MatSelectionListChange): void;
@@ -925,6 +1030,8 @@ declare class KlesFormSelectionListComponent extends KlesFieldAbstract implement
 }
 
 declare class KlesFormButtonToogleGroupComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
+    private readonly buttonToggles;
+    protected focus(): void;
     options$: Observable<any[]>;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -951,6 +1058,8 @@ declare class KlesFormArrayComponent extends KlesFieldAbstract implements OnInit
     subUi: ArrayUiState;
     constructor();
     ngOnInit(): void;
+    asFormGroup(control: AbstractControl): UntypedFormGroup;
+    uiAt(index: number): GroupUiState;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormArrayComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormArrayComponent, "kles-array", never, {}, {}, never, never, true, never>;
@@ -1002,11 +1111,15 @@ declare class KlesFormIconButtonComponent extends KlesFieldAbstract implements O
 declare class KlesFormSelectionListSearchComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
     selection: KlesSelectionModel<any>;
     options$: Observable<any[]>;
-    searchControl: FormControl<any>;
+    searchControl: FormControl<string | null>;
     optionFiltered$: Observable<any[]>;
+    private readonly control;
+    private readonly controlStatus;
+    readonly disabled: i0.Signal<boolean>;
     ngOnInit(): void;
     ngOnDestroy(): void;
     onSelectionChange(selection: MatSelectionListChange): void;
+    private syncSearchDisabledState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormSelectionListSearchComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormSelectionListSearchComponent, "kles-form-selection-list-search", never, {}, {}, never, never, true, never>;
 }
@@ -1081,11 +1194,7 @@ declare class KlesFormActionMenuComponent<TContext = unknown> extends KlesFieldA
  * Seule la valeur affichée dans l'input est formatée.
  */
 declare class KlesCurrencyValueAccessorDirective implements ControlValueAccessor, OnChanges {
-    /**
-     * Public pour rester compatible avec le mécanisme
-     * nativeElement utilisé par la librairie.
-     */
-    readonly _elementRef: ElementRef<HTMLInputElement>;
+    private readonly elementRef;
     private readonly renderer;
     currency: string;
     locale: string;
@@ -1127,7 +1236,7 @@ declare class KlesCurrencyValueAccessorDirective implements ControlValueAccessor
 }
 declare class KlesFormCurrencyComponent extends KlesFieldAbstract {
     readonly localeId: string;
-    readonly currencyOptions: i0.Signal<_3kles_kles_material_dynamicforms.IKlesCurrencyOptions>;
+    readonly currencyOptions: i0.Signal<_3kles_kles_material_dynamicforms.IKlesCurrencyOptions | undefined>;
     readonly defaultCurrencyCode: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormCurrencyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormCurrencyComponent, "kles-form-currency", never, {}, {}, never, ["*"], true, never>;
@@ -1141,7 +1250,7 @@ declare class KlesFormStatusComponent<TContext = unknown> extends KlesFieldAbstr
     readonly showDot: i0.Signal<boolean>;
     readonly disabled: i0.Signal<boolean>;
     readonly pending: i0.Signal<boolean>;
-    readonly resolvedStatus: i0.Signal<IKlesStatusDefinition>;
+    readonly resolvedStatus: i0.Signal<IKlesStatusDefinition | null>;
     private resolveStatusKey;
     private resolveDefaultLabel;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormStatusComponent<any>, never>;
@@ -1153,7 +1262,7 @@ interface ChipOptionsState {
     options: any[];
 }
 declare class KlesFormChipGridComponent extends KlesFieldAbstract implements OnInit {
-    readonly control: i2$1.AbstractControl<any, any, any>;
+    readonly control: FormControl<any[]>;
     readonly intl: KlesDynamicFormIntl;
     readonly separatorKeysCodes: number[];
     readonly searchControl: FormControl<any>;
@@ -1175,10 +1284,38 @@ declare class KlesFormChipGridComponent extends KlesFieldAbstract implements OnI
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormChipGridComponent, "kles-form-chip-grid", never, {}, {}, never, never, true, never>;
 }
 
+declare class KlesFormImageUploadComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
+    readonly intl: KlesDynamicFormIntl;
+    private readonly fileInput;
+    private readonly control;
+    private readonly localPreviewUrl;
+    private readonly imageRemoved;
+    private readonly controlValue;
+    private controlSubscription?;
+    readonly options: i0.Signal<_3kles_kles_material_dynamicforms.IKlesImageUploadOptions>;
+    readonly accept: i0.Signal<string>;
+    readonly disabled: i0.Signal<boolean>;
+    readonly errorMessage: i0.WritableSignal<string | null>;
+    readonly previewUrl: i0.Signal<string | null>;
+    readonly hasImage: i0.Signal<boolean>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    openFilePicker(): void;
+    selectFile(event: Event): Promise<void>;
+    deleteImage(): void;
+    private previewFromValue;
+    private isAccepted;
+    private rejectFile;
+    private clearImageErrors;
+    private clearLocalPreview;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormImageUploadComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormImageUploadComponent, "kles-form-image-upload", never, {}, {}, never, never, true, never>;
+}
+
 declare class KlesMaterialDynamicformsModule {
-    static declarations: ((typeof KlesFormClearComponent | typeof KlesDynamicFormComponent | typeof KlesFormLabelComponent | typeof KlesButtonComponent | typeof KlesIndeterminateCheckboxComponent | typeof KlesFileControlComponent | typeof KlesFormCopyComponent)[] | (typeof KlesDynamicFieldDirective | typeof MatErrorFormDirective | typeof KlesComponentDirective | typeof MatErrorMessageDirective)[] | (typeof KlesTransformPipe | typeof ArrayFormatPipe)[])[];
+    static declarations: ((typeof KlesFormClearComponent | typeof KlesDynamicFormComponent | typeof KlesFormLabelComponent | typeof KlesButtonComponent | typeof KlesButtonCheckerComponent | typeof KlesButtonFileComponent | typeof KlesFileControlComponent | typeof KlesFormCopyComponent)[] | (typeof KlesDynamicFieldDirective | typeof MatErrorFormDirective | typeof KlesComponentDirective | typeof MatErrorMessageDirective)[] | (typeof KlesTransformPipe | typeof ArrayFormatPipe)[])[];
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesMaterialDynamicformsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KlesMaterialDynamicformsModule, never, [typeof i1.CommonModule, typeof i2$1.ReactiveFormsModule, typeof i2$1.FormsModule, typeof MaterialModule, typeof KlesDynamicFormComponent, typeof KlesFormLabelComponent, typeof KlesFormInputComponent, typeof KlesFormInputClearableComponent, typeof KlesFormBadgeComponent, typeof KlesFormFileComponent, typeof KlesFileControlComponent, typeof KlesButtonComponent, typeof KlesFormButtonComponent, typeof KlesButtonCheckerComponent, typeof KlesFormButtonCheckerComponent, typeof KlesButtonFileComponent, typeof KlesFormButtonFileComponent, typeof KlesFormDateComponent, typeof KlesFormDateTimeComponent, typeof KlesFormRadioComponent, typeof KlesFormCheckboxComponent, typeof KlesIndeterminateCheckboxComponent, typeof KlesFormCheckboxIndeterminateComponent, typeof KlesFormListFieldComponent, typeof KlesFormColorComponent, typeof KlesFormTextareaComponent, typeof KlesFormTextComponent, typeof KlesFormChipComponent, typeof KlesFormGroupComponent, typeof KlesFormIconComponent, typeof KlesFormLineBreakComponent, typeof KlesFormLinkComponent, typeof KlesFormSlideToggleComponent, typeof KlesFormSelectionListComponent, typeof KlesFormButtonToogleGroupComponent, typeof KlesFormArrayComponent, typeof KlesFormRangeComponent, typeof KlesFormClearComponent, typeof KlesFormFabComponent, typeof KlesFabComponent, typeof KlesMiniFabComponent, typeof KlesFormMiniFabComponent, typeof KlesIconButtonComponent, typeof KlesFormIconButtonComponent, typeof KlesFormSelectionListSearchComponent, typeof KlesFormCopyComponent, typeof KlesFormTileComponent, typeof KlesFormActionMenuComponent, typeof KlesFormCurrencyComponent, typeof KlesFormStatusComponent, typeof KlesFormChipGridComponent, typeof KlesDynamicFieldDirective, typeof KlesComponentDirective, typeof MatErrorMessageDirective, typeof MatErrorFormDirective, typeof KlesTransformPipe, typeof ArrayFormatPipe], [typeof KlesDynamicFormComponent, typeof KlesFormLabelComponent, typeof KlesFormInputComponent, typeof KlesFormInputClearableComponent, typeof KlesFormBadgeComponent, typeof KlesFormFileComponent, typeof KlesFileControlComponent, typeof KlesButtonComponent, typeof KlesFormButtonComponent, typeof KlesButtonCheckerComponent, typeof KlesFormButtonCheckerComponent, typeof KlesButtonFileComponent, typeof KlesFormButtonFileComponent, typeof KlesFormDateComponent, typeof KlesFormDateTimeComponent, typeof KlesFormRadioComponent, typeof KlesFormCheckboxComponent, typeof KlesIndeterminateCheckboxComponent, typeof KlesFormCheckboxIndeterminateComponent, typeof KlesFormListFieldComponent, typeof KlesFormColorComponent, typeof KlesFormTextareaComponent, typeof KlesFormTextComponent, typeof KlesFormChipComponent, typeof KlesFormGroupComponent, typeof KlesFormIconComponent, typeof KlesFormLineBreakComponent, typeof KlesFormLinkComponent, typeof KlesFormSlideToggleComponent, typeof KlesFormSelectionListComponent, typeof KlesFormButtonToogleGroupComponent, typeof KlesFormArrayComponent, typeof KlesFormRangeComponent, typeof KlesFormClearComponent, typeof KlesFormFabComponent, typeof KlesFabComponent, typeof KlesMiniFabComponent, typeof KlesFormMiniFabComponent, typeof KlesIconButtonComponent, typeof KlesFormIconButtonComponent, typeof KlesFormSelectionListSearchComponent, typeof KlesFormCopyComponent, typeof KlesFormTileComponent, typeof KlesFormActionMenuComponent, typeof KlesFormCurrencyComponent, typeof KlesFormStatusComponent, typeof KlesFormChipGridComponent, typeof KlesTransformPipe, typeof ArrayFormatPipe, typeof KlesDynamicFieldDirective, typeof KlesComponentDirective, typeof MatErrorMessageDirective, typeof MatErrorFormDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KlesMaterialDynamicformsModule, never, [typeof i1.CommonModule, typeof _angular_forms.ReactiveFormsModule, typeof _angular_forms.FormsModule, typeof MaterialModule, typeof KlesDynamicFormComponent, typeof KlesFormLabelComponent, typeof KlesFormInputComponent, typeof KlesFormInputClearableComponent, typeof KlesFormBadgeComponent, typeof KlesFormFileComponent, typeof KlesFileControlComponent, typeof KlesButtonComponent, typeof KlesFormButtonComponent, typeof KlesButtonCheckerComponent, typeof KlesFormButtonCheckerComponent, typeof KlesButtonFileComponent, typeof KlesFormButtonFileComponent, typeof KlesFormDateComponent, typeof KlesFormDateTimeComponent, typeof KlesFormRadioComponent, typeof KlesFormCheckboxComponent, typeof KlesFormListFieldComponent, typeof KlesFormColorComponent, typeof KlesFormTextareaComponent, typeof KlesFormTextComponent, typeof KlesFormChipComponent, typeof KlesFormGroupComponent, typeof KlesFormIconComponent, typeof KlesFormLineBreakComponent, typeof KlesFormLinkComponent, typeof KlesFormSlideToggleComponent, typeof KlesFormSelectionListComponent, typeof KlesFormButtonToogleGroupComponent, typeof KlesFormArrayComponent, typeof KlesFormRangeComponent, typeof KlesFormClearComponent, typeof KlesFormFabComponent, typeof KlesFabComponent, typeof KlesMiniFabComponent, typeof KlesFormMiniFabComponent, typeof KlesIconButtonComponent, typeof KlesFormIconButtonComponent, typeof KlesFormSelectionListSearchComponent, typeof KlesFormCopyComponent, typeof KlesFormTileComponent, typeof KlesFormActionMenuComponent, typeof KlesFormCurrencyComponent, typeof KlesFormStatusComponent, typeof KlesFormChipGridComponent, typeof KlesFormImageUploadComponent, typeof KlesDynamicFieldDirective, typeof KlesComponentDirective, typeof MatErrorMessageDirective, typeof MatErrorFormDirective, typeof KlesTransformPipe, typeof ArrayFormatPipe], [typeof KlesDynamicFormComponent, typeof KlesFormLabelComponent, typeof KlesFormInputComponent, typeof KlesFormInputClearableComponent, typeof KlesFormBadgeComponent, typeof KlesFormFileComponent, typeof KlesFileControlComponent, typeof KlesButtonComponent, typeof KlesFormButtonComponent, typeof KlesButtonCheckerComponent, typeof KlesFormButtonCheckerComponent, typeof KlesButtonFileComponent, typeof KlesFormButtonFileComponent, typeof KlesFormDateComponent, typeof KlesFormDateTimeComponent, typeof KlesFormRadioComponent, typeof KlesFormCheckboxComponent, typeof KlesFormListFieldComponent, typeof KlesFormColorComponent, typeof KlesFormTextareaComponent, typeof KlesFormTextComponent, typeof KlesFormChipComponent, typeof KlesFormGroupComponent, typeof KlesFormIconComponent, typeof KlesFormLineBreakComponent, typeof KlesFormLinkComponent, typeof KlesFormSlideToggleComponent, typeof KlesFormSelectionListComponent, typeof KlesFormButtonToogleGroupComponent, typeof KlesFormArrayComponent, typeof KlesFormRangeComponent, typeof KlesFormClearComponent, typeof KlesFormFabComponent, typeof KlesFabComponent, typeof KlesMiniFabComponent, typeof KlesFormMiniFabComponent, typeof KlesIconButtonComponent, typeof KlesFormIconButtonComponent, typeof KlesFormSelectionListSearchComponent, typeof KlesFormCopyComponent, typeof KlesFormTileComponent, typeof KlesFormActionMenuComponent, typeof KlesFormCurrencyComponent, typeof KlesFormStatusComponent, typeof KlesFormChipGridComponent, typeof KlesFormImageUploadComponent, typeof KlesTransformPipe, typeof ArrayFormatPipe, typeof KlesDynamicFieldDirective, typeof KlesComponentDirective, typeof MatErrorMessageDirective, typeof MatErrorFormDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KlesMaterialDynamicformsModule>;
 }
 
@@ -1186,15 +1323,17 @@ declare class KlesFormPasswordVisibilityComponent implements IKlesField {
     readonly field: IKlesFieldConfig;
     readonly group: FormGroup<any>;
     readonly siblingFields: IKlesFieldConfig[];
-    readonly ui: GroupUiState<any>;
-    hide: i0.Signal<boolean>;
-    toggleVisibility(event: any): void;
+    readonly ui: GroupUiState<any> | null;
+    private readonly control;
+    readonly disabled: i0.Signal<boolean>;
+    readonly hide: i0.Signal<boolean>;
+    toggleVisibility(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormPasswordVisibilityComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormPasswordVisibilityComponent, "kles-form-password-visibility", never, {}, {}, never, never, true, never>;
 }
 
 declare class KlesFormSelectComponent extends KlesFieldAbstract implements OnInit, AfterViewInit, OnDestroy {
-    readonly searchControl: FormControl<string>;
+    readonly searchControl: FormControl<string | null>;
     readonly selectAllControl: FormControl<boolean>;
     readonly selectAllIndeterminate: i0.WritableSignal<boolean>;
     readonly isLoading: i0.WritableSignal<boolean>;
@@ -1203,6 +1342,7 @@ declare class KlesFormSelectComponent extends KlesFieldAbstract implements OnIni
     protected readonly changeDetectorRef: ChangeDetectorRef;
     private readonly matSelect;
     private readonly virtualViewport;
+    protected focus(): void;
     searchOptions: IKlesSelectSearchOptions;
     private readonly deferredQuery$;
     private sourceOptions;
@@ -1239,11 +1379,6 @@ declare class KlesFormSelectComponent extends KlesFieldAbstract implements OnIni
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormSelectComponent, "kles-form-select", never, {}, {}, never, ["*"], true, never>;
 }
 
-interface IKlesComponent {
-    component: Type<any>;
-    value: any;
-}
-
 declare class KlesFormErrorStateMatcher implements ErrorStateMatcher {
     constructor();
     isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean;
@@ -1257,12 +1392,12 @@ declare function autocompleteStringValidator(validOptions: Array<string>, option
 declare const componentMapper: {
     component: Type<any>;
     type: string;
-    factory: (field: IKlesFieldConfig, ref?: ChangeDetectorRef) => AbstractControl<any, any>;
-    ui?: (field: IKlesFieldConfig) => AbstractUiState<any, any>;
+    factory: (field: IKlesFieldConfig, ref?: ChangeDetectorRef) => AbstractControl<any, any> | null;
+    ui: (field: IKlesFieldConfig) => AbstractUiState<any, any>;
 }[];
 declare function FieldMapper(config: {
     type: string;
-    factory?: (field: IKlesFieldConfig) => AbstractControl<any, any>;
+    factory?: (field: IKlesFieldConfig) => AbstractControl<any, any> | null;
     ui?: (field: IKlesFieldConfig) => AbstractUiState<any, any>;
 }): (target: Type<any>) => void;
 
@@ -1271,17 +1406,17 @@ declare const klesFieldUiFactory: (field: IKlesFieldConfig) => AbstractUiState;
 
 interface IKlesControl {
     create(): AbstractControl;
-    bindValidations(validations: IKlesValidator<ValidatorFn>[]): ValidatorFn;
-    bindAsyncValidations(validations: IKlesValidator<AsyncValidatorFn>[]): AsyncValidatorFn;
+    bindValidations(validations: IKlesValidator<ValidatorFn>[]): ValidatorFn | null;
+    bindAsyncValidations(validations: IKlesValidator<AsyncValidatorFn>[]): AsyncValidatorFn | null;
 }
 
 declare abstract class KlesAbstractFormControl implements IKlesControl {
     protected field: IKlesFieldConfig;
-    protected ref?: ChangeDetectorRef;
-    constructor(field: IKlesFieldConfig, ref?: ChangeDetectorRef);
+    protected ref?: ChangeDetectorRef | undefined;
+    constructor(field: IKlesFieldConfig, ref?: ChangeDetectorRef | undefined);
     abstract create(): AbstractControl;
-    bindValidations(validations: IKlesValidator<ValidatorFn>[]): ValidatorFn;
-    bindAsyncValidations(validations: IKlesValidator<AsyncValidatorFn>[]): AsyncValidatorFn;
+    bindValidations(validations: IKlesValidator<ValidatorFn>[]): ValidatorFn | null;
+    bindAsyncValidations(validations: IKlesValidator<AsyncValidatorFn>[]): AsyncValidatorFn | null;
 }
 
 declare class KlesFormControl extends KlesAbstractFormControl {
@@ -1301,7 +1436,7 @@ declare class KlesFormRange extends KlesFormControl {
 }
 
 interface Destroyable {
-    destroy(): any;
+    destroy(): void;
 }
 declare function isDestroyable(value: unknown): value is Destroyable;
 
@@ -1341,5 +1476,5 @@ declare const GROUP_UI: InjectionToken<GroupUiState<any>>;
 declare const FIELD: InjectionToken<IKlesFieldConfig>;
 declare const FIELD_CONTEXT: InjectionToken<Signal<unknown>>;
 
-export { AbstractUiState, ArrayFormatPipe, ArrayUiState, ControlUiState, EnumType, FIELD, FIELD_CONTEXT, FIELD_NAME, FieldMapper, GROUP, GROUP_UI, GroupUiState, KlesAbstractFormControl, KlesAbstractFormUiControl, KlesButtonBase, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesCurrencyValueAccessorDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesDynamicFormIntl, KlesFabComponent, KlesFieldAbstract, KlesFileControlComponent, KlesFormActionMenuComponent, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormCheckboxIndeterminateComponent, KlesFormChipComponent, KlesFormChipGridComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormCopyComponent, KlesFormCurrencyComponent, KlesFormDateComponent, KlesFormDateTimeComponent, KlesFormErrorStateMatcher, KlesFormFabComponent, KlesFormFileComponent, KlesFormGroup, KlesFormGroupComponent, KlesFormIconButtonComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormMiniFabComponent, KlesFormPasswordVisibilityComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectionListComponent, KlesFormSelectionListSearchComponent, KlesFormSlideToggleComponent, KlesFormStatusComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesFormTileComponent, KlesFormUiArray, KlesFormUiControl, KlesFormUiGroup, KlesIconButtonComponent, KlesIndeterminateCheckboxComponent, KlesMaterialDynamicformsModule, KlesMiniFabComponent, KlesSelectionModel, KlesTransformPipe, MatErrorFormDirective, MatErrorMessageDirective, SIBLING_FIELDS, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, isDestroyable, klesFieldControlFactory, klesFieldUiFactory };
-export type { Destroyable, IButton, IButtonChecker, IButtonFile, IKlesClearControl, IKlesComponent, IKlesControl, IKlesCurrencyOptions, IKlesDirective, IKlesField, IKlesFieldActionEvent, IKlesFieldConfig, IKlesFieldUi, IKlesFieldUiResolveEvent, IKlesFieldUiResolver, IKlesFormField, IKlesSelectSearchOptions, IKlesStatusDefinition, IKlesStatusOptions, IKlesUi, IKlesValidator, IUIButton, KlesActionMenuCondition, KlesActionMenuFieldConfig, KlesActionMenuItem, KlesStatusAppearance, KlesStatusTone, KlesValidationKey };
+export { AbstractUiState, ArrayFormatPipe, ArrayUiState, ControlUiState, EnumType, FIELD, FIELD_CONTEXT, FIELD_NAME, FieldMapper, GROUP, GROUP_UI, GroupUiState, KlesAbstractFormControl, KlesAbstractFormUiControl, KlesButtonBase, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesCurrencyValueAccessorDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesDynamicFormIntl, KlesFabComponent, KlesFieldAbstract, KlesFileControlComponent, KlesFocusTargetDirective, KlesFormActionMenuComponent, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormChipComponent, KlesFormChipGridComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormCopyComponent, KlesFormCurrencyComponent, KlesFormDateComponent, KlesFormDateTimeComponent, KlesFormErrorStateMatcher, KlesFormFabComponent, KlesFormFileComponent, KlesFormGroup, KlesFormGroupComponent, KlesFormIconButtonComponent, KlesFormIconComponent, KlesFormImageUploadComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormMiniFabComponent, KlesFormPasswordVisibilityComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectionListComponent, KlesFormSelectionListSearchComponent, KlesFormSlideToggleComponent, KlesFormStatusComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesFormTileComponent, KlesFormUiArray, KlesFormUiControl, KlesFormUiGroup, KlesIconButtonComponent, KlesMaterialDynamicformsModule, KlesMiniFabComponent, KlesSelectionModel, KlesTransformPipe, MatErrorFormDirective, MatErrorMessageDirective, SIBLING_FIELDS, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, flattenKlesFields, isDestroyable, isKlesStructuralElement, klesFieldControlFactory, klesFieldUiFactory };
+export type { Destroyable, IButton, IButtonChecker, IButtonFile, IKlesClearControl, IKlesComponent, IKlesControl, IKlesCurrencyOptions, IKlesDirective, IKlesElementLayout, IKlesElementLayoutBreakpoint, IKlesField, IKlesFieldActionEvent, IKlesFieldConfig, IKlesFieldUi, IKlesFieldUiResolveEvent, IKlesFieldUiResolver, IKlesFormDivider, IKlesFormField, IKlesFormLayoutGroup, IKlesFormSection, IKlesFormSpacer, IKlesImageUploadOptions, IKlesLayoutConfig, IKlesSelectSearchOptions, IKlesStatusDefinition, IKlesStatusOptions, IKlesUi, IKlesValidator, IUIButton, KlesActionMenuCondition, KlesActionMenuFieldConfig, KlesActionMenuItem, KlesComponentType, KlesFileControlValue, KlesFileValue, KlesFormElement, KlesFormStructuralElement, KlesGetProperty, KlesStatusAppearance, KlesStatusTone, KlesTypedOrUntyped, KlesValidationKey };