# All files / src/responsive-item styles.ts

100% Statements 58/58
100% Branches 1/1
100% Functions 1/1
100% Lines 58/58

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    591x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
     import { cnb } from "cnbuilder";
    import { bem } from "../utils/bem.js";

    const styles = bem("rmd-responsive-item");

    /** @remarks \@since 6.0.0 */
    export interface ResponsiveItemClassNameOptions {
      className?: string;

      /**
       * Set this to `true` to apply the following styles:
       * ```scss
       * max-height: 100%;
       * max-width: 100%;
       * object-fit: contain;
       * ```
       *
       * This is useful for displaying images in a full page dialog so that scroll
       * bars do not appear while maintaining the correct aspect ratio for the item.
       *
       * @defaultValue `false`
       */
      scaleToContainer?: boolean;

      /**
       * Set this to `true` to force a specific aspect ratio.
       *
       * Note: This will only work if the parent element has applied the correct
       * {@link ResponsiveItemContainerStyles} as well.
       *
       * @defaultValue `false`
       */
      forcedAspectRatio?: boolean;
    }

    /**
     * Applies the visual media responsive styles manually if you cannot use the
     * `ResponsiveItemContainer` component.
     *
     * @remarks \@since 6.0.0
     */
    export function responsiveItem(
      options: ResponsiveItemClassNameOptions = {}
    ): string {
      const {
        className,
        scaleToContainer = false,
        forcedAspectRatio = false,
      } = options;

      return cnb(
        styles({
          scale: scaleToContainer,
          "aspect-ratio": forcedAspectRatio,
        }),
        className
      );
    }