@italia/chip 0.1.0-alpha.2 → 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 +2 -2
- package/custom-elements.json +14 -16
- package/dist/src/it-chip.d.ts +1 -1
- package/dist/src/it-chip.d.ts.map +1 -1
- package/dist/src/it-chip.js +147 -84
- package/dist/src/it-chip.js.map +1 -1
- package/dist/src/types.d.ts +1 -1
- package/dist/src/types.d.ts.map +1 -1
- package/package.json +11 -7
- package/styles/globals.scss +57 -4
package/README.md
CHANGED
|
@@ -5,14 +5,14 @@ This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) reco
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm i
|
|
8
|
+
npm i @italia/chip
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
13
|
```html
|
|
14
14
|
<script type="module">
|
|
15
|
-
import '@italia/
|
|
15
|
+
import '@italia/chip';
|
|
16
16
|
</script>
|
|
17
17
|
|
|
18
18
|
<it-chip></it-chip>
|
package/custom-elements.json
CHANGED
|
@@ -100,9 +100,8 @@
|
|
|
100
100
|
"kind": "field",
|
|
101
101
|
"name": "variant",
|
|
102
102
|
"type": {
|
|
103
|
-
"text": "ChipVariant"
|
|
103
|
+
"text": "ChipVariant | undefined"
|
|
104
104
|
},
|
|
105
|
-
"default": "''",
|
|
106
105
|
"attribute": "variant",
|
|
107
106
|
"reflects": true
|
|
108
107
|
},
|
|
@@ -201,9 +200,8 @@
|
|
|
201
200
|
{
|
|
202
201
|
"name": "variant",
|
|
203
202
|
"type": {
|
|
204
|
-
"text": "ChipVariant"
|
|
203
|
+
"text": "ChipVariant | undefined"
|
|
205
204
|
},
|
|
206
|
-
"default": "''",
|
|
207
205
|
"fieldName": "variant"
|
|
208
206
|
},
|
|
209
207
|
{
|
|
@@ -250,9 +248,9 @@
|
|
|
250
248
|
"kind": "variable",
|
|
251
249
|
"name": "CHIP_VARIANTS",
|
|
252
250
|
"type": {
|
|
253
|
-
"text": "['primary', 'secondary', 'success', 'danger', 'warning'
|
|
251
|
+
"text": "['primary', 'secondary', 'success', 'danger', 'warning']"
|
|
254
252
|
},
|
|
255
|
-
"default": "['primary', 'secondary', 'success', 'danger', 'warning'
|
|
253
|
+
"default": "['primary', 'secondary', 'success', 'danger', 'warning']"
|
|
256
254
|
},
|
|
257
255
|
{
|
|
258
256
|
"kind": "variable",
|
|
@@ -289,7 +287,7 @@
|
|
|
289
287
|
{
|
|
290
288
|
"kind": "variable",
|
|
291
289
|
"name": "meta",
|
|
292
|
-
"default": "{ title: 'Componenti/Chip', component: 'it-chip', tags: ['
|
|
290
|
+
"default": "{ title: 'Componenti/Chip', component: 'it-chip', tags: ['a11y-ok', 'web-component'], args: { size: 'sm', label: 'Etichetta', href: undefined, variant: 'primary', isDisabled: false, avatar: '', avatarAlt: 'Avatar', a11yDescription: '', dismissable: false, withIcon: false, withDismissButton: false, }, argTypes: { size: { control: 'select', description: 'Dimensione del chip (`sm` o `lg`).', options: CHIP_SIZES, table: { defaultValue: { summary: 'sm' } }, }, label: { control: 'text', description: \"Testo mostrato all'interno della chip.\", }, href: { control: 'text', description: 'Se valorizzato, la chip sarà un link (elemento `<a>`).', type: 'string', table: { defaultValue: { summary: undefined } }, }, variant: { control: 'select', description: 'Colore della chip, secondo le varianti di Bootstrap Italia.', options: CHIP_VARIANTS, }, dismissable: { control: 'boolean', description: \"Indica che la chip può essere chiusa, ma non inserisce alcun pulsante automaticamente. Il pulsante deve essere inserito nello slot `dismiss-button` dall'utilizzatore, comprensivo di eventuale JavaScript per handling di eventi. Per un esempio completo con Javascript, vedi la story [Chip con chiusura](?path=/story/componenti-chip--chip-con-chiusura).\", table: { defaultValue: { summary: 'false' } }, }, isDisabled: { control: 'boolean', description: 'Disabilita la chip. Utile in contesti non interattivi o di sola lettura.', table: { defaultValue: { summary: 'false' } }, }, avatar: { control: 'text', description: `Percorso a un'immagine da mostrare come avatar, es. [randomuser.me](https://randomuser.me/api/portraits/men/46.jpg).`, table: { defaultValue: { summary: 'https://randomuser.me/api/portraits/men/46.jpg' } }, }, avatarAlt: { control: 'text', description: `Testo alternativo per l'immagine dell'avatar, utile per l'accessibilità.`, table: { defaultValue: { summary: 'Alt avatar' } }, }, a11yDescription: { control: 'text', description: `Testo descrittivo aggiuntivo per la chip, utile per l'accessibilità. Viene inserito come contenuto visivamente nascosto all'inizio della chip, ad esempio per specificare a che contenuto si fa riferimento, o assegnare una dicitur come \"Argomento:\".`, table: { defaultValue: { summary: '' } }, }, withIcon: { control: 'boolean', description: \"Simula la presenza di un'icona nella chip. Non è una proprietà del componente, ma serve per mostrare composizioni nel playground interattivo.\", }, withDismissButton: { control: 'boolean', description: 'Simula la presenza di un pulsante di rimozione nella chip. Non è una proprietà del componente, ma serve per mostrare composizioni nel playground interattivo.', }, }, parameters: { docs: { page: null, }, }, } satisfies Meta< ChipProps & { withIcon?: boolean; withDismissButton?: boolean; } >"
|
|
293
291
|
},
|
|
294
292
|
{
|
|
295
293
|
"kind": "variable",
|
|
@@ -305,7 +303,7 @@
|
|
|
305
303
|
"type": {
|
|
306
304
|
"text": "Story"
|
|
307
305
|
},
|
|
308
|
-
"default": "{ name: 'Personalizzazione degli stili', tags: ['!dev'], parameters: { viewMode: 'docs',
|
|
306
|
+
"default": "{ name: 'Personalizzazione degli stili', tags: ['!dev', '!autodocs'], parameters: { viewMode: 'docs', docs: { canvas: { hidden: true, sourceState: 'none' }, }, }, render: () => html`<div class=\"hide-preview\"></div>`, }"
|
|
309
307
|
},
|
|
310
308
|
{
|
|
311
309
|
"kind": "variable",
|
|
@@ -313,7 +311,7 @@
|
|
|
313
311
|
"type": {
|
|
314
312
|
"text": "Story"
|
|
315
313
|
},
|
|
316
|
-
"default": "{ name: 'Variante con link', args: { size: 'sm', variant:
|
|
314
|
+
"default": "{ name: 'Variante con link', args: { size: 'sm', variant: undefined, href: '#', }, render: () => html` <it-chip label=\"Etichetta\" size=\"sm\" variant=\"\" href=\"#\"></it-chip> `, }"
|
|
317
315
|
},
|
|
318
316
|
{
|
|
319
317
|
"kind": "variable",
|
|
@@ -321,7 +319,7 @@
|
|
|
321
319
|
"type": {
|
|
322
320
|
"text": "Story"
|
|
323
321
|
},
|
|
324
|
-
"default": "{ name: 'Varianti di colore', args: { label: 'Etichetta', size: 'sm', dismissable: false },
|
|
322
|
+
"default": "{ name: 'Varianti di colore', args: { label: 'Etichetta', size: 'sm', dismissable: false }, render: () => html` <div style=\"display: flex; gap: 1rem; flex-wrap: wrap;\"> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"primary\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"secondary\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"success\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"danger\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"warning\"></it-chip> </div> `, }"
|
|
325
323
|
},
|
|
326
324
|
{
|
|
327
325
|
"kind": "variable",
|
|
@@ -329,7 +327,7 @@
|
|
|
329
327
|
"type": {
|
|
330
328
|
"text": "Story"
|
|
331
329
|
},
|
|
332
|
-
"default": "{ name: 'Varianti di colore link', args: { label: 'Etichetta', size: 'sm', dismissable: false },
|
|
330
|
+
"default": "{ name: 'Varianti di colore link', args: { label: 'Etichetta', size: 'sm', dismissable: false }, render: () => html` <div style=\"display: flex; gap: 1rem; flex-wrap: wrap;\"> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"primary\" href=\"#\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"secondary\" href=\"#\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"success\" href=\"#\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"danger\" href=\"#\"></it-chip> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"warning\" href=\"#\"></it-chip> </div> `, }"
|
|
333
331
|
},
|
|
334
332
|
{
|
|
335
333
|
"kind": "variable",
|
|
@@ -337,7 +335,7 @@
|
|
|
337
335
|
"type": {
|
|
338
336
|
"text": "Story"
|
|
339
337
|
},
|
|
340
|
-
"default": "{ name: 'Varianti di dimensione', args: { size: 'sm', variant:
|
|
338
|
+
"default": "{ name: 'Varianti di dimensione', args: { size: 'sm', variant: undefined, dismissable: true, }, render: () => html` <div style=\"display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;\"> <it-chip label=\"Etichetta\" size=\"sm\" variant=\"\" dismissable></it-chip> <it-chip label=\"Etichetta\" size=\"lg\" variant=\"\" dismissable></it-chip> </div> `, }"
|
|
341
339
|
},
|
|
342
340
|
{
|
|
343
341
|
"kind": "variable",
|
|
@@ -345,7 +343,7 @@
|
|
|
345
343
|
"type": {
|
|
346
344
|
"text": "Story"
|
|
347
345
|
},
|
|
348
|
-
"default": "{ name: 'Chip con chiusura', render: () => html` <it-chip label=\"Etichetta\" size=\"sm\" variant=\"primary\" dismissable id=\"chip-dismissable\"> <it-button slot=\"dismiss-button\"
|
|
346
|
+
"default": "{ name: 'Chip con chiusura', render: () => html` <it-chip label=\"Etichetta\" size=\"sm\" variant=\"primary\" dismissable id=\"chip-dismissable\"> <it-button slot=\"dismiss-button\" it-aria-label=\"Elimina etichetta\" it-aria-description=\"Puoi premere per eliminare la chip.\" @click=${(e: Event) => { const chip = (e.currentTarget as HTMLElement).closest('it-chip'); if (chip) chip.remove(); }} @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); const chip = (e.currentTarget as HTMLElement).closest('it-chip'); if (chip) chip.remove(); } }} > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> `, parameters: { docs: { canvas: { sourceState: 'shown', }, source: { code: `<it-chip label=\"Etichetta\" size=\"sm\" variant=\"primary\" dismissable id=\"chip-dismissable\"> <it-button slot=\"dismiss-button\" it-aria-label=\"Elimina etichetta\" it-aria-description=\"Puoi premere per eliminare la chip.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> <script type=\"module\"> const dismissButtons = document.querySelectorAll('it-chip#chip-dismissable [slot=\"dismiss-button\"]'); dismissButtons.forEach((btn) => { const removeChip = (e) => { const chip = btn.closest('it-chip'); if (chip) chip.remove(); }; btn.addEventListener('click', removeChip); btn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); removeChip(e); } }); }); </script> `, language: 'html', }, }, }, }"
|
|
349
347
|
},
|
|
350
348
|
{
|
|
351
349
|
"kind": "variable",
|
|
@@ -353,7 +351,7 @@
|
|
|
353
351
|
"type": {
|
|
354
352
|
"text": "Story"
|
|
355
353
|
},
|
|
356
|
-
"default": "{ name: 'Chip disabilitata', args: { isDisabled: true, },
|
|
354
|
+
"default": "{ name: 'Chip disabilitata', args: { isDisabled: true, }, render: (args) => html` <it-chip label=\"Etichetta\" size=\"sm\" variant=\"${args.variant}\" dismissable ?is-disabled=\"${args.isDisabled}\"> <it-button slot=\"dismiss-button\" it-aria-label=\"Elimina etichetta\" ?disabled=\"${args.isDisabled}\" it-aria-description=\"Questa chip è disabilitata e non può essere rimossa.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> `, }"
|
|
357
355
|
},
|
|
358
356
|
{
|
|
359
357
|
"kind": "variable",
|
|
@@ -361,7 +359,7 @@
|
|
|
361
359
|
"type": {
|
|
362
360
|
"text": "Story"
|
|
363
361
|
},
|
|
364
|
-
"default": "{ name: 'Chip con avatar',
|
|
362
|
+
"default": "{ name: 'Chip con avatar', render: () => html` <div class=\"d-flex gap-2 flex-wrap align-items-center\"> <it-chip label=\"Mario Rossi\" size=\"sm\" variant=\"primary\" avatar=\"https://randomuser.me/api/portraits/men/46.jpg\" avatar-alt=\"Mario Rossi\" dismissable > <it-button slot=\"dismiss-button\" it-aria-label=\"Rimuovi Mario Rossi\" it-aria-description=\"Puoi premere per rimuovere questo utente.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> <it-chip label=\"Anna Verdi\" size=\"lg\" variant=\"secondary\" avatar=\"https://randomuser.me/api/portraits/women/32.jpg\" avatar-alt=\"Anna Verdi\" dismissable > <it-button slot=\"dismiss-button\" it-aria-label=\"Rimuovi Anna Verdi\" it-aria-description=\"Puoi premere per rimuovere questo utente.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> </div> `, }"
|
|
365
363
|
},
|
|
366
364
|
{
|
|
367
365
|
"kind": "variable",
|
|
@@ -369,7 +367,7 @@
|
|
|
369
367
|
"type": {
|
|
370
368
|
"text": "Story"
|
|
371
369
|
},
|
|
372
|
-
"default": "{ name: 'Chip con icona',
|
|
370
|
+
"default": "{ name: 'Chip con icona', render: () => html` <div class=\"d-flex gap-2 flex-wrap align-items-center\"> <it-chip label=\"Download\" size=\"sm\" variant=\"primary\" dismissable> <it-icon slot=\"icon\" name=\"it-download\"></it-icon> <it-button slot=\"dismiss-button\" it-aria-label=\"Rimuovi download\" it-aria-description=\"Puoi premere per rimuovere questa azione.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> <it-chip label=\"Carica file\" size=\"lg\" variant=\"success\" dismissable> <it-icon slot=\"icon\" name=\"it-upload\"></it-icon> <it-button slot=\"dismiss-button\" it-aria-label=\"Rimuovi carica file\" it-aria-description=\"Puoi premere per rimuovere questa azione.\" > <it-icon name=\"it-close\" size=\"sm\"></it-icon> </it-button> </it-chip> <it-chip href=\"#\" label=\"Preferiti\" size=\"sm\" variant=\"warning\"> <it-icon slot=\"icon\" name=\"it-star-full\"></it-icon> </it-chip> </div> `, }"
|
|
373
371
|
}
|
|
374
372
|
],
|
|
375
373
|
"exports": [
|
package/dist/src/it-chip.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"it-chip.d.ts","sourceRoot":"","sources":["../../src/it-chip.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAInD,qBACa,MAAO,SAAQ,aAAa;IACvC,MAAM,CAAC,MAAM,+BAAU;IAEqB,WAAW,UAAS;IAErB,IAAI,EAAE,QAAQ,CAAQ;IAEtB,MAAM,SAAM;IAEa,SAAS,SAAM;IAExC,KAAK,SAAM;IAEX,IAAI,SAAM;IAEqB,eAAe,SAAM;IAEpD,OAAO,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"it-chip.d.ts","sourceRoot":"","sources":["../../src/it-chip.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAInD,qBACa,MAAO,SAAQ,aAAa;IACvC,MAAM,CAAC,MAAM,+BAAU;IAEqB,WAAW,UAAS;IAErB,IAAI,EAAE,QAAQ,CAAQ;IAEtB,MAAM,SAAM;IAEa,SAAS,SAAM;IAExC,KAAK,SAAM;IAEX,IAAI,SAAM;IAEqB,eAAe,SAAM;IAEpD,OAAO,CAAC,EAAE,WAAW,CAAC;IAEK,UAAU,UAAS;IAGzF,WAAW,EAAG,iBAAiB,EAAE,CAAC;IAGlC,IAAI,EAAG,MAAM,EAAE,CAAC;IAEhB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,UAAU;IAaT,OAAO;IAmChB,MAAM;CAyCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
package/dist/src/it-chip.js
CHANGED
|
@@ -114,7 +114,9 @@ function registerTranslation(...translation) {
|
|
|
114
114
|
});
|
|
115
115
|
update();
|
|
116
116
|
}
|
|
117
|
-
window
|
|
117
|
+
if (typeof window !== 'undefined') {
|
|
118
|
+
window.registerTranslation = registerTranslation;
|
|
119
|
+
}
|
|
118
120
|
/**
|
|
119
121
|
* Localize Reactive Controller for components built with Lit
|
|
120
122
|
*
|
|
@@ -437,6 +439,7 @@ const interactions = new WeakMap();
|
|
|
437
439
|
/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
|
|
438
440
|
class FormControlController {
|
|
439
441
|
constructor(host, options) {
|
|
442
|
+
this.submittedOnce = false;
|
|
440
443
|
this.handleFormData = (event) => {
|
|
441
444
|
// console.log('handleFormData');
|
|
442
445
|
const disabled = this.options.disabled(this.host);
|
|
@@ -458,6 +461,27 @@ class FormControlController {
|
|
|
458
461
|
event.formData.append(name, value);
|
|
459
462
|
}
|
|
460
463
|
break;
|
|
464
|
+
case 'it-checkbox':
|
|
465
|
+
case 'it-toggle':
|
|
466
|
+
if (this.host.checked) {
|
|
467
|
+
if (event.formData.getAll(name).indexOf(value) < 0) {
|
|
468
|
+
// handle group checkbox
|
|
469
|
+
event.formData.append(name, value);
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
break;
|
|
473
|
+
case 'it-checkbox-group':
|
|
474
|
+
case 'it-toggle-group':
|
|
475
|
+
// non settare valori in formData, perchè ogni singola checkbox setta il suo valore
|
|
476
|
+
break;
|
|
477
|
+
case 'it-upload':
|
|
478
|
+
// value is File[] — append each File object directly (not as string)
|
|
479
|
+
if (Array.isArray(value)) {
|
|
480
|
+
value.forEach((file) => {
|
|
481
|
+
event.formData.append(name, file);
|
|
482
|
+
});
|
|
483
|
+
}
|
|
484
|
+
break;
|
|
461
485
|
default:
|
|
462
486
|
if (Array.isArray(value)) {
|
|
463
487
|
value.forEach((val) => {
|
|
@@ -479,13 +503,30 @@ class FormControlController {
|
|
|
479
503
|
this.setUserInteracted(control, true);
|
|
480
504
|
});
|
|
481
505
|
}
|
|
482
|
-
|
|
506
|
+
const resReportValidity = reportValidity(this.host);
|
|
507
|
+
if (this.form && !this.form.noValidate && !disabled && !resReportValidity) {
|
|
483
508
|
event.preventDefault();
|
|
484
509
|
// event.stopImmediatePropagation(); // se lo attiviamo, valida un campo alla volta
|
|
510
|
+
// Scroll al primo controllo non valido
|
|
511
|
+
const formControls = formCollections.get(this.form);
|
|
512
|
+
if (formControls) {
|
|
513
|
+
for (const control of formControls) {
|
|
514
|
+
if (!control.validity?.valid) {
|
|
515
|
+
// Scroll smooth verso il controllo non valido
|
|
516
|
+
control.scrollIntoView({
|
|
517
|
+
behavior: 'smooth',
|
|
518
|
+
block: 'center',
|
|
519
|
+
});
|
|
520
|
+
break;
|
|
521
|
+
}
|
|
522
|
+
}
|
|
523
|
+
}
|
|
485
524
|
}
|
|
525
|
+
this.submittedOnce = true;
|
|
486
526
|
};
|
|
487
527
|
this.handleFormReset = () => {
|
|
488
528
|
this.options.setValue(this.host, '');
|
|
529
|
+
this.submittedOnce = false;
|
|
489
530
|
this.setUserInteracted(this.host, false);
|
|
490
531
|
interactions.set(this.host, []);
|
|
491
532
|
};
|
|
@@ -650,6 +691,7 @@ class FormControlController {
|
|
|
650
691
|
if (!formCollection) {
|
|
651
692
|
return;
|
|
652
693
|
}
|
|
694
|
+
this.submittedOnce = false;
|
|
653
695
|
// Remove this host from the form's collection
|
|
654
696
|
formCollection.delete(this.host);
|
|
655
697
|
// Check to make sure there's no other form controls in the collection. If we do this
|
|
@@ -746,6 +788,10 @@ class FormControlController {
|
|
|
746
788
|
host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
|
|
747
789
|
host.toggleAttribute('data-user-valid', isValid && hasInteracted);
|
|
748
790
|
}
|
|
791
|
+
userInteracted() {
|
|
792
|
+
const hasInteracted = Boolean(userInteractedControls.has(this.host));
|
|
793
|
+
return hasInteracted;
|
|
794
|
+
}
|
|
749
795
|
/**
|
|
750
796
|
* Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
|
|
751
797
|
* that affects constraint validation changes so the component receives the correct validity states.
|
|
@@ -782,6 +828,7 @@ const translation = {
|
|
|
782
828
|
$name: 'Italiano',
|
|
783
829
|
$dir: 'ltr',
|
|
784
830
|
validityRequired: 'Questo campo è obbligatorio.',
|
|
831
|
+
validityGroupRequired: "Scegli almeno un'opzione",
|
|
785
832
|
validityPattern: 'Il valore non corrisponde al formato richiesto.',
|
|
786
833
|
validityMinlength: 'Il valore deve essere lungo almeno {minlength} caratteri.',
|
|
787
834
|
validityMaxlength: 'Il valore deve essere lungo al massimo {maxlength} caratteri.',
|
|
@@ -826,24 +873,27 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
826
873
|
this.maxlength = -1;
|
|
827
874
|
/** If the input is required. */
|
|
828
875
|
this.required = false;
|
|
876
|
+
/* For grouped input, like checkbox-group */
|
|
877
|
+
this.isInGroup = false;
|
|
829
878
|
this.validationMessage = '';
|
|
830
879
|
}
|
|
831
880
|
/** Gets the validity state object */
|
|
832
881
|
get validity() {
|
|
833
882
|
return this.inputElement?.validity;
|
|
834
883
|
}
|
|
884
|
+
/** Gets the associated form, if one exists. */
|
|
885
|
+
getForm() {
|
|
886
|
+
return this.formControlController.getForm();
|
|
887
|
+
}
|
|
835
888
|
// Form validation methods
|
|
836
889
|
checkValidity() {
|
|
837
890
|
const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser
|
|
838
891
|
return inputValid;
|
|
839
892
|
}
|
|
840
|
-
/** Gets the associated form, if one exists. */
|
|
841
|
-
getForm() {
|
|
842
|
-
return this.formControlController.getForm();
|
|
843
|
-
}
|
|
844
893
|
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
|
845
894
|
reportValidity() {
|
|
846
|
-
const ret = this.inputElement.checkValidity();
|
|
895
|
+
// const ret = this.inputElement.checkValidity();
|
|
896
|
+
const ret = this.checkValidity(); // chiama la checkValidity, che se è stata overridata chiama quella
|
|
847
897
|
this.handleValidationMessages();
|
|
848
898
|
return ret; // this.inputElement.reportValidity();
|
|
849
899
|
}
|
|
@@ -888,7 +938,8 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
888
938
|
handleValidationMessages() {
|
|
889
939
|
if (!this.customValidation) {
|
|
890
940
|
const _v = this.inputElement.validity;
|
|
891
|
-
|
|
941
|
+
const isRequiredHandledByGroup = this.isInGroup === true;
|
|
942
|
+
if (_v.valueMissing && !isRequiredHandledByGroup) {
|
|
892
943
|
this.setCustomValidity(this.$t('validityRequired'));
|
|
893
944
|
}
|
|
894
945
|
else if (_v.patternMismatch) {
|
|
@@ -959,7 +1010,7 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
959
1010
|
if (this.customValidation) {
|
|
960
1011
|
this.setCustomValidity(this.validationText ?? '');
|
|
961
1012
|
}
|
|
962
|
-
else {
|
|
1013
|
+
else if (this.formControlController.userInteracted()) {
|
|
963
1014
|
this.formControlController.updateValidity();
|
|
964
1015
|
}
|
|
965
1016
|
}
|
|
@@ -1027,11 +1078,23 @@ __decorate([
|
|
|
1027
1078
|
,
|
|
1028
1079
|
__metadata("design:type", Object)
|
|
1029
1080
|
], FormControl.prototype, "required", void 0);
|
|
1081
|
+
__decorate([
|
|
1082
|
+
property({ type: Boolean }),
|
|
1083
|
+
__metadata("design:type", Object)
|
|
1084
|
+
], FormControl.prototype, "isInGroup", void 0);
|
|
1030
1085
|
__decorate([
|
|
1031
1086
|
state(),
|
|
1032
1087
|
__metadata("design:type", Object)
|
|
1033
1088
|
], FormControl.prototype, "validationMessage", void 0);
|
|
1034
1089
|
|
|
1090
|
+
if (typeof window !== 'undefined') {
|
|
1091
|
+
window._itAnalytics = window._itAnalytics || {};
|
|
1092
|
+
window._itAnalytics = {
|
|
1093
|
+
...window._itAnalytics,
|
|
1094
|
+
version: '1.0.0-alpha.10',
|
|
1095
|
+
};
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1035
1098
|
var styles = css`/***************************** 1 ****************************************/
|
|
1036
1099
|
/***************************** 2 ****************************************/
|
|
1037
1100
|
/***************************** 1 ****************************************/
|
|
@@ -1059,43 +1122,44 @@ var styles = css`/***************************** 1 ******************************
|
|
|
1059
1122
|
}
|
|
1060
1123
|
|
|
1061
1124
|
.chip {
|
|
1062
|
-
--
|
|
1063
|
-
--
|
|
1064
|
-
--
|
|
1065
|
-
--
|
|
1066
|
-
--
|
|
1067
|
-
--
|
|
1068
|
-
--
|
|
1069
|
-
--
|
|
1070
|
-
--
|
|
1071
|
-
--
|
|
1072
|
-
--
|
|
1073
|
-
--
|
|
1125
|
+
--bsi-chip-background-color: var(--bsi-color-background-muted);
|
|
1126
|
+
--bsi-chip-border-color: var(--bsi-color-border-subtle);
|
|
1127
|
+
--bsi-chip-border-radius: var(--bsi-radius-rounded);
|
|
1128
|
+
--bsi-chip-border-width: 1px;
|
|
1129
|
+
--bsi-chip-icon-color: var(--bsi-icon-secondary);
|
|
1130
|
+
--bsi-chip-link-hover: var(--bsi-color-text-inverse);
|
|
1131
|
+
--bsi-chip-padding-x: var(--bsi-spacing-xs);
|
|
1132
|
+
--bsi-chip-padding-y: var(--bsi-spacing-3xs);
|
|
1133
|
+
--bsi-chip-text-color: var(--bsi-color-text-secondary);
|
|
1134
|
+
--bsi-chip-text-line-height: var(--bsi-label-leading);
|
|
1135
|
+
--bsi-chip-text-size: var(--bsi-label-font-size);
|
|
1136
|
+
--bsi-chip-text-weight: var(--bsi-font-weight-solid);
|
|
1074
1137
|
}
|
|
1075
1138
|
|
|
1139
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
1076
1140
|
.chip {
|
|
1077
1141
|
display: inline-flex;
|
|
1078
1142
|
align-items: center;
|
|
1079
1143
|
justify-content: space-evenly;
|
|
1080
|
-
padding: var(--
|
|
1081
|
-
border: var(--
|
|
1082
|
-
border-radius: var(--
|
|
1083
|
-
background-color: var(--
|
|
1084
|
-
color: var(--
|
|
1085
|
-
gap: var(--
|
|
1144
|
+
padding: var(--bsi-chip-padding-y) var(--bsi-chip-padding-x);
|
|
1145
|
+
border: var(--bsi-chip-border-width) solid var(--bsi-chip-border-color);
|
|
1146
|
+
border-radius: var(--bsi-chip-border-radius);
|
|
1147
|
+
background-color: var(--bsi-chip-background-color);
|
|
1148
|
+
color: var(--bsi-chip-text-color);
|
|
1149
|
+
gap: var(--bsi-spacing-xxs);
|
|
1086
1150
|
}
|
|
1087
1151
|
.chip + .chip {
|
|
1088
|
-
margin-left: var(--
|
|
1152
|
+
margin-left: var(--bsi-spacing-s);
|
|
1089
1153
|
}
|
|
1090
1154
|
.chip:hover {
|
|
1091
1155
|
cursor: text;
|
|
1092
|
-
color: var(--
|
|
1156
|
+
color: var(--bsi-chip-text-color);
|
|
1093
1157
|
}
|
|
1094
1158
|
.chip .chip-label {
|
|
1095
1159
|
margin-bottom: 0;
|
|
1096
|
-
font-size: var(--
|
|
1097
|
-
font-weight: var(--
|
|
1098
|
-
line-height: var(--
|
|
1160
|
+
font-size: var(--bsi-chip-text-size);
|
|
1161
|
+
font-weight: var(--bsi-chip-text-weight);
|
|
1162
|
+
line-height: var(--bsi-chip-text-line-height);
|
|
1099
1163
|
text-decoration: none;
|
|
1100
1164
|
}
|
|
1101
1165
|
.chip button {
|
|
@@ -1111,47 +1175,47 @@ var styles = css`/***************************** 1 ******************************
|
|
|
1111
1175
|
cursor: not-allowed;
|
|
1112
1176
|
}
|
|
1113
1177
|
.chip button .icon {
|
|
1114
|
-
fill: var(--
|
|
1178
|
+
fill: var(--bsi-chip-icon-color);
|
|
1115
1179
|
}
|
|
1116
1180
|
.chip button .icon:hover {
|
|
1117
|
-
fill: var(--
|
|
1181
|
+
fill: var(--bsi-icon-primary);
|
|
1118
1182
|
}
|
|
1119
1183
|
.chip > .icon {
|
|
1120
|
-
fill: var(--
|
|
1184
|
+
fill: var(--bsi-chip-icon-color);
|
|
1121
1185
|
}
|
|
1122
1186
|
.chip .avatar ~ span {
|
|
1123
1187
|
margin-left: 0;
|
|
1124
1188
|
}
|
|
1125
1189
|
.chip-lg {
|
|
1126
|
-
--
|
|
1127
|
-
--
|
|
1190
|
+
--bsi-chip-padding-x: var(--bsi-spacing-s);
|
|
1191
|
+
--bsi-chip-text-size: var(--bsi-label-font-size-l);
|
|
1128
1192
|
}
|
|
1129
1193
|
.chip-primary, .chip-secondary, .chip-success, .chip-danger, .chip-warning {
|
|
1130
|
-
--
|
|
1194
|
+
--bsi-chip-background-color: transparent;
|
|
1131
1195
|
}
|
|
1132
1196
|
.chip.chip-primary {
|
|
1133
|
-
--
|
|
1134
|
-
--
|
|
1197
|
+
--bsi-chip-text-color: var(--bsi-color-text-primary);
|
|
1198
|
+
--bsi-chip-border-color: var(--bsi-color-border-primary);
|
|
1135
1199
|
}
|
|
1136
1200
|
.chip.chip-secondary {
|
|
1137
|
-
--
|
|
1138
|
-
--
|
|
1201
|
+
--bsi-chip-text-color: var(--bsi-color-text-secondary);
|
|
1202
|
+
--bsi-chip-border-color: var(--bsi-color-border-secondary);
|
|
1139
1203
|
}
|
|
1140
1204
|
.chip.chip-success {
|
|
1141
|
-
--
|
|
1142
|
-
--
|
|
1205
|
+
--bsi-chip-text-color: var(--bsi-color-text-success);
|
|
1206
|
+
--bsi-chip-border-color: var(--bsi-color-border-success);
|
|
1143
1207
|
}
|
|
1144
1208
|
.chip.chip-danger {
|
|
1145
|
-
--
|
|
1146
|
-
--
|
|
1209
|
+
--bsi-chip-text-color: var(--bsi-color-text-danger);
|
|
1210
|
+
--bsi-chip-border-color: var(--bsi-color-border-danger);
|
|
1147
1211
|
}
|
|
1148
1212
|
.chip.chip-warning {
|
|
1149
|
-
--
|
|
1150
|
-
--
|
|
1213
|
+
--bsi-chip-text-color: var(--bsi-color-text-warning);
|
|
1214
|
+
--bsi-chip-border-color: var(--bsi-color-border-warning);
|
|
1151
1215
|
}
|
|
1152
1216
|
.chip.chip-disabled {
|
|
1153
|
-
--
|
|
1154
|
-
--
|
|
1217
|
+
--bsi-chip-background-color: var(--bsi-color-background-disabled);
|
|
1218
|
+
--bsi-chip-text-color: var(--bsi-color-text-disabled);
|
|
1155
1219
|
}
|
|
1156
1220
|
.chip.chip-disabled:hover {
|
|
1157
1221
|
cursor: not-allowed;
|
|
@@ -1160,10 +1224,10 @@ var styles = css`/***************************** 1 ******************************
|
|
|
1160
1224
|
cursor: not-allowed;
|
|
1161
1225
|
}
|
|
1162
1226
|
.chip.chip-disabled button .icon {
|
|
1163
|
-
fill: var(--
|
|
1227
|
+
fill: var(--bsi-icon-disabled);
|
|
1164
1228
|
}
|
|
1165
1229
|
.chip.chip-disabled > .icon {
|
|
1166
|
-
fill: var(--
|
|
1230
|
+
fill: var(--bsi-icon-disabled);
|
|
1167
1231
|
}
|
|
1168
1232
|
.chip.chip-disabled .avatar img {
|
|
1169
1233
|
filter: grayscale(100%);
|
|
@@ -1174,37 +1238,37 @@ a.chip:not(.chip-disabled) {
|
|
|
1174
1238
|
}
|
|
1175
1239
|
|
|
1176
1240
|
a.chip:hover:not(.chip-disabled) {
|
|
1177
|
-
--
|
|
1178
|
-
--
|
|
1179
|
-
--
|
|
1180
|
-
transition: all var(--
|
|
1241
|
+
--bsi-chip-background-color: var(--bsi-color-background-secondary-hover);
|
|
1242
|
+
--bsi-chip-border-color: var(--bsi-color-background-secondary-hover);
|
|
1243
|
+
--bsi-chip-text-color: var(--bsi-chip-link-hover);
|
|
1244
|
+
transition: all var(--bsi-transition-instant) ease-in-out;
|
|
1181
1245
|
cursor: pointer;
|
|
1182
1246
|
}
|
|
1183
1247
|
a.chip:hover:not(.chip-disabled) button .icon, a.chip:hover:not(.chip-disabled) > .icon {
|
|
1184
|
-
fill: var(--
|
|
1248
|
+
fill: var(--bsi-icon-inverse);
|
|
1185
1249
|
}
|
|
1186
1250
|
a.chip:hover:not(.chip-disabled).chip-primary > .chip-label, a.chip:hover:not(.chip-disabled).chip-secondary > .chip-label, a.chip:hover:not(.chip-disabled).chip-success > .chip-label, a.chip:hover:not(.chip-disabled).chip-danger > .chip-label, a.chip:hover:not(.chip-disabled).chip-warning > .chip-label {
|
|
1187
|
-
color: var(--
|
|
1251
|
+
color: var(--bsi-color-text-inverse);
|
|
1188
1252
|
}
|
|
1189
1253
|
a.chip:hover:not(.chip-disabled).chip-primary {
|
|
1190
|
-
--
|
|
1191
|
-
--
|
|
1254
|
+
--bsi-chip-background-color: var(--bsi-color-background-primary-hover);
|
|
1255
|
+
--bsi-chip-border-color: var(--bsi-color-border-primary-hover);
|
|
1192
1256
|
}
|
|
1193
1257
|
a.chip:hover:not(.chip-disabled).chip-secondary {
|
|
1194
|
-
--
|
|
1195
|
-
--
|
|
1258
|
+
--bsi-chip-background-color: var(--bsi-color-background-secondary-hover);
|
|
1259
|
+
--bsi-chip-border-color: var(--bsi-color-border-secondary-hover);
|
|
1196
1260
|
}
|
|
1197
1261
|
a.chip:hover:not(.chip-disabled).chip-success {
|
|
1198
|
-
--
|
|
1199
|
-
--
|
|
1262
|
+
--bsi-chip-background-color: var(--bsi-color-background-success-hover);
|
|
1263
|
+
--bsi-chip-border-color: var(--bsi-color-border-success-hover);
|
|
1200
1264
|
}
|
|
1201
1265
|
a.chip:hover:not(.chip-disabled).chip-danger {
|
|
1202
|
-
--
|
|
1203
|
-
--
|
|
1266
|
+
--bsi-chip-background-color: var(--bsi-color-background-danger-hover);
|
|
1267
|
+
--bsi-chip-border-color: var(--bsi-color-border-danger-hover);
|
|
1204
1268
|
}
|
|
1205
1269
|
a.chip:hover:not(.chip-disabled).chip-warning {
|
|
1206
|
-
--
|
|
1207
|
-
--
|
|
1270
|
+
--bsi-chip-background-color: var(--bsi-color-background-warning-hover);
|
|
1271
|
+
--bsi-chip-border-color: var(--bsi-color-border-warning-hover);
|
|
1208
1272
|
}
|
|
1209
1273
|
|
|
1210
1274
|
::slotted(it-icon) {
|
|
@@ -1212,16 +1276,16 @@ a.chip:hover:not(.chip-disabled).chip-warning {
|
|
|
1212
1276
|
}
|
|
1213
1277
|
|
|
1214
1278
|
:host([is-disabled]) ::slotted(it-icon) {
|
|
1215
|
-
--
|
|
1216
|
-
--
|
|
1217
|
-
--
|
|
1218
|
-
--
|
|
1219
|
-
--
|
|
1220
|
-
--
|
|
1279
|
+
--bsi-icon-primary: var(--bsi-icon-disabled);
|
|
1280
|
+
--bsi-icon-secondary: var(--bsi-icon-disabled);
|
|
1281
|
+
--bsi-icon-success: var(--bsi-icon-disabled);
|
|
1282
|
+
--bsi-icon-danger: var(--bsi-icon-disabled);
|
|
1283
|
+
--bsi-icon-warning: var(--bsi-icon-disabled);
|
|
1284
|
+
--bsi-icon-default: var(--bsi-icon-disabled);
|
|
1221
1285
|
}
|
|
1222
1286
|
|
|
1223
1287
|
:host ::slotted(it-icon) {
|
|
1224
|
-
--
|
|
1288
|
+
--bsi-icon-default: var(--bsi-chip-icon-color);
|
|
1225
1289
|
}
|
|
1226
1290
|
|
|
1227
1291
|
:host([is-disabled]) ::slotted(it-button) {
|
|
@@ -1230,13 +1294,13 @@ a.chip:hover:not(.chip-disabled).chip-warning {
|
|
|
1230
1294
|
|
|
1231
1295
|
/* Hover on the chip */
|
|
1232
1296
|
:host a:hover ::slotted(it-icon) {
|
|
1233
|
-
--
|
|
1234
|
-
--
|
|
1235
|
-
--
|
|
1236
|
-
--
|
|
1237
|
-
--
|
|
1238
|
-
--
|
|
1239
|
-
--
|
|
1297
|
+
--bsi-icon-primary: var(--bsi-chip-text-color);
|
|
1298
|
+
--bsi-icon-secondary: var(--bsi-chip-text-color);
|
|
1299
|
+
--bsi-icon-success: var(--bsi-chip-text-color);
|
|
1300
|
+
--bsi-icon-danger: var(--bsi-chip-text-color);
|
|
1301
|
+
--bsi-icon-warning: var(--bsi-chip-text-color);
|
|
1302
|
+
--bsi-icon-default: var(--bsi-chip-text-color);
|
|
1303
|
+
--bsi-chip-icon-color: var(--bsi-chip-text-color);
|
|
1240
1304
|
}`;
|
|
1241
1305
|
|
|
1242
1306
|
let ItChip = class ItChip extends BaseComponent {
|
|
@@ -1249,7 +1313,6 @@ let ItChip = class ItChip extends BaseComponent {
|
|
|
1249
1313
|
this.label = '';
|
|
1250
1314
|
this.href = '';
|
|
1251
1315
|
this.a11yDescription = '';
|
|
1252
|
-
this.variant = '';
|
|
1253
1316
|
this.isDisabled = false;
|
|
1254
1317
|
}
|
|
1255
1318
|
getAvatarSize() {
|
|
@@ -1265,7 +1328,7 @@ let ItChip = class ItChip extends BaseComponent {
|
|
|
1265
1328
|
else {
|
|
1266
1329
|
icon.size = 'xs';
|
|
1267
1330
|
}
|
|
1268
|
-
icon.color = this.variant
|
|
1331
|
+
icon.color = this.variant;
|
|
1269
1332
|
}
|
|
1270
1333
|
}
|
|
1271
1334
|
updated() {
|