@italia/input 1.0.0-alpha.4 → 1.0.0-alpha.5

package/custom-elements.json

@@ -469,7 +469,7 @@
         {
           "kind": "variable",
           "name": "meta",
-          "default": "{ title: 'Componenti/Form/Input Calendario', tags: ['a11y-ok', 'web-component'], component: 'it-input', args: { id: '', label: 'Datepicker', type: 'date', name: 'inputDate', value: undefined, disabled: false, customValidation: false, validityMessage: '', min: undefined, max: undefined, step: undefined, required: false, readonly: false, plaintext: false, placeholder: '', supportText: '', size: undefined, }, argTypes: { label: { control: 'text', description: 'Etichetta del campo', }, type: { control: 'select', options: ['date'], fixed: true, table: { defaultValue: { summary: 'date' } }, }, name: { control: 'text', }, value: { control: 'text', description: 'Valore del campo (nel formato YYYY-MM-DD)', type: 'string', }, disabled: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, 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`.', }, validityMessage: { name: 'validity-message', control: 'text', 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.\", }, min: { control: 'text', description: 'Valore minimo consentito (nel formato YYYY-MM-DD)', type: 'string', }, max: { control: 'text', description: 'Valore massimo consentito (nel formato YYYY-MM-DD)', type: 'string', }, step: { control: 'number', description: 'Incremento per ogni step (utilizzato dai pulsanti +/-)', type: 'string', }, required: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, 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.\", }, placeholder: { control: 'text', description: 'Testo segnaposto', }, supportText: { name: 'support-text', control: 'text', description: 'Testo di supporto', }, size: { control: { type: 'select', labels: { undefined: '(non definito)', sm: 'sm', lg: 'lg' } }, options: INPUT_SIZES, description: \"Dimensione del campo: 'sm' | (non definito) | 'lg' \", table: { defaultValue: { summary: undefined } }, type: 'string', }, }, } satisfies Meta<InputCalendarProps>"
+          "default": "{ title: 'Componenti/Form/Input Calendario', tags: ['a11y-ok', 'web-component', 'new'], component: 'it-input', args: { id: '', label: 'Datepicker', type: 'date', name: 'inputDate', value: undefined, disabled: false, customValidation: false, validityMessage: '', min: undefined, max: undefined, step: undefined, required: false, readonly: false, plaintext: false, placeholder: '', supportText: '', size: undefined, }, argTypes: { label: { control: 'text', description: 'Etichetta del campo', }, type: { control: 'select', options: ['date'], fixed: true, table: { defaultValue: { summary: 'date' } }, }, name: { control: 'text', }, value: { control: 'text', description: 'Valore del campo (nel formato YYYY-MM-DD)', type: 'string', }, disabled: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, 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`.', }, validityMessage: { name: 'validity-message', control: 'text', 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.\", }, min: { control: 'text', description: 'Valore minimo consentito (nel formato YYYY-MM-DD)', type: 'string', }, max: { control: 'text', description: 'Valore massimo consentito (nel formato YYYY-MM-DD)', type: 'string', }, step: { control: 'number', description: 'Incremento per ogni step (utilizzato dai pulsanti +/-)', type: 'string', }, required: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, 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.\", }, placeholder: { control: 'text', description: 'Testo segnaposto', }, supportText: { name: 'support-text', control: 'text', description: 'Testo di supporto', }, size: { control: { type: 'select', labels: { undefined: '(non definito)', sm: 'sm', lg: 'lg' } }, options: INPUT_SIZES, description: \"Dimensione del campo: 'sm' | (non definito) | 'lg' \", table: { defaultValue: { summary: undefined } }, type: 'string', }, }, } satisfies Meta<InputCalendarProps>"
         },
         {
           "kind": "variable",
@@ -680,6 +680,59 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "stories/it-input-time.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "default": "{ title: 'Componenti/Form/Input Ora', tags: ['autodocs', 'a11y-ok', 'web-component', 'alpha'], component: 'it-input', args: { id: '', label: 'Input Ora', type: 'time', name: 'timepicker', value: '', disabled: false, customValidation: false, validityMessage: '', min: undefined, max: undefined, step: undefined, required: false, readonly: false, plaintext: false, placeholder: '', supportText: '', size: undefined, }, argTypes: { label: { control: 'text', description: 'Etichetta del campo', }, type: { control: 'select', options: ['time'], fixed: true, table: { defaultValue: { summary: 'time' } }, }, name: { control: 'text', }, value: { control: 'text', description: 'Valore del campo', }, disabled: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, 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`.', }, validityMessage: { name: 'validity-message', control: 'text', 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.\", }, min: { control: 'text', description: 'Valore minimo consentito nel formato HH:MM. Es: 08:00', type: 'string', }, max: { control: 'text', description: 'Valore massimo consentito nel formato HH:MM. Es: 15:30', type: 'string', }, step: { control: 'number', description: 'Incremento per ogni step (utilizzato dai pulsanti +/-), in secondi', type: 'number', }, required: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, }, 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.\", }, placeholder: { control: 'text', description: 'Testo segnaposto', }, supportText: { name: 'support-text', control: 'text', description: 'Testo di supporto', }, size: { control: { type: 'select', labels: { undefined: '(non definito)', sm: 'sm', lg: 'lg' } }, options: INPUT_SIZES, description: \"Dimensione del campo: 'sm' | (non definito) | 'lg' \", table: { defaultValue: { summary: undefined } }, type: 'string', }, }, } satisfies Meta<InputNumberProps>"
+        },
+        {
+          "kind": "variable",
+          "name": "EsempioInterattivo",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, render: (params) => html`${renderTimeInput({ ...params, label: 'Input Ora', name: 'timepicker', id: 'exampleTimepicker', value: '10:00', })}`, }"
+        },
+        {
+          "kind": "variable",
+          "name": "LimitiEStep",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Limiti e Step', parameters: { docs: { description: { story: ` Aggiungendo gli attributi HTML \\`min=\"\"\\`, \\`max=\"\"\\` o \\`step=\"\"\\` all'input, puoi limitare il valore minimo e massimo del campo e decidere un intervallo orario valido. Questi attributi sono utili solo ai fini della validazione, e non modificano l'interfaccia del selettore. Gli attributi \\`min=\"\"\\`, \\`max=\"\"\\` accettano valori nel formato HH:MM. L'attributo \\`step=\"\"\\` prevede l'inserimento di un intervallo in secondi. `, }, }, }, args: { value: '10:00', min: '09:00', max: '12:00', step: 1800, }, render: (params) => html` ${renderTimeInput({ ...params, label: 'Min, Max & Step', name: 'inputTimeLimits', id: 'inputTimeLimits', })} `, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "stories/it-input-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EsempioInterattivo",
+          "declaration": {
+            "name": "EsempioInterattivo",
+            "module": "stories/it-input-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LimitiEStep",
+          "declaration": {
+            "name": "LimitiEStep",
+            "module": "stories/it-input-time.stories.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "stories/it-input.stories.ts",
@@ -800,6 +853,14 @@
             "text": "Story"
           },
           "default": "{ ...StoryFormControlMethodAndProps({}), tags: ['!dev'] }"
+        },
+        {
+          "kind": "variable",
+          "name": "I18n",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'i18n', tags: ['!dev'], render: () => html`<div class=\"hide-preview\"></div>`, parameters: { viewMode: 'docs', 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, null, 2)} \\`\\`\\` `, }, }, }, }"
         }
       ],
       "exports": [
@@ -922,6 +983,14 @@
             "name": "MetodiEPropPubblici",
             "module": "stories/it-input.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "I18n",
+          "declaration": {
+            "name": "I18n",
+            "module": "stories/it-input.stories.ts"
+          }
         }
       ]
     },