keevo-components 2.0.232 → 2.0.235
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/keevo-components.module.mjs +12 -6
- package/esm2022/lib/components/kv-card-message/kv-card-message.component.mjs +85 -0
- package/esm2022/lib/components/kv-inputs/kv-editor/kv-editor.component.mjs +43 -8
- package/esm2022/lib/components/kv-kanban/kv-kanban.component.mjs +3 -3
- package/esm2022/public-api.mjs +5 -1
- package/fesm2022/keevo-components.mjs +136 -15
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/components/keevo-components.module.d.ts +3 -2
- package/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.d.ts +1 -1
- package/lib/components/kv-card-message/kv-card-message.component.d.ts +51 -0
- package/lib/components/kv-inputs/kv-editor/kv-editor.component.d.ts +4 -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 +4 -0
|
@@ -78,6 +78,7 @@ import * as i5$7 from 'primeng/inputtextarea';
|
|
|
78
78
|
import { InputTextareaModule } from 'primeng/inputtextarea';
|
|
79
79
|
import { KnobModule } from 'primeng/knob';
|
|
80
80
|
import { MessageModule } from 'primeng/message';
|
|
81
|
+
import * as i1$8 from 'primeng/messages';
|
|
81
82
|
import { MessagesModule } from 'primeng/messages';
|
|
82
83
|
import * as i8$2 from 'primeng/multiselect';
|
|
83
84
|
import { MultiSelectModule, MultiSelect } from 'primeng/multiselect';
|
|
@@ -5772,6 +5773,9 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5772
5773
|
this.instrucoesTemplate = input(undefined);
|
|
5773
5774
|
this.showHeader = input(true);
|
|
5774
5775
|
this.readonly = input(false);
|
|
5776
|
+
// Inputs para botões específicos do Alpha Crm
|
|
5777
|
+
this.showAlphaCrmButtons = input(false);
|
|
5778
|
+
this.enableButtonInsert = input(true);
|
|
5775
5779
|
// Computed properties para relatórios
|
|
5776
5780
|
this.idRelatorioSelected = computed(() => this.relatorioService.getIdRelatorioSelected());
|
|
5777
5781
|
this.relatorio = computed(() => this.relatorioService.getRelatorioSelected());
|
|
@@ -5834,7 +5838,7 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5834
5838
|
document.addEventListener('click', (e) => {
|
|
5835
5839
|
if (this.showButtonTooltip() && this.buttonNameTooltip) {
|
|
5836
5840
|
const tooltipElement = this.buttonNameTooltip.nativeElement;
|
|
5837
|
-
const insertButton = document.querySelector('#insert-button');
|
|
5841
|
+
const insertButton = document.querySelector('#insert-custom-button');
|
|
5838
5842
|
if (!tooltipElement.contains(e.target) &&
|
|
5839
5843
|
!insertButton?.contains(e.target)) {
|
|
5840
5844
|
this.cancelButtonName();
|
|
@@ -5879,8 +5883,8 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5879
5883
|
}, 0);
|
|
5880
5884
|
}
|
|
5881
5885
|
setupCustomToolbarButtons() {
|
|
5882
|
-
const
|
|
5883
|
-
|
|
5886
|
+
const insertCustomButton = document.querySelector('#insert-custom-button');
|
|
5887
|
+
insertCustomButton?.addEventListener('click', (event) => {
|
|
5884
5888
|
const range = this.quill.getSelection();
|
|
5885
5889
|
if (range) {
|
|
5886
5890
|
this.pendingButtonRange = range;
|
|
@@ -5900,6 +5904,40 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5900
5904
|
}, 100);
|
|
5901
5905
|
}
|
|
5902
5906
|
});
|
|
5907
|
+
const btnAlphaAceitar = document.querySelector('#btn-alpha-aceitar');
|
|
5908
|
+
btnAlphaAceitar?.addEventListener('click', () => {
|
|
5909
|
+
this.inserirBotoesAlpha('Aceitar Proposta', 'aceitarButtonAction', 'blue');
|
|
5910
|
+
});
|
|
5911
|
+
const btnAlphaCancelar = document.querySelector('#btn-alpha-cancelar');
|
|
5912
|
+
btnAlphaCancelar?.addEventListener('click', () => {
|
|
5913
|
+
this.inserirBotoesAlpha('Cancelar Proposta', 'cancelarButtonAction', 'gray');
|
|
5914
|
+
});
|
|
5915
|
+
const btnAlphaAceitarAssinar = document.querySelector('#btn-alpha-aceitar-assinar');
|
|
5916
|
+
btnAlphaAceitarAssinar?.addEventListener('click', () => {
|
|
5917
|
+
this.inserirBotoesAlpha('Aceitar Proposta e Assinar Contrato', 'aceitarAssinarAction', 'blue');
|
|
5918
|
+
});
|
|
5919
|
+
}
|
|
5920
|
+
inserirBotoesAlpha(buttonName, functionName, color) {
|
|
5921
|
+
const range = this.quill.getSelection();
|
|
5922
|
+
if (!range)
|
|
5923
|
+
return;
|
|
5924
|
+
this.quill.focus();
|
|
5925
|
+
const buttonId = this.generateButtonId(buttonName);
|
|
5926
|
+
const placeholderText = `[BOTÃO: ${buttonName}]`;
|
|
5927
|
+
const styles = color === 'blue'
|
|
5928
|
+
? { 'color': '#1e3a8a', 'bold': true, 'background': '#dbeafe' }
|
|
5929
|
+
: { 'color': '#444444', 'bold': true, 'background': '#e0e0e0' };
|
|
5930
|
+
this.quill.insertText(range.index, placeholderText, styles, 'user');
|
|
5931
|
+
const delta = new this.quillDelta()
|
|
5932
|
+
.retain(range.index)
|
|
5933
|
+
.retain(placeholderText.length, {
|
|
5934
|
+
'button-id': buttonId,
|
|
5935
|
+
'button-onclick': functionName,
|
|
5936
|
+
'button-text': buttonName
|
|
5937
|
+
});
|
|
5938
|
+
this.quill.updateContents(delta, 'silent');
|
|
5939
|
+
this.quill.setSelection(range.index + placeholderText.length, 0);
|
|
5940
|
+
this.registerButtonCallback(functionName, buttonName, buttonId);
|
|
5903
5941
|
}
|
|
5904
5942
|
confirmButtonName() {
|
|
5905
5943
|
const buttonName = this.buttonNameValue.trim();
|
|
@@ -5934,7 +5972,6 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5934
5972
|
const cleanFunctionName = functionName.replace('()', '');
|
|
5935
5973
|
const id = buttonId || this.generateButtonId(buttonName);
|
|
5936
5974
|
window[cleanFunctionName] = () => {
|
|
5937
|
-
console.log(`Botão "${buttonName}" foi clicado!`);
|
|
5938
5975
|
this.onCustomButtonClick.emit({
|
|
5939
5976
|
buttonName: buttonName,
|
|
5940
5977
|
functionName: cleanFunctionName,
|
|
@@ -6193,7 +6230,6 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
6193
6230
|
conteudoFinal += conteudoProcessado;
|
|
6194
6231
|
conteudoFinal += '</div>';
|
|
6195
6232
|
this.previewHtmlOutput.emit(conteudoFinal);
|
|
6196
|
-
console.log('conteudoFinal -> ', conteudoFinal);
|
|
6197
6233
|
return this.sanitizer.bypassSecurityTrustHtml(conteudoFinal);
|
|
6198
6234
|
}
|
|
6199
6235
|
removerIndentacaoHtml(html) {
|
|
@@ -6273,11 +6309,11 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
6273
6309
|
return this.previewContent();
|
|
6274
6310
|
}
|
|
6275
6311
|
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 }); }
|
|
6276
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvEditorComponent, selector: "kv-editor", inputs: { canvaHeigth: { classPropertyName: "canvaHeigth", publicName: "canvaHeigth", isSignal: false, isRequired: false, transformFunction: null }, contentType: { classPropertyName: "contentType", publicName: "contentType", isSignal: false, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: false, isRequired: false, transformFunction: null }, enablePreviewMode: { classPropertyName: "enablePreviewMode", publicName: "enablePreviewMode", isSignal: true, isRequired: false, transformFunction: null }, showVariableValuesInPreview: { classPropertyName: "showVariableValuesInPreview", publicName: "showVariableValuesInPreview", isSignal: true, isRequired: false, transformFunction: null }, relatorios: { classPropertyName: "relatorios", publicName: "relatorios", isSignal: true, isRequired: false, transformFunction: null }, idRelatorioInitial: { classPropertyName: "idRelatorioInitial", publicName: "idRelatorioInitial", isSignal: true, isRequired: false, transformFunction: null }, printButton: { classPropertyName: "printButton", publicName: "printButton", isSignal: true, isRequired: false, transformFunction: null }, labelEmptyDropdown: { classPropertyName: "labelEmptyDropdown", publicName: "labelEmptyDropdown", isSignal: true, isRequired: false, transformFunction: null }, instrucoesTemplate: { classPropertyName: "instrucoesTemplate", publicName: "instrucoesTemplate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", outputRaw: "outputRaw", outputHtml: "outputHtml", previewHtmlOutput: "previewHtmlOutput", onCustomButtonClick: "onCustomButtonClick", idRelatorioInitial: "idRelatorioInitialChange" }, providers: ComponentProviders(KvEditorComponent), viewQueries: [{ propertyName: "opVariables", first: true, predicate: ["opVariables"], descendants: true }, { propertyName: "mentionAnchor", first: true, predicate: ["mentionAnchor"], descendants: true }, { propertyName: "buttonNameTooltip", first: true, predicate: ["buttonNameTooltip"], descendants: true }, { propertyName: "buttonNameInput", first: true, predicate: ["buttonNameInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"kv-editor-container h-full w-full max-h-full flex flex-column overflow-hidden\"\r\n>\r\n <div\r\n #editor\r\n id=\"kv-editor-toolbar\"\r\n [ngClass]=\"{ 'error-border-toolbar': hasControlError() }\"\r\n class=\"{{ showHeader() ? 'flex' : 'hidden' }} flex-column flex-initial\"\r\n >\r\n @if(relatorios().length > 0) {\r\n <div class=\"flex flex-row justify-content-between {{readonly() && 'pointer-events-none opacity-90'}}\">\r\n <div class=\"flex flex-row gap-2\">\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"op.toggle($event)\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-green-600 font-medium\"\r\n >\r\n contract\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">{{\r\n !clearedTemplate()\r\n ? relatorio()?.label || labelEmptyDropdown()\r\n : labelEmptyDropdown()\r\n }}</span>\r\n <span class=\"material-symbols-outlined text-lg\">\r\n keyboard_arrow_down\r\n </span>\r\n </div>\r\n\r\n @if(!clearedTemplate()) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"clearTemplate()\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-orange-600 font-medium\"\r\n [pTooltip]=\"'Limpar Template'\"\r\n >\r\n layers_clear\r\n </span>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"showInstrucoes()\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-blue-600 font-medium\"\r\n >\r\n info\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">Instru\u00E7\u00F5es</span>\r\n </div>\r\n </div>\r\n\r\n <!-- @if(printButton()) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"openRelatorio()\"\r\n >\r\n <span class=\"material-symbols-outlined text-lg font-medium\">\r\n print\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">Imprimir</span>\r\n </div>\r\n } -->\r\n </div>\r\n\r\n <p-divider class=\"w-full\"></p-divider>\r\n\r\n }\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-between w-full flex-initial\"\r\n >\r\n @if(isLoading()) {\r\n\r\n <div class=\"flex flex-row align-items-center gap-3 w-full\">\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex-row align-items-center flex-wrap gap-2 {{\r\n isLoading() ? 'hidden' : 'flex'\r\n }} w-full\"\r\n >\r\n <span class=\"ql-formats border-round-md\">\r\n <select class=\"ql-font\">\r\n <option value=\"roboto\">Roboto</option>\r\n <option value=\"arial\">Arial</option>\r\n <option value=\"times-new-roman\">Times New Roman</option>\r\n <option value=\"monospace\">Monospace</option>\r\n <option value=\"inter\">Inter</option>\r\n <option selected>Sans Serif</option>\r\n <option value=\"serif\">Serif</option>\r\n </select>\r\n\r\n <select class=\"ql-header\">\r\n <option value=\"1\">Titulo</option>\r\n <option value=\"2\">Subtitulo</option>\r\n <option selected>Normal</option>\r\n </select>\r\n\r\n <span class=\"ql-format-group\">\r\n <select title=\"Size\" class=\"ql-size\">\r\n <option value=\"15px\">15px</option>\r\n <option value=\"20px\">20px</option>\r\n <option value=\"30px\">30px</option>\r\n <option value=\"40px\">40px</option>\r\n <option value=\"50px\">50px</option>\r\n <option value=\"70px\">70px</option>\r\n <option value=\"90px\">90px</option>\r\n </select>\r\n </span>\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-bold\" pTooltip=\"Negrito\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-italic\" pTooltip=\"It\u00E1lico\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-underline\" pTooltip=\"Sublinhado\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-strike\" pTooltip=\"Tachado\" tooltipPosition=\"top\"></button>\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <select class=\"ql-color\" pTooltip=\"Cor da fonte\" tooltipPosition=\"top\"></select>\r\n <select class=\"ql-background\" pTooltip=\"Cor de fundo\" tooltipPosition=\"top\"></select>\r\n </span>\r\n\r\n @if(true) {\r\n <!-- <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-header\" value=\"1\"></button>\r\n <button class=\"ql-header\" value=\"2\"></button>\r\n </span> -->\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-link\" pTooltip=\"Inserir link\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-image\" pTooltip=\"Inserir imagem\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-video\" pTooltip=\"Inserir v\u00EDdeo\" tooltipPosition=\"top\"></button>\r\n <button id=\"insert-button\" pTooltip=\"Inserir bot\u00E3o\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">buttons_alt</span>\r\n </button>\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-list\" value=\"ordered\" pTooltip=\"Lista ordenada\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-list\" value=\"bullet\" pTooltip=\"Lista com marcadores\" tooltipPosition=\"top\"></button>\r\n <select class=\"ql-align\" pTooltip=\"Alinhamento\" tooltipPosition=\"top\"></select>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n style=\"height: 3px; border-top: none; border-bottom: none\"\r\n [style.borderRight]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n [style.borderLeft]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n >\r\n @if(isLoadingPdf()) {\r\n <p-progressBar mode=\"indeterminate\" [style]=\"{ height: '3px' }\" />\r\n }\r\n </div>\r\n\r\n <div class=\"flex flex-row flex-1 gap-0 overflow-auto\">\r\n <div\r\n id=\"kv-editor\"\r\n class=\"overflow-auto flex-1 scrollstyle\"\r\n [ngClass]=\"{\r\n 'error-border': hasControlError(),\r\n 'pointer-events-none opacity-60': isLoadingPdf()\r\n }\"\r\n [style.borderTop]=\"showHeader() ? 'none' : '1px solid #e5e7eb'\"\r\n [style.borderRight]=\"enablePreviewMode() ? 'none' : '1px solid #e5e7eb'\"\r\n ></div>\r\n\r\n @if(enablePreviewMode()) {\r\n <div class=\"flex flex-column flex-1\">\r\n <div \r\n class=\"flex align-items-center gap-2 px-3 py-2\" \r\n [style.borderRight]=\"'1px solid #e5e7eb'\"\r\n [style.borderLeft]=\"'1px solid #e5e7eb'\"\r\n >\r\n <span class=\"material-symbols-outlined text-blue-600 text-lg\">visibility</span>\r\n <span class=\"font-semibold text-gray-700 text-sm\">Preview</span>\r\n </div>\r\n \r\n <div\r\n id=\"kv-editor-preview\"\r\n class=\"overflow-auto flex-1 scrollstyle\"\r\n [innerHTML]=\"getPreviewContent\"\r\n [style.border]=\"'1px solid #e5e7eb'\"\r\n ></div>\r\n </div>\r\n }\r\n </div>\r\n\r\n</div>\r\n<kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n\r\n<!-- <link href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\" rel=\"stylesheet\" /> -->\r\n<link href=\"https://fonts.googleapis.com/css?family=Roboto\" rel=\"stylesheet\" />\r\n<script src=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js\"></script>\r\n<script src=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js\"></script>\r\n\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css\"\r\n/>\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css\"\r\n/>\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css\"\r\n/>\r\n\r\n<p-overlayPanel #op styleClass=\"overflow-hidden\">\r\n <div\r\n class=\"grid m-0 gap-2 p-2 max-w-20rem overflow-y-auto scrollstyle\"\r\n style=\"max-height: 16rem\"\r\n >\r\n @for(item of relatorios(); track $index) {\r\n <div\r\n class=\"col-12 cursor-pointer hover:bg-gray-100 transition-colors transition-duration-200 border-round-lg shadow-2 flex flex-column gap-2\"\r\n (click)=\"setRelatorio(item)\"\r\n >\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 justify-content-between\"\r\n >\r\n <span class=\"text-sm font-medium w-full\">{{ item.label }}</span>\r\n\r\n <kv-tags\r\n class=\"transition-opacity transition-duration-300 {{\r\n item?.id == idRelatorioSelected() ? 'opacity-100' : 'opacity-0'\r\n }}\"\r\n [tags]=\"[{ label: 'Selecionado', severity: 'primary' }]\"\r\n ></kv-tags>\r\n </div>\r\n <span class=\"text-xs text-gray-500\">{{ item.descricao }}</span>\r\n </div>\r\n }\r\n </div>\r\n</p-overlayPanel>\r\n\r\n<div class=\"kv-editor-container flex flex-column overflow-hidden relative\">\r\n <div\r\n #mentionAnchor\r\n style=\"position: fixed; width: 1px; height: 1px; opacity: 0\"\r\n ></div>\r\n</div>\r\n\r\n<p-overlayPanel\r\n #opVariables\r\n [appendTo]=\"'body'\"\r\n (onHide)=\"closeVariablesPanel()\"\r\n>\r\n <div\r\n class=\"flex flex-column gap-1 p-1 overflow-y-auto scroll-virtual border-round-lg\"\r\n style=\"max-height: 250px; min-width: 250px; background-color: #333333\"\r\n >\r\n @for(variable of filteredVariables(); track variable.id) {\r\n <div\r\n class=\"p-2 cursor-pointer transition-colors transition-duration-200 border-round-lg text-sm text-white option-dropdown\"\r\n (click)=\"selectVariableFromPanel(variable)\"\r\n >\r\n {{ variable.descricao }} (\r\n <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n </div>\r\n } @empty {\r\n <div class=\"p-2 text-sm text-gray-500\">Nenhuma vari\u00E1vel encontrada.</div>\r\n }\r\n </div>\r\n</p-overlayPanel>\r\n\r\n<div\r\n #buttonNameTooltip\r\n class=\"button-name-tooltip\"\r\n [class.show]=\"showButtonTooltip()\"\r\n [style.top.px]=\"tooltipPosition().top\"\r\n [style.left.px]=\"tooltipPosition().left\"\r\n>\r\n <div class=\"flex flex-column gap-2 p-3 bg-white border-round-lg shadow-3\" style=\"min-width: 280px\">\r\n <div class=\"flex flex-column gap-1\">\r\n <label class=\"text-sm font-semibold text-gray-700\">Nome do Bot\u00E3o</label>\r\n <input\r\n #buttonNameInput\r\n type=\"text\"\r\n class=\"p-2 border-1 border-gray-300 border-round-md text-sm\"\r\n placeholder=\"Ex: Aceitar Proposta\"\r\n [(ngModel)]=\"buttonNameValue\"\r\n (keydown.enter)=\"confirmButtonName()\"\r\n (keydown.escape)=\"cancelButtonName()\"\r\n />\r\n </div>\r\n <div class=\"flex flex-row gap-2 justify-content-end\">\r\n <button\r\n class=\"px-3 py-2 border-1 border-gray-300 bg-white text-gray-700 border-round-md cursor-pointer text-sm font-medium hover:bg-gray-100 transition-colors\"\r\n (click)=\"cancelButtonName()\"\r\n >\r\n Cancelar\r\n </button>\r\n <button\r\n class=\"px-3 py-2 border-none bg-blue-600 text-white border-round-md cursor-pointer text-sm font-medium hover:bg-blue-700 transition-colors\"\r\n (click)=\"confirmButtonName()\"\r\n >\r\n Inserir\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep .ql-font-roboto{font-family:Roboto,sans-serif}:host ::ng-deep .ql-font-inter{font-family:Inter var,sans-serif}:host ::ng-deep .ql-font-arial{font-family:Arial,Arial,sans-serif}:host ::ng-deep .ql-font-times-new-roman{font-family:Times New Roman,Times,serif}:host ::ng-deep .ql-tooltip.ql-editing[data-mode=video]{transform:translate(40%)}:host ::ng-deep #kv-editor-toolbar{border-radius:6px 6px 0 0;border:1px solid #e5e7eb}:host ::ng-deep #kv-editor{border-radius:0 0 6px 6px;border:1px solid #e5e7eb}.error-border-toolbar{transition:all ease-in .2s;border-top-color:#e24c4c!important;border-bottom-color:#e24c4c!important;border-left-color:#e24c4c!important;border-right-color:#e24c4c!important}.error-border{border-color:#e24c4c!important;transition:all ease-in .2s}:host ::ng-deep .blot-formatter__resize-handle{background:#eaeaea!important}:host ::ng-deep #kv-editor-preview{border-radius:0 0 6px 6px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper{font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:1.42;color:#000;padding:12px 15px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper p{margin:0;padding:0;white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper *{white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strong,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper b{font-weight:700!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper em,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper i{font-style:italic!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper u{text-decoration:underline!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper s,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strike{text-decoration:line-through!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-weight:700;margin:0;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1{font-size:2em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2{font-size:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3{font-size:1.17em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4{font-size:1em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5{font-size:.83em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-size:.67em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper a{color:#06c;text-decoration:underline}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper code{background-color:#f0f0f0;border-radius:3px;padding:2px 4px;font-family:monospace;font-size:85%}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre{background-color:#23241f;color:#f8f8f2;overflow:visible;border-radius:3px;padding:5px 10px;white-space:pre-wrap;margin-bottom:5px;margin-top:5px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre code{background-color:transparent;border-radius:0;color:inherit;font-size:100%;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ol,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ul{margin:0;padding-left:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper img{max-width:100%;height:auto}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table{width:100%;border-collapse:collapse;margin-bottom:1rem}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table td{border:1px solid #e5e7eb;padding:.5rem;text-align:left}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th{background-color:#f9fafb;font-weight:600}:ng-deep p{text-align:justify!important}::ng-deep .scrollstyle,::ng-deep .ql-editor{overflow-x:hidden}::ng-deep .scrollstyle::-webkit-scrollbar,::ng-deep .ql-editor::-webkit-scrollbar{width:6px}::ng-deep .scrollstyle::-webkit-scrollbar:hover,::ng-deep .ql-editor::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scrollstyle::-webkit-scrollbar-thumb,::ng-deep .ql-editor::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scrollstyle:hover::-webkit-scrollbar-thumb,::ng-deep .ql-editor:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scrollstyle::-webkit-scrollbar-track,::ng-deep .ql-editor::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}:host ::ng-deep .editor-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;display:flex;justify-content:center;align-items:center;z-index:100000;border-radius:inherit}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:after{background:#002542}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:before{background:#002542}::ng-deep .scroll-virtual{overflow-x:hidden}::ng-deep .scroll-virtual::-webkit-scrollbar{width:8px}::ng-deep .scroll-virtual::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scroll-virtual::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scroll-virtual:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scroll-virtual::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.option-dropdown{background-color:#333;transition:all ease-in .2s}.option-dropdown:hover{background-color:#444}.button-name-tooltip{position:fixed;z-index:10000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease-in-out;pointer-events:none}.button-name-tooltip.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.button-name-tooltip input{outline:none;transition:border-color .2s}.button-name-tooltip input:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a}.button-name-tooltip button{transition:all .2s}.button-name-tooltip button:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.button-name-tooltip button:active{transform:translateY(0)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i8$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i11.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: KvTagsComponent, selector: "kv-tags", inputs: ["tags", "hover", "clickable"], outputs: ["onClickTag"] }] }); }
|
|
6312
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvEditorComponent, selector: "kv-editor", inputs: { canvaHeigth: { classPropertyName: "canvaHeigth", publicName: "canvaHeigth", isSignal: false, isRequired: false, transformFunction: null }, contentType: { classPropertyName: "contentType", publicName: "contentType", isSignal: false, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: false, isRequired: false, transformFunction: null }, enablePreviewMode: { classPropertyName: "enablePreviewMode", publicName: "enablePreviewMode", isSignal: true, isRequired: false, transformFunction: null }, showVariableValuesInPreview: { classPropertyName: "showVariableValuesInPreview", publicName: "showVariableValuesInPreview", isSignal: true, isRequired: false, transformFunction: null }, relatorios: { classPropertyName: "relatorios", publicName: "relatorios", isSignal: true, isRequired: false, transformFunction: null }, idRelatorioInitial: { classPropertyName: "idRelatorioInitial", publicName: "idRelatorioInitial", isSignal: true, isRequired: false, transformFunction: null }, printButton: { classPropertyName: "printButton", publicName: "printButton", isSignal: true, isRequired: false, transformFunction: null }, labelEmptyDropdown: { classPropertyName: "labelEmptyDropdown", publicName: "labelEmptyDropdown", isSignal: true, isRequired: false, transformFunction: null }, instrucoesTemplate: { classPropertyName: "instrucoesTemplate", publicName: "instrucoesTemplate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showAlphaCrmButtons: { classPropertyName: "showAlphaCrmButtons", publicName: "showAlphaCrmButtons", isSignal: true, isRequired: false, transformFunction: null }, enableButtonInsert: { classPropertyName: "enableButtonInsert", publicName: "enableButtonInsert", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", outputRaw: "outputRaw", outputHtml: "outputHtml", previewHtmlOutput: "previewHtmlOutput", onCustomButtonClick: "onCustomButtonClick", idRelatorioInitial: "idRelatorioInitialChange" }, providers: ComponentProviders(KvEditorComponent), viewQueries: [{ propertyName: "opVariables", first: true, predicate: ["opVariables"], descendants: true }, { propertyName: "mentionAnchor", first: true, predicate: ["mentionAnchor"], descendants: true }, { propertyName: "buttonNameTooltip", first: true, predicate: ["buttonNameTooltip"], descendants: true }, { propertyName: "buttonNameInput", first: true, predicate: ["buttonNameInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"kv-editor-container h-full w-full max-h-full flex flex-column overflow-hidden\"\r\n>\r\n <div\r\n #editor\r\n id=\"kv-editor-toolbar\"\r\n [ngClass]=\"{ 'error-border-toolbar': hasControlError() }\"\r\n class=\"{{ showHeader() ? 'flex' : 'hidden' }} flex-column flex-initial\"\r\n >\r\n @if(relatorios().length > 0) {\r\n <div class=\"flex flex-row justify-content-between {{readonly() && 'pointer-events-none opacity-90'}}\">\r\n <div class=\"flex flex-row gap-2\">\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"op.toggle($event)\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-green-600 font-medium\"\r\n >\r\n contract\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">{{\r\n !clearedTemplate()\r\n ? relatorio()?.label || labelEmptyDropdown()\r\n : labelEmptyDropdown()\r\n }}</span>\r\n <span class=\"material-symbols-outlined text-lg\">\r\n keyboard_arrow_down\r\n </span>\r\n </div>\r\n\r\n @if(!clearedTemplate()) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"clearTemplate()\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-orange-600 font-medium\"\r\n [pTooltip]=\"'Limpar Template'\"\r\n >\r\n layers_clear\r\n </span>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"showInstrucoes()\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-blue-600 font-medium\"\r\n >\r\n info\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">Instru\u00E7\u00F5es</span>\r\n </div>\r\n </div>\r\n\r\n <!-- @if(printButton()) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"openRelatorio()\"\r\n >\r\n <span class=\"material-symbols-outlined text-lg font-medium\">\r\n print\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">Imprimir</span>\r\n </div>\r\n } -->\r\n </div>\r\n\r\n <p-divider class=\"w-full\"></p-divider>\r\n\r\n }\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-between w-full flex-initial\"\r\n >\r\n @if(isLoading()) {\r\n\r\n <div class=\"flex flex-row align-items-center gap-3 w-full\">\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex-row align-items-center flex-wrap gap-2 {{\r\n isLoading() ? 'hidden' : 'flex'\r\n }} w-full\"\r\n >\r\n <span class=\"ql-formats border-round-md\">\r\n <select class=\"ql-font\">\r\n <option value=\"roboto\">Roboto</option>\r\n <option value=\"arial\">Arial</option>\r\n <option value=\"times-new-roman\">Times New Roman</option>\r\n <option value=\"monospace\">Monospace</option>\r\n <option value=\"inter\">Inter</option>\r\n <option selected>Sans Serif</option>\r\n <option value=\"serif\">Serif</option>\r\n </select>\r\n\r\n <select class=\"ql-header\">\r\n <option value=\"1\">Titulo</option>\r\n <option value=\"2\">Subtitulo</option>\r\n <option selected>Normal</option>\r\n </select>\r\n\r\n <span class=\"ql-format-group\">\r\n <select title=\"Size\" class=\"ql-size\">\r\n <option value=\"15px\">15px</option>\r\n <option value=\"20px\">20px</option>\r\n <option value=\"30px\">30px</option>\r\n <option value=\"40px\">40px</option>\r\n <option value=\"50px\">50px</option>\r\n <option value=\"70px\">70px</option>\r\n <option value=\"90px\">90px</option>\r\n </select>\r\n </span>\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-bold\" pTooltip=\"Negrito\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-italic\" pTooltip=\"It\u00E1lico\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-underline\" pTooltip=\"Sublinhado\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-strike\" pTooltip=\"Tachado\" tooltipPosition=\"top\"></button>\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <select class=\"ql-color\" pTooltip=\"Cor da fonte\" tooltipPosition=\"top\"></select>\r\n <select class=\"ql-background\" pTooltip=\"Cor de fundo\" tooltipPosition=\"top\"></select>\r\n </span>\r\n\r\n @if(true) {\r\n <!-- <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-header\" value=\"1\"></button>\r\n <button class=\"ql-header\" value=\"2\"></button>\r\n </span> -->\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-link\" pTooltip=\"Inserir link\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-image\" pTooltip=\"Inserir imagem\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-video\" pTooltip=\"Inserir v\u00EDdeo\" tooltipPosition=\"top\"></button>\r\n\r\n @if(enableButtonInsert()) {\r\n <button id=\"insert-custom-button\" pTooltip=\"Inserir bot\u00E3o\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">buttons_alt</span>\r\n </button>\r\n }\r\n \r\n @if(showAlphaCrmButtons()) {\r\n <button id=\"btn-alpha-aceitar\" pTooltip=\"Inserir bot\u00E3o Aceitar\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">variable_add</span>\r\n </button>\r\n\r\n <button id=\"btn-alpha-cancelar\" pTooltip=\"Inserir bot\u00E3o Cancelar\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">variable_remove</span>\r\n </button>\r\n\r\n <button id=\"btn-alpha-aceitar-assinar\" pTooltip=\"Inserir bot\u00E3o Aceitar e Assinar Contrato\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1px); font-size: 20px;\">new_label</span>\r\n </button>\r\n }\r\n\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-list\" value=\"ordered\" pTooltip=\"Lista ordenada\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-list\" value=\"bullet\" pTooltip=\"Lista com marcadores\" tooltipPosition=\"top\"></button>\r\n <select class=\"ql-align\" pTooltip=\"Alinhamento\" tooltipPosition=\"top\"></select>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n style=\"height: 3px; border-top: none; border-bottom: none\"\r\n [style.borderRight]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n [style.borderLeft]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n >\r\n @if(isLoadingPdf()) {\r\n <p-progressBar mode=\"indeterminate\" [style]=\"{ height: '3px' }\" />\r\n }\r\n </div>\r\n\r\n <div class=\"flex flex-row flex-1 gap-0 overflow-auto\">\r\n <div\r\n id=\"kv-editor\"\r\n class=\"overflow-auto flex-1 scrollstyle\"\r\n [ngClass]=\"{\r\n 'error-border': hasControlError(),\r\n 'pointer-events-none opacity-60': isLoadingPdf()\r\n }\"\r\n [style.borderTop]=\"showHeader() ? 'none' : '1px solid #e5e7eb'\"\r\n [style.borderRight]=\"enablePreviewMode() ? 'none' : '1px solid #e5e7eb'\"\r\n ></div>\r\n\r\n @if(enablePreviewMode()) {\r\n <div class=\"flex flex-column flex-1\">\r\n <div \r\n class=\"flex align-items-center gap-2 px-3 py-2\" \r\n [style.borderRight]=\"'1px solid #e5e7eb'\"\r\n [style.borderLeft]=\"'1px solid #e5e7eb'\"\r\n >\r\n <span class=\"material-symbols-outlined text-blue-600 text-lg\">visibility</span>\r\n <span class=\"font-semibold text-gray-700 text-sm\">Preview</span>\r\n </div>\r\n \r\n <div\r\n id=\"kv-editor-preview\"\r\n class=\"overflow-auto flex-1 scrollstyle\"\r\n [innerHTML]=\"getPreviewContent\"\r\n [style.border]=\"'1px solid #e5e7eb'\"\r\n ></div>\r\n </div>\r\n }\r\n </div>\r\n\r\n</div>\r\n<kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n\r\n<!-- <link href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\" rel=\"stylesheet\" /> -->\r\n<link href=\"https://fonts.googleapis.com/css?family=Roboto\" rel=\"stylesheet\" />\r\n<script src=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js\"></script>\r\n<script src=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js\"></script>\r\n\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css\"\r\n/>\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css\"\r\n/>\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css\"\r\n/>\r\n\r\n<p-overlayPanel #op styleClass=\"overflow-hidden\">\r\n <div\r\n class=\"grid m-0 gap-2 p-2 max-w-20rem overflow-y-auto scrollstyle\"\r\n style=\"max-height: 16rem\"\r\n >\r\n @for(item of relatorios(); track $index) {\r\n <div\r\n class=\"col-12 cursor-pointer hover:bg-gray-100 transition-colors transition-duration-200 border-round-lg shadow-2 flex flex-column gap-2\"\r\n (click)=\"setRelatorio(item)\"\r\n >\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 justify-content-between\"\r\n >\r\n <span class=\"text-sm font-medium w-full\">{{ item.label }}</span>\r\n\r\n <kv-tags\r\n class=\"transition-opacity transition-duration-300 {{\r\n item?.id == idRelatorioSelected() ? 'opacity-100' : 'opacity-0'\r\n }}\"\r\n [tags]=\"[{ label: 'Selecionado', severity: 'primary' }]\"\r\n ></kv-tags>\r\n </div>\r\n <span class=\"text-xs text-gray-500\">{{ item.descricao }}</span>\r\n </div>\r\n }\r\n </div>\r\n</p-overlayPanel>\r\n\r\n<div class=\"kv-editor-container flex flex-column overflow-hidden relative\">\r\n <div\r\n #mentionAnchor\r\n style=\"position: fixed; width: 1px; height: 1px; opacity: 0\"\r\n ></div>\r\n</div>\r\n\r\n<p-overlayPanel\r\n #opVariables\r\n [appendTo]=\"'body'\"\r\n (onHide)=\"closeVariablesPanel()\"\r\n>\r\n <div\r\n class=\"flex flex-column gap-1 p-1 overflow-y-auto scroll-virtual border-round-lg\"\r\n style=\"max-height: 250px; min-width: 250px; background-color: #333333\"\r\n >\r\n @for(variable of filteredVariables(); track variable.id) {\r\n <div\r\n class=\"p-2 cursor-pointer transition-colors transition-duration-200 border-round-lg text-sm text-white option-dropdown\"\r\n (click)=\"selectVariableFromPanel(variable)\"\r\n >\r\n {{ variable.descricao }} (\r\n <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n </div>\r\n } @empty {\r\n <div class=\"p-2 text-sm text-gray-500\">Nenhuma vari\u00E1vel encontrada.</div>\r\n }\r\n </div>\r\n</p-overlayPanel>\r\n\r\n<div\r\n #buttonNameTooltip\r\n class=\"button-name-tooltip\"\r\n [class.show]=\"showButtonTooltip()\"\r\n [style.top.px]=\"tooltipPosition().top\"\r\n [style.left.px]=\"tooltipPosition().left\"\r\n>\r\n <div class=\"flex flex-column gap-2 p-3 bg-white border-round-lg shadow-3\" style=\"min-width: 280px\">\r\n <div class=\"flex flex-column gap-1\">\r\n <label class=\"text-sm font-semibold text-gray-700\">Nome do Bot\u00E3o</label>\r\n <input\r\n #buttonNameInput\r\n type=\"text\"\r\n class=\"p-2 border-1 border-gray-300 border-round-md text-sm\"\r\n placeholder=\"Ex: Aceitar Proposta\"\r\n [(ngModel)]=\"buttonNameValue\"\r\n (keydown.enter)=\"confirmButtonName()\"\r\n (keydown.escape)=\"cancelButtonName()\"\r\n />\r\n </div>\r\n <div class=\"flex flex-row gap-2 justify-content-end\">\r\n <button\r\n class=\"px-3 py-2 border-1 border-gray-300 bg-white text-gray-700 border-round-md cursor-pointer text-sm font-medium hover:bg-gray-100 transition-colors\"\r\n (click)=\"cancelButtonName()\"\r\n >\r\n Cancelar\r\n </button>\r\n <button\r\n class=\"px-3 py-2 border-none bg-blue-600 text-white border-round-md cursor-pointer text-sm font-medium hover:bg-blue-700 transition-colors\"\r\n (click)=\"confirmButtonName()\"\r\n >\r\n Inserir\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep .ql-font-roboto{font-family:Roboto,sans-serif}:host ::ng-deep .ql-font-inter{font-family:Inter var,sans-serif}:host ::ng-deep .ql-font-arial{font-family:Arial,Arial,sans-serif}:host ::ng-deep .ql-font-times-new-roman{font-family:Times New Roman,Times,serif}:host ::ng-deep .ql-tooltip.ql-editing[data-mode=video]{transform:translate(40%)}:host ::ng-deep #kv-editor-toolbar{border-radius:6px 6px 0 0;border:1px solid #e5e7eb}:host ::ng-deep #kv-editor{border-radius:0 0 6px 6px;border:1px solid #e5e7eb}.error-border-toolbar{transition:all ease-in .2s;border-top-color:#e24c4c!important;border-bottom-color:#e24c4c!important;border-left-color:#e24c4c!important;border-right-color:#e24c4c!important}.error-border{border-color:#e24c4c!important;transition:all ease-in .2s}:host ::ng-deep .blot-formatter__resize-handle{background:#eaeaea!important}:host ::ng-deep #kv-editor-preview{border-radius:0 0 6px 6px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper{font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:1.42;color:#000;padding:12px 15px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper p{margin:0;padding:0;white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper *{white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strong,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper b{font-weight:700!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper em,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper i{font-style:italic!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper u{text-decoration:underline!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper s,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strike{text-decoration:line-through!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-weight:700;margin:0;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1{font-size:2em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2{font-size:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3{font-size:1.17em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4{font-size:1em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5{font-size:.83em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-size:.67em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper a{color:#06c;text-decoration:underline}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper code{background-color:#f0f0f0;border-radius:3px;padding:2px 4px;font-family:monospace;font-size:85%}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre{background-color:#23241f;color:#f8f8f2;overflow:visible;border-radius:3px;padding:5px 10px;white-space:pre-wrap;margin-bottom:5px;margin-top:5px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre code{background-color:transparent;border-radius:0;color:inherit;font-size:100%;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ol,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ul{margin:0;padding-left:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper img{max-width:100%;height:auto}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table{width:100%;border-collapse:collapse;margin-bottom:1rem}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table td{border:1px solid #e5e7eb;padding:.5rem;text-align:left}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th{background-color:#f9fafb;font-weight:600}:ng-deep p{text-align:justify!important}::ng-deep .scrollstyle,::ng-deep .ql-editor{overflow-x:hidden}::ng-deep .scrollstyle::-webkit-scrollbar,::ng-deep .ql-editor::-webkit-scrollbar{width:6px}::ng-deep .scrollstyle::-webkit-scrollbar:hover,::ng-deep .ql-editor::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scrollstyle::-webkit-scrollbar-thumb,::ng-deep .ql-editor::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scrollstyle:hover::-webkit-scrollbar-thumb,::ng-deep .ql-editor:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scrollstyle::-webkit-scrollbar-track,::ng-deep .ql-editor::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}:host ::ng-deep .editor-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;display:flex;justify-content:center;align-items:center;z-index:100000;border-radius:inherit}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:after{background:#002542}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:before{background:#002542}::ng-deep .scroll-virtual{overflow-x:hidden}::ng-deep .scroll-virtual::-webkit-scrollbar{width:8px}::ng-deep .scroll-virtual::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scroll-virtual::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scroll-virtual:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scroll-virtual::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.option-dropdown{background-color:#333;transition:all ease-in .2s}.option-dropdown:hover{background-color:#444}.button-name-tooltip{position:fixed;z-index:10000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease-in-out;pointer-events:none}.button-name-tooltip.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.button-name-tooltip input{outline:none;transition:border-color .2s}.button-name-tooltip input:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a}.button-name-tooltip button{transition:all .2s}.button-name-tooltip button:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.button-name-tooltip button:active{transform:translateY(0)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i8$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i11.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: KvTagsComponent, selector: "kv-tags", inputs: ["tags", "hover", "clickable"], outputs: ["onClickTag"] }] }); }
|
|
6277
6313
|
}
|
|
6278
6314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvEditorComponent, decorators: [{
|
|
6279
6315
|
type: Component,
|
|
6280
|
-
args: [{ selector: 'kv-editor', providers: ComponentProviders(KvEditorComponent), template: "<div\r\n class=\"kv-editor-container h-full w-full max-h-full flex flex-column overflow-hidden\"\r\n>\r\n <div\r\n #editor\r\n id=\"kv-editor-toolbar\"\r\n [ngClass]=\"{ 'error-border-toolbar': hasControlError() }\"\r\n class=\"{{ showHeader() ? 'flex' : 'hidden' }} flex-column flex-initial\"\r\n >\r\n @if(relatorios().length > 0) {\r\n <div class=\"flex flex-row justify-content-between {{readonly() && 'pointer-events-none opacity-90'}}\">\r\n <div class=\"flex flex-row gap-2\">\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"op.toggle($event)\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-green-600 font-medium\"\r\n >\r\n contract\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">{{\r\n !clearedTemplate()\r\n ? relatorio()?.label || labelEmptyDropdown()\r\n : labelEmptyDropdown()\r\n }}</span>\r\n <span class=\"material-symbols-outlined text-lg\">\r\n keyboard_arrow_down\r\n </span>\r\n </div>\r\n\r\n @if(!clearedTemplate()) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"clearTemplate()\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-orange-600 font-medium\"\r\n [pTooltip]=\"'Limpar Template'\"\r\n >\r\n layers_clear\r\n </span>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"showInstrucoes()\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-blue-600 font-medium\"\r\n >\r\n info\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">Instru\u00E7\u00F5es</span>\r\n </div>\r\n </div>\r\n\r\n <!-- @if(printButton()) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"openRelatorio()\"\r\n >\r\n <span class=\"material-symbols-outlined text-lg font-medium\">\r\n print\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">Imprimir</span>\r\n </div>\r\n } -->\r\n </div>\r\n\r\n <p-divider class=\"w-full\"></p-divider>\r\n\r\n }\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-between w-full flex-initial\"\r\n >\r\n @if(isLoading()) {\r\n\r\n <div class=\"flex flex-row align-items-center gap-3 w-full\">\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex-row align-items-center flex-wrap gap-2 {{\r\n isLoading() ? 'hidden' : 'flex'\r\n }} w-full\"\r\n >\r\n <span class=\"ql-formats border-round-md\">\r\n <select class=\"ql-font\">\r\n <option value=\"roboto\">Roboto</option>\r\n <option value=\"arial\">Arial</option>\r\n <option value=\"times-new-roman\">Times New Roman</option>\r\n <option value=\"monospace\">Monospace</option>\r\n <option value=\"inter\">Inter</option>\r\n <option selected>Sans Serif</option>\r\n <option value=\"serif\">Serif</option>\r\n </select>\r\n\r\n <select class=\"ql-header\">\r\n <option value=\"1\">Titulo</option>\r\n <option value=\"2\">Subtitulo</option>\r\n <option selected>Normal</option>\r\n </select>\r\n\r\n <span class=\"ql-format-group\">\r\n <select title=\"Size\" class=\"ql-size\">\r\n <option value=\"15px\">15px</option>\r\n <option value=\"20px\">20px</option>\r\n <option value=\"30px\">30px</option>\r\n <option value=\"40px\">40px</option>\r\n <option value=\"50px\">50px</option>\r\n <option value=\"70px\">70px</option>\r\n <option value=\"90px\">90px</option>\r\n </select>\r\n </span>\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-bold\" pTooltip=\"Negrito\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-italic\" pTooltip=\"It\u00E1lico\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-underline\" pTooltip=\"Sublinhado\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-strike\" pTooltip=\"Tachado\" tooltipPosition=\"top\"></button>\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <select class=\"ql-color\" pTooltip=\"Cor da fonte\" tooltipPosition=\"top\"></select>\r\n <select class=\"ql-background\" pTooltip=\"Cor de fundo\" tooltipPosition=\"top\"></select>\r\n </span>\r\n\r\n @if(true) {\r\n <!-- <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-header\" value=\"1\"></button>\r\n <button class=\"ql-header\" value=\"2\"></button>\r\n </span> -->\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-link\" pTooltip=\"Inserir link\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-image\" pTooltip=\"Inserir imagem\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-video\" pTooltip=\"Inserir v\u00EDdeo\" tooltipPosition=\"top\"></button>\r\n <button id=\"insert-button\" pTooltip=\"Inserir bot\u00E3o\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">buttons_alt</span>\r\n </button>\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-list\" value=\"ordered\" pTooltip=\"Lista ordenada\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-list\" value=\"bullet\" pTooltip=\"Lista com marcadores\" tooltipPosition=\"top\"></button>\r\n <select class=\"ql-align\" pTooltip=\"Alinhamento\" tooltipPosition=\"top\"></select>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n style=\"height: 3px; border-top: none; border-bottom: none\"\r\n [style.borderRight]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n [style.borderLeft]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n >\r\n @if(isLoadingPdf()) {\r\n <p-progressBar mode=\"indeterminate\" [style]=\"{ height: '3px' }\" />\r\n }\r\n </div>\r\n\r\n <div class=\"flex flex-row flex-1 gap-0 overflow-auto\">\r\n <div\r\n id=\"kv-editor\"\r\n class=\"overflow-auto flex-1 scrollstyle\"\r\n [ngClass]=\"{\r\n 'error-border': hasControlError(),\r\n 'pointer-events-none opacity-60': isLoadingPdf()\r\n }\"\r\n [style.borderTop]=\"showHeader() ? 'none' : '1px solid #e5e7eb'\"\r\n [style.borderRight]=\"enablePreviewMode() ? 'none' : '1px solid #e5e7eb'\"\r\n ></div>\r\n\r\n @if(enablePreviewMode()) {\r\n <div class=\"flex flex-column flex-1\">\r\n <div \r\n class=\"flex align-items-center gap-2 px-3 py-2\" \r\n [style.borderRight]=\"'1px solid #e5e7eb'\"\r\n [style.borderLeft]=\"'1px solid #e5e7eb'\"\r\n >\r\n <span class=\"material-symbols-outlined text-blue-600 text-lg\">visibility</span>\r\n <span class=\"font-semibold text-gray-700 text-sm\">Preview</span>\r\n </div>\r\n \r\n <div\r\n id=\"kv-editor-preview\"\r\n class=\"overflow-auto flex-1 scrollstyle\"\r\n [innerHTML]=\"getPreviewContent\"\r\n [style.border]=\"'1px solid #e5e7eb'\"\r\n ></div>\r\n </div>\r\n }\r\n </div>\r\n\r\n</div>\r\n<kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n\r\n<!-- <link href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\" rel=\"stylesheet\" /> -->\r\n<link href=\"https://fonts.googleapis.com/css?family=Roboto\" rel=\"stylesheet\" />\r\n<script src=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js\"></script>\r\n<script src=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js\"></script>\r\n\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css\"\r\n/>\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css\"\r\n/>\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css\"\r\n/>\r\n\r\n<p-overlayPanel #op styleClass=\"overflow-hidden\">\r\n <div\r\n class=\"grid m-0 gap-2 p-2 max-w-20rem overflow-y-auto scrollstyle\"\r\n style=\"max-height: 16rem\"\r\n >\r\n @for(item of relatorios(); track $index) {\r\n <div\r\n class=\"col-12 cursor-pointer hover:bg-gray-100 transition-colors transition-duration-200 border-round-lg shadow-2 flex flex-column gap-2\"\r\n (click)=\"setRelatorio(item)\"\r\n >\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 justify-content-between\"\r\n >\r\n <span class=\"text-sm font-medium w-full\">{{ item.label }}</span>\r\n\r\n <kv-tags\r\n class=\"transition-opacity transition-duration-300 {{\r\n item?.id == idRelatorioSelected() ? 'opacity-100' : 'opacity-0'\r\n }}\"\r\n [tags]=\"[{ label: 'Selecionado', severity: 'primary' }]\"\r\n ></kv-tags>\r\n </div>\r\n <span class=\"text-xs text-gray-500\">{{ item.descricao }}</span>\r\n </div>\r\n }\r\n </div>\r\n</p-overlayPanel>\r\n\r\n<div class=\"kv-editor-container flex flex-column overflow-hidden relative\">\r\n <div\r\n #mentionAnchor\r\n style=\"position: fixed; width: 1px; height: 1px; opacity: 0\"\r\n ></div>\r\n</div>\r\n\r\n<p-overlayPanel\r\n #opVariables\r\n [appendTo]=\"'body'\"\r\n (onHide)=\"closeVariablesPanel()\"\r\n>\r\n <div\r\n class=\"flex flex-column gap-1 p-1 overflow-y-auto scroll-virtual border-round-lg\"\r\n style=\"max-height: 250px; min-width: 250px; background-color: #333333\"\r\n >\r\n @for(variable of filteredVariables(); track variable.id) {\r\n <div\r\n class=\"p-2 cursor-pointer transition-colors transition-duration-200 border-round-lg text-sm text-white option-dropdown\"\r\n (click)=\"selectVariableFromPanel(variable)\"\r\n >\r\n {{ variable.descricao }} (\r\n <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n </div>\r\n } @empty {\r\n <div class=\"p-2 text-sm text-gray-500\">Nenhuma vari\u00E1vel encontrada.</div>\r\n }\r\n </div>\r\n</p-overlayPanel>\r\n\r\n<div\r\n #buttonNameTooltip\r\n class=\"button-name-tooltip\"\r\n [class.show]=\"showButtonTooltip()\"\r\n [style.top.px]=\"tooltipPosition().top\"\r\n [style.left.px]=\"tooltipPosition().left\"\r\n>\r\n <div class=\"flex flex-column gap-2 p-3 bg-white border-round-lg shadow-3\" style=\"min-width: 280px\">\r\n <div class=\"flex flex-column gap-1\">\r\n <label class=\"text-sm font-semibold text-gray-700\">Nome do Bot\u00E3o</label>\r\n <input\r\n #buttonNameInput\r\n type=\"text\"\r\n class=\"p-2 border-1 border-gray-300 border-round-md text-sm\"\r\n placeholder=\"Ex: Aceitar Proposta\"\r\n [(ngModel)]=\"buttonNameValue\"\r\n (keydown.enter)=\"confirmButtonName()\"\r\n (keydown.escape)=\"cancelButtonName()\"\r\n />\r\n </div>\r\n <div class=\"flex flex-row gap-2 justify-content-end\">\r\n <button\r\n class=\"px-3 py-2 border-1 border-gray-300 bg-white text-gray-700 border-round-md cursor-pointer text-sm font-medium hover:bg-gray-100 transition-colors\"\r\n (click)=\"cancelButtonName()\"\r\n >\r\n Cancelar\r\n </button>\r\n <button\r\n class=\"px-3 py-2 border-none bg-blue-600 text-white border-round-md cursor-pointer text-sm font-medium hover:bg-blue-700 transition-colors\"\r\n (click)=\"confirmButtonName()\"\r\n >\r\n Inserir\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep .ql-font-roboto{font-family:Roboto,sans-serif}:host ::ng-deep .ql-font-inter{font-family:Inter var,sans-serif}:host ::ng-deep .ql-font-arial{font-family:Arial,Arial,sans-serif}:host ::ng-deep .ql-font-times-new-roman{font-family:Times New Roman,Times,serif}:host ::ng-deep .ql-tooltip.ql-editing[data-mode=video]{transform:translate(40%)}:host ::ng-deep #kv-editor-toolbar{border-radius:6px 6px 0 0;border:1px solid #e5e7eb}:host ::ng-deep #kv-editor{border-radius:0 0 6px 6px;border:1px solid #e5e7eb}.error-border-toolbar{transition:all ease-in .2s;border-top-color:#e24c4c!important;border-bottom-color:#e24c4c!important;border-left-color:#e24c4c!important;border-right-color:#e24c4c!important}.error-border{border-color:#e24c4c!important;transition:all ease-in .2s}:host ::ng-deep .blot-formatter__resize-handle{background:#eaeaea!important}:host ::ng-deep #kv-editor-preview{border-radius:0 0 6px 6px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper{font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:1.42;color:#000;padding:12px 15px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper p{margin:0;padding:0;white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper *{white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strong,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper b{font-weight:700!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper em,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper i{font-style:italic!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper u{text-decoration:underline!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper s,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strike{text-decoration:line-through!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-weight:700;margin:0;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1{font-size:2em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2{font-size:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3{font-size:1.17em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4{font-size:1em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5{font-size:.83em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-size:.67em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper a{color:#06c;text-decoration:underline}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper code{background-color:#f0f0f0;border-radius:3px;padding:2px 4px;font-family:monospace;font-size:85%}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre{background-color:#23241f;color:#f8f8f2;overflow:visible;border-radius:3px;padding:5px 10px;white-space:pre-wrap;margin-bottom:5px;margin-top:5px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre code{background-color:transparent;border-radius:0;color:inherit;font-size:100%;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ol,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ul{margin:0;padding-left:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper img{max-width:100%;height:auto}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table{width:100%;border-collapse:collapse;margin-bottom:1rem}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table td{border:1px solid #e5e7eb;padding:.5rem;text-align:left}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th{background-color:#f9fafb;font-weight:600}:ng-deep p{text-align:justify!important}::ng-deep .scrollstyle,::ng-deep .ql-editor{overflow-x:hidden}::ng-deep .scrollstyle::-webkit-scrollbar,::ng-deep .ql-editor::-webkit-scrollbar{width:6px}::ng-deep .scrollstyle::-webkit-scrollbar:hover,::ng-deep .ql-editor::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scrollstyle::-webkit-scrollbar-thumb,::ng-deep .ql-editor::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scrollstyle:hover::-webkit-scrollbar-thumb,::ng-deep .ql-editor:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scrollstyle::-webkit-scrollbar-track,::ng-deep .ql-editor::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}:host ::ng-deep .editor-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;display:flex;justify-content:center;align-items:center;z-index:100000;border-radius:inherit}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:after{background:#002542}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:before{background:#002542}::ng-deep .scroll-virtual{overflow-x:hidden}::ng-deep .scroll-virtual::-webkit-scrollbar{width:8px}::ng-deep .scroll-virtual::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scroll-virtual::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scroll-virtual:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scroll-virtual::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.option-dropdown{background-color:#333;transition:all ease-in .2s}.option-dropdown:hover{background-color:#444}.button-name-tooltip{position:fixed;z-index:10000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease-in-out;pointer-events:none}.button-name-tooltip.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.button-name-tooltip input{outline:none;transition:border-color .2s}.button-name-tooltip input:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a}.button-name-tooltip button{transition:all .2s}.button-name-tooltip button:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.button-name-tooltip button:active{transform:translateY(0)}\n"] }]
|
|
6316
|
+
args: [{ selector: 'kv-editor', providers: ComponentProviders(KvEditorComponent), template: "<div\r\n class=\"kv-editor-container h-full w-full max-h-full flex flex-column overflow-hidden\"\r\n>\r\n <div\r\n #editor\r\n id=\"kv-editor-toolbar\"\r\n [ngClass]=\"{ 'error-border-toolbar': hasControlError() }\"\r\n class=\"{{ showHeader() ? 'flex' : 'hidden' }} flex-column flex-initial\"\r\n >\r\n @if(relatorios().length > 0) {\r\n <div class=\"flex flex-row justify-content-between {{readonly() && 'pointer-events-none opacity-90'}}\">\r\n <div class=\"flex flex-row gap-2\">\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"op.toggle($event)\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-green-600 font-medium\"\r\n >\r\n contract\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">{{\r\n !clearedTemplate()\r\n ? relatorio()?.label || labelEmptyDropdown()\r\n : labelEmptyDropdown()\r\n }}</span>\r\n <span class=\"material-symbols-outlined text-lg\">\r\n keyboard_arrow_down\r\n </span>\r\n </div>\r\n\r\n @if(!clearedTemplate()) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"clearTemplate()\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-orange-600 font-medium\"\r\n [pTooltip]=\"'Limpar Template'\"\r\n >\r\n layers_clear\r\n </span>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"showInstrucoes()\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined text-lg text-blue-600 font-medium\"\r\n >\r\n info\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">Instru\u00E7\u00F5es</span>\r\n </div>\r\n </div>\r\n\r\n <!-- @if(printButton()) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 p-2 border-round-lg border-1 border-gray-200 hover:shadow-1 hover:bg-gray-100 cursor-pointer transition-all transition-duration-300\"\r\n (click)=\"openRelatorio()\"\r\n >\r\n <span class=\"material-symbols-outlined text-lg font-medium\">\r\n print\r\n </span>\r\n <span class=\"font-semibold text-xs text-gray-600\">Imprimir</span>\r\n </div>\r\n } -->\r\n </div>\r\n\r\n <p-divider class=\"w-full\"></p-divider>\r\n\r\n }\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-between w-full flex-initial\"\r\n >\r\n @if(isLoading()) {\r\n\r\n <div class=\"flex flex-row align-items-center gap-3 w-full\">\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n\r\n <p-skeleton\r\n styleClass=\"w-6rem\"\r\n [style]=\"{ height: '2rem' }\"\r\n ></p-skeleton>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex-row align-items-center flex-wrap gap-2 {{\r\n isLoading() ? 'hidden' : 'flex'\r\n }} w-full\"\r\n >\r\n <span class=\"ql-formats border-round-md\">\r\n <select class=\"ql-font\">\r\n <option value=\"roboto\">Roboto</option>\r\n <option value=\"arial\">Arial</option>\r\n <option value=\"times-new-roman\">Times New Roman</option>\r\n <option value=\"monospace\">Monospace</option>\r\n <option value=\"inter\">Inter</option>\r\n <option selected>Sans Serif</option>\r\n <option value=\"serif\">Serif</option>\r\n </select>\r\n\r\n <select class=\"ql-header\">\r\n <option value=\"1\">Titulo</option>\r\n <option value=\"2\">Subtitulo</option>\r\n <option selected>Normal</option>\r\n </select>\r\n\r\n <span class=\"ql-format-group\">\r\n <select title=\"Size\" class=\"ql-size\">\r\n <option value=\"15px\">15px</option>\r\n <option value=\"20px\">20px</option>\r\n <option value=\"30px\">30px</option>\r\n <option value=\"40px\">40px</option>\r\n <option value=\"50px\">50px</option>\r\n <option value=\"70px\">70px</option>\r\n <option value=\"90px\">90px</option>\r\n </select>\r\n </span>\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-bold\" pTooltip=\"Negrito\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-italic\" pTooltip=\"It\u00E1lico\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-underline\" pTooltip=\"Sublinhado\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-strike\" pTooltip=\"Tachado\" tooltipPosition=\"top\"></button>\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <select class=\"ql-color\" pTooltip=\"Cor da fonte\" tooltipPosition=\"top\"></select>\r\n <select class=\"ql-background\" pTooltip=\"Cor de fundo\" tooltipPosition=\"top\"></select>\r\n </span>\r\n\r\n @if(true) {\r\n <!-- <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-header\" value=\"1\"></button>\r\n <button class=\"ql-header\" value=\"2\"></button>\r\n </span> -->\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-link\" pTooltip=\"Inserir link\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-image\" pTooltip=\"Inserir imagem\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-video\" pTooltip=\"Inserir v\u00EDdeo\" tooltipPosition=\"top\"></button>\r\n\r\n @if(enableButtonInsert()) {\r\n <button id=\"insert-custom-button\" pTooltip=\"Inserir bot\u00E3o\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">buttons_alt</span>\r\n </button>\r\n }\r\n \r\n @if(showAlphaCrmButtons()) {\r\n <button id=\"btn-alpha-aceitar\" pTooltip=\"Inserir bot\u00E3o Aceitar\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">variable_add</span>\r\n </button>\r\n\r\n <button id=\"btn-alpha-cancelar\" pTooltip=\"Inserir bot\u00E3o Cancelar\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1.7px); font-size: 22px;\">variable_remove</span>\r\n </button>\r\n\r\n <button id=\"btn-alpha-aceitar-assinar\" pTooltip=\"Inserir bot\u00E3o Aceitar e Assinar Contrato\" tooltipPosition=\"top\">\r\n <span class=\"material-symbols-outlined\" style=\"transform: translate(0px, -1px); font-size: 20px;\">new_label</span>\r\n </button>\r\n }\r\n\r\n </span>\r\n\r\n <p-divider layout=\"vertical\"></p-divider>\r\n\r\n <span class=\"ql-formats border-round-md\">\r\n <button class=\"ql-list\" value=\"ordered\" pTooltip=\"Lista ordenada\" tooltipPosition=\"top\"></button>\r\n <button class=\"ql-list\" value=\"bullet\" pTooltip=\"Lista com marcadores\" tooltipPosition=\"top\"></button>\r\n <select class=\"ql-align\" pTooltip=\"Alinhamento\" tooltipPosition=\"top\"></select>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n style=\"height: 3px; border-top: none; border-bottom: none\"\r\n [style.borderRight]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n [style.borderLeft]=\"showHeader() ? '1px solid #e5e7eb' : 'none'\"\r\n >\r\n @if(isLoadingPdf()) {\r\n <p-progressBar mode=\"indeterminate\" [style]=\"{ height: '3px' }\" />\r\n }\r\n </div>\r\n\r\n <div class=\"flex flex-row flex-1 gap-0 overflow-auto\">\r\n <div\r\n id=\"kv-editor\"\r\n class=\"overflow-auto flex-1 scrollstyle\"\r\n [ngClass]=\"{\r\n 'error-border': hasControlError(),\r\n 'pointer-events-none opacity-60': isLoadingPdf()\r\n }\"\r\n [style.borderTop]=\"showHeader() ? 'none' : '1px solid #e5e7eb'\"\r\n [style.borderRight]=\"enablePreviewMode() ? 'none' : '1px solid #e5e7eb'\"\r\n ></div>\r\n\r\n @if(enablePreviewMode()) {\r\n <div class=\"flex flex-column flex-1\">\r\n <div \r\n class=\"flex align-items-center gap-2 px-3 py-2\" \r\n [style.borderRight]=\"'1px solid #e5e7eb'\"\r\n [style.borderLeft]=\"'1px solid #e5e7eb'\"\r\n >\r\n <span class=\"material-symbols-outlined text-blue-600 text-lg\">visibility</span>\r\n <span class=\"font-semibold text-gray-700 text-sm\">Preview</span>\r\n </div>\r\n \r\n <div\r\n id=\"kv-editor-preview\"\r\n class=\"overflow-auto flex-1 scrollstyle\"\r\n [innerHTML]=\"getPreviewContent\"\r\n [style.border]=\"'1px solid #e5e7eb'\"\r\n ></div>\r\n </div>\r\n }\r\n </div>\r\n\r\n</div>\r\n<kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n\r\n<!-- <link href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css\" rel=\"stylesheet\" /> -->\r\n<link href=\"https://fonts.googleapis.com/css?family=Roboto\" rel=\"stylesheet\" />\r\n<script src=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js\"></script>\r\n<script src=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js\"></script>\r\n\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css\"\r\n/>\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css\"\r\n/>\r\n<link\r\n rel=\"stylesheet\"\r\n href=\"https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css\"\r\n/>\r\n\r\n<p-overlayPanel #op styleClass=\"overflow-hidden\">\r\n <div\r\n class=\"grid m-0 gap-2 p-2 max-w-20rem overflow-y-auto scrollstyle\"\r\n style=\"max-height: 16rem\"\r\n >\r\n @for(item of relatorios(); track $index) {\r\n <div\r\n class=\"col-12 cursor-pointer hover:bg-gray-100 transition-colors transition-duration-200 border-round-lg shadow-2 flex flex-column gap-2\"\r\n (click)=\"setRelatorio(item)\"\r\n >\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 justify-content-between\"\r\n >\r\n <span class=\"text-sm font-medium w-full\">{{ item.label }}</span>\r\n\r\n <kv-tags\r\n class=\"transition-opacity transition-duration-300 {{\r\n item?.id == idRelatorioSelected() ? 'opacity-100' : 'opacity-0'\r\n }}\"\r\n [tags]=\"[{ label: 'Selecionado', severity: 'primary' }]\"\r\n ></kv-tags>\r\n </div>\r\n <span class=\"text-xs text-gray-500\">{{ item.descricao }}</span>\r\n </div>\r\n }\r\n </div>\r\n</p-overlayPanel>\r\n\r\n<div class=\"kv-editor-container flex flex-column overflow-hidden relative\">\r\n <div\r\n #mentionAnchor\r\n style=\"position: fixed; width: 1px; height: 1px; opacity: 0\"\r\n ></div>\r\n</div>\r\n\r\n<p-overlayPanel\r\n #opVariables\r\n [appendTo]=\"'body'\"\r\n (onHide)=\"closeVariablesPanel()\"\r\n>\r\n <div\r\n class=\"flex flex-column gap-1 p-1 overflow-y-auto scroll-virtual border-round-lg\"\r\n style=\"max-height: 250px; min-width: 250px; background-color: #333333\"\r\n >\r\n @for(variable of filteredVariables(); track variable.id) {\r\n <div\r\n class=\"p-2 cursor-pointer transition-colors transition-duration-200 border-round-lg text-sm text-white option-dropdown\"\r\n (click)=\"selectVariableFromPanel(variable)\"\r\n >\r\n {{ variable.descricao }} (\r\n <span class=\"text-gray-400\">{{ variable.value }}</span> )\r\n </div>\r\n } @empty {\r\n <div class=\"p-2 text-sm text-gray-500\">Nenhuma vari\u00E1vel encontrada.</div>\r\n }\r\n </div>\r\n</p-overlayPanel>\r\n\r\n<div\r\n #buttonNameTooltip\r\n class=\"button-name-tooltip\"\r\n [class.show]=\"showButtonTooltip()\"\r\n [style.top.px]=\"tooltipPosition().top\"\r\n [style.left.px]=\"tooltipPosition().left\"\r\n>\r\n <div class=\"flex flex-column gap-2 p-3 bg-white border-round-lg shadow-3\" style=\"min-width: 280px\">\r\n <div class=\"flex flex-column gap-1\">\r\n <label class=\"text-sm font-semibold text-gray-700\">Nome do Bot\u00E3o</label>\r\n <input\r\n #buttonNameInput\r\n type=\"text\"\r\n class=\"p-2 border-1 border-gray-300 border-round-md text-sm\"\r\n placeholder=\"Ex: Aceitar Proposta\"\r\n [(ngModel)]=\"buttonNameValue\"\r\n (keydown.enter)=\"confirmButtonName()\"\r\n (keydown.escape)=\"cancelButtonName()\"\r\n />\r\n </div>\r\n <div class=\"flex flex-row gap-2 justify-content-end\">\r\n <button\r\n class=\"px-3 py-2 border-1 border-gray-300 bg-white text-gray-700 border-round-md cursor-pointer text-sm font-medium hover:bg-gray-100 transition-colors\"\r\n (click)=\"cancelButtonName()\"\r\n >\r\n Cancelar\r\n </button>\r\n <button\r\n class=\"px-3 py-2 border-none bg-blue-600 text-white border-round-md cursor-pointer text-sm font-medium hover:bg-blue-700 transition-colors\"\r\n (click)=\"confirmButtonName()\"\r\n >\r\n Inserir\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep .ql-font-roboto{font-family:Roboto,sans-serif}:host ::ng-deep .ql-font-inter{font-family:Inter var,sans-serif}:host ::ng-deep .ql-font-arial{font-family:Arial,Arial,sans-serif}:host ::ng-deep .ql-font-times-new-roman{font-family:Times New Roman,Times,serif}:host ::ng-deep .ql-tooltip.ql-editing[data-mode=video]{transform:translate(40%)}:host ::ng-deep #kv-editor-toolbar{border-radius:6px 6px 0 0;border:1px solid #e5e7eb}:host ::ng-deep #kv-editor{border-radius:0 0 6px 6px;border:1px solid #e5e7eb}.error-border-toolbar{transition:all ease-in .2s;border-top-color:#e24c4c!important;border-bottom-color:#e24c4c!important;border-left-color:#e24c4c!important;border-right-color:#e24c4c!important}.error-border{border-color:#e24c4c!important;transition:all ease-in .2s}:host ::ng-deep .blot-formatter__resize-handle{background:#eaeaea!important}:host ::ng-deep #kv-editor-preview{border-radius:0 0 6px 6px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper{font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:1.42;color:#000;padding:12px 15px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper p{margin:0;padding:0;white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper *{white-space:pre-wrap}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strong,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper b{font-weight:700!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper em,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper i{font-style:italic!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper u{text-decoration:underline!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper s,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper strike{text-decoration:line-through!important}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-weight:700;margin:0;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h1{font-size:2em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h2{font-size:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h3{font-size:1.17em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h4{font-size:1em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h5{font-size:.83em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper h6{font-size:.67em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper a{color:#06c;text-decoration:underline}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper code{background-color:#f0f0f0;border-radius:3px;padding:2px 4px;font-family:monospace;font-size:85%}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre{background-color:#23241f;color:#f8f8f2;overflow:visible;border-radius:3px;padding:5px 10px;white-space:pre-wrap;margin-bottom:5px;margin-top:5px}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper pre code{background-color:transparent;border-radius:0;color:inherit;font-size:100%;padding:0}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ol,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper ul{margin:0;padding-left:1.5em}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper img{max-width:100%;height:auto}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table{width:100%;border-collapse:collapse;margin-bottom:1rem}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th,:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table td{border:1px solid #e5e7eb;padding:.5rem;text-align:left}:host ::ng-deep #kv-editor-preview .kv-editor-preview-wrapper table th{background-color:#f9fafb;font-weight:600}:ng-deep p{text-align:justify!important}::ng-deep .scrollstyle,::ng-deep .ql-editor{overflow-x:hidden}::ng-deep .scrollstyle::-webkit-scrollbar,::ng-deep .ql-editor::-webkit-scrollbar{width:6px}::ng-deep .scrollstyle::-webkit-scrollbar:hover,::ng-deep .ql-editor::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scrollstyle::-webkit-scrollbar-thumb,::ng-deep .ql-editor::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scrollstyle:hover::-webkit-scrollbar-thumb,::ng-deep .ql-editor:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scrollstyle::-webkit-scrollbar-track,::ng-deep .ql-editor::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}:host ::ng-deep .editor-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;display:flex;justify-content:center;align-items:center;z-index:100000;border-radius:inherit}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:after{background:#002542}::ng-deep .p-progressbar-indeterminate .p-progressbar-value:before{background:#002542}::ng-deep .scroll-virtual{overflow-x:hidden}::ng-deep .scroll-virtual::-webkit-scrollbar{width:8px}::ng-deep .scroll-virtual::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .scroll-virtual::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .scroll-virtual:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .scroll-virtual::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.option-dropdown{background-color:#333;transition:all ease-in .2s}.option-dropdown:hover{background-color:#444}.button-name-tooltip{position:fixed;z-index:10000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease-in-out;pointer-events:none}.button-name-tooltip.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.button-name-tooltip input{outline:none;transition:border-color .2s}.button-name-tooltip input:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a}.button-name-tooltip button{transition:all .2s}.button-name-tooltip button:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.button-name-tooltip button:active{transform:translateY(0)}\n"] }]
|
|
6281
6317
|
}], ctorParameters: () => [{ type: ComponentService }, { type: i1$6.DomSanitizer }], propDecorators: { canvaHeigth: [{
|
|
6282
6318
|
type: Input
|
|
6283
6319
|
}], contentType: [{
|
|
@@ -11966,6 +12002,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
11966
12002
|
}]
|
|
11967
12003
|
}] });
|
|
11968
12004
|
|
|
12005
|
+
/**
|
|
12006
|
+
* Componente para exibição de mensagens em formato de card.
|
|
12007
|
+
*
|
|
12008
|
+
* O componente `kv-card-message` permite renderizar mensagens com diferentes níveis de severidade,
|
|
12009
|
+
* podendo exibir mensagens simples ou listas de mensagens.
|
|
12010
|
+
*
|
|
12011
|
+
* @example
|
|
12012
|
+
* ```html
|
|
12013
|
+
* <kv-card-message [severity]="'success'" [message]="'Operação realizada com sucesso!'"></kv-card-message>
|
|
12014
|
+
*
|
|
12015
|
+
* <kv-card-message [severity]="'error'" [message]="['Erro 1', 'Erro 2', 'Erro 3']"></kv-card-message>
|
|
12016
|
+
* ```
|
|
12017
|
+
*
|
|
12018
|
+
* @input severity - Define o nível de severidade da mensagem ('info' | 'success' | 'warn' | 'error')
|
|
12019
|
+
* @input message - Mensagem a ser exibida (pode ser string única ou array de strings)
|
|
12020
|
+
*/
|
|
12021
|
+
class KvCardMessageComponent {
|
|
12022
|
+
constructor() {
|
|
12023
|
+
/**
|
|
12024
|
+
* Define o nível de severidade da mensagem
|
|
12025
|
+
* @default 'info'
|
|
12026
|
+
*/
|
|
12027
|
+
this.severity = 'info';
|
|
12028
|
+
/**
|
|
12029
|
+
* Array de mensagens do PrimeNG
|
|
12030
|
+
*/
|
|
12031
|
+
this.messages = [];
|
|
12032
|
+
}
|
|
12033
|
+
ngOnInit() {
|
|
12034
|
+
this.buildMessages();
|
|
12035
|
+
}
|
|
12036
|
+
/**
|
|
12037
|
+
* Constrói o array de mensagens para o PrimeNG
|
|
12038
|
+
*/
|
|
12039
|
+
buildMessages() {
|
|
12040
|
+
if (this.isMessageArray()) {
|
|
12041
|
+
this.messages = this.message.map(msg => ({
|
|
12042
|
+
severity: this.severity,
|
|
12043
|
+
detail: msg
|
|
12044
|
+
}));
|
|
12045
|
+
}
|
|
12046
|
+
else {
|
|
12047
|
+
this.messages = [{
|
|
12048
|
+
severity: this.severity,
|
|
12049
|
+
detail: this.message
|
|
12050
|
+
}];
|
|
12051
|
+
}
|
|
12052
|
+
}
|
|
12053
|
+
/**
|
|
12054
|
+
* Verifica se a mensagem é um array
|
|
12055
|
+
* @returns true se message for um array, false caso contrário
|
|
12056
|
+
*/
|
|
12057
|
+
isMessageArray() {
|
|
12058
|
+
return Array.isArray(this.message);
|
|
12059
|
+
}
|
|
12060
|
+
/**
|
|
12061
|
+
* Retorna o ícone apropriado baseado na severidade
|
|
12062
|
+
* @returns Nome do ícone material
|
|
12063
|
+
*/
|
|
12064
|
+
getIcon() {
|
|
12065
|
+
const icons = {
|
|
12066
|
+
info: 'info',
|
|
12067
|
+
success: 'check_circle',
|
|
12068
|
+
warn: 'warning',
|
|
12069
|
+
error: 'cancel'
|
|
12070
|
+
};
|
|
12071
|
+
return icons[this.severity] || 'info';
|
|
12072
|
+
}
|
|
12073
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvCardMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12074
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvCardMessageComponent, isStandalone: true, selector: "kv-card-message", inputs: { severity: "severity", message: "message" }, ngImport: i0, template: "<p-messages\r\n [value]=\"messages\"\r\n [closable]=\"false\">\r\n <ng-template pTemplate let-message>\r\n <div class=\"flex align-items-start\">\r\n <span class=\"material-symbols-outlined mr-2\">{{ getIcon() }}</span>\r\n <span>{{ message.detail }}</span>\r\n </div>\r\n </ng-template>\r\n</p-messages>\r\n", styles: ["::ng-deep .p-message .p-message-wrapper{padding:.5rem 1.5rem!important}::ng-deep .p-message .p-message-wrapper p{margin:0;padding:0;font-size:.9rem}::ng-deep .p-message .p-message-wrapper ul{margin:0;padding-left:1.2rem;list-style-type:disc}::ng-deep .p-message .p-message-wrapper ul li{margin:0;padding:0;font-size:.9rem}::ng-deep .p-message{margin:0;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i1$8.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }] }); }
|
|
12075
|
+
}
|
|
12076
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvCardMessageComponent, decorators: [{
|
|
12077
|
+
type: Component,
|
|
12078
|
+
args: [{ selector: 'kv-card-message', standalone: true, imports: [CommonModule, MessagesModule], template: "<p-messages\r\n [value]=\"messages\"\r\n [closable]=\"false\">\r\n <ng-template pTemplate let-message>\r\n <div class=\"flex align-items-start\">\r\n <span class=\"material-symbols-outlined mr-2\">{{ getIcon() }}</span>\r\n <span>{{ message.detail }}</span>\r\n </div>\r\n </ng-template>\r\n</p-messages>\r\n", styles: ["::ng-deep .p-message .p-message-wrapper{padding:.5rem 1.5rem!important}::ng-deep .p-message .p-message-wrapper p{margin:0;padding:0;font-size:.9rem}::ng-deep .p-message .p-message-wrapper ul{margin:0;padding-left:1.2rem;list-style-type:disc}::ng-deep .p-message .p-message-wrapper ul li{margin:0;padding:0;font-size:.9rem}::ng-deep .p-message{margin:0;padding:0}\n"] }]
|
|
12079
|
+
}], propDecorators: { severity: [{
|
|
12080
|
+
type: Input
|
|
12081
|
+
}], message: [{
|
|
12082
|
+
type: Input
|
|
12083
|
+
}] } });
|
|
12084
|
+
|
|
11969
12085
|
class KeevoComponentsModule {
|
|
11970
12086
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KeevoComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
11971
12087
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KeevoComponentsModule, imports: [KvAvatarModule,
|
|
@@ -11999,7 +12115,8 @@ class KeevoComponentsModule {
|
|
|
11999
12115
|
KvConfirmationModalModule,
|
|
12000
12116
|
KvFilterCardsModule,
|
|
12001
12117
|
SkeletonModule,
|
|
12002
|
-
KvTableDraggableModule
|
|
12118
|
+
KvTableDraggableModule,
|
|
12119
|
+
KvCardMessageComponent], exports: [KvAvatarModule,
|
|
12003
12120
|
KvButtonsModule,
|
|
12004
12121
|
KvButtonModule,
|
|
12005
12122
|
KvCarouselModule,
|
|
@@ -12030,7 +12147,8 @@ class KeevoComponentsModule {
|
|
|
12030
12147
|
KvTagModule,
|
|
12031
12148
|
KvConfirmationModalModule,
|
|
12032
12149
|
KvFilterCardsModule,
|
|
12033
|
-
KvTableDraggableModule
|
|
12150
|
+
KvTableDraggableModule,
|
|
12151
|
+
KvCardMessageComponent] }); }
|
|
12034
12152
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KeevoComponentsModule, imports: [KvAvatarModule,
|
|
12035
12153
|
KvButtonsModule,
|
|
12036
12154
|
KvButtonModule,
|
|
@@ -12062,7 +12180,8 @@ class KeevoComponentsModule {
|
|
|
12062
12180
|
KvConfirmationModalModule,
|
|
12063
12181
|
KvFilterCardsModule,
|
|
12064
12182
|
SkeletonModule,
|
|
12065
|
-
KvTableDraggableModule,
|
|
12183
|
+
KvTableDraggableModule,
|
|
12184
|
+
KvCardMessageComponent, KvAvatarModule,
|
|
12066
12185
|
KvButtonsModule,
|
|
12067
12186
|
KvButtonModule,
|
|
12068
12187
|
KvCarouselModule,
|
|
@@ -12131,7 +12250,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
12131
12250
|
KvConfirmationModalModule,
|
|
12132
12251
|
KvFilterCardsModule,
|
|
12133
12252
|
SkeletonModule,
|
|
12134
|
-
KvTableDraggableModule
|
|
12253
|
+
KvTableDraggableModule,
|
|
12254
|
+
KvCardMessageComponent
|
|
12135
12255
|
],
|
|
12136
12256
|
exports: [
|
|
12137
12257
|
KvAvatarModule,
|
|
@@ -12165,7 +12285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
12165
12285
|
KvTagModule,
|
|
12166
12286
|
KvConfirmationModalModule,
|
|
12167
12287
|
KvFilterCardsModule,
|
|
12168
|
-
KvTableDraggableModule
|
|
12288
|
+
KvTableDraggableModule,
|
|
12289
|
+
KvCardMessageComponent
|
|
12169
12290
|
],
|
|
12170
12291
|
}]
|
|
12171
12292
|
}] });
|
|
@@ -14253,11 +14374,11 @@ class KvKanbanComponent {
|
|
|
14253
14374
|
return `1 1 calc((100% - ${(totalColumns - 1) * 16}px) / ${totalColumns})`;
|
|
14254
14375
|
}
|
|
14255
14376
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvKanbanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14256
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvKanbanComponent, isStandalone: true, selector: "kv-kanban", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, columnConfigs: { classPropertyName: "columnConfigs", publicName: "columnConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnLists: { classPropertyName: "columnLists", publicName: "columnLists", isSignal: true, isRequired: false, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: true, isRequired: false, transformFunction: null }, showColumnsCounter: { classPropertyName: "showColumnsCounter", publicName: "showColumnsCounter", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardMoved: "onCardMoved", onActionClicked: "onActionClicked", onLoadMoreCards: "onLoadMoreCards", onSelectedCard: "onSelectedCard" }, viewQueries: [{ propertyName: "sharedMenu", first: true, predicate: ["sharedMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex w-full h-full\">\r\n <div class=\"board-wrapper flex-column lg:flex-row\" cdkDropListGroup>\r\n \r\n @for(config of columnConfigs(); track $index) {\r\n\r\n <div class=\"board-column\" [style.flex]=\"getColumnFlex()\">\r\n \r\n <div class=\"column-header\" [style.backgroundColor]=\"config.corTitulo\">\r\n <span class=\"text-base font-semibold\">{{ config.nome }}</span>\r\n @if(this.showColumnsCounter()) {\r\n <span class=\"column-count-badge px-2 py-1\" [style.color]=\"config.corTitulo\">{{ config.contador | number:'2.0' }}</span>\r\n }\r\n </div>\r\n\r\n <div \r\n class=\"column-content\"\r\n cdkDropList\r\n [id]=\"config.id.toString()\"\r\n [cdkDropListData]=\"getColumnList()(config.id)\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n (scroll)=\"onScroll($event, config.id)\">\r\n\r\n\r\n @for(item of getColumnList()(config.id); track $index) {\r\n \r\n <div class=\"kanban-card\" cdkDrag [cdkDragDisabled]=\"!enableDrag()\">\r\n\r\n @if(actions().length > 0) {\r\n <span class=\"material-symbols-outlined card-menu-btn text-xl text-black-alpha-50 hover:surface-200 border-round-lg\" (click)=\"openCardMenu($event, item)\">\r\n more_vert\r\n </span>\r\n }\r\n \r\n\r\n @if (item.status) {\r\n <div class=\"card-header mt-1\"> <span class=\"status-tag text-xs border-round-3xl py-1 px-2\" \r\n [style.backgroundColor]=\"item.statusColor\"\r\n [style.color]=\"item.statusLabelColor\">\r\n {{ item.status }}\r\n </span>\r\n </div>\r\n }\r\n\r\n <div class=\"card-body ml-1\">\r\n <p class=\"p-0 m-0 text-sm text-black-alpha-70 font-semibold mb-2 pr-4\">\r\n {{ item.titulo }}\r\n </p>\r\n \r\n <ng-container [ngTemplateOutlet]=\"cardTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </div>\r\n\r\n <div *cdkDragPlaceholder class=\"custom-placeholder\"></div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"column-footer text-xs text-black-alpha-80\">\r\n Ver {{ getColumnList()(config.id).length }} de {{ config.contador }}\r\n </div>\r\n\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n</div>\r\n\r\n<p-menu #sharedMenu [model]=\"currentMenuOptions\" [popup]=\"true\" appendTo=\"body\"></p-menu>", styles: [".board-wrapper{display:flex;flex:1 1 0%;gap:16px;overflow-x:auto;padding:20px;height:100
|
|
14377
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvKanbanComponent, isStandalone: true, selector: "kv-kanban", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, columnConfigs: { classPropertyName: "columnConfigs", publicName: "columnConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnLists: { classPropertyName: "columnLists", publicName: "columnLists", isSignal: true, isRequired: false, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: true, isRequired: false, transformFunction: null }, showColumnsCounter: { classPropertyName: "showColumnsCounter", publicName: "showColumnsCounter", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardMoved: "onCardMoved", onActionClicked: "onActionClicked", onLoadMoreCards: "onLoadMoreCards", onSelectedCard: "onSelectedCard" }, viewQueries: [{ propertyName: "sharedMenu", first: true, predicate: ["sharedMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex w-full h-full\">\r\n <div class=\"board-wrapper flex-column lg:flex-row\" cdkDropListGroup>\r\n \r\n @for(config of columnConfigs(); track $index) {\r\n\r\n <div class=\"board-column\" [style.flex]=\"getColumnFlex()\">\r\n \r\n <div class=\"column-header\" [style.backgroundColor]=\"config.corTitulo\">\r\n <span class=\"text-base font-semibold\">{{ config.nome }}</span>\r\n @if(this.showColumnsCounter()) {\r\n <span class=\"column-count-badge px-2 py-1\" [style.color]=\"config.corTitulo\">{{ config.contador | number:'2.0' }}</span>\r\n }\r\n </div>\r\n\r\n <div \r\n class=\"column-content\"\r\n cdkDropList\r\n [id]=\"config.id.toString()\"\r\n [cdkDropListData]=\"getColumnList()(config.id)\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n (scroll)=\"onScroll($event, config.id)\">\r\n\r\n\r\n @for(item of getColumnList()(config.id); track $index) {\r\n \r\n <div class=\"kanban-card\" cdkDrag [cdkDragDisabled]=\"!enableDrag()\">\r\n\r\n @if(actions().length > 0) {\r\n <span class=\"material-symbols-outlined card-menu-btn text-xl text-black-alpha-50 hover:surface-200 border-round-lg\" (click)=\"openCardMenu($event, item)\">\r\n more_vert\r\n </span>\r\n }\r\n \r\n\r\n @if (item.status) {\r\n <div class=\"card-header mt-1\"> <span class=\"status-tag text-xs border-round-3xl py-1 px-2\" \r\n [style.backgroundColor]=\"item.statusColor\"\r\n [style.color]=\"item.statusLabelColor\">\r\n {{ item.status }}\r\n </span>\r\n </div>\r\n }\r\n\r\n <div class=\"card-body ml-1\">\r\n <p class=\"p-0 m-0 text-sm text-black-alpha-70 font-semibold mb-2 pr-4\">\r\n {{ item.titulo }}\r\n </p>\r\n \r\n <ng-container [ngTemplateOutlet]=\"cardTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </div>\r\n\r\n <div *cdkDragPlaceholder class=\"custom-placeholder\"></div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"column-footer text-xs text-black-alpha-80\">\r\n Ver {{ getColumnList()(config.id).length }} de {{ config.contador }}\r\n </div>\r\n\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n</div>\r\n\r\n<p-menu #sharedMenu [model]=\"currentMenuOptions\" [popup]=\"true\" appendTo=\"body\"></p-menu>", styles: [".board-wrapper{display:flex;flex:1 1 0%;gap:16px;overflow-x:auto;padding:20px;height:100%;min-height:0}.board-column{display:flex;flex-direction:column;background-color:#f0f2f5;border-radius:18px;min-width:280px;overflow:visible;min-height:400px;max-height:600px}@media (min-width: 1024px){.board-column{height:100%;max-height:100%;min-height:0}}.column-header{padding:10px 20px;margin:7px;border-radius:18px;color:#fff;display:flex;justify-content:space-between;align-items:center;font-weight:600;gap:8px}.column-header span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.column-header .column-count-badge{background-color:#ffffffe6;border-radius:12px;font-size:.85rem;font-weight:700;flex-shrink:0}.column-content{flex:1 1 0;overflow-y:auto;overflow-x:visible;padding:12px;min-height:0}.column-content::-webkit-scrollbar{width:6px}.column-content::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}.kanban-card{background:#fff;border-radius:16px;padding:12px;margin-bottom:8px;box-shadow:0 4px 6px #0000001a;cursor:grab;transition:box-shadow .2s;position:relative}.kanban-card:active{cursor:grabbing}.kanban-card:hover{box-shadow:0 4px 8px #0000001a}.kanban-card.cdk-drag-disabled,.kanban-card.cdk-drag-disabled:active{cursor:default}.card-header{display:flex;margin-bottom:8px}.card-menu-btn{position:absolute;top:12px;right:8px;cursor:pointer;z-index:10;-webkit-user-select:none;user-select:none}.column-footer{padding:10px;text-align:center}.cdk-drag-preview{box-sizing:border-box;border-radius:8px;box-shadow:0 5px 15px #0003;background:#fff}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-content.cdk-drop-list-dragging .kanban-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .p-menu{scale:.8;z-index:1000!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i2.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }] }); }
|
|
14257
14378
|
}
|
|
14258
14379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvKanbanComponent, decorators: [{
|
|
14259
14380
|
type: Component,
|
|
14260
|
-
args: [{ standalone: true, selector: 'kv-kanban', imports: [CommonModule, DragDropModule, MenuModule], template: "<div class=\"flex w-full h-full\">\r\n <div class=\"board-wrapper flex-column lg:flex-row\" cdkDropListGroup>\r\n \r\n @for(config of columnConfigs(); track $index) {\r\n\r\n <div class=\"board-column\" [style.flex]=\"getColumnFlex()\">\r\n \r\n <div class=\"column-header\" [style.backgroundColor]=\"config.corTitulo\">\r\n <span class=\"text-base font-semibold\">{{ config.nome }}</span>\r\n @if(this.showColumnsCounter()) {\r\n <span class=\"column-count-badge px-2 py-1\" [style.color]=\"config.corTitulo\">{{ config.contador | number:'2.0' }}</span>\r\n }\r\n </div>\r\n\r\n <div \r\n class=\"column-content\"\r\n cdkDropList\r\n [id]=\"config.id.toString()\"\r\n [cdkDropListData]=\"getColumnList()(config.id)\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n (scroll)=\"onScroll($event, config.id)\">\r\n\r\n\r\n @for(item of getColumnList()(config.id); track $index) {\r\n \r\n <div class=\"kanban-card\" cdkDrag [cdkDragDisabled]=\"!enableDrag()\">\r\n\r\n @if(actions().length > 0) {\r\n <span class=\"material-symbols-outlined card-menu-btn text-xl text-black-alpha-50 hover:surface-200 border-round-lg\" (click)=\"openCardMenu($event, item)\">\r\n more_vert\r\n </span>\r\n }\r\n \r\n\r\n @if (item.status) {\r\n <div class=\"card-header mt-1\"> <span class=\"status-tag text-xs border-round-3xl py-1 px-2\" \r\n [style.backgroundColor]=\"item.statusColor\"\r\n [style.color]=\"item.statusLabelColor\">\r\n {{ item.status }}\r\n </span>\r\n </div>\r\n }\r\n\r\n <div class=\"card-body ml-1\">\r\n <p class=\"p-0 m-0 text-sm text-black-alpha-70 font-semibold mb-2 pr-4\">\r\n {{ item.titulo }}\r\n </p>\r\n \r\n <ng-container [ngTemplateOutlet]=\"cardTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </div>\r\n\r\n <div *cdkDragPlaceholder class=\"custom-placeholder\"></div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"column-footer text-xs text-black-alpha-80\">\r\n Ver {{ getColumnList()(config.id).length }} de {{ config.contador }}\r\n </div>\r\n\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n</div>\r\n\r\n<p-menu #sharedMenu [model]=\"currentMenuOptions\" [popup]=\"true\" appendTo=\"body\"></p-menu>", styles: [".board-wrapper{display:flex;flex:1 1 0%;gap:16px;overflow-x:auto;padding:20px;height:100
|
|
14381
|
+
args: [{ standalone: true, selector: 'kv-kanban', imports: [CommonModule, DragDropModule, MenuModule], template: "<div class=\"flex w-full h-full\">\r\n <div class=\"board-wrapper flex-column lg:flex-row\" cdkDropListGroup>\r\n \r\n @for(config of columnConfigs(); track $index) {\r\n\r\n <div class=\"board-column\" [style.flex]=\"getColumnFlex()\">\r\n \r\n <div class=\"column-header\" [style.backgroundColor]=\"config.corTitulo\">\r\n <span class=\"text-base font-semibold\">{{ config.nome }}</span>\r\n @if(this.showColumnsCounter()) {\r\n <span class=\"column-count-badge px-2 py-1\" [style.color]=\"config.corTitulo\">{{ config.contador | number:'2.0' }}</span>\r\n }\r\n </div>\r\n\r\n <div \r\n class=\"column-content\"\r\n cdkDropList\r\n [id]=\"config.id.toString()\"\r\n [cdkDropListData]=\"getColumnList()(config.id)\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n (scroll)=\"onScroll($event, config.id)\">\r\n\r\n\r\n @for(item of getColumnList()(config.id); track $index) {\r\n \r\n <div class=\"kanban-card\" cdkDrag [cdkDragDisabled]=\"!enableDrag()\">\r\n\r\n @if(actions().length > 0) {\r\n <span class=\"material-symbols-outlined card-menu-btn text-xl text-black-alpha-50 hover:surface-200 border-round-lg\" (click)=\"openCardMenu($event, item)\">\r\n more_vert\r\n </span>\r\n }\r\n \r\n\r\n @if (item.status) {\r\n <div class=\"card-header mt-1\"> <span class=\"status-tag text-xs border-round-3xl py-1 px-2\" \r\n [style.backgroundColor]=\"item.statusColor\"\r\n [style.color]=\"item.statusLabelColor\">\r\n {{ item.status }}\r\n </span>\r\n </div>\r\n }\r\n\r\n <div class=\"card-body ml-1\">\r\n <p class=\"p-0 m-0 text-sm text-black-alpha-70 font-semibold mb-2 pr-4\">\r\n {{ item.titulo }}\r\n </p>\r\n \r\n <ng-container [ngTemplateOutlet]=\"cardTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </div>\r\n\r\n <div *cdkDragPlaceholder class=\"custom-placeholder\"></div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"column-footer text-xs text-black-alpha-80\">\r\n Ver {{ getColumnList()(config.id).length }} de {{ config.contador }}\r\n </div>\r\n\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n</div>\r\n\r\n<p-menu #sharedMenu [model]=\"currentMenuOptions\" [popup]=\"true\" appendTo=\"body\"></p-menu>", styles: [".board-wrapper{display:flex;flex:1 1 0%;gap:16px;overflow-x:auto;padding:20px;height:100%;min-height:0}.board-column{display:flex;flex-direction:column;background-color:#f0f2f5;border-radius:18px;min-width:280px;overflow:visible;min-height:400px;max-height:600px}@media (min-width: 1024px){.board-column{height:100%;max-height:100%;min-height:0}}.column-header{padding:10px 20px;margin:7px;border-radius:18px;color:#fff;display:flex;justify-content:space-between;align-items:center;font-weight:600;gap:8px}.column-header span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.column-header .column-count-badge{background-color:#ffffffe6;border-radius:12px;font-size:.85rem;font-weight:700;flex-shrink:0}.column-content{flex:1 1 0;overflow-y:auto;overflow-x:visible;padding:12px;min-height:0}.column-content::-webkit-scrollbar{width:6px}.column-content::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}.kanban-card{background:#fff;border-radius:16px;padding:12px;margin-bottom:8px;box-shadow:0 4px 6px #0000001a;cursor:grab;transition:box-shadow .2s;position:relative}.kanban-card:active{cursor:grabbing}.kanban-card:hover{box-shadow:0 4px 8px #0000001a}.kanban-card.cdk-drag-disabled,.kanban-card.cdk-drag-disabled:active{cursor:default}.card-header{display:flex;margin-bottom:8px}.card-menu-btn{position:absolute;top:12px;right:8px;cursor:pointer;z-index:10;-webkit-user-select:none;user-select:none}.column-footer{padding:10px;text-align:center}.cdk-drag-preview{box-sizing:border-box;border-radius:8px;box-shadow:0 5px 15px #0003;background:#fff}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-content.cdk-drop-list-dragging .kanban-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .p-menu{scale:.8;z-index:1000!important}\n"] }]
|
|
14261
14382
|
}] });
|
|
14262
14383
|
|
|
14263
14384
|
/*
|
|
@@ -14272,5 +14393,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
14272
14393
|
* Generated bundle index. Do not edit.
|
|
14273
14394
|
*/
|
|
14274
14395
|
|
|
14275
|
-
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, KvCardSelectionComponent, KvCardSelectionModule, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, 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, 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, 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 };
|
|
14396
|
+
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, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, 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, 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, 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 };
|
|
14276
14397
|
//# sourceMappingURL=keevo-components.mjs.map
|