"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.PasswordInputDataTids = exports.PasswordInput = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _globalObject = require("@skbkontur/global-object");

var _decorators = require("../../lib/locale/decorators");
var _RenderLayer = require("../../internal/RenderLayer");
var _utils = require("../../lib/utils");
var _identifiers = require("../../lib/events/keyboard/identifiers");
var _KeyboardEventCodes = require("../../lib/events/keyboard/KeyboardEventCodes");

var _Input = require("../Input");

var _client = require("../../lib/client");

var _CommonWrapper = require("../../internal/CommonWrapper");

var _ThemeContext = require("../../lib/theming/ThemeContext");
var _Emotion = require("../../lib/theming/Emotion");

var _rootNode = require("../../lib/rootNode");
var _SizeDecorator = require("../../lib/size/SizeDecorator");

var _createPropsGetter = require("../../lib/createPropsGetter");

var _PasswordInput2 = require("./PasswordInput.styles");
var _PasswordInputIcon = require("./PasswordInputIcon");

var _locale = require("./locale");var _dec, _class, _PasswordInput;















var PasswordInputDataTids = exports.PasswordInputDataTids = {
  root: 'PasswordInput',
  capsLockDetector: 'PasswordInputCapsLockDetector',
  eyeIcon: 'PasswordInputEyeIcon'
};

/**
 * Однострочное поле для ввода пароля, в котором символы заменяются на точки.
 */var




PasswordInput = exports.PasswordInput = (_dec = (0, _decorators.locale)('PasswordInput', _locale.PasswordInputLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (0, _SizeDecorator.withSize)(_class = (_PasswordInput = /*#__PURE__*/function (_React$PureComponent) {function PasswordInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.



    state = {
      visible: false,
      focused: false,
      capsLockEnabled: false
    };_this.









    getProps = (0, _createPropsGetter.createPropsGetter)({});





































    /** Программно устанавливает фокус на поле.
     * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
     * @public
     */_this.
    focus = function () {
      if (_this.input) {
        _this.input.focus();
      }
    };

    /** Программно снимает фокус с кнопки.
     * @public
     */_this.
    blur = function () {
      if (_this.input) {
        _this.input.blur();
      }
    };_this.

    handleKeyPress = function (e) {
      var _this$props = _this.props,onKeyPress = _this$props.onKeyPress,detectCapsLock = _this$props.detectCapsLock;

      if (onKeyPress) {
        onKeyPress(e);
      }

      if (!detectCapsLock) {
        return;
      }

      var capsLockEnabled = e.getModifierState(_KeyboardEventCodes.KeyboardEventCodes.CapsLock);

      _this.setState({ capsLockEnabled: capsLockEnabled });
    };_this.

    handleKeydown = function (e) {
      var _this2 = _this,_this2$props = _this2.
        props,detectCapsLock = _this2$props.detectCapsLock,onKeyDown = _this2$props.onKeyDown,
        capsLockEnabled = _this2.state.capsLockEnabled;


      if (onKeyDown) {
        onKeyDown(e);
      }

      if (!detectCapsLock) {
        return;
      }

      if ((0, _identifiers.isKeyCapsLock)(e) && (0, _utils.isNonNullable)(capsLockEnabled)) {
        _this.setState({ capsLockEnabled: !capsLockEnabled });
      }
    };_this.

    handleToggleVisibility = function () {
      _this.setState(function (prevState) {return { visible: !prevState.visible };}, _this.focusOnInput);
    };_this.

    focusOnInput = function () {
      if (_this.input) {
        _this.input.focus();
      }
    };_this.

    handleFocus = function (event) {
      if (_this.state.focused) {
        return;
      }

      _this.setState({ focused: true });

      if (_this.props.onFocus) {
        _this.props.onFocus(event);
      }
    };_this.

    handleFocusOutside = function () {
      _this.hideSymbols();

      if (_this.state.focused) {
        _this.setState({ focused: false });
      }
    };_this.













    renderEye = function () {
      var capsLockEnabled = _this.state.capsLockEnabled;

      return /*#__PURE__*/(
        _react.default.createElement("span", { className: _PasswordInput2.styles.iconWrapper() },
        capsLockEnabled && /*#__PURE__*/
        _react.default.createElement("span", { className: _PasswordInput2.styles.capsLockDetector(), "data-tid": PasswordInputDataTids.capsLockDetector }), /*#__PURE__*/

        _react.default.createElement("span", { className: (0, _Emotion.cx)(_PasswordInput2.styles.toggleVisibility(_this.theme), _this.getEyeWrapperClassname()) },
        !_this.props.disabled && /*#__PURE__*/
        _react.default.createElement("button", {
          type: "button",
          "aria-label": _this.state.visible ? _this.locale.eyeClosedAriaLabel : _this.locale.eyeOpenedAriaLabel,
          onClick: _this.handleToggleVisibility,
          className: _PasswordInput2.styles.icon(),
          "data-tid": PasswordInputDataTids.eyeIcon }, /*#__PURE__*/

        _react.default.createElement(_PasswordInputIcon.PasswordInputIcon, { size: _this.size, visible: _this.state.visible })
        )

        )
        ));

    };_this.

    refInput = function (element) {
      _this.input = element;
    };_this.

    hideSymbols = function () {
      _this.setState({ visible: false });
    };_this.

    renderMain = function (props) {
      return /*#__PURE__*/(
        _react.default.createElement(_RenderLayer.RenderLayer, {
          active: _this.state.focused,
          onFocusOutside: _this.handleFocusOutside,
          onClickOutside: _this.handleFocusOutside }, /*#__PURE__*/

        _react.default.createElement("div", { "data-tid": PasswordInputDataTids.root, className: _PasswordInput2.styles.root() }, /*#__PURE__*/
        _react.default.createElement(_Input.Input, (0, _extends2.default)({
          ref: _this.refInput,
          type: _this.state.visible ? 'text' : 'password',
          onKeyDown: _this.handleKeydown,
          onKeyPress: _this.handleKeyPress,
          rightIcon: _this.renderEye(),
          onFocus: _this.handleFocus },
        props)
        )
        )
        ));

    };return _this;}(0, _inheritsLoose2.default)(PasswordInput, _React$PureComponent);var _proto = PasswordInput.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.detectCapsLock) {this.setState({ capsLockEnabled: null });} // @ts-expect-error: IE-specific API.
    if (_client.isIE11 && (0, _globalObject.isBrowser)(_globalObject.globalObject) && !_globalObject.globalObject.document.msCapsLockWarningOff) {// @ts-expect-error: Read the comment above.
      // turns off default ie capslock warning
      _globalObject.globalObject.document.msCapsLockWarningOff = true;}};PasswordInput.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {if (props.disabled) {return { visible: false };}return state;};_proto.render = function render() {var _this3 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this3.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this3.setRootNode }, _this3.getProps()), _this3.renderMain);});};_proto.getEyeWrapperClassname = function getEyeWrapperClassname() {switch (this.size) {case 'large':return _PasswordInput2.styles.eyeWrapperLarge(this.theme);case 'medium':return _PasswordInput2.styles.eyeWrapperMedium(this.theme);case 'small':default:return _PasswordInput2.styles.eyeWrapperSmall(this.theme);}};return PasswordInput;}(_react.default.PureComponent), _PasswordInput.__KONTUR_REACT_UI__ = 'PasswordInput', _PasswordInput.displayName = 'PasswordInput', _PasswordInput)) || _class) || _class) || _class);