@italia/input 0.1.0-alpha.2 → 1.0.0-alpha.11
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 +170 -26
- package/dist/src/it-input.d.ts.map +1 -1
- package/dist/src/it-input.js +611 -542
- package/dist/src/it-input.js.map +1 -1
- package/dist/src/types.d.ts.map +1 -1
- package/package.json +8 -6
- package/styles/globals.scss +4 -7
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/Datepicker', 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', tags: ['!dev'], 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/
|
|
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>"
|
|
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, 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> `, }"
|
|
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: `
|
|
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', })} `, }"
|
|
491
566
|
},
|
|
492
567
|
{
|
|
493
568
|
"kind": "variable",
|
|
@@ -495,7 +570,7 @@
|
|
|
495
570
|
"type": {
|
|
496
571
|
"text": "Story"
|
|
497
572
|
},
|
|
498
|
-
"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> `, })} `, }"
|
|
499
574
|
},
|
|
500
575
|
{
|
|
501
576
|
"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,
|
|
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> `, })} `, }"
|
|
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
|
|
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', })} `, }"
|
|
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
|
|
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', })} `, }"
|
|
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: ` 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', })} `, }"
|
|
531
606
|
}
|
|
532
607
|
],
|
|
533
608
|
"exports": [
|
|
@@ -605,6 +680,59 @@
|
|
|
605
680
|
}
|
|
606
681
|
]
|
|
607
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'], 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
|
+
},
|
|
608
736
|
{
|
|
609
737
|
"kind": "javascript-module",
|
|
610
738
|
"path": "stories/it-input.stories.ts",
|
|
@@ -612,7 +740,7 @@
|
|
|
612
740
|
{
|
|
613
741
|
"kind": "variable",
|
|
614
742
|
"name": "meta",
|
|
615
|
-
"default": "{ title: 'Componenti/Form/Input', tags: ['
|
|
743
|
+
"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
744
|
},
|
|
617
745
|
{
|
|
618
746
|
"kind": "variable",
|
|
@@ -620,7 +748,7 @@
|
|
|
620
748
|
"type": {
|
|
621
749
|
"text": "Story"
|
|
622
750
|
},
|
|
623
|
-
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!autodocs', '!dev'], parameters: { docs: { canvas: { sourceState: '
|
|
751
|
+
"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
752
|
},
|
|
625
753
|
{
|
|
626
754
|
"kind": "variable",
|
|
@@ -628,7 +756,7 @@
|
|
|
628
756
|
"type": {
|
|
629
757
|
"text": "Story"
|
|
630
758
|
},
|
|
631
|
-
"default": "{ ...meta, name: 'Testo segnaposto', args: { type: 'text', placeholder: 'Testo segnaposto', label: 'Etichetta', name: 'placeholder-example', id: 'placeholder-example', },
|
|
759
|
+
"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
760
|
},
|
|
633
761
|
{
|
|
634
762
|
"kind": "variable",
|
|
@@ -636,7 +764,7 @@
|
|
|
636
764
|
"type": {
|
|
637
765
|
"text": "Story"
|
|
638
766
|
},
|
|
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', },
|
|
767
|
+
"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
768
|
},
|
|
641
769
|
{
|
|
642
770
|
"kind": "variable",
|
|
@@ -644,7 +772,7 @@
|
|
|
644
772
|
"type": {
|
|
645
773
|
"text": "Story"
|
|
646
774
|
},
|
|
647
|
-
"default": "{ ...meta, name: 'Etichetta nascosta', args: { placeholder: 'Cerca...', label: 'Cerca nel sito', labelHidden: true },
|
|
775
|
+
"default": "{ ...meta, name: 'Etichetta nascosta', args: { placeholder: 'Cerca...', label: 'Cerca nel sito', labelHidden: true }, render: (params) => html` ${renderComponent({ ...params, })} `, }"
|
|
648
776
|
},
|
|
649
777
|
{
|
|
650
778
|
"kind": "variable",
|
|
@@ -652,7 +780,7 @@
|
|
|
652
780
|
"type": {
|
|
653
781
|
"text": "Story"
|
|
654
782
|
},
|
|
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,
|
|
783
|
+
"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
784
|
},
|
|
657
785
|
{
|
|
658
786
|
"kind": "variable",
|
|
@@ -660,7 +788,7 @@
|
|
|
660
788
|
"type": {
|
|
661
789
|
"text": "Story"
|
|
662
790
|
},
|
|
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,
|
|
791
|
+
"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
792
|
},
|
|
665
793
|
{
|
|
666
794
|
"kind": "variable",
|
|
@@ -668,7 +796,7 @@
|
|
|
668
796
|
"type": {
|
|
669
797
|
"text": "Story"
|
|
670
798
|
},
|
|
671
|
-
"default": "{ ...meta,
|
|
799
|
+
"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
800
|
},
|
|
673
801
|
{
|
|
674
802
|
"kind": "variable",
|
|
@@ -676,7 +804,7 @@
|
|
|
676
804
|
"type": {
|
|
677
805
|
"text": "Story"
|
|
678
806
|
},
|
|
679
|
-
"default": "{ ...meta,
|
|
807
|
+
"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
808
|
},
|
|
681
809
|
{
|
|
682
810
|
"kind": "variable",
|
|
@@ -684,7 +812,7 @@
|
|
|
684
812
|
"type": {
|
|
685
813
|
"text": "Story"
|
|
686
814
|
},
|
|
687
|
-
"default": "{ ...meta,
|
|
815
|
+
"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
816
|
},
|
|
689
817
|
{
|
|
690
818
|
"kind": "variable",
|
|
@@ -692,15 +820,23 @@
|
|
|
692
820
|
"type": {
|
|
693
821
|
"text": "Story"
|
|
694
822
|
},
|
|
695
|
-
"default": "{ ...meta, name: 'Area di testo',
|
|
823
|
+
"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, })} `, }"
|
|
824
|
+
},
|
|
825
|
+
{
|
|
826
|
+
"kind": "variable",
|
|
827
|
+
"name": "ValidazioneNativa",
|
|
828
|
+
"type": {
|
|
829
|
+
"text": "Story"
|
|
830
|
+
},
|
|
831
|
+
"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, })} `, }"
|
|
696
832
|
},
|
|
697
833
|
{
|
|
698
834
|
"kind": "variable",
|
|
699
|
-
"name": "
|
|
835
|
+
"name": "ValidazioneCustom",
|
|
700
836
|
"type": {
|
|
701
837
|
"text": "Story"
|
|
702
838
|
},
|
|
703
|
-
"default": "{ ...meta, name: 'Validazione
|
|
839
|
+
"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, })} `, }"
|
|
704
840
|
},
|
|
705
841
|
{
|
|
706
842
|
"kind": "variable",
|
|
@@ -708,7 +844,7 @@
|
|
|
708
844
|
"type": {
|
|
709
845
|
"text": "Story"
|
|
710
846
|
},
|
|
711
|
-
"default": "{ ...meta, name: 'Gestione degli eventi', parameters: { docs: { description: { story:
|
|
847
|
+
"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, })} `, }"
|
|
712
848
|
},
|
|
713
849
|
{
|
|
714
850
|
"kind": "variable",
|
|
@@ -724,7 +860,7 @@
|
|
|
724
860
|
"type": {
|
|
725
861
|
"text": "Story"
|
|
726
862
|
},
|
|
727
|
-
"default": "{ name: 'i18n', tags: ['!dev'], render: () => html`<div class=\"hide-preview\"></div>`, parameters: { viewMode: 'docs',
|
|
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)} \\`\\`\\` `, }, }, }, }"
|
|
728
864
|
}
|
|
729
865
|
],
|
|
730
866
|
"exports": [
|
|
@@ -818,9 +954,17 @@
|
|
|
818
954
|
},
|
|
819
955
|
{
|
|
820
956
|
"kind": "js",
|
|
821
|
-
"name": "
|
|
957
|
+
"name": "ValidazioneNativa",
|
|
958
|
+
"declaration": {
|
|
959
|
+
"name": "ValidazioneNativa",
|
|
960
|
+
"module": "stories/it-input.stories.ts"
|
|
961
|
+
}
|
|
962
|
+
},
|
|
963
|
+
{
|
|
964
|
+
"kind": "js",
|
|
965
|
+
"name": "ValidazioneCustom",
|
|
822
966
|
"declaration": {
|
|
823
|
-
"name": "
|
|
967
|
+
"name": "ValidazioneCustom",
|
|
824
968
|
"module": "stories/it-input.stories.ts"
|
|
825
969
|
}
|
|
826
970
|
},
|
|
@@ -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"}
|