keevo-components 2.0.105 → 2.0.107

package/src/lib/components/kv-file-upload/kv-file-upload.component.ts

@@ -0,0 +1,200 @@
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, input, computed, signal } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { NotificationService } from '../../api/services/notification.service';
+
+@Component({
+  selector: 'kv-file-upload',
+  templateUrl: './kv-file-upload.component.html',
+  styleUrl: './kv-file-upload.component.scss'
+})
+export class KvFileUploadComponent {
+  @Input() formGroup!: FormGroup;
+  @Input() formControlName!: string;
+  @Input() widthComponent: string = '400px';
+  @Input() heightComponent: string = 'auto';
+  @Input() description!: string;
+  @Input() validFileTypes: string[] = ['image/', 'application/pdf', 'text/html', 'text/xml', 'application/xml', 'text/plain'];
+  @Input() tamanhoMaximoPermitido: string = '';
+  @Input() includeOfficeTypes: boolean = false; // Propriedade para controlar os tipos de Office
+
+  maxSizeFile = input<number>(10)
+
+  @Output() fileEmit: EventEmitter<any> = new EventEmitter();
+  @Output() removeFileEmit: EventEmitter<any> = new EventEmitter();
+
+  @ViewChild('fileInput') fileInput!: ElementRef;
+  @ViewChild('inputUpload') inputUpload!: ElementRef;
+
+  constructor(private notificationService: NotificationService) { }
+
+  onFileSelected(event: any): void {
+    let validTypes = [...this.validFileTypes];
+
+    if (this.includeOfficeTypes) {
+
+      validTypes.push(
+        'application/msword', // .doc
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
+        'application/vnd.ms-powerpoint', // .ppt
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation' // .pptx
+      );
+    }
+
+    if (event.target.files.length == 0) return;
+
+    const isValidFileType = validTypes.some(type => event.target.files[0].type.startsWith(type) ||
+      (type === 'application/xml' && event.target.files[0].type === 'application/xml') ||
+      (type === 'text/xml' && event.target.files[0].type === 'text/xml')
+    );
+    if (!isValidFileType) {
+      this.notificationService.toastError('Tipo de arquivo inválido');
+      this.formGroup.controls[this.formControlName].setValue(null);
+      return;
+    }
+
+    this.formGroup.controls[this.formControlName].setValue(event.target.files[0]);
+    this.fileEmit.emit(event.target.files[0]);
+  }
+
+  deleteFile() {
+    this.formGroup.controls[this.formControlName].setValue(null);
+    this.fileInput.nativeElement.value = '';
+    this.removeFileEmit.emit();
+  }
+
+  // returnMbSize = computed(() => (bytes: any) => {
+  //   if (bytes === null || bytes === undefined) {
+  //     return '0 MB';
+  //   }
+
+  //   const mbSize = bytes / (1024 * 1024);
+    
+  //   return this.formatBytes(mbSize, 2);
+  // });
+
+  progressValue = computed(() => (bytes: any) => {
+    if (bytes === null || bytes === undefined) {
+      return 0;
+    }
+
+    const mbSize = bytes / (1024 * 1024);
+    let progressValue = (Number(mbSize) / this.maxSizeFile()) * 100;
+
+    // Limita o valor do progresso entre 0 e 100
+    return Math.min(Math.max(progressValue, 0), 100);
+  });
+
+  returnProgressLabel = computed(() => (bytes: any) => {
+    if (bytes === null || bytes === undefined) {
+      return '0 MB';
+    }
+
+    const mbSize = bytes / (1024 * 1024);
+    // let progressValue = (Number(mbSize) / this.maxSizeFile()) * 100;
+    // this.progressValue.set(progressValue);
+    // this.progressValue.set((mbSize / this.maxSizeFile())*100);
+    return `${mbSize.toFixed(2)}/${this.maxSizeFile()} MB`;
+  })
+
+  formatBytes(bytes: any, decimals = 2) {
+    if (!bytes) {
+      return "0 Bytes";
+    }
+    const k = 1024;
+    const dm = decimals <= 0 ? 0 : decimals;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+  }
+
+  addDragOverClass(event: DragEvent) {
+    const container = event.target as HTMLElement;
+    container.classList.add('dragover');
+  }
+
+  removeDragOverClass(event: DragEvent) {
+    const container = event.target as HTMLElement;
+    container.classList.remove('dragover');
+  }
+
+  handleFile(file: File) {
+
+    if (this.includeOfficeTypes) {
+      let validTypes = [...this.validFileTypes];
+
+      validTypes.push(
+        'application/msword', // .doc
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
+        'application/vnd.ms-powerpoint', // .ppt
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation' // .pptx
+      );
+    }
+
+    const isValidFileType = this.validFileTypes.some(type =>
+      file.type.startsWith(type) ||
+      file.type === 'application/xml' ||
+      file.type === 'text/xml'
+    );
+
+    if (!isValidFileType) {
+      this.notificationService.toastError('Tipo de arquivo inválido');
+      this.formGroup.controls[this.formControlName].setValue(null);
+      return;
+    }
+
+    this.formGroup.controls[this.formControlName].setValue(file);
+
+    const reader = new FileReader();
+
+    if (file.type.startsWith('image/')) {
+      reader.readAsDataURL(file);
+    } else if (file.type === 'application/xml' || file.type === 'text/xml') {
+      reader.readAsText(file);
+    } else {
+      reader.readAsArrayBuffer(file);
+    }
+
+    this.fileEmit.emit(file);
+  }
+
+  onDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.addDragOverClass(event);
+  }
+
+  onDragLeave(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.removeDragOverClass(event);
+  }
+
+  onDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.removeDragOverClass(event);
+
+    if (event.dataTransfer && event.dataTransfer.files.length > 0) {
+      this.handleFile(event.dataTransfer.files[0]);
+    }
+  }
+
+  setAccept(): string {
+    let types = ''
+
+    this.validFileTypes.forEach(type => {
+      if (type.includes('image')) types += '.jpg, .png, .bmp, ';
+      if (type.includes('html')) types += '.html, ';
+      if (type.includes('pdf')) types += '.pdf, ';
+      if (type.includes('xml')) types += '.xml, ';
+      if (type.includes('plain')) types += '.txt, ';
+    });
+
+    // Adiciona tipos de arquivos do Office se includeOfficeTypes for true
+    if (this.includeOfficeTypes) {
+      types += '.doc, .docx, .ppt, .pptx, ';
+    }
+
+    return types.slice(0, -2); // Remove a última vírgula e espaço
+  }
+}

package/src/lib/components/kv-file-upload/kv-file-upload.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvFileUploadComponent } from './kv-file-upload.component';
+import { KvProgressBarModule } from "../kv-progress-bar/kv-progress-bar.module";
+import { ButtonModule } from 'primeng/button';
+
+@NgModule({
+  declarations: [KvFileUploadComponent],
+  imports: [CommonModule,
+    KvProgressBarModule, ButtonModule],
+  exports: [KvFileUploadComponent]
+})
+export class KvFileUploadModule { }

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

@@ -0,0 +1,16 @@
+<img class="img" *ngIf="type.match('image')" [src]="sanitizedPdfSrc" />
+
+<iframe
+  class="txt-pdf"
+  *ngIf="type == 'text/plain' || type == 'application/pdf'"
+  [src]="sanitizedPdfSrc"
+  [width]="width"
+  [height]="height"
+>
+</iframe>
+
+<div *ngIf="xmlFormat" class="txt-pdf xml-viewer">
+  <pre lang="xml">
+    {{ xmlFormat }}
+  </pre>
+</div>

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

@@ -0,0 +1,18 @@
+.img {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+// .txt-pdf {
+//   width: 100%;
+//   height: 600px;
+// }
+
+.xml-viewer {
+  overflow: auto;
+  font-size: 13px;
+  .tag {
+    color: #6f517e;
+  }
+}

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

@@ -0,0 +1,42 @@
+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',
+  templateUrl: './kv-file-viewer.component.html',
+  styleUrl: './kv-file-viewer.component.scss',
+})
+export class KvFileViewerComponent implements OnInit, OnChanges {
+  @Input() arquivo!: string;
+  @Input() type!: string;
+  @Input() blob!: Blob;
+  @Input() width:string = '100%';
+  @Input() height: string = '700px';
+  
+  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) {
+      this.sanitizedPdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.arquivo);
+    }
+  }
+
+  getSanitizer(url: string) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+  async visualizarXml() {
+    const text = await new Response(this.blob).text();
+    this.xmlFormat = vkbeautify.xml(text);
+  }
+}

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvFileViewerComponent } from './kv-file-viewer.component';
+
+
+
+@NgModule({
+  declarations: [KvFileViewerComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [KvFileViewerComponent]
+})
+export class KvFileViewerModule { }

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

@@ -0,0 +1,34 @@
+<img class="img" *ngIf="type.match('image')" [src]="sanitizedPdfSrc" />
+
+<iframe
+  class="txt-pdf"
+  *ngIf="type == 'text/plain'"
+  [src]="sanitizedPdfSrc"
+  [width]="width"
+  [height]="height"
+>
+</iframe>
+
+<div *ngIf="xmlFormat" class="txt-pdf xml-viewer">
+  <pre lang="xml">
+    {{ xmlFormat }}
+  </pre>
+</div>
+
+<pdf-viewer
+  class="txt-pdf-viewer"
+  [src]="pdffile"
+  *ngIf="type == 'application/pdf'"
+  [rotation]="0"
+  [original-size]="true"
+  [show-all]="true"
+  [fit-to-page]="true"
+  [zoom]="1"  
+  [stick-to-page]="false"
+  [render-text]="true"
+  [external-link-target]="'blank'"
+  [autoresize]="true"
+  [show-borders]="false"
+  [ngStyle]="{ width: width, height: height }"
+></pdf-viewer>
+

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

@@ -0,0 +1,17 @@
+.img {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.txt-pdf-viewer {
+overflow: auto;
+}
+
+.xml-viewer {
+  overflow: auto;
+  font-size: 13px;
+  .tag {
+    color: #6f517e;
+  }
+}

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>