@italia/input 0.1.0-alpha.2 → 1.0.0-alpha.4
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/README.md +1 -1
- package/custom-elements.json +110 -35
- package/dist/src/it-input.d.ts.map +1 -1
- package/dist/src/it-input.js +77 -22
- package/dist/src/it-input.js.map +1 -1
- package/dist/src/types.d.ts.map +1 -1
- package/package.json +8 -6
package/README.md
CHANGED
package/custom-elements.json
CHANGED
|
@@ -294,6 +294,12 @@
|
|
|
294
294
|
"type": {
|
|
295
295
|
"text": "string"
|
|
296
296
|
}
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"name": "showValidation",
|
|
300
|
+
"type": {
|
|
301
|
+
"text": "boolean"
|
|
302
|
+
}
|
|
297
303
|
}
|
|
298
304
|
]
|
|
299
305
|
}
|
|
@@ -426,7 +432,7 @@
|
|
|
426
432
|
"type": {
|
|
427
433
|
"text": "array"
|
|
428
434
|
},
|
|
429
|
-
"default": "['text', 'email', 'number', 'tel', 'time', 'password', 'textarea']"
|
|
435
|
+
"default": "['text', 'email', 'number', 'tel', 'time', 'password', 'textarea', 'date']"
|
|
430
436
|
},
|
|
431
437
|
{
|
|
432
438
|
"kind": "variable",
|
|
@@ -456,6 +462,75 @@
|
|
|
456
462
|
}
|
|
457
463
|
]
|
|
458
464
|
},
|
|
465
|
+
{
|
|
466
|
+
"kind": "javascript-module",
|
|
467
|
+
"path": "stories/it-input-calendar.stories.ts",
|
|
468
|
+
"declarations": [
|
|
469
|
+
{
|
|
470
|
+
"kind": "variable",
|
|
471
|
+
"name": "meta",
|
|
472
|
+
"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>"
|
|
473
|
+
},
|
|
474
|
+
{
|
|
475
|
+
"kind": "variable",
|
|
476
|
+
"name": "EsempioInterattivo",
|
|
477
|
+
"type": {
|
|
478
|
+
"text": "Story"
|
|
479
|
+
},
|
|
480
|
+
"default": "{ ...meta, name: 'Esempio interattivo', parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, render: (params) => html`${renderCalendarInput({ ...params, })}`, }"
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"kind": "variable",
|
|
484
|
+
"name": "MinMax",
|
|
485
|
+
"type": {
|
|
486
|
+
"text": "Story"
|
|
487
|
+
},
|
|
488
|
+
"default": "{ ...meta, name: 'Restringere il periodo di validità', parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, args: { ...meta.args, min: defaultMin, max: defaultMax, label: 'Scegli una data nel periodo' }, render: (params) => html`${renderCalendarInput({ ...params, })}`, }"
|
|
489
|
+
},
|
|
490
|
+
{
|
|
491
|
+
"kind": "variable",
|
|
492
|
+
"name": "Step",
|
|
493
|
+
"type": {
|
|
494
|
+
"text": "Story"
|
|
495
|
+
},
|
|
496
|
+
"default": "{ ...meta, name: 'Impostare intervalli di date regolari', parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, args: { ...meta.args, min: nextMonday, step: 7, label: 'Scegli una data' }, render: (params) => html`${renderCalendarInput({ ...params, })}`, }"
|
|
497
|
+
}
|
|
498
|
+
],
|
|
499
|
+
"exports": [
|
|
500
|
+
{
|
|
501
|
+
"kind": "js",
|
|
502
|
+
"name": "default",
|
|
503
|
+
"declaration": {
|
|
504
|
+
"name": "meta",
|
|
505
|
+
"module": "stories/it-input-calendar.stories.ts"
|
|
506
|
+
}
|
|
507
|
+
},
|
|
508
|
+
{
|
|
509
|
+
"kind": "js",
|
|
510
|
+
"name": "EsempioInterattivo",
|
|
511
|
+
"declaration": {
|
|
512
|
+
"name": "EsempioInterattivo",
|
|
513
|
+
"module": "stories/it-input-calendar.stories.ts"
|
|
514
|
+
}
|
|
515
|
+
},
|
|
516
|
+
{
|
|
517
|
+
"kind": "js",
|
|
518
|
+
"name": "MinMax",
|
|
519
|
+
"declaration": {
|
|
520
|
+
"name": "MinMax",
|
|
521
|
+
"module": "stories/it-input-calendar.stories.ts"
|
|
522
|
+
}
|
|
523
|
+
},
|
|
524
|
+
{
|
|
525
|
+
"kind": "js",
|
|
526
|
+
"name": "Step",
|
|
527
|
+
"declaration": {
|
|
528
|
+
"name": "Step",
|
|
529
|
+
"module": "stories/it-input-calendar.stories.ts"
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
]
|
|
533
|
+
},
|
|
459
534
|
{
|
|
460
535
|
"kind": "javascript-module",
|
|
461
536
|
"path": "stories/it-input-number.stories.ts",
|
|
@@ -463,7 +538,7 @@
|
|
|
463
538
|
{
|
|
464
539
|
"kind": "variable",
|
|
465
540
|
"name": "meta",
|
|
466
|
-
"default": "{ title: 'Componenti/Form/Input Numerico', tags: ['autodocs'], 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', }, max: { control: 'number', description: 'Valore massimo consentito', }, step: { control: 'number', description: 'Incremento per ogni step (utilizzato dai pulsanti +/-)', }, 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
|
|
541
|
+
"default": "{ title: 'Componenti/Form/Input Numerico', 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>"
|
|
467
542
|
},
|
|
468
543
|
{
|
|
469
544
|
"kind": "variable",
|
|
@@ -479,7 +554,7 @@
|
|
|
479
554
|
"type": {
|
|
480
555
|
"text": "Story"
|
|
481
556
|
},
|
|
482
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: ` La larghezza del campo predefinita è quella del suo contenitore
|
|
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, utilizza 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> `, }"
|
|
483
558
|
},
|
|
484
559
|
{
|
|
485
560
|
"kind": "variable",
|
|
@@ -487,7 +562,7 @@
|
|
|
487
562
|
"type": {
|
|
488
563
|
"text": "Story"
|
|
489
564
|
},
|
|
490
|
-
"default": "{ ...meta, name: 'Limiti e Step', parameters: { docs: { description: { story: ` Aggiungendo gli attributi HTML \\`min=\"\"\\`, \\`max=\"\"\\` e \\`step=\"\"\\` all'input
|
|
565
|
+
"default": "{ ...meta, name: 'Limiti e Step', parameters: { docs: { description: { story: ` Aggiungendo gli attributi HTML \\`min=\"\"\\`, \\`max=\"\"\\` e \\`step=\"\"\\` all'input, puoi limitare il valore minimo e massimo del campo e decidere di quanto varierà a ogni click sui pulsanti. `, }, }, }, args: { value: '100', min: 0, max: 200, step: 10, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Min, Max & Step', name: 'inputNumberLimits', id: 'inputNumberLimits', })} `, }"
|
|
491
566
|
},
|
|
492
567
|
{
|
|
493
568
|
"kind": "variable",
|
|
@@ -503,7 +578,7 @@
|
|
|
503
578
|
"type": {
|
|
504
579
|
"text": "Story"
|
|
505
580
|
},
|
|
506
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per anteporre il simbolo percentuale, utilizza lo slot \\`prepend\\`.
|
|
581
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per anteporre il simbolo percentuale, utilizza 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> `, })} `, }"
|
|
507
582
|
},
|
|
508
583
|
{
|
|
509
584
|
"kind": "variable",
|
|
@@ -511,7 +586,7 @@
|
|
|
511
586
|
"type": {
|
|
512
587
|
"text": "Story"
|
|
513
588
|
},
|
|
514
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per disabilitare un Input number,
|
|
589
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per disabilitare un Input number, aggiungi l'attributo \\`disabled\\` al componente \\`<it-input>\\`. `, }, }, }, args: { value: '50', disabled: true, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Disabled', name: 'inputNumberDisabled', id: 'inputNumberDisabled', })} `, }"
|
|
515
590
|
},
|
|
516
591
|
{
|
|
517
592
|
"kind": "variable",
|
|
@@ -519,7 +594,7 @@
|
|
|
519
594
|
"type": {
|
|
520
595
|
"text": "Story"
|
|
521
596
|
},
|
|
522
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per rendere un Input number \\`readonly\\`,
|
|
597
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Per rendere un Input number \\`readonly\\`, 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', })} `, }"
|
|
523
598
|
},
|
|
524
599
|
{
|
|
525
600
|
"kind": "variable",
|
|
@@ -527,7 +602,7 @@
|
|
|
527
602
|
"type": {
|
|
528
603
|
"text": "Story"
|
|
529
604
|
},
|
|
530
|
-
"default": "{ ...meta, parameters: { docs: { description: { story: `
|
|
605
|
+
"default": "{ ...meta, parameters: { docs: { description: { story: ` Puoi far sì che il campo numerico si ridimensioni automaticamente a seconda del valore contenuto in esso. Per ottenere questo comportamento, è sufficiente aggiungere l'attributo \\`adaptive\\` al componente \\`<it-input>\\`. `, }, }, }, args: { value: '99999', adaptive: true, }, render: (params) => html` ${renderNumberInput({ ...params, label: 'Adattivo', name: 'inputNumberAdaptive', id: 'inputNumberAdaptive', })} `, }"
|
|
531
606
|
}
|
|
532
607
|
],
|
|
533
608
|
"exports": [
|
|
@@ -612,7 +687,7 @@
|
|
|
612
687
|
{
|
|
613
688
|
"kind": "variable",
|
|
614
689
|
"name": "meta",
|
|
615
|
-
"default": "{ title: 'Componenti/Form/Input', tags: ['
|
|
690
|
+
"default": "{ title: 'Componenti/Form/Input', tags: ['a11y-ok', 'web-component'], component: 'it-input', args: { id: '', label: 'Nome', type: 'text', name: 'nome', value: '', disabled: false, form: '', customValidation: false, validityMessage: '', pattern: undefined, min: undefined, max: undefined, step: undefined, minlength: undefined, maxlength: undefined, required: false, readonly: false, plaintext: false, placeholder: '', supportText: '', labelHidden: false, size: undefined, adaptive: false, strengthMeter: false, suggestions: false, }, argTypes: { id: { control: 'text', description: 'ID del campo', }, label: { control: 'text', description: 'Etichetta del campo', }, type: { control: 'select', options: INPUT_TYPES, table: { defaultValue: { summary: 'text' } }, }, name: { control: 'text', }, value: { control: 'text', description: 'Valore del campo', }, 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', 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.\", }, pattern: { control: 'text', description: 'Pattern di validazione del campo', type: 'string', }, min: { control: 'text', description: 'Valore minimo consentito per un campo di tipo numerico o di tipo data', type: 'string', }, max: { control: 'text', description: 'Valore massimo consentito per un campo di tipo numerico o di tipo data', type: 'string', }, step: { control: 'number', description: 'Incremento per ogni step (tramite i pulsanti +/-) nel caso di input di tipo numerico o di tipo data', type: 'number', }, 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.', }, 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', }, 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' } }, }, 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', }, strengthMeter: { 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' } }, }, 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>Campi per l'inserimento di dati testuali e numerici, in forma libera o in formati specifici, all'interno di un form</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 \\`it-aria-*\\` passati a \\`<it-input>\\` vengono applicati all'input generato. </p></div></div> `, }, }, }, } satisfies Meta<InputProps>"
|
|
616
691
|
},
|
|
617
692
|
{
|
|
618
693
|
"kind": "variable",
|
|
@@ -620,7 +695,7 @@
|
|
|
620
695
|
"type": {
|
|
621
696
|
"text": "Story"
|
|
622
697
|
},
|
|
623
|
-
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: '
|
|
698
|
+
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: 'closed', }, }, }, 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', })} ${renderComponent({ ...params, type: 'date', label: 'Campo data', name: 'data', id: 'exampleInputDate', })}`, }"
|
|
624
699
|
},
|
|
625
700
|
{
|
|
626
701
|
"kind": "variable",
|
|
@@ -628,7 +703,7 @@
|
|
|
628
703
|
"type": {
|
|
629
704
|
"text": "Story"
|
|
630
705
|
},
|
|
631
|
-
"default": "{ ...meta, name: 'Testo segnaposto', args: { type: 'text', placeholder: 'Testo segnaposto', label: 'Etichetta', name: 'placeholder-example', id: 'placeholder-example', },
|
|
706
|
+
"default": "{ ...meta, name: 'Testo segnaposto', args: { type: 'text', placeholder: 'Testo segnaposto', label: 'Etichetta', name: 'placeholder-example', id: 'placeholder-example', }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
632
707
|
},
|
|
633
708
|
{
|
|
634
709
|
"kind": "variable",
|
|
@@ -636,7 +711,7 @@
|
|
|
636
711
|
"type": {
|
|
637
712
|
"text": "Story"
|
|
638
713
|
},
|
|
639
|
-
"default": "{ ...meta, name: 'Testo di supporto', args: { type: 'text', label: 'Etichetta', placeholder: 'Testo segnaposto', name: 'supportText-example', id: 'supportText-example', supportText: 'Testo di supporto', },
|
|
714
|
+
"default": "{ ...meta, name: 'Testo di supporto', args: { type: 'text', label: 'Etichetta', placeholder: 'Testo segnaposto', name: 'supportText-example', id: 'supportText-example', supportText: 'Testo di supporto', }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
640
715
|
},
|
|
641
716
|
{
|
|
642
717
|
"kind": "variable",
|
|
@@ -644,7 +719,7 @@
|
|
|
644
719
|
"type": {
|
|
645
720
|
"text": "Story"
|
|
646
721
|
},
|
|
647
|
-
"default": "{ ...meta, name: 'Etichetta nascosta', args: { placeholder: 'Cerca...', label: 'Cerca nel sito', labelHidden: true },
|
|
722
|
+
"default": "{ ...meta, name: 'Etichetta nascosta', args: { placeholder: 'Cerca...', label: 'Cerca nel sito', labelHidden: true }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
648
723
|
},
|
|
649
724
|
{
|
|
650
725
|
"kind": "variable",
|
|
@@ -652,7 +727,7 @@
|
|
|
652
727
|
"type": {
|
|
653
728
|
"text": "Story"
|
|
654
729
|
},
|
|
655
|
-
"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', 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,
|
|
730
|
+
"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', 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, devi 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=\"prepend\" size=\"sm\"></it-icon> <it-button variant=\"primary\" slot=\"append\">Invio</it-button>`, })} `, }"
|
|
656
731
|
},
|
|
657
732
|
{
|
|
658
733
|
"kind": "variable",
|
|
@@ -660,7 +735,7 @@
|
|
|
660
735
|
"type": {
|
|
661
736
|
"text": "Story"
|
|
662
737
|
},
|
|
663
|
-
"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,
|
|
738
|
+
"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, puoi utilizzare l'attributo \\`size\\` il cui valore può essere \\`sm\\` oppure \\`lg\\`. Per modificare invece la dimensione dell’icona, puoi 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', }, 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=\"prepend\" 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=\"prepend\" 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=\"prepend\" size=\"xs\"></it-icon> <it-button variant=\"primary\" slot=\"append\">Invio</it-button>`, })} `, }"
|
|
664
739
|
},
|
|
665
740
|
{
|
|
666
741
|
"kind": "variable",
|
|
@@ -668,7 +743,7 @@
|
|
|
668
743
|
"type": {
|
|
669
744
|
"text": "Story"
|
|
670
745
|
},
|
|
671
|
-
"default": "{ ...meta,
|
|
746
|
+
"default": "{ ...meta, name: 'Stato disabilitato', args: { type: 'text', label: 'Campo disabilitato', name: 'field-disabled-example', id: 'field-disabled-example', disabled: true, }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
672
747
|
},
|
|
673
748
|
{
|
|
674
749
|
"kind": "variable",
|
|
@@ -676,7 +751,7 @@
|
|
|
676
751
|
"type": {
|
|
677
752
|
"text": "Story"
|
|
678
753
|
},
|
|
679
|
-
"default": "{ ...meta,
|
|
754
|
+
"default": "{ ...meta, name: 'Stato readonly', 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, })} `, }"
|
|
680
755
|
},
|
|
681
756
|
{
|
|
682
757
|
"kind": "variable",
|
|
@@ -684,7 +759,7 @@
|
|
|
684
759
|
"type": {
|
|
685
760
|
"text": "Story"
|
|
686
761
|
},
|
|
687
|
-
"default": "{ ...meta,
|
|
762
|
+
"default": "{ ...meta, 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', strengthMeter: true, suggestions: true, })} `, }"
|
|
688
763
|
},
|
|
689
764
|
{
|
|
690
765
|
"kind": "variable",
|
|
@@ -692,39 +767,39 @@
|
|
|
692
767
|
"type": {
|
|
693
768
|
"text": "Story"
|
|
694
769
|
},
|
|
695
|
-
"default": "{ ...meta, name: 'Area di testo',
|
|
770
|
+
"default": "{ ...meta, name: 'Area di testo', args: { type: 'textarea', label: 'Area di testo', name: 'textarea-example', id: 'textarea-example', placeholder: 'Testo segnaposto', }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
696
771
|
},
|
|
697
772
|
{
|
|
698
773
|
"kind": "variable",
|
|
699
|
-
"name": "
|
|
774
|
+
"name": "ValidazioneNativa",
|
|
700
775
|
"type": {
|
|
701
776
|
"text": "Story"
|
|
702
777
|
},
|
|
703
|
-
"default": "{ ...meta, name: 'Validazione
|
|
778
|
+
"default": "{ ...meta, name: 'Validazione nativa', args: { type: 'text', placeholder: 'Testo segnaposto' }, render: (params) => html` ${renderComponent({ ...params, label: 'Campo obbligatorio', name: 'required-example', id: 'required-example', required: true, })} `, }"
|
|
704
779
|
},
|
|
705
780
|
{
|
|
706
781
|
"kind": "variable",
|
|
707
|
-
"name": "
|
|
782
|
+
"name": "ValidazioneCustom",
|
|
708
783
|
"type": {
|
|
709
784
|
"text": "Story"
|
|
710
785
|
},
|
|
711
|
-
"default": "{ ...meta, name: '
|
|
786
|
+
"default": "{ ...meta, name: 'Validazione custom', args: { type: 'text', placeholder: 'Testo segnaposto' }, render: (params) => html` ${renderComponent({ ...params, label: 'Validazione esterna', name: 'external-validation-example', id: 'external-validation-example', validityMessage: 'Questo campo è obbligatorio!!!', customValidation: true, required: undefined, })} `, }"
|
|
712
787
|
},
|
|
713
788
|
{
|
|
714
789
|
"kind": "variable",
|
|
715
|
-
"name": "
|
|
790
|
+
"name": "GestioneEventi",
|
|
716
791
|
"type": {
|
|
717
792
|
"text": "Story"
|
|
718
793
|
},
|
|
719
|
-
"default": "{ ...
|
|
794
|
+
"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-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('it-input', (event) => { console.log('Input event:', event); alert('Input event'); }); \\`\\`\\` Il componente, emette anche un evento di tipo \\`it-input-ready\\` quando l'input è pronto e caricato nel DOM: \\`\\`\\`js document.querySelector('it-input#event-input-example').addEventListener('it-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', }, render: (params) => html` <script> document.querySelector('it-input#event-input-example').addEventListener('it-input', (event) => { console.log('Input event:', event); alert('Input event'); }); document.querySelector('it-input#event-input-example').addEventListener('it-input-ready', (event) => { console.log('Input ready:', event); }); </script> ${renderComponent({ ...params, })} `, }"
|
|
720
795
|
},
|
|
721
796
|
{
|
|
722
797
|
"kind": "variable",
|
|
723
|
-
"name": "
|
|
798
|
+
"name": "MetodiEPropPubblici",
|
|
724
799
|
"type": {
|
|
725
800
|
"text": "Story"
|
|
726
801
|
},
|
|
727
|
-
"default": "{
|
|
802
|
+
"default": "{ ...StoryFormControlMethodAndProps({}), tags: ['!dev'] }"
|
|
728
803
|
}
|
|
729
804
|
],
|
|
730
805
|
"exports": [
|
|
@@ -818,33 +893,33 @@
|
|
|
818
893
|
},
|
|
819
894
|
{
|
|
820
895
|
"kind": "js",
|
|
821
|
-
"name": "
|
|
896
|
+
"name": "ValidazioneNativa",
|
|
822
897
|
"declaration": {
|
|
823
|
-
"name": "
|
|
898
|
+
"name": "ValidazioneNativa",
|
|
824
899
|
"module": "stories/it-input.stories.ts"
|
|
825
900
|
}
|
|
826
901
|
},
|
|
827
902
|
{
|
|
828
903
|
"kind": "js",
|
|
829
|
-
"name": "
|
|
904
|
+
"name": "ValidazioneCustom",
|
|
830
905
|
"declaration": {
|
|
831
|
-
"name": "
|
|
906
|
+
"name": "ValidazioneCustom",
|
|
832
907
|
"module": "stories/it-input.stories.ts"
|
|
833
908
|
}
|
|
834
909
|
},
|
|
835
910
|
{
|
|
836
911
|
"kind": "js",
|
|
837
|
-
"name": "
|
|
912
|
+
"name": "GestioneEventi",
|
|
838
913
|
"declaration": {
|
|
839
|
-
"name": "
|
|
914
|
+
"name": "GestioneEventi",
|
|
840
915
|
"module": "stories/it-input.stories.ts"
|
|
841
916
|
}
|
|
842
917
|
},
|
|
843
918
|
{
|
|
844
919
|
"kind": "js",
|
|
845
|
-
"name": "
|
|
920
|
+
"name": "MetodiEPropPubblici",
|
|
846
921
|
"declaration": {
|
|
847
|
-
"name": "
|
|
922
|
+
"name": "MetodiEPropPubblici",
|
|
848
923
|
"module": "stories/it-input.stories.ts"
|
|
849
924
|
}
|
|
850
925
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"it-input.d.ts","sourceRoot":"","sources":["../../src/it-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAe7D,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAmB,MAAM,YAAY,CAAC;AAMzE,qBACa,OAAQ,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,+BAAU;IAGvB,OAAO,CAAC,YAAY,CAAgC;IAGpD,OAAO,CAAC,WAAW,CAAgC;IAEnD;;;OAGG;IAEH,IAAI,EAAE,SAAS,CAAU;IAEzB,wBAAwB;IAExB,IAAI,CAAC,EAAE,KAAK,CAAC;IAEb,uDAAuD;IAEvD,QAAQ,UAAS;IAEjB,sCAAsC;IAEtC,WAAW,UAAS;IAEpB,kEAAkE;IAElE,WAAW,SAAM;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,0DAA0D;IAE1D,SAAS,UAAS;IAElB,iCAAiC;IAEjC,QAAQ,UAAS;IAEjB,mFAAmF;IAEnF,qBAAqB,UAAS;IAE9B,qFAAqF;IAErF,WAAW,UAAS;IAGpB,aAAa,EAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,KAAK,IAAI,MAAM,CAKlB;IAGD,OAAO,CAAC,gBAAgB,CAAS;IAGjC,OAAO,CAAC,cAAc,CAAM;IAG5B,OAAO,CAAC,MAAM,CAAK;IAEnB,IAAI,OAAO,2BAEV;IAED,YAAY;IAcH,iBAAiB;IASjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAuBjE,YAAY,CAAC,CAAC,EAAE,KAAK;IAc9B,OAAO,CAAC,yBAAyB;IAOjC,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,oBAAoB;IAsB5B,OAAO,CAAC,MAAM,CAAC,WAAW;IAI1B,OAAO,CAAC,kBAAkB;IAyB1B,OAAO,CAAC,2BAA2B;IAuBnC,OAAO,CAAC,kBAAkB;IA4B1B,OAAO,CAAC,4BAA4B;IAqCpC,OAAO,CAAC,YAAY;
|
|
1
|
+
{"version":3,"file":"it-input.d.ts","sourceRoot":"","sources":["../../src/it-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAe7D,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAmB,MAAM,YAAY,CAAC;AAMzE,qBACa,OAAQ,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,+BAAU;IAGvB,OAAO,CAAC,YAAY,CAAgC;IAGpD,OAAO,CAAC,WAAW,CAAgC;IAEnD;;;OAGG;IAEH,IAAI,EAAE,SAAS,CAAU;IAEzB,wBAAwB;IAExB,IAAI,CAAC,EAAE,KAAK,CAAC;IAEb,uDAAuD;IAEvD,QAAQ,UAAS;IAEjB,sCAAsC;IAEtC,WAAW,UAAS;IAEpB,kEAAkE;IAElE,WAAW,SAAM;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,0DAA0D;IAE1D,SAAS,UAAS;IAElB,iCAAiC;IAEjC,QAAQ,UAAS;IAEjB,mFAAmF;IAEnF,qBAAqB,UAAS;IAE9B,qFAAqF;IAErF,WAAW,UAAS;IAGpB,aAAa,EAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,KAAK,IAAI,MAAM,CAKlB;IAGD,OAAO,CAAC,gBAAgB,CAAS;IAGjC,OAAO,CAAC,cAAc,CAAM;IAG5B,OAAO,CAAC,MAAM,CAAK;IAEnB,IAAI,OAAO,2BAEV;IAED,YAAY;IAcH,iBAAiB;IASjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAuBjE,YAAY,CAAC,CAAC,EAAE,KAAK;IAc9B,OAAO,CAAC,yBAAyB;IAOjC,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,oBAAoB;IAsB5B,OAAO,CAAC,MAAM,CAAC,WAAW;IAI1B,OAAO,CAAC,kBAAkB;IAyB1B,OAAO,CAAC,2BAA2B;IAuBnC,OAAO,CAAC,kBAAkB;IA4B1B,OAAO,CAAC,4BAA4B;IAqCpC,OAAO,CAAC,YAAY;IAwFX,MAAM;CAwFhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|