import{b as z}from"./Utilities-Jli9PXBn.js";function v(){return`
	<div class="form-group col-sm-4 noPaddingLeft">
  	<label class="control-label inail-label" for="form-input-info">Label</label>
		<div class="inail-currency-input-wrapper">
    	<input type="text" aria-labelledby="input-info"
    	  name="currencyInput" 
    	  id="currencyInput1" 
    	  class="form-control inail-input currency-input" 
    	  data-input-type="currency" 
    	  placeholder="Inserisci importo"/>
    	<span class="inail-currency-symbol">€</span>
  	</div>
	</div>
	`}function I(){return`
	<div class="form-group col-sm-4 noPaddingLeft">
  	<label class="control-label inail-label" for="form-input-info">Label</label>
		<div class="inail-currency-input-wrapper">
    	<input type="text" 
    	  name="currencyInput" 
    	  id="currencyInput1" 
    	  class="form-control inail-input currency-input" 
    	  data-input-type="currency" 
    	  placeholder="Inserisci importo"
				disabled/>
    	<span class="inail-currency-symbol inail-currency-symbol-disabled">€</span>
  	</div>
	</div>
	`}function C(){return`
	<div class="form-group col-sm-4 noPaddingLeft">
  	<label class="control-label inail-label" id="label-error-currency">Label</label>
		<div class="inail-currency-input-wrapper">
    	<input type="text" aria-labelledby="label-error-currency error2 hint-currency-2"
    	  name="currencyInput" 
    	  id="currencyInput1" 
    	  class="form-control inail-input currency-input inail-input-error" 
    	  data-input-type="currency" 
    	  placeholder="Inserisci importo"/>
    	<span class="inail-currency-symbol inail-currency-symbol-error">€</span>
  	</div>
		<span class="inail-span-error" id="error2" aria-hidden="false">
			<span class="sr-only">Etichetta del campo</span>
			<span> <span class="fa fa-exclamation-circle"></span> ERRORE: Descrizione dell'errore di campo</span>
		</span>
  	<span class="inail-span-ht" id="hint-currency-2">*Testo di aiuto</span>
	</div>
	`}function h(){return`
	<div class="form-group col-sm-4 noPaddingLeft">
  	<label class="control-label inail-label" id="label-tooltip-1">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>
		<div class="inail-currency-input-wrapper">
    	<input type="text" aria-labelledby="label-tooltip-1 hint-currency-info"
    	  name="currencyInput" 
    	  id="currencyInput1" 
    	  class="form-control inail-input currency-input" 
    	  data-input-type="currency" 
    	  placeholder="Inserisci importo"/>
    	<span class="inail-currency-symbol">€</span>
  	</div>
  	<span class="inail-span-ht" id="hint-currency-info">*Testo di aiuto</span>
	</div>
	`}const E=`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”`,S=`**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.
`,P={title:"Componenti/Form Items/Currency",parameters:{docs:{description:{component:S},mdxPage:E,showCode:!0}},decorators:[(e,t)=>z(e,t,4,["static-webkit/js/custom-webkit.js","assets/js/custom-webkit-material.js"],!0),e=>`<main id="contenutoPrincipale">${e()}</main>`]},i={name:"Currency",render:e=>v()},n={name:"Currency disabilitato",render:e=>I()},a={name:"Currency in errore",render:e=>C()},r={name:"Currency con tasto di info",render:e=>h()};var o,l,s;i.parameters={...i.parameters,docs:{...(o=i.parameters)==null?void 0:o.docs,source:{originalSource:`{
  name: "Currency",
  render: args => createInputCurrency()
}`,...(s=(l=i.parameters)==null?void 0:l.docs)==null?void 0:s.source}}};var c,u,p;n.parameters={...n.parameters,docs:{...(c=n.parameters)==null?void 0:c.docs,source:{originalSource:`{
  name: "Currency disabilitato",
  render: args => createInputCurrencyDisabled()
}`,...(p=(u=n.parameters)==null?void 0:u.docs)==null?void 0:p.source}}};var d,m,b;a.parameters={...a.parameters,docs:{...(d=a.parameters)==null?void 0:d.docs,source:{originalSource:`{
  name: "Currency in errore",
  render: args => createInputCurrencyError()
}`,...(b=(m=a.parameters)==null?void 0:m.docs)==null?void 0:b.source}}};var y,g,f;r.parameters={...r.parameters,docs:{...(y=r.parameters)==null?void 0:y.docs,source:{originalSource:`{
  name: "Currency con tasto di info",
  render: args => createInputCurrencyInfo()
}`,...(f=(g=r.parameters)==null?void 0:g.docs)==null?void 0:f.source}}};const R=["Currency","CurrencyDisabilitato","CurrencyError","CurrencyTooltip"];export{i as Currency,n as CurrencyDisabilitato,a as CurrencyError,r as CurrencyTooltip,R as __namedExportsOrder,P as default};
