# All files / src/form inputToggleStyles.ts

100% Statements 77/77
80% Branches 4/5
100% Functions 1/1
100% Lines 77/77

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
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    781x
    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
    1x
    1x
    1x
    1x
    1x
    1x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
    435x
     import { cnb } from "cnbuilder";
    import { cssUtils } from "../cssUtils.js";
    import { bem } from "../utils/bem.js";
    import { type FormComponentStates } from "./types.js";

    const styles = bem("rmd-input-toggle");

    /**
     * The size to use for the `Checkbox` or `Radio` component. Each of these values
     * except for `"auto"` map to Sass variables:
     * - `"small"` - `$input-toggle-small-size`
     * - `"dense"` - `$input-toggle-dense-size`
     * - `"normal"` - `$input-toggle-large-size`
     * - `"large"` - `$input-toggle-large-size`
     *
     * When this is set to `"auto"`, the size will be determined by the current
     * `font-size` of the `Label` element.
     *
     * @remarks \@since 6.0.0
     */
    export type InputToggleSize = "auto" | "small" | "dense" | "normal" | "large";

    /** @remarks \@since 6.0.0 */
    export interface InputToggleClassNameOptions
      extends Omit<FormComponentStates, "readOnly"> {
      className?: string;
      type: "checkbox" | "radio";

      /**
       * Set the icon size to `1em` to allow easy sizing through font size.
       *
       * @defaultValue `true`
       */
      em?: boolean;

      /**
       * @see {@link InputToggleSize}
       * @defaultValue `"auto"`
       */
      size?: InputToggleSize;

      uncontrolled?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function inputToggle(options: InputToggleClassNameOptions): string {
      const {
        className,
        em = true,
        type,
        size = "auto",
        error,
        active = false,
        disabled = false,
        uncontrolled,
      } = options;

      return cnb(
        `rmd-${type}`,
        styles({
          em,
          active: active && !disabled,
          disabled,
          small: size === "small",
          dense: size === "dense",
          normal: size === "normal",
          large: size === "large",
          uncontrolled,
        }),
        cssUtils({
          textColor: disabled ? "text-disabled" : error ? "error" : undefined,
        }),
        className
      );
    }