import{a as c}from"./iframe-Cq4HMdIu.js";import"./preload-helper-PPVm8Dsz.js";function s(e){const i=e.inErrore?" inail-input-error":"";return e.inErrore,`
<div class="col-xs-6 col-sm-4">
    <div class="dropdown">
        <label class="inail-label" id="multiSelect" for="multi_1">${e.etichetta}
             ${e.info?'<span role="button" aria-labelledby="multiselect" tabindex="0" class="fa fa-question-circle fa-lg" data-toggle="popover" data-trigger="focus" data-content="Inserire un suggerimento o una descrizione relativa a questo campo."></span>':""}
        </label>
        <input id="multi_1" type="select" aria-describedby="multi_help_1" data-input-type="multiselect" class="form-control inail-input inail-input-multiselect ${i} col-12" placeholder="Seleziona opzioni..." readonly  ${e.disabilitato?"disabled":""}>
        <span class="sr-only" id="multi_help_1">Premere invio e successivamente spostarsi con le frecce o il tasto tab</span>
        <ul class="inail-multiselect-dropdown-menu dropdown-menu" id="dropdownMenu">
            <li class="option-item">
                <div class=" inail-checkbox">
                        <input type="checkbox" id="check-1" class="custom-checkbox option-checkbox" value="Opzione 1" aria-label="checkbox Opzione 1">
						<label for="check-1">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 1</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                    <input type="checkbox" id="check-2" class="custom-checkbox option-checkbox" value="Opzione 2" aria-label="checkbox Opzione 2">
						<label for="check-2">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 2</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                        <input type="checkbox" id="check-3" class="custom-checkbox option-checkbox" value="Opzione 3" aria-label="checkbox Opzione 3">
						<label for="check-3">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 3</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                        <input type="checkbox" id="check-4" class="custom-checkbox option-checkbox" value="Opzione 4" aria-label="checkbox Opzione 4">
						<label for="check-4">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 4</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                        <input type="checkbox" id="check-5" class="custom-checkbox option-checkbox" value="Opzione 5" aria-label="checkbox Opzione 5">
						<label for="check-5">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 5</span>
						</label>
                </div>
            </li>
            
        </ul>
    </div>
    ${e.inErrore?`<span class="inail-span-error" id="error-multi-select"><i class="fa-solid fa-circle-exclamation"></i> ${e.messaggioErrore}</span>`:""}
    ${e.info?`<span class="inail-span-ht" id="hint-multi-select">${e.messaggioHelper}</span>`:""}
</div>`}function n(e){return`
<div class="col-xs-6 col-sm-4">
    <div class="dropdown">
        <label class="inail-label" for="multi_2">${e.etichetta}</label>
        <input id="multi_2" type="select" data-input-type="multiselect" class="form-control inail-input inail-input-multiselect col-12" placeholder="Seleziona opzioni..." ${e.disabilitato?"disabled":""} readonly>
       <ul class="inail-multiselect-dropdown-menu dropdown-menu" id="dropdownMenu">
            <li class="option-item">
                <div class=" inail-checkbox">
                                        <input type="checkbox" id="check-1" class="custom-checkbox option-checkbox" value="Opzione 1" aria-label="checkbox">
						<label for="check-1">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 1</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                    <input type="checkbox" id="check-2" class="custom-checkbox option-checkbox" value="Opzione 2" aria-label="checkbox">
						<label for="check-2">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 2</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                                        <input type="checkbox" id="check-3" class="custom-checkbox option-checkbox" value="Opzione 3" aria-label="checkbox">
						<label for="check-3">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 3</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                                       <input type="checkbox" id="check-4" class="custom-checkbox option-checkbox" value="Opzione 4" aria-label="checkbox">
						<label for="check-4">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 4</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                                        <input type="checkbox" id="check-5" class="custom-checkbox option-checkbox" value="Opzione 5" aria-label="checkbox">
						<label for="check-5">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 5</span>
						</label>
                </div>
            </li>
        </ul>
        <div class="inail-div-message"></div>
    </div>
</div>`}function r(e){const i=e.inErrore?" inail-input-error":"";return e.inErrore,`
<div class="col-xs-6 col-sm-4">
    <div class="dropdown">
        <label class="inail-label" for="multi_3">${e.etichetta}</label>
        <input type="select" id="multi_3" data-input-type="multiselect" class="form-control inail-input inail-input-multiselect ${i} col-12" placeholder="Seleziona opzioni..." readonly aria-describedby="error-multi-select multi_help_2">
                <span class="sr-only" id="multi_help_2">Premere invio e successivamente spostarsi con le frecce o il tasto tab</span>
        <ul class="inail-multiselect-dropdown-menu dropdown-menu" id="dropdownMenu">
            <li class="option-item">
                <div class=" inail-checkbox">
                                        <input type="checkbox" id="check-1" class="custom-checkbox option-checkbox" value="Opzione 1" aria-label="checkbox">
						<label for="check-1">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 1</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                    <input type="checkbox" id="check-2" class="custom-checkbox option-checkbox" value="Opzione 2" aria-label="checkbox">
						<label for="check-2">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 2</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                                        <input type="checkbox" id="check-3" class="custom-checkbox option-checkbox" value="Opzione 3" aria-label="checkbox">
						<label for="check-3">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 3</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                                       <input type="checkbox" id="check-4" class="custom-checkbox option-checkbox" value="Opzione 4" aria-label="checkbox">
						<label for="check-4">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 4</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                                        <input type="checkbox" id="check-5" class="custom-checkbox option-checkbox" value="Opzione 5" aria-label="checkbox">
						<label for="check-5">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 5</span>
						</label>
                </div>
            </li>
        </ul>
    </div>
    
        <div class="inail-div-message">
${e.inErrore?`<span class="inail-span-error" id="error-multi-select"><i class="fa-solid fa-circle-exclamation"></i> ${e.messaggioErrore}</span>`:""}   
            </div>

</div>`}function p(e){return`
<div class="col-xs-6 col-sm-4">
    <div class="dropdown">
        <label class="inail-label" id="label-info" for="multi_4">${e.etichetta}</label>
          ${e.info?`<span role="button" aria-labelledby="label-info" tabindex="0" class="fa fa-question-circle fa-lg" data-toggle="popover" data-trigger="focus" data-content="${e.descrizioneTooltip}"></span>`:""}
        <input type="select" id='multi_4' data-input-type="multiselect" class="form-control inail-input inail-input-multiselect col-12" placeholder="Seleziona opzioni..." readonly aria-describedby='hint-multi-select multi_help_3'>
                <span class="sr-only" id="multi_help_3">Premere invio e successivamente spostarsi con le frecce o il tasto tab</span>
        <ul class="inail-multiselect-dropdown-menu dropdown-menu" id="dropdownMenu">
            <li class="option-item">
                <div class=" inail-checkbox">
                                        <input type="checkbox" id="check-1" class="custom-checkbox option-checkbox" value="Opzione 1" aria-label="checkbox">
						<label for="check-1">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 1</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                    <input type="checkbox" id="check-2" class="custom-checkbox option-checkbox" value="Opzione 2" aria-label="checkbox">
						<label for="check-2">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 2</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                                        <input type="checkbox" id="check-3" class="custom-checkbox option-checkbox" value="Opzione 3" aria-label="checkbox">
						<label for="check-3">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 3</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                                       <input type="checkbox" id="check-4" class="custom-checkbox option-checkbox" value="Opzione 4" aria-label="checkbox">
						<label for="check-4">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 4</span>
						</label>
                </div>
            </li>
            <li class="option-item">
                <div class=" inail-checkbox">
                                        <input type="checkbox" id="check-5" class="custom-checkbox option-checkbox" value="Opzione 5" aria-label="checkbox">
						<label for="check-5">
							<span class="custom-checkbox-background mr-2">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							<span> Opzione 5</span>
						</label>
                </div>
            </li>
        </ul>
    </div>
    
        <div class="inail-div-message">
${e.info?`<span class="inail-span-ht" id="hint-multi-select">${e.messaggioHelper}</span>`:""}
            </div>
        </div>`}const u=`La Select è un controllo grafico che permette all'utente di selezionare un valore da una lista. Quando nessun valore è stato selezionato, deve mostrare un testo tipo “Selezione un'opzione”.
- Quando attivata mostra, facendo “cascare” (in inglese drop down) una lista di valori selezionabili. Una volta che l'utente seleziona un valore dalla lista, il controllo ritorna allo stato iniziale, mostrando il solo valore attualmente selezionato.

L'etichetta deve essere sempre fuori dal campo. Se il campo è “obbligatorio” devono essere inseriti: il simbolo “*” dopo dell'Etichetta (label) del Campo, l'attributo \`aria-required="true"\` nel tag input, select o textarea e,prima del form, la leggenda "I campi contrassegnati con l’asterisco (*) sono obbligatori."

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” `,d=`**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.
`,h={title:"Componenti/Form Items/Multiple Select",parameters:{docs:{description:{component:d},mdxPage:u,showAccessibility:!0}},decorators:[(e,i)=>c(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/jquery-multiselect.js"],!0),e=>`<main id="contenutoPrincipale">${e()}</main>`]},a={name:"Multiple Select",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il multiple select",defaultValue:{summary:"Label"}}},args:{etichetta:"Label"},render:e=>s(e)},l={name:"Multiple Select disabilitata",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il multiple select",defaultValue:{summary:"Label"}},disabilitato:{control:"boolean",description:"Imposta il multiple select come disabilitato",defaultValue:{summary:!0}}},args:{etichetta:"Label",disabilitato:!0},render:e=>n(e)},o={name:"Multiple Select con errore",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il multiple select",defaultValue:{summary:"Label"}},inErrore:{control:"boolean",description:"Imposta il multiple select con uno stato di errore",defaultValue:{summary:!0}},messaggioErrore:{control:"text",description:"Visualizza un messaggio di errore sotto il multiple select",defaultValue:{summary:"Messaggio d'errore"}}},args:{etichetta:"Label",inErrore:!0,messaggioErrore:"Messaggio d'errore"},render:e=>r(e)},t={name:"Multiple Select con tasto di info",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il multiple select",defaultValue:{summary:"Label"}},info:{control:"boolean",description:"Mostra un'icona di informazioni accanto al multiple select",defaultValue:{summary:!0}},messaggioHelper:{control:"text",description:"Visualizza un messaggio di supporto sotto il multiple select",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=>p(e)};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  name: "Multiple Select",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il multiple select",
      defaultValue: {
        summary: "Label"
      }
    }
  },
  args: {
    etichetta: "Label"
  },
  render: args => CreateInputMultiSelect(args)
}`,...a.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
  name: "Multiple Select disabilitata",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il multiple select",
      defaultValue: {
        summary: "Label"
      }
    },
    disabilitato: {
      control: "boolean",
      description: "Imposta il multiple select come disabilitato",
      defaultValue: {
        summary: true
      }
    }
  },
  args: {
    etichetta: "Label",
    disabilitato: true
  },
  render: args => CreateInputMultiSelectDisabled(args)
}`,...l.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  name: "Multiple Select con errore",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il multiple select",
      defaultValue: {
        summary: "Label"
      }
    },
    inErrore: {
      control: "boolean",
      description: "Imposta il multiple select con uno stato di errore",
      defaultValue: {
        summary: true
      }
    },
    messaggioErrore: {
      control: "text",
      description: "Visualizza un messaggio di errore sotto il multiple select",
      defaultValue: {
        summary: "Messaggio d'errore"
      }
    }
  },
  args: {
    etichetta: "Label",
    inErrore: true,
    messaggioErrore: "Messaggio d'errore"
  },
  render: args => CreateInputMultiSelectError(args)
}`,...o.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
  name: "Multiple Select con tasto di info",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il multiple select",
      defaultValue: {
        summary: "Label"
      }
    },
    info: {
      control: "boolean",
      description: "Mostra un'icona di informazioni accanto al multiple select",
      defaultValue: {
        summary: true
      }
    },
    messaggioHelper: {
      control: "text",
      description: "Visualizza un messaggio di supporto sotto il multiple select",
      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 => CreateInputMultiSelectInfo(args)
}`,...t.parameters?.docs?.source}}};const k=["InputMultipleSelect","InputMultipleSelectDisabled","InputMultipleSelectError","InputMultipleSelectTooltip"];export{a as InputMultipleSelect,l as InputMultipleSelectDisabled,o as InputMultipleSelectError,t as InputMultipleSelectTooltip,k as __namedExportsOrder,h as default};
