const s=[{date:{day:"29",month:"Maggio"},title:"Titolo box",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. ",linkText:"Tutti i dettagli",search:{placeholder:"Testo da cercare..."}},{date:{day:"30",month:"Giugno"},title:"Secondo box",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi",linkText:"Vedi dettagli",search:{placeholder:"Cerca qualcosa..."}}];function m(){let i=` 
<div id="boxCarousel" class="carouselBox carousel slide" data-ride="carousel">
	<div class="carousel-inner">`;return s.forEach((a,e)=>{i+=`
		<div class="item ${e===0?"active":""}">
		  <div class ="inail-box px-3">
			  <div class="col-xs-6 col-md-6 inail-box-dashboard">
				  <div class="inail-box-body">
	          <div class="inail-box-label">GG/MM/AAAA</div>
	          <h4 class="inail-title-h4">${a.title}</h4>
			      <p class="inail-box-description">
			        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi 
            </p>
			      <div class="inail-box-footer">
					  <button data-original-title="Link semplice" class="inail-button-link" data-placement="right">${a.linkText}</button>
		      </div>
		    </div>
			  
        </div>
			    <div class="col-xs-6 col-md-6 inail-box-dashboard">
			      <div class="inail-box-body">
					    <h4 class=" inail-title-h4 mt-0">Titolo box</h4>
              <p class="inail-box-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. </p>
				      <div class="inail-box-footer">
                <label class="inail-label">CERCA</label>
                <form class="form row ">
                  <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 noPaddingLeft">
                    <input type="text" class="form-control inail-ricerca inail-input mt-0" placeholder="Testo da cercare...">
                  </div>
                  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4  noPaddingLeft noPaddingRight">
                    <button class="inail-button inail-button-primary mt-0" type="button">Cerca</button>
                  </div>
                </form>
					    </div>
				    </div>
			    </div>
			  </div>
			</div>`}),i+=`
		</div>`,i+=`
		<div class="left carousel-control">
			<a title="Scorri al precedente"  href="#boxCarousel" data-slide="prev">
				<span class="fa fa-angle-left" title="Scorri al precedente"></span>
			</a>
		</div>
		<div class="right carousel-control">
			<a title="Scorri al successivo"  href="#boxCarousel" data-slide="next">
				<span class="fa fa-angle-right" title="Scorri al successivo"></span>
			</a>
		</div>
    <ol class="carousel-indicators">`,s.forEach((a,e)=>{i+=`
      <li data-target="#boxCarousel" data-slide-to="${e}" ${e===0?'class="active"':""}></li>`}),i+=`
    </ol>
   `,i}function p(){return`<!-- BOX-1 DATA -->
   <div class="container">
        <div class="inail-box">
            <!-- First Column -->
            <div class="col-md-6 col-12 inail-box-dashboard">
                <div class="inail-box-body">
                  <div class="inail-box-label">GG/MM/AAAA</div>
					<h4 class=" inail-title-h4">Titolo box</h4>
                    <p class="inail-box-description">
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi
                    </p>
                    <div class="inail-box-footer">
                        <button data-original-title="Link semplice" class="inail-button-link" data-placement="right">Link button</button>
                    </div>
                </div>
            </div>

            <!-- Second Column -->
            <div class="col-md-6 col-12 inail-box-dashboard">
                <div class="inail-box-body">
					<h4 class=" inail-title-h4 mt-0">Titolo box</h4>
                    <p class="inail-box-description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam in hendrerit.
                    </p>
                    <div class="inail-box-footer">
                        <label class="inail-label">CERCA</label>
                        <form class="form row ">
                            <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 noPaddingLeft">
                                <input type="text" class="form-control inail-ricerca inail-input mt-0" placeholder="Testo da cercare...">
                            </div>
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4  noPaddingLeft noPaddingRight">
                                <button class="inail-button inail-button-primary" type="button">Cerca</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>`}const b=`I box presenti nella dashboard possono essere utilizzati come widget per l'accesso rapido a: news, applicazioni, avvisi.

Nel caso di news ed avvisi è possibile accedere ad un approfondimento attraverso al link “Tutti i dettagli”, posto in basso a destra del box.

Nell'esempio viene mostrato un box di ricerca a titolo esemplificativo, infatti è possibile integrare un widget di un'applicazione per una rapida ricerca interna. Es: Ricerca Pratica, Ricerca Codice Sede.

Il Carousel Box Dashboard permette di integrare più Box Dashboard. Sono obbligatori in questo caso i controlli di navigazione: Frecce: per andare avanti e indietro nel carousel Indicatori Circolari: per esplicitare la presenza di altri elementi oltre a quelli visibili sulla pagina `,v={title:"Componenti/Box e Tab/Box Dashboard",tags:["autodocs"],parameters:{docs:{description:{component:"I box presenti nella dashboard possono essere utilizzati come widget per l'accesso rapido a: news, applicazioni, avvisi.<br /><br />Nel caso di news ed avvisi è possibile accedere ad un approfondimento attraverso al link “Tutti i dettagli”, posto in basso a destra del box.<br /><br />Nell'esempio viene mostrato un box di ricerca a titolo esemplificativo, infatti è possibile integrare un widget di un'applicazione per una <br /> rapida ricerca interna. Es: Ricerca Pratica, Ricerca Codice Sede.<br /><br />Il Carousel Box Dashboard permette di integrare più Box Dashboard. Sono obbligatori in questo caso i controlli di navigazione: Frecce:<br /> per andare avanti e indietro nel carousel Indicatori Circolari: per esplicitare la presenza di altri elementi oltre a quelli visibili sulla pagina "},showAccessibility:!0,mdxPage:b}},decorators:[i=>`<main id="contenutoPrincipale">${i()}</main>`]},o={render:()=>p()},t={render:()=>m()};var l,r,n;o.parameters={...o.parameters,docs:{...(l=o.parameters)==null?void 0:l.docs,source:{originalSource:`{
  render: () => {
    return CreateDashboardBox();
  }
}`,...(n=(r=o.parameters)==null?void 0:r.docs)==null?void 0:n.source}}};var c,d,u;t.parameters={...t.parameters,docs:{...(c=t.parameters)==null?void 0:c.docs,source:{originalSource:`{
  render: () => {
    return createCarouselDashboardBox();
  }
}`,...(u=(d=t.parameters)==null?void 0:d.docs)==null?void 0:u.source}}};const x=["DashboardBox","CarouselBoxDashboard"];export{t as CarouselBoxDashboard,o as DashboardBox,x as __namedExportsOrder,v as default};
