keevo-components 2.0.105 → 2.0.107

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

@@ -0,0 +1,153 @@
+.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%
+  }
+  
+  :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 !important;
+  }
+  
+  .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: 98%;
+  }
+  
+  @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%;
+    }
+  }
+  
+  /* 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-file-viewer-preview/kv-file-viewer-preview.component.spec.ts

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

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

@@ -0,0 +1,73 @@
+import { Component, computed, EventEmitter, input, Input, InputSignal, Output, signal, TemplateRef } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'kv-file-viewer-preview',
+  standalone: false,
+  templateUrl: './kv-file-viewer-preview.component.html',
+  styleUrl: './kv-file-viewer-preview.component.scss'
+})
+export class KvFileViewerPreviewComponent {
+
+// #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[];
+extencaoDocumento!: string;
+previewOn: boolean = false;
+selectedItem: any = {};
+totalRecords: number = 0;
+isLoading: boolean = false;
+displaySidebar: boolean = false;
+isSelected: boolean = false;
+@Input() cardTemplate!: TemplateRef<any>;
+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();
+// #endregion
+
+
+visualizarPreview(arquivo: any): void {
+  this.arquivoPreview.set(arquivo);
+  this.onSelectFile.emit(arquivo);
+}
+
+trackByFn(index: number, item: any): any {
+  return item.idarquivo; // Use uma propriedade única como identificador
+}
+
+// #region Scroll Handling
+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();
+  }
+}
+
+// #endregion
+
+}
+

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+import { KvFileViewerPreviewComponent } from './kv-file-viewer-preview.component';
+import { KvFileViewerNovoModule } from '../kv-file-viewer-novo/kv-file-viewer-novo.module';
+import { NgxLoadingModule } from 'ngx-loading';
+
+@NgModule({
+  declarations: [KvFileViewerPreviewComponent],
+  imports: [
+    CommonModule,
+    PdfViewerModule,
+    NgxLoadingModule,
+    KvFileViewerNovoModule
+  ],
+  exports: [KvFileViewerPreviewComponent]
+})
+export class KvFileViewerPreviewModule { }

package/src/lib/components/kv-filter-card/kv-filter-card.component.html

@@ -0,0 +1,12 @@
+<div [style]='{"--accent-color": color}' [ngClass]='[cardState == "inactive" ? "card-disabled" : "card", cardState == "selected" ? "clickable-selected" : "clickable"]'>
+  <div class="filter-card-content">
+    <div class="filter-card-title">
+      @if (gIcon) {
+      <kv-g-icon>{{ gIcon }}</kv-g-icon>
+      }
+      <ng-content select="[icon]"></ng-content>
+      <div style="font-weight: bold; font-size: .825em">{{ title }}</div>
+    </div>
+    <div class="flex align-items-center" style="font-size: 1.25em; font-weight: bold; min-height: 1.875rem">{{ amount }}</div>
+  </div>
+</div>

package/src/lib/components/kv-filter-card/kv-filter-card.component.scss

@@ -0,0 +1,76 @@
+.card {
+    --accent-color: #5289B4;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    background-color: rgb(249, 249, 249);
+    border-left: solid 0.325rem var(--accent-color);
+    * {
+	margin: 0px;
+	color: var(--accent-color);
+    }
+    border-radius: .625rem;
+}
+
+p {
+    font-size: 0.75rem;
+}
+
+.card-disabled {
+    --accent-color: #5289B4;
+    $transition-time: 0.2s;
+    border: 1px solid lightgrey;
+    border-left: solid 0.325rem lightgrey;
+    transition: border-left $transition-time ease;
+    &:hover {
+	border-left: solid 0.325rem var(--accent-color);
+	transition: border-left $transition-time ease;
+	* {
+	    color: var(--accent-color);
+	    transition: color $transition-time ease;
+	}
+    }
+    * {
+	margin: 0px;
+	color: lightgrey;
+	transition: color $transition-time ease;
+    }
+    border-radius: 10px;
+}
+
+.clickable-selected {
+    cursor: pointer;
+    background-color: #EAFAFF;
+    &:hover {
+	background-color: #DEEEFF;
+    }
+}
+
+.clickable {
+    cursor: pointer;
+    &:hover {
+	background-color: #F0F0F0;
+    }
+}
+
+.filter-card-content {
+    display: flex;
+    flex-direction: row;
+    padding: .4rem;
+    padding-top: .575rem;
+    gap: .5rem;
+    // * {
+	// color: var(--accent-color);
+    // }
+}
+
+.select-none {
+    user-select: none;
+}
+
+.filter-card-title {
+    flex: 1 1 0%;
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.4rem;
+}

package/src/lib/components/kv-filter-card/kv-filter-card.component.spec.ts

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

package/src/lib/components/kv-filter-card/kv-filter-card.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'kv-filter-card',
+  templateUrl: './kv-filter-card.component.html',
+  styleUrl: './kv-filter-card.component.scss',
+})
+export class KvFilterCardComponent {
+  @Input() cardState: CardState = "normal";
+  @Input() color!: string;
+  @Input() title!: string;
+  @Input() amount?: number;
+  @Input() gIcon?: string;
+  @Input() spaceNowrap: boolean = false;
+}
+
+export type CardState = "normal" | "selected" | "inactive";
+export type CardStateClass = "card" | "PLACEHOLDER" | "card-disabled";

package/src/lib/components/kv-filter-card/kv-filter-card.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule, NgClass } from '@angular/common';
+import { KvFilterCardComponent } from './kv-filter-card.component';
+import { KvGIconModule } from '../kv-g-icon/kv-g-icon.module';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+
+
+@NgModule({
+  declarations:[
+    KvFilterCardComponent
+  ],
+  imports: [
+    CommonModule,
+    KvGIconModule,  
+    PrimeNgModule,
+    NgClass  
+  ],
+  exports:[
+    KvFilterCardComponent
+  ]
+})
+export class KvFilterCardModule { }

package/src/lib/components/kv-filter-cards/kv-filter-cards.component.html

@@ -0,0 +1,81 @@
+<div 
+  id="filter-card-container" 
+  class="flex flex-row w-full justify-content-between"
+>
+  <div 
+    class="flex p-fluid formgrid w-full gap-1 px-3 py-1" 
+    [ngClass]="[
+        wrapCards() ? 'flex-wrap' : 'flex-nowrap overflow-x-auto',
+        alignCardsCenter() ? 'justify-content-center' : 'justify-content-start'    
+    ]" 
+    #filterCardsContainer
+  >
+
+    @for (card of cards(); track card.id) {
+    
+      <div 
+        (click)="handleCardClick(card)" 
+        [style.--main-color]="color()(card)" 
+        [style.--mixed-color]="mixedColor()(card)"
+        class="filter-card" 
+
+        [ngClass]="[
+            'filter-card-size',
+            verificarSeCardEstaSelecionado(card)  ? 'filter-card-active' : 'clickable',
+            staticCards() ? 'filter-card-active' : '',
+            !staticCards() && !verificarSeCardEstaSelecionado(card) ? 'filter-card-hover' : '',
+            cursorPointer() ? 'cursor-pointer' : '',
+
+        ]"
+      >
+
+      <div class="filter-card-content">
+
+        <div class="filter-card-title">
+
+          @if (card.icon) {
+
+          <div class="hex-icon-svg">
+            <svg style="overflow: visible;" viewBox="0 0 100 100" class="hex-bg">
+              <polygon
+                [attr.fill]="getColorFillPolygon(card)"
+                points="93.3 75,50 100,6.7 75,6.7 25,50 0,93.3 25" 
+                stroke="var(--main-color)" 
+                stroke-width="3"
+                stroke-linejoin="round" 
+                stroke-linecap="round" 
+                opacity="0.8" 
+              />
+            </svg>
+
+            <span [style.color]="getColorIconPolygon(card)"
+              class="material-symbols-outlined icon">
+              {{ card?.icon }}
+            </span>
+
+          </div>
+
+          }
+
+          <div style="font-weight: bold; font-size: .825em; color: #414141;">{{ card?.titulo }}</div>
+      
+        </div>
+
+        @if(loadingCards()){
+
+          <span class="loading-spinner"></span>
+
+        }@else {
+
+          <div class="flex align-items-center" [style.color]="color()(card)"
+            style="font-size: 1.25em; font-weight: bold; min-height: 1.875rem">
+            {{ card.valor | kvFilterCardsFormatter:card.formato}}
+          </div>
+
+        }
+
+      </div>
+    </div>
+    }
+  </div>
+</div>

package/src/lib/components/kv-filter-cards/kv-filter-cards.component.scss

@@ -0,0 +1,197 @@
+
+
+.card {
+
+}
+
+.card, .card-disabled, .filter-card-active {
+  transition: border 0.3s ease, background-color 0.3s ease;
+  border: 1px solid #CBD5E1; /* Borda padrão */
+}
+
+.filter-card{
+    transition: all ease-in-out 0.1s;
+    border: 1px solid #CBD5E1;
+    border-radius: 1rem;
+    user-select: none;
+}
+.filter-card-hover:hover{
+    background: #f8fafc;
+    transform: scale(1.01);
+    border: var(--main-color) 0.5px solid; // Borda colorida
+}
+.filter-card-hover:active{
+    background: #f8fafc;
+    border: var(--main-color) 0.5px solid; // Borda colorida
+}
+
+
+// .filter-card:hover{
+//     background: #f8fafc;
+//     transform: scale(1.01);
+//     border: var(--main-color) 0.5px solid; // Borda colorida
+// }
+// .filter-card:active{
+//     background: #f8fafc;
+//     border: var(--main-color) 0.5px solid; // Borda colorida
+// }
+
+
+.filter-card-active{
+    border: var(--main-color) 0.5px solid; // Borda colorida
+    // background: #f8fafc;
+    background-color: color-mix(in srgb, var(--mixed-color) 20%, white 80%);
+    
+}
+
+p {
+    font-size: 0.75rem;
+}
+
+
+.select-none {
+    user-select: none;
+}
+.filter-card-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: .4rem 0.6rem .4rem 0.5rem; 
+    gap: .5rem;
+}
+.filter-card-title {
+    flex: 1 1 0%;
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+
+.hex-icon-svg {
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+  font-size: 2rem;
+}
+
+.hex-icon-svg .hex-bg {
+  width: 100%;
+  height: 100%;
+}
+
+.hex-icon-svg .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--main-color);
+  font-size: 24px;
+  pointer-events: none;
+}
+.icon{
+    font-weight: 500 !important;
+    font-size:.65em !important;
+}
+
+
+div.filter-card-hover:hover .hex-icon-svg > svg > polygon {
+    fill: var(--mixed-color);
+};
+
+polygon{
+    transition: all ease-in-out 0.1s;
+}
+
+
+#filter-card-container {
+    container: filter-card-container / inline-size;
+}
+
+.filter-card-size {
+  flex: 1 1 auto;
+  padding: 0 0.25rem;
+  min-width: 170px; // menor que antes
+  box-sizing: border-box;
+
+  // Se wrap estiver ativado, permite os cards se ajustarem dinamicamente
+  @container filter-card-container (min-width: 360px) {
+    width: 50%;
+  }
+
+  @container filter-card-container (min-width: 600px) {
+    width: 33.3333%;
+  }
+
+  @container filter-card-container (min-width: 900px) {
+    width: 25%;
+  }
+
+  @container filter-card-container (min-width: 1200px) {
+    width: 16.6667%;
+  }
+
+  @container filter-card-container (min-width: 1500px) {
+    width: 14.2857%; // até 7 cards lado a lado
+  }
+}
+@media (min-width: 360px) {
+  .filter-card-size {
+    width: 50%;
+  }
+}
+@media (min-width: 600px) {
+  .filter-card-size {
+    width: 33.3333%;
+  }
+}
+@media (min-width: 900px) {
+  .filter-card-size {
+    width: 25%;
+  }
+}
+@media (min-width: 1200px) {
+  .filter-card-size {
+    width: 16.6667%;
+  }
+}
+@media (min-width: 1500px) {
+  .filter-card-size {
+    width: 14.2857%;
+  }
+}
+
+
+
+.flex-nowrap.overflow-x-auto {
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.flex-wrap .filter-card-size {
+  flex: 1 1 auto;
+}
+
+
+
+
+
+.loading-spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--main-color);
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 0.8s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}