@italia/input 0.1.0-alpha.0

package/custom-elements.json

@@ -0,0 +1,1045 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItInput",
+          "declaration": {
+            "name": "ItInput",
+            "module": "./it-input.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/it-input.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ItInput",
+          "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "static": true,
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "internals",
+              "attribute": "internals"
+            },
+            {
+              "kind": "field",
+              "name": "slotted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "slotted"
+            },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "invalid",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "customValidation",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "custom-validation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "validationText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "validity-message"
+            },
+            {
+              "kind": "field",
+              "name": "_inputElement",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Sizes | undefined"
+              },
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "labelHidden",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "label-hidden"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "InputType"
+              },
+              "default": "'text'",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "supportText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "support-text"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "plaintext",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "plaintext"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "readonly"
+            },
+            {
+              "kind": "field",
+              "name": "passwordStrengthMeter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "strength-meter"
+            },
+            {
+              "kind": "field",
+              "name": "suggestions",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "suggestions"
+            },
+            {
+              "kind": "field",
+              "name": "minlength",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "attribute": "minlength"
+            },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "attribute": "maxlength"
+            },
+            {
+              "kind": "field",
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "Pattern the `value` must match to be valid",
+              "attribute": "pattern"
+            },
+            {
+              "kind": "field",
+              "name": "_passwordVisible",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_strengthInfos",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_score",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_touched",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "validityMessage",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "attribute": "validityMessage"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inputElement",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_handleFormdata",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "FormDataEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity"
+            },
+            {
+              "kind": "method",
+              "name": "_handleBlur"
+            },
+            {
+              "kind": "method",
+              "name": "_togglePasswordVisibility",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_checkPasswordStrength",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_getPasswordConfig",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_updateStrengthInfos",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_renderTogglePasswordButton",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_renderSuggestions",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_renderpasswordStrengthMeter",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_renderInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "supportTextId",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "on-input",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "input-ready",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "internals",
+              "fieldName": "internals"
+            },
+            {
+              "name": "slotted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "slotted"
+            },
+            {
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "invalid"
+            },
+            {
+              "name": "custom-validation",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "customValidation"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "required"
+            },
+            {
+              "name": "validity-message",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "validationText"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "Sizes | undefined"
+              },
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "label-hidden",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "labelHidden"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "InputType"
+              },
+              "default": "'text'",
+              "fieldName": "type"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "name"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "support-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "supportText"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "plaintext",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "plaintext"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "strength-meter",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "passwordStrengthMeter"
+            },
+            {
+              "name": "suggestions",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "suggestions"
+            },
+            {
+              "name": "minlength",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "fieldName": "minlength"
+            },
+            {
+              "name": "maxlength",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "fieldName": "maxlength"
+            },
+            {
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Pattern the `value` must match to be valid",
+              "fieldName": "pattern"
+            },
+            {
+              "name": "validityMessage",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "validityMessage"
+            },
+            {
+              "name": "value",
+              "fieldName": "value"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ValidityMixin",
+              "package": "@italia/globals"
+            },
+            {
+              "name": "FormMixin",
+              "package": "@italia/globals"
+            }
+          ],
+          "superclass": {
+            "name": "BaseLocalizedComponent",
+            "package": "@italia/globals"
+          },
+          "tagName": "it-input",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItInput",
+          "declaration": {
+            "name": "ItInput",
+            "module": "src/it-input.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "it-input",
+          "declaration": {
+            "name": "ItInput",
+            "module": "src/it-input.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "INPUT_TYPES",
+          "type": {
+            "text": "array"
+          },
+          "default": "['text', 'email', 'number', 'tel', 'time', 'password', 'textarea']"
+        },
+        {
+          "kind": "variable",
+          "name": "INPUT_SIZES",
+          "type": {
+            "text": "array"
+          },
+          "default": "['sm', undefined, 'lg']"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "INPUT_TYPES",
+          "declaration": {
+            "name": "INPUT_TYPES",
+            "module": "src/types.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "INPUT_SIZES",
+          "declaration": {
+            "name": "INPUT_SIZES",
+            "module": "src/types.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "stories/it-input.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "default": "{ title: 'Componenti/Form/Input', tags: ['autodocs'], component: 'it-input', args: { id: '', label: 'Nome', type: 'text', name: 'nome', disabled: false, invalid: false, required: false, validityMessage: '', customValidation: false, placeholder: '', supportText: '', value: '', size: undefined, readonly: false, plaintext: false, slotted: false, labelHidden: false, passwordStrengthMeter: false, minlength: undefined, maxlength: undefined, suggestions: false, }, argTypes: { label: { control: 'text', description: 'Etichetta del campo', }, type: { control: 'select', options: INPUT_TYPES, table: { defaultValue: { summary: 'text' } }, }, name: { control: 'text', }, disabled: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, invalid: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, required: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, validityMessage: { name: 'validity-message', control: 'text', description: 'Messaggio che viene mostrato quando il campo è invalido', }, 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), impostare questo attributo a `true`.', }, placeholder: { control: 'text', description: 'Testo segnaposto', }, supportText: { name: 'support-text', control: 'text', description: 'Testo di supporto', }, value: { control: 'text', description: 'Valore del campo', }, size: { control: 'select', options: INPUT_SIZES, description: \"Dimensione del campo: 'sm' | (stringa vuota) | 'lg' \", table: { defaultValue: { summary: undefined } }, }, readonly: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, plaintext: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, description: \"Se il campo è readonly, con l'attributo 'plaintext' il campo assume l'aspetto di testo normalizzato.\", }, slotted: { control: 'boolean', type: 'boolean', description: \"Se vengono usati gli slot per mostrare l'icona o il bottone, questo attributo deve avere valore 'true'\", table: { defaultValue: { summary: 'false' } }, }, labelHidden: { name: 'label-hidden', control: 'boolean', type: 'boolean', description: 'Se si vuole nascondere la label. Risulterà comunque accessibile per i lettori di schermo.', table: { defaultValue: { summary: 'false' } }, }, passwordStrengthMeter: { name: 'strength-meter', control: 'boolean', type: 'boolean', description: \"Se si vuole mostrare o meno il misuratore di robustezza della password nel caso di type='password'\", table: { defaultValue: { summary: 'false' } }, }, minlength: { type: 'number', description: 'Lunghezza minima del valore da inserire. Usato anche per validare la robustezza della password', table: { defaultValue: { summary: 'undefined. Se type=\"password\": 8' } }, }, maxlength: { type: 'number', description: 'Lunghezza massima del valore da inserire.', }, suggestions: { name: 'suggestions', control: 'boolean', type: 'boolean', description: \"Se si vogliono mostrare i suggerimenti per l'insderimento di una password sicura.\", table: { defaultValue: { summary: 'false' } }, }, }, parameters: { docs: { description: { component: ` <Description>Input accessibile e responsivo.</Description> Per il corretto funzionamento degli elementi di tipo \\`<it-input>\\` è di fondamentale importanza l’utilizzo uno degli appositi attributi \\`type\\` (ad esempio, \"email\" per l’inserimento di indirizzi email o \"number\" per informazioni numeriche), in modo da sfruttare i controlli nativi dei browser più recenti come la verifica dell’email, l’utilizzo di metodo di input numerico ed altro. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p> Tutti gli attributi \\`aria-*\\` passati a \\`<it-input>\\` vengono applicati all'input generato. </p></div></div> `, }, }, }, } satisfies Meta<InputProps>"
+        },
+        {
+          "kind": "variable",
+          "name": "EsempioInterattivo",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, render: (params) => html`${renderComponent({ ...params, type: 'text', label: 'Campo di testo', name: 'testo', id: 'exampleInputText', })} ${renderComponent({ ...params, type: 'email', label: 'Campo email', name: 'email', id: 'exampleInputEmail', })} ${renderComponent({ ...params, type: 'number', label: 'Campo numerico', name: 'number', id: 'exampleInputNumber', })} ${renderComponent({ ...params, type: 'tel', label: 'Campo telefonico', name: 'telefono', id: 'exampleInputTel', })} ${renderComponent({ ...params, type: 'time', label: 'Campo orario', name: 'orario', id: 'exampleInputTime', })}`, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Placeholder",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Testo segnaposto', args: { type: 'text', placeholder: 'Testo segnaposto', label: 'Etichetta', name: 'placeholder-example', id: 'placeholder-example', }, parameters: { docs: { description: { story: ` È possibile abbinare al componente \\`<it-input>\\` un testo segnaposto (placeholder) per fornire indicazioni sul tipo di contenuto atteso. Questo testo non sostituisce l’etichetta, ma fornisce informazioni aggiuntive. `, }, }, }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "TestoDiSupporto",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Testo di supporto', args: { type: 'text', label: 'Etichetta', placeholder: 'Testo segnaposto', name: 'supportText-example', id: 'supportText-example', supportText: 'Testo di supporto', }, parameters: { docs: { description: { story: `In caso di necessità, è anche possibile utilizzare un ulteriore contenuto testuale sotto il campo di testo, indicando nell'attributo \\`support-text\\` il testo da visualizzare.`, }, }, }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "LabelHidden",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Etichetta nascosta', args: { placeholder: 'Cerca...', label: 'Cerca nel sito', labelHidden: true }, parameters: { docs: { description: { story: `Se si vuole nascondere l'etichetta, come ad esempio nei campi di ricerca, è sufficiente passare l'attributo \\`label-hidden\\`.`, }, }, }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "IconeOPulsanti",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Icone o pulsanti', args: { placeholder: 'Icone o pulsanti', type: 'text', label: 'Campo con icona', name: 'field-icon-example', id: 'field-icon-example', slotted: true, supportText: 'Testo di supporto', }, parameters: { docs: { description: { story: `<div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità delle icone</span></div><p>Nel caso in cui l’icona è semanticamente rilevante e non spiegata dal testo che la segue, occorre passare al componente \\`<it-icon>\\` l'attributo \\`label\\` che ne spieghi il significato (nel formato \\`<it-icon .... label=\"Significato dell'icona\"/>\\`)</p></div></div>`, }, }, }, render: (params) => html` ${renderComponent({ ...params, children: html`<it-icon name=\"it-pencil\" slot=\"icon\" size=\"sm\"></it-icon> <it-button variant=\"primary\" slot=\"append\">Invio</it-button>`, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Dimensioni",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, parameters: { docs: { description: { story: `L'input di base ha una dimensione media che non necessita di alcuna classe aggiuntiva. Per modificare questa dimensione, è possiible utilizzare l'attributo \\`size\\` il cui valore può essere \\`sm\\` oppure \\`lg\\`. Per modificare invece la dimensione dell’icona, è possibile utilizzare l'attributo \\`size\\` sull'icona in questo modo: <table> <thead> <tr><th>Dimensione input</th><th>Attributo size (di it-input)</th><th>Dimensione icona</th></tr> </thead> <tbody> <tr><td>Grande</td><td>\\`lg\\`</td><td>\\`md\\`</td></tr> <tr><td>Base (default)</td><td></td><td>\\`sm\\`</td></tr> <tr><td>Piccola</td><td>\\`sm\\`</td><td>\\`xs\\`</td></tr> </tbody> </table> `, }, }, }, args: { type: 'text', placeholder: 'Testo segnaposto', slotted: true, }, render: (params) => html` ${renderComponent({ ...params, label: 'Campo di dimensione grande', name: 'field-big-example', id: 'field-big-example', size: 'lg', children: html`<it-icon name=\"it-pencil\" slot=\"icon\" size=\"md\"></it-icon> <it-button variant=\"primary\" slot=\"append\">Invio</it-button>`, })} ${renderComponent({ ...params, label: 'Campo di dimensione base', name: 'field-sizebase-example', id: 'field-sizebase-example', placeholder: 'Testo segnaposto', children: html`<it-icon name=\"it-pencil\" slot=\"icon\" size=\"sm\"></it-icon> <it-button variant=\"primary\" slot=\"append\">Invio</it-button>`, })} ${renderComponent({ ...params, label: 'Campo di dimensione piccola', name: 'field-small-example', id: 'field-small-example', size: 'sm', children: html`<it-icon name=\"it-pencil\" slot=\"icon\" size=\"xs\"></it-icon> <it-button variant=\"primary\" slot=\"append\">Invio</it-button>`, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Disabilitato",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, parameters: { docs: { description: { story: `Aggiungi l’attributo \\`disabled\\` ad un \\`<it-input>\\` per impedire la modifica del valore contenuto e non inviare i dati in esso contenuti.`, }, }, }, args: { type: 'text', label: 'Campo disabilitato', name: 'field-disabled-example', id: 'field-disabled-example', disabled: true, }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Readonly",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, parameters: { docs: { description: { story: `Aggiungi l’attributo \\`readonly\\` ad un \\`<it-input>\\` per impedire la modifica del valore contenuto. <br/><br/><h4>Readonly normalizzato</h4>Se per qualche motivo vuoi avere gli elementi input readonly nella forma stilizzata come testo, aggiungi l'attributo \\`plaintext\\` a \\`<it-input>\\`.`, }, }, }, args: { type: 'text', readonly: true, value: 'Contenuto in sola lettura' }, render: (params) => html` ${renderComponent({ ...params, label: 'Campo readonly', name: 'field-readonly-example', id: 'field-readonly-example', })} ${renderComponent({ ...params, label: 'Campo readonly normalizzato come plaintext', name: 'field-readonlyplaintext-example', id: 'field-readonlyplaintext-example', plaintext: true, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Password",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, parameters: { docs: { description: { story: `Per semplificare l’inserimento della password, il componente \\`<it-input>\\` di tipo password include un pulsante che mostra i caratteri digitati. È inoltre possibile aggiungere un testo di supporto che aiuti nella compilazione, attraverso l’attributo \\`support-text\\`. <br/><br/> <h4>Misuratore sicurezza e suggerimenti</h4> Nel caso di un campo per la scelta di una nuova password, è possibile abbinare controlli per segnalare quanto la password che si sta inserendo segua alcuni suggerimenti di sicurezza, come la lunghezza minima o l’uso di caratteri speciali, attraverso gli attributi \\`strength-meter=\"true\"\\` e \\`minlength\\` per modificare la lunghezza minima richiesta per la password. Inoltre, è possibile restituire all’utente una lista dei suggerimenti, con indicati quelli che sono stati soddisfatti, attraverso l’attributo \\`suggestions=\"true\"\\`. `, }, }, }, args: { type: 'password', label: 'Campo password', supportText: 'Inserisci almeno 8 caratteri e alcuni caratteri speciali.', minlength: 8, }, render: (params) => html` ${renderComponent({ ...params, name: 'field-password-example', id: 'field-password-example', })} ${renderComponent({ ...params, name: 'field-password-strength-example', id: 'field-password-strength-example', passwordStrengthMeter: true, suggestions: true, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Textarea",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Area di testo', parameters: { docs: { description: { story: `Per permettere agli utenti di inserire un testo esteso (ad esempio per lasciare commenti o informazioni), è bene utilizzare un elemento \\`<it-input>\\` con \\`type=\"textarea\"\\`.`, }, }, }, args: { type: 'textarea', label: 'Area di testo', name: 'textarea-example', id: 'textarea-example', placeholder: 'Testo segnaposto', }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "GestioneErrori",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Gestione degli errori', parameters: { docs: { description: { story: `Se sono stati impostati uno di questi attributi <ul><li>\\`required\\`</li><li>\\`pattern\\`</li><li>\\`minlength\\`</li></ul> viene effettuata una validazione interna al componente. <br/><br/><h4>Personalizzazione dei messaggi di errore</h4>E' possibile personalizzare i messaggi di errore tramite l'attributo \\`translations\\` a seconda che: <ul><li>il campo è required e non è compilato: impostando il valore di \\`validityRequired\\` in \\`translations\\`</li> <li>il campo non rispetta il pattern: impostando il valore di \\`validityPattern\\` in \\`translations\\`</li> <li>il campo è troppo corto: impostando il valore di \\`validityMinlength\\` in \\`translations\\`</li> <li>il campo ha un valore non valido: impostando il valore di \\`validityInvalid\\` in \\`translations\\`</li></ul> <h4>Validazione esterna</h4> E' inoltre possibile validare il campo esternamente (via js ad esempio, o lato server), impostando l' attributo \\`custom-validation=\"true\"\\`. In questo modo la validazione di defautl effettuata internamente al componente è disabilitata. <br/>Nel caso il campo non sia valido, è necessario invalidare il campo impostando il messaggio di errore da visualizzare attraverso l'attributo \\`validity-message=\"Messaggio di errore\"\\`.`, }, }, }, args: { type: 'text', placeholder: 'Testo segnaposto', translations: undefined }, render: (params) => html` ${renderComponent({ ...params, label: 'Campo obbligatorio', name: 'required-example', id: 'required-example', translations: { validityRequired: 'Questo campo è obbligatorio. Inserisci un valore.', }, required: true, })} ${renderComponent({ ...params, label: 'Validazione esterna', name: 'external-validation-example', id: 'external-validation-example', validityMessage: 'Questo campo è obbligatorio!', customValidation: true, required: undefined, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "GestioneEventi",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Gestione degli eventi', parameters: { docs: { description: { story: `E' possibile gestire gli eventi di \\`on-input\\`, \\`blur\\`, \\`change\\`, \\`focus\\`, \\`click\\` per effettuare operazioni personalizzate, come la validazione esterna o l'aggiornamento di altri campi. <br/><br/> E' sufficiente aggiungere un event listener al componente \\`<it-input>\\` per intercettare gli eventi desiderati. Ad esempio, per gestire l'evento di input, è possibile utilizzare il seguente codice: \\`\\`\\`js document.querySelector('it-input#event-input-example').addEventListener('on-input', (event) => { console.log('Input event:', event); alert('Input event); }); \\`\\`\\` Il componente, emette anche un evento di tipo \\`input-ready\\` quando l'input è pronto e caricato nel DOM: \\`\\`\\`js document.querySelector('it-input#event-input-example').addEventListener('input-ready', (event) => { console.log('Input ready:', event); }); \\`\\`\\` `, }, }, }, args: { type: 'text', label: 'Prova evento di input', name: 'event-input-example', id: 'event-input-example', placeholder: 'Testo segnaposto', translations: undefined, }, render: (params) => html` <script> document.querySelector('it-input#event-input-example').addEventListener('on-input', (event) => { console.log('Input event:', event); alert('Input event'); }); document.querySelector('it-input#event-input-example').addEventListener('input-ready', (event) => { console.log('Input ready:', event); }); </script> ${renderComponent({ ...params, })} `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "I18n",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'i18n', tags: ['!dev'], render: () => html`<div class=\"hide-preview\"></div>`, parameters: { viewMode: 'docs', // assicura che si apra la tab Docs anziché Canvas docs: { description: { story: ` Per questo componente sono disponibili alcune stringhe traducibili tramite l'[utility di internazionalizzazione](/docs/i18n-internazionalizzazione--documentazione). \\`\\`\\`js const translation = { ${JSON.stringify(i18nIT).replaceAll('{\"', '\"').replaceAll('\",', '\",\\n\\t').replaceAll('\"}', '\"')} } \\`\\`\\` `, }, }, }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EsempioInterattivo",
+          "declaration": {
+            "name": "EsempioInterattivo",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Placeholder",
+          "declaration": {
+            "name": "Placeholder",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TestoDiSupporto",
+          "declaration": {
+            "name": "TestoDiSupporto",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LabelHidden",
+          "declaration": {
+            "name": "LabelHidden",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IconeOPulsanti",
+          "declaration": {
+            "name": "IconeOPulsanti",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Dimensioni",
+          "declaration": {
+            "name": "Dimensioni",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Disabilitato",
+          "declaration": {
+            "name": "Disabilitato",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Readonly",
+          "declaration": {
+            "name": "Readonly",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Password",
+          "declaration": {
+            "name": "Password",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Textarea",
+          "declaration": {
+            "name": "Textarea",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GestioneErrori",
+          "declaration": {
+            "name": "GestioneErrori",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GestioneEventi",
+          "declaration": {
+            "name": "GestioneEventi",
+            "module": "stories/it-input.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "I18n",
+          "declaration": {
+            "name": "I18n",
+            "module": "stories/it-input.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/helpers/password.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "calculateScore",
+          "parameters": [
+            {
+              "name": "password",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "lmin",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "description": "password The password to be checked.",
+              "name": "string"
+            }
+          ],
+          "description": "Returns a value between -1 and 100 to score\nthe user's password.",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
+        },
+        {
+          "kind": "function",
+          "name": "scoreColor",
+          "parameters": [
+            {
+              "name": "score",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "scoreText",
+          "parameters": [
+            {
+              "name": "score",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "messages",
+              "type": {
+                "text": "any"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "suggestionsConfig",
+          "type": {
+            "text": "Array<Suggestion>"
+          },
+          "default": "[ { key: 'length', text: (config) => config.suggestionLength.replace('{minLength}', config.minimumLength.toString()), test: (password, config) => password.length >= config.minimumLength, }, { key: 'uppercase', text: (config) => config.suggestionUppercase, test: (password) => /[A-Z]/.test(password), }, { key: 'lowercase', text: (config) => config.suggestionLowercase, test: (password) => /[a-z]/.test(password), }, { key: 'number', text: (config) => config.suggestionNumber, test: (password) => /[0-9]/.test(password), }, { key: 'special', text: (config) => config.suggestionSpecial, test: (password) => /[^A-Za-z0-9]/.test(password), }, ]"
+        },
+        {
+          "kind": "function",
+          "name": "calcCompletedSuggestions",
+          "parameters": [
+            {
+              "name": "_suggestions",
+              "type": {
+                "text": "Array<Suggestion>"
+              }
+            },
+            {
+              "name": "password",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "config",
+              "type": {
+                "text": "Record<string, any>"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "calculateScore",
+          "declaration": {
+            "name": "calculateScore",
+            "module": "src/helpers/password.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "scoreColor",
+          "declaration": {
+            "name": "scoreColor",
+            "module": "src/helpers/password.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "scoreText",
+          "declaration": {
+            "name": "scoreText",
+            "module": "src/helpers/password.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "suggestionsConfig",
+          "declaration": {
+            "name": "suggestionsConfig",
+            "module": "src/helpers/password.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "calcCompletedSuggestions",
+          "declaration": {
+            "name": "calcCompletedSuggestions",
+            "module": "src/helpers/password.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/locales/it.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "translation",
+          "type": {
+            "text": "DefaultTranslation"
+          },
+          "default": "{ $code: 'it', $name: 'Italiano', $dir: 'ltr', showHidePassword: 'Mostra/Nascondi Password.', shortPass: 'Password troppo breve.', badPass: 'Password debole.', goodPass: 'Password abbastanza sicura.', strongPass: 'Password sicura.', ariaLabelPasswordMeter: 'Robustezza della password', passwordSuggestionsLabel: 'Suggerimenti per una buona password:', passwordSuggestionLength: 'Almeno {minLength} caratteri.', passwordSuggestionUppercase: 'Una o più maiuscole.', passwordSuggestionLowercase: 'Una o più minuscole.', passwordSuggestionNumber: 'Uno o più numeri.', passwordSuggestionSpecial: 'Uno o più caratteri speciali.', passwordSuggestionFollowed: 'suggerimenti seguiti', passwordSuggestionFollowedPlural: 'suggerimenti seguiti', passwordSuggestionOf: 'di', passwordSuggestionMetLabel: 'Soddisfatto:', validityRequired: 'Questo campo è obbligatorio.', validityInvalid: 'Il valore non è corretto.', validityPattern: 'Il valore non corrisponde al formato richiesto.', validityMinlength: 'Il valore deve essere lungo almeno {minlength} caratteri.', validityMaxlength: 'Il valore deve essere lungo al massimo {maxlength} caratteri.', }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "translation",
+            "module": "src/locales/it.ts"
+          }
+        }
+      ]
+    }
+  ]
+}