@3kles/kles-material-dynamicforms 19.3.2 → 19.4.1

package/lib/controls/control.abstract.d.ts

@@ -1,8 +1,8 @@
-import { AbstractControl, ValidatorFn, AsyncValidatorFn } from "@angular/forms";
-import { IKlesValidator } from "../interfaces/validator.interface";
-import { IKlesFieldConfig } from "../interfaces/field.config.interface";
-import { IKlesControl } from "./control.interface";
-import { ChangeDetectorRef } from "@angular/core";
+import { AbstractControl, ValidatorFn, AsyncValidatorFn } from '@angular/forms';
+import { IKlesValidator } from '../interfaces/validator.interface';
+import { IKlesFieldConfig } from '../interfaces/field.config.interface';
+import { IKlesControl } from './control.interface';
+import { ChangeDetectorRef } from '@angular/core';
 export declare abstract class KlesAbstractFormControl implements IKlesControl {
     protected field: IKlesFieldConfig;
     protected ref?: ChangeDetectorRef;

package/lib/decorators/component.decorator.d.ts

@@ -1,12 +1,15 @@
 import { ChangeDetectorRef, Type } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import { IKlesFieldConfig } from '../interfaces/field.config.interface';
+import { AbstractUiState } from '../ui/ui-state/ui-state.abstract';
 export declare const componentMapper: {
     component: Type<any>;
     type: string;
-    factory: ((field: IKlesFieldConfig, ref?: ChangeDetectorRef) => AbstractControl<any, any>);
+    factory: (field: IKlesFieldConfig, ref?: ChangeDetectorRef) => AbstractControl<any, any>;
+    ui?: (field: IKlesFieldConfig) => AbstractUiState<any, any>;
 }[];
 export declare function FieldMapper(config: {
     type: string;
     factory?: (field: IKlesFieldConfig) => AbstractControl<any, any>;
+    ui?: (field: IKlesFieldConfig) => AbstractUiState<any, any>;
 }): (target: Type<any>) => void;

package/lib/directive/dynamic-field.directive.d.ts

@@ -1,12 +1,14 @@
 import { OnInit, ViewContainerRef, ComponentRef, OnChanges, SimpleChanges, OnDestroy, Injector } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { IKlesFieldConfig } from '../interfaces/field.config.interface';
+import { GroupUiState } from '../ui/ui-state/group-ui-state';
 import * as i0 from "@angular/core";
 export declare class KlesDynamicFieldDirective implements OnInit, OnChanges, OnDestroy {
     protected container: ViewContainerRef;
     private injector;
     field: IKlesFieldConfig;
     group: UntypedFormGroup;
+    ui: GroupUiState;
     siblingFields: IKlesFieldConfig[];
     componentRef: ComponentRef<any>;
     subComponents: ComponentRef<any>[];
@@ -18,5 +20,5 @@ export declare class KlesDynamicFieldDirective implements OnInit, OnChanges, OnD
     protected createComponentRef(injector: Injector): ComponentRef<any>;
     private createSubComponent;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesDynamicFieldDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KlesDynamicFieldDirective, "[klesDynamicField]", never, { "field": { "alias": "field"; "required": false; }; "group": { "alias": "group"; "required": false; }; "siblingFields": { "alias": "siblingFields"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KlesDynamicFieldDirective, "[klesDynamicField]", never, { "field": { "alias": "field"; "required": false; }; "group": { "alias": "group"; "required": false; }; "ui": { "alias": "ui"; "required": false; }; "siblingFields": { "alias": "siblingFields"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/dynamic-form.component.d.ts

@@ -2,6 +2,7 @@ import { OnInit, EventEmitter, OnChanges, SimpleChanges, ChangeDetectorRef } fro
 import { UntypedFormGroup, UntypedFormBuilder, ValidatorFn, AsyncValidatorFn } from '@angular/forms';
 import { IKlesFieldConfig } from './interfaces/field.config.interface';
 import { IKlesValidator } from './interfaces/validator.interface';
+import { GroupUiState } from './ui/ui-state/group-ui-state';
 import * as i0 from "@angular/core";
 export declare class KlesDynamicFormComponent implements OnInit, OnChanges {
     private fb;
@@ -16,6 +17,7 @@ export declare class KlesDynamicFormComponent implements OnInit, OnChanges {
         [klass: string]: any;
     };
     form: UntypedFormGroup;
+    ui: GroupUiState;
     orientationClass: 'dynamic-form-column' | 'dynamic-form-row' | 'dynamic-form-grid' | 'dynamic-form-inline-grid';
     get value(): any;
     constructor(fb: UntypedFormBuilder, ref: ChangeDetectorRef);
@@ -26,8 +28,10 @@ export declare class KlesDynamicFormComponent implements OnInit, OnChanges {
     private updateForm;
     private updateControl;
     private createControl;
+    private createUiState;
     private createForm;
     private validateAllFormFields;
+    private createUi;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesDynamicFormComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesDynamicFormComponent, "app-kles-dynamic-form", ["klesDynamicForm"], { "fields": { "alias": "fields"; "required": false; }; "validators": { "alias": "validators"; "required": false; }; "asyncValidators": { "alias": "asyncValidators"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "formClass": { "alias": "formClass"; "required": false; }; }, { "submit": "submit"; "_onLoaded": "_onLoaded"; }, never, never, true, never>;
 }

package/lib/factories/field.factory.d.ts

@@ -1,3 +1,4 @@
-import { ChangeDetectorRef } from "@angular/core";
-import { IKlesFieldConfig } from "../interfaces/field.config.interface";
+import { ChangeDetectorRef } from '@angular/core';
+import { IKlesFieldConfig } from '../interfaces/field.config.interface';
 export declare const klesFieldControlFactory: (field: IKlesFieldConfig, ref?: ChangeDetectorRef) => import("@angular/forms").AbstractControl<any, any>;
+export declare const klesFieldUiFactory: (field: IKlesFieldConfig) => import("@3kles/kles-material-dynamicforms").AbstractUiState<any, any>;

package/lib/fields/array.component.d.ts

@@ -1,9 +1,12 @@
 import { OnDestroy, OnInit } from '@angular/core';
 import { UntypedFormArray } from '@angular/forms';
 import { KlesFieldAbstract } from './field.abstract';
+import { ArrayUiState } from '../ui/ui-state/array-ui-state';
 import * as i0 from "@angular/core";
 export declare class KlesFormArrayComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
     formArray: UntypedFormArray;
+    subUi: ArrayUiState;
+    constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormArrayComponent, never>;

package/lib/fields/checkbox.component.d.ts

@@ -1,9 +1,11 @@
 import { OnDestroy, OnInit } from '@angular/core';
 import { KlesFieldAbstract } from './field.abstract';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 import * as i0 from "@angular/core";
 export declare class KlesFormCheckboxComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
+    onChange(e: MatCheckboxChange): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormCheckboxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormCheckboxComponent, "kles-form-checkbox", never, {}, {}, never, never, true, never>;
 }

package/lib/fields/date.component.d.ts

@@ -1,4 +1,4 @@
-import { OnDestroy, OnInit } from "@angular/core";
+import { OnDestroy, OnInit } from '@angular/core';
 import { KlesFieldAbstract } from './field.abstract';
 import * as i0 from "@angular/core";
 export declare class KlesFormDateComponent extends KlesFieldAbstract implements OnInit, OnDestroy {

package/lib/fields/field.abstract.d.ts

@@ -1,17 +1,31 @@
-import { IKlesField } from '../interfaces/field.interface';
-import { IKlesFieldConfig } from '../interfaces/field.config.interface';
-import { UntypedFormGroup } from '@angular/forms';
 import { AfterViewInit, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
 import { Subject } from 'rxjs';
+import { IKlesField } from '../interfaces/field.interface';
+import type { IKlesFieldConfig } from '../interfaces/field.config.interface';
+import { FormGroup } from '@angular/forms';
+import { GroupUiState } from '../ui/ui-state/group-ui-state';
 import * as i0 from "@angular/core";
 export declare abstract class KlesFieldAbstract implements IKlesField, OnInit, AfterViewInit, OnDestroy {
-    protected viewRef: ViewContainerRef;
-    field: IKlesFieldConfig;
-    group: UntypedFormGroup;
-    siblingFields: IKlesFieldConfig[];
+    readonly field: IKlesFieldConfig;
+    readonly group: FormGroup<any>;
+    readonly siblingFields: IKlesFieldConfig[];
+    readonly ui: GroupUiState<any>;
+    appearance: import("@angular/core").Signal<any>;
+    inputType: import("@angular/core").Signal<any>;
+    min: import("@angular/core").Signal<any>;
+    max: import("@angular/core").Signal<any>;
+    maxLength: import("@angular/core").Signal<any>;
+    step: import("@angular/core").Signal<any>;
+    ngClass: import("@angular/core").Signal<any>;
+    ngStyle: import("@angular/core").Signal<any>;
+    indeterminate: import("@angular/core").Signal<any>;
+    color: import("@angular/core").Signal<any>;
+    icon: import("@angular/core").Signal<any>;
+    iconSvg: import("@angular/core").Signal<any>;
+    protected readonly viewRef: ViewContainerRef;
     directive: any;
     protected _onDestroy: Subject<void>;
-    constructor(viewRef: ViewContainerRef);
+    constructor();
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -20,5 +34,5 @@ export declare abstract class KlesFieldAbstract implements IKlesField, OnInit, A
     onFocus(): void;
     onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFieldAbstract, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KlesFieldAbstract, never, never, { "field": { "alias": "field"; "required": false; }; "group": { "alias": "group"; "required": false; }; "siblingFields": { "alias": "siblingFields"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KlesFieldAbstract, never, never, {}, {}, never, never, true, never>;
 }

package/lib/fields/group.component.d.ts

@@ -1,11 +1,13 @@
 import { OnDestroy, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { KlesFieldAbstract } from './field.abstract';
+import { GroupUiState } from '../ui/ui-state/group-ui-state';
 import * as i0 from "@angular/core";
 export declare class KlesFormGroupComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
     orientationClass: 'group-container' | 'group-container-column' | 'group-container-row' | 'group-container-grid' | 'group-container-inline-grid';
     get className(): "group-container" | "group-container-column" | "group-container-row" | "group-container-grid" | "group-container-inline-grid";
     subGroup: UntypedFormGroup;
+    subUi: GroupUiState;
     ngOnInit(): void;
     ngOnDestroy(): void;
     private setOrientationClass;

package/lib/fields/icon.component.d.ts

@@ -1,4 +1,4 @@
-import { OnDestroy, OnInit } from "@angular/core";
+import { OnDestroy, OnInit } from '@angular/core';
 import { KlesFieldAbstract } from './field.abstract';
 import * as i0 from "@angular/core";
 export declare class KlesFormIconComponent extends KlesFieldAbstract implements OnInit, OnDestroy {

package/lib/fields/input.clearable.component.d.ts

@@ -1,11 +1,7 @@
-import { OnInit, OnDestroy, ViewContainerRef } from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
 import { KlesFormInputComponent } from './input.component';
-import { KlesDynamicFormIntl } from '../dynamic-form-intl';
 import * as i0 from "@angular/core";
 export declare class KlesFormInputClearableComponent extends KlesFormInputComponent implements OnInit, OnDestroy {
-    protected viewRef: ViewContainerRef;
-    intl: KlesDynamicFormIntl;
-    constructor(viewRef: ViewContainerRef, intl: KlesDynamicFormIntl);
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormInputClearableComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormInputClearableComponent, "kles-form-input-clearable", never, {}, {}, never, never, true, never>;

package/lib/fields/input.component.d.ts

@@ -1,11 +1,9 @@
 import { KlesFieldAbstract } from './field.abstract';
-import { OnInit, OnDestroy, ViewContainerRef } from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
 import { KlesDynamicFormIntl } from '../dynamic-form-intl';
 import * as i0 from "@angular/core";
 export declare class KlesFormInputComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
-    protected viewRef: ViewContainerRef;
-    intl: KlesDynamicFormIntl;
     filteredOption$: Observable<{
         loading: boolean;
         options: any[];
@@ -16,7 +14,8 @@ export declare class KlesFormInputComponent extends KlesFieldAbstract implements
     }>;
     private isFocused;
     isLoading: import("@angular/core").WritableSignal<boolean>;
-    constructor(viewRef: ViewContainerRef, intl: KlesDynamicFormIntl);
+    intl: KlesDynamicFormIntl;
+    constructor();
     ngOnInit(): void;
     onFocus(): void;
     private filterData;

package/lib/fields/label.component.d.ts

@@ -1,7 +1,8 @@
-import { OnDestroy, OnInit } from "@angular/core";
+import { OnDestroy, OnInit } from '@angular/core';
 import { KlesFieldAbstract } from './field.abstract';
 import * as i0 from "@angular/core";
 export declare class KlesFormLabelComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
+    constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormLabelComponent, never>;

package/lib/fields/list-field.component.d.ts

@@ -1,14 +1,12 @@
-import { OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
 import { KlesFieldAbstract } from './field.abstract';
-import { UntypedFormArray, UntypedFormBuilder } from '@angular/forms';
+import { UntypedFormArray } from '@angular/forms';
 import { IKlesFieldConfig } from '../interfaces/field.config.interface';
 import * as i0 from "@angular/core";
 export declare class KlesFormListFieldComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
-    private fb;
-    protected viewRef: ViewContainerRef;
     formArray: UntypedFormArray;
     collections: IKlesFieldConfig[][];
-    constructor(fb: UntypedFormBuilder, viewRef: ViewContainerRef);
+    private fb;
     ngOnInit(): void;
     private createFormGroup;
     deleteField(index: number): void;

package/lib/fields/select.component.d.ts

@@ -1,20 +1,18 @@
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { ChangeDetectorRef, OnDestroy, OnInit, QueryList, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { MatOption } from '@angular/material/core';
 import { Observable, Subject } from 'rxjs';
 import { KlesFieldAbstract } from './field.abstract';
 import { KlesDynamicFormIntl } from '../dynamic-form-intl';
 import * as i0 from "@angular/core";
 export declare class KlesFormSelectComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
-    protected viewRef: ViewContainerRef;
-    protected ref: ChangeDetectorRef;
-    intl: KlesDynamicFormIntl;
     cdkVirtualScrollViewport: CdkVirtualScrollViewport;
     options: QueryList<MatOption>;
     options$: Observable<any[]>;
     isLoading: boolean;
     openChange$: Subject<boolean>;
-    constructor(viewRef: ViewContainerRef, ref: ChangeDetectorRef, intl: KlesDynamicFormIntl);
+    intl: KlesDynamicFormIntl;
+    protected ref: ChangeDetectorRef;
     ngOnInit(): void;
     ngOnDestroy(): void;
     openChange($event: boolean): void;

package/lib/fields/select.lazy-search.component.d.ts

@@ -1,13 +1,8 @@
-import { ChangeDetectorRef, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { KlesFormSelectSearchComponent } from './select.search.component';
-import { KlesDynamicFormIntl } from '../dynamic-form-intl';
 import * as i0 from "@angular/core";
 export declare class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent implements OnInit, OnDestroy {
-    protected viewRef: ViewContainerRef;
-    protected ref: ChangeDetectorRef;
-    intl: KlesDynamicFormIntl;
-    constructor(viewRef: ViewContainerRef, ref: ChangeDetectorRef, intl: KlesDynamicFormIntl);
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected onSearchChange(value: string): Observable<any[]>;

package/lib/fields/select.search.component.d.ts

@@ -1,5 +1,5 @@
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { ChangeDetectorRef, OnDestroy, OnInit, QueryList, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { MatOption } from '@angular/material/core';
 import { BehaviorSubject, Observable, ReplaySubject, Subject } from 'rxjs';
@@ -7,9 +7,6 @@ import { KlesFieldAbstract } from './field.abstract';
 import { KlesDynamicFormIntl } from '../dynamic-form-intl';
 import * as i0 from "@angular/core";
 export declare class KlesFormSelectSearchComponent extends KlesFieldAbstract implements OnInit, OnDestroy {
-    protected viewRef: ViewContainerRef;
-    protected ref: ChangeDetectorRef;
-    intl: KlesDynamicFormIntl;
     searchControl: UntypedFormControl;
     selectAllControl: UntypedFormControl;
     isLoading: import("@angular/core").WritableSignal<boolean>;
@@ -19,7 +16,8 @@ export declare class KlesFormSelectSearchComponent extends KlesFieldAbstract imp
     openClosed$: Subject<void>;
     cdkVirtualScrollViewport: CdkVirtualScrollViewport;
     options: QueryList<MatOption>;
-    constructor(viewRef: ViewContainerRef, ref: ChangeDetectorRef, intl: KlesDynamicFormIntl);
+    intl: KlesDynamicFormIntl;
+    protected ref: ChangeDetectorRef;
     ngOnInit(): void;
     ngOnDestroy(): void;
     toggleAllSelection(state: any): void;

package/lib/fields/subfields/clear.component.d.ts

@@ -1,13 +1,18 @@
-import { UntypedFormGroup } from "@angular/forms";
-import { IKlesClearControl } from "../../interfaces/clear-control.interface";
-import { IKlesFieldConfig } from "../../interfaces/field.config.interface";
+import { OnDestroy, Signal } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { IKlesClearControl } from '../../interfaces/clear-control.interface';
+import { IKlesFieldConfig } from '../../interfaces/field.config.interface';
 import * as i0 from "@angular/core";
-export declare class KlesFormClearComponent implements IKlesClearControl {
-    field: IKlesFieldConfig;
-    group: UntypedFormGroup;
-    siblingFields: IKlesFieldConfig[];
+export declare class KlesFormClearComponent implements IKlesClearControl, OnDestroy {
+    readonly field: IKlesFieldConfig;
+    readonly group: FormGroup<any>;
+    readonly siblingFields: IKlesFieldConfig[];
+    private _onDestroy;
+    disabled: Signal<boolean>;
+    constructor();
+    ngOnDestroy(): void;
     clear(event: any): void;
-    isDisable(): boolean;
+    private isPresent;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormClearComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormClearComponent, "kles-form-clear", never, { "field": { "alias": "field"; "required": false; }; "group": { "alias": "group"; "required": false; }; "siblingFields": { "alias": "siblingFields"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormClearComponent, "kles-form-clear", never, {}, {}, never, never, true, never>;
 }

package/lib/fields/subfields/copy.component.d.ts

@@ -0,0 +1,18 @@
+import { FormGroup } from '@angular/forms';
+import { MatTooltip } from '@angular/material/tooltip';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { IKlesField } from '../../interfaces/field.interface';
+import { IKlesFieldConfig } from '../../interfaces/field.config.interface';
+import * as i0 from "@angular/core";
+export declare class KlesFormCopyComponent implements IKlesField {
+    private clipBoard;
+    tooltip: MatTooltip;
+    readonly field: IKlesFieldConfig;
+    readonly group: FormGroup<any>;
+    readonly siblingFields: IKlesFieldConfig[];
+    tooltipText: string;
+    constructor(clipBoard: Clipboard);
+    copy(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormCopyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormCopyComponent, "kles-form-copy", never, {}, {}, never, never, true, never>;
+}

package/lib/fields/subfields/password-visibility.component.d.ts

@@ -1,13 +1,13 @@
-import { UntypedFormGroup } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 import { IKlesFieldConfig } from '../../interfaces/field.config.interface';
 import { IKlesField } from '../../interfaces/field.interface';
 import * as i0 from "@angular/core";
 export declare class KlesFormPasswordVisibilityComponent implements IKlesField {
-    field: IKlesFieldConfig;
-    group: UntypedFormGroup;
-    siblingFields: IKlesFieldConfig[];
-    hide: boolean;
+    readonly field: IKlesFieldConfig;
+    readonly group: FormGroup<any>;
+    readonly siblingFields: IKlesFieldConfig[];
+    hide: import("@angular/core").WritableSignal<boolean>;
     toggleVisibility(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KlesFormPasswordVisibilityComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormPasswordVisibilityComponent, "kles-form-password-visibility", never, { "field": { "alias": "field"; "required": false; }; "group": { "alias": "group"; "required": false; }; "siblingFields": { "alias": "siblingFields"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KlesFormPasswordVisibilityComponent, "kles-form-password-visibility", never, {}, {}, never, never, true, never>;
 }

package/lib/interfaces/field.config.interface.d.ts

@@ -8,26 +8,48 @@ import { IKlesDirective } from './directive.interface';
 import { DateAdapter, MatDateFormats } from '@angular/material/core';
 import { EnumButtonAttribute } from '../enums/button-attribute.enum';
 import { SubscriptSizing } from '@angular/material/form-field';
-export interface IKlesFieldConfig {
-    type?: EnumType;
-    name: string;
-    component?: Type<any>;
-    id?: string;
-    label?: string;
-    placeholder?: any;
-    tooltip?: string;
-    copyTooltip?: string;
+export interface IKlesFieldUi {
     inputType?: 'text' | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'time' | 'url' | 'week';
     min?: number | Date;
     max?: number | Date;
     maxLength?: number;
     step?: number;
-    options?: any[] | Subject<any[]> | Observable<any[]> | ((value?: string) => Observable<any[]>);
     hostClass?: string | string[] | Set<string> | {
         [klass: string]: any;
     };
     ngClass?: any;
     ngStyle?: any;
+    indeterminate?: boolean;
+    color?: string;
+    icon?: string;
+    iconSvg?: string;
+    appearance?: 'fill' | 'outline';
+    visible?: boolean;
+    colorOption?: {
+        disable?: boolean;
+        position?: 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+        positionOffset?: string;
+        mode?: 'color' | 'grayscale' | 'presets';
+        format?: 'auto' | 'hex' | 'rgba' | 'hsla';
+    };
+    direction?: 'column' | 'row' | 'grid' | 'inline-grid';
+    textareaAutoSize?: {
+        minRows?: number;
+        maxRows?: number;
+    };
+    virtualScroll?: boolean;
+    itemSize?: number;
+}
+export interface IKlesFormField {
+    type?: EnumType;
+    name: string;
+    component?: Type<any>;
+    id?: string;
+    label?: string;
+    placeholder?: any;
+    tooltip?: string;
+    copyTooltip?: string;
+    options?: any[] | Subject<any[]> | Observable<any[]> | ((value?: string) => Observable<any[]>);
     property?: string;
     collections?: any;
     value?: any;
@@ -38,31 +60,19 @@ export interface IKlesFieldConfig {
     autocompleteComponent?: Type<any>;
     displayWith?: ((value: any) => string) | null;
     panelWidth?: string | number;
-    indeterminate?: boolean;
-    color?: string;
-    icon?: string;
-    iconSvg?: string;
-    textareaAutoSize?: {
-        minRows?: number;
-        maxRows?: number;
-    };
+    pending?: boolean;
     validations?: IKlesValidator<ValidatorFn>[];
     asyncValidations?: IKlesValidator<AsyncValidatorFn>[];
     pipeTransform?: {
         pipe: PipeTransform;
         options?: any[];
     }[];
-    direction?: 'column' | 'row' | 'grid' | 'inline-grid';
-    valueChanges?: ((field: IKlesFieldConfig, group: UntypedFormGroup, siblingField?: IKlesFieldConfig[], valueChanged?: any) => void);
+    valueChanges?: (field: IKlesFieldConfig, group: UntypedFormGroup, siblingField?: IKlesFieldConfig[], valueChanged?: any) => void;
     triggerComponent?: Type<any>;
-    virtualScroll?: boolean;
-    itemSize?: number;
-    pending?: boolean;
     searchKeys?: string[];
     updateOn?: 'change' | 'blur' | 'submit';
     debounceTime?: number;
-    directive?: (new (ref: ViewContainerRef, field: IKlesField) => IKlesDirective);
-    visible?: boolean;
+    directive?: new (ref: ViewContainerRef, field: IKlesField) => IKlesDirective;
     lazy?: boolean;
     buttonType?: 'submit' | 'button' | 'reset';
     accept?: string;
@@ -82,15 +92,8 @@ export interface IKlesFieldConfig {
     attribute?: EnumButtonAttribute;
     subscriptSizing?: SubscriptSizing;
     nonNullable?: boolean;
-    appearance?: 'fill' | 'outline';
-    colorOption?: {
-        disable?: boolean;
-        position?: 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-        positionOffset?: string;
-        mode?: 'color' | 'grayscale' | 'presets';
-        format?: 'auto' | 'hex' | 'rgba' | 'hsla';
-    };
-    onFocus?: ((field: IKlesFieldConfig, group: UntypedFormGroup) => void);
-    onBlur?: ((field: IKlesFieldConfig, group: UntypedFormGroup) => void);
+    onFocus?: (field: IKlesFieldConfig, group: UntypedFormGroup) => void;
+    onBlur?: (field: IKlesFieldConfig, group: UntypedFormGroup) => void;
     providers?: Array<Provider | StaticProvider>;
 }
+export type IKlesFieldConfig = IKlesFormField & IKlesFieldUi;

package/lib/kles-material-dynamicforms.module.d.ts

@@ -2,19 +2,15 @@ import { KlesDynamicFormComponent } from './dynamic-form.component';
 import { KlesComponentDirective } from './directive/dynamic-component.directive';
 import { KlesDynamicFieldDirective } from './directive/dynamic-field.directive';
 import { KlesFormLabelComponent } from './fields/label.component';
-import { KlesFormInputComponent } from './fields/input.component';
-import { KlesFormSelectComponent } from './fields/select.component';
-import { KlesFormListFieldComponent } from './fields/list-field.component';
 import { KlesTransformPipe } from './pipe/transform.pipe';
-import { KlesFormSelectSearchComponent } from './fields/select.search.component';
 import { ArrayFormatPipe } from './pipe/array.pipe';
 import { KlesFormClearComponent } from './fields/subfields/clear.component';
 import { KlesFabComponent } from './forms/fab-control.component';
 import { MatErrorMessageDirective } from './directive/mat-error-message.directive';
 import { MatErrorFormDirective } from './directive/mat-error-form.directive';
 import { KlesIndeterminateCheckboxComponent } from './forms/indeterminate-checkbox';
-import { KlesFormCopyComponent } from './fields/copy.component';
 import { KlesFileControlComponent } from './forms/file-control.component';
+import { KlesFormCopyComponent } from './fields/subfields/copy.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
@@ -63,7 +59,7 @@ import * as i44 from "./fields/button-mini-fab.component";
 import * as i45 from "./forms/icon-button-control.component";
 import * as i46 from "./fields/button-icon.component";
 import * as i47 from "./fields/selection-list.search.component";
-import * as i48 from "./fields/copy.component";
+import * as i48 from "./fields/subfields/copy.component";
 import * as i49 from "./directive/dynamic-field.directive";
 import * as i50 from "./directive/dynamic-component.directive";
 import * as i51 from "./directive/mat-error-message.directive";
@@ -72,7 +68,7 @@ import * as i53 from "./pipe/transform.pipe";
 import * as i54 from "./pipe/array.pipe";
 import * as i55 from "ngx-color-picker";
 export declare class KlesMaterialDynamicformsModule {
-    static declarations: ((typeof KlesFormClearComponent | typeof KlesDynamicFormComponent | typeof KlesFormLabelComponent | typeof KlesFormInputComponent | typeof KlesFormSelectComponent | typeof KlesFormListFieldComponent | typeof KlesFormSelectSearchComponent | typeof KlesFabComponent | typeof KlesIndeterminateCheckboxComponent | typeof KlesFormCopyComponent | typeof KlesFileControlComponent)[] | (typeof KlesDynamicFieldDirective | typeof MatErrorFormDirective | typeof KlesComponentDirective | typeof MatErrorMessageDirective)[] | (typeof KlesTransformPipe | typeof ArrayFormatPipe)[])[];
+    static declarations: ((typeof KlesFormClearComponent | typeof KlesDynamicFormComponent | typeof KlesFormLabelComponent | typeof KlesFabComponent | typeof KlesIndeterminateCheckboxComponent | 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.ReactiveFormsModule, typeof i2.FormsModule, typeof i3.MaterialModule, typeof i4.NgxMatSelectSearchModule, typeof i5.KlesDynamicFormComponent, typeof i6.KlesFormLabelComponent, typeof i7.KlesFormInputComponent, typeof i8.KlesFormInputClearableComponent, typeof i9.KlesFormBadgeComponent, typeof i10.KlesFormFileComponent, typeof i11.KlesFileControlComponent, typeof i12.KlesButtonComponent, typeof i13.KlesFormButtonComponent, typeof i14.KlesButtonCheckerComponent, typeof i15.KlesFormButtonCheckerComponent, typeof i16.KlesButtonFileComponent, typeof i17.KlesFormButtonFileComponent, typeof i18.KlesFormSelectComponent, typeof i19.KlesFormDateComponent, typeof i20.KlesFormRadioComponent, typeof i21.KlesFormCheckboxComponent, typeof i22.KlesIndeterminateCheckboxComponent, typeof i23.KlesFormCheckboxIndeterminateComponent, typeof i24.KlesFormListFieldComponent, typeof i25.KlesFormColorComponent, typeof i26.KlesFormTextareaComponent, typeof i27.KlesFormTextComponent, typeof i28.KlesFormChipComponent, typeof i29.KlesFormGroupComponent, typeof i30.KlesFormIconComponent, typeof i31.KlesFormSelectSearchComponent, typeof i32.KlesFormLineBreakComponent, typeof i33.KlesFormLinkComponent, typeof i34.KlesFormSlideToggleComponent, typeof i35.KlesFormSelectionListComponent, typeof i36.KlesFormButtonToogleGroupComponent, typeof i37.KlesFormArrayComponent, typeof i38.KlesFormRangeComponent, typeof i39.KlesFormClearComponent, typeof i40.KlesFormSelectLazySearchComponent, typeof i41.KlesFormFabComponent, typeof i42.KlesFabComponent, typeof i43.KlesMiniFabComponent, typeof i44.KlesFormMiniFabComponent, typeof i45.KlesIconButtonComponent, typeof i46.KlesFormIconButtonComponent, typeof i47.KlesFormSelectionListSearchComponent, typeof i48.KlesFormCopyComponent, typeof i49.KlesDynamicFieldDirective, typeof i50.KlesComponentDirective, typeof i51.MatErrorMessageDirective, typeof i52.MatErrorFormDirective, typeof i53.KlesTransformPipe, typeof i54.ArrayFormatPipe, typeof i55.ColorPickerComponent, typeof i55.ColorPickerDirective], [typeof i5.KlesDynamicFormComponent, typeof i6.KlesFormLabelComponent, typeof i7.KlesFormInputComponent, typeof i8.KlesFormInputClearableComponent, typeof i9.KlesFormBadgeComponent, typeof i10.KlesFormFileComponent, typeof i11.KlesFileControlComponent, typeof i12.KlesButtonComponent, typeof i13.KlesFormButtonComponent, typeof i14.KlesButtonCheckerComponent, typeof i15.KlesFormButtonCheckerComponent, typeof i16.KlesButtonFileComponent, typeof i17.KlesFormButtonFileComponent, typeof i18.KlesFormSelectComponent, typeof i19.KlesFormDateComponent, typeof i20.KlesFormRadioComponent, typeof i21.KlesFormCheckboxComponent, typeof i22.KlesIndeterminateCheckboxComponent, typeof i23.KlesFormCheckboxIndeterminateComponent, typeof i24.KlesFormListFieldComponent, typeof i25.KlesFormColorComponent, typeof i26.KlesFormTextareaComponent, typeof i27.KlesFormTextComponent, typeof i28.KlesFormChipComponent, typeof i29.KlesFormGroupComponent, typeof i30.KlesFormIconComponent, typeof i31.KlesFormSelectSearchComponent, typeof i32.KlesFormLineBreakComponent, typeof i33.KlesFormLinkComponent, typeof i34.KlesFormSlideToggleComponent, typeof i35.KlesFormSelectionListComponent, typeof i36.KlesFormButtonToogleGroupComponent, typeof i37.KlesFormArrayComponent, typeof i38.KlesFormRangeComponent, typeof i39.KlesFormClearComponent, typeof i40.KlesFormSelectLazySearchComponent, typeof i41.KlesFormFabComponent, typeof i42.KlesFabComponent, typeof i43.KlesMiniFabComponent, typeof i44.KlesFormMiniFabComponent, typeof i45.KlesIconButtonComponent, typeof i46.KlesFormIconButtonComponent, typeof i47.KlesFormSelectionListSearchComponent, typeof i48.KlesFormCopyComponent, typeof i53.KlesTransformPipe, typeof i54.ArrayFormatPipe, typeof i49.KlesDynamicFieldDirective, typeof i50.KlesComponentDirective, typeof i51.MatErrorMessageDirective, typeof i52.MatErrorFormDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KlesMaterialDynamicformsModule>;

package/lib/token.d.ts

@@ -0,0 +1,9 @@
+import { InjectionToken } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { IKlesFieldConfig } from './interfaces/field.config.interface';
+import { GroupUiState } from './ui/ui-state/group-ui-state';
+export declare const FIELD_NAME: InjectionToken<string>;
+export declare const GROUP: InjectionToken<FormGroup<any>>;
+export declare const SIBLING_FIELDS: InjectionToken<IKlesFieldConfig[]>;
+export declare const GROUP_UI: InjectionToken<GroupUiState<any>[]>;
+export declare const FIELD: InjectionToken<IKlesFieldConfig>;

package/lib/ui/array.ui.d.ts

@@ -0,0 +1,5 @@
+import { KlesFormUiControl } from './default.ui';
+import { AbstractUiState } from './ui-state/ui-state.abstract';
+export declare class KlesFormUiArray extends KlesFormUiControl {
+    create(): AbstractUiState<any, any>;
+}

package/lib/ui/default.ui.d.ts

@@ -0,0 +1,5 @@
+import { AbstractUiState } from './ui-state/ui-state.abstract';
+import { KlesAbstractFormUiControl } from './ui.abstract';
+export declare class KlesFormUiControl extends KlesAbstractFormUiControl {
+    create(): AbstractUiState;
+}

package/lib/ui/group.ui.d.ts

@@ -0,0 +1,5 @@
+import { KlesFormUiControl } from './default.ui';
+import { AbstractUiState } from './ui-state/ui-state.abstract';
+export declare class KlesFormUiGroup extends KlesFormUiControl {
+    create(): AbstractUiState<any, any>;
+}

package/lib/ui/ui-state/array-ui-state.d.ts

@@ -0,0 +1,9 @@
+import { AbstractUiState } from './ui-state.abstract';
+export declare class ArrayUiState extends AbstractUiState<any, any> {
+    states: AbstractUiState[];
+    setValue(value: any): void;
+    patchValue(value: any): void;
+    at(index: number): AbstractUiState;
+    _find(name: string | number): AbstractUiState | null;
+    push(control: AbstractUiState | Array<AbstractUiState>): void;
+}

package/lib/ui/ui-state/control-ui-state.d.ts

@@ -0,0 +1,7 @@
+import { IKlesFieldUi } from "../../interfaces/field.config.interface";
+import { AbstractUiState } from "./ui-state.abstract";
+export declare class ControlUiState<TValue extends IKlesFieldUi> extends AbstractUiState<TValue> {
+    constructor(value?: TValue);
+    setValue(value: TValue): void;
+    patchValue(value: TValue): void;
+}