import{b as u}from"./Utilities-DayKp0i-.js";function v(){return` 
<div class="tab">
	<ul class="nav nav-pills" role="tablist">
		<li role="tab" class="active col-xs-6">
			<a data-toggle="pill" href="#tab1" aria-expanded="true">
				<span class="labelTabTitle">Tab 1</span>
			</a>
		</li>
		<li role="tab" class="col-xs-6" >
			<a data-toggle="pill" href="#tab2" aria-expanded="false">
				<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>`}function f({labelType:l}){return`<div class="tab-portale">
	<ul class="nav nav-tabs default-tabs exp-tabs" role="tablist">
		<li role="tab">
			<a data-toggle="tab" href="#expandable-tab11" aria-expanded="false">
				<em class="fa fa-chevron-down mr-2" aria-hidden="true"></em>
				<span class="labelTabTitle">${l=="Number"?"Tab 1":"Tab A"}</span>
			</a>
		</li>
		<li role="tab">
			<a data-toggle="tab" href="#expandable-tab12" aria-expanded="false">
				<em class="fa fa-chevron-down mr-2" aria-hidden="true"></em>
				<span class="labelTabTitle">${l=="Number"?"Tab 2":"Tab B"}</span>
			</a>
		</li>
		<li  role="tab">
			<a data-toggle="tab" href="#expandable-tab13"  aria-expanded="false">
				<em class="fa fa-chevron-down mr-2" aria-hidden="true"></em>
				<span class="labelTabTitle">${l=="Number"?"Tab 3":"Tab C"}</span>
			</a>
		</li>
	</ul>
	<div class="tab-content">
		<div id="expandable-tab11" class="tab-pane">
			<form class="form-group form-grey row" action="#" name="filterForm" id="filtro-tab-11">
				<div class="row">
					<h3 class="col-xs-12">${l=="Number"?"Titolo Tab 1":"Titolo Tab A"}</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="expandable-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">${l=="Number"?"Titolo Tab 2":"Titolo Tab B"}</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="expandable-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">${l=="Number"?"Titolo Tab 3":"Titolo Tab C"}</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>`}function g(){return`<div class="tab-portale">
	<ul class="nav nav-tabs default-tabs" role="tablist">
		<li role="tab" class="active">
			<a data-toggle="tab" href="#tab11" aria-expanded="true">
				<span class="labelTabTitle">Tab 1</span>
			</a>
		</li>
		<li role="tab">
			<a data-toggle="tab" href="#tab12" aria-expanded="false">
				<span class="labelTabTitle">Tab 2</span>
			</a>
		</li>
		<li role="tab">
			<a data-toggle="tab" href="#tab13"  aria-expanded="false">
				<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>`}const h=`Un Tab è un controllo grafico di navigazione che permette all'utente di muoversi da un gruppo di contenuti ad un altro. I tab sono rappresentati graficamente come dei rettangoli che contengono una breve label.

L'attivazione di un tab rende visibili i contenuti ad esso associati e contemporaneamente viene evidenziata la sua attivazione. Può essere attivato un solo tab alla volta.

Sono posti immediatamente sopra all'area soggetta alla navigazione in posizione orizzontale. `,T={title:"Components/Box e Tab/Tab",tags:["autodocs"],parameters:{docs:{story:{inline:!1,iframeHeight:700},description:{component:`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. `},mdxPage:h,showCode:!0}},decorators:[(l,e)=>u(l,e,1,["static-webkit/js/custom-webkit.js","static/js/main.js"],!1),l=>`<main id="contenutoPrincipale">${l()}</main>`]},a={render:()=>v()},o={render:()=>g()},t={name:"Tabs espandibili",argTypes:{labelType:{control:{type:"select"},options:["Number","Letter"],table:{defaultValue:{summary:"Number"}},description:"Defines the type of tab labels. Choose 'Number' for numeric tab labels (e.g., Tab 1, Tab 2), or 'Letter' for alphabetical tab labels (e.g., Tab A, Tab B)."}},args:{labelType:"Number"},render:({...l})=>f({...l})};var s,i,n;a.parameters={...a.parameters,docs:{...(s=a.parameters)==null?void 0:s.docs,source:{originalSource:`{
  render: () => {
    return createTab1();
  }
}`,...(n=(i=a.parameters)==null?void 0:i.docs)==null?void 0:n.source}}};var r,c,d;o.parameters={...o.parameters,docs:{...(r=o.parameters)==null?void 0:r.docs,source:{originalSource:`{
  render: () => {
    return createTab2();
  }
}`,...(d=(c=o.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};var p,b,m;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`{
  name: "Tabs espandibili",
  argTypes: {
    labelType: {
      control: {
        type: "select"
      },
      options: ["Number", "Letter"],
      table: {
        defaultValue: {
          summary: "Number"
        }
      },
      description: "Defines the type of tab labels. Choose 'Number' for numeric tab labels (e.g., Tab 1, Tab 2), or 'Letter' for alphabetical tab labels (e.g., Tab A, Tab B)."
    }
  },
  args: {
    labelType: "Number"
  },
  render: ({
    ...args
  }) => {
    return createExpandableTabs({
      ...args
    });
  }
}`,...(m=(b=t.parameters)==null?void 0:b.docs)==null?void 0:m.source}}};const y=["Tab1","Tab2","ExpandableTab"];export{t as ExpandableTab,a as Tab1,o as Tab2,y as __namedExportsOrder,T as default};
