"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StepNameLabel = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const InlineTextEdit_1 = require("../../../CommonUI/InlineTextEdit");
function StepNameLabel(props) {
    const name = props.step.name ?? "Step Name";
    return ((0, jsx_runtime_1.jsxs)(StempNameLabelRender, { className: "StepNameLabel", children: [name, (0, jsx_runtime_1.jsx)(InlineTextEdit_1.InlineTextEdit, { text: name, onEdit: (val) => {
                    props.step.name = val;
                    props.step.stepUpdate();
                } })] }));
}
exports.StepNameLabel = StepNameLabel;
const StempNameLabelRender = styled_components_1.default.div `
    color: transparent;

    font-style: normal;
    font-size: 12px;
    line-height: 24px;
    position: relative;

    padding: 8px 16px;

    .InlineEdit {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .InlineEdit-label {
        padding: 8px 16px;

        font-style: normal;
        font-size: 12px;
        line-height: 24px;
        max-width: 100%;
        border-bottom: none;
        display: flex;
        color: #272932;
        &:hover {
            background: transparent;
            border-bottom: none;
        }
    }

    .InlineEdit-input {
        z-index: 5;
        background: #fff;

        &.MuiInputBase-root {
            width: 100%;
            .MuiInputBase-input {
                border: none;
                border-bottom: 1px solid RGBA(39, 41, 50, 0.35);
                padding: 8px 16px;
                color: RGBA(39, 41, 50, 0.7);

                font-style: normal;
                font-weight: 400;
                font-size: 12px;
                line-height: 24px;
                width: 100%;
            }
        }
    }
`;
//# sourceMappingURL=StepNameLabel.js.map