import{a as T}from"./iframe-B0O0VXUn.js";import"./preload-helper-PPVm8Dsz.js";const S=`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.

La 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. `,P="";function I({results:t}){if(!t||t.length===0)return`<div class="tabella table-responsive inail-table">
    <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
    <div class="col-xs-12 caption noPaddingLeft marginBottom">
      <p class="inail-body-text-1 m-0">Descrizione lorem ipsum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</p>
    </div>
    <table id="tabella-base" class="table display tabella-base" aria-labelledby ="titolo-tabella">
      <thead>
        <tr>
        	<th>
					<span class="thLabel">ID Pratica </span>
				</th>
        <th>
					<span class="thLabel">Stato</span>
				</th>
				<th>
					<span class="thLabel"> Richiedente </span>
				</th>
				<th>
					<span class="thLabel"> Data Invio </span>
				</th>
			
				<th>Azioni</th>
        </tr>
      </thead>
      <tbody>
				<tr>
					<td colspan="5">
						<span class="no_table_record">Nessun risultato da mostrare</span>
					</td>
				</tr>
      </tbody>
    </table>
  </div>`;const o=Object.keys(t[0]),l=o.map(e=>`
    <th><span class="thLabel">${e}</span></th>
  `).join("")+"<th>Azioni</th>",i=t.map(e=>`
    <tr>
      ${o.map(a=>`<td>${e[a]}</td>`).join("")}
      <td class="td-icons">
        <button type="button" class="col-xs-8 p-0" data-toggle="tooltip" data-original-title="Rimuovi elemento" aria-label="Rimuovi elemento">
          <span class="fa fa-trash-alt"></span>
        </button>
      </td>
    </tr>
  `).join("");return`<div class="tabella table-responsive inail-table">
    <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
    <div class="col-xs-12 caption noPaddingLeft marginBottom">
      <p class="inail-body-text-1 m-0">Descrizione lorem ipsum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</p>
    </div>
    <table id="tabella-base" class="table display tabella-base" aria-labelledby ="titolo-tabella">
      
      <thead>
        <tr>
          ${l}
        </tr>
      </thead>
      <tbody>
        ${i}
      </tbody>
    </table>
  </div>`}function R(t){const o=`<div class="container">
  <div class="row">
    <div id="no-more-tables" class="tabella tabella-verticale table-responsive inail-table">
      <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
      <div class="col-xs-12 caption noPaddingLeft marginBottom">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</div>
      <table class="table display tabella-base col-md-12" aria-labelledby ="titolo-tabella">
        
        <thead class="cf">
          <tr>
            <th>Colonna 1</th>
            <th>Colonna 2</th>
            <th>Colonna 3</th>
            <th>Colonna 4</th>
            <th>Colonna 5</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="5">
              <span class="no_table_record">Nessun risultato da mostrare</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>`;if(!t||t.length===0)return o;const l=Object.keys(t[0]),i=l.map(a=>`<th>${a}</th>`).join(""),e=t.map(a=>`
    <tr>
      ${l.map(n=>`<td data-title="${n}">${a[n]}</td>`).join("")}
    </tr>
  `).join("");return`<div class="container">
  <div class="row">
    <div id="no-more-tables" class="tabella tabella-verticale table-responsive inail-table">
      <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
      <div class="col-xs-12 caption noPaddingLeft marginBottom">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</div>
      <table class="table display tabella-base col-md-12" aria-labelledby ="titolo-tabella">
        
        <thead class="cf">
          <tr>${i}</tr>
        </thead>
        <tbody>${e}</tbody>
      </table>
    </div>
  </div>
</div>`}function z(){return`
	<main id="contenutoPrincipale">
	<div class="tabella table-responsive inail-table">
	<div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>

	<div class="col-xs-12 caption noPaddingLeft marginBottom">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</div>
	<table id="tabella-base" class="table display tabella-base" aria-labelledby ="titolo-tabella">
		<thead>
			<tr>
				<th>
					<span class="thLabel"> ID Pratica </span>
				</th>
				<th>
					<span class="thLabel"> Stato </span>
				</th>
				<th>
					<span class="thLabel">Richiedente</span>
				</th>
				<th>
					<span class="thLabel">Data invio</span>
				</th>
				<th></th>
			</tr>
		</thead>
		<tbody >
			<tr>
				<td colspan="5">
					<span class="no_table_record">Nessun risultato da mostrare</span>
				</td>
			</tr>
		</tbody>
	</table>
</div>
</main>`}function $({results:t}){if(!t||t.length===0)return`<div class="tabella table-responsive inail-table">
      <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
      <div class="col-xs-12 caption noPaddingLeft">
        <p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</p>
      </div>
      <table id="tabella-1" class="table display" aria-labelledby ="titolo-tabella">
        <thead>
          <tr>
            <th class="col-md-1">ID Practica</th>
            <th class="col-md-3">Stato</th>
            <th class="col-md-4"> Richiedente </th>
			 <th class="col-md-4">Data Invio</th>
            <th class="col-md-3">Azioni</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="5">
              <span class="no_table_record">Nessun risultato da mostrare</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>`;const o=Object.keys(t[0]),l=`
    <th class="col-md-1">ID</th>
    ${o.map(e=>`<th class="col-md-3">${e}</th>`).join("")}
    <th class="col-md-3">Azioni</th>
  `,i=t.map((e,a)=>`
    <tr>
      <td>${a+1}</td>
      ${o.map(n=>`<td>${e[n]}</td>`).join("")}
      <td class="td-icons">
        <button type="button" id="edit" class="col-xs-4 noPadding" data-toggle="tooltip" data-original-title="Modifica elemento" aria-label="Modifica elemento">
          <span class="fa fa-pencil-alt"></span>
        </button>
        <button type="button" id="delete" class="col-xs-4 p-0 ml-2" data-toggle="tooltip" data-original-title="Rimuovi elemento" aria-label="Rimuovi elemento">
          <span class="fa fa-trash-alt"></span>
        </button>
      </td>
    </tr>
  `).join("");return`<div class="tabella table-responsive inail-table">
    <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
    <div class="col-xs-12 caption noPaddingLeft">
      <p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</p>
    </div>
    <table id="tabella-1" class="table display" aria-labelledby ="titolo-tabella">
      <thead><tr>${l}</tr></thead>
      <tbody>${i}</tbody>
    </table>
  </div>`}function w({results:t}){if(!t||t.length===0)return`<div class="tabella table-responsive inail-table">
			<div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
			<div class="col-xs-12 caption noPaddingLeft">
				<p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</p>
			</div>
			<table id="tabella-2" class="table accordionTab display" aria-labelledby ="titolo-tabella">
				<thead>
					<tr>
						<th class="col-md-1">ID Pratica</th>
						<th class="col-md-3">Stato/th>
						<th class="col-md-4"> Richiedente </th>
						<th class="col-md-3">Dettaglio</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td colspan="4">
							<span class="no_table_record">Nessun risultato da mostrare</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>`;const o=Object.keys(t[0]),l=`
		<thead>
			<tr>
				${o.map(a=>`<th>${a}</th>`).join("")}
				<th>Dettaglio</th>
			</tr>
		</thead>
	`,i=`
		<td class="td-icons">
			<span tabindex="0" role="button" aria-label="Informazioni sulla riga" class="warning btn-link" 
				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.">
				<span class="fa fa-exclamation-triangle"></span>
			</span>
			<button aria-label="Dettaglio" data-toggle="tooltip" data-original-title="Apri dettagli"
				class="tabIndex-input col-xs-3 fa fa-angle-down details-control ml-4 mt-1" aria-expanded="false">
			</button>
		</td>
	`,e=`
		<tbody role="tablist" aria-multiselectable="true">
			${t.map((a,n)=>`
				<tr id="heading-${n+1}">
					${o.map(s=>`<td>${a[s]}</td>`).join("")}
					${i}
				</tr>
			`).join("")}
		</tbody>
	`;return`
		<div class="tabella table-responsive inail-table">
			<div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
			<div class="col-xs-12 caption noPaddingLeft marginBottom">
				<p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor...</p>
			</div>
			<table id="tabella-2" class="table accordionTab display" aria-labelledby ="titolo-tabella">
			
				${l}
				${e}
			</table>
		</div>
	`}function j({results:t}){if(!t||t.length===0)return`<div class="tabella table-responsive inail-table">
    <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
    <div class="col-xs-12 caption noPaddingLeft">
      <p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</p>
    </div>
    <table id="tabella-3" class="table display" aria-labelledby ="titolo-tabella">
      <thead>
				<tr>
					<th class="col-md-1 thCheckAll">
						<div class="custom-checkbox-container inail-checkbox">
							<span data-toggle="tooltip" data-original-title="Seleziona tutte le righe">
              <label class="sr-only" for="check_all">Seleziona tutte le righe</label>
							<input type="checkbox" id="check_all" class="custom-checkbox">
							<label for="check_all">
								<span class="custom-checkbox-background">
									<i class="fa inail-checkbox-icon"></i>
								</span>
							</label>
							</span>
						</div>
					</th>
					<th class="col-md-3">ID Pratica</th>
					<th class="col-md-4">Stato</th>
					<th class="col-md-4"> Richiedente</th>
				</tr>
			</thead>
      <tbody>
				<tr>
					<td colspan="5">
						<span class="no_table_record">Nessun risultato da mostrare</span>
					</td>
				</tr>
      </tbody>
    </table>
    <div class="table-footer-action">
      <button type="submit" class="pull-right inail-button inail-button-primary">Bottone</button>
    </div>
  </div>`;const o=Object.keys(t[0]),l=`
    <th class="col-md-1 thCheckAll">
      <div class="custom-checkbox-container inail-checkbox">
        <span data-toggle="tooltip" data-original-title="Seleziona tutte le righe">
        <label class="sr-only" for="check_all">Seleziona tutte le righe</label>
          <input type="checkbox" id="check_all" class="custom-checkbox">
          <label for="check_all">
            <span class="custom-checkbox-background">
              <i class="fa inail-checkbox-icon"></i>
            </span>
           
          </label>
        </span>
      </div>
    </th>
    ${o.map(e=>`<th class="col-md-3">${e}</th>`).join("")}
  `,i=t.map((e,a)=>`
    <tr>
      <td aria-hidden="false">
        <div class="custom-checkbox-container inail-checkbox">
          <span data-toggle="tooltip" data-original-title="Seleziona">
            <input type="checkbox" id="check-${a+1}" class="custom-checkbox option-checkbox" aria-label="Seleziona riga ${a+2}">
            <label for="check-${a+1}">
              <span class="custom-checkbox-background">
                <i class="fa inail-checkbox-icon"></i>
              </span>
             
            </label>
          </span>
        </div>
      </td>
      ${o.map(n=>`<td>${e[n]}</td>`).join("")}
    </tr>
  `).join("");return`<div class="tabella table-responsive inail-table">
    <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
    <div class="col-xs-12 caption noPaddingLeft">
      <p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</p>
    </div>
    <table id="tabella-3" class="table display" aria-labelledby ="titolo-tabella">
      
      <thead><tr>${l}</tr></thead>
      <tbody>${i}</tbody>
    </table>
    <div class="table-footer-action">
      <button type="submit" class="pull-right inail-button inail-button-primary">Bottone</button>
    </div>
  </div>`}function A({results:t}){if(!t||t.length===0)return`<div class="tabella table-responsive inail-table">
    <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
    <div class="col-xs-12 caption noPaddingLeft marginBottom">
      <p class="inail-body-text-1 m-0">Descrizione lorem ipsum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</p>
    </div>
    <table id="tabella-base" class="table display tabella-base" aria-labelledby ="titolo-tabella">
      <thead>
        <tr>
        <th>
					<span class="thLabel">ID Pratica</span>
				</th>
				<th>
					<span class="thLabel">Stato</span>
				</th>
				<th>Azioni</th>
        </tr>
      </thead>
      <tbody>
				<tr>
					<td colspan="5">
						<span class="no_table_record">Nessun risultato da mostrare</span>
					</td>
				</tr>
      </tbody>
    </table>
  </div>`;const o=Object.keys(t[0]),l=`
		<thead>
			<tr>
				${o.map(e=>`<th scope="col"><span class="thLabel">${e}</span></th>`).join("")}
			</tr>
		</thead>
	`,i=`
		<tbody>
			${t.map(e=>`
				<tr>
					${o.map(a=>`
						<td class="td-icons">
							${a.toLowerCase()==="azioni"?`
								<button type="button" data-toggle="tooltip" data-original-title="Scarica elemento" aria-label="Scarica elemento">
									<span class="fa fa-download"></span>
								</button>
							`:e[a]}
						</td>
					`).join("")}
				</tr>
			`).join("")}
		</tbody>
	`;return`<div class="tabella table-responsive inail-table">
		<div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
		<div class="col-xs-12 caption noPaddingLeft marginBottom">
			<p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus...</p>
		</div>
		<form class="row" id="tab-form-1">
			<table class="table dataTable col-xs-12" id="download-tab-id" aria-labelledby ="titolo-tabella">
				
				${l}
				${i}
			</table>
		</form>
	</div>`}function H({results:t}){const o=Object.keys(t[0]);return`<div class="notifiche-tab tabella table-responsive inail-table">
  <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
  <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
    <span class="">Link</span>
    <span class="fa fa-chevron-right"></span>
  </a>
  <div class="col-xs-12 caption noPaddingLeft marginBottom">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</div>
  <table id="tabella-notifica" class="table">
    
    <thead>
      <tr>
        <th scope="col" class="col-md-3"><span class="thLabel">ID Pratica</span></th>
        <th scope="col" class="col-md-2"><span class="thLabel">Stato</span></th>
        <th scope="col" class="col-md-3"><span class="thLabel"> Richiedente </span></th>
        <th scope="col" class="col-md-2"><span class="thLabel">Data Invio</span></th>
        <th scope="col" class="col-md-2"><span class="thLabel">Notifiche</span></th>
      </tr>
    </thead>
    <tbody>
      ${t.map((i,e)=>{const a=i.notifiche>0,n=i.pagamenti>0;return`
      <tr>
        <td>${i[o[0]]}</td>
        <td>${i[o[1]]}</td>
        <td>${i[o[2]]}</td>
        <td>${i[o[3]]}</td>
        <td class="td-icons">
          <span class="iconaNotifica" ${a?'data-toggle="modal" data-target="#modale-1"':""}>
            <button class="far fa-file-alt icon-wrapper bg-transparent border-0 ${a?"mr-2 p-0":"mr-3 px-2"}" data-toggle="tooltip" data-tooltip-hidden="true" aria-label="Visualizza le notifiche Richieste - ${i.notifiche} notifica${i.notifiche!==1?"he":""}"" data-original-title="Richieste - ${i.notifiche} notifica${i.notifiche!==1?"he":""}">
        
              <span class="badge" aria-hidden="true" ${a?"":'style="display:none"'}>${i.notifiche}</span>
            </a>

          </span>
          <span class="iconaNotifica" ${n?'data-toggle="modal" data-target="#modale-2"':""}>
            <button aria-label="Visualizza le notifiche Pagamenti - ${i.pagamenti} notific${i.pagamenti!==1?"he":"a"}""  class=" fas fa-euro-sign icon-wrapper bg-transparent border-0 ${n?"p-0":"px-2"}" data-toggle="tooltip"  data-tooltip-hidden="true" data-original-title="Pagamenti - ${i.pagamenti} notific${i.pagamenti!==1?"he":"a"}">
              <span class="badge" aria-hidden="true" ${n?"":'style="display:none"'}>${i.pagamenti}</span>
            </a>
          </span>
        </td>
      </tr>
    `}).join("")}
    </tbody>
  </table>
  <!-- Modale 1 -->
  <div class="modal fade inail-modale inail-modal-table" role="dialog" id="modale-1" tabindex="-1" aria-label='_'>
    <div class="vertical-alignment-helper">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <div id ="modal-id" class="inail-modale-title pull-left" tabindex="-1">Titolo modale</div>
            <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Chiudi finestra di dialogo">
              <span aria-hidden="true"><i class="fa-solid fa-xmark"></i></span>
            </button>
          </div>
          <div class="modal-body">
            <div class="tabella">
              <table class="table1" aria-label="Tabella info">
                <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><td>Dato 1</td><td>Dato 2</td><td>Dato 3</td></tr>".repeat(7)}
                </tbody>
              </table>
            </div>
          </div>
          <div class="modal-footer">
            <button class="inail-button inail-button-primary pull-right">Bottone</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Modale 2 -->
  <div class="modal fade inail-modale inail-modal-table" role="dialog" id="modale-2" tabindex="-1" aria-label='_'>
    <div class="vertical-alignment-helper">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <div id="modal-id" class="inail-modale-title pull-left" tabindex="-1">Titolo modale</div>
            <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Chiudi finestra di dialogo">
              <span aria-hidden="true"><i class="fa-solid fa-xmark"></i></span>
            </button>
          </div>
          <div class="modal-body">
            <div class="tabella">
              <table class="table1" aria-label="Titolo tabella">
                <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><td>Dato 1</td><td>Dato 2</td><td>Dato 3</td></tr>".repeat(7)}
                </tbody>
              </table>
            </div>
          </div>
          <div class="modal-footer">
            <button class="inail-button inail-button-primary pull-right">Bottone</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>`}function N({results:t}){if(!t||t.length===0)return`<div class="status-tab tabella table-responsive inail-table">
			<div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
			<div class="col-xs-12 caption noPaddingLeft marginBottom">
				<p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor...</p>
			</div>
			<table id="tab-status" aria-labelledby ="titolo-tabella" class="table accordionTab display dataTable marginTop">
				<thead>
					<tr>
						<th></th>
						<th> Richiedente </th>
            <th>Avanzamento</th>
						<th>Dettagli</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td colspan="4">
							<span class="no_table_record">Nessun risultato da mostrare</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>`;const o=Object.keys(t[0]),l=`
		<thead>
			<tr>
				${o.map((e,a)=>`<th scope="col" class="${a===0?"col-xs-6":"col-xs-2"}">${e}</th>`).join("")}
				<th scope="col" class="col-xs-2">Dettaglio</th>
			</tr>
		</thead>
	`,i=t.map((e,a)=>`
			<tr>
				${o.map((s,y)=>{const x=y===0?"col-xs-6":"col-xs-2",E=e[s];if(s.toLowerCase().includes("avanzamento")||s==="avanzamento"){const c=parseInt(E,10),C=c>=100?"progress-bar-100":c>=80?"progress-bar-80":c>=50?"progress-bar-50":"";let r;switch(C){case"progress-bar-100":r="Concluso";break;case"progress-bar-80":r="Non concluso";break;case"progress-bar-50":r="In errore";break;default:r="In corso"}return`
					<td class="${x}">
           <p id="progressLabel">${r}</p>
						<span class="progress">
							<span
                aria-label="_"
								class="progress-bar ${C}"
								role="progressbar"
								aria-valuenow="${c}"
								aria-valuemin="0"
								aria-valuemax="100"
								style="width:${c}%"
							></span>
						</span>
					</td>
				`}return`<td class="${x}">${E}</td>`}).join("")}
				<td class="col-xs-2">
					<button aria-label="Espandi/riduci riga"
							data-toggle="tooltip"
							data-original-title="Apri dettagli"
							class="col-xs-6 tabIndex-input fa fa-angle-down details-control"
							aria-expanded="false">
					</button>
				</td>
			</tr>
		`).join("");return`
		<div class="status-tab tabella table-responsive inail-table">
			<div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
    <a href="#1" class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
      Link
      <span class="fa fa-chevron-right"></span>
    </a>
			<div class="col-xs-12 caption noPaddingLeft marginBottom">
				<p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor...</p>
			</div>
			<table id="tab-status" aria-labelledby="titolo-tabella" class="table accordionTab display dataTable marginTop">
				${l}
				<tbody>
					${i}
				</tbody>
			</table>
		</div>
	`}function _(t){const o=`
	
    <div class="tabella table-responsive inail-table">
      <div id ="table-with-radion" class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</div>
      <div class="col-xs-12 caption noPaddingLeft marginBottom">
        <p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</p>
      </div>
      <table id="tab-radio-button" class="table display" aria-labelledby ="table-with-radion">
        <thead>
          <tr>
            <th scope="col" class="col-xs-2">Seleziona</th>
            <th scope="col" class="col-xs-3">ID Pratica</th>
            <th scope="col" class="col-xs-3"><span>Stato</span></th>
            <th scope="col" class="col-xs-4"><span>Richiedente</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="4">
              <span class="no_table_record">Nessun risultato da mostrare</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
	</main>`;if(!t||t.length===0)return o;const l=Object.keys(t[0]);return`
	<main id="contenutoPrincipale">
    <div class="tabella table-responsive inail-table">
      <div id ="table-with-radion" class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</div>
      <div class="col-xs-12 caption noPaddingLeft marginBottom">
        <p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</p>
      </div>
      <table id="tab-radio-button" class="table display" aria-labelledby ="table-with-radion">
        <thead>
          <tr>
            <th scope="col" class="col-xs-2">Seleziona</th>
            <th scope="col" class="col-xs-3">Colonna 1</th>
            <th scope="col" class="col-xs-3"><span>Colonna 2</span></th>
            <th scope="col" class="col-xs-4"><span>Colonna 3</span></th>
          </tr>
        </thead>
        <tbody>
          ${t.map((e,a)=>`
    <tr>
      <td class="col-xs-2">
        <div class="inail-custom-radio-group">
          <label class="inail-radio-button">
            <input type="radio" name="radio-group" class="inail-radio-input">
            <div class="inail-radio-background" data-toggle="tooltip" data-original-title="Seleziona">
              <div class="inail-radio-inner-circle"></div>
            </div>
            <span class="sr-only">Seleziona riga ${a+1}</span>
          </label>
        </div>
      </td>
      ${l.map((n,s)=>`<td class="${s===0||s===1?"col-xs-3":"col-xs-4"}">${e[n]}</td>`).join("")}
    </tr>
  `).join("")}
        </tbody>
      </table>
    </div>
	</main>`}function B({results:t}){if(!t||t.length===0)return`<div class="tabella table-responsive inail-table">
			<div id ="table-collapse" class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</div id ="table-collapse">
			<div class="col-xs-12 caption noPaddingLeft marginBottom">
				<p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor...</p>
			</div>
			<table id="tabella-collapse" class="table display" aria-labelledby ="table-collapse">
				
				<thead>
					<tr>
						<th class="col-md-1 thCheckAll no-sort">
					<div class="custom-checkbox-container inail-checkbox">
						<span data-toggle="tooltip" data-original-title="Seleziona tutte le righe">
            <label class="sr-only" for="check_all">Seleziona tutte le righe</label>
						<input type="checkbox" id="check_all" class="custom-checkbox">
						<label for="check_all">
							<span class="custom-checkbox-background">
								<i class="fa inail-checkbox-icon"></i>
							</span>
						
						</label>
						</span>
					</div>
				</th>
						<th>ID Pratica</th>
						<th>Stato</th>
						<th>Richiedente</th>
						<th>Azioni</th>
						<th>Dettagli</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td colspan="6">
							<span class="no_table_record">Nessun risultato da mostrare</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>`;const o=Object.keys(t[0]),l=`
		<thead>
			<tr>
				<th class="col-md-1 thCheckAll no-sort">
					<div class="custom-checkbox-container inail-checkbox">
						<span data-toggle="tooltip" data-original-title="Seleziona tutte le righe">
            <label class="sr-only" for="check_all">Seleziona tutte le righe</label>
						<input type="checkbox" id="check_all" class="custom-checkbox">
						<label for="check_all">
							<span class="custom-checkbox-background">
								<i class="fa inail-checkbox-icon"></i>
							</span>
						
						</label>
						</span>
					</div>
				</th>
				${o.map(e=>`<th>${e}</th>`).join("")}
				<th>Azioni</th>
				<th>Dettagli</th>
			</tr>
		</thead>
	`,i=t.map((e,a)=>{const n=`collapseRow-${a}`;return`
			<tr>
				<td>
					<div class="custom-checkbox-container inail-checkbox">
						<span data-toggle="tooltip" data-original-title="Seleziona">
							<input type="checkbox" id="check-${a}" class="custom-checkbox option-checkbox" aria-label="Seleziona riga ${a+2}">
							<label for="check-${a}">
								<span class="custom-checkbox-background">
									<i class="fa inail-checkbox-icon"></i>
								</span>
							
							</label>
						</span>
					</div>
				</td>
				${o.map(s=>`<td>${e[s]}</td>`).join("")}
				<td>
					<div class="d-flex align-items-center table-ctas">
						<button type="button" class="px-3 py-1 mr-2 bg-transparent border-0" data-toggle="tooltip" data-original-title="Modifica" aria-label="Modifica">
							<i class="text-primary fas fa-pencil-alt" aria-hidden="true"></i>
						</button>
						<button type="button" class="px-3 py-1 mr-2 bg-transparent border-0" data-toggle="tooltip" data-original-title="Elimina" aria-label="Elimina">
							<i class="text-primary fas fa-trash-alt" aria-hidden="true"></i>
						</button>
						<button type="button" class="px-3 py-1 mr-3 bg-transparent border-0" data-toggle="tooltip" data-original-title="Invia" aria-label="Invia">
							<i class="text-primary fas fa-envelope" aria-hidden="true"></i>
						</button>
						<div class="dropdown">
							<button type="button" class="bg-transparent border-0 dropdown-toggle p-0 inail-ac"
								data-toggle="tooltip" data-original-title="Altre azioni" aria-label="Altre azioni" aria-haspopup="true">
								<i class="text-primary fas fa-ellipsis" aria-hidden="true"></i>
							</button>
							<ul class="dropdown-menu inail-action-dropdown">
								<li><button type="button" class="bg-transparent border-0 dropdown-item"><i class="text-primary fas fa-download" ></i> Scarica</button></li>
								<li><button type="button" class="bg-transparent border-0 dropdown-item"><i class="text-primary fas fa-print"></i> Stampa</button></li>
							</ul>
						</div>
					</div>
				</td>
				<td>
					<button type="button" class="btn-table-collapse p-0 bg-transparent border-0" data-toggle="collapse" href="#${n}" aria-expanded="false" aria-controls="${n}" aria-label="Espandi/Riduci riga">
						<i class="fa fa-chevron-down"></i>
					</button>
				</td>
			</tr>
			<tr id="${n}" class="panel-collapse collapse" role="tabpanel">
				<td colspan="${o.length+3}">
        <div role="region" aria-label="dettaglio della riga ${a+2}">
					<p class="p-4 inail-body-text-1 m-0">
						Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor...
					</p>
          </div
				</td>
			</tr>
		`}).join("");return`
		<div class="tabella table-responsive inail-table">
			<div id ="table-collapse" class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</div id ="collapse-table">
			<div class="col-xs-12 caption noPaddingLeft marginBottom">
				<p class="inail-body-text-1 m-0">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor...</p>
			</div>
			<table  id="tabella-collapse" class="table display" aria-labelledby="table-collapse">
				
				${l}
				<tbody>
					${i}
				</tbody>
			</table>
		</div>
	`}function M({results:t}){if(!t||t.length===0)return`<div class="tabella table-responsive inail-table">
	<div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id="titolo-tabella">Titolo Tabella</div>
	<div class="col-xs-12 caption noPaddingLeft marginBottom">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio dui malesuada amet, libero, Lorem urna viverra leo.</div>
	<table class="table display custom-table" aria-labelledby ="titolo-tabella">
		<div class="sr-only">Inserire descrizione tabella qui</div>
		<thead>
			<tr>
				<th class="col-md-1 thCheckAll no-sort">
					<div class="custom-checkbox-container inail-checkbox">
						<span data-toggle="tooltip" data-original-title="Seleziona tutte le righe">
            <label class="sr-only" for="check_all">Seleziona tutte le righe</label>
						<input type="checkbox" id="check_all" class="custom-checkbox" >
						<label for="check_all">
							<span class="custom-checkbox-background">
								<i class="fa inail-checkbox-icon"></i>
							</span>
							
						</label>
						</span>
					</div>
					</th>
					
					<th class="col-md-4">ID Pratica</th>
          <th class="col-md-3">Stato</th>
					<th class="col-md-4">Richiedente</th>
					<th class="no-sort">Azioni</th>
				</tr>
			</thead>
				<tbody>
				  <tr>
            <td colspan="5">
              <span class="no_table_record">Nessun risultato da mostrare</span>
            </td>
          </tr>
				</tbody>
			</table>
		</div>`;const o=Object.keys(t[0]),l=`
  <thead>
    <tr>
      <th class="col-md-1 thCheckAll no-sort">
        <div class="custom-checkbox-container inail-checkbox">
          <span data-toggle="tooltip" data-original-title="Seleziona tutte le righe">
          <label class="sr-only" for="check_all">Seleziona tutte le righe</label>
            <input type="checkbox" id="check_all" class="custom-checkbox">
            <label for="check_all">
              <span class="custom-checkbox-background">
                <i class="fa inail-checkbox-icon"></i>
              </span>
             
            </label>
          </span>
        </div>
      </th>
      ${o.map((e,a)=>`<th class="${a===0?"":"no-sort"}">${e}</th>`).join("")}
	      <th class="no-sort">Azioni</th>
	    </tr>
	  </thead>
	`,i=`
    <tbody>
      ${t.map((e,a)=>`
        <tr>
          <td>
            <div class="custom-checkbox-container inail-checkbox">
              <span data-toggle="tooltip" data-original-title="Seleziona">
                <input type="checkbox" id="check-${a+1}" class="custom-checkbox option-checkbox" aria-label="Seleziona riga ${a+2}">
                <label for="check-${a+1}">
                  <span class="custom-checkbox-background">
                    <i class="fa inail-checkbox-icon"></i>
                  </span>
                 
                </label>
              </span>
            </div>
          </td>
          ${o.map(n=>`
            <td>${e[n]}</td>
          `).join("")}
          <td>
            <div class="d-flex align-items-center">
              <button type="button" class="px-3 py-1 mr-2 bg-transparent border-0" data-toggle="tooltip" data-original-title="Modifica"  aria-label="Modifica">
                <i class="text-primary fas fa-pencil-alt" aria-hidden="true"></i>
              </button>
              <button type="button" class="px-3 py-1 mr-2 bg-transparent border-0" data-toggle="tooltip" data-original-title="Elimina"  aria-label="Elimina">
                <i class="text-primary fas fa-trash-alt" aria-hidden="true"></i>
              </button>
              <button type="button" class="px-3 py-1 mr-3 bg-transparent border-0" data-toggle="tooltip" data-original-title="Invia"  aria-label="Invia">
                <i class="text-primary fas fa-envelope" aria-hidden="true"></i>
              </button>
              <div class="dropdown">
                <button type="button" class="bg-transparent border-0 dropdown-toggle p-0 inail-ac" data-toggle="tooltip" data-original-title="Altre azioni" aria-label="Altre azioni"  aria-haspopup="true">
                  <i class="text-primary fas fa-ellipsis" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu inail-action-dropdown">
                  <li><button type="button" class="bg-transparent border-0 dropdown-item"><i class="text-primary fas fa-download" aria-hidden="true"></i> Scarica</button></li>
                  <li><button type="button" class="bg-transparent border-0 dropdown-item"><i class="text-primary fas fa-print" aria-hidden="true"></i> Stampa</button></li>
                </ul>
              </div>
            </div>
          </td>
        </tr>
      `).join("")}
    </tbody>
  `;return`
    <div class="tabella table-responsive inail-table">
      <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft" id ="titolo-table">Titolo Tabella</div>
      <div class="col-xs-12 caption noPaddingLeft marginBottom">
        <p class="inail-body-text-1 m-0">Descrizione lorem ipsum dolor sit amet massa vitae lacus, gravida tortor...</p>
      </div>
      <form class="row" id="tab-form-1">
        <table class="table display custom-table" id="download-tab-id" aria-labelledby ="titolo-table">
          ${l}
          ${i}
        </table>
      </form>
    </div>
  `}const q={title:"Componenti/Tabelle",parameters:{docs:{description:{component:P},mdxPage:S,showCode:!0,showAccessibility:!0}},decorators:[(t,o)=>T(t,o,10,["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/dataTablesEdit.js","https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/customTable.js","https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-action-dropdown.js","https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-modal.js","https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/tooltip-aria-hidden.js"],!0)]},d={name:"Tabella semplice",argTypes:{results:{control:"object",description:"I dati della tabella, come array di righe."},onClick:{action:"cancellaRow",description:"Evento al click del button.",table:{disable:!0}}},args:{results:[{"ID Pratica ":"Dato 1",Stato:"Dato 1",Richiedente:"Dato 1","Data Invio":"Dato 1"},{"ID Pratica ":"Dato 2",Stato:"Dato 2",Richiedente:"Dato 2","Data Invio":"Dato 2"},{"ID Pratica ":"Dato 3",Stato:"Dato 3",Richiedente:"Dato 3","Data Invio":"Dato 3"},{"ID Pratica ":"Dato 4",Stato:"Dato 4",Richiedente:"Dato 4","Data Invio":"Dato 4"}]},render:t=>{const o=I(t),l=document.createElement("div");l.innerHTML=o;const i=l.getElementsByTagName("button");if(i)for(let a=0;a<i.length;a++)i[a].addEventListener("click",t.onClick);const e=document.createElement("main");return e.id="contenutoPrincipale",e.appendChild(l),e||""}},m={name:"Tabella semplice responsive alternativa",argTypes:{results:{control:"object",description:"I dati della tabella, come array di righe."}},args:{results:[{"ID Practica":"1",Stato:"Dato 1",Richiedente:"Dato 1","Data Invio":"Dato 1"},{"ID Practica":"2",Stato:"Dato 2",Richiedente:"Dato 2","Data Invio":"Dato 2"},{"ID Practica":"3",Stato:"Dato 3",Richiedente:"Dato 3","Data Invio":"Dato 3"},{"ID Practica":"4",Stato:"Dato 4",Richiedente:"Dato 4","Data Invio":"Dato 4"}]},render:t=>R(t.results)},p={name:"Tabella vuota",render:t=>z()},b={name:"Tabella Uno",argTypes:{results:{control:"object",description:"I dati della tabella, come array di righe."},onClickEdit:{action:"modificaRow",description:"Evento al click del button.",table:{disable:!0}},onClickDelete:{action:"cancellaRow",description:"Evento al click del button.",table:{disable:!0}}},args:{results:[{Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum"},{Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum"},{Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum"},{Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum"},{Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum"},{Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum"},{Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum"},{Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum"},{Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum"},{Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum"},{Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum"}]},render:t=>{const o=$(t),l=document.createElement("div");l.innerHTML=o;const i=l.getElementsByTagName("button");if(i)for(let a=0;a<i.length;a++)i[a].id=="edit"?i[a].addEventListener("click",t.onClickEdit):i[a].addEventListener("click",t.onClickDelete);const e=document.createElement("main");return e.id="contenutoPrincipale",i&&e.appendChild(l),e||""}},u={name:"Tabella con accordion",argTypes:{results:{control:"object",description:"I dati della tabella, come array di righe."},onClick:{action:"espandi/riduci",description:"Evento al click del button.",table:{disable:!0}}},args:{results:[{"ID Pratica":"1",Stato:"Lorem ipsum"," Richiedente ":"Lorem ipsum"},{"ID Pratica":"2",Stato:"Lorem ipsum"," Richiedente ":"Lorem ipsum"},{"ID Pratica":"3",Stato:"Lorem ipsum"," Richiedente ":"Lorem ipsum"}]},render:t=>{const o=w(t),l=document.createElement("div");l.innerHTML=o;const i=l.getElementsByTagName("button");if(i)for(let a=0;a<i.length;a++)i[a].addEventListener("click",t.onClick);const e=document.createElement("main");return e.id="contenutoPrincipale",i&&e.appendChild(l),e||""}},h={name:"Tabella con checkbox",argTypes:{results:{control:"object",description:"Dati da visualizzare nella tabella con checkbox"},onClick:{action:"click",description:"Evento al click del button.",table:{disable:!0}}},args:{results:[{"ID Pratica":"1",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"2",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"3",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"4",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"5",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"6",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"7",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"8",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"9",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"10",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"11",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"}]},render:t=>{const o=j(t),l=document.createElement("div");l.innerHTML=o;const i=l.getElementsByTagName("button");if(i)for(let a=0;a<i.length;a++)i[a].addEventListener("click",t.onClick);const e=document.createElement("main");return e.id="contenutoPrincipale",i&&e.appendChild(l),e||""}},v={name:"Tabella con elementi in download",argTypes:{results:{control:"object",description:"I dati della tabella, come array di righe."},onClick:{action:"scarica",description:"Evento al click del button.",table:{disable:!0}}},args:{results:[{"ID Pratica":"1",Stato:"Lorem ipsum",Azioni:"download"},{"ID Pratica":"2",Stato:"Lorem ipsum",Azioni:"download"},{"ID Pratica":"3",Stato:"Lorem ipsum",Azioni:"download"}]},render:t=>{const o=A(t),l=document.createElement("div");l.innerHTML=o;const i=l.getElementsByTagName("button");if(i)for(let a=0;a<i.length;a++)i[a].addEventListener("click",t.onClick);const e=document.createElement("main");return e.id="contenutoPrincipale",i&&e.appendChild(l),e||""}},g={name:"Tabella con icone e notifiche",parameters:{docs:{story:{inline:!1,iframeHeight:500}}},argTypes:{results:{control:"object",description:"I dati della tabella, come array di righe."},onClickNotifiche:{action:"apriNotifiche",description:"Evento al click del button.",table:{disable:!0}},onClickPagamenti:{action:"apriPagamenti",description:"Evento al click del button.",table:{disable:!0}}},args:{results:[{"ID Pratica":"Lorem ipsum",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum",notifiche:1,pagamenti:2},{"ID Pratica":"Lorem ipsum",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum",notifiche:1,pagamenti:2},{"ID Pratica":"Lorem ipsum",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum","Data Invio":"Lorem ipsum",notifiche:0,pagamenti:0}]},render:t=>{const o=H(t),l=document.createElement("div");l.innerHTML=o,l.querySelectorAll(".icon-wrapper").forEach(a=>{a.classList.contains("fa-file-alt")?a.addEventListener("click",t.onClickNotifiche):a.addEventListener("click",t.onClickPagamenti)});const e=document.createElement("main");return e.id="contenutoPrincipale",e.appendChild(l),e}},L={name:"Tabella con status",argTypes:{results:{control:"object",description:"I dati della tabella, come array di righe."},onClick:{action:"espandi/riduci",description:"Evento al click del button.",table:{disable:!0}}},args:{results:[{"ID Pratica":"1",Richiedente:"Valore A",Avanzamento:100},{"ID Pratica":"2",Richiedente:"Valore B",Avanzamento:75},{"ID Pratica":"3",Richiedente:"Valore C",Avanzamento:50},{"ID Pratica":"4",Richiedente:"Valore D",Avanzamento:25},{"ID Pratica":"5",Richiedente:"Valore E",Avanzamento:90}]},render:t=>{const o=N(t),l=document.createElement("div");l.innerHTML=o;const i=l.getElementsByTagName("button");if(i)for(let a=0;a<i.length;a++)i[a].addEventListener("click",t.onClick);const e=document.createElement("main");return e.id="contenutoPrincipale",i&&e.appendChild(l),e||""}},f={name:"Tabella con radio button",argTypes:{results:{control:"object",description:"I dati della tabella, come array di righe."}},args:{results:[{Colonna2:"Lorem ipsum",Colonna3:"Lorem ipsum",Colonna4:"Lorem ipsum"},{Colonna2:"Lorem ipsum",Colonna3:"Lorem ipsum",Colonna4:"Lorem ipsum"},{Colonna2:"Lorem ipsum",Colonna3:"Lorem ipsum",Colonna4:"Lorem ipsum"},{Colonna2:"Lorem ipsum",Colonna3:"Lorem ipsum",Colonna4:"Lorem ipsum"}]},render:t=>_(t.results)},k={name:"Tabella con campi collassabili e CTA",argTypes:{results:{control:"object",description:"Dati da visualizzare nella tabella con checkbox"},onClickExpand:{action:"espandi/riduci",description:"Evento al click del button.",table:{disable:!0}},onClickEdit:{action:"modifica",description:"Evento al click del button.",table:{disable:!0}},onClickDelete:{action:"elimina",description:"Evento al click del button.",table:{disable:!0}},onClickSend:{action:"invia",description:"Evento al click del button.",table:{disable:!0}},onClickOther:{action:"altre opzioni",description:"Evento al click del button.",table:{disable:!0}},onClickDownload:{action:"scarica",description:"Evento al click del button.",table:{disable:!0}},onClickPrint:{action:"stampa",description:"Evento al click del button.",table:{disable:!0}}},args:{results:[{"ID Pratica":"1",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"2",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"3",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"4",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"5",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"}]},render:t=>{const o=B(t),l=document.createElement("div");l.innerHTML=o,l.querySelectorAll("i").forEach(a=>{a.classList.contains("fa-ellipsis")?a.addEventListener("click",t.onClickOther):a.classList.contains("fa-pencil-alt")?a.addEventListener("click",t.onClickEdit):a.classList.contains("fa-trash-alt")?a.addEventListener("click",t.onClickDelete):a.classList.contains("fa-envelope")?a.addEventListener("click",t.onClickSend):a.classList.contains("fa-download")?a.addEventListener("click",t.onClickDownload):a.classList.contains("fa-print")?a.addEventListener("click",t.onClickPrint):a.classList.contains("fa-chevron-down")&&a.addEventListener("click",t.onClickExpand)});const e=document.createElement("main");return e.id="contenutoPrincipale",e.appendChild(l),e}},D={name:"Tabella con colonne ordinabili e checkboxes",argTypes:{results:{control:"object",description:"Dati da visualizzare nella tabella con checkbox"},onClickEdit:{action:"modifica",description:"Evento al click del button.",table:{disable:!0}},onClickDelete:{action:"elimina",description:"Evento al click del button.",table:{disable:!0}},onClickSend:{action:"invia",description:"Evento al click del button.",table:{disable:!0}},onClickOther:{action:"altre opzioni",description:"Evento al click del button.",table:{disable:!0}},onClickDownload:{action:"scarica",description:"Evento al click del button.",table:{disable:!0}},onClickPrint:{action:"stampa",description:"Evento al click del button.",table:{disable:!0}}},args:{results:[{"ID Pratica":"1",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"2",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"3",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"4",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"},{"ID Pratica":"5",Stato:"Lorem ipsum",Richiedente:"Lorem ipsum"}]},render:t=>{const o=M(t),l=document.createElement("div");l.innerHTML=o,l.querySelectorAll("i").forEach(a=>{a.classList.contains("fa-ellipsis")?a.addEventListener("click",t.onClickOther):a.classList.contains("fa-pencil-alt")?a.addEventListener("click",t.onClickEdit):a.classList.contains("fa-trash-alt")?a.addEventListener("click",t.onClickDelete):a.classList.contains("fa-envelope")?a.addEventListener("click",t.onClickSend):a.classList.contains("fa-download")?a.addEventListener("click",t.onClickDownload):a.classList.contains("fa-print")&&a.addEventListener("click",t.onClickPrint)});const e=document.createElement("main");return e.id="contenutoPrincipale",e.appendChild(l),e}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
  name: "Tabella semplice",
  argTypes: {
    results: {
      control: "object",
      description: "I dati della tabella, come array di righe."
    },
    onClick: {
      action: "cancellaRow",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    }
  },
  args: {
    results: [{
      "ID Pratica ": "Dato 1",
      "Stato": "Dato 1",
      "Richiedente": "Dato 1",
      "Data Invio": "Dato 1"
    }, {
      "ID Pratica ": "Dato 2",
      "Stato": "Dato 2",
      "Richiedente": "Dato 2",
      "Data Invio": "Dato 2"
    }, {
      "ID Pratica ": "Dato 3",
      "Stato": "Dato 3",
      "Richiedente": "Dato 3",
      "Data Invio": "Dato 3"
    }, {
      "ID Pratica ": "Dato 4",
      "Stato": "Dato 4",
      "Richiedente": "Dato 4",
      "Data Invio": "Dato 4"
    }]
  },
  render: args => {
    //---------Forzare eventi----------------//
    const tableHTML = CreateSimpleTable(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = tableHTML;

    // Cerca il bottone dentro il div temporaneo
    const button = tempDiv.getElementsByTagName("button");

    // Se il bottone esiste, aggiungi l'evento click
    if (button) {
      for (let i = 0; i < button.length; i++) {
        //Not dynamic
        button[i].addEventListener("click", args.onClick);
        //Dynamic (with row number)
        // button[i].addEventListener("click", () => args.onClick(\`cancellaRow\${i + 1}\`));
      }
    }

    // Crea il main e appende il bottone all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    mainElement.appendChild(tempDiv);

    // Ritorna il main element con il bottone all'interno
    return mainElement || "";
  }
}`,...d.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
  name: "Tabella semplice responsive alternativa",
  argTypes: {
    results: {
      control: "object",
      description: "I dati della tabella, come array di righe."
    }
  },
  args: {
    results: [{
      "ID Practica": "1",
      Stato: "Dato 1",
      Richiedente: "Dato 1",
      "Data Invio": "Dato 1"
    }, {
      "ID Practica": "2",
      Stato: "Dato 2",
      Richiedente: "Dato 2",
      "Data Invio": "Dato 2"
    }, {
      "ID Practica": "3",
      Stato: "Dato 3",
      Richiedente: "Dato 3",
      "Data Invio": "Dato 3"
    }, {
      "ID Practica": "4",
      Stato: "Dato 4",
      Richiedente: "Dato 4",
      "Data Invio": "Dato 4"
    }]
  },
  render: args => CreateSimpleResponsiveAlternativeTable(args.results)
}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
  name: "Tabella vuota",
  render: args => CreateEmptyTable()
}`,...p.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
  name: "Tabella Uno",
  argTypes: {
    results: {
      control: "object",
      description: "I dati della tabella, come array di righe."
    },
    onClickEdit: {
      action: "modificaRow",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickDelete: {
      action: "cancellaRow",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    }
  },
  args: {
    results: [{
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum",
      "Data Invio": "Lorem ipsum"
    }, {
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum",
      "Data Invio": "Lorem ipsum"
    }, {
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum",
      "Data Invio": "Lorem ipsum"
    }, {
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum",
      "Data Invio": "Lorem ipsum"
    }, {
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum",
      "Data Invio": "Lorem ipsum"
    }, {
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum",
      "Data Invio": "Lorem ipsum"
    }, {
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum",
      "Data Invio": "Lorem ipsum"
    }, {
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum",
      "Data Invio": "Lorem ipsum"
    }, {
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum",
      "Data Invio": "Lorem ipsum"
    }, {
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum",
      "Data Invio": "Lorem ipsum"
    }, {
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum",
      "Data Invio": "Lorem ipsum"
    }]
  },
  render: args => {
    //---------Forzare eventi----------------//
    const tableHtml = CreateTableOne(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = tableHtml;

    // Cerca il bottone dentro il div temporaneo
    const buttons = tempDiv.getElementsByTagName("button");

    // Se il bottone esiste, aggiungi l'evento click
    if (buttons) {
      for (let i = 0; i < buttons.length; i++) {
        if (buttons[i].id == "edit") {
          buttons[i].addEventListener("click", args.onClickEdit);
        } else {
          buttons[i].addEventListener("click", args.onClickDelete);
        }
      }
    }

    // Crea il main e appende il bottone all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    if (buttons) {
      mainElement.appendChild(tempDiv);
    }

    // Ritorna il main element con il bottone all'interno
    return mainElement || "";
  }
}`,...b.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
  name: "Tabella con accordion",
  argTypes: {
    results: {
      control: "object",
      description: "I dati della tabella, come array di righe."
    },
    onClick: {
      action: "espandi/riduci",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    }
  },
  args: {
    results: [{
      "ID Pratica": "1",
      Stato: "Lorem ipsum",
      " Richiedente ": "Lorem ipsum"
    }, {
      "ID Pratica": "2",
      Stato: "Lorem ipsum",
      " Richiedente ": "Lorem ipsum"
    }, {
      "ID Pratica": "3",
      Stato: "Lorem ipsum",
      " Richiedente ": "Lorem ipsum"
    }]
  },
  render: args => {
    //---------Forzare eventi----------------//
    const tableHtml = CreateAccordionTable(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = tableHtml;

    // Cerca il bottone dentro il div temporaneo
    const buttons = tempDiv.getElementsByTagName("button");

    // Se il bottone esiste, aggiungi l'evento click
    if (buttons) {
      for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", args.onClick);
      }
    }

    // Crea il main e appende il bottone all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    if (buttons) {
      mainElement.appendChild(tempDiv);
    }

    // Ritorna il main element con il bottone all'interno
    return mainElement || "";
  }
}`,...u.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
  name: "Tabella con checkbox",
  argTypes: {
    results: {
      control: "object",
      description: "Dati da visualizzare nella tabella con checkbox"
    },
    onClick: {
      action: "click",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    }
  },
  args: {
    results: [{
      "ID Pratica": "1",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "2",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "3",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "4",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "5",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "6",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "7",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "8",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "9",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "10",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "11",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }]
  },
  render: args => {
    //---------Forzare eventi----------------//
    const tableHtml = CreateTableCheckbox(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = tableHtml;

    // Cerca il bottone dentro il div temporaneo
    const buttons = tempDiv.getElementsByTagName("button");

    // Se il bottone esiste, aggiungi l'evento click
    if (buttons) {
      for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", args.onClick);
      }
    }

    // Crea il main e appende il bottone all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    if (buttons) {
      mainElement.appendChild(tempDiv);
    }

    // Ritorna il main element con il bottone all'interno
    return mainElement || "";
  }
}`,...h.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
  name: "Tabella con elementi in download",
  argTypes: {
    results: {
      control: "object",
      description: "I dati della tabella, come array di righe."
    },
    onClick: {
      action: "scarica",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    }
  },
  args: {
    results: [{
      "ID Pratica": "1",
      Stato: "Lorem ipsum",
      Azioni: "download"
    }, {
      "ID Pratica": "2",
      Stato: "Lorem ipsum",
      Azioni: "download"
    }, {
      "ID Pratica": "3",
      Stato: "Lorem ipsum",
      Azioni: "download"
    }]
  },
  render: args => {
    //---------Forzare eventi----------------//
    const tableHtml = CreateTableWithDownload(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = tableHtml;

    // Cerca il bottone dentro il div temporaneo
    const buttons = tempDiv.getElementsByTagName("button");

    // Se il bottone esiste, aggiungi l'evento click
    if (buttons) {
      for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", args.onClick);
      }
    }

    // Crea il main e appende il bottone all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    if (buttons) {
      mainElement.appendChild(tempDiv);
    }

    // Ritorna il main element con il bottone all'interno
    return mainElement || "";
  }
}`,...v.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
  name: "Tabella con icone e notifiche",
  parameters: {
    docs: {
      story: {
        inline: false,
        iframeHeight: 500
      }
    }
  },
  argTypes: {
    results: {
      control: "object",
      description: "I dati della tabella, come array di righe."
    },
    onClickNotifiche: {
      action: "apriNotifiche",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickPagamenti: {
      action: "apriPagamenti",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    }
  },
  args: {
    results: [{
      "ID Pratica": "Lorem ipsum",
      "Stato": "Lorem ipsum",
      "Richiedente": "Lorem ipsum",
      "Data Invio": "Lorem ipsum",
      "notifiche": 1,
      "pagamenti": 2
    }, {
      "ID Pratica": "Lorem ipsum",
      "Stato": "Lorem ipsum",
      "Richiedente": "Lorem ipsum",
      "Data Invio": "Lorem ipsum",
      "notifiche": 1,
      "pagamenti": 2
    }, {
      "ID Pratica": "Lorem ipsum",
      "Stato": "Lorem ipsum",
      "Richiedente": "Lorem ipsum",
      "Data Invio": "Lorem ipsum",
      "notifiche": 0,
      "pagamenti": 0
    }]
  },
  render: args => {
    const tableHtml = CreateTableWithIconsNotify(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = tableHtml;

    // Use querySelectorAll for class selection
    const buttons = tempDiv.querySelectorAll(".icon-wrapper");
    buttons.forEach(btn => {
      if (btn.classList.contains("fa-file-alt")) {
        btn.addEventListener("click", args.onClickNotifiche);
      } else {
        btn.addEventListener("click", args.onClickPagamenti);
      }
    });
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    mainElement.appendChild(tempDiv);
    return mainElement;
  }
}`,...g.parameters?.docs?.source}}};L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
  name: "Tabella con status",
  argTypes: {
    results: {
      control: "object",
      description: "I dati della tabella, come array di righe."
    },
    onClick: {
      action: "espandi/riduci",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    }
  },
  args: {
    results: [{
      "ID Pratica": "1",
      "Richiedente": "Valore A",
      "Avanzamento": 100
    }, {
      "ID Pratica": "2",
      "Richiedente": "Valore B",
      "Avanzamento": 75
    }, {
      "ID Pratica": "3",
      "Richiedente": "Valore C",
      "Avanzamento": 50
    }, {
      "ID Pratica": "4",
      "Richiedente": "Valore D",
      "Avanzamento": 25
    }, {
      "ID Pratica": "5",
      "Richiedente": "Valore E",
      "Avanzamento": 90
    }]
  },
  render: args => {
    //---------Forzare eventi----------------//
    const tableHtml = CreateTableWithStatus(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = tableHtml;

    // Cerca il bottone dentro il div temporaneo
    const buttons = tempDiv.getElementsByTagName("button");

    // Se il bottone esiste, aggiungi l'evento click
    if (buttons) {
      for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", args.onClick);
      }
    }

    // Crea il main e appende il bottone all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    if (buttons) {
      mainElement.appendChild(tempDiv);
    }

    // Ritorna il main element con il bottone all'interno
    return mainElement || "";
  }
}`,...L.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
  name: "Tabella con radio button",
  argTypes: {
    results: {
      control: "object",
      description: "I dati della tabella, come array di righe."
    }
  },
  args: {
    results: [{
      Colonna2: "Lorem ipsum",
      Colonna3: "Lorem ipsum",
      Colonna4: "Lorem ipsum"
    }, {
      Colonna2: "Lorem ipsum",
      Colonna3: "Lorem ipsum",
      Colonna4: "Lorem ipsum"
    }, {
      Colonna2: "Lorem ipsum",
      Colonna3: "Lorem ipsum",
      Colonna4: "Lorem ipsum"
    }, {
      Colonna2: "Lorem ipsum",
      Colonna3: "Lorem ipsum",
      Colonna4: "Lorem ipsum"
    }]
  },
  render: args => CreateTableWithRadio(args.results)
}`,...f.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
  name: "Tabella con campi collassabili e CTA",
  argTypes: {
    results: {
      control: "object",
      description: "Dati da visualizzare nella tabella con checkbox"
    },
    onClickExpand: {
      action: "espandi/riduci",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickEdit: {
      action: "modifica",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickDelete: {
      action: "elimina",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickSend: {
      action: "invia",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickOther: {
      action: "altre opzioni",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickDownload: {
      action: "scarica",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickPrint: {
      action: "stampa",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    }
  },
  args: {
    results: [{
      "ID Pratica": "1",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "2",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "3",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "4",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "5",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }]
  },
  render: args => {
    const tableHtml = CreateTableWithCollapse(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = tableHtml;

    // Use querySelectorAll for class selection
    const buttons = tempDiv.querySelectorAll("i");
    buttons.forEach(btn => {
      if (btn.classList.contains("fa-ellipsis")) {
        btn.addEventListener("click", args.onClickOther);
      } else if (btn.classList.contains("fa-pencil-alt")) {
        btn.addEventListener("click", args.onClickEdit);
      } else if (btn.classList.contains("fa-trash-alt")) {
        btn.addEventListener("click", args.onClickDelete);
      } else if (btn.classList.contains("fa-envelope")) {
        btn.addEventListener("click", args.onClickSend);
      } else if (btn.classList.contains("fa-download")) {
        btn.addEventListener("click", args.onClickDownload);
      } else if (btn.classList.contains("fa-print")) {
        btn.addEventListener("click", args.onClickPrint);
      } else if (btn.classList.contains("fa-chevron-down")) {
        btn.addEventListener("click", args.onClickExpand);
      }
    });
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    mainElement.appendChild(tempDiv);
    return mainElement;
  }
}`,...k.parameters?.docs?.source}}};D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
  name: "Tabella con colonne ordinabili e checkboxes",
  argTypes: {
    results: {
      control: "object",
      description: "Dati da visualizzare nella tabella con checkbox"
    },
    onClickEdit: {
      action: "modifica",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickDelete: {
      action: "elimina",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickSend: {
      action: "invia",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickOther: {
      action: "altre opzioni",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickDownload: {
      action: "scarica",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    },
    onClickPrint: {
      action: "stampa",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    }
  },
  args: {
    results: [{
      "ID Pratica": "1",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "2",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "3",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "4",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }, {
      "ID Pratica": "5",
      Stato: "Lorem ipsum",
      Richiedente: "Lorem ipsum"
    }]
  },
  render: args => {
    const tableHtml = CreateTableWithColumnsCheckbox(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = tableHtml;

    // Use querySelectorAll for class selection
    const buttons = tempDiv.querySelectorAll("i");
    buttons.forEach(btn => {
      if (btn.classList.contains("fa-ellipsis")) {
        btn.addEventListener("click", args.onClickOther);
      } else if (btn.classList.contains("fa-pencil-alt")) {
        btn.addEventListener("click", args.onClickEdit);
      } else if (btn.classList.contains("fa-trash-alt")) {
        btn.addEventListener("click", args.onClickDelete);
      } else if (btn.classList.contains("fa-envelope")) {
        btn.addEventListener("click", args.onClickSend);
      } else if (btn.classList.contains("fa-download")) {
        btn.addEventListener("click", args.onClickDownload);
      } else if (btn.classList.contains("fa-print")) {
        btn.addEventListener("click", args.onClickPrint);
      }
    });
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    mainElement.appendChild(tempDiv);
    return mainElement;
  }
}`,...D.parameters?.docs?.source}}};const V=["SimpleTable","AlternativeTable","EmptyTable","TableOne","AccordionTable","TableCheckbox","TableWithDownload","TableWithIconsNotify","TableWithStatus","TableWithRadio","TableWithCollapse","TableWithColumnsCheckbox"];export{u as AccordionTable,m as AlternativeTable,p as EmptyTable,d as SimpleTable,h as TableCheckbox,b as TableOne,k as TableWithCollapse,D as TableWithColumnsCheckbox,v as TableWithDownload,g as TableWithIconsNotify,f as TableWithRadio,L as TableWithStatus,V as __namedExportsOrder,q as default};
