keevo-components 1.8.125 → 1.8.127

package/src/lib/components/kv-table-edit/kv-table-edit.module.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+
+import {
+  KvButtonsModule,
+  KvInputsModule,
+  PipesModule,
+  PrimeNgModule
+} from '../../../public-api';
+
+import { KvTableEditComponent } from './kv-table-edit.component';
+import { SelectButtonModule } from 'primeng/selectbutton';
+
+@NgModule({
+  declarations: [KvTableEditComponent],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+    KvInputsModule,
+    KvButtonsModule,
+    PipesModule,
+    SelectButtonModule
+  ],
+  exports: [KvTableEditComponent]
+})
+export class KvTableEditModule { }

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

@@ -0,0 +1,556 @@
+<div *ngIf="!treeTableDraggable">
+    <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]="showFirstLastIcon"
+        [styleClass]="gridLines ? 'p-treetable-gridlines' : ''"
+        [(selection)]="selectedItems"
+        [lazy]="config.lazy"
+        (onLazyLoad)="paginate($event)"
+        currentPageReportTemplate="{first} - {last} de {{ totalRecords }}"
+        (onNodeSelect)="onNodeSelected($event)"
+        (onNodeUnselect)="onNodeUnselected($event)"
+    >
+        <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">
+                <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 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="btns-options">
+                        @for (action of config.actionsLote; track $index) {
+                        <p-button
+                            [icon]="getIcon(action.icon)"
+                            [rounded]="true"
+                            *ngIf="(selectedItems.length > 0 || action.showAcoesLote) && exibirCampo(action, this.action)"
+                            styleClass="p-0 flex justify-content-center"
+                            [style.backgroundColor]='"#1DA750"'
+                            (onClick)="action?.command(); activeItemLote(selectedItems)"
+                            [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
+                            [tooltipPosition]="'bottom'"
+                            [disabled]="getOrExecute(action.disabled, selectedItems)"
+                            [style]="{width: '2rem', height: '2rem'}"
+                        >
+                            @if (!action.icon.includes('pi-')){
+                            <span class="material-symbols-outlined md-22" style="color: white">
+                                {{ getOrExecute(action.icon, selectedItems) }}
+                            </span>
+                            }
+                        </p-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]="centralizarColunas(col) && alignColunasHeader(col) == '' ? 'flex flex-row justify-content-center' : 'flex flex-row'"
+                                [style]="alignColunasHeader(col)"
+                            >
+                                <span>{{ col.header }}</span>
+                                <p-sortIcon
+                                    *ngIf="col.sortable === true"
+                                    [field]="col.field"
+                                    style="font-size: 10px"
+                                />
+
+                                <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
+                    ttResizableColumn
+                    [style.width]="col.width"
+                    [style]="col.centralize ? 'text-align: center;' : ''"
+                >
+                    {{ col.header }} <br>
+                </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]="returnStyleRow(col, rowNode)"
+                    [style.position]="rowNode.level !== 0 ? 'sticky' : null"
+                    [style.left.px]="rowNode.level !== 0 ? rowNode.level*30 : null"
+                >
+
+                    <div class="flex flex-row  {{col.boolean ? 'justify-content-center' : '' }}">
+                        <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">
+
+                                <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;" *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"
+                            style="font-size: 22px"
+                            (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) {
+                        <p-button
+                            [icon]="getIcon(actionPai.icon)"
+                            [rounded]="true"
+                            [severity]="actionPai.severity ?? 'secondary'"
+                            [style]="{width: '2rem', height: '2rem'}"
+                            (onClick)="activeItem(rowData);actionPai.command($event);"
+                            styleClass="p-0 flex justify-content-center"
+                        >
+                            @if(!actionPai.icon.includes('pi-')) {
+                            <span class="material-icons text-xl">{{ actionPai.icon }}</span>
+                            }
+                        </p-button>
+                        }
+                        }
+
+                    </div>
+                    }
+
+                </td>
+
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="emptymessage">
+          <tr >
+              <td [attr.colspan]="config.columns.length + 1" style="text-align: center; border-radius: 10px !important">{{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]="showFirstLastIcon"
+        [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">
+                <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 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="btns-options">
+                        @for (action of config.actionsLote; track $index) {
+
+                        <p-button
+                            [icon]="getIcon(action.icon)"
+                            [rounded]="true"
+                            *ngIf="(selectedItems.length > 0 || action.showAcoesLote) && exibirCampo(action, this.action)"
+                            styleClass="p-0 flex justify-content-center"
+                            [style.backgroundColor]='"#1DA750"'
+                            (onClick)="action?.command(); activeItemLote(selectedItems)"
+                            [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
+                            [tooltipPosition]="'bottom'"
+                            [disabled]="getOrExecute(action.disabled, selectedItems)"
+                            [style]="{width: '2rem', height: '2rem'}"
+                        >
+                            @if (!action.icon.includes('pi-')){
+                            <span class="material-symbols-outlined md-22" style="color: white">
+                                {{ getOrExecute(action.icon, selectedItems) }}
+                            </span>
+                            }
+                        </p-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]="centralizarColunas(col) && alignColunasHeader(col) == '' ? 'flex flex-row justify-content-center' : 'flex flex-row'"
+                                [style]="alignColunasHeader(col)"
+                            >
+                                <span>{{ col.header }}</span>
+                                <p-sortIcon
+                                    *ngIf="col.sortable === true"
+                                    [field]="col.field"
+                                    style="font-size: 10px"
+                                />
+
+                                <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
+                    ttResizableColumn
+                    [style.width]="col.width"
+                    [style]="col.centralize ? 'text-align: center;' : ''"
+                >
+                    {{ col.header }} <br>
+                </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
+                cdkDrag
+                [cdkDragData]="rowNode"
+                [ttRow]="rowNode"
+                (dblclick)="doubleClick($event, rowData)"
+                [ngClass]="{ 'capitalize': tableCaptalized }"
+            >
+
+                @for(col of columns; track $index){
+                <td
+                    [style]="returnStyleRow(col, rowNode)"
+                    [style.position]="rowNode.level !== 0 ? 'sticky' : null"
+                    [style.left.px]="rowNode.level !== 0 ? rowNode.level*30 : null"
+                >
+
+                    <div class="flex flex-row  {{col.boolean ? 'justify-content-center' : '' }}">
+                        <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">
+
+                                <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;" *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"
+                            style="font-size: 22px"
+                            (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) {
+                        <p-button
+                            [icon]="getIcon(actionPai.icon)"
+                            [rounded]="true"
+                            [severity]="actionPai.severity ?? 'secondary'"
+                            [style]="{width: '2rem', height: '2rem'}"
+                            (onClick)="activeItem(rowData);actionPai.command($event);"
+                            styleClass="p-0 flex justify-content-center"
+                        >
+                            @if(!actionPai.icon.includes('pi-')) {
+                            <span class="material-icons text-xl">{{ actionPai.icon }}</span>
+                            }
+                        </p-button>
+                        }
+                        }
+
+                    </div>
+                    }
+
+                </td>
+
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="emptymessage">
+          <tr >
+              <td [attr.colspan]="config.columns.length + 1" style="text-align: center; border-radius: 10px !important">{{textoEmptyMessage}}</td>
+          </tr>
+      </ng-template>
+    </p-treeTable>
+</div>