keevo-components 2.0.233 → 2.0.236

package/fesm2022/keevo-components.mjs

@@ -5773,6 +5773,11 @@ class KvEditorComponent extends BaseComponentInput {
         this.instrucoesTemplate = input(undefined);
         this.showHeader = input(true);
         this.readonly = input(false);
+        this.disabledEditor = input(false);
+        this.showHeaderButtons = input(true);
+        // Inputs para botões específicos do Alpha Crm
+        this.showAlphaCrmButtons = input(false);
+        this.enableButtonInsert = input(true);
         // Computed properties para relatórios
         this.idRelatorioSelected = computed(() => this.relatorioService.getIdRelatorioSelected());
         this.relatorio = computed(() => this.relatorioService.getRelatorioSelected());
@@ -5789,6 +5794,12 @@ class KvEditorComponent extends BaseComponentInput {
                 this.quill.enable(!readonly);
             }
         });
+        effect(() => {
+            let disabled = this.disabledEditor();
+            if (this.quill) {
+                this.quill.enable(!disabled);
+            }
+        });
         effect(() => {
             if (this.enablePreviewMode()) {
                 this.atualizarPreview();
@@ -5835,7 +5846,7 @@ class KvEditorComponent extends BaseComponentInput {
         document.addEventListener('click', (e) => {
             if (this.showButtonTooltip() && this.buttonNameTooltip) {
                 const tooltipElement = this.buttonNameTooltip.nativeElement;
-                const insertButton = document.querySelector('#insert-button');
+                const insertButton = document.querySelector('#insert-custom-button');
                 if (!tooltipElement.contains(e.target) &&
                     !insertButton?.contains(e.target)) {
                     this.cancelButtonName();
@@ -5862,7 +5873,7 @@ class KvEditorComponent extends BaseComponentInput {
                 }
             },
             placeholder: this.label ? this.label : '',
-            readOnly: this.readonly(),
+            readOnly: this.readonly() || this.disabledEditor(),
             debug: this.debug,
         };
         this.quill = this.quillService.createQuillInstance('#kv-editor', config);
@@ -5880,8 +5891,8 @@ class KvEditorComponent extends BaseComponentInput {
         }, 0);
     }
     setupCustomToolbarButtons() {
-        const insertButton = document.querySelector('#insert-button');
-        insertButton?.addEventListener('click', (event) => {
+        const insertCustomButton = document.querySelector('#insert-custom-button');
+        insertCustomButton?.addEventListener('click', (event) => {
             const range = this.quill.getSelection();
             if (range) {
                 this.pendingButtonRange = range;
@@ -5901,6 +5912,40 @@ class KvEditorComponent extends BaseComponentInput {
                 }, 100);
             }
         });
+        const btnAlphaAceitar = document.querySelector('#btn-alpha-aceitar');
+        btnAlphaAceitar?.addEventListener('click', () => {
+            this.inserirBotoesAlpha('Aceitar Proposta', 'aceitarButtonAction', 'blue');
+        });
+        const btnAlphaCancelar = document.querySelector('#btn-alpha-cancelar');
+        btnAlphaCancelar?.addEventListener('click', () => {
+            this.inserirBotoesAlpha('Cancelar Proposta', 'cancelarButtonAction', 'gray');
+        });
+        const btnAlphaAceitarAssinar = document.querySelector('#btn-alpha-aceitar-assinar');
+        btnAlphaAceitarAssinar?.addEventListener('click', () => {
+            this.inserirBotoesAlpha('Aceitar Proposta e Assinar Contrato', 'aceitarAssinarAction', 'blue');
+        });
+    }
+    inserirBotoesAlpha(buttonName, functionName, color) {
+        const range = this.quill.getSelection();
+        if (!range)
+            return;
+        this.quill.focus();
+        const buttonId = this.generateButtonId(buttonName);
+        const placeholderText = `[BOTÃO: ${buttonName}]`;
+        const styles = color === 'blue'
+            ? { 'color': '#1e3a8a', 'bold': true, 'background': '#dbeafe' }
+            : { 'color': '#444444', 'bold': true, 'background': '#e0e0e0' };
+        this.quill.insertText(range.index, placeholderText, styles, 'user');
+        const delta = new this.quillDelta()
+            .retain(range.index)
+            .retain(placeholderText.length, {
+            'button-id': buttonId,
+            'button-onclick': functionName,
+            'button-text': buttonName
+        });
+        this.quill.updateContents(delta, 'silent');
+        this.quill.setSelection(range.index + placeholderText.length, 0);
+        this.registerButtonCallback(functionName, buttonName, buttonId);
     }
     confirmButtonName() {
         const buttonName = this.buttonNameValue.trim();
@@ -5935,7 +5980,6 @@ class KvEditorComponent extends BaseComponentInput {
         const cleanFunctionName = functionName.replace('()', '');
         const id = buttonId || this.generateButtonId(buttonName);
         window[cleanFunctionName] = () => {
-            console.log(`Botão "${buttonName}" foi clicado!`);
             this.onCustomButtonClick.emit({
                 buttonName: buttonName,
                 functionName: cleanFunctionName,
@@ -6194,7 +6238,6 @@ class KvEditorComponent extends BaseComponentInput {
         conteudoFinal += conteudoProcessado;
         conteudoFinal += '</div>';
         this.previewHtmlOutput.emit(conteudoFinal);
-        console.log('conteudoFinal -> ', conteudoFinal);
         return this.sanitizer.bypassSecurityTrustHtml(conteudoFinal);
     }
     removerIndentacaoHtml(html) {
@@ -6274,11 +6317,11 @@ class KvEditorComponent extends BaseComponentInput {
         return this.previewContent();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvEditorComponent, deps: [{ token: ComponentService }, { token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvEditorComponent, selector: "kv-editor", inputs: { canvaHeigth: { classPropertyName: "canvaHeigth", publicName: "canvaHeigth", isSignal: false, isRequired: false, transformFunction: null }, contentType: { classPropertyName: "contentType", publicName: "contentType", isSignal: false, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: false, isRequired: false, transformFunction: null }, enablePreviewMode: { classPropertyName: "enablePreviewMode", publicName: "enablePreviewMode", isSignal: true, isRequired: false, transformFunction: null }, showVariableValuesInPreview: { classPropertyName: "showVariableValuesInPreview", publicName: "showVariableValuesInPreview", isSignal: true, isRequired: false, transformFunction: null }, relatorios: { classPropertyName: "relatorios", publicName: "relatorios", isSignal: true, isRequired: false, transformFunction: null }, idRelatorioInitial: { classPropertyName: "idRelatorioInitial", publicName: "idRelatorioInitial", isSignal: true, isRequired: false, transformFunction: null }, printButton: { classPropertyName: "printButton", publicName: "printButton", isSignal: true, isRequired: false, transformFunction: null }, labelEmptyDropdown: { classPropertyName: "labelEmptyDropdown", publicName: "labelEmptyDropdown", isSignal: true, isRequired: false, transformFunction: null }, instrucoesTemplate: { classPropertyName: "instrucoesTemplate", publicName: "instrucoesTemplate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", outputRaw: "outputRaw", outputHtml: "outputHtml", previewHtmlOutput: "previewHtmlOutput", onCustomButtonClick: "onCustomButtonClick", idRelatorioInitial: "idRelatorioInitialChange" }, providers: ComponentProviders(KvEditorComponent), viewQueries: [{ propertyName: "opVariables", first: true, predicate: ["opVariables"], descendants: true }, { propertyName: "mentionAnchor", first: true, predicate: ["mentionAnchor"], descendants: true }, { propertyName: "buttonNameTooltip", first: true, predicate: ["buttonNameTooltip"], descendants: true }, { propertyName: "buttonNameInput", first: true, predicate: ["buttonNameInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"kv-editor-container h-full w-full max-h-full flex flex-column overflow-hidden\"\r\n>\r\n  <div\r\n    #editor\r\n    id=\"kv-editor-toolbar\"\r\n    [ngClass]=\"{ 'error-border-toolbar': hasControlError() }\"\r\n    class=\"{{ showHeader() ? 'flex' : 'hidden' }} flex-column flex-initial\"\r\n  >\r\n    @if(relatorios().length > 0) {\r\n    <div class=\"flex flex-row justify-content-between {{readonly() && 'pointer-events-none opacity-90'}}\">\r\n      <div class=\"flex flex-row gap-2\">\r\n        <div\r\n          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\"\r\n          (click)=\"op.toggle($event)\"\r\n        >\r\n          <span\r\n            class=\"material-symbols-outlined text-lg text-green-600 font-medium\"\r\n          >\r\n            contract\r\n          </span>\r\n          <span class=\"font-semibold text-xs text-gray-600\">{{\r\n            !clearedTemplate()\r\n              ? relatorio()?.label || labelEmptyDropdown()\r\n              : labelEmptyDropdown()\r\n          }}</span>\r\n          <span class=\"material-symbols-outlined text-lg\">\r\n            keyboard_arrow_down\r\n          </span>\r\n        </div>\r\n\r\n        @if(!clearedTemplate()) {\r\n        <div\r\n          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\"\r\n          (click)=\"clearTemplate()\"\r\n        >\r\n          <span\r\n            class=\"material-symbols-outlined text-lg text-orange-600 font-medium\"\r\n            [pTooltip]=\"'Limpar Template'\"\r\n          >\r\n            layers_clear\r\n          </span>\r\n        </div>\r\n        }\r\n\r\n        <div\r\n          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\"\r\n          (click)=\"showInstrucoes()\"\r\n        >\r\n          <span\r\n            class=\"material-symbols-outlined text-lg text-blue-600 font-medium\"\r\n          >\r\n            info\r\n          </span>\r\n          <span class=\"font-semibold text-xs text-gray-600\">Instru\u00E7\u00F5es</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- @if(printButton()) {\r\n      <div\r\n        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\"\r\n        (click)=\"openRelatorio()\"\r\n      >\r\n        <span class=\"material-symbols-outlined text-lg font-medium\">\r\n          print\r\n        </span>\r\n        <span class=\"font-semibold text-xs text-gray-600\">Imprimir</span>\r\n      </div>\r\n      } -->\r\n    </div>\r\n\r\n    <p-divider class=\"w-full\"></p-divider>\r\n\r\n    }\r\n\r\n    <div\r\n      class=\"flex flex-row align-items-center justify-content-between w-full flex-initial\"\r\n    >\r\n      @if(isLoading()) {\r\n\r\n      <div class=\"flex flex-row align-items-center gap-3 w-full\">\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"flex-row align-items-center flex-wrap gap-2 {{\r\n          isLoading() ? 'hidden' : 'flex'\r\n        }} w-full\"\r\n      >\r\n        <span class=\"ql-formats border-round-md\">\r\n          <select class=\"ql-font\">\r\n            <option value=\"roboto\">Roboto</option>\r\n            <option value=\"arial\">Arial</option>\r\n            <option value=\"times-new-roman\">Times New Roman</option>\r\n            <option value=\"monospace\">Monospace</option>\r\n            <option value=\"inter\">Inter</option>\r\n            <option selected>Sans Serif</option>\r\n            <option value=\"serif\">Serif</option>\r\n          </select>\r\n\r\n          <select class=\"ql-header\">\r\n            <option value=\"1\">Titulo</option>\r\n            <option value=\"2\">Subtitulo</option>\r\n            <option selected>Normal</option>\r\n          </select>\r\n\r\n          <span class=\"ql-format-group\">\r\n            <select title=\"Size\" class=\"ql-size\">\r\n              <option value=\"15px\">15px</option>\r\n              <option value=\"20px\">20px</option>\r\n              <option value=\"30px\">30px</option>\r\n              <option value=\"40px\">40px</option>\r\n              <option value=\"50px\">50px</option>\r\n              <option value=\"70px\">70px</option>\r\n              <option value=\"90px\">90px</option>\r\n            </select>\r\n          </span>\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-bold\" pTooltip=\"Negrito\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-italic\" pTooltip=\"It\u00E1lico\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-underline\" pTooltip=\"Sublinhado\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-strike\" pTooltip=\"Tachado\" tooltipPosition=\"top\"></button>\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <select class=\"ql-color\" pTooltip=\"Cor da fonte\" tooltipPosition=\"top\"></select>\r\n          <select class=\"ql-background\" pTooltip=\"Cor de fundo\" tooltipPosition=\"top\"></select>\r\n        </span>\r\n\r\n        @if(true) {\r\n        <!-- <p-divider layout=\"vertical\"></p-divider>\r\n\r\n      <span class=\"ql-formats border-round-md\">\r\n        <button class=\"ql-header\" value=\"1\"></button>\r\n        <button class=\"ql-header\" value=\"2\"></button>\r\n      </span> -->\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-link\" pTooltip=\"Inserir link\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-image\" pTooltip=\"Inserir imagem\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-video\" pTooltip=\"Inserir v\u00EDdeo\" tooltipPosition=\"top\"></button>\r\n          <button id=\"insert-button\" pTooltip=\"Inserir bot\u00E3o\" tooltipPosition=\"top\">\r\n            <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">buttons_alt</span>\r\n          </button>\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-list\" value=\"ordered\" pTooltip=\"Lista ordenada\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-list\" value=\"bullet\" pTooltip=\"Lista com marcadores\" tooltipPosition=\"top\"></button>\r\n          <select class=\"ql-align\" pTooltip=\"Alinhamento\" tooltipPosition=\"top\"></select>\r\n        </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    style=\"height: 3px; border-top: none; border-bottom: none\"\r\n    [style.borderRight]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n    [style.borderLeft]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n  >\r\n    @if(isLoadingPdf()) {\r\n    <p-progressBar mode=\"indeterminate\" [style]=\"{ height: '3px' }\" />\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex flex-row flex-1 gap-0 overflow-auto\">\r\n    <div\r\n      id=\"kv-editor\"\r\n      class=\"overflow-auto flex-1 scrollstyle\"\r\n      [ngClass]=\"{\r\n        'error-border': hasControlError(),\r\n        'pointer-events-none opacity-60': isLoadingPdf()\r\n      }\"\r\n      [style.borderTop]=\"showHeader() ? 'none' : '1px solid #e5e7eb'\"\r\n      [style.borderRight]=\"enablePreviewMode() ? 'none' : '1px solid #e5e7eb'\"\r\n    ></div>\r\n\r\n    @if(enablePreviewMode()) {\r\n    <div class=\"flex flex-column flex-1\">\r\n      <div \r\n        class=\"flex align-items-center gap-2 px-3 py-2\" \r\n        [style.borderRight]=\"'1px solid #e5e7eb'\"\r\n        [style.borderLeft]=\"'1px solid #e5e7eb'\"\r\n      >\r\n        <span class=\"material-symbols-outlined text-blue-600 text-lg\">visibility</span>\r\n        <span class=\"font-semibold text-gray-700 text-sm\">Preview</span>\r\n      </div>\r\n      \r\n      <div\r\n        id=\"kv-editor-preview\"\r\n        class=\"overflow-auto flex-1 scrollstyle\"\r\n        [innerHTML]=\"getPreviewContent\"\r\n        [style.border]=\"'1px solid #e5e7eb'\"\r\n      ></div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n</div>\r\n<kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n\r\n<!-- <link href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\" rel=\"stylesheet\" /> -->\r\n<link href=\"https://fonts.googleapis.com/css?family=Roboto\" rel=\"stylesheet\" />\r\n<script src=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js\"></script>\r\n<script src=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js\"></script>\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css\"\r\n/>\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css\"\r\n/>\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css\"\r\n/>\r\n\r\n<p-overlayPanel #op styleClass=\"overflow-hidden\">\r\n  <div\r\n    class=\"grid m-0 gap-2 p-2 max-w-20rem overflow-y-auto scrollstyle\"\r\n    style=\"max-height: 16rem\"\r\n  >\r\n    @for(item of relatorios(); track $index) {\r\n    <div\r\n      class=\"col-12 cursor-pointer hover:bg-gray-100 transition-colors transition-duration-200 border-round-lg shadow-2 flex flex-column gap-2\"\r\n      (click)=\"setRelatorio(item)\"\r\n    >\r\n      <div\r\n        class=\"flex flex-row align-items-center gap-2 justify-content-between\"\r\n      >\r\n        <span class=\"text-sm font-medium w-full\">{{ item.label }}</span>\r\n\r\n        <kv-tags\r\n          class=\"transition-opacity transition-duration-300 {{\r\n            item?.id == idRelatorioSelected() ? 'opacity-100' : 'opacity-0'\r\n          }}\"\r\n          [tags]=\"[{ label: 'Selecionado', severity: 'primary' }]\"\r\n        ></kv-tags>\r\n      </div>\r\n      <span class=\"text-xs text-gray-500\">{{ item.descricao }}</span>\r\n    </div>\r\n    }\r\n  </div>\r\n</p-overlayPanel>\r\n\r\n<div class=\"kv-editor-container flex flex-column overflow-hidden relative\">\r\n  <div\r\n    #mentionAnchor\r\n    style=\"position: fixed; width: 1px; height: 1px; opacity: 0\"\r\n  ></div>\r\n</div>\r\n\r\n<p-overlayPanel\r\n  #opVariables\r\n  [appendTo]=\"'body'\"\r\n  (onHide)=\"closeVariablesPanel()\"\r\n>\r\n  <div\r\n    class=\"flex flex-column gap-1 p-1 overflow-y-auto scroll-virtual border-round-lg\"\r\n    style=\"max-height: 250px; min-width: 250px; background-color: #333333\"\r\n  >\r\n    @for(variable of filteredVariables(); track variable.id) {\r\n    <div\r\n      class=\"p-2 cursor-pointer transition-colors transition-duration-200 border-round-lg text-sm text-white option-dropdown\"\r\n      (click)=\"selectVariableFromPanel(variable)\"\r\n    >\r\n      {{ variable.descricao }} (\r\n      <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n    </div>\r\n    } @empty {\r\n    <div class=\"p-2 text-sm text-gray-500\">Nenhuma vari\u00E1vel encontrada.</div>\r\n    }\r\n  </div>\r\n</p-overlayPanel>\r\n\r\n<div\r\n  #buttonNameTooltip\r\n  class=\"button-name-tooltip\"\r\n  [class.show]=\"showButtonTooltip()\"\r\n  [style.top.px]=\"tooltipPosition().top\"\r\n  [style.left.px]=\"tooltipPosition().left\"\r\n>\r\n  <div class=\"flex flex-column gap-2 p-3 bg-white border-round-lg shadow-3\" style=\"min-width: 280px\">\r\n    <div class=\"flex flex-column gap-1\">\r\n      <label class=\"text-sm font-semibold text-gray-700\">Nome do Bot\u00E3o</label>\r\n      <input\r\n        #buttonNameInput\r\n        type=\"text\"\r\n        class=\"p-2 border-1 border-gray-300 border-round-md text-sm\"\r\n        placeholder=\"Ex: Aceitar Proposta\"\r\n        [(ngModel)]=\"buttonNameValue\"\r\n        (keydown.enter)=\"confirmButtonName()\"\r\n        (keydown.escape)=\"cancelButtonName()\"\r\n      />\r\n    </div>\r\n    <div class=\"flex flex-row gap-2 justify-content-end\">\r\n      <button\r\n        class=\"px-3 py-2 border-1 border-gray-300 bg-white text-gray-700 border-round-md cursor-pointer text-sm font-medium hover:bg-gray-100 transition-colors\"\r\n        (click)=\"cancelButtonName()\"\r\n      >\r\n        Cancelar\r\n      </button>\r\n      <button\r\n        class=\"px-3 py-2 border-none bg-blue-600 text-white border-round-md cursor-pointer text-sm font-medium hover:bg-blue-700 transition-colors\"\r\n        (click)=\"confirmButtonName()\"\r\n      >\r\n        Inserir\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":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-tooltip.ql-editing[data-mode=video]{transform:translate(40%)}: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 .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 .2s}:host ::ng-deep .blot-formatter__resize-handle{background:#eaeaea!important}:host ::ng-deep #kv-editor-preview{border-radius:0 0 6px 6px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper{font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:1.42;color:#000;padding:12px 15px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper p{margin:0;padding:0;white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper *{white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strong,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper b{font-weight:700!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper em,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper i{font-style:italic!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper u{text-decoration:underline!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper s,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strike{text-decoration:line-through!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-weight:700;margin:0;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1{font-size:2em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2{font-size:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3{font-size:1.17em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4{font-size:1em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5{font-size:.83em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-size:.67em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper a{color:#06c;text-decoration:underline}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper code{background-color:#f0f0f0;border-radius:3px;padding:2px 4px;font-family:monospace;font-size:85%}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre{background-color:#23241f;color:#f8f8f2;overflow:visible;border-radius:3px;padding:5px 10px;white-space:pre-wrap;margin-bottom:5px;margin-top:5px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre code{background-color:transparent;border-radius:0;color:inherit;font-size:100%;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ol,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ul{margin:0;padding-left:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper img{max-width:100%;height:auto}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table{width:100%;border-collapse:collapse;margin-bottom:1rem}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table td{border:1px solid #e5e7eb;padding:.5rem;text-align:left}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th{background-color:#f9fafb;font-weight:600}:ng-deep p{text-align:justify!important}::ng-deep .scrollstyle,::ng-deep .ql-editor{overflow-x:hidden}::ng-deep .scrollstyle::-webkit-scrollbar,::ng-deep .ql-editor::-webkit-scrollbar{width:6px}::ng-deep .scrollstyle::-webkit-scrollbar:hover,::ng-deep .ql-editor::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scrollstyle::-webkit-scrollbar-thumb,::ng-deep .ql-editor::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scrollstyle:hover::-webkit-scrollbar-thumb,::ng-deep .ql-editor:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scrollstyle::-webkit-scrollbar-track,::ng-deep .ql-editor::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}:host ::ng-deep .editor-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;display:flex;justify-content:center;align-items:center;z-index:100000;border-radius:inherit}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:after{background:#002542}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:before{background:#002542}::ng-deep .scroll-virtual{overflow-x:hidden}::ng-deep .scroll-virtual::-webkit-scrollbar{width:8px}::ng-deep .scroll-virtual::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scroll-virtual::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scroll-virtual:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scroll-virtual::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.option-dropdown{background-color:#333;transition:all ease-in .2s}.option-dropdown:hover{background-color:#444}.button-name-tooltip{position:fixed;z-index:10000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease-in-out;pointer-events:none}.button-name-tooltip.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.button-name-tooltip input{outline:none;transition:border-color .2s}.button-name-tooltip input:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a}.button-name-tooltip button{transition:all .2s}.button-name-tooltip button:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.button-name-tooltip button:active{transform:translateY(0)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i8$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i11.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: KvTagsComponent, selector: "kv-tags", inputs: ["tags", "hover", "clickable"], outputs: ["onClickTag"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvEditorComponent, selector: "kv-editor", inputs: { canvaHeigth: { classPropertyName: "canvaHeigth", publicName: "canvaHeigth", isSignal: false, isRequired: false, transformFunction: null }, contentType: { classPropertyName: "contentType", publicName: "contentType", isSignal: false, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: false, isRequired: false, transformFunction: null }, enablePreviewMode: { classPropertyName: "enablePreviewMode", publicName: "enablePreviewMode", isSignal: true, isRequired: false, transformFunction: null }, showVariableValuesInPreview: { classPropertyName: "showVariableValuesInPreview", publicName: "showVariableValuesInPreview", isSignal: true, isRequired: false, transformFunction: null }, relatorios: { classPropertyName: "relatorios", publicName: "relatorios", isSignal: true, isRequired: false, transformFunction: null }, idRelatorioInitial: { classPropertyName: "idRelatorioInitial", publicName: "idRelatorioInitial", isSignal: true, isRequired: false, transformFunction: null }, printButton: { classPropertyName: "printButton", publicName: "printButton", isSignal: true, isRequired: false, transformFunction: null }, labelEmptyDropdown: { classPropertyName: "labelEmptyDropdown", publicName: "labelEmptyDropdown", isSignal: true, isRequired: false, transformFunction: null }, instrucoesTemplate: { classPropertyName: "instrucoesTemplate", publicName: "instrucoesTemplate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabledEditor: { classPropertyName: "disabledEditor", publicName: "disabledEditor", isSignal: true, isRequired: false, transformFunction: null }, showHeaderButtons: { classPropertyName: "showHeaderButtons", publicName: "showHeaderButtons", isSignal: true, isRequired: false, transformFunction: null }, showAlphaCrmButtons: { classPropertyName: "showAlphaCrmButtons", publicName: "showAlphaCrmButtons", isSignal: true, isRequired: false, transformFunction: null }, enableButtonInsert: { classPropertyName: "enableButtonInsert", publicName: "enableButtonInsert", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", outputRaw: "outputRaw", outputHtml: "outputHtml", previewHtmlOutput: "previewHtmlOutput", onCustomButtonClick: "onCustomButtonClick", idRelatorioInitial: "idRelatorioInitialChange" }, providers: ComponentProviders(KvEditorComponent), viewQueries: [{ propertyName: "opVariables", first: true, predicate: ["opVariables"], descendants: true }, { propertyName: "mentionAnchor", first: true, predicate: ["mentionAnchor"], descendants: true }, { propertyName: "buttonNameTooltip", first: true, predicate: ["buttonNameTooltip"], descendants: true }, { propertyName: "buttonNameInput", first: true, predicate: ["buttonNameInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"kv-editor-container h-full w-full max-h-full flex flex-column overflow-hidden\"\r\n  [class.pointer-events-none]=\"disabledEditor()\"\r\n  [class.opacity-60]=\"disabledEditor()\"\r\n>\r\n  <div\r\n    #editor\r\n    id=\"kv-editor-toolbar\"\r\n    [ngClass]=\"{ 'error-border-toolbar': hasControlError() }\"\r\n    class=\"{{ showHeader() ? 'flex' : 'hidden' }} flex-column flex-initial\"\r\n  >\r\n    @if(showHeaderButtons()) {\r\n      @if(relatorios().length > 0) {\r\n        <div class=\"flex flex-row justify-content-between {{(readonly() || disabledEditor()) && 'pointer-events-none opacity-90'}}\">\r\n          <div class=\"flex flex-row gap-2\">\r\n            <div\r\n              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\"\r\n              (click)=\"op.toggle($event)\"\r\n            >\r\n              <span\r\n                class=\"material-symbols-outlined text-lg text-green-600 font-medium\"\r\n              >\r\n                contract\r\n              </span>\r\n              <span class=\"font-semibold text-xs text-gray-600\">{{\r\n                !clearedTemplate()\r\n                  ? relatorio()?.label || labelEmptyDropdown()\r\n                  : labelEmptyDropdown()\r\n              }}</span>\r\n              <span class=\"material-symbols-outlined text-lg\">\r\n                keyboard_arrow_down\r\n              </span>\r\n            </div>\r\n\r\n            @if(!clearedTemplate()) {\r\n            <div\r\n              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\"\r\n              (click)=\"clearTemplate()\"\r\n            >\r\n              <span\r\n                class=\"material-symbols-outlined text-lg text-orange-600 font-medium\"\r\n                [pTooltip]=\"'Limpar Template'\"\r\n              >\r\n                layers_clear\r\n              </span>\r\n            </div>\r\n            }\r\n\r\n            <div\r\n              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\"\r\n              (click)=\"showInstrucoes()\"\r\n            >\r\n              <span\r\n                class=\"material-symbols-outlined text-lg text-blue-600 font-medium\"\r\n              >\r\n                info\r\n              </span>\r\n              <span class=\"font-semibold text-xs text-gray-600\">Instru\u00E7\u00F5es</span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- @if(printButton()) {\r\n          <div\r\n            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\"\r\n            (click)=\"openRelatorio()\"\r\n          >\r\n            <span class=\"material-symbols-outlined text-lg font-medium\">\r\n              print\r\n            </span>\r\n            <span class=\"font-semibold text-xs text-gray-600\">Imprimir</span>\r\n          </div>\r\n          } -->\r\n        </div>\r\n\r\n        <p-divider class=\"w-full\"></p-divider>\r\n\r\n        }\r\n    }\r\n    \r\n\r\n    <div\r\n      class=\"flex flex-row align-items-center justify-content-between w-full flex-initial\"\r\n    >\r\n      @if(isLoading()) {\r\n\r\n      <div class=\"flex flex-row align-items-center gap-3 w-full\">\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"flex-row align-items-center flex-wrap gap-2 {{\r\n          isLoading() ? 'hidden' : 'flex'\r\n        }} w-full\"\r\n      >\r\n        <span class=\"ql-formats border-round-md\">\r\n          <select class=\"ql-font\">\r\n            <option value=\"roboto\">Roboto</option>\r\n            <option value=\"arial\">Arial</option>\r\n            <option value=\"times-new-roman\">Times New Roman</option>\r\n            <option value=\"monospace\">Monospace</option>\r\n            <option value=\"inter\">Inter</option>\r\n            <option selected>Sans Serif</option>\r\n            <option value=\"serif\">Serif</option>\r\n          </select>\r\n\r\n          <select class=\"ql-header\">\r\n            <option value=\"1\">Titulo</option>\r\n            <option value=\"2\">Subtitulo</option>\r\n            <option selected>Normal</option>\r\n          </select>\r\n\r\n          <span class=\"ql-format-group\">\r\n            <select title=\"Size\" class=\"ql-size\">\r\n              <option value=\"15px\">15px</option>\r\n              <option value=\"20px\">20px</option>\r\n              <option value=\"30px\">30px</option>\r\n              <option value=\"40px\">40px</option>\r\n              <option value=\"50px\">50px</option>\r\n              <option value=\"70px\">70px</option>\r\n              <option value=\"90px\">90px</option>\r\n            </select>\r\n          </span>\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-bold\" pTooltip=\"Negrito\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-italic\" pTooltip=\"It\u00E1lico\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-underline\" pTooltip=\"Sublinhado\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-strike\" pTooltip=\"Tachado\" tooltipPosition=\"top\"></button>\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <select class=\"ql-color\" pTooltip=\"Cor da fonte\" tooltipPosition=\"top\"></select>\r\n          <select class=\"ql-background\" pTooltip=\"Cor de fundo\" tooltipPosition=\"top\"></select>\r\n        </span>\r\n\r\n        @if(true) {\r\n        <!-- <p-divider layout=\"vertical\"></p-divider>\r\n\r\n      <span class=\"ql-formats border-round-md\">\r\n        <button class=\"ql-header\" value=\"1\"></button>\r\n        <button class=\"ql-header\" value=\"2\"></button>\r\n      </span> -->\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-link\" pTooltip=\"Inserir link\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-image\" pTooltip=\"Inserir imagem\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-video\" pTooltip=\"Inserir v\u00EDdeo\" tooltipPosition=\"top\"></button>\r\n\r\n          @if(enableButtonInsert()) {\r\n            <button id=\"insert-custom-button\" pTooltip=\"Inserir bot\u00E3o\" tooltipPosition=\"top\">\r\n              <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">buttons_alt</span>\r\n            </button>\r\n          }\r\n          \r\n          @if(showAlphaCrmButtons()) {\r\n            <button id=\"btn-alpha-aceitar\" pTooltip=\"Inserir bot\u00E3o Aceitar\" tooltipPosition=\"top\">\r\n              <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">variable_add</span>\r\n            </button>\r\n\r\n            <button id=\"btn-alpha-cancelar\" pTooltip=\"Inserir bot\u00E3o Cancelar\" tooltipPosition=\"top\">\r\n              <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">variable_remove</span>\r\n            </button>\r\n\r\n            <button id=\"btn-alpha-aceitar-assinar\" pTooltip=\"Inserir bot\u00E3o Aceitar e Assinar Contrato\" tooltipPosition=\"top\">\r\n              <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1px); font-size: 20px;\">new_label</span>\r\n            </button>\r\n          }\r\n\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-list\" value=\"ordered\" pTooltip=\"Lista ordenada\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-list\" value=\"bullet\" pTooltip=\"Lista com marcadores\" tooltipPosition=\"top\"></button>\r\n          <select class=\"ql-align\" pTooltip=\"Alinhamento\" tooltipPosition=\"top\"></select>\r\n        </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    style=\"height: 3px; border-top: none; border-bottom: none\"\r\n    [style.borderRight]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n    [style.borderLeft]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n  >\r\n    @if(isLoadingPdf()) {\r\n    <p-progressBar mode=\"indeterminate\" [style]=\"{ height: '3px' }\" />\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex flex-row flex-1 gap-0 overflow-auto\">\r\n    <div\r\n      id=\"kv-editor\"\r\n      class=\"overflow-auto flex-1 scrollstyle\"\r\n      [ngClass]=\"{\r\n        'error-border': hasControlError(),\r\n        'pointer-events-none opacity-60': isLoadingPdf()\r\n      }\"\r\n      [style.borderTop]=\"showHeader() ? 'none' : '1px solid #e5e7eb'\"\r\n      [style.borderRight]=\"enablePreviewMode() ? 'none' : '1px solid #e5e7eb'\"\r\n    ></div>\r\n\r\n    @if(enablePreviewMode()) {\r\n    <div class=\"flex flex-column flex-1\">\r\n      <div \r\n        class=\"flex align-items-center gap-2 px-3 py-2\" \r\n        [style.borderRight]=\"'1px solid #e5e7eb'\"\r\n        [style.borderLeft]=\"'1px solid #e5e7eb'\"\r\n      >\r\n        <span class=\"material-symbols-outlined text-blue-600 text-lg\">visibility</span>\r\n        <span class=\"font-semibold text-gray-700 text-sm\">Preview</span>\r\n      </div>\r\n      \r\n      <div\r\n        id=\"kv-editor-preview\"\r\n        class=\"overflow-auto flex-1 scrollstyle\"\r\n        [innerHTML]=\"getPreviewContent\"\r\n        [style.border]=\"'1px solid #e5e7eb'\"\r\n      ></div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n</div>\r\n<kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n\r\n<!-- <link href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\" rel=\"stylesheet\" /> -->\r\n<link href=\"https://fonts.googleapis.com/css?family=Roboto\" rel=\"stylesheet\" />\r\n<script src=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js\"></script>\r\n<script src=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js\"></script>\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css\"\r\n/>\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css\"\r\n/>\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css\"\r\n/>\r\n\r\n<p-overlayPanel #op styleClass=\"overflow-hidden\">\r\n  <div\r\n    class=\"grid m-0 gap-2 p-2 max-w-20rem overflow-y-auto scrollstyle\"\r\n    style=\"max-height: 16rem\"\r\n  >\r\n    @for(item of relatorios(); track $index) {\r\n    <div\r\n      class=\"col-12 cursor-pointer hover:bg-gray-100 transition-colors transition-duration-200 border-round-lg shadow-2 flex flex-column gap-2\"\r\n      (click)=\"setRelatorio(item)\"\r\n    >\r\n      <div\r\n        class=\"flex flex-row align-items-center gap-2 justify-content-between\"\r\n      >\r\n        <span class=\"text-sm font-medium w-full\">{{ item.label }}</span>\r\n\r\n        <kv-tags\r\n          class=\"transition-opacity transition-duration-300 {{\r\n            item?.id == idRelatorioSelected() ? 'opacity-100' : 'opacity-0'\r\n          }}\"\r\n          [tags]=\"[{ label: 'Selecionado', severity: 'primary' }]\"\r\n        ></kv-tags>\r\n      </div>\r\n      <span class=\"text-xs text-gray-500\">{{ item.descricao }}</span>\r\n    </div>\r\n    }\r\n  </div>\r\n</p-overlayPanel>\r\n\r\n<div class=\"kv-editor-container flex flex-column overflow-hidden relative\">\r\n  <div\r\n    #mentionAnchor\r\n    style=\"position: fixed; width: 1px; height: 1px; opacity: 0\"\r\n  ></div>\r\n</div>\r\n\r\n<p-overlayPanel\r\n  #opVariables\r\n  [appendTo]=\"'body'\"\r\n  (onHide)=\"closeVariablesPanel()\"\r\n>\r\n  <div\r\n    class=\"flex flex-column gap-1 p-1 overflow-y-auto scroll-virtual border-round-lg\"\r\n    style=\"max-height: 250px; min-width: 250px; background-color: #333333\"\r\n  >\r\n    @for(variable of filteredVariables(); track variable.id) {\r\n    <div\r\n      class=\"p-2 cursor-pointer transition-colors transition-duration-200 border-round-lg text-sm text-white option-dropdown\"\r\n      (click)=\"selectVariableFromPanel(variable)\"\r\n    >\r\n      {{ variable.descricao }} (\r\n      <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n    </div>\r\n    } @empty {\r\n    <div class=\"p-2 text-sm text-gray-500\">Nenhuma vari\u00E1vel encontrada.</div>\r\n    }\r\n  </div>\r\n</p-overlayPanel>\r\n\r\n<div\r\n  #buttonNameTooltip\r\n  class=\"button-name-tooltip\"\r\n  [class.show]=\"showButtonTooltip()\"\r\n  [style.top.px]=\"tooltipPosition().top\"\r\n  [style.left.px]=\"tooltipPosition().left\"\r\n>\r\n  <div class=\"flex flex-column gap-2 p-3 bg-white border-round-lg shadow-3\" style=\"min-width: 280px\">\r\n    <div class=\"flex flex-column gap-1\">\r\n      <label class=\"text-sm font-semibold text-gray-700\">Nome do Bot\u00E3o</label>\r\n      <input\r\n        #buttonNameInput\r\n        type=\"text\"\r\n        class=\"p-2 border-1 border-gray-300 border-round-md text-sm\"\r\n        placeholder=\"Ex: Aceitar Proposta\"\r\n        [(ngModel)]=\"buttonNameValue\"\r\n        (keydown.enter)=\"confirmButtonName()\"\r\n        (keydown.escape)=\"cancelButtonName()\"\r\n      />\r\n    </div>\r\n    <div class=\"flex flex-row gap-2 justify-content-end\">\r\n      <button\r\n        class=\"px-3 py-2 border-1 border-gray-300 bg-white text-gray-700 border-round-md cursor-pointer text-sm font-medium hover:bg-gray-100 transition-colors\"\r\n        (click)=\"cancelButtonName()\"\r\n      >\r\n        Cancelar\r\n      </button>\r\n      <button\r\n        class=\"px-3 py-2 border-none bg-blue-600 text-white border-round-md cursor-pointer text-sm font-medium hover:bg-blue-700 transition-colors\"\r\n        (click)=\"confirmButtonName()\"\r\n      >\r\n        Inserir\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":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-tooltip.ql-editing[data-mode=video]{transform:translate(40%)}: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 .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 .2s}:host ::ng-deep .blot-formatter__resize-handle{background:#eaeaea!important}:host ::ng-deep #kv-editor-preview{border-radius:0 0 6px 6px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper{font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:1.42;color:#000;padding:12px 15px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper p{margin:0;padding:0;white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper *{white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strong,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper b{font-weight:700!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper em,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper i{font-style:italic!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper u{text-decoration:underline!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper s,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strike{text-decoration:line-through!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-weight:700;margin:0;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1{font-size:2em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2{font-size:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3{font-size:1.17em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4{font-size:1em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5{font-size:.83em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-size:.67em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper a{color:#06c;text-decoration:underline}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper code{background-color:#f0f0f0;border-radius:3px;padding:2px 4px;font-family:monospace;font-size:85%}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre{background-color:#23241f;color:#f8f8f2;overflow:visible;border-radius:3px;padding:5px 10px;white-space:pre-wrap;margin-bottom:5px;margin-top:5px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre code{background-color:transparent;border-radius:0;color:inherit;font-size:100%;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ol,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ul{margin:0;padding-left:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper img{max-width:100%;height:auto}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table{width:100%;border-collapse:collapse;margin-bottom:1rem}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table td{border:1px solid #e5e7eb;padding:.5rem;text-align:left}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th{background-color:#f9fafb;font-weight:600}:ng-deep p{text-align:justify!important}::ng-deep .scrollstyle,::ng-deep .ql-editor{overflow-x:hidden}::ng-deep .scrollstyle::-webkit-scrollbar,::ng-deep .ql-editor::-webkit-scrollbar{width:6px}::ng-deep .scrollstyle::-webkit-scrollbar:hover,::ng-deep .ql-editor::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scrollstyle::-webkit-scrollbar-thumb,::ng-deep .ql-editor::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scrollstyle:hover::-webkit-scrollbar-thumb,::ng-deep .ql-editor:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scrollstyle::-webkit-scrollbar-track,::ng-deep .ql-editor::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}:host ::ng-deep .editor-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;display:flex;justify-content:center;align-items:center;z-index:100000;border-radius:inherit}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:after{background:#002542}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:before{background:#002542}::ng-deep .scroll-virtual{overflow-x:hidden}::ng-deep .scroll-virtual::-webkit-scrollbar{width:8px}::ng-deep .scroll-virtual::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scroll-virtual::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scroll-virtual:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scroll-virtual::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.option-dropdown{background-color:#333;transition:all ease-in .2s}.option-dropdown:hover{background-color:#444}.button-name-tooltip{position:fixed;z-index:10000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease-in-out;pointer-events:none}.button-name-tooltip.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.button-name-tooltip input{outline:none;transition:border-color .2s}.button-name-tooltip input:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a}.button-name-tooltip button{transition:all .2s}.button-name-tooltip button:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.button-name-tooltip button:active{transform:translateY(0)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i8$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i11.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: KvTagsComponent, selector: "kv-tags", inputs: ["tags", "hover", "clickable"], outputs: ["onClickTag"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-editor', providers: ComponentProviders(KvEditorComponent), template: "<div\r\n  class=\"kv-editor-container h-full w-full max-h-full flex flex-column overflow-hidden\"\r\n>\r\n  <div\r\n    #editor\r\n    id=\"kv-editor-toolbar\"\r\n    [ngClass]=\"{ 'error-border-toolbar': hasControlError() }\"\r\n    class=\"{{ showHeader() ? 'flex' : 'hidden' }} flex-column flex-initial\"\r\n  >\r\n    @if(relatorios().length > 0) {\r\n    <div class=\"flex flex-row justify-content-between {{readonly() && 'pointer-events-none opacity-90'}}\">\r\n      <div class=\"flex flex-row gap-2\">\r\n        <div\r\n          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\"\r\n          (click)=\"op.toggle($event)\"\r\n        >\r\n          <span\r\n            class=\"material-symbols-outlined text-lg text-green-600 font-medium\"\r\n          >\r\n            contract\r\n          </span>\r\n          <span class=\"font-semibold text-xs text-gray-600\">{{\r\n            !clearedTemplate()\r\n              ? relatorio()?.label || labelEmptyDropdown()\r\n              : labelEmptyDropdown()\r\n          }}</span>\r\n          <span class=\"material-symbols-outlined text-lg\">\r\n            keyboard_arrow_down\r\n          </span>\r\n        </div>\r\n\r\n        @if(!clearedTemplate()) {\r\n        <div\r\n          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\"\r\n          (click)=\"clearTemplate()\"\r\n        >\r\n          <span\r\n            class=\"material-symbols-outlined text-lg text-orange-600 font-medium\"\r\n            [pTooltip]=\"'Limpar Template'\"\r\n          >\r\n            layers_clear\r\n          </span>\r\n        </div>\r\n        }\r\n\r\n        <div\r\n          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\"\r\n          (click)=\"showInstrucoes()\"\r\n        >\r\n          <span\r\n            class=\"material-symbols-outlined text-lg text-blue-600 font-medium\"\r\n          >\r\n            info\r\n          </span>\r\n          <span class=\"font-semibold text-xs text-gray-600\">Instru\u00E7\u00F5es</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- @if(printButton()) {\r\n      <div\r\n        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\"\r\n        (click)=\"openRelatorio()\"\r\n      >\r\n        <span class=\"material-symbols-outlined text-lg font-medium\">\r\n          print\r\n        </span>\r\n        <span class=\"font-semibold text-xs text-gray-600\">Imprimir</span>\r\n      </div>\r\n      } -->\r\n    </div>\r\n\r\n    <p-divider class=\"w-full\"></p-divider>\r\n\r\n    }\r\n\r\n    <div\r\n      class=\"flex flex-row align-items-center justify-content-between w-full flex-initial\"\r\n    >\r\n      @if(isLoading()) {\r\n\r\n      <div class=\"flex flex-row align-items-center gap-3 w-full\">\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"flex-row align-items-center flex-wrap gap-2 {{\r\n          isLoading() ? 'hidden' : 'flex'\r\n        }} w-full\"\r\n      >\r\n        <span class=\"ql-formats border-round-md\">\r\n          <select class=\"ql-font\">\r\n            <option value=\"roboto\">Roboto</option>\r\n            <option value=\"arial\">Arial</option>\r\n            <option value=\"times-new-roman\">Times New Roman</option>\r\n            <option value=\"monospace\">Monospace</option>\r\n            <option value=\"inter\">Inter</option>\r\n            <option selected>Sans Serif</option>\r\n            <option value=\"serif\">Serif</option>\r\n          </select>\r\n\r\n          <select class=\"ql-header\">\r\n            <option value=\"1\">Titulo</option>\r\n            <option value=\"2\">Subtitulo</option>\r\n            <option selected>Normal</option>\r\n          </select>\r\n\r\n          <span class=\"ql-format-group\">\r\n            <select title=\"Size\" class=\"ql-size\">\r\n              <option value=\"15px\">15px</option>\r\n              <option value=\"20px\">20px</option>\r\n              <option value=\"30px\">30px</option>\r\n              <option value=\"40px\">40px</option>\r\n              <option value=\"50px\">50px</option>\r\n              <option value=\"70px\">70px</option>\r\n              <option value=\"90px\">90px</option>\r\n            </select>\r\n          </span>\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-bold\" pTooltip=\"Negrito\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-italic\" pTooltip=\"It\u00E1lico\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-underline\" pTooltip=\"Sublinhado\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-strike\" pTooltip=\"Tachado\" tooltipPosition=\"top\"></button>\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <select class=\"ql-color\" pTooltip=\"Cor da fonte\" tooltipPosition=\"top\"></select>\r\n          <select class=\"ql-background\" pTooltip=\"Cor de fundo\" tooltipPosition=\"top\"></select>\r\n        </span>\r\n\r\n        @if(true) {\r\n        <!-- <p-divider layout=\"vertical\"></p-divider>\r\n\r\n      <span class=\"ql-formats border-round-md\">\r\n        <button class=\"ql-header\" value=\"1\"></button>\r\n        <button class=\"ql-header\" value=\"2\"></button>\r\n      </span> -->\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-link\" pTooltip=\"Inserir link\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-image\" pTooltip=\"Inserir imagem\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-video\" pTooltip=\"Inserir v\u00EDdeo\" tooltipPosition=\"top\"></button>\r\n          <button id=\"insert-button\" pTooltip=\"Inserir bot\u00E3o\" tooltipPosition=\"top\">\r\n            <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">buttons_alt</span>\r\n          </button>\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-list\" value=\"ordered\" pTooltip=\"Lista ordenada\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-list\" value=\"bullet\" pTooltip=\"Lista com marcadores\" tooltipPosition=\"top\"></button>\r\n          <select class=\"ql-align\" pTooltip=\"Alinhamento\" tooltipPosition=\"top\"></select>\r\n        </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    style=\"height: 3px; border-top: none; border-bottom: none\"\r\n    [style.borderRight]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n    [style.borderLeft]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n  >\r\n    @if(isLoadingPdf()) {\r\n    <p-progressBar mode=\"indeterminate\" [style]=\"{ height: '3px' }\" />\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex flex-row flex-1 gap-0 overflow-auto\">\r\n    <div\r\n      id=\"kv-editor\"\r\n      class=\"overflow-auto flex-1 scrollstyle\"\r\n      [ngClass]=\"{\r\n        'error-border': hasControlError(),\r\n        'pointer-events-none opacity-60': isLoadingPdf()\r\n      }\"\r\n      [style.borderTop]=\"showHeader() ? 'none' : '1px solid #e5e7eb'\"\r\n      [style.borderRight]=\"enablePreviewMode() ? 'none' : '1px solid #e5e7eb'\"\r\n    ></div>\r\n\r\n    @if(enablePreviewMode()) {\r\n    <div class=\"flex flex-column flex-1\">\r\n      <div \r\n        class=\"flex align-items-center gap-2 px-3 py-2\" \r\n        [style.borderRight]=\"'1px solid #e5e7eb'\"\r\n        [style.borderLeft]=\"'1px solid #e5e7eb'\"\r\n      >\r\n        <span class=\"material-symbols-outlined text-blue-600 text-lg\">visibility</span>\r\n        <span class=\"font-semibold text-gray-700 text-sm\">Preview</span>\r\n      </div>\r\n      \r\n      <div\r\n        id=\"kv-editor-preview\"\r\n        class=\"overflow-auto flex-1 scrollstyle\"\r\n        [innerHTML]=\"getPreviewContent\"\r\n        [style.border]=\"'1px solid #e5e7eb'\"\r\n      ></div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n</div>\r\n<kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n\r\n<!-- <link href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\" rel=\"stylesheet\" /> -->\r\n<link href=\"https://fonts.googleapis.com/css?family=Roboto\" rel=\"stylesheet\" />\r\n<script src=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js\"></script>\r\n<script src=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js\"></script>\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css\"\r\n/>\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css\"\r\n/>\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css\"\r\n/>\r\n\r\n<p-overlayPanel #op styleClass=\"overflow-hidden\">\r\n  <div\r\n    class=\"grid m-0 gap-2 p-2 max-w-20rem overflow-y-auto scrollstyle\"\r\n    style=\"max-height: 16rem\"\r\n  >\r\n    @for(item of relatorios(); track $index) {\r\n    <div\r\n      class=\"col-12 cursor-pointer hover:bg-gray-100 transition-colors transition-duration-200 border-round-lg shadow-2 flex flex-column gap-2\"\r\n      (click)=\"setRelatorio(item)\"\r\n    >\r\n      <div\r\n        class=\"flex flex-row align-items-center gap-2 justify-content-between\"\r\n      >\r\n        <span class=\"text-sm font-medium w-full\">{{ item.label }}</span>\r\n\r\n        <kv-tags\r\n          class=\"transition-opacity transition-duration-300 {{\r\n            item?.id == idRelatorioSelected() ? 'opacity-100' : 'opacity-0'\r\n          }}\"\r\n          [tags]=\"[{ label: 'Selecionado', severity: 'primary' }]\"\r\n        ></kv-tags>\r\n      </div>\r\n      <span class=\"text-xs text-gray-500\">{{ item.descricao }}</span>\r\n    </div>\r\n    }\r\n  </div>\r\n</p-overlayPanel>\r\n\r\n<div class=\"kv-editor-container flex flex-column overflow-hidden relative\">\r\n  <div\r\n    #mentionAnchor\r\n    style=\"position: fixed; width: 1px; height: 1px; opacity: 0\"\r\n  ></div>\r\n</div>\r\n\r\n<p-overlayPanel\r\n  #opVariables\r\n  [appendTo]=\"'body'\"\r\n  (onHide)=\"closeVariablesPanel()\"\r\n>\r\n  <div\r\n    class=\"flex flex-column gap-1 p-1 overflow-y-auto scroll-virtual border-round-lg\"\r\n    style=\"max-height: 250px; min-width: 250px; background-color: #333333\"\r\n  >\r\n    @for(variable of filteredVariables(); track variable.id) {\r\n    <div\r\n      class=\"p-2 cursor-pointer transition-colors transition-duration-200 border-round-lg text-sm text-white option-dropdown\"\r\n      (click)=\"selectVariableFromPanel(variable)\"\r\n    >\r\n      {{ variable.descricao }} (\r\n      <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n    </div>\r\n    } @empty {\r\n    <div class=\"p-2 text-sm text-gray-500\">Nenhuma vari\u00E1vel encontrada.</div>\r\n    }\r\n  </div>\r\n</p-overlayPanel>\r\n\r\n<div\r\n  #buttonNameTooltip\r\n  class=\"button-name-tooltip\"\r\n  [class.show]=\"showButtonTooltip()\"\r\n  [style.top.px]=\"tooltipPosition().top\"\r\n  [style.left.px]=\"tooltipPosition().left\"\r\n>\r\n  <div class=\"flex flex-column gap-2 p-3 bg-white border-round-lg shadow-3\" style=\"min-width: 280px\">\r\n    <div class=\"flex flex-column gap-1\">\r\n      <label class=\"text-sm font-semibold text-gray-700\">Nome do Bot\u00E3o</label>\r\n      <input\r\n        #buttonNameInput\r\n        type=\"text\"\r\n        class=\"p-2 border-1 border-gray-300 border-round-md text-sm\"\r\n        placeholder=\"Ex: Aceitar Proposta\"\r\n        [(ngModel)]=\"buttonNameValue\"\r\n        (keydown.enter)=\"confirmButtonName()\"\r\n        (keydown.escape)=\"cancelButtonName()\"\r\n      />\r\n    </div>\r\n    <div class=\"flex flex-row gap-2 justify-content-end\">\r\n      <button\r\n        class=\"px-3 py-2 border-1 border-gray-300 bg-white text-gray-700 border-round-md cursor-pointer text-sm font-medium hover:bg-gray-100 transition-colors\"\r\n        (click)=\"cancelButtonName()\"\r\n      >\r\n        Cancelar\r\n      </button>\r\n      <button\r\n        class=\"px-3 py-2 border-none bg-blue-600 text-white border-round-md cursor-pointer text-sm font-medium hover:bg-blue-700 transition-colors\"\r\n        (click)=\"confirmButtonName()\"\r\n      >\r\n        Inserir\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":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-tooltip.ql-editing[data-mode=video]{transform:translate(40%)}: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 .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 .2s}:host ::ng-deep .blot-formatter__resize-handle{background:#eaeaea!important}:host ::ng-deep #kv-editor-preview{border-radius:0 0 6px 6px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper{font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:1.42;color:#000;padding:12px 15px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper p{margin:0;padding:0;white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper *{white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strong,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper b{font-weight:700!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper em,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper i{font-style:italic!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper u{text-decoration:underline!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper s,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strike{text-decoration:line-through!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-weight:700;margin:0;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1{font-size:2em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2{font-size:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3{font-size:1.17em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4{font-size:1em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5{font-size:.83em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-size:.67em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper a{color:#06c;text-decoration:underline}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper code{background-color:#f0f0f0;border-radius:3px;padding:2px 4px;font-family:monospace;font-size:85%}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre{background-color:#23241f;color:#f8f8f2;overflow:visible;border-radius:3px;padding:5px 10px;white-space:pre-wrap;margin-bottom:5px;margin-top:5px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre code{background-color:transparent;border-radius:0;color:inherit;font-size:100%;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ol,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ul{margin:0;padding-left:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper img{max-width:100%;height:auto}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table{width:100%;border-collapse:collapse;margin-bottom:1rem}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table td{border:1px solid #e5e7eb;padding:.5rem;text-align:left}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th{background-color:#f9fafb;font-weight:600}:ng-deep p{text-align:justify!important}::ng-deep .scrollstyle,::ng-deep .ql-editor{overflow-x:hidden}::ng-deep .scrollstyle::-webkit-scrollbar,::ng-deep .ql-editor::-webkit-scrollbar{width:6px}::ng-deep .scrollstyle::-webkit-scrollbar:hover,::ng-deep .ql-editor::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scrollstyle::-webkit-scrollbar-thumb,::ng-deep .ql-editor::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scrollstyle:hover::-webkit-scrollbar-thumb,::ng-deep .ql-editor:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scrollstyle::-webkit-scrollbar-track,::ng-deep .ql-editor::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}:host ::ng-deep .editor-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;display:flex;justify-content:center;align-items:center;z-index:100000;border-radius:inherit}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:after{background:#002542}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:before{background:#002542}::ng-deep .scroll-virtual{overflow-x:hidden}::ng-deep .scroll-virtual::-webkit-scrollbar{width:8px}::ng-deep .scroll-virtual::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scroll-virtual::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scroll-virtual:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scroll-virtual::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.option-dropdown{background-color:#333;transition:all ease-in .2s}.option-dropdown:hover{background-color:#444}.button-name-tooltip{position:fixed;z-index:10000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease-in-out;pointer-events:none}.button-name-tooltip.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.button-name-tooltip input{outline:none;transition:border-color .2s}.button-name-tooltip input:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a}.button-name-tooltip button{transition:all .2s}.button-name-tooltip button:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.button-name-tooltip button:active{transform:translateY(0)}\n"] }]
+            args: [{ selector: 'kv-editor', providers: ComponentProviders(KvEditorComponent), template: "<div\r\n  class=\"kv-editor-container h-full w-full max-h-full flex flex-column overflow-hidden\"\r\n  [class.pointer-events-none]=\"disabledEditor()\"\r\n  [class.opacity-60]=\"disabledEditor()\"\r\n>\r\n  <div\r\n    #editor\r\n    id=\"kv-editor-toolbar\"\r\n    [ngClass]=\"{ 'error-border-toolbar': hasControlError() }\"\r\n    class=\"{{ showHeader() ? 'flex' : 'hidden' }} flex-column flex-initial\"\r\n  >\r\n    @if(showHeaderButtons()) {\r\n      @if(relatorios().length > 0) {\r\n        <div class=\"flex flex-row justify-content-between {{(readonly() || disabledEditor()) && 'pointer-events-none opacity-90'}}\">\r\n          <div class=\"flex flex-row gap-2\">\r\n            <div\r\n              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\"\r\n              (click)=\"op.toggle($event)\"\r\n            >\r\n              <span\r\n                class=\"material-symbols-outlined text-lg text-green-600 font-medium\"\r\n              >\r\n                contract\r\n              </span>\r\n              <span class=\"font-semibold text-xs text-gray-600\">{{\r\n                !clearedTemplate()\r\n                  ? relatorio()?.label || labelEmptyDropdown()\r\n                  : labelEmptyDropdown()\r\n              }}</span>\r\n              <span class=\"material-symbols-outlined text-lg\">\r\n                keyboard_arrow_down\r\n              </span>\r\n            </div>\r\n\r\n            @if(!clearedTemplate()) {\r\n            <div\r\n              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\"\r\n              (click)=\"clearTemplate()\"\r\n            >\r\n              <span\r\n                class=\"material-symbols-outlined text-lg text-orange-600 font-medium\"\r\n                [pTooltip]=\"'Limpar Template'\"\r\n              >\r\n                layers_clear\r\n              </span>\r\n            </div>\r\n            }\r\n\r\n            <div\r\n              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\"\r\n              (click)=\"showInstrucoes()\"\r\n            >\r\n              <span\r\n                class=\"material-symbols-outlined text-lg text-blue-600 font-medium\"\r\n              >\r\n                info\r\n              </span>\r\n              <span class=\"font-semibold text-xs text-gray-600\">Instru\u00E7\u00F5es</span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- @if(printButton()) {\r\n          <div\r\n            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\"\r\n            (click)=\"openRelatorio()\"\r\n          >\r\n            <span class=\"material-symbols-outlined text-lg font-medium\">\r\n              print\r\n            </span>\r\n            <span class=\"font-semibold text-xs text-gray-600\">Imprimir</span>\r\n          </div>\r\n          } -->\r\n        </div>\r\n\r\n        <p-divider class=\"w-full\"></p-divider>\r\n\r\n        }\r\n    }\r\n    \r\n\r\n    <div\r\n      class=\"flex flex-row align-items-center justify-content-between w-full flex-initial\"\r\n    >\r\n      @if(isLoading()) {\r\n\r\n      <div class=\"flex flex-row align-items-center gap-3 w-full\">\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n\r\n        <p-skeleton\r\n          styleClass=\"w-6rem\"\r\n          [style]=\"{ height: '2rem' }\"\r\n        ></p-skeleton>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"flex-row align-items-center flex-wrap gap-2 {{\r\n          isLoading() ? 'hidden' : 'flex'\r\n        }} w-full\"\r\n      >\r\n        <span class=\"ql-formats border-round-md\">\r\n          <select class=\"ql-font\">\r\n            <option value=\"roboto\">Roboto</option>\r\n            <option value=\"arial\">Arial</option>\r\n            <option value=\"times-new-roman\">Times New Roman</option>\r\n            <option value=\"monospace\">Monospace</option>\r\n            <option value=\"inter\">Inter</option>\r\n            <option selected>Sans Serif</option>\r\n            <option value=\"serif\">Serif</option>\r\n          </select>\r\n\r\n          <select class=\"ql-header\">\r\n            <option value=\"1\">Titulo</option>\r\n            <option value=\"2\">Subtitulo</option>\r\n            <option selected>Normal</option>\r\n          </select>\r\n\r\n          <span class=\"ql-format-group\">\r\n            <select title=\"Size\" class=\"ql-size\">\r\n              <option value=\"15px\">15px</option>\r\n              <option value=\"20px\">20px</option>\r\n              <option value=\"30px\">30px</option>\r\n              <option value=\"40px\">40px</option>\r\n              <option value=\"50px\">50px</option>\r\n              <option value=\"70px\">70px</option>\r\n              <option value=\"90px\">90px</option>\r\n            </select>\r\n          </span>\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-bold\" pTooltip=\"Negrito\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-italic\" pTooltip=\"It\u00E1lico\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-underline\" pTooltip=\"Sublinhado\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-strike\" pTooltip=\"Tachado\" tooltipPosition=\"top\"></button>\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <select class=\"ql-color\" pTooltip=\"Cor da fonte\" tooltipPosition=\"top\"></select>\r\n          <select class=\"ql-background\" pTooltip=\"Cor de fundo\" tooltipPosition=\"top\"></select>\r\n        </span>\r\n\r\n        @if(true) {\r\n        <!-- <p-divider layout=\"vertical\"></p-divider>\r\n\r\n      <span class=\"ql-formats border-round-md\">\r\n        <button class=\"ql-header\" value=\"1\"></button>\r\n        <button class=\"ql-header\" value=\"2\"></button>\r\n      </span> -->\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-link\" pTooltip=\"Inserir link\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-image\" pTooltip=\"Inserir imagem\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-video\" pTooltip=\"Inserir v\u00EDdeo\" tooltipPosition=\"top\"></button>\r\n\r\n          @if(enableButtonInsert()) {\r\n            <button id=\"insert-custom-button\" pTooltip=\"Inserir bot\u00E3o\" tooltipPosition=\"top\">\r\n              <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">buttons_alt</span>\r\n            </button>\r\n          }\r\n          \r\n          @if(showAlphaCrmButtons()) {\r\n            <button id=\"btn-alpha-aceitar\" pTooltip=\"Inserir bot\u00E3o Aceitar\" tooltipPosition=\"top\">\r\n              <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">variable_add</span>\r\n            </button>\r\n\r\n            <button id=\"btn-alpha-cancelar\" pTooltip=\"Inserir bot\u00E3o Cancelar\" tooltipPosition=\"top\">\r\n              <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">variable_remove</span>\r\n            </button>\r\n\r\n            <button id=\"btn-alpha-aceitar-assinar\" pTooltip=\"Inserir bot\u00E3o Aceitar e Assinar Contrato\" tooltipPosition=\"top\">\r\n              <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1px); font-size: 20px;\">new_label</span>\r\n            </button>\r\n          }\r\n\r\n        </span>\r\n\r\n        <p-divider layout=\"vertical\"></p-divider>\r\n\r\n        <span class=\"ql-formats border-round-md\">\r\n          <button class=\"ql-list\" value=\"ordered\" pTooltip=\"Lista ordenada\" tooltipPosition=\"top\"></button>\r\n          <button class=\"ql-list\" value=\"bullet\" pTooltip=\"Lista com marcadores\" tooltipPosition=\"top\"></button>\r\n          <select class=\"ql-align\" pTooltip=\"Alinhamento\" tooltipPosition=\"top\"></select>\r\n        </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    style=\"height: 3px; border-top: none; border-bottom: none\"\r\n    [style.borderRight]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n    [style.borderLeft]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n  >\r\n    @if(isLoadingPdf()) {\r\n    <p-progressBar mode=\"indeterminate\" [style]=\"{ height: '3px' }\" />\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex flex-row flex-1 gap-0 overflow-auto\">\r\n    <div\r\n      id=\"kv-editor\"\r\n      class=\"overflow-auto flex-1 scrollstyle\"\r\n      [ngClass]=\"{\r\n        'error-border': hasControlError(),\r\n        'pointer-events-none opacity-60': isLoadingPdf()\r\n      }\"\r\n      [style.borderTop]=\"showHeader() ? 'none' : '1px solid #e5e7eb'\"\r\n      [style.borderRight]=\"enablePreviewMode() ? 'none' : '1px solid #e5e7eb'\"\r\n    ></div>\r\n\r\n    @if(enablePreviewMode()) {\r\n    <div class=\"flex flex-column flex-1\">\r\n      <div \r\n        class=\"flex align-items-center gap-2 px-3 py-2\" \r\n        [style.borderRight]=\"'1px solid #e5e7eb'\"\r\n        [style.borderLeft]=\"'1px solid #e5e7eb'\"\r\n      >\r\n        <span class=\"material-symbols-outlined text-blue-600 text-lg\">visibility</span>\r\n        <span class=\"font-semibold text-gray-700 text-sm\">Preview</span>\r\n      </div>\r\n      \r\n      <div\r\n        id=\"kv-editor-preview\"\r\n        class=\"overflow-auto flex-1 scrollstyle\"\r\n        [innerHTML]=\"getPreviewContent\"\r\n        [style.border]=\"'1px solid #e5e7eb'\"\r\n      ></div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n</div>\r\n<kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n\r\n<!-- <link href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\" rel=\"stylesheet\" /> -->\r\n<link href=\"https://fonts.googleapis.com/css?family=Roboto\" rel=\"stylesheet\" />\r\n<script src=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js\"></script>\r\n<script src=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js\"></script>\r\n\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css\"\r\n/>\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css\"\r\n/>\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css\"\r\n/>\r\n\r\n<p-overlayPanel #op styleClass=\"overflow-hidden\">\r\n  <div\r\n    class=\"grid m-0 gap-2 p-2 max-w-20rem overflow-y-auto scrollstyle\"\r\n    style=\"max-height: 16rem\"\r\n  >\r\n    @for(item of relatorios(); track $index) {\r\n    <div\r\n      class=\"col-12 cursor-pointer hover:bg-gray-100 transition-colors transition-duration-200 border-round-lg shadow-2 flex flex-column gap-2\"\r\n      (click)=\"setRelatorio(item)\"\r\n    >\r\n      <div\r\n        class=\"flex flex-row align-items-center gap-2 justify-content-between\"\r\n      >\r\n        <span class=\"text-sm font-medium w-full\">{{ item.label }}</span>\r\n\r\n        <kv-tags\r\n          class=\"transition-opacity transition-duration-300 {{\r\n            item?.id == idRelatorioSelected() ? 'opacity-100' : 'opacity-0'\r\n          }}\"\r\n          [tags]=\"[{ label: 'Selecionado', severity: 'primary' }]\"\r\n        ></kv-tags>\r\n      </div>\r\n      <span class=\"text-xs text-gray-500\">{{ item.descricao }}</span>\r\n    </div>\r\n    }\r\n  </div>\r\n</p-overlayPanel>\r\n\r\n<div class=\"kv-editor-container flex flex-column overflow-hidden relative\">\r\n  <div\r\n    #mentionAnchor\r\n    style=\"position: fixed; width: 1px; height: 1px; opacity: 0\"\r\n  ></div>\r\n</div>\r\n\r\n<p-overlayPanel\r\n  #opVariables\r\n  [appendTo]=\"'body'\"\r\n  (onHide)=\"closeVariablesPanel()\"\r\n>\r\n  <div\r\n    class=\"flex flex-column gap-1 p-1 overflow-y-auto scroll-virtual border-round-lg\"\r\n    style=\"max-height: 250px; min-width: 250px; background-color: #333333\"\r\n  >\r\n    @for(variable of filteredVariables(); track variable.id) {\r\n    <div\r\n      class=\"p-2 cursor-pointer transition-colors transition-duration-200 border-round-lg text-sm text-white option-dropdown\"\r\n      (click)=\"selectVariableFromPanel(variable)\"\r\n    >\r\n      {{ variable.descricao }} (\r\n      <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n    </div>\r\n    } @empty {\r\n    <div class=\"p-2 text-sm text-gray-500\">Nenhuma vari\u00E1vel encontrada.</div>\r\n    }\r\n  </div>\r\n</p-overlayPanel>\r\n\r\n<div\r\n  #buttonNameTooltip\r\n  class=\"button-name-tooltip\"\r\n  [class.show]=\"showButtonTooltip()\"\r\n  [style.top.px]=\"tooltipPosition().top\"\r\n  [style.left.px]=\"tooltipPosition().left\"\r\n>\r\n  <div class=\"flex flex-column gap-2 p-3 bg-white border-round-lg shadow-3\" style=\"min-width: 280px\">\r\n    <div class=\"flex flex-column gap-1\">\r\n      <label class=\"text-sm font-semibold text-gray-700\">Nome do Bot\u00E3o</label>\r\n      <input\r\n        #buttonNameInput\r\n        type=\"text\"\r\n        class=\"p-2 border-1 border-gray-300 border-round-md text-sm\"\r\n        placeholder=\"Ex: Aceitar Proposta\"\r\n        [(ngModel)]=\"buttonNameValue\"\r\n        (keydown.enter)=\"confirmButtonName()\"\r\n        (keydown.escape)=\"cancelButtonName()\"\r\n      />\r\n    </div>\r\n    <div class=\"flex flex-row gap-2 justify-content-end\">\r\n      <button\r\n        class=\"px-3 py-2 border-1 border-gray-300 bg-white text-gray-700 border-round-md cursor-pointer text-sm font-medium hover:bg-gray-100 transition-colors\"\r\n        (click)=\"cancelButtonName()\"\r\n      >\r\n        Cancelar\r\n      </button>\r\n      <button\r\n        class=\"px-3 py-2 border-none bg-blue-600 text-white border-round-md cursor-pointer text-sm font-medium hover:bg-blue-700 transition-colors\"\r\n        (click)=\"confirmButtonName()\"\r\n      >\r\n        Inserir\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":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-tooltip.ql-editing[data-mode=video]{transform:translate(40%)}: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 .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 .2s}:host ::ng-deep .blot-formatter__resize-handle{background:#eaeaea!important}:host ::ng-deep #kv-editor-preview{border-radius:0 0 6px 6px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper{font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:1.42;color:#000;padding:12px 15px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper p{margin:0;padding:0;white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper *{white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strong,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper b{font-weight:700!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper em,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper i{font-style:italic!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper u{text-decoration:underline!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper s,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strike{text-decoration:line-through!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-weight:700;margin:0;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1{font-size:2em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2{font-size:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3{font-size:1.17em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4{font-size:1em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5{font-size:.83em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-size:.67em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper a{color:#06c;text-decoration:underline}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper code{background-color:#f0f0f0;border-radius:3px;padding:2px 4px;font-family:monospace;font-size:85%}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre{background-color:#23241f;color:#f8f8f2;overflow:visible;border-radius:3px;padding:5px 10px;white-space:pre-wrap;margin-bottom:5px;margin-top:5px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre code{background-color:transparent;border-radius:0;color:inherit;font-size:100%;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ol,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ul{margin:0;padding-left:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper img{max-width:100%;height:auto}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table{width:100%;border-collapse:collapse;margin-bottom:1rem}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table td{border:1px solid #e5e7eb;padding:.5rem;text-align:left}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th{background-color:#f9fafb;font-weight:600}:ng-deep p{text-align:justify!important}::ng-deep .scrollstyle,::ng-deep .ql-editor{overflow-x:hidden}::ng-deep .scrollstyle::-webkit-scrollbar,::ng-deep .ql-editor::-webkit-scrollbar{width:6px}::ng-deep .scrollstyle::-webkit-scrollbar:hover,::ng-deep .ql-editor::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scrollstyle::-webkit-scrollbar-thumb,::ng-deep .ql-editor::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scrollstyle:hover::-webkit-scrollbar-thumb,::ng-deep .ql-editor:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scrollstyle::-webkit-scrollbar-track,::ng-deep .ql-editor::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}:host ::ng-deep .editor-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;display:flex;justify-content:center;align-items:center;z-index:100000;border-radius:inherit}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:after{background:#002542}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:before{background:#002542}::ng-deep .scroll-virtual{overflow-x:hidden}::ng-deep .scroll-virtual::-webkit-scrollbar{width:8px}::ng-deep .scroll-virtual::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scroll-virtual::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scroll-virtual:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scroll-virtual::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.option-dropdown{background-color:#333;transition:all ease-in .2s}.option-dropdown:hover{background-color:#444}.button-name-tooltip{position:fixed;z-index:10000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease-in-out;pointer-events:none}.button-name-tooltip.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.button-name-tooltip input{outline:none;transition:border-color .2s}.button-name-tooltip input:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a}.button-name-tooltip button{transition:all .2s}.button-name-tooltip button:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.button-name-tooltip button:active{transform:translateY(0)}\n"] }]
         }], ctorParameters: () => [{ type: ComponentService }, { type: i1$6.DomSanitizer }], propDecorators: { canvaHeigth: [{
                 type: Input
             }], contentType: [{