import{m as d}from"./iframe-I4S6H_qo.js";import"./preload-helper-PPVm8Dsz.js";function u(){return`
	<form class="row panel panel-default filter-accordion widget" action="#" name="filterForm">
      <!-- accordion con i filtri -->
      <div class="row accordion-gray inail-accordion-container inail-accordion-filters">
        <div class="row head-accordion-gray" data-toggle="collapse">
          <div class="accordion-title">
            <button type="button"
                    data-toggle="collapse"
                    data-target="#filter-accordion-panel-1"
                    aria-expanded="true"
                    class="inail-filter-button">
              <div class="inail-filter-title" id="accordionContent">Filtra per</div>
              <span class="fa fa-solid fa-chevron-down fa-lg"></span>
            </button>
          </div>
        </div>
			<div id="filter-accordion-panel-1" class="row collapse panel-body body-form-grey inail-filter-body" role="region" aria-expanded="true" aria-labelledby='accordionContent'>
				<div class="row">
  	  		<div class=" col-xs-8 noPaddingLeft">
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
							<div class="noPaddingLeft">
							   <label class="control-label inail-label" for="form-input-1">Label</label>
							   <input type="text" class="form-control inail-input" id="form-input-1">
							   <div class="inail-div-message"></div>
							</div>
						</div>
					</div>
					
					<div class="col-xs-12 py-4">
						<div class="pull-right">
							<button type="button" class="inail-button inail-button-secondary mr-4" id="annullaButton">Azzera</button>
							<button type="button" class="inail-button inail-button-primary"  id="filtraButton">Filtra</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>`}function p(){return`
	<form class="row panel panel-default filter-accordion widget" action="#" name="filterForm">
		<div class="row accordion-gray inail-accordion-container inail-accordion-filters">

  	  <div class="row head-accordion-gray" data-toggle="collapse">
  	    <div class="accordion-title">
  	      <button type="button" data-toggle="collapse"
  	        data-target="#filter-accordion-panel-2" aria-expanded="false" class="inail-filter-button">
  	        <div class="inail-filter-title" id="accordionContent">Filtra per</div>
  	        <span class="fa fa-solid fa-chevron-down fa-lg"></span>
  	      </button>
  	    </div>
			</div>

			<div id="filter-accordion-panel-2" class="row collapse panel-body body-form-grey inail-filter-body" role="region" aria-expanded="true" aria-labelledby='accordionContent'>
				<div class="row pb-0">
					<div class=" col-sm-4 noPaddingLeft">
						<label class="inail-label" for='select'>SELECT 1</label>
						<select class="form-control inail-input form-select" id='select'>
							<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 py-0">
    <fieldset>
        <legend class="inail-date-range-title p-0 mb-3">Periodo</legend>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
            <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-6 col-md-4 col-lg-4 noPaddingLeft">
            <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="col-xs-12 pb-4">
					<div class="pull-right">
						<button type="button" class="inail-button inail-button-secondary mr-4" id="annullaButton">Azzera</button>
						<button type="button" class="inail-button inail-button-primary" id="filtraButton">Filtra</button>
					</div>
				</div>
			</div>
		</div>
	</form>`}function m(){return`
	<form class="row panel panel-default filter-accordion widget" action="#" name="filterForm">
		<div class="row accordion-gray inail-accordion-container inail-accordion-filters">

  	  <div class="row head-accordion-gray" data-toggle="collapse">
  	    <div class="accordion-title">
  	      <button type="button" data-toggle="collapse"
  	        data-target="#filter-accordion-panel-3" aria-expanded="false" class="inail-filter-button">
  	        <div class=" inail-filter-title" id='accordionContent'>Filtra per</div>
  	        <span class="fa fa-solid fa-chevron-down fa-lg"></span>
  	      </button>
  	    </div>
			</div>

			<div id="filter-accordion-panel-3" class="row collapse panel-body body-form-grey inail-filter-body" role="region" aria-expanded="true" aria-labelledby='accordionContent'>
				<div class="row pb-0">
					<div class=" col-sm-4 noPaddingLeft">
						<label class="inail-label" for='select'>SELECT 1</label>
						<select class="form-control inail-input form-select" id='select'>
							<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 py-0">
    <fieldset>
        <legend class="inail-date-range-title p-0 mb-3">Periodo</legend>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
            <div class=" date datePicker ">
                <div class="input-relative">
                    <label class="control-label inail-label" for="form-data-2" id="periodo-dal">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 aria-labelledby="periodo-dal">
                </div>
                <div class="inail-div-message"></div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
            <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 aria-labelledby="periodo-dal">
                </div>
                <div class="inail-div-message"></div>
            </div>
        </div>
    </fieldset>
</div>

				<div class="row py-0">
					<div class=" col-sm-4 noPaddingLeft">
						<label class="inail-label" for="filter-select-2">SELECT 2</label>
						<select class="form-control inail-input form-select" id="filter-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="col-xs-12 pb-4">
					<div class="pull-right">
						<button type="button" class="inail-button inail-button-secondary mr-4" id="annullaButton">Azzera</button>
						<button type="button" class="inail-button inail-button-primary" id="filtraButton">Filtra</button>
					</div>
				</div>
			</div>
		</div>
	</form>`}function v(){return` 
		<form class="row panel panel-default filter-accordion widget" action="#" name="filterForm">
		<div class="row accordion-gray inail-accordion-container inail-accordion-filters">

  	  <div class="row head-accordion-gray" data-toggle="collapse">
  	    <div class="accordion-title">
  	      <button type="button" data-toggle="collapse"
  	        data-target="#filter-accordion-panel-4" aria-expanded="false" class="inail-filter-button">
  	        <div class=" inail-filter-title" id='accordionContent'>Filtra per</div>
  	        <span class="fa fa-solid fa-chevron-down fa-lg"></span>
  	      </button>
  	    </div>
			</div>

			<div id="filter-accordion-panel-4" class="row collapse panel-body body-form-grey inail-filter-body" role="region" aria-expanded="true" aria-labelledby='accordionContent'>
				<div class="row pb-0">
					<div class="col-sm-4 noPaddingLeft">
						<label class="inail-label" for='select'>SELECT 1</label>
						<select class="form-control inail-input form-select" id='select'>
							<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 py-0">
				<fieldset>
				<legend class="inail-checkbox-legend mb-2">LABEL CHECKBOXES</legend>
					<div class="row d-flex">
						<div class="mr-2">
							<div class="form-group custom-checkbox-container inail-checkbox">
								<input type="checkbox" id="check-1" class="custom-checkbox option-checkbox" aria-labelledby="checkboxes">
								<label for="check-1">
									<span class="custom-checkbox-background">
										<i class="fa inail-checkbox-icon"></i>
									</span>
									<span>Lorem ipsum</span>
								</label>
							</div>
						</div>
						<div class="ml-4">
							<div class="form-group noPaddingLeft custom-checkbox-container inail-checkbox">
								<input type="checkbox" id="check-2" class="custom-checkbox option-checkbox" aria-labelledby="checkboxes">
								<label for="check-2">
									<span class="custom-checkbox-background">
										<i class="fa inail-checkbox-icon"></i>
									</span>
									<span>Lorem ipsum</span>
								</label>
							</div>
						</div>
					</div>
					<div class="inail-div-message"></div>
				</div>
				</fieldset>
				
				<div class="col-xs-12 pb-4">
					<div class="pull-right">
						<button type="button" class="inail-button inail-button-secondary mr-4" id="annullaButton">Azzera</button>
						<button type="button" class="inail-button inail-button-primary" id="filtraButton">Filtra</button>
					</div>
				</div>
			</div>
		</div>
	</form>`}const b="N.D.",k={title:"Patterns/Filtri",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 "},mdxPage:b}},decorators:[(a,n)=>d(a,n,4,["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"],!0)]},o={name:"Filtri base",argTypes:{onClickAnnulla:{action:"onClickAnnulla",description:"Evento al click del button Annulla.",table:{disable:!0}},onClickFiltra:{action:"onClickFiltra",description:"Evento al click del button Filtra.",table:{disable:!0}}},render:a=>{const n=u(),e=document.createElement("div");e.innerHTML=n;const t=e.querySelector("#annullaButton"),l=e.querySelector("#filtraButton");t&&l&&(t.addEventListener("click",a.onClickAnnulla),l.addEventListener("click",a.onClickFiltra));const i=document.createElement("main");return i.id="contenutoPrincipale",i.appendChild(e),i||""}},r={name:"Filtro con campi su una riga",argTypes:{onClickAnnulla:{action:"onClickAnnulla",description:"Evento al click del button Annulla.",table:{disable:!0}},onClickFiltra:{action:"onClickFiltra",description:"Evento al click del button Filtra.",table:{disable:!0}}},render:a=>{const n=p(),e=document.createElement("div");e.innerHTML=n;const t=e.querySelector("#annullaButton"),l=e.querySelector("#filtraButton");t&&l&&(t.addEventListener("click",a.onClickAnnulla),l.addEventListener("click",a.onClickFiltra));const i=document.createElement("main");return i.id="contenutoPrincipale",i.appendChild(e),i||""}},c={name:"Filtro con campi su più righe",argTypes:{onClickAnnulla:{action:"onClickAnnulla",description:"Evento al click del button Annulla.",table:{disable:!0}},onClickFiltra:{action:"onClickFiltra",description:"Evento al click del button Filtra.",table:{disable:!0}}},render:a=>{const n=m(),e=document.createElement("div");e.innerHTML=n;const t=e.querySelector("#annullaButton"),l=e.querySelector("#filtraButton");t&&l&&(t.addEventListener("click",a.onClickAnnulla),l.addEventListener("click",a.onClickFiltra));const i=document.createElement("main");return i.id="contenutoPrincipale",i.appendChild(e),i||""}},s={name:"Filtro con checkbox",argTypes:{onClickAnnulla:{action:"onClickAnnulla",description:"Evento al click del button Annulla.",table:{disable:!0}},onClickFiltra:{action:"onClickFiltra",description:"Evento al click del button Filtra.",table:{disable:!0}}},render:a=>{const n=v(),e=document.createElement("div");e.innerHTML=n;const t=e.querySelector("#annullaButton"),l=e.querySelector("#filtraButton");t&&l&&(t.addEventListener("click",a.onClickAnnulla),l.addEventListener("click",a.onClickFiltra));const i=document.createElement("main");return i.id="contenutoPrincipale",i.appendChild(e),i||""}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  name: "Filtri base",
  argTypes: {
    onClickAnnulla: {
      action: "onClickAnnulla",
      description: "Evento al click del button Annulla.",
      table: {
        disable: true
      }
    },
    onClickFiltra: {
      action: "onClickFiltra",
      description: "Evento al click del button Filtra.",
      table: {
        disable: true
      }
    }
  },
  render: (args: any) => {
    //---------Forzare eventi----------------//
    const filterHTML = createBaseFilter();
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = filterHTML;

    // Cerca il bottone dentro il div temporaneo
    const annullaButton = tempDiv.querySelector("#annullaButton");
    const filtraButton = tempDiv.querySelector("#filtraButton");

    // Se il bottone esiste, aggiungi l'evento click
    if (annullaButton && filtraButton) {
      annullaButton.addEventListener("click", args.onClickAnnulla);
      filtraButton.addEventListener("click", args.onClickFiltra);
    }

    // Crea il main e appende il bottone all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    mainElement.appendChild(tempDiv);

    // Ritorna il main element con il bottone all'interno
    return mainElement || "";
  }
}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  name: "Filtro con campi su una riga",
  argTypes: {
    onClickAnnulla: {
      action: "onClickAnnulla",
      description: "Evento al click del button Annulla.",
      table: {
        disable: true
      }
    },
    onClickFiltra: {
      action: "onClickFiltra",
      description: "Evento al click del button Filtra.",
      table: {
        disable: true
      }
    }
  },
  render: (args: any) => {
    //---------Forzare eventi----------------//
    const filterHTML = createComplexFilter();
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = filterHTML;

    // Cerca il bottone dentro il div temporaneo
    const annullaButton = tempDiv.querySelector("#annullaButton");
    const filtraButton = tempDiv.querySelector("#filtraButton");

    // Se il bottone esiste, aggiungi l'evento click
    if (annullaButton && filtraButton) {
      annullaButton.addEventListener("click", args.onClickAnnulla);
      filtraButton.addEventListener("click", args.onClickFiltra);
    }

    // Crea il main e appende il bottone all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    mainElement.appendChild(tempDiv);

    // Ritorna il main element con il bottone all'interno
    return mainElement || "";
  }
}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
  name: "Filtro con campi su più righe",
  argTypes: {
    onClickAnnulla: {
      action: "onClickAnnulla",
      description: "Evento al click del button Annulla.",
      table: {
        disable: true
      }
    },
    onClickFiltra: {
      action: "onClickFiltra",
      description: "Evento al click del button Filtra.",
      table: {
        disable: true
      }
    }
  },
  render: (args: any) => {
    //---------Forzare eventi----------------//
    const filterHTML = createComplexFilterMultiLine();
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = filterHTML;

    // Cerca il bottone dentro il div temporaneo
    const annullaButton = tempDiv.querySelector("#annullaButton");
    const filtraButton = tempDiv.querySelector("#filtraButton");

    // Se il bottone esiste, aggiungi l'evento click
    if (annullaButton && filtraButton) {
      annullaButton.addEventListener("click", args.onClickAnnulla);
      filtraButton.addEventListener("click", args.onClickFiltra);
    }

    // Crea il main e appende il bottone all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    mainElement.appendChild(tempDiv);

    // Ritorna il main element con il bottone all'interno
    return mainElement || "";
  }
}`,...c.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  name: "Filtro con checkbox",
  argTypes: {
    onClickAnnulla: {
      action: "onClickAnnulla",
      description: "Evento al click del button Annulla.",
      table: {
        disable: true
      }
    },
    onClickFiltra: {
      action: "onClickFiltra",
      description: "Evento al click del button Filtra.",
      table: {
        disable: true
      }
    }
  },
  render: (args: any) => {
    //---------Forzare eventi----------------//
    const filterHTML = createFormWithCheckbox();
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = filterHTML;

    // Cerca il bottone dentro il div temporaneo
    const annullaButton = tempDiv.querySelector("#annullaButton");
    const filtraButton = tempDiv.querySelector("#filtraButton");

    // Se il bottone esiste, aggiungi l'evento click
    if (annullaButton && filtraButton) {
      annullaButton.addEventListener("click", args.onClickAnnulla);
      filtraButton.addEventListener("click", args.onClickFiltra);
    }

    // Crea il main e appende il bottone all'interno
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";
    mainElement.appendChild(tempDiv);

    // Ritorna il main element con il bottone all'interno
    return mainElement || "";
  }
}`,...s.parameters?.docs?.source}}};const y=["BaseFilter","ComplexFilterononeLine","FormwithMultiline","FormWithFilter"];export{o as BaseFilter,r as ComplexFilterononeLine,s as FormWithFilter,c as FormwithMultiline,y as __namedExportsOrder,k as default};
