@italia/input 1.0.0-alpha.4 → 1.0.0-alpha.6
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 +79 -10
- package/dist/src/it-input.js +523 -520
- package/dist/src/it-input.js.map +1 -1
- package/package.json +6 -6
- package/styles/globals.scss +4 -7
package/custom-elements.json
CHANGED
|
@@ -469,7 +469,7 @@
|
|
|
469
469
|
{
|
|
470
470
|
"kind": "variable",
|
|
471
471
|
"name": "meta",
|
|
472
|
-
"default": "{ title: 'Componenti/Form/
|
|
472
|
+
"default": "{ title: 'Componenti/Form/Datepicker', 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>"
|
|
473
473
|
},
|
|
474
474
|
{
|
|
475
475
|
"kind": "variable",
|
|
@@ -477,7 +477,7 @@
|
|
|
477
477
|
"type": {
|
|
478
478
|
"text": "Story"
|
|
479
479
|
},
|
|
480
|
-
"default": "{ ...meta, name: 'Esempio interattivo', parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, render: (params) => html`${renderCalendarInput({ ...params, })}`, }"
|
|
480
|
+
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!dev'], parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, render: (params) => html`${renderCalendarInput({ ...params, })}`, }"
|
|
481
481
|
},
|
|
482
482
|
{
|
|
483
483
|
"kind": "variable",
|
|
@@ -538,7 +538,7 @@
|
|
|
538
538
|
{
|
|
539
539
|
"kind": "variable",
|
|
540
540
|
"name": "meta",
|
|
541
|
-
"default": "{ title: 'Componenti/Form/
|
|
541
|
+
"default": "{ title: 'Componenti/Form/Number input', tags: ['autodocs', 'a11y-ok', 'web-component'], component: 'it-input', args: { id: '', label: 'Input Number', type: 'number', name: 'inputNumber', value: '100', disabled: false, customValidation: false, validityMessage: '', min: undefined, max: undefined, step: undefined, required: false, readonly: false, plaintext: false, placeholder: '', supportText: '', size: undefined, adaptive: false, }, argTypes: { label: { control: 'text', description: 'Etichetta del campo', }, type: { control: 'select', options: ['number'], fixed: true, table: { defaultValue: { summary: 'number' } }, }, 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: 'number', description: 'Valore minimo consentito', type: 'number', }, max: { control: 'number', description: 'Valore massimo consentito', type: 'number', }, step: { control: 'number', description: 'Incremento per ogni step (utilizzato dai pulsanti +/-)', 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', }, adaptive: { control: 'boolean', type: 'boolean', table: { defaultValue: { summary: 'false' } }, description: 'Se il campo è `type=\"number\"`, con l\\'attributo `adaptive` il campo assume adatta la sua larghezza al contenuto', }, }, } satisfies Meta<InputNumberProps>"
|
|
542
542
|
},
|
|
543
543
|
{
|
|
544
544
|
"kind": "variable",
|
|
@@ -554,7 +554,7 @@
|
|
|
554
554
|
"type": {
|
|
555
555
|
"text": "Story"
|
|
556
556
|
},
|
|
557
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: ` La larghezza del campo predefinita è quella del suo contenitore. Per limitare la larghezza alle dimensioni del valore contenuto,
|
|
557
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` La larghezza del campo predefinita è quella del suo contenitore. Per limitare la larghezza alle dimensioni del valore contenuto, usa il ridimensionamento adattivo. `, }, }, }, args: { value: '100', }, render: (params) => html` <div class=\"w-100\"> ${renderNumberInput({ ...params, label: 'Input Numerico inserito in una colonna a tutta larghezza', name: 'inputNumberFull', id: 'inputNumberFull', })} </div> <div class=\"w-50\"> ${renderNumberInput({ ...params, label: 'Input Numerico inserito in una colonna di larghezza 50%', name: 'inputNumberHalf', id: 'inputNumberHalf', })} </div> `, }"
|
|
558
558
|
},
|
|
559
559
|
{
|
|
560
560
|
"kind": "variable",
|
|
@@ -562,7 +562,7 @@
|
|
|
562
562
|
"type": {
|
|
563
563
|
"text": "Story"
|
|
564
564
|
},
|
|
565
|
-
"default": "{ ...meta, name: 'Limiti e Step', parameters: { docs: { description: { story: `
|
|
565
|
+
"default": "{ ...meta, name: 'Limiti e Step', parameters: { docs: { description: { story: ` Per limitare il valore minimo e massimo del campo e decidere di quanto varierà a ogni clic sui pulsanti, aggiungi gli attributi HTML \\`min=\"\"\\`, \\`max=\"\"\\` e \\`step=\"\"\\` all'input. `, }, }, }, args: { value: '100', min: 0, max: 200, step: 10, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Min, Max & Step', name: 'inputNumberLimits', id: 'inputNumberLimits', })} `, }"
|
|
566
566
|
},
|
|
567
567
|
{
|
|
568
568
|
"kind": "variable",
|
|
@@ -570,7 +570,7 @@
|
|
|
570
570
|
"type": {
|
|
571
571
|
"text": "Story"
|
|
572
572
|
},
|
|
573
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per anteporre il simbolo della valuta (ad esempio in
|
|
573
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per anteporre il simbolo della valuta (ad esempio in euro), usa lo slot \\`prepend\\`. `, }, }, }, args: { value: '3.50', step: 0.01, min: 0, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Currency', name: 'inputNumberCurrency', id: 'inputNumberCurrency', children: html`<span slot=\"prepend\" class=\"fw-semibold\">€</span> `, })} `, }"
|
|
574
574
|
},
|
|
575
575
|
{
|
|
576
576
|
"kind": "variable",
|
|
@@ -578,7 +578,7 @@
|
|
|
578
578
|
"type": {
|
|
579
579
|
"text": "Story"
|
|
580
580
|
},
|
|
581
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per anteporre il simbolo percentuale,
|
|
581
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per anteporre il simbolo percentuale, usa lo slot \\`prepend\\`. Ti consigliamo di impostare gli attributi \\`min=\"0\"\\` e \\`max=\"100\"\\`. `, }, }, }, args: { value: '50', step: 10, min: 0, max: 100, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Percentage', name: 'inputNumberPercent', id: 'inputNumberPercent', children: html`<span slot=\"prepend\" class=\"fw-semibold\">%</span> `, })} `, }"
|
|
582
582
|
},
|
|
583
583
|
{
|
|
584
584
|
"kind": "variable",
|
|
@@ -586,7 +586,7 @@
|
|
|
586
586
|
"type": {
|
|
587
587
|
"text": "Story"
|
|
588
588
|
},
|
|
589
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per disabilitare un
|
|
589
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per disabilitare un number input, aggiungi l'attributo \\`disabled\\` al componente \\`<it-input>\\`. `, }, }, }, args: { value: '50', disabled: true, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Disabled', name: 'inputNumberDisabled', id: 'inputNumberDisabled', })} `, }"
|
|
590
590
|
},
|
|
591
591
|
{
|
|
592
592
|
"kind": "variable",
|
|
@@ -594,7 +594,7 @@
|
|
|
594
594
|
"type": {
|
|
595
595
|
"text": "Story"
|
|
596
596
|
},
|
|
597
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per rendere un
|
|
597
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per rendere un number input read only, aggiungi l'attributo \\`readonly\\` al componente \\`<it-input>\\`. `, }, }, }, args: { value: '50', readonly: true, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Contenuto in sola lettura', name: 'inputNumberReadonly', id: 'inputNumberReadonly', })} `, }"
|
|
598
598
|
},
|
|
599
599
|
{
|
|
600
600
|
"kind": "variable",
|
|
@@ -602,7 +602,7 @@
|
|
|
602
602
|
"type": {
|
|
603
603
|
"text": "Story"
|
|
604
604
|
},
|
|
605
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: `
|
|
605
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per far ridimensionare automaticamente il campo numerico a seconda del valore contenuto, aggiungi l'attributo \\`adaptive\\` al componente \\`<it-input>\\`. `, }, }, }, args: { value: '99999', adaptive: true, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Adattivo', name: 'inputNumberAdaptive', id: 'inputNumberAdaptive', })} `, }"
|
|
606
606
|
}
|
|
607
607
|
],
|
|
608
608
|
"exports": [
|
|
@@ -680,6 +680,59 @@
|
|
|
680
680
|
}
|
|
681
681
|
]
|
|
682
682
|
},
|
|
683
|
+
{
|
|
684
|
+
"kind": "javascript-module",
|
|
685
|
+
"path": "stories/it-input-time.stories.ts",
|
|
686
|
+
"declarations": [
|
|
687
|
+
{
|
|
688
|
+
"kind": "variable",
|
|
689
|
+
"name": "meta",
|
|
690
|
+
"default": "{ title: 'Componenti/Form/Timepicker', 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>"
|
|
691
|
+
},
|
|
692
|
+
{
|
|
693
|
+
"kind": "variable",
|
|
694
|
+
"name": "EsempioInterattivo",
|
|
695
|
+
"type": {
|
|
696
|
+
"text": "Story"
|
|
697
|
+
},
|
|
698
|
+
"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', })}`, }"
|
|
699
|
+
},
|
|
700
|
+
{
|
|
701
|
+
"kind": "variable",
|
|
702
|
+
"name": "LimitiEStep",
|
|
703
|
+
"type": {
|
|
704
|
+
"text": "Story"
|
|
705
|
+
},
|
|
706
|
+
"default": "{ ...meta, name: 'Limiti e Step', parameters: { docs: { description: { story: ` Per aggiungere limitazioni ai valori orari selezionabili, usa questi attributi HTML: - \\`min=\"\"\\`, per limitare il valore minimo; - \\`max=\"\"\\`, per limitare il valore massimo; - \\`step=\"\"\\`, per un intervallo orario valido. Gli attributi \\`min=\"\"\\`, \\`max=\"\"\\` accettano valori nel formato HH:MM. L'attributo \\`step=\"\"\\` prevede l'inserimento di un intervallo in secondi. Questi attributi sono utili solo ai fini della validazione e non modificano l'interfaccia del selettore. `, }, }, }, 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', })} `, }"
|
|
707
|
+
}
|
|
708
|
+
],
|
|
709
|
+
"exports": [
|
|
710
|
+
{
|
|
711
|
+
"kind": "js",
|
|
712
|
+
"name": "default",
|
|
713
|
+
"declaration": {
|
|
714
|
+
"name": "meta",
|
|
715
|
+
"module": "stories/it-input-time.stories.ts"
|
|
716
|
+
}
|
|
717
|
+
},
|
|
718
|
+
{
|
|
719
|
+
"kind": "js",
|
|
720
|
+
"name": "EsempioInterattivo",
|
|
721
|
+
"declaration": {
|
|
722
|
+
"name": "EsempioInterattivo",
|
|
723
|
+
"module": "stories/it-input-time.stories.ts"
|
|
724
|
+
}
|
|
725
|
+
},
|
|
726
|
+
{
|
|
727
|
+
"kind": "js",
|
|
728
|
+
"name": "LimitiEStep",
|
|
729
|
+
"declaration": {
|
|
730
|
+
"name": "LimitiEStep",
|
|
731
|
+
"module": "stories/it-input-time.stories.ts"
|
|
732
|
+
}
|
|
733
|
+
}
|
|
734
|
+
]
|
|
735
|
+
},
|
|
683
736
|
{
|
|
684
737
|
"kind": "javascript-module",
|
|
685
738
|
"path": "stories/it-input.stories.ts",
|
|
@@ -800,6 +853,14 @@
|
|
|
800
853
|
"text": "Story"
|
|
801
854
|
},
|
|
802
855
|
"default": "{ ...StoryFormControlMethodAndProps({}), tags: ['!dev'] }"
|
|
856
|
+
},
|
|
857
|
+
{
|
|
858
|
+
"kind": "variable",
|
|
859
|
+
"name": "I18n",
|
|
860
|
+
"type": {
|
|
861
|
+
"text": "Story"
|
|
862
|
+
},
|
|
863
|
+
"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)} \\`\\`\\` `, }, }, }, }"
|
|
803
864
|
}
|
|
804
865
|
],
|
|
805
866
|
"exports": [
|
|
@@ -922,6 +983,14 @@
|
|
|
922
983
|
"name": "MetodiEPropPubblici",
|
|
923
984
|
"module": "stories/it-input.stories.ts"
|
|
924
985
|
}
|
|
986
|
+
},
|
|
987
|
+
{
|
|
988
|
+
"kind": "js",
|
|
989
|
+
"name": "I18n",
|
|
990
|
+
"declaration": {
|
|
991
|
+
"name": "I18n",
|
|
992
|
+
"module": "stories/it-input.stories.ts"
|
|
993
|
+
}
|
|
925
994
|
}
|
|
926
995
|
]
|
|
927
996
|
},
|