const l=()=>`
    <div class="row">
      <div class="form-group col-xs-6 col-md-6 col-lg-6 noPaddingLeft">
        <label class="control-label" for="form-input-1">Valore di Ricerca (Colonna 4)</label>
        <input type="text" class="form-control" id="form-input-1" placeholder="placeholder" value="">
      </div>
      <div class="col-xs-6 col-md-6 col-lg-6 mt-50" style="margin-top:24px">
        <button type="button" class="btn btn-primary pull-left" id="search-btn">Cerca</button>
      </div>
    </div>
  
    <div class="row">
      <div class="tabella table-responsive">
        <table id="tabella-base" class="table display tabella-base">
          <caption class="marginBottom">Risultati ricerca</caption>
          <thead>
            <tr>
              <th><span class="thLabel">Colonna 1</span></th>
              <th><span class="thLabel">Colonna 2</span></th>
              <th><span class="thLabel">Colonna 3</span></th>
              <th><span class="thLabel">Colonna 4</span></th>
              <th>Azioni</th>
            </tr>
          </thead>
          <tbody id="table-body">
            <tr>
              <td>R1C1</td>
              <td>R1C2</td>
              <td>R1C3</td>
              <td>R1C4</td>
              <td class="td-icons">
                <button type="button" class="col-xs-8" data-toggle="tooltip" data-original-title="Rimuovi elemento">
                  <span class="fa fa-trash-alt"></span>
                </button>
              </td>
            </tr>
            <tr>
              <td>R2C1</td>
              <td>R2C2</td>
              <td>R2C3</td>
              <td>R2C4</td>
              <td class="td-icons">
                <button type="button" class="col-xs-8" data-toggle="tooltip" data-original-title="Rimuovi elemento">
                  <span class="fa fa-trash-alt"></span>
                </button>
              </td>
            </tr>
            <tr>
              <td>R3C1</td>
              <td>R3C2</td>
              <td>R3C3</td>
              <td>R3C4</td>
              <td class="td-icons">
                <button type="button" class="col-xs-8" data-toggle="tooltip" data-original-title="Rimuovi elemento">
                  <span class="fa fa-trash-alt"></span>
                </button>
              </td>
            </tr>
            <tr>
              <td>R4C1</td>
              <td>R4C2</td>
              <td>R4C3</td>
              <td>R4C4</td>
              <td class="td-icons">
                <button type="button" class="col-xs-8" data-toggle="tooltip" data-original-title="Rimuovi elemento">
                  <span class="fa fa-trash-alt"></span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  
    <script>
      document.getElementById('search-btn').addEventListener('click', function() {
        const searchValue = document.getElementById('form-input-1').value.toLowerCase();
        const rows = document.querySelectorAll('#table-body tr');
  
        rows.forEach(row => {
          const col4Value = row.cells[3].textContent.toLowerCase();
          if (col4Value.includes(searchValue)) {
            row.style.display = ''; // Mostra la riga
          } else {
            row.style.display = 'none'; // Nasconde la riga
          }
        });
      });
    <\/script>
    `,d={title:"Patterns/Lookup Widget",tags:["autodocs"],decorators:[s=>`<main id="contenutoPrincipale">${s()}</main>`]},t={name:"Lookup Widget",render:()=>l()};var a,o,e;t.parameters={...t.parameters,docs:{...(a=t.parameters)==null?void 0:a.docs,source:{originalSource:`{
  name: "Lookup Widget",
  render: () => {
    return CreateLookupWidget();
  }
}`,...(e=(o=t.parameters)==null?void 0:o.docs)==null?void 0:e.source}}};const r=["Primary"];export{t as Primary,r as __namedExportsOrder,d as default};
