import{m as p}from"./iframe-I4S6H_qo.js";import"./preload-helper-PPVm8Dsz.js";const v=t=>t.map(i=>`<li>
							<span><i class="fa-solid ${i.icon}"></i>${i.name}</span>
							<button class="inail-tertiary-button">${i.downloadLabel}</button>
						</li>`).join(`
`);function b(t){return`
<div class="row">
	<button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#id-univoco-modale" id="apriButton"> Un tasto </button>
</div>
<div class="modal fade inail-modale" role="dialog" id="id-univoco-modale" 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="titolo-modale-1" class="inail-modale-title pull-left" tabindex="-1">${t.titoloModale}</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="row">
						<p class="inail-body-text-1">${t.descrizione}</p>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="inail-button inail-button-primary pull-right" id="primarioButton" data-dismiss="modal">${t.etichettaBottone}</button>
				</div>
			</div>
		</div>
	</div>
</div>`}function B(t){return`<div class="row">
	<button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#id-univoco-modale-2" id="apriButton"> Due tasti </button>
</div>
<div class="modal fade inail-modale" role="dialog" id="id-univoco-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="titolo-modale-2" class="inail-modale-title pull-left" tabindex="-1">${t.titoloModale}</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="row">
						 <p class="inail-body-text-1">${t.descrizione}</p>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="inail-button inail-button-primary pull-right ml-4" id="primarioButton" data-dismiss="modal">${t.etichettaBottonePrimario}</button>
					<button type="button" class="inail-button inail-button-secondary pull-right" id="secondarioButton">${t.etichettaBottoneSecondario}</button>
				</div>
			</div>
		</div>
	</div>
</div>`}function f(t){return`<div class="row">
	<button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#id-univoco-modale-3" id="apriButton"> Tre tasti </button>
</div>
<div class="modal fade inail-modale" role="dialog" id="id-univoco-modale-3" 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="titolo-modale-3" class="inail-modale-title pull-left" tabindex="-1">${t.titoloModale}</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">
					<p class="inail-body-text-1">${t.descrizione}</p>
				</div>
				<div class="modal-footer noMargin">
					<button type="button" class="inail-button inail-button-primary  pull-right ml-4" data-dismiss="modal" id="primarioButton">${t.etichettaBottonePrimario}</button>
					<button type="button" class="inail-button inail-button-secondary  pull-right" id="secondarioButton">${t.etichettaBottoneSecondario}</button>
					<a href="javascript:void(0)" class="inail-text-link-1 ml-0">
					${t.etichettaLink}
					<span class="sr-only">Inserire informazioni complementari</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>`}function y(t){return`<div class="row">
	<button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#myModalForm" id="apriButton"> Con form </button>
</div>
<div class="modal fade inail-modale inail-modale-form" role="dialog" id="myModalForm" tabindex="-1" aria-label='_'>
	<div class="modal-dialog  modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
					<div id="titolo-modale-4" class="inail-modale-title pull-left" tabindex="-1">${t.titoloModale}</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 inail-input-ricerca-modale inail-input-ricerca">
				<form class="row col-12" action="#" name="filterForm" id="filtro-base-1">
					<div class="row col-12 inail-first-row">
							<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 p-0">
							<label class="control-label inail-label" for="input-ricerca">CERCA</label>
								<input id="input-ricerca" class="form-control inail-input inail-ricerca" placeholder = "Testo da cercare..." type = 'text'>
								<div class="inail-div-message"></div>
							</div>
						
						<div>
							<button class="inail-tertiary-button col-xs-12 col-sm-12 col-md-2 col-lg-2 mt-0 pt-0">Cerca</button>
						</div>
					</div>

					<div class="row form-group col-12">
						<p class="inail-body-text-1">
						<strong>Lorem ipsum</strong>
						<br>
At vero eos et accusamus et iusto odio dignissimos 
						</p>
					</div>

					<div class="row">

						<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pl-0">
	<label class="inail-label" for="input-select-1">LABEL</label>
	<select class="form-control inail-input form-select" id="input-select-1">
		<option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		<option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		<option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		<option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	</select>
	<div class="inail-div-message"></div>
						</div>

						<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 pl-0">
	<label class="inail-label" for="input-select-2">LABEL</label>
	<select class="form-control inail-input form-select" id="input-select-2">
		<option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		<option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		<option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		<option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	</select>
	<div class="inail-div-message"></div>
						</div>
					</div>
					<div class="row form-group col-12">
						<p class="inail-body-text-1">
							<strong>Descrizione</strong>
							<br />${t.descrizione}
            			</p>
					</div>
					<div>
						<div class="input-flex button form-group pull-right">
							<button type="button" class="inail-button inail-button-primary" data-dismiss="modal" id="confermaButton">Conferma </button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>`}function g(t){return`<div class="row">
   <button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#modalTabella1" id="apriButton">
   Con tabella
   </button>                                    
</div>
<!-- Modale -->
<!-- Modale tabella -->
<div class="modal fade  inail-modale inail-modal-table" role="dialog" id="modalTabella1" 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="titolo-modale-5" class="inail-modale-title pull-left" tabindex="-1">${t.titoloModale}</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="Nome della 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>
                        <tr>
                           <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>
						 <tr>
                           <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>
            <div class="modal-footer">
               <button type="button" class="inail-button inail-button-primary pull-right" data-dismiss="modal" id="primarioButton">${t.etichettaBottone}</button>
            </div>
         </div>
      </div>
   </div>
</div>`}function k(t){return`<div class="row">
	<button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#idModalLista" id="apriButton">
   Con lista
   </button>
</div>
<!-- Modale -->
<!-- modale Ultimi provvedimenti -->
<div class="modal fade inail-modale" role="dialog" id="idModalLista" 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="titolo-modale-6" class="inail-modale-title pull-left" tabindex="-1">${t.titoloModale}</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></div>
				<div class="modal-body">
				<ul class="modaleLista" aria-label="Nome lista">
				${v(t.listaFile)}
				</ul>
				</div>
				<div class="modal-footer">
					<button type="button" class="inail-button inail-button-primary pull-right" data-dismiss="modal" id="primarioButton">
               ${t.etichettaBottone}
               </button>
				</div>
			</div>
		</div>
	</div>
</div>`}const h=`Una finestra modale è una finestra "figlia" che richiede all'utente di interagire con essa prima di ritornare ad operare con la finestra "madre", impedendo la prosecuzione del flusso di lavoro sulla finestra principale dell'applicazione in esecuzione. Una volta richiusa la finestra il focus deve ritornare nella sua posizione iniziale (il componente che ha generato l’apertura della finestra). Se quel componente non è più presente il focus deve riposizionarsi subito dopo o prima quel componente, per esempio su un punto di arrivo che non dovrà più successivamente ricevere il focus (a meno che sia un elemento di input). In casi specifici il focus può essere riposizionato in una posizione coerente con la logica del flusso di navigazione.`,L={title:"Componenti/Box e Tab/Finestre modali",tags:["autodocs"],parameters:{docs:{story:{inline:!1,iframeHeight:500},description:{component:`Una finestra modale è una finestra "figlia" che richiede all'utente di interagire con essa prima di ritornare ad operare con la finestra <br /> "madre", impedendo la prosecuzione del flusso di lavoro sulla finestra principale dell'applicazione in esecuzione.`},mdxPage:h,showAccessibility:!0}},decorators:[(t,i)=>p(t,i,6,["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/js/main.js","https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-modal.js"],!0)]},r={name:"Un tasto",argTypes:{titoloModale:{control:{type:"text"},description:"Titolo del modale",table:{defaultValue:{summary:"Titolo modale"}}},descrizione:{control:{type:"text"},description:"Descrizione del contenuto",table:{defaultValue:{summary:"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."}}},etichettaBottone:{control:{type:"text"},description:"Etichetta del bottone",table:{defaultValue:{summary:"OK"}}},onClickApriButton:{action:"onClickApriButton",description:"Evento al click del button Apri.",table:{disable:!0}},onClickPrimarioButton:{action:"onClickPrimarioButton",description:"Evento al click del button primario.",table:{disable:!0}}},args:{titoloModale:"Titolo modale",descrizione:"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.",etichettaBottone:"Ok"},render:t=>{const i=b(t),e=document.createElement("div");e.innerHTML=i;const a=e.querySelector("#apriButton"),n=e.querySelector("#primarioButton");a&&n&&(a.addEventListener("click",t.onClickApriButton),n.addEventListener("click",t.onClickPrimarioButton));const o=document.createElement("main");return o.id="contenutoPrincipale",o.appendChild(e),o||""}},d={name:"Due tasti",argTypes:{titoloModale:{control:{type:"text"},description:"Titolo del modale",table:{defaultValue:{summary:"Titolo modale"}}},descrizione:{control:{type:"text"},description:"Descrizione del contenuto",table:{defaultValue:{summary:"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."}}},etichettaBottonePrimario:{control:{type:"text"},description:"Testo del bottone primario",table:{defaultValue:{summary:"Si"}}},etichettaBottoneSecondario:{control:{type:"text"},description:"Testo del bottone secondario",table:{defaultValue:{summary:"No"}}},onClickApriButton:{action:"onClickApriButton",description:"Evento al click del button Apri.",table:{disable:!0}},onClickPrimaryButton:{action:"onClickPrimaryButton",description:"Evento al click del button primario.",table:{disable:!0}},onClickSecondaryButton:{action:"onClickSecondaryButton",description:"Evento al click del button secondario.",table:{disable:!0}}},args:{titoloModale:"Titolo modale",descrizione:"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.",etichettaBottonePrimario:"Si",etichettaBottoneSecondario:"No"},render:t=>{const i=B(t),e=document.createElement("div");e.innerHTML=i;const a=e.querySelector("#apriButton"),n=e.querySelector("#primarioButton"),o=e.querySelector("#secondarioButton");a&&n&&o&&(a.addEventListener("click",t.onClickApriButton),n.addEventListener("click",t.onClickPrimaryButton),o.addEventListener("click",t.onClickSecondaryButton));const l=document.createElement("main");return l.id="contenutoPrincipale",l.appendChild(e),l||""}},c={name:"Tre tasti",argTypes:{titoloModale:{control:{type:"text"},description:"Titolo del modale",table:{defaultValue:{summary:"Titolo modale"}}},descrizione:{control:{type:"text"},description:"Descrizione del contenuto",table:{defaultValue:{summary:"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."}}},etichettaBottonePrimario:{control:{type:"text"},description:"Testo del bottone primario",table:{defaultValue:{summary:"Conferma"}}},etichettaBottoneSecondario:{control:{type:"text"},description:"Testo del bottone secondario",table:{defaultValue:{summary:"Annulla"}}},etichettaLink:{control:{type:"text"},description:"Etichetta del link",table:{defaultValue:{summary:"Scopri di più"}}},onClickApriButton:{action:"onClickApriButton",description:"Evento al click del button Apri.",table:{disable:!0}},onClickPrimaryButton:{action:"onClickPrimaryButton",description:"Evento al click del button primario.",table:{disable:!0}},onClickSecondaryButton:{action:"onClickSecondaryButton",description:"Evento al click del button secondario.",table:{disable:!0}}},args:{titoloModale:"Titolo modale",descrizione:"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.",etichettaBottonePrimario:"Conferma",etichettaBottoneSecondario:"Annulla",etichettaLink:"Scopri di più"},render:t=>{const i=f(t),e=document.createElement("div");e.innerHTML=i;const a=e.querySelector("#apriButton"),n=e.querySelector("#primarioButton"),o=e.querySelector("#secondarioButton");a&&n&&o&&(a.addEventListener("click",t.onClickApriButton),n.addEventListener("click",t.onClickPrimaryButton),o.addEventListener("click",t.onClickSecondaryButton));const l=document.createElement("main");return l.id="contenutoPrincipale",l.appendChild(e),l||""}},s={name:"Con form",argTypes:{titoloModale:{control:{type:"text"},description:"Titolo del modale",table:{defaultValue:{summary:"Titolo modale con form"}}},descrizione:{control:{type:"text"},description:"Descrizione del contenuto",table:{defaultValue:{summary:"Lorem ipsum At vero eos et accusamus et iusto odio dignissimos"}}},etichettaBottone:{control:{type:"text"},description:"Etichetta del bottone",table:{defaultValue:{summary:"Cerca"}}},onClickApriButton:{action:"onClickApriButton",description:"Evento al click del button Apri.",table:{disable:!0}},onClickConfermaButton:{action:"onClickConfermaButton",description:"Evento al click del button Conferma.",table:{disable:!0}}},args:{titoloModale:"Titolo modale con form",descrizione:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ligula enim, posuere ac ante quis, aliquam tincidunt justo. Cras egestas, augue ultricies semper accumsan, nisi mauris congue felis, vitae accumsan ligula turpis quis velit. Mauris convallis orci ante, eu imperdiet purus rutrum vitae. Quisque quis augue efficitur, facilisis elit et, cursus tortor. Pellentesque id magna consequat, vulputate nisl vitae, porta tellus ",etichettaBottone:"Cerca"},render:t=>{const i=y(t),e=document.createElement("div");e.innerHTML=i;const a=e.querySelector("#apriButton"),n=e.querySelector("#confermaButton");a&&n&&(a.addEventListener("click",t.onClickApriButton),n.addEventListener("click",t.onClickConfermaButton));const o=document.createElement("main");return o.id="contenutoPrincipale",o.appendChild(e),o||""}},u={name:"Con tabella",argTypes:{titoloModale:{control:{type:"text"},description:"Titolo del modale",table:{defaultValue:{summary:"Titolo modale con tabella"}}},etichettaBottone:{control:{type:"text"},description:"Etichetta del bottone",table:{defaultValue:{summary:"Conferma"}}},onClickApriButton:{action:"onClickApriButton",description:"Evento al click del button Apri.",table:{disable:!0}},onClickPrimarioButton:{action:"onClickPrimarioButton",description:"Evento al click del button primario.",table:{disable:!0}}},args:{titoloModale:"Titolo modale con tabella",etichettaBottone:"Conferma"},render:t=>{const i=g(t),e=document.createElement("div");e.innerHTML=i;const a=e.querySelector("#apriButton"),n=e.querySelector("#primarioButton");a&&n&&(a.addEventListener("click",t.onClickApriButton),n.addEventListener("click",t.onClickPrimarioButton));const o=document.createElement("main");return o.id="contenutoPrincipale",o.appendChild(e),o||""}},m={name:"Con lista",argTypes:{titoloModale:{control:{type:"text"},description:"Titolo del modale",table:{defaultValue:{summary:"Titolo modale con lista"}}},listaFile:{control:"object",description:"Lista dei file"},etichettaBottone:{control:{type:"text"},description:"Etichetta del bottone",table:{defaultValue:{summary:"Conferma"}}},onClickApriButton:{action:"onClickApriButton",description:"Evento al click del button Apri.",table:{disable:!0}},onClickPrimarioButton:{action:"onClickPrimarioButton",description:"Evento al click del button primario.",table:{disable:!0}}},args:{titoloModale:"Titolo modale con lista",etichettaBottone:"Conferma",listaFile:[{icon:"fa-file-pdf",name:"Lorem ipsum dolor",downloadLabel:"Scarica"},{icon:"fa-file-word",name:"Lorem ipsum dolor",downloadLabel:"Scarica"},{icon:"fa-file-excel",name:"Lorem ipsum dolor",downloadLabel:"Scarica"},{icon:"fa-file-pdf",name:"Lorem ipsum dolor",downloadLabel:"Scarica"},{icon:"fa-file-excel",name:"Lorem ipsum dolor",downloadLabel:"Scarica"}]},render:t=>{const i=k(t),e=document.createElement("div");e.innerHTML=i;const a=e.querySelector("#apriButton"),n=e.querySelector("#primarioButton");a&&n&&(a.addEventListener("click",t.onClickApriButton),n.addEventListener("click",t.onClickPrimarioButton));const o=document.createElement("main");return o.id="contenutoPrincipale",o.appendChild(e),o||""}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  name: "Un tasto",
  argTypes: {
    titoloModale: {
      control: {
        type: "text"
      },
      description: "Titolo del modale",
      table: {
        defaultValue: {
          summary: "Titolo modale"
        }
      }
    },
    descrizione: {
      control: {
        type: "text"
      },
      description: "Descrizione del contenuto",
      table: {
        defaultValue: {
          summary: "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."
        }
      }
    },
    etichettaBottone: {
      control: {
        type: "text"
      },
      description: "Etichetta del bottone",
      table: {
        defaultValue: {
          summary: "OK"
        }
      }
    },
    onClickApriButton: {
      action: "onClickApriButton",
      description: "Evento al click del button Apri.",
      table: {
        disable: true
      }
    },
    onClickPrimarioButton: {
      action: "onClickPrimarioButton",
      description: "Evento al click del button primario.",
      table: {
        disable: true
      }
    }
  },
  args: {
    titoloModale: "Titolo modale",
    descrizione: "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.",
    etichettaBottone: "Ok"
  },
  render: args => {
    //---------Forzare eventi----------------//
    const modalHTML = createModal(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = modalHTML;

    // Cerca il bottone dentro il div temporaneo
    const apriButton = tempDiv.querySelector("#apriButton");
    const primarioButton = tempDiv.querySelector("#primarioButton");

    // Se il bottone esiste, aggiungi l'evento click
    if (apriButton && primarioButton) {
      apriButton.addEventListener("click", args.onClickApriButton);
      primarioButton.addEventListener("click", args.onClickPrimarioButton);
    }

    // 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 || "";
  }
}`,...r.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
  name: "Due tasti",
  argTypes: {
    titoloModale: {
      control: {
        type: "text"
      },
      description: "Titolo del modale",
      table: {
        defaultValue: {
          summary: "Titolo modale"
        }
      }
    },
    descrizione: {
      control: {
        type: "text"
      },
      description: "Descrizione del contenuto",
      table: {
        defaultValue: {
          summary: "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."
        }
      }
    },
    etichettaBottonePrimario: {
      control: {
        type: "text"
      },
      description: "Testo del bottone primario",
      table: {
        defaultValue: {
          summary: "Si"
        }
      }
    },
    etichettaBottoneSecondario: {
      control: {
        type: "text"
      },
      description: "Testo del bottone secondario",
      table: {
        defaultValue: {
          summary: "No"
        }
      }
    },
    onClickApriButton: {
      action: "onClickApriButton",
      description: "Evento al click del button Apri.",
      table: {
        disable: true
      }
    },
    onClickPrimaryButton: {
      action: "onClickPrimaryButton",
      description: "Evento al click del button primario.",
      table: {
        disable: true
      }
    },
    onClickSecondaryButton: {
      action: "onClickSecondaryButton",
      description: "Evento al click del button secondario.",
      table: {
        disable: true
      }
    }
  },
  args: {
    titoloModale: "Titolo modale",
    descrizione: "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.",
    etichettaBottonePrimario: "Si",
    etichettaBottoneSecondario: "No"
  },
  render: args => {
    //---------Forzare eventi----------------//
    const modalHTML = createModalButton(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = modalHTML;

    // Cerca il bottone dentro il div temporaneo
    const apriButton = tempDiv.querySelector("#apriButton");
    const primarioButton = tempDiv.querySelector("#primarioButton");
    const secondarioButton = tempDiv.querySelector("#secondarioButton");

    // Se il bottone esiste, aggiungi l'evento click
    if (apriButton && primarioButton && secondarioButton) {
      apriButton.addEventListener("click", args.onClickApriButton);
      primarioButton.addEventListener("click", args.onClickPrimaryButton);
      secondarioButton.addEventListener("click", args.onClickSecondaryButton);
    }

    // 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}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
  name: "Tre tasti",
  argTypes: {
    titoloModale: {
      control: {
        type: "text"
      },
      description: "Titolo del modale",
      table: {
        defaultValue: {
          summary: "Titolo modale"
        }
      }
    },
    descrizione: {
      control: {
        type: "text"
      },
      description: "Descrizione del contenuto",
      table: {
        defaultValue: {
          summary: "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."
        }
      }
    },
    etichettaBottonePrimario: {
      control: {
        type: "text"
      },
      description: "Testo del bottone primario",
      table: {
        defaultValue: {
          summary: "Conferma"
        }
      }
    },
    etichettaBottoneSecondario: {
      control: {
        type: "text"
      },
      description: "Testo del bottone secondario",
      table: {
        defaultValue: {
          summary: "Annulla"
        }
      }
    },
    etichettaLink: {
      control: {
        type: "text"
      },
      description: "Etichetta del link",
      table: {
        defaultValue: {
          summary: "Scopri di più"
        }
      }
    },
    onClickApriButton: {
      action: "onClickApriButton",
      description: "Evento al click del button Apri.",
      table: {
        disable: true
      }
    },
    onClickPrimaryButton: {
      action: "onClickPrimaryButton",
      description: "Evento al click del button primario.",
      table: {
        disable: true
      }
    },
    onClickSecondaryButton: {
      action: "onClickSecondaryButton",
      description: "Evento al click del button secondario.",
      table: {
        disable: true
      }
    }
  },
  args: {
    titoloModale: "Titolo modale",
    descrizione: "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.",
    etichettaBottonePrimario: "Conferma",
    etichettaBottoneSecondario: "Annulla",
    etichettaLink: "Scopri di più"
  },
  render: args => {
    //---------Forzare eventi----------------//
    const modalHTML = createModalThreeButton(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = modalHTML;

    // Cerca il bottone dentro il div temporaneo
    const apriButton = tempDiv.querySelector("#apriButton");
    const primarioButton = tempDiv.querySelector("#primarioButton");
    const secondarioButton = tempDiv.querySelector("#secondarioButton");

    // Se il bottone esiste, aggiungi l'evento click
    if (apriButton && primarioButton && secondarioButton) {
      apriButton.addEventListener("click", args.onClickApriButton);
      primarioButton.addEventListener("click", args.onClickPrimaryButton);
      secondarioButton.addEventListener("click", args.onClickSecondaryButton);
    }

    // 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 || "";
  }
}`,...c.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  name: "Con form",
  argTypes: {
    titoloModale: {
      control: {
        type: "text"
      },
      description: "Titolo del modale",
      table: {
        defaultValue: {
          summary: "Titolo modale con form"
        }
      }
    },
    descrizione: {
      control: {
        type: "text"
      },
      description: "Descrizione del contenuto",
      table: {
        defaultValue: {
          summary: "Lorem ipsum At vero eos et accusamus et iusto odio dignissimos"
        }
      }
    },
    etichettaBottone: {
      control: {
        type: "text"
      },
      description: "Etichetta del bottone",
      table: {
        defaultValue: {
          summary: "Cerca"
        }
      }
    },
    onClickApriButton: {
      action: "onClickApriButton",
      description: "Evento al click del button Apri.",
      table: {
        disable: true
      }
    },
    onClickConfermaButton: {
      action: "onClickConfermaButton",
      description: "Evento al click del button Conferma.",
      table: {
        disable: true
      }
    }
  },
  args: {
    titoloModale: "Titolo modale con form",
    descrizione: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ligula enim, posuere ac ante quis, aliquam tincidunt justo. Cras egestas, augue ultricies semper accumsan, nisi mauris congue felis, vitae accumsan ligula turpis quis velit. Mauris convallis orci ante, eu imperdiet purus rutrum vitae. Quisque quis augue efficitur, facilisis elit et, cursus tortor. Pellentesque id magna consequat, vulputate nisl vitae, porta tellus ",
    etichettaBottone: "Cerca"
  },
  render: args => {
    //---------Forzare eventi----------------//
    const modalHTML = createModalWithForm(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = modalHTML;

    // Cerca il bottone dentro il div temporaneo
    const apriButton = tempDiv.querySelector("#apriButton");
    const confermaButton = tempDiv.querySelector("#confermaButton");

    // Se il bottone esiste, aggiungi l'evento click
    if (apriButton && confermaButton) {
      apriButton.addEventListener("click", args.onClickApriButton);
      confermaButton.addEventListener("click", args.onClickConfermaButton);
    }

    // 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 || "";
  }
}`,...s.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
  name: "Con tabella",
  argTypes: {
    titoloModale: {
      control: {
        type: "text"
      },
      description: "Titolo del modale",
      table: {
        defaultValue: {
          summary: "Titolo modale con tabella"
        }
      }
    },
    etichettaBottone: {
      control: {
        type: "text"
      },
      description: "Etichetta del bottone",
      table: {
        defaultValue: {
          summary: "Conferma"
        }
      }
    },
    onClickApriButton: {
      action: "onClickApriButton",
      description: "Evento al click del button Apri.",
      table: {
        disable: true
      }
    },
    onClickPrimarioButton: {
      action: "onClickPrimarioButton",
      description: "Evento al click del button primario.",
      table: {
        disable: true
      }
    }
  },
  args: {
    titoloModale: "Titolo modale con tabella",
    etichettaBottone: "Conferma"
  },
  render: args => {
    //---------Forzare eventi----------------//
    const modalHTML = createModalWithTable(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = modalHTML;

    // Cerca il bottone dentro il div temporaneo
    const apriButton = tempDiv.querySelector("#apriButton");
    const primarioButton = tempDiv.querySelector("#primarioButton");

    // Se il bottone esiste, aggiungi l'evento click
    if (apriButton && primarioButton) {
      apriButton.addEventListener("click", args.onClickApriButton);
      primarioButton.addEventListener("click", args.onClickPrimarioButton);
    }

    // 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 || "";
  }
}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
  name: "Con lista",
  argTypes: {
    titoloModale: {
      control: {
        type: "text"
      },
      description: "Titolo del modale",
      table: {
        defaultValue: {
          summary: "Titolo modale con lista"
        }
      }
    },
    listaFile: {
      control: "object",
      description: "Lista dei file"
    },
    etichettaBottone: {
      control: {
        type: "text"
      },
      description: "Etichetta del bottone",
      table: {
        defaultValue: {
          summary: "Conferma"
        }
      }
    },
    onClickApriButton: {
      action: "onClickApriButton",
      description: "Evento al click del button Apri.",
      table: {
        disable: true
      }
    },
    onClickPrimarioButton: {
      action: "onClickPrimarioButton",
      description: "Evento al click del button primario.",
      table: {
        disable: true
      }
    }
  },
  args: {
    titoloModale: "Titolo modale con lista",
    etichettaBottone: "Conferma",
    listaFile: [{
      icon: "fa-file-pdf",
      name: "Lorem ipsum dolor",
      downloadLabel: "Scarica"
    }, {
      icon: "fa-file-word",
      name: "Lorem ipsum dolor",
      downloadLabel: "Scarica"
    }, {
      icon: "fa-file-excel",
      name: "Lorem ipsum dolor",
      downloadLabel: "Scarica"
    }, {
      icon: "fa-file-pdf",
      name: "Lorem ipsum dolor",
      downloadLabel: "Scarica"
    }, {
      icon: "fa-file-excel",
      name: "Lorem ipsum dolor",
      downloadLabel: "Scarica"
    }]
  },
  render: args => {
    //---------Forzare eventi----------------//
    const modalHTML = createModalWithList(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = modalHTML;

    // Cerca il bottone dentro il div temporaneo
    const apriButton = tempDiv.querySelector("#apriButton");
    const primarioButton = tempDiv.querySelector("#primarioButton");

    // Se il bottone esiste, aggiungi l'evento click
    if (apriButton && primarioButton) {
      apriButton.addEventListener("click", args.onClickApriButton);
      primarioButton.addEventListener("click", args.onClickPrimarioButton);
    }

    // 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 || "";
  }
}`,...m.parameters?.docs?.source}}};const T=["Modals","ModalWithTwoButtons","ModalsThreeButtons","ModalWithForm","ModalWithTable","ModalWithList"];export{s as ModalWithForm,m as ModalWithList,u as ModalWithTable,d as ModalWithTwoButtons,r as Modals,c as ModalsThreeButtons,T as __namedExportsOrder,L as default};
