keevo-components 2.0.235 → 2.0.236
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/kv-inputs/kv-editor/kv-editor.component.mjs +12 -4
- package/fesm2022/keevo-components.mjs +11 -3
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.d.ts +1 -1
- package/lib/components/kv-inputs/kv-editor/kv-editor.component.d.ts +3 -1
- package/lib/components/kv-table-viewer/kv-table-viewer.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -5773,6 +5773,8 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5773
5773
|
this.instrucoesTemplate = input(undefined);
|
|
5774
5774
|
this.showHeader = input(true);
|
|
5775
5775
|
this.readonly = input(false);
|
|
5776
|
+
this.disabledEditor = input(false);
|
|
5777
|
+
this.showHeaderButtons = input(true);
|
|
5776
5778
|
// Inputs para botões específicos do Alpha Crm
|
|
5777
5779
|
this.showAlphaCrmButtons = input(false);
|
|
5778
5780
|
this.enableButtonInsert = input(true);
|
|
@@ -5792,6 +5794,12 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5792
5794
|
this.quill.enable(!readonly);
|
|
5793
5795
|
}
|
|
5794
5796
|
});
|
|
5797
|
+
effect(() => {
|
|
5798
|
+
let disabled = this.disabledEditor();
|
|
5799
|
+
if (this.quill) {
|
|
5800
|
+
this.quill.enable(!disabled);
|
|
5801
|
+
}
|
|
5802
|
+
});
|
|
5795
5803
|
effect(() => {
|
|
5796
5804
|
if (this.enablePreviewMode()) {
|
|
5797
5805
|
this.atualizarPreview();
|
|
@@ -5865,7 +5873,7 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5865
5873
|
}
|
|
5866
5874
|
},
|
|
5867
5875
|
placeholder: this.label ? this.label : '',
|
|
5868
|
-
readOnly: this.readonly(),
|
|
5876
|
+
readOnly: this.readonly() || this.disabledEditor(),
|
|
5869
5877
|
debug: this.debug,
|
|
5870
5878
|
};
|
|
5871
5879
|
this.quill = this.quillService.createQuillInstance('#kv-editor', config);
|
|
@@ -6309,11 +6317,11 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
6309
6317
|
return this.previewContent();
|
|
6310
6318
|
}
|
|
6311
6319
|
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 }); }
|
|
6312
|
-
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 }, 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>\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\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"] }] }); }
|
|
6320
|
+
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"] }] }); }
|
|
6313
6321
|
}
|
|
6314
6322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvEditorComponent, decorators: [{
|
|
6315
6323
|
type: Component,
|
|
6316
|
-
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\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"] }]
|
|
6324
|
+
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"] }]
|
|
6317
6325
|
}], ctorParameters: () => [{ type: ComponentService }, { type: i1$6.DomSanitizer }], propDecorators: { canvaHeigth: [{
|
|
6318
6326
|
type: Input
|
|
6319
6327
|
}], contentType: [{
|