keevo-components 2.0.180 → 2.0.181

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

@@ -1,319 +0,0 @@
-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);
-
-    effect(() => {
-      let readonly = this.readonly();
-      if (this.quill) {
-        this.quill.enable(!readonly);
-      }
-    });
-  }
-
-  // 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() 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<any>(0);
-  printButton = input<boolean>(true);
-  labelEmptyDropdown = input<string>('Selecione um relatório');
-  instrucoesTemplate = input<TemplateRef<any> | undefined>(undefined);
-  showHeader = input<boolean>(true);
-  readonly = input<boolean>(false);
-
-
-  // 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: any): 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/src/lib/components/kv-inputs/kv-editor/services/kv-editor-mention.service.ts

@@ -1,156 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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');
-  }
-}