keevo-components 2.0.107 → 2.0.108

package/src/lib/components/kv-table-edit/kv-table-edit.component.html

@@ -1,913 +0,0 @@
-<div class="card kv-table-edit-container" id="tamanhotabela" [style.font-size]="'1px'">
-  <p-toast></p-toast>
-
-  @if(filtrosAvancados){
-    <p-panel
-      header="Filtros avançados"
-      [toggleable]="true"
-      [collapsed]="true"
-      (collapsedChange)="collapsed = !collapsed"
-      [style]="{ 'margin-bottom': '2px' }"
-    >
-      <ng-template pTemplate="headericons">
-        @if (!collapsed) {
-          <i class="pi pi-filter"></i>
-          }
-          <!-- Ícone quando o painel está aberto -->
-          @if (collapsed) {
-          <i class="pi pi-minus"></i>
-          }
-          <!-- Ícone quando o painel está fechado -->
-      </ng-template>
-      <ng-content></ng-content>
-    </p-panel>
-  }
-
-  <p-contextMenu #cm [model]="itemsContextMenu"></p-contextMenu>
-  <p-table
-    #te
-    [editMode]="editMode()"
-    (onEditComplete)="onEditComplete($event)"
-    (onEditInit)="onEditInit($event)"
-    [reorderableColumns]="config.reorderableColumns || false"
-    *ngIf="config"
-    [value]="dataSource"
-    [dataKey]="config.dataKey"
-    [columns]="visibleColumns"
-    [scrollable]="true"
-    appendTo="body"
-    [styleClass]="selectedSize.class"
-    [(selection)]="selectedItems"
-    [rowSelectable]="isRowSelectable"
-    [globalFilterFields]="globalFilterFields"
-    [rows]="rows"
-    [paginator]="paginator"
-    [rowsPerPageOptions]="rowsPerPageOptions"
-    [showCurrentPageReport]="true"
-    currentPageReportTemplate="{first} - {last} de {totalRecords}"
-    (selectionChange)="selectionChange($event)"
-    [rowHover]="true"
-    [totalRecords]="totalRecords"
-    [lazy]="config.lazy"
-    (onLazyLoad)="paginate($event)"
-    [groupRowsBy]="config.fieldGroup"
-    paginatorDropdownAppendTo="body"
-    [showFirstLastIcon]="showFirstLastIcon"
-    [pageLinks]="pageLinksOptions"
-    [scrollable]="isTableScrollable"
-    [scrollHeight]="scrollHeight"
-    [rowTrackBy]="rowTrackBy"
-    [(contextMenuSelection)]="selectedProduct"
-    [contextMenu]="isEditableTable() ? cm : null"
-  >
-    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-
-    @if (config?.enableCation || enableSizes()){
-      <ng-template pTemplate="caption">
-        <div
-          class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 p-0 m-0"
-        >
-          <div class="col-12 flex flex-column">
-            @if (config.title) {
-            <div class="text-md font-bold my-3">
-              {{ config.title }}
-            </div>
-            } @if (config.subtitle) {
-            <div class="text-sm mb-4 font-medium">
-              {{ config.subtitle }}
-            </div>
-            }
-          </div>
-
-          <div
-            class="flex flex-row align-items-center md:col-6 lg:col-4 {{
-              tamanhoTela < 768 ? 'col-10' : 'col-12'
-            }} mt-1 mb-2 gap-1 p-0"
-          >
-          
-            @if (config.enableFilter) {
-              <!-- <span class="p-input-icon-left">
-                <i class="pi pi-search text-sm"></i>
-    
-                <input
-                  pInputText
-                  pAutoFocus
-                  [autofocus]="true"
-                  type="text"
-                  (input)="onGlobalFilter(te, $event)"
-                  placeholder="Pesquisar..."
-                  class="h-1rem"
-                  autocomplete="off"
-                />
-              </span> -->
-
-               <input
-                  pAutoFocus
-                  pInputText
-                  [autofocus]="tamanhoTela > 800"
-                  type="text"
-                  (input)="onGlobalFilter(te, $event)"
-                  [placeholder]="'Pesquisar...'"
-                  autocomplete="off"
-                  #inputField
-                  class="text-sm col-6 "
-                />
-              }
-
-              @if(enableSizes()){
-                <div class="sizes-controls">
-                  <kv-button 
-                    [severity]="'tertiary'"
-                    label="Tamanho"
-                    [icon]="'match_case'"
-                    [pTooltip]="''"
-                    size="small"
-                    [popup]="true"
-                    [iconPosition]="'left'"
-                 
-                    (click)="menu.toggle($event)"
-                  >
-                  </kv-button>
-
-                  <p-tieredMenu
-                    [style]="{ 'font-size': '0.7rem' }"
-                    styleClass="menuSizes"
-                    appendTo="body"
-                    #menu
-                    [model]="sizes"
-                    [popup]="true"
-                  >
-                    <ng-template let-item pTemplate="item">
-                      <div
-                        class="cursor-pointer flex gap-2 align-items-center pl-1 m-2 menu-sizes"
-                        (click)="item.command()"
-                      >
-                        @if(this.selectedSize.size != item.size){
-                          <div
-                          class="tag"
-                          [style.background-color]="'#EAEAEA'"
-                        ></div>
-                        }
-                       
-                        @if(this.selectedSize.size == item.size){
-                          <div
-                          class="tag"
-                          [style.background-color]="'#1DA750'"
-                        ></div>
-                        }
-                        
-                        {{ item.label }}
-                      </div>
-                    </ng-template>
-                  </p-tieredMenu> 
-              
-                  <!-- <kv-button (click)="menu.toggle($event)"
-                    [severity]="'tertiary'"
-                    label="Aa"
-                    [pTooltip]="'Tamanho da fonte'"
-                    size="small"
-                  >
-                  </kv-button>
-
-                 
-                  <p-tieredMenu
-                    [style]="{ 'font-size': '0.7rem' }"
-                    styleClass="menuSizes"
-                    appendTo="body"
-                    #menu
-                    [model]="sizes"
-                    [popup]="true"
-                  >
-                    <ng-template let-item pTemplate="item">
-                      <div
-                        class="cursor-pointer flex gap-2 align-items-center pl-1 m-2 menu-sizes"
-                        (click)="item.command()"
-                      >
-                        @if(this.selectedSize.size != item.size){
-                          <div
-                          class="tag"
-                          [style.background-color]="'#EAEAEA'"
-                        ></div>
-                        }
-                       
-                        @if(this.selectedSize.size == item.size){
-                          <div
-                          class="tag"
-                          [style.background-color]="'#1DA750'"
-                        ></div>
-                        }
-                        
-                        {{ item.label }}
-                      </div>
-                    </ng-template>
-                  </p-tieredMenu> -->
-                </div> 
-              }
-              @if(enableDisplayMode()) {
-
-                 @if(enableDisplayMode()){
-                   <kv-button  
-                    [label]="'Exibir'"
-                    [iconPosition]="'left'"
-                   
-                    [pTooltip]="''"
-                    [severity]="'tertiary'"
-                    [popup]="true"
-                    [icon]="'grid_view'"
-                    (click)="menuDisplay.toggle($event)"
-                    size="small"
-                  ></kv-button>
-
-                  <p-tieredMenu
-                    [style]="{ 'font-size': '0.7rem' }"
-                    appendTo="body"
-                    #menuDisplay
-                    [model]="actionsDisplayMode"
-                    [popup]="true"
-                  >
-                    <ng-template let-item pTemplate="item">
-                      <div
-                        class="cursor-pointer flex gap-2 align-items-center pl-1 m-2 p-2"
-                        (click)="item.command()"
-                      >
-                      
-                        <i [ngClass]="item.icon" class="text-sm"></i>
-                        {{ item.label }}
-                      </div>
-                    </ng-template>
-                  </p-tieredMenu>
-              }
-           
-                  <!-- <kv-button  
-                  label=""
-                  icon="list"
-                  [severity]="selectedDisplayMode === 'list' ? 'secondary' : 'tertiary'"
-                  size="small"
-                  (click)="setDisplayMode('list')"
-                  pTooltip="Visão Simplificada"
-                />
-
-                <kv-button  
-                  label=""
-                  icon="table"
-                  [severity]="selectedDisplayMode === 'details' ? 'secondary' : 'tertiary'"
-                  size="small"
-                  (click)="setDisplayMode('details')"
-                  pTooltip="Visão Detalhada"
-                /> -->
-             
-              }
-
-
-              <!-- @if(enableDisplayMode()){
-                   <kv-button  
-                    [label]="'Exibir'"
-                    [iconPosition]="'right'"
-                    [pTooltip]="'Modo de exibição'"
-                    [severity]="'tertiary'"
-                    [popup]="true"
-                    [items]="actionsDisplayMode"
-                    size="small"
-                  />
-
-            
-              } -->
-          </div>
-
-          @if(isEditing){
-            <span class="text-aviso">
-              Tabela em modo de edição
-            </span>
-          }
-         
-          <div class="flex flex-row col-2 justify-content-end gap-2 p-0">
-            @for (action of config.actionsLote; track i; let i = $index) {
-              @if(!isEditing){
-                <div class="flex align-items-center justify-content-center">
-                  @if ((selectedItems.length > 0 || action.showAcoesLote) &&
-                  (getOrExecute(action.visible, selectedItems) ?? true)) {
-                  <kv-button
-                    (onClick)="action?.command(); activeItemLote(selectedItems)"
-                    [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
-                    [tooltipPosition]="
-                      (getOrExecute(action.tooltip, selectedItems)?.length ??
-                        0 > 7) &&
-                      config.actionsLote &&
-                      i == config.actionsLote.length - 1
-                        ? 'left'
-                        : 'bottom'
-                    "
-                    [disabled]="getOrExecute(action.disabled, selectedItems) || false"
-                    [icon]="getOrExecute(action.icon, selectedItems)"
-                    [severity]="action.severity || 'tertiary'"
-                    size="small"
-                  />
-                  }
-                </div>
-              }
-            }
-
-            @if (isEditableTable() && !hideBtnEdit()) {
-              <div>
-                <kv-button
-                  (click)="this.isEditing = !this.isEditing"
-                  [pTooltip]="!isEditing ? 'Habilitar Edição' : 'Desabilitar Edição'"
-                  [tooltipPosition]="'left'"
-                  [severity]="'tertiary'"
-                  [icon]="'edit_square'"
-                  size="small"
-                >
-                </kv-button>
-              </div>
-            }
-          </div>
-
-          <!---------------->
-          
-        </div>
-      </ng-template>
-    }
-    <ng-template pTemplate="header" let-columns>
-      <tr>
-        @if(config.enableSelect && !isEditing){
-          <th
-          [class]="selectedSize.class + 'th'"
-          >
-            <p-tableHeaderCheckbox
-              (click)="activeItemLote(selectedItems)"
-            ></p-tableHeaderCheckbox>
-          </th>
-        }
-        @for(col of columns; track $index){
-          <th
-            [pSortableColumn]="col.field"
-            [pSortableColumnDisabled]="col.sortable === false"
-            [style.min-width]="col.width * selectedSize.size + 'px'"
-            pReorderableColumn
-            [class]="selectedSize.class + 'th'"
-        
-          >
-          <div
-            [class]="
-              centralizarColunas(col) && alignColunasHeader(col) == ''
-                ? 'flex flex-row justify-content-center'
-                : 'flex flex-row'
-            "
-            [style]="alignColunasHeader(col)"
-          >
-            <span class="text-xs font-medium">{{ col.header }}</span>
-            @if(col.sortable === true) {
-                <p-sortIcon [field]="col.field"></p-sortIcon>
-            }
-            @if(col.headerTooltip){
-              <span
-                class="material-symbols-outlined flex align-items-center"
-                [pTooltip]="col.headerTooltip"
-              >
-                info
-              </span>
-            }
-           
-          </div>
-        </th>
-        }
-      
-       @if(!isEditing && config.actions && config.actions.length > 0){
-        <th></th>
-       }
-
-       @if(isEditableTable() && this.editMode() == 'row'){
-        <th
-          id="th-edit"
-          style="width: 20px"
-        >
-          Editar
-        </th>
-       }
-       
-      </tr>
-    </ng-template>
-
-
-    
-    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-
-    <ng-template pTemplate="body"
-      let-rowData
-      let-editing="editing"
-      let-ri="rowIndex"
-      let-columns="columns"
-      let-rowgroup="rowgroup"
-      let-rowspan="rowspan"
-    >
-      <tr
-        [pEditableRow]="rowData"
-        [pEditableRowDisabled]="false"
-        [pContextMenuRow]="{rowData, editing}"
-        [class]="selectedSize.class + '-tr'"
-        class="tr-td"
-        (dblclick)="doubleClick($event, rowData)"
-      >
-      @if(config.enableSelect && !isEditing){
-        <td
-        [style]="applyStyle(rowData, { field: 'check-box', header: '' })"
-        >
-        
-          <p-tableCheckbox
-            class="check-edit-list"
-            [value]="rowData"
-            [disabled]="isDisabledCheckbox(rowData)"
-            (click)="activeItemLote(selectedItems)"
-          ></p-tableCheckbox>
-        </td>
-      }
-        @for (col of columns; track i; let i = $index){
-          <ng-container>
-            <!-- FIXME: Testar a implementação abaixo e mesaclar as duas formas -->
-  
-            <ng-template #templateInput let-rowData="rowData" let-col="col">
-              <ng-container *ngIf="isEditing; else templatevisualedicao">
-                <ng-container [ngSwitch]="col.fieldControlType">
-                  <ng-container *ngSwitchCase="'text'">
-                    <div [style.width]="col.width" class="grid formgrid p-fluid">
-                      <kv-input-text
-                        [disabled]="isDisableEditRowCellFunction(rowData, col)"
-                        class="cellControl col"
-                        [(ngModel)]="rowData[col.field]"
-                        [required]="col.required ?? true"
-                      ></kv-input-text>
-                    </div>
-                  </ng-container>
-  
-                  <ng-container *ngSwitchCase="'number'">
-                    <div [style.width]="col.width" class="grid formgrid p-fluid">
-                      <kv-input-number
-                        [disabled]="isDisableEditRowCellFunction(rowData, col)"
-                        class="cellControl col"
-                        [(ngModel)]="rowData[col.field]"
-                        [required]="col.required ?? true"
-                      ></kv-input-number>
-                    </div>
-                  </ng-container>
-  
-                  <ng-container *ngSwitchCase="'mask'">
-                    <div [style.width]="col.width" class="grid formgrid p-fluid">
-                      <kv-input-mask
-                        [disabled]="isDisableEditRowCellFunction(rowData, col)"
-                        class="cellControl col"
-                        [mask]="col.mask"
-                        [required]="col.required ?? true"
-                        [(ngModel)]="rowData[col.field]"
-                      ></kv-input-mask>
-                    </div>
-                  </ng-container>
-  
-                  <ng-container *ngSwitchCase="'switch'">
-                    <div [style.width]="col.width" class="grid formgrid p-fluid">
-                      <kv-switch
-                        [disabled]="isDisableEditRowCellFunction(rowData, col)"
-                        class="cellControl col"
-                        [(ngModel)]="rowData[col.field]"
-                      ></kv-switch>
-                    </div>
-                  </ng-container>
-  
-                  <ng-container *ngSwitchCase="'calendar'">
-                    <div [style.width]="col.width">
-                      <div
-                        [style.width]="col.width"
-                        class="grid formgrid p-fluid"
-                      >
-                        <kv-input-calendar
-                          class="cellControl col"
-                          [(ngModel)]="rowData[col.field]"
-                        ></kv-input-calendar>
-                      </div>
-                    </div>
-                  </ng-container>
-                  <ng-container *ngSwitchCase="'dropdown'">
-                    <div [style.width]="col.width" class="grid formgrid p-fluid">
-                      <p-dropdown
-                        [disabled]="isDisableEditRowCellFunction(rowData, col)"
-                        class="cellControl col"
-                        appendTo="body"
-                        [panelStyle]="{ 'font-size': '0.75rem' }"
-                        [optionLabel]="col.fieldDropDownControl.descricaoobjeto"
-                        [optionValue]="col.fieldDropDownControl.idobjeto"
-                        [options]="
-                          col.fieldDropDownControl.fieldControlDropdownSource
-                        "
-                        [(ngModel)]="rowData[col.field]"
-                      >
-                      </p-dropdown>
-                    </div>
-                  </ng-container>
-                </ng-container>
-              </ng-container>
-  
-              <ng-template #templatevisualedicao>
-                <ng-container
-                  *ngTemplateOutlet="
-                    templateOutput;
-                    context: { rowData: rowData, col: col }
-                  "
-                ></ng-container>
-              </ng-template>
-            </ng-template>
-  
-            <ng-template #templateOutput let-rowData="rowData" let-col="col">
-              <ng-container [ngSwitch]="col.fieldControlType">
-                <ng-container *ngSwitchCase="'dropdown'">
-                  <ng-container *ngIf="rowData[col.field]">
-                    {{ transformValueDrop(retornaDescricaoDrop(rowData, col), col) }}
-                  </ng-container>
-                </ng-container>
-  
-                <ng-container *ngSwitchCase="'switch'">
-                  <kv-switch
-                    [(ngModel)]="rowData[col.field]"
-                    [disabled]="true"
-                  ></kv-switch>
-                </ng-container>
-  
-                <ng-container *ngSwitchCase="'calendar'">
-                  {{ rowData[col.field] | date }}
-                </ng-container>
-  
-                <ng-container *ngSwitchCase="'mask'">
-                  {{ rowData[col.field] | mask : col.mask }}
-                </ng-container>
-  
-                <ng-container *ngSwitchDefault>
-                  {{  transformValue(rowData, col) }}
-                </ng-container>
-              </ng-container>
-            </ng-template>
-  
-            @if(editMode() == 'cell' && col.fieldControlType){
-              <td
-              [pEditableColumn]="rowData"
-              [pEditableColumnField]="col.field"
-              [pEditableColumnRowIndex]="rowData[config.dataKey]"
-              [id]="'rowTable' + rowData[config.dataKey]"
-              (click)="activeItem(rowData)"
-              (dblclick)="dbClickEdit()"
-              class="rowTable"
-              [style]="
-                applyStyle(rowData, col) +
-                centralizarColunas(col) +
-                alignColunas(col)
-              "
-              [pTooltip]="returnTooltipRow(rowData, col)"
-            >
-              <p-cellEditor>
-                <ng-container>
-                  <ng-template pTemplate="input">
-                    <ng-container
-                      *ngTemplateOutlet="
-                        templateInput;
-                        context: { rowData: rowData, col: col }
-                      "
-                    ></ng-container>
-                  </ng-template>
-  
-                  <ng-template pTemplate="output">
-                    <ng-container
-                      *ngTemplateOutlet="
-                        templateOutput;
-                        context: { rowData: rowData, col: col }
-                      "
-                    ></ng-container>
-                  </ng-template>
-                </ng-container>
-  
-              </p-cellEditor>
-            </td>
-            }
-  
-            <!-- NOTE: Edição de linha -->
-            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-  
-            <!-- Celula que armazena os controles de edição para os campos -->
-            @if(false && col.fieldControlType && editMode() == 'row'){
-              <td
-              [id]="'rowTable' + rowData[config.dataKey]"
-              (click)="activeItem(rowData)"
-              (dblclick)="dbClickEdit()"
-              class="rowTable"
-              [style]="
-                applyStyle(rowData, col) +
-                centralizarColunas(col) +
-                alignColunas(col)
-              "
-              [pTooltip]="returnTooltipRow(rowData, col)"
-            >
-              <p-cellEditor
-                [ngClass]="{ switch: col.fieldControlType == 'switch' }"
-              >
-                <ng-template pTemplate="input">
-                  <ng-container
-                    *ngTemplateOutlet="
-                      templateInput;
-                      context: { rowData: rowData, col: col }
-                    "
-                  ></ng-container>
-                </ng-template>
-  
-                <ng-template pTemplate="output">
-                  <ng-container
-                    *ngTemplateOutlet="
-                      templateOutput;
-                      context: { rowData: rowData, col: col }
-                    "
-                  ></ng-container>
-                </ng-template>
-              </p-cellEditor>
-            </td>
-            }
-  
-            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-  
-            <td
-              *ngIf="rowgroup && !col.template"
-              [attr.rowspan]="rowgroup && col.grouped ? rowspan : null"
-              class="rowTable"
-              [style]="
-                applyStyle(rowData, col) +
-                centralizarColunas(col) +
-                alignColunas(col)
-              "
-              [pTooltip]="returnTooltipRow(rowData, col)"
-            >
-              <span class="p-column-title">{{ col.header }}:</span>
-  
-              <span
-                *ngIf="!isBooleanField(rowData, col); else booleanField"
-                [class]="returnRowClass(rowData, col)"
-              >
-                <span
-                  *ngIf="
-                    !isChipField(col) && !col.iconField && !isImageField(col)
-                  "
-                >
-                  <i *ngIf="col.icon" [class]="col.icon + ' mr-2'"></i>
-                  {{ transformValue(rowData, col) }}
-                </span>
-  
-                <div *ngIf="isChipField(col) && !col.iconField">
-                  <span
-                    [class]="returnClassChip(rowData, col)"
-                    [pTooltip]="returnTooltipIcon(rowData, col)"
-                    >{{ transformValue(rowData, col) }}</span
-                  >
-                </div>
-              </span>
-  
-              @if(isImageField(col)){
-                <span>
-                  <img class="image" [src]="loadImage(rowData, col)"/>
-                </span>
-              }
-              
-  
-              <i
-                *ngIf="col.iconField"
-                [ngClass]="{
-                  'material-icons': col.indIconMaterial,
-                  'material-symbols-outlined mr-2': !col.indIconMaterial
-                }"
-                [pTooltip]="returnTooltipIcon(rowData, col)"
-              >
-                {{ returnClassIcon(rowData, col) }}
-              </i>
-  
-              <ng-template #booleanField>
-                <i
-                  *ngIf="!col.iconField && !isSwitchField(col)"
-                  [ngClass]="
-                    rowData[col.field] ? 'text-green-500' : 'text-red-500'
-                  "
-                  ><span class="material-symbols-outlined">
-                    {{ rowData[col.field] ? "check" : "close" }}
-                  </span>
-                </i>
-  
-                <span
-                  *ngIf="isSwitchField(col)"
-                  [class]="returnRowClass(rowData, col)"
-                >
-                  <kv-switch
-                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
-                    [disabled]="col?.onlyReadField ?? true"
-                    [switchValue]="transformValue(rowData, col)"
-                  >
-                  </kv-switch>
-                </span>
-              </ng-template>
-            </td>
-  
-            <td
-              *ngIf="
-                !rowgroup &&
-                !col.grouped &&
-                !col.template &&
-                !col.fieldControlType
-              "
-              [style]="
-                applyStyle(rowData, col) +
-                centralizarColunas(col) +
-                alignColunas(col)
-              "
-              class="rowTable"
-              [pTooltip]="returnTooltipRow(rowData, col)"
-            >
-              <span class="p-column-title">{{ col.header }}:</span>
-  
-              <span
-                *ngIf="!isBooleanField(rowData, col); else booleanField"
-                [class]="returnRowClass(rowData, col)"
-              >
-                <span
-                  *ngIf="
-                    !isChipField(col) && !col.iconField && !isImageField(col)
-                  "
-                >
-                  <i *ngIf="col.icon" [class]="col.icon + ' mr-2'"></i>
-                  {{ transformValue(rowData, col) }}
-                </span>
-  
-                <div *ngIf="isChipField(col) && !col.iconField">
-                  <span
-                    [class]="returnClassChip(rowData, col)"
-                    [pTooltip]="returnTooltipIcon(rowData, col)"
-                  >
-                    {{ transformValue(rowData, col) }}</span
-                  >
-                </div>
-              </span>
-  
-              <span *ngIf="isImageField(col)">
-                <span>
-                  <img class="image" [src]="loadImage(rowData, col)" />
-                </span>
-                <!-- <p-skeleton shape="circle" size="3rem"></p-skeleton> -->
-              </span>
-  
-              <i
-                *ngIf="col.iconField"
-                [ngClass]="{
-                  'material-icons': col.indIconMaterial,
-                  'material-symbols-outlined mr-2': !col.indIconMaterial
-                }"
-                [pTooltip]="returnTooltipIcon(rowData, col)"
-              >
-                {{ returnClassIcon(rowData, col) }}
-              </i>
-  
-              <ng-template #booleanField>
-                <i
-                  *ngIf="!col.iconField && !isSwitchField(col)"
-                  [ngClass]="
-                    rowData[col.field] ? 'text-green-500' : 'text-red-500'
-                  "
-                  ><span class="material-symbols-outlined">
-                    {{ rowData[col.field] ? "check" : "close" }}
-                  </span>
-                </i>
-  
-                <span
-                  *ngIf="isSwitchField(col)"
-                  [class]="returnRowClass(rowData, col)"
-                >
-                  <kv-switch
-                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
-                    [disabled]="col?.onlyReadField ?? true"
-                    [switchValue]="transformValue(rowData, col)"
-                  >
-                  </kv-switch>
-                </span>
-              </ng-template>
-            </td>
-  
-            <td
-              *ngIf="col.template"
-              [style]="
-                applyStyle(rowData, col) +
-                centralizarColunas(col) +
-                alignColunas(col)
-              "
-              class="rowTable"
-            >
-              <span class="p-column-title">{{ col.header }}:</span>
-              <ng-container
-                *ngIf="getCustomTemplate(col.template.name)"
-                [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
-                [ngTemplateOutletContext]="{ $implicit: rowData }"
-              >
-              </ng-container>
-            </td>
-          
-          </ng-container>
-        }
-        
-
-        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->
-        <!-- Controle de ação  -->
-         @if(!isEditing && config.actions && config.actions.length > 0){
-            <td
-            
-            [ngClass]="{
-              'td-tools': isEditableTable() && this.editMode() == 'row',
-              'td-tools-sticky': !isEditableTable() || this.editMode() == 'cell'
-            }"
-            [style]="
-              applyStyle(rowData, { field: 'btns-options', header: '' }) 
-
-            "
-            >
-              <div class="flex flex-row justify-content-end w-full">
-              
-                <span
-                  class="material-symbols-outlined cursor-pointer icon-more-horiz"
-                  style="font-size: 20px; padding: 0.1rem;margin-right: .5rem;"
-                  (click)="menu.toggle($event); activeItem(rowData)"
-                >
-                  more_horiz
-                </span>
-                <!-- </button> -->
-
-                <div *ngFor="let action of config.actions">
-                  {{ criarMenusModal(rowData) }}
-                </div>
-
-
-                <p-menu
-                  #menu
-                  [popup]="true"
-                  [model]="menuItems"
-                  appendTo="body"
-                ></p-menu>
-              </div>
-            </td>
-         }
-       
-        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->
-        <!-- Controle de edição -->
-         @if(this.isEditableTable() && this.editMode() == 'row'){
-          <td class="td-edit">
-            <div class="flex align-items-center justify-content-center gap-2">
-              @if(!editing){
-                <button
-                [style.height]="'28px'"
-                [id]="'rowEdit' + rowData[config.dataKey]"
-                [style.width]="'28px'"
-                [disabled]="isDisableEditRowFunction(rowData)"
-                pButton
-                pRipple
-                type="button"
-                pInitEditableRow
-                icon="pi pi-pencil"
-                (click)="onRowEditInit(rowData)"
-                class="p-button-rounded p-button-text"
-              ></button>
-              }
-            
-              @if(editing){
-                <button
-                [style.height]="'28px'"
-                [style.width]="'28px'"
-                [disabled]="isDisableEditRowFunction(rowData)"
-                pButton
-                pRipple
-                type="button"
-                pCancelEditableRow
-                icon="pi pi-times"
-                (click)="onRowEditCancel(rowData, ri)"
-                [id]="'rowCancel' + rowData[config.dataKey]"
-                class="p-button-rounded p-button-text p-button-danger"
-              ></button>
-              }
-            
-            </div>
-          </td>
-         }
-      
-      </tr>
-    </ng-template>
-
-     <ng-template pTemplate="emptymessage" let-columns>
-      <tr>
-        <td
-          [attr.colspan]="columns.length + 2"
-          style="text-align: center; border-radius: 10px !important"
-        >
-          <p class="font-medium m-0 text-xs">Nenhum registro encontrado</p>
-        </td>
-      </tr>
-    </ng-template>
-  </p-table>
-</div>