keevo-components 1.8.191 → 1.8.192

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

@@ -1,823 +0,0 @@
-<div class="card" id="tamanhotabela" [style.font-size]="'1px'">
-  <p-toast></p-toast>
-
-  <p-panel
-    *ngIf="filtrosAvancados"
-    header="Filtros avançados"
-    [toggleable]="true"
-    [collapsed]="true"
-    (collapsedChange)="collapsed = !collapsed"
-    [style]="{ 'margin-bottom': '2px' }"
-  >
-    <ng-template pTemplate="headericons">
-      <i *ngIf="!collapsed" class="pi pi-filter"></i>
-      <!-- Ícone quando o painel está aberto -->
-      <i *ngIf="collapsed" 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]="config.columns"
-    [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"
-  >
-    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-
-    <ng-template pTemplate="caption" *ngIf="config.enableCation || enableSizes">
-      <div
-        class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12"
-      >
-        <div class="col-12 flex flex-column">
-          <div *ngIf="config.title" class="text-md font-bold my-3">
-            {{ config.title }}
-          </div>
-          <div *ngIf="config.subtitle" 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 "
-        >
-          <span *ngIf="config.enableFilter" class="p-input-icon-left">
-            <i class="pi pi-search"></i>
-
-            <input
-              pInputText
-              pAutoFocus
-              [autofocus]="true"
-              type="text"
-              (input)="onGlobalFilter(te, $event)"
-              placeholder="Pesquisar..."
-              class="h-2rem"
-            />
-          </span>
-
-          <!-- FIXME: Opção 1  -->
-          <!-- <div class="sizes-controls ml-2" *ngIf="isShowSizes">
-            <p-selectButton
-                [options]="sizes"
-                [(ngModel)]="selectedSize"
-                [style]="{'display': 'flex'}"
-                optionLabel="name"
-                />
-          </div>
-         <button
-          id="btn-sizes"
-          pButton
-          [pTooltip]="isShowSizes ? 'Esconder controles de tamanho' : 'Mostrar controles de tamanho'"
-          class="actionLoteBtns p-button-raised p-button-text"
-          (click)="isShowSizes = !isShowSizes"
-        >
-          <span  style="font-size: 0.8rem;" class="flex align-items-end">
-          <span  style="font-size: 0.7rem;">
-            A
-          </span>
-            A
-          </span>
-        </button> -->
-
-          <!-- FIXME: Opção 2  -->
-          <div *ngIf="enableSizes" class="sizes-controls ml-2">
-            <!-- <p-splitButton
-              label="aA"
-              [model]="sizes"
-              styleClass="teste"
-              [menuStyle]="{'font-size': '0.7rem'}"
-
-              ngModel
-            >
-            </p-splitButton> -->
-            <!-- <p-button  icon="pi pi-ellipsis-v"/> -->
-
-            <button
-              id="actionLoteBtns"
-              pButton
-              (click)="menu.toggle($event)"
-              class="actionLoteBtns p-button-raised p-button-text"
-              style="background-color: #1da750; color: #fff; display: flex"
-            >
-              <span class="text-xs">A</span>
-              <span class="text-md">A</span>
-            </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 p-2 m-2 menu-sizes"
-                  (click)="item.command()"
-                >
-                  <div
-                    *ngIf="this.selectedSize.size != item.size"
-                    class="tag"
-                    [style.background-color]="'#EAEAEA'"
-                  ></div>
-                  <div
-                    *ngIf="this.selectedSize.size == item.size"
-                    class="tag"
-                    [style.background-color]="'#1DA750'"
-                  ></div>
-
-                  {{ item.label }}
-                </div>
-              </ng-template>
-            </p-tieredMenu>
-          </div>
-          <!-- FIXME: Opção 3  -->
-          <!-- <div class="sizes-controls ml-2" style="transform: translate(0px, -15px);" >
-            <p-speedDial
-              [model]="sizes"
-              showIcon="format_size"
-              [mask]="true"
-              direction="right"
-              buttonClassName="item-circle"
-            >
-
-
-
-
-            <ng-template let-item pTemplate="item" >
-              <div class="item-circle cursor-pointer
-
-              shadow-2 hover:shadow-8
-
-              " (click)="item.command()">
-                {{item.label}}
-              </div>
-            </ng-template>
-
-          </p-speedDial>
-          </div> -->
-        </div>
-
-        <span *ngIf="isEditing" class="text-aviso">
-          Tabela em modo de edição
-        </span>
-
-        <div class="flex flex-row col-1 justify-content-end">
-          <div
-            *ngFor="let action of config.actionsLote"
-            class="btns-options flex flex-row"
-          >
-            <button
-              id="actionLoteBtns"
-              pButton
-              *ngIf="
-                !isEditing &&
-                (selectedItems.length > 0 || action.showAcoesLote) &&
-                exibirCampo(action, this.action)
-              "
-              class="actionLoteBtns border-none"
-              style="background-color: #1da750"
-              (click)="action?.command(); activeItemLote(selectedItems)"
-              [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
-              [tooltipPosition]="'bottom'"
-              [disabled]="getOrExecute(action.disabled, selectedItems)"
-            >
-              <span
-                class="material-symbols-outlined"
-                style="color: white"
-              >
-                {{ getOrExecute(action.icon, selectedItems) }}
-              </span>
-            </button>
-          </div>
-
-          <div
-            *ngIf="isEditableTable()"
-            class="btns-options"
-            [style]="{ 'margin-right': '7px' }"
-          >
-            <button
-              (click)="this.isEditing = !this.isEditing"
-              id="actionLoteBtns"
-              pButton
-              style="background-color: #1da750; color: #fff"
-              class="actionLoteBtns p-button-raised p-button-text"
-            >
-              <span class="material-symbols-outlined"> edit_square </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-
-    <ng-template pTemplate="header" let-columns>
-      <tr>
-        <th
-          style="width: 4rem; border-left: solid 4px transparent"
-          *ngIf="config.enableSelect && !isEditing"
-          [class]="selectedSize.class + 'th'"
-        >
-          <p-tableHeaderCheckbox
-            (click)="activeItemLote(selectedItems)"
-          ></p-tableHeaderCheckbox>
-        </th>
-
-        <th
-          *ngFor="let col of columns"
-          [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>{{ col.header }}</span>
-            <p-sortIcon
-              *ngIf="col.sortable === true"
-              [field]="col.field"
-              style="font-size: 10px"
-            ></p-sortIcon>
-
-            <span
-              *ngIf="col.headerTooltip"
-              class="material-symbols-outlined flex align-items-center"
-              [pTooltip]="col.headerTooltip"
-              >info</span
-            >
-          </div>
-        </th>
-        <th
-          *ngIf="!isEditing && config.actions && config.actions.length > 0"
-        ></th>
-        <th
-          *ngIf="isEditableTable() && this.editMode == 'row'"
-          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'"
-      >
-        <td
-          *ngIf="config.enableSelect && !isEditing"
-          [style]="applyStyle(rowData, { field: 'check-box', header: '' })"
-        >
-          <!--<p-tableCheckbox *ngIf="isVisibleCheckbox(rowData)"-->
-          <p-tableCheckbox
-            class="check-edit-list"
-            [value]="rowData"
-            [disabled]="isDisabledCheckbox(rowData)"
-            (click)="activeItemLote(selectedItems)"
-          ></p-tableCheckbox>
-        </td>
-
-        <ng-container *ngFor="let col of columns; let i = index">
-          <!-- 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]">
-                  {{ retornaDescricaoDrop(rowData, col) }}
-                  <!-- {{rowData[col.field]}} -->
-                </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>
-                {{ rowData[col.field] }}
-              </ng-container>
-            </ng-container>
-          </ng-template>
-
-          <td
-            *ngIf="editMode == 'cell' && col.fieldControlType"
-            [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>
-
-              <!-- <ng-template *ngIf="!isEditing" pTemplate="input">
-          <ng-container *ngTemplateOutlet="templateInput; context: { rowData: rowData, col: col }"></ng-container>
-        </ng-template>
-
-        <ng-template *ngIf="isEditing" pTemplate="output">
-          <ng-container *ngTemplateOutlet="templateOutput; context: { rowData: rowData, col: col }"></ng-container>
-        </ng-template> -->
-            </p-cellEditor>
-          </td>
-
-          <!-- NOTE: Edição de linha -->
-          <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-          <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-          <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
-
-          <!-- Celula que armazena os controles de edição para os campos -->
-          <td
-            *ngIf="false && col.fieldControlType && editMode == 'row'"
-            [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>
-
-            <span *ngIf="isImageField(col)">
-              <span>
-                <img class="image" [src]="loadImage(rowData, col)" />
-              </span>
-            </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>
-            </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 && !isEditableTable()"
-            [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  -->
-        <td
-          [ngClass]="{
-            'td-tools': isEditableTable() && this.editMode == 'row',
-            'td-tools-sticky': !isEditableTable() || this.editMode == 'cell'
-          }"
-          *ngIf="!isEditing && config.actions && config.actions.length > 0"
-          [style]="
-            applyStyle(rowData, { field: 'btns-options', header: '' }) +
-            'border-right: 1px solid #ddd !important;'
-          "
-        >
-          <div class="flex flex-row justify-content-end w-full">
-            <!-- <button
-            id="moreVertBtn"
-            pButton
-            class="actionBtns p-button-text p-button-raised"
-            (click)="menu.toggle($event); activeItem(rowData)"
-          > -->
-            <span
-              class="material-symbols-outlined cursor-pointer icon-more-horiz"
-              style="font-size: 1rem; height: 10px; width: 20px"
-              (click)="menu.toggle($event); activeItem(rowData)"
-            >
-              more_horiz
-            </span>
-            <!-- </button> -->
-
-            <div *ngFor="let action of config.actions">
-              {{ criarMenusModal(rowData) }}
-            </div>
-
-            <!-- <div *ngFor="let action of config.actions">
-            {{ criarMenusModal(rowData) }}
-          </div> -->
-
-            <p-menu
-              #menu
-              [popup]="true"
-              [model]="menuItems"
-              appendTo="body"
-            ></p-menu>
-          </div>
-        </td>
-
-        <!-- <td
-      class="td-tools"
-      *ngIf="!isEditing && config.actions && config.actions.length > 0"
-      [style]="applyStyle(rowData, { field: 'btns-options', header: '' })"
-    >
-      </td> -->
-
-        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->
-        <!-- Controle de edição -->
-        <td
-          class="td-edit"
-          *ngIf="this.isEditableTable() && this.editMode == 'row'"
-        >
-          <div class="flex align-items-center justify-content-center gap-2">
-            <button
-              [style.height]="'28px'"
-              [id]="'rowEdit' + rowData[config.dataKey]"
-              [style.width]="'28px'"
-              [disabled]="isDisableEditRowFunction(rowData)"
-              *ngIf="!editing"
-              pButton
-              pRipple
-              type="button"
-              pInitEditableRow
-              icon="pi pi-pencil"
-              (click)="onRowEditInit(rowData)"
-              class="p-button-rounded p-button-text"
-            ></button>
-            <!-- <button [style.height]="'28px'" [style.width]="'28px'" [disabled]="isDisableEditRowFunction(rowData)" *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check"
-              (click)="onRowEditSave(rowData, ri)" [id]="'rowSave' + rowData[config.dataKey] " class="p-button-rounded p-button-text p-button-success mr-2"></button> -->
-            <button
-              [style.height]="'28px'"
-              [style.width]="'28px'"
-              [disabled]="isDisableEditRowFunction(rowData)"
-              *ngIf="editing"
-              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>
-  </p-table>
-</div>