@italia/input 0.1.0-alpha.0 → 1.0.0-alpha.10
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/README.md +1 -1
- package/custom-elements.json +419 -304
- 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 +1543 -973
- package/dist/src/it-input.js.map +1 -1
- package/dist/src/locales/it.d.ts.map +1 -1
- package/dist/src/types.d.ts.map +1 -1
- package/package.json +17 -14
- package/styles/globals.scss +12 -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",
|
|
31
|
+
"name": "_slotPrepend",
|
|
52
32
|
"type": {
|
|
53
|
-
"text": "
|
|
54
|
-
},
|
|
55
|
-
"default": "false",
|
|
56
|
-
"attribute": "invalid",
|
|
57
|
-
"reflects": true
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"kind": "field",
|
|
61
|
-
"name": "customValidation",
|
|
62
|
-
"type": {
|
|
63
|
-
"text": "boolean"
|
|
64
|
-
},
|
|
65
|
-
"default": "false",
|
|
66
|
-
"attribute": "custom-validation",
|
|
67
|
-
"reflects": true
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
"kind": "field",
|
|
71
|
-
"name": "required",
|
|
72
|
-
"type": {
|
|
73
|
-
"text": "boolean"
|
|
33
|
+
"text": "HTMLSlotElement | null"
|
|
74
34
|
},
|
|
75
|
-
"
|
|
76
|
-
"
|
|
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": "
|
|
148
|
+
"name": "labelElements",
|
|
206
149
|
"type": {
|
|
207
|
-
"text": "
|
|
208
|
-
}
|
|
209
|
-
"default": "-1",
|
|
210
|
-
"attribute": "minlength"
|
|
211
|
-
},
|
|
212
|
-
{
|
|
213
|
-
"kind": "field",
|
|
214
|
-
"name": "maxlength",
|
|
215
|
-
"type": {
|
|
216
|
-
"text": "number"
|
|
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,54 @@
|
|
|
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
|
+
}
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"name": "showValidation",
|
|
300
|
+
"type": {
|
|
301
|
+
"text": "boolean"
|
|
302
|
+
}
|
|
381
303
|
}
|
|
382
304
|
]
|
|
383
305
|
}
|
|
384
306
|
],
|
|
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
307
|
"attributes": [
|
|
400
308
|
{
|
|
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",
|
|
309
|
+
"name": "type",
|
|
438
310
|
"type": {
|
|
439
|
-
"text": "
|
|
311
|
+
"text": "InputType"
|
|
440
312
|
},
|
|
441
|
-
"default": "''",
|
|
442
|
-
"
|
|
313
|
+
"default": "'text'",
|
|
314
|
+
"description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
|
|
315
|
+
"fieldName": "type"
|
|
443
316
|
},
|
|
444
317
|
{
|
|
445
318
|
"name": "size",
|
|
446
319
|
"type": {
|
|
447
320
|
"text": "Sizes | undefined"
|
|
448
321
|
},
|
|
322
|
+
"description": "The input's size.",
|
|
449
323
|
"fieldName": "size"
|
|
450
324
|
},
|
|
451
325
|
{
|
|
452
|
-
"name": "
|
|
326
|
+
"name": "adaptive",
|
|
453
327
|
"type": {
|
|
454
|
-
"text": "
|
|
328
|
+
"text": "boolean"
|
|
455
329
|
},
|
|
456
|
-
"default": "
|
|
457
|
-
"
|
|
330
|
+
"default": "false",
|
|
331
|
+
"description": "If you want number-input to be adaptive in width",
|
|
332
|
+
"fieldName": "adaptive"
|
|
458
333
|
},
|
|
459
334
|
{
|
|
460
335
|
"name": "label-hidden",
|
|
@@ -462,30 +337,16 @@
|
|
|
462
337
|
"text": "boolean"
|
|
463
338
|
},
|
|
464
339
|
"default": "false",
|
|
340
|
+
"description": "If you want label to be hidden.",
|
|
465
341
|
"fieldName": "labelHidden"
|
|
466
342
|
},
|
|
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
343
|
{
|
|
484
344
|
"name": "placeholder",
|
|
485
345
|
"type": {
|
|
486
346
|
"text": "string"
|
|
487
347
|
},
|
|
488
348
|
"default": "''",
|
|
349
|
+
"description": "Placeholder text to show as a hint when the input is empty.",
|
|
489
350
|
"fieldName": "placeholder"
|
|
490
351
|
},
|
|
491
352
|
{
|
|
@@ -494,22 +355,16 @@
|
|
|
494
355
|
"text": "string"
|
|
495
356
|
},
|
|
496
357
|
"default": "''",
|
|
358
|
+
"description": "The input's help text.",
|
|
497
359
|
"fieldName": "supportText"
|
|
498
360
|
},
|
|
499
|
-
{
|
|
500
|
-
"name": "disabled",
|
|
501
|
-
"type": {
|
|
502
|
-
"text": "boolean"
|
|
503
|
-
},
|
|
504
|
-
"default": "false",
|
|
505
|
-
"fieldName": "disabled"
|
|
506
|
-
},
|
|
507
361
|
{
|
|
508
362
|
"name": "plaintext",
|
|
509
363
|
"type": {
|
|
510
364
|
"text": "boolean"
|
|
511
365
|
},
|
|
512
366
|
"default": "false",
|
|
367
|
+
"description": "If you want the input to be displayed as plaintext.",
|
|
513
368
|
"fieldName": "plaintext"
|
|
514
369
|
},
|
|
515
370
|
{
|
|
@@ -518,6 +373,7 @@
|
|
|
518
373
|
"text": "boolean"
|
|
519
374
|
},
|
|
520
375
|
"default": "false",
|
|
376
|
+
"description": "If the input is read-only.",
|
|
521
377
|
"fieldName": "readonly"
|
|
522
378
|
},
|
|
523
379
|
{
|
|
@@ -526,6 +382,7 @@
|
|
|
526
382
|
"text": "boolean"
|
|
527
383
|
},
|
|
528
384
|
"default": "false",
|
|
385
|
+
"description": "If your input is of type 'password' and you want to display a strength meter",
|
|
529
386
|
"fieldName": "passwordStrengthMeter"
|
|
530
387
|
},
|
|
531
388
|
{
|
|
@@ -534,57 +391,12 @@
|
|
|
534
391
|
"text": "boolean"
|
|
535
392
|
},
|
|
536
393
|
"default": "false",
|
|
394
|
+
"description": "If your input is of type 'password' and you want to show password suggestions.",
|
|
537
395
|
"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
396
|
}
|
|
585
397
|
],
|
|
586
398
|
"superclass": {
|
|
587
|
-
"name": "
|
|
399
|
+
"name": "FormControl",
|
|
588
400
|
"package": "@italia/globals"
|
|
589
401
|
},
|
|
590
402
|
"tagName": "it-input",
|
|
@@ -620,7 +432,7 @@
|
|
|
620
432
|
"type": {
|
|
621
433
|
"text": "array"
|
|
622
434
|
},
|
|
623
|
-
"default": "['text', 'email', 'number', 'tel', 'time', 'password', 'textarea']"
|
|
435
|
+
"default": "['text', 'email', 'number', 'tel', 'time', 'password', 'textarea', 'date']"
|
|
624
436
|
},
|
|
625
437
|
{
|
|
626
438
|
"kind": "variable",
|
|
@@ -650,6 +462,277 @@
|
|
|
650
462
|
}
|
|
651
463
|
]
|
|
652
464
|
},
|
|
465
|
+
{
|
|
466
|
+
"kind": "javascript-module",
|
|
467
|
+
"path": "stories/it-input-calendar.stories.ts",
|
|
468
|
+
"declarations": [
|
|
469
|
+
{
|
|
470
|
+
"kind": "variable",
|
|
471
|
+
"name": "meta",
|
|
472
|
+
"default": "{ title: 'Componenti/Form/Datepicker', tags: ['a11y-ok', 'web-component'], component: 'it-input', args: { id: '', label: 'Datepicker', type: 'date', name: 'inputDate', value: undefined, disabled: false, customValidation: false, validityMessage: '', min: undefined, max: undefined, step: undefined, required: false, readonly: false, plaintext: false, placeholder: '', supportText: '', size: undefined, }, argTypes: { label: { control: 'text', description: 'Etichetta del campo', }, type: { control: 'select', options: ['date'], fixed: true, table: { defaultValue: { summary: 'date' } }, }, name: { control: 'text', }, value: { control: 'text', description: 'Valore del campo (nel formato YYYY-MM-DD)', type: 'string', }, 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: 'text', description: 'Valore minimo consentito (nel formato YYYY-MM-DD)', type: 'string', }, max: { control: 'text', description: 'Valore massimo consentito (nel formato YYYY-MM-DD)', type: 'string', }, step: { control: 'number', description: 'Incremento per ogni step (utilizzato dai pulsanti +/-)', type: 'string', }, 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: { type: 'select', labels: { undefined: '(non definito)', sm: 'sm', lg: 'lg' } }, options: INPUT_SIZES, description: \"Dimensione del campo: 'sm' | (non definito) | 'lg' \", table: { defaultValue: { summary: undefined } }, type: 'string', }, }, } satisfies Meta<InputCalendarProps>"
|
|
473
|
+
},
|
|
474
|
+
{
|
|
475
|
+
"kind": "variable",
|
|
476
|
+
"name": "EsempioInterattivo",
|
|
477
|
+
"type": {
|
|
478
|
+
"text": "Story"
|
|
479
|
+
},
|
|
480
|
+
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!dev'], parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, render: (params) => html`${renderCalendarInput({ ...params, })}`, }"
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"kind": "variable",
|
|
484
|
+
"name": "MinMax",
|
|
485
|
+
"type": {
|
|
486
|
+
"text": "Story"
|
|
487
|
+
},
|
|
488
|
+
"default": "{ ...meta, name: 'Restringere il periodo di validità', parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, args: { ...meta.args, min: defaultMin, max: defaultMax, label: 'Scegli una data nel periodo' }, render: (params) => html`${renderCalendarInput({ ...params, })}`, }"
|
|
489
|
+
},
|
|
490
|
+
{
|
|
491
|
+
"kind": "variable",
|
|
492
|
+
"name": "Step",
|
|
493
|
+
"type": {
|
|
494
|
+
"text": "Story"
|
|
495
|
+
},
|
|
496
|
+
"default": "{ ...meta, name: 'Impostare intervalli di date regolari', parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, args: { ...meta.args, min: nextMonday, step: 7, label: 'Scegli una data' }, render: (params) => html`${renderCalendarInput({ ...params, })}`, }"
|
|
497
|
+
}
|
|
498
|
+
],
|
|
499
|
+
"exports": [
|
|
500
|
+
{
|
|
501
|
+
"kind": "js",
|
|
502
|
+
"name": "default",
|
|
503
|
+
"declaration": {
|
|
504
|
+
"name": "meta",
|
|
505
|
+
"module": "stories/it-input-calendar.stories.ts"
|
|
506
|
+
}
|
|
507
|
+
},
|
|
508
|
+
{
|
|
509
|
+
"kind": "js",
|
|
510
|
+
"name": "EsempioInterattivo",
|
|
511
|
+
"declaration": {
|
|
512
|
+
"name": "EsempioInterattivo",
|
|
513
|
+
"module": "stories/it-input-calendar.stories.ts"
|
|
514
|
+
}
|
|
515
|
+
},
|
|
516
|
+
{
|
|
517
|
+
"kind": "js",
|
|
518
|
+
"name": "MinMax",
|
|
519
|
+
"declaration": {
|
|
520
|
+
"name": "MinMax",
|
|
521
|
+
"module": "stories/it-input-calendar.stories.ts"
|
|
522
|
+
}
|
|
523
|
+
},
|
|
524
|
+
{
|
|
525
|
+
"kind": "js",
|
|
526
|
+
"name": "Step",
|
|
527
|
+
"declaration": {
|
|
528
|
+
"name": "Step",
|
|
529
|
+
"module": "stories/it-input-calendar.stories.ts"
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
]
|
|
533
|
+
},
|
|
534
|
+
{
|
|
535
|
+
"kind": "javascript-module",
|
|
536
|
+
"path": "stories/it-input-number.stories.ts",
|
|
537
|
+
"declarations": [
|
|
538
|
+
{
|
|
539
|
+
"kind": "variable",
|
|
540
|
+
"name": "meta",
|
|
541
|
+
"default": "{ title: 'Componenti/Form/Number input', tags: ['autodocs', 'a11y-ok', 'web-component'], 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', type: 'number', }, max: { control: 'number', description: 'Valore massimo consentito', type: 'number', }, step: { control: 'number', description: 'Incremento per ogni step (utilizzato dai pulsanti +/-)', type: 'number', }, 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: { type: 'select', labels: { undefined: '(non definito)', sm: 'sm', lg: 'lg' } }, options: INPUT_SIZES, description: \"Dimensione del campo: 'sm' | (non definito) | 'lg' \", table: { defaultValue: { summary: undefined } }, type: 'string', }, 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', }, }, } satisfies Meta<InputNumberProps>"
|
|
542
|
+
},
|
|
543
|
+
{
|
|
544
|
+
"kind": "variable",
|
|
545
|
+
"name": "EsempioInterattivo",
|
|
546
|
+
"type": {
|
|
547
|
+
"text": "Story"
|
|
548
|
+
},
|
|
549
|
+
"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', })}`, }"
|
|
550
|
+
},
|
|
551
|
+
{
|
|
552
|
+
"kind": "variable",
|
|
553
|
+
"name": "Esempi",
|
|
554
|
+
"type": {
|
|
555
|
+
"text": "Story"
|
|
556
|
+
},
|
|
557
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` La larghezza del campo predefinita è quella del suo contenitore. Per limitare la larghezza alle dimensioni del valore contenuto, usa 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> `, }"
|
|
558
|
+
},
|
|
559
|
+
{
|
|
560
|
+
"kind": "variable",
|
|
561
|
+
"name": "LimitiEStep",
|
|
562
|
+
"type": {
|
|
563
|
+
"text": "Story"
|
|
564
|
+
},
|
|
565
|
+
"default": "{ ...meta, name: 'Limiti e Step', parameters: { docs: { description: { story: ` Per limitare il valore minimo e massimo del campo e decidere di quanto varierà a ogni clic sui pulsanti, aggiungi gli attributi HTML \\`min=\"\"\\`, \\`max=\"\"\\` e \\`step=\"\"\\` all'input. `, }, }, }, args: { value: '100', min: 0, max: 200, step: 10, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Min, Max & Step', name: 'inputNumberLimits', id: 'inputNumberLimits', })} `, }"
|
|
566
|
+
},
|
|
567
|
+
{
|
|
568
|
+
"kind": "variable",
|
|
569
|
+
"name": "Valuta",
|
|
570
|
+
"type": {
|
|
571
|
+
"text": "Story"
|
|
572
|
+
},
|
|
573
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per anteporre il simbolo della valuta (ad esempio in euro), usa 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> `, })} `, }"
|
|
574
|
+
},
|
|
575
|
+
{
|
|
576
|
+
"kind": "variable",
|
|
577
|
+
"name": "Percentuale",
|
|
578
|
+
"type": {
|
|
579
|
+
"text": "Story"
|
|
580
|
+
},
|
|
581
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per anteporre il simbolo percentuale, usa lo slot \\`prepend\\`. Ti consigliamo 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> `, })} `, }"
|
|
582
|
+
},
|
|
583
|
+
{
|
|
584
|
+
"kind": "variable",
|
|
585
|
+
"name": "Disabilitato",
|
|
586
|
+
"type": {
|
|
587
|
+
"text": "Story"
|
|
588
|
+
},
|
|
589
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per disabilitare un number input, aggiungi l'attributo \\`disabled\\` al componente \\`<it-input>\\`. `, }, }, }, args: { value: '50', disabled: true, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Disabled', name: 'inputNumberDisabled', id: 'inputNumberDisabled', })} `, }"
|
|
590
|
+
},
|
|
591
|
+
{
|
|
592
|
+
"kind": "variable",
|
|
593
|
+
"name": "Readonly",
|
|
594
|
+
"type": {
|
|
595
|
+
"text": "Story"
|
|
596
|
+
},
|
|
597
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per rendere un number input read only, aggiungi 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', })} `, }"
|
|
598
|
+
},
|
|
599
|
+
{
|
|
600
|
+
"kind": "variable",
|
|
601
|
+
"name": "Ridimensionamento",
|
|
602
|
+
"type": {
|
|
603
|
+
"text": "Story"
|
|
604
|
+
},
|
|
605
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per far ridimensionare automaticamente il campo numerico a seconda del valore contenuto, aggiungi l'attributo \\`adaptive\\` al componente \\`<it-input>\\`. `, }, }, }, args: { value: '99999', adaptive: true, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Adattivo', name: 'inputNumberAdaptive', id: 'inputNumberAdaptive', })} `, }"
|
|
606
|
+
}
|
|
607
|
+
],
|
|
608
|
+
"exports": [
|
|
609
|
+
{
|
|
610
|
+
"kind": "js",
|
|
611
|
+
"name": "default",
|
|
612
|
+
"declaration": {
|
|
613
|
+
"name": "meta",
|
|
614
|
+
"module": "stories/it-input-number.stories.ts"
|
|
615
|
+
}
|
|
616
|
+
},
|
|
617
|
+
{
|
|
618
|
+
"kind": "js",
|
|
619
|
+
"name": "EsempioInterattivo",
|
|
620
|
+
"declaration": {
|
|
621
|
+
"name": "EsempioInterattivo",
|
|
622
|
+
"module": "stories/it-input-number.stories.ts"
|
|
623
|
+
}
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
"kind": "js",
|
|
627
|
+
"name": "Esempi",
|
|
628
|
+
"declaration": {
|
|
629
|
+
"name": "Esempi",
|
|
630
|
+
"module": "stories/it-input-number.stories.ts"
|
|
631
|
+
}
|
|
632
|
+
},
|
|
633
|
+
{
|
|
634
|
+
"kind": "js",
|
|
635
|
+
"name": "LimitiEStep",
|
|
636
|
+
"declaration": {
|
|
637
|
+
"name": "LimitiEStep",
|
|
638
|
+
"module": "stories/it-input-number.stories.ts"
|
|
639
|
+
}
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
"kind": "js",
|
|
643
|
+
"name": "Valuta",
|
|
644
|
+
"declaration": {
|
|
645
|
+
"name": "Valuta",
|
|
646
|
+
"module": "stories/it-input-number.stories.ts"
|
|
647
|
+
}
|
|
648
|
+
},
|
|
649
|
+
{
|
|
650
|
+
"kind": "js",
|
|
651
|
+
"name": "Percentuale",
|
|
652
|
+
"declaration": {
|
|
653
|
+
"name": "Percentuale",
|
|
654
|
+
"module": "stories/it-input-number.stories.ts"
|
|
655
|
+
}
|
|
656
|
+
},
|
|
657
|
+
{
|
|
658
|
+
"kind": "js",
|
|
659
|
+
"name": "Disabilitato",
|
|
660
|
+
"declaration": {
|
|
661
|
+
"name": "Disabilitato",
|
|
662
|
+
"module": "stories/it-input-number.stories.ts"
|
|
663
|
+
}
|
|
664
|
+
},
|
|
665
|
+
{
|
|
666
|
+
"kind": "js",
|
|
667
|
+
"name": "Readonly",
|
|
668
|
+
"declaration": {
|
|
669
|
+
"name": "Readonly",
|
|
670
|
+
"module": "stories/it-input-number.stories.ts"
|
|
671
|
+
}
|
|
672
|
+
},
|
|
673
|
+
{
|
|
674
|
+
"kind": "js",
|
|
675
|
+
"name": "Ridimensionamento",
|
|
676
|
+
"declaration": {
|
|
677
|
+
"name": "Ridimensionamento",
|
|
678
|
+
"module": "stories/it-input-number.stories.ts"
|
|
679
|
+
}
|
|
680
|
+
}
|
|
681
|
+
]
|
|
682
|
+
},
|
|
683
|
+
{
|
|
684
|
+
"kind": "javascript-module",
|
|
685
|
+
"path": "stories/it-input-time.stories.ts",
|
|
686
|
+
"declarations": [
|
|
687
|
+
{
|
|
688
|
+
"kind": "variable",
|
|
689
|
+
"name": "meta",
|
|
690
|
+
"default": "{ title: 'Componenti/Form/Timepicker', tags: ['autodocs', 'a11y-ok', 'web-component'], component: 'it-input', args: { id: '', label: 'Input Ora', type: 'time', name: 'timepicker', value: '', disabled: false, customValidation: false, validityMessage: '', min: undefined, max: undefined, step: undefined, required: false, readonly: false, plaintext: false, placeholder: '', supportText: '', size: undefined, }, argTypes: { label: { control: 'text', description: 'Etichetta del campo', }, type: { control: 'select', options: ['time'], fixed: true, table: { defaultValue: { summary: 'time' } }, }, 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: 'text', description: 'Valore minimo consentito nel formato HH:MM. Es: 08:00', type: 'string', }, max: { control: 'text', description: 'Valore massimo consentito nel formato HH:MM. Es: 15:30', type: 'string', }, step: { control: 'number', description: 'Incremento per ogni step (utilizzato dai pulsanti +/-), in secondi', type: 'number', }, 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: { type: 'select', labels: { undefined: '(non definito)', sm: 'sm', lg: 'lg' } }, options: INPUT_SIZES, description: \"Dimensione del campo: 'sm' | (non definito) | 'lg' \", table: { defaultValue: { summary: undefined } }, type: 'string', }, }, } satisfies Meta<InputNumberProps>"
|
|
691
|
+
},
|
|
692
|
+
{
|
|
693
|
+
"kind": "variable",
|
|
694
|
+
"name": "EsempioInterattivo",
|
|
695
|
+
"type": {
|
|
696
|
+
"text": "Story"
|
|
697
|
+
},
|
|
698
|
+
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, render: (params) => html`${renderTimeInput({ ...params, label: 'Input Ora', name: 'timepicker', id: 'exampleTimepicker', value: '10:00', })}`, }"
|
|
699
|
+
},
|
|
700
|
+
{
|
|
701
|
+
"kind": "variable",
|
|
702
|
+
"name": "LimitiEStep",
|
|
703
|
+
"type": {
|
|
704
|
+
"text": "Story"
|
|
705
|
+
},
|
|
706
|
+
"default": "{ ...meta, name: 'Limiti e Step', parameters: { docs: { description: { story: ` Per aggiungere limitazioni ai valori orari selezionabili, usa questi attributi HTML: - \\`min=\"\"\\`, per limitare il valore minimo; - \\`max=\"\"\\`, per limitare il valore massimo; - \\`step=\"\"\\`, per un intervallo orario valido. Gli attributi \\`min=\"\"\\`, \\`max=\"\"\\` accettano valori nel formato HH:MM. L'attributo \\`step=\"\"\\` prevede l'inserimento di un intervallo in secondi. Questi attributi sono utili solo ai fini della validazione e non modificano l'interfaccia del selettore. `, }, }, }, args: { value: '10:00', min: '09:00', max: '12:00', step: 1800, }, render: (params) => html` ${renderTimeInput({ ...params, label: 'Min, Max & Step', name: 'inputTimeLimits', id: 'inputTimeLimits', })} `, }"
|
|
707
|
+
}
|
|
708
|
+
],
|
|
709
|
+
"exports": [
|
|
710
|
+
{
|
|
711
|
+
"kind": "js",
|
|
712
|
+
"name": "default",
|
|
713
|
+
"declaration": {
|
|
714
|
+
"name": "meta",
|
|
715
|
+
"module": "stories/it-input-time.stories.ts"
|
|
716
|
+
}
|
|
717
|
+
},
|
|
718
|
+
{
|
|
719
|
+
"kind": "js",
|
|
720
|
+
"name": "EsempioInterattivo",
|
|
721
|
+
"declaration": {
|
|
722
|
+
"name": "EsempioInterattivo",
|
|
723
|
+
"module": "stories/it-input-time.stories.ts"
|
|
724
|
+
}
|
|
725
|
+
},
|
|
726
|
+
{
|
|
727
|
+
"kind": "js",
|
|
728
|
+
"name": "LimitiEStep",
|
|
729
|
+
"declaration": {
|
|
730
|
+
"name": "LimitiEStep",
|
|
731
|
+
"module": "stories/it-input-time.stories.ts"
|
|
732
|
+
}
|
|
733
|
+
}
|
|
734
|
+
]
|
|
735
|
+
},
|
|
653
736
|
{
|
|
654
737
|
"kind": "javascript-module",
|
|
655
738
|
"path": "stories/it-input.stories.ts",
|
|
@@ -657,7 +740,7 @@
|
|
|
657
740
|
{
|
|
658
741
|
"kind": "variable",
|
|
659
742
|
"name": "meta",
|
|
660
|
-
"default": "{ title: 'Componenti/Form/Input', tags: ['
|
|
743
|
+
"default": "{ title: 'Componenti/Form/Input', tags: ['a11y-ok', 'web-component'], 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', type: 'string', 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', type: 'string', }, min: { control: 'text', description: 'Valore minimo consentito per un campo di tipo numerico o di tipo data', type: 'string', }, max: { control: 'text', description: 'Valore massimo consentito per un campo di tipo numerico o di tipo data', type: 'string', }, step: { control: 'number', description: 'Incremento per ogni step (tramite i pulsanti +/-) nel caso di input di tipo numerico o di tipo data', type: 'number', }, 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: { type: 'select', labels: { undefined: '(non definito)', sm: 'sm', lg: 'lg' } }, options: INPUT_SIZES, description: \"Dimensione del campo: 'sm' | (non definito) | 'lg' \", table: { defaultValue: { summary: undefined } }, type: 'string', }, 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>Campi per l'inserimento di dati testuali e numerici, in forma libera o in formati specifici, all'interno di un form</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 \\`it-aria-*\\` passati a \\`<it-input>\\` vengono applicati all'input generato. </p></div></div> `, }, }, }, } satisfies Meta<InputProps>"
|
|
661
744
|
},
|
|
662
745
|
{
|
|
663
746
|
"kind": "variable",
|
|
@@ -665,7 +748,7 @@
|
|
|
665
748
|
"type": {
|
|
666
749
|
"text": "Story"
|
|
667
750
|
},
|
|
668
|
-
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: '
|
|
751
|
+
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: 'closed', }, }, }, render: (params) => html`${renderComponent({ ...params, type: 'text', label: 'Campo di testo', name: 'testo', id: 'exampleInputText', })} ${renderComponent({ ...params, type: 'email', label: 'Campo email', name: 'email', id: 'exampleInputEmail', })} ${renderComponent({ ...params, type: 'number', label: 'Campo numerico', name: 'number', id: 'exampleInputNumber', })} ${renderComponent({ ...params, type: 'tel', label: 'Campo telefonico', name: 'telefono', id: 'exampleInputTel', })} ${renderComponent({ ...params, type: 'time', label: 'Campo orario', name: 'orario', id: 'exampleInputTime', })} ${renderComponent({ ...params, type: 'date', label: 'Campo data', name: 'data', id: 'exampleInputDate', })}`, }"
|
|
669
752
|
},
|
|
670
753
|
{
|
|
671
754
|
"kind": "variable",
|
|
@@ -673,7 +756,7 @@
|
|
|
673
756
|
"type": {
|
|
674
757
|
"text": "Story"
|
|
675
758
|
},
|
|
676
|
-
"default": "{ ...meta, name: 'Testo segnaposto', args: { type: 'text', placeholder: 'Testo segnaposto', label: 'Etichetta', name: 'placeholder-example', id: 'placeholder-example', },
|
|
759
|
+
"default": "{ ...meta, name: 'Testo segnaposto', args: { type: 'text', placeholder: 'Testo segnaposto', label: 'Etichetta', name: 'placeholder-example', id: 'placeholder-example', }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
677
760
|
},
|
|
678
761
|
{
|
|
679
762
|
"kind": "variable",
|
|
@@ -681,7 +764,7 @@
|
|
|
681
764
|
"type": {
|
|
682
765
|
"text": "Story"
|
|
683
766
|
},
|
|
684
|
-
"default": "{ ...meta, name: 'Testo di supporto', args: { type: 'text', label: 'Etichetta', placeholder: 'Testo segnaposto', name: 'supportText-example', id: 'supportText-example', supportText: 'Testo di supporto', },
|
|
767
|
+
"default": "{ ...meta, name: 'Testo di supporto', args: { type: 'text', label: 'Etichetta', placeholder: 'Testo segnaposto', name: 'supportText-example', id: 'supportText-example', supportText: 'Testo di supporto', }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
685
768
|
},
|
|
686
769
|
{
|
|
687
770
|
"kind": "variable",
|
|
@@ -689,7 +772,7 @@
|
|
|
689
772
|
"type": {
|
|
690
773
|
"text": "Story"
|
|
691
774
|
},
|
|
692
|
-
"default": "{ ...meta, name: 'Etichetta nascosta', args: { placeholder: 'Cerca...', label: 'Cerca nel sito', labelHidden: true },
|
|
775
|
+
"default": "{ ...meta, name: 'Etichetta nascosta', args: { placeholder: 'Cerca...', label: 'Cerca nel sito', labelHidden: true }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
693
776
|
},
|
|
694
777
|
{
|
|
695
778
|
"kind": "variable",
|
|
@@ -697,7 +780,7 @@
|
|
|
697
780
|
"type": {
|
|
698
781
|
"text": "Story"
|
|
699
782
|
},
|
|
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',
|
|
783
|
+
"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, devi 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
784
|
},
|
|
702
785
|
{
|
|
703
786
|
"kind": "variable",
|
|
@@ -705,7 +788,7 @@
|
|
|
705
788
|
"type": {
|
|
706
789
|
"text": "Story"
|
|
707
790
|
},
|
|
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,
|
|
791
|
+
"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, puoi utilizzare l'attributo \\`size\\` il cui valore può essere \\`sm\\` oppure \\`lg\\`. Per modificare invece la dimensione dell’icona, puoi 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
792
|
},
|
|
710
793
|
{
|
|
711
794
|
"kind": "variable",
|
|
@@ -713,7 +796,7 @@
|
|
|
713
796
|
"type": {
|
|
714
797
|
"text": "Story"
|
|
715
798
|
},
|
|
716
|
-
"default": "{ ...meta,
|
|
799
|
+
"default": "{ ...meta, name: 'Stato disabilitato', args: { type: 'text', label: 'Campo disabilitato', name: 'field-disabled-example', id: 'field-disabled-example', disabled: true, }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
717
800
|
},
|
|
718
801
|
{
|
|
719
802
|
"kind": "variable",
|
|
@@ -721,7 +804,7 @@
|
|
|
721
804
|
"type": {
|
|
722
805
|
"text": "Story"
|
|
723
806
|
},
|
|
724
|
-
"default": "{ ...meta,
|
|
807
|
+
"default": "{ ...meta, name: 'Stato readonly', args: { type: 'text', readonly: true, value: 'Contenuto in sola lettura' }, render: (params) => html` ${renderComponent({ ...params, label: 'Campo readonly', name: 'field-readonly-example', id: 'field-readonly-example', })} ${renderComponent({ ...params, label: 'Campo readonly normalizzato come plaintext', name: 'field-readonlyplaintext-example', id: 'field-readonlyplaintext-example', plaintext: true, })} `, }"
|
|
725
808
|
},
|
|
726
809
|
{
|
|
727
810
|
"kind": "variable",
|
|
@@ -729,7 +812,7 @@
|
|
|
729
812
|
"type": {
|
|
730
813
|
"text": "Story"
|
|
731
814
|
},
|
|
732
|
-
"default": "{ ...meta,
|
|
815
|
+
"default": "{ ...meta, 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
816
|
},
|
|
734
817
|
{
|
|
735
818
|
"kind": "variable",
|
|
@@ -737,15 +820,23 @@
|
|
|
737
820
|
"type": {
|
|
738
821
|
"text": "Story"
|
|
739
822
|
},
|
|
740
|
-
"default": "{ ...meta, name: 'Area di testo',
|
|
823
|
+
"default": "{ ...meta, name: 'Area di testo', args: { type: 'textarea', label: 'Area di testo', name: 'textarea-example', id: 'textarea-example', placeholder: 'Testo segnaposto', }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
741
824
|
},
|
|
742
825
|
{
|
|
743
826
|
"kind": "variable",
|
|
744
|
-
"name": "
|
|
827
|
+
"name": "ValidazioneNativa",
|
|
745
828
|
"type": {
|
|
746
829
|
"text": "Story"
|
|
747
830
|
},
|
|
748
|
-
"default": "{ ...meta, name: '
|
|
831
|
+
"default": "{ ...meta, name: 'Validazione nativa', args: { type: 'text', placeholder: 'Testo segnaposto' }, render: (params) => html` ${renderComponent({ ...params, label: 'Campo obbligatorio', name: 'required-example', id: 'required-example', required: true, })} `, }"
|
|
832
|
+
},
|
|
833
|
+
{
|
|
834
|
+
"kind": "variable",
|
|
835
|
+
"name": "ValidazioneCustom",
|
|
836
|
+
"type": {
|
|
837
|
+
"text": "Story"
|
|
838
|
+
},
|
|
839
|
+
"default": "{ ...meta, name: 'Validazione custom', args: { type: 'text', placeholder: 'Testo segnaposto' }, render: (params) => html` ${renderComponent({ ...params, label: 'Validazione esterna', name: 'external-validation-example', id: 'external-validation-example', validityMessage: 'Questo campo è obbligatorio!!!', customValidation: true, required: undefined, })} `, }"
|
|
749
840
|
},
|
|
750
841
|
{
|
|
751
842
|
"kind": "variable",
|
|
@@ -753,7 +844,15 @@
|
|
|
753
844
|
"type": {
|
|
754
845
|
"text": "Story"
|
|
755
846
|
},
|
|
756
|
-
"default": "{ ...meta, name: 'Gestione degli eventi', parameters: { docs: { description: { story:
|
|
847
|
+
"default": "{ ...meta, name: 'Gestione degli eventi', parameters: { docs: { description: { story: `È 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, })} `, }"
|
|
848
|
+
},
|
|
849
|
+
{
|
|
850
|
+
"kind": "variable",
|
|
851
|
+
"name": "MetodiEPropPubblici",
|
|
852
|
+
"type": {
|
|
853
|
+
"text": "Story"
|
|
854
|
+
},
|
|
855
|
+
"default": "{ ...StoryFormControlMethodAndProps({}), tags: ['!dev'] }"
|
|
757
856
|
},
|
|
758
857
|
{
|
|
759
858
|
"kind": "variable",
|
|
@@ -761,7 +860,7 @@
|
|
|
761
860
|
"type": {
|
|
762
861
|
"text": "Story"
|
|
763
862
|
},
|
|
764
|
-
"default": "{ name: 'i18n', tags: ['!dev'], render: () => html`<div class=\"hide-preview\"></div>`, parameters: { viewMode: 'docs',
|
|
863
|
+
"default": "{ name: 'i18n', tags: ['!dev'], render: () => html`<div class=\"hide-preview\"></div>`, parameters: { viewMode: 'docs', docs: { description: { story: ` Per questo componente sono disponibili alcune stringhe traducibili tramite l'[utility di internazionalizzazione](/docs/i18n-internazionalizzazione--documentazione). \\`\\`\\`js const translation = ${JSON.stringify(i18nIT, null, 2)} \\`\\`\\` `, }, }, }, }"
|
|
765
864
|
}
|
|
766
865
|
],
|
|
767
866
|
"exports": [
|
|
@@ -855,9 +954,17 @@
|
|
|
855
954
|
},
|
|
856
955
|
{
|
|
857
956
|
"kind": "js",
|
|
858
|
-
"name": "
|
|
957
|
+
"name": "ValidazioneNativa",
|
|
859
958
|
"declaration": {
|
|
860
|
-
"name": "
|
|
959
|
+
"name": "ValidazioneNativa",
|
|
960
|
+
"module": "stories/it-input.stories.ts"
|
|
961
|
+
}
|
|
962
|
+
},
|
|
963
|
+
{
|
|
964
|
+
"kind": "js",
|
|
965
|
+
"name": "ValidazioneCustom",
|
|
966
|
+
"declaration": {
|
|
967
|
+
"name": "ValidazioneCustom",
|
|
861
968
|
"module": "stories/it-input.stories.ts"
|
|
862
969
|
}
|
|
863
970
|
},
|
|
@@ -869,6 +976,14 @@
|
|
|
869
976
|
"module": "stories/it-input.stories.ts"
|
|
870
977
|
}
|
|
871
978
|
},
|
|
979
|
+
{
|
|
980
|
+
"kind": "js",
|
|
981
|
+
"name": "MetodiEPropPubblici",
|
|
982
|
+
"declaration": {
|
|
983
|
+
"name": "MetodiEPropPubblici",
|
|
984
|
+
"module": "stories/it-input.stories.ts"
|
|
985
|
+
}
|
|
986
|
+
},
|
|
872
987
|
{
|
|
873
988
|
"kind": "js",
|
|
874
989
|
"name": "I18n",
|
|
@@ -1027,7 +1142,7 @@
|
|
|
1027
1142
|
"type": {
|
|
1028
1143
|
"text": "DefaultTranslation"
|
|
1029
1144
|
},
|
|
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:',
|
|
1145
|
+
"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
1146
|
}
|
|
1032
1147
|
],
|
|
1033
1148
|
"exports": [
|