@italia/radio 1.0.0-alpha.4 → 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/custom-elements.json +14 -46
- package/dist/src/index.js +1 -1
- package/dist/src/it-radio-group.d.ts +6 -6
- package/dist/src/it-radio-group.d.ts.map +1 -1
- package/dist/src/it-radio-group.js +123 -119
- package/dist/src/it-radio-group.js.map +1 -1
- package/dist/src/it-radio.d.ts +2 -1
- package/dist/src/it-radio.d.ts.map +1 -1
- package/dist/src/it-radio.js +138 -133
- package/dist/src/it-radio.js.map +1 -1
- package/package.json +10 -8
package/custom-elements.json
CHANGED
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
"type": {
|
|
121
121
|
"text": "ItRadio[]"
|
|
122
122
|
},
|
|
123
|
-
"privacy": "
|
|
123
|
+
"privacy": "protected",
|
|
124
124
|
"description": "Get all slotted radio buttons"
|
|
125
125
|
},
|
|
126
126
|
{
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
{
|
|
135
135
|
"kind": "field",
|
|
136
136
|
"name": "rovingTabindex",
|
|
137
|
-
"privacy": "
|
|
137
|
+
"privacy": "protected",
|
|
138
138
|
"default": "new RovingTabindexController<ItRadio>(this, { getItems: () => this._radios, onSelect: (radio, event) => this.selectRadio(radio, event), direction: 'both', selectOnFocus: true, })",
|
|
139
139
|
"description": "Roving tabindex controller for keyboard navigation"
|
|
140
140
|
},
|
|
@@ -266,7 +266,7 @@
|
|
|
266
266
|
{
|
|
267
267
|
"kind": "method",
|
|
268
268
|
"name": "_updateRadiosState",
|
|
269
|
-
"privacy": "
|
|
269
|
+
"privacy": "protected",
|
|
270
270
|
"description": "Synchronize radio button states with group state"
|
|
271
271
|
},
|
|
272
272
|
{
|
|
@@ -278,13 +278,13 @@
|
|
|
278
278
|
{
|
|
279
279
|
"kind": "field",
|
|
280
280
|
"name": "_handleSlotChange",
|
|
281
|
-
"privacy": "
|
|
281
|
+
"privacy": "protected",
|
|
282
282
|
"description": "Handle slot changes (when radios are added/removed)"
|
|
283
283
|
},
|
|
284
284
|
{
|
|
285
285
|
"kind": "field",
|
|
286
286
|
"name": "_handleLabelSlotChange",
|
|
287
|
-
"privacy": "
|
|
287
|
+
"privacy": "protected"
|
|
288
288
|
}
|
|
289
289
|
],
|
|
290
290
|
"events": [
|
|
@@ -588,8 +588,8 @@
|
|
|
588
588
|
{
|
|
589
589
|
"kind": "method",
|
|
590
590
|
"name": "_renderInput",
|
|
591
|
-
"privacy": "
|
|
592
|
-
"description": "Render internal structure (like Spectrum)\nJust visual elements, no role/aria/events here (they're on the host)"
|
|
591
|
+
"privacy": "protected",
|
|
592
|
+
"description": "Render internal structure (like Spectrum)\nJust visual elements, no role/aria/events here (they're on the host)\nProtected to allow subclasses (like it-rating-item) to override"
|
|
593
593
|
}
|
|
594
594
|
],
|
|
595
595
|
"attributes": [
|
|
@@ -664,7 +664,7 @@
|
|
|
664
664
|
{
|
|
665
665
|
"kind": "variable",
|
|
666
666
|
"name": "meta",
|
|
667
|
-
"default": "{ title: 'Componenti/Form/Radio', tags: ['
|
|
667
|
+
"default": "{ title: 'Componenti/Form/Radio', tags: ['alpha', 'a11y-ok', 'web-component'], component: 'it-radio-group', args: { id: '', name: 'gruppo1', // @ts-ignore these are docs disabled: false, supportText: '', grouped: false, inline: false, form: '', customValidation: false, validityMessage: '', required: false, }, argTypes: { id: { control: 'text', description: 'ID del campo', }, name: { control: 'text', description: 'Nome del campo. I radio dello stesso gruppo devono avere lo stesso name.', }, grouped: { control: 'boolean', type: 'boolean', description: 'Se il radio-group deve avere i suoi elementi raggruppati visivamente', table: { defaultValue: { summary: 'false' } }, }, // @ts-ignore these are docs disabled: { control: 'boolean', type: 'boolean', description: \"Se il gruppo di radio è disabilitato. Per l'omonimo attributo del componente it-radio, vedi la sezione dedicata\", table: { defaultValue: { summary: 'false' } }, }, inline: { control: 'boolean', type: 'boolean', description: 'Se il radio-group deve avere i suoi elementi visualizzati in linea', table: { defaultValue: { summary: 'false' } }, }, supportText: { name: 'support-text', control: 'text', description: 'Testo di supporto per un singolo componente it-radio', }, form: { control: 'text', description: \"ID html del form a cui è associato il componente it-radio-group, se non si trova all'interno di una form \", }, customValidation: { name: 'custom-validation', control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, description: 'Se la validazione del radio group è fatta esternamente (lato server o con plugin js - validazione custom), impostare questo attributo a `true`.', }, validityMessage: { name: 'validity-message', control: 'text', description: \"Messaggio da mostrare quando il radio group è invalido nel caso di validazione esterna (validazione custom). Se impostato a '' (stringa vuota) il campo viene considerato valido.\", }, required: { control: 'boolean', type: 'boolean', description: 'Se il radio group è obbligatorio', table: { defaultValue: { summary: 'false' } }, }, }, } satisfies Meta<RadioProps>"
|
|
668
668
|
},
|
|
669
669
|
{
|
|
670
670
|
"kind": "variable",
|
|
@@ -674,29 +674,13 @@
|
|
|
674
674
|
},
|
|
675
675
|
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, decorators: [(Story) => html` <div style=\"min-width:450px\">${Story()}</div>`], render: (params) => html` <it-radio-group name=\"${params.name}\" ?inline=\"${params.inline}\" ?grouped=\"${params.grouped}\" .form=\"${params.form}\" ?required=\"${params.required}\" ?custom-validation=\"${params.customValidation}\" validity-message=\"${ifDefined(params.validityMessage || undefined)}\" > <span slot=\"label\">Esempio interattivo</span> ${renderComponent({ ...params, id: 'radio1', label: 'Radio di esempio 1', value: 'opzione1', })} ${renderComponent({ ...params, id: 'radio2', label: 'Radio di esempio 2', value: 'opzione2', })} ${renderComponent({ ...params, id: 'radio3', label: 'Radio di esempio 3', value: 'opzione3', })} </it-radio-group> </div> `, }"
|
|
676
676
|
},
|
|
677
|
-
{
|
|
678
|
-
"kind": "variable",
|
|
679
|
-
"name": "PersonalizzazioneDegliStili",
|
|
680
|
-
"type": {
|
|
681
|
-
"text": "Story"
|
|
682
|
-
},
|
|
683
|
-
"default": "{ name: 'Personalizzazione degli stili', tags: ['!dev'], parameters: { viewMode: 'docs', docs: { canvas: { hidden: true, sourceState: 'none' }, description: { story: ` Per la personalizzazione degli stili del componente \\`<it-radio>\\` si può usare il selettore \\`::part\\` con i seguenti valori: | Part | Descrizione | |------|-------------| | \\`input\\` | Il contenitore dell'input nascosto | | \\`button\\` | Il cerchio del radio button visibile | | \\`input-wrapper\\` | Il wrapper principale che contiene il radio control e il testo di supporto | | \\`radio-control\\` | Il contenitore che racchiude il button e la label | | \\`label\\` | L'etichetta del radio button | [Vedi qui la guida dettagliata](/docs/personalizzazione-degli-stili--documentazione#selettore-part). Esempio di personalizzazione: \\`\\`\\`css it-radio::part(button) { border-color: #0066cc; } it-radio::part(label) { font-weight: bold; color: #333; } \\`\\`\\` `, }, }, }, render: () => html`<div class=\"hide-preview\"></div>`, }"
|
|
684
|
-
},
|
|
685
|
-
{
|
|
686
|
-
"kind": "variable",
|
|
687
|
-
"name": "ComeUsareItRadio",
|
|
688
|
-
"type": {
|
|
689
|
-
"text": "Story"
|
|
690
|
-
},
|
|
691
|
-
"default": "{ ...meta, name: 'Utilizzo', tags: ['!dev'], parameters: { viewMode: 'docs', docs: { canvas: { hidden: true, sourceState: 'none' }, description: { story: ` Il componente \\`<it-radio>\\` deve essere sempre utilizzato all'interno di un \\`<it-radio-group>\\` e richiede obbligatoriamente: - Un **attributo \\`value\\`** univoco per identificare l'opzione - Una **etichetta definita tramite slot** \\`<span slot=\"label\">Testo dell'etichetta</span>\\` #### Proprietà principali | Proprietà | Tipo | Descrizione | |-----------|------|-------------| | \\`value\\` | \\`string\\` | Valore univoco del radio button (obbligatorio) | | \\`disabled\\` | \\`boolean\\` | Se \\`true\\`, disabilita il singolo radio button | | \\`support-text\\` | \\`string\\` | Testo di supporto visualizzato sotto l'etichetta (obbligatorio) | `, }, }, }, render: () => html`<div class=\"hide-preview\"></div>`, }"
|
|
692
|
-
},
|
|
693
677
|
{
|
|
694
678
|
"kind": "variable",
|
|
695
679
|
"name": "DefinizioneDellaLabel",
|
|
696
680
|
"type": {
|
|
697
681
|
"text": "Story"
|
|
698
682
|
},
|
|
699
|
-
"default": "{ ...meta, name: \"Definizione dell'etichetta\",
|
|
683
|
+
"default": "{ ...meta, name: \"Definizione dell'etichetta\", render: (params) => html` <it-radio-group name=\"gruppo-label\"> <span slot=\"label\">Gruppo con label formattate</span> ${renderComponent({ ...params, id: 'radio-label1', label: 'Etichetta semplice', value: 'opzione1', })} <it-radio id=\"radio-label2\" value=\"opzione2\"> <span slot=\"label\"><strong>Etichetta</strong> con <em>formattazione</em></span> </it-radio> <it-radio id=\"radio-label3\" value=\"opzione3\"> <span slot=\"label\">Etichetta semplice</span> </it-radio> </it-radio-group> `, }"
|
|
700
684
|
},
|
|
701
685
|
{
|
|
702
686
|
"kind": "variable",
|
|
@@ -704,7 +688,7 @@
|
|
|
704
688
|
"type": {
|
|
705
689
|
"text": "Story"
|
|
706
690
|
},
|
|
707
|
-
"default": "{ ...meta, name: 'Testo di supporto',
|
|
691
|
+
"default": "{ ...meta, name: 'Testo di supporto', render: (params) => html` <it-radio-group name=\"gruppo-support\"> <span slot=\"label\">Esempio con testo di supporto</span> ${renderComponent({ ...params, id: 'radio-support1', label: 'Radio con testo di supporto', value: 'opzione1', supportText: 'Questo è un testo di supporto per il radio button', })} ${renderComponent({ ...params, id: 'radio-support2', label: 'Altro radio', value: 'opzione2', })} </it-radio-group> `, }"
|
|
708
692
|
},
|
|
709
693
|
{
|
|
710
694
|
"kind": "variable",
|
|
@@ -712,7 +696,7 @@
|
|
|
712
696
|
"type": {
|
|
713
697
|
"text": "Story"
|
|
714
698
|
},
|
|
715
|
-
"default": "{ ...meta,
|
|
699
|
+
"default": "{ ...meta, render: (params) => html` <it-radio-group name=\"gruppo-inline\" inline> <span slot=\"label\">Esempio inline</span> ${renderComponent({ ...params, id: 'radio-inline1', label: 'Radio inline 1', name: 'gruppo-inline', value: 'opzione1', checked: true, })} ${renderComponent({ ...params, id: 'radio-inline2', label: 'Radio inline 2', name: 'gruppo-inline', value: 'opzione2', })} ${renderComponent({ ...params, id: 'radio-inline3', label: 'Radio inline 3', name: 'gruppo-inline', value: 'opzione3', })} </it-radio-group> `, }"
|
|
716
700
|
},
|
|
717
701
|
{
|
|
718
702
|
"kind": "variable",
|
|
@@ -720,7 +704,7 @@
|
|
|
720
704
|
"type": {
|
|
721
705
|
"text": "Story"
|
|
722
706
|
},
|
|
723
|
-
"default": "{ ...meta, name: 'Stato disabilitato',
|
|
707
|
+
"default": "{ ...meta, name: 'Stato disabilitato', render: (params) => html` <div class=\"row\"> <div class=\"col-12 col-md-6\"> <it-radio-group name=\"gruppo-alcuni-disabled\" value=\"opzione1\"> <span slot=\"label\">Esempio con alcuni disabilitati</span> ${renderComponent({ ...params, id: 'radio-disabled1', label: 'Radio selezionato e disabilitato', value: 'opzione1', disabled: true, })} ${renderComponent({ ...params, id: 'radio-disabled2', label: 'Radio disabilitato', name: 'gruppo-disabled', value: 'opzione2', disabled: true, })} ${renderComponent({ ...params, id: 'radio-disabled3', label: 'Radio abilitato', name: 'gruppo-disabled', value: 'opzione3', })} </it-radio-group> </div> <div class=\"col-12 col-md-6\"> <it-radio-group name=\"gruppo-tutti-disabled\" value=\"opzione2\" disabled> <span slot=\"label\">Esempio con tutti disabilitati</span> ${renderComponent({ ...params, id: 'radio-disabled4', label: 'Radio selezionato e disabilitato', value: 'opzione1', })} ${renderComponent({ ...params, id: 'radio-disabled5', label: 'Radio disabilitato', value: 'opzione2', })} ${renderComponent({ ...params, id: 'radio-disabled6', label: 'Radio abilitato', value: 'opzione3', })} </it-radio-group> </div> </div> </div> `, }"
|
|
724
708
|
},
|
|
725
709
|
{
|
|
726
710
|
"kind": "variable",
|
|
@@ -728,7 +712,7 @@
|
|
|
728
712
|
"type": {
|
|
729
713
|
"text": "Story"
|
|
730
714
|
},
|
|
731
|
-
"default": "{ ...meta, name: 'Raggruppati visivamente',
|
|
715
|
+
"default": "{ ...meta, name: 'Raggruppati visivamente', render: (params) => html` <div> <div class=\"row\"> <div class=\"col-12 col-md-6\"> <it-radio-group name=\"gruppo-visual\" grouped> <span slot=\"label\">Esempio grouped senza testo di supporto</span> ${renderComponent({ ...params, id: 'radio-group1', label: 'Opzione 1', name: 'gruppo-visual', value: 'opzione1', checked: true, })} ${renderComponent({ ...params, id: 'radio-group2', label: 'Opzione 2', name: 'gruppo-visual', value: 'opzione2', })} ${renderComponent({ ...params, id: 'radio-group3', label: 'Opzione 3', name: 'gruppo-visual', value: 'opzione3', })} </it-radio-group> </div> <div class=\"col-12 col-md-6\"> <it-radio-group name=\"gruppo-visual2\" grouped> <span slot=\"label\">Esempio grouped con testo di supporto</span> ${renderComponent({ ...params, id: 'radio-group4', label: 'Opzione 1', supportText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero', name: 'gruppo-visual2', value: 'opzione1', checked: true, })} ${renderComponent({ ...params, id: 'radio-group5', label: 'Opzione 2', supportText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero', name: 'gruppo-visual2', value: 'opzione2', })} ${renderComponent({ ...params, id: 'radio-group6', label: 'Opzione 3', supportText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero', name: 'gruppo-visual2', value: 'opzione3', })} </it-radio-group> </div> </div> </div> `, }"
|
|
732
716
|
},
|
|
733
717
|
{
|
|
734
718
|
"kind": "variable",
|
|
@@ -736,7 +720,7 @@
|
|
|
736
720
|
"type": {
|
|
737
721
|
"text": "Story"
|
|
738
722
|
},
|
|
739
|
-
"default": "{ name: 'Validazione e gestione degli errori',
|
|
723
|
+
"default": "{ name: 'Validazione e gestione degli errori', render: () => html` <form id=\"demo-form\"> <it-radio-group name=\"scelta\" required> <span slot=\"label\">Esempio con validazione</span> <it-radio value=\"si\"> <span slot=\"label\">Sì, accetto</span> </it-radio> <it-radio value=\"no\"> <span slot=\"label\">No, non accetto</span> </it-radio> <it-radio value=\"forse\"> <span slot=\"label\">Forse</span> </it-radio> </it-radio-group> <it-button type=\"submit\" class=\"mt-3\" variant=\"primary\">Invia</it-button> <p class=\"form-text mt-2\">Prova a inviare il form senza selezionare nulla per vedere la validazione.</p> </form> `, }"
|
|
740
724
|
},
|
|
741
725
|
{
|
|
742
726
|
"kind": "variable",
|
|
@@ -764,22 +748,6 @@
|
|
|
764
748
|
"module": "stories/it-radio.stories.ts"
|
|
765
749
|
}
|
|
766
750
|
},
|
|
767
|
-
{
|
|
768
|
-
"kind": "js",
|
|
769
|
-
"name": "PersonalizzazioneDegliStili",
|
|
770
|
-
"declaration": {
|
|
771
|
-
"name": "PersonalizzazioneDegliStili",
|
|
772
|
-
"module": "stories/it-radio.stories.ts"
|
|
773
|
-
}
|
|
774
|
-
},
|
|
775
|
-
{
|
|
776
|
-
"kind": "js",
|
|
777
|
-
"name": "ComeUsareItRadio",
|
|
778
|
-
"declaration": {
|
|
779
|
-
"name": "ComeUsareItRadio",
|
|
780
|
-
"module": "stories/it-radio.stories.ts"
|
|
781
|
-
}
|
|
782
|
-
},
|
|
783
751
|
{
|
|
784
752
|
"kind": "js",
|
|
785
753
|
"name": "DefinizioneDellaLabel",
|
package/dist/src/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PropertyValues } from 'lit';
|
|
2
|
-
import { FormControl } from '@italia/globals';
|
|
2
|
+
import { FormControl, RovingTabindexController } from '@italia/globals';
|
|
3
3
|
import type { ItRadio } from '@italia/radio';
|
|
4
4
|
/**
|
|
5
5
|
* Radio group component - manages a collection of radio buttons
|
|
@@ -38,12 +38,12 @@ export declare class ItRadioGroup extends FormControl {
|
|
|
38
38
|
/**
|
|
39
39
|
* Get all slotted radio buttons
|
|
40
40
|
*/
|
|
41
|
-
|
|
41
|
+
protected _radios: ItRadio[];
|
|
42
42
|
private _label;
|
|
43
43
|
/**
|
|
44
44
|
* Roving tabindex controller for keyboard navigation
|
|
45
45
|
*/
|
|
46
|
-
|
|
46
|
+
protected rovingTabindex: RovingTabindexController<ItRadio>;
|
|
47
47
|
/**
|
|
48
48
|
* Form control integration
|
|
49
49
|
*/
|
|
@@ -87,7 +87,7 @@ export declare class ItRadioGroup extends FormControl {
|
|
|
87
87
|
/**
|
|
88
88
|
* Synchronize radio button states with group state
|
|
89
89
|
*/
|
|
90
|
-
|
|
90
|
+
protected _updateRadiosState(): void;
|
|
91
91
|
/**
|
|
92
92
|
* Sync group state (name, grouped, inline, required) to child radios
|
|
93
93
|
* This replaces the need for requestUpdate() calls
|
|
@@ -97,8 +97,8 @@ export declare class ItRadioGroup extends FormControl {
|
|
|
97
97
|
/**
|
|
98
98
|
* Handle slot changes (when radios are added/removed)
|
|
99
99
|
*/
|
|
100
|
-
|
|
101
|
-
|
|
100
|
+
protected _handleSlotChange: () => void;
|
|
101
|
+
protected _handleLabelSlotChange: () => void;
|
|
102
102
|
/**
|
|
103
103
|
* Render the component
|
|
104
104
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"it-radio-group.d.ts","sourceRoot":"","sources":["../../src/it-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"it-radio-group.d.ts","sourceRoot":"","sources":["../../src/it-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAyB,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAC/F,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG7C;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,+BAAU;IAEvB,MAAM,CAAC,cAAc,UAAQ;IAE7B;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,SAAS,CAAC,OAAO,EAAG,OAAO,EAAE,CAAC;IAG9B,OAAO,CAAC,MAAM,CAAiB;IAE/B;;OAEG;IACH,SAAS,CAAC,cAAc,oCAKrB;IAEH;;OAEG;IACH,OAAO,CAAC,eAAe,CAOpB;IAEH;;OAEG;IACH,IAAa,QAAQ,IAAI,aAAa,CAgBrC;IAED;;OAEG;IACM,aAAa,IAAI,OAAO;IAOjC;;OAEG;IACM,cAAc,IAAI,OAAO;IAOlC,kFAAkF;IAClE,iBAAiB,CAAC,OAAO,EAAE,MAAM;cAU9B,wBAAwB;IAS3C,OAAO,CAAC,mBAAmB;IAkB3B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IA4ChC,iBAAiB;IAMjB,YAAY;YAQE,YAAY;IAc1B,oBAAoB;IAIpB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAa5B;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,GAAG,YAAY,GAAG,UAAU,GAAG,IAAI;IAuCnF;;OAEG;IACH,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI;IAO9D;;OAEG;IACH,SAAS,CAAC,kBAAkB;IAwC5B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,OAAO,EAAE,cAAc;IA2B/B;;OAEG;IACH,SAAS,CAAC,iBAAiB,aAKzB;IAEF,SAAS,CAAC,sBAAsB,aAI9B;IAEF;;OAEG;IACH,MAAM;CAkBP;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
|