@roo-ui/components/dist/esm/PasswordInput/PasswordInput.js

import _styled from "@emotion/styled-base";

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

import React, { Component } from 'react';
import { themeGet } from 'styled-system';
import { rem } from 'polished';
import { Input, Icon, NakedButton } from '..';

var StyledInput =
/*#__PURE__*/
_styled(Input, {
  target: "e14umbg50",
  label: "StyledInput"
})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9QYXNzd29yZElucHV0L1Bhc3N3b3JkSW5wdXQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTWlDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9QYXNzd29yZElucHV0L1Bhc3N3b3JkSW5wdXQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdGhlbWVHZXQgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcbmltcG9ydCB7IElucHV0LCBJY29uLCBOYWtlZEJ1dHRvbiB9IGZyb20gJy4uJztcblxuY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQoSW5wdXQpYGA7XG5cblN0eWxlZElucHV0LnByb3BUeXBlcyA9IElucHV0LnByb3BUeXBlcztcblN0eWxlZElucHV0LmRpc3BsYXlOYW1lID0gJ1Bhc3N3b3JkSW5wdXRfX0lucHV0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmNvbnN0IFRvZ2dsZSA9IHN0eWxlZChOYWtlZEJ1dHRvbilgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICB0b3A6IDA7XG4gIGxlZnQ6IGNhbGMoMTAwJSAtICR7cmVtKCc4MHB4Jyl9KTtcbiAgZm9udC1zaXplOiAke3RoZW1lR2V0KCdmb250U2l6ZXMuc20nKX07XG4gIGNvbG9yOiAke3RoZW1lR2V0KCdjb2xvcnMuZ3JleXMuc3RlZWwnKX07XG4gIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuXG4gICY6Zm9jdXMge1xuICAgIGNvbG9yOiAke3RoZW1lR2V0KCdjb2xvcnMuZ3JleXMuY2hhcmNvYWwnKX07XG4gICAgb3V0bGluZTogbm9uZTtcbiAgfVxuYDtcblRvZ2dsZS5kaXNwbGF5TmFtZSA9ICdQYXNzd29yZElucHV0X19Ub2dnbGUnO1xuXG5jbGFzcyBCYXNlIGV4dGVuZHMgQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJvcHMpIHtcbiAgICBzdXBlcihwcm9wcyk7XG5cbiAgICB0aGlzLnN0YXRlID0ge1xuICAgICAgdmlzaWJsZTogZmFsc2UsXG4gICAgfTtcblxuICAgIHRoaXMudG9nZ2xlVmlzaWJpbGl0eSA9IHRoaXMudG9nZ2xlVmlzaWJpbGl0eS5iaW5kKHRoaXMpO1xuICB9XG5cbiAgdG9nZ2xlVmlzaWJpbGl0eSgpIHtcbiAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgIHZpc2libGU6ICF0aGlzLnN0YXRlLnZpc2libGUsXG4gICAgfSk7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxXcmFwcGVyPlxuICAgICAgICA8U3R5bGVkSW5wdXQgey4uLnRoaXMucHJvcHN9IHR5cGU9e3RoaXMuc3RhdGUudmlzaWJsZSA/ICd0ZXh0JyA6ICdwYXNzd29yZCd9IC8+XG5cbiAgICAgICAgPFRvZ2dsZSBvbkNsaWNrPXt0aGlzLnRvZ2dsZVZpc2liaWxpdHl9PlxuICAgICAgICAgIDxJY29uIG5hbWU9e3RoaXMuc3RhdGUudmlzaWJsZSA/ICd2aXNpYmlsaXR5T2ZmJyA6ICd2aXNpYmlsaXR5J30gc2l6ZT17MjJ9IG1yPXsyfSAvPlxuXG4gICAgICAgICAge3RoaXMuc3RhdGUudmlzaWJsZSA/ICdIaWRlJyA6ICdTaG93J31cbiAgICAgICAgPC9Ub2dnbGU+XG4gICAgICA8L1dyYXBwZXI+XG4gICAgKTtcbiAgfVxufVxuXG5jb25zdCBQYXNzd29yZElucHV0ID0gSW5wdXQud2l0aENvbXBvbmVudChCYXNlKTtcblxuUGFzc3dvcmRJbnB1dC5kZWZhdWx0UHJvcHMgPSB7XG4gIHByOiByZW0oJzkwcHgnKSxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFBhc3N3b3JkSW5wdXQ7XG4iXX0= */");

StyledInput.propTypes = Input.propTypes;
StyledInput.displayName = 'PasswordInput__Input';

var Wrapper = _styled("div", {
  target: "e14umbg51",
  label: "Wrapper"
})(process.env.NODE_ENV === "production" ? {
  name: "79elbk",
  styles: "position:relative;"
} : {
  name: "79elbk",
  styles: "position:relative;",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9QYXNzd29yZElucHV0L1Bhc3N3b3JkSW5wdXQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVzBCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9QYXNzd29yZElucHV0L1Bhc3N3b3JkSW5wdXQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdGhlbWVHZXQgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcbmltcG9ydCB7IElucHV0LCBJY29uLCBOYWtlZEJ1dHRvbiB9IGZyb20gJy4uJztcblxuY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQoSW5wdXQpYGA7XG5cblN0eWxlZElucHV0LnByb3BUeXBlcyA9IElucHV0LnByb3BUeXBlcztcblN0eWxlZElucHV0LmRpc3BsYXlOYW1lID0gJ1Bhc3N3b3JkSW5wdXRfX0lucHV0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmNvbnN0IFRvZ2dsZSA9IHN0eWxlZChOYWtlZEJ1dHRvbilgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICB0b3A6IDA7XG4gIGxlZnQ6IGNhbGMoMTAwJSAtICR7cmVtKCc4MHB4Jyl9KTtcbiAgZm9udC1zaXplOiAke3RoZW1lR2V0KCdmb250U2l6ZXMuc20nKX07XG4gIGNvbG9yOiAke3RoZW1lR2V0KCdjb2xvcnMuZ3JleXMuc3RlZWwnKX07XG4gIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuXG4gICY6Zm9jdXMge1xuICAgIGNvbG9yOiAke3RoZW1lR2V0KCdjb2xvcnMuZ3JleXMuY2hhcmNvYWwnKX07XG4gICAgb3V0bGluZTogbm9uZTtcbiAgfVxuYDtcblRvZ2dsZS5kaXNwbGF5TmFtZSA9ICdQYXNzd29yZElucHV0X19Ub2dnbGUnO1xuXG5jbGFzcyBCYXNlIGV4dGVuZHMgQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJvcHMpIHtcbiAgICBzdXBlcihwcm9wcyk7XG5cbiAgICB0aGlzLnN0YXRlID0ge1xuICAgICAgdmlzaWJsZTogZmFsc2UsXG4gICAgfTtcblxuICAgIHRoaXMudG9nZ2xlVmlzaWJpbGl0eSA9IHRoaXMudG9nZ2xlVmlzaWJpbGl0eS5iaW5kKHRoaXMpO1xuICB9XG5cbiAgdG9nZ2xlVmlzaWJpbGl0eSgpIHtcbiAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgIHZpc2libGU6ICF0aGlzLnN0YXRlLnZpc2libGUsXG4gICAgfSk7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxXcmFwcGVyPlxuICAgICAgICA8U3R5bGVkSW5wdXQgey4uLnRoaXMucHJvcHN9IHR5cGU9e3RoaXMuc3RhdGUudmlzaWJsZSA/ICd0ZXh0JyA6ICdwYXNzd29yZCd9IC8+XG5cbiAgICAgICAgPFRvZ2dsZSBvbkNsaWNrPXt0aGlzLnRvZ2dsZVZpc2liaWxpdHl9PlxuICAgICAgICAgIDxJY29uIG5hbWU9e3RoaXMuc3RhdGUudmlzaWJsZSA/ICd2aXNpYmlsaXR5T2ZmJyA6ICd2aXNpYmlsaXR5J30gc2l6ZT17MjJ9IG1yPXsyfSAvPlxuXG4gICAgICAgICAge3RoaXMuc3RhdGUudmlzaWJsZSA/ICdIaWRlJyA6ICdTaG93J31cbiAgICAgICAgPC9Ub2dnbGU+XG4gICAgICA8L1dyYXBwZXI+XG4gICAgKTtcbiAgfVxufVxuXG5jb25zdCBQYXNzd29yZElucHV0ID0gSW5wdXQud2l0aENvbXBvbmVudChCYXNlKTtcblxuUGFzc3dvcmRJbnB1dC5kZWZhdWx0UHJvcHMgPSB7XG4gIHByOiByZW0oJzkwcHgnKSxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFBhc3N3b3JkSW5wdXQ7XG4iXX0= */"
});

var Toggle =
/*#__PURE__*/
_styled(NakedButton, {
  target: "e14umbg52",
  label: "Toggle"
})("position:absolute;height:100%;top:0;left:calc(100% - ", rem('80px'), ");font-size:", themeGet('fontSizes.sm'), ";color:", themeGet('colors.greys.steel'), ";text-decoration:underline;&:focus{color:", themeGet('colors.greys.charcoal'), ";outline:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9QYXNzd29yZElucHV0L1Bhc3N3b3JkSW5wdXQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZWtDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9QYXNzd29yZElucHV0L1Bhc3N3b3JkSW5wdXQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdGhlbWVHZXQgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcbmltcG9ydCB7IElucHV0LCBJY29uLCBOYWtlZEJ1dHRvbiB9IGZyb20gJy4uJztcblxuY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQoSW5wdXQpYGA7XG5cblN0eWxlZElucHV0LnByb3BUeXBlcyA9IElucHV0LnByb3BUeXBlcztcblN0eWxlZElucHV0LmRpc3BsYXlOYW1lID0gJ1Bhc3N3b3JkSW5wdXRfX0lucHV0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmNvbnN0IFRvZ2dsZSA9IHN0eWxlZChOYWtlZEJ1dHRvbilgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICB0b3A6IDA7XG4gIGxlZnQ6IGNhbGMoMTAwJSAtICR7cmVtKCc4MHB4Jyl9KTtcbiAgZm9udC1zaXplOiAke3RoZW1lR2V0KCdmb250U2l6ZXMuc20nKX07XG4gIGNvbG9yOiAke3RoZW1lR2V0KCdjb2xvcnMuZ3JleXMuc3RlZWwnKX07XG4gIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuXG4gICY6Zm9jdXMge1xuICAgIGNvbG9yOiAke3RoZW1lR2V0KCdjb2xvcnMuZ3JleXMuY2hhcmNvYWwnKX07XG4gICAgb3V0bGluZTogbm9uZTtcbiAgfVxuYDtcblRvZ2dsZS5kaXNwbGF5TmFtZSA9ICdQYXNzd29yZElucHV0X19Ub2dnbGUnO1xuXG5jbGFzcyBCYXNlIGV4dGVuZHMgQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJvcHMpIHtcbiAgICBzdXBlcihwcm9wcyk7XG5cbiAgICB0aGlzLnN0YXRlID0ge1xuICAgICAgdmlzaWJsZTogZmFsc2UsXG4gICAgfTtcblxuICAgIHRoaXMudG9nZ2xlVmlzaWJpbGl0eSA9IHRoaXMudG9nZ2xlVmlzaWJpbGl0eS5iaW5kKHRoaXMpO1xuICB9XG5cbiAgdG9nZ2xlVmlzaWJpbGl0eSgpIHtcbiAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgIHZpc2libGU6ICF0aGlzLnN0YXRlLnZpc2libGUsXG4gICAgfSk7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxXcmFwcGVyPlxuICAgICAgICA8U3R5bGVkSW5wdXQgey4uLnRoaXMucHJvcHN9IHR5cGU9e3RoaXMuc3RhdGUudmlzaWJsZSA/ICd0ZXh0JyA6ICdwYXNzd29yZCd9IC8+XG5cbiAgICAgICAgPFRvZ2dsZSBvbkNsaWNrPXt0aGlzLnRvZ2dsZVZpc2liaWxpdHl9PlxuICAgICAgICAgIDxJY29uIG5hbWU9e3RoaXMuc3RhdGUudmlzaWJsZSA/ICd2aXNpYmlsaXR5T2ZmJyA6ICd2aXNpYmlsaXR5J30gc2l6ZT17MjJ9IG1yPXsyfSAvPlxuXG4gICAgICAgICAge3RoaXMuc3RhdGUudmlzaWJsZSA/ICdIaWRlJyA6ICdTaG93J31cbiAgICAgICAgPC9Ub2dnbGU+XG4gICAgICA8L1dyYXBwZXI+XG4gICAgKTtcbiAgfVxufVxuXG5jb25zdCBQYXNzd29yZElucHV0ID0gSW5wdXQud2l0aENvbXBvbmVudChCYXNlKTtcblxuUGFzc3dvcmRJbnB1dC5kZWZhdWx0UHJvcHMgPSB7XG4gIHByOiByZW0oJzkwcHgnKSxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFBhc3N3b3JkSW5wdXQ7XG4iXX0= */"));

Toggle.displayName = 'PasswordInput__Toggle';

var Base =
/*#__PURE__*/
function (_Component) {
  _inherits(Base, _Component);

  function Base(props) {
    var _this;

    _classCallCheck(this, Base);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Base).call(this, props));
    _this.state = {
      visible: false
    };
    _this.toggleVisibility = _this.toggleVisibility.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(Base, [{
    key: "toggleVisibility",
    value: function toggleVisibility() {
      this.setState({
        visible: !this.state.visible
      });
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(Wrapper, null, React.createElement(StyledInput, _extends({}, this.props, {
        type: this.state.visible ? 'text' : 'password'
      })), React.createElement(Toggle, {
        onClick: this.toggleVisibility
      }, React.createElement(Icon, {
        name: this.state.visible ? 'visibilityOff' : 'visibility',
        size: 22,
        mr: 2
      }), this.state.visible ? 'Hide' : 'Show'));
    }
  }]);

  return Base;
}(Component);

var PasswordInput = Input.withComponent(Base, {
  target: "e14umbg53",
  label: "PasswordInput"
});
PasswordInput.defaultProps = {
  pr: rem('90px')
};
export default PasswordInput;