@lanaco/lnc-react-ui/dist/PasswordInput.cjs

React component library

"use strict";const a=require("react/jsx-runtime"),s=require("react"),n=require("./index-BPVoEhTF.cjs"),L=require("./index-DaiUAQVF.cjs"),D=require("./Icon.cjs"),h=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),r=require("./utils-NZLCh-J5.cjs"),A=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),G=h.newStyled.div`
  display: flex;
  align-items: center;

  min-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
  background-color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
  border: 1px solid
    ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
  border-radius: ${e=>r.getBorderRadiusValueWithUnits(e.theme,"regular")};

  ${e=>e.focused&&e.readOnly!==!0?r.getOutlineCss(e.theme):""}
  ${e=>e.disabled===!0?r.getDisabledStateCss(e.theme):""}
`,S=h.newStyled.span`
  padding: 0 12px;
  color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
`,H=h.newStyled(S)``,J=h.newStyled(S)`
  cursor: pointer;
`,K=h.newStyled.input`
  background: none;
  border: none;
  outline: none;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  width: 100%;

  ${e=>r.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
  min-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
  color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
  caret-color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","caret")};
  padding-right: ${e=>e.suffix?"0":"0.75rem"};
  padding-left: ${e=>e.prefix?"0":"0.75rem"};

  &::placeholder {
    color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","placeholder")};
  }

  &:read-only {
    cursor: default;
  }

  &:disabled {
    ${e=>r.getDisabledStateCss(e.theme)}
    background: none;
  }
`,I=s.forwardRef((e,m)=>{const{wrapperRef:V,disabled:T,readOnly:$,debounceTime:z=0,placeholder:R,prefix:b,suffix:f,value:u,defaultValue:k,onChange:i,onBlur:p,onFocus:x,className:v="",style:j={},size:C="small",color:c="primary",...q}=e,o=s.useRef(),d=A.useTheme(),[O,P]=s.useState(u||k||"");s.useEffect(()=>{u!=null&&P(u)},[u]);const[y,W]=s.useState(!0),[g,w]=s.useState(!1);s.useEffect(()=>{var l;const t=((l=o==null?void 0:o.current)==null?void 0:l.value)||"";o.current.selectionStart=t!=null&&t.length?t.length:0,o.current.selectionEnd=t!=null&&t.length?t.length:0},[y]),s.useEffect(()=>{m!=null&&(m.current=o.current)},[m,o]);const E=s.useCallback(L.debounce((t,l)=>U(t,l),z),[i]),U=(t,l)=>{i&&(i==null||i(t,l))},F=t=>{P(t.target.value),E(t,t.target.value)},N=()=>{W(!y),o.current.focus()},_=t=>{w(!0),x==null||x(t)},B=t=>{w(!1),p==null||p(t)};return a.jsxs(G,{ref:V,style:j,className:v,theme:d,color:c,size:C,focused:g,disabled:T,readOnly:$,children:[b&&a.jsx(S,{theme:d,color:c,focused:g,className:"lnc-input-prefix",children:b}),a.jsx(K,{ref:o,type:y?"password":"text",theme:d,color:c,size:C,placeholder:R,prefix:b,suffix:f,disabled:T,readOnly:$,focused:g,onFocus:_,onBlur:B,onChange:F,value:O,...q}),a.jsx(J,{theme:d,color:c,focused:g,onClick:N,children:a.jsx(D,{icon:y?"eye-slash":"eye"})}),f&&a.jsx(H,{theme:d,color:c,focused:g,className:"lnc-input-suffix",children:f})]})});I.propTypes={id:n.PropTypes.string,value:n.PropTypes.string,defaultValue:n.PropTypes.string,disabled:n.PropTypes.bool,readOnly:n.PropTypes.bool,debounceTime:n.PropTypes.number,placeholder:n.PropTypes.string,tabIndex:n.PropTypes.number,onChange:n.PropTypes.func,onBlur:n.PropTypes.func,onFocus:n.PropTypes.func,className:n.PropTypes.string,style:n.PropTypes.object,size:n.PropTypes.oneOf(["small","medium","large"]),color:n.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=I;