keevo-components 1.8.190 → 1.8.191

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

@@ -0,0 +1,823 @@
+<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>