keevo-components 2.0.106 → 2.0.107

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

@@ -0,0 +1,311 @@
+import {
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  EventEmitter,
+  inject,
+  input,
+  Input,
+  model,
+  OnInit,
+  output,
+  Output,
+  Renderer2,
+  signal,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+
+import Quill from 'quill';
+import { OverlayPanel } from 'primeng/overlaypanel';
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { BaseComponentInput } from '../../../api/base-components/base-component-input';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+import { KvInstrucoesReportComponent } from './components/kv-instrucoes-report/kv-instrucoes-report.component';
+
+import {
+  KvEditorRelatorio,
+  KvEditorVariavel,
+  KvEditorQuillService,
+  KvEditorRelatorioService,
+  KvEditorMentionService,
+  KvEditorPdfService
+} from './kv-editor';
+
+@Component({
+  selector: 'kv-editor',
+  templateUrl: './kv-editor.component.html',
+  styleUrls: ['./kv-editor.component.scss'],
+  providers: ComponentProviders(KvEditorComponent),
+})
+export class KvEditorComponent extends BaseComponentInput<string> implements OnInit {
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  // Injeção de serviços
+  private quillService = inject(KvEditorQuillService);
+  private relatorioService = inject(KvEditorRelatorioService);
+  private mentionService = inject(KvEditorMentionService);
+  private pdfService = inject(KvEditorPdfService);
+  private dialogService = inject(DialogService);
+
+  // Propriedades de configuração
+  /**
+   * @deprecated Essa propriedade não será mais utilizada por esse componente nas próximas versões.
+   */
+  @Input() canvaHeigth: string = '380px';
+
+  @Input() contentType: 'html' | 'text' = 'html';
+  @Input() readonly: boolean = false;
+  @Input() debug: boolean = false;
+
+  // Eventos
+  @Output() onTextChange: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() outputRaw: EventEmitter<string> = new EventEmitter();
+  @Output() outputHtml: EventEmitter<string> = new EventEmitter();
+
+  // Propriedades internas
+  private updatingEditor: boolean = false;
+  private lastSelectionRange: any = null;
+  private editorReadyResolver!: () => void;
+  private editorReadyPromise = new Promise<void>((resolve) => {
+    this.editorReadyResolver = resolve;
+  });
+
+  // Instância do Quill
+  quill!: Quill;
+  htmlDoEditor = '';
+
+  // Signals para controle de estado
+  initLoadComplete = signal<boolean>(false);
+  isLoading = signal<boolean>(true);
+  editorToolbarHeight = signal<string>('3rem');
+  // tipoVisualizacao = signal<'valor' | 'descricao'>('descricao');
+  filteredVariables = signal<KvEditorVariavel[]>([]);
+  clearedTemplate = signal<boolean>(false);
+
+  // Inputs para relatórios
+  relatorios = input<KvEditorRelatorio[]>([]);
+  idRelatorioInitial = model<number>(0);
+  printButton = input<boolean>(true);
+  labelEmptyDropdown = input<string>('Selecione um relatório');
+  instrucoesTemplate = input<TemplateRef<any> | undefined>(undefined);
+
+
+  // Computed properties para relatórios
+  idRelatorioSelected = computed(() => this.relatorioService.getIdRelatorioSelected());
+  relatorio = computed(() => this.relatorioService.getRelatorioSelected());
+  isLoadingPdf = computed(() => this.pdfService.getIsLoadingPdf());
+
+  // ViewChild para overlay panels
+  @ViewChild('opVariables') opVariables!: OverlayPanel;
+  @ViewChild('mentionAnchor') mentionAnchor!: ElementRef;
+
+  messages = [{ severity: 'info', detail: 'Message Content' }];
+
+  // Métodos para gerenciar relatórios
+  setRelatorioPorId(id: number): void {
+    const relatorio = this.relatorioService.setRelatorioPorId(id);
+    if (relatorio) {
+      this.setRelatorio(relatorio);
+    }
+  }
+
+  setRelatorio(relatorio: KvEditorRelatorio): void {
+    this.clearedTemplate.set(false);
+    this.relatorioService.setRelatorio(relatorio);
+    const modelo = relatorio.modeloRelatorio || '';
+    const variaveis = relatorio.variaveis || [];
+
+    this.htmlDoEditor = this.relatorioService.renderContrato(modelo, variaveis);
+    this.updatingEditor = true;
+    this.escrevaValor(this.htmlDoEditor);
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+
+    // Inicializa os relatórios no serviço
+    this.relatorioService.setRelatorios(this.relatorios());
+
+    if (!this.quill) {
+      this.handleInit();
+    }
+
+    setTimeout(() => {
+      this.isLoading.set(false);
+    }, 1000);
+
+    if (this.idRelatorioInitial()) {
+      this.clearedTemplate.set(false);
+      this.setRelatorioPorId(this.idRelatorioInitial());
+    } else this.clearedTemplate.set(true);
+  }
+
+  async handleInit(): Promise<void> {
+    await this.quillService.loadCss();
+    this.initializeQuillEditor();
+  }
+
+  initializeQuillEditor(): void {
+    const config = {
+      theme: 'snow',
+      modules: {
+        toolbar: '#kv-editor-toolbar',
+      },
+      placeholder: this.label ? this.label : '',
+      readOnly: this.readonly,
+      debug: this.debug,
+    };
+
+    this.quill = this.quillService.createQuillInstance('#kv-editor', config);
+
+    this.setupQuillEvents();
+    this.editorReadyResolver();
+    this.initLoadComplete.set(true);
+
+    setTimeout(() => {
+      const control = this.formControl;
+      if (control && control.markAsPristine) {
+        control.markAsPristine();
+        control.markAsUntouched();
+      }
+    }, 0);
+  }
+
+  private setupQuillEvents(): void {
+    this.quill.on('selection-change', (range, oldRange, source) => {
+      if (range) {
+        this.lastSelectionRange = range;
+      }
+      this.onSelectionChange.emit({
+        range: range,
+        oldRange: oldRange,
+        source: source,
+      });
+    });
+
+    this.quill.on('text-change', (delta, oldContents, source) => {
+      if (this.relatorios().length > 0) {
+        this.handleMention();
+      }
+
+      if (!this.updatingEditor) {
+        this.updatingEditor = false;
+        this.escrevaValor(this.quill.getSemanticHTML(), this.quill.getText());
+
+        this.onTextChange.emit({
+          delta: delta,
+          oldContents: oldContents,
+          source: source,
+        });
+
+        this.outputRaw.emit(this.quill.getText());
+        this.outputHtml.emit(this.quill.getSemanticHTML());
+      }
+    });
+  }
+
+  override writeValue(value: any): void {
+    this.updatingEditor = true;
+    this.escrevaValor(value);
+  }
+
+  async escrevaValor(htmlvalue: any, rawvalue?: any): Promise<void> {
+    if (!this.initLoadComplete()) {
+      await this.editorReadyPromise;
+    }
+
+    if (this.quill) {
+      if (this.updatingEditor) {
+        this.quill.clipboard.dangerouslyPasteHTML(htmlvalue);
+      }
+      this.updatingEditor = false;
+      this.value = htmlvalue;
+
+      if (rawvalue == "\n" || this.value == "\n") {
+        this.value = '';
+      }
+    } else {
+      this.updatingEditor = false;
+    }
+
+    this.outputHtml.emit(this.quill.getSemanticHTML());
+  }
+
+  getEditorSize(): void {
+    let editorFieldHeight = document.getElementById('kv-editor-toolbar')?.offsetHeight;
+    if (editorFieldHeight) {
+      this.editorToolbarHeight.set(`${editorFieldHeight}px`);
+    }
+  }
+
+  async openRelatorio(): Promise<void> {
+    if (this.isLoadingPdf()) return;
+
+    const htmlContent = this.quill.getSemanticHTML();
+    const relatorio = this.relatorio();
+    // const tipoVisualizacao = this.tipoVisualizacao();
+
+    await this.pdfService.openRelatorio(htmlContent, relatorio, 'valor');
+  }
+
+  // Métodos para sistema de menções
+  handleMention(): void {
+    if (!this.relatorio()) return;
+
+    const result = this.mentionService.handleMention(this.quill, this.relatorio()!.variaveis);
+    this.filteredVariables.set(result.filteredVariables);
+
+    if (result.shouldShowPanel && result.mentionBounds) {
+      this.showVariablesPanel(result.mentionBounds);
+    } else {
+      this.closeVariablesPanel();
+    }
+  }
+
+  private showVariablesPanel(bounds: { top: number; left: number }): void {
+    const anchorEl = this.mentionAnchor.nativeElement;
+    anchorEl.style.top = `${bounds.top}px`;
+    anchorEl.style.left = `${bounds.left}px`;
+    this.opVariables.show(null, anchorEl);
+  }
+
+  selectVariableFromPanel(variable: KvEditorVariavel): void {
+    this.mentionService.insertVariable(this.quill, variable);
+    this.closeVariablesPanel();
+  }
+
+  closeVariablesPanel(): void {
+    if (this.opVariables) {
+      this.opVariables.hide();
+    }
+    this.mentionService.closeMention();
+  }
+
+  showInstrucoes(): void {
+    this.dialogService.open(KvInstrucoesReportComponent, {
+      header: 'Instruções',
+      width: '40%',
+      height: '30%',
+      modal: true,
+      closable: true,
+      data: {
+        template: this.instrucoesTemplate()
+      }
+    });
+  }
+
+  clearTemplate() {
+    // Limpa o template do editor
+    this.clearedTemplate.set(true);
+    this.setRelatorioPorId(0);
+    this.writeValue('');
+  }
+}

package/{lib/components/kv-inputs/kv-editor/kv-editor.d.ts → src/lib/components/kv-inputs/kv-editor/kv-editor.ts}

@@ -1,6 +1,6 @@
-export * from './types/kv-editor.types';
-export * from './services/kv-editor-quill.service';
-export * from './services/kv-editor-relatorio.service';
-export * from './services/kv-editor-mention.service';
-export * from './services/kv-editor-pdf.service';
-export * from './config/kv-editor.config';
+export * from './types/kv-editor.types';
+export * from './services/kv-editor-quill.service';
+export * from './services/kv-editor-relatorio.service';
+export * from './services/kv-editor-mention.service';
+export * from './services/kv-editor-pdf.service';
+export * from './config/kv-editor.config';

package/src/lib/components/kv-inputs/kv-editor/services/kv-editor-mention.service.ts

@@ -0,0 +1,156 @@
+import { Injectable, ElementRef, signal } from '@angular/core';
+import Quill from 'quill';
+import { KvEditorVariavel } from '../types/kv-editor.types';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KvEditorMentionService {
+  
+  private filteredVariables = signal<KvEditorVariavel[]>([]);
+  private mentionStartIndex: number | null = null;
+  private mentionEndIndex: number | null = null;
+
+  /**
+   * Processa o sistema de menções durante a digitação
+   */
+  handleMention(quill: Quill, variaveis: KvEditorVariavel[]): {
+    shouldShowPanel: boolean;
+    filteredVariables: KvEditorVariavel[];
+    mentionBounds?: { top: number; left: number };
+  } {
+    const range = quill.getSelection();
+    if (!range) {
+      this.closeMention();
+      return { shouldShowPanel: false, filteredVariables: [] };
+    }
+
+    const text = quill.getText(0, range.index);
+    const lastHashIndex = text.lastIndexOf('#');
+
+    if (lastHashIndex !== -1 && !/\s/.test(text.substring(lastHashIndex + 1))) {
+      this.mentionStartIndex = lastHashIndex;
+      this.mentionEndIndex = range.index;
+
+      const searchTerm = text.substring(lastHashIndex + 1).toLowerCase();
+      const filtered = variaveis.filter(v => 
+        v.descricao.toLowerCase().includes(searchTerm)
+      );
+
+      this.filteredVariables.set(filtered);
+
+      if (filtered.length > 0) {
+        const bounds = this.calculateMentionBounds(quill, lastHashIndex);
+        return {
+          shouldShowPanel: true,
+          filteredVariables: filtered,
+          mentionBounds: bounds
+        };
+      }
+    }
+
+    this.closeMention();
+    return { shouldShowPanel: false, filteredVariables: [] };
+  }
+
+  /**
+   * Calcula a posição onde o painel de menções deve aparecer
+   */
+  private calculateMentionBounds(quill: Quill, lastHashIndex: number): { top: number; left: number } {
+    const editorEl = document.querySelector('#kv-editor');
+    if (!editorEl) return { top: 0, left: 0 };
+
+    const editorRect = editorEl.getBoundingClientRect();
+    
+    // Verifica se o '#' está no início de uma linha
+    const charBefore = lastHashIndex > 0 ? quill.getText(lastHashIndex - 1, 1) : null;
+    const isAtStartOfLine = (lastHashIndex === 0 || charBefore === '\n');
+
+    if (isAtStartOfLine) {
+      // Posiciona no canto superior esquerdo do editor
+      return {
+        top: editorRect.top + 5,
+        left: editorRect.left + 5
+      };
+    } else {
+      // Usa getBounds() para posição precisa
+      const cursorBounds = quill.getBounds(lastHashIndex);
+      if (cursorBounds) {
+        return {
+          top: editorRect.top + cursorBounds.bottom,
+          left: editorRect.left + cursorBounds.left
+        };
+      } else {
+        return {
+          top: editorRect.top + 5,
+          left: editorRect.left + 5
+        };
+      }
+    }
+  }
+
+  /**
+   * Insere uma variável selecionada no editor
+   */
+  insertVariable(quill: Quill, variable: KvEditorVariavel): void {
+    const startIndex = this.mentionStartIndex;
+    const endIndex = this.mentionEndIndex;
+
+    if (startIndex === null || endIndex === null) return;
+
+    const lengthToDelete = endIndex - startIndex;
+    const variableHtml = `<span 
+                       style="background-color: #e6f7ff; color: #0066cc; border-radius: 3px; padding: 2px 4px; font-weight: 500;"
+                       class="variavel-inserida" 
+                       title="${variable.descricao}">${variable.descricao}</span>&nbsp;`;
+    
+    const insertedTextLength = variable.descricao.length + 1;
+    const Delta = Quill.import('delta');
+    const insertionDelta = quill.clipboard.convert({ html: variableHtml });
+
+    quill.updateContents(
+      new Delta()
+        .retain(startIndex)
+        .delete(lengthToDelete)
+        .concat(insertionDelta),
+      'user'
+    );
+
+    const newCursorPosition = startIndex + insertedTextLength;
+    setTimeout(() => {
+      quill.setSelection(newCursorPosition, 0, 'user');
+      quill.focus();
+    }, 0);
+
+    this.closeMention();
+  }
+
+  /**
+   * Fecha o sistema de menções
+   */
+  closeMention(): void {
+    this.mentionStartIndex = null;
+    this.mentionEndIndex = null;
+    this.filteredVariables.set([]);
+  }
+
+  /**
+   * Obtém as variáveis filtradas
+   */
+  getFilteredVariables(): KvEditorVariavel[] {
+    return this.filteredVariables();
+  }
+
+  /**
+   * Cria uma regex especial para busca em texto com HTML
+   */
+  createInterleavedRegex(text: string): RegExp {
+    const specialChars = /[-\/\\^$*+?.()|[\]{}]/g;
+    const pattern = text
+      .split('')
+      .map(char => char.replace(specialChars, '\\$&'))
+      .join('(<[^>]*>)*');
+
+    return new RegExp(pattern, 'gi');
+  }
+}

package/src/lib/components/kv-inputs/kv-editor/services/kv-editor-pdf.service.ts

@@ -0,0 +1,190 @@
+import { Injectable, inject, signal } from '@angular/core';
+import { DialogService } from 'primeng/dynamicdialog';
+import { PdfService } from '../../../../api/services/pdf.service';
+import { KvEditorRelatorio, KvEditorVariavel } from '../types/kv-editor.types';
+import { KvReportModalComponent } from '../components/kv-report-modal/kv-report-modal.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KvEditorPdfService {
+  
+  private pdfService = inject(PdfService);
+  private dialogService = inject(DialogService);
+  private isLoadingPdf = signal<boolean>(false);
+
+  /**
+   * Obtém o estado de carregamento do PDF
+   */
+  getIsLoadingPdf(): boolean {
+    return this.isLoadingPdf();
+  }
+
+  /**
+   * Define o estado de carregamento do PDF
+   */
+  setIsLoadingPdf(loading: boolean): void {
+    this.isLoadingPdf.set(loading);
+  }
+
+  /**
+   * Gera e abre o modal de relatório
+   */
+  async openRelatorio(
+    htmlContent: string, 
+    relatorio: KvEditorRelatorio | null, 
+    tipoVisualizacao: 'valor' | 'descricao'
+  ): Promise<void> {
+    if (this.isLoadingPdf()) return;
+    
+    this.setIsLoadingPdf(true);
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      
+      let htmlComValoresReais = htmlContent;
+
+      if (relatorio) {
+        htmlComValoresReais = this.processarHtmlParaPdf(htmlContent, relatorio, tipoVisualizacao);
+      }
+
+      const htmlFinalParaPdf = this.adicionarEstilosParaPdf(htmlComValoresReais);
+      const pdfBlob = await this.gerarPdfBlob(htmlFinalParaPdf);
+      
+      this.abrirModalRelatorio(pdfBlob);
+      
+    } catch (error) {
+      console.error('Falha ao gerar o Blob do PDF:', error);
+      alert('Ocorreu um erro ao gerar o relatório.');
+    } finally {
+      this.setIsLoadingPdf(false);
+      setTimeout(() => window.dispatchEvent(new Event('resize')), 100);
+    }
+  }
+
+  /**
+   * Processa o HTML substituindo variáveis e limpando formatação
+   */
+  private processarHtmlParaPdf(
+    htmlContent: string, 
+    relatorio: KvEditorRelatorio, 
+    tipoVisualizacao: 'valor' | 'descricao'
+  ): string {
+    let htmlProcessado = htmlContent;
+
+    // Substitui valores das variáveis
+    relatorio.variaveis.forEach(variavel => {
+      if (typeof variavel.descricao !== 'string' || variavel.descricao.trim() === '') {
+        return;
+      }
+      
+      const specialRegex = this.createInterleavedRegex(variavel.descricao);
+      htmlProcessado = htmlProcessado.replace(specialRegex, variavel.value);
+    });
+
+    // Remove propriedades de estilo padrão
+    htmlProcessado = htmlProcessado.replace(/background-color:\s*rgb\(\s*230,\s*247,\s*255\s*\);?/gi, '');
+    htmlProcessado = htmlProcessado.replace(/color:\s*rgb\(\s*0,\s*102,\s*204\s*\);?/gi, '');
+    htmlProcessado = htmlProcessado.replace(/;(\s*;)+/g, ';');
+    htmlProcessado = htmlProcessado.replace(/\sstyle="[\s;]*"/gi, '');
+
+    // Remove parágrafos vazios e quebras de linha duplas
+    htmlProcessado = htmlProcessado.replace(/<p><br><\/p>/g, '');
+    htmlProcessado = htmlProcessado.replace(/(<br>\s*){2,}/g, '<br>');
+
+    return htmlProcessado;
+  }
+
+  /**
+   * Adiciona estilos CSS específicos para PDF
+   */
+  private adicionarEstilosParaPdf(htmlContent: string): string {
+    const estilosParaPdf = `
+      <style>
+        #temp-pdf-render-area { 
+          font-family: 'Sans Serif', Arial, sans-serif; 
+          font-size: 9pt;
+          line-height: 1.2;
+          text-align: justify; 
+        }
+        #temp-pdf-render-area p {
+          min-height: 1.2em;
+          margin: 0;
+          padding: 0;
+        }
+        #temp-pdf-render-area h1, #temp-pdf-render-area h2, #temp-pdf-render-area h3, 
+        #temp-pdf-render-area h4, #temp-pdf-render-area h5, #temp-pdf-render-area h6 { 
+          page-break-after: avoid; 
+        }
+        #temp-pdf-render-area [style*="text-align: center"] {
+          text-align: center !important;
+        }
+        #temp-pdf-render-area p, #temp-pdf-render-area h1, #temp-pdf-render-area h2, 
+        #temp-pdf-render-area h3, #temp-pdf-render-area h4, #temp-pdf-render-area h5, 
+        #temp-pdf-render-area h6, #temp-pdf-render-area blockquote, #temp-pdf-render-area ul, 
+        #temp-pdf-render-area ol, #temp-pdf-render-area li, #temp-pdf-render-area table, 
+        #temp-pdf-render-area tr, #temp-pdf-render-area img { 
+          page-break-inside: avoid; 
+        }
+      </style>
+    `;
+    
+    return estilosParaPdf + htmlContent;
+  }
+
+  /**
+   * Gera o blob do PDF
+   */
+  private async gerarPdfBlob(htmlContent: string): Promise<Blob> {
+    const renderContainer = document.createElement('div');
+    renderContainer.id = 'temp-pdf-render-area';
+    renderContainer.style.position = 'absolute';
+    renderContainer.style.left = '-9999px';
+    renderContainer.style.top = '0';
+    renderContainer.style.backgroundColor = 'white';
+    renderContainer.style.padding = '12mm';
+    renderContainer.style.width = '210mm';
+    renderContainer.style.fontSize = '12px';
+    renderContainer.innerHTML = htmlContent;
+    
+    document.body.appendChild(renderContainer);
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 100));
+      return await this.pdfService.gerarPdfBlobPorElementoId('temp-pdf-render-area');
+    } finally {
+      if (document.body.contains(renderContainer)) {
+        document.body.removeChild(renderContainer);
+      }
+    }
+  }
+
+  /**
+   * Abre o modal com o PDF gerado
+   */
+  private abrirModalRelatorio(pdfBlob: Blob): void {
+    this.dialogService.open(KvReportModalComponent, {
+      header: 'Gerar Relatório',
+      width: '60%',
+      height: '90%',
+      modal: true,
+      closable: true,
+      data: {
+        pdfBlob: pdfBlob
+      }
+    });
+  }
+
+  /**
+   * Cria uma regex especial para busca em texto com HTML
+   */
+  private createInterleavedRegex(text: string): RegExp {
+    const specialChars = /[-\/\\^$*+?.()|[\]{}]/g;
+    const pattern = text
+      .split('')
+      .map(char => char.replace(specialChars, '\\$&'))
+      .join('(<[^>]*>)*');
+
+    return new RegExp(pattern, 'gi');
+  }
+}