{"version":3,"file":"app.14af360c3fb7368b3319.js","mappings":";;;;;;;;;;;AA+BA;;;;;;;;AASA;;;;;;;;;;;;AAaA;;;;AAwBA;;;AAGA;AACA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;;;AASA;;AAEA;AACA;AACA;;;AAGA;;;;;AAKA;;AAEA;;;;AAIA","sources":["webpack:///../node_modules/@mui/material/ButtonBase/TouchRipple.js"],"sourcesContent":["import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"center\", \"classes\", \"className\"];\nlet _ = t => t,\n  _t,\n  _t2,\n  _t3,\n  _t4;\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\nimport { keyframes } from '@mui/system';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport Ripple from './Ripple';\nimport touchRippleClasses from './touchRippleClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DURATION = 550;\nexport const DELAY_RIPPLE = 80;\nconst enterKeyframe = keyframes(_t || (_t = _`\n  0% {\n    transform: scale(0);\n    opacity: 0.1;\n  }\n\n  100% {\n    transform: scale(1);\n    opacity: 0.3;\n  }\n`));\nconst exitKeyframe = keyframes(_t2 || (_t2 = _`\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n`));\nconst pulsateKeyframe = keyframes(_t3 || (_t3 = _`\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.92);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n`));\nexport const TouchRippleRoot = styled('span', {\n  name: 'MuiTouchRipple',\n  slot: 'Root'\n})({\n  overflow: 'hidden',\n  pointerEvents: 'none',\n  position: 'absolute',\n  zIndex: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  borderRadius: 'inherit'\n});\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const TouchRippleRipple = styled(Ripple, {\n  name: 'MuiTouchRipple',\n  slot: 'Ripple'\n})(_t4 || (_t4 = _`\n  opacity: 0;\n  position: absolute;\n\n  &.${0} {\n    opacity: 0.3;\n    transform: scale(1);\n    animation-name: ${0};\n    animation-duration: ${0}ms;\n    animation-timing-function: ${0};\n  }\n\n  &.${0} {\n    animation-duration: ${0}ms;\n  }\n\n  & .${0} {\n    opacity: 1;\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background-color: currentColor;\n  }\n\n  & .${0} {\n    opacity: 0;\n    animation-name: ${0};\n    animation-duration: ${0}ms;\n    animation-timing-function: ${0};\n  }\n\n  & .${0} {\n    position: absolute;\n    /* @noflip */\n    left: 0px;\n    top: 0;\n    animation-name: ${0};\n    animation-duration: 2500ms;\n    animation-timing-function: ${0};\n    animation-iteration-count: infinite;\n    animation-delay: 200ms;\n  }\n`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({\n  theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({\n  theme\n}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({\n  theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({\n  theme\n}) => theme.transitions.easing.easeInOut);\n\n/**\n * @ignore - internal component.\n *\n * TODO v5: Make private\n */\nconst TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {\n  const props = useThemeProps({\n    props: inProps,\n    name: 'MuiTouchRipple'\n  });\n  const {\n      center: centerProp = false,\n      classes = {},\n      className\n    } = props,\n    other = _objectWithoutPropertiesLoose(props, _excluded);\n  const [ripples, setRipples] = React.useState([]);\n  const nextKey = React.useRef(0);\n  const rippleCallback = React.useRef(null);\n  React.useEffect(() => {\n    if (rippleCallback.current) {\n      rippleCallback.current();\n      rippleCallback.current = null;\n    }\n  }, [ripples]);\n\n  // Used to filter out mouse emulated events on mobile.\n  const ignoringMouseDown = React.useRef(false);\n  // We use a timer in order to only show the ripples for touch \"click\" like events.\n  // We don't want to display the ripple for touch scroll events.\n  const startTimer = React.useRef(null);\n\n  // This is the hook called once the previous timeout is ready.\n  const startTimerCommit = React.useRef(null);\n  const container = React.useRef(null);\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(startTimer.current);\n    };\n  }, []);\n  const startCommit = React.useCallback(params => {\n    const {\n      pulsate,\n      rippleX,\n      rippleY,\n      rippleSize,\n      cb\n    } = params;\n    setRipples(oldRipples => [...oldRipples, /*#__PURE__*/_jsx(TouchRippleRipple, {\n      classes: {\n        ripple: clsx(classes.ripple, touchRippleClasses.ripple),\n        rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),\n        ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),\n        child: clsx(classes.child, touchRippleClasses.child),\n        childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),\n        childPulsate: clsx(classes.childPulsate, touchRippleClasses.childPulsate)\n      },\n      timeout: DURATION,\n      pulsate: pulsate,\n      rippleX: rippleX,\n      rippleY: rippleY,\n      rippleSize: rippleSize\n    }, nextKey.current)]);\n    nextKey.current += 1;\n    rippleCallback.current = cb;\n  }, [classes]);\n  const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {\n    const {\n      pulsate = false,\n      center = centerProp || options.pulsate,\n      fakeElement = false // For test purposes\n    } = options;\n    if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {\n      ignoringMouseDown.current = false;\n      return;\n    }\n    if ((event == null ? void 0 : event.type) === 'touchstart') {\n      ignoringMouseDown.current = true;\n    }\n    const element = fakeElement ? null : container.current;\n    const rect = element ? element.getBoundingClientRect() : {\n      width: 0,\n      height: 0,\n      left: 0,\n      top: 0\n    };\n\n    // Get the size of the ripple\n    let rippleX;\n    let rippleY;\n    let rippleSize;\n    if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {\n      rippleX = Math.round(rect.width / 2);\n      rippleY = Math.round(rect.height / 2);\n    } else {\n      const {\n        clientX,\n        clientY\n      } = event.touches && event.touches.length > 0 ? event.touches[0] : event;\n      rippleX = Math.round(clientX - rect.left);\n      rippleY = Math.round(clientY - rect.top);\n    }\n    if (center) {\n      rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);\n\n      // For some reason the animation is broken on Mobile Chrome if the size is even.\n      if (rippleSize % 2 === 0) {\n        rippleSize += 1;\n      }\n    } else {\n      const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n      const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n      rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);\n    }\n\n    // Touche devices\n    if (event != null && event.touches) {\n      // check that this isn't another touchstart due to multitouch\n      // otherwise we will only clear a single timer when unmounting while two\n      // are running\n      if (startTimerCommit.current === null) {\n        // Prepare the ripple effect.\n        startTimerCommit.current = () => {\n          startCommit({\n            pulsate,\n            rippleX,\n            rippleY,\n            rippleSize,\n            cb\n          });\n        };\n        // Delay the execution of the ripple effect.\n        startTimer.current = setTimeout(() => {\n          if (startTimerCommit.current) {\n            startTimerCommit.current();\n            startTimerCommit.current = null;\n          }\n        }, DELAY_RIPPLE); // We have to make a tradeoff with this value.\n      }\n    } else {\n      startCommit({\n        pulsate,\n        rippleX,\n        rippleY,\n        rippleSize,\n        cb\n      });\n    }\n  }, [centerProp, startCommit]);\n  const pulsate = React.useCallback(() => {\n    start({}, {\n      pulsate: true\n    });\n  }, [start]);\n  const stop = React.useCallback((event, cb) => {\n    clearTimeout(startTimer.current);\n\n    // The touch interaction occurs too quickly.\n    // We still want to show ripple effect.\n    if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {\n      startTimerCommit.current();\n      startTimerCommit.current = null;\n      startTimer.current = setTimeout(() => {\n        stop(event, cb);\n      });\n      return;\n    }\n    startTimerCommit.current = null;\n    setRipples(oldRipples => {\n      if (oldRipples.length > 0) {\n        return oldRipples.slice(1);\n      }\n      return oldRipples;\n    });\n    rippleCallback.current = cb;\n  }, []);\n  React.useImperativeHandle(ref, () => ({\n    pulsate,\n    start,\n    stop\n  }), [pulsate, start, stop]);\n  return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({\n    className: clsx(touchRippleClasses.root, classes.root, className),\n    ref: container\n  }, other, {\n    children: /*#__PURE__*/_jsx(TransitionGroup, {\n      component: null,\n      exit: true,\n      children: ripples\n    })\n  }));\n});\nprocess.env.NODE_ENV !== \"production\" ? TouchRipple.propTypes = {\n  /**\n   * If `true`, the ripple starts at the center of the component\n   * rather than at the point of interaction.\n   */\n  center: PropTypes.bool,\n  /**\n   * Override or extend the styles applied to the component.\n   * See [CSS API](#css) below for more details.\n   */\n  classes: PropTypes.object,\n  /**\n   * @ignore\n   */\n  className: PropTypes.string\n} : void 0;\nexport default TouchRipple;"],"names":[],"sourceRoot":""}