import{b as O}from"./Utilities-DayKp0i-.js";function w({title:a,content:t}){return`
<div class="row">
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#id-univoco-modale"> Un tasto </button>
</div>
<div class="modal fade" role="dialog" id="id-univoco-modale" tabindex="-1" aria-labelledby="id-univoco-modale-TITOLO">
	<div class="vertical-alignment-helper">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-title" id="id-univoco-modale-TITOLO">Titolo modale</div>
					<button type="button" class="close" data-dismiss="modal" aria-label="Chiudi finestra di dialogo">
						<span aria-hidden="true">×</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<p>Lorem ipsum dolor sit amet</p>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary pull-right">OK</button>
				</div>
			</div>
		</div>
	</div>
</div>`}function D({title:a,content:t}){return`<div class="row">
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#id-univoco-modale-2"> Due tasti </button>
</div>
<div class="modal fade" role="dialog" id="id-univoco-modale-2" tabindex="-1" aria-labelledby="id-univoco-modale-2-TITOLO">
	<div class="vertical-alignment-helper">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-title" id="id-univoco-modale-2-TITOLO">Titolo modale</div>
					<button type="button" class="close" data-dismiss="modal" aria-label="Chiudi finestra di dialogo">
						<span aria-hidden="true">×</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<p>Lorem ipsum dolor sit amet</p>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary">No</button>
					<button type="button" class="btn btn-primary pull-right">Si</button>
				</div>
			</div>
		</div>
	</div>
</div>`}function B(){return`<div class="row">
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#id-univoco-modale-3"> Tre tasti </button>
</div>
<div class="modal fade" role="dialog" id="id-univoco-modale-3" tabindex="-1" aria-labelledby="id-univoco-modale-3-TITOLO">
	<div class="vertical-alignment-helper">
		<div class="modal-dialog  modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-title" id="id-univoco-modale-3-TITOLO">Titolo modale</div>
					<button type="button" class="close" data-dismiss="modal" aria-label="Chiudi finestra di dialogo">
						<span aria-hidden="true">×</span>
					</button>
				</div>
				<div class="modal-body"> Lorem ipsum dolor sit amet </div>
				<div class="modal-footer noMargin">
					<button type="button" class="btn btn-modale col-xs-2" data-dismiss="modal">No</button>
					<button type="button" class="btn btn-modale col-xs-2">Si</button>
					<button type="button" class="btn btn-primary col-xs-5 pull-right">Altro</button>
				</div>
			</div>
		</div>
	</div>
</div>`}function q(){return`<div class="row">
	<button type="button" class="btn btn-primary btn-info" data-toggle="modal" data-target="#myModalForm"> Con form </button>
</div>
<div class="modal fade" role="dialog" id="myModalForm" tabindex="-1" aria-labelledby="modal-form">
	<div class="modal-dialog  modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title" id="modal-form">Titolo modale con form</div>
				<button type="button" class="close" data-dismiss="modal" aria-label="Chiudi finestra di dialogo">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<form class="row" action="#" name="filterForm" id="filtro-base-1">
					<div class="row form-group">
						<div class="form-group col-xs-12 col-sm-12 col-md-7 col-lg-7 noPaddingLeft">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
								<label class="control-label sr-only" for="input-box-base-3">Inserire descrizione input</label>
								<input type="text" class="form-control" id="input-box-base-3" placeholder="placeholder">
								</div>
							</div>
							<div class="col-xs-12 col-sm-12 col-md-5 col-lg-3 noPaddingLeft">
								<button type="submit" class="btn btn-primary">CERCA</button>
							</div>
						</div>
						<div class="row">
							<p>Lorem ipsum 
								<br /> At vero eos et accusamus et iusto odio dignissimos 
							</p>
						</div>
						<div class="row form-group noPadding">
							<label for="form-select-4" class="label-select">Etichetta del campo</label>
							<span class="fa fa-question-circle fa-lg" data-trigger="focus" data-toggle="popover" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." tabindex="0" data-original-title="Etichetta del campo"></span>
							<select class="form-control" id="form-select-4">
								<option value="">- seleziona opzione -</option>
								<option value="">Opzione 1</option>
								<option value="">Opzione 2</option>
								<option value="">Opzione 3</option>
							</select>
						</div>
						<div class="row form-group noPadding">
							<label for="form-select-2" class="label-select">Etichetta del campo</label>
							<span tabindex="0" class="fa fa-question-circle fa-lg" data-trigger="focus" data-toggle="popover" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Etichetta del campo"></span>
							<select class="form-control" id="form-select-2">
								<option value="">- seleziona opzione -</option>
								<option value="">Opzione 1</option>
								<option value="">Opzione 2</option>
								<option value="">Opzione 3</option>
							</select>
						</div>
						<div class="row form-group">
							<p>
								<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 class="input-flex button form-group pull-right">
								<button class="btn btn-primary">Bottone </button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>`}function S(){return`<div class="row">
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalTabella1">
   Con tabella
   </button>                                    
</div>
<!-- Modale -->
<!-- Modale tabella -->
<div class="modal fade" role="dialog" id="modalTabella1" tabindex="-1" aria-labelledby="idTitoloTabella1">
   <div class="vertical-alignment-helper">
      <div class="modal-dialog  modal-dialog-centered">
         <div class="modal-content">
            <div class="modal-header">
               <div class="modal-title" id="idTitoloTabella1">Titolo modale tabella</div>
               <button type="button" class="close modalSR" data-dismiss="modal" aria-label="Chiudi finestra di dialogo">
               <span aria-hidden="true">×</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 class="unreadMessage">
                           <td>Dato 1</td>
                           <td>Dato 2</td>
                           <td>Dato 3</td>
                        </tr>
                        <tr>
                           <td>Dato 1</td>
                           <td>Dato 2</td>
                           <td>Dato 3</td>
                        </tr>
                        <tr>
                           <td>Dato 1</td>
                           <td>Dato 2</td>
                           <td>Dato 3</td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
            <div class="modal-footer">
               <button class="btn btn-primary pull-right">Bottone </button>
            </div>
         </div>
      </div>
   </div>
</div>`}function W(){return`<div class="row">
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#idModalLista">
   Con lista
   </button>
</div>
<!-- Modale -->
<!-- modale Ultimi provvedimenti -->
<div class="modal fade" role="dialog" id="idModalLista" tabindex="-1" aria-labelledby="titolo-idModalLista">
	<div class="vertical-alignment-helper">
		<div class="modal-dialog  modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-title" id="titolo-idModalLista">Titolo modale lista</div>
					<button type="button" class="close tastoChiudi" data-dismiss="modal" aria-label="Chiudi finestra di dialogo">
						<span aria-hidden="true">×</span>
					</button>
				</div>
				<div></div>
				<div class="modal-body">
					<ul class="modaleLista">
						<li>
							<span>Lorem ipsum dolor</span>
							<button type="button" class="pull-right noBorder" data-toggle="tooltip" data-original-title="Scarica il PDF">
								<span class="fa fa-file-pdf pdf"></span>
							</button>
						</li>
						<li>
							<span>Lorem ipsum dolor</span>
							<button type="button" class="pull-right noBorder" data-toggle="tooltip" data-original-title="Scarica il PDF">
								<span class="fa fa-file-pdf pdf"></span>
							</button>
						</li>
						<li>
							<span>Lorem ipsum dolor</span>
							<button type="button" class="pull-right noBorder" data-toggle="tooltip" data-original-title="Scarica il PDF">
								<span class="fa fa-file-pdf pdf"></span>
							</button>
						</li>
						<li>
							<span>Lorem ipsum dolor</span>
							<button type="button" class="pull-right noBorder" data-toggle="tooltip" data-original-title="Scarica il PDF">
								<span class="fa fa-file-pdf pdf"></span>
							</button>
						</li>
					</ul>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn pull-right lowerText">
               Bottone
               </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.`,I={title:"Components/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,t)=>O(a,t,1,["static-webkit/js/custom-webkit.js","static/js/main.js"],!1),a=>`<main id="contenutoPrincipale">${a()}</main>`]},o={name:"Un tasto",render:()=>w({title:"Titolo modale",content:"Lorem ipsum dolor sit amet"})},e={name:"Due tasti",render:()=>D({title:"Titolo modale",content:"Lorem ipsum dolor sit amet"})},i={name:"Tre tasti",render:()=>B()},l={name:"Con form",render:()=>q()},d={name:"Con tabella",render:()=>S()},s={name:"Con lista",render:()=>W()};var n,r,c;o.parameters={...o.parameters,docs:{...(n=o.parameters)==null?void 0:n.docs,source:{originalSource:`{
  name: "Un tasto",
  render: () => {
    return createModal({
      title: "Titolo modale",
      content: "Lorem ipsum dolor sit amet"
    });
  }
}`,...(c=(r=o.parameters)==null?void 0:r.docs)==null?void 0:c.source}}};var m,u,p;e.parameters={...e.parameters,docs:{...(m=e.parameters)==null?void 0:m.docs,source:{originalSource:`{
  name: "Due tasti",
  render: () => {
    return createModalButton({
      title: "Titolo modale",
      content: "Lorem ipsum dolor sit amet"
    });
  }
}`,...(p=(u=e.parameters)==null?void 0:u.docs)==null?void 0:p.source}}};var b,v,g;i.parameters={...i.parameters,docs:{...(b=i.parameters)==null?void 0:b.docs,source:{originalSource:`{
  name: "Tre tasti",
  render: () => {
    return createModalThreeButton();
  }
}`,...(g=(v=i.parameters)==null?void 0:v.docs)==null?void 0:g.source}}};var f,h,y;l.parameters={...l.parameters,docs:{...(f=l.parameters)==null?void 0:f.docs,source:{originalSource:`{
  name: "Con form",
  render: () => {
    return createModalWithForm();
  }
}`,...(y=(h=l.parameters)==null?void 0:h.docs)==null?void 0:y.source}}};var T,M,L;d.parameters={...d.parameters,docs:{...(T=d.parameters)==null?void 0:T.docs,source:{originalSource:`{
  name: "Con tabella",
  render: () => {
    return createModalWithTable();
  }
}`,...(L=(M=d.parameters)==null?void 0:M.docs)==null?void 0:L.source}}};var x,C,z;s.parameters={...s.parameters,docs:{...(x=s.parameters)==null?void 0:x.docs,source:{originalSource:`{
  name: "Con lista",
  render: () => {
    return createModalWithList();
  }
}`,...(z=(C=s.parameters)==null?void 0:C.docs)==null?void 0:z.source}}};const E=["Modals","ModalWithTwoButtons","ModalsThreeButtons","ModalWithForm","ModalWithTable","ModalWithList"];export{l as ModalWithForm,s as ModalWithList,d as ModalWithTable,e as ModalWithTwoButtons,o as Modals,i as ModalsThreeButtons,E as __namedExportsOrder,I as default};
