@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

package/components/PasswordInput/PasswordInput/PasswordInput.js

@@ -2,22 +2,43 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["detectCapsLock"];
+
+var _dec, _class, _class2, _temp; // TODO: Enable this rule in functional components.
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+
 import React from 'react';
 import PropTypes from 'prop-types';
+import { globalObject, isBrowser } from '@skbkontur/global-object';
+import { locale } from "../../../lib/locale/decorators";
+import { RenderLayer } from "../../../internal/RenderLayer";
+import { isNonNullable } from "../../../lib/utils";
 import { isKeyCapsLock } from "../../../lib/events/keyboard/identifiers";
 import { KeyboardEventCodes as Codes } from "../../../lib/events/keyboard/KeyboardEventCodes";
 import { Input } from "../../Input";
-import { EyeClosedIcon, EyeOpenedIcon } from "../../../internal/icons/16px";
-import { isIE11 } from "../../../lib/utils";
-import { jsStyles } from "../PasswordInput.styles";
-/**
-                                                    * Компонент для ввода пароля
-                                                    */
-
-export var PasswordInput =
-/*#__PURE__*/
-function (_React$Component) {
-  _inheritsLoose(PasswordInput, _React$Component);
+import { isIE11 } from "../../../lib/client";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { getStyles } from "../PasswordInput.styles";
+import { PasswordInputIcon } from "../PasswordInputIcon";
+import { PasswordInputLocaleHelper } from "../locale";
+export var PasswordInputDataTids = {
+  root: 'PasswordInput',
+  capsLockDetector: 'PasswordInputCapsLockDetector',
+  eyeIcon: 'PasswordInputEyeIcon'
+};
+export
+/**
+* Компонент для ввода пароля
+*/
+var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(PasswordInput, _React$PureComponent);
 
   function PasswordInput() {
     var _this;
@@ -26,12 +47,12 @@ function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(PasswordInput.defaultProps);
     _this.state = {
       visible: false,
       capsLockEnabled: false
     };
-    _this.input = void 0;
 
     _this.focus = function () {
       if (_this.input) {
@@ -78,7 +99,7 @@ function (_React$Component) {
         return;
       }
 
-      if (isKeyCapsLock(e) && capsLockEnabled != null) {
+      if (isKeyCapsLock(e) && isNonNullable(capsLockEnabled)) {
         _this.setState({
           capsLockEnabled: !capsLockEnabled
         });
@@ -107,81 +128,130 @@ function (_React$Component) {
 
     _this.renderEye = function () {
       var capsLockEnabled = _this.state.capsLockEnabled;
-      return React.createElement("span", {
-        className: jsStyles.iconWrapper()
-      }, capsLockEnabled && React.createElement("span", {
-        className: jsStyles.capsLockDetector()
-      }), React.createElement("span", {
-        "data-tid": "PasswordInputEyeIcon",
-        className: jsStyles.toggleVisibility(),
-        onClick: _this.handleToggleVisibility
-      }, _this.state.visible ? React.createElement(EyeOpenedIcon, {
-        size: 14
-      }) : React.createElement(EyeClosedIcon, {
-        size: 14
-      })));
+      var styles = getStyles(_this.emotion);
+      return /*#__PURE__*/React.createElement("span", {
+        className: styles.iconWrapper()
+      }, capsLockEnabled && /*#__PURE__*/React.createElement("span", {
+        className: styles.capsLockDetector(),
+        "data-tid": PasswordInputDataTids.capsLockDetector
+      }), /*#__PURE__*/React.createElement("span", {
+        className: _this.emotion.cx(styles.toggleVisibility(_this.theme), _this.getEyeWrapperClassname())
+      }, !_this.props.disabled && /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        "aria-label": _this.state.visible ? _this.locale.eyeClosedAriaLabel : _this.locale.eyeOpenedAriaLabel,
+        onClick: _this.handleToggleVisibility,
+        className: styles.icon(),
+        "data-tid": PasswordInputDataTids.eyeIcon
+      }, /*#__PURE__*/React.createElement(PasswordInputIcon, {
+        size: _this.props.size,
+        visible: _this.state.visible,
+        isTheme2022: isTheme2022(_this.theme)
+      }))));
     };
 
     _this.refInput = function (element) {
       _this.input = element;
     };
 
+    _this.hideSymbols = function () {
+      _this.setState({
+        visible: false
+      });
+    };
+
+    _this.renderMain = function (props) {
+      var detectCapsLock = props.detectCapsLock,
+          rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+      var inputProps = _extends({}, rest, {
+        onKeyDown: _this.handleKeydown,
+        onKeyPress: _this.handleKeyPress,
+        rightIcon: _this.renderEye()
+      });
+
+      var styles = getStyles(_this.emotion);
+      return /*#__PURE__*/React.createElement(RenderLayer, {
+        onFocusOutside: _this.hideSymbols,
+        onClickOutside: _this.hideSymbols
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-tid": PasswordInputDataTids.root,
+        className: styles.root()
+      }, /*#__PURE__*/React.createElement(Input, _extends({
+        ref: _this.refInput,
+        type: _this.state.visible ? 'text' : 'password'
+      }, inputProps))));
+    };
+
     return _this;
   }
 
   var _proto = PasswordInput.prototype;
 
-  _proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {
+  _proto.componentDidMount = function componentDidMount() {
     if (this.props.detectCapsLock) {
       this.setState({
         capsLockEnabled: null
       });
-    } // @ts-ignore
+    } // @ts-expect-error: IE-specific API.
 
 
-    if (isIE11 && !window.document.msCapsLockWarningOff) {
+    if (isIE11 && isBrowser(globalObject) && !globalObject.document.msCapsLockWarningOff) {
+      // @ts-expect-error: Read the comment above.
       // turns off default ie capslock warning
-      // @ts-ignore
-      window.document.msCapsLockWarningOff = true;
+      globalObject.document.msCapsLockWarningOff = true;
+    }
+  };
+
+  PasswordInput.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    if (props.disabled) {
+      return {
+        visible: false
+      };
     }
+
+    return state;
   };
 
   _proto.render = function render() {
-    return React.createElement("div", {
-      className: jsStyles.root()
-    }, this.renderInput());
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this2.setRootNode
+        }, _this2.props), _this2.renderMain);
+      });
+    });
   }
-  /**
-   * @public
-   */
+  /**
+  * @public
+  */
   ;
 
-  _proto.renderInput = function renderInput() {
-    var _this$props2 = this.props,
-        detectCapsLock = _this$props2.detectCapsLock,
-        props = _objectWithoutPropertiesLoose(_this$props2, ["detectCapsLock"]);
+  _proto.getEyeWrapperClassname = function getEyeWrapperClassname() {
+    var styles = getStyles(this.emotion);
 
-    var inputProps = _extends({}, props, {
-      onKeyDown: this.handleKeydown,
-      onKeyPress: this.handleKeyPress,
-      rightIcon: this.renderEye()
-    });
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.eyeWrapperLarge(this.theme);
 
-    return React.createElement(Input, _extends({
-      ref: this.refInput,
-      type: this.state.visible ? 'text' : 'password'
-    }, inputProps));
+      case 'medium':
+        return styles.eyeWrapperMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.eyeWrapperSmall(this.theme);
+    }
   };
 
   return PasswordInput;
-}(React.Component);
-PasswordInput.__KONTUR_REACT_UI__ = 'PasswordInput';
-PasswordInput.propTypes = {
-  /**
-   * Включает CapsLock детектор
-   */
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'PasswordInput', _class2.displayName = 'PasswordInput', _class2.propTypes = {
+  /**
+  * Включает CapsLock детектор
+  */
   detectCapsLock: PropTypes.bool
-};
-PasswordInput.defaultProps = {
+}, _class2.defaultProps = {
   size: 'small'
-};
+}, _temp)) || _class) || _class);

package/components/PasswordInput/PasswordInput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PasswordInput.tsx"],"names":["React","PropTypes","isKeyCapsLock","KeyboardEventCodes","Codes","Input","EyeClosedIcon","EyeOpenedIcon","isIE11","jsStyles","PasswordInput","state","visible","capsLockEnabled","input","focus","blur","handleBlur","handleKeyPress","e","props","onKeyPress","detectCapsLock","getModifierState","CapsLock","setState","handleKeydown","onKeyDown","handleToggleVisibility","prevState","handleFocus","renderEye","iconWrapper","capsLockDetector","toggleVisibility","refInput","element","UNSAFE_componentWillMount","window","document","msCapsLockWarningOff","render","root","renderInput","inputProps","rightIcon","Component","__KONTUR_REACT_UI__","propTypes","bool","defaultProps","size"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { isKeyCapsLock } from '../../lib/events/keyboard/identifiers';\r\nimport { KeyboardEventCodes as Codes } from '../../lib/events/keyboard/KeyboardEventCodes';\r\nimport { Input, InputProps } from '../Input';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { EyeClosedIcon, EyeOpenedIcon } from '../../internal/icons/16px';\r\nimport { isIE11 } from '../../lib/utils';\r\n\r\nimport { jsStyles } from './PasswordInput.styles';\r\n\r\nexport type PasswordInputProps = {\r\n  detectCapsLock?: boolean;\r\n} & InputProps;\r\n\r\nexport interface PasswordInputState {\r\n  visible: boolean;\r\n  capsLockEnabled?: boolean | null;\r\n}\r\n\r\n/**\r\n * Компонент для ввода пароля\r\n */\r\nexport class PasswordInput extends React.Component<PasswordInputProps, PasswordInputState> {\r\n  public static __KONTUR_REACT_UI__ = 'PasswordInput';\r\n\r\n  public static propTypes = {\r\n    /**\r\n     * Включает CapsLock детектор\r\n     */\r\n    detectCapsLock: PropTypes.bool,\r\n  };\r\n\r\n  public static defaultProps = {\r\n    size: 'small',\r\n  };\r\n\r\n  public state: PasswordInputState = {\r\n    visible: false,\r\n    capsLockEnabled: false,\r\n  };\r\n\r\n  private input: Nullable<Input>;\r\n\r\n  public UNSAFE_componentWillMount() {\r\n    if (this.props.detectCapsLock) {\r\n      this.setState({ capsLockEnabled: null });\r\n    }\r\n\r\n    // @ts-ignore\r\n    if (isIE11 && !window.document.msCapsLockWarningOff) {\r\n      // turns off default ie capslock warning\r\n      // @ts-ignore\r\n      window.document.msCapsLockWarningOff = true;\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return <div className={jsStyles.root()}>{this.renderInput()}</div>;\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus = () => {\r\n    if (this.input) {\r\n      this.input.focus();\r\n    }\r\n  };\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public blur = () => {\r\n    this.handleBlur();\r\n  };\r\n\r\n  private handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    const { onKeyPress, detectCapsLock } = this.props;\r\n\r\n    if (onKeyPress) {\r\n      onKeyPress(e);\r\n    }\r\n\r\n    if (!detectCapsLock) {\r\n      return;\r\n    }\r\n\r\n    const capsLockEnabled = e.getModifierState(Codes.CapsLock);\r\n\r\n    this.setState({ capsLockEnabled });\r\n  };\r\n\r\n  private handleKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    const {\r\n      props: { detectCapsLock, onKeyDown },\r\n      state: { capsLockEnabled },\r\n    } = this;\r\n\r\n    if (onKeyDown) {\r\n      onKeyDown(e);\r\n    }\r\n\r\n    if (!detectCapsLock) {\r\n      return;\r\n    }\r\n\r\n    if (isKeyCapsLock(e) && capsLockEnabled != null) {\r\n      this.setState({ capsLockEnabled: !capsLockEnabled });\r\n    }\r\n  };\r\n\r\n  private handleToggleVisibility = () => {\r\n    this.setState(prevState => ({ visible: !prevState.visible }), this.handleFocus);\r\n  };\r\n\r\n  private handleFocus = () => {\r\n    if (this.input) {\r\n      this.input.focus();\r\n    }\r\n  };\r\n\r\n  private handleBlur = () => {\r\n    if (this.input) {\r\n      this.input.blur();\r\n    }\r\n  };\r\n\r\n  private renderEye = () => {\r\n    const { capsLockEnabled } = this.state;\r\n\r\n    return (\r\n      <span className={jsStyles.iconWrapper()}>\r\n        {capsLockEnabled && <span className={jsStyles.capsLockDetector()} />}\r\n        <span data-tid=\"PasswordInputEyeIcon\" className={jsStyles.toggleVisibility()} onClick={this.handleToggleVisibility}>\r\n          {this.state.visible ? <EyeOpenedIcon size={14} /> : <EyeClosedIcon size={14} />}\r\n        </span>\r\n      </span>\r\n    );\r\n  };\r\n\r\n  private refInput = (element: Input) => {\r\n    this.input = element;\r\n  };\r\n\r\n  private renderInput() {\r\n    const { detectCapsLock, ...props } = this.props;\r\n    const inputProps = {\r\n      ...props,\r\n      onKeyDown: this.handleKeydown,\r\n      onKeyPress: this.handleKeyPress,\r\n      rightIcon: this.renderEye(),\r\n    };\r\n    return <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["PasswordInput.tsx"],"names":["React","PropTypes","globalObject","isBrowser","locale","RenderLayer","isNonNullable","isKeyCapsLock","KeyboardEventCodes","Codes","Input","isIE11","CommonWrapper","ThemeContext","EmotionConsumer","rootNode","createPropsGetter","isTheme2022","getStyles","PasswordInputIcon","PasswordInputLocaleHelper","PasswordInputDataTids","root","capsLockDetector","eyeIcon","PasswordInput","getProps","defaultProps","state","visible","capsLockEnabled","focus","input","blur","handleBlur","handleKeyPress","e","props","onKeyPress","detectCapsLock","getModifierState","CapsLock","setState","handleKeydown","onKeyDown","handleToggleVisibility","prevState","handleFocus","renderEye","styles","emotion","iconWrapper","cx","toggleVisibility","theme","getEyeWrapperClassname","disabled","eyeClosedAriaLabel","eyeOpenedAriaLabel","icon","size","refInput","element","hideSymbols","renderMain","rest","inputProps","rightIcon","componentDidMount","document","msCapsLockWarningOff","getDerivedStateFromProps","render","setRootNode","eyeWrapperLarge","eyeWrapperMedium","eyeWrapperSmall","PureComponent","__KONTUR_REACT_UI__","displayName","propTypes","bool"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyCapsLock } from '../../lib/events/keyboard/identifiers';\nimport { KeyboardEventCodes as Codes } from '../../lib/events/keyboard/KeyboardEventCodes';\nimport { Input, InputProps } from '../Input';\nimport { Nullable } from '../../typings/utility-types';\nimport { isIE11 } from '../../lib/client';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { getStyles } from './PasswordInput.styles';\nimport { PasswordInputIcon } from './PasswordInputIcon';\nimport { PasswordInputLocale, PasswordInputLocaleHelper } from './locale';\n\nexport interface PasswordInputProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, InputProps {\n  detectCapsLock?: boolean;\n}\n\nexport interface PasswordInputState {\n  visible: boolean;\n  capsLockEnabled?: boolean | null;\n}\n\nexport const PasswordInputDataTids = {\n  root: 'PasswordInput',\n  capsLockDetector: 'PasswordInputCapsLockDetector',\n  eyeIcon: 'PasswordInputEyeIcon',\n} as const;\n\ntype DefaultProps = Required<Pick<PasswordInputProps, 'size'>>;\n\n/**\n * Компонент для ввода пароля\n */\n@rootNode\n@locale('PasswordInput', PasswordInputLocaleHelper)\nexport class PasswordInput extends React.PureComponent<PasswordInputProps, PasswordInputState> {\n  public static __KONTUR_REACT_UI__ = 'PasswordInput';\n  public static displayName = 'PasswordInput';\n\n  public static propTypes = {\n    /**\n     * Включает CapsLock детектор\n     */\n    detectCapsLock: PropTypes.bool,\n  };\n\n  public static defaultProps: DefaultProps = {\n    size: 'small',\n  };\n\n  private getProps = createPropsGetter(PasswordInput.defaultProps);\n\n  public state: PasswordInputState = {\n    visible: false,\n    capsLockEnabled: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n\n  private input: Nullable<Input>;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: PasswordInputLocale;\n\n  public componentDidMount() {\n    if (this.props.detectCapsLock) {\n      this.setState({ capsLockEnabled: null });\n    }\n\n    // @ts-expect-error: IE-specific API.\n    if (isIE11 && isBrowser(globalObject) && !globalObject.document.msCapsLockWarningOff) {\n      // @ts-expect-error: Read the comment above.\n      // turns off default ie capslock warning\n      globalObject.document.msCapsLockWarningOff = true;\n    }\n  }\n\n  public static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState) {\n    if (props.disabled) {\n      return { visible: false };\n    }\n\n    return state;\n  }\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return (\n                  <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n                    {this.renderMain}\n                  </CommonWrapper>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /**\n   * @public\n   */\n  public blur = () => {\n    this.handleBlur();\n  };\n\n  private handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const { onKeyPress, detectCapsLock } = this.props;\n\n    if (onKeyPress) {\n      onKeyPress(e);\n    }\n\n    if (!detectCapsLock) {\n      return;\n    }\n\n    const capsLockEnabled = e.getModifierState(Codes.CapsLock);\n\n    this.setState({ capsLockEnabled });\n  };\n\n  private handleKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const {\n      props: { detectCapsLock, onKeyDown },\n      state: { capsLockEnabled },\n    } = this;\n\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n\n    if (!detectCapsLock) {\n      return;\n    }\n\n    if (isKeyCapsLock(e) && isNonNullable(capsLockEnabled)) {\n      this.setState({ capsLockEnabled: !capsLockEnabled });\n    }\n  };\n\n  private handleToggleVisibility = () => {\n    this.setState((prevState) => ({ visible: !prevState.visible }), this.handleFocus);\n  };\n\n  private handleFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private handleBlur = () => {\n    if (this.input) {\n      this.input.blur();\n    }\n  };\n\n  private getEyeWrapperClassname() {\n    const styles = getStyles(this.emotion);\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.eyeWrapperLarge(this.theme);\n      case 'medium':\n        return styles.eyeWrapperMedium(this.theme);\n      case 'small':\n      default:\n        return styles.eyeWrapperSmall(this.theme);\n    }\n  }\n\n  private renderEye = () => {\n    const { capsLockEnabled } = this.state;\n    const styles = getStyles(this.emotion);\n    return (\n      <span className={styles.iconWrapper()}>\n        {capsLockEnabled && (\n          <span className={styles.capsLockDetector()} data-tid={PasswordInputDataTids.capsLockDetector} />\n        )}\n        <span className={this.emotion.cx(styles.toggleVisibility(this.theme), this.getEyeWrapperClassname())}>\n          {!this.props.disabled && (\n            <button\n              type=\"button\"\n              aria-label={this.state.visible ? this.locale.eyeClosedAriaLabel : this.locale.eyeOpenedAriaLabel}\n              onClick={this.handleToggleVisibility}\n              className={styles.icon()}\n              data-tid={PasswordInputDataTids.eyeIcon}\n            >\n              <PasswordInputIcon\n                size={this.props.size}\n                visible={this.state.visible}\n                isTheme2022={isTheme2022(this.theme)}\n              />\n            </button>\n          )}\n        </span>\n      </span>\n    );\n  };\n\n  private refInput = (element: Input) => {\n    this.input = element;\n  };\n\n  private hideSymbols = () => {\n    this.setState({ visible: false });\n  };\n\n  private renderMain = (props: CommonWrapperRestProps<PasswordInputProps>) => {\n    const { detectCapsLock, ...rest } = props;\n    const inputProps = {\n      ...rest,\n      onKeyDown: this.handleKeydown,\n      onKeyPress: this.handleKeyPress,\n      rightIcon: this.renderEye(),\n    };\n\n    const styles = getStyles(this.emotion);\n    return (\n      <RenderLayer onFocusOutside={this.hideSymbols} onClickOutside={this.hideSymbols}>\n        <div data-tid={PasswordInputDataTids.root} className={styles.root()}>\n          <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />\n        </div>\n      </RenderLayer>\n    );\n  };\n}\n"]}

package/components/PasswordInput/PasswordInput.d.ts

@@ -1,30 +1,42 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { InputProps } from '../Input';
-export declare type PasswordInputProps = {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface PasswordInputProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, InputProps {
     detectCapsLock?: boolean;
-} & InputProps;
+}
 export interface PasswordInputState {
     visible: boolean;
     capsLockEnabled?: boolean | null;
 }
+export declare const PasswordInputDataTids: {
+    readonly root: "PasswordInput";
+    readonly capsLockDetector: "PasswordInputCapsLockDetector";
+    readonly eyeIcon: "PasswordInputEyeIcon";
+};
+declare type DefaultProps = Required<Pick<PasswordInputProps, 'size'>>;
 /**
  * Компонент для ввода пароля
  */
-export declare class PasswordInput extends React.Component<PasswordInputProps, PasswordInputState> {
+export declare class PasswordInput extends React.PureComponent<PasswordInputProps, PasswordInputState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
         /**
          * Включает CapsLock детектор
          */
         detectCapsLock: PropTypes.Requireable<boolean>;
     };
-    static defaultProps: {
-        size: string;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: PasswordInputState;
+    private theme;
+    private emotion;
     private input;
-    UNSAFE_componentWillMount(): void;
+    private setRootNode;
+    private readonly locale;
+    componentDidMount(): void;
+    static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState): PasswordInputState;
     render(): JSX.Element;
     /**
      * @public
@@ -39,7 +51,10 @@ export declare class PasswordInput extends React.Component<PasswordInputProps, P
     private handleToggleVisibility;
     private handleFocus;
     private handleBlur;
+    private getEyeWrapperClassname;
     private renderEye;
     private refInput;
-    private renderInput;
+    private hideSymbols;
+    private renderMain;
 }
+export {};

package/components/PasswordInput/PasswordInput.md

@@ -1,9 +1,28 @@
-```jsx harmony
-<PasswordInput />
-```
-
-Пример с отслеживанием нажатия CapsLock:
-
-```jsx harmony
-<PasswordInput detectCapsLock />
-```
+```jsx harmony
+<PasswordInput />
+```
+
+Пример с отслеживанием нажатия CapsLock:
+
+```jsx harmony
+<PasswordInput detectCapsLock />
+```
+
+#### Локали по умолчанию
+
+```typescript static
+interface PasswordInputLocale {
+  eyeOpenedAriaLabel?: string;
+  eyeClosedAriaLabel?: string;
+}
+
+const ru_RU = {
+  eyeOpenedAriaLabel: 'Скрыть символы пароля',
+  eyeClosedAriaLabel: 'Отобразить символы пароля',
+}
+
+const en_GB = {
+  eyeOpenedAriaLabel: 'Hide password symbols',
+  eyeClosedAriaLabel: 'Show password symbols',
+}
+```

package/components/PasswordInput/PasswordInput.styles/PasswordInput.styles.js

@@ -1,58 +1,33 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: flex;\n      align-items: center;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      font-size: 9px;\n      margin-right: 8px;\n      color: #fff;\n      cursor: default;\n      background: #999;\n      padding: 2px 5px;\n      border-radius: 3px;\n      z-index: 9;\n      box-sizing: border-box;\n      line-height: normal;\n\n      &::before {\n        content: 'CapsLock';\n      }\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: #000;\n      cursor: pointer;\n      opacity: 0.6;\n      user-select: none;\n\n      &:hover {\n        opacity: 1;\n      }\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      position: relative;\n      display: inline-block;\n\n      input::-ms-clear,\n      input::-ms-reveal {\n        display: none;\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
-  root: function root() {
-    return css(_templateObject());
-  },
-  toggleVisibility: function toggleVisibility() {
-    return css(_templateObject2());
-  },
-  capsLockDetector: function capsLockDetector() {
-    return css(_templateObject3());
-  },
-  iconWrapper: function iconWrapper() {
-    return css(_templateObject4());
-  }
-};
-export var jsStyles = memoizeStyle(styles);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root() {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        position: relative;\n        display: inline-block;\n        line-height: normal;\n\n        input::-ms-clear,\n        input::-ms-reveal {\n          display: none;\n        }\n      "])));
+    },
+    toggleVisibility: function toggleVisibility(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        cursor: pointer;\n        opacity: ", ";\n        user-select: none;\n\n        &:hover {\n          color: ", ";\n          opacity: ", ";\n        }\n      "])), t.passwordInputVisibilityIconColor, t.passwordInputVisibilityIconOpacity, t.passwordInputVisibilityIconHoverColor, t.passwordInputVisibilityIconHoverOpacity);
+    },
+    capsLockDetector: function capsLockDetector() {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        font-size: 9px;\n        margin-right: 8px;\n        color: #fff;\n        cursor: default;\n        background: #999;\n        padding: 2px 5px;\n        border-radius: 3px;\n        z-index: 9;\n        box-sizing: border-box;\n        line-height: normal;\n\n        &::before {\n          content: 'CapsLock';\n        }\n      "])));
+    },
+    iconWrapper: function iconWrapper() {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n      "])));
+    },
+    eyeWrapperSmall: function eyeWrapperSmall(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        min-width: ", ";\n      "])), t.inputIconSizeSmall);
+    },
+    eyeWrapperMedium: function eyeWrapperMedium(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        min-width: ", ";\n      "])), t.inputIconSizeMedium);
+    },
+    eyeWrapperLarge: function eyeWrapperLarge(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        min-width: ", ";\n      "])), t.inputIconSizeLarge);
+    },
+    icon: function icon() {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        padding: 0;\n        border: none;\n        font: inherit;\n        color: inherit;\n        background-color: transparent;\n        cursor: pointer;\n      "])));
+    }
+  });
+};

package/components/PasswordInput/PasswordInput.styles/PasswordInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PasswordInput.styles.ts"],"names":["css","memoizeStyle","styles","root","toggleVisibility","capsLockDetector","iconWrapper","jsStyles"],"mappings":"y2CAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOH,GAAP;;;;;;;;;AASD,GAXY;AAYbI,EAAAA,gBAZa,8BAYM;AACjB,WAAOJ,GAAP;;;;;;;;;;AAUD,GAvBY;AAwBbK,EAAAA,gBAxBa,8BAwBM;AACjB,WAAOL,GAAP;;;;;;;;;;;;;;;;;AAiBD,GA1CY;AA2CbM,EAAAA,WA3Ca,yBA2CC;AACZ,WAAON,GAAP;;;;AAID,GAhDY,EAAf;;;AAmDA,OAAO,IAAMO,QAAQ,GAAGN,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      position: relative;\r\n      display: inline-block;\r\n\r\n      input::-ms-clear,\r\n      input::-ms-reveal {\r\n        display: none;\r\n      }\r\n    `;\r\n  },\r\n  toggleVisibility() {\r\n    return css`\r\n      color: #000;\r\n      cursor: pointer;\r\n      opacity: 0.6;\r\n      user-select: none;\r\n\r\n      &:hover {\r\n        opacity: 1;\r\n      }\r\n    `;\r\n  },\r\n  capsLockDetector() {\r\n    return css`\r\n      display: inline-block;\r\n      font-size: 9px;\r\n      margin-right: 8px;\r\n      color: #fff;\r\n      cursor: default;\r\n      background: #999;\r\n      padding: 2px 5px;\r\n      border-radius: 3px;\r\n      z-index: 9;\r\n      box-sizing: border-box;\r\n      line-height: normal;\r\n\r\n      &::before {\r\n        content: 'CapsLock';\r\n      }\r\n    `;\r\n  },\r\n  iconWrapper() {\r\n    return css`\r\n      display: flex;\r\n      align-items: center;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["PasswordInput.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","css","toggleVisibility","t","passwordInputVisibilityIconColor","passwordInputVisibilityIconOpacity","passwordInputVisibilityIconHoverColor","passwordInputVisibilityIconHoverOpacity","capsLockDetector","iconWrapper","eyeWrapperSmall","inputIconSizeSmall","eyeWrapperMedium","inputIconSizeMedium","eyeWrapperLarge","inputIconSizeLarge","icon"],"mappings":";;;AAGA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;;;;;;;;AAUD,OAZU;AAaXC,MAAAA,gBAbW,4BAaMC,CAbN,EAagB;AACzB,eAAOJ,OAAO,CAACE,GAAf;AACWE,QAAAA,CAAC,CAACC,gCADb;;AAGaD,QAAAA,CAAC,CAACE,kCAHf;;;;AAOaF,QAAAA,CAAC,CAACG,qCAPf;AAQeH,QAAAA,CAAC,CAACI,uCARjB;;;AAWD,OAzBU;AA0BXC,MAAAA,gBA1BW,8BA0BQ;AACjB,eAAOT,OAAO,CAACE,GAAf;;;;;;;;;;;;;;;;;AAiBD,OA5CU;AA6CXQ,MAAAA,WA7CW,yBA6CG;AACZ,eAAOV,OAAO,CAACE,GAAf;;;;;AAKD,OAnDU;;AAqDXS,MAAAA,eArDW,2BAqDKP,CArDL,EAqDe;AACxB,eAAOJ,OAAO,CAACE,GAAf;AACeE,QAAAA,CAAC,CAACQ,kBADjB;;AAGD,OAzDU;;AA2DXC,MAAAA,gBA3DW,4BA2DMT,CA3DN,EA2DgB;AACzB,eAAOJ,OAAO,CAACE,GAAf;AACeE,QAAAA,CAAC,CAACU,mBADjB;;AAGD,OA/DU;;AAiEXC,MAAAA,eAjEW,2BAiEKX,CAjEL,EAiEe;AACxB,eAAOJ,OAAO,CAACE,GAAf;AACeE,QAAAA,CAAC,CAACY,kBADjB;;AAGD,OArEU;AAsEXC,MAAAA,IAtEW,kBAsEJ;AACL,eAAOjB,OAAO,CAACE,GAAf;;;;;;;;AAQD,OA/EU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        position: relative;\n        display: inline-block;\n        line-height: normal;\n\n        input::-ms-clear,\n        input::-ms-reveal {\n          display: none;\n        }\n      `;\n    },\n    toggleVisibility(t: Theme) {\n      return emotion.css`\n        color: ${t.passwordInputVisibilityIconColor};\n        cursor: pointer;\n        opacity: ${t.passwordInputVisibilityIconOpacity};\n        user-select: none;\n\n        &:hover {\n          color: ${t.passwordInputVisibilityIconHoverColor};\n          opacity: ${t.passwordInputVisibilityIconHoverOpacity};\n        }\n      `;\n    },\n    capsLockDetector() {\n      return emotion.css`\n        display: inline-block;\n        font-size: 9px;\n        margin-right: 8px;\n        color: #fff;\n        cursor: default;\n        background: #999;\n        padding: 2px 5px;\n        border-radius: 3px;\n        z-index: 9;\n        box-sizing: border-box;\n        line-height: normal;\n\n        &::before {\n          content: 'CapsLock';\n        }\n      `;\n    },\n    iconWrapper() {\n      return emotion.css`\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n      `;\n    },\n\n    eyeWrapperSmall(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeSmall};\n      `;\n    },\n\n    eyeWrapperMedium(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeMedium};\n      `;\n    },\n\n    eyeWrapperLarge(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeLarge};\n      `;\n    },\n    icon() {\n      return emotion.css`\n        padding: 0;\n        border: none;\n        font: inherit;\n        color: inherit;\n        background-color: transparent;\n        cursor: pointer;\n      `;\n    },\n  });\n"]}

package/components/PasswordInput/PasswordInput.styles.d.ts

@@ -1,6 +1,12 @@
-export declare const jsStyles: {
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
     root(): string;
-    toggleVisibility(): string;
+    toggleVisibility(t: Theme): string;
     capsLockDetector(): string;
     iconWrapper(): string;
+    eyeWrapperSmall(t: Theme): string;
+    eyeWrapperMedium(t: Theme): string;
+    eyeWrapperLarge(t: Theme): string;
+    icon(): string;
 };

package/components/PasswordInput/PasswordInputIcon/PasswordInputIcon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { EyeClosedIcon, EyeOpenedIcon } from "../../../internal/icons/16px";
+import { ClosedIcon } from "../ClosedIcon";
+import { OpenedIcon } from "../OpenedIcon";
+export var PasswordInputIcon = function PasswordInputIcon(_ref) {
+  var visible = _ref.visible,
+      size = _ref.size,
+      _ref$isTheme = _ref.isTheme2022,
+      isTheme2022 = _ref$isTheme === void 0 ? false : _ref$isTheme;
+
+  if (visible) {
+    return isTheme2022 ? /*#__PURE__*/React.createElement(ClosedIcon, {
+      size: size
+    }) : /*#__PURE__*/React.createElement(EyeClosedIcon, {
+      size: 14
+    });
+  }
+
+  return isTheme2022 ? /*#__PURE__*/React.createElement(OpenedIcon, {
+    size: size
+  }) : /*#__PURE__*/React.createElement(EyeOpenedIcon, {
+    size: 14
+  });
+};

package/components/PasswordInput/PasswordInputIcon/PasswordInputIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PasswordInputIcon.tsx"],"names":["React","EyeClosedIcon","EyeOpenedIcon","ClosedIcon","OpenedIcon","PasswordInputIcon","visible","size","isTheme2022"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,aAAT,EAAwBC,aAAxB,QAA6C,2BAA7C;;;AAGA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,UAAT,QAA2B,cAA3B;;;;;;;AAOA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,OAAoE,KAAjEC,OAAiE,QAAjEA,OAAiE,CAAxDC,IAAwD,QAAxDA,IAAwD,qBAAlDC,WAAkD,CAAlDA,WAAkD,6BAApC,KAAoC;AACnG,MAAIF,OAAJ,EAAa;AACX,WAAOE,WAAW,gBAAG,oBAAC,UAAD,IAAY,IAAI,EAAED,IAAlB,GAAH,gBAAgC,oBAAC,aAAD,IAAe,IAAI,EAAE,EAArB,GAAlD;AACD;;AAED,SAAOC,WAAW,gBAAG,oBAAC,UAAD,IAAY,IAAI,EAAED,IAAlB,GAAH,gBAAgC,oBAAC,aAAD,IAAe,IAAI,EAAE,EAArB,GAAlD;AACD,CANM","sourcesContent":["import React from 'react';\n\nimport { EyeClosedIcon, EyeOpenedIcon } from '../../internal/icons/16px';\n\nimport { PasswordInputProps, PasswordInputState } from './PasswordInput';\nimport { ClosedIcon } from './ClosedIcon';\nimport { OpenedIcon } from './OpenedIcon';\n\nexport type PasswordInputIconProps = Pick<PasswordInputState, 'visible'> &\n  Pick<PasswordInputProps, 'size'> & {\n    isTheme2022: boolean;\n  };\n\nexport const PasswordInputIcon = ({ visible, size, isTheme2022 = false }: PasswordInputIconProps) => {\n  if (visible) {\n    return isTheme2022 ? <ClosedIcon size={size} /> : <EyeClosedIcon size={14} />;\n  }\n\n  return isTheme2022 ? <OpenedIcon size={size} /> : <EyeOpenedIcon size={14} />;\n};\n"]}

package/components/PasswordInput/PasswordInputIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/PasswordInput/PasswordInputIcon.js",
+  "module": "PasswordInputIcon",
+  "types": "../PasswordInputIcon.d.ts",
+  "sideEffects": false
+}

package/components/PasswordInput/PasswordInputIcon.d.ts

@@ -0,0 +1,5 @@
+import { PasswordInputProps, PasswordInputState } from './PasswordInput';
+export declare type PasswordInputIconProps = Pick<PasswordInputState, 'visible'> & Pick<PasswordInputProps, 'size'> & {
+    isTheme2022: boolean;
+};
+export declare const PasswordInputIcon: ({ visible, size, isTheme2022 }: PasswordInputIconProps) => JSX.Element;

package/components/PasswordInput/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from './PasswordInput';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from './PasswordInput';\n"]}

package/components/PasswordInput/locale/index/index.js

@@ -0,0 +1,8 @@
+import { LocaleHelper } from "../../../../lib/locale/LocaleHelper";
+import { componentsLocales as en_GB } from "../locales/en";
+import { componentsLocales as ru_RU } from "../locales/ru";
+export * from "../types";
+export var PasswordInputLocaleHelper = new LocaleHelper({
+  ru_RU: ru_RU,
+  en_GB: en_GB
+});

package/components/PasswordInput/locale/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","PasswordInputLocaleHelper"],"mappings":"AAAA,SAASA,YAAT,QAA6B,kCAA7B;;AAEA,SAASC,iBAAiB,IAAIC,KAA9B,QAA2C,cAA3C;AACA,SAASD,iBAAiB,IAAIE,KAA9B,QAA2C,cAA3C;;;AAGA,cAAc,SAAd;;AAEA,OAAO,IAAMC,yBAAyB,GAAG,IAAIJ,YAAJ,CAAsC;AAC7EG,EAAAA,KAAK,EAALA,KAD6E;AAE7ED,EAAAA,KAAK,EAALA,KAF6E,EAAtC,CAAlC","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { PasswordInputLocale } from './types';\n\nexport * from './types';\n\nexport const PasswordInputLocaleHelper = new LocaleHelper<PasswordInputLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/components/PasswordInput/locale/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../cjs/components/PasswordInput/locale/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/PasswordInput/locale/index.d.ts

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import { PasswordInputLocale } from './types';
+export * from './types';
+export declare const PasswordInputLocaleHelper: LocaleHelper<PasswordInputLocale>;

package/components/PasswordInput/locale/locales/en/en.js

@@ -0,0 +1,4 @@
+export var componentsLocales = {
+  eyeOpenedAriaLabel: 'Hide password symbols',
+  eyeClosedAriaLabel: 'Show password symbols'
+};

package/components/PasswordInput/locale/locales/en/en.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","eyeOpenedAriaLabel","eyeClosedAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAAsC,GAAG;AACpDC,EAAAA,kBAAkB,EAAE,uBADgC;AAEpDC,EAAAA,kBAAkB,EAAE,uBAFgC,EAA/C","sourcesContent":["import { PasswordInputLocale } from '../types';\n\nexport const componentsLocales: PasswordInputLocale = {\n  eyeOpenedAriaLabel: 'Hide password symbols',\n  eyeClosedAriaLabel: 'Show password symbols',\n};\n"]}