import{b as d}from"./Utilities-BAFDtIJ2.js";const p=()=>` <div class="tab">
      <ul class="nav nav-pills" role="tablist">
         <li class="active col-xs-6" role="presentation">
            <a data-toggle="pill" href="#tab1">
            <span class="labelTabTitle">Tab 1</span>
            </a>
         </li>
         <li class="col-xs-6" role="presentation">
            <a data-toggle="pill" href="#tab2">
            <span class="labelTabTitle">Tab 2</span>
            </a>
         </li>
      </ul>
      <div class="tab-content">
         <div id="tab1" class="tab-pane in active">
            <form class="form-group form-grey row" action="#" name="filterForm" id="filtro-tab-1">
               <div class="row">
                  <h3 class="col-xs-12">TITOLO TAB 1</h3>
               </div>
               <div class="row">
                  <h4 class="col-xs-12 search-title">Sottotitolo</h4>
                  <div class="col-xs-12">
                     <div class="form-group col-xs-12 col-md-6 col-lg-4 noPaddingLeft">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
                           <label class="control-label" for="input-filtro-tab-1-">Input 1</label>
                           <input type="text" class="form-control" id="input-filtro-tab-1-" placeholder="placeholder">
                        </div>
                     </div>
                     <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-5 noPadding">
                        <div class="input-relative">
                           <label for="form-select-1" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
                              Etichetta del campo
                              <select class="form-control" id="form-select-1">
                                 <option value="">Opzione 1</option>
                                 <option value="">Opzione 2</option>
                                 <option value="">Opzione 3</option>
                              </select>
                           </label>
                        </div>
                     </div>
                     <div class="col-xs-12 marginTop">
                        <button type="reset" class="btn btn-link">Annulla</button>
                        <button class="btn btn-primary pull-right" type="button">Bottone destro</button>
                     </div>
                  </div>
               </div>
            </form>
         </div>
         <div id="tab2" class="tab-pane">
            <form class="form-group form-grey row" action="#" name="filterForm" id="filtro-complesso-2">
               <div class="row">
                  <h3 class="col-xs-12">TITOLO TAB 2</h3>
               </div>
               <div class="row">
                  <h4 class="col-xs-12 search-title">Sottotitolo</h4>
                  <div class="col-xs-12">
                     <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-5 noPadding">
                        <div class="input-relative">
                           <label for="form-select-1a" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
                              Etichetta del campo
                              <select class="form-control" id="form-select-1a">
                                 <option value="">Opzione 1</option>
                                 <option value="">Opzione 2</option>
                                 <option value="">Opzione 3</option>
                              </select>
                           </label>
                        </div>
                     </div>
                     <div class="form-inline date-range col-xs-12 noPaddingLeft">
                        <p>Periodo</p>
                        <div class="date datePicker">
                           <div class="form-group">
                              <div class="input-relative">
                                 <label class="control-label" for="form-data-5a">Dal</label>
                                 <input id="form-data-5a" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text">
                                 <em class="fa fa-calendar" title="Calendario"></em>
                              </div>
                           </div>
                           <div class="form-group">
                              <div class="input-relative">
                                 <label class="control-label" for="form-data-6a">al</label>
                                 <input id="form-data-6a" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text">
                                 <em class="fa fa-calendar" title="Calendario"></em>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col-xs-12 marginTop">
                        <button type="reset" class="btn btn-link">Annulla</button>
                        <button class="btn btn-primary pull-right" type="button">Bottone destro</button>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>`,b=()=>`<div class="tab-portale">
   <ul class="nav nav-tabs default-tabs" role="tablist">
      <li class="active">
         <a data-toggle="tab" href="#tab11"><span class="labelTabTitle">Tab 1</span></a>
      </li>
      <li>
         <a data-toggle="tab" href="#tab12"><span class="labelTabTitle">Tab 2</span></a>
      </li>
      <li>
         <a data-toggle="tab" href="#tab13"><span class="labelTabTitle">Tab 3</span></a>
      </li>
   </ul>
   <div class="tab-content">
      <div id="tab11" class="tab-pane in active">
         <form class="form-group form-grey row" action="#" name="filterForm" id="filtro-tab-11">
            <div class="row">
               <h3 class="col-xs-12">TITOLO TAB 1</h3>
            </div>
            <div class="row">
               <h4 class="col-xs-12 search-title">Sottotitolo</h4>
               <div class="col-xs-12">
                  <p>Questa è la prima tabella</p>
                  <div class="form-group col-xs-12 col-md-6 col-lg-4 noPaddingLeft">
                     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
                        <label class="control-label" for="input-filtro-tab-1-1">Input 1</label>
                        <input type="text" class="form-control" id="input-filtro-tab-1-1" placeholder="placeholder">
                     </div>
                  </div>
                  <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-5 noPadding">
                     <div class="input-relative">
                        <label for="form-select-1-1" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
                           Etichetta del campo
                           <select class="form-control" id="form-select-1-1">
                              <option value="">Opzione 1</option>
                              <option value="">Opzione 2</option>
                              <option value="">Opzione 3</option>
                           </select>
                        </label>
                     </div>
                  </div>
                  <div class="col-xs-12 marginTop">
                     <button type="reset" class="btn btn-link">Annulla</button>
                     <button class="btn btn-primary pull-right" type="button">Bottone destro</button>
                  </div>
               </div>
            </div>
         </form>
      </div>
      <div id="tab12" class="tab-pane">
         <form class="form-group form-grey row" action="#" name="filterForm" id="filtro-tab-12">
            <div class="row">
               <h3 class="col-xs-12">TITOLO TAB 2</h3>
            </div>
            <div class="row">
               <h4 class="col-xs-12 search-title">Sottotitolo</h4>
               <div class="col-xs-12">
                  <p>Questa è la seconda tabella</p>
                  <div class="form-group col-xs-12 col-md-6 col-lg-4 noPaddingLeft">
                     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
                        <label class="control-label" for="input-filtro-tab-1-12">Input 1</label>
                        <input type="text" class="form-control" id="input-filtro-tab-1-12" placeholder="placeholder">
                     </div>
                  </div>
                  <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-5 noPadding">
                     <div class="input-relative">
                        <label for="form-select-1-12" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
                           Etichetta del campo
                           <select class="form-control" id="form-select-1-12">
                              <option value="">Opzione 1</option>
                              <option value="">Opzione 2</option>
                              <option value="">Opzione 3</option>
                           </select>
                        </label>
                     </div>
                  </div>
                  <div class="col-xs-12 marginTop">
                     <button type="reset" class="btn btn-link">Annulla</button>
                     <button class="btn btn-primary pull-right" type="button">Bottone destro</button>
                  </div>
               </div>
            </div>
         </form>
      </div>
      <div id="tab13" class="tab-pane">
         <form class="form-group form-grey row" action="#" name="filterForm" id="filtro-tab-13">
            <div class="row">
               <h3 class="col-xs-12">TITOLO TAB 3</h3>
            </div>
            <div class="row">
               <h4 class="col-xs-12 search-title">Sottotitolo</h4>
               <div class="col-xs-12">
                  <p>Questa è la terza tabella</p>
                  <div class="form-group col-xs-12 col-md-6 col-lg-4 noPaddingLeft">
                     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
                        <label class="control-label" for="input-filtro-tab-1-13">Input 1</label>
                        <input type="text" class="form-control" id="input-filtro-tab-1-13" placeholder="placeholder">
                     </div>
                  </div>
                  <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-5 noPadding">
                     <div class="input-relative">
                        <label for="form-select-1-13" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
                           Etichetta del campo
                           <select class="form-control" id="form-select-1-13">
                              <option value="">Opzione 1</option>
                              <option value="">Opzione 2</option>
                              <option value="">Opzione 3</option>
                           </select>
                        </label>
                     </div>
                  </div>
                  <div class="col-xs-12 marginTop">
                     <button type="reset" class="btn btn-link">Annulla</button>
                     <button class="btn btn-primary pull-right" type="button">Bottone destro</button>
                  </div>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>`,m=`Un Tab è un controllo grafico di navigazione che permette all'utente di muoversi da un gruppo di contenuti ad un altro. I tab<br />sono rappresentati graficamente come dei rettangoli che contengono una breve label.<br /><br />L'attivazione di un tab rende visibili i contenuti ad esso associati e contemporaneamente viene evidenziata la sua attivazione.<br />Può essere attivato un solo tab alla volta.<br /><br/>
Sono posti immediatamente sopra all'area soggetta alla navigazione in posizione orizzontale.
`,u={title:"Components/Box e Tab/Tab",tags:["autodocs"],parameters:{docs:{story:{inline:!1,iframeHeight:700},mdxPage:m}},decorators:[(t,a)=>d(t,a,1,["static-webkit/js/custom-webkit.js","static/js/main.js"],!1),t=>`<main id="contenutoPrincipale">${t()}</main>`]},l={render:()=>p()},o={render:()=>b()};var e,s,i;l.parameters={...l.parameters,docs:{...(e=l.parameters)==null?void 0:e.docs,source:{originalSource:`{
  render: () => {
    return CreateTab();
  }
}`,...(i=(s=l.parameters)==null?void 0:s.docs)==null?void 0:i.source}}};var c,n,r;o.parameters={...o.parameters,docs:{...(c=o.parameters)==null?void 0:c.docs,source:{originalSource:`{
  render: () => {
    return CreateTab2();
  }
}`,...(r=(n=o.parameters)==null?void 0:n.docs)==null?void 0:r.source}}};const f=["Tab","Tab2"];export{l as Tab,o as Tab2,f as __namedExportsOrder,u as default};
