keevo-components 2.0.185 → 2.0.186

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

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

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

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