keevo-components 2.0.106 → 2.0.107

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

@@ -0,0 +1,126 @@
+import { TestBed } from '@angular/core/testing';
+import { KvEditorQuillService } from './kv-editor-quill.service';
+import Quill from 'quill';
+
+describe('KvEditorQuillService', () => {
+  let service: KvEditorQuillService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(KvEditorQuillService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('loadCss', () => {
+    it('should load CSS successfully', async () => {
+      const result = await service.loadCss();
+      expect(result).toBeUndefined();
+    });
+
+    it('should not load CSS if already exists', async () => {
+      // Create a mock link element
+      const existingLink = document.createElement('link');
+      existingLink.href = 'https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css';
+      document.head.appendChild(existingLink);
+
+      const result = await service.loadCss();
+      expect(result).toBeUndefined();
+      
+      // Cleanup
+      document.head.removeChild(existingLink);
+    });
+  });
+
+  describe('registerCustomFormats', () => {
+    it('should register custom formats without errors', () => {
+      expect(() => service.registerCustomFormats()).not.toThrow();
+    });
+  });
+
+  describe('createQuillInstance', () => {
+    beforeEach(() => {
+      // Create a mock div element for Quill
+      const mockDiv = document.createElement('div');
+      mockDiv.id = 'test-editor';
+      document.body.appendChild(mockDiv);
+    });
+
+    afterEach(() => {
+      const mockDiv = document.getElementById('test-editor');
+      if (mockDiv) {
+        document.body.removeChild(mockDiv);
+      }
+    });
+
+    it('should create a Quill instance', () => {
+      const config = {
+        theme: 'snow',
+        modules: { toolbar: true },
+        placeholder: 'Test placeholder',
+        readOnly: false,
+        debug: false,
+      };
+
+      const quill = service.createQuillInstance('#test-editor', config);
+      expect(quill).toBeTruthy();
+      expect(quill instanceof Quill).toBe(true);
+    });
+  });
+
+  describe('getQuillInstance', () => {
+    it('should return null initially', () => {
+      const instance = service.getQuillInstance();
+      expect(instance).toBeNull();
+    });
+
+    it('should return the current instance after creation', () => {
+      const mockDiv = document.createElement('div');
+      mockDiv.id = 'test-editor-2';
+      document.body.appendChild(mockDiv);
+
+      const config = {
+        theme: 'snow',
+        modules: { toolbar: true },
+        placeholder: 'Test placeholder',
+        readOnly: false,
+        debug: false,
+      };
+
+      const createdQuill = service.createQuillInstance('#test-editor-2', config);
+      const retrievedQuill = service.getQuillInstance();
+      
+      expect(retrievedQuill).toBe(createdQuill);
+      
+      // Cleanup
+      document.body.removeChild(mockDiv);
+    });
+  });
+
+  describe('destroyQuillInstance', () => {
+    it('should destroy the current instance', () => {
+      const mockDiv = document.createElement('div');
+      mockDiv.id = 'test-editor-3';
+      document.body.appendChild(mockDiv);
+
+      const config = {
+        theme: 'snow',
+        modules: { toolbar: true },
+        placeholder: 'Test placeholder',
+        readOnly: false,
+        debug: false,
+      };
+
+      service.createQuillInstance('#test-editor-3', config);
+      expect(service.getQuillInstance()).toBeTruthy();
+
+      service.destroyQuillInstance();
+      expect(service.getQuillInstance()).toBeNull();
+      
+      // Cleanup
+      document.body.removeChild(mockDiv);
+    });
+  });
+});

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

@@ -0,0 +1,84 @@
+import { Injectable } from '@angular/core';
+import Quill from 'quill';
+import { KvEditorQuillConfig } from '../types/kv-editor.types';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KvEditorQuillService {
+  
+  private quillInstance: Quill | null = null;
+
+  /**
+   * Carrega o CSS do Quill dinamicamente
+   */
+  loadCss(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const existingLink = document.querySelector('link[href*="quill.snow.css"]');
+      if (existingLink) {
+        resolve();
+        return;
+      }
+
+      const cssElement = document.createElement('link');
+      cssElement.rel = 'stylesheet';
+      cssElement.href = 'https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css';
+
+      cssElement.onload = () => resolve();
+      cssElement.onerror = (err) => reject(err);
+
+      document.head.appendChild(cssElement);
+    });
+  }
+
+  /**
+   * Registra os formatos personalizados do Quill
+   */
+  registerCustomFormats(): void {
+    const ColorStyle: any = Quill.import('attributors/style/color');
+    const SizeStyle: any = Quill.import('attributors/style/size');
+    const Font: any = Quill.import('formats/font');
+    const Size: any = Quill.import('attributors/style/size');
+    const AlignStyle = Quill.import('attributors/style/align') as any;
+
+    Size.whitelist = ['15px', '20px', '30px', '40px', '50px', '70px', '90px'];
+    Font.whitelist = ['monospace', 'roboto', 'arial', 'times-new-roman', 'serif', 'inter'];
+
+    Quill.register(ColorStyle, true);
+    Quill.register(SizeStyle, true);
+    Quill.register(Font, true);
+    Quill.register(Size, true);
+    Quill.register(AlignStyle, true);
+  }
+
+  /**
+   * Cria uma instância do Quill com a configuração fornecida
+   */
+  createQuillInstance(selector: string, config: KvEditorQuillConfig): Quill {
+    this.registerCustomFormats();
+    
+    this.quillInstance = new Quill(selector, {
+      theme: config.theme,
+      modules: config.modules,
+      placeholder: config.placeholder,
+      readOnly: config.readOnly,
+      debug: config.debug,
+    });
+
+    return this.quillInstance;
+  }
+
+  /**
+   * Obtém a instância atual do Quill
+   */
+  getQuillInstance(): Quill | null {
+    return this.quillInstance;
+  }
+
+  /**
+   * Limpa a instância do Quill
+   */
+  destroyQuillInstance(): void {
+    this.quillInstance = null;
+  }
+}

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

@@ -0,0 +1,176 @@
+import { TestBed } from '@angular/core/testing';
+import { KvEditorRelatorioService } from './kv-editor-relatorio.service';
+import { KvEditorRelatorio, KvEditorVariavel } from '../types/kv-editor.types';
+
+describe('KvEditorRelatorioService', () => {
+  let service: KvEditorRelatorioService;
+
+  const mockRelatorios: KvEditorRelatorio[] = [
+    {
+      id: 1,
+      label: 'Relatório 1',
+      descricao: 'Descrição do relatório 1',
+      modeloRelatorio: 'Template com {1} e {2}',
+      variaveis: [
+        { id: 1, descricao: 'Variável 1', value: 'Valor 1' },
+        { id: 2, descricao: 'Variável 2', value: 'Valor 2' }
+      ]
+    },
+    {
+      id: 2,
+      label: 'Relatório 2',
+      descricao: 'Descrição do relatório 2',
+      modeloRelatorio: 'Template simples',
+      variaveis: []
+    }
+  ];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(KvEditorRelatorioService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('setRelatorios', () => {
+    it('should set relatorios correctly', () => {
+      service.setRelatorios(mockRelatorios);
+      expect(service.getRelatorios()).toEqual(mockRelatorios);
+    });
+  });
+
+  describe('getRelatorios', () => {
+    it('should return empty array initially', () => {
+      expect(service.getRelatorios()).toEqual([]);
+    });
+
+    it('should return set relatorios', () => {
+      service.setRelatorios(mockRelatorios);
+      expect(service.getRelatorios()).toEqual(mockRelatorios);
+    });
+  });
+
+  describe('setRelatorioPorId', () => {
+    beforeEach(() => {
+      service.setRelatorios(mockRelatorios);
+    });
+
+    it('should set relatorio by id successfully', () => {
+      const relatorio = service.setRelatorioPorId(1);
+      expect(relatorio).toEqual(mockRelatorios[0]);
+      expect(service.getRelatorioSelected()).toEqual(mockRelatorios[0]);
+      expect(service.getIdRelatorioSelected()).toBe(1);
+    });
+
+    it('should return null for non-existent id', () => {
+      const relatorio = service.setRelatorioPorId(999);
+      expect(relatorio).toBeNull();
+    });
+  });
+
+  describe('setRelatorio', () => {
+    it('should set relatorio directly', () => {
+      service.setRelatorio(mockRelatorios[0]);
+      expect(service.getRelatorioSelected()).toEqual(mockRelatorios[0]);
+      expect(service.getIdRelatorioSelected()).toBe(1);
+    });
+  });
+
+  describe('getRelatorioSelected', () => {
+    it('should return null initially', () => {
+      expect(service.getRelatorioSelected()).toBeNull();
+    });
+
+    it('should return selected relatorio', () => {
+      service.setRelatorio(mockRelatorios[0]);
+      expect(service.getRelatorioSelected()).toEqual(mockRelatorios[0]);
+    });
+  });
+
+  describe('getIdRelatorioSelected', () => {
+    it('should return 0 initially', () => {
+      expect(service.getIdRelatorioSelected()).toBe(0);
+    });
+
+    it('should return selected id', () => {
+      service.setRelatorio(mockRelatorios[0]);
+      expect(service.getIdRelatorioSelected()).toBe(1);
+    });
+  });
+
+  describe('renderContrato', () => {
+    it('should render template with variables', () => {
+      const texto = 'Olá {1}, você tem {2} mensagens.';
+      const variaveis: KvEditorVariavel[] = [
+        { id: 1, descricao: 'Nome', value: 'João' },
+        { id: 2, descricao: 'Quantidade', value: '5' }
+      ];
+
+      const result = service.renderContrato(texto, variaveis);
+      expect(result).toContain('Nome');
+      expect(result).toContain('Quantidade');
+      expect(result).toContain('span');
+      expect(result).toContain('variavel-inserida');
+    });
+
+    it('should handle missing variables', () => {
+      const texto = 'Olá {1}, você tem {999} mensagens.';
+      const variaveis: KvEditorVariavel[] = [
+        { id: 1, descricao: 'Nome', value: 'João' }
+      ];
+
+      const result = service.renderContrato(texto, variaveis);
+      expect(result).toContain('Nome');
+      expect(result).toContain('{999}');
+    });
+  });
+
+  describe('renderContratoParaPdf', () => {
+    it('should render template with values for PDF', () => {
+      const texto = 'Olá {1}, você tem {2} mensagens.';
+      const variaveis: KvEditorVariavel[] = [
+        { id: 1, descricao: 'Nome', value: 'João' },
+        { id: 2, descricao: 'Quantidade', value: '5' }
+      ];
+
+      const result = service.renderContratoParaPdf(texto, variaveis, 'valor');
+      expect(result).toBe('Olá João, você tem 5 mensagens.');
+    });
+
+    it('should render template with descriptions for PDF', () => {
+      const texto = 'Olá {1}, você tem {2} mensagens.';
+      const variaveis: KvEditorVariavel[] = [
+        { id: 1, descricao: 'Nome', value: 'João' },
+        { id: 2, descricao: 'Quantidade', value: '5' }
+      ];
+
+      const result = service.renderContratoParaPdf(texto, variaveis, 'descricao');
+      expect(result).toBe('Olá Nome, você tem Quantidade mensagens.');
+    });
+  });
+
+  describe('filtrarVariaveis', () => {
+    beforeEach(() => {
+      service.setRelatorio(mockRelatorios[0]);
+    });
+
+    it('should filter variables by search term', () => {
+      const result = service.filtrarVariaveis('Variável 1');
+      expect(result.length).toBe(1);
+      expect(result[0].descricao).toBe('Variável 1');
+    });
+
+    it('should return empty array when no relatorio selected', () => {
+      service.setRelatorio(mockRelatorios[1]); // Relatório sem variáveis
+      const result = service.filtrarVariaveis('test');
+      expect(result.length).toBe(0);
+    });
+
+    it('should return all variables for empty search', () => {
+      const result = service.filtrarVariaveis('');
+      expect(result.length).toBe(2);
+    });
+  });
+});

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

@@ -0,0 +1,101 @@
+import { Injectable, signal } from '@angular/core';
+import { KvEditorRelatorio, KvEditorVariavel } from '../types/kv-editor.types';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KvEditorRelatorioService {
+  
+  private relatorios = signal<KvEditorRelatorio[]>([]);
+  private relatorioSelected = signal<KvEditorRelatorio | null>(null);
+  private idRelatorioSelected = signal<number>(0);
+
+  /**
+   * Define a lista de relatórios disponíveis
+   */
+  setRelatorios(relatorios: KvEditorRelatorio[]): void {
+    this.relatorios.set(relatorios);
+  }
+
+  /**
+   * Obtém a lista de relatórios
+   */
+  getRelatorios(): KvEditorRelatorio[] {
+    return this.relatorios();
+  }
+
+  /**
+   * Seleciona um relatório pelo ID
+   */
+  setRelatorioPorId(id: number): KvEditorRelatorio | null {
+    this.idRelatorioSelected.set(id);
+    const relatorio = this.relatorios().find(r => r.id === id);
+    
+    if (relatorio) {
+      this.relatorioSelected.set(relatorio);
+      return relatorio;
+    }
+    
+    return null;
+  }
+
+  /**
+   * Define o relatório selecionado
+   */
+  setRelatorio(relatorio: KvEditorRelatorio): void {
+    this.idRelatorioSelected.set(relatorio.id);
+    this.relatorioSelected.set(relatorio);
+  }
+
+  /**
+   * Obtém o relatório selecionado
+   */
+  getRelatorioSelected(): KvEditorRelatorio | null {
+    return this.relatorioSelected();
+  }
+
+  /**
+   * Obtém o ID do relatório selecionado
+   */
+  getIdRelatorioSelected(): number {
+    return this.idRelatorioSelected();
+  }
+
+  /**
+   * Renderiza o template do contrato com as variáveis
+   */
+  renderContrato(texto: string, variaveis: KvEditorVariavel[]): string {
+    return texto.replace(/\{(\d+)\}/g, (_, id) => {
+      const v = variaveis.find(v => v.id === parseInt(id));
+      if (!v) return `{${id}}`;
+
+      return `<span class="variavel-inserida"
+                   style="background-color: #e6f7ff; color: #0066cc; border-radius: 3px; padding: 2px 4px; font-weight: 500;"
+                    title="${v.descricao ?? ''}">${v.descricao}</span>`;
+    });
+  }
+
+  /**
+   * Renderiza o contrato para PDF (sem formatação HTML)
+   */
+  renderContratoParaPdf(texto: string, variaveis: KvEditorVariavel[], tipoVisualizacao: 'valor' | 'descricao'): string {
+    return texto.replace(/\{(\d+)\}/g, (_, id) => {
+      const v = variaveis.find(v => v.id === parseInt(id));
+      if (!v) return `{${id}}`;
+      const descricao = tipoVisualizacao === 'descricao' ? v.descricao : v.value;
+      return descricao || '';
+    });
+  }
+
+  /**
+   * Filtra variáveis baseado no termo de busca
+   */
+  filtrarVariaveis(termo: string): KvEditorVariavel[] {
+    const relatorio = this.getRelatorioSelected();
+    if (!relatorio) return [];
+
+    return relatorio.variaveis.filter(v => 
+      v.descricao.toLowerCase().includes(termo.toLowerCase())
+    );
+  }
+}

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

@@ -0,0 +1,36 @@
+export interface KvEditorRelatorio {
+  id: number;
+  label: string;
+  descricao: string;
+  modeloRelatorio: string;
+  variaveis: KvEditorVariavel[];
+}
+
+export interface KvEditorVariavel {
+  id: number;
+  descricao: string;
+  value: string;
+  cor?: string;
+}
+
+export interface KvEditorConfig {
+  contentType: 'html' | 'text';
+  readonly: boolean;
+  debug: boolean;
+  canvaHeigth: string;
+}
+
+export interface KvEditorEvents {
+  onTextChange: any;
+  onSelectionChange: any;
+  outputRaw: string;
+  outputHtml: string;
+}
+
+export interface KvEditorQuillConfig {
+  theme: string;
+  modules: any;
+  placeholder: string;
+  readOnly: boolean;
+  debug: boolean;
+}

package/src/lib/components/kv-inputs/kv-input-calendar/kv-input-calendar.component.html

@@ -0,0 +1,37 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label && label + (showAsterisk ? '*' : '')"
+  />
+  <p-calendar
+
+    dateMask
+    (onInput)="onKeyDate($event)"
+
+    #dateFilter
+    appendTo="body"
+    [class]="baseInputClass"
+    [id]="componentId"
+    [(ngModel)]="value"
+    [disabled]="disabled"
+    [defaultDate]="defaultDate"
+    [minDate]="minDate"
+    [maxDate]="maxDate"
+    [selectionMode]="selectionMode"
+    [showButtonBar]="showButtonBar"
+    [showIcon]="showIcon"
+    [showTime]="showTime"
+    [showOnFocus]="showTime || screenWidth > 1366 || selectionMode == 'range'"
+    [view]="typeView"
+    [dateFormat]="dateFormat"
+    (onBlur)="onInputBlur($event)"
+    (onClose)="onInputClose($event)"
+    (onSelect)="onInputChange($event)"
+    styleClass="inputs"
+    [placeholder]="placeholder"
+  >
+  </p-calendar>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

package/src/lib/components/kv-inputs/kv-input-calendar/kv-input-calendar.component.scss

@@ -0,0 +1,23 @@
+::ng-deep .p-calendar-w-btn .p-datepicker-trigger {
+  background-color: #f2f3f5;
+  border: none;
+  color: black;
+  border: solid 1px #d1d5db;
+  width: 1.875rem;
+
+  &:hover {
+    background-color: #d9dadb;
+  }
+
+  &:disabled {
+    background-color: #f2f3f5;
+  }
+
+  &:active {
+    background-color: #c0c1c2;
+  }
+}
+
+::ng-deep input {
+  font-size: 0.875rem;
+}