import{a as n}from"./iframe-B0O0VXUn.js";import"./preload-helper-PPVm8Dsz.js";function c(e){const i=e.inErrore?" custom-checkbox-error":"",r=e.inErrore?'aria-labelledby="label-check-error error-1"':"";return`
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 noPaddingLeft custom-checkbox-container inail-checkbox">
	<input type="checkbox" id="check-1" class="custom-checkbox option-checkbox ${i}" 
		 ${e.disabilitato?"disabled":""} ${r}>
	<label for="check-1">
		<span class="custom-checkbox-background">
			<i class="fa inail-checkbox-icon"></i>
		</span>
		<span>${e.etichetta}</span>
	</label>
	${e.inErrore?`<div class="inail-div-message">
	  <span class="inail-span-error inail-checkbox-span-error" id="error-1"><i class="fa-solid fa-circle-exclamation"></i> ${e.messaggioErrore}</span>
	  </div>`:""}
	
</div>
`}function s(e){return`
	<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 noPaddingLeft custom-checkbox-container inail-checkbox">
		<input type="checkbox" id="check-2" class="custom-checkbox option-checkbox" checked ${e.disabilitato?"disabled":""}>
			<label for="check-2">
				<span class="custom-checkbox-background">
					<i class="fa inail-checkbox-icon"></i>
				</span>
				<span>${e.etichetta}</span>
			</label>
	</div>`}function l(e){const i=e.inErrore?" custom-checkbox-error":"",r=e.inErrore?'aria-labelledby="label-check-error error-1"':"";return`
	<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 noPaddingLeft custom-checkbox-container inail-checkbox d-flex">
	<input type="checkbox" id="check-3" class="custom-checkbox option-checkbox ${i}" ${r}>		
	<label id="label-check-error" for="check-3">
			<span class="custom-checkbox-background">
				<i class="fa inail-checkbox-icon"></i>
			</span>
			<span>${e.etichetta}</span>
		</label>
		
${e.inErrore?`<div class="inail-div-message">
			<span class="inail-span-error inail-checkbox-span-error" id="error-1"><i class="fa-solid fa-circle-exclamation"></i> ${e.messaggioErrore}</span>
			</div>`:""}

	</div>
	`}const d=`Un checkbox è un controllo grafico con cui l'utente può effettuare selezioni multiple.
Adiacente al checkbox viene mostrata una breve descrizione.

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 sulla possibile scelta. `,u=`**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/Checkbox",parameters:{docs:{description:{component:u},mdxPage:d,showAccessibility:!0}},decorators:[(e,i)=>n(e,i,3,["https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-webkit.js"],!0),e=>`<main id="contenutoPrincipale">${e()}</main>`]},a={name:"Checkbox",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il checkbox",defaultValue:{summary:"Etichetta del campo"}}},args:{etichetta:"Etichetta del campo"},render:e=>c(e)},t={name:"Checkbox disabilitata",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il checkbox",defaultValue:{summary:"Etichetta del campo"}},disabilitato:{control:"boolean",description:"Imposta il checkbox come disabilitato",defaultValue:{summary:!1}}},args:{etichetta:"Etichetta del campo",disabilitato:!0},render:e=>s(e)},o={name:"Checkbox con errore",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il checkbox",defaultValue:{summary:"Etichetta del campo"}},inErrore:{control:"boolean",description:"Imposta il checkbox con uno stato di errore",defaultValue:{summary:!1}},messaggioErrore:{control:"text",description:"Visualizza un messaggio di errore sotto il checkbox",defaultValue:{summary:"Messaggio d'errore"}}},args:{etichetta:"Etichetta del campo",inErrore:!0,messaggioErrore:"Messaggio d'errore"},render:e=>l(e)};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  name: "Checkbox",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il checkbox",
      defaultValue: {
        summary: "Etichetta del campo"
      }
    }
  },
  args: {
    etichetta: "Etichetta del campo"
  },
  render: args => createInputCheckbox(args)
}`,...a.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
  name: "Checkbox disabilitata",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il checkbox",
      defaultValue: {
        summary: "Etichetta del campo"
      }
    },
    disabilitato: {
      control: "boolean",
      description: "Imposta il checkbox come disabilitato",
      defaultValue: {
        summary: false
      }
    }
  },
  args: {
    etichetta: "Etichetta del campo",
    disabilitato: true
  },
  render: args => createInputCheckboxDisabled(args)
}`,...t.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  name: "Checkbox con errore",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il checkbox",
      defaultValue: {
        summary: "Etichetta del campo"
      }
    },
    inErrore: {
      control: "boolean",
      description: "Imposta il checkbox con uno stato di errore",
      defaultValue: {
        summary: false
      }
    },
    messaggioErrore: {
      control: 'text',
      description: "Visualizza un messaggio di errore sotto il checkbox",
      defaultValue: {
        summary: "Messaggio d'errore"
      }
    }
  },
  args: {
    etichetta: "Etichetta del campo",
    inErrore: true,
    messaggioErrore: "Messaggio d'errore"
  },
  render: args => createInputCheckboxInError(args)
}`,...o.parameters?.docs?.source}}};const h=["Checkbox","CheckboxDisabled","CheckboxInError"];export{a as Checkbox,t as CheckboxDisabled,o as CheckboxInError,h as __namedExportsOrder,m as default};
