keevo-components 2.0.180 → 2.0.181

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

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

@@ -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();
-  });
-});

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

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

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

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

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

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