keevo-components 1.8.264 → 1.8.266

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

@@ -1,504 +0,0 @@
-<div>
-  @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>
-  } @if (config) {
-  <p-table
-    #dt
-    styleClass="p-datatable-sm"
-    [value]="dataSource"
-    [(selection)]="selectedItems"
-    [rowSelectable]="isRowSelectable"
-    [columns]="config.columns"
-    [globalFilterFields]="globalFilterFields"
-    [rows]="rows"
-    [paginator]="paginator"
-    [rowsPerPageOptions]="rowsPerPageOptions"
-    [showCurrentPageReport]="true"
-    currentPageReportTemplate="{first} - {last} de {totalRecords}"
-    [rowHover]="true"
-    [totalRecords]="totalRecords"
-    [lazy]="config.lazy"
-    (onLazyLoad)="paginate($event)"
-    (selectionChange)="selectionChange($event)"
-    (onSort)="onSort($event)"
-    rowGroupMode="rowspan"
-    [groupRowsBy]="config.fieldGroup"
-    [showFirstLastIcon]="tamanhoTela > 960 ? true : false"
-    [pageLinks]="tamanhoTela > 960 ? 2 : 1"
-    [responsive]="true"
-    [responsiveLayout]="responsiveLayout ? 'stack' : ''"
-    [scrollable]="isTableScrollable"
-    [scrollHeight]="scrollHeight"
-    [rowTrackBy]="rowTrackBy"
-  >
-    @if (config.enableCation) {
-    <ng-template pTemplate="caption">
-      <div
-        class="flex flex-row flex-wrap justify-content-between grid formgrid p-fluid col-12 p-0 m-0"
-        [style.background-color]="'#EAEAEA'"
-      >
-        <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"
-        >
-          @if (config.enableFilter) {
-          <span class="p-input-icon-left">
-            <i class="pi pi-search"></i>
-
-            <input
-              pInputText
-              pAutoFocus
-              [autofocus]="true"
-              type="text"
-              (input)="onGlobalFilter(dt, $event)"
-              placeholder="Pesquisar..."
-              class="h-2rem"
-              autocomplete="off"
-              #inputField
-            />
-          </span>
-          } @if(filterColumnsBtn) {
-          <div #botaoFiltro>
-            <kv-button
-              id="botaoFiltro"
-              [icon]="'align_vertical_top'"
-              (onClick)="abrirMenuFiltro($event)"
-              severity="tertiary"
-              pTooltip="Ocultar/Exibir colunas"
-            >
-            </kv-button>
-          </div>
-
-          <div
-            #menuFiltroDiv
-            id="menuFiltroDiv"
-            [style.visibility]="'hidden'"
-            class="absolute z-4 bg-gray-200 menu-columns-filtro"
-          >
-            <p-card styleClass="p-2">
-              <div
-                class="flex flex-column text-medium w-15rem p-1"
-                *ngFor="let col of columns"
-              >
-                {{ checkMenuFiltro(col) }}
-                <p-checkbox
-                  #filterColumns
-                  [label]="col.header"
-                  [binary]="true"
-                  class="checkbox-container"
-                  (onChange)="dinamicColumnSet($event, col)"
-                  [(ngModel)]="col.checked"
-                  *ngIf="!dinamicDisableColumn(col)"
-                ></p-checkbox>
-              </div>
-            </p-card>
-          </div>
-          }
-        </div>
-
-        <div class="flex flex-row col-2 justify-content-end gap-2">
-          @for (action of config.actionsLote; track i; let i = $index) {
-          <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'"
-            />
-            }
-          </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-    }
-
-    <ng-template pTemplate="header" let-columns>
-      <tr>
-        @if (config.enableSelect) {
-        <th>
-          <p-tableHeaderCheckbox
-            (click)="activeItemLote(selectedItems)"
-            [disabled]="disabledHeaderCheckbox"
-          ></p-tableHeaderCheckbox>
-        </th>
-        } @for (col of columns; track $index) {
-        <th
-          [pSortableColumn]="col.field"
-          [pSortableColumnDisabled]="col.sortable === false"
-          [style.width]="col.width"
-          class="text-sm"
-        >
-          <div
-            class="flex flex-row align-items-center {{
-              col.centralize && 'justify-content-center'
-            }}"
-          >
-            <span>{{ col.header }}</span>
-            @if (col.sortable) {
-            <p-sortIcon
-              [field]="col.field"
-              style="font-size: 10px"
-            ></p-sortIcon>
-            } @if (col.headerTooltip) {
-            <span
-              class="material-symbols-outlined flex align-items-center"
-              [pTooltip]="col.headerTooltip"
-              >info</span
-            >
-            }
-          </div>
-        </th>
-        } @if (config.actions && config.actions.length > 0) {
-        <th></th>
-        }
-      </tr>
-    </ng-template>
-
-    <ng-template
-      pTemplate="body"
-      let-rowData
-      let-columns="columns"
-      let-rowgroup="rowgroup"
-      let-rowspan="rowspan"
-      let-rowIndex="rowIndex"
-    >
-      <tr
-        (dblclick)="doubleClick($event, rowData)"
-        [ngClass]="{ capitalize: tableCaptalized, 'last': rowIndex === dataSource.length - 1  }"
-        class="tr-td {{isDisabledRow(rowData) ? 'disabled-row' : ''}}"
-      >
-        @if (config.enableSelect) { 
-        <td style="width: 8px !important">
-          <p-tableCheckbox
-            [value]="rowData"
-            [disabled]="isDisabledCheckbox(rowData)"
-            (click)="activeItemLote(selectedItems)"
-          ></p-tableCheckbox>
-        </td>
-        } @for (col of columns; track $index) {
-        <ng-container>
-          @if (rowgroup && !col.template) {
-          <td
-            [attr.rowspan]="rowgroup && col.grouped ? rowspan : null"
-            [pTooltip]="returnTooltipRow(rowData, col)"
-          >
-            <span class="p-column-title">{{ col.header }}:</span>
-
-            <span
-              *ngIf="!isBooleanField(rowData, col); else booleanField"
-              [class]="returnRowClass(rowData, col)"
-            >
-              @if (!isChipField(col) && !col.iconField && !isImageField(col)) {
-              <span
-                class="flex flex-row gap-2 align-items-center {{
-                  col.centralize && 'justify-content-center'
-                }}"
-                [pTooltip]="
-                  col.tooltip && col.tooltip(rowData, col, rowData[col.field])
-                "
-              >
-                @if(col.tagColor) {
-                <div
-                  class="tag"
-                  [pTooltip]="
-                    col.tooltipTag &&
-                    col.tooltipTag(rowData, col, rowData[col.field])
-                  "
-                  [style.background-color]="
-                    col.tagColor(rowData, col, rowData[col.field])
-                  "
-                ></div>
-
-                } @if (col.icon) {
-                <i [class]="col.icon + ' mr-2'"></i>
-                }
-                {{ transformValue(rowData, col) }}
-              </span>
-              } @if (isChipField(col) && !col.iconField) {
-              <div>
-                <span
-                  [class]="returnClassChip(rowData, col)"
-                  [pTooltip]="returnTooltipIcon(rowData, col)"
-                  >{{ transformValue(rowData, col) }}</span
-                >
-              </div>
-              }
-            </span>
-
-            @if (isImageField(col)) {
-            <span>
-              <span>
-                <img class="image" [src]="loadImage(rowData, col)" />
-              </span>
-            </span>
-            } @if (col.iconField) {
-            <i
-              [ngClass]="{
-                'material-icons': col.indIconMaterial,
-                'material-symbols-outlined mr-2': !col.indIconMaterial
-              }"
-              [pTooltip]="returnTooltipIcon(rowData, col)"
-            >
-              {{ returnClassIcon(rowData, col) }}
-            </i>
-            }
-
-            <ng-template #booleanField>
-              @if (!col.iconField && !isSwitchField(col)) {
-              <div
-                class="flex flex-row gap-2 align-items-center {{
-                  col.centralize && 'justify-content-center'
-                }}"
-                [pTooltip]="
-                  col.tooltip && col.tooltip(rowData, col, rowData[col.field])
-                "
-              >
-                <i
-                  [ngClass]="
-                    rowData[col.field] ? 'text-green-500' : 'text-red-500'
-                  "
-                  ><span class="material-symbols-outlined">
-                    {{ rowData[col.field] ? "check" : "close" }}
-                  </span>
-                </i>
-              </div>
-
-              } @if (isSwitchField(col)) {
-              <span
-                [class]="
-                  returnRowClass(rowData, col) +
-                  ' flex flex-row align-items-center justify-content-center'
-                "
-              >
-                <kv-switch
-                  (onSwitchChange)="onSwitchChange($event, rowData, col)"
-                  [disabled]="col?.onlyReadField ?? true"
-                  [switchValue]="transformValue(rowData, col)"
-                >
-                </kv-switch>
-              </span>
-              }
-            </ng-template>
-          </td>
-          } @if (!rowgroup && !col.grouped && !col.template) {
-          <td 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) +
-                ' flex flex-row gap-2 align-items-center ' +
-                (col.centralize && 'justify-content-center')
-              "
-              [pTooltip]="
-                col.tooltip && col.tooltip(rowData, col, rowData[col.field])
-              "
-            >
-              @if(col.tagColor) {
-              <div
-                class="tag"
-                [pTooltip]="
-                  col.tooltipTag &&
-                  col.tooltipTag(rowData, col, rowData[col.field])
-                "
-                [style.background-color]="
-                  col.tagColor(rowData, col, rowData[col.field])
-                "
-              ></div>
-
-              } @if (!isChipField(col) && !col.iconField && !isImageField(col))
-              {
-              <span>
-                @if (col.icon) {
-                <i [class]="col.icon + ' mr-2'"></i>
-                }
-                {{ transformValue(rowData, col) }}
-              </span>
-              } @if (isChipField(col) && !col.iconField) {
-              <div>
-                <span
-                  [class]="returnClassChip(rowData, col)"
-                  [pTooltip]="returnTooltipIcon(rowData, col)"
-                >
-                  {{ transformValue(rowData, col) }}</span
-                >
-              </div>
-              }
-            </span>
-
-            @if (isImageField(col)) {
-            <span>
-              <span>
-                <img class="image" [src]="loadImage(rowData, col)" />
-              </span>
-            </span>
-            } @if (col.iconField) {
-            <i
-              [ngClass]="{
-                'material-icons': col.indIconMaterial,
-                'material-symbols-outlined mr-2': !col.indIconMaterial
-              }"
-              [pTooltip]="returnTooltipIcon(rowData, col)"
-            >
-              {{ returnClassIcon(rowData, col) }}
-            </i>
-            }
-
-            <ng-template #booleanField>
-              @if (!col.iconField && !isSwitchField(col)) {
-              <div
-                class="flex flex-row gap-2 align-items-center {{
-                  col.centralize && 'justify-content-center'
-                }}"
-                [pTooltip]="
-                  col.tooltip && col.tooltip(rowData, col, rowData[col.field])
-                "
-              >
-                <i
-                  [ngClass]="
-                    rowData[col.field] ? 'text-green-500' : 'text-red-500'
-                  "
-                  ><span class="material-symbols-outlined">
-                    {{ rowData[col.field] ? "check" : "close" }}
-                  </span>
-                </i>
-              </div>
-              } @if (isSwitchField(col)) {
-              <span
-                [class]="
-                  returnRowClass(rowData, col) +
-                  ' flex flex-row align-items-center justify-content-center'
-                "
-              >
-                <kv-switch
-                  (onSwitchChange)="onSwitchChange($event, rowData, col)"
-                  [disabled]="col?.onlyReadField ?? true"
-                  [switchValue]="transformValue(rowData, col)"
-                >
-                </kv-switch>
-              </span>
-              }
-            </ng-template>
-          </td>
-          } @if (col.template) {
-          <td class="rowTable">
-            <span class="p-column-title">{{ col.header }}:</span>
-            @if (getCustomTemplate(col.template.name)) {
-
-            <div
-              class="flex flex-row gap-2 align-items-center {{
-                col.centralize && ' justify-content-center'
-              }}"
-              [pTooltip]="
-                col.tooltip && col.tooltip(rowData, col, rowData[col.field])
-              "
-            >
-              @if(col.tagColor) {
-              <div
-                class="tag"
-                [pTooltip]="col.tooltipTag && col.tooltipTag(rowData, col)"
-                [style.background-color]="col.tagColor(rowData, col)"
-              ></div>
-              }
-
-              <div class="w-full">
-                <ng-container
-                  [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
-                  [ngTemplateOutletContext]="{ $implicit: rowData }"
-                />
-              </div>
-            </div>
-            }
-          </td>
-          }
-        </ng-container>
-        } @if (config.actions && config.actions.length > 0) {
-        <td>
-          <div class="flex flex-row justify-content-end w-full">
-            <span
-              class="material-symbols-outlined cursor-pointer icon-more-horiz p-1"
-              style="font-size: 25px"
-              (click)="menu.toggle($event); activeItem(rowData)"
-            >
-              more_horiz
-            </span>
-
-            <p-tieredMenu
-              #menu
-              [popup]="true"
-              [model]="tableActions[rowIndex - actionsOffset]"
-              appendTo="body"
-            ></p-tieredMenu>
-          </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">Nenhum registro encontrado</p>
-        </td>
-      </tr>
-    </ng-template>
-  </p-table>
-  }
-</div>
-
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/icon?family=Material+Icons"
-/>
-
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
-/>

package/src/lib/components/kv-table/kv-table.component.scss

@@ -1,130 +0,0 @@
-::ng-deep .p-datatable>.p-datatable-wrapper {
-  &::-webkit-scrollbar {
-    width: 6px;
-
-    &:hover {
-      background-color: rgba(222, 222, 222, 0.75);
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: transparent;
-  }
-
-  &:hover::-webkit-scrollbar-thumb {
-    border-left: 2px solid white;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-
-  &::-webkit-scrollbar-track {
-    border-left: 2px solid white;
-    background-color: rgba(222, 222, 222, 0.75);
-  }
-}
-
-.tag {
-  width: 5px;
-  height: 20px;
-  border-radius: 0.25rem;
-}
-
-::ng-deep .p-panel .p-panel-header {
-  border: none !important;
-}
-
-:host ::ng-deep .p-datatable-header {
-  // background-color: #f2f2f2;
-  background-color: #eaeaea !important;
-  padding: 0 !important;
-  border-radius: 5px !important;
-}
-
-::ng-deep .p-panel.p-panel-toggleable .p-panel-header {
-  background-color: #eaeaea;
-}
-
-::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
-  background-color: #eaeaea;
-}
-
-.icon-more-horiz {
-  font-weight: 700;
-}
-
-.icon-more-horiz:hover,
-.icon-more-horiz:focus {
-  color: #5e5e5e;
-  transition: color 0.3s, transform 0.3s;
-  background-color: #eaeaea;
-  border-radius: 50%;
-}
-
-.tr-td {
-  &:hover {
-    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
-    background-color: white;
-    transition: color 0.3s, transform 0.3s;
-    transform: scale(1);
-    &.last{
-      box-shadow: -1px -1px 9px -3px rgba(0,0,0,0.75);
-      -webkit-box-shadow: -1px -1px 9px -3px rgba(0,0,0,0.75);
-      -moz-box-shadow: -1px -1px 9px -3px rgba(0,0,0,0.75);
-    }
-  }
-  overflow-wrap: anywhere;
-  
-}
-
-
-
-.disabled-row {
-  pointer-events: none;
-  opacity: 0.6;
-  background-color: #dddddd8e;
-}
-
-::ng-deep .p-tooltip {
-  pointer-events: auto;
-}
-
-.btn-table {
-  background-color: #29b92d;
-  padding: 12px 12px;
-
-  &:hover {
-    background-color: #249a29;
-  }
-
-  &:active {
-    background-color: #1c801f;
-  }
-
-  &:disabled {
-    background-color: #29b92d;
-  }
-}
-
-::ng-deep svg.p-icon {
-  width: 0.7rem;
-  height: 1rem;
-}
-
-::ng-deep .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #004172;
-  background: #004172;
-
-  &:hover {
-    background-color: #002542;
-  }
-
-  &:active {
-    background-color: #002542;
-  }
-
-  &:disabled {
-    background-color: #002542;
-    opacity: 0.4;
-    cursor: auto;
-  }
-}

package/src/lib/components/kv-table/kv-table.component.spec.ts

@@ -1,28 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { KvTableComponent } from './kv-table.component';
-
-describe('TableComponent', () => {
-  let component: KvTableComponent;
-  let fixture: ComponentFixture<KvTableComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ KvTableComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(KvTableComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});