ng-components-tsi 0.0.38 → 0.0.39

package/src/lib/ui/tables/table-detalle/table-detalle.component.html

@@ -1,220 +0,0 @@
-@if (withFiltro()) {
-<div class="col-12 mb-2 mt-2 d-flex justify-content-end align-items-center">
-    <label for="" class="form-label me-2 pt-2">Buscar</label>
-    <input type="text" class="form-control cw-250" (input)="textoDigitado($event)">
-</div>
-}
-<div class="table-container table-responsive"
-    [style.max-height]="altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''"
-    [style.max-height]="altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''">
-    <table #table class="table table-striped normal-table" [ngClass]="isDarkMode() ? 'table-dark' : ''">
-        <thead>
-            <tr class="shadow-sm">
-                @if (withCheckbox()) {
-                <th scope="col" class="text-center b-table w-min"
-                    [ngClass]="colorHeader()== 'normal' ? '' : 'header-normal'">
-                    <input type="checkbox" class="form-check-input fs-8 border border-secondary"
-                        [checked]="validaAllCheck()" (change)="allCheck($event)">
-                </th>
-                }
-
-                @if (withEditItem()) {
-                <th scope="col" class="text-center b-table w-min"
-                    [ngClass]="colorHeader()== 'normal' ? '' : 'header-normal'">
-                </th>
-                }
-
-                @if (customActions) {
-                <th scope="col" class="b-table w-min mwp-50"
-                    [ngClass]="colorHeader()== 'normal' ? '' : 'header-normal'"></th>
-                }
-
-                @for (column of columns(); track $index) {
-                @if (column.visible) {
-                <th scope="col" class="b-table" #thElement [title]="column.caption"
-                    [style.width]="widthDefault(column) + 'px'" [style.min-width]="widthDefault(column) + 'px'"
-                    [ngClass]="colorHeader()== 'normal' ? '' : 'header-normal'">
-                    {{ column.caption }}
-                </th>
-                }
-                }
-            </tr>
-        </thead>
-
-        <tbody>
-            @for (row of rowFilter(); track iRow; let iRow = $index) {
-            @let isLast = validaAccionDescri(iRow);
-            @let rowClass = getRowClass(row);
-            <tr [ngClass]="{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}"
-                [class]="rowClass" (click)="selectRow(identifier().length < 1 ? $index : row)"
-                [id]="identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))">
-
-                @if (withCheckbox()) {
-                <td scope="col" class="text-center b-table w-min" [class]="rowClass">
-                    @if(!resolveCell('checkbox', row)?.hidden){
-                    <input type="checkbox" class="form-check-input fs-8 border border-secondary my-0 py-0"
-                        [disabled]="!lastItemDisabled() ? false : validaLastRegistro($index)"
-                        [checked]="isItemSelected($index)" (change)="toogleItem($index, $event)">
-                    }
-                </td>
-                }
-
-                @if (withEditItem()) {
-                <td scope="col" class="text-start b-table w-min">
-                    <div class="d-flex align-items-center justify-content-center">
-                        <i (click)="validaEdit(iRow) ? editItem.emit(row) : null "
-                            class="fas fa-pen fs-7 px-2 py-2 my-1 rounded-2 text-secondary shadow-sm"
-                            [ngClass]="validaEdit(iRow) ? 'cursor-pointer' : ''" title="Editar articulo"></i>
-                    </div>
-                </td>
-                }
-
-                @if (customActions) {
-                <td class="text-center mwp-90 b-table w-min">
-                    <div class="d-flex justify-content-center align-items-center">
-                        <ng-container *ngTemplateOutlet="customActions; context: { $implicit: row }"></ng-container>
-                    </div>
-                </td>
-                }
-
-                @for (column of columns(); track $index) {
-                @if (column.visible) {
-                @switch (column.tipo) {
-
-                @case ('input-radio') {
-                <td scope="col" class="text-center b-table">
-                    <input type="radio" class="form-check-input fs-8 border border-secondary m-0 p-0"
-                        [disabled]="lastItemDisabled() && validaLastRegistro(iRow)" [checked]="selectedRadio() === iRow"
-                        (change)="clickRadio(iRow)">
-                </td>
-                }
-
-                @case ('fecha') {
-                <td class="b-table" [title]="row[column.fieldname] | date:'dd/MM/yyyy'"
-                    [ngClass]="row.situac == 'J' ? 'text-error':''">
-                    {{ row[column.fieldname] | date:'dd/MM/yyyy' }}
-                </td>
-                }
-
-                @case ('decimal') {
-                <td class="text-end b-table" [title]="limpiarNumero(row[column.fieldname]) | number:'1.2-2'"
-                    [ngClass]="row.situac == 'J' ? 'text-error':''">
-                    {{limpiarNumero(row[column.fieldname]) | number:'1.2-2'}}
-                </td>
-                }
-
-                @case ('list-select') {
-                <td class="text-center b-table" [title]="row[column.fieldname]">
-                    <div ngbDropdown class="d-inline-block" container="body">
-                        <div class="h-100 bg-sidebar d-flex align-items-center px-1">
-                            <button [disabled]="!isLast" class="border-0 bg-none"
-                                [ngClass]="!isLast ? 'text-muted' : 'text-input'" ngbDropdownToggle>
-                                {{row[column.fieldname]}}
-                            </button>
-                        </div>
-                        <div ngbDropdownMenu class="my-0 py-0">
-                            @for (item of column.lista; track $index; let last = $last) {
-                            <app-button [texto]="item.text"
-                                [extraClass]="($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')"
-                                [dropdownButton]="true" (accion)="item?.action(row,item.codigo)" />
-                            }
-                        </div>
-                    </div>
-                    <!-- <app-dropdown-menu [options]="column.lista" [disabled]="lastItemDisabled() ? false : !validaLastRegistro($index)" [buttonProperties]="{color:'none',texto:row[column.fieldname]}"/> -->
-                </td>
-
-                }
-
-                @case ('input') {
-                <td class="b-table" [title]="row[column.fieldname]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                    <input type="text" class="form-control" [(ngModel)]="row[column.fieldname]"
-                        (focus)="focusData(row[column.fieldname])"
-                        (blur)="!validarData(row[column.fieldname]) ? null : column?.blur(row)"
-                        (keyup.enter)="!validarData(row[column.fieldname]) ? null : column?.enter(row)"
-                        [disabled]="column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false">
-                </td>
-                }
-
-                @case ('input-date') {
-                <td class="b-table" [title]="row[column.fieldname]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                    <input type="date" class="form-control" [(ngModel)]="row[column.fieldname]"
-                        (blur)="column?.blur(row)" (keyup.enter)="column?.enter(row)"
-                        [disabled]="column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false">
-                </td>
-                }
-
-                @case ('input-etiqueta') {
-                <td class="b-table" [title]="row[column.fieldname]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                    <!-- <app-doble-input-buscar [oneinput]="true" type="etiqueta" [withDetails]="true"
-                        [(valuedes)]="row[column.fieldname]" [(disabled)]="row.disabledEtiqueta"
-                        [auxiliarData]="{tipinv:row.tipinv,codart:row.codart,codtit:row.codtit,codalm:row.codalm}"
-                        (emitirAdicionalData)="manejarDataEtiqueta($event,row)"
-                        (disabledChange)="limpiarEtiqueta($event,row)" [withBuscar2]="true"
-                        [allDisabled]="row.disabledAll ?? false" /> -->
-                </td>
-                }
-
-                @case ('input-afecta') {
-                <td class="b-table" [title]="row[column.fieldname]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                    <!-- <app-doble-input-buscar [oneinput]="true" type="tafecta" [(valuecod)]="row[column.fieldname]"
-                        [(disabled)]="row.disabledEtiqueta" [(valuedes)]="row.dtipafec" viewInput="cod"
-                        [withBuscar]="true" [allDisabled]="row.disabledAll ?? false" /> -->
-                </td>
-                }
-
-                @case ('input-number') {
-                <td class="b-table" [title]="row[column.fieldname]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                    <input type="text" class="form-control text-end"
-                        [ngClass]="(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')"
-                        [(ngModel)]="row[column.fieldname]" (blur)="validarFunction(column.blur)?.(row)"
-                        [disabled]="row.disabledAll ?? false" onlyNumber>
-                </td>
-                }
-
-                @case ('input-decimal') {
-                <td class="b-table" [title]="row[column.fieldname]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                    <input type="text" class="form-control text-end w-100"
-                        [ngClass]="(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')"
-                        [(ngModel)]="row[column.fieldname]" (blur)="validarFunction(column.blur)?.(row)"
-                        [appDecimal]="column.pipe" [readonly]="column.readonly ? column.readonly(row) : false"
-                        [disabled]="row.disabledAll ?? generateKeyDisabled(row,column)" onlyNumber>
-                </td>
-                }
-
-                @case ('input-select') {
-                <td class="b-table" [title]="row[column.fieldname]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                    <select class="form-select" name="{{`cbo_lista_${row[column.fieldname]}`}}"
-                        id="{{`cbo_lista_${row[column.fieldname]}`}}" [(ngModel)]="row[column.fieldname]"
-                        (change)="validarFunction(column.change)?.(row)"
-                        [disabled]="column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false">
-                        @for (item of column.lista; track $index) {
-                        <option [value]="item[column.keyCodigo]"> {{ item[column.keyDescri]}} </option>
-                        }
-                    </select>
-                </td>
-                }
-
-                @case ('stock') {
-                <td class="b-table text-center" [title]="row[column.fieldname] ? row[column.fieldname] : 'Sin Stock'">
-                    @if (limpiarNumero(row[column.fieldname]) > 0) {
-                    {{row[column.fieldname]}}
-                    }@else {
-                    <i class="fas fa-times text-danger fw-bold fs-4"></i>
-                    }
-                </td>
-                }
-
-                @default {
-                <td class="b-table" [title]="row[column.fieldname]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                    <span [ngClass]="isLast ? 'cursor-pointer' : ''"
-                        (click)="isLast ? column?.clic() : null">{{row[column.fieldname]}}</span>
-                </td>
-                }
-                }
-                }
-                }
-            </tr>
-            }
-        </tbody>
-    </table>
-</div>

package/src/lib/ui/tables/table-detalle/table-detalle.component.scss

@@ -1,135 +0,0 @@
-thead {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.table-container {
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  display: block;
-  white-space: nowrap;
-}
-
-.table-blank {
-  --bs-table-bg-state: white !important
-}
-
-.header-normal {
-  background: rgb(206, 206, 206) !important;
-}
-
-.normal-table thead tr th {
-  font-size: 11px;
-  text-align: start;
-  font-weight: bold;
-  max-width: 220px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.normal-table tbody tr {
-  height: 30px;
-}
-
-.normal-table tbody tr td {
-  font-size: 11px;
-  vertical-align: middle;
-  font-weight: 500;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.normal-table thead {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-@media (max-width:1600px) {
-  .normal-table tbody tr td {
-    font-size: 9px;
-  }
-
-  .normal-table thead tr th {
-    font-size: 10px;
-  }
-}
-
-.input-error {
-  border: 1px solid rgb(203, 0, 0);
-  color: rgb(203, 0, 0) !important;
-  //animation: aura-pulse 1.5s ease-out infinite;
-  position: relative;
-  z-index: 1;
-}
-
-@keyframes aura-pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(203, 0, 0, 0.7);
-  }
-
-  70% {
-    box-shadow: 0 0 0 5px rgba(203, 0, 0, 0);
-  }
-
-  100% {
-    box-shadow: 0 0 0 0 rgba(203, 0, 0, 0);
-  }
-}
-
-.w-min {
-  max-width: 40px !important;
-  width: 40px !important;
-  min-width: 40px !important;
-}
-
-.bg-red {
-  background-color: red;
-
-  i,
-  span,
-  button,
-  td,
-  input,
-  select {
-    color: red !important;
-  }
-}
-
-.bg-red-input {
-  color: red !important;
-}
-
-.bg-blue {
-  background-color: blue;
-
-  i,
-  span,
-  button,
-  td,
-  input,
-  select {
-    color: blue !important;
-  }
-}
-
-.bg-blue-input {
-  color: blue !important;
-}
-
-.bg-yellow {
-  background-color: yellow;
-}
-
-.bg-green {
-  background-color: greenyellow;
-}
-
-.bg-initial {
-  background-color: initial;
-}

package/src/lib/ui/tables/table-detalle/table-detalle.component.ts

@@ -1,336 +0,0 @@
-import { CommonModule, DatePipe, DecimalPipe } from '@angular/common';
-import { Component, computed, ContentChild, inject, input, linkedSignal, model, output, signal, TemplateRef } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { ButtonComponent } from '../../forms/button/button.component';
-import { DecimalDirective } from '../../../directivas/inputs/decimal.directive';
-import { OnlyNumberDirective } from '../../../directivas/inputs/only-number.directive';
-import { CellRender, CellRendered } from '../../../models/cell-rendered';
-import { cleanNumber } from 'shared-tsi';
-
-@Component({
-  selector: 'app-table-detalle',
-  imports: [FormsModule, CommonModule, DecimalDirective, OnlyNumberDirective, NgbDropdownModule, ButtonComponent],
-  templateUrl: './table-detalle.component.html',
-  styleUrl: './table-detalle.component.scss',
-  providers: [DatePipe, DecimalPipe]
-})
-export class TableDetalleComponent {
-
-  private datePipe = inject(DatePipe)
-  private decimalPipe = inject(DecimalPipe)
-
-  selectedRow = model<any>(null)
-  identifier = input<string[]>([])
-  altoContainer = input<number>()
-  withFiltro = input<boolean>(false)
-  busqueda = model<string>('')
-  rows = input<any[]>([])
-  columns = input<any[]>([])
-  lastItemDisabled = input<boolean>(true)
-  position = input<'block' | 'flex'>('flex')
-  withCheckbox = input<boolean>(true)
-  withEditItem = input<boolean>(false)
-
-  colorHeader = input<'normal' | 'light'>('normal')
-
-  @ContentChild('customActions', { static: false }) customActions!: TemplateRef<any>
-
-  valueTemporal: any
-
-  deleteItems = model<number[]>([])
-  selectItems = model<any[]>([])
-
-  isDarkMode = input<boolean>(false)
-  selectedRadio = model<number | null>(null);
-
-  editItem = output<any>()
-
-  rendered = input<CellRendered[]>([])
-
-  concatenarValue(obj: any, value: string[]) {
-    let result = ''
-    value.forEach(el => {
-      result += obj[el]
-    })
-    return result
-  }
-
-  selectRow(index: any) {
-    if (this.identifier().length < 1) {
-      return this.selectedRow.set(index)
-    }
-    this.selectedRow.set(this.concatenarValue(index, this.identifier()))
-  }
-
-  getSituacionNumberFromColumns(row: any, columns: any[]): number {
-    const situacionColumn = columns.find(col => col.type == 'situacion_number');
-    if (situacionColumn) {
-      return row[situacionColumn.prop] || 0;
-    }
-    return 0
-  }
-
-  focusData(data: any) {
-    this.valueTemporal = data
-  }
-
-  validarData(value: any) {
-    if (this.valueTemporal == value) {
-      return false
-    }
-    this.valueTemporal = null
-    return true
-  }
-
-  // useSelectionMode() {
-  //   return this.selectItems() != undefined
-  // }
-
-  toogleItem(index: number, event: Event) {
-    const input = event.target as HTMLInputElement
-    if (input.checked) {
-      this.deleteItems.update(de => [...(de || []), index])
-    } else {
-      this.deleteItems.update(de => (de || []).filter(d => d != index))
-    }
-
-
-    // if (this.useSelectionMode()) {
-    //   if (input.checked) {
-    //     this.selectItems.update(items => [...(items || []), row])
-    //   } else {
-    //     this.selectItems.update(items => (items || []).filter(item =>
-    //       this.identifier().length > 0
-    //         ? this.concatenarValue(item, this.identifier()) != this.concatenarValue(row, this.identifier())
-    //         : item != row
-    //     ))
-    //   }
-    // } else {
-    //   if (input.checked) {
-    //     this.deleteItems.update(de => [...(de || []), index])
-    //   } else {
-    //     this.deleteItems.update(de => (de || []).filter(d => d != index))
-    //   }
-    // }
-  }
-
-  allCheck(event: Event) {
-    const input = event.target as HTMLInputElement
-
-    if (input.checked) {
-      const total = this.rows().length
-      if (this.lastItemDisabled()) {
-        this.deleteItems.set(Array.from({ length: total - 1 }, (_, i) => i))
-      } else {
-        this.deleteItems.set(Array.from({ length: total }, (_, i) => i))
-      }
-    } else {
-      this.deleteItems.set([])
-    }
-
-    // if (!this.useSelectionMode()) {
-    //   if (input.checked) {
-    //     const total = this.rows().length
-    //     if (this.lastItemDisabled()) {
-    //       this.deleteItems.set(Array.from({ length: total - 1 }, (_, i) => i))
-    //     } else {
-    //       this.deleteItems.set(Array.from({ length: total }, (_, i) => i))
-    //     }
-    //   } else {
-    //     this.deleteItems.set([])
-    //   }
-    // }
-    // else {
-    //   if (input.checked) {
-    //     let itemsToSelect = [...this.rows()]
-    //     if (this.lastItemDisabled()) {
-    //       itemsToSelect = itemsToSelect.slice(0, -1)
-    //     }
-    //     this.selectItems.set(itemsToSelect)
-    //   } else {
-    //     this.selectItems.set([])
-    //   }
-    // }
-  }
-
-  validaAllCheck() {
-    const total = this.rows().length
-    if (this.lastItemDisabled() && total > 1) return this.deleteItems().length == (total - 1)
-    if (this.lastItemDisabled() && total <= 1) return false
-    return this.deleteItems().length == total
-    // if (!this.useSelectionMode()) {
-    //   const total = this.rows().length
-    //   if (this.lastItemDisabled() && total > 1) return this.deleteItems().length == (total - 1)
-    //   if (this.lastItemDisabled() && total <= 1) return false
-    //   return this.deleteItems().length == total
-    // }
-    // else {
-    //   const totalItems = this.lastItemDisabled()
-    //     ? this.rows().length - 1
-    //     : this.rows().length
-    //   return this.selectItems().length === totalItems && totalItems > 0
-    // }
-  }
-
-  isItemSelected(index: number): boolean {
-    return this.deleteItems().includes(index)
-    // if (!this.useSelectionMode()) {
-    //   return this.deleteItems().includes(index)
-    // }
-    // else {
-    //   const row = this.rows()[index]
-    //   return this.selectItems().some(item =>
-    //     this.identifier().length > 0
-    //       ? this.concatenarValue(item, this.identifier()) === this.concatenarValue(row, this.identifier())
-    //       : item === row
-    //   )
-    // }
-  }
-
-  clickRadio(index: number) {
-    if (this.lastItemDisabled() && this.validaLastRegistro(index)) {
-      return
-    }
-
-    this.selectedRadio.set(index)
-  }
-
-  validaLastRegistro = (index: number) => {
-    const registros = (this.rows() ?? []).length
-    return registros == index + 1
-  }
-
-  limpiarNumero(numero: any) {
-    if (typeof numero == 'string') return cleanNumber(numero)
-    if (!numero) return 0
-    return numero
-  }
-
-  widthDefault = (column: any) => {
-    if ((column.tipo == 'input' || column.tipo == 'input-number' || column.tipo == 'input-decimal') && column.width < 100) {
-      return 100
-    }
-    return column.width
-  }
-
-  manejarDataEtiqueta(data: any, row: any) {
-    row.etiqueta = data.ETIQUETA
-    row.fvenci = data.FVENCI
-    row.ancho = data.ANCHO
-    row.lote = data.LOTE
-    row.acabado = data.ACABADO
-    row.nrocarrete = data.NROCARRETE
-    row.chasis = data.CHASIS
-    row.motor = data.MOTOR
-    row.opnumdoc = data.OPNUMDOC
-  }
-
-  limpiarEtiqueta(event: boolean, row: any) {
-    if (!event) {
-      row = { ...row, etiqueta: '', fvenci: '', ancho: null, lote: '', acabado: '', nrocarrete: '', chasis: '', motor: '', opnumdoc: '' }
-    }
-  }
-
-  generateKeyDisabled = (item: any, column: any) => {
-    const generate = `disabled${column.fieldname}`
-    return item[generate] ?? false
-  }
-
-  validaAccionDescri = (index: number) => {
-    const rows = (this.rows() ?? []).length - 1
-    return this.lastItemDisabled() && index == rows
-  }
-
-  validarFunction = (value: any) => {
-    if (typeof value === 'function') return value
-    return null;
-  }
-
-  validaEdit(positi: number) {
-    if (this.lastItemDisabled() && this.validaLastRegistro(positi)) return false
-    return true
-  }
-
-  disabledColumn = (row: any, column: any) => {
-    if (row.disabledAll) return true;
-    if (column.disabled) return true;
-    return false
-  }
-
-  resolveCell(col: string, row: any): CellRender {
-    const value = row[col]
-    const r = this.rendered().find(r => r.matches(col, value, row))
-    return r ? r.render(value, row) : null
-  }
-
-  getRowClass(row: any): string {
-    const match = this.rendered()?.find(r => r.matches('*', null, row))
-    return match ? match.render(null, row)?.class || '' : ''
-  }
-
-  rowFilter = computed(() => {
-    const term = this.busqueda().toLowerCase()
-    const currentRows = this.rows?.() || []
-    return currentRows.filter(item => this.filtraItem(item, term))
-  })
-
-  getTipoCampo(fieldname: string): string {
-    const columna = this.columns().find(col => col.fieldname == fieldname)
-    return columna?.tipo ?? 'string'
-  }
-
-  private filtraItem(item: any, term: string): boolean {
-    const columnasActivas = Object.entries(this.filtrarColumnas())
-      .filter(([_campo, activo]) => activo)
-
-    return columnasActivas.some(([campo]) => {
-      let valor = item[campo]
-      const tipo = this.getTipoCampo(campo)
-
-      switch (tipo) {
-        case 'fecha':
-          valor = this.datePipe.transform(valor, 'dd/MM/yyyy') ?? ''
-          break
-        case 'decimal':
-          valor = this.decimalPipe.transform(valor, '1.2-2') ?? ''
-          break
-        case 'check':
-          valor = valor ? 'Sí' : 'No'
-          break
-        default:
-          valor = (valor ?? '').toString()
-      }
-
-      return valor.toLowerCase().includes(term)
-    })
-  }
-
-  filtrarColumnas = linkedSignal(() => {
-    const columns = this.columns()
-    const filtro: { [caption: string]: boolean } = {}
-    columns.forEach((col) => {
-      if (col.fieldname) {
-        filtro[col.fieldname] = true
-      }
-    })
-    return filtro
-  })
-
-  textoDigitado(event: Event) {
-    const value = (event.target as HTMLInputElement).value
-    this.busqueda.set(value)
-  }
-
-  getHighlight(text: any): string {
-    if (text == null) {
-      text = ''
-    }
-    if (!this.busqueda()) return text
-    if (typeof text !== 'string') {
-      text = text.toString()
-    }
-    const regex = new RegExp(`(${this.busqueda()})`, 'gi')
-    return text?.replace(regex, '<mark>$1</mark>')
-  }
-}