keevo-components 2.0.32 → 2.0.34

package/fesm2022/keevo-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, Injectable, signal, Directive, Pipe, ViewChildren, ContentChildren, forwardRef, viewChild, input, model, output, effect, computed, HostListener, NgModule, inject, ViewContainerRef, ChangeDetectionStrategy, HostBinding, Injector } from '@angular/core';
+import { EventEmitter, Output, Input, Component, ViewChild, Injectable, signal, Directive, Pipe, ContentChildren, ViewChildren, forwardRef, viewChild, input, model, output, effect, computed, HostListener, NgModule, inject, ViewContainerRef, ChangeDetectionStrategy, HostBinding, Injector } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
 import * as i1$1 from 'primeng/button';
@@ -113,6 +113,7 @@ import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import * as i7$3 from 'primeng/treeselect';
 import { TreeSelectModule } from 'primeng/treeselect';
+import { TimelineModule } from 'primeng/timeline';
 import { SliderModule } from 'primeng/slider';
 import * as i1$5 from 'ngx-loading';
 import { NgxLoadingModule } from 'ngx-loading';
@@ -4118,7 +4119,8 @@ class PrimeNgModule {
             StepperModule,
             InputGroupModule,
             InputGroupAddonModule,
-            TreeSelectModule] }); }
+            TreeSelectModule,
+            TimelineModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PrimeNgModule, providers: [
             ConfirmationService,
             DialogService,
@@ -4186,7 +4188,8 @@ class PrimeNgModule {
             StepperModule,
             InputGroupModule,
             InputGroupAddonModule,
-            TreeSelectModule] }); }
+            TreeSelectModule,
+            TimelineModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PrimeNgModule, decorators: [{
             type: NgModule,
@@ -4253,7 +4256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                         StepperModule,
                         InputGroupModule,
                         InputGroupAddonModule,
-                        TreeSelectModule
+                        TreeSelectModule,
+                        TimelineModule
                     ],
                     providers: [
                         ConfirmationService,
@@ -9948,11 +9952,11 @@ class KvContentViewerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvContentViewerComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvContentViewerComponent, selector: "kv-content-viewer", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, arquivo: { classPropertyName: "arquivo", publicName: "arquivo", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, ekpContent: { classPropertyName: "ekpContent", publicName: "ekpContent", isSignal: true, isRequired: false, transformFunction: null }, extencaoDocumento: { classPropertyName: "extencaoDocumento", publicName: "extencaoDocumento", isSignal: false, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, visualizadorDocumentos: { classPropertyName: "visualizadorDocumentos", publicName: "visualizadorDocumentos", isSignal: false, isRequired: false, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: false, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: false, isRequired: false, transformFunction: null }, noDocumentSelectedTemplate: { classPropertyName: "noDocumentSelectedTemplate", publicName: "noDocumentSelectedTemplate", isSignal: false, isRequired: false, transformFunction: null }, noDocumentListTemplate: { classPropertyName: "noDocumentListTemplate", publicName: "noDocumentListTemplate", isSignal: false, isRequired: false, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: false, isRequired: false, transformFunction: null }, listBottomTemplate: { classPropertyName: "listBottomTemplate", publicName: "listBottomTemplate", isSignal: false, isRequired: false, transformFunction: null }, indvisualizado: { classPropertyName: "indvisualizado", publicName: "indvisualizado", isSignal: false, isRequired: false, transformFunction: null }, btnTelaCheia: { classPropertyName: "btnTelaCheia", publicName: "btnTelaCheia", isSignal: false, isRequired: false, transformFunction: null }, isLoadingSkeleton: { classPropertyName: "isLoadingSkeleton", publicName: "isLoadingSkeleton", isSignal: false, isRequired: false, transformFunction: null }, borderCardNaoVisualizado: { classPropertyName: "borderCardNaoVisualizado", publicName: "borderCardNaoVisualizado", isSignal: false, isRequired: false, transformFunction: null }, contentForm: { classPropertyName: "contentForm", publicName: "contentForm", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onScrollHandler: "onScrollHandler", onSelectFile: "onSelectFile", onSave: "onSave", onCancel: "onCancel" }, ngImport: i0, template: "<div\r\n  class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\"\r\n  style=\"height: 100%\"\r\n>\r\n  <!-- Lista de documentos -->\r\n  <div\r\n    class=\"card-perfil col-12 md:col-4 lg:col-3 flex flex-column justify-content-between\"\r\n    (scroll)=\"scrollHandler($event)\"\r\n    [ngClass]=\"{\r\n      'overflow-y-auto': dataSource().length > 0,\r\n      'overflow-y-hidden': dataSource().length === 0\r\n    }\"\r\n    style=\"position: relative; height: 100%; min-height: 15rem\"\r\n  >\r\n    <div *ngIf=\"dataSource().length > 0; else emptyDocumentList\" class=\"col-12\">\r\n      <!-- Lista de cards -->\r\n      <div\r\n        *ngFor=\"let option of dataSource(); trackBy: trackByFn\"\r\n        class=\"card-normal outline-none border-round-xl w-full p-2 m-1 grid p-fluid flex flex-row flex-nowrap align-items-center justify-content-center cursor-pointer\"\r\n        (click)=\"visualizarPreview(option)\"\r\n        [ngClass]=\"{\r\n                    'card-naoVisualizado': !isVisualizado(option) && borderCardNaoVisualizado,\r\n                    'card-selected': option === arquivoPreview(),\r\n                    'card-normal': option !== arquivoPreview(),\r\n                    }\"\r\n      >\r\n        <div\r\n          class=\"flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis\"\r\n          style=\"max-width: 100%\"\r\n        >\r\n          <ng-container *ngIf=\"cardTemplate; else defaultTemplate\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"cardTemplate; context: { $implicit: option }\"\r\n            ></ng-container>\r\n          </ng-container>\r\n        </div>\r\n        <ng-template #defaultTemplate>\r\n          <div class=\"card-common-style default-card\">\r\n            <h1 class=\"font-bold text-base p-0 m-0\">Bem-vindo!</h1>\r\n            <p class=\"text-sm mt-2\">\r\n              Kv-file-preview aguardando um template...\r\n            </p>\r\n            <p class=\"font-bold text-sm p-0 m-0\">Data: {{ todayDate() }}</p>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #emptyDocumentList>\r\n      @if(isLoadingSkeleton){\r\n      <p-skeleton *ngFor=\"let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]\"></p-skeleton>\r\n      } @if(!noDocumentListTemplate) {\r\n      <div class=\"text-center text-gray-600 mt-4 m-3\" style=\"height: 100%\">\r\n        <div class=\"flex align-items-center gap-1\">\r\n          <span class=\"material-symbols-outlined\"> inbox </span>\r\n          <p>Nenhum documento dispon\u00EDvel.</p>\r\n        </div>\r\n      </div>\r\n      } @else {\r\n      <div class=\"text-center mt-4 m-3\" style=\"height: 100%\">\r\n        <ng-container *ngTemplateOutlet=\"noDocumentListTemplate\"></ng-container>\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Contador de documentos - Fixo na parte inferior -->\r\n    <div\r\n      class=\"sticky-counter flex flex-column\r\n       justify-content-center text-center px-2 p-2\"\r\n      style=\"position: sticky; bottom: -10px; background-color: white; \"\r\n    >\r\n      <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>\r\n      @if(listBottomTemplate) {\r\n      <ng-container *ngTemplateOutlet=\"listBottomTemplate\"></ng-container>\r\n      }\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- Visualizador -->\r\n  <div\r\n    id=\"fullscreenDiv\"\r\n    class=\"card-perfil col-12 md:col-8 lg:col-9 flex-1\"\r\n    style=\"position: relative; height: 100%\"\r\n    [ngStyle]=\"{\r\n      'overflow-y': arquivoPreview() ? 'auto' : 'hidden'\r\n    }\"\r\n  >\r\n    @if(btnTelaCheia && !buttonTemplate) {\r\n    <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span\r\n        id=\"fullscreenBtn\"\r\n        (click)=\"alternarTelaCheia()\"\r\n        class=\"material-symbols-outlined p-2 text-xl cursor-pointer\"\r\n      >\r\n        open_in_full\r\n      </span>\r\n    </div>\r\n    } @if(!btnTelaCheia && buttonTemplate && !contentViewer) {\r\n    <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span class=\"p-3\">\r\n        <span (click)=\"visualizarPreview(null, true)\">\r\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n        </span>\r\n      </span>\r\n    </div>\r\n    } @if(btnTelaCheia && buttonTemplate) {\r\n    <div class=\"grid\">\r\n      @if(!contentViewer) {\r\n      <span class=\"p-3\">\r\n        <span (click)=\"visualizarPreview(null, true)\">\r\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n        </span>\r\n      </span>\r\n      }\r\n      <div class=\"col\"></div>\r\n      <span\r\n        id=\"fullscreenBtn\"\r\n        (click)=\"alternarTelaCheia()\"\r\n        class=\"material-symbols-outlined p-2 text-xl cursor-pointer\"\r\n      >\r\n        open_in_full\r\n      </span>\r\n    </div>\r\n    } @if(visualizadorDocumentos) {\r\n    <ng-container *ngIf=\"arquivo(); else noDocumentSelected\">\r\n      @if(isLoading) {\r\n      <ngx-loading\r\n        [show]=\"isLoading\"\r\n        [config]=\"{ backdropBorderRadius: '3px', fullScreenBackdrop: false }\"\r\n      ></ngx-loading>\r\n      }\r\n      <kv-file-viewer-novo\r\n        *ngIf=\"extencaoDocumento !== 'ekp'\"\r\n        [arquivo]=\"arquivo()!\"\r\n        [type]=\"type()!\"\r\n        [blob]=\"blob()!\"\r\n        [width]=\"'100%'\"\r\n        [height]=\"'100%'\"\r\n        class=\"file-viewer\"\r\n        style=\"max-height: 100%\"\r\n      >\r\n      </kv-file-viewer-novo>\r\n\r\n      <div\r\n        id=\"html-content\"\r\n        [innerHTML]=\"ekpContent()\"\r\n        *ngIf=\"extencaoDocumento === 'ekp'\"\r\n        class=\"ekp-content\"\r\n        style=\"overflow-y: auto; max-height: 100%\"\r\n      ></div>\r\n    </ng-container>\r\n    } @else {\r\n    <div class=\"flex flex-column\" style=\"height: 92%;\" >\r\n      <ng-container\r\n        *ngIf=\"arquivoPreview() || contentViewer; else noDocumentSelected\"\r\n      >\r\n      <div style=\"flex: 1;\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            contentTemplate;\r\n            context: { $implicit: arquivoPreview() }\r\n          \"\r\n          style=\"overflow-y: auto; max-height: 100%\"\r\n        ></ng-container>\r\n      </div>\r\n        @if(contentForm) {\r\n          <div class=\"grid\" style=\"position: sticky; bottom: 0; background-color: white; z-index: 10; padding: 1rem 1rem 0 1rem;\">\r\n            <div class=\"col-8\">\r\n              <span class=\"text-sm\">\r\n                <span class=\"font-bold\">*</span> Campos obrigat\u00F3rios\r\n              </span>\r\n            </div>\r\n            <div class=\"col-2\">\r\n              <kv-button\r\n                label=\"Cancelar\"\r\n                icon=\"close\"\r\n                class=\"w-full md:w-auto\"\r\n                severity=\"tertiary\"\r\n                (onClick)=\"OnCancel()\"\r\n              >\r\n              </kv-button>\r\n            </div>\r\n            <div class=\"col-2\">\r\n              <kv-button\r\n                label=\"Salvar\"\r\n                icon=\"save\"\r\n                class=\"w-full md:w-auto\"\r\n                severity=\"primary\"\r\n                (onClick)=\"OnSave()\"\r\n              >\r\n              </kv-button>\r\n            </div>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div> \r\n    }\r\n    <ng-template #noDocumentSelected>\r\n      @if(!noDocumentSelectedTemplate) {\r\n      <div\r\n        class=\"no-document-message flex flex-column align-items-center justify-content-center\"\r\n        style=\"height: 100%; overflow-y: auto\"\r\n      >\r\n        <p class=\"text-center text-gray-500\">\r\n          Selecione um arquivo para visualiza\u00E7\u00E3o\r\n        </p>\r\n        <img\r\n          [src]=\"\r\n            'https://work-assets.keevo.com.br/img/Digital_personal_files-pana_3.png'\r\n          \"\r\n          style=\"max-height: 50%; margin-top: 2rem\"\r\n          alt=\"\"\r\n        />\r\n      </div>\r\n      } @else {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"noDocumentSelectedTemplate\"\r\n      ></ng-container>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.farol-statuspublicacao{margin-right:.5rem;width:.35rem;border-radius:1rem;-webkit-border-radius:1rem;-moz-border-radius:1rem;-ms-border-radius:1rem;-o-border-radius:1rem}:host ::ng-deep .p-sidebar{border-radius:5px;position:absolute;height:var(--sidebar-height)}:host ::ng-deep .p-sidebar .p-sidebar-content{overflow:auto;border:1px solid #e5e7eb;border-radius:5px;margin-top:1rem}.card-perfil{border:1.5px solid #CBD5E1;background:#fff;border-radius:6px;max-height:100%}:host ::ng-deep .p-fieldset .p-fieldset-content{padding-bottom:0}:host ::ng-deep .p-sidebar .p-sidebar-close{display:none}.card-normal{border:1.5px solid #CBD5E1}.card-naoVisualizado{border-left:4px solid #e6671f}.parent-container{height:100%;display:flex;flex-direction:column}.file-viewer{margin:auto}.ekp-content{min-height:20rem;padding:1rem;overflow-y:auto;border-radius:5px}ngx-loading{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000}.card{transition:all .3s ease;border:1px solid transparent}.card-normal:hover{border:1px solid #a9a9a9;box-shadow:0 4px 8px #0000001a}.card-selected{background-color:#f0f0f0;border:1px solid #c0c0c0;box-shadow:0 6px 12px #00000026;transform:scale(1.02)}:host ::ng-deep .p-skeleton{height:5rem!important;border-radius:1rem;margin-top:.5rem}.loading-spinner{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.5rem;color:#666}#html-content{width:100%;height:100%;overflow-y:auto}:host ::ng-deep .list-card-button .kv-button{width:22px;height:22px}:host ::ng-deep .list-card-button .kv-button .material-symbols-outlined.only-icon.icon-normal[_ngcontent-ng-c4083184952]{font-size:1rem}.download-icon{font-size:20px;cursor:pointer;transition:transform .3s ease,color .3s ease}.download-icon:hover{color:#0f6cbd;transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: KvFileViewerNovoComponent, selector: "kv-file-viewer-novo", inputs: ["arquivo", "type", "blob", "width", "height"] }, { kind: "component", type: i1$5.NgxLoadingComponent, selector: "ngx-loading", inputs: ["show", "config", "template"] }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup"], outputs: ["iconChange", "onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvContentViewerComponent, selector: "kv-content-viewer", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, arquivo: { classPropertyName: "arquivo", publicName: "arquivo", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, ekpContent: { classPropertyName: "ekpContent", publicName: "ekpContent", isSignal: true, isRequired: false, transformFunction: null }, extencaoDocumento: { classPropertyName: "extencaoDocumento", publicName: "extencaoDocumento", isSignal: false, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, visualizadorDocumentos: { classPropertyName: "visualizadorDocumentos", publicName: "visualizadorDocumentos", isSignal: false, isRequired: false, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: false, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: false, isRequired: false, transformFunction: null }, noDocumentSelectedTemplate: { classPropertyName: "noDocumentSelectedTemplate", publicName: "noDocumentSelectedTemplate", isSignal: false, isRequired: false, transformFunction: null }, noDocumentListTemplate: { classPropertyName: "noDocumentListTemplate", publicName: "noDocumentListTemplate", isSignal: false, isRequired: false, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: false, isRequired: false, transformFunction: null }, listBottomTemplate: { classPropertyName: "listBottomTemplate", publicName: "listBottomTemplate", isSignal: false, isRequired: false, transformFunction: null }, indvisualizado: { classPropertyName: "indvisualizado", publicName: "indvisualizado", isSignal: false, isRequired: false, transformFunction: null }, btnTelaCheia: { classPropertyName: "btnTelaCheia", publicName: "btnTelaCheia", isSignal: false, isRequired: false, transformFunction: null }, isLoadingSkeleton: { classPropertyName: "isLoadingSkeleton", publicName: "isLoadingSkeleton", isSignal: false, isRequired: false, transformFunction: null }, borderCardNaoVisualizado: { classPropertyName: "borderCardNaoVisualizado", publicName: "borderCardNaoVisualizado", isSignal: false, isRequired: false, transformFunction: null }, contentForm: { classPropertyName: "contentForm", publicName: "contentForm", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onScrollHandler: "onScrollHandler", onSelectFile: "onSelectFile", onSave: "onSave", onCancel: "onCancel" }, ngImport: i0, template: "<div\r\n  class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\"\r\n  style=\"height: 100%\"\r\n>\r\n  <!-- Lista de documentos -->\r\n  <div\r\n    class=\"card-perfil col-12 md:col-4 lg:col-3 flex flex-column justify-content-between\"\r\n    (scroll)=\"scrollHandler($event)\"\r\n    [ngClass]=\"{\r\n      'overflow-y-auto': dataSource().length > 0,\r\n      'overflow-y-hidden': dataSource().length === 0\r\n    }\"\r\n    style=\"position: relative; height: 100%; min-height: 15rem\"\r\n  >\r\n    <div *ngIf=\"dataSource().length > 0; else emptyDocumentList\" class=\"col-12\">\r\n      <!-- Lista de cards -->\r\n      <div\r\n        *ngFor=\"let option of dataSource(); trackBy: trackByFn\"\r\n        class=\"card-normal outline-none border-round-xl w-full p-2 m-1 grid p-fluid flex flex-row flex-nowrap align-items-center justify-content-center cursor-pointer\"\r\n        (click)=\"visualizarPreview(option)\"\r\n        [ngClass]=\"{\r\n                    'card-naoVisualizado': !isVisualizado(option) && borderCardNaoVisualizado,\r\n                    'card-selected': option === arquivoPreview(),\r\n                    'card-normal': option !== arquivoPreview(),\r\n                    }\"\r\n      >\r\n        <div\r\n          class=\"flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis\"\r\n          style=\"max-width: 100%\"\r\n        >\r\n          <ng-container *ngIf=\"cardTemplate; else defaultTemplate\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"cardTemplate; context: { $implicit: option }\"\r\n            ></ng-container>\r\n          </ng-container>\r\n        </div>\r\n        <ng-template #defaultTemplate>\r\n          <div class=\"card-common-style default-card\">\r\n            <h1 class=\"font-bold text-base p-0 m-0\">Bem-vindo!</h1>\r\n            <p class=\"text-sm mt-2\">\r\n              Kv-file-preview aguardando um template...\r\n            </p>\r\n            <p class=\"font-bold text-sm p-0 m-0\">Data: {{ todayDate() }}</p>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #emptyDocumentList>\r\n      @if(isLoadingSkeleton){\r\n      <p-skeleton \r\n        *ngFor=\"let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]\" \r\n        height=\"5rem\" \r\n        [style]=\"{ 'margin-bottom': '0.25rem', 'borderRadius': '0.75rem' }\"\r\n      ></p-skeleton>\r\n      } @if(!noDocumentListTemplate) {\r\n      <div class=\"text-center text-gray-600 mt-4 m-3\" style=\"height: 100%\">\r\n        <div class=\"flex align-items-center gap-1\">\r\n          <span class=\"material-symbols-outlined\"> inbox </span>\r\n          <p>Nenhum documento dispon\u00EDvel.</p>\r\n        </div>\r\n      </div>\r\n      } @else {\r\n      <div class=\"text-center mt-4 m-3\" style=\"height: 100%\">\r\n        <ng-container *ngTemplateOutlet=\"noDocumentListTemplate\"></ng-container>\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Contador de documentos - Fixo na parte inferior -->\r\n    <div\r\n      class=\"sticky-counter flex flex-column\r\n       justify-content-center text-center px-2 p-2\"\r\n      style=\"position: sticky; bottom: -10px; background-color: white; \"\r\n    >\r\n      <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>\r\n      @if(listBottomTemplate) {\r\n      <ng-container *ngTemplateOutlet=\"listBottomTemplate\"></ng-container>\r\n      }\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- Visualizador -->\r\n  <div\r\n    id=\"fullscreenDiv\"\r\n    class=\"card-perfil col-12 md:col-8 lg:col-9 flex-1\"\r\n    style=\"position: relative; height: 100%\"\r\n    [ngStyle]=\"{\r\n      'overflow-y': arquivoPreview() ? 'auto' : 'hidden'\r\n    }\"\r\n  >\r\n    @if(btnTelaCheia && !buttonTemplate) {\r\n    <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span\r\n        id=\"fullscreenBtn\"\r\n        (click)=\"alternarTelaCheia()\"\r\n        class=\"material-symbols-outlined p-2 text-xl cursor-pointer\"\r\n      >\r\n        open_in_full\r\n      </span>\r\n    </div>\r\n    } @if(!btnTelaCheia && buttonTemplate && !contentViewer) {\r\n    <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span class=\"p-3\">\r\n        <span (click)=\"visualizarPreview(null, true)\">\r\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n        </span>\r\n      </span>\r\n    </div>\r\n    } @if(btnTelaCheia && buttonTemplate) {\r\n    <div class=\"grid\">\r\n      @if(!contentViewer) {\r\n      <span class=\"p-3\">\r\n        <span (click)=\"visualizarPreview(null, true)\">\r\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n        </span>\r\n      </span>\r\n      }\r\n      <div class=\"col\"></div>\r\n      <span\r\n        id=\"fullscreenBtn\"\r\n        (click)=\"alternarTelaCheia()\"\r\n        class=\"material-symbols-outlined p-2 text-xl cursor-pointer\"\r\n      >\r\n        open_in_full\r\n      </span>\r\n    </div>\r\n    } @if(visualizadorDocumentos) {\r\n    <ng-container *ngIf=\"arquivo(); else noDocumentSelected\">\r\n      @if(isLoading) {\r\n      <ngx-loading\r\n        [show]=\"isLoading\"\r\n        [config]=\"{ backdropBorderRadius: '3px', fullScreenBackdrop: false }\"\r\n      ></ngx-loading>\r\n      }\r\n      <kv-file-viewer-novo\r\n        *ngIf=\"extencaoDocumento !== 'ekp'\"\r\n        [arquivo]=\"arquivo()!\"\r\n        [type]=\"type()!\"\r\n        [blob]=\"blob()!\"\r\n        [width]=\"'100%'\"\r\n        [height]=\"'100%'\"\r\n        class=\"file-viewer\"\r\n        style=\"max-height: 100%\"\r\n      >\r\n      </kv-file-viewer-novo>\r\n\r\n      <div\r\n        id=\"html-content\"\r\n        [innerHTML]=\"ekpContent()\"\r\n        *ngIf=\"extencaoDocumento === 'ekp'\"\r\n        class=\"ekp-content\"\r\n        style=\"overflow-y: auto; max-height: 100%\"\r\n      ></div>\r\n    </ng-container>\r\n    } @else {\r\n    <div class=\"flex flex-column\" style=\"height: 92%;\" >\r\n      <ng-container\r\n        *ngIf=\"arquivoPreview() || contentViewer; else noDocumentSelected\"\r\n      >\r\n      <div style=\"flex: 1;\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            contentTemplate;\r\n            context: { $implicit: arquivoPreview() }\r\n          \"\r\n          style=\"overflow-y: auto; max-height: 100%\"\r\n        ></ng-container>\r\n      </div>\r\n        @if(contentForm) {\r\n          <div class=\"grid\" style=\"position: sticky; bottom: 0; background-color: white; z-index: 10; padding: 1rem 1rem 0 1rem;\">\r\n            <div class=\"col-8\">\r\n              <span class=\"text-sm\">\r\n                <span class=\"font-bold\">*</span> Campos obrigat\u00F3rios\r\n              </span>\r\n            </div>\r\n            <div class=\"col-2\">\r\n              <kv-button\r\n                label=\"Cancelar\"\r\n                icon=\"close\"\r\n                class=\"w-full md:w-auto\"\r\n                severity=\"tertiary\"\r\n                (onClick)=\"OnCancel()\"\r\n              >\r\n              </kv-button>\r\n            </div>\r\n            <div class=\"col-2\">\r\n              <kv-button\r\n                label=\"Salvar\"\r\n                icon=\"save\"\r\n                class=\"w-full md:w-auto\"\r\n                severity=\"primary\"\r\n                (onClick)=\"OnSave()\"\r\n              >\r\n              </kv-button>\r\n            </div>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div> \r\n    }\r\n    <ng-template #noDocumentSelected>\r\n      @if(!noDocumentSelectedTemplate) {\r\n      <div\r\n        class=\"no-document-message flex flex-column align-items-center justify-content-center\"\r\n        style=\"height: 100%; overflow-y: auto\"\r\n      >\r\n        <p class=\"text-center text-gray-500\">\r\n          Selecione um arquivo para visualiza\u00E7\u00E3o\r\n        </p>\r\n        <img\r\n          [src]=\"\r\n            'https://work-assets.keevo.com.br/img/Digital_personal_files-pana_3.png'\r\n          \"\r\n          style=\"max-height: 50%; margin-top: 2rem\"\r\n          alt=\"\"\r\n        />\r\n      </div>\r\n      } @else {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"noDocumentSelectedTemplate\"\r\n      ></ng-container>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.farol-statuspublicacao{margin-right:.5rem;width:.35rem;border-radius:1rem;-webkit-border-radius:1rem;-moz-border-radius:1rem;-ms-border-radius:1rem;-o-border-radius:1rem}:host ::ng-deep .p-sidebar{border-radius:5px;position:absolute;height:var(--sidebar-height)}:host ::ng-deep .p-sidebar .p-sidebar-content{overflow:auto;border:1px solid #e5e7eb;border-radius:5px;margin-top:1rem}.card-perfil{border:1.5px solid #CBD5E1;background:#fff;border-radius:6px;max-height:100%}:host ::ng-deep .p-fieldset .p-fieldset-content{padding-bottom:0}:host ::ng-deep .p-sidebar .p-sidebar-close{display:none}.card-normal{border:1.5px solid #CBD5E1}.card-naoVisualizado{border-left:4px solid #e6671f}.parent-container{height:100%;display:flex;flex-direction:column}.file-viewer{margin:auto}.ekp-content{min-height:20rem;padding:1rem;overflow-y:auto;border-radius:5px}ngx-loading{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000}.card{transition:all .3s ease;border:1px solid transparent}.card-normal:hover{border:1px solid #a9a9a9;box-shadow:0 4px 8px #0000001a}.card-selected{background-color:#f0f0f0;border:1px solid #c0c0c0;box-shadow:0 6px 12px #00000026;transform:scale(1.02)}.loading-spinner{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.5rem;color:#666}#html-content{width:100%;height:100%;overflow-y:auto}:host ::ng-deep .list-card-button .kv-button{width:22px;height:22px}:host ::ng-deep .list-card-button .kv-button .material-symbols-outlined.only-icon.icon-normal[_ngcontent-ng-c4083184952]{font-size:1rem}.download-icon{font-size:20px;cursor:pointer;transition:transform .3s ease,color .3s ease}.download-icon:hover{color:#0f6cbd;transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: KvFileViewerNovoComponent, selector: "kv-file-viewer-novo", inputs: ["arquivo", "type", "blob", "width", "height"] }, { kind: "component", type: i1$5.NgxLoadingComponent, selector: "ngx-loading", inputs: ["show", "config", "template"] }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup"], outputs: ["iconChange", "onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvContentViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-content-viewer', template: "<div\r\n  class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\"\r\n  style=\"height: 100%\"\r\n>\r\n  <!-- Lista de documentos -->\r\n  <div\r\n    class=\"card-perfil col-12 md:col-4 lg:col-3 flex flex-column justify-content-between\"\r\n    (scroll)=\"scrollHandler($event)\"\r\n    [ngClass]=\"{\r\n      'overflow-y-auto': dataSource().length > 0,\r\n      'overflow-y-hidden': dataSource().length === 0\r\n    }\"\r\n    style=\"position: relative; height: 100%; min-height: 15rem\"\r\n  >\r\n    <div *ngIf=\"dataSource().length > 0; else emptyDocumentList\" class=\"col-12\">\r\n      <!-- Lista de cards -->\r\n      <div\r\n        *ngFor=\"let option of dataSource(); trackBy: trackByFn\"\r\n        class=\"card-normal outline-none border-round-xl w-full p-2 m-1 grid p-fluid flex flex-row flex-nowrap align-items-center justify-content-center cursor-pointer\"\r\n        (click)=\"visualizarPreview(option)\"\r\n        [ngClass]=\"{\r\n                    'card-naoVisualizado': !isVisualizado(option) && borderCardNaoVisualizado,\r\n                    'card-selected': option === arquivoPreview(),\r\n                    'card-normal': option !== arquivoPreview(),\r\n                    }\"\r\n      >\r\n        <div\r\n          class=\"flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis\"\r\n          style=\"max-width: 100%\"\r\n        >\r\n          <ng-container *ngIf=\"cardTemplate; else defaultTemplate\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"cardTemplate; context: { $implicit: option }\"\r\n            ></ng-container>\r\n          </ng-container>\r\n        </div>\r\n        <ng-template #defaultTemplate>\r\n          <div class=\"card-common-style default-card\">\r\n            <h1 class=\"font-bold text-base p-0 m-0\">Bem-vindo!</h1>\r\n            <p class=\"text-sm mt-2\">\r\n              Kv-file-preview aguardando um template...\r\n            </p>\r\n            <p class=\"font-bold text-sm p-0 m-0\">Data: {{ todayDate() }}</p>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #emptyDocumentList>\r\n      @if(isLoadingSkeleton){\r\n      <p-skeleton *ngFor=\"let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]\"></p-skeleton>\r\n      } @if(!noDocumentListTemplate) {\r\n      <div class=\"text-center text-gray-600 mt-4 m-3\" style=\"height: 100%\">\r\n        <div class=\"flex align-items-center gap-1\">\r\n          <span class=\"material-symbols-outlined\"> inbox </span>\r\n          <p>Nenhum documento dispon\u00EDvel.</p>\r\n        </div>\r\n      </div>\r\n      } @else {\r\n      <div class=\"text-center mt-4 m-3\" style=\"height: 100%\">\r\n        <ng-container *ngTemplateOutlet=\"noDocumentListTemplate\"></ng-container>\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Contador de documentos - Fixo na parte inferior -->\r\n    <div\r\n      class=\"sticky-counter flex flex-column\r\n       justify-content-center text-center px-2 p-2\"\r\n      style=\"position: sticky; bottom: -10px; background-color: white; \"\r\n    >\r\n      <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>\r\n      @if(listBottomTemplate) {\r\n      <ng-container *ngTemplateOutlet=\"listBottomTemplate\"></ng-container>\r\n      }\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- Visualizador -->\r\n  <div\r\n    id=\"fullscreenDiv\"\r\n    class=\"card-perfil col-12 md:col-8 lg:col-9 flex-1\"\r\n    style=\"position: relative; height: 100%\"\r\n    [ngStyle]=\"{\r\n      'overflow-y': arquivoPreview() ? 'auto' : 'hidden'\r\n    }\"\r\n  >\r\n    @if(btnTelaCheia && !buttonTemplate) {\r\n    <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span\r\n        id=\"fullscreenBtn\"\r\n        (click)=\"alternarTelaCheia()\"\r\n        class=\"material-symbols-outlined p-2 text-xl cursor-pointer\"\r\n      >\r\n        open_in_full\r\n      </span>\r\n    </div>\r\n    } @if(!btnTelaCheia && buttonTemplate && !contentViewer) {\r\n    <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span class=\"p-3\">\r\n        <span (click)=\"visualizarPreview(null, true)\">\r\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n        </span>\r\n      </span>\r\n    </div>\r\n    } @if(btnTelaCheia && buttonTemplate) {\r\n    <div class=\"grid\">\r\n      @if(!contentViewer) {\r\n      <span class=\"p-3\">\r\n        <span (click)=\"visualizarPreview(null, true)\">\r\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n        </span>\r\n      </span>\r\n      }\r\n      <div class=\"col\"></div>\r\n      <span\r\n        id=\"fullscreenBtn\"\r\n        (click)=\"alternarTelaCheia()\"\r\n        class=\"material-symbols-outlined p-2 text-xl cursor-pointer\"\r\n      >\r\n        open_in_full\r\n      </span>\r\n    </div>\r\n    } @if(visualizadorDocumentos) {\r\n    <ng-container *ngIf=\"arquivo(); else noDocumentSelected\">\r\n      @if(isLoading) {\r\n      <ngx-loading\r\n        [show]=\"isLoading\"\r\n        [config]=\"{ backdropBorderRadius: '3px', fullScreenBackdrop: false }\"\r\n      ></ngx-loading>\r\n      }\r\n      <kv-file-viewer-novo\r\n        *ngIf=\"extencaoDocumento !== 'ekp'\"\r\n        [arquivo]=\"arquivo()!\"\r\n        [type]=\"type()!\"\r\n        [blob]=\"blob()!\"\r\n        [width]=\"'100%'\"\r\n        [height]=\"'100%'\"\r\n        class=\"file-viewer\"\r\n        style=\"max-height: 100%\"\r\n      >\r\n      </kv-file-viewer-novo>\r\n\r\n      <div\r\n        id=\"html-content\"\r\n        [innerHTML]=\"ekpContent()\"\r\n        *ngIf=\"extencaoDocumento === 'ekp'\"\r\n        class=\"ekp-content\"\r\n        style=\"overflow-y: auto; max-height: 100%\"\r\n      ></div>\r\n    </ng-container>\r\n    } @else {\r\n    <div class=\"flex flex-column\" style=\"height: 92%;\" >\r\n      <ng-container\r\n        *ngIf=\"arquivoPreview() || contentViewer; else noDocumentSelected\"\r\n      >\r\n      <div style=\"flex: 1;\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            contentTemplate;\r\n            context: { $implicit: arquivoPreview() }\r\n          \"\r\n          style=\"overflow-y: auto; max-height: 100%\"\r\n        ></ng-container>\r\n      </div>\r\n        @if(contentForm) {\r\n          <div class=\"grid\" style=\"position: sticky; bottom: 0; background-color: white; z-index: 10; padding: 1rem 1rem 0 1rem;\">\r\n            <div class=\"col-8\">\r\n              <span class=\"text-sm\">\r\n                <span class=\"font-bold\">*</span> Campos obrigat\u00F3rios\r\n              </span>\r\n            </div>\r\n            <div class=\"col-2\">\r\n              <kv-button\r\n                label=\"Cancelar\"\r\n                icon=\"close\"\r\n                class=\"w-full md:w-auto\"\r\n                severity=\"tertiary\"\r\n                (onClick)=\"OnCancel()\"\r\n              >\r\n              </kv-button>\r\n            </div>\r\n            <div class=\"col-2\">\r\n              <kv-button\r\n                label=\"Salvar\"\r\n                icon=\"save\"\r\n                class=\"w-full md:w-auto\"\r\n                severity=\"primary\"\r\n                (onClick)=\"OnSave()\"\r\n              >\r\n              </kv-button>\r\n            </div>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div> \r\n    }\r\n    <ng-template #noDocumentSelected>\r\n      @if(!noDocumentSelectedTemplate) {\r\n      <div\r\n        class=\"no-document-message flex flex-column align-items-center justify-content-center\"\r\n        style=\"height: 100%; overflow-y: auto\"\r\n      >\r\n        <p class=\"text-center text-gray-500\">\r\n          Selecione um arquivo para visualiza\u00E7\u00E3o\r\n        </p>\r\n        <img\r\n          [src]=\"\r\n            'https://work-assets.keevo.com.br/img/Digital_personal_files-pana_3.png'\r\n          \"\r\n          style=\"max-height: 50%; margin-top: 2rem\"\r\n          alt=\"\"\r\n        />\r\n      </div>\r\n      } @else {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"noDocumentSelectedTemplate\"\r\n      ></ng-container>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.farol-statuspublicacao{margin-right:.5rem;width:.35rem;border-radius:1rem;-webkit-border-radius:1rem;-moz-border-radius:1rem;-ms-border-radius:1rem;-o-border-radius:1rem}:host ::ng-deep .p-sidebar{border-radius:5px;position:absolute;height:var(--sidebar-height)}:host ::ng-deep .p-sidebar .p-sidebar-content{overflow:auto;border:1px solid #e5e7eb;border-radius:5px;margin-top:1rem}.card-perfil{border:1.5px solid #CBD5E1;background:#fff;border-radius:6px;max-height:100%}:host ::ng-deep .p-fieldset .p-fieldset-content{padding-bottom:0}:host ::ng-deep .p-sidebar .p-sidebar-close{display:none}.card-normal{border:1.5px solid #CBD5E1}.card-naoVisualizado{border-left:4px solid #e6671f}.parent-container{height:100%;display:flex;flex-direction:column}.file-viewer{margin:auto}.ekp-content{min-height:20rem;padding:1rem;overflow-y:auto;border-radius:5px}ngx-loading{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000}.card{transition:all .3s ease;border:1px solid transparent}.card-normal:hover{border:1px solid #a9a9a9;box-shadow:0 4px 8px #0000001a}.card-selected{background-color:#f0f0f0;border:1px solid #c0c0c0;box-shadow:0 6px 12px #00000026;transform:scale(1.02)}:host ::ng-deep .p-skeleton{height:5rem!important;border-radius:1rem;margin-top:.5rem}.loading-spinner{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.5rem;color:#666}#html-content{width:100%;height:100%;overflow-y:auto}:host ::ng-deep .list-card-button .kv-button{width:22px;height:22px}:host ::ng-deep .list-card-button .kv-button .material-symbols-outlined.only-icon.icon-normal[_ngcontent-ng-c4083184952]{font-size:1rem}.download-icon{font-size:20px;cursor:pointer;transition:transform .3s ease,color .3s ease}.download-icon:hover{color:#0f6cbd;transform:scale(1.2)}\n"] }]
+            args: [{ selector: 'kv-content-viewer', template: "<div\r\n  class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\"\r\n  style=\"height: 100%\"\r\n>\r\n  <!-- Lista de documentos -->\r\n  <div\r\n    class=\"card-perfil col-12 md:col-4 lg:col-3 flex flex-column justify-content-between\"\r\n    (scroll)=\"scrollHandler($event)\"\r\n    [ngClass]=\"{\r\n      'overflow-y-auto': dataSource().length > 0,\r\n      'overflow-y-hidden': dataSource().length === 0\r\n    }\"\r\n    style=\"position: relative; height: 100%; min-height: 15rem\"\r\n  >\r\n    <div *ngIf=\"dataSource().length > 0; else emptyDocumentList\" class=\"col-12\">\r\n      <!-- Lista de cards -->\r\n      <div\r\n        *ngFor=\"let option of dataSource(); trackBy: trackByFn\"\r\n        class=\"card-normal outline-none border-round-xl w-full p-2 m-1 grid p-fluid flex flex-row flex-nowrap align-items-center justify-content-center cursor-pointer\"\r\n        (click)=\"visualizarPreview(option)\"\r\n        [ngClass]=\"{\r\n                    'card-naoVisualizado': !isVisualizado(option) && borderCardNaoVisualizado,\r\n                    'card-selected': option === arquivoPreview(),\r\n                    'card-normal': option !== arquivoPreview(),\r\n                    }\"\r\n      >\r\n        <div\r\n          class=\"flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis\"\r\n          style=\"max-width: 100%\"\r\n        >\r\n          <ng-container *ngIf=\"cardTemplate; else defaultTemplate\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"cardTemplate; context: { $implicit: option }\"\r\n            ></ng-container>\r\n          </ng-container>\r\n        </div>\r\n        <ng-template #defaultTemplate>\r\n          <div class=\"card-common-style default-card\">\r\n            <h1 class=\"font-bold text-base p-0 m-0\">Bem-vindo!</h1>\r\n            <p class=\"text-sm mt-2\">\r\n              Kv-file-preview aguardando um template...\r\n            </p>\r\n            <p class=\"font-bold text-sm p-0 m-0\">Data: {{ todayDate() }}</p>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #emptyDocumentList>\r\n      @if(isLoadingSkeleton){\r\n      <p-skeleton \r\n        *ngFor=\"let i of [1, 2, 3, 4, 5, 6, 7, 8, 9]\" \r\n        height=\"5rem\" \r\n        [style]=\"{ 'margin-bottom': '0.25rem', 'borderRadius': '0.75rem' }\"\r\n      ></p-skeleton>\r\n      } @if(!noDocumentListTemplate) {\r\n      <div class=\"text-center text-gray-600 mt-4 m-3\" style=\"height: 100%\">\r\n        <div class=\"flex align-items-center gap-1\">\r\n          <span class=\"material-symbols-outlined\"> inbox </span>\r\n          <p>Nenhum documento dispon\u00EDvel.</p>\r\n        </div>\r\n      </div>\r\n      } @else {\r\n      <div class=\"text-center mt-4 m-3\" style=\"height: 100%\">\r\n        <ng-container *ngTemplateOutlet=\"noDocumentListTemplate\"></ng-container>\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Contador de documentos - Fixo na parte inferior -->\r\n    <div\r\n      class=\"sticky-counter flex flex-column\r\n       justify-content-center text-center px-2 p-2\"\r\n      style=\"position: sticky; bottom: -10px; background-color: white; \"\r\n    >\r\n      <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>\r\n      @if(listBottomTemplate) {\r\n      <ng-container *ngTemplateOutlet=\"listBottomTemplate\"></ng-container>\r\n      }\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- Visualizador -->\r\n  <div\r\n    id=\"fullscreenDiv\"\r\n    class=\"card-perfil col-12 md:col-8 lg:col-9 flex-1\"\r\n    style=\"position: relative; height: 100%\"\r\n    [ngStyle]=\"{\r\n      'overflow-y': arquivoPreview() ? 'auto' : 'hidden'\r\n    }\"\r\n  >\r\n    @if(btnTelaCheia && !buttonTemplate) {\r\n    <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span\r\n        id=\"fullscreenBtn\"\r\n        (click)=\"alternarTelaCheia()\"\r\n        class=\"material-symbols-outlined p-2 text-xl cursor-pointer\"\r\n      >\r\n        open_in_full\r\n      </span>\r\n    </div>\r\n    } @if(!btnTelaCheia && buttonTemplate && !contentViewer) {\r\n    <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span class=\"p-3\">\r\n        <span (click)=\"visualizarPreview(null, true)\">\r\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n        </span>\r\n      </span>\r\n    </div>\r\n    } @if(btnTelaCheia && buttonTemplate) {\r\n    <div class=\"grid\">\r\n      @if(!contentViewer) {\r\n      <span class=\"p-3\">\r\n        <span (click)=\"visualizarPreview(null, true)\">\r\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n        </span>\r\n      </span>\r\n      }\r\n      <div class=\"col\"></div>\r\n      <span\r\n        id=\"fullscreenBtn\"\r\n        (click)=\"alternarTelaCheia()\"\r\n        class=\"material-symbols-outlined p-2 text-xl cursor-pointer\"\r\n      >\r\n        open_in_full\r\n      </span>\r\n    </div>\r\n    } @if(visualizadorDocumentos) {\r\n    <ng-container *ngIf=\"arquivo(); else noDocumentSelected\">\r\n      @if(isLoading) {\r\n      <ngx-loading\r\n        [show]=\"isLoading\"\r\n        [config]=\"{ backdropBorderRadius: '3px', fullScreenBackdrop: false }\"\r\n      ></ngx-loading>\r\n      }\r\n      <kv-file-viewer-novo\r\n        *ngIf=\"extencaoDocumento !== 'ekp'\"\r\n        [arquivo]=\"arquivo()!\"\r\n        [type]=\"type()!\"\r\n        [blob]=\"blob()!\"\r\n        [width]=\"'100%'\"\r\n        [height]=\"'100%'\"\r\n        class=\"file-viewer\"\r\n        style=\"max-height: 100%\"\r\n      >\r\n      </kv-file-viewer-novo>\r\n\r\n      <div\r\n        id=\"html-content\"\r\n        [innerHTML]=\"ekpContent()\"\r\n        *ngIf=\"extencaoDocumento === 'ekp'\"\r\n        class=\"ekp-content\"\r\n        style=\"overflow-y: auto; max-height: 100%\"\r\n      ></div>\r\n    </ng-container>\r\n    } @else {\r\n    <div class=\"flex flex-column\" style=\"height: 92%;\" >\r\n      <ng-container\r\n        *ngIf=\"arquivoPreview() || contentViewer; else noDocumentSelected\"\r\n      >\r\n      <div style=\"flex: 1;\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            contentTemplate;\r\n            context: { $implicit: arquivoPreview() }\r\n          \"\r\n          style=\"overflow-y: auto; max-height: 100%\"\r\n        ></ng-container>\r\n      </div>\r\n        @if(contentForm) {\r\n          <div class=\"grid\" style=\"position: sticky; bottom: 0; background-color: white; z-index: 10; padding: 1rem 1rem 0 1rem;\">\r\n            <div class=\"col-8\">\r\n              <span class=\"text-sm\">\r\n                <span class=\"font-bold\">*</span> Campos obrigat\u00F3rios\r\n              </span>\r\n            </div>\r\n            <div class=\"col-2\">\r\n              <kv-button\r\n                label=\"Cancelar\"\r\n                icon=\"close\"\r\n                class=\"w-full md:w-auto\"\r\n                severity=\"tertiary\"\r\n                (onClick)=\"OnCancel()\"\r\n              >\r\n              </kv-button>\r\n            </div>\r\n            <div class=\"col-2\">\r\n              <kv-button\r\n                label=\"Salvar\"\r\n                icon=\"save\"\r\n                class=\"w-full md:w-auto\"\r\n                severity=\"primary\"\r\n                (onClick)=\"OnSave()\"\r\n              >\r\n              </kv-button>\r\n            </div>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div> \r\n    }\r\n    <ng-template #noDocumentSelected>\r\n      @if(!noDocumentSelectedTemplate) {\r\n      <div\r\n        class=\"no-document-message flex flex-column align-items-center justify-content-center\"\r\n        style=\"height: 100%; overflow-y: auto\"\r\n      >\r\n        <p class=\"text-center text-gray-500\">\r\n          Selecione um arquivo para visualiza\u00E7\u00E3o\r\n        </p>\r\n        <img\r\n          [src]=\"\r\n            'https://work-assets.keevo.com.br/img/Digital_personal_files-pana_3.png'\r\n          \"\r\n          style=\"max-height: 50%; margin-top: 2rem\"\r\n          alt=\"\"\r\n        />\r\n      </div>\r\n      } @else {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"noDocumentSelectedTemplate\"\r\n      ></ng-container>\r\n      }\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.farol-statuspublicacao{margin-right:.5rem;width:.35rem;border-radius:1rem;-webkit-border-radius:1rem;-moz-border-radius:1rem;-ms-border-radius:1rem;-o-border-radius:1rem}:host ::ng-deep .p-sidebar{border-radius:5px;position:absolute;height:var(--sidebar-height)}:host ::ng-deep .p-sidebar .p-sidebar-content{overflow:auto;border:1px solid #e5e7eb;border-radius:5px;margin-top:1rem}.card-perfil{border:1.5px solid #CBD5E1;background:#fff;border-radius:6px;max-height:100%}:host ::ng-deep .p-fieldset .p-fieldset-content{padding-bottom:0}:host ::ng-deep .p-sidebar .p-sidebar-close{display:none}.card-normal{border:1.5px solid #CBD5E1}.card-naoVisualizado{border-left:4px solid #e6671f}.parent-container{height:100%;display:flex;flex-direction:column}.file-viewer{margin:auto}.ekp-content{min-height:20rem;padding:1rem;overflow-y:auto;border-radius:5px}ngx-loading{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000}.card{transition:all .3s ease;border:1px solid transparent}.card-normal:hover{border:1px solid #a9a9a9;box-shadow:0 4px 8px #0000001a}.card-selected{background-color:#f0f0f0;border:1px solid #c0c0c0;box-shadow:0 6px 12px #00000026;transform:scale(1.02)}.loading-spinner{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.5rem;color:#666}#html-content{width:100%;height:100%;overflow-y:auto}:host ::ng-deep .list-card-button .kv-button{width:22px;height:22px}:host ::ng-deep .list-card-button .kv-button .material-symbols-outlined.only-icon.icon-normal[_ngcontent-ng-c4083184952]{font-size:1rem}.download-icon{font-size:20px;cursor:pointer;transition:transform .3s ease,color .3s ease}.download-icon:hover{color:#0f6cbd;transform:scale(1.2)}\n"] }]
         }], ctorParameters: () => [{ type: NotificationService }], propDecorators: { extencaoDocumento: [{
                 type: Input
             }], totalRecords: [{