keevo-components 2.0.105 → 2.0.107

package/src/lib/components/kv-chart/kv-chart.component.html

@@ -0,0 +1,38 @@
+<div class="card h-full">
+  <div class="flex align-items-start justify-content-between mb-6">
+    <label class="text-900 text-xl font-semibold">{{ title }}</label>
+    <div>
+      <p-dropdown
+        *ngIf="showDatas"
+        [options]="periodos"
+        [(ngModel)]="selectedData"
+        optionLabel="label"
+        optionValue="value"
+        styleClass="w-15rem"
+        (onChange)="selectionValue($event)">
+      </p-dropdown>
+      <button
+        *ngIf="showMenu"
+        pButton
+        pRipple
+        icon="pi pi-ellipsis-h"
+        class="p-button-rounded p-button-secondary"
+        style="margin-left: 10px;"
+        (click)="menu.toggle($event)">
+      </button>
+      <p-menu
+        #menu
+        [popup]="true"
+        appendTo="body"
+        [model]="menuItems">
+      </p-menu>
+    </div>
+  </div>
+  <p-chart
+    #chart
+    [type]="type"
+    [data]="data"
+    [options]="options"
+    [height]="heightChart">
+  </p-chart>
+</div>

package/src/lib/components/kv-chart/kv-chart.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { KvChartComponent } from './kv-chart.component';
+
+describe('ChartComponent', () => {
+  let component: KvChartComponent;
+  let fixture: ComponentFixture<KvChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KvChartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KvChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,174 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
+
+import { MenuItem } from 'primeng/api';
+import { UIChart } from 'primeng/chart';
+
+import { ChartConfig } from '../../api/components/chart/chart.config';
+
+export const PeriodosChart = {
+  Ultimos180Dias: -180,
+  Ultimos120Dias: -120,
+  Ultimos90Dias: -90,
+  Ultimos60Dias: -60,
+  Ultimos45Dias: -45,
+  Ultimos30Dias: -30,
+  Ultimos15Dias: -15,
+  Ultimos7Dias: -7,
+  DataAtual: 0,
+  Proximos7Dias: 7,
+  Proximos15Dias: 15,
+  Proximos30Dias: 30,
+  Proximos45Dias: 45,
+  Proximos60Dias: 60,
+  Proximos90Dias: 90,
+  Proximos120Dias: 120,
+  Proximos180Dias: 180
+}
+
+@Component({
+  selector: 'kv-chart',
+  templateUrl: './kv-chart.component.html',
+  styleUrls: [
+    './kv-chart.component.scss',
+    '../keevo-components-styles.scss'
+  ]
+})
+export class KvChartComponent implements OnInit {
+
+  chartConfig: ChartConfig = {
+    labels: [],
+    datasets: [],
+  }
+
+  periodosDisponiveis = [
+    { label: 'Últimos 180 dias', value: -180 },
+    { label: 'Últimos 120 dias', value: -120 },
+    { label: 'Últimos 90 dias', value: -90 },
+    { label: 'Últimos 60 dias', value: -60 },
+    { label: 'Últimos 45 dias', value: -45 },
+    { label: 'Últimos 30 dias', value: -30 },
+    { label: 'Últimos 15 dias', value: -15 },
+    { label: 'Últimos 7 dias', value: -7 },
+    { label: 'Data atual', value: 0 },
+    { label: 'Próximos 7 dias', value: 7 },
+    { label: 'Próximos 15 dias', value: 15 },
+    { label: 'Próximos 30 dias', value: 30 },
+    { label: 'Próximos 45 dias', value: 45 },
+    { label: 'Próximos 60 dias', value: 60 },
+    { label: 'Próximos 90 dias', value: 90 },
+    { label: 'Próximos 120 dias', value: 120 },
+    { label: 'Próximos 180 dias', value: 180 }
+  ];
+
+  @Input() title!: string;
+  @Input() type!: 'doughnut' | 'pie' | 'bar' | 'line';
+  @Input() indexAxis!: 'y' | 'x';
+  @Input() displayLegend!: boolean;
+  @Input() heightChart: string = '300px';
+
+  @Input() showDatas: boolean = true;
+  @Input() showMenu: boolean = false;
+  @Input() selectedData!: number;
+  @Input() enablePeriodos: number[] = [];
+ 
+
+  data: any;
+  options: any;
+
+  periodos: any[] = [];
+
+  menuItems: MenuItem[] = [];
+
+  @Output() onPrintReport: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionValue: EventEmitter<any> = new EventEmitter();
+  @ViewChild('chart') chart?: UIChart;
+
+  constructor() { }
+
+  configureGraphic() {
+    this.data = this.chartConfig;
+    this.configOptions();
+    this.chart?.reinit();
+  }
+
+  private configOptions(): void {
+    
+      this.options = {
+        indexAxis: this.indexAxis || 'x',
+        maintainAspectRatio: true,
+        aspectRatio: 2,
+        responsive: true,        
+        animation: {
+          duration: 0
+        },
+        scales: {
+          x: {
+            ticks: {
+              color: 'black',
+              display: 768,
+            },
+            grid: {
+              color: 'white',
+            },
+          },
+          y: {
+            beginAtZero: true,
+            grid: {
+              color: 'white',
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            display: this.displayLegend || false,
+            labels: {
+              color: '#1e293b',
+              usePointStyle: true,
+              font: {
+                weight: 700,
+              },
+              padding: 28
+            },
+            position: 'bottom'
+          }
+        }     
+      };
+    
+    this.menuItems = [
+      { label: 'Imprimir relatório', command: () => this.printReport() }
+    ]
+  }
+
+  private initDatas() {
+    this.periodosDisponiveis.map((el) => {
+      if (this.enablePeriodos.includes(el.value)) {
+        this.periodos.push(el);
+      }
+    });
+  }
+
+  ngOnInit() {
+    this.initDatas();
+    this.configureGraphic();
+  }
+
+  printReport() {
+    this.onPrintReport.emit();
+  }
+
+  public reInit(config: any) {
+    this.chartConfig = config;
+    this.configureGraphic();
+  }
+
+  protected selectionValue(event: any) {
+    this.onSelectionValue.emit(event);
+  }
+}

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

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgModule } from "@angular/core";
+
+import { KvChartComponent } from './kv-chart.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    KvChartComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+  ],
+  exports: [
+    KvChartComponent
+  ]
+})
+export class KvChartModule { }

package/src/lib/components/kv-confirmation-modal/kv-confirmation-modal.component.html

@@ -0,0 +1,9 @@
+<div class="flex flex-column align-items-center justify-content-center">
+    <img [src]="image()">
+    <div class="mt-4">
+        <b class="text-sm">{{message()}}</b>
+    </div>
+</div>
+<div class="flex flex-row gap-1 align-items-center justify-content-end mt-4 -mb-2">
+    <kv-button label="Fechar" severity="tertiary" size="normal" (onClick)="close()"></kv-button>
+</div>

package/src/lib/components/kv-confirmation-modal/kv-confirmation-modal.component.scss

@@ -0,0 +1,7 @@
+::ng-deep .p-dialog .p-dialog-header {
+    display: none !important;
+}
+
+::ng-deep .p-dialog .p-dialog-content:last-of-type {
+    border-radius: 6px !important;
+}

package/src/lib/components/kv-confirmation-modal/kv-confirmation-modal.component.spec.ts

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

package/src/lib/components/kv-confirmation-modal/kv-confirmation-modal.component.ts

@@ -0,0 +1,32 @@
+import { Component, inject, input, signal } from '@angular/core';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { BaseComponentCrudForm } from '../../api/base-components/base-component-crud-form';
+
+@Component({
+  selector: 'kv-confirmation-modal',
+  standalone: false,
+  templateUrl: './kv-confirmation-modal.component.html',
+  styleUrl: './kv-confirmation-modal.component.scss'
+})
+export class KvConfirmationModalComponent extends BaseComponentCrudForm {
+
+  message = signal<string>('');
+  image = signal<string>('');
+
+  close() {
+    this.dynamicDialogRef.close();
+  }
+
+  override loadForm(id: any): void {
+
+    if (id) {
+      this.message.set(id['message']);
+      this.image.set(id['image']);
+    } else {
+      console.warn('Nenhum dado encontrado para o modal.');
+    }
+  }
+
+  override configureForm(): void { }
+  override save(): void { }
+}

package/src/lib/components/kv-confirmation-modal/kv-confirmation-modal.module.ts

@@ -0,0 +1,14 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvConfirmationModalComponent } from './kv-confirmation-modal.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { KvButtonModule } from '../kv-button/kv-button.module';
+
+@NgModule({
+  declarations: [KvConfirmationModalComponent],
+  imports: [CommonModule, PrimeNgModule, KvButtonModule],
+  exports: [
+    KvConfirmationModalComponent
+  ]
+})
+export class KvConfirmationModalModule { }

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

@@ -0,0 +1,229 @@
+<div
+  class="flex flex-column md:flex-row gap-2 custom-max-height "
+  style="height: 100%"
+>
+  <!-- Lista de documentos -->
+  <div
+    class="card-perfil col-12 md:col-4 lg:col-3 flex flex-column justify-content-between"
+    (scroll)="scrollHandler($event)"
+    [ngClass]="{
+      'overflow-y-auto': dataSource().length > 0,
+      'overflow-y-hidden': dataSource().length === 0
+    }"
+    style="position: relative; height: 100%; min-height: 15rem"
+  >
+    <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"
+        (click)="visualizarPreview(option)"
+        [ngClass]="{
+                    'card-naoVisualizado': !isVisualizado(option) && borderCardNaoVisualizado,
+                    'card-selected': option === arquivoPreview(),
+                    'card-normal': option !== arquivoPreview(),
+                    }"
+      >
+        <div
+          class="flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis"
+          style="max-width: 100%"
+        >
+          <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>
+      @if(isLoadingSkeleton){
+      <p-skeleton 
+        *ngFor="let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]" 
+        height="5rem" 
+        [style]="{ 'margin-bottom': '0.25rem', 'borderRadius': '0.75rem' }"
+      ></p-skeleton>
+      } @if(!noDocumentListTemplate) {
+      <div class="text-center text-gray-600 mt-4 m-3" style="height: 100%">
+        <div class="flex align-items-center gap-1">
+          <span class="material-symbols-outlined"> inbox </span>
+          <p>Nenhum documento disponível.</p>
+        </div>
+      </div>
+      } @else {
+      <div class="text-center mt-4 m-3" style="height: 100%">
+        <ng-container *ngTemplateOutlet="noDocumentListTemplate"></ng-container>
+      </div>
+      }
+    </ng-template>
+
+    <!-- Contador de documentos - Fixo na parte inferior -->
+    <div
+      class="sticky-counter flex flex-column
+       justify-content-center text-center px-2 p-2"
+      style="position: sticky; bottom: -10px; background-color: white; "
+    >
+      <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>
+      @if(listBottomTemplate) {
+      <ng-container *ngTemplateOutlet="listBottomTemplate"></ng-container>
+      }
+    </div>
+
+  </div>
+
+  <!-- Visualizador -->
+  <div
+    id="fullscreenDiv"
+    class="card-visualizador col-12 md:col-8 lg:col-9 flex-1"
+    style="position: relative; height: 100%"
+    [ngStyle]="{
+      'overflow-y': arquivoPreview() ? 'auto' : 'hidden'
+    }"
+  >
+    @if(btnTelaCheia && !buttonTemplate) {
+    <div class="grid">
+      <div class="col"></div>
+      <span
+        id="fullscreenBtn"
+        (click)="alternarTelaCheia()"
+        class="material-symbols-outlined p-2 text-xl cursor-pointer"
+      >
+        open_in_full
+      </span>
+    </div>
+    } @if(!btnTelaCheia && buttonTemplate && !contentViewer) {
+    <div class="grid">
+      <div class="col"></div>
+      <span class="p-3">
+        <span (click)="visualizarPreview(null, true)">
+          <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
+        </span>
+      </span>
+    </div>
+    } @if(btnTelaCheia && buttonTemplate) {
+    <div class="grid">
+      @if(!contentViewer) {
+      <span class="p-3">
+        <span (click)="visualizarPreview(null, true)">
+          <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
+        </span>
+      </span>
+      }
+      <div class="col"></div>
+      <span
+        id="fullscreenBtn"
+        (click)="alternarTelaCheia()"
+        class="material-symbols-outlined p-2 text-xl cursor-pointer"
+      >
+        open_in_full
+      </span>
+    </div>
+    } @if(visualizadorDocumentos) {
+    <ng-container *ngIf="arquivo(); else noDocumentSelected">
+      @if(isLoading) {
+      <ngx-loading
+        [show]="isLoading"
+        [config]="{ backdropBorderRadius: '3px', fullScreenBackdrop: false }"
+      ></ngx-loading>
+      }
+      <kv-file-viewer-novo
+        *ngIf="extencaoDocumento !== 'ekp'"
+        [arquivo]="arquivo()!"
+        [type]="type()!"
+        [blob]="blob()!"
+        [width]="'100%'"
+        [height]="'100%'"
+        class="file-viewer"
+        style="max-height: 100%"
+      >
+      </kv-file-viewer-novo>
+
+      <div
+        id="html-content"
+        [innerHTML]="ekpContent()"
+        *ngIf="extencaoDocumento === 'ekp'"
+        class="ekp-content"
+        style="overflow-y: auto; max-height: 100%"
+      ></div>
+    </ng-container>
+    } @else {
+    <div class="flex flex-column" style="height: 92%;" >
+      <ng-container
+        *ngIf="arquivoPreview() || contentViewer; else noDocumentSelected"
+      >
+      <div style="flex: 1;">
+        <ng-container
+          *ngTemplateOutlet="
+            contentTemplate;
+            context: { $implicit: arquivoPreview() }
+          "
+          style="overflow-y: auto; max-height: 100%"
+        ></ng-container>
+      </div>
+        @if(contentForm) {
+          <div class="grid" style="position: sticky; bottom: 0; background-color: white; z-index: 10; padding: 1rem 1rem 0 1rem;">
+            <div class="col-8">
+              <span class="text-sm">
+                <span class="font-bold">*</span> Campos obrigatórios
+              </span>
+            </div>
+            <div class="col-2">
+              <kv-button
+                label="Cancelar"
+                icon="close"
+                class="w-full md:w-auto"
+                severity="tertiary"
+                (onClick)="OnCancel()"
+              >
+              </kv-button>
+            </div>
+            <div class="col-2">
+              <kv-button
+                label="Salvar"
+                icon="save"
+                class="w-full md:w-auto"
+                severity="primary"
+                (onClick)="OnSave()"
+              >
+              </kv-button>
+            </div>
+          </div>
+        }
+      </ng-container>
+    </div> 
+    }
+    <ng-template #noDocumentSelected>
+      @if(!noDocumentSelectedTemplate) {
+      <div
+        class="no-document-message flex flex-column align-items-center justify-content-center"
+        style="height: 100%; overflow-y: auto"
+      >
+        <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'
+          "
+          style="max-height: 50%; margin-top: 2rem"
+          alt=""
+        />
+      </div>
+      } @else {
+      <ng-container
+        *ngTemplateOutlet="noDocumentSelectedTemplate"
+      ></ng-container>
+      }
+    </ng-template>
+  </div>
+</div>