keevo-components 2.0.105 → 2.0.107

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,164 @@
+<div
+  class="h-full flex flex-row p-2 kv-table-viewer overflow-hidden {{
+    data().length == 0 ? 'empty-table' : ''
+  }}"
+>
+  <div
+    class="h-full {{ handleTableSize() }} m-0 p-0 flex flex-column gap-2"
+    [style.transition]="'all 0.3s ease-in-out'"
+  >
+    <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)="op.toggle($event)"
+        ></kv-button>
+        }
+
+        <p-overlayPanel #op>
+          <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)"
+        ></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)"
+        [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 [style]="{ width: col.width || 'auto' }">{{ col.header }}</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)">
+              @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]="columns().length + 1">
+              <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"
+    [@slideInOut]="hasSelectedItems() ? 'i.n' : 'out'"
+    [style.overflow]="'hidden'"
+  >
+    @if(selectedItems().length > 1) {
+    <actions-lote-field
+      [selectedItems]="selectedItems()"
+      [actionsLote]="actionsLote()"
+    />
+    } @else if(selectedItems().length == 1 || selectedItem()) {
+    <div class="bg-gray-100 w-full h-auto p-2 relative">
+      @if(actionsRow()) {
+      <actions-row-menu [actionsRow]="actionsRow()" />
+      }
+      <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,80 @@
+::ng-deep .kv-table-viewer .p-datatable-wrapper {
+  // flex: 1 1 auto;
+}
+
+::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%;
+}

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,183 @@
+import { Component, computed, contentChildren, effect, inject, input, output, signal, TemplateRef } 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 { 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';
+
+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 {
+
+  cpfCnpjPipe = inject(CpfCnpjPipe);
+  telefonePipe = inject(TelefonePipe);
+  datePipe = inject(DatePipe);
+
+  columns = input<ColumnTableViewer[]>([]);
+
+  actionsRow = input<MenuItem[] | undefined>(undefined);
+  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);
+  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');
+
+
+  selectedItems = signal<any[]>([]);
+  selectedItem = signal<any>(null);
+  first = signal<number>(0);
+  searchValue = signal('');
+
+  onPageChange = output<TablePageEvent>();
+  onClickRowItem = output<any>();
+  onSelectItems = output<any[]>();
+  onSearch = output<string>();
+
+  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];
+  });
+
+  hasSelectedItems = 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();
+  })
+
+
+  constructor() {
+    effect(() => {
+      this.onSelectItems.emit(this.selectedItems());
+      this.onSearch.emit(this.searchValue());
+    })
+  }
+
+  handlePageChange(event: TablePageEvent) {
+    this.first.set(event.first);
+    this.onPageChange.emit(event);
+  }
+
+  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,3 @@
+<div class="kv-tag {{severity()}} {{!border() && 'no-border'}}">
+    <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,16 @@
+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);
+
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvTagComponent } from './kv-tag.component';
+
+
+
+@NgModule({
+  declarations: [
+    KvTagComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    KvTagComponent
+  ]
+})
+export class KvTagModule { }

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

@@ -0,0 +1,19 @@
+@for (tag of tags(); track $index) {
+<div 
+  [class.hover-tag]="hover()" 
+
+  class="kv-tag" 
+  [style.color]="color()(tag)" 
+  (click)="clickTag(tag)" 
+  [style.background]="background()(tag)" 
+  style="user-select: none;"
+>
+
+  @if(tag.icon) {
+  <span class="material-symbols-outlined" style="font-size: 0.7rem;">
+    {{tag.icon}}
+  </span>
+  }
+  {{tag.label}}
+</div>
+}

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

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+
+.kv-tag{
+    padding: .2rem .5rem;
+    border-radius: 2rem;
+    font-size: 0.7rem;
+    font-weight: 400;
+    width: max-content;
+    flex-wrap: nowrap;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+}
+
+.hover-tag{
+  cursor: pointer;
+  transition: all ease-in-out 0.2s;
+  &:hover{
+    font-size: 0.8rem;
+  }
+}