"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpressionValueDialog = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const ExpressionValueType_1 = require("@appglue/common/dist/Expressions/ExpressionValueType");
const RegisterExpressionRule_1 = require("@appglue/common/dist/Expressions/RegisterExpressionRule");
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const BackIcon_1 = require("../../CommonUI/Icon/BackIcon");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const VariablePicker_1 = tslib_1.__importDefault(require("../../CommonUI/VariablePicker"));
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const DataEditing_1 = require("../../CommonUI/DataEditing");
const StyledButton_1 = require("../../CommonUI/BuildlingBlocks/StyledButton");
const PlusGrayIcon_1 = require("../../CommonUI/Icon/PlusGrayIcon");
const InsertExpressionPage_1 = require("./InsertExpressionPage");
const CommonUI_1 = require("./CommonUI");
const ToolboxPanel_1 = require("./ToolboxPanel");
const AddExpressionButton_1 = require("./AddExpressionButton");
const ModeButtons_1 = require("./ModeButtons");
const ValidationError_1 = require("./ValidationError");
const UILayer_1 = require("../../CommonUI/BuildlingBlocks/UILayer");
const DataTypes_1 = require("@appglue/common/dist/Common/Data/DataTypes");
const Link_1 = require("../../CommonUI/BuilderUI/Link");
const RadioOffIcon_1 = require("../../CommonUI/Icon/RadioOffIcon");
const RadioOnIcon_1 = require("../../CommonUI/Icon/RadioOnIcon");
// import { isThisISOWeek } from "date-fns";
const ConfirmDialog_1 = require("../../CommonUI/ConfirmDialog");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const ExpressionContants_1 = require("@appglue/common/dist/Expressions/ExpressionContants");
const RegisterExpressionRuleEditor_1 = require("./RegisterExpressionRuleEditor");
const UILabel_1 = require("../../CommonUI/BuildlingBlocks/UILabel");
const UIStyleConstants_1 = require("@appglue/common/src/Common/UIStyleConstants");
const ExpressionValueSlotEditor = styled_components_1.default.div `
    font-size: 16px;
    background: #ffffff;
    box-shadow: 4px 4px 4px rgba(21, 84, 115, 0.05), 8px 8px 40px rgba(147, 169, 191, 0.28);
    border-radius: 4px;
    background: #fff;
    width: 650px;
    z-index: 101;
    max-height: none;
    padding: 16px 20px;
`;
const Header = styled_components_1.default.div `
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;

    width: 100%;
    display: flex;
    color: #272932;

    align-items: center;
`;
const HeaderFloatRight = styled_components_1.default.div `
    display: flex;
    margin-left: auto;
    justify-content: flex-end;
    padding-right: 15px;
    align-items: center;

    & > * {
        margin-left: 8px !important;

        &:first-child {
            margin-left: 0 !important;
        }
    }
`;
const ExpressionColContainer = styled_components_1.default.div `
    display: flex;
    width: 100%;
    height: 250px;
    padding: 8px;
    flex-wrap: wrap;
`;
const ExpressionViewPanel = styled_components_1.default.div `
    width: 100%;
    max-height: 376px;
    min-height: 96px;
    padding: 20px 0;
    clear: both;
    display: flex;
    flex-direction: column;
`;
const ExpressionViewPanelLine = styled_components_1.default.div `
    width: 100%;
    justify-content: flex-start;
    clear: both;
    text-transform: none;

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
`;
const ExpressionViewPanelLineCenter = styled_components_1.default.div `
    position: relative;
    display: flex;
    margin-left: auto;
    align-items: center;
    clear: both;
    min-height: 120px;
    border-radius: 5px;
    flex: 1;
    overflow: auto;
    width: 100%;

    border: 1px solid rgba(39, 41, 50, 0.2);
    box-sizing: border-box;
    border-radius: 4px;

    flex-direction: column;

    padding: 20px;
`;
const VariableOrValColumn = styled_components_1.default.div `
    border-left: 2px solid #ebf4fa;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 33%;
    padding-left: 10px;
    padding-right: 10px;
`;
const ExpressionColumn = styled_components_1.default.div `
    width: 33%;
    padding-right: 12px;
`;
const VariableOrValContentPanel = styled_components_1.default.div `
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    height: 332px;

    .unset .MuiSwitch-switchBase {
        padding: 0px !important;
    }
`;
const VariableContent = styled_components_1.default.div `
    display: flex;
    flex-direction: column;

    .VariablePicker_Content {
        background: #fff;
    }
`;
class ExpressionValueDialog extends react_1.default.Component {
    constructor(props) {
        super(props);
        this.state = {
            inserting: false,
            variableMode: this.props.expressionValue.variableName ===
                this.props.expressionValue.editContext?.definition?.requiredVariable?.name
                ? "use"
                : "pick",
            openConfirmModal: false,
        };
    }
    render() {
        return ((0, jsx_runtime_1.jsx)(UILayer_1.UILayer, { open: true, maxWidth: false, padding: "0px", onClose: this.props.onClose, renderUI: () => {
                return ((0, jsx_runtime_1.jsxs)(ExpressionValueSlotEditor, { className: "EditExpressionModal__root", children: [(0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.props.expressionValue, properties: ["valueTypeValue", "valueType"], control: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.renderHeader(), this.state.inserting ? ((0, jsx_runtime_1.jsx)(InsertExpressionPage_1.InsertExpressionPage, { expressionValue: this.props.expressionValue, onComplete: this.insertExpression, onCancel: () => this.setState({ inserting: false }) })) : (this.renderPage())] })) }), (0, jsx_runtime_1.jsxs)(DialogActions, { children: [(0, jsx_runtime_1.jsx)(Link_1.StyledLink, { onClick: () => {
                                        if (this.props.expressionValue.valueType !== ExpressionValueType_1.ExpressionValueType.UNSET) {
                                            if (DataUtilities_1.DataUtilities.getCookie(ExpressionContants_1.ExpressionConstants.EXPRESSION_CLEAR_COOKIE_KEY) !== "true")
                                                this.setState({ openConfirmModal: true });
                                            else
                                                this.props.expressionValue.clear();
                                        }
                                    }, style: {
                                        marginRight: 15,
                                    }, disabled: this.props.expressionValue.valueType === ExpressionValueType_1.ExpressionValueType.UNSET, children: "Clear" }), (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "contained", onClick: this.handleClose, children: "Complete" })] })] }));
            } }));
    }
    renderHeader() {
        return ((0, jsx_runtime_1.jsxs)(Header, { children: [(0, jsx_runtime_1.jsx)(UILabel_1.UILabel, { type: "page_heading", children: "Edit Expression Value" }), (0, jsx_runtime_1.jsxs)(HeaderFloatRight, { children: [this.props.expressionValue.editContext?.getParentExpressionValue(this.props.expressionValue._id) &&
                            !this.state.inserting && ((0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { size: "small", onClick: this.onSelectParent, variant: "outlined", children: "Select Parent" })), !this.state.inserting && this.props.expressionValue.valueType !== ExpressionValueType_1.ExpressionValueType.UNSET && ((0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { size: "small", onClick: () => {
                                this.setState({ inserting: true });
                            }, variant: "outlined", children: "Insert Expression" }))] })] }));
    }
    renderConfirmDialog() {
        return ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.ConfirmDialog, { open: this.state.openConfirmModal, action: "clear", onConfirm: (dontAskAgain) => {
                if (dontAskAgain) {
                    DataUtilities_1.DataUtilities.setCookieValue(ExpressionContants_1.ExpressionConstants.EXPRESSION_CLEAR_COOKIE_KEY, "true");
                }
                this.props.expressionValue.clear();
                this.setState({
                    openConfirmModal: false,
                });
            }, onCancel: () => this.setState({ openConfirmModal: false }) }));
    }
    renderPage() {
        switch (this.props.expressionValue.valueType) {
            case ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION:
                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModeButtons_1.ModeButtons, { value: this.props.expressionValue }), 
                        // no expression, render the toolbox
                        !this.props.expressionValue.subExpression ? ((0, jsx_runtime_1.jsx)(ToolboxPanel_1.ToolboxPanel, { large: false, expressionValue: this.props.expressionValue, onExpressionSelected: (registration) => {
                                let exp = registration.create();
                                this.props.expressionValue.subExpression = exp;
                                this.props.expressionValue.editContext?.setSelection(this.props.expressionValue._id);
                            } })) : (this.renderExpressionPanel()), this.renderConfirmDialog()] }));
            case ExpressionValueType_1.ExpressionValueType.VARIABLE:
                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModeButtons_1.ModeButtons, { value: this.props.expressionValue }), (0, jsx_runtime_1.jsx)(VariableOrValContentPanel, { children: (0, jsx_runtime_1.jsx)(VariableContent, { children: this.renderVariableControl() }) }), this.renderConfirmDialog()] }));
            case ExpressionValueType_1.ExpressionValueType.VALUE:
                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModeButtons_1.ModeButtons, { value: this.props.expressionValue }), (0, jsx_runtime_1.jsx)(VariableOrValContentPanel, { children: this.renderValueControl() }), this.renderConfirmDialog()] }));
            case ExpressionValueType_1.ExpressionValueType.UNSET:
                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModeButtons_1.ModeButtons, { value: this.props.expressionValue }), (0, jsx_runtime_1.jsxs)(ExpressionColContainer, { children: [(0, jsx_runtime_1.jsxs)(ExpressionColumn, { children: [(0, jsx_runtime_1.jsx)(CommonUI_1.ExpressionsGrid, { columnCount: 2, children: RegisterExpressionRule_1.ExpressionRuleRegistration.getCommonExpressions(this.props.expressionValue.editContext.expression.getInputDefinition())
                                                .splice(0, 10)
                                                .map((expression, key) => ((0, jsx_runtime_1.jsx)(AddExpressionButton_1.AddExpressionButton, { expression: this.props.expressionValue, hideLabel: false, registration: expression, onClick: () => {
                                                    let exp = expression.create();
                                                    this.props.expressionValue.subExpression = exp;
                                                    this.props.expressionValue.editContext?.setSelection(this.props.expressionValue._id);
                                                } }, key))) }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: 10, textAlign: "center" }, children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { size: "small", onClick: () => {
                                                    this.props.expressionValue.valueType = ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION;
                                                }, startIcon: (0, jsx_runtime_1.jsx)(PlusGrayIcon_1.PlusGrayIcon, {}), children: "Show More" }) })] }), (0, jsx_runtime_1.jsx)(VariableOrValColumn, { children: (0, jsx_runtime_1.jsx)(VariableContent, { children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "outlined", "data-testid": "XExpressionValueDialog-pick-variableName", onClick: () => {
                                                this.props.expressionValue.valueType = ExpressionValueType_1.ExpressionValueType.VARIABLE;
                                                this.props.expressionValue.editContext?.setSelection(this.props.expressionValue._id);
                                            }, children: "Pick Data Name" }) }) }), (0, jsx_runtime_1.jsx)(VariableOrValColumn, { children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "outlined", "data-testid": "XExpressionValueDialog-pick-value", onClick: () => {
                                            this.props.expressionValue.valueType = ExpressionValueType_1.ExpressionValueType.VALUE;
                                            this.props.expressionValue.editContext?.setSelection(this.props.expressionValue._id);
                                        }, children: "Enter Data Value" }) })] })] }));
        }
    }
    renderValueControl() {
        return ((0, jsx_runtime_1.jsxs)(ValueRender, { "data-testid": "ValueDialog-valueEditor", children: [(0, jsx_runtime_1.jsx)(ControlLabel, { isCenter: this.props.expressionValue.expectedType.type === DataTypes_1.DataTypes.BOOLEAN, children: "Enter Data Value" }), (0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { forData: this.props.expressionValue.expectedType, value: this.props.expressionValue.value, onUpdate: this.valueChange, mode: "edit_mode" })] }));
    }
    canRenderVariablePicker() {
        if (!this.props.expressionValue.editContext?.definition?.requiredVariable)
            return true;
        else if (this.state.variableMode === "pick" &&
            this.props.expressionValue.editContext?.definition?.requiredVariable?.name !==
                this.props.expressionValue?.variableName)
            return true;
        return false;
    }
    renderVariableControl() {
        const dataDefinition = this.props.expressionValue.editContext.expression.getInputDefinition();
        if (this.props.expressionValue.editContext?.definition?.requiredVariable) {
            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(UseOrPickRender, { children: [(0, jsx_runtime_1.jsxs)(UseOrPickItemRender, { selected: this.state.variableMode === "use", onClick: () => {
                                if (this.props.expressionValue.editContext?.definition?.requiredVariable) {
                                    this.props.expressionValue.variableName =
                                        this.props.expressionValue.editContext?.definition?.requiredVariable?.name;
                                }
                                this.handleClose();
                            }, children: [(0, jsx_runtime_1.jsxs)(core_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "flex-start", width: "100%", children: [(0, jsx_runtime_1.jsx)(UseOrPickTitle, { children: "Use Suggested Data Name" }), this.state.variableMode === "use" ? (0, jsx_runtime_1.jsx)(RadioOnIcon_1.RadioOnIcon, {}) : (0, jsx_runtime_1.jsx)(RadioOffIcon_1.RadioOffIcon, {})] }), (0, jsx_runtime_1.jsx)(RequiredVariableRender, { children: this.props.expressionValue.editContext?.definition?.requiredVariable?.name })] }), (0, jsx_runtime_1.jsx)("span", { children: "or" }), (0, jsx_runtime_1.jsxs)(UseOrPickItemRender, { selected: this.state.variableMode === "pick", onClick: () => this.setState({ variableMode: "pick" }), children: [(0, jsx_runtime_1.jsxs)(core_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "flex-start", width: "100%", children: [(0, jsx_runtime_1.jsx)(UseOrPickTitle, { children: this.props.expressionValue.editContext.expression?.canChangeInputs
                                                ? `Pick or Create Data Name`
                                                : `Pick Data Name` }), this.state.variableMode === "pick" ? (0, jsx_runtime_1.jsx)(RadioOnIcon_1.RadioOnIcon, {}) : (0, jsx_runtime_1.jsx)(RadioOffIcon_1.RadioOffIcon, {})] }), (0, jsx_runtime_1.jsx)(VariablePicker_1.default, { data: dataDefinition, onVariableSet: (path, def) => {
                                        if (def) {
                                            dataDefinition.fields.push(def);
                                            this.props.expressionValue.variableName = def.name;
                                            StateManager_1.StateManager.propertyChanged(dataDefinition, "fields");
                                        }
                                        else {
                                            this.props.expressionValue.variableName = path;
                                        }
                                    }, selected: this.state.variableMode ? this.props.expressionValue.variableName : undefined, allowNewVariable: this.props.expressionValue.editContext.expression?.canChangeInputs, requiredType: this.props.expressionValue.expectedType.type, isList: this.props.expressionValue.expectedType.list })] })] }) }));
        }
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlLabel, { children: this.props.expressionValue.editContext.expression?.canChangeInputs
                        ? `Pick or Create Data Name`
                        : `Pick Data Name` }), (0, jsx_runtime_1.jsx)(VariablePicker_1.default, { data: dataDefinition, onVariableSet: (path, def) => {
                        if (def) {
                            dataDefinition.fields.push(def);
                            this.props.expressionValue.variableName = def.name;
                            StateManager_1.StateManager.propertyChanged(dataDefinition, "fields");
                        }
                        else {
                            this.props.expressionValue.variableName = path;
                        }
                    }, selected: this.props.expressionValue.variableName, allowNewVariable: this.props.expressionValue.editContext.expression?.canChangeInputs, startOpenIfEmptyOrInvalid: true, requiredType: this.props.expressionValue.expectedType.type, isList: this.props.expressionValue.expectedType.list })] }));
    }
    handleClose() {
        this.props.expressionValue.editContext?.clearSelection();
        switch (this.props.expressionValue.valueType) {
            case ExpressionValueType_1.ExpressionValueType.VARIABLE:
                if (!this.props.expressionValue.variableName) {
                    if (this.state.variableMode === "use" &&
                        this.props.expressionValue.editContext?.definition?.requiredVariable) {
                        this.props.expressionValue.variableName =
                            this.props.expressionValue.editContext?.definition?.requiredVariable?.name;
                    }
                    else {
                        this.props.expressionValue.valueType = ExpressionValueType_1.ExpressionValueType.UNSET;
                    }
                }
                break;
            case ExpressionValueType_1.ExpressionValueType.VALUE:
                if (this.props.expressionValue.value === null || this.props.expressionValue.value === undefined)
                    this.props.expressionValue.valueType = ExpressionValueType_1.ExpressionValueType.UNSET;
                break;
            case ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION:
                if (!this.props.expressionValue.subExpression)
                    this.props.expressionValue.valueType = ExpressionValueType_1.ExpressionValueType.UNSET;
                break;
        }
        this.props.expressionValue.editContext?.clearSelection();
        this.props.expressionValue.editContext?.refresh();
    }
    onSelectParent() {
        let parent = this.props.expressionValue.editContext?.getParentExpressionValue(this.props.expressionValue._id);
        if (parent) {
            this.props.expressionValue.editContext?.setSelection(parent._id);
        }
    }
    insertExpression(position, inserted, selected) {
        // pick expression, pick what slot in expression you are.
        let ev = inserted.expressionContext?.getElement(selected);
        if (!ev)
            throw new Error("could not find expression value");
        switch (position.valueType) {
            case ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION:
                ev.subExpression = position.subExpression;
                break;
            case ExpressionValueType_1.ExpressionValueType.VALUE:
                ev.value = position.value;
                break;
            case ExpressionValueType_1.ExpressionValueType.VARIABLE:
                ev.variableName = position.variableName;
                break;
        }
        position.subExpression = inserted;
        position.editContext?.setSelection(position._id);
        this.setState({
            inserting: false,
        });
    }
    valueChange(newValue) {
        this.props.expressionValue.value = newValue;
        this.forceUpdate();
    }
    renderExpressionPanel() {
        let type = Reflect.get(this.props.expressionValue.subExpression, "__type");
        const expression = RegisterExpressionRule_1.ExpressionRuleRegistration.getExpressionByType(type, this.props.expressionValue.editContext.expression.getInputDefinition());
        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.props.expressionValue.subExpression ? ((0, jsx_runtime_1.jsxs)(ExpressionViewPanel, { children: [(0, jsx_runtime_1.jsx)(ExpressionViewPanelLine, { children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { size: "small", onClick: () => {
                                this.props.expressionValue.subExpression = undefined;
                                this.props.expressionValue.editContext?.setSelection(this.props.expressionValue._id);
                            }, "data-testid": "XExpressionValueDialog-reset-expression", startIcon: (0, jsx_runtime_1.jsx)(BackIcon_1.BackIcon, {}), children: expression?.name }) }), (0, jsx_runtime_1.jsx)(ExpressionViewPanelLineCenter, { children: (0, jsx_runtime_1.jsxs)(SubExpressionRender, { children: [(0, RegisterExpressionRuleEditor_1.RenderExpressionRule)(this.props.expressionValue.subExpression), (0, jsx_runtime_1.jsx)(ValidationError_1.ValidationError, { value: this.props.expressionValue })] }) })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})) }));
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueDialog.prototype, "canRenderVariablePicker", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueDialog.prototype, "renderVariableControl", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueDialog.prototype, "handleClose", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueDialog.prototype, "onSelectParent", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueDialog.prototype, "insertExpression", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], ExpressionValueDialog.prototype, "valueChange", null);
exports.ExpressionValueDialog = ExpressionValueDialog;
const ValueRender = styled_components_1.default.div `
    .XValueEditor-editWrapper {
        justify-content: center;
        display: flex;
    }
`;
const DialogActions = styled_components_1.default.div `
    padding: 20px 0 0;
    border-top: solid 1px rgba(39, 41, 50, 0.1);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
`;
const UseOrPickRender = styled_components_1.default.div `
    display: flex;
    align-items: center;

    //styleName: text/Inter Medium 12px;

    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: center;

    color: rgb(96, 104, 129, 0.6);

    > * {
        margin-left: 8px;

        &:first-child {
            margin-left: 0;
        }
    }
`;
const UseOrPickItemRender = styled_components_1.default.div `
    background: #fcfcfe;
    /* main/border */

    border: 1px solid ${(props) => (props.selected ? UIStyleConstants_1.UIStyleConstants.BLUE_COLOR : "#f1f1f6")};
    box-sizing: border-box;
    border-radius: 4px;

    display: flex;
    flex-direction: column;

    align-items: center;

    padding: 16px 16px 20px 20px;

    width: 210px;
    min-height: 110px;

    position: relative;
`;
const UseOrPickTitle = styled_components_1.default.div `
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: center;
    color: #272932;

    margin-bottom: 16px;
`;
const RequiredVariableRender = styled_components_1.default.div `
    min-width: 93px;
    height: 41px;
    padding: 0 16px;
    background: rgba(64, 80, 166, 0.1);

    //styleName: text/Inter Medium 14px;

    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: left;
    color: #4050a6;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(64, 80, 166, 0.1);
    box-sizing: border-box;
    border-radius: 4px;
`;
const SubExpressionRender = styled_components_1.default.div `
    position: relative;

    margin: auto;
`;
const ControlLabel = styled_components_1.default.div `
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: ${(props) => (props.isCenter ? "center" : "left")};
    color: #4050a6;
    margin-bottom: 10px;
`;
//# sourceMappingURL=ExpressionValueDialog.js.map