import{a as z}from"./Utilities-CQhZFhp5.js";function v(e){const a=e.inErrore?" inail-input-error":"";return`<div class="col-xs-12 noPadding">
  <div class="col-xs-12 col-md-11 col-lg-8 noPadding">
    <div>
      <p class="pull-right inail-textarea-counter" id="charCounter">0/500</p>
      <label class="control-label inail-label pull-left" for="label-textarea_1" id="textarea_1">${e.etichetta} 
        ${e.info?'<span role="button" aria-labelledby="textarea_!" 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>
    </div>
    <textarea id="label-textarea_1" aria-describedby="error-textarea hint-textarea" class="form-control inail-input${a}" input-type="textarea" placeholder="Inserisci qui il tuo testo" rows="5" maxlength="500" title="Textarea" type="text" oninput="updateCounter()"
     ${e.disabilitato?"disabled":""}></textarea>
    ${e.inErrore?`<span class="inail-span-error" id="error-textarea"><i class="fa-solid fa-circle-exclamation"></i> ${e.messaggioErrore}</span>`:""}
    ${e.info?`<span class="inail-span-ht" id="hint-textarea">${e.messaggioHelper}</span>`:""}
  </div>
</div>`}function h(e){return`<div class="col-xs-12 noPadding">
   <div class="col-xs-12 col-md-11 col-lg-8 noPadding">
      <div><p class="pull-right inail-textarea-counter text-muted">0/500</p><label class="control-label inail-label pull-left" for="label-textarea_1">${e.etichetta}</label></div>
      <textarea id='label-textarea_1' type="text" class="form-control inail-input" placeholder="Inserisci qui il tuo testo" rows="5" maxlength="500" title="Textarea" ${e.disabilitato?"disabled":""}></textarea>
   </div>
</div>`}function T(e){const a=e.inErrore?" inail-input-error":"";return`<div class="col-xs-12 noPadding">
   <div class="col-xs-12 col-md-11 col-lg-8 noPadding">
      <div><p class="pull-right inail-textarea-counter" id="charCounter">0/500</p>
      <label class="control-label inail-label pull-left" for="label-textarea_3">${e.etichetta}</label></div>
      <textarea id="label-textarea_3" aria-describedby="error-textarea" type="text" class="form-control inail-input ${a}" input-type="textarea" placeholder="Inserisci qui il tuo testo" rows="5" maxlength="500" title="Textarea" oninput="updateCounter()"></textarea>
      <div class="inail-div-message">
 ${e.inErrore?`<span class="inail-span-error" id="error-textarea"><i class="fa-solid fa-circle-exclamation"></i> ${e.messaggioErrore}</span>`:""}     
 </div>
   </div>
</div>`}function I(e){return`<div class="col-xs-12 noPadding">
   <div class="col-xs-12 col-md-11 col-lg-8 noPadding">
      <div>
      <p class="pull-right inail-textarea-counter" id="charCounter">0/500</p>
      <label class="control-label inail-label pull-left" for="label-textarea_4" id="label-textarea-info">Label</label>
      ${e.info?`<span role="button" aria-labelledby="label-textarea-info" tabindex="0" class="fa fa-question-circle fa-lg" data-toggle="popover"  data-trigger="focus" data-content="${e.descrizioneTooltip}"></span>`:""}      
        
      </div>
      <textarea aria-describedby="textarea-hint" id="label-textarea_4" type="text" class="form-control inail-input" input-type="textarea" placeholder="Inserisci qui il tuo testo" rows="5" maxlength="500" title="Textarea" oninput="updateCounter()"></textarea>
      <div class="inail-div-message">
       ${e.info?`<span class="inail-span-ht inail-span-ht-combobox" id='textarea-hint'>${e.messaggioHelper}</span>`:""}
       </div>
   </div>
</div>`}const y=`La textarea consente all'utente di inserire del testo.
Indicare sempre il numero massimo massima di caratteri che è possibile inserire.

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” `,E=`**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.
`,S={title:"Componenti/Form Items/Textarea",parameters:{docs:{description:{component:E},mdxPage:y,showAccessibility:!0}},decorators:[(e,a)=>z(e,a,4,["https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-webkit.js"],!0),e=>`<main id="contenutoPrincipale">${e()}</main>`]},i={name:"Textarea",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il textarea",defaultValue:{summary:"Label"}}},args:{etichetta:"Label"},render:e=>v(e)},t={name:"Textarea disabilitata",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il textarea",defaultValue:{summary:"Label"}},disabilitato:{control:"boolean",description:"Imposta il textarea come disabilitato",defaultValue:!0}},args:{etichetta:"Label",disabilitato:!0},render:e=>h(e)},r={name:"Textarea con errore",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il textarea",defaultValue:{summary:"Label"}},inErrore:{control:"boolean",description:"Imposta il textarea con uno stato di errore",defaultValue:!1},messaggioErrore:{control:"text",description:"Visualizza un messaggio di errore sotto il textarea",defaultValue:{summary:"Messaggio d'errore"}}},args:{etichetta:"Label",inErrore:!0,messaggioErrore:"Messaggio d'errore"},render:e=>T(e)},o={name:"Textarea con tasto di info",argTypes:{info:{control:"boolean",description:"Mostra un'icona di informazioni accanto al textarea",defaultValue:!0},messaggioHelper:{control:"text",description:"Visualizza un messaggio di supporto sotto il textarea",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:{info:!0,messaggioHelper:"Testo di aiuto",descrizioneTooltip:"Inserire un suggerimento o una descrizione relativa a questo campo."},render:e=>I(e)};var n,l,s;i.parameters={...i.parameters,docs:{...(n=i.parameters)==null?void 0:n.docs,source:{originalSource:`{
  name: "Textarea",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il textarea",
      defaultValue: {
        summary: "Label"
      }
    }
  },
  args: {
    etichetta: "Label"
  },
  render: args => CreateInputTextarea(args)
}`,...(s=(l=i.parameters)==null?void 0:l.docs)==null?void 0:s.source}}};var c,d,u;t.parameters={...t.parameters,docs:{...(c=t.parameters)==null?void 0:c.docs,source:{originalSource:`{
  name: "Textarea disabilitata",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il textarea",
      defaultValue: {
        summary: "Label"
      }
    },
    disabilitato: {
      control: "boolean",
      description: "Imposta il textarea come disabilitato",
      defaultValue: true
    }
  },
  args: {
    etichetta: "Label",
    disabilitato: true
  },
  render: args => CreateInputTextareaDisabled(args)
}`,...(u=(d=t.parameters)==null?void 0:d.docs)==null?void 0:u.source}}};var p,m,g;r.parameters={...r.parameters,docs:{...(p=r.parameters)==null?void 0:p.docs,source:{originalSource:`{
  name: "Textarea con errore",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il textarea",
      defaultValue: {
        summary: "Label"
      }
    },
    inErrore: {
      control: "boolean",
      description: "Imposta il textarea con uno stato di errore",
      defaultValue: false
    },
    messaggioErrore: {
      control: "text",
      description: "Visualizza un messaggio di errore sotto il textarea",
      defaultValue: {
        summary: "Messaggio d'errore"
      }
    }
  },
  args: {
    etichetta: "Label",
    inErrore: true,
    messaggioErrore: "Messaggio d'errore"
  },
  render: args => CreateInputTextareaError(args)
}`,...(g=(m=r.parameters)==null?void 0:m.docs)==null?void 0:g.source}}};var b,x,f;o.parameters={...o.parameters,docs:{...(b=o.parameters)==null?void 0:b.docs,source:{originalSource:`{
  name: "Textarea con tasto di info",
  argTypes: {
    info: {
      control: "boolean",
      description: "Mostra un'icona di informazioni accanto al textarea",
      defaultValue: true
    },
    messaggioHelper: {
      control: "text",
      description: "Visualizza un messaggio di supporto sotto il textarea",
      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: {
    info: true,
    messaggioHelper: "Testo di aiuto",
    descrizioneTooltip: "Inserire un suggerimento o una descrizione relativa a questo campo."
  },
  render: args => CreateInputTextareaInfo(args)
}`,...(f=(x=o.parameters)==null?void 0:x.docs)==null?void 0:f.source}}};const P=["Textarea","TextareaDisabled","TextareaError","TextareaInfo"];export{i as Textarea,t as TextareaDisabled,r as TextareaError,o as TextareaInfo,P as __namedExportsOrder,S as default};
