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