text: "use strict";
  
  var _interopRequireDefault = require("@babel/runtime/helpers/builtin/interopRequireDefault");
  
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.default = exports.styles = void 0;
  
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/extends"));
  
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/defineProperty"));
  
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/objectWithoutProperties"));
  
  var _react = _interopRequireDefault(require("react"));
  
  var _propTypes = _interopRequireDefault(require("prop-types"));
  
  var _classnames = _interopRequireDefault(require("classnames"));
  
  var _warning = _interopRequireDefault(require("warning"));
  
  var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
  
  var _colorManipulator = require("../styles/colorManipulator");
  
  var TRANSITION_DURATION = 4; // seconds
  
  var styles = function styles(theme) {
    return {
      root: {
        position: 'relative',
        overflow: 'hidden',
        height: 5
      },
      colorPrimary: {
        backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.light, 0.6)
      },
      colorSecondary: {
        backgroundColor: (0, _colorManipulator.lighten)(theme.palette.secondary.light, 0.4)
      },
      buffer: {
        backgroundColor: 'transparent'
      },
      query: {
        transform: 'rotate(180deg)'
      },
      dashed: {
        position: 'absolute',
        marginTop: 0,
        height: '100%',
        width: '100%',
        animation: 'buffer 3s infinite linear'
      },
      dashedColorPrimary: {
        backgroundImage: "radial-gradient(".concat((0, _colorManipulator.lighten)(theme.palette.primary.light, 0.6), " 0%, ").concat((0, _colorManipulator.lighten)(theme.palette.primary.light, 0.6), " 16%, transparent 42%)"),
        backgroundSize: '10px 10px',
        backgroundPosition: '0px -23px'
      },
      dashedColorSecondary: {
        backgroundImage: "radial-gradient(".concat((0, _colorManipulator.lighten)(theme.palette.secondary.light, 0.4), " 0%, ").concat((0, _colorManipulator.lighten)(theme.palette.secondary.light, 0.6), " 16%, transparent 42%)"),
        backgroundSize: '10px 10px',
        backgroundPosition: '0px -23px'
      },
      bar: {
        width: '100%',
        position: 'absolute',
        left: 0,
        bottom: 0,
        top: 0,
        transition: 'transform 0.2s linear',
        transformOrigin: 'left'
      },
      barColorPrimary: {
        backgroundColor: theme.palette.primary.main
      },
      barColorSecondary: {
        backgroundColor: theme.palette.secondary.main
      },
      bar1Indeterminate: {
        width: 'auto',
        willChange: 'left, right',
        animation: 'mui-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite'
      },
      bar2Indeterminate: {
        width: 'auto',
        willChange: 'left, right',
        animation: 'mui-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite',
        animationDelay: '1.15s'
      },
      bar1Determinate: {
        willChange: 'transform',
        transition: "transform .".concat(TRANSITION_DURATION, "s linear")
      },
      bar1Buffer: {
        zIndex: 1,
        transition: "transform .".concat(TRANSITION_DURATION, "s linear")
      },
      bar2Buffer: {
        transition: "transform .".concat(TRANSITION_DURATION, "s linear")
      },
      // Legends:
      // || represents the viewport
      // -  represents a light background
      // x  represents a dark background
      '@keyframes mui-indeterminate1': {
        //  |-----|---x-||-----||-----|
        '0%': {
          left: '-35%',
          right: '100%'
        },
        //  |-----|-----||-----||xxxx-|
        '60%': {
          left: '100%',
          right: '-90%'
        },
        '100%': {
          left: '100%',
          right: '-90%'
        }
      },
      '@keyframes mui-indeterminate2': {
        //  |xxxxx|xxxxx||-----||-----|
        '0%': {
          left: '-200%',
          right: '100%'
        },
        //  |-----|-----||-----||-x----|
        '60%': {
          left: '107%',
          right: '-8%'
        },
        '100%': {
          left: '107%',
          right: '-8%'
        }
      },
      '@keyframes buffer': {
        '0%': {
          opacity: 1,
          backgroundPosition: '0px -23px'
        },
        '50%': {
          opacity: 0,
          backgroundPosition: '0px -23px'
        },
        '100%': {
          opacity: 1,
          backgroundPosition: '-200px -23px'
        }
      }
    };
  };
  /**
   * ## ARIA
   *
   * If the progress bar is describing the loading progress of a particular region of a page,
   * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
   * attribute to `true` on that region until it has finished loading.
   */
  
  
  exports.styles = styles;
  
  function LinearProgress(props) {
    var _classNames, _classNames2, _classNames3, _classNames4;
  
    var classes = props.classes,
        classNameProp = props.className,
        color = props.color,
        value = props.value,
        valueBuffer = props.valueBuffer,
        variant = props.variant,
        other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "color", "value", "valueBuffer", "variant"]);
    var className = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.colorPrimary, color === 'primary'), (0, _defineProperty2.default)(_classNames, classes.colorSecondary, color === 'secondary'), (0, _defineProperty2.default)(_classNames, classes.buffer, variant === 'buffer'), (0, _defineProperty2.default)(_classNames, classes.query, variant === 'query'), _classNames), classNameProp);
    var dashedClass = (0, _classnames.default)(classes.dashed, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.dashedColorPrimary, color === 'primary'), (0, _defineProperty2.default)(_classNames2, classes.dashedColorSecondary, color === 'secondary'), _classNames2));
    var bar1ClassName = (0, _classnames.default)(classes.bar, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.barColorPrimary, color === 'primary'), (0, _defineProperty2.default)(_classNames3, classes.barColorSecondary, color === 'secondary'), (0, _defineProperty2.default)(_classNames3, classes.bar1Indeterminate, variant === 'indeterminate' || variant === 'query'), (0, _defineProperty2.default)(_classNames3, classes.bar1Determinate, variant === 'determinate'), (0, _defineProperty2.default)(_classNames3, classes.bar1Buffer, variant === 'buffer'), _classNames3));
    var bar2ClassName = (0, _classnames.default)(classes.bar, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.barColorPrimary, color === 'primary' && variant !== 'buffer'), (0, _defineProperty2.default)(_classNames4, classes.colorPrimary, color === 'primary' && variant === 'buffer'), (0, _defineProperty2.default)(_classNames4, classes.barColorSecondary, color === 'secondary' && variant !== 'buffer'), (0, _defineProperty2.default)(_classNames4, classes.colorSecondary, color === 'secondary' && variant === 'buffer'), (0, _defineProperty2.default)(_classNames4, classes.bar2Indeterminate, variant === 'indeterminate' || variant === 'query'), (0, _defineProperty2.default)(_classNames4, classes.bar2Buffer, variant === 'buffer'), _classNames4));
    var rootProps = {};
    var inlineStyles = {
      bar1: {},
      bar2: {}
    };
  
    if (variant === 'determinate' || variant === 'buffer') {
      if (value !== undefined) {
        rootProps['aria-valuenow'] = Math.round(value);
        inlineStyles.bar1.transform = "scaleX(".concat(value / 100, ")");
      } else {
        process.env.NODE_ENV !== "production" ? (0, _warning.default)(false, 'Material-UI: you need to provide a value property ' + 'when using the determinate or buffer variant of LinearProgress .') : void 0;
      }
    }
  
    if (variant === 'buffer') {
      if (valueBuffer !== undefined) {
        inlineStyles.bar2.transform = "scaleX(".concat((valueBuffer || 0) / 100, ")");
      } else {
        process.env.NODE_ENV !== "production" ? (0, _warning.default)(false, 'Material-UI: you need to provide a valueBuffer property ' + 'when using the buffer variant of LinearProgress.') : void 0;
      }
    }
  
    return _react.default.createElement("div", (0, _extends2.default)({
      className: className,
      role: "progressbar"
    }, rootProps, other), variant === 'buffer' ? _react.default.createElement("div", {
      className: dashedClass
    }) : null, _react.default.createElement("div", {
      className: bar1ClassName,
      style: inlineStyles.bar1
    }), variant === 'determinate' ? null : _react.default.createElement("div", {
      className: bar2ClassName,
      style: inlineStyles.bar2
    }));
  }
  
  LinearProgress.propTypes = process.env.NODE_ENV !== "production" ? {
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css-api) below for more details.
     */
    classes: _propTypes.default.object.isRequired,
  
    /**
     * @ignore
     */
    className: _propTypes.default.string,
  
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     */
    color: _propTypes.default.oneOf(['primary', 'secondary']),
  
    /**
     * The value of the progress indicator for the determinate and buffer variants.
     * Value between 0 and 100.
     */
    value: _propTypes.default.number,
  
    /**
     * The value for the buffer variant.
     * Value between 0 and 100.
     */
    valueBuffer: _propTypes.default.number,
  
    /**
     * The variant of progress indicator. Use indeterminate or query
     * when there is no progress value.
     */
    variant: _propTypes.default.oneOf(['determinate', 'indeterminate', 'buffer', 'query'])
  } : {};
  LinearProgress.defaultProps = {
    color: 'primary',
    variant: 'indeterminate'
  };
  
  var _default = (0, _withStyles.default)(styles, {
    name: 'MuiLinearProgress'
  })(LinearProgress);
  
  exports.default = _default;