import{m as n}from"./iframe-I4S6H_qo.js";import"./preload-helper-PPVm8Dsz.js";function s(i){return`
<div class="inail-timepicker-container timepicker-wrapper col-sm-4 noPaddingLeft">
  <div class="sr-only" aria-live="polite" data-timepicker-status></div>
  <label class="control-label inail-label" for="timepicker_1">${i.etichetta}</label>
  <div class="inail-timepicker-input-container">
    <input type="text"
    id="timepicker_1"
           data-timepicker-input
           data-time-min="00:00"
           data-time-max="23:30"
           data-time-interval="30m"
           data-locale="it-IT"
           data-timepicker-format="24h"
           class="inail-input form-control inail-timepicker"
           aria-describedby="comboHint comboSpan inail-timepicker-error">
    <div class="inail-timepicker-options inail-timepicker-panel" id="timepicker_options_container" data-timepicker-list></div>
    <span id="comboSpan" class="sr-only">Premere invio per aprire le opzioni, spostarsi con le frecce e premere invio per selezionare</span>
    <span id="comboHint" class="inail-span-ht inail-span-ht-timepicker"></span>
  </div>
  <div class="inail-div-message" data-timepicker-message><span class="inail-span-error" data-timepicker-error id="inail-timepicker-error"> 
   <i class="fa-solid fa-circle-exclamation"></i> Formato errato </span></div>
</div>

`}function l(i){return`
  <div class="inail-timepicker-container timepicker-wrapper col-sm-4 noPaddingLeft">
  <div class="sr-only" aria-live="polite" data-timepicker-status></div>
  <label class="control-label inail-label" for="timepicker_2">${i.etichetta}</label>
  <div class="inail-timepicker-input-container">
    <input type="text"
    id="timepicker_2"
           data-timepicker-input
           data-time-min="00:00"
           data-time-max="23:30"
           data-time-interval="30m"
           data-locale="it-IT"
           data-timepicker-format="24h"
           class="inail-input form-control inail-timepicker"
           aria-describedby="comboHint comboSpan inail-timepicker-error_2"
          ${i.disabilitato?"disabled":""}>
    <div class="inail-timepicker-options inail-timepicker-panel" data-timepicker-list id="timepicker_options_container"></div>
    <span id="comboSpan" class="sr-only">Premere invio per aprire le opzioni, spostarsi con le frecce e premere invio per selezionare</span>
    <span id="comboHint" class="inail-span-ht inail-span-ht-timepicker"></span>
  </div>
  <div class="inail-div-message" data-timepicker-message>
   <span class="inail-span-error" data-timepicker-error id="inail-timepicker-error_2"> 
   <i class="fa-solid fa-circle-exclamation"></i> Formato errato </span> 
  </div>
</div>
`}function c(i){return`
<div class="inail-timepicker-container timepicker-wrapper col-sm-4 noPaddingLeft">
  <div class="sr-only" aria-live="polite" data-timepicker-status></div>
  <label class="control-label inail-label" for="timepicker_3">${i.etichetta}</label>
  <div class="inail-timepicker-input-container">
    <input type="text"
    id="timepicker_3"
           data-timepicker-input
           data-time-min="00:00"
           data-time-max="23:30"
           data-time-interval="30m"
           data-locale="it-IT"
           data-timepicker-format="24h"
           class="inail-input form-control inail-timepicker ${i.inErrore?" inail-input-error":""}"
           aria-describedby="comboHint comboSpan inail-timepicker-error_3">
    <div class="inail-timepicker-options inail-timepicker-panel" data-timepicker-list id="timepicker_options_container"></div>
    <span id="comboSpan" class="sr-only">Premere invio per aprire le opzioni, spostarsi con le frecce e premere invio per selezionare</span>
    <span id="comboHint" class="inail-span-ht inail-span-ht-timepicker"></span>
  </div>
  <div class="inail-div-message" data-timepicker-message>
  ${i.inErrore?` <span class="inail-span-error" id="inail-timepicker-error_3"> 
   <i class="fa-solid fa-circle-exclamation"></i> ${i.messaggioErrore}</span>`:`<span class="inail-span-error" data-timepicker-error id="inail-timepicker-error_3>"> 
   <i class="fa-solid fa-circle-exclamation"</i> ${i.messaggioErrore}</span>`}
  </div>
</div>
`}function p(i){return`
 <div class="inail-timepicker-container .timepicker-wrapper col-sm-4 noPaddingLeft">
  <div class="sr-only" aria-live="polite" data-timepicker-status></div>
  <label class="control-label inail-label" for="timepicker_4" id="inail-timepicker-container-info">${i.etichetta}</label>      
    ${i.info?`<span role="button" tabindex="0" 
					class="fa fa-question-circle fa-lg" 
					data-toggle="popover" 
					data-trigger="focus" 
          aria-labelledby='inail-timepicker-container-info'
					data-content="${i.descrizioneTooltip}"></span>`:""}
  <div class="inail-timepicker-input-container">
    <input type="text"
    id="timepicker_4"
           data-timepicker-input
           data-time-min="00:00"
           data-time-max="23:30"
           data-time-interval="30m"
           data-locale="it-IT"
           data-timepicker-format="24h"
           class="inail-input form-control inail-timepicker"
           aria-describedby="comboHint comboSpan inail-timepicker-error_4">
    <div class="inail-timepicker-options inail-timepicker-panel" data-timepicker-list id="timepicker_options_container"></div>
    <span id="comboSpan" class="sr-only">Premere invio per aprire le opzioni, spostarsi con le frecce e premere invio per selezionare</span>
    <span id="comboHint" class="inail-span-ht inail-span-ht-timepicker"></span>
  </div>
  <div class="inail-div-message" data-timepicker-message >
   <!-- messaggio di errore --> 
   <span class="inail-span-error" data-timepicker-error id="inail-timepicker-error_4"> 
   <i class="fa-solid fa-circle-exclamation"></i> Formato errato </span> 
   <!-- helper --> 
  </div>
</div>

`}const m="",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.
`,g={title:"Componenti/Form Items/Timepicker",parameters:{docs:{description:{component:d},mdxPage:m,showAccessibility:!0}},decorators:[(i,o)=>n(i,o,3,["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/custom-input-timepicker.js"],!0),i=>`<main id="contenutoPrincipale">${i()}</main>`]},e={name:"Timepicker",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il combobox",defaultValue:{summary:"Label"}}},args:{etichetta:"Label"},render:i=>s(i)},a={name:"Timepicker disabilitata",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il combobox",defaultValue:{summary:"Label"}},disabilitato:{control:"boolean",description:"Imposta il combobox come disabilitato",defaultValue:{summary:!0}}},args:{etichetta:"Label",disabilitato:!0},render:i=>l(i)},t={name:"Timepicker con errore",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il select",defaultValue:{summary:"Label"}},inErrore:{control:"boolean",description:"Imposta il select con uno stato di errore",defaultValue:{summary:!0}},messaggioErrore:{control:"text",description:"Visualizza un messaggio di errore sotto il select",defaultValue:{summary:"Messaggio d'errore"}}},args:{etichetta:"Label",inErrore:!0,messaggioErrore:"Messaggio d'errore"},render:i=>c(i)},r={name:"Timepicker con tasto di info",argTypes:{etichetta:{control:"text",description:"Specifica l'etichetta visualizzata sopra il combobox",defaultValue:{summary:"Label"}},info:{control:"boolean",description:"Mostra un'icona di informazioni accanto al combobox",defaultValue:{summary:!0}},messaggioHelper:{control:"text",description:"Inserisci l’orario nel formato HH:MM ",defaultValue:{summary:"*Inserisci l’orario nel formato HH:MM "}},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:"Digitare per filtrare o premere invio per aprire le opzioni e successivamente spostarsi con le frecce",descrizioneTooltip:"Inserire un suggerimento o una descrizione relativa a questo campo."},render:i=>p(i)};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
  name: "Timepicker",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il combobox",
      defaultValue: {
        summary: "Label"
      }
    }
  },
  args: {
    etichetta: "Label"
  },
  render: args => CreateInputTimepicker(args)
}`,...e.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  name: "Timepicker disabilitata",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il combobox",
      defaultValue: {
        summary: "Label"
      }
    },
    disabilitato: {
      control: "boolean",
      description: "Imposta il combobox come disabilitato",
      defaultValue: {
        summary: true
      }
    }
  },
  args: {
    etichetta: "Label",
    disabilitato: true
  },
  render: args => CreateInputTimepickerDisabled(args)
}`,...a.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
  name: "Timepicker con errore",
  argTypes: {
    etichetta: {
      control: 'text',
      description: "Specifica l'etichetta visualizzata sopra il select",
      defaultValue: {
        summary: "Label"
      }
    },
    inErrore: {
      control: "boolean",
      description: "Imposta il select con uno stato di errore",
      defaultValue: {
        summary: true
      }
    },
    messaggioErrore: {
      control: 'text',
      description: "Visualizza un messaggio di errore sotto il select",
      defaultValue: {
        summary: "Messaggio d'errore"
      }
    }
  },
  args: {
    etichetta: 'Label',
    inErrore: true,
    messaggioErrore: "Messaggio d'errore"
  },
  render: args => CreateInputTimepickerError(args)
}`,...t.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  name: "Timepicker con tasto di info",
  argTypes: {
    etichetta: {
      control: "text",
      description: "Specifica l'etichetta visualizzata sopra il combobox",
      defaultValue: {
        summary: "Label"
      }
    },
    info: {
      control: "boolean",
      description: "Mostra un'icona di informazioni accanto al combobox",
      defaultValue: {
        summary: true
      }
    },
    messaggioHelper: {
      control: "text",
      description: "Inserisci l’orario nel formato HH:MM ",
      defaultValue: {
        summary: "*Inserisci l’orario nel formato HH:MM "
      }
    },
    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: "Digitare per filtrare o premere invio per aprire le opzioni e successivamente spostarsi con le frecce",
    descrizioneTooltip: "Inserire un suggerimento o una descrizione relativa a questo campo."
  },
  render: args => CreateInputTimepickerTooltip(args)
}`,...r.parameters?.docs?.source}}};const f=["Timepicker","TimepickerDisabled","TimepickerError","TimepickerTooltip"];export{e as Timepicker,a as TimepickerDisabled,t as TimepickerError,r as TimepickerTooltip,f as __namedExportsOrder,g as default};
