keevo-components 2.0.180 → 2.0.181

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

@@ -1,14 +0,0 @@
-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

@@ -1,198 +0,0 @@
-<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

@@ -1,92 +0,0 @@
-::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

@@ -1,23 +0,0 @@
-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

@@ -1,255 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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

@@ -1,65 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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);
-
-}