keevo-components 1.8.227 → 1.8.229

package/fesm2022/keevo-components.mjs

@@ -112,6 +112,7 @@ import Quill from 'quill';
 import * as i1$5 from 'ngx-loading';
 import { NgxLoadingModule } from 'ngx-loading';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import { OrgChart } from 'd3-org-chart';
 import * as d3 from 'd3';
 import * as i7$2 from '@angular/cdk/drag-drop';
@@ -4531,6 +4532,7 @@ class KvLayoutComponent {
         this.expandMenuEmit = new EventEmitter();
         this.logoutEmit = new EventEmitter();
         this.selectAppEmit = new EventEmitter();
+        this.navigateToDefaultRouteEmit = new EventEmitter();
     }
     accessKeePass(event) {
         this.sistemasPanel.hide();
@@ -4555,7 +4557,7 @@ class KvLayoutComponent {
     }
     callRoute(e, expand) {
         if (!expand)
-            !this.expandMenu ? this.expandMenu = !this.expandMenu : '';
+            !this.expandMenu ? (this.expandMenu = !this.expandMenu) : '';
         this.router.navigateByUrl(e);
     }
     changeEmpresa(event) {
@@ -4586,7 +4588,6 @@ class KvLayoutComponent {
         if (this.sistemasPanel) {
             this.sistemasPanel.hide();
         }
-        ;
     }
     nameEmpresa(nomeLicenca) {
         if (nomeLicenca) {
@@ -4664,12 +4665,38 @@ class KvLayoutComponent {
     verifySelectedPage(link) {
         return this.router.url.includes(link);
     }
+    navigateToDefaultRoute() {
+        this.navigateToDefaultRouteEmit.emit();
+    }
+    getSidebarState() {
+        return this.expandMenu ? 'expanded' : 'collapsed';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.FormBuilder }, { token: i3$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvLayoutComponent, selector: "kv-layout", inputs: { apps: "apps", breadCrumbItems: "breadCrumbItems", masters: "masters", menus: "menus", expandMenu: "expandMenu", logoMenuExpand: "logoMenuExpand", logoMenuHide: "logoMenuHide", selectedApp: "selectedApp", selectedEmpresa: "selectedEmpresa", selectedMaster: "selectedMaster", showButtonApps: "showButtonApps", showButtonUser: "showButtonUser", showExpandMenu: "showExpandMenu", showDropdownLicenca: "showDropdownLicenca", showMenu: "showMenu", showTrocaEmpresa: "showTrocaEmpresa", userName: "userName" }, outputs: { accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, 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\">\n\n  @if (showMenu) {\n  <div [style]=\"{ minWidth: expandMenu ? '300px' : '60px' }\"></div>\n  }\n\n  @if(showMenu) {\n  <p-sidebar\n    #sidebarRef\n    [visible]=\"true\"\n    [showCloseIcon]=\"false\"\n    [modal]=\"false\"\n    [style]=\"{ width: expandMenu ? '300px' : '60px' }\">\n    <ng-template pTemplate=\"headless\">\n      <div class=\"flex flex-column mx-1\">\n        <div\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2\">\n          <div\n            class=\"flex flex-row align-items-center {{\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\n            }} py-3\">\n            <!-- Logo para o menu expandido -->\n            <img\n              *ngIf=\"expandMenu && logoMenuExpand\"\n              alt=\"Card\"\n              [src]=\"logoMenuExpand\"\n              width=\"150\"\n              class=\"cursor-pointer\"\n              (click)=\"router.navigate(['/keevocenter/home'])\" />\n\n            <!-- Logo para o menu minimizado-->\n            <img\n              *ngIf=\"!expandMenu && logoMenuHide\"\n              alt=\"Card\"\n              [src]=\"logoMenuExpand\"\n              width=\"150\" />\n\n            <!-- Toggle menu -->\n            <button\n              *ngIf=\"showExpandMenu\"\n              pButton\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\n              (click)=\"toggleMenu()\"\n              [pTooltip]=\"expandMenu ? 'Ocultar Menu' : 'Expandir Menu'\"\n              [tooltipPosition]=\"'right'\">\n              <i class=\"material-symbols-outlined\"> menu </i>\n            </button>\n          </div>\n\n          @if(showTrocaEmpresa){\n          <div\n            class=\"flex flex-row align-items-center {{expandMenu ? 'justify-content-between' : 'justify-content-center'}}\">\n            <div\n              class=\"flex flex-column cursor-pointer\"\n              *ngIf=\"expandMenu && selectedEmpresa\"\n              (click)=\"changeEmpresa($event)\">\n              <span\n                class=\"text-sm font-semibold mr-2\"\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\n                [tooltipPosition]=\"'right'\">\n                {{nameEmpresa(this.selectedEmpresa.razaosocial)}}\n              </span>\n              <span class=\"text-sm mt-1\">{{this.selectedEmpresa.cpfcnpj |\n                cpfCnpj }}</span>\n            </div>\n\n            <button\n              pButton\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\n              (click)=\"changeEmpresa($event)\"\n              [pTooltip]=\"'Trocar de empresa'\"\n              [tooltipPosition]=\"'right'\">\n              <i class=\"material-symbols-outlined\">\n                sync_alt\n              </i>\n            </button>\n\n          </div>\n          <p-divider type=\"solid\"></p-divider>\n          }\n\n        </div>\n\n        <div\n          class=\"list-none m-0  card-container {{ expandMenu ? 'mx-1' : '' }}\"\n          [style.max-height]=\"heightCard - 220 + 'px'\"\n          style=\"overflow-y: auto\">\n          <!-- menus -->\n          <li *ngFor=\"let menu of menus; let i = index\">\n            <!-- menu que n\u00E3o tem filho -->\n            <a\n              (mouseenter)=\"onMouseEnter(i)\"\n              (mouseleave)=\"onMouseLeave()\"\n              [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n              (click)=\"callRoute(menu.link)\"\n              *ngIf=\"\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\n              \"\n              pRipple\n              [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\n              [tooltipPosition]=\"'right'\"\n              class=\"{{\n                verifySelectedPage(menu.link) ? 'bg-green-600' : ''\n              }} menu-option flex align-items-center no-underline {{\n                !expandMenu ? 'justify-content-center' : ''\n              }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\">\n              <i\n                class=\"material-symbols-outlined icon-menu {{\n                  expandMenu ? 'ml-1 mr-2' : ''\n                }}  icon-hover-color {{\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\n                }}\"\n                *ngIf=\"menu.icone\">\n                {{ menu.icone }}\n              </i>\n              <span\n                class=\"text-base text-blue-900 font-medium {{\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\n                }}\"\n                *ngIf=\"expandMenu\">{{ menu.descricaomenu }}</span>\n            </a>\n            <!-- menu com filho -->\n            <div *ngIf=\"menu.indmenupai\">\n              <a\n                (mouseenter)=\"onMouseEnter(i)\"\n                (mouseleave)=\"onMouseLeave()\"\n                [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n                pRipple\n                pStyleClass=\"@next\"\n                enterClass=\"hidden\"\n                enterActiveClass=\"slidedown\"\n                leaveToClass=\"hidden\"\n                leaveActiveClass=\"slideup\"\n                class=\"menu-option flex align-items-center {{\n                  !expandMenu\n                    ? 'justify-content-center'\n                    : 'justify-content-between'\n                }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\n                [tooltipPosition]=\"'right'\"\n                [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\n                (click)=\"!expandMenu ? (expandMenu = !expandMenu) : ''\">\n                <div class=\"flex flex-row align-items-center\">\n                  <i\n                    class=\"material-symbols-outlined icon-menu {{\n                      expandMenu ? 'ml-1 mr-2' : ''\n                    }} icon-hover-color\"\n                    *ngIf=\"menu.icone\"\n                    [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\">\n                    {{ menu.icone }}\n                  </i>\n                  <span\n                    class=\"text-base text-blue-900 font-medium\"\n                    *ngIf=\"expandMenu\">{{ menu.descricaomenu }}</span>\n                </div>\n                <i\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color\"\n                  *ngIf=\"expandMenu\"\n                  [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"></i>\n              </a>\n\n              <!-- filhos -->\n              <div\n                class=\"list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\">\n                <li\n                  *ngFor=\"\n                    let filho of returnMenuChild(menu.idmenu);\n                    let iFilho = index\n                  \">\n                  <a\n                    (mouseenter)=\"onMouseEnterChild(filho.idmenu)\"\n                    (mouseleave)=\"onMouseLeave()\"\n                    [ngClass]=\"{\n                      'hover-color': mouseOverFilhoIndex === filho.idmenu\n                    }\"\n                    *ngIf=\"expandMenu\"\n                    (click)=\"callRoute(filho.link)\"\n                    pRipple\n                    class=\"{{\n                      verifySelectedPage(filho.link) ? 'bg-green-600' : ''\n                    }} menu-option flex align-items-center no-underline cursor-pointer border-round text-700 hover:bg-green-600 transition-duration-150 transition-colors p-ripple p-2\">\n                    <i\n                      class=\"material-symbols-outlined icon-menu {{\n                        expandMenu ? 'ml-1 mr-2' : ''\n                      }} icon-hover-color\"\n                      *ngIf=\"filho.icone\"\n                      [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\">\n                      {{ filho.icone }}\n                    </i>\n                    <span\n                      class=\"text-base text-blue-900 ml-4 {{\n                        verifySelectedPage(filho.link) ? 'text-white' : ''\n                      }}\"\n                      *ngIf=\"expandMenu\">{{ filho.descricaomenu }}</span>\n                  </a>\n                </li>\n              </div>\n            </div>\n          </li>\n        </div>\n      </div>\n    </ng-template>\n  </p-sidebar>\n  }\n\n  <!-- Topbar -->\n  <div class=\"w-auto h-screen page-content overflow-y-hidden\" id=\"page-content\"\n    style=\"width: 100vw !important;\">\n    <div class=\"flex flex-row align-items-center justify-content-between m-3\">\n      <!-- Breadcrumbs -->\n      <div>\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\n          {{ breadCrumbItems[breadCrumbItems.length - 1]?.label }}\n        </p>\n        <p-breadcrumb\n          *ngIf=\"widthCard > 400\"\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\n          [model]=\"breadCrumbItems\"\n          [style]=\"{ backgroundColor: '#d4d3d3' }\"\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"></p-breadcrumb>\n      </div>\n\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\n      <dropdown-master\n        *ngIf=\"showLicencas()\"\n        class=\"w-40rem\"\n        formControlName=\"idmaster\"\n        [formGroup]=\"formGroup\"\n        [masters]=\"masters\"\n        (onSelectionChange)=\"changeLicense($event)\"\n        (onSelectionValue)=\"changeLicense($event)\">\n      </dropdown-master>\n\n      <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\n      <div class=\"w-auto flex flex-row align-items-center gap-2\">\n        <p-button\n          *ngIf=\"showButtonApps\"\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\n          icon=\"pi pi-th-large\"\n          [rounded]=\"true\"\n          [text]=\"true\"\n          (click)=\"sistemasPanel.toggle($event)\"\n          [pTooltip]=\"'Sistemas'\"\n          [tooltipPosition]=\"'left'\"></p-button>\n\n        <p-button\n          *ngIf=\"showButtonUser\"\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\n          icon=\"pi pi-user\"\n          [rounded]=\"true\"\n          [text]=\"true\"\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\n          [tooltipPosition]=\"'left'\"\n          (click)=\"meusDadosPanel.toggle($event)\"></p-button>\n      </div>\n    </div>\n\n    <!-- Container -->\n    <p-card\n      styleClass=\"m-3 border-noround overflow-y-auto {{\n        !showMenu && 'sm:overflow-y-hidden'\n      }} card-container\"\n      [style]=\"{ height: heightCard - adjustHeightCard() + 'px' }\">\n      <div class=\"{{widthCard < 992 && 'card-container'}} w-full\" [style]=\"{ width: widthCard + 'px' }\">\n        <ng-content></ng-content>\n      </div>\n    </p-card>\n  </div>\n\n  <!-- Painel de aplicativos -->\n  <p-overlayPanel\n    #sistemasPanel\n    [showTransitionOptions]=\"'350ms ease-out'\"\n    [hideTransitionOptions]=\"'250ms ease-in'\">\n    <ng-template pTemplate=\"container\">\n      <p class=\"title-style mt-3\">Sistemas</p>\n      <div\n        class=\"flex flex-row flex-wrap gap-2 align-items-center justify-content-center mt-5 mb-3\"\n        style=\"width: 250px; height: 100%\">\n        <button\n          *ngFor=\"let aplicativo of apps\"\n          pButton\n          pRipple\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\n          [tooltipPosition]=\"'left'\"\n          (click)=\"selectApp(aplicativo.idaplicativo)\">\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\n        </button>\n      </div>\n    </ng-template>\n  </p-overlayPanel>\n\n  <!-- Painel do usu\u00E1rio -->\n  <p-overlayPanel\n    #meusDadosPanel\n    [showTransitionOptions]=\"'350ms ease-out'\"\n    [hideTransitionOptions]=\"'250ms ease-in'\">\n    <ng-template pTemplate=\"container\">\n      <p class=\"title-style mt-3\">\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\n      </p>\n      <div class=\"mt-5 mb-3\"></div>\n\n      <p-button\n        icon=\"pi pi-lock\"\n        label=\"Acessar Keepass\"\n        (onClick)=\"accessKeePass($event)\"\n        styleClass=\"border-noround w-full text-blue-900\"\n        [text]=\"true\">\n      </p-button>\n\n      <p-button\n        icon=\"pi pi-sign-out\"\n        label=\"Sair\"\n        (onClick)=\"logout($event)\"\n        styleClass=\"border-noround w-full text-blue-900\"\n        [text]=\"true\">\n      </p-button>\n    </ng-template>\n  </p-overlayPanel>\n</div>\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}.btn-sistema{display:flex;align-items:center;justify-content:center;background-color:#0c3e66;font-size:20px}::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,#d4d3d3 16%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.9rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#f5f5f5;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:25px;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{color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .padding-style{padding:15px!important}::ng-deep .menu-option{padding:15px 5px!important}::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{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:auto!important}\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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$7.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: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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: "apps", breadCrumbItems: "breadCrumbItems", masters: "masters", menus: "menus", expandMenu: "expandMenu", logoMenuExpand: "logoMenuExpand", logoMenuHide: "logoMenuHide", selectedApp: "selectedApp", selectedEmpresa: "selectedEmpresa", selectedMaster: "selectedMaster", showButtonApps: "showButtonApps", showButtonUser: "showButtonUser", showExpandMenu: "showExpandMenu", showDropdownLicenca: "showDropdownLicenca", showMenu: "showMenu", showTrocaEmpresa: "showTrocaEmpresa", userName: "userName" }, outputs: { accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit", navigateToDefaultRouteEmit: "navigateToDefaultRouteEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, 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\">\n  @if (showMenu) {\n  <!-- <div [style]=\"{ minWidth: expandMenu ? '300px' : '60px' }\"></div> -->\n  } @if(showMenu) {\n  <p-sidebar\n    #sidebarRef\n    [visible]=\"true\"\n    [showCloseIcon]=\"false\"\n    [modal]=\"false\"\n    [style]=\"{ width: expandMenu ? '300px' : '60px' }\"\n    [@sidebarWidthTrigger]=\"getSidebarState()\"\n    class=\"sidebar-animation\"\n  >\n    <ng-template pTemplate=\"headless\">\n      <div class=\"flex flex-column mx-1\">\n        <div\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2\"\n        >\n          <div\n            class=\"flex {{expandMenu ? 'flex-row' : 'flex-column'}} align-items-center {{\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\n            }} py-3\"\n          >\n            <!-- Logo para o menu expandido -->\n            <img\n              *ngIf=\"expandMenu && logoMenuExpand\"\n              alt=\"Card\"\n              [src]=\"logoMenuExpand\"\n              width=\"150\"\n              class=\"cursor-pointer\"\n              (click)=\"navigateToDefaultRoute()\"\n            />\n\n            <!-- Logo para o menu minimizado-->\n            <img\n              *ngIf=\"!expandMenu && logoMenuHide\"\n              alt=\"Card\"\n              [src]=\"logoMenuHide\"\n              width=\"50\"\n              class=\"mb-2\"\n              (click)=\"navigateToDefaultRoute()\"\n            />\n\n            <!-- Toggle menu -->\n            <button\n              *ngIf=\"showExpandMenu\"\n              pButton\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\n              (click)=\"toggleMenu()\"\n              [pTooltip]=\"expandMenu ? 'Ocultar Menu' : 'Expandir Menu'\"\n              [tooltipPosition]=\"'right'\"\n            >\n              <i class=\"material-symbols-outlined\"> menu </i>\n            </button>\n          </div>\n\n          @if(showTrocaEmpresa){\n          <div\n            class=\"flex flex-row align-items-center {{\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\n            }}\"\n          >\n            <div\n              class=\"flex flex-column cursor-pointer\"\n              *ngIf=\"expandMenu && selectedEmpresa\"\n              (click)=\"changeEmpresa($event)\"\n            >\n              <span\n                class=\"text-sm font-semibold mr-2\"\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\n                [tooltipPosition]=\"'right'\"\n              >\n                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\n              </span>\n              <span class=\"text-sm mt-1\">{{\n                this.selectedEmpresa.cpfcnpj | cpfCnpj\n              }}</span>\n            </div>\n\n            <button\n              pButton\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\n              (click)=\"changeEmpresa($event)\"\n              [pTooltip]=\"'Trocar de empresa'\"\n              [tooltipPosition]=\"'right'\"\n            >\n              <i class=\"material-symbols-outlined\"> sync_alt </i>\n            </button>\n          </div>\n          <p-divider type=\"solid\"></p-divider>\n          }\n        </div>\n\n        <div\n          class=\"list-none m-0  card-container {{ expandMenu ? 'mx-1' : '' }}\"\n          [style.max-height]=\"heightCard - 220 + 'px'\"\n          style=\"overflow-y: auto\"\n        >\n          <!-- menus -->\n          <li *ngFor=\"let menu of menus; let i = index\">\n            <!-- menu que n\u00E3o tem filho -->\n            <a\n              (mouseenter)=\"onMouseEnter(i)\"\n              (mouseleave)=\"onMouseLeave()\"\n              [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n              (click)=\"callRoute(menu.link)\"\n              *ngIf=\"\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\n              \"\n              pRipple\n              [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\n              [tooltipPosition]=\"'right'\"\n              class=\"{{\n                verifySelectedPage(menu.link) ? 'bg-green-600' : ''\n              }} menu-option flex align-items-center no-underline {{\n                !expandMenu ? 'justify-content-center' : ''\n              }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\n            >\n              <i\n                class=\"material-symbols-outlined icon-menu {{\n                  expandMenu ? 'ml-1 mr-2' : ''\n                }}  icon-hover-color {{\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\n                }}\"\n                *ngIf=\"menu.icone\"\n              >\n                {{ menu.icone }}\n              </i>\n              <span\n                class=\"text-base text-blue-900 font-medium {{\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\n                }}\"\n                *ngIf=\"expandMenu\"\n                >{{ menu.descricaomenu }}</span\n              >\n            </a>\n            <!-- menu com filho -->\n            <div *ngIf=\"menu.indmenupai\">\n              <a\n                (mouseenter)=\"onMouseEnter(i)\"\n                (mouseleave)=\"onMouseLeave()\"\n                [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n                pRipple\n                pStyleClass=\"@next\"\n                enterClass=\"hidden\"\n                enterActiveClass=\"slidedown\"\n                leaveToClass=\"hidden\"\n                leaveActiveClass=\"slideup\"\n                class=\"menu-option flex align-items-center {{\n                  !expandMenu\n                    ? 'justify-content-center'\n                    : 'justify-content-between'\n                }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\n                [tooltipPosition]=\"'right'\"\n                [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\n                (click)=\"!expandMenu ? (expandMenu = !expandMenu) : ''\"\n              >\n                <div class=\"flex flex-row align-items-center\">\n                  <i\n                    class=\"material-symbols-outlined icon-menu {{\n                      expandMenu ? 'ml-1 mr-2' : ''\n                    }} icon-hover-color\"\n                    *ngIf=\"menu.icone\"\n                    [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n                  >\n                    {{ menu.icone }}\n                  </i>\n                  <span\n                    class=\"text-base text-blue-900 font-medium\"\n                    *ngIf=\"expandMenu\"\n                    >{{ menu.descricaomenu }}</span\n                  >\n                </div>\n                <i\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color\"\n                  *ngIf=\"expandMenu\"\n                  [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n                ></i>\n              </a>\n\n              <!-- filhos -->\n              <div\n                class=\"list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\n              >\n                <li\n                  *ngFor=\"\n                    let filho of returnMenuChild(menu.idmenu);\n                    let iFilho = index\n                  \"\n                >\n                  <a\n                    (mouseenter)=\"onMouseEnterChild(filho.idmenu)\"\n                    (mouseleave)=\"onMouseLeave()\"\n                    [ngClass]=\"{\n                      'hover-color': mouseOverFilhoIndex === filho.idmenu\n                    }\"\n                    *ngIf=\"expandMenu\"\n                    (click)=\"callRoute(filho.link)\"\n                    pRipple\n                    class=\"{{\n                      verifySelectedPage(filho.link) ? 'bg-green-600' : ''\n                    }} menu-option flex align-items-center no-underline cursor-pointer border-round text-700 hover:bg-green-600 transition-duration-150 transition-colors p-ripple p-2\"\n                  >\n                    <i\n                      class=\"material-symbols-outlined icon-menu {{\n                        expandMenu ? 'ml-1 mr-2' : ''\n                      }} icon-hover-color\"\n                      *ngIf=\"filho.icone\"\n                      [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n                    >\n                      {{ filho.icone }}\n                    </i>\n                    <span\n                      class=\"text-base text-blue-900 ml-4 {{\n                        verifySelectedPage(filho.link) ? 'text-white' : ''\n                      }}\"\n                      *ngIf=\"expandMenu\"\n                      >{{ filho.descricaomenu }}</span\n                    >\n                  </a>\n                </li>\n              </div>\n            </div>\n          </li>\n        </div>\n      </div>\n    </ng-template>\n  </p-sidebar>\n  }\n\n  <!-- Topbar -->\n  <div\n    class=\"w-auto h-screen page-content overflow-y-hidden\"\n    id=\"page-content\"\n    style=\"width: 100vw !important\"\n  >\n    <div class=\"flex flex-row align-items-center justify-content-between m-3\">\n\n      @if(!showMenu) {\n      <!-- Logo home -->\n      <div>\n        <img [src]=\"logoMenuExpand\" width=\"150\" />\n      </div>\n      } \n      \n      @else {\n      <!-- Breadcrumbs -->\n      <div>\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\n          {{ breadCrumbItems[breadCrumbItems.length - 1]?.label }}\n        </p>\n        <p-breadcrumb\n          *ngIf=\"widthCard > 400\"\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\n          [model]=\"breadCrumbItems\"\n          [style]=\"{ backgroundColor: '#d4d3d3' }\"\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"\n        ></p-breadcrumb>\n      </div>\n      }\n\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\n      <dropdown-master\n        *ngIf=\"showLicencas()\"\n        class=\"w-40rem\"\n        formControlName=\"idmaster\"\n        [formGroup]=\"formGroup\"\n        [masters]=\"masters\"\n        (onSelectionChange)=\"changeLicense($event)\"\n        (onSelectionValue)=\"changeLicense($event)\"\n      >\n      </dropdown-master>\n\n      <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\n      <div class=\"w-auto flex flex-row align-items-center gap-2\">\n        <p-button\n          *ngIf=\"showButtonApps\"\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\n          icon=\"pi pi-th-large\"\n          [rounded]=\"true\"\n          [text]=\"true\"\n          (click)=\"sistemasPanel.toggle($event)\"\n          [pTooltip]=\"'Sistemas'\"\n          [tooltipPosition]=\"'left'\"\n        ></p-button>\n\n        <p-button\n          *ngIf=\"showButtonUser\"\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\n          icon=\"pi pi-user\"\n          [rounded]=\"true\"\n          [text]=\"true\"\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\n          [tooltipPosition]=\"'left'\"\n          (click)=\"meusDadosPanel.toggle($event)\"\n        ></p-button>\n      </div>\n    </div>\n\n    <!-- Container -->\n    <p-card\n      styleClass=\"m-3 border-noround overflow-y-auto {{\n        !showMenu && 'sm:overflow-y-hidden'\n      }} card-container\"\n      [style]=\"{ height: heightCard - adjustHeightCard() + 'px' }\"\n    >\n      <div\n        class=\"{{ widthCard < 992 && 'card-container' }} w-full\"\n        [style]=\"{ width: widthCard + 'px' }\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </p-card>\n  </div>\n\n  <!-- Painel de aplicativos -->\n  <p-overlayPanel\n    #sistemasPanel\n    [showTransitionOptions]=\"'350ms ease-out'\"\n    [hideTransitionOptions]=\"'250ms ease-in'\"\n  >\n    <ng-template pTemplate=\"container\">\n      <p class=\"title-style mt-3\">Sistemas</p>\n      <div\n        class=\"flex flex-row flex-wrap gap-2 align-items-center justify-content-center mt-5 mb-3\"\n        style=\"width: 250px; height: 100%\"\n      >\n        <button\n          *ngFor=\"let aplicativo of apps\"\n          pButton\n          pRipple\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\n          [tooltipPosition]=\"'left'\"\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\n        >\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\n        </button>\n      </div>\n    </ng-template>\n  </p-overlayPanel>\n\n  <!-- Painel do usu\u00E1rio -->\n  <p-overlayPanel\n    #meusDadosPanel\n    [showTransitionOptions]=\"'350ms ease-out'\"\n    [hideTransitionOptions]=\"'250ms ease-in'\"\n  >\n    <ng-template pTemplate=\"container\">\n      <p class=\"title-style mt-3\">\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\n      </p>\n      <div class=\"mt-5 mb-3\"></div>\n\n      <p-button\n        icon=\"pi pi-lock\"\n        label=\"Acessar Keepass\"\n        (onClick)=\"accessKeePass($event)\"\n        styleClass=\"border-noround w-full text-blue-900\"\n        [text]=\"true\"\n      >\n      </p-button>\n\n      <p-button\n        icon=\"pi pi-sign-out\"\n        label=\"Sair\"\n        (onClick)=\"logout($event)\"\n        styleClass=\"border-noround w-full text-blue-900\"\n        [text]=\"true\"\n      >\n      </p-button>\n    </ng-template>\n  </p-overlayPanel>\n</div>\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}.btn-sistema{display:flex;align-items:center;justify-content:center;background-color:#0c3e66;font-size:20px}::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,#d4d3d3 16%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.9rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#f5f5f5;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:25px;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{color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .padding-style{padding:15px!important}::ng-deep .menu-option{padding:15px 5px!important}::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{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:auto!important}\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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$7.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: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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" }], animations: [
+            trigger('sidebarWidthTrigger', [
+                state('collapsed', style({
+                    width: '60px'
+                })),
+                state('expanded', style({
+                    width: '359px'
+                })),
+                transition('collapsed <=> expanded', animate('300ms ease-out'))
+            ])
+        ] }); }
 }
 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\">\n\n  @if (showMenu) {\n  <div [style]=\"{ minWidth: expandMenu ? '300px' : '60px' }\"></div>\n  }\n\n  @if(showMenu) {\n  <p-sidebar\n    #sidebarRef\n    [visible]=\"true\"\n    [showCloseIcon]=\"false\"\n    [modal]=\"false\"\n    [style]=\"{ width: expandMenu ? '300px' : '60px' }\">\n    <ng-template pTemplate=\"headless\">\n      <div class=\"flex flex-column mx-1\">\n        <div\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2\">\n          <div\n            class=\"flex flex-row align-items-center {{\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\n            }} py-3\">\n            <!-- Logo para o menu expandido -->\n            <img\n              *ngIf=\"expandMenu && logoMenuExpand\"\n              alt=\"Card\"\n              [src]=\"logoMenuExpand\"\n              width=\"150\"\n              class=\"cursor-pointer\"\n              (click)=\"router.navigate(['/keevocenter/home'])\" />\n\n            <!-- Logo para o menu minimizado-->\n            <img\n              *ngIf=\"!expandMenu && logoMenuHide\"\n              alt=\"Card\"\n              [src]=\"logoMenuExpand\"\n              width=\"150\" />\n\n            <!-- Toggle menu -->\n            <button\n              *ngIf=\"showExpandMenu\"\n              pButton\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\n              (click)=\"toggleMenu()\"\n              [pTooltip]=\"expandMenu ? 'Ocultar Menu' : 'Expandir Menu'\"\n              [tooltipPosition]=\"'right'\">\n              <i class=\"material-symbols-outlined\"> menu </i>\n            </button>\n          </div>\n\n          @if(showTrocaEmpresa){\n          <div\n            class=\"flex flex-row align-items-center {{expandMenu ? 'justify-content-between' : 'justify-content-center'}}\">\n            <div\n              class=\"flex flex-column cursor-pointer\"\n              *ngIf=\"expandMenu && selectedEmpresa\"\n              (click)=\"changeEmpresa($event)\">\n              <span\n                class=\"text-sm font-semibold mr-2\"\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\n                [tooltipPosition]=\"'right'\">\n                {{nameEmpresa(this.selectedEmpresa.razaosocial)}}\n              </span>\n              <span class=\"text-sm mt-1\">{{this.selectedEmpresa.cpfcnpj |\n                cpfCnpj }}</span>\n            </div>\n\n            <button\n              pButton\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\n              (click)=\"changeEmpresa($event)\"\n              [pTooltip]=\"'Trocar de empresa'\"\n              [tooltipPosition]=\"'right'\">\n              <i class=\"material-symbols-outlined\">\n                sync_alt\n              </i>\n            </button>\n\n          </div>\n          <p-divider type=\"solid\"></p-divider>\n          }\n\n        </div>\n\n        <div\n          class=\"list-none m-0  card-container {{ expandMenu ? 'mx-1' : '' }}\"\n          [style.max-height]=\"heightCard - 220 + 'px'\"\n          style=\"overflow-y: auto\">\n          <!-- menus -->\n          <li *ngFor=\"let menu of menus; let i = index\">\n            <!-- menu que n\u00E3o tem filho -->\n            <a\n              (mouseenter)=\"onMouseEnter(i)\"\n              (mouseleave)=\"onMouseLeave()\"\n              [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n              (click)=\"callRoute(menu.link)\"\n              *ngIf=\"\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\n              \"\n              pRipple\n              [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\n              [tooltipPosition]=\"'right'\"\n              class=\"{{\n                verifySelectedPage(menu.link) ? 'bg-green-600' : ''\n              }} menu-option flex align-items-center no-underline {{\n                !expandMenu ? 'justify-content-center' : ''\n              }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\">\n              <i\n                class=\"material-symbols-outlined icon-menu {{\n                  expandMenu ? 'ml-1 mr-2' : ''\n                }}  icon-hover-color {{\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\n                }}\"\n                *ngIf=\"menu.icone\">\n                {{ menu.icone }}\n              </i>\n              <span\n                class=\"text-base text-blue-900 font-medium {{\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\n                }}\"\n                *ngIf=\"expandMenu\">{{ menu.descricaomenu }}</span>\n            </a>\n            <!-- menu com filho -->\n            <div *ngIf=\"menu.indmenupai\">\n              <a\n                (mouseenter)=\"onMouseEnter(i)\"\n                (mouseleave)=\"onMouseLeave()\"\n                [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n                pRipple\n                pStyleClass=\"@next\"\n                enterClass=\"hidden\"\n                enterActiveClass=\"slidedown\"\n                leaveToClass=\"hidden\"\n                leaveActiveClass=\"slideup\"\n                class=\"menu-option flex align-items-center {{\n                  !expandMenu\n                    ? 'justify-content-center'\n                    : 'justify-content-between'\n                }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\n                [tooltipPosition]=\"'right'\"\n                [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\n                (click)=\"!expandMenu ? (expandMenu = !expandMenu) : ''\">\n                <div class=\"flex flex-row align-items-center\">\n                  <i\n                    class=\"material-symbols-outlined icon-menu {{\n                      expandMenu ? 'ml-1 mr-2' : ''\n                    }} icon-hover-color\"\n                    *ngIf=\"menu.icone\"\n                    [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\">\n                    {{ menu.icone }}\n                  </i>\n                  <span\n                    class=\"text-base text-blue-900 font-medium\"\n                    *ngIf=\"expandMenu\">{{ menu.descricaomenu }}</span>\n                </div>\n                <i\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color\"\n                  *ngIf=\"expandMenu\"\n                  [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"></i>\n              </a>\n\n              <!-- filhos -->\n              <div\n                class=\"list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\">\n                <li\n                  *ngFor=\"\n                    let filho of returnMenuChild(menu.idmenu);\n                    let iFilho = index\n                  \">\n                  <a\n                    (mouseenter)=\"onMouseEnterChild(filho.idmenu)\"\n                    (mouseleave)=\"onMouseLeave()\"\n                    [ngClass]=\"{\n                      'hover-color': mouseOverFilhoIndex === filho.idmenu\n                    }\"\n                    *ngIf=\"expandMenu\"\n                    (click)=\"callRoute(filho.link)\"\n                    pRipple\n                    class=\"{{\n                      verifySelectedPage(filho.link) ? 'bg-green-600' : ''\n                    }} menu-option flex align-items-center no-underline cursor-pointer border-round text-700 hover:bg-green-600 transition-duration-150 transition-colors p-ripple p-2\">\n                    <i\n                      class=\"material-symbols-outlined icon-menu {{\n                        expandMenu ? 'ml-1 mr-2' : ''\n                      }} icon-hover-color\"\n                      *ngIf=\"filho.icone\"\n                      [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\">\n                      {{ filho.icone }}\n                    </i>\n                    <span\n                      class=\"text-base text-blue-900 ml-4 {{\n                        verifySelectedPage(filho.link) ? 'text-white' : ''\n                      }}\"\n                      *ngIf=\"expandMenu\">{{ filho.descricaomenu }}</span>\n                  </a>\n                </li>\n              </div>\n            </div>\n          </li>\n        </div>\n      </div>\n    </ng-template>\n  </p-sidebar>\n  }\n\n  <!-- Topbar -->\n  <div class=\"w-auto h-screen page-content overflow-y-hidden\" id=\"page-content\"\n    style=\"width: 100vw !important;\">\n    <div class=\"flex flex-row align-items-center justify-content-between m-3\">\n      <!-- Breadcrumbs -->\n      <div>\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\n          {{ breadCrumbItems[breadCrumbItems.length - 1]?.label }}\n        </p>\n        <p-breadcrumb\n          *ngIf=\"widthCard > 400\"\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\n          [model]=\"breadCrumbItems\"\n          [style]=\"{ backgroundColor: '#d4d3d3' }\"\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"></p-breadcrumb>\n      </div>\n\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\n      <dropdown-master\n        *ngIf=\"showLicencas()\"\n        class=\"w-40rem\"\n        formControlName=\"idmaster\"\n        [formGroup]=\"formGroup\"\n        [masters]=\"masters\"\n        (onSelectionChange)=\"changeLicense($event)\"\n        (onSelectionValue)=\"changeLicense($event)\">\n      </dropdown-master>\n\n      <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\n      <div class=\"w-auto flex flex-row align-items-center gap-2\">\n        <p-button\n          *ngIf=\"showButtonApps\"\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\n          icon=\"pi pi-th-large\"\n          [rounded]=\"true\"\n          [text]=\"true\"\n          (click)=\"sistemasPanel.toggle($event)\"\n          [pTooltip]=\"'Sistemas'\"\n          [tooltipPosition]=\"'left'\"></p-button>\n\n        <p-button\n          *ngIf=\"showButtonUser\"\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\n          icon=\"pi pi-user\"\n          [rounded]=\"true\"\n          [text]=\"true\"\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\n          [tooltipPosition]=\"'left'\"\n          (click)=\"meusDadosPanel.toggle($event)\"></p-button>\n      </div>\n    </div>\n\n    <!-- Container -->\n    <p-card\n      styleClass=\"m-3 border-noround overflow-y-auto {{\n        !showMenu && 'sm:overflow-y-hidden'\n      }} card-container\"\n      [style]=\"{ height: heightCard - adjustHeightCard() + 'px' }\">\n      <div class=\"{{widthCard < 992 && 'card-container'}} w-full\" [style]=\"{ width: widthCard + 'px' }\">\n        <ng-content></ng-content>\n      </div>\n    </p-card>\n  </div>\n\n  <!-- Painel de aplicativos -->\n  <p-overlayPanel\n    #sistemasPanel\n    [showTransitionOptions]=\"'350ms ease-out'\"\n    [hideTransitionOptions]=\"'250ms ease-in'\">\n    <ng-template pTemplate=\"container\">\n      <p class=\"title-style mt-3\">Sistemas</p>\n      <div\n        class=\"flex flex-row flex-wrap gap-2 align-items-center justify-content-center mt-5 mb-3\"\n        style=\"width: 250px; height: 100%\">\n        <button\n          *ngFor=\"let aplicativo of apps\"\n          pButton\n          pRipple\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\n          [tooltipPosition]=\"'left'\"\n          (click)=\"selectApp(aplicativo.idaplicativo)\">\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\n        </button>\n      </div>\n    </ng-template>\n  </p-overlayPanel>\n\n  <!-- Painel do usu\u00E1rio -->\n  <p-overlayPanel\n    #meusDadosPanel\n    [showTransitionOptions]=\"'350ms ease-out'\"\n    [hideTransitionOptions]=\"'250ms ease-in'\">\n    <ng-template pTemplate=\"container\">\n      <p class=\"title-style mt-3\">\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\n      </p>\n      <div class=\"mt-5 mb-3\"></div>\n\n      <p-button\n        icon=\"pi pi-lock\"\n        label=\"Acessar Keepass\"\n        (onClick)=\"accessKeePass($event)\"\n        styleClass=\"border-noround w-full text-blue-900\"\n        [text]=\"true\">\n      </p-button>\n\n      <p-button\n        icon=\"pi pi-sign-out\"\n        label=\"Sair\"\n        (onClick)=\"logout($event)\"\n        styleClass=\"border-noround w-full text-blue-900\"\n        [text]=\"true\">\n      </p-button>\n    </ng-template>\n  </p-overlayPanel>\n</div>\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}.btn-sistema{display:flex;align-items:center;justify-content:center;background-color:#0c3e66;font-size:20px}::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,#d4d3d3 16%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.9rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#f5f5f5;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:25px;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{color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .padding-style{padding:15px!important}::ng-deep .menu-option{padding:15px 5px!important}::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{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:auto!important}\n"] }]
+            args: [{ selector: 'kv-layout', animations: [
+                        trigger('sidebarWidthTrigger', [
+                            state('collapsed', style({
+                                width: '60px'
+                            })),
+                            state('expanded', style({
+                                width: '359px'
+                            })),
+                            transition('collapsed <=> expanded', animate('300ms ease-out'))
+                        ])
+                    ], template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\n  @if (showMenu) {\n  <!-- <div [style]=\"{ minWidth: expandMenu ? '300px' : '60px' }\"></div> -->\n  } @if(showMenu) {\n  <p-sidebar\n    #sidebarRef\n    [visible]=\"true\"\n    [showCloseIcon]=\"false\"\n    [modal]=\"false\"\n    [style]=\"{ width: expandMenu ? '300px' : '60px' }\"\n    [@sidebarWidthTrigger]=\"getSidebarState()\"\n    class=\"sidebar-animation\"\n  >\n    <ng-template pTemplate=\"headless\">\n      <div class=\"flex flex-column mx-1\">\n        <div\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2\"\n        >\n          <div\n            class=\"flex {{expandMenu ? 'flex-row' : 'flex-column'}} align-items-center {{\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\n            }} py-3\"\n          >\n            <!-- Logo para o menu expandido -->\n            <img\n              *ngIf=\"expandMenu && logoMenuExpand\"\n              alt=\"Card\"\n              [src]=\"logoMenuExpand\"\n              width=\"150\"\n              class=\"cursor-pointer\"\n              (click)=\"navigateToDefaultRoute()\"\n            />\n\n            <!-- Logo para o menu minimizado-->\n            <img\n              *ngIf=\"!expandMenu && logoMenuHide\"\n              alt=\"Card\"\n              [src]=\"logoMenuHide\"\n              width=\"50\"\n              class=\"mb-2\"\n              (click)=\"navigateToDefaultRoute()\"\n            />\n\n            <!-- Toggle menu -->\n            <button\n              *ngIf=\"showExpandMenu\"\n              pButton\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\n              (click)=\"toggleMenu()\"\n              [pTooltip]=\"expandMenu ? 'Ocultar Menu' : 'Expandir Menu'\"\n              [tooltipPosition]=\"'right'\"\n            >\n              <i class=\"material-symbols-outlined\"> menu </i>\n            </button>\n          </div>\n\n          @if(showTrocaEmpresa){\n          <div\n            class=\"flex flex-row align-items-center {{\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\n            }}\"\n          >\n            <div\n              class=\"flex flex-column cursor-pointer\"\n              *ngIf=\"expandMenu && selectedEmpresa\"\n              (click)=\"changeEmpresa($event)\"\n            >\n              <span\n                class=\"text-sm font-semibold mr-2\"\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\n                [tooltipPosition]=\"'right'\"\n              >\n                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\n              </span>\n              <span class=\"text-sm mt-1\">{{\n                this.selectedEmpresa.cpfcnpj | cpfCnpj\n              }}</span>\n            </div>\n\n            <button\n              pButton\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\n              (click)=\"changeEmpresa($event)\"\n              [pTooltip]=\"'Trocar de empresa'\"\n              [tooltipPosition]=\"'right'\"\n            >\n              <i class=\"material-symbols-outlined\"> sync_alt </i>\n            </button>\n          </div>\n          <p-divider type=\"solid\"></p-divider>\n          }\n        </div>\n\n        <div\n          class=\"list-none m-0  card-container {{ expandMenu ? 'mx-1' : '' }}\"\n          [style.max-height]=\"heightCard - 220 + 'px'\"\n          style=\"overflow-y: auto\"\n        >\n          <!-- menus -->\n          <li *ngFor=\"let menu of menus; let i = index\">\n            <!-- menu que n\u00E3o tem filho -->\n            <a\n              (mouseenter)=\"onMouseEnter(i)\"\n              (mouseleave)=\"onMouseLeave()\"\n              [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n              (click)=\"callRoute(menu.link)\"\n              *ngIf=\"\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\n              \"\n              pRipple\n              [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\n              [tooltipPosition]=\"'right'\"\n              class=\"{{\n                verifySelectedPage(menu.link) ? 'bg-green-600' : ''\n              }} menu-option flex align-items-center no-underline {{\n                !expandMenu ? 'justify-content-center' : ''\n              }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\n            >\n              <i\n                class=\"material-symbols-outlined icon-menu {{\n                  expandMenu ? 'ml-1 mr-2' : ''\n                }}  icon-hover-color {{\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\n                }}\"\n                *ngIf=\"menu.icone\"\n              >\n                {{ menu.icone }}\n              </i>\n              <span\n                class=\"text-base text-blue-900 font-medium {{\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\n                }}\"\n                *ngIf=\"expandMenu\"\n                >{{ menu.descricaomenu }}</span\n              >\n            </a>\n            <!-- menu com filho -->\n            <div *ngIf=\"menu.indmenupai\">\n              <a\n                (mouseenter)=\"onMouseEnter(i)\"\n                (mouseleave)=\"onMouseLeave()\"\n                [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n                pRipple\n                pStyleClass=\"@next\"\n                enterClass=\"hidden\"\n                enterActiveClass=\"slidedown\"\n                leaveToClass=\"hidden\"\n                leaveActiveClass=\"slideup\"\n                class=\"menu-option flex align-items-center {{\n                  !expandMenu\n                    ? 'justify-content-center'\n                    : 'justify-content-between'\n                }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\n                [tooltipPosition]=\"'right'\"\n                [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\n                (click)=\"!expandMenu ? (expandMenu = !expandMenu) : ''\"\n              >\n                <div class=\"flex flex-row align-items-center\">\n                  <i\n                    class=\"material-symbols-outlined icon-menu {{\n                      expandMenu ? 'ml-1 mr-2' : ''\n                    }} icon-hover-color\"\n                    *ngIf=\"menu.icone\"\n                    [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n                  >\n                    {{ menu.icone }}\n                  </i>\n                  <span\n                    class=\"text-base text-blue-900 font-medium\"\n                    *ngIf=\"expandMenu\"\n                    >{{ menu.descricaomenu }}</span\n                  >\n                </div>\n                <i\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color\"\n                  *ngIf=\"expandMenu\"\n                  [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n                ></i>\n              </a>\n\n              <!-- filhos -->\n              <div\n                class=\"list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\n              >\n                <li\n                  *ngFor=\"\n                    let filho of returnMenuChild(menu.idmenu);\n                    let iFilho = index\n                  \"\n                >\n                  <a\n                    (mouseenter)=\"onMouseEnterChild(filho.idmenu)\"\n                    (mouseleave)=\"onMouseLeave()\"\n                    [ngClass]=\"{\n                      'hover-color': mouseOverFilhoIndex === filho.idmenu\n                    }\"\n                    *ngIf=\"expandMenu\"\n                    (click)=\"callRoute(filho.link)\"\n                    pRipple\n                    class=\"{{\n                      verifySelectedPage(filho.link) ? 'bg-green-600' : ''\n                    }} menu-option flex align-items-center no-underline cursor-pointer border-round text-700 hover:bg-green-600 transition-duration-150 transition-colors p-ripple p-2\"\n                  >\n                    <i\n                      class=\"material-symbols-outlined icon-menu {{\n                        expandMenu ? 'ml-1 mr-2' : ''\n                      }} icon-hover-color\"\n                      *ngIf=\"filho.icone\"\n                      [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\n                    >\n                      {{ filho.icone }}\n                    </i>\n                    <span\n                      class=\"text-base text-blue-900 ml-4 {{\n                        verifySelectedPage(filho.link) ? 'text-white' : ''\n                      }}\"\n                      *ngIf=\"expandMenu\"\n                      >{{ filho.descricaomenu }}</span\n                    >\n                  </a>\n                </li>\n              </div>\n            </div>\n          </li>\n        </div>\n      </div>\n    </ng-template>\n  </p-sidebar>\n  }\n\n  <!-- Topbar -->\n  <div\n    class=\"w-auto h-screen page-content overflow-y-hidden\"\n    id=\"page-content\"\n    style=\"width: 100vw !important\"\n  >\n    <div class=\"flex flex-row align-items-center justify-content-between m-3\">\n\n      @if(!showMenu) {\n      <!-- Logo home -->\n      <div>\n        <img [src]=\"logoMenuExpand\" width=\"150\" />\n      </div>\n      } \n      \n      @else {\n      <!-- Breadcrumbs -->\n      <div>\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\n          {{ breadCrumbItems[breadCrumbItems.length - 1]?.label }}\n        </p>\n        <p-breadcrumb\n          *ngIf=\"widthCard > 400\"\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\n          [model]=\"breadCrumbItems\"\n          [style]=\"{ backgroundColor: '#d4d3d3' }\"\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"\n        ></p-breadcrumb>\n      </div>\n      }\n\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\n      <dropdown-master\n        *ngIf=\"showLicencas()\"\n        class=\"w-40rem\"\n        formControlName=\"idmaster\"\n        [formGroup]=\"formGroup\"\n        [masters]=\"masters\"\n        (onSelectionChange)=\"changeLicense($event)\"\n        (onSelectionValue)=\"changeLicense($event)\"\n      >\n      </dropdown-master>\n\n      <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\n      <div class=\"w-auto flex flex-row align-items-center gap-2\">\n        <p-button\n          *ngIf=\"showButtonApps\"\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\n          icon=\"pi pi-th-large\"\n          [rounded]=\"true\"\n          [text]=\"true\"\n          (click)=\"sistemasPanel.toggle($event)\"\n          [pTooltip]=\"'Sistemas'\"\n          [tooltipPosition]=\"'left'\"\n        ></p-button>\n\n        <p-button\n          *ngIf=\"showButtonUser\"\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\n          icon=\"pi pi-user\"\n          [rounded]=\"true\"\n          [text]=\"true\"\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\n          [tooltipPosition]=\"'left'\"\n          (click)=\"meusDadosPanel.toggle($event)\"\n        ></p-button>\n      </div>\n    </div>\n\n    <!-- Container -->\n    <p-card\n      styleClass=\"m-3 border-noround overflow-y-auto {{\n        !showMenu && 'sm:overflow-y-hidden'\n      }} card-container\"\n      [style]=\"{ height: heightCard - adjustHeightCard() + 'px' }\"\n    >\n      <div\n        class=\"{{ widthCard < 992 && 'card-container' }} w-full\"\n        [style]=\"{ width: widthCard + 'px' }\"\n      >\n        <ng-content></ng-content>\n      </div>\n    </p-card>\n  </div>\n\n  <!-- Painel de aplicativos -->\n  <p-overlayPanel\n    #sistemasPanel\n    [showTransitionOptions]=\"'350ms ease-out'\"\n    [hideTransitionOptions]=\"'250ms ease-in'\"\n  >\n    <ng-template pTemplate=\"container\">\n      <p class=\"title-style mt-3\">Sistemas</p>\n      <div\n        class=\"flex flex-row flex-wrap gap-2 align-items-center justify-content-center mt-5 mb-3\"\n        style=\"width: 250px; height: 100%\"\n      >\n        <button\n          *ngFor=\"let aplicativo of apps\"\n          pButton\n          pRipple\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\n          [tooltipPosition]=\"'left'\"\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\n        >\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\n        </button>\n      </div>\n    </ng-template>\n  </p-overlayPanel>\n\n  <!-- Painel do usu\u00E1rio -->\n  <p-overlayPanel\n    #meusDadosPanel\n    [showTransitionOptions]=\"'350ms ease-out'\"\n    [hideTransitionOptions]=\"'250ms ease-in'\"\n  >\n    <ng-template pTemplate=\"container\">\n      <p class=\"title-style mt-3\">\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\n      </p>\n      <div class=\"mt-5 mb-3\"></div>\n\n      <p-button\n        icon=\"pi pi-lock\"\n        label=\"Acessar Keepass\"\n        (onClick)=\"accessKeePass($event)\"\n        styleClass=\"border-noround w-full text-blue-900\"\n        [text]=\"true\"\n      >\n      </p-button>\n\n      <p-button\n        icon=\"pi pi-sign-out\"\n        label=\"Sair\"\n        (onClick)=\"logout($event)\"\n        styleClass=\"border-noround w-full text-blue-900\"\n        [text]=\"true\"\n      >\n      </p-button>\n    </ng-template>\n  </p-overlayPanel>\n</div>\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}.btn-sistema{display:flex;align-items:center;justify-content:center;background-color:#0c3e66;font-size:20px}::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,#d4d3d3 16%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.9rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#f5f5f5;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:25px;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{color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .padding-style{padding:15px!important}::ng-deep .menu-option{padding:15px 5px!important}::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{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:auto!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$1.FormBuilder }, { type: i3$1.Router }], propDecorators: { apps: [{
                 type: Input
             }], breadCrumbItems: [{
@@ -4716,6 +4743,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 type: Output
             }], selectAppEmit: [{
                 type: Output
+            }], navigateToDefaultRouteEmit: [{
+                type: Output
             }], meusDadosPanel: [{
                 type: ViewChild,
                 args: ['meusDadosPanel']
@@ -6104,60 +6133,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 }]
         }] });
 
-class WorkspaceComponent {
+class WokspaceLogoComponent {
     constructor() {
-        /**
-         * Nome do usuário logado
-         */
         this.nomeUsuario = 'Nome do Usuário Logado';
-        /**
-         * Selecionar apenas master
-         */
-        this.somenteMaster = false;
-        /**
-         * Evento de master selecionada
-         */
-        this.onGetMasterSelecionada = new EventEmitter();
-        /**
-         * Evento de empresa selecionada
-         */
-        this.onGetEmpresaSelecionada = new EventEmitter();
-        this.totalRecordsEmpresa = 0;
-        this.showPaginatorEmpresa = false;
-        this.visivel = true;
-        this.txtPesquisa = '';
-        this.imgPersonagens = '';
-        this.imgLogoKeevo = '';
-        this.styleBackground = '';
-        this.imgLogoKeevoCenter = '';
-        //Tabela Master
-        this.dataSourceMaster = [];
-        this.tableSizeMaster = 5;
-        //Tabela  Empresa
-        this.dataSourceEmpresa = [];
-        this.tableSizeEmpresa = 5;
-    }
-    activeItemEmpresa(e) {
-        this.selectedItemEmpresa = e;
-    }
-    activeItemMaster(e) {
-        this.selectedItemMaster = e;
-    }
-    columnConfigTableMaster() {
-        this.dataSourceMaster = this.masters;
-        this.tableConfigMaster = {
-            lazy: false,
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WokspaceLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: WokspaceLogoComponent, selector: "kv-workspace-logo", inputs: { imgLogoKeevoCenter: "imgLogoKeevoCenter", nomeUsuario: "nomeUsuario", masterSelecionada: "masterSelecionada" }, ngImport: i0, template: "<div class=\"field col-12 flex justify-content-center mb-1\">\n  <img [src]=\"imgLogoKeevoCenter\" style=\"width: 200px\" />\n</div>\n\n<div class=\"col-12 align-items-center z-5\">\n  <div class=\"col-9\">\n    Ol\u00E1, <b>{{ nomeUsuario }}.</b> Bem-vindo(a)!\n  </div>\n\n  @if(!masterSelecionada){\n  <b class=\"field col-9 flex\">\n    Escolha qual workspace voc\u00EA deseja acessar:\n  </b>\n  }\n  @else {\n  <b class=\"field col-9 flex\">\n    Escolha qual empresa voc\u00EA deseja acessar:\n  </b>\n  }\n</div>", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WokspaceLogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kv-workspace-logo', template: "<div class=\"field col-12 flex justify-content-center mb-1\">\n  <img [src]=\"imgLogoKeevoCenter\" style=\"width: 200px\" />\n</div>\n\n<div class=\"col-12 align-items-center z-5\">\n  <div class=\"col-9\">\n    Ol\u00E1, <b>{{ nomeUsuario }}.</b> Bem-vindo(a)!\n  </div>\n\n  @if(!masterSelecionada){\n  <b class=\"field col-9 flex\">\n    Escolha qual workspace voc\u00EA deseja acessar:\n  </b>\n  }\n  @else {\n  <b class=\"field col-9 flex\">\n    Escolha qual empresa voc\u00EA deseja acessar:\n  </b>\n  }\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { imgLogoKeevoCenter: [{
+                type: Input
+            }], nomeUsuario: [{
+                type: Input
+            }], masterSelecionada: [{
+                type: Input
+            }] } });
+
+class WorkspaceEmpresaComponent {
+    constructor() {
+        this.empresas = [];
+        this.totalEmpresas = 0;
+        this.onEmpresaSelecionada = new EventEmitter();
+        this.onPaginate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.configTable();
+    }
+    activeItem(e) {
+        this.empresaSelecionada = e;
+    }
+    configTable() {
+        this.tableConfig = {
+            lazy: true,
             columns: [
-                { position: 0, field: 'idmaster', header: 'Licença', width: '', centralize: false, sortable: false },
-                { position: 1, field: 'nome', header: '', width: '80%', centralize: false, sortable: false, },
+                { position: 0, field: 'codigopessoa', header: 'Código', width: '', centralize: false, sortable: false },
+                { position: 1, field: 'cpfcnpj', header: 'CPF/CNPJ', width: '', centralize: false, sortable: false, pipe: 'cpfcnpj' },
+                { position: 2, field: 'razaosocial', header: 'Razão social', width: '50%', centralize: false, sortable: false },
             ],
             actions: [
                 {
                     label: 'Acessar',
                     icon: 'login',
-                    tooltip: 'Acessar Workspace',
+                    tooltip: 'Acessar Empresa',
                     command: () => {
-                        this.selecionarMaster(this.selectedItemMaster);
+                        this.selecionarEmpresa(this.empresaSelecionada);
                     },
                     disabled: () => {
                         return false;
@@ -6165,27 +6188,66 @@ class WorkspaceComponent {
                 },
             ],
             actionsLote: [],
-            enableCation: false,
-            enableFilter: false,
+            enableCation: true,
+            enableFilter: true,
             enableSelect: false,
         };
     }
-    columnConfigTableEmpresa() {
-        this.dataSourceEmpresa = this.empresas;
-        this.tableConfigEmpresa = {
+    doubleClick(e) {
+        this.empresaSelecionada = e.rowData;
+        this.selecionarEmpresa(this.empresaSelecionada);
+    }
+    paginate(event) {
+        this.onPaginate.emit(event);
+    }
+    selecionarEmpresa(empresa) {
+        this.empresaSelecionada = empresa;
+        this.onEmpresaSelecionada.emit(this.empresaSelecionada);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WorkspaceEmpresaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: WorkspaceEmpresaComponent, selector: "kv-workspace-empresa", inputs: { empresas: "empresas", empresaSelecionada: "empresaSelecionada", totalEmpresas: "totalEmpresas" }, outputs: { onEmpresaSelecionada: "onEmpresaSelecionada", onPaginate: "onPaginate" }, ngImport: i0, template: "<kv-table\n  [config]=\"tableConfig\"\n  [dataSource]=\"empresas\"\n  [isTableScrollable]=\"true\"\n  [paginator]=\"true\"\n  [rows]=\"5\"\n  [rowsPerPageOptions]=\"[5]\"\n  [scrollHeight]=\"'300px'\"\n  [tableSize]=\"5\"\n  [totalRecords]=\"totalEmpresas\"\n  (doubleClickEvent)=\"doubleClick($event)\"\n  (onActiveItem)=\"activeItem($event)\"\n  (onPaginate)=\"paginate($event)\">\n</kv-table>", styles: [""], dependencies: [{ kind: "component", type: KvTableComponent, selector: "kv-table", inputs: ["templates", "config", "defaultSortField", "dataSource", "selectedItems", "totalRecords", "paginator", "rowsPerPageOptions", "rows", "tableSize", "filterColumnsBtn", "filtrosAvancados", "scrollHeight", "isTableScrollable", "tableCaptalized", "rowTrackBy", "responsiveLayout", "disabledHeaderCheckbox", "applyStyle", "pageLinksOptions", "showFirstLastIcon"], outputs: ["onActiveItem", "onActiveItemLote", "onPaginate", "onSelectionChange", "doubleClickEvent", "filterField", "onSwitchTableChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WorkspaceEmpresaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kv-workspace-empresa', template: "<kv-table\n  [config]=\"tableConfig\"\n  [dataSource]=\"empresas\"\n  [isTableScrollable]=\"true\"\n  [paginator]=\"true\"\n  [rows]=\"5\"\n  [rowsPerPageOptions]=\"[5]\"\n  [scrollHeight]=\"'300px'\"\n  [tableSize]=\"5\"\n  [totalRecords]=\"totalEmpresas\"\n  (doubleClickEvent)=\"doubleClick($event)\"\n  (onActiveItem)=\"activeItem($event)\"\n  (onPaginate)=\"paginate($event)\">\n</kv-table>" }]
+        }], ctorParameters: () => [], propDecorators: { empresas: [{
+                type: Input
+            }], empresaSelecionada: [{
+                type: Input
+            }], totalEmpresas: [{
+                type: Input
+            }], onEmpresaSelecionada: [{
+                type: Output
+            }], onPaginate: [{
+                type: Output
+            }] } });
+
+class WorkspaceMasterComponent {
+    constructor() {
+        this.dataSource = [];
+        this.onMasterSelecionada = new EventEmitter();
+    }
+    ngOnInit() {
+        this.configTable();
+    }
+    activeItem(e) {
+        this.masterSelecionada = e;
+    }
+    configTable() {
+        this.dataSource = this.masters;
+        this.tableConfig = {
             lazy: false,
             columns: [
-                { position: 0, field: 'codigopessoa', header: 'Código', width: '', centralize: false, sortable: false },
-                { position: 1, field: 'cpfcnpj', header: 'CPF/CNPJ', width: '', centralize: false, sortable: false, pipe: 'cpfcnpj' },
-                { position: 2, field: 'razaosocial', header: 'Razão social', width: '50%', centralize: false, sortable: false },
+                { position: 0, field: 'idmaster', header: 'Licença', width: '', centralize: false, sortable: false },
+                { position: 1, field: 'nome', header: '', width: '80%', centralize: false, sortable: false, },
             ],
             actions: [
                 {
                     label: 'Acessar',
                     icon: 'login',
-                    tooltip: 'Acessar Empresa',
+                    tooltip: 'Acessar Workspace',
                     command: () => {
-                        this.selecionarEmpresa(this.selectedItemEmpresa);
+                        this.selecionarMaster(this.masterSelecionada);
                     },
                     disabled: () => {
                         return false;
@@ -6193,82 +6255,94 @@ class WorkspaceComponent {
                 },
             ],
             actionsLote: [],
-            enableCation: true,
-            enableFilter: true,
+            enableCation: false,
+            enableFilter: false,
             enableSelect: false,
         };
     }
-    doubleClickEmpresa(e) {
-        this.selectedItemEmpresa = e.rowData;
-        this.selecionarEmpresa(e.rowData);
+    doubleClick(e) {
+        this.masterSelecionada = e.rowData;
+        this.selecionarMaster(this.masterSelecionada);
     }
-    doubleClickMaster(e) {
-        this.selectedItemMaster = e.rowData;
-        this.selecionarMaster(e.rowData);
+    selecionarMaster(master) {
+        this.masterSelecionada = master;
+        this.onMasterSelecionada.emit(this.masterSelecionada);
     }
-    filtrarEmpresa(event) {
-        this.empresas = this.masterSelecionada.empresas.filter((e) => e.nomeempresa.toLowerCase().includes(event.toLowerCase()));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WorkspaceMasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: WorkspaceMasterComponent, selector: "kv-workspace-master", inputs: { masters: "masters", masterSelecionada: "masterSelecionada" }, outputs: { onMasterSelecionada: "onMasterSelecionada" }, ngImport: i0, template: "<kv-table\n  [tableSize]=\"5\"\n  [rows]=\"5\"\n  [config]=\"tableConfig\"\n  [paginator]=\"false\"\n  [dataSource]=\"dataSource\"\n  [rowsPerPageOptions]=\"[5, 10, 25, 50, 100, 200]\"\n  (doubleClickEvent)=\"doubleClick($event)\"\n  (onActiveItem)=\"activeItem($event)\"\n  [isTableScrollable]=\"true\"\n  [scrollHeight]=\"'300px'\">\n</kv-table>", styles: [""], dependencies: [{ kind: "component", type: KvTableComponent, selector: "kv-table", inputs: ["templates", "config", "defaultSortField", "dataSource", "selectedItems", "totalRecords", "paginator", "rowsPerPageOptions", "rows", "tableSize", "filterColumnsBtn", "filtrosAvancados", "scrollHeight", "isTableScrollable", "tableCaptalized", "rowTrackBy", "responsiveLayout", "disabledHeaderCheckbox", "applyStyle", "pageLinksOptions", "showFirstLastIcon"], outputs: ["onActiveItem", "onActiveItemLote", "onPaginate", "onSelectionChange", "doubleClickEvent", "filterField", "onSwitchTableChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WorkspaceMasterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kv-workspace-master', template: "<kv-table\n  [tableSize]=\"5\"\n  [rows]=\"5\"\n  [config]=\"tableConfig\"\n  [paginator]=\"false\"\n  [dataSource]=\"dataSource\"\n  [rowsPerPageOptions]=\"[5, 10, 25, 50, 100, 200]\"\n  (doubleClickEvent)=\"doubleClick($event)\"\n  (onActiveItem)=\"activeItem($event)\"\n  [isTableScrollable]=\"true\"\n  [scrollHeight]=\"'300px'\">\n</kv-table>" }]
+        }], ctorParameters: () => [], propDecorators: { masters: [{
+                type: Input
+            }], masterSelecionada: [{
+                type: Input
+            }], onMasterSelecionada: [{
+                type: Output
+            }] } });
+
+class WorkspaceComponent {
+    constructor() {
+        this.nomeUsuario = 'Nome do Usuário Logado';
+        this.somenteMaster = true;
+        this.visivel = true;
+        this.totalEmpresas = 0;
+        this.onGetMasterSelecionada = new EventEmitter();
+        this.onGetEmpresaSelecionada = new EventEmitter();
+        this.onPaginate = new EventEmitter();
     }
     ngOnInit() {
         this.imgPersonagens = ImagensService.getPersonagensWorkSpace();
         this.imgLogoKeevo = ImagensService.getLogoKeevo();
         this.imgLogoKeevoCenter = ImagensService.getLogoKeevoCenter();
         this.styleBackground = 'background-image: url(' + ImagensService.getBackgroundWorkSpace() + ');';
-        this.columnConfigTableMaster();
-        this.verificaMasterUnica();
+    }
+    paginate(event) {
+        this.onPaginate.emit(event);
     }
     selecionarEmpresa(empresa) {
         this.onGetEmpresaSelecionada.emit(empresa);
-        this.empresaSelecionada = empresa;
-        this.visivel = false;
-    }
-    selecionarMaster(master) {
-        this.onGetMasterSelecionada.emit(master);
-        this.masterSelecionada = master;
-        if (this.somenteMaster)
-            this.visivel = false;
-        else {
-            this.empresas = master.empresas;
-            this.showPaginatorEmpresa = (this.empresas.length > 5);
-            this.columnConfigTableEmpresa();
-            this.verificaEmpresaUnica();
-        }
-    }
-    verificaEmpresaUnica() {
-        if (this.empresas && this.empresas.length == 1)
-            this.selecionarEmpresa(this.empresas[0]);
     }
-    verificaMasterUnica() {
-        if (this.masters.length == 1)
-            this.selecionarMaster(this.masters[0]);
-    }
-    voltar() {
-        this.empresaSelecionada = undefined;
-        this.masterSelecionada = undefined;
+    selecionarMaster(event) {
+        this.onGetMasterSelecionada.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WorkspaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: WorkspaceComponent, selector: "kv-workspace", inputs: { nomeUsuario: "nomeUsuario", masters: "masters", masterSelecionada: "masterSelecionada", somenteMaster: "somenteMaster" }, outputs: { onGetMasterSelecionada: "onGetMasterSelecionada", onGetEmpresaSelecionada: "onGetEmpresaSelecionada" }, ngImport: i0, template: "<div *ngIf=\"visivel\" [style]=\"styleBackground\"\n  class=\"h-screen flex justify-content-center align-items-center login-container flex-column bg-cover\">\n  <div id=\"card-container\"\n    class=\"flex flex-column justify-content-around card-login formgrid p-fluid  bg-white border-round p-2\">\n    <div class=\"field col-12 flex justify-content-center mb-1\">\n      <img [src]=\"imgLogoKeevoCenter\" style=\"width: 200px\" />\n    </div>\n\n    <div class=\"col-12 align-items-center z-5\">\n      <div class=\"col-9\">\n        Ol\u00E1, <b>{{ nomeUsuario }}.</b> Bem-vindo(a)!\n      </div>\n      <b class=\"field col-9 flex\">\n        Escolha qual Workspace voc\u00EA deseja acessar:</b>\n    </div>\n\n    <!-- IN\u00CDCIO DO WORKSPACE DE CONTABILIDADE (MASTERS) -->\n    <div *ngIf=\"!masterSelecionada\" class=\"col-12 z-5\">\n\n      <kv-table\n        [tableSize]=\"tableSizeMaster\"\n        [rows]=\"5\"\n        [config]=\"tableConfigMaster\"\n        [paginator]=\"false\"\n        [dataSource]=\"dataSourceMaster\"\n        [rowsPerPageOptions]=\"[5, 10, 25, 50, 100, 200]\"\n        (doubleClickEvent)=\"doubleClickMaster($event)\"\n        (onActiveItem)=\"activeItemMaster($event)\"\n        [isTableScrollable]=\"true\"\n        [scrollHeight]=\"'300px'\">\n      </kv-table>\n\n    </div>\n    <!-- FIM DO WORKSPACE DE CONTABILIDADE (MASTERS) -->\n\n    <!-- IN\u00CDCIO DO WORKSPACE EMPRESA -->\n    <div *ngIf=\"masterSelecionada && !empresaSelecionada\" class=\"col-12 z-5\">\n      <kv-table\n        [tableSize]=\"tableSizeEmpresa\"\n        [rows]=\"5\"\n        [config]=\"tableConfigEmpresa\"\n        [paginator]=\"showPaginatorEmpresa\"\n        [dataSource]=\"dataSourceEmpresa\"\n        [rowsPerPageOptions]=\"[5]\"\n        (doubleClickEvent)=\"doubleClickEmpresa($event)\"\n        (onActiveItem)=\"activeItemEmpresa($event)\"\n        [isTableScrollable]=\"true\"\n        [scrollHeight]=\"'300px'\">\n      </kv-table>\n    </div>\n    <!-- FIM DO WORKSPACE EMPRESA -->\n  </div>\n</div>\n", styles: [".card-login{width:80%;max-width:800px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KvTableComponent, selector: "kv-table", inputs: ["templates", "config", "defaultSortField", "dataSource", "selectedItems", "totalRecords", "paginator", "rowsPerPageOptions", "rows", "tableSize", "filterColumnsBtn", "filtrosAvancados", "scrollHeight", "isTableScrollable", "tableCaptalized", "rowTrackBy", "responsiveLayout", "disabledHeaderCheckbox", "applyStyle", "pageLinksOptions", "showFirstLastIcon"], outputs: ["onActiveItem", "onActiveItemLote", "onPaginate", "onSelectionChange", "doubleClickEvent", "filterField", "onSwitchTableChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: WorkspaceComponent, selector: "kv-workspace", inputs: { nomeUsuario: "nomeUsuario", somenteMaster: "somenteMaster", visivel: "visivel", empresas: "empresas", empresaSelecionada: "empresaSelecionada", totalEmpresas: "totalEmpresas", masters: "masters", masterSelecionada: "masterSelecionada" }, outputs: { onGetMasterSelecionada: "onGetMasterSelecionada", onGetEmpresaSelecionada: "onGetEmpresaSelecionada", onPaginate: "onPaginate" }, ngImport: i0, template: "@if(visivel){\n<div [style]=\"styleBackground\" class=\"h-screen flex justify-content-center align-items-center login-container flex-column bg-cover\">\n  <div id=\"card-container\" class=\"flex flex-column justify-content-around card-login formgrid p-fluid  bg-white border-round p-2\">\n\n    <kv-workspace-logo\n      [imgLogoKeevoCenter]=\"imgLogoKeevoCenter\"\n      [masterSelecionada]=\"masterSelecionada\"\n      [nomeUsuario]=\"nomeUsuario\">\n    </kv-workspace-logo>\n\n    @if(!masterSelecionada){\n    <div class=\"col-12 z-5\">\n      <kv-workspace-master\n        [masters]=\"masters\"\n        [masterSelecionada]=\"masterSelecionada\"\n        (onMasterSelecionada)=\"selecionarMaster($event)\">\n      </kv-workspace-master>\n    </div>\n    }\n\n    @if(!somenteMaster && masterSelecionada){\n    <kv-workspace-empresa\n      [empresas]=\"empresas\"\n      [totalEmpresas]=\"totalEmpresas\"\n      (onEmpresaSelecionada)=\"selecionarEmpresa($event)\"\n      (onPaginate)=\"paginate($event)\">\n    </kv-workspace-empresa>\n    }\n\n  </div>\n</div>\n}", styles: [".card-login{width:80%;max-width:800px}\n"], dependencies: [{ kind: "component", type: WorkspaceEmpresaComponent, selector: "kv-workspace-empresa", inputs: ["empresas", "empresaSelecionada", "totalEmpresas"], outputs: ["onEmpresaSelecionada", "onPaginate"] }, { kind: "component", type: WokspaceLogoComponent, selector: "kv-workspace-logo", inputs: ["imgLogoKeevoCenter", "nomeUsuario", "masterSelecionada"] }, { kind: "component", type: WorkspaceMasterComponent, selector: "kv-workspace-master", inputs: ["masters", "masterSelecionada"], outputs: ["onMasterSelecionada"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WorkspaceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-workspace', template: "<div *ngIf=\"visivel\" [style]=\"styleBackground\"\n  class=\"h-screen flex justify-content-center align-items-center login-container flex-column bg-cover\">\n  <div id=\"card-container\"\n    class=\"flex flex-column justify-content-around card-login formgrid p-fluid  bg-white border-round p-2\">\n    <div class=\"field col-12 flex justify-content-center mb-1\">\n      <img [src]=\"imgLogoKeevoCenter\" style=\"width: 200px\" />\n    </div>\n\n    <div class=\"col-12 align-items-center z-5\">\n      <div class=\"col-9\">\n        Ol\u00E1, <b>{{ nomeUsuario }}.</b> Bem-vindo(a)!\n      </div>\n      <b class=\"field col-9 flex\">\n        Escolha qual Workspace voc\u00EA deseja acessar:</b>\n    </div>\n\n    <!-- IN\u00CDCIO DO WORKSPACE DE CONTABILIDADE (MASTERS) -->\n    <div *ngIf=\"!masterSelecionada\" class=\"col-12 z-5\">\n\n      <kv-table\n        [tableSize]=\"tableSizeMaster\"\n        [rows]=\"5\"\n        [config]=\"tableConfigMaster\"\n        [paginator]=\"false\"\n        [dataSource]=\"dataSourceMaster\"\n        [rowsPerPageOptions]=\"[5, 10, 25, 50, 100, 200]\"\n        (doubleClickEvent)=\"doubleClickMaster($event)\"\n        (onActiveItem)=\"activeItemMaster($event)\"\n        [isTableScrollable]=\"true\"\n        [scrollHeight]=\"'300px'\">\n      </kv-table>\n\n    </div>\n    <!-- FIM DO WORKSPACE DE CONTABILIDADE (MASTERS) -->\n\n    <!-- IN\u00CDCIO DO WORKSPACE EMPRESA -->\n    <div *ngIf=\"masterSelecionada && !empresaSelecionada\" class=\"col-12 z-5\">\n      <kv-table\n        [tableSize]=\"tableSizeEmpresa\"\n        [rows]=\"5\"\n        [config]=\"tableConfigEmpresa\"\n        [paginator]=\"showPaginatorEmpresa\"\n        [dataSource]=\"dataSourceEmpresa\"\n        [rowsPerPageOptions]=\"[5]\"\n        (doubleClickEvent)=\"doubleClickEmpresa($event)\"\n        (onActiveItem)=\"activeItemEmpresa($event)\"\n        [isTableScrollable]=\"true\"\n        [scrollHeight]=\"'300px'\">\n      </kv-table>\n    </div>\n    <!-- FIM DO WORKSPACE EMPRESA -->\n  </div>\n</div>\n", styles: [".card-login{width:80%;max-width:800px}\n"] }]
+            args: [{ selector: 'kv-workspace', template: "@if(visivel){\n<div [style]=\"styleBackground\" class=\"h-screen flex justify-content-center align-items-center login-container flex-column bg-cover\">\n  <div id=\"card-container\" class=\"flex flex-column justify-content-around card-login formgrid p-fluid  bg-white border-round p-2\">\n\n    <kv-workspace-logo\n      [imgLogoKeevoCenter]=\"imgLogoKeevoCenter\"\n      [masterSelecionada]=\"masterSelecionada\"\n      [nomeUsuario]=\"nomeUsuario\">\n    </kv-workspace-logo>\n\n    @if(!masterSelecionada){\n    <div class=\"col-12 z-5\">\n      <kv-workspace-master\n        [masters]=\"masters\"\n        [masterSelecionada]=\"masterSelecionada\"\n        (onMasterSelecionada)=\"selecionarMaster($event)\">\n      </kv-workspace-master>\n    </div>\n    }\n\n    @if(!somenteMaster && masterSelecionada){\n    <kv-workspace-empresa\n      [empresas]=\"empresas\"\n      [totalEmpresas]=\"totalEmpresas\"\n      (onEmpresaSelecionada)=\"selecionarEmpresa($event)\"\n      (onPaginate)=\"paginate($event)\">\n    </kv-workspace-empresa>\n    }\n\n  </div>\n</div>\n}", styles: [".card-login{width:80%;max-width:800px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { nomeUsuario: [{
                 type: Input
+            }], somenteMaster: [{
+                type: Input
+            }], visivel: [{
+                type: Input
+            }], empresas: [{
+                type: Input
+            }], empresaSelecionada: [{
+                type: Input
+            }], totalEmpresas: [{
+                type: Input
             }], masters: [{
                 type: Input
             }], masterSelecionada: [{
                 type: Input
-            }], somenteMaster: [{
-                type: Input
             }], onGetMasterSelecionada: [{
                 type: Output
             }], onGetEmpresaSelecionada: [{
                 type: Output
+            }], onPaginate: [{
+                type: Output
             }] } });
 
 class KvWorkspaceModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvWorkspaceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvWorkspaceModule, declarations: [WorkspaceComponent], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvWorkspaceModule, declarations: [WorkspaceComponent,
+            WorkspaceEmpresaComponent,
+            WokspaceLogoComponent,
+            WorkspaceMasterComponent], imports: [CommonModule,
             PrimeNgModule,
             ReactiveFormsModule,
             ProgressSpinnerModule,
@@ -6289,7 +6363,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
             type: NgModule,
             args: [{
                     declarations: [
-                        WorkspaceComponent
+                        WorkspaceComponent,
+                        WorkspaceEmpresaComponent,
+                        WokspaceLogoComponent,
+                        WorkspaceMasterComponent
                     ],
                     exports: [
                         WorkspaceComponent