keevo-components 2.0.257 → 2.0.259
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/index.mjs +2 -0
- package/esm2022/lib/components/kv-file-upload-new/kv-file-upload-new.component.mjs +205 -0
- package/esm2022/lib/components/kv-inputs/kv-chips/kv-chips.component.mjs +2 -2
- package/esm2022/lib/components/kv-inputs/kv-editor/kv-editor.component.mjs +13 -4
- package/esm2022/lib/components/kv-select-cards/kv-select-cards.component.mjs +2 -2
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/keevo-components.mjs +215 -8
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/components/kv-file-upload-new/kv-file-upload-new.component.d.ts +36 -0
- package/lib/components/kv-inputs/kv-editor/kv-editor.component.d.ts +2 -1
- package/lib/components/kv-table/kv-table.component.d.ts +1 -1
- package/lib/components/kv-table-draggable/kv-table-draggable.component.d.ts +1 -1
- package/lib/components/kv-table-expandable/kv-table-expandable.component.d.ts +1 -1
- package/lib/components/kv-table-viewer/kv-table-viewer.component.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -148,6 +148,7 @@ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
|
148
148
|
import * as i2$8 from '@angular/cdk/scrolling';
|
|
149
149
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
150
150
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
151
|
+
import { KvProgressBarModule as KvProgressBarModule$1 } from 'projects/keevo-components/src';
|
|
151
152
|
|
|
152
153
|
class BaseComponentButton {
|
|
153
154
|
constructor() {
|
|
@@ -5832,8 +5833,9 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5832
5833
|
this.readonly = input(false);
|
|
5833
5834
|
this.disabledEditor = input(false);
|
|
5834
5835
|
this.showHeaderButtons = input(true);
|
|
5835
|
-
// Inputs para botões específicos do Alpha
|
|
5836
|
+
// Inputs para botões específicos do ambiente Alpha
|
|
5836
5837
|
this.showAlphaCrmButtons = input(false);
|
|
5838
|
+
this.showAlphaContratoButtons = input(false);
|
|
5837
5839
|
this.enableButtonInsert = input(true);
|
|
5838
5840
|
// Computed properties para relatórios
|
|
5839
5841
|
this.idRelatorioSelected = computed(() => this.relatorioService.getIdRelatorioSelected());
|
|
@@ -5981,6 +5983,14 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5981
5983
|
btnAlphaAceitarAssinar?.addEventListener('click', () => {
|
|
5982
5984
|
this.inserirBotoesAlpha('Aceitar Proposta e Assinar Contrato', 'aceitarAssinarAction', 'blue');
|
|
5983
5985
|
});
|
|
5986
|
+
const btnAlphaContratoAssinar = document.querySelector('#btn-alpha-contrato-assinar');
|
|
5987
|
+
btnAlphaContratoAssinar?.addEventListener('click', () => {
|
|
5988
|
+
this.inserirBotoesAlpha('Assinar Contrato', 'assinarContratoAction', 'blue');
|
|
5989
|
+
});
|
|
5990
|
+
const btnAlphaContratoRecusar = document.querySelector('#btn-alpha-contrato-recusar');
|
|
5991
|
+
btnAlphaContratoRecusar?.addEventListener('click', () => {
|
|
5992
|
+
this.inserirBotoesAlpha('Recusar Contrato', 'recusarContratoAction', 'gray');
|
|
5993
|
+
});
|
|
5984
5994
|
}
|
|
5985
5995
|
inserirBotoesAlpha(buttonName, functionName, color) {
|
|
5986
5996
|
const range = this.quill.getSelection();
|
|
@@ -6411,11 +6421,11 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
6411
6421
|
}, 10);
|
|
6412
6422
|
}
|
|
6413
6423
|
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 }); }
|
|
6414
|
-
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 }, showVariableValueFirst: { classPropertyName: "showVariableValueFirst", publicName: "showVariableValueFirst", 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 @if (showVariableValueFirst()) {\r\n {{ variable.value }} (\r\n <span class=\"text-gray-400\">{{ variable.descricao }}</span> )\r\n } @else {\r\n {{ variable.descricao }} (\r\n <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n }\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}: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"] }] }); }
|
|
6424
|
+
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 }, showVariableValueFirst: { classPropertyName: "showVariableValueFirst", publicName: "showVariableValueFirst", 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 }, showAlphaContratoButtons: { classPropertyName: "showAlphaContratoButtons", publicName: "showAlphaContratoButtons", 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 @if(showAlphaContratoButtons()) {\r\n <button id=\"btn-alpha-contrato-assinar\" pTooltip=\"Inserir bot\u00E3o Assinar Contrato\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 20px;\">contract_edit</span>\r\n </button>\r\n\r\n <button id=\"btn-alpha-contrato-recusar\" pTooltip=\"Inserir bot\u00E3o Recusar Contrato\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 20px;\">contract_delete</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 @if (showVariableValueFirst()) {\r\n {{ variable.value }} (\r\n <span class=\"text-gray-400\">{{ variable.descricao }}</span> )\r\n } @else {\r\n {{ variable.descricao }} (\r\n <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n }\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}: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"] }] }); }
|
|
6415
6425
|
}
|
|
6416
6426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvEditorComponent, decorators: [{
|
|
6417
6427
|
type: Component,
|
|
6418
|
-
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 @if (showVariableValueFirst()) {\r\n {{ variable.value }} (\r\n <span class=\"text-gray-400\">{{ variable.descricao }}</span> )\r\n } @else {\r\n {{ variable.descricao }} (\r\n <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n }\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}: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"] }]
|
|
6428
|
+
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 @if(showAlphaContratoButtons()) {\r\n <button id=\"btn-alpha-contrato-assinar\" pTooltip=\"Inserir bot\u00E3o Assinar Contrato\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 20px;\">contract_edit</span>\r\n </button>\r\n\r\n <button id=\"btn-alpha-contrato-recusar\" pTooltip=\"Inserir bot\u00E3o Recusar Contrato\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 20px;\">contract_delete</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 @if (showVariableValueFirst()) {\r\n {{ variable.value }} (\r\n <span class=\"text-gray-400\">{{ variable.descricao }}</span> )\r\n } @else {\r\n {{ variable.descricao }} (\r\n <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n }\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}: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"] }]
|
|
6419
6429
|
}], ctorParameters: () => [{ type: ComponentService }, { type: i1$6.DomSanitizer }], propDecorators: { canvaHeigth: [{
|
|
6420
6430
|
type: Input
|
|
6421
6431
|
}], contentType: [{
|
|
@@ -14580,11 +14590,11 @@ class KvChipsComponent {
|
|
|
14580
14590
|
this.selectionChange.emit(val);
|
|
14581
14591
|
}
|
|
14582
14592
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14583
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvChipsComponent, isStandalone: true, selector: "kv-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius
|
|
14593
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvChipsComponent, isStandalone: true, selector: "kv-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:.5rem;color:#64748b;font-family:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.chip:hover{border-color:#abbbce;color:#4f5b6d}.chip.selected{background-color:#e0f2fe;border-color:#3b82f6;color:#0b63f3}.chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}\n"] }); }
|
|
14584
14594
|
}
|
|
14585
14595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvChipsComponent, decorators: [{
|
|
14586
14596
|
type: Component,
|
|
14587
|
-
args: [{ selector: 'kv-chips', standalone: true, imports: [], template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius
|
|
14597
|
+
args: [{ selector: 'kv-chips', standalone: true, imports: [], template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:.5rem;color:#64748b;font-family:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.chip:hover{border-color:#abbbce;color:#4f5b6d}.chip.selected{background-color:#e0f2fe;border-color:#3b82f6;color:#0b63f3}.chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}\n"] }]
|
|
14588
14598
|
}] });
|
|
14589
14599
|
|
|
14590
14600
|
class KvSelectCardsComponent {
|
|
@@ -14598,13 +14608,210 @@ class KvSelectCardsComponent {
|
|
|
14598
14608
|
this.selection.set(option.value);
|
|
14599
14609
|
}
|
|
14600
14610
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvSelectCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14601
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvSelectCardsComponent, isStandalone: true, selector: "kv-select-cards", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, ngImport: i0, template: "<div class=\"cards-container\">\r\n @for (option of options(); track option.value) {\r\n <div\r\n class=\"card-option\"\r\n [class.selected]=\"selection() === option.value\"\r\n (click)=\"select(option)\"\r\n >\r\n <div class=\"icon-box\">\r\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\r\n </div>\r\n\r\n <div class=\"content\">\r\n <div class=\"title\">{{ option.title }}</div>\r\n <div class=\"description\">{{ option.description }}</div>\r\n </div>\r\n\r\n <div class=\"radio-indicator\">\r\n <div class=\"dot\"></div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".cards-container{display:flex;flex-direction:column;gap:1rem;width:100%}.card-option{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.card-option:hover{border-color:#b0c0d6;background:#f8fafc}.card-option.selected{background:#
|
|
14611
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvSelectCardsComponent, isStandalone: true, selector: "kv-select-cards", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, ngImport: i0, template: "<div class=\"cards-container\">\r\n @for (option of options(); track option.value) {\r\n <div\r\n class=\"card-option\"\r\n [class.selected]=\"selection() === option.value\"\r\n (click)=\"select(option)\"\r\n >\r\n <div class=\"icon-box\">\r\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\r\n </div>\r\n\r\n <div class=\"content\">\r\n <div class=\"title\">{{ option.title }}</div>\r\n <div class=\"description\">{{ option.description }}</div>\r\n </div>\r\n\r\n <div class=\"radio-indicator\">\r\n <div class=\"dot\"></div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".cards-container{display:flex;flex-direction:column;gap:1rem;width:100%}.card-option{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.card-option:hover{border-color:#b0c0d6;background:#f8fafc}.card-option.selected{background:#eff4ff;border-color:#3b82f6;box-shadow:0 4px 6px -1px #0ea5e91a}.card-option.selected .icon-box{background:#3b82f61a;color:#3b82f6}.card-option.selected .title{color:#3b82f6}.card-option.selected .radio-indicator{border-color:#3b82f6;background:#fff}.card-option.selected .radio-indicator .dot{transform:scale(1);background:#3b82f6}.icon-box{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:.5rem;background:#f1f5f9;color:#64748b;flex-shrink:0;transition:all .2s}.icon-box span{font-size:1.5rem}.content{flex:1;display:flex;flex-direction:column;gap:.25rem}.title{font-size:.95rem;font-weight:700;color:#0f172a;transition:color .2s}.description{font-size:.8rem;color:#64748b;line-height:1.4}.radio-indicator{width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid #e2e8f0;display:flex;align-items:center;justify-content:center;transition:all .2s;background:#fff}.radio-indicator .dot{width:.625rem;height:.625rem;border-radius:50%;background:transparent;transform:scale(0);transition:transform .2s cubic-bezier(.4,0,.2,1)}\n"] }); }
|
|
14602
14612
|
}
|
|
14603
14613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvSelectCardsComponent, decorators: [{
|
|
14604
14614
|
type: Component,
|
|
14605
|
-
args: [{ selector: 'kv-select-cards', standalone: true, imports: [], template: "<div class=\"cards-container\">\r\n @for (option of options(); track option.value) {\r\n <div\r\n class=\"card-option\"\r\n [class.selected]=\"selection() === option.value\"\r\n (click)=\"select(option)\"\r\n >\r\n <div class=\"icon-box\">\r\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\r\n </div>\r\n\r\n <div class=\"content\">\r\n <div class=\"title\">{{ option.title }}</div>\r\n <div class=\"description\">{{ option.description }}</div>\r\n </div>\r\n\r\n <div class=\"radio-indicator\">\r\n <div class=\"dot\"></div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".cards-container{display:flex;flex-direction:column;gap:1rem;width:100%}.card-option{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.card-option:hover{border-color:#b0c0d6;background:#f8fafc}.card-option.selected{background:#
|
|
14615
|
+
args: [{ selector: 'kv-select-cards', standalone: true, imports: [], template: "<div class=\"cards-container\">\r\n @for (option of options(); track option.value) {\r\n <div\r\n class=\"card-option\"\r\n [class.selected]=\"selection() === option.value\"\r\n (click)=\"select(option)\"\r\n >\r\n <div class=\"icon-box\">\r\n <span class=\"material-symbols-outlined\">{{ option.icon }}</span>\r\n </div>\r\n\r\n <div class=\"content\">\r\n <div class=\"title\">{{ option.title }}</div>\r\n <div class=\"description\">{{ option.description }}</div>\r\n </div>\r\n\r\n <div class=\"radio-indicator\">\r\n <div class=\"dot\"></div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".cards-container{display:flex;flex-direction:column;gap:1rem;width:100%}.card-option{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.card-option:hover{border-color:#b0c0d6;background:#f8fafc}.card-option.selected{background:#eff4ff;border-color:#3b82f6;box-shadow:0 4px 6px -1px #0ea5e91a}.card-option.selected .icon-box{background:#3b82f61a;color:#3b82f6}.card-option.selected .title{color:#3b82f6}.card-option.selected .radio-indicator{border-color:#3b82f6;background:#fff}.card-option.selected .radio-indicator .dot{transform:scale(1);background:#3b82f6}.icon-box{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:.5rem;background:#f1f5f9;color:#64748b;flex-shrink:0;transition:all .2s}.icon-box span{font-size:1.5rem}.content{flex:1;display:flex;flex-direction:column;gap:.25rem}.title{font-size:.95rem;font-weight:700;color:#0f172a;transition:color .2s}.description{font-size:.8rem;color:#64748b;line-height:1.4}.radio-indicator{width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid #e2e8f0;display:flex;align-items:center;justify-content:center;transition:all .2s;background:#fff}.radio-indicator .dot{width:.625rem;height:.625rem;border-radius:50%;background:transparent;transform:scale(0);transition:transform .2s cubic-bezier(.4,0,.2,1)}\n"] }]
|
|
14606
14616
|
}] });
|
|
14607
14617
|
|
|
14618
|
+
class KvFileUploadNewComponent {
|
|
14619
|
+
// No topo da classe
|
|
14620
|
+
constructor(notificationService) {
|
|
14621
|
+
this.notificationService = notificationService;
|
|
14622
|
+
this.widthComponent = '400px';
|
|
14623
|
+
this.heightComponent = 'auto';
|
|
14624
|
+
this.validFileTypes = ['image/', 'application/pdf', 'text/html', 'text/xml', 'application/xml', 'text/plain'];
|
|
14625
|
+
this.tamanhoMaximoPermitido = '';
|
|
14626
|
+
this.includeOfficeTypes = false; // Propriedade para controlar os tipos de Office
|
|
14627
|
+
this.maxSizeFile = input(10);
|
|
14628
|
+
this.fileEmit = new EventEmitter();
|
|
14629
|
+
this.removeFileEmit = new EventEmitter();
|
|
14630
|
+
// returnMbSize = computed(() => (bytes: any) => {
|
|
14631
|
+
// if (bytes === null || bytes === undefined) {
|
|
14632
|
+
// return '0 MB';
|
|
14633
|
+
// }
|
|
14634
|
+
// const mbSize = bytes / (1024 * 1024);
|
|
14635
|
+
// return this.formatBytes(mbSize, 2);
|
|
14636
|
+
// });
|
|
14637
|
+
this.progressValue = computed(() => (bytes) => {
|
|
14638
|
+
if (bytes === null || bytes === undefined) {
|
|
14639
|
+
return 0;
|
|
14640
|
+
}
|
|
14641
|
+
const mbSize = bytes / (1024 * 1024);
|
|
14642
|
+
let progressValue = (Number(mbSize) / this.maxSizeFile()) * 100;
|
|
14643
|
+
// Limita o valor do progresso entre 0 e 100
|
|
14644
|
+
return Math.min(Math.max(progressValue, 0), 100);
|
|
14645
|
+
});
|
|
14646
|
+
this.returnProgressLabel = computed(() => (bytes) => {
|
|
14647
|
+
if (bytes === null || bytes === undefined) {
|
|
14648
|
+
return '0 MB';
|
|
14649
|
+
}
|
|
14650
|
+
const mbSize = bytes / (1024 * 1024);
|
|
14651
|
+
// let progressValue = (Number(mbSize) / this.maxSizeFile()) * 100;
|
|
14652
|
+
// this.progressValue.set(progressValue);
|
|
14653
|
+
// this.progressValue.set((mbSize / this.maxSizeFile())*100);
|
|
14654
|
+
return `${mbSize.toFixed(2)}/${this.maxSizeFile()} MB`;
|
|
14655
|
+
});
|
|
14656
|
+
}
|
|
14657
|
+
// Método para disparar o clique sem erro de propriedade
|
|
14658
|
+
triggerClick() {
|
|
14659
|
+
if (!this.formGroup.get(this.formControlName)?.value) {
|
|
14660
|
+
this.fileInput.nativeElement.click();
|
|
14661
|
+
}
|
|
14662
|
+
}
|
|
14663
|
+
onFileSelected(event) {
|
|
14664
|
+
let validTypes = [...this.validFileTypes];
|
|
14665
|
+
if (this.includeOfficeTypes) {
|
|
14666
|
+
validTypes.push('application/msword', // .doc
|
|
14667
|
+
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
|
|
14668
|
+
'application/vnd.ms-powerpoint', // .ppt
|
|
14669
|
+
'application/vnd.openxmlformats-officedocument.presentationml.presentation' // .pptx
|
|
14670
|
+
);
|
|
14671
|
+
}
|
|
14672
|
+
if (event.target.files.length == 0)
|
|
14673
|
+
return;
|
|
14674
|
+
const isValidFileType = validTypes.some(type => event.target.files[0].type.startsWith(type) ||
|
|
14675
|
+
(type === 'application/xml' && event.target.files[0].type === 'application/xml') ||
|
|
14676
|
+
(type === 'text/xml' && event.target.files[0].type === 'text/xml'));
|
|
14677
|
+
if (!isValidFileType) {
|
|
14678
|
+
this.notificationService.toastError('Tipo de arquivo inválido');
|
|
14679
|
+
this.formGroup.controls[this.formControlName].setValue(null);
|
|
14680
|
+
event.target.value = '';
|
|
14681
|
+
return;
|
|
14682
|
+
}
|
|
14683
|
+
this.formGroup.controls[this.formControlName].setValue(event.target.files[0]);
|
|
14684
|
+
this.fileEmit.emit(event.target.files[0]);
|
|
14685
|
+
}
|
|
14686
|
+
deleteFile() {
|
|
14687
|
+
this.formGroup.controls[this.formControlName].setValue(null);
|
|
14688
|
+
this.fileInput.nativeElement.value = '';
|
|
14689
|
+
this.removeFileEmit.emit();
|
|
14690
|
+
}
|
|
14691
|
+
formatBytes(bytes, decimals = 2) {
|
|
14692
|
+
if (!bytes) {
|
|
14693
|
+
return "0 Bytes";
|
|
14694
|
+
}
|
|
14695
|
+
const k = 1024;
|
|
14696
|
+
const dm = decimals <= 0 ? 0 : decimals;
|
|
14697
|
+
const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
|
14698
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
14699
|
+
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
|
|
14700
|
+
}
|
|
14701
|
+
addDragOverClass(event) {
|
|
14702
|
+
const container = event.target;
|
|
14703
|
+
container.classList.add('dragover');
|
|
14704
|
+
}
|
|
14705
|
+
removeDragOverClass(event) {
|
|
14706
|
+
const container = event.target;
|
|
14707
|
+
container.classList.remove('dragover');
|
|
14708
|
+
}
|
|
14709
|
+
handleFile(file) {
|
|
14710
|
+
if (this.includeOfficeTypes) {
|
|
14711
|
+
let validTypes = [...this.validFileTypes];
|
|
14712
|
+
validTypes.push('application/msword', // .doc
|
|
14713
|
+
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
|
|
14714
|
+
'application/vnd.ms-powerpoint', // .ppt
|
|
14715
|
+
'application/vnd.openxmlformats-officedocument.presentationml.presentation' // .pptx
|
|
14716
|
+
);
|
|
14717
|
+
}
|
|
14718
|
+
const isValidFileType = this.validFileTypes.some(type => file.type.startsWith(type) ||
|
|
14719
|
+
file.type === 'application/xml' ||
|
|
14720
|
+
file.type === 'text/xml');
|
|
14721
|
+
if (!isValidFileType) {
|
|
14722
|
+
this.notificationService.toastError('Tipo de arquivo inválido');
|
|
14723
|
+
this.formGroup.controls[this.formControlName].setValue(null);
|
|
14724
|
+
return;
|
|
14725
|
+
}
|
|
14726
|
+
this.formGroup.controls[this.formControlName].setValue(file);
|
|
14727
|
+
const reader = new FileReader();
|
|
14728
|
+
if (file.type.startsWith('image/')) {
|
|
14729
|
+
reader.readAsDataURL(file);
|
|
14730
|
+
}
|
|
14731
|
+
else if (file.type === 'application/xml' || file.type === 'text/xml') {
|
|
14732
|
+
reader.readAsText(file);
|
|
14733
|
+
}
|
|
14734
|
+
else {
|
|
14735
|
+
reader.readAsArrayBuffer(file);
|
|
14736
|
+
}
|
|
14737
|
+
this.fileEmit.emit(file);
|
|
14738
|
+
}
|
|
14739
|
+
onDragOver(event) {
|
|
14740
|
+
event.preventDefault();
|
|
14741
|
+
event.stopPropagation();
|
|
14742
|
+
this.addDragOverClass(event);
|
|
14743
|
+
}
|
|
14744
|
+
onDragLeave(event) {
|
|
14745
|
+
event.preventDefault();
|
|
14746
|
+
event.stopPropagation();
|
|
14747
|
+
this.removeDragOverClass(event);
|
|
14748
|
+
}
|
|
14749
|
+
onDrop(event) {
|
|
14750
|
+
event.preventDefault();
|
|
14751
|
+
event.stopPropagation();
|
|
14752
|
+
this.removeDragOverClass(event);
|
|
14753
|
+
if (event.dataTransfer && event.dataTransfer.files.length > 0) {
|
|
14754
|
+
this.handleFile(event.dataTransfer.files[0]);
|
|
14755
|
+
}
|
|
14756
|
+
}
|
|
14757
|
+
setAccept() {
|
|
14758
|
+
let types = '';
|
|
14759
|
+
this.validFileTypes.forEach(type => {
|
|
14760
|
+
if (type.includes('image'))
|
|
14761
|
+
types += '.jpg, .png, .bmp, ';
|
|
14762
|
+
if (type.includes('html'))
|
|
14763
|
+
types += '.html, ';
|
|
14764
|
+
if (type.includes('pdf'))
|
|
14765
|
+
types += '.pdf, ';
|
|
14766
|
+
if (type.includes('xml'))
|
|
14767
|
+
types += '.xml, ';
|
|
14768
|
+
if (type.includes('plain'))
|
|
14769
|
+
types += '.txt, ';
|
|
14770
|
+
});
|
|
14771
|
+
// Adiciona tipos de arquivos do Office se includeOfficeTypes for true
|
|
14772
|
+
if (this.includeOfficeTypes) {
|
|
14773
|
+
types += '.doc, .docx, .ppt, .pptx, ';
|
|
14774
|
+
}
|
|
14775
|
+
return types.slice(0, -2); // Remove a última vírgula e espaço
|
|
14776
|
+
}
|
|
14777
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFileUploadNewComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14778
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.8", type: KvFileUploadNewComponent, isStandalone: true, selector: "kv-file-upload-new", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: false, isRequired: false, transformFunction: null }, widthComponent: { classPropertyName: "widthComponent", publicName: "widthComponent", isSignal: false, isRequired: false, transformFunction: null }, heightComponent: { classPropertyName: "heightComponent", publicName: "heightComponent", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, validFileTypes: { classPropertyName: "validFileTypes", publicName: "validFileTypes", isSignal: false, isRequired: false, transformFunction: null }, tamanhoMaximoPermitido: { classPropertyName: "tamanhoMaximoPermitido", publicName: "tamanhoMaximoPermitido", isSignal: false, isRequired: false, transformFunction: null }, includeOfficeTypes: { classPropertyName: "includeOfficeTypes", publicName: "includeOfficeTypes", isSignal: false, isRequired: false, transformFunction: null }, maxSizeFile: { classPropertyName: "maxSizeFile", publicName: "maxSizeFile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileEmit: "fileEmit", removeFileEmit: "removeFileEmit" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "inputUpload", first: true, predicate: ["inputUpload"], descendants: true }], ngImport: i0, template: "<div\r\n *ngIf=\"formGroup\"\r\n class=\"file-upload-container w-full\"\r\n [ngClass]=\"{\r\n 'invalid-border':\r\n formGroup.get(formControlName)?.invalid &&\r\n formGroup.get(formControlName)?.touched,\r\n 'has-file': formGroup.get(formControlName)?.value,\r\n }\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n (click)=\"triggerClick()\"\r\n [style.width]=\"widthComponent\"\r\n>\r\n <input\r\n type=\"file\"\r\n #fileInput\r\n (change)=\"onFileSelected($event)\"\r\n [accept]=\"setAccept()\"\r\n hidden\r\n />\r\n\r\n <div *ngIf=\"!formGroup.get(formControlName)?.value\" class=\"dropzone-content\">\r\n <div class=\"cloud-icon-wrapper\">\r\n <span class=\"material-symbols-outlined\">cloud_upload</span>\r\n </div>\r\n <div class=\"text-center\">\r\n <p class=\"main-text\">\r\n <span class=\"blue-text\">Clique para selecionar</span> ou arraste aqui\r\n </p>\r\n <p class=\"sub-text\">PDF, Imagens (max. {{ maxSizeFile() }}MB)</p>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"formGroup.get(formControlName)?.value as file\"\r\n class=\"selected-file-card\"\r\n >\r\n <div class=\"card-header\">\r\n <div class=\"file-info\">\r\n <span class=\"material-symbols-outlined file-icon\">description</span>\r\n <span class=\"file-name\" [title]=\"file.name\">{{ file.name }}</span>\r\n </div>\r\n <button\r\n pButton\r\n icon=\"pi pi-times\"\r\n class=\"p-button-rounded p-button-text p-button-danger close-btn\"\r\n (click)=\"deleteFile(); $event.stopPropagation()\"\r\n ></button>\r\n </div>\r\n\r\n <div class=\"card-footer\">\r\n <div class=\"progress-container\">\r\n <div\r\n class=\"progress-bar\"\r\n [style.width.%]=\"progressValue()(file.size)\"\r\n [class.limit-exceeded]=\"progressValue()(file.size) >= 100\"\r\n ></div>\r\n </div>\r\n <div class=\"flex justify-content-between align-items-center mt-1\">\r\n <small class=\"error-text\" *ngIf=\"progressValue()(file.size) >= 100\"\r\n >Limite excedido</small\r\n >\r\n <span class=\"file-size-label ml-auto\">{{\r\n formatBytes(file.size)\r\n }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<p\r\n *ngIf=\"\r\n formGroup.get(formControlName)?.invalid &&\r\n formGroup.get(formControlName)?.touched\r\n \"\r\n class=\"error-message\"\r\n>\r\n Campo obrigat\u00F3rio\r\n</p>\r\n", styles: [".file-upload-container{border:2px dashed #cbd5e1;border-radius:1.25rem;background-color:#f8fafc;min-height:160px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;position:relative}.file-upload-container:hover,.file-upload-container.dragover{border-color:#3b82f6;background-color:#eff6ff}.file-upload-container.has-file{cursor:default;background-color:#f1f5f9;padding:0;border-style:solid}.selected-file-card{background:#fff;border-radius:1.25rem;padding:1.5rem;width:100%;height:100%;min-height:160px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:flex;flex-direction:column;justify-content:center;gap:1rem;animation:fadeIn .3s ease-out;box-sizing:border-box}.selected-file-card .card-header{display:flex;justify-content:space-between;align-items:center}.selected-file-card .card-header .file-info{display:flex;align-items:center;gap:.75rem;overflow:hidden}.selected-file-card .card-header .file-info .file-icon{color:#64748b;font-size:24px}.selected-file-card .card-header .file-info .file-name{font-size:1rem;font-weight:500;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-file-card .card-header .close-btn{width:32px!important;height:32px!important;padding:0!important}.selected-file-card .card-header .close-btn ::ng-deep .p-button-icon{font-size:1rem}.selected-file-card .card-footer .progress-container{height:8px;background:#e2e8f0;border-radius:10px;overflow:hidden}.selected-file-card .card-footer .progress-container .progress-bar{height:100%;background:#3b82f6;transition:width .4s cubic-bezier(.4,0,.2,1)}.selected-file-card .card-footer .progress-container .progress-bar.limit-exceeded{background:#ef4444}.selected-file-card .card-footer .file-size-label{font-size:.85rem;color:#94a3b8;font-weight:500}.selected-file-card .card-footer .error-text{color:#ef4444;font-size:.75rem;font-weight:600}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}::ng-deep .file-upload-container .p-button.p-button-text{background-color:transparent!important;border:none}::ng-deep .file-upload-container .p-button.p-button-text:hover{background-color:#fee2e2!important}.cloud-icon-wrapper{background-color:#e0f2fe;color:#3b82f6;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem}.cloud-icon-wrapper span{font-size:24px}.main-text{font-size:.9rem;color:#334155}.main-text .blue-text{color:#3b82f6;font-weight:600}.sub-text{color:#64748b;font-size:.8rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: KvProgressBarModule$1 }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }] }); }
|
|
14779
|
+
}
|
|
14780
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFileUploadNewComponent, decorators: [{
|
|
14781
|
+
type: Component,
|
|
14782
|
+
args: [{ selector: 'kv-file-upload-new', standalone: true, imports: [
|
|
14783
|
+
CommonModule,
|
|
14784
|
+
KvProgressBarModule$1,
|
|
14785
|
+
ButtonModule
|
|
14786
|
+
], template: "<div\r\n *ngIf=\"formGroup\"\r\n class=\"file-upload-container w-full\"\r\n [ngClass]=\"{\r\n 'invalid-border':\r\n formGroup.get(formControlName)?.invalid &&\r\n formGroup.get(formControlName)?.touched,\r\n 'has-file': formGroup.get(formControlName)?.value,\r\n }\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n (click)=\"triggerClick()\"\r\n [style.width]=\"widthComponent\"\r\n>\r\n <input\r\n type=\"file\"\r\n #fileInput\r\n (change)=\"onFileSelected($event)\"\r\n [accept]=\"setAccept()\"\r\n hidden\r\n />\r\n\r\n <div *ngIf=\"!formGroup.get(formControlName)?.value\" class=\"dropzone-content\">\r\n <div class=\"cloud-icon-wrapper\">\r\n <span class=\"material-symbols-outlined\">cloud_upload</span>\r\n </div>\r\n <div class=\"text-center\">\r\n <p class=\"main-text\">\r\n <span class=\"blue-text\">Clique para selecionar</span> ou arraste aqui\r\n </p>\r\n <p class=\"sub-text\">PDF, Imagens (max. {{ maxSizeFile() }}MB)</p>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"formGroup.get(formControlName)?.value as file\"\r\n class=\"selected-file-card\"\r\n >\r\n <div class=\"card-header\">\r\n <div class=\"file-info\">\r\n <span class=\"material-symbols-outlined file-icon\">description</span>\r\n <span class=\"file-name\" [title]=\"file.name\">{{ file.name }}</span>\r\n </div>\r\n <button\r\n pButton\r\n icon=\"pi pi-times\"\r\n class=\"p-button-rounded p-button-text p-button-danger close-btn\"\r\n (click)=\"deleteFile(); $event.stopPropagation()\"\r\n ></button>\r\n </div>\r\n\r\n <div class=\"card-footer\">\r\n <div class=\"progress-container\">\r\n <div\r\n class=\"progress-bar\"\r\n [style.width.%]=\"progressValue()(file.size)\"\r\n [class.limit-exceeded]=\"progressValue()(file.size) >= 100\"\r\n ></div>\r\n </div>\r\n <div class=\"flex justify-content-between align-items-center mt-1\">\r\n <small class=\"error-text\" *ngIf=\"progressValue()(file.size) >= 100\"\r\n >Limite excedido</small\r\n >\r\n <span class=\"file-size-label ml-auto\">{{\r\n formatBytes(file.size)\r\n }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<p\r\n *ngIf=\"\r\n formGroup.get(formControlName)?.invalid &&\r\n formGroup.get(formControlName)?.touched\r\n \"\r\n class=\"error-message\"\r\n>\r\n Campo obrigat\u00F3rio\r\n</p>\r\n", styles: [".file-upload-container{border:2px dashed #cbd5e1;border-radius:1.25rem;background-color:#f8fafc;min-height:160px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;position:relative}.file-upload-container:hover,.file-upload-container.dragover{border-color:#3b82f6;background-color:#eff6ff}.file-upload-container.has-file{cursor:default;background-color:#f1f5f9;padding:0;border-style:solid}.selected-file-card{background:#fff;border-radius:1.25rem;padding:1.5rem;width:100%;height:100%;min-height:160px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:flex;flex-direction:column;justify-content:center;gap:1rem;animation:fadeIn .3s ease-out;box-sizing:border-box}.selected-file-card .card-header{display:flex;justify-content:space-between;align-items:center}.selected-file-card .card-header .file-info{display:flex;align-items:center;gap:.75rem;overflow:hidden}.selected-file-card .card-header .file-info .file-icon{color:#64748b;font-size:24px}.selected-file-card .card-header .file-info .file-name{font-size:1rem;font-weight:500;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-file-card .card-header .close-btn{width:32px!important;height:32px!important;padding:0!important}.selected-file-card .card-header .close-btn ::ng-deep .p-button-icon{font-size:1rem}.selected-file-card .card-footer .progress-container{height:8px;background:#e2e8f0;border-radius:10px;overflow:hidden}.selected-file-card .card-footer .progress-container .progress-bar{height:100%;background:#3b82f6;transition:width .4s cubic-bezier(.4,0,.2,1)}.selected-file-card .card-footer .progress-container .progress-bar.limit-exceeded{background:#ef4444}.selected-file-card .card-footer .file-size-label{font-size:.85rem;color:#94a3b8;font-weight:500}.selected-file-card .card-footer .error-text{color:#ef4444;font-size:.75rem;font-weight:600}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}::ng-deep .file-upload-container .p-button.p-button-text{background-color:transparent!important;border:none}::ng-deep .file-upload-container .p-button.p-button-text:hover{background-color:#fee2e2!important}.cloud-icon-wrapper{background-color:#e0f2fe;color:#3b82f6;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem}.cloud-icon-wrapper span{font-size:24px}.main-text{font-size:.9rem;color:#334155}.main-text .blue-text{color:#3b82f6;font-weight:600}.sub-text{color:#64748b;font-size:.8rem}\n"] }]
|
|
14787
|
+
}], ctorParameters: () => [{ type: NotificationService }], propDecorators: { formGroup: [{
|
|
14788
|
+
type: Input
|
|
14789
|
+
}], formControlName: [{
|
|
14790
|
+
type: Input
|
|
14791
|
+
}], widthComponent: [{
|
|
14792
|
+
type: Input
|
|
14793
|
+
}], heightComponent: [{
|
|
14794
|
+
type: Input
|
|
14795
|
+
}], description: [{
|
|
14796
|
+
type: Input
|
|
14797
|
+
}], validFileTypes: [{
|
|
14798
|
+
type: Input
|
|
14799
|
+
}], tamanhoMaximoPermitido: [{
|
|
14800
|
+
type: Input
|
|
14801
|
+
}], includeOfficeTypes: [{
|
|
14802
|
+
type: Input
|
|
14803
|
+
}], fileEmit: [{
|
|
14804
|
+
type: Output
|
|
14805
|
+
}], removeFileEmit: [{
|
|
14806
|
+
type: Output
|
|
14807
|
+
}], fileInput: [{
|
|
14808
|
+
type: ViewChild,
|
|
14809
|
+
args: ['fileInput']
|
|
14810
|
+
}], inputUpload: [{
|
|
14811
|
+
type: ViewChild,
|
|
14812
|
+
args: ['inputUpload']
|
|
14813
|
+
}] } });
|
|
14814
|
+
|
|
14608
14815
|
/*
|
|
14609
14816
|
* Public API Surface of keevo-components
|
|
14610
14817
|
*/
|
|
@@ -14616,5 +14823,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
14616
14823
|
* Generated bundle index. Do not edit.
|
|
14617
14824
|
*/
|
|
14618
14825
|
|
|
14619
|
-
export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CDN_URLS, CUSTOM_FONTS, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DEBOUNCE_TIME, DEFAULT_KV_EDITOR_CONFIG, DEFAULT_QUILL_CONFIG, DocsService, DragDirective, DynamicInputDirective, ERROR_MESSAGES, EnumUtils, FONT_SIZES, FormService, ImageCutterService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCardMessageComponent, KvCardSelectionComponent, KvCardSelectionModule, KvCardsInstructionComponent, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvChipsComponent, KvConfirmationModalComponent, KvConfirmationModalModule, KvContentViewerComponent, KvContentViewerModule, KvDetailedListComponent, KvDropdownComponent, KvEditorComponent, KvEditorMentionService, KvEditorPdfService, KvEditorQuillService, KvEditorRelatorioService, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFileViewerNovoComponent, KvFileViewerNovoModule, KvFilterCardComponent, KvFilterCardModule, KvFilterCardsComponent, KvFilterCardsModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvIconComponent, KvIconModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberAddonComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextAddonComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvInstructionPageComponent, KvKanbanComponent, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarAlternativeComponent, KvProgressBarAlternativeModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvSelectCardsComponent, KvStackedBarChartComponent, KvStepperComponent, KvStepperModule, KvStepsComponent, KvSwitchComponent, KvTableComponent, KvTableDraggableComponent, KvTableDraggableModule, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTableViewerComponent, KvTagComponent, KvTagModule, KvTagsComponent, KvTagsModule, KvTimelineComponent, KvTreeEnvironmentComponent, KvTreeMultiSelectComponent, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWidgetCardComponent, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NoArvoreComponent, NotificationService, ObjectService, OrgChartService, PDF_STYLES, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TIMEOUTS, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem, mapaSeverityColors };
|
|
14826
|
+
export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CDN_URLS, CUSTOM_FONTS, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DEBOUNCE_TIME, DEFAULT_KV_EDITOR_CONFIG, DEFAULT_QUILL_CONFIG, DocsService, DragDirective, DynamicInputDirective, ERROR_MESSAGES, EnumUtils, FONT_SIZES, FormService, ImageCutterService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCardMessageComponent, KvCardSelectionComponent, KvCardSelectionModule, KvCardsInstructionComponent, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvChipsComponent, KvConfirmationModalComponent, KvConfirmationModalModule, KvContentViewerComponent, KvContentViewerModule, KvDetailedListComponent, KvDropdownComponent, KvEditorComponent, KvEditorMentionService, KvEditorPdfService, KvEditorQuillService, KvEditorRelatorioService, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileUploadNewComponent, KvFileViewerComponent, KvFileViewerModule, KvFileViewerNovoComponent, KvFileViewerNovoModule, KvFilterCardComponent, KvFilterCardModule, KvFilterCardsComponent, KvFilterCardsModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvIconComponent, KvIconModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberAddonComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextAddonComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvInstructionPageComponent, KvKanbanComponent, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarAlternativeComponent, KvProgressBarAlternativeModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvSelectCardsComponent, KvStackedBarChartComponent, KvStepperComponent, KvStepperModule, KvStepsComponent, KvSwitchComponent, KvTableComponent, KvTableDraggableComponent, KvTableDraggableModule, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTableViewerComponent, KvTagComponent, KvTagModule, KvTagsComponent, KvTagsModule, KvTimelineComponent, KvTreeEnvironmentComponent, KvTreeMultiSelectComponent, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWidgetCardComponent, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NoArvoreComponent, NotificationService, ObjectService, OrgChartService, PDF_STYLES, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TIMEOUTS, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem, mapaSeverityColors };
|
|
14620
14827
|
//# sourceMappingURL=keevo-components.mjs.map
|