ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / sparklp6 / public_html / website_356c8563 / wp-content / plugins / essential-blocks / src / blocks / form / src

/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { useEffect, useState, useRef } from "@wordpress/element";
import { select } from "@wordpress/data";
import { applyFilters } from "@wordpress/hooks";
import {
    PanelBody,
    ToggleControl,
    RangeControl,
    BaseControl,
    TextControl,
    __experimentalDivider as Divider,
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";

/**
 * Internal dependencies
 */
import {
    BorderShadowControl,
    ColorControl,
    ResponsiveRangeController,
    ResponsiveDimensionsControl,
    TypographyDropdown,
    ProSelectControl,
    DynamicInputControl,
    EBIconPicker,
    InspectorPanel,
    EBTextControlWithDropdown,
} from "@essential-blocks/controls";

import {
    WRAPPER_BG,
    WRAPPER_MARGIN,
    WRAPPER_PADDING,
    WRAPPER_BORDER_SHADOW,
    FORM_TYPE,
    NOTIFICATION_TYPE,
    INTEGRATIONS,
    CONFIRMATION_TYPE,
    NORMAL_HOVER,
    NORMAL_CHECKED,
    ROWS_GAP,
    BTN_PADDING,
    LABEL_MARGIN,
    BTN_BORDER,
    FIELDS_BORDER,
    FIELDS_PADDING,
    SUCCESS_PADDING,
    SUCCESS_BORDER,
    ERROR_PADDING,
    ERROR_BORDER,
    RADIO_SIZE,
    RADIO_SPACING,
    CHECKBOX_SIZE,
    CHECKBOX_SPACING,
    BUTTON_WIDTH,
    CONTENTS_ALIGNMENTS,
    FIXED_WIDTH,
    ICON_POSITION,
    ICON_SIZE,
    ICON_SPACE,
    MESSAGE_TYPE,
    TEMPLATES,
    SUBSCRIPTION_TEMPLATES,
    FORM_WIDTH,
    FORM_CUSTOM_WIDTH,
    BUTTON_STYLE,
    VERTICAL_ALIGN,
    BTN_VERTICAL_POSITION,
    BTN_HORIZONTAL_POSITION,
    INLINE_FORM_WIDTH,
    INPUT_ICON_SIZE,
    BTN_TOP_SPECING,
    FORM_STYLES,
    INPUT_WIDTH,
    SIZE_UNIT_TYPES,
} from "./constants";

import {
    LABEL_TYPOGRAPHY,
    BTN_TEXT,
    FIELDS_TEXT,
    SUCCESS_TYPO,
    ERROR_TYPO,
    RADIO_TEXT,
    CHECKBOX_TEXT,
    FIELDS_TEXT_VALIDATION,
} from "./constants/typographyPrefixConstants";

import {
    contactForm1,
    contactForm2,
    subscriptionForm1,
    subscriptionForm2,
    rsvpForm,
    blankForm,
    emailFields,
} from "./helpers";

function Inspector(props) {
    const {
        attributes,
        setAttributes,
        formSettings,
        setFormSettings,
        allFormFields,
    } = props;

const {
        resOption,
        formTitle,
        formType,
        template,
        integrations,
        notificationType,
        confirmationType,
        successMessage,
        errorMessage,
        validationErrorMessage,
        labelColor,
        buttonType,
        btnColor,
        btnHvColor,
        btnBgColor,
        btnBgHvColor,
        formWidth,
        formAlign,
        fieldsColor,
        fieldsPlaceholderColor,
        fieldsBgColor,
        messageType,
        messageAlign,
        successColor,
        successBgColor,
        errorColor,
        errorBgColor,
        radioType,
        radioColor,
        radioBgColor,
        radioBrColor,
        radioBrCheckedColor,
        radioBorder,
        checkboxType,
        checkboxColor,
        checkboxBgColor,
        checkboxBrColor,
        checkboxBrCheckedColor,
        checkboxBorder,
        dateBgColor,
        dateSelectedColor,
        fieldsValidationBorderColor,
        fieldsValidationColor,
        requiredColor,
        buttonAlign,
        buttonText,
        buttonWidth,
        btnAddIcon,
        icon,
        iconPosition,
        labelAlign,
        validationAlign,
        fieldAlign,
        formLayout,
        btnVerticalAlign,
        showInputIcon,
        showLabel,
        inputIconColor,
        formStyle,
        blockOnMobile,
    } = attributes;

const [formTemplates, setFormTemplates] = useState([]);
    const formTypeRef = useRef(formType);

useEffect(() => {
        if (formType === "contact_form") {
            setFormTemplates(TEMPLATES);
        } else if (formType === "subscription_form") {
            setFormTemplates(SUBSCRIPTION_TEMPLATES);
        }
    }, []);

useEffect(() => {
        if (formTypeRef.current === formType) {
            return;
        }
        formTypeRef.current = formType;

if (formType === "contact_form") {
            setFormTemplates(TEMPLATES);
            setAttributes({ template: "contact_form_1" });
        } else if (formType === "subscription_form") {
            setFormTemplates(SUBSCRIPTION_TEMPLATES);
            setAttributes({ template: "subscription_form_1" });
        }
    }, [formType]);

const formTypeAttr = (formType, template) => {
        let formAttr;

if (formType === "contact_form") {
            if (template === "contact_form_1") {
                formAttr = contactForm1;
            } else if (template === "contact_form_2") {
                formAttr = contactForm2;
            }
        } else if (formType === "subscription_form") {
            if (template === "subscription_form_1") {
                formAttr = subscriptionForm1;
            } else if (template === "subscription_form_2") {
                formAttr = subscriptionForm2;
            }
        } else if (formType === "rsvp_form") {
            formAttr = rsvpForm;
        } else if (formType === "blank") {
            formAttr = blankForm;
        }

return formAttr;
    };

const changeFormType = (selected) => {
        setAttributes({ formType: selected });

setAttributes(formTypeAttr(formType, template));
    };
    const changeFormTemplate = (selected) => {
        setAttributes({ template: selected });

setAttributes(formTypeAttr(formType, template));
    };

const changeFormStyle = (selected) => {
        setAttributes({ formStyle: selected });

if (selected === "form-style-modern") {
            setAttributes({
                inputIconSizeRange: "20",
                fieldsBorderHBdr_Bottom: "1",
                fieldsBorderHBdr_Left: "1",
                fieldsBorderHBdr_Right: "1",
                fieldsBorderHBdr_Top: "1",
                fieldsBorderHBdr_Unit: "px",
                fieldsBorderHborderColor: "#000",
                fieldsBorderHborderStyle: "solid",

fieldsPaddingisLinked: false,
                fieldsPaddingUnit: "px",
                fieldsPaddingTop: "25",
                fieldsPaddingBottom: "15",
                fieldsPaddingLeft: "15",
                fieldsPaddingRight: "15",
            });

if (
                formType === "subscription_form" &&
                template === "subscription_form_1"
            ) {
                setAttributes({
                    inputIconSizeRange: "15",
                    fieldsPaddingLeft: "20",
                    fieldsPaddingRight: "220",
                    fieldsPaddingTop: "25",
                    fieldsPaddingBottom: "25",
                    fieldsPaddingisLinked: false,
                });
            }

applyFilters("eb_form_style_modern_multistep", '', attributes, setAttributes);

} else if (selected === "form-style-classic") {
            setAttributes({
                inputIconSizeRange: "15",
                fieldsBorderHBdr_Bottom: "1",
                fieldsBorderHBdr_Left: "1",
                fieldsBorderHBdr_Right: "1",
                fieldsBorderHBdr_Top: "1",
                fieldsBorderHBdr_Unit: "px",
                fieldsBorderHborderColor: "",
                fieldsBorderHborderStyle: "none",
            });

if (
                formType === "subscription_form" &&
                template === "subscription_form_1"
            ) {
                setAttributes({
                    fieldsPaddingLeft: "20",
                    fieldsPaddingRight: "220",
                    fieldsPaddingTop: "25",
                    fieldsPaddingBottom: "25",
                    fieldsPaddingisLinked: false,
                });
            } else {
                setAttributes({
                    fieldsPaddingisLinked: true,
                    fieldsPaddingUnit: "px",
                    fieldsPaddingTop: "15",
                    fieldsPaddingBottom: "15",
                    fieldsPaddingLeft: "15",
                    fieldsPaddingRight: "15",
                });
            }
        }
    };

switch (selected) {
            case "inline":
                setAttributes({
                    buttonAlign: "right",
                });
                break;
            case "block":
                setAttributes({
                    buttonAlign: "left",
                });
                break;
            default:
                return false;
        }
    };

return (
        <InspectorPanel
            advancedControlProps={{
                marginPrefix: WRAPPER_MARGIN,
                paddingPrefix: WRAPPER_PADDING,
                backgroundPrefix: WRAPPER_BG,
                borderPrefix: WRAPPER_BORDER_SHADOW,
                hasMargin: true,
            }}
        >
            <InspectorPanel.General>
                <InspectorPanel.PanelBody
                    title={__("General", "essential-blocks")}
                    initialOpen={true}
                >
                    <DynamicInputControl
                        label={__("Form Title", "essential-blocks")}
                        help={__(
                            "Use Title to recognize in Form Response",
                            "essential-blocks",
                        )}
                        attrName="formTitle"
                        inputValue={formTitle}
                        setAttributes={setAttributes}
                        onChange={(value) =>
                            setAttributes({
                                formTitle: value,
                            })
                        }
                    />
                    <ProSelectControl
                        label={__("Form Type", "essential-blocks")}
                        value={formType}
                        options={FORM_TYPE}
                        onChange={(selected) => changeFormType(selected)}
                    />
                    {["contact_form", "subscription_form"].includes(
                        formType,
                    ) && (
                            <ProSelectControl
                                label={__("Template", "essential-blocks")}
                                value={template}
                                options={formTemplates}
                                onChange={(selected) =>
                                    changeFormTemplate(selected)
                                }
                            />
                        )}
                    {"Desktop" === resOption && (
                        <>
                            <ProSelectControl
                                label={__("Form Styles", "essential-blocks")}
                                value={formStyle}
                                options={FORM_STYLES}
                                onChange={(selected) =>
                                    changeFormStyle(selected)
                                }
                            />
                        </>
                    )}

<ToggleControl
                        label={__("Show Field Labels?", "essential-blocks")}
                        checked={showLabel}
                        onChange={() =>
                            setAttributes({
                                showLabel: !showLabel,
                            })
                        }
                        __nextHasNoMarginBottom
                    />
                    <ToggleControl
                        label={__("Show Field Icons?", "essential-blocks")}
                        checked={showInputIcon}
                        onChange={() =>
                            setAttributes({
                                showInputIcon: !showInputIcon,
                            })
                        }
                        __nextHasNoMarginBottom
                    />

<ProSelectControl
                        label={__("Integrations", "essential-blocks")}
                        value={Object.keys(integrations)[0]}
                        options={INTEGRATIONS}
                        onChange={(selected) =>
                            handleIntegrationChange(selected)
                        }
                    />

{applyFilters(
                        "eb_form_block_control_after_form_type",
                        "",
                        attributes,
                        setAttributes,
                    )}
                </InspectorPanel.PanelBody>
                {applyFilters(
                    "eb_from_pro_multistep_settings",
                    "",
                    attributes,
                    setAttributes,
                )}
                <InspectorPanel.PanelBody
                    title={__("Form Settings", "essential-blocks")}
                    initialOpen={true}
                >
                    <ProSelectControl
                        label={__("Notification Type", "essential-blocks")}
                        value={notificationType}
                        options={NOTIFICATION_TYPE}
                        onChange={(selected) =>
                            setAttributes({
                                notificationType: selected,
                            })
                        }
                    />
                    <EBTextControlWithDropdown
                        label={__("Email To", "essential-blocks")}
                        value={formSettings.mailTo}
                        placeholder={
                            select("core")?.getSite()?.email ||
                            __("Default is to Admin Email", "essential-blocks")
                        }
                        onChange={(text) => {
                            setFormSettings({
                                ...formSettings,
                                mailTo: text,
                            });
                        }}
                        help={__(
                            "Use commas to separate emails",
                            "essential-blocks",
                        )}
                        menuItems={emailFields(allFormFields, "email")}
                        insertMode={"append"}
                        updateValueOnSelect={true}
                    />
                    <EBTextControlWithDropdown
                        label={__("Reply To", "essential-blocks")}
                        value={formSettings.replyTo}
                        placeholder={
                            select("core")?.getSite()?.email ||
                            __("Default is to Admin Email", "essential-blocks")
                        }
                        onChange={(text) => {
                            setFormSettings({
                                ...formSettings,
                                replyTo: text,
                            });
                        }}
                        menuItems={emailFields(allFormFields, "email")}
                        insertMode={"append"}
                        updateValueOnSelect={true}
                        help={__(
                            "Use commas to separate emails",
                            "essential-blocks",
                        )}
                    />
                    <EBTextControlWithDropdown
                        label={__("Email Cc (Optional)", "essential-blocks")}
                        placeholder={__(
                            "Recipient Email Address",
                            "essential-blocks",
                        )}
                        value={formSettings.mailCc}
                        onChange={(text) =>
                            setFormSettings({
                                ...formSettings,
                                mailCc: text,
                            })
                        }
                        help={__(
                            "Use commas to separate emails",
                            "essential-blocks",
                        )}
                        menuItems={emailFields(allFormFields, "email")}
                        insertMode={"append"}
                        updateValueOnSelect={true}
                    />
                    <EBTextControlWithDropdown
                        label={__("Email Bcc (Optional)", "essential-blocks")}
                        value={formSettings.mailBcc}
                        placeholder={__(
                            "Recipient Email Address",
                            "essential-blocks",
                        )}
                        onChange={(text) =>
                            setFormSettings({
                                ...formSettings,
                                mailBcc: text,
                            })
                        }
                        help={__(
                            "Use commas to separate emails",
                            "essential-blocks",
                        )}
                        menuItems={emailFields(allFormFields, "email")}
                        insertMode={"append"}
                        updateValueOnSelect={true}
                    />
                    <TextControl
                        label={__("Email Subject", "essential-blocks")}
                        attrName="mailSubject"
                        value={formSettings.mailSubject}
                        placeholder={
                            "New Form Submission [" +
                            select("core")?.getSite()?.url +
                            "]"
                        }
                        onChange={(text) =>
                            setFormSettings({
                                ...formSettings,
                                mailSubject: text,
                            })
                        }
                        __next40pxDefaultSize
                        __nextHasNoMarginBottom
                    />
                </InspectorPanel.PanelBody>
                <InspectorPanel.PanelBody
                    title={__("Confirmation Settings", "essential-blocks")}
                    initialOpen={true}
                >
                    <ProSelectControl
                        label={__("Confirmation Type", "essential-blocks")}
                        value={confirmationType}
                        options={CONFIRMATION_TYPE}
                        onChange={(selected) =>
                            setAttributes({
                                confirmationType: selected,
                            })
                        }
                    />
                    {applyFilters(
                        "eb_form_block_control_after_confirmation_type",
                        "",
                        attributes,
                        setAttributes,
                    )}

{confirmationType === "message" && (
                        <>
                            <DynamicInputControl
                                label={__(
                                    "Success Message",
                                    "essential-blocks",
                                )}
                                attrName="successMessage"
                                inputValue={successMessage}
                                setAttributes={setAttributes}
                                onChange={(text) =>
                                    setAttributes({
                                        successMessage: text,
                                    })
                                }
                                isTextarea={true}
                            />
                            <DynamicInputControl
                                label={__(
                                    "Default Error Message",
                                    "essential-blocks",
                                )}
                                attrName="errorMessage"
                                inputValue={errorMessage}
                                setAttributes={setAttributes}
                                onChange={(text) =>
                                    setAttributes({
                                        errorMessage: text,
                                    })
                                }
                                isTextarea={true}
                            />
                            {/* <TextareaControl
                                    label="Default Error Message"
                                    // help="Write your email body here"
                                    value={errorMessage}
                                    rows={3}
                                    onChange={(text) =>
                                        setAttributes({
                                            errorMessage: text,
                                        })
                                    }
                                    __nextHasNoMarginBottom
                                /> */}
                        </>
                    )}
                    <DynamicInputControl
                        label={__(
                            "Validation Error Message",
                            "essential-blocks",
                        )}
                        attrName="validationErrorMessage"
                        inputValue={validationErrorMessage}
                        setAttributes={setAttributes}
                        onChange={(text) =>
                            setAttributes({
                                validationErrorMessage: text,
                            })
                        }
                        isTextarea={true}
                    />
                    {/* <TextareaControl
                            label="Validation Error Message"
                            // help="Write your email body here"
                            value={validationErrorMessage}
                            rows={3}
                            onChange={(text) =>
                                setAttributes({
                                    validationErrorMessage: text,
                                })
                            }
                            __nextHasNoMarginBottom
                        /> */}
                </InspectorPanel.PanelBody>
                <InspectorPanel.PanelBody
                    title={__("Button", "essential-blocks")}
                    initialOpen={false}
                >
                    <>
                        <ProSelectControl
                            label={__("Button Type", "essential-blocks")}
                            value={formLayout}
                            options={BUTTON_STYLE}
                            onChange={(selected) => handleFormStyle(selected)}
                        />

{formLayout == "inline" && (
                            <>
                                <ToggleControl
                                    label={__(
                                        "Block Button on Mobile",
                                        "essential-blocks",
                                    )}
                                    checked={blockOnMobile}
                                    onChange={() =>
                                        setAttributes({
                                            blockOnMobile: !blockOnMobile,
                                        })
                                    }
                                    __nextHasNoMarginBottom
                                />
                                <ResponsiveRangeController
                                    baseLabel={__(
                                        "Fields Width (%)",
                                        "essential-blocks",
                                    )}
                                    controlName={INLINE_FORM_WIDTH}
                                    min={1}
                                    max={100}
                                    step={1}
                                    noUnits
                                />
                            </>
                        )}

{/* <TextControl
                                label={__(
                                    "Text",
                                    "essential-blocks"
                                )}
                                value={buttonText}
                                onChange={(buttonText) =>
                                    setAttributes({
                                        buttonText,
                                    })
                                }
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            /> */}
                        <DynamicInputControl
                            label={__("Text", "essential-blocks")}
                            attrName="buttonText"
                            inputValue={buttonText}
                            setAttributes={setAttributes}
                            onChange={(buttonText) =>
                                setAttributes({
                                    buttonText,
                                })
                            }
                        />
                        <ToggleControl
                            label={__("Add icon", "essential-blocks")}
                            checked={btnAddIcon}
                            onChange={() =>
                                setAttributes({
                                    btnAddIcon: !btnAddIcon,
                                })
                            }
                            __nextHasNoMarginBottom
                        />
                        {btnAddIcon && (
                            <>
                                <EBIconPicker
                                    value={icon}
                                    onChange={(icon) =>
                                        setAttributes({
                                            icon,
                                        })
                                    }
                                />
                            </>
                        )}

{applyFilters(
                            "eb_from_pro_multistep_button_settings",
                            "",
                            attributes,
                            setAttributes,
                        )}
                    </>
                </InspectorPanel.PanelBody>
            </InspectorPanel.General>
            <InspectorPanel.Style>
                <InspectorPanel.PanelBody
                    title={__("Form", "essential-blocks")}
                    initialOpen={true}
                >
                    <ResponsiveRangeController
                        baseLabel={__("Fields Gap (PX)", "essential-blocks")}
                        controlName={ROWS_GAP}
                        min={0}
                        max={100}
                        step={1}
                        noUnits
                    />
                    <ToggleGroupControl
                        label={__("Width", "essential-blocks")}

value={formWidth}
                        onChange={(value) =>
                            setAttributes({
                                formWidth: value,
                            })
                        }
                        isBlock
                        __next40pxDefaultSize
                        __nextHasNoMarginBottom
                    >
                        {FORM_WIDTH.map((item, index) => (
                            <ToggleGroupControlOption
                                key={index}
                                value={item.value}
                                label={item.label}
                            />
                        ))}
                    </ToggleGroupControl>

{formWidth === "fixed" && (
                        <>
                            <ResponsiveRangeController
                                baseLabel={__(
                                    "Fixed Width",
                                    "essential-blocks",
                                )}
                                controlName={FORM_CUSTOM_WIDTH}
                                min={200}
                                max={2000}
                                step={10}
                            />

<ToggleGroupControl
                                label={__("Alignment", "essential-blocks")}

value={formAlign}
                                onChange={(value) =>
                                    setAttributes({
                                        formAlign: value,
                                    })
                                }
                                isBlock
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            >
                                {CONTENTS_ALIGNMENTS.map((item, index) => (
                                    <ToggleGroupControlOption
                                        key={index}
                                        value={item.value}
                                        label={item.label}
                                    />
                                ))}
                            </ToggleGroupControl>
                        </>
                    )}
                </InspectorPanel.PanelBody>
                {applyFilters(
                    "eb_from_pro_multistep_styles",
                    "",
                    attributes,
                    setAttributes,
                )}
                {showLabel && (
                    <InspectorPanel.PanelBody
                        title={__("Labels", "essential-blocks")}
                        initialOpen={false}
                    >
                        <TypographyDropdown
                            baseLabel={__("Typography", "essential-blocks")}
                            typographyPrefixConstant={LABEL_TYPOGRAPHY}
                        />
                        <ColorControl
                            label={__("Color", "essential-blocks")}
                            color={labelColor}
                            onChange={(labelColor) =>
                                setAttributes({
                                    labelColor,
                                })
                            }
                        />
                        <ColorControl
                            label={__("Requied Color", "essential-blocks")}
                            color={requiredColor}
                            onChange={(requiredColor) =>
                                setAttributes({
                                    requiredColor,
                                })
                            }
                        />
                        <ToggleGroupControl
                            label={__("Alignment", "essential-blocks")}

value={labelAlign}
                            onChange={(value) =>
                                setAttributes({
                                    labelAlign: value,
                                })
                            }
                            isBlock
                            __next40pxDefaultSize
                            __nextHasNoMarginBottom
                        >
                            {CONTENTS_ALIGNMENTS.map((item, index) => (
                                <ToggleGroupControlOption
                                    key={index}
                                    value={item.value}
                                    label={item.label}
                                />
                            ))}
                        </ToggleGroupControl>
                        <ResponsiveDimensionsControl
                            controlName={LABEL_MARGIN}
                            baseLabel={__("Margin", "essential-blocks")}
                        />
                    </InspectorPanel.PanelBody>
                )}
                {showInputIcon && (
                    <>
                        <InspectorPanel.PanelBody
                            title={__("Fields Icon", "essential-blocks")}
                            initialOpen={false}
                        >
                            <ColorControl
                                label={__("Color", "essential-blocks")}
                                color={inputIconColor}
                                onChange={(inputIconColor) =>
                                    setAttributes({
                                        inputIconColor,
                                    })
                                }
                            />
                            <ResponsiveRangeController
                                baseLabel={__("Size (PX)", "essential-blocks")}
                                controlName={INPUT_ICON_SIZE}
                                min={1}
                                max={100}
                                step={1}
                                noUnits
                            />
                        </InspectorPanel.PanelBody>
                    </>
                )}

<InspectorPanel.PanelBody
                    title={__("Input Fields", "essential-blocks")}
                    initialOpen={false}
                >
                    <>
                        <TypographyDropdown
                            baseLabel={__("Typography", "essential-blocks")}
                            typographyPrefixConstant={FIELDS_TEXT}
                        />

<ColorControl
                            label={__("Color", "essential-blocks")}
                            color={fieldsColor}
                            onChange={(fieldsColor) =>
                                setAttributes({
                                    fieldsColor,
                                })
                            }
                        />
                        <ColorControl
                            label={__("Placeholder Color", "essential-blocks")}
                            color={fieldsPlaceholderColor}
                            onChange={(fieldsPlaceholderColor) =>
                                setAttributes({
                                    fieldsPlaceholderColor,
                                })
                            }
                        />
                        <ColorControl
                            label={__("Background", "essential-blocks")}
                            color={fieldsBgColor}
                            onChange={(fieldsBgColor) =>
                                setAttributes({
                                    fieldsBgColor,
                                })
                            }
                        />

<ToggleGroupControl
                            label={__("Alignment", "essential-blocks")}

value={fieldAlign}
                            onChange={(value) =>
                                setAttributes({
                                    fieldAlign: value,
                                })
                            }
                            isBlock
                            __next40pxDefaultSize
                            __nextHasNoMarginBottom
                        >
                            {CONTENTS_ALIGNMENTS.map((item, index) => (
                                <ToggleGroupControlOption
                                    key={index}
                                    value={item.value}
                                    label={item.label}
                                />
                            ))}
                        </ToggleGroupControl>
                        <ResponsiveDimensionsControl
                            controlName={FIELDS_PADDING}
                            baseLabel={__("Padding", "essential-blocks")}
                        />

<InspectorPanel.PanelBody
                            title={__("Border", "essential-blocks")}
                            initialOpen={false}
                        >
                            <BorderShadowControl controlName={FIELDS_BORDER} />
                        </InspectorPanel.PanelBody>
                    </>
                </InspectorPanel.PanelBody>
                <InspectorPanel.PanelBody
                    title={__("Checkbox Fields", "essential-blocks")}
                    initialOpen={false}
                >
                    <>
                        <TypographyDropdown
                            baseLabel={__("Typography", "essential-blocks")}
                            typographyPrefixConstant={CHECKBOX_TEXT}
                        />

<ColorControl
                            label={__("Color", "essential-blocks")}
                            color={checkboxColor}
                            onChange={(checkboxColor) =>
                                setAttributes({
                                    checkboxColor,
                                })
                            }
                        />
                        <ColorControl
                            label={__("Background", "essential-blocks")}
                            color={checkboxBgColor}
                            onChange={(checkboxBgColor) =>
                                setAttributes({
                                    checkboxBgColor,
                                })
                            }
                        />
                        <ResponsiveRangeController
                            baseLabel={__("Size (PX)", "essential-blocks")}
                            controlName={CHECKBOX_SIZE}
                            min={1}
                            max={100}
                            step={1}
                            noUnits
                        />
                        <RangeControl
                            label={__("Border Width", "essential-blocks")}
                            value={checkboxBorder}
                            onChange={(checkboxBorder) =>
                                setAttributes({
                                    checkboxBorder,
                                })
                            }
                            min={1}
                            max={5}
                            step={1}
                            allowReset={true}
                            __nextHasNoMarginBottom
                            __next40pxDefaultSize
                        />

<ToggleGroupControl
                            className="newtogglegroupcontrol eb-inspector-btn-group"
                            value={checkboxType}
                            onChange={(value) =>
                                setAttributes({
                                    checkboxType: value,
                                })
                            }
                            isBlock
                            __next40pxDefaultSize
                            __nextHasNoMarginBottom
                        >
                            {NORMAL_CHECKED.map((item, index) => (
                                <ToggleGroupControlOption
                                    key={index}
                                    value={item.value}
                                    label={item.label}
                                />
                            ))}
                        </ToggleGroupControl>

{checkboxType === "normal" && (
                            <>
                                <ColorControl
                                    label={__(
                                        "Border Color",
                                        "essential-blocks",
                                    )}
                                    color={checkboxBrColor}
                                    onChange={(checkboxBrColor) =>
                                        setAttributes({
                                            checkboxBrColor,
                                        })
                                    }
                                />
                            </>
                        )}
                        {checkboxType === "checked" && (
                            <>
                                <ColorControl
                                    label={__(
                                        "Border Color",
                                        "essential-blocks",
                                    )}
                                    color={checkboxBrCheckedColor}
                                    onChange={(checkboxBrCheckedColor) =>
                                        setAttributes({
                                            checkboxBrCheckedColor,
                                        })
                                    }
                                />
                            </>
                        )}

<ColorControl
                            label={__("Color", "essential-blocks")}
                            color={radioColor}
                            onChange={(radioColor) =>
                                setAttributes({
                                    radioColor,
                                })
                            }
                        />
                        <ColorControl
                            label={__("Background", "essential-blocks")}
                            color={radioBgColor}
                            onChange={(radioBgColor) =>
                                setAttributes({
                                    radioBgColor,
                                })
                            }
                        />
                        <ResponsiveRangeController
                            baseLabel={__("Size (PX)", "essential-blocks")}
                            controlName={RADIO_SIZE}
                            min={1}
                            max={100}
                            step={1}
                            noUnits
                        />
                        <RangeControl
                            label={__("Border Width", "essential-blocks")}
                            value={radioBorder}
                            onChange={(radioBorder) =>
                                setAttributes({
                                    radioBorder,
                                })
                            }
                            min={1}
                            max={5}
                            step={1}
                            allowReset={true}
                            __nextHasNoMarginBottom
                            __next40pxDefaultSize
                        />

<ToggleGroupControl
                            className="newtogglegroupcontrol eb-inspector-btn-group"
                            value={radioType}
                            onChange={(value) =>
                                setAttributes({
                                    radioType: value,
                                })
                            }
                            isBlock
                            __next40pxDefaultSize
                            __nextHasNoMarginBottom
                        >
                            {NORMAL_CHECKED.map((item, index) => (
                                <ToggleGroupControlOption
                                    key={index}
                                    value={item.value}
                                    label={item.label}
                                />
                            ))}
                        </ToggleGroupControl>

{radioType === "normal" && (
                            <>
                                <ColorControl
                                    label={__(
                                        "Border Color",
                                        "essential-blocks",
                                    )}
                                    color={radioBrColor}
                                    onChange={(radioBrColor) =>
                                        setAttributes({
                                            radioBrColor,
                                        })
                                    }
                                />
                            </>
                        )}
                        {radioType === "checked" && (
                            <>
                                <ColorControl
                                    label={__(
                                        "Border Color",
                                        "essential-blocks",
                                    )}
                                    color={radioBrCheckedColor}
                                    onChange={(radioBrCheckedColor) =>
                                        setAttributes({
                                            radioBrCheckedColor,
                                        })
                                    }
                                />
                            </>
                        )}

<ResponsiveRangeController
                            baseLabel={__("Spacing (PX)", "essential-blocks")}
                            controlName={RADIO_SPACING}
                            min={1}
                            max={100}
                            step={1}
                            noUnits
                        />
                    </>
                </InspectorPanel.PanelBody>
                <InspectorPanel.PanelBody
                    title={__("Date Fields", "essential-blocks")}
                    initialOpen={false}
                >
                    <>
                        <ColorControl
                            label={__("Selected Color", "essential-blocks")}
                            color={dateSelectedColor}
                            onChange={(dateSelectedColor) =>
                                setAttributes({
                                    dateSelectedColor,
                                })
                            }
                        />
                        <ColorControl
                            label={__(
                                "Selected Background",
                                "essential-blocks",
                            )}
                            color={dateBgColor}
                            onChange={(dateBgColor) =>
                                setAttributes({
                                    dateBgColor,
                                })
                            }
                        />
                    </>
                </InspectorPanel.PanelBody>
                <InspectorPanel.PanelBody
                    title={__("Button", "essential-blocks")}
                    initialOpen={false}
                >
                    <ToggleGroupControl
                        label={__("Alignment", "essential-blocks")}

value={buttonAlign}
                        onChange={(value) =>
                            setAttributes({
                                buttonAlign: value,
                            })
                        }
                        isBlock
                        __next40pxDefaultSize
                        __nextHasNoMarginBottom
                    >
                        {CONTENTS_ALIGNMENTS.map((item, index) => (
                            <ToggleGroupControlOption
                                key={index}
                                value={item.value}
                                label={item.label}
                            />
                        ))}
                    </ToggleGroupControl>
                    {formLayout == "inline" && (
                        <>
                            <ToggleGroupControl
                                label={__("Vertical Align", "essential-blocks")}

value={btnVerticalAlign}
                                onChange={(value) =>
                                    setAttributes({
                                        btnVerticalAlign: value,
                                    })
                                }
                                isBlock
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            >
                                {VERTICAL_ALIGN.map((item, index) => (
                                    <ToggleGroupControlOption
                                        key={index}
                                        value={item.value}
                                        label={item.label}
                                    />
                                ))}
                            </ToggleGroupControl>

<ResponsiveRangeController
                                baseLabel={__(
                                    "Vertical Position",
                                    "essential-blocks",
                                )}
                                controlName={BTN_VERTICAL_POSITION}
                                min={-500}
                                max={500}
                                step={1}
                            />
                            <ResponsiveRangeController
                                baseLabel={__(
                                    "Horizontal Position",
                                    "essential-blocks",
                                )}
                                controlName={BTN_HORIZONTAL_POSITION}
                                min={0}
                                max={500}
                                step={1}
                            />
                        </>
                    )}
                    <ToggleGroupControl
                        label={__("Width", "essential-blocks")}

value={buttonWidth}
                        onChange={(value) =>
                            setAttributes({
                                buttonWidth: value,
                            })
                        }
                        isBlock
                        __next40pxDefaultSize
                        __nextHasNoMarginBottom
                    >
                        {BUTTON_WIDTH.map((item, index) => (
                            <ToggleGroupControlOption
                                key={index}
                                value={item.value}
                                label={item.label}
                            />
                        ))}
                    </ToggleGroupControl>
                    {buttonWidth === "fixed" && (
                        <ResponsiveRangeController
                            baseLabel={__("Fixed Width", "essential-blocks")}
                            controlName={FIXED_WIDTH}
                            min={100}
                            max={900}
                            step={1}
                        />
                    )}

<>
                        <TypographyDropdown
                            baseLabel={__("Typography", "essential-blocks")}
                            typographyPrefixConstant={BTN_TEXT}
                        />
                        <ToggleGroupControl
                            className="newtogglegroupcontrol eb-inspector-btn-group"
                            value={buttonType}
                            onChange={(value) =>
                                setAttributes({
                                    buttonType: value,
                                })
                            }
                            isBlock
                            __next40pxDefaultSize
                            __nextHasNoMarginBottom
                        >
                            {NORMAL_HOVER.map((item, index) => (
                                <ToggleGroupControlOption
                                    key={index}
                                    value={item.value}
                                    label={item.label}
                                />
                            ))}
                        </ToggleGroupControl>

{buttonType === "normal" && (
                            <>
                                <ColorControl
                                    label={__("Color", "essential-blocks")}
                                    color={btnColor}
                                    onChange={(btnColor) =>
                                        setAttributes({
                                            btnColor,
                                        })
                                    }
                                />
                                <ColorControl
                                    label={__("Background", "essential-blocks")}
                                    color={btnBgColor}
                                    onChange={(btnBgColor) =>
                                        setAttributes({
                                            btnBgColor,
                                        })
                                    }
                                />
                            </>
                        )}

{buttonType === "hover" && (
                            <>
                                <ColorControl
                                    label={__("Color", "essential-blocks")}
                                    color={btnHvColor}
                                    onChange={(btnHvColor) =>
                                        setAttributes({
                                            btnHvColor,
                                        })
                                    }
                                />
                                <ColorControl
                                    label={__("Background", "essential-blocks")}
                                    color={btnBgHvColor}
                                    onChange={(btnBgHvColor) =>
                                        setAttributes({
                                            btnBgHvColor,
                                        })
                                    }
                                />
                            </>
                        )}

{formLayout == "block" && (
                            <ResponsiveRangeController
                                baseLabel={__(
                                    "Margin Top (PX)",
                                    "essential-blocks",
                                )}
                                controlName={BTN_TOP_SPECING}
                                min={0}
                                max={500}
                                step={1}
                                noUnits
                            />
                        )}

<InspectorPanel.PanelBody
                            title={__("Border", "essential-blocks")}
                            initialOpen={false}
                        >
                            <BorderShadowControl controlName={BTN_BORDER} />
                        </InspectorPanel.PanelBody>
                    </>

{btnAddIcon && (
                        <>
                            <Divider />
                            <ToggleGroupControl
                                label={__("Icon Postion", "essential-blocks")}

value={iconPosition}
                                onChange={(value) =>
                                    setAttributes({
                                        iconPosition: value,
                                    })
                                }
                                isBlock
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            >
                                {ICON_POSITION.map((item, index) => (
                                    <ToggleGroupControlOption
                                        key={index}
                                        value={item.value}
                                        label={item.label}
                                    />
                                ))}
                            </ToggleGroupControl>
                            <ResponsiveRangeController
                                baseLabel={__("Size", "essential-blocks")}
                                controlName={ICON_SIZE}
                                noUnits={true}
                            />
                            <ResponsiveRangeController
                                baseLabel={__("Gap", "essential-blocks")}
                                controlName={ICON_SPACE}
                                noUnits={true}
                            />
                        </>
                    )}
                </InspectorPanel.PanelBody>
                {applyFilters(
                    "eb_from_pro_multistep_button_styles",
                    "",
                    attributes,
                    setAttributes,
                )}
                <InspectorPanel.PanelBody
                    title={__("Validation", "essential-blocks")}
                    initialOpen={false}
                >
                    <TypographyDropdown
                        baseLabel={__("Typography", "essential-blocks")}
                        typographyPrefixConstant={FIELDS_TEXT_VALIDATION}
                    />

<ColorControl
                        label={__("Color", "essential-blocks")}
                        color={fieldsValidationColor}
                        onChange={(fieldsValidationColor) =>
                            setAttributes({
                                fieldsValidationColor,
                            })
                        }
                    />
                    <ColorControl
                        label={__("Fields Border Color", "essential-blocks")}
                        color={fieldsValidationBorderColor}
                        onChange={(fieldsValidationBorderColor) =>
                            setAttributes({
                                fieldsValidationBorderColor,
                            })
                        }
                    />
                    <ToggleGroupControl
                        label={__("Alignment", "essential-blocks")}

value={validationAlign}
                        onChange={(value) =>
                            setAttributes({
                                validationAlign: value,
                            })
                        }
                        isBlock
                        __next40pxDefaultSize
                        __nextHasNoMarginBottom
                    >
                        {CONTENTS_ALIGNMENTS.map((item, index) => (
                            <ToggleGroupControlOption
                                key={index}
                                value={item.value}
                                label={item.label}
                            />
                        ))}
                    </ToggleGroupControl>
                </InspectorPanel.PanelBody>
                <InspectorPanel.PanelBody
                    title={__("Message", "essential-blocks")}
                    initialOpen={false}
                >
                    <ToggleGroupControl
                        label={__("Alignment", "essential-blocks")}

value={messageAlign}
                        onChange={(value) =>
                            setAttributes({
                                messageAlign: value,
                            })
                        }
                        isBlock
                        __next40pxDefaultSize
                        __nextHasNoMarginBottom
                    >
                        {CONTENTS_ALIGNMENTS.map((item, index) => (
                            <ToggleGroupControlOption
                                key={index}
                                value={item.value}
                                label={item.label}
                            />
                        ))}
                    </ToggleGroupControl>
                    <ToggleGroupControl
                        className="newtogglegroupcontrol eb-inspector-btn-group"
                        value={messageType}
                        onChange={(value) =>
                            setAttributes({
                                messageType: value,
                            })
                        }
                        isBlock
                        __next40pxDefaultSize
                        __nextHasNoMarginBottom
                    >
                        {MESSAGE_TYPE.map((item, index) => (
                            <ToggleGroupControlOption
                                key={index}
                                value={item.value}
                                label={item.label}
                            />
                        ))}
                    </ToggleGroupControl>
                    {messageType == "success" && (
                        <>
                            <TypographyDropdown
                                baseLabel={__("Typography", "essential-blocks")}
                                typographyPrefixConstant={SUCCESS_TYPO}
                            />

<ColorControl
                                label={__("Color", "essential-blocks")}
                                color={successColor}
                                onChange={(successColor) =>
                                    setAttributes({
                                        successColor,
                                    })
                                }
                            />
                            <ColorControl
                                label={__("Background", "essential-blocks")}
                                color={successBgColor}
                                onChange={(successBgColor) =>
                                    setAttributes({
                                        successBgColor,
                                    })
                                }
                            />
                            <ResponsiveDimensionsControl
                                controlName={SUCCESS_PADDING}
                                baseLabel={__("Padding", "essential-blocks")}
                            />

<InspectorPanel.PanelBody
                                title={__("Border", "essential-blocks")}
                                initialOpen={false}
                            >
                                <BorderShadowControl
                                    controlName={SUCCESS_BORDER}
                                />
                            </InspectorPanel.PanelBody>
                        </>
                    )}

{messageType == "error" && (
                        <>
                            <TypographyDropdown
                                baseLabel={__("Typography", "essential-blocks")}
                                typographyPrefixConstant={ERROR_TYPO}
                            />

<ColorControl
                                label={__("Color", "essential-blocks")}
                                color={errorColor}
                                onChange={(errorColor) =>
                                    setAttributes({
                                        errorColor,
                                    })
                                }
                            />
                            <ColorControl
                                label={__("Background", "essential-blocks")}
                                color={errorBgColor}
                                onChange={(errorBgColor) =>
                                    setAttributes({
                                        errorBgColor,
                                    })
                                }
                            />

<PanelBody
                                title={__("Border", "essential-blocks")}
                                initialOpen={false}
                            >
                                <BorderShadowControl
                                    controlName={ERROR_BORDER}
                                />
                            </PanelBody>
                        </>
                    )}
                </InspectorPanel.PanelBody>
            </InspectorPanel.Style>
        </InspectorPanel>
    );
}
export default Inspector;

[-] edit.js [edit]
[-] .htaccess [edit]
[-] style.js [edit]
[-] helpers.js [edit]
[-] editor.scss [edit]
[+] constants
[-] save.js [edit]
[-] style.scss [edit]
[-] frontend.js [edit]
[-] index.js [edit]
[-] icon.svg [edit]
[-] inspector.js [edit]
[+] templates
[+] ..
[+] icons
[-] attributes.js [edit]