import{b as m}from"./Utilities-DayKp0i-.js";function v(){return`
<div class="combobox combobox-wrapper col-sm-4 noPaddingLeft">
    <label class="control-label inail-label" id="label-1">LABEL</label>
    <div class="inail-combobox-input-container">  
        <input type="text" id="combobox-input" class="inail-input form-control inail-combobox"
               placeholder="Digita per filtrare..." aria-labelledby="label-1 combo_info">
        <div class="options inail-combobox-panel" id="combobox-options">
            <div class="option" tabindex="0" value="">- seleziona opzione -</div>
            <div class="option" tabindex="0" value="Opzione 1">Opzione 1</div>
            <div class="option" tabindex="0" value="Opzione 2">Opzione 2</div>
            <div class="option" tabindex="0" value="Opzione 3">Opzione 3</div>
            <div class="option" tabindex="0" value="Opzione 4">Opzione 4</div>
            <div class="option" tabindex="0" value="Opzione 5">Opzione 5</div>
            <div class="option" tabindex="0" value="Opzione 6">Opzione 6</div>
            
        </div>
    </div>
</div>
`}function z(){return`
  <div class="combobox combobox-wrapper col-sm-4 noPaddingLeft">
  	<label class="control-label inail-label" for="id_mysuper_field" aria-labelledby="combo_info";>LABEL</label>
	<span class="sr-only" id="combo_info">Etichetta del campo (digita almeno un carattere per filtrare)</span>
        <input type="text" id="combobox-input" class="inail-input form-control inail-combobox" placeholder="Digita per filtrare..." disabled>
        <div class="options inail-combobox-panel" id="combobox-options">
            <div class="option" tabindex="0" value="Opzione 1">Opzione 1</div>
            <div class="option" tabindex="0" value="Opzione 2">Opzione 2</div>
            <div class="option" tabindex="0" value="Opzione 3">Opzione 3</div>
            <div class="option" tabindex="0" value="Opzione 4">Opzione 4</div>
            <div class="option" tabindex="0" value="Opzione 5">Opzione 5</div>
            <div class="option" tabindex="0" value="Opzione 6">Opzione 6</div>
		</div>
    </div>
`}function x(){return`
  <div class="combobox combobox-wrapper col-sm-4 noPaddingLeft">
  	<label class="control-label inail-label" id="label-1">LABEL 
 <i class="fa fa-question-circle fa-lg" 
                tabindex="0" 
                data-toggle="popover" 
                data-original-title="Etichetta del campo" 
                data-trigger="focus" 
                aria-label="Etichetta del campo" 
                data-content="Inserire un suggerimento o una descrizione relativa a questo campo."
                data-container="body" 
                (click)="onTooltipClick($event)">
             </i>    </label>
        <input type="text" id="combobox-input" class="inail-input form-control inail-combobox" placeholder="Digita per filtrare..." aria-labelledby="label-1 input-hint-1">
        <div class="options inail-combobox-panel" id="combobox-options">
            <div class="option" tabindex="0" value="">- seleziona opzione -</div>
            <div class="option" tabindex="0" value="Opzione 1">Opzione 1</div>
            <div class="option" tabindex="0" value="Opzione 2">Opzione 2</div>
            <div class="option" tabindex="0" value="Opzione 3">Opzione 3</div>
            <div class="option" tabindex="0" value="Opzione 4">Opzione 4</div>
            <div class="option" tabindex="0" value="Opzione 5">Opzione 5</div>
            <div class="option" tabindex="0" value="Opzione 6">Opzione 6</div>
		</div>
		<span class="inail-span-ht inail-span-ht-combobox">*Digitare per filtrare</span>
    </div>
`}const g=`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”`,f=`**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.
`,O={title:"Componenti/Form Items/Combobox",parameters:{docs:{description:{component:f},mdxPage:g,showCode:!0}},decorators:[(i,n)=>m(i,n,1,["static-webkit/js/custom-webkit.js","assets/js/custom-input-combobox.js"],!1),i=>`<main id="contenutoPrincipale">${i()}</main>`]},e={name:"Combobox",render:i=>v()},o={name:"Combobox disabilitata",render:i=>z()},a={name:"Combobox con tasto info",render:i=>x()};var t,l,r;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`{
  name: "Combobox",
  render: args => CreateInputCombobox()
}`,...(r=(l=e.parameters)==null?void 0:l.docs)==null?void 0:r.source}}};var s,c,d;o.parameters={...o.parameters,docs:{...(s=o.parameters)==null?void 0:s.docs,source:{originalSource:`{
  name: "Combobox disabilitata",
  render: args => CreateInputComboboxDisabled()
}`,...(d=(c=o.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};var p,b,u;a.parameters={...a.parameters,docs:{...(p=a.parameters)==null?void 0:p.docs,source:{originalSource:`{
  name: "Combobox con tasto info",
  render: args => CreateInputComboboxTooltip()
}`,...(u=(b=a.parameters)==null?void 0:b.docs)==null?void 0:u.source}}};const I=["Combobox","ComboboxDisabled","ComboboxTooltip"];export{e as Combobox,o as ComboboxDisabled,a as ComboboxTooltip,I as __namedExportsOrder,O as default};
