define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var globalClassNames = {
        root: 'ms-TextField',
        description: 'ms-TextField-description',
        errorMessage: 'ms-TextField-errorMessage',
        field: 'ms-TextField-field',
        fieldGroup: 'ms-TextField-fieldGroup',
        prefix: 'ms-TextField-prefix',
        suffix: 'ms-TextField-suffix',
        wrapper: 'ms-TextField-wrapper',
        multiline: 'ms-TextField--multiline',
        borderless: 'ms-TextField--borderless',
        underlined: 'ms-TextField--underlined',
        unresizable: 'ms-TextField--unresizable',
        required: 'is-required',
        disabled: 'is-disabled',
        active: 'is-active'
    };
    function getLabelStyles(props) {
        var underlined = props.underlined, disabled = props.disabled, focused = props.focused, theme = props.theme;
        var palette = theme.palette, fonts = theme.fonts;
        return function () {
            var _a;
            return ({
                root: [
                    underlined &&
                        disabled && {
                        color: palette.neutralTertiary
                    },
                    underlined && {
                        fontSize: fonts.medium.fontSize,
                        marginRight: 8,
                        paddingLeft: 12,
                        paddingRight: 0,
                        lineHeight: '22px',
                        height: 32
                    },
                    underlined &&
                        focused && {
                        selectors: (_a = {},
                            _a[Styling_1.HighContrastSelector] = {
                                height: 31 // -1px to prevent jumpiness in HC with the increased border-width to 2px
                            },
                            _a)
                    }
                ]
            });
        };
    }
    function getStyles(props) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
        var theme = props.theme, className = props.className, disabled = props.disabled, focused = props.focused, required = props.required, multiline = props.multiline, hasLabel = props.hasLabel, borderless = props.borderless, underlined = props.underlined, hasIcon = props.hasIcon, resizable = props.resizable, hasErrorMessage = props.hasErrorMessage, inputClassName = props.inputClassName, autoAdjustHeight = props.autoAdjustHeight;
        var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
        var classNames = Styling_1.getGlobalClassNames(globalClassNames, theme);
        var fieldPrefixSuffix = {
            background: semanticColors.disabledBackground,
            color: !disabled ? semanticColors.inputPlaceholderText : semanticColors.disabledText,
            display: 'flex',
            alignItems: 'center',
            padding: '0 10px',
            lineHeight: 1,
            whiteSpace: 'nowrap',
            flexShrink: 0
        };
        // placeholder style constants
        var placeholderStyles = [
            fonts.medium,
            {
                color: semanticColors.inputPlaceholderText,
                opacity: 1
            }
        ];
        var disabledPlaceholderStyles = {
            color: semanticColors.disabledText
        };
        return {
            root: [
                classNames.root,
                fonts.medium,
                required && classNames.required,
                disabled && classNames.disabled,
                focused && classNames.active,
                multiline && classNames.multiline,
                borderless && classNames.borderless,
                underlined && classNames.underlined,
                Styling_1.normalize,
                {
                    position: 'relative'
                },
                className
            ],
            wrapper: [
                classNames.wrapper,
                underlined && {
                    display: 'flex',
                    borderBottomWidth: 1,
                    borderBottomStyle: 'solid',
                    borderBottomColor: semanticColors.inputBorder,
                    width: '100%'
                },
                hasErrorMessage &&
                    underlined &&
                    !disabled && {
                    borderBottomColor: semanticColors.errorText,
                    selectors: {
                        ':hover': {
                            borderBottomColor: semanticColors.errorText,
                            selectors: (_a = {},
                                _a[Styling_1.HighContrastSelector] = {
                                    borderBottomColor: 'Highlight'
                                },
                                _a)
                        }
                    }
                },
                underlined &&
                    disabled && {
                    borderBottomColor: semanticColors.disabledBackground
                },
                underlined &&
                    !disabled &&
                    !focused &&
                    !hasErrorMessage && {
                    selectors: {
                        ':hover': {
                            borderBottomColor: semanticColors.inputBorderHovered,
                            selectors: (_b = {},
                                _b[Styling_1.HighContrastSelector] = {
                                    borderBottomColor: 'Highlight'
                                },
                                _b)
                        }
                    }
                },
                underlined &&
                    focused && {
                    borderBottomColor: !hasErrorMessage ? semanticColors.inputFocusBorderAlt : semanticColors.errorText,
                    selectors: (_c = {},
                        _c[Styling_1.HighContrastSelector] = {
                            borderBottomWidth: 2,
                            borderBottomColor: 'Highlight'
                        },
                        _c)
                }
            ],
            fieldGroup: [
                classNames.fieldGroup,
                Styling_1.normalize,
                {
                    border: "1px solid " + semanticColors.inputBorder,
                    borderRadius: effects.roundedCorner2,
                    background: semanticColors.inputBackground,
                    cursor: 'text',
                    height: 32,
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'stretch',
                    position: 'relative',
                    selectors: {
                        ':hover': {
                            selectors: (_d = {},
                                _d[Styling_1.HighContrastSelector] = {
                                    borderColor: 'Highlight'
                                },
                                _d)
                        }
                    }
                },
                multiline && {
                    minHeight: '60px',
                    height: 'auto',
                    display: 'flex'
                },
                borderless && {
                    border: 'none'
                },
                !focused &&
                    !disabled && {
                    selectors: {
                        ':hover': {
                            borderColor: semanticColors.inputBorderHovered
                        }
                    }
                },
                focused && {
                    borderColor: semanticColors.inputFocusBorderAlt,
                    selectors: (_e = {},
                        _e[Styling_1.HighContrastSelector] = {
                            borderWidth: 2,
                            borderColor: 'Highlight'
                        },
                        _e)
                },
                disabled && {
                    backgroundColor: semanticColors.disabledBackground,
                    borderColor: semanticColors.disabledBackground,
                    cursor: 'default'
                },
                underlined && {
                    flex: '1 1 0px',
                    border: 'none',
                    textAlign: 'left'
                },
                underlined &&
                    focused && {
                    selectors: (_f = {},
                        _f[Styling_1.HighContrastSelector] = {
                            height: 31 // -1px to prevent jumpiness in HC with the increased border-width to 2px
                        },
                        _f)
                },
                underlined &&
                    disabled && {
                    backgroundColor: 'transparent'
                },
                hasErrorMessage && {
                    borderColor: semanticColors.errorText,
                    selectors: {
                        '&:focus, &:hover': {
                            borderColor: semanticColors.errorText
                        }
                    }
                },
                hasErrorMessage &&
                    focused && {
                    borderColor: semanticColors.errorText
                },
                !hasLabel &&
                    required && {
                    selectors: (_g = {
                            ':after': {
                                content: "'*'",
                                color: semanticColors.errorText,
                                position: 'absolute',
                                top: -5,
                                right: -10
                            }
                        },
                        _g[Styling_1.HighContrastSelector] = {
                            selectors: {
                                ':after': {
                                    right: -14 // moving the * 4 pixel to right to alleviate border clipping in HC mode.
                                }
                            }
                        },
                        _g)
                }
            ],
            field: [
                fonts.medium,
                classNames.field,
                Styling_1.normalize,
                {
                    borderRadius: 0,
                    border: 'none',
                    background: 'none',
                    backgroundColor: 'transparent',
                    color: semanticColors.inputText,
                    padding: '0 8px',
                    width: '100%',
                    minWidth: 0,
                    textOverflow: 'ellipsis',
                    outline: 0,
                    selectors: {
                        '&:active, &:focus, &:hover': { outline: 0 },
                        '::-ms-clear': {
                            display: 'none'
                        }
                    }
                },
                Styling_1.getPlaceholderStyles(placeholderStyles),
                multiline &&
                    !resizable && [
                    classNames.unresizable,
                    {
                        resize: 'none'
                    }
                ],
                multiline && {
                    minHeight: 'inherit',
                    lineHeight: 17,
                    flexGrow: 1,
                    paddingTop: 6,
                    paddingBottom: 6,
                    overflow: 'auto',
                    width: '100%'
                },
                multiline &&
                    autoAdjustHeight && {
                    overflow: 'hidden'
                },
                hasIcon && {
                    paddingRight: 24
                },
                multiline &&
                    hasIcon && {
                    paddingRight: 40
                },
                disabled && [
                    {
                        backgroundColor: semanticColors.disabledBackground,
                        borderColor: 'transparent',
                        color: semanticColors.disabledText
                    },
                    Styling_1.getPlaceholderStyles(disabledPlaceholderStyles)
                ],
                underlined && {
                    textAlign: 'left'
                },
                focused &&
                    !borderless && {
                    selectors: (_h = {},
                        _h[Styling_1.HighContrastSelector] = {
                            paddingLeft: 11,
                            paddingRight: 11
                        },
                        _h)
                },
                focused &&
                    multiline &&
                    !borderless && {
                    selectors: (_j = {},
                        _j[Styling_1.HighContrastSelector] = {
                            paddingTop: 4 // take into consideration the 2px increased border-width (not when borderless).
                        },
                        _j)
                },
                inputClassName
            ],
            icon: [
                multiline && {
                    paddingRight: 24,
                    paddingBottom: 8,
                    alignItems: 'flex-end'
                },
                {
                    pointerEvents: 'none',
                    position: 'absolute',
                    bottom: 5,
                    right: 8,
                    top: 'auto',
                    fontSize: Styling_1.IconFontSizes.medium,
                    lineHeight: 18
                },
                disabled && {
                    color: semanticColors.disabledText
                }
            ],
            description: [
                classNames.description,
                {
                    color: semanticColors.bodySubtext,
                    fontSize: fonts.xSmall.fontSize
                }
            ],
            errorMessage: [
                classNames.errorMessage,
                Styling_1.AnimationClassNames.slideDownIn20,
                fonts.small,
                {
                    color: semanticColors.errorText,
                    margin: 0,
                    paddingTop: 5,
                    display: 'flex',
                    alignItems: 'center'
                }
            ],
            prefix: [classNames.prefix, fieldPrefixSuffix],
            suffix: [classNames.suffix, fieldPrefixSuffix],
            subComponentStyles: {
                label: getLabelStyles(props)
            }
        };
    }
    exports.getStyles = getStyles;
});
//# sourceMappingURL=TextField.styles.js.map