keevo-components 2.0.184 → 2.0.185

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

@@ -0,0 +1,219 @@
+::ng-deep .p-treetable .p-treetable-tbody > tr > td {
+  padding: 0.1rem 0.1rem;
+}
+
+::ng-deep .p-treetable .p-treetable-header {
+  padding: 0 !important;
+  margin-bottom: 0.5rem !important;
+  border-radius: 5px !important;
+  background-color: transparent;
+  border: none;
+}
+
+: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;
+  }
+}
+
+::ng-deep .icon-more-horiz {
+  font-weight: 300 !important;
+  font-size: 1.4rem !important;
+  padding: 0.1rem !important;
+  // color: #64748b;
+  color: rgb(var(--kv-color-system), .75) !important;
+  transition: all 0.4s;
+}
+
+.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 {
+  // padding: 0.5rem !important;
+  padding: 0.15rem !important;
+
+  // padding-left: 3% !important;
+  background-color: rgba(var(--kv-color-system), 0.05);
+  color: rgba(var(--kv-color-text), 0.6);
+  font-size: 0.75rem !important;
+  font-weight: 600 !important;
+
+  span {
+    padding: 0.25rem;
+  }
+}
+
+::ng-deep .p-treetable .p-treetable-thead {
+  min-height: 0.5rem !important;
+  padding: 0.15rem !important;
+}
+
+// :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;
+}
+
+//expande o necessário, encolhe se necessário, tamanho inicial
+::ng-deep .p-treetable .p-treetable-wrapper {
+  border: 1px solid rgba(var(--kv-color-system),.1);;
+  border-radius: .5rem;
+  color: rgb(var(--kv-color-system));
+}
+
+::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);
+  }
+}
+
+::ng-deep .p-menuitem .p-menuitem-content .p-menuitem-link {
+  padding: 0.5rem !important;
+  font-size: 0.75rem !important;
+}

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

@@ -0,0 +1,21 @@
+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();
+  });
+});

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

@@ -0,0 +1,355 @@
+import {
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  computed,
+  effect,
+  input,
+  model,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { MenuItem, TreeNode } from 'primeng/api';
+import { TreeTable } from 'primeng/treetable';
+import {
+  ValueOrFn,
+  getOrExecute,
+  mapToMenuItem,
+} from '../../api/components/table/kv-menuitem';
+import { TablePaginate } from '../../api/components/table/table.paginate';
+import { TemplateDirective } from '../../api/directives/template/template.directive';
+import { TreeTableConfig } from '../../api/components/tree-table/tree-table.config';
+import { TreeTableKeys } from '../../api/components/tree-table/tree-table-keys';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { TableConfigColumn } from '../../api/components/table/table.config.column';
+
+@Component({
+  selector: 'kv-tree-table',
+  templateUrl: './kv-tree-table.component.html',
+  styleUrls: ['./kv-tree-table.component.scss'],
+})
+export class KvTreetableComponent {
+  menuItems: MenuItem[] = [];
+  @Input() disableRowNodeSticky: boolean = false;
+
+  @Input() config!: TreeTableConfig;
+  // @Input() dataSource!: any;
+  @Input() gridLines: boolean = false;
+  @Input() tableCaptalized: boolean = false;
+  @Input() selectedItems: any = [];
+  @Input() paginator = true;
+  @Input() rows = 10;
+  @Input() treeTableDraggable = false;
+  @Input() transferArrayItem = false;
+  @Input() ordenacao!: string;
+  @Input() totalRecords!: number;
+  @Input() textoEmptyMessage: string = 'Nenhum registro encontrado';
+  @Input() childrenRecoil: boolean = true;
+  @Input() showHeader: boolean = true;
+  @Input() scrollHeight: string = '';
+  @Input() indFullPage: boolean = false;
+  @Input() searchPlaceholder: string = 'Pesquisar...';
+  dataSource = model<any[]>([]);
+  tamanhoTela = signal<number>(0);
+  kvTreeTable = viewChild<ElementRef>('kvTreeTable');
+  isLoadingSkeleton = input<boolean>(false);
+  dataSourceMock: any[] = [];
+
+  constructor(private elementRef: ElementRef) { }
+
+  /**
+   * @deprecated O valor de pageLinks é atribuído de acordo com o tamanho da tela, essa propriedade não está sendo utilizada
+   */
+  @Input() pageLinksOptions!: number;
+  /**
+   * @deprecated O valor de pageLinks é atribuído de acordo com o tamanho da tela, essa propriedade não está sendo utilizada
+   */
+  @Input() pageLinks!: number;
+  /**
+   * @deprecated A quantidade de paginitorPageIcons é atribuído de acordo com o tamanho da tela, essa propriedade não está sendo utilizada
+   */
+  @Input() showFirstLastIcon!: boolean;
+
+  @Output() onFilter: EventEmitter<any> = new EventEmitter();
+  @Output() onPaginate: EventEmitter<any> = new EventEmitter();
+  @Output() onActiveItem: EventEmitter<any> = new EventEmitter();
+  @Output() onActiveItemLote: EventEmitter<any> = new EventEmitter();
+  @Output() doubleClickEvent: EventEmitter<any> = new EventEmitter();
+  @Output() onNodeSelect: EventEmitter<any> = new EventEmitter();
+  @Output() onNodeUnselect: EventEmitter<any> = new EventEmitter();
+  @Output() onDropItem: EventEmitter<any> = new EventEmitter<any>();
+
+  public readonly selectionKeys = model<TreeTableKeys | undefined>(undefined);
+
+  ngOnInit() {
+    this.loadingSkeletonUtilities();
+
+    this.tamanhoTela.set(window.innerWidth);
+    if (this.ordenacao) {
+      this.dataSource.set(this.sortTreeNodes(this.dataSource()));
+    }
+
+    if (this.indFullPage)
+      this.setMaxHeightTreeTable();
+  }
+
+  @ContentChildren(TemplateDirective) templates!: QueryList<any>;
+  @Input('templates') _templates!: any;
+
+  @ViewChild(TreeTable) pTreeTable!: TreeTable;
+  @ViewChild('inputBusca') inputBusca!: ElementRef;
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.tamanhoTela.set(window.innerWidth);
+  }
+
+  public activeItem(rowData: any) {
+    this.onActiveItem.emit(rowData);
+  }
+
+  public activeItemLote(rowData: any) {
+    this.onActiveItemLote.emit(rowData);
+  }
+
+  getOrExecute<T>(action: ValueOrFn<T>, data: any): T {
+    return getOrExecute(action, data);
+  }
+
+  public onGlobalFilter(table: TreeTable, event: Event) {
+    this.onFilter.emit((event.target as HTMLInputElement).value);
+    table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
+  }
+
+  public paginate($event: any) {
+    if ($event) {
+      let paginaInicial =
+        ($event?.first > 0 ? $event.first / $event.rows : $event.first) + 1;
+      let termoPesquisa = '';
+      let ordenacao = '';
+
+      if ($event.globalFilter) termoPesquisa = $event.globalFilter;
+
+      if ($event.sortField)
+        ordenacao = `${$event.sortField} ${$event.sortOrder === 1 ? 'ASC' : 'DESC'
+          }`;
+
+      const objeto: TablePaginate = {
+        paginaInicial: paginaInicial,
+        tamanhoPagina: $event.rows,
+        termoPesquisa: termoPesquisa,
+        ordenacao: ordenacao,
+      };
+
+      this.onPaginate.emit(objeto);
+    }
+  }
+
+  loadingSkeletonUtilities() {
+    if (this.dataSource().length === 0 && this.isLoadingSkeleton()) {
+      let rowItem: any = {};
+      this.config?.columns.forEach((col) => {
+        rowItem[col.field] = '';
+      });
+
+      this.dataSourceMock = Array.from({ length: this.rows }, () => ({
+        ...rowItem,
+        data: { ...(rowItem.data || {}) },
+        children: [{ ...(rowItem.data || {}) }]
+      }));
+
+      this.dataSource.set(this.dataSourceMock)
+    }
+  }
+
+
+  drop(event: CdkDragDrop<any>) {
+    const draggedNode = event.item.data;
+    const draggedChildData = draggedNode.node.data;
+
+    if (draggedNode.level === 0) {
+      moveItemInArray(this.dataSource(), event.previousIndex, event.currentIndex);
+    } else if (draggedNode.level >= 1) {
+      const parentNode = draggedNode.node.parent;
+
+      if (parentNode) {
+        const parentChildren = parentNode.children.map(
+          (child: any) => child.data
+        );
+        const previousChildIndex = parentChildren.indexOf(draggedChildData);
+
+        const relativeCurrentIndex =
+          previousChildIndex + (event.currentIndex - event.previousIndex);
+
+        const targetChildIndex = Math.max(
+          0,
+          Math.min(parentChildren.length - 1, relativeCurrentIndex)
+        );
+
+        if (previousChildIndex !== -1 && targetChildIndex !== -1) {
+          moveItemInArray(
+            parentNode.children,
+            previousChildIndex,
+            targetChildIndex
+          );
+        }
+        const dropInfo: any = {
+          previousChildIndex: previousChildIndex + 1,
+          targetChildIndex: targetChildIndex + 1,
+        };
+
+        this.onDropItem.emit({ event: event, dropChildInfo: dropInfo });
+      }
+    }
+
+    this.dataSource.set([...this.dataSource()]);
+
+    if (draggedNode.level === 0) {
+      this.onDropItem.emit(event);
+    }
+  }
+
+  sortTreeNodes(nodes: TreeNode[]): TreeNode[] {
+    return nodes
+      .sort((a, b) => a.data[this.ordenacao] - b.data[this.ordenacao])
+      .map((node) => {
+        if (node.children) {
+          node.children = this.sortTreeNodes(node.children);
+        }
+        return node;
+      });
+  }
+
+  // calculateTargetChildIndex(
+  //   event: CdkDragDrop<any>,
+  //   parentChildren: any[],
+  //   previousChildIndex: number
+  // ): number {
+  //   const targetChildIndex =
+  //     previousChildIndex + (event.currentIndex - event.previousIndex);
+
+  //   if (targetChildIndex < 0) {
+  //     return 0;
+  //   } else if (targetChildIndex >= parentChildren.length) {
+  //     return parentChildren.length - 1;
+  //   } else {
+  //     return targetChildIndex;
+  //   }
+  // }
+
+  doubleClick(e: any, rowData: any) {
+    let eventDoubleClick = { event: e, rowData: rowData };
+
+    let array: string[] = [];
+    e.target.classList.forEach((x: any) => array.push(x));
+
+    this.doubleClickEvent.emit(eventDoubleClick);
+  }
+
+  onNodeSelected(event: any) {
+    this.onNodeSelect.emit(event);
+  }
+
+  onNodeUnselected(event: any) {
+    this.onNodeUnselect.emit(event);
+  }
+
+  getCustomTemplate(templatename: string): TemplateRef<any> {
+    return this._templates[templatename];
+  }
+
+  getIcon(icon: string): string {
+    return icon.includes('pi-') ? `pi ${icon}` : '';
+  }
+
+  align(col: TableConfigColumn): string {
+    if (col.centralize) return 'justify-content-center';
+    else if (col.align == 'right') return 'justify-content-end';
+    else return '';
+  }
+
+  resetTreeTable() {
+    if (this.pTreeTable) this.pTreeTable.reset();
+    if (this.inputBusca) this.inputBusca.nativeElement.value = '';
+  }
+
+  setMaxHeightTreeTable() {
+    if (this.kvTreeTable()?.nativeElement.offsetHeight) {
+      const height = this.kvTreeTable()?.nativeElement.offsetHeight;
+      const element = this.elementRef.nativeElement.querySelector('.kv-treetable-container')
+      if (element) element.style.maxHeight = `${height}px`
+    }
+  }
+
+  criarMenusModal = computed(() => (data: any) => {
+    if (this.config.actions && data) {
+      for (const action of this.config.actions) {
+        const menuInsert = mapToMenuItem(action, data);
+
+        let item = this.menuItems.filter(
+          (x) => x.command == menuInsert.command
+        );
+
+        if (item.length == 0) this.menuItems.push(menuInsert);
+        else {
+          if (menuInsert.label != item[0].label) {
+            let index = this.menuItems.indexOf(item[0]);
+            this.menuItems.splice(index, 1);
+          }
+
+          if (menuInsert.visible != item[0].visible) {
+            let index = this.menuItems.indexOf(item[0]);
+            this.menuItems.splice(index, 1);
+          }
+
+          if (menuInsert.disabled != item[0].disabled) {
+            let index = this.menuItems.indexOf(item[0]);
+            this.menuItems.splice(index, 1);
+          }
+        }
+      }
+    }
+  });
+
+  validateActionPosition = computed(() => (rowNode: any) => {
+    if (this.config.actionsPai && rowNode.level == 0) return false;
+    else return true;
+  });
+
+  isSelectEnabled = computed(() => (rowData: any, rowNode: any) => {
+    return this.config.visibleCheckboxFunction
+      ? this.config.visibleCheckboxFunction(rowData, rowNode)
+      : true
+  });
+
+  isDisabledCheckbox = computed(() => (rowData: any, rowNode: any) => {
+    return this.config.disableControlCheckboxFunction
+      ? this.config.disableControlCheckboxFunction(rowData, rowNode)
+      : false;
+  });
+
+  validateShowTemplate = computed(() => (rowNode: any, col: any) => {
+    if (col.templateOnly) {
+      if (col.templateOnly === 'pai') {
+        return rowNode.level === 0;
+      }
+      if (col.templateOnly === 'filho') {
+        return rowNode.level === 1;
+      }
+    }
+    return true;
+  });
+
+  exibirCampo = computed(() => (field: any, rowData: any) => {
+    let visible = field.visible ? field.visible(rowData) : true;
+    return visible;
+  });
+}
+

package/src/lib/components/kv-tree-table/kv-tree-table.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvTreetableComponent } from './kv-tree-table.component'
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { KvButtonModule } from '../kv-button/kv-button.module';
+import { KvInputsModule } from '../kv-inputs/kv-inputs.module';
+
+@NgModule({
+  declarations: [
+    KvTreetableComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    KvButtonModule,
+    KvInputsModule,
+    KvButtonModule
+  ],
+  exports: [
+    KvTreetableComponent
+  ]
+})
+export class KvTreetableModule { }

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

@@ -0,0 +1,16 @@
+<div class="card flex flex-column align-items-center justify-content-center">
+    <p-tree
+        [value]="treeViewData"
+        [selectionMode]="selectionMode"
+        class="w-full"
+        [(selection)]="selectedFiles"
+        (selectionChange)="onSelectionChange()"
+        [filter]="filter" 
+        [filterPlaceholder]="filterPlaceholder"
+        [scrollHeight]="scrollheight" 
+        emptyMessage="Nenhum registro encontrado"
+    >
+    </p-tree>
+</div>
+
+

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

@@ -0,0 +1,19 @@
+:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight {
+    color: white;
+    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-tree-view/kv-tree-view.component.spec.ts

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