keevo-components 2.0.179 → 2.0.180

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

@@ -0,0 +1,338 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input, signal, Output, EventEmitter, computed, inject, ContentChild, TemplateRef, effect } from '@angular/core';
+import { NoArvoreComponent } from '../no-arvore/no-arvore.component';
+import { NoArvore, NoArvoreSimples, ConfigArvoreSimples, EstruturaArvore, DadosArvore, NoPlano } from '../../models/no-arvore.model';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { PrimeNgModule } from '../../../../api/modules/primeng.module';
+import { KeevoComponentsModule, KvButtonsModule } from 'keevo-components';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Component({
+  standalone: true,
+  selector: 'kv-tree-environment',
+  templateUrl: './kv-tree-environment.component.html',
+  styleUrls: ['./kv-tree-environment.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    NoArvoreComponent,
+    ScrollingModule,
+    PrimeNgModule,
+    KeevoComponentsModule,
+    FormsModule,
+    ReactiveFormsModule
+],
+})
+export class KvTreeEnvironmentComponent {
+
+  @Output() onAddClick = new EventEmitter<void>();
+  @Output() onSelectedItem = new EventEmitter<any>();
+  @Output() onSidebarNodeClick = new EventEmitter<NoArvore>();
+
+  @ContentChild('sidebar') sidebarTemplate?: TemplateRef<any>;
+
+  arvoreDeDados = input<NoArvore[]>([]);
+  nosSimples = input<NoArvoreSimples[]>([]);
+  estruturaArvore = input<EstruturaArvore[]>([]);
+  dadosArvore = input<DadosArvore[]>([]);
+  configuracao = input<ConfigArvoreSimples>({});
+  showButtonCollapsed = input<boolean>(true);
+  showAddButton = input<boolean>(true);
+  showSearchField = input<boolean>(false);
+  enableSidebar = input<boolean>(false);
+
+  sidebarVisible = signal<boolean>(false);
+  selectedItem = signal<any>(null);
+  currentSidebarNode = signal<NoArvore | null>(null);
+  
+  private expansaoState = signal<Map<string, boolean>>(new Map());
+  
+  formFiltro = new FormGroup({
+    search: new FormControl('')
+  });
+
+  private searchValue = toSignal(this.formFiltro.get('search')!.valueChanges, { initialValue: '' });
+
+  private dadosProcessados = computed<NoArvore[]>(() => {
+    const estrutura = this.estruturaArvore();
+    const dados = this.dadosArvore();
+    const simples = this.nosSimples();
+    const arvore = this.arvoreDeDados();
+
+    if (estrutura && estrutura.length > 0) {
+      return this.combinarEstruturaComDados(estrutura, dados || []);
+    } else if (simples && simples.length > 0) {
+      return this.converterSimplesParaCompleto(simples);
+    } else {
+      return arvore;
+    }
+  });
+
+  private dadosFiltrados = computed<NoArvore[]>(() => {
+    const search = this.searchValue()?.trim().toLowerCase() || '';
+    const dados = this.dadosProcessados();
+
+    if (!search) {
+      return dados;
+    }
+
+    return this.filtrarArvoreComHierarquia(dados, search);
+  });
+
+  listaPlana = computed<NoPlano[]>(() => {
+    const dados = this.dadosFiltrados();
+    const expansaoMap = this.expansaoState();
+    
+    return this.transformarParaListaPlana(dados, expansaoMap, 0);
+  });
+
+  iconCollapsed = computed<string>(() => {
+    const nosExpandiveis = this.obterTodosNosExpandiveis(this.dadosProcessados());
+    const expansaoMap = this.expansaoState();
+    
+    const algumExpandido = nosExpandiveis.some(node => 
+      expansaoMap.get(node.rotulo) ?? (node.expanded ?? false)
+    );
+
+    return algumExpandido ? 'collapse_all' : 'expand_content';
+  });
+
+  collapsedAll = computed<boolean>(() => {
+    return this.iconCollapsed() === 'expand_content';
+  });
+
+  constructor() {
+    effect(() => {
+      const search = this.searchValue()?.trim().toLowerCase();
+      const dados = this.dadosFiltrados();
+      
+      if (search) {
+        this.expandirTodosNos(dados);
+      }
+    });
+  }
+
+  alternarNo(noPlano: NoPlano): void {
+    if (!noPlano.expansivel) return;
+
+    const novoMapa = new Map(this.expansaoState());
+    const estadoAtual = novoMapa.get(noPlano.dadosOriginais.rotulo) ?? (noPlano.dadosOriginais.expanded ?? false);
+    novoMapa.set(noPlano.dadosOriginais.rotulo, !estadoAtual);
+    
+    this.expansaoState.set(novoMapa);
+  }
+
+  onActionExecuted(noPlano: NoPlano): void {
+    const dados = noPlano.dadosOriginais;
+    this.selectedItem.set(dados);
+    this.onSelectedItem.emit(dados);
+  }
+
+  private converterSimplesParaCompleto(nosSimples: NoArvoreSimples[]): NoArvore[] {
+    const mapa = new Map<string, NoArvore>();
+    const raiz: NoArvore[] = [];
+
+    nosSimples.forEach(simples => {
+      const no: NoArvore = {
+        rotulo: simples.rotulo,
+        icone: simples.icone,
+        cor: simples.cor,
+        ativo: simples.ativo,
+        expanded: simples.expanded,
+        filhos: []
+      };
+      mapa.set(simples.key, no);
+    });
+
+    nosSimples.forEach(simples => {
+      const no = mapa.get(simples.key)!;
+      const partes = simples.key.split('-');
+      
+      if (partes.length === 1) {
+        raiz.push(no);
+      } else {
+        const keyPai = partes.slice(0, -1).join('-');
+        const pai = mapa.get(keyPai);
+        if (pai) {
+          pai.filhos = pai.filhos || [];
+          pai.filhos.push(no);
+        }
+      }
+    });
+
+    return raiz;
+  }
+
+  private transformarParaListaPlana(
+    nodes: NoArvore[], 
+    expansaoMap: Map<string, boolean>, 
+    nivel = 0
+  ): NoPlano[] {
+    const lista: NoPlano[] = [];
+    
+    nodes.forEach((node, index) => {
+      const rotulo = node.rotulo;
+      const expanded = expansaoMap.get(rotulo) ?? (node.expanded ?? false);
+      const temFilhos = !!(node.filhos && node.filhos.length > 0);
+      
+      const noPlano: NoPlano = {
+        id: rotulo,
+        nivel: nivel,
+        expansivel: temFilhos,
+        expanded: expanded,
+        isLast: index === nodes.length - 1,
+        dadosOriginais: node
+      };
+      
+      lista.push(noPlano);
+
+      if (expanded && temFilhos) {
+        const filhosPlanos = this.transformarParaListaPlana(node.filhos!, expansaoMap, nivel + 1);
+        lista.push(...filhosPlanos);
+      }
+    });
+    
+    return lista;
+  }
+
+  trackByNode(index: number, noPlano: NoPlano): string {
+    return noPlano.id;
+  }
+
+  protected expandirTodos(): void {
+    const novoMapa = new Map(this.expansaoState());
+    this.expandirTodosNos(this.dadosProcessados(), novoMapa);
+    this.expansaoState.set(novoMapa);
+  }
+
+  protected colapsarTodos(): void {
+    const novoMapa = new Map(this.expansaoState());
+    this.colapsarTodosNos(this.dadosProcessados(), novoMapa);
+    this.expansaoState.set(novoMapa);
+  }
+
+  private expandirTodosNos(nodes: NoArvore[], mapa?: Map<string, boolean>): void {
+    const mapaDeExpansao = mapa || new Map(this.expansaoState());
+    const stack: NoArvore[] = [...nodes];
+    
+    while (stack.length > 0) {
+      const node = stack.pop()!;
+      
+      if (node.filhos && node.filhos.length > 0) {
+        mapaDeExpansao.set(node.rotulo, true);
+        stack.push(...node.filhos);
+      }
+    }
+    
+    if (!mapa) {
+      this.expansaoState.set(mapaDeExpansao);
+    }
+  }
+
+  private colapsarTodosNos(nodes: NoArvore[], mapa: Map<string, boolean>): void {
+    const stack: NoArvore[] = [...nodes];
+    
+    while (stack.length > 0) {
+      const node = stack.pop()!;
+      
+      if (node.filhos && node.filhos.length > 0) {
+        mapa.set(node.rotulo, false);
+        stack.push(...node.filhos);
+      }
+    }
+  }
+
+  private obterTodosNosExpandiveis(nodes: NoArvore[]): NoArvore[] {
+    const nosExpandiveis: NoArvore[] = [];
+    const stack: NoArvore[] = [...nodes];
+    
+    while (stack.length > 0) {
+      const node = stack.pop()!;
+      
+      if (node.filhos && node.filhos.length > 0) {
+        nosExpandiveis.push(node);
+        stack.push(...node.filhos);
+      }
+    }
+    
+    return nosExpandiveis;
+  }
+
+  private combinarEstruturaComDados(estrutura: EstruturaArvore[], dados: DadosArvore[]): NoArvore[] {
+    const mapaDados = new Map(dados.map(d => [d.id, d]));
+    const mapaEstrutura = new Map<number, NoArvore>();
+    const raiz: NoArvore[] = [];
+
+    estrutura
+      .sort((a, b) => (a.ordem || 0) - (b.ordem || 0)) 
+      .forEach(est => {
+        const dado = mapaDados.get(est.id);
+        
+        const no: NoArvore = {
+          rotulo: dado?.rotulo || est.label,
+          icone: est.icone,
+          cor: est.cor,
+          ativo: dado?.ativo ?? true,
+          expanded: est.expanded,
+          filhos: [],
+          actions: est.actions,
+          data: est.data,
+          showSidebarAction: est.showSidebarAction
+        };
+        
+        mapaEstrutura.set(est.id, no);
+      });
+
+    estrutura.forEach(est => {
+      const no = mapaEstrutura.get(est.id)!;
+      
+      if (!est.parentId) {
+        raiz.push(no);
+      } else {
+        const pai = mapaEstrutura.get(est.parentId);
+        if (pai) {
+          pai.filhos!.push(no);
+        }
+      }
+    });
+
+    return raiz;
+  }
+
+  executeAdd() {
+    this.onAddClick.emit();
+  }
+
+  abrirSidebarParaNo(no: NoArvore): void {
+    this.currentSidebarNode.set(no);
+    this.sidebarVisible.set(true);
+    this.onSidebarNodeClick.emit(no);
+  }
+
+  private filtrarArvoreComHierarquia(nodes: NoArvore[], textoBusca: string): NoArvore[] {
+    const resultado: NoArvore[] = [];
+
+    for (const node of nodes) {
+      const rotuloLower = node.rotulo.toLowerCase();
+      const corresponde = rotuloLower.includes(textoBusca);
+
+      let filhosFiltrados: NoArvore[] = [];
+      if (node.filhos && node.filhos.length > 0) {
+        filhosFiltrados = this.filtrarArvoreComHierarquia(node.filhos, textoBusca);
+      }
+
+      if (corresponde || filhosFiltrados.length > 0) {
+        const noClonado: NoArvore = {
+          ...node,
+          filhos: filhosFiltrados.length > 0 ? filhosFiltrados : node.filhos,
+          expanded: true
+        };
+        resultado.push(noClonado);
+      }
+    }
+
+    return resultado;
+  }
+
+}

package/src/lib/components/kv-tree-environment/components/no-arvore/no-arvore.component.html

@@ -0,0 +1,72 @@
+<li 
+  class="no-container"
+  [class.inativo]="noPlano().dadosOriginais.ativo === false">
+
+  <div class="linhas-guia">
+    @for(i of [].constructor(noPlano().nivel); track i) {
+      <div class="linha-vertical"></div>
+    }
+  </div>
+
+  <div 
+    class="no-conteudo" 
+    [class.is-last-child]="noPlano().isLast"
+    (click)="alternarExpansao()">
+
+    <div class="container-icone" [ngStyle]="estilosIcone()">
+      <span class="material-symbols-outlined text-lg no-icone">
+        {{ noPlano().dadosOriginais.icone }}
+      </span>
+    </div>
+
+    <span 
+      class="no-rotulo"
+      [class.text-black-alpha-80]="!ehNoPai()">
+      {{ noPlano().dadosOriginais.rotulo }}
+    </span>
+
+    @if (noPlano().dadosOriginais.showSidebarAction) {
+      <span
+        class="material-symbols-outlined flex text-lg ml-2 cursor-pointer icone-arrow"
+        (click)="abrirSidebar($event)"
+      >
+        menu
+      </span>
+    }
+
+    @if (items().length > 0) {
+
+      <span
+        class="material-symbols-outlined flex text-lg ml-2 cursor-pointer icone-arrow"
+        (click)="$event.stopPropagation()"
+        (click)="menu.toggle($event)"
+      >
+        more_horiz
+      </span>
+
+      <p-tieredMenu
+        #menu
+        [popup]="true"
+        [model]="items()"
+        appendTo="body"
+      >
+        <ng-template let-item pTemplate="item">
+          <div
+            [pTooltip]="item.tooltip"
+            tooltipPosition="left"
+            class="cursor-pointer"
+            (click)="onActionClick(item, $event)"
+          >
+            <span class="text-xs">
+              {{ item.label }}
+            </span>
+          </div>
+        </ng-template>
+      </p-tieredMenu>
+    }
+    
+  </div>
+  
+  
+</li>
+

package/src/lib/components/kv-tree-environment/components/no-arvore/no-arvore.component.scss

@@ -0,0 +1,170 @@
+:host {
+  --ident-size: 2rem;
+  --line-color: #e0e0e0;
+  --line-width: 1px;
+}
+
+.no-container {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+}
+
+.linhas-guia {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.linha-vertical {
+  width: var(--ident-size);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: var(--line-width);
+    background-color: var(--line-color);
+  }
+}
+
+.no-conteudo {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  padding: 4px 4px 4px 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: calc(var(--ident-size) / -2);
+    top: 50%;
+    width: calc(var(--ident-size) / 2);
+    height: var(--line-width);
+    background-color: var(--line-color);
+  }
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+  }
+}
+
+.is-last-child {
+  & ~ .linhas-guia .linha-vertical:last-child,
+  .linhas-guia .linha-vertical:last-child {
+    &::before {
+      height: 50%;
+    }
+  }
+}
+
+:host:first-child .no-conteudo::before,
+:host:first-child .linhas-guia {
+  display: none;
+}
+
+.no-seta {
+  transition: transform 0.25s ease-in-out;
+  color: #555;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 24px;
+
+  &.rotacionado {
+    transform: rotate(0deg);
+  }
+  &:not(.rotacionado) {
+    transform: rotate(-90deg);
+  }
+}
+
+.container-icone {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  margin-right: 8px;
+  flex-shrink: 0;
+  
+  .no-icone {
+    font-size: 18px;
+  }
+}
+
+.no-rotulo {
+  font-family: system-ui, sans-serif;
+  color: black;
+}
+
+.inativo {
+  .no-rotulo, .no-seta {
+    color: #bdbdbd;
+  }
+}
+
+.icone-arrow{
+  font-weight: 500;
+  color: rgb(var(--kv-color-system), 0.75);
+  transition: all 0.4s;
+
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+}
+
+.no-conteudo:hover .icone-arrow {
+  opacity: 1;
+}
+
+::ng-deep .p-tieredmenu {
+  padding: 0.5rem !important;
+}
+
+::ng-deep .p-tieredmenu .p-tieredmenu-root-list {
+  font-size: 0.75rem !important;
+}
+
+::ng-deep .p-tieredmenu .p-menuitem > .p-menuitem-content {
+  padding: 0.5rem;
+}
+
+::ng-deep p-tieredmenusub .p-disabled *:active {
+  pointer-events: none !important;
+  font-size: 0.75rem !important;
+  padding: 0.5rem !important;
+}
+
+::ng-deep .p-disabled * {
+  pointer-events: auto !important;
+}
+
+.icon-more {
+  font-weight: 500;
+  font-size: 1.4rem !important;
+  color: rgb(var(--kv-color-system), 0.75);
+  transition: all 0.4s;
+}
+
+.icon-more:hover,
+.icon-more:focus {
+  color: #5e5e5e;
+  transition: color 0.3s, transform 0.3s;
+  background-color: #eaeaea;
+  border-radius: 50%;
+}

package/src/lib/components/kv-tree-environment/components/no-arvore/no-arvore.component.spec.ts

@@ -0,0 +1,28 @@
+/* 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 { NoArvoreComponent } from './no-arvore.component';
+
+describe('NoArvoreComponent', () => {
+  let component: NoArvoreComponent;
+  let fixture: ComponentFixture<NoArvoreComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NoArvoreComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NoArvoreComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/kv-tree-environment/components/no-arvore/no-arvore.component.ts

@@ -0,0 +1,91 @@
+import { ChangeDetectionStrategy, Component, computed, EventEmitter, Output, input } from '@angular/core';
+import { NoArvore, NoPlano } from '../../models/no-arvore.model';
+import { CommonModule } from '@angular/common';
+import { MenuItem } from 'primeng/api';
+import { TieredMenuModule } from 'primeng/tieredmenu';
+import { TooltipModule } from 'primeng/tooltip';
+
+@Component({
+  standalone: true,
+  selector: 'no-arvore',
+  templateUrl: './no-arvore.component.html',
+  styleUrls: ['./no-arvore.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    TieredMenuModule,
+    TooltipModule
+  ],
+})
+export class NoArvoreComponent {
+
+  noPlano = input.required<NoPlano>();
+  enableSidebar = input<boolean>(false);
+
+  @Output() noAlternado = new EventEmitter<NoPlano>();
+  @Output() actionExecuted = new EventEmitter<NoPlano>();
+  @Output() sidebarClick = new EventEmitter<NoArvore>();
+
+  items = computed<MenuItem[]>(() => {
+    const actionsOriginais = this.noPlano().dadosOriginais.actions || [];
+    return actionsOriginais.map(action => ({
+      ...action,
+      command: undefined
+    }));
+  });
+
+  ehNoPai = computed<boolean>(() => {
+    const no = this.noPlano().dadosOriginais;
+    return !!(no.filhos && no.filhos.length > 0);
+  });
+
+  estilosIcone = computed<{ [key: string]: string }>(() => {
+    const no = this.noPlano().dadosOriginais;
+    return this.calcularEstilosIcone(no);
+  });
+
+  private getOriginalCommand(actionLabel: string): Function | undefined {
+    const actionsOriginais = this.noPlano().dadosOriginais.actions || [];
+    const action = actionsOriginais.find(a => a.label === actionLabel);
+    return action?.command;
+  }
+
+  alternarExpansao(): void {
+    this.noAlternado.emit(this.noPlano());
+  }
+
+  onActionClick(item: MenuItem, event: Event): void {
+    this.actionExecuted.emit(this.noPlano());
+    
+    const originalCommand = this.getOriginalCommand(item.label as string);
+    
+    if (originalCommand) {
+      originalCommand(event);
+    }
+    
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  abrirSidebar(event: Event): void {
+    event.stopPropagation();
+    this.sidebarClick.emit(this.noPlano().dadosOriginais);
+  }
+
+  private calcularEstilosIcone(no: NoArvore): { [key: string]: string } {
+    const pai = !!(no.filhos && no.filhos.length > 0);
+    const corPadrao = '#2f80ed';
+    const corFinal = no.cor || corPadrao;
+
+    if (no.ativo === false) {
+      return pai
+        ? { 'background-color': '#f2f2f2', 'color': '#bdbdbd' }
+        : { 'background-color': 'transparent', 'color': '#bdbdbd' };
+    }
+
+    return pai
+      ? { 'background-color': corFinal, 'color': 'white' }
+      : { 'background-color': 'transparent', 'color': corFinal };
+  }
+
+}