function b(e){const l=[{date:{day:"29",month:"Maggio"},title:`${e.titoloBox}`,description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. ",linkText:`${e.etichettaLink}`,search:{placeholder:`${e.placeholder}`}},{date:{day:"30",month:"Giugno"},title:"Secondo box",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi",linkText:"Vedi dettagli",search:{placeholder:"Cerca qualcosa..."}}];let t=` 
<div id="boxCarousel" class="carouselBox carousel slide" data-ride="carousel" aria-label="nome del carousel" role="region" aria-roledescription="carousel">
  <div class="carousel-inner">`,a=0;return l.forEach((i,o)=>{t+=`
    <div class="item ${o===0?"active":""}">
      <div class="inail-box px-3">
        <div class="col-xs-6 col-md-6 inail-box-dashboard" role="group" aria-roledescription="slide" aria-labelledby="titolo-box-${a}">
          <div class="inail-box-body">
           <time class="inail-box-label" datetime="aaaa/mm/gg">${e.etichettaData}</time>
            <div class="inail-card-title" id="titolo-box-${a}">${i.title}</div>
            <p class="inail-box-description">
              ${e.descrizione}
            </p>
            <div class="inail-box-footer">
              <a class="inail-text-link-1-semibold ml-0 pl-0" href="javascript:void(0)">${i.linkText}</a>
            </div>
          </div>
        </div>`,a++,t+=`
        <div class="col-xs-6 col-md-6 inail-box-dashboard" role="group" aria-roledescription="slide" aria-labelledby="titolo-box-${a}">
          <div class="inail-box-body">
            <div class="inail-card-title mt-0" id="titolo-box-${a}">${e.titoloBox}</div>
            <p class="inail-box-description">${e.descrizione2}</p>
            <div class="inail-box-footer">
              <form class="form row">
                <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 noPaddingLeft">
                  <label class="inail-label" for="input-ricerca-${o+1}">${e.etichettaInput}</label>
                  <input type="text" class="form-control inail-ricerca inail-input mt-0" id="input-ricerca-${o+1}" placeholder="${e.placeholder}">
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 noPaddingLeft noPaddingRight">
                  <button class="inail-button inail-button-primary mt-0" type="button" id="cercaButton${o}">${e.etichettaBottone}</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>`,a++}),t+=`
  </div>
  <div class="left carousel-control">
    <a aria-label="Scorri al precedente" href="#boxCarousel" data-slide="prev">
      <span class="fa fa-angle-left"></span>
    </a>
  </div>
  <div class="right carousel-control">
    <a aria-label="Scorri al successivo" href="#boxCarousel" data-slide="next">
      <span class="fa fa-angle-right"></span>
    </a>
  </div>
  <ol class="carousel-indicators">`,l.forEach((i,o)=>{t+=`
    <li data-target="#boxCarousel" data-slide-to="${o}" ${o===0?'class="active"':""}></li>`}),t+=`
  </ol>
</div>`,t}function x(e){return`<!-- BOX-1 DATA -->
    <div class="">
        <div class="inail-box">
            <!-- First Column -->
            <div class="col-md-6 col-12 inail-box-dashboard" role="group" aria-labelledby="titolo-box-1">
                <div class="inail-box-body">
                 <time class="inail-box-label" datetime="aaaa/mm/gg">${e.etichettaData}</time>
					<div class="inail-card-title" id="titolo-box-1">${e.titoloBox}</div>
                    <p class="inail-box-description">
                       ${e.descrizione}
                    </p>
                    <div class="inail-box-footer">
                        <a class="inail-text-link-1-semibold ml-0 pl-0" href="javascript:void(0)">${e.etichettaLink}</a>
                    </div>
                </div>
            </div>

            <!-- Second Column -->
            <div class="col-md-6 col-12 inail-box-dashboard" role="group" aria-labelledby="titolo-box-2">
                <div class="inail-box-body">
					<div class="inail-card-title mt-0" id="titolo-box-2">${e.titoloBox}</div>
                    <p class="inail-box-description">
                    ${e.descrizione2}
                    </p>
                    <div class="inail-box-footer">
                        <form class="form row ">
                            <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 noPaddingLeft">
                                <label class="inail-label" for="input-ricerca-1">${e.etichettaInput}</label>
                                <input type="text" id="input-ricerca-1" class="form-control inail-ricerca inail-input mt-0" placeholder="${e.placeholder}">
                            </div>
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4  noPaddingLeft noPaddingRight">
                                <button class="inail-button inail-button-primary" type="button" id="cercaButton">${e.etichettaBottone}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>`}const g=`I box presenti nella dashboard possono essere utilizzati come widget per l'accesso rapido a: news, applicazioni, avvisi.

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

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

Il Carousel Box Dashboard permette di integrare più Box Dashboard. Sono obbligatori in questo caso i controlli di navigazione: Frecce: per andare avanti e indietro nel carousel Indicatori Circolari: per esplicitare la presenza di altri elementi oltre a quelli visibili sulla pagina `,h={title:"Componenti/Box e Tab/Box Dashboard",tags:["autodocs"],parameters:{docs:{description:{component:"I box presenti nella dashboard possono essere utilizzati come widget per l'accesso rapido a: news, applicazioni, avvisi.<br /><br />Nel caso di news ed avvisi è possibile accedere ad un approfondimento attraverso al link “Tutti i dettagli”, posto in basso a destra del box.<br /><br />Nell'esempio viene mostrato un box di ricerca a titolo esemplificativo, infatti è possibile integrare un widget di un'applicazione per una <br /> rapida ricerca interna. Es: Ricerca Pratica, Ricerca Codice Sede.<br /><br />Il Carousel Box Dashboard permette di integrare più Box Dashboard. Sono obbligatori in questo caso i controlli di navigazione: Frecce:<br /> per andare avanti e indietro nel carousel Indicatori Circolari: per esplicitare la presenza di altri elementi oltre a quelli visibili sulla pagina "},showAccessibility:!0,mdxPage:g}}},r={argTypes:{etichettaData:{control:"text",description:"Formato data: GG/MM/AAAA",table:{category:"Box1",defaultValue:{summary:"GG/MM/AAAA"}}},titoloBox:{control:"text",description:"Titolo del box",table:{category:"Box1",defaultValue:{summary:"Titolo box"}}},descrizione:{control:"text",description:"Descrizione del box",table:{category:"Box1",defaultValue:{summary:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi"}}},descrizione2:{control:"text",description:"Descrizione del box 2",table:{category:"Box2",defaultValue:{summary:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna."}}},etichettaLink:{control:"text",description:"Etichetta del pulsante link",table:{category:"Box1",defaultValue:{summary:"Link button"}}},etichettaInput:{control:"text",description:"Etichetta del campo di input",table:{category:"Box2",defaultValue:{summary:"CERCA"}}},etichettaBottone:{control:"text",description:"Etichetta  del buttone",table:{category:"Box2",defaultValue:{summary:"CERCA"}}},placeholder:{control:"text",description:"Placeholder dell’input",table:{category:"Box2",defaultValue:{summary:"Testo da cercare..."}}},onClick:{action:"onClick",description:"Evento al click del button.",table:{disable:!0}}},args:{etichettaData:"GG/MM/AAAA",titoloBox:"Titolo box",descrizione:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi",descrizione2:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",etichettaLink:"Vai al link",etichettaInput:"CERCA",etichettaBottone:"CERCA",placeholder:"Testo da cercare..."},render:e=>{const l=x(e),t=document.createElement("div");t.innerHTML=l;const a=t.querySelector("#cercaButton");a&&a.addEventListener("click",e.onClick);const i=document.createElement("main");return i.id="contenutoPrincipale",i.append(...Array.from(t.childNodes)),i}},n={argTypes:{etichettaData:{control:"text",description:"Formato data: GG/MM/AAAA",table:{category:"Box1",defaultValue:{summary:"GG/MM/AAAA"}}},titoloBox:{control:"text",description:"Titolo del box",table:{category:"Box1",defaultValue:{summary:"Titolo box"}}},descrizione:{control:"text",description:"Descrizione del box ",table:{category:"Box1",defaultValue:{summary:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi"}}},descrizione2:{control:"text",description:"Descrizione del box 2",table:{category:"Box2",defaultValue:{summary:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi"}}},etichettaLink:{control:"text",description:"Etichetta del pulsante link",table:{category:"Box1",defaultValue:{summary:"Link button"}}},etichettaInput:{control:"text",description:"Etichetta del campo di input",table:{category:"Box2",defaultValue:{summary:"CERCA"}}},etichettaBottone:{control:"text",description:"Etichetta del bottone",table:{category:"Box2",defaultValue:{summary:"CERCA"}}},placeholder:{control:"text",description:"Placeholder dell’input",table:{category:"Box2",defaultValue:{summary:"Testo da cercare..."}}},onClick:{action:"onClick",description:"Evento al click del button.",table:{disable:!0}}},args:{etichettaData:"GG/MM/AAAA",titoloBox:"Titolo box",descrizione:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi",descrizione2:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",etichettaLink:"Vai al link",etichettaInput:"CERCA",etichettaBottone:"CERCA",placeholder:"Testo da cercare..."},render:e=>{const l=b(e),t=document.createElement("div");t.innerHTML=l,t.querySelectorAll('[id^="cercaButton"]').forEach(o=>{o.addEventListener("click",e.onClick)});const i=document.createElement("main");return i.id="contenutoPrincipale",i.append(...Array.from(t.childNodes)),i}};var s,c,d;r.parameters={...r.parameters,docs:{...(s=r.parameters)==null?void 0:s.docs,source:{originalSource:`{
  argTypes: {
    etichettaData: {
      control: "text",
      description: "Formato data: GG/MM/AAAA",
      table: {
        category: "Box1",
        defaultValue: {
          summary: "GG/MM/AAAA"
        }
      }
    },
    titoloBox: {
      control: "text",
      description: "Titolo del box",
      table: {
        category: "Box1",
        defaultValue: {
          summary: "Titolo box"
        }
      }
    },
    descrizione: {
      control: "text",
      description: "Descrizione del box",
      table: {
        category: "Box1",
        defaultValue: {
          summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi"
        }
      }
    },
    descrizione2: {
      control: "text",
      description: "Descrizione del box 2",
      table: {
        category: "Box2",
        defaultValue: {
          summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna."
        }
      }
    },
    etichettaLink: {
      control: "text",
      description: "Etichetta del pulsante link",
      table: {
        category: "Box1",
        defaultValue: {
          summary: "Link button"
        }
      }
    },
    etichettaInput: {
      control: "text",
      description: "Etichetta del campo di input",
      table: {
        category: "Box2",
        defaultValue: {
          summary: "CERCA"
        }
      }
    },
    etichettaBottone: {
      control: "text",
      description: "Etichetta  del buttone",
      table: {
        category: "Box2",
        defaultValue: {
          summary: "CERCA"
        }
      }
    },
    placeholder: {
      control: "text",
      description: "Placeholder dell’input",
      table: {
        category: "Box2",
        defaultValue: {
          summary: "Testo da cercare..."
        }
      }
    },
    onClick: {
      action: "onClick",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    }
  },
  args: {
    etichettaData: "GG/MM/AAAA",
    titoloBox: "Titolo box",
    descrizione: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi",
    descrizione2: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
    etichettaLink: "Vai al link",
    etichettaInput: "CERCA",
    etichettaBottone: "CERCA",
    placeholder: "Testo da cercare..."
  },
  render: args => {
    // Genera l'HTML del box dashboard
    const dashboardBoxHTML = CreateDashboardBox(args);

    // Crea un contenitore temporaneo per il parsing dell'HTML
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = dashboardBoxHTML;

    // Trova il bottone con id "cercaButton"
    const button = tempDiv.querySelector("#cercaButton");

    // Aggiungi l'evento click se il bottone esiste
    if (button) {
      button.addEventListener("click", args.onClick);
    }

    // Crea il main element e inserisci il contenuto del box
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";

    // Inserisce tutto il contenuto del box, non solo il bottone
    mainElement.append(...Array.from(tempDiv.childNodes));
    return mainElement;
  }
}`,...(d=(c=r.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};var u,m,p;n.parameters={...n.parameters,docs:{...(u=n.parameters)==null?void 0:u.docs,source:{originalSource:`{
  argTypes: {
    etichettaData: {
      control: "text",
      description: "Formato data: GG/MM/AAAA",
      table: {
        category: "Box1",
        defaultValue: {
          summary: "GG/MM/AAAA"
        }
      }
    },
    titoloBox: {
      control: "text",
      description: "Titolo del box",
      table: {
        category: "Box1",
        defaultValue: {
          summary: "Titolo box"
        }
      }
    },
    descrizione: {
      control: "text",
      description: "Descrizione del box ",
      table: {
        category: "Box1",
        defaultValue: {
          summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi"
        }
      }
    },
    descrizione2: {
      control: "text",
      description: "Descrizione del box 2",
      table: {
        category: "Box2",
        defaultValue: {
          summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi"
        }
      }
    },
    etichettaLink: {
      control: "text",
      description: "Etichetta del pulsante link",
      table: {
        category: "Box1",
        defaultValue: {
          summary: "Link button"
        }
      }
    },
    etichettaInput: {
      control: "text",
      description: "Etichetta del campo di input",
      table: {
        category: "Box2",
        defaultValue: {
          summary: "CERCA"
        }
      }
    },
    etichettaBottone: {
      control: "text",
      description: "Etichetta del bottone",
      table: {
        category: "Box2",
        defaultValue: {
          summary: "CERCA"
        }
      }
    },
    placeholder: {
      control: "text",
      description: "Placeholder dell’input",
      table: {
        category: "Box2",
        defaultValue: {
          summary: "Testo da cercare..."
        }
      }
    },
    onClick: {
      action: "onClick",
      description: "Evento al click del button.",
      table: {
        disable: true
      }
    }
  },
  args: {
    etichettaData: "GG/MM/AAAA",
    titoloBox: "Titolo box",
    descrizione: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi",
    descrizione2: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
    etichettaLink: "Vai al link",
    etichettaInput: "CERCA",
    etichettaBottone: "CERCA",
    placeholder: "Testo da cercare..."
  },
  render: args => {
    // Genera l'HTML del box dashboard
    const carouselDashboardHTML = createCarouselDashboardBox(args);

    // Crea un contenitore temporaneo per il parsing dell'HTML
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = carouselDashboardHTML;

    // Trova tutti i bottoni con id che inizia per "cercaButton"
    const buttons = tempDiv.querySelectorAll('[id^="cercaButton"]');

    // Aggiungi l'evento click a ciascun bottone
    buttons.forEach(button => {
      button.addEventListener("click", args.onClick);
    });

    // Crea il main element e inserisci il contenuto del box
    const mainElement = document.createElement("main");
    mainElement.id = "contenutoPrincipale";

    // Inserisce tutto il contenuto del box, non solo il bottone
    mainElement.append(...Array.from(tempDiv.childNodes));
    return mainElement;
  }
}`,...(p=(m=n.parameters)==null?void 0:m.docs)==null?void 0:p.source}}};const v=["DashboardBox","CarouselBoxDashboard"];export{n as CarouselBoxDashboard,r as DashboardBox,v as __namedExportsOrder,h as default};
