keevo-components 2.0.106 → 2.0.107

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

@@ -0,0 +1,120 @@
+/**
+ * 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

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

@@ -0,0 +1,182 @@
+: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;
+  }
+}