@italia/checkbox 1.0.0-alpha.4

package/custom-elements.json

@@ -0,0 +1,687 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItCheckbox",
+          "declaration": {
+            "name": "ItCheckbox",
+            "module": "./it-checkbox.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ItCheckboxGroup",
+          "declaration": {
+            "name": "ItCheckboxGroup",
+            "module": "./it-checkbox-group.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/it-checkbox-group.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ItCheckboxGroup",
+          "members": [
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws checkboxes inline, side by side.",
+              "attribute": "inline",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "group",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws checkboxes in groups.",
+              "attribute": "group",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checkboxes",
+              "type": {
+                "text": "ItCheckbox[]"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_label",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "type": {
+                "text": "FormControlController"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FormControlController(this, { // Il valore è un array dei valori delle checkbox selezionate value: (control: FormControl) => (control as ItCheckboxGroup).checkboxes.filter((cb) => cb.checked).map((cb) => cb.value || 'true'), // Il name è quello del gruppo name: (control: FormControl) => (control as ItCheckboxGroup).name, // La validità è gestita da noi con checkValidity di gruppo checkValidity: (control: FormControl) => (control as ItCheckboxGroup).checkValidity(), reportValidity: (control: FormControl) => (control as ItCheckboxGroup).reportValidity(), // Non implementiamo setValue qui, gestito dalle singole checkbox setValue: () => {}, // Ascoltiamo l'input su tutti i cambi di stato delle checkbox assumeInteractionOn: ['it-change'], })"
+            },
+            {
+              "kind": "field",
+              "name": "_groupValid",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "selectedValues",
+              "type": {
+                "text": "string[]"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "has",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "v",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "description": "Override: Custom validity check for radio group",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_handleGroupChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Override di checkValidity per la logica di gruppo."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Override di reportValidity per mostrare l'errore a livello di gruppo."
+            },
+            {
+              "kind": "method",
+              "name": "handleValidationMessages",
+              "privacy": "protected",
+              "description": "Il tuo FormControl ha già un handleValidationMessages che\nsetta this.validationMessage. Aggiorniamolo per la logica di gruppo."
+            },
+            {
+              "kind": "method",
+              "name": "_syncGroupStateToChildren",
+              "privacy": "private",
+              "description": "Sync group state (name, grouped, inline, required, disabled, checked) to child checkboxes\nThis replaces the need for requestUpdate() calls"
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "required"
+            },
+            {
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws checkboxes inline, side by side.",
+              "fieldName": "inline"
+            },
+            {
+              "name": "group",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws checkboxes in groups.",
+              "fieldName": "group"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "name"
+            }
+          ],
+          "superclass": {
+            "name": "FormControl",
+            "package": "@italia/globals"
+          },
+          "tagName": "it-checkbox-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItCheckboxGroup",
+          "declaration": {
+            "name": "ItCheckboxGroup",
+            "module": "src/it-checkbox-group.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "it-checkbox-group",
+          "declaration": {
+            "name": "ItCheckboxGroup",
+            "module": "src/it-checkbox-group.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/it-checkbox.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ItCheckbox",
+          "members": [
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "type": {
+                "text": "FormControlController"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FormControlController(this, { value: (control: FormControl) => (control as ItCheckbox).checked ? (control as ItCheckbox).value || 'true' : undefined, setValue: (control: FormControl, value: unknown) => { const checkbox = control as ItCheckbox; checkbox.checked = Boolean(value); }, })"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "string"
+              },
+              "default": "'checkbox'",
+              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`."
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in a checked state.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws checkboxes inline, side by side.",
+              "attribute": "inline",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "group",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws checkboxes in groups.",
+              "attribute": "group",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "attribute": "indeterminate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "labelElements",
+              "type": {
+                "text": "HTMLElement[]"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "supportText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input's help text.",
+              "attribute": "support-text"
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Simulates a click on the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_renderInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "supportTextId",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "invalid",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "validityMessage",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in a checked state.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws checkboxes inline, side by side.",
+              "fieldName": "inline"
+            },
+            {
+              "name": "group",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws checkboxes in groups.",
+              "fieldName": "group"
+            },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "fieldName": "indeterminate"
+            },
+            {
+              "name": "support-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input's help text.",
+              "fieldName": "supportText"
+            }
+          ],
+          "superclass": {
+            "name": "FormControl",
+            "package": "@italia/globals"
+          },
+          "tagName": "it-checkbox",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItCheckbox",
+          "declaration": {
+            "name": "ItCheckbox",
+            "module": "src/it-checkbox.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "it-checkbox",
+          "declaration": {
+            "name": "ItCheckbox",
+            "module": "src/it-checkbox.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "stories/it-checkbox.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "default": "{ title: 'Componenti/Form/Checkbox', tags: ['new', 'a11y-ok', 'web-component'], component: 'it-checkbox', args: { id: '', label: 'Checkbox di esempio', name: 'esempio', value: undefined, checked: false, indeterminate: false, disabled: false, form: undefined, customValidation: false, validityMessage: '', required: false, inline: false, group: false, supportText: '', }, argTypes: { id: { control: 'text', description: 'ID del campo', type: 'string', }, label: { control: 'text', description: 'Etichetta del campo', type: 'string', }, name: { control: 'text', type: 'string', }, value: { control: 'text', description: 'Valore del campo', type: 'string', }, checked: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, indeterminate: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, disabled: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, form: { control: 'text', type: 'string', description: \"ID html del form a cui è associato il campo, se il campo non si trova all'interno di una form \", }, customValidation: { name: 'custom-validation', control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, description: 'Se la validazione del campo è fatta esternamente (lato server o con plugin js - validazione custom), impostare questo attributo a `true`.', }, validityMessage: { name: 'validity-message', control: 'text', type: 'string', description: \"Messaggio da mostrare quando il campo è invalido nel caso di validazione esterna (validazione custom). Se impostato a '' (stringa vuota) il campo viene considerato valido.\", }, required: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, inline: { control: 'boolean', type: 'boolean', description: 'Se si vogliono mostrare più checkbox affiancate orizzontalmente', table: { defaultValue: { summary: 'false' } }, }, group: { control: 'boolean', type: 'boolean', description: 'Se si vogliono mostrare più checkbox raggruppate visivamente', table: { defaultValue: { summary: 'false' } }, }, supportText: { name: 'support-text', control: 'text', description: 'Testo di supporto', type: 'string', }, }, } satisfies Meta<CheckboxProps>"
+        },
+        {
+          "kind": "variable",
+          "name": "EsempioInterattivo",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Esempio interattivo', tags: ['!dev'], parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, render: (params) => html`${renderComponent({ ...params, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Disabilitato",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, // name: 'Disabilitato', args: { disabled: true }, render: (params) => html` <it-checkbox-group name=${params.name} ?required=${params.required} ?disabled=${params.disabled}> <span slot=\"legend\">Gruppo di checkbox</span> ${renderComponent({ ...params, required: undefined, disabled: undefined, label: 'Checkbox non selezionato', className: 'mb-2', })} ${renderComponent({ ...params, required: undefined, disabled: undefined, label: 'Checkbox selezionato', checked: true, })} </it-checkbox-group> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Indeterminate",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Indeterminato (mixed)', args: { indeterminate: true }, render: (params) => html` ${renderComponent({ ...params, label: 'Checkbox indeterminato', })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Inline",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, // name: 'Inline', args: { inline: true }, argTypes: { ...Object.fromEntries( Object.entries(meta.argTypes).map(([key, value]) => key !== 'inline' ? [key, { ...value, table: { ...value.table, disable: true } }] : [key, { ...value }], ), ), }, render: (params) => html` <it-checkbox-group name=${params.name} ?required=${params.required} ?group=${params.group} ?inline=${params.inline}> <span slot=\"legend\">Gruppo di checkbox</span> ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, label: 'Checkbox non selezionato', })} ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, label: 'Checkbox selezionato', checked: true, })} </it-checkbox-group> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Group",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Gruppo di checkbox', args: { group: true }, render: (params) => html` <div class=\"row\"> <it-checkbox-group name=${params.name} ?required=${params.required} ?group=${params.group} ?inline=${params.inline} ?disabled=${params.disabled} class=\"col-12 col-md-6\" > <span slot=\"legend\">Gruppo di checkbox</span> ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, label: 'Checkbox selezionato', checked: true, })} ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, label: 'Checkbox non selezionato', })} ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, disabled: true, label: 'Checkbox disabilitato non selezionato', })} </it-checkbox-group> <it-checkbox-group name=${params.name} ?required=${params.required} ?group=${params.group} ?inline=${params.inline} ?disabled=${Group.disabled} class=\"col-12 col-md-6\" > <span slot=\"legend\">Gruppo di checkbox</span> ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, label: 'Checkbox selezionato', checked: true, supportText: \"Testo descrittivo di supporto per l'opzione selezionabile\", })} ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, label: 'Checkbox non selezionato', supportText: \"Testo descrittivo di supporto per l'opzione selezionabile\", })} ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, disabled: true, label: 'Checkbox disabilitato non selezionato', supportText: \"Testo descrittivo di supporto per l'opzione selezionabile\", })} </it-checkbox-group> </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "GroupInitValue",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Valore iniziale del gruppo', args: { group: true, name: 'checkboxgroup' }, render: (params) => html` <it-checkbox-group name=${params.name} ?required=${params.required} ?group=${params.group} ?inline=${params.inline} ?disabled=${params.disabled} value='[\"opt_1\",\"opt_3\"]' > <span slot=\"legend\">Gruppo di checkbox</span> ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, disabled: undefined, label: 'Opzione numero 1', value: 'opt_1', })} ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, disabled: undefined, label: 'Opzione numero 2', value: 'opt_2', })} ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, disabled: undefined, label: 'Opzione numero 3', value: 'opt_3', })} </it-checkbox-group> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "SupportText",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Testo di supporto', args: { supportText: \"Testo descrittivo di supporto per l'opzione selezionabile\" }, render: (params) => html` ${renderComponent({ ...params, label: 'Checkbox con testo di supporto selezionato', })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "ValidazioneNativa",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Validazione nativa', args: { required: true }, render: (params) => html` <form> <div class=\"row mb-4\"> <div class=\"col-md-6 d-flex align-items-center\"> ${renderComponent({ ...params, label: 'Checkbox singola obbligatoria', name: 'single-required-example', id: 'single-required-example', })} </div> <div class=\"col-md-6\"> <it-checkbox-group name=\"multiple-required-example\" ?required=${params.required} ?group=${params.group} ?inline=${params.inline} ?disabled=${params.disabled} > <span slot=\"legend\">Gruppo di checkbox obbligatorio</span> ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, disabled: undefined, label: 'Valore 1', value: 'valore_1', })} ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, disabled: undefined, label: 'Valore 2', value: 'valore_2', })} ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, disabled: undefined, label: 'Valore 3', value: 'valore_3', })} </it-checkbox-group> </div> </div> <div class=\"text-center\"> <it-button type=\"submit\" variant=\"primary\">Invia</it-button> </div> </form> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "ValidazioneCustom",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Validazione custom', args: { customValidation: true, validityMessage: 'Questo campo è obbligatorio!!!' }, render: (params) => html` <div class=\"row\"> <div class=\"col-md-6 d-flex align-items-center\"> ${renderComponent({ ...params, required: undefined, label: 'Checkbox singola obbligatoria', name: 'external-validation-single-example', id: 'external-validation-single-example', })} </div> <div class=\"col-md-6\"> <it-checkbox-group name=\"external-validation-multiple-example\" ?group=${params.group} ?inline=${params.inline} ?disabled=${params.disabled} ?custom-validation=${params.customValidation} validity-message=\"${ifDefined(params.validityMessage || undefined)}\" > <span slot=\"legend\">Gruppo di checkbox obbligatorio</span> ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, disabled: undefined, customValidation: undefined, validityMessage: undefined, label: 'Valore 1', value: 'valore_1', })} ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, disabled: undefined, customValidation: undefined, validityMessage: undefined, label: 'Valore 2', value: 'valore_2', })} ${renderComponent({ ...params, required: undefined, name: undefined, group: undefined, inline: undefined, disabled: undefined, customValidation: undefined, validityMessage: undefined, label: 'Valore 3', value: 'valore_3', })} </it-checkbox-group> </div> </div> </form> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "GestioneEventi",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Gestione degli eventi', parameters: { docs: { description: { story: `È possibile gestire gli eventi di \\`it-input\\`, \\`it-blur\\`, \\`it-change\\`, \\`it-focus\\`, \\`it-click\\` per effettuare operazioni personalizzate, come la validazione esterna o l'aggiornamento di altri campi. <br/><br/> È sufficiente aggiungere un event listener al componente \\`<it-checkbox>\\` o al componente \\`<it-checkbox-group>\\` per intercettare gli eventi desiderati. Ad esempio, per gestire l'evento di change, è possibile utilizzare il seguente codice: \\`\\`\\`js document.querySelector('it-checkbox#event-checkbox-example').addEventListener('it-change', (event) => { console.log('Checkbox event:', event); alert('Checkbox event'); }); \\`\\`\\` Il componente, emette anche un evento di tipo \\`it-input-ready\\` quando l'input è pronto e caricato nel DOM: \\`\\`\\`js document.querySelector('it-checkbox#event-checkbox-example').addEventListener('it-input-ready', (event) => { console.log('Checkbox ready:', event); }); \\`\\`\\` `, }, }, }, args: { type: 'text', label: 'Prova evento di change', name: 'event-checkbox-example', id: 'event-checkbox-example', }, render: (params) => html` <script> document.querySelector('it-checkbox#event-checkbox-example').addEventListener('it-change', (event) => { console.log('Checkbox event:', event); alert('Checkbox event'); }); document.querySelector('it-checkbox#event-checkbox-example').addEventListener('it-input-ready', (event) => { console.log('Checkbox ready:', event); }); </script> ${renderComponent({ ...params, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MetodiEPropPubblici",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...StoryFormControlMethodAndProps({ componentName: 'it-checkbox', otherMethods: `|\\`click()\\`| Triggera l'evento di click sull'input reale | - |`, }), tags: ['!dev'], }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EsempioInterattivo",
+          "declaration": {
+            "name": "EsempioInterattivo",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Disabilitato",
+          "declaration": {
+            "name": "Disabilitato",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Indeterminate",
+          "declaration": {
+            "name": "Indeterminate",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Inline",
+          "declaration": {
+            "name": "Inline",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Group",
+          "declaration": {
+            "name": "Group",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GroupInitValue",
+          "declaration": {
+            "name": "GroupInitValue",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SupportText",
+          "declaration": {
+            "name": "SupportText",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ValidazioneNativa",
+          "declaration": {
+            "name": "ValidazioneNativa",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ValidazioneCustom",
+          "declaration": {
+            "name": "ValidazioneCustom",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GestioneEventi",
+          "declaration": {
+            "name": "GestioneEventi",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MetodiEPropPubblici",
+          "declaration": {
+            "name": "MetodiEPropPubblici",
+            "module": "stories/it-checkbox.stories.ts"
+          }
+        }
+      ]
+    }
+  ]
+}