componenteshospitais 1.7.2 → 1.7.3

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 (7) hide show
  1. package/dist/cjs/index.js +5 -5
  2. package/dist/esm/index.js +5 -5
  3. package/dist/types/components/InputField.d.ts +2 -0
  4. package/package.json +1 -1
  5. package/src/components/Busca.tsx +1 -1
  6. package/src/components/InputField.tsx +6 -2
  7. package/src/styles/input.module.css +1 -1
package/dist/cjs/index.js CHANGED
@@ -117,7 +117,7 @@ var CardImage = function (_a) {
117
117
  React$2.createElement("span", { className: styles$6.cardText }, fileName ? fileName : 'Selecione um arquivo'))) : (href ? (React$2.createElement("a", { href: href, target: externo ? "_blank" : "_self", rel: externo ? "noopener noreferrer" : undefined, className: "".concat(styles$6.botaoCert), title: href, style: { width: '100%', height: '100%' } }, content)) : (React$2.createElement("div", { className: "".concat(styles$6.botaoCert), onClick: handleActionClick, style: { width: '100%', height: '100%' } }, content)))));
118
118
  };
119
119
 
120
- var css_248z$5 = ".input-module_inputSubmit__21-Pj{align-self:center;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:15px;padding:10px;width:10rem}.input-module_inputPadrao__jypjY{border:1px solid #ccc;border-radius:.5rem;font-style:italic;padding:.8rem 0 .8rem 1rem;width:100%}.input-module_inputPadrao__jypjY:focus{outline:none}.input-module_searchIcon__miuBI{color:#888;font-size:1.2rem;left:10px;position:absolute}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj{background-color:var(--blue)}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj:hover{background-color:var(--red)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj{background-color:var(--green)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj:hover{background-color:var(--lightblue)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj{background-color:var(--red)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj:hover{background-color:var(--blue)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj{background-color:var(--cartaoGreen)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj:hover{background-color:var(--cartaoBlue)}";
120
+ var css_248z$5 = ".input-module_inputSubmit__21-Pj{align-self:center;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:15px;padding:10px;width:10rem}.input-module_inputPadrao__jypjY{border:1px solid #ccc;border-radius:.5rem;font-style:italic;padding:.8rem 0 .8rem 1rem;width:100%}.input-module_inputPadrao__jypjY:focus{outline:none}.input-module_searchIcon__miuBI{color:#888;font-size:1.2rem;left:75px;position:absolute}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj{background-color:var(--blue)}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj:hover{background-color:var(--red)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj{background-color:var(--green)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj:hover{background-color:var(--lightblue)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj{background-color:var(--red)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj:hover{background-color:var(--blue)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj{background-color:var(--cartaoGreen)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj:hover{background-color:var(--cartaoBlue)}";
121
121
  var styles$5 = {"inputSubmit":"input-module_inputSubmit__21-Pj","inputPadrao":"input-module_inputPadrao__jypjY","searchIcon":"input-module_searchIcon__miuBI","empresa1":"input-module_empresa1__bxBov","empresa3":"input-module_empresa3__RU89A","empresa4":"input-module_empresa4__rWmWH","empresa5":"input-module_empresa5__rJ8DJ"};
122
122
  styleInject(css_248z$5);
123
123
 
@@ -1493,7 +1493,7 @@ function FaDownload (props) {
1493
1493
  }
1494
1494
 
1495
1495
  var InputField = function (_a) {
1496
- var type = _a.type, id = _a.id, placeholder = _a.placeholder, onChange = _a.onChange, value = _a.value, label = _a.label, largura = _a.largura, readonly = _a.readonly, disabled = _a.disabled, required = _a.required, maxLength = _a.maxLength, maskType = _a.maskType, onKeyPress = _a.onKeyPress;
1496
+ var type = _a.type, id = _a.id, placeholder = _a.placeholder, onChange = _a.onChange, value = _a.value, label = _a.label, largura = _a.largura, readonly = _a.readonly, disabled = _a.disabled, required = _a.required, maxLength = _a.maxLength, maskType = _a.maskType, onKeyPress = _a.onKeyPress, corFundo = _a.corFundo, corLabel = _a.corLabel;
1497
1497
  var _b = React$2.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
1498
1498
  var togglePasswordVisibility = function () {
1499
1499
  setIsPasswordVisible(!isPasswordVisible);
@@ -1511,9 +1511,9 @@ var InputField = function (_a) {
1511
1511
  maskType === 'date' ? '99/99/9999' :
1512
1512
  maskType === 'cep' ? '99999-999' : '';
1513
1513
  return (React$2.createElement(React$2.Fragment, null,
1514
- label && React$2.createElement("label", { htmlFor: id }, label),
1514
+ label && React$2.createElement("label", { htmlFor: id, style: { color: corLabel ? corLabel : '' } }, label),
1515
1515
  React$2.createElement("div", { className: styles$5.inputWrapper, style: { position: 'relative', display: 'flex', alignItems: 'center' } },
1516
- maskType ? (React$2.createElement(reactInputMask, { mask: mask, value: value, onChange: handleChange, disabled: disabled }, function (inputProps) { return (React$2.createElement("input", __assign({}, inputProps, { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, placeholder: placeholder, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, required: required, onKeyPress: onKeyPress }))); })) : (React$2.createElement("input", { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, value: value, placeholder: placeholder, onChange: handleChange, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, disabled: disabled, required: required, maxLength: type === 'text' ? appliedMaxLength : undefined, onKeyPress: onKeyPress })),
1516
+ maskType ? (React$2.createElement(reactInputMask, { mask: mask, value: value, onChange: handleChange, disabled: disabled }, function (inputProps) { return (React$2.createElement("input", __assign({}, inputProps, { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, placeholder: placeholder, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: (disabled ? '#e5e5e5' : (corFundo ? corFundo : '')) }, readOnly: readonly, required: required, onKeyPress: onKeyPress }))); })) : (React$2.createElement("input", { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, value: value, placeholder: placeholder, onChange: handleChange, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, disabled: disabled, required: required, maxLength: type === 'text' ? appliedMaxLength : undefined, onKeyPress: onKeyPress })),
1517
1517
  type === 'password' && (React$2.createElement("div", { onClick: togglePasswordVisibility, style: { cursor: 'pointer', position: 'absolute', right: '10px', fontSize: '25px', marginTop: '5px', color: "#f0f0f0" } }, isPasswordVisible ? React$2.createElement(FaEyeSlash, null) : React$2.createElement(FaEye, null))))));
1518
1518
  };
1519
1519
 
@@ -1610,7 +1610,7 @@ var Busca = function (_a) {
1610
1610
  document.removeEventListener('mousedown', handleClickOutside);
1611
1611
  };
1612
1612
  }, []);
1613
- return (React$2.createElement("div", { style: { position: 'relative' }, ref: inputRef },
1613
+ return (React$2.createElement("div", { style: { position: 'relative', display: 'flex', alignItems: 'center', gap: '10px', width: '100%' }, ref: inputRef },
1614
1614
  React$2.createElement("label", { htmlFor: "codigoCbhpm" }, label),
1615
1615
  showIcon && React$2.createElement(FaSearch, { className: styles$5.searchIcon }),
1616
1616
  React$2.createElement("input", { type: "text", id: "codigoCbhpm", value: value, onChange: handleInputChange, onFocus: handleFocus, placeholder: "Digite para buscar...", autoComplete: "off", className: styles$5.inputPadrao, style: { width: '100%', paddingLeft: showIcon ? '30px' : '0' } }),
package/dist/esm/index.js CHANGED
@@ -115,7 +115,7 @@ var CardImage = function (_a) {
115
115
  React$2.createElement("span", { className: styles$6.cardText }, fileName ? fileName : 'Selecione um arquivo'))) : (href ? (React$2.createElement("a", { href: href, target: externo ? "_blank" : "_self", rel: externo ? "noopener noreferrer" : undefined, className: "".concat(styles$6.botaoCert), title: href, style: { width: '100%', height: '100%' } }, content)) : (React$2.createElement("div", { className: "".concat(styles$6.botaoCert), onClick: handleActionClick, style: { width: '100%', height: '100%' } }, content)))));
116
116
  };
117
117
 
118
- var css_248z$5 = ".input-module_inputSubmit__21-Pj{align-self:center;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:15px;padding:10px;width:10rem}.input-module_inputPadrao__jypjY{border:1px solid #ccc;border-radius:.5rem;font-style:italic;padding:.8rem 0 .8rem 1rem;width:100%}.input-module_inputPadrao__jypjY:focus{outline:none}.input-module_searchIcon__miuBI{color:#888;font-size:1.2rem;left:10px;position:absolute}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj{background-color:var(--blue)}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj:hover{background-color:var(--red)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj{background-color:var(--green)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj:hover{background-color:var(--lightblue)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj{background-color:var(--red)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj:hover{background-color:var(--blue)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj{background-color:var(--cartaoGreen)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj:hover{background-color:var(--cartaoBlue)}";
118
+ var css_248z$5 = ".input-module_inputSubmit__21-Pj{align-self:center;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:15px;padding:10px;width:10rem}.input-module_inputPadrao__jypjY{border:1px solid #ccc;border-radius:.5rem;font-style:italic;padding:.8rem 0 .8rem 1rem;width:100%}.input-module_inputPadrao__jypjY:focus{outline:none}.input-module_searchIcon__miuBI{color:#888;font-size:1.2rem;left:75px;position:absolute}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj{background-color:var(--blue)}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj:hover{background-color:var(--red)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj{background-color:var(--green)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj:hover{background-color:var(--lightblue)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj{background-color:var(--red)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj:hover{background-color:var(--blue)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj{background-color:var(--cartaoGreen)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj:hover{background-color:var(--cartaoBlue)}";
119
119
  var styles$5 = {"inputSubmit":"input-module_inputSubmit__21-Pj","inputPadrao":"input-module_inputPadrao__jypjY","searchIcon":"input-module_searchIcon__miuBI","empresa1":"input-module_empresa1__bxBov","empresa3":"input-module_empresa3__RU89A","empresa4":"input-module_empresa4__rWmWH","empresa5":"input-module_empresa5__rJ8DJ"};
120
120
  styleInject(css_248z$5);
121
121
 
@@ -1491,7 +1491,7 @@ function FaDownload (props) {
1491
1491
  }
1492
1492
 
1493
1493
  var InputField = function (_a) {
1494
- var type = _a.type, id = _a.id, placeholder = _a.placeholder, onChange = _a.onChange, value = _a.value, label = _a.label, largura = _a.largura, readonly = _a.readonly, disabled = _a.disabled, required = _a.required, maxLength = _a.maxLength, maskType = _a.maskType, onKeyPress = _a.onKeyPress;
1494
+ var type = _a.type, id = _a.id, placeholder = _a.placeholder, onChange = _a.onChange, value = _a.value, label = _a.label, largura = _a.largura, readonly = _a.readonly, disabled = _a.disabled, required = _a.required, maxLength = _a.maxLength, maskType = _a.maskType, onKeyPress = _a.onKeyPress, corFundo = _a.corFundo, corLabel = _a.corLabel;
1495
1495
  var _b = useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
1496
1496
  var togglePasswordVisibility = function () {
1497
1497
  setIsPasswordVisible(!isPasswordVisible);
@@ -1509,9 +1509,9 @@ var InputField = function (_a) {
1509
1509
  maskType === 'date' ? '99/99/9999' :
1510
1510
  maskType === 'cep' ? '99999-999' : '';
1511
1511
  return (React$2.createElement(React$2.Fragment, null,
1512
- label && React$2.createElement("label", { htmlFor: id }, label),
1512
+ label && React$2.createElement("label", { htmlFor: id, style: { color: corLabel ? corLabel : '' } }, label),
1513
1513
  React$2.createElement("div", { className: styles$5.inputWrapper, style: { position: 'relative', display: 'flex', alignItems: 'center' } },
1514
- maskType ? (React$2.createElement(reactInputMask, { mask: mask, value: value, onChange: handleChange, disabled: disabled }, function (inputProps) { return (React$2.createElement("input", __assign({}, inputProps, { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, placeholder: placeholder, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, required: required, onKeyPress: onKeyPress }))); })) : (React$2.createElement("input", { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, value: value, placeholder: placeholder, onChange: handleChange, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, disabled: disabled, required: required, maxLength: type === 'text' ? appliedMaxLength : undefined, onKeyPress: onKeyPress })),
1514
+ maskType ? (React$2.createElement(reactInputMask, { mask: mask, value: value, onChange: handleChange, disabled: disabled }, function (inputProps) { return (React$2.createElement("input", __assign({}, inputProps, { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, placeholder: placeholder, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: (disabled ? '#e5e5e5' : (corFundo ? corFundo : '')) }, readOnly: readonly, required: required, onKeyPress: onKeyPress }))); })) : (React$2.createElement("input", { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, value: value, placeholder: placeholder, onChange: handleChange, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, disabled: disabled, required: required, maxLength: type === 'text' ? appliedMaxLength : undefined, onKeyPress: onKeyPress })),
1515
1515
  type === 'password' && (React$2.createElement("div", { onClick: togglePasswordVisibility, style: { cursor: 'pointer', position: 'absolute', right: '10px', fontSize: '25px', marginTop: '5px', color: "#f0f0f0" } }, isPasswordVisible ? React$2.createElement(FaEyeSlash, null) : React$2.createElement(FaEye, null))))));
1516
1516
  };
1517
1517
 
@@ -1608,7 +1608,7 @@ var Busca = function (_a) {
1608
1608
  document.removeEventListener('mousedown', handleClickOutside);
1609
1609
  };
1610
1610
  }, []);
1611
- return (React$2.createElement("div", { style: { position: 'relative' }, ref: inputRef },
1611
+ return (React$2.createElement("div", { style: { position: 'relative', display: 'flex', alignItems: 'center', gap: '10px', width: '100%' }, ref: inputRef },
1612
1612
  React$2.createElement("label", { htmlFor: "codigoCbhpm" }, label),
1613
1613
  showIcon && React$2.createElement(FaSearch, { className: styles$5.searchIcon }),
1614
1614
  React$2.createElement("input", { type: "text", id: "codigoCbhpm", value: value, onChange: handleInputChange, onFocus: handleFocus, placeholder: "Digite para buscar...", autoComplete: "off", className: styles$5.inputPadrao, style: { width: '100%', paddingLeft: showIcon ? '30px' : '0' } }),
package/dist/types/components/InputField.d.ts CHANGED
@@ -13,6 +13,8 @@ interface InputFieldProps {
13
13
  maxLength?: number;
14
14
  maskType?: 'cpf' | 'phone' | 'time' | 'date' | 'cep';
15
15
  onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
16
+ corFundo?: string;
17
+ corLabel?: string;
16
18
  }
17
19
  declare const InputField: React.FC<InputFieldProps>;
18
20
  export default InputField;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "componenteshospitais",
3
- "version": "1.7.2",
3
+ "version": "1.7.3",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/types/index.d.ts",
package/src/components/Busca.tsx CHANGED
@@ -62,7 +62,7 @@ const Busca: React.FC<FilterableInputProps> = ({ options, value, onChange, label
62
62
  }, []);
63
63
 
64
64
  return (
65
- <div style={{ position: 'relative' }} ref={inputRef}>
65
+ <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: '10px', width: '100%' }} ref={inputRef}>
66
66
  <label htmlFor="codigoCbhpm">{label}</label>
67
67
  {showIcon && <FaSearch className={styles.searchIcon} />}
68
68
  <input
package/src/components/InputField.tsx CHANGED
@@ -17,6 +17,8 @@ interface InputFieldProps {
17
17
  maxLength?: number;
18
18
  maskType?: 'cpf' | 'phone' | 'time' | 'date' | 'cep';
19
19
  onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
20
+ corFundo?: string;
21
+ corLabel?: string;
20
22
  }
21
23
 
22
24
  const InputField: React.FC<InputFieldProps> = ({
@@ -33,6 +35,8 @@ const InputField: React.FC<InputFieldProps> = ({
33
35
  maxLength,
34
36
  maskType,
35
37
  onKeyPress,
38
+ corFundo,
39
+ corLabel
36
40
  }) => {
37
41
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
38
42
 
@@ -57,7 +61,7 @@ const InputField: React.FC<InputFieldProps> = ({
57
61
 
58
62
  return (
59
63
  <>
60
- {label && <label htmlFor={id}>{label}</label>}
64
+ {label && <label htmlFor={id} style={{color: corLabel ? corLabel: ''}}>{label}</label>}
61
65
  <div className={styles.inputWrapper} style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
62
66
  {maskType ? (
63
67
  <InputMask
@@ -74,7 +78,7 @@ const InputField: React.FC<InputFieldProps> = ({
74
78
  name={id}
75
79
  placeholder={placeholder}
76
80
  className={styles.inputPadrao}
77
- style={{ width: largura ? `${largura}` : '', backgroundColor: disabled ? '#e5e5e5' : '' }}
81
+ style={{ width: largura ? `${largura}` : '', backgroundColor: (disabled ? '#e5e5e5' : (corFundo ? corFundo : '')) }}
78
82
  readOnly={readonly}
79
83
  required={required}
80
84
  onKeyPress={onKeyPress}
package/src/styles/input.module.css CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  .searchIcon {
26
26
  position: absolute;
27
- left: 10px;
27
+ left: 75px;
28
28
  color: #888;
29
29
  font-size: 1.2rem;
30
30
  }