import type { RootState, DataField, Page, Meta } from '../store/store';
import type { Store, PiniaCustomStateProperties } from 'pinia';
import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from './vue/dist/vue.esm-bundler.js';
import type { ComponentIcon, Component, ComponentTypes,  ComponentFieldName } from '../types/component.types';
import { FormActionTypes } from '../types/action.types';
declare const _sfc_main: DefineComponent<{
    id: {
        type: StringConstructor;
        required: true;
    };
    field: {
        type: null;
        required: true;
    };
    component: {
        type: null;
        required: true;
    };
    attributes: {
        type: null;
        required: true;
    };
}, {
    formStore: Store<"ipscape-form-builder", RootState, {
        getMetaDataFields: (state: {
            page: {
                id: string | number;
                name: string;
                meta: {
                    version?: string | undefined;
                    pages: {
                        id: number;
                        name: string;
                    }[];
                    fields: {
                        contact: {
                            id: number;
                            name: string;
                            caption: string;
                        }[];
                        activity: {
                            id: number;
                            name: string;
                            caption: string;
                        }[];
                    };
                };
                components: {
                    attributes: {
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        action: {
                            name: string | null;
                            target: {
                                id: number | null;
                                page: string;
                            };
                        };
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string;
                        required: boolean;
                        isChecked?: boolean | "false" | "mixed" | "true" | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        disabled: boolean;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        placeholder: string | null;
                        required: boolean;
                        validation?: string | null | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        imageUrl: string;
                        imageId: string | number;
                        label: string;
                        css: {
                            alignment: "center" | "left" | "right";
                            width: number;
                        };
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string;
                        disabled: boolean;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        text: string | null;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        required: boolean;
                        total?: number | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        placeholder: string | null;
                        required: boolean;
                        value: string | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    };
                    id: string;
                    component: ComponentTypes;
                    icon?: ComponentIcon | undefined;
                    field: ComponentFieldName;
                    meta?: {
                        pages: {
                            id: number;
                            name: string;
                        }[];
                        fields: {
                            contact: {
                                id: number;
                                name: string;
                                caption: string;
                            }[];
                            activity: {
                                id: number;
                                name: string;
                                caption: string;
                            }[];
                        };
                    } | undefined;
                }[];
            };
        } & PiniaCustomStateProperties<RootState>) => {
            contact: {
                id: number;
                name: string;
                caption: string;
            }[];
            activity: {
                id: number;
                name: string;
                caption: string;
            }[];
        };
        getMetaDataFieldById: (state: {
            page: {
                id: string | number;
                name: string;
                meta: {
                    version?: string | undefined;
                    pages: {
                        id: number;
                        name: string;
                    }[];
                    fields: {
                        contact: {
                            id: number;
                            name: string;
                            caption: string;
                        }[];
                        activity: {
                            id: number;
                            name: string;
                            caption: string;
                        }[];
                    };
                };
                components: {
                    attributes: {
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        action: {
                            name: string | null;
                            target: {
                                id: number | null;
                                page: string;
                            };
                        };
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string;
                        required: boolean;
                        isChecked?: boolean | "false" | "mixed" | "true" | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        disabled: boolean;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        placeholder: string | null;
                        required: boolean;
                        validation?: string | null | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        imageUrl: string;
                        imageId: string | number;
                        label: string;
                        css: {
                            alignment: "center" | "left" | "right";
                            width: number;
                        };
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string;
                        disabled: boolean;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        text: string | null;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        required: boolean;
                        total?: number | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        placeholder: string | null;
                        required: boolean;
                        value: string | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    };
                    id: string;
                    component: ComponentTypes;
                    icon?: ComponentIcon | undefined;
                    field: ComponentFieldName;
                    meta?: {
                        pages: {
                            id: number;
                            name: string;
                        }[];
                        fields: {
                            contact: {
                                id: number;
                                name: string;
                                caption: string;
                            }[];
                            activity: {
                                id: number;
                                name: string;
                                caption: string;
                            }[];
                        };
                    } | undefined;
                }[];
            };
        } & PiniaCustomStateProperties<RootState>) => (id: number) => DataField | null;
        getPageComponents: (state: {
            page: {
                id: string | number;
                name: string;
                meta: {
                    version?: string | undefined;
                    pages: {
                        id: number;
                        name: string;
                    }[];
                    fields: {
                        contact: {
                            id: number;
                            name: string;
                            caption: string;
                        }[];
                        activity: {
                            id: number;
                            name: string;
                            caption: string;
                        }[];
                    };
                };
                components: {
                    attributes: {
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        action: {
                            name: string | null;
                            target: {
                                id: number | null;
                                page: string;
                            };
                        };
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string;
                        required: boolean;
                        isChecked?: boolean | "false" | "mixed" | "true" | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        disabled: boolean;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        placeholder: string | null;
                        required: boolean;
                        validation?: string | null | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        imageUrl: string;
                        imageId: string | number;
                        label: string;
                        css: {
                            alignment: "center" | "left" | "right";
                            width: number;
                        };
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string;
                        disabled: boolean;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        text: string | null;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        required: boolean;
                        total?: number | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        placeholder: string | null;
                        required: boolean;
                        value: string | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    };
                    id: string;
                    component: ComponentTypes;
                    icon?: ComponentIcon | undefined;
                    field: ComponentFieldName;
                    meta?: {
                        pages: {
                            id: number;
                            name: string;
                        }[];
                        fields: {
                            contact: {
                                id: number;
                                name: string;
                                caption: string;
                            }[];
                            activity: {
                                id: number;
                                name: string;
                                caption: string;
                            }[];
                        };
                    } | undefined;
                }[];
            };
        } & PiniaCustomStateProperties<RootState>) => {
            attributes: {
                mapping?: {
                    id: number;
                    name: string;
                    caption: string;
                } | null | undefined;
            } | {
                label: string | null;
                action: {
                    name: string | null;
                    target: {
                        id: number | null;
                        page: string;
                    };
                };
                mapping?: {
                    id: number;
                    name: string;
                    caption: string;
                } | null | undefined;
            } | {
                label: string;
                required: boolean;
                isChecked?: boolean | "false" | "mixed" | "true" | undefined;
                mapping?: {
                    id: number;
                    name: string;
                    caption: string;
                } | null | undefined;
            } | {
                label: string | null;
                disabled: boolean;
                required: boolean;
                options: {
                    label: string;
                    value: string | null;
                }[];
                mapping?: {
                    id: number;
                    name: string;
                    caption: string;
                } | null | undefined;
            } | {
                label: string | null;
                placeholder: string | null;
                required: boolean;
                validation?: string | null | undefined;
                mapping?: {
                    id: number;
                    name: string;
                    caption: string;
                } | null | undefined;
            } | {
                imageUrl: string;
                imageId: string | number;
                label: string;
                css: {
                    alignment: "center" | "left" | "right";
                    width: number;
                };
                mapping?: {
                    id: number;
                    name: string;
                    caption: string;
                } | null | undefined;
            } | {
                label: string;
                disabled: boolean;
                required: boolean;
                options: {
                    label: string;
                    value: string | null;
                }[];
                mapping?: {
                    id: number;
                    name: string;
                    caption: string;
                } | null | undefined;
            } | {
                text: string | null;
                mapping?: {
                    id: number;
                    name: string;
                    caption: string;
                } | null | undefined;
            } | {
                label: string | null;
                required: boolean;
                total?: number | undefined;
                mapping?: {
                    id: number;
                    name: string;
                    caption: string;
                } | null | undefined;
            } | {
                label: string | null;
                required: boolean;
                options: {
                    label: string;
                    value: string | null;
                }[];
                mapping?: {
                    id: number;
                    name: string;
                    caption: string;
                } | null | undefined;
            } | {
                label: string | null;
                placeholder: string | null;
                required: boolean;
                value: string | undefined;
                mapping?: {
                    id: number;
                    name: string;
                    caption: string;
                } | null | undefined;
            };
            id: string;
            component: ComponentTypes;
            icon?: ComponentIcon | undefined;
            field: ComponentFieldName;
            meta?: {
                pages: {
                    id: number;
                    name: string;
                }[];
                fields: {
                    contact: {
                        id: number;
                        name: string;
                        caption: string;
                    }[];
                    activity: {
                        id: number;
                        name: string;
                        caption: string;
                    }[];
                };
            } | undefined;
        }[];
        getComponentByIndex: (state: {
            page: {
                id: string | number;
                name: string;
                meta: {
                    version?: string | undefined;
                    pages: {
                        id: number;
                        name: string;
                    }[];
                    fields: {
                        contact: {
                            id: number;
                            name: string;
                            caption: string;
                        }[];
                        activity: {
                            id: number;
                            name: string;
                            caption: string;
                        }[];
                    };
                };
                components: {
                    attributes: {
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        action: {
                            name: string | null;
                            target: {
                                id: number | null;
                                page: string;
                            };
                        };
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string;
                        required: boolean;
                        isChecked?: boolean | "false" | "mixed" | "true" | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        disabled: boolean;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        placeholder: string | null;
                        required: boolean;
                        validation?: string | null | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        imageUrl: string;
                        imageId: string | number;
                        label: string;
                        css: {
                            alignment: "center" | "left" | "right";
                            width: number;
                        };
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string;
                        disabled: boolean;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        text: string | null;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        required: boolean;
                        total?: number | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        placeholder: string | null;
                        required: boolean;
                        value: string | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    };
                    id: string;
                    component: ComponentTypes;
                    icon?: ComponentIcon | undefined;
                    field: ComponentFieldName;
                    meta?: {
                        pages: {
                            id: number;
                            name: string;
                        }[];
                        fields: {
                            contact: {
                                id: number;
                                name: string;
                                caption: string;
                            }[];
                            activity: {
                                id: number;
                                name: string;
                                caption: string;
                            }[];
                        };
                    } | undefined;
                }[];
            };
        } & PiniaCustomStateProperties<RootState>) => (index: number) => Component;
        getComponentById: (state: {
            page: {
                id: string | number;
                name: string;
                meta: {
                    version?: string | undefined;
                    pages: {
                        id: number;
                        name: string;
                    }[];
                    fields: {
                        contact: {
                            id: number;
                            name: string;
                            caption: string;
                        }[];
                        activity: {
                            id: number;
                            name: string;
                            caption: string;
                        }[];
                    };
                };
                components: {
                    attributes: {
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        action: {
                            name: string | null;
                            target: {
                                id: number | null;
                                page: string;
                            };
                        };
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string;
                        required: boolean;
                        isChecked?: boolean | "false" | "mixed" | "true" | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        disabled: boolean;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        placeholder: string | null;
                        required: boolean;
                        validation?: string | null | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        imageUrl: string;
                        imageId: string | number;
                        label: string;
                        css: {
                            alignment: "center" | "left" | "right";
                            width: number;
                        };
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string;
                        disabled: boolean;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        text: string | null;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        required: boolean;
                        total?: number | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        required: boolean;
                        options: {
                            label: string;
                            value: string | null;
                        }[];
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    } | {
                        label: string | null;
                        placeholder: string | null;
                        required: boolean;
                        value: string | undefined;
                        mapping?: {
                            id: number;
                            name: string;
                            caption: string;
                        } | null | undefined;
                    };
                    id: string;
                    component: ComponentTypes;
                    icon?: ComponentIcon | undefined;
                    field: ComponentFieldName;
                    meta?: {
                        pages: {
                            id: number;
                            name: string;
                        }[];
                        fields: {
                            contact: {
                                id: number;
                                name: string;
                                caption: string;
                            }[];
                            activity: {
                                id: number;
                                name: string;
                                caption: string;
                            }[];
                        };
                    } | undefined;
                }[];
            };
        } & PiniaCustomStateProperties<RootState>) => (id: string) => Component | null;
    }, {
        setPage(payload: Page): void;
        updatePageMeta(payload: Meta): void;
        createComponent(payload: Component): void;
        updateComponent(payload: Component): void;
        insertComponent(payload: Component, index: number): void;
        deleteComponent(payload: Component): void;
        updateComponentList(payload: Component[]): void;
        sendUpdateEvent(action: FormActionTypes): void;
    }>;
    props: any;
    dataFields: {
        contact: {
            id: number;
            name: string;
            caption: string;
        }[];
        activity: {
            id: number;
            name: string;
            caption: string;
        }[];
    };
    dataFieldLabels: string[];
    el: Ref<any>;
    debounce: Ref<any>;
    selectedMapping: Ref<number | null>;
    attributes: {
        label: string | null;
        disabled: boolean;
        required: boolean;
        options: {
            label: string;
            value: string | null;
        }[];
        mapping?: {
            id: number;
            name: string;
            caption: string;
        } | null | undefined;
    } | {
        label: string;
        disabled: boolean;
        required: boolean;
        options: {
            label: string;
            value: string | null;
        }[];
        mapping?: {
            id: number;
            name: string;
            caption: string;
        } | null | undefined;
    } | {
        label: string | null;
        required: boolean;
        options: {
            label: string;
            value: string | null;
        }[];
        mapping?: {
            id: number;
            name: string;
            caption: string;
        } | null | undefined;
    };
    reactiveOptions: {
        label: string;
        value: string | null;
    }[];
    formData: {
        id: string;
        field: ComponentFieldName;
        component: ComponentTypes;
        attributes: {
            options: {
                label: string;
                value: string | null;
            }[];
            required: boolean;
            label: string | null;
            mapping: {
                id: number;
                name: string;
                caption: string;
            } | null | undefined;
        };
    };
    onRequiredToggle: (data: boolean) => void;
    addNewOption: () => void;
    deleteOption: (index: number) => void;
    onFieldMappingSelect: (data: any) => void;
    fieldUpdate: () => void;
    readonly draggable: DefineComponent<{
        list: {
            type: ArrayConstructor;
            required: boolean;
            default: any;
        };
        modelValue: {
            type: ArrayConstructor;
            required: boolean;
            default: any;
        };
        itemKey: {
            type: (StringConstructor | FunctionConstructor)[];
            required: boolean;
        };
        clone: {
            type: FunctionConstructor;
            default: (original: any) => any;
        };
        tag: {
            type: StringConstructor;
            default: string;
        };
        move: {
            type: FunctionConstructor;
            default: any;
        };
        componentData: {
            type: ObjectConstructor;
            required: boolean;
            default: any;
        };
    }, unknown, {
        error: boolean;
    }, {
        realList(): any;
        getKey(): any;
    }, {
        getUnderlyingVm(domElement: any): any;
        getUnderlyingPotencialDraggableComponent(htmElement: any): any;
        emitChanges(evt: any): void;
        alterList(onList: any): void;
        spliceList(): void;
        updatePosition(oldIndex: any, newIndex: any): void;
        getRelatedContextFromMoveEvent({ to, related }: {
            to: any;
            related: any;
        }): any;
        getVmIndexFromDomIndex(domIndex: any): any;
        onDragStart(evt: any): void;
        onDragAdd(evt: any): void;
        onDragRemove(evt: any): void;
        onDragUpdate(evt: any): void;
        computeFutureIndex(relatedContext: any, evt: any): any;
        onDragMove(evt: any, originalEvent: any): any;
        onDragEnd(): void;
    }, ComponentOptionsMixin, ComponentOptionsMixin, any[], any, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{
        move: Function;
        tag: string;
        clone: Function;
        list: unknown[];
        modelValue: unknown[];
        componentData: Record<string, any>;
    } & {
        itemKey?: string | Function | undefined;
    }>, {
        move: Function;
        tag: string;
        clone: Function;
        list: unknown[];
        modelValue: unknown[];
        componentData: Record<string, any>;
    }>;
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
    id: {
        type: StringConstructor;
        required: true;
    };
    field: {
        type: null;
        required: true;
    };
    component: {
        type: null;
        required: true;
    };
    attributes: {
        type: null;
        required: true;
    };
}>>, {}>;
export default _sfc_main;
