(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "styled-components", "../typography/P2", "../Pallette/themes", "../utils/defineResponsibleSize", "../utils/theme/getTheme", "./themes"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.InputWrapperStyled = exports.PlaceholderStyled = exports.InputLeadContentStyled = exports.IconRightStyled = exports.IconStyled = exports.RequiredStyle = exports.IconsBoxStyled = exports.IconWrapper = exports.TextStatusStyled = exports.PLACEHOLDER_PADDING_TOP = exports.LabelStyled = exports.getStatusColor = exports.definePlaceholderColor = exports.defineIconColor = exports.defineRightIconColor = exports.defineBackgroundColor = exports.defineInputColor = exports.defineBorderRadius = exports.defineBorderBottom = void 0;
    var tslib_1 = require("tslib");
    var styled_components_1 = (0, tslib_1.__importStar)(require("styled-components"));
    var P2_1 = (0, tslib_1.__importDefault)(require("../typography/P2"));
    var themes_1 = require("../Pallette/themes");
    var defineResponsibleSize_1 = require("../utils/defineResponsibleSize");
    var getTheme_1 = require("../utils/theme/getTheme");
    var themes_2 = require("./themes");
    var COMPONENT_NAME = "input";
    var svgRepeatedStyles = function (theme, isFocused) { return "\n  svg {\n    color: " + (isFocused
        ? theme.components[COMPONENT_NAME].iconColorFocused
        : theme.components[COMPONENT_NAME].iconColor) + ";\n  }\n\n  &:hover {\n    svg {\n      color: " + theme.components[COMPONENT_NAME].iconColorHover + ";\n    }\n  }\n"; };
    var INPUT_COMPONENT_HEIGHTS = {
        l: 56,
        m: 48
    };
    var defineBorderBottom = function (_a) {
        var viewType = _a.viewType, theme = _a.theme, isHasValue = _a.isHasValue, status = _a.status, isReadOnly = _a.isReadOnly, isFocused = _a.isFocused, isDisabled = _a.isDisabled;
        if (viewType === "line") {
            if (isReadOnly || isDisabled) {
                return "1px solid " + theme.components[COMPONENT_NAME].borderColorDisabled;
            }
            if (status) {
                return "1px solid " + (0, exports.getStatusColor)(theme, status);
            }
            if (isFocused) {
                return "1px solid " + theme.components[COMPONENT_NAME].borderColorFocused;
            }
            if (isHasValue) {
                return "1px solid\n      " + theme.components[COMPONENT_NAME].borderColorValue + ";\n        ";
            }
            return "1px solid\n        " + theme.components[COMPONENT_NAME].borderColor;
        }
        else {
            return "none";
        }
    };
    exports.defineBorderBottom = defineBorderBottom;
    var defineBorderRadius = function (_a) {
        var viewType = _a.viewType;
        return viewType === "line" ? 0 : 16;
    };
    exports.defineBorderRadius = defineBorderRadius;
    var defineInputColor = function (_a) {
        var theme = _a.theme, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly;
        if (isReadOnly) {
            return theme.components[COMPONENT_NAME].colorReadOnly;
        }
        if (isDisabled) {
            return theme.components[COMPONENT_NAME].colorDisabled;
        }
        return theme.components[COMPONENT_NAME].color;
    };
    exports.defineInputColor = defineInputColor;
    var defineBackgroundColor = function (_a) {
        var theme = _a.theme, status = _a.status, _b = _a.isReadOnly, isReadOnly = _b === void 0 ? false : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isFocused, isFocused = _d === void 0 ? false : _d, _e = _a.viewType, viewType = _e === void 0 ? "round" : _e;
        if (viewType === "line") {
            return "transparent";
        }
        if (isReadOnly) {
            return theme.components[COMPONENT_NAME].backgroundReadOnly;
        }
        if (isFocused && !status) {
            return theme.components[COMPONENT_NAME].backgroundFocused;
        }
        if (isDisabled) {
            return theme.components[COMPONENT_NAME].backgroundDisabled;
        }
        switch (status) {
            case "error":
                return theme.components[COMPONENT_NAME].backgroundError;
            case "warning":
                return theme.components[COMPONENT_NAME].backgroundWarning;
            case "success":
                return theme.components[COMPONENT_NAME].backgroundSuccess;
            default:
                return theme.components[COMPONENT_NAME].background;
        }
    };
    exports.defineBackgroundColor = defineBackgroundColor;
    var defineRightIconColor = function (_a) {
        var theme = _a.theme, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly;
        if (isReadOnly || isDisabled) {
            return theme.components[COMPONENT_NAME].rightIconColorDisabled;
        }
        return theme.components[COMPONENT_NAME].iconColor;
    };
    exports.defineRightIconColor = defineRightIconColor;
    var defineIconColor = function (_a) {
        var theme = _a.theme, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly;
        if (isReadOnly) {
            return theme.components[COMPONENT_NAME].iconColorReadOnly;
        }
        if (isDisabled) {
            return theme.components[COMPONENT_NAME].iconColorDisabled;
        }
        return theme.components[COMPONENT_NAME].iconColor;
    };
    exports.defineIconColor = defineIconColor;
    var definePlaceholderColor = function (_a) {
        var theme = _a.theme, status = _a.status, isFocused = _a.isFocused, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly;
        if (isReadOnly || isDisabled) {
            return theme.components[COMPONENT_NAME].colorPlaceholderDisabled;
        }
        if (status) {
            return (0, exports.getStatusColor)(theme, status);
        }
        if (isFocused) {
            return theme.components[COMPONENT_NAME].colorPlaceholderFocused;
        }
        return theme.components[COMPONENT_NAME].colorPlaceholder;
    };
    exports.definePlaceholderColor = definePlaceholderColor;
    var getStatusColor = function (theme, status) {
        switch (status) {
            case "error":
                return theme.components[COMPONENT_NAME].colorError;
            case "warning":
                return theme.components[COMPONENT_NAME].colorWarning;
            case "success":
                return theme.components[COMPONENT_NAME].colorSuccess;
            default:
                return theme.components[COMPONENT_NAME].color;
        }
    };
    exports.getStatusColor = getStatusColor;
    exports.LabelStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
        var width = _a.width;
        return (0, defineResponsibleSize_1.defineResponsibleWidth)(width);
    });
    exports.PLACEHOLDER_PADDING_TOP = {
        l: 16,
        m: 13
    };
    exports.TextStatusStyled = (0, styled_components_1.default)(P2_1.default).attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeInput
        })
    }); })(templateObject_3 || (templateObject_3 = (0, tslib_1.__makeTemplateObject)(["\n  display: inline-flex;\n  margin-top: 9px;\n  margin-left: 20px;\n  max-height: max-content;\n  overflow: hidden;\n\n  ", "\n"], ["\n  display: inline-flex;\n  margin-top: 9px;\n  margin-left: 20px;\n  max-height: max-content;\n  overflow: hidden;\n\n  ", "\n"])), function (_a) {
        var theme = _a.theme, status = _a.status;
        return status && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = (0, tslib_1.__makeTemplateObject)(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), (0, exports.getStatusColor)(theme, status));
    });
    exports.TextStatusStyled.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.IconWrapper = styled_components_1.default.div.attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeInput
        })
    }); })(templateObject_4 || (templateObject_4 = (0, tslib_1.__makeTemplateObject)(["\n  min-width: 16px;\n  display: flex;\n  margin-right: 8px;\n  ", "\n"], ["\n  min-width: 16px;\n  display: flex;\n  margin-right: 8px;\n  ", "\n"])), function (_a) {
        var theme = _a.theme, isFocused = _a.isFocused;
        return svgRepeatedStyles(theme, isFocused);
    });
    exports.IconWrapper.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.IconsBoxStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  & svg {\n    cursor: pointer;\n    width: 16px;\n    height: 16px;\n  }\n\n  > ", ":last-child {\n    margin-right: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  & svg {\n    cursor: pointer;\n    width: 16px;\n    height: 16px;\n  }\n\n  > ", ":last-child {\n    margin-right: 0;\n  }\n"])), exports.IconWrapper);
    exports.RequiredStyle = styled_components_1.default.span.attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeInput
        })
    }); })(templateObject_6 || (templateObject_6 = (0, tslib_1.__makeTemplateObject)(["\n  margin-left: 7px;\n  color: ", ";\n"], ["\n  margin-left: 7px;\n  color: ", ";\n"])), function (_a) {
        var theme = _a.theme, isDisabled = _a.isDisabled;
        if (isDisabled) {
            return theme.components[COMPONENT_NAME].colorDisabled;
        }
        else {
            return theme.components[COMPONENT_NAME].colorError;
        }
    });
    exports.RequiredStyle.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.IconStyled = styled_components_1.default.div.attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeInput
        })
    }); })(templateObject_7 || (templateObject_7 = (0, tslib_1.__makeTemplateObject)(["\n  display: inline-flex;\n  align-items: center;\n  margin-right: 11px;\n\n  svg {\n    width: 16px;\n    height: 16px;\n    transition: all 0.1s ease-out;\n    color: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  margin-right: 11px;\n\n  svg {\n    width: 16px;\n    height: 16px;\n    transition: all 0.1s ease-out;\n    color: ", ";\n  }\n"])), exports.defineIconColor);
    exports.IconStyled.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.IconRightStyled = (0, styled_components_1.default)(exports.IconStyled).attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeInput
        })
    }); })(templateObject_8 || (templateObject_8 = (0, tslib_1.__makeTemplateObject)(["\n  margin-right: 0;\n  margin-left: 21px;\n\n  svg {\n    color: ", ";\n  }\n"], ["\n  margin-right: 0;\n  margin-left: 21px;\n\n  svg {\n    color: ", ";\n  }\n"])), exports.defineRightIconColor);
    exports.IconRightStyled.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.InputLeadContentStyled = styled_components_1.default.div.attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeInput
        })
    }); })(templateObject_10 || (templateObject_10 = (0, tslib_1.__makeTemplateObject)(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
        var isFocused = _a.isFocused, isHasValue = _a.isHasValue, isPlaceholder = _a.isPlaceholder;
        return (isHasValue || isFocused) &&
            isPlaceholder && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = (0, tslib_1.__makeTemplateObject)(["\n      transition: all 0.1s ease-out;\n      margin-top: 7px;\n    "], ["\n      transition: all 0.1s ease-out;\n      margin-top: 7px;\n    "])));
    });
    exports.InputLeadContentStyled.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.PlaceholderStyled = styled_components_1.default.div.attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeInput
        })
    }); })(templateObject_13 || (templateObject_13 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n  line-height: 24px;\n  position: absolute;\n  box-sizing: border-box;\n  white-space: nowrap;\n  max-width: 100%;\n  transition: all 0.1s;\n  user-select: none;\n\n  color: ", ";\n\n  top: ", "px;\n\n  left: ", ";\n\n  ", "\n\n  ", "\n\n  .placeholder-text {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n  }\n\n  font-size: ", ";\n\n  font-weight: ", ";\n"], ["\n  display: flex;\n  line-height: 24px;\n  position: absolute;\n  box-sizing: border-box;\n  white-space: nowrap;\n  max-width: 100%;\n  transition: all 0.1s;\n  user-select: none;\n\n  color: ", ";\n\n  top: ", "px;\n\n  left: ", ";\n\n  ", "\n\n  ", "\n\n  .placeholder-text {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n  }\n\n  font-size: ", ";\n\n  font-weight: ", ";\n"])), exports.definePlaceholderColor, function (_a) {
        var _b;
        var size = _a.size, isFocused = _a.isFocused, isHasValue = _a.isHasValue;
        return isFocused || isHasValue ? -2 : (_b = exports.PLACEHOLDER_PADDING_TOP[size !== null && size !== void 0 ? size : ""]) !== null && _b !== void 0 ? _b : -2;
    }, function (_a) {
        var isFocused = _a.isFocused, isHasValue = _a.isHasValue, iconLeft = _a.iconLeft;
        if (!isFocused && !isHasValue && !iconLeft) {
            return "20px";
        }
        else if (!isFocused && !isHasValue) {
            return "48px";
        }
        return "20px";
    }, function (_a) {
        var isFocused = _a.isFocused, isHasValue = _a.isHasValue;
        return !isFocused &&
            !isHasValue && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = (0, tslib_1.__makeTemplateObject)(["\n      max-width: calc(100% - 104px);\n    "], ["\n      max-width: calc(100% - 104px);\n    "])));
    }, function (_a) {
        var isFocused = _a.isFocused, isHasValue = _a.isHasValue, isReadOnly = _a.isReadOnly;
        return (isFocused || isHasValue) && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = (0, tslib_1.__makeTemplateObject)(["\n      max-width: ", ";\n      ", " {\n        margin-left: 4px;\n      }\n    "], ["\n      max-width: ", ";\n      ", " {\n        margin-left: 4px;\n      }\n    "])), isReadOnly ? "calc(100% - 80px)" : "calc(100% - 114px)", exports.RequiredStyle);
    }, function (_a) {
        var theme = _a.theme, isFocused = _a.isFocused, isHasValue = _a.isHasValue;
        return isFocused || isHasValue
            ? theme.typography.fontSizeXs
            : theme.typography.fontSizeM;
    }, function (_a) {
        var isFocused = _a.isFocused, isHasValue = _a.isHasValue, theme = _a.theme;
        return isFocused || isHasValue
            ? theme.typography.fontWeightMedium
            : theme.typography.fontWeightRegular;
    });
    exports.PlaceholderStyled.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.InputWrapperStyled = styled_components_1.default.div.attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeInput
        })
    }); })(templateObject_19 || (templateObject_19 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n  position: relative;\n  font-family: ", ";\n  align-items: center;\n  height: ", "px;\n  border-radius: ", "px;\n  border-bottom: ", ";\n  background-color: ", ";\n\n  ", ";\n\n  & > ", " > input,\n  & > ", " > * > input {\n    ", ";\n    background-color: transparent;\n    border: none;\n    width: 100%;\n    outline: none;\n    resize: none;\n    z-index: 1;\n\n    &::-ms-clear {\n      display: none;\n    }\n    &::-ms-reveal {\n      display: none;\n    }\n\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      transition: all 5000s ease-in-out 0s;\n    }\n\n    box-sizing: content-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  position: relative;\n  font-family: ", ";\n  align-items: center;\n  height: ", "px;\n  border-radius: ", "px;\n  border-bottom: ", ";\n  background-color: ", ";\n\n  ", ";\n\n  & > ", " > input,\n  & > ", " > * > input {\n    ", ";\n    background-color: transparent;\n    border: none;\n    width: 100%;\n    outline: none;\n    resize: none;\n    z-index: 1;\n\n    &::-ms-clear {\n      display: none;\n    }\n    &::-ms-reveal {\n      display: none;\n    }\n\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      transition: all 5000s ease-in-out 0s;\n    }\n\n    box-sizing: content-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
        var theme = _a.theme;
        return theme.typography.fontFamily;
    }, function (_a) {
        var _b;
        var _c = _a.size, size = _c === void 0 ? "l" : _c;
        return (_b = INPUT_COMPONENT_HEIGHTS[size]) !== null && _b !== void 0 ? _b : 56;
    }, exports.defineBorderRadius, exports.defineBorderBottom, exports.defineBackgroundColor, function (_a) {
        var width = _a.width;
        return (0, defineResponsibleSize_1.defineResponsibleWidth)(width);
    }, exports.InputLeadContentStyled, exports.InputLeadContentStyled, function (_a) {
        var theme = _a.theme, isDisabled = _a.isDisabled, alignText = _a.alignText;
        return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = (0, tslib_1.__makeTemplateObject)(["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      text-align: ", ";\n      color: ", ";\n      cursor: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      text-align: ", ";\n      color: ", ";\n      cursor: ", ";\n    "])), theme.typography.fontFamily, theme.typography.lineHeight2xs, theme.typography.fontSizeM, alignText, exports.defineInputColor, isDisabled ? "not-allowed" : "auto");
    }, function (_a) {
        var size = _a.size;
        switch (size) {
            case "l":
                return (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = (0, tslib_1.__makeTemplateObject)(["\n          padding: 16px 20px 16px 18px;\n        "], ["\n          padding: 16px 20px 16px 18px;\n        "])));
            case "m":
                return (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = (0, tslib_1.__makeTemplateObject)(["\n          padding: 14px 20px 14px 20px;\n        "], ["\n          padding: 14px 20px 14px 20px;\n        "])));
        }
        return "";
    }, function (_a) {
        var theme = _a.theme, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isHasValue = _a.isHasValue, isFocused = _a.isFocused;
        return !isDisabled &&
            !isReadOnly && (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = (0, tslib_1.__makeTemplateObject)(["\n      &:hover {\n        & > ", " > input,\n        & > ", " > * > input {\n          color: ", ";\n        }\n\n        ", " {\n          svg {\n            color: ", ";\n          }\n        }\n\n        ", "\n      }\n    "], ["\n      &:hover {\n        & > ", " > input,\n        & > ", " > * > input {\n          color: ", ";\n        }\n\n        ", " {\n          svg {\n            color: ", ";\n          }\n        }\n\n        ", "\n      }\n    "])), exports.InputLeadContentStyled, exports.InputLeadContentStyled, theme.components[COMPONENT_NAME].colorHover, exports.IconStyled, theme.components[COMPONENT_NAME].iconColorHover, function () {
            return !isHasValue &&
                !isFocused && (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = (0, tslib_1.__makeTemplateObject)(["\n            ", " {\n              color: ", ";\n            }\n          "], ["\n            ", " {\n              color: ", ";\n            }\n          "])), exports.PlaceholderStyled, theme.components[COMPONENT_NAME].colorHover);
        });
    });
    exports.InputWrapperStyled.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
});
