import{a as l}from"./Utilities-CQhZFhp5.js";function r(e){return`
<div class="row form-group uploadFile widget">
	<div class="col-12 inail-file-uploader-title">
        <div class="inail-label-tooltip-container">
            <span class="inail-label-tooltip" id="carica-documento">${e.etichetta}
            </span>
            <span tabindex="0" class="fa fa-question-circle fa-lg" data-toggle="popover" role="button"
                 data-trigger="focus"
                data-content="${e.descrizioneTooltip}" data-container="body"
                (click)="onTooltipClick($event)" aria-labelledby='carica-documento'>
            </span>
        </div>
        <div class="inail-file-uploader-subtitle">
            Formati supportati: .PDF, .JPEG, .PNG, max 100 MB
        </div>
    </div>

	<div id="ariaStatus" aria-live="assertive" class="sr-only"></div>

	<div class="col-12 inail-file-uploader-button-group mt-4">
		<div class="fileUpload noMarginLeft">
			<button id="onUploadFile" class="inail-button inail-button-primary" aria-label="Scegli file">
				<span class="fa-solid fa-arrow-up-from-bracket"></span>
				<span aria-hidden="true">${e.etichettaBottone}</span>
			</button>
			<input id="addfileN" accept=".pdf" class="btn-primary upload hidden" type="file" aria-label="Scegli file" multiple>
		</div>
	</div>

	<div class="col-12 upload-file-button-container noPaddingLeft mt-4">
	    <div>
			<ul class="inail-file-uploader-text-container" aria-label="Lista allegati"></ul>
		</div>
	</div>
</div>`}const s=`L'etichetta del form deve essere sempre fuori dal campo.
Deve sempre essere indicata la quantità, il peso massimo e la tipologia di file che posso essere allegati. `,c=`**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/Campo Carica File",parameters:{docs:{description:{component:c},mdxPage:s}},decorators:[(e,t)=>l(e,t,1,["static-webkit/js/custom-webkit.js"],!0),e=>`<main id="contenutoPrincipale">${e()}</main>`]},i={name:"Campo Carica File",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta del componente.",defaultValue:{summary:"CARICA DOCUMENTO"}},etichettaTooltip:{control:"text",description:"Specifica l'etichetta del tooltip.",defaultValue:{summary:"Etichetta del campo"}},descrizioneTooltip:{control:"text",description:"Specifica il testo dentro il tooltip.",defaultValue:{summary:"Inserire un suggerimento o una descrizione relativa a questo campo."}},etichettaBottone:{control:"text",description:"Specifica l'etichetta del buttone per caricare il file.",defaultValue:{summary:"Scegli file"}}},args:{etichetta:"CARICA DOCUMENTO",etichettaTooltip:"Etichetta del campo",descrizioneTooltip:"Inserire un suggerimento o una descrizione relativa a questo campo.",etichettaBottone:"Scegli file"},render:({...e})=>r(e)};var a,n,o;i.parameters={...i.parameters,docs:{...(a=i.parameters)==null?void 0:a.docs,source:{originalSource:`{
  name: "Campo Carica File",
  argTypes: {
    etichetta: {
      control: 'text',
      description: "Specifica l'etichetta del componente.",
      defaultValue: {
        summary: "CARICA DOCUMENTO"
      }
    },
    etichettaTooltip: {
      control: 'text',
      description: "Specifica l'etichetta del tooltip.",
      defaultValue: {
        summary: "Etichetta del campo"
      }
    },
    descrizioneTooltip: {
      control: 'text',
      description: "Specifica il testo dentro il tooltip.",
      defaultValue: {
        summary: "Inserire un suggerimento o una descrizione relativa a questo campo."
      }
    },
    etichettaBottone: {
      control: 'text',
      description: "Specifica l'etichetta del buttone per caricare il file.",
      defaultValue: {
        summary: "Scegli file"
      }
    }
  },
  args: {
    etichetta: 'CARICA DOCUMENTO',
    etichettaTooltip: 'Etichetta del campo',
    descrizioneTooltip: 'Inserire un suggerimento o una descrizione relativa a questo campo.',
    etichettaBottone: 'Scegli file'
  },
  render: ({
    ...args
  }) => CreateInputFileLoader(args)
}`,...(o=(n=i.parameters)==null?void 0:n.docs)==null?void 0:o.source}}};const u=["FileLoader"];export{i as FileLoader,u as __namedExportsOrder,p as default};
