keevo-components 2.0.105 → 2.0.107

package/src/lib/components/kv-image-upload/kv-image-upload.component.html

@@ -0,0 +1,64 @@
+<div
+    (dragover)="onDragOver($event)"
+    (dragleave)="onDragLeave($event)"
+    (drop)="onDrop($event)"
+    class="relative overflow-hidden border-dashed border-2 border-round-lg border-gray-400 flex justify-content-end"
+    [style.width]="widthComponent"
+    [style.height]="heightComponent"
+>
+
+    <div
+        class="w-full flex align-items-center justify-content-center"
+        style="cursor: pointer;"
+        (click)="fileInput.click()"
+    >
+        <input
+            type="file"
+            (change)="onFileSelected($event)"
+            #fileInput
+            hidden
+            accept="image/*"
+        >
+        <div
+            *ngIf="!fileSrc"
+            class="flex flex-column align-items-center justify-content-center"
+        >
+            <span
+                class="material-symbols-outlined mt-2"
+                style="font-size: 3rem;"
+            >
+                cloud_upload
+            </span>
+
+            @if(description) {
+            <p class="font-semibold">{{description}}</p>
+            } @else {
+            <p class="font-semibold">Arraste e solte uma imagem aqui, ou</p>
+            <p class="font-semibold">clique para selecioná-la</p>
+            }
+
+        </div>
+        <div *ngIf="fileSrc || file">
+            <img
+                [src]="fileSrc"
+                [alt]="file?.name"
+                class="w-full"
+                [style.maxHeight]="maxHeightImage"
+            >
+        </div>
+    </div>
+
+    @if(fileSrc || file) {
+        <button
+            style="background-color: transparent;"
+            pButton
+            (click)="deleteImage()"
+            class="absolute transition-colors transition-duration-500 text-red-700 hover:text-red-500 w-2rem h-2rem"
+            [text]="true"
+            [icon]="'pi pi-trash'"
+        >
+        </button>
+        }
+
+
+</div>

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

@@ -0,0 +1,153 @@
+import { ImageCutterService } from './../../api/services/image.cutter.service';
+import { Component, ElementRef, EventEmitter, input, Input, Output, ViewChild } from '@angular/core';
+import { NotificationService } from '../../api/services/notification.service';
+
+@Component({
+  selector: 'kv-image-upload',
+  templateUrl: './kv-image-upload.component.html',
+  styleUrl: './kv-image-upload.component.scss'
+})
+export class KvImageUploadComponent {
+
+  constructor(private notificationService: NotificationService, private readonly imageCutterService: ImageCutterService) {
+
+  }
+  file: File | null = null;
+  @Input() fileSrc: string | ArrayBuffer | null = null;
+
+
+  @Input() widthComponent: string = '400px';
+  @Input() heightComponent: string = 'auto';
+
+
+  cutImage = input<boolean>(false);
+  cutWidth = input<number>(0)
+  cutHeight = input<number>(0)
+  cutCircle = input<boolean>(false)
+  maintainAspectRatio = input<boolean>(true);
+
+  @Input() maxHeightImage: string = '400px';
+
+  @Input() description!: string;
+
+  @Output() fileEmit: EventEmitter<any> = new EventEmitter();
+  @Output() deleteEmit: EventEmitter<any> = new EventEmitter();
+
+  @ViewChild('fileInput') fileInput?: ElementRef;
+
+
+
+
+  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]);
+    }
+  }
+
+  onFileSelected(event: Event) {
+    const input = event.target as HTMLInputElement;
+
+    if (input.files && input.files.length > 0) {
+      this.handleFile(input.files[0]);
+    }
+  }
+
+  handleFile(file: File) {
+    if (file.type.startsWith('image/')) {
+
+      if(this.cutImage() == true){
+        this.file = file;
+
+        const reader = new FileReader();
+          reader.onload = async () => {
+            try {
+
+                const result = await this.imageCutterService.cut(reader.result?.toString() ?? '',this.cutWidth(),this.cutHeight(),this.cutCircle(), false, this.maintainAspectRatio());
+                this.fileSrc = result;
+                const file = this.base64ToFile(this.fileSrc as string, this.file?.name ?? 'file.png');
+                this.fileEmit.emit(file)
+
+            } catch (error) {
+            }
+        };
+        reader.readAsDataURL(file);
+
+
+
+
+      }else{
+        // ?! Comportamneto padrão --> Preservar <-- !!!
+        this.file = file;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          this.fileSrc = reader.result;
+        };
+        reader.readAsDataURL(file);
+        this.fileEmit.emit(file)
+
+      }
+
+
+
+
+    } else {
+      this.notificationService.toastError('Apenas arquivos de imagem são permitidos.')
+    }
+  }
+
+  base64ToFile(base64String:string, fileName:string) {
+    // Extrair o tipo MIME da string base64
+    const arr = base64String.split(',');
+    const mime = arr[0].match(/:(.*?);/)![1];
+
+    // Converter Base64 para Binário
+    const binaryString = atob(arr[1]);
+    const len = binaryString.length;
+    const uint8Array = new Uint8Array(len);
+
+    for (let i = 0; i < len; i++) {
+        uint8Array[i] = binaryString.charCodeAt(i);
+    }
+
+    // Criar um Blob e, em seguida, um objeto File
+    const blob = new Blob([uint8Array], { type: mime });
+    const file = new File([blob], fileName, { type: mime });
+
+    return file;
+}
+
+  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');
+  }
+
+  deleteImage() {
+    this.file = null;
+    this.fileSrc = null;
+    if (this.fileInput) {
+      this.fileInput.nativeElement.value = '';
+    }
+    this.deleteEmit.emit();
+  }
+}

package/src/lib/components/kv-image-upload/kv-image-upload.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from "@angular/core";
+import { KvImageUploadComponent } from "./kv-image-upload.component";
+import { PrimeNgModule } from "../../api/modules/primeng.module";
+
+@NgModule({
+    declarations: [KvImageUploadComponent],
+    imports: [PrimeNgModule],
+    exports: [KvImageUploadComponent]
+})
+export class KvImageUploadModule { }

package/src/lib/components/kv-inputs/kv-check/kv-check.component.html

@@ -0,0 +1,12 @@
+<div class="field-checkbox flex flex-column align-items-start">
+  <p-checkbox
+    [binary]="true"
+    [disabled]="disabled"
+    [label]="label"
+    [inputId]="componentId"
+    [(ngModel)]="value"
+    (onChange)="emitOnCheckChange($event)"
+  >
+  </p-checkbox>
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</div>

package/src/lib/components/kv-inputs/kv-check/kv-check.component.scss

@@ -0,0 +1,38 @@
+@import "../../keevo-components-styles.scss";
+
+::ng-deep .p-checkbox-label {
+  font-size: 0.75rem;
+}
+
+::ng-deep .p-checkbox .p-checkbox-box.p-highlight {
+  border-color: #004172;
+  background: #004172;
+
+  &:hover {
+    background-color: #002542;
+  }
+
+  &:active {
+    background-color: #002542;
+  }
+
+  &:disabled {
+    background-color: #002542;
+    opacity: 0.4;
+    cursor: auto;
+  }
+}
+
+::ng-deep .p-inputgroup-addon .p-checkbox.p-component {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+::ng-deep .p-checkbox .p-checkbox-box {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+::ng-deep .p-checkbox-label {
+  margin-left: 0.1rem;
+}

package/src/lib/components/kv-inputs/kv-check/kv-check.component.ts

@@ -0,0 +1,32 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+
+import { BaseComponentInput } from '../../../api/base-components/base-component-input';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+
+@Component({
+  selector: 'kv-check',
+  templateUrl: './kv-check.component.html',
+  styleUrls: [
+    './kv-check.component.scss',
+    '../../keevo-components-styles.scss',
+  ],
+  providers: ComponentProviders(KvCheckComponent),
+})
+export class KvCheckComponent
+  extends BaseComponentInput<boolean>
+  implements OnInit {
+  @Output() onCheckChange: EventEmitter<any> = new EventEmitter();
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+  emitOnCheckChange(event: any) {
+    this.onCheckChange.emit(event);
+  }
+}

package/src/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.html

@@ -0,0 +1,87 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label && label + (showAsterisk ? '*' : '')"
+  />
+
+  <p-dropdown
+    [appendTo]="appendTo()"
+    scrollHeight="250px"
+    styleClass="inputs"
+    [(ngModel)]="value"
+    [class]="baseInputClass"
+    [disabled]="disabled"
+    [emptyMessage]="emptyMessage()"
+    [filter]="filter"
+    [group]="group"
+    [inputId]="componentId"
+    [lazy]="lazy"
+    [loading]="loading"
+    [optionDisabled]="optionDisabled"
+    [optionGroupChildren]="optionGroupChildren"
+    [optionGroupLabel]="optionGroupLabel"
+    [optionLabel]="optionLabel"
+    [options]="filteredOptions"
+    [optionValue]="optionValue"
+    [panelStyle]="{ width: dropDownWidthPx() }"
+    [showClear]="showClear"
+    [filterPlaceholder]="filterPlaceholder"
+    [placeholder]="placeholder"
+    (onBlur)="onInputBlur($event)"
+    (onChange)="onInputChange($event)"
+    (onClick)="onInputClick($event)"
+    (onFilter)="onInputFilter($event)"
+    (onLazyLoad)="onInputLazyLoad($event)"
+    [virtualScroll]="virtualScroll"
+    [virtualScrollItemSize]="virtualScrollItemSize"
+  >
+    <ng-template *ngIf="showAddButton" pTemplate="footer">
+      <p-divider></p-divider>
+      <div class="flex flex-wrap card-container p-1">
+        <div class="flex justify-content-center">
+          <button
+            pButton
+            label="Incluir"
+            pTooltip="Clique aqui para incluir um novo registro"
+            tooltipPosition="bottom"
+            icon="pi pi-plus"
+            class="p-button-rounded p-button-success mr-2"
+            (click)="addClick($event)"
+          ></button>
+        </div>
+      </div>
+    </ng-template>
+    <ng-template let-item pTemplate="item">
+      <div
+        [pTooltip]="getOptionTooltip(item)"
+        tooltipPosition="left"
+        class="p-2 {{ isOptionDisabled()(item) && 'disable' }}"
+      >
+        <ng-container
+          *ngIf="itemTemplate"
+          [ngTemplateOutlet]="itemTemplate"
+          [ngTemplateOutletContext]="{ $implicit: item }"
+        >
+        </ng-container>
+        <span *ngIf="!itemTemplate">{{ item[optionLabel] }}</span>
+      </div>
+    </ng-template>
+
+    <ng-template
+      let-selectedItem
+      pTemplate="selectedItem"
+      *ngIf="selectedItemTemplate"
+    >
+      <ng-container
+        [ngTemplateOutlet]="selectedItemTemplate"
+        [ngTemplateOutletContext]="{ $implicit: selectedItem }"
+      >
+      </ng-container>
+    </ng-template>
+
+    <!-- :: -->
+  </p-dropdown>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

package/src/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.ts

@@ -0,0 +1,119 @@
+import {
+  Component,
+  computed,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  input,
+  Input,
+  OnInit,
+  Output,
+  signal,
+  TemplateRef,
+  viewChild
+} from '@angular/core';
+
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { BaseComponentDropDown } from '../../../api/base-components/base-component-dropdown';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+import { Dropdown } from 'primeng/dropdown';
+
+@Component({
+  selector: 'kv-dropdown',
+  templateUrl: './kv-dropdown.component.html',
+  styleUrls: [
+    './kv-dropdown.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvDropdownComponent),
+})
+export class KvDropdownComponent extends BaseComponentDropDown implements OnInit {
+  constructor(
+    componentService: ComponentService,
+    dialogService: DialogService,
+    private elRef: ElementRef
+  ) {
+    super(componentService, dialogService);
+  }
+
+  @Input() filterPlaceholder: string = '';
+  @Input() override placeholder: string = ' ';
+  @Input() dropDowValue!: any;
+  @Input() itemTemplate!: TemplateRef<any>;
+  @Input() selectedItemTemplate!: TemplateRef<any>;
+
+  @Input() virtualScroll: boolean = false;
+  @Input() virtualScrollItemSize!: number;
+
+  appendTo: any = input<any>('body');
+
+
+  changes = signal<number>(0);
+
+  @Output() onLazyLoad: EventEmitter<any> = new EventEmitter();
+
+  pDropDown = viewChild<any>(Dropdown);
+
+  // pDropDownWidth = signal<string>('');
+  pDropDownWidth = computed(() => {
+    this.changes(); //registra este sinal para considerar a detecção de mudanças
+
+    const el = this.pDropDown().el.nativeElement as HTMLElement;
+    const dimensions = el.getBoundingClientRect();
+    return `${dimensions.width}` + 'px';
+  });
+
+  dropDownWidth = signal<number>(0);
+  dropDownWidthPx = computed(() => `${this.dropDownWidth()}px`);
+
+  disabledOptions = input<any[]>([]);
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    if (this.dropDowValue) this.value = this.dropDowValue;
+
+    this.capitalizeOptions(this.options);
+  }
+
+  override ngAfterViewInit(): void {
+    super.ngAfterViewInit();
+    const el = this.elRef.nativeElement;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const target = entry.target as HTMLElement;
+        this.dropDownWidth.set(target.offsetWidth);
+      }
+    });
+
+    resizeObserver.observe(el);
+
+    setTimeout(() => {
+      this.setWidth();
+    }, 400);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  public onWindowResize() {
+    this.setWidth();
+  }
+
+  setWidth() {
+    const el = this.elRef.nativeElement;
+    this.dropDownWidth.set(el.offsetWidth);
+  }
+
+  onInputLazyLoad(event: any): void {
+    this.onLazyLoad.emit(event);
+  }
+
+  isOptionDisabled = computed(() => (option: any) => {
+    return this.disabledOptions().some(disabledOption => disabledOption.id === option[this.optionValue]);
+  })
+
+  getOptionTooltip = (option: any) => {
+    const disabledOption = this.disabledOptions().find(disabledOption => disabledOption.id === option[this.optionValue]);
+    return disabledOption ? disabledOption.tooltip : '';
+  }
+}

package/src/lib/components/kv-inputs/kv-editor/components/kv-instrucoes-report/kv-instrucoes-report.component.html

@@ -0,0 +1,13 @@
+<div class="p-4">
+  @if(instrucoesTemplate()) {
+  <ng-container [ngTemplateOutlet]="instrucoesTemplate()"></ng-container>
+  } @else {
+  <ul class="flex flex-column gap-2">
+    <li>Formate seu texto usando a barra de ferramentas</li>
+    <li>
+      Digite <code class="bg-gray-100 px-1">#</code> para inserir uma variável
+      no texto.
+    </li>
+  </ul>
+  }
+</div>

package/src/lib/components/kv-inputs/kv-editor/components/kv-instrucoes-report/kv-instrucoes-report.component.spec.ts

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

package/src/lib/components/kv-inputs/kv-editor/components/kv-instrucoes-report/kv-instrucoes-report.component.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, signal, TemplateRef } from '@angular/core';
+import { DynamicDialogConfig } from 'primeng/dynamicdialog';
+
+@Component({
+  selector: 'kv-instrucoes-report',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './kv-instrucoes-report.component.html',
+  styleUrl: './kv-instrucoes-report.component.scss'
+})
+export class KvInstrucoesReportComponent {
+  private dialogConfig = inject(DynamicDialogConfig);
+
+  instrucoesTemplate = signal<TemplateRef<any>>(this.dialogConfig.data?.template);
+}

package/src/lib/components/kv-inputs/kv-editor/components/kv-report-modal/kv-report-modal.component.html

@@ -0,0 +1,18 @@
+@if (pdfUrl) {
+<div class="h-full w-full overflow-hidden">
+  <iframe
+    [src]="pdfUrl"
+    class="w-full h-full"
+    style="border: none"
+    title="Pré-visualização do Relatório"
+  >
+  </iframe>
+</div>
+} @else {
+<div class="w-full h-full flex items-center justify-center bg-gray-200">
+  <div class="text-center text-red-600">
+    <p class="font-bold">Erro!</p>
+    <p>Não foi possível carregar o arquivo do relatório.</p>
+  </div>
+</div>
+}

package/src/lib/components/kv-inputs/kv-editor/components/kv-report-modal/kv-report-modal.component.ts

@@ -0,0 +1,41 @@
+import { Component, inject, OnInit, OnDestroy } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { DynamicDialogConfig } from 'primeng/dynamicdialog';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'kv-report-modal',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './kv-report-modal.component.html',
+  styleUrls: ['./kv-report-modal.component.scss']
+})
+export class KvReportModalComponent implements OnInit, OnDestroy {
+  // Injeções
+  dynamicDialogConfig = inject(DynamicDialogConfig);
+  sanitizer = inject(DomSanitizer);
+
+  // A única URL que precisamos
+  pdfUrl: SafeResourceUrl | null = null;
+  private objectUrl: string | null = null;
+
+  ngOnInit() {
+    // 1. Recebe o Blob PRONTO vindo do componente pai
+    const pdfBlob = this.dynamicDialogConfig.data?.pdfBlob;
+
+    if (pdfBlob) {
+      // 2. Cria a URL segura para o iframe
+      this.objectUrl = URL.createObjectURL(pdfBlob);
+      this.pdfUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.objectUrl);
+    } else {
+      console.error("O modal do relatório foi aberto sem um Blob de PDF.");
+    }
+  }
+
+  // Limpa a memória quando o modal é fechado
+  ngOnDestroy() {
+    if (this.objectUrl) {
+      URL.revokeObjectURL(this.objectUrl);
+    }
+  }
+}