import{b as D}from"./Utilities-DayKp0i-.js";function O({title:a,content:i}){return`
<div class="row">
	<button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#id-univoco-modale"> Un tasto </button>
</div>
<div class="modal fade inail-modale" role="dialog" id="id-univoco-modale" tabindex="-1" aria-labelledby="id-univoco-modale">
	<div class="vertical-alignment-helper">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="inail-title-h4 pull-left">Titolo modale</h4>
					<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>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>
				</div>
				<div class="modal-footer">
					<button type="button" class="inail-button inail-button-primary pull-right">OK</button>
				</div>
			</div>
		</div>
	</div>
</div>`}function w({title:a,content:i}){return`<div class="row">
	<button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#id-univoco-modale-2"> Due tasti </button>
</div>
<div class="modal fade inail-modale" role="dialog" id="id-univoco-modale-2" tabindex="-1" aria-labelledby="id-univoco-modale-2">
	<div class="vertical-alignment-helper">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="inail-title-h4 pull-left">Titolo modale</h4>
					<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>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>
				</div>
				<div class="modal-footer">
					<button type="button" class="inail-button inail-button-primary pull-right ml-4">No</button>
					<button type="button" class="inail-button inail-button-secondary pull-right">Si</button>
				</div>
			</div>
		</div>
	</div>
</div>`}function S(){return`<div class="row">
	<button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#id-univoco-modale-3"> Tre tasti </button>
</div>
<div class="modal fade inail-modale" role="dialog" id="id-univoco-modale-3" tabindex="-1" aria-labelledby="id-univoco-modale-3">
	<div class="vertical-alignment-helper">
		<div class="modal-dialog  modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="inail-title-h4 pull-left">Titolo modale</h4>
					<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>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>
				<div class="modal-footer noMargin">
					<button type="button" class="inail-button inail-button-primary  pull-right ml-4" data-dismiss="modal">Conferma</button>
					<button type="button" class="inail-button inail-button-secondary  pull-right">Annulla</button>
					<button type="button" class="inail-button inail-button-link ml-0">Scopri di più</button>
				</div>
			</div>
		</div>
	</div>
</div>`}function k(){return`<div class="row">
	<button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#myModalForm"> Con form </button>
</div>
<div class="modal fade inail-modale inail-modale-form" role="dialog" id="myModalForm" tabindex="-1" aria-labelledby="myModalForm">
	<div class="modal-dialog  modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
					<h4 class="inail-title-h4 pull-left">Titolo modale con form</h4>
					<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 form-group col-12 inail-first-row">
							<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
							<label class="control-label inail-label">CERCA</label>
								<input class="form-control inail-input inail-ricerca" placeholder = "Testo da cercare..." type = 'text'>
							</div>
						
						<div>
							<button class="inail-button inail-button-link col-xs-12 col-sm-12 col-md-2 col-lg-2">Cerca</button>
						</div>
					</div>

					<div class="row form-group col-12">
						<p class="inail-class-pl-15px">Lorem ipsum
							<br /> At vero eos et accusamus et iusto odio dignissimos 
						</p>
					</div>

					<div class="row form-group">

						<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 form-group">
	<label class="inail-label">LABEL</label>
	<select class="form-control inail-input form-select" aria-label="Select">
		<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>

						<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
	<label class="inail-label">LABEL</label>
	<select class="form-control inail-input form-select" aria-label="Select">
		<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>
					</div>
					<div class="row form-group col-12">
						<p class="inail-class-pl-15px">
							<strong>Descrizione</strong>
							<br />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
            			</p>
					</div>
					<div>
						<div class="input-flex button form-group pull-right">
							<button class="inail-button inail-button-primary">Conferma </button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>`}function W(){return`<div class="row">
   <button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#modalTabella1">
   Con tabella
   </button>                                    
</div>
<!-- Modale -->
<!-- Modale tabella -->
<div class="modal fade  inail-modale inail-modal-table" role="dialog" id="modalTabella1" tabindex="-1" aria-labelledby="modalTabella1">
   <div class="vertical-alignment-helper">
      <div class="modal-dialog  modal-dialog-centered">
         <div class="modal-content">
            <div class="modal-header">
					<h4 class="inail-title-h4 pull-left">Titolo modale con form</h4>
					<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">
                     <caption class="sr-only">Inserire descrizione tabella qui</caption>
                     <thead>
                        <tr>
                           <th scope="col" class="col-md-3"><span class="thLabel">Colonna 1</span></th>
                           <th scope="col" class="col-md-3"><span class="thLabel">Colonna 2</span></th>
                           <th scope="col" class="col-md-3"><span class="thLabel">Colonna 3</span></th>
                        </tr>
                     </thead>
                     <tbody >
                        <tr>
                           <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 class="inail-button inail-button-primary pull-right">Conferma </button>
            </div>
         </div>
      </div>
   </div>
</div>`}function B(){return`<div class="row">
	<button type="button" class="inail-button inail-button-primary" data-toggle="modal" data-target="#idModalLista">
   Con lista
   </button>
</div>
<!-- Modale -->
<!-- modale Ultimi provvedimenti -->
<div class="modal fade inail-modale" role="dialog" id="idModalLista" tabindex="-1" aria-labelledby="idModalLista">
	<div class="vertical-alignment-helper">
		<div class="modal-dialog  modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="inail-title-h4 pull-left">Titolo modale con lista</h4>
					<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">
						<li>
							<span><i class="fa-solid fa-file-pdf"></i>Lorem ipsum dolor</span>
							<button class="inail-button inail-button-link">Scarica</button>
						</li>
						<li>
							<span><i class="fa-solid fa-file-word"></i>Lorem ipsum dolor</span>
							<button class="inail-button inail-button-link">Scarica</button>
						</li>
						<li>
							<span><i class="fa-solid fa-file-excel"></i>Lorem ipsum dolor</span>
							<button class="inail-button inail-button-link">Scarica</button>
						</li>
						<li>
							<span><i class="fa-solid fa-file-pdf"></i>Lorem ipsum dolor</span>
							<button class="inail-button inail-button-link">Scarica</button>
						</li>
						<li>
							<span><i class="fa-solid fa-file-excel"></i>Lorem ipsum dolor</span>
							<button class="inail-button inail-button-link">Scarica</button>
						</li>
					</ul>
				</div>
				<div class="modal-footer">
					<button type="button" class="inail-button inail-button-primary pull-right">
               Conferma
               </button>
				</div>
			</div>
		</div>
	</div>
</div>`}const F=`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.`,j={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:F}},decorators:[(a,i)=>D(a,i,1,["static-webkit/js/custom-webkit.js","static/js/main.js","assets/js/custom-modal.js"],!1),a=>`<main id="contenutoPrincipale">${a()}</main>`]},t={name:"Un tasto",render:()=>O({title:"Titolo modale",content:"Lorem ipsum dolor sit amet"})},o={name:"Due tasti",render:()=>w({title:"Titolo modale",content:"Lorem ipsum dolor sit amet"})},l={name:"Tre tasti",render:()=>S()},e={name:"Con form",render:()=>k()},n={name:"Con tabella",render:()=>W()},s={name:"Con lista",render:()=>B()};var d,r,c;t.parameters={...t.parameters,docs:{...(d=t.parameters)==null?void 0:d.docs,source:{originalSource:`{
  name: "Un tasto",
  render: () => {
    return createModal({
      title: "Titolo modale",
      content: "Lorem ipsum dolor sit amet"
    });
  }
}`,...(c=(r=t.parameters)==null?void 0:r.docs)==null?void 0:c.source}}};var u,m,p;o.parameters={...o.parameters,docs:{...(u=o.parameters)==null?void 0:u.docs,source:{originalSource:`{
  name: "Due tasti",
  render: () => {
    return createModalButton({
      title: "Titolo modale",
      content: "Lorem ipsum dolor sit amet"
    });
  }
}`,...(p=(m=o.parameters)==null?void 0:m.docs)==null?void 0:p.source}}};var b,v,f;l.parameters={...l.parameters,docs:{...(b=l.parameters)==null?void 0:b.docs,source:{originalSource:`{
  name: "Tre tasti",
  render: () => {
    return createModalThreeButton();
  }
}`,...(f=(v=l.parameters)==null?void 0:v.docs)==null?void 0:f.source}}};var g,h,y;e.parameters={...e.parameters,docs:{...(g=e.parameters)==null?void 0:g.docs,source:{originalSource:`{
  name: "Con form",
  render: () => {
    return createModalWithForm();
  }
}`,...(y=(h=e.parameters)==null?void 0:h.docs)==null?void 0:y.source}}};var z,M,L;n.parameters={...n.parameters,docs:{...(z=n.parameters)==null?void 0:z.docs,source:{originalSource:`{
  name: "Con tabella",
  render: () => {
    return createModalWithTable();
  }
}`,...(L=(M=n.parameters)==null?void 0:M.docs)==null?void 0:L.source}}};var T,x,C;s.parameters={...s.parameters,docs:{...(T=s.parameters)==null?void 0:T.docs,source:{originalSource:`{
  name: "Con lista",
  render: () => {
    return createModalWithList();
  }
}`,...(C=(x=s.parameters)==null?void 0:x.docs)==null?void 0:C.source}}};const U=["Modals","ModalWithTwoButtons","ModalsThreeButtons","ModalWithForm","ModalWithTable","ModalWithList"];export{e as ModalWithForm,s as ModalWithList,n as ModalWithTable,o as ModalWithTwoButtons,t as Modals,l as ModalsThreeButtons,U as __namedExportsOrder,j as default};
