keevo-components 2.0.102 → 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/fesm2022/keevo-components.mjs +12 -10
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/api/base-components/base-component-dropdown.d.ts +1 -1
- package/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.d.ts +1 -1
- package/lib/components/kv-inputs/kv-editor/kv-editor.component.d.ts +3 -1
- package/lib/components/kv-stepper/kv-stepper.component.d.ts +1 -1
- package/lib/components/kv-table/kv-table.component.d.ts +1 -1
- package/lib/components/kv-table-expandable/kv-table-expandable.component.d.ts +1 -1
- package/lib/components/kv-tag/kv-tag.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -4907,11 +4907,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
4907
4907
|
|
|
4908
4908
|
class KvInstrucoesReportComponent {
|
|
4909
4909
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstrucoesReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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: "<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: [""] }); }
|
|
4911
4911
|
}
|
|
4912
4912
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstrucoesReportComponent, decorators: [{
|
|
4913
4913
|
type: Component,
|
|
4914
|
-
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" }]
|
|
4915
4915
|
}] });
|
|
4916
4916
|
|
|
4917
4917
|
class KvEditorQuillService {
|
|
@@ -5368,12 +5368,12 @@ class KvEditorPdfService {
|
|
|
5368
5368
|
<style>
|
|
5369
5369
|
#temp-pdf-render-area {
|
|
5370
5370
|
font-family: 'Sans Serif', Arial, sans-serif;
|
|
5371
|
-
font-size:
|
|
5372
|
-
line-height: 1.
|
|
5371
|
+
font-size: 9pt;
|
|
5372
|
+
line-height: 1.2;
|
|
5373
5373
|
text-align: justify;
|
|
5374
5374
|
}
|
|
5375
5375
|
#temp-pdf-render-area p {
|
|
5376
|
-
min-height: 1.
|
|
5376
|
+
min-height: 1.2em;
|
|
5377
5377
|
margin: 0;
|
|
5378
5378
|
padding: 0;
|
|
5379
5379
|
}
|
|
@@ -5407,7 +5407,7 @@ class KvEditorPdfService {
|
|
|
5407
5407
|
renderContainer.style.backgroundColor = 'white';
|
|
5408
5408
|
renderContainer.style.padding = '12mm';
|
|
5409
5409
|
renderContainer.style.width = '210mm';
|
|
5410
|
-
renderContainer.style.fontSize = '
|
|
5410
|
+
renderContainer.style.fontSize = '12px';
|
|
5411
5411
|
renderContainer.innerHTML = htmlContent;
|
|
5412
5412
|
document.body.appendChild(renderContainer);
|
|
5413
5413
|
try {
|
|
@@ -5763,6 +5763,8 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5763
5763
|
// Inputs para relatórios
|
|
5764
5764
|
this.relatorios = input([]);
|
|
5765
5765
|
this.idRelatorioInitial = input(0);
|
|
5766
|
+
this.printButton = input(true);
|
|
5767
|
+
this.labelEmptyDropdown = input('Selecione um relatório');
|
|
5766
5768
|
// Computed properties para relatórios
|
|
5767
5769
|
this.idRelatorioSelected = computed(() => this.relatorioService.getIdRelatorioSelected());
|
|
5768
5770
|
this.relatorio = computed(() => this.relatorioService.getRelatorioSelected());
|
|
@@ -5928,11 +5930,11 @@ class KvEditorComponent extends BaseComponentInput {
|
|
|
5928
5930
|
});
|
|
5929
5931
|
}
|
|
5930
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 }); }
|
|
5931
|
-
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"] }] }); }
|
|
5932
5934
|
}
|
|
5933
5935
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvEditorComponent, decorators: [{
|
|
5934
5936
|
type: Component,
|
|
5935
|
-
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"] }]
|
|
5936
5938
|
}], ctorParameters: () => [{ type: ComponentService }], propDecorators: { canvaHeigth: [{
|
|
5937
5939
|
type: Input
|
|
5938
5940
|
}], contentType: [{
|
|
@@ -7299,11 +7301,11 @@ class KvLayoutComponent {
|
|
|
7299
7301
|
this.showVideoDocEmit.emit(trilha);
|
|
7300
7302
|
}
|
|
7301
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 }); }
|
|
7302
|
-
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" }] }); }
|
|
7303
7305
|
}
|
|
7304
7306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, decorators: [{
|
|
7305
7307
|
type: Component,
|
|
7306
|
-
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"] }]
|
|
7307
7309
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$2.FormBuilder }, { type: i3$1.Router }, { type: i3$1.ActivatedRoute }], propDecorators: { apps: [{
|
|
7308
7310
|
type: Input
|
|
7309
7311
|
}], actions: [{
|