keevo-components 1.8.539 → 1.8.541

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

@@ -0,0 +1,27 @@
+import {
+  Component,
+  EventEmitter,
+  Input
+} from '@angular/core';
+
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'kv-error',
+  templateUrl: './kv-error.component.html',
+  styleUrls: ['./kv-error.component.scss']
+})
+export class KvErrorComponent {
+  public hasError: boolean | undefined = false;
+
+  @Input() formControl!: FormControl;
+
+  @Input('hasError') set setHasError(value: boolean | undefined) {
+    this.hasError = value;
+    this.emitError.emit(value);
+  };
+
+  emitError: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  constructor() { }
+}

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

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import {
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+
+import { KvErrorComponent } from './kv-error.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    KvErrorComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    PrimeNgModule,
+    ReactiveFormsModule,
+  ],
+  exports: [
+    KvErrorComponent,
+  ]
+})
+export class kvErrorModule { }

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

@@ -0,0 +1,56 @@
+<div
+    *ngIf="formGroup"
+    [ngClass]="{'invalid-border': formGroup && formControlName && formGroup.controls[formControlName].invalid && formGroup.controls[formControlName].touched}"
+    class="border-dashed border-2 border-round-lg border-gray-400 flex justify-content-end"
+    (dragover)="onDragOver($event)"
+    (dragleave)="onDragLeave($event)"
+    (drop)="onDrop($event)"
+    [style.width]="widthComponent"
+    [style.height]="heightComponent">
+
+  <div class="field col-12 flex justify-content-center align-items-center flex-column">
+    <div
+      class="w-full flex align-items-center justify-content-center"
+      style="cursor: pointer;"
+      (click)="fileInput.click()">
+
+      <input type="file" (change)="onFileSelected($event)" #fileInput [accept]="setAccept()" hidden/>
+
+      @if(formGroup && formControlName && !formGroup.controls[formControlName].value) {
+        <div class="flex flex-column align-items-center justify-content-center">
+          @if(tamanhoMaximoPermitido) {
+            <p class="w-full text-start">Tamanho maximo permitido ( {{tamanhoMaximoPermitido}} )*</p>
+          }
+            <span class="material-symbols-outlined mt-2" style="font-size: 3rem;">
+                cloud_upload
+            </span>
+
+            @if(description) {  
+                <p class="font-semibold text-center">{{description}}</p>
+            } @else {
+                <p class="font-semibold text-center">Arraste e solte o arquivo aqui, ou<br>clique para selecioná-lo</p>
+            }
+        </div>
+      }
+    </div>
+
+    @if(formGroup && formControlName && formGroup.controls[formControlName].value) {
+      <div class="flex flex-column">
+          <span class="font-semibold" style="padding: 10px;">Arquivo Selecionado:</span>
+          <div class="flex flex-row">
+              <span style="padding: 10px;">{{ formGroup.controls[formControlName].value?.name }}</span>
+              <span style="padding: 10px;">({{ formatBytes(formGroup.controls[formControlName].value?.size) }})</span>
+              <i  style="padding: 10px; margin-left: 10px;"
+                  pTooltip="Excluir arquivo"
+                  class="border-solid border-1 border-round-sm border-gray-400 pi pi-trash delete cursor-pointer"
+                  (click)="deleteFile()"
+              ></i>
+          </div>
+      </div>
+    }
+  </div>
+</div>
+
+@if (formGroup && formControlName && formGroup.controls[formControlName].invalid && formGroup.controls[formControlName].touched)  {
+  <p class="error-message">Campo obrigatório</p>
+}

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

@@ -0,0 +1,9 @@
+.invalid-border {
+  border: 2px dashed red !important;
+}
+
+.error-message {
+  color: rgb(255, 14, 14);
+  font-size: 12px !important;
+  margin-top: 0.1rem;
+}

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

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

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

@@ -0,0 +1,163 @@
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } 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'];
+  @Input() tamanhoMaximoPermitido: string = '';
+  @Input() includeOfficeTypes: boolean = false; // Propriedade para controlar os tipos de Office
+
+  @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();
+  }
+
+  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, ';
+    });
+
+    // 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,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvFileUploadComponent } from './kv-file-upload.component';
+
+@NgModule({
+  declarations: [KvFileUploadComponent],
+  imports: [CommonModule],
+  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>