text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var tslib_1 = require("tslib");
  var Styling_1 = require("../../Styling");
  var GlobalClassNames = {
      root: 'ms-DetailsRow',
      compact: 'ms-DetailsList--Compact',
      cell: 'ms-DetailsRow-cell',
      cellCheck: 'ms-DetailsRow-cellCheck',
      cellMeasurer: 'ms-DetailsRow-cellMeasurer',
      listCellFirstChild: 'ms-List-cell:first-child',
      isFocusable: "[data-is-focusable='true']",
      isContentUnselectable: 'is-contentUnselectable',
      isSelected: 'is-selected',
      isCheckVisible: 'is-check-visible',
      fields: 'ms-DetailsRow-fields'
  };
  exports.DEFAULT_CELL_STYLE_PROPS = {
      cellLeftPadding: 12,
      cellRightPadding: 8,
      cellExtraRightPadding: 24
  };
  // Source of default row heights to share.
  exports.DEFAULT_ROW_HEIGHTS = {
      rowHeight: 42,
      compactRowHeight: 32
  };
  // Constant values
  var values = tslib_1.__assign({}, exports.DEFAULT_ROW_HEIGHTS, { rowVerticalPadding: 11, compactRowVerticalPadding: 6, rowShimmerLineHeight: 7, rowShimmerIconPlaceholderHeight: 16, rowShimmerVerticalBorder: 0, compactRowShimmerVerticalBorder: 0 });
  // Computed Values
  values = tslib_1.__assign({}, values, {
      rowShimmerVerticalBorder: (values.rowHeight - values.rowShimmerLineHeight) / 2,
      compactRowShimmerVerticalBorder: (values.compactRowHeight - values.rowShimmerLineHeight) / 2
  });
  exports.getStyles = function (props) {
      var theme = props.theme, isSelected = props.isSelected, canSelect = props.canSelect, droppingClassName = props.droppingClassName, anySelected = props.anySelected, isCheckVisible = props.isCheckVisible, checkboxCellClassName = props.checkboxCellClassName, compact = props.compact, className = props.className, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? exports.DEFAULT_CELL_STYLE_PROPS : _a;
      var _b = theme.palette, neutralPrimary = _b.neutralPrimary, white = _b.white, neutralSecondary = _b.neutralSecondary, neutralLighter = _b.neutralLighter, neutralLight = _b.neutralLight, neutralDark = _b.neutralDark, neutralQuaternaryAlt = _b.neutralQuaternaryAlt, black = _b.black;
      var focusBorder = theme.semanticColors.focusBorder;
      var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
      var colors = {
          // Default
          defaultHeaderTextColor: neutralPrimary,
          defaultMetaTextColor: neutralSecondary,
          defaultBackgroundColor: white,
          // Hover
          hoverTextColor: neutralPrimary,
          hoverColorBackground: neutralLighter,
          // Selected
          selectedTextColor: neutralDark,
          selectedMetaTextColor: neutralPrimary,
          selectedBackgroundColor: neutralLight,
          // Selected Hover
          selectedHoverTextColor: black,
          selectedHoverMetaTextColor: neutralDark,
          selectedHoverBackgroundColor: neutralQuaternaryAlt,
          // Focus
          focusHeaderTextColor: black,
          focusBackgroundColor: neutralQuaternaryAlt,
          focusMetaTextColor: neutralDark
      };
      var shimmerRightBorderStyle = cellStyleProps.cellRightPadding * 4 + "px solid " + colors.defaultBackgroundColor;
      var shimmerLeftBorderStyle = cellStyleProps.cellLeftPadding + "px solid " + colors.defaultBackgroundColor;
      var selectedStyles = [
          Styling_1.getFocusStyle(theme, -1, undefined, undefined, focusBorder, white),
          classNames.isSelected,
          {
              color: colors.selectedMetaTextColor,
              background: colors.selectedBackgroundColor,
              borderBottom: "1px solid " + white,
              selectors: {
                  '&:before': {
                      position: 'absolute',
                      display: 'block',
                      top: -1,
                      height: 1,
                      bottom: 0,
                      left: 0,
                      right: 0,
                      content: '',
                      borderTop: "1px solid " + white
                  },
                  // Selected State hover
                  '&:hover': {
                      background: colors.selectedHoverBackgroundColor,
                      selectors: {
                          // Selected State hover meta cell
                          $cell: {
                              color: colors.selectedHoverMetaTextColor,
                              selectors: (_c = {},
                                  _c[Styling_1.HighContrastSelector] = {
                                      color: 'HighlightText',
                                      selectors: {
                                          '> a': {
                                              color: 'HighlightText'
                                          }
                                      }
                                  },
                                  // Selected State hover Header cell
                                  _c['&.$isRowHeader'] = {
                                      color: colors.selectedHoverTextColor,
                                      selectors: (_d = {},
                                          _d[Styling_1.HighContrastSelector] = {
                                              color: 'HighlightText'
                                          },
                                          _d)
                                  },
                                  _c)
                          }
                      }
                  },
                  // Focus state
                  '&:focus': {
                      background: colors.focusBackgroundColor,
                      selectors: {
                          // Selected State hover meta cell
                          $cell: (_e = {
                                  color: colors.focusMetaTextColor
                              },
                              _e[Styling_1.HighContrastSelector] = {
                                  color: 'HighlightText',
                                  selectors: {
                                      '> a': {
                                          color: 'HighlightText'
                                      }
                                  }
                              },
                              // Row header cell
                              _e['&.$isRowHeader'] = {
                                  color: colors.focusHeaderTextColor,
                                  selectors: (_f = {},
                                      _f[Styling_1.HighContrastSelector] = {
                                          color: 'HighlightText'
                                      },
                                      _f)
                              },
                              _e)
                      }
                  }
              }
          }
      ];
      var cannotSelectStyles = [
          classNames.isContentUnselectable,
          {
              userSelect: 'none',
              cursor: 'default'
          }
      ];
      var rootCompactStyles = {
          minHeight: values.compactRowHeight,
          border: 0
      };
      var cellCompactStyles = {
          minHeight: values.compactRowHeight,
          paddingTop: values.compactRowVerticalPadding,
          paddingBottom: values.compactRowVerticalPadding,
          paddingLeft: cellStyleProps.cellLeftPadding + "px",
          selectors: (_g = {},
              // Masking the running shimmer background with borders
              _g["&$shimmer"] = {
                  padding: 0,
                  borderLeft: shimmerLeftBorderStyle,
                  borderRight: shimmerRightBorderStyle,
                  borderTop: values.compactRowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor,
                  borderBottom: values.compactRowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor
              },
              // Masking the running shimmer background with borders when it's an Icon placeholder
              _g["&$shimmerIconPlaceholder"] = {
                  borderRight: cellStyleProps.cellRightPadding + "px solid " + colors.defaultBackgroundColor,
                  borderBottom: (values.compactRowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor,
                  borderTop: (values.compactRowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor
              },
              _g)
      };
      var defaultCellStyles = [
          Styling_1.getFocusStyle(theme, -1),
          classNames.cell,
          {
              display: 'inline-block',
              position: 'relative',
              boxSizing: 'border-box',
              minHeight: values.rowHeight,
              verticalAlign: 'top',
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              paddingTop: values.rowVerticalPadding,
              paddingBottom: values.rowVerticalPadding,
              paddingLeft: cellStyleProps.cellLeftPadding + "px",
              selectors: (_h = {
                      '& > button': {
                          maxWidth: '100%'
                      }
                  },
                  _h[classNames.isFocusable] = Styling_1.getFocusStyle(theme, -1, undefined, undefined, neutralSecondary, white),
                  _h['&$shimmer'] = {
                      padding: 0,
                      borderLeft: shimmerLeftBorderStyle,
                      borderRight: shimmerRightBorderStyle,
                      borderTop: values.rowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor,
                      borderBottom: values.rowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor
                  },
                  _h['&$shimmerIconPlaceholder'] = {
                      borderRight: cellStyleProps.cellRightPadding + "px solid " + colors.defaultBackgroundColor,
                      borderBottom: (values.rowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor,
                      borderTop: (values.rowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor
                  },
                  _h)
          },
          isSelected && {
              selectors: (_j = {
                      '&.$isRowHeader': {
                          color: colors.selectedTextColor,
                          selectors: (_k = {},
                              _k[Styling_1.HighContrastSelector] = {
                                  color: 'HighlightText'
                              },
                              _k)
                      }
                  },
                  _j[Styling_1.HighContrastSelector] = {
                      background: 'Highlight',
                      color: 'HighlightText',
                      MsHighContrastAdjust: 'none',
                      selectors: {
                          a: {
                              color: 'HighlightText'
                          }
                      }
                  },
                  _j)
          },
          compact && cellCompactStyles
      ];
      return {
          root: [
              classNames.root,
              Styling_1.AnimationClassNames.fadeIn400,
              droppingClassName,
              theme.fonts.small,
              isCheckVisible && classNames.isCheckVisible,
              Styling_1.getFocusStyle(theme, 0, undefined, undefined, focusBorder, white),
              {
                  borderBottom: "1px solid " + neutralLighter,
                  background: colors.defaultBackgroundColor,
                  color: colors.defaultMetaTextColor,
                  display: 'inline-flex',
                  minWidth: '100%',
                  minHeight: values.rowHeight,
                  whiteSpace: 'nowrap',
                  padding: 0,
                  boxSizing: 'border-box',
                  verticalAlign: 'top',
                  textAlign: 'left',
                  selectors: (_l = {},
                      _l[classNames.listCellFirstChild + " &:before"] = {
                          display: 'none'
                      },
                      _l['&:hover'] = {
                          background: colors.hoverColorBackground
                      },
                      _l['&:hover $check'] = {
                          opacity: 1
                      },
                      _l)
              },
              isSelected && selectedStyles,
              !canSelect && cannotSelectStyles,
              compact && rootCompactStyles,
              className
          ],
          cellUnpadded: [
              {
                  paddingRight: cellStyleProps.cellRightPadding + "px"
              }
          ],
          cellPadded: [
              {
                  paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding + "px",
                  selectors: {
                      '&.$checkCell': {
                          paddingRight: 0
                      }
                  }
              }
          ],
          cell: defaultCellStyles,
          cellMeasurer: [
              classNames.cellMeasurer,
              {
                  overflow: 'visible',
                  whiteSpace: 'nowrap'
              }
          ],
          checkCell: [
              defaultCellStyles,
              classNames.cellCheck,
              checkboxCellClassName,
              {
                  padding: 0,
                  // Ensure that the check cell covers the top border of the cell.
                  // This ensures the click target does not leave a spot which would
                  // cause other items to be deselected.
                  paddingTop: 1,
                  marginTop: -1,
                  flexShrink: 0
              }
          ],
          checkCover: [
              {
                  position: 'absolute',
                  top: -1,
                  left: 0,
                  bottom: 0,
                  right: 0,
                  display: 'none'
              },
              anySelected && {
                  display: 'block'
              }
          ],
          fields: [
              classNames.fields,
              {
                  display: 'flex',
                  alignItems: 'stretch'
              }
          ],
          isRowHeader: [
              {
                  color: colors.defaultHeaderTextColor,
                  fontSize: Styling_1.FontSizes.medium
              }
          ],
          isMultiline: [
              defaultCellStyles,
              {
                  whiteSpace: 'normal',
                  wordBreak: 'break-word',
                  textOverflow: 'clip'
              }
          ],
          shimmer: [],
          shimmerIconPlaceholder: [],
          shimmerLeftBorder: [
              {
                  // 40px to take into account the checkbox of items if present.
                  borderLeft: "40px solid " + colors.defaultBackgroundColor
              }
          ],
          shimmerBottomBorder: [
              {
                  // 1px to take into account the border-bottom when items replace shimmer lines and in default state.
                  borderBottom: "1px solid " + colors.defaultBackgroundColor
              }
          ],
          check: []
      };
      var _c, _d, _e, _f, _g, _h, _j, _k, _l;
  };
  //# sourceMappingURL=DetailsRow.styles.js.map