mosstandardcomponents 1.0.18 → 1.0.20
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.
- package/dist/mosstandardcomponents.es.js +110 -121
- package/dist/mosstandardcomponents.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
import { createElementBlock as i, openBlock as r, createElementVNode as a, resolveComponent as
|
|
2
|
-
import { vMaska as
|
|
3
|
-
const
|
|
1
|
+
import { createElementBlock as i, openBlock as r, createElementVNode as a, resolveComponent as y, createCommentVNode as o, normalizeClass as c, toDisplayString as u, withKeys as w, createBlock as x, createVNode as b, createTextVNode as S, resolveDirective as C, withDirectives as I } from "vue";
|
|
2
|
+
import { vMaska as V } from "maska";
|
|
3
|
+
const B = {
|
|
4
4
|
xmlns: "http://www.w3.org/2000/svg",
|
|
5
5
|
viewBox: "0 0 1008 1008"
|
|
6
6
|
};
|
|
7
|
-
function
|
|
8
|
-
return r(), i("svg",
|
|
7
|
+
function A(t, n) {
|
|
8
|
+
return r(), i("svg", B, [...n[0] || (n[0] = [
|
|
9
9
|
a("path", {
|
|
10
10
|
fill: "currentColor",
|
|
11
11
|
d: "M1008 540c0 14-4 27-11 39-103 170-293 285-493 285S114 749 11 579c-7-12-11-25-11-39s4-27 11-39c103-170 293-285 493-285s390 115 493 285c7 12 11 25 11 39zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-64 53-117 117-117 15 0 27-12 27-27zm405 216c-53-83-127-154-214-199 22 39 34 83 34 127 0 139-113 252-252 252S252 607 252 468c0-44 12-88 34-127-87 45-161 116-214 199 96 148 251 252 432 252s336-104 432-252z"
|
|
12
12
|
}, null, -1)
|
|
13
13
|
])]);
|
|
14
14
|
}
|
|
15
|
-
const
|
|
15
|
+
const q = { render: A }, T = {
|
|
16
16
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17
17
|
viewBox: "0 0 1008 1008"
|
|
18
18
|
};
|
|
19
|
-
function
|
|
20
|
-
return r(), i("svg",
|
|
19
|
+
function E(t, n) {
|
|
20
|
+
return r(), i("svg", T, [...n[0] || (n[0] = [
|
|
21
21
|
a("path", {
|
|
22
22
|
fill: "currentColor",
|
|
23
23
|
d: "M1008 540c0 15-4 27-11 39-18 29-40 56-62 81-110 127-262 204-431 204l42-74c163-14 302-114 390-250-42-65-95-121-159-165l36-63c70 46 140 117 184 189 7 12 11 24 11 39zm-252-72c0 105-65 198-162 235l158-282c2 15 4 31 4 47zm-21-251v5C616 434 497 646 380 859l-28 50c-3 6-9 9-16 9-10 0-63-33-75-39-6-4-9-9-9-16 0-9 19-40 25-49C168 764 76 680 11 579c-7-11-11-25-11-39 0-13 4-28 11-39 112-171 285-285 493-285 34 0 68 3 101 10l31-55c3-6 9-9 15-9 11 0 63 33 75 39 6 4 9 9 9 16zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-65 53-117 117-117 15 0 27-12 27-27zM312 751l44-79c-65-48-104-124-104-204 0-44 12-88 34-127-87 45-161 116-214 199 58 91 141 166 240 211z"
|
|
24
24
|
}, null, -1)
|
|
25
25
|
])]);
|
|
26
26
|
}
|
|
27
|
-
const F = { render:
|
|
27
|
+
const F = { render: E }, K = {
|
|
28
28
|
xmlns: "http://www.w3.org/2000/svg",
|
|
29
29
|
viewBox: "0 0 1039 1008"
|
|
30
30
|
};
|
|
31
|
-
function
|
|
32
|
-
return r(), i("svg",
|
|
31
|
+
function P(t, n) {
|
|
32
|
+
return r(), i("svg", K, [...n[0] || (n[0] = [
|
|
33
33
|
a("path", {
|
|
34
34
|
fill: "currentColor",
|
|
35
35
|
d: "M908 989H131q-32 0-62.5-17T19 926.5 0 863t19-68l388-670q42-62 113-62t112 62l389 670q18 28 18 64 0 75-68 113-31 17-63 17zM576 157q-19-38-55.5-38T463 150L69 826q-20 30 0 69 21 32 56 32h777q35 0 55.5-30.5t.5-70.5zm-13 501.5Q544 676 517.5 676T474 659t-17-45V351q0-29 17-46t45.5-17 45.5 17 17 46v263q0 27-19 44.5zm-97.5 174q-8.5-14.5-8.5-36t18.5-39.5 37.5-18 31 5 20 13q18 18 18 44t-18 44.5-39.5 18.5-36-8.5-23-23z"
|
|
36
36
|
}, null, -1)
|
|
37
37
|
])]);
|
|
38
38
|
}
|
|
39
|
-
const p = { render:
|
|
39
|
+
const p = { render: P }, z = {
|
|
40
40
|
xmlns: "http://www.w3.org/2000/svg",
|
|
41
41
|
viewBox: "0 0 1008 1008"
|
|
42
42
|
};
|
|
43
|
-
function
|
|
44
|
-
return r(), i("svg",
|
|
43
|
+
function M(t, n) {
|
|
44
|
+
return r(), i("svg", z, [...n[0] || (n[0] = [
|
|
45
45
|
a("path", {
|
|
46
46
|
fill: "currentColor",
|
|
47
47
|
d: "M940 318c0 14-6 28-16 39L517 764l-77 76c-10 10-24 16-38 16s-28-6-38-16l-77-76L84 560c-10-10-16-24-16-38s6-28 16-38l76-77c10-10 25-16 39-16s28 6 38 16l165 166 369-369c10-11 24-16 38-16s29 6 39 16l76 76c10 10 16 24 16 38z"
|
|
48
48
|
}, null, -1)
|
|
49
49
|
])]);
|
|
50
50
|
}
|
|
51
|
-
const k = { render:
|
|
51
|
+
const k = { render: M }, _ = (t, n) => {
|
|
52
52
|
const e = t.__vccOpts || t;
|
|
53
53
|
for (const [f, s] of n)
|
|
54
54
|
e[f] = s;
|
|
55
55
|
return e;
|
|
56
|
-
},
|
|
56
|
+
}, N = {
|
|
57
57
|
name: "InputField",
|
|
58
58
|
components: {
|
|
59
59
|
IconEyeSlash: F,
|
|
60
|
-
IconPrivacy:
|
|
60
|
+
IconPrivacy: q,
|
|
61
61
|
IconAlert: p,
|
|
62
62
|
IconCheck: k
|
|
63
63
|
},
|
|
@@ -139,23 +139,23 @@ const k = { render: z }, _ = (t, n) => {
|
|
|
139
139
|
t && t.value && this.$emit("update:modelValue", t.value);
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
-
},
|
|
142
|
+
}, L = { class: "pt-2" }, D = ["for"], H = ["textContent"], O = {
|
|
143
143
|
key: 0,
|
|
144
144
|
class: "text-red"
|
|
145
145
|
}, G = {
|
|
146
146
|
key: 1,
|
|
147
147
|
textContent: " (optioneel)",
|
|
148
148
|
class: "font-normal"
|
|
149
|
-
},
|
|
149
|
+
}, Q = ["id", "value", "type", "name", "placeholder", "required", "optional", "error", "minlength", "maxlength", "autocomplete", "autofocus", "inputmode", "disabled", "readonly", "aria-describedby", "aria-errormessage", "pattern", "aria-invalid"], R = ["aria-pressed", "aria-label"], W = { class: "sr-only" }, j = {
|
|
150
150
|
key: 1,
|
|
151
151
|
class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"
|
|
152
|
-
},
|
|
152
|
+
}, J = {
|
|
153
153
|
key: 2,
|
|
154
154
|
class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-green"
|
|
155
|
-
}, U = ["id", "textContent"],
|
|
156
|
-
function
|
|
157
|
-
const g =
|
|
158
|
-
return r(), i("div",
|
|
155
|
+
}, U = ["id", "textContent"], X = ["id"], Y = ["textContent"], Z = ["textContent"];
|
|
156
|
+
function $(t, n, e, f, s, l) {
|
|
157
|
+
const g = y("icon-privacy"), d = y("icon-eye-slash"), v = y("icon-alert"), h = y("icon-check");
|
|
158
|
+
return r(), i("div", L, [
|
|
159
159
|
e.label ? (r(), i("label", {
|
|
160
160
|
key: 0,
|
|
161
161
|
for: t.computedId,
|
|
@@ -169,15 +169,15 @@ function Z(t, n, e, f, s, o) {
|
|
|
169
169
|
}, [
|
|
170
170
|
a("span", {
|
|
171
171
|
textContent: u(e.label)
|
|
172
|
-
}, null, 8,
|
|
173
|
-
e.required ? (r(), i("span",
|
|
174
|
-
e.optional ? (r(), i("span", G)) :
|
|
175
|
-
], 10,
|
|
172
|
+
}, null, 8, H),
|
|
173
|
+
e.required ? (r(), i("span", O, " * ")) : o("", !0),
|
|
174
|
+
e.optional ? (r(), i("span", G)) : o("", !0)
|
|
175
|
+
], 10, D)) : o("", !0),
|
|
176
176
|
a("div", {
|
|
177
177
|
class: c([
|
|
178
178
|
"relative mt-1 rounded-sm",
|
|
179
179
|
[
|
|
180
|
-
|
|
180
|
+
l.outlineClass,
|
|
181
181
|
t.isActive || e.error ? "border-2" : "border",
|
|
182
182
|
e.disabled && e.modelValue || e.readonly ? "bg-blue-dark-100" : ""
|
|
183
183
|
]
|
|
@@ -206,11 +206,11 @@ function Z(t, n, e, f, s, o) {
|
|
|
206
206
|
"aria-invalid": e.error.toString(),
|
|
207
207
|
class: "block h-12 w-full appearance-none border-0 bg-transparent pl-4 pr-8 focus:outline-none",
|
|
208
208
|
"data-clarity-mask": "true",
|
|
209
|
-
onInput: n[0] || (n[0] = (
|
|
210
|
-
onBlur: n[1] || (n[1] = (...
|
|
211
|
-
onFocus: n[2] || (n[2] = (...
|
|
212
|
-
onKeyup: n[3] || (n[3] = w((...
|
|
213
|
-
}, null, 40,
|
|
209
|
+
onInput: n[0] || (n[0] = (m) => t.$emit("update:modelValue", m.target.value)),
|
|
210
|
+
onBlur: n[1] || (n[1] = (...m) => l.onBlur && l.onBlur(...m)),
|
|
211
|
+
onFocus: n[2] || (n[2] = (...m) => l.onFocus && l.onFocus(...m)),
|
|
212
|
+
onKeyup: n[3] || (n[3] = w((...m) => l.onKeyupEnter && l.onKeyupEnter(...m), ["enter"]))
|
|
213
|
+
}, null, 40, Q),
|
|
214
214
|
t.initialType === "password" && !e.hidepasswordicon && !e.disabled ? (r(), i("div", {
|
|
215
215
|
key: 0,
|
|
216
216
|
class: c(["absolute right-0 top-0", { "right-8": e.error }])
|
|
@@ -220,39 +220,39 @@ function Z(t, n, e, f, s, o) {
|
|
|
220
220
|
class: "m-1 px-2 py-3 focus-visible:outline-blue-dark",
|
|
221
221
|
"aria-pressed": t.showPassword,
|
|
222
222
|
"aria-label": t.showPassword ? "Verberg wachtwoord" : "Toon wachtwoord",
|
|
223
|
-
onClick: n[4] || (n[4] = (...
|
|
223
|
+
onClick: n[4] || (n[4] = (...m) => l.togglePassword && l.togglePassword(...m))
|
|
224
224
|
}, [
|
|
225
225
|
t.showPassword ? (r(), x(g, {
|
|
226
226
|
key: 0,
|
|
227
227
|
class: "h-4 w-4",
|
|
228
228
|
"aria-hidden": "true"
|
|
229
|
-
})) : (r(), x(
|
|
229
|
+
})) : (r(), x(d, {
|
|
230
230
|
key: 1,
|
|
231
231
|
class: "h-4 w-4",
|
|
232
232
|
"aria-hidden": "true"
|
|
233
233
|
})),
|
|
234
|
-
a("span",
|
|
235
|
-
], 8,
|
|
236
|
-
], 2)) :
|
|
237
|
-
e.error ? (r(), i("div",
|
|
238
|
-
|
|
234
|
+
a("span", W, u(t.showPassword ? "verberg" : "toon") + " wachtwoord", 1)
|
|
235
|
+
], 8, R)
|
|
236
|
+
], 2)) : o("", !0),
|
|
237
|
+
e.error ? (r(), i("div", j, [
|
|
238
|
+
b(v, {
|
|
239
239
|
class: "-mt-1 mr-1 inline h-5 w-5",
|
|
240
240
|
"aria-hidden": "true"
|
|
241
241
|
})
|
|
242
|
-
])) :
|
|
243
|
-
!e.error && e.modelValue && t.shouldShowCheck ? (r(), i("div",
|
|
244
|
-
|
|
242
|
+
])) : o("", !0),
|
|
243
|
+
!e.error && e.modelValue && t.shouldShowCheck ? (r(), i("div", J, [
|
|
244
|
+
b(h, {
|
|
245
245
|
class: "-mt-1 mr-1 inline h-5 w-5",
|
|
246
246
|
"aria-hidden": "true"
|
|
247
247
|
})
|
|
248
|
-
])) :
|
|
248
|
+
])) : o("", !0)
|
|
249
249
|
], 2),
|
|
250
250
|
e.hint && !e.error ? (r(), i("div", {
|
|
251
251
|
key: 1,
|
|
252
252
|
id: t.computedId + "-hint",
|
|
253
253
|
class: c(["w-full pt-1 text-xs leading-4", { "text-grey-500": e.disabled }]),
|
|
254
254
|
textContent: u(e.hint)
|
|
255
|
-
}, null, 10, U)) :
|
|
255
|
+
}, null, 10, U)) : o("", !0),
|
|
256
256
|
e.error && e.errormessage ? (r(), i("div", {
|
|
257
257
|
key: 2,
|
|
258
258
|
id: t.computedId + "-errormsg",
|
|
@@ -261,8 +261,8 @@ function Z(t, n, e, f, s, o) {
|
|
|
261
261
|
}, [
|
|
262
262
|
a("span", {
|
|
263
263
|
textContent: u(e.errormessage)
|
|
264
|
-
}, null, 8,
|
|
265
|
-
], 8,
|
|
264
|
+
}, null, 8, Y)
|
|
265
|
+
], 8, X)) : o("", !0),
|
|
266
266
|
t.initialType === "password" ? (r(), i("p", {
|
|
267
267
|
key: 3,
|
|
268
268
|
class: "sr-only",
|
|
@@ -270,24 +270,24 @@ function Z(t, n, e, f, s, o) {
|
|
|
270
270
|
textContent: u(
|
|
271
271
|
t.showPassword ? "wachtwoord wordt getoond" : "wachtwoord is verborgen"
|
|
272
272
|
)
|
|
273
|
-
}, null, 8,
|
|
273
|
+
}, null, 8, Z)) : o("", !0)
|
|
274
274
|
]);
|
|
275
275
|
}
|
|
276
|
-
const
|
|
276
|
+
const Te = /* @__PURE__ */ _(N, [["render", $], ["__scopeId", "data-v-5a4e94c9"]]), ee = {
|
|
277
277
|
xmlns: "http://www.w3.org/2000/svg",
|
|
278
278
|
viewBox: "0 0 1010 1008"
|
|
279
279
|
};
|
|
280
|
-
function
|
|
281
|
-
return r(), i("svg",
|
|
280
|
+
function te(t, n) {
|
|
281
|
+
return r(), i("svg", ee, [...n[0] || (n[0] = [
|
|
282
282
|
a("path", {
|
|
283
283
|
d: "M503 100q113 0 209 55.5T863.5 307 919 516t-55.5 208.5T712 876t-209 56-208.5-56T143 724.5 87 516t56-209 151.5-151.5T503 100zm-25 255q29-12 58.5-12t59.5 7l22-83q-36-9-78-9-79 0-149.5 53.5T299 440h-49v55h39q-1 9-1 20t2 24h-40v54h49q22 84 87.5 135T542 779q43 0 73-9l11-4-17-84q-30 11-72 11t-80.5-27-55.5-73h147l10-54H385q-4-25-1-44h184l10-54H397q23-62 81-86z",
|
|
284
284
|
fill: "currentColor"
|
|
285
285
|
}, null, -1)
|
|
286
286
|
])]);
|
|
287
287
|
}
|
|
288
|
-
const
|
|
288
|
+
const ne = { render: te }, re = {
|
|
289
289
|
name: "AmountInput",
|
|
290
|
-
components: { IconAlert: p, IconCheck: k,
|
|
290
|
+
components: { IconAlert: p, IconCheck: k, IconEuro: ne },
|
|
291
291
|
props: {
|
|
292
292
|
modelValue: Number,
|
|
293
293
|
label: String,
|
|
@@ -372,23 +372,20 @@ const te = { render: ee }, ne = {
|
|
|
372
372
|
this.isActive = !0, this.$emit("focus");
|
|
373
373
|
}
|
|
374
374
|
}
|
|
375
|
-
},
|
|
375
|
+
}, ie = { class: "pt-2" }, le = ["for"], oe = ["textContent"], ae = {
|
|
376
376
|
key: 0,
|
|
377
377
|
class: "text-red"
|
|
378
|
-
},
|
|
378
|
+
}, se = {
|
|
379
379
|
key: 1,
|
|
380
380
|
class: "font-normal",
|
|
381
381
|
textContent: " (optioneel)"
|
|
382
|
-
},
|
|
382
|
+
}, de = ["id", "value", "name", "placeholder", "required", "optional", "error", "min", "max", "autocomplete", "autofocus", "inputmode", "disabled", "readonly", "aria-describedby", "aria-errormessage", "pattern", "aria-invalid"], ue = {
|
|
383
383
|
key: 0,
|
|
384
|
-
class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"
|
|
385
|
-
}, ce = {
|
|
386
|
-
key: 1,
|
|
387
384
|
class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-green"
|
|
388
|
-
},
|
|
389
|
-
function
|
|
390
|
-
const g =
|
|
391
|
-
return r(), i("div",
|
|
385
|
+
}, ce = ["id", "textContent"], he = ["id"], me = ["textContent"];
|
|
386
|
+
function fe(t, n, e, f, s, l) {
|
|
387
|
+
const g = y("icon-check");
|
|
388
|
+
return r(), i("div", ie, [
|
|
392
389
|
e.label ? (r(), i("label", {
|
|
393
390
|
key: 0,
|
|
394
391
|
for: s.computedId,
|
|
@@ -403,12 +400,13 @@ function ye(t, n, e, f, s, o) {
|
|
|
403
400
|
a("span", {
|
|
404
401
|
textContent: u(e.label)
|
|
405
402
|
}, null, 8, oe),
|
|
406
|
-
e.required ? (r(), i("span",
|
|
407
|
-
e.optional ? (r(), i("span",
|
|
408
|
-
], 10,
|
|
403
|
+
e.required ? (r(), i("span", ae, " * ")) : o("", !0),
|
|
404
|
+
e.optional ? (r(), i("span", se)) : o("", !0)
|
|
405
|
+
], 10, le)) : o("", !0),
|
|
406
|
+
n[4] || (n[4] = S(" HELLO WORLDS ", -1)),
|
|
409
407
|
a("div", {
|
|
410
408
|
class: c(["relative mt-1 rounded-sm", [
|
|
411
|
-
|
|
409
|
+
l.outlineClass,
|
|
412
410
|
s.isActive || e.error ? "border-2" : "border",
|
|
413
411
|
e.disabled && e.modelValue || e.readonly ? "bg-blue-dark-100" : ""
|
|
414
412
|
]])
|
|
@@ -434,33 +432,24 @@ function ye(t, n, e, f, s, o) {
|
|
|
434
432
|
pattern: e.pattern,
|
|
435
433
|
"aria-invalid": e.error.toString(),
|
|
436
434
|
class: "block h-12 w-full appearance-none border-0 bg-transparent pl-10 pr-8 focus:outline-none",
|
|
437
|
-
onInput: n[0] || (n[0] = (...d) =>
|
|
438
|
-
onBlur: n[1] || (n[1] = (...d) =>
|
|
439
|
-
onFocus: n[2] || (n[2] = (...d) =>
|
|
440
|
-
onKeyup: n[3] || (n[3] = w((...d) =>
|
|
441
|
-
}, null, 40,
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
]),
|
|
445
|
-
e.error ? (r(), i("div", ue, [
|
|
446
|
-
y(b, {
|
|
435
|
+
onInput: n[0] || (n[0] = (...d) => l.onInput && l.onInput(...d)),
|
|
436
|
+
onBlur: n[1] || (n[1] = (...d) => l.onBlur && l.onBlur(...d)),
|
|
437
|
+
onFocus: n[2] || (n[2] = (...d) => l.onFocus && l.onFocus(...d)),
|
|
438
|
+
onKeyup: n[3] || (n[3] = w((...d) => l.onKeyupEnter && l.onKeyupEnter(...d), ["enter"]))
|
|
439
|
+
}, null, 40, de),
|
|
440
|
+
!e.error && e.modelValue && s.shouldShowCheck ? (r(), i("div", ue, [
|
|
441
|
+
b(g, {
|
|
447
442
|
class: "-mt-1 mr-1 inline h-5 w-5",
|
|
448
443
|
"aria-hidden": "true"
|
|
449
444
|
})
|
|
450
|
-
])) :
|
|
451
|
-
!e.error && e.modelValue && s.shouldShowCheck ? (r(), i("div", ce, [
|
|
452
|
-
y(v, {
|
|
453
|
-
class: "-mt-1 mr-1 inline h-5 w-5",
|
|
454
|
-
"aria-hidden": "true"
|
|
455
|
-
})
|
|
456
|
-
])) : l("", !0)
|
|
445
|
+
])) : o("", !0)
|
|
457
446
|
], 2),
|
|
458
447
|
e.hint && !e.error ? (r(), i("div", {
|
|
459
448
|
key: 1,
|
|
460
449
|
id: s.computedId + "-hint",
|
|
461
450
|
class: c(["w-full pt-1 text-xs leading-4", { "text-grey-500": e.disabled }]),
|
|
462
451
|
textContent: u(e.hint)
|
|
463
|
-
}, null, 10,
|
|
452
|
+
}, null, 10, ce)) : o("", !0),
|
|
464
453
|
e.error && e.errormessage ? (r(), i("div", {
|
|
465
454
|
key: 2,
|
|
466
455
|
id: s.computedId + "-errormsg",
|
|
@@ -469,17 +458,17 @@ function ye(t, n, e, f, s, o) {
|
|
|
469
458
|
}, [
|
|
470
459
|
a("span", {
|
|
471
460
|
textContent: u(e.errormessage)
|
|
472
|
-
}, null, 8,
|
|
473
|
-
], 8,
|
|
461
|
+
}, null, 8, me)
|
|
462
|
+
], 8, he)) : o("", !0)
|
|
474
463
|
]);
|
|
475
464
|
}
|
|
476
|
-
const Ee = /* @__PURE__ */ _(
|
|
465
|
+
const Ee = /* @__PURE__ */ _(re, [["render", fe], ["__scopeId", "data-v-51e188b7"]]), ye = {
|
|
477
466
|
name: "IbanInput",
|
|
478
467
|
components: {
|
|
479
468
|
IconAlert: p,
|
|
480
469
|
IconCheck: k
|
|
481
470
|
},
|
|
482
|
-
directives: { maska:
|
|
471
|
+
directives: { maska: V },
|
|
483
472
|
props: {
|
|
484
473
|
modelValue: String,
|
|
485
474
|
label: String,
|
|
@@ -557,23 +546,23 @@ const Ee = /* @__PURE__ */ _(ne, [["render", ye], ["__scopeId", "data-v-6897d101
|
|
|
557
546
|
this.isActive = !1, this.$emit("onKeyupEnter", t.target.value);
|
|
558
547
|
}
|
|
559
548
|
}
|
|
560
|
-
},
|
|
549
|
+
}, ge = { class: "pt-2" }, be = ["for"], ve = ["textContent"], we = {
|
|
561
550
|
key: 0,
|
|
562
551
|
class: "text-red"
|
|
563
|
-
},
|
|
552
|
+
}, pe = {
|
|
564
553
|
key: 1,
|
|
565
554
|
textContent: " (optioneel)",
|
|
566
555
|
class: "font-normal"
|
|
567
|
-
},
|
|
556
|
+
}, ke = ["id", "value", "type", "name", "placeholder", "required", "optional", "error", "autocomplete", "autofocus", "inputmode", "disabled", "readonly", "aria-describedby", "aria-errormessage", "pattern", "aria-invalid", "data-maska"], _e = ["innerHTML"], xe = {
|
|
568
557
|
key: 0,
|
|
569
558
|
class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"
|
|
570
559
|
}, Se = {
|
|
571
560
|
key: 1,
|
|
572
561
|
class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-green"
|
|
573
|
-
},
|
|
574
|
-
function
|
|
575
|
-
const g =
|
|
576
|
-
return r(), i("div",
|
|
562
|
+
}, Ce = ["id", "textContent"], Ie = ["id"], Ve = ["textContent"];
|
|
563
|
+
function Be(t, n, e, f, s, l) {
|
|
564
|
+
const g = y("icon-alert"), d = y("icon-check"), v = C("maska");
|
|
565
|
+
return r(), i("div", ge, [
|
|
577
566
|
e.label ? (r(), i("label", {
|
|
578
567
|
key: 0,
|
|
579
568
|
for: t.computedId,
|
|
@@ -587,21 +576,21 @@ function Ae(t, n, e, f, s, o) {
|
|
|
587
576
|
}, [
|
|
588
577
|
a("span", {
|
|
589
578
|
textContent: u(e.label)
|
|
590
|
-
}, null, 8,
|
|
591
|
-
e.required ? (r(), i("span",
|
|
592
|
-
e.optional ? (r(), i("span",
|
|
593
|
-
], 10,
|
|
579
|
+
}, null, 8, ve),
|
|
580
|
+
e.required ? (r(), i("span", we, " * ")) : o("", !0),
|
|
581
|
+
e.optional ? (r(), i("span", pe)) : o("", !0)
|
|
582
|
+
], 10, be)) : o("", !0),
|
|
594
583
|
a("div", {
|
|
595
584
|
class: c([
|
|
596
585
|
"relative mt-1 rounded-sm",
|
|
597
586
|
[
|
|
598
|
-
|
|
587
|
+
l.outlineClass,
|
|
599
588
|
t.isActive || e.error ? "border-2" : "border",
|
|
600
589
|
e.disabled && e.modelValue || e.readonly ? "bg-blue-dark-100" : ""
|
|
601
590
|
]
|
|
602
591
|
])
|
|
603
592
|
}, [
|
|
604
|
-
|
|
593
|
+
I(a("input", {
|
|
605
594
|
id: t.computedId,
|
|
606
595
|
value: e.modelValue,
|
|
607
596
|
type: t.fieldType,
|
|
@@ -621,37 +610,37 @@ function Ae(t, n, e, f, s, o) {
|
|
|
621
610
|
"aria-invalid": e.error.toString(),
|
|
622
611
|
"data-maska": t.maskaPattern,
|
|
623
612
|
class: "block h-12 w-full appearance-none border-0 bg-transparent pl-3 pr-8 focus:outline-none",
|
|
624
|
-
onInput: n[0] || (n[0] = (
|
|
625
|
-
onBlur: n[1] || (n[1] = (...
|
|
626
|
-
onFocus: n[2] || (n[2] = (...
|
|
627
|
-
onKeyup: n[3] || (n[3] = w((...
|
|
628
|
-
}, null, 40,
|
|
613
|
+
onInput: n[0] || (n[0] = (h) => t.$emit("update:modelValue", h.target.value)),
|
|
614
|
+
onBlur: n[1] || (n[1] = (...h) => l.onBlur && l.onBlur(...h)),
|
|
615
|
+
onFocus: n[2] || (n[2] = (...h) => l.onFocus && l.onFocus(...h)),
|
|
616
|
+
onKeyup: n[3] || (n[3] = w((...h) => l.onKeyupEnter && l.onKeyupEnter(...h), ["enter"]))
|
|
617
|
+
}, null, 40, ke), [
|
|
629
618
|
[v]
|
|
630
619
|
]),
|
|
631
620
|
a("div", {
|
|
632
621
|
class: "maska absolute left-1 top-0 my-1 px-2 leading-10 text-transparent opacity-0",
|
|
633
622
|
"aria-hidden": "true",
|
|
634
|
-
innerHTML:
|
|
635
|
-
}, null, 8,
|
|
636
|
-
e.error ? (r(), i("div",
|
|
637
|
-
|
|
623
|
+
innerHTML: l.maskaValue
|
|
624
|
+
}, null, 8, _e),
|
|
625
|
+
e.error ? (r(), i("div", xe, [
|
|
626
|
+
b(g, {
|
|
638
627
|
class: "-mt-1 mr-1 inline h-5 w-5",
|
|
639
628
|
"aria-hidden": "true"
|
|
640
629
|
})
|
|
641
|
-
])) :
|
|
630
|
+
])) : o("", !0),
|
|
642
631
|
!e.error && e.modelValue && t.shouldShowCheck ? (r(), i("div", Se, [
|
|
643
|
-
|
|
632
|
+
b(d, {
|
|
644
633
|
class: "-mt-1 mr-1 inline h-5 w-5",
|
|
645
634
|
"aria-hidden": "true"
|
|
646
635
|
})
|
|
647
|
-
])) :
|
|
636
|
+
])) : o("", !0)
|
|
648
637
|
], 2),
|
|
649
638
|
e.hint && !e.error ? (r(), i("div", {
|
|
650
639
|
key: 1,
|
|
651
640
|
id: t.computedId + "-hint",
|
|
652
641
|
class: c(["w-full pt-1 text-xs leading-4", { "text-grey-500": e.disabled }]),
|
|
653
642
|
textContent: u(e.hint)
|
|
654
|
-
}, null, 10,
|
|
643
|
+
}, null, 10, Ce)) : o("", !0),
|
|
655
644
|
e.error && e.errormessage ? (r(), i("div", {
|
|
656
645
|
key: 2,
|
|
657
646
|
id: t.computedId + "-errormsg",
|
|
@@ -660,13 +649,13 @@ function Ae(t, n, e, f, s, o) {
|
|
|
660
649
|
}, [
|
|
661
650
|
a("span", {
|
|
662
651
|
textContent: u(e.errormessage)
|
|
663
|
-
}, null, 8,
|
|
664
|
-
], 8,
|
|
652
|
+
}, null, 8, Ve)
|
|
653
|
+
], 8, Ie)) : o("", !0)
|
|
665
654
|
]);
|
|
666
655
|
}
|
|
667
|
-
const
|
|
656
|
+
const Fe = /* @__PURE__ */ _(ye, [["render", Be], ["__scopeId", "data-v-6050fb6d"]]);
|
|
668
657
|
export {
|
|
669
658
|
Ee as AmountInput,
|
|
670
|
-
|
|
671
|
-
|
|
659
|
+
Fe as IbanInput,
|
|
660
|
+
Te as InputField
|
|
672
661
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("maska")):typeof define=="function"&&define.amd?define(["exports","vue","maska"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.mosstandardcomponents={},i.Vue,i.maska))})(this,function(i,e,g){"use strict";const p={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function k(o,n){return e.openBlock(),e.createElementBlock("svg",p,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M1008 540c0 14-4 27-11 39-103 170-293 285-493 285S114 749 11 579c-7-12-11-25-11-39s4-27 11-39c103-170 293-285 493-285s390 115 493 285c7 12 11 25 11 39zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-64 53-117 117-117 15 0 27-12 27-27zm405 216c-53-83-127-154-214-199 22 39 34 83 34 127 0 139-113 252-252 252S252 607 252 468c0-44 12-88 34-127-87 45-161 116-214 199 96 148 251 252 432 252s336-104 432-252z"},null,-1)])])}const b={render:k},w={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function B(o,n){return e.openBlock(),e.createElementBlock("svg",w,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M1008 540c0 15-4 27-11 39-18 29-40 56-62 81-110 127-262 204-431 204l42-74c163-14 302-114 390-250-42-65-95-121-159-165l36-63c70 46 140 117 184 189 7 12 11 24 11 39zm-252-72c0 105-65 198-162 235l158-282c2 15 4 31 4 47zm-21-251v5C616 434 497 646 380 859l-28 50c-3 6-9 9-16 9-10 0-63-33-75-39-6-4-9-9-9-16 0-9 19-40 25-49C168 764 76 680 11 579c-7-11-11-25-11-39 0-13 4-28 11-39 112-171 285-285 493-285 34 0 68 3 101 10l31-55c3-6 9-9 15-9 11 0 63 33 75 39 6 4 9 9 9 16zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-65 53-117 117-117 15 0 27-12 27-27zM312 751l44-79c-65-48-104-124-104-204 0-44 12-88 34-127-87 45-161 116-214 199 58 91 141 166 240 211z"},null,-1)])])}const C={render:B},V={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1039 1008"};function _(o,n){return e.openBlock(),e.createElementBlock("svg",V,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M908 989H131q-32 0-62.5-17T19 926.5 0 863t19-68l388-670q42-62 113-62t112 62l389 670q18 28 18 64 0 75-68 113-31 17-63 17zM576 157q-19-38-55.5-38T463 150L69 826q-20 30 0 69 21 32 56 32h777q35 0 55.5-30.5t.5-70.5zm-13 501.5Q544 676 517.5 676T474 659t-17-45V351q0-29 17-46t45.5-17 45.5 17 17 46v263q0 27-19 44.5zm-97.5 174q-8.5-14.5-8.5-36t18.5-39.5 37.5-18 31 5 20 13q18 18 18 44t-18 44.5-39.5 18.5-36-8.5-23-23z"},null,-1)])])}const h={render:_},S={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function E(o,n){return e.openBlock(),e.createElementBlock("svg",S,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M940 318c0 14-6 28-16 39L517 764l-77 76c-10 10-24 16-38 16s-28-6-38-16l-77-76L84 560c-10-10-16-24-16-38s6-28 16-38l76-77c10-10 25-16 39-16s28 6 38 16l165 166 369-369c10-11 24-16 38-16s29 6 39 16l76 76c10 10 16 24 16 38z"},null,-1)])])}const f={render:E},y=(o,n)=>{const t=o.__vccOpts||o;for(const[d,r]of n)t[d]=r;return t},x={name:"InputField",components:{IconEyeSlash:C,IconPrivacy:b,IconAlert:h,IconCheck:f},props:{modelValue:String,label:String,name:String,placeholder:{type:String,default:" "},required:{type:Boolean,default:!1},optional:{type:Boolean,default:!1},disabled:Boolean,error:{type:Boolean,default:!1},pattern:{type:String,default:null},hidepasswordicon:{type:Boolean,default:!1},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,minlength:String,maxlength:String,type:{type:String,default:"text"},id:{type:String,default:null},hint:String,errormessage:{type:String,default:""},borderClass:{type:String,default:null},showCheck:{type:Boolean,default:!1},inputClass:{type:String,default:null}},emits:["update:modelValue","focus","blur","showpassword","onKeyupEnter"],data:function(){return{initialType:"",fieldType:"text",isActive:!1,hasError:!1,showPassword:!1,shouldShowCheck:!1,computedId:null}},computed:{outlineClass:function(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"}},watch:{type:function(){this.fieldType=this.type}},mounted:function(){this.computedId=this.id?this.id:"cb-input-"+Math.random().toString(36).slice(4),this.checkAutofill(),setTimeout(this.checkAutofill,1e3)},created:function(){this.initialType=this.type,this.fieldType=this.type},methods:{togglePassword:function(){this.showPassword=!this.showPassword,this.fieldType=this.showPassword?"text":"password",this.$emit("showpassword",this.showPassword)},onBlur:function(o){this.isActive=!1,this.$emit("blur",o.target.value),this.showCheck&&(this.shouldShowCheck=!0)},onFocus:function(o){this.isActive=!0,this.$emit("focus")},onKeyupEnter:function(o){this.isActive=!1,this.$emit("onKeyupEnter",o.target.value)},checkAutofill:function(){const o=this.$refs.input;o&&o.value&&this.$emit("update:modelValue",o.value)}}},N={class:"pt-2"},I=["for"],A=["textContent"],q={key:0,class:"text-red"},T={key:1,textContent:" (optioneel)",class:"font-normal"},z=["id","value","type","name","placeholder","required","optional","error","minlength","maxlength","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid"],F=["aria-pressed","aria-label"],K={class:"sr-only"},P={key:1,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"},M={key:2,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},D=["id","textContent"],L=["id"],H=["textContent"],j=["textContent"];function O(o,n,t,d,r,l){const c=e.resolveComponent("icon-privacy"),m=e.resolveComponent("icon-eye-slash"),u=e.resolveComponent("icon-alert"),a=e.resolveComponent("icon-check");return e.openBlock(),e.createElementBlock("div",N,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:o.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:o.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":o.isActive,"text-blue-dark":!t.error&&!o.isActive,"text-blue-dark":t.error&&!o.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,A),t.required?(e.openBlock(),e.createElementBlock("span",q," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",T)):e.createCommentVNode("",!0)],10,I)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[l.outlineClass,o.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.createElementVNode("input",{id:o.computedId,ref:"input",value:t.modelValue,type:o.fieldType,name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,minlength:t.minlength,maxlength:t.maxlength,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?o.computedId+"-hint":null,"aria-errormessage":t.error?o.computedId+"-errormsg":null,pattern:t.pattern,"aria-invalid":t.error.toString(),class:"block h-12 w-full appearance-none border-0 bg-transparent pl-4 pr-8 focus:outline-none","data-clarity-mask":"true",onInput:n[0]||(n[0]=s=>o.$emit("update:modelValue",s.target.value)),onBlur:n[1]||(n[1]=(...s)=>l.onBlur&&l.onBlur(...s)),onFocus:n[2]||(n[2]=(...s)=>l.onFocus&&l.onFocus(...s)),onKeyup:n[3]||(n[3]=e.withKeys((...s)=>l.onKeyupEnter&&l.onKeyupEnter(...s),["enter"]))},null,40,z),o.initialType==="password"&&!t.hidepasswordicon&&!t.disabled?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute right-0 top-0",{"right-8":t.error}])},[e.createElementVNode("button",{type:"button",class:"m-1 px-2 py-3 focus-visible:outline-blue-dark","aria-pressed":o.showPassword,"aria-label":o.showPassword?"Verberg wachtwoord":"Toon wachtwoord",onClick:n[4]||(n[4]=(...s)=>l.togglePassword&&l.togglePassword(...s))},[o.showPassword?(e.openBlock(),e.createBlock(c,{key:0,class:"h-4 w-4","aria-hidden":"true"})):(e.openBlock(),e.createBlock(m,{key:1,class:"h-4 w-4","aria-hidden":"true"})),e.createElementVNode("span",K,e.toDisplayString(o.showPassword?"verberg":"toon")+" wachtwoord",1)],8,F)],2)):e.createCommentVNode("",!0),t.error?(e.openBlock(),e.createElementBlock("div",P,[e.createVNode(u,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0),!t.error&&t.modelValue&&o.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",M,[e.createVNode(a,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:o.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,D)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:o.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,H)],8,L)):e.createCommentVNode("",!0),o.initialType==="password"?(e.openBlock(),e.createElementBlock("p",{key:3,class:"sr-only","aria-live":"polite",textContent:e.toDisplayString(o.showPassword?"wachtwoord wordt getoond":"wachtwoord is verborgen")},null,8,j)):e.createCommentVNode("",!0)])}const G=y(x,[["render",O],["__scopeId","data-v-5a4e94c9"]]),Q={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1010 1008"};function J(o,n){return e.openBlock(),e.createElementBlock("svg",Q,[...n[0]||(n[0]=[e.createElementVNode("path",{d:"M503 100q113 0 209 55.5T863.5 307 919 516t-55.5 208.5T712 876t-209 56-208.5-56T143 724.5 87 516t56-209 151.5-151.5T503 100zm-25 255q29-12 58.5-12t59.5 7l22-83q-36-9-78-9-79 0-149.5 53.5T299 440h-49v55h39q-1 9-1 20t2 24h-40v54h49q22 84 87.5 135T542 779q43 0 73-9l11-4-17-84q-30 11-72 11t-80.5-27-55.5-73h147l10-54H385q-4-25-1-44h184l10-54H397q23-62 81-86z",fill:"currentColor"},null,-1)])])}const R={render:J},U={name:"AmountInput",components:{IconAlert:h,IconCheck:f,VectorImage,IconEuro:R},props:{modelValue:Number,label:String,name:String,placeholder:{type:String,default:""},required:Boolean,optional:Boolean,disabled:Boolean,error:Boolean,pattern:{type:String,default:"[1-9]?"},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,min:String,max:String,id:{type:String,default:null},hint:String,errormessage:String,borderClass:String,showCheck:Boolean,symbol:String},emits:["update:modelValue","input","focus","blur","onKeyupEnter"],data(){return{isActive:!1,shouldShowCheck:!1,displayValue:"",computedId:null,isTyping:!1}},watch:{modelValue:{immediate:!0,handler(o){this.isTyping||(this.displayValue=this.formatCurrency(o))}}},computed:{outlineClass(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"}},mounted(){this.computedId=this.id??"cb-input-"+Math.random().toString(36).slice(4)},methods:{onInput(o){this.isTyping=!0;const n=o.target.value,t=n.replace(/[^\d.,]/g,"").replace(",","."),d=parseFloat(t);isNaN(d)||(this.$emit("update:modelValue",d),this.$emit("input",d)),this.displayValue=n},onBlur(){this.isTyping=!1,this.applyFormatting(),this.isActive=!1,this.$emit("blur",this.modelValue)},onKeyupEnter(){this.isTyping=!1,this.applyFormatting(),this.isActive=!1,this.$emit("onKeyupEnter",this.modelValue)},applyFormatting(){const o=this.displayValue.replace(/[^\d.,]/g,"").replace(",","."),n=parseFloat(o);if(!isNaN(n)){const t=this.formatCurrency(n);this.displayValue=t,this.$emit("update:modelValue",n),this.$emit("input",n)}},formatCurrency(o){return o==null||o===""?"":new Intl.NumberFormat("nl-NL",{minimumFractionDigits:2,maximumFractionDigits:2}).format(o)},onFocus(){this.isActive=!0,this.$emit("focus")}}},W={class:"pt-2"},X=["for"],Y=["textContent"],Z={key:0,class:"text-red"},v={key:1,class:"font-normal",textContent:" (optioneel)"},$=["id","value","name","placeholder","required","optional","error","min","max","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid"],ee={class:"absolute bottom-0 top-0 my-auto ml-2"},te={key:0,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"},oe={key:1,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},ne=["id","textContent"],le=["id"],re=["textContent"];function ae(o,n,t,d,r,l){const c=e.resolveComponent("icon-euro"),m=e.resolveComponent("icon-alert"),u=e.resolveComponent("icon-check");return e.openBlock(),e.createElementBlock("div",W,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:r.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:r.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":r.isActive,"text-blue-dark":!t.error&&!r.isActive,"text-blue-dark":t.error&&!r.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,Y),t.required?(e.openBlock(),e.createElementBlock("span",Z," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",v)):e.createCommentVNode("",!0)],10,X)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[l.outlineClass,r.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.createElementVNode("input",{id:r.computedId,value:r.displayValue,type:"text",name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,min:t.min,max:t.max,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?r.computedId+"-hint":!1,"aria-errormessage":t.error?r.computedId+"-errormsg":!1,pattern:t.pattern,"aria-invalid":t.error.toString(),class:"block h-12 w-full appearance-none border-0 bg-transparent pl-10 pr-8 focus:outline-none",onInput:n[0]||(n[0]=(...a)=>l.onInput&&l.onInput(...a)),onBlur:n[1]||(n[1]=(...a)=>l.onBlur&&l.onBlur(...a)),onFocus:n[2]||(n[2]=(...a)=>l.onFocus&&l.onFocus(...a)),onKeyup:n[3]||(n[3]=e.withKeys((...a)=>l.onKeyupEnter&&l.onKeyupEnter(...a),["enter"]))},null,40,$),e.createElementVNode("div",ee,[e.createVNode(c,{class:"inline h-6 w-6 text-blue-dark"})]),t.error?(e.openBlock(),e.createElementBlock("div",te,[e.createVNode(m,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0),!t.error&&t.modelValue&&r.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",oe,[e.createVNode(u,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:r.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,ne)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:r.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,re)],8,le)):e.createCommentVNode("",!0)])}const ie=y(U,[["render",ae],["__scopeId","data-v-6897d101"]]),se={name:"IbanInput",components:{IconAlert:h,IconCheck:f},directives:{maska:g.vMaska},props:{modelValue:String,label:String,name:String,placeholder:{type:String,default:" "},required:{type:Boolean,default:!1},optional:{type:Boolean,default:!1},disabled:Boolean,error:{type:Boolean,default:!1},pattern:{type:String,default:null},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,minlength:String,maxlength:String,type:{type:String,default:"text"},id:{type:String,default:null},hint:String,errormessage:{type:String,default:""},borderClass:{type:String,default:null},maskaVal:{type:String,default:""},showCheck:{type:Boolean,default:!1}},data:function(){return{initialType:"",fieldType:"text",isActive:!1,hasError:!1,shouldShowCheck:!1,maskaPattern:"@@## @@@@ #### #### ##",maskaPlaceholder:"NL20 INGB 0001 2345 67",computedId:null}},computed:{outlineClass:function(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"},maskaValue:function(){let o=this.maskaPlaceholder;if(this.maskaVal){const n=this.maskaVal.length;o="<i>"+this.maskaVal+"</i>"+o.substring(n)}return o}},watch:{type:function(){this.fieldType=this.type}},created:function(){this.initialType=this.type,this.fieldType=this.type},mounted(){this.computedId=this.id?this.id:"cb-input-"+Math.random().toString(36).slice(4)},methods:{onBlur:function(o){this.isActive=!1,this.$emit("blur",o.target.value),this.showCheck&&(this.shouldShowCheck=!0)},onFocus:function(o){this.isActive=!0,this.$emit("focus")},onKeyupEnter:function(o){this.isActive=!1,this.$emit("onKeyupEnter",o.target.value)}}},de={class:"pt-2"},ce=["for"],me=["textContent"],ue={key:0,class:"text-red"},he={key:1,textContent:" (optioneel)",class:"font-normal"},fe=["id","value","type","name","placeholder","required","optional","error","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid","data-maska"],ye=["innerHTML"],ge={key:0,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"},pe={key:1,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},ke=["id","textContent"],be=["id"],we=["textContent"];function Be(o,n,t,d,r,l){const c=e.resolveComponent("icon-alert"),m=e.resolveComponent("icon-check"),u=e.resolveDirective("maska");return e.openBlock(),e.createElementBlock("div",de,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:o.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:o.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":o.isActive,"text-blue-dark":!t.error&&!o.isActive,"text-blue-dark":t.error&&!o.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,me),t.required?(e.openBlock(),e.createElementBlock("span",ue," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",he)):e.createCommentVNode("",!0)],10,ce)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[l.outlineClass,o.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.withDirectives(e.createElementVNode("input",{id:o.computedId,value:t.modelValue,type:o.fieldType,name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?o.computedId+"-hint":null,"aria-errormessage":t.error?o.computedId+"-errormsg":null,pattern:t.pattern,"aria-invalid":t.error.toString(),"data-maska":o.maskaPattern,class:"block h-12 w-full appearance-none border-0 bg-transparent pl-3 pr-8 focus:outline-none",onInput:n[0]||(n[0]=a=>o.$emit("update:modelValue",a.target.value)),onBlur:n[1]||(n[1]=(...a)=>l.onBlur&&l.onBlur(...a)),onFocus:n[2]||(n[2]=(...a)=>l.onFocus&&l.onFocus(...a)),onKeyup:n[3]||(n[3]=e.withKeys((...a)=>l.onKeyupEnter&&l.onKeyupEnter(...a),["enter"]))},null,40,fe),[[u]]),e.createElementVNode("div",{class:"maska absolute left-1 top-0 my-1 px-2 leading-10 text-transparent opacity-0","aria-hidden":"true",innerHTML:l.maskaValue},null,8,ye),t.error?(e.openBlock(),e.createElementBlock("div",ge,[e.createVNode(c,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0),!t.error&&t.modelValue&&o.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",pe,[e.createVNode(m,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:o.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,ke)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:o.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,we)],8,be)):e.createCommentVNode("",!0)])}const Ce=y(se,[["render",Be],["__scopeId","data-v-6050fb6d"]]);i.AmountInput=ie,i.IbanInput=Ce,i.InputField=G,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("maska")):typeof define=="function"&&define.amd?define(["exports","vue","maska"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.mosstandardcomponents={},i.Vue,i.maska))})(this,function(i,e,g){"use strict";const k={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function b(o,n){return e.openBlock(),e.createElementBlock("svg",k,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M1008 540c0 14-4 27-11 39-103 170-293 285-493 285S114 749 11 579c-7-12-11-25-11-39s4-27 11-39c103-170 293-285 493-285s390 115 493 285c7 12 11 25 11 39zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-64 53-117 117-117 15 0 27-12 27-27zm405 216c-53-83-127-154-214-199 22 39 34 83 34 127 0 139-113 252-252 252S252 607 252 468c0-44 12-88 34-127-87 45-161 116-214 199 96 148 251 252 432 252s336-104 432-252z"},null,-1)])])}const p={render:b},w={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function B(o,n){return e.openBlock(),e.createElementBlock("svg",w,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M1008 540c0 15-4 27-11 39-18 29-40 56-62 81-110 127-262 204-431 204l42-74c163-14 302-114 390-250-42-65-95-121-159-165l36-63c70 46 140 117 184 189 7 12 11 24 11 39zm-252-72c0 105-65 198-162 235l158-282c2 15 4 31 4 47zm-21-251v5C616 434 497 646 380 859l-28 50c-3 6-9 9-16 9-10 0-63-33-75-39-6-4-9-9-9-16 0-9 19-40 25-49C168 764 76 680 11 579c-7-11-11-25-11-39 0-13 4-28 11-39 112-171 285-285 493-285 34 0 68 3 101 10l31-55c3-6 9-9 15-9 11 0 63 33 75 39 6 4 9 9 9 16zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-65 53-117 117-117 15 0 27-12 27-27zM312 751l44-79c-65-48-104-124-104-204 0-44 12-88 34-127-87 45-161 116-214 199 58 91 141 166 240 211z"},null,-1)])])}const C={render:B},V={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1039 1008"};function S(o,n){return e.openBlock(),e.createElementBlock("svg",V,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M908 989H131q-32 0-62.5-17T19 926.5 0 863t19-68l388-670q42-62 113-62t112 62l389 670q18 28 18 64 0 75-68 113-31 17-63 17zM576 157q-19-38-55.5-38T463 150L69 826q-20 30 0 69 21 32 56 32h777q35 0 55.5-30.5t.5-70.5zm-13 501.5Q544 676 517.5 676T474 659t-17-45V351q0-29 17-46t45.5-17 45.5 17 17 46v263q0 27-19 44.5zm-97.5 174q-8.5-14.5-8.5-36t18.5-39.5 37.5-18 31 5 20 13q18 18 18 44t-18 44.5-39.5 18.5-36-8.5-23-23z"},null,-1)])])}const u={render:S},E={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function _(o,n){return e.openBlock(),e.createElementBlock("svg",E,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M940 318c0 14-6 28-16 39L517 764l-77 76c-10 10-24 16-38 16s-28-6-38-16l-77-76L84 560c-10-10-16-24-16-38s6-28 16-38l76-77c10-10 25-16 39-16s28 6 38 16l165 166 369-369c10-11 24-16 38-16s29 6 39 16l76 76c10 10 16 24 16 38z"},null,-1)])])}const h={render:_},f=(o,n)=>{const t=o.__vccOpts||o;for(const[c,r]of n)t[c]=r;return t},x={name:"InputField",components:{IconEyeSlash:C,IconPrivacy:p,IconAlert:u,IconCheck:h},props:{modelValue:String,label:String,name:String,placeholder:{type:String,default:" "},required:{type:Boolean,default:!1},optional:{type:Boolean,default:!1},disabled:Boolean,error:{type:Boolean,default:!1},pattern:{type:String,default:null},hidepasswordicon:{type:Boolean,default:!1},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,minlength:String,maxlength:String,type:{type:String,default:"text"},id:{type:String,default:null},hint:String,errormessage:{type:String,default:""},borderClass:{type:String,default:null},showCheck:{type:Boolean,default:!1},inputClass:{type:String,default:null}},emits:["update:modelValue","focus","blur","showpassword","onKeyupEnter"],data:function(){return{initialType:"",fieldType:"text",isActive:!1,hasError:!1,showPassword:!1,shouldShowCheck:!1,computedId:null}},computed:{outlineClass:function(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"}},watch:{type:function(){this.fieldType=this.type}},mounted:function(){this.computedId=this.id?this.id:"cb-input-"+Math.random().toString(36).slice(4),this.checkAutofill(),setTimeout(this.checkAutofill,1e3)},created:function(){this.initialType=this.type,this.fieldType=this.type},methods:{togglePassword:function(){this.showPassword=!this.showPassword,this.fieldType=this.showPassword?"text":"password",this.$emit("showpassword",this.showPassword)},onBlur:function(o){this.isActive=!1,this.$emit("blur",o.target.value),this.showCheck&&(this.shouldShowCheck=!0)},onFocus:function(o){this.isActive=!0,this.$emit("focus")},onKeyupEnter:function(o){this.isActive=!1,this.$emit("onKeyupEnter",o.target.value)},checkAutofill:function(){const o=this.$refs.input;o&&o.value&&this.$emit("update:modelValue",o.value)}}},N={class:"pt-2"},I=["for"],A=["textContent"],T={key:0,class:"text-red"},q={key:1,textContent:" (optioneel)",class:"font-normal"},z=["id","value","type","name","placeholder","required","optional","error","minlength","maxlength","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid"],F=["aria-pressed","aria-label"],K={class:"sr-only"},P={key:1,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"},D={key:2,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},M=["id","textContent"],L=["id"],H=["textContent"],O=["textContent"];function j(o,n,t,c,r,l){const m=e.resolveComponent("icon-privacy"),a=e.resolveComponent("icon-eye-slash"),y=e.resolveComponent("icon-alert"),s=e.resolveComponent("icon-check");return e.openBlock(),e.createElementBlock("div",N,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:o.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:o.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":o.isActive,"text-blue-dark":!t.error&&!o.isActive,"text-blue-dark":t.error&&!o.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,A),t.required?(e.openBlock(),e.createElementBlock("span",T," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",q)):e.createCommentVNode("",!0)],10,I)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[l.outlineClass,o.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.createElementVNode("input",{id:o.computedId,ref:"input",value:t.modelValue,type:o.fieldType,name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,minlength:t.minlength,maxlength:t.maxlength,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?o.computedId+"-hint":null,"aria-errormessage":t.error?o.computedId+"-errormsg":null,pattern:t.pattern,"aria-invalid":t.error.toString(),class:"block h-12 w-full appearance-none border-0 bg-transparent pl-4 pr-8 focus:outline-none","data-clarity-mask":"true",onInput:n[0]||(n[0]=d=>o.$emit("update:modelValue",d.target.value)),onBlur:n[1]||(n[1]=(...d)=>l.onBlur&&l.onBlur(...d)),onFocus:n[2]||(n[2]=(...d)=>l.onFocus&&l.onFocus(...d)),onKeyup:n[3]||(n[3]=e.withKeys((...d)=>l.onKeyupEnter&&l.onKeyupEnter(...d),["enter"]))},null,40,z),o.initialType==="password"&&!t.hidepasswordicon&&!t.disabled?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute right-0 top-0",{"right-8":t.error}])},[e.createElementVNode("button",{type:"button",class:"m-1 px-2 py-3 focus-visible:outline-blue-dark","aria-pressed":o.showPassword,"aria-label":o.showPassword?"Verberg wachtwoord":"Toon wachtwoord",onClick:n[4]||(n[4]=(...d)=>l.togglePassword&&l.togglePassword(...d))},[o.showPassword?(e.openBlock(),e.createBlock(m,{key:0,class:"h-4 w-4","aria-hidden":"true"})):(e.openBlock(),e.createBlock(a,{key:1,class:"h-4 w-4","aria-hidden":"true"})),e.createElementVNode("span",K,e.toDisplayString(o.showPassword?"verberg":"toon")+" wachtwoord",1)],8,F)],2)):e.createCommentVNode("",!0),t.error?(e.openBlock(),e.createElementBlock("div",P,[e.createVNode(y,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0),!t.error&&t.modelValue&&o.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",D,[e.createVNode(s,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:o.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,M)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:o.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,H)],8,L)):e.createCommentVNode("",!0),o.initialType==="password"?(e.openBlock(),e.createElementBlock("p",{key:3,class:"sr-only","aria-live":"polite",textContent:e.toDisplayString(o.showPassword?"wachtwoord wordt getoond":"wachtwoord is verborgen")},null,8,O)):e.createCommentVNode("",!0)])}const G=f(x,[["render",j],["__scopeId","data-v-5a4e94c9"]]),Q={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1010 1008"};function R(o,n){return e.openBlock(),e.createElementBlock("svg",Q,[...n[0]||(n[0]=[e.createElementVNode("path",{d:"M503 100q113 0 209 55.5T863.5 307 919 516t-55.5 208.5T712 876t-209 56-208.5-56T143 724.5 87 516t56-209 151.5-151.5T503 100zm-25 255q29-12 58.5-12t59.5 7l22-83q-36-9-78-9-79 0-149.5 53.5T299 440h-49v55h39q-1 9-1 20t2 24h-40v54h49q22 84 87.5 135T542 779q43 0 73-9l11-4-17-84q-30 11-72 11t-80.5-27-55.5-73h147l10-54H385q-4-25-1-44h184l10-54H397q23-62 81-86z",fill:"currentColor"},null,-1)])])}const W={name:"AmountInput",components:{IconAlert:u,IconCheck:h,IconEuro:{render:R}},props:{modelValue:Number,label:String,name:String,placeholder:{type:String,default:""},required:Boolean,optional:Boolean,disabled:Boolean,error:Boolean,pattern:{type:String,default:"[1-9]?"},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,min:String,max:String,id:{type:String,default:null},hint:String,errormessage:String,borderClass:String,showCheck:Boolean,symbol:String},emits:["update:modelValue","input","focus","blur","onKeyupEnter"],data(){return{isActive:!1,shouldShowCheck:!1,displayValue:"",computedId:null,isTyping:!1}},watch:{modelValue:{immediate:!0,handler(o){this.isTyping||(this.displayValue=this.formatCurrency(o))}}},computed:{outlineClass(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"}},mounted(){this.computedId=this.id??"cb-input-"+Math.random().toString(36).slice(4)},methods:{onInput(o){this.isTyping=!0;const n=o.target.value,t=n.replace(/[^\d.,]/g,"").replace(",","."),c=parseFloat(t);isNaN(c)||(this.$emit("update:modelValue",c),this.$emit("input",c)),this.displayValue=n},onBlur(){this.isTyping=!1,this.applyFormatting(),this.isActive=!1,this.$emit("blur",this.modelValue)},onKeyupEnter(){this.isTyping=!1,this.applyFormatting(),this.isActive=!1,this.$emit("onKeyupEnter",this.modelValue)},applyFormatting(){const o=this.displayValue.replace(/[^\d.,]/g,"").replace(",","."),n=parseFloat(o);if(!isNaN(n)){const t=this.formatCurrency(n);this.displayValue=t,this.$emit("update:modelValue",n),this.$emit("input",n)}},formatCurrency(o){return o==null||o===""?"":new Intl.NumberFormat("nl-NL",{minimumFractionDigits:2,maximumFractionDigits:2}).format(o)},onFocus(){this.isActive=!0,this.$emit("focus")}}},J={class:"pt-2"},U=["for"],X=["textContent"],Y={key:0,class:"text-red"},Z={key:1,class:"font-normal",textContent:" (optioneel)"},v=["id","value","name","placeholder","required","optional","error","min","max","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid"],$={key:0,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},ee=["id","textContent"],te=["id"],oe=["textContent"];function ne(o,n,t,c,r,l){const m=e.resolveComponent("icon-check");return e.openBlock(),e.createElementBlock("div",J,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:r.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:r.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":r.isActive,"text-blue-dark":!t.error&&!r.isActive,"text-blue-dark":t.error&&!r.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,X),t.required?(e.openBlock(),e.createElementBlock("span",Y," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",Z)):e.createCommentVNode("",!0)],10,U)):e.createCommentVNode("",!0),n[4]||(n[4]=e.createTextVNode(" HELLO WORLDS ",-1)),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[l.outlineClass,r.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.createElementVNode("input",{id:r.computedId,value:r.displayValue,type:"text",name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,min:t.min,max:t.max,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?r.computedId+"-hint":!1,"aria-errormessage":t.error?r.computedId+"-errormsg":!1,pattern:t.pattern,"aria-invalid":t.error.toString(),class:"block h-12 w-full appearance-none border-0 bg-transparent pl-10 pr-8 focus:outline-none",onInput:n[0]||(n[0]=(...a)=>l.onInput&&l.onInput(...a)),onBlur:n[1]||(n[1]=(...a)=>l.onBlur&&l.onBlur(...a)),onFocus:n[2]||(n[2]=(...a)=>l.onFocus&&l.onFocus(...a)),onKeyup:n[3]||(n[3]=e.withKeys((...a)=>l.onKeyupEnter&&l.onKeyupEnter(...a),["enter"]))},null,40,v),!t.error&&t.modelValue&&r.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",$,[e.createVNode(m,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:r.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,ee)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:r.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,oe)],8,te)):e.createCommentVNode("",!0)])}const le=f(W,[["render",ne],["__scopeId","data-v-51e188b7"]]),re={name:"IbanInput",components:{IconAlert:u,IconCheck:h},directives:{maska:g.vMaska},props:{modelValue:String,label:String,name:String,placeholder:{type:String,default:" "},required:{type:Boolean,default:!1},optional:{type:Boolean,default:!1},disabled:Boolean,error:{type:Boolean,default:!1},pattern:{type:String,default:null},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,minlength:String,maxlength:String,type:{type:String,default:"text"},id:{type:String,default:null},hint:String,errormessage:{type:String,default:""},borderClass:{type:String,default:null},maskaVal:{type:String,default:""},showCheck:{type:Boolean,default:!1}},data:function(){return{initialType:"",fieldType:"text",isActive:!1,hasError:!1,shouldShowCheck:!1,maskaPattern:"@@## @@@@ #### #### ##",maskaPlaceholder:"NL20 INGB 0001 2345 67",computedId:null}},computed:{outlineClass:function(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"},maskaValue:function(){let o=this.maskaPlaceholder;if(this.maskaVal){const n=this.maskaVal.length;o="<i>"+this.maskaVal+"</i>"+o.substring(n)}return o}},watch:{type:function(){this.fieldType=this.type}},created:function(){this.initialType=this.type,this.fieldType=this.type},mounted(){this.computedId=this.id?this.id:"cb-input-"+Math.random().toString(36).slice(4)},methods:{onBlur:function(o){this.isActive=!1,this.$emit("blur",o.target.value),this.showCheck&&(this.shouldShowCheck=!0)},onFocus:function(o){this.isActive=!0,this.$emit("focus")},onKeyupEnter:function(o){this.isActive=!1,this.$emit("onKeyupEnter",o.target.value)}}},ae={class:"pt-2"},ie=["for"],se=["textContent"],de={key:0,class:"text-red"},ce={key:1,textContent:" (optioneel)",class:"font-normal"},me=["id","value","type","name","placeholder","required","optional","error","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid","data-maska"],ue=["innerHTML"],he={key:0,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"},fe={key:1,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},ye=["id","textContent"],ge=["id"],ke=["textContent"];function be(o,n,t,c,r,l){const m=e.resolveComponent("icon-alert"),a=e.resolveComponent("icon-check"),y=e.resolveDirective("maska");return e.openBlock(),e.createElementBlock("div",ae,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:o.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:o.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":o.isActive,"text-blue-dark":!t.error&&!o.isActive,"text-blue-dark":t.error&&!o.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,se),t.required?(e.openBlock(),e.createElementBlock("span",de," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",ce)):e.createCommentVNode("",!0)],10,ie)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[l.outlineClass,o.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.withDirectives(e.createElementVNode("input",{id:o.computedId,value:t.modelValue,type:o.fieldType,name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?o.computedId+"-hint":null,"aria-errormessage":t.error?o.computedId+"-errormsg":null,pattern:t.pattern,"aria-invalid":t.error.toString(),"data-maska":o.maskaPattern,class:"block h-12 w-full appearance-none border-0 bg-transparent pl-3 pr-8 focus:outline-none",onInput:n[0]||(n[0]=s=>o.$emit("update:modelValue",s.target.value)),onBlur:n[1]||(n[1]=(...s)=>l.onBlur&&l.onBlur(...s)),onFocus:n[2]||(n[2]=(...s)=>l.onFocus&&l.onFocus(...s)),onKeyup:n[3]||(n[3]=e.withKeys((...s)=>l.onKeyupEnter&&l.onKeyupEnter(...s),["enter"]))},null,40,me),[[y]]),e.createElementVNode("div",{class:"maska absolute left-1 top-0 my-1 px-2 leading-10 text-transparent opacity-0","aria-hidden":"true",innerHTML:l.maskaValue},null,8,ue),t.error?(e.openBlock(),e.createElementBlock("div",he,[e.createVNode(m,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0),!t.error&&t.modelValue&&o.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",fe,[e.createVNode(a,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:o.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,ye)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:o.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,ke)],8,ge)):e.createCommentVNode("",!0)])}const pe=f(re,[["render",be],["__scopeId","data-v-6050fb6d"]]);i.AmountInput=le,i.IbanInput=pe,i.InputField=G,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
input[type=number][data-v-5a4e94c9]::-webkit-inner-spin-button,input[type=number][data-v-5a4e94c9]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=password][data-v-5a4e94c9]::-ms-reveal,input[type=password][data-v-5a4e94c9]::-ms-clear{display:none}input[type=number][data-v-5a4e94c9]{-moz-appearance:textfield}input[data-v-
|
|
1
|
+
input[type=number][data-v-5a4e94c9]::-webkit-inner-spin-button,input[type=number][data-v-5a4e94c9]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=password][data-v-5a4e94c9]::-ms-reveal,input[type=password][data-v-5a4e94c9]::-ms-clear{display:none}input[type=number][data-v-5a4e94c9]{-moz-appearance:textfield}input[data-v-51e188b7]::-webkit-outer-spin-button,input[data-v-51e188b7]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-51e188b7]{-moz-appearance:textfield}input[data-v-6050fb6d]{text-transform:uppercase}.maska[data-v-6050fb6d]{letter-spacing:0;font-variant-numeric:tabular-nums;pointer-events:none}input:not(:placeholder-shown)+label+.maska[data-v-6050fb6d],input:focus+label+.maska[data-v-6050fb6d]{opacity:1;color:#999}.maska[data-v-6050fb6d] i{color:transparent;opacity:0;text-transform:uppercase;font-style:unset}input[data-v-6050fb6d]::-webkit-outer-spin-button,input[data-v-6050fb6d]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-6050fb6d]{-moz-appearance:textfield}
|