keevo-components 2.0.184 → 2.0.185

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

@@ -0,0 +1,103 @@
+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);
+  }
+
+  toggleMenu(event: Event, menu: any): void {
+    event.stopPropagation();
+    menu.toggle(event);
+  }
+
+  private calcularEstilosIcone(no: NoArvore): { [key: string]: string } {
+    const pai = !!(no.filhos && no.filhos.length > 0);
+
+    const corPadrao = 'transparent';
+    const corBackgroundIcon = no.backgroundIconColor || corPadrao;
+    const corIcon = no.iconColor || '#64748B';
+
+    if(!no.ativo) {
+      return pai ? {
+        'background-color': '#f2f2f2',
+        'color': '#bdbdbd'
+      } : {
+        'background-color': 'transparent',
+        'color': '#bdbdbd'
+      };
+    }
+
+    return {
+      'background-color': corBackgroundIcon,
+      'color': corIcon
+    }
+  }
+
+}

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

@@ -0,0 +1,63 @@
+import { MenuItem } from 'primeng/api';
+
+export interface NoPlano {
+  id: string;
+  nivel: number;
+  expansivel: boolean;
+  expanded: boolean;
+  isLast: boolean;
+  dadosOriginais: NoArvore;
+}
+
+export interface NoArvore {
+  rotulo: string;
+  icone: string;
+  backgroundIconColor?: string;
+  iconColor?: string;
+  ativo?: boolean;
+  expanded?: boolean;
+  filhos?: NoArvore[];
+  actions?: MenuItem[];
+  data?: any;
+  showSidebarAction?: boolean;
+}
+
+export interface NoArvoreSimples {
+  key: string;
+  rotulo: string;
+  icone: string;
+  backgroundIconColor?: string;
+  iconColor?: string;
+  ativo?: boolean;
+  expanded?: boolean;
+}
+
+export interface ConfigArvoreSimples {
+  altura?: string;
+  margemItem?: number;
+  mostrarBotaoColapsar?: boolean;
+  mostrarBotaoAdicionar?: boolean;
+}
+
+export interface EstruturaArvore {
+  id: number;
+  parentId?: number;
+  label: string;
+  tipo: 'pasta' | 'item';
+  icone: string;
+  backgroundIconColor?: string;
+  iconColor?: string; 
+  expanded?: boolean;
+  ordem?: number;
+  actions?: MenuItem[];
+  data?: any;
+  showSidebarAction?: boolean;
+}
+
+export interface DadosArvore {
+  id: number;
+  rotulo?: string;
+  ativo?: boolean;
+  propriedades?: any;
+  metadados?: any;
+}

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

@@ -0,0 +1,452 @@
+<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">
+          <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-2 justify-content-center
+            {{
+              tamanhoTela() < 768 ? '' : 'input-search'
+            }}">
+            @if(config.enableFilter) {
+              <input
+                pInputText
+                pAutoFocus
+                [autofocus]="true"
+                type="text"
+                (input)="onGlobalFilter(tt, $event)"
+                [placeholder]="searchPlaceholder"
+                class="h-2rem text-sm"
+                #inputBusca
+              />
+            }
+          </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" />
+                }
+              </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"
+                        (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"
+                      (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>