keevo-components 1.8.191 → 1.8.192

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

@@ -1,610 +0,0 @@
-<div *ngIf="!treeTableDraggable">
-  <p-treeTable
-    #tt
-    [value]="dataSource"
-    [columns]="config.columns"
-    [resizableColumns]="true"
-    [tableStyle]="{ 'min-width': '50rem' }"
-    [resizableColumns]="true"
-    [paginator]="paginator"
-    [rows]="rows"
-    [totalRecords]="totalRecords"
-    [rowsPerPageOptions]="[5, 10, 25, 50]"
-    [showFirstLastIcon]="tamanhoTela > 960 ? true : false"
-    [pageLinks]="tamanhoTela > 960 ? 2 : 1"
-    [styleClass]="gridLines ? 'p-treetable-gridlines' : ''"
-    [(selection)]="selectedItems"
-    [lazy]="config.lazy"
-    (onLazyLoad)="paginate($event)"
-    (onNodeSelect)="onNodeSelected($event)"
-    (onNodeUnselect)="onNodeUnselected($event)"
-    [showCurrentPageReport]="true"
-    currentPageReportTemplate="{first} - {last} de {totalRecords}"
-  >
-    <ng-template pTemplate="caption" *ngIf="config.enableCation">
-      <div
-        class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0"
-        style="background-color: #eaeaea"
-      >
-        <div class="col-12 flex flex-column">
-          <div *ngIf="config.title" class="text-md font-bold my-3">
-            {{ config.title }}
-          </div>
-          <div *ngIf="config.subtitle" 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-4 justify-content-center {{
-            tamanhoTela < 768 ? '' : 'input-search'
-          }}"
-        >
-          <span *ngIf="config.enableFilter" class="p-input-icon-left">
-            <i class="pi pi-search"></i>
-
-            <input
-              pInputText
-              pAutoFocus
-              [autofocus]="true"
-              type="text"
-              (input)="onGlobalFilter(tt, $event)"
-              placeholder="Pesquisar..."
-              class="h-2rem"
-            />
-          </span>
-        </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) {
-            <button
-              pButton
-              [icon]="getIcon(action.icon)"
-              *ngIf="
-                (selectedItems.length > 0 || action.showAcoesLote) &&
-                exibirCampo(action, this.action)
-              "
-              class="w-2rem h-2rem flex align-items-center justify-content-center border-none btn-table"
-              (click)="action?.command(); activeItemLote(selectedItems)"
-              [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
-              [tooltipPosition]="'bottom'"
-              [disabled]="getOrExecute(action.disabled, selectedItems)"
-            >
-              @if (!action.icon.includes('pi-')){
-              <span
-                class="material-symbols-outlined"
-                style="font-size: 25px; color: white"
-              >
-                {{ getOrExecute(action.icon, selectedItems) }}
-              </span>
-              }
-            </button>
-            }
-          </div>
-        </div>
-      </div>
-    </ng-template>
-
-    <ng-template pTemplate="header" let-columns>
-      <tr>
-        @for(col of columns; track $index){
-        <th
-          [ttSortableColumn]="col.field"
-          [ttSortableColumnDisabled]="col.sortable === false"
-          class="text-sm"
-          [style.width]="col.width"
-        >
-          <div>
-            <div [ngClass]="{ flex: $index == 0, 'gap-3': $index == 0 }">
-              <div *ngIf="$index == 0 && config.enableSelect">
-                <p-treeTableHeaderCheckbox
-                  (click)="activeItemLote(selectedItems)"
-                />
-              </div>
-
-              <div class="flex flex-row align-items-center  {{ align(col) }}">
-                <span>{{ col.header }}</span>
-
-                @if(col.sortable) {
-                <p-treeTableSortIcon [field]="col.field" />
-
-                }
-
-                <span
-                  *ngIf="col.headerTooltip"
-                  class="material-symbols-outlined flex align-items-center"
-                  [pTooltip]="col.headerTooltip"
-                  >info</span
-                >
-              </div>
-            </div>
-          </div>
-        </th>
-        @if (config.actions?.length ?? 0 > 0) {
-        <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>{{ col.header }}</span>
-
-            @if(col.sortable) {
-            <p-treeTableSortIcon [field]="col.field" />
-            }
-          </div>
-        </th>
-        } @if (config.actions?.length ?? 0 > 0) {
-        <th [style.width]="5"></th>
-        }
-      </tr>
-    </ng-template>
-
-    <ng-template
-      pTemplate="body"
-      let-rowNode
-      let-rowData="rowData"
-      let-columns="columns"
-    >
-      <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) }}">
-            <div
-              class="w-full-h-full flex align-items-center"
-              *ngIf="$index == 0"
-            >
-              <p-treeTableToggler class="hiddenVisible" [rowNode]="rowNode" />
-
-              <p-treeTableCheckbox
-                [disabled]="isDisabledCheckbox(rowData, rowNode)"
-                (click)="activeItemLote(selectedItems)"
-                [value]="rowNode"
-                *ngIf="config.enableSelect == true"
-              />
-            </div>
-
-            <div class="flex flex-row align-items-center">
-              <div
-                class="flex flex-row align-items-center justify-content-center gap-2"
-              >
-                @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>
-
-                }
-                <i
-                  *ngIf="col.boolean"
-                  class="pi {{
-                    rowData[col.field] ? 'pi-check text-green-300' : ''
-                  }}"
-                  style="font-size: 1.1rem"
-                ></i>
-
-                <div class="flex flex-column" *ngIf="!col.boolean">
-                  <span class="m-0">{{ rowData[col.field] }}</span>
-
-                  <p *ngIf="col.subtitle" class="m-0 text-xs font-semibold">
-                    {{ rowData[col.subtitle] }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <span *ngIf="col.template && validateShowTemplate(rowNode, col)">
-            <ng-container
-              *ngIf="getCustomTemplate(col.template.name)"
-              [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
-              [ngTemplateOutletContext]="{ $implicit: rowData }"
-            >
-            </ng-container>
-          </span>
-        </td>
-        }
-
-        <td
-          style="border-left: none; text-align: end"
-          *ngIf="(config.actions?.length ?? 0 > 0) || config.actionsPai"
-        >
-          <div
-            *ngIf="
-              (config.actions?.length ?? 0 > 0) &&
-              validateActionPosition(rowNode)
-            "
-          >
-            <span
-              class="material-symbols-outlined cursor-pointer icon-more-horiz p-1"
-              style="font-size: 25px"
-              (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) {
-            <button
-              pButton
-              [icon]="getIcon(actionPai.icon)"
-              [severity]="actionPai.severity ?? 'secondary'"
-              [style]="{ width: '2rem', height: '2rem' }"
-              (click)="activeItem(rowData); actionPai.command($event)"
-              class="p-0 flex justify-content-center border-none btn-table"
-            >
-              @if(!actionPai.icon.includes('pi-')) {
-              <span
-                class="material-icons text-xl"
-                style="font-size: 25px; color: white"
-                >{{ actionPai.icon }}</span
-              >
-              }
-            </button>
-            } }
-          </div>
-          }
-        </td>
-      </tr>
-    </ng-template>
-    <ng-template pTemplate="emptymessage">
-      <tr>
-        <td
-          [attr.colspan]="config.columns.length + 1"
-          style="text-align: center"
-        >
-          {{ textoEmptyMessage }}
-        </td>
-      </tr>
-    </ng-template>
-  </p-treeTable>
-</div>
-
-<div
-  *ngIf="treeTableDraggable"
-  cdkDropList
-  class="example-list"
-  (cdkDropListDropped)="drop($event)"
->
-  <p-treeTable
-    #tt
-    [value]="dataSource"
-    [columns]="config.columns"
-    [resizableColumns]="true"
-    [tableStyle]="{ 'min-width': '50rem' }"
-    [resizableColumns]="true"
-    [paginator]="paginator"
-    [rows]="rows"
-    [pageLinks]="pageLinks"
-    [totalRecords]="totalRecords"
-    [rowsPerPageOptions]="[5, 10, 25, 50]"
-    [showFirstLastIcon]="tamanhoTela > 960 ? true : false"
-    [pageLinks]="tamanhoTela > 960 ? 2 : 1"
-    [styleClass]="gridLines ? 'p-treetable-gridlines' : ''"
-    [(selection)]="selectedItems"
-    [lazy]="config.lazy"
-    (onLazyLoad)="paginate($event)"
-    currentPageReportTemplate="{first} - {last} de {{ totalRecords }}"
-  >
-    <ng-template pTemplate="caption" *ngIf="config.enableCation">
-      <div
-        class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0"
-        style="background-color: #eaeaea"
-      >
-        <div class="col-12 flex flex-column">
-          <div *ngIf="config.title" class="text-md font-bold my-3">
-            {{ config.title }}
-          </div>
-          <div *ngIf="config.subtitle" 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-4 justify-content-center {{
-            tamanhoTela < 768 ? '' : 'input-search'
-          }}"
-        >
-          <span *ngIf="config.enableFilter" class="p-input-icon-left">
-            <i class="pi pi-search"></i>
-
-            <input
-              pInputText
-              pAutoFocus
-              [autofocus]="true"
-              type="text"
-              (input)="onGlobalFilter(tt, $event)"
-              placeholder="Pesquisar..."
-              class="h-2rem"
-            />
-          </span>
-        </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) {
-
-            <button
-              pButton
-              [icon]="getIcon(action.icon)"
-              *ngIf="
-                (selectedItems.length > 0 || action.showAcoesLote) &&
-                exibirCampo(action, this.action)
-              "
-              class="w-2rem h-2rem flex align-items-center justify-content-center border-none btn-table"
-              (click)="action?.command(); activeItemLote(selectedItems)"
-              [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
-              [tooltipPosition]="'bottom'"
-              [disabled]="getOrExecute(action.disabled, selectedItems)"
-            >
-              @if (!action.icon.includes('pi-')){
-              <span
-                class="material-symbols-outlined md-22"
-                style="font-size: 25px; color: white"
-              >
-                {{ getOrExecute(action.icon, selectedItems) }}
-              </span>
-              }
-            </button>
-            }
-          </div>
-        </div>
-      </div>
-    </ng-template>
-
-    <ng-template pTemplate="header" let-columns>
-      <tr>
-        @for(col of columns; track $index){
-        <th
-          [ttSortableColumn]="col.field"
-          [ttSortableColumnDisabled]="col.sortable === false"
-          class="text-sm"
-          [style.width]="col.width"
-        >
-          <div>
-            <div [ngClass]="{ flex: $index == 0, 'gap-3': $index == 0 }">
-              <div *ngIf="$index == 0 && config.enableSelect">
-                <p-treeTableHeaderCheckbox
-                  (click)="activeItemLote(selectedItems)"
-                />
-              </div>
-
-              <div class="flex flex-row align-items-center  {{ align(col) }}">
-                <span>{{ col.header }}</span>
-
-                @if(col.sortable) {
-                <p-treeTableSortIcon [field]="col.field" />
-
-                }
-
-                <span
-                  *ngIf="col.headerTooltip"
-                  class="material-symbols-outlined flex align-items-center"
-                  [pTooltip]="col.headerTooltip"
-                  >info</span
-                >
-              </div>
-            </div>
-          </div>
-        </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>{{ col.header }}</span>
-
-            @if(col.sortable) {
-            <p-treeTableSortIcon [field]="col.field" />
-
-            }
-          </div>
-        </th>
-        }
-        <th [style.width]="5"></th>
-      </tr>
-    </ng-template>
-
-    <ng-template
-      pTemplate="body"
-      let-rowNode
-      let-rowData="rowData"
-      let-columns="columns"
-    >
-      <tr
-        cdkDrag
-        [cdkDragData]="rowNode"
-        [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
-          "
-        >
-          <div class="flex flex-row  {{ align(col) }}">
-            <div
-              class="w-full-h-full flex align-items-center"
-              *ngIf="$index == 0"
-            >
-              <p-treeTableToggler class="hiddenVisible" [rowNode]="rowNode" />
-
-              <p-treeTableCheckbox
-                [disabled]="isDisabledCheckbox(rowData, rowNode)"
-                (click)="activeItemLote(selectedItems)"
-                [value]="rowNode"
-                *ngIf="config.enableSelect == true"
-              />
-            </div>
-
-            <div class="flex flex-row align-items-center">
-              <div
-                class="flex flex-row align-items-center justify-content-center gap-2"
-              >
-                @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>
-
-                }
-
-                <i
-                  *ngIf="col.boolean"
-                  class="pi {{
-                    rowData[col.field] ? 'pi-check text-green-300' : ''
-                  }}"
-                  style="font-size: 1.1rem"
-                ></i>
-
-                <div class="flex flex-column" *ngIf="!col.boolean">
-                  <span class="m-0">{{ rowData[col.field] }}</span>
-
-                  <p *ngIf="col.subtitle" class="m-0 text-xs font-semibold">
-                    {{ rowData[col.subtitle] }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <span *ngIf="col.template && validateShowTemplate(rowNode, col)">
-            <ng-container
-              *ngIf="getCustomTemplate(col.template.name)"
-              [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
-              [ngTemplateOutletContext]="{ $implicit: rowData }"
-            >
-            </ng-container>
-          </span>
-        </td>
-        }
-
-        <td
-          style="border-left: none; text-align: end"
-          *ngIf="(config.actions?.length ?? 0 > 0) || config.actionsPai"
-          [style.borderRight]="rowNode.level === 0 ? 'none' : ''"
-          [style.borderLeft]="rowNode.level === 0 ? 'none' : ''"
-        >
-          <div
-            *ngIf="
-              (config.actions?.length ?? 0 > 0) &&
-              validateActionPosition(rowNode)
-            "
-          >
-            <span
-              class="material-symbols-outlined cursor-pointer icon-more-horiz p-1"
-              style="font-size: 25px"
-              (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) {
-            <button
-              pButton
-              [icon]="getIcon(actionPai.icon)"
-              [severity]="actionPai.severity ?? 'secondary'"
-              [style]="{ width: '2rem', height: '2rem' }"
-              (click)="activeItem(rowData); actionPai.command($event)"
-              class="p-0 flex justify-content-center border-none btn-table"
-            >
-              @if(!actionPai.icon.includes('pi-')) {
-              <span class="material-icons text-xl" style="font-size: 25px">{{
-                actionPai.icon
-              }}</span>
-              }
-            </button>
-            } }
-          </div>
-          }
-        </td>
-      </tr>
-    </ng-template>
-    <ng-template pTemplate="emptymessage">
-      <tr>
-        <td
-          [attr.colspan]="config.columns.length + 1"
-          style="text-align: center"
-        >
-          {{ textoEmptyMessage }}
-        </td>
-      </tr>
-    </ng-template>
-  </p-treeTable>
-</div>

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

@@ -1,77 +0,0 @@
-::ng-deep .p-treetable .p-treetable-tbody > tr > td {
-  padding: 0.4rem 0.4rem;
-}
-
-::ng-deep .p-treetable .p-treetable-header {
-  padding: 0rem 0rem;
-}
-
-span {
-  font-size: 14px;
-}
-
-:host ::ng-deep .p-treetable table {
-  table-layout: auto !important;
-}
-
-.icon-more-horiz:hover,
-.icon-more-horiz:focus {
-  color: #5e5e5e;
-  transform: scale(1.2);
-  transition: color 0.3s, transform 0.3s;
-  background-color: #eaeaea;
-  border-radius: 50%;
-}
-
-::ng-deep .p-treetable .p-treetable-thead > tr > th {
-  background-color: #eaeaea;
-}
-
-.tag {
-  width: 5px;
-  height: 20px;
-  border-radius: 0.25rem;
-}
-
-.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.8rem;
-  height: 1rem;
-}

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