keevo-components 2.0.185 → 2.0.187

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

@@ -1,342 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input, signal, Output, EventEmitter, computed, inject, ContentChild, TemplateRef, effect, untracked } 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 { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { toSignal } from '@angular/core/rxjs-interop';
-import { KvButtonModule } from '../../../kv-button/kv-button.module';
-import { KvInputsModule } from '../../../kv-inputs/kv-inputs.module';
-
-@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,
-    FormsModule,
-    KvButtonModule,
-    KvInputsModule,
-    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) {
-        untracked(() => 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,
-        backgroundIconColor: simples.backgroundIconColor,
-        iconColor: simples.iconColor,
-        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,
-          backgroundIconColor: est.backgroundIconColor,
-          iconColor: est.iconColor,
-          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

@@ -1,73 +0,0 @@
-<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-base ml-2 cursor-pointer icone-arrow text-600"
-        style="transform: translate(0px, 2px); padding: 2px;"
-        (click)="abrirSidebar($event)"
-      >
-        menu
-      </span>
-    }
-
-    @if (items().length > 0) {
-
-      <span
-        class="material-symbols-outlined flex text-lg ml-2 cursor-pointer icone-arrow text-600"
-        style="transform: translate(0px, 2px);"
-        (click)="toggleMenu($event, menu)"
-      >
-        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

@@ -1,179 +0,0 @@
-$kv-color-system: 88,25,153;
-
-: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 6px 6px 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);
-  }
-}
-
-.no-conteudo {
-  &: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);
-    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: 0 8px 0 8px;
-  flex-shrink: 0;
-  transform: translate(0px, 1px);
-
-  .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;
-  transition: all 0.4s;
-  opacity: 1;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-
-  &:hover {
-    background-color: #eaeaea;
-    transition: color 0.3s, transform 0.3s;
-    border-radius: 50%;
-  }
-}
-
-.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

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