define(["require", "exports", "../../Styling", "../../Utilities", "./DetailsRow.styles", "../GroupedList/GroupSpacer"], function (require, exports, Styling_1, Utilities_1, DetailsRow_styles_1, GroupSpacer_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var GlobalClassNames = {
        tooltipHost: 'ms-TooltipHost',
        root: 'ms-DetailsHeader',
        cell: 'ms-DetailsHeader-cell',
        cellIsCheck: 'ms-DetailsHeader-cellIsCheck',
        collapseButton: 'ms-DetailsHeader-collapseButton',
        isCollapsed: 'is-collapsed',
        isAllSelected: 'is-allSelected',
        isSelectAllHidden: 'is-selectAllHidden',
        isResizingColumn: 'is-resizingColumn',
        cellSizer: 'ms-DetailsHeader-cellSizer',
        isResizing: 'is-resizing',
        dropHintCircleStyle: 'ms-DetailsHeader-dropHintCircleStyle',
        dropHintCaretStyle: 'ms-DetailsHeader-dropHintCaretStyle',
        dropHintLineStyle: 'ms-DetailsHeader-dropHintLineStyle',
        cellTitle: 'ms-DetailsHeader-cellTitle',
        cellName: 'ms-DetailsHeader-cellName',
        filterChevron: 'ms-DetailsHeader-filterChevron',
        gripperBarVertical: 'ms-DetailsColumn-gripperBarVertical',
        checkTooltip: 'ms-DetailsHeader-checkTooltip',
        check: 'ms-DetailsHeader-check'
    };
    exports.HEADER_HEIGHT = 42;
    exports.getCellStyles = function (props) {
        var theme = props.theme, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DetailsRow_styles_1.DEFAULT_CELL_STYLE_PROPS : _a;
        var semanticColors = theme.semanticColors;
        var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
        return [
            classNames.cell,
            Styling_1.getFocusStyle(theme),
            {
                color: semanticColors.bodyText,
                position: 'relative',
                display: 'inline-block',
                boxSizing: 'border-box',
                padding: "0 " + cellStyleProps.cellRightPadding + "px 0 " + cellStyleProps.cellLeftPadding + "px",
                lineHeight: 'inherit',
                margin: '0',
                height: exports.HEADER_HEIGHT,
                verticalAlign: 'top',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                textAlign: 'left'
            }
        ];
    };
    exports.getStyles = function (props) {
        var _a, _b, _c, _d, _e;
        var theme = props.theme, className = props.className, isSelectAllHidden = props.isSelectAllHidden, isAllSelected = props.isAllSelected, isResizingColumn = props.isResizingColumn, isSizing = props.isSizing, isAllCollapsed = props.isAllCollapsed, _f = props.cellStyleProps, cellStyleProps = _f === void 0 ? DetailsRow_styles_1.DEFAULT_CELL_STYLE_PROPS : _f;
        var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;
        var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
        var colors = {
            iconForegroundColor: semanticColors.bodySubtext,
            headerForegroundColor: semanticColors.bodyText,
            headerBackgroundColor: semanticColors.bodyBackground,
            dropdownChevronForegroundColor: palette.neutralTertiary,
            resizerColor: palette.neutralTertiaryAlt
        };
        var cellSizerFadeInStyles = {
            opacity: 1,
            transition: 'opacity 0.3s linear'
        };
        var cellStyles = exports.getCellStyles(props);
        return {
            root: [
                classNames.root,
                fonts.small,
                {
                    display: 'inline-block',
                    background: colors.headerBackgroundColor,
                    position: 'relative',
                    minWidth: '100%',
                    verticalAlign: 'top',
                    height: exports.HEADER_HEIGHT,
                    lineHeight: exports.HEADER_HEIGHT,
                    whiteSpace: 'nowrap',
                    boxSizing: 'content-box',
                    paddingBottom: '1px',
                    paddingTop: '16px',
                    borderBottom: "1px solid " + semanticColors.bodyDivider,
                    cursor: 'default',
                    userSelect: 'none',
                    selectors: (_a = {},
                        _a["&:hover ." + classNames.check] = {
                            opacity: 1
                        },
                        _a["& ." + classNames.tooltipHost + " ." + classNames.checkTooltip] = {
                            display: 'block'
                        },
                        _a)
                },
                isAllSelected && classNames.isAllSelected,
                isSelectAllHidden && {
                    selectors: (_b = {},
                        _b["& ." + classNames.cellIsCheck] = {
                            visibility: 'hidden'
                        },
                        _b)
                },
                isResizingColumn && classNames.isResizingColumn,
                className
            ],
            check: [
                classNames.check,
                {
                    height: exports.HEADER_HEIGHT
                },
                {
                    selectors: (_c = {},
                        _c["." + Utilities_1.IsFocusVisibleClassName + " &:focus"] = {
                            opacity: 1
                        },
                        _c)
                }
            ],
            cellWrapperPadded: {
                paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding
            },
            cellIsCheck: [
                cellStyles,
                classNames.cellIsCheck,
                {
                    position: 'relative',
                    padding: 0,
                    margin: 0,
                    display: 'inline-flex',
                    alignItems: 'center',
                    border: 'none'
                },
                isAllSelected && {
                    opacity: 1
                }
            ],
            cellIsGroupExpander: [
                cellStyles,
                {
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: fonts.small.fontSize,
                    padding: 0,
                    border: 'none',
                    width: GroupSpacer_1.SPACER_WIDTH,
                    color: palette.neutralSecondary,
                    selectors: {
                        ':hover': {
                            backgroundColor: palette.neutralLighter
                        },
                        ':active': {
                            backgroundColor: palette.neutralLight
                        }
                    }
                }
            ],
            cellIsActionable: {
                selectors: {
                    ':hover': {
                        color: semanticColors.bodyText,
                        background: semanticColors.listHeaderBackgroundHovered
                    },
                    ':active': {
                        background: semanticColors.listHeaderBackgroundPressed
                    }
                }
            },
            cellIsEmpty: {
                textOverflow: 'clip'
            },
            cellSizer: [
                classNames.cellSizer,
                Styling_1.focusClear(),
                {
                    display: 'inline-block',
                    position: 'relative',
                    cursor: 'ew-resize',
                    bottom: 0,
                    top: 0,
                    overflow: 'hidden',
                    height: 'inherit',
                    background: 'transparent',
                    zIndex: 1,
                    width: 16,
                    selectors: (_d = {
                            ':after': {
                                content: '""',
                                position: 'absolute',
                                top: 0,
                                bottom: 0,
                                width: 1,
                                background: colors.resizerColor,
                                opacity: 0,
                                left: '50%'
                            },
                            ':focus:after': cellSizerFadeInStyles,
                            ':hover:after': cellSizerFadeInStyles
                        },
                        _d["&." + classNames.isResizing + ":after"] = [
                            cellSizerFadeInStyles,
                            {
                                boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)'
                            }
                        ],
                        _d)
                }
            ],
            cellIsResizing: classNames.isResizing,
            cellSizerStart: {
                margin: '0 -8px'
            },
            cellSizerEnd: {
                margin: 0,
                marginLeft: -16
            },
            collapseButton: [
                classNames.collapseButton,
                {
                    transformOrigin: '50% 50%',
                    transition: 'transform .1s linear'
                },
                isAllCollapsed
                    ? [
                        classNames.isCollapsed,
                        {
                            transform: 'rotate(0deg)'
                        }
                    ]
                    : {
                        transform: 'rotate(90deg)'
                    }
            ],
            checkTooltip: classNames.checkTooltip,
            sizingOverlay: isSizing && {
                position: 'absolute',
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                cursor: 'ew-resize',
                background: 'rgba(255, 255, 255, 0)',
                selectors: (_e = {},
                    _e[Styling_1.HighContrastSelector] = {
                        background: 'transparent',
                        MsHighContrastAdjust: 'none'
                    },
                    _e)
            },
            accessibleLabel: Styling_1.hiddenContentStyle,
            dropHintCircleStyle: [
                classNames.dropHintCircleStyle,
                {
                    display: 'inline-block',
                    visibility: 'hidden',
                    position: 'absolute',
                    bottom: 0,
                    height: 9,
                    width: 9,
                    borderRadius: '50%',
                    marginLeft: -5,
                    top: 34,
                    overflow: 'visible',
                    zIndex: 10,
                    border: "1px solid " + palette.themePrimary,
                    background: palette.white
                }
            ],
            dropHintCaretStyle: [
                classNames.dropHintCaretStyle,
                {
                    display: 'none',
                    position: 'absolute',
                    top: -28,
                    left: -6.5,
                    fontSize: fonts.medium.fontSize,
                    color: palette.themePrimary,
                    overflow: 'visible',
                    zIndex: 10
                }
            ],
            dropHintLineStyle: [
                classNames.dropHintLineStyle,
                {
                    display: 'none',
                    position: 'absolute',
                    bottom: 0,
                    top: 0,
                    overflow: 'hidden',
                    height: 42,
                    width: 1,
                    background: palette.themePrimary,
                    zIndex: 10
                }
            ],
            dropHintStyle: {
                display: 'inline-block',
                position: 'absolute'
            }
        };
    };
});
//# sourceMappingURL=DetailsHeader.styles.js.map