import{a as y}from"./Utilities-CQhZFhp5.js";function h(a){return` 
<div class="inail-tab">
    <ul class="nav nav-pills" role="tablist" aria-label="Nome del tab">
        <li role="tab" aria-controls="tab1" aria-selected="true" tabindex="0" class="active col-xs-6" id="tab1-label">
            <a data-toggle="pill" href="#tab1" aria-expanded="true" tabindex="-1">
                <span class="labelTabTitle">${a.titoloTab1}</span>
            </a>
        </li>
       <li role="tab" aria-controls="tab2" aria-selected="false" tabindex="-1" class="col-xs-6" id="tab2-label">
            <a data-toggle="pill" href="#tab2" aria-expanded="false" tabindex="-1">
                <span class="labelTabTitle">${a.titoloTab2}</span>
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab-pane in active" role="tabpanel" aria-labelledby="tab1-label" aria-hidden="false">
            <form class="form-grey" action="#" name="filterForm" id="filtro-tab-1 ">
                <div class="row ">
                    <div class="col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.</div>
                    <div class="col-xs-12 col-md-6 col-lg-6 col-sm-12">
                        <label class="control-label  inail-label" for="input-filtro-tab-1">Input 1</label>
                        <input type="text" class="form-control inail-input" id="input-filtro-tab-1">
                            <div class="inail-div-message"></div>
                    </div>
                    <div class="col-xs-12 col-md-6 col-lg-6 col-sm-12">
                        <label class="inail-label" for="input-select-1">LABEL</label>
                        <select class="form-control inail-input form-select" id="input-select-1">
                            <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
                            <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
                            <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
                            <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
                        </select>
                        <div class="inail-div-message"></div>
                    </div>
                </div>
                <div class="row marginTop">
                    <div class="col-xs-12 pull right">
                        <button type="button" class="inail-button inail-button-secondary"  id="annullaButton">${a.etichettaBottoneSecondario}</button>
                        <button type="button" class="inail-button inail-button-primary ml-3 mt-2" id="confermaButton">${a.etichettaBottonePrimario}</button>
                    </div>
                </div>
            </form>
        </div>
        <div id="tab2" class="tab-pane" role="tabpanel" aria-labelledby="tab2-label" aria-hidden="true">
            <form class="form-grey row" action="#" name="filterForm" id="filtro-complesso-2">
                <div class="row">
                    <div class="col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.</div>
                    <div class="col-xs-12 col-md-4 col-lg-4 col-sm-12">
	         <label class="inail-label" for="input-select-2">LABEL</label>
	          <select class="form-control inail-input form-select" id="input-select-2">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
                            <div class="inail-div-message"></div>
                    </div>
                </div>
                <div class="row">
                <fieldset>
                <legend class="inail-date-range-title mb-2">Periodo</legend>
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <div class="date datePicker ">
                            <div class="input-relative">
                                <label class="control-label inail-label" for="form-data-2">Dal</label>
                                <input id="form-data-2" class="form-control inail-input" title="GG/MM/AAAA"
                                    placeholder="gg / mm / aaaa" type="text" data-datepicker-aria>
                            </div>
                            <div class="inail-div-message"></div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <div class="date datePicker ">
                            <div class="input-relative">
                                <label class="control-label inail-label" for="form-data-3">Al</label>
                                <input id="form-data-3" class="form-control inail-input" title="GG/MM/AAAA"
                                    placeholder="gg / mm / aaaa" type="text" data-datepicker-aria>
                            </div>
                            <div class="inail-div-message"></div>
                        </div>
                    </div>
                    </fieldset>
                </div>
                <div class="row marginTop">
                    <div class="col-xs-12 pull right">
                        <button type="button" class="inail-button inail-button-secondary" id="annullaButton2">Annulla</button>
                        <button type="button" class="inail-button inail-button-primary ml-3 mt-2" id="confermaButton2">Conferma</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
`}function x(a){return`<div class="inail-tab-portale">
    <ul class="nav nav-tabs default-tabs exp-tabs" role="tablist" aria-label="Nome del tab">
      <li role="tab" id="tab1-label" aria-controls="expandable-tab11" tabindex="0" aria-expanded="false">
        <a data-toggle="tab" href="#expandable-tab11" aria-expanded="false" tabindex="-1" class="inail-tab-3">
         <div> <span class="labelTabTitle mr-4">${a.titoloTab1}</span>
          <em class="fa fa-chevron-down" aria-hidden="true"></em></div>
          </a>
      </li>
      <li role="tab" id="tab2-label" aria-controls="expandable-tab12" aria-expanded="false" tabindex="-1">
        <a data-toggle="tab" href="#expandable-tab12" aria-expanded="false" tabindex="-1" class="inail-tab-3">
         <div>  <span class="labelTabTitle mr-4">${a.titoloTab2}</span>
         <em class="fa fa-chevron-down" aria-hidden="true"></em></div>
         </a>
      </li>
      <li role="tab" id="tab3-label" aria-controls="expandable-tab13" aria-expanded="false" tabindex="-1">
        <a data-toggle="tab" href="#expandable-tab13" aria-expanded="false" tabindex="-1" class="inail-tab-3">
         <div>  <span class="labelTabTitle mr-4">${a.titoloTab3}</span>
         <em class="fa fa-chevron-down" aria-hidden="true"></em></div>
         </a>
      </li>
    </ul>

    <div class="tab-content">
      <div id="expandable-tab11" class="tab-pane" role="tabpanel" aria-labelledby="tab1-label" aria-hidden="true">
        <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-11">
          <div class="row">
            <div class="col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
              Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="control-label inail-label" for="input-filtro-tab-6">Input 1</label>
              <input type="text" class="form-control inail-input" id="input-filtro-tab-6">
              <div class="inail-div-message"></div>
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="inail-label" for="input-select-5">LABEL</label>
              <select class="form-control inail-input form-select" id="input-select-5">
                <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
                <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
                <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
                <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
              </select>
              <div class="inail-div-message"></div>
            </div>
          </div>
          <div class="row marginTop">
            <div class="col-xs-12 pull right">
              <button type="button" class="inail-button inail-button-secondary" id="annullaButton1">${a.etichettaBottoneSecondario}</button>
              <button type="button" class="inail-button inail-button-primary ml-3 mt-2" id="confermaButton1">${a.etichettaBottonePrimario}</button>
            </div>
          </div>
        </form>
      </div>

      <div id="expandable-tab12" class="tab-pane" role="tabpanel" aria-labelledby="tab2-label"  aria-hidden="true">
        <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-12">
          <div class="row">
            <div class="col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
              Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="control-label inail-label" for="input-filtro-tab-7">Input 1</label>
              <input type="text" class="form-control inail-input" id="input-filtro-tab-7" >
              <div class="inail-div-message"></div>
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="inail-label" for="input-select-6">LABEL</label>
              <select class="form-control inail-input form-select" id="input-select-6">
                <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
                <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
                <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
                <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
              </select>
              <div class="inail-div-message"></div>
            </div>
          </div>
          <div class="row marginTop">
            <div class="col-xs-12 pull right">
              <button type="button" class="inail-button inail-button-secondary" id="annullaButton2">${a.etichettaBottoneSecondario}</button>
              <button type="button" class="inail-button inail-button-primary ml-3 mt-2" id="confermaButton2">${a.etichettaBottonePrimario}</button>
            </div>
          </div>
        </form>
      </div>

      <div id="expandable-tab13" class="tab-pane" role="tabpanel" aria-labelledby="tab3-label" aria-hidden="true">
        <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-13">
          <div class="row">
            <div class="col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
              Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="control-label inail-label" for="input-filtro-tab-8">Input 1</label>
              <input type="text" class="form-control inail-input" id="input-filtro-tab-8" >
              <div class="inail-div-message"></div>
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="inail-label" for="input-select-7">LABEL</label>
              <select class="form-control inail-input form-select" id="input-select-7">
                <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
                <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
                <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
                <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
              </select>
              <div class="inail-div-message"></div>
            </div>
          </div>
          <div class="row marginTop">
            <div class="col-xs-12 pull right">
              <button type="button" class="inail-button inail-button-secondary" id="annullaButton3">${a.etichettaBottoneSecondario}</button>
              <button type="button" class="inail-button inail-button-primary ml-3 mt-2" id="confermaButton3">${a.etichettaBottonePrimario}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

<div class="inail-tab-portale mt-4">
    <ul class="nav nav-tabs default-tabs exp-tabs" role="tablist" aria-label="Nome del tab">
      <li role="tab" id="tab4-label" aria-controls="expandable-tab11a" aria-expanded="false" tabindex="0">
        <a data-toggle="tab" href="#expandable-tab11a" aria-expanded="false" tabindex="-1" class="inail-tab-3">
         <div>  <span class="labelTabTitle mr-4">Scheda A</span>
         <em class="fa fa-chevron-down" aria-hidden="true"></em></div>
         </a>
      </li>
      <li role="tab" id="tab5-label" aria-controls="expandable-tab12a" aria-expanded="false" tabindex="-1">
        <a data-toggle="tab" href="#expandable-tab12a" aria-expanded="false" tabindex="-1" class="inail-tab-3"> 
         <div>  <span class="labelTabTitle mr-4">Scheda B</span>
         <em class="fa fa-chevron-down" aria-hidden="true"></em></div>
         </a>
      </li>
      <li role="tab" id="tab6-label" aria-controls="expandable-tab13a" aria-expanded="false" tabindex="-1">
        <a data-toggle="tab" href="#expandable-tab13a" aria-expanded="false" tabindex="-1" class="inail-tab-3">
         <div>  <span class="labelTabTitle mr-4">Scheda C</span>
         <em class="fa fa-chevron-down" aria-hidden="true"></em>
        </div>
         </a>
      </li>
    </ul>

    <div class="tab-content">
      <div id="expandable-tab11a" class="tab-pane" role="tabpanel" aria-labelledby="tab4-label" aria-hidden="true">
        <form class="form-grey" action="#" name="filterForm" id="filtro-tab-11a">
          <div class="row">
            <div class="col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
              Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="control-label inail-label" for="input-filtro-tab-9">Input 1</label>
              <input type="text" class="form-control inail-input" id="input-filtro-tab-9" >
              <div class="inail-div-message"></div>
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="inail-label" for="input-select-8">LABEL</label>
              <select class="form-control inail-input form-select" id="input-select-8">
                <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
                <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
                <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
                <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
              </select>
              <div class="inail-div-message"></div>
            </div>
          </div>
          <div class="row marginTop">
            <div class="col-xs-12 pull right">
              <button type="button" class="inail-button inail-button-secondary" id="annullaButtonA">Annulla</button>
              <button type="button" class="inail-button inail-button-primary ml-3 mt-2" id="confermaButtonA">Conferma</button>
            </div>
          </div>
        </form>
      </div>

      <div id="expandable-tab12a" class="tab-pane" role="tabpanel" aria-labelledby="tab5-label" aria-hidden="true">
        <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-12a">
          <div class="row">
            <div class="col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
              Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="control-label inail-label" for="input-filtro-tab-10">Input 1</label>
              <input type="text" class="form-control inail-input" id="input-filtro-tab-10" >
              <div class="inail-div-message"></div>
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="inail-label" for="input-select-9">LABEL</label>
              <select class="form-control inail-input form-select" id="input-select-9">
                <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
                <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
                <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
                <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
              </select>
              <div class="inail-div-message"></div>
            </div>
          </div>
          <div class="row marginTop">
            <div class="col-xs-12 pull right">
              <button type="button" class="inail-button inail-button-secondary" id="annullaButtonB">Annulla</button>
              <button type="button" class="inail-button inail-button-primary ml-3 mt-2" id="confermaButtonB">Conferma</button>
            </div>
          </div>
        </form>
      </div>

      <div id="expandable-tab13a" class="tab-pane" role="tabpanel" aria-labelledby="tab6-label" aria-hidden="true">
        <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-13a">
          <div class="row">
            <div class="col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
              Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="control-label inail-label" for="input-filtro-tab-11">Input 1</label>
              <input type="text" class="form-control inail-input" id="input-filtro-tab-11" >
              <div class="inail-div-message"></div>
            </div>
            <div class="form-group col-xs-12 col-md-6 col-lg-6">
              <label class="inail-label" for="input-select-10">LABEL</label>
              <select class="form-control inail-input form-select" id="input-select-10">
                <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
                <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
                <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
                <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
              </select>
              <div class="inail-div-message"></div>
            </div>
          </div>
          <div class="row marginTop">
            <div class="col-xs-12 pull right">
              <button type="button" class="inail-button inail-button-secondary" id="annullaButtonC">Annulla</button>
              <button type="button" class="inail-button inail-button-primary ml-3 mt-2" id="confermaButtonC">Conferma</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  `}function C(a){return`<div class="inail-tab-portale">
	<ul class="nav nav-tabs default-tabs" role="tablist" aria-label="Nome del tab">
		<li role="tab" class="active" id="tab1-label" aria-controls="tab11" aria-selected="true" tabindex="0">
			<a data-toggle="tab" href="#tab11" aria-expanded="true" tabindex="-1">
				<span class="labelTabTitle">${a.titoloTab1}</span>
			</a>
		</li>
		<li role="tab" id="tab2-label" aria-controls="tab12" aria-selected="false"  tabindex="-1">
			<a data-toggle="tab" href="#tab12" aria-expanded="false" tabindex="-1">
				<span class="labelTabTitle">${a.titoloTab2}</span>
			</a>
		</li>
		<li role="tab" id="tab3-label" aria-controls="tab13" aria-selected="false" tabindex="-1">
			<a data-toggle="tab" href="#tab13" aria-expanded="false" tabindex="-1">
				<span class="labelTabTitle">${a.titoloTab3}</span>
			</a>
		</li>
	</ul>
	<div class="tab-content">
		 <div id="tab11" class="tab-pane in active" role="tabpanel" aria-labelledby="tab1-label" aria-hidden="false">
      <form class="form-grey" action="#" name="filterForm" id="filtro-tab-1 ">
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				 Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-3">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-3">
			<div class="inail-div-message"></div>
          </div>

          <div class=" col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label" for="input-select-2">LABEL</label>
	          <select class="form-control inail-input form-select" id="input-select-2">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
			  <div class="inail-div-message"></div>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="button" class="inail-button inail-button-secondary" id="annullaButton">${a.etichettaBottoneSecondario}</button>
		<button type="button" class="inail-button inail-button-primary ml-3 mt-2" id="confermaButton">${a.etichettaBottonePrimario}</button>
		</div>
        </div>
      </form>
    </div>
			 <div id="tab12" class="tab-pane" role="tabpanel" aria-labelledby="tab2-label" aria-hidden="true">
      <form class="form-grey" action="#" name="filterForm" id="filtro-tab-1">
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-4">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-4">
			<div class="inail-div-message"></div>
          </div>

          <div class=" col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label" for="input-select-3">LABEL</label>
	          <select class="form-control inail-input form-select" id="input-select-3">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
			  <div class="inail-div-message"></div>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="button" class="inail-button inail-button-secondary" id="annullaButton2">${a.etichettaBottoneSecondario}</button>
		<button type="button" class="inail-button inail-button-primary ml-3 mt-2" id="confermaButton2">${a.etichettaBottonePrimario}</button>
		</div>
          
        </div>
      </form>
    </div>
				 <div id="tab13" class="tab-pane" role="tabpanel" aria-labelledby="tab3-label" aria-hidden="true">
      <form class="form-grey" action="#" name="filterForm" id="filtro-tab-1">
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				 Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-5">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-5">
			<div class="inail-div-message"></div>
          </div>

          <div class=" col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label" for="input-select-4">LABEL</label>
	          <select class="form-control inail-input form-select" id="input-select-4">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
			  <div class="inail-div-message"></div>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="button" class="inail-button inail-button-secondary" id="annullaButton3">${a.etichettaBottoneSecondario}</button>
		<button type="button" class="inail-button inail-button-primary ml-3 mt-2" id="confermaButton3">${a.etichettaBottonePrimario}</button>
		</div>
        </div>
      </form>
    </div>
				</div>
			</div>`}const B=`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. `,k={title:"Componenti/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:B,showCode:!0,showAccessibility:!0}},decorators:[(a,l)=>y(a,l,3,["https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-webkit.js","https://cdn.inailcloud.it/assets/inail/u.1.0/static/js/main.js","https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-tabs.js"],!0)]},r={name:"Tab 1",argTypes:{titoloTab1:{control:{type:"text"},description:"Titolo del tab 1",table:{category:"Tab 1",defaultValue:{summary:"Tab 1"}}},titoloTab2:{control:{type:"text"},description:"Titolo del tab 2",table:{category:"Tab 2",defaultValue:{summary:"Tab 2"}}},etichettaBottoneSecondario:{control:{type:"text"},description:"Etichetta del bottone secondario ",table:{defaultValue:{summary:"Annulla"}}},etichettaBottonePrimario:{control:{type:"text"},description:"Etichetta del bottone primario",table:{defaultValue:{summary:"Conferma"}}},onClickAnnulla:{action:"onClickAnnulla",description:"Evento al click del button Annulla.",table:{disable:!0}},onClickConferma:{action:"onClickConferma",description:"Evento al click del button Conferma.",table:{disable:!0}}},args:{titoloTab1:"Scheda 1",titoloTab2:"Scheda 2",etichettaBottoneSecondario:"Annulla",etichettaBottonePrimario:"Conferma"},render:a=>{const l=h(a),t=document.createElement("div");t.innerHTML=l,[{id:"#annullaButton",event:a.onClickAnnulla},{id:"#confermaButton",event:a.onClickConferma},{id:"#annullaButton2",event:a.onClickAnnulla},{id:"#confermaButton2",event:a.onClickConferma}].forEach(({id:o,event:n})=>{const i=t.querySelector(o);i&&i.addEventListener("click",n)});const e=document.createElement("main");return e.id="contenutoPrincipale",e.appendChild(t),e||""}},s={name:"Tab 2",argTypes:{titoloTab1:{control:{type:"text"},description:"Titolo del tab 1",table:{category:"Tab 1",defaultValue:{summary:"Tab 1"}}},titoloTab2:{control:{type:"text"},description:"Titolo del tab 2",table:{category:"Tab 2",defaultValue:{summary:"Tab 2"}}},titoloTab3:{control:{type:"text"},description:"Titolo del tab 3",table:{category:"Tab 3",defaultValue:{summary:"Tab 3"}}},etichettaBottoneSecondario:{control:{type:"text"},description:"Etichetta del bottone secondario ",table:{defaultValue:{summary:"Annulla"}}},etichettaBottonePrimario:{control:{type:"text"},description:"Etichetta del bottone primario",table:{defaultValue:{summary:"Conferma"}}},onClickAnnulla:{action:"onClickAnnulla",description:"Evento al click del button Annulla.",table:{disable:!0}},onClickConferma:{action:"onClickConferma",description:"Evento al click del button Conferma.",table:{disable:!0}}},args:{titoloTab1:"Scheda 1",titoloTab2:"Scheda 2",titoloTab3:"Scheda 3",etichettaBottoneSecondario:"Annulla",etichettaBottonePrimario:"Conferma"},render:a=>{const l=C(a),t=document.createElement("div");t.innerHTML=l,[{id:"#annullaButton",event:a.onClickAnnulla},{id:"#confermaButton",event:a.onClickConferma},{id:"#annullaButton2",event:a.onClickAnnulla},{id:"#confermaButton2",event:a.onClickConferma},{id:"#annullaButton3",event:a.onClickAnnulla},{id:"#confermaButton3",event:a.onClickConferma}].forEach(({id:o,event:n})=>{const i=t.querySelector(o);i&&i.addEventListener("click",n)});const e=document.createElement("main");return e.id="contenutoPrincipale",e.appendChild(t),e||""}},c={name:"Tabs espandibili",argTypes:{titoloTab1:{control:{type:"text"},description:"Titolo del tab 1",table:{category:"Tab 1",defaultValue:{summary:"Tab 1"}}},titoloTab2:{control:{type:"text"},description:"Titolo del tab 2",table:{category:"Tab 2",defaultValue:{summary:"Tab 2"}}},titoloTab3:{control:{type:"text"},description:"Titolo del tab 3",table:{category:"Tab 3",defaultValue:{summary:"Tab 3"}}},etichettaBottoneSecondario:{control:{type:"text"},description:"Etichetta del bottone secondario ",table:{defaultValue:{summary:"Annulla"}}},etichettaBottonePrimario:{control:{type:"text"},description:"Etichetta del bottone primario",table:{defaultValue:{summary:"Conferma"}}},onClickAnnulla:{action:"onClickAnnulla",description:"Evento al click del button Annulla.",table:{disable:!0}},onClickConferma:{action:"onClickConferma",description:"Evento al click del button Conferma.",table:{disable:!0}}},args:{titoloTab1:"Scheda 1",titoloTab2:"Scheda 2",titoloTab3:"Scheda 3",etichettaBottoneSecondario:"Annulla",etichettaBottonePrimario:"Conferma"},render:a=>{const l=x(a),t=document.createElement("div");t.innerHTML=l,[{id:"#annullaButton1",event:a.onClickAnnulla},{id:"#confermaButton1",event:a.onClickConferma},{id:"#annullaButton2",event:a.onClickAnnulla},{id:"#confermaButton2",event:a.onClickConferma},{id:"#annullaButton3",event:a.onClickAnnulla},{id:"#confermaButton3",event:a.onClickConferma},{id:"#annullaButtonA",event:a.onClickAnnulla},{id:"#confermaButtonA",event:a.onClickConferma},{id:"#annullaButtonB",event:a.onClickAnnulla},{id:"#confermaButtonB",event:a.onClickConferma},{id:"#annullaButtonC",event:a.onClickAnnulla},{id:"#confermaButtonC",event:a.onClickConferma}].forEach(({id:o,event:n})=>{const i=t.querySelector(o);i&&i.addEventListener("click",n)});const e=document.createElement("main");return e.id="contenutoPrincipale",e.appendChild(t),e||""}};var b,u,p;r.parameters={...r.parameters,docs:{...(b=r.parameters)==null?void 0:b.docs,source:{originalSource:`{
  name: "Tab 1",
  argTypes: {
    titoloTab1: {
      control: {
        type: "text"
      },
      description: "Titolo del tab 1",
      table: {
        category: "Tab 1",
        defaultValue: {
          summary: "Tab 1"
        }
      }
    },
    titoloTab2: {
      control: {
        type: "text"
      },
      description: "Titolo del tab 2",
      table: {
        category: "Tab 2",
        defaultValue: {
          summary: "Tab 2"
        }
      }
    },
    etichettaBottoneSecondario: {
      control: {
        type: "text"
      },
      description: "Etichetta del bottone secondario ",
      table: {
        defaultValue: {
          summary: "Annulla"
        }
      }
    },
    etichettaBottonePrimario: {
      control: {
        type: "text"
      },
      description: "Etichetta del bottone primario",
      table: {
        defaultValue: {
          summary: "Conferma"
        }
      }
    },
    onClickAnnulla: {
      action: "onClickAnnulla",
      description: "Evento al click del button Annulla.",
      table: {
        disable: true
      }
    },
    onClickConferma: {
      action: "onClickConferma",
      description: "Evento al click del button Conferma.",
      table: {
        disable: true
      }
    }
  },
  args: {
    titoloTab1: "Scheda 1",
    titoloTab2: "Scheda 2",
    etichettaBottoneSecondario: "Annulla",
    etichettaBottonePrimario: "Conferma"
  },
  render: args => {
    const tabHTML = createTab1(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = tabHTML;

    // Cerca il bottone dentro il div temporaneo
    const buttonIds = [{
      id: "#annullaButton",
      event: args.onClickAnnulla
    }, {
      id: "#confermaButton",
      event: args.onClickConferma
    }, {
      id: "#annullaButton2",
      event: args.onClickAnnulla
    }, {
      id: "#confermaButton2",
      event: args.onClickConferma
    }];
    buttonIds.forEach(({
      id,
      event
    }) => {
      const button = tempDiv.querySelector(id);
      if (button) {
        button.addEventListener("click", event);
      }
    });

    // Crea il main e appende il bottone  all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    mainElement.appendChild(tempDiv);
    return mainElement || "";
  }
}`,...(p=(u=r.parameters)==null?void 0:u.docs)==null?void 0:p.source}}};var m,v,f;s.parameters={...s.parameters,docs:{...(m=s.parameters)==null?void 0:m.docs,source:{originalSource:`{
  name: "Tab 2",
  argTypes: {
    titoloTab1: {
      control: {
        type: "text"
      },
      description: "Titolo del tab 1",
      table: {
        category: "Tab 1",
        defaultValue: {
          summary: "Tab 1"
        }
      }
    },
    titoloTab2: {
      control: {
        type: "text"
      },
      description: "Titolo del tab 2",
      table: {
        category: "Tab 2",
        defaultValue: {
          summary: "Tab 2"
        }
      }
    },
    titoloTab3: {
      control: {
        type: "text"
      },
      description: "Titolo del tab 3",
      table: {
        category: "Tab 3",
        defaultValue: {
          summary: "Tab 3"
        }
      }
    },
    etichettaBottoneSecondario: {
      control: {
        type: "text"
      },
      description: "Etichetta del bottone secondario ",
      table: {
        defaultValue: {
          summary: "Annulla"
        }
      }
    },
    etichettaBottonePrimario: {
      control: {
        type: "text"
      },
      description: "Etichetta del bottone primario",
      table: {
        defaultValue: {
          summary: "Conferma"
        }
      }
    },
    onClickAnnulla: {
      action: "onClickAnnulla",
      description: "Evento al click del button Annulla.",
      table: {
        disable: true
      }
    },
    onClickConferma: {
      action: "onClickConferma",
      description: "Evento al click del button Conferma.",
      table: {
        disable: true
      }
    }
  },
  args: {
    titoloTab1: "Scheda 1",
    titoloTab2: "Scheda 2",
    titoloTab3: "Scheda 3",
    etichettaBottoneSecondario: "Annulla",
    etichettaBottonePrimario: "Conferma"
  },
  render: args => {
    const tabHTML = createTab2(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = tabHTML;

    // Mappa i bottoni con i rispettivi ID e aggiungi gli eventi click
    const buttonIds = [{
      id: "#annullaButton",
      event: args.onClickAnnulla
    }, {
      id: "#confermaButton",
      event: args.onClickConferma
    }, {
      id: "#annullaButton2",
      event: args.onClickAnnulla
    }, {
      id: "#confermaButton2",
      event: args.onClickConferma
    }, {
      id: "#annullaButton3",
      event: args.onClickAnnulla
    }, {
      id: "#confermaButton3",
      event: args.onClickConferma
    }];
    buttonIds.forEach(({
      id,
      event
    }) => {
      const button = tempDiv.querySelector(id);
      if (button) {
        button.addEventListener("click", event);
      }
    });

    // Crea il main e appende il bottone  all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    mainElement.appendChild(tempDiv);
    return mainElement || "";
  }
}`,...(f=(v=s.parameters)==null?void 0:v.docs)==null?void 0:f.source}}};var g,z,T;c.parameters={...c.parameters,docs:{...(g=c.parameters)==null?void 0:g.docs,source:{originalSource:`{
  name: "Tabs espandibili",
  argTypes: {
    titoloTab1: {
      control: {
        type: "text"
      },
      description: "Titolo del tab 1",
      table: {
        category: "Tab 1",
        defaultValue: {
          summary: "Tab 1"
        }
      }
    },
    titoloTab2: {
      control: {
        type: "text"
      },
      description: "Titolo del tab 2",
      table: {
        category: "Tab 2",
        defaultValue: {
          summary: "Tab 2"
        }
      }
    },
    titoloTab3: {
      control: {
        type: "text"
      },
      description: "Titolo del tab 3",
      table: {
        category: "Tab 3",
        defaultValue: {
          summary: "Tab 3"
        }
      }
    },
    etichettaBottoneSecondario: {
      control: {
        type: "text"
      },
      description: "Etichetta del bottone secondario ",
      table: {
        defaultValue: {
          summary: "Annulla"
        }
      }
    },
    etichettaBottonePrimario: {
      control: {
        type: "text"
      },
      description: "Etichetta del bottone primario",
      table: {
        defaultValue: {
          summary: "Conferma"
        }
      }
    },
    onClickAnnulla: {
      action: "onClickAnnulla",
      description: "Evento al click del button Annulla.",
      table: {
        disable: true
      }
    },
    onClickConferma: {
      action: "onClickConferma",
      description: "Evento al click del button Conferma.",
      table: {
        disable: true
      }
    }
  },
  args: {
    titoloTab1: "Scheda 1",
    titoloTab2: "Scheda 2",
    titoloTab3: "Scheda 3",
    etichettaBottoneSecondario: "Annulla",
    etichettaBottonePrimario: "Conferma"
  },
  render: args => {
    const expandableTabsHTML = createExpandableTabs(args);
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = expandableTabsHTML;

    // Mappa i bottoni con i rispettivi ID e aggiungi gli eventi click
    const buttonIds = [{
      id: "#annullaButton1",
      event: args.onClickAnnulla
    }, {
      id: "#confermaButton1",
      event: args.onClickConferma
    }, {
      id: "#annullaButton2",
      event: args.onClickAnnulla
    }, {
      id: "#confermaButton2",
      event: args.onClickConferma
    }, {
      id: "#annullaButton3",
      event: args.onClickAnnulla
    }, {
      id: "#confermaButton3",
      event: args.onClickConferma
    }, {
      id: "#annullaButtonA",
      event: args.onClickAnnulla
    }, {
      id: "#confermaButtonA",
      event: args.onClickConferma
    }, {
      id: "#annullaButtonB",
      event: args.onClickAnnulla
    }, {
      id: "#confermaButtonB",
      event: args.onClickConferma
    }, {
      id: "#annullaButtonC",
      event: args.onClickAnnulla
    }, {
      id: "#confermaButtonC",
      event: args.onClickConferma
    }];
    buttonIds.forEach(({
      id,
      event
    }) => {
      const button = tempDiv.querySelector(id);
      if (button) {
        button.addEventListener("click", event);
      }
    });

    // Crea il main e appende il bottone  all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    mainElement.appendChild(tempDiv);
    return mainElement || "";
  }
}`,...(T=(z=c.parameters)==null?void 0:z.docs)==null?void 0:T.source}}};const A=["Tab1","Tab2","ExpandableTab"];export{c as ExpandableTab,r as Tab1,s as Tab2,A as __namedExportsOrder,k as default};
