class O{CreateOneButtonModal(){return`<div class="row">
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#id-univoco-modale">
   Un tasto
   </button>
</div>
<!-- Modale -->
<div class="modal fade" id="id-univoco-modale" tabindex="-1" role="dialog" aria-labelledby="id-univoco-modale-TITOLO">
   <div class="vertical-alignment-helper">
      <div class="modal-dialog vertical-align-center">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">×</span>
               </button>
               <div class="modal-title" id="id-univoco-modale-TITOLO">Titolo modale</div>
            </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>`}CreateTwoButtonModal(){return`<div class="row">
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#id-univoco-modale-2">
   Due tasti
   </button>
</div>
<!-- Modale -->
<div class="modal fade" id="id-univoco-modale-2" tabindex="-1" role="dialog" aria-labelledby="id-univoco-modale-2-TITOLO">
   <div class="vertical-alignment-helper">
      <div class="modal-dialog vertical-align-center">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">×</span>
               </button>
               <div class="modal-title" id="id-univoco-modale-2-TITOLO">Titolo modale</div>
            </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>`}CreateThreeButtonModal(){return`<div class="row">
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#id-univoco-modale-3">
   Tre tasti
   </button>                                    
</div>
<!-- Modale -->
<div class="modal fade" id="id-univoco-modale-3" tabindex="-1" role="dialog" aria-labelledby="id-univoco-modale-3-TITOLO">
   <div class="vertical-alignment-helper">
      <div class="modal-dialog vertical-align-center">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">×</span>
               </button>
               <div class="modal-title" id="id-univoco-modale-3-TITOLO">Titolo modale</div>
            </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>`}CreateModalForm(){return`<div class="row">
   <button type="button" class="btn btn-primary btn-info" data-toggle="modal" data-target="#myModalForm">
   Con form
   </button>
</div>
<!-- Modale -->
<div class="modal fade" id="myModalForm" tabindex="-1" role="dialog" aria-labelledby="modal-form">
   <div class="vertical-alignment-helper">
      <div class="modal-dialog vertical-align-center">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">×</span>
               </button>
               <div class="modal-title" id="modal-form">Titolo modale con form</div>
            </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
                        <em class="fa fa-question-circle fa-lg" data-toggle="popover" title="" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Popover Header"></em>
                        <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>
                     </label>
                  </div>
                  <div class="row form-group noPadding">
                     <label for="form-select-2" class="label-select">
                        Etichetta del campo
                        <em class="fa fa-question-circle fa-lg" data-toggle="popover" title="" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Popover Header"></em>
                        <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>
                     </label>
                  </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>
</div>`}CreateTableModal(){return`<div class="row">
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalTabella">
   Con tabella
   </button>                                    
</div>
<!-- Modale -->
<div class="modal fade" id="modalTabella" tabindex="-1" role="dialog" aria-labelledby="idTitoloTabella">
   <div class="vertical-alignment-helper">
      <div class="modal-dialog vertical-align-center">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">×</span>
               </button>
               <div class="modal-title" id="idTitoloTabella">Titolo modale tabella</div>
            </div>
            <div class="modal-body">
               <div class="tabella">
                  <table class="table tabella-base">
                     <caption class="sr-only">Inserire descrizione tabella qui</caption>
                     <thead>
                        <tr>
                           <th scope="col" class="col-md-3"><span class="thLabel">Colonna 1</span></th>
                           <th scope="col" class="col-md-3"><span class="thLabel">Colonna 2</span></th>
                           <th scope="col" class="col-md-3"><span class="thLabel">Colonna 3</span></th>
                           <th scope="col" class="col-md-2"></th>
                        </tr>
                     </thead>
                     <tbody >
                        <tr class="unreadMessage">
                           <td>Dato 1</td>
                           <td>Dato 2</td>
                           <td>Dato 3</td>
                           <td class="td-icons">
                              <a href="#" title="Visualizza dettaglio">
                              <span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye" title="Visualizza dettaglio"></span>
                              </a>
                           </td>
                        </tr>
                        <tr>
                           <td>Dato 1</td>
                           <td>Dato 2</td>
                           <td>Dato 3</td>
                           <td class="td-icons">
                              <a href="#" title="Visualizza dettaglio">
                              <span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye" title="Visualizza dettaglio"></span>
                              </a>
                           </td>
                        </tr>
                        <tr>
                           <td>Dato 1</td>
                           <td>Dato 2</td>
                           <td>Dato 3</td>
                           <td class="td-icons">
                              <a href="#" title="Visualizza dettaglio">
                              <span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye" title="Visualizza dettaglio"></span>
                              </a>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-link pull-right">
                  Link
                  </button>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>`}CreateListModal(){return`<div class="row">
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#idModalLista">
   Con lista
   </button>
</div>
<!-- Modale -->
<div class="modal fade" id="idModalLista" tabindex="-1" role="dialog" aria-labelledby="titolo-idModalLista">
   <div class="vertical-alignment-helper">
      <div class="modal-dialog vertical-align-center">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">×</span>
               </button>
               <div class="modal-title" id="titolo-idModalLista">Titolo modale lista</div>
            </div>
            <div class="modal-body tabella">
               <table class="table dataTable table-modal no-heading" title="Inserire descrizione qui">
			      <caption class="sr-only">Inserire descrizione tabella qui</caption>
                  <thead>
				  <tr>
				  <th></th>
				  <th></th>				  
                  </tr>
                  </thead>
                  <tbody>
                     <tr class="unreadMessage">
                        <td>Lorem ipsum dolor</td>
                        <td><a href="#" class="pull-right" title="Scarica .PDF">
                           <span class="fa fa-file-pdf-o pdf" title="Scarica .PDF"></span>
                           </a>
                        </td>
                     </tr>
                     <tr>
                        <td>Lorem ipsum dolor</td>
                        <td><a href="#" class="pull-right" title="Scarica .PDF">
                           <span class="fa fa-file-pdf-o pdf" title="Scarica .PDF"></span>
                           </a>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-link pull-right lowerText">
               Link
               </button>
            </div>
         </div>
      </div>
   </div>
</div>	`}}const x=`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.`,a=new O,D={title:"Components/Box e Tab/Finestre modali",tags:["autodocs"],parameters:{docs:{story:{inline:!1,iframeHeight:500},mdxPage:x}}},t={name:"Un tasto",render:()=>a.CreateOneButtonModal()},o={name:"Due tasti",render:()=>a.CreateTwoButtonModal()},e={name:"Tre tasti",render:()=>a.CreateThreeButtonModal()},l={name:"Con form",render:()=>a.CreateModalForm()},i={name:"Con tabella",render:()=>a.CreateTableModal()},s={name:"Con lista",render:()=>a.CreateListModal()};var d,n,r;t.parameters={...t.parameters,docs:{...(d=t.parameters)==null?void 0:d.docs,source:{originalSource:`{
  name: "Un tasto",
  render: () => {
    return Modals.CreateOneButtonModal();
  }
}`,...(r=(n=t.parameters)==null?void 0:n.docs)==null?void 0:r.source}}};var c,u,m;o.parameters={...o.parameters,docs:{...(c=o.parameters)==null?void 0:c.docs,source:{originalSource:`{
  name: "Due tasti",
  render: () => {
    return Modals.CreateTwoButtonModal();
  }
}`,...(m=(u=o.parameters)==null?void 0:u.docs)==null?void 0:m.source}}};var p,b,v;e.parameters={...e.parameters,docs:{...(p=e.parameters)==null?void 0:p.docs,source:{originalSource:`{
  name: "Tre tasti",
  render: () => {
    return Modals.CreateThreeButtonModal();
  }
}`,...(v=(b=e.parameters)==null?void 0:b.docs)==null?void 0:v.source}}};var g,f,h;l.parameters={...l.parameters,docs:{...(g=l.parameters)==null?void 0:g.docs,source:{originalSource:`{
  name: "Con form",
  render: () => {
    return Modals.CreateModalForm();
  }
}`,...(h=(f=l.parameters)==null?void 0:f.docs)==null?void 0:h.source}}};var y,M,T;i.parameters={...i.parameters,docs:{...(y=i.parameters)==null?void 0:y.docs,source:{originalSource:`{
  name: "Con tabella",
  render: () => {
    return Modals.CreateTableModal();
  }
}`,...(T=(M=i.parameters)==null?void 0:M.docs)==null?void 0:T.source}}};var C,z,L;s.parameters={...s.parameters,docs:{...(C=s.parameters)==null?void 0:C.docs,source:{originalSource:`{
  name: "Con lista",
  render: () => {
    return Modals.CreateListModal();
  }
}`,...(L=(z=s.parameters)==null?void 0:z.docs)==null?void 0:L.source}}};const B=["ModalWithOneButton","ModalWithTwoButtons","ModalWithThreeButtons","ModalWithForm","ModalWithTable","ModalWithList"];export{l as ModalWithForm,s as ModalWithList,t as ModalWithOneButton,i as ModalWithTable,e as ModalWithThreeButtons,o as ModalWithTwoButtons,B as __namedExportsOrder,D as default};
