keevo-components 2.0.101 → 2.0.103
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/kv-inputs/kv-editor/components/kv-instrucoes-report/kv-instrucoes-report.component.mjs +3 -3
- package/esm2022/lib/components/kv-inputs/kv-editor/kv-editor.component.mjs +5 -3
- package/esm2022/lib/components/kv-inputs/kv-editor/services/kv-editor-pdf.service.mjs +5 -5
- package/esm2022/lib/components/kv-layout/layout/kv-layout.component.mjs +2 -2
- package/esm2022/lib/components/kv-timeline/kv-timeline.component.mjs +71 -0
- package/esm2022/public-api.mjs +6 -2
- package/fesm2022/keevo-components.mjs +77 -11
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/components/kv-inputs/kv-editor/kv-editor.component.d.ts +3 -1
- package/lib/components/kv-stepper/kv-stepper.component.d.ts +1 -1
- package/lib/components/kv-tag/kv-tag.component.d.ts +1 -1
- package/lib/components/kv-timeline/kv-timeline.component.d.ts +18 -0
- package/package.json +1 -1
- package/public-api.d.ts +5 -1
|
@@ -117,6 +117,7 @@ import * as i7$5 from 'primeng/inputgroupaddon';
|
|
|
117
117
|
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
|
|
118
118
|
import * as i7$4 from 'primeng/treeselect';
|
|
119
119
|
import { TreeSelectModule } from 'primeng/treeselect';
|
|
120
|
+
import * as i2$6 from 'primeng/timeline';
|
|
120
121
|
import { TimelineModule } from 'primeng/timeline';
|
|
121
122
|
import { SplitterModule } from 'primeng/splitter';
|
|
122
123
|
import { SliderModule } from 'primeng/slider';
|
|
@@ -4906,11 +4907,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
4906
4907
|
|
|
4907
4908
|
class KvInstrucoesReportComponent {
|
|
4908
4909
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstrucoesReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4909
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvInstrucoesReportComponent, isStandalone: true, selector: "kv-instrucoes-report", ngImport: i0, template: "<p
|
|
4910
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvInstrucoesReportComponent, isStandalone: true, selector: "kv-instrucoes-report", ngImport: i0, template: "<div class=\"p-4\">\r\n <p class=\"text-lg font-semibold mb-3\">Instru\u00E7\u00F5es padr\u00E3o do editor:</p>\r\n <ul class=\"list-disc pl-5 space-y-2\">\r\n <li>Use o toolbar para formatar seu texto</li>\r\n <li>\r\n Digite <code class=\"bg-gray-100 px-1 rounded\">#</code> seguido do nome de\r\n uma vari\u00E1vel para inserir vari\u00E1veis\r\n </li>\r\n <li>Voc\u00EA pode inserir imagens e links atrav\u00E9s dos bot\u00F5es da toolbar</li>\r\n <li>Use listas ordenadas e n\u00E3o ordenadas para organizar o conte\u00FAdo</li>\r\n </ul>\r\n</div>\r\n", styles: [""] }); }
|
|
4910
4911
|
}
|
|
4911
4912
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstrucoesReportComponent, decorators: [{
|
|
4912
4913
|
type: Component,
|
|
4913
|
-
args: [{ selector: 'kv-instrucoes-report', standalone: true, imports: [], template: "<p
|
|
4914
|
+
args: [{ selector: 'kv-instrucoes-report', standalone: true, imports: [], template: "<div class=\"p-4\">\r\n <p class=\"text-lg font-semibold mb-3\">Instru\u00E7\u00F5es padr\u00E3o do editor:</p>\r\n <ul class=\"list-disc pl-5 space-y-2\">\r\n <li>Use o toolbar para formatar seu texto</li>\r\n <li>\r\n Digite <code class=\"bg-gray-100 px-1 rounded\">#</code> seguido do nome de\r\n uma vari\u00E1vel para inserir vari\u00E1veis\r\n </li>\r\n <li>Voc\u00EA pode inserir imagens e links atrav\u00E9s dos bot\u00F5es da toolbar</li>\r\n <li>Use listas ordenadas e n\u00E3o ordenadas para organizar o conte\u00FAdo</li>\r\n </ul>\r\n</div>\r\n" }]
|
|
4914
4915
|
}] });
|
|
4915
4916
|
|
|
4916
4917
|
class KvEditorQuillService {
|
|
@@ -5367,12 +5368,12 @@ class KvEditorPdfService {
|
|
|
5367
5368
|
<style>
|
|
5368
5369
|
#temp-pdf-render-area {
|
|
5369
5370
|
font-family: 'Sans Serif', Arial, sans-serif;
|
|
5370
|
-
font-size:
|
|
5371
|
-
line-height: 1.
|
|
5371
|
+
font-size: 9pt;
|
|
5372
|
+
line-height: 1.2;
|
|
5372
5373
|
text-align: justify;
|
|
5373
5374
|
}
|
|
5374
5375
|
#temp-pdf-render-area p {
|
|
5375
|
-
min-height: 1.
|
|
5376
|
+
min-height: 1.2em;
|
|
5376
5377
|
margin: 0;
|
|
5377
5378
|
padding: 0;
|
|
5378
5379
|
}
|
|
@@ -5406,7 +5407,7 @@ class KvEditorPdfService {
|
|
|
5406
5407
|
renderContainer.style.backgroundColor = 'white';
|
|
5407
5408
|
renderContainer.style.padding = '12mm';
|
|
5408
5409
|
renderContainer.style.width = '210mm';
|
|
5409
|
-
renderContainer.style.fontSize = '
|
|
5410
|
+
renderContainer.style.fontSize = '12px';
|
|
5410
5411
|
renderContainer.innerHTML = htmlContent;
|
|
5411
5412
|
document.body.appendChild(renderContainer);
|
|
5412
5413
|
try {
|
|
@@ -5762,6 +5763,8 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5762
5763
|
// Inputs para relatórios
|
|
5763
5764
|
this.relatorios = input([]);
|
|
5764
5765
|
this.idRelatorioInitial = input(0);
|
|
5766
|
+
this.printButton = input(true);
|
|
5767
|
+
this.labelEmptyDropdown = input('Selecione um relatório');
|
|
5765
5768
|
// Computed properties para relatórios
|
|
5766
5769
|
this.idRelatorioSelected = computed(() => this.relatorioService.getIdRelatorioSelected());
|
|
5767
5770
|
this.relatorio = computed(() => this.relatorioService.getRelatorioSelected());
|
|
@@ -5927,11 +5930,11 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5927
5930
|
});
|
|
5928
5931
|
}
|
|
5929
5932
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvEditorComponent, deps: [{ token: ComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5930
|
-
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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: false, 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 } }, outputs: { onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", outputRaw: "outputRaw", outputHtml: "outputHtml" }, providers: ComponentProviders(KvEditorComponent), viewQueries: [{ propertyName: "opVariables", first: true, predicate: ["opVariables"], descendants: true }, { propertyName: "mentionAnchor", first: true, predicate: ["mentionAnchor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"kv-editor-container h-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=\"flex flex-column flex-initial\"\r\n >\r\n @if(relatorios().length > 0) {\r\n <div class=\"flex flex-row justify-content-between\">\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 relatorio()?.label || \"Selecione um relat\u00F3rio\"\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 <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 <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 </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\"></button>\r\n <button class=\"ql-italic\"></button>\r\n <button class=\"ql-underline\"></button>\r\n <button class=\"ql-strike\"></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\"></select>\r\n <select class=\"ql-background\"></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\"></button>\r\n <button class=\"ql-image\"></button>\r\n <button class=\"ql-video\"></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\"></button>\r\n <button class=\"ql-list\" value=\"bullet\"></button>\r\n <select class=\"ql-align\"></select>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n style=\"\r\n height: 3px;\r\n border-right: 1px solid #e5e7eb;\r\n border-left: 1px solid #e5e7eb;\r\n border-top: none;\r\n border-bottom: none;\r\n \"\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\r\n id=\"kv-editor\"\r\n class=\"overflow-auto w-full flex-1 scrollstyle\"\r\n [ngClass]=\"{\r\n 'error-border': hasControlError(),\r\n 'pointer-events-none opacity-60': isLoadingPdf()\r\n }\"\r\n style=\"border-top: none\"\r\n ></div>\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 }} ( <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", 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}: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}\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: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i6.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i7$3.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i8$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: KvTagsComponent, selector: "kv-tags", inputs: ["tags", "hover"], outputs: ["onClickTag"] }] }); }
|
|
5933
|
+
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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: false, 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 } }, outputs: { onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", outputRaw: "outputRaw", outputHtml: "outputHtml" }, providers: ComponentProviders(KvEditorComponent), viewQueries: [{ propertyName: "opVariables", first: true, predicate: ["opVariables"], descendants: true }, { propertyName: "mentionAnchor", first: true, predicate: ["mentionAnchor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"kv-editor-container h-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=\"flex flex-column flex-initial\"\r\n >\r\n @if(relatorios().length > 0) {\r\n <div class=\"flex flex-row justify-content-between\">\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 relatorio()?.label || 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 <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\"></button>\r\n <button class=\"ql-italic\"></button>\r\n <button class=\"ql-underline\"></button>\r\n <button class=\"ql-strike\"></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\"></select>\r\n <select class=\"ql-background\"></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\"></button>\r\n <button class=\"ql-image\"></button>\r\n <button class=\"ql-video\"></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\"></button>\r\n <button class=\"ql-list\" value=\"bullet\"></button>\r\n <select class=\"ql-align\"></select>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n style=\"\r\n height: 3px;\r\n border-right: 1px solid #e5e7eb;\r\n border-left: 1px solid #e5e7eb;\r\n border-top: none;\r\n border-bottom: none;\r\n \"\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\r\n id=\"kv-editor\"\r\n class=\"overflow-auto w-full flex-1 scrollstyle\"\r\n [ngClass]=\"{\r\n 'error-border': hasControlError(),\r\n 'pointer-events-none opacity-60': isLoadingPdf()\r\n }\"\r\n style=\"border-top: none\"\r\n ></div>\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", 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}: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}\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: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i6.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i7$3.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i8$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: KvTagsComponent, selector: "kv-tags", inputs: ["tags", "hover"], outputs: ["onClickTag"] }] }); }
|
|
5931
5934
|
}
|
|
5932
5935
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvEditorComponent, decorators: [{
|
|
5933
5936
|
type: Component,
|
|
5934
|
-
args: [{ selector: 'kv-editor', providers: ComponentProviders(KvEditorComponent), template: "<div\r\n class=\"kv-editor-container h-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=\"flex flex-column flex-initial\"\r\n >\r\n @if(relatorios().length > 0) {\r\n <div class=\"flex flex-row justify-content-between\">\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 relatorio()?.label || \"Selecione um relat\u00F3rio\"\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 <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 <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 </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\"></button>\r\n <button class=\"ql-italic\"></button>\r\n <button class=\"ql-underline\"></button>\r\n <button class=\"ql-strike\"></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\"></select>\r\n <select class=\"ql-background\"></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\"></button>\r\n <button class=\"ql-image\"></button>\r\n <button class=\"ql-video\"></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\"></button>\r\n <button class=\"ql-list\" value=\"bullet\"></button>\r\n <select class=\"ql-align\"></select>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n style=\"\r\n height: 3px;\r\n border-right: 1px solid #e5e7eb;\r\n border-left: 1px solid #e5e7eb;\r\n border-top: none;\r\n border-bottom: none;\r\n \"\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\r\n id=\"kv-editor\"\r\n class=\"overflow-auto w-full flex-1 scrollstyle\"\r\n [ngClass]=\"{\r\n 'error-border': hasControlError(),\r\n 'pointer-events-none opacity-60': isLoadingPdf()\r\n }\"\r\n style=\"border-top: none\"\r\n ></div>\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 }} ( <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", 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}: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}\n"] }]
|
|
5937
|
+
args: [{ selector: 'kv-editor', providers: ComponentProviders(KvEditorComponent), template: "<div\r\n class=\"kv-editor-container h-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=\"flex flex-column flex-initial\"\r\n >\r\n @if(relatorios().length > 0) {\r\n <div class=\"flex flex-row justify-content-between\">\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 relatorio()?.label || 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 <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\"></button>\r\n <button class=\"ql-italic\"></button>\r\n <button class=\"ql-underline\"></button>\r\n <button class=\"ql-strike\"></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\"></select>\r\n <select class=\"ql-background\"></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\"></button>\r\n <button class=\"ql-image\"></button>\r\n <button class=\"ql-video\"></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\"></button>\r\n <button class=\"ql-list\" value=\"bullet\"></button>\r\n <select class=\"ql-align\"></select>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n style=\"\r\n height: 3px;\r\n border-right: 1px solid #e5e7eb;\r\n border-left: 1px solid #e5e7eb;\r\n border-top: none;\r\n border-bottom: none;\r\n \"\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\r\n id=\"kv-editor\"\r\n class=\"overflow-auto w-full flex-1 scrollstyle\"\r\n [ngClass]=\"{\r\n 'error-border': hasControlError(),\r\n 'pointer-events-none opacity-60': isLoadingPdf()\r\n }\"\r\n style=\"border-top: none\"\r\n ></div>\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", 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}: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}\n"] }]
|
|
5935
5938
|
}], ctorParameters: () => [{ type: ComponentService }], propDecorators: { canvaHeigth: [{
|
|
5936
5939
|
type: Input
|
|
5937
5940
|
}], contentType: [{
|
|
@@ -7298,11 +7301,11 @@ class KvLayoutComponent {
|
|
|
7298
7301
|
this.showVideoDocEmit.emit(trilha);
|
|
7299
7302
|
}
|
|
7300
7303
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$2.FormBuilder }, { token: i3$1.Router }, { token: i3$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvLayoutComponent, selector: "kv-layout", inputs: { apps: { classPropertyName: "apps", publicName: "apps", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, useCard: { classPropertyName: "useCard", publicName: "useCard", isSignal: false, isRequired: false, transformFunction: null }, topMenusVisible: { classPropertyName: "topMenusVisible", publicName: "topMenusVisible", isSignal: true, isRequired: false, transformFunction: null }, profileImage: { classPropertyName: "profileImage", publicName: "profileImage", isSignal: true, isRequired: false, transformFunction: null }, breadCrumbItems: { classPropertyName: "breadCrumbItems", publicName: "breadCrumbItems", isSignal: false, isRequired: false, transformFunction: null }, masters: { classPropertyName: "masters", publicName: "masters", isSignal: false, isRequired: false, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, expandMenu: { classPropertyName: "expandMenu", publicName: "expandMenu", isSignal: true, isRequired: false, transformFunction: null }, logoMenuExpand: { classPropertyName: "logoMenuExpand", publicName: "logoMenuExpand", isSignal: false, isRequired: false, transformFunction: null }, logoMenuHide: { classPropertyName: "logoMenuHide", publicName: "logoMenuHide", isSignal: false, isRequired: false, transformFunction: null }, selectedApp: { classPropertyName: "selectedApp", publicName: "selectedApp", isSignal: false, isRequired: false, transformFunction: null }, selectedEmpresa: { classPropertyName: "selectedEmpresa", publicName: "selectedEmpresa", isSignal: false, isRequired: false, transformFunction: null }, selectedMaster: { classPropertyName: "selectedMaster", publicName: "selectedMaster", isSignal: false, isRequired: false, transformFunction: null }, showButtonApps: { classPropertyName: "showButtonApps", publicName: "showButtonApps", isSignal: false, isRequired: false, transformFunction: null }, showButtonUser: { classPropertyName: "showButtonUser", publicName: "showButtonUser", isSignal: false, isRequired: false, transformFunction: null }, showExpandMenu: { classPropertyName: "showExpandMenu", publicName: "showExpandMenu", isSignal: false, isRequired: false, transformFunction: null }, showDropdownLicenca: { classPropertyName: "showDropdownLicenca", publicName: "showDropdownLicenca", isSignal: false, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: false, isRequired: false, transformFunction: null }, showTrocaEmpresa: { classPropertyName: "showTrocaEmpresa", publicName: "showTrocaEmpresa", isSignal: false, isRequired: false, transformFunction: null }, showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: false, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, userEmail: { classPropertyName: "userEmail", publicName: "userEmail", isSignal: false, isRequired: false, transformFunction: null }, masterName: { classPropertyName: "masterName", publicName: "masterName", isSignal: false, isRequired: false, transformFunction: null }, empresaName: { classPropertyName: "empresaName", publicName: "empresaName", isSignal: false, isRequired: false, transformFunction: null }, idsAplicativosMenuHide: { classPropertyName: "idsAplicativosMenuHide", publicName: "idsAplicativosMenuHide", isSignal: false, isRequired: false, transformFunction: null }, useSelectionApps: { classPropertyName: "useSelectionApps", publicName: "useSelectionApps", isSignal: false, isRequired: false, transformFunction: null }, showTrilhaConhecimento: { classPropertyName: "showTrilhaConhecimento", publicName: "showTrilhaConhecimento", isSignal: false, isRequired: false, transformFunction: null }, isDisableSelectionEmpresa: { classPropertyName: "isDisableSelectionEmpresa", publicName: "isDisableSelectionEmpresa", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { menus: "menusChange", expandMenu: "expandMenuChange", accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit", navigateToDefaultRouteEmit: "navigateToDefaultRouteEmit", downloadDocEmit: "downloadDocEmit", showVideoDocEmit: "showVideoDocEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "meusDadosPanel", first: true, predicate: ["meusDadosPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"h-full flex flex-row full-container\">\r\n @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n styleClass=\"transition-all h-full\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"h-full flex flex-column overflow-hidden p-2\">\r\n <div\r\n class=\"flex-none flex flex-column gap-3 justify-content-between flex-shrink-0 overflow-hidden\"\r\n >\r\n <!-- LOGO -->\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} p-2\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n @if(expandMenu() && logoMenuExpand){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'2.4rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-0\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Logo para o menu minimizado-->\r\n @if(!expandMenu() && logoMenuHide){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'2.4rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Toggle menu -->\r\n @if(showExpandMenu){\r\n <!-- <span class=\"material-symbols-outlined side-menu-item\" (click)=\"expandMenu.set(!expandMenu())\">menu</span> -->\r\n }\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 troca-empresa-container mb-3 py-2 {{\r\n !isDisableSelectionEmpresa && 'selectable-troca-empresa'\r\n }}\"\r\n [pTooltip]=\"isDisableSelectionEmpresa ? '' : 'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"!isDisableSelectionEmpresa && changeEmpresa($event)\"\r\n >\r\n @if(expandMenu() && selectedEmpresa){\r\n <div class=\"flex flex-column w-full\">\r\n @if(this.selectedEmpresa.razaosocial){\r\n <span class=\"text-xs font-semibold mr-2 color-system\">\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n } @if(this.selectedEmpresa.cpfcnpj){\r\n <span class=\"text-xs mt-1 color-system\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n }\r\n </div>\r\n\r\n } @if(!isDisableSelectionEmpresa) {\r\n <span class=\"material-symbols-outlined\">swap_horiz</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- MENUS -->\r\n <div\r\n class=\"flex-1 list-none m-0 overflow-y-auto max-h-full menus-container\"\r\n >\r\n <!-- menus -->\r\n @for (menu of menus(); track $index) {\r\n @if(!idsAplicativosMenuHide.includes(menu.idaplicativo)){\r\n <li>\r\n <!-- menu que n\u00E3o tem filho -->\r\n @if( !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n (click)=\"callRoute(menu.link)\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{\r\n menu.icone || \"lens_blur\"\r\n }}</span>\r\n @if(expandMenu()){\r\n <label>{{ menu.descricaomenu }}</label>\r\n }\r\n </div>\r\n }\r\n <!-- menu com filho -->\r\n @if(menu.indmenupai){\r\n <div\r\n class=\"menu-parent\"\r\n id=\"menu-parent-{{ $index }}\"\r\n (mouseenter)=\"exibirMenuChild($event, $index)\"\r\n (mouseleave)=\"this.menuVisivel.set(undefined)\"\r\n >\r\n <div\r\n class=\" flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{\r\n menu.icone || \"lens_blur\"\r\n }}</span>\r\n @if(expandMenu()){\r\n <label>{{ menu.descricaomenu }}</label>\r\n <span class=\"material-symbols-outlined\">chevron_right</span>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"menu-childs\"\r\n id=\"menu-child-{{ $index }}\"\r\n [style.opacity]=\"menuVisivel() === $index ? '1' : '0'\"\r\n [style.pointerEvents]=\"\r\n menuVisivel() === $index ? 'auto' : 'none'\r\n \"\r\n >\r\n <div class=\"flex align-items-center\">\r\n <p class=\"p-0 m-0 font-bold pt-2 px-2 text-xs\">\r\n {{ menu.descricaomenu }}\r\n </p>\r\n </div>\r\n <p-divider\r\n class=\"p-0 m-0\"\r\n [style.opacity]=\"1\"\r\n type=\"solid\"\r\n ></p-divider>\r\n <div class=\"menu-childs-content p-0 m-0\">\r\n @for (item of returnMenuChild(menu.idmenu); track $index) {\r\n\r\n <div\r\n class=\"side-menu-item py-2 px-2 text-sm\"\r\n (click)=\"callRoute(item.link)\"\r\n >\r\n {{ item.descricaomenu }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </li>\r\n } }\r\n </div>\r\n\r\n @if(useSelectionApps) {\r\n <!-- APPS E SAIR -->\r\n <p-divider class=\"px-2\" [style.opacity]=\"1\" type=\"solid\"></p-divider>\r\n\r\n <div class=\"flex-none list-none m-0 overflow-y-auto max-h-full\">\r\n <li>\r\n <div\r\n class=\"menu-parent\"\r\n id=\"menu-sistemas-parent\"\r\n (mouseenter)=\"exibirMenuChild($event, -1)\"\r\n (mouseleave)=\"this.menuVisivel.set(undefined)\"\r\n >\r\n <!-- <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n [pTooltip]=\"!expandMenu() ? 'Sistemas' : ''\"\r\n >\r\n <span class=\"material-symbols-outlined\">grid_view</span>\r\n \r\n @if(expandMenu()){\r\n <label>Sistemas</label>\r\n <span class=\"material-symbols-outlined\">chevron_right</span>\r\n }\r\n </div> -->\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item-system troca-sistema-container py-2\"\r\n >\r\n <!-- <p-avatar\r\n icon=\"pi pi-th-large\"\r\n styleClass=\"mr-2\"\r\n size=\"normal\"\r\n [style]=\"{\r\n 'background-color': 'rgb(var(--kv-color-system), 1)',\r\n color: 'white'\r\n }\"\r\n /> -->\r\n <div\r\n [style]=\"{\r\n 'background-color': 'rgb(var(--kv-color-system), .2)',\r\n color: 'rgb(var(--kv-color-system), 1)',\r\n 'border-radius': '.5rem',\r\n padding: '.25rem'\r\n }\"\r\n class=\"flex align-items-center justify-content-center\"\r\n >\r\n <span class=\"material-symbols-outlined\">\r\n dashboard_customize\r\n </span>\r\n </div>\r\n\r\n @if(expandMenu()) {\r\n <div class=\"flex flex-column w-full\">\r\n <span class=\"text-sm font-semibold mr-2 color-system\">\r\n Meus Sistemas\r\n </span>\r\n </div>\r\n\r\n <span\r\n class=\"material-symbols-outlined\"\r\n [style.color]=\"'rgb(var(--kv-color-system), 1)'\"\r\n >unfold_more</span\r\n >\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"menu-childs\"\r\n id=\"menu-sistemas-child\"\r\n [style.opacity]=\"menuVisivel() === -1 ? '1' : '0'\"\r\n [style.pointerEvents]=\"menuVisivel() === -1 ? 'auto' : 'none'\"\r\n >\r\n <p class=\"p-0 m-0 font-bold pt-2 pl-3 text-xs\">Sistemas</p>\r\n @for (item of apps; track $index) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1\"\r\n (click)=\"\r\n callRoute(item.rotapadrao); selectApp(item.idaplicativo)\r\n \"\r\n >\r\n <img\r\n [src]=\"item.urlicone\"\r\n class=\"h-2rem w-2rem border-round-lg\"\r\n />\r\n <div class=\"text-sm\">\r\n {{ item.nomeaplicativo }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </li>\r\n <!-- <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n [pTooltip]=\"!expandMenu() ? 'Sair' : ''\"\r\n [style.color]=\"'rgba(252, 3, 3, 0.6)'\"\r\n (click)=\"logout($event)\"\r\n >\r\n <span class=\"material-symbols-outlined\">exit_to_app</span>\r\n @if(expandMenu()){\r\n <label>Sair</label>\r\n }\r\n </div>\r\n </li> -->\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- SE\u00C7\u00C3O CONTE\u00DADO -->\r\n <div\r\n class=\"w-auto h-full page-content flex flex-column ml-3\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <!-- TOPO -->\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between mb-2\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" class=\"w-auto\" style=\"height: 40px !important;\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n @if(showBreadcrumb) {\r\n <div class=\"h-full\">\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem bg-transparent\"\r\n [model]=\"breadCrumbItems\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n >\r\n <ng-template pTemplate=\"item\" let-item let-i=\"index\">\r\n @if(breadCrumbItems.indexOf(item) < breadCrumbItems.length - 1){\r\n <span class=\"font-normal\">{{ item.label }}</span>\r\n } @else {\r\n <span class=\"font-bold\">{{ item.label }}</span>\r\n }\r\n </ng-template>\r\n </p-breadcrumb>\r\n </div>\r\n } @else {\r\n <!-- GHOST DIV PARA OCPUAR ESPA\u00C7O NO SPACE BETWEEN -->\r\n <div></div>\r\n } } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) {\r\n <span class=\"font-semibold system-color\">{{ masterName }}</span> }\r\n @if(empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <!-- @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n } -->\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n } @else {\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <!-- @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n } -->\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n } } @else { @if(widthPage() > 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"max-w-25rem flex-1\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n }\r\n\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n @if(widthPage() <= 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <div class=\"h-2rem mx-3\">\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n />\r\n </div>\r\n\r\n }\r\n\r\n <!-- Container -->\r\n <div class=\"overflow-hidden flex-1 p-0 m-0 h-full\">\r\n <div\r\n class=\"overflow-y-auto h-full max-h-full {{\r\n !showMenu && 'sm:overflow-y-hidden'\r\n }} card-container\r\n \r\n {{ useCard ? 'use-card' : '' }}\r\n \"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Painel do usu\u00E1rio -->\r\n <p-overlayPanel\r\n #meusDadosPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <div class=\"p-3 flex flex-column gap-2\">\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n showTrilhaConhecimento && 'justify-content-between'\r\n }} gap-2\"\r\n >\r\n <p-avatar\r\n icon=\"pi pi-user\"\r\n class=\"mr-2\"\r\n size=\"xlarge\"\r\n shape=\"circle\"\r\n [style]=\"{ width: '4.5rem', height: '4.5rem' }\"\r\n />\r\n\r\n <div\r\n class=\"flex flex-column {{\r\n showTrilhaConhecimento ? 'w-18rem' : 'w-12rem'\r\n }} justify-content-between\"\r\n [style]=\"{ height: '4.5rem' }\"\r\n >\r\n <span\r\n class=\"text-medium text-md overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n >Ol\u00E1, {{ userName.split(\" \")[0] }}!</span\r\n >\r\n <span\r\n class=\"text-medium text-xs text-gray-500 overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n >{{ userEmail }}</span\r\n >\r\n <kv-button\r\n severity=\"secondary\"\r\n size=\"small\"\r\n label=\"Gerenciar KeePass\"\r\n (onClick)=\"accessKeePass($event)\"\r\n class=\"w-12rem\"\r\n ></kv-button>\r\n </div>\r\n </div>\r\n\r\n @if(actions.length > 0) {\r\n <p-divider></p-divider>\r\n\r\n <div class=\"flex flex-column text-sm\">\r\n @for (action of actions; track $index) {\r\n <ng-container>\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 side-menu-item p-2\"\r\n (click)=\"action.action()\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{ action.icon }}</span>\r\n <span>{{ action.label }}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n } @if(showTrilhaConhecimento) {\r\n <p-divider></p-divider>\r\n\r\n <div class=\"flex flex-column gap-3\">\r\n <span class=\"text-sm font-semibold text-gray-500\"\r\n >Trilha do Conhecimento</span\r\n >\r\n @for(trilha of trilhaConhecimento; track $index) {\r\n\r\n <div class=\"flex flex-row gap-2 max-w-25rem\">\r\n <div\r\n class=\"flex align-items-center justify-content-center border-round-md trilha-icon\"\r\n >\r\n <span class=\"material-symbols-outlined text-2xl\">{{\r\n trilha.icon\r\n }}</span>\r\n </div>\r\n <div class=\"flex flex-column justify-content-between w-20rem\">\r\n <span\r\n class=\"text-sm font-medium overflow-hidden white-space-nowrap text-overflow-ellipsis text-gray-500\"\r\n >{{ trilha.title }}</span\r\n >\r\n <span\r\n class=\"text-xs text-gray-400 overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n [pTooltip]=\"trilha.subtitle\"\r\n [tooltipPosition]=\"'left'\"\r\n >{{ trilha.subtitle }}</span\r\n >\r\n <div class=\"flex flex-row gap-2\">\r\n <span\r\n class=\"material-symbols-outlined button-icon\"\r\n [pTooltip]=\"'Baixar Documento'\"\r\n (click)=\"downloadDoc(trilha)\"\r\n >download</span\r\n >\r\n <span\r\n class=\"material-symbols-outlined button-icon\"\r\n [pTooltip]=\"'Assistir V\u00EDdeo'\"\r\n (click)=\"showVideoDoc(trilha)\"\r\n >videocam</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <p-divider></p-divider>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-between gap-2 side-menu-item p-2\"\r\n [style.color]=\"'rgba(252, 3, 3, 0.6)'\"\r\n (click)=\"logout($event)\"\r\n >\r\n <span class=\"material-symbols-outlined\">exit_to_app</span>\r\n <label>Sair</label>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-overlayPanel>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165;--kv-danger-color: 220, 53, 69}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-color-system-cta: 0, 116, 217;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-color-system-cta: 224, 168, 35;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-icon,svg{height:.6rem}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:rgb(var(--kv-color-text))!important;background:linear-gradient(0deg,#00000005 .44%,#0000 49.5%),#fff!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word;border-bottom:1px solid rgb(var(--kv-color-text),.15)}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}input{height:1.75rem}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem;border:1.5px solid #d1d5db}::ng-deep p-tablecheckbox p-tableheadercheckbox .p-checkbox{display:flex!important;align-items:center!important;justify-content:right}::ng-deep .p-checkbox{display:flex!important;align-items:center!important;justify-content:center}::ng-deep .p-checkbox-label{font-size:.875rem}.material-symbols-outlined{font-size:1.3rem}::ng-deep body{margin:0!important}.full-container{background:rgb(var(--kv-background-system),1);width:100vw;height:100vh;overflow-x:hidden;overflow-y:hidden;padding:1rem}::ng-deep p-sidebar .p-sidebar{position:relative!important;background:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem;z-index:1100!important}.page-content{background:none}.use-card{background-color:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem}::ng-deep .card-container{background-color:rgb(var(--kv-background-system),1);overflow-x:hidden}::ng-deep .card-container .p-card-body{padding:.5rem .5rem 0;margin:0;height:100%}::ng-deep .card-container .p-card-content{margin:0;padding:0;height:100%}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.side-menu-item{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item:hover{background-color:rgb(var(--kv-color-system),.25);color:rgb(var(--kv-color-system),1)}.side-menu-item label{width:100%;cursor:pointer}.side-menu-item-system{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item-system:hover{background-color:rgb(var(--kv-color-system),.08);color:rgb(var(--kv-color-system),1)}.side-menu-item-system label{width:100%;cursor:pointer}::ng-deep .p-divider{margin:0;padding:0;margin-top:.5rem;margin-bottom:.5rem}::ng-deep .p-overlaypanel-content{padding:0}.menu-parent{display:inline-block;width:100%}.menu-childs{position:absolute;left:-500px;min-width:17rem;max-width:50rem;overflow:hidden;padding:.5rem;background:rgb(var(--kv-background-card),1);border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem;z-index:9999;box-shadow:0 0 .8rem #0000001a;gap:0}.menu-childs p{color:rgb(var(--kv-color-system),1)!important;opacity:.7}.menu-childs .menu-childs-content{max-height:25rem;overflow:auto}.menu-childs .menu-childs-content::-webkit-scrollbar{width:8px}.menu-childs .menu-childs-content::-webkit-scrollbar:hover{background-color:#dededebf}.menu-childs .menu-childs-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}.menu-childs .menu-childs-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}.menu-childs .menu-childs-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-breadcrumb .p-breadcrumb-list span{color:rgba(var(--kv-color-text),.75)!important;font-size:.75rem}::ng-deep .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator{color:rgba(var(--kv-color-text),.7)!important;margin:0;margin-left:.1rem;margin-right:.1rem}::ng-deep .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator svg{height:.5rem}.troca-empresa-container{font-size:.75rem;opacity:.8;border:1px solid #c1cfe1;color:#0a3a78;background-color:rgb(var(--kv-color-system),.05);transition:all .2s ease-in-out;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.selectable-troca-empresa:hover{opacity:1;border:1px solid rgb(var(--kv-color-system),1);cursor:pointer;background-color:rgb(var(--kv-color-system),.25);color:rgb(var(--kv-color-system),1)}.menus-container label{font-size:.875rem}.meus-sistemas{background-color:rgb(var(--kv-color-system),.05)}.button-icon{color:rgb(var(--kv-color-system),.75)}.button-icon:hover{color:rgb(var(--kv-color-system),.9);cursor:pointer}.button-icon:active{color:rgb(var(--kv-color-system),1)}.trilha-icon{width:3.5rem;height:3.5rem;background-color:rgb(var(--kv-color-system),.2);color:rgb(var(--kv-color-system),1)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup"], outputs: ["iconChange", "onClick"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$3.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i7.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: i7$3.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i10$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TopIconsComponent, selector: "kv-top-icons", inputs: ["topActions"] }, { kind: "component", type: i12.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: DropdownMasterComponent, selector: "dropdown-master", inputs: ["formControlName", "masters"] }, { kind: "pipe", type: CpfCnpjPipe, name: "cpfCnpj" }] }); }
|
|
7304
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvLayoutComponent, selector: "kv-layout", inputs: { apps: { classPropertyName: "apps", publicName: "apps", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, useCard: { classPropertyName: "useCard", publicName: "useCard", isSignal: false, isRequired: false, transformFunction: null }, topMenusVisible: { classPropertyName: "topMenusVisible", publicName: "topMenusVisible", isSignal: true, isRequired: false, transformFunction: null }, profileImage: { classPropertyName: "profileImage", publicName: "profileImage", isSignal: true, isRequired: false, transformFunction: null }, breadCrumbItems: { classPropertyName: "breadCrumbItems", publicName: "breadCrumbItems", isSignal: false, isRequired: false, transformFunction: null }, masters: { classPropertyName: "masters", publicName: "masters", isSignal: false, isRequired: false, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, expandMenu: { classPropertyName: "expandMenu", publicName: "expandMenu", isSignal: true, isRequired: false, transformFunction: null }, logoMenuExpand: { classPropertyName: "logoMenuExpand", publicName: "logoMenuExpand", isSignal: false, isRequired: false, transformFunction: null }, logoMenuHide: { classPropertyName: "logoMenuHide", publicName: "logoMenuHide", isSignal: false, isRequired: false, transformFunction: null }, selectedApp: { classPropertyName: "selectedApp", publicName: "selectedApp", isSignal: false, isRequired: false, transformFunction: null }, selectedEmpresa: { classPropertyName: "selectedEmpresa", publicName: "selectedEmpresa", isSignal: false, isRequired: false, transformFunction: null }, selectedMaster: { classPropertyName: "selectedMaster", publicName: "selectedMaster", isSignal: false, isRequired: false, transformFunction: null }, showButtonApps: { classPropertyName: "showButtonApps", publicName: "showButtonApps", isSignal: false, isRequired: false, transformFunction: null }, showButtonUser: { classPropertyName: "showButtonUser", publicName: "showButtonUser", isSignal: false, isRequired: false, transformFunction: null }, showExpandMenu: { classPropertyName: "showExpandMenu", publicName: "showExpandMenu", isSignal: false, isRequired: false, transformFunction: null }, showDropdownLicenca: { classPropertyName: "showDropdownLicenca", publicName: "showDropdownLicenca", isSignal: false, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: false, isRequired: false, transformFunction: null }, showTrocaEmpresa: { classPropertyName: "showTrocaEmpresa", publicName: "showTrocaEmpresa", isSignal: false, isRequired: false, transformFunction: null }, showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: false, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, userEmail: { classPropertyName: "userEmail", publicName: "userEmail", isSignal: false, isRequired: false, transformFunction: null }, masterName: { classPropertyName: "masterName", publicName: "masterName", isSignal: false, isRequired: false, transformFunction: null }, empresaName: { classPropertyName: "empresaName", publicName: "empresaName", isSignal: false, isRequired: false, transformFunction: null }, idsAplicativosMenuHide: { classPropertyName: "idsAplicativosMenuHide", publicName: "idsAplicativosMenuHide", isSignal: false, isRequired: false, transformFunction: null }, useSelectionApps: { classPropertyName: "useSelectionApps", publicName: "useSelectionApps", isSignal: false, isRequired: false, transformFunction: null }, showTrilhaConhecimento: { classPropertyName: "showTrilhaConhecimento", publicName: "showTrilhaConhecimento", isSignal: false, isRequired: false, transformFunction: null }, isDisableSelectionEmpresa: { classPropertyName: "isDisableSelectionEmpresa", publicName: "isDisableSelectionEmpresa", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { menus: "menusChange", expandMenu: "expandMenuChange", accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit", navigateToDefaultRouteEmit: "navigateToDefaultRouteEmit", downloadDocEmit: "downloadDocEmit", showVideoDocEmit: "showVideoDocEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "meusDadosPanel", first: true, predicate: ["meusDadosPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"h-full flex flex-row full-container\">\r\n @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n styleClass=\"transition-all h-full\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"h-full flex flex-column overflow-hidden p-2\">\r\n <div\r\n class=\"flex-none flex flex-column gap-3 justify-content-between flex-shrink-0 overflow-hidden\"\r\n >\r\n <!-- LOGO -->\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} p-2\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n @if(expandMenu() && logoMenuExpand){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'2.4rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-0\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Logo para o menu minimizado-->\r\n @if(!expandMenu() && logoMenuHide){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'2.4rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Toggle menu -->\r\n @if(showExpandMenu){\r\n <!-- <span class=\"material-symbols-outlined side-menu-item\" (click)=\"expandMenu.set(!expandMenu())\">menu</span> -->\r\n }\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 troca-empresa-container mb-3 py-2 {{\r\n !isDisableSelectionEmpresa && 'selectable-troca-empresa'\r\n }}\"\r\n [pTooltip]=\"isDisableSelectionEmpresa ? '' : 'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"!isDisableSelectionEmpresa && changeEmpresa($event)\"\r\n >\r\n @if(expandMenu() && selectedEmpresa){\r\n <div class=\"flex flex-column w-full\">\r\n @if(this.selectedEmpresa.razaosocial){\r\n <span class=\"text-xs font-semibold mr-2 color-system\">\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n } @if(this.selectedEmpresa.cpfcnpj){\r\n <span class=\"text-xs mt-1 color-system\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n }\r\n </div>\r\n\r\n } @if(!isDisableSelectionEmpresa) {\r\n <span class=\"material-symbols-outlined\">swap_horiz</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- MENUS -->\r\n <div\r\n class=\"flex-1 list-none m-0 overflow-y-auto max-h-full menus-container\"\r\n >\r\n <!-- menus -->\r\n @for (menu of menus(); track $index) {\r\n @if(!idsAplicativosMenuHide.includes(menu.idaplicativo)){\r\n <li>\r\n <!-- menu que n\u00E3o tem filho -->\r\n @if( !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n (click)=\"callRoute(menu.link)\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{\r\n menu.icone || \"lens_blur\"\r\n }}</span>\r\n @if(expandMenu()){\r\n <label>{{ menu.descricaomenu }}</label>\r\n }\r\n </div>\r\n }\r\n <!-- menu com filho -->\r\n @if(menu.indmenupai){\r\n <div\r\n class=\"menu-parent\"\r\n id=\"menu-parent-{{ $index }}\"\r\n (mouseenter)=\"exibirMenuChild($event, $index)\"\r\n (mouseleave)=\"this.menuVisivel.set(undefined)\"\r\n >\r\n <div\r\n class=\" flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{\r\n menu.icone || \"lens_blur\"\r\n }}</span>\r\n @if(expandMenu()){\r\n <label>{{ menu.descricaomenu }}</label>\r\n <span class=\"material-symbols-outlined\">chevron_right</span>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"menu-childs\"\r\n id=\"menu-child-{{ $index }}\"\r\n [style.opacity]=\"menuVisivel() === $index ? '1' : '0'\"\r\n [style.pointerEvents]=\"\r\n menuVisivel() === $index ? 'auto' : 'none'\r\n \"\r\n >\r\n <div class=\"flex align-items-center\">\r\n <p class=\"p-0 m-0 font-bold pt-2 px-2 text-xs\">\r\n {{ menu.descricaomenu }}\r\n </p>\r\n </div>\r\n <p-divider\r\n class=\"p-0 m-0\"\r\n [style.opacity]=\"1\"\r\n type=\"solid\"\r\n ></p-divider>\r\n <div class=\"menu-childs-content p-0 m-0\">\r\n @for (item of returnMenuChild(menu.idmenu); track $index) {\r\n\r\n <div\r\n class=\"side-menu-item py-2 px-2 text-sm\"\r\n (click)=\"callRoute(item.link)\"\r\n >\r\n {{ item.descricaomenu }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </li>\r\n } }\r\n </div>\r\n\r\n @if(useSelectionApps) {\r\n <!-- APPS E SAIR -->\r\n <p-divider class=\"px-2\" [style.opacity]=\"1\" type=\"solid\"></p-divider>\r\n\r\n <div class=\"flex-none list-none m-0 overflow-y-auto max-h-full\">\r\n <li>\r\n <div\r\n class=\"menu-parent\"\r\n id=\"menu-sistemas-parent\"\r\n (mouseenter)=\"exibirMenuChild($event, -1)\"\r\n (mouseleave)=\"this.menuVisivel.set(undefined)\"\r\n >\r\n <!-- <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n [pTooltip]=\"!expandMenu() ? 'Sistemas' : ''\"\r\n >\r\n <span class=\"material-symbols-outlined\">grid_view</span>\r\n \r\n @if(expandMenu()){\r\n <label>Sistemas</label>\r\n <span class=\"material-symbols-outlined\">chevron_right</span>\r\n }\r\n </div> -->\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item-system troca-sistema-container py-2\"\r\n >\r\n <!-- <p-avatar\r\n icon=\"pi pi-th-large\"\r\n styleClass=\"mr-2\"\r\n size=\"normal\"\r\n [style]=\"{\r\n 'background-color': 'rgb(var(--kv-color-system), 1)',\r\n color: 'white'\r\n }\"\r\n /> -->\r\n <div\r\n [style]=\"{\r\n 'background-color': 'rgb(var(--kv-color-system), .2)',\r\n color: 'rgb(var(--kv-color-system), 1)',\r\n 'border-radius': '.5rem',\r\n padding: '.25rem'\r\n }\"\r\n class=\"flex align-items-center justify-content-center\"\r\n >\r\n <span class=\"material-symbols-outlined\">\r\n dashboard_customize\r\n </span>\r\n </div>\r\n\r\n @if(expandMenu()) {\r\n <div class=\"flex flex-column w-full\">\r\n <span class=\"text-sm font-semibold mr-2 color-system\">\r\n Meus Sistemas\r\n </span>\r\n </div>\r\n\r\n <span\r\n class=\"material-symbols-outlined\"\r\n [style.color]=\"'rgb(var(--kv-color-system), 1)'\"\r\n >unfold_more</span\r\n >\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"menu-childs\"\r\n id=\"menu-sistemas-child\"\r\n [style.opacity]=\"menuVisivel() === -1 ? '1' : '0'\"\r\n [style.pointerEvents]=\"menuVisivel() === -1 ? 'auto' : 'none'\"\r\n >\r\n <p class=\"p-0 m-0 font-bold pt-2 pl-3 text-xs\">Sistemas</p>\r\n @for (item of apps; track $index) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1\"\r\n (click)=\"\r\n callRoute(item.rotapadrao); selectApp(item.idaplicativo)\r\n \"\r\n >\r\n <img\r\n [src]=\"item.urlicone\"\r\n class=\"h-2rem w-2rem border-round-lg\"\r\n />\r\n <div class=\"text-sm\">\r\n {{ item.nomeaplicativo }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </li>\r\n <!-- <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n [pTooltip]=\"!expandMenu() ? 'Sair' : ''\"\r\n [style.color]=\"'rgba(252, 3, 3, 0.6)'\"\r\n (click)=\"logout($event)\"\r\n >\r\n <span class=\"material-symbols-outlined\">exit_to_app</span>\r\n @if(expandMenu()){\r\n <label>Sair</label>\r\n }\r\n </div>\r\n </li> -->\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- SE\u00C7\u00C3O CONTE\u00DADO -->\r\n <div\r\n class=\"w-auto h-full page-content flex flex-column ml-3\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <!-- TOPO -->\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between mb-2\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" class=\"w-auto\" style=\"height: 40px !important;\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n @if(showBreadcrumb) {\r\n <div class=\"h-full\">\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem bg-transparent\"\r\n [model]=\"breadCrumbItems\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n >\r\n <ng-template pTemplate=\"item\" let-item let-i=\"index\">\r\n @if(breadCrumbItems.indexOf(item) < breadCrumbItems.length - 1){\r\n <span class=\"font-normal\">{{ item.label }}</span>\r\n } @else {\r\n <span class=\"font-bold\">{{ item.label }}</span>\r\n }\r\n </ng-template>\r\n </p-breadcrumb>\r\n </div>\r\n } @else {\r\n <!-- GHOST DIV PARA OCPUAR ESPA\u00C7O NO SPACE BETWEEN -->\r\n <div></div>\r\n } } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) {\r\n <span class=\"font-semibold system-color\">{{ masterName }}</span> }\r\n @if(empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <!-- @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n } -->\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n } @else {\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <!-- @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n } -->\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n } } @else { @if(widthPage() > 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"max-w-25rem flex-1\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n }\r\n\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n @if(widthPage() <= 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <div class=\"h-2rem mx-3\">\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n />\r\n </div>\r\n\r\n }\r\n\r\n <!-- Container -->\r\n <div class=\"overflow-hidden flex-1 p-0 m-0 h-full\">\r\n <div\r\n class=\"overflow-y-auto h-full max-h-full {{\r\n !showMenu && 'sm:overflow-y-hidden'\r\n }} card-container\r\n \r\n {{ useCard ? 'use-card' : '' }}\r\n \"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Painel do usu\u00E1rio -->\r\n <p-overlayPanel\r\n #meusDadosPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <div class=\"p-3 flex flex-column gap-2\">\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n showTrilhaConhecimento && 'justify-content-between'\r\n }} gap-2\"\r\n >\r\n <p-avatar\r\n icon=\"pi pi-user\"\r\n class=\"mr-2\"\r\n size=\"xlarge\"\r\n shape=\"circle\"\r\n [style]=\"{ width: '4.5rem', height: '4.5rem' }\"\r\n />\r\n\r\n <div\r\n class=\"flex flex-column {{\r\n showTrilhaConhecimento ? 'w-18rem' : 'w-12rem'\r\n }} justify-content-between\"\r\n [style]=\"{ height: '4.5rem' }\"\r\n >\r\n <span\r\n class=\"text-medium text-md overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n >Ol\u00E1, {{ userName.split(\" \")[0] }}!</span\r\n >\r\n <span\r\n class=\"text-medium text-xs text-gray-500 overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n >{{ userEmail }}</span\r\n >\r\n <kv-button\r\n severity=\"secondary\"\r\n size=\"small\"\r\n label=\"Gerenciar KeePass\"\r\n (onClick)=\"accessKeePass($event)\"\r\n class=\"w-12rem\"\r\n ></kv-button>\r\n </div>\r\n </div>\r\n\r\n @if(actions.length > 0) {\r\n <p-divider></p-divider>\r\n\r\n <div class=\"flex flex-column text-sm\">\r\n @for (action of actions; track $index) {\r\n <ng-container>\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 side-menu-item p-2\"\r\n (click)=\"action.action()\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{ action.icon }}</span>\r\n <span>{{ action.label }}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n } @if(showTrilhaConhecimento) {\r\n <p-divider></p-divider>\r\n\r\n <div class=\"flex flex-column gap-3\">\r\n <span class=\"text-sm font-semibold text-gray-500\"\r\n >Trilha do Conhecimento</span\r\n >\r\n @for(trilha of trilhaConhecimento; track $index) {\r\n\r\n <div class=\"flex flex-row gap-2 max-w-25rem\">\r\n <div\r\n class=\"flex align-items-center justify-content-center border-round-md trilha-icon\"\r\n >\r\n <span class=\"material-symbols-outlined text-2xl\">{{\r\n trilha.icon\r\n }}</span>\r\n </div>\r\n <div class=\"flex flex-column justify-content-between w-20rem\">\r\n <span\r\n class=\"text-sm font-medium overflow-hidden white-space-nowrap text-overflow-ellipsis text-gray-500\"\r\n >{{ trilha.title }}</span\r\n >\r\n <span\r\n class=\"text-xs text-gray-400 overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n [pTooltip]=\"trilha.subtitle\"\r\n [tooltipPosition]=\"'left'\"\r\n >{{ trilha.subtitle }}</span\r\n >\r\n <div class=\"flex flex-row gap-2\">\r\n <span\r\n class=\"material-symbols-outlined button-icon\"\r\n [pTooltip]=\"'Baixar Documento'\"\r\n (click)=\"downloadDoc(trilha)\"\r\n >download</span\r\n >\r\n <span\r\n class=\"material-symbols-outlined button-icon\"\r\n [pTooltip]=\"'Assistir V\u00EDdeo'\"\r\n (click)=\"showVideoDoc(trilha)\"\r\n >videocam</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <p-divider></p-divider>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-between gap-2 side-menu-item p-2\"\r\n [style.color]=\"'rgba(252, 3, 3, 0.6)'\"\r\n (click)=\"logout($event)\"\r\n >\r\n <span class=\"material-symbols-outlined\">exit_to_app</span>\r\n <label>Sair</label>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-overlayPanel>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165;--kv-danger-color: 220, 53, 69}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-color-system-cta: 0, 116, 217;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-color-system-cta: 224, 168, 35;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-icon,svg{height:.6rem}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:rgb(var(--kv-color-text))!important;background:linear-gradient(0deg,#00000005 .44%,#0000 49.5%),#fff!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word;border-bottom:1px solid rgb(var(--kv-color-text),.15)}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}input{height:1.75rem}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem;border:1.5px solid #d1d5db}::ng-deep p-tablecheckbox p-tableheadercheckbox .p-checkbox{display:flex!important;align-items:center!important;justify-content:right}::ng-deep .p-checkbox{display:flex!important;align-items:center!important;justify-content:center}::ng-deep .p-checkbox-label{font-size:.875rem}.material-symbols-outlined{font-size:1.3rem}::ng-deep body{margin:0!important}.full-container{background:linear-gradient(to bottom,#f0f2ff,#faf9ff);width:100vw;height:100vh;overflow-x:hidden;overflow-y:hidden;padding:1rem}::ng-deep p-sidebar .p-sidebar{position:relative!important;background:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem;z-index:1100!important}.page-content{background:none}.use-card{background-color:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem}::ng-deep .card-container{background-color:rgb(var(--kv-background-system),1);overflow-x:hidden}::ng-deep .card-container .p-card-body{padding:.5rem .5rem 0;margin:0;height:100%}::ng-deep .card-container .p-card-content{margin:0;padding:0;height:100%}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.side-menu-item{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item:hover{background-color:rgb(var(--kv-color-system),.25);color:rgb(var(--kv-color-system),1)}.side-menu-item label{width:100%;cursor:pointer}.side-menu-item-system{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item-system:hover{background-color:rgb(var(--kv-color-system),.08);color:rgb(var(--kv-color-system),1)}.side-menu-item-system label{width:100%;cursor:pointer}::ng-deep .p-divider{margin:0;padding:0;margin-top:.5rem;margin-bottom:.5rem}::ng-deep .p-overlaypanel-content{padding:0}.menu-parent{display:inline-block;width:100%}.menu-childs{position:absolute;left:-500px;min-width:17rem;max-width:50rem;overflow:hidden;padding:.5rem;background:rgb(var(--kv-background-card),1);border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem;z-index:9999;box-shadow:0 0 .8rem #0000001a;gap:0}.menu-childs p{color:rgb(var(--kv-color-system),1)!important;opacity:.7}.menu-childs .menu-childs-content{max-height:25rem;overflow:auto}.menu-childs .menu-childs-content::-webkit-scrollbar{width:8px}.menu-childs .menu-childs-content::-webkit-scrollbar:hover{background-color:#dededebf}.menu-childs .menu-childs-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}.menu-childs .menu-childs-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}.menu-childs .menu-childs-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-breadcrumb .p-breadcrumb-list span{color:rgba(var(--kv-color-text),.75)!important;font-size:.75rem}::ng-deep .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator{color:rgba(var(--kv-color-text),.7)!important;margin:0;margin-left:.1rem;margin-right:.1rem}::ng-deep .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator svg{height:.5rem}.troca-empresa-container{font-size:.75rem;opacity:.8;border:1px solid #c1cfe1;color:#0a3a78;background-color:rgb(var(--kv-color-system),.05);transition:all .2s ease-in-out;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.selectable-troca-empresa:hover{opacity:1;border:1px solid rgb(var(--kv-color-system),1);cursor:pointer;background-color:rgb(var(--kv-color-system),.25);color:rgb(var(--kv-color-system),1)}.menus-container label{font-size:.875rem}.meus-sistemas{background-color:rgb(var(--kv-color-system),.05)}.button-icon{color:rgb(var(--kv-color-system),.75)}.button-icon:hover{color:rgb(var(--kv-color-system),.9);cursor:pointer}.button-icon:active{color:rgb(var(--kv-color-system),1)}.trilha-icon{width:3.5rem;height:3.5rem;background-color:rgb(var(--kv-color-system),.2);color:rgb(var(--kv-color-system),1)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup"], outputs: ["iconChange", "onClick"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$3.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i7.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: i7$3.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i10$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TopIconsComponent, selector: "kv-top-icons", inputs: ["topActions"] }, { kind: "component", type: i12.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: DropdownMasterComponent, selector: "dropdown-master", inputs: ["formControlName", "masters"] }, { kind: "pipe", type: CpfCnpjPipe, name: "cpfCnpj" }] }); }
|
|
7302
7305
|
}
|
|
7303
7306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, decorators: [{
|
|
7304
7307
|
type: Component,
|
|
7305
|
-
args: [{ selector: 'kv-layout', template: "<div class=\"h-full flex flex-row full-container\">\r\n @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n styleClass=\"transition-all h-full\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"h-full flex flex-column overflow-hidden p-2\">\r\n <div\r\n class=\"flex-none flex flex-column gap-3 justify-content-between flex-shrink-0 overflow-hidden\"\r\n >\r\n <!-- LOGO -->\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} p-2\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n @if(expandMenu() && logoMenuExpand){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'2.4rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-0\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Logo para o menu minimizado-->\r\n @if(!expandMenu() && logoMenuHide){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'2.4rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Toggle menu -->\r\n @if(showExpandMenu){\r\n <!-- <span class=\"material-symbols-outlined side-menu-item\" (click)=\"expandMenu.set(!expandMenu())\">menu</span> -->\r\n }\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 troca-empresa-container mb-3 py-2 {{\r\n !isDisableSelectionEmpresa && 'selectable-troca-empresa'\r\n }}\"\r\n [pTooltip]=\"isDisableSelectionEmpresa ? '' : 'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"!isDisableSelectionEmpresa && changeEmpresa($event)\"\r\n >\r\n @if(expandMenu() && selectedEmpresa){\r\n <div class=\"flex flex-column w-full\">\r\n @if(this.selectedEmpresa.razaosocial){\r\n <span class=\"text-xs font-semibold mr-2 color-system\">\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n } @if(this.selectedEmpresa.cpfcnpj){\r\n <span class=\"text-xs mt-1 color-system\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n }\r\n </div>\r\n\r\n } @if(!isDisableSelectionEmpresa) {\r\n <span class=\"material-symbols-outlined\">swap_horiz</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- MENUS -->\r\n <div\r\n class=\"flex-1 list-none m-0 overflow-y-auto max-h-full menus-container\"\r\n >\r\n <!-- menus -->\r\n @for (menu of menus(); track $index) {\r\n @if(!idsAplicativosMenuHide.includes(menu.idaplicativo)){\r\n <li>\r\n <!-- menu que n\u00E3o tem filho -->\r\n @if( !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n (click)=\"callRoute(menu.link)\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{\r\n menu.icone || \"lens_blur\"\r\n }}</span>\r\n @if(expandMenu()){\r\n <label>{{ menu.descricaomenu }}</label>\r\n }\r\n </div>\r\n }\r\n <!-- menu com filho -->\r\n @if(menu.indmenupai){\r\n <div\r\n class=\"menu-parent\"\r\n id=\"menu-parent-{{ $index }}\"\r\n (mouseenter)=\"exibirMenuChild($event, $index)\"\r\n (mouseleave)=\"this.menuVisivel.set(undefined)\"\r\n >\r\n <div\r\n class=\" flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{\r\n menu.icone || \"lens_blur\"\r\n }}</span>\r\n @if(expandMenu()){\r\n <label>{{ menu.descricaomenu }}</label>\r\n <span class=\"material-symbols-outlined\">chevron_right</span>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"menu-childs\"\r\n id=\"menu-child-{{ $index }}\"\r\n [style.opacity]=\"menuVisivel() === $index ? '1' : '0'\"\r\n [style.pointerEvents]=\"\r\n menuVisivel() === $index ? 'auto' : 'none'\r\n \"\r\n >\r\n <div class=\"flex align-items-center\">\r\n <p class=\"p-0 m-0 font-bold pt-2 px-2 text-xs\">\r\n {{ menu.descricaomenu }}\r\n </p>\r\n </div>\r\n <p-divider\r\n class=\"p-0 m-0\"\r\n [style.opacity]=\"1\"\r\n type=\"solid\"\r\n ></p-divider>\r\n <div class=\"menu-childs-content p-0 m-0\">\r\n @for (item of returnMenuChild(menu.idmenu); track $index) {\r\n\r\n <div\r\n class=\"side-menu-item py-2 px-2 text-sm\"\r\n (click)=\"callRoute(item.link)\"\r\n >\r\n {{ item.descricaomenu }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </li>\r\n } }\r\n </div>\r\n\r\n @if(useSelectionApps) {\r\n <!-- APPS E SAIR -->\r\n <p-divider class=\"px-2\" [style.opacity]=\"1\" type=\"solid\"></p-divider>\r\n\r\n <div class=\"flex-none list-none m-0 overflow-y-auto max-h-full\">\r\n <li>\r\n <div\r\n class=\"menu-parent\"\r\n id=\"menu-sistemas-parent\"\r\n (mouseenter)=\"exibirMenuChild($event, -1)\"\r\n (mouseleave)=\"this.menuVisivel.set(undefined)\"\r\n >\r\n <!-- <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n [pTooltip]=\"!expandMenu() ? 'Sistemas' : ''\"\r\n >\r\n <span class=\"material-symbols-outlined\">grid_view</span>\r\n \r\n @if(expandMenu()){\r\n <label>Sistemas</label>\r\n <span class=\"material-symbols-outlined\">chevron_right</span>\r\n }\r\n </div> -->\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item-system troca-sistema-container py-2\"\r\n >\r\n <!-- <p-avatar\r\n icon=\"pi pi-th-large\"\r\n styleClass=\"mr-2\"\r\n size=\"normal\"\r\n [style]=\"{\r\n 'background-color': 'rgb(var(--kv-color-system), 1)',\r\n color: 'white'\r\n }\"\r\n /> -->\r\n <div\r\n [style]=\"{\r\n 'background-color': 'rgb(var(--kv-color-system), .2)',\r\n color: 'rgb(var(--kv-color-system), 1)',\r\n 'border-radius': '.5rem',\r\n padding: '.25rem'\r\n }\"\r\n class=\"flex align-items-center justify-content-center\"\r\n >\r\n <span class=\"material-symbols-outlined\">\r\n dashboard_customize\r\n </span>\r\n </div>\r\n\r\n @if(expandMenu()) {\r\n <div class=\"flex flex-column w-full\">\r\n <span class=\"text-sm font-semibold mr-2 color-system\">\r\n Meus Sistemas\r\n </span>\r\n </div>\r\n\r\n <span\r\n class=\"material-symbols-outlined\"\r\n [style.color]=\"'rgb(var(--kv-color-system), 1)'\"\r\n >unfold_more</span\r\n >\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"menu-childs\"\r\n id=\"menu-sistemas-child\"\r\n [style.opacity]=\"menuVisivel() === -1 ? '1' : '0'\"\r\n [style.pointerEvents]=\"menuVisivel() === -1 ? 'auto' : 'none'\"\r\n >\r\n <p class=\"p-0 m-0 font-bold pt-2 pl-3 text-xs\">Sistemas</p>\r\n @for (item of apps; track $index) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1\"\r\n (click)=\"\r\n callRoute(item.rotapadrao); selectApp(item.idaplicativo)\r\n \"\r\n >\r\n <img\r\n [src]=\"item.urlicone\"\r\n class=\"h-2rem w-2rem border-round-lg\"\r\n />\r\n <div class=\"text-sm\">\r\n {{ item.nomeaplicativo }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </li>\r\n <!-- <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n [pTooltip]=\"!expandMenu() ? 'Sair' : ''\"\r\n [style.color]=\"'rgba(252, 3, 3, 0.6)'\"\r\n (click)=\"logout($event)\"\r\n >\r\n <span class=\"material-symbols-outlined\">exit_to_app</span>\r\n @if(expandMenu()){\r\n <label>Sair</label>\r\n }\r\n </div>\r\n </li> -->\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- SE\u00C7\u00C3O CONTE\u00DADO -->\r\n <div\r\n class=\"w-auto h-full page-content flex flex-column ml-3\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <!-- TOPO -->\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between mb-2\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" class=\"w-auto\" style=\"height: 40px !important;\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n @if(showBreadcrumb) {\r\n <div class=\"h-full\">\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem bg-transparent\"\r\n [model]=\"breadCrumbItems\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n >\r\n <ng-template pTemplate=\"item\" let-item let-i=\"index\">\r\n @if(breadCrumbItems.indexOf(item) < breadCrumbItems.length - 1){\r\n <span class=\"font-normal\">{{ item.label }}</span>\r\n } @else {\r\n <span class=\"font-bold\">{{ item.label }}</span>\r\n }\r\n </ng-template>\r\n </p-breadcrumb>\r\n </div>\r\n } @else {\r\n <!-- GHOST DIV PARA OCPUAR ESPA\u00C7O NO SPACE BETWEEN -->\r\n <div></div>\r\n } } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) {\r\n <span class=\"font-semibold system-color\">{{ masterName }}</span> }\r\n @if(empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <!-- @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n } -->\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n } @else {\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <!-- @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n } -->\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n } } @else { @if(widthPage() > 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"max-w-25rem flex-1\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n }\r\n\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n @if(widthPage() <= 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <div class=\"h-2rem mx-3\">\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n />\r\n </div>\r\n\r\n }\r\n\r\n <!-- Container -->\r\n <div class=\"overflow-hidden flex-1 p-0 m-0 h-full\">\r\n <div\r\n class=\"overflow-y-auto h-full max-h-full {{\r\n !showMenu && 'sm:overflow-y-hidden'\r\n }} card-container\r\n \r\n {{ useCard ? 'use-card' : '' }}\r\n \"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Painel do usu\u00E1rio -->\r\n <p-overlayPanel\r\n #meusDadosPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <div class=\"p-3 flex flex-column gap-2\">\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n showTrilhaConhecimento && 'justify-content-between'\r\n }} gap-2\"\r\n >\r\n <p-avatar\r\n icon=\"pi pi-user\"\r\n class=\"mr-2\"\r\n size=\"xlarge\"\r\n shape=\"circle\"\r\n [style]=\"{ width: '4.5rem', height: '4.5rem' }\"\r\n />\r\n\r\n <div\r\n class=\"flex flex-column {{\r\n showTrilhaConhecimento ? 'w-18rem' : 'w-12rem'\r\n }} justify-content-between\"\r\n [style]=\"{ height: '4.5rem' }\"\r\n >\r\n <span\r\n class=\"text-medium text-md overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n >Ol\u00E1, {{ userName.split(\" \")[0] }}!</span\r\n >\r\n <span\r\n class=\"text-medium text-xs text-gray-500 overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n >{{ userEmail }}</span\r\n >\r\n <kv-button\r\n severity=\"secondary\"\r\n size=\"small\"\r\n label=\"Gerenciar KeePass\"\r\n (onClick)=\"accessKeePass($event)\"\r\n class=\"w-12rem\"\r\n ></kv-button>\r\n </div>\r\n </div>\r\n\r\n @if(actions.length > 0) {\r\n <p-divider></p-divider>\r\n\r\n <div class=\"flex flex-column text-sm\">\r\n @for (action of actions; track $index) {\r\n <ng-container>\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 side-menu-item p-2\"\r\n (click)=\"action.action()\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{ action.icon }}</span>\r\n <span>{{ action.label }}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n } @if(showTrilhaConhecimento) {\r\n <p-divider></p-divider>\r\n\r\n <div class=\"flex flex-column gap-3\">\r\n <span class=\"text-sm font-semibold text-gray-500\"\r\n >Trilha do Conhecimento</span\r\n >\r\n @for(trilha of trilhaConhecimento; track $index) {\r\n\r\n <div class=\"flex flex-row gap-2 max-w-25rem\">\r\n <div\r\n class=\"flex align-items-center justify-content-center border-round-md trilha-icon\"\r\n >\r\n <span class=\"material-symbols-outlined text-2xl\">{{\r\n trilha.icon\r\n }}</span>\r\n </div>\r\n <div class=\"flex flex-column justify-content-between w-20rem\">\r\n <span\r\n class=\"text-sm font-medium overflow-hidden white-space-nowrap text-overflow-ellipsis text-gray-500\"\r\n >{{ trilha.title }}</span\r\n >\r\n <span\r\n class=\"text-xs text-gray-400 overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n [pTooltip]=\"trilha.subtitle\"\r\n [tooltipPosition]=\"'left'\"\r\n >{{ trilha.subtitle }}</span\r\n >\r\n <div class=\"flex flex-row gap-2\">\r\n <span\r\n class=\"material-symbols-outlined button-icon\"\r\n [pTooltip]=\"'Baixar Documento'\"\r\n (click)=\"downloadDoc(trilha)\"\r\n >download</span\r\n >\r\n <span\r\n class=\"material-symbols-outlined button-icon\"\r\n [pTooltip]=\"'Assistir V\u00EDdeo'\"\r\n (click)=\"showVideoDoc(trilha)\"\r\n >videocam</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <p-divider></p-divider>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-between gap-2 side-menu-item p-2\"\r\n [style.color]=\"'rgba(252, 3, 3, 0.6)'\"\r\n (click)=\"logout($event)\"\r\n >\r\n <span class=\"material-symbols-outlined\">exit_to_app</span>\r\n <label>Sair</label>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-overlayPanel>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165;--kv-danger-color: 220, 53, 69}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-color-system-cta: 0, 116, 217;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-color-system-cta: 224, 168, 35;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-icon,svg{height:.6rem}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:rgb(var(--kv-color-text))!important;background:linear-gradient(0deg,#00000005 .44%,#0000 49.5%),#fff!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word;border-bottom:1px solid rgb(var(--kv-color-text),.15)}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}input{height:1.75rem}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem;border:1.5px solid #d1d5db}::ng-deep p-tablecheckbox p-tableheadercheckbox .p-checkbox{display:flex!important;align-items:center!important;justify-content:right}::ng-deep .p-checkbox{display:flex!important;align-items:center!important;justify-content:center}::ng-deep .p-checkbox-label{font-size:.875rem}.material-symbols-outlined{font-size:1.3rem}::ng-deep body{margin:0!important}.full-container{background:rgb(var(--kv-background-system),1);width:100vw;height:100vh;overflow-x:hidden;overflow-y:hidden;padding:1rem}::ng-deep p-sidebar .p-sidebar{position:relative!important;background:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem;z-index:1100!important}.page-content{background:none}.use-card{background-color:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem}::ng-deep .card-container{background-color:rgb(var(--kv-background-system),1);overflow-x:hidden}::ng-deep .card-container .p-card-body{padding:.5rem .5rem 0;margin:0;height:100%}::ng-deep .card-container .p-card-content{margin:0;padding:0;height:100%}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.side-menu-item{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item:hover{background-color:rgb(var(--kv-color-system),.25);color:rgb(var(--kv-color-system),1)}.side-menu-item label{width:100%;cursor:pointer}.side-menu-item-system{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item-system:hover{background-color:rgb(var(--kv-color-system),.08);color:rgb(var(--kv-color-system),1)}.side-menu-item-system label{width:100%;cursor:pointer}::ng-deep .p-divider{margin:0;padding:0;margin-top:.5rem;margin-bottom:.5rem}::ng-deep .p-overlaypanel-content{padding:0}.menu-parent{display:inline-block;width:100%}.menu-childs{position:absolute;left:-500px;min-width:17rem;max-width:50rem;overflow:hidden;padding:.5rem;background:rgb(var(--kv-background-card),1);border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem;z-index:9999;box-shadow:0 0 .8rem #0000001a;gap:0}.menu-childs p{color:rgb(var(--kv-color-system),1)!important;opacity:.7}.menu-childs .menu-childs-content{max-height:25rem;overflow:auto}.menu-childs .menu-childs-content::-webkit-scrollbar{width:8px}.menu-childs .menu-childs-content::-webkit-scrollbar:hover{background-color:#dededebf}.menu-childs .menu-childs-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}.menu-childs .menu-childs-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}.menu-childs .menu-childs-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-breadcrumb .p-breadcrumb-list span{color:rgba(var(--kv-color-text),.75)!important;font-size:.75rem}::ng-deep .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator{color:rgba(var(--kv-color-text),.7)!important;margin:0;margin-left:.1rem;margin-right:.1rem}::ng-deep .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator svg{height:.5rem}.troca-empresa-container{font-size:.75rem;opacity:.8;border:1px solid #c1cfe1;color:#0a3a78;background-color:rgb(var(--kv-color-system),.05);transition:all .2s ease-in-out;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.selectable-troca-empresa:hover{opacity:1;border:1px solid rgb(var(--kv-color-system),1);cursor:pointer;background-color:rgb(var(--kv-color-system),.25);color:rgb(var(--kv-color-system),1)}.menus-container label{font-size:.875rem}.meus-sistemas{background-color:rgb(var(--kv-color-system),.05)}.button-icon{color:rgb(var(--kv-color-system),.75)}.button-icon:hover{color:rgb(var(--kv-color-system),.9);cursor:pointer}.button-icon:active{color:rgb(var(--kv-color-system),1)}.trilha-icon{width:3.5rem;height:3.5rem;background-color:rgb(var(--kv-color-system),.2);color:rgb(var(--kv-color-system),1)}\n"] }]
|
|
7308
|
+
args: [{ selector: 'kv-layout', template: "<div class=\"h-full flex flex-row full-container\">\r\n @if(showMenu) {\r\n <p-sidebar\r\n #sidebarRef\r\n [visible]=\"true\"\r\n [showCloseIcon]=\"false\"\r\n [modal]=\"false\"\r\n [style]=\"{ width: expandMenu() ? '17rem' : '3.65rem' }\"\r\n styleClass=\"transition-all h-full\"\r\n >\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"h-full flex flex-column overflow-hidden p-2\">\r\n <div\r\n class=\"flex-none flex flex-column gap-3 justify-content-between flex-shrink-0 overflow-hidden\"\r\n >\r\n <!-- LOGO -->\r\n <div\r\n class=\"flex {{\r\n expandMenu() ? 'flex-row' : 'flex-column'\r\n }} align-items-center {{\r\n expandMenu()\r\n ? 'justify-content-between'\r\n : 'justify-content-center'\r\n }} p-2\"\r\n >\r\n <!-- Logo para o menu expandido -->\r\n @if(expandMenu() && logoMenuExpand){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuExpand\"\r\n [style.height]=\"'2.4rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-0\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Logo para o menu minimizado-->\r\n @if(!expandMenu() && logoMenuHide){\r\n <img\r\n alt=\"Card\"\r\n [src]=\"logoMenuHide\"\r\n [style.height]=\"'2.4rem'\"\r\n width=\"auto\"\r\n class=\"cursor-pointer p-1\"\r\n (click)=\"navigateToDefaultRoute()\"\r\n />\r\n }\r\n\r\n <!-- Toggle menu -->\r\n @if(showExpandMenu){\r\n <!-- <span class=\"material-symbols-outlined side-menu-item\" (click)=\"expandMenu.set(!expandMenu())\">menu</span> -->\r\n }\r\n </div>\r\n\r\n @if(showTrocaEmpresa){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 troca-empresa-container mb-3 py-2 {{\r\n !isDisableSelectionEmpresa && 'selectable-troca-empresa'\r\n }}\"\r\n [pTooltip]=\"isDisableSelectionEmpresa ? '' : 'Trocar de empresa'\"\r\n [tooltipPosition]=\"'right'\"\r\n (click)=\"!isDisableSelectionEmpresa && changeEmpresa($event)\"\r\n >\r\n @if(expandMenu() && selectedEmpresa){\r\n <div class=\"flex flex-column w-full\">\r\n @if(this.selectedEmpresa.razaosocial){\r\n <span class=\"text-xs font-semibold mr-2 color-system\">\r\n {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n </span>\r\n } @if(this.selectedEmpresa.cpfcnpj){\r\n <span class=\"text-xs mt-1 color-system\">{{\r\n this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n }}</span>\r\n }\r\n </div>\r\n\r\n } @if(!isDisableSelectionEmpresa) {\r\n <span class=\"material-symbols-outlined\">swap_horiz</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- MENUS -->\r\n <div\r\n class=\"flex-1 list-none m-0 overflow-y-auto max-h-full menus-container\"\r\n >\r\n <!-- menus -->\r\n @for (menu of menus(); track $index) {\r\n @if(!idsAplicativosMenuHide.includes(menu.idaplicativo)){\r\n <li>\r\n <!-- menu que n\u00E3o tem filho -->\r\n @if( !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)){\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n (click)=\"callRoute(menu.link)\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{\r\n menu.icone || \"lens_blur\"\r\n }}</span>\r\n @if(expandMenu()){\r\n <label>{{ menu.descricaomenu }}</label>\r\n }\r\n </div>\r\n }\r\n <!-- menu com filho -->\r\n @if(menu.indmenupai){\r\n <div\r\n class=\"menu-parent\"\r\n id=\"menu-parent-{{ $index }}\"\r\n (mouseenter)=\"exibirMenuChild($event, $index)\"\r\n (mouseleave)=\"this.menuVisivel.set(undefined)\"\r\n >\r\n <div\r\n class=\" flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{\r\n menu.icone || \"lens_blur\"\r\n }}</span>\r\n @if(expandMenu()){\r\n <label>{{ menu.descricaomenu }}</label>\r\n <span class=\"material-symbols-outlined\">chevron_right</span>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"menu-childs\"\r\n id=\"menu-child-{{ $index }}\"\r\n [style.opacity]=\"menuVisivel() === $index ? '1' : '0'\"\r\n [style.pointerEvents]=\"\r\n menuVisivel() === $index ? 'auto' : 'none'\r\n \"\r\n >\r\n <div class=\"flex align-items-center\">\r\n <p class=\"p-0 m-0 font-bold pt-2 px-2 text-xs\">\r\n {{ menu.descricaomenu }}\r\n </p>\r\n </div>\r\n <p-divider\r\n class=\"p-0 m-0\"\r\n [style.opacity]=\"1\"\r\n type=\"solid\"\r\n ></p-divider>\r\n <div class=\"menu-childs-content p-0 m-0\">\r\n @for (item of returnMenuChild(menu.idmenu); track $index) {\r\n\r\n <div\r\n class=\"side-menu-item py-2 px-2 text-sm\"\r\n (click)=\"callRoute(item.link)\"\r\n >\r\n {{ item.descricaomenu }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </li>\r\n } }\r\n </div>\r\n\r\n @if(useSelectionApps) {\r\n <!-- APPS E SAIR -->\r\n <p-divider class=\"px-2\" [style.opacity]=\"1\" type=\"solid\"></p-divider>\r\n\r\n <div class=\"flex-none list-none m-0 overflow-y-auto max-h-full\">\r\n <li>\r\n <div\r\n class=\"menu-parent\"\r\n id=\"menu-sistemas-parent\"\r\n (mouseenter)=\"exibirMenuChild($event, -1)\"\r\n (mouseleave)=\"this.menuVisivel.set(undefined)\"\r\n >\r\n <!-- <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n [pTooltip]=\"!expandMenu() ? 'Sistemas' : ''\"\r\n >\r\n <span class=\"material-symbols-outlined\">grid_view</span>\r\n \r\n @if(expandMenu()){\r\n <label>Sistemas</label>\r\n <span class=\"material-symbols-outlined\">chevron_right</span>\r\n }\r\n </div> -->\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item-system troca-sistema-container py-2\"\r\n >\r\n <!-- <p-avatar\r\n icon=\"pi pi-th-large\"\r\n styleClass=\"mr-2\"\r\n size=\"normal\"\r\n [style]=\"{\r\n 'background-color': 'rgb(var(--kv-color-system), 1)',\r\n color: 'white'\r\n }\"\r\n /> -->\r\n <div\r\n [style]=\"{\r\n 'background-color': 'rgb(var(--kv-color-system), .2)',\r\n color: 'rgb(var(--kv-color-system), 1)',\r\n 'border-radius': '.5rem',\r\n padding: '.25rem'\r\n }\"\r\n class=\"flex align-items-center justify-content-center\"\r\n >\r\n <span class=\"material-symbols-outlined\">\r\n dashboard_customize\r\n </span>\r\n </div>\r\n\r\n @if(expandMenu()) {\r\n <div class=\"flex flex-column w-full\">\r\n <span class=\"text-sm font-semibold mr-2 color-system\">\r\n Meus Sistemas\r\n </span>\r\n </div>\r\n\r\n <span\r\n class=\"material-symbols-outlined\"\r\n [style.color]=\"'rgb(var(--kv-color-system), 1)'\"\r\n >unfold_more</span\r\n >\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"menu-childs\"\r\n id=\"menu-sistemas-child\"\r\n [style.opacity]=\"menuVisivel() === -1 ? '1' : '0'\"\r\n [style.pointerEvents]=\"menuVisivel() === -1 ? 'auto' : 'none'\"\r\n >\r\n <p class=\"p-0 m-0 font-bold pt-2 pl-3 text-xs\">Sistemas</p>\r\n @for (item of apps; track $index) {\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1\"\r\n (click)=\"\r\n callRoute(item.rotapadrao); selectApp(item.idaplicativo)\r\n \"\r\n >\r\n <img\r\n [src]=\"item.urlicone\"\r\n class=\"h-2rem w-2rem border-round-lg\"\r\n />\r\n <div class=\"text-sm\">\r\n {{ item.nomeaplicativo }}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </li>\r\n <!-- <li>\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-{{\r\n expandMenu() ? 'between' : 'center'\r\n }} gap-2 side-menu-item\"\r\n style=\"padding-top: 0.75rem; padding-bottom: 0.75rem\"\r\n [pTooltip]=\"!expandMenu() ? 'Sair' : ''\"\r\n [style.color]=\"'rgba(252, 3, 3, 0.6)'\"\r\n (click)=\"logout($event)\"\r\n >\r\n <span class=\"material-symbols-outlined\">exit_to_app</span>\r\n @if(expandMenu()){\r\n <label>Sair</label>\r\n }\r\n </div>\r\n </li> -->\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </p-sidebar>\r\n }\r\n\r\n <!-- SE\u00C7\u00C3O CONTE\u00DADO -->\r\n <div\r\n class=\"w-auto h-full page-content flex flex-column ml-3\"\r\n id=\"page-content\"\r\n style=\"width: 100vw !important\"\r\n >\r\n <!-- TOPO -->\r\n <div\r\n class=\"flex flex-row flex-wrap align-items-center justify-content-between mb-2\"\r\n >\r\n @if(!showMenu) {\r\n <!-- Logo home -->\r\n <div>\r\n <img [src]=\"logoMenuExpand\" class=\"w-auto\" style=\"height: 40px !important;\" />\r\n </div>\r\n } @else {\r\n <!-- Breadcrumbs -->\r\n @if(showBreadcrumb) {\r\n <div class=\"h-full\">\r\n <p-breadcrumb\r\n *ngIf=\"widthCard > 400\"\r\n styleClass=\"border-none p-0 flex align-items-center h-2rem bg-transparent\"\r\n [model]=\"breadCrumbItems\"\r\n (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n >\r\n <ng-template pTemplate=\"item\" let-item let-i=\"index\">\r\n @if(breadCrumbItems.indexOf(item) < breadCrumbItems.length - 1){\r\n <span class=\"font-normal\">{{ item.label }}</span>\r\n } @else {\r\n <span class=\"font-bold\">{{ item.label }}</span>\r\n }\r\n </ng-template>\r\n </p-breadcrumb>\r\n </div>\r\n } @else {\r\n <!-- GHOST DIV PARA OCPUAR ESPA\u00C7O NO SPACE BETWEEN -->\r\n <div></div>\r\n } } @if (exibirNomes) { @if(widthCard >= 517) {\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) {\r\n <span class=\"font-semibold system-color\">{{ masterName }}</span> }\r\n @if(empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <!-- @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n } -->\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n } @else {\r\n <div\r\n class=\"w-auto flex flex-row justify-content-center align-items-center gap-2\"\r\n >\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <!-- @for (topAction of topMenuActions(); track $index) {\r\n <ng-container *ngTemplateOutlet=\"topAction\" />\r\n } -->\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n\r\n <div\r\n class=\"w-auto flex flex-column justify-content-center align-items-center gap-2\"\r\n >\r\n @if (masterName) { <span class=\"master-name\">{{ masterName }}</span> }\r\n @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\r\n </div>\r\n } } @else { @if(widthPage() > 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n class=\"max-w-25rem flex-1\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n >\r\n </dropdown-master>\r\n }\r\n\r\n <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n <kv-top-icons [topActions]=\"topMenuOptions\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n @if(widthPage() <= 992){\r\n <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n <div class=\"h-2rem mx-3\">\r\n <dropdown-master\r\n *ngIf=\"showLicencas()\"\r\n formControlName=\"idmaster\"\r\n [formGroup]=\"formGroup\"\r\n [masters]=\"masters\"\r\n (onSelectionChange)=\"changeLicense($event)\"\r\n (onSelectionValue)=\"changeLicense($event)\"\r\n />\r\n </div>\r\n\r\n }\r\n\r\n <!-- Container -->\r\n <div class=\"overflow-hidden flex-1 p-0 m-0 h-full\">\r\n <div\r\n class=\"overflow-y-auto h-full max-h-full {{\r\n !showMenu && 'sm:overflow-y-hidden'\r\n }} card-container\r\n \r\n {{ useCard ? 'use-card' : '' }}\r\n \"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Painel do usu\u00E1rio -->\r\n <p-overlayPanel\r\n #meusDadosPanel\r\n [showTransitionOptions]=\"'350ms ease-out'\"\r\n [hideTransitionOptions]=\"'250ms ease-in'\"\r\n >\r\n <ng-template pTemplate=\"container\">\r\n <div class=\"p-3 flex flex-column gap-2\">\r\n <div\r\n class=\"flex flex-row align-items-center {{\r\n showTrilhaConhecimento && 'justify-content-between'\r\n }} gap-2\"\r\n >\r\n <p-avatar\r\n icon=\"pi pi-user\"\r\n class=\"mr-2\"\r\n size=\"xlarge\"\r\n shape=\"circle\"\r\n [style]=\"{ width: '4.5rem', height: '4.5rem' }\"\r\n />\r\n\r\n <div\r\n class=\"flex flex-column {{\r\n showTrilhaConhecimento ? 'w-18rem' : 'w-12rem'\r\n }} justify-content-between\"\r\n [style]=\"{ height: '4.5rem' }\"\r\n >\r\n <span\r\n class=\"text-medium text-md overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n >Ol\u00E1, {{ userName.split(\" \")[0] }}!</span\r\n >\r\n <span\r\n class=\"text-medium text-xs text-gray-500 overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n >{{ userEmail }}</span\r\n >\r\n <kv-button\r\n severity=\"secondary\"\r\n size=\"small\"\r\n label=\"Gerenciar KeePass\"\r\n (onClick)=\"accessKeePass($event)\"\r\n class=\"w-12rem\"\r\n ></kv-button>\r\n </div>\r\n </div>\r\n\r\n @if(actions.length > 0) {\r\n <p-divider></p-divider>\r\n\r\n <div class=\"flex flex-column text-sm\">\r\n @for (action of actions; track $index) {\r\n <ng-container>\r\n <div\r\n class=\"flex flex-row align-items-center gap-2 side-menu-item p-2\"\r\n (click)=\"action.action()\"\r\n >\r\n <span class=\"material-symbols-outlined\">{{ action.icon }}</span>\r\n <span>{{ action.label }}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n } @if(showTrilhaConhecimento) {\r\n <p-divider></p-divider>\r\n\r\n <div class=\"flex flex-column gap-3\">\r\n <span class=\"text-sm font-semibold text-gray-500\"\r\n >Trilha do Conhecimento</span\r\n >\r\n @for(trilha of trilhaConhecimento; track $index) {\r\n\r\n <div class=\"flex flex-row gap-2 max-w-25rem\">\r\n <div\r\n class=\"flex align-items-center justify-content-center border-round-md trilha-icon\"\r\n >\r\n <span class=\"material-symbols-outlined text-2xl\">{{\r\n trilha.icon\r\n }}</span>\r\n </div>\r\n <div class=\"flex flex-column justify-content-between w-20rem\">\r\n <span\r\n class=\"text-sm font-medium overflow-hidden white-space-nowrap text-overflow-ellipsis text-gray-500\"\r\n >{{ trilha.title }}</span\r\n >\r\n <span\r\n class=\"text-xs text-gray-400 overflow-hidden white-space-nowrap text-overflow-ellipsis\"\r\n [pTooltip]=\"trilha.subtitle\"\r\n [tooltipPosition]=\"'left'\"\r\n >{{ trilha.subtitle }}</span\r\n >\r\n <div class=\"flex flex-row gap-2\">\r\n <span\r\n class=\"material-symbols-outlined button-icon\"\r\n [pTooltip]=\"'Baixar Documento'\"\r\n (click)=\"downloadDoc(trilha)\"\r\n >download</span\r\n >\r\n <span\r\n class=\"material-symbols-outlined button-icon\"\r\n [pTooltip]=\"'Assistir V\u00EDdeo'\"\r\n (click)=\"showVideoDoc(trilha)\"\r\n >videocam</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <p-divider></p-divider>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-between gap-2 side-menu-item p-2\"\r\n [style.color]=\"'rgba(252, 3, 3, 0.6)'\"\r\n (click)=\"logout($event)\"\r\n >\r\n <span class=\"material-symbols-outlined\">exit_to_app</span>\r\n <label>Sair</label>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-overlayPanel>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165;--kv-danger-color: 220, 53, 69}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-color-system-cta: 0, 116, 217;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-color-system-cta: 224, 168, 35;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-icon,svg{height:.6rem}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:rgb(var(--kv-color-text))!important;background:linear-gradient(0deg,#00000005 .44%,#0000 49.5%),#fff!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word;border-bottom:1px solid rgb(var(--kv-color-text),.15)}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}input{height:1.75rem}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem;border:1.5px solid #d1d5db}::ng-deep p-tablecheckbox p-tableheadercheckbox .p-checkbox{display:flex!important;align-items:center!important;justify-content:right}::ng-deep .p-checkbox{display:flex!important;align-items:center!important;justify-content:center}::ng-deep .p-checkbox-label{font-size:.875rem}.material-symbols-outlined{font-size:1.3rem}::ng-deep body{margin:0!important}.full-container{background:linear-gradient(to bottom,#f0f2ff,#faf9ff);width:100vw;height:100vh;overflow-x:hidden;overflow-y:hidden;padding:1rem}::ng-deep p-sidebar .p-sidebar{position:relative!important;background:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem;z-index:1100!important}.page-content{background:none}.use-card{background-color:rgb(var(--kv-background-card),1);box-shadow:0 0 .8rem #0000001a;border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem}::ng-deep .card-container{background-color:rgb(var(--kv-background-system),1);overflow-x:hidden}::ng-deep .card-container .p-card-body{padding:.5rem .5rem 0;margin:0;height:100%}::ng-deep .card-container .p-card-content{margin:0;padding:0;height:100%}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.side-menu-item{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item:hover{background-color:rgb(var(--kv-color-system),.25);color:rgb(var(--kv-color-system),1)}.side-menu-item label{width:100%;cursor:pointer}.side-menu-item-system{transition:all .2s ease-in-out;cursor:pointer;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.side-menu-item-system:hover{background-color:rgb(var(--kv-color-system),.08);color:rgb(var(--kv-color-system),1)}.side-menu-item-system label{width:100%;cursor:pointer}::ng-deep .p-divider{margin:0;padding:0;margin-top:.5rem;margin-bottom:.5rem}::ng-deep .p-overlaypanel-content{padding:0}.menu-parent{display:inline-block;width:100%}.menu-childs{position:absolute;left:-500px;min-width:17rem;max-width:50rem;overflow:hidden;padding:.5rem;background:rgb(var(--kv-background-card),1);border:1px solid rgb(var(--kv-color-system),.1);border-radius:.5rem;z-index:9999;box-shadow:0 0 .8rem #0000001a;gap:0}.menu-childs p{color:rgb(var(--kv-color-system),1)!important;opacity:.7}.menu-childs .menu-childs-content{max-height:25rem;overflow:auto}.menu-childs .menu-childs-content::-webkit-scrollbar{width:8px}.menu-childs .menu-childs-content::-webkit-scrollbar:hover{background-color:#dededebf}.menu-childs .menu-childs-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}.menu-childs .menu-childs-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}.menu-childs .menu-childs-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-breadcrumb .p-breadcrumb-list span{color:rgba(var(--kv-color-text),.75)!important;font-size:.75rem}::ng-deep .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator{color:rgba(var(--kv-color-text),.7)!important;margin:0;margin-left:.1rem;margin-right:.1rem}::ng-deep .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator svg{height:.5rem}.troca-empresa-container{font-size:.75rem;opacity:.8;border:1px solid #c1cfe1;color:#0a3a78;background-color:rgb(var(--kv-color-system),.05);transition:all .2s ease-in-out;border-radius:.5rem;padding-left:.5rem;padding-right:.5rem}.selectable-troca-empresa:hover{opacity:1;border:1px solid rgb(var(--kv-color-system),1);cursor:pointer;background-color:rgb(var(--kv-color-system),.25);color:rgb(var(--kv-color-system),1)}.menus-container label{font-size:.875rem}.meus-sistemas{background-color:rgb(var(--kv-color-system),.05)}.button-icon{color:rgb(var(--kv-color-system),.75)}.button-icon:hover{color:rgb(var(--kv-color-system),.9);cursor:pointer}.button-icon:active{color:rgb(var(--kv-color-system),1)}.trilha-icon{width:3.5rem;height:3.5rem;background-color:rgb(var(--kv-color-system),.2);color:rgb(var(--kv-color-system),1)}\n"] }]
|
|
7306
7309
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$2.FormBuilder }, { type: i3$1.Router }, { type: i3$1.ActivatedRoute }], propDecorators: { apps: [{
|
|
7307
7310
|
type: Input
|
|
7308
7311
|
}], actions: [{
|
|
@@ -11877,6 +11880,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
11877
11880
|
}]
|
|
11878
11881
|
}] });
|
|
11879
11882
|
|
|
11883
|
+
const TIMELINE_SEVERITY_MAP = {
|
|
11884
|
+
in_progress: { timelineIcon: 'motion_play', timelineColor: '#0091C2' },
|
|
11885
|
+
success: { timelineIcon: 'check_circle', timelineColor: '#0A8765' },
|
|
11886
|
+
cancelled: { timelineIcon: 'do_not_disturb_on', timelineColor: '#CBD5E1' },
|
|
11887
|
+
error: { timelineIcon: 'motion_photos_paused', timelineColor: '#B91C1C' },
|
|
11888
|
+
paused: { timelineIcon: 'pause_circle', timelineColor: '#E1963D' },
|
|
11889
|
+
waiting: { timelineIcon: 'clock_loader_10', timelineColor: '#0A3A78' }
|
|
11890
|
+
};
|
|
11891
|
+
class KvTimelineComponent {
|
|
11892
|
+
get parsedEvents() {
|
|
11893
|
+
const original = this.dataSource() ?? [];
|
|
11894
|
+
// Dinamicamente calcula quantos eventos terão severity real
|
|
11895
|
+
const dynamicLastCount = this.lastOnly && this.getLastActiveCount
|
|
11896
|
+
? this.getLastActiveCount(original)
|
|
11897
|
+
: 1;
|
|
11898
|
+
return original.map((item, index, array) => {
|
|
11899
|
+
const realSeverity = this.getSeverityFn(item);
|
|
11900
|
+
if (this.lastOnly) {
|
|
11901
|
+
const dynamicLastCount = this.getLastActiveCount?.(original) ?? 1;
|
|
11902
|
+
const reversed = [...array].reverse();
|
|
11903
|
+
const indices = reversed
|
|
11904
|
+
.map((e, i) => ({
|
|
11905
|
+
index: array.length - 1 - i,
|
|
11906
|
+
severity: this.getSeverityFn(e)
|
|
11907
|
+
}))
|
|
11908
|
+
.filter(e => e.severity !== 'success')
|
|
11909
|
+
.slice(0, dynamicLastCount)
|
|
11910
|
+
.map(e => e.index);
|
|
11911
|
+
const severity = indices.includes(index) ? realSeverity : 'success';
|
|
11912
|
+
const { timelineIcon, timelineColor } = TIMELINE_SEVERITY_MAP[severity];
|
|
11913
|
+
return { ...item, severity, timelineIcon, timelineColor };
|
|
11914
|
+
}
|
|
11915
|
+
const { timelineIcon, timelineColor } = TIMELINE_SEVERITY_MAP[realSeverity];
|
|
11916
|
+
return { ...item, severity: realSeverity, timelineIcon, timelineColor };
|
|
11917
|
+
});
|
|
11918
|
+
}
|
|
11919
|
+
constructor() {
|
|
11920
|
+
this.dataSource = input();
|
|
11921
|
+
this.lastOnly = false;
|
|
11922
|
+
this.layout = 'vertical';
|
|
11923
|
+
}
|
|
11924
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11925
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.8", type: KvTimelineComponent, isStandalone: true, selector: "kv-timeline", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, getSeverityFn: { classPropertyName: "getSeverityFn", publicName: "getSeverityFn", isSignal: false, isRequired: false, transformFunction: null }, getLastActiveCount: { classPropertyName: "getLastActiveCount", publicName: "getLastActiveCount", isSignal: false, isRequired: false, transformFunction: null }, lastOnly: { classPropertyName: "lastOnly", publicName: "lastOnly", isSignal: false, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: false, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: false, isRequired: false, transformFunction: null }, oppositeTemplate: { classPropertyName: "oppositeTemplate", publicName: "oppositeTemplate", isSignal: false, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"card\">\r\n <p-timeline [value]=\"parsedEvents\" [align]=\"align\" [layout]=\"layout\" >\r\n\r\n <ng-template pTemplate=\"marker\" let-event>\r\n <span class=\"material-symbols-outlined\" [ngStyle]=\"{ color: event.timelineColor, 'font-size': '1.6rem' }\">\r\n {{ event.timelineIcon }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- TIMELINE OPPOSITE CONTENT -->\r\n <ng-template pTemplate=\"opposite\" let-event>\r\n <ng-container\r\n *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\">\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- TIMELINE CONTENT -->\r\n <ng-template pTemplate=\"content\" let-event>\r\n <ng-container\r\n *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\">\r\n </ng-container>\r\n </ng-template>\r\n </p-timeline>\r\n</div>\r\n", styles: [".material-symbols-outlined{font-variation-settings:\"FILL\" 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i2$6.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
|
|
11926
|
+
}
|
|
11927
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvTimelineComponent, decorators: [{
|
|
11928
|
+
type: Component,
|
|
11929
|
+
args: [{ selector: 'kv-timeline', standalone: true, imports: [CommonModule, TimelineModule], template: "<div class=\"card\">\r\n <p-timeline [value]=\"parsedEvents\" [align]=\"align\" [layout]=\"layout\" >\r\n\r\n <ng-template pTemplate=\"marker\" let-event>\r\n <span class=\"material-symbols-outlined\" [ngStyle]=\"{ color: event.timelineColor, 'font-size': '1.6rem' }\">\r\n {{ event.timelineIcon }}\r\n </span>\r\n </ng-template>\r\n\r\n <!-- TIMELINE OPPOSITE CONTENT -->\r\n <ng-template pTemplate=\"opposite\" let-event>\r\n <ng-container\r\n *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\">\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- TIMELINE CONTENT -->\r\n <ng-template pTemplate=\"content\" let-event>\r\n <ng-container\r\n *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\">\r\n </ng-container>\r\n </ng-template>\r\n </p-timeline>\r\n</div>\r\n", styles: [".material-symbols-outlined{font-variation-settings:\"FILL\" 1}\n"] }]
|
|
11930
|
+
}], ctorParameters: () => [], propDecorators: { getSeverityFn: [{
|
|
11931
|
+
type: Input
|
|
11932
|
+
}], getLastActiveCount: [{
|
|
11933
|
+
type: Input
|
|
11934
|
+
}], lastOnly: [{
|
|
11935
|
+
type: Input
|
|
11936
|
+
}], align: [{
|
|
11937
|
+
type: Input
|
|
11938
|
+
}], layout: [{
|
|
11939
|
+
type: Input
|
|
11940
|
+
}], oppositeTemplate: [{
|
|
11941
|
+
type: Input
|
|
11942
|
+
}], contentTemplate: [{
|
|
11943
|
+
type: Input
|
|
11944
|
+
}] } });
|
|
11945
|
+
|
|
11880
11946
|
/*
|
|
11881
11947
|
* Public API Surface of keevo-components
|
|
11882
11948
|
*/
|
|
@@ -11888,5 +11954,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
11888
11954
|
* Generated bundle index. Do not edit.
|
|
11889
11955
|
*/
|
|
11890
11956
|
|
|
11891
|
-
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, 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, KvDropdownComponent, KvEditorComponent, KvEditorMentionService, KvEditorPdfService, KvEditorQuillService, KvEditorRelatorioService, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFileViewerNovoComponent, KvFileViewerNovoModule, KvFilterCardComponent, KvFilterCardModule, KvFilterCardsComponent, KvFilterCardsModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberAddonComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextAddonComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, 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, KvStepperComponent, KvStepperModule, KvStepsComponent, KvSwitchComponent, KvTableComponent, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTableViewerComponent, KvTagComponent, KvTagModule, KvTagsComponent, KvTagsModule, KvTreeMultiSelectComponent, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NotificationService, ObjectService, OrgChartService, PDF_STYLES, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TIMEOUTS, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem, mapaSeverityColors };
|
|
11957
|
+
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, 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, KvDropdownComponent, KvEditorComponent, KvEditorMentionService, KvEditorPdfService, KvEditorQuillService, KvEditorRelatorioService, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFileViewerNovoComponent, KvFileViewerNovoModule, KvFilterCardComponent, KvFilterCardModule, KvFilterCardsComponent, KvFilterCardsModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberAddonComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextAddonComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, 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, KvStepperComponent, KvStepperModule, KvStepsComponent, KvSwitchComponent, KvTableComponent, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTableViewerComponent, KvTagComponent, KvTagModule, KvTagsComponent, KvTagsModule, KvTimelineComponent, KvTreeMultiSelectComponent, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NotificationService, ObjectService, OrgChartService, PDF_STYLES, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TIMEOUTS, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem, mapaSeverityColors };
|
|
11892
11958
|
//# sourceMappingURL=keevo-components.mjs.map
|