import{b as A}from"./Utilities-Jli9PXBn.js";function D({disabilitato:e,inErrore:o,info:T}){return`
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
   <div class="form-group date datePicker ">
      <div class="input-relative">
         <label class="control-label inail-label" for="form-data-2">Label</label>
         <input id="form-data-2" class="form-control inail-input" title="GG/MM/AAAA" placeholder="gg / mm / aaaa" type="text">
         <button title="Calendario" class="inail-button-calendar" type="button">
            <em class="fa-regular fa-calendar"  aria-hidden="true"></em>
         </button>
      </div>
   </div>
</div>`}function E(){return`
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
   <div class="form-group date datePicker ">
      <div class="input-relative">
         <label class="control-label inail-label" for="form-data-2">Label</label>
         <input  id="form-data-2" class="form-control inail-input"  placeholder="gg / mm / aaaa" type="text" disabled>
         <button title="Calendario" disabled class="inail-button-calendar" type="button">
            <em class="fa-regular fa-calendar"  aria-hidden="true"></em>
         </button>
      </div>
   </div>
</div>`}function S(){return`
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
   <div class="form-group date datePicker ">
      <div class="input-relative">
         <label class="control-label inail-label" id="label-date-error">Label</label>
         <input id="form-data-2" class="form-control inail-input inail-input-error" aria-labelledby="label-date-error error hint-date-error" title="GG/MM/AAAA" placeholder="gg / mm / aaaa" type="text">
         <button title="Calendario" class="inail-button-calendar" type="button">
            <em class="fa-regular fa-calendar"  aria-hidden="true"></em>
         </button>
          </div>
		 <span class="inail-span-error" id="error"><i class="fa-solid fa-circle-exclamation"></i> ERRORE: Descrizione dell'errore di campo
    </span>
       <span class="inail-span-ht" id="hint-date-error">*Testo di aiuto</span>
     
   </div>
</div>
	`}function y(){return`
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
   <div class="form-group date datePicker ">
    	<div class="input-relative ">
        <label class="control-label inail-label" id="label-date-info">Label</label>
        <span role="button" aria-label="Etichetta del campo" tabindex="0" 
					class="fa fa-question-circle fa-lg" 
					data-toggle="popover" 
					data-original-title="Etichetta del campo" 
					data-trigger="focus" 
					data-content="Inserire un suggerimento o una descrizione relativa a questo campo."></span>
        <input id="form-data-2" class="form-control inail-input" aria-labelledby="label-date-info hint-date-info" title="GG/MM/AAAA" placeholder="gg / mm / aaaa" type="text">
         <button title="Calendario" class="inail-button-calendar" type="button">
            <em class="fa-regular fa-calendar"  aria-hidden="true"></em>
         </button>
      </div>
      <span class="inail-span-ht" id="hint-date-info">*Testo di aiuto</span>
   	</div>
	</div>`}function P(){return`
	<div class="row">
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
   <div class="form-group date datePicker ">
      <div class="input-relative">
         <label class="control-label inail-label" for="form-data-2">Periodo Dal</label>
         <input id="form-data-2" class="form-control inail-input" title="GG/MM/AAAA" placeholder="gg / mm / aaaa" type="text">
         <button title="Calendario" class="inail-button-calendar" type="button">
            <em class="fa-regular fa-calendar"  aria-hidden="true"></em>
         </button>
      </div>
   </div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
   <div class="form-group date datePicker ">
      <div class="input-relative">
         <label class="control-label inail-label" for="form-data-3">Periodo Al</label>
         <input id="form-data-3" class="form-control inail-input" title="GG/MM/AAAA" placeholder="gg / mm / aaaa" type="text">
         <button title="Calendario" class="inail-button-calendar" type="button">
            <em class="fa-regular fa-calendar"  aria-hidden="true"></em>
         </button>
      </div>
   </div>
</div>
	</div>
	`}const R=`L'etichetta del form deve essere sempre fuori dal campo. Se il campo è “obbligatorio” devono essere inseriti: il simbolo “*” dopo dell'Etichetta (label) del Campo, l'attributo \`aria-required="true"\` nel tag input, select o textarea e,prima del form, la leggenda "I campi contrassegnati con l’asterisco (*) sono obbligatori."

L'errore di compilazione deve essere sempre composto da:
- campo evidenziato
- descrizione dell'errore chiara per qualsiasi utente. Evitare quindi di scrivere frasi come “Errore Generico”

Si suggerisce di inserire, quando necessario, un tooltip per fornire maggiori indicazioni sul valore da inserire. `,x=`**PANORAMICA**  
- **Descrizione generale**: Il componente Button rappresenta un elemento interattivo che consente agli utenti di eseguire azioni o triggerare eventi all'interno di un'interfaccia web.
- **Funzionalità principali**: Offre un'ampia gamma di varianti stilistiche e dimensioni per adattarsi a diversi contesti d'uso, garantendo coerenza e accessibilità.

**CASO D'USO**  
- **Scenari di utilizzo principali**: Utilizzato per inviare moduli, avviare processi, navigare tra pagine o eseguire qualsiasi azione definita dall'applicazione.
- **Contesto di implementazione consigliato**: Ideale in qualsiasi punto dell'interfaccia dove è richiesta un'interazione utente per eseguire un'azione specifica.
- **Posizionamento ideale nell'interfaccia**: Può essere posizionato in moduli, toolbar, dialoghi o come call-to-action prominente nelle pagine.

**CARATTERISTICHE PRINCIPALI**  
- **Funzionalità chiave**:
  - Supporto per varianti di stile: primario, secondario, successo, pericolo, avviso, informazione, luce, scuro.
  - Dimensioni personalizzabili: piccolo, medio, grande.
  - Stato disabilitato per indicare azioni non disponibili.
- **Aspetti tecnici rilevanti**: Implementato utilizzando l'elemento \`<button>\` o \`<a>\` con ruoli e attributi appropriati per garantire l'accessibilità.
- **Caratteristiche di accessibilità**: Progettato per essere completamente navigabile tramite tastiera e compatibile con screen reader, includendo attributi ARIA quando necessario.

**VARIANTI**  
- **Elenco e descrizione delle varianti disponibili**:
  - Stili: primario, secondario, successo, pericolo, avviso, informazione, luce, scuro.
  - Dimensioni: piccolo, medio, grande.
- **Casi d'uso specifici per ogni variante**:
  - Stili diversi per indicare l'importanza o la natura dell'azione.
  - Dimensioni diverse per adattarsi a spazi specifici nell'interfaccia.

**PROPRIETÀ**  
- **Proprietà configurabili**:
  - \`type\`: specifica il tipo di pulsante (\`button\`, \`submit\`, \`reset\`).
  - \`disabled\`: disabilita l'interazione con il pulsante.
  - \`aria-label\`: fornisce un'etichetta accessibile per il pulsante.
- **Parametri disponibili**: Possibilità di aggiungere attributi personalizzati per estendere la funzionalità.
- **Attributi per l'accessibilità**: Utilizzo di \`aria-label\` o \`aria-labelledby\` per descrivere l'azione del pulsante.

**DETTAGLI DI IMPLEMENTAZIONE**  
- **Struttura HTML**: Il pulsante è rappresentato da un elemento \`<button>\` o \`<a>\` con classi specifiche per lo stile e attributi per l'accessibilità.
- **Stile e CSS utilizzati**: Utilizza classi CSS per gestire il layout e l'aspetto, garantendo coerenza con il design system.
- **Variabili CSS disponibili e loro funzione**:
  - \`--btn-padding\`: padding interno del pulsante.
  - \`--btn-font-size\`: dimensione del testo del pulsante.
  - \`--btn-border-radius\`: raggio dei bordi del pulsante.
  - \`--btn-background-color\`: colore di sfondo del pulsante.
  - \`--btn-text-color\`: colore del testo del pulsante.

**BEST PRACTICES**  
- **Raccomandazioni d'uso**:
  - Utilizzare etichette chiare e concise che descrivano l'azione del pulsante.
  - Assicurarsi che il pulsante sia facilmente identificabile e distinguibile dagli altri elementi.
- **Linee guida implementative**: Evitare di utilizzare pulsanti per navigare tra pagine; preferire link per la navigazione.
- **Pratiche da evitare**: Evitare di utilizzare pulsanti senza etichette o con etichette ambigue.

**LINEE GUIDA PER L'ACCESSIBILITÀ**  
- **Requisiti di accessibilità**: Assicurarsi che il pulsante sia navigabile tramite tastiera e che abbia un'etichetta descrittiva.
- **Supporto tastiera**: Il pulsante deve essere attivabile tramite la barra spaziatrice o Invio.
- **Configurazione screen reader**: Utilizzare attributi ARIA per fornire informazioni sul contesto e la funzione del pulsante.

**COMPONENTI CORRELATI**  
- **Componenti associati**: Button Group, Toolbar, Icon Button.
- **Relazioni con altri elementi**: Spesso utilizzato all'interno di moduli, dialoghi o come call-to-action nelle pagine.
`,M={title:"Componenti/Form Items/Campi data",parameters:{docs:{description:{component:x},mdxPage:R,showAccessibility:!0}},decorators:[(e,o)=>A(e,o,5,["static-webkit/js/custom-webkit.js","static/js/main.js"],!0),e=>`<main id="contenutoPrincipale"><div style="height: 150px;">${e()}</div></main>`]},a={name:"Campo data",render:e=>D(e)},i={name:"Campo data disabilitato",render:()=>E()},t={name:"Campo data con errore",render:()=>S()},n={name:"Campo data con tasto info",render:()=>y()},r={name:"Campi data con periodo",render:e=>P()};var l,s,c;a.parameters={...a.parameters,docs:{...(l=a.parameters)==null?void 0:l.docs,source:{originalSource:`{
  name: "Campo data",
  // argTypes: {
  //   disabilitato: { control: "boolean" },
  //   inErrore: { control: "boolean" },
  //   info: { control: "boolean" },
  // },
  // args: {
  //   disabilitato: false,
  //   inErrore: false,
  //   info: false,
  // },
  render: args => CreateInputDate(args)
  // parameters: {
  //   layout: "centered",
  // },
}`,...(c=(s=a.parameters)==null?void 0:s.docs)==null?void 0:c.source}}};var d,p,u;i.parameters={...i.parameters,docs:{...(d=i.parameters)==null?void 0:d.docs,source:{originalSource:`{
  name: "Campo data disabilitato",
  render: () => CrateInputDateDisabled()
  // parameters: {
  //   layout: "centered",
  // },
}`,...(u=(p=i.parameters)==null?void 0:p.docs)==null?void 0:u.source}}};var m,b,g;t.parameters={...t.parameters,docs:{...(m=t.parameters)==null?void 0:m.docs,source:{originalSource:`{
  name: "Campo data con errore",
  render: () => CrateInputDateInError()
  // parameters: {
  //   layout: "centered",
  // },
}`,...(g=(b=t.parameters)==null?void 0:b.docs)==null?void 0:g.source}}};var f,v,z;n.parameters={...n.parameters,docs:{...(f=n.parameters)==null?void 0:f.docs,source:{originalSource:`{
  name: "Campo data con tasto info",
  render: () => CrateInputDateInfo()
  // parameters: {
  //   layout: "centered",
  // },
}`,...(z=(v=n.parameters)==null?void 0:v.docs)==null?void 0:z.source}}};var C,I,h;r.parameters={...r.parameters,docs:{...(C=r.parameters)==null?void 0:C.docs,source:{originalSource:`{
  name: "Campi data con periodo",
  render: args => CreateDataRange()
  // parameters: {
  //   layout: "centered",
  // },
}`,...(h=(I=r.parameters)==null?void 0:I.docs)==null?void 0:h.source}}};const G=["CampiInput","CampoDataDisabilitato","CampoDataInError","CampoDataInfo","CampiDataRange"];export{r as CampiDataRange,a as CampiInput,i as CampoDataDisabilitato,t as CampoDataInError,n as CampoDataInfo,G as __namedExportsOrder,M as default};
