keevo-components 1.8.427 → 1.8.428

package/fesm2022/keevo-components.mjs

@@ -1405,27 +1405,16 @@ class KvTableComponent {
         this.checked = true;
         this.columns = [];
         this.deletedColuns = [];
-        this.prepositions = [
-            'de',
-            'da',
-            'do',
-            'em',
-            'no',
-            'na',
-            'para',
-            'por',
-            'com',
-            'a',
-            'o',
-            'e',
-        ];
-        this.romanNumerals = [
+        this.prepositions = new Set([
+            'de', 'da', 'do', 'em', 'no', 'na', 'para', 'por', 'com', 'a', 'o', 'e'
+        ]);
+        this.romanNumerals = new Set([
             'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII', 'XIII', 'XIV', 'XV',
             'XVI', 'XVII', 'XVIII', 'XIX', 'XX'
-        ];
-        this.siglas = [
+        ]);
+        this.siglas = new Set([
             'UI', 'UX', 'TI'
-        ];
+        ]);
         this.menuFiltro = false;
         this.checkboxClicked = false;
         this.collapsed = false;
@@ -1717,15 +1706,21 @@ class KvTableComponent {
         if (!value)
             return value;
         return value.split(' ').map((word, index) => {
-            if (this.romanNumerals.includes(word.toUpperCase())) {
+            const wordUpper = word.toUpperCase();
+            const wordLower = word.toLocaleLowerCase();
+            // Verifica numerais romanos
+            if (this.romanNumerals.has(wordUpper)) {
                 return word;
             }
-            if (this.siglas.includes(word.toUpperCase())) {
+            // Verifica siglas
+            if (this.siglas.has(wordUpper)) {
                 return word;
             }
-            if (index !== 0 && this.prepositions.includes(word.toLocaleLowerCase())) {
-                return word.toLocaleLowerCase();
+            // Verifica preposições, mas não altera a primeira palavra
+            if (index !== 0 && this.prepositions.has(wordLower)) {
+                return wordLower;
             }
+            // Capitaliza a primeira letra das demais palavras
             return word.charAt(0).toLocaleUpperCase() + word.slice(1).toLocaleLowerCase();
         }).join(' ');
     }
@@ -3538,30 +3533,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
 
 class CapitalizePipe {
     constructor() {
-        this.prepositions = [
+        this.prepositions = new Set([
             'de', 'da', 'do', 'em', 'no', 'na', 'para', 'por', 'com', 'a', 'o', 'e'
-        ];
-        this.romanNumerals = [
+        ]);
+        this.romanNumerals = new Set([
             'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII', 'XIII', 'XIV', 'XV',
             'XVI', 'XVII', 'XVIII', 'XIX', 'XX'
-        ];
-        this.siglas = [
+        ]);
+        this.siglas = new Set([
             'UI', 'UX', 'TI'
-        ];
+        ]);
     }
     transform(value) {
         if (!value)
             return value;
         return value.split(' ').map((word, index) => {
-            if (this.romanNumerals.includes(word.toUpperCase())) {
+            const wordUpper = word.toUpperCase();
+            const wordLower = word.toLocaleLowerCase();
+            // Verifica numerais romanos
+            if (this.romanNumerals.has(wordUpper)) {
                 return word;
             }
-            if (this.siglas.includes(word.toUpperCase())) {
+            // Verifica siglas
+            if (this.siglas.has(wordUpper)) {
                 return word;
             }
-            if (index !== 0 && this.prepositions.includes(word.toLocaleLowerCase())) {
-                return word.toLocaleLowerCase();
+            // Verifica preposições, mas não altera a primeira palavra
+            if (index !== 0 && this.prepositions.has(wordLower)) {
+                return wordLower;
             }
+            // Capitaliza a primeira letra das demais palavras
             return word.charAt(0).toLocaleUpperCase() + word.slice(1).toLocaleLowerCase();
         }).join(' ');
     }
@@ -6171,11 +6172,11 @@ class KvLayoutComponent {
         return !this.showLicencas() && (this.masterName || this.empresaName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }, { token: i3$1.Router }, { token: i3$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }, 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: false, 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 }, userName: { classPropertyName: "userName", publicName: "userName", 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 } }, outputs: { expandMenu: "expandMenuChange", accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit", navigateToDefaultRouteEmit: "navigateToDefaultRouteEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "topMenuActions", predicate: ["topMenuAction"], isSignal: true }], viewQueries: [{ propertyName: "meusDadosPanel", first: true, predicate: ["meusDadosPanel"], descendants: true }, { propertyName: "sidebarRef", first: true, predicate: ["sidebarRef"], descendants: true }, { propertyName: "sistemasPanel", first: true, predicate: ["sistemasPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n  <div\r\n    [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n  ></div>\r\n  @if (showMenu) {\r\n  <div\r\n    [style]=\"{\r\n      minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n    }\"\r\n  ></div>\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    class=\"sidebar-animation\"\r\n    styleClass=\"transition-all\"\r\n  >\r\n    <ng-template pTemplate=\"headless\">\r\n      <div class=\"flex flex-column overflow-hidden\">\r\n        <div\r\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n        >\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            }} py-3\"\r\n          >\r\n            <!-- Logo para o menu expandido -->\r\n            <img\r\n              *ngIf=\"expandMenu() && logoMenuExpand\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuExpand\"\r\n              [style.height]=\"'3rem'\"\r\n              width=\"auto\"\r\n              class=\"cursor-pointer p-1\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Logo para o menu minimizado-->\r\n            <img\r\n              *ngIf=\"!expandMenu() && logoMenuHide\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuHide\"\r\n              [style.height]=\"'3rem'\"\r\n              width=\"auto\"\r\n              class=\"mb-2 p-1\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Toggle menu -->\r\n            <span\r\n              *ngIf=\"showExpandMenu\"\r\n              class=\"material-symbols-outlined top-layout-icons p-1\"\r\n              [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n              [tooltipPosition]=\"'right'\"\r\n              (click)=\"toggleMenu()\"\r\n            >\r\n              menu\r\n            </span>\r\n          </div>\r\n\r\n          @if(showTrocaEmpresa){\r\n          <div\r\n            class=\"flex flex-row align-items-center {{\r\n              expandMenu()\r\n                ? 'justify-content-between'\r\n                : 'justify-content-center'\r\n            }}\"\r\n          >\r\n            <div\r\n              class=\"flex flex-column cursor-pointer\"\r\n              *ngIf=\"expandMenu() && selectedEmpresa\"\r\n              (click)=\"changeEmpresa($event)\"\r\n            >\r\n              <span\r\n                class=\"text-sm font-semibold mr-2\"\r\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n                [tooltipPosition]=\"'right'\"\r\n              >\r\n                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n              </span>\r\n              <span class=\"text-sm mt-1\">{{\r\n                this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n              }}</span>\r\n            </div>\r\n\r\n            <button\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"changeEmpresa($event)\"\r\n              [pTooltip]=\"'Trocar de empresa'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n            </button>\r\n          </div>\r\n          <p-divider type=\"solid\"></p-divider>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n          <!-- menus -->\r\n          <li\r\n            *ngFor=\"let menu of menus; let i = index\"\r\n            [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n          >\r\n            <!-- menu que n\u00E3o tem filho -->\r\n            <a\r\n              (click)=\"callRoute(menu.link)\"\r\n              *ngIf=\"\r\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n              \"\r\n              pRipple\r\n              [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n              [tooltipPosition]=\"'right'\"\r\n              class=\"menu-option\"\r\n              [style.background-color]=\"menu.bgColor\"\r\n              [class.justify-content-center]=\"!expandMenu()\"\r\n            >\r\n              <i\r\n                class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                  expandMenu() ? 'ml-1 mr-2' : ''\r\n                }}  icon-hover-color {{ menu.textColor }}\"\r\n                *ngIf=\"menu.icone\"\r\n              >\r\n                {{ menu.icone }}\r\n              </i>\r\n              <span\r\n                class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n                  menu.textColor\r\n                }}\"\r\n                *ngIf=\"expandMenu()\"\r\n                >{{ menu.descricaomenu }}</span\r\n              >\r\n            </a>\r\n            <!-- menu com filho -->\r\n            <div *ngIf=\"menu.indmenupai\">\r\n              <a\r\n                pRipple\r\n                pStyleClass=\"@next\"\r\n                enterClass=\"hidden\"\r\n                enterActiveClass=\"slidedown\"\r\n                leaveToClass=\"hidden\"\r\n                leaveActiveClass=\"slideup\"\r\n                [style.background-color]=\"\r\n                  isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'\r\n                \"\r\n                class=\"menu-option {{\r\n                  !expandMenu()\r\n                    ? 'justify-content-center'\r\n                    : 'justify-content-between'\r\n                }} \"\r\n                [tooltipPosition]=\"'right'\"\r\n                [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n                (click)=\"\r\n                  expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n                \"\r\n              >\r\n                <div class=\"flex flex-row align-items-center\">\r\n                  <i\r\n                    class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                      expandMenu() ? 'ml-1 mr-2' : ''\r\n                    }} icon-hover-color\"\r\n                    *ngIf=\"menu.icone\"\r\n                    [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n                  >\r\n                    {{ menu.icone }}\r\n                  </i>\r\n                  <span\r\n                    class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n                    *ngIf=\"expandMenu()\"\r\n                    >{{ menu.descricaomenu }}</span\r\n                  >\r\n                </div>\r\n                <span\r\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n                  *ngIf=\"expandMenu()\"\r\n                ></span>\r\n              </a>\r\n\r\n              <!-- filhos -->\r\n              <div\r\n                class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n                  !(\r\n                    menuSelecionado()?.idmenupai == menu.idmenu &&\r\n                    this.expandMenu()\r\n                  ) && 'hidden'\r\n                }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n              >\r\n                <li\r\n                  *ngFor=\"\r\n                    let filho of returnMenuChild(menu.idmenu);\r\n                    let iFilho = index\r\n                  \"\r\n                >\r\n                  <a\r\n                    *ngIf=\"expandMenu()\"\r\n                    (click)=\"callRoute(filho.link)\"\r\n                    pRipple\r\n                    class=\"menu-option\"\r\n                    [style.background-color]=\"filho.bgColor\"\r\n                  >\r\n                    <i\r\n                      class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                        expandMenu() ? 'ml-1 mr-2' : ''\r\n                      }} icon-hover-color\"\r\n                      *ngIf=\"filho.icone\"\r\n                    >\r\n                      {{ filho.icone }}\r\n                    </i>\r\n                    <span\r\n                      class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n                        filho.textColor\r\n                      }}\"\r\n                      *ngIf=\"expandMenu()\"\r\n                      >{{ filho.descricaomenu }}</span\r\n                    >\r\n                  </a>\r\n                </li>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </p-sidebar>\r\n  }\r\n\r\n  <!-- Topbar -->\r\n  <div\r\n    class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n    id=\"page-content\"\r\n    style=\"width: 100vw !important\"\r\n  >\r\n    <div\r\n      class=\"flex flex-row flex-wrap align-items-center justify-content-between m-2 mb-0 gap-1\"\r\n    >\r\n      @if(!showMenu) {\r\n      <!-- Logo home -->\r\n      <div>\r\n        <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n      </div>\r\n      } @else {\r\n      <!-- Breadcrumbs -->\r\n      <div>\r\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n          {{\r\n            breadCrumbItems[breadCrumbItems.length - 1] &&\r\n            breadCrumbItems[breadCrumbItems.length - 1].label\r\n              ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n              : \"\"\r\n          }}\r\n        </p>\r\n        <p-breadcrumb\r\n          *ngIf=\"widthCard > 400\"\r\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n          [model]=\"breadCrumbItems\"\r\n          [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n        ></p-breadcrumb>\r\n      </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) { <span class=\"master-name\">{{ masterName }}</span> }\r\n        @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\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\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\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\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\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\"\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        @for (topAction of topMenuActions(); track $index) {\r\n        <ng-container *ngTemplateOutlet=\"topAction\" />\r\n        }\r\n\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\r\n      </div>\r\n\r\n      @if(widthPage() < 992){\r\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n      <dropdown-master\r\n        *ngIf=\"showLicencas()\"\r\n        class=\"w-full\"\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    </div>\r\n\r\n    <!-- Container -->\r\n    <div class=\"overflow-hidden flex-1 p-2\">\r\n      <p-card\r\n        styleClass=\"overflow-y-auto h-full max-h-full {{\r\n          !showMenu && 'sm:overflow-y-hidden'\r\n        }} card-container\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </p-card>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Painel de aplicativos -->\r\n  <p-overlayPanel\r\n    #sistemasPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">Sistemas</p>\r\n\r\n      <div\r\n        class=\"flex flex-row flex-wrap gap-3 align-items-center justify-content-center mt-5 mb-3\"\r\n        style=\"width: 270px; height: 100%\"\r\n      >\r\n        @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==\r\n        \"https://work-assets.keevo.com.br/img/icone-keevocenter.png\") {\r\n        <div\r\n          class=\"btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n        >\r\n          {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}\r\n        </div>\r\n        } @else {\r\n        <img\r\n          [src]=\"aplicativo.urlicone\"\r\n          class=\"btn-sistema flex align-items-center justify-content-center\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        />\r\n        } }\r\n\r\n        <!-- <button\r\n          *ngFor=\"let aplicativo of apps\"\r\n          pButton\r\n          pRipple\r\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        >\r\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n        </button> -->\r\n      </div>\r\n    </ng-template>\r\n  </p-overlayPanel>\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      <p class=\"title-style mt-3\">\r\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n      </p>\r\n      <div class=\"mt-5 mb-3\"></div>\r\n\r\n      <p-button\r\n        icon=\"pi pi-lock\"\r\n        label=\"Acessar Keepass\"\r\n        (onClick)=\"accessKeePass($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n\r\n      <p-button\r\n        icon=\"pi pi-sign-out\"\r\n        label=\"Sair\"\r\n        (onClick)=\"logout($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#eaeaea 17%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.825rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#eaeaea;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::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}.title-style{position:relative;top:10px;margin-left:20px;font-size:1.25rem;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{font-size:1.3rem;color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .menu-option{padding:.8rem!important;display:flex;align-items:center;cursor:pointer;border-radius:.5rem;transition-duration:150;transition-property:color,background-color;padding:.5rem}::ng-deep .menu-option:hover{background-color:#29b92d!important;color:#fff}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color,.menu-option:hover .content-option-menu{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:12px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#002542}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$9.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i10$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2.Ripple, selector: "[pRipple]" }, { kind: "component", type: i12.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: i13$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DropdownMasterComponent, selector: "dropdown-master", inputs: ["formControlName", "masters"] }, { kind: "pipe", type: CpfCnpjPipe, name: "cpfCnpj" }] }); }
+    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 }, 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: false, 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 }, userName: { classPropertyName: "userName", publicName: "userName", 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 } }, outputs: { expandMenu: "expandMenuChange", accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit", navigateToDefaultRouteEmit: "navigateToDefaultRouteEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "topMenuActions", predicate: ["topMenuAction"], isSignal: true }], viewQueries: [{ propertyName: "meusDadosPanel", first: true, predicate: ["meusDadosPanel"], descendants: true }, { propertyName: "sidebarRef", first: true, predicate: ["sidebarRef"], descendants: true }, { propertyName: "sistemasPanel", first: true, predicate: ["sistemasPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n  <div\r\n    [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n  ></div>\r\n  @if (showMenu) {\r\n  <div\r\n    [style]=\"{\r\n      minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n    }\"\r\n  ></div>\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    class=\"sidebar-animation\"\r\n    styleClass=\"transition-all\"\r\n  >\r\n    <ng-template pTemplate=\"headless\">\r\n      <div class=\"flex flex-column overflow-hidden\">\r\n        <div\r\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n        >\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            }} py-3\"\r\n          >\r\n            <!-- Logo para o menu expandido -->\r\n            <img\r\n              *ngIf=\"expandMenu() && logoMenuExpand\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuExpand\"\r\n              [style.height]=\"'3rem'\"\r\n              width=\"auto\"\r\n              class=\"cursor-pointer p-1\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Logo para o menu minimizado-->\r\n            <img\r\n              *ngIf=\"!expandMenu() && logoMenuHide\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuHide\"\r\n              [style.height]=\"'3rem'\"\r\n              width=\"auto\"\r\n              class=\"mb-2 p-1\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Toggle menu -->\r\n            <span\r\n              *ngIf=\"showExpandMenu\"\r\n              class=\"material-symbols-outlined top-layout-icons p-1\"\r\n              [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n              [tooltipPosition]=\"'right'\"\r\n              (click)=\"toggleMenu()\"\r\n            >\r\n              menu\r\n            </span>\r\n          </div>\r\n\r\n          @if(showTrocaEmpresa){\r\n          <div\r\n            class=\"flex flex-row align-items-center {{\r\n              expandMenu()\r\n                ? 'justify-content-between'\r\n                : 'justify-content-center'\r\n            }}\"\r\n          >\r\n            <div\r\n              class=\"flex flex-column cursor-pointer\"\r\n              *ngIf=\"expandMenu() && selectedEmpresa\"\r\n              (click)=\"changeEmpresa($event)\"\r\n            >\r\n              <span\r\n                class=\"text-sm font-semibold mr-2\"\r\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n                [tooltipPosition]=\"'right'\"\r\n              >\r\n                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n              </span>\r\n              <span class=\"text-sm mt-1\">{{\r\n                this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n              }}</span>\r\n            </div>\r\n\r\n            <button\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"changeEmpresa($event)\"\r\n              [pTooltip]=\"'Trocar de empresa'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n            </button>\r\n          </div>\r\n          <p-divider type=\"solid\"></p-divider>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n          <!-- menus -->\r\n          <li\r\n            *ngFor=\"let menu of menus; let i = index\"\r\n            [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n          >\r\n            <!-- menu que n\u00E3o tem filho -->\r\n            <a\r\n              (click)=\"callRoute(menu.link)\"\r\n              *ngIf=\"\r\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n              \"\r\n              pRipple\r\n              [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n              [tooltipPosition]=\"'right'\"\r\n              class=\"menu-option\"\r\n              [style.background-color]=\"menu.bgColor\"\r\n              [class.justify-content-center]=\"!expandMenu()\"\r\n            >\r\n              <i\r\n                class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                  expandMenu() ? 'ml-1 mr-2' : ''\r\n                }}  icon-hover-color {{ menu.textColor }}\"\r\n                *ngIf=\"menu.icone\"\r\n              >\r\n                {{ menu.icone }}\r\n              </i>\r\n              <span\r\n                class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n                  menu.textColor\r\n                }}\"\r\n                *ngIf=\"expandMenu()\"\r\n                >{{ menu.descricaomenu }}</span\r\n              >\r\n            </a>\r\n            <!-- menu com filho -->\r\n            <div *ngIf=\"menu.indmenupai\">\r\n              <a\r\n                pRipple\r\n                pStyleClass=\"@next\"\r\n                enterClass=\"hidden\"\r\n                enterActiveClass=\"slidedown\"\r\n                leaveToClass=\"hidden\"\r\n                leaveActiveClass=\"slideup\"\r\n                [style.background-color]=\"\r\n                  isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'\r\n                \"\r\n                class=\"menu-option {{\r\n                  !expandMenu()\r\n                    ? 'justify-content-center'\r\n                    : 'justify-content-between'\r\n                }} \"\r\n                [tooltipPosition]=\"'right'\"\r\n                [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n                (click)=\"\r\n                  expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n                \"\r\n              >\r\n                <div class=\"flex flex-row align-items-center\">\r\n                  <i\r\n                    class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                      expandMenu() ? 'ml-1 mr-2' : ''\r\n                    }} icon-hover-color\"\r\n                    *ngIf=\"menu.icone\"\r\n                    [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n                  >\r\n                    {{ menu.icone }}\r\n                  </i>\r\n                  <span\r\n                    class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n                    *ngIf=\"expandMenu()\"\r\n                    >{{ menu.descricaomenu }}</span\r\n                  >\r\n                </div>\r\n                <span\r\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n                  *ngIf=\"expandMenu()\"\r\n                ></span>\r\n              </a>\r\n\r\n              <!-- filhos -->\r\n              <div\r\n                class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n                  !(\r\n                    menuSelecionado()?.idmenupai == menu.idmenu &&\r\n                    this.expandMenu()\r\n                  ) && 'hidden'\r\n                }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n              >\r\n                <li\r\n                  *ngFor=\"\r\n                    let filho of returnMenuChild(menu.idmenu);\r\n                    let iFilho = index\r\n                  \"\r\n                >\r\n                  <a\r\n                    *ngIf=\"expandMenu()\"\r\n                    (click)=\"callRoute(filho.link)\"\r\n                    pRipple\r\n                    class=\"menu-option\"\r\n                    [style.background-color]=\"filho.bgColor\"\r\n                  >\r\n                    <i\r\n                      class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                        expandMenu() ? 'ml-1 mr-2' : ''\r\n                      }} icon-hover-color\"\r\n                      *ngIf=\"filho.icone\"\r\n                    >\r\n                      {{ filho.icone }}\r\n                    </i>\r\n                    <span\r\n                      class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n                        filho.textColor\r\n                      }}\"\r\n                      *ngIf=\"expandMenu()\"\r\n                      >{{ filho.descricaomenu }}</span\r\n                    >\r\n                  </a>\r\n                </li>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </p-sidebar>\r\n  }\r\n\r\n  <!-- Topbar -->\r\n  <div\r\n    class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n    id=\"page-content\"\r\n    style=\"width: 100vw !important\"\r\n  >\r\n    <div\r\n      class=\"flex flex-row flex-wrap align-items-center justify-content-between m-2 mb-0 gap-1\"\r\n    >\r\n      @if(!showMenu) {\r\n      <!-- Logo home -->\r\n      <div>\r\n        <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n      </div>\r\n      } @else {\r\n      <!-- Breadcrumbs -->\r\n      <div>\r\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n          {{\r\n            breadCrumbItems[breadCrumbItems.length - 1] &&\r\n            breadCrumbItems[breadCrumbItems.length - 1].label\r\n              ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n              : \"\"\r\n          }}\r\n        </p>\r\n        <p-breadcrumb\r\n          *ngIf=\"widthCard > 400\"\r\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n          [model]=\"breadCrumbItems\"\r\n          [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n        ></p-breadcrumb>\r\n      </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) { <span class=\"master-name\">{{ masterName }}</span> }\r\n        @if (empresaName) {<span class=\"empresa-name\">Organiza\u00E7\u00E3o: {{ empresaName }}</span> }\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\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\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\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\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\"\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        @for (topAction of topMenuActions(); track $index) {\r\n        <ng-container *ngTemplateOutlet=\"topAction\" />\r\n        }\r\n\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\r\n      </div>\r\n\r\n      @if(widthPage() < 992){\r\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n      <dropdown-master\r\n        *ngIf=\"showLicencas()\"\r\n        class=\"w-full\"\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    </div>\r\n\r\n    <!-- Container -->\r\n    <div class=\"overflow-hidden flex-1 p-2\">\r\n      <p-card\r\n        styleClass=\"overflow-y-auto h-full max-h-full {{\r\n          !showMenu && 'sm:overflow-y-hidden'\r\n        }} card-container\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </p-card>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Painel de aplicativos -->\r\n  <p-overlayPanel\r\n    #sistemasPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">Sistemas</p>\r\n\r\n      <div\r\n        class=\"flex flex-row flex-wrap gap-3 align-items-center justify-content-center mt-5 mb-3\"\r\n        style=\"width: 270px; height: 100%\"\r\n      >\r\n        @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==\r\n        \"https://work-assets.keevo.com.br/img/icone-keevocenter.png\") {\r\n        <div\r\n          class=\"btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n        >\r\n          {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}\r\n        </div>\r\n        } @else {\r\n        <img\r\n          [src]=\"aplicativo.urlicone\"\r\n          class=\"btn-sistema flex align-items-center justify-content-center\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        />\r\n        } }\r\n\r\n        <!-- <button\r\n          *ngFor=\"let aplicativo of apps\"\r\n          pButton\r\n          pRipple\r\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        >\r\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n        </button> -->\r\n      </div>\r\n    </ng-template>\r\n  </p-overlayPanel>\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      <p class=\"title-style mt-3\">\r\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n      </p>\r\n      <div class=\"mt-5 mb-3\"></div>\r\n\r\n      <p-button\r\n        icon=\"pi pi-lock\"\r\n        label=\"Acessar Keepass\"\r\n        (onClick)=\"accessKeePass($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n\r\n      <p-button\r\n        icon=\"pi pi-sign-out\"\r\n        label=\"Sair\"\r\n        (onClick)=\"logout($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#eaeaea 17%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.825rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#eaeaea;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::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}.title-style{position:relative;top:10px;margin-left:20px;font-size:1.25rem;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{font-size:1.3rem;color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .menu-option{padding:.8rem!important;display:flex;align-items:center;cursor:pointer;border-radius:.5rem;transition-duration:150;transition-property:color,background-color;padding:.5rem}::ng-deep .menu-option:hover{background-color:#29b92d!important;color:#fff}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color,.menu-option:hover .content-option-menu{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#002542}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$9.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i10$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2.Ripple, selector: "[pRipple]" }, { kind: "component", type: i12.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: i13$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DropdownMasterComponent, selector: "dropdown-master", inputs: ["formControlName", "masters"] }, { kind: "pipe", type: CpfCnpjPipe, name: "cpfCnpj" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-layout', template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n  <div\r\n    [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n  ></div>\r\n  @if (showMenu) {\r\n  <div\r\n    [style]=\"{\r\n      minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n    }\"\r\n  ></div>\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    class=\"sidebar-animation\"\r\n    styleClass=\"transition-all\"\r\n  >\r\n    <ng-template pTemplate=\"headless\">\r\n      <div class=\"flex flex-column overflow-hidden\">\r\n        <div\r\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n        >\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            }} py-3\"\r\n          >\r\n            <!-- Logo para o menu expandido -->\r\n            <img\r\n              *ngIf=\"expandMenu() && logoMenuExpand\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuExpand\"\r\n              [style.height]=\"'3rem'\"\r\n              width=\"auto\"\r\n              class=\"cursor-pointer p-1\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Logo para o menu minimizado-->\r\n            <img\r\n              *ngIf=\"!expandMenu() && logoMenuHide\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuHide\"\r\n              [style.height]=\"'3rem'\"\r\n              width=\"auto\"\r\n              class=\"mb-2 p-1\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Toggle menu -->\r\n            <span\r\n              *ngIf=\"showExpandMenu\"\r\n              class=\"material-symbols-outlined top-layout-icons p-1\"\r\n              [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n              [tooltipPosition]=\"'right'\"\r\n              (click)=\"toggleMenu()\"\r\n            >\r\n              menu\r\n            </span>\r\n          </div>\r\n\r\n          @if(showTrocaEmpresa){\r\n          <div\r\n            class=\"flex flex-row align-items-center {{\r\n              expandMenu()\r\n                ? 'justify-content-between'\r\n                : 'justify-content-center'\r\n            }}\"\r\n          >\r\n            <div\r\n              class=\"flex flex-column cursor-pointer\"\r\n              *ngIf=\"expandMenu() && selectedEmpresa\"\r\n              (click)=\"changeEmpresa($event)\"\r\n            >\r\n              <span\r\n                class=\"text-sm font-semibold mr-2\"\r\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n                [tooltipPosition]=\"'right'\"\r\n              >\r\n                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n              </span>\r\n              <span class=\"text-sm mt-1\">{{\r\n                this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n              }}</span>\r\n            </div>\r\n\r\n            <button\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"changeEmpresa($event)\"\r\n              [pTooltip]=\"'Trocar de empresa'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n            </button>\r\n          </div>\r\n          <p-divider type=\"solid\"></p-divider>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n          <!-- menus -->\r\n          <li\r\n            *ngFor=\"let menu of menus; let i = index\"\r\n            [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n          >\r\n            <!-- menu que n\u00E3o tem filho -->\r\n            <a\r\n              (click)=\"callRoute(menu.link)\"\r\n              *ngIf=\"\r\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n              \"\r\n              pRipple\r\n              [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n              [tooltipPosition]=\"'right'\"\r\n              class=\"menu-option\"\r\n              [style.background-color]=\"menu.bgColor\"\r\n              [class.justify-content-center]=\"!expandMenu()\"\r\n            >\r\n              <i\r\n                class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                  expandMenu() ? 'ml-1 mr-2' : ''\r\n                }}  icon-hover-color {{ menu.textColor }}\"\r\n                *ngIf=\"menu.icone\"\r\n              >\r\n                {{ menu.icone }}\r\n              </i>\r\n              <span\r\n                class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n                  menu.textColor\r\n                }}\"\r\n                *ngIf=\"expandMenu()\"\r\n                >{{ menu.descricaomenu }}</span\r\n              >\r\n            </a>\r\n            <!-- menu com filho -->\r\n            <div *ngIf=\"menu.indmenupai\">\r\n              <a\r\n                pRipple\r\n                pStyleClass=\"@next\"\r\n                enterClass=\"hidden\"\r\n                enterActiveClass=\"slidedown\"\r\n                leaveToClass=\"hidden\"\r\n                leaveActiveClass=\"slideup\"\r\n                [style.background-color]=\"\r\n                  isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'\r\n                \"\r\n                class=\"menu-option {{\r\n                  !expandMenu()\r\n                    ? 'justify-content-center'\r\n                    : 'justify-content-between'\r\n                }} \"\r\n                [tooltipPosition]=\"'right'\"\r\n                [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n                (click)=\"\r\n                  expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n                \"\r\n              >\r\n                <div class=\"flex flex-row align-items-center\">\r\n                  <i\r\n                    class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                      expandMenu() ? 'ml-1 mr-2' : ''\r\n                    }} icon-hover-color\"\r\n                    *ngIf=\"menu.icone\"\r\n                    [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n                  >\r\n                    {{ menu.icone }}\r\n                  </i>\r\n                  <span\r\n                    class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n                    *ngIf=\"expandMenu()\"\r\n                    >{{ menu.descricaomenu }}</span\r\n                  >\r\n                </div>\r\n                <span\r\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n                  *ngIf=\"expandMenu()\"\r\n                ></span>\r\n              </a>\r\n\r\n              <!-- filhos -->\r\n              <div\r\n                class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n                  !(\r\n                    menuSelecionado()?.idmenupai == menu.idmenu &&\r\n                    this.expandMenu()\r\n                  ) && 'hidden'\r\n                }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n              >\r\n                <li\r\n                  *ngFor=\"\r\n                    let filho of returnMenuChild(menu.idmenu);\r\n                    let iFilho = index\r\n                  \"\r\n                >\r\n                  <a\r\n                    *ngIf=\"expandMenu()\"\r\n                    (click)=\"callRoute(filho.link)\"\r\n                    pRipple\r\n                    class=\"menu-option\"\r\n                    [style.background-color]=\"filho.bgColor\"\r\n                  >\r\n                    <i\r\n                      class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                        expandMenu() ? 'ml-1 mr-2' : ''\r\n                      }} icon-hover-color\"\r\n                      *ngIf=\"filho.icone\"\r\n                    >\r\n                      {{ filho.icone }}\r\n                    </i>\r\n                    <span\r\n                      class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n                        filho.textColor\r\n                      }}\"\r\n                      *ngIf=\"expandMenu()\"\r\n                      >{{ filho.descricaomenu }}</span\r\n                    >\r\n                  </a>\r\n                </li>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </p-sidebar>\r\n  }\r\n\r\n  <!-- Topbar -->\r\n  <div\r\n    class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n    id=\"page-content\"\r\n    style=\"width: 100vw !important\"\r\n  >\r\n    <div\r\n      class=\"flex flex-row flex-wrap align-items-center justify-content-between m-2 mb-0 gap-1\"\r\n    >\r\n      @if(!showMenu) {\r\n      <!-- Logo home -->\r\n      <div>\r\n        <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n      </div>\r\n      } @else {\r\n      <!-- Breadcrumbs -->\r\n      <div>\r\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n          {{\r\n            breadCrumbItems[breadCrumbItems.length - 1] &&\r\n            breadCrumbItems[breadCrumbItems.length - 1].label\r\n              ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n              : \"\"\r\n          }}\r\n        </p>\r\n        <p-breadcrumb\r\n          *ngIf=\"widthCard > 400\"\r\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n          [model]=\"breadCrumbItems\"\r\n          [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n        ></p-breadcrumb>\r\n      </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) { <span class=\"master-name\">{{ masterName }}</span> }\r\n        @if (empresaName) {<span class=\"empresa-name\">{{ empresaName }}</span> }\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\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\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\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\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\"\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        @for (topAction of topMenuActions(); track $index) {\r\n        <ng-container *ngTemplateOutlet=\"topAction\" />\r\n        }\r\n\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\r\n      </div>\r\n\r\n      @if(widthPage() < 992){\r\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n      <dropdown-master\r\n        *ngIf=\"showLicencas()\"\r\n        class=\"w-full\"\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    </div>\r\n\r\n    <!-- Container -->\r\n    <div class=\"overflow-hidden flex-1 p-2\">\r\n      <p-card\r\n        styleClass=\"overflow-y-auto h-full max-h-full {{\r\n          !showMenu && 'sm:overflow-y-hidden'\r\n        }} card-container\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </p-card>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Painel de aplicativos -->\r\n  <p-overlayPanel\r\n    #sistemasPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">Sistemas</p>\r\n\r\n      <div\r\n        class=\"flex flex-row flex-wrap gap-3 align-items-center justify-content-center mt-5 mb-3\"\r\n        style=\"width: 270px; height: 100%\"\r\n      >\r\n        @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==\r\n        \"https://work-assets.keevo.com.br/img/icone-keevocenter.png\") {\r\n        <div\r\n          class=\"btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n        >\r\n          {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}\r\n        </div>\r\n        } @else {\r\n        <img\r\n          [src]=\"aplicativo.urlicone\"\r\n          class=\"btn-sistema flex align-items-center justify-content-center\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        />\r\n        } }\r\n\r\n        <!-- <button\r\n          *ngFor=\"let aplicativo of apps\"\r\n          pButton\r\n          pRipple\r\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        >\r\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n        </button> -->\r\n      </div>\r\n    </ng-template>\r\n  </p-overlayPanel>\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      <p class=\"title-style mt-3\">\r\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n      </p>\r\n      <div class=\"mt-5 mb-3\"></div>\r\n\r\n      <p-button\r\n        icon=\"pi pi-lock\"\r\n        label=\"Acessar Keepass\"\r\n        (onClick)=\"accessKeePass($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n\r\n      <p-button\r\n        icon=\"pi pi-sign-out\"\r\n        label=\"Sair\"\r\n        (onClick)=\"logout($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#eaeaea 17%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.825rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#eaeaea;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::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}.title-style{position:relative;top:10px;margin-left:20px;font-size:1.25rem;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{font-size:1.3rem;color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .menu-option{padding:.8rem!important;display:flex;align-items:center;cursor:pointer;border-radius:.5rem;transition-duration:150;transition-property:color,background-color;padding:.5rem}::ng-deep .menu-option:hover{background-color:#29b92d!important;color:#fff}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color,.menu-option:hover .content-option-menu{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:12px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#002542}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\n"] }]
+            args: [{ selector: 'kv-layout', template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n  <div\r\n    [ngClass]=\"{ 'overlay-background': expandMenu() && widthPage() < 800 }\"\r\n  ></div>\r\n  @if (showMenu) {\r\n  <div\r\n    [style]=\"{\r\n      minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'\r\n    }\"\r\n  ></div>\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    class=\"sidebar-animation\"\r\n    styleClass=\"transition-all\"\r\n  >\r\n    <ng-template pTemplate=\"headless\">\r\n      <div class=\"flex flex-column overflow-hidden\">\r\n        <div\r\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden\"\r\n        >\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            }} py-3\"\r\n          >\r\n            <!-- Logo para o menu expandido -->\r\n            <img\r\n              *ngIf=\"expandMenu() && logoMenuExpand\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuExpand\"\r\n              [style.height]=\"'3rem'\"\r\n              width=\"auto\"\r\n              class=\"cursor-pointer p-1\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Logo para o menu minimizado-->\r\n            <img\r\n              *ngIf=\"!expandMenu() && logoMenuHide\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuHide\"\r\n              [style.height]=\"'3rem'\"\r\n              width=\"auto\"\r\n              class=\"mb-2 p-1\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Toggle menu -->\r\n            <span\r\n              *ngIf=\"showExpandMenu\"\r\n              class=\"material-symbols-outlined top-layout-icons p-1\"\r\n              [pTooltip]=\"expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n              [tooltipPosition]=\"'right'\"\r\n              (click)=\"toggleMenu()\"\r\n            >\r\n              menu\r\n            </span>\r\n          </div>\r\n\r\n          @if(showTrocaEmpresa){\r\n          <div\r\n            class=\"flex flex-row align-items-center {{\r\n              expandMenu()\r\n                ? 'justify-content-between'\r\n                : 'justify-content-center'\r\n            }}\"\r\n          >\r\n            <div\r\n              class=\"flex flex-column cursor-pointer\"\r\n              *ngIf=\"expandMenu() && selectedEmpresa\"\r\n              (click)=\"changeEmpresa($event)\"\r\n            >\r\n              <span\r\n                class=\"text-sm font-semibold mr-2\"\r\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n                [tooltipPosition]=\"'right'\"\r\n              >\r\n                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n              </span>\r\n              <span class=\"text-sm mt-1\">{{\r\n                this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n              }}</span>\r\n            </div>\r\n\r\n            <button\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"changeEmpresa($event)\"\r\n              [pTooltip]=\"'Trocar de empresa'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n            </button>\r\n          </div>\r\n          <p-divider type=\"solid\"></p-divider>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"list-none m-0 card-container overflow-y-auto max-h-full\">\r\n          <!-- menus -->\r\n          <li\r\n            *ngFor=\"let menu of menus; let i = index\"\r\n            [class]=\"expandMenu() ? 'px-2' : 'px-1'\"\r\n          >\r\n            <!-- menu que n\u00E3o tem filho -->\r\n            <a\r\n              (click)=\"callRoute(menu.link)\"\r\n              *ngIf=\"\r\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n              \"\r\n              pRipple\r\n              [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n              [tooltipPosition]=\"'right'\"\r\n              class=\"menu-option\"\r\n              [style.background-color]=\"menu.bgColor\"\r\n              [class.justify-content-center]=\"!expandMenu()\"\r\n            >\r\n              <i\r\n                class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                  expandMenu() ? 'ml-1 mr-2' : ''\r\n                }}  icon-hover-color {{ menu.textColor }}\"\r\n                *ngIf=\"menu.icone\"\r\n              >\r\n                {{ menu.icone }}\r\n              </i>\r\n              <span\r\n                class=\"content-option-menu text-base text-blue-900 font-semibold {{\r\n                  menu.textColor\r\n                }}\"\r\n                *ngIf=\"expandMenu()\"\r\n                >{{ menu.descricaomenu }}</span\r\n              >\r\n            </a>\r\n            <!-- menu com filho -->\r\n            <div *ngIf=\"menu.indmenupai\">\r\n              <a\r\n                pRipple\r\n                pStyleClass=\"@next\"\r\n                enterClass=\"hidden\"\r\n                enterActiveClass=\"slidedown\"\r\n                leaveToClass=\"hidden\"\r\n                leaveActiveClass=\"slideup\"\r\n                [style.background-color]=\"\r\n                  isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'\r\n                \"\r\n                class=\"menu-option {{\r\n                  !expandMenu()\r\n                    ? 'justify-content-center'\r\n                    : 'justify-content-between'\r\n                }} \"\r\n                [tooltipPosition]=\"'right'\"\r\n                [pTooltip]=\"!expandMenu() ? menu.descricaomenu : ''\"\r\n                (click)=\"\r\n                  expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())\r\n                \"\r\n              >\r\n                <div class=\"flex flex-row align-items-center\">\r\n                  <i\r\n                    class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                      expandMenu() ? 'ml-1 mr-2' : ''\r\n                    }} icon-hover-color\"\r\n                    *ngIf=\"menu.icone\"\r\n                    [class.text-white]=\"isSelectedMenuPai(menu)\"\r\n                  >\r\n                    {{ menu.icone }}\r\n                  </i>\r\n                  <span\r\n                    class=\"text-base text-blue-900 font-semibold content-option-menu\"\r\n                    *ngIf=\"expandMenu()\"\r\n                    >{{ menu.descricaomenu }}</span\r\n                  >\r\n                </div>\r\n                <span\r\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu\"\r\n                  *ngIf=\"expandMenu()\"\r\n                ></span>\r\n              </a>\r\n\r\n              <!-- filhos -->\r\n              <div\r\n                class=\"list-none py-0 pl-3 pr-0 m-0 {{\r\n                  !(\r\n                    menuSelecionado()?.idmenupai == menu.idmenu &&\r\n                    this.expandMenu()\r\n                  ) && 'hidden'\r\n                }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n              >\r\n                <li\r\n                  *ngFor=\"\r\n                    let filho of returnMenuChild(menu.idmenu);\r\n                    let iFilho = index\r\n                  \"\r\n                >\r\n                  <a\r\n                    *ngIf=\"expandMenu()\"\r\n                    (click)=\"callRoute(filho.link)\"\r\n                    pRipple\r\n                    class=\"menu-option\"\r\n                    [style.background-color]=\"filho.bgColor\"\r\n                  >\r\n                    <i\r\n                      class=\"content-option-menu material-symbols-outlined icon-menu {{\r\n                        expandMenu() ? 'ml-1 mr-2' : ''\r\n                      }} icon-hover-color\"\r\n                      *ngIf=\"filho.icone\"\r\n                    >\r\n                      {{ filho.icone }}\r\n                    </i>\r\n                    <span\r\n                      class=\"content-option-menu text-medium text-blue-900 ml-4 {{\r\n                        filho.textColor\r\n                      }}\"\r\n                      *ngIf=\"expandMenu()\"\r\n                      >{{ filho.descricaomenu }}</span\r\n                    >\r\n                  </a>\r\n                </li>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </p-sidebar>\r\n  }\r\n\r\n  <!-- Topbar -->\r\n  <div\r\n    class=\"w-auto h-screen page-content overflow-y-hidden flex flex-column\"\r\n    id=\"page-content\"\r\n    style=\"width: 100vw !important\"\r\n  >\r\n    <div\r\n      class=\"flex flex-row flex-wrap align-items-center justify-content-between m-2 mb-0 gap-1\"\r\n    >\r\n      @if(!showMenu) {\r\n      <!-- Logo home -->\r\n      <div>\r\n        <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n      </div>\r\n      } @else {\r\n      <!-- Breadcrumbs -->\r\n      <div>\r\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n          {{\r\n            breadCrumbItems[breadCrumbItems.length - 1] &&\r\n            breadCrumbItems[breadCrumbItems.length - 1].label\r\n              ? breadCrumbItems[breadCrumbItems.length - 1].label\r\n              : \"\"\r\n          }}\r\n        </p>\r\n        <p-breadcrumb\r\n          *ngIf=\"widthCard > 400\"\r\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n          [model]=\"breadCrumbItems\"\r\n          [style]=\"{ backgroundColor: '#eaeaea' }\"\r\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n        ></p-breadcrumb>\r\n      </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) { <span class=\"master-name\">{{ masterName }}</span> }\r\n        @if (empresaName) {<span class=\"empresa-name\">Organiza\u00E7\u00E3o: {{ empresaName }}</span> }\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\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\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\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\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\"\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        @for (topAction of topMenuActions(); track $index) {\r\n        <ng-container *ngTemplateOutlet=\"topAction\" />\r\n        }\r\n\r\n        <span\r\n          *ngIf=\"showButtonApps\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n        >\r\n          apps\r\n        </span>\r\n\r\n        <span\r\n          *ngIf=\"showButtonUser\"\r\n          class=\"material-symbols-outlined top-layout-icons p-1\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        >\r\n          person\r\n        </span>\r\n      </div>\r\n\r\n      @if(widthPage() < 992){\r\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n      <dropdown-master\r\n        *ngIf=\"showLicencas()\"\r\n        class=\"w-full\"\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    </div>\r\n\r\n    <!-- Container -->\r\n    <div class=\"overflow-hidden flex-1 p-2\">\r\n      <p-card\r\n        styleClass=\"overflow-y-auto h-full max-h-full {{\r\n          !showMenu && 'sm:overflow-y-hidden'\r\n        }} card-container\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </p-card>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Painel de aplicativos -->\r\n  <p-overlayPanel\r\n    #sistemasPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">Sistemas</p>\r\n\r\n      <div\r\n        class=\"flex flex-row flex-wrap gap-3 align-items-center justify-content-center mt-5 mb-3\"\r\n        style=\"width: 270px; height: 100%\"\r\n      >\r\n        @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==\r\n        \"https://work-assets.keevo.com.br/img/icone-keevocenter.png\") {\r\n        <div\r\n          class=\"btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n        >\r\n          {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}\r\n        </div>\r\n        } @else {\r\n        <img\r\n          [src]=\"aplicativo.urlicone\"\r\n          class=\"btn-sistema flex align-items-center justify-content-center\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        />\r\n        } }\r\n\r\n        <!-- <button\r\n          *ngFor=\"let aplicativo of apps\"\r\n          pButton\r\n          pRipple\r\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        >\r\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n        </button> -->\r\n      </div>\r\n    </ng-template>\r\n  </p-overlayPanel>\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      <p class=\"title-style mt-3\">\r\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n      </p>\r\n      <div class=\"mt-5 mb-3\"></div>\r\n\r\n      <p-button\r\n        icon=\"pi pi-lock\"\r\n        label=\"Acessar Keepass\"\r\n        (onClick)=\"accessKeePass($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n\r\n      <p-button\r\n        icon=\"pi pi-sign-out\"\r\n        label=\"Sair\"\r\n        (onClick)=\"logout($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900 text-sm\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#eaeaea 17%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.825rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#eaeaea;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::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}.title-style{position:relative;top:10px;margin-left:20px;font-size:1.25rem;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{font-size:1.3rem;color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .menu-option{padding:.8rem!important;display:flex;align-items:center;cursor:pointer;border-radius:.5rem;transition-duration:150;transition-property:color,background-color;padding:.5rem}::ng-deep .menu-option:hover{background-color:#29b92d!important;color:#fff}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color,.menu-option:hover .content-option-menu{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:1100!important}.btn-sistema{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;width:4rem;height:4rem;background-color:#002542;color:#fff;padding:.5rem;box-shadow:#00000059 0 0 4px;border-radius:.75rem;transition:box-shadow .3s ease-in-out}.btn-sistema:hover{opacity:.9;box-shadow:#0009 0 0 8px}.master-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600;line-height:16.41px;text-align:center;color:#64748b}.empresa-name{font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:300;line-height:14.06px;text-align:center;color:#1e293b}.top-layout-icons{color:#002542;font-size:1.5rem!important;cursor:pointer;border-radius:50%;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out}.top-layout-icons:hover{color:#fff;background-color:#002542}.overlay-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }, { type: i3$1.Router }, { type: i3$1.ActivatedRoute }], propDecorators: { apps: [{
                 type: Input
             }], breadCrumbItems: [{
@@ -8867,6 +8868,8 @@ class KvFileViewerNovoComponent {
     }
     ngOnChanges(changes) {
         if (changes['arquivo'] && this.arquivo) {
+            // Corrige qualquer ocorrência de ".." no nome do arquivo
+            this.arquivo = this.arquivo.replace(/\.\./g, '.');
             if (this.type == 'application/pdf')
                 this.visualizarPDF();
             else
@@ -8874,12 +8877,18 @@ class KvFileViewerNovoComponent {
         }
     }
     visualizarIframe() {
-        this.sanitizedPdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.arquivo);
+        // Corrige qualquer ocorrência de dois pontos consecutivos no nome do arquivo
+        const nomeArquivoCorrigido = this.arquivo.replace(/\.\./g, '.');
+        // Sanitiza o caminho corrigido
+        this.sanitizedPdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(nomeArquivoCorrigido);
     }
     getSanitizer(url) {
         return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
     visualizarPDF() {
+        // Corrige qualquer ocorrência de dois pontos consecutivos no nome do arquivo
+        const nomeArquivoCorrigido = this.arquivo.replace(/\.\./g, '.');
+        // Continua o processamento normalmente
         let reader = new FileReader();
         reader.onload = (e) => {
             this.pdffile = e.target.result;
@@ -9614,11 +9623,11 @@ class KvContentViewerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvContentViewerComponent, deps: [], 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 }, indvisualizado: { classPropertyName: "indvisualizado", publicName: "indvisualizado", isSignal: false, isRequired: false, transformFunction: null }, btnTelaCheia: { classPropertyName: "btnTelaCheia", publicName: "btnTelaCheia", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onScrollHandler: "onScrollHandler", onSelectFile: "onSelectFile" }, ngImport: i0, template: "<div class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\" style=\"height: 100%;\">\r\n  <!-- Lista de documentos -->\r\n  <div\r\n    class=\"card-perfil overflow-x-hidden\"\r\n    (scroll)=\"scrollHandler($event)\"\r\n    [ngClass]=\"{\r\n      'overflow-y-scroll': 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        style=\"min-height: 5rem\"\r\n        (click)=\"visualizarPreview(option)\"\r\n        [ngClass]=\"{\r\n    'card-naoVisualizado': !isVisualizado(option),\r\n    'card-selected': option === arquivoPreview(),\r\n    'card-normal': option !== arquivoPreview(),\r\n   }\"\r\n      >\r\n        <div class=\"flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis \" style=\"max-width: 100%;\">\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(!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-row flex-1 px-2 justify-content-center p-2\"\r\n      style=\"position: sticky; bottom: 0; background-color: white\"\r\n    >\r\n      <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Visualizador -->\r\n  <div  id=\"fullscreenDiv\" class=\"card-perfil col-12 md:col-8 lg:col-9\" style=\"position: relative; height: 100%;\">\r\n    @if(btnTelaCheia)\r\n    {\r\n      <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span id=\"fullscreenBtn\" (click)=\"alternarTelaCheia()\" class=\"material-symbols-outlined p-2 text-xl cursor-pointer\">\r\n        open_in_full\r\n        </span>\r\n      </div>\r\n    }\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        >\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        ></div>\r\n      </ng-container>\r\n    } @else {\r\n      <ng-container *ngIf=\"arquivoPreview(); else noDocumentSelected\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            contentTemplate;\r\n            context: { $implicit: arquivoPreview() }\r\n          \"\r\n        ></ng-container>\r\n      </ng-container>\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%\"\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!important}.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: "component", type: KvFileViewerNovoComponent, selector: "kv-file-viewer-novo", inputs: ["arquivo", "type", "blob", "width", "height"] }, { kind: "component", type: i1$6.NgxLoadingComponent, selector: "ngx-loading", inputs: ["show", "config", "template"] }] }); }
+    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 }, indvisualizado: { classPropertyName: "indvisualizado", publicName: "indvisualizado", isSignal: false, isRequired: false, transformFunction: null }, btnTelaCheia: { classPropertyName: "btnTelaCheia", publicName: "btnTelaCheia", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onScrollHandler: "onScrollHandler", onSelectFile: "onSelectFile" }, ngImport: i0, template: "<div class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\" style=\"height: 100%;\">\r\n  <!-- Lista de documentos -->\r\n  <div\r\n    class=\"card-perfil overflow-x-hidden\"\r\n    (scroll)=\"scrollHandler($event)\"\r\n    [ngClass]=\"{\r\n      'overflow-y-scroll': 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),\r\n    'card-selected': option === arquivoPreview(),\r\n    'card-normal': option !== arquivoPreview(),\r\n   }\"\r\n      >\r\n        <div class=\"flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis \" style=\"max-width: 100%;\">\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(!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-row flex-1 px-2 justify-content-center p-2\"\r\n      style=\"position: sticky; bottom: 0; background-color: white\"\r\n    >\r\n      <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Visualizador -->\r\n  <div  id=\"fullscreenDiv\" class=\"card-perfil col-12 md:col-8 lg:col-9\" style=\"position: relative; height: 100%;\">\r\n    @if(btnTelaCheia)\r\n    {\r\n      <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span id=\"fullscreenBtn\" (click)=\"alternarTelaCheia()\" class=\"material-symbols-outlined p-2 text-xl cursor-pointer\">\r\n        open_in_full\r\n        </span>\r\n      </div>\r\n    }\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        >\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        ></div>\r\n      </ng-container>\r\n    } @else {\r\n      <ng-container *ngIf=\"arquivoPreview(); else noDocumentSelected\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            contentTemplate;\r\n            context: { $implicit: arquivoPreview() }\r\n          \"\r\n        ></ng-container>\r\n      </ng-container>\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%\"\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!important}.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: "component", type: KvFileViewerNovoComponent, selector: "kv-file-viewer-novo", inputs: ["arquivo", "type", "blob", "width", "height"] }, { kind: "component", type: i1$6.NgxLoadingComponent, selector: "ngx-loading", inputs: ["show", "config", "template"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvContentViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-content-viewer', template: "<div class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\" style=\"height: 100%;\">\r\n  <!-- Lista de documentos -->\r\n  <div\r\n    class=\"card-perfil overflow-x-hidden\"\r\n    (scroll)=\"scrollHandler($event)\"\r\n    [ngClass]=\"{\r\n      'overflow-y-scroll': 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        style=\"min-height: 5rem\"\r\n        (click)=\"visualizarPreview(option)\"\r\n        [ngClass]=\"{\r\n    'card-naoVisualizado': !isVisualizado(option),\r\n    'card-selected': option === arquivoPreview(),\r\n    'card-normal': option !== arquivoPreview(),\r\n   }\"\r\n      >\r\n        <div class=\"flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis \" style=\"max-width: 100%;\">\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(!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-row flex-1 px-2 justify-content-center p-2\"\r\n      style=\"position: sticky; bottom: 0; background-color: white\"\r\n    >\r\n      <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Visualizador -->\r\n  <div  id=\"fullscreenDiv\" class=\"card-perfil col-12 md:col-8 lg:col-9\" style=\"position: relative; height: 100%;\">\r\n    @if(btnTelaCheia)\r\n    {\r\n      <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span id=\"fullscreenBtn\" (click)=\"alternarTelaCheia()\" class=\"material-symbols-outlined p-2 text-xl cursor-pointer\">\r\n        open_in_full\r\n        </span>\r\n      </div>\r\n    }\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        >\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        ></div>\r\n      </ng-container>\r\n    } @else {\r\n      <ng-container *ngIf=\"arquivoPreview(); else noDocumentSelected\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            contentTemplate;\r\n            context: { $implicit: arquivoPreview() }\r\n          \"\r\n        ></ng-container>\r\n      </ng-container>\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%\"\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!important}.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"] }]
+            args: [{ selector: 'kv-content-viewer', template: "<div class=\"flex flex-column md:flex-row gap-2 mt-3 custom-max-height\" style=\"height: 100%;\">\r\n  <!-- Lista de documentos -->\r\n  <div\r\n    class=\"card-perfil overflow-x-hidden\"\r\n    (scroll)=\"scrollHandler($event)\"\r\n    [ngClass]=\"{\r\n      'overflow-y-scroll': 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),\r\n    'card-selected': option === arquivoPreview(),\r\n    'card-normal': option !== arquivoPreview(),\r\n   }\"\r\n      >\r\n        <div class=\"flex flex-grow-1 ml-2 flex-column gap-1 m-0 p-0 overflow-hidden text-overflow-ellipsis \" style=\"max-width: 100%;\">\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(!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-row flex-1 px-2 justify-content-center p-2\"\r\n      style=\"position: sticky; bottom: 0; background-color: white\"\r\n    >\r\n      <span>{{ totalItensCarregado() }} de {{ totalRecords }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Visualizador -->\r\n  <div  id=\"fullscreenDiv\" class=\"card-perfil col-12 md:col-8 lg:col-9\" style=\"position: relative; height: 100%;\">\r\n    @if(btnTelaCheia)\r\n    {\r\n      <div class=\"grid\">\r\n      <div class=\"col\"></div>\r\n      <span id=\"fullscreenBtn\" (click)=\"alternarTelaCheia()\" class=\"material-symbols-outlined p-2 text-xl cursor-pointer\">\r\n        open_in_full\r\n        </span>\r\n      </div>\r\n    }\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        >\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        ></div>\r\n      </ng-container>\r\n    } @else {\r\n      <ng-container *ngIf=\"arquivoPreview(); else noDocumentSelected\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            contentTemplate;\r\n            context: { $implicit: arquivoPreview() }\r\n          \"\r\n        ></ng-container>\r\n      </ng-container>\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%\"\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!important}.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"] }]
         }], propDecorators: { extencaoDocumento: [{
                 type: Input
             }], totalRecords: [{