keevo-components 1.8.541 → 1.8.542

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

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

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

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

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

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

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

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

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

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