keevo-components 2.0.107 → 2.0.109

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

@@ -1,120 +0,0 @@
-/**
- * Configuração padrão para o KV Editor
- * Este arquivo demonstra as melhores práticas de configuração
- */
-
-import { KvEditorConfig, KvEditorQuillConfig } from '../types/kv-editor.types';
-
-/**
- * Configuração padrão do componente KV Editor
- */
-export const DEFAULT_KV_EDITOR_CONFIG: KvEditorConfig = {
-  contentType: 'html',
-  readonly: false,
-  debug: false,
-  canvaHeigth: '380px'
-};
-
-/**
- * Configuração padrão do Quill Editor
- */
-export const DEFAULT_QUILL_CONFIG: Partial<KvEditorQuillConfig> = {
-  theme: 'snow',
-  modules: {
-    toolbar: '#kv-editor-toolbar',
-  },
-  readOnly: false,
-  debug: false,
-};
-
-/**
- * Configuração de fontes personalizadas
- */
-export const CUSTOM_FONTS = [
-  'monospace',
-  'roboto',
-  'arial',
-  'times-new-roman',
-  'serif',
-  'inter'
-];
-
-/**
- * Configuração de tamanhos de fonte
- */
-export const FONT_SIZES = [
-  '15px',
-  '20px',
-  '30px',
-  '40px',
-  '50px',
-  '70px',
-  '90px'
-];
-
-/**
- * Configuração de estilos CSS para PDF
- */
-export const PDF_STYLES = `
-  <style>
-    #temp-pdf-render-area { 
-      font-family: 'Sans Serif', Arial, sans-serif; 
-      font-size: 11pt;
-      line-height: 1.3;
-      text-align: justify; 
-    }
-    #temp-pdf-render-area p {
-      min-height: 1.3em;
-      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>
-`;
-
-/**
- * Configuração de tempo de debounce para auto-save
- */
-export const DEBOUNCE_TIME = 500;
-
-/**
- * Configuração de URLs CDN
- */
-export const CDN_URLS = {
-  quillCss: 'https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css',
-  quillJs: 'https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js',
-  robotoFont: 'https://fonts.googleapis.com/css?family=Roboto'
-};
-
-/**
- * Configuração de mensagens de erro
- */
-export const ERROR_MESSAGES = {
-  pdfGeneration: 'Ocorreu um erro ao gerar o relatório.',
-  quillInit: 'Erro ao inicializar o editor.',
-  saveError: 'Erro ao salvar o conteúdo.',
-  loadError: 'Erro ao carregar o conteúdo.'
-};
-
-/**
- * Configuração de timeouts
- */
-export const TIMEOUTS = {
-  pdfGeneration: 2000,
-  editorInit: 1000,
-  cssLoad: 5000,
-  autoSave: 3000
-};

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

@@ -1,285 +0,0 @@
-<div
-  class="kv-editor-container h-full max-h-full flex flex-column overflow-hidden"
->
-  <div
-    #editor
-    id="kv-editor-toolbar"
-    [ngClass]="{ 'error-border-toolbar': hasControlError() }"
-    class="flex flex-column flex-initial"
-  >
-    @if(relatorios().length > 0) {
-    <div class="flex flex-row justify-content-between">
-      <div class="flex flex-row gap-2">
-        <div
-          class="flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300"
-          (click)="op.toggle($event)"
-        >
-          <span
-            class="material-symbols-outlined text-lg text-green-600 font-medium"
-          >
-            contract
-          </span>
-          <span class="font-semibold text-xs text-gray-600">{{
-            !clearedTemplate() ? (relatorio()?.label || labelEmptyDropdown()) : labelEmptyDropdown()
-          }}</span>
-          <span class="material-symbols-outlined text-lg">
-            keyboard_arrow_down
-          </span>
-        </div>
-
-        @if(!clearedTemplate()) {
-        <div
-          class="flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300"
-          (click)="clearTemplate()"
-        >
-          <span
-            class="material-symbols-outlined text-lg text-orange-600 font-medium"
-            [pTooltip]="'Limpar Template'"
-          >
-            layers_clear
-          </span>
-        </div>
-        }
-
-        <div
-          class="flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300"
-          (click)="showInstrucoes()"
-        >
-          <span
-            class="material-symbols-outlined text-lg text-blue-600 font-medium"
-          >
-            info
-          </span>
-          <span class="font-semibold text-xs text-gray-600">Instruções</span>
-        </div>
-      </div>
-
-      @if(printButton()) {
-      <div
-        class="flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300"
-        (click)="openRelatorio()"
-      >
-        <span class="material-symbols-outlined text-lg font-medium">
-          print
-        </span>
-        <span class="font-semibold text-xs text-gray-600">Imprimir</span>
-      </div>
-      }
-    </div>
-
-    <p-divider class="w-full"></p-divider>
-
-    }
-
-    <div
-      class="flex flex-row align-items-center justify-content-between w-full flex-initial"
-    >
-      @if(isLoading()) {
-
-      <div class="flex flex-row align-items-center gap-3 w-full">
-        <p-skeleton
-          styleClass="w-6rem"
-          [style]="{ height: '2rem' }"
-        ></p-skeleton>
-
-        <p-skeleton
-          styleClass="w-6rem"
-          [style]="{ height: '2rem' }"
-        ></p-skeleton>
-
-        <p-skeleton
-          styleClass="w-6rem"
-          [style]="{ height: '2rem' }"
-        ></p-skeleton>
-
-        <p-skeleton
-          styleClass="w-6rem"
-          [style]="{ height: '2rem' }"
-        ></p-skeleton>
-
-        <p-skeleton
-          styleClass="w-6rem"
-          [style]="{ height: '2rem' }"
-        ></p-skeleton>
-      </div>
-      }
-
-      <div
-        class="flex-row align-items-center flex-wrap gap-2 {{
-          isLoading() ? 'hidden' : 'flex'
-        }} w-full"
-      >
-        <span class="ql-formats border-round-md">
-          <select class="ql-font">
-            <option value="roboto">Roboto</option>
-            <option value="arial">Arial</option>
-            <option value="times-new-roman">Times New Roman</option>
-            <option value="monospace">Monospace</option>
-            <option value="inter">Inter</option>
-            <option selected>Sans Serif</option>
-            <option value="serif">Serif</option>
-          </select>
-
-          <select class="ql-header">
-            <option value="1">Titulo</option>
-            <option value="2">Subtitulo</option>
-            <option selected>Normal</option>
-          </select>
-
-          <span class="ql-format-group">
-            <select title="Size" class="ql-size">
-              <option value="15px">15px</option>
-              <option value="20px">20px</option>
-              <option value="30px">30px</option>
-              <option value="40px">40px</option>
-              <option value="50px">50px</option>
-              <option value="70px">70px</option>
-              <option value="90px">90px</option>
-            </select>
-          </span>
-        </span>
-
-        <p-divider layout="vertical"></p-divider>
-
-        <span class="ql-formats border-round-md">
-          <button class="ql-bold"></button>
-          <button class="ql-italic"></button>
-          <button class="ql-underline"></button>
-          <button class="ql-strike"></button>
-        </span>
-
-        <p-divider layout="vertical"></p-divider>
-
-        <span class="ql-formats border-round-md">
-          <select class="ql-color"></select>
-          <select class="ql-background"></select>
-        </span>
-
-        @if(true) {
-        <!-- <p-divider layout="vertical"></p-divider>
-
-      <span class="ql-formats border-round-md">
-        <button class="ql-header" value="1"></button>
-        <button class="ql-header" value="2"></button>
-      </span> -->
-
-        <p-divider layout="vertical"></p-divider>
-
-        <span class="ql-formats border-round-md">
-          <button class="ql-link"></button>
-          <button class="ql-image"></button>
-          <button class="ql-video"></button>
-        </span>
-
-        <p-divider layout="vertical"></p-divider>
-
-        <span class="ql-formats border-round-md">
-          <button class="ql-list" value="ordered"></button>
-          <button class="ql-list" value="bullet"></button>
-          <select class="ql-align"></select>
-        </span>
-        }
-      </div>
-    </div>
-  </div>
-  <div
-    style="
-      height: 3px;
-      border-right: 1px solid #e5e7eb;
-      border-left: 1px solid #e5e7eb;
-      border-top: none;
-      border-bottom: none;
-    "
-  >
-    @if(isLoadingPdf()) {
-    <p-progressBar mode="indeterminate" [style]="{ height: '3px' }" />
-    }
-  </div>
-
-  <div
-    id="kv-editor"
-    class="overflow-auto w-full flex-1 scrollstyle"
-    [ngClass]="{
-      'error-border': hasControlError(),
-      'pointer-events-none opacity-60': isLoadingPdf()
-    }"
-    style="border-top: none"
-  ></div>
-</div>
-<kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
-
-<!-- <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" /> -->
-<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
-<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
-
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css"
-/>
-<link
-  rel="stylesheet"
-  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
-/>
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"
-/>
-
-<p-overlayPanel #op styleClass="overflow-hidden">
-  <div
-    class="grid m-0 gap-2 p-2 max-w-20rem overflow-y-auto scrollstyle"
-    style="max-height: 16rem"
-  >
-    @for(item of relatorios(); track $index) {
-    <div
-      class="col-12 cursor-pointer hover:bg-gray-100 transition-colors transition-duration-200 border-round-lg shadow-2 flex flex-column gap-2"
-      (click)="setRelatorio(item)"
-    >
-      <div
-        class="flex flex-row align-items-center gap-2 justify-content-between"
-      >
-        <span class="text-sm font-medium w-full">{{ item.label }}</span>
-
-        <kv-tags
-          class="transition-opacity transition-duration-300 {{
-            item?.id == idRelatorioSelected() ? 'opacity-100' : 'opacity-0'
-          }}"
-          [tags]="[{ label: 'Selecionado', severity: 'primary' }]"
-        ></kv-tags>
-      </div>
-      <span class="text-xs text-gray-500">{{ item.descricao }}</span>
-    </div>
-    }
-  </div>
-</p-overlayPanel>
-
-<div class="kv-editor-container flex flex-column overflow-hidden relative">
-  <div
-    #mentionAnchor
-    style="position: fixed; width: 1px; height: 1px; opacity: 0"
-  ></div>
-</div>
-
-<p-overlayPanel
-  #opVariables
-  [appendTo]="'body'"
-  (onHide)="closeVariablesPanel()"
->
-  <div
-    class="flex flex-column gap-1 p-1 overflow-y-auto scroll-virtual border-round-lg"
-    style="max-height: 250px; min-width: 250px; background-color: #333333"
-  >
-    @for(variable of filteredVariables(); track variable.id) {
-    <div
-      class="p-2 cursor-pointer transition-colors transition-duration-200 border-round-lg text-sm text-white option-dropdown"
-      (click)="selectVariableFromPanel(variable)"
-    >
-      {{ variable.descricao }} (
-      <span class="text-gray-400">{{ variable.value }}</span> )
-    </div>
-    } @empty {
-    <div class="p-2 text-sm text-gray-500">Nenhuma variável encontrada.</div>
-    }
-  </div>
-</p-overlayPanel>

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

@@ -1,182 +0,0 @@
-:host ::ng-deep .ql-font-roboto {
-  font-family: "Roboto", sans-serif;
-}
-
-:host ::ng-deep .ql-font-inter {
-  font-family: "Inter var", sans-serif;
-}
-
-:host ::ng-deep .ql-font-arial {
-  font-family: "Arial", Arial, sans-serif;
-}
-
-:host ::ng-deep .ql-font-times-new-roman {
-  font-family: "Times New Roman", Times, serif;
-}
-
-// :host ::ng-deep .ql-font-emoji {
-//   font-family: "Noto Color Emoji", sans-serif;
-// }
-
-:host ::ng-deep .ql-tooltip.ql-editing[data-mode="video"] {
-  transform: translate(40%, 0px);
-}
-
-:host ::ng-deep #kv-editor-toolbar {
-  border-radius: 6px 6px 0 0;
-  border: 1px solid #e5e7eb;
-}
-
-:host ::ng-deep #kv-editor {
-  border-radius: 0 0 6px 6px;
-  border: 1px solid #e5e7eb;
-}
-
-.error-border-toolbar {
-  transition: all ease-in 0.2s;
-  border-top-color: #e24c4c !important;
-  border-bottom-color: #e24c4c !important;
-  border-left-color: #e24c4c !important;
-  border-right-color: #e24c4c !important;
-}
-.error-border {
-  border-color: #e24c4c !important;
-  transition: all ease-in 0.2s;
-}
-
-:host ::ng-deep .blot-formatter__resize-handle {
-  background: #eaeaea !important;
-}
-
-:ng-deep p {
-  text-align: justify !important;
-}
-
-::ng-deep .scrollstyle,
-::ng-deep .ql-editor {
-  &::-webkit-scrollbar {
-    width: 6px;
-
-    &:hover {
-      background-color: rgba(222, 222, 222, 0.75);
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: transparent;
-  }
-
-  &:hover::-webkit-scrollbar-thumb {
-    border-left: 2px solid white;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-
-  &::-webkit-scrollbar-track {
-    border-left: 2px solid white;
-    background-color: rgba(222, 222, 222, 0.75);
-  }
-
-  overflow-x: hidden;
-}
-
-// .dropdown-variavel {
-//   background: white;
-//   border: 1px solid #ccc;
-//   padding: 4px;
-//   max-height: 200px;
-//   overflow-y: auto;
-//   width: 300px;
-// }
-// .dropdown-variavel ul {
-//   list-style: none;
-//   margin: 0;
-//   padding: 0;
-// }
-// .dropdown-variavel li {
-//   padding: 4px 8px;
-//   cursor: pointer;
-// }
-// .dropdown-variavel li:hover {
-//   background-color: #f0f0f0;
-// }
-
-// :host ::ng-deep para garantir que o estilo seja aplicado ao componente filho
-:host ::ng-deep {
-  // O contêiner principal do editor.
-  // A classe 'relative' no HTML é fundamental para este CSS funcionar.
-  .kv-editor-container {
-    // Esta linha já deve estar no seu HTML através da classe 'relative' da sua framework.
-    // Se não estiver, descomente a linha abaixo.
-    // position: relative;
-  }
-
-  // O overlay que cobre APENAS a área do editor
-  .editor-spinner-overlay {
-    // Posiciona o overlay em relação ao .kv-editor-container
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    // Fundo branco semitransparente que deixará apenas o editor opaco
-    background-color: rgba(255, 255, 255, 0.5);
-
-    // Centraliza o spinner dentro do overlay
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    // Garante que o overlay fique acima do editor, mas abaixo de qualquer
-    // menu global da página, se necessário.
-    z-index: 100000;
-
-    // Adiciona bordas arredondadas se o seu container tiver
-    border-radius: inherit;
-  }
-}
-
-::ng-deep .p-progressbar-indeterminate .p-progressbar-value::after {
-  background: rgb(0, 37, 66);
-}
-
-::ng-deep .p-progressbar-indeterminate .p-progressbar-value::before {
-  background: rgb(0, 37, 66);
-}
-
-::ng-deep .scroll-virtual {
-  &::-webkit-scrollbar {
-    width: 8px;
-
-    &:hover {
-      background-color: rgba(222, 222, 222, 0.75);
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: transparent;
-  }
-
-  &:hover::-webkit-scrollbar-thumb {
-    border-left: 2px solid white;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-
-  &::-webkit-scrollbar-track {
-    border-left: 2px solid white;
-    background-color: rgba(222, 222, 222, 0.75);
-  }
-
-  overflow-x: hidden;
-}
-
-.option-dropdown {
-  background-color: #333333;
-  transition: all ease-in 0.2s;
-
-  &:hover {
-    background-color: #444444;
-  }
-}