keevo-components 2.0.55 → 2.0.56

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

@@ -0,0 +1,171 @@
+import { Component, computed, EventEmitter, input, Input, InputSignal, Output, signal, TemplateRef } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import { NotificationService } from '../../api/services/notification.service';
+
+@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() buttonTemplate!: TemplateRef<any>;
+@Input() listBottomTemplate!: TemplateRef<any>;
+@Input() indvisualizado: boolean = false;
+@Input() btnTelaCheia: boolean = false;
+@Input() isLoadingSkeleton: boolean = false;
+@Input() borderCardNaoVisualizado: boolean = true;
+@Input() contentForm: boolean = false;
+contentViewer: boolean = false;
+keyVisualizado: string = 'indvisualizado'; 
+
+     constructor(
+      private notificationService: NotificationService,
+     ) {
+
+     }
+
+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();
+@Output() onSave: EventEmitter<any> = new EventEmitter();
+@Output() onCancel: 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, buttonTemplate?: boolean): void {
+  
+  if (buttonTemplate) {
+    this.contentViewer = true;
+  } else {
+    arquivo[this.keyVisualizado] = true;
+    this.contentViewer = true;
+    this.arquivoPreview.set(arquivo);
+  }
+
+  this.onSelectFile.emit(arquivo);
+  
+}
+
+  OnSave() {
+    this.onSave.emit();
+    this.contentViewer = false;
+    this.arquivoPreview.set(undefined);
+  }
+
+  OnCancel() {
+    this.notificationService.question({
+      type: 'question',
+      message: 'Você fez alterações que não foram salvas. Tem certeza que deseja cancelar?',
+      accept: () => {
+        this.onCancel.emit();
+        this.contentViewer = false;
+        this.arquivoPreview.set(undefined);
+      },
+    });
+  }
+
+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,26 @@
+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';
+import { KvButtonModule } from '../kv-button/kv-button.module';
+import { KvButtonsModule } from '../kv-buttons/kv-button.module';
+import { NotificationService } from 'projects/keevo-components/src/public-api';
+
+
+@NgModule({
+  declarations: [KvContentViewerComponent],
+  imports: [
+    CommonModule,
+    PdfViewerModule,
+    PrimeNgModule,
+    KvFileViewerNovoModule,
+    NgxLoadingModule,
+    KvButtonModule,
+    KvButtonsModule
+  ],
+  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;
+}

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,164 @@
+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', 'text/plain'];
+  @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, ';
+      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,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;
+  }
+}