define(["require", "exports", "../../Styling", "../../Utilities"], function (require, exports, Styling_1, Utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ComboBoxHeight = 32;
    var ComboBoxLineHeight = 30;
    var ComboBoxCaretDownWidth = 32;
    var ComboBoxOptionHeight = 36;
    var getDisabledStyles = Utilities_1.memoizeFunction(function (theme) {
        var _a;
        var semanticColors = theme.semanticColors;
        return {
            backgroundColor: semanticColors.disabledBackground,
            borderColor: semanticColors.disabledBackground,
            color: semanticColors.disabledText,
            cursor: 'default',
            selectors: (_a = {},
                _a[Styling_1.HighContrastSelector] = {
                    borderColor: 'GrayText',
                    color: 'GrayText'
                },
                _a)
        };
    });
    var getListOptionHighContrastStyles = Utilities_1.memoizeFunction(function (theme) {
        var _a;
        return {
            selectors: (_a = {},
                _a[Styling_1.HighContrastSelector] = {
                    backgroundColor: 'Highlight',
                    borderColor: 'Highlight',
                    color: 'HighlightText',
                    MsHighContrastAdjust: 'none'
                },
                _a)
        };
    });
    exports.getOptionStyles = Utilities_1.memoizeFunction(function (theme, customStylesForAllOptions, customOptionStylesForCurrentOption, isPending, isHidden) {
        var _a;
        var palette = theme.palette, semanticColors = theme.semanticColors;
        var option = {
            textHoveredColor: semanticColors.menuItemTextHovered,
            textSelectedColor: palette.neutralDark,
            textDisabledColor: semanticColors.disabledText,
            backgroundHoveredColor: semanticColors.menuItemBackgroundHovered,
            backgroundPressedColor: semanticColors.menuItemBackgroundPressed
        };
        var optionStyles = {
            root: [
                theme.fonts.medium,
                {
                    backgroundColor: isPending ? option.backgroundHoveredColor : 'transparent',
                    boxSizing: 'border-box',
                    cursor: 'pointer',
                    display: isHidden ? 'none' : 'block',
                    width: '100%',
                    height: 'auto',
                    minHeight: ComboBoxOptionHeight,
                    lineHeight: '20px',
                    padding: '0 8px',
                    position: 'relative',
                    borderWidth: '1px',
                    borderStyle: 'solid',
                    borderColor: 'transparent',
                    borderRadius: 0,
                    wordWrap: 'break-word',
                    overflowWrap: 'break-word',
                    textAlign: 'left',
                    selectors: (_a = {},
                        _a[Styling_1.HighContrastSelector] = {
                            borderColor: 'Background'
                        },
                        _a['&.ms-Checkbox'] = {
                            display: 'flex',
                            alignItems: 'center'
                        },
                        _a['&.ms-Button--command:hover:active'] = {
                            backgroundColor: option.backgroundPressedColor
                        },
                        _a)
                }
            ],
            rootHovered: {
                backgroundColor: option.backgroundHoveredColor,
                color: option.textHoveredColor
            },
            rootFocused: {
                backgroundColor: option.backgroundHoveredColor
            },
            rootChecked: [
                {
                    backgroundColor: 'transparent',
                    color: option.textSelectedColor,
                    selectors: {
                        ':hover': {
                            backgroundColor: option.backgroundHoveredColor
                        }
                    }
                },
                Styling_1.getFocusStyle(theme, { inset: -1, isFocusedOnly: false }),
                getListOptionHighContrastStyles(theme)
            ],
            rootDisabled: {
                color: option.textDisabledColor,
                cursor: 'default'
            },
            optionText: {
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                minWidth: '0px',
                maxWidth: '100%',
                wordWrap: 'break-word',
                overflowWrap: 'break-word',
                display: 'inline-block'
            },
            optionTextWrapper: {
                maxWidth: '100%',
                display: 'flex',
                alignItems: 'center'
            }
        };
        return Styling_1.concatStyleSets(optionStyles, customStylesForAllOptions, customOptionStylesForCurrentOption);
    });
    exports.getCaretDownButtonStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
        var _a;
        var semanticColors = theme.semanticColors, fonts = theme.fonts;
        var caret = {
            buttonTextColor: semanticColors.bodySubtext,
            buttonTextHoveredCheckedColor: semanticColors.buttonTextChecked,
            buttonBackgroundHoveredColor: semanticColors.listItemBackgroundHovered,
            buttonBackgroundCheckedColor: semanticColors.listItemBackgroundChecked,
            buttonBackgroundCheckedHoveredColor: semanticColors.listItemBackgroundCheckedHovered
        };
        var styles = {
            root: {
                color: caret.buttonTextColor,
                fontSize: fonts.small.fontSize,
                position: 'absolute',
                // The negative positioning accounts for the 1px root border now that box-sizing is border-box
                top: '-1px',
                right: '-1px',
                height: ComboBoxHeight,
                lineHeight: ComboBoxLineHeight,
                width: ComboBoxCaretDownWidth,
                textAlign: 'center',
                cursor: 'default',
                selectors: (_a = {},
                    _a[Styling_1.HighContrastSelector] = {
                        backgroundColor: 'ButtonFace',
                        borderColor: 'ButtonText',
                        color: 'ButtonText',
                        MsHighContrastAdjust: 'none'
                    },
                    _a)
            },
            icon: {
                fontSize: fonts.small.fontSize
            },
            rootHovered: {
                backgroundColor: caret.buttonBackgroundHoveredColor,
                color: caret.buttonTextHoveredCheckedColor,
                cursor: 'pointer'
            },
            rootPressed: {
                backgroundColor: caret.buttonBackgroundCheckedColor,
                color: caret.buttonTextHoveredCheckedColor
            },
            rootChecked: {
                backgroundColor: caret.buttonBackgroundCheckedColor,
                color: caret.buttonTextHoveredCheckedColor
            },
            rootCheckedHovered: {
                backgroundColor: caret.buttonBackgroundCheckedHoveredColor,
                color: caret.buttonTextHoveredCheckedColor
            },
            rootDisabled: getDisabledStyles(theme)
        };
        return Styling_1.concatStyleSets(styles, customStyles);
    });
    exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles, comboBoxOptionWidth) {
        var _a, _b, _c, _d;
        var semanticColors = theme.semanticColors, fonts = theme.fonts, effects = theme.effects;
        var root = {
            textColor: semanticColors.bodyText,
            borderColor: semanticColors.inputBorder,
            borderHoveredColor: semanticColors.inputBorderHovered,
            borderPressedColor: semanticColors.inputFocusBorderAlt,
            borderFocusedColor: semanticColors.inputFocusBorderAlt,
            backgroundColor: semanticColors.bodyBackground,
            erroredColor: semanticColors.errorText
        };
        var option = {
            headerTextColor: semanticColors.menuHeader,
            dividerBorderColor: semanticColors.bodyDivider
        };
        // placeholder style variables
        var placeholderStyles = {
            color: semanticColors.inputPlaceholderText
        };
        var placeholderStylesHovered = {
            color: semanticColors.inputTextHovered
        };
        var disabledPlaceholderStyles = {
            color: semanticColors.disabledText
        };
        var ComboBoxRootHighContrastFocused = {
            color: 'HighlightText',
            borderColor: 'Highlight',
            backgroundColor: 'Window',
            borderWidth: '2px',
            MsHighContrastAdjust: 'none',
            paddingLeft: '11px',
            paddingTop: '0',
            paddingBottom: '0',
            selectors: {
                '.ms-ComboBox-CaretDown-button': {
                    // Negative positioning to account for the 2px border
                    right: '-2px',
                    top: '-2px'
                }
            }
        };
        var styles = {
            container: {},
            label: {},
            labelDisabled: {},
            root: [
                theme.fonts.medium,
                {
                    boxShadow: 'none',
                    marginLeft: '0',
                    paddingTop: 1,
                    paddingBottom: 1,
                    paddingRight: ComboBoxCaretDownWidth,
                    paddingLeft: 8,
                    color: root.textColor,
                    position: 'relative',
                    outline: '0',
                    userSelect: 'none',
                    backgroundColor: root.backgroundColor,
                    borderWidth: '1px',
                    borderStyle: 'solid',
                    borderColor: root.borderColor,
                    borderRadius: effects.roundedCorner2,
                    cursor: 'text',
                    display: 'block',
                    height: ComboBoxHeight,
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    boxSizing: 'border-box',
                    selectors: {
                        '.ms-Label': {
                            display: 'inline-block',
                            marginBottom: '8px'
                        },
                        '&.is-open': {
                            borderColor: root.borderColor,
                            selectors: (_a = {},
                                _a[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
                                _a)
                        }
                    }
                }
            ],
            rootHovered: {
                borderColor: root.borderHoveredColor,
                selectors: (_b = {
                        '.ms-ComboBox-Input': [{ color: semanticColors.inputTextHovered }, Styling_1.getPlaceholderStyles(placeholderStylesHovered)]
                    },
                    _b[Styling_1.HighContrastSelector] = {
                        color: 'HighlightText',
                        borderColor: 'Highlight',
                        backgroundColor: 'Window',
                        MsHighContrastAdjust: 'none'
                    },
                    _b)
            },
            rootPressed: {
                borderColor: root.borderPressedColor,
                selectors: (_c = {},
                    _c[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
                    _c)
            },
            rootFocused: {
                borderColor: root.borderFocusedColor,
                selectors: (_d = {
                        '.ms-ComboBox-Input': {
                            color: semanticColors.inputTextHovered
                        }
                    },
                    _d[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
                    _d)
            },
            rootDisabled: getDisabledStyles(theme),
            rootError: {
                borderColor: root.erroredColor,
                marginBottom: '5px'
            },
            rootDisallowFreeForm: {},
            input: [
                Styling_1.getPlaceholderStyles(placeholderStyles),
                {
                    backgroundColor: root.backgroundColor,
                    color: root.textColor,
                    boxSizing: 'border-box',
                    width: '100%',
                    height: '28px',
                    borderStyle: 'none',
                    outline: 'none',
                    font: 'inherit',
                    textOverflow: 'ellipsis',
                    padding: '0',
                    selectors: {
                        '::-ms-clear': {
                            display: 'none'
                        }
                    }
                }
            ],
            inputDisabled: [getDisabledStyles(theme), Styling_1.getPlaceholderStyles(disabledPlaceholderStyles)],
            errorMessage: [
                theme.fonts.small,
                {
                    color: root.erroredColor
                }
            ],
            callout: {
                boxShadow: effects.elevation8
            },
            optionsContainerWrapper: {
                width: comboBoxOptionWidth
            },
            optionsContainer: {
                display: 'block'
            },
            header: [
                fonts.medium,
                {
                    fontWeight: Styling_1.FontWeights.semibold,
                    color: option.headerTextColor,
                    backgroundColor: 'none',
                    borderStyle: 'none',
                    height: ComboBoxOptionHeight,
                    lineHeight: ComboBoxOptionHeight,
                    cursor: 'default',
                    padding: '0 8px',
                    userSelect: 'none',
                    textAlign: 'left'
                }
            ],
            divider: {
                height: 1,
                backgroundColor: option.dividerBorderColor
            }
        };
        return Styling_1.concatStyleSets(styles, customStyles);
    });
});
//# sourceMappingURL=ComboBox.styles.js.map