keevo-components 1.8.540 → 1.8.541

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

@@ -0,0 +1,174 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
+
+import { MenuItem } from 'primeng/api';
+import { UIChart } from 'primeng/chart';
+
+import { ChartConfig } from '../../api/components/chart/chart.config';
+
+export const PeriodosChart = {
+  Ultimos180Dias: -180,
+  Ultimos120Dias: -120,
+  Ultimos90Dias: -90,
+  Ultimos60Dias: -60,
+  Ultimos45Dias: -45,
+  Ultimos30Dias: -30,
+  Ultimos15Dias: -15,
+  Ultimos7Dias: -7,
+  DataAtual: 0,
+  Proximos7Dias: 7,
+  Proximos15Dias: 15,
+  Proximos30Dias: 30,
+  Proximos45Dias: 45,
+  Proximos60Dias: 60,
+  Proximos90Dias: 90,
+  Proximos120Dias: 120,
+  Proximos180Dias: 180
+}
+
+@Component({
+  selector: 'kv-chart',
+  templateUrl: './kv-chart.component.html',
+  styleUrls: [
+    './kv-chart.component.scss',
+    '../keevo-components-styles.scss'
+  ]
+})
+export class KvChartComponent implements OnInit {
+
+  chartConfig: ChartConfig = {
+    labels: [],
+    datasets: [],
+  }
+
+  periodosDisponiveis = [
+    { label: 'Últimos 180 dias', value: -180 },
+    { label: 'Últimos 120 dias', value: -120 },
+    { label: 'Últimos 90 dias', value: -90 },
+    { label: 'Últimos 60 dias', value: -60 },
+    { label: 'Últimos 45 dias', value: -45 },
+    { label: 'Últimos 30 dias', value: -30 },
+    { label: 'Últimos 15 dias', value: -15 },
+    { label: 'Últimos 7 dias', value: -7 },
+    { label: 'Data atual', value: 0 },
+    { label: 'Próximos 7 dias', value: 7 },
+    { label: 'Próximos 15 dias', value: 15 },
+    { label: 'Próximos 30 dias', value: 30 },
+    { label: 'Próximos 45 dias', value: 45 },
+    { label: 'Próximos 60 dias', value: 60 },
+    { label: 'Próximos 90 dias', value: 90 },
+    { label: 'Próximos 120 dias', value: 120 },
+    { label: 'Próximos 180 dias', value: 180 }
+  ];
+
+  @Input() title!: string;
+  @Input() type!: 'doughnut' | 'pie' | 'bar' | 'line';
+  @Input() indexAxis!: 'y' | 'x';
+  @Input() displayLegend!: boolean;
+  @Input() heightChart: string = '300px';
+
+  @Input() showDatas: boolean = true;
+  @Input() showMenu: boolean = false;
+  @Input() selectedData!: number;
+  @Input() enablePeriodos: number[] = [];
+ 
+
+  data: any;
+  options: any;
+
+  periodos: any[] = [];
+
+  menuItems: MenuItem[] = [];
+
+  @Output() onPrintReport: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionValue: EventEmitter<any> = new EventEmitter();
+  @ViewChild('chart') chart?: UIChart;
+
+  constructor() { }
+
+  configureGraphic() {
+    this.data = this.chartConfig;
+    this.configOptions();
+    this.chart?.reinit();
+  }
+
+  private configOptions(): void {
+    
+      this.options = {
+        indexAxis: this.indexAxis || 'x',
+        maintainAspectRatio: true,
+        aspectRatio: 2,
+        responsive: true,        
+        animation: {
+          duration: 0
+        },
+        scales: {
+          x: {
+            ticks: {
+              color: 'black',
+              display: 768,
+            },
+            grid: {
+              color: 'white',
+            },
+          },
+          y: {
+            beginAtZero: true,
+            grid: {
+              color: 'white',
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            display: this.displayLegend || false,
+            labels: {
+              color: '#1e293b',
+              usePointStyle: true,
+              font: {
+                weight: 700,
+              },
+              padding: 28
+            },
+            position: 'bottom'
+          }
+        }     
+      };
+    
+    this.menuItems = [
+      { label: 'Imprimir relatório', command: () => this.printReport() }
+    ]
+  }
+
+  private initDatas() {
+    this.periodosDisponiveis.map((el) => {
+      if (this.enablePeriodos.includes(el.value)) {
+        this.periodos.push(el);
+      }
+    });
+  }
+
+  ngOnInit() {
+    this.initDatas();
+    this.configureGraphic();
+  }
+
+  printReport() {
+    this.onPrintReport.emit();
+  }
+
+  public reInit(config: any) {
+    this.chartConfig = config;
+    this.configureGraphic();
+  }
+
+  protected selectionValue(event: any) {
+    this.onSelectionValue.emit(event);
+  }
+}

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

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgModule } from "@angular/core";
+
+import { KvChartComponent } from './kv-chart.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    KvChartComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+  ],
+  exports: [
+    KvChartComponent
+  ]
+})
+export class KvChartModule { }

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

@@ -0,0 +1,151 @@
+<div class="flex flex-column md:flex-row gap-2 mt-3 custom-max-height" style="height: 100%;">
+  <!-- Lista de documentos -->
+  <div
+    class="card-perfil col-12 md:col-4 lg:col-3"
+    (scroll)="scrollHandler($event)"
+    [ngClass]="{
+      'overflow-y-scroll': dataSource().length > 0,
+      'overflow-y-hidden': dataSource().length === 0
+    }"
+    style="position: relative; height: 100%; min-height: 15rem;"
+  >
+    <div *ngIf="dataSource().length > 0; else emptyDocumentList" class="col-12">
+      <!-- Lista de cards -->
+      <div
+        *ngFor="let option of dataSource(); trackBy: trackByFn"
+        class="card-normal outline-none border-round-xl w-full p-2 m-1 grid p-fluid flex flex-row flex-nowrap align-items-center justify-content-center cursor-pointer"
+        (click)="visualizarPreview(option)"
+        [ngClass]="{
+    'card-naoVisualizado': !isVisualizado(option),
+    'card-selected': option === arquivoPreview(),
+    'card-normal': option !== arquivoPreview(),
+   }"
+      >
+        <div class="flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis " style="max-width: 100%;">
+          <ng-container *ngIf="cardTemplate; else defaultTemplate">
+            <ng-container
+              *ngTemplateOutlet="cardTemplate; context: { $implicit: option }"
+            ></ng-container>
+          </ng-container>
+        </div>
+        <ng-template #defaultTemplate>
+          <div class="card-common-style default-card">
+            <h1 class="font-bold text-base p-0 m-0">Bem-vindo!</h1>
+            <p class="text-sm mt-2">
+              Kv-file-preview aguardando um template... 
+            </p>
+            <p class="font-bold text-sm p-0 m-0">Data: {{ todayDate() }}</p>
+          </div>
+        </ng-template>
+      </div>
+
+    </div>
+
+    <ng-template #emptyDocumentList>
+
+      @if(isLoadingSkeleton){
+        <p-skeleton *ngFor="let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]"></p-skeleton>
+      }
+
+      @if(!noDocumentListTemplate) {
+      <div class="text-center text-gray-600 mt-4 m-3" style="height: 100%">
+        <div class=" flex align-items-center gap-1">
+          <span class="material-symbols-outlined"> inbox </span>
+          <p>Nenhum documento disponível.</p>
+        </div>
+      </div>
+      } @else {
+      <div class="text-center mt-4 m-3" style="height: 100%">
+        <ng-container *ngTemplateOutlet="noDocumentListTemplate"></ng-container>
+      </div>
+      }
+    </ng-template>
+
+    <!-- Contador de documentos - Fixo na parte inferior -->
+    <div
+      class="sticky-counter flex flex-row flex-1 px-2 justify-content-center p-2"
+      style="position: sticky; bottom: -10px; background-color: white"
+    >
+      <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>
+    </div>
+  </div>
+
+  <!-- Visualizador -->
+<div id="fullscreenDiv" class="card-perfil col-12 md:col-8 lg:col-9" style="position: relative; height: 100%;"
+  [ngStyle]="{
+    'overflow-y': arquivoPreview() ? 'auto' : 'hidden'
+  }">
+  @if(btnTelaCheia)
+  {
+    <div class="grid">
+      <div class="col"></div>
+      <span id="fullscreenBtn" (click)="alternarTelaCheia()" class="material-symbols-outlined p-2 text-xl cursor-pointer">
+        open_in_full
+      </span>
+    </div>
+  }
+  @if(visualizadorDocumentos) {
+    <ng-container *ngIf="arquivo(); else noDocumentSelected">
+      @if(isLoading) {
+      <ngx-loading
+        [show]="isLoading"
+        [config]="{ backdropBorderRadius: '3px', fullScreenBackdrop: false }"
+      ></ngx-loading>
+      }
+      <kv-file-viewer-novo
+      *ngIf="extencaoDocumento !== 'ekp'"
+        [arquivo]="arquivo()!"
+        [type]="type()!"
+        [blob]="blob()!"
+        [width]="'100%'" 
+        [height]="'100%'"
+        class="file-viewer"
+        style="max-height: 100%;"
+      >
+      </kv-file-viewer-novo>
+
+      <div
+        id="html-content"
+        [innerHTML]="ekpContent()"
+        *ngIf="extencaoDocumento === 'ekp'"
+        class="ekp-content"
+        style="overflow-y: auto; max-height: 100%;"
+      ></div>
+    </ng-container>
+  } @else {
+    <ng-container *ngIf="arquivoPreview(); else noDocumentSelected">
+      <ng-container
+        *ngTemplateOutlet="
+          contentTemplate;
+          context: { $implicit: arquivoPreview() }
+        "
+        style="overflow-y: auto; max-height: 100%;"
+      ></ng-container>
+    </ng-container>
+  }
+  <ng-template #noDocumentSelected>
+    @if(!noDocumentSelectedTemplate) {
+    <div
+      class="no-document-message flex flex-column align-items-center justify-content-center"
+      style="height: 100%; overflow-y: auto;"
+    >
+      <p class="text-center text-gray-500">
+        Selecione um arquivo para visualização
+      </p>
+      <img
+        [src]="
+          'https://work-assets.keevo.com.br/img/Digital_personal_files-pana_3.png'
+        "
+        style="max-height: 50%; margin-top: 2rem;"
+        alt=""
+      />
+    </div>
+    } @else {
+    <ng-container
+      *ngTemplateOutlet="noDocumentSelectedTemplate"
+    ></ng-container>
+    }
+  </ng-template>
+</div>
+
+</div>

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

@@ -0,0 +1,159 @@
+.farol-statuspublicacao {
+    margin-right: 0.5rem;
+    width: 0.35rem;
+    // height: 1rem;
+    border-radius: 1rem;
+    -webkit-border-radius: 1rem;
+    -moz-border-radius: 1rem;
+    -ms-border-radius: 1rem;
+    -o-border-radius: 1rem;
+  }
+  
+  :host ::ng-deep .p-sidebar {
+    border-radius: 5px;
+    position: absolute;
+    height: var(--sidebar-height);
+  }
+  
+  :host ::ng-deep .p-sidebar .p-sidebar-content {
+   overflow: auto;
+   border: 1px solid #e5e7eb;
+   border-radius: 5px;
+   margin-top: 1rem;
+  }
+  
+  .card-perfil{
+    border: 1.5px solid #CBD5E1;
+    background: #fff;
+    border-radius: 6px;
+    max-height: 100%
+  }
+  
+  :host ::ng-deep .p-fieldset .p-fieldset-content{
+    padding-bottom: 0;
+  }
+  
+  :host ::ng-deep .p-sidebar .p-sidebar-close {
+    display: none;
+  }
+  
+  .card-normal {
+    border: 1.5px solid #CBD5E1;
+  }
+  
+  .card-naoVisualizado {
+    border-left: 4px solid #e6671f !important;
+  }
+  
+  .parent-container {
+    height: 100%; /* Garante que o componente pai ocupe 100% da altura disponível */
+    display: flex; /* Use flexbox para layout dinâmico */
+    flex-direction: column;
+  }
+  
+  .file-viewer {
+    margin: auto; /* Centraliza o conteúdo */
+  }
+  
+  .ekp-content {
+    min-height: 20rem;
+    padding: 1rem; /* Adiciona espaçamento interno */
+    overflow-y: auto;
+    border-radius: 5px;
+  }
+  
+  ngx-loading {
+    position: absolute; /* ou fixed, dependendo do contexto */
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000; /* Certifique-se de que está acima dos outros elementos */
+  }
+  
+  
+  .card {
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
+  }
+  
+  .card-normal:hover {
+    border: 1px solid #a9a9a9; /* Cinza suave para hover */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra leve */
+  }
+  
+  .card-selected {
+    background-color: #f0f0f0; /* Cinza claro para o fundo */
+    border: 1px solid #c0c0c0; /* Borda cinza médio */
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra suave */
+    transform: scale(1.02); /* Leve aumento no tamanho */
+  }
+
+  :host ::ng-deep .p-skeleton {
+    height: 5rem !important;
+    border-radius: 1rem;
+    margin-top: 0.5rem;
+  }
+  
+  .loading-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: 1.5rem;
+    color: #666;
+  }
+  
+  #html-content {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+  }
+  
+  :host ::ng-deep .list-card-button .kv-button {
+    width: 22px;
+    height: 22px;
+  }
+  
+  :host ::ng-deep .list-card-button .kv-button .material-symbols-outlined.only-icon.icon-normal[_ngcontent-ng-c4083184952] {
+    font-size: 1rem;
+  }
+  
+  .custom-max-height {
+    // max-height: calc(100vh - 300px)
+  }
+  
+  @media (max-height: 915px){
+    .custom-max-height {
+      // max-height: 94%;
+    }
+  }
+  
+  @media (max-height: 805px){
+    .custom-max-height {
+      // max-height: 90%;
+    }
+  }
+  
+  @media (max-height: 720px){
+    .custom-max-height {
+      // max-height: 85%;
+    }
+  }
+  
+  /* Estilo padrão do span */
+  .download-icon {
+    font-size: 20px;
+    cursor: pointer;
+    transition: transform 0.3s ease, color 0.3s ease;
+  }
+  
+  /* Estilo aplicado no hover */
+  .download-icon:hover {
+    color: #0F6CBD; /* Cor de destaque no hover */
+    transform: scale(1.2); /* Aumenta o ícone um pouco no hover */
+  }
+  
+  
+  
+    

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

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

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

@@ -0,0 +1,133 @@
+import { Component, computed, EventEmitter, input, Input, InputSignal, Output, signal, TemplateRef } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'kv-content-viewer',
+  templateUrl: './kv-content-viewer.component.html',
+  styleUrl: './kv-content-viewer.component.scss'
+})
+export class KvContentViewerComponent {
+
+
+
+  // #region Signals
+ dataSource: InputSignal<any[]> = input<any[]>([]);
+ paginaInicial = signal<number>(1);
+ arquivo = input<string | undefined>(undefined);
+ arquivoPreview = signal<any>(undefined);
+ nomeArquivo = signal<string>('');
+ type = input<string | undefined>(undefined);
+ blob = input<Blob>('' as any);
+ idarquivo = signal<number | undefined>(undefined);
+ ekpContent = input<SafeHtml | undefined>(undefined);
+ totalItensCarregado = computed(
+  () => this.dataSource()?.length || 0
+);
+// #endregion
+
+// #region Properties
+empresaSelecionada!: any;
+idtipodocumento!: number[];
+@Input() extencaoDocumento!: string;
+previewOn: boolean = false;
+selectedItem: any = {};
+@Input() totalRecords: number = 0;
+isLoading: boolean = false;
+displaySidebar: boolean = false;
+isSelected: boolean = false;
+@Input() visualizadorDocumentos: boolean = false;
+@Input() cardTemplate!: TemplateRef<any>;
+@Input() contentTemplate!: TemplateRef<any>;
+@Input() noDocumentSelectedTemplate!: TemplateRef<any>;
+@Input() noDocumentListTemplate!: TemplateRef<any>;
+@Input() indvisualizado: boolean = false;
+@Input() btnTelaCheia: boolean = false;
+@Input() isLoadingSkeleton: boolean = false;
+keyVisualizado: string = 'indvisualizado'; 
+
+todayDate(): string {
+  const today = new Date();
+  return today.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' });
+}
+// #endregion
+
+// #region Outputs
+@Output() onScrollHandler: EventEmitter<any> = new EventEmitter();
+@Output() onSelectFile: EventEmitter<any> = new EventEmitter();
+// #endregion
+
+trackByFn(index: number, item: any): any {
+  return item.idarquivo; 
+}
+
+isVisualizado(option: any): boolean {
+  return option[this.keyVisualizado] || false;
+}
+
+visualizarPreview(arquivo: any): void {
+  arquivo[this.keyVisualizado] = true;
+
+  this.arquivoPreview.set(arquivo);
+  this.onSelectFile.emit(arquivo);
+  
+}
+
+alternarTelaCheia() {
+  const element = document.getElementById('fullscreenDiv');
+  const button = document.getElementById('fullscreenBtn');
+
+  // Verifica se os elementos existem
+  if (element && button) {
+    if (!document.fullscreenElement) {
+      // Expandir para tela cheia
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if ((element as any).mozRequestFullScreen) { // Para Firefox
+        (element as any).mozRequestFullScreen();
+      } else if ((element as any).webkitRequestFullscreen) { // Para Chrome, Safari e Opera
+        (element as any).webkitRequestFullscreen();
+      } else if ((element as any).msRequestFullscreen) { // Para IE/Edge
+        (element as any).msRequestFullscreen();
+      }
+      button.textContent = 'close_fullscreen';
+    } else {
+      // Sair da tela cheia
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if ((document as any).mozCancelFullScreen) { // Para Firefox
+        (document as any).mozCancelFullScreen();
+      } else if ((document as any).webkitExitFullscreen) { // Para Chrome, Safari e Opera
+        (document as any).webkitExitFullscreen();
+      } else if ((document as any).msExitFullscreen) { // Para IE/Edge
+        (document as any).msExitFullscreen();
+      }
+      button.textContent = 'open_in_full';
+    }
+  }
+}
+
+ngOnInit(): void {
+  document.addEventListener('fullscreenchange', () => {
+    const button = document.getElementById('fullscreenBtn');
+    
+    if (button) {
+      if (!document.fullscreenElement) {
+        button.textContent = 'open_in_full';
+      } else {
+        button.textContent = 'close_fullscreen';
+      }
+    }
+  });
+}
+
+scrollHandler($event: Event) {
+  const element = $event.target as HTMLElement;
+
+  //se o escroll chegar até o final
+  if (element.scrollHeight - element.scrollTop === element.clientHeight) {
+    // this.buscarProximosDocumentos();
+    this.onScrollHandler.emit($event);
+  }
+}
+
+}

package/src/lib/components/kv-content-viewer/kv-content-viewer.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+import { KvContentViewerComponent } from './kv-content-viewer.component';
+import { KvFileViewerNovoModule } from '../kv-file-viewer-novo/kv-file-viewer-novo.module';
+import { NgxLoadingModule } from 'ngx-loading';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+
+@NgModule({
+  declarations: [KvContentViewerComponent],
+  imports: [
+    CommonModule,
+    PdfViewerModule,
+    PrimeNgModule,
+    KvFileViewerNovoModule,
+    NgxLoadingModule
+  ],
+  exports: [KvContentViewerComponent]
+})
+export class KvContentViewerModule { }

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

@@ -0,0 +1,3 @@
+<small id="error-message" class="p-error block" style="height: 0px !important;" >
+  <ng-content *ngIf="hasError"></ng-content>
+</small>

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

@@ -0,0 +1,5 @@
+#error-message {
+    left: 1px;
+    font-size: 0.625rem !important;
+    font-family: 'Roboto' ,Arial, Helvetica, sans-serif !important;
+}