import{b as e}from"./Utilities-BAFDtIJ2.js";const P=()=>`<div class="tabella table-responsive">
   <h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
   <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
   <table id="tabella-base" class="table display tabella-base">
      <caption class="marginBottom">Inserire descrizione tabella qui</caption>
      <thead>
         <tr>
            <th><span class="thLabel">Colonna 1</span></th>
            <th><span class="thLabel">Colonna 2</span></th>
            <th><span class="thLabel">Colonna 3</span></th>
            <th><span class="thLabel">Colonna 4</span></th>
            <th>Azioni</th>
         </tr>
      </thead>
      <tbody >
         <tr>
            <td>Lorem ipsum 1</td>
            <td>Lorem ipsum 1</td>
            <td>Lorem ipsum 1</td>
            <td>Lorem ipsum 1</td>
            <td class="td-icons">
               <button type="button" class="col-xs-8" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>Lorem ipsum 2</td>
            <td>Lorem ipsum 2</td>
            <td>Lorem ipsum 2</td>
            <td>Lorem ipsum 2</td>
            <td class="td-icons">
               <button type="button" class="col-xs-8" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>Lorem ipsum 3</td>
            <td>Lorem ipsum 3</td>
            <td>Lorem ipsum 3</td>
            <td>Lorem ipsum 3</td>
            <td class="td-icons">
               <button type="button" class="col-xs-8" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>Lorem ipsum 4</td>
            <td>Lorem ipsum 4</td>
            <td>Lorem ipsum 4</td>
            <td>Lorem ipsum 4</td>
            <td class="td-icons">
               <button type="button" class="col-xs-8" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
      </tbody>
   </table>
</div>`,D=(t,a)=>`<div class="tabella table-responsive">
   <h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
   <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
   <table id="tabella-1" class="table display">
      <caption class="marginBottom">Inserire descrizione tabella qui</caption>
      <thead>
         <tr>
            <th>Colonna 1</th>
            <th>Colonna 2</th>
            <th>Colonna 3</th>
            <th>Colonna 4</th>
            <th>Azioni</th>
         </tr>
      </thead>
      <tbody >
         <tr>
            <td>1</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>												
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>												
               </button>
            </td>
         </tr>
         <tr>
            <td>2</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>3</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>4</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>5</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>6</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>7</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>	
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>8</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>9</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>10</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>11</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>12</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>13</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>	
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>14</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>15</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>16</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>	
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>17</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>												
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>												
               </button>
            </td>
         </tr>
         <tr>
            <td>18</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>
               </button>
            </td>
         </tr>
         <tr>
            <td>19</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <button type="button" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento">
               <span class="fas fa-pencil-alt"></span>												
               </button>
               <button type="button" class="col-xs-4" data-toggle="tooltip" data-original-title="Rimuovi elemento">
               <span class="fa fa-trash-alt"></span>												
               </button>
            </td>
         </tr>
      </tbody>
   </table>
</div>`,q=()=>`<div class="tabella table-responsive">
   <h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
   <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
   <div class="col-xs-12 caption noPaddingLeft">Inserire descrizione tabella qui</div>
   <table id="tabella-2" class="table accordionTab display">
      <caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
      <thead>
         <tr>
            <th>Colonna 1</th>
            <th>Colonna 2</th>
            <th>Colonna 3</th>
            <th>Dettaglio</th>
         </tr>
      </thead>
      <tbody role="tablist" aria-multiselectable="true">
         <tr id="headingOne">
            <td>1</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">											
               <button aria-label="Espandi/riduci riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control" aria-expanded="false"></button>
               <span tabindex="0" aria-label="Informazioni sulla riga" class="warning btn-link noPadding" data-trigger="focus" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." data-original-title="" title="Spiegazione del warning">
               <span class="fa fa-exclamation-triangle" title="Spiegazione del warning"></span>
               </span>
            </td>
         </tr>
         <tr>
            <td>2</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">											
               <button aria-label="Espandi/riduci riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control" aria-expanded="false"></button>
               <span tabindex="0" aria-label="Informazioni sulla riga" class="warning btn-link noPadding" data-trigger="focus" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." data-original-title="" title="Spiegazione del warning">
               <span class="fa fa-exclamation-triangle" title="Spiegazione del warning"></span>
               </span>
            </td>
         </tr>
         <tr>
            <td>3</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">											
               <button aria-label="Espandi/riduci riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control" aria-expanded="false"></button>
               <span tabindex="0" aria-label="Informazioni sulla riga" class="warning btn-link noPadding" data-trigger="focus" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." data-original-title="" title="Spiegazione del warning">
               <span class="fa fa-exclamation-triangle" title="Spiegazione del warning"></span>
               </span>
            </td>
         </tr>
         <tr>
            <td>4</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <span class="noPadding"></span>
               <button aria-label="Espandi/riduci riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control" aria-expanded="false"></button>
            </td>
         </tr>
         <tr>
            <td>5</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <span class="noPadding"></span>
               <button aria-label="Espandi/riduci riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control"></button>
            </td>
         </tr>
         <tr>
            <td>6</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">											
               <button aria-label="Espandi/riduci riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control" aria-expanded="false"></button>
               <span tabindex="0" aria-label="Informazioni sulla riga" class="warning btn-link noPadding" data-trigger="focus" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." data-original-title="" title="Spiegazione del warning">
               <span class="fa fa-exclamation-triangle" title="Spiegazione del warning"></span>
               </span>
            </td>
         </tr>
         <tr>
            <td>7</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">											
               <button aria-label="Espandi/riduci riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control" aria-expanded="false"></button>
               <span tabindex="0" aria-label="Informazioni sulla riga" class="warning btn-link noPadding" data-trigger="focus" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." data-original-title="" title="Spiegazione del warning">
               <span class="fa fa-exclamation-triangle" title="Spiegazione del warning"></span>
               </span>
            </td>
         </tr>
      </tbody>
   </table>
</div>`,E=`### Titolo: Componente HTML "Table" del WebKit INAIL

#### Overview

Il componente "Table" è utilizzato per la visualizzazione strutturata di dati, generalmente disposti in righe e colonne. Le tabelle sono un elemento essenziale nelle interfacce utente, poiché consentono di presentare grandi quantità di informazioni in modo chiaro e ordinato. La loro efficacia dipende dalla capacità di organizzare contenuti complessi in una struttura leggibile, favorendo la comprensione e l'accessibilità.

#### Formatting

Il componente "Table" è formattato seguendo le linee guida di design del WebKit INAIL, garantendo un aspetto coerente con il resto della piattaforma. Ogni cella è progettata per mantenere un'adeguata spaziatura interna (padding) e margini tra le righe, migliorando la leggibilità del contenuto. Le tabelle possono avere intestazioni ben definite, evidenziate tramite uno stile grafico differente (ad esempio, testo in grassetto o sfondo di colore diverso), per distinguerle chiaramente dai dati.

#### Content

Il contenuto del componente "Table" può essere organizzato in:

- **Intestazioni di colonna**: descrivono il tipo di dato contenuto nella colonna sottostante.
- **Righe di dati**: ogni riga rappresenta un'unità logica di informazioni. Le celle contengono dati specifici per ogni colonna, che possono includere testo, numeri, o altri elementi come icone.
- **Righe di riepilogo** (opzionale): per fornire una sintesi o un calcolo (ad esempio, somme totali) alla fine della tabella.

#### Behaviors

Le tabelle possono avere diverse funzionalità interattive che ne facilitano l'uso, tra cui:

- **Ordinamento**: le colonne possono essere ordinate cliccando sull'intestazione. Questa funzione aiuta l'utente a riordinare rapidamente i dati in base a criteri specifici (es. alfabetico, numerico).
- **Paginazione**: utile per dividere i dati in più pagine, soprattutto quando la quantità di informazioni è considerevole.
- **Filtro**: permette di cercare dati specifici all'interno della tabella, migliorando la navigabilità e l'esperienza utente.
- **Selezione**: possibilità di selezionare righe (singole o multiple) per eseguire azioni specifiche, come la cancellazione o la modifica.

#### Usage

Le tabelle sono utilizzate in contesti in cui è necessario mostrare dati comparabili in modo organizzato. Gli scenari d'uso tipici includono:

- **Liste di utenti** o **dati anagrafici**.
- **Report di monitoraggio** o **statistiche**.
- **Cataloghi di prodotti** o **inventari**.

#### CSS and JS References

- [CSS del componente Table](https://lab.endow.cloud/apps/storybook/static/css/table.css)
  - **Classi utilizzate**:
    - \`.table\`: classe principale per lo stile della tabella, definisce bordi e spaziatura.
    - \`.table-header\`: classe per l'intestazione della tabella, applica uno stile distintivo per le intestazioni.
    - \`.table-row\`: classe per le righe della tabella, gestisce lo stile di base delle righe.
    - \`.table-cell\`: classe per le celle, definisce padding e allineamento del contenuto.
- [JavaScript per l'interattività](https://lab.endow.cloud/apps/storybook/static/js/table.js)

#### Interactions

Le interazioni previste per questo componente includono:

- **Hover**: evidenziazione della riga su cui si passa il mouse, migliorando la percezione dell'utente riguardo alla selezione corrente.
- **Click su intestazioni**: per abilitare l'ordinamento dei dati.
- **Input di filtro**: permette di inserire criteri di ricerca per ridurre il numero di righe visibili.

Questa descrizione segue le best practice di progetti simili, come quello indicato per il componente "Breadcrumb" di UNDP, al fine di garantire una documentazione chiara, esaustiva e strutturata per ogni componente del WebKit INAIL.
`,R="Le tabelle che seguono hanno tutte un comportamento responsive con utilizzo di scrollbar. Nel caso la tabella non preveda l'utilizzo di funzioni complesse (accordion, ordinamenti di colonne, checkbox,..) é possibile scegliere se utilizzare la TABELLA SEMPLICE o TABELLA SEMPLICE RESPONSIVE ALTERNATIVA. Quest'ultima soluzione prevede un comportamento con scrollbar fino ad una definita risoluzione (punto di collasso), al di sotto della quale le colonne si dispongono in riga e i relativi valori nella seconda colonna.\n\nIl tag `<caption>` deve essere nascosto aggiungendo la classe `sr-only` solo quando gli elementi aggiuntivi presenti nella tabella non permettono una corretta posizione della descrizione rispetto alla tabella. Solo in quel caso é da preferire il posizionamento della descrizione nel div precedente il tag `<table>`.\nLa funzione di ordinamento delle righe in ordine crescente/decrescente deve essere inserita solo quando questa funzione è realmente utile all'utente (per esempio, nel caso di una colonna \"Note aggiuntive\" la funzione non dovrà essere presente). La funzione di ordinamento non deve assolutamente essere inserita nelle colonne che possono contenere bottoni o elementi che permettono l'input dell'utente.\n";function _(){return`<div class="tabella table-responsive">
  <h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
  <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
  <div class="col-xs-12 caption noPaddingLeft">Inserire descrizione tabella qui</div>
  <table id="tabella-3" class="table display">
    <caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
    <thead>
	  <tr>
		<th class="col-md-1 thCheckAll" aria-label="Seleziona">
		  <label for="check_all">Seleziona</label>
		  <input type="checkbox" id="check_all" aria-label="Seleziona tutte le righe">
		</th>
		<th class="col-md-3">Colonna 2</th>
		<th class="col-md-4">Colonna 3</th>
		<th class="col-md-4">Colonna 4</th>
	  </tr>
    </thead>
    <tbody>
      <tr>
        <td aria-hidden="false">
          <input id="check_1" type="checkbox" class="checkMe primoCheck" title="Seleziona questa riga">
          <label for="check_1"></label>
        </td>
        <td>1</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td aria-hidden="false">
          <input id="check_2" type="checkbox" class="checkMe" title="Seleziona questa riga">
          <label for="check_2"></label>
        </td>
        <td>2</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td aria-hidden="false">
          <input id="check_3" type="checkbox" class="checkMe" title="Seleziona questa riga">
          <label for="check_3"></label>
        </td>
        <td>3</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td aria-hidden="false">
          <input id="check_19" type="checkbox" class="checkMe" title="Seleziona questa riga">
          <label for="check_19"></label>
        </td>
        <td>4</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td aria-hidden="false">
          <input id="check_20" type="checkbox" class="checkMe" title="Seleziona questa riga">
          <label for="check_20"></label>
        </td>
        <td>5</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td aria-hidden="false">
          <input id="check_21" type="checkbox" class="checkMe" title="Seleziona questa riga">
          <label for="check_21"></label>
        </td>
        <td>6</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td aria-hidden="false">
          <input id="check_31" type="checkbox" class="checkMe" title="Seleziona questa riga">
          <label for="check_31"></label>
        </td>
        <td>7</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td aria-hidden="false">
          <input id="check_32" type="checkbox" class="checkMe" title="Seleziona questa riga">
          <label for="check_32"></label>
        </td>
        <td>8</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td aria-hidden="false">
          <input id="check_33" type="checkbox" class="checkMe" title="Seleziona questa riga">
          <label for="check_33"></label>
        </td>
        <td>9</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td aria-hidden="false">
          <input id="check_34" type="checkbox" class="checkMe" title="Seleziona questa riga">
          <label for="check_34"></label>
        </td>
        <td>10</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td aria-hidden="false">
          <input id="check_35" type="checkbox" class="checkMe" title="Seleziona questa riga">
          <label for="check_35"></label>
        </td>
        <td>11</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td aria-hidden="false">
          <input id="check_45" type="checkbox" class="checkMe" title="Seleziona questa riga">
          <label for="check_45"></label>
        </td>
        <td>12</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
    </tbody>
  </table>
  <div class="table-footer-action">
    <button type="submit" class="pull-right btn btn-primary">Bottone</button>
  </div>
</div>`}function N(){return`<div class="download-tab form-grey tabella table-responsive">
   <h3 class="col-xs-9 col-sm-10 table-title pull-left">Titolo Tabella</h3>
   <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
   <div class="col-xs-12 caption">Inserire descrizione tabella qui</div>
   <form class="row" id="tab-form-1">
      <table class="table dataTable col-xs-12" id="download-tab-id">
         <caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
         <thead>
            <tr>
               <th scope="col" class="col-xs-3"><span class="thLabel">Colonna 1</span></th>
               <th scope="col" class="col-xs-8"><span class="thLabel">Colonna 2</span></th>
               <th scope="col" class="col-xs-1"><span class="thLabel">Download</span></th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Lorem ipsum</td>
               <td>Lorem ipsum</td>
               <td class="td-icons">
                  <button type="button" data-toggle="tooltip" data-original-title="Scarica elemento"><span class="fa fa-download"></span></button>
               </td>
            </tr>
            <tr>
               <td>Lorem ipsum</td>
               <td>Lorem ipsum</td>
               <td class="td-icons">
                  <button type="button" data-toggle="tooltip" data-original-title="Scarica elemento"><span class="fa fa-download"></span></button>
               </td>
            </tr>
            <tr>
               <td>Lorem ipsum</td>
               <td>Lorem ipsum</td>
               <td class="td-icons">
                  <button type="button" data-toggle="tooltip" data-original-title="Scarica elemento"><span class="fa fa-download"></span></button>
               </td>
            </tr>
         </tbody>
      </table>
      <div class=" col-xs-12 baseFooter">
         <p>Lorem ipsum dolor sit amet <a href="#1">Scarica</a></p>
      </div>
   </form>
</div>`}function A(){return`<div class="notifiche-tab tabella table-responsive">
   <h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
   <a href="javascript:void(0)" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>							
   <table id="tabella-notifica" class="table">
      <caption class="marginBottom">Inserire descrizione tabella qui</caption>
      <thead>
         <tr>
            <th scope="col" class="col-md-3"><span class="thLabel">Colonna 1</span></th>
            <th scope="col" class="col-md-2"><span class="thLabel">Colonna 2</span></th>
            <th scope="col" class="col-md-3"><span class="thLabel">Colonna 3</span></th>
            <th scope="col" class="col-md-2"><span class="thLabel">Colonna 4</span></th>
            <th scope="col" class="col-md-2"><span class="thLabel">Notifiche</span></th>
         </tr>
      </thead>
      <tbody>
         <tr class="unreadMessage">
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <span class="iconaNotifica" data-toggle="modal" data-target="#modale-1">
               <a href="javascript:void(0)"  class="far fa-file-alt icon-wrapper" data-toggle="tooltip" data-original-title="Visualizza notifiche - C'è una nuova notifica">
               <span class="badge" aria-hidden="true">1</span>
               </a>
               </span>
               <span class="iconaNotifica" data-toggle="modal" data-target="#modale-2">
               <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="Visualizza pagamenti - Ci sono due nuove notifiche" class="fas fa-euro-sign icon-wrapper">
               <span class="badge" aria-hidden="true">2</span>
               </a>	
               </span>
            </td>
         </tr>
         <tr class="unreadMessage">
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <span class="iconaNotifica" data-toggle="modal" data-target="#modale-1">
               <a href="javascript:void(0)"  class="far fa-file-alt icon-wrapper" data-toggle="tooltip" data-original-title="Visualizza notifiche - C'è una nuova notifica">
               <span class="badge" aria-hidden="true">1</span>
               </a>
               </span>
               <span class="iconaNotifica" data-toggle="modal" data-target="#modale-2">
               <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="Visualizza pagamenti - Ci sono due nuove notifiche" class="fas fa-euro-sign icon-wrapper">
               <span class="badge" aria-hidden="true">2</span>
               </a>	
               </span>
            </td>
         </tr>
         <tr>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum</td>
            <td class="td-icons">
               <span style="cursor:default;padding-right:39px;" class="iconaNotifica">									
               <a class="far fa-file-alt icon-wrapper" href="javascript:void(0)" data-toggle="tooltip" data-original-title="Visualizza notifiche - Non ci sono nuove notifiche">
               <span class="badge" aria-hidden="true" style="display:none">0</span>
               </a>																								
               </span>
               <span style="cursor:default" class="iconaNotifica">
               <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="Visualizza pagamenti - Non ci sono nuove notifiche" class="fas fa-euro-sign icon-wrapper">
               <span class="badge" aria-hidden="true" style="display:none">0</span>
               </a>																							
               </span>
            </td>
         </tr>
      </tbody>
   </table>
   <!-- Modale 1-->
   <div class="modal fade" role="dialog" id="modale-1" tabindex="-1" aria-labelledby="titolo-idModalLista">
      <div class="vertical-alignment-helper">
         <div class="modal-dialog  modal-dialog-centered">
            <div class="modal-content">
               <div class="modal-header">
                  <div class="modal-title" id="titolo-idModalLista">Titolo modale lista</div>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Chiudi finestra di dialogo">
                  <span aria-hidden="true">&times;</span>
                  </button>
               </div>
               <div class="modal-body tabella">
                  <table class="table-modal no-heading" title="Inserire descrizione qui">
                     <caption class="sr-only">Inserire descrizione modale</caption>
                     <thead>
                        <tr>
                           <th scope="col" class="col-md-6">Colonna 1</th>
                           <th scope="col" class="col-md-6">Colonna 2</th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr class="unreadMessage">
                           <td>Lorem ipsum dolor</td>
                           <td>Lorem ipsum dolor</td>
                        </tr>
                     </tbody>
                  </table>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-link pull-right lowerText">
                  Link
                  </button>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- Modale 2 -->
   <div class="modal fade" role="dialog" id="modale-2" tabindex="-1" aria-labelledby="idTitoloTabella">
      <div class="vertical-alignment-helper">
         <div class="modal-dialog  modal-dialog-centered">
            <div class="modal-content">
               <div class="modal-header">
                  <div class="modal-title" id="idTitoloTabella">Titolo modale tabella</div>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Chiudi finestra di dialogo">
                  <span aria-hidden="true">&times;</span>
                  </button>
               </div>
               <div class="modal-body">
                  <div class="tabella">
                     <table class="tabella-base">
                        <caption class="sr-only">Inserire descrizione tabella qui</caption>
                        <thead>
                           <tr>
                              <th scope="col" class="col-md-3"><span class="thLabel">Colonna 1</span></th>
                              <th scope="col" class="col-md-3"><span class="thLabel">Colonna 2</span></th>
                              <th scope="col" class="col-md-3"><span class="thLabel">Colonna 3</span></th>
                           </tr>
                        </thead>
                        <tbody >
                           <tr class="unreadMessage">
                              <td>Dato 1</td>
                              <td>Dato 2</td>
                              <td>Dato 3</td>
                           </tr>
                           <tr>
                              <td>Dato 1</td>
                              <td>Dato 2</td>
                              <td>Dato 3</td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <div class="modal-footer">
                     <button type="button" class="btn btn-link pull-right">
                     Link
                     </button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>`}function W(){return`<div class="status-tab tabella table-responsive">
   <h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
   <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
   <div class="col-xs-12 caption marginBottom noPaddingLeft">Inserire descrizione tabella qui</div>
   <table id="tab-status" class="table accordionTab display dataTable marginTop">
      <caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
      <thead>
         <tr>
            <th scope="col" class="col-xs-6">Colonna 1</th>
            <th scope="col" class="col-xs-2">Colonna 2</th>
            <th scope="col" class="col-xs-2">Colonna 3</th>
            <th scope="col" class="col-xs-2">Dettaglio</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td class="col-xs-6">Lorem ipsum</td>
            <td class="col-xs-2">Lorem ipsum</td>
            <td class="col-xs-2">Dato 1
               <span class="sr-only" id="stato1">Stato avanzamento: 100%</span>
               <span class="progress" aria-describedby="stato1" aria-hidden="true">
               <span class="progress-bar progress-bar-100" role="progressbar" aria-valuenow="100"
                  aria-valuemin="0" aria-valuemax="100" style="width:100%" title="Stato avanzamento: 100%">
               </span>
               </span>
            </td>
            <td class="col-xs-2"><button title="Espandi/Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control" aria-expanded="false"></button></td>
         </tr>
         <tr>
            <td class="col-xs-6">Lorem ipsum</td>
            <td class="col-xs-2">Lorem ipsum</td>
            <td class="col-xs-2">Dato 2
               <span class="sr-only" id="stato2">Stato avanzamento: 75%</span>
               <span class="progress" aria-describedby="stato2" aria-hidden="true">
               <span class="progress-bar progress-bar-75" role="progressbar" aria-valuenow="75"
                  aria-valuemin="0" aria-valuemax="100" style="width:75%" title="Stato avanzamento: 75%">
               </span>
               </span>
            </td>
            <td class="col-xs-2"><button title="Espandi/Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control" aria-expanded="false"></button></td>
         </tr>
         <tr>
            <td class="col-xs-6">Lorem ipsum</td>
            <td class="col-xs-2">Lorem ipsum</td>
            <td class="col-xs-2">Dato 3
               <span class="sr-only" id="stato3">Stato avanzamento: 75%</span>
               <span class="progress" aria-describedby="stato3" aria-hidden="true">
               <span class="progress-bar progress-bar-75" role="progressbar" aria-valuenow="75"
                  aria-valuemin="0" aria-valuemax="100" style="width:75%" title="Stato avanzamento: 75%">
               </span>
               </span>
            </td>
            <td class="col-xs-2"><button title="Espandi/Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control" aria-expanded="false"></button></td>
         </tr>
         <tr>
            <td class="col-xs-6">Lorem ipsum</td>
            <td class="col-xs-2">Lorem ipsum</td>
            <td class="col-xs-2">Dato 4
               <span class="sr-only" id="stato4">Stato avanzamento: 25%</span>
               <span class="progress" aria-describedby="stato4" aria-hidden="true">
               <span class="progress-bar progress-bar-25" role="progressbar" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100" style="width:25%" title="Stato avanzamento: 15%">
               </span>
               </span>
            </td>
            <td class="col-xs-2"><button title="Espandi/Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control" aria-expanded="false"></button></td>
         </tr>
         <tr>
            <td class="col-xs-6">Lorem ipsum</td>
            <td class="col-xs-2">Lorem ipsum</td>
            <td class="col-xs-2">Dato 5
               <span class="sr-only" id="stato5">Stato avanzamento: 50%</span>
               <span class="progress" aria-describedby="stato5" aria-hidden="true">
               <span class="progress-bar progress-bar-50" role="progressbar" aria-valuenow="50"
                  aria-valuemin="0" aria-valuemax="100" style="width:50%" title="Stato avanzamento: 50%">
               </span>
               </span>
            </td>
            <td class="col-xs-2"><button title="Espandi/Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control" aria-expanded="false"></button></td>
         </tr>
         <tr>
            <td class="col-xs-6">Lorem ipsum</td>
            <td class="col-xs-2">Lorem ipsum</td>
            <td class="col-xs-2">Dato 6
               <span class="sr-only" id="stato6">Stato avanzamento: 100%</span>
               <span class="progress" aria-describedby="stato6" aria-hidden="true">
               <span class="progress-bar progress-bar-100" role="progressbar" aria-valuenow="100"
                  aria-valuemin="0" aria-valuemax="100" style="width:100%" title="Stato avanzamento: 100%">
               </span>
               </span>
            </td>
            <td class="col-xs-2"><button title="Espandi/Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control" aria-expanded="false"></button></td>
         </tr>
         <tr>
            <td class="col-xs-6">Lorem ipsum</td>
            <td class="col-xs-2">Lorem ipsum</td>
            <td class="col-xs-2">Dato 7
               <span class="sr-only" id="stato7">Stato avanzamento: 50%</span>
               <span class="progress" aria-describedby="stato7" aria-hidden="true">
               <span class="progress-bar progress-bar-50" role="progressbar" aria-valuenow="50"
                  aria-valuemin="0" aria-valuemax="100" style="width:50%" title="Stato avanzamento: 50%">
               </span>
               </span>
            </td>
            <td class="col-xs-2"><button title="Espandi/Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control" aria-expanded="false"></button></td>
         </tr>
      </tbody>
   </table>
</div>`}const B={title:"Components/Griglie e strutture/Esempi strutture Tabelle",tags:["autodocs"],render:()=>P(),parameters:{docs:{description:{component:E},mdxPage:R,showAccessibility:!0,showCode:!0}},decorators:[t=>`<main id="contenutoPrincipale">${t()}</main>`]},o={name:"Tabella semplice"},s={name:"Tabella uno",render:()=>D(),decorators:[(t,a)=>e(t,a,4,["static-webkit/js/custom-webkit.js","static-webkit/js/dataTablesEdit.js"],!0)]},i={name:"Tabella con accordion",argTypes:{showAccordion:{control:"boolean",table:{defaultValue:{summary:!1}},description:"Mostra/Nasconde l'accordion."}},decorators:[(t,a)=>e(t,a,4,["static-webkit/js/custom-webkit.js","static-webkit/js/dataTablesEdit.js"],!0)],render:()=>q()},l={name:"Tabella con checkbox",decorators:[(t,a)=>e(t,a,4,["static-webkit/js/custom-webkit.js","static-webkit/js/dataTablesEdit.js"],!0)],render:()=>_()},n={name:"Tabella con elementi in download",decorators:[(t,a)=>e(t,a,4,["static-webkit/js/custom-webkit.js","static-webkit/js/dataTablesEdit.js"],!0)],render:()=>N()},d={name:"Tabella con icone e notifiche",decorators:[(t,a)=>e(t,a,4,["static-webkit/js/custom-webkit.js","static-webkit/js/dataTablesEdit.js"],!0)],render:()=>A()},r={name:"Tabella con status",decorators:[(t,a)=>e(t,a,4,["static-webkit/js/custom-webkit.js","static-webkit/js/dataTablesEdit.js"],!0)],render:()=>W()};var c,p,u;o.parameters={...o.parameters,docs:{...(c=o.parameters)==null?void 0:c.docs,source:{originalSource:`{
  name: "Tabella semplice"
}`,...(u=(p=o.parameters)==null?void 0:p.docs)==null?void 0:u.source}}};var m,b,g;s.parameters={...s.parameters,docs:{...(m=s.parameters)==null?void 0:m.docs,source:{originalSource:`{
  name: "Tabella uno",
  render: () => {
    return createSecondTable(secondTableData, "Inserire descrizione tabella qui");
  },
  decorators: [(story, context) => addDecorator(story, context, 4, ["static-webkit/js/custom-webkit.js", "static-webkit/js/dataTablesEdit.js"], true)]
}`,...(g=(b=s.parameters)==null?void 0:b.docs)==null?void 0:g.source}}};var f,h,L;i.parameters={...i.parameters,docs:{...(f=i.parameters)==null?void 0:f.docs,source:{originalSource:`{
  name: "Tabella con accordion",
  argTypes: {
    showAccordion: {
      control: "boolean",
      table: {
        defaultValue: {
          summary: false
        }
      },
      description: "Mostra/Nasconde l'accordion."
    }
  },
  decorators: [(story, context) => addDecorator(story, context, 4, ["static-webkit/js/custom-webkit.js", "static-webkit/js/dataTablesEdit.js"], true)],
  render: () => {
    return createAccordionTable();
  }
}`,...(L=(h=i.parameters)==null?void 0:h.docs)==null?void 0:L.source}}};var x,v,y;l.parameters={...l.parameters,docs:{...(x=l.parameters)==null?void 0:x.docs,source:{originalSource:`{
  name: "Tabella con checkbox",
  decorators: [(story, context) => addDecorator(story, context, 4, ["static-webkit/js/custom-webkit.js", "static-webkit/js/dataTablesEdit.js"], true)],
  render: () => {
    return CreateCheckboxTable();
  }
}`,...(y=(v=l.parameters)==null?void 0:v.docs)==null?void 0:y.source}}};var z,k,w;n.parameters={...n.parameters,docs:{...(z=n.parameters)==null?void 0:z.docs,source:{originalSource:`{
  name: "Tabella con elementi in download",
  decorators: [(story, context) => addDecorator(story, context, 4, ["static-webkit/js/custom-webkit.js", "static-webkit/js/dataTablesEdit.js"], true)],
  render: () => {
    return CreateTableWithDownload();
  }
}`,...(w=(k=n.parameters)==null?void 0:k.docs)==null?void 0:w.source}}};var T,S,C;d.parameters={...d.parameters,docs:{...(T=d.parameters)==null?void 0:T.docs,source:{originalSource:`{
  name: "Tabella con icone e notifiche",
  decorators: [(story, context) => addDecorator(story, context, 4, ["static-webkit/js/custom-webkit.js", "static-webkit/js/dataTablesEdit.js"], true)],
  render: () => {
    return CreateTableWithIconsNotifications();
  }
}`,...(C=(S=d.parameters)==null?void 0:S.docs)==null?void 0:C.source}}};var j,I,M;r.parameters={...r.parameters,docs:{...(j=r.parameters)==null?void 0:j.docs,source:{originalSource:`{
  name: "Tabella con status",
  decorators: [(story, context) => addDecorator(story, context, 4, ["static-webkit/js/custom-webkit.js", "static-webkit/js/dataTablesEdit.js"], true)],
  render: () => {
    return CreateTableWithStatus();
  }
}`,...(M=(I=r.parameters)==null?void 0:I.docs)==null?void 0:M.source}}};const O=["FirstTable","SecondTable","AccordionTable","CheckboxTable","TableWithDownload","TableWithNotificationsAndIcons","TableWithStatus"];export{i as AccordionTable,l as CheckboxTable,o as FirstTable,s as SecondTable,n as TableWithDownload,d as TableWithNotificationsAndIcons,r as TableWithStatus,O as __namedExportsOrder,B as default};
