keevo-components 2.0.107 → 2.0.108

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

@@ -1,492 +0,0 @@
-<div class="kv-treetable-container" #kvTreeTable>
-  <p-treeTable
-    #tt
-    cdkDropList
-    class="example-list"
-    (cdkDropListDropped)="drop($event)"
-    [value]="dataSource()"
-    [columns]="config.columns"
-    [resizableColumns]="true"
-    [tableStyle]="{ 'min-width': '50rem' }"
-    [resizableColumns]="true"
-    [paginator]="paginator"
-    [rows]="rows"
-    [totalRecords]="totalRecords"
-    [rowsPerPageOptions]="[5, 10, 15, 25, 50]"
-    [showFirstLastIcon]="tamanhoTela() > 960 ? true : false"
-    [pageLinks]="tamanhoTela() > 960 ? 2 : 1"
-    [styleClass]="gridLines ? 'p-treetable-gridlines' : ''"
-    [(selection)]="selectedItems"
-    [selectionKeys]="selectionKeys()"
-    (selectionKeysChange)="selectionKeys.set($event)"
-    [lazy]="config.lazy"
-    (onLazyLoad)="paginate($event)"
-    (onNodeSelect)="onNodeSelected($event)"
-    (onNodeUnselect)="onNodeUnselected($event)"
-    [showCurrentPageReport]="true"
-    currentPageReportTemplate="{first} - {last} de {totalRecords}"
-    [scrollHeight]="scrollHeight"
-  >
-    @if(config.enableCation) {
-    <ng-template pTemplate="caption">
-      <div
-        class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0 p-1"
-        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 col-10 p-0 md:col-6 lg:col-4 justify-content-center {{
-            tamanhoTela() < 768 ? '' : 'input-search'
-          }}"
-        >
-          @if(config.enableFilter) {
-
-          <span class="p-input-icon-left">
-            <i class="pi pi-search"></i>
-
-            <input
-              pInputText
-              pAutoFocus
-              [autofocus]="true"
-              type="text"
-              (input)="onGlobalFilter(tt, $event)"
-              placeholder="Pesquisar..."
-              class="h-2rem"
-              #inputBusca
-            />
-          </span>
-          }
-        </div>
-
-        <div class="flex flex-row col-1 justify-content-end p-0">
-          <div class="flex flex-row gap-2 btns-options">
-            @for (action of config.actionsLote; track $index) {
-            @if((selectedItems.length > 0 || action.showAcoesLote) &&
-            exibirCampo()(action, this.action)) {
-            <kv-button
-              (onClick)="action?.command(); activeItemLote(selectedItems)"
-              [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
-              [tooltipPosition]="'bottom'"
-              [size]="'small'"
-              [disabled]="getOrExecute(action.disabled, selectedItems) || false"
-              [icon]="getOrExecute(action.icon, selectedItems)"
-              [severity]="action.severity || 'tertiary'"
-            />
-            } }
-          </div>
-        </div>
-      </div>
-    </ng-template>
-    } @if(showHeader){
-    <ng-template pTemplate="header" let-columns>
-      <tr>
-        @for(col of columns; track $index){
-        <th
-          [ttSortableColumn]="col.field"
-          [ttSortableColumnDisabled]="col.sortable === false"
-          [style.width]="col.width"
-        >
-          <div>
-            <div [ngClass]="{ flex: $index == 0, 'gap-3': $index == 0 }">
-              @if($index == 0 && config.enableSelect) {
-              <p-treeTableHeaderCheckbox
-                (click)="activeItemLote(selectedItems)"
-              />
-              }
-
-              <div class="flex flex-row align-items-center  {{ align(col) }}">
-                <span class="text-xs">{{ col.header }}</span>
-
-                @if(col.sortable) {
-                <p-treeTableSortIcon [field]="col.field" class="pb-1" />
-                } @if(col.headerTooltip) {
-                <span
-                  class="material-symbols-outlined flex align-items-center"
-                  [pTooltip]="col.headerTooltip"
-                >
-                  info
-                </span>
-                }
-              </div>
-            </div>
-          </div>
-        </th>
-        @if (config.actions?.length ?? 0 > 0 || config.actionsPai) {
-        <th [style.width]="5"></th>
-        } }
-      </tr>
-    </ng-template>
-
-    <ng-template pTemplate="header" let-columns>
-      <tr>
-        @for (col of columns; track $index) {
-        <th
-          [ttSortableColumn]="col.field"
-          [ttSortableColumnDisabled]="col.sortable === false"
-          [style.width]="col.width"
-        >
-          <div class="flex flex-row align-items-center {{ align(col) }}">
-            <span class="text-xs">{{ col.header }}</span>
-
-            @if(col.sortable) {
-            <p-treeTableSortIcon [field]="col.field" class="pb-1" />
-            }
-          </div>
-        </th>
-        } @if (config.actions?.length ?? 0 > 0 || config.actionsPai) {
-        <th [style.width]="5"></th>
-        }
-      </tr>
-    </ng-template>
-    }
-
-    <ng-template
-      pTemplate="body"
-      let-rowNode
-      let-rowData="rowData"
-      let-columns="columns"
-    >
-      @if(isLoadingSkeleton()) { @for(skeletonRow of
-      dataSource(); track $index) {
-      <tr>
-        @for(col of columns; track $index){
-        <td>
-          <div
-            class="flex flex-row align-items-center justify-content-center w-full"
-          >
-            @if($index == 0) {
-            <p-treeTableToggler [rowNode]="rowNode" />
-            }
-            <div class="flex flex-column w-full">
-              <p-skeleton height="1rem" />
-            </div>
-          </div>
-        </td>
-        }
-        <td>
-          <div class="flex justify-content-center">
-            <p-skeleton [style]="{ height: '1.5rem', width: '1.5rem' }" />
-          </div>
-        </td>
-      </tr>
-      } } @else { @if(treeTableDraggable) {
-      <tr
-        cdkDrag
-        cdkDragLockAxis="y"
-        [cdkDragData]="rowNode"
-        [ttRow]="rowNode"
-        (dblclick)="doubleClick($event, rowData)"
-        [ngClass]="{ capitalize: tableCaptalized }"
-      >
-        @for(col of columns; track $index){
-        <td
-          class="draggable-cell"
-          [style.position]="
-            !disableRowNodeSticky && rowNode.level !== 0 ? 'sticky' : null
-          "
-        >
-          <!-- [style.left.px]="
-                   childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null
-                   " -->
-
-          <div class="flex flex-row  {{ align(col) }}">
-            @if($index == 0) {
-            <div class="w-full-h-full flex align-items-center">
-              <span
-                class="material-symbols-outlined drag-icon"
-                style="
-                  cursor: grab;
-                  font-size: 25px;
-                  color: #6b7280;
-                  opacity: 0.9;
-                "
-                cdkDragHandle
-              >
-                drag_indicator
-              </span>
-              <p-treeTableToggler class="hiddenVisible" [rowNode]="rowNode" />
-
-              @if(config.enableSelect) {
-              <p-treeTableCheckbox
-                [disabled]="isDisabledCheckbox()(rowData, rowNode)"
-                (click)="activeItemLote(selectedItems)"
-                [value]="rowNode"
-                [ngStyle]="{
-                  display: isSelectEnabled()(rowData, rowNode)
-                    ? 'block'
-                    : 'none',
-                  'margin-left': config.visibleCheckboxFunction
-                    ? '-34px'
-                    : '0px'
-                }"
-              />
-              }
-            </div>
-            }
-
-            <div class="flex flex-row align-items-center w-full">
-              @if (col.template && validateShowTemplate()(rowNode, col)) {
-              <span class="w-full">
-                @if(getCustomTemplate(col.template.name)) {
-                <ng-container
-                  [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
-                  [ngTemplateOutletContext]="{ $implicit: rowData }"
-                >
-                </ng-container>
-                }
-              </span>
-              } @else {
-              <div
-                class="flex flex-row align-items-center {{
-                  (col.boolean || col.centralize) && 'justify-content-center'
-                }} gap-2 w-full"
-              >
-                @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.boolean) {
-                <i
-                  class="pi {{
-                    rowData[col.field] ? 'pi-check text-green-300' : ''
-                  }}"
-                  style="font-size: 1rem; font-weight: 700"
-                ></i>
-
-                } @else {
-                <div class="flex flex-column">
-                  <span class="m-0 text-xs">{{ rowData[col.field] }}</span>
-
-                  @if(col.subtitle) {
-
-                  <p class="m-0 text-xs font-semibold">
-                    {{ rowData[col.subtitle] }}
-                  </p>
-                  }
-                </div>
-                }
-              </div>
-              }
-            </div>
-          </div>
-        </td>
-        } @if((config.actions?.length ?? 0 > 0) || config.actionsPai) {
-        <td
-          style="border-left: none; text-align: center; width: 0"
-          [style.borderRight]="rowNode.level === 0 ? 'none' : ''"
-          [style.borderLeft]="rowNode.level === 0 ? 'none' : ''"
-        >
-          @if((config.actions?.length ?? 0 > 0) &&
-          validateActionPosition()(rowNode)) {
-          <div class="flex align-items-center justify-content-center">
-            <span
-              class="material-symbols-outlined cursor-pointer icon-more-horiz"
-              style="font-size: 20px; padding: 0.1rem"
-              (click)="menu.toggle($event); activeItem(rowData)"
-            >
-              more_horiz
-            </span>
-
-            @for(action of config.actions; track $index) {
-            {{ criarMenusModal()(rowData) }}
-            }
-
-            <p-menu
-              #menu
-              [popup]="true"
-              [model]="menuItems"
-              appendTo="body"
-            ></p-menu>
-          </div>
-          } @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){
-          <div class="flex justify-content-end align-items-center">
-            @for (actionPai of config.actionsPai; track $index) {
-            @if(getOrExecute(actionPai.visible, rowData) ?? true) {
-            <kv-button
-              (onClick)="activeItem(rowData); actionPai.command($event)"
-              [type]="'text'"
-              [icon]="actionPai.icon"
-              [severity]="actionPai.severity || 'tertiary'"
-              [disabled]="getOrExecute(actionPai.disabled, rowData) || false"
-              [pTooltip]="getOrExecute(actionPai.tooltip, rowData)"
-              [tooltipPosition]="'left'"
-            />
-
-            } }
-          </div>
-          }
-        </td>
-        }
-      </tr>
-      } @else {
-      <tr
-        [ttRow]="rowNode"
-        (dblclick)="doubleClick($event, rowData)"
-        [ngClass]="{ capitalize: tableCaptalized }"
-      >
-        @for(col of columns; track $index){
-        <td
-          [style.position]="rowNode.level !== 0 ? 'sticky' : null"
-          [style.left.px]="
-            childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null
-          "
-          [style.borderRight]="rowNode.level === 0 ? 'none' : ''"
-          [style.borderLeft]="
-            rowNode.level === 0 && col.field != config.columns[0].field
-              ? 'none'
-              : ''
-          "
-        >
-          <div class="flex flex-row {{ align(col) }}">
-            @if($index == 0) {
-            <div class="w-full-h-full flex align-items-center">
-              <p-treeTableToggler class="hiddenVisible" [rowNode]="rowNode" />
-
-              @if(config.enableSelect) {
-              <p-treeTableCheckbox
-                [disabled]="isDisabledCheckbox()(rowData, rowNode)"
-                (click)="activeItemLote(selectedItems)"
-                [value]="rowNode"
-                [ngStyle]="{
-                  display: isSelectEnabled()(rowData, rowNode)
-                    ? 'block'
-                    : 'none',
-                  'margin-left': config.visibleCheckboxFunction
-                    ? '-34px'
-                    : '0px'
-                }"
-              />
-              }
-            </div>
-            }
-
-            <div class="flex flex-row align-items-center w-full">
-              @if (col.template && validateShowTemplate()(rowNode, col)) {
-              <span class="w-full">
-                @if(getCustomTemplate(col.template.name)) {
-
-                <ng-container
-                  [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
-                  [ngTemplateOutletContext]="{ $implicit: rowData }"
-                >
-                </ng-container>
-                }
-              </span>
-              } @else {
-              <div
-                class="flex flex-row align-items-center {{
-                  (col.boolean || col.centralize) && 'justify-content-center'
-                }} gap-2 w-full"
-              >
-                @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.boolean) {
-
-                <i
-                  class="pi {{
-                    rowData[col.field] ? 'pi-check text-green-300' : ''
-                  }}"
-                  style="font-size: 1rem; font-weight: 700"
-                ></i>
-                } @else {
-                <div class="flex flex-column">
-                  <span class="m-0 text-xs">{{ rowData[col.field] }}</span>
-
-                  @if(col.subtitle) {
-
-                  <p class="m-0 text-xs font-semibold">
-                    {{ rowData[col.subtitle] }}
-                  </p>
-                  }
-                </div>
-                }
-              </div>
-              }
-            </div>
-          </div>
-        </td>
-        } @if((config.actions?.length ?? 0 > 0) || config.actionsPai) {
-        <td style="border-left: none; text-align: center; width: 0">
-          @if((config.actions?.length ?? 0 > 0) &&
-          validateActionPosition()(rowNode)) {
-          <div>
-            <span
-              class="material-symbols-outlined cursor-pointer icon-more-horiz"
-              style="font-size: 20px; padding: 0.1rem"
-              (click)="menu.toggle($event); activeItem(rowData)"
-            >
-              more_horiz
-            </span>
-
-            @for(action of config.actions; track $index) {
-            {{ criarMenusModal()(rowData) }}
-            }
-
-            <p-menu
-              #menu
-              [popup]="true"
-              [model]="menuItems"
-              appendTo="body"
-            ></p-menu>
-          </div>
-          } @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){
-          <div class="flex justify-content-end">
-            @for (actionPai of config.actionsPai; track $index) { @if
-            (getOrExecute(actionPai.visible, rowData) ?? true) {
-            <kv-button
-              (onClick)="activeItem(rowData); actionPai.command($event)"
-              [type]="'text'"
-              [icon]="actionPai.icon"
-              [severity]="actionPai.severity || 'tertiary'"
-              [disabled]="getOrExecute(actionPai.disabled, rowData) || false"
-              [pTooltip]="getOrExecute(actionPai.tooltip, rowData)"
-              [tooltipPosition]="'left'"
-            />
-            } }
-          </div>
-          }
-        </td>
-        }
-      </tr>
-      } }
-    </ng-template>
-
-    <ng-template pTemplate="emptymessage">
-      <tr>
-        <td
-          [attr.colspan]="config.columns.length + 1"
-          style="text-align: center"
-          class="text-xs"
-        >
-          {{ textoEmptyMessage }}
-        </td>
-      </tr>
-    </ng-template>
-  </p-treeTable>
-</div>

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

@@ -1,187 +0,0 @@
-::ng-deep .p-treetable .p-treetable-tbody > tr > td {
-  padding: 0.2rem 0.2rem;
-}
-
-::ng-deep .p-treetable .p-treetable-header {
-  padding: 0rem 0rem;
-}
-
-span {
-  font-size: 14px;
-}
-
-:host ::ng-deep .p-treetable table {
-  table-layout: auto !important;
-}
-
-::ng-deep .p-checkbox .p-checkbox-box {
-  width: 1.125rem;
-  height: 1.125rem;
-}
-
-::ng-deep .p-checkbox {
-  display: flex;
-  align-items: center;
-}
-
-::ng-deep {
-  .p-treetable .p-paginator {
-    scale: 0.75;
-  }
-}
-
-.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%;
-}
-
-::ng-deep .p-treetable .p-treetable-thead > tr > th {
-  background-color: #eaeaea;
-  padding: 0.3rem 0.3rem;
-}
-
-:host
-  ::ng-deep
-  .treetabledraggable
-  .p-treetable
-  .p-treetable-tbody
-  > tr
-  > td
-  .p-treetable-toggler {
-  width: 1rem;
-  height: 1rem;
-}
-
-.tag {
-  width: 5px;
-  height: 20px;
-  border-radius: 0.25rem;
-}
-
-/* Ocultar o ícone por padrão */
-:host ::ng-deep .draggable-cell .drag-icon {
-  visibility: hidden;
-}
-
-/* Mostrar o ícone quando o mouse estiver sobre o <td> */
-:host ::ng-deep .draggable-cell:hover .drag-icon {
-  visibility: visible;
-}
-
-// .btn-table {
-//   background-color: #29b92d;
-//   padding: 12px 12px;
-
-//   &:hover {
-//     background-color: #249a29;
-//   }
-
-//   &:active {
-//     background-color: #1c801f;
-//   }
-
-//   &:disabled {
-//     background-color: #29b92d;
-//   }
-// }
-
-.cdk-drag-preview {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 10px !important;
-}
-
-.cdk-drop-list-dragging {
-  cursor: grabbing;
-}
-
-/* Animate items as they're being sorted. */
-:host ::ng-deep .cdk-drop-list-dragging .cdk-drag {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-/* Animate an item that has been dropped. */
-:host ::ng-deep .cdk-drag-animating {
-  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-::ng-deep svg.p-icon {
-  width: 0.65rem;
-  height: 0.65rem;
-}
-
-::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;
-  }
-}
-
-:host {
-  height: 100%;
-}
-
-::ng-deep .kv-treetable-container,
-::ng-deep p-treeTable {
-  height: 100%;
-}
-
-::ng-deep p-treeTable .p-treetable {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-::ng-deep table {
-  height: auto !important;
-}
-
-::ng-deep p-treeTable .p-treetable .p-treetable-wrapper,
-::ng-deep p-treeTable {
-  height: 100%;
-}
-
-::ng-deep .p-treetable .p-treetable-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);
-  }
-}

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

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { KvTreetableComponent } from './kv-tree-table.component';
-
-describe('TreetableComponent', () => {
-  let component: KvTreetableComponent;
-  let fixture: ComponentFixture<KvTreetableComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [KvTreetableComponent]
-    });
-    fixture = TestBed.createComponent(KvTreetableComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});