@italia/input 0.1.0-alpha.0 → 0.1.0-alpha.2
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/custom-elements.json +263 -292
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/it-input.d.ts +25 -1077
- package/dist/src/it-input.d.ts.map +1 -1
- package/dist/src/it-input.js +982 -481
- package/dist/src/it-input.js.map +1 -1
- package/dist/src/locales/it.d.ts.map +1 -1
- package/package.json +15 -14
- package/styles/globals.scss +15 -6
package/custom-elements.json
CHANGED
|
@@ -28,70 +28,31 @@
|
|
|
28
28
|
"members": [
|
|
29
29
|
{
|
|
30
30
|
"kind": "field",
|
|
31
|
-
"name": "
|
|
32
|
-
"static": true,
|
|
33
|
-
"readonly": true
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"kind": "field",
|
|
37
|
-
"name": "internals",
|
|
38
|
-
"attribute": "internals"
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
"kind": "field",
|
|
42
|
-
"name": "slotted",
|
|
43
|
-
"type": {
|
|
44
|
-
"text": "boolean"
|
|
45
|
-
},
|
|
46
|
-
"default": "false",
|
|
47
|
-
"attribute": "slotted"
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
"kind": "field",
|
|
51
|
-
"name": "invalid",
|
|
52
|
-
"type": {
|
|
53
|
-
"text": "boolean"
|
|
54
|
-
},
|
|
55
|
-
"default": "false",
|
|
56
|
-
"attribute": "invalid",
|
|
57
|
-
"reflects": true
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"kind": "field",
|
|
61
|
-
"name": "customValidation",
|
|
31
|
+
"name": "_slotPrepend",
|
|
62
32
|
"type": {
|
|
63
|
-
"text": "
|
|
33
|
+
"text": "HTMLSlotElement | null"
|
|
64
34
|
},
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"reflects": true
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
"kind": "field",
|
|
71
|
-
"name": "required",
|
|
72
|
-
"type": {
|
|
73
|
-
"text": "boolean"
|
|
74
|
-
},
|
|
75
|
-
"default": "false",
|
|
76
|
-
"attribute": "required",
|
|
77
|
-
"reflects": true
|
|
35
|
+
"privacy": "private",
|
|
36
|
+
"default": "null"
|
|
78
37
|
},
|
|
79
38
|
{
|
|
80
39
|
"kind": "field",
|
|
81
|
-
"name": "
|
|
40
|
+
"name": "_slotAppend",
|
|
82
41
|
"type": {
|
|
83
|
-
"text": "
|
|
42
|
+
"text": "HTMLSlotElement | null"
|
|
84
43
|
},
|
|
85
|
-
"
|
|
86
|
-
"
|
|
44
|
+
"privacy": "private",
|
|
45
|
+
"default": "null"
|
|
87
46
|
},
|
|
88
47
|
{
|
|
89
48
|
"kind": "field",
|
|
90
|
-
"name": "
|
|
49
|
+
"name": "type",
|
|
91
50
|
"type": {
|
|
92
|
-
"text": "
|
|
51
|
+
"text": "InputType"
|
|
93
52
|
},
|
|
94
|
-
"
|
|
53
|
+
"default": "'text'",
|
|
54
|
+
"description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
|
|
55
|
+
"attribute": "type"
|
|
95
56
|
},
|
|
96
57
|
{
|
|
97
58
|
"kind": "field",
|
|
@@ -99,16 +60,18 @@
|
|
|
99
60
|
"type": {
|
|
100
61
|
"text": "Sizes | undefined"
|
|
101
62
|
},
|
|
63
|
+
"description": "The input's size.",
|
|
102
64
|
"attribute": "size"
|
|
103
65
|
},
|
|
104
66
|
{
|
|
105
67
|
"kind": "field",
|
|
106
|
-
"name": "
|
|
68
|
+
"name": "adaptive",
|
|
107
69
|
"type": {
|
|
108
|
-
"text": "
|
|
70
|
+
"text": "boolean"
|
|
109
71
|
},
|
|
110
|
-
"default": "
|
|
111
|
-
"
|
|
72
|
+
"default": "false",
|
|
73
|
+
"description": "If you want number-input to be adaptive in width",
|
|
74
|
+
"attribute": "adaptive"
|
|
112
75
|
},
|
|
113
76
|
{
|
|
114
77
|
"kind": "field",
|
|
@@ -117,26 +80,9 @@
|
|
|
117
80
|
"text": "boolean"
|
|
118
81
|
},
|
|
119
82
|
"default": "false",
|
|
83
|
+
"description": "If you want label to be hidden.",
|
|
120
84
|
"attribute": "label-hidden"
|
|
121
85
|
},
|
|
122
|
-
{
|
|
123
|
-
"kind": "field",
|
|
124
|
-
"name": "type",
|
|
125
|
-
"type": {
|
|
126
|
-
"text": "InputType"
|
|
127
|
-
},
|
|
128
|
-
"default": "'text'",
|
|
129
|
-
"attribute": "type"
|
|
130
|
-
},
|
|
131
|
-
{
|
|
132
|
-
"kind": "field",
|
|
133
|
-
"name": "name",
|
|
134
|
-
"type": {
|
|
135
|
-
"text": "string"
|
|
136
|
-
},
|
|
137
|
-
"default": "''",
|
|
138
|
-
"attribute": "name"
|
|
139
|
-
},
|
|
140
86
|
{
|
|
141
87
|
"kind": "field",
|
|
142
88
|
"name": "placeholder",
|
|
@@ -144,6 +90,7 @@
|
|
|
144
90
|
"text": "string"
|
|
145
91
|
},
|
|
146
92
|
"default": "''",
|
|
93
|
+
"description": "Placeholder text to show as a hint when the input is empty.",
|
|
147
94
|
"attribute": "placeholder"
|
|
148
95
|
},
|
|
149
96
|
{
|
|
@@ -153,17 +100,9 @@
|
|
|
153
100
|
"text": "string"
|
|
154
101
|
},
|
|
155
102
|
"default": "''",
|
|
103
|
+
"description": "The input's help text.",
|
|
156
104
|
"attribute": "support-text"
|
|
157
105
|
},
|
|
158
|
-
{
|
|
159
|
-
"kind": "field",
|
|
160
|
-
"name": "disabled",
|
|
161
|
-
"type": {
|
|
162
|
-
"text": "boolean"
|
|
163
|
-
},
|
|
164
|
-
"default": "false",
|
|
165
|
-
"attribute": "disabled"
|
|
166
|
-
},
|
|
167
106
|
{
|
|
168
107
|
"kind": "field",
|
|
169
108
|
"name": "plaintext",
|
|
@@ -171,6 +110,7 @@
|
|
|
171
110
|
"text": "boolean"
|
|
172
111
|
},
|
|
173
112
|
"default": "false",
|
|
113
|
+
"description": "If you want the input to be displayed as plaintext.",
|
|
174
114
|
"attribute": "plaintext"
|
|
175
115
|
},
|
|
176
116
|
{
|
|
@@ -180,6 +120,7 @@
|
|
|
180
120
|
"text": "boolean"
|
|
181
121
|
},
|
|
182
122
|
"default": "false",
|
|
123
|
+
"description": "If the input is read-only.",
|
|
183
124
|
"attribute": "readonly"
|
|
184
125
|
},
|
|
185
126
|
{
|
|
@@ -189,6 +130,7 @@
|
|
|
189
130
|
"text": "boolean"
|
|
190
131
|
},
|
|
191
132
|
"default": "false",
|
|
133
|
+
"description": "If your input is of type 'password' and you want to display a strength meter",
|
|
192
134
|
"attribute": "strength-meter"
|
|
193
135
|
},
|
|
194
136
|
{
|
|
@@ -198,35 +140,23 @@
|
|
|
198
140
|
"text": "boolean"
|
|
199
141
|
},
|
|
200
142
|
"default": "false",
|
|
143
|
+
"description": "If your input is of type 'password' and you want to show password suggestions.",
|
|
201
144
|
"attribute": "suggestions"
|
|
202
145
|
},
|
|
203
146
|
{
|
|
204
147
|
"kind": "field",
|
|
205
|
-
"name": "
|
|
206
|
-
"type": {
|
|
207
|
-
"text": "number"
|
|
208
|
-
},
|
|
209
|
-
"default": "-1",
|
|
210
|
-
"attribute": "minlength"
|
|
211
|
-
},
|
|
212
|
-
{
|
|
213
|
-
"kind": "field",
|
|
214
|
-
"name": "maxlength",
|
|
148
|
+
"name": "labelElements",
|
|
215
149
|
"type": {
|
|
216
|
-
"text": "
|
|
217
|
-
}
|
|
218
|
-
"default": "-1",
|
|
219
|
-
"attribute": "maxlength"
|
|
150
|
+
"text": "HTMLElement[]"
|
|
151
|
+
}
|
|
220
152
|
},
|
|
221
153
|
{
|
|
222
154
|
"kind": "field",
|
|
223
|
-
"name": "
|
|
155
|
+
"name": "label",
|
|
224
156
|
"type": {
|
|
225
|
-
"text": "string
|
|
157
|
+
"text": "string"
|
|
226
158
|
},
|
|
227
|
-
"
|
|
228
|
-
"description": "Pattern the `value` must match to be valid",
|
|
229
|
-
"attribute": "pattern"
|
|
159
|
+
"readonly": true
|
|
230
160
|
},
|
|
231
161
|
{
|
|
232
162
|
"kind": "field",
|
|
@@ -257,57 +187,12 @@
|
|
|
257
187
|
},
|
|
258
188
|
{
|
|
259
189
|
"kind": "field",
|
|
260
|
-
"name": "
|
|
261
|
-
"type": {
|
|
262
|
-
"text": "string"
|
|
263
|
-
},
|
|
264
|
-
"default": "''"
|
|
265
|
-
},
|
|
266
|
-
{
|
|
267
|
-
"kind": "field",
|
|
268
|
-
"name": "_touched",
|
|
269
|
-
"type": {
|
|
270
|
-
"text": "boolean"
|
|
271
|
-
},
|
|
272
|
-
"default": "false"
|
|
273
|
-
},
|
|
274
|
-
{
|
|
275
|
-
"kind": "field",
|
|
276
|
-
"name": "validityMessage",
|
|
277
|
-
"type": {
|
|
278
|
-
"text": "string"
|
|
279
|
-
},
|
|
280
|
-
"privacy": "public",
|
|
281
|
-
"default": "''",
|
|
282
|
-
"attribute": "validityMessage"
|
|
283
|
-
},
|
|
284
|
-
{
|
|
285
|
-
"kind": "field",
|
|
286
|
-
"name": "value",
|
|
287
|
-
"attribute": "value",
|
|
288
|
-
"reflects": true
|
|
289
|
-
},
|
|
290
|
-
{
|
|
291
|
-
"kind": "field",
|
|
292
|
-
"name": "inputElement",
|
|
190
|
+
"name": "slotted",
|
|
293
191
|
"readonly": true
|
|
294
192
|
},
|
|
295
|
-
{
|
|
296
|
-
"kind": "method",
|
|
297
|
-
"name": "_handleFormdata",
|
|
298
|
-
"parameters": [
|
|
299
|
-
{
|
|
300
|
-
"name": "event",
|
|
301
|
-
"type": {
|
|
302
|
-
"text": "FormDataEvent"
|
|
303
|
-
}
|
|
304
|
-
}
|
|
305
|
-
]
|
|
306
|
-
},
|
|
307
193
|
{
|
|
308
194
|
"kind": "method",
|
|
309
195
|
"name": "_handleInput",
|
|
310
|
-
"privacy": "private",
|
|
311
196
|
"parameters": [
|
|
312
197
|
{
|
|
313
198
|
"name": "e",
|
|
@@ -317,14 +202,6 @@
|
|
|
317
202
|
}
|
|
318
203
|
]
|
|
319
204
|
},
|
|
320
|
-
{
|
|
321
|
-
"kind": "method",
|
|
322
|
-
"name": "checkValidity"
|
|
323
|
-
},
|
|
324
|
-
{
|
|
325
|
-
"kind": "method",
|
|
326
|
-
"name": "_handleBlur"
|
|
327
|
-
},
|
|
328
205
|
{
|
|
329
206
|
"kind": "method",
|
|
330
207
|
"name": "_togglePasswordVisibility",
|
|
@@ -353,6 +230,33 @@
|
|
|
353
230
|
"name": "_updateStrengthInfos",
|
|
354
231
|
"privacy": "private"
|
|
355
232
|
},
|
|
233
|
+
{
|
|
234
|
+
"kind": "method",
|
|
235
|
+
"name": "_cleanFloat",
|
|
236
|
+
"privacy": "private",
|
|
237
|
+
"static": true,
|
|
238
|
+
"parameters": [
|
|
239
|
+
{
|
|
240
|
+
"name": "num",
|
|
241
|
+
"type": {
|
|
242
|
+
"text": "number"
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
]
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"kind": "method",
|
|
249
|
+
"name": "_inputNumberIncDec",
|
|
250
|
+
"privacy": "private",
|
|
251
|
+
"parameters": [
|
|
252
|
+
{
|
|
253
|
+
"name": "v",
|
|
254
|
+
"type": {
|
|
255
|
+
"text": "number"
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
]
|
|
259
|
+
},
|
|
356
260
|
{
|
|
357
261
|
"kind": "method",
|
|
358
262
|
"name": "_renderTogglePasswordButton",
|
|
@@ -378,83 +282,48 @@
|
|
|
378
282
|
"type": {
|
|
379
283
|
"text": "string"
|
|
380
284
|
}
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"name": "invalid",
|
|
288
|
+
"type": {
|
|
289
|
+
"text": "boolean"
|
|
290
|
+
}
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"name": "validityMessage",
|
|
294
|
+
"type": {
|
|
295
|
+
"text": "string"
|
|
296
|
+
}
|
|
381
297
|
}
|
|
382
298
|
]
|
|
383
299
|
}
|
|
384
300
|
],
|
|
385
|
-
"events": [
|
|
386
|
-
{
|
|
387
|
-
"name": "on-input",
|
|
388
|
-
"type": {
|
|
389
|
-
"text": "CustomEvent"
|
|
390
|
-
}
|
|
391
|
-
},
|
|
392
|
-
{
|
|
393
|
-
"name": "input-ready",
|
|
394
|
-
"type": {
|
|
395
|
-
"text": "CustomEvent"
|
|
396
|
-
}
|
|
397
|
-
}
|
|
398
|
-
],
|
|
399
301
|
"attributes": [
|
|
400
302
|
{
|
|
401
|
-
"name": "
|
|
402
|
-
"fieldName": "internals"
|
|
403
|
-
},
|
|
404
|
-
{
|
|
405
|
-
"name": "slotted",
|
|
406
|
-
"type": {
|
|
407
|
-
"text": "boolean"
|
|
408
|
-
},
|
|
409
|
-
"default": "false",
|
|
410
|
-
"fieldName": "slotted"
|
|
411
|
-
},
|
|
412
|
-
{
|
|
413
|
-
"name": "invalid",
|
|
414
|
-
"type": {
|
|
415
|
-
"text": "boolean"
|
|
416
|
-
},
|
|
417
|
-
"default": "false",
|
|
418
|
-
"fieldName": "invalid"
|
|
419
|
-
},
|
|
420
|
-
{
|
|
421
|
-
"name": "custom-validation",
|
|
422
|
-
"type": {
|
|
423
|
-
"text": "boolean"
|
|
424
|
-
},
|
|
425
|
-
"default": "false",
|
|
426
|
-
"fieldName": "customValidation"
|
|
427
|
-
},
|
|
428
|
-
{
|
|
429
|
-
"name": "required",
|
|
430
|
-
"type": {
|
|
431
|
-
"text": "boolean"
|
|
432
|
-
},
|
|
433
|
-
"default": "false",
|
|
434
|
-
"fieldName": "required"
|
|
435
|
-
},
|
|
436
|
-
{
|
|
437
|
-
"name": "validity-message",
|
|
303
|
+
"name": "type",
|
|
438
304
|
"type": {
|
|
439
|
-
"text": "
|
|
305
|
+
"text": "InputType"
|
|
440
306
|
},
|
|
441
|
-
"default": "''",
|
|
442
|
-
"
|
|
307
|
+
"default": "'text'",
|
|
308
|
+
"description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
|
|
309
|
+
"fieldName": "type"
|
|
443
310
|
},
|
|
444
311
|
{
|
|
445
312
|
"name": "size",
|
|
446
313
|
"type": {
|
|
447
314
|
"text": "Sizes | undefined"
|
|
448
315
|
},
|
|
316
|
+
"description": "The input's size.",
|
|
449
317
|
"fieldName": "size"
|
|
450
318
|
},
|
|
451
319
|
{
|
|
452
|
-
"name": "
|
|
320
|
+
"name": "adaptive",
|
|
453
321
|
"type": {
|
|
454
|
-
"text": "
|
|
322
|
+
"text": "boolean"
|
|
455
323
|
},
|
|
456
|
-
"default": "
|
|
457
|
-
"
|
|
324
|
+
"default": "false",
|
|
325
|
+
"description": "If you want number-input to be adaptive in width",
|
|
326
|
+
"fieldName": "adaptive"
|
|
458
327
|
},
|
|
459
328
|
{
|
|
460
329
|
"name": "label-hidden",
|
|
@@ -462,30 +331,16 @@
|
|
|
462
331
|
"text": "boolean"
|
|
463
332
|
},
|
|
464
333
|
"default": "false",
|
|
334
|
+
"description": "If you want label to be hidden.",
|
|
465
335
|
"fieldName": "labelHidden"
|
|
466
336
|
},
|
|
467
|
-
{
|
|
468
|
-
"name": "type",
|
|
469
|
-
"type": {
|
|
470
|
-
"text": "InputType"
|
|
471
|
-
},
|
|
472
|
-
"default": "'text'",
|
|
473
|
-
"fieldName": "type"
|
|
474
|
-
},
|
|
475
|
-
{
|
|
476
|
-
"name": "name",
|
|
477
|
-
"type": {
|
|
478
|
-
"text": "string"
|
|
479
|
-
},
|
|
480
|
-
"default": "''",
|
|
481
|
-
"fieldName": "name"
|
|
482
|
-
},
|
|
483
337
|
{
|
|
484
338
|
"name": "placeholder",
|
|
485
339
|
"type": {
|
|
486
340
|
"text": "string"
|
|
487
341
|
},
|
|
488
342
|
"default": "''",
|
|
343
|
+
"description": "Placeholder text to show as a hint when the input is empty.",
|
|
489
344
|
"fieldName": "placeholder"
|
|
490
345
|
},
|
|
491
346
|
{
|
|
@@ -494,22 +349,16 @@
|
|
|
494
349
|
"text": "string"
|
|
495
350
|
},
|
|
496
351
|
"default": "''",
|
|
352
|
+
"description": "The input's help text.",
|
|
497
353
|
"fieldName": "supportText"
|
|
498
354
|
},
|
|
499
|
-
{
|
|
500
|
-
"name": "disabled",
|
|
501
|
-
"type": {
|
|
502
|
-
"text": "boolean"
|
|
503
|
-
},
|
|
504
|
-
"default": "false",
|
|
505
|
-
"fieldName": "disabled"
|
|
506
|
-
},
|
|
507
355
|
{
|
|
508
356
|
"name": "plaintext",
|
|
509
357
|
"type": {
|
|
510
358
|
"text": "boolean"
|
|
511
359
|
},
|
|
512
360
|
"default": "false",
|
|
361
|
+
"description": "If you want the input to be displayed as plaintext.",
|
|
513
362
|
"fieldName": "plaintext"
|
|
514
363
|
},
|
|
515
364
|
{
|
|
@@ -518,6 +367,7 @@
|
|
|
518
367
|
"text": "boolean"
|
|
519
368
|
},
|
|
520
369
|
"default": "false",
|
|
370
|
+
"description": "If the input is read-only.",
|
|
521
371
|
"fieldName": "readonly"
|
|
522
372
|
},
|
|
523
373
|
{
|
|
@@ -526,6 +376,7 @@
|
|
|
526
376
|
"text": "boolean"
|
|
527
377
|
},
|
|
528
378
|
"default": "false",
|
|
379
|
+
"description": "If your input is of type 'password' and you want to display a strength meter",
|
|
529
380
|
"fieldName": "passwordStrengthMeter"
|
|
530
381
|
},
|
|
531
382
|
{
|
|
@@ -534,57 +385,12 @@
|
|
|
534
385
|
"text": "boolean"
|
|
535
386
|
},
|
|
536
387
|
"default": "false",
|
|
388
|
+
"description": "If your input is of type 'password' and you want to show password suggestions.",
|
|
537
389
|
"fieldName": "suggestions"
|
|
538
|
-
},
|
|
539
|
-
{
|
|
540
|
-
"name": "minlength",
|
|
541
|
-
"type": {
|
|
542
|
-
"text": "number"
|
|
543
|
-
},
|
|
544
|
-
"default": "-1",
|
|
545
|
-
"fieldName": "minlength"
|
|
546
|
-
},
|
|
547
|
-
{
|
|
548
|
-
"name": "maxlength",
|
|
549
|
-
"type": {
|
|
550
|
-
"text": "number"
|
|
551
|
-
},
|
|
552
|
-
"default": "-1",
|
|
553
|
-
"fieldName": "maxlength"
|
|
554
|
-
},
|
|
555
|
-
{
|
|
556
|
-
"name": "pattern",
|
|
557
|
-
"type": {
|
|
558
|
-
"text": "string | undefined"
|
|
559
|
-
},
|
|
560
|
-
"description": "Pattern the `value` must match to be valid",
|
|
561
|
-
"fieldName": "pattern"
|
|
562
|
-
},
|
|
563
|
-
{
|
|
564
|
-
"name": "validityMessage",
|
|
565
|
-
"type": {
|
|
566
|
-
"text": "string"
|
|
567
|
-
},
|
|
568
|
-
"default": "''",
|
|
569
|
-
"fieldName": "validityMessage"
|
|
570
|
-
},
|
|
571
|
-
{
|
|
572
|
-
"name": "value",
|
|
573
|
-
"fieldName": "value"
|
|
574
|
-
}
|
|
575
|
-
],
|
|
576
|
-
"mixins": [
|
|
577
|
-
{
|
|
578
|
-
"name": "ValidityMixin",
|
|
579
|
-
"package": "@italia/globals"
|
|
580
|
-
},
|
|
581
|
-
{
|
|
582
|
-
"name": "FormMixin",
|
|
583
|
-
"package": "@italia/globals"
|
|
584
390
|
}
|
|
585
391
|
],
|
|
586
392
|
"superclass": {
|
|
587
|
-
"name": "
|
|
393
|
+
"name": "FormControl",
|
|
588
394
|
"package": "@italia/globals"
|
|
589
395
|
},
|
|
590
396
|
"tagName": "it-input",
|
|
@@ -650,6 +456,155 @@
|
|
|
650
456
|
}
|
|
651
457
|
]
|
|
652
458
|
},
|
|
459
|
+
{
|
|
460
|
+
"kind": "javascript-module",
|
|
461
|
+
"path": "stories/it-input-number.stories.ts",
|
|
462
|
+
"declarations": [
|
|
463
|
+
{
|
|
464
|
+
"kind": "variable",
|
|
465
|
+
"name": "meta",
|
|
466
|
+
"default": "{ title: 'Componenti/Form/Input Numerico', tags: ['autodocs'], component: 'it-input', args: { id: '', label: 'Input Number', type: 'number', name: 'inputNumber', value: '100', disabled: false, customValidation: false, validityMessage: '', min: undefined, max: undefined, step: undefined, required: false, readonly: false, plaintext: false, placeholder: '', supportText: '', size: undefined, adaptive: false, }, argTypes: { label: { control: 'text', description: 'Etichetta del campo', }, type: { control: 'select', options: ['number'], fixed: true, table: { defaultValue: { summary: 'number' } }, }, name: { control: 'text', }, value: { control: 'text', description: 'Valore del campo', }, disabled: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, customValidation: { name: 'custom-validation', control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, description: 'Se la validazione del campo è fatta esternamente (lato server o con plugin js), impostare questo attributo a `true`.', }, validityMessage: { name: 'validity-message', control: 'text', description: \"Messaggio da mostrare quando il campo è invalido nel caso di validazione esterna (validazione custom). Se impostato a '' (stringa vuota) il campo viene considerato valido.\", }, min: { control: 'number', description: 'Valore minimo consentito', }, max: { control: 'number', description: 'Valore massimo consentito', }, step: { control: 'number', description: 'Incremento per ogni step (utilizzato dai pulsanti +/-)', }, required: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, readonly: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, plaintext: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, description: \"Se il campo è readonly, con l'attributo 'plaintext' il campo assume l'aspetto di testo normalizzato.\", }, placeholder: { control: 'text', description: 'Testo segnaposto', }, supportText: { name: 'support-text', control: 'text', description: 'Testo di supporto', }, size: { control: 'select', options: INPUT_SIZES, description: \"Dimensione del campo: 'sm' | (stringa vuota) | 'lg' \", table: { defaultValue: { summary: undefined } }, }, adaptive: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, description: 'Se il campo è `type=\"number\"`, con l\\'attributo `adaptive` il campo assume adatta la sua larghezza al contenuto', }, }, parameters: { docs: { description: { component: ` <Description>Campi input con pulsanti per incrementare/decrementare valori numerici.</Description> L'input numerico è una variante del componente \\`<it-input>\\` con l'attributo \\`type\\` impostato su \\`number\\`. Pertanto, per quanto riguarda: - la **validazione** e la **gestione degli errori** - la **gestione degli eventi** - i **metodi e le proprietà** accessibili tramite JavaScript - il **supporto all’internazionalizzazione (i18n)** è necessario fare riferimento alla **documentazione principale** del componente \\`<it-input>\\`. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p> Tutti gli attributi \\`aria-*\\` passati a \\`<it-input>\\` vengono applicati all'input generato. </p></div></div> `, }, }, }, } satisfies Meta<InputNumberProps>"
|
|
467
|
+
},
|
|
468
|
+
{
|
|
469
|
+
"kind": "variable",
|
|
470
|
+
"name": "EsempioInterattivo",
|
|
471
|
+
"type": {
|
|
472
|
+
"text": "Story"
|
|
473
|
+
},
|
|
474
|
+
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, render: (params) => html`${renderNumberInput({ ...params, label: 'Input Numerico', name: 'inputNumber', id: 'exampleInputNumber', })}`, }"
|
|
475
|
+
},
|
|
476
|
+
{
|
|
477
|
+
"kind": "variable",
|
|
478
|
+
"name": "Esempi",
|
|
479
|
+
"type": {
|
|
480
|
+
"text": "Story"
|
|
481
|
+
},
|
|
482
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` La larghezza del campo predefinita è quella del suo contenitore, per limitare la larghezza alle dimensioni del valore contenuto utilizzare il ridimensionamento adattivo. `, }, }, }, args: { value: '100', }, render: (params) => html` <div class=\"w-100\"> ${renderNumberInput({ ...params, label: 'Input Numerico inserito in una colonna a tutta larghezza', name: 'inputNumberFull', id: 'inputNumberFull', })} </div> <div class=\"w-50\"> ${renderNumberInput({ ...params, label: 'Input Numerico inserito in una colonna di larghezza 50%', name: 'inputNumberHalf', id: 'inputNumberHalf', })} </div> `, }"
|
|
483
|
+
},
|
|
484
|
+
{
|
|
485
|
+
"kind": "variable",
|
|
486
|
+
"name": "LimitiEStep",
|
|
487
|
+
"type": {
|
|
488
|
+
"text": "Story"
|
|
489
|
+
},
|
|
490
|
+
"default": "{ ...meta, name: 'Limiti e Step', parameters: { docs: { description: { story: ` Aggiungendo gli attributi HTML \\`min=\"\"\\`, \\`max=\"\"\\` e \\`step=\"\"\\` all'input è possibile limitare il valore minimo e massimo del campo e decidere di quanto varierà a ogni click sui pulsanti. `, }, }, }, args: { value: '100', min: 0, max: 200, step: 10, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Min, Max & Step', name: 'inputNumberLimits', id: 'inputNumberLimits', })} `, }"
|
|
491
|
+
},
|
|
492
|
+
{
|
|
493
|
+
"kind": "variable",
|
|
494
|
+
"name": "Valuta",
|
|
495
|
+
"type": {
|
|
496
|
+
"text": "Story"
|
|
497
|
+
},
|
|
498
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per anteporre il simbolo della valuta (ad esempio in Euro), utilizza lo slot \\`prepend\\`. `, }, }, }, args: { value: '3.50', step: 0.01, min: 0, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Currency', name: 'inputNumberCurrency', id: 'inputNumberCurrency', children: html`<span slot=\"prepend\" class=\"fw-semibold\">€</span> `, })} `, }"
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"kind": "variable",
|
|
502
|
+
"name": "Percentuale",
|
|
503
|
+
"type": {
|
|
504
|
+
"text": "Story"
|
|
505
|
+
},
|
|
506
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per anteporre il simbolo percentuale, utilizza lo slot \\`prepend\\`. Si consiglia di impostare gli attributi \\`min=0\\` e \\`max=\"100\"\\`. `, }, }, }, args: { value: '50', step: 10, min: 0, max: 100, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Percentage', name: 'inputNumberPercent', id: 'inputNumberPercent', children: html`<span slot=\"prepend\" class=\"fw-semibold\">%</span> `, })} `, }"
|
|
507
|
+
},
|
|
508
|
+
{
|
|
509
|
+
"kind": "variable",
|
|
510
|
+
"name": "Disabilitato",
|
|
511
|
+
"type": {
|
|
512
|
+
"text": "Story"
|
|
513
|
+
},
|
|
514
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per disabilitare un Input number, aggiungere l'attributo \\`disabled\\` al componente \\`<it-input>\\`. `, }, }, }, args: { value: '50', disabled: true, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Disabled', name: 'inputNumberDisabled', id: 'inputNumberDisabled', })} `, }"
|
|
515
|
+
},
|
|
516
|
+
{
|
|
517
|
+
"kind": "variable",
|
|
518
|
+
"name": "Readonly",
|
|
519
|
+
"type": {
|
|
520
|
+
"text": "Story"
|
|
521
|
+
},
|
|
522
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per rendere un Input number \\`readonly\\`, aggiungere l'attributo \\`readonly\\` al componente \\`<it-input>\\`. `, }, }, }, args: { value: '50', readonly: true, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Contenuto in sola lettura', name: 'inputNumberReadonly', id: 'inputNumberReadonly', })} `, }"
|
|
523
|
+
},
|
|
524
|
+
{
|
|
525
|
+
"kind": "variable",
|
|
526
|
+
"name": "Ridimensionamento",
|
|
527
|
+
"type": {
|
|
528
|
+
"text": "Story"
|
|
529
|
+
},
|
|
530
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` È possibile far sì che il campo numerico si ridimensioni automaticamente a seconda del valore contenuto in esso. Per ottenere questo comportamento, è sufficiente aggiungere l'attributo \\`adaptive\\` al componente \\`<it-input>\\`. `, }, }, }, args: { value: '99999', adaptive: true, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Adattivo', name: 'inputNumberAdaptive', id: 'inputNumberAdaptive', })} `, }"
|
|
531
|
+
}
|
|
532
|
+
],
|
|
533
|
+
"exports": [
|
|
534
|
+
{
|
|
535
|
+
"kind": "js",
|
|
536
|
+
"name": "default",
|
|
537
|
+
"declaration": {
|
|
538
|
+
"name": "meta",
|
|
539
|
+
"module": "stories/it-input-number.stories.ts"
|
|
540
|
+
}
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"kind": "js",
|
|
544
|
+
"name": "EsempioInterattivo",
|
|
545
|
+
"declaration": {
|
|
546
|
+
"name": "EsempioInterattivo",
|
|
547
|
+
"module": "stories/it-input-number.stories.ts"
|
|
548
|
+
}
|
|
549
|
+
},
|
|
550
|
+
{
|
|
551
|
+
"kind": "js",
|
|
552
|
+
"name": "Esempi",
|
|
553
|
+
"declaration": {
|
|
554
|
+
"name": "Esempi",
|
|
555
|
+
"module": "stories/it-input-number.stories.ts"
|
|
556
|
+
}
|
|
557
|
+
},
|
|
558
|
+
{
|
|
559
|
+
"kind": "js",
|
|
560
|
+
"name": "LimitiEStep",
|
|
561
|
+
"declaration": {
|
|
562
|
+
"name": "LimitiEStep",
|
|
563
|
+
"module": "stories/it-input-number.stories.ts"
|
|
564
|
+
}
|
|
565
|
+
},
|
|
566
|
+
{
|
|
567
|
+
"kind": "js",
|
|
568
|
+
"name": "Valuta",
|
|
569
|
+
"declaration": {
|
|
570
|
+
"name": "Valuta",
|
|
571
|
+
"module": "stories/it-input-number.stories.ts"
|
|
572
|
+
}
|
|
573
|
+
},
|
|
574
|
+
{
|
|
575
|
+
"kind": "js",
|
|
576
|
+
"name": "Percentuale",
|
|
577
|
+
"declaration": {
|
|
578
|
+
"name": "Percentuale",
|
|
579
|
+
"module": "stories/it-input-number.stories.ts"
|
|
580
|
+
}
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
"kind": "js",
|
|
584
|
+
"name": "Disabilitato",
|
|
585
|
+
"declaration": {
|
|
586
|
+
"name": "Disabilitato",
|
|
587
|
+
"module": "stories/it-input-number.stories.ts"
|
|
588
|
+
}
|
|
589
|
+
},
|
|
590
|
+
{
|
|
591
|
+
"kind": "js",
|
|
592
|
+
"name": "Readonly",
|
|
593
|
+
"declaration": {
|
|
594
|
+
"name": "Readonly",
|
|
595
|
+
"module": "stories/it-input-number.stories.ts"
|
|
596
|
+
}
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
"kind": "js",
|
|
600
|
+
"name": "Ridimensionamento",
|
|
601
|
+
"declaration": {
|
|
602
|
+
"name": "Ridimensionamento",
|
|
603
|
+
"module": "stories/it-input-number.stories.ts"
|
|
604
|
+
}
|
|
605
|
+
}
|
|
606
|
+
]
|
|
607
|
+
},
|
|
653
608
|
{
|
|
654
609
|
"kind": "javascript-module",
|
|
655
610
|
"path": "stories/it-input.stories.ts",
|
|
@@ -657,7 +612,7 @@
|
|
|
657
612
|
{
|
|
658
613
|
"kind": "variable",
|
|
659
614
|
"name": "meta",
|
|
660
|
-
"default": "{ title: 'Componenti/Form/Input', tags: ['autodocs'], component: 'it-input', args: { id: '', label: 'Nome', type: 'text', name: 'nome', disabled: false,
|
|
615
|
+
"default": "{ title: 'Componenti/Form/Input', tags: ['autodocs'], component: 'it-input', args: { id: '', label: 'Nome', type: 'text', name: 'nome', value: '', disabled: false, form: '', customValidation: false, validityMessage: '', pattern: undefined, min: undefined, max: undefined, step: undefined, minlength: undefined, maxlength: undefined, required: false, readonly: false, plaintext: false, placeholder: '', supportText: '', labelHidden: false, size: undefined, adaptive: false, strengthMeter: false, suggestions: false, }, argTypes: { id: { control: 'text', description: 'ID del campo', }, label: { control: 'text', description: 'Etichetta del campo', }, type: { control: 'select', options: INPUT_TYPES, table: { defaultValue: { summary: 'text' } }, }, name: { control: 'text', }, value: { control: 'text', description: 'Valore del campo', }, disabled: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, form: { control: 'text', description: \"ID html del form a cui è associato il campo, se il campo non si trova all'interno di una form \", }, customValidation: { name: 'custom-validation', control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, description: 'Se la validazione del campo è fatta esternamente (lato server o con plugin js - validazione custom), impostare questo attributo a `true`.', }, validityMessage: { name: 'validity-message', control: 'text', description: \"Messaggio da mostrare quando il campo è invalido nel caso di validazione esterna (validazione custom). Se impostato a '' (stringa vuota) il campo viene considerato valido.\", }, pattern: { control: 'text', description: 'Pattern di validazione del campo', }, min: { control: 'text', description: 'Valore minimo consentito per un campo di tipo numerico o di tipo data', }, max: { control: 'text', description: 'Valore massimo consentito per un campo di tipo numerico o di tipo data', }, step: { control: 'number', description: 'Incremento per ogni step (tramite i pulsanti +/-) nel caso di input di tipo numerico o di tipo data', }, minlength: { type: 'number', description: 'Lunghezza minima del valore da inserire. Usato anche per validare la robustezza della password', table: { defaultValue: { summary: 'undefined. Se type=\"password\": 8' } }, }, maxlength: { type: 'number', description: 'Lunghezza massima del valore da inserire.', }, required: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, readonly: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, plaintext: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, description: \"Se il campo è readonly, con l'attributo 'plaintext' il campo assume l'aspetto di testo normalizzato.\", }, placeholder: { control: 'text', description: 'Testo segnaposto', }, supportText: { name: 'support-text', control: 'text', description: 'Testo di supporto', }, labelHidden: { name: 'label-hidden', control: 'boolean', type: 'boolean', description: 'Se si vuole nascondere la label. Risulterà comunque accessibile per i lettori di schermo.', table: { defaultValue: { summary: 'false' } }, }, size: { control: 'select', options: INPUT_SIZES, description: \"Dimensione del campo: 'sm' | (stringa vuota) | 'lg' \", table: { defaultValue: { summary: undefined } }, }, adaptive: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, description: 'Se il campo è `type=\"number\"`, con l\\'attributo `adaptive` il campo assume adatta la sua larghezza al contenuto', }, strengthMeter: { name: 'strength-meter', control: 'boolean', type: 'boolean', description: \"Se si vuole mostrare o meno il misuratore di robustezza della password nel caso di type='password'\", table: { defaultValue: { summary: 'false' } }, }, suggestions: { name: 'suggestions', control: 'boolean', type: 'boolean', description: \"Se si vogliono mostrare i suggerimenti per l'insderimento di una password sicura.\", table: { defaultValue: { summary: 'false' } }, }, }, parameters: { docs: { description: { component: ` <Description>Input accessibile e responsivo.</Description> Per il corretto funzionamento degli elementi di tipo \\`<it-input>\\` è di fondamentale importanza l’utilizzo uno degli appositi attributi \\`type\\` (ad esempio, \"email\" per l’inserimento di indirizzi email o \"number\" per informazioni numeriche), in modo da sfruttare i controlli nativi dei browser più recenti come la verifica dell’email, l’utilizzo di metodo di input numerico ed altro. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p> Tutti gli attributi \\`aria-*\\` passati a \\`<it-input>\\` vengono applicati all'input generato. </p></div></div> `, }, }, }, } satisfies Meta<InputProps>"
|
|
661
616
|
},
|
|
662
617
|
{
|
|
663
618
|
"kind": "variable",
|
|
@@ -697,7 +652,7 @@
|
|
|
697
652
|
"type": {
|
|
698
653
|
"text": "Story"
|
|
699
654
|
},
|
|
700
|
-
"default": "{ ...meta, name: 'Icone o pulsanti', args: { placeholder: 'Icone o pulsanti', type: 'text', label: 'Campo con icona', name: 'field-icon-example', id: 'field-icon-example',
|
|
655
|
+
"default": "{ ...meta, name: 'Icone o pulsanti', args: { placeholder: 'Icone o pulsanti', type: 'text', label: 'Campo con icona', name: 'field-icon-example', id: 'field-icon-example', supportText: 'Testo di supporto', }, parameters: { docs: { description: { story: `<div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità delle icone</span></div><p>Nel caso in cui l’icona è semanticamente rilevante e non spiegata dal testo che la segue, occorre passare al componente \\`<it-icon>\\` l'attributo \\`label\\` che ne spieghi il significato (nel formato \\`<it-icon .... label=\"Significato dell'icona\"/>\\`)</p></div></div>`, }, }, }, render: (params) => html` ${renderComponent({ ...params, children: html`<it-icon name=\"it-pencil\" slot=\"prepend\" size=\"sm\"></it-icon> <it-button variant=\"primary\" slot=\"append\">Invio</it-button>`, })} `, }"
|
|
701
656
|
},
|
|
702
657
|
{
|
|
703
658
|
"kind": "variable",
|
|
@@ -705,7 +660,7 @@
|
|
|
705
660
|
"type": {
|
|
706
661
|
"text": "Story"
|
|
707
662
|
},
|
|
708
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: `L'input di base ha una dimensione media che non necessita di alcuna classe aggiuntiva. Per modificare questa dimensione, è possiible utilizzare l'attributo \\`size\\` il cui valore può essere \\`sm\\` oppure \\`lg\\`. Per modificare invece la dimensione dell’icona, è possibile utilizzare l'attributo \\`size\\` sull'icona in questo modo: <table> <thead> <tr><th>Dimensione input</th><th>Attributo size (di it-input)</th><th>Dimensione icona</th></tr> </thead> <tbody> <tr><td>Grande</td><td>\\`lg\\`</td><td>\\`md\\`</td></tr> <tr><td>Base (default)</td><td></td><td>\\`sm\\`</td></tr> <tr><td>Piccola</td><td>\\`sm\\`</td><td>\\`xs\\`</td></tr> </tbody> </table> `, }, }, }, args: { type: 'text', placeholder: 'Testo segnaposto',
|
|
663
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: `L'input di base ha una dimensione media che non necessita di alcuna classe aggiuntiva. Per modificare questa dimensione, è possiible utilizzare l'attributo \\`size\\` il cui valore può essere \\`sm\\` oppure \\`lg\\`. Per modificare invece la dimensione dell’icona, è possibile utilizzare l'attributo \\`size\\` sull'icona in questo modo: <table> <thead> <tr><th>Dimensione input</th><th>Attributo size (di it-input)</th><th>Dimensione icona</th></tr> </thead> <tbody> <tr><td>Grande</td><td>\\`lg\\`</td><td>\\`md\\`</td></tr> <tr><td>Base (default)</td><td></td><td>\\`sm\\`</td></tr> <tr><td>Piccola</td><td>\\`sm\\`</td><td>\\`xs\\`</td></tr> </tbody> </table> `, }, }, }, args: { type: 'text', placeholder: 'Testo segnaposto', }, render: (params) => html` ${renderComponent({ ...params, label: 'Campo di dimensione grande', name: 'field-big-example', id: 'field-big-example', size: 'lg', children: html`<it-icon name=\"it-pencil\" slot=\"prepend\" size=\"md\"></it-icon> <it-button variant=\"primary\" slot=\"append\">Invio</it-button>`, })} ${renderComponent({ ...params, label: 'Campo di dimensione base', name: 'field-sizebase-example', id: 'field-sizebase-example', placeholder: 'Testo segnaposto', children: html`<it-icon name=\"it-pencil\" slot=\"prepend\" size=\"sm\"></it-icon> <it-button variant=\"primary\" slot=\"append\">Invio</it-button>`, })} ${renderComponent({ ...params, label: 'Campo di dimensione piccola', name: 'field-small-example', id: 'field-small-example', size: 'sm', children: html`<it-icon name=\"it-pencil\" slot=\"prepend\" size=\"xs\"></it-icon> <it-button variant=\"primary\" slot=\"append\">Invio</it-button>`, })} `, }"
|
|
709
664
|
},
|
|
710
665
|
{
|
|
711
666
|
"kind": "variable",
|
|
@@ -729,7 +684,7 @@
|
|
|
729
684
|
"type": {
|
|
730
685
|
"text": "Story"
|
|
731
686
|
},
|
|
732
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: `Per semplificare l’inserimento della password, il componente \\`<it-input>\\` di tipo password include un pulsante che mostra i caratteri digitati. È inoltre possibile aggiungere un testo di supporto che aiuti nella compilazione, attraverso l’attributo \\`support-text\\`. <br/><br/> <h4>Misuratore sicurezza e suggerimenti</h4> Nel caso di un campo per la scelta di una nuova password, è possibile abbinare controlli per segnalare quanto la password che si sta inserendo segua alcuni suggerimenti di sicurezza, come la lunghezza minima o l’uso di caratteri speciali, attraverso gli attributi \\`strength-meter=\"true\"\\` e \\`minlength\\` per modificare la lunghezza minima richiesta per la password. Inoltre, è possibile restituire all’utente una lista dei suggerimenti, con indicati quelli che sono stati soddisfatti, attraverso l’attributo \\`suggestions=\"true\"\\`. `, }, }, }, args: { type: 'password', label: 'Campo password', supportText: 'Inserisci almeno 8 caratteri e alcuni caratteri speciali.', minlength: 8, }, render: (params) => html` ${renderComponent({ ...params, name: 'field-password-example', id: 'field-password-example', })} ${renderComponent({ ...params, name: 'field-password-strength-example', id: 'field-password-strength-example',
|
|
687
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: `Per semplificare l’inserimento della password, il componente \\`<it-input>\\` di tipo password include un pulsante che mostra i caratteri digitati. È inoltre possibile aggiungere un testo di supporto che aiuti nella compilazione, attraverso l’attributo \\`support-text\\`. <br/><br/> <h4>Misuratore sicurezza e suggerimenti</h4> Nel caso di un campo per la scelta di una nuova password, è possibile abbinare controlli per segnalare quanto la password che si sta inserendo segua alcuni suggerimenti di sicurezza, come la lunghezza minima o l’uso di caratteri speciali, attraverso gli attributi \\`strength-meter=\"true\"\\` e \\`minlength\\` per modificare la lunghezza minima richiesta per la password. Inoltre, è possibile restituire all’utente una lista dei suggerimenti, con indicati quelli che sono stati soddisfatti, attraverso l’attributo \\`suggestions=\"true\"\\`. `, }, }, }, args: { type: 'password', label: 'Campo password', supportText: 'Inserisci almeno 8 caratteri e alcuni caratteri speciali.', minlength: 8, }, render: (params) => html` ${renderComponent({ ...params, name: 'field-password-example', id: 'field-password-example', })} ${renderComponent({ ...params, name: 'field-password-strength-example', id: 'field-password-strength-example', strengthMeter: true, suggestions: true, })} `, }"
|
|
733
688
|
},
|
|
734
689
|
{
|
|
735
690
|
"kind": "variable",
|
|
@@ -745,7 +700,7 @@
|
|
|
745
700
|
"type": {
|
|
746
701
|
"text": "Story"
|
|
747
702
|
},
|
|
748
|
-
"default": "{ ...meta, name: '
|
|
703
|
+
"default": "{ ...meta, name: 'Validazione e gestione degli errori', parameters: { docs: { description: { story: `Se non è stata impostata la validazione custom tramite l'attributo \\`custom-validation\\`, e sono stati impostati uno di questi attributi <ul><li>\\`required\\`</li><li>\\`pattern\\`</li><li>\\`min\\`</li><li>\\`max\\`</li><li>\\`step\\`</li><li>\\`minlength\\`</li><li>\\`maxlength\\`</li></ul> viene effettuata una validazione interna utilizzando la validazione nativa del browser. <br/><br/><h4>Personalizzazione dei messaggi di errore</h4>E' possibile personalizzare alcuni dei messaggi di errore di validazione, traducendo le seguenti stringhe tramite l'[utility di internazionalizzazione](/docs/i18n-internazionalizzazione--documentazione): <ul><li>\\`validityRequired\\`: messaggio che viene mostrato quando il campo è required e non è compilato</li> <li>\\`validityPattern\\`: messaggio che viene mostrato quando il campo non rispetta il pattern indicato</li> <li>\\`validityMinlength\\`: messaggio che viene mostrato quando la lunghezza del valore del campo è troppo corta rispetto al valore passatto nell'attributo \\`min-length\\`</li> <li>\\`validityMaxlength\\`: messaggio che viene mostrato quando la lunghezza del valore del campo è troppo lunga rispetto al valore passatto nell'attributo \\`max-length\\`</li> </ul> Per gli altri errori di validazione non indicati, verranno mostrati i messsaggi di errore nativi del browser. <h4>Validazione esterna (validazione custom)</h4> E' inoltre possibile validare il campo esternamente (via js ad esempio, o lato server), impostando l' attributo \\`custom-validation=\"true\"\\`. In questo modo la validazione di default del browser effettuata internamente al componente è disabilitata. <br/><br/><h5>Campo invalido</h5>Nel caso il campo non sia valido, è necessario invalidare il campo impostando il messaggio di errore da visualizzare attraverso l'attributo \\`validity-message=\"Messaggio di errore\"\\`. <br/><br/><h5>Campo valido</h5>Per riportare il campo ad uno stato 'valido', è sufficiente impostare il messaggio di errore a vuoto: \\`validity-message=\"\"\\`.`, }, }, }, args: { type: 'text', placeholder: 'Testo segnaposto' }, render: (params) => html` ${renderComponent({ ...params, label: 'Campo obbligatorio', name: 'required-example', id: 'required-example', required: true, })} ${renderComponent({ ...params, label: 'Validazione esterna', name: 'external-validation-example', id: 'external-validation-example', validityMessage: 'Questo campo è obbligatorio!!!', customValidation: true, required: undefined, })} `, }"
|
|
749
704
|
},
|
|
750
705
|
{
|
|
751
706
|
"kind": "variable",
|
|
@@ -753,7 +708,15 @@
|
|
|
753
708
|
"type": {
|
|
754
709
|
"text": "Story"
|
|
755
710
|
},
|
|
756
|
-
"default": "{ ...meta, name: 'Gestione degli eventi', parameters: { docs: { description: { story: `E' possibile gestire gli eventi di \\`
|
|
711
|
+
"default": "{ ...meta, name: 'Gestione degli eventi', parameters: { docs: { description: { story: `E' possibile gestire gli eventi di \\`it-input\\`, \\`it-blur\\`, \\`it-change\\`, \\`it-focus\\`, \\`it-click\\` per effettuare operazioni personalizzate, come la validazione esterna o l'aggiornamento di altri campi. <br/><br/> È sufficiente aggiungere un event listener al componente \\`<it-input>\\` per intercettare gli eventi desiderati. Ad esempio, per gestire l'evento di input, è possibile utilizzare il seguente codice: \\`\\`\\`js document.querySelector('it-input#event-input-example').addEventListener('it-input', (event) => { console.log('Input event:', event); alert('Input event); }); \\`\\`\\` Il componente, emette anche un evento di tipo \\`it-input-ready\\` quando l'input è pronto e caricato nel DOM: \\`\\`\\`js document.querySelector('it-input#event-input-example').addEventListener('it-input-ready', (event) => { console.log('Input ready:', event); }); \\`\\`\\` `, }, }, }, args: { type: 'text', label: 'Prova evento di input', name: 'event-input-example', id: 'event-input-example', placeholder: 'Testo segnaposto', }, render: (params) => html` <script> document.querySelector('it-input#event-input-example').addEventListener('it-input', (event) => { console.log('Input event:', event); alert('Input event'); }); document.querySelector('it-input#event-input-example').addEventListener('it-input-ready', (event) => { console.log('Input ready:', event); }); </script> ${renderComponent({ ...params, })} `, }"
|
|
712
|
+
},
|
|
713
|
+
{
|
|
714
|
+
"kind": "variable",
|
|
715
|
+
"name": "MetodiEPropPubblici",
|
|
716
|
+
"type": {
|
|
717
|
+
"text": "Story"
|
|
718
|
+
},
|
|
719
|
+
"default": "{ ...StoryFormControlMethodAndProps({}), tags: ['!dev'] }"
|
|
757
720
|
},
|
|
758
721
|
{
|
|
759
722
|
"kind": "variable",
|
|
@@ -869,6 +832,14 @@
|
|
|
869
832
|
"module": "stories/it-input.stories.ts"
|
|
870
833
|
}
|
|
871
834
|
},
|
|
835
|
+
{
|
|
836
|
+
"kind": "js",
|
|
837
|
+
"name": "MetodiEPropPubblici",
|
|
838
|
+
"declaration": {
|
|
839
|
+
"name": "MetodiEPropPubblici",
|
|
840
|
+
"module": "stories/it-input.stories.ts"
|
|
841
|
+
}
|
|
842
|
+
},
|
|
872
843
|
{
|
|
873
844
|
"kind": "js",
|
|
874
845
|
"name": "I18n",
|
|
@@ -1027,7 +998,7 @@
|
|
|
1027
998
|
"type": {
|
|
1028
999
|
"text": "DefaultTranslation"
|
|
1029
1000
|
},
|
|
1030
|
-
"default": "{ $code: 'it', $name: 'Italiano', $dir: 'ltr', showHidePassword: 'Mostra/Nascondi Password.', shortPass: 'Password troppo breve.', badPass: 'Password debole.', goodPass: 'Password abbastanza sicura.', strongPass: 'Password sicura.', ariaLabelPasswordMeter: 'Robustezza della password', passwordSuggestionsLabel: 'Suggerimenti per una buona password:', passwordSuggestionLength: 'Almeno {minLength} caratteri.', passwordSuggestionUppercase: 'Una o più maiuscole.', passwordSuggestionLowercase: 'Una o più minuscole.', passwordSuggestionNumber: 'Uno o più numeri.', passwordSuggestionSpecial: 'Uno o più caratteri speciali.', passwordSuggestionFollowed: 'suggerimenti seguiti', passwordSuggestionFollowedPlural: 'suggerimenti seguiti', passwordSuggestionOf: 'di', passwordSuggestionMetLabel: 'Soddisfatto:',
|
|
1001
|
+
"default": "{ $code: 'it', $name: 'Italiano', $dir: 'ltr', showHidePassword: 'Mostra/Nascondi Password.', shortPass: 'Password troppo breve.', badPass: 'Password debole.', goodPass: 'Password abbastanza sicura.', strongPass: 'Password sicura.', ariaLabelPasswordMeter: 'Robustezza della password', passwordSuggestionsLabel: 'Suggerimenti per una buona password:', passwordSuggestionLength: 'Almeno {minLength} caratteri.', passwordSuggestionUppercase: 'Una o più maiuscole.', passwordSuggestionLowercase: 'Una o più minuscole.', passwordSuggestionNumber: 'Uno o più numeri.', passwordSuggestionSpecial: 'Uno o più caratteri speciali.', passwordSuggestionFollowed: 'suggerimenti seguiti', passwordSuggestionFollowedPlural: 'suggerimenti seguiti', passwordSuggestionOf: 'di', passwordSuggestionMetLabel: 'Soddisfatto:', increaseValue: 'Aumenta il valore', decreaseValue: 'Diminuisci il valore', }"
|
|
1031
1002
|
}
|
|
1032
1003
|
],
|
|
1033
1004
|
"exports": [
|