@italia/accordion 0.1.0-alpha.2 → 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 +47 -634
- package/dist/src/index.d.ts +0 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/index.js +2 -4
- package/dist/src/index.js.map +1 -1
- package/dist/src/it-accordion-item.d.ts +4 -2
- package/dist/src/it-accordion-item.d.ts.map +1 -1
- package/dist/src/it-accordion-item.js +1809 -18
- package/dist/src/it-accordion-item.js.map +1 -1
- package/dist/src/it-accordion.js +1051 -5
- package/dist/src/it-accordion.js.map +1 -1
- package/dist/src/types.d.ts +0 -3
- package/dist/src/types.d.ts.map +1 -1
- package/package.json +9 -6
- package/dist/src/it-collapse.d.ts +0 -45
- package/dist/src/it-collapse.d.ts.map +0 -1
- package/dist/src/it-collapse.js +0 -330
- package/dist/src/it-collapse.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -22,14 +22,6 @@
|
|
|
22
22
|
"name": "ItAccordionItem",
|
|
23
23
|
"module": "./it-accordion-item.js"
|
|
24
24
|
}
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"kind": "js",
|
|
28
|
-
"name": "ItCollapse",
|
|
29
|
-
"declaration": {
|
|
30
|
-
"name": "ItCollapse",
|
|
31
|
-
"module": "./it-collapse.js"
|
|
32
|
-
}
|
|
33
25
|
}
|
|
34
26
|
]
|
|
35
27
|
},
|
|
@@ -49,11 +41,7 @@
|
|
|
49
41
|
"text": "string"
|
|
50
42
|
},
|
|
51
43
|
"default": "'h2'",
|
|
52
|
-
"attribute": "as"
|
|
53
|
-
"inheritedFrom": {
|
|
54
|
-
"name": "ItCollapse",
|
|
55
|
-
"module": "src/it-collapse.ts"
|
|
56
|
-
}
|
|
44
|
+
"attribute": "as"
|
|
57
45
|
},
|
|
58
46
|
{
|
|
59
47
|
"kind": "field",
|
|
@@ -85,6 +73,15 @@
|
|
|
85
73
|
"attribute": "background-hover",
|
|
86
74
|
"reflects": true
|
|
87
75
|
},
|
|
76
|
+
{
|
|
77
|
+
"kind": "field",
|
|
78
|
+
"name": "isAccordion",
|
|
79
|
+
"type": {
|
|
80
|
+
"text": "boolean"
|
|
81
|
+
},
|
|
82
|
+
"privacy": "protected",
|
|
83
|
+
"default": "true"
|
|
84
|
+
},
|
|
88
85
|
{
|
|
89
86
|
"kind": "method",
|
|
90
87
|
"name": "setParentBackground",
|
|
@@ -120,251 +117,7 @@
|
|
|
120
117
|
{
|
|
121
118
|
"kind": "method",
|
|
122
119
|
"name": "renderDefaultTrigger",
|
|
123
|
-
"privacy": "protected"
|
|
124
|
-
"inheritedFrom": {
|
|
125
|
-
"name": "ItCollapse",
|
|
126
|
-
"module": "src/it-collapse.ts"
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
"kind": "method",
|
|
131
|
-
"name": "updateBackgroundStyles",
|
|
132
|
-
"privacy": "protected",
|
|
133
|
-
"inheritedFrom": {
|
|
134
|
-
"name": "ItCollapse",
|
|
135
|
-
"module": "src/it-collapse.ts"
|
|
136
|
-
}
|
|
137
|
-
},
|
|
138
|
-
{
|
|
139
|
-
"kind": "field",
|
|
140
|
-
"name": "shadowRootOptions",
|
|
141
|
-
"type": {
|
|
142
|
-
"text": "object"
|
|
143
|
-
},
|
|
144
|
-
"static": true,
|
|
145
|
-
"default": "{ ...BaseComponent.shadowRootOptions, delegatesFocus: true, }",
|
|
146
|
-
"inheritedFrom": {
|
|
147
|
-
"name": "ItCollapse",
|
|
148
|
-
"module": "src/it-collapse.ts"
|
|
149
|
-
}
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
"kind": "field",
|
|
153
|
-
"name": "expanded",
|
|
154
|
-
"type": {
|
|
155
|
-
"text": "boolean"
|
|
156
|
-
},
|
|
157
|
-
"default": "false",
|
|
158
|
-
"attribute": "expanded",
|
|
159
|
-
"reflects": true,
|
|
160
|
-
"inheritedFrom": {
|
|
161
|
-
"name": "ItCollapse",
|
|
162
|
-
"module": "src/it-collapse.ts"
|
|
163
|
-
}
|
|
164
|
-
},
|
|
165
|
-
{
|
|
166
|
-
"kind": "field",
|
|
167
|
-
"name": "label",
|
|
168
|
-
"type": {
|
|
169
|
-
"text": "string"
|
|
170
|
-
},
|
|
171
|
-
"default": "''",
|
|
172
|
-
"attribute": "label",
|
|
173
|
-
"inheritedFrom": {
|
|
174
|
-
"name": "ItCollapse",
|
|
175
|
-
"module": "src/it-collapse.ts"
|
|
176
|
-
}
|
|
177
|
-
},
|
|
178
|
-
{
|
|
179
|
-
"kind": "field",
|
|
180
|
-
"name": "defaultOpen",
|
|
181
|
-
"type": {
|
|
182
|
-
"text": "boolean"
|
|
183
|
-
},
|
|
184
|
-
"default": "false",
|
|
185
|
-
"attribute": "default-open",
|
|
186
|
-
"reflects": true,
|
|
187
|
-
"inheritedFrom": {
|
|
188
|
-
"name": "ItCollapse",
|
|
189
|
-
"module": "src/it-collapse.ts"
|
|
190
|
-
}
|
|
191
|
-
},
|
|
192
|
-
{
|
|
193
|
-
"kind": "field",
|
|
194
|
-
"name": "contentElement",
|
|
195
|
-
"type": {
|
|
196
|
-
"text": "HTMLElement"
|
|
197
|
-
},
|
|
198
|
-
"inheritedFrom": {
|
|
199
|
-
"name": "ItCollapse",
|
|
200
|
-
"module": "src/it-collapse.ts"
|
|
201
|
-
}
|
|
202
|
-
},
|
|
203
|
-
{
|
|
204
|
-
"kind": "field",
|
|
205
|
-
"name": "triggerElements",
|
|
206
|
-
"type": {
|
|
207
|
-
"text": "HTMLElement[]"
|
|
208
|
-
},
|
|
209
|
-
"privacy": "private",
|
|
210
|
-
"inheritedFrom": {
|
|
211
|
-
"name": "ItCollapse",
|
|
212
|
-
"module": "src/it-collapse.ts"
|
|
213
|
-
}
|
|
214
|
-
},
|
|
215
|
-
{
|
|
216
|
-
"kind": "field",
|
|
217
|
-
"name": "triggerElement",
|
|
218
|
-
"type": {
|
|
219
|
-
"text": "HTMLElement | null"
|
|
220
|
-
},
|
|
221
|
-
"readonly": true,
|
|
222
|
-
"inheritedFrom": {
|
|
223
|
-
"name": "ItCollapse",
|
|
224
|
-
"module": "src/it-collapse.ts"
|
|
225
|
-
}
|
|
226
|
-
},
|
|
227
|
-
{
|
|
228
|
-
"kind": "field",
|
|
229
|
-
"name": "isAnimating",
|
|
230
|
-
"type": {
|
|
231
|
-
"text": "boolean"
|
|
232
|
-
},
|
|
233
|
-
"privacy": "private",
|
|
234
|
-
"default": "false",
|
|
235
|
-
"inheritedFrom": {
|
|
236
|
-
"name": "ItCollapse",
|
|
237
|
-
"module": "src/it-collapse.ts"
|
|
238
|
-
}
|
|
239
|
-
},
|
|
240
|
-
{
|
|
241
|
-
"kind": "field",
|
|
242
|
-
"name": "animation",
|
|
243
|
-
"type": {
|
|
244
|
-
"text": "Animation | undefined"
|
|
245
|
-
},
|
|
246
|
-
"privacy": "private",
|
|
247
|
-
"inheritedFrom": {
|
|
248
|
-
"name": "ItCollapse",
|
|
249
|
-
"module": "src/it-collapse.ts"
|
|
250
|
-
}
|
|
251
|
-
},
|
|
252
|
-
{
|
|
253
|
-
"kind": "field",
|
|
254
|
-
"name": "animationDuration",
|
|
255
|
-
"type": {
|
|
256
|
-
"text": "number"
|
|
257
|
-
},
|
|
258
|
-
"privacy": "private",
|
|
259
|
-
"readonly": true,
|
|
260
|
-
"default": "350",
|
|
261
|
-
"inheritedFrom": {
|
|
262
|
-
"name": "ItCollapse",
|
|
263
|
-
"module": "src/it-collapse.ts"
|
|
264
|
-
}
|
|
265
|
-
},
|
|
266
|
-
{
|
|
267
|
-
"kind": "field",
|
|
268
|
-
"name": "_triggerId",
|
|
269
|
-
"privacy": "protected",
|
|
270
|
-
"inheritedFrom": {
|
|
271
|
-
"name": "ItCollapse",
|
|
272
|
-
"module": "src/it-collapse.ts"
|
|
273
|
-
}
|
|
274
|
-
},
|
|
275
|
-
{
|
|
276
|
-
"kind": "field",
|
|
277
|
-
"name": "_contentId",
|
|
278
|
-
"privacy": "protected",
|
|
279
|
-
"inheritedFrom": {
|
|
280
|
-
"name": "ItCollapse",
|
|
281
|
-
"module": "src/it-collapse.ts"
|
|
282
|
-
}
|
|
283
|
-
},
|
|
284
|
-
{
|
|
285
|
-
"kind": "field",
|
|
286
|
-
"name": "handleTriggerAction",
|
|
287
|
-
"privacy": "protected",
|
|
288
|
-
"inheritedFrom": {
|
|
289
|
-
"name": "ItCollapse",
|
|
290
|
-
"module": "src/it-collapse.ts"
|
|
291
|
-
}
|
|
292
|
-
},
|
|
293
|
-
{
|
|
294
|
-
"kind": "method",
|
|
295
|
-
"name": "toggle",
|
|
296
|
-
"inheritedFrom": {
|
|
297
|
-
"name": "ItCollapse",
|
|
298
|
-
"module": "src/it-collapse.ts"
|
|
299
|
-
}
|
|
300
|
-
},
|
|
301
|
-
{
|
|
302
|
-
"kind": "method",
|
|
303
|
-
"name": "setInitialState",
|
|
304
|
-
"privacy": "private",
|
|
305
|
-
"inheritedFrom": {
|
|
306
|
-
"name": "ItCollapse",
|
|
307
|
-
"module": "src/it-collapse.ts"
|
|
308
|
-
}
|
|
309
|
-
},
|
|
310
|
-
{
|
|
311
|
-
"kind": "method",
|
|
312
|
-
"name": "cleanupAnimation",
|
|
313
|
-
"privacy": "private",
|
|
314
|
-
"inheritedFrom": {
|
|
315
|
-
"name": "ItCollapse",
|
|
316
|
-
"module": "src/it-collapse.ts"
|
|
317
|
-
}
|
|
318
|
-
},
|
|
319
|
-
{
|
|
320
|
-
"kind": "method",
|
|
321
|
-
"name": "updateAriaAttributes",
|
|
322
|
-
"privacy": "private",
|
|
323
|
-
"inheritedFrom": {
|
|
324
|
-
"name": "ItCollapse",
|
|
325
|
-
"module": "src/it-collapse.ts"
|
|
326
|
-
}
|
|
327
|
-
},
|
|
328
|
-
{
|
|
329
|
-
"kind": "method",
|
|
330
|
-
"name": "performExpand",
|
|
331
|
-
"privacy": "private",
|
|
332
|
-
"inheritedFrom": {
|
|
333
|
-
"name": "ItCollapse",
|
|
334
|
-
"module": "src/it-collapse.ts"
|
|
335
|
-
}
|
|
336
|
-
},
|
|
337
|
-
{
|
|
338
|
-
"kind": "method",
|
|
339
|
-
"name": "performCollapse",
|
|
340
|
-
"privacy": "private",
|
|
341
|
-
"inheritedFrom": {
|
|
342
|
-
"name": "ItCollapse",
|
|
343
|
-
"module": "src/it-collapse.ts"
|
|
344
|
-
}
|
|
345
|
-
},
|
|
346
|
-
{
|
|
347
|
-
"kind": "field",
|
|
348
|
-
"name": "_onTriggerSlotChange",
|
|
349
|
-
"privacy": "private",
|
|
350
|
-
"inheritedFrom": {
|
|
351
|
-
"name": "ItCollapse",
|
|
352
|
-
"module": "src/it-collapse.ts"
|
|
353
|
-
}
|
|
354
|
-
},
|
|
355
|
-
{
|
|
356
|
-
"kind": "method",
|
|
357
|
-
"name": "hasSlottedTrigger",
|
|
358
|
-
"privacy": "private",
|
|
359
|
-
"return": {
|
|
360
|
-
"type": {
|
|
361
|
-
"text": "boolean"
|
|
362
|
-
}
|
|
363
|
-
},
|
|
364
|
-
"inheritedFrom": {
|
|
365
|
-
"name": "ItCollapse",
|
|
366
|
-
"module": "src/it-collapse.ts"
|
|
367
|
-
}
|
|
120
|
+
"privacy": "protected"
|
|
368
121
|
},
|
|
369
122
|
{
|
|
370
123
|
"kind": "method",
|
|
@@ -377,11 +130,12 @@
|
|
|
377
130
|
"text": "string"
|
|
378
131
|
}
|
|
379
132
|
}
|
|
380
|
-
]
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
133
|
+
]
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"kind": "method",
|
|
137
|
+
"name": "updateBackgroundStyles",
|
|
138
|
+
"privacy": "protected"
|
|
385
139
|
}
|
|
386
140
|
],
|
|
387
141
|
"attributes": [
|
|
@@ -391,11 +145,7 @@
|
|
|
391
145
|
"text": "string"
|
|
392
146
|
},
|
|
393
147
|
"default": "'h2'",
|
|
394
|
-
"fieldName": "as"
|
|
395
|
-
"inheritedFrom": {
|
|
396
|
-
"name": "ItCollapse",
|
|
397
|
-
"module": "src/it-collapse.ts"
|
|
398
|
-
}
|
|
148
|
+
"fieldName": "as"
|
|
399
149
|
},
|
|
400
150
|
{
|
|
401
151
|
"name": "left-icon",
|
|
@@ -420,62 +170,14 @@
|
|
|
420
170
|
},
|
|
421
171
|
"default": "false",
|
|
422
172
|
"fieldName": "backgroundHover"
|
|
423
|
-
},
|
|
424
|
-
{
|
|
425
|
-
"name": "expanded",
|
|
426
|
-
"type": {
|
|
427
|
-
"text": "boolean"
|
|
428
|
-
},
|
|
429
|
-
"default": "false",
|
|
430
|
-
"fieldName": "expanded",
|
|
431
|
-
"inheritedFrom": {
|
|
432
|
-
"name": "ItCollapse",
|
|
433
|
-
"module": "src/it-collapse.ts"
|
|
434
|
-
}
|
|
435
|
-
},
|
|
436
|
-
{
|
|
437
|
-
"name": "label",
|
|
438
|
-
"type": {
|
|
439
|
-
"text": "string"
|
|
440
|
-
},
|
|
441
|
-
"default": "''",
|
|
442
|
-
"fieldName": "label",
|
|
443
|
-
"inheritedFrom": {
|
|
444
|
-
"name": "ItCollapse",
|
|
445
|
-
"module": "src/it-collapse.ts"
|
|
446
|
-
}
|
|
447
|
-
},
|
|
448
|
-
{
|
|
449
|
-
"name": "default-open",
|
|
450
|
-
"type": {
|
|
451
|
-
"text": "boolean"
|
|
452
|
-
},
|
|
453
|
-
"default": "false",
|
|
454
|
-
"fieldName": "defaultOpen",
|
|
455
|
-
"inheritedFrom": {
|
|
456
|
-
"name": "ItCollapse",
|
|
457
|
-
"module": "src/it-collapse.ts"
|
|
458
|
-
}
|
|
459
173
|
}
|
|
460
174
|
],
|
|
461
175
|
"superclass": {
|
|
462
|
-
"name": "
|
|
463
|
-
"
|
|
176
|
+
"name": "ItCollapseBase",
|
|
177
|
+
"package": "@italia/collapse"
|
|
464
178
|
},
|
|
465
179
|
"tagName": "it-accordion-item",
|
|
466
|
-
"customElement": true
|
|
467
|
-
"events": [
|
|
468
|
-
{
|
|
469
|
-
"name": "it-collapse-toggle",
|
|
470
|
-
"type": {
|
|
471
|
-
"text": "CustomEvent"
|
|
472
|
-
},
|
|
473
|
-
"inheritedFrom": {
|
|
474
|
-
"name": "ItCollapse",
|
|
475
|
-
"module": "src/it-collapse.ts"
|
|
476
|
-
}
|
|
477
|
-
}
|
|
478
|
-
]
|
|
180
|
+
"customElement": true
|
|
479
181
|
}
|
|
480
182
|
],
|
|
481
183
|
"exports": [
|
|
@@ -650,264 +352,6 @@
|
|
|
650
352
|
}
|
|
651
353
|
]
|
|
652
354
|
},
|
|
653
|
-
{
|
|
654
|
-
"kind": "javascript-module",
|
|
655
|
-
"path": "src/it-collapse.ts",
|
|
656
|
-
"declarations": [
|
|
657
|
-
{
|
|
658
|
-
"kind": "class",
|
|
659
|
-
"description": "",
|
|
660
|
-
"name": "ItCollapse",
|
|
661
|
-
"members": [
|
|
662
|
-
{
|
|
663
|
-
"kind": "field",
|
|
664
|
-
"name": "shadowRootOptions",
|
|
665
|
-
"type": {
|
|
666
|
-
"text": "object"
|
|
667
|
-
},
|
|
668
|
-
"static": true,
|
|
669
|
-
"default": "{ ...BaseComponent.shadowRootOptions, delegatesFocus: true, }"
|
|
670
|
-
},
|
|
671
|
-
{
|
|
672
|
-
"kind": "field",
|
|
673
|
-
"name": "expanded",
|
|
674
|
-
"type": {
|
|
675
|
-
"text": "boolean"
|
|
676
|
-
},
|
|
677
|
-
"default": "false",
|
|
678
|
-
"attribute": "expanded",
|
|
679
|
-
"reflects": true
|
|
680
|
-
},
|
|
681
|
-
{
|
|
682
|
-
"kind": "field",
|
|
683
|
-
"name": "label",
|
|
684
|
-
"type": {
|
|
685
|
-
"text": "string"
|
|
686
|
-
},
|
|
687
|
-
"default": "''",
|
|
688
|
-
"attribute": "label"
|
|
689
|
-
},
|
|
690
|
-
{
|
|
691
|
-
"kind": "field",
|
|
692
|
-
"name": "as",
|
|
693
|
-
"type": {
|
|
694
|
-
"text": "string"
|
|
695
|
-
},
|
|
696
|
-
"default": "'button'",
|
|
697
|
-
"attribute": "as"
|
|
698
|
-
},
|
|
699
|
-
{
|
|
700
|
-
"kind": "field",
|
|
701
|
-
"name": "defaultOpen",
|
|
702
|
-
"type": {
|
|
703
|
-
"text": "boolean"
|
|
704
|
-
},
|
|
705
|
-
"default": "false",
|
|
706
|
-
"attribute": "default-open",
|
|
707
|
-
"reflects": true
|
|
708
|
-
},
|
|
709
|
-
{
|
|
710
|
-
"kind": "field",
|
|
711
|
-
"name": "contentElement",
|
|
712
|
-
"type": {
|
|
713
|
-
"text": "HTMLElement"
|
|
714
|
-
}
|
|
715
|
-
},
|
|
716
|
-
{
|
|
717
|
-
"kind": "field",
|
|
718
|
-
"name": "triggerElements",
|
|
719
|
-
"type": {
|
|
720
|
-
"text": "HTMLElement[]"
|
|
721
|
-
},
|
|
722
|
-
"privacy": "private"
|
|
723
|
-
},
|
|
724
|
-
{
|
|
725
|
-
"kind": "field",
|
|
726
|
-
"name": "triggerElement",
|
|
727
|
-
"type": {
|
|
728
|
-
"text": "HTMLElement | null"
|
|
729
|
-
},
|
|
730
|
-
"readonly": true
|
|
731
|
-
},
|
|
732
|
-
{
|
|
733
|
-
"kind": "field",
|
|
734
|
-
"name": "isAnimating",
|
|
735
|
-
"type": {
|
|
736
|
-
"text": "boolean"
|
|
737
|
-
},
|
|
738
|
-
"privacy": "private",
|
|
739
|
-
"default": "false"
|
|
740
|
-
},
|
|
741
|
-
{
|
|
742
|
-
"kind": "field",
|
|
743
|
-
"name": "animation",
|
|
744
|
-
"type": {
|
|
745
|
-
"text": "Animation | undefined"
|
|
746
|
-
},
|
|
747
|
-
"privacy": "private"
|
|
748
|
-
},
|
|
749
|
-
{
|
|
750
|
-
"kind": "field",
|
|
751
|
-
"name": "animationDuration",
|
|
752
|
-
"type": {
|
|
753
|
-
"text": "number"
|
|
754
|
-
},
|
|
755
|
-
"privacy": "private",
|
|
756
|
-
"readonly": true,
|
|
757
|
-
"default": "350"
|
|
758
|
-
},
|
|
759
|
-
{
|
|
760
|
-
"kind": "field",
|
|
761
|
-
"name": "_triggerId",
|
|
762
|
-
"privacy": "protected"
|
|
763
|
-
},
|
|
764
|
-
{
|
|
765
|
-
"kind": "field",
|
|
766
|
-
"name": "_contentId",
|
|
767
|
-
"privacy": "protected"
|
|
768
|
-
},
|
|
769
|
-
{
|
|
770
|
-
"kind": "field",
|
|
771
|
-
"name": "handleTriggerAction",
|
|
772
|
-
"privacy": "protected"
|
|
773
|
-
},
|
|
774
|
-
{
|
|
775
|
-
"kind": "method",
|
|
776
|
-
"name": "toggle"
|
|
777
|
-
},
|
|
778
|
-
{
|
|
779
|
-
"kind": "method",
|
|
780
|
-
"name": "setInitialState",
|
|
781
|
-
"privacy": "private"
|
|
782
|
-
},
|
|
783
|
-
{
|
|
784
|
-
"kind": "method",
|
|
785
|
-
"name": "cleanupAnimation",
|
|
786
|
-
"privacy": "private"
|
|
787
|
-
},
|
|
788
|
-
{
|
|
789
|
-
"kind": "method",
|
|
790
|
-
"name": "updateAriaAttributes",
|
|
791
|
-
"privacy": "private"
|
|
792
|
-
},
|
|
793
|
-
{
|
|
794
|
-
"kind": "method",
|
|
795
|
-
"name": "updateBackgroundStyles",
|
|
796
|
-
"privacy": "protected"
|
|
797
|
-
},
|
|
798
|
-
{
|
|
799
|
-
"kind": "method",
|
|
800
|
-
"name": "performExpand",
|
|
801
|
-
"privacy": "private"
|
|
802
|
-
},
|
|
803
|
-
{
|
|
804
|
-
"kind": "method",
|
|
805
|
-
"name": "performCollapse",
|
|
806
|
-
"privacy": "private"
|
|
807
|
-
},
|
|
808
|
-
{
|
|
809
|
-
"kind": "field",
|
|
810
|
-
"name": "_onTriggerSlotChange",
|
|
811
|
-
"privacy": "private"
|
|
812
|
-
},
|
|
813
|
-
{
|
|
814
|
-
"kind": "method",
|
|
815
|
-
"name": "renderDefaultTrigger",
|
|
816
|
-
"privacy": "protected"
|
|
817
|
-
},
|
|
818
|
-
{
|
|
819
|
-
"kind": "method",
|
|
820
|
-
"name": "hasSlottedTrigger",
|
|
821
|
-
"privacy": "private",
|
|
822
|
-
"return": {
|
|
823
|
-
"type": {
|
|
824
|
-
"text": "boolean"
|
|
825
|
-
}
|
|
826
|
-
}
|
|
827
|
-
},
|
|
828
|
-
{
|
|
829
|
-
"kind": "method",
|
|
830
|
-
"name": "isValidTag",
|
|
831
|
-
"privacy": "protected",
|
|
832
|
-
"parameters": [
|
|
833
|
-
{
|
|
834
|
-
"name": "tag",
|
|
835
|
-
"type": {
|
|
836
|
-
"text": "string"
|
|
837
|
-
}
|
|
838
|
-
}
|
|
839
|
-
]
|
|
840
|
-
}
|
|
841
|
-
],
|
|
842
|
-
"events": [
|
|
843
|
-
{
|
|
844
|
-
"name": "it-collapse-toggle",
|
|
845
|
-
"type": {
|
|
846
|
-
"text": "CustomEvent"
|
|
847
|
-
}
|
|
848
|
-
}
|
|
849
|
-
],
|
|
850
|
-
"attributes": [
|
|
851
|
-
{
|
|
852
|
-
"name": "expanded",
|
|
853
|
-
"type": {
|
|
854
|
-
"text": "boolean"
|
|
855
|
-
},
|
|
856
|
-
"default": "false",
|
|
857
|
-
"fieldName": "expanded"
|
|
858
|
-
},
|
|
859
|
-
{
|
|
860
|
-
"name": "label",
|
|
861
|
-
"type": {
|
|
862
|
-
"text": "string"
|
|
863
|
-
},
|
|
864
|
-
"default": "''",
|
|
865
|
-
"fieldName": "label"
|
|
866
|
-
},
|
|
867
|
-
{
|
|
868
|
-
"name": "as",
|
|
869
|
-
"type": {
|
|
870
|
-
"text": "string"
|
|
871
|
-
},
|
|
872
|
-
"default": "'button'",
|
|
873
|
-
"fieldName": "as"
|
|
874
|
-
},
|
|
875
|
-
{
|
|
876
|
-
"name": "default-open",
|
|
877
|
-
"type": {
|
|
878
|
-
"text": "boolean"
|
|
879
|
-
},
|
|
880
|
-
"default": "false",
|
|
881
|
-
"fieldName": "defaultOpen"
|
|
882
|
-
}
|
|
883
|
-
],
|
|
884
|
-
"superclass": {
|
|
885
|
-
"name": "BaseComponent",
|
|
886
|
-
"package": "@italia/globals"
|
|
887
|
-
},
|
|
888
|
-
"tagName": "it-collapse",
|
|
889
|
-
"customElement": true
|
|
890
|
-
}
|
|
891
|
-
],
|
|
892
|
-
"exports": [
|
|
893
|
-
{
|
|
894
|
-
"kind": "js",
|
|
895
|
-
"name": "ItCollapse",
|
|
896
|
-
"declaration": {
|
|
897
|
-
"name": "ItCollapse",
|
|
898
|
-
"module": "src/it-collapse.ts"
|
|
899
|
-
}
|
|
900
|
-
},
|
|
901
|
-
{
|
|
902
|
-
"kind": "custom-element-definition",
|
|
903
|
-
"name": "it-collapse",
|
|
904
|
-
"declaration": {
|
|
905
|
-
"name": "ItCollapse",
|
|
906
|
-
"module": "src/it-collapse.ts"
|
|
907
|
-
}
|
|
908
|
-
}
|
|
909
|
-
]
|
|
910
|
-
},
|
|
911
355
|
{
|
|
912
356
|
"kind": "javascript-module",
|
|
913
357
|
"path": "src/types.ts",
|
|
@@ -927,40 +371,6 @@
|
|
|
927
371
|
"text": "['single', 'multiple']"
|
|
928
372
|
},
|
|
929
373
|
"default": "['single', 'multiple']"
|
|
930
|
-
},
|
|
931
|
-
{
|
|
932
|
-
"kind": "function",
|
|
933
|
-
"name": "isMouseEvent",
|
|
934
|
-
"return": {
|
|
935
|
-
"type": {
|
|
936
|
-
"text": "event is MouseEvent"
|
|
937
|
-
}
|
|
938
|
-
},
|
|
939
|
-
"parameters": [
|
|
940
|
-
{
|
|
941
|
-
"name": "event",
|
|
942
|
-
"type": {
|
|
943
|
-
"text": "PressEvent"
|
|
944
|
-
}
|
|
945
|
-
}
|
|
946
|
-
]
|
|
947
|
-
},
|
|
948
|
-
{
|
|
949
|
-
"kind": "function",
|
|
950
|
-
"name": "isKeyboardEvent",
|
|
951
|
-
"return": {
|
|
952
|
-
"type": {
|
|
953
|
-
"text": "event is KeyboardEvent"
|
|
954
|
-
}
|
|
955
|
-
},
|
|
956
|
-
"parameters": [
|
|
957
|
-
{
|
|
958
|
-
"name": "event",
|
|
959
|
-
"type": {
|
|
960
|
-
"text": "PressEvent"
|
|
961
|
-
}
|
|
962
|
-
}
|
|
963
|
-
]
|
|
964
374
|
}
|
|
965
375
|
],
|
|
966
376
|
"exports": [
|
|
@@ -979,22 +389,6 @@
|
|
|
979
389
|
"name": "ACCORDION_MODES",
|
|
980
390
|
"module": "src/types.ts"
|
|
981
391
|
}
|
|
982
|
-
},
|
|
983
|
-
{
|
|
984
|
-
"kind": "js",
|
|
985
|
-
"name": "isMouseEvent",
|
|
986
|
-
"declaration": {
|
|
987
|
-
"name": "isMouseEvent",
|
|
988
|
-
"module": "src/types.ts"
|
|
989
|
-
}
|
|
990
|
-
},
|
|
991
|
-
{
|
|
992
|
-
"kind": "js",
|
|
993
|
-
"name": "isKeyboardEvent",
|
|
994
|
-
"declaration": {
|
|
995
|
-
"name": "isKeyboardEvent",
|
|
996
|
-
"module": "src/types.ts"
|
|
997
|
-
}
|
|
998
392
|
}
|
|
999
393
|
]
|
|
1000
394
|
},
|
|
@@ -1008,7 +402,15 @@
|
|
|
1008
402
|
"type": {
|
|
1009
403
|
"text": "Meta<AccordionProps>"
|
|
1010
404
|
},
|
|
1011
|
-
"default": "{ title: 'Componenti/Accordion', tags: ['
|
|
405
|
+
"default": "{ title: 'Componenti/Accordion', tags: ['a11y-ok', 'web-component'], component: 'it-accordion', args: { mode: 'multiple', backgroundActive: false, backgroundHover: false, leftIcon: false, }, decorators: [ (Story, context) => context?.parameters?.useMetaDecorator === false ? Story() : html`<div style=\"min-height:350px;display:flex;align-items:center\">${Story()}</div>`, ], argTypes: { mode: { control: 'select', description: \"Se impostato a `single`, solo un elemento dell'accordion può essere aperto contemporaneamente. Il default è `multiple`.\", table: { defaultValue: { summary: 'multiple' } }, options: ACCORDION_MODES, }, backgroundActive: { control: 'boolean', description: 'Applica sfondo primario agli elementi attivi (quando il contenuto è visibile)', table: { defaultValue: { summary: 'false' } }, name: 'background-active', }, backgroundHover: { control: 'boolean', description: 'Applica sfondo primario agli elementi al passaggio del mouse', table: { defaultValue: { summary: 'false' } }, name: 'background-hover', }, leftIcon: { control: 'boolean', description: 'Mostra icone plus/minus a sinistra invece della freccia a destra', table: { defaultValue: { summary: 'false' } }, name: 'left-icon', }, }, parameters: { layout: 'padded', docs: { source: { excludeDecorators: true }, description: { component: ` <Description>Costruisci accordion richiudibili verticalmente.</Description> Per ottimizzare l'ingombro dei contenuti di una pagina a volte è necessario usare degli elementi richiudibili (in gergo definiti richiudibili o collapse), che possono essere attivati indipendentemente l'uno dall'altro oppure in modo esclusivo con l'attivazione di solo un blocco alla volta (in gergo definiti fisarmoniche o accordion). Il componente Accordion è basato su [Collapse](?path=/docs/componenti-collapse--documentazione). <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p> L'accordion implementa le specifiche ARIA [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) per garantire piena accessibilità:\\n • Navigazione da tastiera con tasti freccia per spostarsi tra gli elementi\\n • Supporto per <code>Space</code> ed <code>Enter</code> per attivare/disattivare elementi\\n • Attributi ARIA appropriati per comunicare lo stato agli screen reader\\n • Heading semantici configurabili per una corretta struttura del documento\\n • Rispetto delle preferenze di riduzione del movimento definite dall'utente per le animazioni di apertura/chiusura </p></div></div> ### Differenza tra Collapse, Accordion e Tabs I componenti Accordion, Tabs e Collapse funzionano tutti nascondendo sezioni di contenuto che l’utente può scegliere di visualizzare. Evitare di usare questi componenti l’uno all’interno dell’altro. Se decidi di usare uno di questi componenti, considera quanto segue: - L’utente ha bisogno di visualizzare più di una sezione alla volta? L’accordion può mostrare più sezioni contemporaneamente, a differenza dei tabs. - L’utente deve passare rapidamente tra le sezioni? I tabs permettono di cambiare contenuto senza spostare le altre sezioni nella pagina, a differenza dell’accordion. - Ci sono molte sezioni di contenuto? L’accordion può contenere più sezioni perché sono disposte verticalmente, mentre i tabs sono disposti orizzontalmente. - Ci sono solo uno o due contenuti brevi e meno importanti? Il componente Collapse è più adatto perché visivamente più piccolo e meno prominente rispetto a un accordion o ai tabs. <br/> | Componente | Contenuti multipli | Visibilità | Esclusività | Uso tipico | Esempi | |----------|--------------------|-------------|--------------|-------------|---------| | **Collapse** | No | Singolo contenuto mostrato o nascosto | N/A | Mostrare o nascondere dettagli secondari | “Mostra dettagli”, “Visualizza termini” | | **Accordion** | Sì | Più sezioni espandibili | Solo una aperta alla volta *(consigliato)* | Raggruppare contenuti correlati in blocchi espandibili | FAQ, elenchi informativi | | **Tabs** | Sì | Una sezione visibile alla volta | Sempre esclusiva | Organizzare viste equivalenti o alternative | Schede di impostazioni, pannelli di dati | ### Gruppi di elementi richiudibili Gli elementi richiudibili sono molto spesso mostrati in gruppo, tipicamente usati per approfondire voci o argomenti mostrati nelle singole barre cliccabili. `, }, }, }, }"
|
|
406
|
+
},
|
|
407
|
+
{
|
|
408
|
+
"kind": "variable",
|
|
409
|
+
"name": "Info",
|
|
410
|
+
"type": {
|
|
411
|
+
"text": "Story"
|
|
412
|
+
},
|
|
413
|
+
"default": "{ ...CollapsibleOrHiddenContentGuidelines(), tags: ['!dev'], }"
|
|
1012
414
|
},
|
|
1013
415
|
{
|
|
1014
416
|
"kind": "variable",
|
|
@@ -1016,12 +418,15 @@
|
|
|
1016
418
|
"type": {
|
|
1017
419
|
"text": "Story"
|
|
1018
420
|
},
|
|
1019
|
-
"default": "{ name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: '
|
|
421
|
+
"default": "{ name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: 'hidden', }, }, }, render: (args) => renderComponent(args, defaultItems), }"
|
|
1020
422
|
},
|
|
1021
423
|
{
|
|
1022
424
|
"kind": "variable",
|
|
1023
425
|
"name": "AccordionItem",
|
|
1024
|
-
"
|
|
426
|
+
"type": {
|
|
427
|
+
"text": "object"
|
|
428
|
+
},
|
|
429
|
+
"default": "{ name: 'Informazioni generali', argTypes: { mode: { table: { disable: true } }, backgroundActive: { table: { disable: true } }, backgroundHover: { table: { disable: true } }, leftIcon: { table: { disable: true } }, // Accordion item controls label: { control: 'text', description: \"Testo dell'header dell'Elemento richiudibile per l'esempio interattivo, inserito nello `slot heading`\", table: { defaultValue: { summary: 'Elemento richiudibile' } }, name: 'Intestazione', }, as: { control: { type: 'select' }, options: ['h2', 'h3', 'h4', 'h5', 'h6'], description: \"Livello di heading per l'header (h2-h6)\", table: { defaultValue: { summary: 'h2' } }, }, defaultOpen: { control: 'boolean', description: \"Se true, l'elemento è aperto di default (stato iniziale)\", table: { defaultValue: { summary: 'false' } }, name: 'default-open', }, }, decorators: [ (Story: any) => html` <div style=\"min-height:150px;display:flex;align-items:center\"> <it-accordion>${Story()}</it-accordion> </div> `, ], parameters: { useMetaDecorator: false, docs: { source: { excludeDecorators: true }, }, }, render: (args: any) => html` <it-accordion-item as=\"${args.as || 'h2'}\" ?default-open=\"${args.defaultOpen || false}\"> <span slot=\"heading\">${args.label || 'Elemento richiudibile'}</span> <div slot=\"content\"> Contenuto dell'elemento richiudibile. Questo testo è all'interno dello slot \"content\". Qui puoi inserire qualsiasi contenuto HTML: paragrafi, liste, immagini, ecc. </div> </it-accordion-item> `, args: { label: 'Elemento richiudibile', as: 'h2', defaultOpen: false, }, }"
|
|
1025
430
|
},
|
|
1026
431
|
{
|
|
1027
432
|
"kind": "variable",
|
|
@@ -1037,7 +442,7 @@
|
|
|
1037
442
|
"type": {
|
|
1038
443
|
"text": "Story"
|
|
1039
444
|
},
|
|
1040
|
-
"default": "{ name: 'Accordion annidati', decorators: [(Story) => html`<div style=\"min-height:575px;display:flex;align-items:center\">${Story()}</div>`], parameters: { useMetaDecorator: false,
|
|
445
|
+
"default": "{ name: 'Accordion annidati', decorators: [(Story) => html`<div style=\"min-height:575px;display:flex;align-items:center\">${Story()}</div>`], parameters: { useMetaDecorator: false, }, render: () => html` <it-accordion> <it-accordion-item default-open> <span slot=\"heading\">Elemento richiudibile #1</span> <div slot=\"content\"> <!-- Accordion annidato --> <it-accordion> <it-accordion-item as=\"h3\" default-open> <span slot=\"heading\">Elemento richiudibile annidato #1</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> <it-accordion-item as=\"h3\"> <span slot=\"heading\">Elemento richiudibile annidato #2</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> <it-accordion-item as=\"h3\"> <span slot=\"heading\">Elemento richiudibile annidato #3</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> </it-accordion> </div> </it-accordion-item> <it-accordion-item> <span slot=\"heading\">Elemento richiudibile #2</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> <it-accordion-item> <span slot=\"heading\">Elemento richiudibile #3</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> </it-accordion>`, }"
|
|
1041
446
|
},
|
|
1042
447
|
{
|
|
1043
448
|
"kind": "variable",
|
|
@@ -1045,7 +450,7 @@
|
|
|
1045
450
|
"type": {
|
|
1046
451
|
"text": "Story"
|
|
1047
452
|
},
|
|
1048
|
-
"default": "{ name: '
|
|
453
|
+
"default": "{ name: 'Sfondo degli elementi attivi', argTypes: { backgroundActive: { table: { disable: true } }, }, parameters: {}, render: () => html` <it-accordion background-active> <it-accordion-item default-open> <span slot=\"heading\">Elemento richiudibile #1</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> <it-accordion-item> <span slot=\"heading\">Elemento richiudibile #2</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> <it-accordion-item> <span slot=\"heading\">Elemento richiudibile #3</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> </it-accordion> `, }"
|
|
1049
454
|
},
|
|
1050
455
|
{
|
|
1051
456
|
"kind": "variable",
|
|
@@ -1053,7 +458,7 @@
|
|
|
1053
458
|
"type": {
|
|
1054
459
|
"text": "Story"
|
|
1055
460
|
},
|
|
1056
|
-
"default": "{ name: '
|
|
461
|
+
"default": "{ name: \"Sfondo all'hover degli elementi\", argTypes: { backgroundHover: { table: { disable: true } }, }, parameters: {}, render: () => html` <it-accordion background-hover> <it-accordion-item default-open> <span slot=\"heading\">Elemento richiudibile #1</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> <it-accordion-item> <span slot=\"heading\">Elemento richiudibile #2</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> <it-accordion-item> <span slot=\"heading\">Elemento richiudibile #3</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> </it-accordion> `, }"
|
|
1057
462
|
},
|
|
1058
463
|
{
|
|
1059
464
|
"kind": "variable",
|
|
@@ -1061,7 +466,7 @@
|
|
|
1061
466
|
"type": {
|
|
1062
467
|
"text": "Story"
|
|
1063
468
|
},
|
|
1064
|
-
"default": "{ name: 'Icona a sinistra', args: { leftIcon: true, }, argTypes: { leftIcon: { table: { disable: true }, }, backgroundActive: { table: { disable: true }, }, }, parameters: {
|
|
469
|
+
"default": "{ name: 'Icona a sinistra', args: { leftIcon: true, }, argTypes: { leftIcon: { table: { disable: true }, }, backgroundActive: { table: { disable: true }, }, }, parameters: {}, render: (args) => renderComponent(args, defaultItems), }"
|
|
1065
470
|
}
|
|
1066
471
|
],
|
|
1067
472
|
"exports": [
|
|
@@ -1073,6 +478,14 @@
|
|
|
1073
478
|
"module": "stories/it-accordion.stories.ts"
|
|
1074
479
|
}
|
|
1075
480
|
},
|
|
481
|
+
{
|
|
482
|
+
"kind": "js",
|
|
483
|
+
"name": "Info",
|
|
484
|
+
"declaration": {
|
|
485
|
+
"name": "Info",
|
|
486
|
+
"module": "stories/it-accordion.stories.ts"
|
|
487
|
+
}
|
|
488
|
+
},
|
|
1076
489
|
{
|
|
1077
490
|
"kind": "js",
|
|
1078
491
|
"name": "EsempioInterattivo",
|