@layers-app/shared 0.0.39 → 0.0.41

package/dist/components/FormViewer/store/formStoreApi.d.ts

@@ -0,0 +1,659 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+import { Condition, ContainerProperties, Control, FormLayout, ParsedFormConfig, SettingsData, StepData, TextProperties, ThemeData } from '../types/form';
+import { FormStoreState, FormViewLayout, FormViewerProps } from './formStore';
+export declare const createFormStoreApi: (store: UseBoundStore<StoreApi<FormStoreState>>) => {
+    applyTheme: (theme: ThemeData) => void;
+    setLayout: (layout: FormViewLayout) => void;
+    patchSettingsData: (v: Partial<SettingsData>) => void;
+    patchThemeData: (v: Partial<ThemeData>) => void;
+    patchContainerTheme: (v: Partial<ContainerProperties>) => void;
+    patchTitleProperties: (v: Partial<TextProperties>) => void;
+    patchDescriptionProperties: (v: Partial<TextProperties>) => void;
+    patchCommonFontProperties: (v: Partial<TextProperties>) => void;
+    setSteps: (steps: StepData[]) => void;
+    addStep: (step: StepData, index?: number) => void;
+    removeStep: (stepId: string) => void;
+    updateStep: (stepId: string, updatedStep: Partial<StepData>) => void;
+    updateControl: <CONTROL extends Control>(stepId: string, controlId: string, updatedControl: Partial<CONTROL>) => void;
+    reorderSteps: (fromId: string, toId: string) => void;
+    reorderControls: (stepId: string, activeId: string, overId: string) => void;
+    addControl: (stepId: string, newControl: Control) => void;
+    removeControl: (stepId: string, controlId: string) => void;
+    addCondition: (stepId: string, newCondition: Condition) => void;
+    updateCondition: (stepId: string, conditionIndex: number, updatedCondition: Partial<Condition>) => void;
+    removeCondition: (stepId: string, conditionIndex: number) => void;
+    setIsMobile: (isMobile: boolean) => void;
+    setConfig: (config: ParsedFormConfig | null, { silent }?: {
+        silent?: boolean;
+    }) => void;
+    setActiveStepId: (stepId: string) => void;
+    setFormLayout: (layout: FormLayout) => void;
+    scrollToControl: (controlId: string) => void;
+    getConfig: () => Required<{
+        theme?: {
+            input?: {
+                backgroundColor?: string | undefined;
+                borderColor?: string | undefined;
+            } | undefined;
+            title?: {
+                color?: string | undefined;
+                fontSize?: number | undefined;
+                fontWeight?: number | undefined;
+                fontFamily?: string | undefined;
+            } | undefined;
+            size?: "sm" | "md" | "lg" | undefined;
+            description?: {
+                color?: string | undefined;
+                fontSize?: number | undefined;
+                fontWeight?: number | undefined;
+                fontFamily?: string | undefined;
+            } | undefined;
+            align?: "center" | "end" | "start" | undefined;
+            background?: {
+                image?: string | undefined;
+                color?: string | undefined;
+                opacity?: number | undefined;
+                blur?: number | undefined;
+                brightness?: number | undefined;
+                fit?: string | undefined;
+                blendMode?: string | undefined;
+            } | undefined;
+            container?: {
+                color?: string | undefined;
+                opacity?: number | undefined;
+                backgroundImage?: string | undefined;
+                blur?: number | undefined;
+                shadowSize?: number | undefined;
+                shadowColor?: string | undefined;
+            } | undefined;
+            borderRadius?: "sm" | "md" | "lg" | undefined;
+            font?: {
+                color?: string | undefined;
+                fontSize?: number | undefined;
+                fontWeight?: number | undefined;
+                fontFamily?: string | undefined;
+            } | undefined;
+            listStyle?: string | undefined;
+            primaryColor?: string | undefined;
+            customCSS?: string | undefined;
+        } | undefined;
+        settings?: {
+            layout: "list" | "slides";
+            slideAnimation: "none" | "horizontal" | "vertical";
+            freeNav: boolean;
+            copyright?: boolean | undefined;
+            enterIndicator?: any;
+            progressBar?: boolean | undefined;
+            navArrows?: boolean | undefined;
+            questionNumber?: boolean | undefined;
+            mainLanguage?: string | undefined;
+            recaptcha?: boolean | undefined;
+        } | undefined;
+        steps?: {
+            id: string;
+            controls: ({
+                id: string;
+                controlType: "text";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                maxLength?: number | undefined;
+                minLength?: number | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "longText";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                maxLength?: number | undefined;
+                minLength?: number | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "button";
+                label?: string | undefined;
+                link?: string | undefined;
+                title?: string | undefined;
+                description?: string | undefined;
+                buttons?: any[] | undefined;
+                width?: number | undefined;
+                orientation?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+                required?: boolean | undefined;
+                showIconButton?: boolean | undefined;
+                buttonIcon?: string | undefined;
+                alignButton?: "center" | "end" | "start" | undefined;
+                enableTooltip?: boolean | undefined;
+                fullWidthMobile?: boolean | undefined;
+            } | {
+                id: string;
+                controlType: "date";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                minDate?: string | undefined;
+                maxDate?: string | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "start";
+                label?: string | undefined;
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                required?: boolean | undefined;
+                showIconButton?: boolean | undefined;
+                buttonIcon?: string | undefined;
+                showButton?: boolean | undefined;
+            } | {
+                id: string;
+                controlType: "confirm";
+                label?: string | undefined;
+                link?: string | undefined;
+                title?: string | undefined;
+                description?: string | undefined;
+                required?: boolean | undefined;
+                buttonIcon?: string | undefined;
+                showButton?: boolean | undefined;
+            } | {
+                id: string;
+                controlType: "number";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                max?: number | undefined;
+                min?: number | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                options: {
+                    label: string;
+                    id: string;
+                }[];
+                controlType: "choice";
+                title?: string | undefined;
+                description?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+                showInput?: boolean | undefined;
+                otherOption?: boolean | undefined;
+            } | {
+                id: string;
+                options: {
+                    label: string;
+                    id: string;
+                }[];
+                controlType: "multipleChoice";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+                showInput?: boolean | undefined;
+                otherOption?: boolean | undefined;
+                minOptions?: number | undefined;
+                maxOptions?: number | undefined;
+            } | {
+                id: string;
+                options: {
+                    label: string;
+                    id: string;
+                    image?: string | undefined;
+                }[];
+                controlType: "pictureChoice";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+                showInput?: boolean | undefined;
+            } | {
+                id: string;
+                options: {
+                    label: string;
+                    id: string;
+                }[];
+                controlType: "dropdown";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "email";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "location";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "phone";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "slider";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                max?: number | undefined;
+                min?: number | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "upload";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                multiple?: boolean | undefined;
+                accept?: string[] | undefined;
+                required?: boolean | undefined;
+                maxSize?: number | undefined;
+                maxFiles?: number | undefined;
+                variableName?: string | undefined;
+                minFiles?: number | undefined;
+            } | {
+                id: string;
+                controlType: "yesNo";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+                yesLabel?: string | undefined;
+                noLabel?: string | undefined;
+            } | {
+                id: string;
+                controlType: "rating";
+                title?: string | undefined;
+                description?: string | undefined;
+                required?: boolean | undefined;
+                count?: number | undefined;
+                variableName?: string | undefined;
+            })[];
+            trigger: string;
+            position?: {
+                x: number;
+                y: number;
+            } | undefined;
+            media?: {
+                video?: string | undefined;
+                image?: string | undefined;
+                color?: string | undefined;
+                size?: number | undefined;
+                layout?: "content" | "top" | "left" | "bottom" | "right" | "background" | "fullLeft" | "fullRight" | "fullTop" | "fullBottom" | undefined;
+                blur?: number | undefined;
+                brightness?: number | undefined;
+                videoThumb?: string | undefined;
+            } | undefined;
+            theme?: {
+                input?: {
+                    backgroundColor?: string | undefined;
+                    borderColor?: string | undefined;
+                } | undefined;
+                title?: {
+                    color?: string | undefined;
+                    fontSize?: number | undefined;
+                    fontWeight?: number | undefined;
+                    fontFamily?: string | undefined;
+                } | undefined;
+                size?: "sm" | "md" | "lg" | undefined;
+                description?: {
+                    color?: string | undefined;
+                    fontSize?: number | undefined;
+                    fontWeight?: number | undefined;
+                    fontFamily?: string | undefined;
+                } | undefined;
+                align?: "center" | "end" | "start" | undefined;
+                background?: {
+                    image?: string | undefined;
+                    color?: string | undefined;
+                    opacity?: number | undefined;
+                    blur?: number | undefined;
+                    brightness?: number | undefined;
+                    fit?: string | undefined;
+                    blendMode?: string | undefined;
+                } | undefined;
+                container?: {
+                    color?: string | undefined;
+                    opacity?: number | undefined;
+                    backgroundImage?: string | undefined;
+                    blur?: number | undefined;
+                    shadowSize?: number | undefined;
+                    shadowColor?: string | undefined;
+                } | undefined;
+                borderRadius?: "sm" | "md" | "lg" | undefined;
+                font?: {
+                    color?: string | undefined;
+                    fontSize?: number | undefined;
+                    fontWeight?: number | undefined;
+                    fontFamily?: string | undefined;
+                } | undefined;
+                listStyle?: string | undefined;
+                primaryColor?: string | undefined;
+                customCSS?: string | undefined;
+            } | undefined;
+            isStart?: boolean | undefined;
+            isEnd?: boolean | undefined;
+            autoSubmit?: boolean | undefined;
+            confirmLabel?: string | undefined;
+            conditions?: {
+                operator: string;
+                trigger: string;
+                controlId: string;
+                compareValue?: string | undefined;
+            }[] | undefined;
+        }[] | undefined;
+        listStep?: {
+            id: string;
+            controls: ({
+                id: string;
+                controlType: "text";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                maxLength?: number | undefined;
+                minLength?: number | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "longText";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                maxLength?: number | undefined;
+                minLength?: number | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "button";
+                label?: string | undefined;
+                link?: string | undefined;
+                title?: string | undefined;
+                description?: string | undefined;
+                buttons?: any[] | undefined;
+                width?: number | undefined;
+                orientation?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+                required?: boolean | undefined;
+                showIconButton?: boolean | undefined;
+                buttonIcon?: string | undefined;
+                alignButton?: "center" | "end" | "start" | undefined;
+                enableTooltip?: boolean | undefined;
+                fullWidthMobile?: boolean | undefined;
+            } | {
+                id: string;
+                controlType: "date";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                minDate?: string | undefined;
+                maxDate?: string | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "start";
+                label?: string | undefined;
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                required?: boolean | undefined;
+                showIconButton?: boolean | undefined;
+                buttonIcon?: string | undefined;
+                showButton?: boolean | undefined;
+            } | {
+                id: string;
+                controlType: "confirm";
+                label?: string | undefined;
+                link?: string | undefined;
+                title?: string | undefined;
+                description?: string | undefined;
+                required?: boolean | undefined;
+                buttonIcon?: string | undefined;
+                showButton?: boolean | undefined;
+            } | {
+                id: string;
+                controlType: "number";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                max?: number | undefined;
+                min?: number | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                options: {
+                    label: string;
+                    id: string;
+                }[];
+                controlType: "choice";
+                title?: string | undefined;
+                description?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+                showInput?: boolean | undefined;
+                otherOption?: boolean | undefined;
+            } | {
+                id: string;
+                options: {
+                    label: string;
+                    id: string;
+                }[];
+                controlType: "multipleChoice";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+                showInput?: boolean | undefined;
+                otherOption?: boolean | undefined;
+                minOptions?: number | undefined;
+                maxOptions?: number | undefined;
+            } | {
+                id: string;
+                options: {
+                    label: string;
+                    id: string;
+                    image?: string | undefined;
+                }[];
+                controlType: "pictureChoice";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+                showInput?: boolean | undefined;
+            } | {
+                id: string;
+                options: {
+                    label: string;
+                    id: string;
+                }[];
+                controlType: "dropdown";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "email";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "location";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "phone";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                placeholder?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "slider";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                max?: number | undefined;
+                min?: number | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+            } | {
+                id: string;
+                controlType: "upload";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                multiple?: boolean | undefined;
+                accept?: string[] | undefined;
+                required?: boolean | undefined;
+                maxSize?: number | undefined;
+                maxFiles?: number | undefined;
+                variableName?: string | undefined;
+                minFiles?: number | undefined;
+            } | {
+                id: string;
+                controlType: "yesNo";
+                title?: string | undefined;
+                description?: string | undefined;
+                icon?: string | undefined;
+                required?: boolean | undefined;
+                variableName?: string | undefined;
+                yesLabel?: string | undefined;
+                noLabel?: string | undefined;
+            } | {
+                id: string;
+                controlType: "rating";
+                title?: string | undefined;
+                description?: string | undefined;
+                required?: boolean | undefined;
+                count?: number | undefined;
+                variableName?: string | undefined;
+            })[];
+            trigger: string;
+            position?: {
+                x: number;
+                y: number;
+            } | undefined;
+            media?: {
+                video?: string | undefined;
+                image?: string | undefined;
+                color?: string | undefined;
+                size?: number | undefined;
+                layout?: "content" | "top" | "left" | "bottom" | "right" | "background" | "fullLeft" | "fullRight" | "fullTop" | "fullBottom" | undefined;
+                blur?: number | undefined;
+                brightness?: number | undefined;
+                videoThumb?: string | undefined;
+            } | undefined;
+            theme?: {
+                input?: {
+                    backgroundColor?: string | undefined;
+                    borderColor?: string | undefined;
+                } | undefined;
+                title?: {
+                    color?: string | undefined;
+                    fontSize?: number | undefined;
+                    fontWeight?: number | undefined;
+                    fontFamily?: string | undefined;
+                } | undefined;
+                size?: "sm" | "md" | "lg" | undefined;
+                description?: {
+                    color?: string | undefined;
+                    fontSize?: number | undefined;
+                    fontWeight?: number | undefined;
+                    fontFamily?: string | undefined;
+                } | undefined;
+                align?: "center" | "end" | "start" | undefined;
+                background?: {
+                    image?: string | undefined;
+                    color?: string | undefined;
+                    opacity?: number | undefined;
+                    blur?: number | undefined;
+                    brightness?: number | undefined;
+                    fit?: string | undefined;
+                    blendMode?: string | undefined;
+                } | undefined;
+                container?: {
+                    color?: string | undefined;
+                    opacity?: number | undefined;
+                    backgroundImage?: string | undefined;
+                    blur?: number | undefined;
+                    shadowSize?: number | undefined;
+                    shadowColor?: string | undefined;
+                } | undefined;
+                borderRadius?: "sm" | "md" | "lg" | undefined;
+                font?: {
+                    color?: string | undefined;
+                    fontSize?: number | undefined;
+                    fontWeight?: number | undefined;
+                    fontFamily?: string | undefined;
+                } | undefined;
+                listStyle?: string | undefined;
+                primaryColor?: string | undefined;
+                customCSS?: string | undefined;
+            } | undefined;
+            isStart?: boolean | undefined;
+            isEnd?: boolean | undefined;
+            autoSubmit?: boolean | undefined;
+            confirmLabel?: string | undefined;
+            conditions?: {
+                operator: string;
+                trigger: string;
+                controlId: string;
+                compareValue?: string | undefined;
+            }[] | undefined;
+        } | undefined;
+    }>;
+    setProps: (props: FormViewerProps) => void;
+    forwardActiveStep: (steps?: number) => void;
+    backActiveStep: (steps?: number) => void;
+    resetActiveStep: () => void;
+};