keevo-components 2.0.179 → 2.0.180

package/src/lib/components/kv-table-viewer/components/actions-row-menu/actions-row-menu.component.ts

@@ -0,0 +1,14 @@
+import { Component, input } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { TieredMenuModule } from 'primeng/tieredmenu';
+
+@Component({
+  selector: 'actions-row-menu',
+  standalone: true,
+  imports: [TieredMenuModule],
+  templateUrl: './actions-row-menu.component.html',
+  styleUrl: './actions-row-menu.component.scss'
+})
+export class ActionsRowMenuComponent {
+  actionsRow = input<MenuItem[] | undefined>(undefined);
+}

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

@@ -0,0 +1,198 @@
+<div
+  class="h-full flex flex-row p-2 kv-table-viewer overflow-hidden {{
+    isEmptyTable() ? 'empty-table' : ''
+  }}"
+>
+  @if(!this.selectedItem() || !isMobile() && !selectableTable()) {
+  <div
+    class="h-full {{ handleTableSize() }} m-0 p-0 flex flex-column gap-2"
+    [style.transition]="'all 0.3s ease-in-out'"
+  >
+    @if(showHeaderTemplate()) {
+    <div>
+      <ng-content select="[tableHeaderTemplate]"> </ng-content>
+    </div>
+    }
+
+    <div
+      class="flex flex-row align-items-center justify-content-between flex-initial"
+    >
+      <div class="flex flex-row align-items-center gap-2">
+        @if(searchInput()) {
+        <input
+          style="height: 1.875rem"
+          placeholder="Pesquisar..."
+          type="text"
+          pInputText
+          [(ngModel)]="searchValue"
+          class="text-xs"
+        />
+
+        } @if(filterButton()) {
+        <kv-button
+          label="Filtrar"
+          icon="filter_alt"
+          severity="tertiary"
+          (onClick)="toggleOverlayPanel($event)"
+        ></kv-button>
+        }
+
+        <p-overlayPanel #op [dismissable]="false">
+          <ng-content select="[filtro]"> </ng-content>
+        </p-overlayPanel>
+      </div>
+      <div class="flex flex-row gap-2">
+        @if(actionsHeader()) { @for(action of actionsHeader(); track $index) {
+        <kv-button
+          [icon]="action?.icon || ''"
+          [label]="action?.label || ''"
+          [severity]="action['severity'] || 'tertiary'"
+          (onClick)="action?.command($event)"
+          [popupIcon]="false"
+          [items]="action.items || []"
+          [popup]="isPopupButton()(action)"
+        ></kv-button>
+        } } @if(selectedItem()) {
+        <kv-button
+          [pTooltip]="'Recolher'"
+          icon="reorder"
+          severity="tertiary"
+          (onClick)="selectedItem.set(null)"
+        ></kv-button>
+        }
+      </div>
+    </div>
+
+    <div class="flex-1 h-full overflow-hidden">
+      <p-table
+        [value]="data()"
+        [lazy]="lazy()"
+        [selectionPageOnly]="selectionPageOnly()"
+        [columns]="columns()"
+        [paginator]="paginator()"
+        [rows]="rows()"
+        [totalRecords]="totalRecords()"
+        [loading]="loading()"
+        [pageLinks]="pageLinks()"
+        [first]="first()"
+        [scrollable]="scrollable()"
+        scrollHeight="flex"
+        [showCurrentPageReport]="true"
+        [currentPageReportTemplate]="currentPageReportTemplate()"
+        (onPage)="handlePageChange($event)"
+        (onSort)="handleSort($event)"
+        [rowsPerPageOptions]="rowsPerPageOptions()"
+        [(selection)]="selectedItems"
+        styleClass="p-datatable-sm text-xs overflow-y-auto h-full flex flex-column h-full"
+      >
+        @if(showHeader()) {
+        <ng-template pTemplate="header" let-columns>
+          <tr>
+            @if(selectableTable()) {
+            <th style="width: 4rem"><p-tableHeaderCheckbox /></th>
+            } @for (col of columns; track col.field) {
+            <th
+              [pSortableColumn]="col.field"
+              [pSortableColumnDisabled]="!col?.sortable"
+              [style]="{ width: col.width || 'auto' }"
+            >
+              <div class="flex flex-row align-items-center gap-1">
+                <span>{{ col.header }}</span>
+                @if (col.sortable) {
+                <p-sortIcon [field]="col.field" class="pb-1"></p-sortIcon>
+                }
+              </div>
+            </th>
+            }
+          </tr>
+        </ng-template>
+        }
+
+        <ng-template pTemplate="body" let-rowData let-columns="columns">
+          <tr
+            class="cursor-pointer {{
+              verifyItemSelecionado()(rowData) && 'bg-gray-100'
+            }} hover:bg-gray-200"
+          >
+            @if(selectableTable()) {
+            <td><p-tableCheckbox [value]="rowData" /></td>
+            } @for (col of columns; track col.field) {
+            <td (click)="rowSelect(rowData)" style="word-break: break-all;">
+              @if(col?.template) {
+              <div class="flex flex-row gap-2 align-items-center">
+                @if (getCustomTemplate()(col.template.name)) {
+                <ng-container
+                  [ngTemplateOutlet]="getCustomTemplate()(col.template.name)"
+                  [ngTemplateOutletContext]="{ $implicit: rowData }"
+                />
+                }
+              </div>
+              } @else if(col?.icon) {
+              <span class="material-symbols-outlined text-lg">
+                {{ col.icon(rowData) }}
+              </span>
+              } @else if(col?.tag) {
+              <kv-tags [tags]="[col.tag(rowData)]" />
+              } @else {
+              {{ transformData()(col.pipe, rowData[col.field]) }}
+              }
+            </td>
+            }
+          </tr>
+        </ng-template>
+
+        <ng-template pTemplate="emptymessage">
+          <tr>
+            <td [attr.colspan]="returnColspan()">
+              <div
+                class="w-full h-full flex align-items-center justify-content-center"
+              >
+                <img [src]="emptyTableImg()" class="h-10rem w-auto" />
+              </div>
+            </td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </div>
+  </div>
+
+  }
+
+  <div
+    class="shadow-2 p-0 m-0 col selected-item-field ml-2 flex flex-column"
+    [@slideInOut]="isRowSelected() ? 'i.n' : 'out'"
+    [style.overflow]="'hidden'"
+  >
+    @if(hasSelectedItems()) {
+    <actions-lote-field
+      class="h-full"
+      [selectedItems]="selectedItems()"
+      [actionsLote]="actionsLote()"
+    />
+    } @else if(showSelectedItem()) {
+    <div class="bg-gray-100 w-full h-auto p-2 relative">
+      @if(hasActionsRow()) {
+      <actions-row-menu [actionsRow]="actionsRow()" />
+      }
+
+      @if(isMobile()) {
+        <div class="h-2rem w-2rem">
+          <kv-button
+            icon="arrow_back"
+            severity="tertiary"
+            [pTooltip]="'Voltar'"
+            (onClick)="selectedItem.set(null)"
+          />
+        </div>
+      }
+
+      <ng-content select="[selectedItemHeader]"></ng-content>
+    </div>
+    <div class="p-2 overflow-y-auto h-full">
+      <ng-content select="[selectedItem]"></ng-content>
+    </div>
+    }
+
+    <!-- @else { Nenhum item selecionado } -->
+  </div>
+</div>

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

@@ -0,0 +1,92 @@
+::ng-deep .kv-table-viewer .p-datatable-wrapper {
+  // flex: 1 1 auto;
+  overflow-x: hidden;
+}
+
+::ng-deep .kv-table-viewer .p-paginator .p-paginator-pages .p-paginator-page {
+  font-size: 0.75rem;
+  min-width: 2rem;
+  height: 2rem;
+}
+
+::ng-deep .kv-table-viewer .p-paginator .p-paginator-current {
+  font-size: 0.75rem;
+}
+
+::ng-deep .kv-table-viewer .p-inputwrapper .p-dropdown {
+  margin: 0;
+  height: auto;
+}
+
+::ng-deep .p-paginator-rpp-options .p-dropdown-panel .p-dropdown-items {
+  padding: 0.25rem 0.25rem;
+}
+
+::ng-deep .p-paginator-rpp-options .p-dropdown-item {
+  border-radius: 0.25rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .p-dropdown-label {
+    padding: 0.5rem 0.5rem;
+  }
+
+  .p-dropdown-trigger {
+    width: 1.5rem;
+  }
+}
+
+::ng-deep .p-paginator-bottom .p-link {
+  min-width: 2rem;
+  height: 2rem;
+}
+
+::ng-deep .p-paginator {
+  padding: 0rem;
+}
+
+::ng-deep .p-dropdown-label {
+  font-size: 0.75rem;
+}
+
+::ng-deep .p-datatable-wrapper {
+  &::-webkit-scrollbar {
+    width: 6px;
+
+    &:hover {
+      background-color: rgba(222, 222, 222, 0.75);
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: transparent;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    border-left: 2px solid white;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    border-left: 2px solid white;
+    background-color: rgba(222, 222, 222, 0.75);
+  }
+}
+
+::ng-deep .empty-table .p-datatable-table {
+  height: 100%;
+}
+
+
+::ng-deep .p-menu {
+  padding: 0.25rem;
+}
+
+::ng-deep .p-menu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+  font-size: 0.75rem;
+  padding: 0.5rem;
+}
+

package/src/lib/components/kv-table-viewer/kv-table-viewer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KvTableViewerComponent } from './kv-table-viewer.component';
+
+describe('KvTableViewerComponent', () => {
+  let component: KvTableViewerComponent;
+  let fixture: ComponentFixture<KvTableViewerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KvTableViewerComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(KvTableViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,255 @@
+import { Component, computed, contentChildren, effect, HostListener, inject, input, output, signal, TemplateRef, untracked, ViewChild } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { SkeletonModule } from 'primeng/skeleton';
+import { TableModule, TablePageEvent } from 'primeng/table';
+import { KvInputsModule } from "../kv-inputs/kv-inputs.module";
+import { KvButtonModule } from "../kv-button/kv-button.module";
+import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
+import { ActionsLoteFieldComponent } from './components/actions-lote-field/actions-lote-field.component';
+import { KvTagsModule } from "../kv-tags/kv-tags.module";
+import { CommonModule, DatePipe } from '@angular/common';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { TooltipModule } from 'primeng/tooltip';
+import { MenuItem } from 'primeng/api';
+import { TieredMenuModule } from 'primeng/tieredmenu';
+import { ActionsRowMenuComponent } from './components/actions-row-menu/actions-row-menu.component';
+import { CpfCnpjPipe } from '../../api/pipes/cpfcnpj.pipe';
+import { TelefonePipe } from '../../api/pipes/telefone.pipe';
+import { TemplateDirective } from '../../api/directives/template/template.directive';
+import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+interface ColumnTableViewer {
+  field: string;
+  header: string;
+  width?: string;
+  icon?: (rowData: any) => string;
+  tag?: (rowData: any) => { label: string, severity: string, icon: string };
+  pipe?: 'cpfcnpj' | 'telefone' | 'money' | 'date' | 'datetime' | 'dateMonthYear' | undefined;
+  template?: { name: string };
+}
+
+@Component({
+  selector: 'kv-table-viewer',
+  standalone: true,
+  imports: [InputTextModule, CommonModule, TooltipModule, TableModule, SkeletonModule, ButtonModule, KvInputsModule, KvButtonModule, OverlayPanelModule, ActionsLoteFieldComponent, KvTagsModule, TieredMenuModule, ActionsRowMenuComponent, FormsModule],
+  templateUrl: './kv-table-viewer.component.html',
+  styleUrl: './kv-table-viewer.component.scss',
+  animations: [
+    trigger('slideInOut', [
+      state('in', style({
+        width: '*',
+        opacity: 1,
+        transform: 'translateX(0)'
+      })),
+      state('out', style({
+        width: '0px',
+        opacity: 0,
+        transform: 'translateX(100%)'
+      })),
+      transition('out => in', [
+        animate('300ms ease-in-out')
+      ]),
+      transition('in => out', [
+        animate('200ms ease-in-out')
+      ])
+    ])
+  ]
+})
+export class KvTableViewerComponent {
+
+  @ViewChild('op') op!: OverlayPanel;
+
+  cpfCnpjPipe = inject(CpfCnpjPipe);
+  telefonePipe = inject(TelefonePipe);
+  datePipe = inject(DatePipe);
+  breakpointObserver = inject(BreakpointObserver);
+
+  columns = input<ColumnTableViewer[]>([]);
+
+  actionsRow = input<MenuItem[] | []>([]);
+  actionsHeader = input<MenuItem[] | undefined>(undefined);
+  actionsLote = input<MenuItem[] | undefined>(undefined);
+
+  data = input<any[]>([]);
+  totalRecords = input<number>(0);
+  loading = input<boolean>(false);
+  rows = input<number>(10);
+  rowsPerPageOptions = input<number[]>([10, 25, 50]);
+  paginator = input<boolean>(true);
+  lazy = input<boolean>(true);
+  scrollable = input<boolean>(true);
+  pageLinks = input<number>(2);
+  currentPageReportTemplate = input<string>('{first} - {last} de {totalRecords}');
+  selectionPageOnly = input<boolean>(true);
+
+
+  selectableTable = input<boolean>(true);
+  showHeader = input<boolean>(true);
+  showHeaderTemplate = input<boolean>(false);
+  tableViewerSize = input<string>('col-8');
+  searchInput = input<boolean>(true);
+  filterButton = input<boolean>(true);
+  idName = input<string | undefined>(undefined);
+  emptyTableImg = input<string>('https://work-assets.keevo.com.br/img/Nenhum_registro_localizado.png');
+  isSelectedPrimaryItem = input<boolean>(false);
+
+
+  selectedItems = signal<any[]>([]);
+  selectedItem = signal<any>(null);
+  first = signal<number>(0);
+  searchValue = signal('');
+  lastEmittedSort = signal<{ field: string, order: number } | null>(null);
+  isMobile = signal(false);
+  
+
+  onPageChange = output<TablePageEvent>();
+  onClickRowItem = output<any>();
+  onSelectItems = output<any[]>();
+  onSearch = output<string>();
+  onSort = output<any>();
+
+  templates = contentChildren(TemplateDirective);
+  _templates = input<Record<string, TemplateRef<any>>>({}, { alias: 'templates' });
+  getCustomTemplate = computed(() => (templatename: string): TemplateRef<any> | null => {
+    const templates = this._templates();
+    return templates[templatename];
+  });
+
+  isRowSelected = computed(() => {
+    return this.selectedItems()?.length > 0 || this.selectedItem();
+  });
+
+  verifyItemSelecionado = computed(() => (rowData: any) => {
+    let isSelected;
+
+    let idName = this.idName() || 'id';
+
+    if (this.selectableTable())
+      isSelected = this.selectedItems().find((item: any) => item[idName] == rowData[idName]);
+    else isSelected = this.selectedItem()?.[idName] == rowData[idName];
+
+    return isSelected;
+  })
+
+  transformData = computed(() => (type: string, value: any) => {
+    if (type === 'cpfcnpj') return this.cpfCnpjPipe.transform(value);
+    if (type === 'telefone') return this.telefonePipe.transform(value);
+    if (type === 'money') return this.transformMoney(value);
+    if (type === 'date') return this.datePipe.transform(value, 'dd/MM/yyyy', 'UTC');
+    if (type === 'datetime') return this.datePipe.transform(value, 'dd/MM/yyyy hh:mm');
+    if (type === 'dateMonthYear') return this.datePipe.transform(value, 'MM/yyyy');
+
+    else return value;
+  })
+
+  handleTableSize = computed(() => {
+    const selectedItems = this.selectedItems();
+    const selectedItem = this.selectedItem();
+
+    if (selectedItems?.length == 0 && !selectedItem)
+      return 'col-12';
+    else return this.tableViewerSize();
+  })
+
+  isPopupButton = computed(() => (action: any) => {
+    return (action.items && action.items?.length > 0) || false;
+  })
+
+  hasActionsRow = computed(() => {
+    return this.actionsRow()?.length > 0;
+  })
+
+  showSelectedItem = computed(() => {
+    return this.selectedItems()?.length == 1 || this.selectedItem();
+  })
+
+  hasSelectedItems = computed(() => {
+    return this.selectedItems()?.length > 1;
+  })
+
+  returnColspan = computed(() => {
+    return this.columns().length + 1;
+  });
+
+  isEmptyTable = computed(() => {
+    return this.data()?.length == 0
+  });
+
+  constructor() {
+
+    this.breakpointObserver
+      .observe([Breakpoints.HandsetPortrait, '(max-width: 768px)'])
+      .subscribe(state => this.isMobile.set(state.matches));
+
+    effect(() => {
+      this.onSelectItems.emit(this.selectedItems());
+      this.onSearch.emit(this.searchValue());
+    });
+
+    effect(() => {
+        const dados = this.data();
+        const isSelectedPrimaryItem = this.isSelectedPrimaryItem();
+
+        if(dados && dados.length > 0 && isSelectedPrimaryItem) {
+          untracked(() => this.rowSelect(dados[0]));
+        }
+    });
+  }
+
+  toggleOverlayPanel(event: any) {
+    this.op.toggle(event);
+  }
+
+  public closeFilter() {
+    this.op?.hide();
+  }
+
+  public toggleFilter(event?: MouseEvent) {
+    this.op?.toggle(event);
+  }
+
+  handlePageChange(event: TablePageEvent) {
+    this.first.set(event.first);
+    this.onPageChange.emit(event);
+  }
+
+  handleSort(event: any) {
+    const currentSortState = this.lastEmittedSort();
+
+    if (currentSortState && currentSortState.field === event.field && currentSortState.order === event.order) {
+      return;
+    }
+
+    this.lastEmittedSort.set({ field: event.field, order: event.order });
+
+    let ordenacao = `${event.field} ${event.order === 1 ? 'ASC' : 'DESC'} `;
+    let ordernacaoGroup = { column: event.field, direction: event.order === 1 ? 'ASC' : 'DESC' };
+    this.onSort.emit({ ordenacao: ordenacao, ordernacaoGroup: ordernacaoGroup });
+  }
+
+  rowSelect(rowData: any) {
+    if (this.selectableTable()) {
+      if (this.selectedItems().includes(rowData))
+        this.selectedItems.update((items: any[]) => items.filter(item => item !== rowData));
+      else this.selectedItems.update((items: any[]) => [...items, rowData]);
+
+      if (this.selectedItems()?.length === 1)
+        this.onClickRowItem.emit(this.selectedItems()[0]);
+      else this.onClickRowItem.emit(rowData);
+    } else {
+      this.selectedItem.set(rowData);
+      this.onClickRowItem.emit(rowData);
+    }
+
+  }
+
+  transformMoney(valor: number): string {
+    const formatter = new Intl.NumberFormat('pt-BR', {
+      style: 'currency',
+      currency: 'BRL',
+    });
+
+    return formatter.format(valor);
+  }
+}

package/src/lib/components/kv-tag/kv-tag.component.html

@@ -0,0 +1,7 @@
+<div
+  class="kv-tag {{severity()}} {{!border() && 'no-border'}}"
+  [style.backgroundColor]="color() ? color() + '0D' : ''"
+  [style.color]="color()"
+>
+    <ng-content></ng-content>
+</div>  

package/src/lib/components/kv-tag/kv-tag.component.scss

@@ -0,0 +1,65 @@
+.kv-tag{
+    // Opacidades
+    $bg-opacity: .05;
+    $border-opacity: .1;
+    $content-opacity: 1;
+
+    // Cores de texto (RGB)
+    --kv-text-success: 75, 181, 67;
+    --kv-text-info: 0, 123, 255;
+    --kv-text-warn: 194, 91, 12;
+    --kv-text-danger: 220, 53, 69;
+    --kv-text-contrast: 33, 37, 41;
+
+    // Cores de fundo (RGB)
+    --kv-bg-success: 75, 181, 67;
+    --kv-bg-info: 0, 123, 255;
+    --kv-bg-warn: 255, 235, 209;
+    --kv-bg-danger: 220, 53, 69;
+    --kv-bg-contrast: 33, 37, 41;
+
+    padding: .2rem .5rem;
+    border-radius: .5rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+
+    &.system{
+        background-color: rgba(var(--kv-color-system), $bg-opacity);
+        border: 1px solid rgba(var(--kv-color-system), $border-opacity);
+        color: rgba(var(--kv-color-system), $content-opacity);
+    }
+
+    &.success {
+        background-color: rgba(var(--kv-bg-success), $bg-opacity);
+        border: 1px solid rgba(var(--kv-bg-success), $border-opacity);
+        color: rgba(var(--kv-text-success), $content-opacity);
+    }
+
+    &.info {
+        background-color: rgba(var(--kv-bg-info), $bg-opacity);
+        border: 1px solid rgba(var(--kv-bg-info), $border-opacity);
+        color: rgba(var(--kv-text-info), $content-opacity);
+    }
+
+    &.warn {
+        background-color: rgba(var(--kv-bg-warn), 1);
+        border: 1px solid rgba(var(--kv-bg-warn), $border-opacity);
+        color: rgba(var(--kv-text-warn), $content-opacity);
+    }
+
+    &.danger {
+        background-color: rgba(var(--kv-bg-danger), $bg-opacity);
+        border: 1px solid rgba(var(--kv-bg-danger), $border-opacity);
+        color: rgba(var(--kv-text-danger), $content-opacity);
+    }
+
+    &.contrast {
+        background-color: rgba(var(--kv-bg-contrast), 1);
+        border: 1px solid rgba(var(--kv-bg-contrast), $border-opacity);
+        color: rgba(var(--kv-background-card), $content-opacity);
+    }
+
+    &.no-border{
+        border: none;
+    }
+}

package/src/lib/components/kv-tag/kv-tag.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KvTagComponent } from './kv-tag.component';
+
+describe('KvTagComponent', () => {
+  let component: KvTagComponent;
+  let fixture: ComponentFixture<KvTagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KvTagComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(KvTagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/kv-tag/kv-tag.component.ts

@@ -0,0 +1,17 @@
+import { Component, computed, effect, input } from '@angular/core';
+
+@Component({
+  selector: 'kv-tag',
+  templateUrl: './kv-tag.component.html',
+  styleUrl: './kv-tag.component.scss'
+})
+/**
+ * Component for displaying a tag.
+ */
+export class KvTagComponent {
+
+  severity = input<'system'| 'success' | 'info' | 'warn' | 'danger' | 'contrast'>('system');
+  border = input<boolean>(false);
+  color = input<string | null>(null);
+
+}