keevo-components 2.0.55 → 2.0.56

package/src/lib/components/kv-file-viewer-novo/kv-file-viewer-novo.component.ts

@@ -0,0 +1,80 @@
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import * as vkbeautify from 'vkbeautify';
+
+@Component({
+  selector: 'kv-file-viewer-novo',
+  templateUrl: './kv-file-viewer-novo.component.html',
+  styleUrl: './kv-file-viewer-novo.component.scss',
+})
+export class KvFileViewerNovoComponent implements OnInit, OnChanges {
+  @Input() arquivo!: string;
+  @Input() type!: string;
+  @Input() blob!: Blob;
+  @Input() width: string = '100%';
+  @Input() height: string = '500px';
+
+  pdffile: any;
+  xmlBeautified: any;
+  xmlFormat: any;
+  sanitizedPdfSrc: SafeResourceUrl = '';
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  ngOnInit(): void {
+    if (this.type == 'text/xml' || this.type == 'application/xml')
+      this.visualizarXml();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['arquivo'] && this.arquivo) {
+      // Corrige qualquer ocorrência de ".." no nome do arquivo
+      this.arquivo = this.arquivo.replace(/\.\./g, '.');
+  
+      if (this.type == 'application/pdf') this.visualizarPDF();
+      else this.visualizarIframe();
+    }
+  }
+  
+
+  visualizarIframe() {
+    // Corrige qualquer ocorrência de dois pontos consecutivos no nome do arquivo
+    const nomeArquivoCorrigido = this.arquivo.replace(/\.\./g, '.');
+  
+    // Sanitiza o caminho corrigido
+    this.sanitizedPdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(
+      nomeArquivoCorrigido
+    );
+  }
+  
+
+  getSanitizer(url: string) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+  visualizarPDF() {
+    // Corrige qualquer ocorrência de dois pontos consecutivos no nome do arquivo
+    const nomeArquivoCorrigido = this.arquivo.replace(/\.\./g, '.');
+  
+    // Continua o processamento normalmente
+    let reader = new FileReader();
+  
+    reader.onload = (e: any) => {
+      this.pdffile = e.target.result;
+    };
+  
+    reader.readAsArrayBuffer(this.blob);
+  }
+  
+
+  async visualizarXml() {
+    const text = await new Response(this.blob).text();
+    this.xmlFormat = vkbeautify.xml(text);
+  }
+}

package/src/lib/components/kv-file-viewer-novo/kv-file-viewer-novo.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvFileViewerNovoComponent } from './kv-file-viewer-novo.component';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+
+
+@NgModule({
+  declarations: [KvFileViewerNovoComponent],
+  imports: [
+    CommonModule,
+    PdfViewerModule
+  ],
+  exports: [KvFileViewerNovoComponent]
+})
+export class KvFileViewerNovoModule { }

package/src/lib/components/kv-file-viewer-preview/kv-file-viewer-preview.component.html

@@ -0,0 +1,103 @@
+<div class="flex flex-column md:flex-row gap-2 mt-3 custom-max-height">
+  <!-- Lista de documentos -->
+  <div
+    class="card-perfil overflow-x-hidden"
+    (scroll)="scrollHandler($event)"
+    [ngClass]="{
+      'overflow-y-scroll': dataSource().length > 0,
+      'overflow-y-hidden': dataSource().length === 0
+    }"
+    style="position: relative; max-height: 80vh"
+  >
+    <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"
+        style="min-height: 5rem"
+        (click)="visualizarPreview(option)"
+        [ngClass]="{
+          'card-selected': option === arquivoPreview(),
+          'card-normal': option !== arquivoPreview(),
+        }"
+      >
+        <div class="flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0">
+          <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>
+      <div class="text-center text-gray-600 mt-4 m-3" style="height: 100%">
+        <p><i class="pi pi-inbox"></i> Nenhum documento disponível.</p>
+      </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: 0; background-color: white"
+    >
+      <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>
+    </div>
+  </div>
+
+  <!-- Visualizador de documentos -->
+  <div class="card-perfil col-12 md:col-8 lg:col-9" style="position: relative">
+    <ng-container *ngIf="arquivo(); else noDocumentSelected">
+      @if(isLoading) {
+      <ngx-loading
+        [show]="isLoading"
+        [config]="{ backdropBorderRadius: '3px', fullScreenBackdrop: false }"
+      ></ngx-loading>
+      }
+      <kv-file-viewer-novo
+        *ngIf="previewOn && extencaoDocumento !== 'ekp' && !isLoading"
+        [arquivo]="arquivo()!"
+        [type]="type()!"
+        [blob]="blob()!"
+        [width]="'100%'"
+        [height]="'100%'"
+        class="file-viewer"
+      >
+      </kv-file-viewer-novo>
+
+      <div
+        id="html-content"
+        [innerHTML]="ekpContent()"
+        *ngIf="extencaoDocumento === 'ekp' && !isLoading"
+        class="ekp-content"
+      ></div>
+    </ng-container>
+
+    <ng-template #noDocumentSelected>
+      <div
+        class="no-document-message flex flex-column align-items-center justify-content-center"
+        style="height: 100%"
+      >
+        <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'
+          "
+          alt=""
+        />
+      </div>
+    </ng-template>
+  </div>
+</div>

package/src/lib/components/kv-file-viewer-preview/kv-file-viewer-preview.component.scss

@@ -0,0 +1,153 @@
+.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 */
+  }
+  
+  .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: 98%;
+  }
+  
+  @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-file-viewer-preview/kv-file-viewer-preview.component.spec.ts

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

package/src/lib/components/kv-file-viewer-preview/kv-file-viewer-preview.component.ts

@@ -0,0 +1,73 @@
+import { Component, computed, EventEmitter, input, Input, InputSignal, Output, signal, TemplateRef } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'kv-file-viewer-preview',
+  standalone: false,
+  templateUrl: './kv-file-viewer-preview.component.html',
+  styleUrl: './kv-file-viewer-preview.component.scss'
+})
+export class KvFileViewerPreviewComponent {
+
+// #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[];
+extencaoDocumento!: string;
+previewOn: boolean = false;
+selectedItem: any = {};
+totalRecords: number = 0;
+isLoading: boolean = false;
+displaySidebar: boolean = false;
+isSelected: boolean = false;
+@Input() cardTemplate!: TemplateRef<any>;
+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
+
+
+visualizarPreview(arquivo: any): void {
+  this.arquivoPreview.set(arquivo);
+  this.onSelectFile.emit(arquivo);
+}
+
+trackByFn(index: number, item: any): any {
+  return item.idarquivo; // Use uma propriedade única como identificador
+}
+
+// #region Scroll Handling
+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();
+  }
+}
+
+// #endregion
+
+}
+

package/src/lib/components/kv-file-viewer-preview/kv-file-viewer-preview.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+import { KvFileViewerPreviewComponent } from './kv-file-viewer-preview.component';
+import { KvFileViewerNovoModule } from '../kv-file-viewer-novo/kv-file-viewer-novo.module';
+import { NgxLoadingModule } from 'ngx-loading';
+
+@NgModule({
+  declarations: [KvFileViewerPreviewComponent],
+  imports: [
+    CommonModule,
+    PdfViewerModule,
+    NgxLoadingModule,
+    KvFileViewerNovoModule
+  ],
+  exports: [KvFileViewerPreviewComponent]
+})
+export class KvFileViewerPreviewModule { }

package/src/lib/components/kv-filter-card/kv-filter-card.component.html

@@ -0,0 +1,12 @@
+<div [style]='{"--accent-color": color}' [ngClass]='[cardState == "inactive" ? "card-disabled" : "card", cardState == "selected" ? "clickable-selected" : "clickable"]'>
+  <div class="filter-card-content">
+    <div class="filter-card-title">
+      @if (gIcon) {
+      <kv-g-icon>{{ gIcon }}</kv-g-icon>
+      }
+      <ng-content select="[icon]"></ng-content>
+      <div style="font-weight: bold; font-size: .825em">{{ title }}</div>
+    </div>
+    <div class="flex align-items-center" style="font-size: 1.25em; font-weight: bold; min-height: 1.875rem">{{ amount }}</div>
+  </div>
+</div>

package/src/lib/components/kv-filter-card/kv-filter-card.component.scss

@@ -0,0 +1,76 @@
+.card {
+    --accent-color: #5289B4;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    background-color: rgb(249, 249, 249);
+    border-left: solid 0.325rem var(--accent-color);
+    * {
+	margin: 0px;
+	color: var(--accent-color);
+    }
+    border-radius: .625rem;
+}
+
+p {
+    font-size: 0.75rem;
+}
+
+.card-disabled {
+    --accent-color: #5289B4;
+    $transition-time: 0.2s;
+    border: 1px solid lightgrey;
+    border-left: solid 0.325rem lightgrey;
+    transition: border-left $transition-time ease;
+    &:hover {
+	border-left: solid 0.325rem var(--accent-color);
+	transition: border-left $transition-time ease;
+	* {
+	    color: var(--accent-color);
+	    transition: color $transition-time ease;
+	}
+    }
+    * {
+	margin: 0px;
+	color: lightgrey;
+	transition: color $transition-time ease;
+    }
+    border-radius: 10px;
+}
+
+.clickable-selected {
+    cursor: pointer;
+    background-color: #EAFAFF;
+    &:hover {
+	background-color: #DEEEFF;
+    }
+}
+
+.clickable {
+    cursor: pointer;
+    &:hover {
+	background-color: #F0F0F0;
+    }
+}
+
+.filter-card-content {
+    display: flex;
+    flex-direction: row;
+    padding: .4rem;
+    padding-top: .575rem;
+    gap: .5rem;
+    // * {
+	// color: var(--accent-color);
+    // }
+}
+
+.select-none {
+    user-select: none;
+}
+
+.filter-card-title {
+    flex: 1 1 0%;
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.4rem;
+}

package/src/lib/components/kv-filter-card/kv-filter-card.component.spec.ts

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

package/src/lib/components/kv-filter-card/kv-filter-card.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'kv-filter-card',
+  templateUrl: './kv-filter-card.component.html',
+  styleUrl: './kv-filter-card.component.scss',
+})
+export class KvFilterCardComponent {
+  @Input() cardState: CardState = "normal";
+  @Input() color!: string;
+  @Input() title!: string;
+  @Input() amount?: number;
+  @Input() gIcon?: string;
+  @Input() spaceNowrap: boolean = false;
+}
+
+export type CardState = "normal" | "selected" | "inactive";
+export type CardStateClass = "card" | "PLACEHOLDER" | "card-disabled";

package/src/lib/components/kv-filter-card/kv-filter-card.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule, NgClass } from '@angular/common';
+import { KvFilterCardComponent } from './kv-filter-card.component';
+import { KvGIconModule } from '../kv-g-icon/kv-g-icon.module';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+
+
+@NgModule({
+  declarations:[
+    KvFilterCardComponent
+  ],
+  imports: [
+    CommonModule,
+    KvGIconModule,  
+    PrimeNgModule,
+    NgClass  
+  ],
+  exports:[
+    KvFilterCardComponent
+  ]
+})
+export class KvFilterCardModule { }

package/src/lib/components/kv-filter-fieldset/kv-filter-fieldset.component.html

@@ -0,0 +1,25 @@
+<p-fieldset styleClass="p-0 mb-2">
+  <ng-template pTemplate="header">
+    @if(isExpandable) {
+    <div
+      class="flex flex-row align-items-center justify-content-center {{
+        isExpandable && 'cursor-pointer'
+      }}"
+      (click)="toggleField()"
+    >
+      <span
+        class="material-symbols-outlined flex align-items-center justify-content-center mr-1"
+        style="font-size: 1.2rem"
+      >
+        {{ isCollapsed ? "remove" : "add" }}
+      </span>
+
+      <span class="text-xs"> Filtros </span>
+    </div>
+    } @if(!isExpandable) {
+    <span class="text-xs"> Filtros </span>
+    }
+  </ng-template>
+
+  <ng-content></ng-content>
+</p-fieldset>

package/src/lib/components/kv-filter-fieldset/kv-filter-fieldset.component.scss

@@ -0,0 +1,22 @@
+::ng-deep .p-fieldset .p-fieldset-legend {
+  padding: 0.1rem 0.1rem 0rem 0.1rem !important;
+  // padding-top: 0rem;
+  margin-left: 1rem;
+}
+
+::ng-deep .p-fieldset .p-fieldset-legend {
+  background-color: white;
+  border: none;
+
+  &:hover {
+    background-color: rgb(245, 245, 245);
+  }
+
+  &:active {
+    background-color: rgb(224, 224, 224);
+  }
+}
+
+::ng-deep .p-fieldset .p-fieldset-content {
+  padding: 0 0.5rem 0.5rem 0.5rem;
+}