@foxford/ui 2.47.0 → 2.48.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/assets/calendar-fill.svg +1 -0
  2. package/assets/circle-user-fill.svg +1 -1
  3. package/assets/copy-fill.svg +1 -0
  4. package/assets/house-fill.svg +1 -1
  5. package/assets/message-circle-chat-fill.svg +1 -0
  6. package/assets/rocket-fill.svg +1 -0
  7. package/assets/student-fill.svg +1 -0
  8. package/assets/users-fill.svg +1 -0
  9. package/components/Alert/Alert.js +1 -1
  10. package/components/Alert/Alert.mjs +1 -1
  11. package/components/Button/style.js +1 -1
  12. package/components/Button/style.mjs +1 -1
  13. package/components/Dropdown/Dropdown.js +1 -1
  14. package/components/Dropdown/Dropdown.js.map +1 -1
  15. package/components/Dropdown/Dropdown.mjs +1 -1
  16. package/components/Dropdown/Dropdown.mjs.map +1 -1
  17. package/components/Dropdown/style.js +1 -1
  18. package/components/Dropdown/style.js.map +1 -1
  19. package/components/Dropdown/style.mjs +1 -1
  20. package/components/Dropdown/style.mjs.map +1 -1
  21. package/components/FormInput/FormInput.js +2 -0
  22. package/components/FormInput/FormInput.js.map +1 -0
  23. package/components/FormInput/FormInput.mjs +2 -0
  24. package/components/FormInput/FormInput.mjs.map +1 -0
  25. package/components/FormInput/style.js +2 -0
  26. package/components/FormInput/style.js.map +1 -0
  27. package/components/FormInput/style.mjs +2 -0
  28. package/components/FormInput/style.mjs.map +1 -0
  29. package/components/FormInputLabel/FormInputLabel.js +1 -1
  30. package/components/FormInputLabel/FormInputLabel.js.map +1 -1
  31. package/components/FormInputLabel/FormInputLabel.mjs +1 -1
  32. package/components/FormInputLabel/FormInputLabel.mjs.map +1 -1
  33. package/components/FormInputLabel/constants.js +1 -1
  34. package/components/FormInputLabel/constants.js.map +1 -1
  35. package/components/FormInputLabel/constants.mjs +1 -1
  36. package/components/FormInputLabel/constants.mjs.map +1 -1
  37. package/components/FormInputLabel/style.js +1 -1
  38. package/components/FormInputLabel/style.js.map +1 -1
  39. package/components/FormInputLabel/style.mjs +1 -1
  40. package/components/FormInputLabel/style.mjs.map +1 -1
  41. package/components/Icon/Icon.js.map +1 -1
  42. package/components/Icon/Icon.mjs.map +1 -1
  43. package/components/Icon/list/icon-pack.js +1 -1
  44. package/components/Icon/list/icon-pack.mjs +1 -1
  45. package/components/Icon/style.js +1 -1
  46. package/components/Icon/style.js.map +1 -1
  47. package/components/Icon/style.mjs +1 -1
  48. package/components/Icon/style.mjs.map +1 -1
  49. package/components/Input/Input.js +1 -1
  50. package/components/Input/Input.js.map +1 -1
  51. package/components/Input/Input.mjs +1 -1
  52. package/components/Input/Input.mjs.map +1 -1
  53. package/components/Input/constants.js +2 -0
  54. package/components/Input/constants.js.map +1 -0
  55. package/components/Input/constants.mjs +2 -0
  56. package/components/Input/constants.mjs.map +1 -0
  57. package/components/Input/style.js +1 -1
  58. package/components/Input/style.js.map +1 -1
  59. package/components/Input/style.mjs +1 -1
  60. package/components/Input/style.mjs.map +1 -1
  61. package/dts/index.d.ts +92 -71
  62. package/external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/components.json.js +2 -0
  63. package/external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/components.json.mjs +2 -0
  64. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/CheckCircleFill/index.js.map +1 -1
  65. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/CheckCircleFill/index.mjs.map +1 -1
  66. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/ChevronDown/index.js.map +1 -1
  67. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/ChevronDown/index.mjs.map +1 -1
  68. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/Close/index.js.map +1 -1
  69. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/Close/index.mjs.map +1 -1
  70. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/CloseCirlceFill/index.js.map +1 -1
  71. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/CloseCirlceFill/index.mjs.map +1 -1
  72. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/LoaderFill/index.js.map +1 -1
  73. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/LoaderFill/index.mjs.map +1 -1
  74. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/NotifFill/index.js.map +1 -1
  75. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/NotifFill/index.mjs.map +1 -1
  76. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/WarningTriangleFill/index.js.map +1 -1
  77. package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/WarningTriangleFill/index.mjs.map +1 -1
  78. package/package.json +1 -1
  79. package/external/.pnpm/@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/components.json.js +0 -2
  80. package/external/.pnpm/@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/components.json.mjs +0 -2
  81. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/components.json.js.map +0 -0
  82. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/components.json.mjs.map +0 -0
  83. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/CheckCircleFill/index.js +0 -0
  84. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/CheckCircleFill/index.mjs +0 -0
  85. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/ChevronDown/index.js +0 -0
  86. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/ChevronDown/index.mjs +0 -0
  87. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/Close/index.js +0 -0
  88. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/Close/index.mjs +0 -0
  89. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/CloseCirlceFill/index.js +0 -0
  90. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/CloseCirlceFill/index.mjs +0 -0
  91. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/LoaderFill/index.js +0 -0
  92. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/LoaderFill/index.mjs +0 -0
  93. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/NotifFill/index.js +0 -0
  94. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/NotifFill/index.mjs +0 -0
  95. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/WarningTriangleFill/index.js +0 -0
  96. /package/external/.pnpm/{@foxford_icon-pack@0.8.0_react-dom@18.3.1_react@18.3.1__react@18.3.1 → @foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1}/node_modules/@foxford/icon-pack/icons/WarningTriangleFill/index.mjs +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/Icon/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledIconProps } from './types'\n\nconst shouldForwardIconProp = createShouldForwardProp((propKey) => !['vAlign'].includes(propKey))\n\nexport const Root = styled.span.withConfig<StyledIconProps>({\n shouldForwardProp: shouldForwardIconProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n color: ${props.color ? getColor(props.color, props) : 'inherit'};\n vertical-align: ${props.vAlign ? props.vAlign : 'baseline'};\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n fill: currentcolor;\n }\n `}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardIconProp","createShouldForwardProp","propKey","includes","Root","styled","span","withConfig","shouldForwardProp","displayName","componentId","props","color","getColor","vAlign","responsiveSize"],"mappings":"kNAMA,MAAMA,sBAAwBC,yBAAyBC,IAAa,CAAC,UAAUC,SAASD,KAEjF,MAAME,KAAOC,OAAOC,KAAKC,WAA4B,CAC1DC,kBAAmBR,wBACnBO,WAAA,CAAAE,YAAA,aAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,KACGM,GAAU,wLAQFA,EAAMC,MAAQC,SAASF,EAAMC,MAAOD,GAAS,mCACpCA,EAAMG,OAASH,EAAMG,OAAS,oIAShDC"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/Icon/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledIconProps } from './types'\n\nconst shouldForwardIconProp = createShouldForwardProp((propKey) => !['vAlign'].includes(propKey))\n\nexport const Root = styled.span.withConfig<StyledIconProps>({\n shouldForwardProp: shouldForwardIconProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n color: ${props.color ? getColor(props.color, props) : 'inherit'};\n vertical-align: ${props.vAlign ? props.vAlign : 'baseline'};\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n fill: currentcolor;\n }\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardIconProp","createShouldForwardProp","propKey","includes","Root","styled","span","withConfig","shouldForwardProp","displayName","componentId","props","color","getColor","vAlign","responsiveSize","responsiveMargin"],"mappings":"mRAOA,MAAMA,sBAAwBC,yBAAyBC,IAAa,CAAC,UAAUC,SAASD,KAEjF,MAAME,KAAOC,OAAOC,KAAKC,WAA4B,CAC1DC,kBAAmBR,wBACnBO,WAAA,CAAAE,YAAA,aAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,KACGM,GAAU,wLAQFA,EAAMC,MAAQC,SAASF,EAAMC,MAAOD,GAAS,mCACpCA,EAAMG,OAASH,EAAMG,OAAS,oIAShDC,eACAC"}
@@ -1,2 +1,2 @@
1
- 'use strict';var React=require('react');var styled=require('styled-components');var withMergedProps=require('../../hocs/withMergedProps.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Input_Phone=require('../Input.Phone/Input.Phone.js');var constants=require('../FormInputLabel/constants.js');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var Icon=require('../Icon/Icon.js');var Spacer=require('../Spacer/Spacer.js');const Input=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const r=styled.useTheme();const{size:n="m",mask:i="",rounded:o=!0,color:a="mineShaft",placeholderColor:s="silver",width:c=r.defaultInputControlsWidth,type:u="text",labelPosition:m="dynamic",textProps:l={},iconProps:p={},controls:g={},preset:d,className:h,style:f,sizeXXS:X,sizeXS:S,sizeS:y,sizeM:b,sizeL:L,sizeXL:v,sizeUnits:I,sizes:R,margin:x,marginXXS:z,marginXS:P,marginS:$,marginM:T,marginL:q,marginXL:w,marginTop:C,marginTopXXS:M,marginTopXS:j,marginTopS:B,marginTopM:F,marginTopL:k,marginTopXL:A,marginRight:E,marginRightXXS:N,marginRightXS:V,marginRightS:O,marginRightM:U,marginRightL:_,marginRightXL:D,marginBottom:H,marginBottomXXS:W,marginBottomXS:Z,marginBottomS:G,marginBottomM:J,marginBottomL:K,marginBottomXL:Q,marginLeft:Y,marginLeftXXS:ee,marginLeftXS:te,marginLeftS:re,marginLeftM:ne,marginLeftL:ie,marginLeftXL:oe,palette:ae,widthXXS:se,widthXS:ce,widthS:ue,widthM:me,widthL:le,widthXL:pe,error:ge,success:de,label:he,icon:fe,text:Xe,primary:Se,secondary:ye,onColored:be,fluid:Le,disabled:ve,inline:Ie,inputRef:Re,...xe}=e;const{icon:ze,iconProps:Pe={},buttonProps:$e={}}=g.additional??{};const{icon:Te,iconProps:qe={},buttonProps:we=[]}=g.number??{};const[Ce,Me]=Array.isArray(Te)?Te:[Te];const je=(Array.isArray(we)?we[0]:we)??{};const Be=(Array.isArray(we)?we[1]:{})??{};const Fe=React.useRef(null);React.useImperativeHandle(t,(()=>Fe.current),[]);const ke=typeof xe.value=='string'||typeof xe.value=='number'||typeof xe.defaultValue=='string'||typeof xe.defaultValue=='number';const[Ae,Ee]=React.useState(ke);const[Ne,Ve]=React.useState(ke);const[Oe,Ue]=React.useState((()=>{if(u!=='number'||xe.min===void 0)return!1;const{value:e=1/0,defaultValue:t=1/0}=xe;const r=typeof e=='number'?e:parseFloat(e);const n=typeof t=='number'?t:parseFloat(t);const i=typeof xe.min=='number'?xe.min:parseFloat(xe.min);return Math.min(r,n)<=i}));const[_e,De]=React.useState((()=>{if(u!=='number'||xe.max===void 0)return!1;const{value:e=-1/0,defaultValue:t=-1/0}=xe;const r=typeof e=='number'?e:parseFloat(e);const n=typeof t=='number'?t:parseFloat(t);const i=typeof xe.max=='number'?xe.max:parseFloat(xe.max);return Math.max(r,n)>=i}));return d!=='brand'?require$$0.jsx(style.Root,{...xe,inputRef:Re??(e=>{Fe.current=e}),className:h,style:f,size:typeof n=='number'?n:void 0,mask:i,rounded:o,color:a,placeholderColor:s,width:c,widthXXS:se,widthXS:ce,widthS:ue,widthM:me,widthL:le,widthXL:pe,error:ge,type:u,fluid:Le,disabled:ve}):require$$0.jsx(FormInputLabel.FormInputLabel,{className:h,style:f,size:n,sizeXXS:X,sizeXS:S,sizeS:y,sizeM:b,sizeL:L,sizeXL:v,sizeUnits:I,sizes:R,margin:x,marginXXS:z,marginXS:P,marginS:$,marginM:T,marginL:q,marginXL:w,marginTop:C,marginTopXXS:M,marginTopXS:j,marginTopS:B,marginTopM:F,marginTopL:k,marginTopXL:A,marginRight:E,marginRightXXS:N,marginRightXS:V,marginRightS:O,marginRightM:U,marginRightL:_,marginRightXL:D,marginBottom:H,marginBottomXXS:W,marginBottomXS:Z,marginBottomS:G,marginBottomM:J,marginBottomL:K,marginBottomXL:Q,marginLeft:Y,marginLeftXXS:ee,marginLeftXS:te,marginLeftS:re,marginLeftM:ne,marginLeftL:ie,marginLeftXL:oe,palette:ae,error:ge,success:de,label:he,labelPosition:m,icon:fe,text:Xe,primary:Se,secondary:ye,onColored:be,disabled:ve,inline:Ie,active:Ae,textProps:l,iconProps:{size:24,color:ve?'content-disabled':'content-onmain-tertiary',...p},onClick:()=>{Fe.current&&Fe.current.focus()},onFocus:e=>{e.target!==e.currentTarget&&Ee(!0)},onBlur:e=>{e.target===e.currentTarget||Ne||Ee(!1)},input:require$$0.jsx(style.Input,{...xe,inputRef:e=>{Fe.current=e},mask:i,palette:ae,type:u,label:he,labelPosition:m,disabled:ve,active:Ae,onChange:e=>{if(xe.onChange&&xe.onChange(e),u==='number'){const t=parseFloat(e.currentTarget.value);const r=t<=parseFloat(e.currentTarget.min);const n=t>=parseFloat(e.currentTarget.max);Ue(r),De(n),(r||n)&&e.currentTarget.focus()}},onBlur:e=>{e.stopPropagation(),xe.onBlur&&xe.onBlur(e),Ve(Boolean(e.currentTarget.value)),Ee(Boolean(e.currentTarget.value))}}),controls:ze||u==='number'?require$$0.jsxs(require$$0.Fragment,{children:[ze&&require$$0.jsx(style.InputControl,{...$e,type:"button",palette:ae,disabled:ve,onClick:e=>{e.stopPropagation(),$e.onClick&&$e.onClick(e)},children:require$$0.jsx(Icon.Icon,{as:"span",size:24,color:"inherit",name:typeof ze=='string'?ze:void 0,icon:typeof ze!='string'?ze:void 0,...Pe})}),u==='number'&&require$$0.jsxs(Spacer.Spacer,{display:"flex",marginLeft:4,children:[require$$0.jsx(style.InputControl,{...je,type:"button",palette:ae,disabled:ve||Oe,onClick:e=>{e.stopPropagation(),je.onClick&&je.onClick(e);try{if(Fe.current){const e=Fe.current.value;if(Fe.current.stepDown(),e!==Fe.current.value){const e=new Event('input',{bubbles:!0});Fe.current.dispatchEvent(e)}}}catch(e){console.error(e)}},children:require$$0.jsx(Icon.Icon,Ce===void 0?{as:"span",size:24,color:"inherit",name:"minus",preset:"brand",...qe}:{as:"span",size:24,color:"inherit",name:typeof Ce=='string'?Ce:void 0,icon:typeof Ce!='string'?Ce:void 0,...qe})}),require$$0.jsx(style.InputControl,{...Be,type:"button",palette:ae,disabled:ve||_e,onClick:e=>{e.stopPropagation(),Be.onClick&&Be.onClick(e);try{if(Fe.current){const e=Fe.current.value;if(Fe.current.stepUp(),e!==Fe.current.value){const e=new Event('input',{bubbles:!0});Fe.current.dispatchEvent(e)}}}catch(e){console.error(e)}},children:require$$0.jsx(Icon.Icon,Me===void 0?{as:"span",size:24,color:"inherit",name:"plus",preset:"brand",...qe}:{as:"span",size:24,color:"inherit",name:typeof Me=='string'?Me:void 0,icon:typeof Me!='string'?Me:void 0,...qe})})]})]}):void 0})})),{sizes:constants.SIZES,displayName:"Input"}),{Phone:Input_Phone.InputPhone});exports.COMPONENT_NAME="Input",exports.Input=Input;
1
+ 'use strict';var React=require('react');var styled=require('styled-components');var index_browser=require('../../external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.js');var withMergedProps=require('../../hocs/withMergedProps.js');var constants$1=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Input_Phone=require('../Input.Phone/Input.Phone.js');var constants=require('../FormInputLabel/constants.js');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var FormInput=require('../FormInput/FormInput.js');var IconButton=require('../IconButton/IconButton.js');const Input=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const t=styled.useTheme();const{size:o="m",rounded:n=!0,color:a="mineShaft",placeholderColor:i="silver",width:s=t.defaultInputControlsWidth,type:l="text",labelPosition:c="dynamic",iconProps:u={},controls:m={},addonButtonProps:d={},preset:g,className:p,style:b,sizeXXS:f,sizeXS:h,sizeS:S,sizeM:X,sizeL:v,sizeXL:L,sizeUnits:C,sizes:y,margin:I,marginXXS:R,marginXS:B,marginS:w,marginM:k,marginL:T,marginXL:z,marginTop:M,marginTopXXS:x,marginTopXS:P,marginTopS:$,marginTopM:F,marginTopL:q,marginTopXL:j,marginRight:D,marginRightXXS:E,marginRightXS:O,marginRightS:N,marginRightM:_,marginRightL:A,marginRightXL:H,marginBottom:Z,marginBottomXXS:U,marginBottomXS:V,marginBottomS:W,marginBottomM:G,marginBottomL:J,marginBottomXL:K,marginLeft:Q,marginLeftXXS:Y,marginLeftXS:ee,marginLeftS:re,marginLeftM:te,marginLeftL:oe,marginLeftXL:ne,palette:ae,widthXXS:ie,widthXS:se,widthS:le,widthM:ce,widthL:ue,widthXL:me,error:de,success:ge,label:pe,icon:be,text:fe,primary:he,secondary:Se,contrast:Xe,onColored:ve,fluid:Le,disabled:Ce,inline:ye,inputRef:Ie,...Re}=e;const Be={size:o,sizeXXS:f,sizeXS:h,sizeS:S,sizeM:X,sizeL:v,sizeXL:L};const{icon:we,buttonProps:ke={}}=m.additional??{};const[Te,ze=(ke.onClick?void 0:we)]=Array.isArray(be)?be:[be];const Me=Boolean(Re.mask&&Re.alwaysShowMask);const xe={color:ae.controlsColor,colorHover:ae.controlsColorHover,colorActive:ae.controlsColorActive,colorDisabled:ae.controlsColorDisabled,backgroundColor:ae.controlsBackgroundColor,backgroundColorHover:ae.controlsBackgroundColorHover,backgroundColorActive:ae.controlsBackgroundColorActive,backgroundColorDisabled:ae.controlsBackgroundColorDisabled};const Pe=React.useRef(null);React.useImperativeHandle(r,(()=>Pe.current),[]);const $e=React.useRef(null);const Fe=React.useRef(null);const qe=React.useRef(null);const je=React.useMemo((()=>index_browser.nanoid()),[]);const[De,Ee]=React.useState((()=>{if(Me)return!0;const e=Re.value??Re.defaultValue;return typeof e=='string'&&e.length>0||typeof e=='number'}));const[Oe,Ne]=React.useState((()=>{if(l!=='number'||Re.min===void 0)return!1;const{value:e=1/0,defaultValue:r=1/0}=Re;const t=typeof e=='number'?e:parseFloat(e);const o=typeof r=='number'?r:parseFloat(r);const n=typeof Re.min=='number'?Re.min:parseFloat(Re.min);return Math.min(t,o)<=n}));const[_e,Ae]=React.useState((()=>{if(l!=='number'||Re.max===void 0)return!1;const{value:e=-1/0,defaultValue:r=-1/0}=Re;const t=typeof e=='number'?e:parseFloat(e);const o=typeof r=='number'?r:parseFloat(r);const n=typeof Re.max=='number'?Re.max:parseFloat(Re.max);return Math.max(t,o)>=n}));return React.useLayoutEffect((()=>{Me?Ee(!0):Re.value!==void 0&&Re.value!==null&&Pe.current&&Pe.current!==document.activeElement&&Ee(typeof Re.value=='string'&&Re.value.length>0||typeof Re.value=='number')}),[Me,Re.value]),g!=='brand'?require$$0.jsx(style.Root,{...Re,inputRef:Ie??(e=>{Pe.current=e}),className:p,style:b,size:typeof o=='number'?o:void 0,rounded:n,color:a,placeholderColor:i,width:s,widthXXS:ie,widthXS:se,widthS:le,widthM:ce,widthL:ue,widthXL:me,error:de,type:l,fluid:Le,disabled:Ce}):require$$0.jsx(FormInputLabel.FormInputLabel,{...Be,className:p,style:b,sizeUnits:C,sizes:y,margin:I,marginXXS:R,marginXS:B,marginS:w,marginM:k,marginL:T,marginXL:z,marginTop:M,marginTopXXS:x,marginTopXS:P,marginTopS:$,marginTopM:F,marginTopL:q,marginTopXL:j,marginRight:D,marginRightXXS:E,marginRightXS:O,marginRightS:N,marginRightM:_,marginRightL:A,marginRightXL:H,marginBottom:Z,marginBottomXXS:U,marginBottomXS:V,marginBottomS:W,marginBottomM:G,marginBottomL:J,marginBottomXL:K,marginLeft:Q,marginLeftXXS:Y,marginLeftXS:ee,marginLeftS:re,marginLeftM:te,marginLeftL:oe,marginLeftXL:ne,error:de,success:ge,label:pe,labelId:je,labelPosition:c,icon:[Te,ze],text:fe,primary:he,secondary:Se,contrast:Xe,onColored:ve,disabled:Ce,inline:ye,active:De,palette:{color:Ce?ae.colorDisabled:ae.color,backgroundColor:Ce?ae.backgroundColorDisabled:ae.backgroundColor,backgroundColorHover:Ce?ae.backgroundColorDisabled:ae.backgroundColorHover,borderColor:Ce?ae.borderColorDisabled:ae.borderColor},iconProps:{color:Ce?'content-disabled':'content-onmain-tertiary',sizes:constants$1.SIZES_ICON,...Be,...u},onClick:()=>{Pe.current&&Pe.current.focus()},onFocus:e=>{e.target!==e.currentTarget&&Ee(!0)},onPointerDown:e=>{e.target!==Pe.current&&e.target instanceof Node&&!$e.current?.contains(e.target)&&!Fe.current?.contains(e.target)&&!qe.current?.contains(e.target)&&e.preventDefault()},onBlur:e=>{Me||!Pe.current||e.currentTarget.contains(e.relatedTarget)||Ee(Boolean(Pe.current.value))},input:require$$0.jsx(FormInput.FormInput,{...Re,"aria-labelledby":pe?je:void 0,ref:Pe,type:l,disabled:Ce,palette:{color:ae.inputColor,placeholderColor:ae.inputPlaceholderColor,colorDisabled:ae.inputColorDisabled,placeholderColorDisabled:ae.inputPlaceholderColorDisabled},onChange:e=>{if(Re.onChange&&Re.onChange(e),l==='number'){const r=parseFloat(e.currentTarget.value);const t=r<=parseFloat(e.currentTarget.min);const o=r>=parseFloat(e.currentTarget.max);Ne(t),Ae(o),(t||o)&&e.currentTarget.focus()}}}),addon:d.onClick||ke.onClick?require$$0.jsx(IconButton.IconButton,{ref:$e,sizes:constants$1.SIZES_CONTROL,palette:xe,...Be,...ke,...d,icon:d.icon||we,disabled:Ce||d.disabled||ke.disabled,marginLeft:12,onClick:e=>{e.stopPropagation(),Re.readOnly||(d.onClick&&d.onClick(e),ke.onClick&&ke.onClick(e))}}):void 0,controls:l==='number'?require$$0.jsxs(require$$0.Fragment,{children:[require$$0.jsx(IconButton.IconButton,{...Be,ref:Fe,icon:"minus",sizes:constants$1.SIZES_CONTROL,palette:xe,disabled:Ce||Oe,marginLeft:12,onClick:e=>{if(e.stopPropagation(),!Re.readOnly)try{if(Pe.current){Ee(!0);const e=Pe.current.value;if(Pe.current.stepDown(),e!==Pe.current.value){const e=new Event('input',{bubbles:!0});Pe.current.dispatchEvent(e)}}}catch(e){console.error(e)}}}),require$$0.jsx(style.IconButtonSeparated,{...Be,ref:qe,icon:"plus",sizes:constants$1.SIZES_CONTROL,palette:xe,disabled:Ce||_e,onClick:e=>{if(e.stopPropagation(),!Re.readOnly)try{if(Pe.current){Ee(!0);const e=Pe.current.value;if(Pe.current.stepUp(),e!==Pe.current.value){const e=new Event('input',{bubbles:!0});Pe.current.dispatchEvent(e)}}}catch(e){console.error(e)}}})]}):void 0})})),{sizes:constants.SIZES,displayName:"Input"}),{Phone:Input_Phone.InputPhone});exports.COMPONENT_NAME="Input",exports.Input=Input;
2
2
  //# sourceMappingURL=Input.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { FormInputLabel, SIZES } from 'components/FormInputLabel'\nimport { Icon } from 'components/Icon'\nimport { InputPhone } from 'components/Input.Phone'\nimport { Spacer } from 'components/Spacer'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * Component accepts all \\<input\\> attributes and \"react-input-mask\" v2.0.4 props.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to \\<input\\>.\n *\n * See full [InputProps](https://github.com/foxford/ui/blob/master/src/components/Input/types.ts)\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n withMergedProps<InputProps, HTMLInputElement>(\n forwardRef((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n mask = '',\n rounded = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n type = 'text',\n labelPosition = 'dynamic',\n textProps = {},\n iconProps = {},\n controls = {},\n preset,\n className,\n style,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n palette,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n error,\n success,\n label,\n icon,\n text,\n primary,\n secondary,\n onColored,\n fluid,\n disabled,\n inline,\n inputRef,\n ...inputProps\n } = props\n\n const {\n icon: additionalControlIcon,\n iconProps: additionalControlIconProps = {},\n buttonProps: additionalControlButtonProps = {},\n } = controls.additional ?? {}\n\n const {\n icon: numberControlIcon,\n iconProps: numberControlIconProps = {},\n buttonProps: numberControlButtonProps = [],\n } = controls.number ?? {}\n\n const [minus, plus] = Array.isArray(numberControlIcon) ? numberControlIcon : [numberControlIcon]\n\n const minusButtonProps =\n (Array.isArray(numberControlButtonProps) ? numberControlButtonProps[0] : numberControlButtonProps) ?? {}\n\n const plusButtonProps = (Array.isArray(numberControlButtonProps) ? numberControlButtonProps[1] : {}) ?? {}\n\n const ref = useRef<HTMLInputElement | null>(null)\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n const hasInitValue =\n typeof inputProps.value === 'string' ||\n typeof inputProps.value === 'number' ||\n typeof inputProps.defaultValue === 'string' ||\n typeof inputProps.defaultValue === 'number'\n\n const [active, setActive] = useState(hasInitValue)\n const [hasValue, setHasValue] = useState(hasInitValue)\n\n const [minusDisabled, setMinusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.min === undefined) return false\n\n const { value = Infinity, defaultValue = Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const minValue = typeof inputProps.min === 'number' ? inputProps.min : parseFloat(inputProps.min)\n\n return Math.min(initValue, initDefaultValue) <= minValue\n })\n\n const [plusDisabled, setPlusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.max === undefined) return false\n\n const { value = -Infinity, defaultValue = -Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const maxValue = typeof inputProps.max === 'number' ? inputProps.max : parseFloat(inputProps.max)\n\n return Math.max(initValue, initDefaultValue) >= maxValue\n })\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...inputProps}\n inputRef={\n inputRef ??\n ((input) => {\n ref.current = input\n })\n }\n className={className}\n style={style}\n size={typeof size === 'number' ? size : undefined}\n mask={mask}\n rounded={rounded}\n color={color}\n placeholderColor={placeholderColor}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n error={error}\n type={type}\n fluid={fluid}\n disabled={disabled}\n />\n )\n }\n\n return (\n <FormInputLabel\n className={className}\n style={style}\n size={size}\n sizeXXS={sizeXXS}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n sizeUnits={sizeUnits}\n sizes={sizes}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n palette={palette}\n error={error}\n success={success}\n label={label}\n labelPosition={labelPosition}\n icon={icon}\n text={text}\n primary={primary}\n secondary={secondary}\n onColored={onColored}\n disabled={disabled}\n inline={inline}\n active={active}\n textProps={textProps}\n iconProps={{\n size: 24,\n color: disabled ? 'content-disabled' : 'content-onmain-tertiary',\n ...iconProps,\n }}\n onClick={() => {\n if (ref.current) {\n ref.current.focus()\n }\n }}\n onFocus={(evt) => {\n if (evt.target !== evt.currentTarget) {\n setActive(true)\n }\n }}\n onBlur={(evt) => {\n if (evt.target !== evt.currentTarget && !hasValue) {\n setActive(false)\n }\n }}\n input={\n <Styled.Input\n {...inputProps}\n inputRef={(input) => {\n ref.current = input\n }}\n mask={mask}\n palette={palette}\n type={type}\n label={label}\n labelPosition={labelPosition}\n disabled={disabled}\n active={active}\n onChange={(evt) => {\n if (inputProps.onChange) {\n inputProps.onChange(evt)\n }\n\n if (type === 'number') {\n const currentValue = parseFloat(evt.currentTarget.value)\n\n const minValueReached = currentValue <= parseFloat(evt.currentTarget.min)\n const maxValueReached = currentValue >= parseFloat(evt.currentTarget.max)\n\n setMinusDisabled(minValueReached)\n setPlusDisabled(maxValueReached)\n\n if (minValueReached || maxValueReached) {\n evt.currentTarget.focus()\n }\n }\n }}\n onBlur={(evt) => {\n evt.stopPropagation()\n if (inputProps.onBlur) {\n inputProps.onBlur(evt)\n }\n\n setHasValue(Boolean(evt.currentTarget.value))\n setActive(Boolean(evt.currentTarget.value))\n }}\n />\n }\n controls={\n additionalControlIcon || type === 'number' ? (\n <>\n {additionalControlIcon && (\n <Styled.InputControl\n {...additionalControlButtonProps}\n type='button'\n palette={palette}\n disabled={disabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (additionalControlButtonProps.onClick) {\n additionalControlButtonProps.onClick(evt)\n }\n }}\n >\n <Icon\n as='span'\n size={24}\n color='inherit'\n name={typeof additionalControlIcon === 'string' ? additionalControlIcon : undefined}\n icon={typeof additionalControlIcon !== 'string' ? additionalControlIcon : undefined}\n {...additionalControlIconProps}\n />\n </Styled.InputControl>\n )}\n {type === 'number' && (\n <Spacer display='flex' marginLeft={4}>\n <Styled.InputControl\n {...minusButtonProps}\n type='button'\n palette={palette}\n disabled={disabled || minusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (minusButtonProps.onClick) {\n minusButtonProps.onClick(evt)\n }\n\n try {\n if (ref.current) {\n const prev = ref.current.value\n ref.current.stepDown()\n\n const decremented = ref.current.value\n if (prev !== decremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n >\n {minus === undefined ? (\n <Icon\n as='span'\n size={24}\n color='inherit'\n name='minus'\n preset='brand'\n {...numberControlIconProps}\n />\n ) : (\n <Icon\n as='span'\n size={24}\n color='inherit'\n name={typeof minus === 'string' ? minus : undefined}\n icon={typeof minus !== 'string' ? minus : undefined}\n {...numberControlIconProps}\n />\n )}\n </Styled.InputControl>\n <Styled.InputControl\n {...plusButtonProps}\n type='button'\n palette={palette}\n disabled={disabled || plusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (plusButtonProps.onClick) {\n plusButtonProps.onClick(evt)\n }\n\n try {\n if (ref.current) {\n const prev = ref.current.value\n ref.current.stepUp()\n\n const incremented = ref.current.value\n if (prev !== incremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n >\n {plus === undefined ? (\n <Icon\n as='span'\n size={24}\n color='inherit'\n name='plus'\n preset='brand'\n {...numberControlIconProps}\n />\n ) : (\n <Icon\n as='span'\n size={24}\n color='inherit'\n name={typeof plus === 'string' ? plus : undefined}\n icon={typeof plus !== 'string' ? plus : undefined}\n {...numberControlIconProps}\n />\n )}\n </Styled.InputControl>\n </Spacer>\n )}\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Phone: InputPhone,\n }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","mask","rounded","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","textProps","iconProps","controls","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","primary","secondary","onColored","fluid","disabled","inline","inputRef","inputProps","additionalControlIcon","additionalControlIconProps","buttonProps","additionalControlButtonProps","additional","numberControlIcon","numberControlIconProps","numberControlButtonProps","number","minus","plus","Array","isArray","minusButtonProps","plusButtonProps","ref","useRef","useImperativeHandle","current","hasInitValue","value","defaultValue","active","setActive","useState","hasValue","setHasValue","minusDisabled","setMinusDisabled","min","undefined","Infinity","initValue","parseFloat","initDefaultValue","minValue","Math","plusDisabled","setPlusDisabled","max","maxValue","_jsx","Styled","input","FormInputLabel","onClick","focus","onFocus","evt","target","currentTarget","onBlur","jsx","onChange","currentValue","minValueReached","maxValueReached","stopPropagation","Boolean","_jsxs","_Fragment","children","Icon","as","name","Spacer","display","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","stepUp","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}
1
+ {"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef, useLayoutEffect, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { FormInputLabel, SIZES } from 'components/FormInputLabel'\nimport { FormInput } from 'components/FormInput'\nimport { InputPhone } from 'components/Input.Phone'\nimport { IconButton } from 'components/IconButton'\nimport { SIZES_ICON, SIZES_CONTROL } from './constants'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<input\\> элемента и пропсы \"react-input-mask\" [v2.0.4](https://www.npmjs.com/package/react-input-mask/v/2.0.4?activeTab=readme).\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Можно передать \"ref\", который будет ассоциирован с \\<input\\>.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Input/types.ts).\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n withMergedProps<InputProps, HTMLInputElement>(\n forwardRef((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n rounded = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n type = 'text',\n labelPosition = 'dynamic',\n iconProps = {},\n controls = {},\n addonButtonProps = {},\n preset,\n className,\n style,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n palette,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n error,\n success,\n label,\n icon,\n text,\n primary,\n secondary,\n contrast,\n onColored,\n fluid,\n disabled,\n inline,\n inputRef,\n ...inputProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const { icon: additionalControlIcon, buttonProps: additionalControlButtonProps = {} } = controls.additional ?? {}\n\n const [iconBefore, iconAfter = !additionalControlButtonProps.onClick ? additionalControlIcon : undefined] =\n Array.isArray(icon) ? icon : [icon]\n\n const inputAlwaysActive = Boolean(inputProps.mask && inputProps.alwaysShowMask)\n\n const controlPalette = {\n color: palette.controlsColor,\n colorHover: palette.controlsColorHover,\n colorActive: palette.controlsColorActive,\n colorDisabled: palette.controlsColorDisabled,\n backgroundColor: palette.controlsBackgroundColor,\n backgroundColorHover: palette.controlsBackgroundColorHover,\n backgroundColorActive: palette.controlsBackgroundColorActive,\n backgroundColorDisabled: palette.controlsBackgroundColorDisabled,\n }\n\n const ref = useRef<HTMLInputElement | null>(null)\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n const addonRef = useRef<HTMLButtonElement | null>(null)\n const minusRef = useRef<HTMLButtonElement | null>(null)\n const plusRef = useRef<HTMLButtonElement | null>(null)\n\n const inputLabelId = useMemo(() => nanoid(), [])\n\n const [inputActive, setInputActive] = useState(() => {\n if (inputAlwaysActive) return true\n\n const initValue = inputProps.value ?? inputProps.defaultValue\n\n return (typeof initValue === 'string' && initValue.length > 0) || typeof initValue === 'number'\n })\n\n const [minusDisabled, setMinusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.min === undefined) return false\n\n const { value = Infinity, defaultValue = Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const minValue = typeof inputProps.min === 'number' ? inputProps.min : parseFloat(inputProps.min)\n\n return Math.min(initValue, initDefaultValue) <= minValue\n })\n\n const [plusDisabled, setPlusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.max === undefined) return false\n\n const { value = -Infinity, defaultValue = -Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const maxValue = typeof inputProps.max === 'number' ? inputProps.max : parseFloat(inputProps.max)\n\n return Math.max(initValue, initDefaultValue) >= maxValue\n })\n\n useLayoutEffect(() => {\n if (inputAlwaysActive) {\n setInputActive(true)\n } else if (\n inputProps.value !== undefined &&\n inputProps.value !== null &&\n ref.current &&\n ref.current !== document.activeElement\n ) {\n setInputActive(\n (typeof inputProps.value === 'string' && inputProps.value.length > 0) ||\n typeof inputProps.value === 'number'\n )\n }\n }, [inputAlwaysActive, inputProps.value])\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...inputProps}\n inputRef={\n inputRef ??\n ((input) => {\n ref.current = input\n })\n }\n className={className}\n style={style}\n size={typeof size === 'number' ? size : undefined}\n rounded={rounded}\n color={color}\n placeholderColor={placeholderColor}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n error={error}\n type={type}\n fluid={fluid}\n disabled={disabled}\n />\n )\n }\n\n return (\n <FormInputLabel\n {...sizeProps}\n className={className}\n style={style}\n sizeUnits={sizeUnits}\n sizes={sizes}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n error={error}\n success={success}\n label={label}\n labelId={inputLabelId}\n labelPosition={labelPosition}\n icon={[iconBefore, iconAfter]}\n text={text}\n primary={primary}\n secondary={secondary}\n contrast={contrast}\n onColored={onColored}\n disabled={disabled}\n inline={inline}\n active={inputActive}\n palette={{\n color: disabled ? palette.colorDisabled : palette.color,\n backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n iconProps={{\n color: disabled ? 'content-disabled' : 'content-onmain-tertiary',\n sizes: SIZES_ICON,\n ...sizeProps,\n ...iconProps,\n }}\n onClick={() => {\n if (ref.current) {\n ref.current.focus()\n }\n }}\n onFocus={(evt) => {\n if (evt.target !== evt.currentTarget) {\n setInputActive(true)\n }\n }}\n onPointerDown={(evt) => {\n if (\n evt.target === ref.current ||\n !(evt.target instanceof Node) ||\n addonRef.current?.contains(evt.target) ||\n minusRef.current?.contains(evt.target) ||\n plusRef.current?.contains(evt.target)\n ) {\n return\n }\n evt.preventDefault()\n }}\n onBlur={(evt) => {\n if (!inputAlwaysActive && ref.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n setInputActive(Boolean(ref.current.value))\n }\n }}\n input={\n <FormInput\n {...inputProps}\n aria-labelledby={label ? inputLabelId : undefined}\n ref={ref}\n type={type}\n disabled={disabled}\n palette={{\n color: palette.inputColor,\n placeholderColor: palette.inputPlaceholderColor,\n colorDisabled: palette.inputColorDisabled,\n placeholderColorDisabled: palette.inputPlaceholderColorDisabled,\n }}\n onChange={(evt) => {\n if (inputProps.onChange) {\n inputProps.onChange(evt)\n }\n\n if (type === 'number') {\n const currentValue = parseFloat(evt.currentTarget.value)\n\n const minValueReached = currentValue <= parseFloat(evt.currentTarget.min)\n const maxValueReached = currentValue >= parseFloat(evt.currentTarget.max)\n\n setMinusDisabled(minValueReached)\n setPlusDisabled(maxValueReached)\n\n if (minValueReached || maxValueReached) {\n evt.currentTarget.focus()\n }\n }\n }}\n />\n }\n addon={\n addonButtonProps.onClick || additionalControlButtonProps.onClick ? (\n <IconButton\n ref={addonRef}\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n {...sizeProps}\n {...additionalControlButtonProps}\n {...addonButtonProps}\n icon={addonButtonProps.icon || additionalControlIcon}\n disabled={disabled || addonButtonProps.disabled || additionalControlButtonProps.disabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n if (addonButtonProps.onClick) addonButtonProps.onClick(evt)\n if (additionalControlButtonProps.onClick) additionalControlButtonProps.onClick(evt)\n }}\n />\n ) : undefined\n }\n controls={\n type === 'number' ? (\n <>\n <IconButton\n {...sizeProps}\n ref={minusRef}\n icon='minus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || minusDisabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepDown()\n\n const decremented = ref.current.value\n if (prev !== decremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n <Styled.IconButtonSeparated\n {...sizeProps}\n ref={plusRef}\n icon='plus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || plusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepUp()\n\n const incremented = ref.current.value\n if (prev !== incremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Phone: InputPhone,\n }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rounded","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","iconProps","controls","addonButtonProps","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","primary","secondary","contrast","onColored","fluid","disabled","inline","inputRef","inputProps","sizeProps","additionalControlIcon","buttonProps","additionalControlButtonProps","additional","iconBefore","iconAfter","onClick","undefined","Array","isArray","inputAlwaysActive","Boolean","mask","alwaysShowMask","controlPalette","controlsColor","colorHover","controlsColorHover","colorActive","controlsColorActive","colorDisabled","controlsColorDisabled","backgroundColor","controlsBackgroundColor","backgroundColorHover","controlsBackgroundColorHover","backgroundColorActive","controlsBackgroundColorActive","backgroundColorDisabled","controlsBackgroundColorDisabled","ref","useRef","useImperativeHandle","current","addonRef","minusRef","plusRef","inputLabelId","useMemo","nanoid","inputActive","setInputActive","useState","initValue","value","defaultValue","length","minusDisabled","setMinusDisabled","min","Infinity","parseFloat","initDefaultValue","minValue","Math","plusDisabled","setPlusDisabled","max","maxValue","useLayoutEffect","document","activeElement","_jsx","Styled","input","FormInputLabel","labelId","active","borderColor","borderColorDisabled","SIZES_ICON","focus","onFocus","evt","target","currentTarget","onPointerDown","Node","contains","preventDefault","onBlur","relatedTarget","jsx","FormInput","inputColor","inputPlaceholderColor","inputColorDisabled","placeholderColorDisabled","inputPlaceholderColorDisabled","onChange","currentValue","minValueReached","maxValueReached","addon","IconButton","SIZES_CONTROL","stopPropagation","readOnly","_jsxs","_Fragment","children","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","stepUp","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{forwardRef,useRef,useImperativeHandle,useState}from'react';import{useTheme}from'styled-components';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{Root,Input as Input$1,InputControl}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{InputPhone}from'../Input.Phone/Input.Phone.mjs';import{SIZES}from'../FormInputLabel/constants.mjs';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{Icon}from'../Icon/Icon.mjs';import{Spacer}from'../Spacer/Spacer.mjs';const COMPONENT_NAME='Input';const Input=Object.assign(withMergedProps(forwardRef(((t,n)=>{const e=useTheme();const{size:r="m",mask:o="",rounded:i=!0,color:a="mineShaft",placeholderColor:s="silver",width:m=e.defaultInputControlsWidth,type:p="text",labelPosition:c="dynamic",textProps:l={},iconProps:u={},controls:g={},preset:d,className:f,style:h,sizeXXS:S,sizeXS:X,sizeS:b,sizeM:L,sizeL:y,sizeXL:v,sizeUnits:I,sizes:x,margin:z,marginXXS:T,marginXS:P,marginS:C,marginM:M,marginL:R,marginXL:j,marginTop:w,marginTopXXS:B,marginTopXS:F,marginTopS:k,marginTopM:E,marginTopL:N,marginTopXL:A,marginRight:O,marginRightXXS:V,marginRightXS:U,marginRightS:H,marginRightM:Z,marginRightL:$,marginRightXL:_,marginBottom:D,marginBottomXXS:W,marginBottomXS:q,marginBottomS:G,marginBottomM:J,marginBottomL:K,marginBottomXL:Q,marginLeft:Y,marginLeftXXS:tt,marginLeftXS:nt,marginLeftS:et,marginLeftM:rt,marginLeftL:ot,marginLeftXL:at,palette:st,widthXXS:mt,widthXS:pt,widthS:ct,widthM:lt,widthL:ut,widthXL:gt,error:dt,success:ft,label:ht,icon:St,text:Xt,primary:bt,secondary:Lt,onColored:yt,fluid:vt,disabled:It,inline:xt,inputRef:zt,...Tt}=t;const{icon:Pt,iconProps:Ct={},buttonProps:Mt={}}=g.additional??{};const{icon:Rt,iconProps:jt={},buttonProps:wt=[]}=g.number??{};const[Bt,Ft]=Array.isArray(Rt)?Rt:[Rt];const kt=(Array.isArray(wt)?wt[0]:wt)??{};const Et=(Array.isArray(wt)?wt[1]:{})??{};const Nt=useRef(null);useImperativeHandle(n,(()=>Nt.current),[]);const At=typeof Tt.value=='string'||typeof Tt.value=='number'||typeof Tt.defaultValue=='string'||typeof Tt.defaultValue=='number';const[Ot,Vt]=useState(At);const[Ut,Ht]=useState(At);const[Zt,$t]=useState((()=>{if(p!=='number'||Tt.min===void 0)return!1;const{value:t=1/0,defaultValue:n=1/0}=Tt;const e=typeof t=='number'?t:parseFloat(t);const r=typeof n=='number'?n:parseFloat(n);const o=typeof Tt.min=='number'?Tt.min:parseFloat(Tt.min);return Math.min(e,r)<=o}));const[_t,Dt]=useState((()=>{if(p!=='number'||Tt.max===void 0)return!1;const{value:t=-1/0,defaultValue:n=-1/0}=Tt;const e=typeof t=='number'?t:parseFloat(t);const r=typeof n=='number'?n:parseFloat(n);const o=typeof Tt.max=='number'?Tt.max:parseFloat(Tt.max);return Math.max(e,r)>=o}));return d!=='brand'?jsx(Root,{...Tt,inputRef:zt??(t=>{Nt.current=t}),className:f,style:h,size:typeof r=='number'?r:void 0,mask:o,rounded:i,color:a,placeholderColor:s,width:m,widthXXS:mt,widthXS:pt,widthS:ct,widthM:lt,widthL:ut,widthXL:gt,error:dt,type:p,fluid:vt,disabled:It}):jsx(FormInputLabel,{className:f,style:h,size:r,sizeXXS:S,sizeXS:X,sizeS:b,sizeM:L,sizeL:y,sizeXL:v,sizeUnits:I,sizes:x,margin:z,marginXXS:T,marginXS:P,marginS:C,marginM:M,marginL:R,marginXL:j,marginTop:w,marginTopXXS:B,marginTopXS:F,marginTopS:k,marginTopM:E,marginTopL:N,marginTopXL:A,marginRight:O,marginRightXXS:V,marginRightXS:U,marginRightS:H,marginRightM:Z,marginRightL:$,marginRightXL:_,marginBottom:D,marginBottomXXS:W,marginBottomXS:q,marginBottomS:G,marginBottomM:J,marginBottomL:K,marginBottomXL:Q,marginLeft:Y,marginLeftXXS:tt,marginLeftXS:nt,marginLeftS:et,marginLeftM:rt,marginLeftL:ot,marginLeftXL:at,palette:st,error:dt,success:ft,label:ht,labelPosition:c,icon:St,text:Xt,primary:bt,secondary:Lt,onColored:yt,disabled:It,inline:xt,active:Ot,textProps:l,iconProps:{size:24,color:It?'content-disabled':'content-onmain-tertiary',...u},onClick:()=>{Nt.current&&Nt.current.focus()},onFocus:t=>{t.target!==t.currentTarget&&Vt(!0)},onBlur:t=>{t.target===t.currentTarget||Ut||Vt(!1)},input:jsx(Input$1,{...Tt,inputRef:t=>{Nt.current=t},mask:o,palette:st,type:p,label:ht,labelPosition:c,disabled:It,active:Ot,onChange:t=>{if(Tt.onChange&&Tt.onChange(t),p==='number'){const n=parseFloat(t.currentTarget.value);const e=n<=parseFloat(t.currentTarget.min);const r=n>=parseFloat(t.currentTarget.max);$t(e),Dt(r),(e||r)&&t.currentTarget.focus()}},onBlur:t=>{t.stopPropagation(),Tt.onBlur&&Tt.onBlur(t),Ht(Boolean(t.currentTarget.value)),Vt(Boolean(t.currentTarget.value))}}),controls:Pt||p==='number'?jsxs(Fragment,{children:[Pt&&jsx(InputControl,{...Mt,type:"button",palette:st,disabled:It,onClick:t=>{t.stopPropagation(),Mt.onClick&&Mt.onClick(t)},children:jsx(Icon,{as:"span",size:24,color:"inherit",name:typeof Pt=='string'?Pt:void 0,icon:typeof Pt!='string'?Pt:void 0,...Ct})}),p==='number'&&jsxs(Spacer,{display:"flex",marginLeft:4,children:[jsx(InputControl,{...kt,type:"button",palette:st,disabled:It||Zt,onClick:t=>{t.stopPropagation(),kt.onClick&&kt.onClick(t);try{if(Nt.current){const t=Nt.current.value;if(Nt.current.stepDown(),t!==Nt.current.value){const t=new Event('input',{bubbles:!0});Nt.current.dispatchEvent(t)}}}catch(t){console.error(t)}},children:jsx(Icon,Bt===void 0?{as:"span",size:24,color:"inherit",name:"minus",preset:"brand",...jt}:{as:"span",size:24,color:"inherit",name:typeof Bt=='string'?Bt:void 0,icon:typeof Bt!='string'?Bt:void 0,...jt})}),jsx(InputControl,{...Et,type:"button",palette:st,disabled:It||_t,onClick:t=>{t.stopPropagation(),Et.onClick&&Et.onClick(t);try{if(Nt.current){const t=Nt.current.value;if(Nt.current.stepUp(),t!==Nt.current.value){const t=new Event('input',{bubbles:!0});Nt.current.dispatchEvent(t)}}}catch(t){console.error(t)}},children:jsx(Icon,Ft===void 0?{as:"span",size:24,color:"inherit",name:"plus",preset:"brand",...jt}:{as:"span",size:24,color:"inherit",name:typeof Ft=='string'?Ft:void 0,icon:typeof Ft!='string'?Ft:void 0,...jt})})]})]}):void 0})})),{sizes:SIZES,displayName:"Input"}),{Phone:InputPhone});export{COMPONENT_NAME,Input};
1
+ import{forwardRef,useRef,useImperativeHandle,useMemo,useState,useLayoutEffect}from'react';import{useTheme}from'styled-components';import{nanoid}from'../../external/.pnpm/nanoid@5.0.7/node_modules/nanoid/index.browser.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_ICON,SIZES_CONTROL}from'./constants.mjs';import{Root,IconButtonSeparated}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{InputPhone}from'../Input.Phone/Input.Phone.mjs';import{SIZES}from'../FormInputLabel/constants.mjs';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{FormInput}from'../FormInput/FormInput.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const COMPONENT_NAME='Input';const Input=Object.assign(withMergedProps(forwardRef(((o,r)=>{const t=useTheme();const{size:e="m",rounded:n=!0,color:a="mineShaft",placeholderColor:i="silver",width:s=t.defaultInputControlsWidth,type:l="text",labelPosition:m="dynamic",iconProps:c={},controls:u={},addonButtonProps:d={},preset:g,className:p,style:f,sizeXXS:b,sizeXS:S,sizeS:h,sizeM:X,sizeL:L,sizeXL:C,sizeUnits:v,sizes:I,margin:y,marginXXS:B,marginXS:R,marginS:T,marginM:k,marginL:w,marginXL:M,marginTop:z,marginTopXXS:x,marginTopXS:P,marginTopS:F,marginTopM:j,marginTopL:E,marginTopXL:O,marginRight:N,marginRightXXS:D,marginRightXS:_,marginRightS:A,marginRightM:H,marginRightL:Z,marginRightXL:U,marginBottom:V,marginBottomXXS:W,marginBottomXS:q,marginBottomS:G,marginBottomM:J,marginBottomL:K,marginBottomXL:Q,marginLeft:Y,marginLeftXXS:$,marginLeftXS:oo,marginLeftS:ro,marginLeftM:to,marginLeftL:eo,marginLeftXL:no,palette:ao,widthXXS:io,widthXS:so,widthS:lo,widthM:mo,widthL:co,widthXL:uo,error:go,success:po,label:fo,icon:bo,text:So,primary:ho,secondary:Xo,contrast:Lo,onColored:Co,fluid:vo,disabled:Io,inline:yo,inputRef:Bo,...Ro}=o;const To={size:e,sizeXXS:b,sizeXS:S,sizeS:h,sizeM:X,sizeL:L,sizeXL:C};const{icon:ko,buttonProps:wo={}}=u.additional??{};const[Mo,zo=(wo.onClick?void 0:ko)]=Array.isArray(bo)?bo:[bo];const xo=Boolean(Ro.mask&&Ro.alwaysShowMask);const Po={color:ao.controlsColor,colorHover:ao.controlsColorHover,colorActive:ao.controlsColorActive,colorDisabled:ao.controlsColorDisabled,backgroundColor:ao.controlsBackgroundColor,backgroundColorHover:ao.controlsBackgroundColorHover,backgroundColorActive:ao.controlsBackgroundColorActive,backgroundColorDisabled:ao.controlsBackgroundColorDisabled};const Fo=useRef(null);useImperativeHandle(r,(()=>Fo.current),[]);const jo=useRef(null);const Eo=useRef(null);const Oo=useRef(null);const No=useMemo((()=>nanoid()),[]);const[Do,_o]=useState((()=>{if(xo)return!0;const o=Ro.value??Ro.defaultValue;return typeof o=='string'&&o.length>0||typeof o=='number'}));const[Ao,Ho]=useState((()=>{if(l!=='number'||Ro.min===void 0)return!1;const{value:o=1/0,defaultValue:r=1/0}=Ro;const t=typeof o=='number'?o:parseFloat(o);const e=typeof r=='number'?r:parseFloat(r);const n=typeof Ro.min=='number'?Ro.min:parseFloat(Ro.min);return Math.min(t,e)<=n}));const[Zo,Uo]=useState((()=>{if(l!=='number'||Ro.max===void 0)return!1;const{value:o=-1/0,defaultValue:r=-1/0}=Ro;const t=typeof o=='number'?o:parseFloat(o);const e=typeof r=='number'?r:parseFloat(r);const n=typeof Ro.max=='number'?Ro.max:parseFloat(Ro.max);return Math.max(t,e)>=n}));return useLayoutEffect((()=>{xo?_o(!0):Ro.value!==void 0&&Ro.value!==null&&Fo.current&&Fo.current!==document.activeElement&&_o(typeof Ro.value=='string'&&Ro.value.length>0||typeof Ro.value=='number')}),[xo,Ro.value]),g!=='brand'?jsx(Root,{...Ro,inputRef:Bo??(o=>{Fo.current=o}),className:p,style:f,size:typeof e=='number'?e:void 0,rounded:n,color:a,placeholderColor:i,width:s,widthXXS:io,widthXS:so,widthS:lo,widthM:mo,widthL:co,widthXL:uo,error:go,type:l,fluid:vo,disabled:Io}):jsx(FormInputLabel,{...To,className:p,style:f,sizeUnits:v,sizes:I,margin:y,marginXXS:B,marginXS:R,marginS:T,marginM:k,marginL:w,marginXL:M,marginTop:z,marginTopXXS:x,marginTopXS:P,marginTopS:F,marginTopM:j,marginTopL:E,marginTopXL:O,marginRight:N,marginRightXXS:D,marginRightXS:_,marginRightS:A,marginRightM:H,marginRightL:Z,marginRightXL:U,marginBottom:V,marginBottomXXS:W,marginBottomXS:q,marginBottomS:G,marginBottomM:J,marginBottomL:K,marginBottomXL:Q,marginLeft:Y,marginLeftXXS:$,marginLeftXS:oo,marginLeftS:ro,marginLeftM:to,marginLeftL:eo,marginLeftXL:no,error:go,success:po,label:fo,labelId:No,labelPosition:m,icon:[Mo,zo],text:So,primary:ho,secondary:Xo,contrast:Lo,onColored:Co,disabled:Io,inline:yo,active:Do,palette:{color:Io?ao.colorDisabled:ao.color,backgroundColor:Io?ao.backgroundColorDisabled:ao.backgroundColor,backgroundColorHover:Io?ao.backgroundColorDisabled:ao.backgroundColorHover,borderColor:Io?ao.borderColorDisabled:ao.borderColor},iconProps:{color:Io?'content-disabled':'content-onmain-tertiary',sizes:SIZES_ICON,...To,...c},onClick:()=>{Fo.current&&Fo.current.focus()},onFocus:o=>{o.target!==o.currentTarget&&_o(!0)},onPointerDown:o=>{o.target!==Fo.current&&o.target instanceof Node&&!jo.current?.contains(o.target)&&!Eo.current?.contains(o.target)&&!Oo.current?.contains(o.target)&&o.preventDefault()},onBlur:o=>{xo||!Fo.current||o.currentTarget.contains(o.relatedTarget)||_o(Boolean(Fo.current.value))},input:jsx(FormInput,{...Ro,"aria-labelledby":fo?No:void 0,ref:Fo,type:l,disabled:Io,palette:{color:ao.inputColor,placeholderColor:ao.inputPlaceholderColor,colorDisabled:ao.inputColorDisabled,placeholderColorDisabled:ao.inputPlaceholderColorDisabled},onChange:o=>{if(Ro.onChange&&Ro.onChange(o),l==='number'){const r=parseFloat(o.currentTarget.value);const t=r<=parseFloat(o.currentTarget.min);const e=r>=parseFloat(o.currentTarget.max);Ho(t),Uo(e),(t||e)&&o.currentTarget.focus()}}}),addon:d.onClick||wo.onClick?jsx(IconButton,{ref:jo,sizes:SIZES_CONTROL,palette:Po,...To,...wo,...d,icon:d.icon||ko,disabled:Io||d.disabled||wo.disabled,marginLeft:12,onClick:o=>{o.stopPropagation(),Ro.readOnly||(d.onClick&&d.onClick(o),wo.onClick&&wo.onClick(o))}}):void 0,controls:l==='number'?jsxs(Fragment,{children:[jsx(IconButton,{...To,ref:Eo,icon:"minus",sizes:SIZES_CONTROL,palette:Po,disabled:Io||Ao,marginLeft:12,onClick:o=>{if(o.stopPropagation(),!Ro.readOnly)try{if(Fo.current){_o(!0);const o=Fo.current.value;if(Fo.current.stepDown(),o!==Fo.current.value){const o=new Event('input',{bubbles:!0});Fo.current.dispatchEvent(o)}}}catch(o){console.error(o)}}}),jsx(IconButtonSeparated,{...To,ref:Oo,icon:"plus",sizes:SIZES_CONTROL,palette:Po,disabled:Io||Zo,onClick:o=>{if(o.stopPropagation(),!Ro.readOnly)try{if(Fo.current){_o(!0);const o=Fo.current.value;if(Fo.current.stepUp(),o!==Fo.current.value){const o=new Event('input',{bubbles:!0});Fo.current.dispatchEvent(o)}}}catch(o){console.error(o)}}})]}):void 0})})),{sizes:SIZES,displayName:"Input"}),{Phone:InputPhone});export{COMPONENT_NAME,Input};
2
2
  //# sourceMappingURL=Input.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Input.mjs","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { FormInputLabel, SIZES } from 'components/FormInputLabel'\nimport { Icon } from 'components/Icon'\nimport { InputPhone } from 'components/Input.Phone'\nimport { Spacer } from 'components/Spacer'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * Component accepts all \\<input\\> attributes and \"react-input-mask\" v2.0.4 props.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to \\<input\\>.\n *\n * See full [InputProps](https://github.com/foxford/ui/blob/master/src/components/Input/types.ts)\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n withMergedProps<InputProps, HTMLInputElement>(\n forwardRef((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n mask = '',\n rounded = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n type = 'text',\n labelPosition = 'dynamic',\n textProps = {},\n iconProps = {},\n controls = {},\n preset,\n className,\n style,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n palette,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n error,\n success,\n label,\n icon,\n text,\n primary,\n secondary,\n onColored,\n fluid,\n disabled,\n inline,\n inputRef,\n ...inputProps\n } = props\n\n const {\n icon: additionalControlIcon,\n iconProps: additionalControlIconProps = {},\n buttonProps: additionalControlButtonProps = {},\n } = controls.additional ?? {}\n\n const {\n icon: numberControlIcon,\n iconProps: numberControlIconProps = {},\n buttonProps: numberControlButtonProps = [],\n } = controls.number ?? {}\n\n const [minus, plus] = Array.isArray(numberControlIcon) ? numberControlIcon : [numberControlIcon]\n\n const minusButtonProps =\n (Array.isArray(numberControlButtonProps) ? numberControlButtonProps[0] : numberControlButtonProps) ?? {}\n\n const plusButtonProps = (Array.isArray(numberControlButtonProps) ? numberControlButtonProps[1] : {}) ?? {}\n\n const ref = useRef<HTMLInputElement | null>(null)\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n const hasInitValue =\n typeof inputProps.value === 'string' ||\n typeof inputProps.value === 'number' ||\n typeof inputProps.defaultValue === 'string' ||\n typeof inputProps.defaultValue === 'number'\n\n const [active, setActive] = useState(hasInitValue)\n const [hasValue, setHasValue] = useState(hasInitValue)\n\n const [minusDisabled, setMinusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.min === undefined) return false\n\n const { value = Infinity, defaultValue = Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const minValue = typeof inputProps.min === 'number' ? inputProps.min : parseFloat(inputProps.min)\n\n return Math.min(initValue, initDefaultValue) <= minValue\n })\n\n const [plusDisabled, setPlusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.max === undefined) return false\n\n const { value = -Infinity, defaultValue = -Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const maxValue = typeof inputProps.max === 'number' ? inputProps.max : parseFloat(inputProps.max)\n\n return Math.max(initValue, initDefaultValue) >= maxValue\n })\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...inputProps}\n inputRef={\n inputRef ??\n ((input) => {\n ref.current = input\n })\n }\n className={className}\n style={style}\n size={typeof size === 'number' ? size : undefined}\n mask={mask}\n rounded={rounded}\n color={color}\n placeholderColor={placeholderColor}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n error={error}\n type={type}\n fluid={fluid}\n disabled={disabled}\n />\n )\n }\n\n return (\n <FormInputLabel\n className={className}\n style={style}\n size={size}\n sizeXXS={sizeXXS}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n sizeUnits={sizeUnits}\n sizes={sizes}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n palette={palette}\n error={error}\n success={success}\n label={label}\n labelPosition={labelPosition}\n icon={icon}\n text={text}\n primary={primary}\n secondary={secondary}\n onColored={onColored}\n disabled={disabled}\n inline={inline}\n active={active}\n textProps={textProps}\n iconProps={{\n size: 24,\n color: disabled ? 'content-disabled' : 'content-onmain-tertiary',\n ...iconProps,\n }}\n onClick={() => {\n if (ref.current) {\n ref.current.focus()\n }\n }}\n onFocus={(evt) => {\n if (evt.target !== evt.currentTarget) {\n setActive(true)\n }\n }}\n onBlur={(evt) => {\n if (evt.target !== evt.currentTarget && !hasValue) {\n setActive(false)\n }\n }}\n input={\n <Styled.Input\n {...inputProps}\n inputRef={(input) => {\n ref.current = input\n }}\n mask={mask}\n palette={palette}\n type={type}\n label={label}\n labelPosition={labelPosition}\n disabled={disabled}\n active={active}\n onChange={(evt) => {\n if (inputProps.onChange) {\n inputProps.onChange(evt)\n }\n\n if (type === 'number') {\n const currentValue = parseFloat(evt.currentTarget.value)\n\n const minValueReached = currentValue <= parseFloat(evt.currentTarget.min)\n const maxValueReached = currentValue >= parseFloat(evt.currentTarget.max)\n\n setMinusDisabled(minValueReached)\n setPlusDisabled(maxValueReached)\n\n if (minValueReached || maxValueReached) {\n evt.currentTarget.focus()\n }\n }\n }}\n onBlur={(evt) => {\n evt.stopPropagation()\n if (inputProps.onBlur) {\n inputProps.onBlur(evt)\n }\n\n setHasValue(Boolean(evt.currentTarget.value))\n setActive(Boolean(evt.currentTarget.value))\n }}\n />\n }\n controls={\n additionalControlIcon || type === 'number' ? (\n <>\n {additionalControlIcon && (\n <Styled.InputControl\n {...additionalControlButtonProps}\n type='button'\n palette={palette}\n disabled={disabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (additionalControlButtonProps.onClick) {\n additionalControlButtonProps.onClick(evt)\n }\n }}\n >\n <Icon\n as='span'\n size={24}\n color='inherit'\n name={typeof additionalControlIcon === 'string' ? additionalControlIcon : undefined}\n icon={typeof additionalControlIcon !== 'string' ? additionalControlIcon : undefined}\n {...additionalControlIconProps}\n />\n </Styled.InputControl>\n )}\n {type === 'number' && (\n <Spacer display='flex' marginLeft={4}>\n <Styled.InputControl\n {...minusButtonProps}\n type='button'\n palette={palette}\n disabled={disabled || minusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (minusButtonProps.onClick) {\n minusButtonProps.onClick(evt)\n }\n\n try {\n if (ref.current) {\n const prev = ref.current.value\n ref.current.stepDown()\n\n const decremented = ref.current.value\n if (prev !== decremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n >\n {minus === undefined ? (\n <Icon\n as='span'\n size={24}\n color='inherit'\n name='minus'\n preset='brand'\n {...numberControlIconProps}\n />\n ) : (\n <Icon\n as='span'\n size={24}\n color='inherit'\n name={typeof minus === 'string' ? minus : undefined}\n icon={typeof minus !== 'string' ? minus : undefined}\n {...numberControlIconProps}\n />\n )}\n </Styled.InputControl>\n <Styled.InputControl\n {...plusButtonProps}\n type='button'\n palette={palette}\n disabled={disabled || plusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (plusButtonProps.onClick) {\n plusButtonProps.onClick(evt)\n }\n\n try {\n if (ref.current) {\n const prev = ref.current.value\n ref.current.stepUp()\n\n const incremented = ref.current.value\n if (prev !== incremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n >\n {plus === undefined ? (\n <Icon\n as='span'\n size={24}\n color='inherit'\n name='plus'\n preset='brand'\n {...numberControlIconProps}\n />\n ) : (\n <Icon\n as='span'\n size={24}\n color='inherit'\n name={typeof plus === 'string' ? plus : undefined}\n icon={typeof plus !== 'string' ? plus : undefined}\n {...numberControlIconProps}\n />\n )}\n </Styled.InputControl>\n </Spacer>\n )}\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Phone: InputPhone,\n }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","mask","rounded","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","textProps","iconProps","controls","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","primary","secondary","onColored","fluid","disabled","inline","inputRef","inputProps","additionalControlIcon","additionalControlIconProps","buttonProps","additionalControlButtonProps","additional","numberControlIcon","numberControlIconProps","numberControlButtonProps","number","minus","plus","Array","isArray","minusButtonProps","plusButtonProps","ref","useRef","useImperativeHandle","current","hasInitValue","value","defaultValue","active","setActive","useState","hasValue","setHasValue","minusDisabled","setMinusDisabled","min","undefined","Infinity","initValue","parseFloat","initDefaultValue","minValue","Math","plusDisabled","setPlusDisabled","max","maxValue","_jsx","Styled","input","FormInputLabel","onClick","focus","onFocus","evt","target","currentTarget","onBlur","onChange","currentValue","minValueReached","maxValueReached","stopPropagation","Boolean","_jsxs","_Fragment","children","Icon","as","name","Spacer","display","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","stepUp","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}
1
+ {"version":3,"file":"Input.mjs","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef, useLayoutEffect, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { FormInputLabel, SIZES } from 'components/FormInputLabel'\nimport { FormInput } from 'components/FormInput'\nimport { InputPhone } from 'components/Input.Phone'\nimport { IconButton } from 'components/IconButton'\nimport { SIZES_ICON, SIZES_CONTROL } from './constants'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<input\\> элемента и пропсы \"react-input-mask\" [v2.0.4](https://www.npmjs.com/package/react-input-mask/v/2.0.4?activeTab=readme).\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Можно передать \"ref\", который будет ассоциирован с \\<input\\>.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Input/types.ts).\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n withMergedProps<InputProps, HTMLInputElement>(\n forwardRef((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n rounded = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n type = 'text',\n labelPosition = 'dynamic',\n iconProps = {},\n controls = {},\n addonButtonProps = {},\n preset,\n className,\n style,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n palette,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n error,\n success,\n label,\n icon,\n text,\n primary,\n secondary,\n contrast,\n onColored,\n fluid,\n disabled,\n inline,\n inputRef,\n ...inputProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const { icon: additionalControlIcon, buttonProps: additionalControlButtonProps = {} } = controls.additional ?? {}\n\n const [iconBefore, iconAfter = !additionalControlButtonProps.onClick ? additionalControlIcon : undefined] =\n Array.isArray(icon) ? icon : [icon]\n\n const inputAlwaysActive = Boolean(inputProps.mask && inputProps.alwaysShowMask)\n\n const controlPalette = {\n color: palette.controlsColor,\n colorHover: palette.controlsColorHover,\n colorActive: palette.controlsColorActive,\n colorDisabled: palette.controlsColorDisabled,\n backgroundColor: palette.controlsBackgroundColor,\n backgroundColorHover: palette.controlsBackgroundColorHover,\n backgroundColorActive: palette.controlsBackgroundColorActive,\n backgroundColorDisabled: palette.controlsBackgroundColorDisabled,\n }\n\n const ref = useRef<HTMLInputElement | null>(null)\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n const addonRef = useRef<HTMLButtonElement | null>(null)\n const minusRef = useRef<HTMLButtonElement | null>(null)\n const plusRef = useRef<HTMLButtonElement | null>(null)\n\n const inputLabelId = useMemo(() => nanoid(), [])\n\n const [inputActive, setInputActive] = useState(() => {\n if (inputAlwaysActive) return true\n\n const initValue = inputProps.value ?? inputProps.defaultValue\n\n return (typeof initValue === 'string' && initValue.length > 0) || typeof initValue === 'number'\n })\n\n const [minusDisabled, setMinusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.min === undefined) return false\n\n const { value = Infinity, defaultValue = Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const minValue = typeof inputProps.min === 'number' ? inputProps.min : parseFloat(inputProps.min)\n\n return Math.min(initValue, initDefaultValue) <= minValue\n })\n\n const [plusDisabled, setPlusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.max === undefined) return false\n\n const { value = -Infinity, defaultValue = -Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const maxValue = typeof inputProps.max === 'number' ? inputProps.max : parseFloat(inputProps.max)\n\n return Math.max(initValue, initDefaultValue) >= maxValue\n })\n\n useLayoutEffect(() => {\n if (inputAlwaysActive) {\n setInputActive(true)\n } else if (\n inputProps.value !== undefined &&\n inputProps.value !== null &&\n ref.current &&\n ref.current !== document.activeElement\n ) {\n setInputActive(\n (typeof inputProps.value === 'string' && inputProps.value.length > 0) ||\n typeof inputProps.value === 'number'\n )\n }\n }, [inputAlwaysActive, inputProps.value])\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...inputProps}\n inputRef={\n inputRef ??\n ((input) => {\n ref.current = input\n })\n }\n className={className}\n style={style}\n size={typeof size === 'number' ? size : undefined}\n rounded={rounded}\n color={color}\n placeholderColor={placeholderColor}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n error={error}\n type={type}\n fluid={fluid}\n disabled={disabled}\n />\n )\n }\n\n return (\n <FormInputLabel\n {...sizeProps}\n className={className}\n style={style}\n sizeUnits={sizeUnits}\n sizes={sizes}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n error={error}\n success={success}\n label={label}\n labelId={inputLabelId}\n labelPosition={labelPosition}\n icon={[iconBefore, iconAfter]}\n text={text}\n primary={primary}\n secondary={secondary}\n contrast={contrast}\n onColored={onColored}\n disabled={disabled}\n inline={inline}\n active={inputActive}\n palette={{\n color: disabled ? palette.colorDisabled : palette.color,\n backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n iconProps={{\n color: disabled ? 'content-disabled' : 'content-onmain-tertiary',\n sizes: SIZES_ICON,\n ...sizeProps,\n ...iconProps,\n }}\n onClick={() => {\n if (ref.current) {\n ref.current.focus()\n }\n }}\n onFocus={(evt) => {\n if (evt.target !== evt.currentTarget) {\n setInputActive(true)\n }\n }}\n onPointerDown={(evt) => {\n if (\n evt.target === ref.current ||\n !(evt.target instanceof Node) ||\n addonRef.current?.contains(evt.target) ||\n minusRef.current?.contains(evt.target) ||\n plusRef.current?.contains(evt.target)\n ) {\n return\n }\n evt.preventDefault()\n }}\n onBlur={(evt) => {\n if (!inputAlwaysActive && ref.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n setInputActive(Boolean(ref.current.value))\n }\n }}\n input={\n <FormInput\n {...inputProps}\n aria-labelledby={label ? inputLabelId : undefined}\n ref={ref}\n type={type}\n disabled={disabled}\n palette={{\n color: palette.inputColor,\n placeholderColor: palette.inputPlaceholderColor,\n colorDisabled: palette.inputColorDisabled,\n placeholderColorDisabled: palette.inputPlaceholderColorDisabled,\n }}\n onChange={(evt) => {\n if (inputProps.onChange) {\n inputProps.onChange(evt)\n }\n\n if (type === 'number') {\n const currentValue = parseFloat(evt.currentTarget.value)\n\n const minValueReached = currentValue <= parseFloat(evt.currentTarget.min)\n const maxValueReached = currentValue >= parseFloat(evt.currentTarget.max)\n\n setMinusDisabled(minValueReached)\n setPlusDisabled(maxValueReached)\n\n if (minValueReached || maxValueReached) {\n evt.currentTarget.focus()\n }\n }\n }}\n />\n }\n addon={\n addonButtonProps.onClick || additionalControlButtonProps.onClick ? (\n <IconButton\n ref={addonRef}\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n {...sizeProps}\n {...additionalControlButtonProps}\n {...addonButtonProps}\n icon={addonButtonProps.icon || additionalControlIcon}\n disabled={disabled || addonButtonProps.disabled || additionalControlButtonProps.disabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n if (addonButtonProps.onClick) addonButtonProps.onClick(evt)\n if (additionalControlButtonProps.onClick) additionalControlButtonProps.onClick(evt)\n }}\n />\n ) : undefined\n }\n controls={\n type === 'number' ? (\n <>\n <IconButton\n {...sizeProps}\n ref={minusRef}\n icon='minus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || minusDisabled}\n marginLeft={12}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepDown()\n\n const decremented = ref.current.value\n if (prev !== decremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n <Styled.IconButtonSeparated\n {...sizeProps}\n ref={plusRef}\n icon='plus'\n sizes={SIZES_CONTROL}\n palette={controlPalette}\n disabled={disabled || plusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (inputProps.readOnly) return\n\n try {\n if (ref.current) {\n setInputActive(true)\n\n const prev = ref.current.value\n ref.current.stepUp()\n\n const incremented = ref.current.value\n if (prev !== incremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n />\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Phone: InputPhone,\n }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rounded","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","iconProps","controls","addonButtonProps","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","primary","secondary","contrast","onColored","fluid","disabled","inline","inputRef","inputProps","sizeProps","additionalControlIcon","buttonProps","additionalControlButtonProps","additional","iconBefore","iconAfter","onClick","undefined","Array","isArray","inputAlwaysActive","Boolean","mask","alwaysShowMask","controlPalette","controlsColor","colorHover","controlsColorHover","colorActive","controlsColorActive","colorDisabled","controlsColorDisabled","backgroundColor","controlsBackgroundColor","backgroundColorHover","controlsBackgroundColorHover","backgroundColorActive","controlsBackgroundColorActive","backgroundColorDisabled","controlsBackgroundColorDisabled","ref","useRef","useImperativeHandle","current","addonRef","minusRef","plusRef","inputLabelId","useMemo","nanoid","inputActive","setInputActive","useState","initValue","value","defaultValue","length","minusDisabled","setMinusDisabled","min","Infinity","parseFloat","initDefaultValue","minValue","Math","plusDisabled","setPlusDisabled","max","maxValue","useLayoutEffect","document","activeElement","_jsx","Styled","input","FormInputLabel","labelId","active","borderColor","borderColorDisabled","SIZES_ICON","focus","onFocus","evt","target","currentTarget","onPointerDown","Node","contains","preventDefault","onBlur","relatedTarget","FormInput","inputColor","inputPlaceholderColor","inputColorDisabled","placeholderColorDisabled","inputPlaceholderColorDisabled","onChange","currentValue","minValueReached","maxValueReached","addon","IconButton","SIZES_CONTROL","stopPropagation","readOnly","_jsxs","_Fragment","children","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","stepUp","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ 'use strict';var constants=require('../IconButton/constants.js');exports.SIZES_CONTROL={l:constants.SIZES_SQUARE.xl,m:constants.SIZES_SQUARE.xl,s:constants.SIZES_SQUARE.l},exports.SIZES_ICON={l:{fontSize:24},m:{fontSize:24},s:{fontSize:20}};
2
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sources":["../../../../src/components/Input/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES_SQUARE as SIZES_ICON_BUTTON } from 'components/IconButton'\nimport type { InputSize } from './types'\n\nexport const SIZES_ICON: Record<InputSize, CSSProperties> = {\n l: { fontSize: 24 },\n m: { fontSize: 24 },\n s: { fontSize: 20 },\n}\n\nexport const SIZES_CONTROL: Record<InputSize, CSSProperties> = {\n l: SIZES_ICON_BUTTON.xl,\n m: SIZES_ICON_BUTTON.xl,\n s: SIZES_ICON_BUTTON.l,\n}\n"],"names":["l","SIZES_ICON_BUTTON","SIZES_SQUARE","xl","m","s","fontSize"],"mappings":"uFAU+D,CAC7DA,EAAGC,UAAiBC,aAACC,GACrBC,EAAGH,UAAiBC,aAACC,GACrBE,EAAGJ,UAAiBC,aAACF,sBATqC,CAC1DA,EAAG,CAAEM,SAAU,IACfF,EAAG,CAAEE,SAAU,IACfD,EAAG,CAAEC,SAAU"}
@@ -0,0 +1,2 @@
1
+ import{SIZES_SQUARE}from'../IconButton/constants.mjs';const SIZES_ICON={l:{fontSize:24},m:{fontSize:24},s:{fontSize:20}};const SIZES_CONTROL={l:SIZES_SQUARE.xl,m:SIZES_SQUARE.xl,s:SIZES_SQUARE.l};export{SIZES_CONTROL,SIZES_ICON};
2
+ //# sourceMappingURL=constants.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.mjs","sources":["../../../../src/components/Input/constants.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES_SQUARE as SIZES_ICON_BUTTON } from 'components/IconButton'\nimport type { InputSize } from './types'\n\nexport const SIZES_ICON: Record<InputSize, CSSProperties> = {\n l: { fontSize: 24 },\n m: { fontSize: 24 },\n s: { fontSize: 20 },\n}\n\nexport const SIZES_CONTROL: Record<InputSize, CSSProperties> = {\n l: SIZES_ICON_BUTTON.xl,\n m: SIZES_ICON_BUTTON.xl,\n s: SIZES_ICON_BUTTON.l,\n}\n"],"names":["SIZES_ICON","l","fontSize","m","s","SIZES_CONTROL","SIZES_ICON_BUTTON","xl"],"mappings":"sDAIO,MAAMA,WAA+C,CAC1DC,EAAG,CAAEC,SAAU,IACfC,EAAG,CAAED,SAAU,IACfE,EAAG,CAAEF,SAAU,KAGV,MAAMG,cAAkD,CAC7DJ,EAAGK,aAAkBC,GACrBJ,EAAGG,aAAkBC,GACrBH,EAAGE,aAAkBL"}
@@ -1,2 +1,2 @@
1
- 'use strict';var styled=require('styled-components');var InputMask=require('react-input-mask');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var color=require('../../mixins/color.js');var responsiveProperty=require('../../mixins/responsive-property.js');var helpers=require('./helpers.js');var focus=require('../../mixins/focus.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var InputMask__default=_interopDefault(InputMask);const errorStyle=styled.css(["border:1px solid ",";background-color:",";"],(o=>o.theme.colors.pomegranate),(o=>tinycolor.default(o.theme.colors.pomegranate).setAlpha(.1).toString()));const disabledStyle=styled.css(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);const focusStyle=styled.css(["&:focus{border:1px solid ",";outline:none;}"],(o=>o.theme.colors.accent));const roundedStyle=styled.css(["border-radius:",";"],(o=>o.theme.borderRadius));const baseInputStyle=o=>styled.css(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],o.theme.colors.white,o.theme.colors.alto,o.color?color.color(o.color):null,o.placeholderColor?color.color(o.placeholderColor):null,focusStyle,o.disabled?disabledStyle:null,o.rounded?roundedStyle:null,o.width?responsiveProperty.property(helpers.chooseWidthValue(o.width),o.fluid&&o.width!=='auto'?'max-width':'width'):null,responsiveProperty.responsiveNamedProperty({sizes:{widthXS:o.widthXS,widthS:o.widthS,widthM:o.widthM,widthL:o.widthL,widthXL:o.widthXL},cssProperty:o.fluid&&o.width!=='auto'?'max-width':'width',customSizeHandler:helpers.chooseWidthValue}),o.fluid?styled.css(["width:100%;"]):null,o.error?errorStyle:null);const Root=styled__default.default(InputMask__default.default).withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({displayName:"Input__Root",componentId:"ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],(o=>baseInputStyle(o)));const Input=styled__default.default(InputMask__default.default).withConfig({shouldForwardProp:o=>!['palette','label','labelPosition','active'].includes(o)}).withConfig({displayName:"Input",componentId:"ui__sc-1gazj3c-1"})([""," ",""],(o=>{let e='1';let r='0px';return o.label&&o.labelPosition==='dynamic'&&(e=""+(o.active?1:0),r='0.8em'),o.label&&o.labelPosition==='top'&&(r='0.8em'),o.label&&o.labelPosition==='center'&&(e=""+(o.active?1:0)),`\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ${e};\n padding-top: ${r};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n &[type="number"]::-webkit-outer-spin-button,\n &[type="number"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n cursor: text;\n outline: none;\n }\n `}),(o=>{return`\n color: ${(e={inputColor:o.theme.colors['content-onmain-primary'],inputPlaceholderColor:o.theme.colors['content-onmain-secondary'],inputColorDisabled:o.theme.colors['content-disabled'],inputPlaceholderColorDisabled:o.theme.colors['content-disabled'],...o.palette}).inputColor};\n &::placeholder {\n color: ${e.inputPlaceholderColor};\n }\n &:disabled {\n color: ${e.inputColorDisabled};\n }\n &:disabled::placeholder {\n color: ${e.inputPlaceholderColorDisabled};\n }\n`;var e}));const InputControl=styled__default.default.button.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"Input__InputControl",componentId:"ui__sc-1gazj3c-2"})(["box-sizing:border-box;appearance:none;position:relative;padding:5px;margin:0;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px;cursor:",";&:first-child{margin-left:4px;}&:not(:first-child){margin-left:9px;}&:not(:first-child)::before{content:'';position:absolute;width:1px;height:60%;top:50%;left:-5px;transform:translateY(-50%);}"," ",""],(o=>o.disabled?'not-allowed':'pointer'),(o=>{return`\n color: ${(e={controlsColor:o.theme.colors['content-onmain-tertiary'],controlsColorHover:o.theme.colors['content-onmain-primary'],controlsColorActive:o.theme.colors['content-onmain-primary'],controlsColorDisabled:o.theme.colors['content-disabled'],controlsBackgroundColor:o.theme.colors.transparent,controlsBackgroundColorHover:tinycolor.default(o.theme.colors['bg-oncolor-hover']).lighten(20).toString(),controlsBackgroundColorActive:o.theme.colors['bg-oncolor-hover'],controlsBackgroundColorDisabled:o.theme.colors.transparent,controlsSeparatorColor:o.theme.colors['border-onmain-default-large'],...o.palette}).controlsColor};\n background-color: ${e.controlsBackgroundColor};\n &:hover {\n color: ${e.controlsColorHover};\n background-color: ${e.controlsBackgroundColorHover};\n }\n &:active {\n color: ${e.controlsColorActive};\n background-color: ${e.controlsBackgroundColorActive};\n }\n &:disabled {\n color: ${e.controlsColorDisabled};\n background-color: ${e.controlsBackgroundColorDisabled};\n }\n &:not(:first-child)::before {\n background-color: ${e.controlsSeparatorColor};\n }\n`;var e}),focus.focus);exports.Input=Input,exports.InputControl=InputControl,exports.Root=Root,exports.baseInputStyle=baseInputStyle,exports.disabledStyle=disabledStyle,exports.errorStyle=errorStyle,exports.focusStyle=focusStyle,exports.roundedStyle=roundedStyle;
1
+ 'use strict';var styled=require('styled-components');var InputMask=require('react-input-mask');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var color=require('../../mixins/color.js');var responsiveProperty=require('../../mixins/responsive-property.js');var helpers=require('./helpers.js');var IconButton=require('../IconButton/IconButton.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);var InputMask__default=_interopDefault(InputMask);const errorStyle=styled.css(["border:1px solid ",";background-color:",";"],(e=>e.theme.colors.pomegranate),(e=>tinycolor.default(e.theme.colors.pomegranate).setAlpha(.1).toString()));const disabledStyle=styled.css(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);const focusStyle=styled.css(["&:focus{border:1px solid ",";outline:none;}"],(e=>e.theme.colors.accent));const roundedStyle=styled.css(["border-radius:",";"],(e=>e.theme.borderRadius));const baseInputStyle=e=>styled.css(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],e.theme.colors.white,e.theme.colors.alto,e.color?color.color(e.color):null,e.placeholderColor?color.color(e.placeholderColor):null,focusStyle,e.disabled?disabledStyle:null,e.rounded?roundedStyle:null,e.width?responsiveProperty.property(helpers.chooseWidthValue(e.width),e.fluid&&e.width!=='auto'?'max-width':'width'):null,responsiveProperty.responsiveNamedProperty({sizes:{widthXS:e.widthXS,widthS:e.widthS,widthM:e.widthM,widthL:e.widthL,widthXL:e.widthXL},cssProperty:e.fluid&&e.width!=='auto'?'max-width':'width',customSizeHandler:helpers.chooseWidthValue}),e.fluid?styled.css(["width:100%;"]):null,e.error?errorStyle:null);const Root=styled__default.default(InputMask__default.default).withConfig({shouldForwardProp:e=>!['color','placeholderColor','rounded','fluid','error'].includes(e)&&!e.includes('width')}).withConfig({displayName:"Input__Root",componentId:"ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],(e=>baseInputStyle(e)));const IconButtonSeparated=styled__default.default(IconButton.IconButton).withConfig({displayName:"Input__IconButtonSeparated",componentId:"ui__sc-1gazj3c-1"})(["",""],(e=>`\n position: relative;\n margin-left: 9px;\n\n &::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n background-color: ${e.theme.colors['border-onmain-default-large']};\n }\n `));exports.IconButtonSeparated=IconButtonSeparated,exports.Root=Root,exports.baseInputStyle=baseInputStyle,exports.disabledStyle=disabledStyle,exports.errorStyle=errorStyle,exports.focusStyle=focusStyle,exports.roundedStyle=roundedStyle;
2
2
  //# sourceMappingURL=style.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledBaseInputProps, StyledInputProps, StyledInputControlsProps, InputPalette } from './types'\n\nconst template = (\n palette: Pick<\n InputPalette,\n 'inputColor' | 'inputPlaceholderColor' | 'inputColorDisabled' | 'inputPlaceholderColorDisabled'\n >\n) => `\n color: ${palette.inputColor};\n &::placeholder {\n color: ${palette.inputPlaceholderColor};\n }\n &:disabled {\n color: ${palette.inputColorDisabled};\n }\n &:disabled::placeholder {\n color: ${palette.inputPlaceholderColorDisabled};\n }\n`\n\nconst controlsTemplate = (\n palette: Pick<\n InputPalette,\n | 'controlsColor'\n | 'controlsBackgroundColor'\n | 'controlsColorHover'\n | 'controlsBackgroundColorHover'\n | 'controlsColorActive'\n | 'controlsBackgroundColorActive'\n | 'controlsColorDisabled'\n | 'controlsBackgroundColorDisabled'\n | 'controlsSeparatorColor'\n >\n) => `\n color: ${palette.controlsColor};\n background-color: ${palette.controlsBackgroundColor};\n &:hover {\n color: ${palette.controlsColorHover};\n background-color: ${palette.controlsBackgroundColorHover};\n }\n &:active {\n color: ${palette.controlsColorActive};\n background-color: ${palette.controlsBackgroundColorActive};\n }\n &:disabled {\n color: ${palette.controlsColorDisabled};\n background-color: ${palette.controlsBackgroundColorDisabled};\n }\n &:not(:first-child)::before {\n background-color: ${palette.controlsSeparatorColor};\n }\n`\n\nexport const errorStyle = css`\n border: 1px solid ${(props) => props.theme.colors.pomegranate};\n background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n &:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n`\n\nexport const focusStyle = css`\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n`\n\nexport const roundedStyle = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n props: StyledProps<\n Pick<\n StyledBaseInputProps,\n | 'color'\n | 'placeholderColor'\n | 'disabled'\n | 'rounded'\n | 'width'\n | 'widthXS'\n | 'widthS'\n | 'widthM'\n | 'widthL'\n | 'widthXL'\n | 'fluid'\n | 'error'\n >\n >\n) => css`\n box-sizing: border-box;\n display: block;\n background-color: ${props.theme.colors.white};\n border: solid 1px ${props.theme.colors.alto};\n width: auto;\n appearance: none;\n font-size: 16px;\n ${props.color ? color(props.color) : null};\n &::placeholder {\n ${props.placeholderColor ? color(props.placeholderColor) : null}\n }\n ${focusStyle}\n ${props.disabled ? disabledStyle : null}\n ${props.rounded ? roundedStyle : null}\n\n ${props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n ${props.fluid\n ? css`\n width: 100%;\n `\n : null}\n ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n line-height: 24px;\n padding: 15px 20px 11px;\n ${(props) => baseInputStyle(props)}\n`\n\nexport const Input: React.ComponentType<StyledInputProps> = styled(InputMask).withConfig<StyledInputProps>({\n shouldForwardProp: (propKey) => !['palette', 'label', 'labelPosition', 'active'].includes(propKey),\n})`\n ${(props) => {\n let opacity = '1'\n let paddingTop = '0px'\n\n if (props.label && props.labelPosition === 'dynamic') {\n opacity = `${props.active ? 1 : 0}`\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'top') {\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'center') {\n opacity = `${props.active ? 1 : 0}`\n }\n\n return `\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ${opacity};\n padding-top: ${paddingTop};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n cursor: text;\n outline: none;\n }\n `\n }}\n ${(props) =>\n template({\n inputColor: props.theme.colors['content-onmain-primary'],\n inputPlaceholderColor: props.theme.colors['content-onmain-secondary'],\n inputColorDisabled: props.theme.colors['content-disabled'],\n inputPlaceholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n\nexport const InputControl = styled.button.withConfig<StyledInputControlsProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n position: relative;\n padding: 5px;\n margin: 0;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 8px;\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n &:first-child {\n margin-left: 4px;\n }\n &:not(:first-child) {\n margin-left: 9px;\n }\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n }\n ${(props) =>\n controlsTemplate({\n controlsColor: props.theme.colors['content-onmain-tertiary'],\n controlsColorHover: props.theme.colors['content-onmain-primary'],\n controlsColorActive: props.theme.colors['content-onmain-primary'],\n controlsColorDisabled: props.theme.colors['content-disabled'],\n controlsBackgroundColor: props.theme.colors.transparent,\n controlsBackgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .lighten(20)\n .toString() as CSSColor,\n controlsBackgroundColorActive: props.theme.colors['bg-oncolor-hover'],\n controlsBackgroundColorDisabled: props.theme.colors.transparent,\n controlsSeparatorColor: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n\n ${focus}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","default","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","displayName","componentId","Input","propKey","opacity","paddingTop","label","labelPosition","active","template","palette","inputColor","inputPlaceholderColor","inputColorDisabled","inputPlaceholderColorDisabled","InputControl","button","controlsTemplate","controlsColor","controlsColorHover","controlsColorActive","controlsColorDisabled","controlsBackgroundColor","transparent","controlsBackgroundColorHover","lighten","controlsBackgroundColorActive","controlsBackgroundColorDisabled","controlsSeparatorColor","focus"],"mappings":"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"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { IconButton } from 'components/IconButton'\nimport type { StyledBaseInputProps } from './types'\n\nexport const errorStyle = css`\n border: 1px solid ${(props) => props.theme.colors.pomegranate};\n background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n &:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n`\n\nexport const focusStyle = css`\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n`\n\nexport const roundedStyle = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n props: StyledProps<\n Pick<\n StyledBaseInputProps,\n | 'color'\n | 'placeholderColor'\n | 'disabled'\n | 'rounded'\n | 'width'\n | 'widthXS'\n | 'widthS'\n | 'widthM'\n | 'widthL'\n | 'widthXL'\n | 'fluid'\n | 'error'\n >\n >\n) => css`\n box-sizing: border-box;\n display: block;\n background-color: ${props.theme.colors.white};\n border: solid 1px ${props.theme.colors.alto};\n width: auto;\n appearance: none;\n font-size: 16px;\n ${props.color ? color(props.color) : null};\n &::placeholder {\n ${props.placeholderColor ? color(props.placeholderColor) : null}\n }\n ${focusStyle}\n ${props.disabled ? disabledStyle : null}\n ${props.rounded ? roundedStyle : null}\n\n ${props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n ${props.fluid\n ? css`\n width: 100%;\n `\n : null}\n ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n line-height: 24px;\n padding: 15px 20px 11px;\n ${(props) => baseInputStyle(props)}\n`\n\nexport const IconButtonSeparated = styled(IconButton)`\n ${(props) => `\n position: relative;\n margin-left: 9px;\n\n &::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n background-color: ${props.theme.colors['border-onmain-default-large']};\n }\n `}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","default","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","displayName","componentId","IconButtonSeparated","IconButton"],"mappings":"mjBAUaA,WAAaC,OAAAA,IAAG,CAAA,oBAAA,qBAAA,MACNC,GAAUA,EAAMC,MAAMC,OAAOC,cAC7BH,GAAUI,UAASC,QAACL,EAAMC,MAAMC,OAAOC,aAAaG,SAAS,IAAKC,aAG5EC,MAAAA,cAAgBT,OAAAA,IAW5B,CAAA,qOAEYU,MAAAA,WAAaV,OAAAA,qDAEDC,GAAUA,EAAMC,MAAMC,OAAOQ,SAKzCC,MAAAA,aAAeZ,OAAAA,IACRC,CAAAA,iBAAAA,MAAAA,GAAUA,EAAMC,MAAMW,eAGnC,MAAMC,eACXb,GAiBGD,OAAAA,IAAG,CAAA,wDAAA,qBAAA,8CAAA,mBAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAGcC,EAAMC,MAAMC,OAAOY,MACnBd,EAAMC,MAAMC,OAAOa,KAIrCf,EAAMgB,MAAQA,MAAAA,MAAMhB,EAAMgB,OAAS,KAEjChB,EAAMiB,iBAAmBD,MAAKA,MAAChB,EAAMiB,kBAAoB,KAE3DR,WACAT,EAAMkB,SAAWV,cAAgB,KACjCR,EAAMmB,QAAUR,aAAe,KAE/BX,EAAMoB,MACJC,mBAAAA,SAASC,QAAAA,iBAAiBtB,EAAMoB,OAAQpB,EAAMuB,OAASvB,EAAMoB,QAAU,OAAS,YAAc,SAC9F,KACFI,mBAAAA,wBAAwB,CACxBC,MAAO,CACLC,QAAS1B,EAAM0B,QACfC,OAAQ3B,EAAM2B,OACdC,OAAQ5B,EAAM4B,OACdC,OAAQ7B,EAAM6B,OACdC,QAAS9B,EAAM8B,SAEjBC,YAAa/B,EAAMuB,OAASvB,EAAMoB,QAAU,OAAS,YAAc,QACnEY,kBAAmBV,QAAAA,mBAEnBtB,EAAMuB,MACJxB,OAAAA,IAAG,CAAA,gBAGH,KACFC,EAAMiC,MAAQnC,WAAa,MAGxB,MAAMoC,KAAkDC,gBAAM9B,QAAC+B,4BAAWC,WAAiC,CAChHC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,SAASC,SAASD,KAAUA,EAAKC,SAAS,WAC/FH,WAAA,CAAAI,YAAA,cAAAC,YAAA,oBAH6DP,CAG7D,CAAA,2CAAA,KAGGnC,GAAUa,eAAeb,KAGvB,MAAM2C,oBAAsBR,gBAAM9B,QAACuC,uBAAWP,WAAA,CAAAI,YAAA,6BAAAC,YAAA,oBAAlBP,CAAkB,CAAA,GAAA,KAChDnC,GAAU,8PAYWA,EAAMC,MAAMC,OAAO"}
@@ -1,2 +1,2 @@
1
- import styled,{css}from'styled-components';import InputMask from'react-input-mask';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{color}from'../../mixins/color.mjs';import{property,responsiveNamedProperty}from'../../mixins/responsive-property.mjs';import{chooseWidthValue}from'./helpers.mjs';import{focus}from'../../mixins/focus.mjs';const errorStyle=css(["border:1px solid ",";background-color:",";"],(o=>o.theme.colors.pomegranate),(o=>tinycolor(o.theme.colors.pomegranate).setAlpha(.1).toString()));const disabledStyle=css(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);const focusStyle=css(["&:focus{border:1px solid ",";outline:none;}"],(o=>o.theme.colors.accent));const roundedStyle=css(["border-radius:",";"],(o=>o.theme.borderRadius));const baseInputStyle=o=>css(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],o.theme.colors.white,o.theme.colors.alto,o.color?color(o.color):null,o.placeholderColor?color(o.placeholderColor):null,focusStyle,o.disabled?disabledStyle:null,o.rounded?roundedStyle:null,o.width?property(chooseWidthValue(o.width),o.fluid&&o.width!=='auto'?'max-width':'width'):null,responsiveNamedProperty({sizes:{widthXS:o.widthXS,widthS:o.widthS,widthM:o.widthM,widthL:o.widthL,widthXL:o.widthXL},cssProperty:o.fluid&&o.width!=='auto'?'max-width':'width',customSizeHandler:chooseWidthValue}),o.fluid?css(["width:100%;"]):null,o.error?errorStyle:null);const Root=styled(InputMask).withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({displayName:"Input__Root",componentId:"ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],(o=>baseInputStyle(o)));const Input=styled(InputMask).withConfig({shouldForwardProp:o=>!['palette','label','labelPosition','active'].includes(o)}).withConfig({displayName:"Input",componentId:"ui__sc-1gazj3c-1"})([""," ",""],(o=>{let r='1';let e='0px';return o.label&&o.labelPosition==='dynamic'&&(r=""+(o.active?1:0),e='0.8em'),o.label&&o.labelPosition==='top'&&(e='0.8em'),o.label&&o.labelPosition==='center'&&(r=""+(o.active?1:0)),`\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ${r};\n padding-top: ${e};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n &[type="number"]::-webkit-outer-spin-button,\n &[type="number"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n cursor: text;\n outline: none;\n }\n `}),(o=>{return`\n color: ${(r={inputColor:o.theme.colors['content-onmain-primary'],inputPlaceholderColor:o.theme.colors['content-onmain-secondary'],inputColorDisabled:o.theme.colors['content-disabled'],inputPlaceholderColorDisabled:o.theme.colors['content-disabled'],...o.palette}).inputColor};\n &::placeholder {\n color: ${r.inputPlaceholderColor};\n }\n &:disabled {\n color: ${r.inputColorDisabled};\n }\n &:disabled::placeholder {\n color: ${r.inputPlaceholderColorDisabled};\n }\n`;var r}));const InputControl=styled.button.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"Input__InputControl",componentId:"ui__sc-1gazj3c-2"})(["box-sizing:border-box;appearance:none;position:relative;padding:5px;margin:0;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px;cursor:",";&:first-child{margin-left:4px;}&:not(:first-child){margin-left:9px;}&:not(:first-child)::before{content:'';position:absolute;width:1px;height:60%;top:50%;left:-5px;transform:translateY(-50%);}"," ",""],(o=>o.disabled?'not-allowed':'pointer'),(o=>{return`\n color: ${(r={controlsColor:o.theme.colors['content-onmain-tertiary'],controlsColorHover:o.theme.colors['content-onmain-primary'],controlsColorActive:o.theme.colors['content-onmain-primary'],controlsColorDisabled:o.theme.colors['content-disabled'],controlsBackgroundColor:o.theme.colors.transparent,controlsBackgroundColorHover:tinycolor(o.theme.colors['bg-oncolor-hover']).lighten(20).toString(),controlsBackgroundColorActive:o.theme.colors['bg-oncolor-hover'],controlsBackgroundColorDisabled:o.theme.colors.transparent,controlsSeparatorColor:o.theme.colors['border-onmain-default-large'],...o.palette}).controlsColor};\n background-color: ${r.controlsBackgroundColor};\n &:hover {\n color: ${r.controlsColorHover};\n background-color: ${r.controlsBackgroundColorHover};\n }\n &:active {\n color: ${r.controlsColorActive};\n background-color: ${r.controlsBackgroundColorActive};\n }\n &:disabled {\n color: ${r.controlsColorDisabled};\n background-color: ${r.controlsBackgroundColorDisabled};\n }\n &:not(:first-child)::before {\n background-color: ${r.controlsSeparatorColor};\n }\n`;var r}),focus);export{Input,InputControl,Root,baseInputStyle,disabledStyle,errorStyle,focusStyle,roundedStyle};
1
+ import styled,{css}from'styled-components';import InputMask from'react-input-mask';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{color}from'../../mixins/color.mjs';import{property,responsiveNamedProperty}from'../../mixins/responsive-property.mjs';import{chooseWidthValue}from'./helpers.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const errorStyle=css(["border:1px solid ",";background-color:",";"],(o=>o.theme.colors.pomegranate),(o=>tinycolor(o.theme.colors.pomegranate).setAlpha(.1).toString()));const disabledStyle=css(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);const focusStyle=css(["&:focus{border:1px solid ",";outline:none;}"],(o=>o.theme.colors.accent));const roundedStyle=css(["border-radius:",";"],(o=>o.theme.borderRadius));const baseInputStyle=o=>css(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],o.theme.colors.white,o.theme.colors.alto,o.color?color(o.color):null,o.placeholderColor?color(o.placeholderColor):null,focusStyle,o.disabled?disabledStyle:null,o.rounded?roundedStyle:null,o.width?property(chooseWidthValue(o.width),o.fluid&&o.width!=='auto'?'max-width':'width'):null,responsiveNamedProperty({sizes:{widthXS:o.widthXS,widthS:o.widthS,widthM:o.widthM,widthL:o.widthL,widthXL:o.widthXL},cssProperty:o.fluid&&o.width!=='auto'?'max-width':'width',customSizeHandler:chooseWidthValue}),o.fluid?css(["width:100%;"]):null,o.error?errorStyle:null);const Root=styled(InputMask).withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({displayName:"Input__Root",componentId:"ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],(o=>baseInputStyle(o)));const IconButtonSeparated=styled(IconButton).withConfig({displayName:"Input__IconButtonSeparated",componentId:"ui__sc-1gazj3c-1"})(["",""],(o=>`\n position: relative;\n margin-left: 9px;\n\n &::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n background-color: ${o.theme.colors['border-onmain-default-large']};\n }\n `));export{IconButtonSeparated,Root,baseInputStyle,disabledStyle,errorStyle,focusStyle,roundedStyle};
2
2
  //# sourceMappingURL=style.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledBaseInputProps, StyledInputProps, StyledInputControlsProps, InputPalette } from './types'\n\nconst template = (\n palette: Pick<\n InputPalette,\n 'inputColor' | 'inputPlaceholderColor' | 'inputColorDisabled' | 'inputPlaceholderColorDisabled'\n >\n) => `\n color: ${palette.inputColor};\n &::placeholder {\n color: ${palette.inputPlaceholderColor};\n }\n &:disabled {\n color: ${palette.inputColorDisabled};\n }\n &:disabled::placeholder {\n color: ${palette.inputPlaceholderColorDisabled};\n }\n`\n\nconst controlsTemplate = (\n palette: Pick<\n InputPalette,\n | 'controlsColor'\n | 'controlsBackgroundColor'\n | 'controlsColorHover'\n | 'controlsBackgroundColorHover'\n | 'controlsColorActive'\n | 'controlsBackgroundColorActive'\n | 'controlsColorDisabled'\n | 'controlsBackgroundColorDisabled'\n | 'controlsSeparatorColor'\n >\n) => `\n color: ${palette.controlsColor};\n background-color: ${palette.controlsBackgroundColor};\n &:hover {\n color: ${palette.controlsColorHover};\n background-color: ${palette.controlsBackgroundColorHover};\n }\n &:active {\n color: ${palette.controlsColorActive};\n background-color: ${palette.controlsBackgroundColorActive};\n }\n &:disabled {\n color: ${palette.controlsColorDisabled};\n background-color: ${palette.controlsBackgroundColorDisabled};\n }\n &:not(:first-child)::before {\n background-color: ${palette.controlsSeparatorColor};\n }\n`\n\nexport const errorStyle = css`\n border: 1px solid ${(props) => props.theme.colors.pomegranate};\n background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n &:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n`\n\nexport const focusStyle = css`\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n`\n\nexport const roundedStyle = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n props: StyledProps<\n Pick<\n StyledBaseInputProps,\n | 'color'\n | 'placeholderColor'\n | 'disabled'\n | 'rounded'\n | 'width'\n | 'widthXS'\n | 'widthS'\n | 'widthM'\n | 'widthL'\n | 'widthXL'\n | 'fluid'\n | 'error'\n >\n >\n) => css`\n box-sizing: border-box;\n display: block;\n background-color: ${props.theme.colors.white};\n border: solid 1px ${props.theme.colors.alto};\n width: auto;\n appearance: none;\n font-size: 16px;\n ${props.color ? color(props.color) : null};\n &::placeholder {\n ${props.placeholderColor ? color(props.placeholderColor) : null}\n }\n ${focusStyle}\n ${props.disabled ? disabledStyle : null}\n ${props.rounded ? roundedStyle : null}\n\n ${props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n ${props.fluid\n ? css`\n width: 100%;\n `\n : null}\n ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n line-height: 24px;\n padding: 15px 20px 11px;\n ${(props) => baseInputStyle(props)}\n`\n\nexport const Input: React.ComponentType<StyledInputProps> = styled(InputMask).withConfig<StyledInputProps>({\n shouldForwardProp: (propKey) => !['palette', 'label', 'labelPosition', 'active'].includes(propKey),\n})`\n ${(props) => {\n let opacity = '1'\n let paddingTop = '0px'\n\n if (props.label && props.labelPosition === 'dynamic') {\n opacity = `${props.active ? 1 : 0}`\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'top') {\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'center') {\n opacity = `${props.active ? 1 : 0}`\n }\n\n return `\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ${opacity};\n padding-top: ${paddingTop};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n cursor: text;\n outline: none;\n }\n `\n }}\n ${(props) =>\n template({\n inputColor: props.theme.colors['content-onmain-primary'],\n inputPlaceholderColor: props.theme.colors['content-onmain-secondary'],\n inputColorDisabled: props.theme.colors['content-disabled'],\n inputPlaceholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n\nexport const InputControl = styled.button.withConfig<StyledInputControlsProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n position: relative;\n padding: 5px;\n margin: 0;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 8px;\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n &:first-child {\n margin-left: 4px;\n }\n &:not(:first-child) {\n margin-left: 9px;\n }\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n }\n ${(props) =>\n controlsTemplate({\n controlsColor: props.theme.colors['content-onmain-tertiary'],\n controlsColorHover: props.theme.colors['content-onmain-primary'],\n controlsColorActive: props.theme.colors['content-onmain-primary'],\n controlsColorDisabled: props.theme.colors['content-disabled'],\n controlsBackgroundColor: props.theme.colors.transparent,\n controlsBackgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .lighten(20)\n .toString() as CSSColor,\n controlsBackgroundColorActive: props.theme.colors['bg-oncolor-hover'],\n controlsBackgroundColorDisabled: props.theme.colors.transparent,\n controlsSeparatorColor: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n\n ${focus}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","displayName","componentId","Input","propKey","opacity","paddingTop","label","labelPosition","active","template","palette","inputColor","inputPlaceholderColor","inputColorDisabled","inputPlaceholderColorDisabled","InputControl","button","controlsTemplate","controlsColor","controlsColorHover","controlsColorActive","controlsColorDisabled","controlsBackgroundColor","transparent","controlsBackgroundColorHover","lighten","controlsBackgroundColorActive","controlsBackgroundColorDisabled","controlsSeparatorColor","focus"],"mappings":"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"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { IconButton } from 'components/IconButton'\nimport type { StyledBaseInputProps } from './types'\n\nexport const errorStyle = css`\n border: 1px solid ${(props) => props.theme.colors.pomegranate};\n background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n &:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n`\n\nexport const focusStyle = css`\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n`\n\nexport const roundedStyle = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n props: StyledProps<\n Pick<\n StyledBaseInputProps,\n | 'color'\n | 'placeholderColor'\n | 'disabled'\n | 'rounded'\n | 'width'\n | 'widthXS'\n | 'widthS'\n | 'widthM'\n | 'widthL'\n | 'widthXL'\n | 'fluid'\n | 'error'\n >\n >\n) => css`\n box-sizing: border-box;\n display: block;\n background-color: ${props.theme.colors.white};\n border: solid 1px ${props.theme.colors.alto};\n width: auto;\n appearance: none;\n font-size: 16px;\n ${props.color ? color(props.color) : null};\n &::placeholder {\n ${props.placeholderColor ? color(props.placeholderColor) : null}\n }\n ${focusStyle}\n ${props.disabled ? disabledStyle : null}\n ${props.rounded ? roundedStyle : null}\n\n ${props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n ${props.fluid\n ? css`\n width: 100%;\n `\n : null}\n ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n line-height: 24px;\n padding: 15px 20px 11px;\n ${(props) => baseInputStyle(props)}\n`\n\nexport const IconButtonSeparated = styled(IconButton)`\n ${(props) => `\n position: relative;\n margin-left: 9px;\n\n &::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n background-color: ${props.theme.colors['border-onmain-default-large']};\n }\n `}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","displayName","componentId","IconButtonSeparated","IconButton"],"mappings":"0ZAUaA,WAAaC,IAAG,CAAA,oBAAA,qBAAA,MACNC,GAAUA,EAAMC,MAAMC,OAAOC,cAC7BH,GAAUI,UAAUJ,EAAMC,MAAMC,OAAOC,aAAaE,SAAS,IAAKC,aAG5EC,MAAAA,cAAgBR,IAW5B,CAAA,qOAEYS,MAAAA,WAAaT,qDAEDC,GAAUA,EAAMC,MAAMC,OAAOO,SAKzCC,MAAAA,aAAeX,IACRC,CAAAA,iBAAAA,MAAAA,GAAUA,EAAMC,MAAMU,eAGnC,MAAMC,eACXZ,GAiBGD,IAAG,CAAA,wDAAA,qBAAA,8CAAA,mBAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAGcC,EAAMC,MAAMC,OAAOW,MACnBb,EAAMC,MAAMC,OAAOY,KAIrCd,EAAMe,MAAQA,MAAMf,EAAMe,OAAS,KAEjCf,EAAMgB,iBAAmBD,MAAMf,EAAMgB,kBAAoB,KAE3DR,WACAR,EAAMiB,SAAWV,cAAgB,KACjCP,EAAMkB,QAAUR,aAAe,KAE/BV,EAAMmB,MACJC,SAASC,iBAAiBrB,EAAMmB,OAAQnB,EAAMsB,OAAStB,EAAMmB,QAAU,OAAS,YAAc,SAC9F,KACFI,wBAAwB,CACxBC,MAAO,CACLC,QAASzB,EAAMyB,QACfC,OAAQ1B,EAAM0B,OACdC,OAAQ3B,EAAM2B,OACdC,OAAQ5B,EAAM4B,OACdC,QAAS7B,EAAM6B,SAEjBC,YAAa9B,EAAMsB,OAAStB,EAAMmB,QAAU,OAAS,YAAc,QACnEY,kBAAmBV,mBAEnBrB,EAAMsB,MACJvB,IAAG,CAAA,gBAGH,KACFC,EAAMgC,MAAQlC,WAAa,MAGxB,MAAMmC,KAAkDC,OAAOC,WAAWC,WAAiC,CAChHC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,SAASC,SAASD,KAAUA,EAAKC,SAAS,WAC/FH,WAAA,CAAAI,YAAA,cAAAC,YAAA,oBAH6DP,CAG7D,CAAA,2CAAA,KAGGlC,GAAUY,eAAeZ,KAGvB,MAAM0C,oBAAsBR,OAAOS,YAAWP,WAAA,CAAAI,YAAA,6BAAAC,YAAA,oBAAlBP,CAAkB,CAAA,GAAA,KAChDlC,GAAU,8PAYWA,EAAMC,MAAMC,OAAO"}