@kubit-ui-web/react-components/dist/cjs/components/table/table.styled.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListEmptyExpandedContentItem = exports.ListItemExpandedStyled = exports.ListItemHeaderPriorityStyled = exports.ListItemStyled = exports.ListHeaderItemStylesStyled = exports.ListRowHeaderPriorityStyled = exports.ListRowStyled = exports.ListRowContainerHeaderPriorityStyled = exports.ListRowContainerStyled = exports.ListContainerHeaderPriorityStyled = exports.ListContainerStyled = exports.DividerInternalWrapper = exports.TableExpandedButton = exports.TableEmptyExpandedContentRow = exports.TableExpandedCellStyled = exports.TableColumnBodyStyled = exports.TableRowBodyStyled = exports.TableRowGroupBodyStyled = exports.TableColumnHeaderStyled = exports.TableEmptyColumnHeaderStyled = exports.TableRowHeaderStyled = exports.TableRowGroupHeaderStyled = exports.TableCaptionStyled = exports.TableStyled = void 0;
const styled_components_1 = __importStar(require("styled-components"));
const srOnly_mixin_1 = require("../../styles/mixins/srOnly.mixin");
const getStyles_1 = require("../../utils/getStyles/getStyles");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const lineSeparatorTheme_1 = require("../lineSeparator/types/lineSeparatorTheme");
/******** UTILS STYLES *******/
const applyCustomCellStyles = ({ customWidth, customAlign, flexWidth, customBackgroundColor, }) => (0, styled_components_1.css) `
  flex-basis: ${customWidth};
  max-width: ${customWidth};
  justify-content: ${customAlign};
  text-align: ${customAlign};
  flex: ${flexWidth};
  background-color: ${customBackgroundColor};
`;
const applySrOnlyStyles = () => (0, styled_components_1.css) `
  ${srOnly_mixin_1.srOnlyMixin}
`;
/******** TABLE STYLES *******/
exports.TableStyled = styled_components_1.default.table `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles)}
`;
exports.TableCaptionStyled = styled_components_1.default.caption `
  display: flex;
  font-style: italic;
  ${srOnly_mixin_1.srOnlyMixin}
`;
/******** TABLE HEADER STYLES *******/
exports.TableRowGroupHeaderStyled = styled_components_1.default.thead `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.container)}
  ${({ styles }) => (0, getStyles_1.getTypographyStyles)(styles?.typography)}
  &[hidden] {
    ${srOnly_mixin_1.srOnlyMixin}
  }
  ${({ lineSeparatorLineStyles, lineSeparatorTopOnHeader, lineSeparatorBottomOnHeader }) => {
    const lineSeparator = [];
    if (lineSeparatorTopOnHeader) {
        lineSeparator.push(lineSeparatorLineStyles?.buildLineStyles?.(lineSeparatorTheme_1.LineSeparatorPositionType.TOP));
    }
    if (lineSeparatorBottomOnHeader) {
        lineSeparator.push(lineSeparatorLineStyles?.buildLineStyles?.(lineSeparatorTheme_1.LineSeparatorPositionType.BOTTOM));
    }
    return lineSeparator;
}}
  ${() => ({ theme: { MEDIA_QUERIES: { onlyDesktop }, }, styles, $scrolling, }) => {
    return (0, styled_components_1.css) `
        ${onlyDesktop} {
          ${$scrolling
        ? (0, styled_components_1.css) `
                box-shadow: ${styles?.container?.[breakpoints_1.DeviceBreakpointsType.DESKTOP]?.box_shadow ??
            'none'};
              `
        : (0, styled_components_1.css) `
                box-shadow: none;
              `}
        }
      `;
}}
`;
exports.TableRowHeaderStyled = styled_components_1.default.tr `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.row)}
  // When has expanded content, the last column has no border
  th:nth-last-of-type(2) {
    ${({ hasSomeExpandedContent, styles }) => hasSomeExpandedContent && (0, getStyles_1.getStyles)(styles?.column?.lastColumn)}
  }
  th:last-of-type {
    ${({ hasSomeExpandedContent, styles }) => !hasSomeExpandedContent && (0, getStyles_1.getStyles)(styles?.column?.lastColumn)}
  }
  // When hasSomeDivider && hasSomeDividerContent, should apply padding to the first and last visible column
  ${({ hasSomeDivider, hasSomeDividerContent, styles, numberOfCells }) => hasSomeDivider &&
    hasSomeDividerContent &&
    (0, styled_components_1.css) `
      th:nth-of-type(2) {
        padding-left: ${styles?.rowPaddingWhenDividerShown};
      }
      th:nth-of-type(${numberOfCells}) {
        padding-right: ${styles?.rowPaddingWhenDividerShown};
      }
    `}
`;
exports.TableEmptyColumnHeaderStyled = styled_components_1.default.td `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.column)}
`;
exports.TableColumnHeaderStyled = styled_components_1.default.th `
  ${props => (0, getStyles_1.getStyles)(props.styles?.column)}
  ${({ styles }) => (0, getStyles_1.getTypographyStyles)(styles?.typography)}
  // Apply custom styles
  ${({ customWidth, customAlign, flexWidth, customBackgroundColor }) => applyCustomCellStyles({ customWidth, customAlign, flexWidth, customBackgroundColor })}
  ${props => {
    if (props.srOnly) {
        return applySrOnlyStyles();
    }
    if (props.hasDivider && !props.showDivider) {
        return applySrOnlyStyles();
    }
    return undefined;
}}
`;
/******** TABLE BODY STYLES *******/
exports.TableRowGroupBodyStyled = styled_components_1.default.tbody `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.bodyContainer)}
`;
exports.TableRowBodyStyled = styled_components_1.default.tr `
  display: flex;
  // Do not apply border when has divider, the divider already has the border
  ${({ lineSeparatorLineStyles, hasDivider, borderPosition = lineSeparatorTheme_1.LineSeparatorPositionType.BOTTOM, }) => {
    return !hasDivider && lineSeparatorLineStyles.buildLineStyles?.(borderPosition);
}}

  ${({ styles }) => (0, styled_components_1.css) `
    ${(0, getStyles_1.getStyles)(styles?.row)}
    ${(0, getStyles_1.getTypographyStyles)(styles?.typography)}
  `}
  // When hasSomeDivider && hasSomeDividerContent, should apply padding to the first and last visible column
  ${({ hasDivider, hasSomeDivider, hasSomeDividerContent, styles, numberOfCells }) => hasSomeDivider &&
    hasSomeDividerContent &&
    (0, styled_components_1.css) `
      td:nth-of-type(${hasDivider ? 2 : 1}) {
        padding-left: ${styles?.rowPaddingWhenDividerShown};
      }
      td:nth-of-type(${hasDivider ? numberOfCells : numberOfCells - 1}) {
        padding-right: ${styles?.rowPaddingWhenDividerShown};
      }
    `}
  position: relative;
  flex-wrap: wrap;
  &:last-of-type {
    ${({ styles }) => (0, getStyles_1.getStyles)(styles?.row?.lastRow)}
  }
  // When has expanded content, the last column has no border
  td:nth-last-of-type(2) {
    ${({ hasSomeExpandedContent, styles }) => hasSomeExpandedContent && (0, getStyles_1.getStyles)(styles?.column?.lastColumn)}
  }
  td:last-of-type {
    ${({ hasSomeExpandedContent, styles }) => !hasSomeExpandedContent && (0, getStyles_1.getStyles)(styles?.column?.lastColumn)}
  }
`;
exports.TableColumnBodyStyled = styled_components_1.default.td `
  ${({ styles }) => (0, styled_components_1.css) `
    ${(0, getStyles_1.getStyles)(styles?.column)}
    ${(0, getStyles_1.getTypographyStyles)(styles?.typography)}
  `}
  align-items: ${({ hasSomeExpandedContent, styles }) => hasSomeExpandedContent ? styles?.column?.align_items : undefined};
  gap: ${props => (props.hasSomeExpandedContent ? props.styles?.column?.gap : 0)};
  // Apply custom styles
  ${({ customWidth, customAlign, flexWidth, customBackgroundColor }) => applyCustomCellStyles({ customWidth, customAlign, flexWidth, customBackgroundColor })}
`;
exports.TableExpandedCellStyled = styled_components_1.default.td `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.expanded)}
  ${props => !props.showExpandedContent && applySrOnlyStyles()}
`;
/******** TABLE BODY EXPANDED CONTENT STYLES *******/
exports.TableEmptyExpandedContentRow = styled_components_1.default.div `
  width: ${({ styles }) => `calc(${styles?.accordionIcon?.width} + (${styles?.accordionIconContainer?.padding_left ?? '0%'} + ${styles?.accordionIconContainer?.padding_right ?? '0%'}))`};
  height: ${({ styles }) => `calc(${styles?.accordionIcon?.height} + (${styles?.accordionIconContainer?.padding_top ?? '0%'} + ${styles?.accordionIconContainer?.padding_bottom ?? '0%'}))`};
`;
exports.TableExpandedButton = styled_components_1.default.button `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.accordionIconContainer)}
`;
/******** TABLE BODY DIVIDER WRAPPER STYLES *******/
exports.DividerInternalWrapper = styled_components_1.default.td `
  width: 100%;
`;
/******** LIST STYLES *******/
exports.ListContainerStyled = styled_components_1.default.ul `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.listContainer)};
  ${({ hasFormatSideBySideInList, styles }) => hasFormatSideBySideInList && (0, getStyles_1.getStyles)(styles?.listContainerSydeBySyde)}
`;
exports.ListContainerHeaderPriorityStyled = styled_components_1.default.ul `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.listContainerHeaderPriority)};
`;
exports.ListRowContainerStyled = styled_components_1.default.li `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.listRowContainer)};
  // styles?.listRowContainerBorder check is done because in some themes the line separtor may not be wanted
  // If is required in all themes, listRowContainerBorder token should be deleted
  ${({ lineSeparatorLineStyles, hasDivider, styles }) => {
    return (styles?.listRowContainerBorder &&
        !hasDivider &&
        lineSeparatorLineStyles.buildLineStyles?.(lineSeparatorTheme_1.LineSeparatorPositionType.BOTTOM));
}}
`;
exports.ListRowContainerHeaderPriorityStyled = styled_components_1.default.li `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.listRowContainerHeaderPriority)};
  // styles?.listRowContainerBorder check is done because in some themes the line separtor may not be wanted
  // If is required in all themes, listRowContainerBorder token should be deleted
  ${({ lineSeparatorLineStyles, hasDivider, styles }) => {
    return (styles?.listRowContainerBorder &&
        !hasDivider &&
        lineSeparatorLineStyles.buildLineStyles?.(lineSeparatorTheme_1.LineSeparatorPositionType.BOTTOM));
}}
`;
exports.ListRowStyled = styled_components_1.default.ul `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.listRow)};
  ${({ formatSideBySideInList, styles }) => formatSideBySideInList && (0, getStyles_1.getStyles)(styles?.listRowSideBySide)}
`;
exports.ListRowHeaderPriorityStyled = styled_components_1.default.ul `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.listRowHeaderPriority)};
`;
exports.ListHeaderItemStylesStyled = styled_components_1.default.span `
  ${({ index, lineSeparatorLineStyles, lineSeparatorTopOnHeader, lineSeparatorBottomOnHeader }) => {
    const lineSeparator = [];
    // Only add lineSeparator on top when it is the first row
    if (lineSeparatorTopOnHeader && index === 0) {
        lineSeparator.push(lineSeparatorLineStyles?.buildLineStyles?.(lineSeparatorTheme_1.LineSeparatorPositionType.TOP));
    }
    if (lineSeparatorBottomOnHeader) {
        lineSeparator.push(lineSeparatorLineStyles?.buildLineStyles?.(lineSeparatorTheme_1.LineSeparatorPositionType.BOTTOM));
    }
    return lineSeparator;
}}
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.column)};
  // Apply custom styles
  ${({ customWidth, customAlign, flexWidth, customBackgroundColor }) => applyCustomCellStyles({ customWidth, customAlign, flexWidth, customBackgroundColor })}
  &[hidden] {
    ${srOnly_mixin_1.srOnlyMixin}
  }
`;
// Should be deprecated, it does not appears in the new designs ?
exports.ListItemStyled = styled_components_1.default.li `
  ${({ hasSomeExpandedContent }) => hasSomeExpandedContent &&
    (0, styled_components_1.css) `
      display: flex;
      align-items: baseline;
    `}
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.listItem)};
`;
exports.ListItemHeaderPriorityStyled = styled_components_1.default.li `
  ${({ hasSomeExpandedContent }) => hasSomeExpandedContent &&
    (0, styled_components_1.css) `
      display: flex;
      align-items: baseline;
    `}
  ${({ styles }) => (0, styled_components_1.css) `
    ${(0, getStyles_1.getStyles)(styles?.column)}
    ${(0, getStyles_1.getTypographyStyles)(styles?.typography)}
  `}
  ${({ lineSeparatorLineStyles, borderPosition = lineSeparatorTheme_1.LineSeparatorPositionType.BOTTOM }) => {
    return lineSeparatorLineStyles.buildLineStyles?.(borderPosition);
}}
  // Apply custom styles
  ${({ customWidth, customAlign, flexWidth, customBackgroundColor }) => applyCustomCellStyles({ customWidth, customAlign, flexWidth, customBackgroundColor })}
`;
exports.ListItemExpandedStyled = styled_components_1.default.div `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.expanded)}
  ${props => !props.showExpandedContent && applySrOnlyStyles()}
`;
// Should be deprecated, it does not appears in the new designs ?
exports.ListEmptyExpandedContentItem = styled_components_1.default.div `
  width: 0;
  height: 0;
`;
//# sourceMappingURL=table.styled.js.map