import{a as F}from"./Utilities-CQhZFhp5.js";function B(){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-1" 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-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">Annulla</button>
							<button type="button" class="inail-button inail-button-primary"  id="filtraButton">Filtra</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>`}function h(){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">Annulla</button>
						<button type="button" class="inail-button inail-button-primary" id="filtraButton">Filtra</button>
					</div>
				</div>
			</div>
		</div>
	</form>`}function z(){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">Annulla</button>
						<button type="button" class="inail-button inail-button-primary" id="filtraButton">Filtra</button>
					</div>
				</div>
			</div>
		</div>
	</form>`}function x(){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">Annulla</button>
						<button type="button" class="inail-button inail-button-primary" id="filtraButton">Filtra</button>
					</div>
				</div>
			</div>
		</div>
	</form>`}const L="N.D.",w={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:L}},decorators:[(a,n)=>F(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=B(),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=h(),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=z(),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=x(),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||""}};var d,u,p;o.parameters={...o.parameters,docs:{...(d=o.parameters)==null?void 0:d.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 || "";
  }
}`,...(p=(u=o.parameters)==null?void 0:u.docs)==null?void 0:p.source}}};var m,v,b;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.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 || "";
  }
}`,...(b=(v=r.parameters)==null?void 0:v.docs)==null?void 0:b.source}}};var f,g,k;c.parameters={...c.parameters,docs:{...(f=c.parameters)==null?void 0:f.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 || "";
  }
}`,...(k=(g=c.parameters)==null?void 0:g.docs)==null?void 0:k.source}}};var y,C,E;s.parameters={...s.parameters,docs:{...(y=s.parameters)==null?void 0:y.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 || "";
  }
}`,...(E=(C=s.parameters)==null?void 0:C.docs)==null?void 0:E.source}}};const O=["BaseFilter","ComplexFilterononeLine","FormwithMultiline","FormWithFilter"];export{o as BaseFilter,r as ComplexFilterononeLine,s as FormWithFilter,c as FormwithMultiline,O as __namedExportsOrder,w as default};
