keevo-components 2.0.106 → 2.0.107

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

@@ -0,0 +1,185 @@
+.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%
+  }
+
+  .card-visualizador{
+      border: 1.5px solid #CBD5E1;
+    background: #fff;
+    border-radius: 6px;
+    max-height: 100%
+  }
+
+  @media(max-width: 768px) {
+    .card-perfil{
+      max-height: 20rem;
+      overflow-y: auto;
+    }
+  }
+
+  @media(max-width: 768px) {
+    .card-visualizador{
+      max-height: 100%;
+      overflow-y: auto;
+    }
+  }
+  
+  :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;
+  }
+  
+  .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: 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%;
+    }
+  }
+
+  .custom-max-height {
+    height: 100%;
+  }
+
+  @media (max-height: 768px) {
+    .custom-max-height {
+      height: auto;
+      min-height: 100vh;
+    }
+  }
+  
+  /* 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

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

@@ -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,25 @@
+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';
+
+
+@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,134 @@
+<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 relative p-2"
+  (dragover)="onDragOver($event)"
+  (dragleave)="onDragLeave($event)"
+  (drop)="onDrop($event)"
+  [style.minWidth]="'20rem'"
+  [style.minHeight]="'10rem'"
+  [style.width]="widthComponent"
+  [style.height]="heightComponent"
+>
+  @if(formGroup && formControlName && formGroup.controls[formControlName].value)
+  {
+  <button
+    style="background-color: transparent"
+    pButton
+    (click)="deleteFile()"
+    class="absolute transition-colors transition-duration-500 text-red-700 hover:text-red-500 m-1 h-2rem w-2rem"
+    [text]="true"
+    [icon]="'pi pi-trash'"
+  ></button>
+  }
+  <div
+    class="col-12 flex flex-column align-items-center justify-content-center"
+  >
+    <div
+      class="w-full align-items-center justify-content-center col-12"
+      style="cursor: pointer"
+      [style.display]="formGroup.controls[formControlName].value ? 'none' : 'flex'"
+      (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 text-gray-700"
+          style="font-size: 2.5rem"
+        >
+          cloud_upload
+        </span>
+
+        @if(description) {
+        <span class="font-medium text-center text-sm text-gray-600">
+          {{ description }}
+        </span>
+        } @else {
+        <span class="font-medium text-center text-sm text-gray-600">
+          Arraste e solte o arquivo aqui, ou<br />clique para selecioná-lo
+        </span>
+        }
+      </div>
+
+      }
+    </div>
+
+    @if(formGroup && formControlName && formGroup.controls[formControlName].value) {
+    <div class="flex flex-column justify-content-between h-full w-full">
+      <div class="col-9 p-0 pt-1">
+        <kv-progress-bar
+          [value]="
+            progressValue()(formGroup.controls[formControlName].value?.size)
+          "
+          [showValue]="false"
+          [barStyleClass]="
+            progressValue()(formGroup.controls[formControlName].value?.size) ==
+            100
+              ? 'bg-red-400'
+              : ''
+          "
+          [label]="
+            returnProgressLabel()(
+              formGroup.controls[formControlName].value?.size
+            )
+          "
+        ></kv-progress-bar>
+
+        @if(progressValue()(formGroup.controls[formControlName].value?.size) ==
+        100) {
+        <span class="text-red-600 text-xs">Tamanho máximo excedido.</span>
+        }
+      </div>
+
+      <div class="flex flex-column gap-2">
+        <span class="font-medium text-gray-600 text-xs"
+          >Arquivo Selecionado:</span
+        >
+
+        <div class="flex flex-row justify-content-between">
+          <span class="text-gray-600 text-xs">{{
+            formGroup.controls[formControlName].value?.name
+          }}</span>
+          <span
+            class="
+          {{
+              progressValue()(
+                formGroup.controls[formControlName].value?.size
+              ) == 100
+                ? 'text-red-600'
+                : 'text-green-600'
+            }} 
+           text-xs"
+            >{{
+              formatBytes(formGroup.controls[formControlName].value?.size)
+            }}</span
+          >
+        </div>
+      </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,13 @@
+.invalid-border {
+  border: 2px dashed red !important;
+}
+
+.error-message {
+  color: rgb(255, 14, 14);
+  font-size: 12px !important;
+  margin-top: 0.1rem;
+}
+
+.teste {
+  background-color: red !important;
+}

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();
+  });
+});