@italia/input 0.1.0-alpha.0 → 1.0.0-alpha.4
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 +353 -307
- 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 +1069 -513
- 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 +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",
|
|
62
|
-
"type": {
|
|
63
|
-
"text": "boolean"
|
|
64
|
-
},
|
|
65
|
-
"default": "false",
|
|
66
|
-
"attribute": "custom-validation",
|
|
67
|
-
"reflects": true
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
"kind": "field",
|
|
71
|
-
"name": "required",
|
|
31
|
+
"name": "_slotPrepend",
|
|
72
32
|
"type": {
|
|
73
|
-
"text": "
|
|
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,224 @@
|
|
|
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/Input Calendario', 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', 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/Input Numerico', 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, utilizza 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: ` Aggiungendo gli attributi HTML \\`min=\"\"\\`, \\`max=\"\"\\` e \\`step=\"\"\\` all'input, puoi 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', })} `, }"
|
|
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), 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> `, })} `, }"
|
|
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, utilizza 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 Input number, 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 Input number \\`readonly\\`, 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: ` Puoi 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', })} `, }"
|
|
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
|
+
},
|
|
653
683
|
{
|
|
654
684
|
"kind": "javascript-module",
|
|
655
685
|
"path": "stories/it-input.stories.ts",
|
|
@@ -657,7 +687,7 @@
|
|
|
657
687
|
{
|
|
658
688
|
"kind": "variable",
|
|
659
689
|
"name": "meta",
|
|
660
|
-
"default": "{ title: 'Componenti/Form/Input', tags: ['
|
|
690
|
+
"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
691
|
},
|
|
662
692
|
{
|
|
663
693
|
"kind": "variable",
|
|
@@ -665,7 +695,7 @@
|
|
|
665
695
|
"type": {
|
|
666
696
|
"text": "Story"
|
|
667
697
|
},
|
|
668
|
-
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: '
|
|
698
|
+
"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
699
|
},
|
|
670
700
|
{
|
|
671
701
|
"kind": "variable",
|
|
@@ -673,7 +703,7 @@
|
|
|
673
703
|
"type": {
|
|
674
704
|
"text": "Story"
|
|
675
705
|
},
|
|
676
|
-
"default": "{ ...meta, name: 'Testo segnaposto', args: { type: 'text', placeholder: 'Testo segnaposto', label: 'Etichetta', name: 'placeholder-example', id: 'placeholder-example', },
|
|
706
|
+
"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
707
|
},
|
|
678
708
|
{
|
|
679
709
|
"kind": "variable",
|
|
@@ -681,7 +711,7 @@
|
|
|
681
711
|
"type": {
|
|
682
712
|
"text": "Story"
|
|
683
713
|
},
|
|
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', },
|
|
714
|
+
"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
715
|
},
|
|
686
716
|
{
|
|
687
717
|
"kind": "variable",
|
|
@@ -689,7 +719,7 @@
|
|
|
689
719
|
"type": {
|
|
690
720
|
"text": "Story"
|
|
691
721
|
},
|
|
692
|
-
"default": "{ ...meta, name: 'Etichetta nascosta', args: { placeholder: 'Cerca...', label: 'Cerca nel sito', labelHidden: true },
|
|
722
|
+
"default": "{ ...meta, name: 'Etichetta nascosta', args: { placeholder: 'Cerca...', label: 'Cerca nel sito', labelHidden: true }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
693
723
|
},
|
|
694
724
|
{
|
|
695
725
|
"kind": "variable",
|
|
@@ -697,7 +727,7 @@
|
|
|
697
727
|
"type": {
|
|
698
728
|
"text": "Story"
|
|
699
729
|
},
|
|
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',
|
|
730
|
+
"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
731
|
},
|
|
702
732
|
{
|
|
703
733
|
"kind": "variable",
|
|
@@ -705,7 +735,7 @@
|
|
|
705
735
|
"type": {
|
|
706
736
|
"text": "Story"
|
|
707
737
|
},
|
|
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,
|
|
738
|
+
"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
739
|
},
|
|
710
740
|
{
|
|
711
741
|
"kind": "variable",
|
|
@@ -713,7 +743,7 @@
|
|
|
713
743
|
"type": {
|
|
714
744
|
"text": "Story"
|
|
715
745
|
},
|
|
716
|
-
"default": "{ ...meta,
|
|
746
|
+
"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
747
|
},
|
|
718
748
|
{
|
|
719
749
|
"kind": "variable",
|
|
@@ -721,7 +751,7 @@
|
|
|
721
751
|
"type": {
|
|
722
752
|
"text": "Story"
|
|
723
753
|
},
|
|
724
|
-
"default": "{ ...meta,
|
|
754
|
+
"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
755
|
},
|
|
726
756
|
{
|
|
727
757
|
"kind": "variable",
|
|
@@ -729,7 +759,7 @@
|
|
|
729
759
|
"type": {
|
|
730
760
|
"text": "Story"
|
|
731
761
|
},
|
|
732
|
-
"default": "{ ...meta,
|
|
762
|
+
"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
763
|
},
|
|
734
764
|
{
|
|
735
765
|
"kind": "variable",
|
|
@@ -737,15 +767,23 @@
|
|
|
737
767
|
"type": {
|
|
738
768
|
"text": "Story"
|
|
739
769
|
},
|
|
740
|
-
"default": "{ ...meta, name: 'Area di testo',
|
|
770
|
+
"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, })} `, }"
|
|
771
|
+
},
|
|
772
|
+
{
|
|
773
|
+
"kind": "variable",
|
|
774
|
+
"name": "ValidazioneNativa",
|
|
775
|
+
"type": {
|
|
776
|
+
"text": "Story"
|
|
777
|
+
},
|
|
778
|
+
"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, })} `, }"
|
|
741
779
|
},
|
|
742
780
|
{
|
|
743
781
|
"kind": "variable",
|
|
744
|
-
"name": "
|
|
782
|
+
"name": "ValidazioneCustom",
|
|
745
783
|
"type": {
|
|
746
784
|
"text": "Story"
|
|
747
785
|
},
|
|
748
|
-
"default": "{ ...meta, name: '
|
|
786
|
+
"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
787
|
},
|
|
750
788
|
{
|
|
751
789
|
"kind": "variable",
|
|
@@ -753,15 +791,15 @@
|
|
|
753
791
|
"type": {
|
|
754
792
|
"text": "Story"
|
|
755
793
|
},
|
|
756
|
-
"default": "{ ...meta, name: 'Gestione degli eventi', parameters: { docs: { description: { story:
|
|
794
|
+
"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, })} `, }"
|
|
757
795
|
},
|
|
758
796
|
{
|
|
759
797
|
"kind": "variable",
|
|
760
|
-
"name": "
|
|
798
|
+
"name": "MetodiEPropPubblici",
|
|
761
799
|
"type": {
|
|
762
800
|
"text": "Story"
|
|
763
801
|
},
|
|
764
|
-
"default": "{
|
|
802
|
+
"default": "{ ...StoryFormControlMethodAndProps({}), tags: ['!dev'] }"
|
|
765
803
|
}
|
|
766
804
|
],
|
|
767
805
|
"exports": [
|
|
@@ -855,9 +893,17 @@
|
|
|
855
893
|
},
|
|
856
894
|
{
|
|
857
895
|
"kind": "js",
|
|
858
|
-
"name": "
|
|
896
|
+
"name": "ValidazioneNativa",
|
|
897
|
+
"declaration": {
|
|
898
|
+
"name": "ValidazioneNativa",
|
|
899
|
+
"module": "stories/it-input.stories.ts"
|
|
900
|
+
}
|
|
901
|
+
},
|
|
902
|
+
{
|
|
903
|
+
"kind": "js",
|
|
904
|
+
"name": "ValidazioneCustom",
|
|
859
905
|
"declaration": {
|
|
860
|
-
"name": "
|
|
906
|
+
"name": "ValidazioneCustom",
|
|
861
907
|
"module": "stories/it-input.stories.ts"
|
|
862
908
|
}
|
|
863
909
|
},
|
|
@@ -871,9 +917,9 @@
|
|
|
871
917
|
},
|
|
872
918
|
{
|
|
873
919
|
"kind": "js",
|
|
874
|
-
"name": "
|
|
920
|
+
"name": "MetodiEPropPubblici",
|
|
875
921
|
"declaration": {
|
|
876
|
-
"name": "
|
|
922
|
+
"name": "MetodiEPropPubblici",
|
|
877
923
|
"module": "stories/it-input.stories.ts"
|
|
878
924
|
}
|
|
879
925
|
}
|
|
@@ -1027,7 +1073,7 @@
|
|
|
1027
1073
|
"type": {
|
|
1028
1074
|
"text": "DefaultTranslation"
|
|
1029
1075
|
},
|
|
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:',
|
|
1076
|
+
"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
1077
|
}
|
|
1032
1078
|
],
|
|
1033
1079
|
"exports": [
|