bmi-next-brokers 2.6.8 → 2.6.9

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 (2) hide show
  1. package/dist/components/Input/Input.js +150 -136
  2. package/package.json +3 -2
package/dist/components/Input/Input.js CHANGED
@@ -1,239 +1,253 @@
1
- import { jsxs as $, jsx as n, Fragment as R } from "react/jsx-runtime";
2
- import { useState as H, useRef as T, useEffect as E } from "react";
3
- import { createPortal as W } from "react-dom";
1
+ import { jsxs as v, jsx as r, Fragment as R } from "react/jsx-runtime";
2
+ import { useState as S, useRef as E, useEffect as T } from "react";
3
+ import { createPortal as U } from "react-dom";
4
4
  import { s as e } from "../../Input.module-CvbQKI27.js";
5
5
  import { Icon as _ } from "../../icons/Icon.js";
6
- import { FieldError as U } from "../fieldError/index.js";
6
+ import { FieldError as W } from "../fieldError/index.js";
7
7
  import { HelperText as X } from "../helperText/index.js";
8
8
  import { useBTC as G } from "../../hooks/btcContext/useBtcContext.js";
9
- const A = (a, s) => a.replace(
10
- /{{([^}]+)}}/g,
11
- (l, r) => `<span class="${s}" data-variable="${r}" contenteditable="false"></span>`
12
- ), P = (a) => {
13
- let s = "";
14
- const l = (r) => {
15
- r.nodeType === Node.TEXT_NODE ? s += r.textContent ?? "" : r instanceof HTMLElement && (r.dataset.variable ? s += `{{${r.dataset.variable}}}` : r.childNodes.forEach(l));
9
+ const F = (a, h, s = !1) => {
10
+ let o = a.replace(
11
+ /{{([^}]+)}}/g,
12
+ (d, l) => `<span class="${h}" data-variable="${l}" contenteditable="false"></span>`
13
+ );
14
+ return s && (o = o.replace(/\n/g, "<br>")), o;
15
+ }, P = (a, h = !1) => {
16
+ let s = "", o = !0;
17
+ const d = (l, x = !1) => {
18
+ if (l.nodeType === Node.TEXT_NODE)
19
+ s += l.textContent ?? "";
20
+ else if (l instanceof HTMLElement) {
21
+ const i = l.tagName.toUpperCase();
22
+ l.dataset.variable ? s += `{{${l.dataset.variable}}}` : i === "BR" ? h && (s += `
23
+ `) : x && (i === "DIV" || i === "P") ? (h && !o && (s += `
24
+ `), o = !1, l.childNodes.forEach((c) => d(c, !1))) : l.childNodes.forEach((c) => d(c, !1));
25
+ }
16
26
  };
17
- return a.childNodes.forEach(l), s;
18
- }, S = ({
27
+ return a.childNodes.forEach((l) => d(l, !0)), s;
28
+ }, A = ({
19
29
  value: a = "",
20
- placeholder: s,
21
- className: l,
22
- style: r,
23
- disabled: p,
24
- onChange: v,
25
- renderVariable: I,
26
- multiline: i = !1
30
+ placeholder: h,
31
+ className: s,
32
+ style: o,
33
+ disabled: d,
34
+ onChange: l,
35
+ onFocus: x,
36
+ renderVariable: i,
37
+ multiline: c = !1
27
38
  }) => {
28
- const f = T(null), u = T(!1), [h, w] = H([]), b = (t) => {
29
- const m = t.querySelectorAll("[data-variable]");
30
- w(
31
- Array.from(m).map(
32
- (d) => W(/* @__PURE__ */ n(R, { children: I(d.dataset.variable) }), d)
39
+ const g = E(null), m = E(!1), [N, I] = S([]), $ = (t) => {
40
+ const y = t.querySelectorAll("[data-variable]");
41
+ I(
42
+ Array.from(y).map(
43
+ (b) => U(/* @__PURE__ */ r(R, { children: i(b.dataset.variable) }), b)
33
44
  )
34
45
  );
35
46
  };
36
- return E(() => {
37
- const t = f.current;
38
- t && (t.innerHTML = A(a, e.variableSpan), b(t));
39
- }, []), E(() => {
40
- const t = f.current;
47
+ return T(() => {
48
+ const t = g.current;
49
+ t && (t.innerHTML = F(a, e.variableSpan, c), $(t));
50
+ }, []), T(() => {
51
+ const t = g.current;
41
52
  if (!t) return;
42
- if (u.current) {
43
- u.current = !1;
53
+ if (m.current) {
54
+ m.current = !1;
44
55
  return;
45
56
  }
46
- if (P(t) !== a && (t.innerHTML = A(a, e.variableSpan), b(t), document.activeElement === t)) {
47
- const d = document.createRange(), c = window.getSelection();
48
- d.selectNodeContents(t), d.collapse(!1), c == null || c.removeAllRanges(), c == null || c.addRange(d);
57
+ if (P(t, c) !== a && (t.innerHTML = F(a, e.variableSpan, c), $(t), document.activeElement === t)) {
58
+ const b = document.createRange(), u = window.getSelection();
59
+ b.selectNodeContents(t), b.collapse(!1), u == null || u.removeAllRanges(), u == null || u.addRange(b);
49
60
  }
50
- }, [a]), /* @__PURE__ */ $(R, { children: [
51
- /* @__PURE__ */ n(
61
+ }, [a]), /* @__PURE__ */ v(R, { children: [
62
+ /* @__PURE__ */ r(
52
63
  "div",
53
64
  {
54
- ref: f,
55
- contentEditable: !p,
65
+ ref: g,
66
+ contentEditable: !d,
56
67
  suppressContentEditableWarning: !0,
57
- "data-placeholder": s,
58
- className: l,
59
- style: r,
68
+ "data-placeholder": h,
69
+ className: s,
70
+ style: o,
60
71
  onInput: () => {
61
- u.current = !0;
62
- const t = f.current;
63
- t && (v == null || v({
64
- target: { value: P(t) }
72
+ m.current = !0;
73
+ const t = g.current;
74
+ t && (l == null || l({
75
+ target: { value: P(t, c) }
65
76
  }));
66
77
  },
67
78
  onKeyDown: (t) => {
68
- t.key === "Enter" && !i && t.preventDefault();
79
+ t.key === "Enter" && !c && t.preventDefault();
69
80
  },
81
+ onFocus: x,
70
82
  role: "textbox",
71
83
  "aria-multiline": "true"
72
84
  }
73
85
  ),
74
- h
86
+ N
75
87
  ] });
76
88
  }, ne = ({
77
89
  size: a = "medium",
78
- label: s,
79
- error: l,
80
- helperText: r,
81
- icon: p,
82
- className: v,
83
- required: I,
90
+ label: h,
91
+ error: s,
92
+ helperText: o,
93
+ icon: d,
94
+ className: l,
95
+ required: x,
84
96
  inverted: i = !1,
85
- btc: f,
86
- prefix: u,
87
- type: h,
88
- customBorderColor: w,
89
- variableMode: b,
90
- renderVariable: x,
91
- multiline: y = !1,
92
- ...t
97
+ btc: c,
98
+ prefix: g,
99
+ type: m,
100
+ customBorderColor: N,
101
+ variableMode: I,
102
+ renderVariable: $,
103
+ multiline: w = !1,
104
+ ...n
93
105
  }) => {
94
- const [m, d] = H(!1), c = h === "password", N = h === "date", K = h === "textarea", C = T(null), { btc: j } = G(), k = f ?? j, M = () => {
95
- if (h !== "textarea") return;
96
- const o = C.current;
97
- o && (o.style.height = "auto");
106
+ const [t, y] = S(!1), b = m === "password", u = m === "date", H = m === "textarea", C = E(null), { btc: k } = G(), B = c ?? k, K = () => {
107
+ if (m !== "textarea") return;
108
+ const f = C.current;
109
+ f && (f.style.height = "auto");
98
110
  }, V = () => {
99
- const o = C.current;
100
- o && (o.style.height = "auto", o.style.height = o.scrollHeight + "px");
101
- }, q = (o) => {
102
- o.key === "Enter" && !y && o.preventDefault();
111
+ const f = C.current;
112
+ f && (f.style.height = "auto", f.style.height = f.scrollHeight + "px");
113
+ }, j = (f) => {
114
+ f.key === "Enter" && !w && f.preventDefault();
103
115
  };
104
- E(() => {
105
- M();
116
+ T(() => {
117
+ K();
106
118
  }, []);
107
- const B = [
119
+ const M = [
108
120
  e.input,
109
121
  e[a],
110
- k && e.btc,
111
- l ? e.error : "",
122
+ B && e.btc,
123
+ s ? e.error : "",
112
124
  i ? e.inverted : "",
113
- v
125
+ l
114
126
  ].filter(Boolean).join(" "), D = [
115
127
  e.hiddenInput,
116
- l ? e.hiddenInputError : "",
117
- N ? e.dateInput : ""
118
- ].filter(Boolean).join(" "), g = a === "small" ? 16 : a === "large" ? 20 : a === "extraLarge" ? 24 : 18, F = () => {
119
- d(!m);
120
- }, L = `${e.textArea} ${e[`textArea_${a}`]} ${e.hiddenInput} ${l ? e.hiddenInputError : ""} ${b ? ` ${e.textArea_variableMode}` : ""}`, O = `${D} ${e.variableInputDiv} ${e[a]}`;
121
- return /* @__PURE__ */ $(
128
+ s ? e.hiddenInputError : "",
129
+ u ? e.dateInput : ""
130
+ ].filter(Boolean).join(" "), p = a === "small" ? 16 : a === "large" ? 20 : a === "extraLarge" ? 24 : 18, q = () => {
131
+ y(!t);
132
+ }, L = `${e.textArea} ${e[`textArea_${a}`]} ${e.hiddenInput} ${s ? e.hiddenInputError : ""} ${I ? ` ${e.textArea_variableMode}` : ""}`, O = `${D} ${e.variableInputDiv} ${e[a]}`;
133
+ return /* @__PURE__ */ v(
122
134
  "div",
123
135
  {
124
- className: `${e.inputContainer} ${a === "medium" ? e.inputContainer_medium : a === "large" ? e.inputContainer_large : a === "extraLarge" ? e.inputContainer_extraLarge : ""} ${t.disabled ? e.disabled : ""}`,
136
+ className: `${e.inputContainer} ${a === "medium" ? e.inputContainer_medium : a === "large" ? e.inputContainer_large : a === "extraLarge" ? e.inputContainer_extraLarge : ""} ${n.disabled ? e.disabled : ""}`,
125
137
  children: [
126
- s && /* @__PURE__ */ $(
138
+ h && /* @__PURE__ */ v(
127
139
  "label",
128
140
  {
129
- className: `${e.label} ${a === "large" ? e.label_large : ""} ${a === "extraLarge" ? e.label_extraLarge : ""} ${i ? e.label_inverted : ""} ${t.disabled ? e.disabled : ""}`,
141
+ className: `${e.label} ${a === "large" ? e.label_large : ""} ${a === "extraLarge" ? e.label_extraLarge : ""} ${i ? e.label_inverted : ""} ${n.disabled ? e.disabled : ""}`,
130
142
  children: [
131
- s,
132
- /* @__PURE__ */ n(
143
+ h,
144
+ /* @__PURE__ */ r(
133
145
  "span",
134
146
  {
135
147
  className: `${e.required} ${i ? e.required_inverted : ""}`,
136
- children: I && "*"
148
+ children: x && "*"
137
149
  }
138
150
  )
139
151
  ]
140
152
  }
141
153
  ),
142
- /* @__PURE__ */ $(
154
+ /* @__PURE__ */ v(
143
155
  "div",
144
156
  {
145
- className: `${e.inputWrapper} ${t.disabled ? e.disabled : ""}`,
157
+ className: `${e.inputWrapper} ${n.disabled ? e.disabled : ""}`,
146
158
  children: [
147
- /* @__PURE__ */ $(
159
+ /* @__PURE__ */ v(
148
160
  "div",
149
161
  {
150
- className: B,
162
+ className: M,
151
163
  ref: C,
152
164
  style: {
153
- ...t.style,
154
- ...w && { borderColor: w }
165
+ ...n.style,
166
+ ...N && { borderColor: N }
155
167
  },
156
168
  children: [
157
- (u || p) && /* @__PURE__ */ $("div", { className: e.prefixIcon, children: [
158
- u && /* @__PURE__ */ n("span", { className: e.prefix, children: u }),
159
- p && !N && /* @__PURE__ */ n(
169
+ (g || d) && /* @__PURE__ */ v("div", { className: e.prefixIcon, children: [
170
+ g && /* @__PURE__ */ r("span", { className: e.prefix, children: g }),
171
+ d && !u && /* @__PURE__ */ r(
160
172
  "div",
161
173
  {
162
174
  className: `${e.icon} ${i ? e.icon_inverted : ""} `,
163
- children: /* @__PURE__ */ n(_, { name: p, width: g, height: g })
175
+ children: /* @__PURE__ */ r(_, { name: d, width: p, height: p })
164
176
  }
165
177
  )
166
178
  ] }),
167
- K ? b && x ? /* @__PURE__ */ n(
168
- S,
179
+ H ? I && $ ? /* @__PURE__ */ r(
180
+ A,
169
181
  {
170
182
  className: L,
171
- value: t.value,
172
- placeholder: t.placeholder,
173
- style: t.style,
174
- disabled: t.disabled,
175
- onChange: t.onChange,
176
- renderVariable: x,
177
- multiline: y
183
+ value: n.value,
184
+ placeholder: n.placeholder,
185
+ style: n.style,
186
+ disabled: n.disabled,
187
+ onChange: n.onChange,
188
+ onFocus: n.onFocus,
189
+ renderVariable: $,
190
+ multiline: w
178
191
  }
179
- ) : /* @__PURE__ */ n(
192
+ ) : /* @__PURE__ */ r(
180
193
  "textarea",
181
194
  {
182
195
  className: L,
183
196
  onChange: V,
184
- onKeyDown: q,
185
- ...t
197
+ onKeyDown: j,
198
+ ...n
186
199
  }
187
- ) : b && x ? /* @__PURE__ */ n(
188
- S,
200
+ ) : I && $ ? /* @__PURE__ */ r(
201
+ A,
189
202
  {
190
203
  className: O,
191
- value: t.value,
192
- placeholder: t.placeholder,
193
- disabled: t.disabled,
194
- onChange: t.onChange,
195
- renderVariable: x,
196
- multiline: y
204
+ value: n.value,
205
+ placeholder: n.placeholder,
206
+ disabled: n.disabled,
207
+ onChange: n.onChange,
208
+ onFocus: n.onFocus,
209
+ renderVariable: $,
210
+ multiline: w
197
211
  }
198
- ) : /* @__PURE__ */ n(
212
+ ) : /* @__PURE__ */ r(
199
213
  "input",
200
214
  {
201
215
  className: D,
202
- type: c ? m ? "text" : "password" : h,
203
- ...t
216
+ type: b ? t ? "text" : "password" : m,
217
+ ...n
204
218
  }
205
219
  )
206
220
  ]
207
221
  }
208
222
  ),
209
- c && /* @__PURE__ */ n(
223
+ b && /* @__PURE__ */ r(
210
224
  "button",
211
225
  {
212
226
  type: "button",
213
227
  className: `${e.passwordToggle} ${i ? e.passwordToggle_inverted : ""}`,
214
- onClick: F,
215
- disabled: t.disabled,
216
- "aria-label": m ? "Ocultar contraseña" : "Mostrar contraseña",
217
- children: /* @__PURE__ */ n(
228
+ onClick: q,
229
+ disabled: n.disabled,
230
+ "aria-label": t ? "Ocultar contraseña" : "Mostrar contraseña",
231
+ children: /* @__PURE__ */ r(
218
232
  _,
219
233
  {
220
- name: m ? "VisibilityOff" : "Visibility",
221
- width: g,
222
- height: g
234
+ name: t ? "VisibilityOff" : "Visibility",
235
+ width: p,
236
+ height: p
223
237
  }
224
238
  )
225
239
  }
226
240
  ),
227
- N && /* @__PURE__ */ n(
241
+ u && /* @__PURE__ */ r(
228
242
  "div",
229
243
  {
230
- className: `${e.dateIcon} ${i ? e.dateIcon_inverted : ""} ${l ? e.dateIcon_error : ""} ${l && i ? e.dateIcon_inverted_error : ""}`,
231
- children: /* @__PURE__ */ n(
244
+ className: `${e.dateIcon} ${i ? e.dateIcon_inverted : ""} ${s ? e.dateIcon_error : ""} ${s && i ? e.dateIcon_inverted_error : ""}`,
245
+ children: /* @__PURE__ */ r(
232
246
  _,
233
247
  {
234
248
  name: "CalendarIcon",
235
- width: g + 2,
236
- height: g + 2
249
+ width: p + 2,
250
+ height: p + 2
237
251
  }
238
252
  )
239
253
  }
@@ -241,8 +255,8 @@ const A = (a, s) => a.replace(
241
255
  ]
242
256
  }
243
257
  ),
244
- l && /* @__PURE__ */ n(U, { size: a, message: l }),
245
- r && !l && /* @__PURE__ */ n(X, { message: r, size: a, inverted: i })
258
+ s && /* @__PURE__ */ r(W, { size: a, message: s }),
259
+ o && !s && /* @__PURE__ */ r(X, { message: o, size: a, inverted: i })
246
260
  ]
247
261
  }
248
262
  );
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "bmi-next-brokers",
3
3
  "description": "Componentes de UI para proyecto BMI Next Brokers",
4
- "version": "2.6.8",
4
+ "version": "2.6.9",
5
5
  "author": "BMI Ahorro España",
6
6
  "contributors": [
7
7
  "José Ramón Jiménez <jrjimenez@bmicos.com>",
8
8
  "David Fernández Bolaños <dafernandez@bmicos.com>",
9
9
  "Jorge Martín <jmartin@bmicos.com>",
10
- "Alonso Mangas <amangas@bmicos.com>"
10
+ "Alonso Mangas <amangas@bmicos.com>",
11
+ "Pablo Bejar <pbejar@bmicos.com>"
11
12
  ],
12
13
  "license": "MIT",
13
14
  "type": "module",