"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefinitionWithExample = exports.ValuesTable = exports.DefinitionWithExampleMode = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const mdi_material_ui_1 = require("mdi-material-ui");
const DataEditing_1 = require("../../DataEditing");
const icons_material_1 = require("@mui/icons-material");
const core_1 = require("@material-ui/core");
const react_xarrows_1 = tslib_1.__importDefault(require("react-xarrows"));
const DataDefEditLayer_1 = require("../DataDefEditLayer");
const DataTypes_1 = require("@appglue/common/dist/Common/Data/DataTypes");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const ObserveState_1 = require("../../StateManagement/ObserveState");
const ObjectDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition");
const Object_1 = require("../../DataEditing/Object");
var DefinitionWithExampleMode;
(function (DefinitionWithExampleMode) {
    DefinitionWithExampleMode["VALUE"] = "value";
    DefinitionWithExampleMode["DEFINITION"] = "definition";
})(DefinitionWithExampleMode = exports.DefinitionWithExampleMode || (exports.DefinitionWithExampleMode = {}));
const ValuesTable = (props) => {
    let value = DataUtilities_1.DataUtilities.get(props.definition.getValueObject(), props.path);
    let allsubfields = DataUtilities_1.DataUtilities.getAllSubFields(props.definition);
    let startRow = allsubfields.indexOf(props.field) + 1;
    const onValueUpdate = (newValue) => {
        props.definition.setValue(props.path, newValue);
        StateManager_1.StateManager.changed(props.definition);
    };
    return ((0, jsx_runtime_1.jsx)(ValuesTableWrapperDiv, { fieldsCount: DataUtilities_1.DataUtilities.getAllSubFields(props.field).length, startRow: startRow, children: (0, jsx_runtime_1.jsx)(ValuesTableDiv, { children: (0, jsx_runtime_1.jsx)(Object_1.EditModeObjectValueEditor, { forData: props.field, value: value, editMode: "inline", onUpdate: onValueUpdate, showFieldName: false }) }) }));
};
exports.ValuesTable = ValuesTable;
const ValueEditor = (props) => {
    const value = DataUtilities_1.DataUtilities.get(props.definition.getValueObject(), props.path);
    let editMode = "edit_mode";
    if (props.field.list || props.field.type === DataTypes_1.DataTypes.FILE) {
        editMode = "display_mode_edit";
    }
    const onValueUpdate = (newValue) => {
        props.definition.setValue(props.path, newValue);
        StateManager_1.StateManager.changed(props.definition);
    };
    return ((0, jsx_runtime_1.jsx)(ValueEditorDiv, { children: (0, jsx_runtime_1.jsx)(ValueEditorValueDiv, { children: (0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { forData: props.field, value: value, onUpdate: onValueUpdate, mode: editMode, editMode: "layer" }) }) }));
};
const LineButtons = (props) => {
    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
    let parent = props.definition;
    if (props.path !== "") {
        let paths = props.path.split(".");
        if (paths.length > 1) {
            let parentPath = paths.slice(0, -1).join(".");
            parent = DataUtilities_1.DataUtilities.getFieldFromDataDefinitionByName(props.definition.fields, parentPath);
        }
    }
    let isLast = parent.fields.indexOf(props.field) === parent.fields.length - 1;
    const changePosition = (newindex) => {
        if (newindex < 0)
            return;
        DataUtilities_1.DataUtilities.changeFieldPositionByPath(props.definition, newindex, props.path);
        StateManager_1.StateManager.changed(props.definition);
    };
    const removeField = (event) => {
        event.stopPropagation();
        DataUtilities_1.DataUtilities.removeFieldByPath(props.definition, props.path);
        StateManager_1.StateManager.changed(props.definition);
    };
    return ((0, jsx_runtime_1.jsx)(core_1.Fade, { in: props.show, children: (0, jsx_runtime_1.jsx)(LineButtonsDiv, { children: (0, jsx_runtime_1.jsxs)(core_1.ButtonGroup, { variant: "contained", children: [props.index > 0 && ((0, jsx_runtime_1.jsx)(core_1.Button, { size: "small", onClick: () => changePosition(props.index - 1), "data-testid": `${props.path}-move-up`, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowUpwardOutlined, { fontSize: "small" }) })), !isLast && ((0, jsx_runtime_1.jsx)(core_1.Button, { size: "small", onClick: () => changePosition(props.index + 1), "data-testid": `${props.path}-move-down`, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowDownwardOutlined, { fontSize: "small" }) })), (0, jsx_runtime_1.jsx)(core_1.Button, { size: "small", "aria-label": "delete", onClick: removeField, "data-testid": `${props.path}-remove`, children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutlined, { fontSize: "small" }) }), props.field.type !== DataTypes_1.DataTypes.BOOLEAN && ((0, jsx_runtime_1.jsxs)(core_1.Button, { size: "small", "aria-label": "edit", "data-testid": `${props.path}-edit`, onClick: (event) => {
                            setAnchorEl(event.currentTarget);
                        }, children: [(0, jsx_runtime_1.jsx)(mdi_material_ui_1.Pencil, { fontSize: "small" }), (0, jsx_runtime_1.jsx)(DataDefEditLayer_1.DataDefEditLayer, { dataDef: props.field, onUpdate: () => {
                                    StateManager_1.StateManager.changed(props.definition);
                                }, anchorEl: anchorEl, open: Boolean(anchorEl), keepMounted: true, onClose: () => {
                                    setAnchorEl(null);
                                } })] }))] }) }) }));
};
const FieldControl = (props) => {
    let field = props.field;
    const [fieldName, setFieldName] = (0, react_1.useState)(field.name);
    const [showTools, setShowTools] = (0, react_1.useState)(false);
    const [error, setError] = (0, react_1.useState)(null);
    const isHideExampleDataSide = DataUtilities_1.DataUtilities.containsObjectListField(props.definition) && props.mode === DefinitionWithExampleMode.DEFINITION;
    let showValueEditor = !isHideExampleDataSide;
    if (showValueEditor) {
        let paths = props.path.split(".").filter((p) => p !== "");
        paths.splice(-1, 1);
        for (let i = 1; i <= paths.length; i++) {
            let ancestorPath = paths.slice(0, i).join(".");
            let ancestorField = DataUtilities_1.DataUtilities.getFieldFromDataDefinitionByName(props.definition.fields, ancestorPath);
            if (ancestorField instanceof ObjectDataDefinition_1.ObjectDataDefinition && ancestorField.list) {
                showValueEditor = false;
                break;
            }
        }
    }
    let showValuesTable = !isHideExampleDataSide && showValueEditor;
    if (showValuesTable) {
        showValuesTable = field.list && field instanceof ObjectDataDefinition_1.ObjectDataDefinition;
    }
    (0, react_1.useEffect)(() => {
        let validationError = DataUtilities_1.DataUtilities.validateDataDefinitionNameByPath(props.definition, props.path, fieldName, 1);
        if (!error && validationError) {
            setError(validationError);
        }
        else if (error && !validationError) {
            setError(null);
        }
    }, [error, props.definition, props.path, fieldName]);
    const onUpdateFieldName = () => {
        if (field.name !== fieldName) {
            try {
                DataUtilities_1.DataUtilities.changeDataDefinitionNameByPath(props.definition, fieldName, props.path);
                StateManager_1.StateManager.changed(props.definition);
                setError(null);
            }
            catch (e) {
                setError(`Can not set the field name with ${fieldName}`);
                console.error("Error:", e);
            }
        }
    };
    const onUpdateChangeType = (event) => {
        try {
            DataUtilities_1.DataUtilities.changeDataDefinitionTypeByPath(props.definition, event.target.value, props.path);
            StateManager_1.StateManager.changed(props.definition);
        }
        catch (e) { }
    };
    let deepsCount = props.path.split(".").length - 1;
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(DataEditorRow, { onMouseOver: () => setShowTools(true), onMouseOut: () => setShowTools(false), deepsCount: deepsCount, showBorder: deepsCount === 0, children: [(0, jsx_runtime_1.jsx)(CollapseDiv, { children: (0, jsx_runtime_1.jsx)("div", { className: "div-collapse", children: props.onCollapse && ((0, jsx_runtime_1.jsx)(core_1.IconButton, { onClick: props.onCollapse, size: "small", children: props.viewDetails ? (0, jsx_runtime_1.jsx)(icons_material_1.ArrowDropUpOutlined, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ArrowDropDownOutlined, {}) })) }) }), (0, jsx_runtime_1.jsxs)(DataEditorDefDiv, { children: [(0, jsx_runtime_1.jsxs)(FieldNameDiv, { children: [(0, jsx_runtime_1.jsx)(core_1.TextField, { value: fieldName, variant: "outlined", onChange: (event) => {
                                            setFieldName(event.target.value);
                                        }, onBlur: onUpdateFieldName, onKeyUp: (event) => {
                                            if (event.key === "Enter") {
                                                onUpdateFieldName();
                                            }
                                        }, classes: { root: "DefEditor-text" }, error: !!error, helperText: error, "data-testid": `${props.path}-name`, id: `${props.path}-name`, className: "field-name", inputProps: { readOnly: props.readOnly }, fullWidth: true }), props.path && (0, jsx_runtime_1.jsx)("div", { id: `${props.path}-name-connector`, className: "path-connector" })] }), !props.readOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.Select, { variant: "outlined", native: true, value: field.type, "data-testid": `${props.path}-type`, classes: { root: "DefEditor-select" }, onChange: onUpdateChangeType, children: Object.values(DataTypes_1.DataTypes).map((item, index) => {
                                            return ((0, jsx_runtime_1.jsx)("option", { value: item, children: item }, index));
                                        }) }), (0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { label: "Is List", "data-testid": `${props.path}-list`, classes: { root: "DefEditor-checkboxLabel" }, control: (0, jsx_runtime_1.jsx)(core_1.Checkbox, { color: "primary", checked: !!field.list, onChange: (_, checked) => {
                                                field.list = checked;
                                                if (checked) {
                                                    DataUtilities_1.DataUtilities.set(props.definition.getValueObject(), props.path, [], false, true);
                                                }
                                                else {
                                                    DataUtilities_1.DataUtilities.set(props.definition.getValueObject(), props.path, undefined, false, true);
                                                }
                                                StateManager_1.StateManager.changed(props.definition);
                                            } }) })] })), props.readOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "data-field-type", children: (0, jsx_runtime_1.jsx)("span", { children: field.type }) }), (0, jsx_runtime_1.jsx)(core_1.FormLabel, { component: "label", className: "data-field-list", children: field.list ? "List" : "Not List" })] })), !props.readOnly && ((0, jsx_runtime_1.jsx)(LineButtons, { definition: props.definition, path: props.path, index: props.index, show: showTools, field: props.field }))] })] }), showValueEditor && (0, jsx_runtime_1.jsx)(ValueEditor, { field: field, definition: props.definition, path: props.path })] }));
};
const FieldEditor = (props) => {
    let field = props.field;
    let subfields = Reflect.get(field, "fields");
    let path = props.path;
    let parentPath;
    if (path !== "") {
        let paths = path.split(".");
        if (paths.length > 1) {
            parentPath = paths.slice(0, -1).join(".");
        }
    }
    const [viewDetails, setViewDetails] = (0, react_1.useState)(true);
    const onCollapse = () => {
        setViewDetails(!viewDetails);
    };
    const isHideExampleDataSide = DataUtilities_1.DataUtilities.containsObjectListField(props.definition) && props.mode === DefinitionWithExampleMode.DEFINITION;
    if (subfields) {
        let showValueEditor = !isHideExampleDataSide;
        if (showValueEditor) {
            let paths = props.path.split(".").filter((p) => p !== "");
            paths.splice(-1, 1);
            for (let i = 1; i <= paths.length; i++) {
                let ancestorPath = paths.slice(0, i).join(".");
                let ancestorField = DataUtilities_1.DataUtilities.getFieldFromDataDefinitionByName(props.definition.fields, ancestorPath);
                if (ancestorField instanceof ObjectDataDefinition_1.ObjectDataDefinition && ancestorField.list) {
                    showValueEditor = false;
                    break;
                }
            }
        }
        let showValuesTable = !isHideExampleDataSide && showValueEditor;
        if (showValuesTable) {
            showValuesTable = field.list && field instanceof ObjectDataDefinition_1.ObjectDataDefinition;
        }
        console.log(parentPath);
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldControl, { field: field, path: props.path, definition: props.definition, viewDetails: viewDetails, index: props.index, onCollapse: onCollapse, readOnly: props.readOnly, mode: props.mode }), viewDetails && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SubFieldsEditor, { definition: props.definition, path: props.path, fields: subfields, readOnly: props.readOnly, mode: props.mode }), showValuesTable && ((0, jsx_runtime_1.jsx)(exports.ValuesTable, { field: props.field, definition: props.definition, path: props.path }))] })), parentPath && parentPath !== "" && ((0, jsx_runtime_1.jsx)(react_xarrows_1.default, { end: `${parentPath}-name-connector`, start: `${props.path}-name`, startAnchor: "left", endAnchor: "bottom", path: "grid", showHead: false, showTail: false, color: "#d3d6e7", strokeWidth: 1 }))] }));
    }
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldControl, { definition: props.definition, field: field, path: props.path, index: props.index, readOnly: props.readOnly, mode: props.mode }), parentPath && parentPath !== "" && ((0, jsx_runtime_1.jsx)(react_xarrows_1.default, { end: `${parentPath}-name-connector`, start: `${props.path}-name`, startAnchor: "left", path: "grid", showHead: false, showTail: false, endAnchor: "bottom", color: "#d3d6e7", strokeWidth: 1 }))] }));
};
const SubFieldsEditor = (props) => {
    const { definition, fields, path } = props;
    const [newFieldName, setNewFieldName] = (0, react_1.useState)("");
    let prefixPath = path ? `${path}.` : "";
    const [error, setError] = (0, react_1.useState)(null);
    const isHideExampleDataSide = DataUtilities_1.DataUtilities.containsObjectListField(props.definition) && props.mode === DefinitionWithExampleMode.DEFINITION;
    const createNewField = () => {
        try {
            DataUtilities_1.DataUtilities.addDataDefinitionByPath(props.definition, DataTypes_1.DataTypes.UNDEFINED, props.path || "", newFieldName);
            setNewFieldName("");
            StateManager_1.StateManager.changed(definition);
            if (error) {
                setError(null);
            }
        }
        catch (e) {
            setError(e.message);
        }
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [fields.map((field, idx) => {
                return ((0, jsx_runtime_1.jsx)(FieldEditor, { definition: props.definition, field: field, path: `${prefixPath}${field.name}`, index: idx, "data-testid": `${prefixPath}${field.name}`, readOnly: props.readOnly, mode: props.mode }, `${field.name}_${idx}`));
            }), !props.readOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(AddNewField, { className: "add-new-field", deepsCount: props.path ? props.path.split(".").length + 1 : 1, showBorder: prefixPath === "", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { onClick: createNewField, children: (0, jsx_runtime_1.jsx)(icons_material_1.AddBoxRounded, { fontSize: "large" }) }), (0, jsx_runtime_1.jsx)("div", { className: "add-new-field-name", onClick: createNewField }), (0, jsx_runtime_1.jsx)("div", { className: "add-new-field-type", onClick: createNewField }), (0, jsx_runtime_1.jsx)("div", { className: "add-new-field-list", onClick: createNewField })] }), !isHideExampleDataSide && (0, jsx_runtime_1.jsx)(EmptyValueField, {})] }))] }));
};
const DefinitionWithExample = (props) => {
    const { definition, readOnly, mode = DefinitionWithExampleMode.DEFINITION } = props;
    const isHideExampleDataSide = DataUtilities_1.DataUtilities.containsObjectListField(props.definition) && mode === DefinitionWithExampleMode.DEFINITION;
    return ((0, jsx_runtime_1.jsxs)(DefinitionWithExampleRender, { children: [(0, jsx_runtime_1.jsx)(StyledTextField, { variant: "h4", align: "center", color: "primary", children: "Schema" }), (0, jsx_runtime_1.jsx)(StyledTextField, { variant: "h4", align: "center", color: "primary", children: "Example Data" }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: definition, control: () => {
                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SubFieldsEditor, { definition: definition, fields: definition.fields, readOnly: readOnly || mode === DefinitionWithExampleMode.VALUE, mode: mode }), isHideExampleDataSide && ((0, jsx_runtime_1.jsx)(NotificationRender, { rowsSpan: 100000, children: (0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "h5", color: "secondary", children: "Edit in example data tab" }) }))] }));
                } })] }));
};
exports.DefinitionWithExample = DefinitionWithExample;
const DefinitionWithExampleRender = styled_components_1.default.div `
    display: grid;

    position: relative;

    grid-template-columns: 600px minmax(400px, auto);

    flex: 1;
    overflow: auto;
`;
const StyledTextField = (0, styled_components_1.default)(core_1.Typography) `
    && {
        padding: 15px;
        background: #d9dced;
        text-align: left;

        border-left: solid 1px #cbcee5;

        &:first-child {
            border-right: solid 1px #cbcee5;
            border-left: none;
        }
    }
`;
const LineButtonsDiv = styled_components_1.default.div `
    position: absolute;
    top: -15px;
    right: 0;
    z-index: 10;
`;
const DataEditorRow = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    position: relative;
    min-height: 52px;
    box-sizing: border-box;

    grid-column-start: 1;
    grid-column-end: 2;

    ${(props) => props.showBorder
    ? `
                border-top: solid 1px #c4c4c4;
            `
    : ``}

    border-right: 1px solid rgb(203, 206, 229);

    ${(props) => (props.deepsCount ? `padding-left: ${props.deepsCount * 30}px;` : ``)}

    min-width: 600px;
    width: 600px;

    padding-right: 15px;

    .data-field-type {
        min-width: 70px;
        text-align: center;
        text-transform: capitalize;
        background: #fcfcfe;
        padding: 10px 0px;
        border-radius: 4px;
        border: 1px solid #c2c2c3;
    }

    .data-field-list {
        min-width: 90px;
        font-size: 14px;
        text-align: center;
        text-transform: capitalize;
        background: #fcfcfe;
        padding: 10px 0px;
        border-radius: 4px;
        border: 1px solid #c2c2c3;
        color: black;
        align-items: center;
        display: flex;
        justify-content: center;
    }
`;
const CollapseDiv = styled_components_1.default.div `
    width: 30px;
    margin-right: 15px;
    display: flex;
    align-items: start;

    .div-collapse {
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        background: #fcfcfe;
        border-radius: 5px;
        margin-top: 5px;
    }
`;
const DataEditorDefDiv = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    align-items: start;
    position: relative;
    width: 100%;

    > * {
        margin: 5px !important;
    }

    .DefEditor-select,
    .DefEditor-text .MuiOutlinedInput-input {
        padding: 10px;
        background: #fcfcfe;
    }
`;
const FieldNameDiv = styled_components_1.default.div `
    flex: 1;
    position: relative;

    .path-connector {
        position: absolute;
        bottom: -5px;
        left: 15px;
        width: 5px;
        height: 5px;
    }
`;
const ValueEditorDiv = styled_components_1.default.div `
    display: flex;
    justify-content: flex-start;
    width: 100%;
    align-items: center;
    flex-direction: row;
    padding-left: 15px;
    padding-right: 15px;

    border-top: solid 1px #c4c4c4;
    border-left: 1px solid rgb(203, 206, 229);

    .input-value-field {
        width: 400px;
    }

    .input-value-field input {
        background: #fcfcfe;
    }
`;
const ValueEditorValueDiv = styled_components_1.default.div `
    width: 100%;
    padding: 0 5px;
    display: flex;
    align-items: center;
    min-height: 52px;

    .MuiTypography-body1 {
        line-height: 29px;
    }
`;
const NotificationRender = styled_components_1.default.div `
    grid-column-start: 2;
    grid-column-end: 3;

    grid-row-start: 2;
    grid-row-end: ${(props) => props.rowsSpan};

    padding-top: 150px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
`;
const AddNewField = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    padding-left: ${(props) => props.deepsCount * 30 - 15}px;

    ${(props) => (props.showBorder ? `border-top: solid 1px #c4c4c4;` : ``)}

    border-right: 1px solid rgb(203, 206, 229);

    padding-right: 15px;

    .MuiButton-root {
        min-width: 34px;
        padding: 0;
        margin: 5px 0;
        color: rgb(165 165 165);
    }

    div {
        background: #f1f1f1;
        border-radius: 5px;
        margin: 5px 0;
    }

    .add-new-field-name {
        width: calc(100% - 250px);
    }

    .add-new-field-type {
        width: 93px;
    }

    .add-new-field-list {
        width: 97px;
    }

    &:hover {
        cursor: pointer;
    }
`;
const ValuesTableWrapperDiv = styled_components_1.default.div `
    position: relative;
    grid-column-start: 2;
    grid-column-end: 3;

    overflow: auto;

    grid-row-start: ${(props) => props.startRow + 2};
    grid-row-end: ${(props) => props.startRow + 2 + props.fieldsCount};

    border-top: solid 1px #c4c4c4;
    border-left: 1px solid rgb(203, 206, 229);
`;
const ValuesTableDiv = styled_components_1.default.div `
    display: flex;
    align-items: flex-start;
    padding: 10px;
    background: #fcfcfe;

    .MuiTypography-h6 {
        margin-right: 10px;
    }

    .MuiInputBase-input,
    .MuiInputBase-input,
    .MuiOutlinedInput-input {
        font-family: Inter !important;
        font-size: 12px !important;
        font-style: normal;
        font-weight: 400 !important;
        line-height: 17px !important;
        letter-spacing: 0px;
        text-align: left;
        color: rgba(39, 41, 50, 0.8);
    }

    .MuiOutlinedInput-input {
        padding: 6px 12px;
        background: rgba(64, 80, 166, 0.05);
        height: 20px;
    }

    .MuiOutlinedInput-notchedOutline {
        border: none;
        border-top: solid 1px rgba(64, 80, 166, 0.35);
        border-radius: 0;
    }

    .MuiFormControl-root {
        display: flex;
    }

    .MuiSwitch-root {
        height: 25px !important;
        width: 40px !important;
        padding: 0;
        border-radius: 20px;
    }

    .MuiSwitch-switchBase {
        padding: 2px !important;

        &.Mui-checked {
            transform: translateX(15px) !important;
        }
    }

    input[type="date"],
    input[type="datetime-local"] {
        position: relative;

        &::-webkit-calendar-picker-indicator {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 20px;
            width: 20px;
            opacity: 0;
        }

        &:hover::-webkit-calendar-picker-indicator {
            opacity: 1;
        }
    }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */

    input[type="number"] {
        -moz-appearance: textfield;
    }
`;
const EmptyValueField = styled_components_1.default.div `
    border-top: solid 1px #c4c4c4;
    border-left: 1px solid rgb(203, 206, 229);
`;
//# sourceMappingURL=DefinitionWithExample.js.map