import{a as h}from"./Utilities-CQhZFhp5.js";function I(e){return`
	<div class="form-group col-sm-4 noPaddingLeft">
  	<label class="control-label inail-label" for="form-currency_1" id='label-currency_1'>${e.etichetta}</label>
		<div class="inail-currency-input-wrapper">
    	<input type="text"
		aria-labelledby='label-currency_1'
    	  name="currencyInput" 
    	  id="for-currency_1" 
    	  class="form-control inail-input currency-input" 
    	  data-input-type="currency" 
    	  placeholder="Inserisci importo"/>
    	<span class="inail-currency-symbol">€</span>
  	</div>
	</div>
	`}function C(e){return`
	<div class="col-sm-4 noPaddingLeft">
  	<label class="control-label inail-label" for="form-currency_2" id='label-currency_2'>${e.etichetta}</label>
		<div class="inail-currency-input-wrapper">
    	<input type="text" 
    	  name="currencyInput" 
    	  id="form-currency_2" 
		  aria-labelledby='label-currency_1'
    	  class="form-control inail-input currency-input" 
    	  data-input-type="currency" 
    	  placeholder="Inserisci importo"
				${e.disabilitato?"disabled":""}/>
    	<span class="inail-currency-symbol inail-currency-symbol-disabled">€</span>
  	</div>
	<div class="inail-div-message"></div>
	</div>
	`}function E(e){const i=e.inErrore?" inail-currency-symbol-error":"",v=e.inErrore?" inail-input-error":"",o=e.inErrore?'aria-labelledby="label-currency_3"':"";return`
	<div class="col-sm-4 noPaddingLeft">
  	<label class="control-label inail-label" id="label-currency_3" for='form-currency_3'>${e.etichetta}</label>
		<div class="inail-currency-input-wrapper">
    	<input type="text" ${o}
    	  name="currencyInput" 
    	  id="form-currency_3" 
    	  class="form-control inail-input currency-input ${v}" 
    	  data-input-type="currency" 
    	  placeholder="Inserisci importo"
		  aria-describedby="error2"
		  ${o}"/>
    	<span class="inail-currency-symbol ${i}">€</span>
  	</div>
		<div class="inail-div-message">
		${e.inErrore?`<span class="inail-span-error" id="error2" aria-hidden="false">
			<span> <span class="fa fa-exclamation-circle"></span> ${e.messaggioErrore}</span>
		</span>`:""}
	</div>
	</div>
	`}function S(e){return`
	<div class="col-sm-4 noPaddingLeft" >
  	<label class="control-label inail-label" for="form-currency_4" id='label-currency_4'>${e.etichetta}</label>
   	${e.info?`<span role="button" tabindex="0" 	
					class="fa fa-question-circle fa-lg" 
					data-toggle="popover" 
					aria-labelledby='label-currency_4'
					data-trigger="focus" 
					data-content="${e.descrizioneTooltip}"></span>`:""}
		<div class="inail-currency-input-wrapper">
    	<input type="text" aria-describedby="hint-currency-info"
		id="form-currency_4"
    	  name="currencyInput"  
    	  class="form-control inail-input currency-input" 	
    	  data-input-type="currency" 
    	  placeholder="Inserisci importo">
    	<span class="inail-currency-symbol">€</span>
  	</div>
		<div class="inail-div-message">
		 ${e.info?`<span class="inail-span-ht inail-span-ht-combobox" id="hint-currency-info">${e.messaggioHelper}</span>`:""}
	</div>
	</div>
	`}const T=`Un Combo box è un controllo grafico che permette di effettuare una scelta scrivendola in una casella di testo o selezionandola da un elenco. Quando disabilitato mostra solo un valore, una volta attivato viene mostrata tutta la lista dei possibili valori.

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”`,L=`**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.
`,V={title:"Componenti/Form Items/Currency",parameters:{docs:{description:{component:L},mdxPage:T,showAccessibility:!0}},decorators:[(e,i)=>h(e,i,4,["https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-webkit.js","https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-webkit-material.js"],!0),e=>`<main id="contenutoPrincipale">${e()}</main>`]},a={name:"Currency",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il input currency",defaultValue:{summary:"Label"}}},args:{etichetta:"Label"},render:({...e})=>I(e)},r={name:"Currency disabilitato",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il input currency",defaultValue:{summary:"Label"}},disabilitato:{control:"boolean",description:"Imposta il input currency come disabilitato",defaultValue:{summary:!0}}},args:{etichetta:"Label",disabilitato:!0},render:e=>C(e)},t={name:"Currency in errore",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il input currency",defaultValue:{summary:"Label"}},inErrore:{control:"boolean",description:"Imposta il input currency con uno stato di errore",defaultValue:{summary:!1}},messaggioErrore:{control:"text",description:"Visualizza un messaggio di errore sotto il input currency",defaultValue:{summary:"ERRORE: Descrizione dell'errore di campo"}}},args:{etichetta:"Label",inErrore:!0,messaggioErrore:"ERRORE: Descrizione dell'errore di campo"},render:e=>E(e)},n={name:"Currency con tasto di info",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il input currency",defaultValue:{summary:"Label"}},info:{control:"boolean",description:"Mostra un'icona di informazioni accanto al input currency",defaultValue:{summary:!0}},messaggioHelper:{control:"text",description:"Visualizza un messaggio di supporto sotto il input currency",defaultValue:{summary:"*Testo di aiuto"}},descrizioneTooltip:{control:"text",description:"Visualizza il messaggio nel tooltip",defaultValue:{summary:"Inserire un suggerimento o una descrizione relativa a questo campo."}}},args:{etichetta:"Label",info:!0,messaggioHelper:"Testo di aiuto",descrizioneTooltip:"Inserire un suggerimento o una descrizione relativa a questo campo."},render:e=>S(e)};var l,s,c;a.parameters={...a.parameters,docs:{...(l=a.parameters)==null?void 0:l.docs,source:{originalSource:`{
  name: "Currency",
  argTypes: {
    etichetta: {
      control: 'text',
      description: "Specifica l'etichetta visualizzata sopra il input currency",
      defaultValue: {
        summary: "Label"
      }
    }
  },
  args: {
    etichetta: 'Label'
  },
  render: ({
    ...args
  }) => createInputCurrency(args)
}`,...(c=(s=a.parameters)==null?void 0:s.docs)==null?void 0:c.source}}};var u,d,p;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`{
  name: "Currency disabilitato",
  argTypes: {
    etichetta: {
      control: 'text',
      description: "Specifica l'etichetta visualizzata sopra il input currency",
      defaultValue: {
        summary: "Label"
      }
    },
    disabilitato: {
      control: "boolean",
      description: "Imposta il input currency come disabilitato",
      defaultValue: {
        summary: true
      }
    }
  },
  args: {
    etichetta: 'Label',
    disabilitato: true
  },
  render: args => createInputCurrencyDisabled(args)
}`,...(p=(d=r.parameters)==null?void 0:d.docs)==null?void 0:p.source}}};var m,b,y;t.parameters={...t.parameters,docs:{...(m=t.parameters)==null?void 0:m.docs,source:{originalSource:`{
  name: "Currency in errore",
  argTypes: {
    etichetta: {
      control: 'text',
      description: "Specifica l'etichetta visualizzata sopra il input currency",
      defaultValue: {
        summary: "Label"
      }
    },
    inErrore: {
      control: "boolean",
      description: "Imposta il input currency con uno stato di errore",
      defaultValue: {
        summary: false
      }
    },
    messaggioErrore: {
      control: 'text',
      description: "Visualizza un messaggio di errore sotto il input currency",
      defaultValue: {
        summary: "ERRORE: Descrizione dell'errore di campo"
      }
    }
  },
  args: {
    etichetta: 'Label',
    inErrore: true,
    messaggioErrore: "ERRORE: Descrizione dell'errore di campo"
  },
  render: args => createInputCurrencyError(args)
}`,...(y=(b=t.parameters)==null?void 0:b.docs)==null?void 0:y.source}}};var g,f,z;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:`{
  name: "Currency con tasto di info",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il input currency",
      defaultValue: {
        summary: "Label"
      }
    },
    info: {
      control: "boolean",
      description: "Mostra un'icona di informazioni accanto al input currency",
      defaultValue: {
        summary: true
      }
    },
    messaggioHelper: {
      control: "text",
      description: "Visualizza un messaggio di supporto sotto il input currency",
      defaultValue: {
        summary: "*Testo di aiuto"
      }
    },
    descrizioneTooltip: {
      control: "text",
      description: "Visualizza il messaggio nel tooltip",
      defaultValue: {
        summary: "Inserire un suggerimento o una descrizione relativa a questo campo."
      }
    }
  },
  args: {
    etichetta: "Label",
    info: true,
    messaggioHelper: "Testo di aiuto",
    descrizioneTooltip: "Inserire un suggerimento o una descrizione relativa a questo campo."
  },
  render: args => createInputCurrencyInfo(args)
}`,...(z=(f=n.parameters)==null?void 0:f.docs)==null?void 0:z.source}}};const x=["Currency","CurrencyDisabilitato","CurrencyError","CurrencyTooltip"];export{a as Currency,r as CurrencyDisabilitato,t as CurrencyError,n as CurrencyTooltip,x as __namedExportsOrder,V as default};
