@italia/chip 0.1.0-alpha.2 → 1.0.0-alpha.5
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 +12 -14
- 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 +134 -83
- 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",
|
|
@@ -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",
|
|
@@ -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\" icon 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', },
|
|
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\" icon 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\" icon 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\" icon 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\" icon 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\" icon 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\" icon 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\" icon 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
|
@@ -437,6 +437,7 @@ const interactions = new WeakMap();
|
|
|
437
437
|
/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
|
|
438
438
|
class FormControlController {
|
|
439
439
|
constructor(host, options) {
|
|
440
|
+
this.submittedOnce = false;
|
|
440
441
|
this.handleFormData = (event) => {
|
|
441
442
|
// console.log('handleFormData');
|
|
442
443
|
const disabled = this.options.disabled(this.host);
|
|
@@ -458,6 +459,17 @@ class FormControlController {
|
|
|
458
459
|
event.formData.append(name, value);
|
|
459
460
|
}
|
|
460
461
|
break;
|
|
462
|
+
case 'it-checkbox':
|
|
463
|
+
if (this.host.checked) {
|
|
464
|
+
if (event.formData.getAll(name).indexOf(value) < 0) {
|
|
465
|
+
// handle group checkbox
|
|
466
|
+
event.formData.append(name, value);
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
break;
|
|
470
|
+
case 'it-checkbox-group':
|
|
471
|
+
// non settare valori in formData, perchè ogni singola checkbox setta il suo valore
|
|
472
|
+
break;
|
|
461
473
|
default:
|
|
462
474
|
if (Array.isArray(value)) {
|
|
463
475
|
value.forEach((val) => {
|
|
@@ -479,13 +491,30 @@ class FormControlController {
|
|
|
479
491
|
this.setUserInteracted(control, true);
|
|
480
492
|
});
|
|
481
493
|
}
|
|
482
|
-
|
|
494
|
+
const resReportValidity = reportValidity(this.host);
|
|
495
|
+
if (this.form && !this.form.noValidate && !disabled && !resReportValidity) {
|
|
483
496
|
event.preventDefault();
|
|
484
497
|
// event.stopImmediatePropagation(); // se lo attiviamo, valida un campo alla volta
|
|
498
|
+
// Scroll al primo controllo non valido
|
|
499
|
+
const formControls = formCollections.get(this.form);
|
|
500
|
+
if (formControls) {
|
|
501
|
+
for (const control of formControls) {
|
|
502
|
+
if (!control.validity?.valid) {
|
|
503
|
+
// Scroll smooth verso il controllo non valido
|
|
504
|
+
control.scrollIntoView({
|
|
505
|
+
behavior: 'smooth',
|
|
506
|
+
block: 'center',
|
|
507
|
+
});
|
|
508
|
+
break;
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
}
|
|
485
512
|
}
|
|
513
|
+
this.submittedOnce = true;
|
|
486
514
|
};
|
|
487
515
|
this.handleFormReset = () => {
|
|
488
516
|
this.options.setValue(this.host, '');
|
|
517
|
+
this.submittedOnce = false;
|
|
489
518
|
this.setUserInteracted(this.host, false);
|
|
490
519
|
interactions.set(this.host, []);
|
|
491
520
|
};
|
|
@@ -650,6 +679,7 @@ class FormControlController {
|
|
|
650
679
|
if (!formCollection) {
|
|
651
680
|
return;
|
|
652
681
|
}
|
|
682
|
+
this.submittedOnce = false;
|
|
653
683
|
// Remove this host from the form's collection
|
|
654
684
|
formCollection.delete(this.host);
|
|
655
685
|
// Check to make sure there's no other form controls in the collection. If we do this
|
|
@@ -746,6 +776,10 @@ class FormControlController {
|
|
|
746
776
|
host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
|
|
747
777
|
host.toggleAttribute('data-user-valid', isValid && hasInteracted);
|
|
748
778
|
}
|
|
779
|
+
userInteracted() {
|
|
780
|
+
const hasInteracted = Boolean(userInteractedControls.has(this.host));
|
|
781
|
+
return hasInteracted;
|
|
782
|
+
}
|
|
749
783
|
/**
|
|
750
784
|
* Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
|
|
751
785
|
* that affects constraint validation changes so the component receives the correct validity states.
|
|
@@ -782,6 +816,7 @@ const translation = {
|
|
|
782
816
|
$name: 'Italiano',
|
|
783
817
|
$dir: 'ltr',
|
|
784
818
|
validityRequired: 'Questo campo è obbligatorio.',
|
|
819
|
+
validityGroupRequired: "Scegli almeno un'opzione",
|
|
785
820
|
validityPattern: 'Il valore non corrisponde al formato richiesto.',
|
|
786
821
|
validityMinlength: 'Il valore deve essere lungo almeno {minlength} caratteri.',
|
|
787
822
|
validityMaxlength: 'Il valore deve essere lungo al massimo {maxlength} caratteri.',
|
|
@@ -826,24 +861,27 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
826
861
|
this.maxlength = -1;
|
|
827
862
|
/** If the input is required. */
|
|
828
863
|
this.required = false;
|
|
864
|
+
/* For grouped input, like checkbox-group */
|
|
865
|
+
this.isInGroup = false;
|
|
829
866
|
this.validationMessage = '';
|
|
830
867
|
}
|
|
831
868
|
/** Gets the validity state object */
|
|
832
869
|
get validity() {
|
|
833
870
|
return this.inputElement?.validity;
|
|
834
871
|
}
|
|
872
|
+
/** Gets the associated form, if one exists. */
|
|
873
|
+
getForm() {
|
|
874
|
+
return this.formControlController.getForm();
|
|
875
|
+
}
|
|
835
876
|
// Form validation methods
|
|
836
877
|
checkValidity() {
|
|
837
878
|
const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser
|
|
838
879
|
return inputValid;
|
|
839
880
|
}
|
|
840
|
-
/** Gets the associated form, if one exists. */
|
|
841
|
-
getForm() {
|
|
842
|
-
return this.formControlController.getForm();
|
|
843
|
-
}
|
|
844
881
|
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
|
845
882
|
reportValidity() {
|
|
846
|
-
const ret = this.inputElement.checkValidity();
|
|
883
|
+
// const ret = this.inputElement.checkValidity();
|
|
884
|
+
const ret = this.checkValidity(); // chiama la checkValidity, che se è stata overridata chiama quella
|
|
847
885
|
this.handleValidationMessages();
|
|
848
886
|
return ret; // this.inputElement.reportValidity();
|
|
849
887
|
}
|
|
@@ -888,7 +926,8 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
888
926
|
handleValidationMessages() {
|
|
889
927
|
if (!this.customValidation) {
|
|
890
928
|
const _v = this.inputElement.validity;
|
|
891
|
-
|
|
929
|
+
const isRequiredHandledByGroup = this.isInGroup === true;
|
|
930
|
+
if (_v.valueMissing && !isRequiredHandledByGroup) {
|
|
892
931
|
this.setCustomValidity(this.$t('validityRequired'));
|
|
893
932
|
}
|
|
894
933
|
else if (_v.patternMismatch) {
|
|
@@ -959,7 +998,7 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
959
998
|
if (this.customValidation) {
|
|
960
999
|
this.setCustomValidity(this.validationText ?? '');
|
|
961
1000
|
}
|
|
962
|
-
else {
|
|
1001
|
+
else if (this.formControlController.userInteracted()) {
|
|
963
1002
|
this.formControlController.updateValidity();
|
|
964
1003
|
}
|
|
965
1004
|
}
|
|
@@ -1027,11 +1066,23 @@ __decorate([
|
|
|
1027
1066
|
,
|
|
1028
1067
|
__metadata("design:type", Object)
|
|
1029
1068
|
], FormControl.prototype, "required", void 0);
|
|
1069
|
+
__decorate([
|
|
1070
|
+
property({ type: Boolean }),
|
|
1071
|
+
__metadata("design:type", Object)
|
|
1072
|
+
], FormControl.prototype, "isInGroup", void 0);
|
|
1030
1073
|
__decorate([
|
|
1031
1074
|
state(),
|
|
1032
1075
|
__metadata("design:type", Object)
|
|
1033
1076
|
], FormControl.prototype, "validationMessage", void 0);
|
|
1034
1077
|
|
|
1078
|
+
if (typeof window !== 'undefined') {
|
|
1079
|
+
window._itAnalytics = window._itAnalytics || {};
|
|
1080
|
+
window._itAnalytics = {
|
|
1081
|
+
...window._itAnalytics,
|
|
1082
|
+
version: '1.0.0-alpha.5',
|
|
1083
|
+
};
|
|
1084
|
+
}
|
|
1085
|
+
|
|
1035
1086
|
var styles = css`/***************************** 1 ****************************************/
|
|
1036
1087
|
/***************************** 2 ****************************************/
|
|
1037
1088
|
/***************************** 1 ****************************************/
|
|
@@ -1059,43 +1110,44 @@ var styles = css`/***************************** 1 ******************************
|
|
|
1059
1110
|
}
|
|
1060
1111
|
|
|
1061
1112
|
.chip {
|
|
1062
|
-
--
|
|
1063
|
-
--
|
|
1064
|
-
--
|
|
1065
|
-
--
|
|
1066
|
-
--
|
|
1067
|
-
--
|
|
1068
|
-
--
|
|
1069
|
-
--
|
|
1070
|
-
--
|
|
1071
|
-
--
|
|
1072
|
-
--
|
|
1073
|
-
--
|
|
1113
|
+
--bsi-chip-background-color: var(--bsi-color-background-muted);
|
|
1114
|
+
--bsi-chip-border-color: var(--bsi-color-border-subtle);
|
|
1115
|
+
--bsi-chip-border-radius: var(--bsi-radius-rounded);
|
|
1116
|
+
--bsi-chip-border-width: 1px;
|
|
1117
|
+
--bsi-chip-icon-color: var(--bsi-icon-secondary);
|
|
1118
|
+
--bsi-chip-link-hover: var(--bsi-color-text-inverse);
|
|
1119
|
+
--bsi-chip-padding-x: var(--bsi-spacing-xs);
|
|
1120
|
+
--bsi-chip-padding-y: var(--bsi-spacing-3xs);
|
|
1121
|
+
--bsi-chip-text-color: var(--bsi-color-text-secondary);
|
|
1122
|
+
--bsi-chip-text-line-height: var(--bsi-label-line-height);
|
|
1123
|
+
--bsi-chip-text-size: var(--bsi-label-font-size);
|
|
1124
|
+
--bsi-chip-text-weight: var(--bsi-font-weight-solid);
|
|
1074
1125
|
}
|
|
1075
1126
|
|
|
1127
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
1076
1128
|
.chip {
|
|
1077
1129
|
display: inline-flex;
|
|
1078
1130
|
align-items: center;
|
|
1079
1131
|
justify-content: space-evenly;
|
|
1080
|
-
padding: var(--
|
|
1081
|
-
border: var(--
|
|
1082
|
-
border-radius: var(--
|
|
1083
|
-
background-color: var(--
|
|
1084
|
-
color: var(--
|
|
1085
|
-
gap: var(--
|
|
1132
|
+
padding: var(--bsi-chip-padding-y) var(--bsi-chip-padding-x);
|
|
1133
|
+
border: var(--bsi-chip-border-width) solid var(--bsi-chip-border-color);
|
|
1134
|
+
border-radius: var(--bsi-chip-border-radius);
|
|
1135
|
+
background-color: var(--bsi-chip-background-color);
|
|
1136
|
+
color: var(--bsi-chip-text-color);
|
|
1137
|
+
gap: var(--bsi-spacing-xxs);
|
|
1086
1138
|
}
|
|
1087
1139
|
.chip + .chip {
|
|
1088
|
-
margin-left: var(--
|
|
1140
|
+
margin-left: var(--bsi-spacing-s);
|
|
1089
1141
|
}
|
|
1090
1142
|
.chip:hover {
|
|
1091
1143
|
cursor: text;
|
|
1092
|
-
color: var(--
|
|
1144
|
+
color: var(--bsi-chip-text-color);
|
|
1093
1145
|
}
|
|
1094
1146
|
.chip .chip-label {
|
|
1095
1147
|
margin-bottom: 0;
|
|
1096
|
-
font-size: var(--
|
|
1097
|
-
font-weight: var(--
|
|
1098
|
-
line-height: var(--
|
|
1148
|
+
font-size: var(--bsi-chip-text-size);
|
|
1149
|
+
font-weight: var(--bsi-chip-text-weight);
|
|
1150
|
+
line-height: var(--bsi-chip-text-line-height);
|
|
1099
1151
|
text-decoration: none;
|
|
1100
1152
|
}
|
|
1101
1153
|
.chip button {
|
|
@@ -1111,47 +1163,47 @@ var styles = css`/***************************** 1 ******************************
|
|
|
1111
1163
|
cursor: not-allowed;
|
|
1112
1164
|
}
|
|
1113
1165
|
.chip button .icon {
|
|
1114
|
-
fill: var(--
|
|
1166
|
+
fill: var(--bsi-chip-icon-color);
|
|
1115
1167
|
}
|
|
1116
1168
|
.chip button .icon:hover {
|
|
1117
|
-
fill: var(--
|
|
1169
|
+
fill: var(--bsi-icon-primary);
|
|
1118
1170
|
}
|
|
1119
1171
|
.chip > .icon {
|
|
1120
|
-
fill: var(--
|
|
1172
|
+
fill: var(--bsi-chip-icon-color);
|
|
1121
1173
|
}
|
|
1122
1174
|
.chip .avatar ~ span {
|
|
1123
1175
|
margin-left: 0;
|
|
1124
1176
|
}
|
|
1125
1177
|
.chip-lg {
|
|
1126
|
-
--
|
|
1127
|
-
--
|
|
1178
|
+
--bsi-chip-padding-x: var(--bsi-spacing-s);
|
|
1179
|
+
--bsi-chip-text-size: var(--bsi-label-font-size-l);
|
|
1128
1180
|
}
|
|
1129
1181
|
.chip-primary, .chip-secondary, .chip-success, .chip-danger, .chip-warning {
|
|
1130
|
-
--
|
|
1182
|
+
--bsi-chip-background-color: transparent;
|
|
1131
1183
|
}
|
|
1132
1184
|
.chip.chip-primary {
|
|
1133
|
-
--
|
|
1134
|
-
--
|
|
1185
|
+
--bsi-chip-text-color: var(--bsi-color-text-primary);
|
|
1186
|
+
--bsi-chip-border-color: var(--bsi-color-border-primary);
|
|
1135
1187
|
}
|
|
1136
1188
|
.chip.chip-secondary {
|
|
1137
|
-
--
|
|
1138
|
-
--
|
|
1189
|
+
--bsi-chip-text-color: var(--bsi-color-text-secondary);
|
|
1190
|
+
--bsi-chip-border-color: var(--bsi-color-border-secondary);
|
|
1139
1191
|
}
|
|
1140
1192
|
.chip.chip-success {
|
|
1141
|
-
--
|
|
1142
|
-
--
|
|
1193
|
+
--bsi-chip-text-color: var(--bsi-color-text-success);
|
|
1194
|
+
--bsi-chip-border-color: var(--bsi-color-border-success);
|
|
1143
1195
|
}
|
|
1144
1196
|
.chip.chip-danger {
|
|
1145
|
-
--
|
|
1146
|
-
--
|
|
1197
|
+
--bsi-chip-text-color: var(--bsi-color-text-danger);
|
|
1198
|
+
--bsi-chip-border-color: var(--bsi-color-border-danger);
|
|
1147
1199
|
}
|
|
1148
1200
|
.chip.chip-warning {
|
|
1149
|
-
--
|
|
1150
|
-
--
|
|
1201
|
+
--bsi-chip-text-color: var(--bsi-color-text-warning);
|
|
1202
|
+
--bsi-chip-border-color: var(--bsi-color-border-warning);
|
|
1151
1203
|
}
|
|
1152
1204
|
.chip.chip-disabled {
|
|
1153
|
-
--
|
|
1154
|
-
--
|
|
1205
|
+
--bsi-chip-background-color: var(--bsi-color-background-disabled);
|
|
1206
|
+
--bsi-chip-text-color: var(--bsi-color-text-disabled);
|
|
1155
1207
|
}
|
|
1156
1208
|
.chip.chip-disabled:hover {
|
|
1157
1209
|
cursor: not-allowed;
|
|
@@ -1160,10 +1212,10 @@ var styles = css`/***************************** 1 ******************************
|
|
|
1160
1212
|
cursor: not-allowed;
|
|
1161
1213
|
}
|
|
1162
1214
|
.chip.chip-disabled button .icon {
|
|
1163
|
-
fill: var(--
|
|
1215
|
+
fill: var(--bsi-icon-disabled);
|
|
1164
1216
|
}
|
|
1165
1217
|
.chip.chip-disabled > .icon {
|
|
1166
|
-
fill: var(--
|
|
1218
|
+
fill: var(--bsi-icon-disabled);
|
|
1167
1219
|
}
|
|
1168
1220
|
.chip.chip-disabled .avatar img {
|
|
1169
1221
|
filter: grayscale(100%);
|
|
@@ -1174,37 +1226,37 @@ a.chip:not(.chip-disabled) {
|
|
|
1174
1226
|
}
|
|
1175
1227
|
|
|
1176
1228
|
a.chip:hover:not(.chip-disabled) {
|
|
1177
|
-
--
|
|
1178
|
-
--
|
|
1179
|
-
--
|
|
1180
|
-
transition: all var(--
|
|
1229
|
+
--bsi-chip-background-color: var(--bsi-color-background-secondary-hover);
|
|
1230
|
+
--bsi-chip-border-color: var(--bsi-color-background-secondary-hover);
|
|
1231
|
+
--bsi-chip-text-color: var(--bsi-chip-link-hover);
|
|
1232
|
+
transition: all var(--bsi-transition-instant) ease-in-out;
|
|
1181
1233
|
cursor: pointer;
|
|
1182
1234
|
}
|
|
1183
1235
|
a.chip:hover:not(.chip-disabled) button .icon, a.chip:hover:not(.chip-disabled) > .icon {
|
|
1184
|
-
fill: var(--
|
|
1236
|
+
fill: var(--bsi-icon-inverse);
|
|
1185
1237
|
}
|
|
1186
1238
|
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(--
|
|
1239
|
+
color: var(--bsi-color-text-inverse);
|
|
1188
1240
|
}
|
|
1189
1241
|
a.chip:hover:not(.chip-disabled).chip-primary {
|
|
1190
|
-
--
|
|
1191
|
-
--
|
|
1242
|
+
--bsi-chip-background-color: var(--bsi-color-background-primary-hover);
|
|
1243
|
+
--bsi-chip-border-color: var(--bsi-color-border-primary-hover);
|
|
1192
1244
|
}
|
|
1193
1245
|
a.chip:hover:not(.chip-disabled).chip-secondary {
|
|
1194
|
-
--
|
|
1195
|
-
--
|
|
1246
|
+
--bsi-chip-background-color: var(--bsi-color-background-secondary-hover);
|
|
1247
|
+
--bsi-chip-border-color: var(--bsi-color-border-secondary-hover);
|
|
1196
1248
|
}
|
|
1197
1249
|
a.chip:hover:not(.chip-disabled).chip-success {
|
|
1198
|
-
--
|
|
1199
|
-
--
|
|
1250
|
+
--bsi-chip-background-color: var(--bsi-color-background-success-hover);
|
|
1251
|
+
--bsi-chip-border-color: var(--bsi-color-border-success-hover);
|
|
1200
1252
|
}
|
|
1201
1253
|
a.chip:hover:not(.chip-disabled).chip-danger {
|
|
1202
|
-
--
|
|
1203
|
-
--
|
|
1254
|
+
--bsi-chip-background-color: var(--bsi-color-background-danger-hover);
|
|
1255
|
+
--bsi-chip-border-color: var(--bsi-color-border-danger-hover);
|
|
1204
1256
|
}
|
|
1205
1257
|
a.chip:hover:not(.chip-disabled).chip-warning {
|
|
1206
|
-
--
|
|
1207
|
-
--
|
|
1258
|
+
--bsi-chip-background-color: var(--bsi-color-background-warning-hover);
|
|
1259
|
+
--bsi-chip-border-color: var(--bsi-color-border-warning-hover);
|
|
1208
1260
|
}
|
|
1209
1261
|
|
|
1210
1262
|
::slotted(it-icon) {
|
|
@@ -1212,16 +1264,16 @@ a.chip:hover:not(.chip-disabled).chip-warning {
|
|
|
1212
1264
|
}
|
|
1213
1265
|
|
|
1214
1266
|
:host([is-disabled]) ::slotted(it-icon) {
|
|
1215
|
-
--
|
|
1216
|
-
--
|
|
1217
|
-
--
|
|
1218
|
-
--
|
|
1219
|
-
--
|
|
1220
|
-
--
|
|
1267
|
+
--bsi-icon-primary: var(--bsi-icon-disabled);
|
|
1268
|
+
--bsi-icon-secondary: var(--bsi-icon-disabled);
|
|
1269
|
+
--bsi-icon-success: var(--bsi-icon-disabled);
|
|
1270
|
+
--bsi-icon-danger: var(--bsi-icon-disabled);
|
|
1271
|
+
--bsi-icon-warning: var(--bsi-icon-disabled);
|
|
1272
|
+
--bsi-icon-default: var(--bsi-icon-disabled);
|
|
1221
1273
|
}
|
|
1222
1274
|
|
|
1223
1275
|
:host ::slotted(it-icon) {
|
|
1224
|
-
--
|
|
1276
|
+
--bsi-icon-default: var(--bsi-chip-icon-color);
|
|
1225
1277
|
}
|
|
1226
1278
|
|
|
1227
1279
|
:host([is-disabled]) ::slotted(it-button) {
|
|
@@ -1230,13 +1282,13 @@ a.chip:hover:not(.chip-disabled).chip-warning {
|
|
|
1230
1282
|
|
|
1231
1283
|
/* Hover on the chip */
|
|
1232
1284
|
:host a:hover ::slotted(it-icon) {
|
|
1233
|
-
--
|
|
1234
|
-
--
|
|
1235
|
-
--
|
|
1236
|
-
--
|
|
1237
|
-
--
|
|
1238
|
-
--
|
|
1239
|
-
--
|
|
1285
|
+
--bsi-icon-primary: var(--bsi-chip-text-color);
|
|
1286
|
+
--bsi-icon-secondary: var(--bsi-chip-text-color);
|
|
1287
|
+
--bsi-icon-success: var(--bsi-chip-text-color);
|
|
1288
|
+
--bsi-icon-danger: var(--bsi-chip-text-color);
|
|
1289
|
+
--bsi-icon-warning: var(--bsi-chip-text-color);
|
|
1290
|
+
--bsi-icon-default: var(--bsi-chip-text-color);
|
|
1291
|
+
--bsi-chip-icon-color: var(--bsi-chip-text-color);
|
|
1240
1292
|
}`;
|
|
1241
1293
|
|
|
1242
1294
|
let ItChip = class ItChip extends BaseComponent {
|
|
@@ -1249,7 +1301,6 @@ let ItChip = class ItChip extends BaseComponent {
|
|
|
1249
1301
|
this.label = '';
|
|
1250
1302
|
this.href = '';
|
|
1251
1303
|
this.a11yDescription = '';
|
|
1252
|
-
this.variant = '';
|
|
1253
1304
|
this.isDisabled = false;
|
|
1254
1305
|
}
|
|
1255
1306
|
getAvatarSize() {
|
|
@@ -1265,7 +1316,7 @@ let ItChip = class ItChip extends BaseComponent {
|
|
|
1265
1316
|
else {
|
|
1266
1317
|
icon.size = 'xs';
|
|
1267
1318
|
}
|
|
1268
|
-
icon.color = this.variant
|
|
1319
|
+
icon.color = this.variant;
|
|
1269
1320
|
}
|
|
1270
1321
|
}
|
|
1271
1322
|
updated() {
|