keevo-components 1.8.263 → 1.8.264

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

@@ -0,0 +1,128 @@
+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'];
+
+  @Output() fileEmit: EventEmitter<any> = new EventEmitter();
+
+  @ViewChild('fileInput') fileInput!: ElementRef;
+  @ViewChild('inputUpload') inputUpload!: ElementRef;
+
+  constructor(
+    private notificationService: NotificationService
+  ) { }
+
+  onFileSelected(event: any): void {
+    if (event.target.files.length == 0)
+      return
+
+    const isValidFileType = this.validFileTypes.some(type => event.target.files[0].type.startsWith(type));
+
+    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]);
+  }
+
+  deleteFile() {
+    this.formGroup.controls[this.formControlName].setValue(null);
+    this.fileInput.nativeElement.value = '';
+  }
+
+  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) {
+    const isValidFileType = this.validFileTypes.some(type => file.type.startsWith(type));
+
+    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
+      reader.readAsArrayBuffer(file); // Para outros tipos de arquivo, use readAsArrayBuffer ou outro método apropriado
+
+    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';
+    });
+
+    return types;
+  }
+}

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="100%"
+  height="700px"
+>
+</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,40 @@
+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;
+
+  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-filter-card/kv-filter-card.component.html

@@ -0,0 +1,13 @@
+<div [style]='{"--accent-color": color}' [ngClass]='[cardState == "inactive" ? "card-disabled" : "card", cardState == "selected" ? "clickable-selected" : "clickable"]'>
+    <div class="filter-card-content">
+      <div class="flex-row-center">
+        @if (gIcon) {
+        <kv-g-icon>{{ gIcon }}</kv-g-icon>
+        }
+        <ng-content select="[icon]"></ng-content>
+        <p class="white-space-nowrap font-bold">{{ title }}</p>
+      </div>
+      <p style="font-size: 2em" class="font-bold">{{ amount }}</p>
+    </div>
+  </div>
+  

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

@@ -0,0 +1,74 @@
+.card {
+    --accent-color: #5289B4;
+    border: 1px solid lightgrey;
+    border-left: solid 0.4rem var(--accent-color);
+    * {
+	margin: 0px;
+	color: var(--accent-color);
+    }
+    border-radius: 10px;
+}
+
+p {
+    font-size: 14px;
+}
+
+.card-disabled {
+    --accent-color: #5289B4;
+    $transition-time: 0.2s;
+    border: 1px solid lightgrey;
+    border-left: solid 0.4rem lightgrey;
+    transition: border-left $transition-time ease;
+    &:hover {
+	border-left: solid 0.4rem 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 {
+    width: 180px;
+    display: flex;
+    flex-direction: column;
+    padding: 0.6rem;
+    padding-top: 1rem;
+    gap: 1.2rem;
+    // * {
+	// color: var(--accent-color);
+    // }
+}
+
+.select-none {
+    user-select: none;
+}
+
+.flex-row-center {
+    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,17 @@
+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;
+}
+
+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-fieldset/kv-filter-fieldset.component.html

@@ -0,0 +1,21 @@
+<p-fieldset styleClass="p-0 mb-2" >
+  <ng-template pTemplate="header">
+    @if(isExpandable) {
+    <div
+      class="flex flex-row align-items-center justify-content-center p-1 cursor-pointer"
+      (click)="toggleField()"
+    >
+      <span
+        class="material-symbols-outlined flex align-items-center justify-content-center mr-2"
+        style="font-size: 1.4rem"
+      >
+        {{ isCollapsed ? "remove" : "add" }}
+      </span>
+
+      <span class="text-sm"> Filtros Avançados </span>
+    </div>
+    }
+  </ng-template>
+
+  <ng-content></ng-content>
+</p-fieldset>

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

@@ -0,0 +1,22 @@
+::ng-deep .p-fieldset .p-fieldset-legend {
+  padding: 0.3rem;
+  // padding-top: 0rem;
+  margin-left: 1rem;
+}
+
+::ng-deep .p-fieldset .p-fieldset-legend {
+  background-color: white;
+  border: none;
+
+  &:hover {
+    background-color: rgb(245, 245, 245);
+  }
+
+  &:active {
+    background-color: rgb(224, 224, 224);
+  }
+}
+
+::ng-deep .p-fieldset .p-fieldset-content {
+  padding-top: 0rem;
+}

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

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

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

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'kv-filter-fieldset',
+  standalone: false,
+  templateUrl: './kv-filter-fieldset.component.html',
+  styleUrl: './kv-filter-fieldset.component.scss',
+})
+export class KvFilterFieldsetComponent {
+  @Input() isExpandable: boolean = true;
+
+  @Output() collapsedEvent: EventEmitter<boolean> = new EventEmitter();
+
+  isCollapsed = false;
+
+  toggleField() {
+    this.isCollapsed = !this.isCollapsed;
+    this.collapsedEvent.emit(this.isCollapsed);
+  }
+}

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

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvFilterFieldsetComponent } from './kv-filter-fieldset.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+
+
+@NgModule({
+  declarations: [
+    KvFilterFieldsetComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule
+  ],
+  exports: [
+    KvFilterFieldsetComponent
+  ]
+})
+export class KvFilterFieldsetModule { }

package/src/lib/components/kv-g-icon/kv-g-icon.component.html

@@ -0,0 +1 @@
+<span class="material-symbols-outlined select-none"><ng-content></ng-content></span>

package/src/lib/components/kv-g-icon/kv-g-icon.component.spec.ts

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

package/src/lib/components/kv-g-icon/kv-g-icon.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'kv-g-icon', 
+  templateUrl: './kv-g-icon.component.html',
+  styleUrl: './kv-g-icon.component.scss'
+})
+export class KvGIconComponent {
+
+}

package/src/lib/components/kv-g-icon/kv-g-icon.module.ts

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

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

@@ -0,0 +1,35 @@
+<div class="p-card flex-auto flex flex-column h-full  {{ borderCalss }}">
+  <div class="h-auto">
+    <div class="h-auto flex flex-row justify-content-between formgrid grid p-fluid p-2 ml-2">
+      <div class="h-full flex align-items-center justify-content-start w-auto">
+        <span class="text-base font-bold">
+          {{ titulo }}
+          <div class="marcador-titulo"></div>
+        </span>
+      </div>
+
+      <div class=" h-full ml-3 mr-3 flex flex-row lex-grow-1 gap-2 justify-content-end flex-grow-1 z-5"
+      >
+        @if (headerTemplate) {
+        <ng-container class="flex-grow-1" [ngTemplateOutlet]="headerTemplate">
+        </ng-container>
+        }
+
+        <div class="w-auto">
+          @for (item of headerActions; track $index) {
+
+          <kv-button
+            [icon]="item.icon || 'add'"
+            [severity]="item.severity || 'primary'"
+            (onClick)="item?.command($event)"
+          />
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex-grow-1" [style.overflow-y]="contentOverflow">
+    <ng-content></ng-content>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+.marcador-titulo{
+  background-color: #1C801F;
+  width: 100%;
+  height: 3px;
+}

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

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

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

@@ -0,0 +1,33 @@
+import { Component, Input, OnInit, TemplateRef } from '@angular/core';
+import { ActionItem } from '../../api/components/table/action-item';
+
+@Component({
+  selector: 'kv-home-card',
+  templateUrl: './kv-home-card.component.html',
+  styleUrl: './kv-home-card.component.scss'
+})
+export class KvHomeCardComponent {
+
+  /**
+   * Titulo do card
+   * @type  {string}
+   */
+  @Input() titulo!: string;
+
+
+  /**
+   * Aarray de ações exibidas no header do modal. (recomendo no maximo 3)
+   * @type  {ActionItem[]}
+   */
+  @Input() headerActions!: ActionItem[];
+
+
+  /**
+   * Template que sera exibido do lado do titulo (entre os botões e o titulo)
+   * @type  {TemplateRef}
+   */
+  @Input() headerTemplate!: TemplateRef<any>;
+
+  @Input() borderCalss: any = 'border-round-xl';
+  @Input() contentOverflow: string = 'none';
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvHomeCardComponent } from './kv-home-card.component';
+import { KvInputsModule } from '../kv-inputs/kv-inputs.module';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { KvButtonModule } from '../kv-button/kv-button.module';
+
+@NgModule({
+  declarations: [KvHomeCardComponent],
+  imports: [
+    CommonModule,
+    KvInputsModule,
+    PrimeNgModule,
+    KvButtonModule
+  ],
+  exports: [KvHomeCardComponent]
+})
+export class KvHomeCardModule { }