keevo-components 1.8.45 → 1.8.47

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

@@ -1,316 +0,0 @@
-<div>
-    <p-treeTable
-        #tt
-        [value]="dataSource"
-        [columns]="config.columns"
-        [resizableColumns]="true"
-        [tableStyle]="{'min-width': '50rem'}"
-        [resizableColumns]="true"
-        [styleClass]="gridLines ? 'p-treetable-gridlines' : ''"
-        [(selection)]="selectedItems"
-        (onLazyLoad)="paginate($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]="
-            tamanhoTela < 768
-              ? 'flex flex-row align-items-center col-10 md:col-6 lg:col-4 justify-content-center'
-              : 'flex flex-row align-items-center col-12 md:col-6 lg:col-4 justify-content-center 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-2.5rem"
-                        />
-                    </span>
-
-                </div>
-
-                <div class="flex flex-row col-1 justify-content-end p-0">
-                    <div
-                        *ngFor="let action of config.actionsLote"
-                        class="btns-options"
-                    >
-                        <button
-                            id="actionLoteBtns"
-                            pButton
-                            *ngIf="
-                (selectedItems.length > 0 || action.showAcoesLote) &&
-                exibirCampo(action, this.action)
-              "
-                            class="actionLoteBtns p-button-raised p-button-text"
-                            (click)="action?.command(commandEvent); activeItemLote(selectedItems)"
-                            [pTooltip]="retornarCampo(action, selectedItems, 'tooltip')"
-                            [tooltipPosition]="'bottom'"
-                            [style.backgroundColor]="
-                retornarCampo(action, selectedItems, 'btnColor')
-              "
-                            [disabled]="retornarCampo(action, selectedItems, 'disabled')"
-                        >
-                            <span
-                                class="material-symbols-outlined md-22"
-                                [style.color]="
-                  retornarCampo(action, selectedItems, 'iconBtnColor')
-                "
-                            >
-                                {{ retornarCampo(action, selectedItems, "icon") }}
-                            </span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </ng-template>
-
-        <ng-template
-            pTemplate="header"
-            let-columns
-        >
-            <tr>
-                <th
-                    *ngFor="let col of columns; index as i"
-                    [ttSortableColumn]="col.field"
-                    [ttSortableColumnDisabled]="col.sortable === false"
-                    class="text-sm"
-                    [style.width]="col.width"
-                >
-                    <div>
-                        <div [ngClass]="{ flex: i == 0, 'gap-3': i == 0 }">
-                            <div *ngIf="i == 0 && config.enableSelect">
-                                <p-treeTableHeaderCheckbox
-                                    (click)="activeItemLote(selectedItems)"></p-treeTableHeaderCheckbox>
-                            </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"
-                                ></p-sortIcon>
-
-                                <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>
-                <th
-                    *ngFor="let col of columns"
-                    ttResizableColumn
-                    [style.width]="col.width"
-                    [style]="col.centralize ? 'text-align: center;' : ''"
-                >
-                    {{ col.header }} <br>
-                </th>
-
-                <th
-                    [style.width]="5"
-                    *ngIf="config.actions.length > 0"
-                ></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 }"
-            >
-                <td
-                    *ngFor="let col of columns;  let i = index"
-                    [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="i == 0"
-                        >
-                            <p-treeTableCheckbox
-                                [disabled]="isDisabledCheckbox(rowData, rowNode)"
-                                (click)="activeItemLote(selectedItems)"
-                                [value]="rowNode"
-                                *ngIf="config.enableSelect == true"
-                            ></p-treeTableCheckbox>
-
-                            <p-treeTableToggler
-                                class="hiddenVisible"
-                                [rowNode]="rowNode"
-                            ></p-treeTableToggler>
-                            <!-- 
-                            <p-treeTableToggler
-                                [rowNode]="rowNode"
-                                *ngIf="!rightCollapse"
-                            ></p-treeTableToggler>
-                            <p-treeTableToggler
-                                class="hiddenVisible"
-                                [rowNode]="rowNode"
-                                *ngIf="rightCollapse"
-                            ></p-treeTableToggler> -->
-                        </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 || config.actionsPai"
-                >
-
-                    <div *ngIf="config.actions.length > 0 && validateActionPosition(rowNode)">
-                        <div
-                            class="flex flex-row justify-content-center gap-1"
-                            *ngIf="acoesLinhaTabela"
-                        >
-                            <p-button
-                                *ngFor="let action of config.actions"
-                                icon="pi {{action.icon}}"
-                                [rounded]="true"
-                                [severity]="action.severity ? action.severity : 'secondary'"
-                                [style]="{width: '2rem', height: '2rem'}"
-                                (onClick)="action.command($event)"
-                            ></p-button>
-
-                        </div>
-
-                        <span
-                            *ngIf="!acoesLinhaTabela"
-                            class="material-symbols-outlined cursor-pointer icon-more-horiz"
-                            style="font-size: 22px"
-                            (click)="menu.toggle($event); activeItem(rowData)"
-                        >
-                            more_horiz
-                        </span>
-
-                        <div *ngFor="let action of config.actions">
-                            {{ criarMenusModal(rowData) }}
-                        </div>
-
-                        <p-menu
-                            #menu
-                            [popup]="true"
-                            [model]="menuItems"
-                            appendTo="body"
-                        ></p-menu>
-
-                    </div>
-
-                    <div *ngIf="config.actionsPai?.length > 0 && rowNode.level == 0">
-
-                        <div
-                            *ngFor="let actionPai of config.actionsPai"
-                            class="flex justify-content-end"
-                        >
-
-                            <p-button
-                                icon="pi {{actionPai.icon}}"
-                                [rounded]="true"
-                                [severity]="actionPai.severity ? actionPai.severity : 'secondary'"
-                                [style]="{width: '2rem', height: '2rem'}"
-                                (onClick)="activeItem(rowData);actionPai.command($event);"
-                            ></p-button>
-
-                        </div>
-
-                    </div>
-
-                </td>
-
-            </tr>
-        </ng-template>
-
-    </p-treeTable>
-</div>

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

@@ -1,130 +0,0 @@
-/* Início: Estilização padrão da tabela */
-
-:host ::ng-deep .p-treetable table {
-    border-spacing: 0 3px;
-}
-
-
-#botaoFiltro:hover {
-    color: rgb(212, 212, 212);
-}
-
-
-:host ::ng-deep .p-treetable .p-treetable-header {
-    // background-color: #f2f2f2;
-    background-color: #d1d1d1;
-    padding: 2px 0 0 0 !important;
-    border-radius: 5px !important;
-}
-
-
-:host ::ng-deep .p-treetable .p-treetable-thead>tr>th {
-    // background-color: #f2f2f2;
-    background-color: #eaeaea;
-
-    padding: 0.5rem 0.5rem !important;
-    margin-bottom: -5px !important;
-}
-
-:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td {
-    padding: 0.5rem 0.5rem !important;
-}
-
-:host ::ng-deep .p-treetable .p-treetable-thead {
-    border-spacing: 0 1px !important;
-}
-
-//frist
-:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:first-of-type {
-    // background-color: #f2f2f2;
-    background-color: #eaeaea;
-
-
-    padding: 0.5rem 0.5rem !important;
-    border-radius: 5px !important;
-}
-
-//last
-
-:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child {
-    background-color: #eaeaea;
-    padding: 0.5rem 0.5rem !important;
-    border-radius: 0 5px 5px 0 !important;
-    -webkit-border-radius: 0 5px 5px 0 !important;
-    -moz-border-radius: 0 5px 5px 0 !important;
-    -ms-border-radius: 0 5px 5px 0 !important;
-    -o-border-radius: 0 5px 5px 0 !important;
-}
-
-
-
-:host ::ng-deep .p-treetable-scrollable-header-box {
-    padding: 0 !important;
-}
-
-
-:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th {
-    background-color: #f2f2f2;
-}
-
-:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th:first-of-type {
-    border-radius: 5px 0 0px 5px;
-}
-
-:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th:last-child {
-    border-radius: 0 5px 5px 0;
-}
-
-:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td {
-    border-bottom: 1px solid #ddd !important;
-    border-top: 1px solid #ddd !important;
-}
-
-:host ::ng-deep #tr-style {
-    border-left: solid 4px #5289B4 !important;
-    border-radius: 10px !important;
-    display: block;
-}
-
-:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-of-type {
-    border-left: solid 4px #5289B4 !important;
-    border-right: none !important;
-    border-radius: 10px 0 0 10px !important;
-    -webkit-border-radius: 10px 0 0 10px !important;
-    -moz-border-radius: 10px 0 0 10px !important;
-    -ms-border-radius: 10px 0 0 10px !important;
-    -o-border-radius: 10px 0 0 10px !important;
-}
-
-:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child {
-    border-radius: 0 10px 10px 0 !important;
-    border-right: 1px solid #ddd !important;
-    -webkit-border-radius: 0 10px 10px 0 !important;
-    -moz-border-radius: 0 10px 10px 0 !important;
-    -ms-border-radius: 0 10px 10px 0 !important;
-    -o-border-radius: 0 10px 10px 0 !important;
-}
-
-:host ::ng-deep .actionBtns,
-:host ::ng-deep .actionLoteBtns {
-    border-radius: 50%;
-    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
-
-    width: 2.5rem !important;
-    height: 2.5rem !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-:host ::ng-deep .p-treetable table {
-    border-collapse: separate !important;
-    table-layout: auto !important;
-}
-
-.icon-more-horiz:hover,
-.icon-more-horiz:focus {
-    color: #5e5e5e;
-    transform: scale(1.1);
-    transition: color 0.3s, transform 0.3s;
-}

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

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

@@ -1,231 +0,0 @@
-import {
-  Component,
-  ContentChildren,
-  EventEmitter,
-  HostListener,
-  Input,
-  Output,
-  QueryList,
-  TemplateRef
-} from '@angular/core';
-
-import { MenuItemCommandEvent } from 'primeng/api';
-import { TreeTable } from 'primeng/treetable';
-
-import { KvMenuItem } from '../../api/components/table/kv-menuitem';
-import { TablePaginate } from '../../api/components/table/table.paginate';
-import { TemplateDirective } from '../../api/directives/template/template.directive';
-
-@Component({
-  selector: 'kv-tree-table',
-  templateUrl: './kv-tree-table.component.html',
-  styleUrls: ['./kv-tree-table.component.scss']
-})
-export class KvTreetableComponent {
-
-  menuItems: KvMenuItem[] = [];
-  tamanhoTela!: number;
-  commandEvent!: MenuItemCommandEvent;
-
-  @Input() config!: any;
-  @Input() dataSource!: any;
-  @Input() gridLines: boolean = false;
-  @Input() acoesLinhaTabela: boolean = false;
-  @Input() tableCaptalized: boolean = false;
-  @Input() selectedItems: any = [];
-
-  @Output() onFilter: EventEmitter<any> = new EventEmitter();
-  @Output() onPaginate: EventEmitter<any> = new EventEmitter();
-  @Output() onActiveItem: EventEmitter<any> = new EventEmitter();
-  @Output() onActiveItemLote: EventEmitter<any> = new EventEmitter();
-  @Output() doubleClickEvent: EventEmitter<any> = new EventEmitter();
-
-  ngOnInit() {
-    this.tamanhoTela = window.innerWidth;
-  }
-
-  @ContentChildren(TemplateDirective) templates!: QueryList<any>;
-  @Input('templates') _templates!: any;
-
-  @HostListener('window:resize', ['$event'])
-  onWindowResize() {
-    this.tamanhoTela = window.innerWidth;
-  }
-
-  public activeItem(rowData: any) {
-    this.onActiveItem.emit(rowData);
-  }
-
-  public activeItemLote(rowData: any) {
-    this.onActiveItemLote.emit(rowData);
-  }
-
-  public onGlobalFilter(table: TreeTable, event: Event) {
-    this.onFilter.emit((event.target as HTMLInputElement).value);
-    table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
-  }
-
-  public paginate($event: any) {
-    if ($event) {
-      let paginaInicial =
-        ($event?.first > 0 ? $event.first / $event.rows : $event.first) + 1;
-      let termoPesquisa = '';
-      let ordenacao = '';
-
-      if ($event.globalFilter) termoPesquisa = $event.globalFilter;
-
-      if ($event.sortField)
-        ordenacao = `${$event.sortField} ${$event.sortOrder === 1 ? 'ASC' : 'DESC'
-          }`;
-
-      const objeto: TablePaginate = {
-        paginaInicial: paginaInicial,
-        tamanhoPagina: $event.rows,
-        termoPesquisa: termoPesquisa,
-        ordenacao: ordenacao,
-      };
-
-      this.onPaginate.emit(objeto);
-    }
-  }
-
-  returnStyleRow(col: any, rowNode: any): string {
-    const isFirstColumn = col.field === this.config.columns[0].field;
-    const baseOpacity = 1;
-    const maxLevels = 4;
-
-    if (isFirstColumn && rowNode.level >= 0) {
-      const opacity = baseOpacity - (rowNode.level / maxLevels);
-
-      return `border-left: solid 4px rgba(59, 110, 158, ${opacity}) !important;`;
-    }
-
-    if (rowNode.level == 0)
-      return 'border-left: none !important; border-right: none !important'
-
-    return '';
-  }
-
-  alignColunasHeader(col: any): string {
-    if (col.align) {
-      if (col.align == 'right') return 'justify-content: end';
-      else return '';
-    } else return '';
-  }
-  centralizarColunas(col: any): string {
-    if (col.centralize) {
-      return 'text-align: center; ';
-    } else return '';
-  }
-  alignColunas(col: any): string {
-    if (col.align) {
-      return `text-align: ${col.align}`;
-    } else return '';
-  }
-
-  criarMenusModal(data: any) {
-    if (this.config.actions && data) {
-      const items = this.config.actions.map((action: any) => {
-        const icon = this.retornarCampo(action, data, 'icon');
-        const tooltip = this.retornarCampo(action, data, 'tooltip');
-        const tooltipPosition = this.retornarCampo(
-          action,
-          data,
-          'tooltipPosition'
-        );
-        const label = this.retornarCampo(action, data, 'label');
-        const command: any = this.retornarCampo(action, data, 'command');
-        const visible: boolean = action.visible ? action.visible(data) : true;
-        const disabled: boolean = action.disabled
-          ? action.disabled(data)
-          : false;
-
-        const menuInsert: KvMenuItem = {
-          label,
-          icon,
-          tooltip,
-          tooltipPosition,
-          command,
-          disabled,
-          visible,
-        };
-
-        let item = this.menuItems.filter(
-          (x) => x.command == menuInsert.command
-        );
-
-        if (item.length == 0) this.menuItems.push(menuInsert);
-        else {
-          if (menuInsert.label != item[0].label) {
-            let index = this.menuItems.indexOf(item[0]);
-            this.menuItems.splice(index, 1);
-          }
-
-          if (menuInsert.visible != item[0].visible) {
-            let index = this.menuItems.indexOf(item[0]);
-            this.menuItems.splice(index, 1);
-          }
-
-          if (menuInsert.disabled != item[0].disabled) {
-            let index = this.menuItems.indexOf(item[0]);
-            this.menuItems.splice(index, 1);
-          }
-        }
-      });
-    }
-  }
-
-  retornarCampo(action: KvMenuItem, rowData: any, field: string): string {
-    const _function = action.dynamicfields
-      ? (action.dynamicfields[field] as Function)
-      : null;
-    const _field: string = _function
-      ? _function.apply(action, [rowData])
-      : action[field];
-    return _field;
-  }
-
-  exibirCampo(field: any, rowData: any) {
-    let visible = field.visible ? field.visible(rowData) : true;
-    return visible;
-  }
-
-  validateActionPosition(rowNode: any): boolean {
-    if (this.config.actionsPai && rowNode.level == 0) return false;
-    else return true
-  }
-
-
-  doubleClick(e: any, rowData: any) {
-
-    let eventDoubleClick = { event: e, rowData: rowData };
-
-    let array: string[] = [];
-    e.target.classList.forEach((x: any) => array.push(x));
-
-    // if (array.find((x: any) => x == 'ng-star-inserted') != undefined)
-    this.doubleClickEvent.emit(eventDoubleClick);
-  }
-
-  isDisabledCheckbox(rowData: any, rowNode: any): boolean {
-    return this.config.disableControlCheckboxFunction
-      ? this.config.disableControlCheckboxFunction(rowData, rowNode)
-      : false;
-  }
-
-  getCustomTemplate(templatename: string): TemplateRef<any> {
-    return this._templates[templatename];
-  }
-
-  validateShowTemplate(rowNode: any, col: any): boolean {
-    if (col.templateOnly) {
-      if (col.templateOnly === 'pai') {
-        return rowNode.level === 0;
-      }
-      if (col.templateOnly === 'filho') {
-        return rowNode.level === 1;
-      }
-    }
-    return true;
-  }
-}